401 changed files with 7404 additions and 56757 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -9,4 +9,3 @@ build
 data.db
 app/node_modules
 app/build
-certs/
--- a/.env.sample
+++ b/.env.sample
@ -1,5 +1,16 @@
 ENV=production
 DATABASE_URL=data.db
 DATABASE_TYPE=sqlite
-CUSTOM_ACCESS_TOKEN_SCRIPT="function(user,tokenPayload){var data = tokenPayload;data.extra = {'x-extra-id': user.id};return data;}"
-DISABLE_PLAYGROUND=true
+ADMIN_SECRET=admin
+JWT_SECRET=random_string
+SENDER_EMAIL=info@authorizer.dev
+SMTP_USERNAME=username
+SMTP_PASSWORD=password
+SMTP_HOST=smtp.mailtrap.io
+SMTP_PORT=2525
+JWT_TYPE=HS256
+ROLES=user
+DEFAULT_ROLES=user
+PROTECTED_ROLES=admin
+JWT_ROLE_CLAIM=role
+CUSTOM_ACCESS_TOKEN_SCRIPT=function(user,tokenPayload){var data = tokenPayload;data.extra = {'x-extra-id': user.id};return data;}
--- a/.env.test
+++ b/.env.test
@ -1,15 +0,0 @@
-ENV=test
-DATABASE_URL=test.db
-DATABASE_TYPE=sqlite
-CUSTOM_ACCESS_TOKEN_SCRIPT="function(user,tokenPayload){var data = tokenPayload;data.extra = {'x-extra-id': user.id};return data;}"
-SMTP_HOST=smtp.mailtrap.io
-SMTP_PORT=2525
-SMTP_USERNAME=test
-SMTP_PASSWORD=test
-SENDER_EMAIL="info@authorizer.dev"
-TWILIO_API_KEY=test
-TWILIO_API_SECRET=test
-TWILIO_ACCOUNT_SID=ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-TWILIO_SENDER=909921212112
-SENDER_NAME="Authorizer"
-AWS_REGION=ap-south-1
--- a/.gitea/workflows/main.yml
+++ b/.gitea/workflows/main.yml
@ -1,36 +0,0 @@
-name: "deploy"
-on: [push]
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cloning repo
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-
-      - name: Get Repo Name
-        id: repo_name
-        run: echo "::set-output name=repo::$(echo ${GITHUB_REPOSITORY##*/})"
-
-      - name: Get Branch Name
-        id: branch_name
-        run: echo "::set-output name=branch::$(echo ${GITHUB_REF##*/})"
-
-      - name: Push branch 'discours-dev' to staging
-        if: steps.branch_name.outputs.branch == 'discours-dev'
-        uses: dokku/github-action@master
-        with:
-          branch: "main"
-          git_remote_url: "ssh://dokku@staging.discours.io:22/authorizer"
-          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }}
-
-      - name: Push branch 'discours' to v2.discours.io
-        if: steps.branch_name.outputs.branch == 'discours'
-        uses: dokku/github-action@master
-        with:
-          branch: "main"
-          git_remote_url: "ssh://dokku@v2.discours.io:22/authorizer"
-          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }}
-          git_push_flags: '--force'
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@ -43,32 +43,12 @@ Please ask as many questions as you need, either directly in the issue or on [Di
 ### Project Setup for Authorizer core

 1. Fork the [authorizer](https://github.com/authorizerdev/authorizer) repository (**Skip this step if you have access to repo**)
-2. Clone repo: `git clone https://github.com/authorizerdev/authorizer.git` or use the forked url from step 1
-3. Change directory to authorizer: `cd authorizer`
-4. Create Env file `cp .env.sample .env`. Check all the supported env [here](https://docs.authorizer.dev/core/env/)
-5. Build Dashboard `make build-dashboard`
-6. Build App `make build-app`
-7. Build Server `make clean && make`
-   > Note: if you don't have [`make`](https://www.ibm.com/docs/en/aix/7.2?topic=concepts-make-command), you can `cd` into `server` dir and build using the `go build` command. In that case you will have to build `dashboard` & `app` manually using `npm run build` on both dirs.
-8. Run binary `./build/server`
-
-### Updating GraphQL schema
-
- Modify `server/graph/schema.graphqls` file
- Run `make generate-graphql` this will update the models and required methods
- If a new mutation or query is added
-  - Write the implementation for the new resolver in `server/resolvers/NEW_RESOLVER.GO`
-  - Update `server/graph/schema.resolvers.go` with the new resolver method
-
-### Adding support for new database
-
- Run `make generate-db-template dbname=NEW_DB_NAME`
-  eg `make generate-db-template dbname=dynamodb`
-
-This command will generate a folder in server/db/providers/ with name specified in the above command.
-One will have to implement methods present in that folder.
-
-> Note: Connection for database and schema changes are written in `server/db/providers/DB_NAME/provider.go` > `NewProvider` method is called for any given db based on the env variables present.
+2. `git clone https://github.com/authorizerdev/authorizer.git`
+3. `cd authorizer`
+4. `cp .env.sample .env`. Check all the supported env [here](https://docs.authorizer.dev/core/env/)
+5. Build the code `make clean && make`
+   > Note: if you don't have [`make`](https://www.ibm.com/docs/en/aix/7.2?topic=concepts-make-command), you can `cd` into `server` dir and build using the `go build` command
+6. Run binary `./build/server`

 ### Testing

--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@ -1,3 +0,0 @@
-# These are supported funding model platforms
-
-github: authorizerdev
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@ -1,45 +1,22 @@
 on:
-  workflow_dispatch:
-    inputs:
-      logLevel:
-        description: 'Log level'
-        required: true
-        default: 'warning'
-        type: choice
-        options:
-          - info
-          - warning
-          - debug
-      tags:
-        description: 'Tags'
-        required: false
-        type: boolean
  release:
    types: [created]

 jobs:
  releases:
-    name: Release Authorizer
+    name: Release Authorizer Binary
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '16'
-      - # Add support for more platforms with QEMU (optional)
-        # https://github.com/docker/setup-qemu-action
-        name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
-        with:
-          platforms: linux/amd64,linux/arm64
      - uses: actions/setup-go@v2
        with:
-          go-version: '^1.19.1'
+          go-version: '^1.17.3'
      - name: Install dependencies
        run: |
-          sudo apt-get install build-essential wget zip  libc6-dev-arm64-cross && \
+          sudo apt-get install build-essential wget zip gcc-mingw-w64 && \
          echo "/usr/bin/x86_64-w64-mingw32-gcc" >> GITHUB_PATH && \
          wget --no-check-certificate --progress=dot:mega https://github.com/wangyoucao577/assets-uploader/releases/download/v0.3.0/github-assets-uploader-v0.3.0-linux-amd64.tar.gz -O github-assets-uploader.tar.gz && \
          tar -zxf github-assets-uploader.tar.gz && \
@ -52,28 +29,25 @@ jobs:
        run: whereis go
      - name: Print Go Version
        run: go version
-      - name: Install gox
-        run: go install github.com/mitchellh/gox@latest
      - name: Set VERSION env
        run: echo VERSION=$(basename ${GITHUB_REF}) >> ${GITHUB_ENV}
      - name: Copy .env file
        run: mv .env.sample .env
-      - name: Build package
+      - name: Package files for windows
        run: |
          make clean && \
-          make build && \
-          mkdir -p authorizer-${VERSION}-darwin-arm64/build authorizer-${VERSION}-darwin-arm64/app authorizer-${VERSION}-darwin-arm64/dashboard && cp build/darwin/arm64/server authorizer-${VERSION}-darwin-arm64/build/ && cp .env authorizer-${VERSION}-darwin-arm64/.env && cp -rf app/build authorizer-${VERSION}-darwin-arm64/app/build && cp -rf templates authorizer-${VERSION}-darwin-arm64/ && cp -rf dashboard/build authorizer-${VERSION}-darwin-arm64/dashboard/build && tar cvfz authorizer-${VERSION}-darwin-arm64.tar.gz authorizer-${VERSION}-darwin-arm64 && \
-          mkdir -p authorizer-${VERSION}-darwin-amd64/build authorizer-${VERSION}-darwin-amd64/app authorizer-${VERSION}-darwin-amd64/dashboard && cp build/darwin/amd64/server authorizer-${VERSION}-darwin-amd64/build/ && cp .env authorizer-${VERSION}-darwin-amd64/.env && cp -rf app/build authorizer-${VERSION}-darwin-amd64/app/build && cp -rf templates authorizer-${VERSION}-darwin-amd64/ && cp -rf dashboard/build authorizer-${VERSION}-darwin-amd64/dashboard/build && tar cvfz authorizer-${VERSION}-darwin-amd64.tar.gz authorizer-${VERSION}-darwin-amd64 && \
-          mkdir -p authorizer-${VERSION}-linux-amd64/build authorizer-${VERSION}-linux-amd64/app authorizer-${VERSION}-linux-amd64/dashboard && cp build/linux/amd64/server authorizer-${VERSION}-linux-amd64/build/ && cp .env authorizer-${VERSION}-linux-amd64/.env && cp -rf app/build authorizer-${VERSION}-linux-amd64/app/build && cp -rf templates authorizer-${VERSION}-linux-amd64/ && cp -rf dashboard/build authorizer-${VERSION}-linux-amd64/dashboard/build && tar cvfz authorizer-${VERSION}-linux-amd64.tar.gz authorizer-${VERSION}-linux-amd64 && \
-          mkdir -p authorizer-${VERSION}-linux-arm64/build authorizer-${VERSION}-linux-arm64/app authorizer-${VERSION}-linux-arm64/dashboard && cp build/linux/arm64/server authorizer-${VERSION}-linux-arm64/build/ && cp .env authorizer-${VERSION}-linux-arm64/.env && cp -rf app/build authorizer-${VERSION}-linux-arm64/app/build && cp -rf templates authorizer-${VERSION}-linux-arm64/ && cp -rf dashboard/build authorizer-${VERSION}-linux-arm64/dashboard/build && tar cvfz authorizer-${VERSION}-linux-arm64.tar.gz authorizer-${VERSION}-linux-arm64 && \
-          mkdir -p authorizer-${VERSION}-windows-amd64/build authorizer-${VERSION}-windows-amd64/app authorizer-${VERSION}-windows-amd64/dashboard && cp build/windows/amd64/server.exe authorizer-${VERSION}-windows-amd64/build/ && cp .env authorizer-${VERSION}-windows-amd64/.env && cp -rf app/build authorizer-${VERSION}-windows-amd64/app/build && cp -rf templates authorizer-${VERSION}-windows-amd64/ && cp -rf dashboard/build authorizer-${VERSION}-windows-amd64/dashboard/build && zip -vr authorizer-${VERSION}-windows-amd64.zip authorizer-${VERSION}-windows-amd64
+          CGO_ENABLED=1 GOOS=windows CC=/usr/bin/x86_64-w64-mingw32-gcc make && \
+          mv build/server build/server.exe && \
+          zip -vr authorizer-${VERSION}-windows-amd64.zip .env app/build build templates dashboard/build
+      - name: Package files for linux
+        run: |
+          make clean && \
+          CGO_ENABLED=1 make && \
+          tar cvfz authorizer-${VERSION}-linux-amd64.tar.gz .env app/build build templates dashboard/build
      - name: Upload assets
        run: |
-          github-assets-uploader -f authorizer-${VERSION}-darwin-arm64.tar.gz -mediatype application/gzip -repo authorizerdev/authorizer -token ${{secrets.RELEASE_TOKEN}} -tag ${VERSION}
-          github-assets-uploader -f authorizer-${VERSION}-darwin-amd64.tar.gz -mediatype application/gzip -repo authorizerdev/authorizer -token ${{secrets.RELEASE_TOKEN}} -tag ${VERSION}
+          github-assets-uploader -f authorizer-${VERSION}-windows-amd64.zip -mediatype application/zip -repo authorizerdev/authorizer -token ${{secrets.RELEASE_TOKEN}} -tag ${VERSION} && \
          github-assets-uploader -f authorizer-${VERSION}-linux-amd64.tar.gz -mediatype application/gzip -repo authorizerdev/authorizer -token ${{secrets.RELEASE_TOKEN}} -tag ${VERSION}
-          github-assets-uploader -f authorizer-${VERSION}-linux-arm64.tar.gz -mediatype application/gzip -repo authorizerdev/authorizer -token ${{secrets.RELEASE_TOKEN}} -tag ${VERSION}
-          github-assets-uploader -f authorizer-${VERSION}-windows-amd64.zip -mediatype application/zip -repo authorizerdev/authorizer -token ${{secrets.RELEASE_TOKEN}} -tag ${VERSION}
      - name: Log in to Docker Hub
        uses: docker/login-action@v1
        with:
@ -85,11 +59,6 @@ jobs:
        uses: docker/metadata-action@v3
        with:
          images: lakhansamani/authorizer
-          tags: |
-            type=schedule
-            type=ref,event=branch
-            type=ref,event=tag
-            type=ref,event=pr

      - name: Build and push Docker image
        uses: docker/build-push-action@v2
@ -98,6 +67,5 @@ jobs:
          push: true
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
-          platforms: linux/amd64,linux/arm64
          build-args: |
            VERSION=${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.version'] }}
--- a/.gitignore
+++ b/.gitignore
@ -8,15 +8,6 @@ dashboard/build
 build
 .env
 data.db
-test.db
 .DS_Store
 .env.local
 *.tar.gz
-.vscode/
-.yalc
-yalc.lock
-certs/
-*-shm
-*-wal
-.idea
-*.iml
--- a/18
+++ b/18
@ -1,4 +1,4 @@
-FROM golang:1.21.3-alpine3.18 AS go-builder
+FROM golang:1.17-alpine as go-builder
 WORKDIR /authorizer
 COPY server server
 COPY Makefile .
@ -11,7 +11,7 @@ RUN apk add build-base &&\
    make clean && make && \
    chmod 777 build/server

-FROM node:20-alpine3.18 AS node-builder
+FROM node:17-alpine3.12 as node-builder
 WORKDIR /authorizer
 COPY app app
 COPY dashboard dashboard
@ -20,16 +20,12 @@ RUN apk add build-base &&\
    make build-app && \
    make build-dashboard

-FROM alpine:3.18
-RUN adduser -D -h /authorizer -u 1000 -k /dev/null authorizer
-WORKDIR /authorizer
+FROM alpine:latest
+WORKDIR /root/
 RUN mkdir app dashboard
-COPY --from=node-builder --chown=nobody:nobody /authorizer/app/build app/build
-COPY --from=node-builder --chown=nobody:nobody /authorizer/app/favicon_io app/favicon_io
-COPY --from=node-builder --chown=nobody:nobody /authorizer/dashboard/build dashboard/build
-COPY --from=node-builder --chown=nobody:nobody /authorizer/dashboard/favicon_io dashboard/favicon_io
-COPY --from=go-builder --chown=nobody:nobody /authorizer/build build
+COPY --from=node-builder /authorizer/app/build app/build
+COPY --from=node-builder /authorizer/dashboard/build dashboard/build
+COPY --from=go-builder /authorizer/build build
 COPY templates templates
 EXPOSE 8080
-USER authorizer
 CMD [ "./build/server" ]
--- a/48
+++ b/48
@ -3,12 +3,6 @@ VERSION := $(or $(VERSION),$(DEFAULT_VERSION))

 cmd:
 	cd server && go build -ldflags "-w -X main.VERSION=$(VERSION)" -o '../build/server'
-build:
-	cd server && gox \
-		-osarch="linux/amd64 linux/arm64 darwin/arm64 darwin/amd64 windows/amd64" \
-		-ldflags "-w -X main.VERSION=$(VERSION)" \
-		-output="../build/{{.OS}}/{{.Arch}}/server" \
-		./...
 build-app:
 	cd app && npm i && npm run build
 build-dashboard:
@ -16,44 +10,4 @@ build-dashboard:
 clean:
 	rm -rf build
 test:
-	rm -rf server/test/test.db server/test/test.db-shm server/test/test.db-wal && rm -rf test.db test.db-shm test.db-wal && cd server && go clean --testcache && TEST_DBS="sqlite" go test -p 1 -v ./test
-test-mongodb:
-	docker run -d --name authorizer_mongodb_db -p 27017:27017 mongo:4.4.15
-	cd server && go clean --testcache && TEST_DBS="mongodb" go test -p 1 -v ./test
-	docker rm -vf authorizer_mongodb_db
-test-scylladb:
-	docker run -d --name authorizer_scylla_db -p 9042:9042 scylladb/scylla
-	cd server && go clean --testcache && TEST_DBS="scylladb" go test -p 1 -v ./test
-	docker rm -vf authorizer_scylla_db
-test-arangodb:
-	docker run -d --name authorizer_arangodb -p 8529:8529 -e ARANGO_NO_AUTH=1 arangodb/arangodb:3.10.3
-	cd server && go clean --testcache && TEST_DBS="arangodb" go test -p 1 -v ./test
-	docker rm -vf authorizer_arangodb
-test-dynamodb:
-	docker run -d --name dynamodb-local-test  -p 8000:8000 amazon/dynamodb-local:latest
-	cd server && go clean --testcache && TEST_DBS="dynamodb" go test -p 1 -v ./test
-	docker rm -vf dynamodb-local-test
-test-couchbase:
-	docker run -d --name couchbase-local-test  -p 8091-8097:8091-8097 -p 11210:11210 -p 11207:11207 -p 18091-18095:18091-18095 -p 18096:18096 -p 18097:18097 couchbase:latest
-	sh scripts/couchbase-test.sh
-	cd server && go clean --testcache && TEST_DBS="couchbase" go test -p 1 -v ./test
-	docker rm -vf couchbase-local-test
-test-all-db:
-	rm -rf server/test/test.db server/test/test.db-shm server/test/test.db-wal && rm -rf test.db test.db-shm test.db-wal
-	docker run -d --name authorizer_scylla_db -p 9042:9042 scylladb/scylla
-	docker run -d --name authorizer_mongodb_db -p 27017:27017 mongo:4.4.15
-	docker run -d --name authorizer_arangodb -p 8529:8529 -e ARANGO_NO_AUTH=1 arangodb/arangodb:3.10.3
-	docker run -d --name dynamodb-local-test  -p 8000:8000 amazon/dynamodb-local:latest
-	docker run -d --name couchbase-local-test  -p 8091-8097:8091-8097 -p 11210:11210 -p 11207:11207 -p 18091-18095:18091-18095 -p 18096:18096 -p 18097:18097 couchbase:latest
-	sh scripts/couchbase-test.sh
-	cd server && go clean --testcache && TEST_DBS="sqlite,mongodb,arangodb,scylladb,dynamodb,couchbase" go test -p 1 -v ./test
-	docker rm -vf authorizer_scylla_db
-	docker rm -vf authorizer_mongodb_db
-	docker rm -vf authorizer_arangodb
-	docker rm -vf dynamodb-local-test
-	docker rm -vf couchbase-local-test
-generate-graphql:
-	cd server && go run github.com/99designs/gqlgen generate && go mod tidy
-generate-db-template:
-	cp -rf server/db/providers/provider_template server/db/providers/${dbname}
-	find server/db/providers/${dbname} -type f -exec sed -i -e 's/provider_template/${dbname}/g' {} \;
+	cd server && go clean --testcache && go test -v ./test
--- a/README.md
+++ b/README.md
@ -1,48 +1,50 @@
 <p align="center">
  <a href="https://authorizer.dev">
-    <img alt="Logo" src="https://authorizer.dev/images/logo.png" width="60" />
+    <img alt="Logo" src="https://github.com/authorizerdev/authorizer/blob/main/assets/logo.png" width="60" />
  </a>
 </p>
 <h1 align="center">
  Authorizer
 </h1>

-**Authorizer** is an open-source authentication and authorization solution for your applications. Bring your database and have complete control over the user information. You can self-host authorizer instances and connect to any database (Currently supports 11+ databases including [Postgres](https://www.postgresql.org/), [MySQL](https://www.mysql.com/), [SQLite](https://www.sqlite.org/index.html), [SQLServer](https://www.microsoft.com/en-us/sql-server/), [YugaByte](https://www.yugabyte.com/),  [MariaDB](https://mariadb.org/), [PlanetScale](https://planetscale.com/), [CassandraDB](https://cassandra.apache.org/_/index.html), [ScyllaDB](https://www.scylladb.com/), [MongoDB](https://mongodb.com/), [ArangoDB](https://www.arangodb.com/)).
+**Authorizer** is an open-source authentication and authorization solution for your applications. Bring your database and have complete control over the user information. You can self-host authorizer instances and connect to any database (Currently supports [Postgres](https://www.postgresql.org/), [MySQL](https://www.mysql.com/), [SQLite](https://www.sqlite.org/index.html), [SQLServer](https://www.microsoft.com/en-us/sql-server/), [MongoDB](https://mongodb.com/),[ArangoDB](https://www.arangodb.com/)).

-For more information check:
+## Table of contents

+- [Introduction](#introduction)
+- [Getting Started](#getting-started)
+- [Contributing](https://github.com/authorizerdev/authorizer/blob/main/.github/CONTRIBUTING.md)
 - [Docs](http://docs.authorizer.dev/)
- [Discord Community](https://discord.gg/Zv2D5h6kkK)
- [Contributing Guide](https://github.com/authorizerdev/authorizer/blob/main/.github/CONTRIBUTING.md)
+- [Join Community](https://discord.gg/Zv2D5h6kkK)

 # Introduction

-<img src="https://docs.authorizer.dev/images/authorizer-arch.png" style="height:20em"/>
+<img src="https://github.com/authorizerdev/authorizer/blob/main/assets/authorizer-architecture.png" style="height:20em"/>

 #### We offer the following functionality

 - ✅ Sign-in / Sign-up with email ID and password
 - ✅ Secure session management
 - ✅ Email verification
- ✅ OAuth2 and OpenID compatible APIs
 - ✅ APIs to update profile securely
 - ✅ Forgot password flow using email
- ✅ Social logins (Google, Github, Facebook, LinkedIn, Apple more coming soon)
+- ✅ Social logins (Google, Github, Facebook, more coming soon)
 - ✅ Role-based access management
- ✅ Password-less login with magic link login
- ✅ Multi factor authentication
- ✅ Email templating
- ✅ Webhooks
+- ✅ Password-less login with email and magic link

 ## Roadmap

- [VueJS SDK](https://github.com/authorizerdev/authorizer-vue)
- [Svelte SDK](https://github.com/authorizerdev/authorizer-svelte)
- [Golang SDK](https://github.com/authorizerdev/authorizer-go)
+- Support more JWT encryption algorithms (Currently supporting HS256)
+- 2 Factor authentication
+- Back office (Admin dashboard to manage user)
+- Support more database
+- VueJS SDK
+- Svelte SDK
 - React Native SDK
 - Flutter SDK
 - Android Native SDK
 - iOS native SDK
+- Golang SDK
 - Python SDK
 - PHP SDK
 - WordPress plugin
@ -57,44 +59,33 @@ For more information check:

 # Getting Started

-## Step 1: Get Authorizer Instance
-
-### Deploy Production Ready Instance
-
-Deploy production ready Authorizer instance using one click deployment options available below
-
-| **Infra provider** |                                                                                            **One-click link**                                                                                            |               **Additional information**               |
-| :----------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------: |
-|    Railway.app     |                    <a href="https://railway.app/new/template/nwXp1C?referralCode=FEF4uT"><img src="https://railway.app/button.svg" style="height: 44px" alt="Deploy on Railway"></a>                     | [docs](https://docs.authorizer.dev/deployment/railway) |
-|       Heroku       | <a href="https://heroku.com/deploy?template=https://github.com/authorizerdev/authorizer-heroku"><img src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy to Heroku" style="height: 44px;"></a> | [docs](https://docs.authorizer.dev/deployment/heroku)  |
-|       Render       |                     [![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/authorizerdev/authorizer-render)                      | [docs](https://docs.authorizer.dev/deployment/render)  |
-|       Koyeb       | <a target="_blank" href="https://app.koyeb.com/deploy?name=authorizer&type=docker&image=docker.io/lakhansamani/authorizer&env[PORT]=8000&env[DATABASE_TYPE]=postgres&env[DATABASE_URL]=CHANGE_ME&ports=8000;http;/"><img alt="Deploy to Koyeb" src="https://www.koyeb.com/static/images/deploy/button.svg" /></a> | [docs](https://docs.authorizer.dev/deployment/koyeb)  |
-|     RepoCloud     | <a href="https://repocloud.io/details/?app_id=174"><img src="https://d16t0pc4846x52.cloudfront.net/deploy.png" alt="Deploy on RepoCloud"></a> | [docs](https://repocloud.io/details/?app_id=174) |
-
-### Deploy Authorizer Using Source Code
+## Trying out Authorizer

 This guide helps you practice using Authorizer to evaluate it before you use it in a production environment. It includes instructions for installing the Authorizer server in local or standalone mode.

-#### Install using source code
+- [Install using source code](#install-using-source-code)
+- [Install using binaries](#install-using-binaries)
+- [Install instance on heroku](#install-instance-on-Heroku)
+- [Install instance on railway.app](#install-instance-on-railway)

-#### Prerequisites
+## Install using source code
+
+### Prerequisites

 - OS: Linux or macOS or windows
 - Go: (Golang)(https://golang.org/dl/) >= v1.15

-#### Project Setup
+### Project Setup

 1. Fork the [authorizer](https://github.com/authorizerdev/authorizer) repository (**Skip this step if you have access to repo**)
-2. Clone repo: `git clone https://github.com/authorizerdev/authorizer.git` or use the forked url from step 1
-3. Change directory to authorizer: `cd authorizer`
-4. Create Env file `cp .env.sample .env`. Check all the supported env [here](https://docs.authorizer.dev/core/env/)
-5. Build Dashboard `make build-dashboard`
-6. Build App `make build-app`
-7. Build Server `make clean && make`
-   > Note: if you don't have [`make`](https://www.ibm.com/docs/en/aix/7.2?topic=concepts-make-command), you can `cd` into `server` dir and build using the `go build` command. In that case you will have to build `dashboard` & `app` manually using `npm run build` on both dirs.
-8. Run binary `./build/server`
+2. `git clone https://github.com/authorizerdev/authorizer.git`
+3. `cd authorizer`
+4. `cp .env.sample .env`. Check all the supported env [here](https://docs.authorizer.dev/core/env/)
+5. Build the code `make clean && make`
+   > Note: if you don't have [`make`](https://www.ibm.com/docs/en/aix/7.2?topic=concepts-make-command), you can `cd` into `server` dir and build using the `go build` command
+6. Run binary `./build/server`

-### Deploy Authorizer using binaries
+## Install using binaries

 Deploy / Try Authorizer using binaries. With each [Authorizer Release](https://github.com/authorizerdev/authorizer/releases)
 binaries are baked with required deployment files and bundled. You can download a specific version of it for the following operating systems:
@ -102,7 +93,7 @@ binaries are baked with required deployment files and bundled. You can download
 - Mac OSX
 - Linux

-#### Download and unzip bundle
+### Step 1: Download and unzip bundle

 - Download the Bundle for the specific OS from the [release page](https://github.com/authorizerdev/authorizer/releases)

@ -122,7 +113,11 @@ binaries are baked with required deployment files and bundled. You can download
  cd authorizer
  ```

-#### Step 3: Start Authorizer
+### Step 2: Configure environment variables
+
+Required environment variables are pre-configured in `.env` file. But based on the production requirements, please configure more environment variables. You can refer to [environment variables docs](/core/env) for more information.
+
+### Step 3: Start Authorizer

 - Run following command to start authorizer

@ -134,20 +129,25 @@ binaries are baked with required deployment files and bundled. You can download

 > Note: For mac users, you might have to give binary the permission to execute. Here is the command you can use to grant permission `xattr -d com.apple.quarantine build/server`

-## Step 2: Setup Instance
+## Install instance on Heroku

- Open authorizer instance endpoint in browser
- Sign up as an admin with a secure password
- Configure environment variables from authorizer dashboard. Check env [docs](/core/env) for more information
+Deploy Authorizer using [heroku](https://github.com/authorizerdev/authorizer-heroku) and quickly play with it in 30seconds
+<br/><br/>
+[![Deploy to Heroku](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/authorizerdev/authorizer-heroku)

-> Note: `DATABASE_URL`, `DATABASE_TYPE` and `DATABASE_NAME` are only configurable via platform envs
+# Install instance on railway
+
+Deploy production ready Authorizer instance using [railway.app](https://github.com/authorizerdev/authorizer-railway) with postgres and redis for free and build with it in 30seconds
+<br/>
+
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template?template=https%3A%2F%2Fgithub.com%2Fauthorizerdev%2Fauthorizer-railway&plugins=postgresql%2Credis&envs=ENV%2CDATABASE_TYPE%2CADMIN_SECRET%2CCOOKIE_NAME%2CJWT_ROLE_CLAIM%2CJWT_TYPE%2CJWT_SECRET%2CFACEBOOK_CLIENT_ID%2CFACEBOOK_CLIENT_SECRET%2CGOOGLE_CLIENT_ID%2CGOOGLE_CLIENT_SECRET%2CGITHUB_CLIENT_ID%2CGITHUB_CLIENT_SECRET%2CALLOWED_ORIGINS%2CROLES%2CPROTECTED_ROLES%2CDEFAULT_ROLES&optionalEnvs=FACEBOOK_CLIENT_ID%2CFACEBOOK_CLIENT_SECRET%2CGOOGLE_CLIENT_ID%2CGOOGLE_CLIENT_SECRET%2CGITHUB_CLIENT_ID%2CGITHUB_CLIENT_SECRET%2CALLOWED_ORIGINS%2CROLES%2CPROTECTED_ROLES%2CDEFAULT_ROLES&ENVDesc=Deployment+environment&DATABASE_TYPEDesc=With+railway+we+are+deploying+postgres+db&ADMIN_SECRETDesc=Secret+to+access+the+admin+apis&COOKIE_NAMEDesc=Name+of+http+only+cookie+that+will+be+used+as+session&FACEBOOK_CLIENT_IDDesc=Facebook+client+ID+for+facebook+login&FACEBOOK_CLIENT_SECRETDesc=Facebook+client+secret+for+facebook+login&GOOGLE_CLIENT_IDDesc=Google+client+ID+for+google+login&GOOGLE_CLIENT_SECRETDesc=Google+client+secret+for+google+login&GITHUB_CLIENT_IDDesc=Github+client+ID+for+github+login&GITHUB_CLIENT_SECRETDesc=Github+client+secret+for+github+login&ALLOWED_ORIGINSDesc=Whitelist+the+URL+for+which+this+instance+of+authorizer+is+allowed&ROLESDesc=Comma+separated+list+of+roles+that+platform+supports.+Default+role+is+user&PROTECTED_ROLESDesc=Comma+separated+list+of+protected+roles+for+which+sign-up+is+disabled&DEFAULT_ROLESDesc=Default+role+that+should+be+assigned+to+user.+It+should+be+one+from+the+list+of+%60ROLES%60+env.+Default+role+is+user&JWT_ROLE_CLAIMDesc=JWT+key+to+be+used+to+validate+the+role+field.&JWT_TYPEDesc=JWT+encryption+type&JWT_SECRETDesc=Random+string+that+will+be+used+for+encrypting+the+JWT+token&ENVDefault=PRODUCTION&DATABASE_TYPEDefault=postgres&COOKIE_NAMEDefault=authorizer&JWT_TYPEDefault=HS256&JWT_ROLE_CLAIMDefault=role)

 ### Things to consider

 - For social logins, you will need respective social platform key and secret
 - For having verified users, you will need an SMTP server with an email address and password using which system can send emails. The system will send a verification link to an email address. Once an email is verified then, only able to access it.
  > Note: One can always disable the email verification to allow open sign up, which is not recommended for production as anyone can use anyone's email address 😅
- For persisting user sessions, you will need Redis URL (not in case of railway app). If you do not configure a Redis server, sessions will be persisted until the instance is up or not restarted. For better response time on authorization requests/middleware, we recommend deploying Redis on the same infra/network as your authorizer server.
+- For persisting user sessions, you will need Redis URL (not in case of railway.app). If you do not configure a Redis server, sessions will be persisted until the instance is up or not restarted. For better response time on authorization requests/middleware, we recommend deploying Redis on the same infra/network as your authorizer server.

 ## Testing

@ -166,9 +166,8 @@ This example demonstrates how you can use [`@authorizerdev/authorizer-js`](/auth

 <script type="text/javascript">
 	const authorizerRef = new authorizerdev.Authorizer({
-		authorizerURL: `YOUR_AUTHORIZER_INSTANCE_URL`,
+		authorizerURL: `AUTHORIZER_URL`,
 		redirectURL: window.location.origin,
-		clientID: 'YOUR_CLIENT_ID', // obtain your client id from authorizer dashboard
 	});

 	// use the button selector as per your application
@ -179,19 +178,15 @@ This example demonstrates how you can use [`@authorizerdev/authorizer-js`](/auth
 	});

 	async function onLoad() {
-		const res = await authorizerRef.authorize({
-			response_type: 'code',
-			use_refresh_token: false,
-		});
-		if (res && res.access_token) {
+		const res = await authorizerRef.browserLogin();
+		if (res && res.user) {
 			// you can use user information here, eg:
-			const user = await authorizerRef.getProfile({
-				Authorization: `Bearer ${res.access_token}`,
-			});
+			/**
      const userSection = document.getElementById('user');
      const logoutSection = document.getElementById('logout-section');
      logoutSection.classList.toggle('hide');
-			userSection.innerHTML = `Welcome, ${user.email}`;
+      userSection.innerHTML = `Welcome, ${res.user.email}`;
+      */
 		}
 	}
 	onLoad();
--- a/TODO.md
+++ b/TODO.md
@ -1,16 +1,5 @@
 # Task List

-## Implement better way of handling jwt tokens
-
-Check: https://hasura.io/blog/best-practices-of-using-jwt-with-graphql/#server-side-rendering-ssr
-
- [x] Set finger print in response cookie (https://github.com/hasura/jwt-guide/blob/60a7a86146d604fc48a799fffdee712be1c52cd0/lib/setFingerprintCookieAndSignJwt.ts#L8)
- [x] Save refresh token in session store
- [x] refresh token should be made more secure with the help of secure token rotation. Every time new token is requested new refresh token should be generated
- [x] Return jwt in response
- [x] To get session send finger print and refresh token [if they are valid -> a new access token is generated and sent to user]
- [x] Refresh token should be long living token (refresh token + finger print hash should be verified)
-
 ## Open ID compatible claims and schema

 - [x] Rename `schema.graphqls` and re generate schema
--- a/app/.prettierrc.json
+++ b/app/.prettierrc.json
@ -1,6 +0,0 @@
-{
-	"tabWidth": 2,
-	"singleQuote": true,
-	"trailingComma": "all",
-	"useTabs": true
-}
--- a/app/favicon_io/android-chrome-192x192.png
+++ b/app/favicon_io/android-chrome-192x192.png
--- a/app/favicon_io/android-chrome-512x512.png
+++ b/app/favicon_io/android-chrome-512x512.png
--- a/app/favicon_io/apple-touch-icon.png
+++ b/app/favicon_io/apple-touch-icon.png
--- a/app/favicon_io/favicon-16x16.png
+++ b/app/favicon_io/favicon-16x16.png
--- a/app/favicon_io/favicon-32x32.png
+++ b/app/favicon_io/favicon-32x32.png
--- a/app/favicon_io/favicon.ico
+++ b/app/favicon_io/favicon.ico
--- a/app/package-lock.json
+++ b/app/package-lock.json
--- a/app/package.json
+++ b/app/package.json
@ -5,14 +5,13 @@
 	"main": "index.js",
 	"scripts": {
 		"build": "rm -rf build && NODE_ENV=production node ./esbuild.config.js",
-		"start": "NODE_ENV=development node ./esbuild.config.js",
-		"format": "prettier --write 'src/**/*.(ts|tsx|js|jsx)'"
+		"start": "NODE_ENV=development node ./esbuild.config.js"
 	},
 	"keywords": [],
 	"author": "Lakhan Samani",
 	"license": "ISC",
 	"dependencies": {
-		"@authorizerdev/authorizer-react": "^1.3.2",
+		"@authorizerdev/authorizer-react": "latest",
 		"@types/react": "^17.0.15",
 		"@types/react-dom": "^17.0.9",
 		"esbuild": "^0.12.17",
@ -20,12 +19,9 @@
 		"react-dom": "^17.0.2",
 		"react-is": "^17.0.2",
 		"react-router-dom": "^5.2.0",
-		"styled-components": "^5.3.0",
 		"typescript": "^4.3.5"
 	},
 	"devDependencies": {
-		"@types/react-router-dom": "^5.1.8",
-		"@types/styled-components": "^5.1.11",
-		"prettier": "2.7.1"
+		"@types/react-router-dom": "^5.1.8"
 	}
 }
--- a/app/pnpm-lock.yaml
+++ b/app/pnpm-lock.yaml
@ -1,626 +0,0 @@
-lockfileVersion: 5.4
-
-specifiers:
-  '@authorizerdev/authorizer-react': ^1.1.9
-  '@types/react': ^17.0.15
-  '@types/react-dom': ^17.0.9
-  '@types/react-router-dom': ^5.1.8
-  '@types/styled-components': ^5.1.11
-  esbuild: ^0.12.17
-  prettier: 2.7.1
-  react: ^17.0.2
-  react-dom: ^17.0.2
-  react-is: ^17.0.2
-  react-router-dom: ^5.2.0
-  styled-components: ^5.3.0
-  typescript: ^4.3.5
-
-dependencies:
-  '@authorizerdev/authorizer-react': 1.1.9_react@17.0.2
-  '@types/react': 17.0.53
-  '@types/react-dom': 17.0.19
-  esbuild: 0.12.29
-  react: 17.0.2
-  react-dom: 17.0.2_react@17.0.2
-  react-is: 17.0.2
-  react-router-dom: 5.3.4_react@17.0.2
-  styled-components: 5.3.9_fane7jikarojcev26y27hpbhu4
-  typescript: 4.9.5
-
-devDependencies:
-  '@types/react-router-dom': 5.3.3
-  '@types/styled-components': 5.1.26
-  prettier: 2.7.1
-
-packages:
-
-  /@authorizerdev/authorizer-js/1.2.1:
-    resolution: {integrity: sha512-/nFARvsHyZUsGFKrcYi8hgpnbThYR/NMJ2BJdQpWy/x7QsBnfLeCChBYWncbYHSIjFCa5PPKKfvhXM56HqVqsw==}
-    engines: {node: '>=10'}
-    dependencies:
-      cross-fetch: 3.1.5
-    transitivePeerDependencies:
-      - encoding
-    dev: false
-
-  /@authorizerdev/authorizer-react/1.1.9_react@17.0.2:
-    resolution: {integrity: sha512-BlB4ixEm9nf+yjZ9OqIWbx5fMTmzeByEsNDAd5iYkt6HB+3Sk53DGiO5h6SgJznzPyqAwl8yg6y/QgbZreDTFA==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      react: '>=16'
-    dependencies:
-      '@authorizerdev/authorizer-js': 1.2.1
-      react: 17.0.2
-    transitivePeerDependencies:
-      - encoding
-    dev: false
-
-  /@babel/code-frame/7.18.6:
-    resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/highlight': 7.18.6
-    dev: false
-
-  /@babel/generator/7.21.3:
-    resolution: {integrity: sha512-QS3iR1GYC/YGUnW7IdggFeN5c1poPUurnGttOV/bZgPGV+izC/D8HnD6DLwod0fsatNyVn1G3EVWMYIF0nHbeA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.21.3
-      '@jridgewell/gen-mapping': 0.3.2
-      '@jridgewell/trace-mapping': 0.3.17
-      jsesc: 2.5.2
-    dev: false
-
-  /@babel/helper-annotate-as-pure/7.18.6:
-    resolution: {integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.21.3
-    dev: false
-
-  /@babel/helper-environment-visitor/7.18.9:
-    resolution: {integrity: sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==}
-    engines: {node: '>=6.9.0'}
-    dev: false
-
-  /@babel/helper-function-name/7.21.0:
-    resolution: {integrity: sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/template': 7.20.7
-      '@babel/types': 7.21.3
-    dev: false
-
-  /@babel/helper-hoist-variables/7.18.6:
-    resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.21.3
-    dev: false
-
-  /@babel/helper-module-imports/7.18.6:
-    resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.21.3
-    dev: false
-
-  /@babel/helper-split-export-declaration/7.18.6:
-    resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.21.3
-    dev: false
-
-  /@babel/helper-string-parser/7.19.4:
-    resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
-    engines: {node: '>=6.9.0'}
-    dev: false
-
-  /@babel/helper-validator-identifier/7.19.1:
-    resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
-    engines: {node: '>=6.9.0'}
-    dev: false
-
-  /@babel/highlight/7.18.6:
-    resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-validator-identifier': 7.19.1
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-    dev: false
-
-  /@babel/parser/7.21.3:
-    resolution: {integrity: sha512-lobG0d7aOfQRXh8AyklEAgZGvA4FShxo6xQbUrrT/cNBPUdIDojlokwJsQyCC/eKia7ifqM0yP+2DRZ4WKw2RQ==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.21.3
-    dev: false
-
-  /@babel/runtime/7.21.0:
-    resolution: {integrity: sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      regenerator-runtime: 0.13.11
-    dev: false
-
-  /@babel/template/7.20.7:
-    resolution: {integrity: sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.18.6
-      '@babel/parser': 7.21.3
-      '@babel/types': 7.21.3
-    dev: false
-
-  /@babel/traverse/7.21.3_supports-color@5.5.0:
-    resolution: {integrity: sha512-XLyopNeaTancVitYZe2MlUEvgKb6YVVPXzofHgqHijCImG33b/uTurMS488ht/Hbsb2XK3U2BnSTxKVNGV3nGQ==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.18.6
-      '@babel/generator': 7.21.3
-      '@babel/helper-environment-visitor': 7.18.9
-      '@babel/helper-function-name': 7.21.0
-      '@babel/helper-hoist-variables': 7.18.6
-      '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/parser': 7.21.3
-      '@babel/types': 7.21.3
-      debug: 4.3.4_supports-color@5.5.0
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@babel/types/7.21.3:
-    resolution: {integrity: sha512-sBGdETxC+/M4o/zKC0sl6sjWv62WFR/uzxrJ6uYyMLZOUlPnwzw0tKgVHOXxaAd5l2g8pEDM5RZ495GPQI77kg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-string-parser': 7.19.4
-      '@babel/helper-validator-identifier': 7.19.1
-      to-fast-properties: 2.0.0
-    dev: false
-
-  /@emotion/is-prop-valid/1.2.0:
-    resolution: {integrity: sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==}
-    dependencies:
-      '@emotion/memoize': 0.8.0
-    dev: false
-
-  /@emotion/memoize/0.8.0:
-    resolution: {integrity: sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==}
-    dev: false
-
-  /@emotion/stylis/0.8.5:
-    resolution: {integrity: sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==}
-    dev: false
-
-  /@emotion/unitless/0.7.5:
-    resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
-    dev: false
-
-  /@jridgewell/gen-mapping/0.3.2:
-    resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.14
-      '@jridgewell/trace-mapping': 0.3.17
-    dev: false
-
-  /@jridgewell/resolve-uri/3.1.0:
-    resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
-    engines: {node: '>=6.0.0'}
-    dev: false
-
-  /@jridgewell/set-array/1.1.2:
-    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
-    engines: {node: '>=6.0.0'}
-    dev: false
-
-  /@jridgewell/sourcemap-codec/1.4.14:
-    resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
-    dev: false
-
-  /@jridgewell/trace-mapping/0.3.17:
-    resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==}
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.0
-      '@jridgewell/sourcemap-codec': 1.4.14
-    dev: false
-
-  /@types/history/4.7.11:
-    resolution: {integrity: sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==}
-    dev: true
-
-  /@types/hoist-non-react-statics/3.3.1:
-    resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==}
-    dependencies:
-      '@types/react': 17.0.53
-      hoist-non-react-statics: 3.3.2
-    dev: true
-
-  /@types/prop-types/15.7.5:
-    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
-
-  /@types/react-dom/17.0.19:
-    resolution: {integrity: sha512-PiYG40pnQRdPHnlf7tZnp0aQ6q9tspYr72vD61saO6zFCybLfMqwUCN0va1/P+86DXn18ZWeW30Bk7xlC5eEAQ==}
-    dependencies:
-      '@types/react': 17.0.53
-    dev: false
-
-  /@types/react-router-dom/5.3.3:
-    resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==}
-    dependencies:
-      '@types/history': 4.7.11
-      '@types/react': 17.0.53
-      '@types/react-router': 5.1.20
-    dev: true
-
-  /@types/react-router/5.1.20:
-    resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==}
-    dependencies:
-      '@types/history': 4.7.11
-      '@types/react': 17.0.53
-    dev: true
-
-  /@types/react/17.0.53:
-    resolution: {integrity: sha512-1yIpQR2zdYu1Z/dc1OxC+MA6GR240u3gcnP4l6mvj/PJiVaqHsQPmWttsvHsfnhfPbU2FuGmo0wSITPygjBmsw==}
-    dependencies:
-      '@types/prop-types': 15.7.5
-      '@types/scheduler': 0.16.3
-      csstype: 3.1.1
-
-  /@types/scheduler/0.16.3:
-    resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
-
-  /@types/styled-components/5.1.26:
-    resolution: {integrity: sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==}
-    dependencies:
-      '@types/hoist-non-react-statics': 3.3.1
-      '@types/react': 17.0.53
-      csstype: 3.1.1
-    dev: true
-
-  /ansi-styles/3.2.1:
-    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
-    engines: {node: '>=4'}
-    dependencies:
-      color-convert: 1.9.3
-    dev: false
-
-  /babel-plugin-styled-components/2.0.7_styled-components@5.3.9:
-    resolution: {integrity: sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==}
-    peerDependencies:
-      styled-components: '>= 2'
-    dependencies:
-      '@babel/helper-annotate-as-pure': 7.18.6
-      '@babel/helper-module-imports': 7.18.6
-      babel-plugin-syntax-jsx: 6.18.0
-      lodash: 4.17.21
-      picomatch: 2.3.1
-      styled-components: 5.3.9_fane7jikarojcev26y27hpbhu4
-    dev: false
-
-  /babel-plugin-syntax-jsx/6.18.0:
-    resolution: {integrity: sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==}
-    dev: false
-
-  /camelize/1.0.1:
-    resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
-    dev: false
-
-  /chalk/2.4.2:
-    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
-    engines: {node: '>=4'}
-    dependencies:
-      ansi-styles: 3.2.1
-      escape-string-regexp: 1.0.5
-      supports-color: 5.5.0
-    dev: false
-
-  /color-convert/1.9.3:
-    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
-    dependencies:
-      color-name: 1.1.3
-    dev: false
-
-  /color-name/1.1.3:
-    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
-    dev: false
-
-  /cross-fetch/3.1.5:
-    resolution: {integrity: sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==}
-    dependencies:
-      node-fetch: 2.6.7
-    transitivePeerDependencies:
-      - encoding
-    dev: false
-
-  /css-color-keywords/1.0.0:
-    resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /css-to-react-native/3.2.0:
-    resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==}
-    dependencies:
-      camelize: 1.0.1
-      css-color-keywords: 1.0.0
-      postcss-value-parser: 4.2.0
-    dev: false
-
-  /csstype/3.1.1:
-    resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
-
-  /debug/4.3.4_supports-color@5.5.0:
-    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.2
-      supports-color: 5.5.0
-    dev: false
-
-  /esbuild/0.12.29:
-    resolution: {integrity: sha512-w/XuoBCSwepyiZtIRsKsetiLDUVGPVw1E/R3VTFSecIy8UR7Cq3SOtwKHJMFoVqqVG36aGkzh4e8BvpO1Fdc7g==}
-    hasBin: true
-    requiresBuild: true
-    dev: false
-
-  /escape-string-regexp/1.0.5:
-    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
-    engines: {node: '>=0.8.0'}
-    dev: false
-
-  /globals/11.12.0:
-    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /has-flag/3.0.0:
-    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /history/4.10.1:
-    resolution: {integrity: sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==}
-    dependencies:
-      '@babel/runtime': 7.21.0
-      loose-envify: 1.4.0
-      resolve-pathname: 3.0.0
-      tiny-invariant: 1.3.1
-      tiny-warning: 1.0.3
-      value-equal: 1.0.1
-    dev: false
-
-  /hoist-non-react-statics/3.3.2:
-    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
-    dependencies:
-      react-is: 16.13.1
-
-  /isarray/0.0.1:
-    resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
-    dev: false
-
-  /js-tokens/4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-    dev: false
-
-  /jsesc/2.5.2:
-    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
-    engines: {node: '>=4'}
-    hasBin: true
-    dev: false
-
-  /lodash/4.17.21:
-    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
-    dev: false
-
-  /loose-envify/1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
-    dependencies:
-      js-tokens: 4.0.0
-    dev: false
-
-  /ms/2.1.2:
-    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: false
-
-  /node-fetch/2.6.7:
-    resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
-    engines: {node: 4.x || >=6.0.0}
-    peerDependencies:
-      encoding: ^0.1.0
-    peerDependenciesMeta:
-      encoding:
-        optional: true
-    dependencies:
-      whatwg-url: 5.0.0
-    dev: false
-
-  /object-assign/4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /path-to-regexp/1.8.0:
-    resolution: {integrity: sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==}
-    dependencies:
-      isarray: 0.0.1
-    dev: false
-
-  /picomatch/2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
-    engines: {node: '>=8.6'}
-    dev: false
-
-  /postcss-value-parser/4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: false
-
-  /prettier/2.7.1:
-    resolution: {integrity: sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==}
-    engines: {node: '>=10.13.0'}
-    hasBin: true
-    dev: true
-
-  /prop-types/15.8.1:
-    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-      react-is: 16.13.1
-    dev: false
-
-  /react-dom/17.0.2_react@17.0.2:
-    resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==}
-    peerDependencies:
-      react: 17.0.2
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-      react: 17.0.2
-      scheduler: 0.20.2
-    dev: false
-
-  /react-is/16.13.1:
-    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
-
-  /react-is/17.0.2:
-    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
-    dev: false
-
-  /react-router-dom/5.3.4_react@17.0.2:
-    resolution: {integrity: sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==}
-    peerDependencies:
-      react: '>=15'
-    dependencies:
-      '@babel/runtime': 7.21.0
-      history: 4.10.1
-      loose-envify: 1.4.0
-      prop-types: 15.8.1
-      react: 17.0.2
-      react-router: 5.3.4_react@17.0.2
-      tiny-invariant: 1.3.1
-      tiny-warning: 1.0.3
-    dev: false
-
-  /react-router/5.3.4_react@17.0.2:
-    resolution: {integrity: sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==}
-    peerDependencies:
-      react: '>=15'
-    dependencies:
-      '@babel/runtime': 7.21.0
-      history: 4.10.1
-      hoist-non-react-statics: 3.3.2
-      loose-envify: 1.4.0
-      path-to-regexp: 1.8.0
-      prop-types: 15.8.1
-      react: 17.0.2
-      react-is: 16.13.1
-      tiny-invariant: 1.3.1
-      tiny-warning: 1.0.3
-    dev: false
-
-  /react/17.0.2:
-    resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-    dev: false
-
-  /regenerator-runtime/0.13.11:
-    resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
-    dev: false
-
-  /resolve-pathname/3.0.0:
-    resolution: {integrity: sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==}
-    dev: false
-
-  /scheduler/0.20.2:
-    resolution: {integrity: sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==}
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-    dev: false
-
-  /shallowequal/1.1.0:
-    resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
-    dev: false
-
-  /styled-components/5.3.9_fane7jikarojcev26y27hpbhu4:
-    resolution: {integrity: sha512-Aj3kb13B75DQBo2oRwRa/APdB5rSmwUfN5exyarpX+x/tlM/rwZA2vVk2vQgVSP6WKaZJHWwiFrzgHt+CLtB4A==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      react: '>= 16.8.0'
-      react-dom: '>= 16.8.0'
-      react-is: '>= 16.8.0'
-    dependencies:
-      '@babel/helper-module-imports': 7.18.6
-      '@babel/traverse': 7.21.3_supports-color@5.5.0
-      '@emotion/is-prop-valid': 1.2.0
-      '@emotion/stylis': 0.8.5
-      '@emotion/unitless': 0.7.5
-      babel-plugin-styled-components: 2.0.7_styled-components@5.3.9
-      css-to-react-native: 3.2.0
-      hoist-non-react-statics: 3.3.2
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-      react-is: 17.0.2
-      shallowequal: 1.1.0
-      supports-color: 5.5.0
-    dev: false
-
-  /supports-color/5.5.0:
-    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
-    engines: {node: '>=4'}
-    dependencies:
-      has-flag: 3.0.0
-    dev: false
-
-  /tiny-invariant/1.3.1:
-    resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==}
-    dev: false
-
-  /tiny-warning/1.0.3:
-    resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
-    dev: false
-
-  /to-fast-properties/2.0.0:
-    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
-    engines: {node: '>=4'}
-    dev: false
-
-  /tr46/0.0.3:
-    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
-    dev: false
-
-  /typescript/4.9.5:
-    resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==}
-    engines: {node: '>=4.2.0'}
-    hasBin: true
-    dev: false
-
-  /value-equal/1.0.1:
-    resolution: {integrity: sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==}
-    dev: false
-
-  /webidl-conversions/3.0.1:
-    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
-    dev: false
-
-  /whatwg-url/5.0.0:
-    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
-    dependencies:
-      tr46: 0.0.3
-      webidl-conversions: 3.0.1
-    dev: false
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@ -2,37 +2,10 @@ import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { AuthorizerProvider } from '@authorizerdev/authorizer-react';
 import Root from './Root';
-import { createRandomString } from './utils/common';
-
-declare global {
-	interface Window {
-		__authorizer__: any;
-	}
-}

 export default function App() {
-	const searchParams = new URLSearchParams(window.location.search);
-	const state = searchParams.get('state') || createRandomString();
-	const scope = searchParams.get('scope')
-		? searchParams.get('scope')?.toString().split(' ')
-		: `openid profile email`;
-
-	const urlProps: Record<string, any> = {
-		state,
-		scope,
-	};
-
-	const redirectURL =
-		searchParams.get('redirect_uri') || searchParams.get('redirectURL');
-	if (redirectURL) {
-		urlProps.redirectURL = redirectURL;
-	} else {
-		urlProps.redirectURL = window.location.href;
-	}
-	const globalState: Record<string, string> = {
-		...window['__authorizer__'],
-		...urlProps,
-	};
+	// @ts-ignore
+	const globalState: Record<string, string> = window['__authorizer__'];
 	return (
 		<div
 			style={{
@ -53,11 +26,19 @@ export default function App() {
 				<img
 					src={`${globalState.organizationLogo}`}
 					alt="logo"
-					style={{ height: 60, objectFit: 'cover' }}
+					style={{ height: 60, width: 60, objectFit: 'cover' }}
 				/>
 				<h1>{globalState.organizationName}</h1>
 			</div>
-			<div className="container">
+			<div
+				style={{
+					width: 400,
+					margin: `10px auto`,
+					border: `1px solid #D1D5DB`,
+					padding: `25px 20px`,
+					borderRadius: 5,
+				}}
+			>
 				<BrowserRouter>
 					<AuthorizerProvider
 						config={{
@ -65,7 +46,7 @@ export default function App() {
 							redirectURL: globalState.redirectURL,
 						}}
 					>
-						<Root globalState={globalState} />
+						<Root />
 					</AuthorizerProvider>
 				</BrowserRouter>
 			</div>
--- a/app/src/Root.tsx
+++ b/app/src/Root.tsx
@ -1,94 +1,23 @@
 import React, { useEffect, lazy, Suspense } from 'react';
 import { Switch, Route } from 'react-router-dom';
 import { useAuthorizer } from '@authorizerdev/authorizer-react';
-import styled, { ThemeProvider } from 'styled-components';
-import SetupPassword from './pages/setup-password';
-import { hasWindow, createRandomString } from './utils/common';
-import { theme } from './theme';

 const ResetPassword = lazy(() => import('./pages/rest-password'));
 const Login = lazy(() => import('./pages/login'));
 const Dashboard = lazy(() => import('./pages/dashboard'));
-const SignUp = lazy(() => import('./pages/signup'));

-const Wrapper = styled.div`
-	font-family: ${(props) => props.theme.fonts.fontStack};
-	color: ${(props) => props.theme.colors.textColor};
-	font-size: ${(props) => props.theme.fonts.mediumText};
-	box-sizing: border-box;
-
-	*,
-	*:before,
-	*:after {
-		box-sizing: inherit;
-	}
-`;
-
-export default function Root({
-	globalState,
-}: {
-	globalState: Record<string, string>;
-}) {
+export default function Root() {
 	const { token, loading, config } = useAuthorizer();

-	const searchParams = new URLSearchParams(
-		hasWindow() ? window.location.search : ``,
-	);
-	const state = searchParams.get('state') || createRandomString();
-	const scope = searchParams.get('scope')
-		? searchParams.get('scope')?.toString().split(' ')
-		: ['openid', 'profile', 'email'];
-	const code = searchParams.get('code') || '';
-	const nonce = searchParams.get('nonce') || '';
-
-	const urlProps: Record<string, any> = {
-		state,
-		scope,
-	};
-
-	const redirectURL =
-		searchParams.get('redirect_uri') || searchParams.get('redirectURL');
-	if (redirectURL) {
-		urlProps.redirectURL = redirectURL;
-	} else {
-		urlProps.redirectURL = hasWindow() ? window.location.origin : redirectURL;
-	}
-
-	urlProps.redirect_uri = urlProps.redirectURL;
-
 	useEffect(() => {
 		if (token) {
-			let redirectURL = config.redirectURL || '/app';
-			// let params = `access_token=${token.access_token}&id_token=${token.id_token}&expires_in=${token.expires_in}&state=${globalState.state}`;
-			// Note: If OIDC breaks in the future, use the above params
-			let params = `state=${globalState.state}`;
-
-			if (code !== '') {
-				params += `&code=${code}`;
-			}
-
-			if (nonce !== '') {
-				params += `&nonce=${nonce}`;
-			}
-
-			if (token.refresh_token) {
-				params += `&refresh_token=${token.refresh_token}`;
-			}
-
-			const url = new URL(redirectURL);
-			if (redirectURL.includes('?')) {
-				redirectURL = `${redirectURL}&${params}`;
-			} else {
-				redirectURL = `${redirectURL}?${params}`;
-			}
-
+			const url = new URL(config.redirectURL || '/app');
 			if (url.origin !== window.location.origin) {
-				sessionStorage.removeItem('authorizer_state');
-				window.location.replace(redirectURL);
+				window.location.href = config.redirectURL || '/app';
 			}
 		}
 		return () => {};
-	}, [token, config]);
+	}, [token]);

 	if (loading) {
 		return <h1>Loading...</h1>;
@ -108,24 +37,14 @@ export default function Root({

 	return (
 		<Suspense fallback={<></>}>
-			<ThemeProvider theme={theme}>
-				<Wrapper>
 			<Switch>
 				<Route path="/app" exact>
-							<Login urlProps={urlProps} />
-						</Route>
-						<Route path="/app/signup">
-							<SignUp urlProps={urlProps} />
+					<Login />
 				</Route>
 				<Route path="/app/reset-password">
 					<ResetPassword />
 				</Route>
-						<Route path="/app/setup-password">
-							<SetupPassword />
-						</Route>
 			</Switch>
-				</Wrapper>
-			</ThemeProvider>
 		</Suspense>
 	);
 }
--- a/app/src/index.css
+++ b/app/src/index.css
@ -1,5 +1,5 @@
 body {
-	margin: 10;
+	margin: 0;
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 		'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 		sans-serif;
@ -14,17 +14,3 @@ body {
 *:after {
 	box-sizing: inherit;
 }
-
-.container {
-	box-sizing: content-box;
-	border: 1px solid #d1d5db;
-	padding: 25px 20px;
-	border-radius: 5px;
-}
-
-@media only screen and (min-width: 768px) {
-	.container {
-		width: 400px;
-		margin: 0 auto;
-	}
-}
--- a/app/src/pages/dashboard.tsx
+++ b/app/src/pages/dashboard.tsx
@ -15,7 +15,7 @@ export default function Dashboard() {
 	return (
 		<div>
 			<h1>Hey 👋,</h1>
-			<p>Thank you for using authorizer.</p>
+			<p>Thank you for joining authorizer demo app.</p>
 			<p>
 				Your email address is{' '}
 				<a href={`mailto:${user?.email}`} style={{ color: '#3B82F6' }}>
--- a/app/src/pages/login.tsx
+++ b/app/src/pages/login.tsx
@ -1,98 +1,10 @@
-import React, { Fragment, useState } from 'react';
-import {
-	AuthorizerBasicAuthLogin,
-	AuthorizerForgotPassword,
-	AuthorizerMagicLinkLogin,
-	AuthorizerSocialLogin,
-	useAuthorizer,
-} from '@authorizerdev/authorizer-react';
-import styled from 'styled-components';
-import { Link } from 'react-router-dom';
+import React, { Fragment } from 'react';
+import { Authorizer } from '@authorizerdev/authorizer-react';

-const enum VIEW_TYPES {
-	LOGIN = 'login',
-	FORGOT_PASSWORD = 'forgot-password',
-}
-
-const Footer = styled.div`
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin-top: 15px;
-`;
-
-const FooterContent = styled.div`
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	margin-top: 10px;
-`;
-
-export default function Login({ urlProps }: { urlProps: Record<string, any> }) {
-	const { config } = useAuthorizer();
-	const [view, setView] = useState<VIEW_TYPES>(VIEW_TYPES.LOGIN);
-	const isBasicAuth = config.is_basic_authentication_enabled;
+export default function Login() {
 	return (
 		<Fragment>
-			{view === VIEW_TYPES.LOGIN && (
-				<Fragment>
-					<h1 style={{ textAlign: 'center' }}>Login</h1>
-					<AuthorizerSocialLogin urlProps={urlProps} />
-					<br />
-					{(config.is_basic_authentication_enabled ||
-						config.is_mobile_basic_authentication_enabled) &&
-						!config.is_magic_link_login_enabled && (
-							<AuthorizerBasicAuthLogin urlProps={urlProps} />
-						)}
-					{config.is_magic_link_login_enabled && (
-						<AuthorizerMagicLinkLogin urlProps={urlProps} />
-					)}
-					{(config.is_basic_authentication_enabled ||
-						config.is_mobile_basic_authentication_enabled) &&
-						!config.is_magic_link_login_enabled && (
-							<Footer>
-								<Link
-									to="#"
-									onClick={() => setView(VIEW_TYPES.FORGOT_PASSWORD)}
-									style={{ marginBottom: 10 }}
-								>
-									Forgot Password?
-								</Link>
-							</Footer>
-						)}
-				</Fragment>
-			)}
-			{view === VIEW_TYPES.FORGOT_PASSWORD && (
-				<Fragment>
-					<h1 style={{ textAlign: 'center' }}>Forgot Password</h1>
-					<AuthorizerForgotPassword
-						urlProps={{
-							...urlProps,
-							redirect_uri: `${window.location.origin}/app/reset-password`,
-						}}
-						onPasswordReset={() => {
-							setView(VIEW_TYPES.LOGIN);
-						}}
-					/>
-					<Footer>
-						<Link
-							to="#"
-							onClick={() => setView(VIEW_TYPES.LOGIN)}
-							style={{ marginBottom: 10 }}
-						>
-							Back
-						</Link>
-					</Footer>
-				</Fragment>
-			)}
-			{config.is_basic_authentication_enabled &&
-				!config.is_magic_link_login_enabled &&
-				config.is_sign_up_enabled && (
-					<FooterContent>
-						Don't have an account? &nbsp; <Link to="/app/signup"> Sign Up</Link>
-					</FooterContent>
-				)}
+			<Authorizer />
 		</Fragment>
 	);
 }
--- a/app/src/pages/setup-password.tsx
+++ b/app/src/pages/setup-password.tsx
@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { AuthorizerResetPassword } from '@authorizerdev/authorizer-react';
-
-export default function SetupPassword() {
-	return (
-		<Fragment>
-			<h1 style={{ textAlign: 'center' }}>Setup new Password</h1>
-			<br />
-			<AuthorizerResetPassword />
-		</Fragment>
-	);
-}
--- a/app/src/pages/signup.tsx
+++ b/app/src/pages/signup.tsx
@ -1,29 +0,0 @@
-import React, { Fragment } from 'react';
-import { AuthorizerSignup, AuthorizerSocialLogin } from '@authorizerdev/authorizer-react';
-import styled from 'styled-components';
-import { Link } from 'react-router-dom';
-
-const FooterContent = styled.div`
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	margin-top: 20px;
-`;
-
-export default function SignUp({
-	urlProps,
-}: {
-	urlProps: Record<string, any>;
-}) {
-	return (
-		<Fragment>
-			<h1 style={{ textAlign: 'center' }}>Sign Up</h1>
-			<br />
-            <AuthorizerSocialLogin urlProps={urlProps} />
-			<AuthorizerSignup urlProps={urlProps} />
-			<FooterContent>
-				Already have an account? <Link to="/app"> Login</Link>
-			</FooterContent>
-		</Fragment>
-	);
-}
--- a/app/src/theme.ts
+++ b/app/src/theme.ts
@ -1,28 +0,0 @@
-// colors: https://tailwindcss.com/docs/customizing-colors
-
-export const theme = {
-	colors: {
-		primary: '#3B82F6',
-		primaryDisabled: '#60A5FA',
-		gray: '#D1D5DB',
-		danger: '#DC2626',
-		success: '#10B981',
-		textColor: '#374151',
-	},
-	fonts: {
-		// typography
-		fontStack: '-apple-system, system-ui, sans-serif',
-
-		// font sizes
-		largeText: '18px',
-		mediumText: '14px',
-		smallText: '12px',
-		tinyText: '10px',
-	},
-
-	radius: {
-		card: '5px',
-		button: '5px',
-		input: '5px',
-	},
-};
--- a/app/src/utils/common.ts
+++ b/app/src/utils/common.ts
@ -1,24 +0,0 @@
-export const getCrypto = () => {
-	//ie 11.x uses msCrypto
-	return (window.crypto || (window as any).msCrypto) as Crypto;
-};
-
-export const createRandomString = () => {
-	const charset =
-		'0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_~.';
-	let random = '';
-	const randomValues = Array.from(
-		getCrypto().getRandomValues(new Uint8Array(43)),
-	);
-	randomValues.forEach((v) => (random += charset[v % charset.length]));
-	return random;
-};
-
-export const createQueryParams = (params: any) => {
-	return Object.keys(params)
-		.filter((k) => typeof params[k] !== 'undefined')
-		.map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
-		.join('&');
-};
-
-export const hasWindow = (): boolean => typeof window !== 'undefined';
--- a/app/yarn.lock
+++ b/app/yarn.lock
@ -1,619 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@authorizerdev/authorizer-js@^2.0.3":
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-2.0.3.tgz"
-  integrity sha512-uencwr3Ea8mwfxVKDFf2ITRCRSmzvua+O2voRuiWQORtRQTgZQjkN3M+IEkEj+WP9M1iFIl+NDgzECsp8ptC/A==
-  dependencies:
-    cross-fetch "^3.1.5"
-
-"@authorizerdev/authorizer-react@^1.3.2":
-  version "1.3.2"
-  resolved "https://registry.npmjs.org/@authorizerdev/authorizer-react/-/authorizer-react-1.3.2.tgz"
-  integrity sha512-3kMAygHBCa8Fc9Oo0lz1k88r+Pd6kx1PSn3NMYLwxQXy2jRt4xWn7iuGn+SDGFs3DzofaN71I61gRwQ+6dO1rw==
-  dependencies:
-    "@authorizerdev/authorizer-js" "^2.0.3"
-    validator "^13.11.0"
-
-"@babel/code-frame@^7.22.13":
-  version "7.22.13"
-  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz"
-  integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
-  dependencies:
-    "@babel/highlight" "^7.22.13"
-    chalk "^2.4.2"
-
-"@babel/generator@^7.23.0":
-  version "7.23.0"
-  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz"
-  integrity sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==
-  dependencies:
-    "@babel/types" "^7.23.0"
-    "@jridgewell/gen-mapping" "^0.3.2"
-    "@jridgewell/trace-mapping" "^0.3.17"
-    jsesc "^2.5.1"
-
-"@babel/helper-annotate-as-pure@^7.16.0":
-  version "7.16.7"
-  resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz"
-  integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==
-  dependencies:
-    "@babel/types" "^7.16.7"
-
-"@babel/helper-environment-visitor@^7.22.20":
-  version "7.22.20"
-  resolved "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz"
-  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
-
-"@babel/helper-function-name@^7.23.0":
-  version "7.23.0"
-  resolved "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz"
-  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
-  dependencies:
-    "@babel/template" "^7.22.15"
-    "@babel/types" "^7.23.0"
-
-"@babel/helper-hoist-variables@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz"
-  integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
-  dependencies:
-    "@babel/types" "^7.22.5"
-
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0":
-  version "7.16.7"
-  resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz"
-  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
-  dependencies:
-    "@babel/types" "^7.16.7"
-
-"@babel/helper-split-export-declaration@^7.22.6":
-  version "7.22.6"
-  resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz"
-  integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
-  dependencies:
-    "@babel/types" "^7.22.5"
-
-"@babel/helper-string-parser@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz"
-  integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
-
-"@babel/helper-validator-identifier@^7.22.20":
-  version "7.22.20"
-  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz"
-  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
-
-"@babel/highlight@^7.22.13":
-  version "7.22.20"
-  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz"
-  integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.22.20"
-    chalk "^2.4.2"
-    js-tokens "^4.0.0"
-
-"@babel/parser@^7.22.15", "@babel/parser@^7.23.0":
-  version "7.23.0"
-  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz"
-  integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==
-
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1":
-  version "7.14.8"
-  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz"
-  integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
-"@babel/template@^7.22.15":
-  version "7.22.15"
-  resolved "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz"
-  integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
-  dependencies:
-    "@babel/code-frame" "^7.22.13"
-    "@babel/parser" "^7.22.15"
-    "@babel/types" "^7.22.15"
-
-"@babel/traverse@^7.4.5":
-  version "7.23.2"
-  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz"
-  integrity sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==
-  dependencies:
-    "@babel/code-frame" "^7.22.13"
-    "@babel/generator" "^7.23.0"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-hoist-variables" "^7.22.5"
-    "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/parser" "^7.23.0"
-    "@babel/types" "^7.23.0"
-    debug "^4.1.0"
-    globals "^11.1.0"
-
-"@babel/types@^7.16.7", "@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0":
-  version "7.23.0"
-  resolved "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz"
-  integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==
-  dependencies:
-    "@babel/helper-string-parser" "^7.22.5"
-    "@babel/helper-validator-identifier" "^7.22.20"
-    to-fast-properties "^2.0.0"
-
-"@emotion/is-prop-valid@^0.8.8":
-  version "0.8.8"
-  resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz"
-  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
-  dependencies:
-    "@emotion/memoize" "0.7.4"
-
-"@emotion/memoize@0.7.4":
-  version "0.7.4"
-  resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz"
-  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
-
-"@emotion/stylis@^0.8.4":
-  version "0.8.5"
-  resolved "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz"
-  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
-
-"@emotion/unitless@^0.7.4":
-  version "0.7.5"
-  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
-  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
-
-"@jridgewell/gen-mapping@^0.3.2":
-  version "0.3.3"
-  resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz"
-  integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==
-  dependencies:
-    "@jridgewell/set-array" "^1.0.1"
-    "@jridgewell/sourcemap-codec" "^1.4.10"
-    "@jridgewell/trace-mapping" "^0.3.9"
-
-"@jridgewell/resolve-uri@^3.1.0":
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz"
-  integrity sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==
-
-"@jridgewell/set-array@^1.0.1":
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz"
-  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
-
-"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
-  version "1.4.15"
-  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz"
-  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
-
-"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
-  version "0.3.20"
-  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz"
-  integrity sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==
-  dependencies:
-    "@jridgewell/resolve-uri" "^3.1.0"
-    "@jridgewell/sourcemap-codec" "^1.4.14"
-
-"@types/history@*":
-  version "4.7.9"
-  resolved "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz"
-  integrity sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==
-
-"@types/hoist-non-react-statics@*":
-  version "3.3.1"
-  resolved "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz"
-  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
-  dependencies:
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-
-"@types/prop-types@*":
-  version "15.7.4"
-  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz"
-  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
-
-"@types/react-dom@^17.0.9":
-  version "17.0.9"
-  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.9.tgz"
-  integrity sha512-wIvGxLfgpVDSAMH5utdL9Ngm5Owu0VsGmldro3ORLXV8CShrL8awVj06NuEXFQ5xyaYfdca7Sgbk/50Ri1GdPg==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react-router-dom@^5.1.8":
-  version "5.1.8"
-  resolved "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.8.tgz"
-  integrity sha512-03xHyncBzG0PmDmf8pf3rehtjY0NpUj7TIN46FrT5n1ZWHPZvXz32gUyNboJ+xsL8cpg8bQVLcllptcQHvocrw==
-  dependencies:
-    "@types/history" "*"
-    "@types/react" "*"
-    "@types/react-router" "*"
-
-"@types/react-router@*":
-  version "5.1.16"
-  resolved "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.16.tgz"
-  integrity sha512-8d7nR/fNSqlTFGHti0R3F9WwIertOaaA1UEB8/jr5l5mDMOs4CidEgvvYMw4ivqrBK+vtVLxyTj2P+Pr/dtgzg==
-  dependencies:
-    "@types/history" "*"
-    "@types/react" "*"
-
-"@types/react@*", "@types/react@^17.0.15":
-  version "17.0.15"
-  resolved "https://registry.npmjs.org/@types/react/-/react-17.0.15.tgz"
-  integrity sha512-uTKHDK9STXFHLaKv6IMnwp52fm0hwU+N89w/p9grdUqcFA6WuqDyPhaWopbNyE1k/VhgzmHl8pu1L4wITtmlLw==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/scheduler@*":
-  version "0.16.2"
-  resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
-  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
-
-"@types/styled-components@^5.1.11":
-  version "5.1.25"
-  resolved "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.25.tgz"
-  integrity sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ==
-  dependencies:
-    "@types/hoist-non-react-statics" "*"
-    "@types/react" "*"
-    csstype "^3.0.2"
-
-ansi-styles@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"
-  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-  dependencies:
-    color-convert "^1.9.0"
-
-"babel-plugin-styled-components@>= 1.12.0":
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.2.tgz"
-  integrity sha512-7eG5NE8rChnNTDxa6LQfynwgHTVOYYaHJbUYSlOhk8QBXIQiMBKq4gyfHBBKPrxUcVBXVJL61ihduCpCQbuNbw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.0"
-    "@babel/helper-module-imports" "^7.16.0"
-    babel-plugin-syntax-jsx "^6.18.0"
-    lodash "^4.17.11"
-
-babel-plugin-syntax-jsx@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz"
-  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
-
-camelize@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz"
-  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
-
-chalk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
-  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
-color-convert@^1.9.0:
-  version "1.9.3"
-  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
-  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
-
-cross-fetch@^3.1.5:
-  version "3.1.8"
-  resolved "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz"
-  integrity sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==
-  dependencies:
-    node-fetch "^2.6.12"
-
-css-color-keywords@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz"
-  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
-
-css-to-react-native@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz"
-  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
-  dependencies:
-    camelize "^1.0.0"
-    css-color-keywords "^1.0.0"
-    postcss-value-parser "^4.0.2"
-
-csstype@^3.0.2:
-  version "3.0.8"
-  resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz"
-  integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
-
-debug@^4.1.0:
-  version "4.3.3"
-  resolved "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz"
-  integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
-  dependencies:
-    ms "2.1.2"
-
-esbuild@^0.12.17:
-  version "0.12.17"
-  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.12.17.tgz"
-  integrity sha512-GshKJyVYUnlSXIZj/NheC2O0Kblh42CS7P1wJyTbbIHevTG4jYMS9NNw8EOd8dDWD0dzydYHS01MpZoUcQXB4g==
-
-escape-string-regexp@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
-  integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
-
-globals@^11.1.0:
-  version "11.12.0"
-  resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
-  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
-
-has-flag@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz"
-  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
-
-history@^4.9.0:
-  version "4.10.1"
-  resolved "https://registry.npmjs.org/history/-/history-4.10.1.tgz"
-  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    loose-envify "^1.2.0"
-    resolve-pathname "^3.0.0"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
-    value-equal "^1.0.1"
-
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
-  version "3.3.2"
-  resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
-  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
-  dependencies:
-    react-is "^16.7.0"
-
-isarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
-
-"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
-  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
-
-jsesc@^2.5.1:
-  version "2.5.2"
-  resolved "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz"
-  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
-
-lodash@^4.17.11:
-  version "4.17.21"
-  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
-loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
-  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
-  dependencies:
-    js-tokens "^3.0.0 || ^4.0.0"
-
-mini-create-react-context@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz"
-  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
-  dependencies:
-    "@babel/runtime" "^7.12.1"
-    tiny-warning "^1.0.3"
-
-ms@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
-  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
-
-node-fetch@^2.6.12:
-  version "2.7.0"
-  resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz"
-  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
-  dependencies:
-    whatwg-url "^5.0.0"
-
-object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
-path-to-regexp@^1.7.0:
-  version "1.8.0"
-  resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz"
-  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
-  dependencies:
-    isarray "0.0.1"
-
-postcss-value-parser@^4.0.2:
-  version "4.2.0"
-  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
-  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
-
-prettier@2.7.1:
-  version "2.7.1"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz"
-  integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
-
-prop-types@^15.0.0, prop-types@^15.6.2:
-  version "15.7.2"
-  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
-  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
-  dependencies:
-    loose-envify "^1.4.0"
-    object-assign "^4.1.1"
-    react-is "^16.8.1"
-
-react-dom@^17.0.2, "react-dom@>= 16.8.0":
-  version "17.0.2"
-  resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
-
-react-is@^16.6.0:
-  version "16.13.1"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
-  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
-
-react-is@^16.7.0:
-  version "16.13.1"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
-  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
-
-react-is@^16.8.1:
-  version "16.13.1"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
-  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
-
-react-is@^17.0.2, "react-is@>= 16.8.0":
-  version "17.0.2"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
-  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
-
-react-router-dom@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz"
-  integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    history "^4.9.0"
-    loose-envify "^1.3.1"
-    prop-types "^15.6.2"
-    react-router "5.2.0"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
-
-react-router@5.2.0:
-  version "5.2.0"
-  resolved "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz"
-  integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    history "^4.9.0"
-    hoist-non-react-statics "^3.1.0"
-    loose-envify "^1.3.1"
-    mini-create-react-context "^0.4.0"
-    path-to-regexp "^1.7.0"
-    prop-types "^15.6.2"
-    react-is "^16.6.0"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
-
-"react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", react@^17.0.2, "react@>= 16.8.0", react@>=15, react@>=16, react@17.0.2:
-  version "17.0.2"
-  resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
-regenerator-runtime@^0.13.4:
-  version "0.13.9"
-  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
-  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
-
-resolve-pathname@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz"
-  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
-
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
-shallowequal@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz"
-  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
-
-styled-components@^5.3.0, "styled-components@>= 2":
-  version "5.3.3"
-  resolved "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz"
-  integrity sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.4.5"
-    "@emotion/is-prop-valid" "^0.8.8"
-    "@emotion/stylis" "^0.8.4"
-    "@emotion/unitless" "^0.7.4"
-    babel-plugin-styled-components ">= 1.12.0"
-    css-to-react-native "^3.0.0"
-    hoist-non-react-statics "^3.0.0"
-    shallowequal "^1.1.0"
-    supports-color "^5.5.0"
-
-supports-color@^5.3.0, supports-color@^5.5.0:
-  version "5.5.0"
-  resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
-
-tiny-invariant@^1.0.2:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz"
-  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
-
-tiny-warning@^1.0.0, tiny-warning@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
-  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
-
-to-fast-properties@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
-  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
-
-tr46@~0.0.3:
-  version "0.0.3"
-  resolved "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz"
-  integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
-
-typescript@^4.3.5:
-  version "4.3.5"
-  resolved "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz"
-  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
-
-validator@^13.11.0:
-  version "13.11.0"
-  resolved "https://registry.npmjs.org/validator/-/validator-13.11.0.tgz"
-  integrity sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ==
-
-value-equal@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz"
-  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
-
-webidl-conversions@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz"
-  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
-
-whatwg-url@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz"
-  integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
-  dependencies:
-    tr46 "~0.0.3"
-    webidl-conversions "^3.0.0"
--- a/dashboard/.prettierrc.json
+++ b/dashboard/.prettierrc.json
@ -1,6 +0,0 @@
-{
-	"tabWidth": 2,
-	"singleQuote": true,
-	"trailingComma": "all",
-	"useTabs": true
-}
--- a/dashboard/favicon_io/android-chrome-192x192.png
+++ b/dashboard/favicon_io/android-chrome-192x192.png
--- a/dashboard/favicon_io/android-chrome-512x512.png
+++ b/dashboard/favicon_io/android-chrome-512x512.png
--- a/dashboard/favicon_io/apple-touch-icon.png
+++ b/dashboard/favicon_io/apple-touch-icon.png
--- a/dashboard/favicon_io/favicon-16x16.png
+++ b/dashboard/favicon_io/favicon-16x16.png
--- a/dashboard/favicon_io/favicon-32x32.png
+++ b/dashboard/favicon_io/favicon-32x32.png
--- a/dashboard/favicon_io/favicon.ico
+++ b/dashboard/favicon_io/favicon.ico
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
--- a/dashboard/package.json
+++ b/dashboard/package.json
@ -5,38 +5,26 @@
 	"main": "index.js",
 	"scripts": {
 		"build": "rm -rf build && NODE_ENV=production node ./esbuild.config.js",
-		"start": "NODE_ENV=development node ./esbuild.config.js",
-		"format": "prettier --write --use-tabs 'src/**/*.(ts|tsx|js|jsx)'"
+		"start": "NODE_ENV=development node ./esbuild.config.js"
 	},
 	"keywords": [],
 	"author": "Lakhan Samani",
 	"license": "ISC",
 	"dependencies": {
 		"@chakra-ui/react": "^1.7.3",
-		"@emotion/core": "^11.0.0",
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@types/react": "^17.0.38",
 		"@types/react-dom": "^17.0.11",
 		"@types/react-router-dom": "^5.3.2",
-		"dayjs": "^1.10.7",
 		"esbuild": "^0.14.9",
-		"focus-visible": "^5.2.0",
 		"framer-motion": "^5.5.5",
 		"graphql": "^16.2.0",
-		"lodash": "^4.17.21",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
-		"react-draft-wysiwyg": "^1.15.0",
-		"react-dropzone": "^12.0.4",
-		"react-email-editor": "^1.6.1",
 		"react-icons": "^4.3.1",
 		"react-router-dom": "^6.2.1",
 		"typescript": "^4.5.4",
 		"urql": "^2.0.6"
-	},
-	"devDependencies": {
-		"@types/react-email-editor": "^1.1.7",
-		"prettier": "2.7.1"
 	}
 }
--- a/dashboard/public/roblox.png
+++ b/dashboard/public/roblox.png
--- a/dashboard/public/sample.csv
+++ b/dashboard/public/sample.csv
@ -1 +0,0 @@
-foo@bar.com,test@authorizer.dev
--- a/dashboard/src/App.tsx
+++ b/dashboard/src/App.tsx
@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Fragment } from 'react';
 import { ChakraProvider, extendTheme } from '@chakra-ui/react';
 import { BrowserRouter } from 'react-router-dom';
 import { createClient, Provider } from 'urql';
@ -11,20 +10,16 @@ const queryClient = createClient({
 	fetchOptions: () => {
 		return {
 			credentials: 'include',
-			headers: {
-				'x-authorizer-url': window.location.origin,
-			},
 		};
 	},
-	requestPolicy: 'network-only',
 });

 const theme = extendTheme({
 	styles: {
 		global: {
 			'html, body, #root': {
+				fontFamily: 'Avenir, Helvetica, Arial, sans-serif',
 				height: '100%',
-				outline: 'none',
 			},
 		},
 	},
@ -37,7 +32,6 @@ const theme = extendTheme({

 export default function App() {
 	return (
-		<Fragment>
 		<ChakraProvider theme={theme}>
 			<Provider value={queryClient}>
 				<BrowserRouter basename="/dashboard">
@ -47,6 +41,5 @@ export default function App() {
 				</BrowserRouter>
 			</Provider>
 		</ChakraProvider>
-		</Fragment>
 	);
 }
--- a/dashboard/src/Router.tsx
+++ b/dashboard/src/Router.tsx
--- a/dashboard/src/components/DeleteEmailTemplateModal.tsx
+++ b/dashboard/src/components/DeleteEmailTemplateModal.tsx
@ -1,106 +0,0 @@
-import React from 'react';
-import {
-	Button,
-	Center,
-	Flex,
-	MenuItem,
-	Modal,
-	ModalBody,
-	ModalCloseButton,
-	ModalContent,
-	ModalFooter,
-	ModalHeader,
-	ModalOverlay,
-	useDisclosure,
-	Text,
-	useToast,
-} from '@chakra-ui/react';
-import { useClient } from 'urql';
-import { FaRegTrashAlt } from 'react-icons/fa';
-import { DeleteEmailTemplate } from '../graphql/mutation';
-import { capitalizeFirstLetter } from '../utils';
-
-interface deleteEmailTemplateModalInputPropTypes {
-	emailTemplateId: string;
-	eventName: string;
-	fetchEmailTemplatesData: Function;
-}
-
-const DeleteEmailTemplateModal = ({
-	emailTemplateId,
-	eventName,
-	fetchEmailTemplatesData,
-}: deleteEmailTemplateModalInputPropTypes) => {
-	const client = useClient();
-	const toast = useToast();
-	const { isOpen, onOpen, onClose } = useDisclosure();
-
-	const deleteHandler = async () => {
-		const res = await client
-			.mutation(DeleteEmailTemplate, { params: { id: emailTemplateId } })
-			.toPromise();
-		if (res.error) {
-			toast({
-				title: capitalizeFirstLetter(res.error.message),
-				isClosable: true,
-				status: 'error',
-				position: 'top-right',
-			});
-
-			return;
-		} else if (res.data?._delete_email_template) {
-			toast({
-				title: capitalizeFirstLetter(res.data?._delete_email_template.message),
-				isClosable: true,
-				status: 'success',
-				position: 'top-right',
-			});
-		}
-		onClose();
-		fetchEmailTemplatesData();
-	};
-	return (
-		<>
-			<MenuItem onClick={onOpen}>Delete</MenuItem>
-			<Modal isOpen={isOpen} onClose={onClose}>
-				<ModalOverlay />
-				<ModalContent>
-					<ModalHeader>Delete Email Template</ModalHeader>
-					<ModalCloseButton />
-					<ModalBody>
-						<Text fontSize="md">Are you sure?</Text>
-						<Flex
-							padding="5%"
-							marginTop="5%"
-							marginBottom="2%"
-							border="1px solid #ff7875"
-							borderRadius="5px"
-							flexDirection="column"
-						>
-							<Text fontSize="sm">
-								Email template for event <b>{eventName}</b> will be deleted
-								permanently!
-							</Text>
-						</Flex>
-					</ModalBody>
-
-					<ModalFooter>
-						<Button
-							leftIcon={<FaRegTrashAlt />}
-							colorScheme="red"
-							variant="solid"
-							onClick={deleteHandler}
-							isDisabled={false}
-						>
-							<Center h="100%" pt="5%">
-								Delete
-							</Center>
-						</Button>
-					</ModalFooter>
-				</ModalContent>
-			</Modal>
-		</>
-	);
-};
-
-export default DeleteEmailTemplateModal;
--- a/dashboard/src/components/DeleteUserModal.tsx
+++ b/dashboard/src/components/DeleteUserModal.tsx
@ -1,112 +0,0 @@
-import React from 'react';
-import {
-	Button,
-	Center,
-	Flex,
-	MenuItem,
-	Modal,
-	ModalBody,
-	ModalCloseButton,
-	ModalContent,
-	ModalFooter,
-	ModalHeader,
-	ModalOverlay,
-	useDisclosure,
-	Text,
-	useToast,
-} from '@chakra-ui/react';
-import { useClient } from 'urql';
-import { FaRegTrashAlt } from 'react-icons/fa';
-import { DeleteUser } from '../graphql/mutation';
-import { capitalizeFirstLetter } from '../utils';
-
-interface userDataTypes {
-	id: string;
-	email: string;
-}
-
-const DeleteUserModal = ({
-	user,
-	updateUserList,
-}: {
-	user: userDataTypes;
-	updateUserList: Function;
-}) => {
-	const client = useClient();
-	const toast = useToast();
-	const { isOpen, onOpen, onClose } = useDisclosure();
-	const [userData, setUserData] = React.useState<userDataTypes>({
-		id: '',
-		email: '',
-	});
-	React.useEffect(() => {
-		setUserData(user);
-	}, []);
-	const deleteHandler = async () => {
-		const res = await client
-			.mutation(DeleteUser, { params: { email: userData.email } })
-			.toPromise();
-		if (res.error) {
-			toast({
-				title: capitalizeFirstLetter(res.error.message),
-				isClosable: true,
-				status: 'error',
-				position: 'top-right',
-			});
-
-			return;
-		} else if (res.data?._delete_user) {
-			toast({
-				title: capitalizeFirstLetter(res.data?._delete_user.message),
-				isClosable: true,
-				status: 'success',
-				position: 'top-right',
-			});
-		}
-		onClose();
-		updateUserList();
-	};
-	return (
-		<>
-			<MenuItem onClick={onOpen}>Delete User</MenuItem>
-			<Modal isOpen={isOpen} onClose={onClose}>
-				<ModalOverlay />
-				<ModalContent>
-					<ModalHeader>Delete User</ModalHeader>
-					<ModalCloseButton />
-					<ModalBody>
-						<Text fontSize="md">Are you sure?</Text>
-						<Flex
-							padding="5%"
-							marginTop="5%"
-							marginBottom="2%"
-							border="1px solid #ff7875"
-							borderRadius="5px"
-							flexDirection="column"
-						>
-							<Text fontSize="sm">
-								User <b>{user.email}</b> will be deleted permanently!
-							</Text>
-						</Flex>
-					</ModalBody>
-
-					<ModalFooter>
-						<Button
-							leftIcon={<FaRegTrashAlt />}
-							colorScheme="red"
-							variant="solid"
-							onClick={deleteHandler}
-							isDisabled={false}
-						>
-							<Center h="100%" pt="5%">
-								Delete
-							</Center>
-						</Button>
-					</ModalFooter>
-				</ModalContent>
-			</Modal>
-		</>
-	);
-};
-
-export default DeleteUserModal;
--- a/dashboard/src/components/DeleteWebhookModal.tsx
+++ b/dashboard/src/components/DeleteWebhookModal.tsx
@ -1,106 +0,0 @@
-import React from 'react';
-import {
-	Button,
-	Center,
-	Flex,
-	MenuItem,
-	Modal,
-	ModalBody,
-	ModalCloseButton,
-	ModalContent,
-	ModalFooter,
-	ModalHeader,
-	ModalOverlay,
-	useDisclosure,
-	Text,
-	useToast,
-} from '@chakra-ui/react';
-import { useClient } from 'urql';
-import { FaRegTrashAlt } from 'react-icons/fa';
-import { DeleteWebhook } from '../graphql/mutation';
-import { capitalizeFirstLetter } from '../utils';
-
-interface deleteWebhookModalInputPropTypes {
-	webhookId: string;
-	eventName: string;
-	fetchWebookData: Function;
-}
-
-const DeleteWebhookModal = ({
-	webhookId,
-	eventName,
-	fetchWebookData,
-}: deleteWebhookModalInputPropTypes) => {
-	const client = useClient();
-	const toast = useToast();
-	const { isOpen, onOpen, onClose } = useDisclosure();
-
-	const deleteHandler = async () => {
-		const res = await client
-			.mutation(DeleteWebhook, { params: { id: webhookId } })
-			.toPromise();
-		if (res.error) {
-			toast({
-				title: capitalizeFirstLetter(res.error.message),
-				isClosable: true,
-				status: 'error',
-				position: 'top-right',
-			});
-
-			return;
-		} else if (res.data?._delete_webhook) {
-			toast({
-				title: capitalizeFirstLetter(res.data?._delete_webhook.message),
-				isClosable: true,
-				status: 'success',
-				position: 'top-right',
-			});
-		}
-		onClose();
-		fetchWebookData();
-	};
-	return (
-		<>
-			<MenuItem onClick={onOpen}>Delete</MenuItem>
-			<Modal isOpen={isOpen} onClose={onClose}>
-				<ModalOverlay />
-				<ModalContent>
-					<ModalHeader>Delete Webhook</ModalHeader>
-					<ModalCloseButton />
-					<ModalBody>
-						<Text fontSize="md">Are you sure?</Text>
-						<Flex
-							padding="5%"
-							marginTop="5%"
-							marginBottom="2%"
-							border="1px solid #ff7875"
-							borderRadius="5px"
-							flexDirection="column"
-						>
-							<Text fontSize="sm">
-								Webhook for event <b>{eventName}</b> will be deleted
-								permanently!
-							</Text>
-						</Flex>
-					</ModalBody>
-
-					<ModalFooter>
-						<Button
-							leftIcon={<FaRegTrashAlt />}
-							colorScheme="red"
-							variant="solid"
-							onClick={deleteHandler}
-							isDisabled={false}
-						>
-							<Center h="100%" pt="5%">
-								Delete
-							</Center>
-						</Button>
-					</ModalFooter>
-				</ModalContent>
-			</Modal>
-		</>
-	);
-};
-
-export default DeleteWebhookModal;
--- a/dashboard/src/components/EditUserModal.tsx
+++ b/dashboard/src/components/EditUserModal.tsx
@ -1,263 +0,0 @@
-import React, { useState } from 'react';
-import {
-	Button,
-	Center,
-	Flex,
-	MenuItem,
-	Modal,
-	ModalBody,
-	ModalCloseButton,
-	ModalContent,
-	ModalFooter,
-	ModalHeader,
-	ModalOverlay,
-	Stack,
-	useDisclosure,
-	Text,
-	useToast,
-} from '@chakra-ui/react';
-import { useClient } from 'urql';
-import { FaSave } from 'react-icons/fa';
-import InputField from './InputField';
-import {
-	DateInputType,
-	MultiSelectInputType,
-	SelectInputType,
-	TextInputType,
-} from '../constants';
-import { getObjectDiff } from '../utils';
-import { UpdateUser } from '../graphql/mutation';
-import { GetAvailableRolesQuery } from '../graphql/queries';
-
-const GenderTypes = {
-	Undisclosed: null,
-	Male: 'Male',
-	Female: 'Female',
-};
-
-interface userDataTypes {
-	id: string;
-	email: string;
-	given_name: string;
-	family_name: string;
-	middle_name: string;
-	nickname: string;
-	gender: string;
-	birthdate: string;
-	phone_number: string;
-	picture: string;
-	roles: [string] | [];
-}
-
-const EditUserModal = ({
-	user,
-	updateUserList,
-}: {
-	user: userDataTypes;
-	updateUserList: Function;
-}) => {
-	const client = useClient();
-	const toast = useToast();
-	const [availableRoles, setAvailableRoles] = useState<string[]>([]);
-	const { isOpen, onOpen, onClose } = useDisclosure();
-	const [userData, setUserData] = useState<userDataTypes>({
-		id: '',
-		email: '',
-		given_name: '',
-		family_name: '',
-		middle_name: '',
-		nickname: '',
-		gender: '',
-		birthdate: '',
-		phone_number: '',
-		picture: '',
-		roles: [],
-	});
-	React.useEffect(() => {
-		setUserData(user);
-		fetchAvailableRoles();
-	}, []);
-	const fetchAvailableRoles = async () => {
-		const res = await client.query(GetAvailableRolesQuery).toPromise();
-		if (res.data?._env?.ROLES && res.data?._env?.PROTECTED_ROLES) {
-			setAvailableRoles([
-				...res.data._env.ROLES,
-				...res.data._env.PROTECTED_ROLES,
-			]);
-		}
-	};
-	const saveHandler = async () => {
-		const diff = getObjectDiff(user, userData);
-		const updatedUserData = diff.reduce(
-			(acc: any, property: string) => ({
-				...acc,
-				// @ts-ignore
-				[property]: userData[property],
-			}),
-			{},
-		);
-		const res = await client
-			.mutation(UpdateUser, { params: { ...updatedUserData, id: userData.id } })
-			.toPromise();
-		if (res.error) {
-			toast({
-				title: 'User data update failed',
-				isClosable: true,
-				status: 'error',
-				position: 'top-right',
-			});
-		} else if (res.data?._update_user?.id) {
-			toast({
-				title: 'User data update successful',
-				isClosable: true,
-				status: 'success',
-				position: 'top-right',
-			});
-		}
-		onClose();
-		updateUserList();
-	};
-	return (
-		<>
-			<MenuItem onClick={onOpen}>Edit User Details</MenuItem>
-			<Modal isOpen={isOpen} onClose={onClose}>
-				<ModalOverlay />
-				<ModalContent>
-					<ModalHeader>Edit User Details</ModalHeader>
-					<ModalCloseButton />
-					<ModalBody>
-						<Stack>
-							<Flex>
-								<Flex w="30%" justifyContent="start" alignItems="center">
-									<Text fontSize="sm">Given Name:</Text>
-								</Flex>
-								<Center w="70%">
-									<InputField
-										variables={userData}
-										setVariables={setUserData}
-										inputType={TextInputType.GIVEN_NAME}
-									/>
-								</Center>
-							</Flex>
-							<Flex>
-								<Flex w="30%" justifyContent="start" alignItems="center">
-									<Text fontSize="sm">Middle Name:</Text>
-								</Flex>
-								<Center w="70%">
-									<InputField
-										variables={userData}
-										setVariables={setUserData}
-										inputType={TextInputType.MIDDLE_NAME}
-									/>
-								</Center>
-							</Flex>
-							<Flex>
-								<Flex w="30%" justifyContent="start" alignItems="center">
-									<Text fontSize="sm">Family Name:</Text>
-								</Flex>
-								<Center w="70%">
-									<InputField
-										variables={userData}
-										setVariables={setUserData}
-										inputType={TextInputType.FAMILY_NAME}
-									/>
-								</Center>
-							</Flex>
-							<Flex>
-								<Flex w="30%" justifyContent="start" alignItems="center">
-									<Text fontSize="sm">Birth Date:</Text>
-								</Flex>
-								<Center w="70%">
-									<InputField
-										variables={userData}
-										setVariables={setUserData}
-										inputType={DateInputType.BIRTHDATE}
-									/>
-								</Center>
-							</Flex>
-							<Flex>
-								<Flex w="30%" justifyContent="start" alignItems="center">
-									<Text fontSize="sm">Nickname:</Text>
-								</Flex>
-								<Center w="70%">
-									<InputField
-										variables={userData}
-										setVariables={setUserData}
-										inputType={TextInputType.NICKNAME}
-									/>
-								</Center>
-							</Flex>
-							<Flex>
-								<Flex w="30%" justifyContent="start" alignItems="center">
-									<Text fontSize="sm">Gender:</Text>
-								</Flex>
-								<Center w="70%">
-									<InputField
-										variables={userData}
-										setVariables={setUserData}
-										inputType={SelectInputType.GENDER}
-										value={userData.gender}
-										options={GenderTypes}
-									/>
-								</Center>
-							</Flex>
-							<Flex>
-								<Flex w="30%" justifyContent="start" alignItems="center">
-									<Text fontSize="sm">Phone Number:</Text>
-								</Flex>
-								<Center w="70%">
-									<InputField
-										variables={userData}
-										setVariables={setUserData}
-										inputType={TextInputType.PHONE_NUMBER}
-									/>
-								</Center>
-							</Flex>
-							<Flex>
-								<Flex w="30%" justifyContent="start" alignItems="center">
-									<Text fontSize="sm">Picture:</Text>
-								</Flex>
-								<Center w="70%">
-									<InputField
-										variables={userData}
-										setVariables={setUserData}
-										inputType={TextInputType.PICTURE}
-									/>
-								</Center>
-							</Flex>
-							<Flex>
-								<Flex w="30%" justifyContent="start" alignItems="center">
-									<Text fontSize="sm">Roles:</Text>
-								</Flex>
-								<Center w="70%">
-									<InputField
-										variables={userData}
-										setVariables={setUserData}
-										availableRoles={availableRoles}
-										inputType={MultiSelectInputType.USER_ROLES}
-									/>
-								</Center>
-							</Flex>
-						</Stack>
-					</ModalBody>
-
-					<ModalFooter>
-						<Button
-							leftIcon={<FaSave />}
-							colorScheme="blue"
-							variant="solid"
-							onClick={saveHandler}
-							isDisabled={false}
-						>
-							<Center h="100%" pt="5%">
-								Save
-							</Center>
-						</Button>
-					</ModalFooter>
-				</ModalContent>
-			</Modal>
-		</>
-	);
-};
-
-export default EditUserModal;
--- a/dashboard/src/components/EnvComponents/AccessToken.tsx
+++ b/dashboard/src/components/EnvComponents/AccessToken.tsx
@ -1,65 +0,0 @@
-import React from 'react';
-import { Flex, Stack, Text, useMediaQuery } from '@chakra-ui/react';
-import InputField from '../../components/InputField';
-import { TextInputType, TextAreaInputType } from '../../constants';
-
-const AccessToken = ({ variables, setVariables }: any) => {
-	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
-	return (
-		<div>
-			{' '}
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
-				Access Token
-			</Text>
-			<Stack spacing={6} padding="2% 0%">
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex
-						w={isNotSmallerScreen ? '30%' : '50%'}
-						justifyContent="start"
-						alignItems="center"
-					>
-						<Text fontSize="sm">Access Token Expiry Time:</Text>
-					</Flex>
-					<Flex
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '3'}
-					>
-						<InputField
-							borderRadius={5}
-							variables={variables}
-							setVariables={setVariables}
-							inputType={TextInputType.ACCESS_TOKEN_EXPIRY_TIME}
-							placeholder="0h15m0s"
-						/>
-					</Flex>
-				</Flex>
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex
-						w={isNotSmallerScreen ? '30%' : '60%'}
-						justifyContent="start"
-						direction="column"
-					>
-						<Text fontSize="sm">Custom Scripts:</Text>
-						<Text fontSize="xs" color="blackAlpha.500">
-							(Used to add custom fields in ID token)
-						</Text>
-					</Flex>
-					<Flex
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '3'}
-					>
-						<InputField
-							variables={variables}
-							setVariables={setVariables}
-							inputType={TextAreaInputType.CUSTOM_ACCESS_TOKEN_SCRIPT}
-							placeholder="Add script here"
-							minH="25vh"
-						/>
-					</Flex>
-				</Flex>
-			</Stack>
-		</div>
-	);
-};
-
-export default AccessToken;
--- a/dashboard/src/components/EnvComponents/DatabaseCredentials.tsx
+++ b/dashboard/src/components/EnvComponents/DatabaseCredentials.tsx
@ -1,89 +0,0 @@
-import React from 'react';
-import { Flex, Stack, Center, Text, useMediaQuery } from '@chakra-ui/react';
-
-import InputField from '../../components/InputField';
-import { TextInputType } from '../../constants';
-
-const DatabaseCredentials = ({ variables, setVariables }: any) => {
-	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
-	return (
-		<div>
-			{' '}
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold">
-				Database Credentials
-			</Text>
-			<Stack spacing={6} padding="3% 0">
-				<Text fontStyle="italic" fontSize="sm" color="blackAlpha.500" mt={3}>
-					Note: Database related environment variables cannot be updated from
-					dashboard. Please use .env file or OS environment variables to update
-					it.
-				</Text>
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex
-						w={isNotSmallerScreen ? '30%' : '40%'}
-						justifyContent="start"
-						alignItems="center"
-					>
-						<Text fontSize="sm">DataBase Name:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '3'}
-					>
-						<InputField
-							borderRadius={5}
-							variables={variables}
-							setVariables={setVariables}
-							inputType={TextInputType.DATABASE_NAME}
-							isDisabled={true}
-						/>
-					</Center>
-				</Flex>
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex
-						w={isNotSmallerScreen ? '30%' : '40%'}
-						justifyContent="start"
-						alignItems="center"
-					>
-						<Text fontSize="sm">DataBase Type:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '3'}
-					>
-						<InputField
-							borderRadius={5}
-							variables={variables}
-							setVariables={setVariables}
-							inputType={TextInputType.DATABASE_TYPE}
-							isDisabled={true}
-						/>
-					</Center>
-				</Flex>
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex
-						w={isNotSmallerScreen ? '30%' : '40%'}
-						justifyContent="start"
-						alignItems="center"
-					>
-						<Text fontSize="sm">DataBase URL:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '3'}
-					>
-						<InputField
-							borderRadius={5}
-							variables={variables}
-							setVariables={setVariables}
-							inputType={TextInputType.DATABASE_URL}
-							isDisabled={true}
-						/>
-					</Center>
-				</Flex>
-			</Stack>
-		</div>
-	);
-};
-
-export default DatabaseCredentials;
--- a/dashboard/src/components/EnvComponents/DomainWhitelisting.tsx
+++ b/dashboard/src/components/EnvComponents/DomainWhitelisting.tsx
@ -1,35 +0,0 @@
-import React from 'react';
-import { Flex, Stack, Center, Text, useMediaQuery } from '@chakra-ui/react';
-import InputField from '../../components/InputField';
-import { ArrayInputType } from '../../constants';
-
-const DomainWhiteListing = ({ variables, setVariables }: any) => {
-	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
-	return (
-		<div>
-			{' '}
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
-				Domain White Listing
-			</Text>
-			<Stack spacing={6} padding="2% 0%">
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Allowed Origins:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '3'}
-					>
-						<InputField
-							variables={variables}
-							setVariables={setVariables}
-							inputType={ArrayInputType.ALLOWED_ORIGINS}
-						/>
-					</Center>
-				</Flex>
-			</Stack>
-		</div>
-	);
-};
-
-export default DomainWhiteListing;
--- a/dashboard/src/components/EnvComponents/EmailConfiguration.tsx
+++ b/dashboard/src/components/EnvComponents/EmailConfiguration.tsx
@ -1,150 +0,0 @@
-import React from 'react';
-import { Flex, Stack, Center, Text, useMediaQuery } from '@chakra-ui/react';
-import InputField from '../../components/InputField';
-import { TextInputType, HiddenInputType } from '../../constants';
-const EmailConfigurations = ({
-	variables,
-	setVariables,
-	fieldVisibility,
-	setFieldVisibility,
-}: any) => {
-	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
-	return (
-		<div>
-			{' '}
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
-				Email Configurations
-			</Text>
-			<Stack spacing={6} padding="2% 0%">
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">SMTP Host:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '3'}
-					>
-						<InputField
-							borderRadius={5}
-							variables={variables}
-							setVariables={setVariables}
-							inputType={TextInputType.SMTP_HOST}
-						/>
-					</Center>
-				</Flex>
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">SMTP Port:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '3'}
-					>
-						<InputField
-							borderRadius={5}
-							variables={variables}
-							setVariables={setVariables}
-							inputType={TextInputType.SMTP_PORT}
-						/>
-					</Center>
-				</Flex>
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex
-						w={isNotSmallerScreen ? '30%' : '40%'}
-						justifyContent="start"
-						alignItems="center"
-					>
-						<Text fontSize="sm">SMTP Local Name:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '3'}
-					>
-						<InputField
-							borderRadius={5}
-							variables={variables}
-							setVariables={setVariables}
-							inputType={TextInputType.SMTP_LOCAL_NAME}
-						/>
-					</Center>
-				</Flex>
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex
-						w={isNotSmallerScreen ? '30%' : '40%'}
-						justifyContent="start"
-						alignItems="center"
-					>
-						<Text fontSize="sm">SMTP Username:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '3'}
-					>
-						<InputField
-							borderRadius={5}
-							variables={variables}
-							setVariables={setVariables}
-							inputType={TextInputType.SMTP_USERNAME}
-						/>
-					</Center>
-				</Flex>
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex
-						w={isNotSmallerScreen ? '30%' : '40%'}
-						justifyContent="start"
-						alignItems="center"
-					>
-						<Text fontSize="sm">SMTP Password:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '3'}
-					>
-						<InputField
-							borderRadius={5}
-							variables={variables}
-							setVariables={setVariables}
-							fieldVisibility={fieldVisibility}
-							setFieldVisibility={setFieldVisibility}
-							inputType={HiddenInputType.SMTP_PASSWORD}
-						/>
-					</Center>
-				</Flex>
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">From Email:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '3'}
-					>
-						<InputField
-							borderRadius={5}
-							variables={variables}
-							setVariables={setVariables}
-							inputType={TextInputType.SENDER_EMAIL}
-						/>
-					</Center>
-				</Flex>
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Sender Name:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '3'}
-					>
-						<InputField
-							borderRadius={5}
-							variables={variables}
-							setVariables={setVariables}
-							inputType={TextInputType.SENDER_NAME}
-						/>
-					</Center>
-				</Flex>
-			</Stack>
-		</div>
-	);
-};
-
-export default EmailConfigurations;
--- a/dashboard/src/components/EnvComponents/Features.tsx
+++ b/dashboard/src/components/EnvComponents/Features.tsx
@ -1,229 +0,0 @@
-import React from 'react';
-import { Divider, Flex, Stack, Text } from '@chakra-ui/react';
-import InputField from '../InputField';
-import { SwitchInputType } from '../../constants';
-
-const Features = ({ variables, setVariables }: any) => {
-	return (
-		<div>
-			{' '}
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
-				Features
-			</Text>
-			<Stack spacing={6}>
-				<Flex>
-					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Login Page:</Text>
-					</Flex>
-					<Flex justifyContent="start">
-						<InputField
-							variables={variables}
-							setVariables={setVariables}
-							inputType={SwitchInputType.DISABLE_LOGIN_PAGE}
-							hasReversedValue
-						/>
-					</Flex>
-				</Flex>
-
-				<Flex>
-					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Email Verification:</Text>
-					</Flex>
-					<Flex justifyContent="start">
-						<InputField
-							variables={variables}
-							setVariables={setVariables}
-							inputType={SwitchInputType.DISABLE_EMAIL_VERIFICATION}
-							hasReversedValue
-						/>
-					</Flex>
-				</Flex>
-				<Flex>
-					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Magic Login Link:</Text>
-					</Flex>
-					<Flex justifyContent="start">
-						<InputField
-							variables={variables}
-							setVariables={setVariables}
-							inputType={SwitchInputType.DISABLE_MAGIC_LINK_LOGIN}
-							hasReversedValue
-						/>
-					</Flex>
-				</Flex>
-				<Flex>
-					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Email Basic Authentication:</Text>
-					</Flex>
-					<Flex justifyContent="start">
-						<InputField
-							variables={variables}
-							setVariables={setVariables}
-							inputType={SwitchInputType.DISABLE_BASIC_AUTHENTICATION}
-							hasReversedValue
-						/>
-					</Flex>
-				</Flex>
-				<Flex>
-					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Mobile Basic Authentication:</Text>
-					</Flex>
-					<Flex justifyContent="start">
-						<InputField
-							variables={variables}
-							setVariables={setVariables}
-							inputType={SwitchInputType.DISABLE_MOBILE_BASIC_AUTHENTICATION}
-							hasReversedValue
-						/>
-					</Flex>
-				</Flex>
-				<Flex>
-					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Sign Up:</Text>
-					</Flex>
-					<Flex justifyContent="start" mb={3}>
-						<InputField
-							variables={variables}
-							setVariables={setVariables}
-							inputType={SwitchInputType.DISABLE_SIGN_UP}
-							hasReversedValue
-						/>
-					</Flex>
-				</Flex>
-				<Flex>
-					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Strong Password:</Text>
-					</Flex>
-					<Flex justifyContent="start" mb={3}>
-						<InputField
-							variables={variables}
-							setVariables={setVariables}
-							inputType={SwitchInputType.DISABLE_STRONG_PASSWORD}
-							hasReversedValue
-						/>
-					</Flex>
-				</Flex>
-				<Flex alignItems="center">
-					<Flex w="100%" alignItems="baseline" flexDir="column">
-						<Text fontSize="sm">Multi Factor Authentication (MFA):</Text>
-						<Text fontSize="x-small">
-							Note: Enabling this will ignore Enforcing MFA shown below and will
-							also ignore the user MFA setting.
-						</Text>
-					</Flex>
-
-					<Flex justifyContent="start" mb={3}>
-						<InputField
-							variables={variables}
-							setVariables={setVariables}
-							inputType={SwitchInputType.DISABLE_MULTI_FACTOR_AUTHENTICATION}
-							hasReversedValue
-						/>
-					</Flex>
-				</Flex>
-				{!variables.DISABLE_MULTI_FACTOR_AUTHENTICATION && (
-					<Flex alignItems="center">
-						<Flex w="100%" alignItems="baseline" flexDir="column">
-							<Text fontSize="sm">Time Based OTP (TOTP):</Text>
-							<Text fontSize="x-small">Note: to enable totp mfa</Text>
-						</Flex>
-
-						<Flex justifyContent="start" mb={3}>
-							<InputField
-								variables={variables}
-								setVariables={setVariables}
-								inputType={SwitchInputType.DISABLE_TOTP_LOGIN}
-								hasReversedValue
-							/>
-						</Flex>
-					</Flex>
-				)}
-				{!variables.DISABLE_MULTI_FACTOR_AUTHENTICATION && (
-					<Flex alignItems="center">
-						<Flex w="100%" alignItems="baseline" flexDir="column">
-							<Text fontSize="sm">EMAIL OTP:</Text>
-							<Text fontSize="x-small">Note: to enable email otp mfa</Text>
-						</Flex>
-
-						<Flex justifyContent="start" mb={3}>
-							<InputField
-								variables={variables}
-								setVariables={setVariables}
-								inputType={SwitchInputType.DISABLE_MAIL_OTP_LOGIN}
-								hasReversedValue
-							/>
-						</Flex>
-					</Flex>
-				)}
-
-				<Flex alignItems="center">
-					<Flex w="100%" alignItems="baseline" flexDir="column">
-						<Text fontSize="sm">
-							Enforce Multi Factor Authentication (MFA):
-						</Text>
-						<Text fontSize="x-small">
-							Note: If you disable enforcing after it was enabled, it will still
-							keep MFA enabled for older users.
-						</Text>
-					</Flex>
-					<Flex justifyContent="start" mb={3}>
-						<InputField
-							variables={variables}
-							setVariables={setVariables}
-							inputType={SwitchInputType.ENFORCE_MULTI_FACTOR_AUTHENTICATION}
-						/>
-					</Flex>
-				</Flex>
-				<Flex>
-					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Playground:</Text>
-					</Flex>
-					<Flex justifyContent="start">
-						<InputField
-							variables={variables}
-							setVariables={setVariables}
-							inputType={SwitchInputType.DISABLE_PLAYGROUND}
-							hasReversedValue
-						/>
-					</Flex>
-				</Flex>
-			</Stack>
-			<Divider paddingY={5} />
-			<Text fontSize="md" paddingTop={5} fontWeight="bold" mb={5}>
-				Cookie Security Features
-			</Text>
-			<Stack spacing={6}>
-				<Flex>
-					<Flex w="100%" alignItems="baseline" flexDir="column">
-						<Text fontSize="sm">Use Secure App Cookie:</Text>
-						<Text fontSize="x-small">
-							Note: If you set this to insecure, it will set{' '}
-							<code>sameSite</code> property of cookie to <code>lax</code> mode
-						</Text>
-					</Flex>
-					<Flex justifyContent="start">
-						<InputField
-							variables={variables}
-							setVariables={setVariables}
-							inputType={SwitchInputType.APP_COOKIE_SECURE}
-						/>
-					</Flex>
-				</Flex>
-				<Flex>
-					<Flex w="100%" alignItems="baseline" flexDir="column">
-						<Text fontSize="sm">Use Secure Admin Cookie:</Text>
-					</Flex>
-					<Flex justifyContent="start">
-						<InputField
-							variables={variables}
-							setVariables={setVariables}
-							inputType={SwitchInputType.ADMIN_COOKIE_SECURE}
-						/>
-					</Flex>
-				</Flex>
-			</Stack>
-		</div>
-	);
-};
-
-export default Features;
--- a/dashboard/src/components/EnvComponents/JWTConfiguration.tsx
+++ b/dashboard/src/components/EnvComponents/JWTConfiguration.tsx
@ -1,200 +0,0 @@
-import React from 'react';
-import {
-	Flex,
-	Stack,
-	Center,
-	Text,
-	useMediaQuery,
-	Button,
-	useToast,
-} from '@chakra-ui/react';
-import {
-	HiddenInputType,
-	TextInputType,
-	TextAreaInputType,
-} from '../../constants';
-import GenerateKeysModal from '../GenerateKeysModal';
-import InputField from '../InputField';
-import { copyTextToClipboard } from '../../utils';
-
-const JSTConfigurations = ({
-	variables,
-	setVariables,
-	fieldVisibility,
-	setFieldVisibility,
-	SelectInputType,
-	getData,
-	HMACEncryptionType,
-	RSAEncryptionType,
-	ECDSAEncryptionType,
-}: any) => {
-	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
-	const toast = useToast();
-
-	const copyJSON = async () => {
-		try {
-			await copyTextToClipboard(
-				JSON.stringify({
-					type: variables.JWT_TYPE,
-					key: variables.JWT_PUBLIC_KEY || variables.JWT_SECRET,
-				}),
-			);
-			toast({
-				title: `JWT config copied successfully`,
-				isClosable: true,
-				status: 'success',
-				position: 'top-right',
-			});
-		} catch (err) {
-			console.error({
-				message: `Failed to copy JWT config`,
-				error: err,
-			});
-			toast({
-				title: `Failed to copy JWT config`,
-				isClosable: true,
-				status: 'error',
-				position: 'top-right',
-			});
-		}
-	};
-
-	return (
-		<div>
-			<Flex
-				borderRadius={5}
-				width="100%"
-				justifyContent="space-between"
-				alignItems="center"
-				paddingTop="2%"
-			>
-				<Text
-					fontSize={isNotSmallerScreen ? 'md' : 'sm'}
-					fontWeight="bold"
-					mb={5}
-				>
-					JWT (JSON Web Tokens) Configurations
-				</Text>
-				<Flex mb={7}>
-					<Button
-						colorScheme="blue"
-						h="1.75rem"
-						size="sm"
-						variant="ghost"
-						onClick={copyJSON}
-					>
-						Copy As JSON Config
-					</Button>
-					<GenerateKeysModal jwtType={variables.JWT_TYPE} getData={getData} />
-				</Flex>
-			</Flex>
-			<Stack spacing={6} padding="2% 0%">
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">JWT Type:</Text>
-					</Flex>
-					<Flex
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '2'}
-					>
-						<InputField
-							borderRadius={5}
-							variables={variables}
-							setVariables={setVariables}
-							inputType={SelectInputType}
-							value={SelectInputType}
-							options={{
-								...HMACEncryptionType,
-								...RSAEncryptionType,
-								...ECDSAEncryptionType,
-							}}
-						/>
-					</Flex>
-				</Flex>
-				{Object.values(HMACEncryptionType).includes(variables.JWT_TYPE) ? (
-					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-						<Flex w="30%" justifyContent="start" alignItems="center">
-							<Text fontSize="sm">JWT Secret</Text>
-						</Flex>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '2'}
-						>
-							<InputField
-								borderRadius={5}
-								variables={variables}
-								setVariables={setVariables}
-								fieldVisibility={fieldVisibility}
-								setFieldVisibility={setFieldVisibility}
-								inputType={HiddenInputType.JWT_SECRET}
-							/>
-						</Center>
-					</Flex>
-				) : (
-					<>
-						<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-							<Flex w="30%" justifyContent="start" alignItems="center">
-								<Text fontSize="sm">Public Key</Text>
-							</Flex>
-							<Center
-								w={isNotSmallerScreen ? '70%' : '100%'}
-								mt={isNotSmallerScreen ? '0' : '2'}
-							>
-								<InputField
-									borderRadius={5}
-									variables={variables}
-									setVariables={setVariables}
-									inputType={TextAreaInputType.JWT_PUBLIC_KEY}
-									placeholder="Add public key here"
-									minH="25vh"
-								/>
-							</Center>
-						</Flex>
-						<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-							<Flex w="30%" justifyContent="start" alignItems="center">
-								<Text fontSize="sm">Private Key</Text>
-							</Flex>
-							<Center
-								w={isNotSmallerScreen ? '70%' : '100%'}
-								mt={isNotSmallerScreen ? '0' : '2'}
-							>
-								<InputField
-									borderRadius={5}
-									variables={variables}
-									setVariables={setVariables}
-									inputType={TextAreaInputType.JWT_PRIVATE_KEY}
-									placeholder="Add private key here"
-									minH="25vh"
-								/>
-							</Center>
-						</Flex>
-					</>
-				)}
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex
-						w={isNotSmallerScreen ? '30%' : '40%'}
-						justifyContent="start"
-						alignItems="center"
-					>
-						<Text fontSize="sm" orientation="vertical">
-							JWT Role Claim:
-						</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '2'}
-					>
-						<InputField
-							borderRadius={5}
-							variables={variables}
-							setVariables={setVariables}
-							inputType={TextInputType.JWT_ROLE_CLAIM}
-						/>
-					</Center>
-				</Flex>
-			</Stack>
-		</div>
-	);
-};
-
-export default JSTConfigurations;
--- a/dashboard/src/components/EnvComponents/OAuthConfig.tsx
+++ b/dashboard/src/components/EnvComponents/OAuthConfig.tsx
@ -1,525 +0,0 @@
-import React from 'react';
-import InputField from '../InputField';
-import {
-	Flex,
-	Stack,
-	Center,
-	Text,
-	Box,
-	Divider,
-	useMediaQuery,
-} from '@chakra-ui/react';
-import {
-	FaGoogle,
-	FaGithub,
-	FaFacebookF,
-	FaLinkedin,
-	FaApple,
-	FaTwitter,
-	FaMicrosoft,
-	FaTwitch,
-	FaDiscord,
-} from 'react-icons/fa';
-import {
-	TextInputType,
-	HiddenInputType,
-	ResponseModes,
-	ResponseTypes,
-	SelectInputType,
-} from '../../constants';
-
-const OAuthConfig = ({
-	envVariables,
-	setVariables,
-	fieldVisibility,
-	setFieldVisibility,
-}: any) => {
-	const [isNotSmallerScreen] = useMediaQuery('(min-width:667px)');
-	return (
-		<div>
-			<Box>
-				<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={6}>
-					Authorizer Config
-				</Text>
-				<Stack spacing={6} padding="2% 0%">
-					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-						<Flex w="30%" justifyContent="start" alignItems="center">
-							<Text fontSize="sm">Client ID</Text>
-						</Flex>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-						>
-							<InputField
-								variables={envVariables}
-								setVariables={() => {}}
-								inputType={TextInputType.CLIENT_ID}
-								placeholder="Client ID"
-								readOnly={true}
-							/>
-						</Center>
-					</Flex>
-					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-						<Flex w="30%" justifyContent="start" alignItems="center">
-							<Text fontSize="sm">Client Secret</Text>
-						</Flex>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-						>
-							<InputField
-								variables={envVariables}
-								setVariables={setVariables}
-								fieldVisibility={fieldVisibility}
-								setFieldVisibility={setFieldVisibility}
-								inputType={HiddenInputType.CLIENT_SECRET}
-								placeholder="Client Secret"
-								readOnly={true}
-							/>
-						</Center>
-					</Flex>
-					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-						<Flex w="30%" justifyContent="start" alignItems="center">
-							<Text fontSize="sm">Default Response Type:</Text>
-						</Flex>
-						<Flex
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '2'}
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								inputType={SelectInputType.DEFAULT_AUTHORIZE_RESPONSE_TYPE}
-								value={SelectInputType}
-								options={ResponseTypes}
-							/>
-						</Flex>
-					</Flex>
-					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-						<Flex w="30%" justifyContent="start" alignItems="center">
-							<Text fontSize="sm">Default Response Mode:</Text>
-						</Flex>
-						<Flex
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '2'}
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								inputType={SelectInputType.DEFAULT_AUTHORIZE_RESPONSE_MODE}
-								value={SelectInputType}
-								options={ResponseModes}
-							/>
-						</Flex>
-					</Flex>
-				</Stack>
-				<Divider mt={5} mb={2} color="blackAlpha.700" />
-				<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={4}>
-					Social Media Logins
-				</Text>
-				<Stack spacing={6} padding="2% 0%">
-					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-						<Center
-							w={isNotSmallerScreen ? '55px' : '35px'}
-							h="35px"
-							marginRight="1.5%"
-							border="1px solid #ff3e30"
-							borderRadius="5px"
-						>
-							<FaGoogle style={{ color: '#ff3e30' }} />
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-							marginRight="1.5%"
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								inputType={TextInputType.GOOGLE_CLIENT_ID}
-								placeholder="Google Client ID"
-							/>
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								fieldVisibility={fieldVisibility}
-								setFieldVisibility={setFieldVisibility}
-								inputType={HiddenInputType.GOOGLE_CLIENT_SECRET}
-								placeholder="Google Client Secret"
-							/>
-						</Center>
-					</Flex>
-					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-						<Center
-							w={isNotSmallerScreen ? '55px' : '35px'}
-							h="35px"
-							marginRight="1.5%"
-							border="1px solid #171515"
-							borderRadius="5px"
-						>
-							<FaGithub style={{ color: '#171515' }} />
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-							marginRight="1.5%"
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								inputType={TextInputType.GITHUB_CLIENT_ID}
-								placeholder="Github Client ID"
-							/>
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								fieldVisibility={fieldVisibility}
-								setFieldVisibility={setFieldVisibility}
-								inputType={HiddenInputType.GITHUB_CLIENT_SECRET}
-								placeholder="Github Client Secret"
-							/>
-						</Center>
-					</Flex>
-					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-						<Center
-							w={isNotSmallerScreen ? '55px' : '35px'}
-							h="35px"
-							marginRight="1.5%"
-							border="1px solid #3b5998"
-							borderRadius="5px"
-						>
-							<FaFacebookF style={{ color: '#3b5998' }} />
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-							marginRight="1.5%"
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								inputType={TextInputType.FACEBOOK_CLIENT_ID}
-								placeholder="Facebook Client ID"
-							/>
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								fieldVisibility={fieldVisibility}
-								setFieldVisibility={setFieldVisibility}
-								inputType={HiddenInputType.FACEBOOK_CLIENT_SECRET}
-								placeholder="Facebook Client Secret"
-							/>
-						</Center>
-					</Flex>
-					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-						<Center
-							w={isNotSmallerScreen ? '55px' : '35px'}
-							h="35px"
-							marginRight="1.5%"
-							border="1px solid #3b5998"
-							borderRadius="5px"
-						>
-							<FaLinkedin style={{ color: '#3b5998' }} />
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-							marginRight="1.5%"
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								inputType={TextInputType.LINKEDIN_CLIENT_ID}
-								placeholder="LinkedIn Client ID"
-							/>
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								fieldVisibility={fieldVisibility}
-								setFieldVisibility={setFieldVisibility}
-								inputType={HiddenInputType.LINKEDIN_CLIENT_SECRET}
-								placeholder="LinkedIn Client Secret"
-							/>
-						</Center>
-					</Flex>
-					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-						<Center
-							w={isNotSmallerScreen ? '55px' : '35px'}
-							h="35px"
-							marginRight="1.5%"
-							border="1px solid #3b5998"
-							borderRadius="5px"
-						>
-							<FaApple style={{ color: '#3b5998' }} />
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-							marginRight="1.5%"
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								inputType={TextInputType.APPLE_CLIENT_ID}
-								placeholder="Apple Client ID"
-							/>
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								fieldVisibility={fieldVisibility}
-								setFieldVisibility={setFieldVisibility}
-								inputType={HiddenInputType.APPLE_CLIENT_SECRET}
-								placeholder="Apple Client Secret"
-							/>
-						</Center>
-					</Flex>
-					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-						<Center
-							w={isNotSmallerScreen ? '55px' : '35px'}
-							h="35px"
-							marginRight="1.5%"
-							border="1px solid #3b5998"
-							borderRadius="5px"
-						>
-							<FaDiscord style={{ color: '#7289da' }} />
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-							marginRight="1.5%"
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								inputType={TextInputType.DISCORD_CLIENT_ID}
-								placeholder="Discord Client ID"
-							/>
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								fieldVisibility={fieldVisibility}
-								setFieldVisibility={setFieldVisibility}
-								inputType={HiddenInputType.DISCORD_CLIENT_SECRET}
-								placeholder="Discord Client Secret"
-							/>
-						</Center>
-					</Flex>
-					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-						<Center
-							w={isNotSmallerScreen ? '55px' : '35px'}
-							h="35px"
-							marginRight="1.5%"
-							border="1px solid #3b5998"
-							borderRadius="5px"
-						>
-							<FaTwitter />
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-							marginRight="1.5%"
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								inputType={TextInputType.TWITTER_CLIENT_ID}
-								placeholder="Twitter Client ID"
-							/>
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								fieldVisibility={fieldVisibility}
-								setFieldVisibility={setFieldVisibility}
-								inputType={HiddenInputType.TWITTER_CLIENT_SECRET}
-								placeholder="Twitter Client Secret"
-							/>
-						</Center>
-					</Flex>
-					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-						<Center
-							w={isNotSmallerScreen ? '55px' : '35px'}
-							h="35px"
-							marginRight="1.5%"
-							border="1px solid #3b5998"
-							borderRadius="5px"
-						>
-							<FaMicrosoft />
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '35%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-							marginRight="1.5%"
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								inputType={TextInputType.MICROSOFT_ACTIVE_DIRECTORY_TENANT_ID}
-								placeholder="Microsoft Active Directory TenantID"
-							/>
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '35%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-							marginRight="1.5%"
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								inputType={TextInputType.MICROSOFT_CLIENT_ID}
-								placeholder="Microsoft Client ID"
-							/>
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								fieldVisibility={fieldVisibility}
-								setFieldVisibility={setFieldVisibility}
-								inputType={HiddenInputType.MICROSOFT_CLIENT_SECRET}
-								placeholder="Microsoft Client Secret"
-							/>
-						</Center>
-					</Flex>
-					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-						<Center
-							w={isNotSmallerScreen ? '55px' : '35px'}
-							h="35px"
-							marginRight="1.5%"
-							border="1px solid #3b5998"
-							borderRadius="5px"
-						>
-							<FaTwitch />
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-							marginRight="1.5%"
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								inputType={TextInputType.TWITCH_CLIENT_ID}
-								placeholder="Twitch Client ID"
-							/>
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								fieldVisibility={fieldVisibility}
-								setFieldVisibility={setFieldVisibility}
-								inputType={HiddenInputType.TWITCH_CLIENT_SECRET}
-								placeholder="Twitch Client Secret"
-							/>
-						</Center>
-					</Flex>
-					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-						<Center
-							w={isNotSmallerScreen ? '55px' : '35px'}
-							h="35px"
-							marginRight="1.5%"
-							border="1px solid #3b5998"
-							borderRadius="5px"
-						>
-							<img
-								src="https://authorizer.dev/_next/image?url=%2Fimages%2Froblox.png&w=25&q=25"
-								alt="Roblox"
-							/>
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-							marginRight="1.5%"
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								inputType={TextInputType.ROBLOX_CLIENT_ID}
-								placeholder="Roblox Client ID"
-							/>
-						</Center>
-						<Center
-							w={isNotSmallerScreen ? '70%' : '100%'}
-							mt={isNotSmallerScreen ? '0' : '3'}
-						>
-							<InputField
-								borderRadius={5}
-								variables={envVariables}
-								setVariables={setVariables}
-								fieldVisibility={fieldVisibility}
-								setFieldVisibility={setFieldVisibility}
-								inputType={HiddenInputType.ROBLOX_CLIENT_SECRET}
-								placeholder="Roblox Client Secret"
-							/>
-						</Center>
-					</Flex>
-				</Stack>
-			</Box>
-		</div>
-	);
-};
-
-export default OAuthConfig;
--- a/dashboard/src/components/EnvComponents/OrganizationInfo.tsx
+++ b/dashboard/src/components/EnvComponents/OrganizationInfo.tsx
@ -1,60 +0,0 @@
-import React from 'react';
-import { Flex, Stack, Center, Text, useMediaQuery } from '@chakra-ui/react';
-import InputField from '../InputField';
-import { TextInputType } from '../../constants';
-
-const OrganizationInfo = ({ variables, setVariables }: any) => {
-	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
-	return (
-		<div>
-			{' '}
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
-				Organization Information
-			</Text>
-			<Stack spacing={6} padding="2% 0%">
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex
-						w={isNotSmallerScreen ? '30%' : '40%'}
-						justifyContent="start"
-						alignItems="center"
-					>
-						<Text fontSize="sm">Organization Name:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '3'}
-					>
-						<InputField
-							borderRadius={5}
-							variables={variables}
-							setVariables={setVariables}
-							inputType={TextInputType.ORGANIZATION_NAME}
-						/>
-					</Center>
-				</Flex>
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex
-						w={isNotSmallerScreen ? '30%' : '40%'}
-						justifyContent="start"
-						alignItems="center"
-					>
-						<Text fontSize="sm">Organization Logo:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '3'}
-					>
-						<InputField
-							borderRadius={5}
-							variables={variables}
-							setVariables={setVariables}
-							inputType={TextInputType.ORGANIZATION_LOGO}
-						/>
-					</Center>
-				</Flex>
-			</Stack>
-		</div>
-	);
-};
-
-export default OrganizationInfo;
--- a/dashboard/src/components/EnvComponents/Roles.tsx
+++ b/dashboard/src/components/EnvComponents/Roles.tsx
@ -1,68 +0,0 @@
-import React from 'react';
-import { Flex, Stack, Center, Text, useMediaQuery } from '@chakra-ui/react';
-import { ArrayInputType } from '../../constants';
-import InputField from '../InputField';
-
-const Roles = ({ variables, setVariables }: any) => {
-	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
-
-	return (
-		<div>
-			{' '}
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
-				Roles
-			</Text>
-			<Stack spacing={6} padding="2% 0%">
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Roles:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '2'}
-						overflow="hidden"
-					>
-						<InputField
-							borderRadius={7}
-							variables={variables}
-							setVariables={setVariables}
-							inputType={ArrayInputType.ROLES}
-						/>
-					</Center>
-				</Flex>
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Default Roles:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '2'}
-					>
-						<InputField
-							variables={variables}
-							setVariables={setVariables}
-							inputType={ArrayInputType.DEFAULT_ROLES}
-						/>
-					</Center>
-				</Flex>
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Protected Roles:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '2'}
-					>
-						<InputField
-							variables={variables}
-							setVariables={setVariables}
-							inputType={ArrayInputType.PROTECTED_ROLES}
-						/>
-					</Center>
-				</Flex>
-			</Stack>
-		</div>
-	);
-};
-
-export default Roles;
--- a/dashboard/src/components/EnvComponents/SecurityAdminSecret.tsx
+++ b/dashboard/src/components/EnvComponents/SecurityAdminSecret.tsx
@ -1,138 +0,0 @@
-import React from 'react';
-import {
-	Flex,
-	Stack,
-	Center,
-	Text,
-	Input,
-	InputGroup,
-	InputRightElement,
-	useMediaQuery,
-} from '@chakra-ui/react';
-import { FaRegEyeSlash, FaRegEye } from 'react-icons/fa';
-import InputField from '../InputField';
-import { HiddenInputType } from '../../constants';
-const SecurityAdminSecret = ({
-	variables,
-	setVariables,
-	fieldVisibility,
-	setFieldVisibility,
-	validateAdminSecretHandler,
-	adminSecret,
-}: any) => {
-	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
-	return (
-		<div>
-			{' '}
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold">
-				Security (Admin Secret)
-			</Text>
-			<Stack
-				spacing={6}
-				padding="0 5%"
-				marginTop="3%"
-				border="1px solid #ff7875"
-				borderRadius="5px"
-			>
-				<Flex
-					marginTop={isNotSmallerScreen ? '3%' : '5%'}
-					direction={isNotSmallerScreen ? 'row' : 'column'}
-				>
-					<Flex
-						mt={3}
-						w={isNotSmallerScreen ? '30%' : '40%'}
-						justifyContent="start"
-						alignItems="center"
-					>
-						<Text fontSize="sm">Old Admin Secret:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '3'}
-					>
-						<InputGroup size="sm">
-							<Input
-								borderRadius={5}
-								size="sm"
-								placeholder="Enter Old Admin Secret"
-								value={adminSecret.value as string}
-								onChange={(event: any) => validateAdminSecretHandler(event)}
-								type={
-									!fieldVisibility[HiddenInputType.OLD_ADMIN_SECRET]
-										? 'password'
-										: 'text'
-								}
-							/>
-							<InputRightElement
-								right="5px"
-								children={
-									<Flex>
-										{fieldVisibility[HiddenInputType.OLD_ADMIN_SECRET] ? (
-											<Center
-												w="25px"
-												margin="0 1.5%"
-												cursor="pointer"
-												onClick={() =>
-													setFieldVisibility({
-														...fieldVisibility,
-														[HiddenInputType.OLD_ADMIN_SECRET]: false,
-													})
-												}
-											>
-												<FaRegEyeSlash color="#bfbfbf" />
-											</Center>
-										) : (
-											<Center
-												w="25px"
-												margin="0 1.5%"
-												cursor="pointer"
-												onClick={() =>
-													setFieldVisibility({
-														...fieldVisibility,
-														[HiddenInputType.OLD_ADMIN_SECRET]: true,
-													})
-												}
-											>
-												<FaRegEye color="#bfbfbf" />
-											</Center>
-										)}
-									</Flex>
-								}
-							/>
-						</InputGroup>
-					</Center>
-				</Flex>
-				<Flex
-					paddingBottom="3%"
-					direction={isNotSmallerScreen ? 'row' : 'column'}
-				>
-					<Flex
-						w={isNotSmallerScreen ? '30%' : '50%'}
-						justifyContent="start"
-						alignItems="center"
-					>
-						<Text fontSize="sm">New Admin Secret:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '3'}
-					>
-						<InputField
-							borderRadius={5}
-							mb={3}
-							variables={variables}
-							setVariables={setVariables}
-							inputType={HiddenInputType.ADMIN_SECRET}
-							fieldVisibility={fieldVisibility}
-							setFieldVisibility={setFieldVisibility}
-							isDisabled={adminSecret.disableInputField}
-							placeholder="Enter New Admin Secret"
-						/>
-					</Center>
-				</Flex>
-			</Stack>
-		</div>
-	);
-};
-
-export default SecurityAdminSecret;
--- a/dashboard/src/components/EnvComponents/SessionStorage.tsx
+++ b/dashboard/src/components/EnvComponents/SessionStorage.tsx
@ -1,42 +0,0 @@
-import React from 'react';
-import { Flex, Stack, Center, Text, useMediaQuery } from '@chakra-ui/react';
-import InputField from '../InputField';
-
-const SessionStorage = ({ variables, setVariables, RedisURL }: any) => {
-	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
-	return (
-		<div>
-			{' '}
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
-				Session Storage
-			</Text>
-			<Text fontStyle="italic" fontSize="sm" color="blackAlpha.500" mt={3}>
-				Note: Redis related environment variables cannot be updated from
-				dashboard. Please use .env file or OS environment variables to update
-				it.
-			</Text>
-			<Stack spacing={6} padding="2% 0%">
-				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Redis URL:</Text>
-					</Flex>
-					<Center
-						w={isNotSmallerScreen ? '70%' : '100%'}
-						mt={isNotSmallerScreen ? '0' : '3'}
-					>
-						<InputField
-							disabled
-							borderRadius={5}
-							variables={variables}
-							setVariables={setVariables}
-							inputType={RedisURL}
-							placeholder="Redis URL"
-						/>
-					</Center>
-				</Flex>
-			</Stack>
-		</div>
-	);
-};
-
-export default SessionStorage;
--- a/dashboard/src/components/GenerateKeysModal.tsx
+++ b/dashboard/src/components/GenerateKeysModal.tsx
@ -1,247 +0,0 @@
-import React from 'react';
-import {
-	Button,
-	Center,
-	Flex,
-	Modal,
-	ModalBody,
-	ModalCloseButton,
-	ModalContent,
-	ModalFooter,
-	ModalHeader,
-	ModalOverlay,
-	useDisclosure,
-	Text,
-	useToast,
-	Input,
-	Spinner,
-} from '@chakra-ui/react';
-import { useClient } from 'urql';
-import { FaSave } from 'react-icons/fa';
-import {
-	ECDSAEncryptionType,
-	HMACEncryptionType,
-	RSAEncryptionType,
-	SelectInputType,
-	TextAreaInputType,
-} from '../constants';
-import InputField from './InputField';
-import { GenerateKeys, UpdateEnvVariables } from '../graphql/mutation';
-
-interface propTypes {
-	jwtType: string;
-	getData: Function;
-}
-
-interface stateVarTypes {
-	JWT_TYPE: string;
-	JWT_SECRET: string;
-	JWT_PRIVATE_KEY: string;
-	JWT_PUBLIC_KEY: string;
-}
-
-const initState: stateVarTypes = {
-	JWT_TYPE: '',
-	JWT_SECRET: '',
-	JWT_PRIVATE_KEY: '',
-	JWT_PUBLIC_KEY: '',
-};
-
-const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
-	const client = useClient();
-	const toast = useToast();
-	const { isOpen, onOpen, onClose } = useDisclosure();
-	const [stateVariables, setStateVariables] = React.useState<stateVarTypes>({
-		...initState,
-	});
-	const [isLoading, setIsLoading] = React.useState(false);
-
-	React.useEffect(() => {
-		if (isOpen) {
-			setStateVariables({ ...initState, JWT_TYPE: jwtType });
-		}
-	}, [isOpen]);
-
-	const fetchKeys = async () => {
-		setIsLoading(true);
-		try {
-			const res = await client
-				.mutation(GenerateKeys, { params: { type: stateVariables.JWT_TYPE } })
-				.toPromise();
-			if (res?.error) {
-				toast({
-					title: 'Error occurred generating jwt keys',
-					isClosable: true,
-					status: 'error',
-					position: 'top-right',
-				});
-				closeHandler();
-			} else {
-				setStateVariables({
-					...stateVariables,
-					JWT_SECRET: res?.data?._generate_jwt_keys?.secret || '',
-					JWT_PRIVATE_KEY: res?.data?._generate_jwt_keys?.private_key || '',
-					JWT_PUBLIC_KEY: res?.data?._generate_jwt_keys?.public_key || '',
-				});
-			}
-		} catch (error) {
-			console.log(error);
-		} finally {
-			setIsLoading(false);
-		}
-	};
-
-	React.useEffect(() => {
-		if (isOpen && stateVariables.JWT_TYPE) {
-			fetchKeys();
-		}
-	}, [stateVariables.JWT_TYPE]);
-
-	const saveHandler = async () => {
-		const res = await client
-			.mutation(UpdateEnvVariables, { params: { ...stateVariables } })
-			.toPromise();
-
-		if (res.error) {
-			toast({
-				title: 'Error occurred setting jwt keys',
-				isClosable: true,
-				status: 'error',
-				position: 'top-right',
-			});
-
-			return;
-		}
-		toast({
-			title: 'JWT keys updated successfully',
-			isClosable: true,
-			status: 'success',
-			position: 'top-right',
-		});
-		closeHandler();
-	};
-
-	const closeHandler = () => {
-		setStateVariables({ ...initState });
-		getData();
-		onClose();
-	};
-
-	return (
-		<>
-			<Button
-				colorScheme="blue"
-				h="1.75rem"
-				size="sm"
-				variant="ghost"
-				onClick={onOpen}
-			>
-				Generate new keys
-			</Button>
-			<Modal isOpen={isOpen} onClose={closeHandler}>
-				<ModalOverlay />
-				<ModalContent>
-					<ModalHeader>New JWT keys</ModalHeader>
-					<ModalCloseButton />
-					<ModalBody>
-						<Flex>
-							<Flex w="30%" justifyContent="start" alignItems="center">
-								<Text fontSize="sm">JWT Type:</Text>
-							</Flex>
-							<InputField
-								variables={stateVariables}
-								setVariables={setStateVariables}
-								inputType={SelectInputType.JWT_TYPE}
-								value={SelectInputType.JWT_TYPE}
-								options={{
-									...HMACEncryptionType,
-									...RSAEncryptionType,
-									...ECDSAEncryptionType,
-								}}
-							/>
-						</Flex>
-						{isLoading ? (
-							<Center minH="25vh">
-								<Spinner />
-							</Center>
-						) : (
-							<>
-								{Object.values(HMACEncryptionType).includes(
-									stateVariables.JWT_TYPE,
-								) ? (
-									<Flex marginTop="8">
-										<Flex w="23%" justifyContent="start" alignItems="center">
-											<Text fontSize="sm">JWT Secret</Text>
-										</Flex>
-										<Center w="77%">
-											<Input
-												size="sm"
-												value={stateVariables.JWT_SECRET}
-												onChange={(event: any) =>
-													setStateVariables({
-														...stateVariables,
-														JWT_SECRET: event.target.value,
-													})
-												}
-												readOnly
-											/>
-										</Center>
-									</Flex>
-								) : (
-									<>
-										<Flex marginTop="8">
-											<Flex w="23%" justifyContent="start" alignItems="center">
-												<Text fontSize="sm">Public Key</Text>
-											</Flex>
-											<Center w="77%">
-												<InputField
-													variables={stateVariables}
-													setVariables={setStateVariables}
-													inputType={TextAreaInputType.JWT_PUBLIC_KEY}
-													placeholder="Add public key here"
-													minH="25vh"
-													readOnly
-												/>
-											</Center>
-										</Flex>
-										<Flex marginTop="8">
-											<Flex w="23%" justifyContent="start" alignItems="center">
-												<Text fontSize="sm">Private Key</Text>
-											</Flex>
-											<Center w="77%">
-												<InputField
-													variables={stateVariables}
-													setVariables={setStateVariables}
-													inputType={TextAreaInputType.JWT_PRIVATE_KEY}
-													placeholder="Add private key here"
-													minH="25vh"
-													readOnly
-												/>
-											</Center>
-										</Flex>
-									</>
-								)}
-							</>
-						)}
-					</ModalBody>
-
-					<ModalFooter>
-						<Button
-							leftIcon={<FaSave />}
-							colorScheme="blue"
-							variant="solid"
-							onClick={saveHandler}
-							isDisabled={isLoading}
-						>
-							<Center h="100%" pt="5%">
-								Apply
-							</Center>
-						</Button>
-					</ModalFooter>
-				</ModalContent>
-			</Modal>
-		</>
-	);
-};
-
-export default GenerateKeysModal;
--- a/dashboard/src/components/InputField.tsx
+++ b/dashboard/src/components/InputField.tsx
@ -1,436 +0,0 @@
-import React, { useState } from 'react';
-import {
-	Box,
-	Flex,
-	Input,
-	Center,
-	InputGroup,
-	InputRightElement,
-	Tag,
-	TagLabel,
-	TagRightIcon,
-	Select,
-	Textarea,
-	Switch,
-	Text,
-	MenuButton,
-	MenuList,
-	MenuItemOption,
-	MenuOptionGroup,
-	Button,
-	Menu,
-} from '@chakra-ui/react';
-import {
-	FaRegClone,
-	FaRegEye,
-	FaRegEyeSlash,
-	FaPlus,
-	FaTimes,
-	FaAngleDown,
-} from 'react-icons/fa';
-import {
-	ArrayInputOperations,
-	ArrayInputType,
-	SelectInputType,
-	HiddenInputType,
-	TextInputType,
-	TextAreaInputType,
-	SwitchInputType,
-	DateInputType,
-	MultiSelectInputType,
-} from '../constants';
-import { copyTextToClipboard } from '../utils';
-
-const InputField = ({
-	inputType,
-	variables,
-	setVariables,
-	fieldVisibility,
-	setFieldVisibility,
-	availableRoles,
-	// This prop is added to improve the user experience for the boolean ENV variable having `DISABLE_` prefix, as those values need to be considered in inverted form.
-	hasReversedValue,
-	...downshiftProps
-}: any) => {
-	const props = {
-		size: 'sm',
-		...downshiftProps,
-	};
-	const [availableUserRoles, setAvailableUserRoles] =
-		useState<string[]>(availableRoles);
-	const [inputFieldVisibility, setInputFieldVisibility] = useState<
-		Record<string, boolean>
-	>({
-		ROLES: false,
-		DEFAULT_ROLES: false,
-		PROTECTED_ROLES: false,
-		ALLOWED_ORIGINS: false,
-		roles: false,
-	});
-	const [inputData, setInputData] = useState<Record<string, string>>({
-		ROLES: '',
-		DEFAULT_ROLES: '',
-		PROTECTED_ROLES: '',
-		ALLOWED_ORIGINS: '',
-		roles: '',
-	});
-	const updateInputHandler = (
-		type: string,
-		operation: any,
-		role: string = '',
-	) => {
-		if (operation === ArrayInputOperations.APPEND) {
-			if (inputData[type] !== '') {
-				setVariables({
-					...variables,
-					[type]: [...variables[type], inputData[type]],
-				});
-				setInputData({ ...inputData, [type]: '' });
-			}
-			setInputFieldVisibility({ ...inputFieldVisibility, [type]: false });
-		}
-		if (operation === ArrayInputOperations.REMOVE) {
-			let updatedEnvVars = variables[type].filter(
-				(item: string) => item !== role,
-			);
-			setVariables({
-				...variables,
-				[type]: updatedEnvVars,
-			});
-		}
-	};
-	if (Object.values(TextInputType).includes(inputType)) {
-		return (
-			<InputGroup size="sm">
-				<Input
-					{...props}
-					value={variables[inputType] ? variables[inputType] : ''}
-					onChange={(
-						event: Event & {
-							target: HTMLInputElement;
-						},
-					) =>
-						setVariables({
-							...variables,
-							[inputType]: event.target.value,
-						})
-					}
-				/>
-				<InputRightElement
-					children={<FaRegClone color="#bfbfbf" />}
-					cursor="pointer"
-					onClick={() => copyTextToClipboard(variables[inputType])}
-				/>
-			</InputGroup>
-		);
-	}
-	if (Object.values(HiddenInputType).includes(inputType)) {
-		return (
-			<InputGroup size="sm">
-				<Input
-					{...props}
-					value={variables[inputType] || ''}
-					onChange={(
-						event: Event & {
-							target: HTMLInputElement;
-						},
-					) =>
-						setVariables({
-							...variables,
-							[inputType]: event.target.value,
-						})
-					}
-					type={!fieldVisibility[inputType] ? 'password' : 'text'}
-				/>
-				<InputRightElement
-					right="15px"
-					children={
-						<Flex>
-							{fieldVisibility[inputType] ? (
-								<Center
-									w="25px"
-									margin="0 1.5%"
-									cursor="pointer"
-									onClick={() =>
-										setFieldVisibility({
-											...fieldVisibility,
-											[inputType]: false,
-										})
-									}
-								>
-									<FaRegEyeSlash color="#bfbfbf" />
-								</Center>
-							) : (
-								<Center
-									w="25px"
-									margin="0 1.5%"
-									cursor="pointer"
-									onClick={() =>
-										setFieldVisibility({
-											...fieldVisibility,
-											[inputType]: true,
-										})
-									}
-								>
-									<FaRegEye color="#bfbfbf" />
-								</Center>
-							)}
-							<Center
-								w="25px"
-								margin="0 1.5%"
-								cursor="pointer"
-								onClick={() => copyTextToClipboard(variables[inputType])}
-							>
-								<FaRegClone color="#bfbfbf" />
-							</Center>
-						</Flex>
-					}
-				/>
-			</InputGroup>
-		);
-	}
-	if (Object.values(ArrayInputType).includes(inputType)) {
-		return (
-			<Flex
-				border="1px solid #e2e8f0"
-				w="100%"
-				borderRadius={5}
-				paddingTop="0.5%"
-				overflowX={variables[inputType].length > 3 ? 'scroll' : 'hidden'}
-				overflowY="hidden"
-				justifyContent="start"
-				alignItems="center"
-			>
-				{variables[inputType].map((role: string, index: number) => (
-					<Box key={index} margin="0.5%" role="group">
-						<Tag
-							size="sm"
-							variant="outline"
-							colorScheme="gray"
-							minW="fit-content"
-						>
-							<TagLabel cursor="default">{role}</TagLabel>
-							<TagRightIcon
-								boxSize="12px"
-								as={FaTimes}
-								display="none"
-								cursor="pointer"
-								_groupHover={{ display: 'block' }}
-								onClick={() =>
-									updateInputHandler(
-										inputType,
-										ArrayInputOperations.REMOVE,
-										role,
-									)
-								}
-							/>
-						</Tag>
-					</Box>
-				))}
-				{inputFieldVisibility[inputType] ? (
-					<Box ml="1%" mb="0.75%">
-						<Input
-							type="text"
-							size="xs"
-							minW="150px"
-							placeholder="add a new value"
-							value={inputData[inputType] || ''}
-							onChange={(e: any) => {
-								setInputData({ ...inputData, [inputType]: e.target.value });
-							}}
-							onBlur={() =>
-								updateInputHandler(inputType, ArrayInputOperations.APPEND)
-							}
-							onKeyPress={(event) => {
-								if (event.key === 'Enter') {
-									updateInputHandler(inputType, ArrayInputOperations.APPEND);
-								}
-							}}
-						/>
-					</Box>
-				) : (
-					<Box
-						marginLeft="0.5%"
-						cursor="pointer"
-						onClick={() =>
-							setInputFieldVisibility({
-								...inputFieldVisibility,
-								[inputType]: true,
-							})
-						}
-					>
-						<Tag
-							size="sm"
-							variant="outline"
-							colorScheme="gray"
-							minW="fit-content"
-						>
-							<FaPlus />
-						</Tag>
-					</Box>
-				)}
-			</Flex>
-		);
-	}
-	if (Object.values(SelectInputType).includes(inputType)) {
-		const { options, ...rest } = props;
-		return (
-			<Select
-				size="sm"
-				{...rest}
-				value={variables[inputType] ? variables[inputType] : ''}
-				onChange={(e) =>
-					setVariables({ ...variables, [inputType]: e.target.value })
-				}
-			>
-				{Object.entries(options).map(([key, value]: any) => (
-					<option value={value} key={key}>
-						{key}
-					</option>
-				))}
-			</Select>
-		);
-	}
-	if (Object.values(MultiSelectInputType).includes(inputType)) {
-		return (
-			<Flex w="100%" style={{ position: 'relative' }}>
-				<Flex
-					border="1px solid #e2e8f0"
-					w="100%"
-					borderRadius="var(--chakra-radii-sm)"
-					p="1% 0 0 2.5%"
-					overflowX={variables[inputType].length > 3 ? 'scroll' : 'hidden'}
-					overflowY="hidden"
-					justifyContent="space-between"
-					alignItems="center"
-				>
-					<Flex justifyContent="start" alignItems="center" w="100%" wrap="wrap">
-						{variables[inputType].map((role: string, index: number) => (
-							<Box key={index} margin="0.5%" role="group">
-								<Tag
-									size="sm"
-									variant="outline"
-									colorScheme="gray"
-									minW="fit-content"
-								>
-									<TagLabel cursor="default">{role}</TagLabel>
-									<TagRightIcon
-										boxSize="12px"
-										as={FaTimes}
-										display="none"
-										cursor="pointer"
-										_groupHover={{ display: 'block' }}
-										onClick={() =>
-											updateInputHandler(
-												inputType,
-												ArrayInputOperations.REMOVE,
-												role,
-											)
-										}
-									/>
-								</Tag>
-							</Box>
-						))}
-					</Flex>
-					<Menu matchWidth={true}>
-						<MenuButton px="10px" py="7.5px">
-							<FaAngleDown />
-						</MenuButton>
-						<MenuList
-							position="absolute"
-							top="0"
-							right="0"
-							zIndex="10"
-							maxH="150"
-							overflowX="scroll"
-						>
-							<MenuOptionGroup
-								title={undefined}
-								value={variables[inputType]}
-								type="checkbox"
-								onChange={(values: string[] | string) => {
-									setVariables({
-										...variables,
-										[inputType]: values,
-									});
-								}}
-							>
-								{availableUserRoles.map((role) => {
-									return (
-										<MenuItemOption
-											key={`multiselect-menu-${role}`}
-											value={role}
-										>
-											{role}
-										</MenuItemOption>
-									);
-								})}
-							</MenuOptionGroup>
-						</MenuList>
-					</Menu>
-				</Flex>
-			</Flex>
-		);
-	}
-	if (Object.values(TextAreaInputType).includes(inputType)) {
-		return (
-			<Textarea
-				{...props}
-				size="lg"
-				fontSize={14}
-				value={variables[inputType] ? variables[inputType] : ''}
-				onChange={(
-					event: Event & {
-						target: HTMLInputElement;
-					},
-				) =>
-					setVariables({
-						...variables,
-						[inputType]: event.target.value,
-					})
-				}
-			/>
-		);
-	}
-	if (Object.values(SwitchInputType).includes(inputType)) {
-		return (
-			<Flex w="25%" justifyContent="space-between">
-				<Text h="75%" fontWeight="bold" marginRight="2">
-					Off
-				</Text>
-				<Switch
-					size="md"
-					isChecked={
-						hasReversedValue ? !variables[inputType] : variables[inputType]
-					}
-					onChange={() => {
-						setVariables({
-							...variables,
-							[inputType]: !variables[inputType],
-						});
-					}}
-				/>
-				<Text h="75%" fontWeight="bold" marginLeft="2">
-					On
-				</Text>
-			</Flex>
-		);
-	}
-	if (Object.values(DateInputType).includes(inputType)) {
-		return (
-			<Flex border="1px solid #e2e8f0" w="100%" h="33px" padding="1%">
-				<input
-					type="date"
-					style={{ width: '100%', paddingLeft: '2.5%' }}
-					value={variables[inputType] ? variables[inputType] : ''}
-					onChange={(e) =>
-						setVariables({ ...variables, [inputType]: e.target.value })
-					}
-				/>
-			</Flex>
-		);
-	}
-	return null;
-};
-
-export default InputField;
--- a/dashboard/src/components/InviteMembersModal.tsx
+++ b/dashboard/src/components/InviteMembersModal.tsx
@ -1,385 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import {
-	Button,
-	Center,
-	Flex,
-	Modal,
-	ModalBody,
-	ModalCloseButton,
-	ModalContent,
-	ModalFooter,
-	ModalHeader,
-	ModalOverlay,
-	useDisclosure,
-	useToast,
-	Tabs,
-	TabList,
-	Tab,
-	TabPanels,
-	TabPanel,
-	InputGroup,
-	Input,
-	InputRightElement,
-	Text,
-	Link,
-	Tooltip,
-} from '@chakra-ui/react';
-import { useClient } from 'urql';
-import { FaUserPlus, FaMinusCircle, FaPlus, FaUpload } from 'react-icons/fa';
-import { useDropzone } from 'react-dropzone';
-import { validateEmail, validateURI } from '../utils';
-import { InviteMembers } from '../graphql/mutation';
-import { ArrayInputOperations } from '../constants';
-import parseCSV from '../utils/parseCSV';
-
-interface stateDataTypes {
-	value: string;
-	isInvalid: boolean;
-}
-
-interface requestParamTypes {
-	emails: string[];
-	redirect_uri?: string;
-}
-
-const initData: stateDataTypes = {
-	value: '',
-	isInvalid: false,
-};
-
-const InviteMembersModal = ({
-	updateUserList,
-	disabled = true,
-}: {
-	updateUserList: Function;
-	disabled: boolean;
-}) => {
-	const client = useClient();
-	const toast = useToast();
-	const { isOpen, onOpen, onClose } = useDisclosure();
-	const [tabIndex, setTabIndex] = useState<number>(0);
-	const [redirectURI, setRedirectURI] = useState<stateDataTypes>({
-		...initData,
-	});
-	const [emails, setEmails] = useState<stateDataTypes[]>([{ ...initData }]);
-	const [disableSendButton, setDisableSendButton] = useState<boolean>(false);
-	const [loading, setLoading] = React.useState<boolean>(false);
-	useEffect(() => {
-		if (redirectURI.isInvalid) {
-			setDisableSendButton(true);
-		} else if (emails.some((emailData) => emailData.isInvalid)) {
-			setDisableSendButton(true);
-		} else {
-			setDisableSendButton(false);
-		}
-	}, [redirectURI, emails]);
-	useEffect(() => {
-		return () => {
-			setRedirectURI({ ...initData });
-			setEmails([{ ...initData }]);
-		};
-	}, []);
-	const sendInviteHandler = async () => {
-		setLoading(true);
-		try {
-			const emailList = emails
-				.filter((emailData) => !emailData.isInvalid)
-				.map((emailData) => emailData.value);
-			const params: requestParamTypes = {
-				emails: emailList,
-			};
-			if (redirectURI.value !== '' && !redirectURI.isInvalid) {
-				params.redirect_uri = redirectURI.value;
-			}
-			if (emailList.length > 0) {
-				const res = await client
-					.mutation(InviteMembers, {
-						params,
-					})
-					.toPromise();
-				if (res.error) {
-					throw new Error('Internal server error');
-					return;
-				}
-				toast({
-					title: 'Invites sent successfully!',
-					isClosable: true,
-					status: 'success',
-					position: 'top-right',
-				});
-				setLoading(false);
-				updateUserList();
-			} else {
-				throw new Error('Please add emails');
-			}
-		} catch (error: any) {
-			toast({
-				title: error?.message || 'Error occurred, try again!',
-				isClosable: true,
-				status: 'error',
-				position: 'top-right',
-			});
-			setLoading(false);
-		}
-		closeModalHandler();
-	};
-	const updateEmailListHandler = (operation: string, index: number = 0) => {
-		switch (operation) {
-			case ArrayInputOperations.APPEND:
-				setEmails([...emails, { ...initData }]);
-				break;
-			case ArrayInputOperations.REMOVE:
-				const updatedEmailList = [...emails];
-				updatedEmailList.splice(index, 1);
-				setEmails(updatedEmailList);
-				break;
-			default:
-				break;
-		}
-	};
-	const inputChangeHandler = (value: string, index: number) => {
-		const updatedEmailList = [...emails];
-		updatedEmailList[index].value = value;
-		updatedEmailList[index].isInvalid = !validateEmail(value);
-		setEmails(updatedEmailList);
-	};
-	const changeTabsHandler = (index: number) => {
-		setTabIndex(index);
-	};
-	const onDrop = useCallback(async (acceptedFiles) => {
-		const result = await parseCSV(acceptedFiles[0], ',');
-		setEmails(result);
-		changeTabsHandler(0);
-	}, []);
-	const setRedirectURIHandler = (value: string) => {
-		const updatedRedirectURI: stateDataTypes = {
-			value: '',
-			isInvalid: false,
-		};
-		updatedRedirectURI.value = value;
-		updatedRedirectURI.isInvalid = !validateURI(value);
-		setRedirectURI(updatedRedirectURI);
-	};
-	const { getRootProps, getInputProps, isDragActive } = useDropzone({
-		onDrop,
-		accept: 'text/csv',
-	});
-	const closeModalHandler = () => {
-		setRedirectURI({
-			value: '',
-			isInvalid: false,
-		});
-		setEmails([
-			{
-				value: '',
-				isInvalid: false,
-			},
-		]);
-		onClose();
-	};
-	return (
-		<>
-			<Button
-				leftIcon={<FaUserPlus />}
-				colorScheme="blue"
-				variant="solid"
-				onClick={onOpen}
-				isDisabled={disabled}
-				size="sm"
-			>
-				<Center h="100%">
-					{disabled ? (
-						<Tooltip
-							mr={8}
-							mt={1}
-							hasArrow
-							bg="gray.300"
-							color="black"
-							label="Email verification is disabled, refer to 'Features' tab within 'Environment' to enable it."
-						>
-							Invite Members
-						</Tooltip>
-					) : (
-						'Invite Members'
-					)}
-				</Center>{' '}
-			</Button>
-			<Modal isOpen={isOpen} onClose={closeModalHandler} size="xl">
-				<ModalOverlay />
-				<ModalContent>
-					<ModalHeader>Invite Members</ModalHeader>
-					<ModalCloseButton />
-					<ModalBody>
-						<Tabs
-							isFitted
-							variant="enclosed"
-							index={tabIndex}
-							onChange={changeTabsHandler}
-						>
-							<TabList>
-								<Tab>Enter emails</Tab>
-								<Tab>Upload CSV</Tab>
-							</TabList>
-							<TabPanels
-								border="1px"
-								borderTop="0"
-								borderBottomRadius="5px"
-								borderColor="inherit"
-							>
-								<TabPanel>
-									<Flex flexDirection="column">
-										<Flex
-											width="100%"
-											justifyContent="start"
-											alignItems="center"
-											marginBottom="2%"
-										>
-											<Flex marginLeft="2.5%">Redirect URI</Flex>
-										</Flex>
-										<Flex
-											width="100%"
-											justifyContent="space-between"
-											alignItems="center"
-											marginBottom="2%"
-										>
-											<InputGroup size="md" marginBottom="2.5%">
-												<Input
-													pr="4.5rem"
-													type="text"
-													placeholder="https://domain.com/sign-up"
-													value={redirectURI.value}
-													isInvalid={redirectURI.isInvalid}
-													onChange={(e) =>
-														setRedirectURIHandler(e.currentTarget.value)
-													}
-												/>
-											</InputGroup>
-										</Flex>
-										<Flex
-											width="100%"
-											justifyContent="space-between"
-											alignItems="center"
-											marginBottom="2%"
-										>
-											<Flex marginLeft="2.5%">Emails</Flex>
-											<Flex>
-												<Button
-													leftIcon={<FaPlus />}
-													colorScheme="blue"
-													h="1.75rem"
-													size="sm"
-													variant="ghost"
-													onClick={() =>
-														updateEmailListHandler(ArrayInputOperations.APPEND)
-													}
-												>
-													Add more emails
-												</Button>
-											</Flex>
-										</Flex>
-										<Flex flexDirection="column" maxH={250} overflowY="scroll">
-											{emails.map((emailData, index) => (
-												<Flex
-													key={`email-data-${index}`}
-													justifyContent="center"
-													alignItems="center"
-												>
-													<InputGroup size="md" marginBottom="2.5%">
-														<Input
-															pr="4.5rem"
-															type="text"
-															placeholder="name@domain.com"
-															value={emailData.value}
-															isInvalid={emailData.isInvalid}
-															onChange={(e) =>
-																inputChangeHandler(e.currentTarget.value, index)
-															}
-														/>
-														<InputRightElement width="3rem">
-															<Button
-																h="1.75rem"
-																size="sm"
-																colorScheme="blackAlpha"
-																variant="ghost"
-																onClick={() =>
-																	updateEmailListHandler(
-																		ArrayInputOperations.REMOVE,
-																		index,
-																	)
-																}
-															>
-																<FaMinusCircle />
-															</Button>
-														</InputRightElement>
-													</InputGroup>
-												</Flex>
-											))}
-										</Flex>
-									</Flex>
-								</TabPanel>
-								<TabPanel>
-									<Flex
-										justify="center"
-										align="center"
-										textAlign="center"
-										bg="#f0f0f0"
-										h={230}
-										p={50}
-										m={2}
-										borderRadius={5}
-										{...getRootProps()}
-									>
-										<input {...getInputProps()} />
-										{isDragActive ? (
-											<Text>Drop the files here...</Text>
-										) : (
-											<Flex
-												flexDirection="column"
-												justifyContent="center"
-												alignItems="center"
-											>
-												<Center boxSize="20" color="blackAlpha.500">
-													<FaUpload fontSize="40" />
-												</Center>
-												<Text>
-													Drag 'n' drop the csv file here, or click to select.
-												</Text>
-												<Text size="xs">
-													Download{' '}
-													<Link
-														href={`/dashboard/public/sample.csv`}
-														download="sample.csv"
-														color="blue.600"
-														onClick={(e) => e.stopPropagation()}
-													>
-														{' '}
-														sample.csv
-													</Link>{' '}
-													and modify it.{' '}
-												</Text>
-											</Flex>
-										)}
-									</Flex>
-								</TabPanel>
-							</TabPanels>
-						</Tabs>
-					</ModalBody>
-					<ModalFooter>
-						<Button
-							colorScheme="blue"
-							variant="solid"
-							onClick={sendInviteHandler}
-							isDisabled={disableSendButton || loading}
-						>
-							<Center h="100%" pt="5%">
-								Send
-							</Center>
-						</Button>
-					</ModalFooter>
-				</ModalContent>
-			</Modal>
-		</>
-	);
-};
-
-export default InviteMembersModal;
--- a/dashboard/src/components/Menu.tsx
+++ b/dashboard/src/components/Menu.tsx
@ -1,6 +1,7 @@
-import React, { Fragment, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import {
 	IconButton,
+	Avatar,
 	Box,
 	CloseButton,
 	Flex,
@ -17,104 +18,34 @@ import {
 	MenuButton,
 	MenuItem,
 	MenuList,
-	Accordion,
-	AccordionButton,
-	AccordionPanel,
-	AccordionItem,
-	useMediaQuery,
 } from '@chakra-ui/react';
 import {
-	FiUser,
-	FiCode,
+	FiHome,
+	FiTrendingUp,
+	FiCompass,
+	FiStar,
 	FiSettings,
 	FiMenu,
+	FiUser,
 	FiUsers,
 	FiChevronDown,
-	FiLink,
-	FiFileText,
 } from 'react-icons/fi';
-import { BiCustomize } from 'react-icons/bi';
-import { AiOutlineKey } from 'react-icons/ai';
-import { SiOpenaccess, SiJsonwebtokens } from 'react-icons/si';
-import { MdSecurity } from 'react-icons/md';
-import { RiDatabase2Line } from 'react-icons/ri';
-import { BsCheck2Circle } from 'react-icons/bs';
-import { HiOutlineMail, HiOutlineOfficeBuilding } from 'react-icons/hi';
 import { IconType } from 'react-icons';
 import { ReactText } from 'react';
-import { useMutation, useQuery } from 'urql';
+import { useMutation } from 'urql';
 import { NavLink, useNavigate, useLocation } from 'react-router-dom';
 import { useAuthContext } from '../contexts/AuthContext';
 import { AdminLogout } from '../graphql/mutation';
-import { MetaQuery } from '../graphql/queries';
-
-interface SubRoutes {
-	name: string;
-	icon: IconType;
-	route: string;
-}

 interface LinkItemProps {
 	name: string;
 	icon: IconType;
 	route: string;
-	subRoutes?: SubRoutes[];
 }
 const LinkItems: Array<LinkItemProps> = [
-	{
-		name: 'Environment ',
-		icon: FiSettings,
-		route: '/',
-		subRoutes: [
-			{
-				name: 'OAuth Config',
-				icon: AiOutlineKey,
-				route: '/oauth-setting',
-			},
-
-			{ name: 'Roles', icon: FiUser, route: '/roles' },
-			{
-				name: 'JWT Secrets',
-				icon: SiJsonwebtokens,
-				route: '/jwt-config',
-			},
-			{
-				name: 'Session Storage',
-				icon: RiDatabase2Line,
-				route: '/session-storage',
-			},
-			{
-				name: 'Email Configurations',
-				icon: HiOutlineMail,
-				route: '/email-config',
-			},
-			{
-				name: 'Domain White Listing',
-				icon: BsCheck2Circle,
-				route: '/whitelist-variables',
-			},
-			{
-				name: 'Organization Info',
-				icon: HiOutlineOfficeBuilding,
-				route: '/organization-info',
-			},
-			{ name: 'Access Token', icon: SiOpenaccess, route: '/access-token' },
-			{
-				name: 'Features',
-				icon: BiCustomize,
-				route: '/features',
-			},
-			{ name: 'Database', icon: RiDatabase2Line, route: '/db-cred' },
-			{
-				name: ' Security',
-				icon: MdSecurity,
-				route: '/admin-secret',
-			},
-		],
-	},
+	{ name: 'Home', icon: FiHome, route: '/' },
 	{ name: 'Users', icon: FiUsers, route: '/users' },
-	{ name: 'Webhooks', icon: FiLink, route: '/webhooks' },
-	{ name: 'Email Templates', icon: FiFileText, route: '/email-templates' },
+	{ name: 'Environment Variables', icon: FiSettings, route: '/environment' },
 ];

 interface SidebarProps extends BoxProps {
@ -123,28 +54,20 @@ interface SidebarProps extends BoxProps {

 export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
 	const { pathname } = useLocation();
-	const [{ data }] = useQuery({ query: MetaQuery });
-	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
 	return (
 		<Box
 			transition="3s ease"
 			bg={useColorModeValue('white', 'gray.900')}
 			borderRight="1px"
 			borderRightColor={useColorModeValue('gray.200', 'gray.700')}
-			w={{ base: 'full', md: '64' }}
+			w={{ base: 'full', md: 60 }}
 			pos="fixed"
 			h="full"
 			{...rest}
 		>
-			<Flex
-				h="20"
-				alignItems="center"
-				mx="18"
-				justifyContent="space-between"
-				flexDirection="row"
-			>
+			<Flex h="20" alignItems="center" mx="8" justifyContent="space-between">
 				<NavLink to="/">
-					<Flex alignItems="center" mt="6">
+					<Flex alignItems="center">
 						<Image
 							src="https://authorizer.dev/images/logo.png"
 							alt="logo"
@ -157,107 +80,31 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
 				</NavLink>
 				<CloseButton display={{ base: 'flex', md: 'none' }} onClick={onClose} />
 			</Flex>
-
-			<Accordion defaultIndex={[0]} allowMultiple>
-				<AccordionItem textAlign="center" border="none" w="100%">
-					{LinkItems.map((link) =>
-						link?.subRoutes ? (
-							<div key={link.name}>
-								<AccordionButton _focus={{ boxShadow: 'none' }}>
-									<Text as="div" fontSize="md">
+			{LinkItems.map((link) => (
+				<NavLink key={link.name} to={link.route}>
 					<NavItem
 						icon={link.icon}
 						color={pathname === link.route ? 'blue.500' : ''}
-											style={{ outline: 'unset' }}
-											height={12}
-											ml={-1}
-											mb={isNotSmallerScreen ? -1 : -4}
-											w={isNotSmallerScreen ? '100%' : '310%'}
 					>
-											<Fragment>
 						{link.name}
-												<Box display={{ base: 'none', md: 'flex' }} ml={12}>
-													<FiChevronDown />
-												</Box>
-											</Fragment>
 					</NavItem>
-									</Text>
-								</AccordionButton>
-								<AccordionPanel>
-									{link.subRoutes?.map((sublink) => (
-										<NavLink
-											key={sublink.name}
-											to={sublink.route}
-											onClick={onClose}
-										>
-											{' '}
-											<Text as="div" fontSize="xs" ml={2}>
-												<NavItem
-													icon={sublink.icon}
-													color={pathname === sublink.route ? 'blue.500' : ''}
-													height={8}
-												>
-													{sublink.name}
-												</NavItem>{' '}
-											</Text>
 				</NavLink>
 			))}
-								</AccordionPanel>
-							</div>
-						) : (
-							<NavLink key={link.name} to={link.route}>
-								{' '}
-								<Text as="div" fontSize="md" w="100%" mt={-2}>
-									<NavItem
-										icon={link.icon}
-										color={pathname === link.route ? 'blue.500' : ''}
-										height={12}
-										onClick={onClose}
-									>
-										{link.name}
-									</NavItem>{' '}
-								</Text>
-							</NavLink>
-						),
-					)}
-					<Link
-						href="/playground"
-						target="_blank"
-						style={{
-							textDecoration: 'none',
-						}}
-						_focus={{ _boxShadow: 'none' }}
-					>
-						<NavItem icon={FiCode}>API Playground</NavItem>
-					</Link>
-				</AccordionItem>
-			</Accordion>
-
-			{data?.meta?.version && (
-				<Flex alignContent="center">
-					{' '}
-					<Text
-						color="gray.400"
-						fontSize="sm"
-						textAlign="center"
-						position="absolute"
-						bottom="5"
-						left="7"
-					>
-						Current Version: {data.meta.version}
-					</Text>
-				</Flex>
-			)}
 		</Box>
 	);
 };

 interface NavItemProps extends FlexProps {
 	icon: IconType;
-	children: ReactText | JSX.Element | JSX.Element[];
+	children: ReactText;
 }
 export const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
 	return (
+		<Link
+			href="#"
+			style={{ textDecoration: 'none' }}
+			_focus={{ boxShadow: 'none' }}
+		>
 			<Flex
 				align="center"
 				p="3"
@ -283,6 +130,7 @@ export const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
 				)}
 				{children}
 			</Flex>
+		</Link>
 	);
 };

@ -302,7 +150,7 @@ export const MobileNav = ({ onOpen, ...rest }: MobileProps) => {

 	return (
 		<Flex
-			ml={{ base: 0, md: 64 }}
+			ml={{ base: 0, md: 60 }}
 			px={{ base: 4, md: 4 }}
 			height="20"
 			position="fixed"
@ -313,7 +161,6 @@ export const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
 			borderBottomWidth="1px"
 			borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
 			justifyContent={{ base: 'space-between', md: 'flex-end' }}
-			zIndex={99}
 			{...rest}
 		>
 			<IconButton
@ -339,7 +186,7 @@ export const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
 							transition="all 0.3s"
 							_focus={{ boxShadow: 'none' }}
 						>
-							<HStack mr={5}>
+							<HStack>
 								<FiUser />
 								<VStack
 									display={{ base: 'none', md: 'flex' }}
--- a/dashboard/src/components/UpdateEmailTemplateModal.tsx
+++ b/dashboard/src/components/UpdateEmailTemplateModal.tsx
@ -1,565 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import {
-	Button,
-	Center,
-	Flex,
-	Input,
-	InputGroup,
-	MenuItem,
-	Modal,
-	ModalBody,
-	ModalCloseButton,
-	ModalContent,
-	ModalFooter,
-	ModalHeader,
-	ModalOverlay,
-	Select,
-	Text,
-	useDisclosure,
-	useToast,
-	Alert,
-	AlertIcon,
-	Collapse,
-	Box,
-	TableContainer,
-	Table,
-	Thead,
-	Tr,
-	Th,
-	Tbody,
-	Td,
-	Code,
-	Radio,
-	RadioGroup,
-	Stack,
-	Textarea,
-} from '@chakra-ui/react';
-import { FaPlus, FaAngleDown, FaAngleUp } from 'react-icons/fa';
-import { useClient } from 'urql';
-import EmailEditor from 'react-email-editor';
-import {
-	UpdateModalViews,
-	EmailTemplateInputDataFields,
-	emailTemplateEventNames,
-	emailTemplateVariables,
-	EmailTemplateEditors,
-} from '../constants';
-import { capitalizeFirstLetter } from '../utils';
-import { AddEmailTemplate, EditEmailTemplate } from '../graphql/mutation';
-
-interface selectedEmailTemplateDataTypes {
-	[EmailTemplateInputDataFields.ID]: string;
-	[EmailTemplateInputDataFields.EVENT_NAME]: string;
-	[EmailTemplateInputDataFields.SUBJECT]: string;
-	[EmailTemplateInputDataFields.CREATED_AT]: number;
-	[EmailTemplateInputDataFields.TEMPLATE]: string;
-	[EmailTemplateInputDataFields.DESIGN]: string;
-}
-
-interface UpdateEmailTemplateInputPropTypes {
-	view: UpdateModalViews;
-	selectedTemplate?: selectedEmailTemplateDataTypes;
-	fetchEmailTemplatesData: Function;
-}
-
-interface templateVariableDataTypes {
-	text: string;
-	value: string;
-	description: string;
-}
-
-interface emailTemplateDataType {
-	[EmailTemplateInputDataFields.EVENT_NAME]: string;
-	[EmailTemplateInputDataFields.SUBJECT]: string;
-	[EmailTemplateInputDataFields.TEMPLATE]: string;
-	[EmailTemplateInputDataFields.DESIGN]: string;
-}
-
-interface validatorDataType {
-	[EmailTemplateInputDataFields.SUBJECT]: boolean;
-}
-
-const initTemplateData: emailTemplateDataType = {
-	[EmailTemplateInputDataFields.EVENT_NAME]: emailTemplateEventNames.Signup,
-	[EmailTemplateInputDataFields.SUBJECT]: '',
-	[EmailTemplateInputDataFields.TEMPLATE]: '',
-	[EmailTemplateInputDataFields.DESIGN]: '',
-};
-
-const initTemplateValidatorData: validatorDataType = {
-	[EmailTemplateInputDataFields.SUBJECT]: true,
-};
-
-const UpdateEmailTemplate = ({
-	view,
-	selectedTemplate,
-	fetchEmailTemplatesData,
-}: UpdateEmailTemplateInputPropTypes) => {
-	const client = useClient();
-	const toast = useToast();
-	const emailEditorRef = useRef(null);
-	const { isOpen, onOpen, onClose } = useDisclosure();
-	const [loading, setLoading] = useState<boolean>(false);
-	const [editor, setEditor] = useState<string>(
-		EmailTemplateEditors.PLAIN_HTML_EDITOR,
-	);
-	const [templateVariables, setTemplateVariables] = useState<
-		templateVariableDataTypes[]
-	>([]);
-	const [templateData, setTemplateData] = useState<emailTemplateDataType>({
-		...initTemplateData,
-	});
-	const [validator, setValidator] = useState<validatorDataType>({
-		...initTemplateValidatorData,
-	});
-	const [isDynamicVariableInfoOpen, setIsDynamicVariableInfoOpen] =
-		useState<boolean>(false);
-
-	const onReady = () => {
-		if (selectedTemplate) {
-			const { design } = selectedTemplate;
-			try {
-				if (design) {
-					const designData = JSON.parse(design);
-					// @ts-ignore
-					emailEditorRef.current.editor.loadDesign(designData);
-				}
-			} catch (error) {
-				console.error(error);
-				onClose();
-			}
-		}
-	};
-
-	const inputChangehandler = (inputType: string, value: any) => {
-		if (inputType !== EmailTemplateInputDataFields.EVENT_NAME) {
-			setValidator({
-				...validator,
-				[inputType]: value?.trim().length,
-			});
-		}
-		setTemplateData({ ...templateData, [inputType]: value });
-	};
-
-	const validateData = () => {
-		return (
-			!loading &&
-			templateData[EmailTemplateInputDataFields.EVENT_NAME].length > 0 &&
-			templateData[EmailTemplateInputDataFields.SUBJECT].length > 0 &&
-			validator[EmailTemplateInputDataFields.SUBJECT]
-		);
-	};
-
-	const updateTemplate = async (params: emailTemplateDataType) => {
-		let res: any = {};
-		if (
-			view === UpdateModalViews.Edit &&
-			selectedTemplate?.[EmailTemplateInputDataFields.ID]
-		) {
-			res = await client
-				.mutation(EditEmailTemplate, {
-					params: {
-						...params,
-						id: selectedTemplate[EmailTemplateInputDataFields.ID],
-					},
-				})
-				.toPromise();
-		} else {
-			res = await client.mutation(AddEmailTemplate, { params }).toPromise();
-		}
-		setLoading(false);
-		if (res.error) {
-			toast({
-				title: capitalizeFirstLetter(res.error.message),
-				isClosable: true,
-				status: 'error',
-				position: 'top-right',
-			});
-		} else if (
-			res.data?._add_email_template ||
-			res.data?._update_email_template
-		) {
-			toast({
-				title: capitalizeFirstLetter(
-					res.data?._add_email_template?.message ||
-						res.data?._update_email_template?.message,
-				),
-				isClosable: true,
-				status: 'success',
-				position: 'top-right',
-			});
-			setTemplateData({
-				...initTemplateData,
-			});
-			setValidator({ ...initTemplateValidatorData });
-			fetchEmailTemplatesData();
-		}
-	};
-
-	const saveData = async () => {
-		if (!validateData()) return;
-		setLoading(true);
-		let params: emailTemplateDataType = {
-			[EmailTemplateInputDataFields.EVENT_NAME]:
-				templateData[EmailTemplateInputDataFields.EVENT_NAME],
-			[EmailTemplateInputDataFields.SUBJECT]:
-				templateData[EmailTemplateInputDataFields.SUBJECT],
-			[EmailTemplateInputDataFields.TEMPLATE]:
-				templateData[EmailTemplateInputDataFields.TEMPLATE],
-			[EmailTemplateInputDataFields.DESIGN]: '',
-		};
-		if (editor === EmailTemplateEditors.UNLAYER_EDITOR) {
-			// @ts-ignore
-			await emailEditorRef.current.editor.exportHtml(async (data) => {
-				const { design, html } = data;
-				if (!html || !design) {
-					setLoading(false);
-					return;
-				}
-				params = {
-					...params,
-					[EmailTemplateInputDataFields.TEMPLATE]: html.trim(),
-					[EmailTemplateInputDataFields.DESIGN]: JSON.stringify(design),
-				};
-				await updateTemplate(params);
-			});
-		} else {
-			await updateTemplate(params);
-		}
-		view === UpdateModalViews.ADD && onClose();
-	};
-
-	const resetData = () => {
-		if (selectedTemplate) {
-			setTemplateData(selectedTemplate);
-		} else {
-			setTemplateData({ ...initTemplateData });
-		}
-	};
-
-	// set template data if edit modal is open
-	useEffect(() => {
-		if (
-			isOpen &&
-			view === UpdateModalViews.Edit &&
-			selectedTemplate &&
-			Object.keys(selectedTemplate || {}).length
-		) {
-			const { id, created_at, ...rest } = selectedTemplate;
-			setTemplateData(rest);
-		}
-	}, [isOpen]);
-
-	// set template variables
-	useEffect(() => {
-		const updatedTemplateVariables = Object.entries(
-			emailTemplateVariables,
-		).reduce((acc, [key, val]): any => {
-			if (
-				(templateData[EmailTemplateInputDataFields.EVENT_NAME] !==
-					emailTemplateEventNames['Verify Otp'] &&
-					val === emailTemplateVariables.otp) ||
-				(templateData[EmailTemplateInputDataFields.EVENT_NAME] ===
-					emailTemplateEventNames['Verify Otp'] &&
-					val === emailTemplateVariables.verification_url)
-			) {
-				return acc;
-			}
-			return [
-				...acc,
-				{
-					text: key,
-					value: val.value,
-					description: val.description,
-				},
-			];
-		}, []);
-		setTemplateVariables(updatedTemplateVariables);
-	}, [templateData[EmailTemplateInputDataFields.EVENT_NAME]]);
-
-	// change editor
-	useEffect(() => {
-		if (isOpen && selectedTemplate) {
-			const { design } = selectedTemplate;
-			if (design) {
-				setEditor(EmailTemplateEditors.UNLAYER_EDITOR);
-			} else {
-				setEditor(EmailTemplateEditors.PLAIN_HTML_EDITOR);
-			}
-		}
-	}, [isOpen, selectedTemplate]);
-
-	// reset fields when editor is changed
-	useEffect(() => {
-		if (selectedTemplate?.design) {
-			if (editor === EmailTemplateEditors.UNLAYER_EDITOR) {
-				setTemplateData({
-					...templateData,
-					[EmailTemplateInputDataFields.TEMPLATE]: selectedTemplate.template,
-					[EmailTemplateInputDataFields.DESIGN]: selectedTemplate.design,
-				});
-			} else {
-				setTemplateData({
-					...templateData,
-					[EmailTemplateInputDataFields.TEMPLATE]: '',
-					[EmailTemplateInputDataFields.DESIGN]: '',
-				});
-			}
-		} else if (selectedTemplate?.template) {
-			if (editor === EmailTemplateEditors.UNLAYER_EDITOR) {
-				setTemplateData({
-					...templateData,
-					[EmailTemplateInputDataFields.TEMPLATE]: '',
-					[EmailTemplateInputDataFields.DESIGN]: '',
-				});
-			} else {
-				setTemplateData({
-					...templateData,
-					[EmailTemplateInputDataFields.TEMPLATE]: selectedTemplate?.template,
-					[EmailTemplateInputDataFields.DESIGN]: '',
-				});
-			}
-		}
-	}, [editor]);
-
-	return (
-		<>
-			{view === UpdateModalViews.ADD ? (
-				<Button
-					leftIcon={<FaPlus />}
-					colorScheme="blue"
-					variant="solid"
-					onClick={onOpen}
-					isDisabled={false}
-					size="sm"
-				>
-					<Center h="100%">Add Template</Center>{' '}
-				</Button>
-			) : (
-				<MenuItem onClick={onOpen}>Edit</MenuItem>
-			)}
-			<Modal
-				isOpen={isOpen}
-				onClose={() => {
-					resetData();
-					onClose();
-				}}
-				size="6xl"
-			>
-				<ModalOverlay />
-				<ModalContent>
-					<ModalHeader>
-						{view === UpdateModalViews.ADD
-							? 'Add New Email Template'
-							: 'Edit Email Template'}
-					</ModalHeader>
-					<ModalCloseButton />
-					<ModalBody>
-						<Flex
-							flexDirection="column"
-							border="1px"
-							borderRadius="md"
-							borderColor="gray.200"
-							p="5"
-						>
-							<Alert
-								status="info"
-								onClick={() =>
-									setIsDynamicVariableInfoOpen(!isDynamicVariableInfoOpen)
-								}
-								borderRadius="5"
-								marginBottom={5}
-								cursor="pointer"
-								fontSize="sm"
-							>
-								<AlertIcon />
-								<Flex
-									width="100%"
-									justifyContent="space-between"
-									alignItems="center"
-								>
-									<Box width="85%">
-										<b>Note:</b> You can add set of dynamic variables to subject
-										and email body. Click here to see the set of dynamic
-										variables.
-									</Box>
-									{isDynamicVariableInfoOpen ? <FaAngleUp /> : <FaAngleDown />}
-								</Flex>
-							</Alert>
-							<Collapse
-								style={{
-									width: '100%',
-								}}
-								in={isDynamicVariableInfoOpen}
-							>
-								<TableContainer
-									background="gray.100"
-									borderRadius={5}
-									height={200}
-									width="100%"
-									overflowY="auto"
-									overflowWrap="break-word"
-								>
-									<Table variant="simple">
-										<Thead>
-											<Tr>
-												<Th>Variable</Th>
-												<Th>Description</Th>
-											</Tr>
-										</Thead>
-										<Tbody>
-											{templateVariables.map((i) => (
-												<Tr key={i.text}>
-													<Td>
-														<Code fontSize="sm">{`{{.${i.text}}}`}</Code>
-													</Td>
-													<Td>
-														<Text
-															size="sm"
-															fontSize="sm"
-															overflowWrap="break-word"
-															width="100%"
-														>
-															{i.description}
-														</Text>
-													</Td>
-												</Tr>
-											))}
-										</Tbody>
-									</Table>
-								</TableContainer>
-							</Collapse>
-							<Flex
-								width="100%"
-								justifyContent="space-between"
-								alignItems="center"
-								marginBottom="2%"
-							>
-								<Flex flex="1">Event Name</Flex>
-								<Flex flex="3">
-									<Select
-										size="md"
-										value={
-											templateData[EmailTemplateInputDataFields.EVENT_NAME]
-										}
-										onChange={(e) =>
-											inputChangehandler(
-												EmailTemplateInputDataFields.EVENT_NAME,
-												e.currentTarget.value,
-											)
-										}
-									>
-										{Object.entries(emailTemplateEventNames).map(
-											([key, value]: any) => (
-												<option value={value} key={key}>
-													{key}
-												</option>
-											),
-										)}
-									</Select>
-								</Flex>
-							</Flex>
-							<Flex
-								width="100%"
-								justifyContent="start"
-								alignItems="center"
-								marginBottom="2%"
-							>
-								<Flex flex="1">Subject</Flex>
-								<Flex flex="3">
-									<InputGroup size="md">
-										<Input
-											pr="4.5rem"
-											type="text"
-											placeholder="Subject Line"
-											value={templateData[EmailTemplateInputDataFields.SUBJECT]}
-											isInvalid={
-												!validator[EmailTemplateInputDataFields.SUBJECT]
-											}
-											onChange={(e) =>
-												inputChangehandler(
-													EmailTemplateInputDataFields.SUBJECT,
-													e.currentTarget.value,
-												)
-											}
-										/>
-									</InputGroup>
-								</Flex>
-							</Flex>
-							<Flex
-								width="100%"
-								justifyContent="flex-start"
-								alignItems="center"
-								marginBottom="2%"
-							>
-								<Flex flex="1">Template Body</Flex>
-								<Flex flex="3">
-									<RadioGroup
-										onChange={(value) => setEditor(value)}
-										value={editor}
-									>
-										<Stack direction="row" spacing="50px">
-											<Radio value={EmailTemplateEditors.PLAIN_HTML_EDITOR}>
-												Plain HTML
-											</Radio>
-											<Radio value={EmailTemplateEditors.UNLAYER_EDITOR}>
-												Unlayer Editor
-											</Radio>
-										</Stack>
-									</RadioGroup>
-								</Flex>
-							</Flex>
-							<Flex
-								width="100%"
-								justifyContent="flex-start"
-								alignItems="center"
-								border="1px solid"
-								borderColor="gray.200"
-							>
-								{editor === EmailTemplateEditors.UNLAYER_EDITOR ? (
-									<EmailEditor ref={emailEditorRef} onReady={onReady} />
-								) : (
-									<Textarea
-										value={templateData.template}
-										onChange={(e) => {
-											setTemplateData({
-												...templateData,
-												[EmailTemplateInputDataFields.TEMPLATE]: e.target.value,
-											});
-										}}
-										placeholder="Template HTML"
-										border="0"
-										height="500px"
-									/>
-								)}
-							</Flex>
-						</Flex>
-					</ModalBody>
-					<ModalFooter>
-						<Button
-							variant="outline"
-							onClick={resetData}
-							isDisabled={loading}
-							marginRight="5"
-						>
-							Reset
-						</Button>
-						<Button
-							colorScheme="blue"
-							variant="solid"
-							isLoading={loading}
-							onClick={saveData}
-							isDisabled={!validateData()}
-						>
-							<Center h="100%" pt="5%">
-								Save
-							</Center>
-						</Button>
-					</ModalFooter>
-				</ModalContent>
-			</Modal>
-		</>
-	);
-};
-
-export default UpdateEmailTemplate;
--- a/dashboard/src/components/UpdateWebhookModal.tsx
+++ b/dashboard/src/components/UpdateWebhookModal.tsx
@ -1,697 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-	Button,
-	Center,
-	Code,
-	Collapse,
-	Flex,
-	Input,
-	InputGroup,
-	InputRightElement,
-	MenuItem,
-	Modal,
-	ModalBody,
-	ModalCloseButton,
-	ModalContent,
-	ModalFooter,
-	ModalHeader,
-	ModalOverlay,
-	Select,
-	Switch,
-	Text,
-	useDisclosure,
-	useToast,
-	Alert,
-	AlertIcon,
-	Divider,
-} from '@chakra-ui/react';
-import {
-	FaAngleDown,
-	FaAngleUp,
-	FaMinusCircle,
-	FaPlus,
-	FaRegClone,
-} from 'react-icons/fa';
-import { useClient } from 'urql';
-import {
-	webhookEventNames,
-	ArrayInputOperations,
-	WebhookInputDataFields,
-	WebhookInputHeaderFields,
-	UpdateModalViews,
-	webhookVerifiedStatus,
-	webhookPayloadExample,
-} from '../constants';
-import {
-	capitalizeFirstLetter,
-	copyTextToClipboard,
-	validateURI,
-} from '../utils';
-import { AddWebhook, EditWebhook, TestEndpoint } from '../graphql/mutation';
-import { BiCheckCircle, BiError, BiErrorCircle } from 'react-icons/bi';
-
-interface headersDataType {
-	[WebhookInputHeaderFields.KEY]: string;
-	[WebhookInputHeaderFields.VALUE]: string;
-}
-
-interface headersValidatorDataType {
-	[WebhookInputHeaderFields.KEY]: boolean;
-	[WebhookInputHeaderFields.VALUE]: boolean;
-}
-
-interface selecetdWebhookDataTypes {
-	[WebhookInputDataFields.ID]: string;
-	[WebhookInputDataFields.EVENT_NAME]: string;
-	[WebhookInputDataFields.EVENT_DESCRIPTION]?: string;
-	[WebhookInputDataFields.ENDPOINT]: string;
-	[WebhookInputDataFields.ENABLED]: boolean;
-	[WebhookInputDataFields.HEADERS]?: Record<string, string>;
-}
-
-interface UpdateWebhookModalInputPropTypes {
-	view: UpdateModalViews;
-	selectedWebhook?: selecetdWebhookDataTypes;
-	fetchWebookData: Function;
-}
-
-const initHeadersData: headersDataType = {
-	[WebhookInputHeaderFields.KEY]: '',
-	[WebhookInputHeaderFields.VALUE]: '',
-};
-
-const initHeadersValidatorData: headersValidatorDataType = {
-	[WebhookInputHeaderFields.KEY]: true,
-	[WebhookInputHeaderFields.VALUE]: true,
-};
-
-interface webhookDataType {
-	[WebhookInputDataFields.EVENT_NAME]: string;
-	[WebhookInputDataFields.EVENT_DESCRIPTION]?: string;
-	[WebhookInputDataFields.ENDPOINT]: string;
-	[WebhookInputDataFields.ENABLED]: boolean;
-	[WebhookInputDataFields.HEADERS]: headersDataType[];
-}
-
-interface validatorDataType {
-	[WebhookInputDataFields.ENDPOINT]: boolean;
-	[WebhookInputDataFields.HEADERS]: headersValidatorDataType[];
-}
-
-const initWebhookData: webhookDataType = {
-	[WebhookInputDataFields.EVENT_NAME]: webhookEventNames['User login'],
-	[WebhookInputDataFields.EVENT_DESCRIPTION]: '',
-	[WebhookInputDataFields.ENDPOINT]: '',
-	[WebhookInputDataFields.ENABLED]: true,
-	[WebhookInputDataFields.HEADERS]: [{ ...initHeadersData }],
-};
-
-const initWebhookValidatorData: validatorDataType = {
-	[WebhookInputDataFields.ENDPOINT]: true,
-	[WebhookInputDataFields.HEADERS]: [{ ...initHeadersValidatorData }],
-};
-
-const UpdateWebhookModal = ({
-	view,
-	selectedWebhook,
-	fetchWebookData,
-}: UpdateWebhookModalInputPropTypes) => {
-	const client = useClient();
-	const toast = useToast();
-	const { isOpen, onOpen, onClose } = useDisclosure();
-	const [loading, setLoading] = useState<boolean>(false);
-	const [verifyingEndpoint, setVerifyingEndpoint] = useState<boolean>(false);
-	const [isShowingPayload, setIsShowingPayload] = useState<boolean>(false);
-	const [webhook, setWebhook] = useState<webhookDataType>({
-		...initWebhookData,
-	});
-	const [validator, setValidator] = useState<validatorDataType>({
-		...initWebhookValidatorData,
-	});
-	const [verifiedStatus, setVerifiedStatus] = useState<webhookVerifiedStatus>(
-		webhookVerifiedStatus.PENDING,
-	);
-	const inputChangehandler = (
-		inputType: string,
-		value: any,
-		headerInputType: string = WebhookInputHeaderFields.KEY,
-		headerIndex: number = 0,
-	) => {
-		if (
-			verifiedStatus !== webhookVerifiedStatus.PENDING &&
-			inputType !== WebhookInputDataFields.ENABLED
-		) {
-			setVerifiedStatus(webhookVerifiedStatus.PENDING);
-		}
-		switch (inputType) {
-			case WebhookInputDataFields.EVENT_NAME:
-				setWebhook({ ...webhook, [inputType]: value });
-				break;
-			case WebhookInputDataFields.EVENT_DESCRIPTION:
-				setWebhook({ ...webhook, [inputType]: value });
-				break;
-			case WebhookInputDataFields.ENDPOINT:
-				setWebhook({ ...webhook, [inputType]: value });
-				setValidator({
-					...validator,
-					[WebhookInputDataFields.ENDPOINT]: validateURI(value),
-				});
-				break;
-			case WebhookInputDataFields.ENABLED:
-				setWebhook({ ...webhook, [inputType]: value });
-				break;
-			case WebhookInputDataFields.HEADERS:
-				const updatedHeaders: any = [
-					...webhook[WebhookInputDataFields.HEADERS],
-				];
-				const updatedHeadersValidatorData: any = [
-					...validator[WebhookInputDataFields.HEADERS],
-				];
-				const otherHeaderInputType =
-					headerInputType === WebhookInputHeaderFields.KEY
-						? WebhookInputHeaderFields.VALUE
-						: WebhookInputHeaderFields.KEY;
-				updatedHeaders[headerIndex][headerInputType] = value;
-				updatedHeadersValidatorData[headerIndex][headerInputType] =
-					value.length > 0
-						? updatedHeaders[headerIndex][otherHeaderInputType].length > 0
-						: updatedHeaders[headerIndex][otherHeaderInputType].length === 0;
-				updatedHeadersValidatorData[headerIndex][otherHeaderInputType] =
-					value.length > 0
-						? updatedHeaders[headerIndex][otherHeaderInputType].length > 0
-						: updatedHeaders[headerIndex][otherHeaderInputType].length === 0;
-				setWebhook({ ...webhook, [inputType]: updatedHeaders });
-				setValidator({
-					...validator,
-					[inputType]: updatedHeadersValidatorData,
-				});
-				break;
-			default:
-				break;
-		}
-	};
-	const updateHeaders = (operation: string, index: number = 0) => {
-		if (verifiedStatus !== webhookVerifiedStatus.PENDING) {
-			setVerifiedStatus(webhookVerifiedStatus.PENDING);
-		}
-		switch (operation) {
-			case ArrayInputOperations.APPEND:
-				setWebhook({
-					...webhook,
-					[WebhookInputDataFields.HEADERS]: [
-						...(webhook?.[WebhookInputDataFields.HEADERS] || []),
-						{ ...initHeadersData },
-					],
-				});
-				setValidator({
-					...validator,
-					[WebhookInputDataFields.HEADERS]: [
-						...(validator?.[WebhookInputDataFields.HEADERS] || []),
-						{ ...initHeadersValidatorData },
-					],
-				});
-				break;
-			case ArrayInputOperations.REMOVE:
-				if (webhook?.[WebhookInputDataFields.HEADERS]?.length) {
-					const updatedHeaders = [...webhook[WebhookInputDataFields.HEADERS]];
-					updatedHeaders.splice(index, 1);
-					setWebhook({
-						...webhook,
-						[WebhookInputDataFields.HEADERS]: updatedHeaders,
-					});
-				}
-				if (validator?.[WebhookInputDataFields.HEADERS]?.length) {
-					const updatedHeadersData = [
-						...validator[WebhookInputDataFields.HEADERS],
-					];
-					updatedHeadersData.splice(index, 1);
-					setValidator({
-						...validator,
-						[WebhookInputDataFields.HEADERS]: updatedHeadersData,
-					});
-				}
-				break;
-			default:
-				break;
-		}
-	};
-	const validateData = () => {
-		return (
-			!loading &&
-			!verifyingEndpoint &&
-			webhook[WebhookInputDataFields.EVENT_NAME].length > 0 &&
-			webhook[WebhookInputDataFields.ENDPOINT].length > 0 &&
-			validator[WebhookInputDataFields.ENDPOINT] &&
-			!validator[WebhookInputDataFields.HEADERS].some(
-				(headerData: headersValidatorDataType) =>
-					!headerData.key || !headerData.value,
-			)
-		);
-	};
-	const getParams = () => {
-		let params: any = {
-			[WebhookInputDataFields.EVENT_NAME]:
-				webhook[WebhookInputDataFields.EVENT_NAME],
-			[WebhookInputDataFields.EVENT_DESCRIPTION]:
-				webhook[WebhookInputDataFields.EVENT_DESCRIPTION],
-			[WebhookInputDataFields.ENDPOINT]:
-				webhook[WebhookInputDataFields.ENDPOINT],
-			[WebhookInputDataFields.ENABLED]: webhook[WebhookInputDataFields.ENABLED],
-			[WebhookInputDataFields.HEADERS]: {},
-		};
-		if (webhook[WebhookInputDataFields.HEADERS].length) {
-			const headers = webhook[WebhookInputDataFields.HEADERS].reduce(
-				(acc, data) => {
-					return data.key ? { ...acc, [data.key]: data.value } : acc;
-				},
-				{},
-			);
-			if (Object.keys(headers).length) {
-				params[WebhookInputDataFields.HEADERS] = headers;
-			}
-		}
-		return params;
-	};
-	const saveData = async () => {
-		if (!validateData()) return;
-		setLoading(true);
-		const params = getParams();
-		let res: any = {};
-		if (
-			view === UpdateModalViews.Edit &&
-			selectedWebhook?.[WebhookInputDataFields.ID]
-		) {
-			res = await client
-				.mutation(EditWebhook, {
-					params: {
-						...params,
-						id: selectedWebhook[WebhookInputDataFields.ID],
-					},
-				})
-				.toPromise();
-		} else {
-			res = await client.mutation(AddWebhook, { params }).toPromise();
-		}
-		setLoading(false);
-		if (res.error) {
-			toast({
-				title: capitalizeFirstLetter(res.error.message),
-				isClosable: true,
-				status: 'error',
-				position: 'top-right',
-			});
-		} else if (res.data?._add_webhook || res.data?._update_webhook) {
-			toast({
-				title: capitalizeFirstLetter(
-					res.data?._add_webhook?.message || res.data?._update_webhook?.message,
-				),
-				isClosable: true,
-				status: 'success',
-				position: 'top-right',
-			});
-			setWebhook({
-				...initWebhookData,
-				[WebhookInputDataFields.HEADERS]: [{ ...initHeadersData }],
-			});
-			setValidator({ ...initWebhookValidatorData });
-			fetchWebookData();
-		}
-		view === UpdateModalViews.ADD && onClose();
-	};
-	useEffect(() => {
-		if (
-			isOpen &&
-			view === UpdateModalViews.Edit &&
-			selectedWebhook &&
-			Object.keys(selectedWebhook || {}).length
-		) {
-			const { headers, ...rest } = selectedWebhook;
-			const headerItems = Object.entries(headers || {});
-			if (headerItems.length) {
-				let formattedHeadersData = headerItems.map((headerData) => {
-					return {
-						[WebhookInputHeaderFields.KEY]: headerData[0],
-						[WebhookInputHeaderFields.VALUE]: headerData[1],
-					};
-				});
-				setWebhook({
-					...rest,
-					[WebhookInputDataFields.HEADERS]: formattedHeadersData,
-				});
-				setValidator({
-					...validator,
-					[WebhookInputDataFields.HEADERS]: new Array(
-						formattedHeadersData.length,
-					)
-						.fill({})
-						.map(() => ({ ...initHeadersValidatorData })),
-				});
-			} else {
-				setWebhook({
-					...rest,
-					[WebhookInputDataFields.HEADERS]: [{ ...initHeadersData }],
-				});
-			}
-		}
-	}, [isOpen]);
-	const verifyEndpoint = async () => {
-		if (!validateData()) return;
-		setVerifyingEndpoint(true);
-		const { [WebhookInputDataFields.ENABLED]: _, ...params } = getParams();
-		const res = await client.mutation(TestEndpoint, { params }).toPromise();
-		if (
-			res.data?._test_endpoint?.http_status >= 200 &&
-			res.data?._test_endpoint?.http_status < 400
-		) {
-			setVerifiedStatus(webhookVerifiedStatus.VERIFIED);
-		} else {
-			setVerifiedStatus(webhookVerifiedStatus.NOT_VERIFIED);
-		}
-		setVerifyingEndpoint(false);
-	};
-	return (
-		<>
-			{view === UpdateModalViews.ADD ? (
-				<Button
-					leftIcon={<FaPlus />}
-					colorScheme="blue"
-					variant="solid"
-					onClick={onOpen}
-					isDisabled={false}
-					size="sm"
-				>
-					<Center h="100%">Add Webhook</Center>{' '}
-				</Button>
-			) : (
-				<MenuItem onClick={onOpen}>Edit</MenuItem>
-			)}
-			<Modal isOpen={isOpen} onClose={onClose} size="3xl">
-				<ModalOverlay />
-				<ModalContent>
-					<ModalHeader>
-						{view === UpdateModalViews.ADD ? 'Add New Webhook' : 'Edit Webhook'}
-					</ModalHeader>
-					<ModalCloseButton />
-					<ModalBody>
-						<Flex
-							flexDirection="column"
-							border="1px"
-							borderRadius="md"
-							borderColor="gray.200"
-							p="5"
-						>
-							<Flex
-								width="100%"
-								justifyContent="space-between"
-								alignItems="center"
-								marginBottom="2%"
-							>
-								<Flex flex="1">Event Name</Flex>
-								<Flex flex="3">
-									<Select
-										size="md"
-										value={
-											webhook[WebhookInputDataFields.EVENT_NAME].split('-')[0]
-										}
-										onChange={(e) =>
-											inputChangehandler(
-												WebhookInputDataFields.EVENT_NAME,
-												e.currentTarget.value,
-											)
-										}
-									>
-										{Object.entries(webhookEventNames).map(
-											([key, value]: any) => (
-												<option value={value} key={key}>
-													{key}
-												</option>
-											),
-										)}
-									</Select>
-								</Flex>
-							</Flex>
-							<Flex
-								width="100%"
-								justifyContent="start"
-								alignItems="center"
-								marginBottom="5%"
-							>
-								<Flex flex="1">Event Description</Flex>
-								<Flex flex="3">
-									<InputGroup size="md">
-										<Input
-											pr="4.5rem"
-											type="text"
-											placeholder="User event"
-											value={webhook[WebhookInputDataFields.EVENT_DESCRIPTION]}
-											onChange={(e) =>
-												inputChangehandler(
-													WebhookInputDataFields.EVENT_DESCRIPTION,
-													e.currentTarget.value,
-												)
-											}
-										/>
-									</InputGroup>
-								</Flex>
-							</Flex>
-							<Flex
-								width="100%"
-								justifyContent="start"
-								alignItems="center"
-								marginBottom="5%"
-							>
-								<Flex flex="1">Endpoint</Flex>
-								<Flex flex="3">
-									<InputGroup size="md">
-										<Input
-											pr="4.5rem"
-											type="text"
-											placeholder="https://domain.com/webhook"
-											value={webhook[WebhookInputDataFields.ENDPOINT]}
-											isInvalid={!validator[WebhookInputDataFields.ENDPOINT]}
-											onChange={(e) =>
-												inputChangehandler(
-													WebhookInputDataFields.ENDPOINT,
-													e.currentTarget.value,
-												)
-											}
-										/>
-									</InputGroup>
-								</Flex>
-							</Flex>
-							<Flex
-								width="100%"
-								justifyContent="space-between"
-								alignItems="center"
-								marginBottom="5%"
-							>
-								<Flex flex="1">Enabled</Flex>
-								<Flex w="25%" justifyContent="space-between">
-									<Text h="75%" fontWeight="bold" marginRight="2">
-										Off
-									</Text>
-									<Switch
-										size="md"
-										isChecked={webhook[WebhookInputDataFields.ENABLED]}
-										onChange={() =>
-											inputChangehandler(
-												WebhookInputDataFields.ENABLED,
-												!webhook[WebhookInputDataFields.ENABLED],
-											)
-										}
-									/>
-									<Text h="75%" fontWeight="bold" marginLeft="2">
-										On
-									</Text>
-								</Flex>
-							</Flex>
-
-							<Flex
-								width="100%"
-								justifyContent="space-between"
-								alignItems="center"
-								marginBottom="5%"
-							>
-								<Flex>Headers</Flex>
-								<Flex>
-									<Button
-										leftIcon={<FaPlus />}
-										colorScheme="blue"
-										h="1.75rem"
-										size="sm"
-										variant="ghost"
-										paddingRight="0"
-										onClick={() => updateHeaders(ArrayInputOperations.APPEND)}
-									>
-										Add more Headers
-									</Button>
-								</Flex>
-							</Flex>
-
-							<Flex flexDirection="column" maxH={220} overflowY="auto">
-								{webhook[WebhookInputDataFields.HEADERS]?.map(
-									(headerData, index) => (
-										<Flex
-											key={`header-data-${index}`}
-											justifyContent="center"
-											alignItems="center"
-										>
-											<InputGroup size="md" marginBottom="2.5%">
-												<Input
-													type="text"
-													placeholder="key"
-													value={headerData[WebhookInputHeaderFields.KEY]}
-													isInvalid={
-														!validator[WebhookInputDataFields.HEADERS][index]?.[
-															WebhookInputHeaderFields.KEY
-														]
-													}
-													onChange={(e) =>
-														inputChangehandler(
-															WebhookInputDataFields.HEADERS,
-															e.target.value,
-															WebhookInputHeaderFields.KEY,
-															index,
-														)
-													}
-													width="30%"
-													marginRight="2%"
-												/>
-												<Center marginRight="2%">
-													<Text fontWeight="bold">:</Text>
-												</Center>
-												<Input
-													type="text"
-													placeholder="value"
-													value={headerData[WebhookInputHeaderFields.VALUE]}
-													isInvalid={
-														!validator[WebhookInputDataFields.HEADERS][index]?.[
-															WebhookInputHeaderFields.VALUE
-														]
-													}
-													onChange={(e) =>
-														inputChangehandler(
-															WebhookInputDataFields.HEADERS,
-															e.target.value,
-															WebhookInputHeaderFields.VALUE,
-															index,
-														)
-													}
-													width="65%"
-												/>
-												<InputRightElement width="3rem">
-													<Button
-														width="6rem"
-														colorScheme="blackAlpha"
-														variant="ghost"
-														padding="0"
-														onClick={() =>
-															updateHeaders(ArrayInputOperations.REMOVE, index)
-														}
-													>
-														<FaMinusCircle />
-													</Button>
-												</InputRightElement>
-											</InputGroup>
-										</Flex>
-									),
-								)}
-							</Flex>
-							<Divider marginY={5} />
-
-							<Alert
-								status="info"
-								onClick={() => setIsShowingPayload(!isShowingPayload)}
-								borderRadius="5"
-								cursor="pointer"
-								fontSize="sm"
-							>
-								<AlertIcon />
-								<Flex
-									width="100%"
-									justifyContent="space-between"
-									alignItems="center"
-								>
-									Checkout the example payload
-									{isShowingPayload ? <FaAngleUp /> : <FaAngleDown />}
-								</Flex>
-							</Alert>
-							<Collapse
-								style={{
-									marginTop: 10,
-									width: '100%',
-								}}
-								in={isShowingPayload}
-							>
-								<Code
-									width="inherit"
-									borderRadius={5}
-									padding={2}
-									position="relative"
-								>
-									<pre style={{ overflow: 'auto' }}>
-										{webhookPayloadExample}
-									</pre>
-									{isShowingPayload && (
-										<Flex
-											position="absolute"
-											top={4}
-											right={4}
-											cursor="pointer"
-											onClick={() => copyTextToClipboard(webhookPayloadExample)}
-										>
-											<FaRegClone color="#bfbfbf" />
-										</Flex>
-									)}
-								</Code>
-							</Collapse>
-						</Flex>
-					</ModalBody>
-					<ModalFooter>
-						<Button
-							colorScheme={
-								verifiedStatus === webhookVerifiedStatus.VERIFIED
-									? 'green'
-									: verifiedStatus === webhookVerifiedStatus.PENDING
-									? 'yellow'
-									: 'red'
-							}
-							variant="outline"
-							onClick={verifyEndpoint}
-							isLoading={verifyingEndpoint}
-							isDisabled={!validateData()}
-							marginRight="5"
-							leftIcon={
-								verifiedStatus === webhookVerifiedStatus.VERIFIED ? (
-									<BiCheckCircle />
-								) : verifiedStatus === webhookVerifiedStatus.PENDING ? (
-									<BiErrorCircle />
-								) : (
-									<BiError />
-								)
-							}
-						>
-							{verifiedStatus === webhookVerifiedStatus.VERIFIED
-								? 'Endpoint Verified'
-								: verifiedStatus === webhookVerifiedStatus.PENDING
-								? 'Test Endpoint'
-								: 'Endpoint Not Verified'}
-						</Button>
-						<Button
-							colorScheme="blue"
-							variant="solid"
-							onClick={saveData}
-							isDisabled={!validateData()}
-						>
-							<Center h="100%" pt="5%">
-								Save
-							</Center>
-						</Button>
-					</ModalFooter>
-				</ModalContent>
-			</Modal>
-		</>
-	);
-};
-
-export default UpdateWebhookModal;
--- a/dashboard/src/components/ViewWebhookLogsModal.tsx
+++ b/dashboard/src/components/ViewWebhookLogsModal.tsx
@ -1,426 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import dayjs from 'dayjs';
-import {
-	Button,
-	Center,
-	Flex,
-	MenuItem,
-	Modal,
-	ModalBody,
-	ModalCloseButton,
-	ModalContent,
-	ModalFooter,
-	ModalHeader,
-	ModalOverlay,
-	useDisclosure,
-	Text,
-	Spinner,
-	Table,
-	Th,
-	Thead,
-	Tr,
-	Tbody,
-	IconButton,
-	NumberDecrementStepper,
-	NumberIncrementStepper,
-	NumberInput,
-	NumberInputField,
-	NumberInputStepper,
-	Select,
-	TableCaption,
-	Tooltip,
-	Td,
-	Tag,
-} from '@chakra-ui/react';
-import { useClient } from 'urql';
-import {
-	FaAngleDoubleLeft,
-	FaAngleDoubleRight,
-	FaAngleLeft,
-	FaAngleRight,
-	FaExclamationCircle,
-	FaRegClone,
-} from 'react-icons/fa';
-import { copyTextToClipboard } from '../utils';
-import { WebhookLogsQuery } from '../graphql/queries';
-import { pageLimits } from '../constants';
-
-interface paginationPropTypes {
-	limit: number;
-	page: number;
-	offset: number;
-	total: number;
-	maxPages: number;
-}
-
-interface deleteWebhookModalInputPropTypes {
-	webhookId: string;
-	eventName: string;
-}
-
-interface webhookLogsDataTypes {
-	id: string;
-	http_status: number;
-	request: string;
-	response: string;
-	created_at: number;
-}
-
-const ViewWebhookLogsModal = ({
-	webhookId,
-	eventName,
-}: deleteWebhookModalInputPropTypes) => {
-	const client = useClient();
-	const { isOpen, onOpen, onClose } = useDisclosure();
-	const [loading, setLoading] = useState<boolean>(false);
-	const [webhookLogs, setWebhookLogs] = useState<webhookLogsDataTypes[]>([]);
-	const [paginationProps, setPaginationProps] = useState<paginationPropTypes>({
-		limit: 5,
-		page: 1,
-		offset: 0,
-		total: 0,
-		maxPages: 1,
-	});
-	const getMaxPages = (pagination: paginationPropTypes) => {
-		const { limit, total } = pagination;
-		if (total > 1) {
-			return total % limit === 0
-				? total / limit
-				: parseInt(`${total / limit}`) + 1;
-		} else return 1;
-	};
-	const fetchWebhookLogsData = async () => {
-		setLoading(true);
-		const res = await client
-			.query(WebhookLogsQuery, {
-				params: {
-					webhook_id: webhookId,
-					pagination: {
-						limit: paginationProps.limit,
-						page: paginationProps.page,
-					},
-				},
-			})
-			.toPromise();
-		if (res.data?._webhook_logs) {
-			const { pagination, webhook_logs } = res.data?._webhook_logs;
-			const maxPages = getMaxPages(pagination);
-			if (webhook_logs?.length) {
-				setWebhookLogs(webhook_logs);
-				setPaginationProps({ ...paginationProps, ...pagination, maxPages });
-			} else {
-				if (paginationProps.page !== 1) {
-					setPaginationProps({
-						...paginationProps,
-						...pagination,
-						maxPages,
-						page: 1,
-					});
-				}
-			}
-		}
-		setLoading(false);
-	};
-	const paginationHandler = (value: Record<string, number>) => {
-		setPaginationProps({ ...paginationProps, ...value });
-	};
-	useEffect(() => {
-		isOpen && fetchWebhookLogsData();
-	}, [isOpen, paginationProps.page, paginationProps.limit]);
-	return (
-		<>
-			<MenuItem onClick={onOpen}>View Logs</MenuItem>
-			<Modal isOpen={isOpen} onClose={onClose} size="4xl">
-				<ModalOverlay />
-				<ModalContent>
-					<ModalHeader>Webhook Logs - {eventName}</ModalHeader>
-					<ModalCloseButton />
-					<ModalBody>
-						<Flex
-							flexDirection="column"
-							border="1px"
-							borderRadius="md"
-							borderColor="gray.200"
-							p="5"
-						>
-							{!loading ? (
-								webhookLogs.length ? (
-									<Table variant="simple">
-										<Thead>
-											<Tr>
-												<Th>ID</Th>
-												<Th>Created At</Th>
-												<Th>Http Status</Th>
-												<Th>Request</Th>
-												<Th>Response</Th>
-											</Tr>
-										</Thead>
-										<Tbody>
-											{webhookLogs.map((logData: webhookLogsDataTypes) => (
-												<Tr key={logData.id} style={{ fontSize: 14 }}>
-													<Td>
-														<Text fontSize="sm">{`${logData.id.substring(
-															0,
-															5,
-														)}***${logData.id.substring(
-															logData.id.length - 5,
-															logData.id.length,
-														)}`}</Text>
-													</Td>
-													<Td>
-														{dayjs(logData.created_at * 1000).format(
-															'MMM DD, YYYY',
-														)}
-													</Td>
-													<Td>
-														<Tag
-															size="sm"
-															variant="outline"
-															colorScheme={
-																logData.http_status >= 400 ? 'red' : 'green'
-															}
-														>
-															{logData.http_status}
-														</Tag>
-													</Td>
-													<Td>
-														<Flex alignItems="center">
-															<Tooltip
-																bg="gray.300"
-																color="black"
-																label={logData.request || 'null'}
-															>
-																<Tag
-																	size="sm"
-																	variant="outline"
-																	colorScheme={
-																		logData.request ? 'gray' : 'yellow'
-																	}
-																>
-																	{logData.request ? 'Payload' : 'No Data'}
-																</Tag>
-															</Tooltip>
-															{logData.request && (
-																<Button
-																	size="xs"
-																	variant="outline"
-																	marginLeft="5px"
-																	h="21px"
-																	onClick={() =>
-																		copyTextToClipboard(logData.request)
-																	}
-																>
-																	<FaRegClone color="#bfbfbf" />
-																</Button>
-															)}
-														</Flex>
-													</Td>
-													<Td>
-														<Flex alignItems="center">
-															<Tooltip
-																bg="gray.300"
-																color="black"
-																label={logData.response || 'null'}
-															>
-																<Tag
-																	size="sm"
-																	variant="outline"
-																	colorScheme={
-																		logData.response ? 'gray' : 'yellow'
-																	}
-																>
-																	{logData.response ? 'Preview' : 'No Data'}
-																</Tag>
-															</Tooltip>
-															{logData.response && (
-																<Button
-																	size="xs"
-																	variant="outline"
-																	marginLeft="5px"
-																	h="21px"
-																	onClick={() =>
-																		copyTextToClipboard(logData.response)
-																	}
-																>
-																	<FaRegClone color="#bfbfbf" />
-																</Button>
-															)}
-														</Flex>
-													</Td>
-												</Tr>
-											))}
-										</Tbody>
-										{(paginationProps.maxPages > 1 ||
-											paginationProps.total >= 5) && (
-											<TableCaption>
-												<Flex
-													justifyContent="space-between"
-													alignItems="center"
-													m="2% 0"
-												>
-													<Flex flex="1">
-														<Tooltip label="First Page">
-															<IconButton
-																aria-label="icon button"
-																onClick={() =>
-																	paginationHandler({
-																		page: 1,
-																	})
-																}
-																isDisabled={paginationProps.page <= 1}
-																mr={4}
-																icon={<FaAngleDoubleLeft />}
-															/>
-														</Tooltip>
-														<Tooltip label="Previous Page">
-															<IconButton
-																aria-label="icon button"
-																onClick={() =>
-																	paginationHandler({
-																		page: paginationProps.page - 1,
-																	})
-																}
-																isDisabled={paginationProps.page <= 1}
-																icon={<FaAngleLeft />}
-															/>
-														</Tooltip>
-													</Flex>
-													<Flex
-														flex="8"
-														justifyContent="space-evenly"
-														alignItems="center"
-													>
-														<Text mr={8}>
-															Page{' '}
-															<Text fontWeight="bold" as="span">
-																{paginationProps.page}
-															</Text>{' '}
-															of{' '}
-															<Text fontWeight="bold" as="span">
-																{paginationProps.maxPages}
-															</Text>
-														</Text>
-														<Flex alignItems="center">
-															<Text flexShrink="0">Go to page:</Text>{' '}
-															<NumberInput
-																ml={2}
-																mr={8}
-																w={28}
-																min={1}
-																max={paginationProps.maxPages}
-																onChange={(value) =>
-																	paginationHandler({
-																		page: parseInt(value),
-																	})
-																}
-																value={paginationProps.page}
-															>
-																<NumberInputField />
-																<NumberInputStepper>
-																	<NumberIncrementStepper />
-																	<NumberDecrementStepper />
-																</NumberInputStepper>
-															</NumberInput>
-														</Flex>
-														<Select
-															w={32}
-															value={paginationProps.limit}
-															onChange={(e) =>
-																paginationHandler({
-																	page: 1,
-																	limit: parseInt(e.target.value),
-																})
-															}
-														>
-															{pageLimits.map((pageSize) => (
-																<option key={pageSize} value={pageSize}>
-																	Show {pageSize}
-																</option>
-															))}
-														</Select>
-													</Flex>
-													<Flex flex="1">
-														<Tooltip label="Next Page">
-															<IconButton
-																aria-label="icon button"
-																onClick={() =>
-																	paginationHandler({
-																		page: paginationProps.page + 1,
-																	})
-																}
-																isDisabled={
-																	paginationProps.page >=
-																	paginationProps.maxPages
-																}
-																icon={<FaAngleRight />}
-															/>
-														</Tooltip>
-														<Tooltip label="Last Page">
-															<IconButton
-																aria-label="icon button"
-																onClick={() =>
-																	paginationHandler({
-																		page: paginationProps.maxPages,
-																	})
-																}
-																isDisabled={
-																	paginationProps.page >=
-																	paginationProps.maxPages
-																}
-																ml={4}
-																icon={<FaAngleDoubleRight />}
-															/>
-														</Tooltip>
-													</Flex>
-												</Flex>
-											</TableCaption>
-										)}
-									</Table>
-								) : (
-									<Flex
-										flexDirection="column"
-										minH="25vh"
-										justifyContent="center"
-										alignItems="center"
-									>
-										<Center w="50px" marginRight="1.5%">
-											<FaExclamationCircle
-												style={{ color: '#f0f0f0', fontSize: 70 }}
-											/>
-										</Center>
-										<Text
-											fontSize="2xl"
-											paddingRight="1%"
-											fontWeight="bold"
-											color="#d9d9d9"
-										>
-											No Data
-										</Text>
-									</Flex>
-								)
-							) : (
-								<Center minH="25vh">
-									<Spinner />
-								</Center>
-							)}
-						</Flex>
-					</ModalBody>
-					<ModalFooter>
-						<Button
-							colorScheme="blue"
-							variant="solid"
-							onClick={onClose}
-							isDisabled={false}
-						>
-							<Center h="100%" pt="5%">
-								Close
-							</Center>
-						</Button>
-					</ModalFooter>
-				</ModalContent>
-			</Modal>
-		</>
-	);
-};
-
-export default ViewWebhookLogsModal;
--- a/dashboard/src/constants.ts
+++ b/dashboard/src/constants.ts
@ -1,391 +1 @@
-export const LOGO_URL =
-	'https://user-images.githubusercontent.com/6964334/147834043-fc384cab-e7ca-40f8-9663-38fc25fd5f3a.png';
-
-export const TextInputType = {
-	ACCESS_TOKEN_EXPIRY_TIME: 'ACCESS_TOKEN_EXPIRY_TIME',
-	CLIENT_ID: 'CLIENT_ID',
-	GOOGLE_CLIENT_ID: 'GOOGLE_CLIENT_ID',
-	GITHUB_CLIENT_ID: 'GITHUB_CLIENT_ID',
-	FACEBOOK_CLIENT_ID: 'FACEBOOK_CLIENT_ID',
-	LINKEDIN_CLIENT_ID: 'LINKEDIN_CLIENT_ID',
-	APPLE_CLIENT_ID: 'APPLE_CLIENT_ID',
-	DISCORD_CLIENT_ID: 'DISCORD_CLIENT_ID',
-	TWITTER_CLIENT_ID: 'TWITTER_CLIENT_ID',
-	MICROSOFT_CLIENT_ID: 'MICROSOFT_CLIENT_ID',
-	MICROSOFT_ACTIVE_DIRECTORY_TENANT_ID: 'MICROSOFT_ACTIVE_DIRECTORY_TENANT_ID',
-	TWITCH_CLIENT_ID: 'TWITCH_CLIENT_ID',
-	ROBLOX_CLIENT_ID: 'ROBLOX_CLIENT_ID',
-	JWT_ROLE_CLAIM: 'JWT_ROLE_CLAIM',
-	REDIS_URL: 'REDIS_URL',
-	SMTP_HOST: 'SMTP_HOST',
-	SMTP_PORT: 'SMTP_PORT',
-	SMTP_USERNAME: 'SMTP_USERNAME',
-	SMTP_LOCAL_NAME: 'SMTP_LOCAL_NAME',
-	SENDER_EMAIL: 'SENDER_EMAIL',
-	SENDER_NAME: 'SENDER_NAME',
-	ORGANIZATION_NAME: 'ORGANIZATION_NAME',
-	ORGANIZATION_LOGO: 'ORGANIZATION_LOGO',
-	DATABASE_NAME: 'DATABASE_NAME',
-	DATABASE_TYPE: 'DATABASE_TYPE',
-	DATABASE_URL: 'DATABASE_URL',
-	GIVEN_NAME: 'given_name',
-	MIDDLE_NAME: 'middle_name',
-	FAMILY_NAME: 'family_name',
-	NICKNAME: 'nickname',
-	PHONE_NUMBER: 'phone_number',
-	PICTURE: 'picture',
-};
-
-export const HiddenInputType = {
-	CLIENT_SECRET: 'CLIENT_SECRET',
-	GOOGLE_CLIENT_SECRET: 'GOOGLE_CLIENT_SECRET',
-	GITHUB_CLIENT_SECRET: 'GITHUB_CLIENT_SECRET',
-	FACEBOOK_CLIENT_SECRET: 'FACEBOOK_CLIENT_SECRET',
-	LINKEDIN_CLIENT_SECRET: 'LINKEDIN_CLIENT_SECRET',
-	APPLE_CLIENT_SECRET: 'APPLE_CLIENT_SECRET',
-	DISCORD_CLIENT_SECRET: 'DISCORD_CLIENT_SECRET',
-	TWITTER_CLIENT_SECRET: 'TWITTER_CLIENT_SECRET',
-	MICROSOFT_CLIENT_SECRET: 'MICROSOFT_CLIENT_SECRET',
-	TWITCH_CLIENT_SECRET: 'TWITCH_CLIENT_SECRET',
-	ROBLOX_CLIENT_SECRET: 'ROBLOX_CLIENT_SECRET',
-	JWT_SECRET: 'JWT_SECRET',
-	SMTP_PASSWORD: 'SMTP_PASSWORD',
-	ADMIN_SECRET: 'ADMIN_SECRET',
-	OLD_ADMIN_SECRET: 'OLD_ADMIN_SECRET',
-};
-
-export const ArrayInputType = {
-	ROLES: 'ROLES',
-	DEFAULT_ROLES: 'DEFAULT_ROLES',
-	PROTECTED_ROLES: 'PROTECTED_ROLES',
-	ALLOWED_ORIGINS: 'ALLOWED_ORIGINS',
-};
-
-export const SelectInputType = {
-	JWT_TYPE: 'JWT_TYPE',
-	GENDER: 'gender',
-	DEFAULT_AUTHORIZE_RESPONSE_TYPE: 'DEFAULT_AUTHORIZE_RESPONSE_TYPE',
-	DEFAULT_AUTHORIZE_RESPONSE_MODE: 'DEFAULT_AUTHORIZE_RESPONSE_MODE',
-};
-
-export const MultiSelectInputType = {
-	USER_ROLES: 'roles',
-};
-
-export const TextAreaInputType = {
-	CUSTOM_ACCESS_TOKEN_SCRIPT: 'CUSTOM_ACCESS_TOKEN_SCRIPT',
-	JWT_PRIVATE_KEY: 'JWT_PRIVATE_KEY',
-	JWT_PUBLIC_KEY: 'JWT_PUBLIC_KEY',
-};
-
-export const SwitchInputType = {
-	APP_COOKIE_SECURE: 'APP_COOKIE_SECURE',
-	ADMIN_COOKIE_SECURE: 'ADMIN_COOKIE_SECURE',
-	DISABLE_LOGIN_PAGE: 'DISABLE_LOGIN_PAGE',
-	DISABLE_MAGIC_LINK_LOGIN: 'DISABLE_MAGIC_LINK_LOGIN',
-	DISABLE_EMAIL_VERIFICATION: 'DISABLE_EMAIL_VERIFICATION',
-	DISABLE_BASIC_AUTHENTICATION: 'DISABLE_BASIC_AUTHENTICATION',
-	DISABLE_MOBILE_BASIC_AUTHENTICATION: 'DISABLE_MOBILE_BASIC_AUTHENTICATION',
-	DISABLE_SIGN_UP: 'DISABLE_SIGN_UP',
-	DISABLE_REDIS_FOR_ENV: 'DISABLE_REDIS_FOR_ENV',
-	DISABLE_STRONG_PASSWORD: 'DISABLE_STRONG_PASSWORD',
-	DISABLE_MULTI_FACTOR_AUTHENTICATION: 'DISABLE_MULTI_FACTOR_AUTHENTICATION',
-	ENFORCE_MULTI_FACTOR_AUTHENTICATION: 'ENFORCE_MULTI_FACTOR_AUTHENTICATION',
-	DISABLE_PLAYGROUND: 'DISABLE_PLAYGROUND',
-	DISABLE_TOTP_LOGIN: 'DISABLE_TOTP_LOGIN',
-	DISABLE_MAIL_OTP_LOGIN: 'DISABLE_MAIL_OTP_LOGIN',
-};
-
-export const DateInputType = {
-	BIRTHDATE: 'birthdate',
-};
-
-export const ArrayInputOperations = {
-	APPEND: 'APPEND',
-	REMOVE: 'REMOVE',
-};
-
-export const HMACEncryptionType = {
-	HS256: 'HS256',
-	HS384: 'HS384',
-	HS512: 'HS512',
-};
-
-export const RSAEncryptionType = {
-	RS256: 'RS256',
-	RS384: 'RS384',
-	RS512: 'RS512',
-};
-
-export const ECDSAEncryptionType = {
-	ES256: 'ES256',
-	ES384: 'ES384',
-	ES512: 'ES512',
-};
-
-export interface envVarTypes {
-	GOOGLE_CLIENT_ID: string;
-	GOOGLE_CLIENT_SECRET: string;
-	GITHUB_CLIENT_ID: string;
-	GITHUB_CLIENT_SECRET: string;
-	FACEBOOK_CLIENT_ID: string;
-	FACEBOOK_CLIENT_SECRET: string;
-	LINKEDIN_CLIENT_ID: string;
-	LINKEDIN_CLIENT_SECRET: string;
-	APPLE_CLIENT_ID: string;
-	APPLE_CLIENT_SECRET: string;
-	DISCORD_CLIENT_ID: string;
-	DISCORD_CLIENT_SECRET: string;
-	TWITTER_CLIENT_ID: string;
-	TWITTER_CLIENT_SECRET: string;
-	MICROSOFT_CLIENT_ID: string;
-	MICROSOFT_CLIENT_SECRET: string;
-	MICROSOFT_ACTIVE_DIRECTORY_TENANT_ID: string;
-	TWITCH_CLIENT_ID: string;
-	TWITCH_CLIENT_SECRET: string;
-	ROBLOX_CLIENT_ID: string;
-	ROBLOX_CLIENT_SECRET: string;
-	ROLES: [string] | [];
-	DEFAULT_ROLES: [string] | [];
-	PROTECTED_ROLES: [string] | [];
-	JWT_TYPE: string;
-	JWT_SECRET: string;
-	JWT_ROLE_CLAIM: string;
-	JWT_PRIVATE_KEY: string;
-	JWT_PUBLIC_KEY: string;
-	REDIS_URL: string;
-	SMTP_HOST: string;
-	SMTP_PORT: string;
-	SMTP_USERNAME: string;
-	SMTP_PASSWORD: string;
-	SMTP_LOCAL_NAME: string;
-	SENDER_EMAIL: string;
-	SENDER_NAME: string;
-	ALLOWED_ORIGINS: [string] | [];
-	ORGANIZATION_NAME: string;
-	ORGANIZATION_LOGO: string;
-	CUSTOM_ACCESS_TOKEN_SCRIPT: string;
-	ADMIN_SECRET: string;
-	APP_COOKIE_SECURE: boolean;
-	ADMIN_COOKIE_SECURE: boolean;
-	DISABLE_LOGIN_PAGE: boolean;
-	DISABLE_MAGIC_LINK_LOGIN: boolean;
-	DISABLE_EMAIL_VERIFICATION: boolean;
-	DISABLE_BASIC_AUTHENTICATION: boolean;
-	DISABLE_MOBILE_BASIC_AUTHENTICATION: boolean;
-	DISABLE_SIGN_UP: boolean;
-	DISABLE_STRONG_PASSWORD: boolean;
-	OLD_ADMIN_SECRET: string;
-	DATABASE_NAME: string;
-	DATABASE_TYPE: string;
-	DATABASE_URL: string;
-	ACCESS_TOKEN_EXPIRY_TIME: string;
-	DISABLE_MULTI_FACTOR_AUTHENTICATION: boolean;
-	ENFORCE_MULTI_FACTOR_AUTHENTICATION: boolean;
-	DEFAULT_AUTHORIZE_RESPONSE_TYPE: string;
-	DEFAULT_AUTHORIZE_RESPONSE_MODE: string;
-	DISABLE_PLAYGROUND: boolean;
-	DISABLE_TOTP_LOGIN: boolean;
-	DISABLE_MAIL_OTP_LOGIN: boolean;
-}
-
-export const envSubViews = {
-	INSTANCE_INFO: 'instance-info',
-	ROLES: 'roles',
-	JWT_CONFIG: 'jwt-config',
-	SESSION_STORAGE: 'session-storage',
-	EMAIL_CONFIG: 'email-config',
-	WHITELIST_VARIABLES: 'whitelist-variables',
-	ORGANIZATION_INFO: 'organization-info',
-	ACCESS_TOKEN: 'access-token',
-	FEATURES: 'features',
-	ADMIN_SECRET: 'admin-secret',
-	DB_CRED: 'db-cred',
-};
-
-export enum WebhookInputDataFields {
-	ID = 'id',
-	EVENT_DESCRIPTION = 'event_description',
-	EVENT_NAME = 'event_name',
-	ENDPOINT = 'endpoint',
-	ENABLED = 'enabled',
-	HEADERS = 'headers',
-}
-
-export enum EmailTemplateInputDataFields {
-	ID = 'id',
-	EVENT_NAME = 'event_name',
-	SUBJECT = 'subject',
-	CREATED_AT = 'created_at',
-	TEMPLATE = 'template',
-	DESIGN = 'design',
-}
-
-export enum WebhookInputHeaderFields {
-	KEY = 'key',
-	VALUE = 'value',
-}
-
-export enum UpdateModalViews {
-	ADD = 'add',
-	Edit = 'edit',
-}
-
-export const pageLimits: number[] = [5, 10, 15];
-
-export const webhookEventNames = {
-	'User signup': 'user.signup',
-	'User created': 'user.created',
-	'User login': 'user.login',
-	'User deleted': 'user.deleted',
-	'User access enabled': 'user.access_enabled',
-	'User access revoked': 'user.access_revoked',
-	'User deactivated': 'user.deactivated',
-};
-
-export const emailTemplateEventNames = {
-	Signup: 'basic_auth_signup',
-	'Magic Link Login': 'magic_link_login',
-	'Update Email': 'update_email',
-	'Forgot Password': 'forgot_password',
-	'Verify Otp': 'verify_otp',
-	'Invite member': 'invite_member',
-};
-
-export enum webhookVerifiedStatus {
-	VERIFIED = 'verified',
-	NOT_VERIFIED = 'not_verified',
-	PENDING = 'verification_pending',
-}
-
-export const emailTemplateVariables = {
-	'user.id': {
-		description: `User identifier`,
-		value: '{.user.id}}',
-	},
-	'user.email': {
-		description: 'User email address',
-		value: '{.user.email}}',
-	},
-	'user.given_name': {
-		description: `User first name`,
-		value: '{.user.given_name}}',
-	},
-	'user.family_name': {
-		description: `User last name`,
-		value: '{.user.family_name}}',
-	},
-	'user.middle_name': {
-		description: `Middle name of user`,
-		value: '{.user.middle_name}}',
-	},
-	'user.nickname': {
-		description: `Nick name of user`,
-		value: '{.user.nickname}}',
-	},
-	'user.preferred_username': {
-		description: `Username, by default it is email`,
-		value: '{.user.preferred_username}}',
-	},
-	'user.signup_methods': {
-		description: `Comma separated list of methods using which user has signed up`,
-		value: '{.user.signup_methods}}',
-	},
-	'user.email_verified': {
-		description: `Whether email is verified or not`,
-		value: '{.user.email_verified}}',
-	},
-	'user.picture': {
-		description: `URL of the user profile picture`,
-		value: '{.user.picture}}',
-	},
-	'user.roles': {
-		description: `Comma separated list of roles assigned to user`,
-		value: '{.user.roles}}',
-	},
-	'user.gender': {
-		description: `Gender of user`,
-		value: '{.user.gender}}',
-	},
-	'user.birthdate': {
-		description: `BirthDate of user`,
-		value: '{.user.birthdate}}',
-	},
-	'user.phone_number': {
-		description: `Phone number of user`,
-		value: '{.user.phone_number}}',
-	},
-	'user.phone_number_verified': {
-		description: `Whether phone number is verified or not`,
-		value: '{.user.phone_number_verified}}',
-	},
-	'user.created_at': {
-		description: `User created at time`,
-		value: '{.user.created_at}}',
-	},
-	'user.updated_at': {
-		description: `Last updated time at user`,
-		value: '{.user.updated_at}}',
-	},
-	'organization.name': {
-		description: `Organization name`,
-		value: '{.organization.name}}',
-	},
-	'organization.logo': {
-		description: `Organization logo`,
-		value: '{.organization.logo}}',
-	},
-	verification_url: {
-		description: `Verification URL in case of events other than verify otp`,
-		value: '{.verification_url}}',
-	},
-	otp: {
-		description: `OTP sent during login with Multi factor authentication`,
-		value: '{.otp}}',
-	},
-};
-
-export const webhookPayloadExample: string = `{
-	"event_name":"user.login",
-	"user":{
-	   "birthdate":null,
-	   "created_at":1657524721,
-	   "email":"lakhan.m.samani@gmail.com",
-	   "email_verified":true,
-	   "family_name":"Samani",
-	   "gender":null,
-	   "given_name":"Lakhan",
-	   "id":"466d0b31-1b87-420e-bea5-09d05d79c586",
-	   "middle_name":null,
-	   "nickname":null,
-	   "phone_number":null,
-	   "phone_number_verified":false,
-	   "picture":"https://lh3.googleusercontent.com/a-/AFdZucppvU6a2zIDkX0wvhhapVjT0ZMKDlYCkQDi3NxcUg=s96-c",
-	   "preferred_username":"lakhan.m.samani@gmail.com",
-	   "revoked_timestamp":null,
-	   "roles":[
-		  "user"
-	   ],
-	   "signup_methods":"google",
-	   "updated_at":1657526492
-	},
-	"auth_recipe":"google"
- }`;
-
-export enum EmailTemplateEditors {
-	UNLAYER_EDITOR = 'unlayer_editor',
-	PLAIN_HTML_EDITOR = 'plain_html_editor',
-}
-
-export const ResponseTypes = {
-	token: 'token',
-	code: 'code',
-	id_token: 'id_token',
-};
-
-export const ResponseModes = {
-	query: 'query',
-	form_post: 'form_post',
-	fragment: 'fragment',
-	web_message: 'web_message',
-};
+export const LOGO_URL = "https://user-images.githubusercontent.com/6964334/147834043-fc384cab-e7ca-40f8-9663-38fc25fd5f3a.png"
--- a/dashboard/src/contexts/AuthContext.tsx
+++ b/dashboard/src/contexts/AuthContext.tsx
@ -32,7 +32,7 @@ export const AuthContextProvider = ({ children }: { children: any }) => {

 	if (fetching) {
 		return (
-			<Center h="100%">
+			<Center>
 				<Spinner />
 			</Center>
 		);
--- a/dashboard/src/graphql/mutation/index.ts
+++ b/dashboard/src/graphql/mutation/index.ts
@ -21,118 +21,3 @@ export const AdminLogout = `
    }
  }
 `;
-
-export const UpdateEnvVariables = `
-  mutation updateEnvVariables($params: UpdateEnvInput!) {
-    _update_env(params: $params) {
-      message
-    }
-  }
-`;
-
-export const UpdateUser = `
-  mutation updateUser($params: UpdateUserInput!) {
-    _update_user(params: $params) {
-      id
-    }
-  }
-`;
-
-export const DeleteUser = `
-  mutation deleteUser($params: DeleteUserInput!) {
-    _delete_user(params: $params) {
-      message
-    }
-  }
-`;
-
-export const InviteMembers = `
-  mutation inviteMembers($params: InviteMemberInput!) {
-    _invite_members(params: $params) {
-      message
-    }
-  }
-`;
-
-export const RevokeAccess = `
-  mutation revokeAccess($param: UpdateAccessInput!) {
-    _revoke_access(param: $param) {
-      message
-    }
-  }
-`;
-
-export const EnableAccess = `
-  mutation revokeAccess($param: UpdateAccessInput!) {
-    _enable_access(param: $param) {
-      message
-    }
-  }
-`;
-
-export const GenerateKeys = `
-  mutation generateKeys($params: GenerateJWTKeysInput!) {
-    _generate_jwt_keys(params: $params) {
-      secret
-      public_key
-      private_key
-    }
-  }
-`;
-
-export const AddWebhook = `
-  mutation addWebhook($params: AddWebhookRequest!) {
-    _add_webhook(params: $params) {
-      message
-    }
-  }
-`;
-
-export const EditWebhook = `
-  mutation editWebhook($params: UpdateWebhookRequest!) {
-    _update_webhook(params: $params) {
-      message
-    }
-  }
-`;
-
-export const DeleteWebhook = `
-  mutation deleteWebhook($params: WebhookRequest!) {
-    _delete_webhook(params: $params) {
-      message
-    }
-  }
-`;
-
-export const TestEndpoint = `
-  mutation testEndpoint($params: TestEndpointRequest!) {
-    _test_endpoint(params: $params) {
-      http_status
-      response
-    }
-  }
-`;
-
-export const AddEmailTemplate = `
-  mutation addEmailTemplate($params: AddEmailTemplateRequest!) {
-    _add_email_template(params: $params) {
-      message
-    }
-  }
-`;
-
-export const EditEmailTemplate = `
-  mutation editEmailTemplate($params: UpdateEmailTemplateRequest!) {
-    _update_email_template(params: $params) {
-      message
-    }
-  }
-`;
-
-export const DeleteEmailTemplate = `
-  mutation deleteEmailTemplate($params: DeleteEmailTemplateRequest!) {
-    _delete_email_template(params: $params) {
-      message
-    }
-  }
-`;
--- a/dashboard/src/graphql/queries/index.ts
+++ b/dashboard/src/graphql/queries/index.ts
@ -1,12 +1,3 @@
-export const MetaQuery = `
-  query MetaQuery {
-    meta {
-      version
-      client_id
-    }
-  }
-`;
-
 export const AdminSessionQuery = `
  query {
    _admin_session{
@ -14,186 +5,3 @@ export const AdminSessionQuery = `
    }
  }
 `;
-
-export const EnvVariablesQuery = `
-  query {
-    _env{
-      CLIENT_ID
-      CLIENT_SECRET
-      GOOGLE_CLIENT_ID
-      GOOGLE_CLIENT_SECRET
-      GITHUB_CLIENT_ID
-      GITHUB_CLIENT_SECRET
-      FACEBOOK_CLIENT_ID
-      FACEBOOK_CLIENT_SECRET
-      LINKEDIN_CLIENT_ID
-      LINKEDIN_CLIENT_SECRET
-      APPLE_CLIENT_ID
-      APPLE_CLIENT_SECRET
-      DISCORD_CLIENT_ID
-      DISCORD_CLIENT_SECRET
-      TWITTER_CLIENT_ID
-      TWITTER_CLIENT_SECRET
-      MICROSOFT_CLIENT_ID
-      MICROSOFT_CLIENT_SECRET
-      MICROSOFT_ACTIVE_DIRECTORY_TENANT_ID
-      TWITCH_CLIENT_ID
-      TWITCH_CLIENT_SECRET
-      ROBLOX_CLIENT_ID
-      ROBLOX_CLIENT_SECRET
-      DEFAULT_ROLES
-      PROTECTED_ROLES
-      ROLES
-      JWT_TYPE
-      JWT_SECRET
-      JWT_ROLE_CLAIM
-      JWT_PRIVATE_KEY
-      JWT_PUBLIC_KEY
-      REDIS_URL
-      SMTP_HOST
-      SMTP_PORT
-      SMTP_USERNAME
-      SMTP_PASSWORD
-      SMTP_LOCAL_NAME
-      SENDER_EMAIL
-      SENDER_NAME
-      ALLOWED_ORIGINS
-      ORGANIZATION_NAME
-      ORGANIZATION_LOGO
-      ADMIN_SECRET
-      APP_COOKIE_SECURE
-      ADMIN_COOKIE_SECURE
-      DISABLE_LOGIN_PAGE
-      DISABLE_MAGIC_LINK_LOGIN
-      DISABLE_EMAIL_VERIFICATION
-      DISABLE_BASIC_AUTHENTICATION
-      DISABLE_MOBILE_BASIC_AUTHENTICATION
-      DISABLE_SIGN_UP
-      DISABLE_STRONG_PASSWORD
-      DISABLE_REDIS_FOR_ENV
-      CUSTOM_ACCESS_TOKEN_SCRIPT
-      DATABASE_NAME
-      DATABASE_TYPE
-      DATABASE_URL
-      ACCESS_TOKEN_EXPIRY_TIME
-      DISABLE_MULTI_FACTOR_AUTHENTICATION
-      ENFORCE_MULTI_FACTOR_AUTHENTICATION
-      DEFAULT_AUTHORIZE_RESPONSE_TYPE
-      DEFAULT_AUTHORIZE_RESPONSE_MODE
-      DISABLE_PLAYGROUND
-      DISABLE_TOTP_LOGIN
-      DISABLE_MAIL_OTP_LOGIN
-    }
-  }
-`;
-
-export const UserDetailsQuery = `
-  query($params: PaginatedInput) {
-    _users(params: $params) {
-      pagination {
-        limit
-        page
-        offset
-        total
-      }
-      users {
-        id
-        email
-        email_verified
-        phone_number_verified
-        given_name
-        family_name
-        middle_name
-        nickname
-        gender
-        birthdate
-        phone_number
-        picture
-        signup_methods
-        roles
-        created_at
-        revoked_timestamp
-        is_multi_factor_auth_enabled
-      }
-    }
-  }
-`;
-
-export const EmailVerificationQuery = `
-  query {
-    _env{
-      DISABLE_EMAIL_VERIFICATION
-    }
-  }
-`;
-
-export const WebhooksDataQuery = `
-  query getWebhooksData($params: PaginatedInput!) {
-    _webhooks(params: $params){
-      webhooks{
-        id
-        event_description
-        event_name
-        endpoint
-        enabled
-        headers
-      }
-      pagination{
-        limit
-        page
-        offset
-        total
-      }
-    }
-  }
-`;
-
-export const EmailTemplatesQuery = `
-  query getEmailTemplates($params: PaginatedInput!) {
-    _email_templates(params: $params) {
-      email_templates {
-        id
-        event_name
-        subject
-        created_at
-        template
-        design
-      }
-      pagination {
-        limit
-        page
-        offset
-        total
-      }
-    }
-  }
-`;
-
-export const WebhookLogsQuery = `
-  query getWebhookLogs($params: ListWebhookLogRequest!) {
-    _webhook_logs(params: $params) {
-      webhook_logs {
-        id
-        http_status
-        request
-        response
-        created_at
-      }
-      pagination {
-        limit
-        page
-        offset
-        total
-      }
-    }
-  }
-`;
-
-export const GetAvailableRolesQuery = `
-  query {
-    _env {
-      ROLES
-      PROTECTED_ROLES
-    }
-  }
-`;
--- a/dashboard/src/index.tsx
+++ b/dashboard/src/index.tsx
@ -2,9 +2,4 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';

-ReactDOM.render(
-	<div>
-		<App />
-	</div>,
-	document.getElementById('root'),
-);
+ReactDOM.render(<App />, document.getElementById('root'));
--- a/dashboard/src/layouts/AuthLayout.tsx
+++ b/dashboard/src/layouts/AuthLayout.tsx
@ -1,28 +1,18 @@
-import {
-	Box,
-	Flex,
-	Image,
-	Text,
-	Spinner,
-	useMediaQuery,
-} from '@chakra-ui/react';
+import { Box, Center, Flex, Image, Text } from '@chakra-ui/react';
 import React from 'react';
-import { useQuery } from 'urql';
-import { MetaQuery } from '../graphql/queries';
+import { LOGO_URL } from '../constants';

 export function AuthLayout({ children }: { children: React.ReactNode }) {
-	const [{ fetching, data }] = useQuery({ query: MetaQuery });
-	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
 	return (
 		<Flex
-			h="100vh"
+			flexWrap="wrap"
+			h="100%"
 			bg="gray.100"
 			alignItems="center"
 			justifyContent="center"
-			direction={['column', 'column']}
-			padding={['2%', '2%', '2%', '2%']}
+			flexDirection="column"
 		>
-			<Flex alignItems="center" maxW="100%">
+			<Flex alignItems="center">
 				<Image
 					src="https://authorizer.dev/images/logo.png"
 					alt="logo"
@ -33,26 +23,9 @@ export function AuthLayout({ children }: { children: React.ReactNode }) {
 				</Text>
 			</Flex>

-			{fetching ? (
-				<Spinner />
-			) : (
-				<>
-					<Box
-						p="6"
-						m="5"
-						rounded="5"
-						bg="white"
-						w={isNotSmallerScreen ? '500px' : '450px'}
-						shadow="xl"
-						maxW="100%"
-					>
+			<Box p="6" m="5" rounded="5" bg="white" w="500px" shadow="xl">
 				{children}
 			</Box>
-					<Text color="gray.600" fontSize="sm">
-						Current Version: {data.meta.version}
-					</Text>
-				</>
-			)}
 		</Flex>
 	);
 }
--- a/dashboard/src/layouts/DashboardLayout.tsx
+++ b/dashboard/src/layouts/DashboardLayout.tsx
@ -31,7 +31,7 @@ export function DashboardLayout({ children }: { children: ReactNode }) {
 			</Drawer>
 			{/* mobilenav */}
 			<MobileNav onOpen={onOpen} />
-			<Box ml={{ base: 0, md: '64' }} p="4" pt="24">
+			<Box ml={{ base: 0, md: 60 }} p="4" pt="24">
 				{children}
 			</Box>
 		</Box>
--- a/dashboard/src/pages/Auth.tsx
+++ b/dashboard/src/pages/Auth.tsx
@ -6,6 +6,7 @@ import {
 	useToast,
 	VStack,
 	Text,
+	Divider,
 } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 import { useMutation } from 'urql';
@ -57,7 +58,7 @@ export default function Auth() {
 					title: capitalizeFirstLetter(error.message),
 					isClosable: true,
 					status: 'error',
-					position: 'top-right',
+					position: 'bottom-right',
 				});
 			});
 		}
@ -72,25 +73,17 @@ export default function Auth() {
 				fontWeight="bold"
 				mb="2"
 			>
-				Hello Admin 👋 <br />
+				Hi there 👋 <br />
 			</Text>
 			<Text fontSize="large" textAlign="center" color="gray.500" mb="8">
-				Welcome to Admin Dashboard
+				Welcome to Authorizer Administrative Dashboard
 			</Text>
 			<form onSubmit={handleSubmit}>
 				<VStack spacing="5" justify="space-between">
 					<FormControl isRequired>
-						<FormLabel htmlFor="admin-username">Username</FormLabel>
-						<Input
-							size="lg"
-							id="admin-username"
-							placeholder="Username"
-							disabled
-							value="admin"
-						/>
-					</FormControl>
-					<FormControl isRequired>
-						<FormLabel htmlFor="admin-secret">Password</FormLabel>
+						{/* <FormLabel htmlFor="admin-secret">
+							{isLogin ? 'Enter' : 'Configure'} Admin Secret
+						</FormLabel> */}
 						<Input
 							size="lg"
 							id="admin-secret"
@ -101,10 +94,10 @@ export default function Auth() {
 					</FormControl>
 					<Button
 						isLoading={signUpResult.fetching || loginResult.fetching}
-						loadingText="Submitting"
 						colorScheme="blue"
 						size="lg"
 						w="100%"
+						d="block"
 						type="submit"
 					>
 						{isLogin ? 'Login' : 'Sign up'}
@ -118,7 +111,10 @@ export default function Auth() {
 						</Text>
 					) : (
 						<Text color="gray.600" fontSize="sm">
-							<b>Note:</b> Configure the password to start using your dashboard.
+							<b>Note:</b> You can also configure admin secret by setting{' '}
+							<code>ADMIN_SECRET</code> environment variable. For more
+							information, please refer to the{' '}
+							<a href="https://docs.authorizer.dev/core/env/">documentation</a>.
 						</Text>
 					)}
 				</VStack>
--- a/dashboard/src/pages/EmailTemplates.tsx
+++ b/dashboard/src/pages/EmailTemplates.tsx
@ -1,348 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useClient } from 'urql';
-import {
-	Box,
-	Button,
-	Center,
-	Flex,
-	IconButton,
-	Menu,
-	MenuButton,
-	MenuList,
-	NumberDecrementStepper,
-	NumberIncrementStepper,
-	NumberInput,
-	NumberInputField,
-	NumberInputStepper,
-	Select,
-	Spinner,
-	Table,
-	TableCaption,
-	Tbody,
-	Td,
-	Text,
-	Th,
-	Thead,
-	Tooltip,
-	Tr,
-} from '@chakra-ui/react';
-import {
-	FaAngleDoubleLeft,
-	FaAngleDoubleRight,
-	FaAngleDown,
-	FaAngleLeft,
-	FaAngleRight,
-	FaExclamationCircle,
-} from 'react-icons/fa';
-import UpdateEmailTemplateModal from '../components/UpdateEmailTemplateModal';
-import {
-	pageLimits,
-	UpdateModalViews,
-	EmailTemplateInputDataFields,
-} from '../constants';
-import { EmailTemplatesQuery } from '../graphql/queries';
-import dayjs from 'dayjs';
-import DeleteEmailTemplateModal from '../components/DeleteEmailTemplateModal';
-
-interface paginationPropTypes {
-	limit: number;
-	page: number;
-	offset: number;
-	total: number;
-	maxPages: number;
-}
-
-interface EmailTemplateDataType {
-	[EmailTemplateInputDataFields.ID]: string;
-	[EmailTemplateInputDataFields.EVENT_NAME]: string;
-	[EmailTemplateInputDataFields.SUBJECT]: string;
-	[EmailTemplateInputDataFields.CREATED_AT]: number;
-	[EmailTemplateInputDataFields.TEMPLATE]: string;
-	[EmailTemplateInputDataFields.DESIGN]: string;
-}
-
-const EmailTemplates = () => {
-	const client = useClient();
-	const [loading, setLoading] = useState<boolean>(false);
-	const [emailTemplatesData, setEmailTemplatesData] = useState<
-		EmailTemplateDataType[]
-	>([]);
-	const [paginationProps, setPaginationProps] = useState<paginationPropTypes>({
-		limit: 5,
-		page: 1,
-		offset: 0,
-		total: 0,
-		maxPages: 1,
-	});
-	const getMaxPages = (pagination: paginationPropTypes) => {
-		const { limit, total } = pagination;
-		if (total > 1) {
-			return total % limit === 0
-				? total / limit
-				: parseInt(`${total / limit}`) + 1;
-		} else return 1;
-	};
-	const fetchEmailTemplatesData = async () => {
-		setLoading(true);
-		const res = await client
-			.query(EmailTemplatesQuery, {
-				params: {
-					pagination: {
-						limit: paginationProps.limit,
-						page: paginationProps.page,
-					},
-				},
-			})
-			.toPromise();
-		if (res.data?._email_templates) {
-			const { pagination, email_templates: emailTemplates } =
-				res.data?._email_templates;
-			const maxPages = getMaxPages(pagination);
-			if (emailTemplates?.length) {
-				setEmailTemplatesData(emailTemplates);
-				setPaginationProps({ ...paginationProps, ...pagination, maxPages });
-			} else {
-				if (paginationProps.page !== 1) {
-					setPaginationProps({
-						...paginationProps,
-						...pagination,
-						maxPages,
-						page: 1,
-					});
-				}
-			}
-		}
-		setLoading(false);
-	};
-	const paginationHandler = (value: Record<string, number>) => {
-		setPaginationProps({ ...paginationProps, ...value });
-	};
-	useEffect(() => {
-		fetchEmailTemplatesData();
-	}, [paginationProps.page, paginationProps.limit]);
-	return (
-		<Box m="5" py="5" px="10" bg="white" rounded="md">
-			<Flex margin="2% 0" justifyContent="space-between" alignItems="center">
-				<Text fontSize="md" fontWeight="bold">
-					Email Templates
-				</Text>
-				<UpdateEmailTemplateModal
-					view={UpdateModalViews.ADD}
-					fetchEmailTemplatesData={fetchEmailTemplatesData}
-				/>
-			</Flex>
-			{!loading ? (
-				emailTemplatesData.length ? (
-					<Table variant="simple">
-						<Thead>
-							<Tr>
-								<Th>Event Name</Th>
-								<Th>Subject</Th>
-								<Th>Created At</Th>
-								<Th>Actions</Th>
-							</Tr>
-						</Thead>
-						<Tbody>
-							{emailTemplatesData.map((templateData: EmailTemplateDataType) => (
-								<Tr
-									key={templateData[EmailTemplateInputDataFields.ID]}
-									style={{ fontSize: 14 }}
-								>
-									<Td maxW="300">
-										{templateData[EmailTemplateInputDataFields.EVENT_NAME]}
-									</Td>
-									<Td>{templateData[EmailTemplateInputDataFields.SUBJECT]}</Td>
-									<Td>
-										{dayjs(templateData.created_at * 1000).format(
-											'MMM DD, YYYY',
-										)}
-									</Td>
-									<Td>
-										<Menu>
-											<MenuButton as={Button} variant="unstyled" size="sm">
-												<Flex
-													justifyContent="space-between"
-													alignItems="center"
-												>
-													<Text fontSize="sm" fontWeight="light">
-														Menu
-													</Text>
-													<FaAngleDown style={{ marginLeft: 10 }} />
-												</Flex>
-											</MenuButton>
-											<MenuList>
-												<UpdateEmailTemplateModal
-													view={UpdateModalViews.Edit}
-													selectedTemplate={templateData}
-													fetchEmailTemplatesData={fetchEmailTemplatesData}
-												/>
-												<DeleteEmailTemplateModal
-													emailTemplateId={
-														templateData[EmailTemplateInputDataFields.ID]
-													}
-													eventName={
-														templateData[
-															EmailTemplateInputDataFields.EVENT_NAME
-														]
-													}
-													fetchEmailTemplatesData={fetchEmailTemplatesData}
-												/>
-											</MenuList>
-										</Menu>
-									</Td>
-								</Tr>
-							))}
-						</Tbody>
-						{(paginationProps.maxPages > 1 || paginationProps.total >= 5) && (
-							<TableCaption>
-								<Flex
-									justifyContent="space-between"
-									alignItems="center"
-									m="2% 0"
-								>
-									<Flex flex="1">
-										<Tooltip label="First Page">
-											<IconButton
-												aria-label="icon button"
-												onClick={() =>
-													paginationHandler({
-														page: 1,
-													})
-												}
-												isDisabled={paginationProps.page <= 1}
-												mr={4}
-												icon={<FaAngleDoubleLeft />}
-											/>
-										</Tooltip>
-										<Tooltip label="Previous Page">
-											<IconButton
-												aria-label="icon button"
-												onClick={() =>
-													paginationHandler({
-														page: paginationProps.page - 1,
-													})
-												}
-												isDisabled={paginationProps.page <= 1}
-												icon={<FaAngleLeft />}
-											/>
-										</Tooltip>
-									</Flex>
-									<Flex
-										flex="8"
-										justifyContent="space-evenly"
-										alignItems="center"
-									>
-										<Text mr={8}>
-											Page{' '}
-											<Text fontWeight="bold" as="span">
-												{paginationProps.page}
-											</Text>{' '}
-											of{' '}
-											<Text fontWeight="bold" as="span">
-												{paginationProps.maxPages}
-											</Text>
-										</Text>
-										<Flex alignItems="center">
-											<Text flexShrink="0">Go to page:</Text>{' '}
-											<NumberInput
-												ml={2}
-												mr={8}
-												w={28}
-												min={1}
-												max={paginationProps.maxPages}
-												onChange={(value) =>
-													paginationHandler({
-														page: parseInt(value),
-													})
-												}
-												value={paginationProps.page}
-											>
-												<NumberInputField />
-												<NumberInputStepper>
-													<NumberIncrementStepper />
-													<NumberDecrementStepper />
-												</NumberInputStepper>
-											</NumberInput>
-										</Flex>
-										<Select
-											w={32}
-											value={paginationProps.limit}
-											onChange={(e) =>
-												paginationHandler({
-													page: 1,
-													limit: parseInt(e.target.value),
-												})
-											}
-										>
-											{pageLimits.map((pageSize) => (
-												<option key={pageSize} value={pageSize}>
-													Show {pageSize}
-												</option>
-											))}
-										</Select>
-									</Flex>
-									<Flex flex="1">
-										<Tooltip label="Next Page">
-											<IconButton
-												aria-label="icon button"
-												onClick={() =>
-													paginationHandler({
-														page: paginationProps.page + 1,
-													})
-												}
-												isDisabled={
-													paginationProps.page >= paginationProps.maxPages
-												}
-												icon={<FaAngleRight />}
-											/>
-										</Tooltip>
-										<Tooltip label="Last Page">
-											<IconButton
-												aria-label="icon button"
-												onClick={() =>
-													paginationHandler({
-														page: paginationProps.maxPages,
-													})
-												}
-												isDisabled={
-													paginationProps.page >= paginationProps.maxPages
-												}
-												ml={4}
-												icon={<FaAngleDoubleRight />}
-											/>
-										</Tooltip>
-									</Flex>
-								</Flex>
-							</TableCaption>
-						)}
-					</Table>
-				) : (
-					<Flex
-						flexDirection="column"
-						minH="25vh"
-						justifyContent="center"
-						alignItems="center"
-					>
-						<Center w="50px" marginRight="1.5%">
-							<FaExclamationCircle style={{ color: '#f0f0f0', fontSize: 70 }} />
-						</Center>
-						<Text
-							fontSize="2xl"
-							paddingRight="1%"
-							fontWeight="bold"
-							color="#d9d9d9"
-						>
-							No Data
-						</Text>
-					</Flex>
-				)
-			) : (
-				<Center minH="25vh">
-					<Spinner />
-				</Center>
-			)}
-		</Box>
-	);
-};
-
-export default EmailTemplates;
--- a/dashboard/src/pages/Environment.tsx
+++ b/dashboard/src/pages/Environment.tsx
@ -1,348 +1,35 @@
-import React, { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { Box, Flex, Stack, Button, useToast } from '@chakra-ui/react';
-import { useClient } from 'urql';
-import { FaSave } from 'react-icons/fa';
-import _ from 'lodash';
-import { EnvVariablesQuery } from '../graphql/queries';
-import {
-	SelectInputType,
-	HiddenInputType,
-	TextInputType,
-	HMACEncryptionType,
-	RSAEncryptionType,
-	ECDSAEncryptionType,
-	envVarTypes,
-	envSubViews,
-} from '../constants';
-import { UpdateEnvVariables } from '../graphql/mutation';
-import { getObjectDiff, capitalizeFirstLetter } from '../utils';
-import OAuthConfig from '../components/EnvComponents/OAuthConfig';
-import Roles from '../components/EnvComponents/Roles';
-import JWTConfigurations from '../components/EnvComponents/JWTConfiguration';
-import SessionStorage from '../components/EnvComponents/SessionStorage';
-import EmailConfigurations from '../components/EnvComponents/EmailConfiguration';
-import DomainWhiteListing from '../components/EnvComponents/DomainWhitelisting';
-import OrganizationInfo from '../components/EnvComponents/OrganizationInfo';
-import AccessToken from '../components/EnvComponents/AccessToken';
-import Features from '../components/EnvComponents/Features';
-import SecurityAdminSecret from '../components/EnvComponents/SecurityAdminSecret';
-import DatabaseCredentials from '../components/EnvComponents/DatabaseCredentials';
+import { Box, Divider, Flex } from '@chakra-ui/react';
+import React from 'react';

-const Environment = () => {
-	const client = useClient();
-	const toast = useToast();
-	const [adminSecret, setAdminSecret] = React.useState<
-		Record<string, string | boolean>
-	>({
-		value: '',
-		disableInputField: true,
-	});
-	const [loading, setLoading] = React.useState<boolean>(true);
-	const [envVariables, setEnvVariables] = React.useState<envVarTypes>({
-		GOOGLE_CLIENT_ID: '',
-		GOOGLE_CLIENT_SECRET: '',
-		GITHUB_CLIENT_ID: '',
-		GITHUB_CLIENT_SECRET: '',
-		FACEBOOK_CLIENT_ID: '',
-		FACEBOOK_CLIENT_SECRET: '',
-		LINKEDIN_CLIENT_ID: '',
-		LINKEDIN_CLIENT_SECRET: '',
-		APPLE_CLIENT_ID: '',
-		APPLE_CLIENT_SECRET: '',
-		DISCORD_CLIENT_ID: '',
-		DISCORD_CLIENT_SECRET: '',
-		TWITTER_CLIENT_ID: '',
-		TWITTER_CLIENT_SECRET: '',
-		MICROSOFT_CLIENT_ID: '',
-		MICROSOFT_CLIENT_SECRET: '',
-		MICROSOFT_ACTIVE_DIRECTORY_TENANT_ID: '',
-		TWITCH_CLIENT_ID: '',
-		TWITCH_CLIENT_SECRET: '',
-		ROBLOX_CLIENT_ID: '',
-		ROBLOX_CLIENT_SECRET: '',
-		ROLES: [],
-		DEFAULT_ROLES: [],
-		PROTECTED_ROLES: [],
-		JWT_TYPE: '',
-		JWT_SECRET: '',
-		JWT_ROLE_CLAIM: '',
-		JWT_PRIVATE_KEY: '',
-		JWT_PUBLIC_KEY: '',
-		REDIS_URL: '',
-		SMTP_HOST: '',
-		SMTP_PORT: '',
-		SMTP_USERNAME: '',
-		SMTP_PASSWORD: '',
-		SMTP_LOCAL_NAME: '',
-		SENDER_EMAIL: '',
-		SENDER_NAME: '',
-		ALLOWED_ORIGINS: [],
-		ORGANIZATION_NAME: '',
-		ORGANIZATION_LOGO: '',
-		CUSTOM_ACCESS_TOKEN_SCRIPT: '',
-		ADMIN_SECRET: '',
-		APP_COOKIE_SECURE: false,
-		ADMIN_COOKIE_SECURE: false,
-		DISABLE_LOGIN_PAGE: false,
-		DISABLE_MAGIC_LINK_LOGIN: false,
-		DISABLE_EMAIL_VERIFICATION: false,
-		DISABLE_BASIC_AUTHENTICATION: false,
-		DISABLE_MOBILE_BASIC_AUTHENTICATION: false,
-		DISABLE_SIGN_UP: false,
-		DISABLE_STRONG_PASSWORD: false,
-		OLD_ADMIN_SECRET: '',
-		DATABASE_NAME: '',
-		DATABASE_TYPE: '',
-		DATABASE_URL: '',
-		ACCESS_TOKEN_EXPIRY_TIME: '',
-		DISABLE_MULTI_FACTOR_AUTHENTICATION: false,
-		ENFORCE_MULTI_FACTOR_AUTHENTICATION: false,
-		DEFAULT_AUTHORIZE_RESPONSE_TYPE: '',
-		DEFAULT_AUTHORIZE_RESPONSE_MODE: '',
-		DISABLE_PLAYGROUND: false,
-		DISABLE_TOTP_LOGIN: false,
-		DISABLE_MAIL_OTP_LOGIN: true,
-	});
-
-	const [fieldVisibility, setFieldVisibility] = React.useState<
-		Record<string, boolean>
-	>({
-		GOOGLE_CLIENT_SECRET: false,
-		GITHUB_CLIENT_SECRET: false,
-		FACEBOOK_CLIENT_SECRET: false,
-		LINKEDIN_CLIENT_SECRET: false,
-		APPLE_CLIENT_SECRET: false,
-		DISCORD_CLIENT_SECRET: false,
-		TWITTER_CLIENT_SECRET: false,
-		TWITCH_CLIENT_SECRET: false,
-		JWT_SECRET: false,
-		SMTP_PASSWORD: false,
-		ADMIN_SECRET: false,
-		OLD_ADMIN_SECRET: false,
-	});
-
-	const { sec } = useParams();
-
-	async function getData() {
-		const {
-			data: { _env: envData },
-		} = await client.query(EnvVariablesQuery).toPromise();
-		setLoading(false);
-
-		setEnvVariables({
-			...envData,
-			OLD_ADMIN_SECRET: envData.ADMIN_SECRET,
-			ADMIN_SECRET: '',
-		});
-		setAdminSecret({
-			value: '',
-			disableInputField: true,
-		});
-	}
-
-	useEffect(() => {
-		getData();
-	}, [sec]);
-
-	const validateAdminSecretHandler = (event: any) => {
-		if (envVariables.OLD_ADMIN_SECRET === event.target.value) {
-			setAdminSecret({
-				...adminSecret,
-				value: event.target.value,
-				disableInputField: false,
-			});
-		} else {
-			setAdminSecret({
-				...adminSecret,
-				value: event.target.value,
-				disableInputField: true,
-			});
-		}
-		if (envVariables.ADMIN_SECRET !== '') {
-			setEnvVariables({ ...envVariables, ADMIN_SECRET: '' });
-		}
-	};
-
-	const saveHandler = async () => {
-		setLoading(true);
-		const {
-			data: { _env: envData },
-		} = await client.query(EnvVariablesQuery).toPromise();
-		const diff = getObjectDiff(envVariables, envData);
-		const updatedEnvVariables = diff.reduce(
-			(acc: any, property: string) => ({
-				...acc,
-				// @ts-ignore
-				[property]: envVariables[property],
-			}),
-			{},
-		);
-		if (
-			updatedEnvVariables[HiddenInputType.ADMIN_SECRET] === '' ||
-			updatedEnvVariables[HiddenInputType.OLD_ADMIN_SECRET] !==
-				envData.ADMIN_SECRET
-		) {
-			delete updatedEnvVariables.OLD_ADMIN_SECRET;
-			delete updatedEnvVariables.ADMIN_SECRET;
-		}
-
-		delete updatedEnvVariables.DATABASE_URL;
-		delete updatedEnvVariables.DATABASE_TYPE;
-		delete updatedEnvVariables.DATABASE_NAME;
-
-		const res = await client
-			.mutation(UpdateEnvVariables, { params: updatedEnvVariables })
-			.toPromise();
-
-		setLoading(false);
-
-		if (res.error) {
-			toast({
-				title: capitalizeFirstLetter(res.error.message),
-				isClosable: true,
-				status: 'error',
-				position: 'bottom-right',
-			});
-
-			return;
-		}
-
-		setAdminSecret({
-			value: '',
-			disableInputField: true,
-		});
-
-		getData();
-
-		toast({
-			title: `Successfully updated ${
-				Object.keys(updatedEnvVariables).length
-			} variables`,
-			isClosable: true,
-			status: 'success',
-			position: 'top-right',
-		});
-	};
-
-	const renderComponent = (tab: any) => {
-		switch (tab) {
-			case envSubViews.INSTANCE_INFO:
+// Don't allow changing database from here as it can cause persistence issues
+export default function Environment() {
 	return (
-					<OAuthConfig
-						envVariables={envVariables}
-						setVariables={setEnvVariables}
-						fieldVisibility={fieldVisibility}
-						setFieldVisibility={setFieldVisibility}
-					/>
-				);
-			case envSubViews.ROLES:
-				return (
-					<Roles variables={envVariables} setVariables={setEnvVariables} />
-				);
-			case envSubViews.JWT_CONFIG:
-				return (
-					<JWTConfigurations
-						variables={envVariables}
-						setVariables={setEnvVariables}
-						fieldVisibility={fieldVisibility}
-						setFieldVisibility={setFieldVisibility}
-						SelectInputType={SelectInputType.JWT_TYPE}
-						HMACEncryptionType={HMACEncryptionType}
-						RSAEncryptionType={RSAEncryptionType}
-						ECDSAEncryptionType={ECDSAEncryptionType}
-						getData={getData}
-					/>
-				);
-			case envSubViews.SESSION_STORAGE:
-				return (
-					<SessionStorage
-						variables={envVariables}
-						setVariables={setEnvVariables}
-						RedisURL={TextInputType.REDIS_URL}
-					/>
-				);
-			case envSubViews.EMAIL_CONFIG:
-				return (
-					<EmailConfigurations
-						variables={envVariables}
-						setVariables={setEnvVariables}
-						fieldVisibility={fieldVisibility}
-						setFieldVisibility={setFieldVisibility}
-					/>
-				);
-			case envSubViews.WHITELIST_VARIABLES:
-				return (
-					<DomainWhiteListing
-						variables={envVariables}
-						setVariables={setEnvVariables}
-					/>
-				);
-			case envSubViews.ORGANIZATION_INFO:
-				return (
-					<OrganizationInfo
-						variables={envVariables}
-						setVariables={setEnvVariables}
-					/>
-				);
-			case envSubViews.ACCESS_TOKEN:
-				return (
-					<AccessToken
-						variables={envVariables}
-						setVariables={setEnvVariables}
-					/>
-				);
-			case envSubViews.FEATURES:
-				return (
-					<Features variables={envVariables} setVariables={setEnvVariables} />
-				);
-			case envSubViews.ADMIN_SECRET:
-				return (
-					<SecurityAdminSecret
-						variables={envVariables}
-						setVariables={setEnvVariables}
-						fieldVisibility={fieldVisibility}
-						setFieldVisibility={setFieldVisibility}
-						validateAdminSecretHandler={validateAdminSecretHandler}
-						adminSecret={adminSecret}
-					/>
-				);
-			case envSubViews.DB_CRED:
-				return (
-					<DatabaseCredentials
-						variables={envVariables}
-						setVariables={setEnvVariables}
-					/>
-				);
-			default:
-				return (
-					<OAuthConfig
-						envVariables={envVariables}
-						setVariables={setEnvVariables}
-						fieldVisibility={fieldVisibility}
-						setFieldVisibility={setFieldVisibility}
-					/>
-				);
-		}
-	};
-	return (
-		<Box m="5" py="5" px="10" bg="white" rounded="md">
-			{renderComponent(sec)}
-			<Stack spacing={6} padding="1% 0" mt={4}>
-				<Flex justifyContent="end" alignItems="center">
-					<Button
-						leftIcon={<FaSave />}
-						colorScheme="blue"
-						variant="solid"
-						onClick={saveHandler}
-						isDisabled={loading}
-					>
-						Save
-					</Button>
-				</Flex>
-			</Stack>
+		<Box m="5" p="5" bg="white" rounded="md">
+			<h1>Social Media Logins</h1>
+			<Divider />- Add horizontal input for clientID and secret for - Google -
+			Github - Facebook
+			<h1>Roles</h1>
+			<Divider />- Add tagged input for roles, default roles, and protected
+			roles
+			<h1>JWT Configurations</h1>
+			<Divider />- Add input for JWT Type (keep this disabled for now with
+			notice saying, "More JWT types will be enabled in upcoming releases"),JWT
+			secret, JWT role claim
+			<h1>Session Storage</h1>
+			<Divider />- Add input for redis url
+			<h1>Email Configurations</h1>
+			<Divider />- Add input for SMTP Host, PORT, Username, Password, From
+			Email,
+			<h1>White Listing</h1>
+			<Divider />- Add input for allowed origins
+			<h1>Organization Information</h1>
+			<Divider />- Add input for organization name, and logo
+			<h1>Custom Scripts</h1>
+			<Divider />- For now add text area input for CUSTOM_ACCESS_TOKEN_SCRIPT
+			<h1>Disable Features</h1>
+			<Divider />
+			<h1>Danger</h1>
+			<Divider />- Include changing admin secret
 		</Box>
 	);
-};
-
-export default Environment;
+}
--- a/dashboard/src/pages/Users.tsx
+++ b/dashboard/src/pages/Users.tsx
@ -1,607 +1,6 @@
+import { Box } from '@chakra-ui/react';
 import React from 'react';
-import { useClient } from 'urql';
-import dayjs from 'dayjs';
-import {
-	Box,
-	Flex,
-	IconButton,
-	NumberDecrementStepper,
-	NumberIncrementStepper,
-	NumberInput,
-	NumberInputField,
-	NumberInputStepper,
-	Select,
-	Table,
-	Tag,
-	Tbody,
-	Td,
-	Text,
-	TableCaption,
-	Th,
-	Thead,
-	Tooltip,
-	Tr,
-	Button,
-	Center,
-	Menu,
-	MenuButton,
-	MenuList,
-	MenuItem,
-	useToast,
-	Spinner,
-	TableContainer,
-} from '@chakra-ui/react';
-import {
-	FaAngleLeft,
-	FaAngleRight,
-	FaAngleDoubleLeft,
-	FaAngleDoubleRight,
-	FaExclamationCircle,
-	FaAngleDown,
-} from 'react-icons/fa';
-import { EmailVerificationQuery, UserDetailsQuery } from '../graphql/queries';
-import { EnableAccess, RevokeAccess, UpdateUser } from '../graphql/mutation';
-import EditUserModal from '../components/EditUserModal';
-import DeleteUserModal from '../components/DeleteUserModal';
-import InviteMembersModal from '../components/InviteMembersModal';
-
-interface paginationPropTypes {
-	limit: number;
-	page: number;
-	offset: number;
-	total: number;
-	maxPages: number;
-}
-
-interface userDataTypes {
-	id: string;
-	email: string;
-	email_verified: boolean;
-	given_name: string;
-	family_name: string;
-	middle_name: string;
-	nickname: string;
-	gender: string;
-	birthdate: string;
-	phone_number: string;
-	picture: string;
-	signup_methods: string;
-	roles: [string];
-	created_at: number;
-	revoked_timestamp: number;
-	is_multi_factor_auth_enabled?: boolean;
-}
-
-const enum updateAccessActions {
-	REVOKE = 'REVOKE',
-	ENABLE = 'ENABLE',
-}
-
-const getMaxPages = (pagination: paginationPropTypes) => {
-	const { limit, total } = pagination;
-	if (total > 1) {
-		return total % limit === 0
-			? total / limit
-			: parseInt(`${total / limit}`) + 1;
-	} else return 1;
-};
-
-const getLimits = (pagination: paginationPropTypes) => {
-	const { total } = pagination;
-	const limits = [5];
-	if (total > 10) {
-		for (let i = 10; i <= total && limits.length <= 10; i += 5) {
-			limits.push(i);
-		}
-	}
-	return limits;
-};

 export default function Users() {
-	const client = useClient();
-	const toast = useToast();
-	const [paginationProps, setPaginationProps] =
-		React.useState<paginationPropTypes>({
-			limit: 5,
-			page: 1,
-			offset: 0,
-			total: 0,
-			maxPages: 1,
-		});
-	const [userList, setUserList] = React.useState<userDataTypes[]>([]);
-	const [loading, setLoading] = React.useState<boolean>(false);
-	const [disableInviteMembers, setDisableInviteMembers] =
-		React.useState<boolean>(true);
-	const updateUserList = async () => {
-		setLoading(true);
-		const { data } = await client
-			.query(UserDetailsQuery, {
-				params: {
-					pagination: {
-						limit: paginationProps.limit,
-						page: paginationProps.page,
-					},
-				},
-			})
-			.toPromise();
-		if (data?._users) {
-			const { pagination, users } = data._users;
-			const maxPages = getMaxPages(pagination);
-			if (users && users.length > 0) {
-				setPaginationProps({ ...paginationProps, ...pagination, maxPages });
-				setUserList(users);
-			} else {
-				if (paginationProps.page !== 1) {
-					setPaginationProps({
-						...paginationProps,
-						...pagination,
-						maxPages,
-						page: 1,
-					});
-				}
-			}
-		}
-		setLoading(false);
-	};
-	const checkEmailVerification = async () => {
-		setLoading(true);
-		const { data } = await client.query(EmailVerificationQuery).toPromise();
-		if (data?._env) {
-			const { DISABLE_EMAIL_VERIFICATION } = data._env;
-			setDisableInviteMembers(DISABLE_EMAIL_VERIFICATION);
-		}
-		setLoading(false);
-	};
-	React.useEffect(() => {
-		updateUserList();
-		checkEmailVerification();
-	}, []);
-	React.useEffect(() => {
-		updateUserList();
-	}, [paginationProps.page, paginationProps.limit]);
-
-	const paginationHandler = (value: Record<string, number>) => {
-		setPaginationProps({ ...paginationProps, ...value });
-	};
-
-	const userVerificationHandler = async (user: userDataTypes) => {
-		const { id, email, phone_number } = user;
-		let params = {};
-		if (email) {
-			params = {
-				id,
-				email,
-				email_verified: true,
-			};
-		}
-		if (phone_number) {
-			params = {
-				id,
-				phone_number,
-				phone_number_verified: true,
-			};
-		}
-		const res = await client
-			.mutation(UpdateUser, {
-				params,
-			})
-			.toPromise();
-		if (res.error) {
-			toast({
-				title: 'User verification failed',
-				isClosable: true,
-				status: 'error',
-				position: 'top-right',
-			});
-		} else if (res.data?._update_user?.id) {
-			toast({
-				title: 'User verification successful',
-				isClosable: true,
-				status: 'success',
-				position: 'top-right',
-			});
-		}
-		updateUserList();
-	};
-
-	const updateAccessHandler = async (
-		id: string,
-		action: updateAccessActions,
-	) => {
-		switch (action) {
-			case updateAccessActions.ENABLE:
-				const enableAccessRes = await client
-					.mutation(EnableAccess, {
-						param: {
-							user_id: id,
-						},
-					})
-					.toPromise();
-				if (enableAccessRes.error) {
-					toast({
-						title: 'User access enable failed',
-						isClosable: true,
-						status: 'error',
-						position: 'top-right',
-					});
-				} else {
-					toast({
-						title: 'User access enabled successfully',
-						isClosable: true,
-						status: 'success',
-						position: 'top-right',
-					});
-				}
-				updateUserList();
-				break;
-			case updateAccessActions.REVOKE:
-				const revokeAccessRes = await client
-					.mutation(RevokeAccess, {
-						param: {
-							user_id: id,
-						},
-					})
-					.toPromise();
-				if (revokeAccessRes.error) {
-					toast({
-						title: 'User access revoke failed',
-						isClosable: true,
-						status: 'error',
-						position: 'top-right',
-					});
-				} else {
-					toast({
-						title: 'User access revoked successfully',
-						isClosable: true,
-						status: 'success',
-						position: 'top-right',
-					});
-				}
-				updateUserList();
-				break;
-			default:
-				break;
-		}
-	};
-	const multiFactorAuthUpdateHandler = async (user: userDataTypes) => {
-		const res = await client
-			.mutation(UpdateUser, {
-				params: {
-					id: user.id,
-					is_multi_factor_auth_enabled: !user.is_multi_factor_auth_enabled,
-				},
-			})
-			.toPromise();
-		if (res.data?._update_user?.id) {
-			toast({
-				title: `Multi factor authentication ${
-					user.is_multi_factor_auth_enabled ? 'disabled' : 'enabled'
-				} for user`,
-				isClosable: true,
-				status: 'success',
-				position: 'top-right',
-			});
-			updateUserList();
-			return;
-		}
-		toast({
-			title: 'Multi factor authentication update failed for user',
-			isClosable: true,
-			status: 'error',
-			position: 'top-right',
-		});
-	};
-
-	return (
-		<Box m="5" py="5" px="10" bg="white" rounded="md">
-			<Flex margin="2% 0" justifyContent="space-between" alignItems="center">
-				<Text fontSize="md" fontWeight="bold">
-					Users
-				</Text>
-				<InviteMembersModal
-					disabled={disableInviteMembers}
-					updateUserList={updateUserList}
-				/>
-			</Flex>
-			{!loading ? (
-				userList.length > 0 ? (
-					<TableContainer>
-						<Table variant="simple">
-							<Thead>
-								<Tr>
-									<Th>Email / Phone</Th>
-									<Th>Created At</Th>
-									<Th>Signup Methods</Th>
-									<Th>Roles</Th>
-									<Th>Verified</Th>
-									<Th>Access</Th>
-									<Th>
-										<Tooltip label="MultiFactor Authentication Enabled / Disabled">
-											MFA
-										</Tooltip>
-									</Th>
-									<Th>Actions</Th>
-								</Tr>
-							</Thead>
-							<Tbody>
-								{userList.map((user: userDataTypes) => {
-									const {
-										email_verified,
-										phone_number_verified,
-										created_at,
-										...rest
-									}: any = user;
-									return (
-										<Tr key={user.id} style={{ fontSize: 14 }}>
-											<Td maxW="300">{user.email || user.phone_number}</Td>
-											<Td>
-												{dayjs(user.created_at * 1000).format('MMM DD, YYYY')}
-											</Td>
-											<Td>{user.signup_methods}</Td>
-											<Td>{user.roles.join(', ')}</Td>
-											<Td>
-												<Tag
-													size="sm"
-													variant="outline"
-													colorScheme={
-														user.email_verified || user.phone_number_verified
-															? 'green'
-															: 'yellow'
-													}
-												>
-													{(
-														user.email_verified || user.phone_number_verified
-													).toString()}
-												</Tag>
-											</Td>
-											<Td>
-												<Tag
-													size="sm"
-													variant="outline"
-													colorScheme={user.revoked_timestamp ? 'red' : 'green'}
-												>
-													{user.revoked_timestamp ? 'Revoked' : 'Enabled'}
-												</Tag>
-											</Td>
-											<Td>
-												<Tag
-													size="sm"
-													variant="outline"
-													colorScheme={
-														user.is_multi_factor_auth_enabled ? 'green' : 'red'
-													}
-												>
-													{user.is_multi_factor_auth_enabled
-														? 'Enabled'
-														: 'Disabled'}
-												</Tag>
-											</Td>
-											<Td>
-												<Menu>
-													<MenuButton as={Button} variant="unstyled" size="sm">
-														<Flex
-															justifyContent="space-between"
-															alignItems="center"
-														>
-															<Text fontSize="sm" fontWeight="light">
-																Menu
-															</Text>
-															<FaAngleDown style={{ marginLeft: 10 }} />
-														</Flex>
-													</MenuButton>
-													<MenuList>
-														{!user.email_verified &&
-															!user.phone_number_verified && (
-																<MenuItem
-																	onClick={() => userVerificationHandler(user)}
-																>
-																	Verify User
-																</MenuItem>
-															)}
-														<EditUserModal
-															user={rest}
-															updateUserList={updateUserList}
-														/>
-														<DeleteUserModal
-															user={rest}
-															updateUserList={updateUserList}
-														/>
-														{user.revoked_timestamp ? (
-															<MenuItem
-																onClick={() =>
-																	updateAccessHandler(
-																		user.id,
-																		updateAccessActions.ENABLE,
-																	)
-																}
-															>
-																Enable Access
-															</MenuItem>
-														) : (
-															<MenuItem
-																onClick={() =>
-																	updateAccessHandler(
-																		user.id,
-																		updateAccessActions.REVOKE,
-																	)
-																}
-															>
-																Revoke Access
-															</MenuItem>
-														)}
-														{user.is_multi_factor_auth_enabled ? (
-															<MenuItem
-																onClick={() =>
-																	multiFactorAuthUpdateHandler(user)
-																}
-															>
-																Disable MultiFactor Authentication
-															</MenuItem>
-														) : (
-															<MenuItem
-																onClick={() =>
-																	multiFactorAuthUpdateHandler(user)
-																}
-															>
-																Enable MultiFactor Authentication
-															</MenuItem>
-														)}
-													</MenuList>
-												</Menu>
-											</Td>
-										</Tr>
-									);
-								})}
-							</Tbody>
-							{(paginationProps.maxPages > 1 || paginationProps.total >= 5) && (
-								<TableCaption>
-									<Flex
-										justifyContent="space-between"
-										alignItems="center"
-										m="2% 0"
-									>
-										<Flex flex="1">
-											<Tooltip label="First Page">
-												<IconButton
-													aria-label="icon button"
-													onClick={() =>
-														paginationHandler({
-															page: 1,
-														})
-													}
-													isDisabled={paginationProps.page <= 1}
-													mr={4}
-													icon={<FaAngleDoubleLeft />}
-												/>
-											</Tooltip>
-											<Tooltip label="Previous Page">
-												<IconButton
-													aria-label="icon button"
-													onClick={() =>
-														paginationHandler({
-															page: paginationProps.page - 1,
-														})
-													}
-													isDisabled={paginationProps.page <= 1}
-													icon={<FaAngleLeft />}
-												/>
-											</Tooltip>
-										</Flex>
-										<Flex
-											flex="8"
-											justifyContent="space-evenly"
-											alignItems="center"
-										>
-											<Text mr={8}>
-												Page{' '}
-												<Text fontWeight="bold" as="span">
-													{paginationProps.page}
-												</Text>{' '}
-												of{' '}
-												<Text fontWeight="bold" as="span">
-													{paginationProps.maxPages}
-												</Text>
-											</Text>
-											<Flex alignItems="center">
-												<Text flexShrink="0">Go to page:</Text>{' '}
-												<NumberInput
-													ml={2}
-													mr={8}
-													w={28}
-													min={1}
-													max={paginationProps.maxPages}
-													onChange={(value) =>
-														paginationHandler({
-															page: parseInt(value),
-														})
-													}
-													value={paginationProps.page}
-												>
-													<NumberInputField />
-													<NumberInputStepper>
-														<NumberIncrementStepper />
-														<NumberDecrementStepper />
-													</NumberInputStepper>
-												</NumberInput>
-											</Flex>
-											<Select
-												w={32}
-												value={paginationProps.limit}
-												onChange={(e) =>
-													paginationHandler({
-														page: 1,
-														limit: parseInt(e.target.value),
-													})
-												}
-											>
-												{getLimits(paginationProps).map((pageSize) => (
-													<option key={pageSize} value={pageSize}>
-														Show {pageSize}
-													</option>
-												))}
-											</Select>
-										</Flex>
-										<Flex flex="1">
-											<Tooltip label="Next Page">
-												<IconButton
-													aria-label="icon button"
-													onClick={() =>
-														paginationHandler({
-															page: paginationProps.page + 1,
-														})
-													}
-													isDisabled={
-														paginationProps.page >= paginationProps.maxPages
-													}
-													icon={<FaAngleRight />}
-												/>
-											</Tooltip>
-											<Tooltip label="Last Page">
-												<IconButton
-													aria-label="icon button"
-													onClick={() =>
-														paginationHandler({
-															page: paginationProps.maxPages,
-														})
-													}
-													isDisabled={
-														paginationProps.page >= paginationProps.maxPages
-													}
-													ml={4}
-													icon={<FaAngleDoubleRight />}
-												/>
-											</Tooltip>
-										</Flex>
-									</Flex>
-								</TableCaption>
-							)}
-						</Table>
-					</TableContainer>
-				) : (
-					<Flex
-						flexDirection="column"
-						minH="25vh"
-						justifyContent="center"
-						alignItems="center"
-					>
-						<Center w="50px" marginRight="1.5%">
-							<FaExclamationCircle style={{ color: '#f0f0f0', fontSize: 70 }} />
-						</Center>
-						<Text
-							fontSize="2xl"
-							paddingRight="1%"
-							fontWeight="bold"
-							color="#d9d9d9"
-						>
-							No Data
-						</Text>
-					</Flex>
-				)
-			) : (
-				<Center minH="25vh">
-					<Spinner />
-				</Center>
-			)}
-		</Box>
-	);
+	return <Box>Welcome to Users Page</Box>;
 }
--- a/dashboard/src/pages/Webhooks.tsx
+++ b/dashboard/src/pages/Webhooks.tsx
@ -1,374 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useClient } from 'urql';
-import {
-	Box,
-	Button,
-	Center,
-	Flex,
-	IconButton,
-	Menu,
-	MenuButton,
-	MenuList,
-	NumberDecrementStepper,
-	NumberIncrementStepper,
-	NumberInput,
-	NumberInputField,
-	NumberInputStepper,
-	Select,
-	Spinner,
-	Table,
-	TableCaption,
-	Tag,
-	Tbody,
-	Td,
-	Text,
-	Th,
-	Thead,
-	Tooltip,
-	Tr,
-} from '@chakra-ui/react';
-import {
-	FaAngleDoubleLeft,
-	FaAngleDoubleRight,
-	FaAngleDown,
-	FaAngleLeft,
-	FaAngleRight,
-	FaExclamationCircle,
-} from 'react-icons/fa';
-import UpdateWebhookModal from '../components/UpdateWebhookModal';
-import {
-	pageLimits,
-	WebhookInputDataFields,
-	UpdateModalViews,
-} from '../constants';
-import { WebhooksDataQuery } from '../graphql/queries';
-import DeleteWebhookModal from '../components/DeleteWebhookModal';
-import ViewWebhookLogsModal from '../components/ViewWebhookLogsModal';
-
-interface paginationPropTypes {
-	limit: number;
-	page: number;
-	offset: number;
-	total: number;
-	maxPages: number;
-}
-
-interface webhookDataTypes {
-	[WebhookInputDataFields.ID]: string;
-	[WebhookInputDataFields.EVENT_NAME]: string;
-	[WebhookInputDataFields.EVENT_DESCRIPTION]?: string;
-	[WebhookInputDataFields.ENDPOINT]: string;
-	[WebhookInputDataFields.ENABLED]: boolean;
-	[WebhookInputDataFields.HEADERS]?: Record<string, string>;
-}
-
-const Webhooks = () => {
-	const client = useClient();
-	const [loading, setLoading] = useState<boolean>(false);
-	const [webhookData, setWebhookData] = useState<webhookDataTypes[]>([]);
-	const [paginationProps, setPaginationProps] = useState<paginationPropTypes>({
-		limit: 5,
-		page: 1,
-		offset: 0,
-		total: 0,
-		maxPages: 1,
-	});
-	const getMaxPages = (pagination: paginationPropTypes) => {
-		const { limit, total } = pagination;
-		if (total > 1) {
-			return total % limit === 0
-				? total / limit
-				: parseInt(`${total / limit}`) + 1;
-		} else return 1;
-	};
-	const fetchWebookData = async () => {
-		setLoading(true);
-		const res = await client
-			.query(WebhooksDataQuery, {
-				params: {
-					pagination: {
-						limit: paginationProps.limit,
-						page: paginationProps.page,
-					},
-				},
-			})
-			.toPromise();
-		if (res.data?._webhooks) {
-			const { pagination, webhooks } = res.data?._webhooks;
-			const maxPages = getMaxPages(pagination);
-			if (webhooks?.length) {
-				setWebhookData(webhooks);
-				setPaginationProps({ ...paginationProps, ...pagination, maxPages });
-			} else {
-				if (paginationProps.page !== 1) {
-					setPaginationProps({
-						...paginationProps,
-						...pagination,
-						maxPages,
-						page: 1,
-					});
-				}
-			}
-		}
-		setLoading(false);
-	};
-	const paginationHandler = (value: Record<string, number>) => {
-		setPaginationProps({ ...paginationProps, ...value });
-	};
-	useEffect(() => {
-		fetchWebookData();
-	}, [paginationProps.page, paginationProps.limit]);
-	return (
-		<Box m="5" py="5" px="10" bg="white" rounded="md">
-			<Flex margin="2% 0" justifyContent="space-between" alignItems="center">
-				<Text fontSize="md" fontWeight="bold">
-					Webhooks
-				</Text>
-				<UpdateWebhookModal
-					view={UpdateModalViews.ADD}
-					fetchWebookData={fetchWebookData}
-				/>
-			</Flex>
-			{!loading ? (
-				webhookData.length ? (
-					<Table variant="simple">
-						<Thead>
-							<Tr>
-								<Th>Event Name</Th>
-								<Th>Event Description</Th>
-								<Th>Endpoint</Th>
-								<Th>Enabled</Th>
-								<Th>Headers</Th>
-								<Th>Actions</Th>
-							</Tr>
-						</Thead>
-						<Tbody>
-							{webhookData.map((webhook: webhookDataTypes) => (
-								<Tr
-									key={webhook[WebhookInputDataFields.ID]}
-									style={{ fontSize: 14 }}
-								>
-									<Td maxW="300">
-										{webhook[WebhookInputDataFields.EVENT_NAME].split('-')[0]}
-									</Td>
-									<Td maxW="300">
-										{webhook[WebhookInputDataFields.EVENT_DESCRIPTION]}
-									</Td>
-									<Td>{webhook[WebhookInputDataFields.ENDPOINT]}</Td>
-									<Td>
-										<Tag
-											size="sm"
-											variant="outline"
-											colorScheme={
-												webhook[WebhookInputDataFields.ENABLED]
-													? 'green'
-													: 'yellow'
-											}
-										>
-											{webhook[WebhookInputDataFields.ENABLED].toString()}
-										</Tag>
-									</Td>
-									<Td>
-										<Tooltip
-											bg="gray.300"
-											color="black"
-											label={JSON.stringify(
-												webhook[WebhookInputDataFields.HEADERS],
-												null,
-												' ',
-											)}
-										>
-											<Tag size="sm" variant="outline" colorScheme="gray">
-												{Object.keys(
-													webhook[WebhookInputDataFields.HEADERS] || {},
-												)?.length.toString()}
-											</Tag>
-										</Tooltip>
-									</Td>
-									<Td>
-										<Menu>
-											<MenuButton as={Button} variant="unstyled" size="sm">
-												<Flex
-													justifyContent="space-between"
-													alignItems="center"
-												>
-													<Text fontSize="sm" fontWeight="light">
-														Menu
-													</Text>
-													<FaAngleDown style={{ marginLeft: 10 }} />
-												</Flex>
-											</MenuButton>
-											<MenuList>
-												<UpdateWebhookModal
-													view={UpdateModalViews.Edit}
-													selectedWebhook={webhook}
-													fetchWebookData={fetchWebookData}
-												/>
-												<DeleteWebhookModal
-													webhookId={webhook[WebhookInputDataFields.ID]}
-													eventName={webhook[WebhookInputDataFields.EVENT_NAME]}
-													fetchWebookData={fetchWebookData}
-												/>
-												<ViewWebhookLogsModal
-													webhookId={webhook[WebhookInputDataFields.ID]}
-													eventName={webhook[WebhookInputDataFields.EVENT_NAME]}
-												/>
-											</MenuList>
-										</Menu>
-									</Td>
-								</Tr>
-							))}
-						</Tbody>
-						{(paginationProps.maxPages > 1 || paginationProps.total >= 5) && (
-							<TableCaption>
-								<Flex
-									justifyContent="space-between"
-									alignItems="center"
-									m="2% 0"
-								>
-									<Flex flex="1">
-										<Tooltip label="First Page">
-											<IconButton
-												aria-label="icon button"
-												onClick={() =>
-													paginationHandler({
-														page: 1,
-													})
-												}
-												isDisabled={paginationProps.page <= 1}
-												mr={4}
-												icon={<FaAngleDoubleLeft />}
-											/>
-										</Tooltip>
-										<Tooltip label="Previous Page">
-											<IconButton
-												aria-label="icon button"
-												onClick={() =>
-													paginationHandler({
-														page: paginationProps.page - 1,
-													})
-												}
-												isDisabled={paginationProps.page <= 1}
-												icon={<FaAngleLeft />}
-											/>
-										</Tooltip>
-									</Flex>
-									<Flex
-										flex="8"
-										justifyContent="space-evenly"
-										alignItems="center"
-									>
-										<Text mr={8}>
-											Page{' '}
-											<Text fontWeight="bold" as="span">
-												{paginationProps.page}
-											</Text>{' '}
-											of{' '}
-											<Text fontWeight="bold" as="span">
-												{paginationProps.maxPages}
-											</Text>
-										</Text>
-										<Flex alignItems="center">
-											<Text>Go to page:</Text>{' '}
-											<NumberInput
-												ml={2}
-												mr={8}
-												w={28}
-												min={1}
-												max={paginationProps.maxPages}
-												onChange={(value) =>
-													paginationHandler({
-														page: parseInt(value),
-													})
-												}
-												value={paginationProps.page}
-											>
-												<NumberInputField />
-												<NumberInputStepper>
-													<NumberIncrementStepper />
-													<NumberDecrementStepper />
-												</NumberInputStepper>
-											</NumberInput>
-										</Flex>
-										<Select
-											w={32}
-											value={paginationProps.limit}
-											onChange={(e) =>
-												paginationHandler({
-													page: 1,
-													limit: parseInt(e.target.value),
-												})
-											}
-										>
-											{pageLimits.map((pageSize) => (
-												<option key={pageSize} value={pageSize}>
-													Show {pageSize}
-												</option>
-											))}
-										</Select>
-									</Flex>
-									<Flex flex="1">
-										<Tooltip label="Next Page">
-											<IconButton
-												aria-label="icon button"
-												onClick={() =>
-													paginationHandler({
-														page: paginationProps.page + 1,
-													})
-												}
-												isDisabled={
-													paginationProps.page >= paginationProps.maxPages
-												}
-												icon={<FaAngleRight />}
-											/>
-										</Tooltip>
-										<Tooltip label="Last Page">
-											<IconButton
-												aria-label="icon button"
-												onClick={() =>
-													paginationHandler({
-														page: paginationProps.maxPages,
-													})
-												}
-												isDisabled={
-													paginationProps.page >= paginationProps.maxPages
-												}
-												ml={4}
-												icon={<FaAngleDoubleRight />}
-											/>
-										</Tooltip>
-									</Flex>
-								</Flex>
-							</TableCaption>
-						)}
-					</Table>
-				) : (
-					<Flex
-						flexDirection="column"
-						minH="25vh"
-						justifyContent="center"
-						alignItems="center"
-					>
-						<Center w="50px" marginRight="1.5%">
-							<FaExclamationCircle style={{ color: '#f0f0f0', fontSize: 70 }} />
-						</Center>
-						<Text
-							fontSize="2xl"
-							paddingRight="1%"
-							fontWeight="bold"
-							color="#d9d9d9"
-						>
-							No Data
-						</Text>
-					</Flex>
-				)
-			) : (
-				<Center minH="25vh">
-					<Spinner />
-				</Center>
-			)}
-		</Box>
-	);
-};
-
-export default Webhooks;
--- a/dashboard/src/routes/index.tsx
+++ b/dashboard/src/routes/index.tsx
@ -3,20 +3,17 @@ import { Outlet, Route, Routes } from 'react-router-dom';

 import { useAuthContext } from '../contexts/AuthContext';
 import { DashboardLayout } from '../layouts/DashboardLayout';
-import EmailTemplates from '../pages/EmailTemplates';

 const Auth = lazy(() => import('../pages/Auth'));
 const Environment = lazy(() => import('../pages/Environment'));
 const Home = lazy(() => import('../pages/Home'));
 const Users = lazy(() => import('../pages/Users'));
-const Webhooks = lazy(() => import('../pages/Webhooks'));

 export const AppRoutes = () => {
 	const { isLoggedIn } = useAuthContext();

 	if (isLoggedIn) {
 		return (
-			<div>
 			<Suspense fallback={<></>}>
 				<Routes>
 					<Route
@ -26,25 +23,18 @@ export const AppRoutes = () => {
 							</DashboardLayout>
 						}
 					>
-							<Route path="/" element={<Outlet />}>
-								<Route index element={<Environment />} />
-								<Route path="/:sec" element={<Environment />} />
-							</Route>
+						<Route path="/" element={<Home />} />
 						<Route path="users" element={<Users />} />
-							<Route path="webhooks" element={<Webhooks />} />
-							<Route path="email-templates" element={<EmailTemplates />} />
-							<Route path="*" element={<Home />} />
+						<Route path="environment" element={<Environment />} />
 					</Route>
 				</Routes>
 			</Suspense>
-			</div>
 		);
 	}
 	return (
 		<Suspense fallback={<></>}>
 			<Routes>
 				<Route path="/" element={<Auth />} />
-				<Route path="*" element={<Auth />} />
 			</Routes>
 		</Suspense>
 	);
--- a/dashboard/src/utils/index.ts
+++ b/dashboard/src/utils/index.ts
@ -1,85 +1,6 @@
-import _ from 'lodash';
-
 export const hasAdminSecret = () => {
 	return (<any>window)['__authorizer__'].isOnboardingCompleted === true;
 };

 export const capitalizeFirstLetter = (data: string): string =>
 	data.charAt(0).toUpperCase() + data.slice(1);
-
-const fallbackCopyTextToClipboard = (text: string) => {
-	const textArea = document.createElement('textarea');
-
-	textArea.value = text;
-	textArea.style.top = '0';
-	textArea.style.left = '0';
-	textArea.style.position = 'fixed';
-
-	document.body.appendChild(textArea);
-	textArea.focus();
-	textArea.select();
-
-	try {
-		const successful = document.execCommand('copy');
-		const msg = successful ? 'successful' : 'unsuccessful';
-		console.log('Fallback: Copying text command was ' + msg);
-	} catch (err) {
-		console.error('Fallback: Oops, unable to copy', err);
-	}
-	document.body.removeChild(textArea);
-};
-
-export const copyTextToClipboard = async (text: string) => {
-	if (!navigator.clipboard) {
-		fallbackCopyTextToClipboard(text);
-		return;
-	}
-	try {
-		navigator.clipboard.writeText(text);
-	} catch (err) {
-		throw err;
-	}
-};
-
-export const getObjectDiff = (obj1: any, obj2: any) => {
-	const diff = Object.keys(obj1).reduce((result, key) => {
-		if (!obj2.hasOwnProperty(key)) {
-			result.push(key);
-		} else if (
-			_.isEqual(obj1[key], obj2[key]) ||
-			(obj1[key] === null && obj2[key] === '') ||
-			(obj1[key] &&
-				Array.isArray(obj1[key]) &&
-				obj1[key].length === 0 &&
-				obj2[key] === null)
-		) {
-			const resultKeyIndex = result.indexOf(key);
-			result.splice(resultKeyIndex, 1);
-		}
-		return result;
-	}, Object.keys(obj2));
-
-	return diff;
-};
-
-export const validateEmail = (email: string) => {
-	if (!email || email === '') return true;
-	return email
-		.toLowerCase()
-		.match(
-			/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-		)
-		? true
-		: false;
-};
-
-export const validateURI = (uri: string) => {
-	if (!uri || uri === '') return true;
-	return uri
-		.toLowerCase()
-		.match(
-			/(?:^|\s)((https?:\/\/)?(?:localhost|[\w-]+(?:\.[\w-]+)+)(:\d+)?(\/\S*)?)/,
-		)
-		? true
-		: false;
-};
--- a/dashboard/src/utils/parseCSV.ts
+++ b/dashboard/src/utils/parseCSV.ts
@ -1,39 +0,0 @@
-import _flatten from 'lodash/flatten';
-import { validateEmail } from '.';
-
-interface dataTypes {
-	value: string;
-	isInvalid: boolean;
-}
-
-const parseCSV = (file: File, delimiter: string): Promise<dataTypes[]> => {
-	return new Promise((resolve) => {
-		const reader = new FileReader();
-
-		// When the FileReader has loaded the file...
-		reader.onload = (e: any) => {
-			// Split the result to an array of lines
-			const lines = e.target.result.split('\n');
-			// Split the lines themselves by the specified
-			// delimiter, such as a comma
-			let result = lines.map((line: string) => line.split(delimiter));
-			// As the FileReader reads asynchronously,
-			// we can't just return the result; instead,
-			// we're passing it to a callback function
-			result = _flatten(result);
-			resolve(
-				result.map((email: string) => {
-					return {
-						value: email.trim(),
-						isInvalid: !validateEmail(email.trim()),
-					};
-				}),
-			);
-		};
-
-		// Read the file content as a single string
-		reader.readAsText(file);
-	});
-};
-
-export default parseCSV;
--- a/dashboard/tsconfig.json
+++ b/dashboard/tsconfig.json
@ -67,7 +67,6 @@

 		/* Advanced Options */
 		"skipLibCheck": true /* Skip type checking of declaration files. */,
-		"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
-		"lib": ["esnext", "dom"]
+		"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
 	}
 }
--- a/dashboard/yarn.lock
+++ b/dashboard/yarn.lock
--- a/go.mod
+++ b/go.mod
@ -1,20 +0,0 @@
-module server
-
-go 1.21.5
-
-require (
-	github.com/99designs/gqlgen v0.17.43 // indirect
-	github.com/agnivade/levenshtein v1.1.1 // indirect
-	github.com/cpuguy83/go-md2man/v2 v2.0.2 // indirect
-	github.com/google/uuid v1.3.0 // indirect
-	github.com/russross/blackfriday/v2 v2.1.0 // indirect
-	github.com/sosodev/duration v1.1.0 // indirect
-	github.com/urfave/cli/v2 v2.25.5 // indirect
-	github.com/vektah/gqlparser/v2 v2.5.11 // indirect
-	github.com/xrash/smetrics v0.0.0-20201216005158-039620a65673 // indirect
-	golang.org/x/mod v0.10.0 // indirect
-	golang.org/x/sys v0.13.0 // indirect
-	golang.org/x/text v0.13.0 // indirect
-	golang.org/x/tools v0.9.3 // indirect
-	gopkg.in/yaml.v3 v3.0.1 // indirect
-)
--- a/go.sum
+++ b/go.sum
@ -1,31 +0,0 @@
-github.com/99designs/gqlgen v0.17.43 h1:I4SYg6ahjowErAQcHFVKy5EcWuwJ3+Xw9z2fLpuFCPo=
-github.com/99designs/gqlgen v0.17.43/go.mod h1:lO0Zjy8MkZgBdv4T1U91x09r0e0WFOdhVUutlQs1Rsc=
-github.com/agnivade/levenshtein v1.1.1 h1:QY8M92nrzkmr798gCo3kmMyqXFzdQVpxLlGPRBij0P8=
-github.com/agnivade/levenshtein v1.1.1/go.mod h1:veldBMzWxcCG2ZvUTKD2kJNRdCk5hVbJomOvKkmgYbo=
-github.com/arbovm/levenshtein v0.0.0-20160628152529-48b4e1c0c4d0/go.mod h1:t2tdKJDJF9BV14lnkjHmOQgcvEKgtqs5a1N3LNdJhGE=
-github.com/cpuguy83/go-md2man/v2 v2.0.2 h1:p1EgwI/C7NhT0JmVkwCD2ZBK8j4aeHQX2pMHHBfMQ6w=
-github.com/cpuguy83/go-md2man/v2 v2.0.2/go.mod h1:tgQtvFlXSQOSOSIRvRPT7W67SCa46tRHOmNcaadrF8o=
-github.com/dgryski/trifles v0.0.0-20200323201526-dd97f9abfb48/go.mod h1:if7Fbed8SFyPtHLHbg49SI7NAdJiC5WIA09pe59rfAA=
-github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
-github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
-github.com/russross/blackfriday/v2 v2.1.0 h1:JIOH55/0cWyOuilr9/qlrm0BSXldqnqwMsf35Ld67mk=
-github.com/russross/blackfriday/v2 v2.1.0/go.mod h1:+Rmxgy9KzJVeS9/2gXHxylqXiyQDYRxCVz55jmeOWTM=
-github.com/sosodev/duration v1.1.0 h1:kQcaiGbJaIsRqgQy7VGlZrVw1giWO+lDoX3MCPnpVO4=
-github.com/sosodev/duration v1.1.0/go.mod h1:RQIBBX0+fMLc/D9+Jb/fwvVmo0eZvDDEERAikUR6SDg=
-github.com/urfave/cli/v2 v2.25.5 h1:d0NIAyhh5shGscroL7ek/Ya9QYQE0KNabJgiUinIQkc=
-github.com/urfave/cli/v2 v2.25.5/go.mod h1:GHupkWPMM0M/sj1a2b4wUrWBPzazNrIjouW6fmdJLxc=
-github.com/vektah/gqlparser/v2 v2.5.11 h1:JJxLtXIoN7+3x6MBdtIP59TP1RANnY7pXOaDnADQSf8=
-github.com/vektah/gqlparser/v2 v2.5.11/go.mod h1:1rCcfwB2ekJofmluGWXMSEnPMZgbxzwj6FaZ/4OT8Cc=
-github.com/xrash/smetrics v0.0.0-20201216005158-039620a65673 h1:bAn7/zixMGCfxrRTfdpNzjtPYqr8smhKouy9mxVdGPU=
-github.com/xrash/smetrics v0.0.0-20201216005158-039620a65673/go.mod h1:N3UwUGtsrSj3ccvlPHLoLsHnpR27oXr4ZE984MbSER8=
-golang.org/x/mod v0.10.0 h1:lFO9qtOdlre5W1jxS3r/4szv2/6iXxScdzjoBMXNhYk=
-golang.org/x/mod v0.10.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
-golang.org/x/sys v0.13.0 h1:Af8nKPmuFypiUBjVoU9V20FiaFXOcuZI21p0ycVYYGE=
-golang.org/x/sys v0.13.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/text v0.13.0 h1:ablQoSUd0tRdKxZewP80B+BaqeKJuVhuRxj/dkrun3k=
-golang.org/x/text v0.13.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
-golang.org/x/tools v0.9.3 h1:Gn1I8+64MsuTb/HpH+LmQtNas23LhUVr3rYZ0eKuaMM=
-golang.org/x/tools v0.9.3/go.mod h1:owI94Op576fPu3cIGQeHs3joujW/2Oc6MtlxbF5dfNc=
-gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
-gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
-gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +0,0 @@
-{
-  "name": "authorizer",
-  "lockfileVersion": 2,
-  "requires": true,
-  "packages": {}
-}
--- a/scripts/couchbase-test.sh
+++ b/scripts/couchbase-test.sh
@ -1,39 +0,0 @@
-#!/bin/sh
-
-set -x
-set -m
-
-sleep 15
-
-# Setup index and memory quota
-# curl -v -X POST http://127.0.0.1:8091/pools/default -d memoryQuota=300 -d indexMemoryQuota=300
-
-# Setup services
-curl -v http://127.0.0.1:8091/node/controller/setupServices -d services=kv%2Cn1ql%2Cindex
-
-# Setup credentials
-curl -v http://127.0.0.1:8091/settings/web -d port=8091 -d username=Administrator -d password=password
-
-# Setup Memory Optimized Indexes
-curl -i -u Administrator:password -X POST http://127.0.0.1:8091/settings/indexes -d 'storageMode=memory_optimized'
-
-# Load travel-sample bucket
-#curl -v -u Administrator:password -X POST http://127.0.0.1:8091/sampleBuckets/install -d '["travel-sample"]'
-
-echo "Type: $TYPE"
-
-if [ "$TYPE" = "WORKER" ]; then
-  echo "Sleeping ..."
-  sleep 15
-
-  #IP=`hostname -s`
-  IP=`hostname -I | cut -d ' ' -f1`
-  echo "IP: " $IP
-
-  echo "Auto Rebalance: $AUTO_REBALANCE"
-  if [ "$AUTO_REBALANCE" = "true" ]; then
-    couchbase-cli rebalance --cluster=$COUCHBASE_MASTER:8091 --user=Administrator --password=password --server-add=$IP --server-add-username=Administrator --server-add-password=password
-  else
-    couchbase-cli server-add --cluster=$COUCHBASE_MASTER:8091 --user=Administrator --password=password --server-add=$IP --server-add-username=Administrator --server-add-password=password
-  fi;
-fi;
--- a/server/authenticators/providers/providers.go
+++ b/server/authenticators/providers/providers.go
@ -1,25 +0,0 @@
-package providers
-
-import "context"
-
-// AuthenticatorConfig defines authenticator config
-type AuthenticatorConfig struct {
-	// ScannerImage is the base64 of QR code image
-	ScannerImage string
-	// Secrets is the secret key
-	Secret string
-	// RecoveryCode is the list of recovery codes
-	RecoveryCodes []string
-	// RecoveryCodeMap is the map of recovery codes
-	RecoveryCodeMap map[string]bool
-}
-
-// Provider defines authenticators provider
-type Provider interface {
-	// Generate totp: to generate totp, store secret into db and returns base64 of QR code image
-	Generate(ctx context.Context, id string) (*AuthenticatorConfig, error)
-	// Validate totp: user passcode with secret stored in our db
-	Validate(ctx context.Context, passcode string, userID string) (bool, error)
-	// ValidateRecoveryCode totp: allows user to validate using recovery code incase if they lost their device
-	ValidateRecoveryCode(ctx context.Context, recoveryCode, userID string) (bool, error)
-}
--- a/server/authenticators/providers/totp/provider.go
+++ b/server/authenticators/providers/totp/provider.go
@ -1,23 +0,0 @@
-package totp
-
-import (
-	"context"
-)
-
-type provider struct {
-	ctx context.Context
-}
-
-// TOTPConfig defines totp config
-type TOTPConfig struct {
-	ScannerImage string
-	Secret       string
-}
-
-// NewProvider returns a new totp provider
-func NewProvider() (*provider, error) {
-	ctx := context.Background()
-	return &provider{
-		ctx: ctx,
-	}, nil
-}
--- a/server/authenticators/providers/totp/totp.go
+++ b/server/authenticators/providers/totp/totp.go
@ -1,151 +0,0 @@
-package totp
-
-import (
-	"bytes"
-	"context"
-	"encoding/json"
-	"fmt"
-	"image/png"
-	"time"
-
-	"github.com/google/uuid"
-	"github.com/pquerna/otp/totp"
-	log "github.com/sirupsen/logrus"
-
-	"github.com/authorizerdev/authorizer/server/authenticators/providers"
-	"github.com/authorizerdev/authorizer/server/constants"
-	"github.com/authorizerdev/authorizer/server/crypto"
-	"github.com/authorizerdev/authorizer/server/db"
-	"github.com/authorizerdev/authorizer/server/db/models"
-	"github.com/authorizerdev/authorizer/server/refs"
-)
-
-// Generate generates a Time-Based One-Time Password (TOTP) for a user and returns the base64-encoded QR code for frontend display.
-func (p *provider) Generate(ctx context.Context, id string) (*providers.AuthenticatorConfig, error) {
-	var buf bytes.Buffer
-	//get user details
-	user, err := db.Provider.GetUserByID(ctx, id)
-	if err != nil {
-		return nil, err
-	}
-	// generate totp, Authenticators hash is valid for 30 seconds
-	key, err := totp.Generate(totp.GenerateOpts{
-		Issuer:      "authorizer",
-		AccountName: refs.StringValue(user.Email),
-	})
-	if err != nil {
-		return nil, err
-	}
-	//generating image for key and encoding to base64 for displaying in frontend
-	img, err := key.Image(200, 200)
-	if err != nil {
-		return nil, err
-	}
-	png.Encode(&buf, img)
-	encodedText := crypto.EncryptB64(buf.String())
-	secret := key.Secret()
-	recoveryCodes := []string{}
-	for i := 0; i < 10; i++ {
-		recoveryCodes = append(recoveryCodes, uuid.NewString())
-	}
-	// Converting recoveryCodes to string
-	recoverCodesMap := map[string]bool{}
-	for i := 0; i < len(recoveryCodes); i++ {
-		recoverCodesMap[recoveryCodes[i]] = false
-	}
-	// Converting recoveryCodesMap to string
-	jsonData, err := json.Marshal(recoverCodesMap)
-	if err != nil {
-		return nil, err
-	}
-	recoveryCodesString := string(jsonData)
-	totpModel := &models.Authenticator{
-		Secret:        secret,
-		RecoveryCodes: refs.NewStringRef(recoveryCodesString),
-		UserID:        user.ID,
-		Method:        constants.EnvKeyTOTPAuthenticator,
-	}
-	authenticator, err := db.Provider.GetAuthenticatorDetailsByUserId(ctx, user.ID, constants.EnvKeyTOTPAuthenticator)
-	if err != nil {
-		log.Debug("Failed to get authenticator details by user id, creating new record: ", err)
-		// continue
-	}
-	if authenticator == nil {
-		// if authenticator is nil then create new authenticator
-		_, err = db.Provider.AddAuthenticator(ctx, totpModel)
-		if err != nil {
-			return nil, err
-		}
-	} else {
-		authenticator.Secret = secret
-		authenticator.RecoveryCodes = refs.NewStringRef(recoveryCodesString)
-		// if authenticator is not nil then update authenticator
-		_, err = db.Provider.UpdateAuthenticator(ctx, authenticator)
-		if err != nil {
-			return nil, err
-		}
-	}
-	return &providers.AuthenticatorConfig{
-		ScannerImage:    encodedText,
-		Secret:          secret,
-		RecoveryCodes:   recoveryCodes,
-		RecoveryCodeMap: recoverCodesMap,
-	}, nil
-}
-
-// Validate validates a Time-Based One-Time Password (TOTP) against the stored TOTP secret for a user.
-func (p *provider) Validate(ctx context.Context, passcode string, userID string) (bool, error) {
-	// get totp details
-	totpModel, err := db.Provider.GetAuthenticatorDetailsByUserId(ctx, userID, constants.EnvKeyTOTPAuthenticator)
-	if err != nil {
-		return false, err
-	}
-	// validate totp
-	status := totp.Validate(passcode, totpModel.Secret)
-	// checks if user not signed in for totp and totp code is correct then VerifiedAt will be stored in db
-	if totpModel.VerifiedAt == nil && status {
-		timeNow := time.Now().Unix()
-		totpModel.VerifiedAt = &timeNow
-		_, err = db.Provider.UpdateAuthenticator(ctx, totpModel)
-		if err != nil {
-			return false, err
-		}
-	}
-	return status, nil
-}
-
-// ValidateRecoveryCode validates a Time-Based One-Time Password (TOTP) recovery code against the stored TOTP recovery code for a user.
-func (p *provider) ValidateRecoveryCode(ctx context.Context, recoveryCode, userID string) (bool, error) {
-	// get totp details
-	totpModel, err := db.Provider.GetAuthenticatorDetailsByUserId(ctx, userID, constants.EnvKeyTOTPAuthenticator)
-	if err != nil {
-		return false, err
-	}
-	// convert recoveryCodes to map
-	recoveryCodesMap := map[string]bool{}
-	err = json.Unmarshal([]byte(refs.StringValue(totpModel.RecoveryCodes)), &recoveryCodesMap)
-	if err != nil {
-		return false, err
-	}
-	// check if recovery code is valid
-	if val, ok := recoveryCodesMap[recoveryCode]; !ok {
-		return false, fmt.Errorf("invalid recovery code")
-	} else if val {
-		return false, fmt.Errorf("recovery code already used")
-	}
-	// update recovery code map
-	recoveryCodesMap[recoveryCode] = true
-	// convert recoveryCodesMap to string
-	jsonData, err := json.Marshal(recoveryCodesMap)
-	if err != nil {
-		return false, err
-	}
-	recoveryCodesString := string(jsonData)
-	totpModel.RecoveryCodes = refs.NewStringRef(recoveryCodesString)
-	// update recovery code map in db
-	_, err = db.Provider.UpdateAuthenticator(ctx, totpModel)
-	if err != nil {
-		return false, err
-	}
-	return true, nil
-}
--- a/server/authenticators/totp_store.go
+++ b/server/authenticators/totp_store.go
@ -1,26 +0,0 @@
-package authenticators
-
-import (
-	"github.com/authorizerdev/authorizer/server/authenticators/providers"
-	"github.com/authorizerdev/authorizer/server/authenticators/providers/totp"
-	"github.com/authorizerdev/authorizer/server/constants"
-	"github.com/authorizerdev/authorizer/server/memorystore"
-)
-
-// Provider is the global authenticators provider.
-var Provider providers.Provider
-
-// InitTOTPStore initializes the TOTP authenticator store if it's not disabled in the environment variables.
-// It sets the global Provider variable to a new TOTP provider.
-func InitTOTPStore() error {
-	var err error
-	isTOTPEnvServiceDisabled, _ := memorystore.Provider.GetBoolStoreEnvVariable(constants.EnvKeyDisableTOTPLogin)
-
-	if !isTOTPEnvServiceDisabled {
-		Provider, err = totp.NewProvider()
-		if err != nil {
-			return err
-		}
-	}
-	return nil
-}
--- a/server/cli/cli.go
+++ b/server/cli/cli.go
@ -1,14 +0,0 @@
-package cli
-
-var (
-	// ARG_DB_URL is the cli arg variable for the database url
-	ARG_DB_URL *string
-	// ARG_DB_TYPE is the cli arg variable for the database type
-	ARG_DB_TYPE *string
-	// ARG_ENV_FILE is the cli arg variable for the env file
-	ARG_ENV_FILE *string
-	// ARG_LOG_LEVEL is the cli arg variable for the log level
-	ARG_LOG_LEVEL *string
-	// ARG_REDIS_URL is the cli arg variable for the redis url
-	ARG_REDIS_URL *string
-)
--- a/server/constants/auth_methods.go
+++ b/server/constants/auth_methods.go
@ -1,32 +0,0 @@
-package constants
-
-const (
-	// AuthRecipeMethodBasicAuth is the basic_auth auth method
-	AuthRecipeMethodBasicAuth = "basic_auth"
-	// AuthRecipeMethodMobileBasicAuth is the mobile basic_auth method, where user can signup using mobile number and password
-	AuthRecipeMethodMobileBasicAuth = "mobile_basic_auth"
-	// AuthRecipeMethodMagicLinkLogin is the magic_link_login auth method
-	AuthRecipeMethodMagicLinkLogin = "magic_link_login"
-	// AuthRecipeMethodMobileOTP is the mobile_otp auth method
-	AuthRecipeMethodMobileOTP = "mobile_otp"
-	// AuthRecipeMethodGoogle is the google auth method
-	AuthRecipeMethodGoogle = "google"
-	// AuthRecipeMethodGithub is the github auth method
-	AuthRecipeMethodGithub = "github"
-	// AuthRecipeMethodFacebook is the facebook auth method
-	AuthRecipeMethodFacebook = "facebook"
-	// AuthRecipeMethodLinkedin is the linkedin auth method
-	AuthRecipeMethodLinkedIn = "linkedin"
-	// AuthRecipeMethodApple is the apple auth method
-	AuthRecipeMethodApple = "apple"
-	// AuthRecipeMethodDiscord is the discord auth method
-	AuthRecipeMethodDiscord = "discord"
-	// AuthRecipeMethodTwitter is the twitter auth method
-	AuthRecipeMethodTwitter = "twitter"
-	// AuthRecipeMethodMicrosoft is the microsoft auth method
-	AuthRecipeMethodMicrosoft = "microsoft"
-	// AuthRecipeMethodTwitch is the twitch auth method
-	AuthRecipeMethodTwitch = "twitch"
-	// AuthRecipeMethodRoblox is the roblox auth method
-	AuthRecipeMethodRoblox = "roblox"
-)
--- a/server/constants/authenticator_method.go
+++ b/server/constants/authenticator_method.go
@ -1,7 +0,0 @@
-package constants
-
-// Authenticators Methods
-const (
-	// EnvKeyTOTPAuthenticator key for env variable TOTP
-	EnvKeyTOTPAuthenticator = "totp"
-)
--- a/server/constants/cookie.go
+++ b/server/constants/cookie.go
@ -1,10 +0,0 @@
-package constants
-
-const (
-	// AppCookieName is the name of the cookie that is used to store the application token
-	AppCookieName = "cookie"
-	// AdminCookieName is the name of the cookie that is used to store the admin token
-	AdminCookieName = "authorizer-admin"
-	// MfaCookieName is the name of the cookie that is used to store the mfa session
-	MfaCookieName = "mfa"
-)
--- a/server/constants/db_types.go
+++ b/server/constants/db_types.go
@ -5,8 +5,6 @@ const (
 	DbTypePostgres = "postgres"
 	// DbTypeSqlite is the sqlite database type
 	DbTypeSqlite = "sqlite"
-	// DbTypeLibSQL is the libsql / Turso database type
-	DbTypeLibSQL = "libsql"
 	// DbTypeMysql is the mysql database type
 	DbTypeMysql = "mysql"
 	// DbTypeSqlserver is the sqlserver database type
@ -15,20 +13,4 @@ const (
 	DbTypeArangodb = "arangodb"
 	// DbTypeMongodb is the mongodb database type
 	DbTypeMongodb = "mongodb"
-	// DbTypeYugabyte is the yugabyte database type
-	DbTypeYugabyte = "yugabyte"
-	// DbTypeMariaDB is the mariadb database type
-	DbTypeMariaDB = "mariadb"
-	// DbTypeCassandra is the cassandra database type
-	DbTypeCassandraDB = "cassandradb"
-	// DbTypeScyllaDB is the scylla database type
-	DbTypeScyllaDB = "scylladb"
-	// DbTypeCockroachDB is the cockroach database type
-	DbTypeCockroachDB = "cockroachdb"
-	// DbTypePlanetScaleDB is the planetscale database type
-	DbTypePlanetScaleDB = "planetscale"
-	// DbTypeDynamoDB is the Dynamo database type
-	DbTypeDynamoDB = "dynamodb"
-	// DbTypeCouchbaseDB is the Couchbase database type
-	DbTypeCouchbaseDB = "couchbase"
 )
--- a/server/constants/env.go
+++ b/server/constants/env.go
@ -1,55 +1,33 @@
 package constants

-var VERSION = "0.0.1"
-
 const (
-	// TestEnv is used for testing
-	TestEnv = "test"
+	// Envstore identifier
+	// StringStore string store identifier
+	StringStoreIdentifier = "stringStore"
+	// BoolStore bool store identifier
+	BoolStoreIdentifier = "boolStore"
+	// SliceStore slice store identifier
+	SliceStoreIdentifier = "sliceStore"
+
 	// EnvKeyEnv key for env variable ENV
 	EnvKeyEnv = "ENV"
 	// EnvKeyEnvPath key for cli arg variable ENV_PATH
 	EnvKeyEnvPath = "ENV_PATH"
+	// EnvKeyVersion key for build arg version
+	EnvKeyVersion = "VERSION"
 	// EnvKeyAuthorizerURL key for env variable AUTHORIZER_URL
 	EnvKeyAuthorizerURL = "AUTHORIZER_URL"
 	// EnvKeyPort key for env variable PORT
 	EnvKeyPort = "PORT"
-	// EnvKeyAccessTokenExpiryTime key for env variable ACCESS_TOKEN_EXPIRY_TIME
-	EnvKeyAccessTokenExpiryTime = "ACCESS_TOKEN_EXPIRY_TIME"
+
 	// EnvKeyAdminSecret key for env variable ADMIN_SECRET
 	EnvKeyAdminSecret = "ADMIN_SECRET"
 	// EnvKeyDatabaseType key for env variable DATABASE_TYPE
 	EnvKeyDatabaseType = "DATABASE_TYPE"
 	// EnvKeyDatabaseURL key for env variable DATABASE_URL
 	EnvKeyDatabaseURL = "DATABASE_URL"
-	// EnvAwsRegion key for env variable AWS REGION
-	EnvAwsRegion = "AWS_REGION"
-	// EnvAwsAccessKeyID key for env variable AWS_ACCESS_KEY_ID
-	EnvAwsAccessKeyID = "AWS_ACCESS_KEY_ID"
-	// EnvAwsAccessKey key for env variable AWS_SECRET_ACCESS_KEY
-	EnvAwsSecretAccessKey = "AWS_SECRET_ACCESS_KEY"
 	// EnvKeyDatabaseName key for env variable DATABASE_NAME
 	EnvKeyDatabaseName = "DATABASE_NAME"
-	// EnvKeyDatabaseUsername key for env variable DATABASE_USERNAME
-	EnvKeyDatabaseUsername = "DATABASE_USERNAME"
-	// EnvKeyDatabasePassword key for env variable DATABASE_PASSWORD
-	EnvKeyDatabasePassword = "DATABASE_PASSWORD"
-	// EnvKeyDatabasePort key for env variable DATABASE_PORT
-	EnvKeyDatabasePort = "DATABASE_PORT"
-	// EnvKeyDatabaseHost key for env variable DATABASE_HOST
-	EnvKeyDatabaseHost = "DATABASE_HOST"
-	// EnvKeyDatabaseCert key for env variable DATABASE_CERT
-	EnvKeyDatabaseCert = "DATABASE_CERT"
-	// EnvKeyDatabaseCertKey key for env variable DATABASE_KEY
-	EnvKeyDatabaseCertKey = "DATABASE_CERT_KEY"
-	// EnvKeyDatabaseCACert key for env variable DATABASE_CA_CERT
-	EnvKeyDatabaseCACert = "DATABASE_CA_CERT"
-	// EnvCouchbaseBucket key for env variable COUCHBASE_BUCKET
-	EnvCouchbaseBucket = "COUCHBASE_BUCKET"
-	// EnvCouchbaseBucketRAMQuotaMB key for env variable COUCHBASE_BUCKET_RAM_QUOTA
-	// This value should be parsed as number
-	EnvCouchbaseBucketRAMQuotaMB = "COUCHBASE_BUCKET_RAM_QUOTA"
-	// EnvCouchbaseBucket key for env variable COUCHBASE_SCOPE
-	EnvCouchbaseScope = "COUCHBASE_SCOPE"
 	// EnvKeySmtpHost key for env variable SMTP_HOST
 	EnvKeySmtpHost = "SMTP_HOST"
 	// EnvKeySmtpPort key for env variable SMTP_PORT
@ -58,34 +36,40 @@ const (
 	EnvKeySmtpUsername = "SMTP_USERNAME"
 	// EnvKeySmtpPassword key for env variable SMTP_PASSWORD
 	EnvKeySmtpPassword = "SMTP_PASSWORD"
-	// EnvKeySmtpLocalName key for env variable SMTP_LOCAL_NAME
-	EnvKeySmtpLocalName = "SMTP_LOCAL_NAME"
 	// EnvKeySenderEmail key for env variable SENDER_EMAIL
 	EnvKeySenderEmail = "SENDER_EMAIL"
-	// EnvKeySenderName key for env variable SENDER_NAME
-	EnvKeySenderName = "SENDER_NAME"
-	// EnvKeyIsEmailServiceEnabled key for env variable IS_EMAIL_SERVICE_ENABLED
-	EnvKeyIsEmailServiceEnabled = "IS_EMAIL_SERVICE_ENABLED"
-	// EnvKeyIsSMSServiceEnabled key for env variable IS_SMS_SERVICE_ENABLED
-	EnvKeyIsSMSServiceEnabled = "IS_SMS_SERVICE_ENABLED"
-	// EnvKeyAppCookieSecure key for env variable APP_COOKIE_SECURE
-	EnvKeyAppCookieSecure = "APP_COOKIE_SECURE"
-	// EnvKeyAdminCookieSecure key for env variable ADMIN_COOKIE_SECURE
-	EnvKeyAdminCookieSecure = "ADMIN_COOKIE_SECURE"
 	// EnvKeyJwtType key for env variable JWT_TYPE
 	EnvKeyJwtType = "JWT_TYPE"
 	// EnvKeyJwtSecret key for env variable JWT_SECRET
 	EnvKeyJwtSecret = "JWT_SECRET"
-	// EnvKeyJwtPrivateKey key for env variable JWT_PRIVATE_KEY
-	EnvKeyJwtPrivateKey = "JWT_PRIVATE_KEY"
-	// EnvKeyJwtPublicKey key for env variable JWT_PUBLIC_KEY
-	EnvKeyJwtPublicKey = "JWT_PUBLIC_KEY"
+	// EnvKeyAllowedOrigins key for env variable ALLOWED_ORIGINS
+	EnvKeyAllowedOrigins = "ALLOWED_ORIGINS"
 	// EnvKeyAppURL key for env variable APP_URL
 	EnvKeyAppURL = "APP_URL"
 	// EnvKeyRedisURL key for env variable REDIS_URL
 	EnvKeyRedisURL = "REDIS_URL"
+	// EnvKeyCookieName key for env variable COOKIE_NAME
+	EnvKeyCookieName = "COOKIE_NAME"
+	// EnvKeyAdminCookieName key for env variable ADMIN_COOKIE_NAME
+	EnvKeyAdminCookieName = "ADMIN_COOKIE_NAME"
 	// EnvKeyResetPasswordURL key for env variable RESET_PASSWORD_URL
 	EnvKeyResetPasswordURL = "RESET_PASSWORD_URL"
+	// EnvKeyEncryptionKey key for env variable ENCRYPTION_KEY
+	EnvKeyEncryptionKey = "ENCRYPTION_KEY"
+	// EnvKeyDisableEmailVerification key for env variable DISABLE_EMAIL_VERIFICATION
+	EnvKeyDisableEmailVerification = "DISABLE_EMAIL_VERIFICATION"
+	// EnvKeyDisableBasicAuthentication key for env variable DISABLE_BASIC_AUTH
+	EnvKeyDisableBasicAuthentication = "DISABLE_BASIC_AUTHENTICATION"
+	// EnvKeyDisableMagicLinkLogin key for env variable DISABLE_MAGIC_LINK_LOGIN
+	EnvKeyDisableMagicLinkLogin = "DISABLE_MAGIC_LINK_LOGIN"
+	// EnvKeyDisableLoginPage key for env variable DISABLE_LOGIN_PAGE
+	EnvKeyDisableLoginPage = "DISABLE_LOGIN_PAGE"
+	// EnvKeyRoles key for env variable ROLES
+	EnvKeyRoles = "ROLES"
+	// EnvKeyProtectedRoles key for env variable PROTECTED_ROLES
+	EnvKeyProtectedRoles = "PROTECTED_ROLES"
+	// EnvKeyDefaultRoles key for env variable DEFAULT_ROLES
+	EnvKeyDefaultRoles = "DEFAULT_ROLES"
 	// EnvKeyJwtRoleClaim key for env variable JWT_ROLE_CLAIM
 	EnvKeyJwtRoleClaim = "JWT_ROLE_CLAIM"
 	// EnvKeyGoogleClientID key for env variable GOOGLE_CLIENT_ID
@ -100,116 +84,12 @@ const (
 	EnvKeyFacebookClientID = "FACEBOOK_CLIENT_ID"
 	// EnvKeyFacebookClientSecret key for env variable FACEBOOK_CLIENT_SECRET
 	EnvKeyFacebookClientSecret = "FACEBOOK_CLIENT_SECRET"
-	// EnvKeyLinkedinClientID key for env variable LINKEDIN_CLIENT_ID
-	EnvKeyLinkedInClientID = "LINKEDIN_CLIENT_ID"
-	// EnvKeyLinkedinClientSecret key for env variable LINKEDIN_CLIENT_SECRET
-	EnvKeyLinkedInClientSecret = "LINKEDIN_CLIENT_SECRET"
-	// EnvKeyAppleClientID key for env variable APPLE_CLIENT_ID
-	EnvKeyAppleClientID = "APPLE_CLIENT_ID"
-	// EnvKeyAppleClientSecret key for env variable APPLE_CLIENT_SECRET
-	EnvKeyAppleClientSecret = "APPLE_CLIENT_SECRET"
-	// EnvKeyDiscordClientID key for env variable DISCORD_CLIENT_ID
-	EnvKeyDiscordClientID = "DISCORD_CLIENT_ID"
-	// EnvKeyDiscordClientSecret key for env variable DISCORD_CLIENT_SECRET
-	EnvKeyDiscordClientSecret = "DISCORD_CLIENT_SECRET"
-	// EnvKeyTwitterClientID key for env variable TWITTER_CLIENT_ID
-	EnvKeyTwitterClientID = "TWITTER_CLIENT_ID"
-	// EnvKeyTwitterClientSecret key for env variable TWITTER_CLIENT_SECRET
-	EnvKeyTwitterClientSecret = "TWITTER_CLIENT_SECRET"
-	// EnvKeyMicrosoftClientID key for env variable MICROSOFT_CLIENT_ID
-	EnvKeyMicrosoftClientID = "MICROSOFT_CLIENT_ID"
-	// EnvKeyMicrosoftActiveDirectoryTenantID key for env variable MICROSOFT_ACTIVE_DIRECTORY_TENANT_ID
-	EnvKeyMicrosoftActiveDirectoryTenantID = "MICROSOFT_ACTIVE_DIRECTORY_TENANT_ID"
-	// EnvKeyMicrosoftClientSecret key for env variable MICROSOFT_CLIENT_SECRET
-	EnvKeyMicrosoftClientSecret = "MICROSOFT_CLIENT_SECRET"
-	// EnvKeyTwitchClientID key for env variable TWITCH_CLIENT_ID
-	EnvKeyTwitchClientID = "TWITCH_CLIENT_ID"
-	// EnvKeyTwitchClientSecret key for env variable TWITCH_CLIENT_SECRET
-	EnvKeyTwitchClientSecret = "TWITCH_CLIENT_SECRET"
-	// EnvKeyRobloxClientID key for env variable ROBLOX_CLIENT_ID
-	EnvKeyRobloxClientID = "ROBLOX_CLIENT_ID"
-	// EnvKeyRobloxClientSecret key for env variable ROBLOX_CLIENT_SECRET
-	EnvKeyRobloxClientSecret = "ROBLOX_CLIENT_SECRET"
 	// EnvKeyOrganizationName key for env variable ORGANIZATION_NAME
 	EnvKeyOrganizationName = "ORGANIZATION_NAME"
 	// EnvKeyOrganizationLogo key for env variable ORGANIZATION_LOGO
 	EnvKeyOrganizationLogo = "ORGANIZATION_LOGO"
-	// EnvKeyCustomAccessTokenScript key for env variable CUSTOM_ACCESS_TOKEN_SCRIPT
-	EnvKeyCustomAccessTokenScript = "CUSTOM_ACCESS_TOKEN_SCRIPT"
-
-	// Not Exposed Keys
-	// EnvKeyClientID key for env variable CLIENT_ID
-	EnvKeyClientID = "CLIENT_ID"
-	// EnvKeyClientSecret key for env variable CLIENT_SECRET
-	EnvKeyClientSecret = "CLIENT_SECRET"
-	// EnvKeyEncryptionKey key for env variable ENCRYPTION_KEY
-	EnvKeyEncryptionKey = "ENCRYPTION_KEY"
-	// EnvKeyJWK key for env variable JWK
-	EnvKeyJWK = "JWK"
-
-	// Boolean variables
 	// EnvKeyIsProd key for env variable IS_PROD
 	EnvKeyIsProd = "IS_PROD"
-	// EnvKeyDisableEmailVerification key for env variable DISABLE_EMAIL_VERIFICATION
-	EnvKeyDisableEmailVerification = "DISABLE_EMAIL_VERIFICATION"
-	// EnvKeyDisableBasicAuthentication key for env variable DISABLE_BASIC_AUTH
-	EnvKeyDisableBasicAuthentication = "DISABLE_BASIC_AUTHENTICATION"
-	// EnvKeyDisableBasicAuthentication key for env variable DISABLE_MOBILE_BASIC_AUTH
-	EnvKeyDisableMobileBasicAuthentication = "DISABLE_MOBILE_BASIC_AUTHENTICATION"
-	// EnvKeyDisableMagicLinkLogin key for env variable DISABLE_MAGIC_LINK_LOGIN
-	EnvKeyDisableMagicLinkLogin = "DISABLE_MAGIC_LINK_LOGIN"
-	// EnvKeyDisableLoginPage key for env variable DISABLE_LOGIN_PAGE
-	EnvKeyDisableLoginPage = "DISABLE_LOGIN_PAGE"
-	// EnvKeyDisableSignUp key for env variable DISABLE_SIGN_UP
-	EnvKeyDisableSignUp = "DISABLE_SIGN_UP"
-	// EnvKeyDisableRedisForEnv key for env variable DISABLE_REDIS_FOR_ENV
-	EnvKeyDisableRedisForEnv = "DISABLE_REDIS_FOR_ENV"
-	// EnvKeyDisableStrongPassword key for env variable DISABLE_STRONG_PASSWORD
-	EnvKeyDisableStrongPassword = "DISABLE_STRONG_PASSWORD"
-	// EnvKeyEnforceMultiFactorAuthentication is key for env variable ENFORCE_MULTI_FACTOR_AUTHENTICATION
-	// If enforced and changed later on, existing user will have MFA but new user will not have MFA
-	EnvKeyEnforceMultiFactorAuthentication = "ENFORCE_MULTI_FACTOR_AUTHENTICATION"
-	// EnvKeyDisableMultiFactorAuthentication is key for env variable DISABLE_MULTI_FACTOR_AUTHENTICATION
-	// this variable is used to completely disable multi factor authentication. It will have no effect on profile preference
-	EnvKeyDisableMultiFactorAuthentication = "DISABLE_MULTI_FACTOR_AUTHENTICATION"
-	// EnvKeyDisableTOTPLogin is key for env variable DISABLE_TOTP_LOGIN
-	// this variable is used to completely disable totp verification
-	EnvKeyDisableTOTPLogin = "DISABLE_TOTP_LOGIN"
-	// EnvKeyDisableMailOTPLogin is key for env variable DISABLE_MAIL_OTP_LOGIN
-	// this variable is used to completely disable totp verification
-	EnvKeyDisableMailOTPLogin = "DISABLE_MAIL_OTP_LOGIN"
-	// EnvKeyDisablePhoneVerification is key for env variable DISABLE_PHONE_VERIFICATION
-	// this variable is used to disable phone verification
-	EnvKeyDisablePhoneVerification = "DISABLE_PHONE_VERIFICATION"
-	// EnvKeyDisablePlayGround is key for env variable DISABLE_PLAYGROUND
-	// this variable will disable or enable playground use in dashboard
-	EnvKeyDisablePlayGround = "DISABLE_PLAYGROUND"
-
-	// Slice variables
-	// EnvKeyRoles key for env variable ROLES
-	EnvKeyRoles = "ROLES"
-	// EnvKeyProtectedRoles key for env variable PROTECTED_ROLES
-	EnvKeyProtectedRoles = "PROTECTED_ROLES"
-	// EnvKeyDefaultRoles key for env variable DEFAULT_ROLES
-	EnvKeyDefaultRoles = "DEFAULT_ROLES"
-	// EnvKeyAllowedOrigins key for env variable ALLOWED_ORIGINS
-	EnvKeyAllowedOrigins = "ALLOWED_ORIGINS"
-
-	// For oauth/openid/authorize
-	// EnvKeyDefaultAuthorizeResponseType key for env variable DEFAULT_AUTHORIZE_RESPONSE_TYPE
-	// This env is used for setting default response type in authorize handler
-	EnvKeyDefaultAuthorizeResponseType = "DEFAULT_AUTHORIZE_RESPONSE_TYPE"
-	// EnvKeyDefaultAuthorizeResponseMode key for env variable DEFAULT_AUTHORIZE_RESPONSE_MODE
-	// This env is used for setting default response mode in authorize handler
-	EnvKeyDefaultAuthorizeResponseMode = "DEFAULT_AUTHORIZE_RESPONSE_MODE"
-
-	// Twilio env variables
-	// EnvKeyTwilioAPIKey key for env variable TWILIO_API_KEY
-	EnvKeyTwilioAPIKey = "TWILIO_API_KEY"
-	// EnvKeyTwilioAPISecret key for env variable TWILIO_API_SECRET
-	EnvKeyTwilioAPISecret = "TWILIO_API_SECRET"
-	// EnvKeyTwilioAccountSID key for env variable TWILIO_ACCOUNT_SID
-	EnvKeyTwilioAccountSID = "TWILIO_ACCOUNT_SID"
-	// EnvKeyTwilioSender key for env variable TWILIO_SENDER
-	EnvKeyTwilioSender = "TWILIO_SENDER"
+	// EnvKeyCustomAccessTokenScript key for env variable CUSTOM_ACCESS_TOKEN_SCRIPT
+	EnvKeyCustomAccessTokenScript = "CUSTOM_ACCESS_TOKEN_SCRIPT"
 )
--- a/server/constants/oauth2.go
+++ b/server/constants/oauth2.go
@ -1,22 +0,0 @@
-package constants
-
-const (
-	// - query: for Authorization Code grant. 302 Found triggers redirect.
-	ResponseModeQuery = "query"
-	// - fragment: for Implicit grant. 302 Found triggers redirect.
-	ResponseModeFragment = "fragment"
-	// - form_post: 200 OK with response parameters embedded in an HTML form as hidden parameters.
-	ResponseModeFormPost = "form_post"
-	// - web_message: For Silent Authentication. Uses HTML5 web messaging.
-	ResponseModeWebMessage = "web_message"
-
-	// For the Authorization Code grant, use response_type=code to include the authorization code.
-	ResponseTypeCode = "code"
-	// For the Implicit grant, use response_type=token to include an access token.
-	ResponseTypeToken = "token"
-	// For the Implicit grant of id_token, use response_type=id_token to include an identifier token.
-	ResponseTypeIDToken = "id_token"
-
-	// Constant indicating the "signup" screen hint for customizing authentication process and redirect to a signup page.
-	ScreenHintSignUp = "signup"
-)
--- a/server/constants/oauth_info_urls.go
+++ b/server/constants/oauth_info_urls.go
@ -8,20 +8,4 @@ const (
 	FacebookUserInfoURL = "https://graph.facebook.com/me?fields=id,first_name,last_name,name,email,picture&access_token="
 	// Ref: https://docs.github.com/en/developers/apps/building-github-apps/identifying-and-authorizing-users-for-github-apps#3-your-github-app-accesses-the-api-with-the-users-access-token
 	GithubUserInfoURL = "https://api.github.com/user"
-	// Get github user emails when user info email is empty Ref: https://stackoverflow.com/a/35387123
-	GithubUserEmails = "https://api.github.com/user/emails"
-
-	// Ref: https://docs.microsoft.com/en-us/linkedin/shared/integrations/people/profile-api
-	LinkedInUserInfoURL = "https://api.linkedin.com/v2/me?projection=(id,localizedFirstName,localizedLastName,emailAddress,profilePicture(displayImage~:playableStreams))"
-	LinkedInEmailURL    = "https://api.linkedin.com/v2/emailAddress?q=members&projection=(elements*(handle~))"
-
-	TwitterUserInfoURL = "https://api.twitter.com/2/users/me?user.fields=id,name,profile_image_url,username"
-
-	// RobloxUserInfoURL is the URL to get user info from Roblox
-	RobloxUserInfoURL = "https://apis.roblox.com/oauth/v1/userinfo"
-
-	DiscordUserInfoURL = "https://discord.com/api/oauth2/@me"
-	// Get microsoft user info.
-	// Ref: https://learn.microsoft.com/en-us/azure/active-directory/develop/userinfo
-	MicrosoftUserInfoURL = "https://graph.microsoft.com/oidc/userinfo"
 )
--- a/Show More
+++ b/Show More