fix: moving nginx to caddy

2025-03-09 16:19:09 +05:30
4965 changed files with 124136 additions and 174512 deletions
@@ -2,7 +2,6 @@
 *.pyc
 .env
 venv
-.venv
 node_modules/
 **/node_modules/
 npm-debug.log
@@ -38,9 +38,3 @@ USE_MINIO=1

 # Nginx Configuration
 NGINX_PORT=80
-
-# Force HTTPS for handling SSL Termination
-MINIO_ENDPOINT_SSL=0
-
-# API key rate limit
-API_KEY_RATE_LIMIT="60/minute"
@@ -47,6 +47,12 @@ jobs:
      gh_buildx_version: ${{ steps.set_env_variables.outputs.BUILDX_VERSION }}
      gh_buildx_platforms: ${{ steps.set_env_variables.outputs.BUILDX_PLATFORMS }}
      gh_buildx_endpoint: ${{ steps.set_env_variables.outputs.BUILDX_ENDPOINT }}
+      build_proxy: ${{ steps.changed_files.outputs.proxy_any_changed }}
+      build_apiserver: ${{ steps.changed_files.outputs.apiserver_any_changed }}
+      build_admin: ${{ steps.changed_files.outputs.admin_any_changed }}
+      build_space: ${{ steps.changed_files.outputs.space_any_changed }}
+      build_web: ${{ steps.changed_files.outputs.web_any_changed }}
+      build_live: ${{ steps.changed_files.outputs.live_any_changed }}

      dh_img_web: ${{ steps.set_env_variables.outputs.DH_IMG_WEB }}
      dh_img_space: ${{ steps.set_env_variables.outputs.DH_IMG_SPACE }}
@@ -117,7 +123,46 @@ jobs:
        name: Checkout Files
        uses: actions/checkout@v4

