chore: support cyclic characters in subject

[WEB-4435] bug: trigger event for work item comment #7331
[WEB-4432] fix: webhooks translation #7332
2025-07-03 16:35:28 +05:30 · 2025-07-03 15:06:11 +05:30 · 2025-07-03 15:05:13 +05:30 · 2025-07-03 14:16:17 +05:30 · 2025-07-03 14:12:51 +05:30 · 2025-07-03 14:12:17 +05:30
3981 changed files with 27043 additions and 25379 deletions
@@ -2,6 +2,7 @@
 *.pyc
 .env
 venv
+.venv
 node_modules/
 **/node_modules/
 npm-debug.log
@@ -14,4 +15,4 @@ build/
 out/
 **/out/
 dist/
-**/dist/
+**/dist/
@@ -133,7 +133,7 @@ jobs:
          docker-image-owner: makeplane
          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_admin }}
          build-context: .
-          dockerfile-path: ./admin/Dockerfile.admin
+          dockerfile-path: ./apps/admin/Dockerfile.admin
          buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
          buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
          buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
@@ -155,7 +155,7 @@ jobs:
          docker-image-owner: makeplane
          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_web }}
          build-context: .
-          dockerfile-path: ./web/Dockerfile.web
+          dockerfile-path: ./apps/web/Dockerfile.web
          buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
          buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
          buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
@@ -177,7 +177,7 @@ jobs:
          docker-image-owner: makeplane
          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_space }}
          build-context: .
-          dockerfile-path: ./space/Dockerfile.space
+          dockerfile-path: ./apps/space/Dockerfile.space
          buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
          buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
          buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
@@ -199,7 +199,7 @@ jobs:
          docker-image-owner: makeplane
          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_live }}
          build-context: .
-          dockerfile-path: ./live/Dockerfile.live
+          dockerfile-path: ./apps/live/Dockerfile.live
          buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
          buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
          buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
@@ -220,8 +220,8 @@ jobs:
          dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
          docker-image-owner: makeplane
          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_backend }}
-          build-context: ./apiserver
-          dockerfile-path: ./apiserver/Dockerfile.api
+          build-context: ./apps/server
+          dockerfile-path: ./apps/server/Dockerfile.api
          buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
          buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
          buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
@@ -290,5 +290,6 @@ jobs:
            ${{ github.workspace }}/deploy/selfhost/setup.sh
            ${{ github.workspace }}/deploy/selfhost/swarm.sh
            ${{ github.workspace }}/deploy/selfhost/restore.sh
+            ${{ github.workspace }}/deploy/selfhost/restore-airgapped.sh
            ${{ github.workspace }}/deploy/selfhost/docker-compose.yml
            ${{ github.workspace }}/deploy/selfhost/variables.env
