fix: sidebar toggle button

2025-07-30 16:17:09 +05:30
3410 changed files with 89591 additions and 132451 deletions
@@ -1,7 +0,0 @@
-[codespell]
-# Ref: https://github.com/codespell-project/codespell#using-a-config-file
-skip = .git*,*.svg,i18n,*-lock.yaml,*.css,.codespellrc,migrations,*.js,*.map,*.mjs
-check-hidden = true
-# ignore all CamelCase and camelCase
-ignore-regex = \b[A-Za-z][a-z]+[A-Z][a-zA-Z]+\b
-ignore-words-list = tread
@@ -16,54 +16,3 @@ out/
 **/out/
 dist/
 **/dist/
-# Logs
-npm-debug.log*
-pnpm-debug.log*
-.pnpm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# OS junk
-.DS_Store
-Thumbs.db
-
-# Editor settings
-.vscode
-.idea
-
-# Coverage and test output
-coverage/
-**/coverage/
-*.lcov
-.junit/
-test-results/
-
-# Caches and build artifacts
-.cache/
-**/.cache/
-storybook-static/
-*storybook.log
-*.tsbuildinfo
-
-# Local env and secrets
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-.secrets
-tmp/
-temp/
-
-# Database/cache dumps
-*.rdb
-*.rdb.gz
-
-# Misc
-*.pem
-*.key
-
-# React Router - https://github.com/remix-run/react-router-templates/blob/dc79b1a065f59f3bfd840d4ef75cc27689b611e6/default/.dockerignore
-.react-router/
-build/
-node_modules/
-README.md
@@ -35,10 +35,6 @@ on:
      - preview
      - canary

-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
 env:
  TARGET_BRANCH: ${{ github.ref_name }}
  ARM64_BUILD: ${{ github.event.inputs.arm64 }}
@@ -272,14 +268,15 @@ jobs:
    if: ${{ needs.branch_build_setup.outputs.aio_build == 'true' }}
    name: Build-Push AIO Docker Image
    runs-on: ubuntu-22.04
-    needs:
-      - branch_build_setup
-      - branch_build_push_admin
-      - branch_build_push_web
-      - branch_build_push_space
-      - branch_build_push_live
-      - branch_build_push_api
-      - branch_build_push_proxy
+    needs: [
+        branch_build_setup,
+        branch_build_push_admin,
+        branch_build_push_web,
+        branch_build_push_space,
+        branch_build_push_live,
+        branch_build_push_api,
+        branch_build_push_proxy
+      ]
    steps:
      - name: Checkout Files
        uses: actions/checkout@v4
@@ -288,7 +285,7 @@ jobs:
        id: prepare_aio_assets
        run: |
          cd deployments/aio/community
-
+          
          if [ "${{ needs.branch_build_setup.outputs.build_type }}" == "Release" ]; then
            aio_version=${{ needs.branch_build_setup.outputs.release_version }}
          else
@@ -327,14 +324,7 @@ jobs:
  upload_build_assets:
    name: Upload Build Assets
    runs-on: ubuntu-22.04
-    needs:
-      - branch_build_setup
-      - branch_build_push_admin
-      - branch_build_push_web
-      - branch_build_push_space
-      - branch_build_push_live
-      - branch_build_push_api
-      - branch_build_push_proxy
+    needs: [branch_build_setup, branch_build_push_admin, branch_build_push_web, branch_build_push_space, branch_build_push_live, branch_build_push_api, branch_build_push_proxy]
    steps:
      - name: Checkout Files
        uses: actions/checkout@v4
@@ -407,3 +397,4 @@ jobs:
            ${{ github.workspace }}/deployments/cli/community/docker-compose.yml
            ${{ github.workspace }}/deployments/cli/community/variables.env
            ${{ github.workspace }}/deployments/swarm/community/swarm.sh
+
@@ -17,6 +17,8 @@ jobs:

      - name: Setup Node.js
        uses: actions/setup-node@v4
+        with:
+          node-version: '18'

      - name: Get PR Branch version
        run: echo "PR_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_ENV
@@ -3,9 +3,11 @@ name: "CodeQL"
 on:
  workflow_dispatch:
  push:
-    branches: ["preview", "canary", "master"]
+    branches: ["preview", "master"]
  pull_request:
-    branches: ["preview", "canary", "master"]
+    branches: ["develop", "preview", "master"]
+  schedule:
+    - cron: "53 19 * * 5"

 jobs:
  analyze:
@@ -1,25 +0,0 @@
-# Codespell configuration is within .codespellrc
---
-name: Codespell
-
-on:
-  push:
-    branches: [preview]
-  pull_request:
-    branches: [preview]
-
-permissions:
-  contents: read
-
-jobs:
-  codespell:
-    name: Check for spelling errors
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Annotate locations with typos
-        uses: codespell-project/codespell-problem-matcher@v1
-      - name: Codespell
-        uses: codespell-project/actions-codespell@v2
@@ -3,21 +3,11 @@ name: Build and lint API
 on:
  workflow_dispatch:
  pull_request:
-    branches:
-      - "preview"
-    types:
-      - "opened"
-      - "synchronize"
-      - "ready_for_review"
-      - "review_requested"
-      - "reopened"
+    branches: ["preview"]
+    types: ["opened", "synchronize", "ready_for_review", "review_requested", "reopened"]
    paths:
      - "apps/api/**"

-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
 jobs:
  lint-api:
    name: Lint API
@@ -3,18 +3,14 @@ name: Build and lint web apps
 on:
  workflow_dispatch:
  pull_request:
-    branches:
-      - "preview"
-    types:
-      - "opened"
-      - "synchronize"
-      - "ready_for_review"
-      - "review_requested"
-      - "reopened"
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
+    branches: ["preview"]
+    types: ["opened", "synchronize", "ready_for_review", "review_requested", "reopened"]
+    paths:
+      - "**.tsx?"
+      - "**.jsx?"
+      - "**.css"
+      - "**.json"
+      - "!apps/api/**"

 jobs:
  build-and-lint:
@@ -24,30 +20,24 @@ jobs:
    if: |
      github.event.pull_request.draft == false &&
      github.event.pull_request.requested_reviewers != null
-    env:
-      TURBO_SCM_BASE: ${{ github.event.pull_request.base.sha }}
-      TURBO_SCM_HEAD: ${{ github.sha }}
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
-          fetch-depth: 50
-          filter: blob:none
+          fetch-depth: 2

      - name: Set up Node.js
        uses: actions/setup-node@v4
-
-      - name: Enable Corepack and pnpm
-        run: corepack enable pnpm
+        with:
+          node-version-file: ".nvmrc"

      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: yarn install --frozen-lockfile

-      - name: Lint Affected
-        run: pnpm turbo run check:lint --affected
+      - name: Build web apps
+        run: yarn run build
+
+      - name: Lint web apps
+        run: yarn run ci:lint

-      - name: Check Affected format
-        run: pnpm turbo run check:format --affected

-      - name: Build Affected
-        run: pnpm turbo run build --affected
@@ -16,22 +16,19 @@ node_modules
 /out/

 # Production
+/build
 dist/
 out/
-build/
-.react-router/

 # Misc
 .DS_Store
 *.pem
 .history
-tsconfig.tsbuildinfo

 # Debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
 .pnpm-debug.log*

 # Local env files
@@ -63,7 +60,6 @@ node_modules/
 assets/dist/
 npm-debug.log
 yarn-error.log
-pnpm-debug.log

 # Editor directories and files
 .idea
@@ -79,9 +75,10 @@ package-lock.json

 # lock files
 package-lock.json
+pnpm-lock.yaml
+pnpm-workspace.yaml

-
-
+.npmrc
 .secrets
 tmp/

@@ -98,7 +95,3 @@ dev-editor
 # Redis
 *.rdb
 *.rdb.gz
-
-storybook-static
-
-CLAUDE.md
@@ -1,2 +0,0 @@
-[tools]
-node = "22.18.0"
@@ -1,34 +0,0 @@
-# Enforce pnpm workspace behavior and allow Turbo's lifecycle hooks if scripts are disabled
-# This repo uses pnpm with workspaces.
-
-# Prefer linking local workspace packages when available
-prefer-workspace-packages=true
-link-workspace-packages=true
-shared-workspace-lockfile=true
-
-# Make peer installs smoother across the monorepo
-auto-install-peers=true
-strict-peer-dependencies=false
-
-# If scripts are disabled (e.g., CI with --ignore-scripts), allowlisted packages can still run their hooks
-# Turbo occasionally performs postinstall tasks for optimal performance
-# moved to pnpm-workspace.yaml: onlyBuiltDependencies (e.g., allow turbo)
-
-public-hoist-pattern[]=*eslint*
-public-hoist-pattern[]=prettier
-public-hoist-pattern[]=typescript
-
-# Reproducible installs across CI and dev
-prefer-frozen-lockfile=true
-
-# Prefer resolving to highest versions in monorepo to reduce duplication
-resolution-mode=highest
-
-# Speed up native module builds by caching side effects
-side-effects-cache=true
-
-# Speed up local dev by reusing local store when possible
-prefer-offline=true
-
-# Ensure workspace protocol is used when adding internal deps
-save-workspace-protocol=true
@@ -0,0 +1 @@
+lts/jod
@@ -0,0 +1 @@
+nodeLinker: node-modules
@@ -73,7 +73,7 @@ docker compose -f docker-compose-local.yml up
 4. Start web apps:

 ```bash
-pnpm dev
+yarn dev
 ```

 5. Open your browser to http://localhost:3001/god-mode/ and register yourself as instance admin
