diff --git a/.github/workflows/compare_translations.py b/.github/workflows/compare_translations.py
new file mode 100644
index 0000000000..f6f22e843c
--- /dev/null
+++ b/.github/workflows/compare_translations.py
@@ -0,0 +1,170 @@
+"""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 load_translation(filepath):
+    """Load translation from a file.
+
+    Args:
+        filepath: Path to the translation file
+
+    Returns:
+        translation: Loaded translation
+    """
+    with open(filepath, "r", encoding="utf-8") as file:
+        translation = json.load(file)
+    return translation
+
+
+def check_translations(directory):
+    """Load default translation and compare with other translations.
+
+    Args:
+        directory (str): The directory containing translation files.
+
+    Returns:
+        None
+    """
+    default_file = "en.json"
+    default_translation = load_translation(os.path.join(directory, default_file))
+    translations = os.listdir(directory)
+    translations.remove(default_file)  # Exclude default translation
+
+    error_found = False
+
+    for translation_file in translations:
+        other_file = os.path.join(directory, translation_file)
+        other_translation = load_translation(other_file)
+
+        # Compare translations and get detailed error messages
+        errors = compare_translations(
+            default_translation, other_translation, default_file, translation_file
+        )
+        if errors:
+            error_found = True
+            print(f"File {translation_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/count_changed_files.py b/.github/workflows/count_changed_files.py
new file mode 100644
index 0000000000..64fbc8bbfa
--- /dev/null
+++ b/.github/workflows/count_changed_files.py
@@ -0,0 +1,132 @@
+#!/usr/bin/env python3
+# -*- coding: UTF-8 -*-
+"""Script to limit number of file changes in single PR.
+
+Methodology:
+
+    Analyses the Pull request to find if the count of file changed in a pr
+    exceeds a pre-defined nummber 20
+
+    This scripts encourages contributors to align with project practices,
+    reducing the likelihood of unintentional merges into incorrect branches.
+
+NOTE:
+
+    This script complies with our python3 coding and documentation standards.
+    It complies with:
+
+        1) Pylint
+        2) Pydocstyle
+        3) Pycodestyle
+        4) Flake8
+
+"""
+
+import sys
+import argparse
+import subprocess
+
+
+def _count_changed_files(base_branch, pr_branch):
+    """
+    Count the number of changed files between two branches.
+
+    Args:
+        base_branch (str): The base branch.
+        pr_branch (str): The PR branch.
+
+    Returns:
+        int: The number of changed files.
+
+    Raises:
+        SystemExit: If an error occurs during execution.
+    """
+    base_branch = f"origin/{base_branch}"
+    pr_branch = f"origin/{pr_branch}"
+
+    command = f"git diff --name-only {base_branch}...{pr_branch} | wc -l"
+
+    try:
+        # Run git command to get the list of changed files
+        process = subprocess.Popen(
+            command, shell=True, stdout=subprocess.PIPE, stderr=subprocess.PIPE
+        )
+        output, error = process.communicate()
+    except Exception as e:
+        print(f"Error: {e}")
+        sys.exit(1)
+ 
+    file_count = int(output.strip())
+    return file_count
+
+def _arg_parser_resolver():
+    """Resolve the CLI arguments provided by the user.
+
+    Args:
+        None
+
+    Returns:
+        result: Parsed argument object
+
+    """
+    parser = argparse.ArgumentParser()
+    parser.add_argument(
+        "--base_branch",
+        type=str,
+        required=True,
+        help="Base branch where pull request should be made."
+    ),
+    parser.add_argument(
+        "--pr_branch",
+        type=str,
+        required=True,
+        help="PR branch from where the pull request is made.",
+    ),
+    parser.add_argument(
+        "--file_count",
+        type=int,
+        default=20,
+        help="Number of files changes allowed in a single commit")
+    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 base branch and PR commit from
+       command line arguments.
+    2. Counts the number of changed files between the specified branches.
+    3. Checks if the count of changed files exceeds the acceptable
+       limit (20).
+    4. Provides informative messages based on the analysis.
+
+    Raises:
+        SystemExit: If an error occurs during execution.
+    """
+
+    args = _arg_parser_resolver()
+    
+    base_branch = args.base_branch
+    pr_branch = args.pr_branch
+
+    print(f"You are trying to merge on branch: {base_branch}")
+    print(f"You are making commit from your branch: {pr_branch}")
+
+    # Count changed files
+    file_count = _count_changed_files(base_branch, pr_branch)
+    print(f"Number of changed files: {file_count}")
+
+    # Check if the count exceeds 20
+    if file_count > args.file_count:
+        print("Error: Too many files (greater than 20) changed in the pull request.")
+        print("Possible issues:")
+        print("- Contributor may be merging into an incorrect branch.")
+        print("- Source branch may be incorrect please use develop as source branch.")
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/.github/workflows/md_mpx_format_adjuster.py b/.github/workflows/md_mpx_format_adjuster.py
new file mode 100644
index 0000000000..e1609b710b
--- /dev/null
+++ b/.github/workflows/md_mpx_format_adjuster.py
@@ -0,0 +1,97 @@
+#!/usr/bin/env python3
+# -*- coding: UTF-8 -*-
+"""
+Script to make Markdown files MPX compatible.
+
+This script scans Markdown files and escapes special characters (<, >, {, })
+to make them compatible with the MPX 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_mpx_characters(text):
+    """
+    Escape special characters in a text string for MPX 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 MPX 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 MPX characters
+    new_content = escape_mpx_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 MPX compatibility.
+
+    Args:
+        None
+
+    Returns:
+        None
+    """
+    parser = argparse.ArgumentParser(description="Make Markdown files MPX 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/.github/workflows/pull-requests.yml b/.github/workflows/pull-requests.yml
index 33b810655b..41e3b90886 100644
--- a/.github/workflows/pull-requests.yml
+++ b/.github/workflows/pull-requests.yml
@@ -20,10 +20,8 @@ env:
   CODECOV_UNIQUE_NAME: CODECOV_UNIQUE_NAME-${{ github.run_id }}-${{ github.run_number }}
 
 jobs:
-
-  Continuous-Integration:
-
-    name: Performs linting, formatting, type-checking, and testing on the application
+  Code-Quality-Checks:
+    name: Performs linting, formatting, type-checking
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the Repository
@@ -49,14 +47,51 @@ jobs:
         if: steps.changed-files.outputs.only_changed != 'true'
         run: npm run typecheck
 
+      - name: Run linting check
+        if: steps.changed-files.outputs.only_changed != 'true'
+        run: npm run lint:check  
+
+      - name: Compare translation files
+        run: |
+          chmod +x .github/workflows/compare_translations.py
+          python .github/workflows/compare_translations.py --directory public/locales
+
+
+  Check-Changed-Files:
+    runs-on: ubuntu-latest
+    needs: Code-Quality-Checks
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v1
+
+      - name: Set up Python
+        uses: actions/setup-python@v2
+        with:
+          python-version: 3.9
+
+      - name: Run Python script
+        run: |
+          python .github/workflows/count_changed_files.py --base_branch "${{ github.base_ref }}" --pr_branch "${{ github.head_ref }}"
+
+  Test-Application:
+    name: Test Application
+    runs-on: ubuntu-latest
+    needs: [Code-Quality-Checks]
+    steps:
+      - name: Checkout the Repository
+        uses: actions/checkout@v3
+
+      - name: Install Dependencies
+        run: npm install --legacy-peer-deps
+      
+      - 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: Run linting check
-        if: steps.changed-files.outputs.only_changed != 'true'
-        run: npm run lint:check
-
       - name: TypeScript compilation for changed files
         run: |
           for file in ${{ steps.changed-files.outputs.all_files }}; do
@@ -88,7 +123,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16.14.1'
+          node-version: '20.x'
 
       - name: resolve dependency
         run: npm install -g @graphql-inspector/cli
diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml
index 7b9948c184..acb673f708 100644
--- a/.github/workflows/push.yml
+++ b/.github/workflows/push.yml
@@ -22,6 +22,9 @@ env:
 jobs:
   Code-Coverage:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
@@ -88,9 +91,14 @@ jobs:
 
       - name: Generate Documentation of Markdown pages
         run: |
-          yarn global add typedoc
-          yarn add typedoc-plugin-markdown
-          yarn typedoc --entryPoints src/components src/screens --out talawa-admin-docs --plugin typedoc-plugin-markdown --theme markdown --entryPointStrategy expand --exclude "**/*.test.ts" --exclude "**/*.css"
+          npm install --global typedoc
+          npm install typedoc-plugin-markdown
+          npm install --save-dev @types/node
+          npx typedoc --entryPoints src/components src/screens --out talawa-admin-docs --plugin typedoc-plugin-markdown --theme markdown --entryPointStrategy expand --exclude "**/*.test.ts" --exclude "**/*.css"
+          
+      - name: Make Markdown Files MPX Compatible
+        run: python ./.github/workflows/md_mpx_format_adjuster.py --directory talawa-admin-docs
+        
           
       - name: Checking doc updated
         id: DocUpdated
diff --git a/.husky/pre-commit b/.husky/pre-commit
index e4debee2be..c9c109cceb 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,8 +1,10 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npm run format:fix
-npm run lint:fix
+# 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..564fc70d3f
--- /dev/null
+++ b/.lintstagedrc.json
@@ -0,0 +1,4 @@
+{
+  "**/*.{ts,tsx,yml}": "eslint --fix",
+  "**/*.{ts,tsx,json,scss,css,yml}": "prettier --write"
+}
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
index b93a8c0f57..160762f487 100644
--- a/CODE_STYLE.md
+++ b/CODE_STYLE.md
@@ -1,4 +1,3 @@
-
 # 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.
@@ -7,6 +6,21 @@ The code style must be strictly adhered to, to ensure that there is consistency
 
 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
@@ -175,7 +189,7 @@ Follow this [link](https://getbootstrap.com/docs/5.3/customize/sass/) to learn h
 
 **File Structure**
 
-- `src/assets/scss/components/{partialFile}.scss` - where the {partialFile} are the following files
+- `src/assets/scss/components/{'{partialFile}'}.scss` - where the {'{partialFile}'} are the following files
   - **_accordion.scss**
   - **_alert.scss**
   - **_badge.scss**
@@ -195,12 +209,12 @@ Follow this [link](https://getbootstrap.com/docs/5.3/customize/sass/) to learn h
   - **_progress.scss**
   - **_spinners.scss**
 
-- `src/assets/scss/content/{partialFile}.scss` - where the {partialFile} are the following files
+- `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
+- `src/assets/scss/forms/{'{partialFile}'}.scss` - where the {'{partialFile}'} are the following files
   - **_check-radios.scss**
   - **_floating-label.scss**
   - **_form-control.scss**
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 8d3138a981..acb7d3b038 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -6,18 +6,20 @@ If you are new to contributing to open source, please read the Open Source Guide
 
 ## Table of Contents
 
-- [Contributing to Talawa-Admin](#contributing-to-talawa-admin)
-  - [Table of Contents](#table-of-contents)
-  - [Code of Conduct](#code-of-conduct)
-  - [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)
+<!-- toc -->
+
+- [Code of Conduct](#code-of-conduct)
+- [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
 
diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
index aecf8cc132..7691b5d452 100644
--- a/DOCUMENTATION.md
+++ b/DOCUMENTATION.md
@@ -1,5 +1,16 @@
 # 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:
diff --git a/INSTALLATION.md b/INSTALLATION.md
index b351963b89..58555ec4b5 100644
--- a/INSTALLATION.md
+++ b/INSTALLATION.md
@@ -4,18 +4,18 @@ This document provides instructions on how to set up and start a running instanc
 
 # Table of Contents
 
-- [Talawa-Admin Installation](#talawa-admin-installation)
-- [Table of Contents](#table-of-contents)
+<!-- toc -->
+
 - [Prerequisites for Developers](#prerequisites-for-developers)
 - [Installation](#installation)
-  - [Clone This Repository](#clone-this-repository)
-  - [Change Directory into the Cloned Repo](#change-directory-into-the-cloned-repo)
-  - [Setting up NPM](#setting-up-npm)
+  - [Setting up this repository](#setting-up-this-repository)
+  - [Setting up npm](#setting-up-npm)
+  - [Setting up Typescript](#setting-up-typescript)
   - [Installing required packages/dependencies](#installing-required-packagesdependencies)
 - [Configuration](#configuration)
   - [Creating .env file](#creating-env-file)
-  - [Setting up REACT\_APP\_TALAWA\_URL in .env file](#setting-up-react_app_talawa_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 REACT_APP_TALAWA_URL in .env file](#setting-up-react_app_talawa_url-in-env-file)
+  - [Setting up REACT_APP_RECAPTCHA_SITE_KEY in .env file](#setting-up-react_app_recaptcha_site_key-in-env-file)
 - [Post Configuration Steps](#post-configuration-steps)
   - [Running Talawa-Admin](#running-talawa-admin)
   - [Accessing Talawa-Admin](#accessing-talawa-admin)
@@ -29,6 +29,8 @@ This document provides instructions on how to set up and start a running instanc
       - [pre-commit hook](#pre-commit-hook)
       - [post-merge hook](#post-merge-hook)
 
+<!-- tocstop -->
+
 # Prerequisites for Developers
 
 We recommend that you follow these steps before beginning development work on Talawa-Admin:
@@ -39,30 +41,41 @@ We recommend that you follow these steps before beginning development work on Ta
 The INSTALLATION.md files in both repositories show you how. The Talawa-API INSTALLATION.md will also show you the Organization URL to use access Talawa Admin.
 
 # Installation
+
 You will need to have copies of your code on your local system. Here's how to do that.
-## Clone This Repository
+
+## 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. Navigate to the folder where you want to setup the repository. Here, I will set it up in a folder called `talawa`.
+2. Navigate to the folder and open a terminal in this folder (you can right-click and choose appropiate option based onn your OS). Next, we'll fork and clone the `talawa-admin` repository.
+3. Navigate to [https://github.com/PalisadoesFoundation/talawa-admin/](hhttps://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`.
+4. You should now see `talawa-admin` under your repositories. It will be marked as forked from `PalisadoesFoundation/talawa-admin`
+5. Clone the repository to your local computer (replacing the values in `{{}}`):
+
 ```
-git clone https://github.com/PalisadoesFoundation/talawa-admin
+$ git clone https://github.com/{{YOUR GITHUB USERNAME}}/talawa-admin.git
 ```
 
-This will download a local copy of `talawa-admin` in that directory.
+This will setup the repository and the code files locally for you. For more detailed instructions on contributing code, and managing the versions of this repository with Git, checkout [CONTRIBUTING.md here](./CONTRIBUTING.md)
 
-## Change Directory into the Cloned Repo
+**NOTE:** `All the commands we're going to execute in the following instructions will assume you are in the root directory of the cloned talawa-admin project. If you fail to do so, the commands will not work.`
 
-Right after cloning the repo you can change the directory of your current `terminal(shell)` to the root directory of cloned repository using this command:
+## Setting up npm
 
-```
-cd talawa-admin
-```
+Best way to install and manage `node.js` is making use of node version managers. Two most popular node version managers right now are [fnm](https://github.com/Schniz/fnm) and [nvm](https://github.com/nvm-sh/nvm). We'd recommend `fnm` because it's written in `rust` and is much faster than `nvm`. Install whichever one you want and follow their guide to set up `node.js` on your system.
 
-**NOTE:** `All the commands we're going to execute in the following instructions will assume you are in the root directory of the cloned talawa-admin project. If you fail to do so, the commands will not work.`
+## Setting up Typescript
 
-## Setting up NPM
+As `talawa-admin` and `talawa-api` repositories are written using [Typescript](https://www.typescriptlang.org/), you will need to install typescript on your machine.
+We recommend to install `Typescript` globally on your machine by running the following command in the terminal:
 
-If you've followed the previous steps you should have already set up node.js on your system. [Click here](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) for the official setup guide for npm.
+```
+npm install -g typescript
+```
+
+For more details please refer to the installation guidelines provided in the [official docs](https://www.typescriptlang.org/download).
 
 ## Installing required packages/dependencies
 
@@ -71,8 +84,11 @@ Run the following command to install the packages and dependencies required by `
 ```
 npm install --legacy-peer-deps
 ```
+
 # Configuration
+
 It's important to configure Talawa-Admin. Here's how to do it.
+
 ## 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:
@@ -93,7 +109,7 @@ Follow the instructions from section [Setting up REACT_APP_TALAWA_URL in .env fi
 
 ## 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. 
+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/"
@@ -129,6 +145,7 @@ REACT_APP_RECAPTCHA_SITE_KEY="this_is_the_recaptcha_key"
 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
@@ -151,12 +168,12 @@ http://localhost:3000/
 
 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
@@ -180,7 +197,6 @@ You don't need to re-run the `npm run jest-preview` command each time, simply ru
 
 ![Debugging Test Demo](./public/images/jest-preview.webp)
 
-
 ## Linting code files
 
 You can lint your code files using this command:
@@ -191,30 +207,24 @@ 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.
 
-<br/>
 
 #### 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.
 
+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
 
-<br/>
-
 
 #### post-merge hook
 
 We are also running a post-merge(post-pull) hook which will automatically run "npm install --legacy-peer-deps" 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  
+        git pull --no-verify
 
 <br/>
-
diff --git a/ISSUE_GUIDELINES.md b/ISSUE_GUIDELINES.md
index 18b93ee10b..d57420d983 100644
--- a/ISSUE_GUIDELINES.md
+++ b/ISSUE_GUIDELINES.md
@@ -6,18 +6,18 @@ In order to give everyone a chance to submit a issues reports and contribute to
 
 ___
 ## Table of Contents
-<!-- TOC -->
-
-- [Issue Report Guidelines](#issue-report-guidelines)
-    - [Table of Contents](#table-of-contents)
-    - [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)
-
-<!-- /TOC -->
+
+<!-- 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
 
diff --git a/PR_GUIDELINES.md b/PR_GUIDELINES.md
index d1c2a0b2d9..4c904c782d 100644
--- a/PR_GUIDELINES.md
+++ b/PR_GUIDELINES.md
@@ -4,6 +4,18 @@
 
 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.
diff --git a/README.md b/README.md
index 39be8dbb3d..5ee7c6d04c 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,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)
+- [Installation](#installation)
+
+<!-- tocstop -->
+
 # Talawa Components
 
 `talawa` has these major software components:
@@ -37,4 +47,4 @@ Core features include:
 
 # Installation
 
-[Follow this guide](https://github.com/PalisadoesFoundation/talawa-admin/blob/develop/INSTALLATION.md)
+[Follow this guide](https://github.com/PalisadoesFoundation/talawa-admin/blob/develop/INSTALLATION.md)
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index e96cd95feb..5f2c00f845 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,33 +15,15 @@
         "@emotion/styled": "^11.11.0",
         "@mui/icons-material": "^5.8.3",
         "@mui/material": "^5.14.1",
-        "@mui/private-theming": "^5.14.13",
         "@mui/system": "^5.14.12",
         "@mui/x-charts": "^6.0.0-alpha.13",
         "@mui/x-data-grid": "^6.8.0",
         "@mui/x-date-pickers": "^6.6.0",
         "@pdfme/generator": "^1.2.6",
-        "@testing-library/jest-dom": "^5.14.1",
-        "@testing-library/react": "^11.1.0",
-        "@testing-library/user-event": "^12.1.10",
-        "@types/enzyme-adapter-react-16": "^1.0.6",
-        "@types/jest": "^26.0.24",
-        "@types/jquery": "^3.5.6",
-        "@types/node": "^12.20.16",
-        "@types/react-bootstrap": "^0.32.32",
-        "@types/react-datepicker": "^4.1.4",
-        "@types/react-dom": "^17.0.9",
-        "@types/react-google-recaptcha": "^2.1.5",
-        "@types/react-modal": "^3.12.1",
         "bootstrap": "^5.3.0",
         "customize-cra": "^1.0.0",
         "dayjs": "^1.10.7",
-        "detect-newline": "^4.0.0",
         "enzyme": "^3.11.0",
-        "enzyme-adapter-react-16": "^1.15.6",
-        "eslint-config-prettier": "^8.3.0",
-        "eslint-plugin-jest": "^25.3.4",
-        "eslint-plugin-prettier": "^3.4.0",
         "flag-icons": "^6.6.6",
         "graphql": "^15.5.1",
         "graphql-tag": "^2.12.6",
@@ -49,8 +31,8 @@
         "i18next": "^21.8.14",
         "i18next-browser-languagedetector": "^6.1.4",
         "i18next-http-backend": "^1.4.1",
-        "jest-docblock": "^27.4.0",
         "js-cookie": "^3.0.1",
+        "lint-staged": "^15.2.0",
         "markdown-toc": "^1.2.0",
         "node-sass": "^9.0.0",
         "prettier": "^2.3.2",
@@ -69,25 +51,31 @@
         "react-toastify": "^9.0.3",
         "redux": "^4.1.1",
         "redux-thunk": "^2.3.0",
-        "typedoc": "^0.24.8",
-        "typedoc-plugin-markdown": "^3.16.0",
         "typescript": "^4.3.5",
-        "web-vitals": "^1.0.1",
-        "yarn": "^1.22.17"
+        "web-vitals": "^1.0.1"
       },
       "devDependencies": {
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-        "@fortawesome/fontawesome-svg-core": "^1.2.35",
-        "@fortawesome/free-brands-svg-icons": "^5.15.3",
-        "@fortawesome/react-fontawesome": "^0.1.14",
+        "@testing-library/jest-dom": "^5.14.1",
+        "@testing-library/react": "^11.1.0",
+        "@testing-library/user-event": "^12.1.10",
         "@types/enzyme": "^3.10.9",
+        "@types/jest": "^26.0.24",
         "@types/js-cookie": "^3.0.2",
+        "@types/node": "^12.20.16",
         "@types/react": "^17.0.14",
+        "@types/react-bootstrap": "^0.32.32",
+        "@types/react-datepicker": "^4.1.4",
+        "@types/react-dom": "^17.0.9",
+        "@types/react-google-recaptcha": "^2.1.5",
         "@types/react-router-dom": "^5.1.8",
         "@typescript-eslint/eslint-plugin": "^5.9.0",
         "@typescript-eslint/parser": "^5.9.0",
         "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
         "cross-env": "^7.0.3",
+        "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-jest": "^25.3.4",
+        "eslint-plugin-prettier": "^3.4.0",
         "husky": "^8.0.3",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^27.4.5",
@@ -95,7 +83,6 @@
         "jest-localstorage-mock": "^2.4.19",
         "jest-location-mock": "^1.0.9",
         "jest-preview": "^0.3.1",
-        "jquery": "^3.2.1",
         "postcss-modules": "^6.0.0"
       },
       "engines": {
@@ -113,7 +100,8 @@
     "node_modules/@adobe/css-tools": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.2.0.tgz",
-      "integrity": "sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA=="
+      "integrity": "sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA==",
+      "dev": true
     },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
@@ -2213,6 +2201,7 @@
       "version": "7.22.6",
       "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.22.6.tgz",
       "integrity": "sha512-M+37LLIRBTEVjktoJjbw4KVhupF0U/3PYUCbBwgAd9k17hoKhRu1n935QiG7Tuxv0LJOMrb2vuKEeYUlv0iyiw==",
+      "dev": true,
       "dependencies": {
         "core-js-pure": "^3.30.2",
         "regenerator-runtime": "^0.13.11"
@@ -2843,55 +2832,6 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
       "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
     },
-    "node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "0.2.36",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
-      "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==",
-      "dev": true,
-      "hasInstallScript": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "1.2.36",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
-      "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.36"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/free-brands-svg-icons": {
-      "version": "5.15.4",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz",
-      "integrity": "sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==",
-      "dev": true,
-      "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.36"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/react-fontawesome": {
-      "version": "0.1.19",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz",
-      "integrity": "sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==",
-      "dev": true,
-      "dependencies": {
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
-        "react": ">=16.x"
-      }
-    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -4706,6 +4646,7 @@
       "version": "7.31.2",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz",
       "integrity": "sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==",
+      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -4724,6 +4665,7 @@
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
       "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
+      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.10.2",
         "@babel/runtime-corejs3": "^7.10.2"
@@ -4736,6 +4678,7 @@
       "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"
@@ -4751,6 +4694,7 @@
       "version": "5.16.5",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz",
       "integrity": "sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==",
+      "dev": true,
       "dependencies": {
         "@adobe/css-tools": "^4.0.1",
         "@babel/runtime": "^7.9.2",
@@ -4772,6 +4716,7 @@
       "version": "11.2.7",
       "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.7.tgz",
       "integrity": "sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==",
+      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@testing-library/dom": "^7.28.1"
@@ -4788,6 +4733,7 @@
       "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"
       },
@@ -4818,7 +4764,8 @@
     "node_modules/@types/aria-query": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz",
-      "integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig=="
+      "integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==",
+      "dev": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.1",
@@ -4878,6 +4825,7 @@
       "version": "0.22.31",
       "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.31.tgz",
       "integrity": "sha512-Kt7Cdjjdi2XWSfrZ53v4Of0wG3ZcmaegFXjMmz9tfNrZSkzzo36G0AL1YqSdcIA78Etjt6E609pt5h1xnQkPUw==",
+      "dev": true,
       "dependencies": {
         "@types/node": "*"
       }
@@ -4903,23 +4851,17 @@
       "version": "3.10.13",
       "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.13.tgz",
       "integrity": "sha512-FCtoUhmFsud0Yx9fmZk179GkdZ4U9B0GFte64/Md+W/agx0L5SxsIIbhLBOxIb9y2UfBA4WQnaG1Od/UsUQs9Q==",
+      "dev": true,
       "dependencies": {
         "@types/cheerio": "*",
         "@types/react": "^16"
       }
     },
-    "node_modules/@types/enzyme-adapter-react-16": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.6.tgz",
-      "integrity": "sha512-VonDkZ15jzqDWL8mPFIQnnLtjwebuL9YnDkqeCDYnB4IVgwUm0mwKkqhrxLL6mb05xm7qqa3IE95m8CZE9imCg==",
-      "dependencies": {
-        "@types/enzyme": "*"
-      }
-    },
     "node_modules/@types/enzyme/node_modules/@types/react": {
       "version": "16.14.43",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.43.tgz",
       "integrity": "sha512-7zdjv7jvoLLQg1tTvpQsm+hyNUMT2mPlNV1+d0I8fbGhkJl82spopMyBlu4wb1dviZAxpGdk5eHu/muacknnfw==",
+      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -5037,19 +4979,12 @@
       "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/jquery": {
-      "version": "3.5.16",
-      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.16.tgz",
-      "integrity": "sha512-bsI7y4ZgeMkmpG9OM710RRzDFp+w4P1RGiIt30C1mSBT+ExCleeh4HObwgArnDFELmRrOpXgSYN9VF1hj+f1lw==",
-      "dependencies": {
-        "@types/sizzle": "*"
-      }
-    },
     "node_modules/@types/js-cookie": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.3.tgz",
@@ -5130,6 +5065,7 @@
       "version": "0.32.32",
       "resolved": "https://registry.npmjs.org/@types/react-bootstrap/-/react-bootstrap-0.32.32.tgz",
       "integrity": "sha512-GM9UtV7v+C2F0rbqgIpMWdCKBMdX3PQURoJQobPO4vDAeFadcExNtKffi13/MjaAks+riJKVGyiMe+6OmDYT2w==",
+      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -5138,6 +5074,7 @@
       "version": "4.11.2",
       "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-4.11.2.tgz",
       "integrity": "sha512-ELYyX3lb3K1WltqdlF1hbnaDGgzlF6PIR5T4W38cSEcfrQDIrPE+Ioq5pwRe/KEJ+ihHMjvTVZQkwJx0pWMNHQ==",
+      "dev": true,
       "dependencies": {
         "@popperjs/core": "^2.9.2",
         "@types/react": "*",
@@ -5149,6 +5086,7 @@
       "version": "17.0.20",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.20.tgz",
       "integrity": "sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==",
+      "dev": true,
       "dependencies": {
         "@types/react": "^17"
       }
@@ -5157,14 +5095,7 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@types/react-google-recaptcha/-/react-google-recaptcha-2.1.5.tgz",
       "integrity": "sha512-iWTjmVttlNgp0teyh7eBXqNOQzVq2RWNiFROWjraOptRnb1OcHJehQnji0sjqIRAk9K0z8stjyhU+OLpPb0N6w==",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/react-modal": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.16.0.tgz",
-      "integrity": "sha512-iphdqXAyUfByLbxJn5j6d+yh93dbMgshqGP0IuBeaKbZXx0aO+OXsvEkt6QctRdxjeM9/bR+Gp3h9F9djVWTQQ==",
+      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -5259,11 +5190,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/sizzle": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
-      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ=="
-    },
     "node_modules/@types/sockjs": {
       "version": "0.3.33",
       "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
@@ -5281,6 +5207,7 @@
       "version": "5.14.8",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.8.tgz",
       "integrity": "sha512-NRfJE9Cgpmu4fx716q9SYmU4jxxhYRU1BQo239Txt/9N3EC745XZX1Yl7h/SBIDlo1ANVOCRB4YDXjaQdoKCHQ==",
+      "dev": true,
       "dependencies": {
         "@types/jest": "*"
       }
@@ -5880,33 +5807,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/airbnb-prop-types": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.16.0.tgz",
-      "integrity": "sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==",
-      "dependencies": {
-        "array.prototype.find": "^2.1.1",
-        "function.prototype.name": "^1.1.2",
-        "is-regex": "^1.1.0",
-        "object-is": "^1.1.2",
-        "object.assign": "^4.1.0",
-        "object.entries": "^1.1.2",
-        "prop-types": "^15.7.2",
-        "prop-types-exact": "^1.2.0",
-        "react-is": "^16.13.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      },
-      "peerDependencies": {
-        "react": "^0.14 || ^15.0.0 || ^16.0.0-alpha"
-      }
-    },
-    "node_modules/airbnb-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/ajv": {
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
@@ -5991,11 +5891,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/ansi-sequence-parser": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.1.tgz",
-      "integrity": "sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg=="
-    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -6176,20 +6071,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/array.prototype.find": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.2.1.tgz",
-      "integrity": "sha512-I2ri5Z9uMpMvnsNrHre9l3PaX+z9D0/z6F7Yt2u15q7wt0I62g5kX6xUKR1SJiefgG+u2/gJUmM8B47XRvQR6w==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
-        "es-shim-unscopables": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/array.prototype.flat": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz",
@@ -7355,6 +7236,7 @@
       "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"
@@ -7621,6 +7503,81 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/cli-cursor": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz",
+      "integrity": "sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==",
+      "dependencies": {
+        "restore-cursor": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "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==",
+      "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==",
+      "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=="
+    },
+    "node_modules/cli-truncate/node_modules/string-width": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.0.0.tgz",
+      "integrity": "sha512-GPQHj7row82Hjo9hKZieKcHIhaAIKOJvFSIZXuCU9OASVZrMNUaZuz++SPVrBjnLsnk4k+z9f2EIypgxf2vNFw==",
+      "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==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -8389,7 +8346,8 @@
     "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=="
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true
     },
     "node_modules/cssdb": {
       "version": "7.6.0",
@@ -8923,17 +8881,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/detect-newline": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-4.0.0.tgz",
-      "integrity": "sha512-1aXUEPdfGdzVPFpzGJJNgq9o81bGg1s09uxTWsqBlo9PI332uyJRQq13+LK/UN4JfxJbFdCXonUFQ9R/p7yCtw==",
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/detect-node": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
@@ -8990,6 +8937,7 @@
       "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"
       }
@@ -9045,7 +8993,8 @@
     "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=="
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true
     },
     "node_modules/dom-converter": {
       "version": "0.2.0",
@@ -9326,94 +9275,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/enzyme-adapter-react-16": {
-      "version": "1.15.7",
-      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.7.tgz",
-      "integrity": "sha512-LtjKgvlTc/H7adyQcj+aq0P0H07LDL480WQl1gU512IUyaDo/sbOaNDdZsJXYW2XaoPqrLLE9KbZS+X2z6BASw==",
-      "dependencies": {
-        "enzyme-adapter-utils": "^1.14.1",
-        "enzyme-shallow-equal": "^1.0.5",
-        "has": "^1.0.3",
-        "object.assign": "^4.1.4",
-        "object.values": "^1.1.5",
-        "prop-types": "^15.8.1",
-        "react-is": "^16.13.1",
-        "react-test-renderer": "^16.0.0-0",
-        "semver": "^5.7.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      },
-      "peerDependencies": {
-        "enzyme": "^3.0.0",
-        "react": "^16.0.0-0",
-        "react-dom": "^16.0.0-0"
-      }
-    },
-    "node_modules/enzyme-adapter-react-16/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/enzyme-adapter-react-16/node_modules/react-test-renderer": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.14.0.tgz",
-      "integrity": "sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==",
-      "dependencies": {
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.8.6",
-        "scheduler": "^0.19.1"
-      },
-      "peerDependencies": {
-        "react": "^16.14.0"
-      }
-    },
-    "node_modules/enzyme-adapter-react-16/node_modules/scheduler": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      }
-    },
-    "node_modules/enzyme-adapter-react-16/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
-    "node_modules/enzyme-adapter-utils": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.14.1.tgz",
-      "integrity": "sha512-JZgMPF1QOI7IzBj24EZoDpaeG/p8Os7WeBZWTJydpsH7JRStc7jYbHE4CmNQaLqazaGFyLM8ALWA3IIZvxW3PQ==",
-      "dependencies": {
-        "airbnb-prop-types": "^2.16.0",
-        "function.prototype.name": "^1.1.5",
-        "has": "^1.0.3",
-        "object.assign": "^4.1.4",
-        "object.fromentries": "^2.0.5",
-        "prop-types": "^15.8.1",
-        "semver": "^5.7.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      },
-      "peerDependencies": {
-        "react": "0.13.x || 0.14.x || ^15.0.0-0 || ^16.0.0-0"
-      }
-    },
-    "node_modules/enzyme-adapter-utils/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
     "node_modules/enzyme-matchers": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/enzyme-matchers/-/enzyme-matchers-7.1.2.tgz",
@@ -9705,6 +9566,7 @@
       "version": "8.8.0",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
       "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
+      "dev": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -9917,6 +9779,7 @@
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.1.tgz",
       "integrity": "sha512-htg25EUYUeIhKHXjOinK4BgCcDwtLHjqaxCDsMy5nbnUMkKFvIhMVCp+5GFUXQ4Nr8lBsPqtGAqBenbpFqAA2g==",
+      "dev": true,
       "dependencies": {
         "prettier-linter-helpers": "^1.0.0"
       },
@@ -10858,7 +10721,8 @@
     "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=="
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true
     },
     "node_modules/fast-glob": {
       "version": "3.3.0",
@@ -11500,6 +11364,17 @@
         "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==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
@@ -11909,41 +11784,13 @@
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
       "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="
     },
-    "node_modules/handlebars": {
-      "version": "4.7.8",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
-      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
-      "dependencies": {
-        "minimist": "^1.2.5",
-        "neo-async": "^2.6.2",
-        "source-map": "^0.6.1",
-        "wordwrap": "^1.0.0"
-      },
-      "bin": {
-        "handlebars": "bin/handlebars"
-      },
+    "node_modules/har-schema": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
+      "dev": true,
       "engines": {
-        "node": ">=0.4.7"
-      },
-      "optionalDependencies": {
-        "uglify-js": "^3.1.4"
-      }
-    },
-    "node_modules/handlebars/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/har-schema": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
+        "node": ">=4"
       }
     },
     "node_modules/har-validator": {
@@ -13632,6 +13479,7 @@
       "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",
@@ -13646,6 +13494,7 @@
       "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"
@@ -13661,6 +13510,7 @@
       "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"
       }
@@ -16012,12 +15862,6 @@
         "jiti": "bin/jiti.js"
       }
     },
-    "node_modules/jquery": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz",
-      "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==",
-      "dev": true
-    },
     "node_modules/js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -16184,11 +16028,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/jsonc-parser": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
-      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
-    },
     "node_modules/jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -16355,6 +16194,191 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/lint-staged": {
+      "version": "15.2.0",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.0.tgz",
+      "integrity": "sha512-TFZzUEV00f+2YLaVPWBWGAMq7So6yQx+GG8YRMDeOEIf95Zn5RyiLMsEiX4KTNl9vq/w+NqRJkLA1kPIo15ufQ==",
+      "dependencies": {
+        "chalk": "5.3.0",
+        "commander": "11.1.0",
+        "debug": "4.3.4",
+        "execa": "8.0.1",
+        "lilconfig": "3.0.0",
+        "listr2": "8.0.0",
+        "micromatch": "4.0.5",
+        "pidtree": "0.6.0",
+        "string-argv": "0.3.2",
+        "yaml": "2.3.4"
+      },
+      "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==",
+      "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": "11.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "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==",
+      "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==",
+      "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==",
+      "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==",
+      "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.0.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz",
+      "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "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==",
+      "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==",
+      "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==",
+      "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==",
+      "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==",
+      "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==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/yaml": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
+      "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/list-item": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/list-item/-/list-item-1.1.1.tgz",
@@ -16410,6 +16434,100 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/listr2": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-8.0.0.tgz",
+      "integrity": "sha512-u8cusxAcyqAiQ2RhYvV7kRKNLgUvtObIbhOX2NCXqvp1UU32xIg5CT22ykS2TPKJXZWJwtK3IKLiqAGlGNE+Zg==",
+      "dependencies": {
+        "cli-truncate": "^4.0.0",
+        "colorette": "^2.0.20",
+        "eventemitter3": "^5.0.1",
+        "log-update": "^6.0.0",
+        "rfdc": "^1.3.0",
+        "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==",
+      "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==",
+      "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=="
+    },
+    "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=="
+    },
+    "node_modules/listr2/node_modules/string-width": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.0.0.tgz",
+      "integrity": "sha512-GPQHj7row82Hjo9hKZieKcHIhaAIKOJvFSIZXuCU9OASVZrMNUaZuz++SPVrBjnLsnk4k+z9f2EIypgxf2vNFw==",
+      "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==",
+      "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==",
+      "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/load-json-file": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
@@ -16613,6 +16731,173 @@
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
     },
+    "node_modules/log-update": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.0.0.tgz",
+      "integrity": "sha512-niTvB4gqvtof056rRIrTZvjNYE4rCUzO6X/X+kYjd7WFxXeJ0NwEFnRxX6ehkvv3jTwrXnNdtAak5XYZuIyPFw==",
+      "dependencies": {
+        "ansi-escapes": "^6.2.0",
+        "cli-cursor": "^4.0.0",
+        "slice-ansi": "^7.0.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": "6.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-6.2.0.tgz",
+      "integrity": "sha512-kzRaCqXnpzWs+3z5ABPQiVke+iq0KXkHo8xiWV4RPTi5Yli0l97BEQuhXV1s7+aSU/fu1kUuxgS4MsQ0fRuygw==",
+      "dependencies": {
+        "type-fest": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "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==",
+      "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==",
+      "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=="
+    },
+    "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==",
+      "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==",
+      "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.0.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.0.0.tgz",
+      "integrity": "sha512-GPQHj7row82Hjo9hKZieKcHIhaAIKOJvFSIZXuCU9OASVZrMNUaZuz++SPVrBjnLsnk4k+z9f2EIypgxf2vNFw==",
+      "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==",
+      "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/type-fest": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
+      "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "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/lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
+=======
+    "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==",
+      "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",
@@ -16649,15 +16934,11 @@
         "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,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -16825,10 +17106,10 @@
       "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
       "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
       "bin": {
-        "marked": "bin/marked.js"
+        "markdown-toc": "cli.js"
       },
       "engines": {
-        "node": ">= 12"
+        "node": ">=0.10.0"
       }
     },
     "node_modules/math-random": {
@@ -18340,6 +18621,17 @@
         "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==",
+      "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",
@@ -19732,6 +20024,7 @@
       "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"
       },
@@ -19763,6 +20056,7 @@
       "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",
@@ -19777,6 +20071,7 @@
       "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",
@@ -19792,6 +20087,7 @@
       "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": "*"
       }
@@ -19800,6 +20096,7 @@
       "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"
@@ -19814,7 +20111,8 @@
     "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=="
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
     },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
@@ -19868,16 +20166,6 @@
         "react-is": "^16.13.1"
       }
     },
-    "node_modules/prop-types-exact": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/prop-types-exact/-/prop-types-exact-1.2.0.tgz",
-      "integrity": "sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==",
-      "dependencies": {
-        "has": "^1.0.3",
-        "object.assign": "^4.1.0",
-        "reflect.ownkeys": "^0.2.0"
-      }
-    },
     "node_modules/prop-types-extra": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
@@ -20830,11 +21118,6 @@
         "redux": "^4"
       }
     },
-    "node_modules/reflect.ownkeys": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
-      "integrity": "sha512-qOLsBKHCpSOFKK1NUOCGC5VyeufB6lEsFe92AL2bhIJsacZS1qdoOZSbPk3MYKuT2cFlRDnulKXuuElIrMjGUg=="
-    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -21455,6 +21738,21 @@
         "lowercase-keys": "^1.0.0"
       }
     },
+    "node_modules/restore-cursor": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-4.0.0.tgz",
+      "integrity": "sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==",
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/restructure": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.0.tgz",
@@ -21485,6 +21783,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rfdc": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz",
+      "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA=="
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -22430,17 +22733,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/shiki": {
-      "version": "0.14.3",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.3.tgz",
-      "integrity": "sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==",
-      "dependencies": {
-        "ansi-sequence-parser": "^1.1.0",
-        "jsonc-parser": "^3.2.0",
-        "vscode-oniguruma": "^1.7.0",
-        "vscode-textmate": "^8.0.0"
-      }
-    },
     "node_modules/side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -22486,6 +22778,43 @@
         "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==",
+      "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==",
+      "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==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/smart-buffer": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
@@ -23104,6 +23433,14 @@
         "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==",
+      "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",
@@ -24232,59 +24569,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "node_modules/typedoc": {
-      "version": "0.24.8",
-      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.24.8.tgz",
-      "integrity": "sha512-ahJ6Cpcvxwaxfu4KtjA8qZNqS43wYt6JL27wYiIgl1vd38WW/KWX11YuAeZhuz9v+ttrutSsgK+XO1CjL1kA3w==",
-      "dependencies": {
-        "lunr": "^2.3.9",
-        "marked": "^4.3.0",
-        "minimatch": "^9.0.0",
-        "shiki": "^0.14.1"
-      },
-      "bin": {
-        "typedoc": "bin/typedoc"
-      },
-      "engines": {
-        "node": ">= 14.14"
-      },
-      "peerDependencies": {
-        "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x"
-      }
-    },
-    "node_modules/typedoc-plugin-markdown": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/typedoc-plugin-markdown/-/typedoc-plugin-markdown-3.16.0.tgz",
-      "integrity": "sha512-eeiC78fDNGFwemPIHiwRC+mEC7W5jwt3fceUev2gJ2nFnXpVHo8eRrpC9BLWZDee6ehnz/sPmNjizbXwpfaTBw==",
-      "dependencies": {
-        "handlebars": "^4.7.7"
-      },
-      "peerDependencies": {
-        "typedoc": ">=0.24.0"
-      }
-    },
-    "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.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/typescript": {
       "version": "4.9.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
@@ -24297,18 +24581,6 @@
         "node": ">=4.2.0"
       }
     },
-    "node_modules/uglify-js": {
-      "version": "3.17.4",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
-      "integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==",
-      "optional": true,
-      "bin": {
-        "uglifyjs": "bin/uglifyjs"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -24766,16 +25038,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/vscode-oniguruma": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz",
-      "integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA=="
-    },
-    "node_modules/vscode-textmate": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz",
-      "integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg=="
-    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -25212,11 +25474,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/wordwrap": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
-      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q=="
-    },
     "node_modules/workbox-background-sync": {
       "version": "6.6.0",
       "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-6.6.0.tgz",
@@ -25601,19 +25858,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/yarn": {
-      "version": "1.22.19",
-      "resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.19.tgz",
-      "integrity": "sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==",
-      "hasInstallScript": true,
-      "bin": {
-        "yarn": "bin/yarn.js",
-        "yarnpkg": "bin/yarn.js"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 3d8b4b7941..3c215a27ff 100644
--- a/package.json
+++ b/package.json
@@ -12,33 +12,15 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.8.3",
     "@mui/material": "^5.14.1",
-    "@mui/private-theming": "^5.14.13",
     "@mui/system": "^5.14.12",
     "@mui/x-charts": "^6.0.0-alpha.13",
     "@mui/x-data-grid": "^6.8.0",
     "@mui/x-date-pickers": "^6.6.0",
     "@pdfme/generator": "^1.2.6",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/jest": "^26.0.24",
-    "@types/jquery": "^3.5.6",
-    "@types/node": "^12.20.16",
-    "@types/react-bootstrap": "^0.32.32",
-    "@types/react-datepicker": "^4.1.4",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-google-recaptcha": "^2.1.5",
-    "@types/react-modal": "^3.12.1",
     "bootstrap": "^5.3.0",
     "customize-cra": "^1.0.0",
     "dayjs": "^1.10.7",
-    "detect-newline": "^4.0.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^25.3.4",
-    "eslint-plugin-prettier": "^3.4.0",
     "flag-icons": "^6.6.6",
     "graphql": "^15.5.1",
     "graphql-tag": "^2.12.6",
@@ -46,8 +28,8 @@
     "i18next": "^21.8.14",
     "i18next-browser-languagedetector": "^6.1.4",
     "i18next-http-backend": "^1.4.1",
-    "jest-docblock": "^27.4.0",
     "js-cookie": "^3.0.1",
+    "lint-staged": "^15.2.0",
     "markdown-toc": "^1.2.0",
     "node-sass": "^9.0.0",
     "prettier": "^2.3.2",
@@ -66,11 +48,8 @@
     "react-toastify": "^9.0.3",
     "redux": "^4.1.1",
     "redux-thunk": "^2.3.0",
-    "typedoc": "^0.24.8",
-    "typedoc-plugin-markdown": "^3.16.0",
     "typescript": "^4.3.5",
-    "web-vitals": "^1.0.1",
-    "yarn": "^1.22.17"
+    "web-vitals": "^1.0.1"
   },
   "scripts": {
     "serve": "node ./scripts/config-overrides/custom_start.js",
@@ -78,13 +57,14 @@
     "test": "cross-env NODE_ENV=test node scripts/test.js --env=./scripts/custom-test-env.js --watchAll --coverage",
     "eject": "react-scripts eject",
     "lint:check": "eslint \"**/*.{ts,tsx}\" --max-warnings=0",
-    "lint:fix": "eslint \"**/*.{ts,tsx}\" --fix",
-    "format:fix": "prettier --write \"**/*.{ts,tsx,json,scss,css}\"",
+    "lint:fix": "eslint --fix **/*.{ts,tsx}",
+    "format:fix": "prettier --write **/*.{ts,tsx,json,scss,css}",
     "format:check": "prettier --check \"**/*.{ts,tsx,json,scss,css}\"",
     "typecheck": "tsc --project tsconfig.json --noEmit",
     "prepare": "husky install",
     "jest-preview": "jest-preview",
-    "update:toc": "node scripts/githooks/update-toc.js"
+    "update:toc": "node scripts/githooks/update-toc.js",
+    "lint-staged": "lint-staged --concurrent false"
   },
   "eslintConfig": {
     "extends": [
@@ -106,15 +86,21 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@fortawesome/free-brands-svg-icons": "^5.15.3",
-    "@fortawesome/react-fontawesome": "^0.1.14",
     "@types/enzyme": "^3.10.9",
     "@types/js-cookie": "^3.0.2",
     "@types/react": "^17.0.14",
     "@types/react-router-dom": "^5.1.8",
     "@typescript-eslint/eslint-plugin": "^5.9.0",
     "@typescript-eslint/parser": "^5.9.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.24",
+    "@types/node": "^12.20.16",
+    "@types/react-bootstrap": "^0.32.32",
+    "@types/react-datepicker": "^4.1.4",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-google-recaptcha": "^2.1.5",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "cross-env": "^7.0.3",
     "husky": "^8.0.3",
@@ -124,8 +110,10 @@
     "jest-localstorage-mock": "^2.4.19",
     "jest-location-mock": "^1.0.9",
     "jest-preview": "^0.3.1",
-    "jquery": "^3.2.1",
-    "postcss-modules": "^6.0.0"
+    "postcss-modules": "^6.0.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-jest": "^25.3.4",
+    "eslint-plugin-prettier": "^3.4.0"
   },
   "resolutions": {
     "@apollo/client": "^3.4.0-beta.19",
diff --git a/public/locales/en.json b/public/locales/en.json
index 17313741e3..8abb05c409 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -10,6 +10,11 @@
     "email": "Email",
     "password": "Password",
     "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.",
     "confirmPassword": "Confirm Password",
     "forgotPassword": "Forgot Password ?",
@@ -25,7 +30,42 @@
     "notAuthorised": "Sorry! you are not Authorised!",
     "notFound": "User not found!",
     "successfullyRegistered": "Successfully Registered. Please wait until you will be approved.",
-    "login_to_admin_portal": "Admin Portal Login",
+    "OR": "OR",
+    "admin": "ADMIN",
+    "user": "USER",
+    "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"
+  },
+  "userLoginPage": {
+    "title": "Talawa Admin",
+    "fromPalisadoes": "An open source application by Palisadoes Foundation volunteers",
+    "talawa_portal": "Talawa Admin Portal",
+    "login": "Login",
+    "register": "Register",
+    "firstName": "First Name",
+    "lastName": "Last Name",
+    "email": "Email",
+    "password": "Password",
+    "atleast_8_char_long": "Atleast 8 Character long",
+    "Password_and_Confirm_password_mismatches.": "Password and Confirm password mismatches.",
+    "confirmPassword": "Confirm Password",
+    "forgotPassword": "Forgot Password ?",
+    "enterEmail": "Enter Email",
+    "enterPassword": "Enter Password",
+    "doNotOwnAnAccount": "Do not own an account?",
+    "talawaApiUnavailable": "Talawa-API service is unavailable. Is it running? Check your network connectivity too.",
+    "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.",
+    "notAuthorised": "Sorry! you are not Authorised!",
+    "notFound": "User not found!",
+    "successfullyRegistered": "Successfully Registered. Please wait until you will be approved.",
+    "userLogin": "User Login",
+    "afterRegister": "Successfully registered. Please wait for admin to approve your request.",
     "OR": "OR"
   },
   "latestEvents": {
@@ -94,6 +134,8 @@
     "displayImage": "Display Image",
     "enterName": "Enter Name",
     "sort": "Sort",
+    "Latest": "Latest",
+    "Earliest": "Earliest",
     "filter": "Filter",
     "cancel": "Cancel",
     "noOrgErrorTitle": "Organizations Not Found",
@@ -147,7 +189,8 @@
     "noOrgError": "Organizations not found, please create an organization through dashboard",
     "roleUpdated": "Role Updated.",
     "noResultsFoundFor": "No results found for ",
-    "talawaApiUnavailable": "Talawa-API service is unavailable. Is it running? Check your network connectivity too."
+    "talawaApiUnavailable": "Talawa-API service is unavailable. Is it running? Check your network connectivity too.",
+    "cancel": "Cancel"
   },
   "requests": {
     "title": "Talawa Requests",
@@ -428,7 +471,8 @@
     "deleteMsg": "Do you want to delete this organization?",
     "cancel": "Cancel",
     "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."
+    "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"
   },
   "userUpdate": {
     "firstName": "First Name",
@@ -599,7 +643,12 @@
   "home": {
     "feed": "Feed",
     "pinnedPosts": "View Pinned Posts",
-    "somethingOnYourMind": "Something on your mind?"
+    "somethingOnYourMind": "Something on your mind?",
+    "addPost": "Add Post",
+    "startPost": "Start a post",
+    "media": "Media",
+    "event": "Event",
+    "article": "Article"
   },
   "settings": {
     "profileSettings": "Profile Settings",
@@ -607,7 +656,10 @@
     "lastName": "Last Name",
     "emailAddress": "Email Address",
     "updateImage": "Update Image",
-    "save": "Save"
+    "saveChanges": "Save Changes",
+    "updateProfile": "Update Profile",
+    "otherSettings": "Other Settings",
+    "changeLanguage": "Change Language"
   },
   "donate": {
     "donateTo": "Donate to",
diff --git a/public/locales/fr.json b/public/locales/fr.json
index ab23401603..7d60cda1fb 100644
--- a/public/locales/fr.json
+++ b/public/locales/fr.json
@@ -10,6 +10,11 @@
     "email": "E-mail",
     "password": "Mot de passe",
     "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.": "Le mot de passe et la confirmation du mot de passe ne correspondent pas.",
     "confirmPassword": "Confirmez le mot de passe",
     "forgotPassword": "Mot de passe oublié ?",
@@ -25,7 +30,42 @@
     "notAuthorised": "Désolé ! vous n'êtes pas autorisé !",
     "notFound": "Utilisateur introuvable !",
     "successfullyRegistered": "Enregistré avec succès. Veuillez patienter jusqu'à ce que vous soyez approuvé.",
-    "login_to_admin_portal": "Connexion à l'administration du portail",
+    "OR": "OU",
+    "admin": "ADMIN",
+    "user": "UTILISATEUR",
+    "lowercase_check": "Au moins une lettre minuscule",
+    "uppercase_check": "Au moins une lettre majuscule",
+    "special_char_check": "Au moins un caractère spécial",
+    "numeric_value_check": "Au moins une valeur numérique"
+  },
+  "userLoginPage": {
+    "title": "Administrateur Talawa",
+    "talawa_portal": "Portail D'Administrateur Talawa",
+    "fromPalisadoes": "Une application open source par les volontaires de la Fondation Palissades",
+    "login": "Connexion",
+    "register": "S'inscrire",
+    "firstName": "Prénom",
+    "lastName": "Nom de famille",
+    "email": "E-mail",
+    "password": "Mot de passe",
+    "atleast_8_char_long": "Au moins 8 caractères",
+    "Password_and_Confirm_password_mismatches.": "Le mot de passe et la confirmation du mot de passe ne correspondent pas.",
+    "confirmPassword": "Confirmez le mot de passe",
+    "forgotPassword": "Mot de passe oublié ?",
+    "enterEmail": "entrez l'e-mail",
+    "enterPassword": "Entrer le mot de passe",
+    "doNotOwnAnAccount": "Vous n'avez pas de compte ?",
+    "talawaApiUnavailable": "Le service Talawa-API n'est pas disponible. Est-il en cours d'exécution ? Vérifiez également votre connectivité réseau.",
+    "captchaError": "Erreur de captcha !",
+    "Please_check_the_captcha": "Veuillez vérifier le captcha.",
+    "Something_went_wrong": "Quelque chose s'est mal passé, veuillez réessayer plus tard.",
+    "passwordMismatches": "Le mot de passe et la confirmation du mot de passe ne correspondent pas.",
+    "fillCorrectly": "Remplissez tous les détails correctement.",
+    "notAuthorised": "Désolé ! vous n'êtes pas autorisé !",
+    "notFound": "Utilisateur introuvable !",
+    "successfullyRegistered": "Enregistré avec succès. Veuillez patienter jusqu'à ce que vous soyez approuvé.",
+    "userLogin": "Utilisateur en ligne",
+    "afterRegister": "Enregistré avec succès. Veuillez attendre que l'administrateur approuve votre demande.",
     "OR": "OU"
   },
   "latestEvents": {
@@ -33,6 +73,11 @@
     "eventCardSeeAll": "Voir Tout",
     "noEvents": "Aucun événement à venir"
   },
+  "latestPosts": {
+    "latestPostsTitle": "Dernières Publications",
+    "seeAllLink": "Voir Tout",
+    "noPostsCreated": "Aucune Publication Créée"
+  },
   "listNavbar": {
     "talawa_portal": "Portail D'Administrateur Talawa",
     "roles": "Les rôles",
@@ -88,6 +133,8 @@
     "displayImage": "Afficher l'image",
     "enterName": "Entrez le nom",
     "sort": "Trier",
+    "Earliest": "Le plus tôt",
+    "Latest": "Dernière",
     "filter": "Filtre",
     "cancel": "Annuler",
     "endOfResults": "Fin des résultats",
@@ -137,7 +184,8 @@
     "filter": "Filtre",
     "roleUpdated": "Rôle mis à jour.",
     "noResultsFoundFor": "Aucun résultat trouvé pour ",
-    "talawaApiUnavailable": "Le service Talawa-API n'est pas disponible. Est-il en cours d'exécution ? Vérifiez également votre connectivité réseau."
+    "talawaApiUnavailable": "Le service Talawa-API n'est pas disponible. Est-il en cours d'exécution ? Vérifiez également votre connectivité réseau.",
+    "cancel": "Annuler"
   },
   "requests": {
     "title": "Demandes Talawa",
@@ -420,7 +468,8 @@
     "deleteMsg": "Voulez-vous supprimer cette organisation ?",
     "cancel": "Annuler",
     "confirmDelete": "Confirmer 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."
+    "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"
   },
   "userUpdate": {
     "firstName": "Prénom",
@@ -589,7 +638,12 @@
   "home": {
     "feed": "Alimentation",
     "pinnedPosts": "Afficher les publications épinglées",
-    "somethingOnYourMind": "Quelque chose dans votre esprit?"
+    "somethingOnYourMind": "Quelque chose dans votre esprit?",
+    "addPost": "Ajouter une publication",
+    "startPost": "Commencer une publication",
+    "media": "Médias",
+    "event": "Événement",
+    "article": "Article"
   },
   "settings": {
     "profileSettings": "Paramètres de profil",
@@ -597,7 +651,10 @@
     "lastName": "Nom de famille",
     "emailAddress": "Adresse e-mail",
     "updateImage": "Mettre à jour l'image",
-    "save": "Sauvegarder"
+    "saveChanges": "Sauvegarder les modifications",
+    "updateProfile": "Mettre à jour le profil",
+    "otherSettings": "Autres paramètres",
+    "changeLanguage": "Changer la langue"
   },
   "donate": {
     "donateTo": "Faire un don à",
diff --git a/public/locales/hi.json b/public/locales/hi.json
index ce53bf4ff8..f23ed585f2 100644
--- a/public/locales/hi.json
+++ b/public/locales/hi.json
@@ -10,6 +10,11 @@
     "email": "ईमेल",
     "password": "पासवर्ड",
     "atleast_8_char_long": "कम से कम 8 कैरेक्टर लंबा",
+    "atleast_6_char_long": "कम से कम 6 अक्षर लंबा",
+    "firstName_invalid": "प्रथम नाम में केवल छोटे और बड़े अक्षर होने चाहिए",
+    "lastName_invalid": "अंतिम नाम में केवल छोटे और बड़े अक्षर होने चाहिए",
+    "password_invalid": "पासवर्ड में कम से कम एक लोअरकेस अक्षर, एक अपरकेस अक्षर, एक संख्यात्मक मान और एक विशेष अक्षर होना चाहिए",
+    "email_invalid": "ईमेल में कम से कम 8 अक्षर होने चाहिए",
     "Password_and_Confirm_password_mismatches.": "पासवर्ड और पुष्टि पासवर्ड बेमेल।",
     "confirmPassword": "पासवर्ड की पुष्टि कीजिये",
     "forgotPassword": "पासवर्ड भूल गए ?",
@@ -25,7 +30,42 @@
     "notAuthorised": "क्षमा करें! आप अधिकृत नहीं हैं!",
     "notFound": "उपयोगकर्ता नहीं मिला!",
     "successfullyRegistered": "सफलतापूर्वक पंजीकृत। कृपया स्वीकृत होने तक प्रतीक्षा करें।",
-    "login_to_admin_portal": "एडमिन पोर्टल लॉगिन",
+    "OR": "या",
+    "admin": "व्यवस्थापक",
+    "user": "उपयोगकर्ता",
+    "lowercase_check": "कम से कम एक छोटा अक्षर",
+    "uppercase_check": "कम से कम एक बड़ा अक्षर",
+    "numeric_value_check": "कम से कम एक संख्यात्मक मान",
+    "special_char_check": "कम से कम एक विशेष पात्र"
+  },
+  "userLoginPage": {
+    "title": "तलवा व्यवस्थापक",
+    "fromPalisadoes": "पलिसाडो के स्वयंसेवकों द्वारा एक खुला स्रोत अनुप्रयोग",
+    "talawa_portal": "तलावा प्रशासन पोर्टल",
+    "login": "लॉग इन करें",
+    "register": "पंजीकरण करवाना",
+    "firstName": "पहला नाम",
+    "lastName": "उपनाम",
+    "email": "ईमेल",
+    "password": "पासवर्ड",
+    "atleast_8_char_long": "कम से कम 8 कैरेक्टर लंबा",
+    "Password_and_Confirm_password_mismatches.": "पासवर्ड और पुष्टि पासवर्ड बेमेल।",
+    "confirmPassword": "पासवर्ड की पुष्टि कीजिये",
+    "forgotPassword": "पासवर्ड भूल गए ?",
+    "enterEmail": "ईमेल दर्ज करें",
+    "enterPassword": "पास वर्ड दर्ज करें",
+    "doNotOwnAnAccount": "क्या आपके पास खाता नहीं है?",
+    "talawaApiUnavailable": "तलावा-एपीआई सेवा उपलब्ध नहीं है। क्या यह चल रही है? अपनी नेटवर्क कनेक्टिविटी की भी जाँच करें।",
+    "captchaError": "कैप्चा त्रुटि!",
+    "Please_check_the_captcha": "कृपया, कैप्चा जांचें।",
+    "Something_went_wrong": "कुछ गलत हुआ, कृपया कुछ समय बाद प्रयास करें।",
+    "passwordMismatches": "पासवर्ड और पुष्टि पासवर्ड मेल नहीं खाते।",
+    "fillCorrectly": "सभी विवरण सही ढंग से भरें।",
+    "notAuthorised": "क्षमा करें! आप अधिकृत नहीं हैं!",
+    "notFound": "उपयोगकर्ता नहीं मिला!",
+    "successfullyRegistered": "सफलतापूर्वक पंजीकृत। कृपया स्वीकृत होने तक प्रतीक्षा करें।",
+    "afterRegister": "पंजीकरण सफलतापूर्वक हो गया है। कृपया आपके अनुरोध को स्वीकार करने के लिए व्यवस्थापक की प्रतीक्षा करें।",
+    "userLogin": "उपयोगकर्ता लॉगिन",
     "OR": "या"
   },
   "latestEvents": {
@@ -33,6 +73,11 @@
     "eventCardSeeAll": "सभी देखें",
     "noEvents": "कोई आगामी घटनाएँ नहीं"
   },
+  "latestPosts": {
+    "latestPostsTitle": "नवीनतम पोस्ट",
+    "seeAllLink": "सभी देखें",
+    "noPostsCreated": "कोई पोस्ट नहीं बनाई गई"
+  },
   "listNavbar": {
     "talawa_portal": "तलावा प्रशासन पोर्टल",
     "roles": "भूमिकाएँ",
@@ -88,6 +133,8 @@
     "displayImage": "प्रदर्शन छवि",
     "enterName": "नाम दर्ज करें",
     "sort": "छांटें",
+    "Earliest": "सबसे पुराना",
+    "Latest": "सबसे नवीनतम",
     "filter": "फ़िल्टर",
     "cancel": "रद्द करना",
     "endOfResults": "परिणामों का अंत",
@@ -136,7 +183,8 @@
     "filter": "फ़िल्टर",
     "roleUpdated": "भूमिका अपडेट की गई।",
     "noResultsFoundFor": "के लिए कोई परिणाम नहीं मिला ",
-    "talawaApiUnavailable": "तलवा-एपीआई सेवा उपलब्ध नहीं है। क्या यह चल रहा है? अपनी नेटवर्क कनेक्टिविटी भी जांचें।"
+    "talawaApiUnavailable": "तलवा-एपीआई सेवा उपलब्ध नहीं है। क्या यह चल रहा है? अपनी नेटवर्क कनेक्टिविटी भी जांचें।",
+    "cancel": "रद्द करें"
   },
   "requests": {
     "title": "तलवा अनुरोध",
@@ -419,7 +467,8 @@
     "deleteMsg": "क्या आप इस संगठन को हटाना चाहते हैं?",
     "cancel": "रद्द करना",
     "confirmDelete": "हटाने की पुष्टि करें",
-    "longDelOrgMsg": "संगठन को हमेशा के लिए हटा देने के लिए संगठन हटाने के बटन पर क्लिक करके, उसके इवेंट्स, टैग्स और सभी संबंधित डेटा सहित सभी जानकारी हटा दी जाएगी।"
+    "longDelOrgMsg": "संगठन को हमेशा के लिए हटा देने के लिए संगठन हटाने के बटन पर क्लिक करके, उसके इवेंट्स, टैग्स और सभी संबंधित डेटा सहित सभी जानकारी हटा दी जाएगी।",
+    "successfullyDeletedSampleOrganization": "नमूना संगठन सफलतापूर्वक हटा दिया गया"
   },
   "userUpdate": {
     "firstName": "पहला नाम",
@@ -589,7 +638,12 @@
   "home": {
     "feed": "फ़ीड",
     "pinnedPosts": "पिन किए गए पोस्ट देखें",
-    "somethingOnYourMind": "आपके मन में कुछ है?"
+    "somethingOnYourMind": "आपके मन में कुछ है?",
+    "addPost": "पोस्ट जोड़ें",
+    "startPost": "एक पोस्ट शुरू करें",
+    "media": "मीडिया",
+    "event": "घटना",
+    "article": "लेख"
   },
   "settings": {
     "profileSettings": "पार्श्वचित्र समायोजन",
@@ -597,7 +651,10 @@
     "lastName": "उपनाम",
     "emailAddress": "मेल पता",
     "updateImage": "छवि अद्यतन करें",
-    "save": "बचाना"
+    "saveChanges": "परिवर्तनों को सुरक्षित करें",
+    "updateProfile": "प्रोफ़ाइल अपडेट करें",
+    "otherSettings": "अन्य सेटिंग्स",
+    "changeLanguage": "भाषा बदलें"
   },
   "donate": {
     "donateTo": "दान दें",
@@ -673,14 +730,14 @@
     "selectContact": "बातचीत शुरू करने के लिए एक संपर्क चुनें",
     "sendMessage": "मेसेज भेजें"
   },
-  "ऑर्गप्रोफ़ाइलफ़ील्ड": {
-    "लोड हो रहा है": "लोड हो रहा है...",
-    "noCustomField": "कोई कस्टम फ़ील्ड उपलब्ध नहीं",
-    "customFieldName": "फ़ील्ड नाम",
-    "enterCustomFieldName": "फ़ील्ड नाम दर्ज करें",
-    "customFieldType": "फ़ील्ड प्रकार",
+  "orgProfileField": {
+    "loading": "लोड हो रहा है...",
+    "noCustomField": "कोई कस्टम फ़ील्ड उपलब्ध नहीं है",
+    "customFieldName": "फ़ील्ड का नाम",
+    "enterCustomFieldName": "फ़ील्ड का नाम दर्ज करें",
+    "customFieldType": "फ़ील्ड का प्रकार",
     "saveChanges": "परिवर्तन सहेजें",
-    "कस्टम फ़ील्ड हटाएँ": "कस्टम फ़ील्ड हटाएँ",
+    "Remove Custom Field": "कस्टम फ़ील्ड हटाएँ",
     "fieldSuccessMessage": "फ़ील्ड सफलतापूर्वक जोड़ा गया",
     "fieldRemovalSuccess": "फ़ील्ड सफलतापूर्वक हटा दिया गया"
   }
diff --git a/public/locales/sp.json b/public/locales/sp.json
index 26f7288d8a..b36852e85d 100644
--- a/public/locales/sp.json
+++ b/public/locales/sp.json
@@ -10,6 +10,11 @@
     "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 ?",
@@ -25,7 +30,42 @@
     "notAuthorised": "¡Lo siento! ¡No estás autorizado!",
     "notFound": "¡Usuario no encontrado!",
     "successfullyRegistered": "Registrado con éxito. Espere hasta que sea aprobado",
-    "login_to_admin_portal": "Inicio de sesión en el portal de administración",
+    "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"
+  },
+  "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"
   },
   "latestEvents": {
@@ -33,6 +73,11 @@
     "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",
@@ -88,6 +133,8 @@
     "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",
@@ -136,7 +183,8 @@
     "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."
+    "talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Compruebe también la conectividad de su red.",
+    "cancel": "Cancelar"
   },
   "requests": {
     "title": "Solicitudes Talawa",
@@ -419,7 +467,8 @@
     "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."
+    "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",
@@ -589,7 +638,12 @@
   "home": {
     "feed": "Alimentar",
     "pinnedPosts": "Ver publicaciones fijadas",
-    "somethingOnYourMind": "¿Algo en tu mente?"
+    "somethingOnYourMind": "¿Algo en tu mente?",
+    "addPost": "Agregar publicación",
+    "startPost": "Comenzar una publicación",
+    "media": "Medios",
+    "event": "Evento",
+    "article": "Artículo"
   },
   "settings": {
     "profileSettings": "Configuración de perfil",
@@ -597,7 +651,10 @@
     "lastName": "Apellido",
     "emailAddress": "dirección de correo electrónico",
     "updateImage": "Actualizar imagen",
-    "save": "Ahorrar"
+    "saveChanges": "Guardar cambios",
+    "updateProfile": "Actualización del perfil",
+    "otherSettings": "Otras Configuraciones",
+    "changeLanguage": "Cambiar Idioma"
   },
   "donate": {
     "donateTo": "Donar a",
@@ -673,15 +730,16 @@
     "selectContact": "Seleccione un contacto para iniciar una conversación",
     "sendMessage": "Enviar mensaje"
   },
-  "campoPerfildeOrganización": {
-    "cargando": "Cargando...",
+
+  "orgProfileField": {
+    "loading": "Cargando..",
     "noCustomField": "No hay campos personalizados disponibles",
-    "customFieldName": "Nombre de campo",
-    "enterCustomFieldName": "Ingrese el nombre del campo",
-    "customFieldType": "Tipo de campo",
-    "saveChanges": "Guardar cambios",
-    "Eliminar campo personalizado": "Eliminar campo personalizado",
-    "fieldSuccessMessage": "Campo agregado exitosamente",
+    "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"
   }
 }
diff --git a/public/locales/zh.json b/public/locales/zh.json
index d782fd897e..60f0ec3ed2 100644
--- a/public/locales/zh.json
+++ b/public/locales/zh.json
@@ -10,6 +10,11 @@
     "email": "電子郵件",
     "password": "密碼",
     "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.": "密碼和確認密碼不匹配。",
     "confirmPassword": "確認密碼",
     "forgotPassword": "忘記密碼 ？",
@@ -25,7 +30,42 @@
     "notAuthorised": "抱歉！你沒有被授權！",
     "notFound": "找不到用戶！",
     "successfullyRegistered": "註冊成功，請等待審核通過。",
-    "login_to_admin_portal": " 管理员门户登录 ",
+    "OR": "或者",
+    "admin": "行政",
+    "user": "用戶",
+    "lowercase_check": "至少一個小寫字母",
+    "uppercase_check": "至少有一個大寫字母",
+    "numeric_value_check": "至少一個數值",
+    "special_char_check": "至少一個特殊字符"
+  },
+  "userLoginPage": {
+    "title": "塔拉瓦管理員",
+    "fromPalisadoes": "柵欄 基金会志愿者的开源应用程序",
+    "talawa_portal": "塔拉瓦管理門戶",
+    "login": "登錄",
+    "register": "登記",
+    "firstName": "名",
+    "lastName": "姓",
+    "email": "電子郵件",
+    "password": "密碼",
+    "atleast_8_char_long": "至少 8 個字符長",
+    "Password_and_Confirm_password_mismatches.": "密碼和確認密碼不匹配。",
+    "confirmPassword": "確認密碼",
+    "forgotPassword": "忘記密碼 ？",
+    "enterEmail": "输入电子邮件",
+    "enterPassword": "输入密码",
+    "doNotOwnAnAccount": "沒有帳戶嗎？",
+    "talawaApiUnavailable": "服務不可用。它正在運行嗎？還要檢查您的網絡連接。",
+    "captchaError": "驗證碼錯誤！",
+    "Please_check_the_captcha": "請檢查驗證碼。",
+    "Something_went_wrong": "出了點問題，請稍後再試。",
+    "passwordMismatches": "密碼和確認密碼不匹配。",
+    "fillCorrectly": "正確填寫所有細節。",
+    "notAuthorised": "抱歉！你沒有被授權！",
+    "notFound": "找不到用戶！",
+    "successfullyRegistered": "註冊成功，請等待審核通過。",
+    "userLogin": "用户登录",
+    "afterRegister": "註冊成功。 請等待管理員批准您的請求。",
     "OR": "或者"
   },
   "latestEvents": {
@@ -33,6 +73,11 @@
     "eventCardSeeAll": "查看全部",
     "noEvents": "暂无即将举行的活动"
   },
+  "latestPosts": {
+    "latestPostsTitle": "最新文章",
+    "seeAllLink": "查看全部",
+    "noPostsCreated": "暂无文章"
+  },
   "listNavbar": {
     "talawa_portal": "塔拉瓦管理門戶",
     "roles": "角色",
@@ -88,6 +133,8 @@
     "displayImage": "顯示圖像",
     "enterName": "输入名字",
     "sort": "排序",
+    "Earliest": "最早的",
+    "Latest": "最新的",
     "filter": "過濾",
     "cancel": "取消",
     "endOfResults": "結果結束",
@@ -136,7 +183,8 @@
     "filter": "過濾",
     "roleUpdated": "角色已更新。",
     "noResultsFoundFor": "未找到结果 ",
-    "talawaApiUnavailable": "服務不可用。它在運行嗎？還要檢查您的網絡連接。"
+    "talawaApiUnavailable": "服務不可用。它在運行嗎？還要檢查您的網絡連接。",
+    "cancel": "取消"
   },
   "requests": {
     "title": "塔拉瓦請求",
@@ -419,7 +467,8 @@
     "deleteMsg": "您是否要删除此组织？",
     "cancel": "取消",
     "confirmDelete": "确认删除",
-    "longDelOrgMsg": "点击删除组织按钮，组织将被永久删除，包括其事件、标签和所有相关数据。"
+    "longDelOrgMsg": "点击删除组织按钮，组织将被永久删除，包括其事件、标签和所有相关数据。",
+    "successfullyDeletedSampleOrganization": "已成功刪除樣本組織"
   },
   "userUpdate": {
     "firstName": "名",
@@ -589,7 +638,12 @@
   "home": {
     "feed": "餵養",
     "pinnedPosts": "查看固定帖子",
-    "somethingOnYourMind": "你有什麼心事嗎？"
+    "somethingOnYourMind": "你有什麼心事嗎？",
+    "addPost": "添加帖子",
+    "startPost": "开始一篇帖子",
+    "media": "媒体",
+    "event": "活动",
+    "article": "文章"
   },
   "settings": {
     "profileSettings": "配置文件設置",
@@ -597,7 +651,10 @@
     "lastName": "姓",
     "emailAddress": "電子郵件地址",
     "updateImage": "更新圖片",
-    "save": "節省"
+    "saveChanges": "保存更改",
+    "updateProfile": "更新个人信息",
+    "otherSettings": "其他设置",
+    "changeLanguage": "更改语言"
   },
   "donate": {
     "donateTo": "捐贈給",
diff --git a/schema.graphql b/schema.graphql
index d200ee7349..0d8c984c9f 100644
--- a/schema.graphql
+++ b/schema.graphql
@@ -585,6 +585,8 @@ input OrganizationInput {
 enum OrganizationOrderByInput {
   apiUrl_ASC
   apiUrl_DESC
+  createdAt_ASC
+  createdAt_DESC
   description_ASC
   description_DESC
   id_ASC
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/src/GraphQl/Queries/Queries.ts b/src/GraphQl/Queries/Queries.ts
index 76db5206c2..95b149b187 100644
--- a/src/GraphQl/Queries/Queries.ts
+++ b/src/GraphQl/Queries/Queries.ts
@@ -40,13 +40,19 @@ export const ORGANIZATION_LIST = gql`
   }
 `;
 
-// Query to take the Organization list with filter option
+// 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) {
+  query OrganizationsConnection(
+    $filter: String
+    $first: Int
+    $skip: Int
+    $orderBy: OrganizationOrderByInput
+  ) {
     organizationsConnection(
       where: { name_contains: $filter }
       first: $first
       skip: $skip
+      orderBy: $orderBy
     ) {
       _id
       image
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/Twitter-Logo.svg b/src/assets/svgs/social-icons/Twitter-Logo.svg
new file mode 100644
index 0000000000..efa659339d
--- /dev/null
+++ b/src/assets/svgs/social-icons/Twitter-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..d698fc1376
--- /dev/null
+++ b/src/assets/svgs/social-icons/index.tsx
@@ -0,0 +1,17 @@
+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 TwitterLogo from './Twitter-Logo.svg';
+import YoutubeLogo from './Youtube-Logo.svg';
+
+export {
+  FacebookLogo,
+  GithubLogo,
+  InstagramLogo,
+  LinkedInLogo,
+  SlackLogo,
+  TwitterLogo,
+  YoutubeLogo,
+};
diff --git a/src/components/DeleteOrg/DeleteOrg.test.tsx b/src/components/DeleteOrg/DeleteOrg.test.tsx
index e0a58351f7..f3cb9b492d 100644
--- a/src/components/DeleteOrg/DeleteOrg.test.tsx
+++ b/src/components/DeleteOrg/DeleteOrg.test.tsx
@@ -1,39 +1,103 @@
 import React from 'react';
 import { MockedProvider } from '@apollo/react-testing';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { 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 { DELETE_ORGANIZATION_MUTATION } from 'GraphQl/Mutations/mutations';
+import {
+  DELETE_ORGANIZATION_MUTATION,
+  REMOVE_SAMPLE_ORGANIZATION_MUTATION,
+} from 'GraphQl/Mutations/mutations';
 import { act } from 'react-dom/test-utils';
 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';
+
+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: 123,
+        id: '456',
       },
     },
     result: {
       data: {
-        removeOrganization: [
-          {
-            _id: 123,
-          },
-        ],
+        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 link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(MOCKS_WITH_ERROR, true);
 
 afterEach(() => {
   localStorage.clear();
@@ -41,29 +105,31 @@ afterEach(() => {
 
 describe('Delete Organization Component', () => {
   test('should be able to Toggle Delete Organization Modal', async () => {
-    window.location.assign('/orgsetting/id=123');
+    window.location.assign('/orgsetting/id=456');
     localStorage.setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
           <Provider store={store}>
             <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
               <DeleteOrg />
             </I18nextProvider>
           </Provider>
         </BrowserRouter>
       </MockedProvider>
     );
+    await wait();
     screen.getByTestId(/openDeleteModalBtn/i).click();
     expect(screen.getByTestId(/orgDeleteModal/i)).toBeInTheDocument();
     screen.getByTestId(/closeDelOrgModalBtn/i).click();
     await act(async () => {
       expect(screen.queryByTestId(/orgDeleteModal/i)).not.toHaveFocus();
     });
-    expect(window.location).toBeAt('/orgsetting/id=123');
+    expect(window.location).toBeAt('/orgsetting/id=456');
   });
 
-  test('Delete organization functionality should work properly', async () => {
+  test('should be able to Toggle Delete Organization Modal When Organization is Sample Organization', async () => {
     window.location.assign('/orgsetting/id=123');
     localStorage.setItem('UserType', 'SUPERADMIN');
     render(
@@ -71,18 +137,25 @@ describe('Delete Organization Component', () => {
         <BrowserRouter>
           <Provider store={store}>
             <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
               <DeleteOrg />
             </I18nextProvider>
           </Provider>
         </BrowserRouter>
       </MockedProvider>
     );
+    await wait();
     screen.getByTestId(/openDeleteModalBtn/i).click();
-    screen.getByTestId(/deleteOrganizationBtn/i).click();
-    expect(window.location).not.toBeNull();
+    expect(screen.getByTestId(/orgDeleteModal/i)).toBeInTheDocument();
+    screen.getByTestId(/closeDelOrgModalBtn/i).click();
+    await act(async () => {
+      expect(screen.queryByTestId(/orgDeleteModal/i)).not.toHaveFocus();
+    });
+    expect(window.location).toBeAt('/orgsetting/id=123');
   });
-  test('should handle deletion failure gracefully', async () => {
-    window.location.assign('/orgsetting/id=456'); // Using an ID that triggers a failure
+
+  test('Delete organization functionality should work properly', async () => {
+    window.location.assign('/orgsetting/id=456');
     localStorage.setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
@@ -95,12 +168,14 @@ describe('Delete Organization Component', () => {
         </BrowserRouter>
       </MockedProvider>
     );
-
-    fireEvent.click(screen.getByTestId('openDeleteModalBtn'));
-    fireEvent.click(screen.getByTestId('deleteOrganizationBtn'));
-    expect(screen.queryByText(/Deletion failed!/i)).toBeNull();
+    await wait();
+    screen.getByTestId(/openDeleteModalBtn/i).click();
+    screen.getByTestId(/deleteOrganizationBtn/i).click();
+    await wait();
+    expect(window.location.replace).toHaveBeenCalledWith('/orglist');
   });
-  test('should close the Delete Organization Modal when "Cancel" button is clicked', async () => {
+
+  test('Delete organization functionality should work properly for sample org', async () => {
     window.location.assign('/orgsetting/id=123');
     localStorage.setItem('UserType', 'SUPERADMIN');
     render(
@@ -114,19 +189,19 @@ describe('Delete Organization Component', () => {
         </BrowserRouter>
       </MockedProvider>
     );
-    fireEvent.click(screen.getByTestId('openDeleteModalBtn'));
-    expect(screen.getByTestId('orgDeleteModal')).toBeInTheDocument();
-    fireEvent.click(screen.getByTestId('closeDelOrgModalBtn'));
-    await waitFor(() => {
-      expect(screen.queryByTestId('orgDeleteModal')).toBeNull();
-    });
-    expect(window.location).toBeAt('/orgsetting/id=123');
+    await wait();
+    screen.getByTestId(/openDeleteModalBtn/i).click();
+    screen.getByTestId(/deleteOrganizationBtn/i).click();
+    await wait(2000);
+    expect(window.location.replace).toHaveBeenCalledWith('/orglist');
   });
-  test('should open the Delete Organization Modal when "Delete" button is clicked', async () => {
+
+  test('Error handling for IS_SAMPLE_ORGANIZATION_QUERY mock', async () => {
     window.location.assign('/orgsetting/id=123');
     localStorage.setItem('UserType', 'SUPERADMIN');
+    jest.spyOn(toast, 'error');
     render(
-      <MockedProvider addTypename={false} link={link}>
+      <MockedProvider addTypename={false} link={link2}>
         <BrowserRouter>
           <Provider store={store}>
             <I18nextProvider i18n={i18nForTest}>
@@ -136,15 +211,20 @@ describe('Delete Organization Component', () => {
         </BrowserRouter>
       </MockedProvider>
     );
-    fireEvent.click(screen.getByTestId('openDeleteModalBtn'));
-    expect(screen.getByTestId('orgDeleteModal')).toBeInTheDocument();
-    expect(window.location).toBeAt('/orgsetting/id=123');
+    await wait();
+    screen.getByTestId(/openDeleteModalBtn/i).click();
+    screen.getByTestId(/deleteOrganizationBtn/i).click();
+    await wait();
+    expect(toast.error).toHaveBeenCalledWith(
+      'Failed to delete sample organization'
+    );
   });
-  test('render Delete Organization Modal when "Delete" button is clicked', async () => {
-    window.location.assign('/orgsetting/id=123');
+
+  test('Error handling for DELETE_ORGANIZATION_MUTATION mock', async () => {
+    window.location.assign('/orgsetting/id=456');
     localStorage.setItem('UserType', 'SUPERADMIN');
     render(
-      <MockedProvider addTypename={false} link={link}>
+      <MockedProvider addTypename={false} link={link2}>
         <BrowserRouter>
           <Provider store={store}>
             <I18nextProvider i18n={i18nForTest}>
@@ -154,8 +234,9 @@ describe('Delete Organization Component', () => {
         </BrowserRouter>
       </MockedProvider>
     );
-    fireEvent.click(screen.getByTestId('openDeleteModalBtn'));
-    expect(screen.getByTestId('orgDeleteModal')).toBeInTheDocument();
-    expect(window.location).toBeAt('/orgsetting/id=123');
+    await wait();
+    screen.getByTestId(/openDeleteModalBtn/i).click();
+    screen.getByTestId(/deleteOrganizationBtn/i).click();
+    await wait();
   });
 });
diff --git a/src/components/DeleteOrg/DeleteOrg.tsx b/src/components/DeleteOrg/DeleteOrg.tsx
index b7ceafbd5c..72fcf5ac03 100644
--- a/src/components/DeleteOrg/DeleteOrg.tsx
+++ b/src/components/DeleteOrg/DeleteOrg.tsx
@@ -33,12 +33,14 @@ function deleteOrg(): JSX.Element {
     if (data && data.isSampleOrganization) {
       removeSampleOrganization()
         .then(() => {
-          toast.success('Successfully deleted sample Organization');
+          toast.success(t('successfullyDeletedSampleOrganization'));
+          setTimeout(() => {
+            window.location.replace('/orglist');
+          }, 1000);
         })
         .catch((error) => {
           toast.error(error.message);
         });
-      window.location.replace('/orglist');
     } else {
       try {
         await del({
@@ -82,7 +84,7 @@ function deleteOrg(): JSX.Element {
           onHide={toggleDeleteModal}
           data-testid="orgDeleteModal"
         >
-          <Modal.Header className="bg-danger" closeButton>
+          <Modal.Header className="bg-primary" closeButton>
             <h5 className="text-white fw-bold">{t('deleteOrganization')}</h5>
           </Modal.Header>
           <Modal.Body>{t('deleteMsg')}</Modal.Body>
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.tsx b/src/components/EventStats/EventStats.tsx
index 6158c39075..c9f1a70e8d 100644
--- a/src/components/EventStats/EventStats.tsx
+++ b/src/components/EventStats/EventStats.tsx
@@ -3,8 +3,8 @@ import { Modal } from 'react-bootstrap';
 import { FeedbackStats } from './Statistics/Feedback';
 import { ReviewStats } from './Statistics/Review';
 import { AverageRating } from './Statistics/AverageRating';
-import Stack from '@mui/material/Stack';
 import styles from './Loader.module.css';
+import eventStatsStyles from './EventStats.module.css';
 import { useQuery } from '@apollo/client';
 import { EVENT_FEEDBACKS } from 'GraphQl/Queries/Queries';
 
@@ -44,14 +44,12 @@ export const EventStats = ({
         <Modal.Header closeButton className="bg-primary">
           <Modal.Title className="text-white">Event Statistics</Modal.Title>
         </Modal.Header>
-        <Modal.Body>
-          <Stack direction="row" spacing={2}>
-            <FeedbackStats data={data} />
-            <div>
-              <ReviewStats data={data} />
-              <AverageRating data={data} />
-            </div>
-          </Stack>
+        <Modal.Body className={eventStatsStyles.stackEvents}>
+          <FeedbackStats data={data} />
+          <div>
+            <ReviewStats data={data} />
+            <AverageRating data={data} />
+          </div>
         </Modal.Body>
       </Modal>
     </>
diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
index 224cfeb2ec..94cbbf0367 100644
--- a/src/components/LeftDrawer/LeftDrawer.tsx
+++ b/src/components/LeftDrawer/LeftDrawer.tsx
@@ -167,12 +167,12 @@ const leftDrawer = ({
 
           <Button
             variant="light"
-            className={`mt-4 d-flex justify-content-start px-0 w-100 ${styles.logout}`}
+            className={`mt-4 d-flex justify-content-start px-0 w-100 bg-danger text-white  ${styles.logout}`}
             onClick={(): void => logout()}
             data-testid="logoutBtn"
           >
             <div className={styles.imageContainer}>
-              <LogoutIcon fill={'var(--bs-secondary)'} />
+              <LogoutIcon fill={'white'} />
             </div>
             {t('logout')}
           </Button>
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..357d6c2ad2
--- /dev/null
+++ b/src/components/LoginPortalToggle/LoginPortalToggle.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { act, 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 () => {
+    render(
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <LoginPortalToggle />
+          </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..9d95a9f453
--- /dev/null
+++ b/src/components/LoginPortalToggle/LoginPortalToggle.tsx
@@ -0,0 +1,37 @@
+import React 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';
+
+function loginPortalToggle(): JSX.Element {
+  const { t } = useTranslation('translation', { keyPrefix: 'loginPage' });
+
+  return (
+    <Row className="mb-4">
+      <Col>
+        <NavLink
+          className={styles.navLinkClass}
+          activeClassName={styles.activeLink}
+          exact
+          to="/"
+        >
+          {t('admin')}
+        </NavLink>
+      </Col>
+      <Col>
+        <NavLink
+          className={styles.navLinkClass}
+          activeClassName={styles.activeLink}
+          exact
+          to="/user"
+        >
+          {t('user')}
+        </NavLink>
+      </Col>
+    </Row>
+  );
+}
+
+export default loginPortalToggle;
diff --git a/src/components/OrgListCard/OrgListCard.module.css b/src/components/OrgListCard/OrgListCard.module.css
index 935bada4f4..15628052ce 100644
--- a/src/components/OrgListCard/OrgListCard.module.css
+++ b/src/components/OrgListCard/OrgListCard.module.css
@@ -21,13 +21,13 @@
   border-radius: 4px;
 }
 
-.orgCard .innerContainer .orgImgContainer img {
+.orgCard .innerContainer .orgImgContainer {
   width: 125px;
   height: 120px;
   object-fit: contain;
 }
 
-.orgCard .innerContainer .orgImgContainer .emptyImg {
+.orgCard .innerContainer .orgImgContainer {
   width: 125px;
   height: 120px;
   background-color: var(--bs-gray-200);
@@ -89,7 +89,7 @@
 .manageBtn {
   display: flex;
   justify-content: space-around;
-  width: 150px;
+  width: 100px;
 }
 
 .orgName {
diff --git a/src/components/OrgListCard/OrgListCard.tsx b/src/components/OrgListCard/OrgListCard.tsx
index 403a3cb3f4..30ec8adc5e 100644
--- a/src/components/OrgListCard/OrgListCard.tsx
+++ b/src/components/OrgListCard/OrgListCard.tsx
@@ -42,18 +42,19 @@ function orgListCard(props: InterfaceOrgListCardProps): JSX.Element {
       <div className={styles.orgCard}>
         <div className={styles.innerContainer}>
           <div className={styles.orgImgContainer}>
-            {image ? (
-              <img
-                src={image}
-                className={styles.orgimg}
-                alt={`${name} image`}
-              />
-            ) : (
-              <div
-                className={styles.emptyImg}
-                data-testid="emptyContainerForImage"
-              />
-            )}
+            <img
+              src={
+                image
+                  ? image
+                  : `https://api.dicebear.com/5.x/initials/svg?seed=${name
+                      .split(/\s+/)
+                      .map((word) => word.charAt(0))
+                      .slice(0, 2)
+                      .join('')}`
+              }
+              alt={`${name} image`}
+              data-testid={image ? '' : 'emptyContainerForImage'}
+            />
           </div>
           <div className={styles.content}>
             <Tooltip title={name} placement="top-end">
diff --git a/src/components/UserPortal/Login/Login.tsx b/src/components/UserPortal/Login/Login.tsx
index 326d416c06..81c98d3e5f 100644
--- a/src/components/UserPortal/Login/Login.tsx
+++ b/src/components/UserPortal/Login/Login.tsx
@@ -52,10 +52,10 @@ export default function login(props: InterfaceLoginProps): JSX.Element {
           /* istanbul ignore next */
           window.location.assign('/user/organizations');
         } else {
+          /* istanbul ignore next */
           toast.warn(t('notAuthorised'));
         }
       } catch (error: any) {
-        /* istanbul ignore next */
         errorHandler(t, error);
       }
     }
@@ -84,7 +84,6 @@ export default function login(props: InterfaceLoginProps): JSX.Element {
   return (
     <>
       <h3 className="mt-3 font-weight-bold">{t('login')}</h3>
-      <div className="mt-1">{t('loginIntoYourAccount')}</div>
 
       <div className="my-3">
         <h6>{t('emailAddress')}</h6>
diff --git a/src/components/UserPortal/UserNavbar/UserNavbar.test.tsx b/src/components/UserPortal/UserNavbar/UserNavbar.test.tsx
index 57d478b8d0..841a858839 100644
--- a/src/components/UserPortal/UserNavbar/UserNavbar.test.tsx
+++ b/src/components/UserPortal/UserNavbar/UserNavbar.test.tsx
@@ -174,4 +174,65 @@ describe('Testing UserNavbar Component [User Portal]', () => {
 
     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.getByText('My Tasks')).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');
+  });
+
+  test('User can navigate to the "My Tasks" 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('My Tasks'));
+    expect(window.location.pathname).toBe('/user/tasks');
+  });
 });
diff --git a/src/components/UserPortal/UserNavbar/UserNavbar.tsx b/src/components/UserPortal/UserNavbar/UserNavbar.tsx
index e10268e85e..04f4bd50fb 100644
--- a/src/components/UserPortal/UserNavbar/UserNavbar.tsx
+++ b/src/components/UserPortal/UserNavbar/UserNavbar.tsx
@@ -8,11 +8,13 @@ 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 { Link } from 'react-router-dom';
 import { useMutation } from '@apollo/client';
 import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
+import { useHistory } from 'react-router-dom';
 
 function userNavbar(): JSX.Element {
+  const history = useHistory();
+
   const { t } = useTranslation('translation', {
     keyPrefix: 'userNavbar',
   });
@@ -95,16 +97,21 @@ function userNavbar(): JSX.Element {
               <Dropdown.ItemText>
                 <b>{userName}</b>
               </Dropdown.ItemText>
-              <Dropdown.Item>
-                <Link to="/user/settings" className={styles.link}>
-                  {t('settings')}
-                </Link>
+
+              <Dropdown.Item
+                onClick={() => history.push('/user/settings')}
+                className={styles.link}
+              >
+                {t('settings')}
               </Dropdown.Item>
-              <Dropdown.Item>
-                <Link to="/user/tasks" className={styles.link}>
-                  {t('myTasks')}
-                </Link>
+
+              <Dropdown.Item
+                onClick={() => history.push('/user/tasks')}
+                className={styles.link}
+              >
+                {t('myTasks')}
               </Dropdown.Item>
+
               <Dropdown.Item onClick={handleLogout} data-testid={`logoutBtn`}>
                 {t('logout')}
               </Dropdown.Item>
diff --git a/src/components/UsersTableItem/UserTableItem.test.tsx b/src/components/UsersTableItem/UserTableItem.test.tsx
index 4d91fa88df..6767f73229 100644
--- a/src/components/UsersTableItem/UserTableItem.test.tsx
+++ b/src/components/UsersTableItem/UserTableItem.test.tsx
@@ -8,7 +8,6 @@ import i18nForTest from 'utils/i18nForTest';
 import type { InterfaceQueryUserListItem } from 'utils/interfaces';
 import { MOCKS } from './UserTableItemMocks';
 import UsersTableItem from './UsersTableItem';
-
 const link = new StaticMockLink(MOCKS, true);
 
 async function wait(ms = 100): Promise<void> {
@@ -370,10 +369,11 @@ describe('Testing User Table Item', () => {
     expect(screen.getByTestId(`changeRoleInOrgdef`)).toHaveValue('USER?def');
 
     // Search for Joined Organization 1
+    const searchBtn = screen.getByTestId(`searchBtnJoinedOrgs`);
     fireEvent.keyUp(inputBox, {
-      key: 'Enter',
       target: { value: 'Joined Organization 1' },
     });
+    fireEvent.click(searchBtn);
     expect(screen.getByText(/Joined Organization 1/i)).toBeInTheDocument();
     expect(
       screen.queryByText(/Joined Organization 2/i)
@@ -390,7 +390,8 @@ describe('Testing User Table Item', () => {
 
     // 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).toBeCalledWith('Profile Page Coming Soon !');
@@ -547,10 +548,11 @@ describe('Testing User Table Item', () => {
     expect(toast.success).toBeCalledWith('Profile Page Coming Soon !');
 
     // Search for Blocked Organization 1
+    const searchBtn = screen.getByTestId(`searchBtnOrgsBlockedBy`);
     fireEvent.keyUp(inputBox, {
-      key: 'Enter',
       target: { value: 'Blocked Organization 1' },
     });
+    fireEvent.click(searchBtn);
     expect(screen.getByText(/Blocked Organization 1/i)).toBeInTheDocument();
     expect(
       screen.queryByText(/Blocked Organization 2/i)
@@ -567,6 +569,8 @@ describe('Testing User Table Item', () => {
 
     // 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(/Blocked Organization 1/i));
diff --git a/src/components/UsersTableItem/UsersTableItem.tsx b/src/components/UsersTableItem/UsersTableItem.tsx
index 59b3bef616..842329e44b 100644
--- a/src/components/UsersTableItem/UsersTableItem.tsx
+++ b/src/components/UsersTableItem/UsersTableItem.tsx
@@ -127,34 +127,53 @@ const UsersTableItem = (props: Props): JSX.Element => {
   function handleCreator(): void {
     toast.success('Profile Page Coming Soon !');
   }
-  function handleSearchJoinedOrgs(e: any): void {
+  const searchJoinedOrgs = (value: string): void => {
+    setSearchByNameJoinedOrgs(value);
+    if (value == '') {
+      setJoinedOrgs(user.joinedOrganizations);
+    } else {
+      const filteredOrgs = user.joinedOrganizations.filter((org) =>
+        org.name.toLowerCase().includes(value.toLowerCase())
+      );
+      setJoinedOrgs(filteredOrgs);
+    }
+  };
+  const searchOrgsBlockedBy = (value: string): void => {
+    setSearchByNameOrgsBlockedBy(value);
+    if (value == '') {
+      setOrgsBlockedBy(user.organizationsBlockedBy);
+    } else {
+      const filteredOrgs = user.organizationsBlockedBy.filter((org) =>
+        org.name.toLowerCase().includes(value.toLowerCase())
+      );
+      setOrgsBlockedBy(filteredOrgs);
+    }
+  };
+  const handleSearchJoinedOrgs = (e: any): void => {
     if (e.key === 'Enter') {
       const { value } = e.target;
-      setSearchByNameJoinedOrgs(value);
-      if (value == '') {
-        setJoinedOrgs(user.joinedOrganizations);
-      } else {
-        const filteredOrgs = user.joinedOrganizations.filter((org) =>
-          org.name.toLowerCase().includes(value.toLowerCase())
-        );
-        setJoinedOrgs(filteredOrgs);
-      }
+      searchJoinedOrgs(value);
     }
-  }
-  function handleSearcgByOrgsBlockedBy(e: any): void {
+  };
+  const handleSearcgByOrgsBlockedBy = (e: any): void => {
     if (e.key === 'Enter') {
       const { value } = e.target;
-      setSearchByNameOrgsBlockedBy(value);
-      if (value == '') {
-        setOrgsBlockedBy(user.organizationsBlockedBy);
-      } else {
-        const filteredOrgs = user.organizationsBlockedBy.filter((org) =>
-          org.name.toLowerCase().includes(value.toLowerCase())
-        );
-        setOrgsBlockedBy(filteredOrgs);
-      }
+      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);
+  };
 
   /* istanbul ignore next */
   function onHideRemoveUserModal(): void {
@@ -223,7 +242,7 @@ const UsersTableItem = (props: Props): JSX.Element => {
             <div className={'position-relative mb-4 border rounded'}>
               <Form.Control
                 type="name"
-                id="orgname"
+                id="orgname-joined-orgs"
                 className="bg-white"
                 defaultValue={searchByNameJoinedOrgs}
                 placeholder={t('searchByOrgName')}
@@ -234,6 +253,8 @@ const UsersTableItem = (props: Props): JSX.Element => {
               <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>
@@ -396,7 +417,7 @@ const UsersTableItem = (props: Props): JSX.Element => {
             <div className={'position-relative mb-4 border rounded'}>
               <Form.Control
                 type="name"
-                id="orgname"
+                id="orgname-blocked-by"
                 className="bg-white"
                 defaultValue={searchByNameOrgsBlockedBy}
                 placeholder={t('searchByOrgName')}
@@ -408,6 +429,8 @@ const UsersTableItem = (props: Props): JSX.Element => {
                 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>
diff --git a/src/screens/BlockUser/BlockUser.test.tsx b/src/screens/BlockUser/BlockUser.test.tsx
index 778a5ffa4e..ede51a9777 100644
--- a/src/screens/BlockUser/BlockUser.test.tsx
+++ b/src/screens/BlockUser/BlockUser.test.tsx
@@ -18,6 +18,7 @@ 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;
@@ -630,4 +631,34 @@ describe('Testing Block/Unblock user screen', () => {
     ).toBeInTheDocument();
     expect(window.location).toBeAt('/blockuser/id=orgid');
   });
+
+  test('Testing Search functionality', async () => {
+    window.location.assign('/blockuser/id=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
index 644044feb4..4bccd808a8 100644
--- a/src/screens/BlockUser/BlockUser.tsx
+++ b/src/screens/BlockUser/BlockUser.tsx
@@ -117,18 +117,29 @@ const Requests = (): JSX.Element => {
     toast.error(memberError.message);
   }
 
-  const handleSearch = (e: any): void => {
+  const handleSearch = (value: string): void => {
+    setSearchByName(value);
+    memberRefetch({
+      orgId: currentUrl,
+      firstName_contains: searchByFirstName ? value : '',
+      lastName_contains: searchByFirstName ? '' : value,
+    });
+  };
+
+  const handleSearchByEnter = (e: any): void => {
     if (e.key === 'Enter') {
       const { value } = e.target;
-      setSearchByName(value);
-      memberRefetch({
-        orgId: currentUrl,
-        firstName_contains: searchByFirstName ? value : '',
-        lastName_contains: searchByFirstName ? '' : value,
-      });
+      handleSearch(value);
     }
   };
 
+  const handleSearchByBtnClick = (): void => {
+    const inputValue =
+      (document.getElementById('searchBlockedUsers') as HTMLInputElement)
+        ?.value || '';
+    handleSearch(inputValue);
+  };
+
   const headerTitles: string[] = [
     '#',
     t('name'),
@@ -145,6 +156,7 @@ const Requests = (): JSX.Element => {
             <div className={styles.input}>
               <Form.Control
                 type="name"
+                id="searchBlockedUsers"
                 className="bg-white"
                 placeholder={
                   searchByFirstName
@@ -154,11 +166,13 @@ const Requests = (): JSX.Element => {
                 data-testid="searchByName"
                 autoComplete="off"
                 required
-                onKeyUp={handleSearch}
+                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>
diff --git a/src/screens/LoginPage/LoginPage.module.css b/src/screens/LoginPage/LoginPage.module.css
index 8e8e314ba9..d5b9b755c7 100644
--- a/src/screens/LoginPage/LoginPage.module.css
+++ b/src/screens/LoginPage/LoginPage.module.css
@@ -34,14 +34,20 @@
   margin: 0;
   position: absolute;
   top: 1rem;
-  left: 2rem;
+  left: 1rem;
+}
+
+.langChangeBtnStyle {
+  width: 7.5rem;
+  height: 2.2rem;
+  padding: 0;
 }
 
 .row .right_portion .talawa_logo {
-  height: 150px;
-  width: 150px;
+  height: 5rem;
+  width: 5rem;
   display: block;
-  margin: 1rem auto;
+  margin: 1.5rem auto 1rem;
   -webkit-animation: zoomIn 0.3s ease-in-out;
   animation: zoomIn 0.3s ease-in-out;
 }
@@ -49,10 +55,10 @@
 .row .orText {
   display: block;
   position: absolute;
-  top: calc(-0.7rem - 0.5rem);
+  top: 0;
   left: calc(50% - 2.6rem);
   margin: 0 auto;
-  padding: 0.5rem 2rem;
+  padding: 0.35rem 2rem;
   z-index: 100;
   background: var(--bs-white);
   color: var(--bs-secondary);
@@ -102,6 +108,10 @@
     margin-bottom: 0;
     padding: 1rem;
   }
+
+  .socialIcons {
+    margin-bottom: 1rem;
+  }
 }
 
 @media (max-width: 577px) {
@@ -124,6 +134,10 @@
     height: 120px;
     margin: 0 auto 2rem auto;
   }
+
+  .socialIcons {
+    margin-bottom: 1rem;
+  }
 }
 
 .active_tab {
@@ -186,3 +200,28 @@
     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
index c92ba07e43..1b99cccf01 100644
--- a/src/screens/LoginPage/LoginPage.test.tsx
+++ b/src/screens/LoginPage/LoginPage.test.tsx
@@ -166,7 +166,7 @@ describe('Testing Login Page Screen', () => {
 
     await wait();
 
-    expect(screen.getByText(/Admin Portal/i)).toBeInTheDocument();
+    expect(screen.getByText(/Admin/i)).toBeInTheDocument();
     expect(window.location).toBeAt('/orglist');
   });
 
@@ -175,8 +175,8 @@ describe('Testing Login Page Screen', () => {
       firstName: 'John',
       lastName: 'Doe',
       email: 'johndoe@gmail.com',
-      password: 'johndoe',
-      confirmPassword: 'johndoe',
+      password: 'John@123',
+      confirmPassword: 'John@123',
     };
 
     render(
@@ -215,13 +215,57 @@ describe('Testing Login Page Screen', () => {
     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',
-      confirmPassword: 'doeJohn',
+      password: 'johnDoe@1',
+      confirmPassword: 'doeJohn@2',
     };
 
     render(
@@ -301,6 +345,54 @@ describe('Testing Login Page Screen', () => {
     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}>
diff --git a/src/screens/LoginPage/LoginPage.tsx b/src/screens/LoginPage/LoginPage.tsx
index b81b9c809c..64bbd7b36a 100644
--- a/src/screens/LoginPage/LoginPage.tsx
+++ b/src/screens/LoginPage/LoginPage.tsx
@@ -7,8 +7,19 @@ 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 } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import { toast } from 'react-toastify';
+import { Check, Clear } from '@mui/icons-material';
+
+import {
+  FacebookLogo,
+  LinkedInLogo,
+  GithubLogo,
+  InstagramLogo,
+  SlackLogo,
+  TwitterLogo,
+  YoutubeLogo,
+} from 'assets/svgs/social-icons';
 
 import { REACT_APP_USE_RECAPTCHA, RECAPTCHA_SITE_KEY } from 'Constant/constant';
 import {
@@ -19,6 +30,7 @@ import {
 import { ReactComponent as TalawaLogo } from 'assets/svgs/talawa.svg';
 import { ReactComponent as PalisadoesLogo } from 'assets/svgs/palisadoes.svg';
 import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLanguageDropDown';
+import LoginPortalToggle from 'components/LoginPortalToggle/LoginPortalToggle';
 import Loader from 'components/Loader/Loader';
 import { errorHandler } from 'utils/errorHandler';
 import styles from './LoginPage.module.css';
@@ -26,9 +38,16 @@ import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
 
 function loginPage(): JSX.Element {
   const { t } = useTranslation('translation', { keyPrefix: 'loginPage' });
+  const history = useHistory();
 
   document.title = t('title');
 
+  type PasswordValidation = {
+    lowercaseChar: boolean;
+    uppercaseChar: boolean;
+    numericValue: boolean;
+    specialChar: boolean;
+  };
   const [showTab, setShowTab] = useState<'LOGIN' | 'REGISTER'>('LOGIN');
   const [componentLoader, setComponentLoader] = useState(true);
   const [isInputFocused, setIsInputFocused] = useState(false);
@@ -46,12 +65,51 @@ function loginPage(): JSX.Element {
   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 passwordValidationRegExp = {
+    lowercaseCharRegExp: new RegExp('[a-z]'),
+    uppercaseCharRegExp: new RegExp('[A-Z]'),
+    numericalValueRegExp: new RegExp('\\d'),
+    specialCharRegExp: new RegExp('[!@#$%^&*()_+{}\\[\\]:;<>,.?~\\\\/-]'),
+  };
+  const handleLowercasePassCheck = (pass: string): void => {
+    setShowAlert((prevAlert) => ({
+      ...prevAlert,
+      lowercaseChar: !passwordValidationRegExp.lowercaseCharRegExp.test(pass),
+    }));
+  };
+
+  const handleUppercasePassCheck = (pass: string): void => {
+    setShowAlert((prevAlert) => ({
+      ...prevAlert,
+      uppercaseChar: !passwordValidationRegExp.uppercaseCharRegExp.test(pass),
+    }));
+  };
+  const handleNumericalValuePassCheck = (pass: string): void => {
+    setShowAlert((prevAlert) => ({
+      ...prevAlert,
+      numericValue: !passwordValidationRegExp.numericalValueRegExp.test(pass),
+    }));
+  };
+  const handleSpecialCharPassCheck = (pass: string): void => {
+    setShowAlert((prevAlert) => ({
+      ...prevAlert,
+      specialChar: !passwordValidationRegExp.specialCharRegExp.test(pass),
+    }));
+  };
+
   const recaptchaRef = useRef<ReCAPTCHA>(null);
 
   useEffect(() => {
     const isLoggedIn = localStorage.getItem('IsLoggedIn');
     if (isLoggedIn == 'TRUE') {
-      window.location.assign('/orglist');
+      history.push('/orglist');
     }
     setComponentLoader(false);
   }, []);
@@ -118,12 +176,28 @@ function loginPage(): JSX.Element {
       toast.error(t('Please_check_the_captcha'));
       return;
     }
+    const isValidatedString = (value: string): boolean =>
+      /^[a-zA-Z]+$/.test(value);
+
+    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 (
+      isValidatedString(signfirstName) &&
+      isValidatedString(signlastName) &&
       signfirstName.length > 1 &&
       signlastName.length > 1 &&
       signEmail.length >= 8 &&
-      signPassword.length > 1
+      signPassword.length > 1 &&
+      validatePassword(signPassword)
     ) {
       if (cPassword == signPassword) {
         try {
@@ -158,7 +232,18 @@ function loginPage(): JSX.Element {
         toast.warn(t('passwordMismatches'));
       }
     } else {
-      toast.warn(t('fillCorrectly'));
+      if (!isValidatedString(signfirstName)) {
+        toast.warn(t('firstName_invalid'));
+      }
+      if (!isValidatedString(signlastName)) {
+        toast.warn(t('lastName_invalid'));
+      }
+      if (!validatePassword(signPassword)) {
+        toast.warn(t('password_invalid'));
+      }
+      if (signEmail.length < 8) {
+        toast.warn(t('email_invalid'));
+      }
     }
   };
 
@@ -196,7 +281,7 @@ function loginPage(): JSX.Element {
           localStorage.setItem('IsLoggedIn', 'TRUE');
           localStorage.setItem('UserType', loginData.login.user.userType);
           if (localStorage.getItem('IsLoggedIn') == 'TRUE') {
-            window.location.replace('/orglist');
+            history.push('/orglist');
           }
         } else {
           toast.warn(t('notAuthorised'));
@@ -220,34 +305,95 @@ function loginPage(): JSX.Element {
         <Row className={styles.row}>
           <Col sm={0} md={6} lg={7} className={styles.left_portion}>
             <div className={styles.inner}>
-              <PalisadoesLogo className={styles.palisadoes_logo} />
-              <p className="text-center">{t('fromPalisadoes')}</p>
+              <a
+                href="https://www.palisadoes.org/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <PalisadoesLogo className={styles.palisadoes_logo} />
+                <p className="text-center">{t('fromPalisadoes')}</p>
+              </a>
+            </div>
+
+            <div className={styles.socialIcons}>
+              <a
+                href="https://www.facebook.com/palisadoesproject"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={FacebookLogo} />
+              </a>
+              <a
+                href="https://twitter.com/palisadoesorg?lang=en"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={TwitterLogo} className={styles.socialIcon} />
+              </a>
+              <a
+                href="https://www.linkedin.com/company/palisadoes/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={LinkedInLogo} />
+              </a>
+              <a
+                href="https://github.com/PalisadoesFoundation"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={GithubLogo} />
+              </a>
+              <a
+                href="https://www.youtube.com/@PalisadoesOrganization"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={YoutubeLogo} />
+              </a>
+              <a
+                href="https://www.palisadoes.org/slack"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={SlackLogo} />
+              </a>
+              <a
+                href="https://www.instagram.com/palisadoes/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={InstagramLogo} />
+              </a>
             </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 />
+
               {/* LOGIN FORM */}
               <div
                 className={`${
                   showTab === 'LOGIN' ? styles.active_tab : 'd-none'
                 }`}
               >
-                <form onSubmit={loginLink}>
-                  <h1 className="fs-2 fw-bold text-dark mb-3">
-                    {t('login_to_admin_portal')}
-                  </h1>
-                  <Form.Label>{t('email')}</Form.Label>
+                <form onSubmit={loginLink} className="gap-0">
+                  <h1 className="fs-2 fw-bold text-dark mb-3">{t('login')}</h1>
+                  <Form.Label className="mb-1">{t('email')}</Form.Label>
                   <div className="position-relative">
                     <Form.Control
                       type="email"
+                      className="lh-1"
                       placeholder={t('enterEmail')}
                       required
                       value={formState.email}
@@ -267,11 +413,11 @@ function loginPage(): JSX.Element {
                       <EmailOutlinedIcon />
                     </Button>
                   </div>
-                  <Form.Label className="mt-3">{t('password')}</Form.Label>
+                  <Form.Label className="mt-2 mb-1">{t('password')}</Form.Label>
                   <div className="position-relative">
                     <Form.Control
                       type={showPassword ? 'text' : 'password'}
-                      className="input_box_second"
+                      className="input_box_second lh-1"
                       placeholder={t('enterPassword')}
                       required
                       value={formState.password}
@@ -296,7 +442,7 @@ function loginPage(): JSX.Element {
                       )}
                     </Button>
                   </div>
-                  <div className="text-end mt-3">
+                  <div className="text-end mt-2 mb-3">
                     <Link
                       to="/forgotPassword"
                       className="text-secondary"
@@ -309,7 +455,7 @@ function loginPage(): JSX.Element {
                     <div className="googleRecaptcha">
                       <ReCAPTCHA
                         ref={recaptchaRef}
-                        className="mt-3"
+                        className="mt-2"
                         sitekey={
                           /* istanbul ignore next */
                           RECAPTCHA_SITE_KEY ? RECAPTCHA_SITE_KEY : 'XXX'
@@ -322,20 +468,20 @@ function loginPage(): JSX.Element {
                   )}
                   <Button
                     type="submit"
-                    className="mt-3 mb-3 w-100"
+                    className="mb-0 w-100 lh-1"
                     value="Login"
                     data-testid="loginBtn"
                   >
                     {t('login')}
                   </Button>
-                  <div className="position-relative">
+                  <div className="position-relative my-2">
                     <hr />
                     <span className={styles.orText}>{t('OR')}</span>
                   </div>
                   <Button
                     variant="outline-secondary"
                     value="Register"
-                    className="mt-3 mb-3 w-100"
+                    className="w-100 lh-1"
                     data-testid="goToRegisterPortion"
                     onClick={(): void => {
                       setShowTab('REGISTER');
@@ -352,18 +498,20 @@ function loginPage(): JSX.Element {
                   showTab === 'REGISTER' ? styles.active_tab : 'd-none'
                 }`}
               >
-                <Form onSubmit={signupLink}>
+                <Form onSubmit={signupLink} className="gap-0">
                   <h1 className="fs-2 fw-bold text-dark mb-3">
                     {t('register')}
                   </h1>
                   <Row>
                     <Col sm={6}>
                       <div>
-                        <Form.Label>{t('firstName')}</Form.Label>
+                        <Form.Label className="mb-1">
+                          {t('firstName')}
+                        </Form.Label>
                         <Form.Control
                           type="text"
                           id="signfirstname"
-                          className="mb-3"
+                          className="lh-1"
                           placeholder={t('firstName')}
                           required
                           value={signformState.signfirstName}
@@ -378,11 +526,13 @@ function loginPage(): JSX.Element {
                     </Col>
                     <Col sm={6}>
                       <div>
-                        <Form.Label>{t('lastName')}</Form.Label>
+                        <Form.Label className="mb-1">
+                          {t('lastName')}
+                        </Form.Label>
                         <Form.Control
                           type="text"
                           id="signlastname"
-                          className="mb-3"
+                          className="lh-1"
                           placeholder={t('lastName')}
                           required
                           value={signformState.signlastName}
@@ -396,36 +546,39 @@ function loginPage(): JSX.Element {
                       </div>
                     </Col>
                   </Row>
-                  <Form.Label>{t('email')}</Form.Label>
-                  <div className="position-relative">
-                    <Form.Control
-                      type="email"
-                      data-testid="signInEmail"
-                      className="mb-3"
-                      placeholder={t('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 className="position-relative mt-2">
+                    <Form.Label className="mb-1">{t('email')}</Form.Label>
+                    <div className="position-relative">
+                      <Form.Control
+                        type="email"
+                        data-testid="signInEmail"
+                        className="lh-1"
+                        placeholder={t('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>{t('password')}</Form.Label>
+                  <div className="position-relative my-2">
+                    <Form.Label className="mb-1">{t('password')}</Form.Label>
                     <div className="position-relative">
                       <Form.Control
                         type={showPassword ? 'text' : 'password'}
+                        className="lh-1"
                         data-testid="passwordField"
                         placeholder={t('password')}
                         autoComplete="new-password"
@@ -438,6 +591,10 @@ function loginPage(): JSX.Element {
                             ...signformState,
                             signPassword: e.target.value,
                           });
+                          handleLowercasePassCheck(e.target.value);
+                          handleUppercasePassCheck(e.target.value);
+                          handleNumericalValuePassCheck(e.target.value);
+                          handleSpecialCharPassCheck(e.target.value);
                         }}
                       />
                       <Button
@@ -452,31 +609,134 @@ function loginPage(): JSX.Element {
                         )}
                       </Button>
                     </div>
-                    {isInputFocused &&
-                      signformState.signPassword.length < 8 && (
-                        <div
-                          className="form-text text-danger"
-                          data-testid="passwordCheck"
+                    <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}`}
                         >
-                          {t('atleast_8_char_long')}
-                        </div>
+                          {showAlert.lowercaseChar ? (
+                            <span>
+                              <Clear />
+                            </span>
+                          ) : (
+                            <span>
+                              <Check />
+                            </span>
+                          )}
+                          {t('lowercase_check')}
+                        </p>
                       )}
-                    {!isInputFocused &&
-                      signformState.signPassword.length > 0 &&
-                      signformState.signPassword.length < 8 && (
-                        <div
-                          className="form-text text-danger"
-                          data-testid="passwordCheck"
+                      {isInputFocused && (
+                        <p
+                          className={`form-text ${
+                            showAlert.uppercaseChar
+                              ? 'text-danger'
+                              : 'text-success'
+                          } ${styles.password_check_element}`}
                         >
-                          {t('atleast_8_char_long')}
-                        </div>
+                          {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">
+                  <div className="position-relative  my-2">
                     <Form.Label>{t('confirmPassword')}</Form.Label>
                     <div className="position-relative">
                       <Form.Control
                         type={showConfirmPassword ? 'text' : 'password'}
+                        className="lh-1"
                         placeholder={t('confirmPassword')}
                         required
                         value={signformState.cPassword}
@@ -528,7 +788,7 @@ function loginPage(): JSX.Element {
                   )}
                   <Button
                     type="submit"
-                    className="mt-4 w-100 mb-3"
+                    className="mt-4 w-100 mb-2"
                     value="Register"
                     data-testid="registrationBtn"
                   >
@@ -541,7 +801,7 @@ function loginPage(): JSX.Element {
                   <Button
                     variant="outline-secondary"
                     value="Register"
-                    className="mt-3 mb-5 w-100"
+                    className="mt-2 mb-1 w-100 lh-1"
                     data-testid="goToLoginPortion"
                     onClick={(): void => {
                       setShowTab('LOGIN');
diff --git a/src/screens/MemberDetail/MemberDetail.test.tsx b/src/screens/MemberDetail/MemberDetail.test.tsx
index abd1a288b5..2647adf0fb 100644
--- a/src/screens/MemberDetail/MemberDetail.test.tsx
+++ b/src/screens/MemberDetail/MemberDetail.test.tsx
@@ -167,7 +167,7 @@ describe('MemberDetail', () => {
     expect(screen.getAllByText(/Admin for events/i)).toBeTruthy();
 
     expect(screen.getAllByText(/Created On/i)).toHaveLength(2);
-    expect(screen.getAllByText(/User Details/i)).toHaveLength(3);
+    expect(screen.getAllByText(/User Details/i)).toHaveLength(2);
     expect(screen.getAllByText(/Role/i)).toHaveLength(2);
     expect(screen.getAllByText(/Created/i)).toHaveLength(4);
     expect(screen.getAllByText(/Joined/i)).toHaveLength(2);
diff --git a/src/screens/MemberDetail/MemberDetail.tsx b/src/screens/MemberDetail/MemberDetail.tsx
index d190b47246..0bad4fadc7 100644
--- a/src/screens/MemberDetail/MemberDetail.tsx
+++ b/src/screens/MemberDetail/MemberDetail.tsx
@@ -83,27 +83,16 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
     <>
       <OrganizationScreen screenName="User" title={t('title')}>
         <Row>
-          <Col sm={3}>
-            <div className={styles.sidebar}>
-              <div className={styles.sidebarsticky}>
-                <br />
-                <Button
-                  className={styles.activeBtn}
-                  data-testid="dashboardTitleBtn"
-                >
-                  <div className={styles.bgFill}>
-                    <i className="fa fa-user" />
-                  </div>
-                  {t('title')}
-                </Button>
-              </div>
-            </div>
-          </Col>
           <Col sm={8}>
             {state == 1 ? (
               <div className={styles.mainpageright}>
                 <Row className={styles.flexclm}>
-                  <p className={styles.logintitle}>{t('title')}</p>
+                  <p
+                    className={styles.logintitle}
+                    data-testid="dashboardTitleBtn"
+                  >
+                    {t('title')}
+                  </p>
                   <div className={styles.btngroup}>
                     <Button
                       className={styles.memberfontcreatedbtn}
diff --git a/src/screens/OrgList/OrgList.test.tsx b/src/screens/OrgList/OrgList.test.tsx
index ca2e89ad98..3cf16869f8 100644
--- a/src/screens/OrgList/OrgList.test.tsx
+++ b/src/screens/OrgList/OrgList.test.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
 import { MockedProvider } from '@apollo/react-testing';
-import { act, render, screen } from '@testing-library/react';
+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';
@@ -11,7 +18,14 @@ 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 } from './OrgListMocks';
+
+import {
+  MOCKS,
+  MOCKS_ADMIN,
+  MOCKS_EMPTY,
+  MOCKS_WITH_ERROR,
+} from './OrgListMocks';
+import { ToastContainer, toast } from 'react-toastify';
 
 async function wait(ms = 100): Promise<void> {
   await act(() => {
@@ -23,6 +37,7 @@ async function wait(ms = 100): Promise<void> {
 
 afterEach(() => {
   localStorage.clear();
+  cleanup();
 });
 
 describe('Organisations Page testing as SuperAdmin', () => {
@@ -30,6 +45,7 @@ describe('Organisations Page testing as SuperAdmin', () => {
 
   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',
@@ -38,7 +54,7 @@ describe('Organisations Page testing as SuperAdmin', () => {
     image: new File(['hello'], 'hello.png', { type: 'image/png' }),
   };
 
-  test('Testing search functionality', async () => {
+  test('Testing search functionality by pressing enter', async () => {
     localStorage.setItem('id', '123');
     render(
       <MockedProvider addTypename={false} link={link}>
@@ -56,7 +72,28 @@ describe('Organisations Page testing as SuperAdmin', () => {
     // 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 () => {
+    localStorage.setItem('id', '123');
+    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 () => {
@@ -122,44 +159,99 @@ describe('Organisations Page testing as SuperAdmin', () => {
   test('Create organization model should work properly', async () => {
     localStorage.setItem('id', '123');
     localStorage.setItem('UserType', 'SUPERADMIN');
-    await act(async () => {
-      render(
-        <MockedProvider addTypename={false} link={link}>
-          <BrowserRouter>
-            <Provider store={store}>
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
               <OrgList />
-            </Provider>
-          </BrowserRouter>
-        </MockedProvider>
-      );
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
 
-      await wait(500);
+    await wait(500);
 
-      expect(localStorage.setItem).toHaveBeenLastCalledWith(
-        'UserType',
-        'SUPERADMIN'
-      );
+    expect(localStorage.setItem).toHaveBeenLastCalledWith(
+      'UserType',
+      'SUPERADMIN'
+    );
 
-      userEvent.click(screen.getByTestId(/createOrganizationBtn/i));
+    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(/Location/i),
-        formData.location
-      );
-      userEvent.click(screen.getByTestId(/isPublic/i));
-      userEvent.click(screen.getByTestId(/visibleInSearch/i));
-      userEvent.upload(screen.getByLabelText(/Display Image/i), formData.image);
+    userEvent.type(screen.getByTestId(/modalOrganizationName/i), formData.name);
+    userEvent.type(
+      screen.getByPlaceholderText(/Description/i),
+      formData.description
+    );
+    userEvent.type(screen.getByPlaceholderText(/Location/i), formData.location);
+    userEvent.click(screen.getByTestId(/isPublic/i));
+    userEvent.click(screen.getByTestId(/visibleInSearch/i));
+    userEvent.upload(screen.getByLabelText(/Display Image/i), formData.image);
+
+    expect(screen.getByTestId(/modalOrganizationName/i)).toHaveValue(
+      formData.name
+    );
+    expect(screen.getByPlaceholderText(/Description/i)).toHaveValue(
+      formData.description
+    );
+    expect(screen.getByPlaceholderText(/Location/i)).toHaveValue(
+      formData.location
+    );
+    expect(screen.getByTestId(/isPublic/i)).not.toBeChecked();
+    expect(screen.getByTestId(/visibleInSearch/i)).toBeChecked();
+    expect(screen.getByLabelText(/Display Image/i)).toBeTruthy();
 
-      await wait(500);
+    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()
+    );
+    userEvent.click(screen.getByTestId(/closeOrganizationModal/i));
+  });
+
+  test('Plugin Notification model should work properly', async () => {
+    localStorage.setItem('id', '123');
+    localStorage.setItem('UserType', 'SUPERADMIN');
+
+    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(
+      'UserType',
+      'SUPERADMIN'
+    );
+
+    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(/Location/i), formData.location);
+    userEvent.click(screen.getByTestId(/isPublic/i));
+    userEvent.click(screen.getByTestId(/visibleInSearch/i));
+    userEvent.upload(screen.getByLabelText(/Display Image/i), formData.image);
 
     expect(screen.getByTestId(/modalOrganizationName/i)).toHaveValue(
       formData.name
@@ -175,7 +267,65 @@ describe('Organisations Page testing as SuperAdmin', () => {
     expect(screen.getByLabelText(/Display Image/i)).toBeTruthy();
 
     userEvent.click(screen.getByTestId(/submitOrganizationForm/i));
-  }, 10000);
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+    });
+    await waitFor(() =>
+      expect(
+        screen.queryByText(/Congratulation the Organization is created/i)
+      ).toBeInTheDocument()
+    );
+    userEvent.click(screen.getByTestId(/enableEverythingForm/i));
+  });
+
+  test('Testing create sample organization working properly', async () => {
+    localStorage.setItem('id', '123');
+    localStorage.setItem('UserType', 'SUPERADMIN');
+
+    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 () => {
+    localStorage.setItem('id', '123');
+    localStorage.setItem('UserType', 'SUPERADMIN');
+    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', () => {
@@ -199,4 +349,38 @@ describe('Organisations Page testing as Admin', () => {
     await wait();
     expect(screen.queryByText(/Create Organization/i)).toBeNull();
   });
+
+  test('Testing sort latest and oldest toggle', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <OrgList />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>
+      );
+
+      await wait();
+
+      const searchInput = screen.getByTestId('sort');
+      expect(searchInput).toBeInTheDocument();
+
+      const inputText = screen.getByTestId('sortOrgs');
+
+      fireEvent.click(inputText);
+      const toggleText = screen.getByTestId('latest');
+
+      fireEvent.click(toggleText);
+
+      expect(searchInput).toBeInTheDocument();
+      fireEvent.click(inputText);
+      const toggleTite = screen.getByTestId('oldest');
+      fireEvent.click(toggleTite);
+      expect(searchInput).toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/screens/OrgList/OrgList.tsx b/src/screens/OrgList/OrgList.tsx
index ffc2f2387e..abfcae17c3 100644
--- a/src/screens/OrgList/OrgList.tsx
+++ b/src/screens/OrgList/OrgList.tsx
@@ -1,13 +1,11 @@
 import { useMutation, useQuery } from '@apollo/client';
 import { Search } from '@mui/icons-material';
-import FilterListIcon from '@mui/icons-material/FilterList';
 import SortIcon from '@mui/icons-material/Sort';
 import { CREATE_ORGANIZATION_MUTATION } from 'GraphQl/Mutations/mutations';
 import {
   ORGANIZATION_CONNECTION_LIST,
   USER_ORGANIZATION_LIST,
 } from 'GraphQl/Queries/Queries';
-
 import { CREATE_SAMPLE_ORGANIZATION_MUTATION } from 'GraphQl/Mutations/mutations';
 
 import OrgListCard from 'components/OrgListCard/OrgListCard';
@@ -51,6 +49,10 @@ function orgList(): JSX.Element {
 
   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('');
@@ -100,6 +102,8 @@ function orgList(): JSX.Element {
       first: perPageResult,
       skip: 0,
       filter: searchByName,
+      orderBy:
+        sortingState.option === 'Latest' ? 'createdAt_DESC' : 'createdAt_ASC',
     },
     notifyOnNetworkStatusChange: true,
   });
@@ -212,25 +216,38 @@ function orgList(): JSX.Element {
       filter: '',
       first: perPageResult,
       skip: 0,
+      orderBy:
+        sortingState.option === 'Latest' ? 'createdAt_DESC' : 'createdAt_ASC',
     });
     sethasMore(true);
   };
 
   /* istanbul ignore next */
-  const handleSearchByName = (e: any): void => {
+  const handleSearch = (value: string): void => {
+    setSearchByName(value);
+    if (value === '') {
+      resetAllParams();
+      return;
+    }
+    refetchOrgs({
+      filter: value,
+    });
+  };
+
+  const handleSearchByEnter = (e: any): void => {
     if (e.key === 'Enter') {
       const { value } = e.target;
-      setSearchByName(value);
-      if (value == '') {
-        resetAllParams();
-        return;
-      }
-      refetchOrgs({
-        filter: value,
-      });
+      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');
@@ -268,6 +285,22 @@ function orgList(): JSX.Element {
     });
   };
 
+  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 (
     <>
       <SuperAdminScreen
@@ -279,43 +312,52 @@ function orgList(): JSX.Element {
           <div className={styles.input}>
             <Form.Control
               type="name"
-              id="orgname"
+              id="searchOrgname"
               className="bg-white"
               placeholder={t('searchByName')}
               data-testid="searchByName"
               autoComplete="off"
               required
-              onKeyUp={handleSearchByName}
+              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">
-                <Dropdown.Toggle variant="outline-success">
+              <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'} />
-                  {t('sort')}
-                </Dropdown.Toggle>
-                <Dropdown.Menu>
-                  <Dropdown.Item href="#/action-1">Action 1</Dropdown.Item>
-                  <Dropdown.Item href="#/action-2">Action 2</Dropdown.Item>
-                  <Dropdown.Item href="#/action-3">Action 3</Dropdown.Item>
-                </Dropdown.Menu>
-              </Dropdown>
-              <Dropdown aria-expanded="false" title="Filter organizations">
-                <Dropdown.Toggle variant="outline-success">
-                  <FilterListIcon className={'me-1'} />
-                  {t('filter')}
+                  {sortingState.selectedOption}
                 </Dropdown.Toggle>
                 <Dropdown.Menu>
-                  <Dropdown.Item href="#/action-1">Action 1</Dropdown.Item>
-                  <Dropdown.Item href="#/action-2">Action 2</Dropdown.Item>
-                  <Dropdown.Item href="#/action-3">Action 3</Dropdown.Item>
+                  <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>
@@ -465,10 +507,13 @@ function orgList(): JSX.Element {
                 required
                 value={formState.name}
                 onChange={(e): void => {
-                  setFormState({
-                    ...formState,
-                    name: e.target.value,
-                  });
+                  const inputText = e.target.value;
+                  if (inputText.length < 50) {
+                    setFormState({
+                      ...formState,
+                      name: e.target.value,
+                    });
+                  }
                 }}
               />
               <Form.Label htmlFor="descrip">{t('description')}</Form.Label>
@@ -481,10 +526,13 @@ function orgList(): JSX.Element {
                 required
                 value={formState.descrip}
                 onChange={(e): void => {
-                  setFormState({
-                    ...formState,
-                    descrip: e.target.value,
-                  });
+                  const descriptionText = e.target.value;
+                  if (descriptionText.length < 200) {
+                    setFormState({
+                      ...formState,
+                      descrip: e.target.value,
+                    });
+                  }
                 }}
               />
               <Form.Label htmlFor="location">{t('location')}</Form.Label>
@@ -497,10 +545,13 @@ function orgList(): JSX.Element {
                 required
                 value={formState.location}
                 onChange={(e): void => {
-                  setFormState({
-                    ...formState,
-                    location: e.target.value,
-                  });
+                  const locationText = e.target.value;
+                  if (locationText.length < 100) {
+                    setFormState({
+                      ...formState,
+                      location: e.target.value,
+                    });
+                  }
                 }}
               />
 
@@ -611,8 +662,8 @@ function orgList(): JSX.Element {
                   </a>
                   <Button
                     variant="secondary"
-                    onClick={(): void => toggleModal()}
-                    data-testid="closeOrganizationModal"
+                    onClick={toggleModal}
+                    data-testid="cancelOrganizationModal"
                   >
                     {t('cancel')}
                   </Button>
@@ -624,7 +675,7 @@ function orgList(): JSX.Element {
                 <div className={styles.pluginStoreBtnContainer}>
                   <Link
                     className={styles.secondbtn}
-                    data-testid="submitOrganizationForm"
+                    data-testid="goToStore"
                     to={`orgstore/id=${dialogRedirectOrgId}`}
                   >
                     {t('goToStore')}
@@ -635,7 +686,7 @@ function orgList(): JSX.Element {
                     className={styles.greenregbtn}
                     onClick={closeDialogModal}
                     value="invite"
-                    data-testid="submitOrganizationForm"
+                    data-testid="enableEverythingForm"
                   >
                     {t('enableEverything')}
                   </button>
diff --git a/src/screens/OrgList/OrgListMocks.ts b/src/screens/OrgList/OrgListMocks.ts
index 1a1ab30ab7..833535f4aa 100644
--- a/src/screens/OrgList/OrgListMocks.ts
+++ b/src/screens/OrgList/OrgListMocks.ts
@@ -1,3 +1,7 @@
+import {
+  CREATE_ORGANIZATION_MUTATION,
+  CREATE_SAMPLE_ORGANIZATION_MUTATION,
+} from 'GraphQl/Mutations/mutations';
 import {
   ORGANIZATION_CONNECTION_LIST,
   USER_ORGANIZATION_LIST,
@@ -84,6 +88,7 @@ const MOCKS = [
         first: 8,
         skip: 0,
         filter: '',
+        orderBy: 'createdAt_ASC',
       },
       notifyOnNetworkStatusChange: true,
     },
@@ -102,6 +107,39 @@ const MOCKS = [
       data: 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',
+        location: 'Delhi, India',
+        name: 'Dummy Organization',
+        visibleInSearch: true,
+        isPublic: false,
+        image: '',
+      },
+    },
+    result: {
+      data: {
+        createOrganization: {
+          _id: '1',
+        },
+      },
+    },
+  },
 ];
 const MOCKS_EMPTY = [
   {
@@ -111,6 +149,7 @@ const MOCKS_EMPTY = [
         first: 8,
         skip: 0,
         filter: '',
+        orderBy: 'createdAt_ASC',
       },
       notifyOnNetworkStatusChange: true,
     },
@@ -130,6 +169,40 @@ const MOCKS_EMPTY = [
     },
   },
 ];
+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: { id: '123' },
+    },
+    result: {
+      data: superAdminUser,
+    },
+  },
+  {
+    request: {
+      query: CREATE_SAMPLE_ORGANIZATION_MUTATION,
+    },
+    error: new Error('Failed to create sample organization'),
+  },
+];
 
 // MOCKS FOR ADMIN
 const MOCKS_ADMIN = [
@@ -140,6 +213,7 @@ const MOCKS_ADMIN = [
         first: 8,
         skip: 0,
         filter: '',
+        orderBy: 'createdAt_ASC',
       },
       notifyOnNetworkStatusChange: true,
     },
@@ -160,4 +234,4 @@ const MOCKS_ADMIN = [
   },
 ];
 
-export { MOCKS, MOCKS_ADMIN, MOCKS_EMPTY };
+export { MOCKS, MOCKS_ADMIN, MOCKS_EMPTY, MOCKS_WITH_ERROR };
diff --git a/src/screens/OrgPost/OrgPost.test.tsx b/src/screens/OrgPost/OrgPost.test.tsx
index 5c8672e122..fecaa77169 100644
--- a/src/screens/OrgPost/OrgPost.test.tsx
+++ b/src/screens/OrgPost/OrgPost.test.tsx
@@ -245,7 +245,9 @@ describe('Organisation Post Page', () => {
       });
     }
     await debounceWait();
+    const searchBtn = screen.getByTestId('searchBtn');
     userEvent.type(screen.getByPlaceholderText(/Search By/i), 'postone{enter}');
+    userEvent.click(searchBtn);
     await debounceWait();
     const sortDropdown = screen.getByTestId('sort');
     userEvent.click(sortDropdown);
diff --git a/src/screens/OrgPost/OrgPost.tsx b/src/screens/OrgPost/OrgPost.tsx
index 3408f3f96c..f4dc98eee8 100644
--- a/src/screens/OrgPost/OrgPost.tsx
+++ b/src/screens/OrgPost/OrgPost.tsx
@@ -138,19 +138,28 @@ function orgPost(): JSX.Element {
   if (orgPostListError) {
     window.location.assign('/orglist');
   }
+  const handleSearch = (value: string): void => {
+    const filterData = {
+      id: currentUrl,
+      title_contains: showTitle ? value : undefined,
+      text_contains: !showTitle ? value : undefined,
+    };
+    refetch(filterData);
+  };
 
-  const handleSearch = (e: any): void => {
+  const handleSearchByEnter = (e: any): void => {
     if (e.key === 'Enter') {
       const { value } = e.target;
-      const filterData = {
-        id: currentUrl,
-        title_contains: showTitle ? value : null,
-        text_contains: !showTitle ? value : null,
-      };
-      refetch(filterData);
+      handleSearch(value);
     }
   };
 
+  const handleSearchByBtnClick = (): void => {
+    const inputValue =
+      (document.getElementById('searchPosts') as HTMLInputElement)?.value || '';
+    handleSearch(inputValue);
+  };
+
   const handleSorting = (option: string): void => {
     setSortingOption(option);
   };
@@ -196,17 +205,19 @@ function orgPost(): JSX.Element {
               <div className={styles.input}>
                 <Form.Control
                   type="text"
-                  id="posttitle"
+                  id="searchPosts"
                   className="bg-white"
                   placeholder={showTitle ? t('searchTitle') : t('searchText')}
                   data-testid="searchByName"
                   autoComplete="off"
-                  onKeyUp={handleSearch}
+                  onKeyUp={handleSearchByEnter}
                   required
                 />
                 <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>
@@ -253,12 +264,9 @@ function orgPost(): JSX.Element {
                     title="Sort Post"
                     data-testid="sort"
                   >
-                    <Dropdown.Toggle
-                      variant="outline-success"
-                      data-testid="sortpost"
-                    >
+                    <Dropdown.Toggle variant="success" data-testid="sortpost">
                       <SortIcon className={'me-1'} />
-                      {t('sortPost')}
+                      {sortingOption === 'latest' ? t('Latest') : t('Oldest')}
                     </Dropdown.Toggle>
                     <Dropdown.Menu>
                       <Dropdown.Item
diff --git a/src/screens/Requests/Requests.test.tsx b/src/screens/Requests/Requests.test.tsx
index 8ede1a4cdf..415a0b1ad9 100644
--- a/src/screens/Requests/Requests.test.tsx
+++ b/src/screens/Requests/Requests.test.tsx
@@ -113,8 +113,20 @@ describe('Testing Request screen', () => {
     await wait();
 
     const searchInput = screen.getByTestId('searchByName');
+    const searchBtn = screen.getByTestId('searchBtn');
+    userEvent.type(searchInput, '');
+    userEvent.click(searchBtn);
+    await wait();
+    userEvent.clear(searchInput);
+
     userEvent.type(searchInput, 'l{enter}');
+    await wait();
+    await screen.findByTestId('searchAndNotFound');
 
+    userEvent.clear(searchInput);
+    userEvent.type(searchInput, 'l');
+    userEvent.click(searchBtn);
+    await wait();
     await screen.findByTestId('searchAndNotFound');
   });
 
diff --git a/src/screens/Requests/Requests.tsx b/src/screens/Requests/Requests.tsx
index c991d5d05e..d5c52ef2a4 100644
--- a/src/screens/Requests/Requests.tsx
+++ b/src/screens/Requests/Requests.tsx
@@ -238,23 +238,34 @@ const Requests = (): JSX.Element => {
     }
   };
 
-  /* istanbul ignore next */
-  const handleSearchByName = async (e: any): Promise<void> => {
+  const handleSearch = async (value: string): Promise<void> => {
+    setSearchByName(value);
+    if (value === '') {
+      resetAndRefetch();
+      return;
+    }
+    await refetchUsers({
+      firstName_contains: value,
+      lastName_contains: '',
+      // Later on we can add several search and filter options
+    });
+  };
+
+  const handleSearchByEnter = (e: any): void => {
     if (e.key === 'Enter') {
       const { value } = e.target;
-      setSearchByName(value);
-      if (value === '') {
-        resetAndRefetch();
-        return;
-      }
-      await refetchUsers({
-        firstName_contains: value,
-        lastName_contains: '',
-        // Later on we can add several search and filter options
-      });
+      handleSearch(value);
     }
   };
 
+  const handleSearchByBtnClick = (): void => {
+    const inputElement = document.getElementById(
+      'searchRequests'
+    ) as HTMLInputElement;
+    const inputValue = inputElement?.value || '';
+    handleSearch(inputValue);
+  };
+
   const headerTitles: string[] = [
     '#',
     t('name'),
@@ -307,16 +318,19 @@ const Requests = (): JSX.Element => {
             >
               <Form.Control
                 type="name"
+                id="searchRequests"
                 className="bg-white"
                 placeholder={t('enterName')}
                 data-testid="searchByName"
                 autoComplete="off"
                 required
-                onKeyUp={handleSearchByName}
+                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>
diff --git a/src/screens/UserPortal/Chat/Chat.test.tsx b/src/screens/UserPortal/Chat/Chat.test.tsx
index 6476e9ee40..a2f709d8a4 100644
--- a/src/screens/UserPortal/Chat/Chat.test.tsx
+++ b/src/screens/UserPortal/Chat/Chat.test.tsx
@@ -148,7 +148,7 @@ describe('Testing People Screen [User Portal]', () => {
     expect(screen.queryAllByText('Noble Mittal')).not.toBe([]);
   });
 
-  test('Search functionality works as expected', async () => {
+  test('Search functionality works as expected by pressing enter key', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -163,7 +163,31 @@ describe('Testing People Screen [User Portal]', () => {
 
     await wait();
 
+    userEvent.type(screen.getByTestId('searchInput'), 'j{enter}');
+    await wait();
+
+    expect(getOrganizationIdSpy).toHaveBeenCalled();
+    expect(screen.queryByText('John Cena')).toBeInTheDocument();
+    expect(screen.queryByText('Noble Mittal')).not.toBeInTheDocument();
+  });
+
+  test('Search functionality works as expected by clicking search Btn', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Chat />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+    const searchBtn = screen.getByTestId('searchBtn');
     userEvent.type(screen.getByTestId('searchInput'), 'j');
+    userEvent.click(searchBtn);
     await wait();
 
     expect(getOrganizationIdSpy).toHaveBeenCalled();
diff --git a/src/screens/UserPortal/Chat/Chat.tsx b/src/screens/UserPortal/Chat/Chat.tsx
index 1ae9d5764d..aef6b24026 100644
--- a/src/screens/UserPortal/Chat/Chat.tsx
+++ b/src/screens/UserPortal/Chat/Chat.tsx
@@ -57,17 +57,23 @@ export default function chat(): JSX.Element {
     },
   });
 
-  const handleSearch = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ): void => {
-    const newFilter = event.target.value;
-    setFilterName(newFilter);
+  const handleSearch = (value: string): void => {
+    setFilterName(value);
 
-    const filter = {
-      firstName_contains: newFilter,
-    };
-
-    contactRefetch(filter);
+    contactRefetch({
+      firstName_contains: value,
+    });
+  };
+  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);
   };
 
   React.useEffect(() => {
@@ -92,14 +98,17 @@ export default function chat(): JSX.Element {
               <InputGroup className={styles.maxWidth}>
                 <Form.Control
                   placeholder={t('search')}
+                  id="searchChats"
                   type="text"
                   className={`${styles.borderNone} ${styles.backgroundWhite}`}
-                  value={filterName}
-                  onChange={handleSearch}
+                  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>
diff --git a/src/screens/UserPortal/Events/Events.test.tsx b/src/screens/UserPortal/Events/Events.test.tsx
index 4243efa8ee..52e658a641 100644
--- a/src/screens/UserPortal/Events/Events.test.tsx
+++ b/src/screens/UserPortal/Events/Events.test.tsx
@@ -288,7 +288,7 @@ describe('Testing Events Screen [User Portal]', () => {
     expect(screen.queryByText(mockEventTitle)).toBeInTheDocument();
   });
 
-  test('Search works as expected when user types in search input', async () => {
+  test('Search works as expected when user types in search input and press enter key', async () => {
     const getOrganizationIdSpy = jest
       .spyOn(getOrganizationId, 'default')
       .mockImplementation(() => {
@@ -311,7 +311,7 @@ describe('Testing Events Screen [User Portal]', () => {
 
     expect(getOrganizationIdSpy).toHaveBeenCalled();
 
-    const randomSearchInput = 'test';
+    const randomSearchInput = 'test{enter}';
     userEvent.type(screen.getByTestId('searchInput'), randomSearchInput);
 
     await wait();
@@ -332,6 +332,55 @@ describe('Testing Events Screen [User Portal]', () => {
     expect(screen.queryByText(mockEventTitleAbsent)).not.toBeInTheDocument();
   });
 
+  test('Search works as expected when user types in search input and clicks search Btn', async () => {
+    const getOrganizationIdSpy = jest
+      .spyOn(getOrganizationId, 'default')
+      .mockImplementation(() => {
+        return '';
+      });
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Events />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    expect(getOrganizationIdSpy).toHaveBeenCalled();
+    const searchInput = screen.getByTestId('searchInput');
+    const searchBtn = screen.getByTestId('searchBtn');
+    userEvent.type(searchInput, '');
+    userEvent.click(searchBtn);
+    await wait();
+    userEvent.clear(searchInput);
+    userEvent.type(searchInput, 'test');
+    userEvent.click(searchBtn);
+
+    await wait();
+
+    let mockEventTitle = '';
+    if (MOCKS[0].result?.data.eventsByOrganizationConnection) {
+      mockEventTitle =
+        MOCKS[0].result?.data.eventsByOrganizationConnection[0].title;
+    }
+
+    let mockEventTitleAbsent = '';
+    if (MOCKS[0].result?.data.eventsByOrganizationConnection) {
+      mockEventTitleAbsent =
+        MOCKS[0].result?.data.eventsByOrganizationConnection[1].title;
+    }
+
+    expect(screen.queryByText(mockEventTitle)).toBeInTheDocument();
+    expect(screen.queryByText(mockEventTitleAbsent)).not.toBeInTheDocument();
+  });
+
   test('Create event works as expected when event is not an all day event.', async () => {
     const getOrganizationIdSpy = jest
       .spyOn(getOrganizationId, 'default')
@@ -469,5 +518,6 @@ describe('Testing Events Screen [User Portal]', () => {
     const calenderView = 'Calendar View';
 
     expect(screen.queryAllByText(calenderView)).not.toBeNull();
+    expect(screen.getByText('Sun')).toBeInTheDocument();
   });
 });
diff --git a/src/screens/UserPortal/Events/Events.tsx b/src/screens/UserPortal/Events/Events.tsx
index caf1d72fd2..13bf916b6c 100644
--- a/src/screens/UserPortal/Events/Events.tsx
+++ b/src/screens/UserPortal/Events/Events.tsx
@@ -5,7 +5,10 @@ import EventCard from 'components/UserPortal/EventCard/EventCard';
 import UserSidebar from 'components/UserPortal/UserSidebar/UserSidebar';
 import { Button, Dropdown, Form, InputGroup } from 'react-bootstrap';
 import PaginationList from 'components/PaginationList/PaginationList';
-import { ORGANIZATION_EVENTS_CONNECTION } from 'GraphQl/Queries/Queries';
+import {
+  ORGANIZATION_EVENTS_CONNECTION,
+  ORGANIZATIONS_LIST,
+} from 'GraphQl/Queries/Queries';
 import { useMutation, useQuery } from '@apollo/client';
 import { SearchOutlined } from '@mui/icons-material';
 import styles from './Events.module.css';
@@ -18,6 +21,7 @@ import { CREATE_EVENT_MUTATION } from 'GraphQl/Mutations/mutations';
 import dayjs from 'dayjs';
 import { toast } from 'react-toastify';
 import { errorHandler } from 'utils/errorHandler';
+import EventCalendar from 'components/EventCalendar/EventCalendar';
 
 interface InterfaceEventCardProps {
   id: string;
@@ -50,7 +54,6 @@ export default function events(): JSX.Element {
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(5);
   const [events, setEvents] = React.useState([]);
-  const [filterName, setFilterName] = React.useState('');
   const [mode, setMode] = React.useState(0);
   const [showCreateEventModal, setShowCreateEventModal] = React.useState(false);
   const [eventTitle, setEventTitle] = React.useState('');
@@ -76,8 +79,15 @@ export default function events(): JSX.Element {
     },
   });
 
+  const { data: orgData } = useQuery(ORGANIZATIONS_LIST, {
+    variables: { id: organizationId },
+  });
+
   const [create] = useMutation(CREATE_EVENT_MUTATION);
 
+  const userId = localStorage.getItem('id') as string;
+  const userRole = localStorage.getItem('UserType') as string;
+
   const createEvent = async (): Promise<void> => {
     try {
       const { data: createEventData } = await create({
@@ -109,6 +119,7 @@ export default function events(): JSX.Element {
         setStartTime('08:00:00');
         setEndTime('10:00:00');
       }
+      setShowCreateEventModal(false);
     } catch (error: any) {
       /* istanbul ignore next */
       errorHandler(t, error);
@@ -136,16 +147,23 @@ export default function events(): JSX.Element {
     setPage(0);
   };
 
-  const handleSearch = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ): void => {
-    const newFilter = event.target.value;
-    setFilterName(newFilter);
-    const filter = {
-      title_contains: newFilter,
-    };
+  const handleSearch = (value: string): void => {
+    refetch({
+      title_contains: value,
+    });
     setPage(0);
-    refetch(filter);
+  };
+  const handleSearchByEnter = (e: any): void => {
+    if (e.key === 'Enter') {
+      const { value } = e.target;
+      handleSearch(value);
+    }
+  };
+  const handleSearchByBtnClick = (): void => {
+    const value =
+      (document.getElementById('searchEvents') as HTMLInputElement)?.value ||
+      '';
+    handleSearch(value);
   };
 
   const handleEventTitleChange = (
@@ -198,15 +216,18 @@ export default function events(): JSX.Element {
           >
             <InputGroup className={styles.maxWidth}>
               <Form.Control
+                id="searchEvents"
                 placeholder={t('search')}
                 type="text"
                 className={`${styles.borderNone} ${styles.backgroundWhite}`}
-                value={filterName}
-                onChange={handleSearch}
+                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>
@@ -243,83 +264,95 @@ export default function events(): JSX.Element {
               </Dropdown>
             </div>
           </div>
-          <div
-            className={`d-flex flex-column justify-content-between ${styles.content}`}
-          >
+          {mode === 0 && (
             <div
-              className={`d-flex flex-column ${styles.gap} ${styles.paddingY}`}
+              className={`d-flex flex-column justify-content-between ${styles.content}`}
             >
-              {loading ? (
-                <div className={`d-flex flex-row justify-content-center`}>
-                  <HourglassBottomIcon /> <span>Loading...</span>
-                </div>
-              ) : (
-                <>
-                  {events && events.length > 0 ? (
-                    (rowsPerPage > 0
-                      ? events.slice(
-                          page * rowsPerPage,
-                          page * rowsPerPage + rowsPerPage
-                        )
-                      : /* istanbul ignore next */
-                        events
-                    ).map((event: any) => {
-                      const attendees: any = [];
-                      event.attendees.forEach((attendee: any) => {
-                        const r = {
-                          id: attendee._id,
+              <div
+                className={`d-flex flex-column ${styles.gap} ${styles.paddingY}`}
+              >
+                {loading ? (
+                  <div className={`d-flex flex-row justify-content-center`}>
+                    <HourglassBottomIcon /> <span>Loading...</span>
+                  </div>
+                ) : (
+                  <>
+                    {events && events.length > 0 ? (
+                      (rowsPerPage > 0
+                        ? events.slice(
+                            page * rowsPerPage,
+                            page * rowsPerPage + rowsPerPage
+                          )
+                        : /* istanbul ignore next */
+                          events
+                      ).map((event: any) => {
+                        const attendees: any = [];
+                        event.attendees.forEach((attendee: any) => {
+                          const r = {
+                            id: attendee._id,
+                          };
+
+                          attendees.push(r);
+                        });
+
+                        const creator: any = {};
+                        creator.firstName = event.creator.firstName;
+                        creator.lastName = event.creator.lastName;
+                        creator.id = event.creator._id;
+
+                        const cardProps: InterfaceEventCardProps = {
+                          id: event._id,
+                          title: event.title,
+                          description: event.description,
+                          location: event.location,
+                          startDate: event.startDate,
+                          endDate: event.endDate,
+                          isRegisterable: event.isRegisterable,
+                          isPublic: event.isPublic,
+                          endTime: event.endTime,
+                          startTime: event.startTime,
+                          recurring: event.recurring,
+                          allDay: event.allDay,
+                          registrants: attendees,
+                          creator,
                         };
 
-                        attendees.push(r);
-                      });
-
-                      const creator: any = {};
-                      creator.firstName = event.creator.firstName;
-                      creator.lastName = event.creator.lastName;
-                      creator.id = event.creator._id;
-
-                      const cardProps: InterfaceEventCardProps = {
-                        id: event._id,
-                        title: event.title,
-                        description: event.description,
-                        location: event.location,
-                        startDate: event.startDate,
-                        endDate: event.endDate,
-                        isRegisterable: event.isRegisterable,
-                        isPublic: event.isPublic,
-                        endTime: event.endTime,
-                        startTime: event.startTime,
-                        recurring: event.recurring,
-                        allDay: event.allDay,
-                        registrants: attendees,
-                        creator,
-                      };
-
-                      return <EventCard key={event._id} {...cardProps} />;
-                    })
-                  ) : (
-                    <span>{t('nothingToShow')}</span>
-                  )}
-                </>
-              )}
+                        return <EventCard key={event._id} {...cardProps} />;
+                      })
+                    ) : (
+                      <span>{t('nothingToShow')}</span>
+                    )}
+                  </>
+                )}
+              </div>
+              <table>
+                <tbody>
+                  <tr>
+                    <PaginationList
+                      count={
+                        /* istanbul ignore next */
+                        events ? events.length : 0
+                      }
+                      rowsPerPage={rowsPerPage}
+                      page={page}
+                      onPageChange={handleChangePage}
+                      onRowsPerPageChange={handleChangeRowsPerPage}
+                    />
+                  </tr>
+                </tbody>
+              </table>
             </div>
-            <table>
-              <tbody>
-                <tr>
-                  <PaginationList
-                    count={
-                      /* istanbul ignore next */
-                      events ? events.length : 0
-                    }
-                    rowsPerPage={rowsPerPage}
-                    page={page}
-                    onPageChange={handleChangePage}
-                    onRowsPerPageChange={handleChangeRowsPerPage}
-                  />
-                </tr>
-              </tbody>
-            </table>
-          </div>
+          )}
+          {mode === 1 && (
+            <div className="mt-4">
+              <EventCalendar
+                eventData={events}
+                orgData={orgData}
+                userRole={userRole}
+                userId={userId}
+              />
+            </div>
+          )}
         </div>
         <OrganizationSidebar />
         <Modal show={showCreateEventModal} onHide={toggleCreateEventModal}>
diff --git a/src/screens/UserPortal/Home/Home.module.css b/src/screens/UserPortal/Home/Home.module.css
index 48643b3445..5a092dc6f0 100644
--- a/src/screens/UserPortal/Home/Home.module.css
+++ b/src/screens/UserPortal/Home/Home.module.css
@@ -58,14 +58,119 @@
 }
 
 .postInput {
-  height: 200px !important;
   resize: none;
   border: none;
+  outline: none;
   box-shadow: none;
   background-color: white;
   margin-bottom: 10px;
 }
 
+.postInput:focus {
+  box-shadow: none;
+}
+
 .imageInput {
-  background-color: white;
+  display: none;
+}
+
+.postContainer {
+  margin: 1rem auto;
+  background-color: transparent;
+  padding: 1rem;
+  border-radius: 4px;
+  /* max-width: 40rem; */
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+}
+
+.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;
+}
+
+.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;
+}
+
+.previewImage {
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.previewImage img {
+  border-radius: 8px;
 }
diff --git a/src/screens/UserPortal/Home/Home.test.tsx b/src/screens/UserPortal/Home/Home.test.tsx
index 105714cfc8..aafa779255 100644
--- a/src/screens/UserPortal/Home/Home.test.tsx
+++ b/src/screens/UserPortal/Home/Home.test.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import { MockedProvider } from '@apollo/react-testing';
 import { I18nextProvider } from 'react-i18next';
 
-import { ORGANIZATION_POST_CONNECTION_LIST } from 'GraphQl/Queries/Queries';
+import {
+  ORGANIZATION_POST_CONNECTION_LIST,
+  ADVERTISEMENTS_GET,
+} from 'GraphQl/Queries/Queries';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { store } from 'state/store';
@@ -24,6 +27,19 @@ jest.mock('react-toastify', () => ({
   },
 }));
 
+const EMPTY_MOCKS = [
+  {
+    request: {
+      query: ADVERTISEMENTS_GET,
+    },
+    result: {
+      data: {
+        getAdvertisements: [],
+      },
+    },
+  },
+];
+
 const MOCKS = [
   {
     request: {
@@ -124,10 +140,9 @@ const MOCKS = [
     request: {
       query: CREATE_POST_MUTATION,
       variables: {
-        title: '',
-        text: 'This is a test',
-        organizationId: '',
-        file: '',
+        title: 'Dummy Post',
+        text: 'This is dummy text',
+        organizationId: '123',
       },
       result: {
         data: {
@@ -138,9 +153,58 @@ const MOCKS = [
       },
     },
   },
+  {
+    request: {
+      query: ADVERTISEMENTS_GET,
+      variables: {},
+    },
+    result: {
+      data: {
+        getAdvertisements: [
+          {
+            _id: '1234',
+            name: 'Ad 1',
+            type: 'Type 1',
+            orgId: 'orgId',
+            link: 'Link 1',
+            endDate: '2024-12-31',
+            startDate: '2022-01-01',
+          },
+          {
+            _id: '2345',
+            name: 'Ad 2',
+            type: 'Type 1',
+            orgId: 'orgId',
+            link: 'Link 2',
+            endDate: '2024-09-31',
+            startDate: '2023-04-01',
+          },
+          {
+            _id: '3456',
+            name: 'name3',
+            type: 'Type 2',
+            orgId: 'orgId',
+            link: 'link3',
+            startDate: '2023-01-30',
+            endDate: '2023-12-31',
+          },
+          {
+            _id: '4567',
+            name: 'name4',
+            type: 'Type 2',
+            orgId: 'org1',
+            link: 'link4',
+            startDate: '2023-01-30',
+            endDate: '2023-12-01',
+          },
+        ],
+      },
+    },
+  },
 ];
 
 const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(EMPTY_MOCKS, true);
 
 async function wait(ms = 100): Promise<void> {
   await act(() => {
@@ -150,6 +214,26 @@ async function wait(ms = 100): Promise<void> {
   });
 }
 
+beforeEach(() => {
+  const url = 'http://localhost:3000/user/organization/id=orgId';
+  Object.defineProperty(window, 'location', {
+    value: {
+      href: url,
+    },
+    writable: true,
+  });
+});
+
+let originalLocation: Location;
+
+beforeAll(() => {
+  originalLocation = window.location;
+});
+
+afterAll(() => {
+  window.location = originalLocation;
+});
+
 describe('Testing Home Screen [User Portal]', () => {
   jest.mock('utils/getOrganizationId');
 
@@ -214,6 +298,8 @@ describe('Testing Home Screen [User Portal]', () => {
 
     expect(getOrganizationIdSpy).toHaveBeenCalled();
 
+    userEvent.click(screen.getByTestId('startPostBtn'));
+
     const randomPostInput = 'This is a test';
     userEvent.type(screen.getByTestId('postInput'), randomPostInput);
 
@@ -221,11 +307,7 @@ describe('Testing Home Screen [User Portal]', () => {
   });
 
   test('Error toast should be visible when user tries to create a post with an empty body', async () => {
-    const getOrganizationIdSpy = jest
-      .spyOn(getOrganizationId, 'default')
-      .mockImplementation(() => {
-        return '';
-      });
+    const toastSpy = jest.spyOn(toast, 'error');
 
     render(
       <MockedProvider addTypename={false} link={link}>
@@ -240,23 +322,14 @@ describe('Testing Home Screen [User Portal]', () => {
     );
 
     await wait();
+    userEvent.click(screen.getByTestId('startPostBtn'));
 
-    expect(getOrganizationIdSpy).toHaveBeenCalled();
-
-    userEvent.click(screen.getByTestId('postAction'));
+    userEvent.click(screen.getByTestId('createPostBtn'));
 
-    expect(toast.error).toBeCalledWith(
-      "Can't create a post with an empty body."
-    );
+    expect(toastSpy).toBeCalledWith("Can't create a post with an empty body.");
   });
 
   test('Info toast should be visible when user tries to create a post with a valid body', async () => {
-    const getOrganizationIdSpy = jest
-      .spyOn(getOrganizationId, 'default')
-      .mockImplementation(() => {
-        return '';
-      });
-
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -271,15 +344,125 @@ describe('Testing Home Screen [User Portal]', () => {
 
     await wait();
 
-    expect(getOrganizationIdSpy).toHaveBeenCalled();
+    userEvent.click(screen.getByTestId('startPostBtn'));
 
     const randomPostInput = 'This is a test';
     userEvent.type(screen.getByTestId('postInput'), randomPostInput);
     expect(screen.queryByText(randomPostInput)).toBeInTheDocument();
 
-    userEvent.click(screen.getByTestId('postAction'));
+    userEvent.click(screen.getByTestId('createPostBtn'));
 
     expect(toast.error).not.toBeCalledWith();
     expect(toast.info).toBeCalledWith('Processing your post. Please wait.');
   });
+
+  test('Modal should open on clicking on start a post button', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Home />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('startPostBtn'));
+    const startPostModal = screen.getByTestId('startPostModal');
+    expect(startPostModal).toBeInTheDocument();
+  });
+
+  test('modal closes on clicking on the close button', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Home />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('startPostBtn'));
+    const modalHeader = screen.getByTestId('startPostModal');
+    expect(modalHeader).toBeInTheDocument();
+
+    userEvent.type(screen.getByTestId('postInput'), 'some content');
+    userEvent.upload(
+      screen.getByTestId('postImageInput'),
+      new File(['image content'], 'image.png', { type: 'image/png' })
+    );
+
+    // 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(modalHeader).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('triggers file input when the icon is clicked', () => {
+    const clickSpy = jest.spyOn(HTMLInputElement.prototype, 'click');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Home />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    userEvent.click(screen.getByTestId('startPostBtn'));
+
+    // Check if the file input is hidden initially
+    const postImageInput = screen.getByTestId('postImageInput');
+    expect(postImageInput).toHaveAttribute('type', 'file');
+    expect(postImageInput).toHaveStyle({ display: 'none' });
+
+    // Trigger icon click event
+    const iconButton = screen.getByTestId('addMediaBtn');
+    fireEvent.click(iconButton);
+
+    // Check if the file input is triggered to open
+    expect(clickSpy).toHaveBeenCalled();
+    clickSpy.mockRestore();
+  });
+
+  test('promoted post is not rendered if there is no ad content', () => {
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Home />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    expect(screen.queryByText('Ad 1')).not.toBeInTheDocument();
+    expect(screen.queryByText('Ad 2')).not.toBeInTheDocument();
+  });
 });
diff --git a/src/screens/UserPortal/Home/Home.tsx b/src/screens/UserPortal/Home/Home.tsx
index ad02e1b26c..9c046ff9a6 100644
--- a/src/screens/UserPortal/Home/Home.tsx
+++ b/src/screens/UserPortal/Home/Home.tsx
@@ -1,19 +1,27 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import type { ChangeEvent } from 'react';
 import OrganizationNavbar from 'components/UserPortal/OrganizationNavbar/OrganizationNavbar';
 import styles from './Home.module.css';
 import UserSidebar from 'components/UserPortal/UserSidebar/UserSidebar';
 import OrganizationSidebar from 'components/UserPortal/OrganizationSidebar/OrganizationSidebar';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import { Button, FloatingLabel, Form } from 'react-bootstrap';
+import {
+  Button,
+  Form,
+  Col,
+  Container,
+  Image,
+  Row,
+  Modal,
+} from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import getOrganizationId from 'utils/getOrganizationId';
-import SendIcon from '@mui/icons-material/Send';
 import PostCard from 'components/UserPortal/PostCard/PostCard';
 import { useMutation, useQuery } from '@apollo/client';
 import {
   ADVERTISEMENTS_GET,
   ORGANIZATION_POST_CONNECTION_LIST,
+  USER_DETAILS,
 } from 'GraphQl/Queries/Queries';
 import { CREATE_POST_MUTATION } from 'GraphQl/Mutations/mutations';
 import { errorHandler } from 'utils/errorHandler';
@@ -22,6 +30,7 @@ import convertToBase64 from 'utils/convertToBase64';
 import { toast } from 'react-toastify';
 import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
 import PromotedPost from 'components/UserPortal/PromotedPost/PromotedPost';
+import UserDefault from '../../../assets/images/defaultImg.png';
 
 interface InterfacePostCardProps {
   id: string;
@@ -57,15 +66,28 @@ interface InterfacePostCardProps {
   }[];
 }
 
+interface InterfaceAdContent {
+  _id: string;
+  name: string;
+  type: string;
+  orgId: string;
+  link: string;
+  endDate: string;
+  startDate: string;
+}
+
 export default function home(): JSX.Element {
   const { t } = useTranslation('translation', { keyPrefix: 'home' });
 
   const organizationId = getOrganizationId(window.location.href);
   const [posts, setPosts] = React.useState([]);
-  const [postContent, setPostContent] = React.useState('');
-  const [postImage, setPostImage] = React.useState('');
+  const [postContent, setPostContent] = React.useState<string>('');
+  const [postImage, setPostImage] = React.useState<string>('');
+  const [adContent, setAdContent] = React.useState<InterfaceAdContent[]>([]);
+  const [filteredAd, setFilteredAd] = useState<InterfaceAdContent[]>([]);
+  const [showStartPost, setShowStartPost] = useState<boolean>(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const currentOrgId = window.location.href.split('/id=')[1] + '';
-  const [adContent, setAdContent] = React.useState([]);
 
   const navbarProps = {
     currentPage: 'home',
@@ -85,6 +107,12 @@ export default function home(): JSX.Element {
     variables: { id: organizationId },
   });
 
+  const userId: string | null = localStorage.getItem('userId');
+
+  const { data: userData } = useQuery(USER_DETAILS, {
+    variables: { id: userId },
+  });
+
   const [create] = useMutation(CREATE_POST_MUTATION);
 
   const handlePost = async (): Promise<void> => {
@@ -109,6 +137,7 @@ export default function home(): JSX.Element {
         refetch();
         setPostContent('');
         setPostImage('');
+        setShowStartPost(false);
       }
     } catch (error: any) {
       /* istanbul ignore next */
@@ -134,55 +163,133 @@ export default function home(): JSX.Element {
     }
   }, [data]);
 
+  useEffect(() => {
+    setFilteredAd(filterAdContent(adContent, currentOrgId));
+  }, [adContent]);
+
+  const filterAdContent = (
+    adCont: InterfaceAdContent[],
+    currentOrgId: string,
+    currentDate: Date = new Date()
+  ): InterfaceAdContent[] => {
+    return adCont.filter(
+      (ad: InterfaceAdContent) =>
+        ad.orgId === currentOrgId && new Date(ad.endDate) > currentDate
+    );
+  };
+
+  const handlePostButtonClick = (): void => {
+    setShowStartPost(true);
+  };
+
+  const handleIconClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
+    e.preventDefault();
+
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  const handleModalClose = (): void => {
+    setPostContent('');
+    setPostImage('');
+    setShowStartPost(false);
+  };
+
   return (
     <>
       <OrganizationNavbar {...navbarProps} />
       <div className={`d-flex flex-row ${styles.containerHeight}`}>
         <UserSidebar />
         <div className={`${styles.colorLight} ${styles.mainContainer}`}>
-          <div className={`${styles.postInputContainer}`}>
-            <FloatingLabel
-              controlId="post-input"
-              label={t('somethingOnYourMind')}
-            >
-              <Form.Control
-                as="textarea"
-                placeholder={t('somethingOnYourMind')}
-                value={postContent}
-                className={styles.postInput}
-                onChange={handlePostInput}
-                data-testid={'postInput'}
-              />
-            </FloatingLabel>
-            <div className={`${styles.postActionContainer}`}>
-              <Form.Control
-                accept="image/*"
-                id="postphoto"
-                name="photo"
-                type="file"
-                className={styles.imageInput}
-                multiple={false}
-                onChange={
-                  /* istanbul ignore next */
-                  async (e: React.ChangeEvent): Promise<void> => {
-                    const target = e.target as HTMLInputElement;
-                    const file = target.files && target.files[0];
-                    if (file) {
-                      const image = await convertToBase64(file);
-                      setPostImage(image);
-                    }
-                  }
-                }
-              />
-              <Button
-                className={`${styles.postActionBtn}`}
-                onClick={handlePost}
-                data-testid={'postAction'}
-              >
-                <SendIcon />
-              </Button>
-            </div>
-          </div>
+          <Container className={styles.postContainer}>
+            <Row className="d-flex align-items-center justify-content-center">
+              <Col xs={2} className={styles.userImage}>
+                <Image
+                  src={userData?.image ? userData?.image : UserDefault}
+                  roundedCircle
+                  className="mt-2"
+                />
+              </Col>
+              <Col xs={10}>
+                <Button
+                  className={styles.startPostBtn}
+                  onClick={handlePostButtonClick}
+                  data-testid="startPostBtn"
+                >
+                  {t('startPost')}
+                </Button>
+              </Col>
+            </Row>
+            <Row className="mt-3 d-flex align-items-center justify-content-evenly">
+              <Col xs={4} className={styles.uploadLink}>
+                <div className="d-flex gap-2 align-items-center justify-content-center">
+                  <div className={styles.icons}>
+                    <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>
+                  </div>
+
+                  <p className={styles.iconLabel}>{t('media')}</p>
+                </div>
+              </Col>
+              <Col xs={4} className={styles.uploadLink}>
+                <div className="d-flex gap-2 align-items-center justify-content-center">
+                  <div className={styles.icons}>
+                    <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>
+                  </div>
+
+                  <p className={styles.iconLabel}>{t('event')}</p>
+                </div>
+              </Col>
+              <Col xs={4} className={styles.uploadLink}>
+                <div className="d-flex gap-2 align-items-center justify-content-center">
+                  <div className={styles.icons}>
+                    <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>
+                  </div>
+
+                  <p className={styles.iconLabel}>{t('article')}</p>
+                </div>
+              </Col>
+            </Row>
+          </Container>
           <div
             style={{
               display: `flex`,
@@ -202,21 +309,21 @@ export default function home(): JSX.Element {
               </Link>
             </div>
           </div>
-          {adContent
-            .filter((ad: any) => ad.orgId == currentOrgId)
-            .filter((ad: any) => new Date(ad.endDate) > new Date()).length == 0
-            ? ''
-            : adContent
-                .filter((ad: any) => ad.orgId == currentOrgId)
-                .filter((ad: any) => new Date(ad.endDate) > new Date())
-                .map((post: any) => (
-                  <PromotedPost
-                    key={post.id}
-                    id={post.id}
-                    image={post.link}
-                    title={post.name}
-                  />
-                ))}
+          {filteredAd.length === 0 ? (
+            ''
+          ) : (
+            <div data-testid="promotedPostsContainer">
+              {filteredAd.map((post: any) => (
+                <PromotedPost
+                  key={post._id}
+                  id={post._id}
+                  image={post.link}
+                  title={post.name}
+                  data-testid="postid"
+                />
+              ))}
+            </div>
+          )}
           {loadingPosts ? (
             <div className={`d-flex flex-row justify-content-center`}>
               <HourglassBottomIcon /> <span>Loading...</span>
@@ -285,6 +392,107 @@ export default function home(): JSX.Element {
           )}
         </div>
         <OrganizationSidebar />
+        <Modal
+          size="lg"
+          show={showStartPost}
+          onHide={handleModalClose}
+          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?.image ? userData?.image : UserDefault}
+                    roundedCircle
+                    className="mt-2"
+                  />
+                </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}
+              />
+              <Form.Control
+                ref={fileInputRef}
+                accept="image/*"
+                id="postphoto"
+                name="photo"
+                type="file"
+                className={styles.imageInput}
+                multiple={false}
+                data-testid="postImageInput"
+                onChange={async (
+                  e: React.ChangeEvent<HTMLInputElement>
+                ): Promise<void> => {
+                  const file = e.target.files && e.target.files[0];
+                  if (file) {
+                    const image = await convertToBase64(file);
+                    setPostImage(image);
+                  }
+                }}
+              />
+              {postImage && (
+                <div className={styles.previewImage}>
+                  <Image src={postImage} alt="Post Image Preview" />
+                </div>
+              )}
+              <div className="d-flex gap-2">
+                <button
+                  className={`${styles.icons} ${styles.dark}`}
+                  onClick={handleIconClick}
+                  data-testid="addMediaBtn"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    strokeWidth={1.5}
+                    stroke="#000"
+                    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>
+                </button>
+              </div>
+            </Modal.Body>
+            <Modal.Footer>
+              <Button
+                type="button"
+                value="invite"
+                data-testid="createPostBtn"
+                onClick={handlePost}
+              >
+                {t('addPost')}
+              </Button>
+            </Modal.Footer>
+          </Form>
+        </Modal>
       </div>
     </>
   );
diff --git a/src/screens/UserPortal/Organizations/Organizations.test.tsx b/src/screens/UserPortal/Organizations/Organizations.test.tsx
index 6d92831940..f206ccab8f 100644
--- a/src/screens/UserPortal/Organizations/Organizations.test.tsx
+++ b/src/screens/UserPortal/Organizations/Organizations.test.tsx
@@ -165,12 +165,16 @@ describe('Testing Organizations Screen [User Portal]', () => {
     );
 
     await wait();
-
-    userEvent.type(screen.getByTestId('searchInput'), '2');
+    const searchBtn = screen.getByTestId('searchBtn');
+    userEvent.type(screen.getByTestId('searchInput'), '2{enter}');
     await wait();
 
     expect(screen.queryByText('anyOrganization2')).toBeInTheDocument();
     expect(screen.queryByText('anyOrganization1')).not.toBeInTheDocument();
+
+    userEvent.clear(screen.getByTestId('searchInput'));
+    userEvent.click(searchBtn);
+    await wait();
   });
 
   test('Mode is changed to joined organizations', async () => {
diff --git a/src/screens/UserPortal/Organizations/Organizations.tsx b/src/screens/UserPortal/Organizations/Organizations.tsx
index c0b77f805e..f2a75b023c 100644
--- a/src/screens/UserPortal/Organizations/Organizations.tsx
+++ b/src/screens/UserPortal/Organizations/Organizations.tsx
@@ -74,17 +74,24 @@ export default function organizations(): JSX.Element {
     setPage(0);
   };
 
-  const handleSearch = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ): void => {
-    const newFilter = event.target.value;
-    setFilterName(newFilter);
-
-    const filter = {
-      filter: newFilter,
-    };
+  const handleSearch = (value: string): void => {
+    setFilterName(value);
 
-    refetch(filter);
+    refetch({
+      filter: value,
+    });
+  };
+  const handleSearchByEnter = (e: any): void => {
+    if (e.key === 'Enter') {
+      const { value } = e.target;
+      handleSearch(value);
+    }
+  };
+  const handleSearchByBtnClick = (): void => {
+    const value =
+      (document.getElementById('searchUserOrgs') as HTMLInputElement)?.value ||
+      '';
+    handleSearch(value);
   };
 
   /* istanbul ignore next */
@@ -124,14 +131,17 @@ export default function organizations(): JSX.Element {
             <InputGroup className={styles.maxWidth}>
               <Form.Control
                 placeholder={t('search')}
+                id="searchUserOrgs"
                 type="text"
                 className={`${styles.borderNone} ${styles.backgroundWhite}`}
-                value={filterName}
-                onChange={handleSearch}
+                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>
diff --git a/src/screens/UserPortal/People/People.test.tsx b/src/screens/UserPortal/People/People.test.tsx
index b373a68e98..19af06123f 100644
--- a/src/screens/UserPortal/People/People.test.tsx
+++ b/src/screens/UserPortal/People/People.test.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { act, 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,
@@ -156,7 +155,7 @@ describe('Testing People Screen [User Portal]', () => {
     expect(screen.queryAllByText('Noble Mittal')).not.toBe([]);
   });
 
-  test('Search works properly', async () => {
+  test('Search works properly by pressing enter', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -171,7 +170,34 @@ describe('Testing People Screen [User Portal]', () => {
 
     await wait();
 
+    userEvent.type(screen.getByTestId('searchInput'), 'j{enter}');
+    await wait();
+
+    expect(getOrganizationIdSpy).toHaveBeenCalled();
+    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(getOrganizationIdSpy).toHaveBeenCalled();
diff --git a/src/screens/UserPortal/People/People.tsx b/src/screens/UserPortal/People/People.tsx
index f8b4d7ca3d..5bf6991af5 100644
--- a/src/screens/UserPortal/People/People.tsx
+++ b/src/screens/UserPortal/People/People.tsx
@@ -31,7 +31,6 @@ export default function people(): JSX.Element {
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(5);
   const [members, setMembers] = React.useState([]);
-  const [filterName, setFilterName] = React.useState('');
   const [mode, setMode] = React.useState(0);
 
   const organizationId = getOrganizationId(window.location.href);
@@ -70,20 +69,26 @@ export default function people(): JSX.Element {
     setPage(0);
   };
 
-  const handleSearch = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ): void => {
-    const newFilter = event.target.value;
-    setFilterName(newFilter);
-
-    const filter = {
+  const handleSearch = (newFilter: string): void => {
+    refetch({
       firstName_contains: newFilter,
-    };
+    });
+  };
 
-    refetch(filter);
+  const handleSearchByEnter = (e: any): void => {
+    if (e.key === 'Enter') {
+      const { value } = e.target;
+      handleSearch(value);
+    }
+  };
+
+  const handleSearchByBtnClick = (): void => {
+    const inputValue =
+      (document.getElementById('searchPeople') as HTMLInputElement)?.value ||
+      '';
+    handleSearch(inputValue);
   };
 
-  /* istanbul ignore next */
   React.useEffect(() => {
     if (data) {
       setMembers(data.organizationsMemberConnection.edges);
@@ -119,14 +124,17 @@ export default function people(): JSX.Element {
             <InputGroup className={styles.maxWidth}>
               <Form.Control
                 placeholder={t('search')}
+                id="searchPeople"
                 type="text"
                 className={`${styles.borderNone} ${styles.backgroundWhite}`}
-                value={filterName}
-                onChange={handleSearch}
+                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>
diff --git a/src/screens/UserPortal/Settings/Settings.module.css b/src/screens/UserPortal/Settings/Settings.module.css
index c8ca1e6091..2ac15983e2 100644
--- a/src/screens/UserPortal/Settings/Settings.module.css
+++ b/src/screens/UserPortal/Settings/Settings.module.css
@@ -1,7 +1,7 @@
 .mainContainer {
   width: 50%;
   flex-grow: 3;
-  padding: 40px;
+  padding: 25px;
   max-height: 100%;
   overflow: auto;
 }
@@ -10,17 +10,38 @@
   height: calc(100vh - 66px);
 }
 
-.content {
+.cardHeader .cardTitle {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.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;
-  max-width: 300px;
-  gap: 15px;
 }
 
-.imageInput {
-  background-color: white;
+.cardLabel {
+  font-weight: bold;
+  padding-bottom: 1px;
+  font-size: 14px;
+  color: #707070;
+  margin-bottom: 10px;
+}
+
+.cardControl {
+  margin-bottom: 20px;
 }
 
-.colorLight {
-  background-color: white;
+.cardButton {
+  width: fit-content;
+  float: right;
 }
diff --git a/src/screens/UserPortal/Settings/Settings.test.tsx b/src/screens/UserPortal/Settings/Settings.test.tsx
index faec179acc..b096162e2d 100644
--- a/src/screens/UserPortal/Settings/Settings.test.tsx
+++ b/src/screens/UserPortal/Settings/Settings.test.tsx
@@ -136,4 +136,23 @@ describe('Testing Settings Screen [User Portal]', () => {
     userEvent.click(screen.getByTestId('updateUserBtn'));
     await wait();
   });
+
+  test('Other settings card is rendered properly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Settings />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    expect(screen.getByText('Other Settings')).toBeInTheDocument();
+    expect(screen.getByText('Change Language')).toBeInTheDocument();
+  });
 });
diff --git a/src/screens/UserPortal/Settings/Settings.tsx b/src/screens/UserPortal/Settings/Settings.tsx
index 35afd78790..2d48994e89 100644
--- a/src/screens/UserPortal/Settings/Settings.tsx
+++ b/src/screens/UserPortal/Settings/Settings.tsx
@@ -3,13 +3,14 @@ import { useTranslation } from 'react-i18next';
 import styles from './Settings.module.css';
 import UserSidebar from 'components/UserPortal/UserSidebar/UserSidebar';
 import UserNavbar from 'components/UserPortal/UserNavbar/UserNavbar';
-import { Button, Form } from 'react-bootstrap';
+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 ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLanguageDropDown';
 
 export default function settings(): JSX.Element {
   const { t } = useTranslation('translation', {
@@ -83,60 +84,109 @@ export default function settings(): JSX.Element {
         <UserSidebar />
         <div className={`${styles.mainContainer}`}>
           <h3>{t('profileSettings')}</h3>
-          <div className={`${styles.content}`}>
-            <Form.Label htmlFor="inputFirstName">{t('firstName')}</Form.Label>
-            <Form.Control
-              type="text"
-              id="inputFirstName"
-              value={firstName}
-              onChange={handleFirstNameChange}
-              className={`${styles.colorLight}`}
-              data-testid="inputFirstName"
-            />
-            <Form.Label htmlFor="inputLastName">{t('lastName')}</Form.Label>
-            <Form.Control
-              type="text"
-              id="inputLastName"
-              value={lastName}
-              onChange={handleLastNameChange}
-              className={`${styles.colorLight}`}
-              data-testid="inputLastName"
-            />
-            <Form.Label htmlFor="inputEmail">{t('emailAddress')}</Form.Label>
-            <Form.Control
-              type="email"
-              id="inputEmail"
-              value={email}
-              className={`${styles.colorLight}`}
-              disabled
-            />
-            {t('updateImage')}
-            <Form.Control
-              accept="image/*"
-              id="postphoto"
-              name="photo"
-              type="file"
-              className={styles.imageInput}
-              multiple={false}
-              onChange={
-                /* istanbul ignore next */
-                async (e: React.ChangeEvent): Promise<void> => {
-                  const target = e.target as HTMLInputElement;
-                  const file = target.files && target.files[0];
-                  if (file) {
-                    const image = await convertToBase64(file);
-                    setImage(image);
-                  }
-                }
-              }
-            />
-            <Button
-              onClick={handleUpdateUserDetails}
-              data-testid="updateUserBtn"
-            >
-              {t('save')}
-            </Button>
-          </div>
+          <Row>
+            <Col lg={7}>
+              <Card border="0" className="rounded-4 mb-4">
+                <div className={`${styles.cardHeader}`}>
+                  <div className={`${styles.cardTitle}`}>
+                    {t('updateProfile')}
+                  </div>
+                </div>
+                <Card.Body className={`${styles.cardBody}`}>
+                  <Form.Label
+                    htmlFor="inputFirstName"
+                    className={`${styles.cardLabel}`}
+                  >
+                    {t('firstName')}
+                  </Form.Label>
+                  <Form.Control
+                    type="text"
+                    id="inputFirstName"
+                    value={firstName}
+                    onChange={handleFirstNameChange}
+                    className={`${styles.cardControl}`}
+                    data-testid="inputFirstName"
+                  />
+                  <Form.Label
+                    htmlFor="inputLastName"
+                    className={`${styles.cardLabel}`}
+                  >
+                    {t('lastName')}
+                  </Form.Label>
+                  <Form.Control
+                    type="text"
+                    id="inputLastName"
+                    value={lastName}
+                    onChange={handleLastNameChange}
+                    className={`${styles.cardControl}`}
+                    data-testid="inputLastName"
+                  />
+                  <Form.Label
+                    htmlFor="inputEmail"
+                    className={`${styles.cardLabel}`}
+                  >
+                    {t('emailAddress')}
+                  </Form.Label>
+                  <Form.Control
+                    type="email"
+                    id="inputEmail"
+                    value={email}
+                    className={`${styles.cardControl}`}
+                    disabled
+                  />
+                  <Form.Label
+                    htmlFor="postphoto"
+                    className={`${styles.cardLabel}`}
+                  >
+                    {t('updateImage')}
+                  </Form.Label>
+                  <Form.Control
+                    accept="image/*"
+                    id="postphoto"
+                    name="photo"
+                    type="file"
+                    className={styles.cardControl}
+                    multiple={false}
+                    onChange={
+                      /* istanbul ignore next */
+                      async (e: React.ChangeEvent): Promise<void> => {
+                        const target = e.target as HTMLInputElement;
+                        const file = target.files && target.files[0];
+                        if (file) {
+                          const image = await convertToBase64(file);
+                          setImage(image);
+                        }
+                      }
+                    }
+                  />
+                  <div>
+                    <Button
+                      onClick={handleUpdateUserDetails}
+                      data-testid="updateUserBtn"
+                      className={`${styles.cardButton}`}
+                    >
+                      {t('saveChanges')}
+                    </Button>
+                  </div>
+                </Card.Body>
+              </Card>
+            </Col>
+            <Col lg={5}>
+              <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>
+            </Col>
+          </Row>
         </div>
       </div>
     </>
diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css b/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css
index 840ceb8a0b..413df8cecd 100644
--- a/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css
+++ b/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css
@@ -1,48 +1,208 @@
-body::before {
-  content: none !important;
+.login_background {
+  min-height: 100vh;
 }
 
-.leftPane {
+.row .left_portion {
+  display: flex;
+  justify-content: center;
   align-items: center;
-  width: 60%;
-  min-width: 300px;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.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);
 }
 
-.palisadoesImage {
-  width: 100%;
-  height: auto;
-  max-width: 700px;
+.row .right_portion::-webkit-scrollbar {
+  display: none;
 }
 
-.talawaImage {
-  width: 40%;
-  height: auto;
-  margin-left: 50%;
-  transform: translateX(-50%);
+.row .right_portion .langChangeBtn {
+  margin: 0;
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
 }
 
-.mainContainer {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 10px;
-  min-height: 100vh;
+.langChangeBtnStyle {
+  width: 7.5rem;
+  height: 2.2rem;
+  padding: 0;
 }
 
-.contentContainer {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 20px 50px;
-  background-color: var(--bs-white);
+.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: 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);
 }
 
-@media only screen and (max-width: 800px) {
-  .leftPane {
+@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;
+}
diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.test.tsx b/src/screens/UserPortal/UserLoginPage/UserLoginPage.test.tsx
index d60e37c682..7b41dad875 100644
--- a/src/screens/UserPortal/UserLoginPage/UserLoginPage.test.tsx
+++ b/src/screens/UserPortal/UserLoginPage/UserLoginPage.test.tsx
@@ -1,14 +1,83 @@
 import React from 'react';
 import { MockedProvider } from '@apollo/react-testing';
-import { act, render } from '@testing-library/react';
-import { I18nextProvider } from 'react-i18next';
+import { act, render, screen } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
-import { store } from 'state/store';
+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 './UserLoginPage';
+import {
+  LOGIN_MUTATION,
+  RECAPTCHA_MUTATION,
+  SIGNUP_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import { store } from 'state/store';
 import i18nForTest from 'utils/i18nForTest';
 
-import UserLoginPage from './UserLoginPage';
+const MOCKS = [
+  {
+    request: {
+      query: LOGIN_MUTATION,
+      variables: {
+        email: 'johndoe@gmail.com',
+        password: 'johndoe',
+      },
+    },
+    result: {
+      data: {
+        login: {
+          user: {
+            _id: '1',
+            userType: 'ADMIN',
+            adminApproved: true,
+          },
+          accessToken: 'accessToken',
+          refreshToken: 'refreshToken',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: SIGNUP_MUTATION,
+      variables: {
+        firstName: 'John',
+        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,
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
 
 async function wait(ms = 100): Promise<void> {
   await act(() => {
@@ -18,22 +87,544 @@ async function wait(ms = 100): Promise<void> {
   });
 }
 
-const link = new StaticMockLink([], true);
+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',
+}));
+
+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('http://localhost:4000/graphql/');
+  });
+
+  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('http://localhost:4000/graphql/');
+  });
+});
+
+describe('Testing Login Page Screen', () => {
+  test('Component Should be rendered properly', 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();
+
+    expect(screen.getByText(/User Login/i)).toBeInTheDocument();
+    expect(window.location).toBeAt('/user/organizations');
+  });
+
+  test('Testing registration functionality', 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));
+
+    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',
+      confirmPassword: 'doeJohn',
+    };
+
+    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',
+    };
 
-describe('Testing User Login Page Screen [User Portal]', () => {
-  test('Screen should be rendered properly', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
           <Provider store={store}>
             <I18nextProvider i18n={i18nForTest}>
-              <UserLoginPage />
+              <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();
   });
 });
diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx b/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx
index ca4915d691..2e16f48bc1 100644
--- a/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx
+++ b/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx
@@ -1,49 +1,625 @@
-import React from 'react';
+import { useMutation } from '@apollo/client';
+import type { ChangeEvent } from 'react';
+import React, { useEffect, useRef, 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, useHistory } from 'react-router-dom';
+import { toast } from 'react-toastify';
 
-import PalisadoesImage from 'assets/images/palisadoes_logo.png';
-import TalawaImage from 'assets/images/talawa-logo-200x200.png';
+import {
+  FacebookLogo,
+  LinkedInLogo,
+  GithubLogo,
+  InstagramLogo,
+  SlackLogo,
+  TwitterLogo,
+  YoutubeLogo,
+} from 'assets/svgs/social-icons';
+
+import { REACT_APP_USE_RECAPTCHA, RECAPTCHA_SITE_KEY } from 'Constant/constant';
+import {
+  LOGIN_MUTATION,
+  RECAPTCHA_MUTATION,
+  SIGNUP_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import { ReactComponent as TalawaLogo } from 'assets/svgs/talawa.svg';
+import { ReactComponent as PalisadoesLogo } from 'assets/svgs/palisadoes.svg';
 import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLanguageDropDown';
-import Login from 'components/UserPortal/Login/Login';
-import Register from 'components/UserPortal/Register/Register';
+import LoginPortalToggle from 'components/LoginPortalToggle/LoginPortalToggle';
+import Loader from 'components/Loader/Loader';
+import { errorHandler } from 'utils/errorHandler';
 import styles from './UserLoginPage.module.css';
+import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
+
+function loginPage(): JSX.Element {
+  const { t } = useTranslation('translation', { keyPrefix: 'userLoginPage' });
+  const history = useHistory();
+
+  document.title = t('title');
+
+  const [showTab, setShowTab] = useState<'LOGIN' | 'REGISTER'>('LOGIN');
+  const [componentLoader, setComponentLoader] = useState(true);
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const [signformState, setSignFormState] = useState({
+    signfirstName: '',
+    signlastName: '',
+    signEmail: '',
+    signPassword: '',
+    cPassword: '',
+  });
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const [showConfirmPassword, setShowConfirmPassword] =
+    useState<boolean>(false);
+  const recaptchaRef = useRef<ReCAPTCHA>(null);
+
+  useEffect(() => {
+    const isLoggedIn = localStorage.getItem('IsLoggedIn');
+    if (isLoggedIn == 'TRUE') {
+      history.push('/user/organizations/');
+    }
+    setComponentLoader(false);
+  }, []);
+
+  const togglePassword = (): void => setShowPassword(!showPassword);
+  const toggleConfirmPassword = (): void =>
+    setShowConfirmPassword(!showConfirmPassword);
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [login, { loading: loginLoading }] = useMutation(LOGIN_MUTATION);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [signup, { loading: signinLoading }] = useMutation(SIGNUP_MUTATION);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [recaptcha, { loading: recaptchaLoading }] =
+    useMutation(RECAPTCHA_MUTATION);
+
+  useEffect(() => {
+    async function loadResource(): Promise<void> {
+      try {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const response = await fetch('http://localhost:4000/graphql/');
+      } catch (error: any) {
+        /* istanbul ignore next */
+        errorHandler(t, error);
+      }
+    }
+
+    loadResource();
+  }, []);
 
-export default function userLoginPage(): JSX.Element {
-  const { t } = useTranslation('translation', { keyPrefix: 'loginPage' });
+  const verifyRecaptcha = async (
+    recaptchaToken: any
+  ): Promise<boolean | void> => {
+    try {
+      /* istanbul ignore next */
+      if (REACT_APP_USE_RECAPTCHA !== 'yes') {
+        return true;
+      }
+      const { data } = await recaptcha({
+        variables: {
+          recaptchaToken,
+        },
+      });
 
-  const [currentMode, setCurrentMode] = React.useState('login');
-  const loginRegisterProps = {
-    setCurrentMode: setCurrentMode,
+      return data.recaptcha;
+    } catch (error: any) {
+      /* istanbul ignore next */
+      toast.error(t('captchaError'));
+    }
   };
 
-  return (
-    <div className={styles.mainContainer}>
-      <div className={styles.leftPane}>
-        <img
-          className={styles.palisadoesImage}
-          src={PalisadoesImage}
-          alt="Palisadoes Branding"
-        />
-        <h6 style={{ textAlign: `center` }}>
-          <p>{t('fromPalisadoes')}</p>
-        </h6>
-      </div>
-      <div className={`${styles.contentContainer} py-5`}>
-        <ChangeLanguageDropDown parentContainerStyle="m-0" />
-        <img
-          className={styles.talawaImage}
-          src={TalawaImage}
-          alt="Talawa Branding"
-        />
-        {
+  const signupLink = async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
+    e.preventDefault();
+
+    const { signfirstName, signlastName, signEmail, signPassword, cPassword } =
+      signformState;
+
+    const recaptchaToken = recaptchaRef.current?.getValue();
+    recaptchaRef.current?.reset();
+
+    const isVerified = await verifyRecaptcha(recaptchaToken);
+    /* istanbul ignore next */
+    if (!isVerified) {
+      toast.error(t('Please_check_the_captcha'));
+      return;
+    }
+
+    if (
+      signfirstName.length > 1 &&
+      signlastName.length > 1 &&
+      signEmail.length >= 8 &&
+      signPassword.length > 1
+    ) {
+      if (cPassword == signPassword) {
+        try {
+          const { data: signUpData } = await signup({
+            variables: {
+              firstName: signfirstName,
+              lastName: signlastName,
+              email: signEmail,
+              password: signPassword,
+            },
+          });
+
+          /* istanbul ignore next */
+          if (signUpData) {
+            toast.success(t('afterRegister'));
+
+            setShowTab('LOGIN');
+
+            setSignFormState({
+              signfirstName: '',
+              signlastName: '',
+              signEmail: '',
+              signPassword: '',
+              cPassword: '',
+            });
+          }
+        } catch (error: any) {
           /* istanbul ignore next */
-          currentMode === 'login' ? (
-            <Login {...loginRegisterProps} />
-          ) : (
-            <Register {...loginRegisterProps} />
-          )
+          errorHandler(t, error);
         }
-      </div>
-    </div>
+      } else {
+        toast.warn(t('passwordMismatches'));
+      }
+    } else {
+      toast.warn(t('fillCorrectly'));
+    }
+  };
+
+  const loginLink = async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
+    e.preventDefault();
+
+    const recaptchaToken = recaptchaRef.current?.getValue();
+    recaptchaRef.current?.reset();
+
+    const isVerified = await verifyRecaptcha(recaptchaToken);
+    /* istanbul ignore next */
+    if (!isVerified) {
+      toast.error(t('Please_check_the_captcha'));
+      return;
+    }
+
+    try {
+      const { data: loginData } = await login({
+        variables: {
+          email: formState.email,
+          password: formState.password,
+        },
+      });
+
+      /* istanbul ignore next */
+      if (loginData) {
+        localStorage.setItem('token', loginData.login.accessToken);
+        localStorage.setItem('userId', loginData.login.user._id);
+        localStorage.setItem('refreshToken', loginData.login.refreshToken);
+        localStorage.setItem('IsLoggedIn', 'TRUE');
+        navigator.clipboard.writeText('');
+        if (localStorage.getItem('IsLoggedIn') == 'TRUE') {
+          history.push('/user/organizations/');
+        }
+      } else {
+        toast.warn(t('notAuthorised'));
+      }
+    } catch (error: any) {
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  };
+
+  if (componentLoader || loginLoading || signinLoading || recaptchaLoading) {
+    return <Loader />;
+  }
+
+  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}>
+              <PalisadoesLogo className={styles.palisadoes_logo} />
+              <p className="text-center">{t('fromPalisadoes')}</p>
+            </div>
+
+            <div className={styles.socialIcons}>
+              <a
+                href="https://www.facebook.com/palisadoesproject"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={FacebookLogo} />
+              </a>
+              <a
+                href="https://twitter.com/palisadoesorg?lang=en"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={TwitterLogo} className={styles.socialIcon} />
+              </a>
+              <a
+                href="https://www.linkedin.com/company/palisadoes/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={LinkedInLogo} />
+              </a>
+              <a
+                href="https://github.com/PalisadoesFoundation"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={GithubLogo} />
+              </a>
+              <a
+                href="https://www.youtube.com/@PalisadoesOrganization"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={YoutubeLogo} />
+              </a>
+              <a
+                href="https://www.palisadoes.org/slack"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={SlackLogo} />
+              </a>
+              <a
+                href="https://www.instagram.com/palisadoes/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={InstagramLogo} />
+              </a>
+            </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 />
+
+              {/* LOGIN FORM */}
+              <div
+                className={`${
+                  showTab === 'LOGIN' ? styles.active_tab : 'd-none'
+                }`}
+              >
+                <form onSubmit={loginLink}>
+                  <h1 className="fs-2 fw-bold text-dark mb-3">
+                    {t('userLogin')}
+                  </h1>
+                  <Form.Label>{t('email')}</Form.Label>
+                  <div className="position-relative">
+                    <Form.Control
+                      type="email"
+                      placeholder={t('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">{t('password')}</Form.Label>
+                  <div className="position-relative">
+                    <Form.Control
+                      type={showPassword ? 'text' : 'password'}
+                      className="input_box_second"
+                      placeholder={t('enterPassword')}
+                      required
+                      value={formState.password}
+                      data-testid="password"
+                      onChange={(e): void => {
+                        setFormState({
+                          ...formState,
+                          password: e.target.value,
+                        });
+                      }}
+                      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}
+                    >
+                      {t('forgotPassword')}
+                    </Link>
+                  </div>
+                  {REACT_APP_USE_RECAPTCHA === 'yes' ? (
+                    <div className="googleRecaptcha">
+                      <ReCAPTCHA
+                        ref={recaptchaRef}
+                        className="mt-3"
+                        sitekey={
+                          /* istanbul ignore next */
+                          RECAPTCHA_SITE_KEY ? RECAPTCHA_SITE_KEY : 'XXX'
+                        }
+                      />
+                    </div>
+                  ) : (
+                    /* istanbul ignore next */
+                    <></>
+                  )}
+                  <Button
+                    type="submit"
+                    className="mt-3 mb-3 w-100"
+                    value="Login"
+                    data-testid="loginBtn"
+                  >
+                    {t('login')}
+                  </Button>
+                  <div className="position-relative">
+                    <hr />
+                    <span className={styles.orText}>{t('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);
+                    }}
+                  >
+                    {t('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">
+                    {t('register')}
+                  </h1>
+                  <Row>
+                    <Col sm={6}>
+                      <div>
+                        <Form.Label>{t('firstName')}</Form.Label>
+                        <Form.Control
+                          type="text"
+                          id="signfirstname"
+                          className="mb-3"
+                          placeholder={t('firstName')}
+                          required
+                          value={signformState.signfirstName}
+                          onChange={(e): void => {
+                            setSignFormState({
+                              ...signformState,
+                              signfirstName: e.target.value,
+                            });
+                          }}
+                        />
+                      </div>
+                    </Col>
+                    <Col sm={6}>
+                      <div>
+                        <Form.Label>{t('lastName')}</Form.Label>
+                        <Form.Control
+                          type="text"
+                          id="signlastname"
+                          className="mb-3"
+                          placeholder={t('lastName')}
+                          required
+                          value={signformState.signlastName}
+                          onChange={(e): void => {
+                            setSignFormState({
+                              ...signformState,
+                              signlastName: e.target.value,
+                            });
+                          }}
+                        />
+                      </div>
+                    </Col>
+                  </Row>
+                  <div className="position-relative">
+                    <Form.Label>{t('email')}</Form.Label>
+                    <div className="position-relative">
+                      <Form.Control
+                        type="email"
+                        data-testid="signInEmail"
+                        className="mb-3"
+                        placeholder={t('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>{t('password')}</Form.Label>
+                    <div className="position-relative">
+                      <Form.Control
+                        type={showPassword ? 'text' : 'password'}
+                        data-testid="passwordField"
+                        placeholder={t('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,
+                          });
+                        }}
+                      />
+                      <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>
+                    {isInputFocused &&
+                      signformState.signPassword.length < 8 && (
+                        <div
+                          className="form-text text-danger"
+                          data-testid="passwordCheck"
+                        >
+                          {t('atleast_8_char_long')}
+                        </div>
+                      )}
+                    {!isInputFocused &&
+                      signformState.signPassword.length > 0 &&
+                      signformState.signPassword.length < 8 && (
+                        <div
+                          className="form-text text-danger"
+                          data-testid="passwordCheck"
+                        >
+                          {t('atleast_8_char_long')}
+                        </div>
+                      )}
+                  </div>
+                  <div className="position-relative">
+                    <Form.Label>{t('confirmPassword')}</Form.Label>
+                    <div className="position-relative">
+                      <Form.Control
+                        type={showConfirmPassword ? 'text' : 'password'}
+                        placeholder={t('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>
+                  {REACT_APP_USE_RECAPTCHA === 'yes' ? (
+                    <div className="mt-3">
+                      <ReCAPTCHA
+                        ref={recaptchaRef}
+                        sitekey={
+                          /* istanbul ignore next */
+                          RECAPTCHA_SITE_KEY ? RECAPTCHA_SITE_KEY : 'XXX'
+                        }
+                      />
+                    </div>
+                  ) : (
+                    /* istanbul ignore next */
+                    <></>
+                  )}
+                  <Button
+                    type="submit"
+                    className="mt-4 w-100 mb-3"
+                    value="Register"
+                    data-testid="registrationBtn"
+                  >
+                    {t('register')}
+                  </Button>
+                  <div className="position-relative">
+                    <hr />
+                    <span className={styles.orText}>{t('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);
+                    }}
+                  >
+                    {t('login')}
+                  </Button>
+                </Form>
+              </div>
+            </div>
+          </Col>
+        </Row>
+      </section>
+    </>
   );
 }
+
+export default loginPage;
diff --git a/src/screens/Users/Users.test.tsx b/src/screens/Users/Users.test.tsx
index 4484518529..446fc57f7d 100644
--- a/src/screens/Users/Users.test.tsx
+++ b/src/screens/Users/Users.test.tsx
@@ -12,10 +12,11 @@ import { store } from 'state/store';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import i18nForTest from 'utils/i18nForTest';
 import Users from './Users';
-import { EMPTY_MOCKS, MOCKS } from './UsersMocks';
+import { EMPTY_MOCKS, MOCKS, MOCKS2 } from './UsersMocks';
 
 const link = new StaticMockLink(MOCKS, true);
 const link2 = new StaticMockLink(EMPTY_MOCKS, true);
+const link3 = new StaticMockLink(MOCKS2, true);
 
 async function wait(ms = 100): Promise<void> {
   await act(() => {
@@ -102,9 +103,11 @@ describe('Testing Users screen', () => {
     );
 
     await wait();
-
-    const search1 = 'John{backspace}{backspace}{backspace}{backspace}';
+    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);
@@ -118,7 +121,31 @@ describe('Testing Users screen', () => {
 
     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={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Users />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    const search = 'hello{enter}';
+    await act(() =>
+      userEvent.type(screen.getByTestId(/searchByName/i), search)
+    );
   });
 
   test('Testing User data is not present', async () => {
@@ -179,7 +206,7 @@ describe('Testing Users screen', () => {
     );
   });
 
-  test('Testing sort Newest and oldest toggle', async () => {
+  test('Testing sorting functionality', async () => {
     await act(async () => {
       render(
         <MockedProvider addTypename={false} link={link}>
@@ -202,15 +229,96 @@ describe('Testing Users screen', () => {
       const inputText = screen.getByTestId('sortUsers');
 
       fireEvent.click(inputText);
-      const toggleText = screen.getByTestId('newest');
+      const toggleText = screen.getByTestId('oldest');
+      fireEvent.click(toggleText);
+
+      expect(searchInput).toBeInTheDocument();
 
+      fireEvent.click(inputText);
+      const toggleTite = screen.getByTestId('newest');
+      fireEvent.click(toggleTite);
+
+      expect(searchInput).toBeInTheDocument();
+    });
+  });
+
+  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');
+
+      fireEvent.click(inputText);
+      const toggleText = screen.getByTestId('admin');
       fireEvent.click(toggleText);
 
       expect(searchInput).toBeInTheDocument();
+
+      fireEvent.click(inputText);
+      let toggleTite = screen.getByTestId('superAdmin');
+      fireEvent.click(toggleTite);
+
+      expect(searchInput).toBeInTheDocument();
+
+      fireEvent.click(inputText);
+      toggleTite = screen.getByTestId('user');
+      fireEvent.click(toggleTite);
+
+      expect(searchInput).toBeInTheDocument();
+
       fireEvent.click(inputText);
-      const toggleTite = screen.getByTestId('oldest');
+      toggleTite = screen.getByTestId('cancel');
       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();
+  });
 });
diff --git a/src/screens/Users/Users.tsx b/src/screens/Users/Users.tsx
index 0cdac832b5..86adefe967 100644
--- a/src/screens/Users/Users.tsx
+++ b/src/screens/Users/Users.tsx
@@ -31,7 +31,7 @@ const Users = (): JSX.Element => {
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const [searchByName, setSearchByName] = useState('');
   const [sortingOption, setSortingOption] = useState('newest');
-
+  const [filteringOption, setFilteringOption] = useState('cancel');
   const userType = localStorage.getItem('UserType');
   const loggedInUserId = localStorage.getItem('id');
 
@@ -68,10 +68,11 @@ const Users = (): JSX.Element => {
       setHasMore(false);
     }
     if (usersData && usersData.users) {
-      const newDisplayedUsers = sortUsers(usersData.users, sortingOption);
+      let newDisplayedUsers = sortUsers(usersData.users, sortingOption);
+      newDisplayedUsers = filterUsers(newDisplayedUsers, filteringOption);
       setDisplayedUsers(newDisplayedUsers);
     }
-  }, [usersData, sortingOption]);
+  }, [usersData, sortingOption, filteringOption]);
 
   // To clear the search when the component is unmounted
   useEffect(() => {
@@ -107,22 +108,33 @@ const Users = (): JSX.Element => {
     }
   }, [loading]);
 
-  const handleSearchByName = (e: any): void => {
-    /* istanbul ignore next */
+  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
+    });
+  };
+
+  const handleSearchByEnter = (e: any): void => {
     if (e.key === 'Enter') {
       const { value } = e.target;
-      setSearchByName(value);
-      if (value.length === 0) {
-        resetAndRefetch();
-        return;
-      }
-      refetchUsers({
-        firstName_contains: value,
-        lastName_contains: '',
-        // Later on we can add several search and filter options
-      });
+      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({
@@ -179,14 +191,44 @@ const Users = (): JSX.Element => {
         (a, b) =>
           new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
       );
-    } else if (sortingOption === 'oldest') {
+      return sortedUsers;
+    } else {
       sortedUsers.sort(
         (a, b) =>
           new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
       );
+      return sortedUsers;
     }
+  };
+
+  const handleFiltering = (option: string): void => {
+    setFilteringOption(option);
+  };
+
+  const filterUsers = (
+    allUsers: InterfaceQueryUserListItem[],
+    filteringOption: string
+  ): InterfaceQueryUserListItem[] => {
+    const filteredUsers = [...allUsers];
 
-    return sortedUsers;
+    if (filteringOption === 'cancel') {
+      return filteredUsers;
+    } else if (filteringOption === 'user') {
+      const output = filteredUsers.filter((user) => {
+        return user.userType === 'USER';
+      });
+      return output;
+    } else if (filteringOption === 'admin') {
+      const output = filteredUsers.filter((user) => {
+        return user.userType == 'ADMIN';
+      });
+      return output;
+    } else {
+      const output = filteredUsers.filter((user) => {
+        return user.userType == 'SUPERADMIN';
+      });
+      return output;
+    }
   };
 
   const headerTitles: string[] = [
@@ -212,16 +254,19 @@ const Users = (): JSX.Element => {
             >
               <Form.Control
                 type="name"
+                id="searchUsers"
                 className="bg-white"
                 placeholder={t('enterName')}
                 data-testid="searchByName"
                 autoComplete="off"
                 required
-                onKeyUp={handleSearchByName}
+                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>
@@ -234,12 +279,9 @@ const Users = (): JSX.Element => {
                 title="Sort Users"
                 data-testid="sort"
               >
-                <Dropdown.Toggle
-                  variant="outline-success"
-                  data-testid="sortUsers"
-                >
+                <Dropdown.Toggle variant="success" data-testid="sortUsers">
                   <SortIcon className={'me-1'} />
-                  {t('sort')}
+                  {sortingOption === 'newest' ? t('Newest') : t('Oldest')}
                 </Dropdown.Toggle>
                 <Dropdown.Menu>
                   <Dropdown.Item
@@ -256,15 +298,44 @@ const Users = (): JSX.Element => {
                   </Dropdown.Item>
                 </Dropdown.Menu>
               </Dropdown>
-              <Dropdown aria-expanded="false" title="Filter organizations">
-                <Dropdown.Toggle variant="outline-success">
+              <Dropdown
+                aria-expanded="false"
+                title="Filter organizations"
+                data-testid="filter"
+              >
+                <Dropdown.Toggle
+                  variant="outline-success"
+                  data-testid="filterUsers"
+                >
                   <FilterListIcon className={'me-1'} />
                   {t('filter')}
                 </Dropdown.Toggle>
                 <Dropdown.Menu>
-                  <Dropdown.Item href="#/action-1">Action 1</Dropdown.Item>
-                  <Dropdown.Item href="#/action-2">Action 2</Dropdown.Item>
-                  <Dropdown.Item href="#/action-3">Action 3</Dropdown.Item>
+                  <Dropdown.Item
+                    data-testid="admin"
+                    onClick={(): void => handleFiltering('admin')}
+                  >
+                    {t('admin')}
+                  </Dropdown.Item>
+                  <Dropdown.Item
+                    data-testid="superAdmin"
+                    onClick={(): void => handleFiltering('superAdmin')}
+                  >
+                    {t('superAdmin')}
+                  </Dropdown.Item>
+
+                  <Dropdown.Item
+                    data-testid="user"
+                    onClick={(): void => handleFiltering('user')}
+                  >
+                    {t('user')}
+                  </Dropdown.Item>
+                  <Dropdown.Item
+                    data-testid="cancel"
+                    onClick={(): void => handleFiltering('cancel')}
+                  >
+                    {t('cancel')}
+                  </Dropdown.Item>
                 </Dropdown.Menu>
               </Dropdown>
             </div>
@@ -293,7 +364,10 @@ const Users = (): JSX.Element => {
               />
             ) : (
               <InfiniteScroll
-                dataLength={displayedUsers.length ?? 0}
+                dataLength={
+                  /* istanbul ignore next */
+                  displayedUsers.length ?? 0
+                }
                 next={loadMoreUsers}
                 loader={
                   <TableLoader
diff --git a/src/screens/Users/UsersMocks.ts b/src/screens/Users/UsersMocks.ts
index 2ee589fd2f..1ee699429c 100644
--- a/src/screens/Users/UsersMocks.ts
+++ b/src/screens/Users/UsersMocks.ts
@@ -185,6 +185,138 @@ export const MOCKS = [
   },
 ];
 
+export const MOCKS2 = [
+  {
+    request: {
+      query: USER_ORGANIZATION_LIST,
+      variables: { id: 'user1' },
+    },
+    result: {
+      data: {
+        user: {
+          _id: 'user1',
+          userType: 'SUPERADMIN',
+          firstName: 'John',
+          lastName: 'Doe',
+          image: '',
+          email: 'John_Does_Palasidoes@gmail.com',
+          adminFor: [
+            {
+              _id: 1,
+              name: 'Palisadoes',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_LIST,
+      variables: {
+        first: 12,
+        skip: 0,
+        firstName_contains: '',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            _id: 'user1',
+            firstName: 'John',
+            lastName: 'Doe',
+            image: null,
+            email: 'john@example.com',
+            userType: 'SUPERADMIN',
+            adminApproved: true,
+            adminFor: [
+              {
+                _id: '123',
+              },
+            ],
+            createdAt: '20/06/2022',
+            organizationsBlockedBy: [
+              {
+                _id: 'xyz',
+                name: 'ABC',
+                image: null,
+                location: 'Jamaica',
+                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,
+                location: 'Jamaica',
+                createdAt: '20/06/2022',
+                creator: {
+                  _id: '123',
+                  firstName: 'John',
+                  lastName: 'Doe',
+                  image: null,
+                  email: 'john@example.com',
+                  createdAt: '20/06/2022',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    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',
+            location: 'Twin Tower',
+          },
+        ],
+      },
+    },
+  },
+];
+
 export const EMPTY_MOCKS = [
   {
     request: {
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
index 46b911318b..5b3b029af3 100644
--- 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
@@ -26,11 +26,11 @@
 
 ### fetchInstalled
 
-▸ **fetchInstalled**(): `Promise`<`any`\>
+▸ **fetchInstalled**(): `Promise`\<`any`\>
 
 #### Returns
 
-`Promise`<`any`\>
+`Promise`\<`any`\>
 
 #### Defined in
 
@@ -40,11 +40,11 @@ ___
 
 ### fetchStore
 
-▸ **fetchStore**(): `Promise`<`any`\>
+▸ **fetchStore**(): `Promise`\<`any`\>
 
 #### Returns
 
-`Promise`<`any`\>
+`Promise`\<`any`\>
 
 #### Defined in
 
@@ -54,7 +54,7 @@ ___
 
 ### generateLinks
 
-▸ **generateLinks**(`plugins`): { `name`: `string` ; `url`: `string`  }[]
+▸ **generateLinks**(`plugins`): \{ `name`: `string` ; `url`: `string`  \}[]
 
 #### Parameters
 
@@ -64,7 +64,7 @@ ___
 
 #### Returns
 
-{ `name`: `string` ; `url`: `string`  }[]
+\{ `name`: `string` ; `url`: `string`  \}[]
 
 #### Defined in
 
diff --git a/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceAttendeeCheckIn.md b/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceAttendeeCheckIn.md
index b3aff6bcbb..de9645e2ec 100644
--- a/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceAttendeeCheckIn.md
+++ b/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceAttendeeCheckIn.md
@@ -26,7 +26,7 @@ ___
 
 ### checkIn
 
-• **checkIn**: ``null`` \| { `_id`: `string` ; `allotedRoom`: `string` ; `allotedSeat`: `string` ; `time`: `string`  }
+• **checkIn**: ``null`` \| \{ `_id`: `string` ; `allotedRoom`: `string` ; `allotedSeat`: `string` ; `time`: `string`  \}
 
 #### Defined in
 
diff --git a/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceModalProp.md b/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceModalProp.md
index 9091e555bb..847ac48bcf 100644
--- a/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceModalProp.md
+++ b/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceModalProp.md
@@ -26,7 +26,7 @@ ___
 
 ### handleClose
 
-• **handleClose**: () => `void`
+• **handleClose**: () =\> `void`
 
 #### Type declaration
 
diff --git a/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceTableCheckIn.md b/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceTableCheckIn.md
index f44d4747f4..8aaa88f7c8 100644
--- a/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceTableCheckIn.md
+++ b/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceTableCheckIn.md
@@ -18,7 +18,7 @@
 
 ### checkIn
 
-• **checkIn**: ``null`` \| { `_id`: `string` ; `allotedRoom`: `string` ; `allotedSeat`: `string` ; `time`: `string`  }
+• **checkIn**: ``null`` \| \{ `_id`: `string` ; `allotedRoom`: `string` ; `allotedSeat`: `string` ; `time`: `string`  \}
 
 #### Defined in
 
diff --git a/talawa-admin-docs/interfaces/components_LeftDrawerOrg_LeftDrawerOrg.InterfaceLeftDrawerProps.md b/talawa-admin-docs/interfaces/components_LeftDrawerOrg_LeftDrawerOrg.InterfaceLeftDrawerProps.md
index a087afb658..8af04f8ab5 100644
--- a/talawa-admin-docs/interfaces/components_LeftDrawerOrg_LeftDrawerOrg.InterfaceLeftDrawerProps.md
+++ b/talawa-admin-docs/interfaces/components_LeftDrawerOrg_LeftDrawerOrg.InterfaceLeftDrawerProps.md
@@ -48,7 +48,7 @@ ___
 
 ### setHideDrawer
 
-• **setHideDrawer**: `Dispatch`<`SetStateAction`<``null`` \| `boolean`\>\>
+• **setHideDrawer**: `Dispatch`\<`SetStateAction`\<``null`` \| `boolean`\>\>
 
 #### Defined in
 
diff --git a/talawa-admin-docs/interfaces/components_LeftDrawer_LeftDrawer.InterfaceLeftDrawerProps.md b/talawa-admin-docs/interfaces/components_LeftDrawer_LeftDrawer.InterfaceLeftDrawerProps.md
index 8150b80c64..9a9cc6df87 100644
--- a/talawa-admin-docs/interfaces/components_LeftDrawer_LeftDrawer.InterfaceLeftDrawerProps.md
+++ b/talawa-admin-docs/interfaces/components_LeftDrawer_LeftDrawer.InterfaceLeftDrawerProps.md
@@ -36,7 +36,7 @@ ___
 
 ### setHideDrawer
 
-• **setHideDrawer**: `Dispatch`<`SetStateAction`<``null`` \| `boolean`\>\>
+• **setHideDrawer**: `Dispatch`\<`SetStateAction`\<``null`` \| `boolean`\>\>
 
 #### Defined in
 
diff --git a/talawa-admin-docs/modules/components_AddOn_AddOn.default.md b/talawa-admin-docs/modules/components_AddOn_AddOn.default.md
index 1ae4e3dd2e..87e082c6a5 100644
--- a/talawa-admin-docs/modules/components_AddOn_AddOn.default.md
+++ b/talawa-admin-docs/modules/components_AddOn_AddOn.default.md
@@ -22,7 +22,7 @@
 | Name | Type |
 | :------ | :------ |
 | `children` | ``null`` |
-| `extras` | {} |
+| `extras` | \{\} |
 | `name` | `string` |
 
 #### Defined in
@@ -39,9 +39,9 @@ ___
 
 | Name | Type |
 | :------ | :------ |
-| `children` | `Requireable`<`any`\> |
-| `extras` | `Requireable`<`InferProps`<{ `actions`: `Requireable`<`InferProps`<{}\>\> ; `components`: `Requireable`<`InferProps`<{}\>\>  }\>\> |
-| `name` | `Requireable`<`string`\> |
+| `children` | `Requireable`\<`any`\> |
+| `extras` | `Requireable`\<`InferProps`\<\{ `actions`: `Requireable`\<`InferProps`\<\{\}\>\> ; `components`: `Requireable`\<`InferProps`\<\{\}\>\>  \}\>\> |
+| `name` | `Requireable`\<`string`\> |
 
 #### Defined in
 
diff --git a/talawa-admin-docs/modules/components_AddOn_core_AddOnEntry_AddOnEntry.default.md b/talawa-admin-docs/modules/components_AddOn_core_AddOnEntry_AddOnEntry.default.md
index a0331db813..ec8f804295 100644
--- a/talawa-admin-docs/modules/components_AddOn_core_AddOnEntry_AddOnEntry.default.md
+++ b/talawa-admin-docs/modules/components_AddOn_core_AddOnEntry_AddOnEntry.default.md
@@ -41,11 +41,11 @@ ___
 
 | Name | Type |
 | :------ | :------ |
-| `configurable` | `Requireable`<`boolean`\> |
-| `description` | `Requireable`<`string`\> |
-| `enabled` | `Requireable`<`boolean`\> |
-| `isInstalled` | `Requireable`<`boolean`\> |
-| `title` | `Requireable`<`string`\> |
+| `configurable` | `Requireable`\<`boolean`\> |
+| `description` | `Requireable`\<`string`\> |
+| `enabled` | `Requireable`\<`boolean`\> |
+| `isInstalled` | `Requireable`\<`boolean`\> |
+| `title` | `Requireable`\<`string`\> |
 
 #### Defined in
 
diff --git a/talawa-admin-docs/modules/components_AddOn_core_AddOnRegister_AddOnRegister.default.md b/talawa-admin-docs/modules/components_AddOn_core_AddOnRegister_AddOnRegister.default.md
index 07f216c14c..4345c80034 100644
--- a/talawa-admin-docs/modules/components_AddOn_core_AddOnRegister_AddOnRegister.default.md
+++ b/talawa-admin-docs/modules/components_AddOn_core_AddOnRegister_AddOnRegister.default.md
@@ -37,7 +37,7 @@ ___
 
 | Name | Type |
 | :------ | :------ |
-| `createdBy` | `Requireable`<`string`\> |
+| `createdBy` | `Requireable`\<`string`\> |
 
 #### Defined in
 
diff --git a/talawa-admin-docs/modules/components_ChangeLanguageDropdown_ChangeLanguageDropDown.md b/talawa-admin-docs/modules/components_ChangeLanguageDropdown_ChangeLanguageDropDown.md
index 7ce929fecd..3229fe3ed2 100644
--- a/talawa-admin-docs/modules/components_ChangeLanguageDropdown_ChangeLanguageDropDown.md
+++ b/talawa-admin-docs/modules/components_ChangeLanguageDropdown_ChangeLanguageDropDown.md
@@ -13,7 +13,7 @@
 
 ### changeLanguage
 
-▸ **changeLanguage**(`languageCode`): `Promise`<`void`\>
+▸ **changeLanguage**(`languageCode`): `Promise`\<`void`\>
 
 #### Parameters
 
@@ -23,7 +23,7 @@
 
 #### Returns
 
-`Promise`<`void`\>
+`Promise`\<`void`\>
 
 #### Defined in
 
diff --git a/talawa-admin-docs/modules/components_CheckIn_TableRow.md b/talawa-admin-docs/modules/components_CheckIn_TableRow.md
index 34921ffd77..4a61216986 100644
--- a/talawa-admin-docs/modules/components_CheckIn_TableRow.md
+++ b/talawa-admin-docs/modules/components_CheckIn_TableRow.md
@@ -20,7 +20,7 @@
 | :------ | :------ |
 | `«destructured»` | `Object` |
 | › `data` | [`InterfaceTableCheckIn`](../interfaces/components_CheckIn_types.InterfaceTableCheckIn.md) |
-| › `refetch` | () => `void` |
+| › `refetch` | () =\> `void` |
 
 #### Returns
 
diff --git a/talawa-admin-docs/modules/components_CheckIn_mocks.md b/talawa-admin-docs/modules/components_CheckIn_mocks.md
index 67d7a2b123..24fee2ec60 100644
--- a/talawa-admin-docs/modules/components_CheckIn_mocks.md
+++ b/talawa-admin-docs/modules/components_CheckIn_mocks.md
@@ -14,7 +14,7 @@
 
 ### 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' }  }  }  }[]
+• `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
 
@@ -24,7 +24,7 @@ ___
 
 ### checkInMutationUnsuccess
 
-• `Const` **checkInMutationUnsuccess**: { `error`: `Error` ; `request`: { `query`: `DocumentNode` = MARK\_CHECKIN; `variables`: { `allotedRoom`: `string` = ''; `allotedSeat`: `string` = ''; `eventId`: `string` = 'event123'; `userId`: `string` = 'user123' }  }  }[]
+• `Const` **checkInMutationUnsuccess**: \{ `error`: `Error` ; `request`: \{ `query`: `DocumentNode` = MARK\_CHECKIN; `variables`: \{ `allotedRoom`: `string` = ''; `allotedSeat`: `string` = ''; `eventId`: `string` = 'event123'; `userId`: `string` = 'user123' \}  \}  \}[]
 
 #### Defined in
 
@@ -34,7 +34,7 @@ ___
 
 ### checkInQueryMock
 
-• `Const` **checkInQueryMock**: { `request`: { `query`: `DocumentNode` = EVENT\_CHECKINS; `variables`: { `id`: `string` = 'event123' }  } ; `result`: { `data`: [`InterfaceAttendeeQueryResponse`](../interfaces/components_CheckIn_types.InterfaceAttendeeQueryResponse.md) = checkInQueryData }  }[]
+• `Const` **checkInQueryMock**: \{ `request`: \{ `query`: `DocumentNode` = EVENT\_CHECKINS; `variables`: \{ `id`: `string` = 'event123' \}  \} ; `result`: \{ `data`: [`InterfaceAttendeeQueryResponse`](../interfaces/components_CheckIn_types.InterfaceAttendeeQueryResponse.md) = checkInQueryData \}  \}[]
 
 #### Defined in
 
diff --git a/talawa-admin-docs/modules/components_EventCalendar_EventCalendar.md b/talawa-admin-docs/modules/components_EventCalendar_EventCalendar.md
index a6d00af0cb..b8e0171dc7 100644
--- a/talawa-admin-docs/modules/components_EventCalendar_EventCalendar.md
+++ b/talawa-admin-docs/modules/components_EventCalendar_EventCalendar.md
@@ -12,18 +12,18 @@
 
 ### default
 
-▸ **default**(`props`, `context?`): ``null`` \| `ReactElement`<`any`, `any`\>
+▸ **default**(`props`, `context?`): ``null`` \| `ReactElement`\<`any`, `any`\>
 
 #### Parameters
 
 | Name | Type |
 | :------ | :------ |
-| `props` | `PropsWithChildren`<`InterfaceCalendarProps`\> |
+| `props` | `PropsWithChildren`\<`InterfaceCalendarProps`\> |
 | `context?` | `any` |
 
 #### Returns
 
-``null`` \| `ReactElement`<`any`, `any`\>
+``null`` \| `ReactElement`\<`any`, `any`\>
 
 #### Defined in
 
diff --git a/talawa-admin-docs/modules/components_TaskModals_UpdateTaskModal.md b/talawa-admin-docs/modules/components_TaskModals_UpdateTaskModal.md
index 593edf1a85..1f13fe806c 100644
--- a/talawa-admin-docs/modules/components_TaskModals_UpdateTaskModal.md
+++ b/talawa-admin-docs/modules/components_TaskModals_UpdateTaskModal.md
@@ -22,11 +22,11 @@
 
 | Name | Type |
 | :------ | :------ |
-| `handleClose` | () => `void` |
-| `organization` | { `_id`: `string` ; `members`: `InterfaceUser`[]  } |
+| `handleClose` | () =\> `void` |
+| `organization` | \{ `_id`: `string` ; `members`: `InterfaceUser`[]  \} |
 | `organization._id` | `string` |
 | `organization.members` | `InterfaceUser`[] |
-| `refetchData` | () => `void` |
+| `refetchData` | () =\> `void` |
 | `show` | `boolean` |
 | `task` | `InterfaceTask` |
 
diff --git a/talawa-admin-docs/modules/components_UserPasswordUpdate_UserPasswordUpdate.md b/talawa-admin-docs/modules/components_UserPasswordUpdate_UserPasswordUpdate.md
index 8402744885..08f35fd90b 100644
--- a/talawa-admin-docs/modules/components_UserPasswordUpdate_UserPasswordUpdate.md
+++ b/talawa-admin-docs/modules/components_UserPasswordUpdate_UserPasswordUpdate.md
@@ -12,18 +12,18 @@
 
 ### default
 
-▸ **default**(`props`, `context?`): ``null`` \| `ReactElement`<`any`, `any`\>
+▸ **default**(`props`, `context?`): ``null`` \| `ReactElement`\<`any`, `any`\>
 
 #### Parameters
 
 | Name | Type |
 | :------ | :------ |
-| `props` | `PropsWithChildren`<`InterfaceUserPasswordUpdateProps`\> |
+| `props` | `PropsWithChildren`\<`InterfaceUserPasswordUpdateProps`\> |
 | `context?` | `any` |
 
 #### Returns
 
-``null`` \| `ReactElement`<`any`, `any`\>
+``null`` \| `ReactElement`\<`any`, `any`\>
 
 #### Defined in
 
diff --git a/talawa-admin-docs/modules/components_UserUpdate_UserUpdate.md b/talawa-admin-docs/modules/components_UserUpdate_UserUpdate.md
index 4285a73143..5f7d23b6a0 100644
--- a/talawa-admin-docs/modules/components_UserUpdate_UserUpdate.md
+++ b/talawa-admin-docs/modules/components_UserUpdate_UserUpdate.md
@@ -12,18 +12,18 @@
 
 ### default
 
-▸ **default**(`props`, `context?`): ``null`` \| `ReactElement`<`any`, `any`\>
+▸ **default**(`props`, `context?`): ``null`` \| `ReactElement`\<`any`, `any`\>
 
 #### Parameters
 
 | Name | Type |
 | :------ | :------ |
-| `props` | `PropsWithChildren`<`InterfaceUserUpdateProps`\> |
+| `props` | `PropsWithChildren`\<`InterfaceUserUpdateProps`\> |
 | `context?` | `any` |
 
 #### Returns
 
-``null`` \| `ReactElement`<`any`, `any`\>
+``null`` \| `ReactElement`\<`any`, `any`\>
 
 #### Defined in
 
diff --git a/talawa-admin-docs/modules/screens_EventDashboard_EventDashboard_mocks.md b/talawa-admin-docs/modules/screens_EventDashboard_EventDashboard_mocks.md
index d5ef0c33f7..b8d8d3b320 100644
--- a/talawa-admin-docs/modules/screens_EventDashboard_EventDashboard_mocks.md
+++ b/talawa-admin-docs/modules/screens_EventDashboard_EventDashboard_mocks.md
@@ -15,7 +15,7 @@
 
 ### queryMockWithProject
 
-• `Const` **queryMockWithProject**: { `request`: { `query`: `DocumentNode` = EVENT\_DETAILS; `variables`: { `id`: `string` = 'event123' }  } ; `result`: { `data`: { `event`: { `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' }[]  } ; `projects`: { `_id`: `string` = 'project1'; `description`: `string` = 'Project Description 1'; `tasks`: `never`[] = []; `title`: `string` = 'Project 1' }[] ; `startDate`: `string` = '1/1/23'; `startTime`: `string` = '08:00:00'; `title`: `string` = 'Event Title' }  }  }  }[]
+• `Const` **queryMockWithProject**: \{ `request`: \{ `query`: `DocumentNode` = EVENT\_DETAILS; `variables`: \{ `id`: `string` = 'event123' \}  \} ; `result`: \{ `data`: \{ `event`: \{ `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' \}[]  \} ; `projects`: \{ `_id`: `string` = 'project1'; `description`: `string` = 'Project Description 1'; `tasks`: `never`[] = []; `title`: `string` = 'Project 1' \}[] ; `startDate`: `string` = '1/1/23'; `startTime`: `string` = '08:00:00'; `title`: `string` = 'Event Title' \}  \}  \}  \}[]
 
 #### Defined in
 
@@ -25,7 +25,7 @@ ___
 
 ### queryMockWithProjectAndTask
 
-• `Const` **queryMockWithProjectAndTask**: { `request`: { `query`: `DocumentNode` = EVENT\_DETAILS; `variables`: { `id`: `string` = 'event123' }  } ; `result`: { `data`: { `event`: { `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' }[]  } ; `projects`: { `_id`: `string` = 'project1'; `description`: `string` = 'Project Description 1'; `tasks`: { `_id`: `string` = 'task1'; `completed`: `boolean` = false; `deadline`: `string` = '22/12/23'; `description`: `string` = 'Description 1'; `title`: `string` = 'Task 1'; `volunteers`: `never`[] = [] }[] ; `title`: `string` = 'Project 1' }[] ; `startDate`: `string` = '1/1/23'; `startTime`: `string` = '08:00:00'; `title`: `string` = 'Event Title' }  }  }  }[]
+• `Const` **queryMockWithProjectAndTask**: \{ `request`: \{ `query`: `DocumentNode` = EVENT\_DETAILS; `variables`: \{ `id`: `string` = 'event123' \}  \} ; `result`: \{ `data`: \{ `event`: \{ `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' \}[]  \} ; `projects`: \{ `_id`: `string` = 'project1'; `description`: `string` = 'Project Description 1'; `tasks`: \{ `_id`: `string` = 'task1'; `completed`: `boolean` = false; `deadline`: `string` = '22/12/23'; `description`: `string` = 'Description 1'; `title`: `string` = 'Task 1'; `volunteers`: `never`[] = [] \}[] ; `title`: `string` = 'Project 1' \}[] ; `startDate`: `string` = '1/1/23'; `startTime`: `string` = '08:00:00'; `title`: `string` = 'Event Title' \}  \}  \}  \}[]
 
 #### Defined in
 
@@ -35,7 +35,7 @@ ___
 
 ### queryMockWithTime
 
-• `Const` **queryMockWithTime**: { `request`: { `query`: `DocumentNode` = EVENT\_DETAILS; `variables`: { `id`: `string` = 'event123' }  } ; `result`: { `data`: { `event`: { `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' }[]  } ; `projects`: `never`[] = []; `startDate`: `string` = '1/1/23'; `startTime`: `string` = '08:00:00'; `title`: `string` = 'Event Title' }  }  }  }[]
+• `Const` **queryMockWithTime**: \{ `request`: \{ `query`: `DocumentNode` = EVENT\_DETAILS; `variables`: \{ `id`: `string` = 'event123' \}  \} ; `result`: \{ `data`: \{ `event`: \{ `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' \}[]  \} ; `projects`: `never`[] = []; `startDate`: `string` = '1/1/23'; `startTime`: `string` = '08:00:00'; `title`: `string` = 'Event Title' \}  \}  \}  \}[]
 
 #### Defined in
 
@@ -45,7 +45,7 @@ ___
 
 ### queryMockWithoutTime
 
-• `Const` **queryMockWithoutTime**: { `request`: { `query`: `DocumentNode` = EVENT\_DETAILS; `variables`: { `id`: `string` = 'event123' }  } ; `result`: { `data`: { `event`: { `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' }[]  } ; `projects`: `never`[] = []; `startDate`: `string` = '1/1/23'; `startTime`: ``null`` = null; `title`: `string` = 'Event Title' }  }  }  }[]
+• `Const` **queryMockWithoutTime**: \{ `request`: \{ `query`: `DocumentNode` = EVENT\_DETAILS; `variables`: \{ `id`: `string` = 'event123' \}  \} ; `result`: \{ `data`: \{ `event`: \{ `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' \}[]  \} ; `projects`: `never`[] = []; `startDate`: `string` = '1/1/23'; `startTime`: ``null`` = null; `title`: `string` = 'Event Title' \}  \}  \}  \}[]
 
 #### Defined in
 
diff --git a/talawa-admin-docs/modules/screens_MemberDetail_MemberDetail.md b/talawa-admin-docs/modules/screens_MemberDetail_MemberDetail.md
index 775b3e0dcd..7c265792b9 100644
--- a/talawa-admin-docs/modules/screens_MemberDetail_MemberDetail.md
+++ b/talawa-admin-docs/modules/screens_MemberDetail_MemberDetail.md
@@ -14,18 +14,18 @@
 
 ### default
 
-▸ **default**(`props`, `context?`): ``null`` \| `ReactElement`<`any`, `any`\>
+▸ **default**(`props`, `context?`): ``null`` \| `ReactElement`\<`any`, `any`\>
 
 #### Parameters
 
 | Name | Type |
 | :------ | :------ |
-| `props` | `PropsWithChildren`<`MemberDetailProps`\> |
+| `props` | `PropsWithChildren`\<`MemberDetailProps`\> |
 | `context?` | `any` |
 
 #### Returns
 
-``null`` \| `ReactElement`<`any`, `any`\>
+``null`` \| `ReactElement`\<`any`, `any`\>
 
 #### Defined in
 
diff --git a/talawa-admin-docs/modules/screens_OrgList_OrgListMocks.md b/talawa-admin-docs/modules/screens_OrgList_OrgListMocks.md
index 3cee071055..c131c3224e 100644
--- a/talawa-admin-docs/modules/screens_OrgList_OrgListMocks.md
+++ b/talawa-admin-docs/modules/screens_OrgList_OrgListMocks.md
@@ -14,7 +14,7 @@
 
 ### MOCKS
 
-• `Const` **MOCKS**: ({ `request`: { `query`: `DocumentNode` = ORGANIZATION\_CONNECTION\_LIST; `variables?`: `undefined`  } ; `result`: { `data`: { `organizationsConnection`: `InterfaceOrgConnectionInfoType`[] = organizations }  }  } \| { `request`: { `query`: `DocumentNode` = USER\_ORGANIZATION\_LIST; `variables`: { `id`: `string` = '123' }  } ; `result`: { `data`: `InterfaceUserType` = superAdminUser }  })[]
+• `Const` **MOCKS**: (\{ `request`: \{ `query`: `DocumentNode` = ORGANIZATION\_CONNECTION\_LIST; `variables?`: `undefined`  \} ; `result`: \{ `data`: \{ `organizationsConnection`: `InterfaceOrgConnectionInfoType`[] = organizations \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = USER\_ORGANIZATION\_LIST; `variables`: \{ `id`: `string` = '123' \}  \} ; `result`: \{ `data`: `InterfaceUserType` = superAdminUser \}  \})[]
 
 #### Defined in
 
@@ -24,7 +24,7 @@ ___
 
 ### MOCKS\_ADMIN
 
-• `Const` **MOCKS\_ADMIN**: ({ `request`: { `query`: `DocumentNode` = ORGANIZATION\_CONNECTION\_LIST; `variables?`: `undefined`  } ; `result`: { `data`: { `organizationsConnection`: `InterfaceOrgConnectionInfoType`[] = organizations }  }  } \| { `request`: { `query`: `DocumentNode` = USER\_ORGANIZATION\_LIST; `variables`: { `id`: `string` = '123' }  } ; `result`: { `data`: `InterfaceUserType` = adminUser }  })[]
+• `Const` **MOCKS\_ADMIN**: (\{ `request`: \{ `query`: `DocumentNode` = ORGANIZATION\_CONNECTION\_LIST; `variables?`: `undefined`  \} ; `result`: \{ `data`: \{ `organizationsConnection`: `InterfaceOrgConnectionInfoType`[] = organizations \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = USER\_ORGANIZATION\_LIST; `variables`: \{ `id`: `string` = '123' \}  \} ; `result`: \{ `data`: `InterfaceUserType` = adminUser \}  \})[]
 
 #### Defined in
 
@@ -34,7 +34,7 @@ ___
 
 ### MOCKS\_EMPTY
 
-• `Const` **MOCKS\_EMPTY**: ({ `request`: { `query`: `DocumentNode` = ORGANIZATION\_CONNECTION\_LIST; `variables?`: `undefined`  } ; `result`: { `data`: { `organizationsConnection`: `never`[] = [] }  }  } \| { `request`: { `query`: `DocumentNode` = USER\_ORGANIZATION\_LIST; `variables`: { `id`: `string` = '123' }  } ; `result`: { `data`: `InterfaceUserType` = superAdminUser }  })[]
+• `Const` **MOCKS\_EMPTY**: (\{ `request`: \{ `query`: `DocumentNode` = ORGANIZATION\_CONNECTION\_LIST; `variables?`: `undefined`  \} ; `result`: \{ `data`: \{ `organizationsConnection`: `never`[] = [] \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = USER\_ORGANIZATION\_LIST; `variables`: \{ `id`: `string` = '123' \}  \} ; `result`: \{ `data`: `InterfaceUserType` = superAdminUser \}  \})[]
 
 #### Defined in
 
diff --git a/talawa-admin-docs/modules/screens_OrganizationDashboard_OrganizationDashboardMocks.md b/talawa-admin-docs/modules/screens_OrganizationDashboard_OrganizationDashboardMocks.md
index eeee46963b..f14ce241a3 100644
--- a/talawa-admin-docs/modules/screens_OrganizationDashboard_OrganizationDashboardMocks.md
+++ b/talawa-admin-docs/modules/screens_OrganizationDashboard_OrganizationDashboardMocks.md
@@ -14,7 +14,7 @@
 
 ### MOCKS\_NO\_TAGS
 
-• `Const` **MOCKS\_NO\_TAGS**: ({ `request`: { `query`: `DocumentNode` = ORGANIZATIONS\_LIST } ; `result`: { `data`: { `eventsByOrganization?`: `undefined` ; `organizations`: { `_id`: `number` = 1; `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` = ''; `location`: `string` = 'New Delhi'; `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` = 'Dummy Organization'; `spamCount`: { `_id`: `string` = '6954'; `groupchat`: { `_id`: `string` = '321'; `title`: `string` = 'Dummy' } ; `isReaded`: `boolean` = false; `user`: { `_id`: `string` = '878'; `email`: `string` = 'joeroot@gmail.com'; `firstName`: `string` = 'Joe'; `lastName`: `string` = 'Root' }  }[]  }[] ; `postsByOrganization?`: `undefined`  }  }  } \| { `request`: { `query`: `DocumentNode` = ORGANIZATION\_POST\_LIST } ; `result`: { `data`: { `eventsByOrganization?`: `undefined` ; `organizations?`: `undefined` ; `postsByOrganization`: { `_id`: `number` = 1; `creator`: { `_id`: `string` = '583'; `email`: `string` = 'johndoe@gmail.com'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' } ; `imageUrl`: `string` = ''; `text`: `string` = 'Capture Jinchuriki'; `title`: `string` = 'Akatsuki'; `videoUrl`: `string` = '' }[]  }  }  } \| { `request`: { `query`: `DocumentNode` = ORGANIZATION\_EVENT\_LIST } ; `result`: { `data`: { `eventsByOrganization`: { `_id`: `number` = 1; `allDay`: `boolean` = false; `description`: `string` = 'Event Test'; `endDate`: `string` = ''; `endTime`: `string` = '06:00'; `isPublic`: `boolean` = true; `isRegisterable`: `boolean` = true; `location`: `string` = 'New Delhi'; `recurring`: `boolean` = false; `startDate`: `string` = ''; `startTime`: `string` = '02:00'; `title`: `string` = 'Event' }[] ; `organizations?`: `undefined` ; `postsByOrganization?`: `undefined`  }  }  })[]
+• `Const` **MOCKS\_NO\_TAGS**: (\{ `request`: \{ `query`: `DocumentNode` = ORGANIZATIONS\_LIST \} ; `result`: \{ `data`: \{ `eventsByOrganization?`: `undefined` ; `organizations`: \{ `_id`: `number` = 1; `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` = ''; `location`: `string` = 'New Delhi'; `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` = 'Dummy Organization'; `spamCount`: \{ `_id`: `string` = '6954'; `groupchat`: \{ `_id`: `string` = '321'; `title`: `string` = 'Dummy' \} ; `isReaded`: `boolean` = false; `user`: \{ `_id`: `string` = '878'; `email`: `string` = 'joeroot@gmail.com'; `firstName`: `string` = 'Joe'; `lastName`: `string` = 'Root' \}  \}[]  \}[] ; `postsByOrganization?`: `undefined`  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = ORGANIZATION\_POST\_LIST \} ; `result`: \{ `data`: \{ `eventsByOrganization?`: `undefined` ; `organizations?`: `undefined` ; `postsByOrganization`: \{ `_id`: `number` = 1; `creator`: \{ `_id`: `string` = '583'; `email`: `string` = 'johndoe@gmail.com'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' \} ; `imageUrl`: `string` = ''; `text`: `string` = 'Capture Jinchuriki'; `title`: `string` = 'Akatsuki'; `videoUrl`: `string` = '' \}[]  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = ORGANIZATION\_EVENT\_LIST \} ; `result`: \{ `data`: \{ `eventsByOrganization`: \{ `_id`: `number` = 1; `allDay`: `boolean` = false; `description`: `string` = 'Event Test'; `endDate`: `string` = ''; `endTime`: `string` = '06:00'; `isPublic`: `boolean` = true; `isRegisterable`: `boolean` = true; `location`: `string` = 'New Delhi'; `recurring`: `boolean` = false; `startDate`: `string` = ''; `startTime`: `string` = '02:00'; `title`: `string` = 'Event' \}[] ; `organizations?`: `undefined` ; `postsByOrganization?`: `undefined`  \}  \}  \})[]
 
 #### Defined in
 
@@ -24,7 +24,7 @@ ___
 
 ### MOCKS\_WITHOUT\_IMAGE
 
-• `Const` **MOCKS\_WITHOUT\_IMAGE**: ({ `request`: { `query`: `DocumentNode` = ORGANIZATIONS\_LIST } ; `result`: { `data`: { `eventsByOrganization?`: `undefined` ; `organizations`: { `_id`: `number` = 1; `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` = ''; `location`: `string` = 'New Delhi'; `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` = 'Dummy Organization'; `spamCount`: { `_id`: `string` = '6954'; `groupchat`: { `_id`: `string` = '321'; `title`: `string` = 'Dummy' } ; `isReaded`: `boolean` = false; `user`: { `_id`: `string` = '878'; `email`: `string` = 'joeroot@gmail.com'; `firstName`: `string` = 'Joe'; `lastName`: `string` = 'Root' }  }[]  }[] ; `postsByOrganization?`: `undefined` ; `removeOrganization?`: `undefined`  }  }  } \| { `request`: { `query`: `DocumentNode` = ORGANIZATION\_POST\_LIST } ; `result`: { `data`: { `eventsByOrganization?`: `undefined` ; `organizations?`: `undefined` ; `postsByOrganization`: { `_id`: `number` = 1; `creator`: { `_id`: `string` = '583'; `email`: `string` = 'johndoe@gmail.com'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' } ; `imageUrl`: `string` = ''; `text`: `string` = 'Capture Jinchuriki'; `title`: `string` = 'Akatsuki'; `videoUrl`: `string` = '' }[] ; `removeOrganization?`: `undefined`  }  }  } \| { `request`: { `query`: `DocumentNode` = DELETE\_ORGANIZATION\_MUTATION } ; `result`: { `data`: { `eventsByOrganization?`: `undefined` ; `organizations?`: `undefined` ; `postsByOrganization?`: `undefined` ; `removeOrganization`: { `_id`: `number` = 1 }[]  }  }  } \| { `request`: { `query`: `DocumentNode` = ORGANIZATION\_EVENT\_LIST } ; `result`: { `data`: { `eventsByOrganization`: { `_id`: `number` = 1; `allDay`: `boolean` = false; `description`: `string` = 'Event Test'; `endDate`: `string` = ''; `endTime`: `string` = '06:00'; `isPublic`: `boolean` = true; `isRegisterable`: `boolean` = true; `location`: `string` = 'New Delhi'; `recurring`: `boolean` = false; `startDate`: `string` = ''; `startTime`: `string` = '02:00'; `title`: `string` = 'Event' }[] ; `organizations?`: `undefined` ; `postsByOrganization?`: `undefined` ; `removeOrganization?`: `undefined`  }  }  })[]
+• `Const` **MOCKS\_WITHOUT\_IMAGE**: (\{ `request`: \{ `query`: `DocumentNode` = ORGANIZATIONS\_LIST \} ; `result`: \{ `data`: \{ `eventsByOrganization?`: `undefined` ; `organizations`: \{ `_id`: `number` = 1; `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` = ''; `location`: `string` = 'New Delhi'; `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` = 'Dummy Organization'; `spamCount`: \{ `_id`: `string` = '6954'; `groupchat`: \{ `_id`: `string` = '321'; `title`: `string` = 'Dummy' \} ; `isReaded`: `boolean` = false; `user`: \{ `_id`: `string` = '878'; `email`: `string` = 'joeroot@gmail.com'; `firstName`: `string` = 'Joe'; `lastName`: `string` = 'Root' \}  \}[]  \}[] ; `postsByOrganization?`: `undefined` ; `removeOrganization?`: `undefined`  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = ORGANIZATION\_POST\_LIST \} ; `result`: \{ `data`: \{ `eventsByOrganization?`: `undefined` ; `organizations?`: `undefined` ; `postsByOrganization`: \{ `_id`: `number` = 1; `creator`: \{ `_id`: `string` = '583'; `email`: `string` = 'johndoe@gmail.com'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' \} ; `imageUrl`: `string` = ''; `text`: `string` = 'Capture Jinchuriki'; `title`: `string` = 'Akatsuki'; `videoUrl`: `string` = '' \}[] ; `removeOrganization?`: `undefined`  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = DELETE\_ORGANIZATION\_MUTATION \} ; `result`: \{ `data`: \{ `eventsByOrganization?`: `undefined` ; `organizations?`: `undefined` ; `postsByOrganization?`: `undefined` ; `removeOrganization`: \{ `_id`: `number` = 1 \}[]  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = ORGANIZATION\_EVENT\_LIST \} ; `result`: \{ `data`: \{ `eventsByOrganization`: \{ `_id`: `number` = 1; `allDay`: `boolean` = false; `description`: `string` = 'Event Test'; `endDate`: `string` = ''; `endTime`: `string` = '06:00'; `isPublic`: `boolean` = true; `isRegisterable`: `boolean` = true; `location`: `string` = 'New Delhi'; `recurring`: `boolean` = false; `startDate`: `string` = ''; `startTime`: `string` = '02:00'; `title`: `string` = 'Event' \}[] ; `organizations?`: `undefined` ; `postsByOrganization?`: `undefined` ; `removeOrganization?`: `undefined`  \}  \}  \})[]
 
 #### Defined in
 
@@ -34,7 +34,7 @@ ___
 
 ### MOCKS\_WITH\_IMAGE
 
-• `Const` **MOCKS\_WITH\_IMAGE**: ({ `request`: { `query`: `DocumentNode` = ORGANIZATIONS\_LIST } ; `result`: { `data`: { `eventsByOrganization?`: `undefined` ; `organizations`: { `_id`: `number` = 1; `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` = 'https://via.placeholder.com/200x200'; `location`: `string` = 'New Delhi'; `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` = 'Dummy Organization'; `spamCount`: { `_id`: `string` = '6954'; `groupchat`: { `_id`: `string` = '321'; `title`: `string` = 'Dummy' } ; `isReaded`: `boolean` = false; `user`: { `_id`: `string` = '878'; `email`: `string` = 'joeroot@gmail.com'; `firstName`: `string` = 'Joe'; `lastName`: `string` = 'Root' }  }[]  }[] ; `postsByOrganization?`: `undefined`  }  }  } \| { `request`: { `query`: `DocumentNode` = ORGANIZATION\_POST\_LIST } ; `result`: { `data`: { `eventsByOrganization?`: `undefined` ; `organizations?`: `undefined` ; `postsByOrganization`: { `_id`: `number` = 1; `creator`: { `_id`: `string` = '583'; `email`: `string` = 'johndoe@gmail.com'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' } ; `imageUrl`: `string` = ''; `text`: `string` = 'Capture Jinchuriki'; `title`: `string` = 'Akatsuki'; `videoUrl`: `string` = '' }[]  }  }  } \| { `request`: { `query`: `DocumentNode` = ORGANIZATION\_EVENT\_LIST } ; `result`: { `data`: { `eventsByOrganization`: { `_id`: `number` = 1; `allDay`: `boolean` = false; `description`: `string` = 'Event Test'; `endDate`: `string` = ''; `endTime`: `string` = '06:00'; `isPublic`: `boolean` = true; `isRegisterable`: `boolean` = true; `location`: `string` = 'New Delhi'; `recurring`: `boolean` = false; `startDate`: `string` = ''; `startTime`: `string` = '02:00'; `title`: `string` = 'Event' }[] ; `organizations?`: `undefined` ; `postsByOrganization?`: `undefined`  }  }  })[]
+• `Const` **MOCKS\_WITH\_IMAGE**: (\{ `request`: \{ `query`: `DocumentNode` = ORGANIZATIONS\_LIST \} ; `result`: \{ `data`: \{ `eventsByOrganization?`: `undefined` ; `organizations`: \{ `_id`: `number` = 1; `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` = 'https://via.placeholder.com/200x200'; `location`: `string` = 'New Delhi'; `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` = 'Dummy Organization'; `spamCount`: \{ `_id`: `string` = '6954'; `groupchat`: \{ `_id`: `string` = '321'; `title`: `string` = 'Dummy' \} ; `isReaded`: `boolean` = false; `user`: \{ `_id`: `string` = '878'; `email`: `string` = 'joeroot@gmail.com'; `firstName`: `string` = 'Joe'; `lastName`: `string` = 'Root' \}  \}[]  \}[] ; `postsByOrganization?`: `undefined`  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = ORGANIZATION\_POST\_LIST \} ; `result`: \{ `data`: \{ `eventsByOrganization?`: `undefined` ; `organizations?`: `undefined` ; `postsByOrganization`: \{ `_id`: `number` = 1; `creator`: \{ `_id`: `string` = '583'; `email`: `string` = 'johndoe@gmail.com'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' \} ; `imageUrl`: `string` = ''; `text`: `string` = 'Capture Jinchuriki'; `title`: `string` = 'Akatsuki'; `videoUrl`: `string` = '' \}[]  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = ORGANIZATION\_EVENT\_LIST \} ; `result`: \{ `data`: \{ `eventsByOrganization`: \{ `_id`: `number` = 1; `allDay`: `boolean` = false; `description`: `string` = 'Event Test'; `endDate`: `string` = ''; `endTime`: `string` = '06:00'; `isPublic`: `boolean` = true; `isRegisterable`: `boolean` = true; `location`: `string` = 'New Delhi'; `recurring`: `boolean` = false; `startDate`: `string` = ''; `startTime`: `string` = '02:00'; `title`: `string` = 'Event' \}[] ; `organizations?`: `undefined` ; `postsByOrganization?`: `undefined`  \}  \}  \})[]
 
 #### Defined in