@@ -69,14 +69,14 @@ chmod +x setup.sh
 docker compose -f docker-compose-local.yml up
 ```

-5. Start web apps:
+4. Start web apps:

 ```bash
 yarn dev
 ```

-6. Open your browser to http://localhost:3001/god-mode/ and register yourself as instance admin
-7. Open up your browser to http://localhost:3000 then log in using the same credentials from the previous step
+5. Open your browser to http://localhost:3001/god-mode/ and register yourself as instance admin
+6. Open up your browser to http://localhost:3000 then log in using the same credentials from the previous step

 That’s it! You’re all set to begin coding. Remember to refresh your browser if changes don’t auto-reload. Happy contributing! 🎉

@@ -1,47 +0,0 @@
-"use client";
-
-import { ReactNode } from "react";
-import { ThemeProvider, useTheme } from "next-themes";
-import { SWRConfig } from "swr";
-// plane imports
-import { ADMIN_BASE_PATH, DEFAULT_SWR_CONFIG } from "@plane/constants";
-import { Toast } from "@plane/ui";
-import { resolveGeneralTheme } from "@plane/utils";
-// lib
-import { InstanceProvider } from "@/lib/instance-provider";
-import { StoreProvider } from "@/lib/store-provider";
-import { UserProvider } from "@/lib/user-provider";
-// styles
-import "@/styles/globals.css";
-
-const ToastWithTheme = () => {
-  const { resolvedTheme } = useTheme();
-  return <Toast theme={resolveGeneralTheme(resolvedTheme)} />;
-};
-
-export default function RootLayout({ children }: { children: ReactNode }) {
-  const ASSET_PREFIX = ADMIN_BASE_PATH;
-  return (
-    <html lang="en">
-      <head>
-        <link rel="apple-touch-icon" sizes="180x180" href={`${ASSET_PREFIX}/favicon/apple-touch-icon.png`} />
-        <link rel="icon" type="image/png" sizes="32x32" href={`${ASSET_PREFIX}/favicon/favicon-32x32.png`} />
-        <link rel="icon" type="image/png" sizes="16x16" href={`${ASSET_PREFIX}/favicon/favicon-16x16.png`} />
-        <link rel="manifest" href={`${ASSET_PREFIX}/site.webmanifest.json`} />
-        <link rel="shortcut icon" href={`${ASSET_PREFIX}/favicon/favicon.ico`} />
-      </head>
-      <body className={`antialiased`}>
-        <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
-          <ToastWithTheme />
-          <SWRConfig value={DEFAULT_SWR_CONFIG}>
-            <StoreProvider>
-              <InstanceProvider>
-                <UserProvider>{children}</UserProvider>
-              </InstanceProvider>
-            </StoreProvider>
-          </SWRConfig>
-        </ThemeProvider>
-      </body>
-    </html>
-  );
-}
@@ -1,30 +0,0 @@
-import { Metadata } from "next";
-// components
-import { InstanceSignInForm } from "@/components/login";
-// layouts
-import { DefaultLayout } from "@/layouts/default-layout";
-
-export const metadata: Metadata = {
-  title: "Plane | Simple, extensible, open-source project management tool.",
-  description:
-    "Open-source project management tool to manage work items, sprints, and product roadmaps with peace of mind.",
-  openGraph: {
-    title: "Plane | Simple, extensible, open-source project management tool.",
-    description:
-      "Open-source project management tool to manage work items, sprints, and product roadmaps with peace of mind.",
-    url: "https://plane.so/",
-  },
-  keywords:
-    "software development, customer feedback, software, accelerate, code management, release management, project management, work items tracking, agile, scrum, kanban, collaboration",
-  twitter: {
-    site: "@planepowers",
-  },
-};
-
-export default async function LoginPage() {
-  return (
-    <DefaultLayout>
-      <InstanceSignInForm />
-    </DefaultLayout>
-  );
-}
@@ -1,70 +0,0 @@
-import { observer } from "mobx-react";
-import Image from "next/image";
-import { useTheme } from "next-themes";
-// types
-import {
-  TGetBaseAuthenticationModeProps,
-  TInstanceAuthenticationMethodKeys,
-  TInstanceAuthenticationModes,
-} from "@plane/types";
-// components
-import { AuthenticationMethodCard } from "@/components/authentication";
-// helpers
-import { getBaseAuthenticationModes } from "@/lib/auth-helpers";
-// plane admin components
-import { UpgradeButton } from "@/plane-admin/components/common";
-// images
-import OIDCLogo from "@/public/logos/oidc-logo.svg";
-import SAMLLogo from "@/public/logos/saml-logo.svg";
-
-export type TAuthenticationModeProps = {
-  disabled: boolean;
-  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
-};
-
-// Authentication methods
-export const getAuthenticationModes: (props: TGetBaseAuthenticationModeProps) => TInstanceAuthenticationModes[] = ({
-  disabled,
-  updateConfig,
-  resolvedTheme,
-}) => [
-  ...getBaseAuthenticationModes({ disabled, updateConfig, resolvedTheme }),
-  {
-    key: "oidc",
-    name: "OIDC",
-    description: "Authenticate your users via the OpenID Connect protocol.",
-    icon: <Image src={OIDCLogo} height={22} width={22} alt="OIDC Logo" />,
-    config: <UpgradeButton />,
-    unavailable: true,
-  },
-  {
-    key: "saml",
-    name: "SAML",
-    description: "Authenticate your users via the Security Assertion Markup Language protocol.",
-    icon: <Image src={SAMLLogo} height={22} width={22} alt="SAML Logo" className="pl-0.5" />,
-    config: <UpgradeButton />,
-    unavailable: true,
-  },
-];
-
-export const AuthenticationModes: React.FC<TAuthenticationModeProps> = observer((props) => {
-  const { disabled, updateConfig } = props;
-  // next-themes
-  const { resolvedTheme } = useTheme();
-
-  return (
-    <>
-      {getAuthenticationModes({ disabled, updateConfig, resolvedTheme }).map((method) => (
-        <AuthenticationMethodCard
-          key={method.key}
-          name={method.name}
-          description={method.description}
-          icon={method.icon}
-          config={method.config}
-          disabled={disabled}
-          unavailable={method.unavailable}
-        />
-      ))}
-    </>
-  );
-});
@@ -1,5 +0,0 @@
-export * from "./root";
-export * from "./help-section";
-export * from "./sidebar-menu";
-export * from "./sidebar-dropdown";
-export * from "./sidebar-menu-hamburger-toogle";
@@ -1,20 +0,0 @@
-"use client";
-
-import { FC } from "react";
-import { observer } from "mobx-react";
-// hooks
-import { Menu } from "lucide-react";
-import { useTheme } from "@/hooks/store";
-// icons
-
-export const SidebarHamburgerToggle: FC = observer(() => {
-  const { isSidebarCollapsed, toggleSidebar } = useTheme();
-  return (
-    <div
-      className="w-7 h-7 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
-      onClick={() => toggleSidebar(!isSidebarCollapsed)}
-    >
-      <Menu size={14} className="text-custom-text-200 group-hover:text-custom-text-100 transition-all" />
-    </div>
-  );
-});
@@ -1,7 +0,0 @@
-export * from "./auth-banner";
-export * from "./email-config-switch";
-export * from "./password-config-switch";
-export * from "./authentication-method-card";
-export * from "./gitlab-config";
-export * from "./github-config";
-export * from "./google-config";
@@ -1,10 +0,0 @@
-export * from "./breadcrumb-link";
-export * from "./confirm-discard-modal";
-export * from "./controller-input";
-export * from "./copy-field";
-export * from "./password-strength-meter";
-export * from "./banner";
-export * from "./empty-state";
-export * from "./logo-spinner";
-export * from "./page-header";
-export * from "./code-block";
@@ -1,3 +0,0 @@
-export * from "./instance-not-ready";
-export * from "./instance-failure-view";
-export * from "./setup-form";
@@ -1 +0,0 @@
-export * from "./sign-in-form";
@@ -1,194 +0,0 @@
-"use client";
-
-import { FC, useEffect, useMemo, useState } from "react";
-import { useSearchParams } from "next/navigation";
-import { Eye, EyeOff } from "lucide-react";
-// plane internal packages
-import { API_BASE_URL, EAdminAuthErrorCodes, TAuthErrorInfo } from "@plane/constants";
-import { AuthService } from "@plane/services";
-import { Button, Input, Spinner } from "@plane/ui";
-// components
-import { Banner } from "@/components/common";
-// helpers
-import { authErrorHandler } from "@/lib/auth-helpers";
-// local components
-import { AuthBanner } from "../authentication";
-
-// service initialization
-const authService = new AuthService();
-
-// error codes
-enum EErrorCodes {
-  INSTANCE_NOT_CONFIGURED = "INSTANCE_NOT_CONFIGURED",
-  REQUIRED_EMAIL_PASSWORD = "REQUIRED_EMAIL_PASSWORD",
-  INVALID_EMAIL = "INVALID_EMAIL",
-  USER_DOES_NOT_EXIST = "USER_DOES_NOT_EXIST",
-  AUTHENTICATION_FAILED = "AUTHENTICATION_FAILED",
-}
-
-type TError = {
-  type: EErrorCodes | undefined;
-  message: string | undefined;
-};
-
-// form data
-type TFormData = {
-  email: string;
-  password: string;
-};
-
-const defaultFromData: TFormData = {
-  email: "",
-  password: "",
-};
-
-export const InstanceSignInForm: FC = (props) => {
-  const {} = props;
-  // search params
-  const searchParams = useSearchParams();
-  const emailParam = searchParams.get("email") || undefined;
-  const errorCode = searchParams.get("error_code") || undefined;
-  const errorMessage = searchParams.get("error_message") || undefined;
-  // state
-  const [showPassword, setShowPassword] = useState(false);
-  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
-  const [formData, setFormData] = useState<TFormData>(defaultFromData);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
-
-  const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
-    setFormData((prev) => ({ ...prev, [key]: value }));
-
-  useEffect(() => {
-    if (csrfToken === undefined)
-      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
-  }, [csrfToken]);
-
-  useEffect(() => {
-    if (emailParam) setFormData((prev) => ({ ...prev, email: emailParam }));
-  }, [emailParam]);
-
-  // derived values
-  const errorData: TError = useMemo(() => {
-    if (errorCode && errorMessage) {
-      switch (errorCode) {
-        case EErrorCodes.INSTANCE_NOT_CONFIGURED:
-          return { type: EErrorCodes.INVALID_EMAIL, message: errorMessage };
-        case EErrorCodes.REQUIRED_EMAIL_PASSWORD:
-          return { type: EErrorCodes.REQUIRED_EMAIL_PASSWORD, message: errorMessage };
-        case EErrorCodes.INVALID_EMAIL:
-          return { type: EErrorCodes.INVALID_EMAIL, message: errorMessage };
-        case EErrorCodes.USER_DOES_NOT_EXIST:
-          return { type: EErrorCodes.USER_DOES_NOT_EXIST, message: errorMessage };
-        case EErrorCodes.AUTHENTICATION_FAILED:
-          return { type: EErrorCodes.AUTHENTICATION_FAILED, message: errorMessage };
-        default:
-          return { type: undefined, message: undefined };
-      }
-    } else return { type: undefined, message: undefined };
-  }, [errorCode, errorMessage]);
-
-  const isButtonDisabled = useMemo(
-    () => (!isSubmitting && formData.email && formData.password ? false : true),
-    [formData.email, formData.password, isSubmitting]
-  );
-
-  useEffect(() => {
-    if (errorCode) {
-      const errorDetail = authErrorHandler(errorCode?.toString() as EAdminAuthErrorCodes);
-      if (errorDetail) {
-        setErrorInfo(errorDetail);
-      }
-    }
-  }, [errorCode]);
-
-  return (
-    <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 lg:pt-28 transition-all">
-      <div className="relative flex flex-col space-y-6">
-        <div className="text-center space-y-1">
-          <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
-            Manage your Plane instance
-          </h3>
-          <p className="font-medium text-onboarding-text-400">
-            Configure instance-wide settings to secure your instance
-          </p>
-        </div>
-
-        {errorData.type && errorData?.message ? (
-          <Banner type="error" message={errorData?.message} />
-        ) : (
-          <>{errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}</>
-        )}
-
-        <form
-          className="space-y-4"
-          method="POST"
-          action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
-          onSubmit={() => setIsSubmitting(true)}
-          onError={() => setIsSubmitting(false)}
-        >
-          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
-              Email <span className="text-red-500">*</span>
-            </label>
-            <Input
-              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-              id="email"
-              name="email"
-              type="email"
-              inputSize="md"
-              placeholder="name@company.com"
-              value={formData.email}
-              onChange={(e) => handleFormChange("email", e.target.value)}
-              autoComplete="on"
-              autoFocus
-            />
-          </div>
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
-              Password <span className="text-red-500">*</span>
-            </label>
-            <div className="relative">
-              <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-                id="password"
-                name="password"
-                type={showPassword ? "text" : "password"}
-                inputSize="md"
-                placeholder="Enter your password"
-                value={formData.password}
-                onChange={(e) => handleFormChange("password", e.target.value)}
-                autoComplete="on"
-              />
-              {showPassword ? (
-                <button
-                  type="button"
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => setShowPassword(false)}
-                >
-                  <EyeOff className="h-4 w-4" />
-                </button>
-              ) : (
-                <button
-                  type="button"
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => setShowPassword(true)}
-                >
-                  <Eye className="h-4 w-4" />
-                </button>
-              )}
-            </div>
-          </div>
-          <div className="py-2">
-            <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
-              {isSubmitting ? <Spinner height="20px" width="20px" /> : "Sign in"}
-            </Button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-};
@@ -1 +0,0 @@
-export * from "./list-item";
@@ -1,55 +0,0 @@
-import { FC, ReactNode } from "react";
-import { observer } from "mobx-react";
-import useSWR from "swr";
-// components
-import { LogoSpinner } from "@/components/common";
-import { InstanceSetupForm, InstanceFailureView } from "@/components/instance";
-// hooks
-import { useInstance } from "@/hooks/store";
-// layout
-import { DefaultLayout } from "@/layouts/default-layout";
-
-type InstanceProviderProps = {
-  children: ReactNode;
-};
-
-export const InstanceProvider: FC<InstanceProviderProps> = observer((props) => {
-  const { children } = props;
-  // store hooks
-  const { instance, error, fetchInstanceInfo } = useInstance();
-  // fetching instance details
-  useSWR("INSTANCE_DETAILS", () => fetchInstanceInfo(), {
-    revalidateOnFocus: false,
-    revalidateIfStale: false,
-    errorRetryCount: 0,
-  });
-
-  if (!instance && !error)
-    return (
-      <div className="flex h-screen min-h-[500px] w-full justify-center items-center">
-        <LogoSpinner />
-      </div>
-    );
-
-  if (error) {
-    return (
-      <DefaultLayout>
-        <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
-          <InstanceFailureView />
-        </div>
-      </DefaultLayout>
-    );
-  }
-
-  if (!instance?.is_setup_done) {
-    return (
-      <DefaultLayout>
-        <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
-          <InstanceSetupForm />
-        </div>
-      </DefaultLayout>
-    );
-  }
-
-  return <>{children}</>;
-});
@@ -1,27 +0,0 @@
-/** @type {import('next').NextConfig} */
-
-const nextConfig = {
-  trailingSlash: true,
-  reactStrictMode: false,
-  swcMinify: true,
-  output: "standalone",
-  images: {
-    unoptimized: true,
-  },
-  basePath: process.env.NEXT_PUBLIC_ADMIN_BASE_PATH || "",
-  transpilePackages: [
-    "@plane/constants",
-    "@plane/editor",
-    "@plane/hooks",
-    "@plane/i18n",
-    "@plane/logger",
-    "@plane/propel",
-    "@plane/services",
-    "@plane/shared-state",
-    "@plane/types",
-    "@plane/ui",
-    "@plane/utils",
-  ],
-};
-
-module.exports = nextConfig;
@@ -1,40 +0,0 @@
-# Third party imports
-from rest_framework import serializers
-
-# Module imports
-from .base import DynamicBaseSerializer
-from plane.db.models import IssueView
-from plane.utils.issue_filters import issue_filters
-
-
-class IssueViewSerializer(DynamicBaseSerializer):
-    is_favorite = serializers.BooleanField(read_only=True)
-
-    class Meta:
-        model = IssueView
-        fields = "__all__"
-        read_only_fields = [
-            "workspace",
-            "project",
-            "query",
-            "owned_by",
-            "access",
-            "is_locked",
-        ]
-
-    def create(self, validated_data):
-        query_params = validated_data.get("filters", {})
-        if bool(query_params):
-            validated_data["query"] = issue_filters(query_params, "POST")
-        else:
-            validated_data["query"] = {}
-        return IssueView.objects.create(**validated_data)
-
-    def update(self, instance, validated_data):
-        query_params = validated_data.get("filters", {})
-        if bool(query_params):
-            validated_data["query"] = issue_filters(query_params, "POST")
-        else:
-            validated_data["query"] = {}
-        validated_data["query"] = issue_filters(query_params, "PATCH")
-        return super().update(instance, validated_data)
@@ -1,4 +1,4 @@
-FROM node:20-alpine as base
+FROM node:20-alpine AS base

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

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

 RUN yarn turbo run build --filter=admin

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

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

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

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

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

 EXPOSE 3000
@@ -5,7 +5,7 @@ import { Lightbulb } from "lucide-react";
 import { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types";
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { ControllerInput, TControllerInputFormField } from "@/components/common";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
 // hooks
 import { useInstance } from "@/hooks/store";

@@ -1,11 +1,10 @@
 import { ReactNode } from "react";
 import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";

 export const metadata: Metadata = {
-  title: "Artificial Intelligence Settings - Plane Web",
+  title: "Artificial Intelligence Settings - God Mode",
 };

 export default function AILayout({ children }: { children: ReactNode }) {
-  return <AdminLayout>{children}</AdminLayout>;
+  return <>{children}</>;
 }
@@ -10,14 +10,10 @@ import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigura
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
-import {
-  CodeBlock,
-  ConfirmDiscardModal,
-  ControllerInput,
-  CopyField,
-  TControllerInputFormField,
-  TCopyField,
-} from "@/components/common";
+import { CodeBlock } from "@/components/common/code-block";
+import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
+import { CopyField, TCopyField } from "@/components/common/copy-field";
 // hooks
 import { useInstance } from "@/hooks/store";

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "GitHub Authentication - God Mode",
+};
+
+export default function GitHubAuthenticationLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}
@@ -9,8 +9,7 @@ import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 import { resolveGeneralTheme } from "@plane/utils";
 // components
-import { AuthenticationMethodCard } from "@/components/authentication";
-import { PageHeader } from "@/components/common";
+import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
 // hooks
 import { useInstance } from "@/hooks/store";
 // icons
@@ -61,9 +60,11 @@ const InstanceGithubAuthenticationPage = observer(() => {
        setIsSubmitting(false);
      });
  };
+
+  const isGithubEnabled = enableGithubConfig === "1";
+
  return (
    <>
-      <PageHeader title="GitHub Authentication - Plane Web" />
      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
          <AuthenticationMethodCard
@@ -79,11 +80,9 @@ const InstanceGithubAuthenticationPage = observer(() => {
            }
            config={
              <ToggleSwitch
-                value={Boolean(parseInt(enableGithubConfig))}
+                value={isGithubEnabled}
                onChange={() => {
-                  Boolean(parseInt(enableGithubConfig)) === true
-                    ? updateConfig("IS_GITHUB_ENABLED", "0")
-                    : updateConfig("IS_GITHUB_ENABLED", "1");
+                  updateConfig("IS_GITHUB_ENABLED", isGithubEnabled ? "0" : "1");
                }}
                size="sm"
                disabled={isSubmitting || !formattedConfig}
@@ -8,14 +8,10 @@ import { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigura
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
-import {
-  CodeBlock,
-  ConfirmDiscardModal,
-  ControllerInput,
-  CopyField,
-  TControllerInputFormField,
-  TCopyField,
-} from "@/components/common";
+import { CodeBlock } from "@/components/common/code-block";
+import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
+import { CopyField, TCopyField } from "@/components/common/copy-field";
 // hooks
 import { useInstance } from "@/hooks/store";

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "GitLab Authentication - God Mode",
+};
+
+export default function GitlabAuthenticationLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}
@@ -6,8 +6,7 @@ import Image from "next/image";
 import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
-import { AuthenticationMethodCard } from "@/components/authentication";
-import { PageHeader } from "@/components/common";
+import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
 // hooks
 import { useInstance } from "@/hooks/store";
 // icons
@@ -57,7 +56,6 @@ const InstanceGitlabAuthenticationPage = observer(() => {
  };
  return (
    <>
-      <PageHeader title="GitLab Authentication - Plane Web" />
      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
          <AuthenticationMethodCard
@@ -9,14 +9,10 @@ import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigura
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
-import {
-  CodeBlock,
-  ConfirmDiscardModal,
-  ControllerInput,
-  CopyField,
-  TControllerInputFormField,
-  TCopyField,
-} from "@/components/common";
+import { CodeBlock } from "@/components/common/code-block";
+import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
+import { CopyField, TCopyField } from "@/components/common/copy-field";
 // hooks
 import { useInstance } from "@/hooks/store";

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Google Authentication - God Mode",
+};
+
+export default function GoogleAuthenticationLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}
@@ -6,8 +6,7 @@ import Image from "next/image";
 import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
-import { AuthenticationMethodCard } from "@/components/authentication";
-import { PageHeader } from "@/components/common";
+import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
 // hooks
 import { useInstance } from "@/hooks/store";
 // icons
@@ -57,7 +56,6 @@ const InstanceGoogleAuthenticationPage = observer(() => {
  };
  return (
    <>
-      <PageHeader title="Google Authentication - Plane Web" />
      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
          <AuthenticationMethodCard
@@ -1,11 +1,10 @@
 import { ReactNode } from "react";
 import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";

 export const metadata: Metadata = {
  title: "Authentication Settings - Plane Web",
 };

 export default function AuthenticationLayout({ children }: { children: ReactNode }) {
-  return <AdminLayout>{children}</AdminLayout>;
+  return <>{children}</>;
 }
@@ -7,7 +7,7 @@ import { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from
 // ui
 import { Button, CustomSelect, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { ControllerInput, TControllerInputFormField } from "@/components/common";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
 // hooks
 import { useInstance } from "@/hooks/store";
 // local components
@@ -1,15 +1,14 @@
 import { ReactNode } from "react";
 import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";

 interface EmailLayoutProps {
  children: ReactNode;
 }

 export const metadata: Metadata = {
-  title: "Email Settings - Plane Web",
+  title: "Email Settings - God Mode",
 };

 export default function EmailLayout({ children }: EmailLayoutProps) {
-  return <AdminLayout>{children}</AdminLayout>;
+  return <>{children}</>;
 }
@@ -8,7 +8,7 @@ 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/controller-input";
 import { useInstance } from "@/hooks/store";
 import { IntercomConfig } from "./intercom";
 // hooks
@@ -1,11 +1,10 @@
 import { ReactNode } from "react";
 import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";

 export const metadata: Metadata = {
-  title: "General Settings - Plane Web",
+  title: "General Settings - God Mode",
 };

 export default function GeneralLayout({ children }: { children: ReactNode }) {
-  return <AdminLayout>{children}</AdminLayout>;
+  return <>{children}</>;
 }
@@ -3,16 +3,27 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
-// mobx
-// ui
-import { Settings } from "lucide-react";
+import { Menu, Settings } from "lucide-react";
 // icons
 import { Breadcrumbs } from "@plane/ui";
 // components
-import { SidebarHamburgerToggle } from "@/components/admin-sidebar";
-import { BreadcrumbLink } from "@/components/common";
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+// hooks
+import { useTheme } from "@/hooks/store";

-export const InstanceHeader: FC = observer(() => {
+export const HamburgerToggle: FC = observer(() => {
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+  return (
+    <div
+      className="w-7 h-7 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
+      onClick={() => toggleSidebar(!isSidebarCollapsed)}
+    >
+      <Menu size={14} className="text-custom-text-200 group-hover:text-custom-text-100 transition-all" />
+    </div>
+  );
+});
+
+export const AdminHeader: FC = observer(() => {
  const pathName = usePathname();

  const getHeaderTitle = (pathName: string) => {
@@ -63,13 +74,12 @@ export const InstanceHeader: FC = observer(() => {
  return (
    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-sidebar-border-200 bg-custom-sidebar-background-100 p-4">
      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
+        <HamburgerToggle />
        {breadcrumbItems.length >= 0 && (
          <div>
            <Breadcrumbs>
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={
+              <Breadcrumbs.Item
+                component={
                  <BreadcrumbLink
                    href="/general/"
                    label="Settings"
@@ -80,10 +90,9 @@ export const InstanceHeader: FC = observer(() => {
              {breadcrumbItems.map(
                (item) =>
                  item.title && (
-                    <Breadcrumbs.BreadcrumbItem
+                    <Breadcrumbs.Item
                      key={item.title}
-                      type="text"
-                      link={<BreadcrumbLink href={item.href} label={item.title} />}
+                      component={<BreadcrumbLink href={item.href} label={item.title} />}
                    />
                  )
              )}
@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
 import { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { ControllerInput } from "@/components/common";
+import { ControllerInput } from "@/components/common/controller-input";
 // hooks
 import { useInstance } from "@/hooks/store";

@@ -1,15 +1,14 @@
 import { ReactNode } from "react";
 import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";

 interface ImageLayoutProps {
  children: ReactNode;
 }

 export const metadata: Metadata = {
-  title: "Images Settings - Plane Web",
+  title: "Images Settings - God Mode",
 };

 export default function ImageLayout({ children }: ImageLayoutProps) {
-  return <AdminLayout>{children}</AdminLayout>;
+  return <>{children}</>;
 }
@@ -1,20 +1,22 @@
 "use client";
+
 import { FC, ReactNode, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
 // components
-import { InstanceSidebar } from "@/components/admin-sidebar";
-import { InstanceHeader } from "@/components/auth-header";
-import { LogoSpinner } from "@/components/common";
+import { LogoSpinner } from "@/components/common/logo-spinner";
 import { NewUserPopup } from "@/components/new-user-popup";
 // hooks
 import { useUser } from "@/hooks/store";
+// local components
+import { AdminHeader } from "./header";
+import { AdminSidebar } from "./sidebar";

 type TAdminLayout = {
  children: ReactNode;
 };

-export const AdminLayout: FC<TAdminLayout> = observer((props) => {
+const AdminLayout: FC<TAdminLayout> = (props) => {
  const { children } = props;
  // router
  const router = useRouter();
@@ -35,14 +37,20 @@ export const AdminLayout: FC<TAdminLayout> = observer((props) => {
    );
  }

-  return (
-    <div className="relative flex h-screen w-screen overflow-hidden">
-      <InstanceSidebar />
-      <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
-        <InstanceHeader />
-        <div className="h-full w-full overflow-hidden">{children}</div>
-      </main>
-      <NewUserPopup />
-    </div>
-  );
-});
+  if (isUserLoggedIn) {
+    return (
+      <div className="relative flex h-screen w-screen overflow-hidden">
+        <AdminSidebar />
+        <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+          <AdminHeader />
+          <div className="h-full w-full overflow-hidden">{children}</div>
+        </main>
+        <NewUserPopup />
+      </div>
+    );
+  }
+
+  return <></>;
+};
+
+export default observer(AdminLayout);
@@ -16,7 +16,7 @@ import { useTheme, useUser } from "@/hooks/store";
 // service initialization
 const authService = new AuthService();

-export const SidebarDropdown = observer(() => {
+export const AdminSidebarDropdown = observer(() => {
  // store hooks
  const { isSidebarCollapsed } = useTheme();
  const { currentUser, signOut } = useUser();
@@ -33,7 +33,7 @@ const helpOptions = [
  },
 ];

-export const HelpSection: FC = observer(() => {
+export const AdminSidebarHelpSection: FC = observer(() => {
  // states
  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
  // store
@@ -49,7 +49,7 @@ const INSTANCE_ADMIN_LINKS = [
  },
 ];

-export const SidebarMenu = observer(() => {
+export const AdminSidebarMenu = observer(() => {
  // store hooks
  const { isSidebarCollapsed, toggleSidebar } = useTheme();
  // router
@@ -4,12 +4,14 @@ import { FC, useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
-// components
-import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";
 // hooks
 import { useTheme } from "@/hooks/store";
+// components
+import { AdminSidebarDropdown } from "./sidebar-dropdown";
+import { AdminSidebarHelpSection } from "./sidebar-help-section";
+import { AdminSidebarMenu } from "./sidebar-menu";

-export const InstanceSidebar: FC = observer(() => {
+export const AdminSidebar: FC = observer(() => {
  // store
  const { isSidebarCollapsed, toggleSidebar } = useTheme();

@@ -47,9 +49,9 @@ export const InstanceSidebar: FC = observer(() => {
      `}
    >
      <div ref={ref} className="flex h-full w-full flex-1 flex-col">
