chore: total issue count

feat(dashboard): improve label readability (#4321 )
change none label for all time in dashbard filters
2024-05-01 12:52:46 +05:30 · 2024-05-01 00:08:18 +05:30 · 2024-04-30 20:26:12 +05:30 · 2024-04-29 20:02:53 +05:30 · 2024-04-29 15:36:58 +05:30 · 2024-04-29 13:52:07 +05:30
799 changed files with 22907 additions and 20099 deletions
@@ -4,7 +4,7 @@ module.exports = {
  extends: ["custom"],
  settings: {
    next: {
-      rootDir: ["web/", "space/", "admin/"],
+      rootDir: ["web/", "space/"],
    },
  },
 };
@@ -22,11 +22,11 @@ jobs:
      gh_buildx_version: ${{ steps.set_env_variables.outputs.BUILDX_VERSION }}
      gh_buildx_platforms: ${{ steps.set_env_variables.outputs.BUILDX_PLATFORMS }}
      gh_buildx_endpoint: ${{ steps.set_env_variables.outputs.BUILDX_ENDPOINT }}
-      build_proxy: ${{ steps.changed_files.outputs.proxy_any_changed }}
-      build_apiserver: ${{ steps.changed_files.outputs.apiserver_any_changed }}
+      build_frontend: ${{ steps.changed_files.outputs.frontend_any_changed }}
      build_admin: ${{ steps.changed_files.outputs.admin_any_changed }}
      build_space: ${{ steps.changed_files.outputs.space_any_changed }}
-      build_web: ${{ steps.changed_files.outputs.web_any_changed }}
+      build_backend: ${{ steps.changed_files.outputs.backend_any_changed }}
+      build_proxy: ${{ steps.changed_files.outputs.proxy_any_changed }}

    steps:
      - id: set_env_variables
@@ -54,12 +54,8 @@ jobs:
        uses: tj-actions/changed-files@v42
        with:
          files_yaml: |
-            apiserver:
-              - apiserver/**
-            proxy:
-              - nginx/**
-            admin:
-              - admin/**
+            frontend:
+              - web/**
              - packages/**
              - 'package.json'
              - 'yarn.lock'
@@ -72,16 +68,20 @@ jobs:
              - 'yarn.lock'
              - 'tsconfig.json'
              - 'turbo.json'
-            web:
-              - web/**
+            admin:
+              - admin/**
              - packages/**
              - 'package.json'
              - 'yarn.lock'
              - 'tsconfig.json'
              - 'turbo.json'
+            backend:
+              - apiserver/**
+            proxy:
+              - nginx/**

-  branch_build_push_web:
-    if: ${{ needs.branch_build_setup.outputs.build_web == 'true' || github.event_name == 'workflow_dispatch' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
+  branch_build_push_frontend:
+    if: ${{ needs.branch_build_setup.outputs.build_frontend == 'true' || github.event_name == 'workflow_dispatch' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
    runs-on: ubuntu-20.04
    needs: [branch_build_setup]
    env:
@@ -236,8 +236,8 @@ jobs:
          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
          DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}

-  branch_build_push_apiserver:
-    if: ${{ needs.branch_build_setup.outputs.build_apiserver == 'true' || github.event_name == 'workflow_dispatch' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
+  branch_build_push_backend:
+    if: ${{ needs.branch_build_setup.outputs.build_backend == 'true' || github.event_name == 'workflow_dispatch' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
    runs-on: ubuntu-20.04
    needs: [branch_build_setup]
    env:
@@ -10,32 +10,17 @@ jobs:
    runs-on: ubuntu-latest
    outputs:
      apiserver_changed: ${{ steps.changed-files.outputs.apiserver_any_changed }}
-      admin_changed: ${{ steps.changed-files.outputs.admin_any_changed }}
-      space_changed: ${{ steps.changed-files.outputs.space_any_changed }}
      web_changed: ${{ steps.changed-files.outputs.web_any_changed }}
+      space_changed: ${{ steps.changed-files.outputs.deploy_any_changed }}
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - name: Get changed files
        id: changed-files
-        uses: tj-actions/changed-files@v44
+        uses: tj-actions/changed-files@v41
        with:
          files_yaml: |
            apiserver:
              - apiserver/**
-            admin:
-              - admin/**
-              - packages/**
-              - 'package.json'
-              - 'yarn.lock'
-              - 'tsconfig.json'
-              - 'turbo.json'
-            space:
-              - space/**
-              - packages/**
-              - 'package.json'
-              - 'yarn.lock'
-              - 'tsconfig.json'
-              - 'turbo.json'
            web:
              - web/**
              - packages/**
@@ -43,17 +28,24 @@ jobs:
              - 'yarn.lock'
              - 'tsconfig.json'
              - 'turbo.json'
+            deploy:
+              - space/**
+              - packages/**
+              - 'package.json'
+              - 'yarn.lock'
+              - 'tsconfig.json'
+              - 'turbo.json'

  lint-apiserver:
    needs: get-changed-files
    runs-on: ubuntu-latest
    if: needs.get-changed-files.outputs.apiserver_changed == 'true'
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - name: Set up Python
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@v4
        with:
-          python-version: "3.x" # Specify the Python version you need
+          python-version: '3.x' # Specify the Python version you need
      - name: Install Pylint
        run: python -m pip install ruff
      - name: Install Apiserver Dependencies
@@ -61,77 +53,52 @@ jobs:
      - name: Lint apiserver
        run: ruff check --fix apiserver

-  lint-admin:
+  lint-web:
    needs: get-changed-files
-    if: needs.get-changed-files.outputs.admin_changed == 'true'
+    if: needs.get-changed-files.outputs.web_changed == 'true'
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
        with:
          node-version: 18.x
      - run: yarn install
-      - run: yarn lint --filter=admin
+      - run: yarn lint --filter=web

  lint-space:
    needs: get-changed-files
    if: needs.get-changed-files.outputs.space_changed == 'true'
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
        with:
          node-version: 18.x
      - run: yarn install
      - run: yarn lint --filter=space

-  lint-web:
-    needs: get-changed-files
-    if: needs.get-changed-files.outputs.web_changed == 'true'
+  build-web:
+    needs: lint-web
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
        with:
          node-version: 18.x
      - run: yarn install
-      - run: yarn lint --filter=web
-
-  build-admin:
-    needs: lint-admin
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18.x
-      - run: yarn install
-      - run: yarn build --filter=admin
+      - run: yarn build --filter=web

  build-space:
    needs: lint-space
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
        with:
          node-version: 18.x
      - run: yarn install
      - run: yarn build --filter=space
-
-  build-web:
-    needs: lint-web
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18.x
-      - run: yarn install
-      - run: yarn build --filter=web
@@ -5,17 +5,17 @@ on:
    inputs:
      web-build:
        required: false
-        description: "Build Web"
+        description: 'Build Web'
        type: boolean
        default: true
      space-build:
        required: false
-        description: "Build Space"
+        description: 'Build Space'
        type: boolean
        default: false
      admin-build:
        required: false
-        description: "Build Admin"
+        description: 'Build Admin'
        type: boolean
        default: false

@@ -35,7 +35,7 @@ jobs:
          echo "BUILD_SPACE=$BUILD_SPACE"
          echo "BUILD_ADMIN=$BUILD_ADMIN"
    outputs:
-      web-build: ${{ env.BUILD_WEB}}
+      web-build: ${{ env.BUILD_WEB}} 
      space-build: ${{env.BUILD_SPACE}}
      admin-build: ${{env.BUILD_ADMIN}}

@@ -53,7 +53,7 @@ jobs:
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: "18"
+          node-version: '18'
      - name: Install AWS cli
        run: |
          sudo apt-get update
@@ -79,7 +79,7 @@ jobs:

          FILE_EXPIRY=$(date -u -d "+2 days" +"%Y-%m-%dT%H:%M:%SZ")
          aws s3 cp $TAR_NAME s3://${{ env.AWS_BUCKET }}/${{github.sha}}/$TAR_NAME --expires $FILE_EXPIRY
-
+     
  feature-build-space:
    if: ${{ needs.setup-feature-build.outputs.space-build == 'true' }}
    needs: setup-feature-build
@@ -89,7 +89,7 @@ jobs:
      AWS_ACCESS_KEY_ID: ${{ vars.FEATURE_PREVIEW_AWS_ACCESS_KEY_ID }}
      AWS_SECRET_ACCESS_KEY: ${{ secrets.FEATURE_PREVIEW_AWS_SECRET_ACCESS_KEY }}
      AWS_BUCKET: ${{ vars.FEATURE_PREVIEW_AWS_BUCKET }}
-      NEXT_PUBLIC_SPACE_BASE_PATH: "/spaces"
+      NEXT_PUBLIC_DEPLOY_WITH_NGINX: 1
      NEXT_PUBLIC_API_BASE_URL: ${{ vars.FEATURE_PREVIEW_NEXT_PUBLIC_API_BASE_URL }}
    outputs:
      do-build: ${{ needs.setup-feature-build.outputs.space-build }}
@@ -98,7 +98,7 @@ jobs:
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: "18"
+          node-version: '18'
      - name: Install AWS cli
        run: |
          sudo apt-get update
@@ -134,7 +134,7 @@ jobs:
      AWS_ACCESS_KEY_ID: ${{ vars.FEATURE_PREVIEW_AWS_ACCESS_KEY_ID }}
      AWS_SECRET_ACCESS_KEY: ${{ secrets.FEATURE_PREVIEW_AWS_SECRET_ACCESS_KEY }}
      AWS_BUCKET: ${{ vars.FEATURE_PREVIEW_AWS_BUCKET }}
-      NEXT_PUBLIC_ADMIN_BASE_PATH: "/god-mode"
+      NEXT_PUBLIC_DEPLOY_WITH_NGINX: 1
      NEXT_PUBLIC_API_BASE_URL: ${{ vars.FEATURE_PREVIEW_NEXT_PUBLIC_API_BASE_URL }}
    outputs:
      do-build: ${{ needs.setup-feature-build.outputs.admin-build }}
@@ -143,7 +143,7 @@ jobs:
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: "18"
+          node-version: '18'
      - name: Install AWS cli
        run: |
          sudo apt-get update
@@ -172,13 +172,7 @@ jobs:

  feature-deploy:
    if: ${{ always() && (needs.setup-feature-build.outputs.web-build == 'true' || needs.setup-feature-build.outputs.space-build == 'true' || needs.setup-feature-build.outputs.admin-build == 'true') }}
-    needs:
-      [
-        setup-feature-build,
-        feature-build-web,
-        feature-build-space,
-        feature-build-admin,
-      ]
+    needs: [setup-feature-build, feature-build-web, feature-build-space, feature-build-admin]
    name: Feature Deploy
    runs-on: ubuntu-latest
    env:
@@ -81,4 +81,3 @@ tmp/
 ## packages
 dist
 .temp/
-deploy/selfhost/plane-app/
@@ -7,7 +7,7 @@
 </p>

 <h3 align="center"><b>Plane</b></h3>
-<p align="center"><b>Open-source project management that unlocks customer value</b></p>
+<p align="center"><b>Open-source project management that unlocks customer value.</b></p>

 <p align="center">
 <a href="https://discord.com/invite/A92xrEGCge">
@@ -40,22 +40,22 @@
    </a>
 </p>

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

-> Plane is evolving every day. Your suggestions, ideas, and reported bugs help us immensely. Do not hesitate to join in the conversation on [Discord](https://discord.com/invite/A92xrEGCge) or raise a GitHub issue. We read everything and respond to most.
+> Plane is still in its early days, not everything will be perfect yet, and hiccups may happen. Please let us know of any suggestions, ideas, or bugs that you encounter on our [Discord](https://discord.com/invite/A92xrEGCge) or GitHub issues, and we will use your feedback to improve in our upcoming releases.

 ## ⚡ Installation

-The easiest way to get started with Plane is by creating a [Plane Cloud](https://app.plane.so) account.
+The easiest way to get started with Plane is by creating a [Plane Cloud](https://app.plane.so) account where we offer a hosted solution for users.

-If you would like to self-host Plane, please see our [deployment guide](https://docs.plane.so/docker-compose).
+If you want more control over your data, prefer to self-host Plane, please refer to our [deployment documentation](https://docs.plane.so/docker-compose).

-| Installation methods | Docs link                                                                                                                                          |
+| Installation Methods | Documentation Link                                                                                                                                           |
 | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Docker               | [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://docs.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://docs.plane.so/kubernetes) |

-`Instance admins` can configure instance settings with [God-mode](https://docs.plane.so/instance-admin).
+`Instance admin` can configure instance settings using our [God-mode](https://docs.plane.so/instance-admin) feature.

 ## 🚀 Features

@@ -1,3 +0,0 @@
-NEXT_PUBLIC_API_BASE_URL=""
-NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
-NEXT_PUBLIC_WEB_BASE_URL=""
@@ -10,43 +10,5 @@ module.exports = {
      },
    },
  },
-  rules: {
-    "import/order": [
-      "error",
-      {
-        groups: ["builtin", "external", "internal", "parent", "sibling",],
-        pathGroups: [
-          {
-            pattern: "react",
-            group: "external",
-            position: "before",
-          },
-          {
-            pattern: "lucide-react",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@headlessui/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@plane/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@/**",
-            group: "internal",
-          }
-        ],
-        pathGroupsExcludedImportTypes: ["builtin", "internal", "react"],
-        alphabetize: {
-          order: "asc",
-          caseInsensitive: true,
-        },
-      },
-    ],
-  },
+  rules: {}
 }
@@ -1,6 +1,3 @@
-# *****************************************************************************
-# STAGE 1: Build the project
-# *****************************************************************************
 FROM node:18-alpine AS builder
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
@@ -10,9 +7,6 @@ COPY . .

 RUN turbo prune --scope=admin --docker

-# *****************************************************************************
-# STAGE 2: Install dependencies & build the project
-# *****************************************************************************
 FROM node:18-alpine AS installer

 RUN apk add --no-cache libc6-compat
@@ -27,25 +21,13 @@ COPY --from=builder /app/out/full/ .
 COPY turbo.json turbo.json

 ARG NEXT_PUBLIC_API_BASE_URL=""
+ARG NEXT_PUBLIC_DEPLOY_WITH_NGINX=1
+
 ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
-
-ARG NEXT_PUBLIC_WEB_BASE_URL=""
-ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
-
-ARG NEXT_PUBLIC_SPACE_BASE_URL="/spaces"
-ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL
-
-ARG NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
-ENV NEXT_PUBLIC_ADMIN_BASE_PATH=$NEXT_PUBLIC_ADMIN_BASE_PATH
-
-ENV NEXT_TELEMETRY_DISABLED 1
-ENV TURBO_TELEMETRY_DISABLED 1
+ENV NEXT_PUBLIC_DEPLOY_WITH_NGINX=$NEXT_PUBLIC_DEPLOY_WITH_NGINX

 RUN yarn turbo run build --filter=admin

-# *****************************************************************************
-# STAGE 3: Copy the project and start it
-# *****************************************************************************
 FROM node:18-alpine AS runner
 WORKDIR /app

@@ -56,17 +38,12 @@ COPY --from=installer /app/admin/.next/standalone ./
 COPY --from=installer /app/admin/.next/static ./admin/.next/static
 COPY --from=installer /app/admin/public ./admin/public

+
 ARG NEXT_PUBLIC_API_BASE_URL=""
-ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+ARG NEXT_PUBLIC_DEPLOY_WITH_NGINX=1

-ARG NEXT_PUBLIC_WEB_BASE_URL=""
-ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
-
-ARG NEXT_PUBLIC_SPACE_BASE_URL="/spaces"
-ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL
-
-ARG NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
-ENV NEXT_PUBLIC_ADMIN_BASE_PATH=$NEXT_PUBLIC_ADMIN_BASE_PATH
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL 
+ENV NEXT_PUBLIC_DEPLOY_WITH_NGINX=$NEXT_PUBLIC_DEPLOY_WITH_NGINX

 ENV NEXT_TELEMETRY_DISABLED 1
 ENV TURBO_TELEMETRY_DISABLED 1
@@ -1,17 +0,0 @@
-FROM node:18-alpine
-RUN apk add --no-cache libc6-compat
-# Set working directory
-WORKDIR /app
-
-COPY . .
-
-RUN yarn global add turbo
-RUN yarn install
-
-ENV NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
-
-EXPOSE 3000
-
-VOLUME [ "/app/node_modules", "/app/admin/node_modules" ]
-
-CMD ["yarn", "dev", "--filter=admin"]
@@ -1,12 +1,12 @@
 import { FC } from "react";
 import { useForm } from "react-hook-form";
 import { Lightbulb } from "lucide-react";
-import { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types";
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types";
 // components
-import { ControllerInput, TControllerInputFormField } from "@/components/common";
+import { ControllerInput, TControllerInputFormField } from "components/common";
 // hooks
-import { useInstance } from "@/hooks/store";
+import { useInstance } from "@/hooks";

 type IInstanceAIForm = {
  config: IFormattedInstanceConfiguration;
@@ -96,7 +96,7 @@ export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
          <div className="pb-1 text-xl font-medium text-custom-text-100">OpenAI</div>
          <div className="text-sm font-normal text-custom-text-300">If you use ChatGPT, this is for you.</div>
        </div>
-        <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-12 gap-y-8 lg:grid-cols-3">
+        <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-16 gap-y-8 lg:grid-cols-3">
          {aiFormFields.map((field) => (
            <ControllerInput
              key={field.key}
@@ -0,0 +1 @@
+export * from "./ai-config-form";
@@ -2,8 +2,20 @@

 import { ReactNode } from "react";
 // layouts
-import { AdminLayout } from "@/layouts/admin-layout";
+import { AdminLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";

-export default function AILayout({ children }: { children: ReactNode }) {
-  return <AdminLayout>{children}</AdminLayout>;
+interface AILayoutProps {
+  children: ReactNode;
 }
+
+const AILayout = ({ children }: AILayoutProps) => (
+  <InstanceWrapper>
+    <AuthWrapper>
+      <AdminLayout>{children}</AdminLayout>
+    </AuthWrapper>
+  </InstanceWrapper>
+);
+
+export default AILayout;
@@ -1,14 +1,13 @@
 "use client";

-import { observer } from "mobx-react-lite";
 import useSWR from "swr";
+import { observer } from "mobx-react-lite";
 import { Loader } from "@plane/ui";
 // components
 import { PageHeader } from "@/components/core";
+import { InstanceAIForm } from "./components";
 // hooks
-import { useInstance } from "@/hooks/store";
-// components
-import { InstanceAIForm } from "./form";
+import { useInstance } from "@/hooks";

 const InstanceAIPage = observer(() => {
  // store
@@ -0,0 +1 @@
+export * from "./authentication-method-card";
@@ -3,11 +3,11 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-import { ToggleSwitch } from "@plane/ui";
-import { useInstance } from "@/hooks/store";
+import { useInstance } from "@/hooks";
 // ui
+import { ToggleSwitch } from "@plane/ui";
 // types
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";

 type Props = {
  disabled: boolean;
@@ -1,5 +1,3 @@
+export * from "./common";
 export * from "./email-config-switch";
 export * from "./password-config-switch";
-export * from "./authentication-method-card";
-export * from "./github-config";
-export * from "./google-config";
@@ -3,11 +3,11 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-import { ToggleSwitch } from "@plane/ui";
-import { useInstance } from "@/hooks/store";
+import { useInstance } from "@/hooks";
 // ui
+import { ToggleSwitch } from "@plane/ui";
 // types
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";

 type Props = {
  disabled: boolean;
@@ -1,9 +1,8 @@
 import { FC, useState } from "react";
-import isEmpty from "lodash/isEmpty";
-import Link from "next/link";
 import { useForm } from "react-hook-form";
-// types
-import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
+import Link from "next/link";
+// hooks
+import { useInstance } from "@/hooks";
 // ui
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 // components
@@ -13,11 +12,12 @@ import {
  CopyField,
  TControllerInputFormField,
  TCopyField,
-} from "@/components/common";
+} from "components/common";
+// types
+import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
 // helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
-// hooks
-import { useInstance } from "@/hooks/store";
+import { API_BASE_URL, cn } from "helpers/common.helper";
+import isEmpty from "lodash/isEmpty";

 type Props = {
  config: IFormattedInstanceConfiguration;
@@ -46,7 +46,7 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {

  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";

-  const GITHUB_FORM_FIELDS: TControllerInputFormField[] = [
+  const githubFormFields: TControllerInputFormField[] = [
    {
      key: "GITHUB_CLIENT_ID",
      type: "text",
@@ -55,7 +55,6 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
        <>
          You will get this from your{" "}
          <a
-            tabIndex={-1}
            href="https://github.com/settings/applications/new"
            target="_blank"
            className="text-custom-primary-100 hover:underline"
@@ -77,7 +76,6 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
        <>
          Your client secret is also found in your{" "}
          <a
-            tabIndex={-1}
            href="https://github.com/settings/applications/new"
            target="_blank"
            className="text-custom-primary-100 hover:underline"
@@ -93,7 +91,7 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
    },
  ];

-  const GITHUB_SERVICE_FIELD: TCopyField[] = [
+  const githubCopyFields: TCopyField[] = [
    {
      key: "Origin_URL",
      label: "Origin URL",
@@ -102,7 +100,6 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
        <>
          We will auto-generate this. Paste this into the Authorized origin URL field{" "}
          <a
-            tabIndex={-1}
            href="https://github.com/settings/applications/new"
            target="_blank"
            className="text-custom-primary-100 hover:underline"
@@ -121,7 +118,6 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
        <>
          We will auto-generate this. Paste this into your Authorized Callback URI field{" "}
          <a
-            tabIndex={-1}
            href="https://github.com/settings/applications/new"
            target="_blank"
            className="text-custom-primary-100 hover:underline"
@@ -138,16 +134,13 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
    const payload: Partial<GithubConfigFormValues> = { ...formData };

    await updateInstanceConfigurations(payload)
-      .then((response = []) => {
+      .then(() => {
        setToast({
          type: TOAST_TYPE.SUCCESS,
          title: "Success",
          message: "Github Configuration Settings updated successfully",
        });
-        reset({
-          GITHUB_CLIENT_ID: response.find((item) => item.key === "GITHUB_CLIENT_ID")?.value,
-          GITHUB_CLIENT_SECRET: response.find((item) => item.key === "GITHUB_CLIENT_SECRET")?.value,
-        });
+        reset();
      })
      .catch((err) => console.error(err));
  };
@@ -170,7 +163,7 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1">
            <div className="pt-2 text-xl font-medium">Configuration</div>
-            {GITHUB_FORM_FIELDS.map((field) => (
+            {githubFormFields.map((field) => (
              <ControllerInput
                key={field.key}
                control={control}
@@ -201,7 +194,7 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
          <div className="col-span-2 md:col-span-1">
            <div className="flex flex-col gap-y-4 px-6 py-4 my-2 bg-custom-background-80/60 rounded-lg">
              <div className="pt-2 text-xl font-medium">Service provider details</div>
-              {GITHUB_SERVICE_FIELD.map((field) => (
+              {githubCopyFields.map((field) => (
                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
              ))}
            </div>
@@ -0,0 +1,2 @@
+export * from "./root";
+export * from "./github-config-form";
@@ -1,18 +1,18 @@
 "use client";

 import React from "react";
-import { observer } from "mobx-react-lite";
 import Link from "next/link";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useInstance } from "@/hooks";
+// ui
+import { ToggleSwitch, getButtonStyling } from "@plane/ui";
 // icons
 import { Settings2 } from "lucide-react";
 // types
 import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-// ui
-import { ToggleSwitch, getButtonStyling } from "@plane/ui";
 // helpers
-import { cn } from "@/helpers/common.helper";
-// hooks
-import { useInstance } from "@/hooks/store";
+import { cn } from "helpers/common.helper";

 type Props = {
  disabled: boolean;
@@ -1,23 +1,22 @@
 "use client";

 import { useState } from "react";
-import { observer } from "mobx-react-lite";
 import Image from "next/image";
 import { useTheme } from "next-themes";
+import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
 import { PageHeader } from "@/components/core";
+import { AuthenticationMethodCard } from "../components";
+import { InstanceGithubConfigForm } from "./components";
+// hooks
+import { useInstance } from "@/hooks";
 // helpers
 import { resolveGeneralTheme } from "@/helpers/common.helper";
-// hooks
-import { useInstance } from "@/hooks/store";
 // icons
 import githubLightModeImage from "@/public/logos/github-black.png";
 import githubDarkModeImage from "@/public/logos/github-white.png";
-// local components
-import { AuthenticationMethodCard } from "../components";
-import { InstanceGithubConfigForm } from "./form";

 const InstanceGithubAuthenticationPage = observer(() => {
  // store
@@ -1,9 +1,8 @@
 import { FC, useState } from "react";
-import isEmpty from "lodash/isEmpty";
-import Link from "next/link";
 import { useForm } from "react-hook-form";
-// types
-import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
+import Link from "next/link";
+// hooks
+import { useInstance } from "@/hooks";
 // ui
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 // components
@@ -13,11 +12,12 @@ import {
  CopyField,
  TControllerInputFormField,
  TCopyField,
-} from "@/components/common";
+} from "components/common";
+// types
+import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
 // helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
-// hooks
-import { useInstance } from "@/hooks/store";
+import { API_BASE_URL, cn } from "helpers/common.helper";
+import isEmpty from "lodash/isEmpty";

 type Props = {
  config: IFormattedInstanceConfiguration;
@@ -46,7 +46,7 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {

  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";

-  const GOOGLE_FORM_FIELDS: TControllerInputFormField[] = [
+  const googleFormFields: TControllerInputFormField[] = [
    {
      key: "GOOGLE_CLIENT_ID",
      type: "text",
@@ -55,7 +55,6 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
        <>
          Your client ID lives in your Google API Console.{" "}
          <a
-            tabIndex={-1}
            href="https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#creatingcred"
            target="_blank"
            className="text-custom-primary-100 hover:underline"
@@ -77,7 +76,6 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
        <>
          Your client secret should also be in your Google API Console.{" "}
          <a
-            tabIndex={-1}
            href="https://developers.google.com/identity/oauth2/web/guides/get-google-api-clientid"
            target="_blank"
            className="text-custom-primary-100 hover:underline"
@@ -93,7 +91,7 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
    },
  ];

-  const GOOGLE_SERVICE_DETAILS: TCopyField[] = [
+  const googleCopyFeilds: TCopyField[] = [
    {
      key: "Origin_URL",
      label: "Origin URL",
@@ -136,16 +134,13 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
    const payload: Partial<GoogleConfigFormValues> = { ...formData };

    await updateInstanceConfigurations(payload)
-      .then((response = []) => {
+      .then(() => {
        setToast({
          type: TOAST_TYPE.SUCCESS,
          title: "Success",
          message: "Google Configuration Settings updated successfully",
        });
-        reset({
-          GOOGLE_CLIENT_ID: response.find((item) => item.key === "GOOGLE_CLIENT_ID")?.value,
-          GOOGLE_CLIENT_SECRET: response.find((item) => item.key === "GOOGLE_CLIENT_SECRET")?.value,
-        });
+        reset();
      })
      .catch((err) => console.error(err));
  };
@@ -168,7 +163,7 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1">
            <div className="pt-2 text-xl font-medium">Configuration</div>
-            {GOOGLE_FORM_FIELDS.map((field) => (
+            {googleFormFields.map((field) => (
              <ControllerInput
                key={field.key}
                control={control}
@@ -199,7 +194,7 @@ export const InstanceGoogleConfigForm: FC<Props> = (props) => {
          <div className="col-span-2 md:col-span-1">
            <div className="flex flex-col gap-y-4 px-6 py-4 my-2 bg-custom-background-80/60 rounded-lg">
              <div className="pt-2 text-xl font-medium">Service provider details</div>
-              {GOOGLE_SERVICE_DETAILS.map((field) => (
+              {googleCopyFeilds.map((field) => (
                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
              ))}
            </div>
@@ -0,0 +1,2 @@
+export * from "./root";
+export * from "./google-config-form";
@@ -1,18 +1,18 @@
 "use client";

 import React from "react";
-import { observer } from "mobx-react-lite";
 import Link from "next/link";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useInstance } from "@/hooks";
+// ui
+import { ToggleSwitch, getButtonStyling } from "@plane/ui";
 // icons
 import { Settings2 } from "lucide-react";
 // types
 import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-// ui
-import { ToggleSwitch, getButtonStyling } from "@plane/ui";
 // helpers
-import { cn } from "@/helpers/common.helper";
-// hooks
-import { useInstance } from "@/hooks/store";
+import { cn } from "helpers/common.helper";

 type Props = {
  disabled: boolean;
@@ -1,19 +1,18 @@
 "use client";

 import { useState } from "react";
-import { observer } from "mobx-react-lite";
 import Image from "next/image";
+import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
 import { PageHeader } from "@/components/core";
+import { AuthenticationMethodCard } from "../components";
+import { InstanceGoogleConfigForm } from "./components";
 // hooks
-import { useInstance } from "@/hooks/store";
+import { useInstance } from "@/hooks";
 // icons
 import GoogleLogo from "@/public/logos/google-logo.svg";
-// local components
-import { AuthenticationMethodCard } from "../components";
-import { InstanceGoogleConfigForm } from "./form";

 const InstanceGoogleAuthenticationPage = observer(() => {
  // store
@@ -2,8 +2,20 @@

 import { ReactNode } from "react";
 // layouts
-import { AdminLayout } from "@/layouts/admin-layout";
+import { AdminLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";

-export default function AuthenticationLayout({ children }: { children: ReactNode }) {
-  return <AdminLayout>{children}</AdminLayout>;
+interface AuthenticationLayoutProps {
+  children: ReactNode;
 }
+
+const AuthenticationLayout = ({ children }: AuthenticationLayoutProps) => (
+  <InstanceWrapper>
+    <AuthWrapper>
+      <AdminLayout>{children}</AdminLayout>
+    </AuthWrapper>
+  </InstanceWrapper>
+);
+
+export default AuthenticationLayout;
@@ -1,31 +1,26 @@
 "use client";

 import { useState } from "react";
-import { observer } from "mobx-react-lite";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
+import { observer } from "mobx-react-lite";
 import { Mails, KeyRound } from "lucide-react";
-import { TInstanceConfigurationKeys } from "@plane/types";
 import { Loader, setPromiseToast } from "@plane/ui";
+import { TInstanceConfigurationKeys } from "@plane/types";
 // components
+import { AuthenticationMethodCard, EmailCodesConfiguration, PasswordLoginConfiguration } from "./components";
+import { GoogleConfiguration } from "./google/components";
+import { GithubConfiguration } from "./github/components";
 import { PageHeader } from "@/components/core";
 // hooks
+import { useInstance } from "@/hooks";
 // helpers
 import { resolveGeneralTheme } from "@/helpers/common.helper";
-import { useInstance } from "@/hooks/store";
 // images
+import GoogleLogo from "@/public/logos/google-logo.svg";
 import githubLightModeImage from "@/public/logos/github-black.png";
 import githubDarkModeImage from "@/public/logos/github-white.png";
-import GoogleLogo from "@/public/logos/google-logo.svg";
-// local components
-import {
-  AuthenticationMethodCard,
-  EmailCodesConfiguration,
-  PasswordLoginConfiguration,
-  GithubConfiguration,
-  GoogleConfiguration,
-} from "./components";

 type TInstanceAuthenticationMethodCard = {
  key: string;
@@ -0,0 +1,160 @@
+import { FC, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+// hooks
+import { useInstance } from "@/hooks";
+// ui
+import { Button, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
+// components
+import { ControllerInput, TControllerInputFormField } from "components/common";
+import { SendTestEmailModal } from "./test-email-modal";
+// types
+import { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from "@plane/types";
+
+type IInstanceEmailForm = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type EmailFormValues = Record<TInstanceEmailConfigurationKeys, string>;
+
+export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
+  const { config } = props;
+  // states
+  const [isSendTestEmailModalOpen, setIsSendTestEmailModalOpen] = useState(false);
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    watch,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<EmailFormValues>({
+    defaultValues: {
+      EMAIL_HOST: config["EMAIL_HOST"],
+      EMAIL_PORT: config["EMAIL_PORT"],
+      EMAIL_HOST_USER: config["EMAIL_HOST_USER"],
+      EMAIL_HOST_PASSWORD: config["EMAIL_HOST_PASSWORD"],
+      EMAIL_USE_TLS: config["EMAIL_USE_TLS"],
+      // EMAIL_USE_SSL: config["EMAIL_USE_SSL"],
+      EMAIL_FROM: config["EMAIL_FROM"],
+    },
+  });
+
+  const emailFormFields: TControllerInputFormField[] = [
+    {
+      key: "EMAIL_HOST",
+      type: "text",
+      label: "Host",
+      placeholder: "email.google.com",
+      error: Boolean(errors.EMAIL_HOST),
+      required: true,
+    },
+    {
+      key: "EMAIL_PORT",
+      type: "text",
+      label: "Port",
+      placeholder: "8080",
+      error: Boolean(errors.EMAIL_PORT),
+      required: true,
+    },
+    {
+      key: "EMAIL_HOST_USER",
+      type: "text",
+      label: "Username",
+      placeholder: "getitdone@projectplane.so",
+      error: Boolean(errors.EMAIL_HOST_USER),
+      required: true,
+    },
+    {
+      key: "EMAIL_HOST_PASSWORD",
+      type: "password",
+      label: "Password",
+      placeholder: "Password",
+      error: Boolean(errors.EMAIL_HOST_PASSWORD),
+      required: true,
+    },
+    {
+      key: "EMAIL_FROM",
+      type: "text",
+      label: "From address",
+      description:
+        "This is the email address your users will see when getting emails from this instance. You will need to verify this address.",
+      placeholder: "no-reply@projectplane.so",
+      error: Boolean(errors.EMAIL_FROM),
+      required: true,
+    },
+  ];
+
+  const onSubmit = async (formData: EmailFormValues) => {
+    const payload: Partial<EmailFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "Email Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <SendTestEmailModal isOpen={isSendTestEmailModalOpen} handleClose={() => setIsSendTestEmailModalOpen(false)} />
+        <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-center justify-between gap-x-20 gap-y-10 lg:grid-cols-2">
+          {emailFormFields.map((field) => (
+            <ControllerInput
+              key={field.key}
+              control={control}
+              type={field.type}
+              name={field.key}
+              label={field.label}
+              description={field.description}
+              placeholder={field.placeholder}
+              error={field.error}
+              required={field.required}
+            />
+          ))}
+        </div>
+        <div className="flex w-full max-w-md flex-col gap-y-10 px-1">
+          <div className="mr-8 flex items-center gap-10 pt-4">
+            <div className="grow">
+              <div className="text-sm font-medium text-custom-text-100">
+                Turn TLS {Boolean(parseInt(watch("EMAIL_USE_TLS"))) ? "off" : "on"}
+              </div>
+              <div className="text-xs font-normal text-custom-text-300">
+                Use this if your email domain supports TLS.
+              </div>
+            </div>
+            <div className="shrink-0">
+              <Controller
+                control={control}
+                name="EMAIL_USE_TLS"
+                render={({ field: { value, onChange } }) => (
+                  <ToggleSwitch
+                    value={Boolean(parseInt(value))}
+                    onChange={() => {
+                      Boolean(parseInt(value)) === true ? onChange("0") : onChange("1");
+                    }}
+                    size="sm"
+                  />
+                )}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex max-w-4xl items-center py-1 gap-4">
+        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save changes"}
+        </Button>
+        <Button variant="outline-primary" onClick={() => setIsSendTestEmailModalOpen(true)} loading={isSubmitting}>
+          Send test email
+        </Button>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,2 @@
+export * from "./email-config-form";
+export * from "./test-email-modal";
@@ -3,7 +3,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // ui
 import { Button, Input } from "@plane/ui";
 // services
-import { InstanceService } from "@/services/instance.service";
+import { InstanceService } from "services/instance.service";

 type Props = {
  isOpen: boolean;
@@ -1,222 +0,0 @@
-import React, { FC, useMemo, useState } from "react";
-import { useForm } from "react-hook-form";
-// types
-import { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from "@plane/types";
-// ui
-import { Button, CustomSelect, TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { ControllerInput, TControllerInputFormField } from "@/components/common";
-// hooks
-import { useInstance } from "@/hooks/store";
-// local components
-import { SendTestEmailModal } from "./test-email-modal";
-
-type IInstanceEmailForm = {
-  config: IFormattedInstanceConfiguration;
-};
-
-type EmailFormValues = Record<TInstanceEmailConfigurationKeys, string>;
-
-type TEmailSecurityKeys = "EMAIL_USE_TLS" | "EMAIL_USE_SSL" | "NONE";
-
-const EMAIL_SECURITY_OPTIONS: { [key in TEmailSecurityKeys]: string } = {
-  EMAIL_USE_TLS: "TLS",
-  EMAIL_USE_SSL: "SSL",
-  NONE: "No email security",
-};
-
-export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
-  const { config } = props;
-  // states
-  const [isSendTestEmailModalOpen, setIsSendTestEmailModalOpen] = useState(false);
-  // store hooks
-  const { updateInstanceConfigurations } = useInstance();
-  // form data
-  const {
-    handleSubmit,
-    watch,
-    setValue,
-    control,
-    formState: { errors, isValid, isDirty, isSubmitting },
-  } = useForm<EmailFormValues>({
-    defaultValues: {
-      EMAIL_HOST: config["EMAIL_HOST"],
-      EMAIL_PORT: config["EMAIL_PORT"],
-      EMAIL_HOST_USER: config["EMAIL_HOST_USER"],
-      EMAIL_HOST_PASSWORD: config["EMAIL_HOST_PASSWORD"],
-      EMAIL_USE_TLS: config["EMAIL_USE_TLS"],
-      EMAIL_USE_SSL: config["EMAIL_USE_SSL"],
-      EMAIL_FROM: config["EMAIL_FROM"],
-    },
-  });
-
-  const emailFormFields: TControllerInputFormField[] = [
-    {
-      key: "EMAIL_HOST",
-      type: "text",
-      label: "Host",
-      placeholder: "email.google.com",
-      error: Boolean(errors.EMAIL_HOST),
-      required: true,
-    },
-    {
-      key: "EMAIL_PORT",
-      type: "text",
-      label: "Port",
-      placeholder: "8080",
-      error: Boolean(errors.EMAIL_PORT),
-      required: true,
-    },
-    {
-      key: "EMAIL_FROM",
-      type: "text",
-      label: "Sender email address",
-      description:
-        "This is the email address your users will see when getting emails from this instance. You will need to verify this address.",
-      placeholder: "no-reply@projectplane.so",
-      error: Boolean(errors.EMAIL_FROM),
-      required: true,
-    },
-  ];
-
-  const OptionalEmailFormFields: TControllerInputFormField[] = [
-    {
-      key: "EMAIL_HOST_USER",
-      type: "text",
-      label: "Username",
-      placeholder: "getitdone@projectplane.so",
-      error: Boolean(errors.EMAIL_HOST_USER),
-      required: false,
-    },
-    {
-      key: "EMAIL_HOST_PASSWORD",
-      type: "password",
-      label: "Password",
-      placeholder: "Password",
-      error: Boolean(errors.EMAIL_HOST_PASSWORD),
-      required: false,
-    },
-  ];
-
-  const onSubmit = async (formData: EmailFormValues) => {
-    const payload: Partial<EmailFormValues> = { ...formData };
-
-    await updateInstanceConfigurations(payload)
-      .then(() =>
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success",
-          message: "Email Settings updated successfully",
-        })
-      )
-      .catch((err) => console.error(err));
-  };
-
-  const useTLSValue = watch("EMAIL_USE_TLS");
-  const useSSLValue = watch("EMAIL_USE_SSL");
-  const emailSecurityKey: TEmailSecurityKeys = useMemo(() => {
-    if (useTLSValue === "1") return "EMAIL_USE_TLS";
-    if (useSSLValue === "1") return "EMAIL_USE_SSL";
-    return "NONE";
-  }, [useTLSValue, useSSLValue]);
-
-  const handleEmailSecurityChange = (key: TEmailSecurityKeys) => {
-    if (key === "EMAIL_USE_SSL") {
-      setValue("EMAIL_USE_TLS", "0");
-      setValue("EMAIL_USE_SSL", "1");
-    }
-    if (key === "EMAIL_USE_TLS") {
-      setValue("EMAIL_USE_TLS", "1");
-      setValue("EMAIL_USE_SSL", "0");
-    }
-    if (key === "NONE") {
-      setValue("EMAIL_USE_TLS", "0");
-      setValue("EMAIL_USE_SSL", "0");
-    }
-  };
-
-  return (
-    <div className="space-y-8">
-      <div>
-        <SendTestEmailModal isOpen={isSendTestEmailModalOpen} handleClose={() => setIsSendTestEmailModalOpen(false)} />
-        <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-start justify-between gap-10 lg:grid-cols-2">
-          {emailFormFields.map((field) => (
-            <ControllerInput
-              key={field.key}
-              control={control}
-              type={field.type}
-              name={field.key}
-              label={field.label}
-              description={field.description}
-              placeholder={field.placeholder}
-              error={field.error}
-              required={field.required}
-            />
-          ))}
-          <div className="flex flex-col gap-1">
-            <h4 className="text-sm text-custom-text-300">Email security</h4>
-            <CustomSelect
-              value={emailSecurityKey}
-              label={EMAIL_SECURITY_OPTIONS[emailSecurityKey]}
-              onChange={handleEmailSecurityChange}
-              buttonClassName="rounded-md border-custom-border-200"
-              optionsClassName="w-full"
-              input
-            >
-              {Object.entries(EMAIL_SECURITY_OPTIONS).map(([key, value]) => (
-                <CustomSelect.Option key={key} value={key} className="w-full">
-                  {value}
-                </CustomSelect.Option>
-              ))}
-            </CustomSelect>
-          </div>
-        </div>
-        <div className="flex flex-col gap-6 my-6 pt-4 border-t border-custom-border-100">
-          <div className="flex w-full max-w-md flex-col gap-y-10 px-1">
-            <div className="mr-8 flex items-center gap-10 pt-4">
-              <div className="grow">
-                <div className="text-sm font-medium text-custom-text-100">Authentication (optional)</div>
-                <div className="text-xs font-normal text-custom-text-300">
-                  We recommend setting up a username password for your SMTP server
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-center justify-between gap-10 lg:grid-cols-2">
-            {OptionalEmailFormFields.map((field) => (
-              <ControllerInput
-                key={field.key}
-                control={control}
-                type={field.type}
-                name={field.key}
-                label={field.label}
-                description={field.description}
-                placeholder={field.placeholder}
-                error={field.error}
-                required={field.required}
-              />
-            ))}
-          </div>
-        </div>
-      </div>
-      <div className="flex max-w-4xl items-center py-1 gap-4">
-        <Button
-          variant="primary"
-          onClick={handleSubmit(onSubmit)}
-          loading={isSubmitting}
-          disabled={!isValid || !isDirty}
-        >
-          {isSubmitting ? "Saving..." : "Save changes"}
-        </Button>
-        <Button
-          variant="outline-primary"
-          onClick={() => setIsSendTestEmailModalOpen(true)}
-          loading={isSubmitting}
-          disabled={!isValid}
-        >
-          Send test email
-        </Button>
-      </div>
-    </div>
-  );
-};
@@ -2,12 +2,20 @@

 import { ReactNode } from "react";
 // layouts
-import { AdminLayout } from "@/layouts/admin-layout";
+import { AdminLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";

 interface EmailLayoutProps {
  children: ReactNode;
 }

-const EmailLayout = ({ children }: EmailLayoutProps) => <AdminLayout>{children}</AdminLayout>;
+const EmailLayout = ({ children }: EmailLayoutProps) => (
+  <InstanceWrapper>
+    <AuthWrapper>
+      <AdminLayout>{children}</AdminLayout>
+    </AuthWrapper>
+  </InstanceWrapper>
+);

 export default EmailLayout;
@@ -1,14 +1,13 @@
 "use client";

-import { observer } from "mobx-react-lite";
 import useSWR from "swr";
+import { observer } from "mobx-react-lite";
 import { Loader } from "@plane/ui";
 // components
 import { PageHeader } from "@/components/core";
+import { InstanceEmailForm } from "./components";
 // hooks
-import { useInstance } from "@/hooks/store";
-// components
-import { InstanceEmailForm } from "./email-config-form";
+import { useInstance } from "@/hooks";

 const InstanceEmailPage = observer(() => {
  // store
@@ -1,9 +0,0 @@
-"use client";
-
-export default function RootErrorPage() {
-  return (
-    <div>
-      <p>Something went wrong.</p>
-    </div>
-  );
-}
@@ -1,23 +1,19 @@
-"use client";
 import { FC } from "react";
-import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
 import { Telescope } from "lucide-react";
-// types
 import { IInstance, IInstanceAdmin } from "@plane/types";
-// ui
 import { Button, Input, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
 // components
-import { ControllerInput } from "@/components/common";
+import { ControllerInput } from "components/common";
 // hooks
-import { useInstance } from "@/hooks/store";
+import { useInstance } from "@/hooks";

 export interface IGeneralConfigurationForm {
  instance: IInstance["instance"];
  instanceAdmins: IInstanceAdmin[];
 }

-export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer((props) => {
+export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = (props) => {
  const { instance, instanceAdmins } = props;
  // hooks
  const { updateInstanceInfo } = useInstance();
@@ -28,8 +24,8 @@ export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer(
    formState: { errors, isSubmitting },
  } = useForm<Partial<IInstance["instance"]>>({
    defaultValues: {
-      instance_name: instance?.instance_name,
-      is_telemetry_enabled: instance?.is_telemetry_enabled,
+      instance_name: instance.instance_name,
+      is_telemetry_enabled: instance.is_telemetry_enabled,
    },
  });

@@ -137,4 +133,4 @@ export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer(
      </div>
    </div>
  );
-});
+};
@@ -0,0 +1 @@
+export * from "./general-config-form";
@@ -1,12 +1,21 @@
+"use client";
+
 import { ReactNode } from "react";
-import { Metadata } from "next";
-// components
-import { AdminLayout } from "@/layouts/admin-layout";
+// layouts
+import { AdminLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";

-export const metadata: Metadata = {
-  title: "General Settings - God Mode",
-};
-
-export default function GeneralLayout({ children }: { children: ReactNode }) {
-  return <AdminLayout>{children}</AdminLayout>;
+interface GeneralLayoutProps {
+  children: ReactNode;
 }
+
+const GeneralLayout = ({ children }: GeneralLayoutProps) => (
+  <InstanceWrapper>
+    <AuthWrapper>
+      <AdminLayout>{children}</AdminLayout>
+    </AuthWrapper>
+  </InstanceWrapper>
+);
+
+export default GeneralLayout;
@@ -1,15 +1,18 @@
 "use client";
-import { observer } from "mobx-react-lite";
-// hooks
-import { useInstance } from "@/hooks/store";
-// components
-import { GeneralConfigurationForm } from "./form";

-function GeneralPage() {
+import { observer } from "mobx-react-lite";
+// components
+import { PageHeader } from "@/components/core";
+import { GeneralConfigurationForm } from "./components";
+// hooks
+import { useInstance } from "@/hooks";
+
+const GeneralPage = observer(() => {
  const { instance, instanceAdmins } = useInstance();
-  console.log("instance", instanceAdmins);
+
  return (
    <>
+      <PageHeader title="General Settings - God Mode" />
      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
          <div className="text-xl font-medium text-custom-text-100">General settings</div>
@@ -19,13 +22,13 @@ function GeneralPage() {
          </div>
        </div>
        <div className="flex-grow overflow-hidden overflow-y-auto">
-          {instance?.instance && instanceAdmins && (
-            <GeneralConfigurationForm instance={instance.instance} instanceAdmins={instanceAdmins} />
+          {instance?.instance && instanceAdmins && instanceAdmins?.length > 0 && (
+            <GeneralConfigurationForm instance={instance?.instance} instanceAdmins={instanceAdmins} />
          )}
        </div>
      </div>
    </>
  );
-}
+});

-export default observer(GeneralPage);
+export default GeneralPage;
@@ -1,11 +1,11 @@
 import { FC } from "react";
 import { useForm } from "react-hook-form";
-import { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
 // components
-import { ControllerInput } from "@/components/common";
+import { ControllerInput } from "components/common";
 // hooks
-import { useInstance } from "@/hooks/store";
+import { useInstance } from "@/hooks";

 type IInstanceImageConfigForm = {
  config: IFormattedInstanceConfiguration;
@@ -0,0 +1 @@
+export * from "./image-config-form";
@@ -1,11 +1,21 @@
+"use client";
+
 import { ReactNode } from "react";
 // layouts
-import { AdminLayout } from "@/layouts/admin-layout";
+import { AdminLayout } from "@/layouts";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";

 interface ImageLayoutProps {
  children: ReactNode;
 }

-const ImageLayout = ({ children }: ImageLayoutProps) => <AdminLayout>{children}</AdminLayout>;
+const ImageLayout = ({ children }: ImageLayoutProps) => (
+  <InstanceWrapper>
+    <AuthWrapper>
+      <AdminLayout>{children}</AdminLayout>
+    </AuthWrapper>
+  </InstanceWrapper>
+);

 export default ImageLayout;
@@ -1,14 +1,13 @@
 "use client";

-import { observer } from "mobx-react-lite";
 import useSWR from "swr";
+import { observer } from "mobx-react-lite";
 import { Loader } from "@plane/ui";
 // components
 import { PageHeader } from "@/components/core";
+import { InstanceImageConfigForm } from "./components";
 // hooks
-import { useInstance } from "@/hooks/store";
-// local
-import { InstanceImageConfigForm } from "./form";
+import { useInstance } from "@/hooks";

 const InstanceImagePage = observer(() => {
  // store
@@ -1,72 +1,27 @@
+"use client";
+
 import { ReactNode } from "react";
-import { Metadata } from "next";
-// components
-import { InstanceFailureView, InstanceSetupForm } from "@/components/instance";
-// helpers
-import { ASSET_PREFIX } from "@/helpers/common.helper";
-// layout
-import { DefaultLayout } from "@/layouts/default-layout";
+import { ThemeProvider } from "next-themes";
 // lib
-import { AppProvider } from "@/lib/app-providers";
+import { StoreProvider } from "@/lib/store-context";
+import { AppWrapper } from "@/lib/wrappers";
 // styles
 import "./globals.css";
-// services
-import { InstanceService } from "@/services/instance.service";

-const instanceService = new InstanceService();
-
-export const metadata: Metadata = {
-  title: "Plane | Simple, extensible, open-source project management tool.",
-  description:
-    "Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.",
-  openGraph: {
-    title: "Plane | Simple, extensible, open-source project management tool.",
-    description:
-      "Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.",
-    url: "https://plane.so/",
-  },
-  keywords:
-    "software development, customer feedback, software, accelerate, code management, release management, project management, issue tracking, agile, scrum, kanban, collaboration",
-  twitter: {
-    site: "@planepowers",
-  },
-};
-
-export default async function RootLayout({ children }: { children: ReactNode }) {
-  const instanceDetails = await instanceService.getInstanceInfo().catch(() => null);
-
-  return (
-    <html lang="en">
-      <head>
-        <link rel="apple-touch-icon" sizes="180x180" href={`${ASSET_PREFIX}/favicon/apple-touch-icon.png`} />
-        <link rel="icon" type="image/png" sizes="32x32" href={`${ASSET_PREFIX}/favicon/favicon-32x32.png`} />
-        <link rel="icon" type="image/png" sizes="16x16" href={`${ASSET_PREFIX}/favicon/favicon-16x16.png`} />
-        <link rel="manifest" href={`${ASSET_PREFIX}/site.webmanifest.json`} />
-        <link rel="shortcut icon" href={`${ASSET_PREFIX}/favicon/favicon.ico`} />
-      </head>
-      <body className={`antialiased`}>
-        <AppProvider initialState={{ instance: instanceDetails }}>
-          {instanceDetails ? (
-            <>
-              {instanceDetails?.instance?.is_setup_done ? (
-                <>{children}</>
-              ) : (
-                <DefaultLayout>
-                  <div className="relative w-screen min-h-screen overflow-y-auto px-5 py-10 mx-auto flex justify-center items-center">
-                    <InstanceSetupForm />
-                  </div>
-                </DefaultLayout>
-              )}
-            </>
-          ) : (
-            <DefaultLayout>
-              <div className="relative w-screen min-h-[500px] overflow-y-auto px-5 mx-auto flex justify-center items-center">
-                <InstanceFailureView />
-              </div>
-            </DefaultLayout>
-          )}
-        </AppProvider>
-      </body>
-    </html>
-  );
+interface RootLayoutProps {
+  children: ReactNode;
 }
+
+const RootLayout = ({ children, ...pageProps }: RootLayoutProps) => (
+  <html lang="en">
+    <body className={`antialiased`}>
+      <StoreProvider {...pageProps}>
+        <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
+          <AppWrapper>{children}</AppWrapper>
+        </ThemeProvider>
+      </StoreProvider>
+    </body>
+  </html>
+);
+
+export default RootLayout;
@@ -3,15 +3,15 @@
 import { FC, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 // services
-import { Eye, EyeOff } from "lucide-react";
-import { Button, Input, Spinner } from "@plane/ui";
-// components
-import { Banner } from "@/components/common";
-// helpers
-import { API_BASE_URL } from "@/helpers/common.helper";
 import { AuthService } from "@/services/auth.service";
 // ui
+import { Button, Input } from "@plane/ui";
+// components
+import { Banner } from "components/common";
 // icons
+import { Eye, EyeOff } from "lucide-react";
+// helpers
+import { API_BASE_URL, cn } from "@/helpers/common.helper";

 // service initialization
 const authService = new AuthService();
@@ -52,13 +52,10 @@ export const InstanceSignInForm: FC = (props) => {
  const [showPassword, setShowPassword] = useState(false);
  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
  const [formData, setFormData] = useState<TFormData>(defaultFromData);
-  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
    setFormData((prev) => ({ ...prev, [key]: value }));

-  console.log("csrfToken", csrfToken);
-
  useEffect(() => {
    if (csrfToken === undefined)
      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
@@ -88,40 +85,27 @@ export const InstanceSignInForm: FC = (props) => {
    } else return { type: undefined, message: undefined };
  }, [errorCode, errorMessage]);

-  const isButtonDisabled = useMemo(
-    () => (!isSubmitting && formData.email && formData.password ? false : true),
-    [formData.email, formData.password, isSubmitting]
-  );
+  const isButtonDisabled = useMemo(() => (formData.email && formData.password ? false : true), [formData]);

  return (
-    <div className="relative w-full h-full overflow-hidden container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 flex flex-col justify-center items-center">
-      <div className="relative flex flex-col space-y-6">
+    <div className="relative w-full h-full overflow-hidden container mx-auto px-5 md:px-0 flex justify-center items-center">
+      <div className="w-full md:w-4/6 lg:w-3/6 xl:w-2/6 space-y-10">
        <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>
+          <h3 className="text-3xl font-bold">Manage your Plane instance</h3>
+          <p className="font-medium text-custom-text-400">Configure instance-wide settings to secure your instance</p>
        </div>

        {errorData.type && errorData?.message && <Banner type="error" message={errorData?.message} />}

-        <form
-          className="space-y-4"
-          method="POST"
-          action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
-          onSubmit={() => setIsSubmitting(true)}
-          onError={() => setIsSubmitting(false)}
-        >
+        <form className="space-y-4" method="POST" action={`${API_BASE_URL}/api/instances/admins/sign-in/`}>
          <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">
+            <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-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+              className="w-full"
              id="email"
              name="email"
              type="email"
@@ -129,17 +113,16 @@ export const InstanceSignInForm: FC = (props) => {
              placeholder="name@company.com"
              value={formData.email}
              onChange={(e) => handleFormChange("email", e.target.value)}
-              autoFocus
            />
          </div>

          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
+            <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-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+                className={cn("w-full pr-10")}
                id="password"
                name="password"
                type={showPassword ? "text" : "password"}
@@ -169,7 +152,7 @@ export const InstanceSignInForm: FC = (props) => {
          </div>
          <div className="py-2">
            <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
-              {isSubmitting ? <Spinner height="20px" width="20px" /> : "Sign in"}
+              Sign in
            </Button>
          </div>
        </form>
@@ -0,0 +1,19 @@
+"use client";
+
+import { ReactNode } from "react";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
+// helpers
+import { EAuthenticationPageType, EInstancePageType } from "@/helpers";
+
+interface LoginLayoutProps {
+  children: ReactNode;
+}
+
+const LoginLayout = ({ children }: LoginLayoutProps) => (
+  <InstanceWrapper pageType={EInstancePageType.POST_SETUP}>
+    <AuthWrapper authType={EAuthenticationPageType.NOT_AUTHENTICATED}>{children}</AuthWrapper>
+  </InstanceWrapper>
+);
+
+export default LoginLayout;
@@ -0,0 +1,18 @@
+"use client";
+
+// layouts
+import { DefaultLayout } from "@/layouts";
+// components
+import { PageHeader } from "@/components/core";
+import { InstanceSignInForm } from "./components";
+
+const LoginPage = () => (
+  <>
+    <PageHeader title="Setup - God Mode" />
+    <DefaultLayout>
+      <InstanceSignInForm />
+    </DefaultLayout>
+  </>
+);
+
+export default LoginPage;
@@ -1,11 +1,20 @@
-import { InstanceSignInForm } from "@/components/login";
-// layouts
-import { DefaultLayout } from "@/layouts/default-layout";
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+// components
+import { PageHeader } from "@/components/core";
+
+const RootPage = () => {
+  const router = useRouter();
+
+  useEffect(() => router.push("/login"), [router]);

-export default async function LoginPage() {
  return (
-    <DefaultLayout>
-      <InstanceSignInForm />
-    </DefaultLayout>
+    <>
+      <PageHeader title="Plane - God Mode" />
+    </>
  );
-}
+};
+
+export default RootPage;
@@ -0,0 +1 @@
+export * from "./sign-up-form";
@@ -2,17 +2,17 @@

 import { FC, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
-// icons
-import { Eye, EyeOff } from "lucide-react";
-// ui
-import { Button, Checkbox, Input, Spinner } from "@plane/ui";
-// components
-import { Banner, PasswordStrengthMeter } from "@/components/common";
-// helpers
-import { API_BASE_URL } from "@/helpers/common.helper";
-import { getPasswordStrength } from "@/helpers/password.helper";
 // services
 import { AuthService } from "@/services/auth.service";
+// ui
+import { Button, Checkbox, Input } from "@plane/ui";
+// components
+import { Banner, PasswordStrengthMeter } from "components/common";
+// icons
+import { Eye, EyeOff } from "lucide-react";
+// helpers
+import { API_BASE_URL, cn } from "@/helpers/common.helper";
+import { getPasswordStrength } from "@/helpers/password.helper";

 // service initialization
 const authService = new AuthService();
@@ -39,7 +39,6 @@ type TFormData = {
  email: string;
  company_name: string;
  password: string;
-  confirm_password?: string;
  is_telemetry_enabled: boolean;
 };

@@ -52,7 +51,7 @@ const defaultFromData: TFormData = {
  is_telemetry_enabled: true,
 };

-export const InstanceSetupForm: FC = (props) => {
+export const InstanceSignUpForm: FC = (props) => {
  const {} = props;
  // search params
  const searchParams = useSearchParams();
@@ -67,9 +66,6 @@ export const InstanceSetupForm: FC = (props) => {
  const [showPassword, setShowPassword] = useState(false);
  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
  const [formData, setFormData] = useState<TFormData>(defaultFromData);
-  const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);

  const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
    setFormData((prev) => ({ ...prev, [key]: value }));
@@ -111,27 +107,18 @@ export const InstanceSetupForm: FC = (props) => {

  const isButtonDisabled = useMemo(
    () =>
-      !isSubmitting &&
-      formData.first_name &&
-      formData.email &&
-      formData.password &&
-      getPasswordStrength(formData.password) >= 3 &&
-      formData.password === formData.confirm_password
+      formData.first_name && formData.email && formData.password && getPasswordStrength(formData.password) >= 3
        ? false
        : true,
-    [formData.confirm_password, formData.email, formData.first_name, formData.password, isSubmitting]
+    [formData]
  );

  return (
-    <div className="max-w-lg px-10 lg:max-w-md lg:px-5">
-      <div className="relative flex flex-col space-y-6">
+    <div className="relative w-full min-h-full h-auto overflow-hidden container mx-auto px-5 lg:px-0 flex justify-center items-center">
+      <div className="w-full md:w-4/6 lg:w-3/6 xl:w-2/6 space-y-10">
        <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>
+          <h3 className="text-3xl font-bold">Setup your Plane Instance</h3>
+          <p className="font-medium text-custom-text-400">Post setup you will be able to manage this Plane instance.</p>
        </div>

        {errorData.type &&
@@ -140,22 +127,16 @@ export const InstanceSetupForm: FC = (props) => {
            <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)}
-        >
+        <form className="space-y-4" method="POST" action={`${API_BASE_URL}/api/instances/admins/sign-up/`}>
          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />

          <div className="flex items-center gap-4">
            <div className="w-full space-y-1">
-              <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
+              <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-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+                className="w-full"
                id="first_name"
                name="first_name"
                type="text"
@@ -163,15 +144,14 @@ export const InstanceSetupForm: FC = (props) => {
                placeholder="Wilber"
                value={formData.first_name}
                onChange={(e) => handleFormChange("first_name", e.target.value)}
-                autoFocus
              />
            </div>
            <div className="w-full space-y-1">
-              <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="last_name">
-                Last name <span className="text-red-500">*</span>
+              <label className="text-sm text-custom-text-300 font-medium" htmlFor="last_name">
+                Last name
              </label>
              <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+                className="w-full"
                id="last_name"
                name="last_name"
                type="text"
@@ -184,11 +164,11 @@ export const InstanceSetupForm: FC = (props) => {
          </div>

          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
+            <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-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+              className="w-full"
              id="email"
              name="email"
              type="email"
@@ -204,11 +184,11 @@ export const InstanceSetupForm: FC = (props) => {
          </div>

          <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 className="text-sm text-custom-text-300 font-medium" htmlFor="company_name">
+              Company name
            </label>
            <Input
-              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+              className="w-full"
              id="company_name"
              name="company_name"
              type="text"
@@ -220,12 +200,12 @@ export const InstanceSetupForm: FC = (props) => {
          </div>

          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
+            <label className="text-sm text-custom-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"
+                className={cn("w-full pr-10")}
                id="password"
                name="password"
                type={showPassword ? "text" : "password"}
@@ -234,13 +214,10 @@ export const InstanceSetupForm: FC = (props) => {
                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)}
              />
              {showPassword ? (
                <button
                  type="button"
-                  tabIndex={-1}
                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
                  onClick={() => setShowPassword(false)}
                >
@@ -249,7 +226,6 @@ export const InstanceSetupForm: FC = (props) => {
              ) : (
                <button
                  type="button"
-                  tabIndex={-1}
                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
                  onClick={() => setShowPassword(true)}
                >
@@ -260,81 +236,28 @@ export const InstanceSetupForm: FC = (props) => {
            {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
              <p className="px-1 text-xs text-red-500">{errorData.message}</p>
            )}
-            {isPasswordInputFocused && <PasswordStrengthMeter password={formData.password} />}
-          </div>
-
-          <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 ? "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 ? (
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  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"
-                  tabIndex={-1}
-                  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>
-            {!!formData.confirm_password &&
-              formData.password !== formData.confirm_password &&
-              !isRetryPasswordInputFocused && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
+            <PasswordStrengthMeter password={formData.password} />
          </div>

          <div className="relative flex items-center pt-2 gap-2">
-            <div>
-              <Checkbox
-                id="is_telemetry_enabled"
-                name="is_telemetry_enabled"
-                value={formData.is_telemetry_enabled ? "True" : "False"}
-                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"
-            >
+            <Checkbox
+              id="is_telemetry_enabled"
+              name="is_telemetry_enabled"
+              value={formData.is_telemetry_enabled ? "True" : "False"}
+              onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
+              checked={formData.is_telemetry_enabled}
+            />
+            <label className="text-sm text-custom-text-300 font-medium cursor-pointer" htmlFor="is_telemetry_enabled">
              Allow Plane to anonymously collect usage events.
            </label>
-            <a
-              tabIndex={-1}
-              href="https://docs.plane.so/telemetry"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-sm font-medium text-blue-500 hover:text-blue-600"
-            >
+            <a href="#" 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"}
+              Continue
            </Button>
          </div>
        </form>
@@ -0,0 +1,19 @@
+"use client";
+
+import { ReactNode } from "react";
+// lib
+import { AuthWrapper, InstanceWrapper } from "@/lib/wrappers";
+// helpers
+import { EAuthenticationPageType, EInstancePageType } from "@/helpers";
+
+interface SetupLayoutProps {
+  children: ReactNode;
+}
+
+const SetupLayout = ({ children }: SetupLayoutProps) => (
+  <InstanceWrapper pageType={EInstancePageType.PRE_SETUP}>
+    <AuthWrapper authType={EAuthenticationPageType.NOT_AUTHENTICATED}>{children}</AuthWrapper>
+  </InstanceWrapper>
+);
+
+export default SetupLayout;
@@ -0,0 +1,16 @@
+// layouts
+import { DefaultLayout } from "@/layouts";
+// components
+import { PageHeader } from "@/components/core";
+import { InstanceSignUpForm } from "./components";
+
+const SetupPage = () => (
+  <>
+    <PageHeader title="Setup - God Mode" />
+    <DefaultLayout>
+      <InstanceSignUpForm />
+    </DefaultLayout>
+  </>
+);
+
+export default SetupPage;
@@ -1,14 +1,13 @@
 "use client";

 import { FC, useState, useRef } from "react";
-import { observer } from "mobx-react-lite";
-import Link from "next/link";
-import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
 import { Transition } from "@headlessui/react";
-import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
+import Link from "next/link";
+import { FileText, HelpCircle, MoveLeft } from "lucide-react";
 // hooks
-import { WEB_BASE_URL } from "@/helpers/common.helper";
-import { useTheme } from "@/hooks/store";
+import { useTheme } from "@/hooks";
+// icons
+import { DiscordIcon, GithubIcon } from "@plane/ui";
 // assets
 import packageJson from "package.json";

@@ -30,7 +29,7 @@ const helpOptions = [
  },
 ];

-export const HelpSection: FC = observer(() => {
+export const HelpSection: FC = () => {
  // states
  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
  // store
@@ -38,46 +37,40 @@ export const HelpSection: FC = observer(() => {
  // refs
  const helpOptionsRef = useRef<HTMLDivElement | null>(null);

-  const redirectionLink = encodeURI(WEB_BASE_URL + "/create-workspace");
-
  return (
    <div
      className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-4 py-2 ${
        isSidebarCollapsed ? "flex-col" : ""
      }`}
    >
-      <div className={`flex items-center gap-1 ${isSidebarCollapsed ? "flex-col justify-center" : "w-full"}`}>
-        <Tooltip tooltipContent="Redirect to plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>
-          <a
-            href={redirectionLink}
-            className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded border border-custom-primary-100/20 bg-custom-primary-100/10 text-xs text-custom-primary-200 whitespace-nowrap`}
-          >
-            <ExternalLink size={14} />
-            {!isSidebarCollapsed && "Redirect to plane"}
-          </a>
-        </Tooltip>
-        <Tooltip tooltipContent="Help" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
-          <button
-            type="button"
-            className={`ml-auto grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
-              isSidebarCollapsed ? "w-full" : ""
-            }`}
-            onClick={() => setIsNeedHelpOpen((prev) => !prev)}
-          >
-            <HelpCircle className="h-3.5 w-3.5" />
-          </button>
-        </Tooltip>
-        <Tooltip tooltipContent="Toggle sidebar" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
-          <button
-            type="button"
-            className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
-              isSidebarCollapsed ? "w-full" : ""
-            }`}
-            onClick={() => toggleSidebar(!isSidebarCollapsed)}
-          >
-            <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
-          </button>
-        </Tooltip>
+      <div
+        className={`flex items-center gap-1 ${isSidebarCollapsed ? "flex-col justify-center" : "w-full justify-end"}`}
+      >
+        <button
+          type="button"
+          className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
+            isSidebarCollapsed ? "w-full" : ""
+          }`}
+          onClick={() => setIsNeedHelpOpen((prev) => !prev)}
+        >
+          <HelpCircle className="h-3.5 w-3.5" />
+        </button>
+        <button
+          type="button"
+          className="grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:hidden"
+          onClick={() => toggleSidebar(!isSidebarCollapsed)}
+        >
+          <MoveLeft className="h-3.5 w-3.5" />
+        </button>
+        <button
+          type="button"
+          className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
+            isSidebarCollapsed ? "w-full" : ""
+          }`}
+          onClick={() => toggleSidebar(!isSidebarCollapsed)}
+        >
+          <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
+        </button>
      </div>

      <div className="relative">
@@ -130,4 +123,4 @@ export const HelpSection: FC = observer(() => {
      </div>
    </div>
  );
-});
+};
@@ -3,10 +3,10 @@
 import { FC, useEffect, useRef } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";
-import { useTheme } from "@/hooks/store";
+import { useTheme } from "@/hooks";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
+import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";

 export interface IInstanceSidebar {}

@@ -1,20 +1,15 @@
 "use client";

-import { Fragment, useEffect, useState } from "react";
-import { observer } from "mobx-react-lite";
+import { Fragment } from "react";
 import { useTheme as useNextTheme } from "next-themes";
+import { observer } from "mobx-react-lite";
 import { LogOut, UserCog2, Palette } from "lucide-react";
 import { Menu, Transition } from "@headlessui/react";
-import { Avatar } from "@plane/ui";
+import { Avatar, TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
-import { useTheme, useUser } from "@/hooks/store";
+import { useTheme, useUser } from "@/hooks";
 // helpers
-// services
-import { AuthService } from "@/services/auth.service";
-
-// service initialization
-const authService = new AuthService();
+import { API_BASE_URL } from "@/helpers/common.helper";

 export const SidebarDropdown = observer(() => {
  // store hooks
@@ -22,60 +17,22 @@ export const SidebarDropdown = observer(() => {
  const { currentUser, signOut } = useUser();
  // hooks
  const { resolvedTheme, setTheme } = useNextTheme();
-  // state
-  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
+
+  const handleSignOut = async () => {
+    await signOut().catch(() =>
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Failed to sign out. Please try again.",
+      })
+    );
+  };

  const handleThemeSwitch = () => {
    const newTheme = resolvedTheme === "dark" ? "light" : "dark";
    setTheme(newTheme);
  };

-  const handleSignOut = () => signOut();
-
-  const getSidebarMenuItems = () => (
-    <Menu.Items
-      className={cn(
-        "absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-custom-sidebar-border-100 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none",
-        {
-          "left-4": isSidebarCollapsed,
-        }
-      )}
-    >
-      <div className="flex flex-col gap-2.5 pb-2">
-        <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
-      </div>
-      <div className="py-2">
-        <Menu.Item
-          as="button"
-          type="button"
-          className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
-          onClick={handleThemeSwitch}
-        >
-          <Palette className="h-4 w-4 stroke-[1.5]" />
-          Switch to {resolvedTheme === "dark" ? "light" : "dark"} mode
-        </Menu.Item>
-      </div>
-      <div className="py-2">
-        <form method="POST" action={`${API_BASE_URL}/api/instances/admins/sign-out/`} onSubmit={handleSignOut}>
-          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-          <Menu.Item
-            as="button"
-            type="submit"
-            className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
-          >
-            <LogOut className="h-4 w-4 stroke-[1.5]" />
-            Sign out
-          </Menu.Item>
-        </form>
-      </div>
-    </Menu.Items>
-  );
-
-  useEffect(() => {
-    if (csrfToken === undefined)
-      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
-  }, [csrfToken]);
-
  return (
    <div className="flex max-h-[3.75rem] items-center gap-x-5 gap-y-2 border-b border-custom-sidebar-border-200 px-4 py-3.5">
      <div className="h-full w-full truncate">
@@ -84,30 +41,9 @@ export const SidebarDropdown = observer(() => {
            isSidebarCollapsed ? "justify-center" : ""
          }`}
        >
-          <Menu as="div" className="flex-shrink-0">
-            <Menu.Button
-              className={cn("grid place-items-center outline-none", {
-                "cursor-default": !isSidebarCollapsed,
-              })}
-            >
-              <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded bg-custom-sidebar-background-80">
-                <UserCog2 className="h-5 w-5 text-custom-text-200" />
-              </div>
-            </Menu.Button>
-            {isSidebarCollapsed && (
-              <Transition
-                as={Fragment}
-                enter="transition ease-out duration-100"
-                enterFrom="transform opacity-0 scale-95"
-                enterTo="transform opacity-100 scale-100"
-                leave="transition ease-in duration-75"
-                leaveFrom="transform opacity-100 scale-100"
-                leaveTo="transform opacity-0 scale-95"
-              >
-                {getSidebarMenuItems()}
-              </Transition>
-            )}
-          </Menu>
+          <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded bg-custom-sidebar-background-80">
+            <UserCog2 className="h-5 w-5 text-custom-text-200" />
+          </div>

          {!isSidebarCollapsed && (
            <div className="flex w-full gap-2">
@@ -138,7 +74,38 @@ export const SidebarDropdown = observer(() => {
            leaveFrom="transform opacity-100 scale-100"
            leaveTo="transform opacity-0 scale-95"
          >
-            {getSidebarMenuItems()}
+            <Menu.Items
+              className="absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y
+          divide-custom-sidebar-border-100 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
+            >
+              <div className="flex flex-col gap-2.5 pb-2">
+                <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
+              </div>
+              <div className="py-2">
+                <Menu.Item
+                  as="button"
+                  type="button"
+                  className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+                  onClick={handleThemeSwitch}
+                >
+                  <Palette className="h-4 w-4 stroke-[1.5]" />
+                  Switch to {resolvedTheme === "dark" ? "light" : "dark"} mode
+                </Menu.Item>
+              </div>
+              <div className="py-2">
+                <form method="POST" action={`${API_BASE_URL}/api/instances/admins/sign-out/`}>
+                  <Menu.Item
+                    as="button"
+                    type="button"
+                    className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+                    onClick={handleSignOut}
+                  >
+                    <LogOut className="h-4 w-4 stroke-[1.5]" />
+                    Sign out
+                  </Menu.Item>
+                </form>
+              </div>
+            </Menu.Items>
          </Transition>
        </Menu>
      )}
@@ -3,9 +3,9 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { Menu } from "lucide-react";
-import { useTheme } from "@/hooks/store";
+import { useTheme } from "@/hooks";
 // icons
+import { Menu } from "lucide-react";

 export const SidebarHamburgerToggle: FC = observer(() => {
  const { isSidebarCollapsed, toggleSidebar } = useTheme();
@@ -1,14 +1,14 @@
 "use client";

-import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { observer } from "mobx-react-lite";
 import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
 import { Tooltip } from "@plane/ui";
 // hooks
-import { cn } from "@/helpers/common.helper";
-import { useTheme } from "@/hooks/store";
+import { useTheme } from "@/hooks";
 // helpers
+import { cn } from "@/helpers/common.helper";

 const INSTANCE_ADMIN_LINKS = [
  {
@@ -1,16 +1,16 @@
 "use client";

 import { FC } from "react";
-import { observer } from "mobx-react-lite";
 import { usePathname } from "next/navigation";
 // mobx
+import { observer } from "mobx-react-lite";
 // ui
 import { Settings } from "lucide-react";
 // icons
 import { Breadcrumbs } from "@plane/ui";
 // components
-import { SidebarHamburgerToggle } from "@/components/admin-sidebar";
 import { BreadcrumbLink } from "components/common";
+import { SidebarHamburgerToggle } from "@/components/admin-sidebar";

 export const InstanceHeader: FC = observer(() => {
  const pathName = usePathname();
@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { AlertCircle, CheckCircle2 } from "lucide-react";
+import { AlertCircle, CheckCircle } from "lucide-react";

 type TBanner = {
  type: "success" | "error";
@@ -10,21 +10,19 @@ export const Banner: FC<TBanner> = (props) => {
  const { type, message } = props;

  return (
-    <div
-      className={`rounded-md p-2 w-full border ${type === "error" ? "bg-red-500/5 border-red-400" : "bg-green-500/5 border-green-400"}`}
-    >
+    <div className={`rounded-md p-4 w-full ${type === "error" ? "bg-red-50" : "bg-green-50"}`}>
      <div className="flex items-center justify-center">
        <div className="flex-shrink-0">
          {type === "error" ? (
-            <span className="flex items-center justify-center h-6 w-6 rounded-full">
-              <AlertCircle className="h-5 w-5 text-red-600" aria-hidden="true" />
+            <span className="flex items-center justify-center h-6 w-6 bg-red-500 rounded-full">
+              <AlertCircle className="h-5 w-5 text-white" aria-hidden="true" />
            </span>
          ) : (
-            <CheckCircle2 className="h-5 w-5 text-green-600" aria-hidden="true" />
+            <CheckCircle className="h-5 w-5 text-green-400" aria-hidden="true" />
          )}
        </div>
-        <div className="ml-1">
-          <p className={`text-sm font-medium ${type === "error" ? "text-red-600" : "text-green-600"}`}>{message}</p>
+        <div className="ml-3">
+          <p className={`text-sm font-medium ${type === "error" ? "text-red-800" : "text-green-800"} `}>{message}</p>
        </div>
      </div>
    </div>
@@ -3,11 +3,9 @@
 import React, { useState } from "react";
 import { Controller, Control } from "react-hook-form";
 // ui
-import { Eye, EyeOff } from "lucide-react";
 import { Input } from "@plane/ui";
 // icons
-// helpers
-import { cn } from "@/helpers/common.helper";
+import { Eye, EyeOff } from "lucide-react";

 type Props = {
  control: Control<any>;
@@ -53,16 +51,13 @@ export const ControllerInput: React.FC<Props> = (props) => {
              ref={ref}
              hasError={error}
              placeholder={placeholder}
-              className={cn("w-full rounded-md font-medium", {
-                "pr-10": type === "password",
-              })}
+              className="w-full rounded-md font-medium"
            />
          )}
        />
        {type === "password" &&
          (showPassword ? (
            <button
-              tabIndex={-1}
              className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
              onClick={() => setShowPassword(false)}
            >
@@ -70,7 +65,6 @@ export const ControllerInput: React.FC<Props> = (props) => {
            </button>
          ) : (
            <button
-              tabIndex={-1}
              className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
              onClick={() => setShowPassword(true)}
            >
@@ -78,7 +72,7 @@ export const ControllerInput: React.FC<Props> = (props) => {
            </button>
          ))}
      </div>
-      {description && <p className="text-xs text-custom-text-300">{description}</p>}
+      {description && <p className="text-xs text-custom-text-400">{description}</p>}
    </div>
  );
 };
@@ -2,9 +2,9 @@

 import React from "react";
 // ui
-import { Copy } from "lucide-react";
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // icons
+import { Copy } from "lucide-react";

 type Props = {
  label: string;
@@ -40,7 +40,7 @@ export const CopyField: React.FC<Props> = (props) => {
        <p className="text-sm font-medium">{url}</p>
        <Copy size={18} color="#B9B9B9" />
      </Button>
-      <div className="text-xs text-custom-text-400">{description}</div>
+      <p className="text-xs text-custom-text-400">{description}</p>
    </div>
  );
 };
@@ -1,46 +0,0 @@
-import React from "react";
-import Image from "next/image";
-import { Button } from "@plane/ui";
-
-type Props = {
-  title: string;
-  description?: React.ReactNode;
-  image?: any;
-  primaryButton?: {
-    icon?: any;
-    text: string;
-    onClick: () => void;
-  };
-  secondaryButton?: React.ReactNode;
-  disabled?: boolean;
-};
-
-export const EmptyState: React.FC<Props> = ({
-  title,
-  description,
-  image,
-  primaryButton,
-  secondaryButton,
-  disabled = false,
-}) => (
-  <div className={`flex h-full w-full items-center justify-center`}>
-    <div className="flex w-full flex-col items-center text-center">
-      {image && <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />}
-      <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">{title}</h6>
-      {description && <p className="mb-7 px-5 text-custom-text-300 sm:mb-8">{description}</p>}
-      <div className="flex items-center gap-4">
-        {primaryButton && (
-          <Button
-            variant="primary"
-            prependIcon={primaryButton.icon}
-            onClick={primaryButton.onClick}
-            disabled={disabled}
-          >
-            {primaryButton.text}
-          </Button>
-        )}
-        {secondaryButton}
-      </div>
-    </div>
-  </div>
-);
@@ -4,5 +4,3 @@ export * from "./controller-input";
 export * from "./copy-field";
 export * from "./password-strength-meter";
 export * from "./banner";
-export * from "./empty-state";
-export * from "./logo-spinner";
@@ -1,17 +0,0 @@
-import Image from "next/image";
-import { useTheme } from "next-themes";
-// assets
-import LogoSpinnerDark from "@/public/images/logo-spinner-dark.gif";
-import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
-
-export const LogoSpinner = () => {
-  const { resolvedTheme } = useTheme();
-
-  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
-
-  return (
-    <div className="flex items-center justify-center">
-      <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" />
-    </div>
-  );
-};
@@ -1,10 +1,10 @@
 "use client";

 // helpers
-import { CircleCheck } from "lucide-react";
 import { cn } from "@/helpers/common.helper";
 import { getPasswordStrength } from "@/helpers/password.helper";
 // icons
+import { CircleCheck } from "lucide-react";

 type Props = {
  password: string;
@@ -1,4 +1,4 @@
-"use client";
+import Head from "next/head";

 type TPageHeader = {
  title?: string;
@@ -9,9 +9,9 @@ export const PageHeader: React.FC<TPageHeader> = (props) => {
  const { title = "God Mode - Plane", description = "Plane god mode" } = props;

  return (
-    <>
+    <Head>
      <title>{title}</title>
      <meta name="description" content={description} />
-    </>
+    </Head>
  );
 };
@@ -2,30 +2,35 @@

 import React from "react";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
 import Image from "next/image";
-import { useTheme as nextUseTheme } from "next-themes";
+import { useTheme } from "next-themes";
 // ui
 import { Button, getButtonStyling } from "@plane/ui";
 // helpers
 import { resolveGeneralTheme } from "helpers/common.helper";
-// hooks
-import { useInstance, useTheme } from "@/hooks/store";
 // icons
 import TakeoffIconLight from "/public/logos/takeoff-icon-light.svg";
 import TakeoffIconDark from "/public/logos/takeoff-icon-dark.svg";

-export const NewUserPopup: React.FC = observer(() => {
-  // hooks
-  const { isNewUserPopup, toggleNewUserPopup } = useTheme();
-  const { instance } = useInstance();
+type Props = {
+  isOpen: boolean;
+  onClose?: () => void;
+};
+
+export const CreateWorkspacePopup: React.FC<Props> = observer((props) => {
+  const { isOpen, onClose } = props;
  // theme
-  const { resolvedTheme } = nextUseTheme();
+  const { resolvedTheme } = useTheme();

-  const redirectionLink = `${instance?.config?.app_base_url ? `${instance?.config?.app_base_url}/create-workspace` : `/god-mode/`}`;
+  const handleClose = () => {
+    onClose && onClose();
+  };
+
+  if (!isOpen) return null;

-  if (!isNewUserPopup) return <></>;
  return (
-    <div className="absolute bottom-8 right-8 p-6 w-96 border border-custom-border-100 shadow-md rounded-lg bg-custom-background-100">
+    <div className="absolute bottom-8 right-6 p-6 w-96 border border-custom-border-100 shadow-md rounded-xl bg-custom-background-100 z-20">
      <div className="flex gap-4">
        <div className="grow">
          <div className="text-base font-semibold">Create workspace</div>
@@ -34,10 +39,10 @@ export const NewUserPopup: React.FC = observer(() => {
            workspace, you will need to login again.
          </div>
          <div className="flex items-center gap-4 pt-2">
-            <a href={redirectionLink} className={getButtonStyling("primary", "sm")}>
+            <Link href="/create-workspace" className={getButtonStyling("primary", "sm")}>
              Create workspace
-            </a>
-            <Button variant="neutral-primary" size="sm" onClick={toggleNewUserPopup}>
+            </Link>
+            <Button variant="neutral-primary" size="sm" onClick={handleClose}>
              Close
            </Button>
          </div>
@@ -1,3 +1 @@
 export * from "./instance-not-ready";
-export * from "./instance-failure-view";
-export * from "./setup-form";
@@ -1,42 +0,0 @@
-"use client";
-import { FC } from "react";
-import Image from "next/image";
-import { useTheme } from "next-themes";
-import { Button } from "@plane/ui";
-// assets
-import InstanceFailureDarkImage from "@/public/instance/instance-failure-dark.svg";
-import InstanceFailureImage from "@/public/instance/instance-failure.svg";
-
-type InstanceFailureViewProps = {
-  // mutate: () => void;
-};
-
-export const InstanceFailureView: FC<InstanceFailureViewProps> = () => {
-  const { resolvedTheme } = useTheme();
-
-  const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
-
-  const handleRetry = () => {
-    window.location.reload();
-  };
-
-  return (
-    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center mt-10">
-      <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 +1,8 @@
 "use client";

 import { FC } from "react";
-import Image from "next/image";
 import Link from "next/link";
+import Image from "next/image";
 import { Button } from "@plane/ui";
 // assets
 import PlaneTakeOffImage from "@/public/images/plane-takeoff.png";
@@ -11,9 +11,9 @@ export const InstanceNotReady: FC = () => (
  <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">
-        <h1 className="text-3xl font-bold pb-3">Welcome aboard Plane!</h1>
+        <h1 className="text-3xl font-bold">Welcome aboard Plane!</h1>
        <Image src={PlaneTakeOffImage} alt="Plane Logo" />
-        <p className="font-medium text-base text-onboarding-text-400">
+        <p className="font-medium text-base text-custom-text-400">
          Get started by setting up your instance and workspace
        </p>
      </div>
@@ -1,8 +0,0 @@
-export const SITE_NAME = "Plane | Simple, extensible, open-source project management tool.";
-export const SITE_TITLE = "Plane | Simple, extensible, open-source project management tool.";
-export const SITE_DESCRIPTION =
-  "Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.";
-export const SITE_KEYWORDS =
-  "software development, plan, ship, software, accelerate, code management, release management, project management, issue tracking, agile, scrum, kanban, collaboration";
-export const SITE_URL = "https://app.plane.so/";
-export const TWITTER_USER_NAME = "Plane | Simple, extensible, open-source project management tool.";
@@ -1,127 +0,0 @@
-import { ReactNode } from "react";
-import Link from "next/link";
-
-export enum EPageTypes {
-  PUBLIC = "PUBLIC",
-  NON_AUTHENTICATED = "NON_AUTHENTICATED",
-  SET_PASSWORD = "SET_PASSWORD",
-  ONBOARDING = "ONBOARDING",
-  AUTHENTICATED = "AUTHENTICATED",
-}
-
-export enum EAuthModes {
-  SIGN_IN = "SIGN_IN",
-  SIGN_UP = "SIGN_UP",
-}
-
-export enum EAuthSteps {
-  EMAIL = "EMAIL",
-  PASSWORD = "PASSWORD",
-  UNIQUE_CODE = "UNIQUE_CODE",
-}
-
-export enum EErrorAlertType {
-  BANNER_ALERT = "BANNER_ALERT",
-  INLINE_FIRST_NAME = "INLINE_FIRST_NAME",
-  INLINE_EMAIL = "INLINE_EMAIL",
-  INLINE_PASSWORD = "INLINE_PASSWORD",
-  INLINE_EMAIL_CODE = "INLINE_EMAIL_CODE",
-}
-
-export enum EAuthenticationErrorCodes {
-  // Admin
-  ADMIN_ALREADY_EXIST = "5150",
-  REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME = "5155",
-  INVALID_ADMIN_EMAIL = "5160",
-  INVALID_ADMIN_PASSWORD = "5165",
-  REQUIRED_ADMIN_EMAIL_PASSWORD = "5170",
-  ADMIN_AUTHENTICATION_FAILED = "5175",
-  ADMIN_USER_ALREADY_EXIST = "5180",
-  ADMIN_USER_DOES_NOT_EXIST = "5185",
-}
-
-export type TAuthErrorInfo = {
-  type: EErrorAlertType;
-  code: EAuthenticationErrorCodes;
-  title: string;
-  message: ReactNode;
-};
-
-const errorCodeMessages: {
-  [key in EAuthenticationErrorCodes]: { title: string; message: (email?: string | undefined) => ReactNode };
-} = {
-  // admin
-  [EAuthenticationErrorCodes.ADMIN_ALREADY_EXIST]: {
-    title: `Admin already exists`,
-    message: () => `Admin already exists. Please try again.`,
-  },
-  [EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME]: {
-    title: `Email, password and first name required`,
-    message: () => `Email, password and first name required. Please try again.`,
-  },
-  [EAuthenticationErrorCodes.INVALID_ADMIN_EMAIL]: {
-    title: `Invalid admin email`,
-    message: () => `Invalid admin email. Please try again.`,
-  },
-  [EAuthenticationErrorCodes.INVALID_ADMIN_PASSWORD]: {
-    title: `Invalid admin password`,
-    message: () => `Invalid admin password. Please try again.`,
-  },
-  [EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD]: {
-    title: `Email and password required`,
-    message: () => `Email and password required. Please try again.`,
-  },
-  [EAuthenticationErrorCodes.ADMIN_AUTHENTICATION_FAILED]: {
-    title: `Authentication failed`,
-    message: () => `Authentication failed. Please try again.`,
-  },
-  [EAuthenticationErrorCodes.ADMIN_USER_ALREADY_EXIST]: {
-    title: `Admin user already exists`,
-    message: () => (
-      <div>
-        Admin user already exists.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
-          Sign In
-        </Link>
-        &nbsp;now.
-      </div>
-    ),
-  },
-  [EAuthenticationErrorCodes.ADMIN_USER_DOES_NOT_EXIST]: {
-    title: `Admin user does not exist`,
-    message: () => (
-      <div>
-        Admin user does not exist.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
-          Sign In
-        </Link>
-        &nbsp;now.
-      </div>
-    ),
-  },
-};
-
-export const authErrorHandler = (
-  errorCode: EAuthenticationErrorCodes,
-  email?: string | undefined
-): TAuthErrorInfo | undefined => {
-  const bannerAlertErrorCodes = [
-    EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME,
-    EAuthenticationErrorCodes.INVALID_ADMIN_EMAIL,
-    EAuthenticationErrorCodes.INVALID_ADMIN_PASSWORD,
-    EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD,
-    EAuthenticationErrorCodes.ADMIN_AUTHENTICATION_FAILED,
-    EAuthenticationErrorCodes.ADMIN_USER_ALREADY_EXIST,
-    EAuthenticationErrorCodes.ADMIN_USER_DOES_NOT_EXIST,
-  ];
-
-  if (bannerAlertErrorCodes.includes(errorCode))
-    return {
-      type: EErrorAlertType.BANNER_ALERT,
-      code: errorCode,
-      title: errorCodeMessages[errorCode]?.title || "Error",
-      message: errorCodeMessages[errorCode]?.message(email) || "Something went wrong. Please try again.",
-    };
-
-  return undefined;
-};
@@ -1,16 +1,7 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";

-export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || "";
-
-export const ADMIN_BASE_PATH = process.env.NEXT_PUBLIC_ADMIN_BASE_PATH || "";
-
-export const SPACE_BASE_URL = process.env.NEXT_PUBLIC_SPACE_BASE_URL || "";
-export const SPACE_BASE_PATH = process.env.NEXT_PUBLIC_SPACE_BASE_PATH || "";
-
-export const WEB_BASE_URL = process.env.NEXT_PUBLIC_WEB_BASE_URL || "";
-
-export const ASSET_PREFIX = ADMIN_BASE_PATH;
+export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL ? process.env.NEXT_PUBLIC_API_BASE_URL : "";

 export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));

@@ -0,0 +1,6 @@
+export * from "./use-outside-click-detector";
+
+// store-hooks
+export * from "./store/use-theme";
+export * from "./store/use-instance";
+export * from "./store/use-user";
@@ -1,3 +0,0 @@
-export * from "./use-theme";
-export * from "./use-instance";
-export * from "./use-user";
@@ -1,6 +1,6 @@
 import { useContext } from "react";
 // store
-import { StoreContext } from "@/lib/app-providers";
+import { StoreContext } from "@/lib/store-context";
 import { IInstanceStore } from "@/store/instance.store";

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

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

 export const useUser = (): IUserStore => {
@@ -1,47 +1,13 @@
-"use client";
-import { FC, ReactNode, useEffect } from "react";
-import { observer } from "mobx-react-lite";
-import { useRouter } from "next/navigation";
-import useSWR from "swr";
-// components
+import { FC, ReactNode } from "react";
 import { InstanceSidebar } from "@/components/admin-sidebar";
 import { InstanceHeader } from "@/components/auth-header";
-import { LogoSpinner } from "@/components/common";
-import { NewUserPopup } from "@/components/new-user-popup";
-// hooks
-import { useInstance, useUser } from "@/hooks/store";

 type TAdminLayout = {
  children: ReactNode;
 };

-export const AdminLayout: FC<TAdminLayout> = observer((props) => {
+export const AdminLayout: FC<TAdminLayout> = (props) => {
  const { children } = props;
-  // router
-  const router = useRouter();
-  // hooks
-  const { fetchInstanceAdmins } = useInstance();
-  const { fetchCurrentUser, isUserLoggedIn } = useUser();
-
-  useSWR("INSTANCE_ADMINS", () => fetchInstanceAdmins());
-
-  useSWR("CURRENT_USER", () => fetchCurrentUser(), {
-    shouldRetryOnError: false,
-  });
-
-  useEffect(() => {
-    if (isUserLoggedIn === false) {
-      router.push("/");
-    }
-  }, [router, isUserLoggedIn]);
-
-  if (isUserLoggedIn === undefined) {
-    return (
-      <div className="relative flex h-screen w-full items-center justify-center">
-        <LogoSpinner />
-      </div>
-    );
-  }

  return (
    <div className="relative flex h-screen w-screen overflow-hidden">
@@ -50,7 +16,6 @@ export const AdminLayout: FC<TAdminLayout> = observer((props) => {
        <InstanceHeader />
        <div className="h-full w-full overflow-hidden">{children}</div>
      </main>
-      <NewUserPopup />
    </div>
  );
-});
+};
@@ -2,39 +2,31 @@

 import { FC, ReactNode } from "react";
 import Image from "next/image";
-import { useTheme } from "next-themes";
-// logo/ images
-import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
-import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
+import { usePathname } from "next/navigation";
+// logo
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";

 type TDefaultLayout = {
  children: ReactNode;
-  withoutBackground?: boolean;
 };

 export const DefaultLayout: FC<TDefaultLayout> = (props) => {
-  const { children, withoutBackground = false } = props;
-  // hooks
-  const { resolvedTheme } = useTheme();
-  const patternBackground = resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern;
+  const { children } = props;
+  const pathname = usePathname();
+
+  console.log("pathname", pathname);

  return (
-    <div className="relative">
-      <div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
-        <div className="container h-[110px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
-          <div className="flex items-center gap-x-2 py-10">
-            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
+    <div className="relative h-screen max-h-max w-full overflow-hidden overflow-y-auto flex flex-col">
+      <div className="flex-shrink-0 h-[120px]">
+        <div className="relative h-full container mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
+          <div className="flex items-center gap-x-2">
+            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
            <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
          </div>
        </div>
-        {!withoutBackground && (
-          <div className="absolute inset-0 z-0">
-            <Image src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
-          </div>
-        )}
-        <div className="relative z-10 mb-[110px] flex-grow">{children}</div>
      </div>
+      <div className="w-full flex-grow">{children}</div>
    </div>
  );
 };
@@ -0,0 +1,2 @@
+export * from "./default-layout";
+export * from "./admin-layout";
@@ -1,43 +0,0 @@
-"use client";
-
-import { ReactNode, createContext } from "react";
-import { ThemeProvider } from "next-themes";
-// store
-import { RootStore } from "@/store/root.store";
-// store initialization
-import { AppWrapper } from "./app-wrapper";
-
-let rootStore = new RootStore();
-
-export const StoreContext = createContext(rootStore);
-
-function initializeStore(initialData = {}) {
-  const singletonRootStore = rootStore ?? new RootStore();
-  // If your page has Next.js data fetching methods that use a Mobx store, it will
-  // get hydrated here, check `pages/ssg.js` and `pages/ssr.js` for more details
-  if (initialData) {
-    singletonRootStore.hydrate(initialData);
-  }
-  // For SSG and SSR always create a new store
-  if (typeof window === "undefined") return singletonRootStore;
-  // Create the store once in the client
-  if (!rootStore) rootStore = singletonRootStore;
-  return singletonRootStore;
-}
-
-export type AppProviderProps = {
-  children: ReactNode;
-  initialState: any;
-};
-
-export const AppProvider = ({ children, initialState = {} }: AppProviderProps) => {
-  const store = initializeStore(initialState);
-
-  return (
-    <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
-      <StoreContext.Provider value={store}>
-        <AppWrapper>{children}</AppWrapper>
-      </StoreContext.Provider>
-    </ThemeProvider>
-  );
-};
@@ -0,0 +1,21 @@
+"use client";
+
+import { ReactElement, createContext } from "react";
+// mobx store
+import { RootStore } from "@/store/root-store";
+
+let rootStore = new RootStore();
+
+export const StoreContext = createContext<RootStore>(rootStore);
+
+const initializeStore = () => {
+  const newRootStore = rootStore ?? new RootStore();
+  if (typeof window === "undefined") return newRootStore;
+  if (!rootStore) rootStore = newRootStore;
+  return newRootStore;
+};
+
+export const StoreProvider = ({ children }: { children: ReactElement }) => {
+  const store = initializeStore();
+  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
+};
@@ -3,14 +3,14 @@
 import { FC, ReactNode, useEffect, Suspense } from "react";
 import { observer } from "mobx-react-lite";
 import { SWRConfig } from "swr";
+// hooks
+import { useTheme, useUser } from "@/hooks";
 // ui
 import { Toast } from "@plane/ui";
 // constants
-import { SWR_CONFIG } from "@/constants/swr-config";
+import { SWR_CONFIG } from "constants/swr-config";
 // helpers
-import { resolveGeneralTheme } from "@/helpers/common.helper";
-// hooks
-import { useTheme, useUser } from "@/hooks/store";
+import { resolveGeneralTheme } from "helpers/common.helper";

 interface IAppWrapper {
  children: ReactNode;
@@ -0,0 +1,59 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import { Spinner } from "@plane/ui";
+// hooks
+import { useInstance, useUser } from "@/hooks";
+// helpers
+import { EAuthenticationPageType, EUserStatus } from "@/helpers";
+import { redirect } from "next/navigation";
+
+export interface IAuthWrapper {
+  children: ReactNode;
+  authType?: EAuthenticationPageType;
+}
+
+export const AuthWrapper: FC<IAuthWrapper> = observer((props) => {
+  const { children, authType = EAuthenticationPageType.AUTHENTICATED } = props;
+  // hooks
+  const { instance, fetchInstanceAdmins } = useInstance();
+  const { isLoading, userStatus, currentUser, fetchCurrentUser } = useUser();
+
+  useSWR("CURRENT_USER_DETAILS", () => fetchCurrentUser(), {
+    shouldRetryOnError: false,
+  });
+  useSWR("INSTANCE_ADMINS", () => fetchInstanceAdmins(), {
+    shouldRetryOnError: false,
+  });
+
+  if (isLoading)
+    return (
+      <div className="relative flex h-screen w-full items-center justify-center">
+        <Spinner />
+      </div>
+    );
+
+  if (userStatus && userStatus?.status === EUserStatus.ERROR)
+    return (
+      <div className="relative flex h-screen w-screen items-center justify-center">
+        Something went wrong. please try again later
+      </div>
+    );
+
+  if ([EAuthenticationPageType.AUTHENTICATED, EAuthenticationPageType.NOT_AUTHENTICATED].includes(authType)) {
+    if (authType === EAuthenticationPageType.NOT_AUTHENTICATED) {
+      if (currentUser === undefined) return <>{children}</>;
+      else redirect("/general/");
+    } else {
+      if (currentUser) return <>{children}</>;
+      else {
+        if (instance?.instance?.is_setup_done) redirect("/login/");
+        else redirect("/setup/");
+      }
+    }
+  }
+
+  return <>{children}</>;
+});
@@ -0,0 +1,3 @@
+export * from "./app-wrapper";
+export * from "./instance-wrapper";
+export * from "./auth-wrapper";
@@ -0,0 +1,58 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import { redirect, useSearchParams } from "next/navigation";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import { Spinner } from "@plane/ui";
+// layouts
+import { DefaultLayout } from "@/layouts";
+// components
+import { InstanceNotReady } from "@/components/instance";
+// hooks
+import { useInstance } from "@/hooks";
+// helpers
+import { EInstancePageType, EInstanceStatus } from "@/helpers";
+
+type TInstanceWrapper = {
+  children: ReactNode;
+  pageType?: EInstancePageType;
+};
+
+export const InstanceWrapper: FC<TInstanceWrapper> = observer((props) => {
+  const { children, pageType } = props;
+  const searchparams = useSearchParams();
+  const authEnabled = searchparams.get("auth_enabled") || "1";
+  // hooks
+  const { isLoading, instanceStatus, instance, fetchInstanceInfo } = useInstance();
+
+  useSWR("INSTANCE_INFORMATION", () => fetchInstanceInfo(), {
+    revalidateOnFocus: false,
+  });
+
+  if (isLoading)
+    return (
+      <div className="relative flex h-screen w-full items-center justify-center">
+        <Spinner />
+      </div>
+    );
+
+  if (instanceStatus && instanceStatus?.status === EInstanceStatus.ERROR)
+    return (
+      <div className="relative flex h-screen w-screen items-center justify-center">
+        Something went wrong. please try again later
+      </div>
+    );
+
+  if (instance?.instance?.is_setup_done === false && authEnabled === "1")
+    return (
+      <DefaultLayout>
+        <InstanceNotReady />
+      </DefaultLayout>
+    );
+
+  if (instance?.instance?.is_setup_done && pageType === EInstancePageType.PRE_SETUP) redirect("/");
+  if (!instance?.instance?.is_setup_done && pageType === EInstancePageType.POST_SETUP) redirect("/setup");
+
+  return <>{children}</>;
+});
@@ -7,7 +7,7 @@ const nextConfig = {
  images: {
    unoptimized: true,
  },
-  basePath: process.env.NEXT_PUBLIC_ADMIN_BASE_PATH || "",
+  basePath: process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX === "1" ? "/god-mode" : "",
 };

 module.exports = nextConfig;
@@ -4,17 +4,15 @@
  "private": true,
  "scripts": {
    "dev": "turbo run develop",
-    "develop": "next dev --port 3001",
+    "develop": "next dev --port 3333",
    "build": "next build",
    "preview": "next build && next start",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
-    "@headlessui/react": "^1.7.19",
    "@plane/types": "*",
    "@plane/ui": "*",
-    "@plane/constants": "*",
    "@tailwindcss/typography": "^0.5.9",
    "@types/lodash": "^4.17.0",
    "autoprefixer": "10.4.14",
@@ -24,11 +22,11 @@
    "lucide-react": "^0.356.0",
    "mobx": "^6.12.0",
    "mobx-react-lite": "^4.0.5",
-    "next": "^14.2.3",
+    "next": "^14.1.0",
    "next-themes": "^0.2.1",
-    "postcss": "^8.4.38",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "postcss": "8.4.23",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
    "react-hook-form": "^7.51.0",
    "swr": "^2.2.4",
    "tailwindcss": "3.3.2",
@@ -1,11 +0,0 @@
-{
-  "name": "",
-  "short_name": "",
-  "icons": [
-    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
-    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
-  ],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
-  "display": "standalone"
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
NarayanBavisetti	5436b489ab	chore: total issue count	2024-05-01 12:52:46 +05:30
Daniel AlbaandGitHub	12b4f74e1d	feat(dashboard): improve label readability (#4321 ) change none label for all time in dashbard filters	2024-05-01 00:08:18 +05:30
sriram veeraghanta	16da29b3ff	fix: merge conflicts resolved	2024-04-30 20:26:12 +05:30
sriram veeraghanta	c389c6b440	fix: merge conflicts resolved	2024-04-29 20:02:53 +05:30
gurusainath	56e99937bb	chore: updated admin-sidebar	2024-04-29 15:36:58 +05:30
sriram veeraghanta	7061ef4631	fix: merge conflicts resolved	2024-04-29 13:52:07 +05:30
gurusainath	bd75bf7bb6	chore: updated file structure for admin	2024-04-29 13:43:59 +05:30
sriram veeraghanta GitHub pablohashescobar NarayanBavisetti gurusainath Prateek Shourya Manish Gupta Manish Gupta= <=>rahulramesha	e178bba9c0	feat: session authentication and god-mode implementation (#4302 ) * dev: move authentication to base class for credentials * chore: new account creation * dev: return error as query parameter * dev: accounts and profile endpoints for user * fix: user store updates * fix: store fixes * fix: type fixes * dev: set is_password_autoset and is_email_verifier for auth providers * dev: move all auth configuration to different apps * dev: fix circular imports * dev: remove unused imports * dev: fix imports for authentication * dev: update endpoints to use rest framework api viewa * fix: onboarding fixes * dev: session model changes * fix: session model and add check for last name first name and avatar * dev: fix referer redirect * dev: remove auth imports * dev: fix imports * dev: update migrations * fix: instance admin login * comflict: conflicts resolved * dev: fix import errors and email check endpoint * fix: error messages and redirects after login * dev: configs api * fix: is github enabled boolean * dev: merge config and instance api * conflict: merge conflict resolved * dev: instance admin sign up endpoint * dev: enable magic link login * dev: configure instance variables for github and google enabled * chore: typo fixes * fix: god mode docker file changes * build-error: resolved build errors * fix: docker compose changes * dev: add email credential check endpoint * fix: minor package changes * fix: docker related changes * dev: add nginx rules in the nginx template * dev: refactor the url patterns * fix: docker changes * fix: docker files for god-mode * fix: static export * fix: nginx conf * dev: smtp sender refused exception * fix: godmode fixes * chore: god mode revamp. * dev: add csrf secured flag * fix: oauth redirect uri and session settings * chore: god mode app changes. (#3982) * chore: send test email functionality. * style: authentication methods page UI revamp. * chore: create workspace popup. * fix: user me endpoint * dev: fix redirection after authentication * dev: handle god mode redirection * fix: redirections * fix: auth related hooks * fix: store related fixes * dev: fix session authentication for rest apis * fix: linting errors * fix: removing references of useStore= * dev: fix redirection and password validation * dev: add useUser hook * fix: build fixes and lint issues * fix: removing useApplication hook * fix: build errors * fix: delete unused files * fix: auth build fixes * fix: bugfixes * dev: alter avatar to support more than 255 chars * dev: fix profile endpoint and increase session expiry time and update session on every request * chore: resolved the migration * chore: resolved merge conflicts * dev: error codes and error messages for the auth flow * dev: instance admin sign up and sign in endpoint * dev: use zxcvbn to validate password strength * dev: add extra parameters when error handling on instance god mode * chore: auth init * chore: signin/ signup form ui updates and password strength meter. * chore: update password fields. * chore: validations and error handling. * chore: updated sign-up form * chore: updated workflow and updated the code structure * chore: instance empty state for god-mode. * chore: instance and auth wrappers update * fix: renaming godmode * fix: docker changes * chore: updated authentication wrappers * chore: updated the authentication workflow and rendered all pages * fix: build errors * fix: docker related fixes * fix: tailing slash added to space and admin for valid nginx locations * chore: seperate pages for signup and login * git-action modified for admin file changes * feature build action updated for admin app * self host modified * chore: resolved build errors and handled signin and signup in a seperate route * chore: sign-in and sign-up revamp. * fix: migration conflicts * dev: migrations * chore: handled redirection * dev: admin url * dev: create seperate endpoint for instance admin me * dev: instance admin endpoint * git action fixed * chore: handled auth wrappers * dev: add serializer and remove print logs * fix: build errors * dev: fix migrations * dev: instance folder structuring * fix: linting errors * chore: resolved build errors * chore: updated store and auth workflow and updates api service types * chore: Replaced Next Link with Anchoer tag for god-mode redirection * add 3333 port to allowed origins * make password login working again * dev: fix redirection, add admin signout endpoint and fix email credential check endpoint * fix unique code sign in * fix small build error * enable sign out * dev: add google client secret variable to configure instance * dev: add referer for redirection * fix origin urls for oauths * admin setup and login separation * dev: fix user redirection and tour completed endpoint * fix build errors * dev: add set password endpoint * dev: remove user creation logic for redirection * fix unique code page * fix forgot password * chore: onboarding revamp. * dev: fix workspace slug redirection in login * chore: invited user onboarding flow update. * chore: fix switch or delete account modal. * fix members exception * refactor auth flows and add invitations to auth flow * fix sig in sign up url * fix action url * fix build errors * dev: fix user set password when logging in * dev: reset password endpoint * chore: confirm password validation for signup and onboarding. * enable reset password * fix build error * chore: minor UI updates. * chore: forgot and reset password UI revamp. * fix authentication re directions * dev: auth redirections * change url paths for signup and signin * dev: make the user logged in when changing passwords * dev: next path redirection for web and space app * dev: next path for magic sign in endpoint * dev: github space endpoint * chore: minor ui updates and fixes in web app. * set password screen * fix multiple unique code generation * dev: next path base redirection * dev: remove print logs * dev: auth space endpoints * fix build errors * dev: invalidate cache on configuration update, god mode exception errors and authentication failed code * dev: fix space endpoints and add extra endpoints * chore: space auth revamp. * dev: add sign up for space app * fix: build errors. * fix: auth redirection logic. * chore: space app onboarding revamp. --------- Co-authored-by: pablohashescobar <nikhilschacko@gmail.com> Co-authored-by: NarayanBavisetti <narayan3119@gmail.com> Co-authored-by: gurusainath <gurusainath007@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: Manish Gupta <59428681+mguptahub@users.noreply.github.com> Co-authored-by: Manish Gupta <manish@mgupta.me> Co-authored-by: = <=> Co-authored-by: rahulramesha <rahulramesham@gmail.com>	2024-04-29 12:12:33 +05:30
				`@@ -0,0 +1 @@`
				`export * from "./authentication-method-card";`