@@ -2,10 +2,11 @@

 <p align="center">
 <a href="https://plane.so">
-  <img src="https://media.docs.plane.so/logo/plane_github_readme.png" alt="Plane Logo" width="400">
+  <img src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_logo_.webp" alt="Plane Logo" width="70">
 </a>
 </p>
-<p align="center"><b>Modern project management for all teams</b></p>
+<h1 align="center"><b>Plane</b></h1>
+<p align="center"><b>Open-source project management that unlocks customer value</b></p>

 <p align="center">
 <a href="https://discord.com/invite/A92xrEGCge">
@@ -24,7 +25,14 @@
 <p>
    <a href="https://app.plane.so/#gh-light-mode-only" target="_blank">
      <img
-        src="https://media.docs.plane.so/GitHub-readme/github-top.webp"
+        src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_screen.webp"
+        alt="Plane Screens"
+        width="100%"
+      />
+    </a>
+    <a href="https://app.plane.so/#gh-dark-mode-only" target="_blank">
+      <img
+        src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_screens_dark_mode.webp"
        alt="Plane Screens"
        width="100%"
      />
@@ -40,13 +48,13 @@ Meet [Plane](https://plane.so/), an open-source project management tool to track
 Getting started with Plane is simple. Choose the setup that works best for you:

 - **Plane Cloud**
-  Sign up for a free account on [Plane Cloud](https://app.plane.so)—it's the fastest way to get up and running without worrying about infrastructure.
+Sign up for a free account on [Plane Cloud](https://app.plane.so)—it's the fastest way to get up and running without worrying about infrastructure.

 - **Self-host Plane**
-  Prefer full control over your data and infrastructure? Install and run Plane on your own servers. Follow our detailed [deployment guides](https://developers.plane.so/self-hosting/overview) to get started.
+Prefer full control over your data and infrastructure? Install and run Plane on your own servers. Follow our detailed [deployment guides](https://developers.plane.so/self-hosting/overview) to get started.

-| Installation methods | Docs link                                                                                                                                                                               |
-| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Installation methods | Docs link                                                                                                                                          |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Docker               | [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://developers.plane.so/self-hosting/methods/docker-compose)         |
 | Kubernetes           | [![Kubernetes](https://img.shields.io/badge/kubernetes-%23326ce5.svg?style=for-the-badge&logo=kubernetes&logoColor=white)](https://developers.plane.so/self-hosting/methods/kubernetes) |

@@ -55,50 +63,50 @@ Getting started with Plane is simple. Choose the setup that works best for you:
 ## 🌟 Features

 - **Issues**
-  Efficiently create and manage tasks with a robust rich text editor that supports file uploads. Enhance organization and tracking by adding sub-properties and referencing related issues.
+Efficiently create and manage tasks with a robust rich text editor that supports file uploads. Enhance organization and tracking by adding sub-properties and referencing related issues.

 - **Cycles**
-  Maintain your team’s momentum with Cycles. Track progress effortlessly using burn-down charts and other insightful tools.
+Maintain your team’s momentum with Cycles. Track progress effortlessly using burn-down charts and other insightful tools.

 - **Modules**
-  Simplify complex projects by dividing them into smaller, manageable modules.
+Simplify complex projects by dividing them into smaller, manageable modules.

 - **Views**
-  Customize your workflow by creating filters to display only the most relevant issues. Save and share these views with ease.
+Customize your workflow by creating filters to display only the most relevant issues. Save and share these views with ease.

 - **Pages**
-  Capture and organize ideas using Plane Pages, complete with AI capabilities and a rich text editor. Format text, insert images, add hyperlinks, or convert your notes into actionable items.
+Capture and organize ideas using Plane Pages, complete with AI capabilities and a rich text editor. Format text, insert images, add hyperlinks, or convert your notes into actionable items.

 - **Analytics**
-  Access real-time insights across all your Plane data. Visualize trends, remove blockers, and keep your projects moving forward.
+Access real-time insights across all your Plane data. Visualize trends, remove blockers, and keep your projects moving forward.

 - **Drive** (_coming soon_): The drive helps you share documents, images, videos, or any other files that make sense to you or your team and align on the problem/solution.

+
 ## 🛠️ Local development

 See [CONTRIBUTING](./CONTRIBUTING.md)

 ## ⚙️ Built with
-
 [![Next JS](https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white)](https://nextjs.org/)
 [![Django](https://img.shields.io/badge/Django-092E20?style=for-the-badge&logo=django&logoColor=green)](https://www.djangoproject.com/)
 [![Node JS](https://img.shields.io/badge/node.js-339933?style=for-the-badge&logo=Node.js&logoColor=white)](https://nodejs.org/en)

 ## 📸 Screenshots

-  <p>
+<p>
    <a href="https://plane.so" target="_blank">
      <img
-        src="https://media.docs.plane.so/GitHub-readme/github-work-items.webp"
+        src="https://ik.imagekit.io/w2okwbtu2/Issues_rNZjrGgFl.png?updatedAt=1709298765880"
        alt="Plane Views"
        width="100%"
      />
    </a>
  </p>
-  <p>
+<p>
    <a href="https://plane.so" target="_blank">
      <img
-        src="https://media.docs.plane.so/GitHub-readme/github-cycles.webp"
+        src="https://ik.imagekit.io/w2okwbtu2/Cycles_jCDhqmTl9.png?updatedAt=1709298780697"
        width="100%"
      />
    </a>
@@ -106,7 +114,7 @@ See [CONTRIBUTING](./CONTRIBUTING.md)
  <p>
    <a href="https://plane.so" target="_blank">
      <img
-        src="https://media.docs.plane.so/GitHub-readme/github-modules.webp"
+        src="https://ik.imagekit.io/w2okwbtu2/Modules_PSCVsbSfI.png?updatedAt=1709298796783"
        alt="Plane Cycles and Modules"
        width="100%"
      />
@@ -115,7 +123,7 @@ See [CONTRIBUTING](./CONTRIBUTING.md)
  <p>
    <a href="https://plane.so" target="_blank">
      <img
-        src="https://media.docs.plane.so/GitHub-readme/github-views.webp"
+        src="https://ik.imagekit.io/w2okwbtu2/Views_uxXsRatS4.png?updatedAt=1709298834522"
        alt="Plane Analytics"
        width="100%"
      />
@@ -124,16 +132,25 @@ See [CONTRIBUTING](./CONTRIBUTING.md)
   <p>
    <a href="https://plane.so" target="_blank">
      <img
-        src="https://media.docs.plane.so/GitHub-readme/github-analytics.webp"
+        src="https://ik.imagekit.io/w2okwbtu2/Analytics_0o22gLRtp.png?updatedAt=1709298834389"
        alt="Plane Pages"
        width="100%"
      />
    </a>
  </p>
 </p>
+<p>
+    <a href="https://plane.so" target="_blank">
+      <img
+        src="https://ik.imagekit.io/w2okwbtu2/Drive_LlfeY4xn3.png?updatedAt=1709298837917"
+        alt="Plane Command Menu"
+        width="100%"
+      />
+    </a>
+  </p>
+</p>

 ## 📝 Documentation
-
 Explore Plane's [product documentation](https://docs.plane.so/) and [developer documentation](https://developers.plane.so/) to learn about features, setup, and usage.

 ## ❤️ Community
@@ -169,6 +186,6 @@ Please read [CONTRIBUTING.md](https://github.com/makeplane/plane/blob/master/CON
  <img src="https://contrib.rocks/image?repo=makeplane/plane" />
 </a>

-## License

+## License
 This project is licensed under the [GNU Affero General Public License v3.0](https://github.com/makeplane/plane/blob/master/LICENSE.txt).
@@ -1,12 +0,0 @@
-.next/*
-out/*
-public/*
-dist/*
-node_modules/*
-.turbo/*
-.env*
-.env
-.env.local
-.env.development
-.env.production
-.env.test
@@ -1,18 +1,5 @@
 module.exports = {
  root: true,
  extends: ["@plane/eslint-config/next.js"],
-  rules: {
-    "no-duplicate-imports": "off",
-    "import/no-duplicates": ["error", { "prefer-inline": false }],
-    "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
-    "@typescript-eslint/no-import-type-side-effects": "error",
-    "@typescript-eslint/consistent-type-imports": [
-      "error",
-      {
-        prefer: "type-imports",
-        fixStyle: "separate-type-imports",
-        disallowTypeAnnotations: false,
-      },
-    ],
-  },
+  parser: "@typescript-eslint/parser",
 };
@@ -2,5 +2,5 @@
 .vercel
 .tubro
 out/
-dist/
-build/
+dis/
+build/
@@ -1,11 +1,5 @@
-# syntax=docker/dockerfile:1.7
 FROM node:22-alpine AS base

-# Setup pnpm package manager with corepack and configure global bin directory for caching
-ENV PNPM_HOME="/pnpm"
-ENV PATH="$PNPM_HOME:$PATH"
-RUN corepack enable
-
 # *****************************************************************************
 # STAGE 1: Build the project
 # *****************************************************************************
@@ -13,8 +7,7 @@ FROM base AS builder
 RUN apk add --no-cache libc6-compat
 WORKDIR /app

-ARG TURBO_VERSION=2.5.6
-RUN corepack enable pnpm && pnpm add -g turbo@${TURBO_VERSION}
+RUN yarn global add turbo
 COPY . .

 RUN turbo prune --scope=admin --docker
@@ -29,13 +22,11 @@ WORKDIR /app

 COPY .gitignore .gitignore
 COPY --from=builder /app/out/json/ .
-COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
-RUN corepack enable pnpm
-RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm fetch --store-dir=/pnpm/store
+COPY --from=builder /app/out/yarn.lock ./yarn.lock
+RUN yarn install --network-timeout 500000

 COPY --from=builder /app/out/full/ .
 COPY turbo.json turbo.json
-RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm install --offline --frozen-lockfile --store-dir=/pnpm/store

 ARG NEXT_PUBLIC_API_BASE_URL=""
 ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
@@ -58,7 +49,7 @@ ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
 ENV NEXT_TELEMETRY_DISABLED=1
 ENV TURBO_TELEMETRY_DISABLED=1

-RUN pnpm turbo run build --filter=admin
+RUN yarn turbo run build --filter=admin

 # *****************************************************************************
 # STAGE 3: Copy the project and start it
@@ -100,4 +91,4 @@ ENV TURBO_TELEMETRY_DISABLED=1

 EXPOSE 3000

-CMD ["node", "apps/admin/server.js"]
+CMD ["node", "apps/admin/server.js"]
@@ -5,8 +5,8 @@ WORKDIR /app

 COPY . .

-RUN corepack enable pnpm && pnpm add -g turbo
-RUN pnpm install
+RUN yarn global add turbo
+RUN yarn install

 ENV NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"

@@ -14,4 +14,4 @@ EXPOSE 3000

 VOLUME [ "/app/node_modules", "/app/admin/node_modules" ]

-CMD ["pnpm", "dev", "--filter=admin"]
+CMD ["yarn", "dev", "--filter=admin"]
@@ -1,13 +1,11 @@
 "use client";
-import type { FC } from "react";
+import { FC } from "react";
 import { useForm } from "react-hook-form";
 import { Lightbulb } from "lucide-react";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types";
+import { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import type { TControllerInputFormField } from "@/components/common/controller-input";
-import { ControllerInput } from "@/components/common/controller-input";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
 // hooks
 import { useInstance } from "@/hooks/store";

@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
+import { ReactNode } from "react";
+import { Metadata } from "next";

 export const metadata: Metadata = {
  title: "Artificial Intelligence Settings - God Mode",
@@ -1,25 +1,19 @@
 "use client";

-import type { FC } from "react";
-import { useState } from "react";
-import { isEmpty } from "lodash-es";
+import { FC, useState } from "react";
+import isEmpty from "lodash/isEmpty";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
-import { Monitor } from "lucide-react";
 // plane internal packages
 import { API_BASE_URL } from "@plane/constants";
-import { Button, getButtonStyling } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
-
+import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
 import { CodeBlock } from "@/components/common/code-block";
 import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
-import type { TControllerInputFormField } from "@/components/common/controller-input";
-import { ControllerInput } from "@/components/common/controller-input";
-import type { TCopyField } from "@/components/common/copy-field";
-import { CopyField } from "@/components/common/copy-field";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
+import { CopyField, TCopyField } from "@/components/common/copy-field";
 // hooks
 import { useInstance } from "@/hooks/store";

@@ -107,7 +101,7 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
    },
  ];

-  const GITHUB_COMMON_SERVICE_DETAILS: TCopyField[] = [
+  const GITHUB_SERVICE_FIELD: TCopyField[] = [
    {
      key: "Origin_URL",
      label: "Origin URL",
@@ -127,9 +121,6 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
        </>
      ),
    },
-  ];
-
-  const GITHUB_SERVICE_DETAILS: TCopyField[] = [
    {
      key: "Callback_URI",
      label: "Callback URI",
@@ -217,29 +208,12 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
              </div>
            </div>
          </div>
-          <div className="col-span-2 md:col-span-1 flex flex-col gap-y-6">
-            <div className="pt-2 text-xl font-medium">Plane-provided details for GitHub</div>
-
-            <div className="flex flex-col gap-y-4">
-              {/* common service details */}
-              <div className="flex flex-col gap-y-4 px-6 py-4 bg-custom-background-80 rounded-lg">
-                {GITHUB_COMMON_SERVICE_DETAILS.map((field) => (
-                  <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-                ))}
-              </div>
-
-              {/* web service details */}
-              <div className="flex flex-col rounded-lg overflow-hidden">
-                <div className="px-6 py-3 bg-custom-background-80/60 font-medium text-xs uppercase flex items-center gap-x-3 text-custom-text-200">
-                  <Monitor className="w-3 h-3" />
-                  Web
-                </div>
-                <div className="px-6 py-4 flex flex-col gap-y-4 bg-custom-background-80">
-                  {GITHUB_SERVICE_DETAILS.map((field) => (
-                    <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-                  ))}
-                </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>
@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
+import { ReactNode } from "react";
+import { Metadata } from "next";

 export const metadata: Metadata = {
  title: "GitHub Authentication - God Mode",
@@ -6,8 +6,7 @@ import Image from "next/image";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
 // plane internal packages
-import { setPromiseToast } from "@plane/propel/toast";
-import { Loader, ToggleSwitch } from "@plane/ui";
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 import { resolveGeneralTheme } from "@plane/utils";
 // components
 import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
@@ -1,21 +1,17 @@
-import type { FC } from "react";
-import { useState } from "react";
-import { isEmpty } from "lodash-es";
+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 { Button, getButtonStyling } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigurationKeys } from "@plane/types";
+import { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
 import { CodeBlock } from "@/components/common/code-block";
 import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
-import type { TControllerInputFormField } from "@/components/common/controller-input";
-import { ControllerInput } from "@/components/common/controller-input";
-import type { TCopyField } from "@/components/common/copy-field";
-import { CopyField } from "@/components/common/copy-field";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
+import { CopyField, TCopyField } from "@/components/common/copy-field";
 // hooks
 import { useInstance } from "@/hooks/store";

@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
+import { ReactNode } from "react";
+import { Metadata } from "next";

 export const metadata: Metadata = {
  title: "GitLab Authentication - God Mode",
@@ -4,8 +4,7 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
 import useSWR from "swr";
-import { setPromiseToast } from "@plane/propel/toast";
-import { Loader, ToggleSwitch } from "@plane/ui";
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
 import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
 // hooks
@@ -1,23 +1,18 @@
 "use client";
-import type { FC } from "react";
-import { useState } from "react";
-import { isEmpty } from "lodash-es";
+import { FC, useState } from "react";
+import isEmpty from "lodash/isEmpty";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
-import { Monitor } from "lucide-react";
 // plane internal packages
 import { API_BASE_URL } from "@plane/constants";
-import { Button, getButtonStyling } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
+import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
 import { CodeBlock } from "@/components/common/code-block";
 import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
-import type { TControllerInputFormField } from "@/components/common/controller-input";
-import { ControllerInput } from "@/components/common/controller-input";
-import type { TCopyField } from "@/components/common/copy-field";
-import { CopyField } from "@/components/common/copy-field";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
+import { CopyField, TCopyField } from "@/components/common/copy-field";
 // hooks
 import { useInstance } from "@/hooks/store";

@@ -95,7 +90,7 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
    },
  ];

-  const GOOGLE_COMMON_SERVICE_DETAILS: TCopyField[] = [
+  const GOOGLE_SERVICE_DETAILS: TCopyField[] = [
    {
      key: "Origin_URL",
      label: "Origin URL",
@@ -115,9 +110,6 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
        </p>
      ),
    },
-  ];
-
-  const GOOGLE_SERVICE_DETAILS: TCopyField[] = [
    {
      key: "Callback_URI",
      label: "Callback URI",
@@ -203,29 +195,12 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
              </div>
            </div>
          </div>
-          <div className="col-span-2 md:col-span-1 flex flex-col gap-y-6">
-            <div className="pt-2 text-xl font-medium">Plane-provided details for Google</div>
-
-            <div className="flex flex-col gap-y-4">
-              {/* common service details */}
-              <div className="flex flex-col gap-y-4 px-6 py-4 bg-custom-background-80 rounded-lg">
-                {GOOGLE_COMMON_SERVICE_DETAILS.map((field) => (
-                  <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-                ))}
-              </div>
-
-              {/* web service details */}
-              <div className="flex flex-col rounded-lg overflow-hidden">
-                <div className="px-6 py-3 bg-custom-background-80/60 font-medium text-xs uppercase flex items-center gap-x-3 text-custom-text-200">
-                  <Monitor className="w-3 h-3" />
-                  Web
-                </div>
-                <div className="px-6 py-4 flex flex-col gap-y-4 bg-custom-background-80">
-                  {GOOGLE_SERVICE_DETAILS.map((field) => (
-                    <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-                  ))}
-                </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>
@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
+import { ReactNode } from "react";
+import { Metadata } from "next";

 export const metadata: Metadata = {
  title: "Google Authentication - God Mode",
@@ -4,8 +4,7 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
 import useSWR from "swr";
-import { setPromiseToast } from "@plane/propel/toast";
-import { Loader, ToggleSwitch } from "@plane/ui";
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
 import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
 // hooks
@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
+import { ReactNode } from "react";
+import { Metadata } from "next";

 export const metadata: Metadata = {
  title: "Authentication Settings - Plane Web",
@@ -4,9 +4,8 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // plane internal packages
-import { setPromiseToast } from "@plane/propel/toast";
-import type { TInstanceConfigurationKeys } from "@plane/types";
-import { Loader, ToggleSwitch } from "@plane/ui";
+import { TInstanceConfigurationKeys } from "@plane/types";
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
 import { useInstance } from "@/hooks/store";
@@ -1,17 +1,13 @@
 "use client";

-import type { FC } from "react";
-import React, { useMemo, useState } from "react";
+import React, { FC, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 // types
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from "@plane/types";
+import { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from "@plane/types";
 // ui
-import { CustomSelect } from "@plane/ui";
+import { Button, CustomSelect, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import type { TControllerInputFormField } from "@/components/common/controller-input";
-import { ControllerInput } from "@/components/common/controller-input";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
 // hooks
 import { useInstance } from "@/hooks/store";
 // local components
@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
+import { ReactNode } from "react";
+import { Metadata } from "next";

 interface EmailLayoutProps {
  children: ReactNode;
@@ -3,14 +3,13 @@
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { Loader, ToggleSwitch } from "@plane/ui";
+import { Loader, setToast, TOAST_TYPE, ToggleSwitch } from "@plane/ui";
 // hooks
 import { useInstance } from "@/hooks/store";
 // components
 import { InstanceEmailForm } from "./email-config-form";

-const InstanceEmailPage: React.FC = observer(() => {
+const InstanceEmailPage = observer(() => {
  // store
  const { fetchInstanceConfigurations, formattedConfig, disableEmail } = useInstance();

@@ -30,7 +29,7 @@ const InstanceEmailPage: React.FC = observer(() => {
          message: "Email feature has been disabled",
          type: TOAST_TYPE.SUCCESS,
        });
-      } catch (_error) {
+      } catch (error) {
        setToast({
          title: "Error disabling email",
          message: "Failed to disable email feature. Please try again.",
@@ -1,11 +1,9 @@
-import type { FC } from "react";
-import React, { useEffect, useState } from "react";
+import React, { FC, useEffect, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 // plane imports
-import { Button } from "@plane/propel/button";
 import { InstanceService } from "@plane/services";
 // ui
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";

 type Props = {
  isOpen: boolean;
@@ -1,14 +1,12 @@
 "use client";
-import type { FC } from "react";
+import { FC } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { Telescope } from "lucide-react";
 // types
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IInstance, IInstanceAdmin } from "@plane/types";
+import { IInstance, IInstanceAdmin } from "@plane/types";
 // ui
-import { Input, ToggleSwitch } from "@plane/ui";
+import { Button, Input, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
 // components
 import { ControllerInput } from "@/components/common/controller-input";
 import { useInstance } from "@/hooks/store";
@@ -1,11 +1,10 @@
 "use client";

-import type { FC } from "react";
-import { useState } from "react";
+import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import { MessageSquare } from "lucide-react";
-import type { IFormattedInstanceConfiguration } from "@plane/types";
+import { IFormattedInstanceConfiguration } from "@plane/types";
 import { ToggleSwitch } from "@plane/ui";
 // hooks
 import { useInstance } from "@/hooks/store";
@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
+import { ReactNode } from "react";
+import { Metadata } from "next";

 export const metadata: Metadata = {
  title: "General Settings - God Mode",
@@ -1,6 +1,6 @@
 "use client";

-import type { FC } from "react";
+import { FC } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 import { Menu, Settings } from "lucide-react";
@@ -1,9 +1,8 @@
 "use client";
-import type { FC } from "react";
+import { FC } from "react";
 import { useForm } from "react-hook-form";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
+import { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { ControllerInput } from "@/components/common/controller-input";
 // hooks
@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
+import { ReactNode } from "react";
+import { Metadata } from "next";

 interface ImageLayoutProps {
  children: ReactNode;
@@ -1,7 +1,6 @@
 "use client";

-import type { FC, ReactNode } from "react";
-import { useEffect } from "react";
+import { FC, ReactNode, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
 // components
@@ -42,7 +42,7 @@ export const AdminSidebarDropdown = observer(() => {
      )}
    >
      <div className="flex flex-col gap-2.5 pb-2">
-        <span className="px-2 text-custom-sidebar-text-200 truncate">{currentUser?.email}</span>
+        <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
      </div>
      <div className="py-2">
        <Menu.Item
@@ -1,15 +1,13 @@
 "use client";

-import type { FC } from "react";
-import { useState, useRef } from "react";
+import { FC, useState, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { ExternalLink, HelpCircle, MoveLeft } from "lucide-react";
+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, PageIcon } from "@plane/propel/icons";
-import { Tooltip } from "@plane/propel/tooltip";
+import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
 import { useTheme } from "@/hooks/store";
@@ -21,7 +19,7 @@ const helpOptions = [
  {
    name: "Documentation",
    href: "https://docs.plane.so/",
-    Icon: PageIcon,
+    Icon: FileText,
  },
  {
    name: "Join our Discord",
@@ -111,7 +109,7 @@ export const AdminSidebarHelpSection: FC = observer(() => {
                    <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" width={14} height={14} />
+                          <Icon className="h-3.5 w-3.5 text-custom-text-200" size={14} />
                        </div>
                        <span className="text-xs">{name}</span>
                      </div>
@@ -5,8 +5,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
 // plane internal packages
-import { WorkspaceIcon } from "@plane/propel/icons";
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip, WorkspaceIcon } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
 import { useTheme } from "@/hooks/store";
@@ -1,7 +1,6 @@
 "use client";

-import type { FC } from "react";
-import { useEffect, useRef } from "react";
+import { FC, useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
@@ -4,12 +4,10 @@ import { useRouter } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { WEB_BASE_URL, ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
-import { Button, getButtonStyling } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { InstanceWorkspaceService } from "@plane/services";
-import type { IWorkspace } from "@plane/types";
+import { IWorkspace } from "@plane/types";
 // components
-import { CustomSelect, Input } from "@plane/ui";
+import { Button, CustomSelect, getButtonStyling, Input, setToast, TOAST_TYPE } from "@plane/ui";
 // hooks
 import { useWorkspace } from "@/hooks/store";

@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
+import { ReactNode } from "react";
+import { Metadata } from "next";

 export const metadata: Metadata = {
  title: "Workspace Management - God Mode",
@@ -6,11 +6,8 @@ import Link from "next/link";
 import useSWR from "swr";
 import { Loader as LoaderIcon } from "lucide-react";
 // types
-import { Button, getButtonStyling } from "@plane/propel/button";
-import { setPromiseToast } from "@plane/propel/toast";
-import type { TInstanceConfigurationKeys } from "@plane/types";
-import { Loader, ToggleSwitch } from "@plane/ui";
-
+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/list-item";
@@ -1,7 +1,7 @@
-import type { FC } from "react";
+import { FC } from "react";
 import { Info, X } from "lucide-react";
 // plane constants
-import type { TAdminAuthErrorInfo } from "@plane/constants";
+import { TAdminAuthErrorInfo } from "@plane/constants";

 type TAuthBanner = {
  bannerData: TAdminAuthErrorInfo | undefined;
@@ -1,12 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { PlaneLockup } from "@plane/propel/icons";
-
-export const AuthHeader = () => (
-  <div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
-    <Link href="/">
-      <PlaneLockup height={20} width={95} className="text-custom-text-100" />
-    </Link>
-  </div>
-);
@@ -1,11 +1,10 @@
-import type { ReactNode } from "react";
+import { ReactNode } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { KeyRound, Mails } from "lucide-react";
 // plane packages
-import type { TAdminAuthErrorInfo } from "@plane/constants";
-import { SUPPORT_EMAIL, EAdminAuthErrorCodes } from "@plane/constants";
-import type { TGetBaseAuthenticationModeProps, TInstanceAuthenticationModes } from "@plane/types";
+import { SUPPORT_EMAIL, EAdminAuthErrorCodes, TAdminAuthErrorInfo } from "@plane/constants";
+import { TGetBaseAuthenticationModeProps, TInstanceAuthenticationModes } from "@plane/types";
 import { resolveGeneralTheme } from "@plane/utils";
 // components
 import { EmailCodesConfiguration } from "@/components/authentication/email-config-switch";
@@ -1,9 +1,35 @@
 "use client";

+import Image from "next/image";
+import Link from "next/link";
+import { useTheme } from "next-themes";
+// logo assets
+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";
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
+  const { resolvedTheme } = useTheme();
+
+  const patternBackground = resolvedTheme === "light" ? PlaneBackgroundPattern : PlaneBackgroundPatternDark;
+  const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
+
  return (
-    <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
-      {children}
+    <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>
+        <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>
  );
 }
@@ -2,8 +2,8 @@

 import { observer } from "mobx-react";
 // components
-import { LogoSpinner } from "@/components/common/logo-spinner";
 import { InstanceFailureView } from "@/components/instance/failure";
+import { InstanceLoading } from "@/components/instance/loading";
 import { InstanceSetupForm } from "@/components/instance/setup-form";
 // hooks
 import { useInstance } from "@/hooks/store";
@@ -17,24 +17,46 @@ const HomePage = () => {
  // if instance is not fetched, show loading
  if (!instance && !error) {
    return (
-      <div className="flex items-center justify-center h-screen w-full">
-        <LogoSpinner />
+      <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
+        <InstanceLoading />
      </div>
    );
  }

  // if instance fetch fails, show failure view
  if (error) {
-    return <InstanceFailureView />;
+    return (
+      <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
+        <InstanceFailureView />
+      </div>
+    );
  }

  // if instance is fetched and setup is not done, show setup form
  if (instance && !instance?.is_setup_done) {
-    return <InstanceSetupForm />;
+    return (
+      <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
+        <InstanceSetupForm />
+      </div>
+    );
  }

  // if instance is fetched and setup is done, show sign in form
-  return <InstanceSignInForm />;
+  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>
+        <InstanceSignInForm />
+      </div>
+    </div>
+  );
 };

 export default observer(HomePage);
@@ -1,21 +1,16 @@
 "use client";

-import type { FC } from "react";
-import { useEffect, useMemo, useState } from "react";
+import { FC, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import { Eye, EyeOff } from "lucide-react";
 // plane internal packages
-import type { EAdminAuthErrorCodes, TAdminAuthErrorInfo } from "@plane/constants";
-import { API_BASE_URL } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { API_BASE_URL, EAdminAuthErrorCodes, TAdminAuthErrorInfo } from "@plane/constants";
 import { AuthService } from "@plane/services";
-import { Input, Spinner } from "@plane/ui";
+import { Button, Input, Spinner } from "@plane/ui";
 // components
 import { Banner } from "@/components/common/banner";
 // local components
-import { FormHeader } from "../../../core/components/instance/form-header";
 import { AuthBanner } from "./auth-banner";
-import { AuthHeader } from "./auth-header";
 import { authErrorHandler } from "./auth-helpers";

 // service initialization
@@ -106,91 +101,78 @@ export const InstanceSignInForm: FC = () => {
  }, [errorCode]);

  return (
-    <>
-      <AuthHeader />
-      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
-        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
-          <FormHeader
-            heading="Manage your Plane instance"
-            subHeading="Configure instance-wide settings to secure your instance"
+    <form
+      className="space-y-4"
+      method="POST"
+      action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
+      onSubmit={() => setIsSubmitting(true)}
+      onError={() => setIsSubmitting(false)}
+    >
+      {errorData.type && errorData?.message ? (
+        <Banner type="error" message={errorData?.message} />
+      ) : (
+        <>{errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}</>
+      )}
+      <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"
          />
-          <form
-            className="space-y-4"
-            method="POST"
-            action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
-            onSubmit={() => setIsSubmitting(true)}
-            onError={() => setIsSubmitting(false)}
-          >
-            {errorData.type && errorData?.message ? (
-              <Banner type="error" message={errorData?.message} />
-            ) : (
-              <>
-                {errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}
-              </>
-            )}
-            <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-
-            <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
-                Email <span className="text-red-500">*</span>
-              </label>
-              <Input
-                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-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-custom-text-300 font-medium" htmlFor="password">
-                Password <span className="text-red-500">*</span>
-              </label>
-              <div className="relative">
-                <Input
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-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>
+          {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>
  );
 };
@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // hooks
@@ -1,7 +1,6 @@
 "use client";

-import type { ReactNode } from "react";
-import { createContext } from "react";
+import { ReactNode, createContext } from "react";
 // plane admin store
 import { RootStore } from "@/plane-admin/store/root.store";

@@ -1,7 +1,7 @@
 "use client";

 import { useTheme } from "next-themes";
-import { Toast } from "@plane/propel/toast";
+import { Toast } from "@plane/ui";
 import { resolveGeneralTheme } from "@plane/utils";

 export const ToastWithTheme = () => {
@@ -1,7 +1,6 @@
 "use client";

-import type { FC, ReactNode } from "react";
-import { useEffect } from "react";
+import { FC, ReactNode, useEffect } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // hooks
@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
-import type { Metadata } from "next";
+import { ReactNode } from "react";
+import { Metadata } from "next";
 // plane imports
 import { ADMIN_BASE_PATH } from "@plane/constants";
 // styles
@@ -3,7 +3,7 @@ import Image from "next/image";
 import { useTheme } from "next-themes";
 import { KeyRound, Mails } from "lucide-react";
 // types
-import type {
+import {
  TGetBaseAuthenticationModeProps,
  TInstanceAuthenticationMethodKeys,
  TInstanceAuthenticationModes,
@@ -4,7 +4,7 @@ import React from "react";
 // icons
 import { SquareArrowOutUpRight } from "lucide-react";
 // plane internal packages
-import { getButtonStyling } from "@plane/propel/button";
+import { getButtonStyling } from "@plane/ui";
 import { cn } from "@plane/utils";

 export const UpgradeButton: React.FC = () => (
@@ -1,14 +1,14 @@
 "use client";

-import type { FC } from "react";
+import { FC } from "react";
 // helpers
 import { cn } from "@plane/utils";

 type Props = {
  name: string;
  description: string;
-  icon: React.ReactNode;
-  config: React.ReactNode;
+  icon: JSX.Element;
+  config: JSX.Element;
  disabled?: boolean;
  withBorder?: boolean;
  unavailable?: boolean;
@@ -3,7 +3,7 @@
 import React from "react";
 import { observer } from "mobx-react";
 // hooks
-import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";
 import { ToggleSwitch } from "@plane/ui";
 import { useInstance } from "@/hooks/store";
 // ui
@@ -25,8 +25,9 @@ export const EmailCodesConfiguration: React.FC<Props> = observer((props) => {
    <ToggleSwitch
      value={Boolean(parseInt(enableMagicLogin))}
      onChange={() => {
-        const newEnableMagicLogin = Boolean(parseInt(enableMagicLogin)) === true ? "0" : "1";
-        updateConfig("ENABLE_MAGIC_LINK_LOGIN", newEnableMagicLogin);
+        Boolean(parseInt(enableMagicLogin)) === true
+          ? updateConfig("ENABLE_MAGIC_LINK_LOGIN", "0")
+          : updateConfig("ENABLE_MAGIC_LINK_LOGIN", "1");
      }}
      size="sm"
      disabled={disabled}
@@ -6,9 +6,8 @@ import Link from "next/link";
 // icons
 import { Settings2 } from "lucide-react";
 // plane internal packages
-import { getButtonStyling } from "@plane/propel/button";
-import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
-import { ToggleSwitch } from "@plane/ui";
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";
+import { ToggleSwitch, getButtonStyling } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
 import { useInstance } from "@/hooks/store";
@@ -36,8 +35,9 @@ export const GithubConfiguration: React.FC<Props> = observer((props) => {
          <ToggleSwitch
            value={Boolean(parseInt(enableGithubConfig))}
            onChange={() => {
-              const newEnableGithubConfig = Boolean(parseInt(enableGithubConfig)) === true ? "0" : "1";
-              updateConfig("IS_GITHUB_ENABLED", newEnableGithubConfig);
+              Boolean(parseInt(enableGithubConfig)) === true
+                ? updateConfig("IS_GITHUB_ENABLED", "0")
+                : updateConfig("IS_GITHUB_ENABLED", "1");
            }}
            size="sm"
            disabled={disabled}
@@ -6,9 +6,8 @@ import Link from "next/link";
 // icons
 import { Settings2 } from "lucide-react";
 // plane internal packages
-import { getButtonStyling } from "@plane/propel/button";
-import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
-import { ToggleSwitch } from "@plane/ui";
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";
+import { ToggleSwitch, getButtonStyling } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
 import { useInstance } from "@/hooks/store";
@@ -36,8 +35,9 @@ export const GitlabConfiguration: React.FC<Props> = observer((props) => {
          <ToggleSwitch
            value={Boolean(parseInt(enableGitlabConfig))}
            onChange={() => {
-              const newEnableGitlabConfig = Boolean(parseInt(enableGitlabConfig)) === true ? "0" : "1";
-              updateConfig("IS_GITLAB_ENABLED", newEnableGitlabConfig);
+              Boolean(parseInt(enableGitlabConfig)) === true
+                ? updateConfig("IS_GITLAB_ENABLED", "0")
+                : updateConfig("IS_GITLAB_ENABLED", "1");
            }}
            size="sm"
            disabled={disabled}
@@ -6,9 +6,8 @@ import Link from "next/link";
 // icons
 import { Settings2 } from "lucide-react";
 // plane internal packages
-import { getButtonStyling } from "@plane/propel/button";
-import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
-import { ToggleSwitch } from "@plane/ui";
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";
+import { ToggleSwitch, getButtonStyling } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
 import { useInstance } from "@/hooks/store";
@@ -36,8 +35,9 @@ export const GoogleConfiguration: React.FC<Props> = observer((props) => {
          <ToggleSwitch
            value={Boolean(parseInt(enableGoogleConfig))}
            onChange={() => {
-              const newEnableGoogleConfig = Boolean(parseInt(enableGoogleConfig)) === true ? "0" : "1";
-              updateConfig("IS_GOOGLE_ENABLED", newEnableGoogleConfig);
+              Boolean(parseInt(enableGoogleConfig)) === true
+                ? updateConfig("IS_GOOGLE_ENABLED", "0")
+                : updateConfig("IS_GOOGLE_ENABLED", "1");
            }}
            size="sm"
            disabled={disabled}
@@ -3,7 +3,7 @@
 import React from "react";
 import { observer } from "mobx-react";
 // hooks
-import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";
 import { ToggleSwitch } from "@plane/ui";
 import { useInstance } from "@/hooks/store";
 // ui
@@ -25,8 +25,9 @@ export const PasswordLoginConfiguration: React.FC<Props> = observer((props) => {
    <ToggleSwitch
      value={Boolean(parseInt(enableEmailPassword))}
      onChange={() => {
-        const newEnableEmailPassword = Boolean(parseInt(enableEmailPassword)) === true ? "0" : "1";
-        updateConfig("ENABLE_EMAIL_PASSWORD", newEnableEmailPassword);
+        Boolean(parseInt(enableEmailPassword)) === true
+          ? updateConfig("ENABLE_EMAIL_PASSWORD", "0")
+          : updateConfig("ENABLE_EMAIL_PASSWORD", "1");
      }}
      size="sm"
      disabled={disabled}
@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import { FC } from "react";
 import { AlertCircle, CheckCircle2 } from "lucide-react";

 type TBanner = {
@@ -1,7 +1,7 @@
 "use client";

 import Link from "next/link";
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@plane/ui";

 type Props = {
  label?: string;
@@ -5,7 +5,7 @@ import Link from "next/link";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { Button, getButtonStyling } from "@plane/propel/button";
+import { Button, getButtonStyling } from "@plane/ui";

 type Props = {
  isOpen: boolean;
@@ -1,8 +1,7 @@
 "use client";

 import React, { useState } from "react";
-import type { Control } from "react-hook-form";
-import { Controller } from "react-hook-form";
+import { Controller, Control } from "react-hook-form";
 // icons
 import { Eye, EyeOff } from "lucide-react";
 // plane internal packages
@@ -14,7 +13,7 @@ type Props = {
  type: "text" | "password";
  name: string;
  label: string;
-  description?: string | React.ReactNode;
+  description?: string | JSX.Element;
  placeholder: string;
  error: boolean;
  required: boolean;
@@ -24,7 +23,7 @@ export type TControllerInputFormField = {
  key: string;
  type: "text" | "password";
  label: string;
-  description?: string | React.ReactNode;
+  description?: string | JSX.Element;
  placeholder: string;
  error: boolean;
  required: boolean;
@@ -3,20 +3,20 @@
 import React from "react";
 // ui
 import { Copy } from "lucide-react";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+// icons

 type Props = {
  label: string;
  url: string;
-  description: string | React.ReactNode;
+  description: string | JSX.Element;
 };

 export type TCopyField = {
  key: string;
  label: string;
  url: string;
-  description: string | React.ReactNode;
+  description: string | JSX.Element;
 };

 export const CopyField: React.FC<Props> = (props) => {
@@ -2,7 +2,7 @@

 import React from "react";
 import Image from "next/image";
-import { Button } from "@plane/propel/button";
+import { Button } from "@plane/ui";

 type Props = {
  title: string;
@@ -7,11 +7,11 @@ import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
 export const LogoSpinner = () => {
  const { resolvedTheme } = useTheme();

-  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark;
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;

  return (
    <div className="flex items-center justify-center">
-      <Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
+      <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" priority={false} />
    </div>
  );
 };
@@ -1,15 +1,13 @@
 "use client";
-import type { FC } from "react";
-import { observer } from "mobx-react";
+import { FC } from "react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
-import { Button } from "@plane/propel/button";
+import { Button } from "@plane/ui";
 // assets
-import { AuthHeader } from "@/app/(all)/(home)/auth-header";
 import InstanceFailureDarkImage from "@/public/instance/instance-failure-dark.svg";
 import InstanceFailureImage from "@/public/instance/instance-failure.svg";

-export const InstanceFailureView: FC = observer(() => {
+export const InstanceFailureView: FC = () => {
  const { resolvedTheme } = useTheme();

  const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
@@ -19,24 +17,22 @@ export const InstanceFailureView: FC = observer(() => {
  };

  return (
-    <>
-      <AuthHeader />
-      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
-        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
-          <div className="relative flex flex-col justify-center items-center space-y-4">
-            <Image src={instanceImage} alt="Plane Logo" />
-            <h3 className="font-medium text-2xl text-white text-center">Unable to fetch instance details.</h3>
-            <p className="font-medium text-base text-center">
-              We were unable to fetch the details of the instance. Fret not, it might just be a connectivity issue.
-            </p>
-          </div>
-          <div className="flex justify-center">
-            <Button size="md" onClick={handleRetry}>
-              Retry
-            </Button>
-          </div>
+    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
+      <div className="w-auto max-w-2xl relative space-y-8 py-10">
+        <div className="relative flex flex-col justify-center items-center space-y-4">
+          <Image src={instanceImage} alt="Plane Logo" />
+          <h3 className="font-medium text-2xl text-white ">Unable to fetch instance details.</h3>
+          <p className="font-medium text-base text-center">
+            We were unable to fetch the details of the instance. <br />
+            Fret not, it might just be a connectivity issue.
+          </p>
+        </div>
+        <div className="flex justify-center">
+          <Button size="md" onClick={handleRetry}>
+            Retry
+          </Button>
        </div>
      </div>
-    </>
+    </div>
  );
-});
+};
@@ -1,8 +0,0 @@
-"use client";
-
-export const FormHeader = ({ heading, subHeading }: { heading: string; subHeading: string }) => (
-  <div className="flex flex-col gap-1">
-    <span className="text-2xl font-semibold text-custom-text-100 leading-7">{heading}</span>
-    <span className="text-lg font-semibold text-custom-text-400 leading-7">{subHeading}</span>
-  </div>
-);
@@ -1,9 +1,9 @@
 "use client";

-import type { FC } from "react";
+import { FC } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { Button } from "@plane/propel/button";
+import { Button } from "@plane/ui";
 // assets
 import PlaneTakeOffImage from "@/public/images/plane-takeoff.png";

@@ -13,7 +13,7 @@ export const InstanceNotReady: FC = () => (
      <div className="relative flex flex-col justify-center items-center space-y-4">
        <h1 className="text-3xl font-bold pb-3">Welcome aboard Plane!</h1>
        <Image src={PlaneTakeOffImage} alt="Plane Logo" />
-        <p className="font-medium text-base text-custom-text-400">
+        <p className="font-medium text-base text-onboarding-text-400">
          Get started by setting up your instance and workspace
        </p>
      </div>
@@ -6,12 +6,16 @@ import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";

 export const InstanceLoading = () => {
  const { resolvedTheme } = useTheme();
-
-  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark;
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;

  return (
-    <div className="flex items-center justify-center">
-      <Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
+    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
+      <div className="w-auto max-w-2xl relative space-y-8 py-10">
+        <div className="relative flex flex-col justify-center items-center space-y-4">
+          <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" priority={false} />
+          <h3 className="font-medium text-2xl text-white ">Fetching instance details...</h3>
+        </div>
+      </div>
    </div>
  );
 };
@@ -1,20 +1,16 @@
 "use client";

-import type { FC } from "react";
-import { useEffect, useMemo, useState } from "react";
+import { FC, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 // icons
 import { Eye, EyeOff } from "lucide-react";
 // plane internal packages
 import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
-import { Button } from "@plane/propel/button";
 import { AuthService } from "@plane/services";
-import { Checkbox, Input, PasswordStrengthIndicator, Spinner } from "@plane/ui";
+import { Button, Checkbox, Input, PasswordStrengthIndicator, Spinner } from "@plane/ui";
 import { getPasswordStrength } from "@plane/utils";
 // components
-import { AuthHeader } from "@/app/(all)/(home)/auth-header";
 import { Banner } from "@/components/common/banner";
-import { FormHeader } from "@/components/instance/form-header";

 // service initialization
 const authService = new AuthService();
@@ -135,221 +131,227 @@ export const InstanceSetupForm: FC = (props) => {
  const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;

  return (
-    <>
-      <AuthHeader />
-      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
-        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
-          <FormHeader
-            heading="Setup your Plane Instance"
-            subHeading="Post setup you will be able to manage this Plane instance."
-          />
-          {errorData.type &&
-            errorData?.message &&
-            ![EErrorCodes.INVALID_EMAIL, EErrorCodes.INVALID_PASSWORD].includes(errorData.type) && (
-              <Banner type="error" message={errorData?.message} />
-            )}
-          <form
-            className="space-y-4"
-            method="POST"
-            action={`${API_BASE_URL}/api/instances/admins/sign-up/`}
-            onSubmit={() => setIsSubmitting(true)}
-            onError={() => setIsSubmitting(false)}
-          >
-            <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-            <input type="hidden" name="is_telemetry_enabled" value={formData.is_telemetry_enabled ? "True" : "False"} />
+    <div className="max-w-lg lg:max-w-md w-full">
+      <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">
+            Setup your Plane Instance
+          </h3>
+          <p className="font-medium text-onboarding-text-400">
+            Post setup you will be able to manage this Plane instance.
+          </p>
+        </div>

-            <div className="flex flex-col sm:flex-row items-center gap-4">
-              <div className="w-full space-y-1">
-                <label className="text-sm text-custom-text-300 font-medium" htmlFor="first_name">
-                  First name <span className="text-red-500">*</span>
-                </label>
-                <Input
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
-                  id="first_name"
-                  name="first_name"
-                  type="text"
-                  inputSize="md"
-                  placeholder="Wilber"
-                  value={formData.first_name}
-                  onChange={(e) => handleFormChange("first_name", e.target.value)}
-                  autoComplete="on"
-                  autoFocus
-                />
-              </div>
-              <div className="w-full space-y-1">
-                <label className="text-sm text-custom-text-300 font-medium" htmlFor="last_name">
-                  Last name <span className="text-red-500">*</span>
-                </label>
-                <Input
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
-                  id="last_name"
-                  name="last_name"
-                  type="text"
-                  inputSize="md"
-                  placeholder="Wright"
-                  value={formData.last_name}
-                  onChange={(e) => handleFormChange("last_name", e.target.value)}
-                  autoComplete="on"
-                />
-              </div>
-            </div>
+        {errorData.type &&
+          errorData?.message &&
+          ![EErrorCodes.INVALID_EMAIL, EErrorCodes.INVALID_PASSWORD].includes(errorData.type) && (
+            <Banner type="error" message={errorData?.message} />
+          )}

+        <form
+          className="space-y-4"
+          method="POST"
+          action={`${API_BASE_URL}/api/instances/admins/sign-up/`}
+          onSubmit={() => setIsSubmitting(true)}
+          onError={() => setIsSubmitting(false)}
+        >
+          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+          <input type="hidden" name="is_telemetry_enabled" value={formData.is_telemetry_enabled ? "True" : "False"} />
+
+          <div className="flex flex-col sm:flex-row items-center gap-4">
            <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
-                Email <span className="text-red-500">*</span>
+              <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
+                First name <span className="text-red-500">*</span>
              </label>
              <Input
-                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
-                id="email"
-                name="email"
-                type="email"
-                inputSize="md"
-                placeholder="name@company.com"
-                value={formData.email}
-                onChange={(e) => handleFormChange("email", e.target.value)}
-                hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
-                autoComplete="on"
-              />
-              {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
-                <p className="px-1 text-xs text-red-500">{errorData.message}</p>
-              )}
-            </div>
-
-            <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="company_name">
-                Company name <span className="text-red-500">*</span>
-              </label>
-              <Input
-                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
-                id="company_name"
-                name="company_name"
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+                id="first_name"
+                name="first_name"
                type="text"
                inputSize="md"
-                placeholder="Company name"
-                value={formData.company_name}
-                onChange={(e) => handleFormChange("company_name", e.target.value)}
+                placeholder="Wilber"
+                value={formData.first_name}
+                onChange={(e) => handleFormChange("first_name", e.target.value)}
+                autoComplete="on"
+                autoFocus
              />
            </div>
-
            <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
-                Set a password <span className="text-red-500">*</span>
+              <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="last_name">
+                Last name <span className="text-red-500">*</span>
              </label>
-              <div className="relative">
-                <Input
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
-                  id="password"
-                  name="password"
-                  type={showPassword.password ? "text" : "password"}
-                  inputSize="md"
-                  placeholder="New password..."
-                  value={formData.password}
-                  onChange={(e) => handleFormChange("password", e.target.value)}
-                  hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
-                  onFocus={() => setIsPasswordInputFocused(true)}
-                  onBlur={() => setIsPasswordInputFocused(false)}
-                  autoComplete="on"
-                />
-                {showPassword.password ? (
-                  <button
-                    type="button"
-                    tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                    onClick={() => handleShowPassword("password")}
-                  >
-                    <EyeOff className="h-4 w-4" />
-                  </button>
-                ) : (
-                  <button
-                    type="button"
-                    tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                    onClick={() => handleShowPassword("password")}
-                  >
-                    <Eye className="h-4 w-4" />
-                  </button>
-                )}
-              </div>
-              {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
-                <p className="px-1 text-xs text-red-500">{errorData.message}</p>
-              )}
-              <PasswordStrengthIndicator password={formData.password} isFocused={isPasswordInputFocused} />
+              <Input
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+                id="last_name"
+                name="last_name"
+                type="text"
+                inputSize="md"
+                placeholder="Wright"
+                value={formData.last_name}
+                onChange={(e) => handleFormChange("last_name", e.target.value)}
+                autoComplete="on"
+              />
            </div>
+          </div>

-            <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="confirm_password">
-                Confirm password <span className="text-red-500">*</span>
-              </label>
-              <div className="relative">
-                <Input
-                  type={showPassword.retypePassword ? "text" : "password"}
-                  id="confirm_password"
-                  name="confirm_password"
-                  inputSize="md"
-                  value={formData.confirm_password}
-                  onChange={(e) => handleFormChange("confirm_password", e.target.value)}
-                  placeholder="Confirm password"
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
-                  onFocus={() => setIsRetryPasswordInputFocused(true)}
-                  onBlur={() => setIsRetryPasswordInputFocused(false)}
-                />
-                {showPassword.retypePassword ? (
-                  <button
-                    type="button"
-                    tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                    onClick={() => handleShowPassword("retypePassword")}
-                  >
-                    <EyeOff className="h-4 w-4" />
-                  </button>
-                ) : (
-                  <button
-                    type="button"
-                    tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                    onClick={() => handleShowPassword("retypePassword")}
-                  >
-                    <Eye className="h-4 w-4" />
-                  </button>
-                )}
-              </div>
-              {!!formData.confirm_password &&
-                formData.password !== formData.confirm_password &&
-                renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
-            </div>
+          <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)}
+              hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
+              autoComplete="on"
+            />
+            {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
+              <p className="px-1 text-xs text-red-500">{errorData.message}</p>
+            )}
+          </div>

-            <div className="relative flex gap-2">
-              <div>
-                <Checkbox
-                  className="w-4 h-4"
-                  iconClassName="w-3 h-3"
-                  id="is_telemetry_enabled"
-                  onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
-                  checked={formData.is_telemetry_enabled}
-                />
-              </div>
-              <label className="text-sm text-custom-text-300 font-medium cursor-pointer" htmlFor="is_telemetry_enabled">
-                Allow Plane to anonymously collect usage events.{" "}
-                <a
+          <div className="w-full space-y-1">
+            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="company_name">
+              Company name <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="company_name"
+              name="company_name"
+              type="text"
+              inputSize="md"
+              placeholder="Company name"
+              value={formData.company_name}
+              onChange={(e) => handleFormChange("company_name", e.target.value)}
+            />
+          </div>
+
+          <div className="w-full space-y-1">
+            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
+              Set a 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.password ? "text" : "password"}
+                inputSize="md"
+                placeholder="New password..."
+                value={formData.password}
+                onChange={(e) => handleFormChange("password", e.target.value)}
+                hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
+                onFocus={() => setIsPasswordInputFocused(true)}
+                onBlur={() => setIsPasswordInputFocused(false)}
+                autoComplete="on"
+              />
+              {showPassword.password ? (
+                <button
+                  type="button"
                  tabIndex={-1}
-                  href="https://developers.plane.so/self-hosting/telemetry"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-sm font-medium text-blue-500 hover:text-blue-600 flex-shrink-0"
+                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                  onClick={() => handleShowPassword("password")}
                >
-                  See More
-                </a>
-              </label>
+                  <EyeOff className="h-4 w-4" />
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  tabIndex={-1}
+                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                  onClick={() => handleShowPassword("password")}
+                >
+                  <Eye className="h-4 w-4" />
+                </button>
+              )}
            </div>
+            {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
+              <p className="px-1 text-xs text-red-500">{errorData.message}</p>
+            )}
+            <PasswordStrengthIndicator password={formData.password} isFocused={isPasswordInputFocused} />
+          </div>

-            <div className="py-2">
-              <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
-                {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
-              </Button>
+          <div className="w-full space-y-1">
+            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
+              Confirm password <span className="text-red-500">*</span>
+            </label>
+            <div className="relative">
+              <Input
+                type={showPassword.retypePassword ? "text" : "password"}
+                id="confirm_password"
+                name="confirm_password"
+                inputSize="md"
+                value={formData.confirm_password}
+                onChange={(e) => handleFormChange("confirm_password", e.target.value)}
+                placeholder="Confirm password"
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                onFocus={() => setIsRetryPasswordInputFocused(true)}
+                onBlur={() => setIsRetryPasswordInputFocused(false)}
+              />
+              {showPassword.retypePassword ? (
+                <button
+                  type="button"
+                  tabIndex={-1}
+                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                  onClick={() => handleShowPassword("retypePassword")}
+                >
+                  <EyeOff className="h-4 w-4" />
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  tabIndex={-1}
+                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                  onClick={() => handleShowPassword("retypePassword")}
+                >
+                  <Eye className="h-4 w-4" />
+                </button>
+              )}
            </div>
-          </form>
-        </div>
+            {!!formData.confirm_password &&
+              formData.password !== formData.confirm_password &&
+              renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
+          </div>
+
+          <div className="relative flex items-center pt-2 gap-2">
+            <div>
+              <Checkbox
+                className="w-4 h-4"
+                iconClassName="w-3 h-3"
+                id="is_telemetry_enabled"
+                onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
+                checked={formData.is_telemetry_enabled}
+              />
+            </div>
+            <label
+              className="text-sm text-onboarding-text-300 font-medium cursor-pointer"
+              htmlFor="is_telemetry_enabled"
+            >
+              Allow Plane to anonymously collect usage events.
+            </label>
+            <a
+              tabIndex={-1}
+              href="https://developers.plane.so/self-hosting/telemetry"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm font-medium text-blue-500 hover:text-blue-600"
+            >
+              See More
+            </a>
+          </div>
+
+          <div className="py-2">
+            <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
+              {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+            </Button>
+          </div>
+        </form>
      </div>
-    </>
+    </div>
  );
 };
@@ -6,7 +6,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useTheme as nextUseTheme } from "next-themes";
 // ui
-import { Button, getButtonStyling } from "@plane/propel/button";
+import { Button, getButtonStyling } from "@plane/ui";
 import { resolveGeneralTheme } from "@plane/utils";
 // hooks
 import { useTheme } from "@/hooks/store";
@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 import { ExternalLink } from "lucide-react";
 // plane internal packages
 import { WEB_BASE_URL } from "@plane/constants";
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@plane/ui";
 import { getFileURL } from "@plane/utils";
 // hooks
 import { useWorkspace } from "@/hooks/store";
@@ -1,7 +1,7 @@
 import { useContext } from "react";
 // store
 import { StoreContext } from "@/app/(all)/store.provider";
-import type { IInstanceStore } from "@/store/instance.store";
+import { IInstanceStore } from "@/store/instance.store";

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

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

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

 export const useWorkspace = (): IWorkspaceStore => {
  const context = useContext(StoreContext);
@@ -1,10 +1,9 @@
-import { set } from "lodash-es";
+import set from "lodash/set";
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
 // plane internal packages
-import type { TInstanceStatus } from "@plane/constants";
-import { EInstanceStatus } from "@plane/constants";
+import { EInstanceStatus, TInstanceStatus } from "@plane/constants";
 import { InstanceService } from "@plane/services";
-import type {
+import {
  IInstance,
  IInstanceAdmin,
  IInstanceConfiguration,
@@ -13,7 +12,7 @@ import type {
  IInstanceConfig,
 } from "@plane/types";
 // root store
-import type { CoreRootStore } from "@/store/root.store";
+import { CoreRootStore } from "@/store/root.store";

 export interface IInstanceStore {
  // issues
@@ -210,7 +209,7 @@ export class InstanceStore implements IInstanceStore {
        });
      });
      await this.instanceService.disableEmail();
-    } catch (_error) {
+    } catch (error) {
      console.error("Error disabling the email");
      this.instanceConfigurations = instanceConfigurations;
    }
@@ -1,13 +1,9 @@
 import { enableStaticRendering } from "mobx-react";
 // stores
-import type { IInstanceStore } from "./instance.store";
-import { InstanceStore } from "./instance.store";
-import type { IThemeStore } from "./theme.store";
-import { ThemeStore } from "./theme.store";
-import type { IUserStore } from "./user.store";
-import { UserStore } from "./user.store";
-import type { IWorkspaceStore } from "./workspace.store";
-import { WorkspaceStore } from "./workspace.store";
+import { IInstanceStore, InstanceStore } from "./instance.store";
+import { IThemeStore, ThemeStore } from "./theme.store";
+import { IUserStore, UserStore } from "./user.store";
+import { IWorkspaceStore, WorkspaceStore } from "./workspace.store";

 enableStaticRendering(typeof window === "undefined");

@@ -1,6 +1,6 @@
 import { action, observable, makeObservable } from "mobx";
 // root store
-import type { CoreRootStore } from "@/store/root.store";
+import { CoreRootStore } from "@/store/root.store";

 type TTheme = "dark" | "light";
 export interface IThemeStore {
@@ -1,11 +1,10 @@
 import { action, observable, runInAction, makeObservable } from "mobx";
 // plane internal packages
-import type { TUserStatus } from "@plane/constants";
-import { EUserStatus } from "@plane/constants";
+import { EUserStatus, TUserStatus } from "@plane/constants";
 import { AuthService, UserService } from "@plane/services";
-import type { IUser } from "@plane/types";
+import { IUser } from "@plane/types";
 // root store
-import type { CoreRootStore } from "@/store/root.store";
+import { CoreRootStore } from "@/store/root.store";

 export interface IUserStore {
  // observables
@@ -1,10 +1,10 @@
-import { set } from "lodash-es";
+import set from "lodash/set";
 import { action, observable, runInAction, makeObservable, computed } from "mobx";
 // plane imports
 import { InstanceWorkspaceService } from "@plane/services";
-import type { IWorkspace, TLoader, TPaginationInfo } from "@plane/types";
+import { IWorkspace, TLoader, TPaginationInfo } from "@plane/types";
 // root store
-import type { CoreRootStore } from "@/store/root.store";
+import { CoreRootStore } from "@/store/root.store";

 export interface IWorkspaceStore {
  // observables
@@ -1,7 +1,7 @@
 {
  "name": "admin",
  "description": "Admin UI for Plane",
-  "version": "1.0.0",
+  "version": "0.28.0",
  "license": "AGPL-3.0",
  "private": true,
  "scripts": {
@@ -18,37 +18,38 @@
  },
  "dependencies": {
    "@headlessui/react": "^1.7.19",
-    "@plane/constants": "workspace:*",
-    "@plane/hooks": "workspace:*",
-    "@plane/propel": "workspace:*",
-    "@plane/services": "workspace:*",
-    "@plane/types": "workspace:*",
-    "@plane/ui": "workspace:*",
-    "@plane/utils": "workspace:*",
+    "@plane/constants": "*",
+    "@plane/hooks": "*",
+    "@plane/propel": "*",
+    "@plane/services": "*",
+    "@plane/types": "*",
+    "@plane/ui": "*",
+    "@plane/utils": "*",
+    "@tailwindcss/typography": "^0.5.9",
+    "@types/lodash": "^4.17.0",
    "autoprefixer": "10.4.14",
-    "axios": "catalog:",
-    "lodash-es": "catalog:",
-    "lucide-react": "catalog:",
-    "mobx": "catalog:",
-    "mobx-react": "catalog:",
-    "next": "catalog:",
+    "axios": "1.11.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.469.0",
+    "mobx": "^6.12.0",
+    "mobx-react": "^9.1.1",
+    "next": "14.2.30",
    "next-themes": "^0.2.1",
    "postcss": "^8.4.49",
-    "react": "catalog:",
-    "react-dom": "catalog:",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
    "react-hook-form": "7.51.5",
-    "sharp": "catalog:",
-    "swr": "catalog:",
-    "uuid": "catalog:"
+    "swr": "^2.2.4",
+    "uuid": "^9.0.1"
  },
  "devDependencies": {
-    "@plane/eslint-config": "workspace:*",
-    "@plane/tailwind-config": "workspace:*",
-    "@plane/typescript-config": "workspace:*",
-    "@types/lodash-es": "catalog:",
-    "@types/node": "catalog:",
-    "@types/react": "catalog:",
-    "@types/react-dom": "catalog:",
-    "typescript": "catalog:"
+    "@plane/eslint-config": "*",
+    "@plane/tailwind-config": "*",
+    "@plane/typescript-config": "*",
+    "@types/node": "18.16.1",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.2.18",
+    "@types/uuid": "^9.0.8",
+    "typescript": "5.8.3"
  }
 }
--- a/Show More
+++ b/Show More