-        <SidebarDropdown />
-        <SidebarMenu />
-        <HelpSection />
+        <AdminSidebarDropdown />
+        <AdminSidebarMenu />
+        <AdminSidebarHelpSection />
      </div>
    </div>
  );
@@ -1,12 +1,10 @@
 import { ReactNode } from "react";
 import { Metadata } from "next";
-// layouts
-import { AdminLayout } from "@/layouts/admin-layout";

 export const metadata: Metadata = {
-  title: "Workspace Management - Plane Web",
+  title: "Workspace Management - God Mode",
 };

 export default function WorkspaceManagementLayout({ children }: { children: ReactNode }) {
-  return <AdminLayout>{children}</AdminLayout>;
+  return <>{children}</>;
 }
@@ -10,7 +10,7 @@ import { TInstanceConfigurationKeys } from "@plane/types";
 import { Button, getButtonStyling, Loader, setPromiseToast, ToggleSwitch } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
-import { WorkspaceListItem } from "@/components/workspace";
+import { WorkspaceListItem } from "@/components/workspace/list-item";
 // hooks
 import { useInstance, useWorkspace } from "@/hooks/store";

@@ -1,11 +1,11 @@
 import { FC } from "react";
 import { Info, X } from "lucide-react";
 // plane constants
-import { TAuthErrorInfo } from "@plane/constants";
+import { TAdminAuthErrorInfo } from "@plane/constants";

 type TAuthBanner = {
-  bannerData: TAuthErrorInfo | undefined;
-  handleBannerData?: (bannerData: TAuthErrorInfo | undefined) => void;
+  bannerData: TAdminAuthErrorInfo | undefined;
+  handleBannerData?: (bannerData: TAdminAuthErrorInfo | undefined) => void;
 };

 export const AuthBanner: FC<TAuthBanner> = (props) => {
@@ -3,17 +3,15 @@ import Image from "next/image";
 import Link from "next/link";
 import { KeyRound, Mails } from "lucide-react";
 // plane packages
-import { SUPPORT_EMAIL, EAdminAuthErrorCodes, TAuthErrorInfo } from "@plane/constants";
+import { SUPPORT_EMAIL, EAdminAuthErrorCodes, TAdminAuthErrorInfo } from "@plane/constants";
 import { TGetBaseAuthenticationModeProps, TInstanceAuthenticationModes } from "@plane/types";
 import { resolveGeneralTheme } from "@plane/utils";
 // components
-import {
-  EmailCodesConfiguration,
-  GithubConfiguration,
-  GitlabConfiguration,
-  GoogleConfiguration,
-  PasswordLoginConfiguration,
-} from "@/components/authentication";
+import { EmailCodesConfiguration } from "@/components/authentication/email-config-switch";
+import { GithubConfiguration } from "@/components/authentication/github-config";
+import { GitlabConfiguration } from "@/components/authentication/gitlab-config";
+import { GoogleConfiguration } from "@/components/authentication/google-config";
+import { PasswordLoginConfiguration } from "@/components/authentication/password-config-switch";
 // images
 import githubLightModeImage from "@/public/logos/github-black.png";
 import githubDarkModeImage from "@/public/logos/github-white.png";
@@ -89,7 +87,7 @@ const errorCodeMessages: {
 export const authErrorHandler = (
  errorCode: EAdminAuthErrorCodes,
  email?: string | undefined
-): TAuthErrorInfo | undefined => {
+): TAdminAuthErrorInfo | undefined => {
  const bannerAlertErrorCodes = [
    EAdminAuthErrorCodes.ADMIN_ALREADY_EXIST,
    EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME,
@@ -1,26 +1,18 @@
 "use client";

-import { FC, ReactNode } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { useTheme } from "next-themes";
-// logo/ images
+// logo assets
 import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
 import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
 import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.png";
 import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.png";

-type TDefaultLayout = {
-  children: ReactNode;
-  withoutBackground?: boolean;
-};
-
-export const DefaultLayout: FC<TDefaultLayout> = (props) => {
-  const { children, withoutBackground = false } = props;
-  // hooks
+export default function RootLayout({ children }: { children: React.ReactNode }) {
  const { resolvedTheme } = useTheme();
-  const patternBackground = resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern;

+  const patternBackground = resolvedTheme === "light" ? PlaneBackgroundPattern : PlaneBackgroundPatternDark;
  const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;

  return (
@@ -33,13 +25,11 @@ export const DefaultLayout: FC<TDefaultLayout> = (props) => {
            </Link>
          </div>
        </div>
-        {!withoutBackground && (
-          <div className="absolute inset-0 z-0">
-            <Image src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
-          </div>
-        )}
+        <div className="absolute inset-0 z-0">
+          <Image src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
+        </div>
        <div className="relative z-10 flex-grow">{children}</div>
      </div>
    </div>
  );
-};
+}
@@ -0,0 +1,62 @@
+"use client";
+
+import { observer } from "mobx-react";
+// components
+import { InstanceFailureView } from "@/components/instance/failure";
+import { InstanceLoading } from "@/components/instance/loading";
+import { InstanceSetupForm } from "@/components/instance/setup-form";
+// hooks
+import { useInstance } from "@/hooks/store";
+// components
+import { InstanceSignInForm } from "./sign-in-form";
+
+const HomePage = () => {
+  // store hooks
+  const { instance, error } = useInstance();
+
+  // if instance is not fetched, show loading
+  if (!instance && !error) {
+    return (
+      <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
+        <InstanceLoading />
+      </div>
+    );
+  }
+
+  // if instance fetch fails, show failure view
+  if (error) {
+    return (
+      <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
+        <InstanceFailureView />
+      </div>
+    );
+  }
+
+  // if instance is fetched and setup is not done, show setup form
+  if (instance && !instance?.is_setup_done) {
+    return (
+      <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
+        <InstanceSetupForm />
+      </div>
+    );
+  }
+
+  // if instance is fetched and setup is done, show sign in form
+  return (
+    <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 lg:pt-28 transition-all">
+      <div className="relative flex flex-col space-y-6">
+        <div className="text-center space-y-1">
+          <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
+            Manage your Plane instance
+          </h3>
+          <p className="font-medium text-onboarding-text-400">
+            Configure instance-wide settings to secure your instance
+          </p>
+        </div>
+        <InstanceSignInForm />
+      </div>
+    </div>
+  );
+};
+
+export default observer(HomePage);
@@ -0,0 +1,178 @@
+"use client";
+
+import { FC, useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { Eye, EyeOff } from "lucide-react";
+// plane internal packages
+import { API_BASE_URL, EAdminAuthErrorCodes, TAdminAuthErrorInfo } from "@plane/constants";
+import { AuthService } from "@plane/services";
+import { Button, Input, Spinner } from "@plane/ui";
+// components
+import { Banner } from "@/components/common/banner";
+// local components
+import { AuthBanner } from "./auth-banner";
+import { authErrorHandler } from "./auth-helpers";
+
+// service initialization
+const authService = new AuthService();
+
+// error codes
+enum EErrorCodes {
+  INSTANCE_NOT_CONFIGURED = "INSTANCE_NOT_CONFIGURED",
+  REQUIRED_EMAIL_PASSWORD = "REQUIRED_EMAIL_PASSWORD",
+  INVALID_EMAIL = "INVALID_EMAIL",
+  USER_DOES_NOT_EXIST = "USER_DOES_NOT_EXIST",
+  AUTHENTICATION_FAILED = "AUTHENTICATION_FAILED",
+}
+
+type TError = {
+  type: EErrorCodes | undefined;
+  message: string | undefined;
+};
+
+// form data
+type TFormData = {
+  email: string;
+  password: string;
+};
+
+const defaultFromData: TFormData = {
+  email: "",
+  password: "",
+};
+
+export const InstanceSignInForm: FC = () => {
+  // search params
+  const searchParams = useSearchParams();
+  const emailParam = searchParams.get("email") || undefined;
+  const errorCode = searchParams.get("error_code") || undefined;
+  const errorMessage = searchParams.get("error_message") || undefined;
+  // state
+  const [showPassword, setShowPassword] = useState(false);
+  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
+  const [formData, setFormData] = useState<TFormData>(defaultFromData);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errorInfo, setErrorInfo] = useState<TAdminAuthErrorInfo | undefined>(undefined);
+
+  const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
+    setFormData((prev) => ({ ...prev, [key]: value }));
+
+  useEffect(() => {
+    if (csrfToken === undefined)
+      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
+  }, [csrfToken]);
+
+  useEffect(() => {
+    if (emailParam) setFormData((prev) => ({ ...prev, email: emailParam }));
+  }, [emailParam]);
+
+  // derived values
+  const errorData: TError = useMemo(() => {
+    if (errorCode && errorMessage) {
+      switch (errorCode) {
+        case EErrorCodes.INSTANCE_NOT_CONFIGURED:
+          return { type: EErrorCodes.INSTANCE_NOT_CONFIGURED, message: errorMessage };
+        case EErrorCodes.REQUIRED_EMAIL_PASSWORD:
+          return { type: EErrorCodes.REQUIRED_EMAIL_PASSWORD, message: errorMessage };
+        case EErrorCodes.INVALID_EMAIL:
+          return { type: EErrorCodes.INVALID_EMAIL, message: errorMessage };
+        case EErrorCodes.USER_DOES_NOT_EXIST:
+          return { type: EErrorCodes.USER_DOES_NOT_EXIST, message: errorMessage };
+        case EErrorCodes.AUTHENTICATION_FAILED:
+          return { type: EErrorCodes.AUTHENTICATION_FAILED, message: errorMessage };
+        default:
+          return { type: undefined, message: undefined };
+      }
+    } else return { type: undefined, message: undefined };
+  }, [errorCode, errorMessage]);
+
+  const isButtonDisabled = useMemo(
+    () => (!isSubmitting && formData.email && formData.password ? false : true),
+    [formData.email, formData.password, isSubmitting]
+  );
+
+  useEffect(() => {
+    if (errorCode) {
+      const errorDetail = authErrorHandler(errorCode?.toString() as EAdminAuthErrorCodes);
+      if (errorDetail) {
+        setErrorInfo(errorDetail);
+      }
+    }
+  }, [errorCode]);
+
+  return (
+    <form
+      className="space-y-4"
+      method="POST"
+      action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
+      onSubmit={() => setIsSubmitting(true)}
+      onError={() => setIsSubmitting(false)}
+    >
+      {errorData.type && errorData?.message ? (
+        <Banner type="error" message={errorData?.message} />
+      ) : (
+        <>{errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}</>
+      )}
+      <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+
+      <div className="w-full space-y-1">
+        <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
+          Email <span className="text-red-500">*</span>
+        </label>
+        <Input
+          className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+          id="email"
+          name="email"
+          type="email"
+          inputSize="md"
+          placeholder="name@company.com"
+          value={formData.email}
+          onChange={(e) => handleFormChange("email", e.target.value)}
+          autoComplete="on"
+          autoFocus
+        />
+      </div>
+
+      <div className="w-full space-y-1">
+        <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
+          Password <span className="text-red-500">*</span>
+        </label>
+        <div className="relative">
+          <Input
+            className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+            id="password"
+            name="password"
+            type={showPassword ? "text" : "password"}
+            inputSize="md"
+            placeholder="Enter your password"
+            value={formData.password}
+            onChange={(e) => handleFormChange("password", e.target.value)}
+            autoComplete="on"
+          />
+          {showPassword ? (
+            <button
+              type="button"
+              className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+              onClick={() => setShowPassword(false)}
+            >
+              <EyeOff className="h-4 w-4" />
+            </button>
+          ) : (
+            <button
+              type="button"
+              className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+              onClick={() => setShowPassword(true)}
+            >
+              <Eye className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="py-2">
+        <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
+          {isSubmitting ? <Spinner height="20px" width="20px" /> : "Sign in"}
+        </Button>
+      </div>
+    </form>
+  );
+};
@@ -0,0 +1,23 @@
+import { FC, ReactNode } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type InstanceProviderProps = {
+  children: ReactNode;
+};
+
+export const InstanceProvider: FC<InstanceProviderProps> = observer((props) => {
+  const { children } = props;
+  // store hooks
+  const { fetchInstanceInfo } = useInstance();
+  // fetching instance details
+  useSWR("INSTANCE_DETAILS", () => fetchInstanceInfo(), {
+    revalidateOnFocus: false,
+    revalidateIfStale: false,
+    errorRetryCount: 0,
+  });
+
+  return <>{children}</>;
+});
@@ -0,0 +1,33 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+import { SWRConfig } from "swr";
+// providers
+import { InstanceProvider } from "./instance.provider";
+import { StoreProvider } from "./store.provider";
+import { ToastWithTheme } from "./toast";
+import { UserProvider } from "./user.provider";
+
+const DEFAULT_SWR_CONFIG = {
+  refreshWhenHidden: false,
+  revalidateIfStale: false,
+  revalidateOnFocus: false,
+  revalidateOnMount: true,
+  refreshInterval: 600000,
+  errorRetryCount: 3,
+};
+
+export default function InstanceLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
+      <ToastWithTheme />
+      <SWRConfig value={DEFAULT_SWR_CONFIG}>
+        <StoreProvider>
+          <InstanceProvider>
+            <UserProvider>{children}</UserProvider>
+          </InstanceProvider>
+        </StoreProvider>
+      </SWRConfig>
+    </ThemeProvider>
+  );
+}
@@ -0,0 +1,10 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toast } from "@plane/ui";
+import { resolveGeneralTheme } from "@plane/utils";
+
+export const ToastWithTheme = () => {
+  const { resolvedTheme } = useTheme();
+  return <Toast theme={resolveGeneralTheme(resolvedTheme)} />;
+};
@@ -19,6 +19,7 @@ export const UserProvider: FC<IUserProvider> = observer(({ children }) => {
  useSWR("CURRENT_USER", () => fetchCurrentUser(), {
    shouldRetryOnError: false,
  });
+
  useSWR("INSTANCE_ADMINS", () => fetchInstanceAdmins());

  useEffect(() => {
@@ -0,0 +1,39 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+// plane imports
+import { ADMIN_BASE_PATH } from "@plane/constants";
+// styles
+import "@/styles/globals.css";
+
+export const metadata: Metadata = {
+  title: "Plane | Simple, extensible, open-source project management tool.",
+  description:
+    "Open-source project management tool to manage work items, sprints, and product roadmaps with peace of mind.",
+  openGraph: {
+    title: "Plane | Simple, extensible, open-source project management tool.",
+    description:
+      "Open-source project management tool to manage work items, sprints, and product roadmaps with peace of mind.",
+    url: "https://plane.so/",
+  },
+  keywords:
+    "software development, customer feedback, software, accelerate, code management, release management, project management, work items tracking, agile, scrum, kanban, collaboration",
+  twitter: {
+    site: "@planepowers",
+  },
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  const ASSET_PREFIX = ADMIN_BASE_PATH;
+  return (
+    <html lang="en">
+      <head>
+        <link rel="apple-touch-icon" sizes="180x180" href={`${ASSET_PREFIX}/favicon/apple-touch-icon.png`} />
+        <link rel="icon" type="image/png" sizes="32x32" href={`${ASSET_PREFIX}/favicon/favicon-32x32.png`} />
+        <link rel="icon" type="image/png" sizes="16x16" href={`${ASSET_PREFIX}/favicon/favicon-16x16.png`} />
+        <link rel="manifest" href={`${ASSET_PREFIX}/site.webmanifest.json`} />
+        <link rel="shortcut icon" href={`${ASSET_PREFIX}/favicon/favicon.ico`} />
+      </head>
+      <body className={`antialiased`}>{children}</body>
+    </html>
+  );
+}
@@ -0,0 +1,121 @@
+import { observer } from "mobx-react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import { KeyRound, Mails } from "lucide-react";
+// types
+import {
+  TGetBaseAuthenticationModeProps,
+  TInstanceAuthenticationMethodKeys,
+  TInstanceAuthenticationModes,
+} from "@plane/types";
+import { resolveGeneralTheme } from "@plane/utils";
+// components
+import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
+import { EmailCodesConfiguration } from "@/components/authentication/email-config-switch";
+import { GithubConfiguration } from "@/components/authentication/github-config";
+import { GitlabConfiguration } from "@/components/authentication/gitlab-config";
+import { GoogleConfiguration } from "@/components/authentication/google-config";
+import { PasswordLoginConfiguration } from "@/components/authentication/password-config-switch";
+// plane admin components
+import { UpgradeButton } from "@/plane-admin/components/common";
+// assets
+import githubLightModeImage from "@/public/logos/github-black.png";
+import githubDarkModeImage from "@/public/logos/github-white.png";
+import GitlabLogo from "@/public/logos/gitlab-logo.svg";
+import GoogleLogo from "@/public/logos/google-logo.svg";
+import OIDCLogo from "@/public/logos/oidc-logo.svg";
+import SAMLLogo from "@/public/logos/saml-logo.svg";
+
+export type TAuthenticationModeProps = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+// Authentication methods
+export const getAuthenticationModes: (props: TGetBaseAuthenticationModeProps) => TInstanceAuthenticationModes[] = ({
+  disabled,
+  updateConfig,
+  resolvedTheme,
+}) => [
+  {
+    key: "unique-codes",
+    name: "Unique codes",
+    description:
+      "Log in or sign up for Plane using codes sent via email. You need to have set up SMTP to use this method.",
+    icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+    config: <EmailCodesConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "passwords-login",
+    name: "Passwords",
+    description: "Allow members to create accounts with passwords and use it with their email addresses to sign in.",
+    icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+    config: <PasswordLoginConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "google",
+    name: "Google",
+    description: "Allow members to log in or sign up for Plane with their Google accounts.",
+    icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
+    config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "github",
+    name: "GitHub",
+    description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
+    icon: (
+      <Image
+        src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
+        height={20}
+        width={20}
+        alt="GitHub Logo"
+      />
+    ),
+    config: <GithubConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "gitlab",
+    name: "GitLab",
+    description: "Allow members to log in or sign up to plane with their GitLab accounts.",
+    icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
+    config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "oidc",
+    name: "OIDC",
+    description: "Authenticate your users via the OpenID Connect protocol.",
+    icon: <Image src={OIDCLogo} height={22} width={22} alt="OIDC Logo" />,
+    config: <UpgradeButton />,
+    unavailable: true,
+  },
+  {
+    key: "saml",
+    name: "SAML",
+    description: "Authenticate your users via the Security Assertion Markup Language protocol.",
+    icon: <Image src={SAMLLogo} height={22} width={22} alt="SAML Logo" className="pl-0.5" />,
+    config: <UpgradeButton />,
+    unavailable: true,
+  },
+];
+
+export const AuthenticationModes: React.FC<TAuthenticationModeProps> = observer((props) => {
+  const { disabled, updateConfig } = props;
+  // next-themes
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <>
+      {getAuthenticationModes({ disabled, updateConfig, resolvedTheme }).map((method) => (
+        <AuthenticationMethodCard
+          key={method.key}
+          name={method.name}
+          description={method.description}
+          icon={method.icon}
+          config={method.config}
+          disabled={disabled}
+          unavailable={method.unavailable}
+        />
+      ))}
+    </>
+  );
+});
@@ -0,0 +1,21 @@
+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 InstanceLoading = () => {
+  const { resolvedTheme } = useTheme();
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
+
+  return (
+    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
+      <div className="w-auto max-w-2xl relative space-y-8 py-10">
+        <div className="relative flex flex-col justify-center items-center space-y-4">
+          <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" priority={false} />
+          <h3 className="font-medium text-2xl text-white ">Fetching instance details...</h3>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -10,7 +10,8 @@ import { AuthService } from "@plane/services";
 import { Button, Checkbox, Input, Spinner } from "@plane/ui";
 import { getPasswordStrength } from "@plane/utils";
 // components
-import { Banner, PasswordStrengthMeter } from "@/components/common";
+import { Banner } from "@/components/common/banner";
+import { PasswordStrengthMeter } from "@/components/common/password-strength-meter";

 // service initialization
 const authService = new AuthService();
@@ -1,6 +1,6 @@
 import { useContext } from "react";
 // store
-import { StoreContext } from "@/lib/store-provider";
+import { StoreContext } from "@/app/(all)/store.provider";
 import { IInstanceStore } from "@/store/instance.store";

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

 export const useTheme = (): IThemeStore => {
--- a/Show More
+++ b/Show More