+      - name: Get changed files
+        id: changed_files
+        uses: tj-actions/changed-files@v42
+        with:
+          files_yaml: |
+            apiserver:
+              - apiserver/**
+            proxy:
+              - nginx/**
+            admin:
+              - admin/**
+              - packages/**
+              - "package.json"
+              - "yarn.lock"
+              - "tsconfig.json"
+              - "turbo.json"
+            space:
+              - space/**
+              - packages/**
+              - "package.json"
+              - "yarn.lock"
+              - "tsconfig.json"
+              - "turbo.json"
+            web:
+              - web/**
+              - packages/**
+              - "package.json"
+              - "yarn.lock"
+              - "tsconfig.json"
+              - "turbo.json"
+            live:
+              - live/**
+              - packages/**
+              - 'package.json'
+              - 'yarn.lock'
+              - 'tsconfig.json'
+              - 'turbo.json'
+
  branch_build_push_admin:
+    if: ${{ needs.branch_build_setup.outputs.build_admin == 'true' || github.event_name == 'workflow_dispatch' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
    name: Build-Push Admin Docker Image
    runs-on: ubuntu-22.04
    needs: [branch_build_setup]
@@ -133,13 +178,14 @@ jobs:
          docker-image-owner: makeplane
          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_admin }}
          build-context: .
-          dockerfile-path: ./apps/admin/Dockerfile.admin
+          dockerfile-path: ./admin/Dockerfile.admin
          buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
          buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
          buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
          buildx-endpoint: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}

  branch_build_push_web:
+    if: ${{ needs.branch_build_setup.outputs.build_web == 'true' || github.event_name == 'workflow_dispatch' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
    name: Build-Push Web Docker Image
    runs-on: ubuntu-22.04
    needs: [branch_build_setup]
@@ -155,13 +201,14 @@ jobs:
          docker-image-owner: makeplane
          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_web }}
          build-context: .
-          dockerfile-path: ./apps/web/Dockerfile.web
+          dockerfile-path: ./web/Dockerfile.web
          buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
          buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
          buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
          buildx-endpoint: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}

  branch_build_push_space:
+    if: ${{ needs.branch_build_setup.outputs.build_space == 'true' || github.event_name == 'workflow_dispatch' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
    name: Build-Push Space Docker Image
    runs-on: ubuntu-22.04
    needs: [branch_build_setup]
@@ -177,13 +224,14 @@ jobs:
          docker-image-owner: makeplane
          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_space }}
          build-context: .
-          dockerfile-path: ./apps/space/Dockerfile.space
+          dockerfile-path: ./space/Dockerfile.space
          buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
          buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
          buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
          buildx-endpoint: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}

  branch_build_push_live:
+    if: ${{ needs.branch_build_setup.outputs.build_live == 'true' || github.event_name == 'workflow_dispatch' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
    name: Build-Push Live Collaboration Docker Image
    runs-on: ubuntu-22.04
    needs: [branch_build_setup]
@@ -199,13 +247,14 @@ jobs:
          docker-image-owner: makeplane
          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_live }}
          build-context: .
-          dockerfile-path: ./apps/live/Dockerfile.live
+          dockerfile-path: ./live/Dockerfile.live
          buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
          buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
          buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
          buildx-endpoint: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}

-  branch_build_push_api:
+  branch_build_push_apiserver:
+    if: ${{ needs.branch_build_setup.outputs.build_apiserver == 'true' || github.event_name == 'workflow_dispatch' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
    name: Build-Push API Server Docker Image
    runs-on: ubuntu-22.04
    needs: [branch_build_setup]
@@ -220,14 +269,15 @@ jobs:
          dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
          docker-image-owner: makeplane
          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_backend }}
-          build-context: ./apps/api
-          dockerfile-path: ./apps/api/Dockerfile.api
+          build-context: ./apiserver
+          dockerfile-path: ./apiserver/Dockerfile.api
          buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
          buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
          buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
          buildx-endpoint: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}

  branch_build_push_proxy:
+    if: ${{ needs.branch_build_setup.outputs.build_proxy == 'true' || github.event_name == 'workflow_dispatch' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
    name: Build-Push Proxy Docker Image
    runs-on: ubuntu-22.04
    needs: [branch_build_setup]
@@ -242,8 +292,8 @@ jobs:
          dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
          docker-image-owner: makeplane
          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_proxy }}
-          build-context: ./apps/proxy
-          dockerfile-path: ./apps/proxy/Dockerfile.ce
+          build-context: ./nginx
+          dockerfile-path: ./nginx/Dockerfile
          buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
          buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
          buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
@@ -260,7 +310,7 @@ jobs:
        branch_build_push_web,
        branch_build_push_space,
        branch_build_push_live,
-        branch_build_push_api,
+        branch_build_push_apiserver,
        branch_build_push_proxy,
      ]
    env:
@@ -273,7 +323,7 @@ jobs:
        run: |
          cp ./deploy/selfhost/install.sh deploy/selfhost/setup.sh
          sed -i 's/${APP_RELEASE:-stable}/${APP_RELEASE:-'${REL_VERSION}'}/g' deploy/selfhost/docker-compose.yml
-          # sed -i 's/APP_RELEASE=stable/APP_RELEASE='${REL_VERSION}'/g' deploy/selfhost/variables.env
+          sed -i 's/APP_RELEASE=stable/APP_RELEASE='${REL_VERSION}'/g' deploy/selfhost/variables.env

      - name: Create Release
        id: create_release
@@ -290,6 +340,5 @@ jobs:
            ${{ github.workspace }}/deploy/selfhost/setup.sh
            ${{ github.workspace }}/deploy/selfhost/swarm.sh
            ${{ github.workspace }}/deploy/selfhost/restore.sh
-            ${{ github.workspace }}/deploy/selfhost/restore-airgapped.sh
            ${{ github.workspace }}/deploy/selfhost/docker-compose.yml
            ${{ github.workspace }}/deploy/selfhost/variables.env
@@ -6,9 +6,49 @@ on:
    types: ["opened", "synchronize", "ready_for_review"]

 jobs:
-  lint-server:
+  get-changed-files:
    if: github.event.pull_request.draft == false
    runs-on: ubuntu-latest
+    outputs:
+      apiserver_changed: ${{ steps.changed-files.outputs.apiserver_any_changed }}
+      admin_changed: ${{ steps.changed-files.outputs.admin_any_changed }}
+      space_changed: ${{ steps.changed-files.outputs.space_any_changed }}
+      web_changed: ${{ steps.changed-files.outputs.web_any_changed }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: Get changed files
+        id: changed-files
+        uses: tj-actions/changed-files@v44
+        with:
+          files_yaml: |
+            apiserver:
+              - apiserver/**
+            admin:
+              - admin/**
+              - packages/**
+              - 'package.json'
+              - 'yarn.lock'
+              - 'tsconfig.json'
+              - 'turbo.json'
+            space:
+              - space/**
+              - packages/**
+              - 'package.json'
+              - 'yarn.lock'
+              - 'tsconfig.json'
+              - 'turbo.json'
+            web:
+              - web/**
+              - packages/**
+              - 'package.json'
+              - 'yarn.lock'
+              - 'tsconfig.json'
+              - 'turbo.json'
+
+  lint-apiserver:
+    needs: get-changed-files
+    runs-on: ubuntu-latest
+    if: needs.get-changed-files.outputs.apiserver_changed == 'true'
    steps:
      - uses: actions/checkout@v4
      - name: Set up Python
@@ -17,13 +57,14 @@ jobs:
          python-version: "3.x" # Specify the Python version you need
      - name: Install Pylint
        run: python -m pip install ruff
-      - name: Install Server Dependencies
-        run: cd apps/server && pip install -r requirements.txt
-      - name: Lint apps/server
-        run: ruff check --fix apps/server
+      - name: Install Apiserver Dependencies
+        run: cd apiserver && pip install -r requirements.txt
+      - name: Lint apiserver
+        run: ruff check --fix apiserver

  lint-admin:
-    if: github.event.pull_request.draft == false
+    needs: get-changed-files
+    if: needs.get-changed-files.outputs.admin_changed == 'true'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
@@ -35,7 +76,8 @@ jobs:
      - run: yarn lint --filter=admin

  lint-space:
-    if: github.event.pull_request.draft == false
+    needs: get-changed-files
+    if: needs.get-changed-files.outputs.space_changed == 'true'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
@@ -47,7 +89,8 @@ jobs:
      - run: yarn lint --filter=space

  lint-web:
-    if: github.event.pull_request.draft == false
+    needs: get-changed-files
+    if: needs.get-changed-files.outputs.web_changed == 'true'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
@@ -1,6 +1,5 @@
 node_modules
 .next
-.yarn

 ### NextJS ###
 # Dependencies
@@ -53,8 +52,6 @@ mediafiles
 .env
 .DS_Store
 logs/
-htmlcov/
-.coverage

 node_modules/
 assets/dist/
@@ -81,17 +78,10 @@ pnpm-workspace.yaml
 .npmrc
 .secrets
 tmp/
-
 ## packages
 dist
 .temp/
 deploy/selfhost/plane-app/
-
 ## Storybook
 *storybook.log
 output.css
-
-dev-editor
-# Redis
-*.rdb
-*.rdb.gz
@@ -1 +0,0 @@
-nodeLinker: node-modules
@@ -15,40 +15,20 @@ Without said minimal reproduction, we won't be able to investigate all [issues](

 You can open a new issue with this [issue form](https://github.com/makeplane/plane/issues/new).

-### Naming conventions for issues
-
-When opening a new issue, please use a clear and concise title that follows this format:
-
- For bugs: `🐛 Bug: [short description]`
- For features: `🚀 Feature: [short description]`
- For improvements: `🛠️ Improvement: [short description]`
- For documentation: `📘 Docs: [short description]`
-
-**Examples:**
-
- `🐛 Bug: API token expiry time not saving correctly`
- `📘 Docs: Clarify RAM requirement for local setup`
- `🚀 Feature: Allow custom time selection for token expiration`
-
-This helps us triage and manage issues more efficiently.
-
 ## Projects setup and Architecture

 ### Requirements

- Docker Engine installed and running
- Node.js version 20+ [LTS version](https://nodejs.org/en/about/previous-releases)
+- Node.js version v16.18.0
 - Python version 3.8+
 - Postgres version v14
 - Redis version v6.2.7
- **Memory**: Minimum **12 GB RAM** recommended
-  > ⚠️ Running the project on a system with only 8 GB RAM may lead to setup failures or memory crashes (especially during Docker container build/start or dependency install). Use cloud environments like GitHub Codespaces or upgrade local RAM if possible.

 ### Setup the project

 The project is a monorepo, with backend api and frontend in a single repo.

-The backend is a django project which is kept inside apps/api
+The backend is a django project which is kept inside apiserver

 1. Clone the repo

@@ -70,17 +50,6 @@ chmod +x setup.sh
 docker compose -f docker-compose-local.yml up
 ```

-4. Start web apps:
-
-```bash
-yarn dev
-```
-
-5. Open your browser to http://localhost:3001/god-mode/ and register yourself as instance admin
-6. Open up your browser to http://localhost:3000 then log in using the same credentials from the previous step
-
-That’s it! You’re all set to begin coding. Remember to refresh your browser if changes don’t auto-reload. Happy contributing! 🎉
-
 ## Missing a Feature?

 If a feature is missing, you can directly _request_ a new one [here](https://github.com/makeplane/plane/issues/new?assignees=&labels=feature&template=feature_request.yml&title=%F0%9F%9A%80+Feature%3A+). You also can do the same by choosing "🚀 Feature" when raising a [New Issue](https://github.com/makeplane/plane/issues/new/choose) on our GitHub Repository.
@@ -106,13 +75,11 @@ To ensure consistency throughout the source code, please keep these rules in min
 - **Improve documentation** - fix incomplete or missing [docs](https://docs.plane.so/), bad wording, examples or explanations.

 ## Contributing to language support
-
 This guide is designed to help contributors understand how to add or update translations in the application. 

 ### Understanding translation structure

 #### File organization
-
 Translations are organized by language in the locales directory. Each language has its own folder containing JSON files for translations. Here's how it looks:

 ```
@@ -125,9 +92,7 @@ packages/i18n/src/locales/
    └── [language]/
        └── translations.json   
 ```
-
 #### Nested structure
-
 To keep translations organized, we use a nested structure for keys. This makes it easier to manage and locate specific translations. For example:

 ```json
@@ -142,13 +107,10 @@ To keep translations organized, we use a nested structure for keys. This makes i
 ```

 ### Translation formatting guide
-
 We use [IntlMessageFormat](https://formatjs.github.io/docs/intl-messageformat/) to handle dynamic content, such as variables and pluralization. Here's how to format your translations:

 #### Examples
-
 - **Simple variables** 
-
    ```json
    {
    "greeting": "Hello, {name}!"
@@ -165,14 +127,12 @@ We use [IntlMessageFormat](https://formatjs.github.io/docs/intl-messageformat/)
 ### Contributing guidelines

 #### Updating existing translations
-
 1. Locate the key in `locales/<language>/translations.json`.

 2. Update the value while ensuring the key structure remains intact.
 3. Preserve any existing ICU formats (e.g., variables, pluralization).

 #### Adding new translation keys
-
 1. When introducing a new key, ensure it is added to **all** language files, even if translations are not immediately available. Use English as a placeholder if needed.

 2. Keep the nesting structure consistent across all languages.
@@ -180,7 +140,6 @@ We use [IntlMessageFormat](https://formatjs.github.io/docs/intl-messageformat/)
 3. If the new key requires dynamic content (e.g., variables or pluralization), ensure the ICU format is applied uniformly across all languages.

 ### Adding new languages
-
 Adding a new language involves several steps to ensure it integrates seamlessly with the project. Follow these instructions carefully:

 1. **Update type definitions**  
@@ -223,7 +182,6 @@ Adding a new language involves several steps to ensure it integrates seamlessly
    ```

 ### Quality checklist
-
 Before submitting your contribution, please ensure the following:

 - All translation keys exist in every language file.
@@ -234,7 +192,6 @@ Before submitting your contribution, please ensure the following:
 - There are no missing or untranslated keys.

 #### Pro tips
-
 - When in doubt, refer to the English translations for context.
 - Verify pluralization works with different numbers.
 - Ensure dynamic values (e.g., `{name}`) are correctly interpolated.
@@ -0,0 +1,91 @@
+# Environment Variables
+
+Environment variables are distributed in various files. Please refer them carefully.
+
+## {PROJECT_FOLDER}/.env
+
+File is available in the project root folder
+
+```
+# Database Settings
+POSTGRES_USER="plane"
+POSTGRES_PASSWORD="plane"
+POSTGRES_DB="plane"
+PGDATA="/var/lib/postgresql/data"
+# Redis Settings
+REDIS_HOST="plane-redis"
+REDIS_PORT="6379"
+# AWS Settings
+AWS_REGION=""
+AWS_ACCESS_KEY_ID="access-key"
+AWS_SECRET_ACCESS_KEY="secret-key"
+AWS_S3_ENDPOINT_URL="http://plane-minio:9000"
+# Changing this requires change in the nginx.conf for uploads if using minio setup
+AWS_S3_BUCKET_NAME="uploads"
+# Maximum file upload limit
+FILE_SIZE_LIMIT=5242880
+# GPT settings
+OPENAI_API_BASE="https://api.openai.com/v1" # deprecated
+OPENAI_API_KEY="sk-" # deprecated
+GPT_ENGINE="gpt-3.5-turbo" # deprecated
+# Settings related to Docker
+DOCKERIZED=1  # deprecated
+# set to 1 If using the pre-configured minio setup
+USE_MINIO=1
+# Nginx Configuration
+NGINX_PORT=80
+```
+
+## {PROJECT_FOLDER}/apiserver/.env
+
+```
+# Backend
+# Debug value for api server use it as 0 for production use
+DEBUG=0
+CORS_ALLOWED_ORIGINS="http://localhost"
+# Error logs
+SENTRY_DSN=""
+SENTRY_ENVIRONMENT="development"
+# Database Settings
+POSTGRES_USER="plane"
+POSTGRES_PASSWORD="plane"
+POSTGRES_HOST="plane-db"
+POSTGRES_DB="plane"
+POSTGRES_PORT=5432
+DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB}
+# Redis Settings
+REDIS_HOST="plane-redis"
+REDIS_PORT="6379"
+REDIS_URL="redis://${REDIS_HOST}:6379/"
+# AWS Settings
+AWS_REGION=""
+AWS_ACCESS_KEY_ID="access-key"
+AWS_SECRET_ACCESS_KEY="secret-key"
+AWS_S3_ENDPOINT_URL="http://plane-minio:9000"
+# Changing this requires change in the nginx.conf for uploads if using minio setup
+AWS_S3_BUCKET_NAME="uploads"
+# Maximum file upload limit
+FILE_SIZE_LIMIT=5242880
+# Settings related to Docker
+DOCKERIZED=1 # deprecated
+# set to 1 If using the pre-configured minio setup
+USE_MINIO=1
+# Nginx Configuration
+NGINX_PORT=80
+# Email redirections and minio domain settings
+WEB_URL="http://localhost"
+# Gunicorn Workers
+GUNICORN_WORKERS=2
+# Base URLs
+ADMIN_BASE_URL=
+SPACE_BASE_URL=
+APP_BASE_URL=
+SECRET_KEY="gxoytl7dmnc1y37zahah820z5iq3iozu38cnfjtu3yaau9cd9z"
+```
+
+## Updates
+
+- The naming convention for containers and images has been updated.
+- The plane-worker image will no longer be maintained, as it has been merged with plane-backend.
+- The Tiptap pro-extension dependency has been removed, eliminating the need for Tiptap API keys.
+- The image name for Plane deployment has been changed to plane-space.
@@ -16,10 +16,10 @@
 </p>

 <p align="center">
-    <a href="https://plane.so/"><b>Website</b></a> •
-    <a href="https://github.com/makeplane/plane/releases"><b>Releases</b></a> •
-    <a href="https://twitter.com/planepowers"><b>Twitter</b></a> •
-    <a href="https://docs.plane.so/"><b>Documentation</b></a>
+    <a href="https://dub.sh/plane-website-readme"><b>Website</b></a> •
+    <a href="https://git.new/releases"><b>Releases</b></a> •
+    <a href="https://dub.sh/planepowershq"><b>Twitter</b></a> •
+    <a href="https://dub.sh/planedocs"><b>Documentation</b></a>
 </p>

 <p>
@@ -39,7 +39,7 @@
    </a>
 </p>

-Meet [Plane](https://plane.so/), an open-source project management tool to track issues, run ~sprints~ cycles, and manage product roadmaps without the chaos of managing the tool itself. 🧘‍♀️
+Meet [Plane](https://dub.sh/plane-website-readme), an open-source project management tool to track issues, run ~sprints~ cycles, and manage product roadmaps without the chaos of managing the tool itself. 🧘‍♀️

 > Plane is evolving every day. Your suggestions, ideas, and reported bugs help us immensely. Do not hesitate to join in the conversation on [Discord](https://discord.com/invite/A92xrEGCge) or raise a GitHub issue. We read everything and respond to most.

@@ -85,7 +85,38 @@ Access real-time insights across all your Plane data. Visualize trends, remove b

 ## 🛠️ Local development

-See [CONTRIBUTING](./CONTRIBUTING.md)
+### Pre-requisites
+- Ensure Docker Engine is installed and running.
+
+###  Development setup
+Setting up your local environment is simple and straightforward. Follow these steps to get started:
+
+1. Clone the repository:
+   ```
+   git clone https://github.com/makeplane/plane.git
+   ```
+2. Navigate to the project folder:
+   ```
+   cd plane
+   ```
+3. Create a new branch for your feature or fix:
+   ```
+   git checkout -b <feature-branch-name>
+   ```
+4. Run the setup script in the terminal:
+   ```
+   ./setup.sh
+   ```
+5. Open the project in an IDE such as VS Code.
+
+6. Review the `.env` files in the relevant folders. Refer to [Environment Setup](./ENV_SETUP.md) for details on the environment variables used.
+
+7. Start the services using Docker:
+   ```
+   docker compose -f docker-compose-local.yml up -d
+   ```
+
+That’s it! You’re all set to begin coding. Remember to refresh your browser if changes don’t auto-reload. Happy contributing! 🎉

 ## ⚙️ Built with
 [![Next JS](https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white)](https://nextjs.org/)
@@ -0,0 +1,3 @@
+NEXT_PUBLIC_API_BASE_URL=""
+NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
+NEXT_PUBLIC_WEB_BASE_URL=""
@@ -1,4 +1,4 @@
-FROM node:22-alpine AS base
+FROM node:20-alpine as base

 # *****************************************************************************
 # STAGE 1: Build the project
@@ -46,8 +46,8 @@ ENV NEXT_PUBLIC_SPACE_BASE_PATH=$NEXT_PUBLIC_SPACE_BASE_PATH
 ARG NEXT_PUBLIC_WEB_BASE_URL=""
 ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL

-ENV NEXT_TELEMETRY_DISABLED=1
-ENV TURBO_TELEMETRY_DISABLED=1
+ENV NEXT_TELEMETRY_DISABLED 1
+ENV TURBO_TELEMETRY_DISABLED 1

 RUN yarn turbo run build --filter=admin

@@ -57,16 +57,12 @@ RUN yarn turbo run build --filter=admin
 FROM base AS runner
 WORKDIR /app

-# Don't run production as root
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-USER nextjs
+COPY --from=installer /app/admin/next.config.js .
+COPY --from=installer /app/admin/package.json .

-# Automatically leverage output traces to reduce image size
-# https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=installer /app/apps/admin/.next/standalone ./
-COPY --from=installer /app/apps/admin/.next/static ./apps/admin/.next/static
-COPY --from=installer /app/apps/admin/public ./apps/admin/public
+COPY --from=installer /app/admin/.next/standalone ./
+COPY --from=installer /app/admin/.next/static ./admin/.next/static
+COPY --from=installer /app/admin/public ./admin/public

 ARG NEXT_PUBLIC_API_BASE_URL=""
 ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
@@ -86,9 +82,7 @@ ENV NEXT_PUBLIC_SPACE_BASE_PATH=$NEXT_PUBLIC_SPACE_BASE_PATH
 ARG NEXT_PUBLIC_WEB_BASE_URL=""
 ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL

-ENV NEXT_TELEMETRY_DISABLED=1
-ENV TURBO_TELEMETRY_DISABLED=1
+ENV NEXT_TELEMETRY_DISABLED 1
+ENV TURBO_TELEMETRY_DISABLED 1

 EXPOSE 3000
-
-CMD ["node", "apps/admin/server.js"]
@@ -0,0 +1,17 @@
+FROM node:20-alpine
+RUN apk add --no-cache libc6-compat
+# Set working directory
+WORKDIR /app
+
+COPY . .
+
+RUN yarn global add turbo
+RUN yarn install
+
+ENV NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
+
+EXPOSE 3000
+
+VOLUME [ "/app/node_modules", "/app/admin/node_modules" ]
+
+CMD ["yarn", "dev", "--filter=admin"]
@@ -0,0 +1,134 @@
+"use client";
+import { FC } from "react";
+import { useForm } from "react-hook-form";
+import { Lightbulb } from "lucide-react";
+import { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { ControllerInput, TControllerInputFormField } from "@/components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type IInstanceAIForm = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type AIFormValues = Record<TInstanceAIConfigurationKeys, string>;
+
+export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
+  const { config } = props;
+  // store
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<AIFormValues>({
+    defaultValues: {
+      OPENAI_API_KEY: config["OPENAI_API_KEY"],
+      GPT_ENGINE: config["GPT_ENGINE"],
+    },
+  });
+
+  const aiFormFields: TControllerInputFormField[] = [
+    {
+      key: "GPT_ENGINE",
+      type: "text",
+      label: "GPT_ENGINE",
+      description: (
+        <>
+          Choose an OpenAI engine.{" "}
+          <a
+            href="https://platform.openai.com/docs/models/overview"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            Learn more
+          </a>
+        </>
+      ),
+      placeholder: "gpt-3.5-turbo",
+      error: Boolean(errors.GPT_ENGINE),
+      required: false,
+    },
+    {
+      key: "OPENAI_API_KEY",
+      type: "password",
+      label: "API key",
+      description: (
+        <>
+          You will find your API key{" "}
+          <a
+            href="https://platform.openai.com/api-keys"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            here.
+          </a>
+        </>
+      ),
+      placeholder: "sk-asddassdfasdefqsdfasd23das3dasdcasd",
+      error: Boolean(errors.OPENAI_API_KEY),
+      required: false,
+    },
+  ];
+
+  const onSubmit = async (formData: AIFormValues) => {
+    const payload: Partial<AIFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "AI Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="space-y-3">
+        <div>
+          <div className="pb-1 text-xl font-medium text-custom-text-100">OpenAI</div>
+          <div className="text-sm font-normal text-custom-text-300">If you use ChatGPT, this is for you.</div>
+        </div>
+        <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-12 gap-y-8 lg:grid-cols-3">
+          {aiFormFields.map((field) => (
+            <ControllerInput
+              key={field.key}
+              control={control}
+              type={field.type}
+              name={field.key}
+              label={field.label}
+              description={field.description}
+              placeholder={field.placeholder}
+              error={field.error}
+              required={field.required}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save changes"}
+        </Button>
+
+        <div className="relative inline-flex items-center gap-2 rounded border border-custom-primary-100/20 bg-custom-primary-100/10 px-4 py-2 text-xs text-custom-primary-200">
+          <Lightbulb height="14" width="14" />
+          <div>
+            If you have a preferred AI models vendor, please get in{" "}
+            <a className="underline font-medium" href="https://plane.so/contact">
+              touch with us.
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+import { AdminLayout } from "@/layouts/admin-layout";
+
+export const metadata: Metadata = {
+  title: "Artificial Intelligence Settings - Plane Web",
+};
+
+export default function AILayout({ children }: { children: ReactNode }) {
+  return <AdminLayout>{children}</AdminLayout>;
+}
@@ -0,0 +1,216 @@
+"use client";
+
+import { FC, useState } from "react";
+import isEmpty from "lodash/isEmpty";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
+import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import {
+  CodeBlock,
+  ConfirmDiscardModal,
+  ControllerInput,
+  CopyField,
+  TControllerInputFormField,
+  TCopyField,
+} from "@/components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type GithubConfigFormValues = Record<TInstanceGithubAuthenticationConfigurationKeys, string>;
+
+export const InstanceGithubConfigForm: FC<Props> = (props) => {
+  const { config } = props;
+  // states
+  const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isDirty, isSubmitting },
+  } = useForm<GithubConfigFormValues>({
+    defaultValues: {
+      GITHUB_CLIENT_ID: config["GITHUB_CLIENT_ID"],
+      GITHUB_CLIENT_SECRET: config["GITHUB_CLIENT_SECRET"],
+    },
+  });
+
+  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
+
+  const GITHUB_FORM_FIELDS: TControllerInputFormField[] = [
+    {
+      key: "GITHUB_CLIENT_ID",
+      type: "text",
+      label: "Client ID",
+      description: (
+        <>
+          You will get this from your{" "}
+          <a
+            tabIndex={-1}
+            href="https://github.com/settings/applications/new"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            GitHub OAuth application settings.
+          </a>
+        </>
+      ),
+      placeholder: "70a44354520df8bd9bcd",
+      error: Boolean(errors.GITHUB_CLIENT_ID),
+      required: true,
+    },
+    {
+      key: "GITHUB_CLIENT_SECRET",
+      type: "password",
+      label: "Client secret",
+      description: (
+        <>
+          Your client secret is also found in your{" "}
+          <a
+            tabIndex={-1}
+            href="https://github.com/settings/applications/new"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            GitHub OAuth application settings.
+          </a>
+        </>
+      ),
+      placeholder: "9b0050f94ec1b744e32ce79ea4ffacd40d4119cb",
+      error: Boolean(errors.GITHUB_CLIENT_SECRET),
+      required: true,
+    },
+  ];
+
+  const GITHUB_SERVICE_FIELD: TCopyField[] = [
+    {
+      key: "Origin_URL",
+      label: "Origin URL",
+      url: originURL,
+      description: (
+        <>
+          We will auto-generate this. Paste this into the <CodeBlock darkerShade>Authorized origin URL</CodeBlock> field{" "}
+          <a
+            tabIndex={-1}
+            href="https://github.com/settings/applications/new"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            here.
+          </a>
+        </>
+      ),
+    },
+    {
+      key: "Callback_URI",
+      label: "Callback URI",
+      url: `${originURL}/auth/github/callback/`,
+      description: (
+        <>
+          We will auto-generate this. Paste this into your <CodeBlock darkerShade>Authorized Callback URI</CodeBlock>{" "}
+          field{" "}
+          <a
+            tabIndex={-1}
+            href="https://github.com/settings/applications/new"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            here.
+          </a>
+        </>
+      ),
+    },
+  ];
+
+  const onSubmit = async (formData: GithubConfigFormValues) => {
+    const payload: Partial<GithubConfigFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then((response = []) => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Done!",
+          message: "Your GitHub authentication is configured. You should test it now.",
+        });
+        reset({
+          GITHUB_CLIENT_ID: response.find((item) => item.key === "GITHUB_CLIENT_ID")?.value,
+          GITHUB_CLIENT_SECRET: response.find((item) => item.key === "GITHUB_CLIENT_SECRET")?.value,
+        });
+      })
+      .catch((err) => console.error(err));
+  };
+
+  const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    if (isDirty) {
+      e.preventDefault();
+      setIsDiscardChangesModalOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <ConfirmDiscardModal
+        isOpen={isDiscardChangesModalOpen}
+        onDiscardHref="/authentication"
+        handleClose={() => setIsDiscardChangesModalOpen(false)}
+      />
+      <div className="flex flex-col gap-8">
+        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
+          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
+            <div className="pt-2.5 text-xl font-medium">GitHub-provided details for Plane</div>
+            {GITHUB_FORM_FIELDS.map((field) => (
+              <ControllerInput
+                key={field.key}
+                control={control}
+                type={field.type}
+                name={field.key}
+                label={field.label}
+                description={field.description}
+                placeholder={field.placeholder}
+                error={field.error}
+                required={field.required}
+              />
+            ))}
+            <div className="flex flex-col gap-1 pt-4">
+              <div className="flex items-center gap-4">
+                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                  {isSubmitting ? "Saving..." : "Save changes"}
+                </Button>
+                <Link
+                  href="/authentication"
+                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
+                  onClick={handleGoBack}
+                >
+                  Go back
+                </Link>
+              </div>
+            </div>
+          </div>
+          <div className="col-span-2 md:col-span-1">
+            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
+              <div className="pt-2 text-xl font-medium">Plane-provided details for GitHub</div>
+              {GITHUB_SERVICE_FIELD.map((field) => (
+                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
@@ -0,0 +1,114 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import useSWR from "swr";
+// plane internal packages
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
+import { resolveGeneralTheme } from "@plane/utils";
+// components
+import { AuthenticationMethodCard } from "@/components/authentication";
+import { PageHeader } from "@/components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+// icons
+import githubLightModeImage from "@/public/logos/github-black.png";
+import githubDarkModeImage from "@/public/logos/github-white.png";
+// local components
+import { InstanceGithubConfigForm } from "./form";
+
+const InstanceGithubAuthenticationPage = observer(() => {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
+  // state
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  // theme
+  const { resolvedTheme } = useTheme();
+  // config
+  const enableGithubConfig = formattedConfig?.IS_GITHUB_ENABLED ?? "";
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  const updateConfig = async (key: "IS_GITHUB_ENABLED", value: string) => {
+    setIsSubmitting(true);
+
+    const payload = {
+      [key]: value,
+    };
+
+    const updateConfigPromise = updateInstanceConfigurations(payload);
+
+    setPromiseToast(updateConfigPromise, {
+      loading: "Saving Configuration...",
+      success: {
+        title: "Configuration saved",
+        message: () => `GitHub authentication is now ${value ? "active" : "disabled"}.`,
+      },
+      error: {
+        title: "Error",
+        message: () => "Failed to save configuration",
+      },
+    });
+
+    await updateConfigPromise
+      .then(() => {
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmitting(false);
+      });
+  };
+  return (
+    <>
+      <PageHeader title="GitHub Authentication - Plane Web" />
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+          <AuthenticationMethodCard
+            name="GitHub"
+            description="Allow members to login or sign up to plane with their GitHub accounts."
+            icon={
+              <Image
+                src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
+                height={24}
+                width={24}
+                alt="GitHub Logo"
+              />
+            }
+            config={
+              <ToggleSwitch
+                value={Boolean(parseInt(enableGithubConfig))}
+                onChange={() => {
+                  Boolean(parseInt(enableGithubConfig)) === true
+                    ? updateConfig("IS_GITHUB_ENABLED", "0")
+                    : updateConfig("IS_GITHUB_ENABLED", "1");
+                }}
+                size="sm"
+                disabled={isSubmitting || !formattedConfig}
+              />
+            }
+            disabled={isSubmitting || !formattedConfig}
+            withBorder={false}
+          />
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {formattedConfig ? (
+            <InstanceGithubConfigForm config={formattedConfig} />
+          ) : (
+            <Loader className="space-y-8">
+              <Loader.Item height="50px" width="25%" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" width="50%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default InstanceGithubAuthenticationPage;
@@ -0,0 +1,212 @@
+import { FC, useState } from "react";
+import isEmpty from "lodash/isEmpty";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
+import { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import {
+  CodeBlock,
+  ConfirmDiscardModal,
+  ControllerInput,
+  CopyField,
+  TControllerInputFormField,
+  TCopyField,
+} from "@/components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type GitlabConfigFormValues = Record<TInstanceGitlabAuthenticationConfigurationKeys, string>;
+
+export const InstanceGitlabConfigForm: FC<Props> = (props) => {
+  const { config } = props;
+  // states
+  const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isDirty, isSubmitting },
+  } = useForm<GitlabConfigFormValues>({
+    defaultValues: {
+      GITLAB_HOST: config["GITLAB_HOST"],
+      GITLAB_CLIENT_ID: config["GITLAB_CLIENT_ID"],
+      GITLAB_CLIENT_SECRET: config["GITLAB_CLIENT_SECRET"],
+    },
+  });
+
+  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
+
+  const GITLAB_FORM_FIELDS: TControllerInputFormField[] = [
+    {
+      key: "GITLAB_HOST",
+      type: "text",
+      label: "Host",
+      description: (
+        <>
+          This is either https://gitlab.com or the <CodeBlock>domain.tld</CodeBlock> where you host GitLab.
+        </>
+      ),
+      placeholder: "https://gitlab.com",
+      error: Boolean(errors.GITLAB_HOST),
+      required: true,
+    },
+    {
+      key: "GITLAB_CLIENT_ID",
+      type: "text",
+      label: "Application ID",
+      description: (
+        <>
+          Get this from your{" "}
+          <a
+            tabIndex={-1}
+            href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            GitLab OAuth application settings
+          </a>
+          .
+        </>
+      ),
+      placeholder: "c2ef2e7fc4e9d15aa7630f5637d59e8e4a27ff01dceebdb26b0d267b9adcf3c3",
+      error: Boolean(errors.GITLAB_CLIENT_ID),
+      required: true,
+    },
+    {
+      key: "GITLAB_CLIENT_SECRET",
+      type: "password",
+      label: "Secret",
+      description: (
+        <>
+          The client secret is also found in your{" "}
+          <a
+            tabIndex={-1}
+            href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            GitLab OAuth application settings
+          </a>
+          .
+        </>
+      ),
+      placeholder: "gloas-f79cfa9a03c97f6ffab303177a5a6778a53c61e3914ba093412f68a9298a1b28",
+      error: Boolean(errors.GITLAB_CLIENT_SECRET),
+      required: true,
+    },
+  ];
+
+  const GITLAB_SERVICE_FIELD: TCopyField[] = [
+    {
+      key: "Callback_URL",
+      label: "Callback URL",
+      url: `${originURL}/auth/gitlab/callback/`,
+      description: (
+        <>
+          We will auto-generate this. Paste this into the <CodeBlock darkerShade>Redirect URI</CodeBlock> field of your{" "}
+          <a
+            tabIndex={-1}
+            href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            GitLab OAuth application
+          </a>
+          .
+        </>
+      ),
+    },
+  ];
+
+  const onSubmit = async (formData: GitlabConfigFormValues) => {
+    const payload: Partial<GitlabConfigFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then((response = []) => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Done!",
+          message: "Your GitLab authentication is configured. You should test it now.",
+        });
+        reset({
+          GITLAB_HOST: response.find((item) => item.key === "GITLAB_HOST")?.value,
+          GITLAB_CLIENT_ID: response.find((item) => item.key === "GITLAB_CLIENT_ID")?.value,
+          GITLAB_CLIENT_SECRET: response.find((item) => item.key === "GITLAB_CLIENT_SECRET")?.value,
+        });
+      })
+      .catch((err) => console.error(err));
+  };
+
+  const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    if (isDirty) {
+      e.preventDefault();
+      setIsDiscardChangesModalOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <ConfirmDiscardModal
+        isOpen={isDiscardChangesModalOpen}
+        onDiscardHref="/authentication"
+        handleClose={() => setIsDiscardChangesModalOpen(false)}
+      />
+      <div className="flex flex-col gap-8">
+        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
+          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
+            <div className="pt-2.5 text-xl font-medium">GitLab-provided details for Plane</div>
+            {GITLAB_FORM_FIELDS.map((field) => (
+              <ControllerInput
+                key={field.key}
+                control={control}
+                type={field.type}
+                name={field.key}
+                label={field.label}
+                description={field.description}
+                placeholder={field.placeholder}
+                error={field.error}
+                required={field.required}
+              />
+            ))}
+            <div className="flex flex-col gap-1 pt-4">
+              <div className="flex items-center gap-4">
+                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                  {isSubmitting ? "Saving..." : "Save changes"}
+                </Button>
+                <Link
+                  href="/authentication"
+                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
+                  onClick={handleGoBack}
+                >
+                  Go back
+                </Link>
+              </div>
+            </div>
+          </div>
+          <div className="col-span-2 md:col-span-1">
+            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
+              <div className="pt-2 text-xl font-medium">Plane-provided details for GitLab</div>
+              {GITLAB_SERVICE_FIELD.map((field) => (
+                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
@@ -0,0 +1,101 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+import useSWR from "swr";
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
+// components
+import { AuthenticationMethodCard } from "@/components/authentication";
+import { PageHeader } from "@/components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+// icons
+import GitlabLogo from "@/public/logos/gitlab-logo.svg";
+// local components
+import { InstanceGitlabConfigForm } from "./form";
+
+const InstanceGitlabAuthenticationPage = observer(() => {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
+  // state
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  // config
+  const enableGitlabConfig = formattedConfig?.IS_GITLAB_ENABLED ?? "";
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  const updateConfig = async (key: "IS_GITLAB_ENABLED", value: string) => {
+    setIsSubmitting(true);
+
+    const payload = {
+      [key]: value,
+    };
+
+    const updateConfigPromise = updateInstanceConfigurations(payload);
+
+    setPromiseToast(updateConfigPromise, {
+      loading: "Saving Configuration...",
+      success: {
+        title: "Configuration saved",
+        message: () => `GitLab authentication is now ${value ? "active" : "disabled"}.`,
+      },
+      error: {
+        title: "Error",
+        message: () => "Failed to save configuration",
+      },
+    });
+
+    await updateConfigPromise
+      .then(() => {
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmitting(false);
+      });
+  };
+  return (
+    <>
+      <PageHeader title="GitLab Authentication - Plane Web" />
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+          <AuthenticationMethodCard
+            name="GitLab"
+            description="Allow members to login or sign up to plane with their GitLab accounts."
+            icon={<Image src={GitlabLogo} height={24} width={24} alt="GitLab Logo" />}
+            config={
+              <ToggleSwitch
+                value={Boolean(parseInt(enableGitlabConfig))}
+                onChange={() => {
+                  Boolean(parseInt(enableGitlabConfig)) === true
+                    ? updateConfig("IS_GITLAB_ENABLED", "0")
+                    : updateConfig("IS_GITLAB_ENABLED", "1");
+                }}
+                size="sm"
+                disabled={isSubmitting || !formattedConfig}
+              />
+            }
+            disabled={isSubmitting || !formattedConfig}
+            withBorder={false}
+          />
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {formattedConfig ? (
+            <InstanceGitlabConfigForm config={formattedConfig} />
+          ) : (
+            <Loader className="space-y-8">
+              <Loader.Item height="50px" width="25%" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" width="50%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default InstanceGitlabAuthenticationPage;
@@ -0,0 +1,214 @@
+"use client";
+import { FC, useState } from "react";
+import isEmpty from "lodash/isEmpty";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
+import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import {
+  CodeBlock,
+  ConfirmDiscardModal,
+  ControllerInput,
+  CopyField,
+  TControllerInputFormField,
+  TCopyField,
+} from "@/components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type GoogleConfigFormValues = Record<TInstanceGoogleAuthenticationConfigurationKeys, string>;
+
+export const InstanceGoogleConfigForm: FC<Props> = (props) => {
+  const { config } = props;
+  // states
+  const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isDirty, isSubmitting },
+  } = useForm<GoogleConfigFormValues>({
+    defaultValues: {
+      GOOGLE_CLIENT_ID: config["GOOGLE_CLIENT_ID"],
+      GOOGLE_CLIENT_SECRET: config["GOOGLE_CLIENT_SECRET"],
+    },
+  });
+
+  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
+
+  const GOOGLE_FORM_FIELDS: TControllerInputFormField[] = [
+    {
+      key: "GOOGLE_CLIENT_ID",
+      type: "text",
+      label: "Client ID",
+      description: (
+        <>
+          Your client ID lives in your Google API Console.{" "}
+          <a
+            tabIndex={-1}
+            href="https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#creatingcred"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            Learn more
+          </a>
+        </>
+      ),
+      placeholder: "840195096245-0p2tstej9j5nc4l8o1ah2dqondscqc1g.apps.googleusercontent.com",
+      error: Boolean(errors.GOOGLE_CLIENT_ID),
+      required: true,
+    },
+    {
+      key: "GOOGLE_CLIENT_SECRET",
+      type: "password",
+      label: "Client secret",
+      description: (
+        <>
+          Your client secret should also be in your Google API Console.{" "}
+          <a
+            tabIndex={-1}
+            href="https://developers.google.com/identity/oauth2/web/guides/get-google-api-clientid"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            Learn more
+          </a>
+        </>
+      ),
+      placeholder: "GOCShX-ADp4cI0kPqav1gGCBg5bE02E",
+      error: Boolean(errors.GOOGLE_CLIENT_SECRET),
+      required: true,
+    },
+  ];
+
+  const GOOGLE_SERVICE_DETAILS: TCopyField[] = [
+    {
+      key: "Origin_URL",
+      label: "Origin URL",
+      url: originURL,
+      description: (
+        <p>
+          We will auto-generate this. Paste this into your{" "}
+          <CodeBlock darkerShade>Authorized JavaScript origins</CodeBlock> field. For this OAuth client{" "}
+          <a
+            href="https://console.cloud.google.com/apis/credentials/oauthclient"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            here.
+          </a>
+        </p>
+      ),
+    },
+    {
+      key: "Callback_URI",
+      label: "Callback URI",
+      url: `${originURL}/auth/google/callback/`,
+      description: (
+        <p>
+          We will auto-generate this. Paste this into your <CodeBlock darkerShade>Authorized Redirect URI</CodeBlock>{" "}
+          field. For this OAuth client{" "}
+          <a
+            href="https://console.cloud.google.com/apis/credentials/oauthclient"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            here.
+          </a>
+        </p>
+      ),
+    },
+  ];
+
+  const onSubmit = async (formData: GoogleConfigFormValues) => {
+    const payload: Partial<GoogleConfigFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then((response = []) => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Done!",
+          message: "Your Google authentication is configured. You should test it now.",
+        });
+        reset({
+          GOOGLE_CLIENT_ID: response.find((item) => item.key === "GOOGLE_CLIENT_ID")?.value,
+          GOOGLE_CLIENT_SECRET: response.find((item) => item.key === "GOOGLE_CLIENT_SECRET")?.value,
+        });
+      })
+      .catch((err) => console.error(err));
+  };
+
+  const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    if (isDirty) {
+      e.preventDefault();
+      setIsDiscardChangesModalOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <ConfirmDiscardModal
+        isOpen={isDiscardChangesModalOpen}
+        onDiscardHref="/authentication"
+        handleClose={() => setIsDiscardChangesModalOpen(false)}
+      />
+      <div className="flex flex-col gap-8">
+        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
+          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
+            <div className="pt-2.5 text-xl font-medium">Google-provided details for Plane</div>
+            {GOOGLE_FORM_FIELDS.map((field) => (
+              <ControllerInput
+                key={field.key}
+                control={control}
+                type={field.type}
+                name={field.key}
+                label={field.label}
+                description={field.description}
+                placeholder={field.placeholder}
+                error={field.error}
+                required={field.required}
+              />
+            ))}
+            <div className="flex flex-col gap-1 pt-4">
+              <div className="flex items-center gap-4">
+                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                  {isSubmitting ? "Saving..." : "Save changes"}
+                </Button>
+                <Link
+                  href="/authentication"
+                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
+                  onClick={handleGoBack}
+                >
+                  Go back
+                </Link>
+              </div>
+            </div>
+          </div>
+          <div className="col-span-2 md:col-span-1">
+            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
+              <div className="pt-2 text-xl font-medium">Plane-provided details for Google</div>
+              {GOOGLE_SERVICE_DETAILS.map((field) => (
+                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
@@ -0,0 +1,102 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+import useSWR from "swr";
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
+// components
+import { AuthenticationMethodCard } from "@/components/authentication";
+import { PageHeader } from "@/components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+// icons
+import GoogleLogo from "@/public/logos/google-logo.svg";
+// local components
+import { InstanceGoogleConfigForm } from "./form";
+
+const InstanceGoogleAuthenticationPage = observer(() => {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
+  // state
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  // config
+  const enableGoogleConfig = formattedConfig?.IS_GOOGLE_ENABLED ?? "";
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  const updateConfig = async (key: "IS_GOOGLE_ENABLED", value: string) => {
+    setIsSubmitting(true);
+
+    const payload = {
+      [key]: value,
+    };
+
+    const updateConfigPromise = updateInstanceConfigurations(payload);
+
+    setPromiseToast(updateConfigPromise, {
+      loading: "Saving Configuration...",
+      success: {
+        title: "Configuration saved",
+        message: () => `Google authentication is now ${value ? "active" : "disabled"}.`,
+      },
+      error: {
+        title: "Error",
+        message: () => "Failed to save configuration",
+      },
+    });
+
+    await updateConfigPromise
+      .then(() => {
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmitting(false);
+      });
+  };
+  return (
+    <>
+      <PageHeader title="Google Authentication - Plane Web" />
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+          <AuthenticationMethodCard
+            name="Google"
+            description="Allow members to login or sign up to plane with their Google
+            accounts."
+            icon={<Image src={GoogleLogo} height={24} width={24} alt="Google Logo" />}
+            config={
+              <ToggleSwitch
+                value={Boolean(parseInt(enableGoogleConfig))}
+                onChange={() => {
+                  Boolean(parseInt(enableGoogleConfig)) === true
+                    ? updateConfig("IS_GOOGLE_ENABLED", "0")
+                    : updateConfig("IS_GOOGLE_ENABLED", "1");
+                }}
+                size="sm"
+                disabled={isSubmitting || !formattedConfig}
+              />
+            }
+            disabled={isSubmitting || !formattedConfig}
+            withBorder={false}
+          />
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {formattedConfig ? (
+            <InstanceGoogleConfigForm config={formattedConfig} />
+          ) : (
+            <Loader className="space-y-8">
+              <Loader.Item height="50px" width="25%" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" width="50%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default InstanceGoogleAuthenticationPage;
@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+import { AdminLayout } from "@/layouts/admin-layout";
+
+export const metadata: Metadata = {
+  title: "Authentication Settings - Plane Web",
+};
+
+export default function AuthenticationLayout({ children }: { children: ReactNode }) {
+  return <AdminLayout>{children}</AdminLayout>;
+}
@@ -7,7 +7,7 @@ import { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from
 // ui
 import { Button, CustomSelect, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
+import { ControllerInput, TControllerInputFormField } from "@/components/common";
 // hooks
 import { useInstance } from "@/hooks/store";
 // local components
@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+import { AdminLayout } from "@/layouts/admin-layout";
+
+interface EmailLayoutProps {
+  children: ReactNode;
+}
+
+export const metadata: Metadata = {
+  title: "Email Settings - Plane Web",
+};
+
+export default function EmailLayout({ children }: EmailLayoutProps) {
+  return <AdminLayout>{children}</AdminLayout>;
+}
@@ -0,0 +1,155 @@
+"use client";
+import { FC } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { Telescope } from "lucide-react";
+// types
+import { IInstance, IInstanceAdmin } from "@plane/types";
+// ui
+import { Button, Input, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
+// components
+import { ControllerInput } from "@/components/common";
+import { useInstance } from "@/hooks/store";
+import { IntercomConfig } from "./intercom";
+// hooks
+
+export interface IGeneralConfigurationForm {
+  instance: IInstance;
+  instanceAdmins: IInstanceAdmin[];
+}
+
+export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer((props) => {
+  const { instance, instanceAdmins } = props;
+  // hooks
+  const { instanceConfigurations, updateInstanceInfo, updateInstanceConfigurations } = useInstance();
+
+  // form data
+  const {
+    handleSubmit,
+    control,
+    watch,
+    formState: { errors, isSubmitting },
+  } = useForm<Partial<IInstance>>({
+    defaultValues: {
+      instance_name: instance?.instance_name,
+      is_telemetry_enabled: instance?.is_telemetry_enabled,
+    },
+  });
+
+  const onSubmit = async (formData: Partial<IInstance>) => {
+    const payload: Partial<IInstance> = { ...formData };
+
+    // update the intercom configuration
+    const isIntercomEnabled =
+      instanceConfigurations?.find((config) => config.key === "IS_INTERCOM_ENABLED")?.value === "1";
+    if (!payload.is_telemetry_enabled && isIntercomEnabled) {
+      try {
+        await updateInstanceConfigurations({ IS_INTERCOM_ENABLED: "0" });
+      } catch (error) {
+        console.error(error);
+      }
+    }
+
+    await updateInstanceInfo(payload)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="space-y-3">
+        <div className="text-lg font-medium">Instance details</div>
+        <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-8 md:grid-cols-2 lg:grid-cols-3">
+          <ControllerInput
+            key="instance_name"
+            name="instance_name"
+            control={control}
+            type="text"
+            label="Name of instance"
+            placeholder="Instance name"
+            error={Boolean(errors.instance_name)}
+            required
+          />
+
+          <div className="flex flex-col gap-1">
+            <h4 className="text-sm text-custom-text-300">Email</h4>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              value={instanceAdmins[0]?.user_detail?.email ?? ""}
+              placeholder="Admin email"
+              className="w-full cursor-not-allowed !text-custom-text-400"
+              autoComplete="on"
+              disabled
+            />
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <h4 className="text-sm text-custom-text-300">Instance ID</h4>
+            <Input
+              id="instance_id"
+              name="instance_id"
+              type="text"
+              value={instance.instance_id}
+              className="w-full cursor-not-allowed rounded-md font-medium !text-custom-text-400"
+              disabled
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        <div className="text-lg font-medium">Chat + telemetry</div>
+        <IntercomConfig isTelemetryEnabled={watch("is_telemetry_enabled") ?? false} />
+        <div className="flex items-center gap-14 px-4 py-3 border border-custom-border-200 rounded">
+          <div className="grow flex items-center gap-4">
+            <div className="shrink-0">
+              <div className="flex items-center justify-center w-10 h-10 bg-custom-background-80 rounded-full">
+                <Telescope className="w-6 h-6 text-custom-text-300/80 p-0.5" />
+              </div>
+            </div>
+            <div className="grow">
+              <div className="text-sm font-medium text-custom-text-100 leading-5">
+                Let Plane collect anonymous usage data
+              </div>
+              <div className="text-xs font-normal text-custom-text-300 leading-5">
+                No PII is collected.This anonymized data is used to understand how you use Plane and build new features
+                in line with{" "}
+                <a
+                  href="https://developers.plane.so/self-hosting/telemetry"
+                  target="_blank"
+                  className="text-custom-primary-100 hover:underline"
+                  rel="noreferrer"
+                >
+                  our Telemetry Policy.
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className={`shrink-0 ${isSubmitting && "opacity-70"}`}>
+            <Controller
+              control={control}
+              name="is_telemetry_enabled"
+              render={({ field: { value, onChange } }) => (
+                <ToggleSwitch value={value ?? false} onChange={onChange} size="sm" disabled={isSubmitting} />
+              )}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save changes"}
+        </Button>
+      </div>
+    </div>
+  );
+});
@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+import { AdminLayout } from "@/layouts/admin-layout";
+
+export const metadata: Metadata = {
+  title: "General Settings - Plane Web",
+};
+
+export default function GeneralLayout({ children }: { children: ReactNode }) {
+  return <AdminLayout>{children}</AdminLayout>;
+}
@@ -0,0 +1,432 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .text-1\.5xl {
+    font-size: 1.375rem;
+    line-height: 1.875rem;
+  }
+
+  .text-2\.5xl {
+    font-size: 1.75rem;
+    line-height: 2.25rem;
+  }
+}
+
+@layer base {
+  html {
+    font-family: "Inter", sans-serif;
+  }
+
+  :root {
+    color-scheme: light !important;
+
+    --color-primary-10: 236, 241, 255;
+    --color-primary-20: 217, 228, 255;
+    --color-primary-30: 197, 214, 255;
+    --color-primary-40: 178, 200, 255;
+    --color-primary-50: 159, 187, 255;
+    --color-primary-60: 140, 173, 255;
+    --color-primary-70: 121, 159, 255;
+    --color-primary-80: 101, 145, 255;
+    --color-primary-90: 82, 132, 255;
+    --color-primary-100: 63, 118, 255;
+    --color-primary-200: 57, 106, 230;
+    --color-primary-300: 50, 94, 204;
+    --color-primary-400: 44, 83, 179;
+    --color-primary-500: 38, 71, 153;
+    --color-primary-600: 32, 59, 128;
+    --color-primary-700: 25, 47, 102;
+    --color-primary-800: 19, 35, 76;
+    --color-primary-900: 13, 24, 51;
+
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 247, 247, 247; /* secondary bg */
+    --color-background-80: 232, 232, 232; /* tertiary bg */
+
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 58, 58, 58; /* secondary text */
+    --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-400: 163, 163, 163; /* placeholder text */
+
+    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
+      0px 1px 2px 0px rgba(23, 23, 23, 0.14);
+    --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 8px -1px rgba(16, 24, 40, 0.1);
+    --color-shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02),
+      0px 1px 12px 0px rgba(0, 0, 0, 0.12);
+    --color-shadow-rg: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
+      0px 1px 12px 0px rgba(16, 24, 40, 0.04);
+    --color-shadow-md: 0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 16px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-lg: 0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
+      0px 1px 24px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
+      0px 0px 52px 0px rgba(16, 24, 40, 0.16);
+    --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 32px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
+      0px 1px 48px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05);
+
+    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
+    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
+    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
+    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+
+    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
+
+    --color-sidebar-shadow-2xs: var(--color-shadow-2xs);
+    --color-sidebar-shadow-xs: var(--color-shadow-xs);
+    --color-sidebar-shadow-sm: var(--color-shadow-sm);
+    --color-sidebar-shadow-rg: var(--color-shadow-rg);
+    --color-sidebar-shadow-md: var(--color-shadow-md);
+    --color-sidebar-shadow-lg: var(--color-shadow-lg);
+    --color-sidebar-shadow-xl: var(--color-shadow-xl);
+    --color-sidebar-shadow-2xl: var(--color-shadow-2xl);
+    --color-sidebar-shadow-3xl: var(--color-shadow-3xl);
+    --color-sidebar-shadow-4xl: var(--color-shadow-4xl);
+  }
+
+  [data-theme="light"],
+  [data-theme="light-contrast"] {
+    color-scheme: light !important;
+
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 247, 247, 247; /* secondary bg */
+    --color-background-80: 232, 232, 232; /* tertiary bg */
+  }
+
+  [data-theme="light"] {
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 58, 58, 58; /* secondary text */
+    --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-400: 163, 163, 163; /* placeholder text */
+
+    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+
+    /* onboarding colors */
+    --gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%);
+    --gradient-onboarding-200: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
+    --gradient-onboarding-300: linear-gradient(164deg, #fff 4.25%, rgba(255, 255, 255, 0.06) 93.5%);
+    --gradient-onboarding-400: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
+
+    --color-onboarding-text-100: 23, 23, 23;
+    --color-onboarding-text-200: 58, 58, 58;
+    --color-onboarding-text-300: 82, 82, 82;
+    --color-onboarding-text-400: 163, 163, 163;
+
+    --color-onboarding-background-100: 236, 241, 255;
+    --color-onboarding-background-200: 255, 255, 255;
+    --color-onboarding-background-300: 236, 241, 255;
+    --color-onboarding-background-400: 177, 206, 250;
+
+    --color-onboarding-border-100: 229, 229, 229;
+    --color-onboarding-border-200: 217, 228, 255;
+    --color-onboarding-border-300: 229, 229, 229, 0.5;
+
+    --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1);
+
+    /* toast theme */
+    --color-toast-success-text: 62, 155, 79;
+    --color-toast-error-text: 220, 62, 66;
+    --color-toast-warning-text: 255, 186, 24;
+    --color-toast-info-text: 51, 88, 212;
+    --color-toast-loading-text: 28, 32, 36;
+    --color-toast-secondary-text: 128, 131, 141;
+    --color-toast-tertiary-text: 96, 100, 108;
+
+    --color-toast-success-background: 253, 253, 254;
+    --color-toast-error-background: 255, 252, 252;
+    --color-toast-warning-background: 254, 253, 251;
+    --color-toast-info-background: 253, 253, 254;
+    --color-toast-loading-background: 253, 253, 254;
+
+    --color-toast-success-border: 218, 241, 219;
+    --color-toast-error-border: 255, 219, 220;
+    --color-toast-warning-border: 255, 247, 194;
+    --color-toast-info-border: 210, 222, 255;
+    --color-toast-loading-border: 224, 225, 230;
+  }
+
+  [data-theme="light-contrast"] {
+    --color-text-100: 11, 11, 11; /* primary text */
+    --color-text-200: 38, 38, 38; /* secondary text */
+    --color-text-300: 58, 58, 58; /* tertiary text */
+    --color-text-400: 115, 115, 115; /* placeholder text */
+
+    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
+
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+  }
+
+  [data-theme="dark"],
+  [data-theme="dark-contrast"] {
+    color-scheme: dark !important;
+
+    --color-background-100: 25, 25, 25; /* primary bg */
+    --color-background-90: 32, 32, 32; /* secondary bg */
+    --color-background-80: 44, 44, 44; /* tertiary bg */
+
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
+    --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
+    --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
+    --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
+  }
+
+  [data-theme="dark"] {
+    --color-text-100: 229, 229, 229; /* primary text */
+    --color-text-200: 163, 163, 163; /* secondary text */
+    --color-text-300: 115, 115, 115; /* tertiary text */
+    --color-text-400: 82, 82, 82; /* placeholder text */
+
+    --color-scrollbar: 82, 82, 82; /* scrollbar thumb */
+
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+
+    /* onboarding colors */
+    --gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%);
+    --gradient-onboarding-200: linear-gradient(129deg, rgba(47, 49, 53, 0.8) -22.23%, rgba(33, 34, 37, 0.8) 62.98%);
+    --gradient-onboarding-300: linear-gradient(167deg, rgba(47, 49, 53, 0.45) 19.22%, #212225 98.48%);
+
+    --color-onboarding-text-100: 237, 238, 240;
+    --color-onboarding-text-200: 176, 180, 187;
+    --color-onboarding-text-300: 118, 123, 132;
+    --color-onboarding-text-400: 105, 110, 119;
+
+    --color-onboarding-background-100: 54, 58, 64;
+    --color-onboarding-background-200: 40, 42, 45;
+    --color-onboarding-background-300: 40, 42, 45;
+    --color-onboarding-background-400: 67, 72, 79;
+
+    --color-onboarding-border-100: 54, 58, 64;
+    --color-onboarding-border-200: 54, 58, 64;
+    --color-onboarding-border-300: 34, 35, 38, 0.5;
+
+    --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1);
+
+    /* toast theme */
+    --color-toast-success-text: 178, 221, 181;
+    --color-toast-error-text: 206, 44, 49;
+    --color-toast-warning-text: 255, 186, 24;
+    --color-toast-info-text: 141, 164, 239;
+    --color-toast-loading-text: 255, 255, 255;
+    --color-toast-secondary-text: 185, 187, 198;
+    --color-toast-tertiary-text: 139, 141, 152;
+
+    --color-toast-success-background: 46, 46, 46;
+    --color-toast-error-background: 46, 46, 46;
+    --color-toast-warning-background: 46, 46, 46;
+    --color-toast-info-background: 46, 46, 46;
+    --color-toast-loading-background: 46, 46, 46;
+
+    --color-toast-success-border: 42, 126, 59;
+    --color-toast-error-border: 100, 23, 35;
+    --color-toast-warning-border: 79, 52, 34;
+    --color-toast-info-border: 58, 91, 199;
+    --color-toast-loading-border: 96, 100, 108;
+  }
+
+  [data-theme="dark-contrast"] {
+    --color-text-100: 250, 250, 250; /* primary text */
+    --color-text-200: 241, 241, 241; /* secondary text */
+    --color-text-300: 212, 212, 212; /* tertiary text */
+    --color-text-400: 115, 115, 115; /* placeholder text */
+
+    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+  }
+
+  [data-theme="light"],
+  [data-theme="dark"],
+  [data-theme="light-contrast"],
+  [data-theme="dark-contrast"] {
+    --color-primary-10: 236, 241, 255;
+    --color-primary-20: 217, 228, 255;
+    --color-primary-30: 197, 214, 255;
+    --color-primary-40: 178, 200, 255;
+    --color-primary-50: 159, 187, 255;
+    --color-primary-60: 140, 173, 255;
+    --color-primary-70: 121, 159, 255;
+    --color-primary-80: 101, 145, 255;
+    --color-primary-90: 82, 132, 255;
+    --color-primary-100: 63, 118, 255;
+    --color-primary-200: 57, 106, 230;
+    --color-primary-300: 50, 94, 204;
+    --color-primary-400: 44, 83, 179;
+    --color-primary-500: 38, 71, 153;
+    --color-primary-600: 32, 59, 128;
+    --color-primary-700: 25, 47, 102;
+    --color-primary-800: 19, 35, 76;
+    --color-primary-900: 13, 24, 51;
+
+    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
+    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
+    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
+    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+
+    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
+  }
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  font-variant-ligatures: none;
+  -webkit-font-variant-ligatures: none;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  color: rgba(var(--color-text-100));
+}
+
+/* scrollbar style */
+@-moz-document url-prefix() {
+  * {
+    scrollbar-width: none;
+  }
+  .vertical-scrollbar,
+  .horizontal-scrollbar {
+    scrollbar-width: initial;
+    scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
+  }
+  .vertical-scrollbar:hover,
+  .horizontal-scrollbar:hover {
+    scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
+  }
+  .vertical-scrollbar:active,
+  .horizontal-scrollbar:active {
+    scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
+  }
+}
+
+.vertical-scrollbar {
+  overflow-y: auto;
+}
+.horizontal-scrollbar {
+  overflow-x: auto;
+}
+.vertical-scrollbar::-webkit-scrollbar,
+.horizontal-scrollbar::-webkit-scrollbar {
+  display: block;
+}
+.vertical-scrollbar::-webkit-scrollbar-track,
+.horizontal-scrollbar::-webkit-scrollbar-track {
+  background-color: transparent;
+  border-radius: 9999px;
+}
+.vertical-scrollbar::-webkit-scrollbar-thumb,
+.horizontal-scrollbar::-webkit-scrollbar-thumb {
+  background-clip: padding-box;
+  background-color: rgba(96, 100, 108, 0.1);
+  border-radius: 9999px;
+}
+.vertical-scrollbar:hover::-webkit-scrollbar-thumb,
+.horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(96, 100, 108, 0.25);
+}
+.vertical-scrollbar::-webkit-scrollbar-thumb:hover,
+.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(96, 100, 108, 0.5);
+}
+.vertical-scrollbar::-webkit-scrollbar-thumb:active,
+.horizontal-scrollbar::-webkit-scrollbar-thumb:active {
+  background-color: rgba(96, 100, 108, 0.7);
+}
+.vertical-scrollbar::-webkit-scrollbar-corner,
+.horizontal-scrollbar::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
+  margin-top: 44px;
+}
+
+/* scrollbar sm size */
+.scrollbar-sm::-webkit-scrollbar {
+  height: 12px;
+  width: 12px;
+}
+.scrollbar-sm::-webkit-scrollbar-thumb {
+  border: 3px solid rgba(0, 0, 0, 0);
+}
+/* scrollbar md size */
+.scrollbar-md::-webkit-scrollbar {
+  height: 14px;
+  width: 14px;
+}
+.scrollbar-md::-webkit-scrollbar-thumb {
+  border: 3px solid rgba(0, 0, 0, 0);
+}
+/* scrollbar lg size */
+
+.scrollbar-lg::-webkit-scrollbar {
+  height: 16px;
+  width: 16px;
+}
+.scrollbar-lg::-webkit-scrollbar-thumb {
+  border: 4px solid rgba(0, 0, 0, 0);
+}
+/* end scrollbar style */
+
+/* progress bar */
+.progress-bar {
+  fill: currentColor;
+  color: rgba(var(--color-sidebar-background-100));
+}
+
+::-webkit-input-placeholder,
+::placeholder,
+:-ms-input-placeholder {
+  color: rgb(var(--color-text-400));
+}
@@ -0,0 +1,80 @@
+"use client";
+import { FC } from "react";
+import { useForm } from "react-hook-form";
+import { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { ControllerInput } from "@/components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type IInstanceImageConfigForm = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type ImageConfigFormValues = Record<TInstanceImageConfigurationKeys, string>;
+
+export const InstanceImageConfigForm: FC<IInstanceImageConfigForm> = (props) => {
+  const { config } = props;
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<ImageConfigFormValues>({
+    defaultValues: {
+      UNSPLASH_ACCESS_KEY: config["UNSPLASH_ACCESS_KEY"],
+    },
+  });
+
+  const onSubmit = async (formData: ImageConfigFormValues) => {
+    const payload: Partial<ImageConfigFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "Image Configuration Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-16 gap-y-8 lg:grid-cols-2">
+        <ControllerInput
+          control={control}
+          type="password"
+          name="UNSPLASH_ACCESS_KEY"
+          label="Access key from your Unsplash account"
+          description={
+            <>
+              You will find your access key in your Unsplash developer console.&nbsp;
+              <a
+                href="https://unsplash.com/documentation#creating-a-developer-account"
+                target="_blank"
+                className="text-custom-primary-100 hover:underline"
+                rel="noreferrer"
+              >
+                Learn more.
+              </a>
+            </>
+          }
+          placeholder="oXgq-sdfadsaeweqasdfasdf3234234rassd"
+          error={Boolean(errors.UNSPLASH_ACCESS_KEY)}
+          required
+        />
+      </div>
+
+      <div>
+        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save changes"}
+        </Button>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+import { AdminLayout } from "@/layouts/admin-layout";
+
+interface ImageLayoutProps {
+  children: ReactNode;
+}
+
+export const metadata: Metadata = {
+  title: "Images Settings - Plane Web",
+};
+
+export default function ImageLayout({ children }: ImageLayoutProps) {
+  return <AdminLayout>{children}</AdminLayout>;
+}
@@ -0,0 +1,49 @@
+"use client";
+
+import { ReactNode } from "react";
+import { ThemeProvider, useTheme } from "next-themes";
+import { SWRConfig } from "swr";
+// ui
+import { ADMIN_BASE_PATH, DEFAULT_SWR_CONFIG } from "@plane/constants";
+import { Toast } from "@plane/ui";
+import { resolveGeneralTheme } from "@plane/utils";
+// constants
+// helpers
+// lib
+import { InstanceProvider } from "@/lib/instance-provider";
+import { StoreProvider } from "@/lib/store-provider";
+import { UserProvider } from "@/lib/user-provider";
+// styles
+import "./globals.css";
+
+const ToastWithTheme = () => {
+  const { resolvedTheme } = useTheme();
+  return <Toast theme={resolveGeneralTheme(resolvedTheme)} />;
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  const ASSET_PREFIX = ADMIN_BASE_PATH;
+  return (
+    <html lang="en">
+      <head>
+        <link rel="apple-touch-icon" sizes="180x180" href={`${ASSET_PREFIX}/favicon/apple-touch-icon.png`} />
+        <link rel="icon" type="image/png" sizes="32x32" href={`${ASSET_PREFIX}/favicon/favicon-32x32.png`} />
+        <link rel="icon" type="image/png" sizes="16x16" href={`${ASSET_PREFIX}/favicon/favicon-16x16.png`} />
+        <link rel="manifest" href={`${ASSET_PREFIX}/site.webmanifest.json`} />
+        <link rel="shortcut icon" href={`${ASSET_PREFIX}/favicon/favicon.ico`} />
+      </head>
+      <body className={`antialiased`}>
+        <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
+          <ToastWithTheme />
+          <SWRConfig value={DEFAULT_SWR_CONFIG}>
+            <StoreProvider>
+              <InstanceProvider>
+                <UserProvider>{children}</UserProvider>
+              </InstanceProvider>
+            </StoreProvider>
+          </SWRConfig>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,30 @@
+import { Metadata } from "next";
+// components
+import { InstanceSignInForm } from "@/components/login";
+// layouts
+import { DefaultLayout } from "@/layouts/default-layout";
+
+export const metadata: Metadata = {
+  title: "Plane | Simple, extensible, open-source project management tool.",
+  description:
+    "Open-source project management tool to manage work items, sprints, and product roadmaps with peace of mind.",
+  openGraph: {
+    title: "Plane | Simple, extensible, open-source project management tool.",
+    description:
+      "Open-source project management tool to manage work items, sprints, and product roadmaps with peace of mind.",
+    url: "https://plane.so/",
+  },
+  keywords:
+    "software development, customer feedback, software, accelerate, code management, release management, project management, work items tracking, agile, scrum, kanban, collaboration",
+  twitter: {
+    site: "@planepowers",
+  },
+};
+
+export default async function LoginPage() {
+  return (
+    <DefaultLayout>
+      <InstanceSignInForm />
+    </DefaultLayout>
+  );
+}
@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+// layouts
+import { AdminLayout } from "@/layouts/admin-layout";
+
+export const metadata: Metadata = {
+  title: "Workspace Management - Plane Web",
+};
+
+export default function WorkspaceManagementLayout({ children }: { children: ReactNode }) {
+  return <AdminLayout>{children}</AdminLayout>;
+}
@@ -0,0 +1,167 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import useSWR from "swr";
+import { Loader as LoaderIcon } from "lucide-react";
+// types
+import { TInstanceConfigurationKeys } from "@plane/types";
+import { Button, getButtonStyling, Loader, setPromiseToast, ToggleSwitch } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { WorkspaceListItem } from "@/components/workspace";
+// hooks
+import { useInstance, useWorkspace } from "@/hooks/store";
+
+const WorkspaceManagementPage = observer(() => {
+  // states
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  // store
+  const { formattedConfig, fetchInstanceConfigurations, updateInstanceConfigurations } = useInstance();
+  const {
+    workspaceIds,
+    loader: workspaceLoader,
+    paginationInfo,
+    fetchWorkspaces,
+    fetchNextWorkspaces,
+  } = useWorkspace();
+  // derived values
+  const disableWorkspaceCreation = formattedConfig?.DISABLE_WORKSPACE_CREATION ?? "";
+  const hasNextPage = paginationInfo?.next_page_results && paginationInfo?.next_cursor !== undefined;
+
+  // fetch data
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+  useSWR("INSTANCE_WORKSPACES", () => fetchWorkspaces());
+
+  const updateConfig = async (key: TInstanceConfigurationKeys, value: string) => {
+    setIsSubmitting(true);
+
+    const payload = {
+      [key]: value,
+    };
+
+    const updateConfigPromise = updateInstanceConfigurations(payload);
+
+    setPromiseToast(updateConfigPromise, {
+      loading: "Saving configuration",
+      success: {
+        title: "Success",
+        message: () => "Configuration saved successfully",
+      },
+      error: {
+        title: "Error",
+        message: () => "Failed to save configuration",
+      },
+    });
+
+    await updateConfigPromise
+      .then(() => {
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmitting(false);
+      });
+  };
+
+  return (
+    <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+      <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="flex flex-col gap-1">
+          <div className="text-xl font-medium text-custom-text-100">Workspaces on this instance</div>
+          <div className="text-sm font-normal text-custom-text-300">
+            See all workspaces and control who can create them.
+          </div>
+        </div>
+      </div>
+      <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+        <div className="space-y-3">
+          {formattedConfig ? (
+            <div className={cn("w-full flex items-center gap-14 rounded")}>
+              <div className="flex grow items-center gap-4">
+                <div className="grow">
+                  <div className="text-lg font-medium pb-1">Prevent anyone else from creating a workspace.</div>
+                  <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
+                    Toggling this on will let only you create workspaces. You will have to invite users to new
+                    workspaces.
+                  </div>
+                </div>
+              </div>
+              <div className={`shrink-0 pr-4 ${isSubmitting && "opacity-70"}`}>
+                <div className="flex items-center gap-4">
+                  <ToggleSwitch
+                    value={Boolean(parseInt(disableWorkspaceCreation))}
+                    onChange={() => {
+                      if (Boolean(parseInt(disableWorkspaceCreation)) === true) {
+                        updateConfig("DISABLE_WORKSPACE_CREATION", "0");
+                      } else {
+                        updateConfig("DISABLE_WORKSPACE_CREATION", "1");
+                      }
+                    }}
+                    size="sm"
+                    disabled={isSubmitting}
+                  />
+                </div>
+              </div>
+            </div>
+          ) : (
+            <Loader>
+              <Loader.Item height="50px" width="100%" />
+            </Loader>
+          )}
+          {workspaceLoader !== "init-loader" ? (
+            <>
+              <div className="pt-6 flex items-center justify-between gap-2">
+                <div className="flex flex-col items-start gap-x-2">
+                  <div className="flex items-center gap-2 text-lg font-medium">
+                    All workspaces on this instance{" "}
+                    <span className="text-custom-text-300">• {workspaceIds.length}</span>
+                    {workspaceLoader && ["mutation", "pagination"].includes(workspaceLoader) && (
+                      <LoaderIcon className="w-4 h-4 animate-spin" />
+                    )}
+                  </div>
+                  <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
+                    You can&apos;t yet delete workspaces and you can only go to the workspace if you are an Admin or a
+                    Member.
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Link href="/workspace/create" className={getButtonStyling("primary", "sm")}>
+                    Create workspace
+                  </Link>
+                </div>
+              </div>
+              <div className="flex flex-col gap-4 py-2">
+                {workspaceIds.map((workspaceId) => (
+                  <WorkspaceListItem key={workspaceId} workspaceId={workspaceId} />
+                ))}
+              </div>
+              {hasNextPage && (
+                <div className="flex justify-center">
+                  <Button
+                    variant="link-primary"
+                    onClick={() => fetchNextWorkspaces()}
+                    disabled={workspaceLoader === "pagination"}
+                  >
+                    Load more
+                    {workspaceLoader === "pagination" && <LoaderIcon className="w-3 h-3 animate-spin" />}
+                  </Button>
+                </div>
+              )}
+            </>
+          ) : (
+            <Loader className="space-y-10 py-8">
+              <Loader.Item height="24px" width="20%" />
+              <Loader.Item height="92px" width="100%" />
+              <Loader.Item height="92px" width="100%" />
+              <Loader.Item height="92px" width="100%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default WorkspaceManagementPage;
@@ -0,0 +1,70 @@
+import { observer } from "mobx-react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// types
+import {
+  TGetBaseAuthenticationModeProps,
+  TInstanceAuthenticationMethodKeys,
+  TInstanceAuthenticationModes,
+} from "@plane/types";
+// components
+import { AuthenticationMethodCard } from "@/components/authentication";
+// helpers
+import { getBaseAuthenticationModes } from "@/lib/auth-helpers";
+// plane admin components
+import { UpgradeButton } from "@/plane-admin/components/common";
+// images
+import OIDCLogo from "@/public/logos/oidc-logo.svg";
+import SAMLLogo from "@/public/logos/saml-logo.svg";
+
+export type TAuthenticationModeProps = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+// Authentication methods
+export const getAuthenticationModes: (props: TGetBaseAuthenticationModeProps) => TInstanceAuthenticationModes[] = ({
+  disabled,
+  updateConfig,
+  resolvedTheme,
+}) => [
+  ...getBaseAuthenticationModes({ disabled, updateConfig, resolvedTheme }),
+  {
+    key: "oidc",
+    name: "OIDC",
+    description: "Authenticate your users via the OpenID Connect protocol.",
+    icon: <Image src={OIDCLogo} height={22} width={22} alt="OIDC Logo" />,
+    config: <UpgradeButton />,
+    unavailable: true,
+  },
+  {
+    key: "saml",
+    name: "SAML",
+    description: "Authenticate your users via the Security Assertion Markup Language protocol.",
+    icon: <Image src={SAMLLogo} height={22} width={22} alt="SAML Logo" className="pl-0.5" />,
+    config: <UpgradeButton />,
+    unavailable: true,
+  },
+];
+
+export const AuthenticationModes: React.FC<TAuthenticationModeProps> = observer((props) => {
+  const { disabled, updateConfig } = props;
+  // next-themes
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <>
+      {getAuthenticationModes({ disabled, updateConfig, resolvedTheme }).map((method) => (
+        <AuthenticationMethodCard
+          key={method.key}
+          name={method.name}
+          description={method.description}
+          icon={method.icon}
+          config={method.config}
+          disabled={disabled}
+          unavailable={method.unavailable}
+        />
+      ))}
+    </>
+  );
+});
@@ -0,0 +1,139 @@
+"use client";
+
+import { FC, useState, useRef } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
+import { Transition } from "@headlessui/react";
+// plane internal packages
+import { WEB_BASE_URL } from "@plane/constants";
+import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useTheme } from "@/hooks/store";
+// assets
+// eslint-disable-next-line import/order
+import packageJson from "package.json";
+
+const helpOptions = [
+  {
+    name: "Documentation",
+    href: "https://docs.plane.so/",
+    Icon: FileText,
+  },
+  {
+    name: "Join our Discord",
+    href: "https://discord.com/invite/A92xrEGCge",
+    Icon: DiscordIcon,
+  },
+  {
+    name: "Report a bug",
+    href: "https://github.com/makeplane/plane/issues/new/choose",
+    Icon: GithubIcon,
+  },
+];
+
+export const HelpSection: FC = observer(() => {
+  // states
+  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
+  // store
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+  // refs
+  const helpOptionsRef = useRef<HTMLDivElement | null>(null);
+
+  const redirectionLink = encodeURI(WEB_BASE_URL + "/");
+
+  return (
+    <div
+      className={cn(
+        "flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 h-14 flex-shrink-0",
+        {
+          "flex-col h-auto py-1.5": isSidebarCollapsed,
+        }
+      )}
+    >
+      <div className={`flex items-center gap-1 ${isSidebarCollapsed ? "flex-col justify-center" : "w-full"}`}>
+        <Tooltip tooltipContent="Redirect to Plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>
+          <a
+            href={redirectionLink}
+            className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded border border-custom-primary-100/20 bg-custom-primary-100/10 text-xs text-custom-primary-200 whitespace-nowrap`}
+          >
+            <ExternalLink size={14} />
+            {!isSidebarCollapsed && "Redirect to Plane"}
+          </a>
+        </Tooltip>
+        <Tooltip tooltipContent="Help" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
+          <button
+            type="button"
+            className={`ml-auto grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
+              isSidebarCollapsed ? "w-full" : ""
+            }`}
+            onClick={() => setIsNeedHelpOpen((prev) => !prev)}
+          >
+            <HelpCircle className="h-3.5 w-3.5" />
+          </button>
+        </Tooltip>
+        <Tooltip tooltipContent="Toggle sidebar" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
+          <button
+            type="button"
+            className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
+              isSidebarCollapsed ? "w-full" : ""
+            }`}
+            onClick={() => toggleSidebar(!isSidebarCollapsed)}
+          >
+            <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
+          </button>
+        </Tooltip>
+      </div>
+
+      <div className="relative">
+        <Transition
+          show={isNeedHelpOpen}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <div
+            className={`absolute bottom-2 min-w-[10rem] z-[15] ${
+              isSidebarCollapsed ? "left-full" : "-left-[75px]"
+            } divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
+            ref={helpOptionsRef}
+          >
+            <div className="space-y-1 pb-2">
+              {helpOptions.map(({ name, Icon, href }) => {
+                if (href)
+                  return (
+                    <Link href={href} key={name} target="_blank">
+                      <div className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80">
+                        <div className="grid flex-shrink-0 place-items-center">
+                          <Icon className="h-3.5 w-3.5 text-custom-text-200" size={14} />
+                        </div>
+                        <span className="text-xs">{name}</span>
+                      </div>
+                    </Link>
+                  );
+                else
+                  return (
+                    <button
+                      key={name}
+                      type="button"
+                      className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
+                    >
+                      <div className="grid flex-shrink-0 place-items-center">
+                        <Icon className="h-3.5 w-3.5 text-custom-text-200" />
+                      </div>
+                      <span className="text-xs">{name}</span>
+                    </button>
+                  );
+              })}
+            </div>
+            <div className="px-2 pb-1 pt-2 text-[10px]">Version: v{packageJson.version}</div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+  );
+});
@@ -0,0 +1,5 @@
+export * from "./root";
+export * from "./help-section";
+export * from "./sidebar-menu";
+export * from "./sidebar-dropdown";
+export * from "./sidebar-menu-hamburger-toogle";
@@ -0,0 +1,56 @@
+"use client";
+
+import { FC, useEffect, useRef } from "react";
+import { observer } from "mobx-react";
+// plane helpers
+import { useOutsideClickDetector } from "@plane/hooks";
+// components
+import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";
+// hooks
+import { useTheme } from "@/hooks/store";
+
+export const InstanceSidebar: FC = observer(() => {
+  // store
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOutsideClickDetector(ref, () => {
+    if (isSidebarCollapsed === false) {
+      if (window.innerWidth < 768) {
+        toggleSidebar(!isSidebarCollapsed);
+      }
+    }
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth <= 768) {
+        toggleSidebar(true);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [toggleSidebar]);
+
+  return (
+    <div
+      className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300
+        fixed md:relative
+        ${isSidebarCollapsed ? "-ml-[290px]" : ""}
+        sm:${isSidebarCollapsed ? "-ml-[290px]" : ""}
+        md:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"}
+        lg:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"}
+      `}
+    >
+      <div ref={ref} className="flex h-full w-full flex-1 flex-col">
+        <SidebarDropdown />
+        <SidebarMenu />
+        <HelpSection />
+      </div>
+    </div>
+  );
+});
@@ -16,7 +16,7 @@ import { useTheme, useUser } from "@/hooks/store";
 // service initialization
 const authService = new AuthService();

-export const AdminSidebarDropdown = observer(() => {
+export const SidebarDropdown = observer(() => {
  // store hooks
  const { isSidebarCollapsed } = useTheme();
  const { currentUser, signOut } = useUser();
@@ -0,0 +1,20 @@
+"use client";
+
+import { FC } from "react";
+import { observer } from "mobx-react";
+// hooks
+import { Menu } from "lucide-react";
+import { useTheme } from "@/hooks/store";
+// icons
+
+export const SidebarHamburgerToggle: FC = observer(() => {
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+  return (
+    <div
+      className="w-7 h-7 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
+      onClick={() => toggleSidebar(!isSidebarCollapsed)}
+    >
+      <Menu size={14} className="text-custom-text-200 group-hover:text-custom-text-100 transition-all" />
+    </div>
+  );
+});
@@ -49,7 +49,7 @@ const INSTANCE_ADMIN_LINKS = [
  },
 ];

-export const AdminSidebarMenu = observer(() => {
+export const SidebarMenu = observer(() => {
  // store hooks
  const { isSidebarCollapsed, toggleSidebar } = useTheme();
  // router
@@ -0,0 +1,96 @@
+"use client";
+
+import { FC } from "react";
+import { observer } from "mobx-react";
+import { usePathname } from "next/navigation";
+// mobx
+// ui
+import { Settings } from "lucide-react";
+// icons
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { SidebarHamburgerToggle } from "@/components/admin-sidebar";
+import { BreadcrumbLink } from "@/components/common";
+
+export const InstanceHeader: FC = observer(() => {
+  const pathName = usePathname();
+
+  const getHeaderTitle = (pathName: string) => {
+    switch (pathName) {
+      case "general":
+        return "General";
+      case "ai":
+        return "Artificial Intelligence";
+      case "email":
+        return "Email";
+      case "authentication":
+        return "Authentication";
+      case "image":
+        return "Image";
+      case "google":
+        return "Google";
+      case "github":
+        return "GitHub";
+      case "gitlab":
+        return "GitLab";
+      case "workspace":
+        return "Workspace";
+      case "create":
+        return "Create";
+      default:
+        return pathName.toUpperCase();
+    }
+  };
+
+  // Function to dynamically generate breadcrumb items based on pathname
+  const generateBreadcrumbItems = (pathname: string) => {
+    const pathSegments = pathname.split("/").slice(1); // removing the first empty string.
+    pathSegments.pop();
+
+    let currentUrl = "";
+    const breadcrumbItems = pathSegments.map((segment) => {
+      currentUrl += "/" + segment;
+      return {
+        title: getHeaderTitle(segment),
+        href: currentUrl,
+      };
+    });
+    return breadcrumbItems;
+  };
+
+  const breadcrumbItems = generateBreadcrumbItems(pathName);
+
+  return (
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-sidebar-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+        <SidebarHamburgerToggle />
+        {breadcrumbItems.length >= 0 && (
+          <div>
+            <Breadcrumbs>
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                link={
+                  <BreadcrumbLink
+                    href="/general/"
+                    label="Settings"
+                    icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+                  />
+                }
+              />
+              {breadcrumbItems.map(
+                (item) =>
+                  item.title && (
+                    <Breadcrumbs.BreadcrumbItem
+                      key={item.title}
+                      type="text"
+                      link={<BreadcrumbLink href={item.href} label={item.title} />}
+                    />
+                  )
+              )}
+            </Breadcrumbs>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
@@ -0,0 +1,29 @@
+import { FC } from "react";
+import { Info, X } from "lucide-react";
+// plane constants
+import { TAuthErrorInfo } from "@plane/constants";
+
+type TAuthBanner = {
+  bannerData: TAuthErrorInfo | undefined;
+  handleBannerData?: (bannerData: TAuthErrorInfo | undefined) => void;
+};
+
+export const AuthBanner: FC<TAuthBanner> = (props) => {
+  const { bannerData, handleBannerData } = props;
+
+  if (!bannerData) return <></>;
+  return (
+    <div className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10">
+      <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
+        <Info size={16} className="text-custom-primary-100" />
+      </div>
+      <div className="w-full text-sm font-medium text-custom-primary-100">{bannerData?.message}</div>
+      <div
+        className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
+        onClick={() => handleBannerData && handleBannerData(undefined)}
+      >
+        <X className="w-4 h-4 flex-shrink-0" />
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,7 @@
+export * from "./auth-banner";
+export * from "./email-config-switch";
+export * from "./password-config-switch";
+export * from "./authentication-method-card";
+export * from "./gitlab-config";
+export * from "./github-config";
+export * from "./google-config";
@@ -0,0 +1,10 @@
+export * from "./breadcrumb-link";
+export * from "./confirm-discard-modal";
+export * from "./controller-input";
+export * from "./copy-field";
+export * from "./password-strength-meter";
+export * from "./banner";
+export * from "./empty-state";
+export * from "./logo-spinner";
+export * from "./page-header";
+export * from "./code-block";
@@ -0,0 +1,3 @@
+export * from "./instance-not-ready";
+export * from "./instance-failure-view";
+export * from "./setup-form";
@@ -10,8 +10,7 @@ import { AuthService } from "@plane/services";
 import { Button, Checkbox, Input, Spinner } from "@plane/ui";
 import { getPasswordStrength } from "@plane/utils";
 // components
-import { Banner } from "@/components/common/banner";
-import { PasswordStrengthMeter } from "@/components/common/password-strength-meter";
+import { Banner, PasswordStrengthMeter } from "@/components/common";

 // service initialization
 const authService = new AuthService();
@@ -0,0 +1 @@
+export * from "./sign-in-form";
@@ -0,0 +1,194 @@
+"use client";
+
+import { FC, useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { Eye, EyeOff } from "lucide-react";
+// plane internal packages
+import { API_BASE_URL, EAdminAuthErrorCodes, TAuthErrorInfo } from "@plane/constants";
+import { AuthService } from "@plane/services";
+import { Button, Input, Spinner } from "@plane/ui";
+// components
+import { Banner } from "@/components/common";
+// helpers
+import { authErrorHandler } from "@/lib/auth-helpers";
+// local components
+import { AuthBanner } from "../authentication";
+
+// service initialization
+const authService = new AuthService();
+
+// error codes
+enum EErrorCodes {
+  INSTANCE_NOT_CONFIGURED = "INSTANCE_NOT_CONFIGURED",
+  REQUIRED_EMAIL_PASSWORD = "REQUIRED_EMAIL_PASSWORD",
+  INVALID_EMAIL = "INVALID_EMAIL",
+  USER_DOES_NOT_EXIST = "USER_DOES_NOT_EXIST",
+  AUTHENTICATION_FAILED = "AUTHENTICATION_FAILED",
+}
+
+type TError = {
+  type: EErrorCodes | undefined;
+  message: string | undefined;
+};
+
+// form data
+type TFormData = {
+  email: string;
+  password: string;
+};
+
+const defaultFromData: TFormData = {
+  email: "",
+  password: "",
+};
+
+export const InstanceSignInForm: FC = (props) => {
+  const {} = props;
+  // search params
+  const searchParams = useSearchParams();
+  const emailParam = searchParams.get("email") || undefined;
+  const errorCode = searchParams.get("error_code") || undefined;
+  const errorMessage = searchParams.get("error_message") || undefined;
+  // state
+  const [showPassword, setShowPassword] = useState(false);
+  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
+  const [formData, setFormData] = useState<TFormData>(defaultFromData);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
+
+  const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
+    setFormData((prev) => ({ ...prev, [key]: value }));
+
+  useEffect(() => {
+    if (csrfToken === undefined)
+      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
+  }, [csrfToken]);
+
+  useEffect(() => {
+    if (emailParam) setFormData((prev) => ({ ...prev, email: emailParam }));
+  }, [emailParam]);
+
+  // derived values
+  const errorData: TError = useMemo(() => {
+    if (errorCode && errorMessage) {
+      switch (errorCode) {
+        case EErrorCodes.INSTANCE_NOT_CONFIGURED:
+          return { type: EErrorCodes.INVALID_EMAIL, message: errorMessage };
+        case EErrorCodes.REQUIRED_EMAIL_PASSWORD:
+          return { type: EErrorCodes.REQUIRED_EMAIL_PASSWORD, message: errorMessage };
+        case EErrorCodes.INVALID_EMAIL:
+          return { type: EErrorCodes.INVALID_EMAIL, message: errorMessage };
+        case EErrorCodes.USER_DOES_NOT_EXIST:
+          return { type: EErrorCodes.USER_DOES_NOT_EXIST, message: errorMessage };
+        case EErrorCodes.AUTHENTICATION_FAILED:
+          return { type: EErrorCodes.AUTHENTICATION_FAILED, message: errorMessage };
+        default:
+          return { type: undefined, message: undefined };
+      }
+    } else return { type: undefined, message: undefined };
+  }, [errorCode, errorMessage]);
+
+  const isButtonDisabled = useMemo(
+    () => (!isSubmitting && formData.email && formData.password ? false : true),
+    [formData.email, formData.password, isSubmitting]
+  );
+
+  useEffect(() => {
+    if (errorCode) {
+      const errorDetail = authErrorHandler(errorCode?.toString() as EAdminAuthErrorCodes);
+      if (errorDetail) {
+        setErrorInfo(errorDetail);
+      }
+    }
+  }, [errorCode]);
+
+  return (
+    <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 lg:pt-28 transition-all">
+      <div className="relative flex flex-col space-y-6">
+        <div className="text-center space-y-1">
+          <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
+            Manage your Plane instance
+          </h3>
+          <p className="font-medium text-onboarding-text-400">
+            Configure instance-wide settings to secure your instance
+          </p>
+        </div>
+
+        {errorData.type && errorData?.message ? (
+          <Banner type="error" message={errorData?.message} />
+        ) : (
+          <>{errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}</>
+        )}
+
+        <form
+          className="space-y-4"
+          method="POST"
+          action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
+          onSubmit={() => setIsSubmitting(true)}
+          onError={() => setIsSubmitting(false)}
+        >
+          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+
+          <div className="w-full space-y-1">
+            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
+              Email <span className="text-red-500">*</span>
+            </label>
+            <Input
+              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+              id="email"
+              name="email"
+              type="email"
+              inputSize="md"
+              placeholder="name@company.com"
+              value={formData.email}
+              onChange={(e) => handleFormChange("email", e.target.value)}
+              autoComplete="on"
+              autoFocus
+            />
+          </div>
+
+          <div className="w-full space-y-1">
+            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
+              Password <span className="text-red-500">*</span>
+            </label>
+            <div className="relative">
+              <Input
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+                id="password"
+                name="password"
+                type={showPassword ? "text" : "password"}
+                inputSize="md"
+                placeholder="Enter your password"
+                value={formData.password}
+                onChange={(e) => handleFormChange("password", e.target.value)}
+                autoComplete="on"
+              />
+              {showPassword ? (
+                <button
+                  type="button"
+                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                  onClick={() => setShowPassword(false)}
+                >
+                  <EyeOff className="h-4 w-4" />
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                  onClick={() => setShowPassword(true)}
+                >
+                  <Eye className="h-4 w-4" />
+                </button>
+              )}
+            </div>
+          </div>
+          <div className="py-2">
+            <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
+              {isSubmitting ? <Spinner height="20px" width="20px" /> : "Sign in"}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export * from "./list-item";
@@ -1,6 +1,6 @@
 import { useContext } from "react";
 // store
-import { StoreContext } from "@/app/(all)/store.provider";
+import { StoreContext } from "@/lib/store-provider";
 import { IInstanceStore } from "@/store/instance.store";

 export const useInstance = (): IInstanceStore => {
@@ -1,6 +1,6 @@
 import { useContext } from "react";
 // store
-import { StoreContext } from "@/app/(all)/store.provider";
+import { StoreContext } from "@/lib/store-provider";
 import { IThemeStore } from "@/store/theme.store";

 export const useTheme = (): IThemeStore => {
@@ -1,6 +1,6 @@
 import { useContext } from "react";
 // store
-import { StoreContext } from "@/app/(all)/store.provider";
+import { StoreContext } from "@/lib/store-provider";
 import { IUserStore } from "@/store/user.store";

 export const useUser = (): IUserStore => {
@@ -1,6 +1,6 @@
 import { useContext } from "react";
 // store
-import { StoreContext } from "@/app/(all)/store.provider";
+import { StoreContext } from "@/lib/store-provider";
 import { IWorkspaceStore } from "@/store/workspace.store";

 export const useWorkspace = (): IWorkspaceStore => {
@@ -0,0 +1,48 @@
+"use client";
+import { FC, ReactNode, useEffect } from "react";
+import { observer } from "mobx-react";
+import { useRouter } from "next/navigation";
+// components
+import { InstanceSidebar } from "@/components/admin-sidebar";
+import { InstanceHeader } from "@/components/auth-header";
+import { LogoSpinner } from "@/components/common";
+import { NewUserPopup } from "@/components/new-user-popup";
+// hooks
+import { useUser } from "@/hooks/store";
+
+type TAdminLayout = {
+  children: ReactNode;
+};
+
+export const AdminLayout: FC<TAdminLayout> = observer((props) => {
+  const { children } = props;
+  // router
+  const router = useRouter();
+  // store hooks
+  const { isUserLoggedIn } = useUser();
+
+  useEffect(() => {
+    if (isUserLoggedIn === false) {
+      router.push("/");
+    }
+  }, [router, isUserLoggedIn]);
+
+  if (isUserLoggedIn === undefined) {
+    return (
+      <div className="relative flex h-screen w-full items-center justify-center">
+        <LogoSpinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative flex h-screen w-screen overflow-hidden">
+      <InstanceSidebar />
+      <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+        <InstanceHeader />
+        <div className="h-full w-full overflow-hidden">{children}</div>
+      </main>
+      <NewUserPopup />
+    </div>
+  );
+});
@@ -0,0 +1,45 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { useTheme } from "next-themes";
+// logo/ images
+import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
+import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
+import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.png";
+import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.png";
+
+type TDefaultLayout = {
+  children: ReactNode;
+  withoutBackground?: boolean;
+};
+
+export const DefaultLayout: FC<TDefaultLayout> = (props) => {
+  const { children, withoutBackground = false } = props;
+  // hooks
+  const { resolvedTheme } = useTheme();
+  const patternBackground = resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern;
+
+  const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
+
+  return (
+    <div className="relative">
+      <div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
+        <div className="container h-[110px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
+          <div className="flex items-center gap-x-2 py-10">
+            <Link href={`/`} className="h-[30px] w-[133px]">
+              <Image src={logo} alt="Plane logo" />
+            </Link>
+          </div>
+        </div>
+        {!withoutBackground && (
+          <div className="absolute inset-0 z-0">
+            <Image src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
+          </div>
+        )}
+        <div className="relative z-10 flex-grow">{children}</div>
+      </div>
+    </div>
+  );
+};
@@ -3,15 +3,17 @@ import Image from "next/image";
 import Link from "next/link";
 import { KeyRound, Mails } from "lucide-react";
 // plane packages
-import { SUPPORT_EMAIL, EAdminAuthErrorCodes, TAdminAuthErrorInfo } from "@plane/constants";
+import { SUPPORT_EMAIL, EAdminAuthErrorCodes, TAuthErrorInfo } from "@plane/constants";
 import { TGetBaseAuthenticationModeProps, TInstanceAuthenticationModes } from "@plane/types";
 import { resolveGeneralTheme } from "@plane/utils";
 // components
-import { EmailCodesConfiguration } from "@/components/authentication/email-config-switch";
-import { GithubConfiguration } from "@/components/authentication/github-config";
-import { GitlabConfiguration } from "@/components/authentication/gitlab-config";
-import { GoogleConfiguration } from "@/components/authentication/google-config";
-import { PasswordLoginConfiguration } from "@/components/authentication/password-config-switch";
+import {
+  EmailCodesConfiguration,
+  GithubConfiguration,
+  GitlabConfiguration,
+  GoogleConfiguration,
+  PasswordLoginConfiguration,
+} from "@/components/authentication";
 // images
 import githubLightModeImage from "@/public/logos/github-black.png";
 import githubDarkModeImage from "@/public/logos/github-white.png";
@@ -87,7 +89,7 @@ const errorCodeMessages: {
 export const authErrorHandler = (
  errorCode: EAdminAuthErrorCodes,
  email?: string | undefined
-): TAdminAuthErrorInfo | undefined => {
+): TAuthErrorInfo | undefined => {
  const bannerAlertErrorCodes = [
    EAdminAuthErrorCodes.ADMIN_ALREADY_EXIST,
    EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME,
@@ -0,0 +1,55 @@
+import { FC, ReactNode } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// components
+import { LogoSpinner } from "@/components/common";
+import { InstanceSetupForm, InstanceFailureView } from "@/components/instance";
+// hooks
+import { useInstance } from "@/hooks/store";
+// layout
+import { DefaultLayout } from "@/layouts/default-layout";
+
+type InstanceProviderProps = {
+  children: ReactNode;
+};
+
+export const InstanceProvider: FC<InstanceProviderProps> = observer((props) => {
+  const { children } = props;
+  // store hooks
+  const { instance, error, fetchInstanceInfo } = useInstance();
+  // fetching instance details
+  useSWR("INSTANCE_DETAILS", () => fetchInstanceInfo(), {
+    revalidateOnFocus: false,
+    revalidateIfStale: false,
+    errorRetryCount: 0,
+  });
+
+  if (!instance && !error)
+    return (
+      <div className="flex h-screen min-h-[500px] w-full justify-center items-center">
+        <LogoSpinner />
+      </div>
+    );
+
+  if (error) {
+    return (
+      <DefaultLayout>
+        <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
+          <InstanceFailureView />
+        </div>
+      </DefaultLayout>
+    );
+  }
+
+  if (!instance?.is_setup_done) {
+    return (
+      <DefaultLayout>
+        <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
+          <InstanceSetupForm />
+        </div>
+      </DefaultLayout>
+    );
+  }
+
+  return <>{children}</>;
+});
@@ -0,0 +1,31 @@
+"use client";
+
+import { FC, ReactNode, useEffect } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// hooks
+import { useInstance, useTheme, useUser } from "@/hooks/store";
+
+interface IUserProvider {
+  children: ReactNode;
+}
+
+export const UserProvider: FC<IUserProvider> = observer(({ children }) => {
+  // hooks
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+  const { currentUser, fetchCurrentUser } = useUser();
+  const { fetchInstanceAdmins } = useInstance();
+
+  useSWR("CURRENT_USER", () => fetchCurrentUser(), {
+    shouldRetryOnError: false,
+  });
+  useSWR("INSTANCE_ADMINS", () => fetchInstanceAdmins());
+
+  useEffect(() => {
+    const localValue = localStorage && localStorage.getItem("god_mode_sidebar_collapsed");
+    const localBoolValue = localValue ? (localValue === "true" ? true : false) : false;
+    if (isSidebarCollapsed === undefined && localBoolValue != isSidebarCollapsed) toggleSidebar(localBoolValue);
+  }, [isSidebarCollapsed, currentUser, toggleSidebar]);
+
+  return <>{children}</>;
+});
@@ -100,7 +100,7 @@ export class InstanceStore implements IInstanceStore {
      if (this.instance === undefined && !instanceInfo?.instance?.workspaces_exist)
        this.store.theme.toggleNewUserPopup();
      runInAction(() => {
-        // console.log("instanceInfo: ", instanceInfo);
+        console.log("instanceInfo: ", instanceInfo);
        this.isLoading = false;
        this.instance = instanceInfo.instance;
        this.config = instanceInfo.config;
--- a/Show More
+++ b/Show More