diff --git a/app/.env.example b/app/.env.example
new file mode 100644
index 000000000..cdf30fc72
--- /dev/null
+++ b/app/.env.example
@@ -0,0 +1,11 @@
+# Replace with your instance Public IP
+# NEXT_PUBLIC_API_BASE_URL = "http://localhost"
+NEXT_PUBLIC_EXTRA_IMAGE_DOMAINS=
+NEXT_PUBLIC_GOOGLE_CLIENTID=""
+NEXT_PUBLIC_GITHUB_APP_NAME=""
+NEXT_PUBLIC_GITHUB_ID=""
+NEXT_PUBLIC_SENTRY_DSN=""
+NEXT_PUBLIC_ENABLE_OAUTH=0
+NEXT_PUBLIC_ENABLE_SENTRY=0
+NEXT_PUBLIC_ENABLE_SESSION_RECORDER=0
+NEXT_PUBLIC_TRACK_EVENTS=0
diff --git a/app/.eslintrc.js b/app/.eslintrc.js
new file mode 100644
index 000000000..21eb74abb
--- /dev/null
+++ b/app/.eslintrc.js
@@ -0,0 +1,15 @@
+module.exports = {
+  extends: ["next", "prettier"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react", "@typescript-eslint"],
+  rules: {
+    "@next/next/no-html-link-for-pages": "off",
+    "react/jsx-key": "off",
+    "prefer-const": "error",
+    "no-irregular-whitespace": "error",
+    "no-trailing-spaces": "error",
+    "no-duplicate-imports": "error",
+    "arrow-body-style": ["error", "as-needed"],
+    "react/self-closing-comp": ["error", { component: true, html: true }],
+  },
+};
diff --git a/app/.prettierrc b/app/.prettierrc
new file mode 100644
index 000000000..d5cb26e54
--- /dev/null
+++ b/app/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
diff --git a/app/Dockerfile.dev b/app/Dockerfile.dev
new file mode 100644
index 000000000..d6c1ba274
--- /dev/null
+++ b/app/Dockerfile.dev
@@ -0,0 +1,13 @@
+FROM node:18-alpine
+RUN apk add --no-cache libc6-compat
+RUN apk update
+# Set working directory
+WORKDIR /app
+
+COPY . .
+
+RUN yarn install
+
+EXPOSE 3000
+
+
diff --git a/app/Dockerfile.web b/app/Dockerfile.web
new file mode 100644
index 000000000..35e3a72dd
--- /dev/null
+++ b/app/Dockerfile.web
@@ -0,0 +1,30 @@
+FROM node:18-alpine AS builder
+RUN apk add --no-cache libc6-compat
+RUN apk update
+# Set working directory
+WORKDIR /app
+
+# Install dependencies
+RUN yarn install --frozen-lockfile
+COPY . .
+
+# build
+RUN yarn build
+
+FROM node:18-alpine AS runner
+WORKDIR /app
+
+# Don't run production as root
+RUN addgroup --system --gid 1001 plane
+RUN adduser --system --uid 1001 captain
+USER captain
+
+COPY --from=builder /app/next.config.js .
+COPY --from=builder /app/package.json .
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
+EXPOSE 3000
diff --git a/app/components/account/email-code-form.tsx b/app/components/account/email-code-form.tsx
new file mode 100644
index 000000000..389153d60
--- /dev/null
+++ b/app/components/account/email-code-form.tsx
@@ -0,0 +1,199 @@
+import React, { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+// ui
+import { CheckCircleIcon } from "@heroicons/react/20/solid";
+import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+// services
+import authenticationService from "services/authentication.service";
+import useToast from "hooks/use-toast";
+import useTimer from "hooks/use-timer";
+// icons
+
+// types
+type EmailCodeFormValues = {
+  email: string;
+  key?: string;
+  token?: string;
+};
+
+export const EmailCodeForm = ({ onSuccess }: any) => {
+  const [codeSent, setCodeSent] = useState(false);
+  const [codeResent, setCodeResent] = useState(false);
+  const [isCodeResending, setIsCodeResending] = useState(false);
+  const [errorResendingCode, setErrorResendingCode] = useState(false);
+
+  const { setToastAlert } = useToast();
+  const { timer: resendCodeTimer, setTimer: setResendCodeTimer } = useTimer();
+
+  const {
+    register,
+    handleSubmit,
+    setError,
+    setValue,
+    getValues,
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<EmailCodeFormValues>({
+    defaultValues: {
+      email: "",
+      key: "",
+      token: "",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const isResendDisabled =
+    resendCodeTimer > 0 || isCodeResending || isSubmitting || errorResendingCode;
+
+  const onSubmit = async ({ email }: EmailCodeFormValues) => {
+    setErrorResendingCode(false);
+    await authenticationService
+      .emailCode({ email })
+      .then((res) => {
+        setValue("key", res.key);
+        setCodeSent(true);
+      })
+      .catch((err) => {
+        setErrorResendingCode(true);
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: err?.error,
+        });
+      });
+  };
+
+  const handleSignin = async (formData: EmailCodeFormValues) => {
+    await authenticationService
+      .magicSignIn(formData)
+      .then((response) => {
+        onSuccess(response);
+      })
+      .catch((error) => {
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: error?.response?.data?.error ?? "Enter the correct code to sign in",
+        });
+        setError("token" as keyof EmailCodeFormValues, {
+          type: "manual",
+          message: error.error,
+        });
+      });
+  };
+
+  const emailOld = getValues("email");
+
+  useEffect(() => {
+    setErrorResendingCode(false);
+  }, [emailOld]);
+
+  return (
+    <>
+      <form className="space-y-5 py-5 px-5">
+        {(codeSent || codeResent) && (
+          <div className="rounded-md bg-green-50 p-4">
+            <div className="flex">
+              <div className="flex-shrink-0">
+                <CheckCircleIcon className="h-5 w-5 text-green-400" aria-hidden="true" />
+              </div>
+              <div className="ml-3">
+                <p className="text-sm font-medium text-green-800">
+                  {codeResent
+                    ? "Please check your mail for new code."
+                    : "Please check your mail for code."}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+        <div>
+          <Input
+            id="email"
+            type="email"
+            name="email"
+            register={register}
+            validations={{
+              required: "Email ID is required",
+              validate: (value) =>
+                /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                  value
+                ) || "Email ID is not valid",
+            }}
+            error={errors.email}
+            placeholder="Enter your Email ID"
+          />
+        </div>
+
+        {codeSent && (
+          <div>
+            <Input
+              id="token"
+              type="token"
+              name="token"
+              register={register}
+              validations={{
+                required: "Code is required",
+              }}
+              error={errors.token}
+              placeholder="Enter code"
+            />
+            <button
+              type="button"
+              className={`mt-5 flex w-full justify-end text-xs outline-none ${
+                isResendDisabled ? "cursor-default text-gray-400" : "cursor-pointer text-brand-accent"
+              } `}
+              onClick={() => {
+                setIsCodeResending(true);
+                onSubmit({ email: getValues("email") }).then(() => {
+                  setCodeResent(true);
+                  setIsCodeResending(false);
+                  setResendCodeTimer(30);
+                });
+              }}
+              disabled={isResendDisabled}
+            >
+              {resendCodeTimer > 0 ? (
+                <p className="text-right">
+                  Didn{"'"}t receive code? Get new code in {resendCodeTimer} seconds.
+                </p>
+              ) : isCodeResending ? (
+                "Sending code..."
+              ) : errorResendingCode ? (
+                "Please try again later"
+              ) : (
+                "Resend code"
+              )}
+            </button>
+          </div>
+        )}
+        <div>
+          {codeSent ? (
+            <PrimaryButton
+              type="submit"
+              className="w-full text-center"
+              size="md"
+              onClick={handleSubmit(handleSignin)}
+              loading={isSubmitting || (!isValid && isDirty)}
+            >
+              {isSubmitting ? "Signing in..." : "Sign in"}
+            </PrimaryButton>
+          ) : (
+            <PrimaryButton
+              className="w-full text-center"
+              size="md"
+              onClick={() => {
+                handleSubmit(onSubmit)().then(() => {
+                  setResendCodeTimer(30);
+                });
+              }}
+              loading={isSubmitting || (!isValid && isDirty)}
+            >
+              {isSubmitting ? "Sending code..." : "Send code"}
+            </PrimaryButton>
+          )}
+        </div>
+      </form>
+    </>
+  );
+};
diff --git a/app/components/account/email-password-form.tsx b/app/components/account/email-password-form.tsx
new file mode 100644
index 000000000..d35abdfe8
--- /dev/null
+++ b/app/components/account/email-password-form.tsx
@@ -0,0 +1,113 @@
+import React from "react";
+
+import Link from "next/link";
+
+// react hook form
+import { useForm } from "react-hook-form";
+// services
+import authenticationService from "services/authentication.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Input, SecondaryButton } from "components/ui";
+// types
+type EmailPasswordFormValues = {
+  email: string;
+  password?: string;
+  medium?: string;
+};
+
+export const EmailPasswordForm = ({ onSuccess }: any) => {
+  const { setToastAlert } = useToast();
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<EmailPasswordFormValues>({
+    defaultValues: {
+      email: "",
+      password: "",
+      medium: "email",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const onSubmit = (formData: EmailPasswordFormValues) => {
+    authenticationService
+      .emailLogin(formData)
+      .then((response) => {
+        onSuccess(response);
+      })
+      .catch((error) => {
+        console.log(error);
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: "Enter the correct email address and password to sign in",
+        });
+        if (!error?.response?.data) return;
+        Object.keys(error.response.data).forEach((key) => {
+          const err = error.response.data[key];
+          console.log(err);
+          setError(key as keyof EmailPasswordFormValues, {
+            type: "manual",
+            message: Array.isArray(err) ? err.join(", ") : err,
+          });
+        });
+      });
+  };
+  return (
+    <>
+      <form className="mt-5 py-5 px-5" onSubmit={handleSubmit(onSubmit)}>
+        <div>
+          <Input
+            id="email"
+            type="email"
+            name="email"
+            register={register}
+            validations={{
+              required: "Email ID is required",
+              validate: (value) =>
+                /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                  value
+                ) || "Email ID is not valid",
+            }}
+            error={errors.email}
+            placeholder="Enter your Email ID"
+          />
+        </div>
+        <div className="mt-5">
+          <Input
+            id="password"
+            type="password"
+            name="password"
+            register={register}
+            validations={{
+              required: "Password is required",
+            }}
+            error={errors.password}
+            placeholder="Enter your password"
+          />
+        </div>
+        <div className="mt-2 flex items-center justify-between">
+          <div className="ml-auto text-sm">
+            <Link href={"/forgot-password"}>
+              <a className="font-medium text-brand-accent hover:text-indigo-500">Forgot your password?</a>
+            </Link>
+          </div>
+        </div>
+        <div className="mt-5">
+          <SecondaryButton
+            type="submit"
+            className="w-full text-center"
+            loading={isSubmitting || (!isValid && isDirty)}
+          >
+            {isSubmitting ? "Signing in..." : "Sign In"}
+          </SecondaryButton>
+        </div>
+      </form>
+    </>
+  );
+};
diff --git a/app/components/account/email-signin-form.tsx b/app/components/account/email-signin-form.tsx
new file mode 100644
index 000000000..e2f81d50c
--- /dev/null
+++ b/app/components/account/email-signin-form.tsx
@@ -0,0 +1,24 @@
+import { useState, FC } from "react";
+import { KeyIcon } from "@heroicons/react/24/outline";
+// components
+import { EmailCodeForm, EmailPasswordForm } from "components/account";
+
+export interface EmailSignInFormProps {
+  handleSuccess: () => void;
+}
+
+export const EmailSignInForm: FC<EmailSignInFormProps> = (props) => {
+  const { handleSuccess } = props;
+  // states
+  const [useCode, setUseCode] = useState(true);
+
+  return (
+    <>
+      {useCode ? (
+        <EmailCodeForm onSuccess={handleSuccess} />
+      ) : (
+        <EmailPasswordForm onSuccess={handleSuccess} />
+      )}
+    </>
+  );
+};
diff --git a/app/components/account/github-login-button.tsx b/app/components/account/github-login-button.tsx
new file mode 100644
index 000000000..5b49208bb
--- /dev/null
+++ b/app/components/account/github-login-button.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useState, FC } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+// images
+import githubImage from "/public/logos/github-black.png";
+
+const { NEXT_PUBLIC_GITHUB_ID } = process.env;
+
+export interface GithubLoginButtonProps {
+  handleSignIn: React.Dispatch<string>;
+}
+
+export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
+  const { handleSignIn } = props;
+  // router
+  const {
+    query: { code },
+  } = useRouter();
+  // states
+  const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
+
+  useEffect(() => {
+    if (code) {
+      handleSignIn(code.toString());
+    }
+  }, [code, handleSignIn]);
+
+  useEffect(() => {
+    const origin =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    setLoginCallBackURL(`${origin}/signin` as any);
+  }, []);
+
+  return (
+    <div className="px-1 w-full">
+      <Link
+        href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
+      >
+        <button className="flex w-full items-center justify-center gap-3 rounded-md border border-brand-base p-2 text-sm font-medium text-gray-600 duration-300 hover:bg-gray-50">
+          <Image src={githubImage} height={22} width={22} color="#000" alt="GitHub Logo" />
+          <span>Sign In with Github</span>
+        </button>
+      </Link>
+    </div>
+  );
+};
diff --git a/app/components/account/google-login.tsx b/app/components/account/google-login.tsx
new file mode 100644
index 000000000..478ffc67e
--- /dev/null
+++ b/app/components/account/google-login.tsx
@@ -0,0 +1,53 @@
+import { FC, CSSProperties, useEffect, useRef, useCallback, useState } from "react";
+// next
+import Script from "next/script";
+
+export interface IGoogleLoginButton {
+  text?: string;
+  handleSignIn: React.Dispatch<any>;
+  styles?: CSSProperties;
+}
+
+export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
+  const { handleSignIn } = props;
+
+  const googleSignInButton = useRef<HTMLDivElement>(null);
+  const [gsiScriptLoaded, setGsiScriptLoaded] = useState(false);
+
+  const loadScript = useCallback(() => {
+    if (!googleSignInButton.current || gsiScriptLoaded) return;
+    window?.google?.accounts.id.initialize({
+      client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
+      callback: handleSignIn,
+    });
+    window?.google?.accounts.id.renderButton(
+      googleSignInButton.current,
+      {
+        type: "standard",
+        theme: "outline",
+        size: "large",
+        logo_alignment: "center",
+        width: "410",
+        text: "continue_with",
+      } as GsiButtonConfiguration // customization attributes
+    );
+    window?.google?.accounts.id.prompt(); // also display the One Tap dialog
+    setGsiScriptLoaded(true);
+  }, [handleSignIn, gsiScriptLoaded]);
+
+  useEffect(() => {
+    if (window?.google?.accounts?.id) {
+      loadScript();
+    }
+    return () => {
+      window?.google?.accounts.id.cancel();
+    };
+  }, [loadScript]);
+
+  return (
+    <>
+      <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
+      <div className="h-12" id="googleSignInButton" ref={googleSignInButton} />
+    </>
+  );
+};
diff --git a/app/components/account/index.ts b/app/components/account/index.ts
new file mode 100644
index 000000000..b78e2e921
--- /dev/null
+++ b/app/components/account/index.ts
@@ -0,0 +1,5 @@
+export * from "./google-login";
+export * from "./email-code-form";
+export * from "./email-password-form";
+export * from "./github-login-button";
+export * from "./email-signin-form";
diff --git a/app/components/auth-screens/index.ts b/app/components/auth-screens/index.ts
new file mode 100644
index 000000000..2a0bd4423
--- /dev/null
+++ b/app/components/auth-screens/index.ts
@@ -0,0 +1,3 @@
+export * from "./project";
+export * from "./workspace";
+export * from "./not-authorized-view";
diff --git a/app/components/auth-screens/not-authorized-view.tsx b/app/components/auth-screens/not-authorized-view.tsx
new file mode 100644
index 000000000..054e5bfa3
--- /dev/null
+++ b/app/components/auth-screens/not-authorized-view.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+// next
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// hooks
+import useUser from "hooks/use-user";
+// images
+import ProjectNotAuthorizedImg from "public/auth/project-not-authorized.svg";
+import WorkspaceNotAuthorizedImg from "public/auth/workspace-not-authorized.svg";
+
+type Props = {
+  actionButton?: React.ReactNode;
+  type: "project" | "workspace";
+};
+
+export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
+  const { user } = useUser();
+  const { asPath: currentPath } = useRouter();
+
+  return (
+    <DefaultLayout
+      meta={{
+        title: "Plane - Not Authorized",
+        description: "You are not authorized to view this page",
+      }}
+    >
+      <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 text-center">
+        <div className="h-44 w-72">
+          <Image
+            src={type === "project" ? ProjectNotAuthorizedImg : WorkspaceNotAuthorizedImg}
+            height="176"
+            width="288"
+            alt="ProjectSettingImg"
+          />
+        </div>
+        <h1 className="text-xl font-medium text-brand-base">
+          Oops! You are not authorized to view this page
+        </h1>
+
+        <div className="w-full text-base text-brand-secondary max-w-md ">
+          {user ? (
+            <p>
+              You have signed in as {user.email}. <br />
+              <Link href={`/signin?next=${currentPath}`}>
+                <a className="text-brand-base font-medium">Sign in</a>
+              </Link>{" "}
+              with different account that has access to this page.
+            </p>
+          ) : (
+            <p>
+              You need to{" "}
+              <Link href={`/signin?next=${currentPath}`}>
+                <a className="text-brand-base font-medium">Sign in</a>
+              </Link>{" "}
+              with an account that has access to this page.
+            </p>
+          )}
+        </div>
+
+        {actionButton}
+      </div>
+    </DefaultLayout>
+  );
+};
diff --git a/app/components/auth-screens/project/index.ts b/app/components/auth-screens/project/index.ts
new file mode 100644
index 000000000..1fb77e697
--- /dev/null
+++ b/app/components/auth-screens/project/index.ts
@@ -0,0 +1 @@
+export * from "./join-project";
diff --git a/app/components/auth-screens/project/join-project.tsx b/app/components/auth-screens/project/join-project.tsx
new file mode 100644
index 000000000..cf8fabd41
--- /dev/null
+++ b/app/components/auth-screens/project/join-project.tsx
@@ -0,0 +1,68 @@
+import { useState } from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// services
+import projectService from "services/project.service";
+// ui
+import { PrimaryButton } from "components/ui";
+// icons
+import { AssignmentClipboardIcon } from "components/icons";
+// images
+import JoinProjectImg from "public/auth/project-not-authorized.svg";
+// fetch-keys
+import { USER_PROJECT_VIEW } from "constants/fetch-keys";
+
+export const JoinProject: React.FC = () => {
+  const [isJoiningProject, setIsJoiningProject] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const handleJoin = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    setIsJoiningProject(true);
+    projectService
+      .joinProject(workspaceSlug as string, {
+        project_ids: [projectId as string],
+      })
+      .then(async () => {
+        await mutate(USER_PROJECT_VIEW(projectId.toString()));
+        setIsJoiningProject(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsJoiningProject(false);
+      });
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 text-center">
+      <div className="h-44 w-72">
+        <Image src={JoinProjectImg} height="176" width="288" alt="JoinProject" />
+      </div>
+      <h1 className="text-xl font-medium text-gray-900">You are not a member of this project</h1>
+
+      <div className="w-full max-w-md text-base text-gray-500 ">
+        <p className="mx-auto w-full text-sm md:w-3/4">
+          You are not a member of this project, but you can join this project by clicking the button
+          below.
+        </p>
+      </div>
+      <div>
+        <PrimaryButton
+          className="flex items-center gap-1"
+          loading={isJoiningProject}
+          onClick={handleJoin}
+        >
+          <AssignmentClipboardIcon height={16} width={16} color="white" />
+          {isJoiningProject ? "Joining..." : "Click to join"}
+        </PrimaryButton>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/auth-screens/workspace/index.ts b/app/components/auth-screens/workspace/index.ts
new file mode 100644
index 000000000..828324312
--- /dev/null
+++ b/app/components/auth-screens/workspace/index.ts
@@ -0,0 +1 @@
+export * from "./not-a-member";
diff --git a/app/components/auth-screens/workspace/not-a-member.tsx b/app/components/auth-screens/workspace/not-a-member.tsx
new file mode 100644
index 000000000..542727593
--- /dev/null
+++ b/app/components/auth-screens/workspace/not-a-member.tsx
@@ -0,0 +1,44 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// ui
+import { PrimaryButton, SecondaryButton } from "components/ui";
+
+export const NotAWorkspaceMember = () => {
+  const router = useRouter();
+
+  return (
+    <DefaultLayout
+      meta={{
+        title: "Plane - Unauthorized User",
+        description: "Unauthorized user",
+      }}
+    >
+      <div className="grid h-full place-items-center p-4">
+        <div className="space-y-8 text-center">
+          <div className="space-y-2">
+            <h3 className="text-lg font-semibold">Not Authorized!</h3>
+            <p className="text-sm text-gray-500 w-1/2 mx-auto">
+              You{"'"}re not a member of this workspace. Please contact the workspace admin to get
+              an invitation or check your pending invitations.
+            </p>
+          </div>
+          <div className="flex items-center gap-2 justify-center">
+            <Link href="/invitations">
+              <a>
+                <SecondaryButton>Check pending invites</SecondaryButton>
+              </a>
+            </Link>
+            <Link href="/create-workspace">
+              <a>
+                <PrimaryButton>Create new workspace</PrimaryButton>
+              </a>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  );
+};
diff --git a/app/components/breadcrumbs/index.tsx b/app/components/breadcrumbs/index.tsx
new file mode 100644
index 000000000..98944fe37
--- /dev/null
+++ b/app/components/breadcrumbs/index.tsx
@@ -0,0 +1,60 @@
+import * as React from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+// icons
+import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+
+type BreadcrumbsProps = {
+  children: any;
+};
+
+const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
+  const router = useRouter();
+
+  return (
+    <>
+      <div className="flex items-center">
+        <button
+          type="button"
+          className="grid h-8 w-8 flex-shrink-0 cursor-pointer place-items-center rounded border border-brand-base text-center text-sm hover:bg-brand-surface-1"
+          onClick={() => router.back()}
+        >
+          <ArrowLeftIcon className="h-3 w-3" />
+        </button>
+        {children}
+      </div>
+    </>
+  );
+};
+
+type BreadcrumbItemProps = {
+  title: string;
+  link?: string;
+  icon?: any;
+};
+
+const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) => (
+  <>
+    {link ? (
+      <Link href={link}>
+        <a className="border-r-2 border-brand-base px-3 text-sm">
+          <p className={`${icon ? "flex items-center gap-2" : ""}`}>
+            {icon ?? null}
+            {title}
+          </p>
+        </a>
+      </Link>
+    ) : (
+      <div className="max-w-64 px-3 text-sm">
+        <p className={`${icon ? "flex items-center gap-2" : ""}`}>
+          {icon}
+          <span className="break-all">{title}</span>
+        </p>
+      </div>
+    )}
+  </>
+);
+
+Breadcrumbs.BreadcrumbItem = BreadcrumbItem;
+
+export { Breadcrumbs, BreadcrumbItem };
diff --git a/app/components/command-palette/change-interface-theme.tsx b/app/components/command-palette/change-interface-theme.tsx
new file mode 100644
index 000000000..f4bcd7483
--- /dev/null
+++ b/app/components/command-palette/change-interface-theme.tsx
@@ -0,0 +1,45 @@
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+
+// cmdk
+import { Command } from "cmdk";
+import { THEMES_OBJ } from "constants/themes";
+import { useTheme } from "next-themes";
+import { SettingIcon } from "components/icons";
+
+type Props = {
+  setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
+};
+
+export const ChangeInterfaceTheme: React.FC<Props> = ({ setIsPaletteOpen }) => {
+  const [mounted, setMounted] = useState(false);
+  const { setTheme } = useTheme();
+
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <>
+      {THEMES_OBJ.map((theme) => (
+        <Command.Item
+          key={theme.value}
+          onSelect={() => {
+            setTheme(theme.value);
+            setIsPaletteOpen(false);
+          }}
+          className="focus:outline-none"
+        >
+          <div className="flex items-center gap-2 text-brand-secondary">
+            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+            {theme.label}
+          </div>
+        </Command.Item>
+      ))}
+    </>
+  );
+};
diff --git a/app/components/command-palette/change-issue-assignee.tsx b/app/components/command-palette/change-issue-assignee.tsx
new file mode 100644
index 000000000..09f597e2e
--- /dev/null
+++ b/app/components/command-palette/change-issue-assignee.tsx
@@ -0,0 +1,108 @@
+import { useRouter } from "next/router";
+import React, { Dispatch, SetStateAction, useCallback } from "react";
+import useSWR, { mutate } from "swr";
+
+// cmdk
+import { Command } from "cmdk";
+// services
+import issuesService from "services/issues.service";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY, PROJECT_MEMBERS } from "constants/fetch-keys";
+// icons
+import { CheckIcon } from "components/icons";
+import projectService from "services/project.service";
+import { Avatar } from "components/ui";
+
+type Props = {
+  setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
+  issue: IIssue;
+};
+
+export const ChangeIssueAssignee: React.FC<Props> = ({ setIsPaletteOpen, issue }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { data: members } = useSWR(
+    projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const options =
+    members?.map(({ member }) => ({
+      value: member.id,
+      query:
+        (member.first_name && member.first_name !== "" ? member.first_name : member.email) +
+          " " +
+          member.last_name ?? "",
+      content: (
+        <>
+          <div className="flex items-center gap-2">
+            <Avatar user={member} />
+            {member.first_name && member.first_name !== "" ? member.first_name : member.email}
+          </div>
+          {issue.assignees.includes(member.id) && (
+            <div>
+              <CheckIcon className="h-3 w-3" />
+            </div>
+          )}
+        </>
+      ),
+    })) ?? [];
+
+  const updateIssue = useCallback(
+    async (formData: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId || !issueId) return;
+
+      mutate(
+        ISSUE_DETAILS(issueId as string),
+        (prevData: IIssue) => ({
+          ...prevData,
+          ...formData,
+        }),
+        false
+      );
+
+      const payload = { ...formData };
+      await issuesService
+        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload)
+        .then(() => {
+          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+    },
+    [workspaceSlug, issueId, projectId]
+  );
+
+  const handleIssueAssignees = (assignee: string) => {
+    const updatedAssignees = issue.assignees ?? [];
+
+    if (updatedAssignees.includes(assignee)) {
+      updatedAssignees.splice(updatedAssignees.indexOf(assignee), 1);
+    } else {
+      updatedAssignees.push(assignee);
+    }
+
+    updateIssue({ assignees_list: updatedAssignees });
+    setIsPaletteOpen(false);
+  };
+
+  return (
+    <>
+      {options.map((option) => (
+        <Command.Item
+          key={option.value}
+          onSelect={() => handleIssueAssignees(option.value)}
+          className="focus:outline-none"
+        >
+          {option.content}
+        </Command.Item>
+      ))}
+    </>
+  );
+};
diff --git a/app/components/command-palette/change-issue-priority.tsx b/app/components/command-palette/change-issue-priority.tsx
new file mode 100644
index 000000000..b6eca1df8
--- /dev/null
+++ b/app/components/command-palette/change-issue-priority.tsx
@@ -0,0 +1,74 @@
+import { useRouter } from "next/router";
+import React, { Dispatch, SetStateAction, useCallback } from "react";
+import { mutate } from "swr";
+
+// cmdk
+import { Command } from "cmdk";
+// services
+import issuesService from "services/issues.service";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+import { PRIORITIES } from "constants/project";
+// icons
+import { CheckIcon, getPriorityIcon } from "components/icons";
+
+type Props = {
+  setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
+  issue: IIssue;
+};
+
+export const ChangeIssuePriority: React.FC<Props> = ({ setIsPaletteOpen, issue }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const submitChanges = useCallback(
+    async (formData: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId || !issueId) return;
+
+      mutate(
+        ISSUE_DETAILS(issueId as string),
+        (prevData: IIssue) => ({
+          ...prevData,
+          ...formData,
+        }),
+        false
+      );
+
+      const payload = { ...formData };
+      await issuesService
+        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload)
+        .then(() => {
+          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+    },
+    [workspaceSlug, issueId, projectId]
+  );
+
+  const handleIssueState = (priority: string | null) => {
+    submitChanges({ priority });
+    setIsPaletteOpen(false);
+  };
+
+  return (
+    <>
+      {PRIORITIES.map((priority) => (
+        <Command.Item
+          key={priority}
+          onSelect={() => handleIssueState(priority)}
+          className="focus:outline-none"
+        >
+          <div className="flex items-center space-x-3">
+            {getPriorityIcon(priority)}
+            <span className="capitalize">{priority ?? "None"}</span>
+          </div>
+          <div>{priority === issue.priority && <CheckIcon className="h-3 w-3" />}</div>
+        </Command.Item>
+      ))}
+    </>
+  );
+};
diff --git a/app/components/command-palette/change-issue-state.tsx b/app/components/command-palette/change-issue-state.tsx
new file mode 100644
index 000000000..2eef56193
--- /dev/null
+++ b/app/components/command-palette/change-issue-state.tsx
@@ -0,0 +1,95 @@
+import { useRouter } from "next/router";
+import React, { Dispatch, SetStateAction, useCallback } from "react";
+import useSWR, { mutate } from "swr";
+
+// cmdk
+import { Command } from "cmdk";
+// ui
+import { Spinner } from "components/ui";
+// helpers
+import { getStatesList } from "helpers/state.helper";
+// services
+import issuesService from "services/issues.service";
+import stateService from "services/state.service";
+// types
+import { IIssue } from "types";
+// fetch keys
+import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY, STATE_LIST } from "constants/fetch-keys";
+// icons
+import { CheckIcon, getStateGroupIcon } from "components/icons";
+
+type Props = {
+  setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
+  issue: IIssue;
+};
+
+export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { data: stateGroups, mutate: mutateIssueDetails } = useSWR(
+    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
+      : null
+  );
+  const states = getStatesList(stateGroups ?? {});
+
+  const submitChanges = useCallback(
+    async (formData: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId || !issueId) return;
+
+      mutate(
+        ISSUE_DETAILS(issueId as string),
+        (prevData: IIssue) => ({
+          ...prevData,
+          ...formData,
+        }),
+        false
+      );
+
+      const payload = { ...formData };
+      await issuesService
+        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload)
+        .then(() => {
+          mutateIssueDetails();
+          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+    },
+    [workspaceSlug, issueId, projectId, mutateIssueDetails]
+  );
+
+  const handleIssueState = (stateId: string) => {
+    submitChanges({ state: stateId });
+    setIsPaletteOpen(false);
+  };
+
+  return (
+    <>
+      {states ? (
+        states.length > 0 ? (
+          states.map((state) => (
+            <Command.Item
+              key={state.id}
+              onSelect={() => handleIssueState(state.id)}
+              className="focus:outline-none"
+            >
+              <div className="flex items-center space-x-3">
+                {getStateGroupIcon(state.group, "16", "16", state.color)}
+                <p>{state.name}</p>
+              </div>
+              <div>{state.id === issue.state && <CheckIcon className="h-3 w-3" />}</div>
+            </Command.Item>
+          ))
+        ) : (
+          <div className="text-center">No states found</div>
+        )
+      ) : (
+        <Spinner />
+      )}
+    </>
+  );
+};
diff --git a/app/components/command-palette/command-pallette.tsx b/app/components/command-palette/command-pallette.tsx
new file mode 100644
index 000000000..3feca33f6
--- /dev/null
+++ b/app/components/command-palette/command-pallette.tsx
@@ -0,0 +1,879 @@
+import { useRouter } from "next/router";
+import React, { useCallback, useEffect, useState } from "react";
+import useSWR, { mutate } from "swr";
+
+// icons
+import {
+  ArrowRightIcon,
+  ChartBarIcon,
+  ChatBubbleOvalLeftEllipsisIcon,
+  DocumentTextIcon,
+  FolderPlusIcon,
+  LinkIcon,
+  MagnifyingGlassIcon,
+  RocketLaunchIcon,
+  Squares2X2Icon,
+  TrashIcon,
+  UserMinusIcon,
+  UserPlusIcon,
+  UsersIcon,
+} from "@heroicons/react/24/outline";
+import {
+  AssignmentClipboardIcon,
+  ContrastIcon,
+  DiscordIcon,
+  DocumentIcon,
+  GithubIcon,
+  LayerDiagonalIcon,
+  PeopleGroupIcon,
+  SettingIcon,
+  ViewListIcon,
+} from "components/icons";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// cmdk
+import { Command } from "cmdk";
+// hooks
+import useTheme from "hooks/use-theme";
+import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
+import useDebounce from "hooks/use-debounce";
+// components
+import {
+  ShortcutsModal,
+  ChangeIssueState,
+  ChangeIssuePriority,
+  ChangeIssueAssignee,
+  ChangeInterfaceTheme,
+} from "components/command-palette";
+import { BulkDeleteIssuesModal } from "components/core";
+import { CreateUpdateCycleModal } from "components/cycles";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { CreateUpdateModuleModal } from "components/modules";
+import { CreateProjectModal } from "components/project";
+import { CreateUpdateViewModal } from "components/views";
+import { CreateUpdatePageModal } from "components/pages";
+
+import { Spinner } from "components/ui";
+// helpers
+import {
+  capitalizeFirstLetter,
+  copyTextToClipboard,
+  replaceUnderscoreIfSnakeCase,
+} from "helpers/string.helper";
+// services
+import issuesService from "services/issues.service";
+import workspaceService from "services/workspace.service";
+// types
+import { IIssue, IWorkspaceSearchResults } from "types";
+// fetch keys
+import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+
+export const CommandPalette: React.FC = () => {
+  const [isPaletteOpen, setIsPaletteOpen] = useState(false);
+  const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
+  const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
+  const [isShortcutsModalOpen, setIsShortcutsModalOpen] = useState(false);
+  const [isCreateCycleModalOpen, setIsCreateCycleModalOpen] = useState(false);
+  const [isCreateViewModalOpen, setIsCreateViewModalOpen] = useState(false);
+  const [isCreateModuleModalOpen, setIsCreateModuleModalOpen] = useState(false);
+  const [isBulkDeleteIssuesModalOpen, setIsBulkDeleteIssuesModalOpen] = useState(false);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [isCreateUpdatePageModalOpen, setIsCreateUpdatePageModalOpen] = useState(false);
+
+  const [searchTerm, setSearchTerm] = React.useState<string>("");
+  const [results, setResults] = useState<IWorkspaceSearchResults>({
+    results: {
+      workspace: [],
+      project: [],
+      issue: [],
+      cycle: [],
+      module: [],
+      issue_view: [],
+      page: [],
+    },
+  });
+  const [resultsCount, setResultsCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const debouncedSearchTerm = useDebounce(searchTerm, 500);
+  const [placeholder, setPlaceholder] = React.useState("Type a command or search...");
+  const [pages, setPages] = React.useState<string[]>([]);
+  const page = pages[pages.length - 1];
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { user } = useUser();
+  const { setToastAlert } = useToast();
+  const { toggleCollapsed } = useTheme();
+
+  const { data: issueDetails } = useSWR<IIssue | undefined>(
+    workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
+    workspaceSlug && projectId && issueId
+      ? () =>
+          issuesService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
+      : null
+  );
+
+  const updateIssue = useCallback(
+    async (formData: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId || !issueId) return;
+
+      mutate(
+        ISSUE_DETAILS(issueId as string),
+        (prevData: IIssue) => ({
+          ...prevData,
+          ...formData,
+        }),
+        false
+      );
+
+      const payload = { ...formData };
+      await issuesService
+        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload)
+        .then(() => {
+          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+          mutate(ISSUE_DETAILS(issueId as string));
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+    },
+    [workspaceSlug, issueId, projectId]
+  );
+
+  const handleIssueAssignees = (assignee: string) => {
+    if (!issueDetails) return;
+
+    setIsPaletteOpen(false);
+    const updatedAssignees = issueDetails.assignees ?? [];
+
+    if (updatedAssignees.includes(assignee)) {
+      updatedAssignees.splice(updatedAssignees.indexOf(assignee), 1);
+    } else {
+      updatedAssignees.push(assignee);
+    }
+    updateIssue({ assignees_list: updatedAssignees });
+  };
+
+  const copyIssueUrlToClipboard = useCallback(() => {
+    if (!router.query.issueId) return;
+
+    const url = new URL(window.location.href);
+    copyTextToClipboard(url.href)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Copied to clipboard",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Some error occurred",
+        });
+      });
+  }, [router, setToastAlert]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      const singleShortcutKeys = ["p", "v", "d", "h", "q", "m"];
+      const { key, ctrlKey, metaKey, altKey, shiftKey } = e;
+      if (!key) return;
+      const keyPressed = key.toLowerCase();
+      if (
+        !(e.target instanceof HTMLTextAreaElement) &&
+        !(e.target instanceof HTMLInputElement) &&
+        !(e.target as Element).classList?.contains("remirror-editor")
+      ) {
+        if ((ctrlKey || metaKey) && keyPressed === "k") {
+          e.preventDefault();
+          setIsPaletteOpen(true);
+        } else if ((ctrlKey || metaKey) && keyPressed === "c") {
+          if (altKey) {
+            e.preventDefault();
+            copyIssueUrlToClipboard();
+          }
+        } else if (keyPressed === "c") {
+          e.preventDefault();
+          setIsIssueModalOpen(true);
+        } else if ((ctrlKey || metaKey) && keyPressed === "b") {
+          e.preventDefault();
+          toggleCollapsed();
+        } else if (key === "Delete") {
+          e.preventDefault();
+          setIsBulkDeleteIssuesModalOpen(true);
+        } else if (
+          singleShortcutKeys.includes(keyPressed) &&
+          (ctrlKey || metaKey || altKey || shiftKey)
+        ) {
+          e.preventDefault();
+        } else if (keyPressed === "p") {
+          setIsProjectModalOpen(true);
+        } else if (keyPressed === "v") {
+          setIsCreateViewModalOpen(true);
+        } else if (keyPressed === "d") {
+          setIsCreateUpdatePageModalOpen(true);
+        } else if (keyPressed === "h") {
+          setIsShortcutsModalOpen(true);
+        } else if (keyPressed === "q") {
+          setIsCreateCycleModalOpen(true);
+        } else if (keyPressed === "m") {
+          setIsCreateModuleModalOpen(true);
+        }
+      }
+    },
+    [toggleCollapsed, copyIssueUrlToClipboard]
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+
+  useEffect(
+    () => {
+      if (!workspaceSlug || !projectId) return;
+
+      setIsLoading(true);
+      // this is done prevent subsequent api request
+      // or searchTerm has not been updated within last 500ms.
+      if (debouncedSearchTerm) {
+        setIsSearching(true);
+        workspaceService
+          .searchWorkspace(workspaceSlug as string, projectId as string, debouncedSearchTerm)
+          .then((results) => {
+            setResults(results);
+            const count = Object.keys(results.results).reduce(
+              (accumulator, key) => (results.results as any)[key].length + accumulator,
+              0
+            );
+            setResultsCount(count);
+          })
+          .finally(() => {
+            setIsLoading(false);
+            setIsSearching(false);
+          });
+      } else {
+        setResults({
+          results: {
+            workspace: [],
+            project: [],
+            issue: [],
+            cycle: [],
+            module: [],
+            issue_view: [],
+            page: [],
+          },
+        });
+        setIsLoading(false);
+        setIsSearching(false);
+      }
+    },
+    [debouncedSearchTerm, workspaceSlug, projectId] // Only call effect if debounced search term changes
+  );
+
+  if (!user) return null;
+
+  const createNewWorkspace = () => {
+    setIsPaletteOpen(false);
+    router.push("/create-workspace");
+  };
+
+  const createNewProject = () => {
+    setIsPaletteOpen(false);
+    setIsProjectModalOpen(true);
+  };
+
+  const createNewIssue = () => {
+    setIsPaletteOpen(false);
+    setIsIssueModalOpen(true);
+  };
+
+  const createNewCycle = () => {
+    setIsPaletteOpen(false);
+    setIsCreateCycleModalOpen(true);
+  };
+
+  const createNewView = () => {
+    setIsPaletteOpen(false);
+    setIsCreateViewModalOpen(true);
+  };
+
+  const createNewPage = () => {
+    setIsPaletteOpen(false);
+    setIsCreateUpdatePageModalOpen(true);
+  };
+
+  const createNewModule = () => {
+    setIsPaletteOpen(false);
+    setIsCreateModuleModalOpen(true);
+  };
+
+  const deleteIssue = () => {
+    setIsPaletteOpen(false);
+    setDeleteIssueModal(true);
+  };
+
+  const goToSettings = (path: string = "") => {
+    setIsPaletteOpen(false);
+    router.push(`/${workspaceSlug}/settings/${path}`);
+  };
+
+  return (
+    <>
+      <ShortcutsModal isOpen={isShortcutsModalOpen} setIsOpen={setIsShortcutsModalOpen} />
+      {workspaceSlug && (
+        <CreateProjectModal isOpen={isProjectModalOpen} setIsOpen={setIsProjectModalOpen} />
+      )}
+      {projectId && (
+        <>
+          <CreateUpdateCycleModal
+            isOpen={isCreateCycleModalOpen}
+            handleClose={() => setIsCreateCycleModalOpen(false)}
+          />
+          <CreateUpdateModuleModal
+            isOpen={isCreateModuleModalOpen}
+            setIsOpen={setIsCreateModuleModalOpen}
+          />
+          <CreateUpdateViewModal
+            handleClose={() => setIsCreateViewModalOpen(false)}
+            isOpen={isCreateViewModalOpen}
+          />
+          <CreateUpdatePageModal
+            isOpen={isCreateUpdatePageModalOpen}
+            handleClose={() => setIsCreateUpdatePageModalOpen(false)}
+          />
+        </>
+      )}
+      {issueId && issueDetails && (
+        <DeleteIssueModal
+          handleClose={() => setDeleteIssueModal(false)}
+          isOpen={deleteIssueModal}
+          data={issueDetails}
+        />
+      )}
+
+      <CreateUpdateIssueModal
+        isOpen={isIssueModalOpen}
+        handleClose={() => setIsIssueModalOpen(false)}
+      />
+      <BulkDeleteIssuesModal
+        isOpen={isBulkDeleteIssuesModalOpen}
+        setIsOpen={setIsBulkDeleteIssuesModalOpen}
+      />
+      <Transition.Root
+        show={isPaletteOpen}
+        afterLeave={() => {
+          setSearchTerm("");
+        }}
+        as={React.Fragment}
+      >
+        <Dialog as="div" className="relative z-30" onClose={() => setIsPaletteOpen(false)}>
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-brand-base divide-opacity-10 rounded-xl bg-brand-surface-2 border-brand-base border shadow-2xl transition-all">
+                <Command
+                  filter={(value, search) => {
+                    if (value.toLowerCase().includes(search.toLowerCase())) return 1;
+                    return 0;
+                  }}
+                  onKeyDown={(e) => {
+                    // when seach is empty and page is undefined
+                    // when user tries to close the modal with esc
+                    if (e.key === "Escape" && !page && !searchTerm) {
+                      setIsPaletteOpen(false);
+                    }
+                    // Escape goes to previous page
+                    // Backspace goes to previous page when search is empty
+                    if (e.key === "Escape" || (e.key === "Backspace" && !searchTerm)) {
+                      e.preventDefault();
+                      setPages((pages) => pages.slice(0, -1));
+                      setPlaceholder("Type a command or search...");
+                    }
+                  }}
+                >
+                  {issueId && issueDetails && (
+                    <div className="flex p-3">
+                      <p className="overflow-hidden truncate rounded-md bg-brand-surface-1 p-1 px-2 text-xs font-medium text-brand-secondary">
+                        {issueDetails.project_detail?.identifier}-{issueDetails.sequence_id}{" "}
+                        {issueDetails?.name}
+                      </p>
+                    </div>
+                  )}
+                  <div className="relative">
+                    <MagnifyingGlassIcon
+                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-secondary"
+                      aria-hidden="true"
+                    />
+                    <Command.Input
+                      className="w-full border-0 border-b border-brand-base bg-transparent p-4 pl-11 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                      placeholder={placeholder}
+                      value={searchTerm}
+                      onValueChange={(e) => {
+                        setSearchTerm(e);
+                      }}
+                      autoFocus
+                    />
+                  </div>
+                  <Command.List className="max-h-96 overflow-scroll p-2">
+                    {!isLoading &&
+                      resultsCount === 0 &&
+                      searchTerm !== "" &&
+                      debouncedSearchTerm !== "" && (
+                        <div className="my-4 text-center text-brand-secondary">
+                          No results found.
+                        </div>
+                      )}
+
+                    {(isLoading || isSearching) && (
+                      <Command.Loading>
+                        <div className="flex h-full w-full items-center justify-center py-8">
+                          <Spinner />
+                        </div>
+                      </Command.Loading>
+                    )}
+
+                    {debouncedSearchTerm !== "" && (
+                      <>
+                        {Object.keys(results.results).map((key) => {
+                          const section = (results.results as any)[key];
+                          if (section.length > 0) {
+                            return (
+                              <Command.Group
+                                heading={capitalizeFirstLetter(replaceUnderscoreIfSnakeCase(key))}
+                                key={key}
+                              >
+                                {section.map((item: any) => {
+                                  let path = "";
+                                  let value = item.name;
+                                  let Icon: any = ArrowRightIcon;
+
+                                  if (key === "workspace") {
+                                    path = `/${item.slug}`;
+                                    Icon = FolderPlusIcon;
+                                  } else if (key == "project") {
+                                    path = `/${item.workspace__slug}/projects/${item.id}/issues`;
+                                    Icon = AssignmentClipboardIcon;
+                                  } else if (key === "issue") {
+                                    path = `/${item.workspace__slug}/projects/${item.project_id}/issues/${item.id}`;
+                                    // user can search id-num idnum or issue name
+                                    value = `${item.project__identifier}-${item.sequence_id} ${item.project__identifier}${item.sequence_id} ${item.name}`;
+                                    Icon = LayerDiagonalIcon;
+                                  } else if (key === "issue_view") {
+                                    path = `/${item.workspace__slug}/projects/${item.project_id}/views/${item.id}`;
+                                    Icon = ViewListIcon;
+                                  } else if (key === "module") {
+                                    path = `/${item.workspace__slug}/projects/${item.project_id}/modules/${item.id}`;
+                                    Icon = PeopleGroupIcon;
+                                  } else if (key === "page") {
+                                    path = `/${item.workspace__slug}/projects/${item.project_id}/pages/${item.id}`;
+                                    Icon = DocumentTextIcon;
+                                  } else if (key === "cycle") {
+                                    path = `/${item.workspace__slug}/projects/${item.project_id}/cycles/${item.id}`;
+                                    Icon = ContrastIcon;
+                                  }
+
+                                  return (
+                                    <Command.Item
+                                      key={item.id}
+                                      onSelect={() => {
+                                        router.push(path);
+                                        setIsPaletteOpen(false);
+                                      }}
+                                      value={value}
+                                      className="focus:outline-none"
+                                    >
+                                      <div className="flex items-center gap-2 overflow-hidden text-brand-secondary">
+                                        <Icon
+                                          className="h-4 w-4 text-brand-secondary"
+                                          color="#6b7280"
+                                        />
+                                        <p className="block flex-1 truncate">{item.name}</p>
+                                      </div>
+                                    </Command.Item>
+                                  );
+                                })}
+                              </Command.Group>
+                            );
+                          }
+                        })}
+                      </>
+                    )}
+
+                    {!page && (
+                      <>
+                        {issueId && (
+                          <>
+                            <Command.Item
+                              onSelect={() => {
+                                setPlaceholder("Change state...");
+                                setSearchTerm("");
+                                setPages([...pages, "change-issue-state"]);
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-brand-secondary">
+                                <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
+                                Change state...
+                              </div>
+                            </Command.Item>
+                            <Command.Item
+                              onSelect={() => {
+                                setPlaceholder("Change priority...");
+                                setSearchTerm("");
+                                setPages([...pages, "change-issue-priority"]);
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-brand-secondary">
+                                <ChartBarIcon className="h-4 w-4 text-brand-secondary" />
+                                Change priority...
+                              </div>
+                            </Command.Item>
+                            <Command.Item
+                              onSelect={() => {
+                                setPlaceholder("Assign to...");
+                                setSearchTerm("");
+                                setPages([...pages, "change-issue-assignee"]);
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-brand-secondary">
+                                <UsersIcon className="h-4 w-4 text-brand-secondary" />
+                                Assign to...
+                              </div>
+                            </Command.Item>
+                            <Command.Item
+                              onSelect={() => {
+                                handleIssueAssignees(user.id);
+                                setSearchTerm("");
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-brand-secondary">
+                                {issueDetails?.assignees.includes(user.id) ? (
+                                  <>
+                                    <UserMinusIcon className="h-4 w-4 text-brand-secondary" />
+                                    Un-assign from me
+                                  </>
+                                ) : (
+                                  <>
+                                    <UserPlusIcon className="h-4 w-4 text-brand-secondary" />
+                                    Assign to me
+                                  </>
+                                )}
+                              </div>
+                            </Command.Item>
+
+                            <Command.Item onSelect={deleteIssue} className="focus:outline-none">
+                              <div className="flex items-center gap-2 text-brand-secondary">
+                                <TrashIcon className="h-4 w-4 text-brand-secondary" />
+                                Delete issue
+                              </div>
+                            </Command.Item>
+                            <Command.Item
+                              onSelect={() => {
+                                setIsPaletteOpen(false);
+                                copyIssueUrlToClipboard();
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-brand-secondary">
+                                <LinkIcon className="h-4 w-4 text-brand-secondary" />
+                                Copy issue URL to clipboard
+                              </div>
+                            </Command.Item>
+                          </>
+                        )}
+                        <Command.Group heading="Issue">
+                          <Command.Item
+                            onSelect={createNewIssue}
+                            className="focus:bg-brand-surface-2"
+                          >
+                            <div className="flex items-center gap-2 text-brand-secondary">
+                              <LayerDiagonalIcon className="h-4 w-4" color="#6b7280" />
+                              Create new issue
+                            </div>
+                            <kbd>C</kbd>
+                          </Command.Item>
+                        </Command.Group>
+
+                        {workspaceSlug && (
+                          <Command.Group heading="Project">
+                            <Command.Item
+                              onSelect={createNewProject}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-brand-secondary">
+                                <AssignmentClipboardIcon className="h-4 w-4" color="#6b7280" />
+                                Create new project
+                              </div>
+                              <kbd>P</kbd>
+                            </Command.Item>
+                          </Command.Group>
+                        )}
+
+                        {projectId && (
+                          <>
+                            <Command.Group heading="Cycle">
+                              <Command.Item
+                                onSelect={createNewCycle}
+                                className="focus:outline-none"
+                              >
+                                <div className="flex items-center gap-2 text-brand-secondary">
+                                  <ContrastIcon className="h-4 w-4" color="#6b7280" />
+                                  Create new cycle
+                                </div>
+                                <kbd>Q</kbd>
+                              </Command.Item>
+                            </Command.Group>
+
+                            <Command.Group heading="Module">
+                              <Command.Item
+                                onSelect={createNewModule}
+                                className="focus:outline-none"
+                              >
+                                <div className="flex items-center gap-2 text-brand-secondary">
+                                  <PeopleGroupIcon className="h-4 w-4" color="#6b7280" />
+                                  Create new module
+                                </div>
+                                <kbd>M</kbd>
+                              </Command.Item>
+                            </Command.Group>
+
+                            <Command.Group heading="View">
+                              <Command.Item onSelect={createNewView} className="focus:outline-none">
+                                <div className="flex items-center gap-2 text-brand-secondary">
+                                  <ViewListIcon className="h-4 w-4" color="#6b7280" />
+                                  Create new view
+                                </div>
+                                <kbd>V</kbd>
+                              </Command.Item>
+                            </Command.Group>
+
+                            <Command.Group heading="Page">
+                              <Command.Item onSelect={createNewPage} className="focus:outline-none">
+                                <div className="flex items-center gap-2 text-gray-700">
+                                  <DocumentTextIcon className="h-4 w-4" color="#6b7280" />
+                                  Create new page
+                                </div>
+                                <kbd>D</kbd>
+                              </Command.Item>
+                            </Command.Group>
+                          </>
+                        )}
+
+                        <Command.Group heading="Workspace Settings">
+                          <Command.Item
+                            onSelect={() => {
+                              setPlaceholder("Search workspace settings...");
+                              setSearchTerm("");
+                              setPages([...pages, "settings"]);
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-brand-secondary">
+                              <SettingIcon className="h-4 w-4" color="#6b7280" />
+                              Search settings...
+                            </div>
+                          </Command.Item>
+                        </Command.Group>
+                        <Command.Group heading="Account">
+                          <Command.Item
+                            onSelect={createNewWorkspace}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-brand-secondary">
+                              <FolderPlusIcon className="h-4 w-4 text-brand-secondary" />
+                              Create new workspace
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              setPlaceholder("Change interface theme...");
+                              setSearchTerm("");
+                              setPages([...pages, "change-interface-theme"]);
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-brand-secondary">
+                              <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                              Change interface theme...
+                            </div>
+                          </Command.Item>
+                        </Command.Group>
+                        <Command.Group heading="Help">
+                          <Command.Item
+                            onSelect={() => {
+                              setIsPaletteOpen(false);
+                              const e = new KeyboardEvent("keydown", {
+                                key: "h",
+                              });
+                              document.dispatchEvent(e);
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-brand-secondary">
+                              <RocketLaunchIcon className="h-4 w-4 text-brand-secondary" />
+                              Open keyboard shortcuts
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              setIsPaletteOpen(false);
+                              window.open("https://docs.plane.so/", "_blank");
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-brand-secondary">
+                              <DocumentIcon className="h-4 w-4 text-brand-secondary" />
+                              Open Plane documentation
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              setIsPaletteOpen(false);
+                              window.open("https://discord.com/invite/A92xrEGCge", "_blank");
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-brand-secondary">
+                              <DiscordIcon className="h-4 w-4" color="#6b7280" />
+                              Join our Discord
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              setIsPaletteOpen(false);
+                              window.open(
+                                "https://github.com/makeplane/plane/issues/new/choose",
+                                "_blank"
+                              );
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-brand-secondary">
+                              <GithubIcon className="h-4 w-4" color="#6b7280" />
+                              Report a bug
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              setIsPaletteOpen(false);
+                              (window as any).$crisp.push(["do", "chat:open"]);
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-brand-secondary">
+                              <ChatBubbleOvalLeftEllipsisIcon className="h-4 w-4 text-brand-secondary" />
+                              Chat with us
+                            </div>
+                          </Command.Item>
+                        </Command.Group>
+                      </>
+                    )}
+
+                    {page === "settings" && workspaceSlug && (
+                      <>
+                        <Command.Item
+                          onSelect={() => goToSettings()}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-brand-secondary">
+                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                            General
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => goToSettings("members")}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-brand-secondary">
+                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                            Members
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => goToSettings("billing")}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-brand-secondary">
+                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                            Billings and Plans
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => goToSettings("integrations")}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-brand-secondary">
+                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                            Integrations
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => goToSettings("import-export")}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-brand-secondary">
+                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                            Import/Export
+                          </div>
+                        </Command.Item>
+                      </>
+                    )}
+                    {page === "change-issue-state" && issueDetails && (
+                      <>
+                        <ChangeIssueState
+                          issue={issueDetails}
+                          setIsPaletteOpen={setIsPaletteOpen}
+                        />
+                      </>
+                    )}
+                    {page === "change-issue-priority" && issueDetails && (
+                      <ChangeIssuePriority
+                        issue={issueDetails}
+                        setIsPaletteOpen={setIsPaletteOpen}
+                      />
+                    )}
+                    {page === "change-issue-assignee" && issueDetails && (
+                      <ChangeIssueAssignee
+                        issue={issueDetails}
+                        setIsPaletteOpen={setIsPaletteOpen}
+                      />
+                    )}
+                    {page === "change-interface-theme" && (
+                      <ChangeInterfaceTheme setIsPaletteOpen={setIsPaletteOpen} />
+                    )}
+                  </Command.List>
+                </Command>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+};
diff --git a/app/components/command-palette/index.ts b/app/components/command-palette/index.ts
new file mode 100644
index 000000000..858aba401
--- /dev/null
+++ b/app/components/command-palette/index.ts
@@ -0,0 +1,6 @@
+export * from "./command-pallette";
+export * from "./shortcuts-modal";
+export * from "./change-issue-state";
+export * from "./change-issue-priority";
+export * from "./change-issue-assignee";
+export * from "./change-interface-theme";
diff --git a/app/components/command-palette/shortcuts-modal.tsx b/app/components/command-palette/shortcuts-modal.tsx
new file mode 100644
index 000000000..af7f19b0a
--- /dev/null
+++ b/app/components/command-palette/shortcuts-modal.tsx
@@ -0,0 +1,198 @@
+import React, { useEffect, useState } from "react";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// icons
+import { XMarkIcon } from "@heroicons/react/20/solid";
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { MacCommandIcon } from "components/icons";
+// ui
+import { Input } from "components/ui";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const shortcuts = [
+  {
+    title: "Navigation",
+    shortcuts: [
+      { keys: "Ctrl,K", description: "To open navigator" },
+      { keys: "↑", description: "Move up" },
+      { keys: "↓", description: "Move down" },
+      { keys: "←", description: "Move left" },
+      { keys: "→", description: "Move right" },
+      { keys: "Enter", description: "Select" },
+      { keys: "Esc", description: "Close" },
+    ],
+  },
+  {
+    title: "Common",
+    shortcuts: [
+      { keys: "P", description: "To create project" },
+      { keys: "C", description: "To create issue" },
+      { keys: "Q", description: "To create cycle" },
+      { keys: "M", description: "To create module" },
+      { keys: "V", description: "To create view" },
+      { keys: "D", description: "To create page" },
+      { keys: "Delete", description: "To bulk delete issues" },
+      { keys: "H", description: "To open shortcuts guide" },
+      {
+        keys: "Ctrl,Alt,C",
+        description: "To copy issue url when on issue detail page",
+      },
+    ],
+  },
+];
+
+const allShortcuts = shortcuts.map((i) => i.shortcuts).flat(1);
+
+export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
+  const [query, setQuery] = useState("");
+  const filteredShortcuts = allShortcuts.filter((shortcut) =>
+    shortcut.description.toLowerCase().includes(query.trim().toLowerCase()) || query === ""
+      ? true
+      : false
+  );
+
+  useEffect(() => {
+    if (!isOpen) setQuery("");
+  }, [isOpen]);
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={setIsOpen}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="bg-brand-surface-2 p-5">
+                  <div className="sm:flex sm:items-start">
+                    <div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
+                      <Dialog.Title
+                        as="h3"
+                        className="flex justify-between text-lg font-medium leading-6 text-brand-base"
+                      >
+                        <span>Keyboard Shortcuts</span>
+                        <span>
+                          <button type="button" onClick={() => setIsOpen(false)}>
+                            <XMarkIcon
+                              className="h-6 w-6 text-gray-400 hover:text-brand-secondary"
+                              aria-hidden="true"
+                            />
+                          </button>
+                        </span>
+                      </Dialog.Title>
+                      <div>
+                        <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-brand-base bg-brand-surface-1 px-3 py-2">
+                          <MagnifyingGlassIcon className="h-3.5 w-3.5 text-brand-secondary" />
+                          <Input
+                            className="w-full  border-none bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
+                            id="search"
+                            name="search"
+                            type="text"
+                            placeholder="Search for shortcuts"
+                            onChange={(e) => setQuery(e.target.value)}
+                          />
+                        </div>
+                      </div>
+                      <div className="flex w-full flex-col gap-y-3">
+                        {query.trim().length > 0 ? (
+                          filteredShortcuts.length > 0 ? (
+                            filteredShortcuts.map((shortcut) => (
+                              <div key={shortcut.keys} className="flex w-full flex-col">
+                                <div className="flex flex-col gap-y-3">
+                                  <div className="flex items-center justify-between">
+                                    <p className="text-sm text-brand-secondary">{shortcut.description}</p>
+                                    <div className="flex items-center gap-x-2.5">
+                                      {shortcut.keys.split(",").map((key, index) => (
+                                        <span key={index} className="flex items-center gap-1">
+                                          {key === "Ctrl" ? (
+                                            <span className="flex h-full items-center rounded-sm border border-brand-base bg-brand-surface-1 p-2">
+                                              <MacCommandIcon />
+                                            </span>
+                                          ) : (
+                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-gray-800">
+                                              {key === "Ctrl" ? <MacCommandIcon /> : key}
+                                            </kbd>
+                                          )}
+                                        </span>
+                                      ))}
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            ))
+                          ) : (
+                            <div className="flex flex-col gap-y-3">
+                              <p className="text-sm text-brand-secondary">
+                                No shortcuts found for{" "}
+                                <span className="font-semibold italic">
+                                  {`"`}
+                                  {query}
+                                  {`"`}
+                                </span>
+                              </p>
+                            </div>
+                          )
+                        ) : (
+                          shortcuts.map(({ title, shortcuts }) => (
+                            <div key={title} className="flex w-full flex-col">
+                              <p className="mb-4 font-medium">{title}</p>
+                              <div className="flex flex-col gap-y-3">
+                                {shortcuts.map(({ keys, description }, index) => (
+                                  <div key={index} className="flex items-center justify-between">
+                                    <p className="text-sm text-brand-secondary">{description}</p>
+                                    <div className="flex items-center gap-x-2.5">
+                                      {keys.split(",").map((key, index) => (
+                                        <span key={index} className="flex items-center gap-1">
+                                          {key === "Ctrl" ? (
+                                            <span className="flex h-full items-center rounded-sm border border-brand-base text-brand-secondary bg-brand-surface-1 p-2">
+                                              <MacCommandIcon />
+                                            </span>
+                                          ) : (
+                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-brand-secondary">
+                                              {key === "Ctrl" ? <MacCommandIcon /> : key}
+                                            </kbd>
+                                          )}
+                                        </span>
+                                      ))}
+                                    </div>
+                                  </div>
+                                ))}
+                              </div>
+                            </div>
+                          ))
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/core/board-view/all-boards.tsx b/app/components/core/board-view/all-boards.tsx
new file mode 100644
index 000000000..19d0e7636
--- /dev/null
+++ b/app/components/core/board-view/all-boards.tsx
@@ -0,0 +1,106 @@
+// hooks
+import useProjectIssuesView from "hooks/use-issues-view";
+// components
+import { SingleBoard } from "components/core/board-view/single-board";
+// helpers
+import { addSpaceIfCamelCase } from "helpers/string.helper";
+// types
+import { IIssue, IState, UserAuth } from "types";
+import { getStateGroupIcon } from "components/icons";
+
+type Props = {
+  type: "issue" | "cycle" | "module";
+  states: IState[] | undefined;
+  addIssueToState: (groupTitle: string) => void;
+  makeIssueCopy: (issue: IIssue) => void;
+  handleEditIssue: (issue: IIssue) => void;
+  openIssuesListModal?: (() => void) | null;
+  handleDeleteIssue: (issue: IIssue) => void;
+  handleTrashBox: (isDragging: boolean) => void;
+  removeIssue: ((bridgeId: string) => void) | null;
+  isCompleted?: boolean;
+  userAuth: UserAuth;
+};
+
+export const AllBoards: React.FC<Props> = ({
+  type,
+  states,
+  addIssueToState,
+  makeIssueCopy,
+  handleEditIssue,
+  openIssuesListModal,
+  handleDeleteIssue,
+  handleTrashBox,
+  removeIssue,
+  isCompleted = false,
+  userAuth,
+}) => {
+  const {
+    groupedByIssues,
+    groupByProperty: selectedGroup,
+    showEmptyGroups,
+  } = useProjectIssuesView();
+
+  return (
+    <>
+      {groupedByIssues ? (
+        <div className="horizontal-scroll-enable flex h-[calc(100vh-140px)] gap-x-4">
+          {Object.keys(groupedByIssues).map((singleGroup, index) => {
+            const currentState =
+              selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;
+
+            if (!showEmptyGroups && groupedByIssues[singleGroup].length === 0) return null;
+
+            return (
+              <SingleBoard
+                key={index}
+                type={type}
+                currentState={currentState}
+                groupTitle={singleGroup}
+                handleEditIssue={handleEditIssue}
+                makeIssueCopy={makeIssueCopy}
+                addIssueToState={() => addIssueToState(singleGroup)}
+                handleDeleteIssue={handleDeleteIssue}
+                openIssuesListModal={openIssuesListModal ?? null}
+                handleTrashBox={handleTrashBox}
+                removeIssue={removeIssue}
+                isCompleted={isCompleted}
+                userAuth={userAuth}
+              />
+            );
+          })}
+          {!showEmptyGroups && (
+            <div className="h-full w-96 flex-shrink-0 space-y-3 p-1">
+              <h2 className="text-lg font-semibold">Hidden groups</h2>
+              <div className="space-y-3">
+                {Object.keys(groupedByIssues).map((singleGroup, index) => {
+                  const currentState =
+                    selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;
+
+                  if (groupedByIssues[singleGroup].length === 0)
+                    return (
+                      <div
+                        key={index}
+                        className="flex items-center justify-between gap-2 rounded bg-brand-surface-1 p-2 shadow"
+                      >
+                        <div className="flex items-center gap-2">
+                          {currentState &&
+                            getStateGroupIcon(currentState.group, "16", "16", currentState.color)}
+                          <h4 className="text-sm capitalize">
+                            {selectedGroup === "state"
+                              ? addSpaceIfCamelCase(currentState?.name ?? "")
+                              : addSpaceIfCamelCase(singleGroup)}
+                          </h4>
+                        </div>
+                        <span className="text-xs text-brand-secondary">0</span>
+                      </div>
+                    );
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+      ) : null}
+    </>
+  );
+};
diff --git a/app/components/core/board-view/board-header.tsx b/app/components/core/board-view/board-header.tsx
new file mode 100644
index 000000000..6fa8f68f3
--- /dev/null
+++ b/app/components/core/board-view/board-header.tsx
@@ -0,0 +1,181 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import issuesService from "services/issues.service";
+import projectService from "services/project.service";
+// hooks
+import useIssuesView from "hooks/use-issues-view";
+// component
+import { Avatar } from "components/ui";
+// icons
+import { ArrowsPointingInIcon, ArrowsPointingOutIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { getPriorityIcon, getStateGroupIcon } from "components/icons";
+// helpers
+import { addSpaceIfCamelCase } from "helpers/string.helper";
+// types
+import { IIssueLabels, IState } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
+
+type Props = {
+  currentState?: IState | null;
+  groupTitle: string;
+  addIssueToState: () => void;
+  isCollapsed: boolean;
+  setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
+  isCompleted?: boolean;
+};
+
+export const BoardHeader: React.FC<Props> = ({
+  currentState,
+  groupTitle,
+  addIssueToState,
+  isCollapsed,
+  setIsCollapsed,
+  isCompleted = false,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { groupedByIssues, groupByProperty: selectedGroup } = useIssuesView();
+
+  const { data: issueLabels } = useSWR<IIssueLabels[]>(
+    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  let bgColor = "#000000";
+  if (selectedGroup === "state") bgColor = currentState?.color ?? "#000000";
+
+  if (selectedGroup === "priority")
+    groupTitle === "high"
+      ? (bgColor = "#dc2626")
+      : groupTitle === "medium"
+      ? (bgColor = "#f97316")
+      : groupTitle === "low"
+      ? (bgColor = "#22c55e")
+      : (bgColor = "#ff0000");
+
+  const getGroupTitle = () => {
+    let title = addSpaceIfCamelCase(groupTitle);
+
+    switch (selectedGroup) {
+      case "state":
+        title = addSpaceIfCamelCase(currentState?.name ?? "");
+        break;
+      case "labels":
+        title = issueLabels?.find((label) => label.id === groupTitle)?.name ?? "None";
+        break;
+      case "created_by":
+        const member = members?.find((member) => member.member.id === groupTitle)?.member;
+        title =
+          member?.first_name && member.first_name !== ""
+            ? `${member.first_name} ${member.last_name}`
+            : member?.email ?? "";
+        break;
+    }
+
+    return title;
+  };
+
+  const getGroupIcon = () => {
+    let icon;
+
+    switch (selectedGroup) {
+      case "state":
+        icon = currentState && getStateGroupIcon(currentState.group, "16", "16", bgColor);
+        break;
+      case "priority":
+        icon = getPriorityIcon(groupTitle, "text-lg");
+        break;
+      case "labels":
+        const labelColor =
+          issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
+        icon = (
+          <span
+            className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
+            style={{ backgroundColor: labelColor }}
+          />
+        );
+        break;
+      case "created_by":
+        const member = members?.find((member) => member.member.id === groupTitle)?.member;
+        icon = <Avatar user={member} height="24px" width="24px" fontSize="12px" />;
+
+        break;
+    }
+
+    return icon;
+  };
+
+  return (
+    <div
+      className={`flex items-center justify-between px-1 ${
+        !isCollapsed ? "flex-col rounded-md bg-brand-surface-1" : ""
+      }`}
+    >
+      <div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
+        <div
+          className={`flex cursor-pointer items-center gap-x-3 ${
+            !isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
+          }`}
+        >
+          <span className="flex items-center">{getGroupIcon()}</span>
+          <h2
+            className="text-lg font-semibold capitalize"
+            style={{
+              writingMode: !isCollapsed ? "vertical-rl" : "horizontal-tb",
+            }}
+          >
+            {getGroupTitle()}
+          </h2>
+          <span
+            className={`${
+              isCollapsed ? "ml-0.5" : ""
+            } min-w-[2.5rem] rounded-full bg-brand-surface-2 py-1 text-center text-xs`}
+          >
+            {groupedByIssues?.[groupTitle].length ?? 0}
+          </span>
+        </div>
+      </div>
+
+      <div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}>
+        <button
+          type="button"
+          className="grid h-7 w-7 place-items-center rounded p-1 text-brand-secondary outline-none duration-300 hover:bg-brand-surface-2"
+          onClick={() => {
+            setIsCollapsed((prevData) => !prevData);
+          }}
+        >
+          {isCollapsed ? (
+            <ArrowsPointingInIcon className="h-4 w-4" />
+          ) : (
+            <ArrowsPointingOutIcon className="h-4 w-4" />
+          )}
+        </button>
+        {!isCompleted && (
+          <button
+            type="button"
+            className="grid h-7 w-7 place-items-center rounded p-1 text-brand-secondary outline-none duration-300 hover:bg-brand-surface-2"
+            onClick={addIssueToState}
+          >
+            <PlusIcon className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/core/board-view/index.ts b/app/components/core/board-view/index.ts
new file mode 100644
index 000000000..6e5cdf8bf
--- /dev/null
+++ b/app/components/core/board-view/index.ts
@@ -0,0 +1,4 @@
+export * from "./all-boards";
+export * from "./board-header";
+export * from "./single-board";
+export * from "./single-issue";
diff --git a/app/components/core/board-view/single-board.tsx b/app/components/core/board-view/single-board.tsx
new file mode 100644
index 000000000..0c13d8bcf
--- /dev/null
+++ b/app/components/core/board-view/single-board.tsx
@@ -0,0 +1,190 @@
+import { useState, useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+// react-beautiful-dnd
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { Draggable } from "react-beautiful-dnd";
+// hooks
+import useIssuesView from "hooks/use-issues-view";
+import useIssuesProperties from "hooks/use-issue-properties";
+// components
+import { BoardHeader, SingleBoardIssue } from "components/core";
+// ui
+import { CustomMenu } from "components/ui";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// helpers
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+// types
+import { IIssue, IState, UserAuth } from "types";
+
+type Props = {
+  type?: "issue" | "cycle" | "module";
+  currentState?: IState | null;
+  groupTitle: string;
+  handleEditIssue: (issue: IIssue) => void;
+  makeIssueCopy: (issue: IIssue) => void;
+  addIssueToState: () => void;
+  handleDeleteIssue: (issue: IIssue) => void;
+  openIssuesListModal?: (() => void) | null;
+  handleTrashBox: (isDragging: boolean) => void;
+  removeIssue: ((bridgeId: string) => void) | null;
+  isCompleted?: boolean;
+  userAuth: UserAuth;
+};
+
+export const SingleBoard: React.FC<Props> = ({
+  type,
+  currentState,
+  groupTitle,
+  handleEditIssue,
+  makeIssueCopy,
+  addIssueToState,
+  handleDeleteIssue,
+  openIssuesListModal,
+  handleTrashBox,
+  removeIssue,
+  isCompleted = false,
+  userAuth,
+}) => {
+  // collapse/expand
+  const [isCollapsed, setIsCollapsed] = useState(true);
+
+  const { groupedByIssues, groupByProperty: selectedGroup, orderBy } = useIssuesView();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || isCompleted;
+
+  useEffect(() => {
+    if (currentState?.group === "completed" || currentState?.group === "cancelled")
+      setIsCollapsed(false);
+  }, [currentState]);
+
+  return (
+    <div className={`h-full flex-shrink-0 ${!isCollapsed ? "" : "w-96"}`}>
+      <div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3"}`}>
+        <BoardHeader
+          addIssueToState={addIssueToState}
+          currentState={currentState}
+          groupTitle={groupTitle}
+          isCollapsed={isCollapsed}
+          setIsCollapsed={setIsCollapsed}
+          isCompleted={isCompleted}
+        />
+        {isCollapsed && (
+          <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
+            {(provided, snapshot) => (
+              <div
+                className={`relative h-full overflow-y-auto p-1  ${
+                  snapshot.isDraggingOver ? "bg-brand-base/20" : ""
+                } ${!isCollapsed ? "hidden" : "block"}`}
+                ref={provided.innerRef}
+                {...provided.droppableProps}
+              >
+                {orderBy !== "sort_order" && (
+                  <>
+                    <div
+                      className={`absolute ${
+                        snapshot.isDraggingOver ? "block" : "hidden"
+                      } pointer-events-none top-0 left-0 z-[99] h-full w-full bg-brand-surface-1 opacity-50`}
+                    />
+                    <div
+                      className={`absolute ${
+                        snapshot.isDraggingOver ? "block" : "hidden"
+                      } pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-brand-base p-2 text-xs`}
+                    >
+                      This board is ordered by{" "}
+                      {replaceUnderscoreIfSnakeCase(
+                        orderBy ? (orderBy[0] === "-" ? orderBy.slice(1) : orderBy) : "created_at"
+                      )}
+                    </div>
+                  </>
+                )}
+                {groupedByIssues?.[groupTitle].map((issue, index) => (
+                  <Draggable
+                    key={issue.id}
+                    draggableId={issue.id}
+                    index={index}
+                    isDragDisabled={
+                      isNotAllowed || selectedGroup === "created_by" || selectedGroup === "labels"
+                    }
+                  >
+                    {(provided, snapshot) => (
+                      <SingleBoardIssue
+                        key={index}
+                        provided={provided}
+                        snapshot={snapshot}
+                        type={type}
+                        index={index}
+                        selectedGroup={selectedGroup}
+                        issue={issue}
+                        groupTitle={groupTitle}
+                        properties={properties}
+                        editIssue={() => handleEditIssue(issue)}
+                        makeIssueCopy={() => makeIssueCopy(issue)}
+                        handleDeleteIssue={handleDeleteIssue}
+                        handleTrashBox={handleTrashBox}
+                        removeIssue={() => {
+                          if (removeIssue && issue.bridge_id) removeIssue(issue.bridge_id);
+                        }}
+                        isCompleted={isCompleted}
+                        userAuth={userAuth}
+                      />
+                    )}
+                  </Draggable>
+                ))}
+                <span
+                  style={{
+                    display: orderBy === "sort_order" ? "inline" : "none",
+                  }}
+                >
+                  {provided.placeholder}
+                </span>
+                {type === "issue" ? (
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 font-medium text-brand-accent outline-none"
+                    onClick={addIssueToState}
+                  >
+                    <PlusIcon className="h-4 w-4" />
+                    Add Issue
+                  </button>
+                ) : (
+                  !isCompleted && (
+                    <CustomMenu
+                      customButton={
+                        <button
+                          type="button"
+                          className="flex items-center gap-2 font-medium text-brand-accent outline-none"
+                        >
+                          <PlusIcon className="h-4 w-4" />
+                          Add Issue
+                        </button>
+                      }
+                      optionsPosition="left"
+                      noBorder
+                    >
+                      <CustomMenu.MenuItem onClick={addIssueToState}>
+                        Create new
+                      </CustomMenu.MenuItem>
+                      {openIssuesListModal && (
+                        <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                          Add an existing issue
+                        </CustomMenu.MenuItem>
+                      )}
+                    </CustomMenu>
+                  )
+                )}
+              </div>
+            )}
+          </StrictModeDroppable>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/core/board-view/single-issue.tsx b/app/components/core/board-view/single-issue.tsx
new file mode 100644
index 000000000..b36008c77
--- /dev/null
+++ b/app/components/core/board-view/single-issue.tsx
@@ -0,0 +1,416 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-beautiful-dnd
+import {
+  DraggableProvided,
+  DraggableStateSnapshot,
+  DraggingStyle,
+  NotDraggingStyle,
+} from "react-beautiful-dnd";
+// services
+import issuesService from "services/issues.service";
+// hooks
+import useIssuesView from "hooks/use-issues-view";
+import useToast from "hooks/use-toast";
+// components
+import {
+  ViewAssigneeSelect,
+  ViewDueDateSelect,
+  ViewEstimateSelect,
+  ViewPrioritySelect,
+  ViewStateSelect,
+} from "components/issues";
+// ui
+import { ContextMenu, CustomMenu, Tooltip } from "components/ui";
+// icons
+import {
+  ClipboardDocumentCheckIcon,
+  LinkIcon,
+  PencilIcon,
+  TrashIcon,
+  XMarkIcon,
+  ArrowTopRightOnSquareIcon,
+  PaperClipIcon,
+} from "@heroicons/react/24/outline";
+// helpers
+import { handleIssuesMutation } from "constants/issue";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+// types
+import { IIssue, Properties, TIssueGroupByOptions, UserAuth } from "types";
+// fetch-keys
+import {
+  CYCLE_DETAILS,
+  CYCLE_ISSUES_WITH_PARAMS,
+  MODULE_DETAILS,
+  MODULE_ISSUES_WITH_PARAMS,
+  PROJECT_ISSUES_LIST_WITH_PARAMS,
+} from "constants/fetch-keys";
+
+type Props = {
+  type?: string;
+  provided: DraggableProvided;
+  snapshot: DraggableStateSnapshot;
+  issue: IIssue;
+  properties: Properties;
+  groupTitle?: string;
+  index: number;
+  selectedGroup: TIssueGroupByOptions;
+  editIssue: () => void;
+  makeIssueCopy: () => void;
+  removeIssue?: (() => void) | null;
+  handleDeleteIssue: (issue: IIssue) => void;
+  handleTrashBox: (isDragging: boolean) => void;
+  isCompleted?: boolean;
+  userAuth: UserAuth;
+};
+
+export const SingleBoardIssue: React.FC<Props> = ({
+  type,
+  provided,
+  snapshot,
+  issue,
+  properties,
+  index,
+  selectedGroup,
+  editIssue,
+  makeIssueCopy,
+  removeIssue,
+  groupTitle,
+  handleDeleteIssue,
+  handleTrashBox,
+  isCompleted = false,
+  userAuth,
+}) => {
+  // context menu
+  const [contextMenu, setContextMenu] = useState(false);
+  const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
+
+  const { orderBy, params } = useIssuesView();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const partialUpdateIssue = useCallback(
+    (formData: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      if (cycleId)
+        mutate<
+          | {
+              [key: string]: IIssue[];
+            }
+          | IIssue[]
+        >(
+          CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params),
+          (prevData) =>
+            handleIssuesMutation(
+              formData,
+              groupTitle ?? "",
+              selectedGroup,
+              index,
+              orderBy,
+              prevData
+            ),
+          false
+        );
+      else if (moduleId)
+        mutate<
+          | {
+              [key: string]: IIssue[];
+            }
+          | IIssue[]
+        >(
+          MODULE_ISSUES_WITH_PARAMS(moduleId as string),
+          (prevData) =>
+            handleIssuesMutation(
+              formData,
+              groupTitle ?? "",
+              selectedGroup,
+              index,
+              orderBy,
+              prevData
+            ),
+          false
+        );
+      else {
+        mutate<
+          | {
+              [key: string]: IIssue[];
+            }
+          | IIssue[]
+        >(
+          PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params),
+          (prevData) => {
+            if (!prevData) return prevData;
+
+            return handleIssuesMutation(
+              formData,
+              groupTitle ?? "",
+              selectedGroup,
+              index,
+              orderBy,
+              prevData
+            );
+          },
+          false
+        );
+      }
+
+      issuesService
+        .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
+        .then(() => {
+          if (cycleId) {
+            mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
+            mutate(CYCLE_DETAILS(cycleId as string));
+          } else if (moduleId) {
+            mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+            mutate(MODULE_DETAILS(moduleId as string));
+          } else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    [
+      workspaceSlug,
+      projectId,
+      cycleId,
+      moduleId,
+      issue,
+      groupTitle,
+      index,
+      selectedGroup,
+      orderBy,
+      params,
+    ]
+  );
+
+  const getStyle = (
+    style: DraggingStyle | NotDraggingStyle | undefined,
+    snapshot: DraggableStateSnapshot
+  ) => {
+    if (orderBy === "sort_order") return style;
+    if (!snapshot.isDragging) return {};
+    if (!snapshot.isDropAnimating) return style;
+
+    return {
+      ...style,
+      transitionDuration: `0.001s`,
+    };
+  };
+
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
+    });
+  };
+
+  useEffect(() => {
+    if (snapshot.isDragging) handleTrashBox(snapshot.isDragging);
+  }, [snapshot, handleTrashBox]);
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || isCompleted;
+
+  return (
+    <>
+      <ContextMenu
+        position={contextMenuPosition}
+        title="Quick actions"
+        isOpen={contextMenu}
+        setIsOpen={setContextMenu}
+      >
+        {!isNotAllowed && (
+          <>
+            <ContextMenu.Item Icon={PencilIcon} onClick={editIssue}>
+              Edit issue
+            </ContextMenu.Item>
+            <ContextMenu.Item Icon={ClipboardDocumentCheckIcon} onClick={makeIssueCopy}>
+              Make a copy...
+            </ContextMenu.Item>
+            <ContextMenu.Item Icon={TrashIcon} onClick={() => handleDeleteIssue(issue)}>
+              Delete issue
+            </ContextMenu.Item>
+          </>
+        )}
+        <ContextMenu.Item Icon={LinkIcon} onClick={handleCopyText}>
+          Copy issue link
+        </ContextMenu.Item>
+        <a
+          href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <ContextMenu.Item Icon={ArrowTopRightOnSquareIcon}>
+            Open issue in new tab
+          </ContextMenu.Item>
+        </a>
+      </ContextMenu>
+      <div
+        className={`mb-3 rounded bg-brand-base shadow ${
+          snapshot.isDragging ? "border-2 border-brand-accent shadow-lg" : ""
+        }`}
+        ref={provided.innerRef}
+        {...provided.draggableProps}
+        {...provided.dragHandleProps}
+        style={getStyle(provided.draggableProps.style, snapshot)}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          setContextMenu(true);
+          setContextMenuPosition({ x: e.pageX, y: e.pageY });
+        }}
+      >
+        <div className="group/card relative select-none p-3.5">
+          {!isNotAllowed && (
+            <div className="z-1 absolute top-1.5 right-1.5 opacity-0 group-hover/card:opacity-100">
+              {type && !isNotAllowed && (
+                <CustomMenu width="auto" ellipsis>
+                  <CustomMenu.MenuItem onClick={editIssue}>
+                    <div className="flex items-center justify-start gap-2">
+                      <PencilIcon className="h-4 w-4" />
+                      <span>Edit issue</span>
+                    </div>
+                  </CustomMenu.MenuItem>
+                  {type !== "issue" && removeIssue && (
+                    <CustomMenu.MenuItem onClick={removeIssue}>
+                      <div className="flex items-center justify-start gap-2">
+                        <XMarkIcon className="h-4 w-4" />
+                        <span>Remove from {type}</span>
+                      </div>
+                    </CustomMenu.MenuItem>
+                  )}
+                  <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
+                    <div className="flex items-center justify-start gap-2">
+                      <TrashIcon className="h-4 w-4" />
+                      <span>Delete issue</span>
+                    </div>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleCopyText}>
+                    <div className="flex items-center justify-start gap-2">
+                      <LinkIcon className="h-4 w-4" />
+                      <span>Copy issue Link</span>
+                    </div>
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+              )}
+            </div>
+          )}
+          <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
+            <a>
+              {properties.key && (
+                <div className="mb-2.5 text-xs font-medium text-brand-secondary">
+                  {issue.project_detail.identifier}-{issue.sequence_id}
+                </div>
+              )}
+              <h5
+                className="break-all text-sm group-hover:text-brand-accent"
+                style={{ lineClamp: 3, WebkitLineClamp: 3 }}
+              >
+                {truncateText(issue.name, 100)}
+              </h5>
+            </a>
+          </Link>
+          <div className="relative mt-2.5 flex flex-wrap items-center gap-2 text-xs">
+            {properties.priority && (
+              <ViewPrioritySelect
+                issue={issue}
+                partialUpdateIssue={partialUpdateIssue}
+                isNotAllowed={isNotAllowed}
+                selfPositioned
+              />
+            )}
+            {properties.state && (
+              <ViewStateSelect
+                issue={issue}
+                partialUpdateIssue={partialUpdateIssue}
+                isNotAllowed={isNotAllowed}
+                selfPositioned
+              />
+            )}
+            {properties.due_date && (
+              <ViewDueDateSelect
+                issue={issue}
+                partialUpdateIssue={partialUpdateIssue}
+                isNotAllowed={isNotAllowed}
+              />
+            )}
+            {properties.sub_issue_count && (
+              <div className="flex flex-shrink-0 items-center gap-1 rounded-md border border-brand-base px-3 py-1.5 text-xs shadow-sm">
+                {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
+              </div>
+            )}
+            {properties.labels && issue.label_details.length > 0 && (
+              <div className="flex flex-wrap gap-1">
+                {issue.label_details.map((label) => (
+                  <div
+                    key={label.id}
+                    className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary"
+                  >
+                    <span
+                      className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                      style={{
+                        backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
+                      }}
+                    />
+                    {label.name}
+                  </div>
+                ))}
+              </div>
+            )}
+            {properties.assignee && (
+              <ViewAssigneeSelect
+                issue={issue}
+                partialUpdateIssue={partialUpdateIssue}
+                isNotAllowed={isNotAllowed}
+                tooltipPosition="left"
+                selfPositioned
+              />
+            )}
+            {properties.estimate && (
+              <ViewEstimateSelect
+                issue={issue}
+                partialUpdateIssue={partialUpdateIssue}
+                isNotAllowed={isNotAllowed}
+                selfPositioned
+              />
+            )}
+            {properties.link && (
+              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+                <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
+                  <div className="flex items-center gap-1 text-gray-500">
+                    <LinkIcon className="h-3.5 w-3.5 text-gray-500" />
+                    {issue.link_count}
+                  </div>
+                </Tooltip>
+              </div>
+            )}
+            {properties.attachment_count && (
+              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+                <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
+                  <div className="flex items-center gap-1 text-gray-500">
+                    <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-gray-500" />
+                    {issue.attachment_count}
+                  </div>
+                </Tooltip>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/app/components/core/bulk-delete-issues-modal.tsx b/app/components/core/bulk-delete-issues-modal.tsx
new file mode 100644
index 000000000..bd5e18e57
--- /dev/null
+++ b/app/components/core/bulk-delete-issues-modal.tsx
@@ -0,0 +1,221 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// react hook form
+import { SubmitHandler, useForm } from "react-hook-form";
+// headless ui
+import { Combobox, Dialog, Transition } from "@headlessui/react";
+// services
+import issuesServices from "services/issues.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { DangerButton, SecondaryButton } from "components/ui";
+// icons
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { LayerDiagonalIcon } from "components/icons";
+// types
+import { IIssue } from "types";
+// fetch keys
+import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
+
+type FormInput = {
+  delete_issue_ids: string[];
+};
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
+  const [query, setQuery] = useState("");
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: issues } = useSWR(
+    workspaceSlug && projectId
+      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
+      : null,
+    workspaceSlug && projectId
+      ? () => issuesServices.getIssues(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { setToastAlert } = useToast();
+
+  const {
+    handleSubmit,
+    watch,
+    reset,
+    setValue,
+    formState: { isSubmitting },
+  } = useForm<FormInput>({
+    defaultValues: {
+      delete_issue_ids: [],
+    },
+  });
+
+  const filteredIssues: IIssue[] =
+    query === ""
+      ? issues ?? []
+      : issues?.filter(
+          (issue) =>
+            issue.name.toLowerCase().includes(query.toLowerCase()) ||
+            `${issue.project_detail.identifier}-${issue.sequence_id}`
+              .toLowerCase()
+              .includes(query.toLowerCase())
+        ) ?? [];
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setQuery("");
+    reset();
+  };
+
+  const handleDelete: SubmitHandler<FormInput> = async (data) => {
+    if (!data.delete_issue_ids || data.delete_issue_ids.length === 0) {
+      setToastAlert({
+        title: "Error",
+        type: "error",
+        message: "Please select atleast one issue",
+      });
+      return;
+    }
+
+    if (!Array.isArray(data.delete_issue_ids)) data.delete_issue_ids = [data.delete_issue_ids];
+
+    if (workspaceSlug && projectId) {
+      await issuesServices
+        .bulkDeleteIssues(workspaceSlug as string, projectId as string, {
+          issue_ids: data.delete_issue_ids,
+        })
+        .then((res) => {
+          setToastAlert({
+            title: "Success",
+            type: "success",
+            message: res.message,
+          });
+          handleClose();
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    }
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
+          >
+            <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+              <form>
+                <Combobox
+                  onChange={(val: string) => {
+                    const selectedIssues = watch("delete_issue_ids");
+                    if (selectedIssues.includes(val))
+                      setValue(
+                        "delete_issue_ids",
+                        selectedIssues.filter((i) => i !== val)
+                      );
+                    else setValue("delete_issue_ids", [...selectedIssues, val]);
+                  }}
+                >
+                  <div className="relative m-1">
+                    <MagnifyingGlassIcon
+                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
+                      aria-hidden="true"
+                    />
+                    <input
+                      type="text"
+                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                      placeholder="Search..."
+                      onChange={(event) => setQuery(event.target.value)}
+                    />
+                  </div>
+
+                  <Combobox.Options
+                    static
+                    className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
+                  >
+                    {filteredIssues.length > 0 ? (
+                      <li className="p-2">
+                        {query === "" && (
+                          <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
+                            Select issues to delete
+                          </h2>
+                        )}
+                        <ul className="text-sm text-gray-700">
+                          {filteredIssues.map((issue) => (
+                            <Combobox.Option
+                              key={issue.id}
+                              as="div"
+                              value={issue.id}
+                              className={({ active }) =>
+                                `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
+                                  active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
+                                }`
+                              }
+                            >
+                              <div className="flex items-center gap-2">
+                                <input
+                                  type="checkbox"
+                                  checked={watch("delete_issue_ids").includes(issue.id)}
+                                  readOnly
+                                />
+                                <span
+                                  className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                                  style={{
+                                    backgroundColor: issue.state_detail.color,
+                                  }}
+                                />
+                                <span className="flex-shrink-0 text-xs text-brand-secondary">
+                                  {issue.project_detail.identifier}-{issue.sequence_id}
+                                </span>
+                                <span>{issue.name}</span>
+                              </div>
+                            </Combobox.Option>
+                          ))}
+                        </ul>
+                      </li>
+                    ) : (
+                      <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
+                        <LayerDiagonalIcon height="56" width="56" />
+                        <h3 className="text-brand-secondary">
+                          No issues found. Create a new issue with{" "}
+                          <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
+                        </h3>
+                      </div>
+                    )}
+                  </Combobox.Options>
+                </Combobox>
+
+                {filteredIssues.length > 0 && (
+                  <div className="flex items-center justify-end gap-2 p-3">
+                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                    <DangerButton onClick={handleSubmit(handleDelete)} loading={isSubmitting}>
+                      {isSubmitting ? "Deleting..." : "Delete selected issues"}
+                    </DangerButton>
+                  </div>
+                )}
+              </form>
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/core/calendar-view/calendar.tsx b/app/components/core/calendar-view/calendar.tsx
new file mode 100644
index 000000000..a9824d004
--- /dev/null
+++ b/app/components/core/calendar-view/calendar.tsx
@@ -0,0 +1,511 @@
+import React, { useState } from "react";
+import useSWR, { mutate } from "swr";
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// helper
+import { renderDateFormat } from "helpers/date-time.helper";
+import {
+  startOfWeek,
+  lastDayOfWeek,
+  eachDayOfInterval,
+  weekDayInterval,
+  formatDate,
+  getCurrentWeekStartDate,
+  getCurrentWeekEndDate,
+  subtractMonths,
+  addMonths,
+  updateDateWithYear,
+  updateDateWithMonth,
+  isSameMonth,
+  isSameYear,
+  subtract7DaysToDate,
+  addSevenDaysToDate,
+} from "helpers/calendar.helper";
+// ui
+import { Popover, Transition } from "@headlessui/react";
+import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { CustomMenu, Spinner } from "components/ui";
+// icon
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  PlusIcon,
+} from "@heroicons/react/24/outline";
+// hooks
+import useIssuesView from "hooks/use-issues-view";
+// services
+import issuesService from "services/issues.service";
+import cyclesService from "services/cycles.service";
+// fetch key
+import {
+  CYCLE_CALENDAR_ISSUES,
+  MODULE_CALENDAR_ISSUES,
+  PROJECT_CALENDAR_ISSUES,
+} from "constants/fetch-keys";
+// type
+import { IIssue } from "types";
+// constant
+import { monthOptions, yearOptions } from "constants/calendar";
+import modulesService from "services/modules.service";
+
+type Props = {
+  addIssueToDate: (date: string) => void;
+};
+
+interface ICalendarRange {
+  startDate: Date;
+  endDate: Date;
+}
+
+export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
+  const [showWeekEnds, setShowWeekEnds] = useState<boolean>(false);
+  const [currentDate, setCurrentDate] = useState<Date>(new Date());
+  const [isMonthlyView, setIsMonthlyView] = useState<boolean>(true);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const { params } = useIssuesView();
+
+  const [calendarDateRange, setCalendarDateRange] = useState<ICalendarRange>({
+    startDate: startOfWeek(currentDate),
+    endDate: lastDayOfWeek(currentDate),
+  });
+
+  const targetDateFilter = {
+    target_date: `${renderDateFormat(calendarDateRange.startDate)};after,${renderDateFormat(
+      calendarDateRange.endDate
+    )};before`,
+  };
+
+  const { data: projectCalendarIssues } = useSWR(
+    workspaceSlug && projectId ? PROJECT_CALENDAR_ISSUES(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () =>
+          issuesService.getIssuesWithParams(workspaceSlug as string, projectId as string, {
+            ...params,
+            target_date: `${renderDateFormat(calendarDateRange.startDate)};after,${renderDateFormat(
+              calendarDateRange.endDate
+            )};before`,
+            group_by: null,
+          })
+      : null
+  );
+
+  const { data: cycleCalendarIssues } = useSWR(
+    workspaceSlug && projectId && cycleId
+      ? CYCLE_CALENDAR_ISSUES(projectId as string, cycleId as string)
+      : null,
+    workspaceSlug && projectId && cycleId
+      ? () =>
+          cyclesService.getCycleIssuesWithParams(
+            workspaceSlug as string,
+            projectId as string,
+            cycleId as string,
+            {
+              ...params,
+              target_date: `${renderDateFormat(
+                calendarDateRange.startDate
+              )};after,${renderDateFormat(calendarDateRange.endDate)};before`,
+              group_by: null,
+            }
+          )
+      : null
+  );
+
+  const { data: moduleCalendarIssues } = useSWR(
+    workspaceSlug && projectId && moduleId
+      ? MODULE_CALENDAR_ISSUES(projectId as string, moduleId as string)
+      : null,
+    workspaceSlug && projectId && moduleId
+      ? () =>
+          modulesService.getModuleIssuesWithParams(
+            workspaceSlug as string,
+            projectId as string,
+            moduleId as string,
+            {
+              ...params,
+              target_date: `${renderDateFormat(
+                calendarDateRange.startDate
+              )};after,${renderDateFormat(calendarDateRange.endDate)};before`,
+              group_by: null,
+            }
+          )
+      : null
+  );
+
+  const totalDate = eachDayOfInterval({
+    start: calendarDateRange.startDate,
+    end: calendarDateRange.endDate,
+  });
+
+  const onlyWeekDays = weekDayInterval({
+    start: calendarDateRange.startDate,
+    end: calendarDateRange.endDate,
+  });
+
+  const currentViewDays = showWeekEnds ? totalDate : onlyWeekDays;
+
+  const calendarIssues = cycleId
+    ? cycleCalendarIssues
+    : moduleId
+    ? moduleCalendarIssues
+    : projectCalendarIssues;
+
+  const currentViewDaysData = currentViewDays.map((date: Date) => {
+    const filterIssue =
+      calendarIssues && calendarIssues.length > 0
+        ? (calendarIssues as IIssue[]).filter(
+            (issue) =>
+              issue.target_date && renderDateFormat(issue.target_date) === renderDateFormat(date)
+          )
+        : [];
+    return {
+      date: renderDateFormat(date),
+      issues: filterIssue,
+    };
+  });
+
+  const weeks = ((date: Date[]) => {
+    const weeks = [];
+    if (showWeekEnds) {
+      for (let day = 0; day <= 6; day++) {
+        weeks.push(date[day]);
+      }
+    } else {
+      for (let day = 0; day <= 4; day++) {
+        weeks.push(date[day]);
+      }
+    }
+
+    return weeks;
+  })(currentViewDays);
+
+  const onDragEnd = (result: DropResult) => {
+    const { source, destination, draggableId } = result;
+
+    if (!destination || !workspaceSlug || !projectId) return;
+    if (source.droppableId === destination.droppableId) return;
+
+    const fetchKey = cycleId
+      ? CYCLE_CALENDAR_ISSUES(projectId as string, cycleId as string)
+      : moduleId
+      ? MODULE_CALENDAR_ISSUES(projectId as string, moduleId as string)
+      : PROJECT_CALENDAR_ISSUES(projectId as string);
+
+    mutate<IIssue[]>(
+      fetchKey,
+      (prevData) =>
+        (prevData ?? []).map((p) => {
+          if (p.id === draggableId)
+            return {
+              ...p,
+              target_date: destination.droppableId,
+            };
+          return p;
+        }),
+      false
+    );
+
+    issuesService.patchIssue(workspaceSlug as string, projectId as string, draggableId, {
+      target_date: destination?.droppableId,
+    });
+  };
+
+  const updateDate = (date: Date) => {
+    setCurrentDate(date);
+
+    setCalendarDateRange({
+      startDate: startOfWeek(date),
+      endDate: lastDayOfWeek(date),
+    });
+  };
+
+  return calendarIssues ? (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <div className="-m-2 h-full overflow-y-auto rounded-lg text-brand-secondary">
+        <div className="mb-4 flex items-center justify-between">
+          <div className="relative flex h-full w-full items-center justify-start gap-2 text-sm ">
+            <Popover className="flex h-full items-center justify-start rounded-lg">
+              {({ open }) => (
+                <>
+                  <Popover.Button className={`group flex h-full items-start gap-1 text-brand-base`}>
+                    <div className="flex  items-center   justify-center gap-2 text-2xl font-semibold">
+                      <span>{formatDate(currentDate, "Month")}</span>{" "}
+                      <span>{formatDate(currentDate, "yyyy")}</span>
+                    </div>
+                  </Popover.Button>
+
+                  <Transition
+                    as={React.Fragment}
+                    enter="transition ease-out duration-200"
+                    enterFrom="opacity-0 translate-y-1"
+                    enterTo="opacity-100 translate-y-0"
+                    leave="transition ease-in duration-150"
+                    leaveFrom="opacity-100 translate-y-0"
+                    leaveTo="opacity-0 translate-y-1"
+                  >
+                    <Popover.Panel className="absolute top-10 left-0 z-20 flex w-full max-w-xs transform flex-col overflow-hidden rounded-[10px] bg-brand-surface-2 shadow-lg">
+                      <div className="flex items-center justify-center gap-5 px-2 py-2 text-sm">
+                        {yearOptions.map((year) => (
+                          <button
+                            onClick={() => updateDate(updateDateWithYear(year.label, currentDate))}
+                            className={` ${
+                              isSameYear(year.value, currentDate)
+                                ? "text-sm font-medium text-brand-base"
+                                : "text-xs text-brand-secondary "
+                            } hover:text-sm hover:font-medium hover:text-brand-base`}
+                          >
+                            {year.label}
+                          </button>
+                        ))}
+                      </div>
+                      <div className="grid grid-cols-4  border-t border-brand-base px-2">
+                        {monthOptions.map((month) => (
+                          <button
+                            onClick={() =>
+                              updateDate(updateDateWithMonth(month.value, currentDate))
+                            }
+                            className={`px-2 py-2 text-xs text-brand-secondary hover:font-medium hover:text-brand-base ${
+                              isSameMonth(month.value, currentDate)
+                                ? "font-medium text-brand-base"
+                                : ""
+                            }`}
+                          >
+                            {month.label}
+                          </button>
+                        ))}
+                      </div>
+                    </Popover.Panel>
+                  </Transition>
+                </>
+              )}
+            </Popover>
+
+            <div className="flex items-center gap-2">
+              <button
+                className="cursor-pointer"
+                onClick={() => {
+                  if (isMonthlyView) {
+                    updateDate(subtractMonths(currentDate, 1));
+                  } else {
+                    setCurrentDate(subtract7DaysToDate(currentDate));
+                    setCalendarDateRange({
+                      startDate: getCurrentWeekStartDate(subtract7DaysToDate(currentDate)),
+                      endDate: getCurrentWeekEndDate(subtract7DaysToDate(currentDate)),
+                    });
+                  }
+                }}
+              >
+                <ChevronLeftIcon className="h-4 w-4" />
+              </button>
+              <button
+                className="cursor-pointer"
+                onClick={() => {
+                  if (isMonthlyView) {
+                    updateDate(addMonths(currentDate, 1));
+                  } else {
+                    setCurrentDate(addSevenDaysToDate(currentDate));
+                    setCalendarDateRange({
+                      startDate: getCurrentWeekStartDate(addSevenDaysToDate(currentDate)),
+                      endDate: getCurrentWeekEndDate(addSevenDaysToDate(currentDate)),
+                    });
+                  }
+                }}
+              >
+                <ChevronRightIcon className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+
+          <div className="flex w-full items-center justify-end gap-2">
+            <button
+              className="group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base bg-brand-surface-2 px-4 py-1.5 text-sm  hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none"
+              onClick={() => {
+                if (isMonthlyView) {
+                  updateDate(new Date());
+                } else {
+                  setCurrentDate(new Date());
+                  setCalendarDateRange({
+                    startDate: getCurrentWeekStartDate(new Date()),
+                    endDate: getCurrentWeekEndDate(new Date()),
+                  });
+                }
+              }}
+            >
+              Today{" "}
+            </button>
+
+            <CustomMenu
+              customButton={
+                <div
+                  className={`group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base bg-brand-surface-2 px-3 py-1.5 text-sm  hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none `}
+                >
+                  {isMonthlyView ? "Monthly" : "Weekly"}
+                  <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                </div>
+              }
+            >
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  setIsMonthlyView(true);
+                  setCalendarDateRange({
+                    startDate: startOfWeek(currentDate),
+                    endDate: lastDayOfWeek(currentDate),
+                  });
+                }}
+                className="w-52 text-sm text-brand-secondary"
+              >
+                <div className="flex w-full max-w-[260px] items-center justify-between gap-2">
+                  <span className="flex items-center gap-2">Monthly View</span>
+                  <CheckIcon
+                    className={`h-4 w-4 flex-shrink-0 ${
+                      isMonthlyView ? "opacity-100" : "opacity-0"
+                    }`}
+                  />
+                </div>
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  setIsMonthlyView(false);
+                  setCalendarDateRange({
+                    startDate: getCurrentWeekStartDate(currentDate),
+                    endDate: getCurrentWeekEndDate(currentDate),
+                  });
+                }}
+                className="w-52 text-sm text-brand-secondary"
+              >
+                <div className="flex w-full items-center justify-between gap-2">
+                  <span className="flex items-center gap-2">Weekly View</span>
+                  <CheckIcon
+                    className={`h-4 w-4 flex-shrink-0 ${
+                      isMonthlyView ? "opacity-0" : "opacity-100"
+                    }`}
+                  />
+                </div>
+              </CustomMenu.MenuItem>
+              <div className="mt-1 flex w-52 items-center justify-between border-t border-brand-base py-2 px-1  text-sm text-brand-secondary">
+                <h4>Show weekends</h4>
+                <button
+                  type="button"
+                  className={`relative inline-flex h-3.5 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                    showWeekEnds ? "bg-green-500" : "bg-brand-surface-2"
+                  }`}
+                  role="switch"
+                  aria-checked={showWeekEnds}
+                  onClick={() => setShowWeekEnds(!showWeekEnds)}
+                >
+                  <span className="sr-only">Show weekends</span>
+                  <span
+                    aria-hidden="true"
+                    className={`inline-block h-2.5 w-2.5 transform rounded-full bg-brand-surface-2 shadow ring-0 transition duration-200 ease-in-out ${
+                      showWeekEnds ? "translate-x-2.5" : "translate-x-0"
+                    }`}
+                  />
+                </button>
+              </div>
+            </CustomMenu>
+          </div>
+        </div>
+
+        <div
+          className={`grid auto-rows-[minmax(36px,1fr)] rounded-lg ${
+            showWeekEnds ? "grid-cols-7" : "grid-cols-5"
+          }`}
+        >
+          {weeks.map((date, index) => (
+            <div
+              key={index}
+              className={`flex  items-center justify-start gap-2 border-brand-base bg-brand-surface-1 p-1.5 text-base font-medium text-brand-secondary ${
+                !isMonthlyView
+                  ? showWeekEnds
+                    ? (index + 1) % 7 === 0
+                      ? ""
+                      : "border-r"
+                    : (index + 1) % 5 === 0
+                    ? ""
+                    : "border-r"
+                  : ""
+              }`}
+            >
+              <span>
+                {isMonthlyView ? formatDate(date, "eee").substring(0, 3) : formatDate(date, "eee")}
+              </span>
+              {!isMonthlyView && <span>{formatDate(date, "d")}</span>}
+            </div>
+          ))}
+        </div>
+
+        <div
+          className={`grid h-full auto-rows-[minmax(150px,1fr)] ${
+            showWeekEnds ? "grid-cols-7" : "grid-cols-5"
+          } `}
+        >
+          {currentViewDaysData.map((date, index) => (
+            <StrictModeDroppable droppableId={date.date}>
+              {(provided, snapshot) => (
+                <div
+                  key={index}
+                  ref={provided.innerRef}
+                  {...provided.droppableProps}
+                  className={`group flex flex-col gap-1.5 border-t border-brand-base p-2.5 text-left text-sm font-medium hover:bg-brand-surface-1 ${
+                    showWeekEnds
+                      ? (index + 1) % 7 === 0
+                        ? ""
+                        : "border-r"
+                      : (index + 1) % 5 === 0
+                      ? ""
+                      : "border-r"
+                  }`}
+                >
+                  {isMonthlyView && <span>{formatDate(new Date(date.date), "d")}</span>}
+                  {date.issues.length > 0 &&
+                    date.issues.map((issue: IIssue, index) => (
+                      <Draggable draggableId={issue.id} index={index}>
+                        {(provided, snapshot) => (
+                          <div
+                            key={index}
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            className={`w-full cursor-pointer truncate rounded bg-brand-surface-2 p-1.5 hover:scale-105 ${
+                              snapshot.isDragging ? "shadow-lg" : ""
+                            }`}
+                          >
+                            <Link
+                              href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}
+                              className="w-full"
+                            >
+                              {issue.name}
+                            </Link>
+                          </div>
+                        )}
+                      </Draggable>
+                    ))}
+                  <div className="flex items-center justify-center p-1.5 text-sm text-brand-secondary opacity-0 group-hover:opacity-100">
+                    <button
+                      className="flex items-center justify-center gap-2 text-center"
+                      onClick={() => addIssueToDate(date.date)}
+                    >
+                      <PlusIcon className="h-4 w-4 text-brand-secondary" />
+                      Add new issue
+                    </button>
+                  </div>
+                  {provided.placeholder}
+                </div>
+              )}
+            </StrictModeDroppable>
+          ))}
+        </div>
+      </div>
+    </DragDropContext>
+  ) : (
+    <div className="flex h-full w-full items-center justify-center">
+      <Spinner />
+    </div>
+  );
+};
diff --git a/app/components/core/calendar-view/index.ts b/app/components/core/calendar-view/index.ts
new file mode 100644
index 000000000..55608c7e8
--- /dev/null
+++ b/app/components/core/calendar-view/index.ts
@@ -0,0 +1 @@
+export * from "./calendar"
\ No newline at end of file
diff --git a/app/components/core/custom-theme-form.tsx b/app/components/core/custom-theme-form.tsx
new file mode 100644
index 000000000..ed1009468
--- /dev/null
+++ b/app/components/core/custom-theme-form.tsx
@@ -0,0 +1,267 @@
+import { useEffect, useState } from "react";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// ui
+import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+
+const defaultValues = {
+  palette: "",
+};
+
+export const ThemeForm: React.FC<any> = ({ handleFormSubmit, handleClose, status, data }) => {
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<any>({
+    defaultValues,
+  });
+  const [darkPalette, setDarkPalette] = useState(false);
+
+  const handleUpdateTheme = async (formData: any) => {
+    await handleFormSubmit({ ...formData, darkPalette });
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
+  // --color-bg-base: 25, 27, 27;
+  //   --color-bg-surface-1: 31, 32, 35;
+  //   --color-bg-surface-2: 39, 42, 45;
+
+  //   --color-border: 46, 50, 52;
+  //   --color-bg-sidebar: 19, 20, 22;
+  //   --color-accent: 60, 133, 217;
+
+  //   --color-text-base: 255, 255, 255;
+  //   --color-text-secondary: 142, 148, 146;
+
+  return (
+    <form onSubmit={handleSubmit(handleUpdateTheme)}>
+      <div className="space-y-5">
+        <h3 className="text-lg font-medium leading-6 text-brand-base">Customize your theme</h3>
+        <div className="space-y-4">
+          <div className="mt-6 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-6">
+            <div className="sm:col-span-2">
+              <Input
+                id="bgBase"
+                label="Background"
+                name="bgBase"
+                type="name"
+                placeholder="#FFFFFF"
+                autoComplete="off"
+                error={errors.bgBase}
+                register={register}
+                validations={{
+                  required: "Background color is required",
+                  pattern: {
+                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
+                    message: "Background color should be hex format",
+                  },
+                }}
+              />
+            </div>
+            <div className="sm:col-span-2">
+              <Input
+                id="bgSurface1"
+                label="Background surface 1"
+                name="bgSurface1"
+                type="name"
+                placeholder="#FFFFFF"
+                autoComplete="off"
+                error={errors.bgSurface1}
+                register={register}
+                validations={{
+                  required: "Background surface 1 color is required",
+                  pattern: {
+                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
+                    message: "Background surface 1 color should be hex format",
+                  },
+                }}
+              />
+            </div>
+            <div className="sm:col-span-2">
+              <Input
+                id="bgSurface2"
+                label="Background surface 2"
+                name="bgSurface1"
+                type="name"
+                placeholder="#FFFFFF"
+                autoComplete="off"
+                error={errors.bgSurface1}
+                register={register}
+                validations={{
+                  required: "Background surface 2 color is required",
+                  pattern: {
+                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
+                    message: "Background surface 2 color should be hex format",
+                  },
+                }}
+              />
+            </div>
+
+            <div className="sm:col-span-2">
+              <Input
+                id="border"
+                label="Border"
+                name="border"
+                type="name"
+                placeholder="#FFFFFF"
+                autoComplete="off"
+                error={errors.border}
+                register={register}
+                validations={{
+                  required: "Border color is required",
+                  pattern: {
+                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
+                    message: "Border color should be hex format",
+                  },
+                }}
+              />
+            </div>
+            <div className="sm:col-span-2">
+              <Input
+                id="sidebar"
+                label="Sidebar"
+                name="sidebar"
+                type="name"
+                placeholder="#FFFFFF"
+                autoComplete="off"
+                error={errors.sidebar}
+                register={register}
+                validations={{
+                  required: "Sidebar color is required",
+                  pattern: {
+                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
+                    message: "Sidebar color should be hex format",
+                  },
+                }}
+              />
+            </div>
+            <div className="sm:col-span-2">
+              <Input
+                id="accent"
+                label="Accent"
+                name="accent"
+                type="name"
+                placeholder="#FFFFFF"
+                autoComplete="off"
+                error={errors.accent}
+                register={register}
+                validations={{
+                  required: "Accent color is required",
+                  pattern: {
+                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
+                    message: "Accent color should be hex format",
+                  },
+                }}
+              />
+            </div>
+            <div className="sm:col-span-3">
+              <Input
+                id="textBase"
+                label="Text primary"
+                name="textBase"
+                type="name"
+                placeholder="#FFFFFF"
+                autoComplete="off"
+                error={errors.textBase}
+                register={register}
+                validations={{
+                  required: "Text primary color is required",
+                  pattern: {
+                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
+                    message: "Text primary color should be hex format",
+                  },
+                }}
+              />
+            </div>
+            <div className="sm:col-span-3">
+              <Input
+                id="textSecondary"
+                label="Text secondary"
+                name="textSecondary"
+                type="name"
+                placeholder="#FFFFFF"
+                autoComplete="off"
+                error={errors.textSecondary}
+                register={register}
+                validations={{
+                  required: "Text secondary color is required",
+                  pattern: {
+                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
+                    message: "Text secondary color should be hex format",
+                  },
+                }}
+              />
+            </div>
+          </div>
+
+          <div>
+            <Input
+              id="palette"
+              label="All colors"
+              name="palette"
+              type="name"
+              placeholder="Enter comma separated hex colors"
+              autoComplete="off"
+              error={errors.palette}
+              register={register}
+              validations={{
+                required: "Color values is required",
+                pattern: {
+                  value: /^(#(?:[0-9a-fA-F]{3}){1,2},){7}#(?:[0-9a-fA-F]{3}){1,2}$/g,
+                  message: "Color values should be hex format, separated by commas",
+                },
+              }}
+            />
+          </div>
+          <div
+            className="flex cursor-pointer items-center gap-1"
+            onClick={() => setDarkPalette((prevData) => !prevData)}
+          >
+            <span className="text-xs">Dark palette</span>
+            <button
+              type="button"
+              className={`pointer-events-none relative inline-flex h-4 w-7 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent ${
+                darkPalette ? "bg-brand-accent" : "bg-gray-300"
+              } transition-colors duration-300 ease-in-out focus:outline-none`}
+              role="switch"
+              aria-checked="false"
+            >
+              <span className="sr-only">Dark palette</span>
+              <span
+                aria-hidden="true"
+                className={`pointer-events-none inline-block h-3 w-3 ${
+                  darkPalette ? "translate-x-3" : "translate-x-0"
+                } transform rounded-full bg-brand-surface-2 shadow ring-0 transition duration-300 ease-in-out`}
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end gap-2">
+        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+        <PrimaryButton type="submit" loading={isSubmitting}>
+          {status
+            ? isSubmitting
+              ? "Updating Theme..."
+              : "Update Theme"
+            : isSubmitting
+            ? "Creating Theme..."
+            : "Set Theme"}
+        </PrimaryButton>
+      </div>
+    </form>
+  );
+};
diff --git a/app/components/core/custom-theme-modal.tsx b/app/components/core/custom-theme-modal.tsx
new file mode 100644
index 000000000..d46d17d28
--- /dev/null
+++ b/app/components/core/custom-theme-modal.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// components
+import { ThemeForm } from "./custom-theme-form";
+// helpers
+import { applyTheme } from "helpers/theme.helper";
+// fetch-keys
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+};
+
+export const CustomThemeModal: React.FC<Props> = ({ isOpen, handleClose }) => {
+  const onClose = () => {
+    handleClose();
+  };
+
+  const handleFormSubmit = async (formData: any) => {
+    applyTheme(formData.palette, formData.darkPalette);
+    onClose();
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <ThemeForm
+                  handleClose={handleClose}
+                  handleFormSubmit={handleFormSubmit}
+                  status={false}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/core/existing-issues-list-modal.tsx b/app/components/core/existing-issues-list-modal.tsx
new file mode 100644
index 000000000..2d5ac37dc
--- /dev/null
+++ b/app/components/core/existing-issues-list-modal.tsx
@@ -0,0 +1,224 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+// headless ui
+import { Combobox, Dialog, Transition } from "@headlessui/react";
+// hooks
+import useToast from "hooks/use-toast";
+import useIssuesView from "hooks/use-issues-view";
+// ui
+import { PrimaryButton, SecondaryButton } from "components/ui";
+// icons
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { LayerDiagonalIcon } from "components/icons";
+// types
+import { IIssue } from "types";
+// fetch-keys
+import {
+  CYCLE_DETAILS,
+  CYCLE_ISSUES_WITH_PARAMS,
+  MODULE_DETAILS,
+  MODULE_ISSUES_WITH_PARAMS,
+} from "constants/fetch-keys";
+
+type FormInput = {
+  issues: string[];
+};
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  issues: IIssue[];
+  handleOnSubmit: any;
+};
+
+export const ExistingIssuesListModal: React.FC<Props> = ({
+  isOpen,
+  handleClose: onClose,
+  issues,
+  handleOnSubmit,
+}) => {
+  const [query, setQuery] = useState("");
+
+  const router = useRouter();
+  const { cycleId, moduleId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { params } = useIssuesView();
+
+  const handleClose = () => {
+    onClose();
+    setQuery("");
+    reset();
+  };
+
+  const {
+    handleSubmit,
+    reset,
+    control,
+    formState: { isSubmitting },
+  } = useForm<FormInput>({
+    defaultValues: {
+      issues: [],
+    },
+  });
+
+  const onSubmit: SubmitHandler<FormInput> = async (data) => {
+    if (!data.issues || data.issues.length === 0) {
+      setToastAlert({
+        title: "Error",
+        type: "error",
+        message: "Please select atleast one issue",
+      });
+
+      return;
+    }
+
+    await handleOnSubmit(data);
+    if (cycleId) {
+      mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
+      mutate(CYCLE_DETAILS(cycleId as string));
+    }
+    if (moduleId) {
+      mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+      mutate(MODULE_DETAILS(moduleId as string));
+    }
+
+    handleClose();
+
+    setToastAlert({
+      title: "Success",
+      type: "success",
+      message: `Issue${data.issues.length > 1 ? "s" : ""} added successfully`,
+    });
+  };
+
+  const filteredIssues: IIssue[] =
+    query === ""
+      ? issues ?? []
+      : issues.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ?? [];
+
+  return (
+    <>
+      <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
+        <Dialog as="div" className="relative z-20" onClose={handleClose}>
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+                <form>
+                  <Controller
+                    control={control}
+                    name="issues"
+                    render={({ field }) => (
+                      <Combobox as="div" {...field} multiple>
+                        <div className="relative m-1">
+                          <MagnifyingGlassIcon
+                            className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
+                            aria-hidden="true"
+                          />
+                          <Combobox.Input
+                            className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                            placeholder="Search..."
+                            onChange={(e) => setQuery(e.target.value)}
+                          />
+                        </div>
+
+                        <Combobox.Options
+                          static
+                          className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
+                        >
+                          {filteredIssues.length > 0 ? (
+                            <li className="p-2">
+                              {query === "" && (
+                                <h2 className="mb-2 px-3 text-xs font-semibold text-brand-base">
+                                  Select issues to add
+                                </h2>
+                              )}
+                              <ul className="text-sm text-gray-700">
+                                {filteredIssues.map((issue) => (
+                                  <Combobox.Option
+                                    key={issue.id}
+                                    as="label"
+                                    htmlFor={`issue-${issue.id}`}
+                                    value={issue.id}
+                                    className={({ active }) =>
+                                      `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
+                                        active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
+                                      }`
+                                    }
+                                  >
+                                    {({ selected }) => (
+                                      <>
+                                        <input type="checkbox" checked={selected} readOnly />
+                                        <span
+                                          className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                                          style={{
+                                            backgroundColor: issue.state_detail.color,
+                                          }}
+                                        />
+                                        <span className="flex-shrink-0 text-xs text-brand-secondary">
+                                          {issue.project_detail.identifier}-{issue.sequence_id}
+                                        </span>
+                                        {issue.name}
+                                      </>
+                                    )}
+                                  </Combobox.Option>
+                                ))}
+                              </ul>
+                            </li>
+                          ) : (
+                            <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
+                              <LayerDiagonalIcon height="56" width="56" />
+                              <h3 className="text-brand-secondary">
+                                No issues found. Create a new issue with{" "}
+                                <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
+                              </h3>
+                            </div>
+                          )}
+                        </Combobox.Options>
+                      </Combobox>
+                    )}
+                  />
+                  {filteredIssues.length > 0 && (
+                    <div className="flex items-center justify-end gap-2 p-3">
+                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                      <PrimaryButton onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+                        {isSubmitting ? "Adding..." : "Add selected issues"}
+                      </PrimaryButton>
+                    </div>
+                  )}
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+};
diff --git a/app/components/core/feeds.tsx b/app/components/core/feeds.tsx
new file mode 100644
index 000000000..0d68fd7a6
--- /dev/null
+++ b/app/components/core/feeds.tsx
@@ -0,0 +1,316 @@
+import React from "react";
+import Image from "next/image";
+
+// icons
+import {
+  ArrowTopRightOnSquareIcon,
+  CalendarDaysIcon,
+  ChartBarIcon,
+  ChatBubbleBottomCenterTextIcon,
+  ChatBubbleLeftEllipsisIcon,
+  LinkIcon,
+  PaperClipIcon,
+  PlayIcon,
+  RectangleGroupIcon,
+  Squares2X2Icon,
+  TrashIcon,
+  UserIcon,
+} from "@heroicons/react/24/outline";
+import { BlockedIcon, BlockerIcon, CyclesIcon, TagIcon, UserGroupIcon } from "components/icons";
+// helpers
+import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
+import { addSpaceIfCamelCase } from "helpers/string.helper";
+// types
+import RemirrorRichTextEditor from "components/rich-text-editor";
+import Link from "next/link";
+
+const activityDetails: {
+  [key: string]: {
+    message?: string;
+    icon: JSX.Element;
+  };
+} = {
+  assignee: {
+    message: "removed the assignee",
+    icon: <UserGroupIcon className="h-3 w-3" color="#6b7280" aria-hidden="true" />,
+  },
+  assignees: {
+    message: "added a new assignee",
+    icon: <UserGroupIcon className="h-3 w-3" color="#6b7280" aria-hidden="true" />,
+  },
+  blocks: {
+    message: "marked this issue being blocked by",
+    icon: <BlockedIcon height="12" width="12" color="#6b7280" />,
+  },
+  blocking: {
+    message: "marked this issue is blocking",
+    icon: <BlockerIcon height="12" width="12" color="#6b7280" />,
+  },
+  cycles: {
+    message: "set the cycle to",
+    icon: <CyclesIcon height="12" width="12" color="#6b7280" />,
+  },
+  labels: {
+    icon: <TagIcon height="12" width="12" color="#6b7280" />,
+  },
+  modules: {
+    message: "set the module to",
+    icon: <RectangleGroupIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+  },
+  state: {
+    message: "set the state to",
+    icon: <Squares2X2Icon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+  },
+  priority: {
+    message: "set the priority to",
+    icon: <ChartBarIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+  },
+  name: {
+    message: "set the name to",
+    icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+  },
+  description: {
+    message: "updated the description.",
+    icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+  },
+  estimate_point: {
+    message: "set the estimate point to",
+    icon: <PlayIcon className="h-3 w-3 text-gray-500 -rotate-90" aria-hidden="true" />,
+  },
+  target_date: {
+    message: "set the due date to",
+    icon: <CalendarDaysIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+  },
+  parent: {
+    message: "set the parent to",
+    icon: <UserIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+  },
+  issue: {
+    message: "deleted the issue.",
+    icon: <TrashIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+  },
+  estimate: {
+    message: "updated the estimate",
+    icon: <PlayIcon className="h-3 w-3 text-gray-500 -rotate-90" aria-hidden="true" />,
+  },
+  link: {
+    message: "updated the link",
+    icon: <LinkIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+  },
+  attachment: {
+    message: "updated the attachment",
+    icon: <PaperClipIcon className="h-3 w-3 text-gray-500 " aria-hidden="true" />,
+  },
+};
+
+export const Feeds: React.FC<any> = ({ activities }) => (
+  <div>
+    <ul role="list" className="-mb-4">
+      {activities.map((activity: any, activityIdx: number) => {
+        // determines what type of action is performed
+        let action = activityDetails[activity.field as keyof typeof activityDetails]?.message;
+        if (activity.field === "labels") {
+          action = activity.new_value !== "" ? "added a new label" : "removed the label";
+        } else if (activity.field === "blocking") {
+          action =
+            activity.new_value !== ""
+              ? "marked this issue is blocking"
+              : "removed the issue from blocking";
+        } else if (activity.field === "blocks") {
+          action =
+            activity.new_value !== "" ? "marked this issue being blocked by" : "removed blocker";
+        } else if (activity.field === "target_date") {
+          action =
+            activity.new_value && activity.new_value !== ""
+              ? "set the due date to"
+              : "removed the due date";
+        } else if (activity.field === "parent") {
+          action =
+            activity.new_value && activity.new_value !== ""
+              ? "set the parent to"
+              : "removed the parent";
+        } else if (activity.field === "priority") {
+          action =
+            activity.new_value && activity.new_value !== ""
+              ? "set the priority to"
+              : "removed the priority";
+        } else if (activity.field === "description") {
+          action = "updated the";
+        } else if (activity.field === "attachment") {
+          action = `${activity.verb} the`;
+        } else if (activity.field === "link") {
+          action = `${activity.verb} the`;
+        }
+        // for values that are after the action clause
+        let value: any = activity.new_value ? activity.new_value : activity.old_value;
+        if (
+          activity.verb === "created" &&
+          activity.field !== "cycles" &&
+          activity.field !== "modules" &&
+          activity.field !== "attachment" &&
+          activity.field !== "link" &&
+          activity.field !== "estimate"
+        ) {
+          const { workspace_detail, project, issue } = activity;
+          value = (
+            <span className="text-gray-600">
+              created{" "}
+              <Link href={`/${workspace_detail.slug}/projects/${project}/issues/${issue}`}>
+                <a className="inline-flex items-center hover:underline">
+                  this issue. <ArrowTopRightOnSquareIcon className="h-3.5 w-3.5 ml-1" />
+                </a>
+              </Link>
+            </span>
+          );
+        } else if (activity.field === "state") {
+          value = activity.new_value ? addSpaceIfCamelCase(activity.new_value) : "None";
+        } else if (activity.field === "labels") {
+          let name;
+          let id = "#000000";
+          if (activity.new_value !== "") {
+            name = activity.new_value;
+            id = activity.new_identifier ? activity.new_identifier : id;
+          } else {
+            name = activity.old_value;
+            id = activity.old_identifier ? activity.old_identifier : id;
+          }
+
+          value = name;
+        } else if (activity.field === "assignees") {
+          value = activity.new_value;
+        } else if (activity.field === "target_date") {
+          const date =
+            activity.new_value && activity.new_value !== ""
+              ? activity.new_value
+              : activity.old_value;
+          value = renderShortNumericDateFormat(date as string);
+        } else if (activity.field === "description") {
+          value = "description";
+        } else if (activity.field === "attachment") {
+          value = "attachment";
+        } else if (activity.field === "link") {
+          value = "link";
+        } else if (activity.field === "estimate_point") {
+          value = activity.new_value
+            ? activity.new_value + ` Point${parseInt(activity.new_value ?? "", 10) > 1 ? "s" : ""}`
+            : "None";
+        }
+
+        if (activity.field === "comment") {
+          return (
+            <div key={activity.id}>
+              <div className="relative flex items-start space-x-3">
+                <div className="relative px-1">
+                  {activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? (
+                    <Image
+                      src={activity.actor_detail.avatar}
+                      alt={activity.actor_detail.first_name}
+                      height={30}
+                      width={30}
+                      className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white"
+                    />
+                  ) : (
+                    <div
+                      className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}
+                    >
+                      {activity.actor_detail.first_name.charAt(0)}
+                    </div>
+                  )}
+
+                  <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-brand-surface-2 px-0.5 py-px">
+                    <ChatBubbleLeftEllipsisIcon
+                      className="h-3.5 w-3.5 text-gray-400"
+                      aria-hidden="true"
+                    />
+                  </span>
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div>
+                    <div className="text-xs">
+                      {activity.actor_detail.first_name}
+                      {activity.actor_detail.is_bot ? "Bot" : " " + activity.actor_detail.last_name}
+                    </div>
+                    <p className="mt-0.5 text-xs text-brand-secondary">
+                      Commented {timeAgo(activity.created_at)}
+                    </p>
+                  </div>
+                  <div className="issue-comments-section p-0">
+                    <RemirrorRichTextEditor
+                      value={
+                        activity.new_value && activity.new_value !== ""
+                          ? activity.new_value
+                          : activity.old_value
+                      }
+                      editable={false}
+                      onBlur={() => ({})}
+                      noBorder
+                      customClassName="text-xs bg-brand-surface-1"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        }
+
+        if ("field" in activity && activity.field !== "updated_by") {
+          return (
+            <li key={activity.id}>
+              <div className="relative pb-1">
+                {activities.length > 1 && activityIdx !== activities.length - 1 ? (
+                  <span
+                    className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-surface-2"
+                    aria-hidden="true"
+                  />
+                ) : null}
+                <div className="relative flex items-start space-x-2">
+                  <>
+                    <div>
+                      <div className="relative px-1.5">
+                        <div className="mt-1.5">
+                          <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-1 ring-white">
+                            {activity.field ? (
+                              activityDetails[activity.field as keyof typeof activityDetails]?.icon
+                            ) : activity.actor_detail.avatar &&
+                              activity.actor_detail.avatar !== "" ? (
+                              <Image
+                                src={activity.actor_detail.avatar}
+                                alt={activity.actor_detail.first_name}
+                                height={24}
+                                width={24}
+                                className="rounded-full"
+                              />
+                            ) : (
+                              <div
+                                className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
+                              >
+                                {activity.actor_detail.first_name.charAt(0)}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="min-w-0 flex-1 py-3">
+                      <div className="text-xs text-brand-secondary">
+                        <span className="text-gray font-medium">
+                          {activity.actor_detail.first_name}
+                          {activity.actor_detail.is_bot
+                            ? " Bot"
+                            : " " + activity.actor_detail.last_name}
+                        </span>
+                        <span> {action} </span>
+                        <span className="text-xs font-medium text-brand-base"> {value} </span>
+                        <span className="whitespace-nowrap">{timeAgo(activity.created_at)}</span>
+                      </div>
+                    </div>
+                  </>
+                </div>
+              </div>
+            </li>
+          );
+        }
+      })}
+    </ul>
+  </div>
+);
diff --git a/app/components/core/filter-list.tsx b/app/components/core/filter-list.tsx
new file mode 100644
index 000000000..c42b7501b
--- /dev/null
+++ b/app/components/core/filter-list.tsx
@@ -0,0 +1,350 @@
+import React from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+
+// icons
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import { getPriorityIcon, getStateGroupIcon } from "components/icons";
+// ui
+import { Avatar } from "components/ui";
+// helpers
+import { getStatesList } from "helpers/state.helper";
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+// services
+import issuesService from "services/issues.service";
+import projectService from "services/project.service";
+import stateService from "services/state.service";
+// types
+import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATE_LIST } from "constants/fetch-keys";
+import { IIssueFilterOptions } from "types";
+
+export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, viewId } = router.query;
+
+  const { data: members } = useSWR(
+    projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: issueLabels } = useSWR(
+    projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId.toString())
+      : null
+  );
+
+  const { data: stateGroups } = useSWR(
+    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
+    workspaceSlug
+      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
+      : null
+  );
+  const states = getStatesList(stateGroups ?? {});
+
+  if (!filters) return <></>;
+
+  const nullFilters = Object.keys(filters).filter(
+    (key) => filters[key as keyof IIssueFilterOptions] === null
+  );
+
+  return (
+    <div className="flex flex-1 flex-wrap items-center gap-2 text-xs">
+      {Object.keys(filters).map((key) => {
+        if (filters[key as keyof typeof filters] !== null)
+          return (
+            <div
+              key={key}
+              className="flex items-center gap-x-2 rounded-full border border-brand-base bg-brand-surface-2 px-2 py-1"
+            >
+              <span className="font-medium capitalize text-brand-secondary">
+                {replaceUnderscoreIfSnakeCase(key)}:
+              </span>
+              {filters[key as keyof IIssueFilterOptions] === null ||
+              (filters[key as keyof IIssueFilterOptions]?.length ?? 0) <= 0 ? (
+                <span className="inline-flex items-center px-2 py-0.5 font-medium">None</span>
+              ) : Array.isArray(filters[key as keyof IIssueFilterOptions]) ? (
+                <div className="space-x-2">
+                  {key === "state" ? (
+                    <div className="flex flex-wrap items-center gap-1">
+                      {filters.state?.map((stateId: any) => {
+                        const state = states?.find((s) => s.id === stateId);
+
+                        return (
+                          <p
+                            key={state?.id}
+                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium text-white"
+                            style={{
+                              color: state?.color,
+                              backgroundColor: `${state?.color}20`,
+                            }}
+                          >
+                            <span>
+                              {getStateGroupIcon(
+                                state?.group ?? "backlog",
+                                "12",
+                                "12",
+                                state?.color
+                              )}
+                            </span>
+                            <span>{state?.name ?? ""}</span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters(
+                                  {
+                                    state: filters.state?.filter((s: any) => s !== stateId),
+                                  },
+                                  !Boolean(viewId)
+                                )
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </p>
+                        );
+                      })}
+                      <button
+                        type="button"
+                        onClick={() =>
+                          setFilters({
+                            state: null,
+                          })
+                        }
+                      >
+                        <XMarkIcon className="h-3 w-3" />
+                      </button>
+                    </div>
+                  ) : key === "priority" ? (
+                    <div className="flex flex-wrap items-center gap-1">
+                      {filters.priority?.map((priority: any) => (
+                        <p
+                          key={priority}
+                          className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium capitalize text-white ${
+                            priority === "urgent"
+                              ? "bg-red-100 text-red-600 hover:bg-red-100"
+                              : priority === "high"
+                              ? "bg-orange-100 text-orange-500 hover:bg-orange-100"
+                              : priority === "medium"
+                              ? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100"
+                              : priority === "low"
+                              ? "bg-green-100 text-green-500 hover:bg-green-100"
+                              : "bg-brand-surface-1 text-gray-700 hover:bg-brand-surface-1"
+                          }`}
+                        >
+                          <span>{getPriorityIcon(priority)}</span>
+                          <span>{priority ? priority : "None"}</span>
+                          <span
+                            className="cursor-pointer"
+                            onClick={() =>
+                              setFilters(
+                                {
+                                  priority: filters.priority?.filter((p: any) => p !== priority),
+                                },
+                                !Boolean(viewId)
+                              )
+                            }
+                          >
+                            <XMarkIcon className="h-3 w-3" />
+                          </span>
+                        </p>
+                      ))}
+                      <button
+                        type="button"
+                        onClick={() =>
+                          setFilters({
+                            priority: null,
+                          })
+                        }
+                      >
+                        <XMarkIcon className="h-3 w-3" />
+                      </button>
+                    </div>
+                  ) : key === "assignees" ? (
+                    <div className="flex flex-wrap items-center gap-1">
+                      {filters.assignees?.map((memberId: string) => {
+                        const member = members?.find((m) => m.member.id === memberId)?.member;
+
+                        return (
+                          <div
+                            key={memberId}
+                            className="inline-flex items-center gap-x-1 rounded-full px-1 font-medium capitalize"
+                          >
+                            <Avatar user={member} />
+                            <span>{member?.first_name}</span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters(
+                                  {
+                                    assignees: filters.assignees?.filter(
+                                      (p: any) => p !== memberId
+                                    ),
+                                  },
+                                  !Boolean(viewId)
+                                )
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </div>
+                        );
+                      })}
+                      <button
+                        type="button"
+                        onClick={() =>
+                          setFilters({
+                            assignees: null,
+                          })
+                        }
+                      >
+                        <XMarkIcon className="h-3 w-3" />
+                      </button>
+                    </div>
+                  ) : (key as keyof IIssueFilterOptions) === "created_by" ? (
+                    <div className="flex flex-wrap items-center gap-1">
+                      {filters.created_by?.map((memberId: string) => {
+                        const member = members?.find((m) => m.member.id === memberId)?.member;
+
+                        return (
+                          <div
+                            key={`${memberId}-${key}`}
+                            className="inline-flex items-center gap-x-1 rounded-full px-1 font-medium capitalize"
+                          >
+                            <Avatar user={member} />
+                            <span>{member?.first_name}</span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters(
+                                  {
+                                    created_by: filters.created_by?.filter(
+                                      (p: any) => p !== memberId
+                                    ),
+                                  },
+                                  !Boolean(viewId)
+                                )
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </div>
+                        );
+                      })}
+                      <button
+                        type="button"
+                        onClick={() =>
+                          setFilters({
+                            created_by: null,
+                          })
+                        }
+                      >
+                        <XMarkIcon className="h-3 w-3" />
+                      </button>
+                    </div>
+                  ) : key === "labels" ? (
+                    <div className="flex flex-wrap items-center gap-1">
+                      {filters.labels?.map((labelId: string) => {
+                        const label = issueLabels?.find((l) => l.id === labelId);
+
+                        if (!label) return null;
+                        const color = label.color !== "" ? label.color : "#0f172a";
+                        return (
+                          <div
+                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium"
+                            style={{
+                              background: `${color}33`, // add 20% opacity
+                            }}
+                            key={labelId}
+                          >
+                            <div
+                              className="h-2 w-2 rounded-full"
+                              style={{
+                                backgroundColor: color,
+                              }}
+                            />
+                            <span
+                              style={{
+                                color: color,
+                              }}
+                            >
+                              {label.name}
+                            </span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters(
+                                  {
+                                    labels: filters.labels?.filter((l: any) => l !== labelId),
+                                  },
+                                  !Boolean(viewId)
+                                )
+                              }
+                            >
+                              <XMarkIcon
+                                className="h-3 w-3"
+                                style={{
+                                  color: color,
+                                }}
+                              />
+                            </span>
+                          </div>
+                        );
+                      })}
+                      <button
+                        type="button"
+                        onClick={() =>
+                          setFilters({
+                            labels: null,
+                          })
+                        }
+                      >
+                        <XMarkIcon className="h-3 w-3" />
+                      </button>
+                    </div>
+                  ) : (
+                    (filters[key as keyof IIssueFilterOptions] as any)?.join(", ")
+                  )}
+                </div>
+              ) : (
+                <div className="flex items-center gap-x-1 capitalize">
+                  {filters[key as keyof typeof filters]}
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setFilters({
+                        [key]: null,
+                      })
+                    }
+                  >
+                    <XMarkIcon className="h-3 w-3" />
+                  </button>
+                </div>
+              )}
+            </div>
+          );
+      })}
+      {Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length && (
+        <button
+          type="button"
+          onClick={() =>
+            setFilters({
+              type: null,
+              state: null,
+              priority: null,
+              assignees: null,
+              labels: null,
+              created_by: null,
+            })
+          }
+          className="flex items-center gap-x-1 rounded-full border border-brand-base bg-brand-surface-2 px-3 py-1.5 text-xs"
+        >
+          <span className="font-medium">Clear all filters</span>
+          <XMarkIcon className="h-4 w-4" />
+        </button>
+      )}
+    </div>
+  );
+};
diff --git a/app/components/core/gpt-assistant-modal.tsx b/app/components/core/gpt-assistant-modal.tsx
new file mode 100644
index 000000000..37104e30f
--- /dev/null
+++ b/app/components/core/gpt-assistant-modal.tsx
@@ -0,0 +1,204 @@
+import { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+import dynamic from "next/dynamic";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// services
+import aiService from "services/ai.service";
+import trackEventServices from "services/track-event.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+
+import { IIssue, IPageBlock } from "types";
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  inset?: string;
+  content: string;
+  htmlContent?: string;
+  onResponse: (response: string) => void;
+  projectId: string;
+  block?: IPageBlock;
+  issue?: IIssue;
+};
+
+type FormData = {
+  prompt: string;
+  task: string;
+};
+
+const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
+  ssr: false,
+});
+
+export const GptAssistantModal: React.FC<Props> = ({
+  isOpen,
+  handleClose,
+  inset = "top-0 left-0",
+  content,
+  htmlContent,
+  onResponse,
+  projectId,
+  block,
+  issue,
+}) => {
+  const [response, setResponse] = useState("");
+  const [invalidResponse, setInvalidResponse] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const {
+    handleSubmit,
+    register,
+    reset,
+    setFocus,
+    formState: { isSubmitting },
+  } = useForm({
+    defaultValues: {
+      prompt: content,
+      task: "",
+    },
+  });
+
+  const onClose = () => {
+    handleClose();
+    setResponse("");
+    setInvalidResponse(false);
+    reset();
+  };
+
+  const handleResponse = async (formData: FormData) => {
+    if (!workspaceSlug || !projectId) return;
+
+    if (formData.task === "") {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Please enter some task to get AI assistance.",
+      });
+      return;
+    }
+
+    await aiService
+      .createGptTask(workspaceSlug as string, projectId as string, {
+        prompt: content && content !== "" ? content : htmlContent ?? "",
+        task: formData.task,
+      })
+      .then((res) => {
+        setResponse(res.response_html);
+        setFocus("task");
+
+        if (res.response === "") setInvalidResponse(true);
+        else setInvalidResponse(false);
+      })
+      .catch((err) => {
+        if (err.status === 429)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "You have reached the maximum number of requests of 50 requests per month per user.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Some error occurred. Please try again.",
+          });
+      });
+  };
+
+  useEffect(() => {
+    if (isOpen) setFocus("task");
+  }, [isOpen, setFocus]);
+
+  return (
+    <div
+      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-brand-base bg-brand-surface-2 p-4 shadow ${
+        isOpen ? "block" : "hidden"
+      }`}
+    >
+      {((content && content !== "") || htmlContent !== "<p></p>") && (
+        <div className="remirror-section text-sm">
+          Content:
+          <RemirrorRichTextEditor
+            value={htmlContent ?? <p>{content}</p>}
+            customClassName="-m-3"
+            noBorder
+            borderOnFocus={false}
+            editable={false}
+          />
+        </div>
+      )}
+      {response !== "" && (
+        <div className="text-sm page-block-section">
+          Response:
+          <RemirrorRichTextEditor
+            value={`<p>${response}</p>`}
+            customClassName="-mx-3 -my-3"
+            noBorder
+            borderOnFocus={false}
+            editable={false}
+          />
+        </div>
+      )}
+      {invalidResponse && (
+        <div className="text-sm text-red-500">
+          No response could be generated. This may be due to insufficient content or task
+          information. Please try again.
+        </div>
+      )}
+      <Input
+        type="text"
+        name="task"
+        register={register}
+        placeholder={`${
+          content && content !== ""
+            ? "Tell AI what action to perform on this content..."
+            : "Ask AI anything..."
+        }`}
+        autoComplete="off"
+      />
+      <div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}>
+        {response !== "" && (
+          <PrimaryButton
+            onClick={() => {
+              onResponse(response);
+              onClose();
+              if (block)
+                trackEventServices.trackUseGPTResponseEvent(
+                  block,
+                  "USE_GPT_RESPONSE_IN_PAGE_BLOCK"
+                );
+              else if (issue)
+                trackEventServices.trackUseGPTResponseEvent(issue, "USE_GPT_RESPONSE_IN_ISSUE");
+            }}
+          >
+            Use this response
+          </PrimaryButton>
+        )}
+        <div className="flex items-center gap-2">
+          <SecondaryButton onClick={onClose}>Close</SecondaryButton>
+          <PrimaryButton
+            type="button"
+            onClick={handleSubmit(handleResponse)}
+            loading={isSubmitting}
+          >
+            {isSubmitting
+              ? "Generating response..."
+              : response === ""
+              ? "Generate response"
+              : "Generate again"}
+          </PrimaryButton>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/core/image-picker-popover.tsx b/app/components/core/image-picker-popover.tsx
new file mode 100644
index 000000000..9a3d5ff2f
--- /dev/null
+++ b/app/components/core/image-picker-popover.tsx
@@ -0,0 +1,156 @@
+import React, { useEffect, useState, useRef } from "react";
+
+// next
+import Image from "next/image";
+
+// swr
+import useSWR from "swr";
+
+// headless ui
+import { Tab, Transition, Popover } from "@headlessui/react";
+
+// services
+import fileService from "services/file.service";
+
+// components
+import { Input, Spinner, PrimaryButton } from "components/ui";
+// hooks
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+
+const unsplashEnabled =
+  process.env.NEXT_PUBLIC_UNSPLASH_ENABLED === "true" ||
+  process.env.NEXT_PUBLIC_UNSPLASH_ENABLED === "1";
+
+const tabOptions = [
+  {
+    key: "unsplash",
+    title: "Unsplash",
+  },
+  {
+    key: "upload",
+    title: "Upload",
+  },
+];
+
+type Props = {
+  label: string | React.ReactNode;
+  value: string | null;
+  onChange: (data: string) => void;
+};
+
+export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange }) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchParams, setSearchParams] = useState("");
+  const [formData, setFormData] = useState({
+    search: "",
+  });
+
+  const { data: images } = useSWR(`UNSPLASH_IMAGES_${searchParams}`, () =>
+    fileService.getUnsplashImages(1, searchParams)
+  );
+
+  useOutsideClickDetector(ref, () => {
+    setIsOpen(false);
+  });
+
+  useEffect(() => {
+    if (!images || value !== null) return;
+    onChange(images[0].urls.regular);
+  }, [value, onChange, images]);
+
+  if (!unsplashEnabled) return null;
+
+  return (
+    <Popover className="relative z-[2]" ref={ref}>
+      <Popover.Button
+        className="rounded-md border border-brand-base bg-brand-surface-2 px-2 py-1 text-xs text-gray-700"
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        {label}
+      </Popover.Button>
+      <Transition
+        show={isOpen}
+        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"
+      >
+        <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md bg-brand-surface-2 shadow-lg">
+          <div className="h-96 w-80 overflow-auto rounded border border-brand-base bg-brand-surface-2 p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
+            <Tab.Group>
+              <Tab.List as="span" className="inline-block rounded bg-brand-surface-2 p-1">
+                {tabOptions.map((tab) => (
+                  <Tab
+                    key={tab.key}
+                    className={({ selected }) =>
+                      `rounded py-1 px-4 text-center text-sm outline-none transition-colors ${
+                        selected ? "bg-brand-accent text-white" : "text-brand-base"
+                      }`
+                    }
+                  >
+                    {tab.title}
+                  </Tab>
+                ))}
+              </Tab.List>
+              <Tab.Panels className="h-full w-full flex-1 overflow-y-auto overflow-x-hidden">
+                <Tab.Panel className="h-full w-full space-y-4">
+                  <div className="flex gap-x-2 pt-7">
+                    <Input
+                      name="search"
+                      className="text-sm"
+                      id="search"
+                      value={formData.search}
+                      onChange={(e) => setFormData({ ...formData, search: e.target.value })}
+                      placeholder="Search for images"
+                    />
+                    <PrimaryButton
+                      type="button"
+                      onClick={() => setSearchParams(formData.search)}
+                      className="bg-indigo-600"
+                      size="sm"
+                    >
+                      Search
+                    </PrimaryButton>
+                  </div>
+                  {images ? (
+                    <div className="grid grid-cols-4 gap-4">
+                      {images.map((image) => (
+                        <div
+                          key={image.id}
+                          className="relative col-span-2 aspect-video md:col-span-1"
+                        >
+                          <Image
+                            src={image.urls.small}
+                            alt={image.alt_description}
+                            layout="fill"
+                            objectFit="cover"
+                            className="cursor-pointer rounded"
+                            onClick={() => {
+                              setIsOpen(false);
+                              onChange(image.urls.regular);
+                            }}
+                          />
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="flex justify-center pt-20">
+                      <Spinner />
+                    </div>
+                  )}
+                </Tab.Panel>
+                <Tab.Panel className="flex h-full w-full flex-col items-center justify-center">
+                  <p>Coming Soon...</p>
+                </Tab.Panel>
+              </Tab.Panels>
+            </Tab.Group>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+};
diff --git a/app/components/core/image-upload-modal.tsx b/app/components/core/image-upload-modal.tsx
new file mode 100644
index 000000000..ba41f3efa
--- /dev/null
+++ b/app/components/core/image-upload-modal.tsx
@@ -0,0 +1,190 @@
+import React, { useCallback, useState } from "react";
+
+import NextImage from "next/image";
+import { useRouter } from "next/router";
+
+// react-dropzone
+import { useDropzone } from "react-dropzone";
+// headless ui
+import { Transition, Dialog } from "@headlessui/react";
+// services
+import fileServices from "services/file.service";
+// ui
+import { PrimaryButton, SecondaryButton } from "components/ui";
+// icons
+import { UserCircleIcon } from "components/icons";
+
+type Props = {
+  value?: string | null;
+  onClose: () => void;
+  isOpen: boolean;
+  onSuccess: (url: string) => void;
+  userImage?: boolean;
+};
+
+export const ImageUploadModal: React.FC<Props> = ({
+  value,
+  onSuccess,
+  isOpen,
+  onClose,
+  userImage,
+}) => {
+  const [image, setImage] = useState<File | null>(null);
+  const [isImageUploading, setIsImageUploading] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    setImage(acceptedFiles[0]);
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+  });
+
+  const handleSubmit = async () => {
+    setIsImageUploading(true);
+
+    if (!image || !workspaceSlug) return;
+
+    const formData = new FormData();
+    formData.append("asset", image);
+    formData.append("attributes", JSON.stringify({}));
+
+    if (userImage) {
+      fileServices
+        .uploadUserFile(formData)
+        .then((res) => {
+          const imageUrl = res.asset;
+
+          onSuccess(imageUrl);
+          setIsImageUploading(false);
+          setImage(null);
+
+          if (value) {
+            const index = value.indexOf(".com");
+            const asset = value.substring(index + 5);
+
+            fileServices.deleteUserFile(asset);
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    } else
+      fileServices
+        .uploadFile(workspaceSlug as string, formData)
+        .then((res) => {
+          const imageUrl = res.asset;
+          onSuccess(imageUrl);
+          setIsImageUploading(false);
+          setImage(null);
+
+          if (value) {
+            const index = value.indexOf(".com");
+            const asset = value.substring(index + 5);
+
+            fileServices.deleteFile(asset);
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+  };
+
+  const handleClose = () => {
+    setImage(null);
+    onClose();
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-30" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-30 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
+                <div className="space-y-5">
+                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                    Upload Image
+                  </Dialog.Title>
+                  <div className="space-y-3">
+                    <div className="flex items-center gap-3">
+                      <div
+                        {...getRootProps()}
+                        className={`relative block h-80 w-full rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
+                          (image === null && isDragActive) || !value
+                            ? "border-2 border-dashed border-brand-base hover:border-gray-400"
+                            : ""
+                        }`}
+                      >
+                        {image !== null || (value && value !== "") ? (
+                          <>
+                            <button
+                              type="button"
+                              className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded bg-brand-surface-1 px-2 py-0.5 text-xs font-medium text-gray-600"
+                            >
+                              Edit
+                            </button>
+                            <NextImage
+                              layout="fill"
+                              objectFit="cover"
+                              src={image ? URL.createObjectURL(image) : value ? value : ""}
+                              alt="image"
+                            />
+                          </>
+                        ) : (
+                          <>
+                            <UserCircleIcon className="mx-auto h-16 w-16 text-gray-400" />
+                            <span className="mt-2 block text-sm font-medium text-brand-base">
+                              {isDragActive
+                                ? "Drop image here to upload"
+                                : "Drag & drop image here"}
+                            </span>
+                          </>
+                        )}
+
+                        <input {...getInputProps()} type="text" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
+                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                  <PrimaryButton
+                    onClick={handleSubmit}
+                    disabled={!image}
+                    loading={isImageUploading}
+                  >
+                    {isImageUploading ? "Uploading..." : "Upload & Save"}
+                  </PrimaryButton>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/core/index.ts b/app/components/core/index.ts
new file mode 100644
index 000000000..eb547578c
--- /dev/null
+++ b/app/components/core/index.ts
@@ -0,0 +1,14 @@
+export * from "./board-view";
+export * from "./list-view";
+export * from "./sidebar";
+export * from "./bulk-delete-issues-modal";
+export * from "./existing-issues-list-modal";
+export * from "./gpt-assistant-modal";
+export * from "./image-upload-modal";
+export * from "./issues-view-filter";
+export * from "./issues-view";
+export * from "./link-modal";
+export * from "./image-picker-popover";
+export * from "./filter-list";
+export * from "./feeds";
+export * from "./theme-switch";
diff --git a/app/components/core/issues-view-filter.tsx b/app/components/core/issues-view-filter.tsx
new file mode 100644
index 000000000..49bf5cf6b
--- /dev/null
+++ b/app/components/core/issues-view-filter.tsx
@@ -0,0 +1,282 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+// hooks
+import useIssuesProperties from "hooks/use-issue-properties";
+import useIssuesView from "hooks/use-issues-view";
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
+// components
+import { SelectFilters } from "components/views";
+// ui
+import { CustomMenu } from "components/ui";
+// icons
+import {
+  ChevronDownIcon,
+  ListBulletIcon,
+  Squares2X2Icon,
+  CalendarDaysIcon,
+} from "@heroicons/react/24/outline";
+// helpers
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+// types
+import { Properties } from "types";
+// constants
+import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
+import useEstimateOption from "hooks/use-estimate-option";
+
+export const IssuesFilterView: React.FC = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, viewId } = router.query;
+
+  const {
+    issueView,
+    setIssueView,
+    groupByProperty,
+    setGroupByProperty,
+    orderBy,
+    setOrderBy,
+    showEmptyGroups,
+    setShowEmptyGroups,
+    filters,
+    setFilters,
+    resetFilterToDefault,
+    setNewFilterDefaultView,
+  } = useIssuesView();
+
+  const [properties, setProperties] = useIssuesProperties(
+    workspaceSlug as string,
+    projectId as string
+  );
+
+  const { isEstimateActive } = useEstimateOption();
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex items-center gap-x-1">
+        <button
+          type="button"
+          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+            issueView === "list" ? "bg-brand-surface-2" : ""
+          }`}
+          onClick={() => setIssueView("list")}
+        >
+          <ListBulletIcon className="h-4 w-4 text-brand-secondary" />
+        </button>
+        <button
+          type="button"
+          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+            issueView === "kanban" ? "bg-brand-surface-2" : ""
+          }`}
+          onClick={() => setIssueView("kanban")}
+        >
+          <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
+        </button>
+        <button
+          type="button"
+          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+            issueView === "calendar" ? "bg-brand-surface-2" : ""
+          }`}
+          onClick={() => setIssueView("calendar")}
+        >
+          <CalendarDaysIcon className="h-4 w-4 text-brand-secondary" />
+        </button>
+      </div>
+      <SelectFilters
+        filters={filters}
+        onSelect={(option) => {
+          const key = option.key as keyof typeof filters;
+
+          const valueExists = filters[key]?.includes(option.value);
+
+          if (valueExists) {
+            setFilters(
+              {
+                ...(filters ?? {}),
+                [option.key]: ((filters[key] ?? []) as any[])?.filter(
+                  (val) => val !== option.value
+                ),
+              },
+              !Boolean(viewId)
+            );
+          } else {
+            setFilters(
+              {
+                ...(filters ?? {}),
+                [option.key]: [...((filters[key] ?? []) as any[]), option.value],
+              },
+              !Boolean(viewId)
+            );
+          }
+        }}
+        direction="left"
+        height="rg"
+      />
+      <Popover className="relative">
+        {({ open }) => (
+          <>
+            <Popover.Button
+              className={`group flex items-center gap-2 rounded-md border border-brand-base bg-transparent px-3 py-1.5 text-xs hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none ${
+                open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
+              }`}
+            >
+              View
+              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+            </Popover.Button>
+
+            <Transition
+              as={React.Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel className="absolute right-0 z-20 mt-1 w-screen max-w-xs transform overflow-hidden rounded-lg border border-brand-base bg-brand-surface-1 p-3 shadow-lg">
+                <div className="relative divide-y-2 divide-brand-base">
+                  <div className="space-y-4 pb-3 text-xs">
+                    {issueView !== "calendar" && (
+                      <>
+                        <div className="flex items-center justify-between">
+                          <h4 className="text-brand-secondary">Group by</h4>
+                          <CustomMenu
+                            label={
+                              GROUP_BY_OPTIONS.find((option) => option.key === groupByProperty)
+                                ?.name ?? "Select"
+                            }
+                            width="lg"
+                          >
+                            {GROUP_BY_OPTIONS.map((option) =>
+                              issueView === "kanban" && option.key === null ? null : (
+                                <CustomMenu.MenuItem
+                                  key={option.key}
+                                  onClick={() => setGroupByProperty(option.key)}
+                                >
+                                  {option.name}
+                                </CustomMenu.MenuItem>
+                              )
+                            )}
+                          </CustomMenu>
+                        </div>
+                        <div className="flex items-center justify-between">
+                          <h4 className="text-brand-secondary">Order by</h4>
+                          <CustomMenu
+                            label={
+                              ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
+                              "Select"
+                            }
+                            width="lg"
+                          >
+                            {ORDER_BY_OPTIONS.map((option) =>
+                              groupByProperty === "priority" && option.key === "priority" ? null : (
+                                <CustomMenu.MenuItem
+                                  key={option.key}
+                                  onClick={() => {
+                                    setOrderBy(option.key);
+                                  }}
+                                >
+                                  {option.name}
+                                </CustomMenu.MenuItem>
+                              )
+                            )}
+                          </CustomMenu>
+                        </div>
+                      </>
+                    )}
+                    <div className="flex items-center justify-between">
+                      <h4 className="text-brand-secondary">Issue type</h4>
+                      <CustomMenu
+                        label={
+                          FILTER_ISSUE_OPTIONS.find((option) => option.key === filters.type)
+                            ?.name ?? "Select"
+                        }
+                        width="lg"
+                      >
+                        {FILTER_ISSUE_OPTIONS.map((option) => (
+                          <CustomMenu.MenuItem
+                            key={option.key}
+                            onClick={() =>
+                              setFilters({
+                                type: option.key,
+                              })
+                            }
+                          >
+                            {option.name}
+                          </CustomMenu.MenuItem>
+                        ))}
+                      </CustomMenu>
+                    </div>
+
+                    {issueView !== "calendar" && (
+                      <>
+                        <div className="flex items-center justify-between">
+                          <h4 className="text-brand-secondary">Show empty states</h4>
+                          <button
+                            type="button"
+                            className={`relative inline-flex h-3.5 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                              showEmptyGroups ? "bg-green-500" : "bg-brand-surface-2"
+                            }`}
+                            role="switch"
+                            aria-checked={showEmptyGroups}
+                            onClick={() => setShowEmptyGroups(!showEmptyGroups)}
+                          >
+                            <span className="sr-only">Show empty groups</span>
+                            <span
+                              aria-hidden="true"
+                              className={`inline-block h-2.5 w-2.5 transform rounded-full bg-brand-surface-2 shadow ring-0 transition duration-200 ease-in-out ${
+                                showEmptyGroups ? "translate-x-2.5" : "translate-x-0"
+                              }`}
+                            />
+                          </button>
+                        </div>
+                        <div className="relative flex justify-end gap-x-3">
+                          <button type="button" onClick={() => resetFilterToDefault()}>
+                            Reset to default
+                          </button>
+                          <button
+                            type="button"
+                            className="font-medium text-brand-accent"
+                            onClick={() => setNewFilterDefaultView()}
+                          >
+                            Set as default
+                          </button>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                  {issueView !== "calendar" && (
+                    <div className="space-y-2 py-3">
+                      <h4 className="text-sm text-brand-secondary">Display Properties</h4>
+                      <div className="flex flex-wrap items-center gap-2">
+                        {Object.keys(properties).map((key) => {
+                          if (key === "estimate" && !isEstimateActive) return null;
+
+                          return (
+                            <button
+                              key={key}
+                              type="button"
+                              className={`rounded border px-2 py-1 text-xs capitalize ${
+                                properties[key as keyof Properties]
+                                  ? "border-brand-accent bg-brand-accent text-brand-base"
+                                  : "border-brand-base"
+                              }`}
+                              onClick={() => setProperties(key as keyof Properties)}
+                            >
+                              {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </>
+        )}
+      </Popover>
+    </div>
+  );
+};
diff --git a/app/components/core/issues-view.tsx b/app/components/core/issues-view.tsx
new file mode 100644
index 000000000..240b7fbd0
--- /dev/null
+++ b/app/components/core/issues-view.tsx
@@ -0,0 +1,546 @@
+import { useCallback, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// react-beautiful-dnd
+import { DragDropContext, DropResult } from "react-beautiful-dnd";
+// services
+import issuesService from "services/issues.service";
+import stateService from "services/state.service";
+import modulesService from "services/modules.service";
+import trackEventServices from "services/track-event.service";
+// contexts
+import { useProjectMyMembership } from "contexts/project-member.context";
+// hooks
+import useToast from "hooks/use-toast";
+import useIssuesView from "hooks/use-issues-view";
+// components
+import { AllLists, AllBoards, FilterList } from "components/core";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { CreateUpdateViewModal } from "components/views";
+import { TransferIssues, TransferIssuesModal } from "components/cycles";
+// ui
+import { EmptySpace, EmptySpaceItem, EmptyState, PrimaryButton, Spinner } from "components/ui";
+import { CalendarView } from "./calendar-view";
+// icons
+import {
+  ListBulletIcon,
+  PlusIcon,
+  RectangleStackIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+// images
+import emptyIssue from "public/empty-state/empty-issue.svg";
+// helpers
+import { getStatesList } from "helpers/state.helper";
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IIssue, IIssueFilterOptions } from "types";
+// fetch-keys
+import {
+  CYCLE_DETAILS,
+  CYCLE_ISSUES_WITH_PARAMS,
+  MODULE_DETAILS,
+  MODULE_ISSUES_WITH_PARAMS,
+  PROJECT_ISSUES_LIST_WITH_PARAMS,
+  STATE_LIST,
+} from "constants/fetch-keys";
+// image
+
+type Props = {
+  type?: "issue" | "cycle" | "module";
+  openIssuesListModal?: () => void;
+  isCompleted?: boolean;
+};
+
+export const IssuesView: React.FC<Props> = ({
+  type = "issue",
+  openIssuesListModal,
+  isCompleted = false,
+}) => {
+  // create issue modal
+  const [createIssueModal, setCreateIssueModal] = useState(false);
+  const [createViewModal, setCreateViewModal] = useState<any>(null);
+  const [preloadedData, setPreloadedData] = useState<
+    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
+  >(undefined);
+
+  // update issue modal
+  const [editIssueModal, setEditIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<
+    (IIssue & { actionType: "edit" | "delete" }) | undefined
+  >(undefined);
+
+  // delete issue modal
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
+
+  // trash box
+  const [trashBox, setTrashBox] = useState(false);
+
+  // transfer issue
+  const [transferIssuesModal, setTransferIssuesModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
+
+  const { memberRole } = useProjectMyMembership();
+
+  const { setToastAlert } = useToast();
+
+  const {
+    groupedByIssues,
+    issueView,
+    groupByProperty: selectedGroup,
+    orderBy,
+    filters,
+    isNotEmpty,
+    setFilters,
+    params,
+  } = useIssuesView();
+
+  const { data: stateGroups } = useSWR(
+    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
+    workspaceSlug
+      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
+      : null
+  );
+  const states = getStatesList(stateGroups ?? {});
+
+  const handleDeleteIssue = useCallback(
+    (issue: IIssue) => {
+      setDeleteIssueModal(true);
+      setIssueToDelete(issue);
+    },
+    [setDeleteIssueModal, setIssueToDelete]
+  );
+
+  const handleOnDragEnd = useCallback(
+    (result: DropResult) => {
+      setTrashBox(false);
+
+      if (!result.destination || !workspaceSlug || !projectId || !groupedByIssues) return;
+
+      const { source, destination } = result;
+
+      const draggedItem = groupedByIssues[source.droppableId][source.index];
+
+      if (destination.droppableId === "trashBox") {
+        handleDeleteIssue(draggedItem);
+      } else {
+        if (orderBy === "sort_order") {
+          let newSortOrder = draggedItem.sort_order;
+
+          const destinationGroupArray = groupedByIssues[destination.droppableId];
+
+          if (destinationGroupArray.length !== 0) {
+            // check if dropping in the same group
+            if (source.droppableId === destination.droppableId) {
+              // check if dropping at beginning
+              if (destination.index === 0)
+                newSortOrder = destinationGroupArray[0].sort_order - 10000;
+              // check if dropping at last
+              else if (destination.index === destinationGroupArray.length - 1)
+                newSortOrder =
+                  destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
+              else {
+                if (destination.index > source.index)
+                  newSortOrder =
+                    (destinationGroupArray[source.index + 1].sort_order +
+                      destinationGroupArray[source.index + 2].sort_order) /
+                    2;
+                else if (destination.index < source.index)
+                  newSortOrder =
+                    (destinationGroupArray[source.index - 1].sort_order +
+                      destinationGroupArray[source.index - 2].sort_order) /
+                    2;
+              }
+            } else {
+              // check if dropping at beginning
+              if (destination.index === 0)
+                newSortOrder = destinationGroupArray[0].sort_order - 10000;
+              // check if dropping at last
+              else if (destination.index === destinationGroupArray.length)
+                newSortOrder =
+                  destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
+              else
+                newSortOrder =
+                  (destinationGroupArray[destination.index - 1].sort_order +
+                    destinationGroupArray[destination.index].sort_order) /
+                  2;
+            }
+          }
+
+          draggedItem.sort_order = newSortOrder;
+        }
+
+        const destinationGroup = destination.droppableId; // destination group id
+
+        if (orderBy === "sort_order" || source.droppableId !== destination.droppableId) {
+          // different group/column;
+
+          // source.droppableId !== destination.droppableId -> even if order by is not sort_order,
+          // if the issue is moved to a different group, then we will change the group of the
+          // dragged item(or issue)
+
+          if (selectedGroup === "priority") draggedItem.priority = destinationGroup;
+          else if (selectedGroup === "state") draggedItem.state = destinationGroup;
+        }
+
+        const sourceGroup = source.droppableId; // source group id
+
+        mutate<{
+          [key: string]: IIssue[];
+        }>(
+          cycleId
+            ? CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params)
+            : moduleId
+            ? MODULE_ISSUES_WITH_PARAMS(moduleId as string, params)
+            : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params),
+          (prevData) => {
+            if (!prevData) return prevData;
+
+            const sourceGroupArray = prevData[sourceGroup];
+            const destinationGroupArray = groupedByIssues[destinationGroup];
+
+            sourceGroupArray.splice(source.index, 1);
+            destinationGroupArray.splice(destination.index, 0, draggedItem);
+
+            return {
+              ...prevData,
+              [sourceGroup]: orderArrayBy(sourceGroupArray, orderBy),
+              [destinationGroup]: orderArrayBy(destinationGroupArray, orderBy),
+            };
+          },
+          false
+        );
+
+        // patch request
+        issuesService
+          .patchIssue(workspaceSlug as string, projectId as string, draggedItem.id, {
+            priority: draggedItem.priority,
+            state: draggedItem.state,
+            sort_order: draggedItem.sort_order,
+          })
+          .then((response) => {
+            const sourceStateBeforeDrag = states.find((state) => state.name === source.droppableId);
+
+            if (
+              sourceStateBeforeDrag?.group !== "completed" &&
+              response?.state_detail?.group === "completed"
+            )
+              trackEventServices.trackIssueMarkedAsDoneEvent({
+                workspaceSlug,
+                workspaceId: draggedItem.workspace,
+                projectName: draggedItem.project_detail.name,
+                projectIdentifier: draggedItem.project_detail.identifier,
+                projectId,
+                issueId: draggedItem.id,
+              });
+
+            if (cycleId) {
+              mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
+              mutate(CYCLE_DETAILS(cycleId as string));
+            }
+            if (moduleId) {
+              mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+              mutate(MODULE_DETAILS(moduleId as string));
+            }
+            mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
+          });
+      }
+    },
+    [
+      workspaceSlug,
+      cycleId,
+      moduleId,
+      groupedByIssues,
+      projectId,
+      selectedGroup,
+      orderBy,
+      handleDeleteIssue,
+      params,
+      states,
+    ]
+  );
+
+  const addIssueToState = useCallback(
+    (groupTitle: string) => {
+      setCreateIssueModal(true);
+      if (selectedGroup)
+        setPreloadedData({
+          [selectedGroup]: groupTitle,
+          actionType: "createIssue",
+        });
+      else setPreloadedData({ actionType: "createIssue" });
+    },
+    [setCreateIssueModal, setPreloadedData, selectedGroup]
+  );
+
+  const addIssueToDate = useCallback(
+    (date: string) => {
+      setCreateIssueModal(true);
+      setPreloadedData({
+        target_date: date,
+        actionType: "createIssue",
+      });
+    },
+    [setCreateIssueModal, setPreloadedData]
+  );
+
+  const makeIssueCopy = useCallback(
+    (issue: IIssue) => {
+      setCreateIssueModal(true);
+
+      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
+    },
+    [setCreateIssueModal, setPreloadedData]
+  );
+
+  const handleEditIssue = useCallback(
+    (issue: IIssue) => {
+      setEditIssueModal(true);
+      setIssueToEdit({
+        ...issue,
+        actionType: "edit",
+        cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
+        module: issue.issue_module ? issue.issue_module.module : null,
+      });
+    },
+    [setEditIssueModal, setIssueToEdit]
+  );
+
+  const removeIssueFromCycle = useCallback(
+    (bridgeId: string) => {
+      if (!workspaceSlug || !projectId || !cycleId) return;
+
+      mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
+
+      issuesService
+        .removeIssueFromCycle(
+          workspaceSlug as string,
+          projectId as string,
+          cycleId as string,
+          bridgeId
+        )
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+    [workspaceSlug, projectId, cycleId, params]
+  );
+
+  const removeIssueFromModule = useCallback(
+    (bridgeId: string) => {
+      if (!workspaceSlug || !projectId || !moduleId) return;
+
+      mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+
+      modulesService
+        .removeIssueFromModule(
+          workspaceSlug as string,
+          projectId as string,
+          moduleId as string,
+          bridgeId
+        )
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+    [workspaceSlug, projectId, moduleId, params]
+  );
+
+  const handleTrashBox = useCallback(
+    (isDragging: boolean) => {
+      if (isDragging && !trashBox) setTrashBox(true);
+    },
+    [trashBox, setTrashBox]
+  );
+
+  const nullFilters = Object.keys(filters).filter(
+    (key) => filters[key as keyof IIssueFilterOptions] === null
+  );
+
+  const areFiltersApplied =
+    Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length;
+
+  return (
+    <>
+      <CreateUpdateViewModal
+        isOpen={createViewModal !== null}
+        handleClose={() => setCreateViewModal(null)}
+        preLoadedData={createViewModal}
+      />
+      <CreateUpdateIssueModal
+        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
+        handleClose={() => setCreateIssueModal(false)}
+        prePopulateData={{
+          ...preloadedData,
+        }}
+      />
+      <CreateUpdateIssueModal
+        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
+        prePopulateData={{ ...issueToEdit }}
+        handleClose={() => setEditIssueModal(false)}
+        data={issueToEdit}
+      />
+      <DeleteIssueModal
+        handleClose={() => setDeleteIssueModal(false)}
+        isOpen={deleteIssueModal}
+        data={issueToDelete}
+      />
+      <TransferIssuesModal
+        handleClose={() => setTransferIssuesModal(false)}
+        isOpen={transferIssuesModal}
+      />
+      <>
+        <div
+          className={`flex items-center justify-between gap-2 ${
+            issueView === "list" ? (areFiltersApplied ? "mt-6 px-8" : "") : "-mt-2"
+          }`}
+        >
+          <FilterList filters={filters} setFilters={setFilters} />
+          {areFiltersApplied && (
+            <PrimaryButton
+              onClick={() => {
+                if (viewId) {
+                  setFilters({}, true);
+                  setToastAlert({
+                    title: "View updated",
+                    message: "Your view has been updated",
+                    type: "success",
+                  });
+                } else
+                  setCreateViewModal({
+                    query: filters,
+                  });
+              }}
+              className="flex items-center gap-2 text-sm"
+            >
+              {!viewId && <PlusIcon className="h-4 w-4" />}
+              {viewId ? "Update" : "Save"} view
+            </PrimaryButton>
+          )}
+        </div>
+        {areFiltersApplied && (
+          <div className={` ${issueView === "list" ? "mt-4" : "my-4"} border-t`} />
+        )}
+      </>
+
+      <DragDropContext onDragEnd={handleOnDragEnd}>
+        <StrictModeDroppable droppableId="trashBox">
+          {(provided, snapshot) => (
+            <div
+              className={`${
+                trashBox ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
+              } fixed top-9 right-9 z-30 flex h-28 w-96 flex-col items-center justify-center gap-2 rounded border-2 border-red-500/20 bg-red-500/20 p-3 text-xs font-medium italic text-red-500 ${
+                snapshot.isDraggingOver ? "bg-red-500/100 text-white" : ""
+              } duration-200`}
+              ref={provided.innerRef}
+              {...provided.droppableProps}
+            >
+              <TrashIcon className="h-4 w-4" />
+              Drop issue here to delete
+            </div>
+          )}
+        </StrictModeDroppable>
+        {groupedByIssues ? (
+          isNotEmpty ? (
+            <>
+              {isCompleted && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
+              {issueView === "list" ? (
+                <AllLists
+                  type={type}
+                  states={states}
+                  addIssueToState={addIssueToState}
+                  makeIssueCopy={makeIssueCopy}
+                  handleEditIssue={handleEditIssue}
+                  handleDeleteIssue={handleDeleteIssue}
+                  openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
+                  removeIssue={
+                    type === "cycle"
+                      ? removeIssueFromCycle
+                      : type === "module"
+                      ? removeIssueFromModule
+                      : null
+                  }
+                  isCompleted={isCompleted}
+                  userAuth={memberRole}
+                />
+              ) : issueView === "kanban" ? (
+                <AllBoards
+                  type={type}
+                  states={states}
+                  addIssueToState={addIssueToState}
+                  makeIssueCopy={makeIssueCopy}
+                  handleEditIssue={handleEditIssue}
+                  openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
+                  handleDeleteIssue={handleDeleteIssue}
+                  handleTrashBox={handleTrashBox}
+                  removeIssue={
+                    type === "cycle"
+                      ? removeIssueFromCycle
+                      : type === "module"
+                      ? removeIssueFromModule
+                      : null
+                  }
+                  isCompleted={isCompleted}
+                  userAuth={memberRole}
+                />
+              ) : (
+                <CalendarView addIssueToDate={addIssueToDate} />
+              )}
+            </>
+          ) : type === "issue" ? (
+            <EmptyState
+              type="issue"
+              title="Create New Issue"
+              description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
+              imgURL={emptyIssue}
+            />
+          ) : (
+            <div className="grid h-full w-full place-items-center px-4 sm:px-0">
+              <EmptySpace
+                title="You don't have any issue yet."
+                description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
+                Icon={RectangleStackIcon}
+              >
+                <EmptySpaceItem
+                  title="Create a new issue"
+                  description={
+                    <span>
+                      Use <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>{" "}
+                      shortcut to create a new issue
+                    </span>
+                  }
+                  Icon={PlusIcon}
+                  action={() => {
+                    const e = new KeyboardEvent("keydown", {
+                      key: "c",
+                    });
+                    document.dispatchEvent(e);
+                  }}
+                />
+                {openIssuesListModal && (
+                  <EmptySpaceItem
+                    title="Add an existing issue"
+                    description="Open list"
+                    Icon={ListBulletIcon}
+                    action={openIssuesListModal}
+                  />
+                )}
+              </EmptySpace>
+            </div>
+          )
+        ) : (
+          <div className="flex h-full w-full items-center justify-center">
+            <Spinner />
+          </div>
+        )}
+      </DragDropContext>
+    </>
+  );
+};
diff --git a/app/components/core/link-modal.tsx b/app/components/core/link-modal.tsx
new file mode 100644
index 000000000..3c22c2b1b
--- /dev/null
+++ b/app/components/core/link-modal.tsx
@@ -0,0 +1,128 @@
+import React from "react";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// ui
+import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+// types
+import type { IIssueLink, ModuleLink } from "types";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  onFormSubmit: (formData: IIssueLink | ModuleLink) => Promise<void>;
+};
+
+const defaultValues: ModuleLink = {
+  title: "",
+  url: "",
+};
+
+export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }) => {
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<ModuleLink>({
+    defaultValues,
+  });
+
+  const onSubmit = async (formData: ModuleLink) => {
+    await onFormSubmit(formData);
+
+    onClose();
+  };
+
+  const onClose = () => {
+    handleClose();
+    const timeout = setTimeout(() => {
+      reset(defaultValues);
+      clearTimeout(timeout);
+    }, 500);
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <form onSubmit={handleSubmit(onSubmit)}>
+                  <div>
+                    <div className="space-y-5">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                        Add Link
+                      </Dialog.Title>
+                      <div className="mt-2 space-y-3">
+                        <div>
+                          <Input
+                            id="url"
+                            label="URL"
+                            name="url"
+                            type="url"
+                            placeholder="Enter URL"
+                            autoComplete="off"
+                            error={errors.url}
+                            register={register}
+                            validations={{
+                              required: "URL is required",
+                            }}
+                          />
+                        </div>
+                        <div>
+                          <Input
+                            id="title"
+                            label="Title"
+                            name="title"
+                            type="text"
+                            placeholder="Enter title"
+                            autoComplete="off"
+                            error={errors.title}
+                            register={register}
+                            validations={{
+                              required: "Title is required",
+                            }}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-5 flex justify-end gap-2">
+                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
+                    <PrimaryButton onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+                      {isSubmitting ? "Adding Link..." : "Add Link"}
+                    </PrimaryButton>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/core/list-view/all-lists.tsx b/app/components/core/list-view/all-lists.tsx
new file mode 100644
index 000000000..2ea40ffe4
--- /dev/null
+++ b/app/components/core/list-view/all-lists.tsx
@@ -0,0 +1,69 @@
+// hooks
+import useIssuesView from "hooks/use-issues-view";
+// components
+import { SingleList } from "components/core/list-view/single-list";
+// types
+import { IIssue, IState, UserAuth } from "types";
+
+// types
+type Props = {
+  type: "issue" | "cycle" | "module";
+  states: IState[] | undefined;
+  addIssueToState: (groupTitle: string) => void;
+  makeIssueCopy: (issue: IIssue) => void;
+  handleEditIssue: (issue: IIssue) => void;
+  handleDeleteIssue: (issue: IIssue) => void;
+  openIssuesListModal?: (() => void) | null;
+  removeIssue: ((bridgeId: string) => void) | null;
+  isCompleted?: boolean;
+  userAuth: UserAuth;
+};
+
+export const AllLists: React.FC<Props> = ({
+  type,
+  states,
+  addIssueToState,
+  makeIssueCopy,
+  openIssuesListModal,
+  handleEditIssue,
+  handleDeleteIssue,
+  removeIssue,
+  isCompleted = false,
+  userAuth,
+}) => {
+  const { groupedByIssues, groupByProperty: selectedGroup, showEmptyGroups } = useIssuesView();
+
+  return (
+    <>
+      {groupedByIssues && (
+        <div>
+          {Object.keys(groupedByIssues).map((singleGroup) => {
+            const currentState =
+              selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;
+
+            if (!showEmptyGroups && groupedByIssues[singleGroup].length === 0) return null;
+
+            return (
+              <SingleList
+                key={singleGroup}
+                type={type}
+                groupTitle={singleGroup}
+                groupedByIssues={groupedByIssues}
+                selectedGroup={selectedGroup}
+                currentState={currentState}
+                addIssueToState={() => addIssueToState(singleGroup)}
+                makeIssueCopy={makeIssueCopy}
+                handleEditIssue={handleEditIssue}
+                handleDeleteIssue={handleDeleteIssue}
+                openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
+                removeIssue={removeIssue}
+                isCompleted={isCompleted}
+                userAuth={userAuth}
+              />
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/app/components/core/list-view/index.ts b/app/components/core/list-view/index.ts
new file mode 100644
index 000000000..c515ed1c2
--- /dev/null
+++ b/app/components/core/list-view/index.ts
@@ -0,0 +1,3 @@
+export * from "./all-lists";
+export * from "./single-issue";
+export * from "./single-list";
diff --git a/app/components/core/list-view/single-issue.tsx b/app/components/core/list-view/single-issue.tsx
new file mode 100644
index 000000000..0d34adf9e
--- /dev/null
+++ b/app/components/core/list-view/single-issue.tsx
@@ -0,0 +1,365 @@
+import React, { useCallback, useState } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// services
+import issuesService from "services/issues.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import {
+  ViewAssigneeSelect,
+  ViewDueDateSelect,
+  ViewEstimateSelect,
+  ViewPrioritySelect,
+  ViewStateSelect,
+} from "components/issues/view-select";
+// hooks
+import useIssueView from "hooks/use-issues-view";
+// ui
+import { Tooltip, CustomMenu, ContextMenu } from "components/ui";
+// icons
+import {
+  ClipboardDocumentCheckIcon,
+  LinkIcon,
+  PencilIcon,
+  TrashIcon,
+  XMarkIcon,
+  ArrowTopRightOnSquareIcon,
+  PaperClipIcon,
+} from "@heroicons/react/24/outline";
+// helpers
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+import { handleIssuesMutation } from "constants/issue";
+// types
+import { IIssue, Properties, UserAuth } from "types";
+// fetch-keys
+import {
+  CYCLE_DETAILS,
+  CYCLE_ISSUES_WITH_PARAMS,
+  MODULE_DETAILS,
+  MODULE_ISSUES_WITH_PARAMS,
+  PROJECT_ISSUES_LIST_WITH_PARAMS,
+} from "constants/fetch-keys";
+
+type Props = {
+  type?: string;
+  issue: IIssue;
+  properties: Properties;
+  groupTitle?: string;
+  editIssue: () => void;
+  index: number;
+  makeIssueCopy: () => void;
+  removeIssue?: (() => void) | null;
+  handleDeleteIssue: (issue: IIssue) => void;
+  isCompleted?: boolean;
+  userAuth: UserAuth;
+};
+
+export const SingleListIssue: React.FC<Props> = ({
+  type,
+  issue,
+  properties,
+  editIssue,
+  index,
+  makeIssueCopy,
+  removeIssue,
+  groupTitle,
+  handleDeleteIssue,
+  isCompleted = false,
+  userAuth,
+}) => {
+  // context menu
+  const [contextMenu, setContextMenu] = useState(false);
+  const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { groupByProperty: selectedGroup, orderBy, params } = useIssueView();
+
+  const partialUpdateIssue = useCallback(
+    (formData: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      if (cycleId)
+        mutate<
+          | {
+              [key: string]: IIssue[];
+            }
+          | IIssue[]
+        >(
+          CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params),
+          (prevData) =>
+            handleIssuesMutation(
+              formData,
+              groupTitle ?? "",
+              selectedGroup,
+              index,
+              orderBy,
+              prevData
+            ),
+          false
+        );
+
+      if (moduleId)
+        mutate<
+          | {
+              [key: string]: IIssue[];
+            }
+          | IIssue[]
+        >(
+          MODULE_ISSUES_WITH_PARAMS(moduleId as string, params),
+          (prevData) =>
+            handleIssuesMutation(
+              formData,
+              groupTitle ?? "",
+              selectedGroup,
+              index,
+              orderBy,
+              prevData
+            ),
+          false
+        );
+
+      mutate<
+        | {
+            [key: string]: IIssue[];
+          }
+        | IIssue[]
+      >(
+        PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params),
+        (prevData) =>
+          handleIssuesMutation(formData, groupTitle ?? "", selectedGroup, index, orderBy, prevData),
+        false
+      );
+
+      issuesService
+        .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
+        .then(() => {
+          if (cycleId) {
+            mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
+            mutate(CYCLE_DETAILS(cycleId as string));
+          } else if (moduleId) {
+            mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+            mutate(MODULE_DETAILS(moduleId as string));
+          } else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
+        });
+    },
+    [
+      workspaceSlug,
+      projectId,
+      cycleId,
+      moduleId,
+      issue,
+      groupTitle,
+      index,
+      selectedGroup,
+      orderBy,
+      params,
+    ]
+  );
+
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
+    });
+  };
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || isCompleted;
+
+  return (
+    <>
+      <ContextMenu
+        position={contextMenuPosition}
+        title="Quick actions"
+        isOpen={contextMenu}
+        setIsOpen={setContextMenu}
+      >
+        {!isNotAllowed && (
+          <>
+            <ContextMenu.Item Icon={PencilIcon} onClick={editIssue}>
+              Edit issue
+            </ContextMenu.Item>
+            <ContextMenu.Item Icon={ClipboardDocumentCheckIcon} onClick={makeIssueCopy}>
+              Make a copy...
+            </ContextMenu.Item>
+            <ContextMenu.Item Icon={TrashIcon} onClick={() => handleDeleteIssue(issue)}>
+              Delete issue
+            </ContextMenu.Item>
+          </>
+        )}
+        <ContextMenu.Item Icon={LinkIcon} onClick={handleCopyText}>
+          Copy issue link
+        </ContextMenu.Item>
+        <a
+          href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <ContextMenu.Item Icon={ArrowTopRightOnSquareIcon}>
+            Open issue in new tab
+          </ContextMenu.Item>
+        </a>
+      </ContextMenu>
+      <div
+        className="flex items-center justify-between gap-2 border-b border-brand-base bg-brand-base px-4 py-2.5 last:border-b-0"
+        onContextMenu={(e) => {
+          e.preventDefault();
+          setContextMenu(true);
+          setContextMenuPosition({ x: e.pageX, y: e.pageY });
+        }}
+      >
+        <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
+          <a className="group relative flex items-center gap-2">
+            {properties.key && (
+              <Tooltip
+                tooltipHeading="Issue ID"
+                tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
+              >
+                <span className="flex-shrink-0 text-xs text-brand-secondary">
+                  {issue.project_detail?.identifier}-{issue.sequence_id}
+                </span>
+              </Tooltip>
+            )}
+            <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
+              <span className="text-[0.825rem] text-brand-base">
+                {truncateText(issue.name, 50)}
+              </span>
+            </Tooltip>
+          </a>
+        </Link>
+
+        <div className="flex flex-wrap items-center gap-2 text-xs">
+          {properties.priority && (
+            <ViewPrioritySelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              position="right"
+              isNotAllowed={isNotAllowed}
+            />
+          )}
+          {properties.state && (
+            <ViewStateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              position="right"
+              isNotAllowed={isNotAllowed}
+            />
+          )}
+          {properties.due_date && (
+            <ViewDueDateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              isNotAllowed={isNotAllowed}
+            />
+          )}
+          {properties.sub_issue_count && (
+            <div className="flex items-center gap-1 rounded-md border border-brand-base px-3 py-1 text-xs text-brand-secondary shadow-sm">
+              {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
+            </div>
+          )}
+          {properties.labels && issue.label_details.length > 0 ? (
+            <div className="flex flex-wrap gap-1">
+              {issue.label_details.map((label) => (
+                <span
+                  key={label.id}
+                  className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary"
+                >
+                  <span
+                    className="h-1.5 w-1.5  rounded-full"
+                    style={{
+                      backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
+                    }}
+                  />
+                  {label.name}
+                </span>
+              ))}
+            </div>
+          ) : (
+            ""
+          )}
+          {properties.assignee && (
+            <ViewAssigneeSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              position="right"
+              isNotAllowed={isNotAllowed}
+            />
+          )}
+          {properties.estimate && (
+            <ViewEstimateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              position="right"
+              isNotAllowed={isNotAllowed}
+            />
+          )}
+          {properties.link && (
+            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+              <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
+                <div className="flex items-center gap-1 text-gray-500">
+                  <LinkIcon className="h-3.5 w-3.5 text-gray-500" />
+                  {issue.link_count}
+                </div>
+              </Tooltip>
+            </div>
+          )}
+          {properties.attachment_count && (
+            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+              <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
+                <div className="flex items-center gap-1 text-gray-500">
+                  <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-gray-500" />
+                  {issue.attachment_count}
+                </div>
+              </Tooltip>
+            </div>
+          )}
+          {type && !isNotAllowed && (
+            <CustomMenu width="auto" ellipsis>
+              <CustomMenu.MenuItem onClick={editIssue}>
+                <div className="flex items-center justify-start gap-2">
+                  <PencilIcon className="h-4 w-4" />
+                  <span>Edit issue</span>
+                </div>
+              </CustomMenu.MenuItem>
+              {type !== "issue" && removeIssue && (
+                <CustomMenu.MenuItem onClick={removeIssue}>
+                  <div className="flex items-center justify-start gap-2">
+                    <XMarkIcon className="h-4 w-4" />
+                    <span>Remove from {type}</span>
+                  </div>
+                </CustomMenu.MenuItem>
+              )}
+              <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
+                <div className="flex items-center justify-start gap-2">
+                  <TrashIcon className="h-4 w-4" />
+                  <span>Delete issue</span>
+                </div>
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem onClick={handleCopyText}>
+                <div className="flex items-center justify-start gap-2">
+                  <LinkIcon className="h-4 w-4" />
+                  <span>Copy issue link</span>
+                </div>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/app/components/core/list-view/single-list.tsx b/app/components/core/list-view/single-list.tsx
new file mode 100644
index 000000000..c39e6a56b
--- /dev/null
+++ b/app/components/core/list-view/single-list.tsx
@@ -0,0 +1,227 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// headless ui
+import { Disclosure, Transition } from "@headlessui/react";
+// services
+import issuesService from "services/issues.service";
+import projectService from "services/project.service";
+// hooks
+import useIssuesProperties from "hooks/use-issue-properties";
+// components
+import { SingleListIssue } from "components/core";
+// ui
+import { Avatar, CustomMenu } from "components/ui";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+import { getPriorityIcon, getStateGroupIcon } from "components/icons";
+// helpers
+import { addSpaceIfCamelCase } from "helpers/string.helper";
+// types
+import { IIssue, IIssueLabels, IState, TIssueGroupByOptions, UserAuth } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
+
+type Props = {
+  type?: "issue" | "cycle" | "module";
+  currentState?: IState | null;
+  bgColor?: string;
+  groupTitle: string;
+  groupedByIssues: {
+    [key: string]: IIssue[];
+  };
+  selectedGroup: TIssueGroupByOptions;
+  addIssueToState: () => void;
+  makeIssueCopy: (issue: IIssue) => void;
+  handleEditIssue: (issue: IIssue) => void;
+  handleDeleteIssue: (issue: IIssue) => void;
+  openIssuesListModal?: (() => void) | null;
+  removeIssue: ((bridgeId: string) => void) | null;
+  isCompleted?: boolean;
+  userAuth: UserAuth;
+};
+
+export const SingleList: React.FC<Props> = ({
+  type,
+  currentState,
+  bgColor,
+  groupTitle,
+  groupedByIssues,
+  selectedGroup,
+  addIssueToState,
+  makeIssueCopy,
+  handleEditIssue,
+  handleDeleteIssue,
+  openIssuesListModal,
+  removeIssue,
+  isCompleted = false,
+  userAuth,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
+
+  const { data: issueLabels } = useSWR<IIssueLabels[]>(
+    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const getGroupTitle = () => {
+    let title = addSpaceIfCamelCase(groupTitle);
+
+    switch (selectedGroup) {
+      case "state":
+        title = addSpaceIfCamelCase(currentState?.name ?? "");
+        break;
+      case "labels":
+        title = issueLabels?.find((label) => label.id === groupTitle)?.name ?? "None";
+        break;
+      case "created_by":
+        const member = members?.find((member) => member.member.id === groupTitle)?.member;
+        title =
+          member?.first_name && member.first_name !== ""
+            ? `${member.first_name} ${member.last_name}`
+            : member?.email ?? "";
+        break;
+    }
+
+    return title;
+  };
+
+  const getGroupIcon = () => {
+    let icon;
+
+    switch (selectedGroup) {
+      case "state":
+        icon = currentState && getStateGroupIcon(currentState.group, "16", "16", bgColor);
+        break;
+      case "priority":
+        icon = getPriorityIcon(groupTitle, "text-lg");
+        break;
+      case "labels":
+        const labelColor =
+          issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
+        icon = (
+          <span
+            className="h-3 w-3 flex-shrink-0 rounded-full"
+            style={{ backgroundColor: labelColor }}
+          />
+        );
+        break;
+      case "created_by":
+        const member = members?.find((member) => member.member.id === groupTitle)?.member;
+        icon = <Avatar user={member} height="24px" width="24px" fontSize="12px" />;
+
+        break;
+    }
+
+    return icon;
+  };
+
+  return (
+    <Disclosure as="div" defaultOpen>
+      {({ open }) => (
+        <div>
+          <div className="flex items-center justify-between px-4 py-2.5">
+            <Disclosure.Button>
+              <div className="flex items-center gap-x-3">
+                {selectedGroup !== null && (
+                  <div className="flex items-center">{getGroupIcon()}</div>
+                )}
+                {selectedGroup !== null ? (
+                  <h2 className="text-sm font-semibold capitalize leading-6 text-brand-base">
+                    {getGroupTitle()}
+                  </h2>
+                ) : (
+                  <h2 className="font-medium leading-5">All Issues</h2>
+                )}
+                <span className="text-brand-2 min-w-[2.5rem] rounded-full bg-brand-surface-2 py-1 text-center text-xs">
+                  {groupedByIssues[groupTitle as keyof IIssue].length}
+                </span>
+              </div>
+            </Disclosure.Button>
+            {type === "issue" ? (
+              <button
+                type="button"
+                className="p-1  text-brand-secondary hover:bg-brand-surface-2"
+                onClick={addIssueToState}
+              >
+                <PlusIcon className="h-4 w-4" />
+              </button>
+            ) : isCompleted ? (
+              ""
+            ) : (
+              <CustomMenu
+                customButton={
+                  <div className="flex cursor-pointer items-center">
+                    <PlusIcon className="h-4 w-4" />
+                  </div>
+                }
+                optionsPosition="right"
+                noBorder
+              >
+                <CustomMenu.MenuItem onClick={addIssueToState}>Create new</CustomMenu.MenuItem>
+                {openIssuesListModal && (
+                  <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                    Add an existing issue
+                  </CustomMenu.MenuItem>
+                )}
+              </CustomMenu>
+            )}
+          </div>
+          <Transition
+            show={open}
+            enter="transition duration-100 ease-out"
+            enterFrom="transform opacity-0"
+            enterTo="transform opacity-100"
+            leave="transition duration-75 ease-out"
+            leaveFrom="transform opacity-100"
+            leaveTo="transform opacity-0"
+          >
+            <Disclosure.Panel>
+              {groupedByIssues[groupTitle] ? (
+                groupedByIssues[groupTitle].length > 0 ? (
+                  groupedByIssues[groupTitle].map((issue, index) => (
+                    <SingleListIssue
+                      key={issue.id}
+                      type={type}
+                      issue={issue}
+                      properties={properties}
+                      groupTitle={groupTitle}
+                      index={index}
+                      editIssue={() => handleEditIssue(issue)}
+                      makeIssueCopy={() => makeIssueCopy(issue)}
+                      handleDeleteIssue={handleDeleteIssue}
+                      removeIssue={() => {
+                        if (removeIssue !== null && issue.bridge_id) removeIssue(issue.bridge_id);
+                      }}
+                      isCompleted={isCompleted}
+                      userAuth={userAuth}
+                    />
+                  ))
+                ) : (
+                  <p className="bg-brand-base px-4 py-2.5 text-sm text-brand-secondary">
+                    No issues.
+                  </p>
+                )
+              ) : (
+                <div className="flex h-full w-full items-center justify-center">Loading...</div>
+              )}
+            </Disclosure.Panel>
+          </Transition>
+        </div>
+      )}
+    </Disclosure>
+  );
+};
diff --git a/app/components/core/sidebar/index.ts b/app/components/core/sidebar/index.ts
new file mode 100644
index 000000000..c5357f576
--- /dev/null
+++ b/app/components/core/sidebar/index.ts
@@ -0,0 +1,3 @@
+export * from "./links-list";
+export * from "./sidebar-progress-stats";
+export * from "./single-progress-stats";
diff --git a/app/components/core/sidebar/links-list.tsx b/app/components/core/sidebar/links-list.tsx
new file mode 100644
index 000000000..951332f3f
--- /dev/null
+++ b/app/components/core/sidebar/links-list.tsx
@@ -0,0 +1,72 @@
+import Link from "next/link";
+
+// icons
+import { ArrowTopRightOnSquareIcon, LinkIcon, TrashIcon } from "@heroicons/react/24/outline";
+// helpers
+import { timeAgo } from "helpers/date-time.helper";
+// types
+import { IUserLite, UserAuth } from "types";
+
+type Props = {
+  links: {
+    id: string;
+    created_at: Date;
+    created_by: string;
+    created_by_detail: IUserLite;
+    metadata: any;
+    title: string;
+    url: string;
+  }[];
+  handleDeleteLink: (linkId: string) => void;
+  userAuth: UserAuth;
+};
+
+export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }) => {
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  return (
+    <>
+      {links.map((link) => (
+        <div key={link.id} className="relative">
+          {!isNotAllowed && (
+            <div className="absolute top-1.5 right-1.5 z-[1] flex items-center gap-1">
+              <Link href={link.url}>
+                <a
+                  className="grid h-7 w-7 place-items-center rounded bg-brand-surface-1 p-1 outline-none hover:bg-brand-surface-2"
+                  target="_blank"
+                >
+                  <ArrowTopRightOnSquareIcon className="h-4 w-4 text-brand-secondary" />
+                </a>
+              </Link>
+              <button
+                type="button"
+                className="grid h-7 w-7 place-items-center rounded bg-brand-surface-1 p-1 text-red-500 outline-none duration-300 hover:bg-red-500/20"
+                onClick={() => handleDeleteLink(link.id)}
+              >
+                <TrashIcon className="h-4 w-4" />
+              </button>
+            </div>
+          )}
+          <Link href={link.url}>
+            <a className="relative flex gap-2 rounded-md bg-brand-base p-2" target="_blank">
+              <div className="mt-0.5">
+                <LinkIcon className="h-3.5 w-3.5" />
+              </div>
+              <div>
+                <h5 className="w-4/5 break-all">{link.title}</h5>
+                <p className="mt-0.5 text-brand-secondary">
+                  Added {timeAgo(link.created_at)}
+                  <br />
+                  by{" "}
+                  {link.created_by_detail.is_bot
+                    ? link.created_by_detail.first_name + " Bot"
+                    : link.created_by_detail.email}
+                </p>
+              </div>
+            </a>
+          </Link>
+        </div>
+      ))}
+    </>
+  );
+};
diff --git a/app/components/core/sidebar/progress-chart.tsx b/app/components/core/sidebar/progress-chart.tsx
new file mode 100644
index 000000000..f8454650e
--- /dev/null
+++ b/app/components/core/sidebar/progress-chart.tsx
@@ -0,0 +1,94 @@
+import React from "react";
+
+import { XAxis, YAxis, Tooltip, AreaChart, Area, ReferenceLine, TooltipProps} from "recharts";
+
+//types
+import { IIssue } from "types";
+import { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
+// helper
+import { getDatesInRange, renderShortNumericDateFormat } from "helpers/date-time.helper";
+
+type Props = {
+  issues: IIssue[];
+  start: string;
+  end: string;
+};
+
+const ProgressChart: React.FC<Props> = ({ issues, start, end }) => {
+  const startDate = new Date(start);
+  const endDate = new Date(end);
+  const getChartData = () => {
+    const dateRangeArray = getDatesInRange(startDate, endDate);
+    let count = 0;
+    const dateWiseData = dateRangeArray.map((d) => {
+      const current = d.toISOString().split("T")[0];
+      const total = issues.length;
+      const currentData = issues.filter(
+        (i) => i.completed_at && i.completed_at.toString().split("T")[0] === current
+      );
+      count = currentData ? currentData.length + count : count;
+
+      return {
+        currentDate: renderShortNumericDateFormat(current),
+        currentDateData: currentData,
+        pending: new Date(current) < new Date() ? total - count : null,
+      };
+    });
+    return dateWiseData;
+  };
+
+  const CustomTooltip = ({ active, payload }: TooltipProps<ValueType, NameType>) => {
+    if (active && payload && payload.length) {
+      return (
+        <div className="rounded-sm bg-brand-surface-1 p-1 text-xs text-brand-base">
+          <p>{payload[0].payload.currentDate}</p>
+        </div>
+      );
+    }
+    return null;
+  };
+  const ChartData = getChartData();
+  return (
+    <div className="absolute -left-4  flex h-full w-full  items-center justify-center text-xs">
+      <AreaChart
+        width={360}
+        height={160}
+        data={ChartData}
+        margin={{
+          top: 12,
+          right: 12,
+          left: 0,
+          bottom: 12,
+        }}
+      >
+        <defs>
+          <linearGradient id="linearblue" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="#3F76FF" stopOpacity={0.7} />
+            <stop offset="50%" stopColor="#3F76FF" stopOpacity={0.1} />
+            <stop offset="100%" stopColor="#3F76FF" stopOpacity={0} />
+          </linearGradient>
+        </defs>
+        <XAxis dataKey="currentDate" tickSize={10} minTickGap={10} />
+        <YAxis tickSize={10} minTickGap={10} allowDecimals={false} />
+        <Tooltip content={<CustomTooltip />} />
+        <Area
+          type="monotone"
+          dataKey="pending"
+          stroke="#8884d8"
+          fill="url(#linearblue)"
+          activeDot={{ r: 8 }}
+        />
+        <ReferenceLine
+          stroke="#16a34a"
+          strokeDasharray="3 3"
+          segment={[
+            { x: `${renderShortNumericDateFormat(endDate)}`, y: 0 },
+            { x: `${renderShortNumericDateFormat(startDate)}`, y: issues.length },
+          ]}
+        />
+      </AreaChart>
+    </div>
+  );
+};
+
+export default ProgressChart;
diff --git a/app/components/core/sidebar/sidebar-progress-stats.tsx b/app/components/core/sidebar/sidebar-progress-stats.tsx
new file mode 100644
index 000000000..84b79e4df
--- /dev/null
+++ b/app/components/core/sidebar/sidebar-progress-stats.tsx
@@ -0,0 +1,251 @@
+import React from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// headless ui
+import { Tab } from "@headlessui/react";
+// services
+import issuesServices from "services/issues.service";
+import projectService from "services/project.service";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+import useIssuesView from "hooks/use-issues-view";
+// components
+import { SingleProgressStats } from "components/core";
+// ui
+import { Avatar } from "components/ui";
+// icons
+import User from "public/user.png";
+// types
+import { IIssue, IIssueLabels, IModule, UserAuth } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
+// types
+type Props = {
+  groupedIssues: any;
+  issues: IIssue[];
+  module?: IModule;
+  userAuth?: UserAuth;
+};
+
+const stateGroupColours: {
+  [key: string]: string;
+} = {
+  backlog: "#3f76ff",
+  unstarted: "#ff9e9e",
+  started: "#d687ff",
+  cancelled: "#ff5353",
+  completed: "#096e8d",
+};
+
+export const SidebarProgressStats: React.FC<Props> = ({
+  groupedIssues,
+  issues,
+  module,
+  userAuth,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { filters, setFilters } = useIssuesView();
+
+  const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees");
+
+  const { data: issueLabels } = useSWR<IIssueLabels[]>(
+    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(workspaceSlug as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const currentValue = (tab: string | null) => {
+    switch (tab) {
+      case "Assignees":
+        return 0;
+      case "Labels":
+        return 1;
+      case "States":
+        return 2;
+
+      default:
+        return 3;
+    }
+  };
+  return (
+    <Tab.Group
+      defaultIndex={currentValue(tab)}
+      onChange={(i) => {
+        switch (i) {
+          case 0:
+            return setTab("Assignees");
+          case 1:
+            return setTab("Labels");
+          case 2:
+            return setTab("States");
+
+          default:
+            return setTab("States");
+        }
+      }}
+    >
+      <Tab.List
+        as="div"
+        className={`flex w-full items-center justify-between rounded-md bg-brand-surface-1 px-1 py-1.5 
+        ${module ? "text-xs" : "text-sm"} `}
+      >
+        <Tab
+          className={({ selected }) =>
+            `w-full rounded px-3 py-1 text-brand-base  ${
+              selected ? " bg-brand-accent text-white" : "  hover:bg-brand-surface-2"
+            }`
+          }
+        >
+          Assignees
+        </Tab>
+        <Tab
+          className={({ selected }) =>
+            `w-full rounded px-3 py-1 text-brand-base ${
+              selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
+            }`
+          }
+        >
+          Labels
+        </Tab>
+        <Tab
+          className={({ selected }) =>
+            `w-full rounded px-3 py-1  text-brand-base ${
+              selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
+            }`
+          }
+        >
+          States
+        </Tab>
+      </Tab.List>
+      <Tab.Panels className="flex w-full items-center justify-between pt-1">
+        <Tab.Panel as="div" className="flex w-full flex-col text-xs">
+          {members?.map((member, index) => {
+            const totalArray = issues?.filter((i) => i.assignees?.includes(member.member.id));
+            const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
+
+            if (totalArray.length > 0) {
+              return (
+                <SingleProgressStats
+                  key={index}
+                  title={
+                    <>
+                      <Avatar user={member.member} />
+                      <span>{member.member.first_name}</span>
+                    </>
+                  }
+                  completed={completeArray.length}
+                  total={totalArray.length}
+                  onClick={() => {
+                    if (filters.assignees?.includes(member.member.id))
+                      setFilters({
+                        assignees: filters.assignees?.filter((a) => a !== member.member.id),
+                      });
+                    else
+                      setFilters({ assignees: [...(filters?.assignees ?? []), member.member.id] });
+                  }}
+                  selected={filters.assignees?.includes(member.member.id)}
+                />
+              );
+            }
+          })}
+          {issues?.filter((i) => i.assignees?.length === 0).length > 0 ? (
+            <SingleProgressStats
+              title={
+                <>
+                  <div className="h-5 w-5 rounded-full border-2 border-white bg-brand-surface-2">
+                    <Image
+                      src={User}
+                      height="100%"
+                      width="100%"
+                      className="rounded-full"
+                      alt="User"
+                    />
+                  </div>
+                  <span>No assignee</span>
+                </>
+              }
+              completed={
+                issues?.filter(
+                  (i) => i.state_detail.group === "completed" && i.assignees?.length === 0
+                ).length
+              }
+              total={issues?.filter((i) => i.assignees?.length === 0).length}
+            />
+          ) : (
+            ""
+          )}
+        </Tab.Panel>
+        <Tab.Panel as="div" className="w-full space-y-1">
+          {issueLabels?.map((label, index) => {
+            const totalArray = issues?.filter((i) => i.labels?.includes(label.id));
+            const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
+
+            if (totalArray.length > 0) {
+              return (
+                <SingleProgressStats
+                  key={index}
+                  title={
+                    <div className="flex items-center gap-2">
+                      <span
+                        className="block h-3 w-3 rounded-full"
+                        style={{
+                          backgroundColor:
+                            label.color && label.color !== "" ? label.color : "#000000",
+                        }}
+                      />
+                      <span className="text-xs capitalize">{label.name}</span>
+                    </div>
+                  }
+                  completed={completeArray.length}
+                  total={totalArray.length}
+                  onClick={() => {
+                    if (filters.labels?.includes(label.id))
+                      setFilters({
+                        labels: filters.labels?.filter((l) => l !== label.id),
+                      });
+                    else setFilters({ labels: [...(filters?.labels ?? []), label.id] });
+                  }}
+                  selected={filters.labels?.includes(label.id)}
+                />
+              );
+            }
+          })}
+        </Tab.Panel>
+        <Tab.Panel as="div" className="flex w-full flex-col ">
+          {Object.keys(groupedIssues).map((group, index) => (
+            <SingleProgressStats
+              key={index}
+              title={
+                <div className="flex items-center gap-2">
+                  <span
+                    className="block h-3 w-3 rounded-full "
+                    style={{
+                      backgroundColor: stateGroupColours[group],
+                    }}
+                  />
+                  <span className="text-xs capitalize">{group}</span>
+                </div>
+              }
+              completed={groupedIssues[group]}
+              total={issues.length}
+            />
+          ))}
+        </Tab.Panel>
+      </Tab.Panels>
+    </Tab.Group>
+  );
+};
diff --git a/app/components/core/sidebar/single-progress-stats.tsx b/app/components/core/sidebar/single-progress-stats.tsx
new file mode 100644
index 000000000..3e672ce8b
--- /dev/null
+++ b/app/components/core/sidebar/single-progress-stats.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+import { ProgressBar } from "components/ui";
+
+type TSingleProgressStatsProps = {
+  title: any;
+  completed: number;
+  total: number;
+  onClick?: () => void;
+  selected?: boolean;
+};
+
+export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
+  title,
+  completed,
+  total,
+  onClick,
+  selected = false,
+}) => (
+  <div
+    className={`flex w-full items-center justify-between rounded p-2 text-xs ${
+      onClick ? "cursor-pointer hover:bg-brand-surface-1" : ""
+    } ${selected ? "bg-brand-surface-1" : ""}`}
+    onClick={onClick}
+  >
+    <div className="flex w-1/2 items-center justify-start gap-2">{title}</div>
+    <div className="flex w-1/2 items-center justify-end gap-1 px-2">
+      <div className="flex h-5 items-center justify-center gap-1">
+        <span className="h-4 w-4 ">
+          <ProgressBar value={completed} maxValue={total} />
+        </span>
+        <span className="w-8 text-right">{Math.floor((completed / total) * 100)}%</span>
+      </div>
+      <span>of</span>
+      <span>{total}</span>
+    </div>
+  </div>
+);
diff --git a/app/components/core/theme-switch.tsx b/app/components/core/theme-switch.tsx
new file mode 100644
index 000000000..f93b1998e
--- /dev/null
+++ b/app/components/core/theme-switch.tsx
@@ -0,0 +1,60 @@
+import { useState, useEffect, ChangeEvent } from "react";
+import { useTheme } from "next-themes";
+import { THEMES_OBJ } from "constants/themes";
+import { CustomSelect } from "components/ui";
+import { CustomThemeModal } from "./custom-theme-modal";
+
+export const ThemeSwitch = () => {
+  const [mounted, setMounted] = useState(false);
+  const [customThemeModal, setCustomThemeModal] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <>
+      <CustomSelect
+        value={theme}
+        label={theme ? THEMES_OBJ.find((t) => t.value === theme)?.label : "Select your theme"}
+        onChange={({ value, type }: { value: string; type: string }) => {
+          if (value === "custom") {
+            if (!customThemeModal) setCustomThemeModal(true);
+          } else {
+            const cssVars = [
+              "--color-bg-base",
+              "--color-bg-surface-1",
+              "--color-bg-surface-2",
+
+              "--color-border",
+              "--color-bg-sidebar",
+              "--color-accent",
+
+              "--color-text-base",
+              "--color-text-secondary",
+            ];
+            cssVars.forEach((cssVar) => document.documentElement.style.removeProperty(cssVar));
+          }
+          document.documentElement.style.setProperty("color-scheme", type);
+          setTheme(value);
+        }}
+        input
+        width="w-full"
+        position="right"
+      >
+        {THEMES_OBJ.map(({ value, label, type }) => (
+          <CustomSelect.Option key={value} value={{ value, type }}>
+            {label}
+          </CustomSelect.Option>
+        ))}
+      </CustomSelect>
+      {/* <CustomThemeModal isOpen={customThemeModal} handleClose={() => setCustomThemeModal(false)} /> */}
+    </>
+  );
+};
diff --git a/app/components/cycles/completed-cycles-list.tsx b/app/components/cycles/completed-cycles-list.tsx
new file mode 100644
index 000000000..bf1971368
--- /dev/null
+++ b/app/components/cycles/completed-cycles-list.tsx
@@ -0,0 +1,101 @@
+import { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import cyclesService from "services/cycles.service";
+// components
+import { DeleteCycleModal, SingleCycleCard } from "components/cycles";
+// icons
+import { CompletedCycleIcon, ExclamationIcon } from "components/icons";
+// types
+import { ICycle, SelectCycleType } from "types";
+// fetch-keys
+import { CYCLE_COMPLETE_LIST } from "constants/fetch-keys";
+import { EmptyState, Loader } from "components/ui";
+// image
+import emptyCycle from "public/empty-state/empty-cycle.svg";
+
+export interface CompletedCyclesListProps {
+  setCreateUpdateCycleModal: React.Dispatch<React.SetStateAction<boolean>>;
+  setSelectedCycle: React.Dispatch<React.SetStateAction<SelectCycleType>>;
+}
+
+export const CompletedCyclesList: React.FC<CompletedCyclesListProps> = ({
+  setCreateUpdateCycleModal,
+  setSelectedCycle,
+}) => {
+  const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
+  const [selectedCycleForDelete, setSelectedCycleForDelete] = useState<SelectCycleType>();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: completedCycles } = useSWR(
+    workspaceSlug && projectId ? CYCLE_COMPLETE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => cyclesService.getCompletedCycles(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const handleDeleteCycle = (cycle: ICycle) => {
+    setSelectedCycleForDelete({ ...cycle, actionType: "delete" });
+    setCycleDeleteModal(true);
+  };
+
+  const handleEditCycle = (cycle: ICycle) => {
+    setSelectedCycle({ ...cycle, actionType: "edit" });
+    setCreateUpdateCycleModal(true);
+  };
+
+  return (
+    <>
+      <DeleteCycleModal
+        isOpen={
+          cycleDeleteModal &&
+          !!selectedCycleForDelete &&
+          selectedCycleForDelete.actionType === "delete"
+        }
+        setIsOpen={setCycleDeleteModal}
+        data={selectedCycleForDelete}
+      />
+      {completedCycles ? (
+        completedCycles.completed_cycles.length > 0 ? (
+          <div className="flex flex-col gap-4">
+            <div className="flex items-center gap-2 text-sm text-brand-secondary">
+              <ExclamationIcon height={14} width={14} />
+              <span>Completed cycles are not editable.</span>
+            </div>
+            <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+              {completedCycles.completed_cycles.map((cycle) => (
+                <SingleCycleCard
+                  key={cycle.id}
+                  cycle={cycle}
+                  handleDeleteCycle={() => handleDeleteCycle(cycle)}
+                  handleEditCycle={() => handleEditCycle(cycle)}
+                  isCompleted
+                />
+              ))}
+            </div>
+          </div>
+        ) : (
+          <EmptyState
+            type="cycle"
+            title="Create New Cycle"
+            description="Sprint more effectively with Cycles by confining your project
+          to a fixed amount of time. Create new cycle now."
+            imgURL={emptyCycle}
+          />
+        )
+      ) : (
+        <Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+          <Loader.Item height="200px" />
+          <Loader.Item height="200px" />
+          <Loader.Item height="200px" />
+        </Loader>
+      )}
+    </>
+  );
+};
diff --git a/app/components/cycles/cycles-list.tsx b/app/components/cycles/cycles-list.tsx
new file mode 100644
index 000000000..68592b051
--- /dev/null
+++ b/app/components/cycles/cycles-list.tsx
@@ -0,0 +1,88 @@
+import { useState } from "react";
+
+// components
+import { DeleteCycleModal, SingleCycleCard } from "components/cycles";
+import { EmptyState, Loader } from "components/ui";
+// image
+import emptyCycle from "public/empty-state/empty-cycle.svg";
+// icon
+import { XMarkIcon } from "@heroicons/react/24/outline";
+// types
+import { ICycle, SelectCycleType } from "types";
+
+type TCycleStatsViewProps = {
+  cycles: ICycle[] | undefined;
+  setCreateUpdateCycleModal: React.Dispatch<React.SetStateAction<boolean>>;
+  setSelectedCycle: React.Dispatch<React.SetStateAction<SelectCycleType>>;
+  type: "current" | "upcoming" | "draft";
+};
+
+export const CyclesList: React.FC<TCycleStatsViewProps> = ({
+  cycles,
+  setCreateUpdateCycleModal,
+  setSelectedCycle,
+  type,
+}) => {
+  const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
+  const [selectedCycleForDelete, setSelectedCycleForDelete] = useState<SelectCycleType>();
+  const [showNoCurrentCycleMessage, setShowNoCurrentCycleMessage] = useState(true);
+
+  const handleDeleteCycle = (cycle: ICycle) => {
+    setSelectedCycleForDelete({ ...cycle, actionType: "delete" });
+    setCycleDeleteModal(true);
+  };
+
+  const handleEditCycle = (cycle: ICycle) => {
+    setSelectedCycle({ ...cycle, actionType: "edit" });
+    setCreateUpdateCycleModal(true);
+  };
+
+  return (
+    <>
+      <DeleteCycleModal
+        isOpen={
+          cycleDeleteModal &&
+          !!selectedCycleForDelete &&
+          selectedCycleForDelete.actionType === "delete"
+        }
+        setIsOpen={setCycleDeleteModal}
+        data={selectedCycleForDelete}
+      />
+      {cycles ? (
+        cycles.length > 0 ? (
+          <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+            {cycles.map((cycle) => (
+              <SingleCycleCard
+                key={cycle.id}
+                cycle={cycle}
+                handleDeleteCycle={() => handleDeleteCycle(cycle)}
+                handleEditCycle={() => handleEditCycle(cycle)}
+              />
+            ))}
+          </div>
+        ) : type === "current" ? (
+          showNoCurrentCycleMessage && (
+            <div className="flex items-center justify-between bg-brand-surface-2 w-full px-6 py-4 rounded-[10px]">
+              <h3 className="text-base font-medium text-brand-base "> No current cycle is present.</h3>
+              <button onClick={() => setShowNoCurrentCycleMessage(false)}>
+                <XMarkIcon className="h-4 w-4" />
+              </button>
+            </div>
+          )
+        ) : (
+          <EmptyState
+            type="cycle"
+            title="Create New Cycle"
+            description="Sprint more effectively with Cycles by confining your project
+          to a fixed amount of time. Create new cycle now."
+            imgURL={emptyCycle}
+          />
+        )
+      ) : (
+        <Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+          <Loader.Item height="200px" />
+        </Loader>
+      )}
+    </>
+  );
+};
diff --git a/app/components/cycles/delete-cycle-modal.tsx b/app/components/cycles/delete-cycle-modal.tsx
new file mode 100644
index 000000000..b69537cdc
--- /dev/null
+++ b/app/components/cycles/delete-cycle-modal.tsx
@@ -0,0 +1,192 @@
+import React, { useState } from "react";
+// next
+import { useRouter } from "next/router";
+// swr
+import { mutate } from "swr";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import cycleService from "services/cycles.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { DangerButton, SecondaryButton } from "components/ui";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// types
+import type {
+  CompletedCyclesResponse,
+  CurrentAndUpcomingCyclesResponse,
+  DraftCyclesResponse,
+  ICycle,
+} from "types";
+type TConfirmCycleDeletionProps = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  data?: ICycle;
+};
+// fetch-keys
+import {
+  CYCLE_COMPLETE_LIST,
+  CYCLE_CURRENT_AND_UPCOMING_LIST,
+  CYCLE_DRAFT_LIST,
+  CYCLE_LIST,
+} from "constants/fetch-keys";
+import { getDateRangeStatus } from "helpers/date-time.helper";
+
+export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
+  isOpen,
+  setIsOpen,
+  data,
+}) => {
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    if (!data || !workspaceSlug) return;
+
+    setIsDeleteLoading(true);
+
+    await cycleService
+      .deleteCycle(workspaceSlug as string, data.project, data.id)
+      .then(() => {
+        switch (getDateRangeStatus(data.start_date, data.end_date)) {
+          case "completed":
+            mutate<CompletedCyclesResponse>(
+              CYCLE_COMPLETE_LIST(projectId as string),
+              (prevData) => {
+                if (!prevData) return;
+
+                return {
+                  completed_cycles: prevData.completed_cycles?.filter(
+                    (cycle) => cycle.id !== data?.id
+                  ),
+                };
+              },
+              false
+            );
+            break;
+          case "current":
+            mutate<CurrentAndUpcomingCyclesResponse>(
+              CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
+              (prevData) => {
+                if (!prevData) return;
+                return {
+                  current_cycle: prevData.current_cycle?.filter((c) => c.id !== data?.id),
+                  upcoming_cycle: prevData.upcoming_cycle,
+                };
+              },
+              false
+            );
+            break;
+          case "upcoming":
+            mutate<CurrentAndUpcomingCyclesResponse>(
+              CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
+              (prevData) => {
+                if (!prevData) return;
+
+                return {
+                  current_cycle: prevData.current_cycle,
+                  upcoming_cycle: prevData.upcoming_cycle?.filter((c) => c.id !== data?.id),
+                };
+              },
+              false
+            );
+            break;
+          default:
+            mutate<DraftCyclesResponse>(
+              CYCLE_DRAFT_LIST(projectId as string),
+              (prevData) => {
+                if (!prevData) return;
+                return {
+                  draft_cycles: prevData.draft_cycles?.filter((cycle) => cycle.id !== data?.id),
+                };
+              },
+              false
+            );
+        }
+        handleClose();
+
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Cycle deleted successfully",
+        });
+      })
+      .catch(() => {
+        setIsDeleteLoading(false);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                        Delete Cycle
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-brand-secondary">
+                          Are you sure you want to delete cycle-{" "}
+                          <span className="font-bold">{data?.name}</span>? All of the data related
+                          to the cycle will be permanently removed. This action cannot be undone.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
+                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                    {isDeleteLoading ? "Deleting..." : "Delete"}
+                  </DangerButton>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/cycles/empty-cycle.tsx b/app/components/cycles/empty-cycle.tsx
new file mode 100644
index 000000000..af2f12a11
--- /dev/null
+++ b/app/components/cycles/empty-cycle.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+import { LinearProgressIndicator } from "components/ui";
+
+export const EmptyCycle = () => {
+  const emptyCycleData = [
+    {
+      id: 1,
+      name: "backlog",
+      value: 20,
+      color: "#DEE2E6",
+    },
+    {
+      id: 2,
+      name: "unstarted",
+      value: 14,
+      color: "#26B5CE",
+    },
+    {
+      id: 3,
+      name: "started",
+      value: 27,
+      color: "#F7AE59",
+    },
+    {
+      id: 4,
+      name: "cancelled",
+      value: 15,
+      color: "#D687FF",
+    },
+    {
+      id: 5,
+      name: "completed",
+      value: 14,
+      color: "#09A953",
+    },
+  ];
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-5 ">
+      <div className="relative h-32 w-72">
+        <div className="absolute right-0 top-0 flex w-64 flex-col rounded-[10px] bg-brand-surface-2 text-xs shadow">
+          <div className="flex flex-col items-start justify-center gap-2.5 p-3.5">
+            <span className="text-sm font-semibold text-brand-base">Cycle Name</span>
+            <div className="flex h-full w-full items-center gap-4">
+              <span className="h-2 w-20 rounded-full bg-brand-surface-2" />
+              <span className="h-2 w-20 rounded-full bg-brand-surface-2" />
+            </div>
+          </div>
+
+          <div className="border-t border-brand-base bg-brand-surface-1 px-4 py-3">
+            <LinearProgressIndicator data={emptyCycleData} />
+          </div>
+        </div>
+
+        <div className="absolute left-0 bottom-0 flex w-64 flex-col rounded-[10px] bg-brand-surface-2 text-xs shadow">
+          <div className="flex flex-col items-start justify-center gap-2.5 p-3.5">
+            <span className="text-sm font-semibold text-brand-base">Cycle Name</span>
+            <div className="flex h-full w-full items-center gap-4">
+              <span className="h-2 w-20 rounded-full bg-brand-surface-2" />
+              <span className="h-2 w-20 rounded-full bg-brand-surface-2" />
+            </div>
+          </div>
+
+          <div className="border-t border-brand-base bg-brand-surface-1 px-4 py-3">
+            <LinearProgressIndicator data={emptyCycleData} />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center justify-center gap-4 text-center ">
+        <h3 className="text-xl font-semibold">Create New Cycle</h3>
+        <p className="text-sm text-brand-secondary">
+          Sprint more effectively with Cycles by confining your project <br /> to a fixed amount of
+          time. Create new cycle now.
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/cycles/form.tsx b/app/components/cycles/form.tsx
new file mode 100644
index 000000000..168f4f2cd
--- /dev/null
+++ b/app/components/cycles/form.tsx
@@ -0,0 +1,223 @@
+import { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// services
+import cyclesService from "services/cycles.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { DateSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+// helpers
+import { getDateRangeStatus, isDateRangeValid } from "helpers/date-time.helper";
+// types
+import { ICycle } from "types";
+
+type Props = {
+  handleFormSubmit: (values: Partial<ICycle>) => Promise<void>;
+  handleClose: () => void;
+  status: boolean;
+  data?: ICycle;
+};
+
+const defaultValues: Partial<ICycle> = {
+  name: "",
+  description: "",
+  start_date: null,
+  end_date: null,
+};
+
+export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const [isDateValid, setIsDateValid] = useState(true);
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    control,
+    watch,
+    reset,
+  } = useForm<ICycle>({
+    defaultValues,
+  });
+
+  const handleCreateUpdateCycle = async (formData: Partial<ICycle>) => {
+    await handleFormSubmit(formData);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  const cycleStatus =
+    data?.start_date && data?.end_date ? getDateRangeStatus(data?.start_date, data?.end_date) : "";
+
+  const dateChecker = async (payload: any) => {
+    await cyclesService
+      .cycleDateCheck(workspaceSlug as string, projectId as string, payload)
+      .then((res) => {
+        if (res.status) {
+          setIsDateValid(true);
+        } else {
+          setIsDateValid(false);
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
+          });
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const checkEmptyDate =
+    (watch("start_date") === "" && watch("end_date") === "") ||
+    (!watch("start_date") && !watch("end_date"));
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateUpdateCycle)}>
+      <div className="space-y-5">
+        <h3 className="text-lg font-medium leading-6 text-brand-base">
+          {status ? "Update" : "Create"} Cycle
+        </h3>
+        <div className="space-y-3">
+          <div>
+            <Input
+              mode="transparent"
+              autoComplete="off"
+              id="name"
+              name="name"
+              type="name"
+              className="resize-none text-xl"
+              placeholder="Title"
+              error={errors.name}
+              register={register}
+              validations={{
+                required: "Name is required",
+                maxLength: {
+                  value: 255,
+                  message: "Name should be less than 255 characters",
+                },
+              }}
+            />
+          </div>
+          <div>
+            <TextArea
+              id="description"
+              name="description"
+              placeholder="Description"
+              className="h-32 resize-none text-sm"
+              mode="transparent"
+              error={errors.description}
+              register={register}
+            />
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2">
+            <div>
+              <Controller
+                control={control}
+                name="start_date"
+                render={({ field: { value, onChange } }) => (
+                  <DateSelect
+                    label="Start date"
+                    value={value}
+                    onChange={(val) => {
+                      onChange(val);
+                      if (val && watch("end_date")) {
+                        if (isDateRangeValid(val, `${watch("end_date")}`)) {
+                          cycleStatus != "current" &&
+                            dateChecker({
+                              start_date: val,
+                              end_date: watch("end_date"),
+                            });
+                        } else {
+                          setIsDateValid(false);
+                          setToastAlert({
+                            type: "error",
+                            title: "Error!",
+                            message: "The date you have entered is invalid. Please check and enter a valid date.",
+                          });
+                        }
+                      }
+                    }}
+                  />
+                )}
+              />
+            </div>
+            <div>
+              <Controller
+                control={control}
+                name="end_date"
+                render={({ field: { value, onChange } }) => (
+                  <DateSelect
+                    label="End date"
+                    value={value}
+                    onChange={(val) => {
+                      onChange(val);
+                      if (watch("start_date") && val) {
+                        if (isDateRangeValid(`${watch("start_date")}`, val)) {
+                          cycleStatus != "current" &&
+                            dateChecker({
+                              start_date: watch("start_date"),
+                              end_date: val,
+                            });
+                        } else {
+                          setIsDateValid(false);
+                          setToastAlert({
+                            type: "error",
+                            title: "Error!",
+                            message: "The date you have entered is invalid. Please check and enter a valid date.",
+                          });
+                        }
+                      }
+                    }}
+                  />
+                )}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-brand-base px-5 pt-5">
+        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+        <PrimaryButton
+          type="submit"
+          className={
+            checkEmptyDate
+              ? "cursor-pointer"
+              : isDateValid
+              ? "cursor-pointer"
+              : "cursor-not-allowed"
+          }
+          loading={isSubmitting || checkEmptyDate ? false : isDateValid ? false : true}
+        >
+          {status
+            ? isSubmitting
+              ? "Updating Cycle..."
+              : "Update Cycle"
+            : isSubmitting
+            ? "Creating Cycle..."
+            : "Create Cycle"}
+        </PrimaryButton>
+      </div>
+    </form>
+  );
+};
diff --git a/app/components/cycles/index.ts b/app/components/cycles/index.ts
new file mode 100644
index 000000000..558801598
--- /dev/null
+++ b/app/components/cycles/index.ts
@@ -0,0 +1,11 @@
+export * from "./completed-cycles-list";
+export * from "./cycles-list";
+export * from "./delete-cycle-modal";
+export * from "./form";
+export * from "./modal";
+export * from "./select";
+export * from "./sidebar";
+export * from "./single-cycle-card";
+export * from "./empty-cycle";
+export * from "./transfer-issues-modal";
+export * from "./transfer-issues";
\ No newline at end of file
diff --git a/app/components/cycles/modal.tsx b/app/components/cycles/modal.tsx
new file mode 100644
index 000000000..aba22b0ec
--- /dev/null
+++ b/app/components/cycles/modal.tsx
@@ -0,0 +1,181 @@
+import { Fragment } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import cycleService from "services/cycles.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CycleForm } from "components/cycles";
+// helper
+import { getDateRangeStatus } from "helpers/date-time.helper";
+// types
+import type { ICycle } from "types";
+// fetch keys
+import {
+  CYCLE_COMPLETE_LIST,
+  CYCLE_CURRENT_AND_UPCOMING_LIST,
+  CYCLE_DRAFT_LIST,
+  CYCLE_INCOMPLETE_LIST,
+} from "constants/fetch-keys";
+
+type CycleModalProps = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data?: ICycle;
+};
+
+export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
+  isOpen,
+  handleClose,
+  data,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const createCycle = async (payload: Partial<ICycle>) => {
+    await cycleService
+      .createCycle(workspaceSlug as string, projectId as string, payload)
+      .then((res) => {
+        switch (getDateRangeStatus(res.start_date, res.end_date)) {
+          case "completed":
+            mutate(CYCLE_COMPLETE_LIST(projectId as string));
+            break;
+          case "current":
+            mutate(CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string));
+            break;
+          case "upcoming":
+            mutate(CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string));
+            break;
+          default:
+            mutate(CYCLE_DRAFT_LIST(projectId as string));
+        }
+        mutate(CYCLE_INCOMPLETE_LIST(projectId as string));
+        handleClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Cycle created successfully.",
+        });
+      })
+      .catch((err) => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Error in creating cycle. Please try again.",
+        });
+      });
+  };
+
+  const updateCycle = async (cycleId: string, payload: Partial<ICycle>) => {
+    await cycleService
+      .updateCycle(workspaceSlug as string, projectId as string, cycleId, payload)
+      .then((res) => {
+        switch (getDateRangeStatus(data?.start_date, data?.end_date)) {
+          case "completed":
+            mutate(CYCLE_COMPLETE_LIST(projectId as string));
+            break;
+          case "current":
+            mutate(CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string));
+            break;
+          case "upcoming":
+            mutate(CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string));
+            break;
+          default:
+            mutate(CYCLE_DRAFT_LIST(projectId as string));
+        }
+        if (
+          getDateRangeStatus(data?.start_date, data?.end_date) !=
+          getDateRangeStatus(res.start_date, res.end_date)
+        ) {
+          switch (getDateRangeStatus(res.start_date, res.end_date)) {
+            case "completed":
+              mutate(CYCLE_COMPLETE_LIST(projectId as string));
+              break;
+            case "current":
+              mutate(CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string));
+              break;
+            case "upcoming":
+              mutate(CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string));
+              break;
+            default:
+              mutate(CYCLE_DRAFT_LIST(projectId as string));
+          }
+        }
+
+        handleClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Cycle updated successfully.",
+        });
+      })
+      .catch((err) => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Error in updating cycle. Please try again.",
+        });
+      });
+  };
+
+  const handleFormSubmit = async (formData: Partial<ICycle>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload: Partial<ICycle> = {
+      ...formData,
+    };
+
+    if (!data) await createCycle(payload);
+    else await updateCycle(data.id, payload);
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <CycleForm
+                  handleFormSubmit={handleFormSubmit}
+                  handleClose={handleClose}
+                  status={data ? true : false}
+                  data={data}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/cycles/select.tsx b/app/components/cycles/select.tsx
new file mode 100644
index 000000000..971c60ddd
--- /dev/null
+++ b/app/components/cycles/select.tsx
@@ -0,0 +1,127 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+import { CyclesIcon } from "components/icons";
+// services
+import cycleServices from "services/cycles.service";
+// components
+import { CreateUpdateCycleModal } from "components/cycles";
+// fetch-keys
+import { CYCLE_LIST } from "constants/fetch-keys";
+
+export type IssueCycleSelectProps = {
+  projectId: string;
+  value: any;
+  onChange: (value: any) => void;
+  multiple?: boolean;
+};
+
+export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
+  projectId,
+  value,
+  onChange,
+  multiple = false,
+}) => {
+  // states
+  const [isCycleModalActive, setCycleModalActive] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: cycles } = useSWR(
+    workspaceSlug && projectId ? CYCLE_LIST(projectId) : null,
+    workspaceSlug && projectId
+      ? () => cycleServices.getCycles(workspaceSlug as string, projectId)
+      : null
+  );
+
+  const options = cycles?.map((cycle) => ({ value: cycle.id, display: cycle.name }));
+
+  const openCycleModal = () => {
+    setCycleModalActive(true);
+  };
+
+  const closeCycleModal = () => {
+    setCycleModalActive(false);
+  };
+
+  return (
+    <>
+      <CreateUpdateCycleModal isOpen={isCycleModalActive} handleClose={closeCycleModal} />
+      <Listbox as="div" className="relative" value={value} onChange={onChange} multiple={multiple}>
+        {({ open }) => (
+          <>
+            <Listbox.Button
+              className={`flex cursor-pointer items-center gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 hover:bg-brand-surface-1 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
+            >
+              <CyclesIcon className="h-3 w-3 text-brand-secondary" />
+              <div className="flex items-center gap-2 truncate">
+                {cycles?.find((c) => c.id === value)?.name ?? "Cycles"}
+              </div>
+            </Listbox.Button>
+
+            <Transition
+              show={open}
+              as={React.Fragment}
+              leave="transition ease-in duration-100"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <Listbox.Options
+                className={`absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-brand-surface-2 shadow-lg text-xs z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none`}
+              >
+                <div className="py-1">
+                  {options ? (
+                    options.length > 0 ? (
+                      options.map((option) => (
+                        <Listbox.Option
+                          key={option.value}
+                          className={({ selected, active }) =>
+                            `${
+                              selected ||
+                              (Array.isArray(value)
+                                ? value.includes(option.value)
+                                : value === option.value)
+                                ? "bg-indigo-50 font-medium"
+                                : ""
+                            } ${
+                              active ? "bg-indigo-50" : ""
+                            } relative cursor-pointer select-none p-2 text-brand-base`
+                          }
+                          value={option.value}
+                        >
+                          <span className={` flex items-center gap-2 truncate`}>
+                            {option.display}
+                          </span>
+                        </Listbox.Option>
+                      ))
+                    ) : (
+                      <p className="text-center text-sm text-brand-secondary">No options</p>
+                    )
+                  ) : (
+                    <p className="text-center text-sm text-brand-secondary">Loading...</p>
+                  )}
+                  <button
+                    type="button"
+                    className="relative w-full flex select-none items-center gap-x-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-brand-base"
+                    onClick={openCycleModal}
+                  >
+                    <PlusIcon className="h-4 w-4 text-gray-400" aria-hidden="true" />
+                    <span>Create cycle</span>
+                  </button>
+                </div>
+              </Listbox.Options>
+            </Transition>
+          </>
+        )}
+      </Listbox>
+    </>
+  );
+};
diff --git a/app/components/cycles/sidebar.tsx b/app/components/cycles/sidebar.tsx
new file mode 100644
index 000000000..f896d232e
--- /dev/null
+++ b/app/components/cycles/sidebar.tsx
@@ -0,0 +1,495 @@
+import React, { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+import Image from "next/image";
+
+import useSWR, { mutate } from "swr";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+import { Disclosure, Popover, Transition } from "@headlessui/react";
+import DatePicker from "react-datepicker";
+// icons
+import {
+  CalendarDaysIcon,
+  ChartPieIcon,
+  ArrowLongRightIcon,
+  TrashIcon,
+  UserCircleIcon,
+  ChevronDownIcon,
+  DocumentIcon,
+  LinkIcon,
+} from "@heroicons/react/24/outline";
+// ui
+import { CustomMenu, Loader, ProgressBar } from "components/ui";
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import cyclesService from "services/cycles.service";
+// components
+import { SidebarProgressStats } from "components/core";
+import ProgressChart from "components/core/sidebar/progress-chart";
+import { DeleteCycleModal } from "components/cycles";
+// icons
+import { ExclamationIcon } from "components/icons";
+// helpers
+import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
+import { isDateRangeValid, renderDateFormat, renderShortDate } from "helpers/date-time.helper";
+// types
+import { ICycle, IIssue } from "types";
+// fetch-keys
+import { CYCLE_DETAILS, CYCLE_ISSUES } from "constants/fetch-keys";
+
+type Props = {
+  cycle: ICycle | undefined;
+  isOpen: boolean;
+  cycleStatus: string;
+  isCompleted: boolean;
+};
+
+export const CycleDetailsSidebar: React.FC<Props> = ({
+  cycle,
+  isOpen,
+  cycleStatus,
+  isCompleted,
+}) => {
+  const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const defaultValues: Partial<ICycle> = {
+    start_date: new Date().toString(),
+    end_date: new Date().toString(),
+  };
+
+  const { data: issues } = useSWR<IIssue[]>(
+    workspaceSlug && projectId && cycleId ? CYCLE_ISSUES(cycleId as string) : null,
+    workspaceSlug && projectId && cycleId
+      ? () =>
+          cyclesService.getCycleIssues(
+            workspaceSlug as string,
+            projectId as string,
+            cycleId as string
+          )
+      : null
+  );
+
+  const { reset, watch } = useForm({
+    defaultValues,
+  });
+
+  const submitChanges = (data: Partial<ICycle>) => {
+    if (!workspaceSlug || !projectId || !cycleId) return;
+
+    mutate<ICycle>(
+      CYCLE_DETAILS(cycleId as string),
+      (prevData) => ({ ...(prevData as ICycle), ...data }),
+      false
+    );
+
+    cyclesService
+      .patchCycle(workspaceSlug as string, projectId as string, cycleId as string, data)
+      .then(() => mutate(CYCLE_DETAILS(cycleId as string)))
+      .catch((e) => console.log(e));
+  };
+
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Cycle link copied to clipboard",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Some error occurred",
+        });
+      });
+  };
+
+  useEffect(() => {
+    if (cycle)
+      reset({
+        ...cycle,
+      });
+  }, [cycle, reset]);
+
+  const isStartValid = new Date(`${cycle?.start_date}`) <= new Date();
+  const isEndValid = new Date(`${cycle?.end_date}`) >= new Date(`${cycle?.start_date}`);
+
+  const progressPercentage = cycle
+    ? Math.round((cycle.completed_issues / cycle.total_issues) * 100)
+    : null;
+
+  return (
+    <>
+      <DeleteCycleModal isOpen={cycleDeleteModal} setIsOpen={setCycleDeleteModal} data={cycle} />
+      <div
+        className={`fixed top-0 ${
+          isOpen ? "right-0" : "-right-[24rem]"
+        } z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
+      >
+        {cycle ? (
+          <>
+            <div className="flex flex-col items-start justify-center">
+              <div className="flex gap-2.5 px-5 text-sm">
+                <div className="flex items-center ">
+                  <span
+                    className={`flex items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-center text-sm capitalize text-brand-muted-1 `}
+                  >
+                    {capitalizeFirstLetter(cycleStatus)}
+                  </span>
+                </div>
+                <div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-brand-muted-1">
+                  <Popover className="flex h-full items-center  justify-center rounded-lg">
+                    {({ open }) => (
+                      <>
+                        <Popover.Button
+                          disabled={isCompleted ?? false}
+                          className={`group flex h-full items-center gap-1 rounded border-[0.5px]  border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1   ${
+                            open ? "bg-brand-surface-1" : ""
+                          }`}
+                        >
+                          <CalendarDaysIcon className="h-3 w-3" />
+                          <span>{renderShortDate(new Date(`${cycle?.start_date}`))}</span>
+                        </Popover.Button>
+
+                        <Transition
+                          as={React.Fragment}
+                          enter="transition ease-out duration-200"
+                          enterFrom="opacity-0 translate-y-1"
+                          enterTo="opacity-100 translate-y-0"
+                          leave="transition ease-in duration-150"
+                          leaveFrom="opacity-100 translate-y-0"
+                          leaveTo="opacity-0 translate-y-1"
+                        >
+                          <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
+                            <DatePicker
+                              selected={
+                                watch("start_date")
+                                  ? new Date(`${watch("start_date")}`)
+                                  : new Date()
+                              }
+                              onChange={(date) => {
+                                if (date && watch("end_date")) {
+                                  if (
+                                    isDateRangeValid(renderDateFormat(date), `${watch("end_date")}`)
+                                  ) {
+                                    submitChanges({
+                                      start_date: renderDateFormat(date),
+                                    });
+                                  } else {
+                                    setToastAlert({
+                                      type: "error",
+                                      title: "Error!",
+                                      message:
+                                        "The date you have entered is invalid. Please check and enter a valid date.",
+                                    });
+                                  }
+                                }
+                              }}
+                              selectsStart
+                              startDate={new Date(`${watch("start_date")}`)}
+                              endDate={new Date(`${watch("end_date")}`)}
+                              maxDate={new Date(`${watch("end_date")}`)}
+                              shouldCloseOnSelect
+                              inline
+                            />
+                          </Popover.Panel>
+                        </Transition>
+                      </>
+                    )}
+                  </Popover>
+                  <span>
+                    <ArrowLongRightIcon className="h-3 w-3" />
+                  </span>
+                  <Popover className="flex h-full items-center  justify-center rounded-lg">
+                    {({ open }) => (
+                      <>
+                        <Popover.Button
+                          disabled={isCompleted ?? false}
+                          className={`group flex items-center gap-1 rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1  ${
+                            open ? "bg-brand-surface-1" : ""
+                          }`}
+                        >
+                          <CalendarDaysIcon className="h-3 w-3 " />
+
+                          <span>{renderShortDate(new Date(`${cycle?.end_date}`))}</span>
+                        </Popover.Button>
+
+                        <Transition
+                          as={React.Fragment}
+                          enter="transition ease-out duration-200"
+                          enterFrom="opacity-0 translate-y-1"
+                          enterTo="opacity-100 translate-y-0"
+                          leave="transition ease-in duration-150"
+                          leaveFrom="opacity-100 translate-y-0"
+                          leaveTo="opacity-0 translate-y-1"
+                        >
+                          <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
+                            <DatePicker
+                              selected={
+                                watch("end_date") ? new Date(`${watch("end_date")}`) : new Date()
+                              }
+                              onChange={(date) => {
+                                if (watch("start_date") && date) {
+                                  if (
+                                    isDateRangeValid(
+                                      `${watch("start_date")}`,
+                                      renderDateFormat(date)
+                                    )
+                                  ) {
+                                    submitChanges({
+                                      end_date: renderDateFormat(date),
+                                    });
+                                  } else {
+                                    setToastAlert({
+                                      type: "error",
+                                      title: "Error!",
+                                      message:
+                                        "The date you have entered is invalid. Please check and enter a valid date.",
+                                    });
+                                  }
+                                }
+                              }}
+                              selectsEnd
+                              startDate={new Date(`${watch("start_date")}`)}
+                              endDate={new Date(`${watch("end_date")}`)}
+                              minDate={new Date(`${watch("start_date")}`)}
+                              shouldCloseOnSelect
+                              inline
+                            />
+                          </Popover.Panel>
+                        </Transition>
+                      </>
+                    )}
+                  </Popover>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-6 px-6 py-6 w-full">
+                <div className="flex flex-col items-start justify-start gap-2 w-full">
+                  <div className="flex items-start justify-between gap-2 w-full">
+                    <h4 className="text-xl font-semibold text-brand-base">{cycle.name}</h4>
+                    <CustomMenu width="lg" ellipsis>
+                      {!isCompleted && (
+                        <CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
+                          <span className="flex items-center justify-start gap-2">
+                            <TrashIcon className="h-4 w-4" />
+                            <span>Delete</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                      )}
+                      <CustomMenu.MenuItem onClick={handleCopyText}>
+                        <span className="flex items-center justify-start gap-2">
+                          <LinkIcon className="h-4 w-4" />
+                          <span>Copy link</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                    </CustomMenu>
+                  </div>
+
+                  <span className="whitespace-normal text-sm leading-5 text-brand-secondary">
+                    {cycle.description}
+                  </span>
+                </div>
+
+                <div className="flex flex-col  gap-4  text-sm">
+                  <div className="flex items-center justify-start gap-1">
+                    <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+                      <UserCircleIcon className="h-5 w-5" />
+                      <span>Lead</span>
+                    </div>
+
+                    <div className="flex items-center gap-2.5">
+                      {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
+                        <Image
+                          src={cycle.owned_by.avatar}
+                          height={12}
+                          width={12}
+                          className="rounded-full"
+                          alt={cycle.owned_by.first_name}
+                        />
+                      ) : (
+                        <span className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-800 capitalize  text-white">
+                          {cycle.owned_by.first_name.charAt(0)}
+                        </span>
+                      )}
+                      <span className="text-brand-secondary">{cycle.owned_by.first_name}</span>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center justify-start gap-1">
+                    <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+                      <ChartPieIcon className="h-5 w-5" />
+                      <span>Progress</span>
+                    </div>
+
+                    <div className="flex items-center gap-2.5 text-brand-secondary">
+                      <span className="h-4 w-4">
+                        <ProgressBar value={cycle.completed_issues} maxValue={cycle.total_issues} />
+                      </span>
+                      {cycle.completed_issues}/{cycle.total_issues}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
+              <Disclosure defaultOpen>
+                {({ open }) => (
+                  <div
+                    className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}
+                  >
+                    <div className="flex w-full items-center justify-between gap-2    ">
+                      <div className="flex items-center justify-start gap-2 text-sm">
+                        <span className="font-medium text-brand-secondary">Progress</span>
+                        {!open && progressPercentage ? (
+                          <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
+                            {progressPercentage ? `${progressPercentage}%` : ""}
+                          </span>
+                        ) : (
+                          ""
+                        )}
+                      </div>
+                      {isStartValid && isEndValid ? (
+                        <Disclosure.Button>
+                          <ChevronDownIcon
+                            className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
+                            aria-hidden="true"
+                          />
+                        </Disclosure.Button>
+                      ) : (
+                        <div className="flex items-center gap-1">
+                          <ExclamationIcon height={14} width={14} />
+                          <span className="text-xs italic text-brand-secondary">
+                            {cycleStatus === "upcoming"
+                              ? "Cycle is yet to start."
+                              : "Invalid date. Please enter valid date."}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                    <Transition show={open}>
+                      <Disclosure.Panel>
+                        {isStartValid && isEndValid ? (
+                          <div className=" h-full w-full py-4">
+                            <div className="flex  items-start justify-between gap-4 py-2 text-xs">
+                              <div className="flex items-center gap-1">
+                                <span>
+                                  <DocumentIcon className="h-3 w-3 text-brand-secondary" />
+                                </span>
+                                <span>
+                                  Pending Issues -{" "}
+                                  {cycle.total_issues -
+                                    (cycle.completed_issues + cycle.cancelled_issues)}
+                                </span>
+                              </div>
+
+                              <div className="flex items-center gap-3 text-brand-base">
+                                <div className="flex items-center justify-center gap-1">
+                                  <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+                                  <span>Ideal</span>
+                                </div>
+                                <div className="flex items-center justify-center gap-1">
+                                  <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+                                  <span>Current</span>
+                                </div>
+                              </div>
+                            </div>
+                            <div className="relative h-40 w-80">
+                              <ProgressChart
+                                issues={issues ?? []}
+                                start={cycle?.start_date ?? ""}
+                                end={cycle?.end_date ?? ""}
+                              />
+                            </div>
+                          </div>
+                        ) : (
+                          ""
+                        )}
+                      </Disclosure.Panel>
+                    </Transition>
+                  </div>
+                )}
+              </Disclosure>
+            </div>
+
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
+              <Disclosure defaultOpen>
+                {({ open }) => (
+                  <div
+                    className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}
+                  >
+                    <div className="flex w-full items-center justify-between gap-2">
+                      <div className="flex items-center justify-start gap-2 text-sm">
+                        <span className="font-medium text-brand-secondary">Other Information</span>
+                      </div>
+
+                      {cycle.total_issues > 0 ? (
+                        <Disclosure.Button>
+                          <ChevronDownIcon
+                            className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
+                            aria-hidden="true"
+                          />
+                        </Disclosure.Button>
+                      ) : (
+                        <div className="flex items-center gap-1">
+                          <ExclamationIcon height={14} width={14} />
+                          <span className="text-xs italic text-brand-secondary">
+                            No issues found. Please add issue.
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                    <Transition show={open}>
+                      <Disclosure.Panel>
+                        {cycle.total_issues > 0 ? (
+                          <div className=" h-full w-full py-4">
+                            <SidebarProgressStats
+                              issues={issues ?? []}
+                              groupedIssues={{
+                                backlog: cycle.backlog_issues,
+                                unstarted: cycle.unstarted_issues,
+                                started: cycle.started_issues,
+                                completed: cycle.completed_issues,
+                                cancelled: cycle.cancelled_issues,
+                              }}
+                            />
+                          </div>
+                        ) : (
+                          ""
+                        )}
+                      </Disclosure.Panel>
+                    </Transition>
+                  </div>
+                )}
+              </Disclosure>
+            </div>
+          </>
+        ) : (
+          <Loader className="px-5">
+            <div className="space-y-2">
+              <Loader.Item height="15px" width="50%" />
+              <Loader.Item height="15px" width="30%" />
+            </div>
+            <div className="mt-8 space-y-3">
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+            </div>
+          </Loader>
+        )}
+      </div>
+    </>
+  );
+};
diff --git a/app/components/cycles/single-cycle-card.tsx b/app/components/cycles/single-cycle-card.tsx
new file mode 100644
index 000000000..5bd0115c3
--- /dev/null
+++ b/app/components/cycles/single-cycle-card.tsx
@@ -0,0 +1,417 @@
+import React from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// services
+import cyclesService from "services/cycles.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { CustomMenu, LinearProgressIndicator, Tooltip } from "components/ui";
+import { Disclosure, Transition } from "@headlessui/react";
+// icons
+import { CalendarDaysIcon } from "@heroicons/react/20/solid";
+import { TargetIcon } from "components/icons";
+import {
+  ChevronDownIcon,
+  LinkIcon,
+  PencilIcon,
+  StarIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+// helpers
+import { getDateRangeStatus, renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+// types
+import {
+  CompletedCyclesResponse,
+  CurrentAndUpcomingCyclesResponse,
+  DraftCyclesResponse,
+  ICycle,
+} from "types";
+// fetch-keys
+import {
+  CYCLE_COMPLETE_LIST,
+  CYCLE_CURRENT_AND_UPCOMING_LIST,
+  CYCLE_DRAFT_LIST,
+} from "constants/fetch-keys";
+
+type TSingleStatProps = {
+  cycle: ICycle;
+  handleEditCycle: () => void;
+  handleDeleteCycle: () => void;
+  isCompleted?: boolean;
+};
+
+const stateGroups = [
+  {
+    key: "backlog_issues",
+    title: "Backlog",
+    color: "#dee2e6",
+  },
+  {
+    key: "unstarted_issues",
+    title: "Unstarted",
+    color: "#26b5ce",
+  },
+  {
+    key: "started_issues",
+    title: "Started",
+    color: "#f7ae59",
+  },
+  {
+    key: "cancelled_issues",
+    title: "Cancelled",
+    color: "#d687ff",
+  },
+  {
+    key: "completed_issues",
+    title: "Completed",
+    color: "#09a953",
+  },
+];
+
+export const SingleCycleCard: React.FC<TSingleStatProps> = ({
+  cycle,
+  handleEditCycle,
+  handleDeleteCycle,
+  isCompleted = false,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const endDate = new Date(cycle.end_date ?? "");
+  const startDate = new Date(cycle.start_date ?? "");
+
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug || !projectId || !cycle) return;
+
+    const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
+
+    switch (cycleStatus) {
+      case "current":
+      case "upcoming":
+        mutate<CurrentAndUpcomingCyclesResponse>(
+          CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
+          (prevData) => ({
+            current_cycle: (prevData?.current_cycle ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? true : c.is_favorite,
+            })),
+            upcoming_cycle: (prevData?.upcoming_cycle ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? true : c.is_favorite,
+            })),
+          }),
+          false
+        );
+        break;
+      case "completed":
+        mutate<CompletedCyclesResponse>(
+          CYCLE_COMPLETE_LIST(projectId as string),
+          (prevData) => ({
+            completed_cycles: (prevData?.completed_cycles ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? true : c.is_favorite,
+            })),
+          }),
+          false
+        );
+        break;
+      case "draft":
+        mutate<DraftCyclesResponse>(
+          CYCLE_DRAFT_LIST(projectId as string),
+          (prevData) => ({
+            draft_cycles: (prevData?.draft_cycles ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? true : c.is_favorite,
+            })),
+          }),
+          false
+        );
+        break;
+    }
+
+    cyclesService
+      .addCycleToFavorites(workspaceSlug as string, projectId as string, {
+        cycle: cycle.id,
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the cycle to favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug || !projectId || !cycle) return;
+
+    const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
+
+    switch (cycleStatus) {
+      case "current":
+      case "upcoming":
+        mutate<CurrentAndUpcomingCyclesResponse>(
+          CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
+          (prevData) => ({
+            current_cycle: (prevData?.current_cycle ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? false : c.is_favorite,
+            })),
+            upcoming_cycle: (prevData?.upcoming_cycle ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? false : c.is_favorite,
+            })),
+          }),
+          false
+        );
+        break;
+      case "completed":
+        mutate<CompletedCyclesResponse>(
+          CYCLE_COMPLETE_LIST(projectId as string),
+          (prevData) => ({
+            completed_cycles: (prevData?.completed_cycles ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? false : c.is_favorite,
+            })),
+          }),
+          false
+        );
+        break;
+      case "draft":
+        mutate<DraftCyclesResponse>(
+          CYCLE_DRAFT_LIST(projectId as string),
+          (prevData) => ({
+            draft_cycles: (prevData?.draft_cycles ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? false : c.is_favorite,
+            })),
+          }),
+          false
+        );
+        break;
+    }
+
+    cyclesService
+      .removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the cycle from favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Cycle link copied to clipboard.",
+      });
+    });
+  };
+
+  const progressIndicatorData = stateGroups.map((group, index) => ({
+    id: index,
+    name: group.title,
+    value:
+      cycle.total_issues > 0
+        ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100
+        : 0,
+    color: group.color,
+  }));
+
+  return (
+    <div>
+      <div className="flex flex-col rounded-[10px] bg-brand-surface-2 text-xs shadow">
+        <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
+          <a className="w-full">
+            <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
+              <div className="flex items-start justify-between gap-1">
+                <Tooltip tooltipContent={cycle.name} position="top-left">
+                  <h3 className="break-all text-lg font-semibold">
+                    {truncateText(cycle.name, 75)}
+                  </h3>
+                </Tooltip>
+                {cycle.is_favorite ? (
+                  <button
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleRemoveFromFavorites();
+                    }}
+                  >
+                    <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                  </button>
+                ) : (
+                  <button
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleAddToFavorites();
+                    }}
+                  >
+                    <StarIcon className="h-4 w-4 " color="#858E96" />
+                  </button>
+                )}
+              </div>
+
+              <div className="flex items-center justify-start gap-5">
+                <div className="flex items-start gap-1 ">
+                  <CalendarDaysIcon className="h-4 w-4 text-brand-base" />
+                  <span className="text-brand-secondary">Start :</span>
+                  <span>{renderShortDateWithYearFormat(startDate)}</span>
+                </div>
+                <div className="flex items-start gap-1 ">
+                  <TargetIcon className="h-4 w-4 text-brand-base" />
+                  <span className="text-brand-secondary">End :</span>
+                  <span>{renderShortDateWithYearFormat(endDate)}</span>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between mt-4">
+                <div className="flex items-center gap-2.5">
+                  {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
+                    <Image
+                      src={cycle.owned_by.avatar}
+                      height={16}
+                      width={16}
+                      className="rounded-full"
+                      alt={cycle.owned_by.first_name}
+                    />
+                  ) : (
+                    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-brand-base capitalize  bg-brand-secondary">
+                      {cycle.owned_by.first_name.charAt(0)}
+                    </span>
+                  )}
+                  <span className="text-brand-base">{cycle.owned_by.first_name}</span>
+                </div>
+                <div className="flex items-center">
+                  {!isCompleted && (
+                    <button
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleEditCycle();
+                      }}
+                      className="flex cursor-pointer items-center rounded p-1 duration-300 hover:bg-brand-surface-1"
+                    >
+                      <span>
+                        <PencilIcon className="h-4 w-4" />
+                      </span>
+                    </button>
+                  )}
+
+                  <CustomMenu width="auto" verticalEllipsis>
+                    {!isCompleted && (
+                      <CustomMenu.MenuItem
+                        onClick={(e) => {
+                          e.preventDefault();
+                          handleDeleteCycle();
+                        }}
+                      >
+                        <span className="flex items-center justify-start gap-2">
+                          <TrashIcon className="h-4 w-4" />
+                          <span>Delete cycle</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                    )}
+                    <CustomMenu.MenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleCopyText();
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <LinkIcon className="h-4 w-4" />
+                        <span>Copy cycle link</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
+              </div>
+            </div>
+          </a>
+        </Link>
+
+        <div className="flex h-full flex-col rounded-b-[10px]">
+          <Disclosure>
+            {({ open }) => (
+              <div
+                className={`flex h-full w-full flex-col border-t border-brand-base bg-brand-surface-1 ${
+                  open ? "" : "flex-row"
+                }`}
+              >
+                <div className="flex w-full items-center gap-2 px-4 py-1">
+                  <span>Progress</span>
+                  <LinearProgressIndicator data={progressIndicatorData} />
+                  <Disclosure.Button>
+                    <span className="p-1">
+                      <ChevronDownIcon
+                        className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
+                        aria-hidden="true"
+                      />
+                    </span>
+                  </Disclosure.Button>
+                </div>
+                <Transition show={open}>
+                  <Disclosure.Panel>
+                    <div className="overflow-hidden rounded-b-md bg-brand-surface-2 py-3 shadow">
+                      <div className="col-span-2 space-y-3 px-4">
+                        <div className="space-y-3 text-xs">
+                          {stateGroups.map((group) => (
+                            <div
+                              key={group.key}
+                              className="flex items-center justify-between gap-2"
+                            >
+                              <div className="flex  items-center gap-2">
+                                <span
+                                  className="block h-2 w-2 rounded-full"
+                                  style={{
+                                    backgroundColor: group.color,
+                                  }}
+                                />
+                                <h6 className="text-xs">{group.title}</h6>
+                              </div>
+                              <div>
+                                <span>
+                                  {cycle[group.key as keyof ICycle] as number}{" "}
+                                  <span className="text-brand-secondary">
+                                    -{" "}
+                                    {cycle.total_issues > 0
+                                      ? `${Math.round(
+                                          ((cycle[group.key as keyof ICycle] as number) /
+                                            cycle.total_issues) *
+                                            100
+                                        )}%`
+                                      : "0%"}
+                                  </span>
+                                </span>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </Disclosure.Panel>
+                </Transition>
+              </div>
+            )}
+          </Disclosure>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/cycles/transfer-issues-modal.tsx b/app/components/cycles/transfer-issues-modal.tsx
new file mode 100644
index 000000000..b928eea7e
--- /dev/null
+++ b/app/components/cycles/transfer-issues-modal.tsx
@@ -0,0 +1,170 @@
+import React, { useState, useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// component
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import cyclesService from "services/cycles.service";
+// hooks
+import useToast from "hooks/use-toast";
+//icons
+import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { ContrastIcon, CyclesIcon, ExclamationIcon, TransferIcon } from "components/icons";
+// fetch-key
+import { CYCLE_INCOMPLETE_LIST, CYCLE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
+// types
+import { ICycle } from "types";
+//helper
+import { getDateRangeStatus } from "helpers/date-time.helper";
+import useIssuesView from "hooks/use-issues-view";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+};
+
+export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) => {
+  const [query, setQuery] = useState("");
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId } = router.query;
+
+  const { params } = useIssuesView();
+
+  const { setToastAlert } = useToast();
+
+  const transferIssue = async (payload: any) => {
+    await cyclesService
+      .transferIssues(workspaceSlug as string, projectId as string, cycleId as string, payload)
+      .then((res) => {
+        mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
+        setToastAlert({
+          type: "success",
+          title: "Issues transfered successfully",
+          message: "Issues have been transferred successfully",
+        });
+      })
+      .catch((err) => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Issues cannot be transfer. Please try again.",
+        });
+      });
+  };
+
+  const { data: incompleteCycles } = useSWR(
+    workspaceSlug && projectId ? CYCLE_INCOMPLETE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => cyclesService.getIncompleteCycles(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const filteredOptions =
+    query === ""
+      ? incompleteCycles
+      : incompleteCycles?.filter((option) =>
+          option.name.toLowerCase().includes(query.toLowerCase())
+        );
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        handleClose();
+      }
+    };
+  }, [handleClose]);
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10">
+          <div className="mt-10 flex min-h-full items-start justify-center p-4 text-center sm:p-0 md:mt-20">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 py-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+                <div className="flex flex-col gap-4">
+                  <div className="flex items-center justify-between px-5">
+                    <div className="flex items-center gap-2">
+                      <TransferIcon className="h-4 w-5" color="#495057" />
+                      <h4 className="text-gray-700 font-medium text-[1.50rem]">Transfer Issues</h4>
+                    </div>
+                    <button onClick={handleClose}>
+                      <XMarkIcon className="h-4 w-4" />
+                    </button>
+                  </div>
+                  <div className="flex items-center gap-2 pb-3 px-5 border-b border-brand-base">
+                    <MagnifyingGlassIcon className="h-4 w-4 text-brand-secondary" />
+                    <input
+                      className="outline-none"
+                      placeholder="Search for a cycle..."
+                      onChange={(e) => setQuery(e.target.value)}
+                      value={query}
+                    />
+                  </div>
+                  <div className="flex flex-col items-start w-full gap-2 px-5">
+                    {filteredOptions ? (
+                      filteredOptions.length > 0 ? (
+                        filteredOptions.map((option: ICycle) => (
+                          <button
+                            key={option.id}
+                            className="flex items-center gap-4 px-4 py-3 text-gray-600 text-sm rounded w-full hover:bg-brand-surface-1"
+                            onClick={() => {
+                              transferIssue({
+                                new_cycle_id: option?.id,
+                              });
+                              handleClose();
+                            }}
+                          >
+                            <ContrastIcon className="h-5 w-5" />
+                            <div className="flex justify-between w-full">
+                              <span>{option?.name}</span>
+                              <span className=" flex bg-gray-200 capitalize px-2 rounded-full items-center">
+                                {getDateRangeStatus(option?.start_date, option?.end_date)}
+                              </span>
+                            </div>
+                          </button>
+                        ))
+                      ) : (
+                        <div className="flex items-center justify-center gap-4 p-5 text-sm w-full">
+                          <ExclamationIcon height={14} width={14} />
+                          <span className="text-center text-brand-secondary">
+                            You don’t have any current cycle. Please create one to transfer the
+                            issues.
+                          </span>
+                        </div>
+                      )
+                    ) : (
+                      <p className="text-center text-brand-secondary">Loading...</p>
+                    )}
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/cycles/transfer-issues.tsx b/app/components/cycles/transfer-issues.tsx
new file mode 100644
index 000000000..59a10a4d8
--- /dev/null
+++ b/app/components/cycles/transfer-issues.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// component
+import { PrimaryButton, Tooltip } from "components/ui";
+// icon
+import { ExclamationIcon, TransferIcon } from "components/icons";
+// services
+import cycleServices from "services/cycles.service";
+// fetch-key
+import { CYCLE_DETAILS } from "constants/fetch-keys";
+
+type Props = {
+  handleClick: () => void;
+};
+
+export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId } = router.query;
+
+  const { data: cycleDetails } = useSWR(
+    cycleId ? CYCLE_DETAILS(cycleId as string) : null,
+    workspaceSlug && projectId && cycleId
+      ? () =>
+          cycleServices.getCycleDetails(
+            workspaceSlug as string,
+            projectId as string,
+            cycleId as string
+          )
+      : null
+  );
+
+  const transferableIssuesCount = cycleDetails
+    ? cycleDetails.backlog_issues + cycleDetails.unstarted_issues + cycleDetails.started_issues
+    : 0;
+  return (
+    <div className="flex items-center justify-between -mt-4 mb-4">
+      <div className="flex items-center gap-2 text-sm text-brand-secondary">
+        <ExclamationIcon height={14} width={14} />
+        <span>Completed cycles are not editable.</span>
+      </div>
+
+      {transferableIssuesCount > 0 && (
+        <div>
+          <PrimaryButton onClick={handleClick} className="flex items-center gap-3 rounded-lg">
+            <TransferIcon className="h-4 w-4" color="white"/>
+            <span className="text-white">Transfer Issues</span>
+          </PrimaryButton>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/app/components/dnd/StrictModeDroppable.tsx b/app/components/dnd/StrictModeDroppable.tsx
new file mode 100644
index 000000000..9ed01d3bf
--- /dev/null
+++ b/app/components/dnd/StrictModeDroppable.tsx
@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from "react";
+
+// react beautiful dnd
+import { Droppable, DroppableProps } from "react-beautiful-dnd";
+
+const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
+  const [enabled, setEnabled] = useState(false);
+
+  useEffect(() => {
+    const animation = requestAnimationFrame(() => setEnabled(true));
+
+    return () => {
+      cancelAnimationFrame(animation);
+      setEnabled(false);
+    };
+  }, []);
+
+  if (!enabled) return null;
+
+  return <Droppable {...props}>{children}</Droppable>;
+};
+
+export default StrictModeDroppable;
diff --git a/app/components/emoji-icon-picker/emojis.json b/app/components/emoji-icon-picker/emojis.json
new file mode 100644
index 000000000..73b9b800f
--- /dev/null
+++ b/app/components/emoji-icon-picker/emojis.json
@@ -0,0 +1,1090 @@
+[
+  "8986",
+  "8987",
+  "9193",
+  "9194",
+  "9195",
+  "9196",
+  "9197",
+  "9198",
+  "9199",
+  "9200",
+  "9201",
+  "9202",
+  "9203",
+  "9208",
+  "9209",
+  "9210",
+  "9410",
+  "9748",
+  "9749",
+  "9757",
+  "9800",
+  "9801",
+  "9802",
+  "9803",
+  "9804",
+  "9805",
+  "9806",
+  "9807",
+  "9808",
+  "9809",
+  "9810",
+  "9811",
+  "9823",
+  "9855",
+  "9875",
+  "9889",
+  "9898",
+  "9899",
+  "9917",
+  "9918",
+  "9924",
+  "9925",
+  "9934",
+  "9935",
+  "9937",
+  "9939",
+  "9940",
+  "9961",
+  "9962",
+  "9968",
+  "9969",
+  "9970",
+  "9971",
+  "9972",
+  "9973",
+  "9975",
+  "9976",
+  "9977",
+  "9978",
+  "9981",
+  "9986",
+  "9989",
+  "9992",
+  "9993",
+  "9994",
+  "9995",
+  "9996",
+  "9997",
+  "9999",
+  "10002",
+  "10004",
+  "10006",
+  "10013",
+  "10017",
+  "10024",
+  "10035",
+  "10036",
+  "10052",
+  "10055",
+  "10060",
+  "10062",
+  "10067",
+  "10068",
+  "10069",
+  "10071",
+  "10083",
+  "10084",
+  "10133",
+  "10134",
+  "10135",
+  "10145",
+  "10160",
+  "10175",
+  "10548",
+  "10549",
+  "11013",
+  "11014",
+  "11015",
+  "11035",
+  "11036",
+  "11088",
+  "11093",
+  "12336",
+  "12349",
+  "12951",
+  "12953",
+  "126980",
+  "127183",
+  "127344",
+  "127345",
+  "127358",
+  "127359",
+  "127374",
+  "127377",
+  "127378",
+  "127379",
+  "127380",
+  "127381",
+  "127382",
+  "127383",
+  "127384",
+  "127385",
+  "127386",
+  "127489",
+  "127490",
+  "127514",
+  "127535",
+  "127538",
+  "127539",
+  "127540",
+  "127541",
+  "127542",
+  "127543",
+  "127544",
+  "127545",
+  "127546",
+  "127568",
+  "127569",
+  "127744",
+  "127745",
+  "127746",
+  "127747",
+  "127748",
+  "127749",
+  "127750",
+  "127751",
+  "127752",
+  "127753",
+  "127754",
+  "127755",
+  "127756",
+  "127757",
+  "127758",
+  "127759",
+  "127760",
+  "127761",
+  "127762",
+  "127763",
+  "127764",
+  "127765",
+  "127766",
+  "127767",
+  "127768",
+  "127769",
+  "127770",
+  "127771",
+  "127772",
+  "127773",
+  "127774",
+  "127775",
+  "127776",
+  "127777",
+  "127780",
+  "127781",
+  "127782",
+  "127783",
+  "127784",
+  "127785",
+  "127786",
+  "127787",
+  "127788",
+  "127789",
+  "127790",
+  "127791",
+  "127792",
+  "127793",
+  "127794",
+  "127795",
+  "127796",
+  "127797",
+  "127798",
+  "127799",
+  "127800",
+  "127801",
+  "127802",
+  "127803",
+  "127804",
+  "127805",
+  "127806",
+  "127807",
+  "127808",
+  "127809",
+  "127810",
+  "127811",
+  "127812",
+  "127813",
+  "127814",
+  "127815",
+  "127816",
+  "127817",
+  "127818",
+  "127819",
+  "127820",
+  "127821",
+  "127822",
+  "127823",
+  "127824",
+  "127825",
+  "127826",
+  "127827",
+  "127828",
+  "127829",
+  "127830",
+  "127831",
+  "127832",
+  "127833",
+  "127834",
+  "127835",
+  "127836",
+  "127837",
+  "127838",
+  "127839",
+  "127840",
+  "127841",
+  "127842",
+  "127843",
+  "127844",
+  "127845",
+  "127846",
+  "127847",
+  "127848",
+  "127849",
+  "127850",
+  "127851",
+  "127852",
+  "127853",
+  "127854",
+  "127855",
+  "127856",
+  "127857",
+  "127858",
+  "127859",
+  "127860",
+  "127861",
+  "127862",
+  "127863",
+  "127864",
+  "127865",
+  "127866",
+  "127867",
+  "127868",
+  "127869",
+  "127870",
+  "127871",
+  "127872",
+  "127873",
+  "127874",
+  "127875",
+  "127876",
+  "127877",
+  "127878",
+  "127879",
+  "127880",
+  "127881",
+  "127882",
+  "127883",
+  "127884",
+  "127885",
+  "127886",
+  "127887",
+  "127888",
+  "127889",
+  "127890",
+  "127891",
+  "127894",
+  "127895",
+  "127897",
+  "127898",
+  "127899",
+  "127902",
+  "127903",
+  "127904",
+  "127905",
+  "127906",
+  "127907",
+  "127908",
+  "127909",
+  "127910",
+  "127911",
+  "127912",
+  "127913",
+  "127914",
+  "127915",
+  "127916",
+  "127917",
+  "127918",
+  "127919",
+  "127920",
+  "127921",
+  "127922",
+  "127923",
+  "127924",
+  "127925",
+  "127926",
+  "127927",
+  "127928",
+  "127929",
+  "127930",
+  "127931",
+  "127932",
+  "127933",
+  "127934",
+  "127935",
+  "127936",
+  "127937",
+  "127938",
+  "127939",
+  "127940",
+  "127941",
+  "127942",
+  "127943",
+  "127944",
+  "127945",
+  "127946",
+  "127947",
+  "127948",
+  "127949",
+  "127950",
+  "127951",
+  "127952",
+  "127953",
+  "127954",
+  "127955",
+  "127956",
+  "127957",
+  "127958",
+  "127959",
+  "127960",
+  "127961",
+  "127962",
+  "127963",
+  "127964",
+  "127965",
+  "127966",
+  "127967",
+  "127968",
+  "127969",
+  "127970",
+  "127971",
+  "127972",
+  "127973",
+  "127974",
+  "127975",
+  "127976",
+  "127977",
+  "127978",
+  "127979",
+  "127980",
+  "127981",
+  "127982",
+  "127983",
+  "127984",
+  "127987",
+  "127988",
+  "127989",
+  "127991",
+  "127992",
+  "127993",
+  "127994",
+  "127995",
+  "127996",
+  "127997",
+  "127998",
+  "127999",
+  "128000",
+  "128001",
+  "128002",
+  "128003",
+  "128004",
+  "128005",
+  "128006",
+  "128007",
+  "128008",
+  "128009",
+  "128010",
+  "128011",
+  "128012",
+  "128013",
+  "128014",
+  "128015",
+  "128016",
+  "128017",
+  "128018",
+  "128019",
+  "128020",
+  "128021",
+  "128022",
+  "128023",
+  "128024",
+  "128025",
+  "128026",
+  "128027",
+  "128028",
+  "128029",
+  "128030",
+  "128031",
+  "128032",
+  "128033",
+  "128034",
+  "128035",
+  "128036",
+  "128037",
+  "128038",
+  "128039",
+  "128040",
+  "128041",
+  "128042",
+  "128043",
+  "128044",
+  "128045",
+  "128046",
+  "128047",
+  "128048",
+  "128049",
+  "128050",
+  "128051",
+  "128052",
+  "128053",
+  "128054",
+  "128055",
+  "128056",
+  "128057",
+  "128058",
+  "128059",
+  "128060",
+  "128061",
+  "128062",
+  "128063",
+  "128064",
+  "128065",
+  "128066",
+  "128067",
+  "128068",
+  "128069",
+  "128070",
+  "128071",
+  "128072",
+  "128073",
+  "128074",
+  "128075",
+  "128076",
+  "128077",
+  "128078",
+  "128079",
+  "128080",
+  "128081",
+  "128082",
+  "128083",
+  "128084",
+  "128085",
+  "128086",
+  "128087",
+  "128088",
+  "128089",
+  "128090",
+  "128091",
+  "128092",
+  "128093",
+  "128094",
+  "128095",
+  "128096",
+  "128097",
+  "128098",
+  "128099",
+  "128100",
+  "128101",
+  "128102",
+  "128103",
+  "128104",
+  "128105",
+  "128106",
+  "128107",
+  "128108",
+  "128109",
+  "128110",
+  "128111",
+  "128112",
+  "128113",
+  "128114",
+  "128115",
+  "128116",
+  "128117",
+  "128118",
+  "128119",
+  "128120",
+  "128121",
+  "128122",
+  "128123",
+  "128124",
+  "128125",
+  "128126",
+  "128127",
+  "128128",
+  "128129",
+  "128130",
+  "128131",
+  "128132",
+  "128133",
+  "128134",
+  "128135",
+  "128136",
+  "128137",
+  "128138",
+  "128139",
+  "128140",
+  "128141",
+  "128142",
+  "128143",
+  "128144",
+  "128145",
+  "128146",
+  "128147",
+  "128148",
+  "128149",
+  "128150",
+  "128151",
+  "128152",
+  "128153",
+  "128154",
+  "128155",
+  "128156",
+  "128157",
+  "128158",
+  "128159",
+  "128160",
+  "128161",
+  "128162",
+  "128163",
+  "128164",
+  "128165",
+  "128166",
+  "128167",
+  "128168",
+  "128169",
+  "128170",
+  "128171",
+  "128172",
+  "128173",
+  "128174",
+  "128175",
+  "128176",
+  "128177",
+  "128178",
+  "128179",
+  "128180",
+  "128181",
+  "128182",
+  "128183",
+  "128184",
+  "128185",
+  "128186",
+  "128187",
+  "128188",
+  "128189",
+  "128190",
+  "128191",
+  "128192",
+  "128193",
+  "128194",
+  "128195",
+  "128196",
+  "128197",
+  "128198",
+  "128199",
+  "128200",
+  "128201",
+  "128202",
+  "128203",
+  "128204",
+  "128205",
+  "128206",
+  "128207",
+  "128208",
+  "128209",
+  "128210",
+  "128211",
+  "128212",
+  "128213",
+  "128214",
+  "128215",
+  "128216",
+  "128217",
+  "128218",
+  "128219",
+  "128220",
+  "128221",
+  "128222",
+  "128223",
+  "128224",
+  "128225",
+  "128226",
+  "128227",
+  "128228",
+  "128229",
+  "128230",
+  "128231",
+  "128232",
+  "128233",
+  "128234",
+  "128235",
+  "128236",
+  "128237",
+  "128238",
+  "128239",
+  "128240",
+  "128241",
+  "128242",
+  "128243",
+  "128244",
+  "128245",
+  "128246",
+  "128247",
+  "128248",
+  "128249",
+  "128250",
+  "128251",
+  "128252",
+  "128253",
+  "128255",
+  "128256",
+  "128257",
+  "128258",
+  "128259",
+  "128260",
+  "128261",
+  "128262",
+  "128263",
+  "128264",
+  "128265",
+  "128266",
+  "128267",
+  "128268",
+  "128269",
+  "128270",
+  "128271",
+  "128272",
+  "128273",
+  "128274",
+  "128275",
+  "128276",
+  "128277",
+  "128278",
+  "128279",
+  "128280",
+  "128281",
+  "128282",
+  "128283",
+  "128284",
+  "128285",
+  "128286",
+  "128287",
+  "128288",
+  "128289",
+  "128290",
+  "128291",
+  "128292",
+  "128293",
+  "128294",
+  "128295",
+  "128296",
+  "128297",
+  "128298",
+  "128299",
+  "128300",
+  "128301",
+  "128302",
+  "128303",
+  "128304",
+  "128305",
+  "128306",
+  "128307",
+  "128308",
+  "128309",
+  "128310",
+  "128311",
+  "128312",
+  "128313",
+  "128314",
+  "128315",
+  "128316",
+  "128317",
+  "128329",
+  "128330",
+  "128331",
+  "128332",
+  "128333",
+  "128334",
+  "128336",
+  "128337",
+  "128338",
+  "128339",
+  "128340",
+  "128341",
+  "128342",
+  "128343",
+  "128344",
+  "128345",
+  "128346",
+  "128347",
+  "128348",
+  "128349",
+  "128350",
+  "128351",
+  "128352",
+  "128353",
+  "128354",
+  "128355",
+  "128356",
+  "128357",
+  "128358",
+  "128359",
+  "128367",
+  "128368",
+  "128371",
+  "128372",
+  "128373",
+  "128374",
+  "128375",
+  "128376",
+  "128377",
+  "128378",
+  "128391",
+  "128394",
+  "128395",
+  "128396",
+  "128397",
+  "128400",
+  "128405",
+  "128406",
+  "128420",
+  "128421",
+  "128424",
+  "128433",
+  "128434",
+  "128444",
+  "128450",
+  "128451",
+  "128452",
+  "128465",
+  "128466",
+  "128467",
+  "128476",
+  "128477",
+  "128478",
+  "128481",
+  "128483",
+  "128488",
+  "128495",
+  "128499",
+  "128506",
+  "128507",
+  "128508",
+  "128509",
+  "128510",
+  "128511",
+  "128512",
+  "128513",
+  "128514",
+  "128515",
+  "128516",
+  "128517",
+  "128518",
+  "128519",
+  "128520",
+  "128521",
+  "128522",
+  "128523",
+  "128524",
+  "128525",
+  "128526",
+  "128527",
+  "128528",
+  "128529",
+  "128530",
+  "128531",
+  "128532",
+  "128533",
+  "128534",
+  "128535",
+  "128536",
+  "128537",
+  "128538",
+  "128539",
+  "128540",
+  "128541",
+  "128542",
+  "128543",
+  "128544",
+  "128545",
+  "128546",
+  "128547",
+  "128548",
+  "128549",
+  "128550",
+  "128551",
+  "128552",
+  "128553",
+  "128554",
+  "128555",
+  "128556",
+  "128557",
+  "128558",
+  "128559",
+  "128560",
+  "128561",
+  "128562",
+  "128563",
+  "128564",
+  "128565",
+  "128566",
+  "128567",
+  "128568",
+  "128569",
+  "128570",
+  "128571",
+  "128572",
+  "128573",
+  "128574",
+  "128575",
+  "128576",
+  "128577",
+  "128578",
+  "128579",
+  "128580",
+  "128581",
+  "128582",
+  "128583",
+  "128584",
+  "128585",
+  "128586",
+  "128587",
+  "128588",
+  "128589",
+  "128590",
+  "128591",
+  "128640",
+  "128641",
+  "128642",
+  "128643",
+  "128644",
+  "128645",
+  "128646",
+  "128647",
+  "128648",
+  "128649",
+  "128650",
+  "128651",
+  "128652",
+  "128653",
+  "128654",
+  "128655",
+  "128656",
+  "128657",
+  "128658",
+  "128659",
+  "128660",
+  "128661",
+  "128662",
+  "128663",
+  "128664",
+  "128665",
+  "128666",
+  "128667",
+  "128668",
+  "128669",
+  "128670",
+  "128671",
+  "128672",
+  "128673",
+  "128674",
+  "128675",
+  "128676",
+  "128677",
+  "128678",
+  "128679",
+  "128680",
+  "128681",
+  "128682",
+  "128683",
+  "128684",
+  "128685",
+  "128686",
+  "128687",
+  "128688",
+  "128689",
+  "128690",
+  "128691",
+  "128692",
+  "128693",
+  "128694",
+  "128695",
+  "128696",
+  "128697",
+  "128698",
+  "128699",
+  "128700",
+  "128701",
+  "128702",
+  "128703",
+  "128704",
+  "128705",
+  "128706",
+  "128707",
+  "128708",
+  "128709",
+  "128715",
+  "128716",
+  "128717",
+  "128718",
+  "128719",
+  "128720",
+  "128721",
+  "128722",
+  "128736",
+  "128737",
+  "128738",
+  "128739",
+  "128740",
+  "128741",
+  "128745",
+  "128747",
+  "128748",
+  "128752",
+  "128755",
+  "128756",
+  "128757",
+  "128758",
+  "128759",
+  "128760",
+  "128761",
+  "128762",
+  "129296",
+  "129297",
+  "129298",
+  "129299",
+  "129300",
+  "129301",
+  "129302",
+  "129303",
+  "129304",
+  "129305",
+  "129306",
+  "129307",
+  "129308",
+  "129309",
+  "129310",
+  "129311",
+  "129312",
+  "129313",
+  "129314",
+  "129315",
+  "129316",
+  "129317",
+  "129318",
+  "129319",
+  "129320",
+  "129321",
+  "129322",
+  "129323",
+  "129324",
+  "129325",
+  "129326",
+  "129327",
+  "129328",
+  "129329",
+  "129330",
+  "129331",
+  "129332",
+  "129333",
+  "129334",
+  "129335",
+  "129336",
+  "129337",
+  "129338",
+  "129340",
+  "129341",
+  "129342",
+  "129344",
+  "129345",
+  "129346",
+  "129347",
+  "129348",
+  "129349",
+  "129351",
+  "129352",
+  "129353",
+  "129354",
+  "129355",
+  "129356",
+  "129357",
+  "129358",
+  "129359",
+  "129360",
+  "129361",
+  "129362",
+  "129363",
+  "129364",
+  "129365",
+  "129366",
+  "129367",
+  "129368",
+  "129369",
+  "129370",
+  "129371",
+  "129372",
+  "129373",
+  "129374",
+  "129375",
+  "129376",
+  "129377",
+  "129378",
+  "129379",
+  "129380",
+  "129381",
+  "129382",
+  "129383",
+  "129384",
+  "129385",
+  "129386",
+  "129387",
+  "129408",
+  "129409",
+  "129410",
+  "129411",
+  "129412",
+  "129413",
+  "129414",
+  "129415",
+  "129416",
+  "129417",
+  "129418",
+  "129419",
+  "129420",
+  "129421",
+  "129422",
+  "129423",
+  "129424",
+  "129425",
+  "129426",
+  "129427",
+  "129428",
+  "129429",
+  "129430",
+  "129431",
+  "129472",
+  "129488",
+  "129489",
+  "129490",
+  "129491",
+  "129492",
+  "129493",
+  "129494",
+  "129495",
+  "129496",
+  "129497",
+  "129498",
+  "129499",
+  "129500",
+  "129501",
+  "129502",
+  "129503",
+  "129504",
+  "129505",
+  "129506",
+  "129507",
+  "129508",
+  "129509",
+  "129510"
+]
diff --git a/app/components/emoji-icon-picker/helpers.ts b/app/components/emoji-icon-picker/helpers.ts
new file mode 100644
index 000000000..ab59a7b07
--- /dev/null
+++ b/app/components/emoji-icon-picker/helpers.ts
@@ -0,0 +1,26 @@
+export const saveRecentEmoji = (emoji: string) => {
+  const recentEmojis = localStorage.getItem("recentEmojis");
+  if (recentEmojis) {
+    const recentEmojisArray = recentEmojis.split(",");
+    if (recentEmojisArray.includes(emoji)) {
+      const index = recentEmojisArray.indexOf(emoji);
+      recentEmojisArray.splice(index, 1);
+    }
+    recentEmojisArray.unshift(emoji);
+    if (recentEmojisArray.length > 18) {
+      recentEmojisArray.pop();
+    }
+    localStorage.setItem("recentEmojis", recentEmojisArray.join(","));
+  } else {
+    localStorage.setItem("recentEmojis", emoji);
+  }
+};
+
+export const getRecentEmojis = () => {
+  const recentEmojis = localStorage.getItem("recentEmojis");
+  if (recentEmojis) {
+    const recentEmojisArray = recentEmojis.split(",");
+    return recentEmojisArray;
+  }
+  return [];
+};
diff --git a/app/components/emoji-icon-picker/icons.json b/app/components/emoji-icon-picker/icons.json
new file mode 100644
index 000000000..f844f22d4
--- /dev/null
+++ b/app/components/emoji-icon-picker/icons.json
@@ -0,0 +1,607 @@
+{
+  "material_rounded": [
+    {
+      "name": "search"
+    },
+    {
+      "name": "home"
+    },
+    {
+      "name": "menu"
+    },
+    {
+      "name": "close"
+    },
+    {
+      "name": "settings"
+    },
+    {
+      "name": "done"
+    },
+    {
+      "name": "check_circle"
+    },
+    {
+      "name": "favorite"
+    },
+    {
+      "name": "add"
+    },
+    {
+      "name": "delete"
+    },
+    {
+      "name": "arrow_back"
+    },
+    {
+      "name": "star"
+    },
+    {
+      "name": "logout"
+    },
+    {
+      "name": "add_circle"
+    },
+    {
+      "name": "cancel"
+    },
+    {
+      "name": "arrow_drop_down"
+    },
+    {
+      "name": "more_vert"
+    },
+    {
+      "name": "check"
+    },
+    {
+      "name": "check_box"
+    },
+    {
+      "name": "toggle_on"
+    },
+    {
+      "name": "open_in_new"
+    },
+    {
+      "name": "refresh"
+    },
+    {
+      "name": "login"
+    },
+    {
+      "name": "radio_button_unchecked"
+    },
+    {
+      "name": "more_horiz"
+    },
+    {
+      "name": "apps"
+    },
+    {
+      "name": "radio_button_checked"
+    },
+    {
+      "name": "download"
+    },
+    {
+      "name": "remove"
+    },
+    {
+      "name": "toggle_off"
+    },
+    {
+      "name": "bolt"
+    },
+    {
+      "name": "arrow_upward"
+    },
+    {
+      "name": "filter_list"
+    },
+    {
+      "name": "delete_forever"
+    },
+    {
+      "name": "autorenew"
+    },
+    {
+      "name": "key"
+    },
+    {
+      "name": "sort"
+    },
+    {
+      "name": "sync"
+    },
+    {
+      "name": "add_box"
+    },
+    {
+      "name": "block"
+    },
+    {
+      "name": "restart_alt"
+    },
+    {
+      "name": "menu_open"
+    },
+    {
+      "name": "shopping_cart_checkout"
+    },
+    {
+      "name": "expand_circle_down"
+    },
+    {
+      "name": "backspace"
+    },
+    {
+      "name": "undo"
+    },
+    {
+      "name": "done_all"
+    },
+    {
+      "name": "do_not_disturb_on"
+    },
+    {
+      "name": "open_in_full"
+    },
+    {
+      "name": "double_arrow"
+    },
+    {
+      "name": "sync_alt"
+    },
+    {
+      "name": "zoom_in"
+    },
+    {
+      "name": "done_outline"
+    },
+    {
+      "name": "drag_indicator"
+    },
+    {
+      "name": "fullscreen"
+    },
+    {
+      "name": "star_half"
+    },
+    {
+      "name": "settings_accessibility"
+    },
+    {
+      "name": "reply"
+    },
+    {
+      "name": "exit_to_app"
+    },
+    {
+      "name": "unfold_more"
+    },
+    {
+      "name": "library_add"
+    },
+    {
+      "name": "cached"
+    },
+    {
+      "name": "select_check_box"
+    },
+    {
+      "name": "terminal"
+    },
+    {
+      "name": "change_circle"
+    },
+    {
+      "name": "disabled_by_default"
+    },
+    {
+      "name": "swap_horiz"
+    },
+    {
+      "name": "swap_vert"
+    },
+    {
+      "name": "app_registration"
+    },
+    {
+      "name": "download_for_offline"
+    },
+    {
+      "name": "close_fullscreen"
+    },
+    {
+      "name": "file_open"
+    },
+    {
+      "name": "minimize"
+    },
+    {
+      "name": "open_with"
+    },
+    {
+      "name": "dataset"
+    },
+    {
+      "name": "add_task"
+    },
+    {
+      "name": "start"
+    },
+    {
+      "name": "keyboard_voice"
+    },
+    {
+      "name": "create_new_folder"
+    },
+    {
+      "name": "forward"
+    },
+    {
+      "name": "download"
+    },
+    {
+      "name": "settings_applications"
+    },
+    {
+      "name": "compare_arrows"
+    },
+    {
+      "name": "redo"
+    },
+    {
+      "name": "zoom_out"
+    },
+    {
+      "name": "publish"
+    },
+    {
+      "name": "html"
+    },
+    {
+      "name": "token"
+    },
+    {
+      "name": "switch_access_shortcut"
+    },
+    {
+      "name": "fullscreen_exit"
+    },
+    {
+      "name": "sort_by_alpha"
+    },
+    {
+      "name": "delete_sweep"
+    },
+    {
+      "name": "indeterminate_check_box"
+    },
+    {
+      "name": "view_timeline"
+    },
+    {
+      "name": "settings_backup_restore"
+    },
+    {
+      "name": "arrow_drop_down_circle"
+    },
+    {
+      "name": "assistant_navigation"
+    },
+    {
+      "name": "sync_problem"
+    },
+    {
+      "name": "clear_all"
+    },
+    {
+      "name": "density_medium"
+    },
+    {
+      "name": "heart_plus"
+    },
+    {
+      "name": "filter_alt_off"
+    },
+    {
+      "name": "expand"
+    },
+    {
+      "name": "subdirectory_arrow_right"
+    },
+    {
+      "name": "download_done"
+    },
+    {
+      "name": "arrow_outward"
+    },
+    {
+      "name": "123"
+    },
+    {
+      "name": "swipe_left"
+    },
+    {
+      "name": "auto_mode"
+    },
+    {
+      "name": "saved_search"
+    },
+    {
+      "name": "place_item"
+    },
+    {
+      "name": "system_update_alt"
+    },
+    {
+      "name": "javascript"
+    },
+    {
+      "name": "search_off"
+    },
+    {
+      "name": "output"
+    },
+    {
+      "name": "select_all"
+    },
+    {
+      "name": "fit_screen"
+    },
+    {
+      "name": "swipe_up"
+    },
+    {
+      "name": "dynamic_form"
+    },
+    {
+      "name": "hide_source"
+    },
+    {
+      "name": "swipe_right"
+    },
+    {
+      "name": "switch_access_shortcut_add"
+    },
+    {
+      "name": "browse_gallery"
+    },
+    {
+      "name": "css"
+    },
+    {
+      "name": "density_small"
+    },
+    {
+      "name": "assistant_direction"
+    },
+    {
+      "name": "check_small"
+    },
+    {
+      "name": "youtube_searched_for"
+    },
+    {
+      "name": "move_up"
+    },
+    {
+      "name": "swap_horizontal_circle"
+    },
+    {
+      "name": "data_thresholding"
+    },
+    {
+      "name": "install_mobile"
+    },
+    {
+      "name": "move_down"
+    },
+    {
+      "name": "dataset_linked"
+    },
+    {
+      "name": "keyboard_command_key"
+    },
+    {
+      "name": "view_kanban"
+    },
+    {
+      "name": "swipe_down"
+    },
+    {
+      "name": "key_off"
+    },
+    {
+      "name": "transcribe"
+    },
+    {
+      "name": "send_time_extension"
+    },
+    {
+      "name": "swipe_down_alt"
+    },
+    {
+      "name": "swipe_left_alt"
+    },
+    {
+      "name": "swipe_right_alt"
+    },
+    {
+      "name": "swipe_up_alt"
+    },
+    {
+      "name": "keyboard_option_key"
+    },
+    {
+      "name": "cycle"
+    },
+    {
+      "name": "rebase"
+    },
+    {
+      "name": "rebase_edit"
+    },
+    {
+      "name": "empty_dashboard"
+    },
+    {
+      "name": "magic_exchange"
+    },
+    {
+      "name": "acute"
+    },
+    {
+      "name": "point_scan"
+    },
+    {
+      "name": "step_into"
+    },
+    {
+      "name": "cheer"
+    },
+    {
+      "name": "emoticon"
+    },
+    {
+      "name": "explosion"
+    },
+    {
+      "name": "water_bottle"
+    },
+    {
+      "name": "weather_hail"
+    },
+    {
+      "name": "syringe"
+    },
+    {
+      "name": "pill"
+    },
+    {
+      "name": "genetics"
+    },
+    {
+      "name": "allergy"
+    },
+    {
+      "name": "medical_mask"
+    },
+    {
+      "name": "body_fat"
+    },
+    {
+      "name": "barefoot"
+    },
+    {
+      "name": "infrared"
+    },
+    {
+      "name": "wrist"
+    },
+    {
+      "name": "metabolism"
+    },
+    {
+      "name": "conditions"
+    },
+    {
+      "name": "taunt"
+    },
+    {
+      "name": "altitude"
+    },
+    {
+      "name": "tibia"
+    },
+    {
+      "name": "footprint"
+    },
+    {
+      "name": "eyeglasses"
+    },
+    {
+      "name": "man_3"
+    },
+    {
+      "name": "woman_2"
+    },
+    {
+      "name": "rheumatology"
+    },
+    {
+      "name": "tornado"
+    },
+    {
+      "name": "landslide"
+    },
+    {
+      "name": "foggy"
+    },
+    {
+      "name": "severe_cold"
+    },
+    {
+      "name": "tsunami"
+    },
+    {
+      "name": "vape_free"
+    },
+    {
+      "name": "sign_language"
+    },
+    {
+      "name": "emoji_symbols"
+    },
+    {
+      "name": "clear_night"
+    },
+    {
+      "name": "emoji_food_beverage"
+    },
+    {
+      "name": "hive"
+    },
+    {
+      "name": "thunderstorm"
+    },
+    {
+      "name": "communication"
+    },
+    {
+      "name": "rocket"
+    },
+    {
+      "name": "pets"
+    },
+    {
+      "name": "public"
+    },
+    {
+      "name": "quiz"
+    },
+    {
+      "name": "mood"
+    },
+    {
+      "name": "gavel"
+    },
+    {
+      "name": "eco"
+    },
+    {
+      "name": "diamond"
+    },
+    {
+      "name": "forest"
+    },
+    {
+      "name": "rainy"
+    },
+    {
+      "name": "skull"
+    }
+  ]
+}
diff --git a/app/components/emoji-icon-picker/index.tsx b/app/components/emoji-icon-picker/index.tsx
new file mode 100644
index 000000000..6cb3b84f9
--- /dev/null
+++ b/app/components/emoji-icon-picker/index.tsx
@@ -0,0 +1,214 @@
+import React, { useEffect, useState, useRef } from "react";
+// headless ui
+import { Tab, Transition, Popover } from "@headlessui/react";
+// react colors
+import { TwitterPicker } from "react-color";
+// types
+import { Props } from "./types";
+// emojis
+import emojis from "./emojis.json";
+import icons from "./icons.json";
+// helpers
+import { getRecentEmojis, saveRecentEmoji } from "./helpers";
+import { getRandomEmoji } from "helpers/common.helper";
+// hooks
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+
+const tabOptions = [
+  {
+    key: "emoji",
+    title: "Emoji",
+  },
+  {
+    key: "icon",
+    title: "Icon",
+  },
+];
+
+const EmojiIconPicker: React.FC<Props> = ({
+  label,
+  value,
+  onChange,
+  onIconColorChange,
+  onIconsClick,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [openColorPicker, setOpenColorPicker] = useState(false);
+  const [activeColor, setActiveColor] = useState<string>("#020617");
+
+  const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
+
+  useEffect(() => {
+    setRecentEmojis(getRecentEmojis());
+  }, []);
+
+  useOutsideClickDetector(ref, () => {
+    setIsOpen(false);
+  });
+
+  useEffect(() => {
+    if (!value || value?.length === 0) onChange(getRandomEmoji());
+  }, [value, onChange]);
+
+  return (
+    <Popover className="relative z-[1]" ref={ref}>
+      <Popover.Button
+        className="rounded-full bg-brand-surface-1 p-2 outline-none sm:text-sm"
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        {label}
+      </Popover.Button>
+      <Transition
+        show={isOpen}
+        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"
+      >
+        <Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] bg-brand-surface-2 shadow-lg">
+          <div className="h-[230px] w-[250px] overflow-auto border border-brand-base rounded-[4px] bg-brand-surface-2 p-2 shadow-xl">
+            <Tab.Group as="div" className="flex h-full w-full flex-col">
+              <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
+                {tabOptions.map((tab) => (
+                  <Tab key={tab.key} as={React.Fragment}>
+                    {({ selected }) => (
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setOpenColorPicker(false);
+                        }}
+                        className={`-my-1 w-1/2 border-b pb-2 text-center text-sm font-medium outline-none transition-colors ${
+                          selected ? "border-theme text-theme" : "border-transparent text-gray-500"
+                        }`}
+                      >
+                        {tab.title}
+                      </button>
+                    )}
+                  </Tab>
+                ))}
+              </Tab.List>
+              <Tab.Panels className="flex-1 overflow-y-auto">
+                <Tab.Panel>
+                  {recentEmojis.length > 0 && (
+                    <div className="py-2">
+                      <h3 className="mb-2 ml-1 text-xs text-gray-400">Recent</h3>
+                      <div className="grid grid-cols-8 gap-2">
+                        {recentEmojis.map((emoji) => (
+                          <button
+                            type="button"
+                            className="h-4 w-4 select-none text-sm hover:bg-brand-surface-2 flex items-center justify-between"
+                            key={emoji}
+                            onClick={() => {
+                              onChange(emoji);
+                              setIsOpen(false);
+                            }}
+                          >
+                            {String.fromCodePoint(parseInt(emoji))}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                  <hr className="w-full h-[1px] mb-2" />
+                  <div>
+                    <div className="grid grid-cols-8 gap-x-2 gap-y-3">
+                      {emojis.map((emoji) => (
+                        <button
+                          type="button"
+                          className="h-4 w-4 mb-1 select-none text-sm hover:bg-brand-surface-2 flex items-center"
+                          key={emoji}
+                          onClick={() => {
+                            onChange(emoji);
+                            saveRecentEmoji(emoji);
+                            setIsOpen(false);
+                          }}
+                        >
+                          {String.fromCodePoint(parseInt(emoji))}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                </Tab.Panel>
+                <div className="py-2">
+                  <Tab.Panel className="flex h-full w-full flex-col justify-center">
+                    <div className="relative">
+                      <div className="pb-2 px-1 flex items-center justify-between">
+                        {[
+                          "#FF6B00",
+                          "#8CC1FF",
+                          "#FCBE1D",
+                          "#18904F",
+                          "#ADF672",
+                          "#05C3FF",
+                          "#000000",
+                        ].map((curCol) => (
+                          <span
+                            className="w-4 h-4 rounded-full cursor-pointer"
+                            style={{ backgroundColor: curCol }}
+                            onClick={() => setActiveColor(curCol)}
+                          />
+                        ))}
+                        <button
+                          type="button"
+                          onClick={() => setOpenColorPicker((prev) => !prev)}
+                          className="flex items-center gap-1"
+                        >
+                          <span
+                            className="w-4 h-4 rounded-full conical-gradient"
+                            style={{ backgroundColor: activeColor }}
+                          />
+                        </button>
+                      </div>
+                      <div>
+                        <TwitterPicker
+                          className={`m-2 !absolute top-4 left-4 z-10 ${
+                            openColorPicker ? "block" : "hidden"
+                          }`}
+                          color={activeColor}
+                          onChange={(color) => {
+                            setActiveColor(color.hex);
+                            if (onIconColorChange) onIconColorChange(color.hex);
+                          }}
+                          triangle="hide"
+                          width="205px"
+                        />
+                      </div>
+                    </div>
+                    <hr className="w-full h-[1px] mb-1" />
+
+                    <div className="grid grid-cols-8 mt-1 ml-1 gap-x-2 gap-y-3">
+                      {icons.material_rounded.map((icon) => (
+                        <button
+                          type="button"
+                          className="h-4 w-4 mb-1 select-none text-lg hover:bg-brand-surface-2 flex items-center"
+                          key={icon.name}
+                          onClick={() => {
+                            if (onIconsClick) onIconsClick(icon.name);
+                            setIsOpen(false);
+                          }}
+                        >
+                          <span
+                            style={{ color: activeColor }}
+                            className="material-symbols-rounded text-lg"
+                          >
+                            {icon.name}
+                          </span>
+                        </button>
+                      ))}
+                    </div>
+                  </Tab.Panel>
+                </div>
+              </Tab.Panels>
+            </Tab.Group>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+};
+
+export default EmojiIconPicker;
diff --git a/app/components/emoji-icon-picker/types.d.ts b/app/components/emoji-icon-picker/types.d.ts
new file mode 100644
index 000000000..0162640f5
--- /dev/null
+++ b/app/components/emoji-icon-picker/types.d.ts
@@ -0,0 +1,7 @@
+export type Props = {
+  label: string | React.ReactNode;
+  value: any;
+  onChange: (data: any) => void;
+  onIconsClick?: (data: any) => void;
+  onIconColorChange?: (data: any) => void;
+};
diff --git a/app/components/estimates/create-update-estimate-modal.tsx b/app/components/estimates/create-update-estimate-modal.tsx
new file mode 100644
index 000000000..3d89e5fcf
--- /dev/null
+++ b/app/components/estimates/create-update-estimate-modal.tsx
@@ -0,0 +1,407 @@
+import React, { useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import estimatesService from "services/estimates.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+// helpers
+import { checkDuplicates } from "helpers/array.helper";
+// types
+import { IEstimate, IEstimateFormData } from "types";
+// fetch-keys
+import { ESTIMATES_LIST, ESTIMATE_DETAILS } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data?: IEstimate;
+};
+
+type FormValues = {
+  name: string;
+  description: string;
+  value1: string;
+  value2: string;
+  value3: string;
+  value4: string;
+  value5: string;
+  value6: string;
+};
+
+const defaultValues: Partial<FormValues> = {
+  name: "",
+  description: "",
+  value1: "",
+  value2: "",
+  value3: "",
+  value4: "",
+  value5: "",
+  value6: "",
+};
+
+export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data, isOpen }) => {
+  const {
+    register,
+    formState: { isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<FormValues>({
+    defaultValues,
+  });
+
+  const onClose = () => {
+    handleClose();
+    reset();
+  };
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const createEstimate = async (payload: IEstimateFormData) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await estimatesService
+      .createEstimate(workspaceSlug as string, projectId as string, payload)
+      .then(() => {
+        mutate(ESTIMATES_LIST(projectId as string));
+        onClose();
+      })
+      .catch((err) => {
+        if (err.status === 400)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Estimate with that name already exists. Please try again with another name.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Estimate could not be created. Please try again.",
+          });
+      });
+  };
+
+  const updateEstimate = async (payload: IEstimateFormData) => {
+    if (!workspaceSlug || !projectId || !data) return;
+
+    mutate<IEstimate[]>(
+      ESTIMATES_LIST(projectId.toString()),
+      (prevData) =>
+        prevData?.map((p) => {
+          if (p.id === data.id)
+            return {
+              ...p,
+              name: payload.estimate.name,
+              description: payload.estimate.description,
+              points: p.points.map((point, index) => ({
+                ...point,
+                value: payload.estimate_points[index].value,
+              })),
+            };
+
+          return p;
+        }),
+      false
+    );
+
+    await estimatesService
+      .patchEstimate(workspaceSlug as string, projectId as string, data?.id as string, payload)
+      .then(() => {
+        mutate(ESTIMATES_LIST(projectId.toString()));
+        mutate(ESTIMATE_DETAILS(data.id));
+        handleClose();
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Estimate could not be updated. Please try again.",
+        });
+      });
+
+    onClose();
+  };
+
+  const onSubmit = async (formData: FormValues) => {
+    if (!formData.name || formData.name === "") {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Estimate title cannot be empty.",
+      });
+      return;
+    }
+
+    if (
+      formData.value1 === "" ||
+      formData.value2 === "" ||
+      formData.value3 === "" ||
+      formData.value4 === "" ||
+      formData.value5 === "" ||
+      formData.value6 === ""
+    ) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Estimate point cannot be empty.",
+      });
+      return;
+    }
+
+    if (
+      checkDuplicates([
+        formData.value1,
+        formData.value2,
+        formData.value3,
+        formData.value4,
+        formData.value5,
+        formData.value6,
+      ])
+    ) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Estimate points cannot have duplicate values.",
+      });
+      return;
+    }
+
+    const payload: IEstimateFormData = {
+      estimate: {
+        name: formData.name,
+        description: formData.description,
+      },
+      estimate_points: [
+        {
+          key: 0,
+          value: formData.value1,
+        },
+        {
+          key: 1,
+          value: formData.value2,
+        },
+        {
+          key: 2,
+          value: formData.value3,
+        },
+        {
+          key: 3,
+          value: formData.value4,
+        },
+        {
+          key: 4,
+          value: formData.value5,
+        },
+        {
+          key: 5,
+          value: formData.value6,
+        },
+      ],
+    };
+
+    if (data) await updateEstimate(payload);
+    else await createEstimate(payload);
+  };
+
+  useEffect(() => {
+    if (data)
+      reset({
+        ...defaultValues,
+        ...data,
+        value1: data.points[0]?.value,
+        value2: data.points[1]?.value,
+        value3: data.points[2]?.value,
+        value4: data.points[3]?.value,
+        value5: data.points[4]?.value,
+        value6: data.points[5]?.value,
+      });
+    else reset({ ...defaultValues });
+  }, [data, reset]);
+
+  return (
+    <>
+      <Transition.Root show={isOpen} as={React.Fragment}>
+        <Dialog as="div" className="relative z-20" onClose={handleClose}>
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 z-20 overflow-y-auto">
+            <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+              <Transition.Child
+                as={React.Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                enterTo="opacity-100 translate-y-0 sm:scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              >
+                <Dialog.Panel className="relative transform rounded-lg bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                  <form onSubmit={handleSubmit(onSubmit)}>
+                    <div className="space-y-3">
+                      <div className="text-lg font-medium leading-6">
+                        {data ? "Update" : "Create"} Estimate
+                      </div>
+                      <div>
+                        <Input
+                          id="name"
+                          name="name"
+                          type="name"
+                          placeholder="Title"
+                          autoComplete="off"
+                          className="resize-none text-xl"
+                          register={register}
+                        />
+                      </div>
+                      <div>
+                        <TextArea
+                          id="description"
+                          name="description"
+                          placeholder="Description"
+                          className="h-32 resize-none text-sm"
+                          register={register}
+                        />
+                      </div>
+                      <div className="grid grid-cols-3 gap-3">
+                        <div className="flex items-center">
+                          <span className="flex h-full items-center rounded-lg bg-brand-surface-2">
+                            <span className="rounded-lg px-2 text-sm text-brand-secondary">1</span>
+                            <span className="rounded-r-lg bg-brand-base">
+                              <Input
+                                id="name"
+                                name="value1"
+                                type="name"
+                                className="rounded-l-none"
+                                placeholder="Point 1"
+                                autoComplete="off"
+                                register={register}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="flex h-full items-center rounded-lg bg-brand-surface-2">
+                            <span className="rounded-lg px-2 text-sm text-brand-secondary">2</span>
+                            <span className="rounded-r-lg bg-brand-base">
+                              <Input
+                                id="name"
+                                name="value2"
+                                type="name"
+                                className="rounded-l-none"
+                                placeholder="Point 2"
+                                autoComplete="off"
+                                register={register}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="flex h-full items-center rounded-lg bg-brand-surface-2">
+                            <span className="rounded-lg px-2 text-sm text-brand-secondary">3</span>
+                            <span className="rounded-r-lg bg-brand-base">
+                              <Input
+                                id="name"
+                                name="value3"
+                                type="name"
+                                className="rounded-l-none"
+                                placeholder="Point 3"
+                                autoComplete="off"
+                                register={register}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="flex h-full items-center rounded-lg bg-brand-surface-2">
+                            <span className="rounded-lg px-2 text-sm text-brand-secondary">4</span>
+                            <span className="rounded-r-lg bg-brand-base">
+                              <Input
+                                id="name"
+                                name="value4"
+                                type="name"
+                                className="rounded-l-none"
+                                placeholder="Point 4"
+                                autoComplete="off"
+                                register={register}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="flex h-full items-center rounded-lg bg-brand-surface-2">
+                            <span className="rounded-lg px-2 text-sm text-brand-secondary">5</span>
+                            <span className="rounded-r-lg bg-brand-base">
+                              <Input
+                                id="name"
+                                name="value5"
+                                type="name"
+                                className="rounded-l-none"
+                                placeholder="Point 5"
+                                autoComplete="off"
+                                register={register}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="flex h-full items-center rounded-lg bg-brand-surface-2">
+                            <span className="rounded-lg px-2 text-sm text-brand-secondary">6</span>
+                            <span className="rounded-r-lg bg-brand-base">
+                              <Input
+                                id="name"
+                                name="value6"
+                                type="name"
+                                className="rounded-l-none"
+                                placeholder="Point 6"
+                                autoComplete="off"
+                                register={register}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="mt-5 flex justify-end gap-2">
+                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                      <PrimaryButton type="submit" loading={isSubmitting}>
+                        {data
+                          ? isSubmitting
+                            ? "Updating Estimate..."
+                            : "Update Estimate"
+                          : isSubmitting
+                          ? "Creating Estimate..."
+                          : "Create Estimate"}
+                      </PrimaryButton>
+                    </div>
+                  </form>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+};
diff --git a/app/components/estimates/delete-estimate-modal.tsx b/app/components/estimates/delete-estimate-modal.tsx
new file mode 100644
index 000000000..6b5f4c512
--- /dev/null
+++ b/app/components/estimates/delete-estimate-modal.tsx
@@ -0,0 +1,104 @@
+import React, { useEffect, useState } from "react";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// types
+import { IEstimate } from "types";
+
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// ui
+import { SecondaryButton, DangerButton } from "components/ui";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data: IEstimate;
+  handleDelete: () => void;
+};
+
+export const DeleteEstimateModal: React.FC<Props> = ({
+  isOpen,
+  handleClose,
+  data,
+  handleDelete,
+}) => {
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  useEffect(() => {
+    setIsDeleteLoading(false);
+  }, [isOpen]);
+
+  const onClose = () => {
+    setIsDeleteLoading(false);
+    handleClose();
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                <div className="flex flex-col gap-6 p-6">
+                  <div className="flex w-full items-center justify-start gap-6">
+                    <span className="place-items-center rounded-full bg-red-100 p-4">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </span>
+                    <span className="flex items-center justify-start">
+                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete Estimate</h3>
+                    </span>
+                  </div>
+                  <span>
+                    <p className="break-all text-sm leading-7 text-gray-500">
+                      Are you sure you want to delete estimate-{" "}
+                      <span className="break-all font-semibold">{data.name}</span>
+                      {""}? All of the data related to the estiamte will be permanently removed.
+                      This action cannot be undone.
+                    </p>
+                  </span>
+                  <div className="flex justify-end gap-2">
+                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
+                    <DangerButton
+                      onClick={() => {
+                        setIsDeleteLoading(true);
+                        handleDelete();
+                      }}
+                      loading={isDeleteLoading}
+                    >
+                      {isDeleteLoading ? "Deleting..." : "Delete Estimate"}
+                    </DangerButton>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/estimates/index.tsx b/app/components/estimates/index.tsx
new file mode 100644
index 000000000..f20c74780
--- /dev/null
+++ b/app/components/estimates/index.tsx
@@ -0,0 +1,3 @@
+export * from "./create-update-estimate-modal";
+export * from "./single-estimate";
+export * from "./delete-estimate-modal";
diff --git a/app/components/estimates/single-estimate.tsx b/app/components/estimates/single-estimate.tsx
new file mode 100644
index 000000000..43dcc45b7
--- /dev/null
+++ b/app/components/estimates/single-estimate.tsx
@@ -0,0 +1,145 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+// services
+import projectService from "services/project.service";
+// hooks
+import useToast from "hooks/use-toast";
+import useProjectDetails from "hooks/use-project-details";
+// components
+import { DeleteEstimateModal } from "components/estimates";
+// ui
+import { CustomMenu, SecondaryButton } from "components/ui";
+//icons
+import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IEstimate } from "types";
+
+type Props = {
+  estimate: IEstimate;
+  editEstimate: (estimate: IEstimate) => void;
+  handleEstimateDelete: (estimateId: string) => void;
+};
+
+export const SingleEstimate: React.FC<Props> = ({
+  estimate,
+  editEstimate,
+  handleEstimateDelete,
+}) => {
+  const [isDeleteEstimateModalOpen, setIsDeleteEstimateModalOpen] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { projectDetails, mutateProjectDetails } = useProjectDetails();
+
+  const handleUseEstimate = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload = {
+      estimate: estimate.id,
+    };
+
+    mutateProjectDetails((prevData) => {
+      if (!prevData) return prevData;
+
+      return { ...prevData, estimate: estimate.id };
+    }, false);
+
+    await projectService
+      .updateProject(workspaceSlug as string, projectId as string, payload)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Estimate points could not be used. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <>
+      <div className="gap-2 py-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <h6 className="flex w-[40vw] items-center gap-2 truncate text-sm font-medium">
+              {estimate.name}
+              {projectDetails?.estimate && projectDetails?.estimate === estimate.id && (
+                <span className="rounded bg-green-500/20 px-2 py-0.5 text-xs capitalize text-green-500">
+                  In use
+                </span>
+              )}
+            </h6>
+            <p className="font-sm w-[40vw] truncate text-[14px] font-normal text-brand-secondary">
+              {estimate.description}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            {projectDetails?.estimate !== estimate.id && estimate.points.length > 0 && (
+              <SecondaryButton onClick={handleUseEstimate} className="py-1">
+                Use
+              </SecondaryButton>
+            )}
+            <CustomMenu ellipsis>
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  editEstimate(estimate);
+                }}
+              >
+                <div className="flex items-center justify-start gap-2">
+                  <PencilIcon className="h-3.5 w-3.5" />
+                  <span>Edit estimate</span>
+                </div>
+              </CustomMenu.MenuItem>
+              {projectDetails?.estimate !== estimate.id && (
+                <CustomMenu.MenuItem
+                  onClick={() => {
+                    setIsDeleteEstimateModalOpen(true);
+                  }}
+                >
+                  <div className="flex items-center justify-start gap-2">
+                    <TrashIcon className="h-3.5 w-3.5" />
+                    <span>Delete estimate</span>
+                  </div>
+                </CustomMenu.MenuItem>
+              )}
+            </CustomMenu>
+          </div>
+        </div>
+        {estimate.points.length > 0 ? (
+          <div className="flex text-xs text-brand-secondary">
+            Estimate points (
+            <span className="flex gap-1">
+              {orderArrayBy(estimate.points, "key").map((point, index) => (
+                <h6 key={point.id} className="text-brand-secondary">
+                  {point.value}
+                  {index !== estimate.points.length - 1 && ","}{" "}
+                </h6>
+              ))}
+            </span>
+            )
+          </div>
+        ) : (
+          <div>
+            <p className="text-xs text-brand-secondary">No estimate points</p>
+          </div>
+        )}
+      </div>
+
+      <DeleteEstimateModal
+        isOpen={isDeleteEstimateModalOpen}
+        handleClose={() => setIsDeleteEstimateModalOpen(false)}
+        data={estimate}
+        handleDelete={() => {
+          handleEstimateDelete(estimate.id);
+          setIsDeleteEstimateModalOpen(false);
+        }}
+      />
+    </>
+  );
+};
diff --git a/app/components/icons/arrow-right.tsx b/app/components/icons/arrow-right.tsx
new file mode 100644
index 000000000..a157e5820
--- /dev/null
+++ b/app/components/icons/arrow-right.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const ArrowRightIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  color = "#858E96",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 10"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.9583 0.500103L15.0625 4.58344C15.1319 4.65288 15.1806 4.72232 15.2083 4.79177C15.2361 4.86121 15.25 4.9376 15.25 5.02094C15.25 5.10427 15.2361 5.18066 15.2083 5.2501C15.1806 5.31955 15.1319 5.38899 15.0625 5.45844L10.9583 9.5626C10.8472 9.67371 10.7014 9.73274 10.5208 9.73969C10.3403 9.74663 10.1875 9.6876 10.0625 9.5626C9.9375 9.4376 9.875 9.2883 9.875 9.11469C9.875 8.94108 9.9375 8.79177 10.0625 8.66677L13.0833 5.64594L1.125 5.64594C0.944443 5.64594 0.795138 5.58691 0.677083 5.46885C0.559026 5.3508 0.5 5.20149 0.5 5.02094C0.5 4.84038 0.559026 4.69108 0.677083 4.57302C0.795138 4.45496 0.944443 4.39594 1.125 4.39594L13.0833 4.39594L10.0625 1.3751C9.95139 1.26399 9.89236 1.12163 9.88542 0.94802C9.87847 0.774409 9.9375 0.625103 10.0625 0.500103C10.1875 0.375103 10.3368 0.312602 10.5104 0.312602C10.684 0.312602 10.8333 0.375103 10.9583 0.500103Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/app/components/icons/assignment-clipboard-icon.tsx b/app/components/icons/assignment-clipboard-icon.tsx
new file mode 100644
index 000000000..5045f048d
--- /dev/null
+++ b/app/components/icons/assignment-clipboard-icon.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const AssignmentClipboardIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  color = "#858E96",
+  className
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path fill={color} d="M2.125 19.25C1.74306 19.25 1.4184 19.1163 1.15104 18.8489C0.883681 18.5816 0.75 18.2569 0.75 17.875V4.12499C0.75 3.74305 0.883681 3.41839 1.15104 3.15103C1.4184 2.88367 1.74306 2.74999 2.125 2.74999H6.82292C6.89931 2.21527 7.14375 1.77603 7.55625 1.43228C7.96875 1.08853 8.45 0.916656 9 0.916656C9.55 0.916656 10.0312 1.08853 10.4438 1.43228C10.8562 1.77603 11.1007 2.21527 11.1771 2.74999H15.875C16.2569 2.74999 16.5816 2.88367 16.849 3.15103C17.1163 3.41839 17.25 3.74305 17.25 4.12499V17.875C17.25 18.2569 17.1163 18.5816 16.849 18.8489C16.5816 19.1163 16.2569 19.25 15.875 19.25H2.125ZM2.125 17.875H15.875V4.12499H2.125V17.875ZM4.41667 15.5833H10.6729V14.2083H4.41667V15.5833ZM4.41667 11.6875H13.5833V10.3125H4.41667V11.6875ZM4.41667 7.79166H13.5833V6.41666H4.41667V7.79166ZM9 3.73541C9.21389 3.73541 9.40104 3.6552 9.56146 3.49478C9.72188 3.33436 9.80208 3.14721 9.80208 2.93332C9.80208 2.71943 9.72188 2.53228 9.56146 2.37186C9.40104 2.21145 9.21389 2.13124 9 2.13124C8.78611 2.13124 8.59896 2.21145 8.43854 2.37186C8.27812 2.53228 8.19792 2.71943 8.19792 2.93332C8.19792 3.14721 8.27812 3.33436 8.43854 3.49478C8.59896 3.6552 8.78611 3.73541 9 3.73541ZM2.125 17.875V4.12499V17.875Z" />
+  </svg>
+);
diff --git a/app/components/icons/attachment-icon.tsx b/app/components/icons/attachment-icon.tsx
new file mode 100644
index 000000000..88fbd781e
--- /dev/null
+++ b/app/components/icons/attachment-icon.tsx
@@ -0,0 +1,59 @@
+import {
+  AudioIcon,
+  CssIcon,
+  CsvIcon,
+  DefaultIcon,
+  DocIcon,
+  FigmaIcon,
+  HtmlIcon,
+  JavaScriptIcon,
+  JpgIcon,
+  PdfIcon,
+  PngIcon,
+  SheetIcon,
+  SvgIcon,
+  TxtIcon,
+  VideoIcon,
+} from "components/icons";
+
+export const getFileIcon = (fileType: string) => {
+  switch (fileType) {
+    case "pdf":
+      return <PdfIcon height={28} width={28} />;
+    case "csv":
+      return <CsvIcon height={28} width={28} />;
+    case "xlsx":
+      return <SheetIcon height={28} width={28} />;
+    case "css":
+      return <CssIcon height={28} width={28} />;
+    case "doc":
+      return <DocIcon height={28} width={28} />;
+    case "fig":
+      return <FigmaIcon height={28} width={28} />;
+    case "html":
+      return <HtmlIcon height={28} width={28} />;
+    case "png":
+      return <PngIcon height={28} width={28} />;
+    case "jpg":
+      return <JpgIcon height={28} width={28} />;
+    case "js":
+      return <JavaScriptIcon height={28} width={28} />;
+    case "txt":
+      return <TxtIcon height={28} width={28} />;
+    case "svg":
+      return <SvgIcon height={28} width={28} />;
+    case "mp3":
+      return <AudioIcon height={28} width={28} />;
+    case "wav":
+      return <AudioIcon height={28} width={28} />;
+    case "mp4":
+      return <VideoIcon height={28} width={28} />;
+    case "wmv":
+      return <VideoIcon height={28} width={28} />;
+    case "mkv":
+      return <VideoIcon height={28} width={28} />;
+
+    default:
+      return <DefaultIcon height={28} width={28} />;
+  }
+};
diff --git a/app/components/icons/audio-file-icon.tsx b/app/components/icons/audio-file-icon.tsx
new file mode 100644
index 000000000..6aff5d7a4
--- /dev/null
+++ b/app/components/icons/audio-file-icon.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import AudioFileIcon from "public/attachment/audio-icon.png";
+
+export const AudioIcon: React.FC<Props> = ({ width, height  }) => (
+  <Image src={AudioFileIcon} height={height} width={width} alt="AudioFileIcon" />
+);
diff --git a/app/components/icons/backlog-state-icon.tsx b/app/components/icons/backlog-state-icon.tsx
new file mode 100644
index 000000000..48ae09524
--- /dev/null
+++ b/app/components/icons/backlog-state-icon.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const BacklogStateIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#858e96",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="10" cy="10" r="9" stroke={color} strokeLinecap="round" strokeDasharray="4 4" />
+  </svg>
+);
diff --git a/app/components/icons/blocked-icon.tsx b/app/components/icons/blocked-icon.tsx
new file mode 100644
index 000000000..ee0024fa0
--- /dev/null
+++ b/app/components/icons/blocked-icon.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const BlockedIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 23 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.5 4.8C0.5 3.52696 1.00797 2.30606 1.91216 1.40589C2.81636 0.505713 4.04271 0 5.32143 0H21.3929C21.6913 0 21.9839 0.0827435 22.2378 0.238959C22.4917 0.395174 22.6968 0.618689 22.8303 0.884458C22.9638 1.15023 23.0203 1.44775 22.9935 1.74369C22.9667 2.03963 22.8576 2.32229 22.6786 2.56L18.5804 8L22.6786 13.44C22.8576 13.6777 22.9667 13.9604 22.9935 14.2563C23.0203 14.5522 22.9638 14.8498 22.8303 15.1155C22.6968 15.3813 22.4917 15.6048 22.2378 15.761C21.9839 15.9173 21.6913 16 21.3929 16H5.32143C4.89519 16 4.4864 16.1686 4.18501 16.4686C3.88361 16.7687 3.71429 17.1757 3.71429 17.6V22.4C3.71429 22.8243 3.54496 23.2313 3.24356 23.5314C2.94217 23.8314 2.53338 24 2.10714 24C1.6809 24 1.27212 23.8314 0.970721 23.5314C0.669323 23.2313 0.5 22.8243 0.5 22.4V4.8Z"
+        fill="#F76659"
+      />
+      <path
+        d="M8.5918 20.4812H21.084C21.26 20.4812 21.4056 20.4237 21.5207 20.3086C21.6358 20.1935 21.6934 20.0479 21.6934 19.8719C21.6934 19.6958 21.6358 19.5503 21.5207 19.4352C21.4056 19.3201 21.26 19.2625 21.084 19.2625H8.57148L10.3184 17.5156C10.4267 17.4073 10.4809 17.2719 10.4809 17.1094C10.4809 16.9469 10.4199 16.8047 10.298 16.6828C10.1762 16.5609 10.034 16.5 9.87148 16.5C9.70899 16.5 9.5668 16.5609 9.44492 16.6828L6.68242 19.4453C6.61471 19.513 6.56732 19.5807 6.54023 19.6484C6.51315 19.7161 6.49961 19.7906 6.49961 19.8719C6.49961 19.9531 6.51315 20.0276 6.54023 20.0953C6.56732 20.163 6.61471 20.2307 6.68242 20.2984L9.44492 23.0609C9.58034 23.1964 9.72591 23.2607 9.88164 23.2539C10.0374 23.2471 10.1762 23.1828 10.298 23.0609C10.4199 22.9391 10.4809 22.7935 10.4809 22.6242C10.4809 22.4549 10.4267 22.3161 10.3184 22.2078L8.5918 20.4812Z"
+        fill="#F76659"
+      />
+    </svg>
+  );
diff --git a/app/components/icons/blocker-icon.tsx b/app/components/icons/blocker-icon.tsx
new file mode 100644
index 000000000..093728cd8
--- /dev/null
+++ b/app/components/icons/blocker-icon.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const BlockerIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 23 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 4.8C0 3.52696 0.507971 2.30606 1.41216 1.40589C2.31636 0.505713 3.54271 0 4.82143 0H20.8929C21.1913 0 21.4839 0.0827435 21.7378 0.238959C21.9917 0.395174 22.1968 0.618689 22.3303 0.884458C22.4638 1.15023 22.5203 1.44775 22.4935 1.74369C22.4667 2.03963 22.3576 2.32229 22.1786 2.56L18.0804 8L22.1786 13.44C22.3576 13.6777 22.4667 13.9604 22.4935 14.2563C22.5203 14.5522 22.4638 14.8498 22.3303 15.1155C22.1968 15.3813 21.9917 15.6048 21.7378 15.761C21.4839 15.9173 21.1913 16 20.8929 16H4.82143C4.39519 16 3.9864 16.1686 3.68501 16.4686C3.38361 16.7687 3.21429 17.1757 3.21429 17.6V22.4C3.21429 22.8243 3.04496 23.2313 2.74356 23.5314C2.44217 23.8314 2.03338 24 1.60714 24C1.1809 24 0.772119 23.8314 0.470721 23.5314C0.169323 23.2313 0 22.8243 0 22.4V4.8Z"
+        fill="#F7AE59"
+      />
+      <path
+        d="M18.5391 20.8797H6.04688C5.87083 20.8797 5.72526 20.8221 5.61016 20.707C5.49505 20.5919 5.4375 20.4464 5.4375 20.2703C5.4375 20.0943 5.49505 19.9487 5.61016 19.8336C5.72526 19.7185 5.87083 19.6609 6.04688 19.6609H18.5594L16.8125 17.9141C16.7042 17.8057 16.65 17.6703 16.65 17.5078C16.65 17.3453 16.7109 17.2031 16.8328 17.0813C16.9547 16.9594 17.0969 16.8984 17.2594 16.8984C17.4219 16.8984 17.5641 16.9594 17.6859 17.0813L20.4484 19.8438C20.5161 19.9115 20.5635 19.9792 20.5906 20.0469C20.6177 20.1146 20.6313 20.1891 20.6313 20.2703C20.6313 20.3516 20.6177 20.426 20.5906 20.4938C20.5635 20.5615 20.5161 20.6292 20.4484 20.6969L17.6859 23.4594C17.5505 23.5948 17.4049 23.6591 17.2492 23.6523C17.0935 23.6456 16.9547 23.5812 16.8328 23.4594C16.7109 23.3375 16.65 23.1919 16.65 23.0227C16.65 22.8534 16.7042 22.7146 16.8125 22.6062L18.5391 20.8797Z"
+        fill="#F7AE59"
+      />
+    </svg>
+  );
diff --git a/app/components/icons/bolt-icon.tsx b/app/components/icons/bolt-icon.tsx
new file mode 100644
index 000000000..569767aa5
--- /dev/null
+++ b/app/components/icons/bolt-icon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const BoltIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M10.6002 21C10.4169 21 10.2752 20.9417 10.1752 20.825C10.0752 20.7083 10.0419 20.5583 10.0752 20.375L11.0002 13.95H7.3502C7.16686 13.95 7.03353 13.8667 6.9502 13.7C6.86686 13.5333 6.86686 13.375 6.9502 13.225L12.8752 3.325C12.9252 3.24167 13.0085 3.16667 13.1252 3.1C13.2419 3.03333 13.3585 3 13.4752 3C13.6585 3 13.8002 3.05833 13.9002 3.175C14.0002 3.29167 14.0335 3.44167 14.0002 3.625L13.0752 10.025H16.6752C16.8585 10.025 16.996 10.1083 17.0877 10.275C17.1794 10.4417 17.1835 10.6 17.1002 10.75L11.2002 20.675C11.1502 20.7583 11.0669 20.8333 10.9502 20.9C10.8335 20.9667 10.7169 21 10.6002 21V21Z" />
+    </svg>
+  );
diff --git a/app/components/icons/calendar-month-icon.tsx b/app/components/icons/calendar-month-icon.tsx
new file mode 100644
index 000000000..a9f5042c9
--- /dev/null
+++ b/app/components/icons/calendar-month-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CalendarMonthIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 14C11.7167 14 11.4792 13.9042 11.2875 13.7125C11.0958 13.5208 11 13.2833 11 13C11 12.7167 11.0958 12.4792 11.2875 12.2875C11.4792 12.0958 11.7167 12 12 12C12.2833 12 12.5208 12.0958 12.7125 12.2875C12.9042 12.4792 13 12.7167 13 13C13 13.2833 12.9042 13.5208 12.7125 13.7125C12.5208 13.9042 12.2833 14 12 14ZM8 14C7.71667 14 7.47917 13.9042 7.2875 13.7125C7.09583 13.5208 7 13.2833 7 13C7 12.7167 7.09583 12.4792 7.2875 12.2875C7.47917 12.0958 7.71667 12 8 12C8.28333 12 8.52083 12.0958 8.7125 12.2875C8.90417 12.4792 9 12.7167 9 13C9 13.2833 8.90417 13.5208 8.7125 13.7125C8.52083 13.9042 8.28333 14 8 14ZM16 14C15.7167 14 15.4792 13.9042 15.2875 13.7125C15.0958 13.5208 15 13.2833 15 13C15 12.7167 15.0958 12.4792 15.2875 12.2875C15.4792 12.0958 15.7167 12 16 12C16.2833 12 16.5208 12.0958 16.7125 12.2875C16.9042 12.4792 17 12.7167 17 13C17 13.2833 16.9042 13.5208 16.7125 13.7125C16.5208 13.9042 16.2833 14 16 14ZM12 18C11.7167 18 11.4792 17.9042 11.2875 17.7125C11.0958 17.5208 11 17.2833 11 17C11 16.7167 11.0958 16.4792 11.2875 16.2875C11.4792 16.0958 11.7167 16 12 16C12.2833 16 12.5208 16.0958 12.7125 16.2875C12.9042 16.4792 13 16.7167 13 17C13 17.2833 12.9042 17.5208 12.7125 17.7125C12.5208 17.9042 12.2833 18 12 18ZM8 18C7.71667 18 7.47917 17.9042 7.2875 17.7125C7.09583 17.5208 7 17.2833 7 17C7 16.7167 7.09583 16.4792 7.2875 16.2875C7.47917 16.0958 7.71667 16 8 16C8.28333 16 8.52083 16.0958 8.7125 16.2875C8.90417 16.4792 9 16.7167 9 17C9 17.2833 8.90417 17.5208 8.7125 17.7125C8.52083 17.9042 8.28333 18 8 18ZM16 18C15.7167 18 15.4792 17.9042 15.2875 17.7125C15.0958 17.5208 15 17.2833 15 17C15 16.7167 15.0958 16.4792 15.2875 16.2875C15.4792 16.0958 15.7167 16 16 16C16.2833 16 16.5208 16.0958 16.7125 16.2875C16.9042 16.4792 17 16.7167 17 17C17 17.2833 16.9042 17.5208 16.7125 17.7125C16.5208 17.9042 16.2833 18 16 18ZM4.5 22C4.1 22 3.75 21.85 3.45 21.55C3.15 21.25 3 20.9 3 20.5V5C3 4.6 3.15 4.25 3.45 3.95C3.75 3.65 4.1 3.5 4.5 3.5H6.125V2.8C6.125 2.56667 6.2 2.375 6.35 2.225C6.5 2.075 6.69167 2 6.925 2C7.15833 2 7.35417 2.075 7.5125 2.225C7.67083 2.375 7.75 2.56667 7.75 2.8V3.5H16.25V2.8C16.25 2.56667 16.325 2.375 16.475 2.225C16.625 2.075 16.8167 2 17.05 2C17.2833 2 17.4792 2.075 17.6375 2.225C17.7958 2.375 17.875 2.56667 17.875 2.8V3.5H19.5C19.9 3.5 20.25 3.65 20.55 3.95C20.85 4.25 21 4.6 21 5V20.5C21 20.9 20.85 21.25 20.55 21.55C20.25 21.85 19.9 22 19.5 22H4.5ZM4.5 20.5H19.5V9.75H4.5V20.5ZM4.5 8.25H19.5V5H4.5V8.25ZM4.5 8.25V5V8.25Z"
+        fill="#212529"
+      />
+    </svg>
+  );
diff --git a/app/components/icons/cancel-icon.tsx b/app/components/icons/cancel-icon.tsx
new file mode 100644
index 000000000..c3170ca32
--- /dev/null
+++ b/app/components/icons/cancel-icon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CancelIcon: React.FC<Props> = ({ width, height, className }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M7.725 16.275C7.875 16.425 8.05 16.5 8.25 16.5C8.45 16.5 8.625 16.425 8.775 16.275L12 13.05L15.25 16.3C15.3833 16.4333 15.5542 16.4958 15.7625 16.4875C15.9708 16.4792 16.1417 16.4083 16.275 16.275C16.425 16.125 16.5 15.95 16.5 15.75C16.5 15.55 16.425 15.375 16.275 15.225L13.05 12L16.3 8.75C16.4333 8.61667 16.4958 8.44583 16.4875 8.2375C16.4792 8.02917 16.4083 7.85833 16.275 7.725C16.125 7.575 15.95 7.5 15.75 7.5C15.55 7.5 15.375 7.575 15.225 7.725L12 10.95L8.75 7.7C8.61667 7.56667 8.44583 7.50417 8.2375 7.5125C8.02917 7.52083 7.85833 7.59167 7.725 7.725C7.575 7.875 7.5 8.05 7.5 8.25C7.5 8.45 7.575 8.625 7.725 8.775L10.95 12L7.7 15.25C7.56667 15.3833 7.50417 15.5542 7.5125 15.7625C7.52083 15.9708 7.59167 16.1417 7.725 16.275ZM12 22C10.5833 22 9.26667 21.7458 8.05 21.2375C6.83333 20.7292 5.775 20.025 4.875 19.125C3.975 18.225 3.27083 17.1667 2.7625 15.95C2.25417 14.7333 2 13.4167 2 12C2 10.6 2.25417 9.29167 2.7625 8.075C3.27083 6.85833 3.975 5.8 4.875 4.9C5.775 4 6.83333 3.29167 8.05 2.775C9.26667 2.25833 10.5833 2 12 2C13.4 2 14.7083 2.25833 15.925 2.775C17.1417 3.29167 18.2 4 19.1 4.9C20 5.8 20.7083 6.85833 21.225 8.075C21.7417 9.29167 22 10.6 22 12C22 13.4167 21.7417 14.7333 21.225 15.95C20.7083 17.1667 20 18.225 19.1 19.125C18.2 20.025 17.1417 20.7292 15.925 21.2375C14.7083 21.7458 13.4 22 12 22ZM12 20.5C14.3333 20.5 16.3333 19.6667 18 18C19.6667 16.3333 20.5 14.3333 20.5 12C20.5 9.66667 19.6667 7.66667 18 6C16.3333 4.33333 14.3333 3.5 12 3.5C9.66667 3.5 7.66667 4.33333 6 6C4.33333 7.66667 3.5 9.66667 3.5 12C3.5 14.3333 4.33333 16.3333 6 18C7.66667 19.6667 9.66667 20.5 12 20.5Z" />
+    </svg>
+  );
diff --git a/app/components/icons/cancelled-state-icon.tsx b/app/components/icons/cancelled-state-icon.tsx
new file mode 100644
index 000000000..5829146ff
--- /dev/null
+++ b/app/components/icons/cancelled-state-icon.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CancelledStateIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#f2655a",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 84.36 84.36"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          className="cls-1"
+          fill="none"
+          strokeWidth={3}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          strokeWidth={3}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          strokeWidth={3}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          strokeWidth={3}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
+        />
+        <circle className="cls-2" fill={color} cx="42.18" cy="42.18" r="31.04" />
+        <path
+          className="cls-3"
+          fill="none"
+          strokeWidth={3}
+          stroke="#ffffff"
+          strokeLinecap="square"
+          strokeMiterlimit={10}
+          d="M32.64,32.44q9.54,9.75,19.09,19.48"
+        />
+        <path
+          className="cls-3"
+          fill="none"
+          strokeWidth={3}
+          stroke="#ffffff"
+          strokeLinecap="square"
+          strokeMiterlimit={10}
+          d="M32.64,51.92,51.73,32.44"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/app/components/icons/check.tsx b/app/components/icons/check.tsx
new file mode 100644
index 000000000..6ab04cd43
--- /dev/null
+++ b/app/components/icons/check.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CheckIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  color = "#858E96",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill={color}
+      d="M5.45005 11.5504C5.35005 11.5504 5.25838 11.5337 5.17505 11.5004C5.09172 11.4671 5.00838 11.4087 4.92505 11.3254L0.400049 6.80039C0.250049 6.65039 0.175049 6.46706 0.175049 6.25039C0.175049 6.03372 0.250049 5.85039 0.400049 5.70039C0.550049 5.55039 0.725049 5.47539 0.925049 5.47539C1.12505 5.47539 1.30005 5.55039 1.45005 5.70039L5.45005 9.70039L14.525 0.625391C14.675 0.475391 14.8542 0.400391 15.0625 0.400391C15.2709 0.400391 15.45 0.475391 15.6 0.625391C15.75 0.775391 15.825 0.954557 15.825 1.16289C15.825 1.37122 15.75 1.55039 15.6 1.70039L5.97505 11.3254C5.89172 11.4087 5.80838 11.4671 5.72505 11.5004C5.64172 11.5337 5.55005 11.5504 5.45005 11.5504Z"
+    />
+  </svg>
+);
diff --git a/app/components/icons/clipboard-icon.tsx b/app/components/icons/clipboard-icon.tsx
new file mode 100644
index 000000000..c96aa3fde
--- /dev/null
+++ b/app/components/icons/clipboard-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const ClipboardIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.5 21C4.08333 21 3.72917 20.8542 3.4375 20.5625C3.14583 20.2708 3 19.9167 3 19.5V4.5C3 4.08333 3.14583 3.72917 3.4375 3.4375C3.72917 3.14583 4.08333 3 4.5 3H9.625C9.70833 2.41667 9.975 1.9375 10.425 1.5625C10.875 1.1875 11.4 1 12 1C12.6 1 13.125 1.1875 13.575 1.5625C14.025 1.9375 14.2917 2.41667 14.375 3H19.5C19.9167 3 20.2708 3.14583 20.5625 3.4375C20.8542 3.72917 21 4.08333 21 4.5V19.5C21 19.9167 20.8542 20.2708 20.5625 20.5625C20.2708 20.8542 19.9167 21 19.5 21H4.5ZM4.5 19.5H19.5V4.5H4.5V19.5ZM7 17H13.825V15.5H7V17ZM7 12.75H17V11.25H7V12.75ZM7 8.5H17V7H7V8.5ZM12 4.075C12.2333 4.075 12.4375 3.9875 12.6125 3.8125C12.7875 3.6375 12.875 3.43333 12.875 3.2C12.875 2.96667 12.7875 2.7625 12.6125 2.5875C12.4375 2.4125 12.2333 2.325 12 2.325C11.7667 2.325 11.5625 2.4125 11.3875 2.5875C11.2125 2.7625 11.125 2.96667 11.125 3.2C11.125 3.43333 11.2125 3.6375 11.3875 3.8125C11.5625 3.9875 11.7667 4.075 12 4.075ZM4.5 19.5V4.5V19.5Z"
+        fill="black"
+      />
+    </svg>
+  );
diff --git a/app/components/icons/cloud-upload.tsx b/app/components/icons/cloud-upload.tsx
new file mode 100644
index 000000000..585ed4a4a
--- /dev/null
+++ b/app/components/icons/cloud-upload.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CloudUploadIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  color = "#858E96",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 22 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill={color}
+      d="M5.25 16.0004C3.81667 16.0004 2.58333 15.4837 1.55 14.4504C0.516667 13.4171 0 12.1837 0 10.7504C0 9.45039 0.4125 8.30456 1.2375 7.31289C2.0625 6.32122 3.125 5.72539 4.425 5.52539C4.75833 3.90872 5.54167 2.58789 6.775 1.56289C8.00833 0.537891 9.43333 0.0253906 11.05 0.0253906C12.9333 0.0253906 14.5125 0.704557 15.7875 2.06289C17.0625 3.42122 17.7 5.05039 17.7 6.95039V7.55039C18.9 7.51706 19.9167 7.90456 20.75 8.71289C21.5833 9.52122 22 10.5421 22 11.7754C22 12.9254 21.5833 13.9171 20.75 14.7504C19.9167 15.5837 18.925 16.0004 17.775 16.0004H11.75C11.35 16.0004 11 15.8504 10.7 15.5504C10.4 15.2504 10.25 14.9004 10.25 14.5004V8.05039L8.7 9.60039C8.55 9.75039 8.375 9.82122 8.175 9.81289C7.975 9.80456 7.8 9.72539 7.65 9.57539C7.5 9.42539 7.425 9.24622 7.425 9.03789C7.425 8.82956 7.5 8.65039 7.65 8.50039L10.475 5.67539C10.5583 5.59206 10.6417 5.53372 10.725 5.50039C10.8083 5.46706 10.9 5.45039 11 5.45039C11.1 5.45039 11.1917 5.46706 11.275 5.50039C11.3583 5.53372 11.4417 5.59206 11.525 5.67539L14.375 8.52539C14.525 8.67539 14.6 8.85039 14.6 9.05039C14.6 9.25039 14.525 9.42539 14.375 9.57539C14.225 9.72539 14.0458 9.80039 13.8375 9.80039C13.6292 9.80039 13.45 9.72539 13.3 9.57539L11.75 8.05039V14.5004H17.775C18.525 14.5004 19.1667 14.2337 19.7 13.7004C20.2333 13.1671 20.5 12.5254 20.5 11.7754C20.5 11.0254 20.2333 10.3837 19.7 9.85039C19.1667 9.31706 18.525 9.05039 17.775 9.05039H16.2V6.95039C16.2 5.46706 15.6958 4.19206 14.6875 3.12539C13.6792 2.05872 12.4333 1.52539 10.95 1.52539C9.46667 1.52539 8.21667 2.05872 7.2 3.12539C6.18333 4.19206 5.675 5.46706 5.675 6.95039H5.2C4.16667 6.95039 3.29167 7.31289 2.575 8.03789C1.85833 8.76289 1.5 9.65872 1.5 10.7254C1.5 11.7587 1.86667 12.6462 2.6 13.3879C3.33333 14.1296 4.21667 14.5004 5.25 14.5004H8C8.21667 14.5004 8.39583 14.5712 8.5375 14.7129C8.67917 14.8546 8.75 15.0337 8.75 15.2504C8.75 15.4671 8.67917 15.6462 8.5375 15.7879C8.39583 15.9296 8.21667 16.0004 8 16.0004H5.25Z"
+    />
+  </svg>
+);
diff --git a/app/components/icons/cmd-icon.tsx b/app/components/icons/cmd-icon.tsx
new file mode 100644
index 000000000..674b373cb
--- /dev/null
+++ b/app/components/icons/cmd-icon.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import CMDIcon from "public/mac-command.svg";
+
+export const MacCommandIcon: React.FC<Props> = ({ width = "14", height = "14" }) => (
+  <Image src={CMDIcon} height={height} width={width} alt="CMDIcon" />
+);
+
+export default MacCommandIcon;
diff --git a/app/components/icons/cog.tsx b/app/components/icons/cog.tsx
new file mode 100644
index 000000000..b0167fdd0
--- /dev/null
+++ b/app/components/icons/cog.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CogIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  color = "#858E96",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill={color}
+      d="M11.65 20H8.34998C8.16664 20 8.00414 19.9417 7.86248 19.825C7.72081 19.7083 7.63331 19.5583 7.59998 19.375L7.19998 16.85C6.88331 16.7333 6.54998 16.575 6.19998 16.375C5.84998 16.175 5.54164 15.9667 5.27498 15.75L2.94998 16.825C2.76664 16.9083 2.58331 16.9208 2.39998 16.8625C2.21664 16.8042 2.07498 16.6833 1.97498 16.5L0.324976 13.575C0.224976 13.4083 0.199976 13.2333 0.249976 13.05C0.299976 12.8667 0.399976 12.7167 0.549976 12.6L2.69998 11.025C2.66664 10.875 2.64581 10.7042 2.63748 10.5125C2.62914 10.3208 2.62498 10.15 2.62498 10C2.62498 9.85 2.62914 9.67917 2.63748 9.4875C2.64581 9.29583 2.66664 9.125 2.69998 8.975L0.549976 7.4C0.399976 7.28333 0.299976 7.13333 0.249976 6.95C0.199976 6.76667 0.224976 6.59167 0.324976 6.425L1.97498 3.5C2.07498 3.31667 2.21664 3.19583 2.39998 3.1375C2.58331 3.07917 2.76664 3.09167 2.94998 3.175L5.27498 4.25C5.54164 4.03333 5.84998 3.825 6.19998 3.625C6.54998 3.425 6.88331 3.275 7.19998 3.175L7.59998 0.625C7.63331 0.441667 7.72081 0.291667 7.86248 0.175C8.00414 0.0583333 8.16664 0 8.34998 0H11.65C11.8333 0 11.9958 0.0583333 12.1375 0.175C12.2791 0.291667 12.3666 0.441667 12.4 0.625L12.8 3.15C13.1166 3.26667 13.4541 3.42083 13.8125 3.6125C14.1708 3.80417 14.475 4.01667 14.725 4.25L17.05 3.175C17.2333 3.09167 17.4166 3.07917 17.6 3.1375C17.7833 3.19583 17.925 3.31667 18.025 3.5L19.675 6.4C19.775 6.56667 19.8041 6.74583 19.7625 6.9375C19.7208 7.12917 19.6166 7.28333 19.45 7.4L17.3 8.925C17.3333 9.09167 17.3541 9.27083 17.3625 9.4625C17.3708 9.65417 17.375 9.83333 17.375 10C17.375 10.1667 17.3708 10.3417 17.3625 10.525C17.3541 10.7083 17.3333 10.8833 17.3 11.05L19.45 12.6C19.6 12.7167 19.7 12.8667 19.75 13.05C19.8 13.2333 19.775 13.4083 19.675 13.575L18.025 16.5C17.925 16.6833 17.7833 16.8042 17.6 16.8625C17.4166 16.9208 17.2333 16.9083 17.05 16.825L14.725 15.75C14.4583 15.9667 14.1541 16.1792 13.8125 16.3875C13.4708 16.5958 13.1333 16.75 12.8 16.85L12.4 19.375C12.3666 19.5583 12.2791 19.7083 12.1375 19.825C11.9958 19.9417 11.8333 20 11.65 20ZM9.99998 13.25C10.9 13.25 11.6666 12.9333 12.3 12.3C12.9333 11.6667 13.25 10.9 13.25 10C13.25 9.1 12.9333 8.33333 12.3 7.7C11.6666 7.06667 10.9 6.75 9.99998 6.75C9.09998 6.75 8.33331 7.06667 7.69998 7.7C7.06664 8.33333 6.74998 9.1 6.74998 10C6.74998 10.9 7.06664 11.6667 7.69998 12.3C8.33331 12.9333 9.09998 13.25 9.99998 13.25ZM9.99998 11.75C9.51664 11.75 9.10414 11.5792 8.76248 11.2375C8.42081 10.8958 8.24998 10.4833 8.24998 10C8.24998 9.51667 8.42081 9.10417 8.76248 8.7625C9.10414 8.42083 9.51664 8.25 9.99998 8.25C10.4833 8.25 10.8958 8.42083 11.2375 8.7625C11.5791 9.10417 11.75 9.51667 11.75 10C11.75 10.4833 11.5791 10.8958 11.2375 11.2375C10.8958 11.5792 10.4833 11.75 9.99998 11.75ZM8.89997 18.5H11.1L11.45 15.7C12 15.5667 12.5208 15.3583 13.0125 15.075C13.5041 14.7917 13.95 14.45 14.35 14.05L17 15.2L18 13.4L15.65 11.675C15.7166 11.3917 15.7708 11.1125 15.8125 10.8375C15.8541 10.5625 15.875 10.2833 15.875 10C15.875 9.71667 15.8583 9.4375 15.825 9.1625C15.7916 8.8875 15.7333 8.60833 15.65 8.325L18 6.6L17 4.8L14.35 5.95C13.9666 5.51667 13.5333 5.15417 13.05 4.8625C12.5666 4.57083 12.0333 4.38333 11.45 4.3L11.1 1.5H8.89997L8.54998 4.3C7.98331 4.41667 7.45414 4.61667 6.96248 4.9C6.47081 5.18333 6.03331 5.53333 5.64998 5.95L2.99998 4.8L1.99998 6.6L4.34998 8.325C4.28331 8.60833 4.22914 8.8875 4.18748 9.1625C4.14581 9.4375 4.12498 9.71667 4.12498 10C4.12498 10.2833 4.14581 10.5625 4.18748 10.8375C4.22914 11.1125 4.28331 11.3917 4.34998 11.675L1.99998 13.4L2.99998 15.2L5.64998 14.05C6.04998 14.45 6.49581 14.7917 6.98748 15.075C7.47914 15.3583 7.99998 15.5667 8.54998 15.7L8.89997 18.5Z"
+    />
+  </svg>
+);
diff --git a/app/components/icons/color-pallette-icon.tsx b/app/components/icons/color-pallette-icon.tsx
new file mode 100644
index 000000000..23f0e41d3
--- /dev/null
+++ b/app/components/icons/color-pallette-icon.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const ColorPalletteIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#858e96",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9 16.5C7.975 16.5 7.00625 16.3031 6.09375 15.9094C5.18125 15.5156 4.38437 14.9781 3.70312 14.2969C3.02187 13.6156 2.48437 12.8187 2.09062 11.9062C1.69687 10.9937 1.5 10.025 1.5 9C1.5 7.9375 1.7 6.95 2.1 6.0375C2.5 5.125 3.04687 4.33125 3.74062 3.65625C4.43437 2.98125 5.24687 2.45312 6.17812 2.07187C7.10937 1.69062 8.10625 1.5 9.16875 1.5C10.1562 1.5 11.0937 1.66563 11.9812 1.99687C12.8687 2.32812 13.6469 2.7875 14.3156 3.375C14.9844 3.9625 15.5156 4.65937 15.9094 5.46562C16.3031 6.27187 16.5 7.15625 16.5 8.11875C16.5 9.46875 16.1062 10.5344 15.3187 11.3156C14.5312 12.0969 13.4875 12.4875 12.1875 12.4875H10.7812C10.5562 12.4875 10.3625 12.575 10.2 12.75C10.0375 12.925 9.95625 13.1187 9.95625 13.3312C9.95625 13.6687 10.0469 13.9562 10.2281 14.1937C10.4094 14.4312 10.5 14.7062 10.5 15.0187C10.5 15.4937 10.3687 15.8594 10.1062 16.1156C9.84375 16.3719 9.475 16.5 9 16.5ZM4.63125 9.4875C4.88125 9.4875 5.1 9.39375 5.2875 9.20625C5.475 9.01875 5.56875 8.8 5.56875 8.55C5.56875 8.3 5.475 8.08125 5.2875 7.89375C5.1 7.70625 4.88125 7.6125 4.63125 7.6125C4.38125 7.6125 4.1625 7.70625 3.975 7.89375C3.7875 8.08125 3.69375 8.3 3.69375 8.55C3.69375 8.8 3.7875 9.01875 3.975 9.20625C4.1625 9.39375 4.38125 9.4875 4.63125 9.4875ZM6.99375 6.3C7.24375 6.3 7.4625 6.20625 7.65 6.01875C7.8375 5.83125 7.93125 5.6125 7.93125 5.3625C7.93125 5.1125 7.8375 4.89375 7.65 4.70625C7.4625 4.51875 7.24375 4.425 6.99375 4.425C6.74375 4.425 6.525 4.51875 6.3375 4.70625C6.15 4.89375 6.05625 5.1125 6.05625 5.3625C6.05625 5.6125 6.15 5.83125 6.3375 6.01875C6.525 6.20625 6.74375 6.3 6.99375 6.3ZM11.0062 6.3C11.2562 6.3 11.475 6.20625 11.6625 6.01875C11.85 5.83125 11.9437 5.6125 11.9437 5.3625C11.9437 5.1125 11.85 4.89375 11.6625 4.70625C11.475 4.51875 11.2562 4.425 11.0062 4.425C10.7562 4.425 10.5375 4.51875 10.35 4.70625C10.1625 4.89375 10.0687 5.1125 10.0687 5.3625C10.0687 5.6125 10.1625 5.83125 10.35 6.01875C10.5375 6.20625 10.7562 6.3 11.0062 6.3ZM13.4625 9.4875C13.7125 9.4875 13.9312 9.39375 14.1187 9.20625C14.3062 9.01875 14.4 8.8 14.4 8.55C14.4 8.3 14.3062 8.08125 14.1187 7.89375C13.9312 7.70625 13.7125 7.6125 13.4625 7.6125C13.2125 7.6125 12.9937 7.70625 12.8062 7.89375C12.6187 8.08125 12.525 8.3 12.525 8.55C12.525 8.8 12.6187 9.01875 12.8062 9.20625C12.9937 9.39375 13.2125 9.4875 13.4625 9.4875ZM9 15.375C9.1375 15.375 9.23437 15.3469 9.29062 15.2906C9.34687 15.2344 9.375 15.1437 9.375 15.0187C9.375 14.8437 9.28437 14.6812 9.10312 14.5312C8.92187 14.3812 8.83125 14.05 8.83125 13.5375C8.83125 12.9625 9.01875 12.4562 9.39375 12.0187C9.76875 11.5812 10.2437 11.3625 10.8187 11.3625H12.1875C13.1375 11.3625 13.9062 11.0844 14.4937 10.5281C15.0812 9.97187 15.375 9.16875 15.375 8.11875C15.375 6.46875 14.75 5.14062 13.5 4.13437C12.25 3.12812 10.8062 2.625 9.16875 2.625C7.34375 2.625 5.79687 3.24062 4.52812 4.47187C3.25937 5.70312 2.625 7.2125 2.625 9C2.625 10.7625 3.24687 12.2656 4.49062 13.5094C5.73438 14.7531 7.2375 15.375 9 15.375Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/app/components/icons/comment-icon.tsx b/app/components/icons/comment-icon.tsx
new file mode 100644
index 000000000..c60cca4a6
--- /dev/null
+++ b/app/components/icons/comment-icon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CommentIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M2 16.1V3.05C2 2.81667 2.10833 2.58333 2.325 2.35C2.54167 2.11667 2.76667 2 3 2H15.975C16.225 2 16.4583 2.1125 16.675 2.3375C16.8917 2.5625 17 2.8 17 3.05V11.95C17 12.1833 16.8917 12.4167 16.675 12.65C16.4583 12.8833 16.225 13 15.975 13H6L2.65 16.35C2.53333 16.4667 2.39583 16.4958 2.2375 16.4375C2.07917 16.3792 2 16.2667 2 16.1ZM3.5 3.5V11.5V3.5ZM7.025 18C6.79167 18 6.5625 17.8833 6.3375 17.65C6.1125 17.4167 6 17.1833 6 16.95V14.5H18.5V6H21C21.2333 6 21.4583 6.11667 21.675 6.35C21.8917 6.58333 22 6.825 22 7.075V21.075C22 21.2417 21.9208 21.3542 21.7625 21.4125C21.6042 21.4708 21.4667 21.4417 21.35 21.325L18.025 18H7.025ZM15.5 3.5H3.5V11.5H15.5V3.5Z" />
+    </svg>
+  );
diff --git a/app/components/icons/completed-cycle-icon.tsx b/app/components/icons/completed-cycle-icon.tsx
new file mode 100644
index 000000000..615fbcb9a
--- /dev/null
+++ b/app/components/icons/completed-cycle-icon.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CompletedCycleIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color = "black",
+}) => (
+    <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} className={className}>
+      <path
+        d="m21.65 36.6-6.9-6.85 2.1-2.1 4.8 4.7 9.2-9.2 2.1 2.15ZM6 44V7h6.25V4h3.25v3h17V4h3.25v3H42v37Zm3-3h30V19.5H9Zm0-24.5h30V10H9Zm0 0V10v6.5Z"
+        fill={color}
+      />
+    </svg>
+  );
diff --git a/app/components/icons/completed-state-icon.tsx b/app/components/icons/completed-state-icon.tsx
new file mode 100644
index 000000000..584245d58
--- /dev/null
+++ b/app/components/icons/completed-state-icon.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CompletedStateIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#438af3",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 84.36 84.36"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          className="cls-1"
+          fill="none"
+          strokeWidth={3}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          strokeWidth={3}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          strokeWidth={3}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          strokeWidth={3}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
+        />
+        <circle className="cls-2" fill={color} cx="42.18" cy="42.18" r="31.04" />
+        <path
+          className="cls-3"
+          fill="none"
+          strokeWidth={3}
+          stroke="#ffffff"
+          strokeLinecap="square"
+          strokeMiterlimit={10}
+          d="M30.45,43.75l6.61,6.61L53.92,34"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/app/components/icons/contrast-icon.tsx b/app/components/icons/contrast-icon.tsx
new file mode 100644
index 000000000..5dfa47e4d
--- /dev/null
+++ b/app/components/icons/contrast-icon.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const ContrastIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  color = "#858E96",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="9" cy="9" r="5.4375" stroke={color} strokeLinecap="round" />
+    <path
+      fill={color}
+      d="M9 5.81247C9 5.39825 9.33876 5.05526 9.74548 5.13368C10.0057 5.18385 10.2608 5.26029 10.5068 5.36219C10.9845 5.56007 11.4186 5.8501 11.7842 6.21574C12.1499 6.58137 12.4399 7.01543 12.6378 7.49315C12.8357 7.97087 12.9375 8.48289 12.9375 8.99997C12.9375 9.51705 12.8357 10.0291 12.6378 10.5068C12.4399 10.9845 12.1499 11.4186 11.7842 11.7842C11.4186 12.1498 10.9845 12.4399 10.5068 12.6377C10.2608 12.7396 10.0057 12.8161 9.74548 12.8663C9.33876 12.9447 9 12.6017 9 12.1875L9 5.81247Z"
+    />
+  </svg>
+);
diff --git a/app/components/icons/css-file-icon.tsx b/app/components/icons/css-file-icon.tsx
new file mode 100644
index 000000000..54b563d37
--- /dev/null
+++ b/app/components/icons/css-file-icon.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import CssFileIcon from "public/attachment/css-icon.png";
+
+export const CssIcon: React.FC<Props> = ({ width, height  }) => (
+  <Image src={CssFileIcon} height={height} width={width} alt="CssFileIcon" />
+);
diff --git a/app/components/icons/csv-file-icon.tsx b/app/components/icons/csv-file-icon.tsx
new file mode 100644
index 000000000..63f01205e
--- /dev/null
+++ b/app/components/icons/csv-file-icon.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import CSVFileIcon from "public/attachment/csv-icon.png";
+
+export const CsvIcon: React.FC<Props> = ({ width , height }) => (
+  <Image src={CSVFileIcon} height={height} width={width} alt="CSVFileIcon" />
+);
diff --git a/app/components/icons/current-cycle-icon.tsx b/app/components/icons/current-cycle-icon.tsx
new file mode 100644
index 000000000..2b07edf2e
--- /dev/null
+++ b/app/components/icons/current-cycle-icon.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CurrentCycleIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color = "black",
+}) => (
+    <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} className={className}>
+      <path
+        d="M15.3 28.3q-.85 0-1.425-.575-.575-.575-.575-1.425 0-.85.575-1.425.575-.575 1.425-.575.85 0 1.425.575.575.575.575 1.425 0 .85-.575 1.425-.575.575-1.425.575Zm8.85 0q-.85 0-1.425-.575-.575-.575-.575-1.425 0-.85.575-1.425.575-.575 1.425-.575.85 0 1.425.575.575.575.575 1.425 0 .85-.575 1.425-.575.575-1.425.575Zm8.5 0q-.85 0-1.425-.575-.575-.575-.575-1.425 0-.85.575-1.425.575-.575 1.425-.575.85 0 1.425.575.575.575.575 1.425 0 .85-.575 1.425-.575.575-1.425.575ZM6 44V7h6.25V4h3.25v3h17V4h3.25v3H42v37Zm3-3h30V19.5H9Zm0-24.5h30V10H9Zm0 0V10v6.5Z"
+        fill={color}
+      />
+    </svg>
+  );
diff --git a/app/components/icons/cycle-icon.tsx b/app/components/icons/cycle-icon.tsx
new file mode 100644
index 000000000..4e3835dcd
--- /dev/null
+++ b/app/components/icons/cycle-icon.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CyclesIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color = "black",
+}) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.5 17.5H3.5V20.5M20.5 20.5H17.5V17.5M17.5 6.5H20.5V3.5M3.5 3.5H6.5V6.5"
+        stroke={color}
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6.5 3.647C3.789 5.4355 2 8.509 2 12C2 12.51 2.038 13.0105 2.1115 13.5M13.5 21.888C13.0035 21.9626 12.5021 22.0001 12 22C8.509 22 5.4355 20.211 3.647 17.5M21.888 10.5C21.962 10.9895 22 11.49 22 12C22 15.491 20.211 18.5645 17.5 20.353M10.5 2.1115C10.9965 2.03703 11.4979 1.99976 12 2C15.491 2 18.5645 3.789 20.353 6.5"
+        stroke={color}
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
diff --git a/app/components/icons/default-file-icon.tsx b/app/components/icons/default-file-icon.tsx
new file mode 100644
index 000000000..5323d8e07
--- /dev/null
+++ b/app/components/icons/default-file-icon.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import DefaultFileIcon from "public/attachment/default-icon.png";
+
+export const DefaultIcon: React.FC<Props> = ({ width, height  }) => (
+  <Image src={DefaultFileIcon} height={height} width={width} alt="DefaultFileIcon" />
+);
diff --git a/app/components/icons/discord-icon.tsx b/app/components/icons/discord-icon.tsx
new file mode 100644
index 000000000..cec62944e
--- /dev/null
+++ b/app/components/icons/discord-icon.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const DiscordIcon: React.FC<Props> = ({ width = "24", height = "24", className, color }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_282_229)">
+      <path
+        fill={color ? color : "#858E96"}
+        d="M16.9312 3.64157C15.6346 3.04643 14.2662 2.62206 12.8604 2.37907C12.8476 2.37657 12.8343 2.37821 12.8225 2.38375C12.8106 2.38929 12.8009 2.39845 12.7946 2.4099C12.6196 2.7224 12.4246 3.1299 12.2879 3.45157C10.7724 3.22139 9.23088 3.22139 7.7154 3.45157C7.5633 3.09515 7.39165 2.7474 7.20123 2.4099C7.19467 2.39871 7.18486 2.38977 7.1731 2.38426C7.16135 2.37876 7.1482 2.37695 7.1354 2.37907C5.72944 2.62155 4.36101 3.04595 3.06457 3.64157C3.05359 3.64617 3.04429 3.65402 3.0379 3.66407C0.444567 7.53823 -0.266266 11.3166 0.0829005 15.0474C0.0837487 15.0567 0.0864772 15.0656 0.0909192 15.0738C0.0953611 15.082 0.101423 15.0892 0.108734 15.0949C1.6184 16.2134 3.30716 17.0672 5.1029 17.6199C5.11556 17.6236 5.12903 17.6233 5.14153 17.6191C5.15403 17.615 5.16497 17.6071 5.1729 17.5966C5.55895 17.072 5.90069 16.5162 6.19457 15.9349C6.19866 15.9269 6.20103 15.9182 6.2015 15.9093C6.20198 15.9003 6.20056 15.8914 6.19733 15.8831C6.1941 15.8747 6.18914 15.8671 6.18278 15.8609C6.17641 15.8546 6.16878 15.8497 6.1604 15.8466C5.62159 15.6404 5.09995 15.3918 4.6004 15.1032C4.59124 15.0979 4.58354 15.0905 4.57797 15.0815C4.5724 15.0725 4.56914 15.0622 4.56848 15.0517C4.56782 15.0411 4.56978 15.0306 4.57418 15.021C4.57859 15.0113 4.58531 15.003 4.59373 14.9966C4.69893 14.9179 4.80229 14.8367 4.90373 14.7532C4.91261 14.746 4.92331 14.7414 4.93464 14.74C4.94597 14.7385 4.95748 14.7402 4.9679 14.7449C8.24123 16.2391 11.7846 16.2391 15.0196 14.7449C15.0301 14.74 15.0418 14.7382 15.0533 14.7397C15.0648 14.7412 15.0756 14.7459 15.0846 14.7532C15.1846 14.8349 15.2896 14.9182 15.3954 14.9966C15.4037 15.0029 15.4104 15.0111 15.4148 15.0205C15.4193 15.03 15.4213 15.0404 15.4208 15.0508C15.4203 15.0612 15.4173 15.0714 15.412 15.0804C15.4067 15.0894 15.3993 15.0969 15.3904 15.1024C14.892 15.3937 14.3699 15.6424 13.8296 15.8457C13.8212 15.849 13.8135 15.8539 13.8071 15.8603C13.8008 15.8666 13.7958 15.8743 13.7926 15.8827C13.7894 15.8911 13.788 15.9001 13.7884 15.9091C13.7889 15.9181 13.7913 15.9269 13.7954 15.9349C14.0954 16.5166 14.4387 17.0699 14.8162 17.5957C14.824 17.6064 14.8349 17.6145 14.8475 17.6186C14.86 17.6228 14.8736 17.623 14.8862 17.6191C16.685 17.0681 18.3765 16.2142 19.8879 15.0941C19.8953 15.0889 19.9014 15.0822 19.906 15.0744C19.9106 15.0667 19.9135 15.058 19.9146 15.0491C20.3312 10.7349 19.2162 6.9874 16.9571 3.66573C16.9518 3.65453 16.9426 3.64564 16.9312 3.64073V3.64157ZM6.68373 12.7749C5.6979 12.7749 4.88623 11.8707 4.88623 10.7591C4.88623 9.64823 5.6829 8.74323 6.68373 8.74323C7.69207 8.74323 8.49707 9.65657 8.48123 10.7599C8.48123 11.8707 7.68457 12.7749 6.68373 12.7749ZM13.3296 12.7749C12.3437 12.7749 11.5321 11.8707 11.5321 10.7591C11.5321 9.64823 12.3279 8.74323 13.3296 8.74323C14.3379 8.74323 15.1429 9.65657 15.1271 10.7599C15.1271 11.8707 14.3387 12.7749 13.3296 12.7749Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_282_229">
+        <rect width={width} height={height} />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/app/components/icons/doc-file-icon.tsx b/app/components/icons/doc-file-icon.tsx
new file mode 100644
index 000000000..173d40df1
--- /dev/null
+++ b/app/components/icons/doc-file-icon.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import DocFileIcon from "public/attachment/doc-icon.png";
+
+export const DocIcon: React.FC<Props> = ({ width , height }) => (
+  <Image src={DocFileIcon} height={height} width={width} alt="DocFileIcon" />
+);
diff --git a/app/components/icons/document-icon.tsx b/app/components/icons/document-icon.tsx
new file mode 100644
index 000000000..a9c599578
--- /dev/null
+++ b/app/components/icons/document-icon.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const DocumentIcon: React.FC<Props> = ({ width = "24", height = "24", className, color }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+    <path
+      fill={color}
+      d="M7.27051 14.792H12.7288C12.9094 14.792 13.0587 14.733 13.1768 14.6149C13.2948 14.4969 13.3538 14.3475 13.3538 14.167C13.3538 13.9864 13.2948 13.8371 13.1768 13.7191C13.0587 13.601 12.9094 13.542 12.7288 13.542H7.27051C7.08995 13.542 6.94065 13.601 6.82259 13.7191C6.70454 13.8371 6.64551 13.9864 6.64551 14.167C6.64551 14.3475 6.70454 14.4969 6.82259 14.6149C6.94065 14.733 7.08995 14.792 7.27051 14.792ZM7.27051 11.2503H12.7288C12.9094 11.2503 13.0587 11.1913 13.1768 11.0732C13.2948 10.9552 13.3538 10.8059 13.3538 10.6253C13.3538 10.4448 13.2948 10.2955 13.1768 10.1774C13.0587 10.0594 12.9094 10.0003 12.7288 10.0003H7.27051C7.08995 10.0003 6.94065 10.0594 6.82259 10.1774C6.70454 10.2955 6.64551 10.4448 6.64551 10.6253C6.64551 10.8059 6.70454 10.9552 6.82259 11.0732C6.94065 11.1913 7.08995 11.2503 7.27051 11.2503ZM4.58301 18.3337C4.24967 18.3337 3.95801 18.2087 3.70801 17.9587C3.45801 17.7087 3.33301 17.417 3.33301 17.0837V2.91699C3.33301 2.58366 3.45801 2.29199 3.70801 2.04199C3.95801 1.79199 4.24967 1.66699 4.58301 1.66699H11.583C11.7497 1.66699 11.9129 1.70171 12.0726 1.77116C12.2323 1.8406 12.3677 1.93088 12.4788 2.04199L16.2913 5.85449C16.4025 5.9656 16.4927 6.10102 16.5622 6.26074C16.6316 6.42046 16.6663 6.58366 16.6663 6.75033V17.0837C16.6663 17.417 16.5413 17.7087 16.2913 17.9587C16.0413 18.2087 15.7497 18.3337 15.4163 18.3337H4.58301ZM11.4788 6.16699V2.91699H4.58301V17.0837H15.4163V6.79199H12.1038C11.9233 6.79199 11.774 6.73296 11.6559 6.61491C11.5379 6.49685 11.4788 6.34755 11.4788 6.16699ZM4.58301 2.91699V6.79199V2.91699V17.0837V2.91699Z" />
+    </svg>
+  );
diff --git a/app/components/icons/edit-icon.tsx b/app/components/icons/edit-icon.tsx
new file mode 100644
index 000000000..c4e012e4d
--- /dev/null
+++ b/app/components/icons/edit-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const EditIcon: React.FC<Props> = ({ width, height, className }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 11.9751C10.9 11.9751 10 11.6251 9.3 10.9251C8.6 10.2251 8.25 9.3251 8.25 8.2251C8.25 7.1251 8.6 6.2251 9.3 5.5251C10 4.8251 10.9 4.4751 12 4.4751C13.1 4.4751 14 4.8251 14.7 5.5251C15.4 6.2251 15.75 7.1251 15.75 8.2251C15.75 9.3251 15.4 10.2251 14.7 10.9251C14 11.6251 13.1 11.9751 12 11.9751ZM18.5 20.0001H5.5C5.08333 20.0001 4.72917 19.8543 4.4375 19.5626C4.14583 19.2709 4 18.9168 4 18.5001V17.6501C4 17.0168 4.15833 16.4751 4.475 16.0251C4.79167 15.5751 5.2 15.2334 5.7 15.0001C6.81667 14.5001 7.8875 14.1251 8.9125 13.8751C9.9375 13.6251 10.9667 13.5001 12 13.5001C13.0333 13.5001 14.0583 13.6293 15.075 13.8876C16.0917 14.1459 17.1583 14.5168 18.275 15.0001C18.7917 15.2334 19.2083 15.5751 19.525 16.0251C19.8417 16.4751 20 17.0168 20 17.6501V18.5001C20 18.9168 19.8542 19.2709 19.5625 19.5626C19.2708 19.8543 18.9167 20.0001 18.5 20.0001ZM5.5 18.5001H18.5V17.6501C18.5 17.3834 18.4208 17.1293 18.2625 16.8876C18.1042 16.6459 17.9083 16.4668 17.675 16.3501C16.6083 15.8334 15.6333 15.4793 14.75 15.2876C13.8667 15.0959 12.95 15.0001 12 15.0001C11.05 15.0001 10.125 15.0959 9.225 15.2876C8.325 15.4793 7.35 15.8334 6.3 16.3501C6.06667 16.4668 5.875 16.6459 5.725 16.8876C5.575 17.1293 5.5 17.3834 5.5 17.6501V18.5001ZM12 10.4751C12.65 10.4751 13.1875 10.2626 13.6125 9.8376C14.0375 9.4126 14.25 8.8751 14.25 8.2251C14.25 7.5751 14.0375 7.0376 13.6125 6.6126C13.1875 6.1876 12.65 5.9751 12 5.9751C11.35 5.9751 10.8125 6.1876 10.3875 6.6126C9.9625 7.0376 9.75 7.5751 9.75 8.2251C9.75 8.8751 9.9625 9.4126 10.3875 9.8376C10.8125 10.2626 11.35 10.4751 12 10.4751Z"
+        fill="#212529"
+      />
+    </svg>
+  );
diff --git a/app/components/icons/ellipsis-horizontal-icon.tsx b/app/components/icons/ellipsis-horizontal-icon.tsx
new file mode 100644
index 000000000..cfdd66751
--- /dev/null
+++ b/app/components/icons/ellipsis-horizontal-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const EllipsisHorizontalIcon: React.FC<Props> = ({ width, height, className }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.2 13.1998C4.86667 13.1998 4.58333 13.0831 4.35 12.8498C4.11667 12.6165 4 12.3331 4 11.9998C4 11.6665 4.11667 11.3831 4.35 11.1498C4.58333 10.9165 4.86667 10.7998 5.2 10.7998C5.53333 10.7998 5.81667 10.9165 6.05 11.1498C6.28333 11.3831 6.4 11.6665 6.4 11.9998C6.4 12.3331 6.28333 12.6165 6.05 12.8498C5.81667 13.0831 5.53333 13.1998 5.2 13.1998ZM12 13.1998C11.6667 13.1998 11.3833 13.0831 11.15 12.8498C10.9167 12.6165 10.8 12.3331 10.8 11.9998C10.8 11.6665 10.9167 11.3831 11.15 11.1498C11.3833 10.9165 11.6667 10.7998 12 10.7998C12.3333 10.7998 12.6167 10.9165 12.85 11.1498C13.0833 11.3831 13.2 11.6665 13.2 11.9998C13.2 12.3331 13.0833 12.6165 12.85 12.8498C12.6167 13.0831 12.3333 13.1998 12 13.1998ZM18.8 13.1998C18.4667 13.1998 18.1833 13.0831 17.95 12.8498C17.7167 12.6165 17.6 12.3331 17.6 11.9998C17.6 11.6665 17.7167 11.3831 17.95 11.1498C18.1833 10.9165 18.4667 10.7998 18.8 10.7998C19.1333 10.7998 19.4167 10.9165 19.65 11.1498C19.8833 11.3831 20 11.6665 20 11.9998C20 12.3331 19.8833 12.6165 19.65 12.8498C19.4167 13.0831 19.1333 13.1998 18.8 13.1998Z"
+        fill="black"
+      />
+    </svg>
+  );
diff --git a/app/components/icons/exclamation-icon.tsx b/app/components/icons/exclamation-icon.tsx
new file mode 100644
index 000000000..d904263f5
--- /dev/null
+++ b/app/components/icons/exclamation-icon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const ExclamationIcon: React.FC<Props> = ({ width, height, className }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 14 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+     <path d="M7.55321 11.042C7.70668 11.042 7.83359 10.9918 7.93394 10.8915C8.03428 10.7911 8.08446 10.6642 8.08446 10.5107V7.30553C8.08446 7.16387 8.03133 7.04286 7.92508 6.94251C7.81883 6.84217 7.69487 6.79199 7.55321 6.79199C7.39973 6.79199 7.27283 6.84217 7.17248 6.94251C7.07213 7.04286 7.02196 7.16977 7.02196 7.32324V10.5285C7.02196 10.6701 7.07508 10.7911 7.18133 10.8915C7.28758 10.9918 7.41154 11.042 7.55321 11.042ZM7.50008 5.48158C7.66536 5.48158 7.80407 5.42845 7.91623 5.3222C8.02838 5.21595 8.08446 5.08019 8.08446 4.91491C8.08446 4.74963 8.02838 4.60796 7.91623 4.48991C7.80407 4.37185 7.66536 4.31283 7.50008 4.31283C7.3348 4.31283 7.19609 4.37185 7.08394 4.48991C6.97178 4.60796 6.91571 4.74963 6.91571 4.91491C6.91571 5.08019 6.97178 5.21595 7.08394 5.3222C7.19609 5.42845 7.3348 5.48158 7.50008 5.48158ZM7.50008 14.5837C6.49661 14.5837 5.56397 14.4036 4.70217 14.0436C3.84036 13.6835 3.09071 13.1847 2.45321 12.5472C1.81571 11.9097 1.31692 11.16 0.956852 10.2982C0.596783 9.43644 0.416748 8.5038 0.416748 7.50033C0.416748 6.50866 0.596783 5.58192 0.956852 4.72012C1.31692 3.85831 1.81571 3.10866 2.45321 2.47116C3.09071 1.83366 3.84036 1.33192 4.70217 0.965951C5.56397 0.599978 6.49661 0.416992 7.50008 0.416992C8.49175 0.416992 9.41848 0.599978 10.2803 0.965951C11.1421 1.33192 11.8917 1.83366 12.5292 2.47116C13.1667 3.10866 13.6685 3.85831 14.0345 4.72012C14.4004 5.58192 14.5834 6.50866 14.5834 7.50033C14.5834 8.5038 14.4004 9.43644 14.0345 10.2982C13.6685 11.16 13.1667 11.9097 12.5292 12.5472C11.8917 13.1847 11.1421 13.6835 10.2803 14.0436C9.41848 14.4036 8.49175 14.5837 7.50008 14.5837ZM7.50008 13.5212C9.15286 13.5212 10.5695 12.9309 11.7501 11.7503C12.9306 10.5698 13.5209 9.1531 13.5209 7.50033C13.5209 5.84755 12.9306 4.43088 11.7501 3.25033C10.5695 2.06977 9.15286 1.47949 7.50008 1.47949C5.8473 1.47949 4.43064 2.06977 3.25008 3.25033C2.06953 4.43088 1.47925 5.84755 1.47925 7.50033C1.47925 9.1531 2.06953 10.5698 3.25008 11.7503C4.43064 12.9309 5.8473 13.5212 7.50008 13.5212Z" fill="#858E96"/>
+    </svg>
+  );
diff --git a/app/components/icons/external-link-icon.tsx b/app/components/icons/external-link-icon.tsx
new file mode 100644
index 000000000..1782880b1
--- /dev/null
+++ b/app/components/icons/external-link-icon.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const ExternalLinkIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color = "black",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 122.6 122.88"
+  >
+    <g>
+      <path
+        d="M110.6,72.58c0-3.19,2.59-5.78,5.78-5.78c3.19,0,5.78,2.59,5.78,5.78v33.19c0,4.71-1.92,8.99-5.02,12.09 c-3.1,3.1-7.38,5.02-12.09,5.02H17.11c-4.71,0-8.99-1.92-12.09-5.02c-3.1-3.1-5.02-7.38-5.02-12.09V17.19 C0,12.48,1.92,8.2,5.02,5.1C8.12,2,12.4,0.08,17.11,0.08h32.98c3.19,0,5.78,2.59,5.78,5.78c0,3.19-2.59,5.78-5.78,5.78H17.11 c-1.52,0-2.9,0.63-3.91,1.63c-1.01,1.01-1.63,2.39-1.63,3.91v88.58c0,1.52,0.63,2.9,1.63,3.91c1.01,1.01,2.39,1.63,3.91,1.63h87.95 c1.52,0,2.9-0.63,3.91-1.63s1.63-2.39,1.63-3.91V72.58L110.6,72.58z M112.42,17.46L54.01,76.6c-2.23,2.27-5.89,2.3-8.16,0.07 c-2.27-2.23-2.3-5.89-0.07-8.16l56.16-56.87H78.56c-3.19,0-5.78-2.59-5.78-5.78c0-3.19,2.59-5.78,5.78-5.78h26.5 c5.12,0,11.72-0.87,15.65,3.1c2.48,2.51,1.93,22.52,1.61,34.11c-0.08,3-0.15,5.29-0.15,6.93c0,3.19-2.59,5.78-5.78,5.78 c-3.19,0-5.78-2.59-5.78-5.78c0-0.31,0.08-3.32,0.19-7.24C110.96,30.94,111.93,22.94,112.42,17.46L112.42,17.46z"
+        fill={color}
+      />
+    </g>
+  </svg>
+  // <svg
+  //   width={width}
+  //   height={height}
+  //   className={className}
+  //   viewBox="0 0 24 24"
+  //   fill="none"
+  //   xmlns="http://www.w3.org/2000/svg"
+  // >
+  //   <path
+  //     d="M5.2 13.1998C4.86667 13.1998 4.58333 13.0831 4.35 12.8498C4.11667 12.6165 4 12.3331 4 11.9998C4 11.6665 4.11667 11.3831 4.35 11.1498C4.58333 10.9165 4.86667 10.7998 5.2 10.7998C5.53333 10.7998 5.81667 10.9165 6.05 11.1498C6.28333 11.3831 6.4 11.6665 6.4 11.9998C6.4 12.3331 6.28333 12.6165 6.05 12.8498C5.81667 13.0831 5.53333 13.1998 5.2 13.1998ZM12 13.1998C11.6667 13.1998 11.3833 13.0831 11.15 12.8498C10.9167 12.6165 10.8 12.3331 10.8 11.9998C10.8 11.6665 10.9167 11.3831 11.15 11.1498C11.3833 10.9165 11.6667 10.7998 12 10.7998C12.3333 10.7998 12.6167 10.9165 12.85 11.1498C13.0833 11.3831 13.2 11.6665 13.2 11.9998C13.2 12.3331 13.0833 12.6165 12.85 12.8498C12.6167 13.0831 12.3333 13.1998 12 13.1998ZM18.8 13.1998C18.4667 13.1998 18.1833 13.0831 17.95 12.8498C17.7167 12.6165 17.6 12.3331 17.6 11.9998C17.6 11.6665 17.7167 11.3831 17.95 11.1498C18.1833 10.9165 18.4667 10.7998 18.8 10.7998C19.1333 10.7998 19.4167 10.9165 19.65 11.1498C19.8833 11.3831 20 11.6665 20 11.9998C20 12.3331 19.8833 12.6165 19.65 12.8498C19.4167 13.0831 19.1333 13.1998 18.8 13.1998Z"
+  //     fill="black"
+  //   />
+  // </svg>
+);
diff --git a/app/components/icons/figma-file-icon.tsx b/app/components/icons/figma-file-icon.tsx
new file mode 100644
index 000000000..7ff9f6ac0
--- /dev/null
+++ b/app/components/icons/figma-file-icon.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import FigmaFileIcon from "public/attachment/figma-icon.png";
+
+export const FigmaIcon: React.FC<Props> = ({ width , height }) => (
+  <Image src={FigmaFileIcon} height={height} width={width} alt="FigmaFileIcon" />
+);
diff --git a/app/components/icons/github-icon.tsx b/app/components/icons/github-icon.tsx
new file mode 100644
index 000000000..1dc7b5eea
--- /dev/null
+++ b/app/components/icons/github-icon.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const GithubIcon: React.FC<Props> = ({ width = "24", height = "24", className, color }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_282_232)">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
+        fill={color ? color : "#858E96"}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_282_232">
+        <rect width={width} height={height} />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/app/components/icons/grid-view-icons.tsx b/app/components/icons/grid-view-icons.tsx
new file mode 100644
index 000000000..f5e81daf8
--- /dev/null
+++ b/app/components/icons/grid-view-icons.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const GridViewIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  color = "#858E96",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill={color}
+      d="M2.125 8.3125C1.74688 8.3125 1.42318 8.17786 1.15391 7.90859C0.884635 7.63932 0.75 7.31563 0.75 6.9375V2.125C0.75 1.74688 0.884635 1.42318 1.15391 1.15391C1.42318 0.884635 1.74688 0.75 2.125 0.75H6.9375C7.31563 0.75 7.63932 0.884635 7.90859 1.15391C8.17786 1.42318 8.3125 1.74688 8.3125 2.125V6.9375C8.3125 7.31563 8.17786 7.63932 7.90859 7.90859C7.63932 8.17786 7.31563 8.3125 6.9375 8.3125H2.125ZM2.125 17.25C1.74688 17.25 1.42318 17.1154 1.15391 16.8461C0.884635 16.5768 0.75 16.2531 0.75 15.875V11.0625C0.75 10.6844 0.884635 10.3607 1.15391 10.0914C1.42318 9.82214 1.74688 9.6875 2.125 9.6875H6.9375C7.31563 9.6875 7.63932 9.82214 7.90859 10.0914C8.17786 10.3607 8.3125 10.6844 8.3125 11.0625V15.875C8.3125 16.2531 8.17786 16.5768 7.90859 16.8461C7.63932 17.1154 7.31563 17.25 6.9375 17.25H2.125ZM11.0625 8.3125C10.6844 8.3125 10.3607 8.17786 10.0914 7.90859C9.82214 7.63932 9.6875 7.31563 9.6875 6.9375V2.125C9.6875 1.74688 9.82214 1.42318 10.0914 1.15391C10.3607 0.884635 10.6844 0.75 11.0625 0.75H15.875C16.2531 0.75 16.5768 0.884635 16.8461 1.15391C17.1154 1.42318 17.25 1.74688 17.25 2.125V6.9375C17.25 7.31563 17.1154 7.63932 16.8461 7.90859C16.5768 8.17786 16.2531 8.3125 15.875 8.3125H11.0625ZM11.0625 17.25C10.6844 17.25 10.3607 17.1154 10.0914 16.8461C9.82214 16.5768 9.6875 16.2531 9.6875 15.875V11.0625C9.6875 10.6844 9.82214 10.3607 10.0914 10.0914C10.3607 9.82214 10.6844 9.6875 11.0625 9.6875H15.875C16.2531 9.6875 16.5768 9.82214 16.8461 10.0914C17.1154 10.3607 17.25 10.6844 17.25 11.0625V15.875C17.25 16.2531 17.1154 16.5768 16.8461 16.8461C16.5768 17.1154 16.2531 17.25 15.875 17.25H11.0625ZM2.125 6.9375H6.9375V2.125H2.125V6.9375ZM11.0625 6.9375H15.875V2.125H11.0625V6.9375ZM11.0625 15.875H15.875V11.0625H11.0625V15.875ZM2.125 15.875H6.9375V11.0625H2.125V15.875Z"
+    />
+  </svg>
+);
diff --git a/app/components/icons/heartbeat-icon.tsx b/app/components/icons/heartbeat-icon.tsx
new file mode 100644
index 000000000..ff950ca0b
--- /dev/null
+++ b/app/components/icons/heartbeat-icon.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const HeartbeatIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  color = "#858E96",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 8H5L6 4L8.66667 12L10 6L11 8H14"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/app/components/icons/html-file-icon.tsx b/app/components/icons/html-file-icon.tsx
new file mode 100644
index 000000000..9de4080b0
--- /dev/null
+++ b/app/components/icons/html-file-icon.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import HtmlFileIcon from "public/attachment/html-icon.png";
+
+export const HtmlIcon: React.FC<Props> = ({ width, height  }) => (
+  <Image src={HtmlFileIcon} height={height} width={width} alt="HtmlFileIcon" />
+);
diff --git a/app/components/icons/img-file-icon.tsx b/app/components/icons/img-file-icon.tsx
new file mode 100644
index 000000000..1333957c1
--- /dev/null
+++ b/app/components/icons/img-file-icon.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import ImgFileIcon from "public/attachment/img-icon.png";
+
+export const ImgIcon: React.FC<Props> = ({ width , height }) => (
+  <Image src={ImgFileIcon} height={height} width={width} alt="ImgFileIcon" />
+);
diff --git a/app/components/icons/import-layers.tsx b/app/components/icons/import-layers.tsx
new file mode 100644
index 000000000..701c51355
--- /dev/null
+++ b/app/components/icons/import-layers.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const ImportLayersIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  color = "#858E96",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill={color}
+      d="M10.6004 2.20111C10.6005 2.10308 10.5766 2.00653 10.5307 1.91989C10.4849 1.83325 10.4185 1.75916 10.3374 1.7041C10.2563 1.64905 10.1629 1.6147 10.0655 1.60407C9.96803 1.59343 9.86946 1.60684 9.77839 1.64311L2.73799 4.43191C2.4024 4.56473 2.11449 4.79536 1.91163 5.09387C1.70877 5.39239 1.60033 5.74499 1.60039 6.10591V12.9963C1.60037 13.0942 1.6243 13.1906 1.67009 13.2771C1.71587 13.3636 1.78212 13.4376 1.86306 13.4926C1.94401 13.5476 2.03718 13.582 2.13446 13.5928C2.23175 13.6035 2.33018 13.5903 2.42119 13.5543L2.80039 13.4043V14.6943C2.52882 14.7903 2.23817 14.8198 1.95286 14.7802C1.66756 14.7405 1.39592 14.633 1.16078 14.4667C0.925631 14.3003 0.733846 14.0799 0.601533 13.8241C0.469219 13.5682 0.40024 13.2844 0.400391 12.9963V6.10591C0.400286 5.50438 0.581015 4.91671 0.919115 4.41919C1.25722 3.92166 1.73707 3.53727 2.29639 3.31591L9.33679 0.527108C9.60109 0.42232 9.88645 0.38163 10.1695 0.40837C10.4526 0.435109 10.7252 0.528518 10.9652 0.680946C11.2052 0.833374 11.4057 1.04049 11.5503 1.28532C11.6948 1.53015 11.7793 1.80574 11.7968 2.08951L10.5992 2.56231V2.20111H10.6004ZM14.2004 4.60111C14.2003 4.50318 14.1762 4.40677 14.1303 4.32029C14.0844 4.23381 14.018 4.15988 13.9369 4.10496C13.8558 4.05005 13.7625 4.01581 13.6652 4.00523C13.5678 3.99466 13.4694 4.00808 13.3784 4.04431L5.95879 6.98311C5.73506 7.07165 5.54312 7.22541 5.40788 7.42442C5.27264 7.62343 5.20035 7.8585 5.20039 8.09911V15.3975C5.20037 15.4954 5.2243 15.5918 5.27009 15.6783C5.31587 15.7648 5.38212 15.8388 5.46307 15.8938C5.54401 15.9488 5.63718 15.9832 5.73447 15.994C5.83175 16.0047 5.93018 15.9915 6.02119 15.9555L7.60039 15.3279V16.6191L6.46399 17.0691C6.1911 17.1773 5.89587 17.2172 5.60405 17.1852C5.31223 17.1531 5.03267 17.0502 4.78974 16.8854C4.54681 16.7206 4.34788 16.4988 4.2103 16.2395C4.07272 15.9801 4.00065 15.6911 4.00039 15.3975V8.09791C4.00031 7.61668 4.14489 7.14655 4.41537 6.74853C4.68585 6.35051 5.06974 6.043 5.51719 5.86591L12.9368 2.92831C13.2096 2.82033 13.5047 2.78068 13.7964 2.81283C14.088 2.84497 14.3674 2.94793 14.6102 3.11273C14.853 3.27753 15.0518 3.49919 15.1893 3.75839C15.3268 4.01759 15.3989 4.30648 15.3992 4.59991V4.72351L14.2004 5.19991V4.59991V4.60111ZM17.5796 6.44311C17.6705 6.40713 17.7688 6.39391 17.866 6.4046C17.9632 6.4153 18.0563 6.44958 18.1372 6.50447C18.2181 6.55936 18.2844 6.63319 18.3303 6.71954C18.3761 6.80589 18.4002 6.90213 18.4004 6.99991V14.9487C18.4002 15.0688 18.3639 15.1861 18.2963 15.2853C18.2287 15.3846 18.1329 15.4613 18.0212 15.5055L10.8212 18.3579C10.7302 18.3939 10.6318 18.4071 10.5345 18.3964C10.4372 18.3856 10.344 18.3512 10.2631 18.2962C10.1821 18.2412 10.1159 18.1672 10.0701 18.0807C10.0243 17.9942 10.0004 17.8978 10.0004 17.7999V9.85231C10.0004 9.732 10.0365 9.61447 10.1041 9.51496C10.1718 9.41546 10.2677 9.33858 10.3796 9.29431L17.5796 6.44311ZM19.6004 6.99991C19.6003 6.70638 19.5283 6.41735 19.3909 6.15799C19.2535 5.89863 19.0547 5.67681 18.8119 5.51187C18.5691 5.34693 18.2896 5.24386 17.9979 5.21166C17.7061 5.17946 17.4109 5.21909 17.138 5.32711L9.93799 8.17831C9.6024 8.31113 9.31449 8.54176 9.11163 8.84028C8.90877 9.13879 8.80033 9.49139 8.80039 9.85231V17.7999C8.80034 18.0935 8.87212 18.3827 9.00948 18.6422C9.14683 18.9018 9.34559 19.1237 9.58841 19.2888C9.83124 19.4539 10.1108 19.5571 10.4026 19.5893C10.6945 19.6216 10.9898 19.582 11.2628 19.4739L18.4628 16.6215C18.7982 16.4888 19.086 16.2583 19.2888 15.96C19.4917 15.6618 19.6002 15.3094 19.6004 14.9487V6.99991Z"
+      stroke={color}
+      strokeWidth="0.25"
+    />
+  </svg>
+);
diff --git a/app/components/icons/index.ts b/app/components/icons/index.ts
new file mode 100644
index 000000000..0c2f045b6
--- /dev/null
+++ b/app/components/icons/index.ts
@@ -0,0 +1,75 @@
+export * from "./attachment-icon";
+export * from "./backlog-state-icon";
+export * from "./blocked-icon";
+export * from "./blocker-icon";
+export * from "./bolt-icon";
+export * from "./calendar-month-icon";
+export * from "./cancel-icon";
+export * from "./cancelled-state-icon";
+export * from "./clipboard-icon";
+export * from "./color-pallette-icon";
+export * from "./comment-icon";
+export * from "./completed-cycle-icon";
+export * from "./completed-state-icon";
+export * from "./current-cycle-icon";
+export * from "./cycle-icon";
+export * from "./discord-icon";
+export * from "./document-icon";
+export * from "./edit-icon";
+export * from "./ellipsis-horizontal-icon";
+export * from "./external-link-icon";
+export * from "./github-icon";
+export * from "./heartbeat-icon";
+export * from "./started-state-icon";
+export * from "./layer-diagonal-icon";
+export * from "./lock-icon";
+export * from "./menu-icon";
+export * from "./pencil-scribble-icon";
+export * from "./plus-icon";
+export * from "./priority-icon";
+export * from "./question-mark-circle-icon";
+export * from "./setting-icon";
+export * from "./signal-cellular-icon";
+export * from "./stacked-layers-icon";
+export * from "./started-state-icon";
+export * from "./state-group-icon";
+export * from "./tag-icon";
+export * from "./tune-icon";
+export * from "./unstarted-state-icon";
+export * from "./upcoming-cycle-icon";
+export * from "./user-group-icon";
+export * from "./user-icon-circle";
+export * from "./user-icon";
+export * from "./grid-view-icons";
+export * from "./assignment-clipboard-icon";
+export * from "./tick-mark-icon";
+export * from "./target-icon"
+export * from "./contrast-icon";
+export * from "./people-group-icon";
+export * from "./cmd-icon";
+export * from "./view-list-icon";
+export * from "./exclamation-icon";
+export * from "./arrow-right";
+export * from "./cog";
+export * from "./cloud-upload";
+export * from "./users";
+export * from "./import-layers";
+export * from "./check";
+export * from "./water-drop-icon";
+export * from "./transfer-icon";
+export * from "./pdf-file-icon";
+export * from "./csv-file-icon";
+export * from "./sheet-file-icon";
+export * from "./doc-file-icon";
+export * from "./html-file-icon";
+export * from "./css-file-icon";
+export * from "./js-file-icon";
+export * from "./figma-file-icon";
+export * from "./img-file-icon";
+export * from "./png-file-icon";
+export * from "./jpg-file-icon";
+export * from "./svg-file-icon";
+export * from "./txt-file-icon";
+export * from "./default-file-icon";
+export * from "./video-file-icon";
+export * from "./audio-file-icon";
\ No newline at end of file
diff --git a/app/components/icons/jpg-file-icon.tsx b/app/components/icons/jpg-file-icon.tsx
new file mode 100644
index 000000000..e88f0e47f
--- /dev/null
+++ b/app/components/icons/jpg-file-icon.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import JpgFileIcon from "public/attachment/jpg-icon.png";
+
+export const JpgIcon: React.FC<Props> = ({ width, height  }) => (
+  <Image src={JpgFileIcon} height={height} width={width} alt="JpgFileIcon" />
+);
diff --git a/app/components/icons/js-file-icon.tsx b/app/components/icons/js-file-icon.tsx
new file mode 100644
index 000000000..9f879ba6b
--- /dev/null
+++ b/app/components/icons/js-file-icon.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import JsFileIcon from "public/attachment/js-icon.png";
+
+export const JavaScriptIcon: React.FC<Props> = ({ width, height  }) => (
+  <Image src={JsFileIcon} height={height} width={width} alt="JsFileIcon" />
+);
diff --git a/app/components/icons/layer-diagonal-icon.tsx b/app/components/icons/layer-diagonal-icon.tsx
new file mode 100644
index 000000000..aff7bc66c
--- /dev/null
+++ b/app/components/icons/layer-diagonal-icon.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const LayerDiagonalIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color = "#858E96",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.40034 2.80076C8.40041 2.73541 8.38446 2.67104 8.35389 2.61328C8.32332 2.55552 8.27907 2.50613 8.225 2.46942C8.17093 2.43272 8.1087 2.40982 8.04373 2.40273C7.97877 2.39564 7.91306 2.40458 7.85234 2.42876L3.15874 4.28796C2.93501 4.3765 2.74307 4.53026 2.60783 4.72927C2.47259 4.92828 2.4003 5.16335 2.40034 5.40396V9.99756C2.40033 10.0628 2.41628 10.1271 2.44681 10.1847C2.47733 10.2424 2.5215 10.2917 2.57546 10.3284C2.62942 10.3651 2.69154 10.388 2.75639 10.3952C2.82125 10.4024 2.88687 10.3936 2.94754 10.3696L3.20034 10.2696V11.1296C3.01929 11.1936 2.82553 11.2132 2.63532 11.1868C2.44512 11.1604 2.26403 11.0887 2.10726 10.9778C1.9505 10.8669 1.82265 10.72 1.73444 10.5494C1.64623 10.3788 1.60024 10.1896 1.60034 9.99756V5.40396C1.60027 5.00294 1.72076 4.61116 1.94616 4.27948C2.17156 3.9478 2.49146 3.69153 2.86434 3.54396L7.55794 1.68476C7.73414 1.6149 7.92438 1.58777 8.11308 1.6056C8.30178 1.62343 8.48358 1.6857 8.64358 1.78732C8.80358 1.88894 8.93723 2.02701 9.03359 2.19023C9.12994 2.35345 9.18627 2.53718 9.19794 2.72636L8.39954 3.04156V2.80076H8.40034ZM10.8003 4.40076C10.8003 4.33548 10.7842 4.2712 10.7536 4.21355C10.723 4.15589 10.6787 4.10661 10.6247 4.07C10.5706 4.03339 10.5084 4.01056 10.4435 4.00351C10.3786 3.99646 10.313 4.0054 10.2523 4.02956L5.30594 5.98876C5.15679 6.04779 5.02883 6.15029 4.93867 6.28297C4.84851 6.41564 4.80031 6.57235 4.80034 6.73276V11.5984C4.80033 11.6636 4.81628 11.7279 4.84681 11.7855C4.87733 11.8432 4.9215 11.8925 4.97546 11.9292C5.02942 11.9659 5.09154 11.9888 5.15639 11.996C5.22125 12.0032 5.28687 11.9944 5.34754 11.9704L6.40034 11.552V12.4128L5.64274 12.7128C5.46081 12.7849 5.264 12.8115 5.06945 12.7901C4.8749 12.7688 4.68853 12.7002 4.52658 12.5903C4.36462 12.4804 4.232 12.3326 4.14028 12.1597C4.04856 11.9868 4.00052 11.7941 4.00034 11.5984V6.73196C4.00029 6.41114 4.09668 6.09772 4.277 5.83237C4.45732 5.56703 4.71324 5.36202 5.01154 5.24396L9.95794 3.28556C10.1398 3.21357 10.3366 3.18714 10.531 3.20857C10.7254 3.23 10.9117 3.29864 11.0735 3.40851C11.2354 3.51838 11.3679 3.66615 11.4596 3.83895C11.5513 4.01175 11.5993 4.20434 11.5995 4.39996V4.48236L10.8003 4.79996V4.39996V4.40076ZM13.0531 5.62876C13.1138 5.60477 13.1793 5.59596 13.2441 5.60309C13.3089 5.61022 13.371 5.63307 13.4249 5.66967C13.4788 5.70626 13.523 5.75548 13.5536 5.81305C13.5842 5.87061 13.6002 5.93478 13.6003 5.99996V11.2992C13.6002 11.3792 13.576 11.4574 13.531 11.5236C13.4859 11.5898 13.422 11.6409 13.3475 11.6704L8.54754 13.572C8.48687 13.596 8.42125 13.6048 8.35639 13.5976C8.29154 13.5904 8.22942 13.5675 8.17546 13.5308C8.1215 13.4941 8.07733 13.4448 8.04681 13.3871C8.01628 13.3295 8.00033 13.2652 8.00034 13.2V7.90156C8.00033 7.82136 8.02443 7.743 8.06951 7.67666C8.11459 7.61033 8.17857 7.55907 8.25314 7.52956L13.0531 5.62876V5.62876ZM14.4003 5.99996C14.4002 5.80428 14.3523 5.61159 14.2607 5.43868C14.1691 5.26577 14.0365 5.11789 13.8747 5.00793C13.7128 4.89797 13.5265 4.82926 13.332 4.80779C13.1375 4.78633 12.9407 4.81275 12.7587 4.88476L7.95874 6.78556C7.73502 6.8741 7.54307 7.02786 7.40783 7.22687C7.27259 7.42588 7.2003 7.66095 7.20034 7.90156V13.2C7.20031 13.3957 7.24816 13.5885 7.33973 13.7615C7.4313 13.9345 7.56381 14.0825 7.72569 14.1926C7.88758 14.3026 8.07393 14.3714 8.26849 14.3929C8.46306 14.4144 8.65993 14.388 8.84194 14.316L13.6419 12.4144C13.8655 12.3259 14.0574 12.1722 14.1926 11.9734C14.3279 11.7745 14.4002 11.5396 14.4003 11.2992V5.99996Z"
+      fill={color}
+      stroke={color}
+      strokeWidth="0.25"
+    />
+  </svg>
+);
diff --git a/app/components/icons/lock-icon.tsx b/app/components/icons/lock-icon.tsx
new file mode 100644
index 000000000..d0c9cffb7
--- /dev/null
+++ b/app/components/icons/lock-icon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const LockIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 25 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M6 22C5.58333 22 5.22917 21.8542 4.9375 21.5625C4.64583 21.2708 4.5 20.9167 4.5 20.5V9.65C4.5 9.23333 4.64583 8.87917 4.9375 8.5875C5.22917 8.29583 5.58333 8.15 6 8.15H7.75V5.75C7.75 4.43333 8.2125 3.3125 9.1375 2.3875C10.0625 1.4625 11.1833 1 12.5 1C13.8167 1 14.9375 1.4625 15.8625 2.3875C16.7875 3.3125 17.25 4.43333 17.25 5.75V8.15H19C19.4167 8.15 19.7708 8.29583 20.0625 8.5875C20.3542 8.87917 20.5 9.23333 20.5 9.65V20.5C20.5 20.9167 20.3542 21.2708 20.0625 21.5625C19.7708 21.8542 19.4167 22 19 22H6ZM6 20.5H19V9.65H6V20.5ZM12.5 17C13.0333 17 13.4875 16.8167 13.8625 16.45C14.2375 16.0833 14.425 15.6417 14.425 15.125C14.425 14.625 14.2375 14.1708 13.8625 13.7625C13.4875 13.3542 13.0333 13.15 12.5 13.15C11.9667 13.15 11.5125 13.3542 11.1375 13.7625C10.7625 14.1708 10.575 14.625 10.575 15.125C10.575 15.6417 10.7625 16.0833 11.1375 16.45C11.5125 16.8167 11.9667 17 12.5 17ZM9.25 8.15H15.75V5.75C15.75 4.85 15.4333 4.08333 14.8 3.45C14.1667 2.81667 13.4 2.5 12.5 2.5C11.6 2.5 10.8333 2.81667 10.2 3.45C9.56667 4.08333 9.25 4.85 9.25 5.75V8.15ZM6 20.5V9.65V20.5Z" />
+    </svg>
+  );
diff --git a/app/components/icons/menu-icon.tsx b/app/components/icons/menu-icon.tsx
new file mode 100644
index 000000000..0a8816b75
--- /dev/null
+++ b/app/components/icons/menu-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const MenuIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.75 18C3.53333 18 3.35417 17.9292 3.2125 17.7875C3.07083 17.6458 3 17.4667 3 17.25C3 17.0333 3.07083 16.8542 3.2125 16.7125C3.35417 16.5708 3.53333 16.5 3.75 16.5H20.25C20.4667 16.5 20.6458 16.5708 20.7875 16.7125C20.9292 16.8542 21 17.0333 21 17.25C21 17.4667 20.9292 17.6458 20.7875 17.7875C20.6458 17.9292 20.4667 18 20.25 18H3.75ZM3.75 12.75C3.53333 12.75 3.35417 12.6792 3.2125 12.5375C3.07083 12.3958 3 12.2167 3 12C3 11.7833 3.07083 11.6042 3.2125 11.4625C3.35417 11.3208 3.53333 11.25 3.75 11.25H20.25C20.4667 11.25 20.6458 11.3208 20.7875 11.4625C20.9292 11.6042 21 11.7833 21 12C21 12.2167 20.9292 12.3958 20.7875 12.5375C20.6458 12.6792 20.4667 12.75 20.25 12.75H3.75ZM3.75 7.5C3.53333 7.5 3.35417 7.42917 3.2125 7.2875C3.07083 7.14583 3 6.96667 3 6.75C3 6.53333 3.07083 6.35417 3.2125 6.2125C3.35417 6.07083 3.53333 6 3.75 6H20.25C20.4667 6 20.6458 6.07083 20.7875 6.2125C20.9292 6.35417 21 6.53333 21 6.75C21 6.96667 20.9292 7.14583 20.7875 7.2875C20.6458 7.42917 20.4667 7.5 20.25 7.5H3.75Z"
+        fill="#212529"
+      />
+    </svg>
+  );
diff --git a/app/components/icons/pdf-file-icon.tsx b/app/components/icons/pdf-file-icon.tsx
new file mode 100644
index 000000000..5467f0812
--- /dev/null
+++ b/app/components/icons/pdf-file-icon.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import PDFFileIcon from "public/attachment/pdf-icon.png";
+
+export const PdfIcon: React.FC<Props> = ({ width , height  }) => (
+  <Image src={PDFFileIcon} height={height} width={width} alt="PDFFileIcon" />
+);
diff --git a/app/components/icons/pencil-scribble-icon.tsx b/app/components/icons/pencil-scribble-icon.tsx
new file mode 100644
index 000000000..561a5bcc3
--- /dev/null
+++ b/app/components/icons/pencil-scribble-icon.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const PencilScribbleIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#000000",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 96 960 960"
+  >
+    <path
+      d="M560 936q-12 0-21-9t-9-21q0-13 9-21.5t21-8.5q59 0 99.5-24t40.5-56q0-23-29.5-45T591 717l47-47q63 19 92.5 52.5T760 796q0 67-61 103.5T560 936ZM240 642q-64-14-92-44t-28-62q0-35 26-63t120-62q66-24 85-39t19-35q0-25-22-43t-68-18q-27 0-46 7t-34 22q-8 8-20.5 9.5T157 308q-11-8-11.5-20t7.5-21q17-22 51-36.5t76-14.5q68 0 109 32.5t41 88.5q0 41-28.5 69.5T290 466q-67 25-88.5 39.5T180 536q0 16 27 30.5t81 27.5l-48 48Zm496-154L608 360l45-45q18-18 40-18t40 18l48 48q18 18 18 40t-18 40l-45 45ZM220 876h42l345-345-42-42-345 345v42Zm-60 60V808l405-405 128 128-405 405H160Zm405-447 42 42-42-42Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/app/components/icons/people-group-icon.tsx b/app/components/icons/people-group-icon.tsx
new file mode 100644
index 000000000..813511208
--- /dev/null
+++ b/app/components/icons/people-group-icon.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const PeopleGroupIcon: React.FC<Props> = ({
+  width = "24",
+  height = "16",
+  color = "#858E96",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 20 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill={color}
+      d="M12.2951 6.66667C13.1001 6.66667 13.7534 7.18933 13.7534 7.83333V10.9993C13.7534 11.7952 13.3582 12.5584 12.6548 13.1211C11.9514 13.6839 10.9974 14 10.0026 14C9.0078 14 8.05376 13.6839 7.35034 13.1211C6.64692 12.5584 6.25175 11.7952 6.25175 10.9993V7.83333C6.25175 7.18933 6.90425 6.66667 7.71008 6.66667H12.2951ZM12.2951 7.66667H7.71008C7.65483 7.66667 7.60184 7.68423 7.56277 7.71548C7.5237 7.74674 7.50175 7.78913 7.50175 7.83333V10.9993C7.50175 11.5299 7.76523 12.0388 8.23422 12.414C8.70322 12.7892 9.33932 13 10.0026 13C10.6658 13 11.3019 12.7892 11.7709 12.414C12.2399 12.0388 12.5034 11.5299 12.5034 10.9993V7.83333C12.5034 7.78913 12.4815 7.74674 12.4424 7.71548C12.4033 7.68423 12.3503 7.66667 12.2951 7.66667ZM3.12508 6.66667H5.94258C5.64858 6.95073 5.46903 7.29937 5.42758 7.66667H3.12508C3.06983 7.66667 3.01684 7.68423 2.97777 7.71548C2.9387 7.74674 2.91675 7.78913 2.91675 7.83333V9.99933C2.91669 10.2513 2.988 10.4999 3.12531 10.7266C3.26262 10.9533 3.46236 11.1522 3.70952 11.3083C3.95669 11.4644 4.24486 11.5737 4.55239 11.6279C4.85991 11.6821 5.17879 11.6799 5.48508 11.6213C5.55591 11.9573 5.68508 12.278 5.86258 12.576C5.36865 12.6817 4.85094 12.6951 4.34949 12.6152C3.84804 12.5353 3.37629 12.3642 2.9707 12.1151C2.56512 11.866 2.23657 11.5457 2.01047 11.1788C1.78436 10.8119 1.66676 10.4084 1.66675 9.99933V7.83333C1.66675 7.18933 2.32008 6.66667 3.12508 6.66667ZM14.0626 6.66667H16.8751C17.6801 6.66667 18.3334 7.18933 18.3334 7.83333V10C18.3335 10.4088 18.2162 10.8121 17.9904 11.1788C17.7646 11.5455 17.4365 11.8658 17.0314 12.1149C16.6262 12.364 16.155 12.5353 15.6539 12.6155C15.1529 12.6956 14.6355 12.6826 14.1417 12.5773C14.3201 12.2787 14.4492 11.958 14.5209 11.622C14.8268 11.6798 15.1451 11.6815 15.452 11.627C15.7588 11.5725 16.0463 11.4631 16.2928 11.307C16.5393 11.151 16.7384 10.9524 16.8754 10.726C17.0123 10.4997 17.0834 10.2515 17.0834 10V7.83333C17.0834 7.78913 17.0615 7.74674 17.0224 7.71548C16.9833 7.68423 16.9303 7.66667 16.8751 7.66667H14.5776C14.5361 7.29937 14.3566 6.95073 14.0626 6.66667ZM10.0001 2C10.6631 2 11.299 2.21071 11.7678 2.58579C12.2367 2.96086 12.5001 3.46957 12.5001 4C12.5001 4.53043 12.2367 5.03914 11.7678 5.41421C11.299 5.78929 10.6631 6 10.0001 6C9.33704 6 8.70115 5.78929 8.23231 5.41421C7.76347 5.03914 7.50008 4.53043 7.50008 4C7.50008 3.46957 7.76347 2.96086 8.23231 2.58579C8.70115 2.21071 9.33704 2 10.0001 2ZM15.4167 2.66667C15.9693 2.66667 16.4992 2.84226 16.8899 3.15482C17.2806 3.46738 17.5001 3.89131 17.5001 4.33333C17.5001 4.77536 17.2806 5.19928 16.8899 5.51184C16.4992 5.82441 15.9693 6 15.4167 6C14.8642 6 14.3343 5.82441 13.9436 5.51184C13.5529 5.19928 13.3334 4.77536 13.3334 4.33333C13.3334 3.89131 13.5529 3.46738 13.9436 3.15482C14.3343 2.84226 14.8642 2.66667 15.4167 2.66667ZM4.58341 2.66667C5.13595 2.66667 5.66585 2.84226 6.05655 3.15482C6.44725 3.46738 6.66675 3.89131 6.66675 4.33333C6.66675 4.77536 6.44725 5.19928 6.05655 5.51184C5.66585 5.82441 5.13595 6 4.58341 6C4.03088 6 3.50098 5.82441 3.11028 5.51184C2.71957 5.19928 2.50008 4.77536 2.50008 4.33333C2.50008 3.89131 2.71957 3.46738 3.11028 3.15482C3.50098 2.84226 4.03088 2.66667 4.58341 2.66667ZM10.0001 3C9.66856 3 9.35062 3.10536 9.1162 3.29289C8.88178 3.48043 8.75008 3.73478 8.75008 4C8.75008 4.26522 8.88178 4.51957 9.1162 4.70711C9.35062 4.89464 9.66856 5 10.0001 5C10.3316 5 10.6495 4.89464 10.884 4.70711C11.1184 4.51957 11.2501 4.26522 11.2501 4C11.2501 3.73478 11.1184 3.48043 10.884 3.29289C10.6495 3.10536 10.3316 3 10.0001 3ZM15.4167 3.66667C15.1957 3.66667 14.9838 3.7369 14.8275 3.86193C14.6712 3.98695 14.5834 4.15652 14.5834 4.33333C14.5834 4.51014 14.6712 4.67971 14.8275 4.80474C14.9838 4.92976 15.1957 5 15.4167 5C15.6378 5 15.8497 4.92976 16.006 4.80474C16.1623 4.67971 16.2501 4.51014 16.2501 4.33333C16.2501 4.15652 16.1623 3.98695 16.006 3.86193C15.8497 3.7369 15.6378 3.66667 15.4167 3.66667ZM4.58341 3.66667C4.3624 3.66667 4.15044 3.7369 3.99416 3.86193C3.83788 3.98695 3.75008 4.15652 3.75008 4.33333C3.75008 4.51014 3.83788 4.67971 3.99416 4.80474C4.15044 4.92976 4.3624 5 4.58341 5C4.80443 5 5.01639 4.92976 5.17267 4.80474C5.32895 4.67971 5.41675 4.51014 5.41675 4.33333C5.41675 4.15652 5.32895 3.98695 5.17267 3.86193C5.01639 3.7369 4.80443 3.66667 4.58341 3.66667Z"
+    />
+  </svg>
+);
diff --git a/app/components/icons/plus-icon.tsx b/app/components/icons/plus-icon.tsx
new file mode 100644
index 000000000..0b958a21d
--- /dev/null
+++ b/app/components/icons/plus-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const PlusIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 19C11.7833 19 11.6042 18.9292 11.4625 18.7875C11.3208 18.6458 11.25 18.4667 11.25 18.25V12.75H5.75C5.53333 12.75 5.35417 12.6792 5.2125 12.5375C5.07083 12.3958 5 12.2167 5 12C5 11.7833 5.07083 11.6042 5.2125 11.4625C5.35417 11.3208 5.53333 11.25 5.75 11.25H11.25V5.75C11.25 5.53333 11.3208 5.35417 11.4625 5.2125C11.6042 5.07083 11.7833 5 12 5C12.2167 5 12.3958 5.07083 12.5375 5.2125C12.6792 5.35417 12.75 5.53333 12.75 5.75V11.25H18.25C18.4667 11.25 18.6458 11.3208 18.7875 11.4625C18.9292 11.6042 19 11.7833 19 12C19 12.2167 18.9292 12.3958 18.7875 12.5375C18.6458 12.6792 18.4667 12.75 18.25 12.75H12.75V18.25C12.75 18.4667 12.6792 18.6458 12.5375 18.7875C12.3958 18.9292 12.2167 19 12 19Z"
+        fill="#FFFFFF"
+      />
+    </svg>
+  );
diff --git a/app/components/icons/png-file-icon.tsx b/app/components/icons/png-file-icon.tsx
new file mode 100644
index 000000000..21b5dc116
--- /dev/null
+++ b/app/components/icons/png-file-icon.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import PngFileIcon from "public/attachment/png-icon.png";
+
+export const PngIcon: React.FC<Props> = ({ width, height  }) => (
+  <Image src={PngFileIcon} height={height} width={width} alt="PngFileIcon" />
+);
diff --git a/app/components/icons/priority-icon.tsx b/app/components/icons/priority-icon.tsx
new file mode 100644
index 000000000..0a888f802
--- /dev/null
+++ b/app/components/icons/priority-icon.tsx
@@ -0,0 +1,20 @@
+export const getPriorityIcon = (priority: string | null, className?: string) => {
+  if (!className || className === "") className = "text-xs flex items-center";
+
+  switch (priority) {
+    case "urgent":
+      return <span className={`material-symbols-rounded ${className}`}>error</span>;
+    case "high":
+      return <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt</span>;
+    case "medium":
+      return (
+        <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt_2_bar</span>
+      );
+    case "low":
+      return (
+        <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt_1_bar</span>
+      );
+    default:
+      return <span className={`material-symbols-rounded ${className}`}>block</span>;
+  }
+};
diff --git a/app/components/icons/question-mark-circle-icon.tsx b/app/components/icons/question-mark-circle-icon.tsx
new file mode 100644
index 000000000..2cdf9d8e5
--- /dev/null
+++ b/app/components/icons/question-mark-circle-icon.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const QuestionMarkCircleIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+}) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M12.1 17.825C12.3667 17.825 12.5917 17.7333 12.775 17.55C12.9583 17.3667 13.05 17.1417 13.05 16.875C13.05 16.6083 12.9583 16.3833 12.775 16.2C12.5917 16.0167 12.3667 15.925 12.1 15.925C11.8333 15.925 11.6083 16.0167 11.425 16.2C11.2417 16.3833 11.15 16.6083 11.15 16.875C11.15 17.1417 11.2417 17.3667 11.425 17.55C11.6083 17.7333 11.8333 17.825 12.1 17.825ZM12.075 7.5C12.6417 7.5 13.1 7.65417 13.45 7.9625C13.8 8.27083 13.975 8.66667 13.975 9.15C13.975 9.48333 13.875 9.8125 13.675 10.1375C13.475 10.4625 13.15 10.8167 12.7 11.2C12.2667 11.5833 11.9208 11.9875 11.6625 12.4125C11.4042 12.8375 11.275 13.225 11.275 13.575C11.275 13.7583 11.3458 13.9042 11.4875 14.0125C11.6292 14.1208 11.7917 14.175 11.975 14.175C12.175 14.175 12.3417 14.1083 12.475 13.975C12.6083 13.8417 12.6917 13.675 12.725 13.475C12.775 13.1417 12.8875 12.8458 13.0625 12.5875C13.2375 12.3292 13.5083 12.05 13.875 11.75C14.375 11.3333 14.7375 10.9167 14.9625 10.5C15.1875 10.0833 15.3 9.61667 15.3 9.1C15.3 8.21667 15.0125 7.50833 14.4375 6.975C13.8625 6.44167 13.1 6.175 12.15 6.175C11.5167 6.175 10.9333 6.3 10.4 6.55C9.86667 6.8 9.425 7.16667 9.075 7.65C8.94167 7.83333 8.8875 8.02083 8.9125 8.2125C8.9375 8.40417 9.01667 8.55 9.15 8.65C9.33333 8.78333 9.52917 8.825 9.7375 8.775C9.94583 8.725 10.1167 8.60833 10.25 8.425C10.4667 8.125 10.7292 7.89583 11.0375 7.7375C11.3458 7.57917 11.6917 7.5 12.075 7.5ZM12 22C10.6 22 9.29167 21.7458 8.075 21.2375C6.85833 20.7292 5.8 20.025 4.9 19.125C4 18.225 3.29167 17.1667 2.775 15.95C2.25833 14.7333 2 13.4167 2 12C2 10.6 2.25833 9.29167 2.775 8.075C3.29167 6.85833 4 5.8 4.9 4.9C5.8 4 6.85833 3.29167 8.075 2.775C9.29167 2.25833 10.6 2 12 2C13.3833 2 14.6833 2.25833 15.9 2.775C17.1167 3.29167 18.175 4 19.075 4.9C19.975 5.8 20.6875 6.85833 21.2125 8.075C21.7375 9.29167 22 10.6 22 12C22 13.4167 21.7375 14.7333 21.2125 15.95C20.6875 17.1667 19.975 18.225 19.075 19.125C18.175 20.025 17.1167 20.7292 15.9 21.2375C14.6833 21.7458 13.3833 22 12 22ZM12 20.5C14.35 20.5 16.3542 19.6667 18.0125 18C19.6708 16.3333 20.5 14.3333 20.5 12C20.5 9.66667 19.6708 7.66667 18.0125 6C16.3542 4.33333 14.35 3.5 12 3.5C9.61667 3.5 7.60417 4.33333 5.9625 6C4.32083 7.66667 3.5 9.66667 3.5 12C3.5 14.3333 4.32083 16.3333 5.9625 18C7.60417 19.6667 9.61667 20.5 12 20.5Z" />
+    </svg>
+  );
diff --git a/app/components/icons/setting-icon.tsx b/app/components/icons/setting-icon.tsx
new file mode 100644
index 000000000..3bee580ae
--- /dev/null
+++ b/app/components/icons/setting-icon.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const SettingIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  color = "#858E96",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill={color}
+      d="M12.9062 1.375C13.0518 1.375 13.1936 1.42121 13.3112 1.50695C13.4288 1.59269 13.5162 1.71355 13.5607 1.85212L14.317 4.202C14.6346 4.35737 14.9385 4.532 15.2286 4.72862L17.6431 4.20888C17.7854 4.17848 17.9338 4.19406 18.0667 4.25336C18.1997 4.31267 18.3103 4.41264 18.3828 4.53888L20.2886 7.8375C20.3614 7.96366 20.3922 8.10968 20.3766 8.2545C20.361 8.39931 20.2999 8.53544 20.202 8.64325L18.5451 10.472C18.5692 10.8227 18.5692 11.1746 18.5451 11.5252L20.202 13.3567C20.2999 13.4646 20.361 13.6007 20.3766 13.7455C20.3922 13.8903 20.3614 14.0363 20.2886 14.1625L18.3828 17.4625C18.3101 17.5885 18.1994 17.6882 18.0664 17.7472C17.9335 17.8063 17.7853 17.8216 17.6431 17.7911L15.2286 17.2714C14.9398 17.4666 14.6346 17.6426 14.3183 17.798L13.5607 20.1479C13.5162 20.2864 13.4288 20.4073 13.3112 20.4931C13.1936 20.5788 13.0518 20.625 12.9062 20.625H9.0947C8.94915 20.625 8.80735 20.5788 8.68973 20.4931C8.57211 20.4073 8.48474 20.2864 8.4402 20.1479L7.68533 17.7994C7.36856 17.6445 7.06302 17.4676 6.77095 17.27L4.35783 17.7911C4.21547 17.8215 4.06713 17.8059 3.93419 17.7466C3.80125 17.6873 3.69057 17.5874 3.61808 17.4611L1.71233 14.1625C1.63956 14.0363 1.60873 13.8903 1.6243 13.7455C1.63987 13.6007 1.70103 13.4646 1.79895 13.3567L3.45583 11.5252C3.43183 11.1755 3.43183 10.8245 3.45583 10.4748L1.79895 8.64325C1.70103 8.53544 1.63987 8.39931 1.6243 8.2545C1.60873 8.10968 1.63956 7.96366 1.71233 7.8375L3.61808 4.5375C3.69077 4.41151 3.80154 4.31183 3.93446 4.25278C4.06739 4.19373 4.21562 4.17836 4.35783 4.20888L6.77095 4.73C7.06245 4.53338 7.3677 4.356 7.68533 4.20063L8.44158 1.85212C8.48597 1.714 8.57293 1.59346 8.69 1.50776C8.80706 1.42205 8.94824 1.37559 9.09333 1.375H12.9048H12.9062ZM12.403 2.75H9.59795L8.81695 5.17963L8.29033 5.43675C8.03144 5.56344 7.78152 5.70769 7.54233 5.8685L7.05558 6.1985L4.55858 5.6595L3.15608 8.0905L4.86795 9.98525L4.8267 10.5682C4.80695 10.8557 4.80695 11.1443 4.8267 11.4318L4.86795 12.0147L3.15333 13.9095L4.5572 16.3405L7.0542 15.8029L7.54095 16.1315C7.78015 16.2923 8.03007 16.4366 8.28895 16.5632L8.81558 16.8204L9.59795 19.25H12.4057L13.1895 16.819L13.7147 16.5632C13.9733 16.4369 14.2228 16.2926 14.4613 16.1315L14.9467 15.8029L17.4451 16.3405L18.8476 13.9095L17.1343 12.0147L17.1756 11.4318C17.1954 11.1438 17.1954 10.8548 17.1756 10.5669L17.1343 9.98388L18.849 8.0905L17.4451 5.6595L14.9467 6.19575L14.4613 5.8685C14.2228 5.70737 13.9733 5.5631 13.7147 5.43675L13.1895 5.181L12.4043 2.75H12.403ZM11.0005 6.875C12.0945 6.875 13.1437 7.3096 13.9173 8.08318C14.6909 8.85677 15.1255 9.90598 15.1255 11C15.1255 12.094 14.6909 13.1432 13.9173 13.9168C13.1437 14.6904 12.0945 15.125 11.0005 15.125C9.90644 15.125 8.85723 14.6904 8.08364 13.9168C7.31005 13.1432 6.87545 12.094 6.87545 11C6.87545 9.90598 7.31005 8.85677 8.08364 8.08318C8.85723 7.3096 9.90644 6.875 11.0005 6.875ZM11.0005 8.25C10.2711 8.25 9.57164 8.53973 9.05591 9.05546C8.54018 9.57118 8.25045 10.2707 8.25045 11C8.25045 11.7293 8.54018 12.4288 9.05591 12.9445C9.57164 13.4603 10.2711 13.75 11.0005 13.75C11.7298 13.75 12.4293 13.4603 12.945 12.9445C13.4607 12.4288 13.7505 11.7293 13.7505 11C13.7505 10.2707 13.4607 9.57118 12.945 9.05546C12.4293 8.53973 11.7298 8.25 11.0005 8.25Z"
+    />
+  </svg>
+);
diff --git a/app/components/icons/sheet-file-icon.tsx b/app/components/icons/sheet-file-icon.tsx
new file mode 100644
index 000000000..9e57ce71c
--- /dev/null
+++ b/app/components/icons/sheet-file-icon.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import SheetFileIcon from "public/attachment/excel-icon.png";
+
+export const SheetIcon: React.FC<Props> = ({ width, height  }) => (
+  <Image src={SheetFileIcon} height={height} width={width} alt="SheetFileIcon" />
+);
diff --git a/app/components/icons/signal-cellular-icon.tsx b/app/components/icons/signal-cellular-icon.tsx
new file mode 100644
index 000000000..0e785d958
--- /dev/null
+++ b/app/components/icons/signal-cellular-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const SignalCellularIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.75 20C18.4 20 18.1042 19.8792 17.8625 19.6375C17.6208 19.3958 17.5 19.1 17.5 18.75V5.25C17.5 4.9 17.6208 4.60417 17.8625 4.3625C18.1042 4.12083 18.4 4 18.75 4C19.1 4 19.3958 4.12083 19.6375 4.3625C19.8792 4.60417 20 4.9 20 5.25V18.75C20 19.1 19.8792 19.3958 19.6375 19.6375C19.3958 19.8792 19.1 20 18.75 20ZM6.275 20C6.09167 20 5.92083 19.9667 5.7625 19.9C5.60417 19.8333 5.47083 19.7458 5.3625 19.6375C5.25417 19.5292 5.16667 19.3958 5.1 19.2375C5.03333 19.0792 5 18.9167 5 18.75V15.25C5 14.9 5.12083 14.6042 5.3625 14.3625C5.60417 14.1208 5.9 14 6.25 14C6.6 14 6.89583 14.1208 7.1375 14.3625C7.37917 14.6042 7.5 14.9 7.5 15.25V18.75C7.5 18.9167 7.46667 19.0792 7.4 19.2375C7.33333 19.3958 7.24583 19.5292 7.1375 19.6375C7.02917 19.7458 6.9 19.8333 6.75 19.9C6.6 19.9667 6.44167 20 6.275 20ZM12.5 20C12.15 20 11.8542 19.8792 11.6125 19.6375C11.3708 19.3958 11.25 19.1 11.25 18.75V10.25C11.25 9.9 11.3708 9.60417 11.6125 9.3625C11.8542 9.12083 12.15 9 12.5 9C12.85 9 13.1458 9.12083 13.3875 9.3625C13.6292 9.60417 13.75 9.9 13.75 10.25V18.75C13.75 19.1 13.6292 19.3958 13.3875 19.6375C13.1458 19.8792 12.85 20 12.5 20Z"
+        fill="#212529"
+      />
+    </svg>
+  );
diff --git a/app/components/icons/stacked-layers-icon.tsx b/app/components/icons/stacked-layers-icon.tsx
new file mode 100644
index 000000000..61e003d0a
--- /dev/null
+++ b/app/components/icons/stacked-layers-icon.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const StackedLayersIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color = "#858e96",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18.0398 13.4374C18.1224 13.5807 18.1448 13.7508 18.1022 13.9106C18.0596 14.0703 17.9554 14.2067 17.8125 14.2898L10.3125 18.6648C10.2169 18.7205 10.1083 18.7499 9.99766 18.7499C9.88703 18.7499 9.77838 18.7205 9.68281 18.6648L2.18281 14.2898C2.04195 14.2051 1.94009 14.0684 1.8993 13.9092C1.8585 13.75 1.88205 13.5812 1.96484 13.4392C2.04764 13.2972 2.18301 13.1936 2.34166 13.1507C2.50031 13.1078 2.66946 13.1292 2.8125 13.2101L10 17.4015L17.1875 13.2101C17.3308 13.1275 17.5009 13.1051 17.6606 13.1477C17.8204 13.1903 17.9567 13.2945 18.0398 13.4374ZM17.1875 9.46009L10 13.6515L2.8125 9.46009C2.67019 9.38924 2.50623 9.37528 2.35399 9.42105C2.20175 9.46682 2.07267 9.56888 1.99303 9.70646C1.91338 9.84405 1.88916 10.0068 1.92529 10.1616C1.96142 10.3164 2.05518 10.4517 2.1875 10.5398L9.6875 14.9148C9.78307 14.9705 9.89171 14.9999 10.0023 14.9999C10.113 14.9999 10.2216 14.9705 10.3172 14.9148L17.8172 10.5398C17.8892 10.499 17.9524 10.4444 18.0032 10.379C18.0539 10.3136 18.0912 10.2388 18.1128 10.1589C18.1344 10.079 18.1399 9.99559 18.129 9.91354C18.1181 9.8315 18.091 9.75243 18.0493 9.68094C18.0076 9.60944 17.9521 9.54694 17.8861 9.49706C17.82 9.44718 17.7447 9.41092 17.6646 9.39037C17.5844 9.36983 17.5009 9.36541 17.419 9.37738C17.3371 9.38935 17.2584 9.41746 17.1875 9.46009ZM1.875 6.24994C1.87525 6.14047 1.90425 6.03299 1.95909 5.93824C2.01393 5.8435 2.0927 5.76483 2.1875 5.71009L9.6875 1.33509C9.78307 1.27936 9.89171 1.25 10.0023 1.25C10.113 1.25 10.2216 1.27936 10.3172 1.33509L17.8172 5.71009C17.9115 5.76514 17.9898 5.84395 18.0442 5.93867C18.0986 6.03339 18.1272 6.14071 18.1272 6.24994C18.1272 6.35917 18.0986 6.46649 18.0442 6.56121C17.9898 6.65593 17.9115 6.73474 17.8172 6.78978L10.3172 11.1648C10.2216 11.2205 10.113 11.2499 10.0023 11.2499C9.89171 11.2499 9.78307 11.2205 9.6875 11.1648L2.1875 6.78978C2.0927 6.73505 2.01393 6.65637 1.95909 6.56163C1.90425 6.46689 1.87525 6.35941 1.875 6.24994ZM3.74063 6.24994L10 9.9015L16.2594 6.24994L10 2.59838L3.74063 6.24994Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/app/components/icons/started-state-icon.tsx b/app/components/icons/started-state-icon.tsx
new file mode 100644
index 000000000..20de01537
--- /dev/null
+++ b/app/components/icons/started-state-icon.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const StartedStateIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#fbb040",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 83.36 83.36"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          className="cls-1"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M20,7.19a39.74,39.74,0,0,1,43.43.54"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M76.17,20a39.76,39.76,0,0,1-.53,43.43"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M63.42,76.17A39.78,39.78,0,0,1,20,75.64"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M7.19,63.42A39.75,39.75,0,0,1,7.73,20"
+        />
+        <path
+          className="cls-2"
+          fill={color}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M42.32,41.21q9.57-14.45,19.13-28.9a35.8,35.8,0,0,0-39.09,0Z"
+        />
+        <path
+          className="cls-2"
+          fill={color}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M42.32,41.7,61.45,70.6a35.75,35.75,0,0,1-39.09,0Z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/app/components/icons/state-group-icon.tsx b/app/components/icons/state-group-icon.tsx
new file mode 100644
index 000000000..17b13f0b2
--- /dev/null
+++ b/app/components/icons/state-group-icon.tsx
@@ -0,0 +1,29 @@
+import {
+  BacklogStateIcon,
+  CancelledStateIcon,
+  CompletedStateIcon,
+  StartedStateIcon,
+  UnstartedStateIcon,
+} from "components/icons";
+
+export const getStateGroupIcon = (
+  stateGroup: "backlog" | "unstarted" | "started" | "completed" | "cancelled",
+  width = "20",
+  height = "20",
+  color?: string
+) => {
+  switch (stateGroup) {
+    case "backlog":
+      return <BacklogStateIcon width={width} height={height} color={color} />;
+    case "unstarted":
+      return <UnstartedStateIcon width={width} height={height} color={color} />;
+    case "started":
+      return <StartedStateIcon width={width} height={height} color={color} />;
+    case "completed":
+      return <CompletedStateIcon width={width} height={height} color={color} />;
+    case "cancelled":
+      return <CancelledStateIcon width={width} height={height} color={color} />;
+    default:
+      return <></>;
+  }
+};
diff --git a/app/components/icons/svg-file-icon.tsx b/app/components/icons/svg-file-icon.tsx
new file mode 100644
index 000000000..d04ae3167
--- /dev/null
+++ b/app/components/icons/svg-file-icon.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import SvgFileIcon from "public/attachment/svg-icon.png";
+
+export const SvgIcon: React.FC<Props> = ({ width, height  }) => (
+  <Image src={SvgFileIcon} height={height} width={width} alt="SvgFileIcon" />
+);
diff --git a/app/components/icons/tag-icon.tsx b/app/components/icons/tag-icon.tsx
new file mode 100644
index 000000000..a17d4c1e4
--- /dev/null
+++ b/app/components/icons/tag-icon.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const TagIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color = "black",
+}) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.975 21.575C13.675 21.875 13.3125 22.025 12.8875 22.025C12.4625 22.025 12.1 21.875 11.8 21.575L2.425 12.2C2.25833 12.0333 2.14583 11.8583 2.0875 11.675C2.02917 11.4917 2 11.3 2 11.1V3.5C2 3.06667 2.14167 2.70833 2.425 2.425C2.70833 2.14167 3.06667 2 3.5 2H11.1C11.3 2 11.5 2.02917 11.7 2.0875C11.9 2.14583 12.0833 2.25833 12.25 2.425L21.575 11.75C21.8917 12.0667 22.05 12.4375 22.05 12.8625C22.05 13.2875 21.8917 13.6583 21.575 13.975L13.975 21.575ZM12.95 20.55L20.55 12.95L11.1 3.5H3.5V11.1L12.95 20.55ZM6.125 7.4C6.475 7.4 6.77917 7.27083 7.0375 7.0125C7.29583 6.75417 7.425 6.45 7.425 6.1C7.425 5.75 7.29583 5.44583 7.0375 5.1875C6.77917 4.92917 6.475 4.8 6.125 4.8C5.775 4.8 5.47083 4.92917 5.2125 5.1875C4.95417 5.44583 4.825 5.75 4.825 6.1C4.825 6.45 4.95417 6.75417 5.2125 7.0125C5.47083 7.27083 5.775 7.4 6.125 7.4Z"
+        fill={color}
+      />
+    </svg>
+  );
diff --git a/app/components/icons/target-icon.tsx b/app/components/icons/target-icon.tsx
new file mode 100644
index 000000000..c9fbde869
--- /dev/null
+++ b/app/components/icons/target-icon.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const TargetIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color = "black",
+}) => (
+  <svg width={width} height={height} className={className} color={color} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xlinkHref="http://www.w3.org/1999/xlink">
+    <rect width="16" height="16" fill="url(#pattern0)"/>
+    <defs>
+      <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+        <use xlinkHref="#image0_2094_50417" transform="scale(0.01)"/>
+      </pattern>
+      <image id="image0_2094_50417" width="100" height="100" xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAMyElEQVR4nO1de3AdZRX/3TQpBdJH2gZR+zCJUHDUOoiKSO2DWhkZRjttaauAPEpQRKWog9Q+RYGqbcdhUOlgKeXhCNVIq/KHTxCfQSwtIAVtG8ACaRraatskTe51DnOusx7O3nu+b3fv3Zu5v5mdySQ5u99+5/vO+zsLVFFFFVVUUcXgxTAAkwFcCGApgHsB/BHAdgD/BNANoBdAP//8IoB/APgdgE0AVgG4FMC7ANSW+2UqEXUAzgGwHMBvAPQAyMV0/QfAIwBuAfBBAEPK/bJpRQ2AcwHcBeBQjAwodu0DsBHA+TEzZyUqFOMB3ATg+RIyIRdyPc8TSWOKgpV8v4rCWwHcwbLfMlm7AfwUwLcAXAlgKoC3A2gC0MBibgj//GYApwKYyf97M4CfAHjJ+KxjAO4E0BKBGRXDkCZWyv1FJuVfrJBJGU+I8flvAfBxAPcAeNXImAkezEg9Q45jC+lIgQn4N8vzGaxTkkYd76KNRcZ1GMANAIY6MCPVDKGX3lnghelvlwM4sYxjJFF3LYDnCozzGbbMLMxIJUNqebADIQMmP+KSlJmeNQDmAXg2ZMxZAN8O7JYwZqSOIRMB/ClkoC8DuBhABulFHYDPFNAz5JiuLaKDUoPz2GOWAyRFfhuAUagcnMwGQNwmdsn8lIsA9CkD2APgLFQuzgfQWWnM+GyIvngQwGhUPk4C8FBEZqwo1WC/GiKiFqdcV/go/dTvjMXKwykgOCeBFTqHV9kPAPwVwC7WV318dbN4/AuA+3ihfBTA2BjHkXqdkRUPPwhgekz3P5OtmR3Kc1wuon2K42YUyo+C1DLjPEWBH+RJjILhAK7jCcwldD0J4CoAJ3iML5XMmKiYtj0Rd0YDv8D+BBkhry4ASwAcbxzj/DQyo05x+voj6AxS+pcZzMp+fi5FfBcBmCKivbX880QOcVA4Zh3rk2NF7v0Ci99izDiWNmaAJ0QOgBS7D1o41Rr2Yr0A2pjZIyKMeQRHeduKhPwpxP+mSmLGTEW5tnmatnMBHCggSpbFbB3l8UYAN3K2UHs2icyPFGHGMf592UPoO5XEEYkJFxDzvlkg570EQD2Sx0i2urTQOzm41wNYEJEZIzn0QnMXO5YqMv39jvcgWX93CDMeZPlfajRzMYVFHLkyI69rae5iRZOykihQ6MqMLcpLHgVwNcqLDOvBYwkwI5/kinWx3aeE0Ec5vvDdIanaM5AeTA2JVLvqjDHKfSgdHFtBgsyBUz7DBZrOeJZ3XpowP0YF/nnlPqfEMcg7xI23OVpVc0OY8QakC/NjtqbqlMwjFW5EwnjFbqeSThc/44AiptK2M+YpzCCp8ImI971M3LOPy5S8cZO44U6HHHhGcfqOxqAzWtgIIL32OPssfaw4d3N6dSN73pTxi3NnNPMqzzjskl1x5URqlIpCCkf4ro5cBGtqCICFAH5vNE/zFzmxvwAwKyZmdPD/0LtZca0iIbyKvs9V6qaspToNSmyK/AwfzOISnFzEi/In7/FkRlOAGXS94uC8NvDuDT4nbIEUxF3iJiQGrJDlMT52+PEA1sfACDnhN7KV6KLAT1FSDVSdb8VGQft9x7l4re5IVqFTRaE1nyFD6BQOcUEjgPYiq50mZBqA03jnnsBln1P5b486MqqYNXWroHnVYZd8WNB2F6mEfB3OUeSetbzzOkHb5RibagTw9xB98ACASQ73mswOaaFso9W0beQEXJCWCjusyl0uUq0KMhTLI9jPMtNHUVsXMdWuTNquiGVE00Oq3139jK8J+qcdaDcJWjrZZYYMtlEVugVnCrpexxD6emXSHo4hDB+X09es7LZ3G2kvFXQkUs1n+uQxMmtJ/lolV2LFrBBmOMnaEnjgcrFSWMiCiYKuh0WZSe4GCcnZsmKHoJ3j4Gc8o4iptOyMIC5RisateFHQvsNCdKEg2upQN5UVL05haAsWKgr8LESDq59hLdAYLd4zy1lIC34mxlMsj/8algkiyqFbMEfQ/Rl2SA/8AUSDjwf+S4f7SyuQivEsuFnQUWiqKGS1N53Ts2CFoFvjEJuSK24S/OEbDsk6BP42eBY2yHASmeTOq5UcLZ8kFpXqWHC14vSVSmf83HPxXSno7vc0XMhAKIrtgohOu1rwmKCjuikfRi6HW3pgM0cVuj0U+CrPrN4UQUfpWgveJugoX1IUuwWRNQa1R9DRiVcLHhd00xyYUajK0WJNTRc0tKgsaFIK7Sw4WdCRs1oUXYKI8sOlpDvVSLc5IjPy+kvWClgwUtBREs5asBeko1BMUcgModUxi4tuuJGuUAsOEl8W1CsJNAvqBF1fknSDgSEHjPcYrnjPFhxXSrpKEVltBRjyQ+M9Jgk6SqpZMFbQ7UuSrtxKfbrDZGo1VMTgccZ7zIhJqe9Kkq7UZu+9Ec3e+1k5HuSdYWWGltk0OWrsmwXp6MiDBe8UdE9YiB4tsWP46RgdQ1f8TTy71UjXKugoumGBNLOpKsc5dNLqmdRa45ljyEYMnVhxuhhv1kE8rxO01mLqT/kk/pZ5TmyU4KLclZuRPH4snkmt/6yQWc3Znoz8ik/4nU4VwZhzzorKP2v4fYGyWs9GcviAYgxQ9aK1rKdfnCWxWpQydkZlts6KxyVBtd3ngZygelp5LjE5bjQqFuEOhyIOefCTrEQrOnwMpmHssfqYvmsEHbXWczkul0sghRvEUBZNcjda42dQzrisdtCVQbojLierfi2IraWTZ0QscvhuCFPi2CmNCjNyXG8Fh6yoLJizNiK4QtC5JMRep9it9rmWV3fxK4axMZBTHKizI+oMKabo+oPj+b9VPn5EiL+1JIrS2+sgYxdHLJQbq+iTvGj5EZurVpyuWFPBbg5WZZyP1MrIAB3KserIlwWtU81AnRK8IxlvQb0Sn3I99Di2QEe6HDt0Kzn0cRo/s55/nsF/k06f3BkuzNC8+k6H4vNZSvDTuQL+TnETKr72FXmHHWJbQfH1nQKT6nNlWWe4HlNuUQwd6lRqhXS26VSaM2ZEOI4wikv2ffwZbRxxNKLZ4WhN5ZFRGpftdUgT1PP5e59w1P+hRrGbyVLwLShzKU7WxjKfYz8ubZqybFnNi9ALWB64yXGbDnjGvXZHaer2dSUp73Kk7WElIRO1fVMTt1a6hyPMXWxe93J+4TG2Cls9xKTEe5UE2q8c6Gv50xlBejqf4o1xyoAozGHFBKUQodMhCVVONCsV892OTL5YWZCRDn1qFenbHbfcbEXMPJfCY9GyOkR2uaZ3uAB21CjmOzm+kdGi1Dt90vEesoQyzxRahWlDiyJmfETNIkHfF4MI/R9kW4xXHLsAZZRzdnlrJapOiRPvUxy4/JlAF6kwRmn/FFtrDXBw8XDE7VfLwcacIld9ra+4kGFrSmtu1ubhxK1XXAaX1LIJN4iHDHjEl2pDdkreT2lCeURUWIPkDR7MmKI0lP5SEgMfqpThd3h0rc6wTtH8iSMcjLQ6XVEwgsMhWgOzLOuMjEfI5wUlZmY6KeXrNcuJ3OLp6HwspIwnx6byioQSVCdx1LbQs12sqTwyyoGcAdfTtj5YrbzEFz3vRVbHb0MmJseWyRZOK0f5qkIDe/pbQz4WEHT6fD+x9GXlfuRYJ4465QzJgENOWltZFxk+2tXPxQXr2AufymbzaBanQ/nnZo5ZtfL/thu+ebXXMRwisUDRG4+U8kOWmgfew/1RfDGSw/Rh3UKTuDo5URRFZ81UrLN9SVhVxfAhZSCHRIMXH9SzCSoLJuK8nuDk0okxxLpk3qjXoQ1J7FiobNVDEXdKEPT92m9wsinsW1aWa4CrQ1bH0Iw/uDMOKc8pez/fzykT0OPYec5qUs4OfKC4nT9OvD8Q7d3Pv2vnaPBSpnHNDlp0huZEXoOUQPta2QA7RIPpgy4Ztqa03erS06UkuCZkoFsTWKHlwBiOJsj3I7/sC0gpFoZs5Q6uZKlUTFE88LwCL7vOsFhfXSEi7HsV9oGwMRwo1Hb+vnJaU64YX6CjWydXQpbie7e+qOF8hraw8k5fyf2MpD+9+iQXQpTMm3X49OpTRT69mliwsBSYFlKJGMwcLirRJyrCUM/tMrRMYXABJR4oLBXq2DMudJT5KJ8XvKBEu6aGe0vezgmksHEd5p0eZxV+ajCBKyCLfT7oJXbsLo8zD80JsCvYsdRStcGrj9OuFacrfCfmdqWVYC7k6uDTR2u5JmsaHywKi/ZO5gOWVzHNQ0rRX9jVw+npOBdCxWAcd/q0TlYuwWsPZwkj100NBtTwqt+g9MZN8jrAFSVTB1mIJ1YM4dar13MjfS3n7XsdYf/oFo7WDkpFnTSGsr6Yy8eIN/GkbisQ7d3G/7OJE1BzuQNolQFVVFFFFVVgsOK/CQ2naFV2iSEAAAAASUVORK5CYII="/>
+    </defs>
+  </svg>
+);
\ No newline at end of file
diff --git a/app/components/icons/tick-mark-icon.tsx b/app/components/icons/tick-mark-icon.tsx
new file mode 100644
index 000000000..3d7c1618c
--- /dev/null
+++ b/app/components/icons/tick-mark-icon.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const TickMarkIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  color = "#858E96",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill={color}
+      d="M19.0653 7.06348C19.2051 7.52373 19.3125 8.00065 19.3875 8.49423C19.4625 8.98783 19.5 9.48976 19.5 10C19.5 11.3333 19.2544 12.5779 18.7634 13.7337C18.2724 14.8894 17.5977 15.8964 16.7394 16.7548C15.881 17.6131 14.874 18.2852 13.7182 18.7711C12.5625 19.257 11.323 19.5 9.99998 19.5C8.66664 19.5 7.42209 19.257 6.26633 18.7711C5.11058 18.2852 4.10353 17.6131 3.2452 16.7548C2.38687 15.8964 1.71475 14.8894 1.22885 13.7337C0.74295 12.5779 0.5 11.3333 0.5 10C0.5 8.67694 0.74295 7.43752 1.22885 6.28176C1.71475 5.12599 2.38687 4.11894 3.2452 3.26061C4.10353 2.40227 5.11058 1.7276 6.26633 1.23658C7.42209 0.745547 8.66664 0.500031 9.99998 0.500031C11.0577 0.500031 12.0529 0.656764 12.9856 0.970231C13.9182 1.2837 14.7852 1.7103 15.5865 2.25003C15.7186 2.34106 15.7939 2.46254 15.8125 2.61446C15.8311 2.76637 15.7865 2.90643 15.6788 3.03463C15.5775 3.15643 15.4477 3.22598 15.2894 3.24328C15.1311 3.2606 14.9827 3.22374 14.8442 3.13271C14.1506 2.67374 13.3965 2.30931 12.5817 2.03943C11.767 1.76956 10.9064 1.63463 9.99998 1.63463C7.64101 1.63463 5.65703 2.43911 4.04805 4.04808C2.43908 5.65706 1.6346 7.64104 1.6346 10C1.6346 12.359 2.43908 14.3429 4.04805 15.9519C5.65703 17.5609 7.64101 18.3654 9.99998 18.3654C12.3589 18.3654 14.3429 17.5609 15.9519 15.9519C17.5609 14.3429 18.3654 12.359 18.3654 10C18.3654 9.56411 18.3371 9.14487 18.2807 8.74231C18.2243 8.33974 18.1397 7.94038 18.0269 7.54423C17.9897 7.40833 17.9942 7.26603 18.0404 7.11733C18.0865 6.96861 18.1724 6.86221 18.298 6.79811C18.4429 6.70836 18.5919 6.6856 18.7451 6.72983C18.8983 6.77405 19.0051 6.88526 19.0653 7.06348ZM8.0192 13.7077L5.12308 10.7962C5.01153 10.6846 4.95736 10.5462 4.96058 10.3808C4.96378 10.2154 5.02628 10.0718 5.14808 9.95001C5.26601 9.83207 5.40607 9.77311 5.56825 9.77311C5.73042 9.77311 5.87561 9.83207 6.00383 9.95001L8.52498 12.4962L18.2384 2.78273C18.35 2.67118 18.4868 2.61445 18.649 2.61253C18.8112 2.61061 18.9564 2.67055 19.0846 2.79233C19.2128 2.92053 19.2769 3.06572 19.2769 3.22791C19.2769 3.39007 19.2128 3.53526 19.0846 3.66348L9.03075 13.7077C8.88715 13.8577 8.71599 13.9327 8.51728 13.9327C8.31856 13.9327 8.15253 13.8577 8.0192 13.7077Z"
+    />
+  </svg>
+);
diff --git a/app/components/icons/transfer-icon.tsx b/app/components/icons/transfer-icon.tsx
new file mode 100644
index 000000000..176c38b29
--- /dev/null
+++ b/app/components/icons/transfer-icon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const TransferIcon: React.FC<Props> = ({ width, height, className, color }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 18 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+     <path d="M6.16683 14.6667C4.54183 14.6667 3.16336 14.1007 2.03141 12.9688C0.899468 11.8368 0.333496 10.4583 0.333496 8.83333C0.333496 7.125 0.941135 5.73264 2.15641 4.65625C3.37169 3.57986 4.72933 3.09028 6.22933 3.1875L4.87516 1.83333C4.75016 1.70833 4.68766 1.55903 4.68766 1.38542C4.68766 1.21181 4.75016 1.0625 4.87516 0.9375C5.00016 0.8125 5.14947 0.75 5.32308 0.75C5.49669 0.75 5.646 0.8125 5.771 0.9375L8.22933 3.39583C8.29877 3.46528 8.34739 3.53472 8.37516 3.60417C8.40294 3.67361 8.41683 3.75 8.41683 3.83333C8.41683 3.91667 8.40294 3.99306 8.37516 4.0625C8.34739 4.13194 8.29877 4.20139 8.22933 4.27083L5.771 6.72917C5.646 6.85417 5.50016 6.91319 5.3335 6.90625C5.16683 6.89931 5.021 6.83333 4.896 6.70833C4.771 6.58333 4.7085 6.43403 4.7085 6.26042C4.7085 6.08681 4.771 5.9375 4.896 5.8125L6.29183 4.41667C4.97239 4.38889 3.8578 4.79167 2.94808 5.625C2.03836 6.45833 1.5835 7.52778 1.5835 8.83333C1.5835 10.0972 2.03141 11.1771 2.92725 12.0729C3.82308 12.9688 4.90294 13.4167 6.16683 13.4167H8.04183C8.22239 13.4167 8.37169 13.4757 8.48975 13.5938C8.6078 13.7118 8.66683 13.8611 8.66683 14.0417C8.66683 14.2222 8.6078 14.3715 8.48975 14.4896C8.37169 14.6076 8.22239 14.6667 8.04183 14.6667H6.16683ZM11.5835 14.6667C11.2363 14.6667 10.9411 14.5451 10.6981 14.3021C10.455 14.059 10.3335 13.7639 10.3335 13.4167V10.0833C10.3335 9.73611 10.455 9.44097 10.6981 9.19792C10.9411 8.95486 11.2363 8.83333 11.5835 8.83333H16.5835C16.9307 8.83333 17.2259 8.95486 17.4689 9.19792C17.712 9.44097 17.8335 9.73611 17.8335 10.0833V13.4167C17.8335 13.7639 17.712 14.059 17.4689 14.3021C17.2259 14.5451 16.9307 14.6667 16.5835 14.6667H11.5835ZM11.5835 13.4167H16.5835V10.0833H11.5835V13.4167ZM11.5835 7.16667C11.2363 7.16667 10.9411 7.04514 10.6981 6.80208C10.455 6.55903 10.3335 6.26389 10.3335 5.91667V2.58333C10.3335 2.23611 10.455 1.94097 10.6981 1.69792C10.9411 1.45486 11.2363 1.33333 11.5835 1.33333H16.5835C16.9307 1.33333 17.2259 1.45486 17.4689 1.69792C17.712 1.94097 17.8335 2.23611 17.8335 2.58333V5.91667C17.8335 6.26389 17.712 6.55903 17.4689 6.80208C17.2259 7.04514 16.9307 7.16667 16.5835 7.16667H11.5835Z" fill={color}/>
+    </svg>
+  );
diff --git a/app/components/icons/tune-icon.tsx b/app/components/icons/tune-icon.tsx
new file mode 100644
index 000000000..1221b2976
--- /dev/null
+++ b/app/components/icons/tune-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const TuneIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.75 18.95C3.53333 18.95 3.35417 18.8792 3.2125 18.7375C3.07083 18.5958 3 18.4167 3 18.2C3 17.9833 3.07083 17.8042 3.2125 17.6625C3.35417 17.5208 3.53333 17.45 3.75 17.45H8.425C8.64167 17.45 8.82083 17.5208 8.9625 17.6625C9.10417 17.8042 9.175 17.9833 9.175 18.2C9.175 18.4167 9.10417 18.5958 8.9625 18.7375C8.82083 18.8792 8.64167 18.95 8.425 18.95H3.75ZM3.75 6.55C3.53333 6.55 3.35417 6.47917 3.2125 6.3375C3.07083 6.19583 3 6.01667 3 5.8C3 5.58333 3.07083 5.40417 3.2125 5.2625C3.35417 5.12083 3.53333 5.05 3.75 5.05H12.575C12.7917 5.05 12.9708 5.12083 13.1125 5.2625C13.2542 5.40417 13.325 5.58333 13.325 5.8C13.325 6.01667 13.2542 6.19583 13.1125 6.3375C12.9708 6.47917 12.7917 6.55 12.575 6.55H3.75ZM11.425 21C11.2083 21 11.0292 20.9292 10.8875 20.7875C10.7458 20.6458 10.675 20.4667 10.675 20.25V16.125C10.675 15.9083 10.7458 15.7292 10.8875 15.5875C11.0292 15.4458 11.2083 15.375 11.425 15.375C11.6417 15.375 11.8208 15.4458 11.9625 15.5875C12.1042 15.7292 12.175 15.9083 12.175 16.125V17.45H20.25C20.4667 17.45 20.6458 17.5208 20.7875 17.6625C20.9292 17.8042 21 17.9833 21 18.2C21 18.4167 20.9292 18.5958 20.7875 18.7375C20.6458 18.8792 20.4667 18.95 20.25 18.95H12.175V20.25C12.175 20.4667 12.1042 20.6458 11.9625 20.7875C11.8208 20.9292 11.6417 21 11.425 21ZM8.425 14.8C8.20833 14.8 8.02917 14.7292 7.8875 14.5875C7.74583 14.4458 7.675 14.2667 7.675 14.05V12.75H3.75C3.53333 12.75 3.35417 12.6792 3.2125 12.5375C3.07083 12.3958 3 12.2167 3 12C3 11.7833 3.07083 11.6042 3.2125 11.4625C3.35417 11.3208 3.53333 11.25 3.75 11.25H7.675V9.9C7.675 9.68333 7.74583 9.50417 7.8875 9.3625C8.02917 9.22083 8.20833 9.15 8.425 9.15C8.64167 9.15 8.82083 9.22083 8.9625 9.3625C9.10417 9.50417 9.175 9.68333 9.175 9.9V14.05C9.175 14.2667 9.10417 14.4458 8.9625 14.5875C8.82083 14.7292 8.64167 14.8 8.425 14.8ZM11.425 12.75C11.2083 12.75 11.0292 12.6792 10.8875 12.5375C10.7458 12.3958 10.675 12.2167 10.675 12C10.675 11.7833 10.7458 11.6042 10.8875 11.4625C11.0292 11.3208 11.2083 11.25 11.425 11.25H20.25C20.4667 11.25 20.6458 11.3208 20.7875 11.4625C20.9292 11.6042 21 11.7833 21 12C21 12.2167 20.9292 12.3958 20.7875 12.5375C20.6458 12.6792 20.4667 12.75 20.25 12.75H11.425ZM15.575 8.625C15.3583 8.625 15.1792 8.55417 15.0375 8.4125C14.8958 8.27083 14.825 8.09167 14.825 7.875V3.75C14.825 3.53333 14.8958 3.35417 15.0375 3.2125C15.1792 3.07083 15.3583 3 15.575 3C15.7917 3 15.9708 3.07083 16.1125 3.2125C16.2542 3.35417 16.325 3.53333 16.325 3.75V5.05H20.25C20.4667 5.05 20.6458 5.12083 20.7875 5.2625C20.9292 5.40417 21 5.58333 21 5.8C21 6.01667 20.9292 6.19583 20.7875 6.3375C20.6458 6.47917 20.4667 6.55 20.25 6.55H16.325V7.875C16.325 8.09167 16.2542 8.27083 16.1125 8.4125C15.9708 8.55417 15.7917 8.625 15.575 8.625Z"
+        fill="#212529"
+      />
+    </svg>
+  );
diff --git a/app/components/icons/txt-file-icon.tsx b/app/components/icons/txt-file-icon.tsx
new file mode 100644
index 000000000..f0150a4cd
--- /dev/null
+++ b/app/components/icons/txt-file-icon.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import TxtFileIcon from "public/attachment/txt-icon.png";
+
+export const TxtIcon: React.FC<Props> = ({ width, height  }) => (
+  <Image src={TxtFileIcon} height={height} width={width} alt="TxtFileIcon" />
+);
diff --git a/app/components/icons/types.d.ts b/app/components/icons/types.d.ts
new file mode 100644
index 000000000..44db8107f
--- /dev/null
+++ b/app/components/icons/types.d.ts
@@ -0,0 +1,6 @@
+export type Props = {
+  className?: string;
+  width?: string | number;
+  height?: string | number;
+  color?: string;
+};
diff --git a/app/components/icons/unstarted-state-icon.tsx b/app/components/icons/unstarted-state-icon.tsx
new file mode 100644
index 000000000..0fcad39ea
--- /dev/null
+++ b/app/components/icons/unstarted-state-icon.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const UnstartedStateIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#858e96",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 84.36 84.36"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          className="cls-1"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
+        />
+        <path
+          className="cls-1"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+          d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/app/components/icons/upcoming-cycle-icon.tsx b/app/components/icons/upcoming-cycle-icon.tsx
new file mode 100644
index 000000000..52961e15e
--- /dev/null
+++ b/app/components/icons/upcoming-cycle-icon.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const UpcomingCycleIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color = "black",
+}) => (
+    <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} className={className}>
+      <path
+        d="M28.3 44v-3H39V19.5H9v11H6V10q0-1.2.9-2.1Q7.8 7 9 7h3.25V4h3.25v3h17V4h3.25v3H39q1.2 0 2.1.9.9.9.9 2.1v31q0 1.2-.9 2.1-.9.9-2.1.9ZM16 47.3l-2.1-2.1 5.65-5.7H2.5v-3h17.05l-5.65-5.7 2.1-2.1 9.3 9.3ZM9 16.5h30V10H9Zm0 0V10v6.5Z"
+        fill={color}
+      />
+    </svg>
+  );
diff --git a/app/components/icons/user-group-icon.tsx b/app/components/icons/user-group-icon.tsx
new file mode 100644
index 000000000..37be59e3f
--- /dev/null
+++ b/app/components/icons/user-group-icon.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const UserGroupIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14.754 10C15.72 10 16.504 10.784 16.504 11.75V16.499C16.504 17.6927 16.0298 18.8376 15.1857 19.6817C14.3416 20.5258 13.1967 21 12.003 21C10.8093 21 9.66441 20.5258 8.82031 19.6817C7.97621 18.8376 7.502 17.6927 7.502 16.499V11.75C7.502 10.784 8.285 10 9.252 10H14.754ZM14.754 11.5H9.252C9.1857 11.5 9.12211 11.5263 9.07522 11.5732C9.02834 11.6201 9.002 11.6837 9.002 11.75V16.499C9.002 17.2949 9.31818 18.0582 9.88097 18.621C10.4438 19.1838 11.2071 19.5 12.003 19.5C12.7989 19.5 13.5622 19.1838 14.125 18.621C14.6878 18.0582 15.004 17.2949 15.004 16.499V11.75C15.004 11.6837 14.9777 11.6201 14.9308 11.5732C14.8839 11.5263 14.8203 11.5 14.754 11.5ZM3.75 10H7.131C6.7782 10.4261 6.56274 10.949 6.513 11.5H3.75C3.6837 11.5 3.62011 11.5263 3.57322 11.5732C3.52634 11.6201 3.5 11.6837 3.5 11.75V14.999C3.49994 15.3769 3.5855 15.7499 3.75027 16.0899C3.91504 16.43 4.15473 16.7283 4.45133 16.9625C4.74793 17.1966 5.09374 17.3605 5.46277 17.4418C5.83179 17.5231 6.21445 17.5198 6.582 17.432C6.667 17.936 6.822 18.417 7.035 18.864C6.44228 19.0226 5.82103 19.0427 5.21929 18.9228C4.61756 18.8029 4.05145 18.5463 3.56475 18.1727C3.07805 17.7991 2.68379 17.3185 2.41246 16.7682C2.14114 16.2179 2.00001 15.6126 2 14.999V11.75C2 10.784 2.784 10 3.75 10ZM16.875 10H20.25C21.216 10 22 10.784 22 11.75V15C22.0001 15.6132 21.8593 16.2182 21.5884 16.7682C21.3175 17.3183 20.9237 17.7987 20.4376 18.1724C19.9514 18.546 19.3858 18.8029 18.7846 18.9232C18.1833 19.0435 17.5625 19.0239 16.97 18.866C17.184 18.418 17.339 17.937 17.425 17.433C17.7921 17.5198 18.174 17.5223 18.5423 17.4405C18.9105 17.3587 19.2554 17.1946 19.5512 16.9606C19.847 16.7265 20.086 16.4286 20.2503 16.089C20.4147 15.7495 20.5 15.3772 20.5 15V11.75C20.5 11.6837 20.4737 11.6201 20.4268 11.5732C20.3799 11.5263 20.3163 11.5 20.25 11.5H17.493C17.4433 10.949 17.2278 10.4261 16.875 10ZM12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6C15 6.79565 14.6839 7.55871 14.1213 8.12132C13.5587 8.68393 12.7956 9 12 9C11.2044 9 10.4413 8.68393 9.87868 8.12132C9.31607 7.55871 9 6.79565 9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3ZM18.5 4C19.163 4 19.7989 4.26339 20.2678 4.73223C20.7366 5.20107 21 5.83696 21 6.5C21 7.16304 20.7366 7.79893 20.2678 8.26777C19.7989 8.73661 19.163 9 18.5 9C17.837 9 17.2011 8.73661 16.7322 8.26777C16.2634 7.79893 16 7.16304 16 6.5C16 5.83696 16.2634 5.20107 16.7322 4.73223C17.2011 4.26339 17.837 4 18.5 4ZM5.5 4C6.16304 4 6.79893 4.26339 7.26777 4.73223C7.73661 5.20107 8 5.83696 8 6.5C8 7.16304 7.73661 7.79893 7.26777 8.26777C6.79893 8.73661 6.16304 9 5.5 9C4.83696 9 4.20107 8.73661 3.73223 8.26777C3.26339 7.79893 3 7.16304 3 6.5C3 5.83696 3.26339 5.20107 3.73223 4.73223C4.20107 4.26339 4.83696 4 5.5 4ZM12 4.5C11.6022 4.5 11.2206 4.65804 10.9393 4.93934C10.658 5.22064 10.5 5.60218 10.5 6C10.5 6.39782 10.658 6.77936 10.9393 7.06066C11.2206 7.34196 11.6022 7.5 12 7.5C12.3978 7.5 12.7794 7.34196 13.0607 7.06066C13.342 6.77936 13.5 6.39782 13.5 6C13.5 5.60218 13.342 5.22064 13.0607 4.93934C12.7794 4.65804 12.3978 4.5 12 4.5ZM18.5 5.5C18.2348 5.5 17.9804 5.60536 17.7929 5.79289C17.6054 5.98043 17.5 6.23478 17.5 6.5C17.5 6.76522 17.6054 7.01957 17.7929 7.20711C17.9804 7.39464 18.2348 7.5 18.5 7.5C18.7652 7.5 19.0196 7.39464 19.2071 7.20711C19.3946 7.01957 19.5 6.76522 19.5 6.5C19.5 6.23478 19.3946 5.98043 19.2071 5.79289C19.0196 5.60536 18.7652 5.5 18.5 5.5ZM5.5 5.5C5.23478 5.5 4.98043 5.60536 4.79289 5.79289C4.60536 5.98043 4.5 6.23478 4.5 6.5C4.5 6.76522 4.60536 7.01957 4.79289 7.20711C4.98043 7.39464 5.23478 7.5 5.5 7.5C5.76522 7.5 6.01957 7.39464 6.20711 7.20711C6.39464 7.01957 6.5 6.76522 6.5 6.5C6.5 6.23478 6.39464 5.98043 6.20711 5.79289C6.01957 5.60536 5.76522 5.5 5.5 5.5Z"
+      fill={color ? color : "#858E96"}
+    />
+  </svg>
+);
diff --git a/app/components/icons/user-icon-circle.tsx b/app/components/icons/user-icon-circle.tsx
new file mode 100644
index 000000000..8bae34133
--- /dev/null
+++ b/app/components/icons/user-icon-circle.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const UserCircleIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M5.55 17.625C6.6 16.8917 7.64167 16.3292 8.675 15.9375C9.70833 15.5458 10.8167 15.35 12 15.35C13.1833 15.35 14.2958 15.5458 15.3375 15.9375C16.3792 16.3292 17.425 16.8917 18.475 17.625C19.2083 16.725 19.7292 15.8167 20.0375 14.9C20.3458 13.9833 20.5 13.0167 20.5 12C20.5 9.58333 19.6875 7.5625 18.0625 5.9375C16.4375 4.3125 14.4167 3.5 12 3.5C9.58333 3.5 7.5625 4.3125 5.9375 5.9375C4.3125 7.5625 3.5 9.58333 3.5 12C3.5 13.0167 3.65833 13.9833 3.975 14.9C4.29167 15.8167 4.81667 16.725 5.55 17.625ZM12 12.75C11.0333 12.75 10.2208 12.4208 9.5625 11.7625C8.90417 11.1042 8.575 10.2917 8.575 9.325C8.575 8.35833 8.90417 7.54583 9.5625 6.8875C10.2208 6.22917 11.0333 5.9 12 5.9C12.9667 5.9 13.7792 6.22917 14.4375 6.8875C15.0958 7.54583 15.425 8.35833 15.425 9.325C15.425 10.2917 15.0958 11.1042 14.4375 11.7625C13.7792 12.4208 12.9667 12.75 12 12.75ZM12 22C10.6333 22 9.34167 21.7375 8.125 21.2125C6.90833 20.6875 5.84583 19.9708 4.9375 19.0625C4.02917 18.1542 3.3125 17.0917 2.7875 15.875C2.2625 14.6583 2 13.3667 2 12C2 10.6167 2.2625 9.32083 2.7875 8.1125C3.3125 6.90417 4.02917 5.84583 4.9375 4.9375C5.84583 4.02917 6.90833 3.3125 8.125 2.7875C9.34167 2.2625 10.6333 2 12 2C13.3833 2 14.6792 2.2625 15.8875 2.7875C17.0958 3.3125 18.1542 4.02917 19.0625 4.9375C19.9708 5.84583 20.6875 6.90417 21.2125 8.1125C21.7375 9.32083 22 10.6167 22 12C22 13.3667 21.7375 14.6583 21.2125 15.875C20.6875 17.0917 19.9708 18.1542 19.0625 19.0625C18.1542 19.9708 17.0958 20.6875 15.8875 21.2125C14.6792 21.7375 13.3833 22 12 22ZM12 20.5C12.9167 20.5 13.8125 20.3667 14.6875 20.1C15.5625 19.8333 16.425 19.3667 17.275 18.7C16.425 18.1 15.5583 17.6417 14.675 17.325C13.7917 17.0083 12.9 16.85 12 16.85C11.1 16.85 10.2083 17.0083 9.325 17.325C8.44167 17.6417 7.575 18.1 6.725 18.7C7.575 19.3667 8.4375 19.8333 9.3125 20.1C10.1875 20.3667 11.0833 20.5 12 20.5ZM12 11.25C12.5667 11.25 13.0292 11.0708 13.3875 10.7125C13.7458 10.3542 13.925 9.89167 13.925 9.325C13.925 8.75833 13.7458 8.29583 13.3875 7.9375C13.0292 7.57917 12.5667 7.4 12 7.4C11.4333 7.4 10.9708 7.57917 10.6125 7.9375C10.2542 8.29583 10.075 8.75833 10.075 9.325C10.075 9.89167 10.2542 10.3542 10.6125 10.7125C10.9708 11.0708 11.4333 11.25 12 11.25Z" />
+    </svg>
+  );
diff --git a/app/components/icons/user-icon.tsx b/app/components/icons/user-icon.tsx
new file mode 100644
index 000000000..c0408dad3
--- /dev/null
+++ b/app/components/icons/user-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const UserIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 11.9751C10.9 11.9751 10 11.6251 9.3 10.9251C8.6 10.2251 8.25 9.3251 8.25 8.2251C8.25 7.1251 8.6 6.2251 9.3 5.5251C10 4.8251 10.9 4.4751 12 4.4751C13.1 4.4751 14 4.8251 14.7 5.5251C15.4 6.2251 15.75 7.1251 15.75 8.2251C15.75 9.3251 15.4 10.2251 14.7 10.9251C14 11.6251 13.1 11.9751 12 11.9751ZM18.5 20.0001H5.5C5.08333 20.0001 4.72917 19.8543 4.4375 19.5626C4.14583 19.2709 4 18.9168 4 18.5001V17.6501C4 17.0168 4.15833 16.4751 4.475 16.0251C4.79167 15.5751 5.2 15.2334 5.7 15.0001C6.81667 14.5001 7.8875 14.1251 8.9125 13.8751C9.9375 13.6251 10.9667 13.5001 12 13.5001C13.0333 13.5001 14.0583 13.6293 15.075 13.8876C16.0917 14.1459 17.1583 14.5168 18.275 15.0001C18.7917 15.2334 19.2083 15.5751 19.525 16.0251C19.8417 16.4751 20 17.0168 20 17.6501V18.5001C20 18.9168 19.8542 19.2709 19.5625 19.5626C19.2708 19.8543 18.9167 20.0001 18.5 20.0001ZM5.5 18.5001H18.5V17.6501C18.5 17.3834 18.4208 17.1293 18.2625 16.8876C18.1042 16.6459 17.9083 16.4668 17.675 16.3501C16.6083 15.8334 15.6333 15.4793 14.75 15.2876C13.8667 15.0959 12.95 15.0001 12 15.0001C11.05 15.0001 10.125 15.0959 9.225 15.2876C8.325 15.4793 7.35 15.8334 6.3 16.3501C6.06667 16.4668 5.875 16.6459 5.725 16.8876C5.575 17.1293 5.5 17.3834 5.5 17.6501V18.5001ZM12 10.4751C12.65 10.4751 13.1875 10.2626 13.6125 9.8376C14.0375 9.4126 14.25 8.8751 14.25 8.2251C14.25 7.5751 14.0375 7.0376 13.6125 6.6126C13.1875 6.1876 12.65 5.9751 12 5.9751C11.35 5.9751 10.8125 6.1876 10.3875 6.6126C9.9625 7.0376 9.75 7.5751 9.75 8.2251C9.75 8.8751 9.9625 9.4126 10.3875 9.8376C10.8125 10.2626 11.35 10.4751 12 10.4751Z"
+        fill="#212529"
+      />
+    </svg>
+  );
diff --git a/app/components/icons/users.tsx b/app/components/icons/users.tsx
new file mode 100644
index 000000000..9e590d8fc
--- /dev/null
+++ b/app/components/icons/users.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const UsersIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  color = "#858E96",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 20 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill={color}
+      d="M12.754 7C13.72 7 14.504 7.784 14.504 8.75V13.499C14.504 14.6927 14.0298 15.8376 13.1857 16.6817C12.3416 17.5258 11.1967 18 10.003 18C8.80926 18 7.66441 17.5258 6.82031 16.6817C5.97621 15.8376 5.502 14.6927 5.502 13.499V8.75C5.502 7.784 6.285 7 7.252 7H12.754ZM12.754 8.5H7.252C7.1857 8.5 7.12211 8.52634 7.07522 8.57322C7.02834 8.62011 7.002 8.6837 7.002 8.75V13.499C7.002 14.2949 7.31818 15.0582 7.88097 15.621C8.44377 16.1838 9.20709 16.5 10.003 16.5C10.7989 16.5 11.5622 16.1838 12.125 15.621C12.6878 15.0582 13.004 14.2949 13.004 13.499V8.75C13.004 8.6837 12.9777 8.62011 12.9308 8.57322C12.8839 8.52634 12.8203 8.5 12.754 8.5ZM1.75 7H5.131C4.7782 7.42609 4.56274 7.94905 4.513 8.5H1.75C1.6837 8.5 1.62011 8.52634 1.57322 8.57322C1.52634 8.62011 1.5 8.6837 1.5 8.75V11.999C1.49994 12.3769 1.5855 12.7499 1.75027 13.0899C1.91504 13.43 2.15473 13.7283 2.45133 13.9625C2.74793 14.1966 3.09374 14.3605 3.46277 14.4418C3.83179 14.5231 4.21445 14.5198 4.582 14.432C4.667 14.936 4.822 15.417 5.035 15.864C4.44228 16.0226 3.82103 16.0427 3.21929 15.9228C2.61756 15.8029 2.05145 15.5463 1.56475 15.1727C1.07805 14.7991 0.683789 14.3185 0.412463 13.7682C0.141138 13.2179 1.22998e-05 12.6126 0 11.999V8.75C0 7.784 0.784 7 1.75 7ZM14.875 7H18.25C19.216 7 20 7.784 20 8.75V12C20.0001 12.6132 19.8593 13.2182 19.5884 13.7682C19.3175 14.3183 18.9237 14.7987 18.4376 15.1724C17.9514 15.546 17.3858 15.8029 16.7846 15.9232C16.1833 16.0435 15.5625 16.0239 14.97 15.866C15.184 15.418 15.339 14.937 15.425 14.433C15.7921 14.5198 16.174 14.5223 16.5423 14.4405C16.9105 14.3587 17.2554 14.1946 17.5512 13.9606C17.847 13.7265 18.086 13.4286 18.2503 13.089C18.4147 12.7495 18.5 12.3772 18.5 12V8.75C18.5 8.6837 18.4737 8.62011 18.4268 8.57322C18.3799 8.52634 18.3163 8.5 18.25 8.5H15.493C15.4433 7.94905 15.2278 7.42609 14.875 7ZM10 0C10.7956 0 11.5587 0.316071 12.1213 0.87868C12.6839 1.44129 13 2.20435 13 3C13 3.79565 12.6839 4.55871 12.1213 5.12132C11.5587 5.68393 10.7956 6 10 6C9.20435 6 8.44129 5.68393 7.87868 5.12132C7.31607 4.55871 7 3.79565 7 3C7 2.20435 7.31607 1.44129 7.87868 0.87868C8.44129 0.316071 9.20435 0 10 0ZM16.5 1C17.163 1 17.7989 1.26339 18.2678 1.73223C18.7366 2.20107 19 2.83696 19 3.5C19 4.16304 18.7366 4.79893 18.2678 5.26777C17.7989 5.73661 17.163 6 16.5 6C15.837 6 15.2011 5.73661 14.7322 5.26777C14.2634 4.79893 14 4.16304 14 3.5C14 2.83696 14.2634 2.20107 14.7322 1.73223C15.2011 1.26339 15.837 1 16.5 1ZM3.5 1C4.16304 1 4.79893 1.26339 5.26777 1.73223C5.73661 2.20107 6 2.83696 6 3.5C6 4.16304 5.73661 4.79893 5.26777 5.26777C4.79893 5.73661 4.16304 6 3.5 6C2.83696 6 2.20107 5.73661 1.73223 5.26777C1.26339 4.79893 1 4.16304 1 3.5C1 2.83696 1.26339 2.20107 1.73223 1.73223C2.20107 1.26339 2.83696 1 3.5 1ZM10 1.5C9.60218 1.5 9.22064 1.65804 8.93934 1.93934C8.65804 2.22064 8.5 2.60218 8.5 3C8.5 3.39782 8.65804 3.77936 8.93934 4.06066C9.22064 4.34196 9.60218 4.5 10 4.5C10.3978 4.5 10.7794 4.34196 11.0607 4.06066C11.342 3.77936 11.5 3.39782 11.5 3C11.5 2.60218 11.342 2.22064 11.0607 1.93934C10.7794 1.65804 10.3978 1.5 10 1.5ZM16.5 2.5C16.2348 2.5 15.9804 2.60536 15.7929 2.79289C15.6054 2.98043 15.5 3.23478 15.5 3.5C15.5 3.76522 15.6054 4.01957 15.7929 4.20711C15.9804 4.39464 16.2348 4.5 16.5 4.5C16.7652 4.5 17.0196 4.39464 17.2071 4.20711C17.3946 4.01957 17.5 3.76522 17.5 3.5C17.5 3.23478 17.3946 2.98043 17.2071 2.79289C17.0196 2.60536 16.7652 2.5 16.5 2.5ZM3.5 2.5C3.23478 2.5 2.98043 2.60536 2.79289 2.79289C2.60536 2.98043 2.5 3.23478 2.5 3.5C2.5 3.76522 2.60536 4.01957 2.79289 4.20711C2.98043 4.39464 3.23478 4.5 3.5 4.5C3.76522 4.5 4.01957 4.39464 4.20711 4.20711C4.39464 4.01957 4.5 3.76522 4.5 3.5C4.5 3.23478 4.39464 2.98043 4.20711 2.79289C4.01957 2.60536 3.76522 2.5 3.5 2.5Z"
+    />
+  </svg>
+);
diff --git a/app/components/icons/video-file-icon.tsx b/app/components/icons/video-file-icon.tsx
new file mode 100644
index 000000000..8deb7a80b
--- /dev/null
+++ b/app/components/icons/video-file-icon.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "next/image";
+
+import type { Props } from "./types";
+import VideoFileIcon from "public/attachment/video-icon.png";
+
+export const VideoIcon: React.FC<Props> = ({ width, height  }) => (
+  <Image src={VideoFileIcon} height={height} width={width} alt="VideoFileIcon" />
+);
diff --git a/app/components/icons/view-list-icon.tsx b/app/components/icons/view-list-icon.tsx
new file mode 100644
index 000000000..e893c2732
--- /dev/null
+++ b/app/components/icons/view-list-icon.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const ViewListIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color = "#858E96",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2.25 13.125V4.875C2.25 4.5625 2.35938 4.29688 2.57812 4.07812C2.79688 3.85938 3.0625 3.75 3.375 3.75H14.625C14.9375 3.75 15.2031 3.85938 15.4219 4.07812C15.6406 4.29688 15.75 4.5625 15.75 4.875V13.125C15.75 13.4375 15.6406 13.7031 15.4219 13.9219C15.2031 14.1406 14.9375 14.25 14.625 14.25H3.375C3.0625 14.25 2.79688 14.1406 2.57812 13.9219C2.35938 13.7031 2.25 13.4375 2.25 13.125ZM3.375 6.88125H5.3625V4.875H3.375V6.88125ZM6.4875 6.88125H14.625V4.875H6.4875V6.88125ZM6.4875 9.99375H14.625V8.00625H6.4875V9.99375ZM6.4875 13.125H14.625V11.1187H6.4875V13.125ZM3.375 13.125H5.3625V11.1187H3.375V13.125ZM3.375 9.99375H5.3625V8.00625H3.375V9.99375Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/app/components/icons/water-drop-icon.tsx b/app/components/icons/water-drop-icon.tsx
new file mode 100644
index 000000000..8123db09b
--- /dev/null
+++ b/app/components/icons/water-drop-icon.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const WaterDropIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color = "#858e96",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 14 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.00016 17.334C5.23627 17.334 3.68419 16.7194 2.34391 15.4902C1.00363 14.2611 0.333496 12.5979 0.333496 10.5007C0.333496 9.16732 0.843913 7.7194 1.86475 6.1569C2.88558 4.5944 4.43766 2.90343 6.521 1.08398C6.59044 1.02843 6.66683 0.98329 6.75016 0.948568C6.8335 0.913845 6.91683 0.896484 7.00016 0.896484C7.0835 0.896484 7.16683 0.913845 7.25016 0.948568C7.3335 0.98329 7.40988 1.02843 7.47933 1.08398C9.56266 2.90343 11.1147 4.5944 12.1356 6.1569C13.1564 7.7194 13.6668 9.16732 13.6668 10.5007C13.6668 12.5979 12.9967 14.2611 11.6564 15.4902C10.3161 16.7194 8.76405 17.334 7.00016 17.334ZM7.00016 16.084C8.52794 16.084 9.81266 15.5562 10.8543 14.5007C11.896 13.4451 12.4168 12.1118 12.4168 10.5007C12.4168 9.40343 11.955 8.1569 11.0314 6.76107C10.1078 5.36523 8.76405 3.88954 7.00016 2.33398C5.23627 3.88954 3.89252 5.36523 2.96891 6.76107C2.0453 8.1569 1.5835 9.40343 1.5835 10.5007C1.5835 12.1118 2.10433 13.4451 3.146 14.5007C4.18766 15.5562 5.47238 16.084 7.00016 16.084ZM6.97933 14.6673C7.20155 14.6673 7.37169 14.6291 7.48975 14.5527C7.6078 14.4763 7.66683 14.3618 7.66683 14.209C7.66683 14.0562 7.6078 13.9382 7.48975 13.8548C7.37169 13.7715 7.19461 13.7298 6.9585 13.7298C6.37516 13.7298 5.78141 13.5458 5.17725 13.1777C4.57308 12.8097 4.18766 12.1604 4.021 11.2298C3.99322 11.1048 3.93072 11.0041 3.8335 10.9277C3.73627 10.8513 3.63211 10.8132 3.521 10.8132C3.36822 10.8132 3.25016 10.8722 3.16683 10.9902C3.0835 11.1083 3.05572 11.2298 3.0835 11.3548C3.29183 12.5215 3.78488 13.3652 4.56266 13.8861C5.34044 14.4069 6.146 14.6673 6.97933 14.6673Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/app/components/integration/delete-import-modal.tsx b/app/components/integration/delete-import-modal.tsx
new file mode 100644
index 000000000..b1ae01cc8
--- /dev/null
+++ b/app/components/integration/delete-import-modal.tsx
@@ -0,0 +1,144 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import IntegrationService from "services/integration";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { DangerButton, Input, SecondaryButton } from "components/ui";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// types
+import { IImporterService } from "types";
+// fetch-keys
+import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data: IImporterService | null;
+};
+
+export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data }) => {
+  const [deleteLoading, setDeleteLoading] = useState(false);
+  const [confirmDeleteImport, setConfirmDeleteImport] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleDeletion = () => {
+    if (!workspaceSlug || !data) return;
+
+    setDeleteLoading(true);
+
+    mutate<IImporterService[]>(
+      IMPORTER_SERVICES_LIST(workspaceSlug as string),
+      (prevData) => (prevData ?? []).filter((i) => i.id !== data.id),
+      false
+    );
+
+    IntegrationService.deleteImporterService(workspaceSlug as string, data.service, data.id)
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong. Please try again.",
+        })
+      )
+      .finally(() => {
+        setDeleteLoading(false);
+        handleClose();
+      });
+  };
+
+  if (!data) return <></>;
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                <div className="flex flex-col gap-6 p-6">
+                  <div className="flex w-full items-center justify-start gap-6">
+                    <span className="place-items-center rounded-full bg-red-100 p-4">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </span>
+                    <span className="flex items-center justify-start">
+                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete Project</h3>
+                    </span>
+                  </div>
+                  <span>
+                    <p className="text-sm leading-7 text-gray-500">
+                      Are you sure you want to delete project{" "}
+                      <span className="break-all font-semibold">{data?.service}</span>? All of the
+                      data related to the project will be permanently removed. This action cannot be
+                      undone
+                    </p>
+                  </span>
+                  <div className="text-gray-600">
+                    <p className="text-sm">
+                      To confirm, type <span className="font-medium">delete import</span> below:
+                    </p>
+                    <Input
+                      type="text"
+                      name="typeDelete"
+                      className="mt-2"
+                      onChange={(e) => {
+                        if (e.target.value === "delete import") setConfirmDeleteImport(true);
+                        else setConfirmDeleteImport(false);
+                      }}
+                      placeholder="Enter 'delete import'"
+                    />
+                  </div>
+                  <div className="flex justify-end gap-2">
+                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                    <DangerButton
+                      onClick={handleDeletion}
+                      disabled={!confirmDeleteImport}
+                      loading={deleteLoading}
+                    >
+                      {deleteLoading ? "Deleting..." : "Delete Project"}
+                    </DangerButton>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/integration/github/auth.tsx b/app/components/integration/github/auth.tsx
new file mode 100644
index 000000000..b530b4a24
--- /dev/null
+++ b/app/components/integration/github/auth.tsx
@@ -0,0 +1,27 @@
+// hooks
+import useIntegrationPopup from "hooks/use-integration-popup";
+// ui
+import { PrimaryButton } from "components/ui";
+// types
+import { IWorkspaceIntegration } from "types";
+
+type Props = {
+  workspaceIntegration: false | IWorkspaceIntegration | undefined;
+  provider: string | undefined;
+};
+
+export const GithubAuth: React.FC<Props> = ({ workspaceIntegration, provider }) => {
+  const { startAuth, isConnecting } = useIntegrationPopup(provider);
+
+  return (
+    <div>
+      {workspaceIntegration && workspaceIntegration?.id ? (
+        <PrimaryButton disabled>Successfully Connected</PrimaryButton>
+      ) : (
+        <PrimaryButton onClick={startAuth} loading={isConnecting}>
+          {isConnecting ? "Connecting..." : "Connect"}
+        </PrimaryButton>
+      )}
+    </div>
+  );
+};
diff --git a/app/components/integration/github/import-configure.tsx b/app/components/integration/github/import-configure.tsx
new file mode 100644
index 000000000..55abe058c
--- /dev/null
+++ b/app/components/integration/github/import-configure.tsx
@@ -0,0 +1,56 @@
+// components
+import { GithubAuth, TIntegrationSteps } from "components/integration";
+// ui
+import { PrimaryButton } from "components/ui";
+// types
+import { IAppIntegration, IWorkspaceIntegration } from "types";
+
+type Props = {
+  provider: string | undefined;
+  handleStepChange: (value: TIntegrationSteps) => void;
+  appIntegrations: IAppIntegration[] | undefined;
+  workspaceIntegrations: IWorkspaceIntegration[] | undefined;
+};
+
+export const GithubImportConfigure: React.FC<Props> = ({
+  handleStepChange,
+  provider,
+  appIntegrations,
+  workspaceIntegrations,
+}) => {
+  // current integration from all the integrations available
+  const integration =
+    appIntegrations &&
+    appIntegrations.length > 0 &&
+    appIntegrations.find((i) => i.provider === provider);
+
+  // current integration from workspace integrations
+  const workspaceIntegration =
+    integration &&
+    workspaceIntegrations &&
+    workspaceIntegrations.length > 0 &&
+    workspaceIntegrations.find((i: any) => i.integration_detail.id === integration.id);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-2 py-5">
+        <div className="w-full">
+          <div className="font-medium">Configure</div>
+          <div className="text-sm text-gray-600">Set up your GitHub import.</div>
+        </div>
+        <div className="flex-shrink-0">
+          <GithubAuth workspaceIntegration={workspaceIntegration} provider={provider} />
+        </div>
+      </div>
+
+      <div className="flex items-center justify-end">
+        <PrimaryButton
+          onClick={() => handleStepChange("import-data")}
+          disabled={workspaceIntegration && workspaceIntegration?.id ? false : true}
+        >
+          Next
+        </PrimaryButton>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/integration/github/import-confirm.tsx b/app/components/integration/github/import-confirm.tsx
new file mode 100644
index 000000000..3e5ed5808
--- /dev/null
+++ b/app/components/integration/github/import-confirm.tsx
@@ -0,0 +1,27 @@
+import { FC } from "react";
+
+// react-hook-form
+import { UseFormWatch } from "react-hook-form";
+// ui
+import { PrimaryButton, SecondaryButton } from "components/ui";
+// types
+import { TFormValues, TIntegrationSteps } from "components/integration";
+
+type Props = {
+  handleStepChange: (value: TIntegrationSteps) => void;
+  watch: UseFormWatch<TFormValues>;
+};
+
+export const GithubImportConfirm: FC<Props> = ({ handleStepChange, watch }) => (
+  <div className="mt-6">
+    <h4 className="font-medium">
+      You are about to import issues from {watch("github").full_name}. Click on {'"'}Confirm &
+      Import{'" '}
+      to complete the process.
+    </h4>
+    <div className="mt-6 flex items-center justify-between">
+      <SecondaryButton onClick={() => handleStepChange("import-users")}>Back</SecondaryButton>
+      <PrimaryButton type="submit">Confirm & Import</PrimaryButton>
+    </div>
+  </div>
+);
diff --git a/app/components/integration/github/import-data.tsx b/app/components/integration/github/import-data.tsx
new file mode 100644
index 000000000..2b93017c1
--- /dev/null
+++ b/app/components/integration/github/import-data.tsx
@@ -0,0 +1,127 @@
+import { FC, useState } from "react";
+
+// react-hook-form
+import { Control, Controller, UseFormWatch } from "react-hook-form";
+// hooks
+import useProjects from "hooks/use-projects";
+// components
+import { SelectRepository, TFormValues, TIntegrationSteps } from "components/integration";
+// ui
+import { CustomSearchSelect, PrimaryButton, SecondaryButton } from "components/ui";
+// helpers
+import { truncateText } from "helpers/string.helper";
+// types
+import { IWorkspaceIntegration } from "types";
+
+type Props = {
+  handleStepChange: (value: TIntegrationSteps) => void;
+  integration: IWorkspaceIntegration | false | undefined;
+  control: Control<TFormValues, any>;
+  watch: UseFormWatch<TFormValues>;
+};
+
+export const GithubImportData: FC<Props> = ({ handleStepChange, integration, control, watch }) => {
+  const { projects } = useProjects();
+
+  const options =
+    projects.map((project) => ({
+      value: project.id,
+      query: project.name,
+      content: <p>{truncateText(project.name, 25)}</p>,
+    })) ?? [];
+
+  return (
+    <div className="mt-6">
+      <div className="space-y-8">
+        <div className="grid grid-cols-12 gap-4 sm:gap-16">
+          <div className="col-span-12 sm:col-span-8">
+            <h4 className="font-semibold">Select Repository</h4>
+            <p className="text-gray-500 text-xs">
+              Select the repository that you want the issues to be imported from.
+            </p>
+          </div>
+          <div className="col-span-12 sm:col-span-4">
+            {integration && (
+              <Controller
+                control={control}
+                name="github"
+                render={({ field: { value, onChange } }) => (
+                  <SelectRepository
+                    integration={integration}
+                    value={value ? value.id : null}
+                    label={value ? `${value.full_name}` : "Select Repository"}
+                    onChange={onChange}
+                    characterLimit={50}
+                  />
+                )}
+              />
+            )}
+          </div>
+        </div>
+        <div className="grid grid-cols-12 gap-4 sm:gap-16">
+          <div className="col-span-12 sm:col-span-8">
+            <h4 className="font-semibold">Select Project</h4>
+            <p className="text-gray-500 text-xs">Select the project to import the issues to.</p>
+          </div>
+          <div className="col-span-12 sm:col-span-4">
+            {projects && (
+              <Controller
+                control={control}
+                name="project"
+                render={({ field: { value, onChange } }) => (
+                  <CustomSearchSelect
+                    value={value}
+                    label={value ? projects.find((p) => p.id === value)?.name : "Select Project"}
+                    onChange={onChange}
+                    options={options}
+                    optionsClassName="w-full"
+                  />
+                )}
+              />
+            )}
+          </div>
+        </div>
+        <div className="grid grid-cols-12 gap-4 sm:gap-16">
+          <div className="col-span-12 sm:col-span-8">
+            <h4 className="font-semibold">Sync Issues</h4>
+            <p className="text-gray-500 text-xs">Set whether you want to sync the issues or not.</p>
+          </div>
+          <div className="col-span-12 sm:col-span-4">
+            <Controller
+              control={control}
+              name="sync"
+              render={({ field: { value, onChange } }) => (
+                <button
+                  type="button"
+                  className={`relative inline-flex h-3.5 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                    value ? "bg-green-500" : "bg-gray-200"
+                  }`}
+                  role="switch"
+                  aria-checked={value ? true : false}
+                  onClick={() => onChange(!value)}
+                >
+                  <span className="sr-only">Show empty groups</span>
+                  <span
+                    aria-hidden="true"
+                    className={`inline-block h-2.5 w-2.5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                      value ? "translate-x-2.5" : "translate-x-0"
+                    }`}
+                  />
+                </button>
+              )}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="mt-6 flex items-center justify-end gap-2">
+        <SecondaryButton onClick={() => handleStepChange("import-configure")}>Back</SecondaryButton>
+        <PrimaryButton
+          onClick={() => handleStepChange("repo-details")}
+          disabled={!watch("github") || !watch("project")}
+        >
+          Next
+        </PrimaryButton>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/integration/github/import-users.tsx b/app/components/integration/github/import-users.tsx
new file mode 100644
index 000000000..c1c790396
--- /dev/null
+++ b/app/components/integration/github/import-users.tsx
@@ -0,0 +1,55 @@
+import { FC } from "react";
+
+// react-hook-form
+import { UseFormWatch } from "react-hook-form";
+// ui
+import { PrimaryButton, SecondaryButton } from "components/ui";
+// types
+import {
+  IUserDetails,
+  SingleUserSelect,
+  TFormValues,
+  TIntegrationSteps,
+} from "components/integration";
+
+type Props = {
+  handleStepChange: (value: TIntegrationSteps) => void;
+  users: IUserDetails[];
+  setUsers: React.Dispatch<React.SetStateAction<IUserDetails[]>>;
+  watch: UseFormWatch<TFormValues>;
+};
+
+export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers, watch }) => {
+  const isInvalid = users.filter((u) => u.import !== false && u.email === "").length > 0;
+
+  return (
+    <div className="mt-6">
+      <div>
+        <div className="grid grid-cols-3 gap-2 text-sm mb-2 font-medium">
+          <div>Name</div>
+          <div>Import as...</div>
+          <div className="text-right">
+            {users.filter((u) => u.import !== false).length} users selected
+          </div>
+        </div>
+        <div className="space-y-2">
+          {watch("collaborators").map((collaborator, index) => (
+            <SingleUserSelect
+              key={collaborator.id}
+              collaborator={collaborator}
+              index={index}
+              users={users}
+              setUsers={setUsers}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="mt-6 flex items-center justify-end gap-2">
+        <SecondaryButton onClick={() => handleStepChange("repo-details")}>Back</SecondaryButton>
+        <PrimaryButton onClick={() => handleStepChange("import-confirm")} disabled={isInvalid}>
+          Next
+        </PrimaryButton>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/integration/github/index.ts b/app/components/integration/github/index.ts
new file mode 100644
index 000000000..c215e9a0c
--- /dev/null
+++ b/app/components/integration/github/index.ts
@@ -0,0 +1,9 @@
+export * from "./auth";
+export * from "./import-configure";
+export * from "./import-confirm";
+export * from "./import-data";
+export * from "./import-users";
+export * from "./repo-details";
+export * from "./root";
+export * from "./select-repository";
+export * from "./single-user-select";
diff --git a/app/components/integration/github/repo-details.tsx b/app/components/integration/github/repo-details.tsx
new file mode 100644
index 000000000..61ca8dbb2
--- /dev/null
+++ b/app/components/integration/github/repo-details.tsx
@@ -0,0 +1,105 @@
+import { FC, useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// react-hook-form
+import { UseFormSetValue } from "react-hook-form";
+// services
+import GithubIntegrationService from "services/integration/github.service";
+// ui
+import { Loader, PrimaryButton, SecondaryButton } from "components/ui";
+// types
+import { IUserDetails, TFormValues, TIntegrationSteps } from "components/integration";
+// fetch-keys
+import { GITHUB_REPOSITORY_INFO } from "constants/fetch-keys";
+
+type Props = {
+  selectedRepo: any;
+  handleStepChange: (value: TIntegrationSteps) => void;
+  setUsers: React.Dispatch<React.SetStateAction<IUserDetails[]>>;
+  setValue: UseFormSetValue<TFormValues>;
+};
+
+export const GithubRepoDetails: FC<Props> = ({
+  selectedRepo,
+  handleStepChange,
+  setUsers,
+  setValue,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: repoInfo } = useSWR(
+    workspaceSlug && selectedRepo
+      ? GITHUB_REPOSITORY_INFO(workspaceSlug as string, selectedRepo.name)
+      : null,
+    workspaceSlug && selectedRepo
+      ? () =>
+          GithubIntegrationService.getGithubRepoInfo(workspaceSlug as string, {
+            owner: selectedRepo.owner.login,
+            repo: selectedRepo.name,
+          })
+      : null
+  );
+
+  useEffect(() => {
+    if (!repoInfo) return;
+
+    setValue("collaborators", repoInfo.collaborators);
+
+    const fetchedUsers = repoInfo.collaborators.map((collaborator) => ({
+      username: collaborator.login,
+      import: "map",
+      email: "",
+    }));
+    setUsers(fetchedUsers);
+  }, [repoInfo, setUsers, setValue]);
+
+  return (
+    <div className="mt-6">
+      {repoInfo ? (
+        repoInfo.issue_count > 0 ? (
+          <div className="flex items-center justify-between gap-4">
+            <div>
+              <div className="font-medium">Repository Details</div>
+              <div className="text-sm text-gray-600">Import completed. We have found:</div>
+            </div>
+            <div className="flex gap-16 mt-4">
+              <div className="text-center flex-shrink-0">
+                <p className="text-3xl font-bold">{repoInfo.issue_count}</p>
+                <h6 className="text-sm text-gray-500">Issues</h6>
+              </div>
+              <div className="text-center flex-shrink-0">
+                <p className="text-3xl font-bold">{repoInfo.labels}</p>
+                <h6 className="text-sm text-gray-500">Labels</h6>
+              </div>
+              <div className="text-center flex-shrink-0">
+                <p className="text-3xl font-bold">{repoInfo.collaborators.length}</p>
+                <h6 className="text-sm text-gray-500">Users</h6>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div>
+            <h5>We didn{"'"}t find any issue in this repository.</h5>
+          </div>
+        )
+      ) : (
+        <Loader>
+          <Loader.Item height="70px" />
+        </Loader>
+      )}
+      <div className="mt-6 flex items-center justify-end gap-2">
+        <SecondaryButton onClick={() => handleStepChange("import-data")}>Back</SecondaryButton>
+        <PrimaryButton
+          onClick={() => handleStepChange("import-users")}
+          disabled={!repoInfo || repoInfo.issue_count === 0}
+        >
+          Next
+        </PrimaryButton>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/integration/github/root.tsx b/app/components/integration/github/root.tsx
new file mode 100644
index 000000000..2c9e430db
--- /dev/null
+++ b/app/components/integration/github/root.tsx
@@ -0,0 +1,271 @@
+import React, { useState } from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// services
+import IntegrationService from "services/integration";
+import GithubIntegrationService from "services/integration/github.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import {
+  GithubImportConfigure,
+  GithubImportData,
+  GithubRepoDetails,
+  GithubImportUsers,
+  GithubImportConfirm,
+} from "components/integration";
+// icons
+import { CogIcon, CloudUploadIcon, UsersIcon, CheckIcon } from "components/icons";
+import { ArrowLeftIcon, ListBulletIcon } from "@heroicons/react/24/outline";
+// images
+import GithubLogo from "public/services/github.png";
+// types
+import { IGithubRepoCollaborator, IGithubServiceImportFormData } from "types";
+// fetch-keys
+import {
+  APP_INTEGRATIONS,
+  IMPORTER_SERVICES_LIST,
+  WORKSPACE_INTEGRATIONS,
+} from "constants/fetch-keys";
+
+export type TIntegrationSteps =
+  | "import-configure"
+  | "import-data"
+  | "repo-details"
+  | "import-users"
+  | "import-confirm";
+export interface IIntegrationData {
+  state: TIntegrationSteps;
+}
+
+export interface IUserDetails {
+  username: string;
+  import: any;
+  email: string;
+}
+
+export type TFormValues = {
+  github: any;
+  project: string | null;
+  sync: boolean;
+  collaborators: IGithubRepoCollaborator[];
+  users: IUserDetails[];
+};
+
+const defaultFormValues = {
+  github: null,
+  project: null,
+  sync: false,
+};
+
+const integrationWorkflowData = [
+  {
+    title: "Configure",
+    key: "import-configure",
+    icon: CogIcon,
+  },
+  {
+    title: "Import Data",
+    key: "import-data",
+    icon: CloudUploadIcon,
+  },
+  { title: "Issues", key: "repo-details", icon: ListBulletIcon },
+  {
+    title: "Users",
+    key: "import-users",
+    icon: UsersIcon,
+  },
+  {
+    title: "Confirm",
+    key: "import-confirm",
+    icon: CheckIcon,
+  },
+];
+
+export const GithubImporterRoot = () => {
+  const [currentStep, setCurrentStep] = useState<IIntegrationData>({
+    state: "import-configure",
+  });
+  const [users, setUsers] = useState<IUserDetails[]>([]);
+
+  const router = useRouter();
+  const { workspaceSlug, provider } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { handleSubmit, control, setValue, watch } = useForm<TFormValues>({
+    defaultValues: defaultFormValues,
+  });
+
+  const { data: appIntegrations } = useSWR(APP_INTEGRATIONS, () =>
+    IntegrationService.getAppIntegrationsList()
+  );
+
+  const { data: workspaceIntegrations } = useSWR(
+    workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
+    workspaceSlug
+      ? () => IntegrationService.getWorkspaceIntegrationsList(workspaceSlug as string)
+      : null
+  );
+
+  const activeIntegrationState = () => {
+    const currentElementIndex = integrationWorkflowData.findIndex(
+      (i) => i?.key === currentStep?.state
+    );
+
+    return currentElementIndex;
+  };
+
+  const handleStepChange = (value: TIntegrationSteps) => {
+    setCurrentStep((prevData) => ({ ...prevData, state: value }));
+  };
+
+  // current integration from all the integrations available
+  const integration =
+    appIntegrations &&
+    appIntegrations.length > 0 &&
+    appIntegrations.find((i) => i.provider === provider);
+
+  // current integration from workspace integrations
+  const workspaceIntegration =
+    integration &&
+    workspaceIntegrations?.find((i: any) => i.integration_detail.id === integration.id);
+
+  const createGithubImporterService = async (formData: TFormValues) => {
+    if (!formData.github || !formData.project) return;
+
+    const payload: IGithubServiceImportFormData = {
+      metadata: {
+        owner: formData.github.owner.login,
+        name: formData.github.name,
+        repository_id: formData.github.id,
+        url: formData.github.html_url,
+      },
+      data: {
+        users: users,
+      },
+      config: {
+        sync: formData.sync,
+      },
+      project_id: formData.project,
+    };
+
+    await GithubIntegrationService.createGithubServiceImport(workspaceSlug as string, payload)
+      .then(() => {
+        router.push(`/${workspaceSlug}/settings/import-export`);
+        mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string));
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Import was unsuccessful. Please try again.",
+        })
+      );
+  };
+
+  return (
+    <form onSubmit={handleSubmit(createGithubImporterService)}>
+      <div className="space-y-2">
+        <Link href={`/${workspaceSlug}/settings/import-export`}>
+          <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900">
+            <div>
+              <ArrowLeftIcon className="h-3 w-3" />
+            </div>
+            <div>Cancel import & go back</div>
+          </div>
+        </Link>
+
+        <div className="space-y-4 rounded-[10px] border border-gray-200 bg-white p-4">
+          <div className="flex items-center gap-2">
+            <div className="h-10 w-10 flex-shrink-0">
+              <Image src={GithubLogo} alt="GithubLogo" />
+            </div>
+            <div className="flex h-full w-full items-center justify-center">
+              {integrationWorkflowData.map((integration, index) => (
+                <React.Fragment key={integration.key}>
+                  <div
+                    className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border ${
+                      index <= activeIntegrationState()
+                        ? `border-[#3F76FF] bg-[#3F76FF] text-white ${
+                            index === activeIntegrationState()
+                              ? "border-opacity-100 bg-opacity-100"
+                              : "border-opacity-80 bg-opacity-80"
+                          }`
+                        : "border-gray-300"
+                    }`}
+                  >
+                    <integration.icon
+                      width="18px"
+                      height="18px"
+                      color={index <= activeIntegrationState() ? "#ffffff" : "#d1d5db"}
+                    />
+                  </div>
+                  {index < integrationWorkflowData.length - 1 && (
+                    <div
+                      key={index}
+                      className={`border-b px-7 ${
+                        index <= activeIntegrationState() - 1
+                          ? `border-[#3F76FF]`
+                          : `border-gray-300`
+                      }`}
+                    >
+                      {" "}
+                    </div>
+                  )}
+                </React.Fragment>
+              ))}
+            </div>
+          </div>
+
+          <div className="relative w-full space-y-4">
+            <div className="w-full">
+              {currentStep?.state === "import-configure" && (
+                <GithubImportConfigure
+                  handleStepChange={handleStepChange}
+                  provider={provider as string}
+                  appIntegrations={appIntegrations}
+                  workspaceIntegrations={workspaceIntegrations}
+                />
+              )}
+              {currentStep?.state === "import-data" && (
+                <GithubImportData
+                  handleStepChange={handleStepChange}
+                  integration={workspaceIntegration}
+                  control={control}
+                  watch={watch}
+                />
+              )}
+              {currentStep?.state === "repo-details" && (
+                <GithubRepoDetails
+                  selectedRepo={watch("github")}
+                  handleStepChange={handleStepChange}
+                  setUsers={setUsers}
+                  setValue={setValue}
+                />
+              )}
+              {currentStep?.state === "import-users" && (
+                <GithubImportUsers
+                  handleStepChange={handleStepChange}
+                  users={users}
+                  setUsers={setUsers}
+                  watch={watch}
+                />
+              )}
+              {currentStep?.state === "import-confirm" && (
+                <GithubImportConfirm handleStepChange={handleStepChange} watch={watch} />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+};
diff --git a/app/components/integration/github/select-repository.tsx b/app/components/integration/github/select-repository.tsx
new file mode 100644
index 000000000..306b1e90e
--- /dev/null
+++ b/app/components/integration/github/select-repository.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWRInfinite from "swr/infinite";
+
+// services
+import projectService from "services/project.service";
+// ui
+import { CustomSearchSelect } from "components/ui";
+// helpers
+import { truncateText } from "helpers/string.helper";
+// types
+import { IWorkspaceIntegration } from "types";
+
+type Props = {
+  integration: IWorkspaceIntegration;
+  value: any;
+  label: string;
+  onChange: (repo: any) => void;
+  characterLimit?: number;
+};
+
+export const SelectRepository: React.FC<Props> = ({
+  integration,
+  value,
+  label,
+  onChange,
+  characterLimit = 25,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const getKey = (pageIndex: number) => {
+    if (!workspaceSlug || !integration) return;
+
+    return `${
+      process.env.NEXT_PUBLIC_API_BASE_URL
+    }/api/workspaces/${workspaceSlug}/workspace-integrations/${
+      integration.id
+    }/github-repositories/?page=${++pageIndex}`;
+  };
+
+  const fetchGithubRepos = async (url: string) => {
+    const data = await projectService.getGithubRepositories(url);
+
+    return data;
+  };
+
+  const {
+    data: paginatedData,
+    size,
+    setSize,
+    isValidating,
+  } = useSWRInfinite(getKey, fetchGithubRepos);
+
+  const userRepositories = (paginatedData ?? []).map((data) => data.repositories).flat();
+  const totalCount = paginatedData && paginatedData.length > 0 ? paginatedData[0].total_count : 0;
+
+  const options =
+    userRepositories.map((repo) => ({
+      value: repo.id,
+      query: repo.full_name,
+      content: <p>{truncateText(repo.full_name, characterLimit)}</p>,
+    })) ?? [];
+
+  return (
+    <CustomSearchSelect
+      value={value}
+      options={options}
+      onChange={(val: string) => {
+        const repo = userRepositories.find((repo) => repo.id === val);
+
+        onChange(repo);
+      }}
+      label={label}
+      footerOption={
+        <>
+          {userRepositories && options.length < totalCount && (
+            <button
+              type="button"
+              className="w-full p-1 text-center text-[0.6rem] text-gray-500 hover:bg-hover-gray"
+              onClick={() => setSize(size + 1)}
+              disabled={isValidating}
+            >
+              {isValidating ? "Loading..." : "Click to load more..."}
+            </button>
+          )}
+        </>
+      }
+      position="right"
+      optionsClassName="w-full"
+    />
+  );
+};
diff --git a/app/components/integration/github/single-user-select.tsx b/app/components/integration/github/single-user-select.tsx
new file mode 100644
index 000000000..ffb67d728
--- /dev/null
+++ b/app/components/integration/github/single-user-select.tsx
@@ -0,0 +1,133 @@
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import workspaceService from "services/workspace.service";
+// ui
+import { Avatar, CustomSearchSelect, CustomSelect, Input } from "components/ui";
+// types
+import { IGithubRepoCollaborator } from "types";
+import { IUserDetails } from "./root";
+// fetch-keys
+import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
+
+type Props = {
+  collaborator: IGithubRepoCollaborator;
+  index: number;
+  users: IUserDetails[];
+  setUsers: React.Dispatch<React.SetStateAction<IUserDetails[]>>;
+};
+
+const importOptions = [
+  {
+    key: "map",
+    label: "Map to existing",
+  },
+  {
+    key: "invite",
+    label: "Invite by email",
+  },
+  {
+    key: false,
+    label: "Do not import",
+  },
+];
+
+export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users, setUsers }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: members } = useSWR(
+    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug.toString()) : null
+  );
+
+  const options =
+    members?.map((member) => ({
+      value: member.member.email,
+      query:
+        (member.member.first_name && member.member.first_name !== ""
+          ? member.member.first_name
+          : member.member.email) +
+          " " +
+          member.member.last_name ?? "",
+      content: (
+        <div className="flex items-center gap-2">
+          <Avatar user={member.member} />
+          {member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name + "(" + member.member.email + ")"
+            : member.member.email}
+        </div>
+      ),
+    })) ?? [];
+
+  return (
+    <div className="bg-gray-50 px-2 py-3 rounded-md grid grid-cols-3 items-center gap-2">
+      <div className="flex items-center gap-2">
+        <div className="relative h-8 w-8 rounded flex-shrink-0">
+          <Image
+            src={collaborator.avatar_url}
+            layout="fill"
+            objectFit="cover"
+            className="rounded"
+            alt={`${collaborator.login} GitHub user`}
+          />
+        </div>
+        <p className="text-sm">{collaborator.login}</p>
+      </div>
+      <div>
+        <CustomSelect
+          value={users[index].import}
+          label={
+            <div className="text-xs">
+              {importOptions.find((o) => o.key === users[index].import)?.label}
+            </div>
+          }
+          onChange={(val: any) => {
+            const newUsers = [...users];
+            newUsers[index].import = val;
+            newUsers[index].email = "";
+            setUsers(newUsers);
+          }}
+          optionsClassName="w-full"
+          noChevron
+        >
+          {importOptions.map((option) => (
+            <CustomSelect.Option key={option.label} value={option.key}>
+              <div>{option.label}</div>
+            </CustomSelect.Option>
+          ))}
+        </CustomSelect>
+      </div>
+      {users[index].import === "invite" && (
+        <Input
+          type="email"
+          name={`userEmail${index}`}
+          value={users[index].email}
+          onChange={(e) => {
+            const newUsers = [...users];
+            newUsers[index].email = e.target.value;
+            setUsers(newUsers);
+          }}
+          placeholder="Enter email of the user"
+          className="py-1 border-gray-200 text-xs"
+        />
+      )}
+      {users[index].import === "map" && members && (
+        <CustomSearchSelect
+          value={users[index].email}
+          label={users[index].email !== "" ? users[index].email : "Select user from project"}
+          options={options}
+          onChange={(val: string) => {
+            const newUsers = [...users];
+            newUsers[index].email = val;
+            setUsers(newUsers);
+          }}
+          optionsClassName="w-full"
+        />
+      )}
+    </div>
+  );
+};
diff --git a/app/components/integration/guide.tsx b/app/components/integration/guide.tsx
new file mode 100644
index 000000000..ad9ffe559
--- /dev/null
+++ b/app/components/integration/guide.tsx
@@ -0,0 +1,157 @@
+import { useState } from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import IntegrationService from "services/integration";
+// components
+import {
+  DeleteImportModal,
+  GithubImporterRoot,
+  JiraImporterRoot,
+  SingleImport,
+} from "components/integration";
+// ui
+import { Loader, PrimaryButton } from "components/ui";
+// icons
+import { ArrowPathIcon } from "@heroicons/react/24/outline";
+import { ArrowRightIcon } from "components/icons";
+// types
+import { IImporterService } from "types";
+// fetch-keys
+import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
+// constants
+import { IMPORTERS_EXPORTERS_LIST } from "constants/workspace";
+
+const IntegrationGuide = () => {
+  const [refreshing, setRefreshing] = useState(false);
+  const [deleteImportModal, setDeleteImportModal] = useState(false);
+  const [importToDelete, setImportToDelete] = useState<IImporterService | null>(null);
+
+  const router = useRouter();
+  const { workspaceSlug, provider } = router.query;
+
+  const { data: importerServices } = useSWR(
+    workspaceSlug ? IMPORTER_SERVICES_LIST(workspaceSlug as string) : null,
+    workspaceSlug ? () => IntegrationService.getImporterServicesList(workspaceSlug as string) : null
+  );
+
+  const handleDeleteImport = (importService: IImporterService) => {
+    setImportToDelete(importService);
+    setDeleteImportModal(true);
+  };
+
+  return (
+    <>
+      <DeleteImportModal
+        isOpen={deleteImportModal}
+        handleClose={() => setDeleteImportModal(false)}
+        data={importToDelete}
+      />
+      <div className="space-y-2 h-full">
+        {!provider && (
+          <>
+            <div className="flex items-center gap-2 mb-5">
+              <div className="h-full w-full space-y-1">
+                <div className="text-lg font-medium">Relocation Guide</div>
+                <div className="text-sm">
+                  You can now transfer all the issues that you{"'"}ve created in other tracking
+                  services. This tool will guide you to relocate the issue to Plane.
+                </div>
+              </div>
+              <a href="https://docs.plane.so" target="_blank" rel="noopener noreferrer">
+                <div className="flex flex-shrink-0 cursor-pointer items-center gap-2 whitespace-nowrap text-sm font-medium text-[#3F76FF] hover:text-opacity-80">
+                  Read More
+                  <ArrowRightIcon width={"18px"} color={"#3F76FF"} />
+                </div>
+              </a>
+            </div>
+            <div className="space-y-2">
+              {IMPORTERS_EXPORTERS_LIST.map((service) => (
+                <div key={service.provider} className="rounded-[10px] border bg-white p-4">
+                  <div className="flex items-center gap-4 whitespace-nowrap">
+                    <div className="relative h-10 w-10 flex-shrink-0">
+                      <Image
+                        src={service.logo}
+                        layout="fill"
+                        objectFit="cover"
+                        alt={`${service.title} Logo`}
+                      />
+                    </div>
+                    <div className="w-full">
+                      <h3>{service.title}</h3>
+                      <p className="text-sm text-gray-500">{service.description}</p>
+                    </div>
+                    <div className="flex-shrink-0">
+                      <Link
+                        href={`/${workspaceSlug}/settings/import-export?provider=${service.provider}`}
+                      >
+                        <a>
+                          <PrimaryButton>
+                            <span className="capitalize">{service.type}</span> now
+                          </PrimaryButton>
+                        </a>
+                      </Link>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="rounded-[10px] border bg-white p-4">
+              <h3 className="mb-2 font-medium text-lg flex gap-2">
+                Previous Imports
+                <button
+                  type="button"
+                  className="flex-shrink-0 flex items-center gap-1 outline-none text-xs py-1 px-1.5 bg-gray-100 rounded"
+                  onClick={() => {
+                    setRefreshing(true);
+                    mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string)).then(() =>
+                      setRefreshing(false)
+                    );
+                  }}
+                >
+                  <ArrowPathIcon className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
+                  {refreshing ? "Refreshing..." : "Refresh status"}
+                </button>
+              </h3>
+              {importerServices ? (
+                importerServices.length > 0 ? (
+                  <div className="space-y-2">
+                    <div className="divide-y">
+                      {importerServices.map((service) => (
+                        <SingleImport
+                          key={service.id}
+                          service={service}
+                          refreshing={refreshing}
+                          handleDelete={() => handleDeleteImport(service)}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                ) : (
+                  <div className="py-2 text-sm text-gray-800">No previous imports available.</div>
+                )
+              ) : (
+                <Loader className="grid grid-cols-1 gap-3 mt-6">
+                  <Loader.Item height="40px" width="100%" />
+                  <Loader.Item height="40px" width="100%" />
+                  <Loader.Item height="40px" width="100%" />
+                  <Loader.Item height="40px" width="100%" />
+                </Loader>
+              )}
+            </div>
+          </>
+        )}
+
+        {provider && provider === "github" && <GithubImporterRoot />}
+        {provider && provider === "jira" && <JiraImporterRoot />}
+      </div>
+    </>
+  );
+};
+
+export default IntegrationGuide;
diff --git a/app/components/integration/index.ts b/app/components/integration/index.ts
new file mode 100644
index 000000000..39ae51e33
--- /dev/null
+++ b/app/components/integration/index.ts
@@ -0,0 +1,10 @@
+// layout
+export * from "./delete-import-modal";
+export * from "./guide";
+export * from "./single-import";
+export * from "./single-integration-card";
+
+// github
+export * from "./github";
+// jira
+export * from "./jira";
diff --git a/app/components/integration/jira/confirm-import.tsx b/app/components/integration/jira/confirm-import.tsx
new file mode 100644
index 000000000..79c56bf4b
--- /dev/null
+++ b/app/components/integration/jira/confirm-import.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+
+// react hook form
+import { useFormContext } from "react-hook-form";
+
+// types
+import { IJiraImporterForm } from "types";
+
+export const JiraConfirmImport: React.FC = () => {
+  const { watch } = useFormContext<IJiraImporterForm>();
+
+  return (
+    <div className="h-full w-full overflow-y-auto">
+      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
+        <div className="col-span-2">
+          <h3 className="text-lg font-semibold">Confirm</h3>
+        </div>
+
+        <div className="col-span-1">
+          <p className="text-sm text-gray-500">Migrating</p>
+        </div>
+        <div className="col-span-1 flex items-center justify-between">
+          <div>
+            <h4 className="mb-2 text-xl font-semibold">{watch("data.total_issues")}</h4>
+            <p className="text-sm text-gray-500">Issues</p>
+          </div>
+          <div>
+            <h4 className="mb-2 text-xl font-semibold">{watch("data.total_states")}</h4>
+            <p className="text-sm text-gray-500">States</p>
+          </div>
+          <div>
+            <h4 className="mb-2 text-xl font-semibold">{watch("data.total_modules")}</h4>
+            <p className="text-sm text-gray-500">Modules</p>
+          </div>
+          <div>
+            <h4 className="mb-2 text-xl font-semibold">{watch("data.total_labels")}</h4>
+            <p className="text-sm text-gray-500">Labels</p>
+          </div>
+          <div>
+            <h4 className="mb-2 text-xl font-semibold">
+              {watch("data.users").filter((user) => user.import).length}
+            </h4>
+            <p className="text-sm text-gray-500">User</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/integration/jira/give-details.tsx b/app/components/integration/jira/give-details.tsx
new file mode 100644
index 000000000..fb4032b68
--- /dev/null
+++ b/app/components/integration/jira/give-details.tsx
@@ -0,0 +1,178 @@
+import React from "react";
+
+// next
+import Link from "next/link";
+
+// react hook form
+import { useFormContext, Controller } from "react-hook-form";
+
+// icons
+import { PlusIcon } from "@heroicons/react/20/solid";
+
+// hooks
+import useProjects from "hooks/use-projects";
+
+// components
+import { Input, CustomSelect } from "components/ui";
+
+import { IJiraImporterForm } from "types";
+
+export const JiraGetImportDetail: React.FC = () => {
+  const {
+    register,
+    control,
+    formState: { errors },
+  } = useFormContext<IJiraImporterForm>();
+
+  const { projects } = useProjects();
+
+  return (
+    <div className="h-full w-full space-y-8 overflow-y-auto">
+      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
+        <div className="col-span-1">
+          <h3 className="text-lg font-semibold">Jira Personal Access Token</h3>
+          <p className="text-sm text-gray-500">
+            Get to know your access token by navigating to{" "}
+            <Link href="https://id.atlassian.com/manage-profile/security/api-tokens">
+              <a
+                className="font-medium text-gray-600 hover:text-gray-900"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Atlassian Settings
+              </a>
+            </Link>
+          </p>
+        </div>
+
+        <div className="col-span-1">
+          <Input
+            id="metadata.api_token"
+            name="metadata.api_token"
+            placeholder="XXXXXXXX"
+            validations={{
+              required: "Please enter your personal access token.",
+            }}
+            register={register}
+            error={errors.metadata?.api_token}
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
+        <div className="col-span-1">
+          <h3 className="text-lg font-semibold">Jira Project Key</h3>
+          <p className="text-sm text-gray-500">If XXX-123 is your issue, then enter XXX</p>
+        </div>
+        <div className="col-span-1">
+          <Input
+            id="metadata.project_key"
+            name="metadata.project_key"
+            placeholder="LIN"
+            register={register}
+            validations={{
+              required: "Please enter your project key.",
+            }}
+            error={errors.metadata?.project_key}
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
+        <div className="col-span-1">
+          <h3 className="text-lg font-semibold">Jira Email Address</h3>
+          <p className="text-sm text-gray-500">
+            Enter the Gmail account that you use in Jira account
+          </p>
+        </div>
+        <div className="col-span-1">
+          <Input
+            id="metadata.email"
+            name="metadata.email"
+            type="email"
+            placeholder="name@company.com"
+            register={register}
+            validations={{
+              required: "Please enter email address.",
+            }}
+            error={errors.metadata?.email}
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
+        <div className="col-span-1">
+          <h3 className="text-lg font-semibold">Jira Installation or Cloud Host Name</h3>
+          <p className="text-sm text-gray-500">Enter your companies cloud host name</p>
+        </div>
+        <div className="col-span-1">
+          <Input
+            id="metadata.cloud_hostname"
+            name="metadata.cloud_hostname"
+            type="email"
+            placeholder="my-company.atlassian.net"
+            register={register}
+            validations={{
+              required: "Please enter your cloud host name.",
+            }}
+            error={errors.metadata?.cloud_hostname}
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
+        <div className="col-span-1">
+          <h3 className="text-lg font-semibold">Import to project</h3>
+          <p className="text-sm text-gray-500">Select which project you want to import to.</p>
+        </div>
+        <div className="col-span-1">
+          <Controller
+            control={control}
+            name="project_id"
+            rules={{ required: "Please select a project." }}
+            render={({ field: { value, onChange } }) => (
+              <CustomSelect
+                value={value}
+                input
+                width="w-full"
+                onChange={onChange}
+                label={
+                  <span>
+                    {value && value !== ""
+                      ? projects.find((p) => p.id === value)?.name
+                      : "Select Project"}
+                  </span>
+                }
+              >
+                {projects.length > 0 ? (
+                  projects.map((project) => (
+                    <CustomSelect.Option key={project.id} value={project.id}>
+                      {project.name}
+                    </CustomSelect.Option>
+                  ))
+                ) : (
+                  <div className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-gray-500">
+                    <p>You don{"'"}t have any project. Please create a project first.</p>
+                  </div>
+                )}
+                <div>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      const event = new KeyboardEvent("keydown", { key: "p" });
+                      document.dispatchEvent(event);
+                    }}
+                    className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-gray-500"
+                  >
+                    <PlusIcon className="h-4 w-4 text-gray-500" />
+                    <span>Create new project</span>
+                  </button>
+                </div>
+              </CustomSelect>
+            )}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/integration/jira/import-users.tsx b/app/components/integration/jira/import-users.tsx
new file mode 100644
index 000000000..fa48bc772
--- /dev/null
+++ b/app/components/integration/jira/import-users.tsx
@@ -0,0 +1,145 @@
+import { FC } from "react";
+
+// next
+import { useRouter } from "next/router";
+
+// react-hook-form
+import { useFormContext, useFieldArray, Controller } from "react-hook-form";
+
+// hooks
+import useWorkspaceMembers from "hooks/use-workspace-members";
+
+// components
+import { ToggleSwitch, Input, CustomSelect, CustomSearchSelect, Avatar } from "components/ui";
+
+import { IJiraImporterForm } from "types";
+
+export const JiraImportUsers: FC = () => {
+  const {
+    control,
+    watch,
+    register,
+    formState: { errors },
+  } = useFormContext<IJiraImporterForm>();
+
+  const { fields } = useFieldArray({
+    control,
+    name: "data.users",
+  });
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { workspaceMembers: members } = useWorkspaceMembers(workspaceSlug?.toString());
+
+  const options =
+    members?.map((member) => ({
+      value: member.member.email,
+      query:
+        (member.member.first_name && member.member.first_name !== ""
+          ? member.member.first_name
+          : member.member.email) +
+          " " +
+          member.member.last_name ?? "",
+      content: (
+        <div className="flex items-center gap-2">
+          <Avatar user={member.member} />
+          {member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name + " (" + member.member.email + ")"
+            : member.member.email}
+        </div>
+      ),
+    })) ?? [];
+
+  return (
+    <div className="h-full w-full space-y-10 divide-y-2 overflow-y-auto">
+      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
+        <div className="col-span-1">
+          <h3 className="text-lg font-semibold">Users</h3>
+          <p className="text-sm text-gray-500">Update, invite or choose not to invite assignee</p>
+        </div>
+        <div className="col-span-1">
+          <Controller
+            control={control}
+            name="data.invite_users"
+            render={({ field: { value, onChange } }) => (
+              <ToggleSwitch onChange={onChange} value={value} />
+            )}
+          />
+        </div>
+      </div>
+
+      {watch("data.invite_users") && (
+        <div className="pt-6">
+          <div className="grid grid-cols-3 gap-3">
+            <div className="col-span-1 text-gray-500">Name</div>
+            <div className="col-span-1 text-gray-500">Import as</div>
+          </div>
+
+          <div className="mt-5 space-y-3">
+            {fields.map((user, index) => (
+              <div className="grid grid-cols-3 gap-3" key={`${user.email}-${user.username}`}>
+                <div className="col-span-1">
+                  <p>{user.username}</p>
+                </div>
+                <div className="col-span-1">
+                  <Controller
+                    control={control}
+                    name={`data.users.${index}.import`}
+                    render={({ field: { value, onChange } }) => (
+                      <CustomSelect
+                        input
+                        value={value}
+                        onChange={onChange}
+                        width="w-full"
+                        label={
+                          <span className="capitalize">
+                            {Boolean(value) ? value : ("Ignore" as any)}
+                          </span>
+                        }
+                      >
+                        <CustomSelect.Option value="invite">Invite by email</CustomSelect.Option>
+                        <CustomSelect.Option value="map">Map to existing</CustomSelect.Option>
+                        <CustomSelect.Option value={false}>Do not import</CustomSelect.Option>
+                      </CustomSelect>
+                    )}
+                  />
+                </div>
+                <div className="col-span-1">
+                  {watch(`data.users.${index}.import`) === "invite" && (
+                    <Input
+                      id={`data.users.${index}.email`}
+                      name={`data.users.${index}.email`}
+                      type="text"
+                      register={register}
+                      validations={{
+                        required: "This field is required",
+                      }}
+                      error={errors?.data?.users?.[index]?.email}
+                    />
+                  )}
+                  {watch(`data.users.${index}.import`) === "map" && (
+                    <Controller
+                      control={control}
+                      name={`data.users.${index}.email`}
+                      render={({ field: { value, onChange } }) => (
+                        <CustomSearchSelect
+                          value={value}
+                          input
+                          label={value !== "" ? value : "Select user from project"}
+                          options={options}
+                          onChange={onChange}
+                          optionsClassName="w-full"
+                        />
+                      )}
+                    />
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/app/components/integration/jira/index.ts b/app/components/integration/jira/index.ts
new file mode 100644
index 000000000..321e4f313
--- /dev/null
+++ b/app/components/integration/jira/index.ts
@@ -0,0 +1,39 @@
+export * from "./root";
+export * from "./give-details";
+export * from "./jira-project-detail";
+export * from "./import-users";
+export * from "./confirm-import";
+
+import { IJiraImporterForm } from "types";
+
+export type TJiraIntegrationSteps =
+  | "import-configure"
+  | "display-import-data"
+  | "select-import-data"
+  | "import-users"
+  | "import-confirmation";
+
+export interface IJiraIntegrationData {
+  state: TJiraIntegrationSteps;
+}
+
+export const jiraFormDefaultValues: IJiraImporterForm = {
+  metadata: {
+    cloud_hostname: "",
+    api_token: "",
+    project_key: "",
+    email: "",
+  },
+  config: {
+    epics_to_modules: false,
+  },
+  data: {
+    users: [],
+    invite_users: true,
+    total_issues: 0,
+    total_labels: 0,
+    total_modules: 0,
+    total_states: 0,
+  },
+  project_id: "",
+};
diff --git a/app/components/integration/jira/jira-project-detail.tsx b/app/components/integration/jira/jira-project-detail.tsx
new file mode 100644
index 000000000..48220a8c1
--- /dev/null
+++ b/app/components/integration/jira/jira-project-detail.tsx
@@ -0,0 +1,168 @@
+import React, { useEffect } from "react";
+
+// next
+import { useRouter } from "next/router";
+
+// swr
+import useSWR from "swr";
+
+// react hook form
+import { useFormContext, Controller } from "react-hook-form";
+
+// services
+import jiraImporterService from "services/integration/jira.service";
+
+// fetch keys
+import { JIRA_IMPORTER_DETAIL } from "constants/fetch-keys";
+
+import { IJiraImporterForm, IJiraMetadata } from "types";
+
+// components
+import { Spinner, ToggleSwitch } from "components/ui";
+
+import type { IJiraIntegrationData, TJiraIntegrationSteps } from "./";
+
+type Props = {
+  setCurrentStep: React.Dispatch<React.SetStateAction<IJiraIntegrationData>>;
+  setDisableTopBarAfter: React.Dispatch<React.SetStateAction<TJiraIntegrationSteps | null>>;
+};
+
+export const JiraProjectDetail: React.FC<Props> = (props) => {
+  const { setCurrentStep, setDisableTopBarAfter } = props;
+
+  const {
+    watch,
+    setValue,
+    control,
+    formState: { errors },
+  } = useFormContext<IJiraImporterForm>();
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const params: IJiraMetadata = {
+    api_token: watch("metadata.api_token"),
+    project_key: watch("metadata.project_key"),
+    email: watch("metadata.email"),
+    cloud_hostname: watch("metadata.cloud_hostname"),
+  };
+
+  const { data: projectInfo, error } = useSWR(
+    workspaceSlug &&
+      !errors.metadata?.api_token &&
+      !errors.metadata?.project_key &&
+      !errors.metadata?.email &&
+      !errors.metadata?.cloud_hostname
+      ? JIRA_IMPORTER_DETAIL(workspaceSlug.toString(), params)
+      : null,
+    workspaceSlug &&
+      !errors.metadata?.api_token &&
+      !errors.metadata?.project_key &&
+      !errors.metadata?.email &&
+      !errors.metadata?.cloud_hostname
+      ? () => jiraImporterService.getJiraProjectInfo(workspaceSlug.toString(), params)
+      : null
+  );
+
+  useEffect(() => {
+    if (!projectInfo) return;
+
+    setValue("data.total_issues", projectInfo.issues);
+    setValue("data.total_labels", projectInfo.labels);
+    setValue(
+      "data.users",
+      projectInfo.users?.map((user) => ({
+        email: user.emailAddress,
+        import: false,
+        username: user.displayName,
+      }))
+    );
+    setValue("data.total_states", projectInfo.states);
+    setValue("data.total_modules", projectInfo.modules);
+  }, [projectInfo, setValue]);
+
+  useEffect(() => {
+    if (error) setDisableTopBarAfter("display-import-data");
+    else setDisableTopBarAfter(null);
+  }, [error, setDisableTopBarAfter]);
+
+  useEffect(() => {
+    if (!projectInfo && !error) setDisableTopBarAfter("display-import-data");
+    else if (!error) setDisableTopBarAfter(null);
+  }, [projectInfo, error, setDisableTopBarAfter]);
+
+  if (!projectInfo && !error) {
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <p className="text-sm text-gray-500">
+          Something went wrong. Please{" "}
+          <button
+            onClick={() => setCurrentStep({ state: "import-configure" })}
+            type="button"
+            className="inline text-blue-500 underline"
+          >
+            go back
+          </button>{" "}
+          and check your Jira project details.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full w-full space-y-10 overflow-y-auto">
+      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
+        <div className="col-span-1">
+          <h3 className="text-lg font-semibold">Import Data</h3>
+          <p className="text-sm text-gray-500">Import Completed. We have found:</p>
+        </div>
+        <div className="col-span-1 flex items-center justify-between">
+          <div>
+            <h4 className="mb-2 text-xl font-semibold">{projectInfo?.issues}</h4>
+            <p className="text-sm text-gray-500">Issues</p>
+          </div>
+          <div>
+            <h4 className="mb-2 text-xl font-semibold">{projectInfo?.states}</h4>
+            <p className="text-sm text-gray-500">States</p>
+          </div>
+          <div>
+            <h4 className="mb-2 text-xl font-semibold">{projectInfo?.modules}</h4>
+            <p className="text-sm text-gray-500">Modules</p>
+          </div>
+          <div>
+            <h4 className="mb-2 text-xl font-semibold">{projectInfo?.labels}</h4>
+            <p className="text-sm text-gray-500">Labels</p>
+          </div>
+          <div>
+            <h4 className="mb-2 text-xl font-semibold">{projectInfo?.users?.length}</h4>
+            <p className="text-sm text-gray-500">Users</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
+        <div className="col-span-1">
+          <h3 className="text-lg font-semibold">Import Epics</h3>
+          <p className="text-sm text-gray-500">Import epics as modules</p>
+        </div>
+        <div className="col-span-1">
+          <Controller
+            control={control}
+            name="config.epics_to_modules"
+            render={({ field: { value, onChange } }) => (
+              <ToggleSwitch onChange={onChange} value={value} />
+            )}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/integration/jira/root.tsx b/app/components/integration/jira/root.tsx
new file mode 100644
index 000000000..a3af34acb
--- /dev/null
+++ b/app/components/integration/jira/root.tsx
@@ -0,0 +1,224 @@
+import React, { useState } from "react";
+
+// next
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+// swr
+import { mutate } from "swr";
+
+// react hook form
+import { FormProvider, useForm } from "react-hook-form";
+
+// icons
+import { ArrowLeftIcon, ListBulletIcon } from "@heroicons/react/24/outline";
+import { CogIcon, CloudUploadIcon, UsersIcon, CheckIcon } from "components/icons";
+
+// services
+import jiraImporterService from "services/integration/jira.service";
+
+// fetch keys
+import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
+
+// components
+import { PrimaryButton, SecondaryButton } from "components/ui";
+import {
+  JiraGetImportDetail,
+  JiraProjectDetail,
+  JiraImportUsers,
+  JiraConfirmImport,
+  jiraFormDefaultValues,
+  TJiraIntegrationSteps,
+  IJiraIntegrationData,
+} from "./";
+
+import JiraLogo from "public/services/jira.png";
+
+import { IJiraImporterForm } from "types";
+
+const integrationWorkflowData: Array<{
+  title: string;
+  key: TJiraIntegrationSteps;
+  icon: any; // TODO: Fix this later prev type React.FC<React.SVGProps<SVGSVGElement>>
+}> = [
+  {
+    title: "Configure",
+    key: "import-configure",
+    icon: CogIcon,
+  },
+  {
+    title: "Import Data",
+    key: "display-import-data",
+    icon: ListBulletIcon,
+  },
+  {
+    title: "Users",
+    key: "import-users",
+    icon: UsersIcon,
+  },
+  {
+    title: "Confirm",
+    key: "import-confirmation",
+    icon: CheckIcon,
+  },
+];
+
+export const JiraImporterRoot = () => {
+  const [currentStep, setCurrentStep] = useState<IJiraIntegrationData>({
+    state: "import-configure",
+  });
+  const [disableTopBarAfter, setDisableTopBarAfter] = useState<TJiraIntegrationSteps | null>(null);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const methods = useForm<IJiraImporterForm>({
+    defaultValues: jiraFormDefaultValues,
+    mode: "all",
+    reValidateMode: "onChange",
+  });
+
+  const isValid = methods.formState.isValid;
+
+  const onSubmit = async (data: IJiraImporterForm) => {
+    if (!workspaceSlug) return;
+
+    await jiraImporterService
+      .createJiraImporter(workspaceSlug.toString(), data)
+      .then(() => {
+        mutate(IMPORTER_SERVICES_LIST(workspaceSlug.toString()));
+        router.push(`/${workspaceSlug}/settings/import-export`);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const activeIntegrationState = () => {
+    const currentElementIndex = integrationWorkflowData.findIndex(
+      (i) => i?.key === currentStep?.state
+    );
+
+    return currentElementIndex;
+  };
+
+  return (
+    <div className="flex h-full flex-col space-y-2">
+      <Link href={`/${workspaceSlug}/settings/import-export`}>
+        <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900">
+          <div>
+            <ArrowLeftIcon className="h-3 w-3" />
+          </div>
+          <div>Cancel import & go back</div>
+        </div>
+      </Link>
+
+      <div className="flex h-full flex-col space-y-4 rounded-[10px] border border-gray-200 bg-white p-4">
+        <div className="flex items-center gap-2">
+          <div className="h-10 w-10 flex-shrink-0">
+            <Image src={JiraLogo} alt="jira logo" />
+          </div>
+          <div className="flex h-full w-full items-center justify-center">
+            {integrationWorkflowData.map((integration, index) => (
+              <React.Fragment key={integration.key}>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setCurrentStep({ state: integration.key });
+                  }}
+                  disabled={
+                    index > activeIntegrationState() + 1 ||
+                    Boolean(index === activeIntegrationState() + 1 && disableTopBarAfter)
+                  }
+                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border ${
+                    index <= activeIntegrationState()
+                      ? `border-[#3F76FF] bg-[#3F76FF] text-white ${
+                          index === activeIntegrationState()
+                            ? "border-opacity-100 bg-opacity-100"
+                            : "border-opacity-80 bg-opacity-80"
+                        }`
+                      : "border-gray-300"
+                  }`}
+                >
+                  <integration.icon
+                    width="18px"
+                    height="18px"
+                    color={index <= activeIntegrationState() ? "#ffffff" : "#d1d5db"}
+                  />
+                </button>
+                {index < integrationWorkflowData.length - 1 && (
+                  <div
+                    key={index}
+                    className={`border-b px-7 ${
+                      index <= activeIntegrationState() - 1 ? `border-[#3F76FF]` : `border-gray-300`
+                    }`}
+                  >
+                    {" "}
+                  </div>
+                )}
+              </React.Fragment>
+            ))}
+          </div>
+        </div>
+
+        <div className="relative h-full w-full pt-6">
+          <FormProvider {...methods}>
+            <form className="flex h-full w-full flex-col">
+              <div className="h-full w-full overflow-y-auto">
+                {currentStep.state === "import-configure" && <JiraGetImportDetail />}
+                {currentStep.state === "display-import-data" && (
+                  <JiraProjectDetail
+                    setDisableTopBarAfter={setDisableTopBarAfter}
+                    setCurrentStep={setCurrentStep}
+                  />
+                )}
+                {currentStep?.state === "import-users" && <JiraImportUsers />}
+                {currentStep?.state === "import-confirmation" && <JiraConfirmImport />}
+              </div>
+
+              <div className="-mx-4 mt-4 flex justify-end gap-4 border-t p-4 pb-0">
+                {currentStep?.state !== "import-configure" && (
+                  <SecondaryButton
+                    onClick={() => {
+                      const currentElementIndex = integrationWorkflowData.findIndex(
+                        (i) => i?.key === currentStep?.state
+                      );
+                      setCurrentStep({
+                        state: integrationWorkflowData[currentElementIndex - 1]?.key,
+                      });
+                    }}
+                  >
+                    Back
+                  </SecondaryButton>
+                )}
+                <PrimaryButton
+                  disabled={
+                    disableTopBarAfter === currentStep?.state ||
+                    !isValid ||
+                    methods.formState.isSubmitting
+                  }
+                  onClick={() => {
+                    const currentElementIndex = integrationWorkflowData.findIndex(
+                      (i) => i?.key === currentStep?.state
+                    );
+
+                    if (currentElementIndex === integrationWorkflowData.length - 1) {
+                      methods.handleSubmit(onSubmit)();
+                    } else {
+                      setCurrentStep({
+                        state: integrationWorkflowData[currentElementIndex + 1]?.key,
+                      });
+                    }
+                  }}
+                >
+                  {currentStep?.state === "import-confirmation" ? "Confirm & Import" : "Next"}
+                </PrimaryButton>
+              </div>
+            </form>
+          </FormProvider>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/integration/single-import.tsx b/app/components/integration/single-import.tsx
new file mode 100644
index 000000000..bef5b7301
--- /dev/null
+++ b/app/components/integration/single-import.tsx
@@ -0,0 +1,61 @@
+// ui
+import { CustomMenu } from "components/ui";
+// icons
+import { TrashIcon } from "@heroicons/react/24/outline";
+// helpers
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+// types
+import { IImporterService } from "types";
+
+type Props = {
+  service: IImporterService;
+  refreshing: boolean;
+  handleDelete: () => void;
+};
+
+const importersList: { [key: string]: string } = {
+  github: "GitHub",
+};
+
+export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelete }) => (
+  <div className="py-3 flex justify-between items-center gap-2">
+    <div>
+      <h4 className="text-sm flex items-center gap-2">
+        <span>
+          Import from <span className="font-medium">{importersList[service.service]}</span> to{" "}
+          <span className="font-medium">{service.project_detail.name}</span>
+        </span>
+        <span
+          className={`capitalize px-2 py-0.5 text-xs rounded ${
+            service.status === "completed"
+              ? "bg-green-100 text-green-500"
+              : service.status === "processing"
+              ? "bg-yellow-100 text-yellow-500"
+              : service.status === "failed"
+              ? "bg-red-100 text-red-500"
+              : ""
+          }`}
+        >
+          {refreshing ? "Refreshing..." : service.status}
+        </span>
+      </h4>
+      <div className="text-gray-500 text-xs mt-2 flex items-center gap-2">
+        <span>{renderShortDateWithYearFormat(service.created_at)}</span>|
+        <span>
+          Imported by{" "}
+          {service.initiated_by_detail.first_name && service.initiated_by_detail.first_name !== ""
+            ? service.initiated_by_detail.first_name + " " + service.initiated_by_detail.last_name
+            : service.initiated_by_detail.email}
+        </span>
+      </div>
+    </div>
+    <CustomMenu ellipsis>
+      <CustomMenu.MenuItem onClick={handleDelete}>
+        <span className="flex items-center justify-start gap-2">
+          <TrashIcon className="h-3.5 w-3.5" />
+          Delete import
+        </span>
+      </CustomMenu.MenuItem>
+    </CustomMenu>
+  </div>
+);
diff --git a/app/components/integration/single-integration-card.tsx b/app/components/integration/single-integration-card.tsx
new file mode 100644
index 000000000..0f1819bb9
--- /dev/null
+++ b/app/components/integration/single-integration-card.tsx
@@ -0,0 +1,153 @@
+import { useState } from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import IntegrationService from "services/integration";
+// hooks
+import useToast from "hooks/use-toast";
+import useIntegrationPopup from "hooks/use-integration-popup";
+// ui
+import { DangerButton, Loader, SecondaryButton } from "components/ui";
+// icons
+import GithubLogo from "public/services/github.png";
+import SlackLogo from "public/services/slack.png";
+// types
+import { IAppIntegration, IWorkspaceIntegration } from "types";
+// fetch-keys
+import { WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
+
+type Props = {
+  integration: IAppIntegration;
+};
+
+const integrationDetails: { [key: string]: any } = {
+  github: {
+    logo: GithubLogo,
+    installed:
+      "Activate GitHub integrations on individual projects to sync with specific repositories.",
+    notInstalled: "Connect with GitHub with your Plane workspace to sync project issues.",
+  },
+  slack: {
+    logo: SlackLogo,
+    installed: "Activate Slack integrations on individual projects to sync with specific cahnnels.",
+    notInstalled: "Connect with Slack with your Plane workspace to sync project issues.",
+  },
+};
+
+export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
+  const [deletingIntegration, setDeletingIntegration] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { startAuth, isConnecting: isInstalling } = useIntegrationPopup(integration.provider);
+
+  const { data: workspaceIntegrations } = useSWR(
+    workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
+    () =>
+      workspaceSlug
+        ? IntegrationService.getWorkspaceIntegrationsList(workspaceSlug as string)
+        : null
+  );
+
+  const handleRemoveIntegration = async () => {
+    if (!workspaceSlug || !integration || !workspaceIntegrations) return;
+
+    const workspaceIntegrationId = workspaceIntegrations?.find(
+      (i) => i.integration === integration.id
+    )?.id;
+
+    setDeletingIntegration(true);
+
+    await IntegrationService.deleteWorkspaceIntegration(
+      workspaceSlug as string,
+      workspaceIntegrationId ?? ""
+    )
+      .then(() => {
+        mutate<IWorkspaceIntegration[]>(
+          WORKSPACE_INTEGRATIONS(workspaceSlug as string),
+          (prevData) => prevData?.filter((i) => i.id !== workspaceIntegrationId),
+          false
+        );
+        setDeletingIntegration(false);
+
+        setToastAlert({
+          type: "success",
+          title: "Deleted successfully!",
+          message: `${integration.title} integration deleted successfully.`,
+        });
+      })
+      .catch(() => {
+        setDeletingIntegration(false);
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: `${integration.title} integration could not be deleted. Please try again.`,
+        });
+      });
+  };
+
+  const isInstalled = workspaceIntegrations?.find(
+    (i: any) => i.integration_detail.id === integration.id
+  );
+
+  return (
+    <div className="flex items-center justify-between gap-2 rounded-[10px] border border-brand-base bg-brand-surface-2 p-5">
+      <div className="flex items-start gap-4">
+        <div className="h-12 w-12 flex-shrink-0">
+          <Image
+            src={integrationDetails[integration.provider].logo}
+            alt={`${integration.title} Logo`}
+          />
+        </div>
+        <div>
+          <h3 className="flex items-center gap-4 text-xl font-semibold">
+            {integration.title}
+            {workspaceIntegrations ? (
+              isInstalled ? (
+                <span className="flex items-center gap-1 text-sm font-normal text-green-500">
+                  <span className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500" /> Installed
+                </span>
+              ) : (
+                <span className="flex items-center gap-1 text-sm font-normal text-gray-400">
+                  <span className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-gray-400" /> Not
+                  Installed
+                </span>
+              )
+            ) : null}
+          </h3>
+          <p className="text-sm text-gray-400">
+            {workspaceIntegrations
+              ? isInstalled
+                ? integrationDetails[integration.provider].installed
+                : integrationDetails[integration.provider].notInstalled
+              : "Loading..."}
+          </p>
+        </div>
+      </div>
+
+      {workspaceIntegrations ? (
+        isInstalled ? (
+          <DangerButton onClick={handleRemoveIntegration} loading={deletingIntegration}>
+            {deletingIntegration ? "Removing..." : "Remove installation"}
+          </DangerButton>
+        ) : (
+          <SecondaryButton onClick={startAuth} loading={isInstalling}>
+            {isInstalling ? "Installing..." : "Add installation"}
+          </SecondaryButton>
+        )
+      ) : (
+        <Loader>
+          <Loader.Item height="35px" width="150px" />
+        </Loader>
+      )}
+    </div>
+  );
+};
diff --git a/app/components/issues/activity.tsx b/app/components/issues/activity.tsx
new file mode 100644
index 000000000..f14ee2761
--- /dev/null
+++ b/app/components/issues/activity.tsx
@@ -0,0 +1,372 @@
+import React from "react";
+import { useRouter } from "next/router";
+import Image from "next/image";
+import useSWR from "swr";
+
+// icons
+import {
+  CalendarDaysIcon,
+  ChartBarIcon,
+  ChatBubbleBottomCenterTextIcon,
+  LinkIcon,
+  PaperClipIcon,
+  PlayIcon,
+  RectangleGroupIcon,
+  Squares2X2Icon,
+  UserIcon,
+} from "@heroicons/react/24/outline";
+import { BlockedIcon, BlockerIcon, CyclesIcon, TagIcon, UserGroupIcon } from "components/icons";
+// services
+import issuesService from "services/issues.service";
+// components
+import { CommentCard } from "components/issues/comment";
+// ui
+import { Loader } from "components/ui";
+
+// helpers
+import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
+import { addSpaceIfCamelCase } from "helpers/string.helper";
+// types
+import { IIssueComment, IIssueLabels } from "types";
+import { PROJECT_ISSUES_ACTIVITY, PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import useEstimateOption from "hooks/use-estimate-option";
+
+const activityDetails: {
+  [key: string]: {
+    message?: string;
+    icon: JSX.Element;
+  };
+} = {
+  assignee: {
+    message: "removed the assignee",
+    icon: <UserGroupIcon className="h-3 w-3" color="#6b7280" aria-hidden="true" />,
+  },
+  assignees: {
+    message: "added a new assignee",
+    icon: <UserGroupIcon className="h-3 w-3" color="#6b7280" aria-hidden="true" />,
+  },
+  blocks: {
+    message: "marked this issue being blocked by",
+    icon: <BlockedIcon height="12" width="12" color="#6b7280" />,
+  },
+  blocking: {
+    message: "marked this issue is blocking",
+    icon: <BlockerIcon height="12" width="12" color="#6b7280" />,
+  },
+  cycles: {
+    message: "set the cycle to",
+    icon: <CyclesIcon height="12" width="12" color="#6b7280" />,
+  },
+  estimate_point: {
+    message: "set the estimate point to",
+    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-gray-500" aria-hidden="true" />,
+  },
+  labels: {
+    icon: <TagIcon height="12" width="12" color="#6b7280" />,
+  },
+  modules: {
+    message: "set the module to",
+    icon: <RectangleGroupIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+  },
+  state: {
+    message: "set the state to",
+    icon: <Squares2X2Icon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+  },
+  priority: {
+    message: "set the priority to",
+    icon: <ChartBarIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+  },
+  name: {
+    message: "set the name to",
+    icon: (
+      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />
+    ),
+  },
+  description: {
+    message: "updated the description.",
+    icon: (
+      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />
+    ),
+  },
+  target_date: {
+    message: "set the due date to",
+    icon: <CalendarDaysIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+  },
+  parent: {
+    message: "set the parent to",
+    icon: <UserIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+  },
+  estimate: {
+    message: "updated the estimate",
+    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-gray-500" aria-hidden="true" />,
+  },
+  link: {
+    message: "updated the link",
+    icon: <LinkIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+  },
+  attachment: {
+    message: "updated the attachment",
+    icon: <PaperClipIcon className="h-3 w-3 text-gray-500 " aria-hidden="true" />,
+  },
+};
+
+type Props = {};
+
+export const IssueActivitySection: React.FC<Props> = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { isEstimateActive, estimatePoints } = useEstimateOption();
+
+  const { data: issueActivities, mutate: mutateIssueActivities } = useSWR(
+    workspaceSlug && projectId && issueId ? PROJECT_ISSUES_ACTIVITY(issueId as string) : null,
+    workspaceSlug && projectId && issueId
+      ? () =>
+          issuesService.getIssueActivities(
+            workspaceSlug as string,
+            projectId as string,
+            issueId as string
+          )
+      : null
+  );
+
+  const { data: issueLabels } = useSWR<IIssueLabels[]>(
+    projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const handleCommentUpdate = async (comment: IIssueComment) => {
+    if (!workspaceSlug || !projectId || !issueId) return;
+    await issuesService
+      .patchIssueComment(
+        workspaceSlug as string,
+        projectId as string,
+        issueId as string,
+        comment.id,
+        comment
+      )
+      .then((res) => {
+        mutateIssueActivities();
+      });
+  };
+
+  const handleCommentDelete = async (commentId: string) => {
+    if (!workspaceSlug || !projectId || !issueId) return;
+    await issuesService
+      .deleteIssueComment(
+        workspaceSlug as string,
+        projectId as string,
+        issueId as string,
+        commentId
+      )
+      .then(() => mutateIssueActivities());
+  };
+
+  const getLabelColor = (labelId: string) => {
+    if (!issueLabels) return;
+    const label = issueLabels.find((label) => label.id === labelId);
+    if (typeof label !== "undefined") {
+      return label.color !== "" ? label.color : "#000000";
+    }
+    return "#000000";
+  };
+
+  if (!issueActivities) {
+    return (
+      <Loader className="space-y-4">
+        <div className="space-y-2">
+          <Loader.Item height="30px" width="40%" />
+          <Loader.Item height="15px" width="60%" />
+        </div>
+        <div className="space-y-2">
+          <Loader.Item height="30px" width="40%" />
+          <Loader.Item height="15px" width="60%" />
+        </div>
+        <div className="space-y-2">
+          <Loader.Item height="30px" width="40%" />
+          <Loader.Item height="15px" width="60%" />
+        </div>
+      </Loader>
+    );
+  }
+
+  return (
+    <div className="flow-root">
+      <ul role="list" className="-mb-4">
+        {issueActivities.map((activityItem, activityItemIdx) => {
+          // determines what type of action is performed
+          let action = activityDetails[activityItem.field as keyof typeof activityDetails]?.message;
+          if (activityItem.field === "labels") {
+            action = activityItem.new_value !== "" ? "added a new label" : "removed the label";
+          } else if (activityItem.field === "blocking") {
+            action =
+              activityItem.new_value !== ""
+                ? "marked this issue is blocking"
+                : "removed the issue from blocking";
+          } else if (activityItem.field === "blocks") {
+            action =
+              activityItem.new_value !== ""
+                ? "marked this issue being blocked by"
+                : "removed blocker";
+          } else if (activityItem.field === "target_date") {
+            action =
+              activityItem.new_value && activityItem.new_value !== ""
+                ? "set the due date to"
+                : "removed the due date";
+          } else if (activityItem.field === "parent") {
+            action =
+              activityItem.new_value && activityItem.new_value !== ""
+                ? "set the parent to"
+                : "removed the parent";
+          } else if (activityItem.field === "priority") {
+            action =
+              activityItem.new_value && activityItem.new_value !== ""
+                ? "set the priority to"
+                : "removed the priority";
+          } else if (activityItem.field === "description") {
+            action = "updated the";
+          } else if (activityItem.field === "attachment") {
+            action = `${activityItem.verb} the`;
+          } else if (activityItem.field === "link") {
+            action = `${activityItem.verb} the`;
+          } else if (activityItem.field === "estimate") {
+            action = "updated the";
+          }
+          // for values that are after the action clause
+          let value: any = activityItem.new_value ? activityItem.new_value : activityItem.old_value;
+          if (
+            activityItem.verb === "created" &&
+            activityItem.field !== "cycles" &&
+            activityItem.field !== "modules" &&
+            activityItem.field !== "attachment" &&
+            activityItem.field !== "link" &&
+            activityItem.field !== "estimate"
+          ) {
+            value = <span className="text-brand-secondary">created this issue.</span>;
+          } else if (activityItem.field === "state") {
+            value = activityItem.new_value ? addSpaceIfCamelCase(activityItem.new_value) : "None";
+          } else if (activityItem.field === "labels") {
+            let name;
+            let id = "#000000";
+            if (activityItem.new_value !== "") {
+              name = activityItem.new_value;
+              id = activityItem.new_identifier ? activityItem.new_identifier : id;
+            } else {
+              name = activityItem.old_value;
+              id = activityItem.old_identifier ? activityItem.old_identifier : id;
+            }
+
+            value = (
+              <span className="relative inline-flex items-center rounded-full border border-brand-base px-2 py-0.5 text-xs">
+                <span className="absolute flex flex-shrink-0 items-center justify-center">
+                  <span
+                    className="h-1.5 w-1.5 rounded-full"
+                    style={{
+                      backgroundColor: getLabelColor(id),
+                    }}
+                    aria-hidden="true"
+                  />
+                </span>
+                <span className="ml-3 font-medium text-brand-base">{name}</span>
+              </span>
+            );
+          } else if (activityItem.field === "assignees") {
+            value = activityItem.new_value;
+          } else if (activityItem.field === "target_date") {
+            const date =
+              activityItem.new_value && activityItem.new_value !== ""
+                ? activityItem.new_value
+                : activityItem.old_value;
+            value = renderShortNumericDateFormat(date as string);
+          } else if (activityItem.field === "description") {
+            value = "description";
+          } else if (activityItem.field === "attachment") {
+            value = "attachment";
+          } else if (activityItem.field === "link") {
+            value = "link";
+          } else if (activityItem.field === "estimate_point") {
+            value = activityItem.new_value
+              ? isEstimateActive
+                ? estimatePoints.find((e) => e.key === parseInt(activityItem.new_value ?? "", 10))
+                    ?.value
+                : activityItem.new_value +
+                  ` Point${parseInt(activityItem.new_value ?? "", 10) > 1 ? "s" : ""}`
+              : "None";
+          }
+
+          if ("field" in activityItem && activityItem.field !== "updated_by") {
+            return (
+              <li key={activityItem.id}>
+                <div className="relative pb-1">
+                  {issueActivities.length > 1 && activityItemIdx !== issueActivities.length - 1 ? (
+                    <span
+                      className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-surface-2"
+                      aria-hidden="true"
+                    />
+                  ) : null}
+                  <div className="relative flex items-start space-x-2">
+                    <>
+                      <div>
+                        <div className="relative px-1.5">
+                          <div className="mt-1.5">
+                            <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-2 ring-white">
+                              {activityItem.field ? (
+                                activityDetails[activityItem.field as keyof typeof activityDetails]
+                                  ?.icon
+                              ) : activityItem.actor_detail.avatar &&
+                                activityItem.actor_detail.avatar !== "" ? (
+                                <Image
+                                  src={activityItem.actor_detail.avatar}
+                                  alt={activityItem.actor_detail.first_name}
+                                  height={24}
+                                  width={24}
+                                  className="rounded-full"
+                                />
+                              ) : (
+                                <div
+                                  className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
+                                >
+                                  {activityItem.actor_detail.first_name.charAt(0)}
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="min-w-0 flex-1 py-3">
+                        <div className="text-xs text-brand-secondary">
+                          <span className="text-gray font-medium">
+                            {activityItem.actor_detail.first_name}
+                            {activityItem.actor_detail.is_bot
+                              ? " Bot"
+                              : " " + activityItem.actor_detail.last_name}
+                          </span>
+                          <span> {action} </span>
+                          <span className="text-xs font-medium text-brand-base"> {value} </span>
+                          <span className="whitespace-nowrap">
+                            {timeAgo(activityItem.created_at)}
+                          </span>
+                        </div>
+                      </div>
+                    </>
+                  </div>
+                </div>
+              </li>
+            );
+          } else if ("comment_json" in activityItem)
+            return (
+              <div key={activityItem.id} className="mt-4">
+                <CommentCard
+                  comment={activityItem as any}
+                  onSubmit={handleCommentUpdate}
+                  handleCommentDeletion={handleCommentDelete}
+                />
+              </div>
+            );
+        })}
+      </ul>
+    </div>
+  );
+};
diff --git a/app/components/issues/attachment-upload.tsx b/app/components/issues/attachment-upload.tsx
new file mode 100644
index 000000000..7ad8d1d35
--- /dev/null
+++ b/app/components/issues/attachment-upload.tsx
@@ -0,0 +1,106 @@
+import React, { useCallback, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-dropzone
+import { useDropzone } from "react-dropzone";
+// toast
+import useToast from "hooks/use-toast";
+// fetch key
+import { ISSUE_ATTACHMENTS } from "constants/fetch-keys";
+// services
+import issuesService from "services/issues.service";
+// type
+import { IIssueAttachment } from "types";
+
+const maxFileSize = 5 * 1024 * 1024; // 5 MB
+
+export const IssueAttachmentUpload = () => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    if (!acceptedFiles[0] || !workspaceSlug) return;
+
+    const formData = new FormData();
+    formData.append("asset", acceptedFiles[0]);
+    formData.append(
+      "attributes",
+      JSON.stringify({
+        name: acceptedFiles[0].name,
+        size: acceptedFiles[0].size,
+      })
+    );
+    setIsLoading(true);
+
+    issuesService
+      .uploadIssueAttachment(
+        workspaceSlug as string,
+        projectId as string,
+        issueId as string,
+        formData
+      )
+      .then((res) => {
+        mutate<IIssueAttachment[]>(
+          ISSUE_ATTACHMENTS(issueId as string),
+          (prevData) => [res, ...(prevData ?? [])],
+          false
+        );
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "File added successfully.",
+        });
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        setIsLoading(false);
+        setToastAlert({
+          type: "error",
+          title: "error!",
+          message: "Something went wrong. please check file type & size (max 5 MB)",
+        });
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone({
+    onDrop,
+    maxSize: maxFileSize,
+    multiple: false,
+    disabled: isLoading
+  });
+
+  const fileError =
+    fileRejections.length > 0
+      ? `Invalid file type or size (max ${maxFileSize / 1024 / 1024} MB)`
+      : null;
+
+  return (
+    <div
+      {...getRootProps()}
+      className={`flex items-center justify-center h-[60px] cursor-pointer border-2 border-dashed border-theme text-blue-500 bg-blue-500/5 text-xs rounded-md px-4 ${
+        isDragActive ? "bg-theme/10" : ""
+      } ${isDragReject ? "bg-red-100" : ""}`}
+    >
+      <input {...getInputProps()} />
+      <span className="flex items-center gap-2">
+        {isDragActive ? (
+          <p>Drop here...</p>
+        ) : fileError ? (
+          <p className="text-center text-red-500">{fileError}</p>
+        ) : isLoading ? (
+          <p className="text-center">Uploading...</p>
+        ) : (
+          <p className="text-center">Click or drag a file here</p>
+        )}
+      </span>
+    </div>
+  );
+};
diff --git a/app/components/issues/attachments.tsx b/app/components/issues/attachments.tsx
new file mode 100644
index 000000000..3408e5af0
--- /dev/null
+++ b/app/components/issues/attachments.tsx
@@ -0,0 +1,111 @@
+import { useState } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// ui
+import { Tooltip } from "components/ui";
+import { DeleteAttachmentModal } from "./delete-attachment-modal";
+// icons
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import { ExclamationIcon, getFileIcon } from "components/icons";
+// services
+import issuesService from "services/issues.service";
+import projectService from "services/project.service";
+// fetch-key
+import { ISSUE_ATTACHMENTS, PROJECT_MEMBERS } from "constants/fetch-keys";
+// helper
+import { truncateText } from "helpers/string.helper";
+import { renderLongDateFormat } from "helpers/date-time.helper";
+import { convertBytesToSize, getFileExtension, getFileName } from "helpers/attachment.helper";
+// type
+import { IIssueAttachment } from "types";
+
+export const IssueAttachments = () => {
+  const [deleteAttachment, setDeleteAttachment] = useState<IIssueAttachment | null>(null);
+  const [attachmentDeleteModal, setAttachmentDeleteModal] = useState<boolean>(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { data: attachments } = useSWR<IIssueAttachment[]>(
+    workspaceSlug && projectId && issueId ? ISSUE_ATTACHMENTS(issueId as string) : null,
+    workspaceSlug && projectId && issueId
+      ? () =>
+      issuesService.getIssueAttachment(
+            workspaceSlug as string,
+            projectId as string,
+            issueId as string
+          )
+      : null
+  );
+
+  const { data: people } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  return (
+    <>
+      <DeleteAttachmentModal
+        isOpen={attachmentDeleteModal}
+        setIsOpen={setAttachmentDeleteModal}
+        data={deleteAttachment}
+      />
+      {attachments &&
+        attachments.length > 0 &&
+        attachments.map((file) => (
+          <div
+            key={file.id}
+            className="flex items-center justify-between h-[60px] gap-1 px-4 py-2 text-sm border border-gray-200 bg-white rounded-md"
+          >
+            <Link href={file.asset}>
+              <a target="_blank">
+                <div className="flex items-center gap-3">
+                  <div className="h-7 w-7">{getFileIcon(getFileExtension(file.asset))}</div>
+                  <div className="flex flex-col gap-1">
+                    <div className="flex items-center gap-2">
+                      <Tooltip theme="dark" tooltipContent={getFileName(file.attributes.name)}>
+                        <span className="text-sm">
+                          {truncateText(`${getFileName(file.attributes.name)}`, 10)}
+                        </span>
+                      </Tooltip>
+                      <Tooltip
+                        theme="dark"
+                        tooltipContent={`${
+                          people?.find((person) => person.member.id === file.updated_by)?.member
+                            .first_name ?? ""
+                        } uploaded on ${renderLongDateFormat(file.updated_at)}`}
+                      >
+                        <span>
+                          <ExclamationIcon className="h-3 w-3" />
+                        </span>
+                      </Tooltip>
+                    </div>
+
+                    <div className="flex items-center gap-3 text-gray-500 text-xs">
+                      <span>{getFileExtension(file.asset).toUpperCase()}</span>
+                      <span>{convertBytesToSize(file.attributes.size)}</span>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </Link>
+
+            <button
+              onClick={() => {
+                setDeleteAttachment(file);
+                setAttachmentDeleteModal(true);
+              }}
+            >
+              <XMarkIcon className="h-4 w-4 text-gray-500 hover:text-gray-800" />
+            </button>
+          </div>
+        ))}
+    </>
+  );
+};
diff --git a/app/components/issues/comment/add-comment.tsx b/app/components/issues/comment/add-comment.tsx
new file mode 100644
index 000000000..8423b3003
--- /dev/null
+++ b/app/components/issues/comment/add-comment.tsx
@@ -0,0 +1,98 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+import dynamic from "next/dynamic";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { useForm, Controller } from "react-hook-form";
+// services
+import issuesServices from "services/issues.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Loader, SecondaryButton } from "components/ui";
+// types
+import type { IIssueComment } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+
+const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
+  ssr: false,
+  loading: () => (
+    <Loader className="mb-5">
+      <Loader.Item height="12rem" width="100%" />
+    </Loader>
+  ),
+});
+
+const defaultValues: Partial<IIssueComment> = {
+  comment_json: "",
+  comment_html: "",
+};
+
+export const AddComment: React.FC = () => {
+  const {
+    handleSubmit,
+    control,
+    setValue,
+    formState: { isSubmitting },
+    reset,
+  } = useForm<IIssueComment>({ defaultValues });
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const onSubmit = async (formData: IIssueComment) => {
+    if (
+      !workspaceSlug ||
+      !projectId ||
+      !issueId ||
+      isSubmitting ||
+      !formData.comment_html ||
+      !formData.comment_json
+    )
+      return;
+    await issuesServices
+      .createIssueComment(workspaceSlug as string, projectId as string, issueId as string, formData)
+      .then(() => {
+        mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+        reset(defaultValues);
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Comment could not be posted. Please try again.",
+        })
+      );
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="issue-comments-section">
+          <Controller
+            name="comment_json"
+            control={control}
+            render={({ field: { value } }) => (
+              <RemirrorRichTextEditor
+                value={value}
+                onJSONChange={(jsonValue) => setValue("comment_json", jsonValue)}
+                onHTMLChange={(htmlValue) => setValue("comment_html", htmlValue)}
+                placeholder="Enter your comment..."
+              />
+            )}
+          />
+
+          <SecondaryButton type="submit" disabled={isSubmitting} className="mt-2">
+            {isSubmitting ? "Adding..." : "Comment"}
+          </SecondaryButton>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/app/components/issues/comment/comment-card.tsx b/app/components/issues/comment/comment-card.tsx
new file mode 100644
index 000000000..4691ad705
--- /dev/null
+++ b/app/components/issues/comment/comment-card.tsx
@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from "react";
+
+import Image from "next/image";
+import dynamic from "next/dynamic";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// icons
+import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
+// hooks
+import useUser from "hooks/use-user";
+// ui
+import { CustomMenu } from "components/ui";
+// helpers
+import { timeAgo } from "helpers/date-time.helper";
+// types
+import type { IIssueComment } from "types";
+
+const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { ssr: false });
+
+type Props = {
+  comment: IIssueComment;
+  onSubmit: (comment: IIssueComment) => void;
+  handleCommentDeletion: (comment: string) => void;
+};
+
+export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion }) => {
+  const { user } = useUser();
+
+  const [isEditing, setIsEditing] = useState(false);
+
+  const {
+    formState: { isSubmitting },
+    handleSubmit,
+    setFocus,
+    setValue,
+  } = useForm<IIssueComment>({
+    defaultValues: comment,
+  });
+
+  const onEnter = (formData: IIssueComment) => {
+    if (isSubmitting) return;
+    setIsEditing(false);
+    onSubmit(formData);
+  };
+
+  useEffect(() => {
+    isEditing && setFocus("comment");
+  }, [isEditing, setFocus]);
+
+  return (
+    <div className="relative flex items-start space-x-3">
+      <div className="relative px-1">
+        {comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? (
+          <Image
+            src={comment.actor_detail.avatar}
+            alt={comment.actor_detail.first_name}
+            height={30}
+            width={30}
+            className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white"
+          />
+        ) : (
+          <div
+            className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}
+          >
+            {comment.actor_detail.first_name.charAt(0)}
+          </div>
+        )}
+
+        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-brand-surface-2 px-0.5 py-px">
+          <ChatBubbleLeftEllipsisIcon className="h-3.5 w-3.5 text-gray-400" aria-hidden="true" />
+        </span>
+      </div>
+      <div className="min-w-0 flex-1">
+        <div>
+          <div className="text-xs">
+            {comment.actor_detail.first_name}
+            {comment.actor_detail.is_bot ? "Bot" : " " + comment.actor_detail.last_name}
+          </div>
+          <p className="mt-0.5 text-xs text-brand-secondary">Commented {timeAgo(comment.created_at)}</p>
+        </div>
+        <div className="issue-comments-section p-0">
+          {isEditing ? (
+            <form className="flex flex-col gap-2" onSubmit={handleSubmit(onEnter)}>
+              <RemirrorRichTextEditor
+                value={comment.comment_html}
+                onBlur={(jsonValue, htmlValue) => {
+                  setValue("comment_json", jsonValue);
+                  setValue("comment_html", htmlValue);
+                }}
+                placeholder="Enter Your comment..."
+              />
+              <div className="flex gap-1 self-end">
+                <button
+                  type="submit"
+                  disabled={isSubmitting}
+                  className="group rounded border border-green-500 bg-green-100 p-2 shadow-md duration-300 hover:bg-green-500"
+                >
+                  <CheckIcon className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
+                </button>
+                <button
+                  type="button"
+                  className="group rounded border border-red-500 bg-red-100 p-2 shadow-md duration-300 hover:bg-red-500"
+                  onClick={() => setIsEditing(false)}
+                >
+                  <XMarkIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
+                </button>
+              </div>
+            </form>
+          ) : (
+            // <div
+            //   className="mt-2 mb-6 text-sm text-gray-700"
+            //   dangerouslySetInnerHTML={{ __html: comment.comment_html }}
+            // />
+            <RemirrorRichTextEditor
+              value={comment.comment_html}
+              editable={false}
+              onBlur={() => ({})}
+              noBorder
+              customClassName="text-xs bg-brand-surface-1"
+            />
+          )}
+        </div>
+      </div>
+      {user?.id === comment.actor && (
+        <CustomMenu ellipsis>
+          <CustomMenu.MenuItem onClick={() => setIsEditing(true)}>Edit</CustomMenu.MenuItem>
+          <CustomMenu.MenuItem
+            onClick={() => {
+              handleCommentDeletion(comment.id);
+            }}
+          >
+            Delete
+          </CustomMenu.MenuItem>
+        </CustomMenu>
+      )}
+    </div>
+  );
+};
diff --git a/app/components/issues/comment/index.ts b/app/components/issues/comment/index.ts
new file mode 100644
index 000000000..cf13ca91e
--- /dev/null
+++ b/app/components/issues/comment/index.ts
@@ -0,0 +1,2 @@
+export * from "./add-comment";
+export * from "./comment-card";
diff --git a/app/components/issues/delete-attachment-modal.tsx b/app/components/issues/delete-attachment-modal.tsx
new file mode 100644
index 000000000..645b4ba5d
--- /dev/null
+++ b/app/components/issues/delete-attachment-modal.tsx
@@ -0,0 +1,138 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import issuesService from "services/issues.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { SecondaryButton, DangerButton } from "components/ui";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// helper
+import { getFileName } from "helpers/attachment.helper";
+// types
+import type { IIssueAttachment } from "types";
+// fetch-keys
+import { ISSUE_ATTACHMENTS } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  data: IIssueAttachment | null;
+};
+
+export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const handleDeletion = async (assetId: string) => {
+    if (!workspaceSlug || !projectId || !data) return;
+
+    mutate<IIssueAttachment[]>(
+      ISSUE_ATTACHMENTS(issueId as string),
+      (prevData) => (prevData ?? [])?.filter((p) => p.id !== assetId),
+      false
+    );
+
+    await issuesService
+      .deleteIssueAttachment(
+        workspaceSlug as string,
+        projectId as string,
+        issueId as string,
+        assetId as string
+      )
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "error!",
+          message: "Something went wrong please try again.",
+        });
+      });
+  };
+
+  return (
+    data && (
+      <Transition.Root show={isOpen} as={React.Fragment}>
+        <Dialog as="div" className="relative z-20" onClose={handleClose}>
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 z-20 overflow-y-auto">
+            <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+              <Transition.Child
+                as={React.Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                enterTo="opacity-100 translate-y-0 sm:scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              >
+                <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                  <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                    <div className="sm:flex sm:items-start">
+                      <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                        <ExclamationTriangleIcon
+                          className="h-6 w-6 text-red-600"
+                          aria-hidden="true"
+                        />
+                      </div>
+                      <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                        <Dialog.Title
+                          as="h3"
+                          className="text-lg font-medium leading-6 text-gray-900"
+                        >
+                          Delete Attachment
+                        </Dialog.Title>
+                        <div className="mt-2">
+                          <p className="text-sm text-gray-500">
+                            Are you sure you want to delete attachment-{" "}
+                            <span className="font-bold">{getFileName(data.attributes.name)}</span>?
+                            This attachment will be permanently removed. This action cannot be
+                            undone.
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
+                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                    <DangerButton
+                      onClick={() => {
+                        handleDeletion(data.id);
+                        handleClose();
+                      }}
+                    >
+                      Delete
+                    </DangerButton>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition.Root>
+    )
+  );
+};
diff --git a/app/components/issues/delete-issue-modal.tsx b/app/components/issues/delete-issue-modal.tsx
new file mode 100644
index 000000000..4fb5f92ea
--- /dev/null
+++ b/app/components/issues/delete-issue-modal.tsx
@@ -0,0 +1,142 @@
+import React, { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import issueServices from "services/issues.service";
+// hooks
+import useToast from "hooks/use-toast";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// ui
+import { SecondaryButton, DangerButton } from "components/ui";
+// types
+import type { CycleIssueResponse, IIssue, ModuleIssueResponse } from "types";
+// fetch-keys
+import {
+  CYCLE_ISSUES,
+  CYCLE_ISSUES_WITH_PARAMS,
+  MODULE_ISSUES,
+  MODULE_ISSUES_WITH_PARAMS,
+  PROJECT_ISSUES_LIST_WITH_PARAMS,
+  USER_ISSUE,
+} from "constants/fetch-keys";
+import useIssuesView from "hooks/use-issues-view";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data: IIssue | null;
+};
+
+export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data }) => {
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const { params } = useIssuesView();
+
+  const { setToastAlert } = useToast();
+
+  useEffect(() => {
+    setIsDeleteLoading(false);
+  }, [isOpen]);
+
+  const onClose = () => {
+    setIsDeleteLoading(false);
+    handleClose();
+  };
+
+  const handleDeletion = async () => {
+    setIsDeleteLoading(true);
+    if (!workspaceSlug || !projectId || !data) return;
+
+    await issueServices
+      .deleteIssue(workspaceSlug as string, projectId as string, data.id)
+      .then(() => {
+        if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
+        else if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+        else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
+
+        handleClose();
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Issue deleted successfully",
+        });
+      })
+      .catch((error) => {
+        console.log(error);
+        setIsDeleteLoading(false);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                <div className="flex flex-col gap-6 p-6">
+                  <div className="flex w-full items-center justify-start gap-6">
+                    <span className="place-items-center rounded-full bg-red-100 p-4">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </span>
+                    <span className="flex items-center justify-start">
+                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete Issue</h3>
+                    </span>
+                  </div>
+                  <span>
+                    <p className="break-all text-sm leading-7 text-brand-secondary">
+                      Are you sure you want to delete issue{" "}
+                      <span className="break-all font-semibold">
+                        {data?.project_detail.identifier}-{data?.sequence_id}
+                      </span>
+                      {""}? All of the data related to the issue will be permanently removed. This
+                      action cannot be undone.
+                    </p>
+                  </span>
+                  <div className="flex justify-end gap-2">
+                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
+                    <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                      {isDeleteLoading ? "Deleting..." : "Delete Issue"}
+                    </DangerButton>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/issues/description-form.tsx b/app/components/issues/description-form.tsx
new file mode 100644
index 000000000..b568fb016
--- /dev/null
+++ b/app/components/issues/description-form.tsx
@@ -0,0 +1,169 @@
+import { FC, useCallback, useEffect, useState } from "react";
+
+import dynamic from "next/dynamic";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// contexts
+import { useProjectMyMembership } from "contexts/project-member.context";
+// components
+import { Loader, TextArea } from "components/ui";
+const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
+  ssr: false,
+  loading: () => (
+    <Loader>
+      <Loader.Item height="12rem" width="100%" />
+    </Loader>
+  ),
+});
+// types
+import { IIssue } from "types";
+
+export interface IssueDescriptionFormValues {
+  name: string;
+  description: any;
+  description_html: string;
+}
+
+export interface IssueDetailsProps {
+  issue: IIssue;
+  handleFormSubmit: (value: IssueDescriptionFormValues) => Promise<void>;
+}
+
+export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormSubmit }) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [characterLimit, setCharacterLimit] = useState(false);
+
+  const { memberRole } = useProjectMyMembership();
+
+  const {
+    handleSubmit,
+    watch,
+    setValue,
+    reset,
+    register,
+    control,
+    formState: { errors },
+  } = useForm<IIssue>({
+    defaultValues: {
+      name: "",
+      description: "",
+      description_html: "",
+    },
+  });
+
+  const handleDescriptionFormSubmit = useCallback(
+    async (formData: Partial<IIssue>) => {
+      if (!formData.name || formData.name.length === 0 || formData.name.length > 255) return;
+
+      await handleFormSubmit({
+        name: formData.name ?? "",
+        description: formData.description ?? "",
+        description_html: formData.description_html ?? "<p></p>",
+      });
+    },
+    [handleFormSubmit]
+  );
+
+  // useEffect(() => {
+  //   const alertUser = (e: BeforeUnloadEvent) => {
+  //     e.preventDefault();
+  //     e.returnValue = "";
+  //     return "Are you sure you want to leave?";
+  //   };
+
+  //   window.addEventListener("beforeunload", alertUser);
+  //   return () => {
+  //     window.removeEventListener("beforeunload", alertUser);
+  //   };
+  // }, [isSubmitting]);
+
+  // reset form values
+  useEffect(() => {
+    if (!issue) return;
+
+    reset(issue);
+  }, [issue, reset]);
+
+  const isNotAllowed = memberRole.isGuest || memberRole.isViewer;
+
+  return (
+    <div className="relative">
+      <div className="relative">
+        <TextArea
+          id="name"
+          name="name"
+          placeholder="Enter issue name"
+          register={register}
+          onFocus={() => setCharacterLimit(true)}
+          onBlur={() => {
+            setCharacterLimit(false);
+
+            setIsSubmitting(true);
+            handleSubmit(handleDescriptionFormSubmit)()
+              .then(() => {
+                setIsSubmitting(false);
+              })
+              .catch(() => {
+                setIsSubmitting(false);
+              });
+          }}
+          required={true}
+          className="min-h-10 block w-full resize-none
+      overflow-hidden rounded border-none bg-transparent
+      px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-theme"
+          role="textbox"
+        />
+        {characterLimit && (
+          <div className="pointer-events-none absolute bottom-0 right-0 z-[2] rounded bg-brand-surface-2 p-1 text-xs">
+            <span
+              className={`${
+                watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
+              }`}
+            >
+              {watch("name").length}
+            </span>
+            /255
+          </div>
+        )}
+      </div>
+      <span>{errors.name ? errors.name.message : null}</span>
+      <Controller
+        name="description"
+        control={control}
+        render={({ field: { value } }) => (
+          <RemirrorRichTextEditor
+            value={
+              !value ||
+              value === "" ||
+              (typeof value === "object" && Object.keys(value).length === 0)
+                ? watch("description_html")
+                : value
+            }
+            onJSONChange={(jsonValue) => setValue("description", jsonValue)}
+            onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
+            onBlur={() => {
+              setIsSubmitting(true);
+              handleSubmit(handleDescriptionFormSubmit)()
+                .then(() => {
+                  setIsSubmitting(false);
+                })
+                .catch(() => {
+                  setIsSubmitting(false);
+                });
+            }}
+            placeholder="Describe the issue..."
+            editable={!isNotAllowed}
+          />
+        )}
+      />
+      <div
+        className={`absolute -bottom-8 right-0 text-sm text-brand-secondary ${
+          isSubmitting ? "block" : "hidden"
+        }`}
+      >
+        Saving...
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/issues/form.tsx b/app/components/issues/form.tsx
new file mode 100644
index 000000000..8556c2551
--- /dev/null
+++ b/app/components/issues/form.tsx
@@ -0,0 +1,486 @@
+import { ChangeEvent, FC, useState, useEffect } from "react";
+
+import Link from "next/link";
+import dynamic from "next/dynamic";
+import { useRouter } from "next/router";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// services
+import aiService from "services/ai.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { GptAssistantModal } from "components/core";
+import {
+  IssueAssigneeSelect,
+  IssueDateSelect,
+  IssueEstimateSelect,
+  IssueLabelSelect,
+  IssueParentSelect,
+  IssuePrioritySelect,
+  IssueProjectSelect,
+  IssueStateSelect,
+} from "components/issues/select";
+import { CreateStateModal } from "components/states";
+import { CreateUpdateCycleModal } from "components/cycles";
+import { CreateLabelModal } from "components/labels";
+// ui
+import { CustomMenu, Input, Loader, PrimaryButton, SecondaryButton } from "components/ui";
+// icons
+import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
+// helpers
+import { cosineSimilarity } from "helpers/string.helper";
+// types
+import type { IIssue } from "types";
+// rich-text-editor
+const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
+  ssr: false,
+  loading: () => (
+    <Loader className="mt-4">
+      <Loader.Item height="12rem" width="100%" />
+    </Loader>
+  ),
+});
+
+const defaultValues: Partial<IIssue> = {
+  project: "",
+  name: "",
+  description: { type: "doc", content: [] },
+  description_html: "<p></p>",
+  estimate_point: null,
+  state: "",
+  cycle: null,
+  priority: null,
+  assignees: [],
+  assignees_list: [],
+  labels: [],
+  labels_list: [],
+};
+
+export interface IssueFormProps {
+  handleFormSubmit: (values: Partial<IIssue>) => Promise<void>;
+  initialData?: Partial<IIssue>;
+  issues: IIssue[];
+  projectId: string;
+  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
+  createMore: boolean;
+  setCreateMore: React.Dispatch<React.SetStateAction<boolean>>;
+  handleClose: () => void;
+  status: boolean;
+}
+
+export const IssueForm: FC<IssueFormProps> = ({
+  handleFormSubmit,
+  initialData,
+  issues = [],
+  projectId,
+  setActiveProject,
+  createMore,
+  setCreateMore,
+  handleClose,
+  status,
+}) => {
+  // states
+  const [mostSimilarIssue, setMostSimilarIssue] = useState<IIssue | undefined>();
+  const [cycleModal, setCycleModal] = useState(false);
+  const [stateModal, setStateModal] = useState(false);
+  const [labelModal, setLabelModal] = useState(false);
+  const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
+
+  const [gptAssistantModal, setGptAssistantModal] = useState(false);
+  const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    watch,
+    control,
+    getValues,
+    setValue,
+    setFocus,
+  } = useForm<IIssue>({
+    defaultValues,
+    reValidateMode: "onChange",
+  });
+
+  const issueName = watch("name");
+
+  const handleTitleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    const similarIssue = issues?.find((i: IIssue) => cosineSimilarity(i.name, value) > 0.7);
+    setMostSimilarIssue(similarIssue);
+  };
+
+  const handleCreateUpdateIssue = async (formData: Partial<IIssue>) => {
+    await handleFormSubmit(formData);
+
+    reset({
+      ...defaultValues,
+      project: projectId,
+      description: "",
+      description_html: "<p></p>",
+    });
+  };
+
+  const handleAiAssistance = async (response: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    setValue("description", {});
+    setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
+  };
+
+  const handleAutoGenerateDescription = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    setIAmFeelingLucky(true);
+
+    aiService
+      .createGptTask(workspaceSlug as string, projectId as string, {
+        prompt: issueName,
+        task: "Generate a proper description for this issue in context of a project management software.",
+      })
+      .then((res) => {
+        if (res.response === "")
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "Issue title isn't informative enough to generate the description. Please try with a different title.",
+          });
+        else handleAiAssistance(res.response_html);
+      })
+      .catch((err) => {
+        if (err.status === 429)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "You have reached the maximum number of requests of 50 requests per month per user.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Some error occurred. Please try again.",
+          });
+      })
+      .finally(() => setIAmFeelingLucky(false));
+  };
+
+  useEffect(() => {
+    setFocus("name");
+
+    reset({
+      ...defaultValues,
+      ...initialData,
+      project: projectId,
+    });
+  }, [setFocus, initialData, reset, projectId]);
+
+  return (
+    <>
+      {projectId && (
+        <>
+          <CreateStateModal
+            isOpen={stateModal}
+            handleClose={() => setStateModal(false)}
+            projectId={projectId}
+          />
+          <CreateUpdateCycleModal isOpen={cycleModal} handleClose={() => setCycleModal(false)} />
+          <CreateLabelModal
+            isOpen={labelModal}
+            handleClose={() => setLabelModal(false)}
+            projectId={projectId}
+          />
+        </>
+      )}
+      <form onSubmit={handleSubmit(handleCreateUpdateIssue)}>
+        <div className="space-y-5">
+          <div className="flex items-center gap-x-2">
+            <Controller
+              control={control}
+              name="project"
+              render={({ field: { value, onChange } }) => (
+                <IssueProjectSelect
+                  value={value}
+                  onChange={onChange}
+                  setActiveProject={setActiveProject}
+                />
+              )}
+            />
+            <h3 className="text-xl font-semibold leading-6 text-brand-base">
+              {status ? "Update" : "Create"} Issue
+            </h3>
+          </div>
+          {watch("parent") && watch("parent") !== "" ? (
+            <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-1 p-2 text-xs">
+              <div className="flex items-center gap-2">
+                <span
+                  className="block h-1.5 w-1.5 rounded-full"
+                  style={{
+                    backgroundColor: issues.find((i) => i.id === watch("parent"))?.state_detail
+                      .color,
+                  }}
+                />
+                <span className="flex-shrink-0 text-gray-600">
+                  {/* {projects?.find((p) => p.id === projectId)?.identifier}- */}
+                  {issues.find((i) => i.id === watch("parent"))?.sequence_id}
+                </span>
+                <span className="truncate font-medium">
+                  {issues.find((i) => i.id === watch("parent"))?.name.substring(0, 50)}
+                </span>
+                <XMarkIcon
+                  className="h-3 w-3 cursor-pointer"
+                  onClick={() => setValue("parent", null)}
+                />
+              </div>
+            </div>
+          ) : null}
+          <div className="space-y-3">
+            <div className="mt-2 space-y-3">
+              <div>
+                <Input
+                  id="name"
+                  name="name"
+                  onChange={handleTitleChange}
+                  className="resize-none text-xl"
+                  placeholder="Title"
+                  mode="transparent"
+                  autoComplete="off"
+                  error={errors.name}
+                  register={register}
+                  validations={{
+                    required: "Title is required",
+                    maxLength: {
+                      value: 255,
+                      message: "Title should be less than 255 characters",
+                    },
+                  }}
+                />
+                {mostSimilarIssue && (
+                  <div className="flex items-center gap-x-2">
+                    <p className="text-sm text-brand-secondary">
+                      <Link
+                        href={`/${workspaceSlug}/projects/${projectId}/issues/${mostSimilarIssue.id}`}
+                      >
+                        <a target="_blank" type="button" className="inline text-left">
+                          <span>Did you mean </span>
+                          <span className="italic">
+                            {mostSimilarIssue.project_detail.identifier}-
+                            {mostSimilarIssue.sequence_id}: {mostSimilarIssue.name}{" "}
+                          </span>
+                          ?
+                        </a>
+                      </Link>
+                    </p>
+                    <button
+                      type="button"
+                      className="text-sm text-brand-accent"
+                      onClick={() => {
+                        setMostSimilarIssue(undefined);
+                      }}
+                    >
+                      No
+                    </button>
+                  </div>
+                )}
+              </div>
+              <div className="relative">
+                <div className="flex justify-end -mb-2">
+                  {issueName && issueName !== "" && (
+                    <button
+                      type="button"
+                      className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${
+                        iAmFeelingLucky ? "cursor-wait" : ""
+                      }`}
+                      onClick={handleAutoGenerateDescription}
+                      disabled={iAmFeelingLucky}
+                    >
+                      {iAmFeelingLucky ? (
+                        "Generating response..."
+                      ) : (
+                        <>
+                          <SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
+                        </>
+                      )}
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
+                    onClick={() => setGptAssistantModal((prevData) => !prevData)}
+                  >
+                    <SparklesIcon className="h-4 w-4" />
+                    AI
+                  </button>
+                </div>
+                <Controller
+                  name="description"
+                  control={control}
+                  render={({ field: { value } }) => (
+                    <RemirrorRichTextEditor
+                      value={
+                        !value || (typeof value === "object" && Object.keys(value).length === 0)
+                          ? watch("description_html")
+                          : value
+                      }
+                      onJSONChange={(jsonValue) => setValue("description", jsonValue)}
+                      onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
+                      placeholder="Describe the issue..."
+                    />
+                  )}
+                />
+                <GptAssistantModal
+                  isOpen={gptAssistantModal}
+                  handleClose={() => {
+                    setGptAssistantModal(false);
+                    // this is done so that the title do not reset after gpt popover closed
+                    reset(getValues());
+                  }}
+                  inset="top-2 left-0"
+                  content=""
+                  htmlContent={watch("description_html")}
+                  onResponse={handleAiAssistance}
+                  projectId={projectId}
+                />
+              </div>
+              <div className="flex flex-wrap items-center gap-2">
+                <Controller
+                  control={control}
+                  name="state"
+                  render={({ field: { value, onChange } }) => (
+                    <IssueStateSelect
+                      setIsOpen={setStateModal}
+                      value={value}
+                      onChange={onChange}
+                      projectId={projectId}
+                    />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="priority"
+                  render={({ field: { value, onChange } }) => (
+                    <IssuePrioritySelect value={value} onChange={onChange} />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="assignees"
+                  render={({ field: { value, onChange } }) => (
+                    <IssueAssigneeSelect projectId={projectId} value={value} onChange={onChange} />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="labels"
+                  render={({ field: { value, onChange } }) => (
+                    <IssueLabelSelect
+                      setIsOpen={setLabelModal}
+                      value={value}
+                      onChange={onChange}
+                      projectId={projectId}
+                    />
+                  )}
+                />
+                <div>
+                  <Controller
+                    control={control}
+                    name="target_date"
+                    render={({ field: { value, onChange } }) => (
+                      <IssueDateSelect value={value} onChange={onChange} />
+                    )}
+                  />
+                </div>
+                <div>
+                  <Controller
+                    control={control}
+                    name="estimate_point"
+                    render={({ field: { value, onChange } }) => (
+                      <IssueEstimateSelect value={value} onChange={onChange} />
+                    )}
+                  />
+                </div>
+                <IssueParentSelect
+                  control={control}
+                  isOpen={parentIssueListModalOpen}
+                  setIsOpen={setParentIssueListModalOpen}
+                  issues={issues ?? []}
+                />
+                <CustomMenu ellipsis>
+                  {watch("parent") && watch("parent") !== "" ? (
+                    <>
+                      <CustomMenu.MenuItem
+                        renderAs="button"
+                        onClick={() => setParentIssueListModalOpen(true)}
+                      >
+                        Change parent issue
+                      </CustomMenu.MenuItem>
+                      <CustomMenu.MenuItem
+                        renderAs="button"
+                        onClick={() => setValue("parent", null)}
+                      >
+                        Remove parent issue
+                      </CustomMenu.MenuItem>
+                    </>
+                  ) : (
+                    <CustomMenu.MenuItem
+                      renderAs="button"
+                      onClick={() => setParentIssueListModalOpen(true)}
+                    >
+                      Select Parent Issue
+                    </CustomMenu.MenuItem>
+                  )}
+                </CustomMenu>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-brand-base px-5 pt-5">
+          <div
+            className="flex cursor-pointer items-center gap-1"
+            onClick={() => setCreateMore((prevData) => !prevData)}
+          >
+            <span className="text-xs">Create more</span>
+            <button
+              type="button"
+              className={`pointer-events-none relative inline-flex h-4 w-7 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent ${
+                createMore ? "bg-brand-accent" : "bg-gray-300"
+              } transition-colors duration-300 ease-in-out focus:outline-none`}
+              role="switch"
+              aria-checked="false"
+            >
+              <span className="sr-only">Create more</span>
+              <span
+                aria-hidden="true"
+                className={`pointer-events-none inline-block h-3 w-3 ${
+                  createMore ? "translate-x-3" : "translate-x-0"
+                } transform rounded-full bg-brand-surface-2 shadow ring-0 transition duration-300 ease-in-out`}
+              />
+            </button>
+          </div>
+          <div className="flex items-center gap-2">
+            <SecondaryButton onClick={handleClose}>Discard</SecondaryButton>
+            <PrimaryButton type="submit" loading={isSubmitting}>
+              {status
+                ? isSubmitting
+                  ? "Updating Issue..."
+                  : "Update Issue"
+                : isSubmitting
+                ? "Adding Issue..."
+                : "Add Issue"}
+            </PrimaryButton>
+          </div>
+        </div>
+      </form>
+    </>
+  );
+};
diff --git a/app/components/issues/index.ts b/app/components/issues/index.ts
new file mode 100644
index 000000000..c5322645f
--- /dev/null
+++ b/app/components/issues/index.ts
@@ -0,0 +1,15 @@
+export * from "./comment";
+export * from "./sidebar-select";
+export * from "./view-select";
+export * from "./activity";
+export * from "./delete-issue-modal";
+export * from "./description-form";
+export * from "./form";
+export * from "./modal";
+export * from "./my-issues-list-item";
+export * from "./parent-issues-list-modal";
+export * from "./sidebar";
+export * from "./sub-issues-list";
+export * from "./attachment-upload";
+export * from "./attachments";
+export * from "./delete-attachment-modal";
diff --git a/app/components/issues/modal.tsx b/app/components/issues/modal.tsx
new file mode 100644
index 000000000..1b74664b1
--- /dev/null
+++ b/app/components/issues/modal.tsx
@@ -0,0 +1,255 @@
+import React, { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import projectService from "services/project.service";
+import modulesService from "services/modules.service";
+import issuesService from "services/issues.service";
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// components
+import { IssueForm } from "components/issues";
+// hooks
+import useIssuesView from "hooks/use-issues-view";
+// types
+import type { IIssue } from "types";
+// fetch keys
+import {
+  PROJECT_ISSUES_DETAILS,
+  PROJECT_ISSUES_LIST,
+  USER_ISSUE,
+  PROJECTS_LIST,
+  SUB_ISSUES,
+  PROJECT_ISSUES_LIST_WITH_PARAMS,
+  CYCLE_ISSUES_WITH_PARAMS,
+  MODULE_ISSUES_WITH_PARAMS,
+  CYCLE_DETAILS,
+  MODULE_DETAILS,
+} from "constants/fetch-keys";
+
+export interface IssuesModalProps {
+  isOpen: boolean;
+  handleClose: () => void;
+  data?: IIssue | null;
+  prePopulateData?: Partial<IIssue>;
+  isUpdatingSingleIssue?: boolean;
+}
+
+export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
+  isOpen,
+  handleClose,
+  data,
+  prePopulateData,
+  isUpdatingSingleIssue = false,
+}) => {
+  // states
+  const [createMore, setCreateMore] = useState(false);
+  const [activeProject, setActiveProject] = useState<string | null>(null);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const { params } = useIssuesView();
+
+  if (cycleId) prePopulateData = { ...prePopulateData, cycle: cycleId as string };
+  if (moduleId) prePopulateData = { ...prePopulateData, module: moduleId as string };
+
+  const { user } = useUser();
+  const { setToastAlert } = useToast();
+
+  const { data: issues } = useSWR(
+    workspaceSlug && activeProject
+      ? PROJECT_ISSUES_LIST(workspaceSlug as string, activeProject ?? "")
+      : null,
+    workspaceSlug && activeProject
+      ? () => issuesService.getIssues(workspaceSlug as string, activeProject ?? "")
+      : null
+  );
+
+  const { data: projects } = useSWR(
+    workspaceSlug ? PROJECTS_LIST(workspaceSlug as string) : null,
+    workspaceSlug ? () => projectService.getProjects(workspaceSlug as string) : null
+  );
+
+  useEffect(() => {
+    if (projects && projects.length > 0)
+      setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
+  }, [projectId, projects]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        handleClose();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleClose]);
+
+  const addIssueToCycle = async (issueId: string, cycleId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await issuesService
+      .addIssueToCycle(workspaceSlug as string, activeProject ?? "", cycleId, {
+        issues: [issueId],
+      })
+      .then(() => {
+        if (cycleId) {
+          mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId, params));
+          mutate(CYCLE_DETAILS(cycleId as string));
+        }
+      });
+  };
+
+  const addIssueToModule = async (issueId: string, moduleId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await modulesService
+      .addIssuesToModule(workspaceSlug as string, activeProject ?? "", moduleId as string, {
+        issues: [issueId],
+      })
+      .then(() => {
+        if (moduleId) {
+          mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+          mutate(MODULE_DETAILS(moduleId as string));
+        }
+      });
+  };
+
+  const createIssue = async (payload: Partial<IIssue>) => {
+    await issuesService
+      .createIssues(workspaceSlug as string, activeProject ?? "", payload)
+      .then((res) => {
+        mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
+
+        if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
+        if (payload.module && payload.module !== "") addIssueToModule(res.id, payload.module);
+
+        if (!createMore) handleClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Issue created successfully.",
+        });
+
+        if (payload.assignees_list?.some((assignee) => assignee === user?.id)) mutate(USER_ISSUE);
+
+        if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Issue could not be created. Please try again.",
+        });
+      });
+  };
+
+  const updateIssue = async (payload: Partial<IIssue>) => {
+    await issuesService
+      .updateIssue(workspaceSlug as string, activeProject ?? "", data?.id ?? "", payload)
+      .then((res) => {
+        if (isUpdatingSingleIssue) {
+          mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
+        } else {
+          mutate<IIssue[]>(
+            PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params),
+            (prevData) =>
+              (prevData ?? []).map((i) => {
+                if (i.id === res.id) return { ...i, ...res };
+                return i;
+              })
+          );
+        }
+
+        if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
+        if (payload.module && payload.module !== "") addIssueToModule(res.id, payload.module);
+
+        if (!createMore) handleClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Issue updated successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Issue could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const handleFormSubmit = async (formData: Partial<IIssue>) => {
+    if (!workspaceSlug || !activeProject) return;
+
+    const payload: Partial<IIssue> = {
+      ...formData,
+      assignees_list: formData.assignees,
+      labels_list: formData.labels,
+      description: formData.description ?? "",
+      description_html: formData.description_html ?? "<p></p>",
+    };
+
+    if (!data) await createIssue(payload);
+    else await updateIssue(payload);
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={() => {}}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="my-10  flex  items-center justify-center p-4 text-center sm:p-0 md:my-20">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+                <IssueForm
+                  issues={issues ?? []}
+                  handleFormSubmit={handleFormSubmit}
+                  initialData={prePopulateData}
+                  createMore={createMore}
+                  setCreateMore={setCreateMore}
+                  handleClose={handleClose}
+                  projectId={activeProject ?? ""}
+                  setActiveProject={setActiveProject}
+                  status={data ? true : false}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/issues/my-issues-list-item.tsx b/app/components/issues/my-issues-list-item.tsx
new file mode 100644
index 000000000..ebf063719
--- /dev/null
+++ b/app/components/issues/my-issues-list-item.tsx
@@ -0,0 +1,205 @@
+import React, { useCallback } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import issuesService from "services/issues.service";
+// components
+import {
+  ViewDueDateSelect,
+  ViewPrioritySelect,
+  ViewStateSelect,
+} from "components/issues/view-select";
+// icon
+import { LinkIcon, PaperClipIcon } from "@heroicons/react/24/outline";
+// ui
+import { AssigneesList } from "components/ui/avatar";
+import { CustomMenu, Tooltip } from "components/ui";
+// types
+import { IIssue, Properties } from "types";
+// helper
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+// fetch-keys
+import { USER_ISSUE } from "constants/fetch-keys";
+
+type Props = {
+  issue: IIssue;
+  properties: Properties;
+  projectId: string;
+};
+
+export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  const { setToastAlert } = useToast();
+
+  const partialUpdateIssue = useCallback(
+    (formData: Partial<IIssue>) => {
+      if (!workspaceSlug) return;
+
+      mutate<IIssue[]>(
+        USER_ISSUE(workspaceSlug as string),
+        (prevData) =>
+          prevData?.map((p) => {
+            if (p.id === issue.id) return { ...p, ...formData };
+
+            return p;
+          }),
+        false
+      );
+
+      issuesService
+        .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
+        .then((res) => {
+          mutate(USER_ISSUE(workspaceSlug as string));
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    [workspaceSlug, projectId, issue]
+  );
+
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
+    });
+  };
+
+  const isNotAllowed = false;
+
+  return (
+    <div className="border-b border-brand-base last:border-b-0 mx-6">
+      <div key={issue.id} className="flex items-center justify-between gap-2 py-3">
+        <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
+          <a className="group relative flex items-center gap-2">
+            {properties?.key && (
+              <Tooltip
+                tooltipHeading="Issue ID"
+                tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
+              >
+                <span className="flex-shrink-0 text-xs text-gray-400">
+                  {issue.project_detail?.identifier}-{issue.sequence_id}
+                </span>
+              </Tooltip>
+            )}
+            <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
+              <span className="break-all text-sm text-brand-base">
+                {truncateText(issue.name, 50)}
+              </span>
+            </Tooltip>
+          </a>
+        </Link>
+
+        <div className="flex flex-wrap items-center gap-2 text-xs">
+          {properties.priority && (
+            <ViewPrioritySelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              isNotAllowed={isNotAllowed}
+            />
+          )}
+          {properties.state && (
+            <ViewStateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              isNotAllowed={isNotAllowed}
+            />
+          )}
+          {properties.due_date && (
+            <ViewDueDateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              isNotAllowed={isNotAllowed}
+            />
+          )}
+          {properties.sub_issue_count && (
+            <div className="flex items-center gap-1 rounded-md border border-brand-base px-3 py-1.5 text-xs shadow-sm">
+              {issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
+            </div>
+          )}
+          {properties.labels && issue.label_details.length > 0 ? (
+            <div className="flex flex-wrap gap-1">
+              {issue.label_details.map((label) => (
+                <span
+                  key={label.id}
+                  className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
+                >
+                  <span
+                    className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                    style={{
+                      backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
+                    }}
+                  />
+                  {label.name}
+                </span>
+              ))}
+            </div>
+          ) : (
+            ""
+          )}
+          {properties.assignee && (
+            <Tooltip
+              position="top-right"
+              tooltipHeading="Assignees"
+              tooltipContent={
+                issue.assignee_details.length > 0
+                  ? issue.assignee_details
+                      .map((assignee) =>
+                        assignee?.first_name !== "" ? assignee?.first_name : assignee?.email
+                      )
+                      .join(", ")
+                  : "No Assignee"
+              }
+            >
+              <div className="flex items-center gap-1">
+                <AssigneesList userIds={issue.assignees ?? []} />
+              </div>
+            </Tooltip>
+          )}
+          {properties.link && (
+            <div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-gray-200">
+              <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
+                <div className="flex items-center gap-1 text-gray-500">
+                  <LinkIcon className="h-3.5 w-3.5 text-gray-500" />
+                  {issue.link_count}
+                </div>
+              </Tooltip>
+            </div>
+          )}
+          {properties.attachment_count && (
+            <div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-gray-200">
+              <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
+                <div className="flex items-center gap-1 text-gray-500">
+                  <PaperClipIcon className="h-3.5 w-3.5 text-gray-500 -rotate-45" />
+                  {issue.attachment_count}
+                </div>
+              </Tooltip>
+            </div>
+          )}
+          <CustomMenu width="auto" ellipsis>
+            <CustomMenu.MenuItem onClick={handleCopyText}>
+              <span className="flex items-center justify-start gap-2">
+                <LinkIcon className="h-4 w-4" />
+                <span>Copy issue link</span>
+              </span>
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/issues/parent-issues-list-modal.tsx b/app/components/issues/parent-issues-list-modal.tsx
new file mode 100644
index 000000000..3b1c18b80
--- /dev/null
+++ b/app/components/issues/parent-issues-list-modal.tsx
@@ -0,0 +1,225 @@
+import React, { useState } from "react";
+
+// headless ui
+import { Combobox, Dialog, Transition } from "@headlessui/react";
+// icons
+import { MagnifyingGlassIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
+// ui
+import { PrimaryButton, SecondaryButton } from "components/ui";
+// types
+import { IIssue } from "types";
+import { LayerDiagonalIcon } from "components/icons";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  value?: any;
+  onChange: (...event: any[]) => void;
+  issues: IIssue[];
+  title?: string;
+  multiple?: boolean;
+  customDisplay?: JSX.Element;
+};
+
+export const ParentIssuesListModal: React.FC<Props> = ({
+  isOpen,
+  handleClose: onClose,
+  value,
+  onChange,
+  issues,
+  title = "Issues",
+  multiple = false,
+  customDisplay,
+}) => {
+  const [query, setQuery] = useState("");
+  const [values, setValues] = useState<string[]>([]);
+
+  const handleClose = () => {
+    onClose();
+    setQuery("");
+    setValues([]);
+  };
+
+  const filteredIssues: IIssue[] =
+    query === ""
+      ? issues ?? []
+      : issues?.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ?? [];
+
+  return (
+    <>
+      <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
+        <Dialog as="div" className="relative z-20" onClose={handleClose}>
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+                {multiple ? (
+                  <>
+                    <Combobox value={value} onChange={() => ({})} multiple>
+                      <div className="relative m-1">
+                        <MagnifyingGlassIcon
+                          className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
+                          aria-hidden="true"
+                        />
+                        <Combobox.Input
+                          className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                          placeholder="Search..."
+                          onChange={(e) => setQuery(e.target.value)}
+                          displayValue={() => ""}
+                        />
+                      </div>
+                      {customDisplay && <div className="p-3">{customDisplay}</div>}
+                      <Combobox.Options
+                        static
+                        className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
+                      >
+                        {filteredIssues.length > 0 && (
+                          <li className="p-2">
+                            {query === "" && (
+                              <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
+                                {title}
+                              </h2>
+                            )}
+                            <ul className="text-sm text-gray-700">
+                              {filteredIssues.map((issue) => (
+                                <Combobox.Option
+                                  key={issue.id}
+                                  value={issue.id}
+                                  className={({ active }) =>
+                                    `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
+                                      active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
+                                    }`
+                                  }
+                                >
+                                  {({ selected }) => (
+                                    <>
+                                      <input type="checkbox" checked={selected} readOnly />
+                                      <span
+                                        className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                                        style={{
+                                          backgroundColor: issue.state_detail.color,
+                                        }}
+                                      />
+                                      <span className="flex-shrink-0 text-xs text-brand-secondary">
+                                        {issue.project_detail?.identifier}-{issue.sequence_id}
+                                      </span>{" "}
+                                      {issue.id}
+                                    </>
+                                  )}
+                                </Combobox.Option>
+                              ))}
+                            </ul>
+                          </li>
+                        )}
+                      </Combobox.Options>
+
+                      {query !== "" && filteredIssues.length === 0 && (
+                        <div className="py-14 px-6 text-center sm:px-14">
+                          <RectangleStackIcon
+                            className="mx-auto h-6 w-6 text-brand-base text-opacity-40"
+                            aria-hidden="true"
+                          />
+                          <p className="mt-4 text-sm text-brand-base">
+                            We couldn{"'"}t find any issue with that term. Please try again.
+                          </p>
+                        </div>
+                      )}
+                    </Combobox>
+                    <div className="flex items-center justify-end gap-2 p-3">
+                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                      <PrimaryButton onClick={() => onChange(values)}>Add issues</PrimaryButton>
+                    </div>
+                  </>
+                ) : (
+                  <Combobox value={value} onChange={onChange}>
+                    <div className="relative m-1">
+                      <MagnifyingGlassIcon
+                        className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
+                        aria-hidden="true"
+                      />
+                      <Combobox.Input
+                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                        placeholder="Search..."
+                        onChange={(e) => setQuery(e.target.value)}
+                        displayValue={() => ""}
+                      />
+                    </div>
+                    {customDisplay && <div className="p-3">{customDisplay}</div>}
+                    <Combobox.Options
+                      static
+                      className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
+                    >
+                      {filteredIssues.length > 0 ? (
+                        <li className="p-2">
+                          {query === "" && (
+                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
+                              {title}
+                            </h2>
+                          )}
+                          <ul className="text-sm text-gray-700">
+                            {filteredIssues.map((issue) => (
+                              <Combobox.Option
+                                key={issue.id}
+                                value={issue.id}
+                                className={({ active }) =>
+                                  `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
+                                    active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
+                                  }`
+                                }
+                                onClick={() => handleClose()}
+                              >
+                                <>
+                                  <span
+                                    className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                                    style={{
+                                      backgroundColor: issue.state_detail.color,
+                                    }}
+                                  />
+                                  <span className="flex-shrink-0 text-xs text-brand-secondary">
+                                    {issue.project_detail?.identifier}-{issue.sequence_id}
+                                  </span>{" "}
+                                  {issue.name}
+                                </>
+                              </Combobox.Option>
+                            ))}
+                          </ul>
+                        </li>
+                      ) : (
+                        <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
+                          <LayerDiagonalIcon height="56" width="56" />
+                          <h3 className="text-brand-secondary">
+                            No issues found. Create a new issue with{" "}
+                            <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
+                          </h3>
+                        </div>
+                      )}
+                    </Combobox.Options>
+                  </Combobox>
+                )}
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+};
diff --git a/app/components/issues/select/assignee.tsx b/app/components/issues/select/assignee.tsx
new file mode 100644
index 000000000..5c1d7c1b4
--- /dev/null
+++ b/app/components/issues/select/assignee.tsx
@@ -0,0 +1,74 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import projectServices from "services/project.service";
+// ui
+import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
+// icons
+import { UserGroupIcon } from "@heroicons/react/24/outline";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+export type Props = {
+  projectId: string;
+  value: string[];
+  onChange: (value: string[]) => void;
+};
+
+export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], onChange }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // fetching project members
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectServices.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const options =
+    members?.map((member) => ({
+      value: member.member.id,
+      query:
+        (member.member.first_name && member.member.first_name !== ""
+          ? member.member.first_name
+          : member.member.email) +
+          " " +
+          member.member.last_name ?? "",
+      content: (
+        <div className="flex items-center gap-2">
+          <Avatar user={member.member} />
+          {member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name
+            : member.member.email}
+        </div>
+      ),
+    })) ?? [];
+
+  return (
+    <CustomSearchSelect
+      value={value}
+      onChange={onChange}
+      options={options}
+      label={
+        <div className="flex items-center gap-2 text-brand-secondary">
+          {value && value.length > 0 && Array.isArray(value) ? (
+            <div className="flex items-center justify-center gap-2">
+              <AssigneesList userIds={value} length={3} showLength={true} />
+            </div>
+          ) : (
+            <div className="flex items-center justify-center gap-2">
+              <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
+              <span className="text-brand-secondary">Assignee</span>
+            </div>
+          )}
+        </div>
+      }
+      multiple
+      noChevron
+    />
+  );
+};
diff --git a/app/components/issues/select/date.tsx b/app/components/issues/select/date.tsx
new file mode 100644
index 000000000..3bb8c1bed
--- /dev/null
+++ b/app/components/issues/select/date.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+
+import { Popover, Transition } from "@headlessui/react";
+import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
+// react-datepicker
+import DatePicker from "react-datepicker";
+// import "react-datepicker/dist/react-datepicker.css";
+import { renderDateFormat } from "helpers/date-time.helper";
+
+type Props = {
+  value: string | null;
+  onChange: (val: string | null) => void;
+};
+
+export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
+  <Popover className="relative flex items-center justify-center  rounded-lg">
+    {({ open }) => (
+      <>
+        <Popover.Button
+          className={({ open }) =>
+            `flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200 
+              ${
+                open
+                  ? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
+                  : "hover:bg-brand-accent/5 "
+              }`
+          }
+        >
+          <span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
+            {value ? (
+              <>
+                <span className="text-gray-600">{value}</span>
+                <button onClick={() => onChange(null)}>
+                  <XMarkIcon className="h-3 w-3 text-gray-600" />
+                </button>
+              </>
+            ) : (
+              <>
+                <CalendarDaysIcon className="h-4 w-4 text-gray-500 flex-shrink-0 " />
+                <span className="text-gray-500">Due Date</span>
+              </>
+            )}
+          </span>
+        </Popover.Button>
+
+        <Transition
+          as={React.Fragment}
+          enter="transition ease-out duration-200"
+          enterFrom="opacity-0 translate-y-1"
+          enterTo="opacity-100 translate-y-0"
+          leave="transition ease-in duration-150"
+          leaveFrom="opacity-100 translate-y-0"
+          leaveTo="opacity-0 translate-y-1"
+        >
+          <Popover.Panel className="absolute top-10 -left-10 z-20  transform overflow-hidden">
+            <DatePicker
+              selected={value ? new Date(value) : null}
+              onChange={(val) => {
+                if (!val) onChange("");
+                else onChange(renderDateFormat(val));
+              }}
+              dateFormat="dd-MM-yyyy"
+              inline
+            />
+          </Popover.Panel>
+        </Transition>
+      </>
+    )}
+  </Popover>
+);
diff --git a/app/components/issues/select/estimate.tsx b/app/components/issues/select/estimate.tsx
new file mode 100644
index 000000000..142a0369b
--- /dev/null
+++ b/app/components/issues/select/estimate.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+
+// ui
+import { CustomSelect } from "components/ui";
+// icons
+import { PlayIcon } from "@heroicons/react/24/outline";
+// fetch-keys
+import useEstimateOption from "hooks/use-estimate-option";
+
+type Props = {
+  value: number | null;
+  onChange: (value: number | null) => void;
+};
+
+export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
+  const { isEstimateActive, estimatePoints } = useEstimateOption();
+
+  if (!isEstimateActive) return null;
+
+  return (
+    <CustomSelect
+      value={value}
+      label={
+        <div className="flex items-center gap-2 text-xs">
+          <PlayIcon className="h-4 w-4 -rotate-90 text-gray-500" />
+          <span className={`${value ? "text-gray-600" : "text-gray-500"}`}>
+            {estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate"}
+          </span>
+        </div>
+      }
+      onChange={onChange}
+      position="right"
+      width="w-full min-w-[8rem]"
+      noChevron
+    >
+      <CustomSelect.Option value={null}>
+        <>
+          <span>
+            <PlayIcon className="h-4 w-4 -rotate-90" />
+          </span>
+          None
+        </>
+      </CustomSelect.Option>
+      {estimatePoints &&
+        estimatePoints.map((point) => (
+          <CustomSelect.Option key={point.key} value={point.key}>
+            <>
+              <span>
+                <PlayIcon className="h-4 w-4 -rotate-90" />
+              </span>
+              {point.value}
+            </>
+          </CustomSelect.Option>
+        ))}
+    </CustomSelect>
+  );
+};
diff --git a/app/components/issues/select/index.ts b/app/components/issues/select/index.ts
new file mode 100644
index 000000000..e044282ec
--- /dev/null
+++ b/app/components/issues/select/index.ts
@@ -0,0 +1,8 @@
+export * from "./assignee";
+export * from "./date";
+export * from "./estimate"
+export * from "./label";
+export * from "./parent";
+export * from "./priority";
+export * from "./project";
+export * from "./state";
diff --git a/app/components/issues/select/label.tsx b/app/components/issues/select/label.tsx
new file mode 100644
index 000000000..f5b023280
--- /dev/null
+++ b/app/components/issues/select/label.tsx
@@ -0,0 +1,217 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// headless ui
+import { Combobox, Transition } from "@headlessui/react";
+// icons
+import {
+  CheckIcon,
+  MagnifyingGlassIcon,
+  PlusIcon,
+  RectangleGroupIcon,
+  TagIcon,
+} from "@heroicons/react/24/outline";
+// services
+import issuesServices from "services/issues.service";
+// types
+import type { IIssueLabels } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import { IssueLabelsList } from "components/ui";
+
+type Props = {
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  value: string[];
+  onChange: (value: string[]) => void;
+  projectId: string;
+};
+
+export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
+  // states
+  const [query, setQuery] = useState("");
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: issueLabels } = useSWR<IIssueLabels[]>(
+    projectId ? PROJECT_ISSUE_LABELS(projectId) : null,
+    workspaceSlug && projectId
+      ? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId)
+      : null
+  );
+
+  const filteredOptions =
+    query === ""
+      ? issueLabels
+      : issueLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase()));
+
+  return (
+    <Combobox
+      as="div"
+      value={value}
+      onChange={(val) => onChange(val)}
+      className="relative flex-shrink-0"
+      multiple
+    >
+      {({ open }: any) => (
+        <>
+          <Combobox.Button
+            className={({ open }) =>
+              `flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200 
+              ${
+                open
+                  ? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
+                  : "hover:bg-brand-accent/5 "
+              }`
+            }
+          >
+            {value && value.length > 0 ? (
+              <span className="flex items-center justify-center gap-2 px-3 py-1 text-xs">
+                <IssueLabelsList
+                  labels={value.map((v) => issueLabels?.find((l) => l.id === v)?.color) ?? []}
+                  length={3}
+                  showLength={true}
+                />
+              </span>
+            ) : (
+              <span className="flex items-center justify-center gap-2 px-3  py-1.5 text-xs">
+                <TagIcon className="h-3 w-3 text-brand-secondary" />
+                <span className=" text-brand-secondary">Label</span>
+              </span>
+            )}
+          </Combobox.Button>
+
+          <Transition
+            show={open}
+            as={React.Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Combobox.Options
+              className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
+                bg-brand-surface-2 px-2 py-2 text-xs shadow-md focus:outline-none`}
+            >
+              <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-brand-surface-1 px-2">
+                <MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" />
+                <Combobox.Input
+                  className="w-full  bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
+                  onChange={(event) => setQuery(event.target.value)}
+                  placeholder="Search for label..."
+                  displayValue={(assigned: any) => assigned?.name}
+                />
+              </div>
+              <div className="py-1.5">
+                {issueLabels && filteredOptions ? (
+                  filteredOptions.length > 0 ? (
+                    filteredOptions.map((label) => {
+                      const children = issueLabels?.filter((l) => l.parent === label.id);
+
+                      if (children.length === 0) {
+                        if (!label.parent)
+                          return (
+                            <Combobox.Option
+                              key={label.id}
+                              className={({ active }) =>
+                                `${
+                                  active ? "bg-brand-surface-2" : ""
+                                } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
+                              }
+                              value={label.id}
+                            >
+                              {({ selected }) => (
+                                <div className="flex w-full justify-between gap-2 rounded">
+                                  <div className="flex items-center justify-start gap-2">
+                                    <span
+                                      className="h-3 w-3 flex-shrink-0 rounded-full"
+                                      style={{
+                                        backgroundColor:
+                                          label.color && label.color !== "" ? label.color : "#000",
+                                      }}
+                                    />
+                                    <span>{label.name}</span>
+                                  </div>
+                                  <div className="flex items-center justify-center rounded p-1">
+                                    <CheckIcon
+                                      className={`h-3 w-3 ${
+                                        selected ? "opacity-100" : "opacity-0"
+                                      }`}
+                                    />
+                                  </div>
+                                </div>
+                              )}
+                            </Combobox.Option>
+                          );
+                      } else
+                        return (
+                          <div className="border-y border-brand-base bg-brand-surface-2">
+                            <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-brand-base">
+                              <RectangleGroupIcon className="h-3 w-3" /> {label.name}
+                            </div>
+                            <div>
+                              {children.map((child) => (
+                                <Combobox.Option
+                                  key={child.id}
+                                  className={({ active }) =>
+                                    `${
+                                      active ? "bg-brand-surface-2" : ""
+                                    } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
+                                  }
+                                  value={child.id}
+                                >
+                                  {({ selected }) => (
+                                    <div className="flex w-full justify-between gap-2 rounded">
+                                      <div className="flex items-center justify-start gap-2">
+                                        <span
+                                          className="h-3 w-3 flex-shrink-0 rounded-full"
+                                          style={{
+                                            backgroundColor: child?.color ?? "black",
+                                          }}
+                                        />
+                                        <span>{child.name}</span>
+                                      </div>
+                                      <div className="flex items-center justify-center rounded p-1">
+                                        <CheckIcon
+                                          className={`h-3 w-3 ${
+                                            selected ? "opacity-100" : "opacity-0"
+                                          }`}
+                                        />
+                                      </div>
+                                    </div>
+                                  )}
+                                </Combobox.Option>
+                              ))}
+                            </div>
+                          </div>
+                        );
+                    })
+                  ) : (
+                    <p className="px-2 text-xs text-brand-secondary">No labels found</p>
+                  )
+                ) : (
+                  <p className="px-2 text-xs text-brand-secondary">Loading...</p>
+                )}
+                <button
+                  type="button"
+                  className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
+                  onClick={() => setIsOpen(true)}
+                >
+                  <span className="flex items-center justify-start gap-1">
+                    <PlusIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
+                    <span className="text-gray-600">Create New Label</span>
+                  </span>
+                </button>
+              </div>
+            </Combobox.Options>
+          </Transition>
+        </>
+      )}
+    </Combobox>
+  );
+};
diff --git a/app/components/issues/select/parent.tsx b/app/components/issues/select/parent.tsx
new file mode 100644
index 000000000..c04e89b92
--- /dev/null
+++ b/app/components/issues/select/parent.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { Controller, Control } from "react-hook-form";
+// components
+import { ParentIssuesListModal } from "components/issues";
+// types
+import type { IIssue } from "types";
+
+type Props = {
+  control: Control<IIssue, any>;
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  issues: IIssue[];
+};
+
+export const IssueParentSelect: React.FC<Props> = ({ control, isOpen, setIsOpen, issues }) => (
+  <Controller
+    control={control}
+    name="parent"
+    render={({ field: { onChange } }) => (
+      <ParentIssuesListModal
+        isOpen={isOpen}
+        handleClose={() => setIsOpen(false)}
+        onChange={onChange}
+        issues={issues}
+      />
+    )}
+  />
+);
diff --git a/app/components/issues/select/priority.tsx b/app/components/issues/select/priority.tsx
new file mode 100644
index 000000000..89e07b4e6
--- /dev/null
+++ b/app/components/issues/select/priority.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+// ui
+import { CustomSelect } from "components/ui";
+// icons
+import { getPriorityIcon } from "components/icons/priority-icon";
+// constants
+import { PRIORITIES } from "constants/project";
+
+type Props = {
+  value: string | null;
+  onChange: (value: string) => void;
+};
+
+export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
+  <CustomSelect
+    value={value}
+    label={
+      <div className="flex items-center justify-center gap-2 text-xs">
+        <span className="flex items-center">
+          {getPriorityIcon(value, `text-xs ${value ? "" : "text-brand-secondary"}`)}
+        </span>
+        <span className={`${value ? "text-gray-600" : "text-brand-secondary"} capitalize`}>
+          {value ?? "Priority"}
+        </span>
+      </div>
+    }
+    onChange={onChange}
+    noChevron
+  >
+    {PRIORITIES.map((priority) => (
+      <CustomSelect.Option key={priority} value={priority}>
+        <div className="flex w-full justify-between gap-2 rounded">
+          <div className="flex items-center justify-start gap-2">
+            <span>{getPriorityIcon(priority)}</span>
+            <span className="capitalize">{priority ?? "None"}</span>
+          </div>
+        </div>
+      </CustomSelect.Option>
+    ))}
+  </CustomSelect>
+);
diff --git a/app/components/issues/select/project.tsx b/app/components/issues/select/project.tsx
new file mode 100644
index 000000000..09ed5225c
--- /dev/null
+++ b/app/components/issues/select/project.tsx
@@ -0,0 +1,66 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// ui
+import { CustomSelect } from "components/ui";
+// icons
+import { ClipboardDocumentListIcon } from "@heroicons/react/24/outline";
+// services
+import projectService from "services/project.service";
+// fetch-keys
+import { PROJECTS_LIST } from "constants/fetch-keys";
+
+export interface IssueProjectSelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
+}
+
+export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({
+  value,
+  onChange,
+  setActiveProject,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // Fetching Projects List
+  const { data: projects } = useSWR(
+    workspaceSlug ? PROJECTS_LIST(workspaceSlug as string) : null,
+    () => (workspaceSlug ? projectService.getProjects(workspaceSlug as string) : null)
+  );
+
+  return (
+    <CustomSelect
+      value={value}
+      label={
+        <>
+          <ClipboardDocumentListIcon className="h-3 w-3" />
+          <span className="block truncate">
+            {projects?.find((i) => i.id === value)?.identifier ?? "Project"}
+          </span>
+        </>
+      }
+      onChange={(val: string) => {
+        onChange(val);
+        setActiveProject(val);
+      }}
+      noChevron
+    >
+      {projects ? (
+        projects.length > 0 ? (
+          projects.map((project) => (
+            <CustomSelect.Option key={project.id} value={project.id}>
+              <>{project.name}</>
+            </CustomSelect.Option>
+          ))
+        ) : (
+          <p className="text-gray-400">No projects found!</p>
+        )
+      ) : (
+        <div className="px-2 text-sm text-brand-secondary">Loading...</div>
+      )}
+    </CustomSelect>
+  );
+};
diff --git a/app/components/issues/select/state.tsx b/app/components/issues/select/state.tsx
new file mode 100644
index 000000000..1be797e0d
--- /dev/null
+++ b/app/components/issues/select/state.tsx
@@ -0,0 +1,83 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import stateService from "services/state.service";
+// ui
+import { CustomSearchSelect } from "components/ui";
+// icons
+import { PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+import { getStateGroupIcon } from "components/icons";
+// helpers
+import { getStatesList } from "helpers/state.helper";
+// fetch keys
+import { STATE_LIST } from "constants/fetch-keys";
+
+type Props = {
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  value: string;
+  onChange: (value: string) => void;
+  projectId: string;
+};
+
+export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
+  // states
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: stateGroups } = useSWR(
+    workspaceSlug && projectId ? STATE_LIST(projectId) : null,
+    workspaceSlug && projectId
+      ? () => stateService.getStates(workspaceSlug as string, projectId)
+      : null
+  );
+  const states = getStatesList(stateGroups ?? {});
+
+  const options = states?.map((state) => ({
+    value: state.id,
+    query: state.name,
+    content: (
+      <div className="flex items-center gap-2">
+        {getStateGroupIcon(state.group, "16", "16", state.color)}
+        {state.name}
+      </div>
+    ),
+  }));
+
+  const selectedOption = states?.find((s) => s.id === value);
+  const currentDefaultState = states.find((s) => s.default);
+
+  return (
+    <CustomSearchSelect
+      value={value}
+      onChange={onChange}
+      options={options}
+      label={
+        <div className="flex items-center gap-2 text-brand-secondary">
+          {selectedOption ? (
+            getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)
+          ) : currentDefaultState ? (
+            getStateGroupIcon(currentDefaultState.group, "16", "16", currentDefaultState.color)
+          ) : (
+            <Squares2X2Icon className="h-4 w-4" />
+          )}
+          {selectedOption?.name ? selectedOption.name : currentDefaultState?.name ?? "State"}
+        </div>
+      }
+      footerOption={
+        <button
+          type="button"
+          className="flex w-full select-none items-center gap-2 rounded px-1 py-1.5 text-xs text-brand-secondary hover:bg-brand-surface-2"
+          onClick={() => setIsOpen(true)}
+        >
+          <PlusIcon className="h-4 w-4" aria-hidden="true" />
+          Create New State
+        </button>
+      }
+      noChevron
+    />
+  );
+};
diff --git a/app/components/issues/sidebar-select/assignee.tsx b/app/components/issues/sidebar-select/assignee.tsx
new file mode 100644
index 000000000..b229ef4e4
--- /dev/null
+++ b/app/components/issues/sidebar-select/assignee.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import projectService from "services/project.service";
+// ui
+import { CustomSearchSelect } from "components/ui";
+import { AssigneesList, Avatar } from "components/ui/avatar";
+// icons
+import { UserGroupIcon } from "@heroicons/react/24/outline";
+// types
+import { UserAuth } from "types";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+type Props = {
+  value: string[];
+  onChange: (val: string[]) => void;
+  userAuth: UserAuth;
+};
+
+export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const options =
+    members?.map((member) => ({
+      value: member.member.id,
+      query:
+        (member.member.first_name && member.member.first_name !== ""
+          ? member.member.first_name
+          : member.member.email) +
+          " " +
+          member.member.last_name ?? "",
+      content: (
+        <div className="flex items-center gap-2">
+          <Avatar user={member.member} />
+          {member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name
+            : member.member.email}
+        </div>
+      ),
+    })) ?? [];
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  return (
+    <div className="flex flex-wrap items-center py-2">
+      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+        <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
+        <p>Assignees</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <CustomSearchSelect
+          value={value}
+          label={
+            <div className="flex items-center gap-2 text-brand-secondary">
+              {value && value.length > 0 && Array.isArray(value) ? (
+                <div className="-my-0.5 flex items-center justify-center gap-2">
+                  <AssigneesList userIds={value} length={3} showLength={false} />
+                  <span className="text-brand-base">{value.length} Assignees</span>
+                </div>
+              ) : (
+                "No assignees"
+              )}
+            </div>
+          }
+          options={options}
+          onChange={onChange}
+          position="right"
+          multiple
+          disabled={isNotAllowed}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/issues/sidebar-select/blocked.tsx b/app/components/issues/sidebar-select/blocked.tsx
new file mode 100644
index 000000000..3ff3c4c8d
--- /dev/null
+++ b/app/components/issues/sidebar-select/blocked.tsx
@@ -0,0 +1,301 @@
+import React, { useState } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// react-hook-form
+import { SubmitHandler, useForm, UseFormWatch } from "react-hook-form";
+// headless ui
+import { Combobox, Dialog, Transition } from "@headlessui/react";
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import issuesService from "services/issues.service";
+// ui
+import { PrimaryButton, SecondaryButton } from "components/ui";
+// icons
+import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { BlockedIcon, LayerDiagonalIcon } from "components/icons";
+// types
+import { IIssue, UserAuth } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
+
+type FormInput = {
+  blocked_issue_ids: string[];
+};
+
+type Props = {
+  submitChanges: (formData: Partial<IIssue>) => void;
+  issuesList: IIssue[];
+  watch: UseFormWatch<IIssue>;
+  userAuth: UserAuth;
+};
+
+export const SidebarBlockedSelect: React.FC<Props> = ({
+  submitChanges,
+  issuesList,
+  watch,
+  userAuth,
+}) => {
+  const [query, setQuery] = useState("");
+  const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: issues } = useSWR(
+    workspaceSlug && projectId
+      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
+      : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssues(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const {
+    handleSubmit,
+    reset,
+    watch: watchBlocked,
+    setValue,
+  } = useForm<FormInput>({
+    defaultValues: {
+      blocked_issue_ids: [],
+    },
+  });
+
+  const handleClose = () => {
+    setIsBlockedModalOpen(false);
+    reset();
+  };
+
+  const onSubmit: SubmitHandler<FormInput> = (data) => {
+    if (!data.blocked_issue_ids || data.blocked_issue_ids.length === 0) {
+      setToastAlert({
+        title: "Error",
+        type: "error",
+        message: "Please select atleast one issue",
+      });
+      return;
+    }
+
+    if (!Array.isArray(data.blocked_issue_ids)) data.blocked_issue_ids = [data.blocked_issue_ids];
+
+    const newBlocked = [...watch("blocked_list"), ...data.blocked_issue_ids];
+    submitChanges({ blocks_list: newBlocked });
+    handleClose();
+  };
+
+  const filteredIssues: IIssue[] =
+    query === ""
+      ? issuesList
+      : issuesList.filter(
+          (issue) =>
+            issue.name.toLowerCase().includes(query.toLowerCase()) ||
+            `${issue.project_detail.identifier}-${issue.sequence_id}`
+              .toLowerCase()
+              .includes(query.toLowerCase())
+        );
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  return (
+    <div className="flex flex-wrap items-start py-2">
+      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+        <BlockedIcon height={16} width={16} />
+        <p>Blocked by</p>
+      </div>
+      <div className="space-y-1 sm:basis-1/2">
+        <div className="flex flex-wrap gap-1">
+          {watch("blocked_list") && watch("blocked_list").length > 0
+            ? watch("blocked_list").map((issue) => (
+                <div
+                  key={issue}
+                  className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20"
+                >
+                  <Link
+                    href={`/${workspaceSlug}/projects/${projectId}/issues/${
+                      issues?.find((i) => i.id === issue)?.id
+                    }`}
+                  >
+                    <a className="flex items-center gap-1">
+                      <BlockedIcon height={10} width={10} />
+                      {`${issues?.find((i) => i.id === issue)?.project_detail?.identifier}-${
+                        issues?.find((i) => i.id === issue)?.sequence_id
+                      }`}
+                    </a>
+                  </Link>
+                  <button
+                    type="button"
+                    className="opacity-0 duration-300 group-hover:opacity-100"
+                    onClick={() => {
+                      const updatedBlocked: string[] = watch("blocked_list").filter(
+                        (i) => i !== issue
+                      );
+                      submitChanges({
+                        blocks_list: updatedBlocked,
+                      });
+                    }}
+                  >
+                    <XMarkIcon className="h-2 w-2" />
+                  </button>
+                </div>
+              ))
+            : null}
+        </div>
+        <Transition.Root
+          show={isBlockedModalOpen}
+          as={React.Fragment}
+          afterLeave={() => setQuery("")}
+          appear
+        >
+          <Dialog as="div" className="relative z-20" onClose={handleClose}>
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
+            </Transition.Child>
+
+            <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
+              <Transition.Child
+                as={React.Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
+                  <form>
+                    <Combobox
+                      onChange={(val: string) => {
+                        const selectedIssues = watchBlocked("blocked_issue_ids");
+                        if (selectedIssues.includes(val))
+                          setValue(
+                            "blocked_issue_ids",
+                            selectedIssues.filter((i) => i !== val)
+                          );
+                        else setValue("blocked_issue_ids", [...selectedIssues, val]);
+                      }}
+                    >
+                      <div className="relative m-1">
+                        <MagnifyingGlassIcon
+                          className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
+                          aria-hidden="true"
+                        />
+                        <input
+                          type="text"
+                          className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                          placeholder="Search..."
+                          onChange={(e) => setQuery(e.target.value)}
+                        />
+                      </div>
+
+                      <Combobox.Options
+                        static
+                        className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
+                      >
+                        {filteredIssues.length > 0 ? (
+                          <li className="p-2">
+                            {query === "" && (
+                              <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
+                                Select blocked issues
+                              </h2>
+                            )}
+                            <ul className="text-sm text-gray-700">
+                              {filteredIssues.map((issue) => {
+                                if (
+                                  !watch("blocked_list").includes(issue.id) &&
+                                  !watch("blockers_list").includes(issue.id)
+                                ) {
+                                  return (
+                                    <Combobox.Option
+                                      key={issue.id}
+                                      as="div"
+                                      value={issue.id}
+                                      className={({ active }) =>
+                                        `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
+                                          active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
+                                        }`
+                                      }
+                                    >
+                                      <div className="flex items-center gap-2">
+                                        <input
+                                          type="checkbox"
+                                          checked={watchBlocked("blocked_issue_ids").includes(
+                                            issue.id
+                                          )}
+                                          readOnly
+                                        />
+                                        <span
+                                          className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                                          style={{
+                                            backgroundColor: issue.state_detail.color,
+                                          }}
+                                        />
+                                        <span className="flex-shrink-0 text-xs text-brand-secondary">
+                                          {
+                                            issues?.find((i) => i.id === issue.id)?.project_detail
+                                              ?.identifier
+                                          }
+                                          -{issue.sequence_id}
+                                        </span>
+                                        <span>{issue.name}</span>
+                                      </div>
+                                    </Combobox.Option>
+                                  );
+                                }
+                              })}
+                            </ul>
+                          </li>
+                        ) : (
+                          <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
+                            <LayerDiagonalIcon height="56" width="56" />
+                            <h3 className="text-brand-secondary">
+                              No issues found. Create a new issue with{" "}
+                              <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
+                            </h3>
+                          </div>
+                        )}
+                      </Combobox.Options>
+                    </Combobox>
+
+                    {filteredIssues.length > 0 && (
+                      <div className="flex items-center justify-end gap-2 p-3">
+                        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                        <PrimaryButton onClick={handleSubmit(onSubmit)}>
+                          Add selected issues
+                        </PrimaryButton>
+                      </div>
+                    )}
+                  </form>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </Dialog>
+        </Transition.Root>
+        <button
+          type="button"
+          className={`flex w-full text-brand-secondary ${
+            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
+          } items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
+          onClick={() => setIsBlockedModalOpen(true)}
+          disabled={isNotAllowed}
+        >
+          Select issues
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/issues/sidebar-select/blocker.tsx b/app/components/issues/sidebar-select/blocker.tsx
new file mode 100644
index 000000000..b35da8a84
--- /dev/null
+++ b/app/components/issues/sidebar-select/blocker.tsx
@@ -0,0 +1,298 @@
+import React, { useState } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// react-hook-form
+import { SubmitHandler, useForm, UseFormWatch } from "react-hook-form";
+// headless ui
+import { Combobox, Dialog, Transition } from "@headlessui/react";
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import issuesServices from "services/issues.service";
+// ui
+import { PrimaryButton, SecondaryButton } from "components/ui";
+// icons
+import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { BlockerIcon, LayerDiagonalIcon } from "components/icons";
+// types
+import { IIssue, UserAuth } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
+
+type FormInput = {
+  blocker_issue_ids: string[];
+};
+
+type Props = {
+  submitChanges: (formData: Partial<IIssue>) => void;
+  issuesList: IIssue[];
+  watch: UseFormWatch<IIssue>;
+  userAuth: UserAuth;
+};
+
+export const SidebarBlockerSelect: React.FC<Props> = ({
+  submitChanges,
+  issuesList,
+  watch,
+  userAuth,
+}) => {
+  const [query, setQuery] = useState("");
+  const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: issues } = useSWR(
+    workspaceSlug && projectId
+      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
+      : null,
+    workspaceSlug && projectId
+      ? () => issuesServices.getIssues(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const {
+    handleSubmit,
+    reset,
+    watch: watchBlocker,
+    setValue,
+  } = useForm<FormInput>({
+    defaultValues: {
+      blocker_issue_ids: [],
+    },
+  });
+
+  const handleClose = () => {
+    setIsBlockerModalOpen(false);
+    reset();
+  };
+
+  const onSubmit: SubmitHandler<FormInput> = (data) => {
+    if (!data.blocker_issue_ids || data.blocker_issue_ids.length === 0) {
+      setToastAlert({
+        title: "Error",
+        type: "error",
+        message: "Please select atleast one issue",
+      });
+      return;
+    }
+
+    if (!Array.isArray(data.blocker_issue_ids)) data.blocker_issue_ids = [data.blocker_issue_ids];
+
+    const newBlockers = [...watch("blockers_list"), ...data.blocker_issue_ids];
+    submitChanges({ blockers_list: newBlockers });
+    handleClose();
+  };
+
+  const filteredIssues: IIssue[] =
+    query === ""
+      ? issuesList
+      : issuesList.filter(
+          (issue) =>
+            issue.name.toLowerCase().includes(query.toLowerCase()) ||
+            `${issue.project_detail.identifier}-${issue.sequence_id}`
+              .toLowerCase()
+              .includes(query.toLowerCase())
+        );
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  return (
+    <div className="flex flex-wrap items-start py-2">
+      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+        <BlockerIcon height={16} width={16} />
+        <p>Blocking</p>
+      </div>
+      <div className="space-y-1 sm:basis-1/2">
+        <div className="flex flex-wrap gap-1">
+          {watch("blockers_list") && watch("blockers_list").length > 0
+            ? watch("blockers_list").map((issue) => (
+                <div
+                  key={issue}
+                  className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
+                >
+                  <Link
+                    href={`/${workspaceSlug}/projects/${projectId}/issues/${
+                      issues?.find((i) => i.id === issue)?.id
+                    }`}
+                  >
+                    <a className="flex items-center gap-1">
+                      <BlockerIcon height={10} width={10} />
+                      {`${issues?.find((i) => i.id === issue)?.project_detail?.identifier}-${
+                        issues?.find((i) => i.id === issue)?.sequence_id
+                      }`}
+                    </a>
+                  </Link>
+                  <button
+                    type="button"
+                    className="opacity-0 duration-300 group-hover:opacity-100"
+                    onClick={() => {
+                      const updatedBlockers: string[] = watch("blockers_list").filter(
+                        (i) => i !== issue
+                      );
+                      submitChanges({
+                        blockers_list: updatedBlockers,
+                      });
+                    }}
+                  >
+                    <XMarkIcon className="h-2 w-2" />
+                  </button>
+                </div>
+              ))
+            : null}
+        </div>
+        <Transition.Root
+          show={isBlockerModalOpen}
+          as={React.Fragment}
+          afterLeave={() => setQuery("")}
+          appear
+        >
+          <Dialog as="div" className="relative z-20" onClose={handleClose}>
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
+            </Transition.Child>
+
+            <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
+              <Transition.Child
+                as={React.Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
+                  <Combobox
+                    onChange={(val: string) => {
+                      const selectedIssues = watchBlocker("blocker_issue_ids");
+                      if (selectedIssues.includes(val))
+                        setValue(
+                          "blocker_issue_ids",
+                          selectedIssues.filter((i) => i !== val)
+                        );
+                      else setValue("blocker_issue_ids", [...selectedIssues, val]);
+                    }}
+                  >
+                    <div className="relative m-1">
+                      <MagnifyingGlassIcon
+                        className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
+                        aria-hidden="true"
+                      />
+                      <input
+                        type="text"
+                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                        placeholder="Search..."
+                        onChange={(e) => setQuery(e.target.value)}
+                      />
+                    </div>
+
+                    <Combobox.Options
+                      static
+                      className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
+                    >
+                      {filteredIssues.length > 0 ? (
+                        <li className="p-2">
+                          {query === "" && (
+                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
+                              Select blocker issues
+                            </h2>
+                          )}
+                          <ul className="text-sm text-gray-700">
+                            {filteredIssues.map((issue) => {
+                              if (
+                                !watch("blockers_list").includes(issue.id) &&
+                                !watch("blocked_list").includes(issue.id)
+                              )
+                                return (
+                                  <Combobox.Option
+                                    key={issue.id}
+                                    as="div"
+                                    value={issue.id}
+                                    className={({ active }) =>
+                                      `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
+                                        active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
+                                      }`
+                                    }
+                                  >
+                                    <div className="flex items-center gap-2">
+                                      <input
+                                        type="checkbox"
+                                        checked={watchBlocker("blocker_issue_ids").includes(
+                                          issue.id
+                                        )}
+                                        readOnly
+                                      />
+                                      <span
+                                        className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                                        style={{
+                                          backgroundColor: issue.state_detail.color,
+                                        }}
+                                      />
+                                      <span className="flex-shrink-0 text-xs text-brand-secondary">
+                                        {
+                                          issues?.find((i) => i.id === issue.id)?.project_detail
+                                            ?.identifier
+                                        }
+                                        -{issue.sequence_id}
+                                      </span>
+                                      <span className="text-brand-muted-1">{issue.name}</span>
+                                    </div>
+                                  </Combobox.Option>
+                                );
+                            })}
+                          </ul>
+                        </li>
+                      ) : (
+                        <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
+                          <LayerDiagonalIcon height="56" width="56" />
+                          <h3 className="text-brand-secondary">
+                            No issues found. Create a new issue with{" "}
+                            <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
+                          </h3>
+                        </div>
+                      )}
+                    </Combobox.Options>
+                  </Combobox>
+
+                  {filteredIssues.length > 0 && (
+                    <div className="flex items-center justify-end gap-2 p-3">
+                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                      <PrimaryButton onClick={handleSubmit(onSubmit)}>
+                        Add selected issues
+                      </PrimaryButton>
+                    </div>
+                  )}
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </Dialog>
+        </Transition.Root>
+        <button
+          type="button"
+          className={`flex w-full text-brand-secondary ${
+            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
+          } items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
+          onClick={() => setIsBlockerModalOpen(true)}
+          disabled={isNotAllowed}
+        >
+          Select issues
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/issues/sidebar-select/cycle.tsx b/app/components/issues/sidebar-select/cycle.tsx
new file mode 100644
index 000000000..c412c9fda
--- /dev/null
+++ b/app/components/issues/sidebar-select/cycle.tsx
@@ -0,0 +1,114 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import issuesService from "services/issues.service";
+import cyclesService from "services/cycles.service";
+// ui
+import { Spinner, CustomSelect, Tooltip } from "components/ui";
+// helper
+import { truncateText } from "helpers/string.helper";
+// icons
+import { ContrastIcon } from "components/icons";
+// types
+import { ICycle, IIssue, UserAuth } from "types";
+// fetch-keys
+import { CYCLE_ISSUES, CYCLE_INCOMPLETE_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
+
+type Props = {
+  issueDetail: IIssue | undefined;
+  handleCycleChange: (cycle: ICycle) => void;
+  userAuth: UserAuth;
+};
+
+export const SidebarCycleSelect: React.FC<Props> = ({
+  issueDetail,
+  handleCycleChange,
+  userAuth,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { data: incompleteCycles } = useSWR(
+    workspaceSlug && projectId ? CYCLE_INCOMPLETE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => cyclesService.getIncompleteCycles(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const removeIssueFromCycle = (bridgeId: string, cycleId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    issuesService
+      .removeIssueFromCycle(workspaceSlug as string, projectId as string, cycleId, bridgeId)
+      .then((res) => {
+        mutate(ISSUE_DETAILS(issueId as string));
+
+        mutate(CYCLE_ISSUES(cycleId));
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  };
+
+  const issueCycle = issueDetail?.issue_cycle;
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  return (
+    <div className="flex flex-wrap items-center py-2">
+      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+        <ContrastIcon className="h-4 w-4 flex-shrink-0" />
+        <p>Cycle</p>
+      </div>
+      <div className="space-y-1 sm:basis-1/2">
+        <CustomSelect
+          label={
+            <Tooltip
+              position="left"
+              tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : "No cycle"}`}
+            >
+              <span className="w-full max-w-[125px] truncate text-left sm:block">
+                <span className={`${issueCycle ? "text-brand-base" : "text-brand-secondary"}`}>
+                  {issueCycle ? truncateText(issueCycle.cycle_detail.name, 15) : "No cycle"}
+                </span>
+              </span>
+            </Tooltip>
+          }
+          value={issueCycle?.cycle_detail.id}
+          onChange={(value: any) => {
+            !value
+              ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
+              : handleCycleChange(incompleteCycles?.find((c) => c.id === value) as ICycle);
+          }}
+          width="w-full"
+          position="right"
+          maxHeight="rg"
+          disabled={isNotAllowed}
+        >
+          {incompleteCycles ? (
+            incompleteCycles.length > 0 ? (
+              <>
+                {incompleteCycles.map((option) => (
+                  <CustomSelect.Option key={option.id} value={option.id}>
+                    <Tooltip position="left-bottom" tooltipContent={option.name}>
+                      <span className="w-full truncate ">{truncateText(option.name, 15)}</span>
+                    </Tooltip>
+                  </CustomSelect.Option>
+                ))}
+                <CustomSelect.Option value={null}>None</CustomSelect.Option>
+              </>
+            ) : (
+              <div className="text-center">No cycles found</div>
+            )
+          ) : (
+            <Spinner />
+          )}
+        </CustomSelect>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/issues/sidebar-select/estimate.tsx b/app/components/issues/sidebar-select/estimate.tsx
new file mode 100644
index 000000000..cfe4bdf75
--- /dev/null
+++ b/app/components/issues/sidebar-select/estimate.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+
+// hooks
+import useEstimateOption from "hooks/use-estimate-option";
+// ui
+import { CustomSelect } from "components/ui";
+// icons
+import { PlayIcon } from "@heroicons/react/24/outline";
+// types
+import { UserAuth } from "types";
+
+type Props = {
+  value: number | null;
+  onChange: (val: number | null) => void;
+  userAuth: UserAuth;
+};
+
+export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  const { isEstimateActive, estimatePoints } = useEstimateOption();
+
+  if (!isEstimateActive) return null;
+
+  return (
+    <div className="flex flex-wrap items-center py-2">
+      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+        <PlayIcon className="h-4 w-4 flex-shrink-0 -rotate-90" />
+        <p>Estimate</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <CustomSelect
+          value={value}
+          label={
+            <div className="flex items-center gap-2 text-xs">
+              <PlayIcon
+                className={`h-4 w-4 -rotate-90 ${
+                  value !== null ? "text-brand-base" : "text-brand-secondary"
+                }`}
+              />
+              {estimatePoints?.find((e) => e.key === value)?.value ?? (
+                <span className="text-brand-secondary">No estimates</span>
+              )}
+            </div>
+          }
+          onChange={onChange}
+          position="right"
+          width="w-full"
+          disabled={isNotAllowed}
+        >
+          <CustomSelect.Option value={null}>
+            <>
+              <span>
+                <PlayIcon className="h-4 w-4 -rotate-90" />
+              </span>
+              None
+            </>
+          </CustomSelect.Option>
+          {estimatePoints &&
+            estimatePoints.map((point) => (
+              <CustomSelect.Option key={point.key} value={point.key}>
+                <>
+                  <span>
+                    <PlayIcon className="h-4 w-4 -rotate-90" />
+                  </span>
+                  {point.value}
+                </>
+              </CustomSelect.Option>
+            ))}
+        </CustomSelect>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/issues/sidebar-select/index.ts b/app/components/issues/sidebar-select/index.ts
new file mode 100644
index 000000000..1ec2c6ee0
--- /dev/null
+++ b/app/components/issues/sidebar-select/index.ts
@@ -0,0 +1,9 @@
+export * from "./assignee";
+export * from "./blocked";
+export * from "./blocker";
+export * from "./cycle";
+export * from "./module";
+export * from "./parent";
+export * from "./priority";
+export * from "./state";
+export * from "./estimate";
diff --git a/app/components/issues/sidebar-select/module.tsx b/app/components/issues/sidebar-select/module.tsx
new file mode 100644
index 000000000..282ccb533
--- /dev/null
+++ b/app/components/issues/sidebar-select/module.tsx
@@ -0,0 +1,120 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import modulesService from "services/modules.service";
+// ui
+import { Spinner, CustomSelect, Tooltip } from "components/ui";
+// helper
+import { truncateText } from "helpers/string.helper";
+// icons
+import { RectangleGroupIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssue, IModule, UserAuth } from "types";
+// fetch-keys
+import { ISSUE_DETAILS, MODULE_ISSUES, MODULE_LIST } from "constants/fetch-keys";
+
+type Props = {
+  issueDetail: IIssue | undefined;
+  handleModuleChange: (module: IModule) => void;
+  userAuth: UserAuth;
+};
+
+export const SidebarModuleSelect: React.FC<Props> = ({
+  issueDetail,
+  handleModuleChange,
+  userAuth,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { data: modules } = useSWR(
+    workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => modulesService.getModules(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const removeIssueFromModule = (bridgeId: string, moduleId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    modulesService
+      .removeIssueFromModule(workspaceSlug as string, projectId as string, moduleId, bridgeId)
+      .then((res) => {
+        mutate(ISSUE_DETAILS(issueId as string));
+
+        mutate(MODULE_ISSUES(moduleId));
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  };
+
+  const issueModule = issueDetail?.issue_module;
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  return (
+    <div className="flex flex-wrap items-center py-2">
+      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+        <RectangleGroupIcon className="h-4 w-4 flex-shrink-0" />
+        <p>Module</p>
+      </div>
+      <div className="space-y-1 sm:basis-1/2">
+        <CustomSelect
+          label={
+            <Tooltip
+              position="left"
+              tooltipContent={`${
+                modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"
+              }`}
+            >
+              <span className="w-full max-w-[125px] truncate text-left sm:block">
+                <span className={`${issueModule ? "text-brand-base" : "text-brand-secondary"}`}>
+                  {truncateText(
+                    `${modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}`,
+                    15
+                  )}
+                </span>
+              </span>
+            </Tooltip>
+          }
+          value={issueModule?.module_detail?.id}
+          onChange={(value: any) => {
+            !value
+              ? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
+              : handleModuleChange(modules?.find((m) => m.id === value) as IModule);
+          }}
+          width="w-full"
+          position="right"
+          maxHeight="rg"
+          disabled={isNotAllowed}
+        >
+          {modules ? (
+            modules.length > 0 ? (
+              <>
+                {modules.map((option) => (
+                  <CustomSelect.Option key={option.id} value={option.id}>
+                    <Tooltip position="left-bottom" tooltipContent={option.name}>
+                      <span className="w-full max-w-[125px] truncate">
+                        {truncateText(option.name, 15)}
+                      </span>
+                    </Tooltip>
+                  </CustomSelect.Option>
+                ))}
+                <CustomSelect.Option value={null}>None</CustomSelect.Option>
+              </>
+            ) : (
+              <div className="text-center">No modules found</div>
+            )
+          ) : (
+            <Spinner />
+          )}
+        </CustomSelect>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/issues/sidebar-select/parent.tsx b/app/components/issues/sidebar-select/parent.tsx
new file mode 100644
index 000000000..36c4a57cc
--- /dev/null
+++ b/app/components/issues/sidebar-select/parent.tsx
@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+import { Control, Controller, UseFormWatch } from "react-hook-form";
+// fetch keys
+import { UserIcon } from "@heroicons/react/24/outline";
+// services
+import issuesServices from "services/issues.service";
+// components
+import { ParentIssuesListModal } from "components/issues";
+// icons
+// types
+import { IIssue, UserAuth } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
+
+type Props = {
+  control: Control<IIssue, any>;
+  submitChanges: (formData: Partial<IIssue>) => void;
+  issuesList: IIssue[];
+  customDisplay: JSX.Element;
+  watch: UseFormWatch<IIssue>;
+  userAuth: UserAuth;
+};
+
+export const SidebarParentSelect: React.FC<Props> = ({
+  control,
+  submitChanges,
+  issuesList,
+  customDisplay,
+  watch,
+  userAuth,
+}) => {
+  const [isParentModalOpen, setIsParentModalOpen] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: issues } = useSWR(
+    workspaceSlug && projectId
+      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
+      : null,
+    workspaceSlug && projectId
+      ? () => issuesServices.getIssues(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  return (
+    <div className="flex flex-wrap items-center py-2">
+      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+        <UserIcon className="h-4 w-4 flex-shrink-0" />
+        <p>Parent</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <Controller
+          control={control}
+          name="parent"
+          render={({ field: { value, onChange } }) => (
+            <ParentIssuesListModal
+              isOpen={isParentModalOpen}
+              handleClose={() => setIsParentModalOpen(false)}
+              onChange={(val) => {
+                submitChanges({ parent: val });
+                onChange(val);
+              }}
+              issues={issuesList}
+              title="Select Parent"
+              value={value}
+              customDisplay={customDisplay}
+            />
+          )}
+        />
+        <button
+          type="button"
+          className={`flex w-full ${
+            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
+          } items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
+          onClick={() => setIsParentModalOpen(true)}
+          disabled={isNotAllowed}
+        >
+          {watch("parent") && watch("parent") !== ""
+            ? `${issues?.find((i) => i.id === watch("parent"))?.project_detail?.identifier}-${
+                issues?.find((i) => i.id === watch("parent"))?.sequence_id
+              }`
+            : "Select issue"}
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/issues/sidebar-select/priority.tsx b/app/components/issues/sidebar-select/priority.tsx
new file mode 100644
index 000000000..70a23090c
--- /dev/null
+++ b/app/components/issues/sidebar-select/priority.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+
+// ui
+import { CustomSelect } from "components/ui";
+// icons
+import { ChartBarIcon } from "@heroicons/react/24/outline";
+import { getPriorityIcon } from "components/icons/priority-icon";
+// types
+import { UserAuth } from "types";
+// constants
+import { PRIORITIES } from "constants/project";
+
+type Props = {
+  value: string | null;
+  onChange: (val: string) => void;
+  userAuth: UserAuth;
+};
+
+export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  return (
+    <div className="flex flex-wrap items-center py-2">
+      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+        <ChartBarIcon className="h-4 w-4 flex-shrink-0" />
+        <p>Priority</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <CustomSelect
+          label={
+            <div className="flex items-center gap-2 text-left capitalize">
+              <span className={`${value ? "text-brand-base" : "text-brand-secondary"}`}>
+                {getPriorityIcon(value ?? "None", "text-sm")}
+              </span>
+              <span className={`${value ? "text-brand-base" : "text-brand-secondary"}`}>
+                {value ?? "None"}
+              </span>
+            </div>
+          }
+          value={value}
+          onChange={onChange}
+          width="w-full"
+          position="right"
+          disabled={isNotAllowed}
+        >
+          {PRIORITIES.map((option) => (
+            <CustomSelect.Option key={option} value={option} className="capitalize">
+              <>
+                {getPriorityIcon(option, "text-sm")}
+                {option ?? "None"}
+              </>
+            </CustomSelect.Option>
+          ))}
+        </CustomSelect>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/issues/sidebar-select/state.tsx b/app/components/issues/sidebar-select/state.tsx
new file mode 100644
index 000000000..434b4837d
--- /dev/null
+++ b/app/components/issues/sidebar-select/state.tsx
@@ -0,0 +1,89 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import stateService from "services/state.service";
+// ui
+import { Spinner, CustomSelect } from "components/ui";
+// icons
+import { Squares2X2Icon } from "@heroicons/react/24/outline";
+import { getStateGroupIcon } from "components/icons";
+// helpers
+import { getStatesList } from "helpers/state.helper";
+import { addSpaceIfCamelCase } from "helpers/string.helper";
+// types
+import { UserAuth } from "types";
+// constants
+import { STATE_LIST } from "constants/fetch-keys";
+
+type Props = {
+  value: string;
+  onChange: (val: string) => void;
+  userAuth: UserAuth;
+};
+
+export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: stateGroups } = useSWR(
+    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
+      : null
+  );
+  const states = getStatesList(stateGroups ?? {});
+
+  const selectedState = states?.find((s) => s.id === value);
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  return (
+    <div className="flex flex-wrap items-center py-2">
+      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+        <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
+        <p>State</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <CustomSelect
+          label={
+            <div className="flex items-center gap-2 text-left text-brand-base">
+              {getStateGroupIcon(
+                selectedState?.group ?? "backlog",
+                "16",
+                "16",
+                selectedState?.color ?? ""
+              )}
+              {addSpaceIfCamelCase(selectedState?.name ?? "")}
+            </div>
+          }
+          value={value}
+          onChange={onChange}
+          width="w-full"
+          position="right"
+          disabled={isNotAllowed}
+        >
+          {states ? (
+            states.length > 0 ? (
+              states.map((state) => (
+                <CustomSelect.Option key={state.id} value={state.id}>
+                  <>
+                    {getStateGroupIcon(state.group, "16", "16", state.color)}
+                    {state.name}
+                  </>
+                </CustomSelect.Option>
+              ))
+            ) : (
+              <div className="text-center">No states found</div>
+            )
+          ) : (
+            <Spinner />
+          )}
+        </CustomSelect>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/issues/sidebar.tsx b/app/components/issues/sidebar.tsx
new file mode 100644
index 000000000..963581b48
--- /dev/null
+++ b/app/components/issues/sidebar.tsx
@@ -0,0 +1,654 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// react-hook-form
+import { useForm, Controller, UseFormWatch, Control } from "react-hook-form";
+// react-color
+import { TwitterPicker } from "react-color";
+// headless ui
+import { Popover, Listbox, Transition } from "@headlessui/react";
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import issuesService from "services/issues.service";
+import modulesService from "services/modules.service";
+// contexts
+import { useProjectMyMembership } from "contexts/project-member.context";
+// components
+import { LinkModal, LinksList } from "components/core";
+import {
+  DeleteIssueModal,
+  SidebarAssigneeSelect,
+  SidebarBlockedSelect,
+  SidebarBlockerSelect,
+  SidebarCycleSelect,
+  SidebarModuleSelect,
+  SidebarParentSelect,
+  SidebarPrioritySelect,
+  SidebarStateSelect,
+  SidebarEstimateSelect,
+} from "components/issues";
+// ui
+import { Input, Spinner, CustomDatePicker } from "components/ui";
+// icons
+import {
+  TagIcon,
+  ChevronDownIcon,
+  LinkIcon,
+  CalendarDaysIcon,
+  TrashIcon,
+  PlusIcon,
+  XMarkIcon,
+  RectangleGroupIcon,
+} from "@heroicons/react/24/outline";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import type { ICycle, IIssue, IIssueLabels, IIssueLink, IModule } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
+
+type Props = {
+  control: Control<IIssue, any>;
+  submitChanges: (formData: Partial<IIssue>) => void;
+  issueDetail: IIssue | undefined;
+  watch: UseFormWatch<IIssue>;
+};
+
+const defaultValues: Partial<IIssueLabels> = {
+  name: "",
+  color: "#ff0000",
+};
+
+export const IssueDetailsSidebar: React.FC<Props> = ({
+  control,
+  submitChanges,
+  issueDetail,
+  watch: watchIssue,
+}) => {
+  const [createLabelForm, setCreateLabelForm] = useState(false);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [linkModal, setLinkModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { memberRole } = useProjectMyMembership();
+
+  const { setToastAlert } = useToast();
+
+  const { data: issues } = useSWR(
+    workspaceSlug && projectId
+      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
+      : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssues(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: issueLabels, mutate: issueLabelMutate } = useSWR<IIssueLabels[]>(
+    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const {
+    register,
+    handleSubmit,
+    formState: { isSubmitting },
+    reset,
+    watch,
+    control: controlLabel,
+  } = useForm({
+    defaultValues,
+  });
+
+  const handleNewLabel = (formData: any) => {
+    if (!workspaceSlug || !projectId || isSubmitting) return;
+    issuesService
+      .createIssueLabel(workspaceSlug as string, projectId as string, formData)
+      .then((res) => {
+        reset(defaultValues);
+        issueLabelMutate((prevData) => [...(prevData ?? []), res], false);
+        submitChanges({ labels_list: [...(issueDetail?.labels ?? []), res.id] });
+        setCreateLabelForm(false);
+      });
+  };
+
+  const handleCycleChange = useCallback(
+    (cycleDetail: ICycle) => {
+      if (!workspaceSlug || !projectId || !issueDetail) return;
+
+      issuesService
+        .addIssueToCycle(workspaceSlug as string, projectId as string, cycleDetail.id, {
+          issues: [issueDetail.id],
+        })
+        .then((res) => {
+          mutate(ISSUE_DETAILS(issueId as string));
+        });
+    },
+    [workspaceSlug, projectId, issueId, issueDetail]
+  );
+
+  const handleModuleChange = useCallback(
+    (moduleDetail: IModule) => {
+      if (!workspaceSlug || !projectId || !issueDetail) return;
+
+      modulesService
+        .addIssuesToModule(workspaceSlug as string, projectId as string, moduleDetail.id, {
+          issues: [issueDetail.id],
+        })
+        .then((res) => {
+          mutate(ISSUE_DETAILS(issueId as string));
+        });
+    },
+    [workspaceSlug, projectId, issueId, issueDetail]
+  );
+
+  const handleCreateLink = async (formData: IIssueLink) => {
+    if (!workspaceSlug || !projectId || !issueDetail) return;
+
+    const payload = { metadata: {}, ...formData };
+
+    await issuesService
+      .createIssueLink(workspaceSlug as string, projectId as string, issueDetail.id, payload)
+      .then(() => mutate(ISSUE_DETAILS(issueDetail.id)))
+      .catch((err) => {
+        if (err.status === 400)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "This URL already exists for this issue.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Something went wrong. Please try again.",
+          });
+      });
+  };
+
+  const handleDeleteLink = async (linkId: string) => {
+    if (!workspaceSlug || !projectId || !issueDetail) return;
+
+    const updatedLinks = issueDetail.issue_link.filter((l) => l.id !== linkId);
+
+    mutate<IIssue>(
+      ISSUE_DETAILS(issueDetail.id),
+      (prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }),
+      false
+    );
+
+    await issuesService
+      .deleteIssueLink(workspaceSlug as string, projectId as string, issueDetail.id, linkId)
+      .then((res) => {
+        mutate(ISSUE_DETAILS(issueDetail.id));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issueDetail?.id}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
+    });
+  };
+
+  useEffect(() => {
+    if (!createLabelForm) return;
+
+    reset();
+  }, [createLabelForm, reset]);
+
+  const isNotAllowed = memberRole.isGuest || memberRole.isViewer;
+
+  return (
+    <>
+      <LinkModal
+        isOpen={linkModal}
+        handleClose={() => setLinkModal(false)}
+        onFormSubmit={handleCreateLink}
+      />
+      <DeleteIssueModal
+        handleClose={() => setDeleteIssueModal(false)}
+        isOpen={deleteIssueModal}
+        data={issueDetail ?? null}
+      />
+      <div className="sticky top-5 w-full divide-y-2 divide-brand-base">
+        <div className="flex items-center justify-between pb-3">
+          <h4 className="text-sm font-medium">
+            {issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
+          </h4>
+          <div className="flex flex-wrap items-center gap-2">
+            <button
+              type="button"
+              className="rounded-md border border-brand-base p-2 shadow-sm duration-300 hover:bg-brand-surface-1 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent"
+              onClick={handleCopyText}
+            >
+              <LinkIcon className="h-3.5 w-3.5" />
+            </button>
+            {!isNotAllowed && (
+              <button
+                type="button"
+                className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-500/20 focus:outline-none"
+                onClick={() => setDeleteIssueModal(true)}
+              >
+                <TrashIcon className="h-3.5 w-3.5" />
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="divide-y-2 divide-brand-base">
+          <div className="py-1">
+            <Controller
+              control={control}
+              name="state"
+              render={({ field: { value } }) => (
+                <SidebarStateSelect
+                  value={value}
+                  onChange={(val: string) => submitChanges({ state: val })}
+                  userAuth={memberRole}
+                />
+              )}
+            />
+            <Controller
+              control={control}
+              name="assignees_list"
+              render={({ field: { value } }) => (
+                <SidebarAssigneeSelect
+                  value={value}
+                  onChange={(val: string[]) => submitChanges({ assignees_list: val })}
+                  userAuth={memberRole}
+                />
+              )}
+            />
+            <Controller
+              control={control}
+              name="priority"
+              render={({ field: { value } }) => (
+                <SidebarPrioritySelect
+                  value={value}
+                  onChange={(val: string) => submitChanges({ priority: val })}
+                  userAuth={memberRole}
+                />
+              )}
+            />
+            <Controller
+              control={control}
+              name="estimate_point"
+              render={({ field: { value } }) => (
+                <SidebarEstimateSelect
+                  value={value}
+                  onChange={(val: number | null) => submitChanges({ estimate_point: val })}
+                  userAuth={memberRole}
+                />
+              )}
+            />
+          </div>
+          <div className="py-1">
+            <SidebarParentSelect
+              control={control}
+              submitChanges={submitChanges}
+              issuesList={
+                issues?.filter(
+                  (i) =>
+                    i.id !== issueDetail?.id &&
+                    i.id !== issueDetail?.parent &&
+                    i.parent !== issueDetail?.id
+                ) ?? []
+              }
+              customDisplay={
+                issueDetail?.parent_detail ? (
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 rounded bg-brand-surface-1 px-3 py-2 text-xs"
+                    onClick={() => submitChanges({ parent: null })}
+                  >
+                    {issueDetail.parent_detail?.name}
+                    <XMarkIcon className="h-3 w-3" />
+                  </button>
+                ) : (
+                  <div className="inline-block rounded bg-brand-surface-1 px-3 py-2 text-xs">
+                    No parent selected
+                  </div>
+                )
+              }
+              watch={watchIssue}
+              userAuth={memberRole}
+            />
+            <SidebarBlockerSelect
+              submitChanges={submitChanges}
+              issuesList={issues?.filter((i) => i.id !== issueDetail?.id) ?? []}
+              watch={watchIssue}
+              userAuth={memberRole}
+            />
+            <SidebarBlockedSelect
+              submitChanges={submitChanges}
+              issuesList={issues?.filter((i) => i.id !== issueDetail?.id) ?? []}
+              watch={watchIssue}
+              userAuth={memberRole}
+            />
+            <div className="flex flex-wrap items-center py-2">
+              <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+                <CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
+                <p>Due date</p>
+              </div>
+              <div className="sm:basis-1/2">
+                <Controller
+                  control={control}
+                  name="target_date"
+                  render={({ field: { value } }) => (
+                    <CustomDatePicker
+                      value={value}
+                      onChange={(val) =>
+                        submitChanges({
+                          target_date: val,
+                        })
+                      }
+                      disabled={isNotAllowed}
+                    />
+                  )}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="py-1">
+            <SidebarCycleSelect
+              issueDetail={issueDetail}
+              handleCycleChange={handleCycleChange}
+              userAuth={memberRole}
+            />
+            <SidebarModuleSelect
+              issueDetail={issueDetail}
+              handleModuleChange={handleModuleChange}
+              userAuth={memberRole}
+            />
+          </div>
+        </div>
+        <div className="space-y-3 py-3">
+          <div className="flex items-start justify-between">
+            <div className="flex basis-1/2 items-center gap-x-2 text-sm text-brand-secondary">
+              <TagIcon className="h-4 w-4" />
+              <p>Label</p>
+            </div>
+            <div className="basis-1/2">
+              <div className="flex flex-wrap gap-1">
+                {watchIssue("labels_list")?.map((labelId) => {
+                  const label = issueLabels?.find((l) => l.id === labelId);
+
+                  if (label)
+                    return (
+                      <span
+                        key={label.id}
+                        className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20"
+                        onClick={() => {
+                          const updatedLabels = watchIssue("labels_list")?.filter(
+                            (l) => l !== labelId
+                          );
+                          submitChanges({
+                            labels_list: updatedLabels,
+                          });
+                        }}
+                      >
+                        <span
+                          className="h-2 w-2 flex-shrink-0 rounded-full"
+                          style={{
+                            backgroundColor:
+                              label?.color && label.color !== "" ? label.color : "#000",
+                          }}
+                        />
+                        {label.name}
+                        <XMarkIcon className="h-2 w-2 group-hover:text-red-500" />
+                      </span>
+                    );
+                })}
+                <Controller
+                  control={control}
+                  name="labels_list"
+                  render={({ field: { value } }) => (
+                    <Listbox
+                      as="div"
+                      value={value}
+                      onChange={(val: any) => submitChanges({ labels_list: val })}
+                      className="flex-shrink-0"
+                      multiple
+                      disabled={isNotAllowed}
+                    >
+                      {({ open }) => (
+                        <div className="relative">
+                          <Listbox.Button
+                            className={`flex ${
+                              isNotAllowed
+                                ? "cursor-not-allowed"
+                                : "cursor-pointer hover:bg-brand-surface-1"
+                            } items-center gap-2 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary`}
+                          >
+                            Select Label
+                          </Listbox.Button>
+
+                          <Transition
+                            show={open}
+                            as={React.Fragment}
+                            leave="transition ease-in duration-100"
+                            leaveFrom="opacity-100"
+                            leaveTo="opacity-0"
+                          >
+                            <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-brand-surface-2 py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                              <div className="py-1">
+                                {issueLabels ? (
+                                  issueLabels.length > 0 ? (
+                                    issueLabels.map((label: IIssueLabels) => {
+                                      const children = issueLabels?.filter(
+                                        (l) => l.parent === label.id
+                                      );
+
+                                      if (children.length === 0) {
+                                        if (!label.parent)
+                                          return (
+                                            <Listbox.Option
+                                              key={label.id}
+                                              className={({ active, selected }) =>
+                                                `${
+                                                  active || selected ? "bg-brand-surface-1" : ""
+                                                } ${
+                                                  selected ? "font-medium" : ""
+                                                } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-brand-base`
+                                              }
+                                              value={label.id}
+                                            >
+                                              <span
+                                                className="h-2 w-2 flex-shrink-0 rounded-full"
+                                                style={{
+                                                  backgroundColor:
+                                                    label.color && label.color !== ""
+                                                      ? label.color
+                                                      : "#000",
+                                                }}
+                                              />
+                                              {label.name}
+                                            </Listbox.Option>
+                                          );
+                                      } else
+                                        return (
+                                          <div className="border-y border-brand-base bg-brand-surface-1">
+                                            <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-brand-base">
+                                              <RectangleGroupIcon className="h-3 w-3" />{" "}
+                                              {label.name}
+                                            </div>
+                                            <div>
+                                              {children.map((child) => (
+                                                <Listbox.Option
+                                                  key={child.id}
+                                                  className={({ active, selected }) =>
+                                                    `${active || selected ? "bg-indigo-50" : ""} ${
+                                                      selected ? "font-medium" : ""
+                                                    } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-brand-base`
+                                                  }
+                                                  value={child.id}
+                                                >
+                                                  <span
+                                                    className="h-2 w-2 flex-shrink-0 rounded-full"
+                                                    style={{
+                                                      backgroundColor: child?.color ?? "black",
+                                                    }}
+                                                  />
+                                                  {child.name}
+                                                </Listbox.Option>
+                                              ))}
+                                            </div>
+                                          </div>
+                                        );
+                                    })
+                                  ) : (
+                                    <div className="text-center">No labels found</div>
+                                  )
+                                ) : (
+                                  <Spinner />
+                                )}
+                              </div>
+                            </Listbox.Options>
+                          </Transition>
+                        </div>
+                      )}
+                    </Listbox>
+                  )}
+                />
+                {!isNotAllowed && (
+                  <button
+                    type="button"
+                    className={`flex ${
+                      isNotAllowed
+                        ? "cursor-not-allowed"
+                        : "cursor-pointer hover:bg-brand-surface-1"
+                    } items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary`}
+                    onClick={() => setCreateLabelForm((prevData) => !prevData)}
+                  >
+                    {createLabelForm ? (
+                      <>
+                        <XMarkIcon className="h-3 w-3" /> Cancel
+                      </>
+                    ) : (
+                      <>
+                        <PlusIcon className="h-3 w-3" /> New
+                      </>
+                    )}
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+          {createLabelForm && (
+            <form className="flex items-center gap-x-2" onSubmit={handleSubmit(handleNewLabel)}>
+              <div>
+                <Popover className="relative">
+                  {({ open }) => (
+                    <>
+                      <Popover.Button
+                        className={`flex items-center gap-1 rounded-md bg-brand-surface-2 p-1 outline-none focus:ring-2 focus:ring-brand-accent`}
+                      >
+                        {watch("color") && watch("color") !== "" && (
+                          <span
+                            className="h-5 w-5 rounded"
+                            style={{
+                              backgroundColor: watch("color") ?? "black",
+                            }}
+                          />
+                        )}
+                        <ChevronDownIcon className="h-3 w-3" />
+                      </Popover.Button>
+
+                      <Transition
+                        as={React.Fragment}
+                        enter="transition ease-out duration-200"
+                        enterFrom="opacity-0 translate-y-1"
+                        enterTo="opacity-100 translate-y-0"
+                        leave="transition ease-in duration-150"
+                        leaveFrom="opacity-100 translate-y-0"
+                        leaveTo="opacity-0 translate-y-1"
+                      >
+                        <Popover.Panel className="absolute right-0 bottom-8 z-10 mt-1 max-w-xs transform px-2 sm:px-0">
+                          <Controller
+                            name="color"
+                            control={controlLabel}
+                            render={({ field: { value, onChange } }) => (
+                              <TwitterPicker
+                                color={value}
+                                onChange={(value) => onChange(value.hex)}
+                              />
+                            )}
+                          />
+                        </Popover.Panel>
+                      </Transition>
+                    </>
+                  )}
+                </Popover>
+              </div>
+              <Input
+                id="name"
+                name="name"
+                placeholder="Title"
+                register={register}
+                validations={{
+                  required: "This is required",
+                }}
+                autoComplete="off"
+              />
+              <button
+                type="submit"
+                className="grid place-items-center rounded bg-red-500 p-2.5"
+                onClick={() => setCreateLabelForm(false)}
+              >
+                <XMarkIcon className="h-4 w-4 text-white" />
+              </button>
+              <button
+                type="submit"
+                className="grid place-items-center rounded bg-green-500 p-2.5"
+                disabled={isSubmitting}
+              >
+                <PlusIcon className="h-4 w-4 text-white" />
+              </button>
+            </form>
+          )}
+        </div>
+        <div className="min-h-[116px] py-1 text-xs">
+          <div className="flex items-center justify-between gap-2">
+            <h4>Links</h4>
+            {!isNotAllowed && (
+              <button
+                type="button"
+                className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1"
+                onClick={() => setLinkModal(true)}
+              >
+                <PlusIcon className="h-4 w-4" />
+              </button>
+            )}
+          </div>
+          <div className="mt-2 space-y-2">
+            {issueDetail?.issue_link && issueDetail.issue_link.length > 0 ? (
+              <LinksList
+                links={issueDetail.issue_link}
+                handleDeleteLink={handleDeleteLink}
+                userAuth={memberRole}
+              />
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/app/components/issues/sub-issues-list.tsx b/app/components/issues/sub-issues-list.tsx
new file mode 100644
index 000000000..bde0b0e97
--- /dev/null
+++ b/app/components/issues/sub-issues-list.tsx
@@ -0,0 +1,270 @@
+import { FC, useState } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// headless ui
+import { Disclosure, Transition } from "@headlessui/react";
+// services
+import issuesService from "services/issues.service";
+// contexts
+import { useProjectMyMembership } from "contexts/project-member.context";
+// components
+import { ExistingIssuesListModal } from "components/core";
+import { CreateUpdateIssueModal } from "components/issues";
+// ui
+import { CustomMenu } from "components/ui";
+// icons
+import { ChevronRightIcon, PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IIssue } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys";
+
+type Props = {
+  parentIssue: IIssue;
+};
+
+export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
+  // states
+  const [createIssueModal, setCreateIssueModal] = useState(false);
+  const [subIssuesListModal, setSubIssuesListModal] = useState(false);
+  const [preloadedData, setPreloadedData] = useState<Partial<IIssue> | null>(null);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { memberRole } = useProjectMyMembership();
+
+  const { data: subIssues } = useSWR<IIssue[] | undefined>(
+    workspaceSlug && projectId && issueId ? SUB_ISSUES(issueId as string) : null,
+    workspaceSlug && projectId && issueId
+      ? () =>
+          issuesService.subIssues(workspaceSlug as string, projectId as string, issueId as string)
+      : null
+  );
+
+  const { data: issues } = useSWR(
+    workspaceSlug && projectId
+      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
+      : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssues(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const addAsSubIssue = async (data: { issues: string[] }) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await issuesService
+      .addSubIssues(workspaceSlug as string, projectId as string, parentIssue?.id ?? "", {
+        sub_issue_ids: data.issues,
+      })
+      .then((res) => {
+        mutate<IIssue[]>(
+          SUB_ISSUES(parentIssue?.id ?? ""),
+          (prevData) => {
+            let newSubIssues = [...(prevData as IIssue[])];
+
+            data.issues.forEach((issueId: string) => {
+              const issue = issues?.find((i) => i.id === issueId);
+
+              if (issue) newSubIssues.push(issue);
+            });
+
+            newSubIssues = orderArrayBy(newSubIssues, "created_at", "descending");
+
+            return newSubIssues;
+          },
+          false
+        );
+
+        mutate<IIssue[]>(
+          PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
+          (prevData) =>
+            (prevData ?? []).map((p) => {
+              if (data.issues.includes(p.id))
+                return {
+                  ...p,
+                  parent: parentIssue.id,
+                };
+
+              return p;
+            }),
+          false
+        );
+
+        mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const handleSubIssueRemove = (issueId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate<IIssue[]>(
+      SUB_ISSUES(parentIssue.id ?? ""),
+      (prevData) => prevData?.filter((i) => i.id !== issueId),
+      false
+    );
+
+    issuesService
+      .patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: null })
+      .then((res) => {
+        mutate(SUB_ISSUES(parentIssue.id ?? ""));
+
+        mutate<IIssue[]>(
+          PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
+          (prevData) =>
+            (prevData ?? []).map((p) => {
+              if (p.id === res.id)
+                return {
+                  ...p,
+                  ...res,
+                };
+
+              return p;
+            }),
+          false
+        );
+      })
+      .catch((e) => {
+        console.error(e);
+      });
+  };
+
+  const handleCreateIssueModal = () => {
+    setCreateIssueModal(true);
+    setPreloadedData({
+      parent: parentIssue.id,
+    });
+  };
+
+  const isNotAllowed = memberRole.isGuest || memberRole.isViewer;
+
+  return (
+    <>
+      <CreateUpdateIssueModal
+        isOpen={createIssueModal}
+        prePopulateData={{ ...preloadedData }}
+        handleClose={() => setCreateIssueModal(false)}
+      />
+      <ExistingIssuesListModal
+        isOpen={subIssuesListModal}
+        handleClose={() => setSubIssuesListModal(false)}
+        issues={
+          issues?.filter(
+            (i) =>
+              (i.parent === "" || i.parent === null) &&
+              i.id !== parentIssue?.id &&
+              i.id !== parentIssue?.parent
+          ) ?? []
+        }
+        handleOnSubmit={addAsSubIssue}
+      />
+      {subIssues && subIssues.length > 0 ? (
+        <Disclosure defaultOpen={true}>
+          {({ open }) => (
+            <>
+              <div className="flex items-center justify-between">
+                <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-brand-surface-1">
+                  <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
+                  Sub-issues <span className="ml-1 text-gray-600">{subIssues.length}</span>
+                </Disclosure.Button>
+                {open && !isNotAllowed ? (
+                  <div className="flex items-center">
+                    <button
+                      type="button"
+                      className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-brand-surface-1"
+                      onClick={handleCreateIssueModal}
+                    >
+                      <PlusIcon className="h-3 w-3" />
+                      Create new
+                    </button>
+
+                    <CustomMenu ellipsis>
+                      <CustomMenu.MenuItem onClick={() => setSubIssuesListModal(true)}>
+                        Add an existing issue
+                      </CustomMenu.MenuItem>
+                    </CustomMenu>
+                  </div>
+                ) : null}
+              </div>
+              <Transition
+                enter="transition duration-100 ease-out"
+                enterFrom="transform scale-95 opacity-0"
+                enterTo="transform scale-100 opacity-100"
+                leave="transition duration-75 ease-out"
+                leaveFrom="transform scale-100 opacity-100"
+                leaveTo="transform scale-95 opacity-0"
+              >
+                <Disclosure.Panel className="mt-3 flex flex-col gap-y-1">
+                  {subIssues.map((issue) => (
+                    <Link
+                      key={issue.id}
+                      href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
+                    >
+                      <a className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-brand-surface-1">
+                        <div className="flex items-center gap-2 rounded text-xs">
+                          <span
+                            className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                            style={{
+                              backgroundColor: issue.state_detail.color,
+                            }}
+                          />
+                          <span className="flex-shrink-0 text-gray-600">
+                            {issue.project_detail.identifier}-{issue.sequence_id}
+                          </span>
+                          <span className="max-w-sm break-all font-medium">{issue.name}</span>
+                        </div>
+
+                        {!isNotAllowed && (
+                          <button
+                            type="button"
+                            className="cursor-pointer opacity-0 group-hover:opacity-100"
+                            onClick={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              handleSubIssueRemove(issue.id);
+                            }}
+                          >
+                            <XMarkIcon className="h-4 w-4 text-brand-secondary hover:text-brand-base" />
+                          </button>
+                        )}
+                      </a>
+                    </Link>
+                  ))}
+                </Disclosure.Panel>
+              </Transition>
+            </>
+          )}
+        </Disclosure>
+      ) : (
+        !isNotAllowed && (
+          <CustomMenu
+            label={
+              <>
+                <PlusIcon className="h-3 w-3" />
+                Add sub-issue
+              </>
+            }
+            optionsPosition="left"
+            noBorder
+            noChevron
+          >
+            <CustomMenu.MenuItem onClick={handleCreateIssueModal}>Create new</CustomMenu.MenuItem>
+            <CustomMenu.MenuItem onClick={() => setSubIssuesListModal(true)}>
+              Add an existing issue
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+        )
+      )}
+    </>
+  );
+};
diff --git a/app/components/issues/view-select/assignee.tsx b/app/components/issues/view-select/assignee.tsx
new file mode 100644
index 000000000..188543185
--- /dev/null
+++ b/app/components/issues/view-select/assignee.tsx
@@ -0,0 +1,128 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import projectService from "services/project.service";
+import trackEventServices from "services/track-event.service";
+// ui
+import { AssigneesList, Avatar, CustomSearchSelect, Tooltip } from "components/ui";
+// icons
+import { UserGroupIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssue } from "types";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+type Props = {
+  issue: IIssue;
+  partialUpdateIssue: (formData: Partial<IIssue>) => void;
+  position?: "left" | "right";
+  selfPositioned?: boolean;
+  tooltipPosition?: "left" | "right";
+  isNotAllowed: boolean;
+};
+
+export const ViewAssigneeSelect: React.FC<Props> = ({
+  issue,
+  partialUpdateIssue,
+  position = "left",
+  selfPositioned = false,
+  tooltipPosition = "right",
+  isNotAllowed,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: members } = useSWR(
+    projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const options =
+    members?.map((member) => ({
+      value: member.member.id,
+      query:
+        (member.member.first_name && member.member.first_name !== ""
+          ? member.member.first_name
+          : member.member.email) +
+          " " +
+          member.member.last_name ?? "",
+      content: (
+        <div className="flex items-center gap-2">
+          <Avatar user={member.member} />
+          {member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name
+            : member.member.email}
+        </div>
+      ),
+    })) ?? [];
+
+  return (
+    <CustomSearchSelect
+      value={issue.assignees}
+      onChange={(data: any) => {
+        const newData = issue.assignees ?? [];
+
+        if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
+        else newData.push(data);
+
+        partialUpdateIssue({ assignees_list: data });
+
+        trackEventServices.trackIssuePartialPropertyUpdateEvent(
+          {
+            workspaceSlug,
+            workspaceId: issue.workspace,
+            projectId: issue.project_detail.id,
+            projectIdentifier: issue.project_detail.identifier,
+            projectName: issue.project_detail.name,
+            issueId: issue.id,
+          },
+          "ISSUE_PROPERTY_UPDATE_ASSIGNEE"
+        );
+      }}
+      options={options}
+      label={
+        <Tooltip
+          position={`top-${tooltipPosition}`}
+          tooltipHeading="Assignees"
+          tooltipContent={
+            issue.assignee_details.length > 0
+              ? issue.assignee_details
+                  .map((assignee) =>
+                    assignee?.first_name !== "" ? assignee?.first_name : assignee?.email
+                  )
+                  .join(", ")
+              : "No Assignee"
+          }
+        >
+          <div
+            className={`flex ${
+              isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
+            } items-center gap-2 text-brand-secondary`}
+          >
+            {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
+              <div className="-my-0.5 flex items-center justify-center gap-2">
+                <AssigneesList userIds={issue.assignees} length={3} showLength={false} />
+                <span className="text-brand-secondary">{issue.assignees.length} Assignees</span>
+              </div>
+            ) : (
+              <div className="flex items-center justify-center gap-2">
+                <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
+                <span className="text-brand-secondary">Assignee</span>
+              </div>
+            )}
+          </div>
+        </Tooltip>
+      }
+      multiple
+      noChevron
+      position={position}
+      disabled={isNotAllowed}
+    />
+  );
+};
diff --git a/app/components/issues/view-select/due-date.tsx b/app/components/issues/view-select/due-date.tsx
new file mode 100644
index 000000000..61aad5766
--- /dev/null
+++ b/app/components/issues/view-select/due-date.tsx
@@ -0,0 +1,60 @@
+import { useRouter } from "next/router";
+
+// ui
+import { CustomDatePicker, Tooltip } from "components/ui";
+// helpers
+import { findHowManyDaysLeft } from "helpers/date-time.helper";
+// services
+import trackEventServices from "services/track-event.service";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  partialUpdateIssue: (formData: Partial<IIssue>) => void;
+  isNotAllowed: boolean;
+};
+
+export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue, isNotAllowed }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <Tooltip tooltipHeading="Due Date" tooltipContent={issue.target_date ?? "N/A"}>
+      <div
+        className={`group relative ${
+          issue.target_date === null
+            ? ""
+            : issue.target_date < new Date().toISOString()
+            ? "text-red-600"
+            : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
+        }`}
+      >
+        <CustomDatePicker
+          placeholder="N/A"
+          value={issue?.target_date}
+          onChange={(val) => {
+            partialUpdateIssue({
+              target_date: val,
+              priority: issue.priority,
+              state: issue.state,
+            });
+            trackEventServices.trackIssuePartialPropertyUpdateEvent(
+              {
+                workspaceSlug,
+                workspaceId: issue.workspace,
+                projectId: issue.project_detail.id,
+                projectIdentifier: issue.project_detail.identifier,
+                projectName: issue.project_detail.name,
+                issueId: issue.id,
+              },
+              "ISSUE_PROPERTY_UPDATE_DUE_DATE"
+            );
+          }}
+          className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
+          disabled={isNotAllowed}
+        />
+      </div>
+    </Tooltip>
+  );
+};
diff --git a/app/components/issues/view-select/estimate.tsx b/app/components/issues/view-select/estimate.tsx
new file mode 100644
index 000000000..737896c4f
--- /dev/null
+++ b/app/components/issues/view-select/estimate.tsx
@@ -0,0 +1,92 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+// services
+import trackEventServices from "services/track-event.service";
+// hooks
+import useEstimateOption from "hooks/use-estimate-option";
+// ui
+import { CustomSelect, Tooltip } from "components/ui";
+// icons
+import { PlayIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  partialUpdateIssue: (formData: Partial<IIssue>) => void;
+  position?: "left" | "right";
+  selfPositioned?: boolean;
+  isNotAllowed: boolean;
+};
+
+export const ViewEstimateSelect: React.FC<Props> = ({
+  issue,
+  partialUpdateIssue,
+  position = "left",
+  selfPositioned = false,
+  isNotAllowed,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { isEstimateActive, estimatePoints } = useEstimateOption(issue.estimate_point);
+
+  const estimateValue = estimatePoints?.find((e) => e.key === issue.estimate_point)?.value;
+
+  if (!isEstimateActive) return null;
+
+  return (
+    <CustomSelect
+      value={issue.estimate_point}
+      onChange={(val: number) => {
+        partialUpdateIssue({ estimate_point: val });
+        trackEventServices.trackIssuePartialPropertyUpdateEvent(
+          {
+            workspaceSlug,
+            workspaceId: issue.workspace,
+            projectId: issue.project_detail.id,
+            projectIdentifier: issue.project_detail.identifier,
+            projectName: issue.project_detail.name,
+            issueId: issue.id,
+          },
+          "ISSUE_PROPERTY_UPDATE_ESTIMATE"
+        );
+      }}
+      label={
+        <Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue}>
+          <div className="flex items-center gap-1 text-brand-secondary">
+            <PlayIcon className="h-3.5 w-3.5 -rotate-90" />
+            {estimateValue ?? "Estimate"}
+          </div>
+        </Tooltip>
+      }
+      maxHeight="md"
+      noChevron
+      disabled={isNotAllowed}
+      position={position}
+      selfPositioned={selfPositioned}
+      width="w-full min-w-[8rem]"
+    >
+      <CustomSelect.Option value={null}>
+        <>
+          <span>
+            <PlayIcon className="h-4 w-4 -rotate-90" />
+          </span>
+          None
+        </>
+      </CustomSelect.Option>
+      {estimatePoints?.map((estimate) => (
+        <CustomSelect.Option key={estimate.id} value={estimate.key}>
+          <>
+            <span>
+              <PlayIcon className="h-4 w-4 -rotate-90" />
+            </span>
+            {estimate.value}
+          </>
+        </CustomSelect.Option>
+      ))}
+    </CustomSelect>
+  );
+};
diff --git a/app/components/issues/view-select/index.ts b/app/components/issues/view-select/index.ts
new file mode 100644
index 000000000..55ecfcbdb
--- /dev/null
+++ b/app/components/issues/view-select/index.ts
@@ -0,0 +1,5 @@
+export * from "./assignee";
+export * from "./due-date";
+export * from "./estimate";
+export * from "./priority";
+export * from "./state";
diff --git a/app/components/issues/view-select/priority.tsx b/app/components/issues/view-select/priority.tsx
new file mode 100644
index 000000000..eb20f7040
--- /dev/null
+++ b/app/components/issues/view-select/priority.tsx
@@ -0,0 +1,94 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+// ui
+import { CustomSelect, Tooltip } from "components/ui";
+// icons
+import { getPriorityIcon } from "components/icons/priority-icon";
+// types
+import { IIssue } from "types";
+// constants
+import { PRIORITIES } from "constants/project";
+// services
+import trackEventServices from "services/track-event.service";
+
+type Props = {
+  issue: IIssue;
+  partialUpdateIssue: (formData: Partial<IIssue>) => void;
+  position?: "left" | "right";
+  selfPositioned?: boolean;
+  isNotAllowed: boolean;
+};
+
+export const ViewPrioritySelect: React.FC<Props> = ({
+  issue,
+  partialUpdateIssue,
+  position = "left",
+  selfPositioned = false,
+  isNotAllowed,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <CustomSelect
+      value={issue.priority}
+      onChange={(data: string) => {
+        partialUpdateIssue({ priority: data });
+        trackEventServices.trackIssuePartialPropertyUpdateEvent(
+          {
+            workspaceSlug,
+            workspaceId: issue.workspace,
+            projectId: issue.project_detail.id,
+            projectIdentifier: issue.project_detail.identifier,
+            projectName: issue.project_detail.name,
+            issueId: issue.id,
+          },
+          "ISSUE_PROPERTY_UPDATE_PRIORITY"
+        );
+      }}
+      maxHeight="md"
+      customButton={
+        <button
+          type="button"
+          className={`grid h-6 w-6 place-items-center rounded border ${
+            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
+          } items-center shadow-sm ${
+            issue.priority === "urgent"
+              ? "border-red-500/20 bg-red-500/20 text-red-500"
+              : issue.priority === "high"
+              ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
+              : issue.priority === "medium"
+              ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+              : issue.priority === "low"
+              ? "border-green-500/20 bg-green-500/20 text-green-500"
+              : "border-brand-base"
+          }`}
+        >
+          <Tooltip tooltipHeading="Priority" tooltipContent={issue.priority ?? "None"}>
+            <span>
+              {getPriorityIcon(
+                issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
+                "text-sm"
+              )}
+            </span>
+          </Tooltip>
+        </button>
+      }
+      noChevron
+      disabled={isNotAllowed}
+      position={position}
+      selfPositioned={selfPositioned}
+    >
+      {PRIORITIES?.map((priority) => (
+        <CustomSelect.Option key={priority} value={priority} className="capitalize">
+          <>
+            {getPriorityIcon(priority, "text-sm")}
+            {priority ?? "None"}
+          </>
+        </CustomSelect.Option>
+      ))}
+    </CustomSelect>
+  );
+};
diff --git a/app/components/issues/view-select/state.tsx b/app/components/issues/view-select/state.tsx
new file mode 100644
index 000000000..4a6482cde
--- /dev/null
+++ b/app/components/issues/view-select/state.tsx
@@ -0,0 +1,112 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import stateService from "services/state.service";
+import trackEventServices from "services/track-event.service";
+// ui
+import { CustomSearchSelect, Tooltip } from "components/ui";
+// icons
+import { getStateGroupIcon } from "components/icons";
+// helpers
+import { addSpaceIfCamelCase } from "helpers/string.helper";
+import { getStatesList } from "helpers/state.helper";
+// types
+import { IIssue } from "types";
+// fetch-keys
+import { STATE_LIST } from "constants/fetch-keys";
+
+type Props = {
+  issue: IIssue;
+  partialUpdateIssue: (formData: Partial<IIssue>) => void;
+  position?: "left" | "right";
+  selfPositioned?: boolean;
+  isNotAllowed: boolean;
+};
+
+export const ViewStateSelect: React.FC<Props> = ({
+  issue,
+  partialUpdateIssue,
+  position = "left",
+  selfPositioned = false,
+  isNotAllowed,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: stateGroups } = useSWR(
+    workspaceSlug && issue ? STATE_LIST(issue.project) : null,
+    workspaceSlug && issue
+      ? () => stateService.getStates(workspaceSlug as string, issue.project)
+      : null
+  );
+  const states = getStatesList(stateGroups ?? {});
+
+  const options = states?.map((state) => ({
+    value: state.id,
+    query: state.name,
+    content: (
+      <div className="flex items-center gap-2">
+        {getStateGroupIcon(state.group, "16", "16", state.color)}
+        {state.name}
+      </div>
+    ),
+  }));
+
+  const selectedOption = states?.find((s) => s.id === issue.state);
+
+  return (
+    <CustomSearchSelect
+      value={issue.state}
+      onChange={(data: string) => {
+        partialUpdateIssue({
+          state: data,
+          priority: issue.priority,
+          target_date: issue.target_date,
+        });
+        trackEventServices.trackIssuePartialPropertyUpdateEvent(
+          {
+            workspaceSlug,
+            workspaceId: issue.workspace,
+            projectId: issue.project_detail.id,
+            projectIdentifier: issue.project_detail.identifier,
+            projectName: issue.project_detail.name,
+            issueId: issue.id,
+          },
+          "ISSUE_PROPERTY_UPDATE_STATE"
+        );
+
+        const oldState = states.find((s) => s.id === issue.state);
+        const newState = states.find((s) => s.id === data);
+
+        if (oldState?.group !== "completed" && newState?.group !== "completed") {
+          trackEventServices.trackIssueMarkedAsDoneEvent({
+            workspaceSlug: issue.workspace_detail.slug,
+            workspaceId: issue.workspace_detail.id,
+            projectId: issue.project_detail.id,
+            projectIdentifier: issue.project_detail.identifier,
+            projectName: issue.project_detail.name,
+            issueId: issue.id,
+          });
+        }
+      }}
+      options={options}
+      label={
+        <Tooltip
+          tooltipHeading="State"
+          tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")}
+        >
+          <div className="flex items-center gap-2 text-brand-secondary">
+            {selectedOption &&
+              getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)}
+            {selectedOption?.name ?? "State"}
+          </div>
+        </Tooltip>
+      }
+      position={position}
+      disabled={isNotAllowed}
+      noChevron
+    />
+  );
+};
diff --git a/app/components/labels/create-label-modal.tsx b/app/components/labels/create-label-modal.tsx
new file mode 100644
index 000000000..c186cbd7c
--- /dev/null
+++ b/app/components/labels/create-label-modal.tsx
@@ -0,0 +1,189 @@
+import React, { useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// react-color
+import { TwitterPicker } from "react-color";
+// headless ui
+import { Dialog, Popover, Transition } from "@headlessui/react";
+// services
+import issuesService from "services/issues.service";
+// ui
+import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+// icons
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+// types
+import type { IIssueLabels, IState } from "types";
+// constants
+import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+
+// types
+type Props = {
+  isOpen: boolean;
+  projectId: string;
+  handleClose: () => void;
+};
+
+const defaultValues: Partial<IState> = {
+  name: "",
+  color: "#000000",
+};
+
+export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClose }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    watch,
+    control,
+    reset,
+    setError,
+  } = useForm<IIssueLabels>({
+    defaultValues,
+  });
+
+  const onClose = () => {
+    handleClose();
+    reset(defaultValues);
+  };
+
+  const onSubmit = async (formData: IIssueLabels) => {
+    if (!workspaceSlug) return;
+
+    await issuesService
+      .createIssueLabel(workspaceSlug as string, projectId as string, formData)
+      .then((res) => {
+        mutate<IIssueLabels[]>(
+          PROJECT_ISSUE_LABELS(projectId),
+          (prevData) => [res, ...(prevData ?? [])],
+          false
+        );
+        onClose();
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-30" onClose={onClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <form onSubmit={handleSubmit(onSubmit)}>
+                  <div>
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                      Create Label
+                    </Dialog.Title>
+                    <div className="mt-8 flex items-center gap-2">
+                      <Popover className="relative">
+                        {({ open, close }) => (
+                          <>
+                            <Popover.Button
+                              className={`group inline-flex items-center rounded-sm bg-brand-surface-2 text-base font-medium hover:text-brand-base focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
+                                open ? "text-brand-base" : "text-brand-secondary"
+                              }`}
+                            >
+                              {watch("color") && watch("color") !== "" && (
+                                <span
+                                  className="ml-2 h-4 w-4 rounded"
+                                  style={{
+                                    backgroundColor: watch("color") ?? "black",
+                                  }}
+                                />
+                              )}
+                              <ChevronDownIcon
+                                className={`ml-2 h-5 w-5 group-hover:text-brand-secondary ${
+                                  open ? "text-gray-600" : "text-gray-400"
+                                }`}
+                                aria-hidden="true"
+                              />
+                            </Popover.Button>
+
+                            <Transition
+                              as={React.Fragment}
+                              enter="transition ease-out duration-200"
+                              enterFrom="opacity-0 translate-y-1"
+                              enterTo="opacity-100 translate-y-0"
+                              leave="transition ease-in duration-150"
+                              leaveFrom="opacity-100 translate-y-0"
+                              leaveTo="opacity-0 translate-y-1"
+                            >
+                              <Popover.Panel className="fixed left-5 z-50 mt-3 w-screen max-w-xs transform px-2 sm:px-0">
+                                <Controller
+                                  name="color"
+                                  control={control}
+                                  render={({ field: { value, onChange } }) => (
+                                    <TwitterPicker
+                                      color={value}
+                                      onChange={(value) => {
+                                        onChange(value.hex);
+                                        close();
+                                      }}
+                                    />
+                                  )}
+                                />
+                              </Popover.Panel>
+                            </Transition>
+                          </>
+                        )}
+                      </Popover>
+                      <Input
+                        type="text"
+                        id="name"
+                        name="name"
+                        placeholder="Enter name"
+                        autoComplete="off"
+                        error={errors.name}
+                        register={register}
+                        width="full"
+                        validations={{
+                          required: "Name is required",
+                        }}
+                      />
+                    </div>
+                  </div>
+                  <div className="mt-5 flex justify-end gap-2">
+                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
+                    <PrimaryButton type="submit" loading={isSubmitting}>
+                      {isSubmitting ? "Creating Label..." : "Create Label"}
+                    </PrimaryButton>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/labels/create-update-label-inline.tsx b/app/components/labels/create-update-label-inline.tsx
new file mode 100644
index 000000000..70c87bc1c
--- /dev/null
+++ b/app/components/labels/create-update-label-inline.tsx
@@ -0,0 +1,190 @@
+import React, { forwardRef, useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+// react-color
+import { TwitterPicker } from "react-color";
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
+// services
+import issuesService from "services/issues.service";
+// ui
+import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+// types
+import { IIssueLabels } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+
+type Props = {
+  labelForm: boolean;
+  setLabelForm: React.Dispatch<React.SetStateAction<boolean>>;
+  isUpdating: boolean;
+  labelToUpdate: IIssueLabels | null;
+};
+
+const defaultValues: Partial<IIssueLabels> = {
+  name: "",
+  color: "#ff0000",
+};
+
+type Ref = HTMLDivElement;
+
+export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpdateLabelInline(
+  { labelForm, setLabelForm, isUpdating, labelToUpdate },
+  ref
+) {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    handleSubmit,
+    control,
+    register,
+    reset,
+    formState: { errors, isSubmitting },
+    watch,
+    setValue,
+  } = useForm<IIssueLabels>({
+    defaultValues,
+  });
+
+  const handleLabelCreate: SubmitHandler<IIssueLabels> = async (formData) => {
+    if (!workspaceSlug || !projectId || isSubmitting) return;
+
+    await issuesService
+      .createIssueLabel(workspaceSlug as string, projectId as string, formData)
+      .then((res) => {
+        mutate<IIssueLabels[]>(
+          PROJECT_ISSUE_LABELS(projectId as string),
+          (prevData) => [res, ...(prevData ?? [])],
+          false
+        );
+        reset(defaultValues);
+        setLabelForm(false);
+      });
+  };
+
+  const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
+    if (!workspaceSlug || !projectId || isSubmitting) return;
+
+    await issuesService
+      .patchIssueLabel(
+        workspaceSlug as string,
+        projectId as string,
+        labelToUpdate?.id ?? "",
+        formData
+      )
+      .then(() => {
+        reset(defaultValues);
+        mutate<IIssueLabels[]>(
+          PROJECT_ISSUE_LABELS(projectId as string),
+          (prevData) =>
+            prevData?.map((p) => (p.id === labelToUpdate?.id ? { ...p, ...formData } : p)),
+          false
+        );
+        setLabelForm(false);
+      });
+  };
+
+  useEffect(() => {
+    if (!labelForm && isUpdating) return;
+
+    reset();
+  }, [labelForm, isUpdating, reset]);
+
+  useEffect(() => {
+    if (!labelToUpdate) return;
+
+    setValue(
+      "color",
+      labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000"
+    );
+    setValue("name", labelToUpdate.name);
+  }, [labelToUpdate, setValue]);
+
+  return (
+    <div
+      className={`flex items-center gap-2 scroll-m-8 rounded-[10px] border border-brand-base bg-brand-surface-2 p-5 ${
+        labelForm ? "" : "hidden"
+      }`}
+      ref={ref}
+    >
+      <div className="h-8 w-8 flex-shrink-0">
+        <Popover className="relative z-10 flex h-full w-full items-center justify-center rounded-xl bg-brand-surface-2">
+          {({ open }) => (
+            <>
+              <Popover.Button
+                className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-brand-accent focus:ring-offset-2 ${
+                  open ? "text-brand-base" : "text-brand-secondary"
+                }`}
+              >
+                {watch("color") && watch("color") !== "" && (
+                  <span
+                    className="h-4 w-4 rounded"
+                    style={{
+                      backgroundColor: watch("color") ?? "#000",
+                    }}
+                  />
+                )}
+              </Popover.Button>
+
+              <Transition
+                as={React.Fragment}
+                enter="transition ease-out duration-200"
+                enterFrom="opacity-0 translate-y-1"
+                enterTo="opacity-100 translate-y-0"
+                leave="transition ease-in duration-150"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-1"
+              >
+                <Popover.Panel className="absolute top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
+                  <Controller
+                    name="color"
+                    control={control}
+                    render={({ field: { value, onChange } }) => (
+                      <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
+                    )}
+                  />
+                </Popover.Panel>
+              </Transition>
+            </>
+          )}
+        </Popover>
+      </div>
+      <div className="flex w-full flex-col justify-center">
+        <Input
+          type="text"
+          id="labelName"
+          name="name"
+          register={register}
+          placeholder="Label title"
+          validations={{
+            required: "Label title is required",
+          }}
+          error={errors.name}
+        />
+      </div>
+      <SecondaryButton
+        onClick={() => {
+          reset();
+          setLabelForm(false);
+        }}
+      >
+        Cancel
+      </SecondaryButton>
+      {isUpdating ? (
+        <PrimaryButton onClick={handleSubmit(handleLabelUpdate)} loading={isSubmitting}>
+          {isSubmitting ? "Updating" : "Update"}
+        </PrimaryButton>
+      ) : (
+        <PrimaryButton onClick={handleSubmit(handleLabelCreate)} loading={isSubmitting}>
+          {isSubmitting ? "Adding" : "Add"}
+        </PrimaryButton>
+      )}
+    </div>
+  );
+});
diff --git a/app/components/labels/index.ts b/app/components/labels/index.ts
new file mode 100644
index 000000000..db02d29f0
--- /dev/null
+++ b/app/components/labels/index.ts
@@ -0,0 +1,5 @@
+export * from "./create-label-modal";
+export * from "./create-update-label-inline";
+export * from "./labels-list-modal";
+export * from "./single-label-group";
+export * from "./single-label";
diff --git a/app/components/labels/labels-list-modal.tsx b/app/components/labels/labels-list-modal.tsx
new file mode 100644
index 000000000..37862888d
--- /dev/null
+++ b/app/components/labels/labels-list-modal.tsx
@@ -0,0 +1,177 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// headless ui
+import { Combobox, Dialog, Transition } from "@headlessui/react";
+// icons
+import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+// services
+import issuesService from "services/issues.service";
+// types
+import { IIssueLabels } from "types";
+// constants
+import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  parent: IIssueLabels | undefined;
+};
+
+export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }) => {
+  const [query, setQuery] = useState("");
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
+    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const filteredLabels: IIssueLabels[] =
+    query === ""
+      ? issueLabels ?? []
+      : issueLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase())) ?? [];
+
+  const handleModalClose = () => {
+    handleClose();
+    setQuery("");
+  };
+
+  const addChildLabel = async (label: IIssueLabels) => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate(
+      (prevData) =>
+        prevData?.map((l) => {
+          if (l.id === label.id) return { ...l, parent: parent?.id ?? "" };
+
+          return l;
+        }),
+      false
+    );
+
+    await issuesService
+      .patchIssueLabel(workspaceSlug as string, projectId as string, label.id, {
+        parent: parent?.id ?? "",
+      })
+      .then(() => mutate());
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
+      <Dialog as="div" className="relative z-20" onClose={handleModalClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
+          >
+            <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+              <Combobox>
+                <div className="relative m-1">
+                  <MagnifyingGlassIcon
+                    className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
+                    aria-hidden="true"
+                  />
+                  <Combobox.Input
+                    className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                    placeholder="Search..."
+                    onChange={(e) => setQuery(e.target.value)}
+                  />
+                </div>
+
+                <Combobox.Options
+                  static
+                  className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
+                >
+                  {filteredLabels.length > 0 && (
+                    <>
+                      <li className="p-2">
+                        {query === "" && (
+                          <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
+                            Labels
+                          </h2>
+                        )}
+                        <ul className="text-sm text-gray-700">
+                          {filteredLabels.map((label) => {
+                            const children = issueLabels?.filter((l) => l.parent === label.id);
+
+                            if (
+                              (label.parent === "" || label.parent === null) && // issue does not have any other parent
+                              label.id !== parent?.id && // issue is not itself
+                              children?.length === 0 // issue doesn't have any othe children
+                            )
+                              return (
+                                <Combobox.Option
+                                  key={label.id}
+                                  value={{
+                                    name: label.name,
+                                  }}
+                                  className={({ active }) =>
+                                    `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
+                                      active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
+                                    }`
+                                  }
+                                  onClick={() => {
+                                    addChildLabel(label);
+                                    handleClose();
+                                  }}
+                                >
+                                  <span
+                                    className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                                    style={{
+                                      backgroundColor: label.color !== "" ? label.color : "#000000",
+                                    }}
+                                  />
+                                  {label.name}
+                                </Combobox.Option>
+                              );
+                          })}
+                        </ul>
+                      </li>
+                    </>
+                  )}
+                </Combobox.Options>
+
+                {query !== "" && filteredLabels.length === 0 && (
+                  <div className="py-14 px-6 text-center sm:px-14">
+                    <RectangleStackIcon
+                      className="mx-auto h-6 w-6 text-brand-base text-opacity-40"
+                      aria-hidden="true"
+                    />
+                    <p className="mt-4 text-sm text-brand-base">
+                      We couldn{"'"}t find any label with that term. Please try again.
+                    </p>
+                  </div>
+                )}
+              </Combobox>
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/labels/single-label-group.tsx b/app/components/labels/single-label-group.tsx
new file mode 100644
index 000000000..c5e5f91db
--- /dev/null
+++ b/app/components/labels/single-label-group.tsx
@@ -0,0 +1,166 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Disclosure, Transition } from "@headlessui/react";
+// services
+import issuesService from "services/issues.service";
+// ui
+import { CustomMenu } from "components/ui";
+// icons
+import {
+  ChevronDownIcon,
+  RectangleGroupIcon,
+  XMarkIcon,
+  PlusIcon,
+  PencilIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+// types
+import { IIssueLabels } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+
+type Props = {
+  label: IIssueLabels;
+  labelChildren: IIssueLabels[];
+  addLabelToGroup: (parentLabel: IIssueLabels) => void;
+  editLabel: (label: IIssueLabels) => void;
+  handleLabelDelete: (labelId: string) => void;
+};
+
+export const SingleLabelGroup: React.FC<Props> = ({
+  label,
+  labelChildren,
+  addLabelToGroup,
+  editLabel,
+  handleLabelDelete,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const removeFromGroup = (label: IIssueLabels) => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate<IIssueLabels[]>(
+      PROJECT_ISSUE_LABELS(projectId as string),
+      (prevData) =>
+        prevData?.map((l) => {
+          if (l.id === label.id) return { ...l, parent: null };
+
+          return l;
+        }),
+      false
+    );
+
+    issuesService
+      .patchIssueLabel(workspaceSlug as string, projectId as string, label.id, {
+        parent: null,
+      })
+      .then(() => {
+        mutate(PROJECT_ISSUE_LABELS(projectId as string));
+      });
+  };
+
+  return (
+    <Disclosure as="div" className="rounded-[10px] border border-brand-base bg-brand-surface-1 p-5 text-brand-base" defaultOpen>
+      {({ open }) => (
+        <>
+          <div className="flex cursor-pointer items-center justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <span>
+                <RectangleGroupIcon className="h-4 w-4" />
+              </span>
+              <h6 className="font-medium text-brand-base">{label.name}</h6>
+            </div>
+            <div className="flex items-center gap-2">
+              <CustomMenu ellipsis>
+                <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
+                  <span className="flex items-center justify-start gap-2">
+                    <PlusIcon className="h-4 w-4" />
+                    <span>Add more labels</span>
+                  </span>
+                </CustomMenu.MenuItem>
+                <CustomMenu.MenuItem onClick={() => editLabel(label)}>
+                  <span className="flex items-center justify-start gap-2">
+                    <PencilIcon className="h-4 w-4" />
+                    <span>Edit label</span>
+                  </span>
+                </CustomMenu.MenuItem>
+                <CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
+                  <span className="flex items-center justify-start gap-2">
+                    <TrashIcon className="h-4 w-4" />
+                    <span>Delete label</span>
+                  </span>
+                </CustomMenu.MenuItem>
+              </CustomMenu>
+              <Disclosure.Button>
+                <span>
+                  <ChevronDownIcon
+                    className={`h-4 w-4 text-brand-base ${!open ? "rotate-90 transform" : ""}`}
+                  />
+                </span>
+              </Disclosure.Button>
+            </div>
+          </div>
+          <Transition
+            show={open}
+            enter="transition duration-100 ease-out"
+            enterFrom="transform opacity-0"
+            enterTo="transform opacity-100"
+            leave="transition duration-75 ease-out"
+            leaveFrom="transform opacity-100"
+            leaveTo="transform opacity-0"
+          >
+            <Disclosure.Panel>
+              <div className="mt-3 ml-6 space-y-3">
+                {labelChildren.map((child) => (
+                  <div
+                    key={child.id}
+                    className="group flex items-center justify-between rounded-md border border-brand-base p-2 text-sm"
+                  >
+                    <h5 className="flex items-center gap-3 text-brand-base">
+                      <span
+                        className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+                        style={{
+                          backgroundColor:
+                            child.color && child.color !== "" ? child.color : "#000000",
+                        }}
+                      />
+                      {child.name}
+                    </h5>
+                    <div className="pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100">
+                      <CustomMenu ellipsis>
+                        <CustomMenu.MenuItem onClick={() => removeFromGroup(child)}>
+                          <span className="flex items-center justify-start gap-2">
+                            <XMarkIcon className="h-4 w-4" />
+                            <span>Remove from group</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                        <CustomMenu.MenuItem onClick={() => editLabel(child)}>
+                          <span className="flex items-center justify-start gap-2">
+                            <PencilIcon className="h-4 w-4" />
+                            <span>Edit label</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                        <CustomMenu.MenuItem onClick={() => handleLabelDelete(child.id)}>
+                          <span className="flex items-center justify-start gap-2">
+                            <TrashIcon className="h-4 w-4" />
+                            <span>Delete label</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                      </CustomMenu>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </Disclosure.Panel>
+          </Transition>
+        </>
+      )}
+    </Disclosure>
+  );
+};
diff --git a/app/components/labels/single-label.tsx b/app/components/labels/single-label.tsx
new file mode 100644
index 000000000..93836e277
--- /dev/null
+++ b/app/components/labels/single-label.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+
+// ui
+import { CustomMenu } from "components/ui";
+// types
+import { IIssueLabels } from "types";
+//icons
+import { RectangleGroupIcon, LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
+
+type Props = {
+  label: IIssueLabels;
+  addLabelToGroup: (parentLabel: IIssueLabels) => void;
+  editLabel: (label: IIssueLabels) => void;
+  handleLabelDelete: (labelId: string) => void;
+};
+
+export const SingleLabel: React.FC<Props> = ({
+  label,
+  addLabelToGroup,
+  editLabel,
+  handleLabelDelete,
+}) => (
+  <div className="gap-2 space-y-3 divide-y divide-brand-base rounded-[10px]  border border-brand-base bg-brand-surface-1 p-5">
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <span
+          className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
+          style={{
+            backgroundColor: label.color && label.color !== "" ? label.color : "#000",
+          }}
+        />
+        <h6 className="font-medium text-brand-base">{label.name}</h6>
+      </div>
+      <CustomMenu ellipsis>
+        <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
+          <span className="flex items-center justify-start gap-2">
+            <RectangleGroupIcon className="h-4 w-4" />
+            <span>Convert to group</span>
+          </span>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem onClick={() => editLabel(label)}>
+          <span className="flex items-center justify-start gap-2">
+            <PencilIcon className="h-4 w-4" />
+            <span>Edit label</span>
+          </span>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
+          <span className="flex items-center justify-start gap-2">
+            <TrashIcon className="h-4 w-4" />
+            <span>Delete label</span>
+          </span>
+        </CustomMenu.MenuItem>
+      </CustomMenu>
+    </div>
+  </div>
+);
diff --git a/app/components/modules/delete-module-modal.tsx b/app/components/modules/delete-module-modal.tsx
new file mode 100644
index 000000000..77ed8dd4c
--- /dev/null
+++ b/app/components/modules/delete-module-modal.tsx
@@ -0,0 +1,130 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import modulesService from "services/modules.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { SecondaryButton, DangerButton } from "components/ui";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// types
+import type { IModule } from "types";
+// fetch-keys
+import { MODULE_LIST } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  data?: IModule;
+};
+
+export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsDeleteLoading(true);
+
+    if (!workspaceSlug || !projectId || !data) return;
+
+    mutate<IModule[]>(
+      MODULE_LIST(projectId as string),
+      (prevData) => prevData?.filter((m) => m.id !== data.id),
+      false
+    );
+
+    await modulesService
+      .deleteModule(workspaceSlug as string, projectId as string, data.id)
+      .then(() => {
+        if (moduleId) router.push(`/${workspaceSlug}/projects/${data.project}/modules`);
+        handleClose();
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Module could not be deleted. Please try again.",
+        });
+        setIsDeleteLoading(false);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                        Delete Module
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-brand-secondary">
+                          Are you sure you want to delete module-{" "}
+                          <span className="font-bold">{data?.name}</span>? All of the data related
+                          to the module will be permanently removed. This action cannot be undone.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
+                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                    {isDeleteLoading ? "Deleting..." : "Delete"}
+                  </DangerButton>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/modules/form.tsx b/app/components/modules/form.tsx
new file mode 100644
index 000000000..fe1e557b7
--- /dev/null
+++ b/app/components/modules/form.tsx
@@ -0,0 +1,187 @@
+import { useEffect, useState } from "react";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { ModuleLeadSelect, ModuleMembersSelect, ModuleStatusSelect } from "components/modules";
+// ui
+import {
+  DateSelect,
+  Input,
+  PrimaryButton,
+  SecondaryButton,
+  TextArea,
+} from "components/ui";
+// helper
+import { isDateRangeValid } from "helpers/date-time.helper";
+// types
+import { IModule } from "types";
+
+type Props = {
+  handleFormSubmit: (values: Partial<IModule>) => Promise<void>;
+  handleClose: () => void;
+  status: boolean;
+  data?: IModule;
+};
+
+const defaultValues: Partial<IModule> = {
+  name: "",
+  description: "",
+  status: null,
+  lead: null,
+  members_list: [],
+};
+
+export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
+  const [isDateValid, setIsDateValid] = useState(true);
+  const { setToastAlert } = useToast();
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    watch,
+    control,
+    reset,
+  } = useForm<IModule>({
+    defaultValues,
+  });
+
+  const handleCreateUpdateModule = async (formData: Partial<IModule>) => {
+    await handleFormSubmit(formData);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateUpdateModule)}>
+      <div className="space-y-5">
+        <h3 className="text-lg font-medium leading-6 text-brand-base">
+          {status ? "Update" : "Create"} Module
+        </h3>
+        <div className="space-y-3">
+          <div>
+            <Input
+              id="name"
+              name="name"
+              type="name"
+              placeholder="Title"
+              autoComplete="off"
+              mode="transparent"
+              className="resize-none text-xl"
+              error={errors.name}
+              register={register}
+              validations={{
+                required: "Title is required",
+                maxLength: {
+                  value: 255,
+                  message: "Title should be less than 255 characters",
+                },
+              }}
+            />
+          </div>
+          <div>
+            <TextArea
+              id="description"
+              name="description"
+              placeholder="Description"
+              className="h-32 resize-none text-sm"
+              mode="transparent"
+              error={errors.description}
+              register={register}
+            />
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <Controller
+              control={control}
+              name="start_date"
+              render={({ field: { value, onChange } }) => (
+                <DateSelect
+                  label="Start date"
+                  value={value}
+                  onChange={(val) => {
+                    onChange(val);
+                    if (val && watch("target_date")) {
+                      if (isDateRangeValid(val, `${watch("target_date")}`)) {
+                        setIsDateValid(true);
+                      } else {
+                        setIsDateValid(false);
+                        setToastAlert({
+                          type: "error",
+                          title: "Error!",
+                          message: "The date you have entered is invalid. Please check and enter a valid date.",
+                        });
+                      }
+                    }
+                  }}
+                />
+              )}
+            />
+            <Controller
+              control={control}
+              name="target_date"
+              render={({ field: { value, onChange } }) => (
+                <DateSelect
+                  label="Target date"
+                  value={value}
+                  onChange={(val) => {
+                    onChange(val);
+                    if (watch("start_date") && val) {
+                      if (isDateRangeValid(`${watch("start_date")}`, val)) {
+                        setIsDateValid(true);
+                      } else {
+                        setIsDateValid(false);
+                        setToastAlert({
+                          type: "error",
+                          title: "Error!",
+                          message: "The date you have entered is invalid. Please check and enter a valid date.",
+                        });
+                      }
+                    }
+                  }}
+                />
+              )}
+            />
+            <ModuleStatusSelect control={control} error={errors.status} />
+            <Controller
+              control={control}
+              name="lead"
+              render={({ field: { value, onChange } }) => (
+                <ModuleLeadSelect value={value} onChange={onChange} />
+              )}
+            />
+            <Controller
+              control={control}
+              name="members"
+              render={({ field: { value, onChange } }) => (
+                <ModuleMembersSelect value={value} onChange={onChange} />
+              )}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-brand-base px-5 pt-5">
+        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+        <PrimaryButton type="submit" loading={isSubmitting || isDateValid ? false : true}>
+          {status
+            ? isSubmitting
+              ? "Updating Module..."
+              : "Update Module"
+            : isSubmitting
+            ? "Creating Module..."
+            : "Create Module"}
+        </PrimaryButton>
+      </div>
+    </form>
+  );
+};
diff --git a/app/components/modules/index.ts b/app/components/modules/index.ts
new file mode 100644
index 000000000..5ba7ea47e
--- /dev/null
+++ b/app/components/modules/index.ts
@@ -0,0 +1,7 @@
+export * from "./select";
+export * from "./sidebar-select";
+export * from "./delete-module-modal";
+export * from "./form";
+export * from "./modal";
+export * from "./sidebar";
+export * from "./single-module-card";
diff --git a/app/components/modules/modal.tsx b/app/components/modules/modal.tsx
new file mode 100644
index 000000000..d42a09ee7
--- /dev/null
+++ b/app/components/modules/modal.tsx
@@ -0,0 +1,156 @@
+import React, { useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// components
+import { ModuleForm } from "components/modules";
+// services
+import modulesService from "services/modules.service";
+// hooks
+import useToast from "hooks/use-toast";
+// types
+import type { IModule } from "types";
+// fetch-keys
+import { MODULE_LIST } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  data?: IModule;
+};
+
+const defaultValues: Partial<IModule> = {
+  name: "",
+  description: "",
+  status: null,
+  lead: null,
+  members_list: [],
+};
+
+export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    setIsOpen(false);
+    reset(defaultValues);
+  };
+
+  const { reset } = useForm<IModule>({
+    defaultValues,
+  });
+
+  const createModule = async (payload: Partial<IModule>) => {
+    await modulesService
+      .createModule(workspaceSlug as string, projectId as string, payload)
+      .then(() => {
+        mutate(MODULE_LIST(projectId as string));
+        handleClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Module created successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Module could not be created. Please try again.",
+        });
+      });
+  };
+
+  const updateModule = async (payload: Partial<IModule>) => {
+    await modulesService
+      .updateModule(workspaceSlug as string, projectId as string, data?.id ?? "", payload)
+      .then((res) => {
+        mutate<IModule[]>(
+          MODULE_LIST(projectId as string),
+          (prevData) =>
+            prevData?.map((p) => {
+              if (p.id === res.id) return { ...p, ...payload };
+
+              return p;
+            }),
+          false
+        );
+        handleClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Module updated successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Module could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const handleFormSubmit = async (formData: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload: Partial<IModule> = {
+      ...formData,
+      members_list: formData.members,
+    };
+
+    if (!data) await createModule(payload);
+    else await updateModule(payload);
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <ModuleForm
+                  handleFormSubmit={handleFormSubmit}
+                  handleClose={handleClose}
+                  status={data ? true : false}
+                  data={data}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/modules/select/index.ts b/app/components/modules/select/index.ts
new file mode 100644
index 000000000..83a4811fa
--- /dev/null
+++ b/app/components/modules/select/index.ts
@@ -0,0 +1,3 @@
+export * from "./select-lead";
+export * from "./select-members";
+export * from "./select-status";
diff --git a/app/components/modules/select/select-lead.tsx b/app/components/modules/select/select-lead.tsx
new file mode 100644
index 000000000..96896146a
--- /dev/null
+++ b/app/components/modules/select/select-lead.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+import Image from "next/image";
+
+import useSWR from "swr";
+
+// services
+import projectServices from "services/project.service";
+// ui
+import { Avatar, CustomSearchSelect } from "components/ui";
+// icons
+import User from "public/user.png";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+type Props = {
+  value: string | null;
+  onChange: () => void;
+};
+
+export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectServices.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const options =
+    members?.map((member) => ({
+      value: member.member.id,
+      query:
+        (member.member.first_name && member.member.first_name !== ""
+          ? member.member.first_name
+          : member.member.email) +
+          " " +
+          member.member.last_name ?? "",
+      content: (
+        <div className="flex items-center gap-2">
+          <Avatar user={member.member} />
+          {member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name
+            : member.member.email}
+        </div>
+      ),
+    })) ?? [];
+
+  const selectedOption = members?.find((m) => m.member.id === value)?.member;
+
+  return (
+    <CustomSearchSelect
+      options={options}
+      value={value}
+      label={
+        <div className="flex items-center gap-2 text-brand-secondary">
+          {selectedOption ? (
+            <Avatar user={selectedOption} />
+          ) : (
+            <div className="h-4 w-4 rounded-full bg-brand-surface-2">
+              <Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
+            </div>
+          )}
+          {selectedOption
+            ? selectedOption?.first_name && selectedOption.first_name !== ""
+              ? selectedOption?.first_name
+              : selectedOption?.email
+            : "N/A"}
+        </div>
+      }
+      onChange={onChange}
+      noChevron
+    />
+  );
+};
diff --git a/app/components/modules/select/select-members.tsx b/app/components/modules/select/select-members.tsx
new file mode 100644
index 000000000..8d407f36a
--- /dev/null
+++ b/app/components/modules/select/select-members.tsx
@@ -0,0 +1,75 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import projectServices from "services/project.service";
+// ui
+import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
+// icons
+import { UserGroupIcon } from "@heroicons/react/24/outline";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+type Props = {
+  value: string[];
+  onChange: () => void;
+};
+
+export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectServices.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+  const options =
+    members?.map((member) => ({
+      value: member.member.id,
+      query:
+        (member.member.first_name && member.member.first_name !== ""
+          ? member.member.first_name
+          : member.member.email) +
+          " " +
+          member.member.last_name ?? "",
+      content: (
+        <div className="flex items-center gap-2">
+          <Avatar user={member.member} />
+          {member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name
+            : member.member.email}
+        </div>
+      ),
+    })) ?? [];
+
+  return (
+    <CustomSearchSelect
+      value={value}
+      label={
+        <div className="flex items-center gap-2 text-brand-secondary">
+          {value && value.length > 0 && Array.isArray(value) ? (
+            <div className="flex items-center justify-center gap-2">
+              <AssigneesList userIds={value} length={3} showLength={false} />
+              <span className="text-brand-secondary">{value.length} Assignees</span>
+            </div>
+          ) : (
+            <div className="flex items-center justify-center gap-2">
+              <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
+              <span className="text-brand-secondary">Assignee</span>
+            </div>
+          )}
+        </div>
+      }
+      options={options}
+      onChange={onChange}
+      height="md"
+      multiple
+      noChevron
+    />
+  );
+};
diff --git a/app/components/modules/select/select-status.tsx b/app/components/modules/select/select-status.tsx
new file mode 100644
index 000000000..7db4aba22
--- /dev/null
+++ b/app/components/modules/select/select-status.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+
+// react hook form
+import { Controller, FieldError, Control } from "react-hook-form";
+// ui
+import { CustomSelect } from "components/ui";
+// icons
+import { Squares2X2Icon } from "@heroicons/react/24/outline";
+// types
+import type { IModule } from "types";
+// constants
+import { MODULE_STATUS } from "constants/module";
+
+type Props = {
+  control: Control<IModule, any>;
+  error?: FieldError;
+};
+
+export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
+  <Controller
+    control={control}
+    rules={{ required: true }}
+    name="status"
+    render={({ field: { value, onChange } }) => (
+      <CustomSelect
+        value={value}
+        label={
+          <div
+            className={`flex items-center justify-center h-6 gap-2 text-xs ${
+              error ? "text-red-500" : ""
+            }`}
+          >
+            <Squares2X2Icon className={`h-3 w-3 ${error ? "text-red-500" : "text-gray-400"}`} />
+            {value && (
+              <span
+                className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                style={{
+                  backgroundColor: MODULE_STATUS.find((s) => s.value === value)?.color,
+                }}
+              />
+            )}
+            {MODULE_STATUS.find((s) => s.value === value)?.label ?? "Status"}
+          </div>
+        }
+        onChange={onChange}
+        noChevron
+      >
+        {MODULE_STATUS.map((status) => (
+          <CustomSelect.Option key={status.value} value={status.value}>
+            <div className="flex items-center gap-2">
+              <span
+                className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                style={{
+                  backgroundColor: status.color,
+                }}
+              />
+              {status.label}
+            </div>
+          </CustomSelect.Option>
+        ))}
+      </CustomSelect>
+    )}
+  />
+);
diff --git a/app/components/modules/sidebar-select/index.ts b/app/components/modules/sidebar-select/index.ts
new file mode 100644
index 000000000..83a4811fa
--- /dev/null
+++ b/app/components/modules/sidebar-select/index.ts
@@ -0,0 +1,3 @@
+export * from "./select-lead";
+export * from "./select-members";
+export * from "./select-status";
diff --git a/app/components/modules/sidebar-select/select-lead.tsx b/app/components/modules/sidebar-select/select-lead.tsx
new file mode 100644
index 000000000..b551294fb
--- /dev/null
+++ b/app/components/modules/sidebar-select/select-lead.tsx
@@ -0,0 +1,94 @@
+import React from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import projectService from "services/project.service";
+// ui
+import { Avatar, CustomSearchSelect } from "components/ui";
+// icons
+import { UserCircleIcon } from "@heroicons/react/24/outline";
+import User from "public/user.png";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+type Props = {
+  value: string | null | undefined;
+  onChange: (val: string) => void;
+};
+
+export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const options =
+    members?.map((member) => ({
+      value: member.member.id,
+      query:
+        (member.member.first_name && member.member.first_name !== ""
+          ? member.member.first_name
+          : member.member.email) +
+          " " +
+          member.member.last_name ?? "",
+      content: (
+        <div className="flex items-center gap-2">
+          <Avatar user={member.member} />
+          {member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name
+            : member.member.email}
+        </div>
+      ),
+    })) ?? [];
+
+  const selectedOption = members?.find((m) => m.member.id === value)?.member;
+
+  return (
+    <div className="flex items-center justify-start gap-1">
+      <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+        <UserCircleIcon className="h-5 w-5" />
+        <span>Lead</span>
+      </div>
+      <div className="sm:basis-1/2">
+        <CustomSearchSelect
+          value={value}
+          label={
+            <div className="flex items-center gap-2 text-brand-secondary">
+              {selectedOption ? (
+                <Avatar user={selectedOption} />
+              ) : (
+                <div className="h-5 w-5 rounded-full border-2 border-transparent bg-brand-surface-2">
+                  <Image
+                    src={User}
+                    height="100%"
+                    width="100%"
+                    className="rounded-full"
+                    alt="No user"
+                  />
+                </div>
+              )}
+              {selectedOption
+                ? selectedOption?.first_name && selectedOption.first_name !== ""
+                  ? selectedOption?.first_name
+                  : selectedOption?.email
+                : "N/A"}
+            </div>
+          }
+          options={options}
+          height="md"
+          position="right"
+          onChange={onChange}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/modules/sidebar-select/select-members.tsx b/app/components/modules/sidebar-select/select-members.tsx
new file mode 100644
index 000000000..2f024913f
--- /dev/null
+++ b/app/components/modules/sidebar-select/select-members.tsx
@@ -0,0 +1,81 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import projectService from "services/project.service";
+// ui
+import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
+// icons
+import { UserGroupIcon } from "@heroicons/react/24/outline";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+type Props = {
+  value: string[] | undefined;
+  onChange: (val: string[]) => void;
+};
+
+export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const options =
+    members?.map((member) => ({
+      value: member.member.id,
+      query:
+        (member.member.first_name && member.member.first_name !== ""
+          ? member.member.first_name
+          : member.member.email) +
+          " " +
+          member.member.last_name ?? "",
+      content: (
+        <div className="flex items-center gap-2">
+          <Avatar user={member.member} />
+          {member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name
+            : member.member.email}
+        </div>
+      ),
+    })) ?? [];
+
+  return (
+    <div className="flex items-center justify-start gap-1">
+      <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+        <UserGroupIcon className="h-5 w-5" />
+        <span>Members</span>
+      </div>
+      <div className="sm:basis-1/2">
+        <CustomSearchSelect
+          value={value}
+          label={
+            <div className="flex items-center gap-2 text-brand-secondary">
+              {value && value.length > 0 && Array.isArray(value) ? (
+                <div className="flex items-center justify-center gap-2">
+                  <AssigneesList userIds={value} length={3} showLength={false} />
+                  <span className="text-brand-secondary">{value.length} Assignees</span>
+                </div>
+              ) : (
+                "No members"
+              )}
+            </div>
+          }
+          options={options}
+          onChange={onChange}
+          height="md"
+          position="right"
+          multiple
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/modules/sidebar-select/select-status.tsx b/app/components/modules/sidebar-select/select-status.tsx
new file mode 100644
index 000000000..5d5ac9464
--- /dev/null
+++ b/app/components/modules/sidebar-select/select-status.tsx
@@ -0,0 +1,69 @@
+// react
+import React from "react";
+// react-hook-form
+import { Control, Controller, UseFormWatch } from "react-hook-form";
+// ui
+import { Squares2X2Icon } from "@heroicons/react/24/outline";
+import { CustomSelect } from "components/ui";
+// icons
+// types
+import { IModule } from "types";
+// common
+// constants
+import { MODULE_STATUS } from "constants/module";
+
+type Props = {
+  control: Control<Partial<IModule>, any>;
+  submitChanges: (formData: Partial<IModule>) => void;
+  watch: UseFormWatch<Partial<IModule>>;
+};
+
+export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, watch }) => (
+  <div className="flex flex-wrap items-center py-2">
+    <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+      <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
+      <p>Status</p>
+    </div>
+    <div className="sm:basis-1/2">
+      <Controller
+        control={control}
+        name="status"
+        render={({ field: { value } }) => (
+          <CustomSelect
+            label={
+              <span
+                className={`flex items-center gap-2 text-left capitalize ${
+                  value ? "" : "text-brand-base"
+                }`}
+              >
+                <span
+                  className="h-2 w-2 flex-shrink-0 rounded-full"
+                  style={{
+                    backgroundColor: MODULE_STATUS?.find((option) => option.value === value)?.color,
+                  }}
+                />
+                {watch("status")}
+              </span>
+            }
+            value={value}
+            onChange={(value: any) => {
+              submitChanges({ status: value });
+            }}
+          >
+            {MODULE_STATUS.map((option) => (
+              <CustomSelect.Option key={option.value} value={option.value}>
+                <>
+                  <span
+                    className="h-2 w-2 flex-shrink-0 rounded-full"
+                    style={{ backgroundColor: option.color }}
+                  />
+                  {option.label}
+                </>
+              </CustomSelect.Option>
+            ))}
+          </CustomSelect>
+        )}
+      />
+    </div>
+  </div>
+);
diff --git a/app/components/modules/sidebar.tsx b/app/components/modules/sidebar.tsx
new file mode 100644
index 000000000..e3d75be45
--- /dev/null
+++ b/app/components/modules/sidebar.tsx
@@ -0,0 +1,562 @@
+import React, { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// icons
+import {
+  ArrowLongRightIcon,
+  CalendarDaysIcon,
+  ChartPieIcon,
+  ChevronDownIcon,
+  DocumentIcon,
+  PlusIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+
+import { Disclosure, Popover, Transition } from "@headlessui/react";
+import DatePicker from "react-datepicker";
+// services
+import modulesService from "services/modules.service";
+// contexts
+import { useProjectMyMembership } from "contexts/project-member.context";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
+import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
+import ProgressChart from "components/core/sidebar/progress-chart";
+import { CustomMenu, CustomSelect, Loader, ProgressBar } from "components/ui";
+// icon
+import { ExclamationIcon } from "components/icons";
+import { LinkIcon } from "@heroicons/react/20/solid";
+// helpers
+import { renderDateFormat, renderShortDate } from "helpers/date-time.helper";
+import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
+// types
+import { IIssue, IModule, ModuleLink } from "types";
+// fetch-keys
+import { MODULE_DETAILS } from "constants/fetch-keys";
+// constant
+import { MODULE_STATUS } from "constants/module";
+
+const defaultValues: Partial<IModule> = {
+  lead: "",
+  members_list: [],
+  start_date: null,
+  target_date: null,
+  status: null,
+};
+
+type Props = {
+  issues: IIssue[];
+  module?: IModule;
+  isOpen: boolean;
+  moduleIssues?: IIssue[];
+};
+
+export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen, moduleIssues }) => {
+  const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
+  const [moduleLinkModal, setModuleLinkModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId } = router.query;
+
+  const { memberRole } = useProjectMyMembership();
+
+  const { setToastAlert } = useToast();
+
+  const { reset, watch, control } = useForm({
+    defaultValues,
+  });
+
+  const submitChanges = (data: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId || !moduleId) return;
+
+    mutate<IModule>(
+      MODULE_DETAILS(moduleId as string),
+      (prevData) => ({
+        ...(prevData as IModule),
+        ...data,
+      }),
+      false
+    );
+
+    modulesService
+      .patchModule(workspaceSlug as string, projectId as string, moduleId as string, data)
+      .then(() => mutate(MODULE_DETAILS(moduleId as string)))
+      .catch((e) => console.log(e));
+  };
+
+  const handleCreateLink = async (formData: ModuleLink) => {
+    if (!workspaceSlug || !projectId || !moduleId) return;
+
+    const payload = { metadata: {}, ...formData };
+
+    await modulesService
+      .createModuleLink(workspaceSlug as string, projectId as string, moduleId as string, payload)
+      .then(() => mutate(MODULE_DETAILS(moduleId as string)))
+      .catch((err) => {
+        if (err.status === 400)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "This URL already exists for this module.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Something went wrong. Please try again.",
+          });
+      });
+  };
+
+  const handleDeleteLink = async (linkId: string) => {
+    if (!workspaceSlug || !projectId || !module) return;
+
+    const updatedLinks = module.link_module.filter((l) => l.id !== linkId);
+
+    mutate<IModule>(
+      MODULE_DETAILS(module.id),
+      (prevData) => ({ ...(prevData as IModule), link_module: updatedLinks }),
+      false
+    );
+
+    await modulesService
+      .deleteModuleLink(workspaceSlug as string, projectId as string, module.id, linkId)
+      .then((res) => {
+        mutate(MODULE_DETAILS(module.id));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module?.id}`)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Module link copied to clipboard",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Some error occurred",
+        });
+      });
+  };
+
+  useEffect(() => {
+    if (module)
+      reset({
+        ...module,
+        members_list: module.members_list ?? module.members_detail?.map((m) => m.id),
+      });
+  }, [module, reset]);
+
+  const isStartValid = new Date(`${module?.start_date}`) <= new Date();
+  const isEndValid = new Date(`${module?.target_date}`) >= new Date(`${module?.start_date}`);
+
+  const progressPercentage = module
+    ? Math.round((module.completed_issues / module.total_issues) * 100)
+    : null;
+
+  return (
+    <>
+      <LinkModal
+        isOpen={moduleLinkModal}
+        handleClose={() => setModuleLinkModal(false)}
+        onFormSubmit={handleCreateLink}
+      />
+      <DeleteModuleModal
+        isOpen={moduleDeleteModal}
+        setIsOpen={setModuleDeleteModal}
+        data={module}
+      />
+      <div
+        className={`fixed top-0 ${
+          isOpen ? "right-0" : "-right-[24rem]"
+        } z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
+      >
+        {module ? (
+          <>
+            <div className="flex flex-col items-start justify-center">
+              <div className="flex gap-2.5 px-5 text-sm">
+                <div className="flex items-center ">
+                  <Controller
+                    control={control}
+                    name="status"
+                    render={({ field: { value } }) => (
+                      <CustomSelect
+                        customButton={
+                          <span
+                            className={`flex cursor-pointer items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-center text-sm capitalize text-brand-muted-1 `}
+                          >
+                            {capitalizeFirstLetter(`${watch("status")}`)}
+                          </span>
+                        }
+                        value={value}
+                        onChange={(value: any) => {
+                          submitChanges({ status: value });
+                        }}
+                      >
+                        {MODULE_STATUS.map((option) => (
+                          <CustomSelect.Option key={option.value} value={option.value}>
+                            <span className="text-xs">{option.label}</span>
+                          </CustomSelect.Option>
+                        ))}
+                      </CustomSelect>
+                    )}
+                  />
+                </div>
+                <div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-brand-muted-1">
+                  <Popover className="flex h-full items-center  justify-center rounded-lg">
+                    {({ open }) => (
+                      <>
+                        <Popover.Button
+                          className={`group flex h-full items-center gap-1 rounded border-[0.5px]  border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1   ${
+                            open ? "bg-brand-surface-1" : ""
+                          }`}
+                        >
+                          <CalendarDaysIcon className="h-3 w-3" />
+                          <span>{renderShortDate(new Date(`${module.start_date}`))}</span>
+                        </Popover.Button>
+
+                        <Transition
+                          as={React.Fragment}
+                          enter="transition ease-out duration-200"
+                          enterFrom="opacity-0 translate-y-1"
+                          enterTo="opacity-100 translate-y-0"
+                          leave="transition ease-in duration-150"
+                          leaveFrom="opacity-100 translate-y-0"
+                          leaveTo="opacity-0 translate-y-1"
+                        >
+                          <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
+                            <DatePicker
+                              selected={
+                                watch("start_date")
+                                  ? new Date(`${watch("start_date")}`)
+                                  : new Date()
+                              }
+                              onChange={(date) => {
+                                submitChanges({
+                                  start_date: renderDateFormat(date),
+                                });
+                              }}
+                              selectsStart
+                              startDate={new Date(`${watch("start_date")}`)}
+                              endDate={new Date(`${watch("target_date")}`)}
+                              maxDate={new Date(`${watch("target_date")}`)}
+                              shouldCloseOnSelect
+                              inline
+                            />
+                          </Popover.Panel>
+                        </Transition>
+                      </>
+                    )}
+                  </Popover>
+                  <span>
+                    <ArrowLongRightIcon className="h-3 w-3" />
+                  </span>
+                  <Popover className="flex h-full items-center  justify-center rounded-lg">
+                    {({ open }) => (
+                      <>
+                        <Popover.Button
+                          className={`group flex items-center gap-1 rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1  ${
+                            open ? "bg-brand-surface-1" : ""
+                          }`}
+                        >
+                          <CalendarDaysIcon className="h-3 w-3 " />
+
+                          <span>{renderShortDate(new Date(`${module?.target_date}`))}</span>
+                        </Popover.Button>
+
+                        <Transition
+                          as={React.Fragment}
+                          enter="transition ease-out duration-200"
+                          enterFrom="opacity-0 translate-y-1"
+                          enterTo="opacity-100 translate-y-0"
+                          leave="transition ease-in duration-150"
+                          leaveFrom="opacity-100 translate-y-0"
+                          leaveTo="opacity-0 translate-y-1"
+                        >
+                          <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
+                            <DatePicker
+                              selected={
+                                watch("target_date")
+                                  ? new Date(`${watch("target_date")}`)
+                                  : new Date()
+                              }
+                              onChange={(date) => {
+                                submitChanges({
+                                  target_date: renderDateFormat(date),
+                                });
+                              }}
+                              selectsEnd
+                              startDate={new Date(`${watch("start_date")}`)}
+                              endDate={new Date(`${watch("target_date")}`)}
+                              minDate={new Date(`${watch("start_date")}`)}
+                              shouldCloseOnSelect
+                              inline
+                            />
+                          </Popover.Panel>
+                        </Transition>
+                      </>
+                    )}
+                  </Popover>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-6 px-6 py-6 w-full">
+                <div className="flex flex-col items-start justify-start gap-2 w-full">
+                  <div className="flex items-start justify-between gap-2 w-full  ">
+                    <h4 className="text-xl font-semibold text-brand-base">{module.name}</h4>
+                    <CustomMenu width="lg" ellipsis>
+                      <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
+                        <span className="flex items-center justify-start gap-2">
+                          <TrashIcon className="h-4 w-4" />
+                          <span>Delete</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                      <CustomMenu.MenuItem onClick={handleCopyText}>
+                        <span className="flex items-center justify-start gap-2">
+                          <LinkIcon className="h-4 w-4" />
+                          <span>Copy link</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                    </CustomMenu>
+                  </div>
+
+                  <span className="whitespace-normal text-sm leading-5 text-brand-secondary">
+                    {module.description}
+                  </span>
+                </div>
+
+                <div className="flex flex-col  gap-4  text-sm">
+                  <Controller
+                    control={control}
+                    name="lead"
+                    render={({ field: { value } }) => (
+                      <SidebarLeadSelect
+                        value={value}
+                        onChange={(val: string) => {
+                          submitChanges({ lead: val });
+                        }}
+                      />
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name="members_list"
+                    render={({ field: { value } }) => (
+                      <SidebarMembersSelect
+                        value={value}
+                        onChange={(val: string[]) => {
+                          submitChanges({ members_list: val });
+                        }}
+                      />
+                    )}
+                  />
+
+                  <div className="flex items-center justify-start gap-1">
+                    <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+                      <ChartPieIcon className="h-5 w-5" />
+                      <span>Progress</span>
+                    </div>
+
+                    <div className="flex items-center gap-2.5 text-brand-secondary">
+                      <span className="h-4 w-4">
+                        <ProgressBar
+                          value={module.completed_issues}
+                          maxValue={module.total_issues}
+                        />
+                      </span>
+                      {module.completed_issues}/{module.total_issues}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
+              <Disclosure defaultOpen>
+                {({ open }) => (
+                  <div
+                    className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}
+                  >
+                    <div className="flex w-full items-center justify-between gap-2    ">
+                      <div className="flex items-center justify-start gap-2 text-sm">
+                        <span className="font-medium text-brand-secondary">Progress</span>
+                        {!open && moduleIssues && progressPercentage ? (
+                          <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
+                            {progressPercentage ? `${progressPercentage}%` : ""}
+                          </span>
+                        ) : (
+                          ""
+                        )}
+                      </div>
+
+                      {isStartValid && isEndValid ? (
+                        <Disclosure.Button className="p-1">
+                          <ChevronDownIcon
+                            className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
+                            aria-hidden="true"
+                          />
+                        </Disclosure.Button>
+                      ) : (
+                        <div className="flex items-center gap-1">
+                          <ExclamationIcon height={14} width={14} />
+                          <span className="text-xs italic text-brand-secondary">
+                            Invalid date. Please enter valid date.
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                    <Transition show={open}>
+                      <Disclosure.Panel>
+                        {isStartValid && isEndValid && moduleIssues ? (
+                          <div className=" h-full w-full py-4">
+                            <div className="flex  items-start justify-between gap-4 py-2 text-xs">
+                              <div className="flex items-center gap-1">
+                                <span>
+                                  <DocumentIcon className="h-3 w-3 text-brand-secondary" />
+                                </span>
+                                <span>
+                                  Pending Issues -{" "}
+                                  {module.total_issues -
+                                    (module.completed_issues + module.cancelled_issues)}{" "}
+                                </span>
+                              </div>
+
+                              <div className="flex items-center gap-3 text-brand-base">
+                                <div className="flex items-center justify-center gap-1">
+                                  <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+                                  <span>Ideal</span>
+                                </div>
+                                <div className="flex items-center justify-center gap-1">
+                                  <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+                                  <span>Current</span>
+                                </div>
+                              </div>
+                            </div>
+                            <div className="relative h-40 w-80">
+                              <ProgressChart
+                                issues={issues}
+                                start={module?.start_date ?? ""}
+                                end={module?.target_date ?? ""}
+                              />
+                            </div>
+                          </div>
+                        ) : (
+                          ""
+                        )}
+                      </Disclosure.Panel>
+                    </Transition>
+                  </div>
+                )}
+              </Disclosure>
+            </div>
+
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
+              <Disclosure defaultOpen>
+                {({ open }) => (
+                  <div
+                    className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}
+                  >
+                    <div className="flex w-full items-center justify-between gap-2    ">
+                      <div className="flex items-center justify-start gap-2 text-sm">
+                        <span className="font-medium text-brand-secondary">Other Information</span>
+                      </div>
+
+                      {module.total_issues > 0 ? (
+                        <Disclosure.Button className="p-1">
+                          <ChevronDownIcon
+                            className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
+                            aria-hidden="true"
+                          />
+                        </Disclosure.Button>
+                      ) : (
+                        <div className="flex items-center gap-1">
+                          <ExclamationIcon height={14} width={14} />
+                          <span className="text-xs italic text-brand-secondary">
+                            No issues found. Please add issue.
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                    <Transition show={open}>
+                      <Disclosure.Panel>
+                        {module.total_issues > 0 ? (
+                          <>
+                            <div className=" h-full w-full py-4">
+                              <SidebarProgressStats
+                                issues={issues}
+                                groupedIssues={{
+                                  backlog: module.backlog_issues,
+                                  unstarted: module.unstarted_issues,
+                                  started: module.started_issues,
+                                  completed: module.completed_issues,
+                                  cancelled: module.cancelled_issues,
+                                }}
+                                userAuth={memberRole}
+                                module={module}
+                              />
+                            </div>
+                          </>
+                        ) : (
+                          ""
+                        )}
+                      </Disclosure.Panel>
+                    </Transition>
+                  </div>
+                )}
+              </Disclosure>
+            </div>
+
+            <div className="flex w-full flex-col text-xs border-t border-brand-base px-6 py-6">
+              <div className="flex justify-between items-center w-full">
+                <h4 className="font-medium text-sm text-brand-secondary">Links</h4>
+                <button
+                  className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1"
+                  onClick={() => setModuleLinkModal(true)}
+                >
+                  <PlusIcon className="h-4 w-4" />
+                </button>
+              </div>
+              <div className="mt-2 space-y-2 hover:bg-brand-surface-2">
+                {memberRole && module.link_module && module.link_module.length > 0 ? (
+                  <LinksList
+                    links={module.link_module}
+                    handleDeleteLink={handleDeleteLink}
+                    userAuth={memberRole}
+                  />
+                ) : null}
+              </div>
+            </div>
+          </>
+        ) : (
+          <Loader className="px-5">
+            <div className="space-y-2">
+              <Loader.Item height="15px" width="50%" />
+              <Loader.Item height="15px" width="30%" />
+            </div>
+            <div className="mt-8 space-y-3">
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+            </div>
+          </Loader>
+        )}
+      </div>
+    </>
+  );
+};
diff --git a/app/components/modules/single-module-card.tsx b/app/components/modules/single-module-card.tsx
new file mode 100644
index 000000000..030f51c0d
--- /dev/null
+++ b/app/components/modules/single-module-card.tsx
@@ -0,0 +1,219 @@
+import React, { useState } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// services
+import modulesService from "services/modules.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { DeleteModuleModal } from "components/modules";
+// ui
+import { AssigneesList, Avatar, CustomMenu, Tooltip } from "components/ui";
+// icons
+import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { CalendarMonthIcon, TargetIcon } from "components/icons";
+
+// helpers
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+// types
+import { IModule } from "types";
+// fetch-key
+import { MODULE_LIST } from "constants/fetch-keys";
+
+type Props = {
+  module: IModule;
+  handleEditModule: () => void;
+};
+
+export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule }) => {
+  const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const completionPercentage = (module.completed_issues / module.total_issues) * 100;
+
+  const handleDeleteModule = () => {
+    if (!module) return;
+
+    setModuleDeleteModal(true);
+  };
+
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug || !projectId || !module) return;
+
+    mutate<IModule[]>(
+      MODULE_LIST(projectId as string),
+      (prevData) =>
+        (prevData ?? []).map((m) => ({
+          ...m,
+          is_favorite: m.id === module.id ? true : m.is_favorite,
+        })),
+      false
+    );
+
+    modulesService
+      .addModuleToFavorites(workspaceSlug as string, projectId as string, {
+        module: module.id,
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the module to favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug || !projectId || !module) return;
+
+    mutate<IModule[]>(
+      MODULE_LIST(projectId as string),
+      (prevData) =>
+        (prevData ?? []).map((m) => ({
+          ...m,
+          is_favorite: m.id === module.id ? false : m.is_favorite,
+        })),
+      false
+    );
+
+    modulesService
+      .removeModuleFromFavorites(workspaceSlug as string, projectId as string, module.id)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the module from favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${projectId}/modules/${module.id}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Module link copied to clipboard.",
+      });
+    });
+  };
+
+  const endDate = new Date(module.target_date ?? "");
+  const startDate = new Date(module.start_date ?? "");
+  const lastUpdated = new Date(module.updated_at ?? "");
+
+  return (
+    <>
+      <DeleteModuleModal
+        isOpen={moduleDeleteModal}
+        setIsOpen={setModuleDeleteModal}
+        data={module}
+      />
+      <div className="flex flex-col divide-y divide-brand-base overflow-hidden rounded-[10px] border border-brand-base bg-brand-surface-2 text-xs">
+        <div className="p-4">
+          <div className="flex w-full flex-col gap-5">
+            <div className="flex items-start justify-between gap-2">
+              <Tooltip tooltipContent={module.name} position="top-left">
+                <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
+                  <a className="w-auto max-w-[calc(100%-9rem)]">
+                    <h3 className="truncate break-all text-lg font-semibold text-brand-base">
+                      {truncateText(module.name, 75)}
+                    </h3>
+                  </a>
+                </Link>
+              </Tooltip>
+
+              <div className="flex items-center gap-1">
+                <div className="mr-2 flex whitespace-nowrap rounded bg-brand-surface-1 px-2.5 py-2">
+                  <span className="capitalize">{module?.status?.replace("-", " ")}</span>
+                </div>
+                {module.is_favorite ? (
+                  <button type="button" onClick={handleRemoveFromFavorites}>
+                    <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                  </button>
+                ) : (
+                  <button type="button" onClick={handleAddToFavorites}>
+                    <StarIcon className="h-4 w-4 " color="#858E96" />
+                  </button>
+                )}
+
+                <CustomMenu width="auto" verticalEllipsis>
+                  <CustomMenu.MenuItem onClick={handleEditModule}>
+                    <span className="flex items-center justify-start gap-2">
+                      <PencilIcon className="h-4 w-4" />
+                      <span>Edit module</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleDeleteModule}>
+                    <span className="flex items-center justify-start gap-2">
+                      <TrashIcon className="h-4 w-4" />
+                      <span>Delete module</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleCopyText}>
+                    <span className="flex items-center justify-start gap-2">
+                      <LinkIcon className="h-4 w-4" />
+                      <span>Copy module link</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex items-start gap-1">
+                <CalendarMonthIcon className="h-4 w-4 text-brand-base" />
+                <span className="text-brand-secondary">Start:</span>
+                <span>{renderShortDateWithYearFormat(startDate)}</span>
+              </div>
+              <div className="flex items-start gap-1">
+                <TargetIcon className="h-4 w-4 text-brand-base" />
+                <span className="text-brand-secondary">End:</span>
+                <span>{renderShortDateWithYearFormat(endDate)}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="flex h-20 flex-col items-end">
+          <div className="flex w-full items-center justify-between gap-2 justify-self-end bg-brand-surface-1 p-4">
+            <span>Progress</span>
+            <div className="bar relative h-1 w-full rounded bg-brand-surface-2">
+              <div
+                className="absolute top-0 left-0 h-1 rounded bg-green-500 duration-300"
+                style={{
+                  width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
+                }}
+              />
+            </div>
+            <span>{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%</span>
+          </div>
+          <div className="item-center flex h-full w-full justify-between bg-brand-surface-1 px-4 pb-4">
+            <p className="text-[#858E96]">
+              Last updated:
+              <span className="font-medium text-brand-base">
+                {renderShortDateWithYearFormat(lastUpdated)}
+              </span>
+            </p>
+            {module.members_detail.length > 0 && (
+              <div className="flex items-center gap-1">
+                <AssigneesList users={module.members_detail} length={4} />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/app/components/onboarding/index.ts b/app/components/onboarding/index.ts
new file mode 100644
index 000000000..4708aaaf8
--- /dev/null
+++ b/app/components/onboarding/index.ts
@@ -0,0 +1,4 @@
+export * from "./invite-members";
+export * from "./onboarding-card";
+export * from "./user-details";
+export * from "./workspace";
\ No newline at end of file
diff --git a/app/components/onboarding/invite-members.tsx b/app/components/onboarding/invite-members.tsx
new file mode 100644
index 000000000..b533126f4
--- /dev/null
+++ b/app/components/onboarding/invite-members.tsx
@@ -0,0 +1,86 @@
+// types
+import { useForm } from "react-hook-form";
+import useToast from "hooks/use-toast";
+import workspaceService from "services/workspace.service";
+import { IUser } from "types";
+// ui components
+import { MultiInput, PrimaryButton, SecondaryButton } from "components/ui";
+
+type Props = {
+  setStep: React.Dispatch<React.SetStateAction<number>>;
+  workspace: any;
+};
+
+export const InviteMembers: React.FC<Props> = ({ setStep, workspace }) => {
+  const { setToastAlert } = useToast();
+
+  const {
+    setValue,
+    watch,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm<IUser>();
+
+  const onSubmit = async (formData: IUser) => {
+    await workspaceService
+      .inviteWorkspace(workspace.slug, formData)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Invitations sent!",
+        });
+        setStep(4);
+      })
+      .catch((err) => console.log(err));
+  };
+
+  const checkEmail = watch("emails") && watch("emails").length > 0 ;
+  return (
+    <form
+      className="flex w-full items-center justify-center"
+      onSubmit={handleSubmit(onSubmit)}
+      onKeyDown={(e) => {
+        if (e.code === "Enter") e.preventDefault();
+      }}
+    >
+      <div className="flex w-full max-w-xl flex-col gap-12">
+        <div className="flex flex-col gap-6  rounded-[10px] bg-brand-surface-2 px-10 py-7 shadow-md">
+          <h2 className="text-2xl font-medium ">Invite co-workers to your team</h2>
+          <div className="flex flex-col items-start justify-center gap-2.5 ">
+            <span>Email</span>
+            <div className="w-full">
+              <MultiInput
+                name="emails"
+                placeholder="Enter co-workers Email IDs"
+                watch={watch}
+                setValue={setValue}
+                className="w-full"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex w-full flex-col items-center justify-center gap-3 ">
+          <PrimaryButton
+            type="submit"
+            className="flex w-1/2 items-center justify-center text-center"
+            disabled={isSubmitting || !checkEmail}
+            size="md"
+          >
+            {isSubmitting ? "Inviting..." : "Continue"}
+          </PrimaryButton>
+
+          <SecondaryButton
+            type="button"
+            className="w-1/2 rounded-lg bg-transparent border-none"
+            size="md"
+            outline
+            onClick={() => setStep(4)}
+          >
+            Skip
+          </SecondaryButton>
+        </div>
+      </div>
+    </form>
+  );
+};
diff --git a/app/components/onboarding/onboarding-card.tsx b/app/components/onboarding/onboarding-card.tsx
new file mode 100644
index 000000000..585f5274c
--- /dev/null
+++ b/app/components/onboarding/onboarding-card.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import Image from "next/image";
+
+interface IOnboardingCard {
+  step: string;
+  title: string;
+  description: React.ReactNode | string;
+  imgURL: string;
+}
+
+type Props = {
+  data: IOnboardingCard;
+  gradient?: boolean;
+};
+
+export const OnboardingCard: React.FC<Props> = ({ data, gradient = false }) => (
+  <div
+    className={`flex flex-col items-center justify-center gap-7 rounded-[10px]  px-14 pt-10  text-center ${
+      gradient ? "bg-gradient-to-b from-[#2C8DFF]/50 to-transparent via-white" : "bg-white"
+    }`}
+  >
+    <div className="h-44 w-full">
+      <Image src={data.imgURL} height="180" width="450" alt={data.title} />
+    </div>
+    <h3 className="text-3xl font-medium">{data.title}</h3>
+    <p className="text-base text-gray-400">{data.description}</p>
+    <span className="text-base text-gray-400">{data.step}</span>
+  </div>
+);
diff --git a/app/components/onboarding/user-details.tsx b/app/components/onboarding/user-details.tsx
new file mode 100644
index 000000000..0297c2347
--- /dev/null
+++ b/app/components/onboarding/user-details.tsx
@@ -0,0 +1,139 @@
+import { useEffect } from "react";
+
+import { Controller, useForm } from "react-hook-form";
+
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import userService from "services/user.service";
+// ui
+import { CustomSelect, Input, PrimaryButton } from "components/ui";
+// types
+import { IUser } from "types";
+// constant
+import { USER_ROLES } from "constants/workspace";
+
+const defaultValues: Partial<IUser> = {
+  first_name: "",
+  last_name: "",
+  role: "",
+};
+
+type Props = {
+  user?: IUser;
+  setStep: React.Dispatch<React.SetStateAction<number>>;
+  setUserRole: React.Dispatch<React.SetStateAction<string | null>>;
+};
+
+export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) => {
+  const { setToastAlert } = useToast();
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<IUser>({
+    defaultValues,
+  });
+
+  const onSubmit = async (formData: IUser) => {
+    await userService
+      .updateUser(formData)
+      .then(() => {
+        setToastAlert({
+          title: "User details updated successfully!",
+          type: "success",
+        });
+        setStep(2);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  useEffect(() => {
+    if (user) {
+      reset({
+        first_name: user.first_name,
+        last_name: user.last_name,
+        role: user.role,
+      });
+      setUserRole(user.role);
+    }
+  }, [user, reset, setUserRole]);
+
+  return (
+    <form className="flex w-full items-center justify-center" onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex w-full max-w-xl flex-col gap-12">
+        <div className="flex flex-col rounded-[10px] bg-brand-surface-2 shadow-md">
+          <div className="flex flex-col justify-between gap-3 px-10 py-7 sm:flex-row">
+            <div className="flex flex-col items-start justify-center gap-2.5">
+              <span>First name</span>
+              <Input
+                name="first_name"
+                autoComplete="off"
+                register={register}
+                validations={{
+                  required: "First name is required",
+                }}
+                error={errors.first_name}
+              />
+            </div>
+            <div className="flex flex-col items-start justify-center gap-2.5">
+              <span>Last name</span>
+              <Input
+                name="last_name"
+                autoComplete="off"
+                register={register}
+                validations={{
+                  required: "Last name is required",
+                }}
+                error={errors.last_name}
+              />
+            </div>
+          </div>
+          <div className="flex flex-col items-start justify-center gap-2.5 border-t border-brand-base px-10 py-7">
+            <span>What is your role?</span>
+            <div className="w-full">
+              <Controller
+                name="role"
+                control={control}
+                rules={{ required: "This field is required" }}
+                render={({ field: { value, onChange } }) => (
+                  <CustomSelect
+                    value={value}
+                    onChange={(value: any) => {
+                      onChange(value);
+                      setUserRole(value ?? null);
+                    }}
+                    label={value ? value.toString() : "Select your role"}
+                    input
+                    width="w-full"
+                  >
+                    {USER_ROLES.map((item) => (
+                      <CustomSelect.Option key={item.value} value={item.value}>
+                        {item.label}
+                      </CustomSelect.Option>
+                    ))}
+                  </CustomSelect>
+                )}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="flex w-full items-center justify-center ">
+          <PrimaryButton
+            type="submit"
+            className="flex w-1/2 items-center justify-center text-center"
+            size="md"
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? "Updating..." : "Continue"}
+          </PrimaryButton>
+        </div>
+      </div>
+    </form>
+  );
+};
diff --git a/app/components/onboarding/workspace.tsx b/app/components/onboarding/workspace.tsx
new file mode 100644
index 000000000..57e2c86fa
--- /dev/null
+++ b/app/components/onboarding/workspace.tsx
@@ -0,0 +1,189 @@
+import { useState } from "react";
+
+import Image from "next/image";
+
+import useSWR from "swr";
+
+// headless ui
+import { Tab } from "@headlessui/react";
+// services
+import workspaceService from "services/workspace.service";
+// types
+import { IWorkspaceMemberInvitation } from "types";
+// fetch-keys
+import { USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
+// constants
+import { CreateWorkspaceForm } from "components/workspace";
+// ui
+import { PrimaryButton } from "components/ui";
+
+type Props = {
+  setStep: React.Dispatch<React.SetStateAction<number>>;
+  setWorkspace: React.Dispatch<React.SetStateAction<any>>;
+};
+
+export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
+  const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
+  const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
+  const [defaultValues, setDefaultValues] = useState({
+    name: "",
+    slug: "",
+    company_size: null,
+  });
+
+  const { data: invitations, mutate } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
+    workspaceService.userWorkspaceInvitations()
+  );
+
+  const handleInvitation = (
+    workspace_invitation: IWorkspaceMemberInvitation,
+    action: "accepted" | "withdraw"
+  ) => {
+    if (action === "accepted") {
+      setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]);
+    } else if (action === "withdraw") {
+      setInvitationsRespond((prevData) =>
+        prevData.filter((item: string) => item !== workspace_invitation.id)
+      );
+    }
+  };
+
+  const submitInvitations = async () => {
+    if (invitationsRespond.length <= 0) return;
+    setIsJoiningWorkspaces(true);
+    await workspaceService
+      .joinWorkspaces({ invitations: invitationsRespond })
+      .then(async () => {
+        await mutate();
+        setStep(4);
+        setIsJoiningWorkspaces(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsJoiningWorkspaces(false);
+      });
+  };
+
+  return (
+    <div className="grid min-h-[490px] w-full place-items-center">
+      <Tab.Group
+        as="div"
+        className="flex h-full w-full max-w-xl flex-col justify-between rounded-[10px] bg-brand-surface-2 shadow-md"
+      >
+        <Tab.List
+          as="div"
+          className="text-gray-8 flex items-center justify-start gap-3 px-4 pt-4 text-sm"
+        >
+          <Tab
+            className={({ selected }) =>
+              `rounded-3xl border px-4 py-2 outline-none ${
+                selected
+                  ? "border-brand-accent bg-brand-accent text-white"
+                  : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
+              }`
+            }
+          >
+            New Workspace
+          </Tab>
+          <Tab
+            className={({ selected }) =>
+              `rounded-3xl border px-5 py-2 outline-none ${
+                selected
+                  ? "border-brand-accent bg-brand-accent text-white"
+                  : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
+              }`
+            }
+          >
+            Invited Workspace
+          </Tab>
+        </Tab.List>
+        <Tab.Panels as="div" className="h-full">
+          <Tab.Panel>
+            <CreateWorkspaceForm
+              onSubmit={(res) => {
+                setWorkspace(res);
+                setStep(3);
+              }}
+              defaultValues={defaultValues}
+              setDefaultValues={setDefaultValues}
+            />
+          </Tab.Panel>
+          <Tab.Panel className="h-full">
+            <div className="flex h-full w-full flex-col justify-between">
+              <div className="divide-y px-4 py-7">
+                {invitations && invitations.length > 0 ? (
+                  invitations.map((invitation) => (
+                    <div key={invitation.id}>
+                      <label
+                        className={`group relative flex cursor-pointer items-start space-x-3 border-2 border-transparent py-4`}
+                        htmlFor={invitation.id}
+                      >
+                        <div className="flex-shrink-0">
+                          <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg">
+                            {invitation.workspace.logo && invitation.workspace.logo !== "" ? (
+                              <Image
+                                src={invitation.workspace.logo}
+                                height="100%"
+                                width="100%"
+                                className="rounded"
+                                alt={invitation.workspace.name}
+                              />
+                            ) : (
+                              <span className="flex h-full w-full items-center justify-center rounded bg-gray-500 p-4 uppercase text-white">
+                                {invitation.workspace.name.charAt(0)}
+                              </span>
+                            )}
+                          </span>
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <div className="text-sm font-medium text-brand-base">
+                            {invitation.workspace.name}
+                          </div>
+                          <p className="text-sm text-brand-secondary">
+                            Invited by {invitation.workspace.owner.first_name}
+                          </p>
+                        </div>
+                        <div className="flex-shrink-0 self-center">
+                          <input
+                            id={invitation.id}
+                            aria-describedby="workspaces"
+                            name={invitation.id}
+                            checked={invitationsRespond.includes(invitation.id)}
+                            value={invitation.workspace.name}
+                            onChange={(e) => {
+                              handleInvitation(
+                                invitation,
+                                invitationsRespond.includes(invitation.id) ? "withdraw" : "accepted"
+                              );
+                            }}
+                            type="checkbox"
+                            className="h-4 w-4 rounded border-brand-base text-brand-accent focus:ring-brand-accent"
+                          />
+                        </div>
+                      </label>
+                    </div>
+                  ))
+                ) : (
+                  <div className="text-center">
+                    <h3 className="text-gray-400">You have no invitations</h3>
+                  </div>
+                )}
+              </div>
+              <div className="flex w-full items-center justify-center rounded-b-[10px] py-7">
+                <PrimaryButton
+                  type="submit"
+                  className="w-1/2 text-center"
+                  size="md"
+                  disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
+                  onClick={submitInvitations}
+                >
+                  Join Workspace
+                </PrimaryButton>
+              </div>
+            </div>
+          </Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
+    </div>
+  );
+};
diff --git a/app/components/pages/create-update-block-inline.tsx b/app/components/pages/create-update-block-inline.tsx
new file mode 100644
index 000000000..4b8fbcc99
--- /dev/null
+++ b/app/components/pages/create-update-block-inline.tsx
@@ -0,0 +1,316 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+import dynamic from "next/dynamic";
+
+import { mutate } from "swr";
+
+import { SparklesIcon } from "@heroicons/react/24/outline";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// services
+import pagesService from "services/pages.service";
+import issuesService from "services/issues.service";
+import aiService from "services/ai.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Input, Loader, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+// types
+import { IPageBlock } from "types";
+// fetch-keys
+import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
+
+type Props = {
+  handleClose: () => void;
+  data?: IPageBlock;
+  setIsSyncing?: React.Dispatch<React.SetStateAction<boolean>>;
+  focus?: keyof IPageBlock;
+  setGptAssistantModal: () => void;
+};
+
+const defaultValues = {
+  name: "",
+  description: { type: "doc", content: [] },
+  description_html: "<p></p>",
+};
+
+const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
+  ssr: false,
+  loading: () => (
+    <Loader className="mx-4 mt-6">
+      <Loader.Item height="100px" width="100%" />
+    </Loader>
+  ),
+});
+
+export const CreateUpdateBlockInline: React.FC<Props> = ({
+  handleClose,
+  data,
+  setIsSyncing,
+  focus,
+  setGptAssistantModal,
+}) => {
+  const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, pageId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const {
+    handleSubmit,
+    register,
+    control,
+    watch,
+    setValue,
+    setFocus,
+    reset,
+    formState: { isSubmitting },
+  } = useForm<IPageBlock>({
+    defaultValues,
+  });
+
+  const onClose = useCallback(() => {
+    if (data) handleClose();
+
+    reset();
+  }, [handleClose, reset, data]);
+
+  const createPageBlock = useCallback(
+    async (formData: Partial<IPageBlock>) => {
+      if (!workspaceSlug || !projectId || !pageId) return;
+
+      await pagesService
+        .createPageBlock(workspaceSlug as string, projectId as string, pageId as string, {
+          name: formData.name,
+          description: formData.description ?? "",
+          description_html: formData.description_html ?? "<p></p>",
+        })
+        .then((res) => {
+          mutate<IPageBlock[]>(
+            PAGE_BLOCKS_LIST(pageId as string),
+            (prevData) => [...(prevData as IPageBlock[]), res],
+            false
+          );
+        })
+        .catch(() => {
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Page could not be created. Please try again.",
+          });
+        })
+        .finally(() => onClose());
+    },
+    [workspaceSlug, projectId, pageId, onClose, setToastAlert]
+  );
+
+  const updatePageBlock = useCallback(
+    async (formData: Partial<IPageBlock>) => {
+      if (!workspaceSlug || !projectId || !pageId || !data) return;
+
+      if (data.issue && data.sync && setIsSyncing) setIsSyncing(true);
+
+      mutate<IPageBlock[]>(
+        PAGE_BLOCKS_LIST(pageId as string),
+        (prevData) =>
+          prevData?.map((p) => {
+            if (p.id === data.id) return { ...p, ...formData };
+
+            return p;
+          }),
+        false
+      );
+
+      await pagesService
+        .patchPageBlock(workspaceSlug as string, projectId as string, pageId as string, data.id, {
+          name: formData.name,
+          description: formData.description,
+          description_html: formData.description_html,
+        })
+        .then((res) => {
+          mutate(PAGE_BLOCKS_LIST(pageId as string));
+          if (data.issue && data.sync)
+            issuesService
+              .patchIssue(workspaceSlug as string, projectId as string, data.issue, {
+                name: res.name,
+                description: res.description,
+                description_html: res.description_html,
+              })
+              .finally(() => {
+                if (setIsSyncing) setIsSyncing(false);
+              });
+        })
+        .finally(() => onClose());
+    },
+    [workspaceSlug, projectId, pageId, data, onClose, setIsSyncing]
+  );
+
+  const handleAutoGenerateDescription = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    setIAmFeelingLucky(true);
+
+    aiService
+      .createGptTask(workspaceSlug as string, projectId as string, {
+        prompt: watch("name"),
+        task: "Generate a proper description for this issue in context of a project management software.",
+      })
+      .then((res) => {
+        if (res.response === "")
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "Block title isn't informative enough to generate the description. Please try with a different title.",
+          });
+        else {
+          setValue("description", {});
+          setValue("description_html", `${watch("description_html") ?? ""}<p>${res.response}</p>`);
+        }
+      })
+      .catch((err) => {
+        if (err.status === 429)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "You have reached the maximum number of requests of 50 requests per month per user.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Some error occurred. Please try again.",
+          });
+      })
+      .finally(() => setIAmFeelingLucky(false));
+  };
+
+  useEffect(() => {
+    if (focus) setFocus(focus);
+
+    if (!data) return;
+
+    reset({
+      ...defaultValues,
+      name: data.name,
+      description: data.description,
+      description_html: data.description_html,
+    });
+  }, [reset, data, focus, setFocus]);
+
+  useEffect(() => {
+    window.addEventListener("keydown", (e: KeyboardEvent) => {
+      if (e.key === "Escape") handleClose();
+    });
+
+    return () => {
+      window.removeEventListener("keydown", (e: KeyboardEvent) => {
+        if (e.key === "Escape") handleClose();
+      });
+    };
+  }, [handleClose]);
+
+  useEffect(() => {
+    const submitForm = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+        if (data) handleSubmit(updatePageBlock)();
+        else handleSubmit(createPageBlock)();
+      }
+    };
+
+    window.addEventListener("keydown", submitForm);
+
+    return () => {
+      window.removeEventListener("keydown", submitForm);
+    };
+  }, [createPageBlock, updatePageBlock, data, handleSubmit]);
+
+  return (
+    <form
+      className="divide-y divide-brand-base rounded-[10px] border border-brand-base shadow"
+      onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
+    >
+      <div className="pt-2">
+        <div className="flex justify-between">
+          <Input
+            id="name"
+            name="name"
+            placeholder="Title"
+            register={register}
+            className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-lg font-medium"
+            autoComplete="off"
+            maxLength={255}
+          />
+        </div>
+        <div className="page-block-section relative -mt-2 text-brand-secondary">
+          <Controller
+            name="description"
+            control={control}
+            render={({ field: { value } }) => (
+              <RemirrorRichTextEditor
+                value={
+                  !value || (typeof value === "object" && Object.keys(value).length === 0)
+                    ? watch("description_html")
+                    : value
+                }
+                onJSONChange={(jsonValue) => setValue("description", jsonValue)}
+                onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
+                placeholder="Write something..."
+                customClassName="text-sm"
+                noBorder
+                borderOnFocus={false}
+              />
+            )}
+          />
+          <div className="m-2 mt-6 flex">
+            <button
+              type="button"
+              className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${
+                iAmFeelingLucky ? "cursor-wait bg-brand-surface-1" : ""
+              }`}
+              onClick={handleAutoGenerateDescription}
+              disabled={iAmFeelingLucky}
+            >
+              {iAmFeelingLucky ? (
+                "Generating response..."
+              ) : (
+                <>
+                  <SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
+                </>
+              )}
+            </button>
+            {data && (
+              <button
+                type="button"
+                className="ml-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
+                onClick={() => {
+                  onClose();
+                  setGptAssistantModal();
+                }}
+              >
+                <SparklesIcon className="h-4 w-4" />
+                AI
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center justify-end gap-2 p-4">
+        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+        <PrimaryButton type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
+          {data
+            ? isSubmitting
+              ? "Updating..."
+              : "Update block"
+            : isSubmitting
+            ? "Adding..."
+            : "Add block"}
+        </PrimaryButton>
+      </div>
+    </form>
+  );
+};
diff --git a/app/components/pages/create-update-page-modal.tsx b/app/components/pages/create-update-page-modal.tsx
new file mode 100644
index 000000000..09db533d5
--- /dev/null
+++ b/app/components/pages/create-update-page-modal.tsx
@@ -0,0 +1,182 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import pagesService from "services/pages.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { PageForm } from "./page-form";
+// types
+import { IPage } from "types";
+// fetch-keys
+import {
+  ALL_PAGES_LIST,
+  FAVORITE_PAGES_LIST,
+  MY_PAGES_LIST,
+  RECENT_PAGES_LIST,
+} from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data?: IPage | null;
+};
+
+export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, data }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const onClose = () => {
+    handleClose();
+  };
+
+  const createPage = async (payload: IPage) => {
+    await pagesService
+      .createPage(workspaceSlug as string, projectId as string, payload)
+      .then((res) => {
+        mutate(RECENT_PAGES_LIST(projectId as string));
+        mutate<IPage[]>(
+          MY_PAGES_LIST(projectId as string),
+          (prevData) => {
+            if (!prevData) return undefined;
+
+            return [res, ...(prevData as IPage[])];
+          },
+          false
+        );
+        mutate<IPage[]>(
+          ALL_PAGES_LIST(projectId as string),
+          (prevData) => {
+            if (!prevData) return undefined;
+
+            return [res, ...(prevData as IPage[])];
+          },
+          false
+        );
+        onClose();
+
+        router.push(`/${workspaceSlug}/projects/${projectId}/pages/${res.id}`);
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Page created successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Page could not be created. Please try again.",
+        });
+      });
+  };
+
+  const updatePage = async (payload: IPage) => {
+    await pagesService
+      .patchPage(workspaceSlug as string, projectId as string, data?.id ?? "", payload)
+      .then((res) => {
+        mutate(RECENT_PAGES_LIST(projectId as string));
+        mutate<IPage[]>(
+          FAVORITE_PAGES_LIST(projectId as string),
+          (prevData) =>
+            (prevData ?? []).map((p) => {
+              if (p.id === res.id) return { ...p, ...res };
+
+              return p;
+            }),
+          false
+        );
+        mutate<IPage[]>(
+          MY_PAGES_LIST(projectId as string),
+          (prevData) =>
+            (prevData ?? []).map((p) => {
+              if (p.id === res.id) return { ...p, ...res };
+
+              return p;
+            }),
+          false
+        );
+        mutate<IPage[]>(
+          ALL_PAGES_LIST(projectId as string),
+          (prevData) =>
+            (prevData ?? []).map((p) => {
+              if (p.id === res.id) return { ...p, ...res };
+
+              return p;
+            }),
+          false
+        );
+        onClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Page updated successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Page could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const handleFormSubmit = async (formData: IPage) => {
+    if (!workspaceSlug || !projectId) return;
+
+    if (!data) await createPage(formData);
+    else await updatePage(formData);
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <PageForm
+                  handleFormSubmit={handleFormSubmit}
+                  handleClose={handleClose}
+                  status={data ? true : false}
+                  data={data}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/pages/delete-page-modal.tsx b/app/components/pages/delete-page-modal.tsx
new file mode 100644
index 000000000..b37f05bbe
--- /dev/null
+++ b/app/components/pages/delete-page-modal.tsx
@@ -0,0 +1,155 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import pagesService from "services/pages.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { DangerButton, SecondaryButton } from "components/ui";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// types
+import type { IPage } from "types";
+// fetch-keys
+import {
+  ALL_PAGES_LIST,
+  FAVORITE_PAGES_LIST,
+  MY_PAGES_LIST,
+  RECENT_PAGES_LIST,
+} from "constants/fetch-keys";
+
+type TConfirmPageDeletionProps = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  data?: IPage | null;
+};
+
+export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
+  isOpen,
+  setIsOpen,
+  data,
+}) => {
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsDeleteLoading(true);
+    if (!data || !workspaceSlug || !projectId) return;
+
+    await pagesService
+      .deletePage(workspaceSlug as string, data.project, data.id)
+      .then(() => {
+        mutate(RECENT_PAGES_LIST(projectId as string));
+        mutate<IPage[]>(
+          MY_PAGES_LIST(projectId as string),
+          (prevData) => (prevData ?? []).filter((page) => page.id !== data?.id),
+          false
+        );
+        mutate<IPage[]>(
+          ALL_PAGES_LIST(projectId as string),
+          (prevData) => (prevData ?? []).filter((page) => page.id !== data?.id),
+          false
+        );
+        mutate<IPage[]>(
+          FAVORITE_PAGES_LIST(projectId as string),
+          (prevData) => (prevData ?? []).filter((page) => page.id !== data?.id),
+          false
+        );
+        handleClose();
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Page deleted successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Page could not be deleted. Please try again.",
+        });
+      })
+      .finally(() => {
+        setIsDeleteLoading(false);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                        Delete Page
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-brand-secondary">
+                          Are you sure you want to delete Page- {" "}
+                          <span className="font-bold">{data?.name}</span>
+                          ? All of the data related to the page will be permanently removed.
+                          This action cannot be undone.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
+                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                    {isDeleteLoading ? "Deleting..." : "Delete"}
+                  </DangerButton>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/pages/index.ts b/app/components/pages/index.ts
new file mode 100644
index 000000000..ce2692162
--- /dev/null
+++ b/app/components/pages/index.ts
@@ -0,0 +1,9 @@
+export * from "./pages-list";
+export * from "./create-update-block-inline";
+export * from "./create-update-page-modal";
+export * from "./delete-page-modal";
+export * from "./page-form";
+export * from "./pages-view";
+export * from "./single-page-block";
+export * from "./single-page-detailed-item";
+export * from "./single-page-list-item";
diff --git a/app/components/pages/page-form.tsx b/app/components/pages/page-form.tsx
new file mode 100644
index 000000000..22cab9e31
--- /dev/null
+++ b/app/components/pages/page-form.tsx
@@ -0,0 +1,117 @@
+import { useEffect } from "react";
+
+import dynamic from "next/dynamic";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// ui
+import { Input, Loader, PrimaryButton, SecondaryButton } from "components/ui";
+// types
+import { IPage } from "types";
+
+type Props = {
+  handleFormSubmit: (values: IPage) => Promise<void>;
+  handleClose: () => void;
+  status: boolean;
+  data?: IPage | null;
+};
+
+// rich-text-editor
+const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
+  ssr: false,
+  loading: () => (
+    <Loader>
+      <Loader.Item height="12rem" width="100%" />
+    </Loader>
+  ),
+});
+
+const defaultValues = {
+  name: "",
+  description: "",
+};
+
+export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    control,
+    setValue,
+  } = useForm<IPage>({
+    defaultValues,
+  });
+
+  const handleCreateUpdatePage = async (formData: IPage) => {
+    await handleFormSubmit(formData);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateUpdatePage)}>
+      <div className="space-y-5">
+        <h3 className="text-lg font-medium leading-6 text-brand-base">
+          {status ? "Update" : "Create"} Page
+        </h3>
+        <div className="space-y-3">
+          <div>
+            <Input
+              id="name"
+              label="Name"
+              name="name"
+              type="name"
+              placeholder="Enter name"
+              autoComplete="off"
+              error={errors.name}
+              register={register}
+              validations={{
+                required: "Name is required",
+                maxLength: {
+                  value: 255,
+                  message: "Name should be less than 255 characters",
+                },
+              }}
+            />
+          </div>
+          {/* <div>
+            <Controller
+              name="description"
+              control={control}
+              render={({ field: { value } }) => (
+                <RemirrorRichTextEditor
+                  value={value}
+                  onJSONChange={(jsonValue) => setValue("description", jsonValue)}
+                  onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
+                  placeholder="Description"
+                />
+              )}
+            />
+          </div> */}
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end gap-2">
+        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+        <PrimaryButton type="submit" loading={isSubmitting}>
+          {status
+            ? isSubmitting
+              ? "Updating Page..."
+              : "Update Page"
+            : isSubmitting
+            ? "Creating Page..."
+            : "Create Page"}
+        </PrimaryButton>
+      </div>
+    </form>
+  );
+};
diff --git a/app/components/pages/pages-list/all-pages-list.tsx b/app/components/pages/pages-list/all-pages-list.tsx
new file mode 100644
index 000000000..ec364eba6
--- /dev/null
+++ b/app/components/pages/pages-list/all-pages-list.tsx
@@ -0,0 +1,30 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import pagesService from "services/pages.service";
+// components
+import { PagesView } from "components/pages";
+// types
+import { TPagesListProps } from "./types";
+// fetch-keys
+import { ALL_PAGES_LIST } from "constants/fetch-keys";
+
+export const AllPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: pages } = useSWR(
+    workspaceSlug && projectId ? ALL_PAGES_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => pagesService.getAllPages(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  return (
+    <div className="mt-4 space-y-4">
+      <PagesView pages={pages} viewType={viewType} />
+    </div>
+  );
+};
diff --git a/app/components/pages/pages-list/favorite-pages-list.tsx b/app/components/pages/pages-list/favorite-pages-list.tsx
new file mode 100644
index 000000000..bf0ab8133
--- /dev/null
+++ b/app/components/pages/pages-list/favorite-pages-list.tsx
@@ -0,0 +1,30 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import pagesService from "services/pages.service";
+// components
+import { PagesView } from "components/pages";
+// types
+import { TPagesListProps } from "./types";
+// fetch-keys
+import { FAVORITE_PAGES_LIST } from "constants/fetch-keys";
+
+export const FavoritePagesList: React.FC<TPagesListProps> = ({ viewType }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: pages } = useSWR(
+    workspaceSlug && projectId ? FAVORITE_PAGES_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => pagesService.getFavoritePages(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  return (
+    <div className="mt-4 space-y-4">
+      <PagesView pages={pages} viewType={viewType} />
+    </div>
+  );
+};
diff --git a/app/components/pages/pages-list/index.ts b/app/components/pages/pages-list/index.ts
new file mode 100644
index 000000000..898138710
--- /dev/null
+++ b/app/components/pages/pages-list/index.ts
@@ -0,0 +1,6 @@
+export * from "./all-pages-list";
+export * from "./favorite-pages-list";
+export * from "./my-pages-list";
+export * from "./other-pages-list";
+export * from "./recent-pages-list";
+export * from "./types";
diff --git a/app/components/pages/pages-list/my-pages-list.tsx b/app/components/pages/pages-list/my-pages-list.tsx
new file mode 100644
index 000000000..41704e52e
--- /dev/null
+++ b/app/components/pages/pages-list/my-pages-list.tsx
@@ -0,0 +1,30 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import pagesService from "services/pages.service";
+// components
+import { PagesView } from "components/pages";
+// types
+import { TPagesListProps } from "./types";
+// fetch-keys
+import { MY_PAGES_LIST } from "constants/fetch-keys";
+
+export const MyPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: pages } = useSWR(
+    workspaceSlug && projectId ? MY_PAGES_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => pagesService.getMyPages(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  return (
+    <div className="mt-4 space-y-4">
+      <PagesView pages={pages} viewType={viewType} />
+    </div>
+  );
+};
diff --git a/app/components/pages/pages-list/other-pages-list.tsx b/app/components/pages/pages-list/other-pages-list.tsx
new file mode 100644
index 000000000..7cf21a3e2
--- /dev/null
+++ b/app/components/pages/pages-list/other-pages-list.tsx
@@ -0,0 +1,30 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import pagesService from "services/pages.service";
+// components
+import { PagesView } from "components/pages";
+// types
+import { TPagesListProps } from "./types";
+// fetch-keys
+import { OTHER_PAGES_LIST } from "constants/fetch-keys";
+
+export const OtherPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: pages } = useSWR(
+    workspaceSlug && projectId ? OTHER_PAGES_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => pagesService.getOtherPages(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  return (
+    <div className="mt-4 space-y-4">
+      <PagesView pages={pages} viewType={viewType} />
+    </div>
+  );
+};
diff --git a/app/components/pages/pages-list/recent-pages-list.tsx b/app/components/pages/pages-list/recent-pages-list.tsx
new file mode 100644
index 000000000..7b162f796
--- /dev/null
+++ b/app/components/pages/pages-list/recent-pages-list.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import pagesService from "services/pages.service";
+// components
+import { PagesView } from "components/pages";
+// ui
+import { EmptyState, Loader } from "components/ui";
+// images
+import emptyPage from "public/empty-state/empty-page.svg";
+// helpers
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+// types
+import { TPagesListProps } from "./types";
+import { RecentPagesResponse } from "types";
+// fetch-keys
+import { RECENT_PAGES_LIST } from "constants/fetch-keys";
+
+export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: pages } = useSWR(
+    workspaceSlug && projectId ? RECENT_PAGES_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => pagesService.getRecentPages(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const isEmpty = pages && Object.keys(pages).every((key) => pages[key].length === 0);
+
+  return (
+    <>
+      {pages ? (
+        Object.keys(pages).length > 0 && !isEmpty ? (
+          <div className="mt-4 space-y-4 flex flex-col gap-5">
+            {Object.keys(pages).map((key) => {
+              if (pages[key].length === 0) return null;
+
+              return (
+                <React.Fragment key={key}>
+                  <div>
+                    <h2 className="text-xl font-semibold capitalize mb-4">
+                      {replaceUnderscoreIfSnakeCase(key)}
+                    </h2>
+                    <PagesView
+                      pages={pages[key as keyof RecentPagesResponse]}
+                      viewType={viewType}
+                    />
+                  </div>
+                </React.Fragment>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="mt-4">
+            <EmptyState
+              type="page"
+              title="Create New Page"
+              description="Create and document issues effortlessly in one place with Plane Notes, AI-powered for ease."
+              imgURL={emptyPage}
+            />
+          </div>
+        )
+      ) : (
+        <Loader className="mt-8 space-y-4">
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+        </Loader>
+      )}
+    </>
+  );
+};
diff --git a/app/components/pages/pages-list/types.ts b/app/components/pages/pages-list/types.ts
new file mode 100644
index 000000000..e25624f5e
--- /dev/null
+++ b/app/components/pages/pages-list/types.ts
@@ -0,0 +1,5 @@
+import { TPageViewProps } from "types";
+
+export type TPagesListProps = {
+  viewType: TPageViewProps;
+};
diff --git a/app/components/pages/pages-view.tsx b/app/components/pages/pages-view.tsx
new file mode 100644
index 000000000..58aa21c07
--- /dev/null
+++ b/app/components/pages/pages-view.tsx
@@ -0,0 +1,278 @@
+import { useState } from "react";
+
+import useSWR, { mutate } from "swr";
+import { useRouter } from "next/router";
+
+// services
+import pagesService from "services/pages.service";
+import projectService from "services/project.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import {
+  CreateUpdatePageModal,
+  DeletePageModal,
+  SinglePageDetailedItem,
+  SinglePageListItem,
+} from "components/pages";
+// ui
+import { EmptyState, Loader } from "components/ui";
+// images
+import emptyPage from "public/empty-state/empty-page.svg";
+// types
+import { IPage, TPageViewProps } from "types";
+import {
+  ALL_PAGES_LIST,
+  FAVORITE_PAGES_LIST,
+  MY_PAGES_LIST,
+  PROJECT_MEMBERS,
+  RECENT_PAGES_LIST,
+} from "constants/fetch-keys";
+
+type Props = {
+  pages: IPage[] | undefined;
+  viewType: TPageViewProps;
+};
+
+export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
+  const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false);
+  const [selectedPageToUpdate, setSelectedPageToUpdate] = useState<IPage | null>(null);
+
+  const [deletePageModal, setDeletePageModal] = useState(false);
+  const [selectedPageToDelete, setSelectedPageToDelete] = useState<IPage | null>(null);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { data: people } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId.toString()) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  const handleEditPage = (page: IPage) => {
+    setSelectedPageToUpdate(page);
+    setCreateUpdatePageModal(true);
+  };
+
+  const handleDeletePage = (page: IPage) => {
+    setSelectedPageToDelete(page);
+    setDeletePageModal(true);
+  };
+
+  const handleAddToFavorites = (page: IPage) => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate<IPage[]>(
+      ALL_PAGES_LIST(projectId.toString()),
+      (prevData) =>
+        (prevData ?? []).map((p) => {
+          if (p.id === page.id) p.is_favorite = true;
+
+          return p;
+        }),
+      false
+    );
+    mutate<IPage[]>(
+      MY_PAGES_LIST(projectId.toString()),
+      (prevData) =>
+        (prevData ?? []).map((p) => {
+          if (p.id === page.id) p.is_favorite = true;
+
+          return p;
+        }),
+      false
+    );
+    mutate<IPage[]>(
+      FAVORITE_PAGES_LIST(projectId.toString()),
+      (prevData) => [page, ...(prevData ?? [])],
+      false
+    );
+
+    pagesService
+      .addPageToFavorites(workspaceSlug.toString(), projectId.toString(), {
+        page: page.id,
+      })
+      .then(() => {
+        mutate(RECENT_PAGES_LIST(projectId.toString()));
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Successfully added the page to favorites.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the page to favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleRemoveFromFavorites = (page: IPage) => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate<IPage[]>(
+      ALL_PAGES_LIST(projectId.toString()),
+      (prevData) =>
+        (prevData ?? []).map((p) => {
+          if (p.id === page.id) p.is_favorite = false;
+
+          return p;
+        }),
+      false
+    );
+    mutate<IPage[]>(
+      MY_PAGES_LIST(projectId.toString()),
+      (prevData) =>
+        (prevData ?? []).map((p) => {
+          if (p.id === page.id) p.is_favorite = false;
+
+          return p;
+        }),
+      false
+    );
+    mutate<IPage[]>(
+      FAVORITE_PAGES_LIST(projectId.toString()),
+      (prevData) => (prevData ?? []).filter((p) => p.id !== page.id),
+      false
+    );
+
+    pagesService
+      .removePageFromFavorites(workspaceSlug.toString(), projectId.toString(), page.id)
+      .then(() => {
+        mutate(RECENT_PAGES_LIST(projectId.toString()));
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Successfully removed the page from favorites.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the page from favorites. Please try again.",
+        });
+      });
+  };
+
+  const partialUpdatePage = (page: IPage, formData: Partial<IPage>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate<IPage[]>(
+      ALL_PAGES_LIST(projectId.toString()),
+      (prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })),
+      false
+    );
+    mutate<IPage[]>(
+      MY_PAGES_LIST(projectId.toString()),
+      (prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })),
+      false
+    );
+    mutate<IPage[]>(
+      FAVORITE_PAGES_LIST(projectId.toString()),
+      (prevData) => (prevData ?? []).map((p) => ({ ...p, ...(p.id === page.id ? formData : {}) })),
+      false
+    );
+
+    pagesService
+      .patchPage(workspaceSlug.toString(), projectId.toString(), page.id, formData)
+      .then(() => {
+        mutate(RECENT_PAGES_LIST(projectId.toString()));
+      });
+  };
+
+  return (
+    <>
+      <CreateUpdatePageModal
+        isOpen={createUpdatePageModal}
+        handleClose={() => setCreateUpdatePageModal(false)}
+        data={selectedPageToUpdate}
+      />
+      <DeletePageModal
+        isOpen={deletePageModal}
+        setIsOpen={setDeletePageModal}
+        data={selectedPageToDelete}
+      />
+      {pages ? (
+        pages.length > 0 ? (
+          viewType === "list" ? (
+            <ul role="list" className="divide-y divide-brand-base">
+              {pages.map((page) => (
+                <SinglePageListItem
+                  key={page.id}
+                  page={page}
+                  people={people}
+                  handleEditPage={() => handleEditPage(page)}
+                  handleDeletePage={() => handleDeletePage(page)}
+                  handleAddToFavorites={() => handleAddToFavorites(page)}
+                  handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)}
+                  partialUpdatePage={partialUpdatePage}
+                />
+              ))}
+            </ul>
+          ) : viewType === "detailed" ? (
+            <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base">
+              {pages.map((page) => (
+                <SinglePageDetailedItem
+                  key={page.id}
+                  page={page}
+                  people={people}
+                  handleEditPage={() => handleEditPage(page)}
+                  handleDeletePage={() => handleDeletePage(page)}
+                  handleAddToFavorites={() => handleAddToFavorites(page)}
+                  handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)}
+                  partialUpdatePage={partialUpdatePage}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="rounded-[10px] border border-brand-base">
+              {pages.map((page) => (
+                <SinglePageDetailedItem
+                  key={page.id}
+                  page={page}
+                  people={people}
+                  handleEditPage={() => handleEditPage(page)}
+                  handleDeletePage={() => handleDeletePage(page)}
+                  handleAddToFavorites={() => handleAddToFavorites(page)}
+                  handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)}
+                  partialUpdatePage={partialUpdatePage}
+                />
+              ))}
+            </div>
+          )
+        ) : (
+          <EmptyState
+            type="page"
+            title="Create New Page"
+            description="Create and document issues effortlessly in one place with Plane Notes, AI-powered for ease."
+            imgURL={emptyPage}
+          />
+        )
+      ) : viewType === "list" ? (
+        <Loader className="space-y-4">
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+        </Loader>
+      ) : viewType === "detailed" ? (
+        <Loader className="space-y-4">
+          <Loader.Item height="150px" />
+          <Loader.Item height="150px" />
+        </Loader>
+      ) : (
+        <Loader className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          <Loader.Item height="150px" />
+          <Loader.Item height="150px" />
+          <Loader.Item height="150px" />
+        </Loader>
+      )}
+    </>
+  );
+};
diff --git a/app/components/pages/single-page-block.tsx b/app/components/pages/single-page-block.tsx
new file mode 100644
index 000000000..34b7f6583
--- /dev/null
+++ b/app/components/pages/single-page-block.tsx
@@ -0,0 +1,454 @@
+import { useEffect, useState, useRef } from "react";
+
+import { useRouter } from "next/router";
+import Link from "next/link";
+import dynamic from "next/dynamic";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// react-beautiful-dnd
+import { Draggable } from "react-beautiful-dnd";
+// services
+import pagesService from "services/pages.service";
+import issuesService from "services/issues.service";
+import aiService from "services/ai.service";
+// hooks
+import useToast from "hooks/use-toast";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// components
+import { GptAssistantModal } from "components/core";
+import { CreateUpdateBlockInline } from "components/pages";
+// ui
+import { CustomMenu, Loader } from "components/ui";
+// icons
+import { LayerDiagonalIcon } from "components/icons";
+import { ArrowPathIcon, LinkIcon } from "@heroicons/react/20/solid";
+import {
+  BoltIcon,
+  CheckIcon,
+  EllipsisVerticalIcon,
+  PencilIcon,
+  SparklesIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import { IIssue, IPageBlock, IProject } from "types";
+// fetch-keys
+import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
+
+type Props = {
+  block: IPageBlock;
+  projectDetails: IProject | undefined;
+  index: number;
+};
+
+const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
+  ssr: false,
+  loading: () => (
+    <Loader className="mx-4 mt-6">
+      <Loader.Item height="100px" width="100%" />
+    </Loader>
+  ),
+});
+
+export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index }) => {
+  const [isSyncing, setIsSyncing] = useState(false);
+  const [createBlockForm, setCreateBlockForm] = useState(false);
+  const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
+
+  const [gptAssistantModal, setGptAssistantModal] = useState(false);
+
+  const [isMenuActive, setIsMenuActive] = useState(false);
+  const actionSectionRef = useRef<HTMLDivElement | null>(null);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, pageId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { handleSubmit, watch, reset, setValue, register } = useForm<IPageBlock>({
+    defaultValues: {
+      name: "",
+      description: {},
+      description_html: "<p></p>",
+    },
+  });
+
+  const updatePageBlock = async (formData: Partial<IPageBlock>) => {
+    if (!workspaceSlug || !projectId || !pageId) return;
+
+    if (!formData.name || formData.name.length === 0 || formData.name === "") return;
+
+    if (block.issue && block.sync) setIsSyncing(true);
+
+    mutate<IPageBlock[]>(
+      PAGE_BLOCKS_LIST(pageId as string),
+      (prevData) =>
+        prevData?.map((p) => {
+          if (p.id === block.id) return { ...p, ...formData };
+
+          return p;
+        }),
+      false
+    );
+
+    await pagesService
+      .patchPageBlock(workspaceSlug as string, projectId as string, pageId as string, block.id, {
+        name: formData.name,
+        description: formData.description,
+        description_html: formData.description_html,
+      })
+      .then((res) => {
+        mutate(PAGE_BLOCKS_LIST(pageId as string));
+        if (block.issue && block.sync)
+          issuesService
+            .patchIssue(workspaceSlug as string, projectId as string, block.issue, {
+              name: res.name,
+              description: res.description,
+              description_html: res.description_html,
+            })
+            .finally(() => setIsSyncing(false));
+      });
+  };
+
+  const pushBlockIntoIssues = async () => {
+    if (!workspaceSlug || !projectId || !pageId) return;
+
+    await pagesService
+      .convertPageBlockToIssue(
+        workspaceSlug as string,
+        projectId as string,
+        pageId as string,
+        block.id
+      )
+      .then((res: IIssue) => {
+        mutate<IPageBlock[]>(
+          PAGE_BLOCKS_LIST(pageId as string),
+          (prevData) =>
+            (prevData ?? []).map((p) => {
+              if (p.id === block.id) return { ...p, issue: res.id, issue_detail: res };
+
+              return p;
+            }),
+          false
+        );
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Page block converted to issue successfully.",
+        });
+      })
+      .catch((res) => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Page block could not be converted to issue. Please try again.",
+        });
+      });
+  };
+
+  const deletePageBlock = async () => {
+    if (!workspaceSlug || !projectId || !pageId) return;
+
+    mutate<IPageBlock[]>(
+      PAGE_BLOCKS_LIST(pageId as string),
+      (prevData) => (prevData ?? []).filter((p) => p.id !== block.id),
+      false
+    );
+
+    await pagesService
+      .deletePageBlock(workspaceSlug as string, projectId as string, pageId as string, block.id)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Page could not be deleted. Please try again.",
+        });
+      });
+  };
+
+  const handleAutoGenerateDescription = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    setIAmFeelingLucky(true);
+
+    aiService
+      .createGptTask(workspaceSlug as string, projectId as string, {
+        prompt: block.name,
+        task: "Generate a proper description for this issue in context of a project management software.",
+      })
+      .then((res) => {
+        if (res.response === "")
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "Block title isn't informative enough to generate the description. Please try with a different title.",
+          });
+        else handleAiAssistance(res.response_html);
+      })
+      .catch((err) => {
+        if (err.status === 429)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "You have reached the maximum number of requests of 50 requests per month per user.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Some error occurred. Please try again.",
+          });
+      })
+      .finally(() => setIAmFeelingLucky(false));
+  };
+
+  const handleAiAssistance = async (response: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    setValue("description", {});
+    setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
+    handleSubmit(updatePageBlock)()
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Block description updated successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Block description could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const handleBlockSync = () => {
+    if (!workspaceSlug || !projectId || !pageId) return;
+
+    mutate<IPageBlock[]>(
+      PAGE_BLOCKS_LIST(pageId as string),
+      (prevData) =>
+        (prevData ?? []).map((p) => {
+          if (p.id === block.id) return { ...p, sync: !block.sync };
+
+          return p;
+        }),
+      false
+    );
+
+    pagesService.patchPageBlock(
+      workspaceSlug as string,
+      projectId as string,
+      pageId as string,
+      block.id,
+      {
+        sync: !block.sync,
+      }
+    );
+  };
+
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
+    });
+  };
+
+  useEffect(() => {
+    if (!block) return;
+
+    reset({ ...block });
+  }, [reset, block]);
+
+  useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
+  return (
+    <Draggable draggableId={block.id} index={index} isDragDisabled={createBlockForm}>
+      {(provided, snapshot) => (
+        <>
+          {createBlockForm ? (
+            <div
+              className="mb-4 pt-4"
+              ref={provided.innerRef}
+              {...provided.draggableProps}
+              {...provided.dragHandleProps}
+            >
+              <CreateUpdateBlockInline
+                setGptAssistantModal={() => setGptAssistantModal((prev) => !prev)}
+                handleClose={() => setCreateBlockForm(false)}
+                data={block}
+                setIsSyncing={setIsSyncing}
+                focus="name"
+              />
+            </div>
+          ) : (
+            <div
+              className={`group relative text-brand-secondary ${
+                snapshot.isDragging ? "rounded-[10px] bg-brand-surface-2 p-6 shadow" : ""
+              }`}
+              ref={provided.innerRef}
+              {...provided.draggableProps}
+            >
+              <button
+                type="button"
+                className="absolute top-4 -left-4 hidden rounded p-0.5 hover:bg-brand-surface-2 group-hover:!flex"
+                {...provided.dragHandleProps}
+              >
+                <EllipsisVerticalIcon className="h-[18px]" />
+                <EllipsisVerticalIcon className="-ml-3 h-[18px]" />
+              </button>
+              <div
+                ref={actionSectionRef}
+                className={`absolute top-4 right-0 hidden items-center gap-2 pl-4 group-hover:!flex ${
+                  isMenuActive ? "!flex" : ""
+                }`}
+              >
+                {block.issue && block.sync && (
+                  <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded bg-brand-surface-2 py-1 px-1.5 text-xs">
+                    {isSyncing ? (
+                      <ArrowPathIcon className="h-3 w-3 animate-spin" />
+                    ) : (
+                      <CheckIcon className="h-3 w-3" />
+                    )}
+                    {isSyncing ? "Syncing..." : "Synced"}
+                  </div>
+                )}
+                <button
+                  type="button"
+                  className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-2 ${
+                    iAmFeelingLucky ? "cursor-wait bg-brand-surface-2" : ""
+                  }`}
+                  onClick={handleAutoGenerateDescription}
+                  disabled={iAmFeelingLucky}
+                >
+                  {iAmFeelingLucky ? (
+                    "Generating response..."
+                  ) : (
+                    <>
+                      <SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
+                    </>
+                  )}
+                </button>
+                <button
+                  type="button"
+                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-2"
+                  onClick={() => setGptAssistantModal((prevData) => !prevData)}
+                >
+                  <SparklesIcon className="h-4 w-4" />
+                  AI
+                </button>
+                <button
+                  type="button"
+                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-2"
+                  onClick={() => setCreateBlockForm(true)}
+                >
+                  <PencilIcon className="h-3.5 w-3.5" />
+                </button>
+                <CustomMenu
+                  customButton={
+                    <button
+                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-brand-surface-2"
+                      onClick={() => setIsMenuActive(!isMenuActive)}
+                    >
+                      <BoltIcon className="h-4.5 w-3.5" />
+                    </button>
+                  }
+                >
+                  {block.issue ? (
+                    <>
+                      <CustomMenu.MenuItem onClick={handleBlockSync}>
+                        <span className="flex items-center gap-1">
+                          <ArrowPathIcon className="h-4 w-4" />
+                          <span>Turn sync {block.sync ? "off" : "on"}</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                      <CustomMenu.MenuItem onClick={handleCopyText}>
+                        <span className="flex items-center gap-1">
+                          <LinkIcon className="h-4 w-4" />
+                          Copy issue link
+                        </span>
+                      </CustomMenu.MenuItem>
+                    </>
+                  ) : (
+                    <CustomMenu.MenuItem onClick={pushBlockIntoIssues}>
+                      <span className="flex items-center gap-1">
+                        <LayerDiagonalIcon className="h-4 w-4" />
+                        Push into issues
+                      </span>
+                    </CustomMenu.MenuItem>
+                  )}
+                  <CustomMenu.MenuItem onClick={deletePageBlock}>
+                    <span className="flex items-center gap-1">
+                      <TrashIcon className="h-4 w-4" />
+                      Delete block
+                    </span>
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+              </div>
+              <div
+                className={`flex items-start gap-2 ${
+                  snapshot.isDragging ? "" : "border-brand-base py-4 [&:not(:last-child)]:border-b"
+                }`}
+              >
+                <div
+                  className="w-full cursor-pointer overflow-hidden break-all px-4"
+                  onClick={() => setCreateBlockForm(true)}
+                >
+                  <div className="flex">
+                    {block.issue && (
+                      <div className="mr-1.5 flex">
+                        <Link
+                          href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}
+                        >
+                          <a className="flex h-6 flex-shrink-0 items-center gap-1 rounded bg-brand-surface-2 px-1.5 py-1 text-xs">
+                            <LayerDiagonalIcon height="16" width="16" />
+                            {projectDetails?.identifier}-{block.issue_detail?.sequence_id}
+                          </a>
+                        </Link>
+                      </div>
+                    )}
+                    <h3 className="max-w-[1000px] overflow-hidden text-sm text-brand-base">
+                      {block.name}
+                    </h3>
+                  </div>
+                  {block?.description_stripped.length > 0 && (
+                    <p className="mt-3 h-5 truncate text-sm font-normal text-brand-secondary">
+                      {block.description_stripped}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <GptAssistantModal
+                block={block}
+                isOpen={gptAssistantModal}
+                handleClose={() => setGptAssistantModal(false)}
+                inset="top-8 left-0"
+                content={block.description_stripped}
+                htmlContent={block.description_html}
+                onResponse={handleAiAssistance}
+                projectId={projectId as string}
+              />
+            </div>
+          )}
+        </>
+      )}
+    </Draggable>
+  );
+};
diff --git a/app/components/pages/single-page-detailed-item.tsx b/app/components/pages/single-page-detailed-item.tsx
new file mode 100644
index 000000000..9c025f21d
--- /dev/null
+++ b/app/components/pages/single-page-detailed-item.tsx
@@ -0,0 +1,217 @@
+import React from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// ui
+import { CustomMenu, Tooltip } from "components/ui";
+// icons
+import {
+  LinkIcon,
+  LockClosedIcon,
+  LockOpenIcon,
+  PencilIcon,
+  StarIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+import { ExclamationIcon } from "components/icons";
+// helpers
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+import { renderShortTime, renderShortDate, renderLongDateFormat } from "helpers/date-time.helper";
+// types
+import { IPage, IProjectMember } from "types";
+
+type TSingleStatProps = {
+  page: IPage;
+  people: IProjectMember[] | undefined;
+  handleEditPage: () => void;
+  handleDeletePage: () => void;
+  handleAddToFavorites: () => void;
+  handleRemoveFromFavorites: () => void;
+  partialUpdatePage: (page: IPage, formData: Partial<IPage>) => void;
+};
+
+export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
+  page,
+  people,
+  handleEditPage,
+  handleDeletePage,
+  handleAddToFavorites,
+  handleRemoveFromFavorites,
+  partialUpdatePage,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { user } = useUser();
+
+  const { setToastAlert } = useToast();
+
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${projectId}/pages/${page.id}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Page link copied to clipboard.",
+      });
+    });
+  };
+
+  return (
+    <div className="relative">
+      <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
+        <a className="block p-4">
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <p className="mr-2 truncate text-sm">{truncateText(page.name, 75)}</p>
+              {page.label_details.length > 0 &&
+                page.label_details.map((label) => (
+                  <div
+                    key={label.id}
+                    className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
+                    style={{
+                      backgroundColor: `${
+                        label?.color && label.color !== "" ? label.color : "#000000"
+                      }20`,
+                    }}
+                  >
+                    <span
+                      className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                      style={{
+                        backgroundColor:
+                          label?.color && label.color !== "" ? label.color : "#000000",
+                      }}
+                    />
+                    {label.name}
+                  </div>
+                ))}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Tooltip
+                tooltipContent={`Last updated at ${
+                  renderShortTime(page.updated_at) +
+                  ` ${new Date(page.updated_at).getHours() < 12 ? "am" : "pm"}`
+                } on ${renderShortDate(page.updated_at)}`}
+              >
+                <p className="text-sm text-gray-400">{renderShortTime(page.updated_at)}</p>
+              </Tooltip>
+              {page.is_favorite ? (
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleRemoveFromFavorites();
+                  }}
+                  className="z-10 grid place-items-center"
+                >
+                  <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleAddToFavorites();
+                  }}
+                  className="z-10 grid place-items-center"
+                >
+                  <StarIcon className="h-4 w-4 " color="#858E96" />
+                </button>
+              )}
+              {page.created_by === user?.id && (
+                <Tooltip
+                  tooltipContent={`${
+                    page.access
+                      ? "This page is only visible to you."
+                      : "This page can be viewed by anyone in the project."
+                  }`}
+                  theme="dark"
+                >
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      partialUpdatePage(page, { access: page.access ? 0 : 1 });
+                    }}
+                  >
+                    {page.access ? (
+                      <LockClosedIcon className="h-4 w-4" color="#858e96" />
+                    ) : (
+                      <LockOpenIcon className="h-4 w-4" color="#858e96" />
+                    )}
+                  </button>
+                </Tooltip>
+              )}
+              <Tooltip
+                theme="dark"
+                position="top-right"
+                tooltipContent={`Created by ${
+                  people?.find((person) => person.member.id === page.created_by)?.member
+                    .first_name ?? ""
+                } on ${renderLongDateFormat(`${page.created_at}`)}`}
+              >
+                <span>
+                  <ExclamationIcon className="h-4 w-4 text-gray-400" />
+                </span>
+              </Tooltip>
+              <CustomMenu verticalEllipsis>
+                <CustomMenu.MenuItem
+                  onClick={(e: any) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleEditPage();
+                  }}
+                >
+                  <span className="flex items-center justify-start gap-2">
+                    <PencilIcon className="h-3.5 w-3.5" />
+                    <span>Edit Page</span>
+                  </span>
+                </CustomMenu.MenuItem>
+                <CustomMenu.MenuItem
+                  onClick={(e: any) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleDeletePage();
+                  }}
+                >
+                  <span className="flex items-center justify-start gap-2">
+                    <TrashIcon className="h-3.5 w-3.5" />
+                    <span>Delete Page</span>
+                  </span>
+                </CustomMenu.MenuItem>
+                <CustomMenu.MenuItem
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleCopyText();
+                  }}
+                >
+                  <div className="flex items-center justify-start gap-2">
+                    <LinkIcon className="h-4 w-4" />
+                    <span>Copy Page link</span>
+                  </div>
+                </CustomMenu.MenuItem>
+              </CustomMenu>
+            </div>
+          </div>
+          <div className="relative mt-2 space-y-2 text-sm text-brand-secondary">
+            {page.blocks.length > 0
+              ? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>)
+              : null}
+          </div>
+        </a>
+      </Link>
+    </div>
+  );
+};
diff --git a/app/components/pages/single-page-list-item.tsx b/app/components/pages/single-page-list-item.tsx
new file mode 100644
index 000000000..bb9589502
--- /dev/null
+++ b/app/components/pages/single-page-list-item.tsx
@@ -0,0 +1,214 @@
+import React from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// ui
+import { CustomMenu, Tooltip } from "components/ui";
+// icons
+import {
+  DocumentTextIcon,
+  LinkIcon,
+  LockClosedIcon,
+  LockOpenIcon,
+  PencilIcon,
+  StarIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+import { ExclamationIcon } from "components/icons";
+// helpers
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+import { renderLongDateFormat, renderShortDate, renderShortTime } from "helpers/date-time.helper";
+// types
+import { IPage, IProjectMember } from "types";
+
+type TSingleStatProps = {
+  page: IPage;
+  people: IProjectMember[] | undefined;
+  handleEditPage: () => void;
+  handleDeletePage: () => void;
+  handleAddToFavorites: () => void;
+  handleRemoveFromFavorites: () => void;
+  partialUpdatePage: (page: IPage, formData: Partial<IPage>) => void;
+};
+
+export const SinglePageListItem: React.FC<TSingleStatProps> = ({
+  page,
+  people,
+  handleEditPage,
+  handleDeletePage,
+  handleAddToFavorites,
+  handleRemoveFromFavorites,
+  partialUpdatePage,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { user } = useUser();
+
+  const { setToastAlert } = useToast();
+
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${projectId}/pages/${page.id}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Page link copied to clipboard.",
+      });
+    });
+  };
+
+  return (
+    <li>
+      <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
+        <a>
+          <div className="relative rounded p-4 text-brand-secondary hover:bg-brand-surface-2">
+            <div className="flex items-center justify-between">
+              <div className="flex flex-wrap items-center gap-2">
+                <DocumentTextIcon className="h-4 w-4" />
+                <p className="mr-2 truncate text-sm text-brand-base">
+                  {truncateText(page.name, 75)}
+                </p>
+                {page.label_details.length > 0 &&
+                  page.label_details.map((label) => (
+                    <div
+                      key={label.id}
+                      className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
+                      style={{
+                        backgroundColor: `${label?.color}20`,
+                      }}
+                    >
+                      <span
+                        className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                        style={{
+                          backgroundColor: label?.color,
+                        }}
+                      />
+                      {label.name}
+                    </div>
+                  ))}
+              </div>
+              <div className="ml-2 flex flex-shrink-0">
+                <div className="flex items-center gap-2">
+                  <Tooltip
+                    tooltipContent={`Last updated at ${renderShortTime(
+                      page.updated_at
+                    )} on ${renderShortDate(page.updated_at)}`}
+                  >
+                    <p className="text-sm text-gray-400">{renderShortTime(page.updated_at)}</p>
+                  </Tooltip>
+                  {page.is_favorite ? (
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleRemoveFromFavorites();
+                      }}
+                    >
+                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                    </button>
+                  ) : (
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleAddToFavorites();
+                      }}
+                    >
+                      <StarIcon className="h-4 w-4 " color="#858e96" />
+                    </button>
+                  )}
+                  {page.created_by === user?.id && (
+                    <Tooltip
+                      tooltipContent={`${
+                        page.access
+                          ? "This page is only visible to you."
+                          : "This page can be viewed by anyone in the project."
+                      }`}
+                      theme="dark"
+                    >
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          partialUpdatePage(page, { access: page.access ? 0 : 1 });
+                        }}
+                      >
+                        {page.access ? (
+                          <LockClosedIcon className="h-4 w-4" color="#858e96" />
+                        ) : (
+                          <LockOpenIcon className="h-4 w-4" color="#858e96" />
+                        )}
+                      </button>
+                    </Tooltip>
+                  )}
+                  <Tooltip
+                    theme="dark"
+                    position="top-right"
+                    tooltipContent={`Created by ${
+                      people?.find((person) => person.member.id === page.created_by)?.member
+                        .first_name ?? ""
+                    } on ${renderLongDateFormat(`${page.created_at}`)}`}
+                  >
+                    <span>
+                      <ExclamationIcon className="h-4 w-4 text-gray-400" />
+                    </span>
+                  </Tooltip>
+
+                  <CustomMenu width="auto" verticalEllipsis>
+                    <CustomMenu.MenuItem
+                      onClick={(e: any) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleEditPage();
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <PencilIcon className="h-3.5 w-3.5" />
+                        <span>Edit Page</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem
+                      onClick={(e: any) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleDeletePage();
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <TrashIcon className="h-3.5 w-3.5" />
+                        <span>Delete Page</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleCopyText();
+                      }}
+                    >
+                      <div className="flex items-center justify-start gap-2">
+                        <LinkIcon className="h-4 w-4" />
+                        <span>Copy Page link</span>
+                      </div>
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
+              </div>
+            </div>
+          </div>
+        </a>
+      </Link>
+    </li>
+  );
+};
diff --git a/app/components/project/confirm-project-member-remove.tsx b/app/components/project/confirm-project-member-remove.tsx
new file mode 100644
index 000000000..e2cdf1af7
--- /dev/null
+++ b/app/components/project/confirm-project-member-remove.tsx
@@ -0,0 +1,95 @@
+import React, { useRef, useState } from "react";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// ui
+import { SecondaryButton, DangerButton } from "components/ui";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  handleDelete: () => void;
+  data?: any;
+};
+
+const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, handleDelete }) => {
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const handleClose = () => {
+    onClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsDeleteLoading(true);
+    handleDelete();
+    handleClose();
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                        Remove {data?.email}?
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-brand-secondary">
+                          Are you sure you want to remove member- {" "}
+                          <span className="font-bold">{data?.email}</span>
+                          ? They will no longer have access to this project. This action
+                          cannot be undone.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
+                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                    {isDeleteLoading ? "Removing..." : "Remove"}
+                  </DangerButton>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
+
+export default ConfirmProjectMemberRemove;
diff --git a/app/components/project/create-project-modal.tsx b/app/components/project/create-project-modal.tsx
new file mode 100644
index 000000000..1b82210bd
--- /dev/null
+++ b/app/components/project/create-project-modal.tsx
@@ -0,0 +1,326 @@
+import React, { useState, useEffect } from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+import { useForm, Controller } from "react-hook-form";
+
+import { Dialog, Transition } from "@headlessui/react";
+
+// services
+import projectServices from "services/project.service";
+import workspaceService from "services/workspace.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Input, TextArea, CustomSelect, PrimaryButton, SecondaryButton } from "components/ui";
+// icons
+import { XMarkIcon } from "@heroicons/react/24/outline";
+// components
+import { ImagePickerPopover } from "components/core";
+import EmojiIconPicker from "components/emoji-icon-picker";
+// helpers
+import { getRandomEmoji } from "helpers/common.helper";
+// types
+import { IProject } from "types";
+// fetch-keys
+import { PROJECTS_LIST, WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
+// constants
+import { NETWORK_CHOICES } from "constants/project";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const defaultValues: Partial<IProject> = {
+  name: "",
+  identifier: "",
+  description: "",
+  network: 2,
+  icon: getRandomEmoji(),
+  cover_image:
+    "https://images.unsplash.com/photo-1575116464504-9e7652fddcb3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyODUyNTV8MHwxfHNlYXJjaHwxOHx8cGxhbmV8ZW58MHx8fHwxNjgxNDY4NTY5&ixlib=rb-4.0.3&q=80&w=1080",
+};
+
+const IsGuestCondition: React.FC<{
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}> = ({ setIsOpen }) => {
+  const { setToastAlert } = useToast();
+
+  useEffect(() => {
+    setIsOpen(false);
+    setToastAlert({
+      title: "Error",
+      type: "error",
+      message: "You don't have permission to create project.",
+    });
+  }, [setIsOpen, setToastAlert]);
+
+  return null;
+};
+
+export const CreateProjectModal: React.FC<Props> = (props) => {
+  const { isOpen, setIsOpen } = props;
+
+  const [isChangeIdentifierRequired, setIsChangeIdentifierRequired] = useState(true);
+
+  const { setToastAlert } = useToast();
+
+  const {
+    query: { workspaceSlug },
+  } = useRouter();
+
+  const { data: myWorkspaceMembership } = useSWR(
+    workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug as string) : null,
+    workspaceSlug ? () => workspaceService.workspaceMemberMe(workspaceSlug as string) : null,
+    {
+      shouldRetryOnError: false,
+    }
+  );
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    setError,
+    control,
+    watch,
+    setValue,
+  } = useForm<IProject>({
+    defaultValues,
+    mode: "all",
+    reValidateMode: "onChange",
+  });
+
+  const projectName = watch("name") ?? "";
+  const projectIdentifier = watch("identifier") ?? "";
+
+  useEffect(() => {
+    if (projectName && isChangeIdentifierRequired)
+      setValue("identifier", projectName.replace(/ /g, "").toUpperCase().substring(0, 3));
+  }, [projectName, projectIdentifier, setValue, isChangeIdentifierRequired]);
+
+  useEffect(() => () => setIsChangeIdentifierRequired(true), [isOpen]);
+
+  const handleClose = () => {
+    setIsOpen(false);
+    reset(defaultValues);
+  };
+
+  const onSubmit = async (formData: IProject) => {
+    if (!workspaceSlug) return;
+    await projectServices
+      .createProject(workspaceSlug as string, formData)
+      .then((res) => {
+        mutate<IProject[]>(
+          PROJECTS_LIST(workspaceSlug as string),
+          (prevData) => [res, ...(prevData ?? [])],
+          false
+        );
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Project created successfully.",
+        });
+        handleClose();
+      })
+      .catch((err) => {
+        if (err.status === 403) {
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "You don't have permission to create project.",
+          });
+          handleClose();
+          return;
+        }
+        err = err.data;
+        Object.keys(err).map((key) => {
+          const errorMessages = err[key];
+          setError(key as keyof IProject, {
+            message: Array.isArray(errorMessages) ? errorMessages.join(", ") : errorMessages,
+          });
+        });
+      });
+  };
+
+  if (myWorkspaceMembership && isOpen) {
+    if (myWorkspaceMembership.role <= 10) return <IsGuestCondition setIsOpen={setIsOpen} />;
+  }
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="transform rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+                <div className="relative h-36 w-full rounded-t-lg bg-gray-300">
+                  {watch("cover_image") !== null && (
+                    <Image
+                      src={watch("cover_image")!}
+                      layout="fill"
+                      alt="cover image"
+                      objectFit="cover"
+                      className="rounded-t-lg"
+                    />
+                  )}
+
+                  <div className="absolute right-2 top-2 p-2">
+                    <button type="button" onClick={handleClose}>
+                      <XMarkIcon className="h-5 w-5 text-white" />
+                    </button>
+                  </div>
+                  <div className="absolute bottom-0 left-0 flex w-full justify-between px-6 py-5">
+                    <div className="absolute left-0 bottom-0 h-16 w-full bg-gradient-to-t from-black opacity-60" />
+                    <h3 className="z-[1] text-xl text-white">Create Project</h3>
+                    <div>
+                      <ImagePickerPopover
+                        label="Change Cover"
+                        onChange={(image) => {
+                          setValue("cover_image", image);
+                        }}
+                        value={watch("cover_image")}
+                      />
+                    </div>
+                  </div>
+                </div>
+                <form onSubmit={handleSubmit(onSubmit)}>
+                  <div className="mt-5 space-y-4 px-4 py-3">
+                    <div className="flex items-center gap-x-2">
+                      <div>
+                        <EmojiIconPicker
+                          label={String.fromCodePoint(parseInt(watch("icon")))}
+                          onChange={(emoji) => {
+                            setValue("icon", emoji);
+                          }}
+                          value={watch("icon")}
+                        />
+                      </div>
+
+                      <div className="flex-shrink-0 flex-grow">
+                        <Input
+                          id="name"
+                          name="name"
+                          type="name"
+                          placeholder="Enter name"
+                          error={errors.name}
+                          register={register}
+                          className="text-xl"
+                          mode="transparent"
+                          validations={{
+                            required: "Name is required",
+                            maxLength: {
+                              value: 255,
+                              message: "Name should be less than 255 characters",
+                            },
+                          }}
+                        />
+                      </div>
+                    </div>
+
+                    <div>
+                      <Input
+                        id="identifier"
+                        name="identifier"
+                        type="text"
+                        mode="transparent"
+                        className="text-sm"
+                        placeholder="Enter Project Identifier"
+                        error={errors.identifier}
+                        register={register}
+                        onChange={() => setIsChangeIdentifierRequired(false)}
+                        validations={{
+                          required: "Identifier is required",
+                          validate: (value) =>
+                            /^[A-Z]+$/.test(value) || "Identifier must be uppercase text.",
+                          minLength: {
+                            value: 1,
+                            message: "Identifier must at least be of 1 character",
+                          },
+                          maxLength: {
+                            value: 5,
+                            message: "Identifier must at most be of 5 characters",
+                          },
+                        }}
+                      />
+                    </div>
+
+                    <div>
+                      <TextArea
+                        id="description"
+                        name="description"
+                        mode="transparent"
+                        className="text-sm"
+                        placeholder="Enter description"
+                        error={errors.description}
+                        register={register}
+                      />
+                    </div>
+
+                    <div className="w-40">
+                      <Controller
+                        name="network"
+                        control={control}
+                        render={({ field: { onChange, value } }) => (
+                          <CustomSelect
+                            value={value}
+                            onChange={onChange}
+                            label={
+                              Object.keys(NETWORK_CHOICES).find((k) => k === value.toString())
+                                ? NETWORK_CHOICES[value.toString() as keyof typeof NETWORK_CHOICES]
+                                : "Select network"
+                            }
+                            width="w-full"
+                            input
+                          >
+                            {Object.keys(NETWORK_CHOICES).map((key) => (
+                              <CustomSelect.Option key={key} value={parseInt(key)}>
+                                {NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES]}
+                              </CustomSelect.Option>
+                            ))}
+                          </CustomSelect>
+                        )}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="mt-5 flex justify-end gap-2 border-t-2 px-4 py-3">
+                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                    <PrimaryButton type="submit" size="sm" loading={isSubmitting}>
+                      {isSubmitting ? "Adding project..." : "Add Project"}
+                    </PrimaryButton>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/project/delete-project-modal.tsx b/app/components/project/delete-project-modal.tsx
new file mode 100644
index 000000000..07cdd09f8
--- /dev/null
+++ b/app/components/project/delete-project-modal.tsx
@@ -0,0 +1,182 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import projectService from "services/project.service";
+// hooks
+import useToast from "hooks/use-toast";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// ui
+import { DangerButton, Input, SecondaryButton } from "components/ui";
+// types
+import type { IProject, IWorkspace } from "types";
+// fetch-keys
+import { PROJECTS_LIST } from "constants/fetch-keys";
+
+type TConfirmProjectDeletionProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess?: () => void;
+  data: IProject | null;
+};
+
+export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
+  isOpen,
+  data,
+  onClose,
+  onSuccess,
+}) => {
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [confirmProjectName, setConfirmProjectName] = useState("");
+  const [confirmDeleteMyProject, setConfirmDeleteMyProject] = useState(false);
+  const [selectedProject, setSelectedProject] = useState<IProject | null>(null);
+
+  const workspaceSlug = (data?.workspace as IWorkspace)?.slug;
+
+  const { setToastAlert } = useToast();
+
+  const canDelete = confirmProjectName === data?.name && confirmDeleteMyProject;
+
+  useEffect(() => {
+    if (data) setSelectedProject(data);
+    else {
+      const timer = setTimeout(() => {
+        setSelectedProject(null);
+        clearTimeout(timer);
+      }, 300);
+    }
+  }, [data]);
+
+  const handleClose = () => {
+    setIsDeleteLoading(false);
+    const timer = setTimeout(() => {
+      setConfirmProjectName("");
+      setConfirmDeleteMyProject(false);
+      clearTimeout(timer);
+    }, 350);
+    onClose();
+  };
+
+  const handleDeletion = async () => {
+    setIsDeleteLoading(true);
+    if (!data || !workspaceSlug || !canDelete) return;
+    await projectService
+      .deleteProject(workspaceSlug, data.id)
+      .then(() => {
+        handleClose();
+        mutate<IProject[]>(PROJECTS_LIST(workspaceSlug), (prevData) =>
+          prevData?.filter((project: IProject) => project.id !== data.id)
+        );
+        if (onSuccess) onSuccess();
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Project deleted successfully",
+        });
+      })
+      .catch((error) => {
+        console.log(error);
+        setIsDeleteLoading(false);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                <div className="flex flex-col gap-6 p-6">
+                  <div className="flex w-full items-center justify-start gap-6">
+                    <span className="place-items-center rounded-full bg-red-100 p-4">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </span>
+                    <span className="flex items-center justify-start">
+                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete Project</h3>
+                    </span>
+                  </div>
+                  <span>
+                    <p className="text-sm leading-7 text-brand-secondary">
+                      Are you sure you want to delete project{" "}
+                      <span className="break-all font-semibold">{selectedProject?.name}</span>? All
+                      of the data related to the project will be permanently removed. This action
+                      cannot be undone
+                    </p>
+                  </span>
+                  <div className="text-gray-600">
+                    <p className="break-all text-sm ">
+                      Enter the project name{" "}
+                      <span className="font-medium">{selectedProject?.name}</span> to continue:
+                    </p>
+                    <Input
+                      type="text"
+                      placeholder="Project name"
+                      className="mt-2"
+                      value={confirmProjectName}
+                      onChange={(e) => {
+                        setConfirmProjectName(e.target.value);
+                      }}
+                      name="projectName"
+                    />
+                  </div>
+                  <div className="text-gray-600">
+                    <p className="text-sm">
+                      To confirm, type <span className="font-medium">delete my project</span> below:
+                    </p>
+                    <Input
+                      type="text"
+                      placeholder="Enter 'delete my project'"
+                      className="mt-2"
+                      onChange={(e) => {
+                        if (e.target.value === "delete my project") {
+                          setConfirmDeleteMyProject(true);
+                        } else {
+                          setConfirmDeleteMyProject(false);
+                        }
+                      }}
+                      name="typeDelete"
+                    />
+                  </div>
+                  <div className="flex justify-end gap-2">
+                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                    <DangerButton onClick={handleDeletion} loading={isDeleteLoading || !canDelete}>
+                      {isDeleteLoading ? "Deleting..." : "Delete Project"}
+                    </DangerButton>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/project/index.ts b/app/components/project/index.ts
new file mode 100644
index 000000000..47d7a4b1c
--- /dev/null
+++ b/app/components/project/index.ts
@@ -0,0 +1,6 @@
+export * from "./create-project-modal";
+export * from "./delete-project-modal";
+export * from "./sidebar-list";
+export * from "./single-integration-card";
+export * from "./single-project-card";
+export * from "./single-sidebar-project";
diff --git a/app/components/project/join-project-modal.tsx b/app/components/project/join-project-modal.tsx
new file mode 100644
index 000000000..83933dffb
--- /dev/null
+++ b/app/components/project/join-project-modal.tsx
@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+
+// headless ui
+import { Transition, Dialog } from "@headlessui/react";
+// ui
+import { PrimaryButton, SecondaryButton } from "components/ui";
+// types
+import type { IProject } from "types";
+
+// type
+type TJoinProjectModalProps = {
+  data?: IProject;
+  onClose: () => void;
+  onJoin: () => Promise<void>;
+};
+
+export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, onJoin, data }) => {
+  const [isJoiningLoading, setIsJoiningLoading] = useState(false);
+
+  const handleJoin = () => {
+    setIsJoiningLoading(true);
+    onJoin()
+      .then(() => {
+        setIsJoiningLoading(false);
+        handleClose();
+      })
+      .catch(() => {
+        setIsJoiningLoading(false);
+      });
+  };
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <Transition.Root show={Boolean(data)} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
+                <div className="space-y-5">
+                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                    Join Project?
+                  </Dialog.Title>
+                  <p>
+                    Are you sure you want to join{" "}
+                    <span className="font-semibold">{data?.name}</span>?
+                  </p>
+                  <div className="space-y-3" />
+                </div>
+                <div className="mt-5 flex justify-end gap-2">
+                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                  <PrimaryButton type="submit" onClick={handleJoin} loading={isJoiningLoading}>
+                    {isJoiningLoading ? "Joining..." : "Join Project"}
+                  </PrimaryButton>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/project/send-project-invitation-modal.tsx b/app/components/project/send-project-invitation-modal.tsx
new file mode 100644
index 000000000..ea2fa9781
--- /dev/null
+++ b/app/components/project/send-project-invitation-modal.tsx
@@ -0,0 +1,236 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+import { useForm, Controller } from "react-hook-form";
+
+import { Dialog, Transition } from "@headlessui/react";
+// ui
+import { CustomSelect, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import projectService from "services/project.service";
+import workspaceService from "services/workspace.service";
+// types
+import { IProjectMemberInvitation } from "types";
+// fetch-keys
+import { PROJECT_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
+// constants
+import { ROLE } from "constants/workspace";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  members: any[];
+};
+
+type ProjectMember = IProjectMemberInvitation & {
+  member_id: string;
+  user_id: string;
+};
+
+const defaultValues: Partial<ProjectMember> = {
+  email: "",
+  message: "",
+  role: 5,
+  member_id: "",
+  user_id: "",
+};
+
+const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, members }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { data: people } = useSWR(
+    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
+    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null,
+    {
+      onErrorRetry(err, _, __, revalidate, revalidateOpts) {
+        if (err?.status === 403 || err?.status === 401) return;
+        setTimeout(() => revalidate(revalidateOpts), 5000);
+      },
+    }
+  );
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    setValue,
+    control,
+  } = useForm<ProjectMember>({
+    defaultValues,
+  });
+
+  const uninvitedPeople = people?.filter((person) => {
+    const isInvited = members?.find((member) => member.email === person.member.email);
+    return !isInvited;
+  });
+
+  const onSubmit = async (formData: ProjectMember) => {
+    if (!workspaceSlug || !projectId || isSubmitting) return;
+    await projectService
+      .inviteProject(workspaceSlug as string, projectId as string, formData)
+      .then((response) => {
+        setIsOpen(false);
+        mutate(
+          PROJECT_INVITATIONS,
+          (prevData: any[]) => [{ ...formData, ...response }, ...(prevData ?? [])],
+          false
+        );
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Member added successfully",
+        });
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+    const timeout = setTimeout(() => {
+      reset(defaultValues);
+      clearTimeout(timeout);
+    }, 500);
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+                <form onSubmit={handleSubmit(onSubmit)}>
+                  <div className="space-y-5">
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                      Invite Members
+                    </Dialog.Title>
+                    <div className="mt-2">
+                      <p className="text-sm text-brand-secondary">
+                        Invite members to work on your project.
+                      </p>
+                    </div>
+                    <div className="space-y-3">
+                      <div>
+                        <Controller
+                          control={control}
+                          name="user_id"
+                          rules={{ required: "Please select a member" }}
+                          render={({ field: { value, onChange } }) => (
+                            <CustomSelect
+                              value={value}
+                              label={
+                                <div
+                                  className={`${errors.user_id ? "border-red-500 bg-red-50" : ""}`}
+                                >
+                                  {value && value !== ""
+                                    ? people?.find((p) => p.member.id === value)?.member.email
+                                    : "Select email"}
+                                </div>
+                              }
+                              onChange={(val: string) => {
+                                onChange(val);
+                                const person = uninvitedPeople?.find((p) => p.member.id === val);
+
+                                setValue("member_id", val);
+                                setValue("email", person?.member.email ?? "");
+                              }}
+                              input
+                              width="w-full"
+                            >
+                              {uninvitedPeople?.map((person) => (
+                                <CustomSelect.Option
+                                  key={person.member.id}
+                                  value={person.member.id}
+                                >
+                                  {person.member.email}
+                                </CustomSelect.Option>
+                              ))}
+                            </CustomSelect>
+                          )}
+                        />
+                      </div>
+                      <div>
+                        <h6 className="text-brand-secondary">Role</h6>
+                        <Controller
+                          name="role"
+                          control={control}
+                          render={({ field }) => (
+                            <CustomSelect
+                              {...field}
+                              label={
+                                <span className="capitalize">
+                                  {field.value ? ROLE[field.value] : "Select role"}
+                                </span>
+                              }
+                              input
+                              width="w-full"
+                            >
+                              {Object.entries(ROLE).map(([key, label]) => (
+                                <CustomSelect.Option key={key} value={key}>
+                                  {label}
+                                </CustomSelect.Option>
+                              ))}
+                            </CustomSelect>
+                          )}
+                        />
+                      </div>
+                      <div>
+                        <TextArea
+                          id="message"
+                          name="message"
+                          label="Message"
+                          placeholder="Enter message"
+                          error={errors.message}
+                          register={register}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-5 flex justify-end gap-2">
+                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                    <PrimaryButton type="submit" loading={isSubmitting}>
+                      {isSubmitting ? "Sending Invitation..." : "Send Invitation"}
+                    </PrimaryButton>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
+
+export default SendProjectInvitationModal;
diff --git a/app/components/project/settings/single-label.tsx b/app/components/project/settings/single-label.tsx
new file mode 100644
index 000000000..adee30bb5
--- /dev/null
+++ b/app/components/project/settings/single-label.tsx
@@ -0,0 +1,148 @@
+import React, { useState } from "react";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// react-color
+import { TwitterPicker } from "react-color";
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
+// ui
+import { CustomMenu, Input, PrimaryButton, SecondaryButton } from "components/ui";
+// icons
+import { PencilIcon, RectangleGroupIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssueLabels } from "types";
+
+type Props = {
+  label: IIssueLabels;
+  issueLabels: IIssueLabels[];
+  editLabel: (label: IIssueLabels) => void;
+  handleLabelDelete: (labelId: string) => void;
+};
+
+const defaultValues: Partial<IIssueLabels> = {
+  name: "",
+  color: "#ff0000",
+};
+
+const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLabelDelete }) => {
+  const [newLabelForm, setNewLabelForm] = useState(false);
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    watch,
+    control,
+  } = useForm<IIssueLabels>({ defaultValues });
+
+  const children = issueLabels?.filter((l) => l.parent === label.id);
+
+  return (
+    <>
+      {children && children.length === 0 ? (
+        <div className="gap-2 space-y-3 divide-y rounded-md border  border-brand-base p-3 md:w-2/3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <span
+                className="h-3 w-3 flex-shrink-0 rounded-full"
+                style={{
+                  backgroundColor: label.color,
+                }}
+              />
+              <h6 className="text-sm">{label.name}</h6>
+            </div>
+            <CustomMenu ellipsis>
+              {/* <CustomMenu.MenuItem>Convert to group</CustomMenu.MenuItem> */}
+              <CustomMenu.MenuItem onClick={() => editLabel(label)}>Edit</CustomMenu.MenuItem>
+              <CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
+                Delete
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          </div>
+          <div className={`flex items-center gap-2 ${newLabelForm ? "" : "hidden"}`}>
+            <div className="h-8 w-8 flex-shrink-0">
+              <Popover className="relative flex h-full w-full items-center justify-center rounded-xl bg-brand-surface-2">
+                {({ open }) => (
+                  <>
+                    <Popover.Button
+                      className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
+                        open ? "text-brand-base" : "text-brand-secondary"
+                      }`}
+                    >
+                      {watch("color") && watch("color") !== "" && (
+                        <span
+                          className="h-4 w-4 rounded"
+                          style={{
+                            backgroundColor: watch("color") ?? "black",
+                          }}
+                        />
+                      )}
+                    </Popover.Button>
+
+                    <Transition
+                      as={React.Fragment}
+                      enter="transition ease-out duration-200"
+                      enterFrom="opacity-0 translate-y-1"
+                      enterTo="opacity-100 translate-y-0"
+                      leave="transition ease-in duration-150"
+                      leaveFrom="opacity-100 translate-y-0"
+                      leaveTo="opacity-0 translate-y-1"
+                    >
+                      <Popover.Panel className="absolute top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
+                        <Controller
+                          name="color"
+                          control={control}
+                          render={({ field: { value, onChange } }) => (
+                            <TwitterPicker
+                              color={value}
+                              onChange={(value) => onChange(value.hex)}
+                            />
+                          )}
+                        />
+                      </Popover.Panel>
+                    </Transition>
+                  </>
+                )}
+              </Popover>
+            </div>
+            <div className="flex w-full flex-col justify-center">
+              <Input
+                type="text"
+                id="labelName"
+                name="name"
+                register={register}
+                placeholder="Label title"
+                validations={{
+                  required: "Label title is required",
+                }}
+                error={errors.name}
+              />
+            </div>
+            <SecondaryButton onClick={() => setNewLabelForm(false)}>Cancel</SecondaryButton>
+            <PrimaryButton loading={isSubmitting}>{isSubmitting ? "Adding" : "Add"}</PrimaryButton>
+          </div>
+        </div>
+      ) : (
+        <div className="rounded-md bg-brand-surface-2 p-4 text-brand-base">
+          <h3 className="flex items-center gap-2 font-medium leading-5">
+            <RectangleGroupIcon className="h-5 w-5" />
+            This is the label group title
+          </h3>
+          <div className="mt-4 pl-5">
+            <div className="group flex items-center justify-between rounded p-2 text-sm hover:bg-brand-surface-1">
+              <h5 className="flex items-center gap-2">
+                <div className="h-2 w-2 rounded-full bg-red-600" />
+                This is the label title
+              </h5>
+              <button type="button" className="hidden group-hover:block">
+                <PencilIcon className="h-3 w-3" />
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default SingleLabel;
diff --git a/app/components/project/sidebar-list.tsx b/app/components/project/sidebar-list.tsx
new file mode 100644
index 000000000..c59abb59e
--- /dev/null
+++ b/app/components/project/sidebar-list.tsx
@@ -0,0 +1,218 @@
+import React, { useState, FC } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// hooks
+import useToast from "hooks/use-toast";
+import useTheme from "hooks/use-theme";
+// services
+import projectService from "services/project.service";
+// components
+import { CreateProjectModal, DeleteProjectModal, SingleSidebarProject } from "components/project";
+// ui
+import { Loader } from "components/ui";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import { IFavoriteProject, IProject } from "types";
+// fetch-keys
+import { FAVORITE_PROJECTS_LIST, PROJECTS_LIST } from "constants/fetch-keys";
+
+export const ProjectSidebarList: FC = () => {
+  const [deleteProjectModal, setDeleteProjectModal] = useState(false);
+  const [projectToDelete, setProjectToDelete] = useState<IProject | null>(null);
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // states
+  const [isCreateProjectModal, setCreateProjectModal] = useState(false);
+  // theme
+  const { collapsed: sidebarCollapse } = useTheme();
+  // toast handler
+  const { setToastAlert } = useToast();
+
+  const { data: favoriteProjects } = useSWR(
+    workspaceSlug ? FAVORITE_PROJECTS_LIST(workspaceSlug as string) : null,
+    () => (workspaceSlug ? projectService.getFavoriteProjects(workspaceSlug as string) : null)
+  );
+
+  const { data: projects } = useSWR(
+    workspaceSlug ? PROJECTS_LIST(workspaceSlug as string) : null,
+    () => (workspaceSlug ? projectService.getProjects(workspaceSlug as string) : null)
+  );
+  const normalProjects = projects?.filter((p) => !p.is_favorite) ?? [];
+
+  const handleAddToFavorites = (project: IProject) => {
+    if (!workspaceSlug) return;
+
+    projectService
+      .addProjectToFavorites(workspaceSlug as string, {
+        project: project.id,
+      })
+      .then(() => {
+        mutate<IProject[]>(
+          PROJECTS_LIST(workspaceSlug as string),
+          (prevData) =>
+            (prevData ?? []).map((p) => ({
+              ...p,
+              is_favorite: p.id === project.id ? true : p.is_favorite,
+            })),
+          false
+        );
+        mutate(FAVORITE_PROJECTS_LIST(workspaceSlug as string));
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Successfully added the project to favorites.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the project from favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleRemoveFromFavorites = (project: IProject) => {
+    if (!workspaceSlug) return;
+
+    projectService
+      .removeProjectFromFavorites(workspaceSlug as string, project.id)
+      .then(() => {
+        mutate<IProject[]>(
+          PROJECTS_LIST(workspaceSlug as string),
+          (prevData) =>
+            (prevData ?? []).map((p) => ({
+              ...p,
+              is_favorite: p.id === project.id ? false : p.is_favorite,
+            })),
+          false
+        );
+        mutate<IFavoriteProject[]>(
+          FAVORITE_PROJECTS_LIST(workspaceSlug as string),
+          (prevData) => (prevData ?? []).filter((p) => p.project !== project.id),
+          false
+        );
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Successfully removed the project from favorites.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the project from favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleDeleteProject = (project: IProject) => {
+    setProjectToDelete(project);
+    setDeleteProjectModal(true);
+  };
+
+  const handleCopyText = (projectId: string) => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Project link copied to clipboard.",
+      });
+    });
+  };
+
+  return (
+    <>
+      <CreateProjectModal isOpen={isCreateProjectModal} setIsOpen={setCreateProjectModal} />
+      <DeleteProjectModal
+        isOpen={deleteProjectModal}
+        onClose={() => setDeleteProjectModal(false)}
+        data={projectToDelete}
+      />
+      <div className="mt-2.5 h-full overflow-y-auto border-t border-brand-base bg-brand-sidebar pt-2.5">
+        {favoriteProjects && favoriteProjects.length > 0 && (
+          <div className="mt-3 flex flex-col space-y-2 px-3">
+            {!sidebarCollapse && <h5 className="text-sm font-semibold text-gray-400">Favorites</h5>}
+            {favoriteProjects.map((favoriteProject) => {
+              const project = favoriteProject.project_detail;
+
+              return (
+                <SingleSidebarProject
+                  key={project.id}
+                  project={project}
+                  sidebarCollapse={sidebarCollapse}
+                  handleDeleteProject={() => handleDeleteProject(project)}
+                  handleCopyText={() => handleCopyText(project.id)}
+                  handleRemoveFromFavorites={() => handleRemoveFromFavorites(project)}
+                />
+              );
+            })}
+          </div>
+        )}
+        <div className="flex flex-col space-y-2 p-3">
+          {!sidebarCollapse && <h5 className="text-sm font-semibold text-gray-400">Projects</h5>}
+          {projects ? (
+            <>
+              {normalProjects.length > 0 ? (
+                normalProjects.map((project) => (
+                  <SingleSidebarProject
+                    key={project.id}
+                    project={project}
+                    sidebarCollapse={sidebarCollapse}
+                    handleDeleteProject={() => handleDeleteProject(project)}
+                    handleCopyText={() => handleCopyText(project.id)}
+                    handleAddToFavorites={() => handleAddToFavorites(project)}
+                  />
+                ))
+              ) : (
+                <div className="space-y-3 text-center">
+                  {!sidebarCollapse && (
+                    <h4 className="text-sm text-gray-700">You don{"'"}t have any project yet</h4>
+                  )}
+                  <button
+                    type="button"
+                    className="group flex w-full items-center justify-center gap-2 rounded-md bg-brand-surface-2 p-2 text-xs text-brand-base"
+                    onClick={() => setCreateProjectModal(true)}
+                  >
+                    <PlusIcon className="h-4 w-4" />
+                    {!sidebarCollapse && "Create Project"}
+                  </button>
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="w-full">
+              <Loader className="space-y-5">
+                <div className="space-y-2">
+                  <Loader.Item height="30px" />
+                  <Loader.Item height="15px" width="80%" />
+                  <Loader.Item height="15px" width="80%" />
+                  <Loader.Item height="15px" width="80%" />
+                </div>
+                <div className="space-y-2">
+                  <Loader.Item height="30px" />
+                  <Loader.Item height="15px" width="80%" />
+                  <Loader.Item height="15px" width="80%" />
+                  <Loader.Item height="15px" width="80%" />
+                </div>
+              </Loader>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/app/components/project/single-integration-card.tsx b/app/components/project/single-integration-card.tsx
new file mode 100644
index 000000000..20a84b0b4
--- /dev/null
+++ b/app/components/project/single-integration-card.tsx
@@ -0,0 +1,113 @@
+import React from "react";
+
+import Image from "next/image";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import projectService from "services/project.service";
+// hooks
+import { useRouter } from "next/router";
+import useToast from "hooks/use-toast";
+// components
+import { SelectRepository } from "components/integration";
+// icons
+import GithubLogo from "public/logos/github-square.png";
+// types
+import { IWorkspaceIntegration } from "types";
+// fetch-keys
+import { PROJECT_GITHUB_REPOSITORY } from "constants/fetch-keys";
+
+type Props = {
+  integration: IWorkspaceIntegration;
+};
+
+export const SingleIntegration: React.FC<Props> = ({ integration }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { data: syncedGithubRepository } = useSWR(
+    projectId ? PROJECT_GITHUB_REPOSITORY(projectId as string) : null,
+    () =>
+      workspaceSlug && projectId && integration
+        ? projectService.getProjectGithubRepository(
+            workspaceSlug as string,
+            projectId as string,
+            integration.id
+          )
+        : null
+  );
+
+  const handleChange = (repo: any) => {
+    if (!workspaceSlug || !projectId || !integration) return;
+
+    const {
+      html_url,
+      owner: { login },
+      id,
+      name,
+    } = repo;
+
+    projectService
+      .syncGiuthubRepository(workspaceSlug as string, projectId as string, integration.id, {
+        name,
+        owner: login,
+        repository_id: id,
+        url: html_url,
+      })
+      .then((res) => {
+        mutate(PROJECT_GITHUB_REPOSITORY(projectId as string));
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: `${login}/${name} respository synced with the project successfully.`,
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Respository could not be synced with the project. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <>
+      {integration && (
+        <div className="flex items-center justify-between gap-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
+          <div className="flex items-start gap-4">
+            <div className="h-12 w-12 flex-shrink-0">
+              <Image src={GithubLogo} alt="GithubLogo" />
+            </div>
+            <div>
+              <h3 className="flex items-center gap-4 text-xl font-semibold">
+                {integration.integration_detail.title}
+              </h3>
+              <p className="text-sm text-gray-400">Select GitHub repository to enable sync.</p>
+            </div>
+          </div>
+          <SelectRepository
+            integration={integration}
+            value={
+              syncedGithubRepository && syncedGithubRepository.length > 0
+                ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}`
+                : null
+            }
+            label={
+              syncedGithubRepository && syncedGithubRepository.length > 0
+                ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}`
+                : "Select Repository"
+            }
+            onChange={handleChange}
+          />
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/app/components/project/single-project-card.tsx b/app/components/project/single-project-card.tsx
new file mode 100644
index 000000000..c9e26f04e
--- /dev/null
+++ b/app/components/project/single-project-card.tsx
@@ -0,0 +1,262 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+import Link from "next/link";
+import Image from "next/image";
+
+import { mutate } from "swr";
+
+// services
+import projectService from "services/project.service";
+// hooks
+import useProjectMembers from "hooks/use-project-members";
+import useToast from "hooks/use-toast";
+// ui
+import { CustomMenu, Loader, Tooltip } from "components/ui";
+// icons
+import {
+  CalendarDaysIcon,
+  LinkIcon,
+  PencilIcon,
+  PlusIcon,
+  StarIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+// helpers
+import { renderShortNumericDateFormat } from "helpers/date-time.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+// types
+import type { IFavoriteProject, IProject } from "types";
+// fetch-keys
+import { FAVORITE_PROJECTS_LIST, PROJECTS_LIST } from "constants/fetch-keys";
+
+export type ProjectCardProps = {
+  project: IProject;
+  setToJoinProject: (id: string | null) => void;
+  setDeleteProject: (id: string | null) => void;
+};
+
+export const SingleProjectCard: React.FC<ProjectCardProps> = ({
+  project,
+  setToJoinProject,
+  setDeleteProject,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  // fetching project members information
+  const { members, hasJoined, isOwner, isMember } = useProjectMembers(
+    workspaceSlug as string,
+    project.id
+  );
+
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug) return;
+
+    projectService
+      .addProjectToFavorites(workspaceSlug as string, {
+        project: project.id,
+      })
+      .then(() => {
+        mutate<IProject[]>(
+          PROJECTS_LIST(workspaceSlug as string),
+          (prevData) =>
+            (prevData ?? []).map((p) => ({
+              ...p,
+              is_favorite: p.id === project.id ? true : p.is_favorite,
+            })),
+          false
+        );
+        mutate(FAVORITE_PROJECTS_LIST(workspaceSlug as string));
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Successfully added the project to favorites.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the project from favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug || !project) return;
+
+    projectService
+      .removeProjectFromFavorites(workspaceSlug as string, project.id)
+      .then(() => {
+        mutate<IProject[]>(
+          PROJECTS_LIST(workspaceSlug as string),
+          (prevData) =>
+            (prevData ?? []).map((p) => ({
+              ...p,
+              is_favorite: p.id === project.id ? false : p.is_favorite,
+            })),
+          false
+        );
+        mutate<IFavoriteProject[]>(
+          FAVORITE_PROJECTS_LIST(workspaceSlug as string),
+          (prevData) => (prevData ?? []).filter((p) => p.project !== project.id),
+          false
+        );
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Successfully removed the project from favorites.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the project from favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${project.id}/issues`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Project link copied to clipboard.",
+      });
+    });
+  };
+
+  return (
+    <>
+      {members ? (
+        <div className="flex flex-col rounded-[10px] bg-brand-base shadow">
+          <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
+            <a>
+              <div className="relative h-32 w-full rounded-t-[10px]">
+                <Image
+                  src={
+                    project.cover_image ??
+                    "https://images.unsplash.com/photo-1672243775941-10d763d9adef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
+                  }
+                  alt={project.name}
+                  layout="fill"
+                  objectFit="cover"
+                  className="rounded-t-[10px]"
+                />
+                <div className="absolute left-7 bottom-4 flex items-center gap-3 text-white">
+                  {!hasJoined ? (
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setToJoinProject(project.id);
+                      }}
+                      className="flex cursor-pointer items-center gap-1 rounded bg-green-600 px-2 py-1 text-xs"
+                    >
+                      <PlusIcon className="h-3 w-3" />
+                      <span>Select to Join</span>
+                    </button>
+                  ) : (
+                    <span className="cursor-default rounded bg-green-600 px-2 py-1 text-xs">
+                      Member
+                    </span>
+                  )}
+                  {project.is_favorite && (
+                    <span className="grid h-6 w-9 cursor-default place-items-center rounded bg-orange-400">
+                      <StarIcon className="h-3 w-3" />
+                    </span>
+                  )}
+                </div>
+              </div>
+            </a>
+          </Link>
+          <div className="flex h-full flex-col rounded-b-[10px] p-4 text-brand-secondary">
+            <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
+              <a>
+                <div className="flex items-center gap-1">
+                  <h3 className="text-1.5xl font-medium text-brand-base">{project.name}</h3>
+                  {project.icon && (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                      {String.fromCodePoint(parseInt(project.icon))}
+                    </span>
+                  )}
+                </div>
+                <p className="mt-3.5 mb-7 break-all">
+                  {truncateText(project.description ?? "", 100)}
+                </p>
+              </a>
+            </Link>
+            <div className="flex h-full items-end justify-between">
+              <Tooltip
+                tooltipContent={`Created at ${renderShortNumericDateFormat(project.created_at)}`}
+                position="bottom"
+                theme="dark"
+              >
+                <div className="flex cursor-default items-center gap-1.5 text-xs">
+                  <CalendarDaysIcon className="h-4 w-4" />
+                  {renderShortNumericDateFormat(project.created_at)}
+                </div>
+              </Tooltip>
+              {hasJoined ? (
+                <div className="flex items-center">
+                  {(isOwner || isMember) && (
+                    <Link href={`/${workspaceSlug}/projects/${project.id}/settings`}>
+                      <a className="grid cursor-pointer place-items-center rounded p-1 duration-300 hover:bg-brand-surface-1">
+                        <PencilIcon className="h-4 w-4" />
+                      </a>
+                    </Link>
+                  )}
+                  <CustomMenu width="auto" verticalEllipsis>
+                    {isOwner && (
+                      <CustomMenu.MenuItem onClick={() => setDeleteProject(project.id)}>
+                        <span className="flex items-center justify-start gap-2">
+                          <TrashIcon className="h-4 w-4" />
+                          <span>Delete project</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                    )}
+                    {project.is_favorite ? (
+                      <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
+                        <span className="flex items-center justify-start gap-2">
+                          <StarIcon className="h-4 w-4" />
+                          <span>Remove from favorites</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                    ) : (
+                      <CustomMenu.MenuItem onClick={handleAddToFavorites}>
+                        <span className="flex items-center justify-start gap-2">
+                          <StarIcon className="h-4 w-4" />
+                          <span>Add to favorites</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                    )}
+                    <CustomMenu.MenuItem onClick={handleCopyText}>
+                      <span className="flex items-center justify-start gap-2">
+                        <LinkIcon className="h-4 w-4" />
+                        <span>Copy project link</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <Loader>
+          <Loader.Item height="144px" />
+        </Loader>
+      )}
+    </>
+  );
+};
diff --git a/app/components/project/single-sidebar-project.tsx b/app/components/project/single-sidebar-project.tsx
new file mode 100644
index 000000000..7c16b62bf
--- /dev/null
+++ b/app/components/project/single-sidebar-project.tsx
@@ -0,0 +1,201 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// headless ui
+import { Disclosure, Transition } from "@headlessui/react";
+// ui
+import { CustomMenu } from "components/ui";
+// icons
+import {
+  ChevronDownIcon,
+  DocumentTextIcon,
+  LinkIcon,
+  StarIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+import {
+  ContrastIcon,
+  LayerDiagonalIcon,
+  PeopleGroupIcon,
+  SettingIcon,
+  ViewListIcon,
+} from "components/icons";
+// helpers
+import { truncateText } from "helpers/string.helper";
+// types
+import { IProject } from "types";
+
+type Props = {
+  project: IProject;
+  sidebarCollapse: boolean;
+  handleDeleteProject: () => void;
+  handleCopyText: () => void;
+  handleAddToFavorites?: () => void;
+  handleRemoveFromFavorites?: () => void;
+};
+
+const navigation = (workspaceSlug: string, projectId: string) => [
+  {
+    name: "Issues",
+    href: `/${workspaceSlug}/projects/${projectId}/issues`,
+    icon: LayerDiagonalIcon,
+  },
+  {
+    name: "Cycles",
+    href: `/${workspaceSlug}/projects/${projectId}/cycles`,
+    icon: ContrastIcon,
+  },
+  {
+    name: "Modules",
+    href: `/${workspaceSlug}/projects/${projectId}/modules`,
+    icon: PeopleGroupIcon,
+  },
+  {
+    name: "Views",
+    href: `/${workspaceSlug}/projects/${projectId}/views`,
+    icon: ViewListIcon,
+  },
+  {
+    name: "Pages",
+    href: `/${workspaceSlug}/projects/${projectId}/pages`,
+    icon: DocumentTextIcon,
+  },
+  {
+    name: "Settings",
+    href: `/${workspaceSlug}/projects/${projectId}/settings`,
+    icon: SettingIcon,
+  },
+];
+
+export const SingleSidebarProject: React.FC<Props> = ({
+  project,
+  sidebarCollapse,
+  handleDeleteProject,
+  handleCopyText,
+  handleAddToFavorites,
+  handleRemoveFromFavorites,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  return (
+    <Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
+      {({ open }) => (
+        <>
+          <div className="flex items-center gap-x-1">
+            <Disclosure.Button
+              as="div"
+              className={`flex w-full cursor-pointer select-none items-center rounded-md py-2 text-left text-sm font-medium ${
+                sidebarCollapse ? "justify-center" : "justify-between"
+              }`}
+            >
+              <div className="flex items-center gap-x-2">
+                {project.icon ? (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                    {String.fromCodePoint(parseInt(project.icon))}
+                  </span>
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {project?.name.charAt(0)}
+                  </span>
+                )}
+
+                {!sidebarCollapse && (
+                  <p className="overflow-hidden text-ellipsis text-[0.875rem]">
+                    {truncateText(project?.name, 20)}
+                  </p>
+                )}
+              </div>
+              {!sidebarCollapse && (
+                <span>
+                  <ChevronDownIcon className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`} />
+                </span>
+              )}
+            </Disclosure.Button>
+
+            {!sidebarCollapse && (
+              <CustomMenu ellipsis>
+                <CustomMenu.MenuItem onClick={handleDeleteProject}>
+                  <span className="flex items-center justify-start gap-2 ">
+                    <TrashIcon className="h-4 w-4" />
+                    <span>Delete project</span>
+                  </span>
+                </CustomMenu.MenuItem>
+                {handleAddToFavorites && (
+                  <CustomMenu.MenuItem onClick={handleAddToFavorites}>
+                    <span className="flex items-center justify-start gap-2">
+                      <StarIcon className="h-4 w-4" />
+                      <span>Add to favorites</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                )}
+                {handleRemoveFromFavorites && (
+                  <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
+                    <span className="flex items-center justify-start gap-2">
+                      <StarIcon className="h-4 w-4" />
+                      <span>Remove from favorites</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                )}
+                <CustomMenu.MenuItem onClick={handleCopyText}>
+                  <span className="flex items-center justify-start gap-2">
+                    <LinkIcon className="h-4 w-4" />
+                    <span>Copy project link</span>
+                  </span>
+                </CustomMenu.MenuItem>
+              </CustomMenu>
+            )}
+          </div>
+
+          <Transition
+            enter="transition duration-100 ease-out"
+            enterFrom="transform scale-95 opacity-0"
+            enterTo="transform scale-100 opacity-100"
+            leave="transition duration-75 ease-out"
+            leaveFrom="transform scale-100 opacity-100"
+            leaveTo="transform scale-95 opacity-0"
+          >
+            <Disclosure.Panel
+              className={`${sidebarCollapse ? "" : "ml-[2.25rem]"} flex flex-col gap-y-1`}
+            >
+              {navigation(workspaceSlug as string, project?.id).map((item) => {
+                if (
+                  (item.name === "Cycles" && !project.cycle_view) ||
+                  (item.name === "Modules" && !project.module_view) ||
+                  (item.name === "Views" && !project.issue_views_view) ||
+                  (item.name === "Pages" && !project.page_view)
+                )
+                  return;
+
+                return (
+                  <Link key={item.name} href={item.href}>
+                    <a
+                      className={`group flex items-center rounded-md p-2 text-xs font-medium outline-none ${
+                        item.href === router.asPath
+                          ? "bg-brand-base text-brand-secondary"
+                          : "text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-secondary focus:bg-brand-base focus:text-brand-secondary"
+                      } ${sidebarCollapse ? "justify-center" : ""}`}
+                    >
+                      <div className="grid place-items-center">
+                        <item.icon
+                          className={`h-5 w-5 flex-shrink-0 ${
+                            item.href === router.asPath
+                              ? "text-brand-secondary"
+                              : "text-brand-secondary group-hover:text-brand-base"
+                          } ${!sidebarCollapse ? "mr-3" : ""}`}
+                          color="#858e96"
+                          aria-hidden="true"
+                        />
+                      </div>
+                      {!sidebarCollapse && item.name}
+                    </a>
+                  </Link>
+                );
+              })}
+            </Disclosure.Panel>
+          </Transition>
+        </>
+      )}
+    </Disclosure>
+  );
+};
diff --git a/app/components/rich-text-editor/index.tsx b/app/components/rich-text-editor/index.tsx
new file mode 100644
index 000000000..65d1fa5cd
--- /dev/null
+++ b/app/components/rich-text-editor/index.tsx
@@ -0,0 +1,242 @@
+import { useCallback, FC, useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import { InvalidContentHandler } from "remirror";
+import {
+  BoldExtension,
+  ItalicExtension,
+  CalloutExtension,
+  PlaceholderExtension,
+  CodeBlockExtension,
+  CodeExtension,
+  HistoryExtension,
+  LinkExtension,
+  UnderlineExtension,
+  HeadingExtension,
+  OrderedListExtension,
+  ListItemExtension,
+  BulletListExtension,
+  ImageExtension,
+  DropCursorExtension,
+  StrikeExtension,
+  MentionAtomExtension,
+  FontSizeExtension,
+} from "remirror/extensions";
+import {
+  Remirror,
+  useRemirror,
+  EditorComponent,
+  OnChangeJSON,
+  OnChangeHTML,
+} from "@remirror/react";
+import { TableExtension } from "@remirror/extension-react-tables";
+// tlds
+import tlds from "tlds";
+// services
+import fileService from "services/file.service";
+// ui
+import { Spinner } from "components/ui";
+// components
+import { CustomFloatingToolbar } from "./toolbar/float-tool-tip";
+import { MentionAutoComplete } from "./mention-autocomplete";
+
+export interface IRemirrorRichTextEditor {
+  placeholder?: string;
+  mentions?: any[];
+  tags?: any[];
+  onBlur?: (jsonValue: any, htmlValue: any) => void;
+  onJSONChange?: (jsonValue: any) => void;
+  onHTMLChange?: (htmlValue: any) => void;
+  value?: any;
+  showToolbar?: boolean;
+  editable?: boolean;
+  customClassName?: string;
+  gptOption?: boolean;
+  noBorder?: boolean;
+  borderOnFocus?: boolean;
+}
+
+// eslint-disable-next-line no-duplicate-imports
+import { FloatingWrapper, FloatingToolbar } from "@remirror/react";
+
+const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
+  const {
+    placeholder,
+    mentions = [],
+    tags = [],
+    onBlur = () => {},
+    onJSONChange = () => {},
+    onHTMLChange = () => {},
+    value = "",
+    showToolbar = true,
+    editable = true,
+    customClassName,
+    gptOption = false,
+    noBorder = false,
+    borderOnFocus = true,
+  } = props;
+
+  const [imageLoader, setImageLoader] = useState(false);
+  const [jsonValue, setJsonValue] = useState<any>();
+  const [htmlValue, setHtmlValue] = useState<any>();
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // remirror error handler
+  const onError: InvalidContentHandler = useCallback(
+    ({ json, invalidContent, transformers }: any) =>
+      // Automatically remove all invalid nodes and marks.
+      transformers.remove(json, invalidContent),
+    []
+  );
+
+  const uploadImageHandler = (value: any): any => {
+    setImageLoader(true);
+
+    try {
+      const formData = new FormData();
+      formData.append("asset", value[0].file);
+      formData.append("attributes", JSON.stringify({}));
+
+      setImageLoader(true);
+
+      return [
+        () =>
+          new Promise(async (resolve, reject) => {
+            const imageUrl = await fileService
+              .uploadFile(workspaceSlug as string, formData)
+              .then((response) => response.asset);
+
+            resolve({
+              align: "left",
+              alt: "Not Found",
+              height: "100%",
+              width: "100%",
+              src: imageUrl,
+            });
+            setImageLoader(false);
+          }),
+      ];
+    } catch {
+      return [];
+    }
+  };
+
+  // remirror manager
+  const { manager, state } = useRemirror({
+    extensions: () => [
+      new BoldExtension(),
+      new ItalicExtension(),
+      new UnderlineExtension(),
+      new HeadingExtension({ levels: [1, 2, 3] }),
+      new FontSizeExtension({ defaultSize: "16", unit: "px" }),
+      new OrderedListExtension(),
+      new ListItemExtension(),
+      new BulletListExtension({ enableSpine: true }),
+      new CalloutExtension({ defaultType: "warn" }),
+      new CodeBlockExtension(),
+      new CodeExtension(),
+      new PlaceholderExtension({ placeholder: placeholder || "Enter text..." }),
+      new HistoryExtension(),
+      new LinkExtension({
+        autoLink: true,
+        autoLinkAllowedTLDs: tlds,
+      }),
+      new ImageExtension({
+        enableResizing: true,
+        uploadHandler: uploadImageHandler,
+      }),
+      new DropCursorExtension(),
+      new StrikeExtension(),
+      new MentionAtomExtension({
+        matchers: [
+          { name: "at", char: "@" },
+          { name: "tag", char: "#" },
+        ],
+      }),
+      new TableExtension(),
+    ],
+    content: !value || (typeof value === "object" && Object.keys(value).length === 0) ? "" : value,
+    selection: "start",
+    stringHandler: "html",
+    onError,
+  });
+
+  const updateState = useCallback(
+    (value: any) => {
+      manager.view.updateState(
+        manager.createState({
+          content:
+            !value || (typeof value === "object" && Object.keys(value).length === 0) ? "" : value,
+          selection: value === "" ? "start" : manager.view.state.selection,
+        })
+      );
+    },
+    [manager]
+  );
+
+  useEffect(() => {
+    updateState(value);
+  }, [updateState, value]);
+
+  const handleJSONChange = (json: any) => {
+    setJsonValue(json);
+    onJSONChange(json);
+  };
+
+  const handleHTMLChange = (value: string) => {
+    setHtmlValue(value);
+    onHTMLChange(value);
+  };
+
+  return (
+    <div className="relative">
+      <Remirror
+        manager={manager}
+        initialContent={state}
+        classNames={[
+          `p-4 relative focus:outline-none rounded-md focus:border-brand-base ${
+            noBorder ? "" : "border border-brand-base"
+          } ${
+            borderOnFocus ? "focus:border border-brand-base" : "focus:border-0"
+          } ${customClassName}`,
+        ]}
+        editable={editable}
+        onBlur={() => {
+          onBlur(jsonValue, htmlValue);
+        }}
+      >
+        {(!value || value === "" || value?.content?.[0]?.content === undefined) &&
+          !(typeof value === "string" && value.includes("<")) &&
+          placeholder && (
+            <p className="pointer-events-none absolute top-4 left-4 text-sm">{placeholder}</p>
+          )}
+        <EditorComponent />
+
+        {imageLoader && (
+          <div className="p-4">
+            <Spinner />
+          </div>
+        )}
+
+        {editable && (
+          <FloatingWrapper
+            positioner="always"
+            floatingLabel="Custom Floating Toolbar"
+            renderOutsideEditor
+          >
+            <FloatingToolbar className="z-[9999] overflow-hidden rounded">
+              <CustomFloatingToolbar gptOption={gptOption} editorState={state} />
+            </FloatingToolbar>
+          </FloatingWrapper>
+        )}
+
+        <MentionAutoComplete mentions={mentions} tags={tags} />
+        {<OnChangeJSON onChange={handleJSONChange} />}
+        {<OnChangeHTML onChange={handleHTMLChange} />}
+      </Remirror>
+    </div>
+  );
+};
+
+export default RemirrorRichTextEditor;
diff --git a/app/components/rich-text-editor/mention-autocomplete.tsx b/app/components/rich-text-editor/mention-autocomplete.tsx
new file mode 100644
index 000000000..b0ba6955e
--- /dev/null
+++ b/app/components/rich-text-editor/mention-autocomplete.tsx
@@ -0,0 +1,64 @@
+import { useState, useEffect, FC } from "react";
+// remirror imports
+import { cx } from "@remirror/core";
+import { useMentionAtom, MentionAtomNodeAttributes, FloatingWrapper } from "@remirror/react";
+
+// export const;
+
+export interface IMentionAutoComplete {
+  mentions?: any[];
+  tags?: any[];
+}
+
+export const MentionAutoComplete: FC<IMentionAutoComplete> = (props) => {
+  const { mentions = [], tags = [] } = props;
+  // states
+  const [options, setOptions] = useState<MentionAtomNodeAttributes[]>([]);
+
+  const { state, getMenuProps, getItemProps, indexIsHovered, indexIsSelected } = useMentionAtom({
+    items: options,
+  });
+
+  useEffect(() => {
+    if (!state) {
+      return;
+    }
+    const searchTerm = state.query.full.toLowerCase();
+    let filteredOptions: MentionAtomNodeAttributes[] = [];
+
+    if (state.name === "tag") {
+      filteredOptions = tags.filter((tag) => tag?.label.toLowerCase().includes(searchTerm));
+    } else if (state.name === "at") {
+      filteredOptions = mentions.filter((user) => user?.label.toLowerCase().includes(searchTerm));
+    }
+
+    filteredOptions = filteredOptions.sort().slice(0, 5);
+    setOptions(filteredOptions);
+  }, [state, mentions, tags]);
+
+  const enabled = Boolean(state);
+  return (
+    <FloatingWrapper positioner="cursor" enabled={enabled} placement="bottom-start">
+      <div {...getMenuProps()} className="suggestions">
+        {enabled &&
+          options.map((user, index) => {
+            const isHighlighted = indexIsSelected(index);
+            const isHovered = indexIsHovered(index);
+
+            return (
+              <div
+                key={user.id}
+                className={cx("suggestion", isHighlighted && "highlighted", isHovered && "hovered")}
+                {...getItemProps({
+                  item: user,
+                  index,
+                })}
+              >
+                {user.label}
+              </div>
+            );
+          })}
+      </div>
+    </FloatingWrapper>
+  );
+};
diff --git a/app/components/rich-text-editor/sample.tsx b/app/components/rich-text-editor/sample.tsx
new file mode 100644
index 000000000..f4b7c84fe
--- /dev/null
+++ b/app/components/rich-text-editor/sample.tsx
@@ -0,0 +1,145 @@
+import React, { useEffect, useState } from "react";
+import { TableExtension } from "@remirror/extension-react-tables";
+import {
+  EditorComponent,
+  ReactComponentExtension,
+  Remirror,
+  TableComponents,
+  tableControllerPluginKey,
+  ThemeProvider,
+  useCommands,
+  useRemirror,
+  useRemirrorContext,
+} from "@remirror/react";
+import type { AnyExtension } from "remirror";
+
+const CommandMenu: React.FC = () => {
+  const { createTable, ...commands } = useCommands();
+
+  return (
+    <div>
+      <p>commands:</p>
+      <p
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyItems: "flex-start",
+          alignItems: "flex-start",
+        }}
+      >
+        <button
+          onMouseDown={(event) => event.preventDefault()}
+          data-testid="btn-3-3"
+          onClick={() => createTable({ rowsCount: 3, columnsCount: 3, withHeaderRow: false })}
+        >
+          insert a 3*3 table
+        </button>
+        <button
+          onMouseDown={(event) => event.preventDefault()}
+          data-testid="btn-3-3-headers"
+          onClick={() => createTable({ rowsCount: 3, columnsCount: 3, withHeaderRow: true })}
+        >
+          insert a 3*3 table with headers
+        </button>
+        <button
+          onMouseDown={(event) => event.preventDefault()}
+          data-testid="btn-4-10"
+          onClick={() => createTable({ rowsCount: 10, columnsCount: 4, withHeaderRow: false })}
+        >
+          insert a 4*10 table
+        </button>
+        <button
+          onMouseDown={(event) => event.preventDefault()}
+          data-testid="btn-3-30"
+          onClick={() => createTable({ rowsCount: 30, columnsCount: 3, withHeaderRow: false })}
+        >
+          insert a 3*30 table
+        </button>
+        <button
+          onMouseDown={(event) => event.preventDefault()}
+          data-testid="btn-8-100"
+          onClick={() => createTable({ rowsCount: 100, columnsCount: 8, withHeaderRow: false })}
+        >
+          insert a 8*100 table
+        </button>
+        <button
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={() => commands.addTableColumnAfter()}
+        >
+          add a column after the current one
+        </button>
+        <button
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={() => commands.addTableRowBefore()}
+        >
+          add a row before the current one
+        </button>
+        <button
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={() => commands.deleteTable()}
+        >
+          delete the table
+        </button>
+      </p>
+    </div>
+  );
+};
+
+const ProsemirrorDocData: React.FC = () => {
+  const ctx = useRemirrorContext({ autoUpdate: false });
+  const [jsonPluginState, setJsonPluginState] = useState("");
+  const [jsonDoc, setJsonDoc] = useState("");
+  const { addHandler, view } = ctx;
+
+  useEffect(() => {
+    addHandler("updated", () => {
+      setJsonDoc(JSON.stringify(view.state.doc.toJSON(), null, 2));
+
+      const pluginStateValues = tableControllerPluginKey.getState(view.state)?.values;
+      setJsonPluginState(
+        JSON.stringify({ ...pluginStateValues, tableNodeResult: "hidden" }, null, 2)
+      );
+    });
+  }, [addHandler, view]);
+
+  return (
+    <div>
+      <p>tableControllerPluginKey.getState(view.state)</p>
+      <pre style={{ fontSize: "12px", lineHeight: "12px" }}>
+        <code>{jsonPluginState}</code>
+      </pre>
+      <p>view.state.doc.toJSON()</p>
+      <pre style={{ fontSize: "12px", lineHeight: "12px" }}>
+        <code>{jsonDoc}</code>
+      </pre>
+    </div>
+  );
+};
+
+const Table = ({
+  children,
+  extensions,
+}: {
+  children?: React.ReactElement;
+  extensions: () => AnyExtension[];
+}): JSX.Element => {
+  const { manager, state } = useRemirror({ extensions });
+
+  return (
+    <ThemeProvider>
+      <Remirror manager={manager} initialContent={state}>
+        <EditorComponent />
+        <TableComponents />
+        <CommandMenu />
+        <ProsemirrorDocData />
+        {children}
+      </Remirror>
+    </ThemeProvider>
+  );
+};
+
+const Basic = (): JSX.Element => <Table extensions={defaultExtensions} />;
+
+const defaultExtensions = () => [new ReactComponentExtension(), new TableExtension()];
+
+export default Basic;
diff --git a/app/components/rich-text-editor/toolbar/float-tool-tip.tsx b/app/components/rich-text-editor/toolbar/float-tool-tip.tsx
new file mode 100644
index 000000000..731c7e8b4
--- /dev/null
+++ b/app/components/rich-text-editor/toolbar/float-tool-tip.tsx
@@ -0,0 +1,68 @@
+// buttons
+import {
+  ToggleBoldButton,
+  ToggleItalicButton,
+  ToggleUnderlineButton,
+  ToggleStrikeButton,
+  ToggleOrderedListButton,
+  ToggleBulletListButton,
+  ToggleCodeButton,
+  ToggleHeadingButton,
+  useActive,
+} from "@remirror/react";
+import { EditorState } from "remirror";
+
+type Props = {
+  gptOption?: boolean;
+  editorState: Readonly<EditorState>;
+};
+
+export const CustomFloatingToolbar: React.FC<Props> = ({ gptOption, editorState }) => {
+  const active = useActive();
+
+  return (
+    <div className="z-[99999] flex items-center gap-y-2 divide-x divide-brand-base rounded border border-brand-base bg-brand-surface-2 p-1 px-0.5 shadow-md">
+      <div className="flex items-center gap-x-1 px-2">
+        <ToggleHeadingButton
+          attrs={{
+            level: 1,
+          }}
+        />
+        <ToggleHeadingButton
+          attrs={{
+            level: 2,
+          }}
+        />
+        <ToggleHeadingButton
+          attrs={{
+            level: 3,
+          }}
+        />
+      </div>
+      <div className="flex items-center gap-x-1 px-2">
+        <ToggleBoldButton />
+        <ToggleItalicButton />
+        <ToggleUnderlineButton />
+        <ToggleStrikeButton />
+      </div>
+      <div className="flex items-center gap-x-1 px-2">
+        <ToggleOrderedListButton />
+        <ToggleBulletListButton />
+      </div>
+      {gptOption && (
+        <div className="flex items-center gap-x-1 px-2">
+          <button
+            type="button"
+            className="rounded py-1 px-1.5 text-xs hover:bg-brand-surface-1"
+            onClick={() => console.log(editorState.selection.$anchor.nodeBefore)}
+          >
+            AI
+          </button>
+        </div>
+      )}
+      <div className="flex items-center gap-x-1 px-2">
+        <ToggleCodeButton />
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/rich-text-editor/toolbar/heading-controls.tsx b/app/components/rich-text-editor/toolbar/heading-controls.tsx
new file mode 100644
index 000000000..3297958f0
--- /dev/null
+++ b/app/components/rich-text-editor/toolbar/heading-controls.tsx
@@ -0,0 +1,57 @@
+// remirror
+import { useCommands, useActive } from "@remirror/react";
+// ui
+import { CustomMenu } from "components/ui";
+
+const HeadingControls = () => {
+  const { toggleHeading, focus } = useCommands();
+
+  const active = useActive();
+
+  return (
+    <div className="flex items-center gap-1">
+      <CustomMenu
+        width="lg"
+        label={`${
+          active.heading({ level: 1 })
+            ? "Heading 1"
+            : active.heading({ level: 2 })
+            ? "Heading 2"
+            : active.heading({ level: 3 })
+            ? "Heading 3"
+            : "Normal text"
+        }`}
+      >
+        <CustomMenu.MenuItem
+          onClick={() => {
+            toggleHeading({ level: 1 });
+            focus();
+          }}
+          className={`${active.heading({ level: 1 }) ? "bg-indigo-50" : ""}`}
+        >
+          Heading 1
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={() => {
+            toggleHeading({ level: 2 });
+            focus();
+          }}
+          className={`${active.heading({ level: 2 }) ? "bg-indigo-50" : ""}`}
+        >
+          Heading 2
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={() => {
+            toggleHeading({ level: 3 });
+            focus();
+          }}
+          className={`${active.heading({ level: 3 }) ? "bg-indigo-50" : ""}`}
+        >
+          Heading 3
+        </CustomMenu.MenuItem>
+      </CustomMenu>
+    </div>
+  );
+};
+
+export default HeadingControls;
diff --git a/app/components/rich-text-editor/toolbar/index.tsx b/app/components/rich-text-editor/toolbar/index.tsx
new file mode 100644
index 000000000..8362ced57
--- /dev/null
+++ b/app/components/rich-text-editor/toolbar/index.tsx
@@ -0,0 +1,35 @@
+// buttons
+import {
+  ToggleBoldButton,
+  ToggleItalicButton,
+  ToggleUnderlineButton,
+  ToggleStrikeButton,
+  ToggleOrderedListButton,
+  ToggleBulletListButton,
+  RedoButton,
+  UndoButton,
+} from "@remirror/react";
+// headings
+import HeadingControls from "./heading-controls";
+
+export const RichTextToolbar: React.FC = () => (
+  <div className="flex items-center gap-y-2 divide-x">
+    <div className="flex items-center gap-x-1 px-2">
+      <RedoButton />
+      <UndoButton />
+    </div>
+    <div className="px-2">
+      <HeadingControls />
+    </div>
+    <div className="flex items-center gap-x-1 px-2">
+      <ToggleBoldButton />
+      <ToggleItalicButton />
+      <ToggleUnderlineButton />
+      <ToggleStrikeButton />
+    </div>
+    <div className="flex items-center gap-x-1 px-2">
+      <ToggleOrderedListButton />
+      <ToggleBulletListButton />
+    </div>
+  </div>
+);
diff --git a/app/components/rich-text-editor/toolbar/link.tsx b/app/components/rich-text-editor/toolbar/link.tsx
new file mode 100644
index 000000000..a47c45c1a
--- /dev/null
+++ b/app/components/rich-text-editor/toolbar/link.tsx
@@ -0,0 +1,212 @@
+import React, {
+  ChangeEvent,
+  HTMLProps,
+  KeyboardEvent,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import { createMarkPositioner, LinkExtension, ShortcutHandlerProps } from "remirror/extensions";
+import {
+  CommandButton,
+  FloatingToolbar,
+  FloatingWrapper,
+  useActive,
+  useAttrs,
+  useChainedCommands,
+  useCurrentSelection,
+  useExtensionEvent,
+  useUpdateReason,
+} from "@remirror/react";
+
+const useLinkShortcut = () => {
+  const [linkShortcut, setLinkShortcut] = useState<ShortcutHandlerProps | undefined>();
+  const [isEditing, setIsEditing] = useState(false);
+
+  useExtensionEvent(
+    LinkExtension,
+    "onShortcut",
+    useCallback(
+      (props) => {
+        if (!isEditing) {
+          setIsEditing(true);
+        }
+
+        return setLinkShortcut(props);
+      },
+      [isEditing]
+    )
+  );
+
+  return { linkShortcut, isEditing, setIsEditing };
+};
+
+const useFloatingLinkState = () => {
+  const chain = useChainedCommands();
+  const { isEditing, linkShortcut, setIsEditing } = useLinkShortcut();
+  const { to, empty } = useCurrentSelection();
+
+  const url = (useAttrs().link()?.href as string) ?? "";
+  const [href, setHref] = useState<string>(url);
+
+  // A positioner which only shows for links.
+  const linkPositioner = useMemo(() => createMarkPositioner({ type: "link" }), []);
+
+  const onRemove = useCallback(() => chain.removeLink().focus().run(), [chain]);
+
+  const updateReason = useUpdateReason();
+
+  useLayoutEffect(() => {
+    if (!isEditing) {
+      return;
+    }
+
+    if (updateReason.doc || updateReason.selection) {
+      setIsEditing(false);
+    }
+  }, [isEditing, setIsEditing, updateReason.doc, updateReason.selection]);
+
+  useEffect(() => {
+    setHref(url);
+  }, [url]);
+
+  const submitHref = useCallback(() => {
+    setIsEditing(false);
+    const range = linkShortcut ?? undefined;
+
+    if (href === "") {
+      chain.removeLink();
+    } else {
+      chain.updateLink({ href, auto: false }, range);
+    }
+
+    chain.focus(range?.to ?? to).run();
+  }, [setIsEditing, linkShortcut, chain, href, to]);
+
+  const cancelHref = useCallback(() => {
+    setIsEditing(false);
+  }, [setIsEditing]);
+
+  const clickEdit = useCallback(() => {
+    if (empty) {
+      chain.selectLink();
+    }
+
+    setIsEditing(true);
+  }, [chain, empty, setIsEditing]);
+
+  return useMemo(
+    () => ({
+      href,
+      setHref,
+      linkShortcut,
+      linkPositioner,
+      isEditing,
+      clickEdit,
+      onRemove,
+      submitHref,
+      cancelHref,
+    }),
+    [href, linkShortcut, linkPositioner, isEditing, clickEdit, onRemove, submitHref, cancelHref]
+  );
+};
+
+const DelayAutoFocusInput = ({ autoFocus, ...rest }: HTMLProps<HTMLInputElement>) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!autoFocus) {
+      return;
+    }
+
+    const frame = window.requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(frame);
+    };
+  }, [autoFocus]);
+
+  return <input ref={inputRef} {...rest} />;
+};
+
+export const FloatingLinkToolbar = () => {
+  const { isEditing, linkPositioner, clickEdit, onRemove, submitHref, href, setHref, cancelHref } =
+    useFloatingLinkState();
+
+  const active = useActive();
+  const activeLink = active.link();
+
+  const { empty } = useCurrentSelection();
+
+  const handleClickEdit = useCallback(() => {
+    clickEdit();
+  }, [clickEdit]);
+
+  const linkEditButtons = activeLink ? (
+    <>
+      <CommandButton
+        commandName="openLink"
+        onSelect={() => {
+          window.open(href, "_blank");
+        }}
+        icon="externalLinkFill"
+        enabled
+      />
+      <CommandButton
+        commandName="updateLink"
+        onSelect={handleClickEdit}
+        icon="pencilLine"
+        enabled
+      />
+      <CommandButton commandName="removeLink" onSelect={onRemove} icon="linkUnlink" enabled />
+    </>
+  ) : (
+    <CommandButton commandName="updateLink" onSelect={handleClickEdit} icon="link" enabled />
+  );
+
+  return (
+    <>
+      {!isEditing && (
+        <FloatingToolbar className="rounded bg-brand-surface-2 p-1 shadow-lg">
+          {linkEditButtons}
+        </FloatingToolbar>
+      )}
+      {!isEditing && empty && (
+        <FloatingToolbar positioner={linkPositioner} className="rounded bg-brand-surface-2 p-1 shadow-lg">
+          {linkEditButtons}
+        </FloatingToolbar>
+      )}
+
+      <FloatingWrapper
+        positioner="always"
+        placement="bottom"
+        enabled={isEditing}
+        renderOutsideEditor
+      >
+        <DelayAutoFocusInput
+          autoFocus
+          placeholder="Enter link..."
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setHref(e.target.value)}
+          value={href}
+          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+            const { code } = e;
+
+            if (code === "Enter") {
+              submitHref();
+            }
+
+            if (code === "Escape") {
+              cancelHref();
+            }
+          }}
+        />
+      </FloatingWrapper>
+    </>
+  );
+};
diff --git a/app/components/rich-text-editor/toolbar/table-controls.tsx b/app/components/rich-text-editor/toolbar/table-controls.tsx
new file mode 100644
index 000000000..d8f8e24e2
--- /dev/null
+++ b/app/components/rich-text-editor/toolbar/table-controls.tsx
@@ -0,0 +1,55 @@
+import { useCommands } from "@remirror/react";
+
+export const TableControls = () => {
+  const { createTable, ...commands } = useCommands();
+
+  return (
+    <div className="flex items-center gap-1">
+      <button
+        type="button"
+        onClick={() => createTable({ rowsCount: 3, columnsCount: 3, withHeaderRow: false })}
+        className="rounded p-1 hover:bg-brand-surface-1"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="icon icon-tabler icon-tabler-table"
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          stroke="#2c3e50"
+          fill="none"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <rect x="4" y="4" width="16" height="16" rx="2" />
+          <line x1="4" y1="10" x2="20" y2="10" />
+          <line x1="10" y1="4" x2="10" y2="20" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        onClick={() => commands.deleteTable()}
+        className="rounded p-1 hover:bg-brand-surface-1"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="icon icon-tabler icon-tabler-trash"
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          strokeWidth="1.5"
+          stroke="#2c3e50"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <line x1="4" y1="7" x2="20" y2="7" />
+          <line x1="10" y1="11" x2="10" y2="17" />
+          <line x1="14" y1="11" x2="14" y2="17" />
+          <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
+          <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
+        </svg>
+      </button>
+    </div>
+  );
+};
diff --git a/app/components/search-listbox/index.tsx b/app/components/search-listbox/index.tsx
new file mode 100644
index 000000000..ef7c33634
--- /dev/null
+++ b/app/components/search-listbox/index.tsx
@@ -0,0 +1,168 @@
+import React, { useState } from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// headless ui
+import { Transition, Combobox } from "@headlessui/react";
+// services
+import workspaceService from "services/workspace.service";
+// types
+import type { Props } from "./types";
+// fetch-keys
+import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
+
+const SearchListbox: React.FC<Props> = ({
+  title,
+  options,
+  onChange,
+  value,
+  multiple: canSelectMultiple,
+  icon,
+  optionsFontsize,
+  buttonClassName,
+  optionsClassName,
+  assignee = false,
+}) => {
+  const [query, setQuery] = useState("");
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const filteredOptions =
+    query === ""
+      ? options
+      : options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
+
+  const props: any = {
+    value,
+    onChange,
+  };
+
+  if (canSelectMultiple) {
+    props.value = props.value ?? [];
+    props.onChange = (value: string[]) => {
+      onChange(value);
+    };
+    props.multiple = true;
+  }
+
+  const { data: people } = useSWR(
+    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
+    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
+  );
+
+  const userAvatar = (userId: string) => {
+    const user = people?.find((p) => p.member.id === userId);
+
+    if (!user) return;
+
+    if (user.member.avatar && user.member.avatar !== "") {
+      return (
+        <div className="relative h-4 w-4">
+          <Image
+            src={user.member.avatar}
+            alt="avatar"
+            className="rounded-full"
+            layout="fill"
+            objectFit="cover"
+          />
+        </div>
+      );
+    } else
+      return (
+        <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
+          {user.member.first_name && user.member.first_name !== ""
+            ? user.member.first_name.charAt(0)
+            : user.member.email.charAt(0)}
+        </div>
+      );
+  };
+
+  return (
+    <Combobox as="div" {...props} className="relative flex-shrink-0">
+      {({ open }: any) => (
+        <>
+          <Combobox.Label className="sr-only">{title}</Combobox.Label>
+          <Combobox.Button
+            className={`flex cursor-pointer items-center gap-1 rounded-md border  border-brand-base px-2 py-1 text-xs shadow-sm duration-300 hover:bg-brand-surface-1 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent ${
+              buttonClassName || ""
+            }`}
+          >
+            {icon ?? null}
+            <span
+              className={`hidden truncate sm:block ${
+                value === null || value === undefined ? "" : "text-brand-base"
+              }`}
+            >
+              {Array.isArray(value)
+                ? value
+                    .map((v) => options?.find((option) => option.value === v)?.display)
+                    .join(", ") || title
+                : options?.find((option) => option.value === value)?.display || title}
+            </span>
+          </Combobox.Button>
+
+          <Transition
+            show={open}
+            as={React.Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Combobox.Options
+              className={`absolute z-10 mt-1 max-h-32 min-w-[8rem] overflow-auto rounded-md bg-brand-surface-2 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none  ${
+                optionsFontsize === "sm"
+                  ? "text-xs"
+                  : optionsFontsize === "md"
+                  ? "text-base"
+                  : optionsFontsize === "lg"
+                  ? "text-lg"
+                  : optionsFontsize === "xl"
+                  ? "text-xl"
+                  : optionsFontsize === "2xl"
+                  ? "text-2xl"
+                  : ""
+              } ${optionsClassName || ""}`}
+            >
+              <Combobox.Input
+                className="w-full border-b bg-transparent p-2 text-xs focus:outline-none"
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder="Search"
+                displayValue={(assigned: any) => assigned?.name}
+              />
+              <div className="py-1">
+                {filteredOptions ? (
+                  filteredOptions.length > 0 ? (
+                    filteredOptions.map((option) => (
+                      <Combobox.Option
+                        key={option.value}
+                        className={({ active }) =>
+                          `${
+                            active ? "bg-indigo-50" : ""
+                          } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-brand-base`
+                        }
+                        value={option.value}
+                      >
+                        {assignee && userAvatar(option.value)}
+                        {option.element ?? option.display}
+                      </Combobox.Option>
+                    ))
+                  ) : (
+                    <p className="text-xs text-brand-secondary px-2">No {title.toLowerCase()} found</p>
+                  )
+                ) : (
+                  <p className="text-xs text-brand-secondary px-2">Loading...</p>
+                )}
+              </div>
+            </Combobox.Options>
+          </Transition>
+        </>
+      )}
+    </Combobox>
+  );
+};
+
+export default SearchListbox;
diff --git a/app/components/search-listbox/types.d.ts b/app/components/search-listbox/types.d.ts
new file mode 100644
index 000000000..c9ffa6af3
--- /dev/null
+++ b/app/components/search-listbox/types.d.ts
@@ -0,0 +1,15 @@
+type Value = any;
+
+export type Props = {
+  title: string;
+  multiple?: boolean;
+  options?: Array<{ display: string; element?: JSX.Element; value: Value }>;
+  onChange: (value: Value) => void;
+  value: Value;
+  icon?: JSX.Element;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  width?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  optionsFontsize?: "sm" | "md" | "lg" | "xl" | "2xl";
+  assignee?: boolean;
+};
diff --git a/app/components/states/create-state-modal.tsx b/app/components/states/create-state-modal.tsx
new file mode 100644
index 000000000..769ca6821
--- /dev/null
+++ b/app/components/states/create-state-modal.tsx
@@ -0,0 +1,241 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// react-color
+import { TwitterPicker } from "react-color";
+// headless ui
+import { Dialog, Popover, Transition } from "@headlessui/react";
+// services
+import stateService from "services/state.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { CustomSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+// icons
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+// types
+import type { IState } from "types";
+// fetch keys
+import { STATE_LIST } from "constants/fetch-keys";
+// constants
+import { GROUP_CHOICES } from "constants/project";
+
+// types
+type Props = {
+  isOpen: boolean;
+  projectId: string;
+  handleClose: () => void;
+};
+
+const defaultValues: Partial<IState> = {
+  name: "",
+  description: "",
+  color: "#000000",
+  group: "backlog",
+};
+
+export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClose }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    watch,
+    control,
+    reset,
+  } = useForm<IState>({
+    defaultValues,
+  });
+
+  const onClose = () => {
+    handleClose();
+    reset(defaultValues);
+  };
+
+  const onSubmit = async (formData: IState) => {
+    if (!workspaceSlug) return;
+
+    const payload: IState = {
+      ...formData,
+    };
+
+    await stateService
+      .createState(workspaceSlug as string, projectId, payload)
+      .then(() => {
+        mutate(STATE_LIST(projectId));
+        onClose();
+      })
+      .catch((err) => {
+        if (err.status === 400)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Another state exists with the same name. Please try again with another name.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "State could not be created. Please try again.",
+          });
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-30" onClose={onClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <form onSubmit={handleSubmit(onSubmit)}>
+                  <div>
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                      Create State
+                    </Dialog.Title>
+                    <div className="mt-2 space-y-3">
+                      <div>
+                        <Input
+                          id="name"
+                          label="Name"
+                          name="name"
+                          type="name"
+                          placeholder="Enter name"
+                          autoComplete="off"
+                          error={errors.name}
+                          register={register}
+                          validations={{
+                            required: "Name is required",
+                          }}
+                        />
+                      </div>
+                      <div>
+                        <Controller
+                          control={control}
+                          rules={{ required: true }}
+                          name="group"
+                          render={({ field: { value, onChange } }) => (
+                            <CustomSelect
+                              value={value}
+                              label={GROUP_CHOICES[value as keyof typeof GROUP_CHOICES]}
+                              onChange={onChange}
+                              width="w-full"
+                              input
+                            >
+                              {Object.keys(GROUP_CHOICES).map((key) => (
+                                <CustomSelect.Option key={key} value={key}>
+                                  {GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
+                                </CustomSelect.Option>
+                              ))}
+                            </CustomSelect>
+                          )}
+                        />
+                      </div>
+                      <div>
+                        <Popover className="relative">
+                          {({ open }) => (
+                            <>
+                              <Popover.Button
+                                className={`group inline-flex items-center rounded-md bg-brand-surface-2 text-base font-medium hover:text-brand-base focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
+                                  open ? "text-brand-base" : "text-brand-secondary"
+                                }`}
+                              >
+                                <span>Color</span>
+                                {watch("color") && watch("color") !== "" && (
+                                  <span
+                                    className="ml-2 h-4 w-4 rounded"
+                                    style={{
+                                      backgroundColor: watch("color") ?? "black",
+                                    }}
+                                  />
+                                )}
+                                <ChevronDownIcon
+                                  className={`ml-2 h-5 w-5 group-hover:text-brand-secondary ${
+                                    open ? "text-gray-600" : "text-gray-400"
+                                  }`}
+                                  aria-hidden="true"
+                                />
+                              </Popover.Button>
+
+                              <Transition
+                                as={React.Fragment}
+                                enter="transition ease-out duration-200"
+                                enterFrom="opacity-0 translate-y-1"
+                                enterTo="opacity-100 translate-y-0"
+                                leave="transition ease-in duration-150"
+                                leaveFrom="opacity-100 translate-y-0"
+                                leaveTo="opacity-0 translate-y-1"
+                              >
+                                <Popover.Panel className="fixed left-5 z-50 mt-3 w-screen max-w-xs transform px-2 sm:px-0">
+                                  <Controller
+                                    name="color"
+                                    control={control}
+                                    render={({ field: { value, onChange } }) => (
+                                      <TwitterPicker
+                                        color={value}
+                                        onChange={(value) => onChange(value.hex)}
+                                      />
+                                    )}
+                                  />
+                                </Popover.Panel>
+                              </Transition>
+                            </>
+                          )}
+                        </Popover>
+                      </div>
+                      <div>
+                        <TextArea
+                          id="description"
+                          name="description"
+                          label="Description"
+                          placeholder="Enter description"
+                          error={errors.description}
+                          register={register}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-5 flex justify-end gap-2">
+                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
+                    <PrimaryButton type="submit" loading={isSubmitting}>
+                      {isSubmitting ? "Creating State..." : "Create State"}
+                    </PrimaryButton>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/states/create-update-state-inline.tsx b/app/components/states/create-update-state-inline.tsx
new file mode 100644
index 000000000..3a13faf25
--- /dev/null
+++ b/app/components/states/create-update-state-inline.tsx
@@ -0,0 +1,240 @@
+import React, { useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { useForm, Controller } from "react-hook-form";
+// react-color
+import { TwitterPicker } from "react-color";
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
+// services
+import stateService from "services/state.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { CustomSelect, Input, PrimaryButton, SecondaryButton } from "components/ui";
+// types
+import type { IState } from "types";
+// fetch-keys
+import { STATE_LIST } from "constants/fetch-keys";
+// constants
+import { GROUP_CHOICES } from "constants/project";
+
+type Props = {
+  data: IState | null;
+  onClose: () => void;
+  selectedGroup: StateGroup | null;
+};
+
+export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled" | null;
+
+const defaultValues: Partial<IState> = {
+  name: "",
+  color: "#000000",
+  group: "backlog",
+};
+
+export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, selectedGroup }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    watch,
+    reset,
+    control,
+  } = useForm<IState>({
+    defaultValues,
+  });
+
+  useEffect(() => {
+    if (!data) return;
+
+    reset(data);
+  }, [data, reset]);
+
+  useEffect(() => {
+    if (data) return;
+
+    reset({
+      ...defaultValues,
+      group: selectedGroup ?? "backlog",
+    });
+  }, [selectedGroup, data, reset]);
+
+  const handleClose = () => {
+    onClose();
+    reset({ name: "", color: "#000000", group: "backlog" });
+  };
+
+  const onSubmit = async (formData: IState) => {
+    if (!workspaceSlug || !projectId || isSubmitting) return;
+
+    const payload: IState = {
+      ...formData,
+    };
+    if (!data) {
+      await stateService
+        .createState(workspaceSlug as string, projectId as string, { ...payload })
+        .then((res) => {
+          mutate(STATE_LIST(projectId as string));
+          handleClose();
+
+          setToastAlert({
+            type: "success",
+            title: "Success!",
+            message: "State created successfully.",
+          });
+        })
+        .catch((err) => {
+          if (err.status === 400)
+            setToastAlert({
+              type: "error",
+              title: "Error!",
+              message: "State with that name already exists. Please try again with another name.",
+            });
+          else
+            setToastAlert({
+              type: "error",
+              title: "Error!",
+              message: "State could not be created. Please try again.",
+            });
+        });
+    } else {
+      await stateService
+        .updateState(workspaceSlug as string, projectId as string, data.id, {
+          ...payload,
+        })
+        .then(() => {
+          mutate(STATE_LIST(projectId as string));
+          handleClose();
+
+          setToastAlert({
+            type: "success",
+            title: "Success!",
+            message: "State updated successfully.",
+          });
+        })
+        .catch((err) => {
+          if (err.status === 400)
+            setToastAlert({
+              type: "error",
+              title: "Error!",
+              message:
+                "Another state exists with the same name. Please try again with another name.",
+            });
+          else
+            setToastAlert({
+              type: "error",
+              title: "Error!",
+              message: "State could not be updated. Please try again.",
+            });
+        });
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="flex items-center gap-x-2 rounded-[10px] bg-brand-surface-1 p-5"
+    >
+      <div className="flex-shrink-0">
+        <Popover className="relative flex h-full w-full items-center justify-center">
+          {({ open }) => (
+            <>
+              <Popover.Button
+                className={`group inline-flex items-center text-base font-medium focus:outline-none ${
+                  open ? "text-gray-900" : "text-gray-500"
+                }`}
+              >
+                {watch("color") && watch("color") !== "" && (
+                  <span
+                    className="h-5 w-5 rounded"
+                    style={{
+                      backgroundColor: watch("color") ?? "black",
+                    }}
+                  />
+                )}
+              </Popover.Button>
+
+              <Transition
+                as={React.Fragment}
+                enter="transition ease-out duration-200"
+                enterFrom="opacity-0 translate-y-1"
+                enterTo="opacity-100 translate-y-0"
+                leave="transition ease-in duration-150"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-1"
+              >
+                <Popover.Panel className="absolute top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
+                  <Controller
+                    name="color"
+                    control={control}
+                    render={({ field: { value, onChange } }) => (
+                      <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
+                    )}
+                  />
+                </Popover.Panel>
+              </Transition>
+            </>
+          )}
+        </Popover>
+      </div>
+      <Input
+        id="name"
+        name="name"
+        register={register}
+        autoFocus
+        placeholder="Name"
+        validations={{
+          required: true,
+        }}
+        error={errors.name}
+        autoComplete="off"
+      />
+      {data && (
+        <Controller
+          name="group"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <CustomSelect
+              value={value}
+              onChange={onChange}
+              label={
+                Object.keys(GROUP_CHOICES).find((k) => k === value.toString())
+                  ? GROUP_CHOICES[value.toString() as keyof typeof GROUP_CHOICES]
+                  : "Select group"
+              }
+              input
+            >
+              {Object.keys(GROUP_CHOICES).map((key) => (
+                <CustomSelect.Option key={key} value={key}>
+                  {GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
+                </CustomSelect.Option>
+              ))}
+            </CustomSelect>
+          )}
+        />
+      )}
+      <Input
+        id="description"
+        name="description"
+        register={register}
+        placeholder="Description"
+        error={errors.description}
+        autoComplete="off"
+      />
+      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+      <PrimaryButton type="submit" loading={isSubmitting}>
+        {isSubmitting ? (data ? "Updating..." : "Creating...") : data ? "Update" : "Create"}
+      </PrimaryButton>
+    </form>
+  );
+};
diff --git a/app/components/states/delete-state-modal.tsx b/app/components/states/delete-state-modal.tsx
new file mode 100644
index 000000000..362ff9353
--- /dev/null
+++ b/app/components/states/delete-state-modal.tsx
@@ -0,0 +1,158 @@
+import React, { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// services
+import stateServices from "services/state.service";
+import issuesServices from "services/issues.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { DangerButton, SecondaryButton } from "components/ui";
+// helpers
+import { groupBy } from "helpers/array.helper";
+// types
+import type { IState } from "types";
+// fetch-keys
+import { STATE_LIST, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  data: IState | null;
+};
+
+export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [issuesWithThisStateExist, setIssuesWithThisStateExist] = useState(true);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { data: issues } = useSWR(
+    workspaceSlug && projectId
+      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
+      : null,
+    workspaceSlug && projectId
+      ? () => issuesServices.getIssues(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const handleClose = () => {
+    onClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsDeleteLoading(true);
+    if (!data || !workspaceSlug || issuesWithThisStateExist) return;
+    await stateServices
+      .deleteState(workspaceSlug as string, data.project, data.id)
+      .then(() => {
+        mutate(STATE_LIST(data.project));
+        handleClose();
+
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "State deleted successfully",
+        });
+      })
+      .catch((error) => {
+        console.log(error);
+        setIsDeleteLoading(false);
+      });
+  };
+
+  const groupedIssues = groupBy(issues ?? [], "state");
+
+  useEffect(() => {
+    if (data) setIssuesWithThisStateExist(!!groupedIssues[data.id]);
+  }, [groupedIssues, data]);
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium leading-6 text-brand-base"
+                      >
+                        Delete State
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-brand-secondary">
+                          Are you sure you want to delete state-{" "}
+                          <span className="italic">{data?.name}</span>? All of the data related to
+                          the state will be permanently removed. This action cannot be undone.
+                        </p>
+                      </div>
+                      <div className="mt-2">
+                        {issuesWithThisStateExist && (
+                          <p className="text-sm text-red-500">
+                            There are issues with this state. Please move them to another state
+                            before deleting this state.
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
+                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                  <DangerButton
+                    onClick={handleDeletion}
+                    disabled={issuesWithThisStateExist}
+                    loading={isDeleteLoading}
+                  >
+                    {isDeleteLoading ? "Deleting..." : "Delete"}
+                  </DangerButton>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/states/index.ts b/app/components/states/index.ts
new file mode 100644
index 000000000..39285a77f
--- /dev/null
+++ b/app/components/states/index.ts
@@ -0,0 +1,4 @@
+export * from "./create-update-state-inline";
+export * from "./create-state-modal";
+export * from "./delete-state-modal";
+export * from "./single-state";
diff --git a/app/components/states/single-state.tsx b/app/components/states/single-state.tsx
new file mode 100644
index 000000000..2a65a1674
--- /dev/null
+++ b/app/components/states/single-state.tsx
@@ -0,0 +1,205 @@
+import { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// services
+import stateService from "services/state.service";
+// ui
+import { Tooltip } from "components/ui";
+// icons
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  PencilSquareIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+// helpers
+import { addSpaceIfCamelCase } from "helpers/string.helper";
+import { groupBy, orderArrayBy } from "helpers/array.helper";
+import { orderStateGroups } from "helpers/state.helper";
+// types
+import { IState } from "types";
+// fetch-keys
+import { STATE_LIST } from "constants/fetch-keys";
+import { getStateGroupIcon } from "components/icons";
+
+type Props = {
+  index: number;
+  state: IState;
+  statesList: IState[];
+  handleEditState: () => void;
+  handleDeleteState: () => void;
+};
+
+export const SingleState: React.FC<Props> = ({
+  index,
+  state,
+  statesList,
+  handleEditState,
+  handleDeleteState,
+}) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const groupStates = statesList.filter((s) => s.group === state.group);
+  const groupLength = groupStates.length;
+
+  const handleMakeDefault = () => {
+    setIsSubmitting(true);
+
+    const currentDefaultState = statesList.find((s) => s.default);
+
+    let newStatesList = statesList.map((s) => ({
+      ...s,
+      default: s.id === state.id ? true : s.id === currentDefaultState?.id ? false : s.default,
+    }));
+    newStatesList = orderArrayBy(newStatesList, "sequence", "ascending");
+
+    mutate(
+      STATE_LIST(projectId as string),
+      orderStateGroups(groupBy(newStatesList, "group")),
+      false
+    );
+
+    if (currentDefaultState)
+      stateService
+        .patchState(workspaceSlug as string, projectId as string, currentDefaultState?.id ?? "", {
+          default: false,
+        })
+        .then(() => {
+          stateService
+            .patchState(workspaceSlug as string, projectId as string, state.id, {
+              default: true,
+            })
+            .then(() => {
+              mutate(STATE_LIST(projectId as string));
+              setIsSubmitting(false);
+            })
+            .catch(() => {
+              setIsSubmitting(false);
+            });
+        });
+    else
+      stateService
+        .patchState(workspaceSlug as string, projectId as string, state.id, {
+          default: true,
+        })
+        .then(() => {
+          mutate(STATE_LIST(projectId as string));
+          setIsSubmitting(false);
+        })
+        .catch(() => {
+          setIsSubmitting(false);
+        });
+  };
+
+  const handleMove = (state: IState, direction: "up" | "down") => {
+    let newSequence = 15000;
+
+    if (direction === "up") {
+      if (index === 1) newSequence = groupStates[0].sequence - 15000;
+      else newSequence = (groupStates[index - 2].sequence + groupStates[index - 1].sequence) / 2;
+    } else {
+      if (index === groupLength - 2) newSequence = groupStates[groupLength - 1].sequence + 15000;
+      else newSequence = (groupStates[index + 2].sequence + groupStates[index + 1].sequence) / 2;
+    }
+
+    let newStatesList = statesList.map((s) => ({
+      ...s,
+      sequence: s.id === state.id ? newSequence : s.sequence,
+    }));
+    newStatesList = orderArrayBy(newStatesList, "sequence", "ascending");
+
+    mutate(
+      STATE_LIST(projectId as string),
+      orderStateGroups(groupBy(newStatesList, "group")),
+      false
+    );
+
+    stateService
+      .patchState(workspaceSlug as string, projectId as string, state.id, {
+        sequence: newSequence,
+      })
+      .then((res) => {
+        console.log(res);
+        mutate(STATE_LIST(projectId as string));
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+
+  return (
+    <div
+      className={`group flex items-center justify-between gap-2 border-brand-base bg-brand-surface-1 p-5 first:rounded-t-[10px] last:rounded-b-[10px]`}
+    >
+      <div className="flex items-center gap-3">
+        {getStateGroupIcon(state.group, "20", "20", state.color)}
+        <div>
+          <h6 className="font-medium text-brand-muted-1">{addSpaceIfCamelCase(state.name)}</h6>
+          <p className="text-xs text-gray-400">{state.description}</p>
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        {index !== 0 && (
+          <button
+            type="button"
+            className="hidden text-gray-400 hover:text-brand-base group-hover:inline-block"
+            onClick={() => handleMove(state, "up")}
+          >
+            <ArrowUpIcon className="h-4 w-4" />
+          </button>
+        )}
+        {!(index === groupLength - 1) && (
+          <button
+            type="button"
+            className="hidden text-gray-400 hover:text-brand-base group-hover:inline-block"
+            onClick={() => handleMove(state, "down")}
+          >
+            <ArrowDownIcon className="h-4 w-4" />
+          </button>
+        )}
+        {state.default ? (
+          <span className="text-xs text-gray-400">Default</span>
+        ) : (
+          <button
+            type="button"
+            className="hidden text-xs text-gray-400 hover:text-brand-base group-hover:inline-block"
+            onClick={handleMakeDefault}
+            disabled={isSubmitting}
+          >
+            Set as default
+          </button>
+        )}
+
+        <button type="button" className="grid place-items-center" onClick={handleEditState}>
+          <PencilSquareIcon className="h-4 w-4 text-gray-400" />
+        </button>
+        <button
+          type="button"
+          className={`${
+            state.default || groupLength === 1 ? "cursor-not-allowed" : ""
+          } grid place-items-center`}
+          onClick={handleDeleteState}
+          disabled={state.default || groupLength === 1}
+        >
+          {state.default ? (
+            <Tooltip tooltipContent="Cannot delete the default state.">
+              <TrashIcon className="h-4 w-4 text-red-400" />
+            </Tooltip>
+          ) : groupLength === 1 ? (
+            <Tooltip tooltipContent="Cannot have an empty group.">
+              <TrashIcon className="h-4 w-4 text-red-400" />
+            </Tooltip>
+          ) : (
+            <TrashIcon className="h-4 w-4 text-red-400" />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/toast-alert/index.tsx b/app/components/toast-alert/index.tsx
new file mode 100644
index 000000000..5d0c0123c
--- /dev/null
+++ b/app/components/toast-alert/index.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+// hooks
+import {
+  CheckCircleIcon,
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+  XCircleIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+import useToast from "hooks/use-toast";
+// icons
+
+const ToastAlerts = () => {
+  const { alerts, removeAlert } = useToast();
+
+  if (!alerts) return null;
+
+  return (
+    <div className="pointer-events-none fixed top-5 right-5 z-50 h-full w-80 space-y-5 overflow-hidden">
+      {alerts.map((alert) => (
+        <div className="relative overflow-hidden rounded-md text-white" key={alert.id}>
+          <div className="absolute top-1 right-1">
+            <button
+              type="button"
+              className="pointer-events-auto inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2"
+              onClick={() => removeAlert(alert.id)}
+            >
+              <span className="sr-only">Dismiss</span>
+              <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+            </button>
+          </div>
+          <div
+            className={`px-2 py-4 ${
+              alert.type === "success"
+                ? "bg-[#06d6a0]"
+                : alert.type === "error"
+                ? "bg-[#ef476f]"
+                : alert.type === "warning"
+                ? "bg-[#e98601]"
+                : "bg-[#1B9aaa]"
+            }`}
+          >
+            <div className="flex items-center gap-x-3">
+              <div className="flex-shrink-0">
+                {alert.type === "success" ? (
+                  <CheckCircleIcon className="h-8 w-8" aria-hidden="true" />
+                ) : alert.type === "error" ? (
+                  <XCircleIcon className="h-8 w-8" />
+                ) : alert.type === "warning" ? (
+                  <ExclamationTriangleIcon className="h-8 w-8" aria-hidden="true" />
+                ) : (
+                  <InformationCircleIcon className="h-8 w-8" />
+                )}
+              </div>
+              <div>
+                <p className="font-semibold">{alert.title}</p>
+                {alert.message && <p className="mt-1 text-xs">{alert.message}</p>}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ToastAlerts;
diff --git a/app/components/ui/avatar.tsx b/app/components/ui/avatar.tsx
new file mode 100644
index 000000000..7d2d9a575
--- /dev/null
+++ b/app/components/ui/avatar.tsx
@@ -0,0 +1,128 @@
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import workspaceService from "services/workspace.service";
+// icons
+import User from "public/user.png";
+// types
+import { IUser, IUserLite } from "types";
+// fetch-keys
+import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
+
+type AvatarProps = {
+  user?: Partial<IUser> | Partial<IUserLite> | IUser | IUserLite | undefined | null;
+  index?: number;
+  height?: string;
+  width?: string;
+  fontSize?: string;
+};
+
+export const Avatar: React.FC<AvatarProps> = ({
+  user,
+  index,
+  height = "20px",
+  width = "20px",
+  fontSize = "12px",
+}) => (
+  <div
+    className={`relative rounded-full ${index && index !== 0 ? "-ml-3.5" : ""}`}
+    style={{
+      height: height,
+      width: width,
+    }}
+  >
+    {user && user.avatar && user.avatar !== "" ? (
+      <div
+        className={`rounded-full border-2 ${
+          index ? "border-brand-surface-1 bg-brand-surface-2" : "border-transparent"
+        }`}
+        style={{
+          height: height,
+          width: width,
+        }}
+      >
+        <Image
+          src={user.avatar}
+          height="100%"
+          width="100%"
+          className="rounded-full"
+          alt={user.first_name}
+        />
+      </div>
+    ) : (
+      <div
+        className="grid place-items-center rounded-full border-2 border-brand-surface-1 bg-gray-700 text-xs capitalize text-white"
+        style={{
+          height: height,
+          width: width,
+          fontSize: fontSize,
+        }}
+      >
+        {user?.first_name && user.first_name !== ""
+          ? user.first_name.charAt(0)
+          : user?.email?.charAt(0)}
+      </div>
+    )}
+  </div>
+);
+
+type AsigneesListProps = {
+  users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
+  userIds?: string[];
+  length?: number;
+  showLength?: boolean;
+};
+
+export const AssigneesList: React.FC<AsigneesListProps> = ({
+  users,
+  userIds,
+  length = 5,
+  showLength = true,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: people } = useSWR(
+    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
+    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
+  );
+
+  if ((users && users.length === 0) || (userIds && userIds.length === 0))
+    return (
+      <div className="h-5 w-5 rounded-full border-2 border-white bg-brand-surface-2">
+        <Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
+      </div>
+    );
+
+  return (
+    <>
+      {users && (
+        <>
+          {users.slice(0, length).map((user, index) => (
+            <Avatar key={user?.id} user={user} index={index} />
+          ))}
+          {users.length > length ? <span>+{users.length - length}</span> : null}
+        </>
+      )}
+      {userIds && (
+        <>
+          {userIds.slice(0, length).map((userId, index) => {
+            const user = people?.find((p) => p.member.id === userId)?.member;
+
+            return <Avatar key={userId} user={user} index={index} />;
+          })}
+          {showLength ? (
+            userIds.length > length ? (
+              <span>+{userIds.length - length}</span>
+            ) : null
+          ) : (
+            ""
+          )}
+        </>
+      )}
+    </>
+  );
+};
diff --git a/app/components/ui/buttons/danger-button.tsx b/app/components/ui/buttons/danger-button.tsx
new file mode 100644
index 000000000..3adb7012b
--- /dev/null
+++ b/app/components/ui/buttons/danger-button.tsx
@@ -0,0 +1,36 @@
+// types
+import { ButtonProps } from "./type";
+
+export const DangerButton: React.FC<ButtonProps> = ({
+  children,
+  className = "",
+  onClick,
+  type = "button",
+  disabled = false,
+  loading = false,
+  size = "sm",
+  outline = false,
+}) => (
+  <button
+    type={type}
+    className={`${className} border border-red-500 font-medium duration-300 ${
+      size === "sm"
+        ? "rounded px-3 py-2 text-xs"
+        : size === "md"
+        ? "rounded-md px-3.5 py-2 text-sm"
+        : "rounded-lg px-4 py-2 text-base"
+    } ${
+      disabled
+        ? "cursor-not-allowed bg-opacity-70 border-opacity-70 hover:bg-opacity-70 hover:border-opacity-70"
+        : ""
+    } ${
+      outline
+        ? "bg-transparent text-red-500 hover:bg-red-500 hover:text-white"
+        : "text-white bg-red-500 hover:border-opacity-90 hover:bg-opacity-90"
+    } ${loading ? "cursor-wait" : ""}`}
+    onClick={onClick}
+    disabled={disabled || loading}
+  >
+    {children}
+  </button>
+);
diff --git a/app/components/ui/buttons/index.ts b/app/components/ui/buttons/index.ts
new file mode 100644
index 000000000..0ce5c556a
--- /dev/null
+++ b/app/components/ui/buttons/index.ts
@@ -0,0 +1,3 @@
+export * from "./danger-button";
+export * from "./primary-button";
+export * from "./secondary-button";
diff --git a/app/components/ui/buttons/primary-button.tsx b/app/components/ui/buttons/primary-button.tsx
new file mode 100644
index 000000000..d86227e3a
--- /dev/null
+++ b/app/components/ui/buttons/primary-button.tsx
@@ -0,0 +1,36 @@
+// types
+import { ButtonProps } from "./type";
+
+export const PrimaryButton: React.FC<ButtonProps> = ({
+  children,
+  className = "",
+  onClick,
+  type = "button",
+  disabled = false,
+  loading = false,
+  size = "sm",
+  outline = false,
+}) => (
+  <button
+    type={type}
+    className={`${className} border border-brand-accent font-medium duration-300 ${
+      size === "sm"
+        ? "rounded px-3 py-2 text-xs"
+        : size === "md"
+        ? "rounded-md px-3.5 py-2 text-sm"
+        : "rounded-lg px-4 py-2 text-base"
+    } ${
+      disabled
+        ? "cursor-not-allowed bg-opacity-70 border-opacity-70 hover:bg-opacity-70 hover:border-opacity-70"
+        : ""
+    } ${
+      outline
+        ? "bg-transparent text-brand-accent hover:bg-brand-accent hover:text-white"
+        : "text-white bg-brand-accent hover:border-opacity-90 hover:bg-opacity-90"
+    }  ${loading ? "cursor-wait" : ""}`}
+    onClick={onClick}
+    disabled={disabled || loading}
+  >
+    {children}
+  </button>
+);
diff --git a/app/components/ui/buttons/secondary-button.tsx b/app/components/ui/buttons/secondary-button.tsx
new file mode 100644
index 000000000..6f0ab72b4
--- /dev/null
+++ b/app/components/ui/buttons/secondary-button.tsx
@@ -0,0 +1,36 @@
+// types
+import { ButtonProps } from "./type";
+
+export const SecondaryButton: React.FC<ButtonProps> = ({
+  children,
+  className = "",
+  onClick,
+  type = "button",
+  disabled = false,
+  loading = false,
+  size = "sm",
+  outline = false,
+}) => (
+  <button
+    type={type}
+    className={`${className} border border-brand-base font-medium duration-300 ${
+      size === "sm"
+        ? "rounded px-3 py-2 text-xs"
+        : size === "md"
+        ? "rounded-md px-3.5 py-2 text-sm"
+        : "rounded-lg px-4 py-2 text-base"
+    } ${
+      disabled
+        ? "cursor-not-allowed border-brand-base bg-brand-surface-1 hover:border-brand-base hover:border-opacity-100 hover:bg-brand-surface-1 hover:bg-opacity-100"
+        : ""
+    } ${
+      outline
+        ? "bg-transparent hover:bg-brand-surface-2"
+        : "bg-brand-surface-2 hover:border-opacity-70 hover:bg-opacity-70"
+    } ${loading ? "cursor-wait" : ""}`}
+    onClick={onClick}
+    disabled={disabled || loading}
+  >
+    {children}
+  </button>
+);
diff --git a/app/components/ui/buttons/type.d.ts b/app/components/ui/buttons/type.d.ts
new file mode 100644
index 000000000..1391e0771
--- /dev/null
+++ b/app/components/ui/buttons/type.d.ts
@@ -0,0 +1,10 @@
+export type ButtonProps = {
+  children: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+  type?: "button" | "submit" | "reset";
+  disabled?: boolean;
+  loading?: boolean;
+  size?: "sm" | "md" | "lg";
+  outline?: boolean;
+};
diff --git a/app/components/ui/context-menu.tsx b/app/components/ui/context-menu.tsx
new file mode 100644
index 000000000..755318b34
--- /dev/null
+++ b/app/components/ui/context-menu.tsx
@@ -0,0 +1,103 @@
+import React, { useEffect } from "react";
+
+import Link from "next/link";
+
+type Props = {
+  position: {
+    x: number;
+    y: number;
+  };
+  children: React.ReactNode;
+  title?: string | JSX.Element;
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const ContextMenu = ({ position, children, title, isOpen, setIsOpen }: Props) => {
+  useEffect(() => {
+    const hideContextMenu = () => {
+      if (isOpen) setIsOpen(false);
+    };
+
+    window.addEventListener("click", hideContextMenu);
+    window.addEventListener("keydown", (e: KeyboardEvent) => {
+      if (e.key === "Escape") hideContextMenu();
+    });
+
+    return () => {
+      window.removeEventListener("click", hideContextMenu);
+      window.removeEventListener("keydown", hideContextMenu);
+    };
+  }, [isOpen, setIsOpen]);
+
+  return (
+    <div
+      className={`fixed z-20 h-full w-full ${
+        isOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
+      }`}
+    >
+      <div
+        className={`fixed z-20 flex min-w-[8rem] flex-col items-stretch gap-1 rounded-md border border-brand-base bg-brand-surface-1 p-2 text-xs shadow-lg`}
+        style={{
+          left: `${position.x}px`,
+          top: `${position.y}px`,
+        }}
+      >
+        {title && (
+          <h4 className="border-b border-brand-base px-1 py-1 pb-2 text-[0.8rem] font-medium">
+            {title}
+          </h4>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+};
+
+type MenuItemProps = {
+  children: JSX.Element | string;
+  renderAs?: "button" | "a";
+  href?: string;
+  onClick?: () => void;
+  className?: string;
+  Icon?: any;
+};
+
+const MenuItem: React.FC<MenuItemProps> = ({
+  children,
+  renderAs,
+  href = "",
+  onClick,
+  className = "",
+  Icon,
+}) => (
+  <>
+    {renderAs === "a" ? (
+      <Link href={href}>
+        <a
+          className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2`}
+        >
+          <>
+            {Icon && <Icon />}
+            {children}
+          </>
+        </a>
+      </Link>
+    ) : (
+      <button
+        type="button"
+        className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2`}
+        onClick={onClick}
+      >
+        <>
+          {Icon && <Icon height={12} width={12} />}
+          {children}
+        </>
+      </button>
+    )}
+  </>
+);
+
+ContextMenu.Item = MenuItem;
+
+export { ContextMenu };
diff --git a/app/components/ui/custom-menu.tsx b/app/components/ui/custom-menu.tsx
new file mode 100644
index 000000000..5bae6fe0f
--- /dev/null
+++ b/app/components/ui/custom-menu.tsx
@@ -0,0 +1,175 @@
+import React from "react";
+// next
+import Link from "next/link";
+// headless ui
+import { Menu, Transition } from "@headlessui/react";
+// icons
+import { ChevronDownIcon, EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
+
+type Props = {
+  children: React.ReactNode;
+  label?: string | JSX.Element;
+  className?: string;
+  ellipsis?: boolean;
+  verticalEllipsis?: boolean;
+  height?: "sm" | "md" | "rg" | "lg";
+  width?: "sm" | "md" | "lg" | "xl" | "auto";
+  textAlignment?: "left" | "center" | "right";
+  noBorder?: boolean;
+  noChevron?: boolean;
+  optionsPosition?: "left" | "right";
+  customButton?: JSX.Element;
+};
+
+type MenuItemProps = {
+  children: JSX.Element | string;
+  renderAs?: "button" | "a";
+  href?: string;
+  onClick?: (args?: any) => void;
+  className?: string;
+};
+
+const CustomMenu = ({
+  children,
+  label,
+  className = "",
+  ellipsis = false,
+  verticalEllipsis = false,
+  height = "md",
+  width = "auto",
+  textAlignment,
+  noBorder = false,
+  noChevron = false,
+  optionsPosition = "right",
+  customButton,
+}: Props) => (
+  <Menu as="div" className={`relative w-min whitespace-nowrap text-left ${className}`}>
+    {({ open }) => (
+      <>
+        {customButton ? (
+          <Menu.Button as="div">{customButton}</Menu.Button>
+        ) : (
+          <div>
+            {ellipsis || verticalEllipsis ? (
+              <Menu.Button
+                type="button"
+                className="relative grid place-items-center rounded p-1 hover:bg-brand-surface-2 focus:outline-none"
+              >
+                <EllipsisHorizontalIcon
+                  className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`}
+                />
+              </Menu.Button>
+            ) : (
+              <Menu.Button
+                type="button"
+                className={`flex cursor-pointer items-center justify-between gap-1 px-2.5 py-1 text-xs duration-300 hover:bg-brand-surface-2 ${
+                  open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
+                } ${
+                  textAlignment === "right"
+                    ? "text-right"
+                    : textAlignment === "center"
+                    ? "text-center"
+                    : "text-left"
+                } ${
+                  noBorder
+                    ? "rounded-md"
+                    : "rounded-md border border-brand-base shadow-sm focus:outline-none"
+                } ${
+                  width === "sm"
+                    ? "w-10"
+                    : width === "md"
+                    ? "w-20"
+                    : width === "lg"
+                    ? "w-32"
+                    : width === "xl"
+                    ? "w-48"
+                    : "w-full"
+                }`}
+              >
+                {label}
+                {!noChevron && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+              </Menu.Button>
+            )}
+          </div>
+        )}
+
+        <Transition
+          as={React.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"
+        >
+          <Menu.Items
+            className={`absolute z-20 mt-1 overflow-y-scroll whitespace-nowrap rounded-md border border-brand-base bg-brand-surface-1 p-1 text-xs shadow-lg focus:outline-none ${
+              optionsPosition === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
+            } ${
+              height === "sm"
+                ? "max-h-28"
+                : height === "md"
+                ? "max-h-44"
+                : height === "rg"
+                ? "max-h-56"
+                : height === "lg"
+                ? "max-h-80"
+                : ""
+            } ${
+              width === "sm"
+                ? "w-10"
+                : width === "md"
+                ? "w-20"
+                : width === "lg"
+                ? "w-32"
+                : width === "xl"
+                ? "w-48"
+                : "min-w-full"
+            }`}
+          >
+            <div className="py-1">{children}</div>
+          </Menu.Items>
+        </Transition>
+      </>
+    )}
+  </Menu>
+);
+
+const MenuItem: React.FC<MenuItemProps> = ({
+  children,
+  renderAs,
+  href,
+  onClick,
+  className = "",
+}) => (
+  <Menu.Item as="div">
+    {({ active, close }) =>
+      renderAs === "a" ? (
+        <Link href={href ?? ""}>
+          <a
+            className={`${className} ${
+              active ? "bg-brand-surface-2" : ""
+            } hover:text-brand-muted-1 inline-block w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2`}
+            onClick={close}
+          >
+            {children}
+          </a>
+        </Link>
+      ) : (
+        <button
+          type="button"
+          className={`${className} ${
+            active ? "bg-brand-surface-2" : ""
+          } hover:text-brand-muted-1 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2`}
+          onClick={onClick}
+        >
+          {children}
+        </button>
+      )
+    }
+  </Menu.Item>
+);
+
+CustomMenu.MenuItem = MenuItem;
+
+export { CustomMenu };
diff --git a/app/components/ui/custom-search-select.tsx b/app/components/ui/custom-search-select.tsx
new file mode 100644
index 000000000..b4261f1a5
--- /dev/null
+++ b/app/components/ui/custom-search-select.tsx
@@ -0,0 +1,174 @@
+import React, { useState } from "react";
+// headless ui
+import { Combobox, Transition } from "@headlessui/react";
+// icons
+import { CheckIcon, ChevronDownIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+type CustomSearchSelectProps = {
+  value: any;
+  onChange: any;
+  options: {
+    value: any;
+    query: string;
+    content: JSX.Element;
+  }[];
+  label?: string | JSX.Element;
+  textAlignment?: "left" | "center" | "right";
+  height?: "sm" | "md" | "rg" | "lg";
+  position?: "right" | "left";
+  noChevron?: boolean;
+  customButton?: JSX.Element;
+  optionsClassName?: string;
+  input?: boolean;
+  disabled?: boolean;
+  selfPositioned?: boolean;
+  multiple?: boolean;
+  footerOption?: JSX.Element;
+};
+export const CustomSearchSelect = ({
+  label,
+  textAlignment,
+  height = "md",
+  value,
+  onChange,
+  options,
+  position = "left",
+  noChevron = false,
+  customButton,
+  optionsClassName = "",
+  input = false,
+  disabled = false,
+  selfPositioned = false,
+  multiple = false,
+  footerOption,
+}: CustomSearchSelectProps) => {
+  const [query, setQuery] = useState("");
+
+  const filteredOptions =
+    query === ""
+      ? options
+      : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const props: any = {
+    value,
+    onChange,
+    disabled,
+  };
+
+  if (multiple) props.multiple = true;
+
+  return (
+    <Combobox
+      as="div"
+      className={`${!selfPositioned ? "relative" : ""} flex-shrink-0 text-left`}
+      {...props}
+    >
+      {({ open }: any) => (
+        <>
+          {customButton ? (
+            <Combobox.Button as="div">{customButton}</Combobox.Button>
+          ) : (
+            <Combobox.Button
+              className={`flex w-full border border-brand-base ${
+                disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
+              } ${
+                input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+              } items-center justify-between gap-1 rounded-md shadow-sm duration-300 focus:outline-none focus:ring-1 focus:ring-brand-base ${
+                textAlignment === "right"
+                  ? "text-right"
+                  : textAlignment === "center"
+                  ? "text-center"
+                  : "text-left"
+              }`}
+            >
+              {label}
+              {!noChevron && !disabled && (
+                <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+              )}
+            </Combobox.Button>
+          )}
+          <Transition
+            show={open}
+            as={React.Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Combobox.Options
+              className={`${optionsClassName} absolute min-w-[10rem] border border-brand-base p-2 ${
+                position === "right" ? "right-0" : "left-0"
+              } z-10 mt-1 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none`}
+            >
+              <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-brand-base bg-brand-surface-1 px-2">
+                <MagnifyingGlassIcon className="text-brand-muted-1 h-3 w-3" />
+                <Combobox.Input
+                  className="text-brand-muted-1  w-full bg-transparent py-1  px-2 text-xs focus:outline-none"
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder="Type to search..."
+                  displayValue={(assigned: any) => assigned?.name}
+                />
+              </div>
+              <div
+                className={`mt-2 space-y-1 ${
+                  height === "sm"
+                    ? "max-h-28"
+                    : height === "md"
+                    ? "max-h-44"
+                    : height === "rg"
+                    ? "max-h-56"
+                    : height === "lg"
+                    ? "max-h-80"
+                    : ""
+                } overflow-y-scroll`}
+              >
+                {filteredOptions ? (
+                  filteredOptions.length > 0 ? (
+                    filteredOptions.map((option) => (
+                      <Combobox.Option
+                        key={option.value}
+                        value={option.value}
+                        className={({ active, selected }) =>
+                          `${active || selected ? "bg-brand-surface-2" : ""} ${
+                            selected ? "font-medium" : ""
+                          } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-brand-secondary`
+                        }
+                      >
+                        {({ active, selected }) => (
+                          <>
+                            {option.content}
+                            {multiple ? (
+                              <div
+                                className={`flex items-center justify-center rounded border border-gray-500 p-0.5 ${
+                                  active || selected ? "opacity-100" : "opacity-0"
+                                }`}
+                              >
+                                <CheckIcon
+                                  className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
+                                />
+                              </div>
+                            ) : (
+                              <CheckIcon
+                                className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
+                              />
+                            )}
+                          </>
+                        )}
+                      </Combobox.Option>
+                    ))
+                  ) : (
+                    <p className="text-center text-brand-secondary">No matching results</p>
+                  )
+                ) : (
+                  <p className="text-center text-brand-secondary">Loading...</p>
+                )}
+              </div>
+              {footerOption}
+            </Combobox.Options>
+          </Transition>
+        </>
+      )}
+    </Combobox>
+  );
+};
diff --git a/app/components/ui/custom-select.tsx b/app/components/ui/custom-select.tsx
new file mode 100644
index 000000000..81f2e9b5a
--- /dev/null
+++ b/app/components/ui/custom-select.tsx
@@ -0,0 +1,129 @@
+import React from "react";
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// icons
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import { CheckIcon } from "@heroicons/react/24/outline";
+
+type CustomSelectProps = {
+  value: any;
+  onChange: any;
+  children: React.ReactNode;
+  label?: string | JSX.Element;
+  textAlignment?: "left" | "center" | "right";
+  maxHeight?: "sm" | "rg" | "md" | "lg" | "none";
+  position?: "right" | "left";
+  width?: "auto" | string;
+  input?: boolean;
+  noChevron?: boolean;
+  customButton?: JSX.Element;
+  optionsClassName?: string;
+  disabled?: boolean;
+  selfPositioned?: boolean;
+};
+
+const CustomSelect = ({
+  children,
+  label,
+  textAlignment,
+  value,
+  onChange,
+  maxHeight = "none",
+  position = "left",
+  width = "auto",
+  input = false,
+  noChevron = false,
+  customButton,
+  optionsClassName = "",
+  disabled = false,
+  selfPositioned = false,
+}: CustomSelectProps) => (
+  <Listbox
+    as="div"
+    value={value}
+    onChange={onChange}
+    className={`${!selfPositioned ? "relative" : ""} flex-shrink-0 text-left`}
+    disabled={disabled}
+  >
+    <div>
+      {customButton ? (
+        <Listbox.Button as="div">{customButton}</Listbox.Button>
+      ) : (
+        <Listbox.Button
+          className={`flex w-full ${
+            disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
+          } items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 focus:outline-none ${
+            input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+          } ${
+            textAlignment === "right"
+              ? "text-right"
+              : textAlignment === "center"
+              ? "text-center"
+              : "text-left"
+          }`}
+        >
+          {label}
+          {!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+        </Listbox.Button>
+      )}
+    </div>
+
+    <Transition
+      as={React.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"
+    >
+      <Listbox.Options
+        className={`${optionsClassName} absolute border border-brand-base ${
+          position === "right" ? "right-0" : "left-0"
+        } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none ${
+          width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
+        } ${input ? "max-h-48" : ""} ${
+          maxHeight === "lg"
+            ? "max-h-60"
+            : maxHeight === "md"
+            ? "max-h-48"
+            : maxHeight === "rg"
+            ? "max-h-36"
+            : maxHeight === "sm"
+            ? "max-h-28"
+            : ""
+        }`}
+      >
+        <div className="space-y-1 p-2">{children}</div>
+      </Listbox.Options>
+    </Transition>
+  </Listbox>
+);
+
+type OptionProps = {
+  children: string | JSX.Element;
+  value: any;
+  className?: string;
+};
+
+const Option: React.FC<OptionProps> = ({ children, value, className }) => (
+  <Listbox.Option
+    value={value}
+    className={({ active, selected }) =>
+      `${className} ${active || selected ? "bg-brand-surface-2" : ""} ${
+        selected ? "font-medium" : ""
+      } cursor-pointer select-none truncate rounded px-1 py-1.5 text-brand-secondary`
+    }
+  >
+    {({ selected }) => (
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">{children}</div>
+        {selected && <CheckIcon className="h-4 w-4 flex-shrink-0" />}
+      </div>
+    )}
+  </Listbox.Option>
+);
+
+CustomSelect.Option = Option;
+
+export { CustomSelect };
diff --git a/app/components/ui/date.tsx b/app/components/ui/date.tsx
new file mode 100644
index 000000000..54a684086
--- /dev/null
+++ b/app/components/ui/date.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+
+import { Popover, Transition } from "@headlessui/react";
+import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
+// react-datepicker
+import DatePicker from "react-datepicker";
+// import "react-datepicker/dist/react-datepicker.css";
+import { renderDateFormat } from "helpers/date-time.helper";
+
+type Props = {
+  value: string | null;
+  onChange: (val: string | null) => void;
+  label: string;
+};
+
+export const DateSelect: React.FC<Props> = ({ value, onChange, label }) => (
+  <Popover className="relative flex items-center justify-center  rounded-lg">
+    {({ open }) => (
+      <>
+        <Popover.Button
+          className={({ open }) =>
+            `flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200 
+              ${
+                open
+                  ? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
+                  : "hover:bg-brand-accent/5 "
+              }`
+          }
+        >
+          <span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
+            {value ? (
+              <>
+                <span className="text-gray-600">{value}</span>
+                <button onClick={() => onChange(null)}>
+                  <XMarkIcon className="h-3 w-3 text-gray-600" />
+                </button>
+              </>
+            ) : (
+              <>
+                <CalendarDaysIcon className="h-4 w-4 flex-shrink-0 text-brand-secondary" />
+                <span className="text-brand-secondary">{label}</span>
+              </>
+            )}
+          </span>
+        </Popover.Button>
+
+        <Transition
+          as={React.Fragment}
+          enter="transition ease-out duration-200"
+          enterFrom="opacity-0 translate-y-1"
+          enterTo="opacity-100 translate-y-0"
+          leave="transition ease-in duration-150"
+          leaveFrom="opacity-100 translate-y-0"
+          leaveTo="opacity-0 translate-y-1"
+        >
+          <Popover.Panel className="absolute top-10 -left-10 z-20  transform overflow-hidden">
+            <DatePicker
+              selected={value ? new Date(value) : null}
+              onChange={(val) => {
+                if (!val) onChange("");
+                else onChange(renderDateFormat(val));
+              }}
+              dateFormat="dd-MM-yyyy"
+              inline
+            />
+          </Popover.Panel>
+        </Transition>
+      </>
+    )}
+  </Popover>
+);
diff --git a/app/components/ui/datepicker.tsx b/app/components/ui/datepicker.tsx
new file mode 100644
index 000000000..999b46ce4
--- /dev/null
+++ b/app/components/ui/datepicker.tsx
@@ -0,0 +1,52 @@
+// react-datepicker
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+// helpers
+import { renderDateFormat } from "helpers/date-time.helper";
+
+type Props = {
+  renderAs?: "input" | "button";
+  value: Date | string | null | undefined;
+  onChange: (val: string | null) => void;
+  placeholder?: string;
+  displayShortForm?: boolean;
+  error?: boolean;
+  className?: string;
+  isClearable?: boolean;
+  disabled?: boolean;
+};
+
+export const CustomDatePicker: React.FC<Props> = ({
+  renderAs = "button",
+  value,
+  onChange,
+  placeholder = "Select date",
+  displayShortForm = false,
+  error = false,
+  className = "",
+  isClearable = true,
+  disabled = false,
+}) => (
+  <DatePicker
+    placeholderText={placeholder}
+    selected={value ? new Date(value) : null}
+    onChange={(val) => {
+      if (!val) onChange(null);
+      else onChange(renderDateFormat(val));
+    }}
+    className={`${
+      renderAs === "input"
+        ? "block px-3 py-2 text-sm focus:outline-none"
+        : renderAs === "button"
+        ? `px-3 py-1 text-xs shadow-sm ${
+            disabled ? "" : "hover:bg-brand-surface-2"
+          } duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`
+        : ""
+    } ${error ? "border-red-500 bg-red-100" : ""} ${
+      disabled ? "cursor-not-allowed" : "cursor-pointer"
+    } w-full rounded-md border border-brand-base bg-transparent caret-transparent ${className}`}
+    dateFormat="dd-MM-yyyy"
+    isClearable={isClearable}
+    disabled={disabled}
+  />
+);
diff --git a/app/components/ui/empty-space.tsx b/app/components/ui/empty-space.tsx
new file mode 100644
index 000000000..755085299
--- /dev/null
+++ b/app/components/ui/empty-space.tsx
@@ -0,0 +1,79 @@
+// next
+import Link from "next/link";
+// react
+import React from "react";
+// icons
+import { ChevronRightIcon } from "@heroicons/react/24/outline";
+
+type EmptySpaceProps = {
+  title: string;
+  description: string;
+  children: any;
+  Icon?: any;
+  link?: { text: string; href: string };
+};
+
+const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, Icon, link }) => (
+  <>
+    <div className="max-w-lg">
+      {Icon ? (
+        <div className="mb-4">
+          <Icon className="h-14 w-14 text-gray-400" />
+        </div>
+      ) : null}
+
+      <h2 className="text-lg font-medium text-brand-base">{title}</h2>
+      <div className="mt-1 text-sm text-brand-secondary">{description}</div>
+      <ul role="list" className="mt-6 divide-y divide-gray-200 border-t border-brand-base border-b">
+        {children}
+      </ul>
+      {link ? (
+        <div className="mt-6 flex">
+          <Link href={link.href}>
+            <a className="text-sm font-medium text-brand-accent hover:text-brand-accent">
+              {link.text}
+              <span aria-hidden="true"> &rarr;</span>
+            </a>
+          </Link>
+        </div>
+      ) : null}
+    </div>
+  </>
+);
+
+type EmptySpaceItemProps = {
+  title: string;
+  description?: React.ReactNode | string;
+  Icon: any;
+  action: () => void;
+};
+
+const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Icon, action }) => (
+  <>
+    <li className="cursor-pointer" onClick={action}>
+      <div
+        className={`group relative flex ${
+          description ? "items-start" : "items-center"
+        } space-x-3 py-4`}
+      >
+        <div className="flex-shrink-0">
+          <span className={`inline-flex h-10 w-10 items-center justify-center rounded-lg bg-brand-accent`}>
+            <Icon className="h-6 w-6 text-white" aria-hidden="true" />
+          </span>
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="text-sm font-medium text-brand-base">{title}</div>
+          {description ? <div className="text-sm text-brand-secondary">{description}</div> : null}
+        </div>
+        <div className="flex-shrink-0 self-center">
+          <ChevronRightIcon
+            className="h-5 w-5 text-gray-400 group-hover:text-brand-secondary"
+            aria-hidden="true"
+          />
+        </div>
+      </div>
+    </li>
+  </>
+);
+
+export { EmptySpace, EmptySpaceItem };
diff --git a/app/components/ui/empty-state.tsx b/app/components/ui/empty-state.tsx
new file mode 100644
index 000000000..c0fec4ee5
--- /dev/null
+++ b/app/components/ui/empty-state.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+import Image from "next/image";
+
+// ui
+import { PrimaryButton } from "components/ui";
+// icon
+import { PlusIcon } from "@heroicons/react/24/outline";
+// helper
+import { capitalizeFirstLetter } from "helpers/string.helper";
+
+type Props = {
+  type: "cycle" | "module" | "project" | "issue" | "view" | "page";
+  title: string;
+  description: React.ReactNode | string;
+  imgURL: string;
+  action?: () => void;
+};
+
+export const EmptyState: React.FC<Props> = ({ type, title, description, imgURL, action }) => {
+  const shortcutKey = (type: string) => {
+    switch (type) {
+      case "cycle":
+        return "Q";
+      case "module":
+        return "M";
+      case "project":
+        return "P";
+      case "issue":
+        return "C";
+      case "view":
+        return "V";
+      case "page":
+        return "D"
+      default:
+        return null;
+    }
+  };
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-5 text-center">
+      <div className="h-32 w-72">
+        <Image src={imgURL} height="128" width="288" alt={type} />
+      </div>
+
+      <h3 className="text-xl font-semibold text-brand-secondary">{title}</h3>
+      {shortcutKey(type) && (
+        <span>
+          Use shortcut{" "}
+          <span className="mx-1 rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-brand-muted-1">
+            {shortcutKey(type)}
+          </span>{" "}
+          to create {type} from anywhere.
+        </span>
+      )}
+      <p className="max-w-md text-sm text-brand-secondary">{description}</p>
+
+      <PrimaryButton
+        className="flex items-center gap-1"
+        onClick={() => {
+          if (action) {
+            action();
+            return;
+          }
+
+          if (!shortcutKey(type)) return;
+
+          const e = new KeyboardEvent("keydown", {
+            key: shortcutKey(type) as string,
+          });
+          document.dispatchEvent(e);
+        }}
+      >
+        <PlusIcon className="h-4 w-4 font-bold text-white" />
+        Create New {capitalizeFirstLetter(type)}
+      </PrimaryButton>
+    </div>
+  );
+};
diff --git a/app/components/ui/index.ts b/app/components/ui/index.ts
new file mode 100644
index 000000000..1982f63e3
--- /dev/null
+++ b/app/components/ui/index.ts
@@ -0,0 +1,23 @@
+export * from "./buttons";
+export * from "./input";
+export * from "./text-area";
+export * from "./avatar";
+export * from "./context-menu";
+export * from "./custom-menu";
+export * from "./custom-search-select";
+export * from "./custom-select";
+export * from "./date";
+export * from "./datepicker";
+export * from "./empty-space";
+export * from "./loader";
+export * from "./multi-input";
+export * from "./multi-level-select";
+export * from "./outline-button";
+export * from "./progress-bar";
+export * from "./spinner";
+export * from "./tooltip";
+export * from "./labels-list";
+export * from "./linear-progress-indicator";
+export * from "./empty-state";
+export * from "./multi-level-dropdown";
+export * from "./toggle-switch";
diff --git a/app/components/ui/input/index.tsx b/app/components/ui/input/index.tsx
new file mode 100644
index 000000000..b2c93193a
--- /dev/null
+++ b/app/components/ui/input/index.tsx
@@ -0,0 +1,52 @@
+import * as React from "react";
+
+// types
+import { Props } from "./types";
+
+export const Input: React.FC<Props> = ({
+  label,
+  value,
+  name,
+  register,
+  validations,
+  error,
+  mode = "primary",
+  onChange,
+  className = "",
+  type,
+  id,
+  size = "rg",
+  fullWidth = true,
+  ...rest
+}) => (
+  <>
+    {label && (
+      <label htmlFor={id} className="text-brand-muted-1 mb-2">
+        {label}
+      </label>
+    )}
+    <input
+      type={type}
+      id={id}
+      value={value}
+      {...(register && register(name, validations))}
+      onChange={(e) => {
+        register && register(name).onChange(e);
+        onChange && onChange(e);
+      }}
+      className={`block rounded-md bg-transparent text-sm focus:outline-none ${
+        mode === "primary"
+          ? "rounded-md border border-brand-base"
+          : mode === "transparent"
+          ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-brand-accent"
+          : mode === "trueTransparent"
+          ? "rounded border-none bg-transparent ring-0"
+          : ""
+      } ${error ? "border-red-500/20" : ""} ${error && mode === "primary" ? "bg-red-500/20" : ""} ${
+        fullWidth ? "w-full" : ""
+      } ${size === "rg" ? "px-3 py-2" : size === "lg" ? "p-3" : ""} ${className}`}
+      {...rest}
+    />
+    {error?.message && <div className="text-sm text-red-500">{error.message}</div>}
+  </>
+);
diff --git a/app/components/ui/input/types.d.ts b/app/components/ui/input/types.d.ts
new file mode 100644
index 000000000..8207006df
--- /dev/null
+++ b/app/components/ui/input/types.d.ts
@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { UseFormRegister, RegisterOptions } from "react-hook-form";
+
+export interface Props extends React.ComponentPropsWithoutRef<"input"> {
+  label?: string;
+  name: string;
+  value?: string | number | readonly string[];
+  mode?: "primary" | "transparent" | "trueTransparent" | "secondary" | "disabled";
+  register?: UseFormRegister<any>;
+  validations?: RegisterOptions;
+  error?: any;
+  className?: string;
+  size?: "rg" | "lg";
+  fullWidth?: boolean;
+}
diff --git a/app/components/ui/labels-list.tsx b/app/components/ui/labels-list.tsx
new file mode 100644
index 000000000..564811f19
--- /dev/null
+++ b/app/components/ui/labels-list.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+type IssueLabelsListProps = {
+  labels?: (string | undefined)[];
+  length?: number;
+  showLength?: boolean;
+};
+
+export const IssueLabelsList: React.FC<IssueLabelsListProps> = ({
+  labels,
+  length = 5,
+  showLength = true,
+}) => (
+  <>
+    {labels && (
+      <>
+        {labels.slice(0, length).map((color, index) => (
+          <div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
+            <span
+              className={`h-4 w-4 flex-shrink-0 rounded-full border border-brand-base
+              `}
+              style={{
+                backgroundColor: color && color !== "" ? color : "#000000",
+              }}
+            />
+          </div>
+        ))}
+        {labels.length > length ? <span>+{labels.length - length}</span> : null}
+      </>
+    )}
+  </>
+);
diff --git a/app/components/ui/linear-progress-indicator.tsx b/app/components/ui/linear-progress-indicator.tsx
new file mode 100644
index 000000000..74152ab82
--- /dev/null
+++ b/app/components/ui/linear-progress-indicator.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { Tooltip } from "./tooltip";
+
+type Props = {
+  data: any;
+};
+
+export const LinearProgressIndicator: React.FC<Props> = ({ data }) => {
+  const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
+  let progress = 0;
+
+  const bars = data.map((item: any) => {
+    const width = `${(item.value / total) * 100}%`;
+    const style = {
+      width,
+      backgroundColor: item.color,
+    };
+    progress += item.value;
+
+    return (
+      <Tooltip key={item.id} tooltipContent={`${item.name} ${Math.round(item.value)}%`}>
+        <div style={style} />
+      </Tooltip>
+    );
+  });
+
+  return (
+    <div className="flex h-1 w-full items-center justify-between gap-1">
+      {total === 0 ? " - 0%" : <div className="flex h-full w-full gap-1">{bars}</div>}
+    </div>
+  );
+};
diff --git a/app/components/ui/loader.tsx b/app/components/ui/loader.tsx
new file mode 100644
index 000000000..107f03e8c
--- /dev/null
+++ b/app/components/ui/loader.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const Loader = ({ children, className = "" }: Props) => (
+  <div className={`${className} animate-pulse`} role="status">
+    {children}
+  </div>
+);
+
+type ItemProps = {
+  height?: string;
+  width?: string;
+};
+
+const Item: React.FC<ItemProps> = ({ height = "auto", width = "auto" }) => (
+  <div className="rounded-md bg-brand-surface-2" style={{ height: height, width: width }} />
+);
+
+Loader.Item = Item;
+
+export { Loader };
diff --git a/app/components/ui/multi-input.tsx b/app/components/ui/multi-input.tsx
new file mode 100644
index 000000000..c27a900e8
--- /dev/null
+++ b/app/components/ui/multi-input.tsx
@@ -0,0 +1,74 @@
+// react
+import React from "react";
+
+const isEmailValid = (email: string) =>
+  String(email)
+    .toLowerCase()
+    .match(
+      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+    );
+
+export const MultiInput = ({ label, name, placeholder, setValue, watch }: any) => {
+  const handleKeyDown = (e: any) => {
+    if (e.key !== "Enter") return;
+    const value = e.target.value;
+    if (!value.trim()) return;
+    if (isEmailValid(value) && !watch(name)?.find((item: any) => item.email === value)) {
+      setValue(name, [...(watch(name) || []), { email: value }]);
+      e.target.value = "";
+    }
+  };
+
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement, Element>) => {
+    const value = e.target.value;
+    if (!value.trim()) return;
+    if (isEmailValid(value) && !watch(name)?.find((item: any) => item.email === value)) {
+      setValue(name, [...(watch(name) || []), { email: value }]);
+      e.target.value = "";
+    } else {
+      e.target.value = "";
+    }
+  };
+
+  const handleChange = (e: any) => {
+    const value = e.target.value.trim();
+    if (!value) return;
+    if (value.includes(",")) {
+      const tags = value.split(",");
+      tags.forEach((tag: string) => {
+        if (isEmailValid(tag) && !watch(name)?.find((item: any) => item.email === tag)) {
+          setValue(name, [...(watch(name) || []), { email: tag }]);
+        }
+      });
+      e.target.value = "";
+    }
+  };
+
+  const removeTag = (index: Number) => {
+    setValue(
+      name,
+      watch(name).filter((_: string, i: any) => i !== index)
+    );
+  };
+
+  return (
+    <>
+      {label && <label className="mb-2 text-brand-secondary">{label}</label>}
+      <div className="rounded-md border border-brand-base p-2">
+        {watch(name)?.map((tag: any, index: number) => (
+          <button type="button" className="m-1.5 rounded-full bg-slate-300 p-1.5" key={index}>
+            {tag.email} <span onClick={() => removeTag(index)}>&times;</span>
+          </button>
+        ))}
+        <input
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          type="text"
+          placeholder={placeholder}
+          className="block w-full rounded-md bg-transparent p-1.5 text-sm focus:outline-none"
+        />
+      </div>
+    </>
+  );
+};
diff --git a/app/components/ui/multi-level-dropdown.tsx b/app/components/ui/multi-level-dropdown.tsx
new file mode 100644
index 000000000..36e4e84c0
--- /dev/null
+++ b/app/components/ui/multi-level-dropdown.tsx
@@ -0,0 +1,146 @@
+import { Fragment, useState } from "react";
+
+// headless ui
+import { Menu, Transition } from "@headlessui/react";
+// icons
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { ChevronRightIcon, ChevronLeftIcon } from "@heroicons/react/20/solid";
+
+type MultiLevelDropdownProps = {
+  label: string;
+  options: {
+    id: string;
+    label: string;
+    value: any;
+    selected?: boolean;
+    children?: {
+      id: string;
+      label: string | JSX.Element;
+      value: any;
+      selected?: boolean;
+    }[];
+  }[];
+  onSelect: (value: any) => void;
+  direction?: "left" | "right";
+  height?: "sm" | "md" | "rg" | "lg";
+};
+
+export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
+  label,
+  options,
+  onSelect,
+  direction = "right",
+  height = "md",
+}) => {
+  const [openChildFor, setOpenChildFor] = useState<string | null>(null);
+
+  return (
+    <Menu as="div" className="relative z-10 inline-block text-left">
+      {({ open }) => (
+        <>
+          <div>
+            <Menu.Button
+              onClick={() => setOpenChildFor(null)}
+              className={`group flex items-center justify-between gap-2 rounded-md border border-brand-base px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none ${
+                open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
+              }`}
+            >
+              {label}
+              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+            </Menu.Button>
+          </div>
+          <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"
+          >
+            <Menu.Items
+              static
+              className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none"
+            >
+              {options.map((option) => (
+                <div className="relative p-1" key={option.id}>
+                  <Menu.Item
+                    as="button"
+                    onClick={(e: any) => {
+                      if (option.children) {
+                        e.stopPropagation();
+                        e.preventDefault();
+
+                        if (openChildFor === option.id) setOpenChildFor(null);
+                        else setOpenChildFor(option.id);
+                      } else {
+                        onSelect(option.value);
+                      }
+                    }}
+                    className="w-full"
+                  >
+                    {({ active }) => (
+                      <>
+                        <div
+                          className={`${
+                            active || option.selected ? "bg-brand-surface-2" : ""
+                          } flex items-center gap-1 rounded px-1 py-1.5 text-brand-secondary ${
+                            direction === "right" ? "justify-between" : ""
+                          }`}
+                        >
+                          {direction === "left" && option.children && (
+                            <ChevronLeftIcon className="h-4 w-4" aria-hidden="true" />
+                          )}
+                          <span>{option.label}</span>
+                          {direction === "right" && option.children && (
+                            <ChevronRightIcon className="h-4 w-4" aria-hidden="true" />
+                          )}
+                        </div>
+                      </>
+                    )}
+                  </Menu.Item>
+                  {option.children && option.id === openChildFor && (
+                    <div
+                      className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-brand-surface-1 shadow-lg focus:outline-none ${
+                        direction === "left"
+                          ? "right-full -translate-x-1"
+                          : "left-full translate-x-1"
+                      } ${
+                        height === "sm"
+                          ? "max-h-28"
+                          : height === "md"
+                          ? "max-h-44"
+                          : height === "rg"
+                          ? "max-h-56"
+                          : height === "lg"
+                          ? "max-h-80"
+                          : ""
+                      }`}
+                    >
+                      <div className="space-y-1 p-1">
+                        {option.children.map((child) => (
+                          <button
+                            key={child.id}
+                            type="button"
+                            onClick={() => {
+                              onSelect(child.value);
+                            }}
+                            className={`${
+                              child.selected ? "bg-brand-surface-2" : ""
+                            } flex w-full items-center break-all rounded px-1 py-1.5 text-left capitalize text-brand-secondary hover:bg-brand-surface-2`}
+                          >
+                            {child.label}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </Menu.Items>
+          </Transition>
+        </>
+      )}
+    </Menu>
+  );
+};
diff --git a/app/components/ui/multi-level-select.tsx b/app/components/ui/multi-level-select.tsx
new file mode 100644
index 000000000..a063ee45f
--- /dev/null
+++ b/app/components/ui/multi-level-select.tsx
@@ -0,0 +1,155 @@
+import React, { useState } from "react";
+
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// icons
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
+
+type TSelectOption = {
+  id: string;
+  label: string;
+  value: any;
+  children?:
+    | (TSelectOption & {
+        children?: null;
+      })[]
+    | null;
+};
+
+type TMultipleSelectProps = {
+  options: TSelectOption[];
+  selected: TSelectOption | null;
+  setSelected: (value: any) => void;
+  label: string;
+  direction?: "left" | "right";
+};
+
+export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
+  options,
+  selected,
+  setSelected,
+  label,
+  direction = "right",
+}) => {
+  const [openChildFor, setOpenChildFor] = useState<TSelectOption | null>(null);
+
+  return (
+    <div className="fixed top-16 w-72">
+      <Listbox
+        value={selected}
+        onChange={(value) => {
+          if (value?.children === null) {
+            setSelected(value);
+            setOpenChildFor(null);
+          } else setOpenChildFor(value);
+        }}
+      >
+        {({ open }) => (
+          <div className="relative mt-1">
+            <Listbox.Button
+              onClick={() => setOpenChildFor(null)}
+              className="relative w-full cursor-default rounded-lg bg-brand-surface-2 py-2 pl-3 pr-10 text-left shadow-md sm:text-sm"
+            >
+              <span className="block truncate">{selected?.label ?? label}</span>
+              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+              </span>
+            </Listbox.Button>
+            <Transition
+              as={React.Fragment}
+              show={open}
+              leave="transition ease-in duration-100"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <Listbox.Options
+                static
+                className="absolute mt-1 max-h-60 w-full rounded-md bg-brand-surface-2 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+              >
+                {options.map((option) => (
+                  <Listbox.Option
+                    key={option.id}
+                    className={
+                      "relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-brand-surface-1 hover:text-brand-base"
+                    }
+                    onClick={(e: any) => {
+                      if (option.children !== null) {
+                        e.preventDefault();
+                        setOpenChildFor(option);
+                      }
+                      if (option.id === openChildFor?.id) {
+                        e.preventDefault();
+                        setOpenChildFor(null);
+                      }
+                    }}
+                    value={option}
+                  >
+                    {({ selected }) => (
+                      <>
+                        {openChildFor?.id === option.id && (
+                          <div
+                            className={`absolute h-auto max-h-72 w-72 rounded-lg border border-brand-base bg-brand-surface-2 ${
+                              direction === "right"
+                                ? "left-full translate-x-2 rounded-tl-none shadow-md"
+                                : "right-full -translate-x-2 rounded-tr-none shadow-md"
+                            }`}
+                          >
+                            {option.children?.map((child) => (
+                              <Listbox.Option
+                                key={child.id}
+                                className={
+                                  "relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-brand-surface-1 hover:text-brand-base"
+                                }
+                                as="div"
+                                value={child}
+                              >
+                                {({ selected }) => (
+                                  <>
+                                    <span
+                                      className={`block truncate ${
+                                        selected ? "font-medium" : "font-normal"
+                                      }`}
+                                    >
+                                      {child.label}
+                                    </span>
+                                    {selected ? (
+                                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">
+                                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                      </span>
+                                    ) : null}
+                                  </>
+                                )}
+                              </Listbox.Option>
+                            ))}
+
+                            <div
+                              className={`absolute h-0 w-0 border-t-8 border-brand-base ${
+                                direction === "right"
+                                  ? "top-0 left-0 -translate-x-2 border-r-8 border-b-8 border-b-transparent border-t-transparent border-l-transparent"
+                                  : "top-0 right-0 translate-x-2 border-l-8 border-b-8 border-b-transparent border-t-transparent border-r-transparent"
+                              }`}
+                            />
+                          </div>
+                        )}
+                        <span
+                          className={`block truncate ${selected ? "font-medium" : "font-normal"}`}
+                        >
+                          {option.label}
+                        </span>
+                        {selected ? (
+                          <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">
+                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                          </span>
+                        ) : null}
+                      </>
+                    )}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </Transition>
+          </div>
+        )}
+      </Listbox>
+    </div>
+  );
+};
diff --git a/app/components/ui/outline-button.tsx b/app/components/ui/outline-button.tsx
new file mode 100644
index 000000000..b4938b730
--- /dev/null
+++ b/app/components/ui/outline-button.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+
+type Props = {
+  onClick?: () => void;
+  children: React.ReactNode;
+  type?: "button" | "submit" | "reset";
+  className?: string;
+  theme?: "primary" | "secondary" | "success" | "danger";
+  size?: "sm" | "rg" | "md" | "lg";
+  disabled?: boolean;
+};
+
+export const OutlineButton = React.forwardRef<HTMLButtonElement, Props>(
+  (
+    {
+      children,
+      onClick,
+      type = "button",
+      size = "sm",
+      className = "",
+      theme = "primary",
+      disabled = false,
+    },
+    ref
+  ) => (
+    <button
+      type={type}
+      ref={ref}
+      onClick={onClick}
+      disabled={disabled}
+      className={`inline-flex items-center justify-center rounded font-medium duration-300 ${
+        theme === "primary"
+          ? `${
+              disabled ? "opacity-70" : ""
+            } border border-brand-accent text-white shadow-sm hover:bg-brand-accent focus:outline-none`
+          : theme === "secondary"
+          ? "border bg-transparent hover:bg-brand-surface-1"
+          : theme === "success"
+          ? `${
+              disabled ? "opacity-70" : ""
+            } border border-transparent bg-green-500 text-white shadow-sm hover:bg-green-600 focus:outline-none  focus:ring-2 focus:ring-green-500`
+          : `${
+              disabled ? "opacity-70" : ""
+            } border border-red-500 text-red-500 shadow-sm hover:bg-red-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-500`
+      } ${
+        size === "sm"
+          ? "p-2 text-xs"
+          : size === "md"
+          ? "text-md px-3 py-2"
+          : size === "lg"
+          ? "text-md px-4 py-2"
+          : "px-2.5 py-2 text-sm"
+      } ${className}`}
+    >
+      {children}
+    </button>
+  )
+);
+
+OutlineButton.displayName = "Button";
diff --git a/app/components/ui/progress-bar.tsx b/app/components/ui/progress-bar.tsx
new file mode 100644
index 000000000..4ef06747e
--- /dev/null
+++ b/app/components/ui/progress-bar.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+
+type Props = {
+  maxValue?: number;
+  value?: number;
+  radius?: number;
+  strokeWidth?: number;
+  activeStrokeColor?: string;
+  inactiveStrokeColor?: string;
+};
+
+export const ProgressBar: React.FC<Props> = ({
+  maxValue = 0,
+  value = 0,
+  radius = 8,
+  strokeWidth = 2,
+  activeStrokeColor = "#3e98c7",
+  inactiveStrokeColor = "#ddd",
+}) => {
+  // PIE Calc Fn
+  const generatePie = (value: any) => {
+    const x = radius - Math.cos((2 * Math.PI) / (100 / value)) * radius;
+    const y = radius + Math.sin((2 * Math.PI) / (100 / value)) * radius;
+    const long = value <= 50 ? 0 : 1;
+    const d = `M${radius} ${radius} L${radius} ${0} A${radius} ${radius} 0 ${long} 1 ${y} ${x} Z`;
+
+    return d;
+  };
+
+  // ----  PIE Area Calc  --------
+  const calculatePieValue = (numberOfBars: any) => {
+    const angle = 360 / numberOfBars;
+    const pieValue = Math.floor(angle / 4);
+    return pieValue < 1 ? 1 : Math.floor(angle / 4);
+  };
+
+  // ----  PIE Render Fn --------
+  const renderPie = (i: any) => {
+    const DIRECTION = -1;
+    // Rotation Calc
+    const primaryRotationAngle = (maxValue - 1) * (360 / maxValue);
+    const rotationAngle =
+      -1 * DIRECTION * primaryRotationAngle + i * DIRECTION * primaryRotationAngle;
+    const rotationTransformation = `rotate(${rotationAngle}, ${radius}, ${radius})`;
+    const pieValue = calculatePieValue(maxValue);
+    const dValue = generatePie(pieValue);
+    const fillColor = value > 0 && i <= value ? activeStrokeColor : inactiveStrokeColor;
+
+    return (
+      <path
+        style={{ opacity: i === 0 ? 0 : 1 }}
+        key={i}
+        d={dValue}
+        fill={fillColor}
+        transform={rotationTransformation}
+      />
+    );
+  };
+
+  // combining the Pies
+  const renderOuterCircle = () => [...Array(maxValue + 1)].map((e, i) => renderPie(i));
+
+  return (
+    <svg width={radius * 2} height={radius * 2}>
+      {renderOuterCircle()}
+      <circle r={radius - strokeWidth} cx={radius} cy={radius} className="progress-bar"/>
+    </svg>
+  );
+};
diff --git a/app/components/ui/spinner.tsx b/app/components/ui/spinner.tsx
new file mode 100644
index 000000000..c27cab362
--- /dev/null
+++ b/app/components/ui/spinner.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+export const Spinner: React.FC = () => (
+    <div role="status">
+      <svg
+        aria-hidden="true"
+        className="mr-2 h-8 w-8 animate-spin fill-blue-600 text-gray-200 dark:text-gray-600"
+        viewBox="0 0 100 101"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor"
+         />
+        <path
+          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+          fill="currentFill"
+         />
+      </svg>
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
diff --git a/app/components/ui/text-area/index.tsx b/app/components/ui/text-area/index.tsx
new file mode 100644
index 000000000..be4938699
--- /dev/null
+++ b/app/components/ui/text-area/index.tsx
@@ -0,0 +1,82 @@
+import React, { useState, useRef, useEffect } from "react";
+
+// types
+import { Props } from "./types";
+
+// Updates the height of a <textarea> when the value changes.
+const useAutosizeTextArea = (textAreaRef: HTMLTextAreaElement | null, value: any) => {
+  useEffect(() => {
+    if (textAreaRef) {
+      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+      textAreaRef.style.height = "0px";
+      const scrollHeight = textAreaRef.scrollHeight;
+
+      // We then set the height directly, outside of the render loop
+      // Trying to set this with state or a ref will product an incorrect value.
+      textAreaRef.style.height = scrollHeight + "px";
+    }
+  }, [textAreaRef, value]);
+};
+
+export const TextArea: React.FC<Props> = ({
+  id,
+  label,
+  className = "",
+  value,
+  placeholder,
+  name,
+  register,
+  mode = "primary",
+  rows,
+  cols,
+  disabled,
+  error,
+  validations,
+  onChange,
+  ...rest
+}) => {
+  const [textareaValue, setTextareaValue] = useState(value ?? "");
+
+  const textAreaRef = useRef<any>(null);
+
+  useAutosizeTextArea(textAreaRef.current, textareaValue);
+
+  return (
+    <>
+      {label && (
+        <label htmlFor={id} className="mb-2 text-brand-secondary">
+          {label}
+        </label>
+      )}
+      <textarea
+        id={id}
+        placeholder={placeholder}
+        value={value}
+        rows={rows}
+        cols={cols}
+        disabled={disabled}
+        {...(register && register(name, validations))}
+        ref={(e) => {
+          textAreaRef.current = e;
+          if (register) register(name).ref(e);
+        }}
+        onChange={(e) => {
+          register && register(name).onChange(e);
+          onChange && onChange(e);
+          setTextareaValue(e.target.value);
+        }}
+        className={`no-scrollbar w-full bg-transparent px-3 py-2 outline-none ${
+          mode === "primary"
+            ? "rounded-md border border-brand-base"
+            : mode === "transparent"
+            ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme"
+            : ""
+        } ${error ? "border-red-500" : ""} ${
+          error && mode === "primary" ? "bg-red-100" : ""
+        } ${className}`}
+        {...rest}
+      />
+      {error?.message && <div className="text-sm text-red-500">{error.message}</div>}
+    </>
+  );
+};
diff --git a/app/components/ui/text-area/types.d.ts b/app/components/ui/text-area/types.d.ts
new file mode 100644
index 000000000..2a6022a56
--- /dev/null
+++ b/app/components/ui/text-area/types.d.ts
@@ -0,0 +1,12 @@
+import React from "react";
+import type { UseFormRegister, RegisterOptions, FieldError } from "react-hook-form";
+
+export interface Props extends React.ComponentPropsWithoutRef<"textarea"> {
+  label?: string;
+  value?: string | number | readonly string[];
+  name: string;
+  register?: UseFormRegister<any>;
+  mode?: "primary" | "transparent" | "secondary" | "disabled";
+  validations?: RegisterOptions;
+  error?: FieldError | Merge<FieldError, FieldErrorsImpl<any>>;
+}
diff --git a/app/components/ui/toggle-switch.tsx b/app/components/ui/toggle-switch.tsx
new file mode 100644
index 000000000..8c221dad2
--- /dev/null
+++ b/app/components/ui/toggle-switch.tsx
@@ -0,0 +1,32 @@
+import { Switch } from "@headlessui/react";
+
+type Props = {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  label?: string;
+  disabled?: boolean;
+  className?: string;
+};
+
+export const ToggleSwitch: React.FC<Props> = (props) => {
+  const { value, onChange, label, disabled, className } = props;
+
+  return (
+    <Switch
+      checked={value}
+      disabled={disabled}
+      onChange={onChange}
+      className={`relative inline-flex h-3.5 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+        value ? "bg-green-500" : "bg-gray-200"
+      } ${className || " "}`}
+    >
+      <span className="sr-only">{label}</span>
+      <span
+        aria-hidden="true"
+        className={`inline-block h-2.5 w-2.5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+          value ? "translate-x-2.5" : "translate-x-0"
+        }`}
+      />
+    </Switch>
+  );
+};
diff --git a/app/components/ui/tooltip.tsx b/app/components/ui/tooltip.tsx
new file mode 100644
index 000000000..0fb5a0352
--- /dev/null
+++ b/app/components/ui/tooltip.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+
+import { Tooltip2 } from "@blueprintjs/popover2";
+
+type Props = {
+  tooltipHeading?: string;
+  tooltipContent: string;
+  position?:
+    | "top"
+    | "right"
+    | "bottom"
+    | "left"
+    | "auto"
+    | "auto-end"
+    | "auto-start"
+    | "bottom-left"
+    | "bottom-right"
+    | "left-bottom"
+    | "left-top"
+    | "right-bottom"
+    | "right-top"
+    | "top-left"
+    | "top-right";
+  children: JSX.Element;
+  disabled?: boolean;
+  className?: string;
+  theme?: "light" | "dark";
+};
+
+export const Tooltip: React.FC<Props> = ({
+  tooltipHeading,
+  tooltipContent,
+  position = "top",
+  children,
+  disabled = false,
+  className = "",
+  theme = "light",
+}) => (
+  <Tooltip2
+    disabled={disabled}
+    content={
+      <div
+        className={`${className} flex max-w-[600px] flex-col items-start justify-center gap-1 rounded-md p-2 text-left text-xs shadow-md ${
+          theme === "light" ? "bg-brand-surface-2 text-brand-muted-1" : "bg-black text-white"
+        }`}
+      >
+        {tooltipHeading && <h5 className="font-medium">{tooltipHeading}</h5>}
+        <p>{tooltipContent}</p>
+      </div>
+    }
+    position={position}
+    renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
+      React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
+    }
+  />
+);
diff --git a/app/components/views/delete-view-modal.tsx b/app/components/views/delete-view-modal.tsx
new file mode 100644
index 000000000..1ae6865c5
--- /dev/null
+++ b/app/components/views/delete-view-modal.tsx
@@ -0,0 +1,135 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import viewsService from "services/views.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { DangerButton, SecondaryButton } from "components/ui";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// types
+import type { IView } from "types";
+// fetch-keys
+import { VIEWS_LIST } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  data: IView | null;
+};
+
+export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen }) => {
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsDeleteLoading(true);
+    if (!workspaceSlug || !data || !projectId) return;
+
+    await viewsService
+      .deleteView(workspaceSlug as string, projectId as string, data.id)
+      .then(() => {
+        mutate<IView[]>(VIEWS_LIST(projectId as string), (views) =>
+          views?.filter((view) => view.id !== data.id)
+        );
+
+        handleClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "View deleted successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "View could not be deleted. Please try again.",
+        });
+      })
+      .finally(() => {
+        setIsDeleteLoading(false);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                        Delete View
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-brand-secondary">
+                          Are you sure you want to delete view- {" "}
+                          <span className="font-bold">{data?.name}</span>
+                          ? All of the data related to the view will be permanently removed.
+                          This action cannot be undone.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
+                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                    {isDeleteLoading ? "Deleting..." : "Delete"}
+                  </DangerButton>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/views/form.tsx b/app/components/views/form.tsx
new file mode 100644
index 000000000..d75a66430
--- /dev/null
+++ b/app/components/views/form.tsx
@@ -0,0 +1,152 @@
+import { useEffect } from "react";
+
+import { useForm } from "react-hook-form";
+// ui
+import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+// components
+import { FilterList } from "components/core";
+// types
+import { IView } from "types";
+// components
+import { SelectFilters } from "components/views";
+
+type Props = {
+  handleFormSubmit: (values: IView) => Promise<void>;
+  handleClose: () => void;
+  status: boolean;
+  data?: IView | null;
+  preLoadedData?: Partial<IView> | null;
+};
+
+const defaultValues: Partial<IView> = {
+  name: "",
+  description: "",
+};
+
+export const ViewForm: React.FC<Props> = ({
+  handleFormSubmit,
+  handleClose,
+  status,
+  data,
+  preLoadedData,
+}) => {
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    watch,
+    setValue,
+  } = useForm<IView>({
+    defaultValues,
+  });
+  const filters = watch("query");
+
+  const handleCreateUpdateView = async (formData: IView) => {
+    await handleFormSubmit(formData);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...preLoadedData,
+      ...data,
+    });
+  }, [data, preLoadedData, reset]);
+
+  useEffect(() => {
+    if (status && data) {
+      setValue("query", data.query_data);
+    }
+  }, [data, status, setValue]);
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateUpdateView)}>
+      <div className="space-y-5">
+        <h3 className="text-lg font-medium leading-6 text-brand-base">
+          {status ? "Update" : "Create"} View
+        </h3>
+        <div className="space-y-3">
+          <div>
+            <Input
+              id="name"
+              name="name"
+              type="name"
+              placeholder="Title"
+              autoComplete="off"
+              mode="transparent"
+              className="resize-none text-xl"
+              error={errors.name}
+              register={register}
+              validations={{
+                required: "Title is required",
+                maxLength: {
+                  value: 255,
+                  message: "Title should be less than 255 characters",
+                },
+              }}
+            />
+          </div>
+          <div>
+            <TextArea
+              id="description"
+              name="description"
+              placeholder="Description"
+              className="h-32 resize-none text-sm"
+              mode="transparent"
+              error={errors.description}
+              register={register}
+            />
+          </div>
+          <div>
+            <SelectFilters
+              filters={filters}
+              onSelect={(option) => {
+                const key = option.key as keyof typeof filters;
+
+                if (!filters?.[key]?.includes(option.value))
+                  setValue("query", {
+                    ...filters,
+                    [key]: [...((filters?.[key] as any[]) ?? []), option.value],
+                  });
+                else {
+                  setValue("query", {
+                    ...filters,
+                    [key]: (filters?.[key] as any[])?.filter((item) => item !== option.value),
+                  });
+                }
+              }}
+            />
+          </div>
+          <div>
+            <FilterList
+              filters={filters}
+              setFilters={(query: any) => {
+                setValue("query", {
+                  ...filters,
+                  ...query,
+                });
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end gap-2">
+        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+        <PrimaryButton type="submit" loading={isSubmitting}>
+          {status
+            ? isSubmitting
+              ? "Updating View..."
+              : "Update View"
+            : isSubmitting
+            ? "Creating View..."
+            : "Create View"}
+        </PrimaryButton>
+      </div>
+    </form>
+  );
+};
diff --git a/app/components/views/index.ts b/app/components/views/index.ts
new file mode 100644
index 000000000..7a6307e56
--- /dev/null
+++ b/app/components/views/index.ts
@@ -0,0 +1,5 @@
+export * from "./delete-view-modal";
+export * from "./form";
+export * from "./modal";
+export * from "./select-filters";
+export * from "./single-view-item"
diff --git a/app/components/views/modal.tsx b/app/components/views/modal.tsx
new file mode 100644
index 000000000..aafda3499
--- /dev/null
+++ b/app/components/views/modal.tsx
@@ -0,0 +1,146 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import viewsService from "services/views.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { ViewForm } from "components/views";
+// types
+import { IView } from "types";
+// fetch-keys
+import { VIEWS_LIST } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data?: IView | null;
+  preLoadedData?: Partial<IView> | null ;
+};
+
+export const CreateUpdateViewModal: React.FC<Props> = ({ isOpen, handleClose, data, preLoadedData }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const onClose = () => {
+    handleClose();
+  };
+
+  const createView = async (payload: IView) => {
+    payload = {
+      ...payload,
+      query_data: payload.query,
+    };
+    await viewsService
+      .createView(workspaceSlug as string, projectId as string, payload)
+      .then(() => {
+        mutate(VIEWS_LIST(projectId as string));
+        handleClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "View created successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "View could not be created. Please try again.",
+        });
+      });
+  };
+
+  const updateView = async (payload: IView) => {
+    const payloadData = {
+      ...payload,
+      query_data: payload.query,
+    };
+    await viewsService
+      .updateView(workspaceSlug as string, projectId as string, data?.id ?? "", payloadData)
+      .then((res) => {
+        mutate<IView[]>(
+          VIEWS_LIST(projectId as string),
+          (prevData) =>
+            prevData?.map((p) => {
+              if (p.id === res.id) return { ...p, ...payloadData };
+
+              return p;
+            }),
+          false
+        );
+        onClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "View updated successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "View could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const handleFormSubmit = async (formData: IView) => {
+    if (!workspaceSlug || !projectId) return;
+
+    if (!data) await createView(formData);
+    else await updateView(formData);
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <ViewForm
+                  handleFormSubmit={handleFormSubmit}
+                  handleClose={handleClose}
+                  status={data ? true : false}
+                  data={data}
+                  preLoadedData={preLoadedData}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/views/select-filters.tsx b/app/components/views/select-filters.tsx
new file mode 100644
index 000000000..2d25983c7
--- /dev/null
+++ b/app/components/views/select-filters.tsx
@@ -0,0 +1,182 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import stateService from "services/state.service";
+import projectService from "services/project.service";
+import issuesService from "services/issues.service";
+// ui
+import { Avatar, MultiLevelDropdown } from "components/ui";
+// icons
+import { getPriorityIcon, getStateGroupIcon } from "components/icons";
+// helpers
+import { getStatesList } from "helpers/state.helper";
+// types
+import { IIssueFilterOptions, IQuery } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATE_LIST } from "constants/fetch-keys";
+// constants
+import { PRIORITIES } from "constants/project";
+
+type Props = {
+  filters: IIssueFilterOptions | IQuery;
+  onSelect: (option: any) => void;
+  direction?: "left" | "right";
+  height?: "sm" | "md" | "rg" | "lg";
+};
+
+export const SelectFilters: React.FC<Props> = ({
+  filters,
+  onSelect,
+  direction = "right",
+  height = "md",
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: states } = useSWR(
+    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
+      : null
+  );
+  const statesList = getStatesList(states ?? {});
+
+  const { data: members } = useSWR(
+    projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: issueLabels } = useSWR(
+    projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId.toString())
+      : null
+  );
+
+  return (
+    <MultiLevelDropdown
+      label="Filters"
+      onSelect={onSelect}
+      direction={direction}
+      height={height}
+      options={[
+        {
+          id: "priority",
+          label: "Priority",
+          value: PRIORITIES,
+          children: [
+            ...PRIORITIES.map((priority) => ({
+              id: priority ?? "none",
+              label: (
+                <div className="flex items-center gap-2">
+                  {getPriorityIcon(priority)} {priority ?? "None"}
+                </div>
+              ),
+              value: {
+                key: "priority",
+                value: priority,
+              },
+              selected: filters?.priority?.includes(priority ?? "none"),
+            })),
+          ],
+        },
+        {
+          id: "state",
+          label: "State",
+          value: statesList,
+          children: [
+            ...statesList.map((state) => ({
+              id: state.id,
+              label: (
+                <div className="flex items-center gap-2">
+                  {getStateGroupIcon(state.group, "16", "16", state.color)} {state.name}
+                </div>
+              ),
+              value: {
+                key: "state",
+                value: state.id,
+              },
+              selected: filters?.state?.includes(state.id),
+            })),
+          ],
+        },
+        {
+          id: "assignees",
+          label: "Assignees",
+          value: members,
+          children: [
+            ...(members?.map((member) => ({
+              id: member.member.id,
+              label: (
+                <div className="flex items-center gap-2">
+                  <Avatar user={member.member} />
+                  {member.member.first_name && member.member.first_name !== ""
+                    ? member.member.first_name
+                    : member.member.email}
+                </div>
+              ),
+              value: {
+                key: "assignees",
+                value: member.member.id,
+              },
+              selected: filters?.assignees?.includes(member.member.id),
+            })) ?? []),
+          ],
+        },
+        {
+          id: "created_by",
+          label: "Created By",
+          value: members,
+          children: [
+            ...(members?.map((member) => ({
+              id: member.member.id,
+              label: (
+                <div className="flex items-center gap-2">
+                  <Avatar user={member.member} />
+                  {member.member.first_name && member.member.first_name !== ""
+                    ? member.member.first_name
+                    : member.member.email}
+                </div>
+              ),
+              value: {
+                key: "created_by",
+                value: member.member.id,
+              },
+              selected: filters?.created_by?.includes(member.member.id),
+            })) ?? []),
+          ],
+        },
+        {
+          id: "labels",
+          label: "Labels",
+          value: issueLabels,
+          children: [
+            ...(issueLabels?.map((label) => ({
+              id: label.id,
+              label: (
+                <div className="flex items-center gap-2">
+                  <div
+                    className="h-2 w-2 rounded-full"
+                    style={{
+                      backgroundColor: label.color && label.color !== "" ? label.color : "#000000",
+                    }}
+                  />
+                  {label.name}
+                </div>
+              ),
+              value: {
+                key: "labels",
+                value: label.id,
+              },
+              selected: filters?.labels?.includes(label.id),
+            })) ?? []),
+          ],
+        },
+      ]}
+    />
+  );
+};
diff --git a/app/components/views/single-view-item.tsx b/app/components/views/single-view-item.tsx
new file mode 100644
index 000000000..5e5ff3cc0
--- /dev/null
+++ b/app/components/views/single-view-item.tsx
@@ -0,0 +1,178 @@
+import React from "react";
+import { mutate } from "swr";
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// icons
+import { TrashIcon, StarIcon, PencilIcon } from "@heroicons/react/24/outline";
+import { StackedLayersIcon } from "components/icons";
+//components
+import { CustomMenu, Tooltip } from "components/ui";
+// services
+import viewsService from "services/views.service";
+// types
+import { IView } from "types";
+// fetch keys
+import { VIEWS_LIST } from "constants/fetch-keys";
+// hooks
+import useToast from "hooks/use-toast";
+// helpers
+import { truncateText } from "helpers/string.helper";
+import { renderShortDate, renderShortTime } from "helpers/date-time.helper";
+
+type Props = {
+  view: IView;
+  handleEditView: () => void;
+  handleDeleteView: () => void;
+};
+
+export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDeleteView }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug || !projectId || !view) return;
+
+    mutate<IView[]>(
+      VIEWS_LIST(projectId as string),
+      (prevData) =>
+        (prevData ?? []).map((v) => ({
+          ...v,
+          is_favorite: v.id === view.id ? true : v.is_favorite,
+        })),
+      false
+    );
+
+    viewsService
+      .addViewToFavorites(workspaceSlug as string, projectId as string, {
+        view: view.id,
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the view to favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug || !view) return;
+
+    mutate<IView[]>(
+      VIEWS_LIST(projectId as string),
+      (prevData) =>
+        (prevData ?? []).map((v) => ({
+          ...v,
+          is_favorite: v.id === view.id ? false : v.is_favorite,
+        })),
+      false
+    );
+
+    viewsService
+      .removeViewFromFavorites(workspaceSlug as string, projectId as string, view.id)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the view from favorites. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <div className="first:rounded-t-[10px] last:rounded-b-[10px] hover:bg-brand-surface-2">
+      <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
+        <a>
+          <div className="relative rounded p-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <StackedLayersIcon height={18} width={18} />
+                <p className="mr-2 truncate text-sm">{truncateText(view.name, 75)}</p>
+              </div>
+              <div className="ml-2 flex flex-shrink-0">
+                <div className="flex items-center gap-2">
+                  <p className="rounded-full bg-brand-surface-2 py-0.5 px-2 text-xs text-brand-secondary">
+                    {Object.keys(view.query_data)
+                      .map((key: string) =>
+                        view.query_data[key as keyof typeof view.query_data] !== null
+                          ? (view.query_data[key as keyof typeof view.query_data] as any).length
+                          : 0
+                      )
+                      .reduce((curr, prev) => curr + prev, 0)}{" "}
+                    filters
+                  </p>
+                  <Tooltip
+                    tooltipContent={`Last updated at ${renderShortTime(
+                      view.updated_at
+                    )} ${renderShortDate(view.updated_at)}`}
+                  >
+                    <p className="text-sm text-brand-secondary">
+                      {renderShortTime(view.updated_at)}
+                    </p>
+                  </Tooltip>
+                  {view.is_favorite ? (
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleRemoveFromFavorites();
+                      }}
+                    >
+                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                    </button>
+                  ) : (
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleAddToFavorites();
+                      }}
+                    >
+                      <StarIcon className="h-4 w-4 " color="#858e96" />
+                    </button>
+                  )}
+                  <CustomMenu width="auto" verticalEllipsis>
+                    <CustomMenu.MenuItem
+                      onClick={(e: any) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleEditView();
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <PencilIcon className="h-3.5 w-3.5" />
+                        <span>Edit View</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem
+                      onClick={(e: any) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleDeleteView();
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <TrashIcon className="h-3.5 w-3.5" />
+                        <span>Delete View</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
+              </div>
+            </div>
+            {view?.description && (
+              <p className="px-[27px] text-sm font-normal leading-5 text-brand-secondary">
+                {view.description}
+              </p>
+            )}
+          </div>
+        </a>
+      </Link>
+    </div>
+  );
+};
diff --git a/app/components/workspace/activity-graph.tsx b/app/components/workspace/activity-graph.tsx
new file mode 100644
index 000000000..1f9db203d
--- /dev/null
+++ b/app/components/workspace/activity-graph.tsx
@@ -0,0 +1,141 @@
+import { useEffect, useRef, useState } from "react";
+
+// ui
+import { Tooltip } from "components/ui";
+// helpers
+import { renderDateFormat, renderShortNumericDateFormat } from "helpers/date-time.helper";
+// types
+import { IUserActivity } from "types";
+// constants
+import { DAYS, MONTHS } from "constants/project";
+
+type Props = {
+  activities: IUserActivity[] | undefined;
+};
+
+export const ActivityGraph: React.FC<Props> = ({ activities }) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const [width, setWidth] = useState(0);
+
+  const today = new Date();
+  const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
+  const twoMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 2, 1);
+  const threeMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 3, 1);
+  const fourMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 4, 1);
+  const fiveMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 5, 1);
+
+  const recentMonths = [
+    fiveMonthsAgo,
+    fourMonthsAgo,
+    threeMonthsAgo,
+    twoMonthsAgo,
+    lastMonth,
+    today,
+  ];
+
+  const getDatesOfMonth = (dateOfMonth: Date) => {
+    const month = dateOfMonth.getMonth();
+    const year = dateOfMonth.getFullYear();
+
+    const dates = [];
+    const date = new Date(year, month, 1);
+
+    while (date.getMonth() === month && date < new Date()) {
+      dates.push(renderDateFormat(new Date(date)));
+      date.setDate(date.getDate() + 1);
+    }
+
+    return dates;
+  };
+
+  const recentDates = [
+    ...getDatesOfMonth(recentMonths[0]),
+    ...getDatesOfMonth(recentMonths[1]),
+    ...getDatesOfMonth(recentMonths[2]),
+    ...getDatesOfMonth(recentMonths[3]),
+    ...getDatesOfMonth(recentMonths[4]),
+    ...getDatesOfMonth(recentMonths[5]),
+  ];
+
+  const activitiesIntensity = (activityCount: number) => {
+    if (activityCount <= 3) return "opacity-20";
+    else if (activityCount > 3 && activityCount <= 6) return "opacity-40";
+    else if (activityCount > 6 && activityCount <= 9) return "opacity-80";
+    else return "";
+  };
+
+  const addPaddingTiles = () => {
+    const firstDateDay = new Date(recentDates[0]).getDay();
+
+    for (let i = 0; i < firstDateDay; i++) recentDates.unshift("");
+  };
+  addPaddingTiles();
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    setWidth(ref.current.offsetWidth);
+  }, [ref]);
+
+  return (
+    <div className="grid place-items-center overflow-x-scroll">
+      <div className="flex items-start gap-4">
+        <div className="flex flex-col gap-2 pt-6">
+          {DAYS.map((day, index) => (
+            <h6 key={day} className="h-4 text-xs">
+              {index % 2 === 0 && day.substring(0, 3)}
+            </h6>
+          ))}
+        </div>
+        <div>
+          <div className="flex items-center justify-between" style={{ width: `${width}px` }}>
+            {recentMonths.map((month, index) => (
+              <h6 key={index} className="w-full text-xs">
+                {MONTHS[month.getMonth()].substring(0, 3)}
+              </h6>
+            ))}
+          </div>
+          <div
+            className="mt-2 grid w-full grid-flow-col gap-2"
+            style={{ gridTemplateRows: "repeat(7, minmax(0, 1fr))" }}
+            ref={ref}
+          >
+            {recentDates.map((date, index) => {
+              const isActive = activities?.find((a) => a.created_date === date);
+
+              return (
+                <Tooltip
+                  key={`${date}-${index}`}
+                  tooltipContent={`${
+                    isActive ? isActive.activity_count : 0
+                  } activities on ${renderShortNumericDateFormat(date)}`}
+                  theme="dark"
+                >
+                  <div
+                    className={`${
+                      date === "" ? "pointer-events-none opacity-0" : ""
+                    } h-4 w-4 rounded ${
+                      isActive
+                        ? `bg-brand-accent ${activitiesIntensity(isActive.activity_count)}`
+                        : "bg-brand-surface-2"
+                    }`}
+                  />
+                </Tooltip>
+              );
+            })}
+          </div>
+          <div className="mt-8 flex items-center gap-2 text-xs">
+            <span>Less</span>
+            <span className="h-4 w-4 rounded bg-brand-surface-2" />
+            <span className="h-4 w-4 rounded bg-brand-accent opacity-20" />
+            <span className="h-4 w-4 rounded bg-brand-accent opacity-40" />
+            <span className="h-4 w-4 rounded bg-brand-accent opacity-80" />
+            <span className="h-4 w-4 rounded bg-brand-accent" />
+            <span>More</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/workspace/completed-issues-graph.tsx b/app/components/workspace/completed-issues-graph.tsx
new file mode 100644
index 000000000..e34f1a939
--- /dev/null
+++ b/app/components/workspace/completed-issues-graph.tsx
@@ -0,0 +1,81 @@
+// recharts
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+// ui
+import { CustomMenu } from "components/ui";
+// constants
+import { MONTHS } from "constants/project";
+
+type Props = {
+  issues:
+    | {
+        week_in_month: number;
+        completed_count: number;
+      }[]
+    | undefined;
+  month: number;
+  setMonth: React.Dispatch<React.SetStateAction<number>>;
+};
+
+export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth }) => {
+  const weeks = month === 2 ? 4 : 5;
+
+  const data: any[] = [];
+
+  for (let i = 1; i <= weeks; i++) {
+    data.push({
+      week_in_month: `Week ${i}`,
+      completed_count: issues?.find((item) => item.week_in_month === i)?.completed_count ?? 0,
+    });
+  }
+
+  const CustomTooltip = ({ payload, label }: any) => (
+    <div className="space-y-1 rounded bg-brand-surface-1 p-3 text-sm shadow-md">
+      <h4 className="text-brand-secondary">{label}</h4>
+      <h5>Completed issues: {payload[0]?.value}</h5>
+    </div>
+  );
+
+  return (
+    <div>
+      <div className="mb-0.5 flex justify-between">
+        <h3 className="font-semibold">Issues closed by you</h3>
+        <CustomMenu label={<span className="text-sm">{MONTHS[month - 1]}</span>} noBorder>
+          {MONTHS.map((month, index) => (
+            <CustomMenu.MenuItem key={month} onClick={() => setMonth(index + 1)}>
+              {month}
+            </CustomMenu.MenuItem>
+          ))}
+        </CustomMenu>
+      </div>
+      <div className="rounded-[10px] border border-brand-base bg-brand-base p-8 pl-4">
+        <ResponsiveContainer width="100%" height={250}>
+          <LineChart data={data}>
+            <CartesianGrid stroke="#858e9660" />
+            <XAxis dataKey="week_in_month" padding={{ left: 48, right: 48 }} />
+            <YAxis dataKey="completed_count" allowDecimals={false} />
+            <Tooltip content={<CustomTooltip />} />
+            <Line
+              type="monotone"
+              dataKey="completed_count"
+              stroke="#d687ff"
+              strokeWidth={3}
+              fill="#8e2de2"
+            />
+          </LineChart>
+        </ResponsiveContainer>
+        <h4 className="mt-4 flex items-center justify-center gap-2 text-[#d687ff]">
+          <span className="h-2 w-2 bg-[#d687ff]" />
+          Completed Issues
+        </h4>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/workspace/confirm-workspace-member-remove.tsx b/app/components/workspace/confirm-workspace-member-remove.tsx
new file mode 100644
index 000000000..9a9df93b7
--- /dev/null
+++ b/app/components/workspace/confirm-workspace-member-remove.tsx
@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// ui
+import { DangerButton, SecondaryButton } from "components/ui";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  handleDelete: () => void;
+  data?: any;
+};
+
+const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, handleDelete }) => {
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const handleClose = () => {
+    onClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsDeleteLoading(true);
+    handleDelete();
+    handleClose();
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                        Remove {data?.email}?
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-brand-secondary">
+                          Are you sure you want to remove member- {" "}
+                          <span className="font-bold">{data?.email}</span>
+                          ? They will no longer have access to this workspace. This action
+                          cannot be undone.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
+                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                    {isDeleteLoading ? "Removing..." : "Remove"}
+                  </DangerButton>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
+
+export default ConfirmWorkspaceMemberRemove;
diff --git a/app/components/workspace/create-workspace-form.tsx b/app/components/workspace/create-workspace-form.tsx
new file mode 100644
index 000000000..eef1e74bf
--- /dev/null
+++ b/app/components/workspace/create-workspace-form.tsx
@@ -0,0 +1,201 @@
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// services
+import workspaceService from "services/workspace.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { CustomSelect, Input, PrimaryButton } from "components/ui";
+// types
+import { IWorkspace } from "types";
+// fetch-keys
+import { USER_WORKSPACES } from "constants/fetch-keys";
+// constants
+import { COMPANY_SIZE } from "constants/workspace";
+
+type Props = {
+  onSubmit: (res: IWorkspace) => void;
+  defaultValues: {
+    name: string;
+    slug: string;
+    company_size: number | null;
+  };
+  setDefaultValues: Dispatch<SetStateAction<any>>;
+};
+
+const restrictedUrls = [
+  "api",
+  "create-workspace",
+  "error",
+  "installations",
+  "invitations",
+  "magic-sign-in",
+  "onboarding",
+  "signin",
+  "workspace-member-invitation",
+];
+
+export const CreateWorkspaceForm: React.FC<Props> = ({
+  onSubmit,
+  defaultValues,
+  setDefaultValues,
+}) => {
+  const [slugError, setSlugError] = useState(false);
+  const [invalidSlug, setInvalidSlug] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    setValue,
+    getValues,
+    formState: { errors, isSubmitting },
+  } = useForm<IWorkspace>({ defaultValues });
+
+  const handleCreateWorkspace = async (formData: IWorkspace) => {
+    await workspaceService
+      .workspaceSlugCheck(formData.slug)
+      .then(async (res) => {
+        if (res.status === true && !restrictedUrls.includes(formData.slug)) {
+          setSlugError(false);
+          await workspaceService
+            .createWorkspace(formData)
+            .then((res) => {
+              setToastAlert({
+                type: "success",
+                title: "Success!",
+                message: "Workspace created successfully.",
+              });
+              mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) => [res, ...(prevData ?? [])]);
+              onSubmit(res);
+            })
+            .catch((err) => {
+              console.error(err);
+            });
+        } else setSlugError(true);
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Some error occurred while creating workspace. Please try again.",
+        });
+      });
+  };
+
+  useEffect(
+    () => () => {
+      // when the component unmounts set the default values to whatever user typed in
+      setDefaultValues(getValues());
+    },
+    [getValues, setDefaultValues]
+  );
+
+  return (
+    <form
+      className="flex w-full items-center justify-center"
+      onSubmit={handleSubmit(handleCreateWorkspace)}
+    >
+      <div className="flex w-full max-w-xl flex-col">
+        <div className="flex flex-col rounded-[10px] bg-brand-surface-2">
+          <div className="flex flex-col justify-between gap-3 px-4 py-7">
+            <div className="flex flex-col items-start justify-center gap-2.5">
+              <span>Workspace name</span>
+              <Input
+                name="name"
+                register={register}
+                autoComplete="off"
+                onChange={(e) =>
+                  setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"))
+                }
+                validations={{
+                  required: "Workspace name is required",
+                  validate: (value) =>
+                    /^[\w\s-]*$/.test(value) ||
+                    `Name can only contain (" "), ( - ), ( _ ) & Alphanumeric characters.`,
+                }}
+                placeholder="e.g. My Workspace"
+                error={errors.name}
+              />
+            </div>
+            <div className="flex flex-col items-start justify-center gap-2.5">
+              <span>Workspace URL</span>
+              <div className="flex w-full items-center rounded-md border border-brand-base px-3">
+                <span className="whitespace-nowrap text-sm text-slate-600">
+                  {typeof window !== "undefined" && window.location.origin}/
+                </span>
+                <Input
+                  mode="trueTransparent"
+                  autoComplete="off"
+                  name="slug"
+                  register={register}
+                  className="block w-full rounded-md bg-transparent py-2 px-0 text-sm"
+                  validations={{
+                    required: "Workspace URL is required",
+                  }}
+                  onChange={(e) =>
+                    /^[a-zA-Z0-9_-]+$/.test(e.target.value)
+                      ? setInvalidSlug(false)
+                      : setInvalidSlug(true)
+                  }
+                />
+              </div>
+              {slugError && (
+                <span className="-mt-3 text-sm text-red-500">Workspace URL is already taken!</span>
+              )}
+              {invalidSlug && (
+                <span className="text-sm text-red-500">{`URL can only contain ( - ), ( _ ) & Alphanumeric characters.`}</span>
+              )}
+            </div>
+          </div>
+
+          <div className="flex flex-col items-start justify-center gap-2.5 border-t border-brand-base px-4 py-7">
+            <span>How large is your company</span>
+            <div className="w-full">
+              <Controller
+                name="company_size"
+                control={control}
+                rules={{ required: "This field is required" }}
+                render={({ field: { value, onChange } }) => (
+                  <CustomSelect
+                    value={value}
+                    onChange={onChange}
+                    label={value ? value.toString() : "Select company size"}
+                    input
+                    width="w-full"
+                  >
+                    {COMPANY_SIZE?.map((item) => (
+                      <CustomSelect.Option key={item.value} value={item.value}>
+                        {item.label}
+                      </CustomSelect.Option>
+                    ))}
+                  </CustomSelect>
+                )}
+              />
+              {errors.company_size && (
+                <span className="text-sm text-red-500">{errors.company_size.message}</span>
+              )}
+            </div>
+          </div>
+
+          <div className="flex w-full items-center justify-center rounded-b-[10px] py-7">
+            <PrimaryButton
+              type="submit"
+              className="flex w-1/2 items-center justify-center text-center"
+              size="md"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? "Creating..." : "Create Workspace"}
+            </PrimaryButton>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+};
diff --git a/app/components/workspace/delete-workspace-modal.tsx b/app/components/workspace/delete-workspace-modal.tsx
new file mode 100644
index 000000000..5e354a827
--- /dev/null
+++ b/app/components/workspace/delete-workspace-modal.tsx
@@ -0,0 +1,179 @@
+import React, { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import workspaceService from "services/workspace.service";
+// hooks
+import useToast from "hooks/use-toast";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// ui
+import { DangerButton, Input, SecondaryButton } from "components/ui";
+// types
+import type { IWorkspace } from "types";
+// fetch-keys
+import { USER_WORKSPACES } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  data: IWorkspace | null;
+  onClose: () => void;
+};
+
+export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose }) => {
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const [confirmWorkspaceName, setConfirmWorkspaceName] = useState("");
+  const [confirmDeleteMyWorkspace, setConfirmDeleteMyWorkspace] = useState(false);
+
+  const [selectedWorkspace, setSelectedWorkspace] = useState<IWorkspace | null>(null);
+
+  const router = useRouter();
+  const { setToastAlert } = useToast();
+
+  useEffect(() => {
+    if (data) setSelectedWorkspace(data);
+    else {
+      const timer = setTimeout(() => {
+        setSelectedWorkspace(null);
+        clearTimeout(timer);
+      }, 350);
+    }
+  }, [data]);
+
+  const canDelete = confirmWorkspaceName === data?.name && confirmDeleteMyWorkspace;
+
+  const handleClose = () => {
+    onClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsDeleteLoading(true);
+    if (!data || !canDelete) return;
+    await workspaceService
+      .deleteWorkspace(data.slug)
+      .then(() => {
+        handleClose();
+        router.push("/");
+        mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) =>
+          prevData?.filter((workspace) => workspace.id !== data.id)
+        );
+        setToastAlert({
+          type: "success",
+          message: "Workspace deleted successfully",
+          title: "Success",
+        });
+      })
+      .catch((error) => {
+        console.log(error);
+        setIsDeleteLoading(false);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                <div className="flex flex-col gap-6 p-6">
+                  <div className="flex w-full items-center justify-start gap-6">
+                    <span className="place-items-center rounded-full bg-red-100 p-4">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </span>
+                    <span className="flex items-center justify-start">
+                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete Workspace</h3>
+                    </span>
+                  </div>
+
+                  <span>
+                    <p className="text-sm leading-7 text-brand-secondary">
+                      Are you sure you want to delete workspace{" "}
+                      <span className="break-all font-semibold">{data?.name}</span>? All of the data
+                      related to the workspace will be permanently removed. This action cannot be
+                      undone.
+                    </p>
+                  </span>
+
+                  <div className="text-gray-600">
+                    <p className="break-all text-sm ">
+                      Enter the workspace name{" "}
+                      <span className="font-medium">{selectedWorkspace?.name}</span> to continue:
+                    </p>
+                    <Input
+                      type="text"
+                      placeholder="Workspace name"
+                      className="mt-2"
+                      value={confirmWorkspaceName}
+                      onChange={(e) => {
+                        setConfirmWorkspaceName(e.target.value);
+                      }}
+                      name="workspaceName"
+                    />
+                  </div>
+
+                  <div className="text-gray-600">
+                    <p className="text-sm">
+                      To confirm, type <span className="font-medium">delete my workspace</span>{" "}
+                      below:
+                    </p>
+                    <Input
+                      type="text"
+                      placeholder="Enter 'delete my workspace'"
+                      className="mt-2"
+                      onChange={(e) => {
+                        if (e.target.value === "delete my workspace") {
+                          setConfirmDeleteMyWorkspace(true);
+                        } else {
+                          setConfirmDeleteMyWorkspace(false);
+                        }
+                      }}
+                      name="typeDelete"
+                    />
+                  </div>
+
+                  <div className="flex justify-end gap-2">
+                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                    <DangerButton onClick={handleDeletion} loading={isDeleteLoading || !canDelete}>
+                      {isDeleteLoading ? "Deleting..." : "Delete Workspace"}
+                    </DangerButton>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/app/components/workspace/help-section.tsx b/app/components/workspace/help-section.tsx
new file mode 100644
index 000000000..013cbd1bf
--- /dev/null
+++ b/app/components/workspace/help-section.tsx
@@ -0,0 +1,158 @@
+import { useState, useRef, FC } from "react";
+
+import Link from "next/link";
+
+// headless ui
+import { Transition } from "@headlessui/react";
+// hooks
+import useTheme from "hooks/use-theme";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// icons
+import {
+  ArrowLongLeftIcon,
+  ChatBubbleOvalLeftEllipsisIcon,
+  RocketLaunchIcon,
+} from "@heroicons/react/24/outline";
+import { QuestionMarkCircleIcon, DocumentIcon, DiscordIcon, GithubIcon } from "components/icons";
+
+const helpOptions = [
+  {
+    name: "Documentation",
+    href: "https://docs.plane.so/",
+    Icon: DocumentIcon,
+  },
+  {
+    name: "Join our Discord",
+    href: "https://discord.com/invite/A92xrEGCge",
+    Icon: DiscordIcon,
+  },
+  {
+    name: "Report a bug",
+    href: "https://github.com/makeplane/plane/issues/new/choose",
+    Icon: GithubIcon,
+  },
+  {
+    name: "Chat with us",
+    href: null,
+    onClick: () => (window as any).$crisp.push(["do", "chat:show"]),
+    Icon: ChatBubbleOvalLeftEllipsisIcon,
+  },
+];
+
+export interface WorkspaceHelpSectionProps {
+  setSidebarActive: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
+  const { setSidebarActive } = props;
+  // theme
+  const { collapsed: sidebarCollapse, toggleCollapsed } = useTheme();
+  // states
+  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
+  // refs
+  const helpOptionsRef = useRef<HTMLDivElement | null>(null);
+  // hooks
+  useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
+
+  const helpOptionMode = sidebarCollapse ? "left-full" : "left-[-75px]";
+
+  return (
+    <div
+      className={`flex w-full items-center justify-between self-baseline border-t border-brand-base bg-brand-sidebar px-6 py-2 ${
+        sidebarCollapse ? "flex-col" : ""
+      }`}
+    >
+      <button
+        type="button"
+        className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base ${
+          sidebarCollapse ? "w-full justify-center" : ""
+        }`}
+        onClick={() => {
+          const e = new KeyboardEvent("keydown", {
+            key: "h",
+          });
+          document.dispatchEvent(e);
+        }}
+        title="Shortcuts"
+      >
+        <RocketLaunchIcon className="h-4 w-4 text-brand-secondary" />
+        {!sidebarCollapse && <span>Shortcuts</span>}
+      </button>
+      <button
+        type="button"
+        className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base ${
+          sidebarCollapse ? "w-full justify-center" : ""
+        }`}
+        onClick={() => setIsNeedHelpOpen((prev) => !prev)}
+        title="Help"
+      >
+        <QuestionMarkCircleIcon className="h-4 w-4 text-brand-secondary" />
+        {!sidebarCollapse && <span>Help</span>}
+      </button>
+      <button
+        type="button"
+        className="flex items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base md:hidden"
+        onClick={() => setSidebarActive(false)}
+      >
+        <ArrowLongLeftIcon className="h-4 w-4 flex-shrink-0 text-brand-secondary group-hover:text-brand-base" />
+      </button>
+      <button
+        type="button"
+        className={`hidden items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base md:flex ${
+          sidebarCollapse ? "w-full justify-center" : ""
+        }`}
+        onClick={() => toggleCollapsed()}
+      >
+        <ArrowLongLeftIcon
+          className={`h-4 w-4 flex-shrink-0 text-brand-secondary duration-300 group-hover:text-brand-base ${
+            sidebarCollapse ? "rotate-180" : ""
+          }`}
+        />
+      </button>
+
+      <div className="relative">
+        <Transition
+          show={isNeedHelpOpen}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <div
+            className={`absolute bottom-2 ${helpOptionMode} space-y-2 rounded-sm bg-brand-surface-2 p-1 shadow-md`}
+            ref={helpOptionsRef}
+          >
+            {helpOptions.map(({ name, Icon, href, onClick }) => {
+              if (href)
+                return (
+                  <Link href={href} key={name}>
+                    <a
+                      target="_blank"
+                      className="flex items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-1 text-xs hover:bg-brand-surface-1"
+                    >
+                      <Icon className="h-4 w-4 text-brand-secondary" />
+                      <span className="text-sm">{name}</span>
+                    </a>
+                  </Link>
+                );
+              else
+                return (
+                  <button
+                    key={name}
+                    type="button"
+                    onClick={onClick ? onClick : undefined}
+                    className="flex w-full items-center gap-x-2 whitespace-nowrap rounded-md  px-2 py-1 text-xs hover:bg-brand-surface-1"
+                  >
+                    <Icon className="h-4 w-4 text-brand-secondary" />
+                    <span className="text-sm">{name}</span>
+                  </button>
+                );
+            })}
+          </div>
+        </Transition>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/workspace/index.ts b/app/components/workspace/index.ts
new file mode 100644
index 000000000..db509a70d
--- /dev/null
+++ b/app/components/workspace/index.ts
@@ -0,0 +1,10 @@
+export * from "./activity-graph";
+export * from "./completed-issues-graph";
+export * from "./create-workspace-form";
+export * from "./delete-workspace-modal";
+export * from "./help-section";
+export * from "./issues-list";
+export * from "./issues-pie-chart";
+export * from "./issues-stats";
+export * from "./sidebar-dropdown";
+export * from "./sidebar-menu";
diff --git a/app/components/workspace/issues-list.tsx b/app/components/workspace/issues-list.tsx
new file mode 100644
index 000000000..9cf7b4295
--- /dev/null
+++ b/app/components/workspace/issues-list.tsx
@@ -0,0 +1,105 @@
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
+// helpers
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { truncateText } from "helpers/string.helper";
+// types
+import { IIssueLite } from "types";
+import { Loader } from "components/ui";
+import { LayerDiagonalIcon } from "components/icons";
+
+type Props = {
+  issues: IIssueLite[] | undefined;
+  type: "overdue" | "upcoming";
+};
+
+export const IssuesList: React.FC<Props> = ({ issues, type }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const getDateDifference = (date: Date) => {
+    const today = new Date();
+
+    let diffDays = 0;
+    if (type === "overdue") {
+      const diffTime = Math.abs(today.valueOf() - date.valueOf());
+      diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    } else return date.getDate() - today.getDate();
+
+    return diffDays;
+  };
+
+  return (
+    <div>
+      <h3 className="mb-2 font-semibold capitalize">{type} Issues</h3>
+      {issues ? (
+        <div className="h-[calc(100%-2.25rem)] rounded-[10px] border border-brand-base bg-brand-base p-4 text-sm">
+          <div
+            className={`mb-2 grid grid-cols-4 gap-2 rounded-lg px-3 py-2 font-medium ${
+              type === "overdue" ? "bg-red-500/20 bg-opacity-20" : "bg-brand-surface-2"
+            }`}
+          >
+            <h4 className="capitalize">{type}</h4>
+            <h4 className="col-span-2">Issue</h4>
+            <h4>Due Date</h4>
+          </div>
+          <div className="max-h-72 overflow-y-scroll">
+            {issues.length > 0 ? (
+              issues.map((issue) => {
+                const dateDifference = getDateDifference(new Date(issue.target_date as string));
+
+                return (
+                  <Link
+                    href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
+                    key={issue.id}
+                  >
+                    <a>
+                      <div className="grid grid-cols-4 gap-2 px-3 py-2">
+                        <h5
+                          className={`flex cursor-default items-center gap-2 ${
+                            type === "overdue"
+                              ? dateDifference > 6
+                                ? "text-red-500"
+                                : "text-yellow-400"
+                              : ""
+                          }`}
+                        >
+                          {type === "overdue" && (
+                            <ExclamationTriangleIcon className="h-3.5 w-3.5" />
+                          )}
+                          {dateDifference} {dateDifference > 1 ? "days" : "day"}
+                        </h5>
+                        <h5 className="col-span-2">{truncateText(issue.name, 30)}</h5>
+                        <h5 className="cursor-default">
+                          {renderShortDateWithYearFormat(new Date(issue.target_date as string))}
+                        </h5>
+                      </div>
+                    </a>
+                  </Link>
+                );
+              })
+            ) : (
+              <div className="grid h-full place-items-center">
+                <div className="my-5 flex flex-col items-center gap-4">
+                  <LayerDiagonalIcon height={60} width={60} />
+                  <span className="text-brand-secondary">
+                    No issues found. Use{" "}
+                    <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre> shortcut to
+                    create a new issue
+                  </span>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      ) : (
+        <Loader>
+          <Loader.Item height="200" />
+        </Loader>
+      )}
+    </div>
+  );
+};
diff --git a/app/components/workspace/issues-pie-chart.tsx b/app/components/workspace/issues-pie-chart.tsx
new file mode 100644
index 000000000..d65e80c4a
--- /dev/null
+++ b/app/components/workspace/issues-pie-chart.tsx
@@ -0,0 +1,123 @@
+import { useCallback, useState } from "react";
+
+// recharts
+import { Cell, Legend, Pie, PieChart, ResponsiveContainer, Sector } from "recharts";
+// types
+import { IUserStateDistribution } from "types";
+// constants
+import { STATE_GROUP_COLORS } from "constants/state";
+
+type Props = {
+  groupedIssues: IUserStateDistribution[] | undefined;
+};
+
+export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const onPieEnter = useCallback(
+    (_: any, index: number) => {
+      setActiveIndex(index);
+    },
+    [setActiveIndex]
+  );
+
+  const renderActiveShape = ({
+    cx,
+    cy,
+    midAngle,
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle,
+    fill,
+    payload,
+    value,
+  }: any) => {
+    const RADIAN = Math.PI / 180;
+    const sin = Math.sin(-RADIAN * midAngle);
+    const cos = Math.cos(-RADIAN * midAngle);
+    const sx = cx + (outerRadius + 10) * cos;
+    const sy = cy + (outerRadius + 10) * sin;
+    const mx = cx + (outerRadius + 30) * cos;
+    const my = cy + (outerRadius + 30) * sin;
+    const ex = mx + (cos >= 0 ? 1 : -1) * 22;
+    const ey = my;
+    const textAnchor = cos >= 0 ? "start" : "end";
+
+    return (
+      <g>
+        <text x={cx} y={cy} dy={8} className="capitalize" textAnchor="middle" fill={fill}>
+          {payload.state_group}
+        </text>
+        <Sector
+          cx={cx}
+          cy={cy}
+          innerRadius={innerRadius}
+          outerRadius={outerRadius}
+          startAngle={startAngle}
+          endAngle={endAngle}
+          fill={fill}
+        />
+        <Sector
+          cx={cx}
+          cy={cy}
+          startAngle={startAngle}
+          endAngle={endAngle}
+          innerRadius={outerRadius + 6}
+          outerRadius={outerRadius + 10}
+          fill={fill}
+        />
+        <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
+        <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
+        <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#858e96">
+          {value} issues
+        </text>
+      </g>
+    );
+  };
+
+  return (
+    <div>
+      <h3 className="mb-2 font-semibold">Issues by States</h3>
+      <div className="rounded-[10px] border border-brand-base bg-brand-base p-4">
+        <ResponsiveContainer width="100%" height={320}>
+          <PieChart>
+            <Pie
+              data={groupedIssues}
+              dataKey="state_count"
+              nameKey="state_group"
+              cx="50%"
+              cy="50%"
+              fill="#8884d8"
+              innerRadius={70}
+              outerRadius={90}
+              activeIndex={activeIndex}
+              activeShape={renderActiveShape}
+              onMouseEnter={onPieEnter}
+            >
+              {groupedIssues?.map((cell) => (
+                <Cell
+                  key={cell.state_group}
+                  fill={STATE_GROUP_COLORS[cell.state_group.toLowerCase()]}
+                />
+              ))}
+            </Pie>
+            <Legend
+              layout="vertical"
+              verticalAlign="middle"
+              align="right"
+              height={36}
+              payload={[
+                { value: "Backlog", type: "square", color: STATE_GROUP_COLORS.backlog },
+                { value: "Unstarted", type: "square", color: STATE_GROUP_COLORS.unstarted },
+                { value: "Started", type: "square", color: STATE_GROUP_COLORS.started },
+                { value: "Completed", type: "square", color: STATE_GROUP_COLORS.completed },
+                { value: "Cancelled", type: "square", color: STATE_GROUP_COLORS.cancelled },
+              ]}
+            />
+          </PieChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/workspace/issues-stats.tsx b/app/components/workspace/issues-stats.tsx
new file mode 100644
index 000000000..6117ec2a1
--- /dev/null
+++ b/app/components/workspace/issues-stats.tsx
@@ -0,0 +1,74 @@
+// components
+import { Loader } from "components/ui";
+import { ActivityGraph } from "components/workspace";
+// helpers
+import { groupBy } from "helpers/array.helper";
+// types
+import { IUserWorkspaceDashboard } from "types";
+
+type Props = {
+  data: IUserWorkspaceDashboard | undefined;
+};
+
+export const IssuesStats: React.FC<Props> = ({ data }) => (
+  <div className="grid grid-cols-1 rounded-[10px] border border-brand-base bg-brand-base lg:grid-cols-3">
+    <div className="grid grid-cols-1 divide-y divide-brand-base border-b border-brand-base lg:border-r lg:border-b-0">
+      <div className="flex">
+        <div className="basis-1/2 p-4">
+          <h4 className="text-sm">Issues assigned to you</h4>
+          <h5 className="mt-2 text-2xl font-semibold">
+            {data ? (
+              data.assigned_issues_count
+            ) : (
+              <Loader>
+                <Loader.Item height="25px" width="50%" />
+              </Loader>
+            )}
+          </h5>
+        </div>
+        <div className="basis-1/2 border-l border-brand-base p-4">
+          <h4 className="text-sm">Pending issues</h4>
+          <h5 className="mt-2 text-2xl font-semibold">
+            {data ? (
+              data.pending_issues_count
+            ) : (
+              <Loader>
+                <Loader.Item height="25px" width="50%" />
+              </Loader>
+            )}
+          </h5>
+        </div>
+      </div>
+      <div className="flex">
+        <div className="basis-1/2 p-4">
+          <h4 className="text-sm">Completed issues</h4>
+          <h5 className="mt-2 text-2xl font-semibold">
+            {data ? (
+              data.completed_issues_count
+            ) : (
+              <Loader>
+                <Loader.Item height="25px" width="50%" />
+              </Loader>
+            )}
+          </h5>
+        </div>
+        <div className="basis-1/2 border-l border-brand-base p-4">
+          <h4 className="text-sm">Issues due by this week</h4>
+          <h5 className="mt-2 text-2xl font-semibold">
+            {data ? (
+              data.issues_due_week_count
+            ) : (
+              <Loader>
+                <Loader.Item height="25px" width="50%" />
+              </Loader>
+            )}
+          </h5>
+        </div>
+      </div>
+    </div>
+    <div className="p-4 lg:col-span-2">
+      <h3 className="mb-2 font-semibold capitalize">Activity Graph</h3>
+      <ActivityGraph activities={data?.issue_activities} />
+    </div>
+  </div>
+);
diff --git a/app/components/workspace/send-workspace-invitation-modal.tsx b/app/components/workspace/send-workspace-invitation-modal.tsx
new file mode 100644
index 000000000..f58269b89
--- /dev/null
+++ b/app/components/workspace/send-workspace-invitation-modal.tsx
@@ -0,0 +1,170 @@
+import React from "react";
+import { mutate } from "swr";
+import { Controller, useForm } from "react-hook-form";
+// headless
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import workspaceService from "services/workspace.service";
+// ui
+import { CustomSelect, Input, PrimaryButton, SecondaryButton } from "components/ui";
+// hooks
+import useToast from "hooks/use-toast";
+// types
+import { IWorkspaceMemberInvitation } from "types";
+// fetch keys
+import { WORKSPACE_INVITATIONS } from "constants/fetch-keys";
+// constants
+import { ROLE } from "constants/workspace";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  workspace_slug: string;
+  members: any[];
+};
+
+const defaultValues: Partial<IWorkspaceMemberInvitation> = {
+  email: "",
+  role: 5,
+};
+
+const SendWorkspaceInvitationModal: React.FC<Props> = ({
+  isOpen,
+  setIsOpen,
+  workspace_slug,
+  members,
+}) => {
+  const { setToastAlert } = useToast();
+
+  const {
+    control,
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<IWorkspaceMemberInvitation>({
+    defaultValues,
+    reValidateMode: "onChange",
+  });
+
+  const handleClose = () => {
+    setIsOpen(false);
+    reset(defaultValues);
+  };
+
+  const onSubmit = async (formData: IWorkspaceMemberInvitation) => {
+    await workspaceService
+      .inviteWorkspace(workspace_slug, { emails: [formData] })
+      .then((res) => {
+        setIsOpen(false);
+        handleClose();
+        mutate(WORKSPACE_INVITATIONS, (prevData: any) => [
+          { ...res, ...formData },
+          ...(prevData ?? []),
+        ]);
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Member invited successfully.",
+        });
+      })
+      .catch((err) => console.log(err));
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+                <form onSubmit={handleSubmit(onSubmit)}>
+                  <div className="space-y-5">
+                    <div>
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                        Members
+                      </Dialog.Title>
+                      <p className="text-sm text-brand-secondary">
+                        Invite members to work on your workspace.
+                      </p>
+                    </div>
+                    <div className="space-y-3">
+                      <div>
+                        <Input
+                          id="email"
+                          label="Email"
+                          name="email"
+                          type="email"
+                          placeholder="Enter email"
+                          error={errors.email}
+                          register={register}
+                          validations={{
+                            required: "Email is required",
+                            validate: (value) => {
+                              if (members.find((member) => member.email === value))
+                                return "Email already exist";
+                            },
+                          }}
+                        />
+                      </div>
+                      <div>
+                        <Controller
+                          control={control}
+                          rules={{ required: true }}
+                          name="role"
+                          render={({ field: { value, onChange } }) => (
+                            <CustomSelect
+                              value={value}
+                              label={ROLE[value]}
+                              onChange={onChange}
+                              width="w-full"
+                              input
+                            >
+                              {Object.entries(ROLE).map(([key, value]) => (
+                                <CustomSelect.Option key={key} value={key}>
+                                  {value}
+                                </CustomSelect.Option>
+                              ))}
+                            </CustomSelect>
+                          )}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-5 flex justify-end gap-2">
+                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                    <PrimaryButton type="submit" loading={isSubmitting}>
+                      {isSubmitting ? "Sending Invitation..." : "Send Invitation"}
+                    </PrimaryButton>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
+
+export default SendWorkspaceInvitationModal;
diff --git a/app/components/workspace/sidebar-dropdown.tsx b/app/components/workspace/sidebar-dropdown.tsx
new file mode 100644
index 000000000..b1e23a12f
--- /dev/null
+++ b/app/components/workspace/sidebar-dropdown.tsx
@@ -0,0 +1,235 @@
+import { Fragment } from "react";
+import { Menu, Transition } from "@headlessui/react";
+import { useRouter } from "next/router";
+import Image from "next/image";
+import Link from "next/link";
+import { CheckIcon, PlusIcon } from "@heroicons/react/24/outline";
+// hooks
+import useUser from "hooks/use-user";
+import useTheme from "hooks/use-theme";
+import useWorkspaces from "hooks/use-workspaces";
+import useToast from "hooks/use-toast";
+// services
+import userService from "services/user.service";
+import authenticationService from "services/authentication.service";
+// components
+import { Avatar, Loader } from "components/ui";
+// helper
+import { truncateText } from "helpers/string.helper";
+// types
+import { IWorkspace } from "types";
+
+// Static Data
+const userLinks = (workspaceSlug: string) => [
+  {
+    name: "Workspace Settings",
+    href: `/${workspaceSlug}/settings`,
+  },
+  {
+    name: "Workspace Invites",
+    href: "/invitations",
+  },
+  {
+    name: "My Profile",
+    href: `/${workspaceSlug}/me/profile`,
+  },
+];
+
+export const WorkspaceSidebarDropdown = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // fetching user details
+  const { user, mutateUser } = useUser();
+  // fetching theme context
+  const { collapsed: sidebarCollapse } = useTheme();
+
+  const { setToastAlert } = useToast();
+
+  // fetching workspaces
+  const { activeWorkspace, workspaces } = useWorkspaces();
+
+  const handleWorkspaceNavigation = (workspace: IWorkspace) => {
+    userService
+      .updateUser({
+        last_workspace_id: workspace?.id,
+      })
+      .then(() => {
+        mutateUser();
+        router.push(`/${workspace.slug}/`);
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Failed to navigate to the workspace. Please try again.",
+        })
+      );
+  };
+
+  const handleSignOut = async () => {
+    router.push("/signin").then(() => {
+      mutateUser();
+    });
+
+    await authenticationService.signOut().catch(() =>
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Failed to sign out. Please try again.",
+      })
+    );
+  };
+
+  return (
+    <div className="relative">
+      <Menu as="div" className="col-span-4 inline-block w-full p-3 text-left">
+        <div className="flex items-center justify-between gap-2.5">
+          <Menu.Button className="text-brand-muted-1 flex w-full items-center rounded-md py-2 text-sm font-semibold focus:outline-none">
+            <div
+              className={`flex w-full items-center gap-x-2 rounded-md bg-brand-surface-2 px-2 py-1.5 ${
+                sidebarCollapse ? "justify-center" : ""
+              }`}
+            >
+              <div className="relative grid h-6 w-6 place-items-center rounded bg-gray-700 uppercase text-white dark:bg-brand-surface-2 dark:text-gray-800">
+                {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
+                  <Image
+                    src={activeWorkspace.logo}
+                    alt="Workspace Logo"
+                    layout="fill"
+                    objectFit="cover"
+                    className="rounded"
+                  />
+                ) : (
+                  activeWorkspace?.name?.charAt(0) ?? "..."
+                )}
+              </div>
+
+              {!sidebarCollapse && (
+                <p>
+                  {activeWorkspace?.name ? truncateText(activeWorkspace.name, 14) : "Loading..."}
+                </p>
+              )}
+            </div>
+          </Menu.Button>
+
+          {!sidebarCollapse && (
+            <Link href={`/${workspaceSlug}/me/profile`}>
+              <a>
+                <div className="flex flex-grow justify-end">
+                  <Avatar user={user} height="32px" width="32px" fontSize="14px" />
+                </div>
+              </a>
+            </Link>
+          )}
+        </div>
+
+        <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"
+        >
+          <Menu.Items
+            className="fixed left-2 z-20 mt-1  flex w-full max-w-[17rem] origin-top-left flex-col rounded-md
+          border border-brand-base bg-brand-surface-2 shadow-lg focus:outline-none"
+          >
+            <div className="flex flex-col items-start justify-start gap-3 p-3">
+              <div className="text-sm text-brand-secondary">{user?.email}</div>
+              <span className="text-sm font-semibold text-brand-secondary">Workspace</span>
+              {workspaces ? (
+                <div className="flex h-full w-full flex-col items-start justify-start gap-3.5">
+                  {workspaces.length > 0 ? (
+                    workspaces.map((workspace) => (
+                      <Menu.Item key={workspace.id}>
+                        {({ active }) => (
+                          <button
+                            type="button"
+                            onClick={() => handleWorkspaceNavigation(workspace)}
+                            className="flex w-full items-center justify-between gap-1 rounded-md text-sm text-brand-base"
+                          >
+                            <div className="flex items-center justify-start gap-2.5">
+                              <span className="relative flex h-6 w-6 items-center justify-center rounded bg-gray-700 p-2 text-xs uppercase text-white">
+                                {workspace?.logo && workspace.logo !== "" ? (
+                                  <Image
+                                    src={workspace.logo}
+                                    alt="Workspace Logo"
+                                    layout="fill"
+                                    objectFit="cover"
+                                    className="rounded"
+                                  />
+                                ) : (
+                                  workspace?.name?.charAt(0) ?? "..."
+                                )}
+                              </span>
+
+                              <h5 className="text-sm">{truncateText(workspace.name, 18)}</h5>
+                            </div>
+                            <span className="p-1">
+                              <CheckIcon
+                                className={`h-3 w-3.5 text-brand-base ${
+                                  active || workspace.id === activeWorkspace?.id
+                                    ? "opacity-100"
+                                    : "opacity-0"
+                                }`}
+                              />
+                            </span>
+                          </button>
+                        )}
+                      </Menu.Item>
+                    ))
+                  ) : (
+                    <p>No workspace found!</p>
+                  )}
+                  <Menu.Item
+                    as="button"
+                    type="button"
+                    onClick={() => {
+                      router.push("/create-workspace");
+                    }}
+                    className="flex w-full items-center gap-1 text-sm text-brand-secondary"
+                  >
+                    <PlusIcon className="h-3 w-3" />
+                    Create Workspace
+                  </Menu.Item>
+                </div>
+              ) : (
+                <div className="w-full">
+                  <Loader className="space-y-2">
+                    <Loader.Item height="30px" />
+                    <Loader.Item height="30px" />
+                  </Loader>
+                </div>
+              )}
+            </div>
+            <div className="flex w-full flex-col items-start justify-start gap-2 border-t border-t-brand-base px-3 py-2 text-sm">
+              {userLinks(workspaceSlug as string).map((link, index) => (
+                <Menu.Item
+                  key={index}
+                  as="div"
+                  className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-brand-secondary hover:bg-brand-surface-1"
+                >
+                  <Link href={link.href}>
+                    <a className="w-full">{link.name}</a>
+                  </Link>
+                </Menu.Item>
+              ))}
+            </div>
+            <div className="w-full border-t border-t-brand-base px-3 py-2">
+              <Menu.Item
+                as="button"
+                type="button"
+                className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-red-600 hover:bg-brand-surface-1"
+                onClick={handleSignOut}
+              >
+                Sign out
+              </Menu.Item>
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </div>
+  );
+};
diff --git a/app/components/workspace/sidebar-menu.tsx b/app/components/workspace/sidebar-menu.tsx
new file mode 100644
index 000000000..4250d7376
--- /dev/null
+++ b/app/components/workspace/sidebar-menu.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+// icons
+import { GridViewIcon, AssignmentClipboardIcon, TickMarkIcon, SettingIcon } from "components/icons";
+// hooks
+import useTheme from "hooks/use-theme";
+
+const workspaceLinks = (workspaceSlug: string) => [
+  {
+    icon: GridViewIcon,
+    name: "Dashboard",
+    href: `/${workspaceSlug}`,
+  },
+  {
+    icon: AssignmentClipboardIcon,
+    name: "Projects",
+    href: `/${workspaceSlug}/projects`,
+  },
+  {
+    icon: TickMarkIcon,
+    name: "My Issues",
+    href: `/${workspaceSlug}/me/my-issues`,
+  },
+  {
+    icon: SettingIcon,
+    name: "Settings",
+    href: `/${workspaceSlug}/settings`,
+  },
+];
+
+export const WorkspaceSidebarMenu: React.FC = () => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // theme context
+  const { collapsed: sidebarCollapse } = useTheme();
+
+  return (
+    <div className="flex w-full flex-col items-start justify-start gap-2 px-3 py-1">
+      {workspaceLinks(workspaceSlug as string).map((link, index) => (
+        <Link key={index} href={link.href}>
+          <a
+            className={`${
+              link.href === router.asPath
+                ? "bg-brand-base text-brand-base"
+                : "text-brand-secondary hover:bg-brand-base hover:text-brand-base focus:bg-brand-base"
+            } group flex w-full items-center gap-3 rounded-md p-2 text-sm font-medium outline-none ${
+              sidebarCollapse ? "justify-center" : ""
+            }`}
+          >
+            <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
+              <link.icon
+                className={`${
+                  link.href === router.asPath ? "text-brand-base" : "text-brand-secondary"
+                } group-hover:text-brand-base`}
+                aria-hidden="true"
+                height="20"
+                width="20"
+              />
+            </span>
+            {!sidebarCollapse && link.name}
+          </a>
+        </Link>
+      ))}
+    </div>
+  );
+};
diff --git a/app/components/workspace/single-invitation.tsx b/app/components/workspace/single-invitation.tsx
new file mode 100644
index 000000000..b9807c1d0
--- /dev/null
+++ b/app/components/workspace/single-invitation.tsx
@@ -0,0 +1,77 @@
+// next
+import Image from "next/image";
+// react
+import { useState } from "react";
+// types
+import { IWorkspaceMemberInvitation } from "types";
+
+type Props = {
+  invitation: IWorkspaceMemberInvitation;
+  invitationsRespond: string[];
+  handleInvitation: any;
+};
+
+const SingleInvitation: React.FC<Props> = ({
+  invitation,
+  invitationsRespond,
+  handleInvitation,
+}) => {
+  const [isChecked, setIsChecked] = useState(invitationsRespond.includes(invitation.id));
+
+  return (
+    <>
+      <li>
+        <label
+          className={`group relative flex cursor-pointer items-start space-x-3 border-2 border-transparent px-4 py-4 ${
+            isChecked ? "rounded-lg border-theme" : ""
+          }`}
+          htmlFor={invitation.id}
+        >
+          <div className="flex-shrink-0">
+            <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg">
+              {invitation.workspace.logo && invitation.workspace.logo !== "" ? (
+                <Image
+                  src={invitation.workspace.logo}
+                  height="100%"
+                  width="100%"
+                  className="rounded"
+                  alt={invitation.workspace.name}
+                />
+              ) : (
+                <span className="flex h-full w-full items-center justify-center rounded bg-gray-500 p-4 uppercase text-white">
+                  {invitation.workspace.name.charAt(0)}
+                </span>
+              )}
+            </span>
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-medium text-brand-base">{invitation.workspace.name}</div>
+            <p className="text-sm text-brand-secondary">
+              Invited by {invitation.workspace.owner.first_name}
+            </p>
+          </div>
+          <div className="flex-shrink-0 self-center">
+            <input
+              id={invitation.id}
+              aria-describedby="workspaces"
+              name={invitation.id}
+              checked={invitationsRespond.includes(invitation.id)}
+              value={invitation.workspace.name}
+              onChange={(e) => {
+                handleInvitation(
+                  invitation,
+                  invitationsRespond.includes(invitation.id) ? "withdraw" : "accepted"
+                );
+                setIsChecked(e.target.checked);
+              }}
+              type="checkbox"
+              className="h-4 w-4 rounded border-brand-base text-brand-accent focus:ring-indigo-500"
+            />
+          </div>
+        </label>
+      </li>
+    </>
+  );
+};
+
+export default SingleInvitation;
diff --git a/app/constants/calendar.ts b/app/constants/calendar.ts
new file mode 100644
index 000000000..9b25acec0
--- /dev/null
+++ b/app/constants/calendar.ts
@@ -0,0 +1,22 @@
+export const monthOptions = [
+  { value: "1", label: "January" },
+  { value: "2", label: "February" },
+  { value: "3", label: "March" },
+  { value: "4", label: "April" },
+  { value: "5", label: "May" },
+  { value: "6", label: "June" },
+  { value: "7", label: "July" },
+  { value: "8", label: "August" },
+  { value: "9", label: "September" },
+  { value: "10", label: "October" },
+  { value: "11", label: "November" },
+  { value: "12", label: "December" },
+];
+
+export const yearOptions = [
+  { value: "2021", label: "2021" },
+  { value: "2022", label: "2022" },
+  { value: "2023", label: "2023" },
+  { value: "2024", label: "2024" },
+  { value: "2025", label: "2025" },
+];
diff --git a/app/constants/crisp.tsx b/app/constants/crisp.tsx
new file mode 100644
index 000000000..8c50893dc
--- /dev/null
+++ b/app/constants/crisp.tsx
@@ -0,0 +1,44 @@
+import useUser from "hooks/use-user";
+import { useCallback, useEffect } from "react";
+
+declare global {
+  interface Window {
+    $crisp: any;
+    CRISP_WEBSITE_ID: any;
+  }
+}
+
+const Crisp = () => {
+  const { user } = useUser();
+
+  const validateCurrentUser = useCallback(() => {
+    const currentUser = user ? user : null;
+
+    if (currentUser && currentUser.email) return currentUser.email;
+
+    return null;
+  }, [user]);
+
+  useEffect(() => {
+    if (typeof window && validateCurrentUser()) {
+      window.$crisp = [];
+      window.CRISP_WEBSITE_ID = process.env.NEXT_PUBLIC_CRISP_ID;
+      (function () {
+        var d = document;
+        var s = d.createElement("script");
+        s.src = "https://client.crisp.chat/l.js";
+        s.async = true;
+        d.getElementsByTagName("head")[0].appendChild(s);
+        // defining email when logged in
+        if (validateCurrentUser()) {
+          window.$crisp.push(["set", "user:email", [validateCurrentUser()]]);
+          window.$crisp.push(["do", "chat:hide"]);
+          window.$crisp.push(["do", "chat:close"]);
+        }
+      })();
+    }
+  }, [validateCurrentUser]);
+
+  return <></>;
+};
+export default Crisp;
diff --git a/app/constants/fetch-keys.ts b/app/constants/fetch-keys.ts
new file mode 100644
index 000000000..51491ab1e
--- /dev/null
+++ b/app/constants/fetch-keys.ts
@@ -0,0 +1,165 @@
+import { IJiraMetadata } from "types";
+
+const paramsToKey = (params: any) => {
+  const { state, priority, assignees, created_by, labels } = params;
+
+  let stateKey = state ? state.split(",") : [];
+  let priorityKey = priority ? priority.split(",") : [];
+  let assigneesKey = assignees ? assignees.split(",") : [];
+  let createdByKey = created_by ? created_by.split(",") : [];
+  let labelsKey = labels ? labels.split(",") : [];
+  const type = params.type ? params.type.toUpperCase() : "NULL";
+  const groupBy = params.group_by ? params.group_by.toUpperCase() : "NULL";
+  const orderBy = params.order_by ? params.order_by.toUpperCase() : "NULL";
+
+  // sorting each keys in ascending order
+  stateKey = stateKey.sort().join("_");
+  priorityKey = priorityKey.sort().join("_");
+  assigneesKey = assigneesKey.sort().join("_");
+  createdByKey = createdByKey.sort().join("_");
+  labelsKey = labelsKey.sort().join("_");
+
+  return `${stateKey}_${priorityKey}_${assigneesKey}_${createdByKey}_${type}_${groupBy}_${orderBy}_${labelsKey}`;
+};
+
+export const CURRENT_USER = "CURRENT_USER";
+export const USER_WORKSPACE_INVITATIONS = "USER_WORKSPACE_INVITATIONS";
+export const USER_WORKSPACES = "USER_WORKSPACES";
+
+export const WORKSPACE_DETAILS = (workspaceSlug: string) =>
+  `WORKSPACE_DETAILS_${workspaceSlug.toUpperCase()}`;
+
+export const WORKSPACE_MEMBERS = (workspaceSlug: string) =>
+  `WORKSPACE_MEMBERS_${workspaceSlug.toUpperCase()}`;
+export const WORKSPACE_MEMBERS_ME = (workspaceSlug: string) =>
+  `WORKSPACE_MEMBERS_ME${workspaceSlug.toUpperCase()}`;
+export const WORKSPACE_INVITATIONS = "WORKSPACE_INVITATIONS";
+export const WORKSPACE_INVITATION = "WORKSPACE_INVITATION";
+export const LAST_ACTIVE_WORKSPACE_AND_PROJECTS = "LAST_ACTIVE_WORKSPACE_AND_PROJECTS";
+
+export const PROJECTS_LIST = (workspaceSlug: string) =>
+  `PROJECTS_LIST_${workspaceSlug.toUpperCase()}`;
+export const FAVORITE_PROJECTS_LIST = (workspaceSlug: string) =>
+  `FAVORITE_PROJECTS_LIST_${workspaceSlug.toUpperCase()}`;
+export const PROJECT_DETAILS = (projectId: string) => `PROJECT_DETAILS_${projectId.toUpperCase()}`;
+
+export const PROJECT_MEMBERS = (projectId: string) => `PROJECT_MEMBERS_${projectId.toUpperCase()}`;
+export const PROJECT_INVITATIONS = "PROJECT_INVITATIONS";
+
+export const PROJECT_ISSUES_LIST = (workspaceSlug: string, projectId: string) =>
+  `PROJECT_ISSUES_LIST_${workspaceSlug.toUpperCase()}_${projectId.toUpperCase()}`;
+export const PROJECT_ISSUES_LIST_WITH_PARAMS = (projectId: string, params?: any) => {
+  if (!params) return `PROJECT_ISSUES_LIST_WITH_PARAMS_${projectId.toUpperCase()}`;
+
+  const paramsKey = paramsToKey(params);
+
+  return `PROJECT_ISSUES_LIST_WITH_PARAMS_${projectId.toUpperCase()}_${paramsKey}`;
+};
+export const PROJECT_ISSUES_DETAILS = (issueId: string) =>
+  `PROJECT_ISSUES_DETAILS_${issueId.toUpperCase()}`;
+export const PROJECT_ISSUES_PROPERTIES = (projectId: string) =>
+  `PROJECT_ISSUES_PROPERTIES_${projectId.toUpperCase()}`;
+export const PROJECT_ISSUES_COMMENTS = (issueId: string) =>
+  `PROJECT_ISSUES_COMMENTS_${issueId.toUpperCase()}`;
+export const PROJECT_ISSUES_ACTIVITY = (issueId: string) =>
+  `PROJECT_ISSUES_ACTIVITY_${issueId.toUpperCase()}`;
+export const PROJECT_ISSUE_BY_STATE = (projectId: string) =>
+  `PROJECT_ISSUE_BY_STATE_${projectId.toUpperCase()}`;
+export const PROJECT_ISSUE_LABELS = (projectId: string) =>
+  `PROJECT_ISSUE_LABELS_${projectId.toUpperCase()}`;
+export const PROJECT_GITHUB_REPOSITORY = (projectId: string) =>
+  `PROJECT_GITHUB_REPOSITORY_${projectId.toUpperCase()}`;
+
+export const CYCLE_LIST = (projectId: string) => `CYCLE_LIST_${projectId.toUpperCase()}`;
+export const CYCLE_INCOMPLETE_LIST = (projectId: string) =>
+  `CYCLE_INCOMPLETE_LIST_${projectId.toUpperCase()}`;
+export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId.toUpperCase()}`;
+export const CYCLE_ISSUES_WITH_PARAMS = (cycleId: string, params?: any) => {
+  if (!params) return `CYCLE_ISSUES_WITH_PARAMS_${cycleId.toUpperCase()}`;
+
+  const paramsKey = paramsToKey(params);
+
+  return `CYCLE_ISSUES_WITH_PARAMS_${cycleId.toUpperCase()}_${paramsKey.toUpperCase()}`;
+};
+export const CYCLE_DETAILS = (cycleId: string) => `CYCLE_DETAILS_${cycleId.toUpperCase()}`;
+export const CYCLE_CURRENT_AND_UPCOMING_LIST = (projectId: string) =>
+  `CYCLE_CURRENT_AND_UPCOMING_LIST_${projectId.toUpperCase()}`;
+export const CYCLE_DRAFT_LIST = (projectId: string) =>
+  `CYCLE_DRAFT_LIST_${projectId.toUpperCase()}`;
+export const CYCLE_COMPLETE_LIST = (projectId: string) =>
+  `CYCLE_COMPLETE_LIST_${projectId.toUpperCase()}`;
+
+export const STATE_LIST = (projectId: string) => `STATE_LIST_${projectId.toUpperCase()}`;
+export const STATE_DETAIL = "STATE_DETAILS";
+
+export const USER_ISSUE = (workspaceSlug: string) => `USER_ISSUE_${workspaceSlug.toUpperCase()}`;
+export const USER_ACTIVITY = "USER_ACTIVITY";
+export const USER_WORKSPACE_DASHBOARD = (workspaceSlug: string) =>
+  `USER_WORKSPACE_DASHBOARD_${workspaceSlug.toUpperCase()}`;
+export const USER_PROJECT_VIEW = (projectId: string) =>
+  `USER_PROJECT_VIEW_${projectId.toUpperCase()}`;
+
+export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId.toUpperCase()}`;
+export const MODULE_ISSUES = (moduleId: string) => `MODULE_ISSUES_${moduleId.toUpperCase()}`;
+export const MODULE_ISSUES_WITH_PARAMS = (moduleId: string, params?: any) => {
+  if (!params) return `MODULE_ISSUES_WITH_PARAMS_${moduleId.toUpperCase()}`;
+
+  const paramsKey = paramsToKey(params);
+
+  return `MODULE_ISSUES_WITH_PARAMS_${moduleId}_${paramsKey.toUpperCase()}`;
+};
+export const MODULE_DETAILS = (moduleId: string) => `MODULE_DETAILS_${moduleId.toUpperCase()}`;
+
+export const VIEWS_LIST = (projectId: string) => `VIEWS_LIST_${projectId.toUpperCase()}`;
+export const VIEW_ISSUES = (viewId: string) => `VIEW_ISSUES_${viewId.toUpperCase()}`;
+export const VIEW_DETAILS = (viewId: string) => `VIEW_DETAILS_${viewId.toUpperCase()}`;
+
+// Issues
+export const ISSUE_DETAILS = (issueId: string) => `ISSUE_DETAILS_${issueId.toUpperCase()}`;
+export const SUB_ISSUES = (issueId: string) => `SUB_ISSUES_${issueId.toUpperCase()}`;
+export const ISSUE_ATTACHMENTS = (issueId: string) => `ISSUE_ATTACHMENTS_${issueId.toUpperCase()}`;
+
+// integrations
+export const APP_INTEGRATIONS = "APP_INTEGRATIONS";
+export const WORKSPACE_INTEGRATIONS = (workspaceSlug: string) =>
+  `WORKSPACE_INTEGRATIONS_${workspaceSlug.toUpperCase()}`;
+
+export const JIRA_IMPORTER_DETAIL = (workspaceSlug: string, params: IJiraMetadata) => {
+  const { api_token, cloud_hostname, email, project_key } = params;
+
+  return `JIRA_IMPORTER_DETAIL_${workspaceSlug.toUpperCase()}_${api_token}_${cloud_hostname}_${email}_${project_key}`;
+};
+
+//import-export
+export const IMPORTER_SERVICES_LIST = (workspaceSlug: string) =>
+  `IMPORTER_SERVICES_LIST_${workspaceSlug.toUpperCase()}`;
+
+// github-importer
+export const GITHUB_REPOSITORY_INFO = (workspaceSlug: string, repoName: string) =>
+  `GITHUB_REPO_INFO_${workspaceSlug.toString().toUpperCase()}_${repoName.toUpperCase()}`;
+
+// Calendar
+export const PROJECT_CALENDAR_ISSUES = (projectId: string) =>
+  `CALENDAR_ISSUES_${projectId.toUpperCase()}`;
+export const CYCLE_CALENDAR_ISSUES = (projectId: string, cycleId: string) =>
+  `CALENDAR_ISSUES_${projectId.toUpperCase()}_${cycleId.toUpperCase()}`;
+export const MODULE_CALENDAR_ISSUES = (projectId: string, moduleId: string) =>
+  `CALENDAR_ISSUES_${projectId.toUpperCase()}_${moduleId.toUpperCase()}`;
+
+// Pages
+export const RECENT_PAGES_LIST = (projectId: string) =>
+  `RECENT_PAGES_LIST_${projectId.toUpperCase()}`;
+export const ALL_PAGES_LIST = (projectId: string) => `ALL_PAGES_LIST_${projectId.toUpperCase()}`;
+export const FAVORITE_PAGES_LIST = (projectId: string) =>
+  `FAVORITE_PAGES_LIST_${projectId.toUpperCase()}`;
+export const MY_PAGES_LIST = (projectId: string) => `MY_PAGES_LIST_${projectId.toUpperCase()}`;
+export const OTHER_PAGES_LIST = (projectId: string) =>
+  `OTHER_PAGES_LIST_${projectId.toUpperCase()}`;
+export const PAGE_DETAILS = (pageId: string) => `PAGE_DETAILS_${pageId.toUpperCase()}`;
+export const PAGE_BLOCKS_LIST = (pageId: string) => `PAGE_BLOCK_LIST_${pageId.toUpperCase()}`;
+export const PAGE_BLOCK_DETAILS = (pageId: string) => `PAGE_BLOCK_DETAILS_${pageId.toUpperCase()}`;
+
+// estimates
+export const ESTIMATES_LIST = (projectId: string) => `ESTIMATES_LIST_${projectId.toUpperCase()}`;
+export const ESTIMATE_DETAILS = (estimateId: string) =>
+  `ESTIMATE_DETAILS_${estimateId.toUpperCase()}`;
diff --git a/app/constants/issue.ts b/app/constants/issue.ts
new file mode 100644
index 000000000..9f5020d04
--- /dev/null
+++ b/app/constants/issue.ts
@@ -0,0 +1,115 @@
+export const GROUP_BY_OPTIONS: Array<{
+  name: string;
+  key: TIssueGroupByOptions;
+}> = [
+  { name: "State", key: "state" },
+  { name: "Priority", key: "priority" },
+  { name: "Labels", key: "labels" },
+  { name: "Created by", key: "created_by" },
+  { name: "None", key: null },
+];
+
+export const ORDER_BY_OPTIONS: Array<{
+  name: string;
+  key: TIssueOrderByOptions;
+}> = [
+  { name: "Manual", key: "sort_order" },
+  { name: "Last created", key: "-created_at" },
+  { name: "Last updated", key: "updated_at" },
+  { name: "Priority", key: "priority" },
+];
+
+export const FILTER_ISSUE_OPTIONS: Array<{
+  name: string;
+  key: "active" | "backlog" | null;
+}> = [
+  {
+    name: "All",
+    key: null,
+  },
+  {
+    name: "Active Issues",
+    key: "active",
+  },
+  {
+    name: "Backlog Issues",
+    key: "backlog",
+  },
+];
+
+import { orderArrayBy } from "helpers/array.helper";
+import { IIssue, TIssueGroupByOptions, TIssueOrderByOptions } from "types";
+
+type THandleIssuesMutation = (
+  formData: Partial<IIssue>,
+  oldGroupTitle: string,
+  selectedGroupBy: TIssueGroupByOptions,
+  issueIndex: number,
+  orderBy: TIssueOrderByOptions,
+  prevData?:
+    | {
+        [key: string]: IIssue[];
+      }
+    | IIssue[]
+) =>
+  | {
+      [key: string]: IIssue[];
+    }
+  | IIssue[]
+  | undefined;
+
+export const handleIssuesMutation: THandleIssuesMutation = (
+  formData,
+  oldGroupTitle,
+  selectedGroupBy,
+  issueIndex,
+  orderBy,
+  prevData
+) => {
+  if (!prevData) return prevData;
+
+  if (Array.isArray(prevData)) {
+    const updatedIssue = {
+      ...prevData[issueIndex],
+      ...formData,
+      assignees: formData?.assignees_list ?? prevData[issueIndex]?.assignees,
+    };
+
+    prevData.splice(issueIndex, 1, updatedIssue);
+
+    return [...prevData];
+  } else {
+    const oldGroup = prevData[oldGroupTitle ?? ""] ?? [];
+
+    let newGroup: IIssue[] = [];
+
+    if (selectedGroupBy === "priority") newGroup = prevData[formData.priority ?? ""] ?? [];
+    else if (selectedGroupBy === "state") newGroup = prevData[formData.state ?? ""] ?? [];
+
+    const updatedIssue = {
+      ...oldGroup[issueIndex],
+      ...formData,
+      assignees: formData?.assignees_list ?? oldGroup[issueIndex]?.assignees,
+    };
+
+    if (selectedGroupBy !== Object.keys(formData)[0])
+      return {
+        ...prevData,
+        [oldGroupTitle ?? ""]: orderArrayBy(
+          oldGroup.map((i) => (i.id === updatedIssue.id ? updatedIssue : i)),
+          orderBy
+        ),
+      };
+
+    const groupThatIsUpdated = selectedGroupBy === "priority" ? formData.priority : formData.state;
+
+    return {
+      ...prevData,
+      [oldGroupTitle ?? ""]: orderArrayBy(
+        oldGroup.filter((i) => i.id !== updatedIssue.id),
+        orderBy
+      ),
+      [groupThatIsUpdated ?? ""]: orderArrayBy([...newGroup, updatedIssue], orderBy),
+    };
+  }
+};
diff --git a/app/constants/module.ts b/app/constants/module.ts
new file mode 100644
index 000000000..ffacdfa3c
--- /dev/null
+++ b/app/constants/module.ts
@@ -0,0 +1,8 @@
+export const MODULE_STATUS = [
+  { label: "Backlog", value: "backlog", color: "#5e6ad2" },
+  { label: "Planned", value: "planned", color: "#26b5ce" },
+  { label: "In Progress", value: "in-progress", color: "#f2c94c" },
+  { label: "Paused", value: "paused", color: "#ff6900" },
+  { label: "Completed", value: "completed", color: "#4cb782" },
+  { label: "Cancelled", value: "cancelled", color: "#cc1d10" },
+];
diff --git a/app/constants/project.ts b/app/constants/project.ts
new file mode 100644
index 000000000..9ddae96c8
--- /dev/null
+++ b/app/constants/project.ts
@@ -0,0 +1,28 @@
+export const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
+
+export const GROUP_CHOICES = {
+  backlog: "Backlog",
+  unstarted: "Unstarted",
+  started: "Started",
+  completed: "Completed",
+  cancelled: "Cancelled",
+};
+
+export const PRIORITIES = ["urgent", "high", "medium", "low", null];
+
+export const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+export const DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
diff --git a/app/constants/seo-variables.ts b/app/constants/seo-variables.ts
new file mode 100644
index 000000000..2b2d876d2
--- /dev/null
+++ b/app/constants/seo-variables.ts
@@ -0,0 +1,8 @@
+export const SITE_NAME = "Plane";
+export const SITE_TITLE = "Plane | Accelerate software development with peace.";
+export const SITE_DESCRIPTION =
+  "Plane accelerated the software development by order of magnitude for agencies and product companies.";
+export const SITE_KEYWORDS =
+  "software development, plan, ship, software, accelerate, code management, release management";
+export const SITE_URL = "http://localhost:3000/";
+export const TWITTER_USER_NAME = "caravel";
diff --git a/app/constants/state.ts b/app/constants/state.ts
new file mode 100644
index 000000000..565a2c517
--- /dev/null
+++ b/app/constants/state.ts
@@ -0,0 +1,9 @@
+export const STATE_GROUP_COLORS: {
+  [key: string]: string;
+} = {
+  backlog: "#ced4da",
+  unstarted: "#26b5ce",
+  started: "#f7ae59",
+  cancelled: "#d687ff",
+  completed: "#09a953",
+};
diff --git a/app/constants/themes.ts b/app/constants/themes.ts
new file mode 100644
index 000000000..8ac745b82
--- /dev/null
+++ b/app/constants/themes.ts
@@ -0,0 +1,35 @@
+export const THEMES = [
+  "light",
+  "dark",
+  "light-contrast",
+  "dark-contrast",
+  // "custom"
+];
+
+export const THEMES_OBJ = [
+  {
+    value: "light",
+    label: "Light",
+    type: "light",
+  },
+  {
+    value: "dark",
+    label: "Dark",
+    type: "dark",
+  },
+  {
+    value: "light-contrast",
+    label: "Light High Contrast",
+    type: "light",
+  },
+  {
+    value: "dark-contrast",
+    label: "Dark High Contrast",
+    type: "dark",
+  },
+  // {
+  //   value: "custom",
+  //   label: "Custom",
+  //   type: "light",
+  // },
+];
diff --git a/app/constants/workspace.ts b/app/constants/workspace.ts
new file mode 100644
index 000000000..24f886af9
--- /dev/null
+++ b/app/constants/workspace.ts
@@ -0,0 +1,85 @@
+// onboarding images
+import Welcome from "public/onboarding/welcome.svg";
+import Issue from "public/onboarding/issue.svg";
+import Cycle from "public/onboarding/cycle.svg";
+import Module from "public/onboarding/module.svg";
+import CommandMenu from "public/onboarding/command-menu.svg";
+// services images
+import GithubLogo from "public/services/github.png";
+import JiraLogo from "public/services/jira.png";
+
+export const ROLE = {
+  5: "Guest",
+  10: "Viewer",
+  15: "Member",
+  20: "Admin",
+};
+
+export const COMPANY_SIZE = [
+  { value: 5, label: "5" },
+  { value: 10, label: "10" },
+  { value: 25, label: "25" },
+  { value: 50, label: "50" },
+];
+
+export const USER_ROLES = [
+  { value: "Founder or leadership team", label: "Founder or leadership team" },
+  { value: "Product manager", label: "Product manager" },
+  { value: "Designer", label: "Designer" },
+  { value: "Software developer", label: "Software developer" },
+  { value: "Freelancer", label: "Freelancer" },
+  { value: "Other", label: "Other" },
+];
+
+export const ONBOARDING_CARDS = {
+  welcome: {
+    imgURL: Welcome,
+    step: "1/5",
+    title: "Welcome to Plane",
+    description: "Plane helps you plan your issues, cycles, and product modules to ship faster.",
+  },
+  issue: {
+    imgURL: Issue,
+    step: "2/5",
+    title: "Plan with Issues",
+    description:
+      "The issue is the building block of the Plane. Most concepts in Plane are either associated with issues and their properties.",
+  },
+  cycle: {
+    imgURL: Cycle,
+    step: "3/5",
+    title: "Move with Cycles",
+    description:
+      "Cycles help you and your team to progress faster, similar to the sprints commonly used in agile development.",
+  },
+  module: {
+    imgURL: Module,
+    step: "4/5",
+    title: "Break into Modules ",
+    description:
+      "Modules break your big think into Projects or Features, to help you organize better.",
+  },
+  commandMenu: {
+    imgURL: CommandMenu,
+    step: "5 /5",
+    title: "Command Menu",
+    description: "With Command Menu, you can create, update and navigate across the platform.",
+  },
+};
+
+export const IMPORTERS_EXPORTERS_LIST = [
+  {
+    provider: "github",
+    type: "import",
+    title: "GitHub",
+    description: "Import issues from GitHub repositories and sync them.",
+    logo: GithubLogo,
+  },
+  {
+    provider: "jira",
+    type: "import",
+    title: "Jira",
+    description: "Import issues and epics from Jira projects and epics.",
+    logo: JiraLogo,
+  },
+];
diff --git a/app/contexts/issue-view.context.tsx b/app/contexts/issue-view.context.tsx
new file mode 100644
index 000000000..9d9135362
--- /dev/null
+++ b/app/contexts/issue-view.context.tsx
@@ -0,0 +1,593 @@
+import { createContext, useCallback, useEffect, useReducer } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// components
+import ToastAlert from "components/toast-alert";
+// services
+import projectService from "services/project.service";
+import cyclesService from "services/cycles.service";
+import modulesService from "services/modules.service";
+import viewsService from "services/views.service";
+// types
+import {
+  IIssueFilterOptions,
+  TIssueViewOptions,
+  IProjectMember,
+  TIssueGroupByOptions,
+  TIssueOrderByOptions,
+} from "types";
+// fetch-keys
+import {
+  CYCLE_DETAILS,
+  MODULE_DETAILS,
+  USER_PROJECT_VIEW,
+  VIEW_DETAILS,
+} from "constants/fetch-keys";
+
+export const issueViewContext = createContext<ContextType>({} as ContextType);
+
+type IssueViewProps = {
+  issueView: TIssueViewOptions;
+  groupByProperty: TIssueGroupByOptions;
+  orderBy: TIssueOrderByOptions;
+  showEmptyGroups: boolean;
+  filters: IIssueFilterOptions;
+};
+
+type ReducerActionType = {
+  type:
+    | "REHYDRATE_THEME"
+    | "SET_ISSUE_VIEW"
+    | "SET_ORDER_BY_PROPERTY"
+    | "SET_SHOW_EMPTY_STATES"
+    | "SET_FILTERS"
+    | "SET_GROUP_BY_PROPERTY"
+    | "RESET_TO_DEFAULT";
+  payload?: Partial<IssueViewProps>;
+};
+
+type ContextType = IssueViewProps & {
+  setGroupByProperty: (property: TIssueGroupByOptions) => void;
+  setOrderBy: (property: TIssueOrderByOptions) => void;
+  setShowEmptyGroups: (property: boolean) => void;
+  setFilters: (filters: Partial<IIssueFilterOptions>, saveToServer?: boolean) => void;
+  resetFilterToDefault: () => void;
+  setNewFilterDefaultView: () => void;
+  setIssueView: (property: TIssueViewOptions) => void;
+};
+
+type StateType = {
+  issueView: TIssueViewOptions;
+  groupByProperty: TIssueGroupByOptions;
+  orderBy: TIssueOrderByOptions;
+  showEmptyGroups: boolean;
+  filters: IIssueFilterOptions;
+};
+type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
+
+export const initialState: StateType = {
+  issueView: "list",
+  groupByProperty: null,
+  orderBy: "-created_at",
+  showEmptyGroups: true,
+  filters: {
+    type: null,
+    priority: null,
+    assignees: null,
+    labels: null,
+    state: null,
+    issue__assignees__id: null,
+    issue__labels__id: null,
+    created_by: null,
+  },
+};
+
+export const reducer: ReducerFunctionType = (state, action) => {
+  const { type, payload } = action;
+
+  switch (type) {
+    case "REHYDRATE_THEME": {
+      let collapsed: any = localStorage.getItem("collapsed");
+      collapsed = collapsed ? JSON.parse(collapsed) : false;
+
+      return { ...initialState, ...payload, collapsed };
+    }
+
+    case "SET_ISSUE_VIEW": {
+      const newState = {
+        ...state,
+        issueView: payload?.issueView || "list",
+      };
+
+      return {
+        ...state,
+        ...newState,
+      };
+    }
+
+    case "SET_GROUP_BY_PROPERTY": {
+      const newState = {
+        ...state,
+        groupByProperty: payload?.groupByProperty || null,
+      };
+
+      return {
+        ...state,
+        ...newState,
+      };
+    }
+
+    case "SET_ORDER_BY_PROPERTY": {
+      const newState = {
+        ...state,
+        orderBy: payload?.orderBy || "-created_at",
+      };
+
+      return {
+        ...state,
+        ...newState,
+      };
+    }
+
+    case "SET_SHOW_EMPTY_STATES": {
+      const newState = {
+        ...state,
+        showEmptyGroups: payload?.showEmptyGroups || true,
+      };
+
+      return {
+        ...state,
+        ...newState,
+      };
+    }
+
+    case "SET_FILTERS": {
+      const newState = {
+        ...state,
+        filters: {
+          ...state.filters,
+          ...payload,
+        },
+      };
+
+      return {
+        ...state,
+        ...newState,
+      };
+    }
+
+    case "RESET_TO_DEFAULT": {
+      return {
+        ...initialState,
+        ...payload,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+};
+
+const saveDataToServer = async (workspaceSlug: string, projectID: string, state: any) => {
+  await projectService.setProjectView(workspaceSlug, projectID, {
+    view_props: state,
+  });
+};
+
+const saveCycleFilters = async (
+  workspaceSlug: string,
+  projectId: string,
+  cycleId: string,
+  state: any
+) => {
+  await cyclesService.patchCycle(workspaceSlug, projectId, cycleId, {
+    ...state,
+  });
+};
+
+const saveModuleFilters = async (
+  workspaceSlug: string,
+  projectId: string,
+  moduleId: string,
+  state: any
+) => {
+  await modulesService.patchModule(workspaceSlug, projectId, moduleId, {
+    ...state,
+  });
+};
+
+const saveViewFilters = async (
+  workspaceSlug: string,
+  projectId: string,
+  viewId: string,
+  state: any
+) => {
+  await viewsService.patchView(workspaceSlug, projectId, viewId, {
+    ...state,
+  });
+};
+
+const setNewDefault = async (workspaceSlug: string, projectId: string, state: any) => {
+  mutate<IProjectMember>(
+    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId as string) : null,
+    (prevData) => {
+      if (!prevData) return prevData;
+
+      return {
+        ...prevData,
+        view_props: state,
+      };
+    },
+    false
+  );
+
+  await projectService.setProjectView(workspaceSlug, projectId, {
+    view_props: state,
+    default_props: state,
+  });
+};
+
+export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
+
+  const { data: myViewProps, mutate: mutateMyViewProps } = useSWR(
+    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMemberMe(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: viewDetails, mutate: mutateViewDetails } = useSWR(
+    workspaceSlug && projectId && viewId ? VIEW_DETAILS(viewId as string) : null,
+    workspaceSlug && projectId && viewId
+      ? () =>
+          viewsService.getViewDetails(
+            workspaceSlug as string,
+            projectId as string,
+            viewId as string
+          )
+      : null
+  );
+
+  const { data: cycleDetails, mutate: mutateCycleDetails } = useSWR(
+    workspaceSlug && projectId && cycleId ? CYCLE_DETAILS(cycleId as string) : null,
+    workspaceSlug && projectId && cycleId
+      ? () =>
+          cyclesService.getCycleDetails(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            cycleId.toString()
+          )
+      : null
+  );
+
+  const { data: moduleDetails, mutate: mutateModuleDetails } = useSWR(
+    workspaceSlug && projectId && moduleId ? MODULE_DETAILS(moduleId.toString()) : null,
+    workspaceSlug && projectId && moduleId
+      ? () =>
+          modulesService.getModuleDetails(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            moduleId.toString()
+          )
+      : null
+  );
+
+  const setIssueView = useCallback(
+    (property: TIssueViewOptions) => {
+      dispatch({
+        type: "SET_ISSUE_VIEW",
+        payload: {
+          issueView: property,
+        },
+      });
+
+      if (property === "kanban") {
+        dispatch({
+          type: "SET_GROUP_BY_PROPERTY",
+          payload: {
+            groupByProperty: "state",
+          },
+        });
+      }
+      if (property === "calendar") {
+        dispatch({
+          type: "SET_GROUP_BY_PROPERTY",
+          payload: {
+            groupByProperty: null,
+          },
+        });
+      }
+
+      if (!workspaceSlug || !projectId) return;
+
+      saveDataToServer(workspaceSlug as string, projectId as string, {
+        ...state,
+        issueView: property,
+        groupByProperty: "state",
+      });
+    },
+    [workspaceSlug, projectId, state]
+  );
+
+  const setGroupByProperty = useCallback(
+    (property: TIssueGroupByOptions) => {
+      dispatch({
+        type: "SET_GROUP_BY_PROPERTY",
+        payload: {
+          groupByProperty: property,
+        },
+      });
+
+      if (!workspaceSlug || !projectId) return;
+
+      mutateMyViewProps((prevData) => {
+        if (!prevData) return prevData;
+
+        return {
+          ...prevData,
+          view_props: {
+            ...state,
+            groupByProperty: property,
+          },
+        };
+      }, false);
+
+      saveDataToServer(workspaceSlug as string, projectId as string, {
+        ...state,
+        groupByProperty: property,
+      });
+    },
+    [projectId, workspaceSlug, state, mutateMyViewProps]
+  );
+
+  const setOrderBy = useCallback(
+    (property: TIssueOrderByOptions) => {
+      dispatch({
+        type: "SET_ORDER_BY_PROPERTY",
+        payload: {
+          orderBy: property,
+        },
+      });
+
+      if (!workspaceSlug || !projectId) return;
+
+      mutateMyViewProps((prevData) => {
+        if (!prevData) return prevData;
+
+        return {
+          ...prevData,
+          view_props: {
+            ...state,
+            orderBy: property,
+          },
+        };
+      }, false);
+
+      saveDataToServer(workspaceSlug as string, projectId as string, {
+        ...state,
+        orderBy: property,
+      });
+    },
+    [projectId, workspaceSlug, state, mutateMyViewProps]
+  );
+
+  const setShowEmptyGroups = useCallback(
+    (property: boolean) => {
+      dispatch({
+        type: "SET_SHOW_EMPTY_STATES",
+        payload: {
+          showEmptyGroups: property,
+        },
+      });
+
+      if (!workspaceSlug || !projectId) return;
+
+      mutateMyViewProps((prevData) => {
+        if (!prevData) return prevData;
+
+        return {
+          ...prevData,
+          view_props: {
+            ...state,
+            showEmptyGroups: property,
+          },
+        };
+      }, false);
+
+      saveDataToServer(workspaceSlug as string, projectId as string, {
+        ...state,
+        showEmptyGroups: property,
+      });
+    },
+    [projectId, workspaceSlug, state, mutateMyViewProps]
+  );
+
+  const setFilters = useCallback(
+    (property: Partial<IIssueFilterOptions>, saveToServer = true) => {
+      Object.keys(property).forEach((key) => {
+        if (property[key as keyof typeof property]?.length === 0)
+          property[key as keyof typeof property] = null;
+      });
+
+      dispatch({
+        type: "SET_FILTERS",
+        payload: {
+          filters: {
+            ...state.filters,
+            ...property,
+          },
+        },
+      });
+
+      if (!workspaceSlug || !projectId) return;
+
+      if (cycleId) {
+        mutateCycleDetails((prevData: any) => {
+          if (!prevData) return prevData;
+
+          return {
+            ...prevData,
+            view_props: {
+              filters: {
+                ...state.filters,
+                ...property,
+              },
+            },
+          };
+        }, false);
+
+        saveCycleFilters(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), {
+          view_props: {
+            filters: {
+              ...state.filters,
+              ...property,
+            },
+          },
+        });
+      } else if (moduleId) {
+        mutateModuleDetails((prevData: any) => {
+          if (!prevData) return prevData;
+
+          return {
+            ...prevData,
+            view_props: {
+              filters: {
+                ...state.filters,
+                ...property,
+              },
+            },
+          };
+        }, false);
+
+        saveModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), {
+          view_props: {
+            filters: {
+              ...state.filters,
+              ...property,
+            },
+          },
+        });
+      } else if (viewId) {
+        mutateViewDetails((prevData: any) => {
+          if (!prevData) return prevData;
+          return {
+            ...prevData,
+            query_data: {
+              ...state.filters,
+              ...property,
+            },
+          };
+        }, false);
+        if (saveToServer)
+          saveViewFilters(workspaceSlug as string, projectId as string, viewId as string, {
+            query_data: {
+              ...state.filters,
+              ...property,
+            },
+          });
+      } else {
+        mutateMyViewProps((prevData) => {
+          if (!prevData) return prevData;
+
+          return {
+            ...prevData,
+            view_props: {
+              ...state,
+              filters: {
+                ...state.filters,
+                ...property,
+              },
+            },
+          };
+        }, false);
+
+        saveDataToServer(workspaceSlug as string, projectId as string, {
+          ...state,
+          filters: {
+            ...state.filters,
+            ...property,
+          },
+        });
+      }
+    },
+    [
+      projectId,
+      workspaceSlug,
+      state,
+      mutateMyViewProps,
+      cycleId,
+      mutateCycleDetails,
+      moduleId,
+      mutateModuleDetails,
+      viewId,
+      mutateViewDetails,
+    ]
+  );
+
+  const setNewDefaultView = useCallback(() => {
+    if (!workspaceSlug || !projectId) return;
+
+    setNewDefault(workspaceSlug as string, projectId as string, state).then(() => {
+      mutateMyViewProps();
+    });
+  }, [projectId, workspaceSlug, state, mutateMyViewProps]);
+
+  const resetToDefault = useCallback(() => {
+    dispatch({
+      type: "RESET_TO_DEFAULT",
+      payload: myViewProps?.default_props,
+    });
+
+    if (!workspaceSlug || !projectId) return;
+
+    saveDataToServer(workspaceSlug as string, projectId as string, myViewProps?.default_props);
+  }, [projectId, workspaceSlug, myViewProps]);
+
+  useEffect(() => {
+    dispatch({
+      type: "REHYDRATE_THEME",
+      payload: {
+        ...myViewProps?.view_props,
+        filters: {
+          ...(cycleId
+            ? cycleDetails?.view_props.filters
+            : moduleId
+            ? moduleDetails?.view_props.filters
+            : viewId
+            ? viewDetails?.query_data
+            : myViewProps?.view_props?.filters),
+        } as any,
+      },
+    });
+  }, [myViewProps, cycleId, cycleDetails, moduleId, moduleDetails, viewId, viewDetails]);
+
+  return (
+    <issueViewContext.Provider
+      value={{
+        issueView: state.issueView,
+        groupByProperty: state.groupByProperty,
+        setGroupByProperty,
+        orderBy: state.orderBy,
+        showEmptyGroups: state.showEmptyGroups,
+        setOrderBy,
+        setShowEmptyGroups,
+        filters: state.filters,
+        setFilters,
+        resetFilterToDefault: resetToDefault,
+        setNewFilterDefaultView: setNewDefaultView,
+        setIssueView,
+      }}
+    >
+      <ToastAlert />
+      {children}
+    </issueViewContext.Provider>
+  );
+};
diff --git a/app/contexts/project-member.context.tsx b/app/contexts/project-member.context.tsx
new file mode 100644
index 000000000..bb8fd6fca
--- /dev/null
+++ b/app/contexts/project-member.context.tsx
@@ -0,0 +1,73 @@
+import { createContext, useContext } from "react";
+
+// next
+import { useRouter } from "next/router";
+
+// swr
+import useSWR from "swr";
+
+// services
+import projectService from "services/project.service";
+
+// keys
+import { USER_PROJECT_VIEW } from "constants/fetch-keys";
+
+// types
+import { IProjectMember } from "types";
+
+type ContextType = {
+  loading: boolean;
+  memberDetails?: IProjectMember;
+  error: any;
+};
+
+export const ProjectMemberContext = createContext<ContextType>({} as ContextType);
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const ProjectMemberProvider: React.FC<Props> = (props) => {
+  const { children } = props;
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: memberDetails, error } = useSWR(
+    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
+      : null,
+    {
+      onErrorRetry(err, _, __, ___, revalidateOpts) {
+        if (err.status === 401 || err.status === 403) return;
+        revalidateOpts.retryCount = 5;
+      },
+    }
+  );
+
+  const loading = !memberDetails && !error;
+
+  return (
+    <ProjectMemberContext.Provider value={{ loading, memberDetails, error }}>
+      {children}
+    </ProjectMemberContext.Provider>
+  );
+};
+
+export const useProjectMyMembership = () => {
+  const context = useContext(ProjectMemberContext);
+
+  if (context === undefined)
+    throw new Error(`useProjectMember must be used within a ProjectMemberProvider.`);
+
+  return {
+    ...context,
+    memberRole: {
+      isOwner: context.memberDetails?.role === 20,
+      isMember: context.memberDetails?.role === 15,
+      isViewer: context.memberDetails?.role === 10,
+      isGuest: context.memberDetails?.role === 5,
+    },
+  };
+};
diff --git a/app/contexts/theme.context.tsx b/app/contexts/theme.context.tsx
new file mode 100644
index 000000000..c51cdca1a
--- /dev/null
+++ b/app/contexts/theme.context.tsx
@@ -0,0 +1,99 @@
+import { createContext, useCallback, useReducer, useEffect } from "react";
+import { useRouter } from "next/router";
+// swr
+import useSWR from "swr";
+// components
+import ToastAlert from "components/toast-alert";
+// services
+import projectService from "services/project.service";
+// fetch-keys
+import { USER_PROJECT_VIEW } from "constants/fetch-keys";
+// constants
+
+export const themeContext = createContext<ContextType>({} as ContextType);
+
+type ThemeProps = {
+  collapsed: boolean;
+};
+
+type ReducerActionType = {
+  type: "TOGGLE_SIDEBAR" | "REHYDRATE_THEME";
+  payload?: Partial<ThemeProps>;
+};
+
+type ContextType = {
+  collapsed: boolean;
+  toggleCollapsed: () => void;
+};
+
+type StateType = {
+  collapsed: boolean;
+};
+type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
+
+export const initialState: StateType = {
+  collapsed: false,
+};
+
+export const reducer: ReducerFunctionType = (state, action) => {
+  const { type, payload } = action;
+
+  switch (type) {
+    case "TOGGLE_SIDEBAR":
+      const newState = {
+        ...state,
+        collapsed: !state.collapsed,
+      };
+      localStorage.setItem("collapsed", JSON.stringify(newState.collapsed));
+      return newState;
+
+    case "REHYDRATE_THEME": {
+      let collapsed: any = localStorage.getItem("collapsed");
+      collapsed = collapsed ? JSON.parse(collapsed) : false;
+      return { ...initialState, ...payload, collapsed };
+    }
+
+    default: {
+      return state;
+    }
+  }
+};
+
+export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: myViewProps } = useSWR(
+    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMemberMe(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const toggleCollapsed = useCallback(() => {
+    dispatch({
+      type: "TOGGLE_SIDEBAR",
+    });
+  }, []);
+
+  useEffect(() => {
+    dispatch({
+      type: "REHYDRATE_THEME",
+      payload: myViewProps?.view_props as any,
+    });
+  }, [myViewProps]);
+
+  return (
+    <themeContext.Provider
+      value={{
+        collapsed: state.collapsed,
+        toggleCollapsed,
+      }}
+    >
+      <ToastAlert />
+      {children}
+    </themeContext.Provider>
+  );
+};
diff --git a/app/contexts/toast.context.tsx b/app/contexts/toast.context.tsx
new file mode 100644
index 000000000..69adf0e92
--- /dev/null
+++ b/app/contexts/toast.context.tsx
@@ -0,0 +1,101 @@
+import React, { createContext, useCallback, useReducer } from "react";
+// uuid
+import { v4 as uuid } from "uuid";
+// components
+import ToastAlert from "components/toast-alert";
+
+export const toastContext = createContext<ContextType>({} as ContextType);
+
+// types
+type ToastAlert = {
+  id: string;
+  title: string;
+  message?: string;
+  type: "success" | "error" | "warning" | "info";
+};
+
+type ReducerActionType = {
+  type: "SET_TOAST_ALERT" | "REMOVE_TOAST_ALERT";
+  payload: ToastAlert;
+};
+
+type ContextType = {
+  alerts?: ToastAlert[];
+  removeAlert: (id: string) => void;
+  setToastAlert: (data: {
+    title: string;
+    type?: "success" | "error" | "warning" | "info" | undefined;
+    message?: string | undefined;
+  }) => void;
+};
+
+type StateType = {
+  toastAlerts?: ToastAlert[];
+};
+
+type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
+
+export const initialState: StateType = {
+  toastAlerts: [],
+};
+
+export const reducer: ReducerFunctionType = (state, action) => {
+  const { type, payload } = action;
+
+  switch (type) {
+    case "SET_TOAST_ALERT":
+      return {
+        ...state,
+        toastAlerts: [...(state.toastAlerts ?? []), payload],
+      };
+
+    case "REMOVE_TOAST_ALERT":
+      return {
+        ...state,
+        toastAlerts: state.toastAlerts?.filter((toastAlert) => toastAlert.id !== payload.id),
+      };
+
+    default: {
+      return state;
+    }
+  }
+};
+
+export const ToastContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const removeAlert = useCallback((id: string) => {
+    dispatch({
+      type: "REMOVE_TOAST_ALERT",
+      payload: { id, title: "", message: "", type: "success" },
+    });
+  }, []);
+
+  const setToastAlert = useCallback(
+    (data: {
+      title: string;
+      type?: "success" | "error" | "warning" | "info";
+      message?: string;
+    }) => {
+      const id = uuid();
+      const { title, type, message } = data;
+      dispatch({
+        type: "SET_TOAST_ALERT",
+        payload: { id, title, message, type: type ?? "success" },
+      });
+
+      const timer = setTimeout(() => {
+        removeAlert(id);
+        clearTimeout(timer);
+      }, 3000);
+    },
+    [removeAlert]
+  );
+
+  return (
+    <toastContext.Provider value={{ setToastAlert, removeAlert, alerts: state.toastAlerts }}>
+      <ToastAlert />
+      {children}
+    </toastContext.Provider>
+  );
+};
diff --git a/app/contexts/user.context.tsx b/app/contexts/user.context.tsx
new file mode 100644
index 000000000..3f076b326
--- /dev/null
+++ b/app/contexts/user.context.tsx
@@ -0,0 +1,41 @@
+import React, { createContext, ReactElement } from "react";
+
+import useSWR, { KeyedMutator } from "swr";
+
+// services
+import userService from "services/user.service";
+// constants
+import { CURRENT_USER } from "constants/fetch-keys";
+// types
+import type { ICurrentUserResponse, IUser } from "types";
+
+interface IUserContextProps {
+  user?: IUser;
+  isUserLoading: boolean;
+  mutateUser: KeyedMutator<ICurrentUserResponse>;
+  assignedIssuesLength?: number;
+  workspaceInvitesLength?: number;
+}
+
+export const UserContext = createContext<IUserContextProps>({} as IUserContextProps);
+
+export const UserProvider = ({ children }: { children: ReactElement }) => {
+  // API to fetch user information
+  const { data, error, mutate } = useSWR(CURRENT_USER, () => userService.currentUser(), {
+    shouldRetryOnError: false,
+  });
+
+  return (
+    <UserContext.Provider
+      value={{
+        user: error ? undefined : data?.user,
+        isUserLoading: Boolean(data?.user === undefined && error === undefined),
+        mutateUser: mutate,
+        assignedIssuesLength: data?.assigned_issues ?? 0,
+        workspaceInvitesLength: data?.workspace_invites ?? 0,
+      }}
+    >
+      {children}
+    </UserContext.Provider>
+  );
+};
diff --git a/app/contexts/workspace.context.tsx b/app/contexts/workspace.context.tsx
new file mode 100644
index 000000000..2ecbb2ef5
--- /dev/null
+++ b/app/contexts/workspace.context.tsx
@@ -0,0 +1,51 @@
+import { FC, ReactElement, createContext } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import workspaceService from "services/workspace.service";
+// types
+import { IWorkspace } from "types";
+// constants
+import { USER_WORKSPACES } from "constants/fetch-keys";
+
+export interface WorkspaceProviderProps {
+  children: ReactElement;
+}
+
+export interface WorkspaceContextProps {
+  workspaces: IWorkspace[];
+  activeWorkspace: IWorkspace | undefined;
+  mutateWorkspaces: () => void;
+}
+
+export const WorkspaceContext = createContext<WorkspaceContextProps>({} as WorkspaceContextProps);
+
+export const WorkspaceProvider: FC<WorkspaceProviderProps> = (props) => {
+  const { children } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // API to fetch user information
+  const {
+    data = [],
+    error,
+    mutate,
+  } = useSWR<IWorkspace[]>(USER_WORKSPACES, () => workspaceService.userWorkspaces());
+  // active workspace
+  const activeWorkspace = data?.find((w) => w.slug === workspaceSlug);
+
+  return (
+    <WorkspaceContext.Provider
+      value={{
+        workspaces: error ? [] : data,
+        activeWorkspace,
+        mutateWorkspaces: mutate,
+      }}
+    >
+      {children}
+    </WorkspaceContext.Provider>
+  );
+};
diff --git a/app/google.d.ts b/app/google.d.ts
new file mode 100644
index 000000000..ed6eba192
--- /dev/null
+++ b/app/google.d.ts
@@ -0,0 +1,91 @@
+// google.d.ts
+
+interface IdConfiguration {
+  client_id: string;
+  auto_select?: boolean;
+  callback: (handleCredentialResponse: CredentialResponse) => void;
+  login_uri?: string;
+  native_callback?: (...args: any[]) => void;
+  cancel_on_tap_outside?: boolean;
+  prompt_parent_id?: string;
+  nonce?: string;
+  context?: string;
+  state_cookie_domain?: string;
+  ux_mode?: "popup" | "redirect";
+  allowed_parent_origin?: string | string[];
+  intermediate_iframe_close_callback?: (...args: any[]) => void;
+}
+
+interface CredentialResponse {
+  credential?: string;
+  select_by?:
+    | "auto"
+    | "user"
+    | "user_1tap"
+    | "user_2tap"
+    | "btn"
+    | "btn_confirm"
+    | "brn_add_session"
+    | "btn_confirm_add_session";
+  clientId?: string;
+}
+
+interface GsiButtonConfiguration {
+  type: "standard" | "icon";
+  theme?: "outline" | "filled_blue" | "filled_black";
+  size?: "large" | "medium" | "small";
+  text?: "signin_with" | "signup_with" | "continue_with" | "signup_with";
+  shape?: "rectangular" | "pill" | "circle" | "square";
+  logo_alignment?: "left" | "center";
+  width?: string;
+  local?: string;
+}
+
+interface PromptMomentNotification {
+  isDisplayMoment: () => boolean;
+  isDisplayed: () => boolean;
+  isNotDisplayed: () => boolean;
+  getNotDisplayedReason: () =>
+    | "browser_not_supported"
+    | "invalid_client"
+    | "missing_client_id"
+    | "opt_out_or_no_session"
+    | "secure_http_required"
+    | "suppressed_by_user"
+    | "unregistered_origin"
+    | "unknown_reason";
+  isSkippedMoment: () => boolean;
+  getSkippedReason: () => "auto_cancel" | "user_cancel" | "tap_outside" | "issuing_failed";
+  isDismissedMoment: () => boolean;
+  getDismissedReason: () => "credential_returned" | "cancel_called" | "flow_restarted";
+  getMomentType: () => "display" | "skipped" | "dismissed";
+}
+
+interface RevocationResponse {
+  successful: boolean;
+  error: string;
+}
+
+interface Credential {
+  id: string;
+  password: string;
+}
+
+interface Google {
+  accounts: {
+    id: {
+      initialize: (input: IdConfiguration) => void;
+      prompt: (momentListener?: (res: PromptMomentNotification) => void) => void;
+      renderButton: (parent: HTMLElement, options: GsiButtonConfiguration) => void;
+      disableAutoSelect: () => void;
+      storeCredential: (credentials: Credential, callback: () => void) => void;
+      cancel: () => void;
+      onGoogleLibraryLoad: () => void;
+      revoke: (hint: string, callback: (done: RevocationResponse) => void) => void;
+    };
+  };
+}
+
+interface Window {
+  google?: Google;
+}
diff --git a/app/helpers/array.helper.ts b/app/helpers/array.helper.ts
new file mode 100644
index 000000000..1f9f021be
--- /dev/null
+++ b/app/helpers/array.helper.ts
@@ -0,0 +1,35 @@
+export const groupBy = (array: any[], key: string) => {
+  const innerKey = key.split("."); // split the key by dot
+  return array.reduce((result, currentValue) => {
+    const key = innerKey.reduce((obj, i) => obj?.[i], currentValue) ?? "None"; // get the value of the inner key
+    (result[key] = result[key] || []).push(currentValue);
+    return result;
+  }, {});
+};
+
+export const orderArrayBy = (
+  array: any[],
+  key: string,
+  ordering: "ascending" | "descending" = "ascending"
+) => {
+  if (key[0] === "-") {
+    ordering = "descending";
+    key = key.slice(1);
+  }
+
+  const innerKey = key.split("."); // split the key by dot
+
+  return array.sort((a, b) => {
+    const keyA = innerKey.reduce((obj, i) => obj[i], a); // get the value of the inner key
+    const keyB = innerKey.reduce((obj, i) => obj[i], b); // get the value of the inner key
+    if (keyA < keyB) {
+      return ordering === "ascending" ? -1 : 1;
+    }
+    if (keyA > keyB) {
+      return ordering === "ascending" ? 1 : -1;
+    }
+    return 0;
+  });
+};
+
+export const checkDuplicates = (array: any[]) => new Set(array).size !== array.length;
diff --git a/app/helpers/attachment.helper.ts b/app/helpers/attachment.helper.ts
new file mode 100644
index 000000000..24cfb2c49
--- /dev/null
+++ b/app/helpers/attachment.helper.ts
@@ -0,0 +1,22 @@
+export const getFileExtension = (filename: string) =>
+  filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2);
+
+export const getFileName = (fileName: string) => {
+  const dotIndex = fileName.lastIndexOf(".");
+
+  const nameWithoutExtension = fileName.substring(0, dotIndex);
+
+  return nameWithoutExtension;
+};
+
+export const convertBytesToSize = (bytes: number) => {
+  let size;
+
+  if (bytes < 1024 * 1024) {
+    size = Math.round(bytes / 1024) + " KB";
+  } else {
+    size = Math.round(bytes / (1024 * 1024)) + " MB";
+  }
+
+  return size;
+};
diff --git a/app/helpers/calendar.helper.ts b/app/helpers/calendar.helper.ts
new file mode 100644
index 000000000..ea553e170
--- /dev/null
+++ b/app/helpers/calendar.helper.ts
@@ -0,0 +1,161 @@
+export const startOfWeek = (date: Date) => {
+  const startOfMonthDate = new Date(date.getFullYear(), date.getMonth(), 1);
+  const dayOfWeek = startOfMonthDate.getDay() % 7;
+  const startOfWeekDate = new Date(
+    startOfMonthDate.getFullYear(),
+    startOfMonthDate.getMonth(),
+    startOfMonthDate.getDate() - dayOfWeek
+  );
+  const timezoneOffset = startOfMonthDate.getTimezoneOffset();
+  const timezoneOffsetMilliseconds = timezoneOffset * 60 * 1000;
+  const startOfWeekAdjusted = new Date(startOfWeekDate.getTime() - timezoneOffsetMilliseconds);
+  return startOfWeekAdjusted;
+};
+
+export const lastDayOfWeek = (date: Date) => {
+  const lastDayOfPreviousMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+  const dayOfWeek = lastDayOfPreviousMonth.getDay() % 7;
+  const daysUntilEndOfWeek = 6 - dayOfWeek;
+  const lastDayOfWeekDate = new Date(
+    lastDayOfPreviousMonth.getFullYear(),
+    lastDayOfPreviousMonth.getMonth(),
+    lastDayOfPreviousMonth.getDate() + daysUntilEndOfWeek
+  );
+  const timezoneOffset = lastDayOfPreviousMonth.getTimezoneOffset();
+  const timezoneOffsetMilliseconds = timezoneOffset * 60 * 1000;
+  const lastDayOfWeekAdjusted = new Date(lastDayOfWeekDate.getTime() - timezoneOffsetMilliseconds);
+  return lastDayOfWeekAdjusted;
+};
+
+export const getCurrentWeekStartDate = (date: Date) => {
+  const today = new Date(date);
+  const dayOfWeek = today.getDay();
+  const startOfWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - dayOfWeek);
+  const timezoneOffset = startOfWeek.getTimezoneOffset();
+  const timezoneOffsetMilliseconds = timezoneOffset * 60 * 1000;
+  const startOfWeekAdjusted = new Date(startOfWeek.getTime() - timezoneOffsetMilliseconds);
+  return startOfWeekAdjusted;
+};
+
+export const getCurrentWeekEndDate = (date: Date) => {
+  const today = new Date(date);
+  const dayOfWeek = today.getDay();
+  const endOfWeek = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + (6 - dayOfWeek)
+  );
+  const timezoneOffset = endOfWeek.getTimezoneOffset();
+  const timezoneOffsetMilliseconds = timezoneOffset * 60 * 1000;
+  const endOfWeekAdjusted = new Date(endOfWeek.getTime() - timezoneOffsetMilliseconds);
+  return endOfWeekAdjusted;
+};
+
+export const eachDayOfInterval = ({ start, end }: { start: Date; end: Date }) => {
+  const days = [];
+  const current = new Date(start);
+  while (current <= end) {
+    days.push(new Date(current));
+    current.setDate(current.getDate() + 1);
+  }
+  return days;
+};
+
+export const weekDayInterval = ({ start, end }: { start: Date; end: Date }) => {
+  const dates = [];
+  const currentDate = new Date(start);
+  const endDate = new Date(end);
+  while (currentDate <= endDate) {
+    const dayOfWeek = currentDate.getDay();
+    if (dayOfWeek !== 0 && dayOfWeek !== 6) {
+      dates.push(new Date(currentDate));
+    }
+    currentDate.setDate(currentDate.getDate() + 1);
+  }
+  return dates;
+};
+
+export const formatDate = (date: Date, format: string): string => {
+  const day = date.getDate();
+  const month = date.getMonth() + 1;
+  const year = date.getFullYear();
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const seconds = date.getSeconds();
+  const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+  const monthsOfYear = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+
+  const formattedDate = format
+    .replace("dd", day.toString().padStart(2, "0"))
+    .replace("d", day.toString())
+    .replace("eee", daysOfWeek[date.getDay()])
+    .replace("Month", monthsOfYear[month - 1])
+    .replace("yyyy", year.toString())
+    .replace("yyy", year.toString().slice(-3))
+    .replace("hh", hours.toString().padStart(2, "0"))
+    .replace("mm", minutes.toString().padStart(2, "0"))
+    .replace("ss", seconds.toString().padStart(2, "0"));
+
+  return formattedDate;
+};
+
+export const subtractMonths = (date: Date, numMonths: number) => {
+  const result = new Date(date);
+  result.setMonth(result.getMonth() - numMonths);
+  return result;
+};
+
+export const addMonths = (date: Date, numMonths: number) => {
+  const result = new Date(date);
+  result.setMonth(result.getMonth() + numMonths);
+  return result;
+};
+
+export const updateDateWithYear = (yearString: string, date: Date) => {
+  const year = parseInt(yearString);
+  const month = date.getMonth();
+  const day = date.getDate();
+  return new Date(year, month, day);
+};
+
+export const updateDateWithMonth = (monthString: string, date: Date) => {
+  const month = parseInt(monthString) - 1;
+  const year = date.getFullYear();
+  const day = date.getDate();
+  return new Date(year, month, day);
+};
+
+export const isSameMonth = (monthString: string, date: Date) => {
+  const month = parseInt(monthString) - 1;
+  return month === date.getMonth();
+};
+
+export const isSameYear = (yearString: string, date: Date) => {
+  const year = parseInt(yearString);
+  return year === date.getFullYear();
+};
+
+export const addSevenDaysToDate = (date: Date) => {
+  const currentDate = new Date(date);
+  const newDate = new Date(currentDate.setDate(currentDate.getDate() + 7));
+  return newDate;
+};
+
+export const subtract7DaysToDate = (date: Date) => {
+  const currentDate = new Date(date);
+  const newDate = new Date(currentDate.getTime() - 7 * 24 * 60 * 60 * 1000);
+  return newDate;
+};
diff --git a/app/helpers/common.helper.ts b/app/helpers/common.helper.ts
new file mode 100644
index 000000000..887fe8052
--- /dev/null
+++ b/app/helpers/common.helper.ts
@@ -0,0 +1,38 @@
+export const debounce = (func: any, wait: number, immediate: boolean = false) => {
+  let timeout: any;
+
+  return function executedFunction(...args: any) {
+    const later = () => {
+      timeout = null;
+      if (!immediate) func(...args);
+    };
+
+    const callNow = immediate && !timeout;
+
+    clearTimeout(timeout);
+
+    timeout = setTimeout(later, wait);
+
+    if (callNow) func(...args);
+  };
+};
+
+export const getRandomEmoji = () => {
+  const emojis = [
+    "8986",
+    "9200",
+    "128204",
+    "127773",
+    "127891",
+    "127947",
+    "128076",
+    "128077",
+    "128187",
+    "128188",
+    "128512",
+    "128522",
+    "128578",
+  ];
+
+  return emojis[Math.floor(Math.random() * emojis.length)];
+};
diff --git a/app/helpers/date-time.helper.ts b/app/helpers/date-time.helper.ts
new file mode 100644
index 000000000..65789fd2e
--- /dev/null
+++ b/app/helpers/date-time.helper.ts
@@ -0,0 +1,212 @@
+export const renderDateFormat = (date: string | Date | null) => {
+  if (!date) return "N/A";
+
+  var d = new Date(date),
+    month = "" + (d.getMonth() + 1),
+    day = "" + d.getDate(),
+    year = d.getFullYear();
+
+  if (month.length < 2) month = "0" + month;
+  if (day.length < 2) day = "0" + day;
+
+  return [year, month, day].join("-");
+};
+
+export const renderShortNumericDateFormat = (date: string | Date) =>
+  new Date(date).toLocaleDateString("en-UK", {
+    day: "numeric",
+    month: "short",
+  });
+
+export const findHowManyDaysLeft = (date: string | Date) => {
+  const today = new Date();
+  const eventDate = new Date(date);
+  const timeDiff = Math.abs(eventDate.getTime() - today.getTime());
+  return Math.ceil(timeDiff / (1000 * 3600 * 24));
+};
+
+export const getDatesInRange = (startDate: Date, endDate: Date) => {
+  const date = new Date(startDate.getTime());
+  const dates = [];
+  while (date <= endDate) {
+    dates.push(new Date(date));
+    date.setDate(date.getDate() + 1);
+  }
+  return dates;
+};
+
+export const timeAgo = (time: any) => {
+  switch (typeof time) {
+    case "number":
+      break;
+    case "string":
+      time = +new Date(time);
+      break;
+    case "object":
+      if (time.constructor === Date) time = time.getTime();
+      break;
+    default:
+      time = +new Date();
+  }
+
+  var time_formats = [
+    [60, "seconds", 1], // 60
+    [120, "1 minute ago", "1 minute from now"], // 60*2
+    [3600, "minutes", 60], // 60*60, 60
+    [7200, "1 hour ago", "1 hour from now"], // 60*60*2
+    [86400, "hours", 3600], // 60*60*24, 60*60
+    [172800, "Yesterday", "Tomorrow"], // 60*60*24*2
+    [604800, "days", 86400], // 60*60*24*7, 60*60*24
+    [1209600, "Last week", "Next week"], // 60*60*24*7*4*2
+    [2419200, "weeks", 604800], // 60*60*24*7*4, 60*60*24*7
+    [4838400, "Last month", "Next month"], // 60*60*24*7*4*2
+    [29030400, "months", 2419200], // 60*60*24*7*4*12, 60*60*24*7*4
+    [58060800, "Last year", "Next year"], // 60*60*24*7*4*12*2
+    [2903040000, "years", 29030400], // 60*60*24*7*4*12*100, 60*60*24*7*4*12
+    [5806080000, "Last century", "Next century"], // 60*60*24*7*4*12*100*2
+    [58060800000, "centuries", 2903040000], // 60*60*24*7*4*12*100*20, 60*60*24*7*4*12*100
+  ];
+
+  var seconds = (+new Date() - time) / 1000,
+    token = "ago",
+    list_choice = 1;
+
+  if (seconds == 0) {
+    return "Just now";
+  }
+  if (seconds < 0) {
+    seconds = Math.abs(seconds);
+    token = "from now";
+    list_choice = 2;
+  }
+  var i = 0,
+    format;
+  while ((format = time_formats[i++]))
+    if (seconds < format[0]) {
+      if (typeof format[2] == "string") return format[list_choice];
+      else return Math.floor(seconds / format[2]) + " " + format[1] + " " + token;
+    }
+  return time;
+};
+
+export const getDateRangeStatus = (
+  startDate: string | null | undefined,
+  endDate: string | null | undefined
+) => {
+  if (!startDate || !endDate) return "draft";
+
+  const today = renderDateFormat(new Date());
+  const now = new Date(today);
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+
+  if (start <= now && end >= now) {
+    return "current";
+  } else if (start > now) {
+    return "upcoming";
+  } else {
+    return "completed";
+  }
+};
+
+export const renderShortDateWithYearFormat = (date: string | Date) => {
+  if (!date || date === "") return null;
+
+  date = new Date(date);
+
+  const months = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+  const day = date.getDate();
+  const month = months[date.getMonth()];
+  const year = date.getFullYear();
+  return isNaN(date.getTime()) ? "N/A" : ` ${month} ${day}, ${year}`;
+};
+
+export const renderShortDate = (date: string | Date) => {
+  if (!date || date === "") return null;
+
+  date = new Date(date);
+
+  const months = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+  const day = date.getDate();
+  const month = months[date.getMonth()];
+  return isNaN(date.getTime()) ? "N/A" : `${day} ${month}`;
+};
+
+export const renderShortTime = (date: string | Date) => {
+  if (!date || date === "") return null;
+
+  date = new Date(date);
+
+  const hours = date.getHours();
+  let minutes: any = date.getMinutes();
+
+  // Add leading zero to single-digit minutes
+  if (minutes < 10) {
+    minutes = "0" + minutes;
+  }
+
+  return hours + ":" + minutes;
+};
+
+export const isDateRangeValid = (startDate: string, endDate: string) =>
+  new Date(startDate) < new Date(endDate);
+
+export const renderLongDateFormat = (dateString: string) => {
+  const date = new Date(dateString);
+  const day = date.getDate();
+  const year = date.getFullYear();
+  const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+  const monthIndex = date.getMonth();
+  const monthName = monthNames[monthIndex];
+  const suffixes = ["st", "nd", "rd", "th"];
+  let suffix = "";
+  if (day === 1 || day === 21 || day === 31) {
+    suffix = suffixes[0];
+  } else if (day === 2 || day === 22) {
+    suffix = suffixes[1];
+  } else if (day === 3 || day === 23) {
+    suffix = suffixes[2];
+  } else {
+    suffix = suffixes[3];
+  }
+  return `${day}${suffix} ${monthName} ${year}`;
+};
diff --git a/app/helpers/state.helper.ts b/app/helpers/state.helper.ts
new file mode 100644
index 000000000..7229957d0
--- /dev/null
+++ b/app/helpers/state.helper.ts
@@ -0,0 +1,18 @@
+// types
+import { IState, StateResponse } from "types";
+
+export const orderStateGroups = (unorderedStateGroups: StateResponse) =>
+  Object.assign(
+    { backlog: [], unstarted: [], started: [], completed: [], cancelled: [] },
+    unorderedStateGroups
+  );
+
+export const getStatesList = (stateGroups: any): IState[] => {
+  // order the unordered state groups first
+  const orderedStateGroups = orderStateGroups(stateGroups);
+
+  // extract states from the groups and return them
+  return Object.keys(orderedStateGroups)
+    .map((group) => [...orderedStateGroups[group].map((state: IState) => state)])
+    .flat();
+};
diff --git a/app/helpers/string.helper.ts b/app/helpers/string.helper.ts
new file mode 100644
index 000000000..ebb88f4df
--- /dev/null
+++ b/app/helpers/string.helper.ts
@@ -0,0 +1,89 @@
+export const addSpaceIfCamelCase = (str: string) => str.replace(/([a-z])([A-Z])/g, "$1 $2");
+
+export const replaceUnderscoreIfSnakeCase = (str: string) => str.replace(/_/g, " ");
+
+export const capitalizeFirstLetter = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
+
+export const truncateText = (str: string, length: number) => {
+  if (!str || str === "") return "";
+
+  return str.length > length ? `${str.substring(0, length)}...` : str;
+};
+
+export const createSimilarString = (str: string) => {
+  const shuffled = str
+    .split("")
+    .sort(() => Math.random() - 0.5)
+    .join("");
+
+  return shuffled;
+};
+
+const fallbackCopyTextToClipboard = (text: string) => {
+  var textArea = document.createElement("textarea");
+  textArea.value = text;
+
+  // Avoid scrolling to bottom
+  textArea.style.top = "0";
+  textArea.style.left = "0";
+  textArea.style.position = "fixed";
+
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+
+  try {
+    // FIXME: Even though we are using this as a fallback, execCommand is deprecated 👎. We should find a better way to do this.
+    // https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
+    var successful = document.execCommand("copy");
+  } catch (err) {}
+
+  document.body.removeChild(textArea);
+};
+
+export const copyTextToClipboard = async (text: string) => {
+  if (!navigator.clipboard) {
+    fallbackCopyTextToClipboard(text);
+    return;
+  }
+  await navigator.clipboard.writeText(text);
+};
+
+const wordsVector = (str: string) => {
+  const words = str.split(" ");
+  const vector: any = {};
+  for (let i = 0; i < words.length; i++) {
+    const word = words[i];
+    if (vector[word]) {
+      vector[word] += 1;
+    } else {
+      vector[word] = 1;
+    }
+  }
+  return vector;
+};
+
+export const cosineSimilarity = (a: string, b: string) => {
+  const vectorA = wordsVector(a.trim());
+  const vectorB = wordsVector(b.trim());
+
+  const vectorAKeys = Object.keys(vectorA);
+  const vectorBKeys = Object.keys(vectorB);
+
+  const union = vectorAKeys.concat(vectorBKeys);
+
+  let dotProduct = 0;
+  let magnitudeA = 0;
+  let magnitudeB = 0;
+
+  for (let i = 0; i < union.length; i++) {
+    const key = union[i];
+    const valueA = vectorA[key] || 0;
+    const valueB = vectorB[key] || 0;
+    dotProduct += valueA * valueB;
+    magnitudeA += valueA * valueA;
+    magnitudeB += valueB * valueB;
+  }
+
+  return dotProduct / Math.sqrt(magnitudeA * magnitudeB);
+};
diff --git a/app/helpers/theme.helper.ts b/app/helpers/theme.helper.ts
new file mode 100644
index 000000000..d3d76f3e5
--- /dev/null
+++ b/app/helpers/theme.helper.ts
@@ -0,0 +1,35 @@
+export const hexToRgb = (hex: string) => {
+  hex = hex.toLowerCase();
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)].join(",")
+    : null;
+};
+
+export const applyTheme = (palette: string, isDarkPalette: boolean) => {
+  const values: string[] = [];
+  palette.split(",").map((color: string) => {
+    const cssVarColor = hexToRgb(color);
+    if (cssVarColor) values.push(cssVarColor);
+  });
+
+  const cssVars = [
+    "--color-bg-base",
+    "--color-bg-surface-1",
+    "--color-bg-surface-2",
+    "--color-border",
+    "--color-bg-sidebar",
+    "--color-accent",
+    "--color-text-base",
+    "--color-text-secondary",
+    "color-scheme",
+  ];
+
+  values.push(isDarkPalette ? "dark" : "light");
+
+  cssVars.forEach((cssVar, i) =>
+    document
+      .querySelector<HTMLElement>("[data-theme='custom']")
+      ?.style.setProperty(cssVar, values[i])
+  );
+};
diff --git a/app/hooks/use-debounce.tsx b/app/hooks/use-debounce.tsx
new file mode 100644
index 000000000..e8e57226b
--- /dev/null
+++ b/app/hooks/use-debounce.tsx
@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+
+const useDebounce = (value: any, milliSeconds: number) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, milliSeconds);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, milliSeconds]);
+
+  return debouncedValue;
+};
+
+export default useDebounce;
diff --git a/app/hooks/use-estimate-option.tsx b/app/hooks/use-estimate-option.tsx
new file mode 100644
index 000000000..37b42b9e9
--- /dev/null
+++ b/app/hooks/use-estimate-option.tsx
@@ -0,0 +1,44 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import estimatesService from "services/estimates.service";
+// hooks
+import useProjectDetails from "hooks/use-project-details";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
+// fetch-keys
+import { ESTIMATE_DETAILS } from "constants/fetch-keys";
+
+const useEstimateOption = (estimateKey?: number | null) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { projectDetails } = useProjectDetails();
+
+  const { data: estimateDetails, error: estimateDetailsError } = useSWR(
+    workspaceSlug && projectId && projectDetails && projectDetails?.estimate
+      ? ESTIMATE_DETAILS(projectDetails.estimate as string)
+      : null,
+    workspaceSlug && projectId && projectDetails && projectDetails.estimate
+      ? () =>
+          estimatesService.getEstimateDetails(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            projectDetails.estimate as string
+          )
+      : null
+  );
+
+  const estimateValue: any =
+    (estimateKey && estimateDetails?.points?.find((e) => e.key === estimateKey)?.value) ?? "None";
+
+  return {
+    isEstimateActive: projectDetails?.estimate ? true : false,
+    estimatePoints: orderArrayBy(estimateDetails?.points ?? [], "key"),
+    estimateValue,
+  };
+};
+
+export default useEstimateOption;
diff --git a/app/hooks/use-integration-popup.tsx b/app/hooks/use-integration-popup.tsx
new file mode 100644
index 000000000..03137a195
--- /dev/null
+++ b/app/hooks/use-integration-popup.tsx
@@ -0,0 +1,52 @@
+import { useRef, useState } from "react";
+
+import { useRouter } from "next/router";
+
+const useIntegrationPopup = (provider: string | undefined) => {
+  const [authLoader, setAuthLoader] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const providerUrls: { [key: string]: string } = {
+    github: `https://github.com/apps/${
+      process.env.NEXT_PUBLIC_GITHUB_APP_NAME
+    }/installations/new?state=${workspaceSlug as string}`,
+    slack: "",
+  };
+  const popup = useRef<any>();
+
+  const checkPopup = () => {
+    const check = setInterval(() => {
+      if (!popup || popup.current.closed || popup.current.closed === undefined) {
+        clearInterval(check);
+        setAuthLoader(false);
+      }
+    }, 1000);
+  };
+
+  const openPopup = () => {
+    if (!provider) return;
+
+    const width = 600,
+      height = 600;
+    const left = window.innerWidth / 2 - width / 2;
+    const top = window.innerHeight / 2 - height / 2;
+    const url = providerUrls[provider];
+
+    return window.open(url, "", `width=${width}, height=${height}, top=${top}, left=${left}`);
+  };
+
+  const startAuth = () => {
+    popup.current = openPopup();
+    checkPopup();
+    setAuthLoader(true);
+  };
+
+  return {
+    startAuth,
+    isConnecting: authLoader,
+  };
+};
+
+export default useIntegrationPopup;
diff --git a/app/hooks/use-issue-properties.tsx b/app/hooks/use-issue-properties.tsx
new file mode 100644
index 000000000..163dcdcd2
--- /dev/null
+++ b/app/hooks/use-issue-properties.tsx
@@ -0,0 +1,104 @@
+import { useState, useEffect, useCallback } from "react";
+import useSWR from "swr";
+// services
+import issueServices from "services/issues.service";
+// hooks
+import useUser from "hooks/use-user";
+// types
+import { IssuePriorities, Properties } from "types";
+
+const initialValues: Properties = {
+  assignee: true,
+  due_date: false,
+  key: true,
+  labels: false,
+  priority: false,
+  state: true,
+  sub_issue_count: false,
+  attachment_count: false,
+  link: false,
+  estimate: false,
+};
+
+const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
+  const [properties, setProperties] = useState<Properties>(initialValues);
+
+  const { user } = useUser();
+
+  const { data: issueProperties, mutate: mutateIssueProperties } = useSWR<IssuePriorities>(
+    workspaceSlug && projectId
+      ? `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-properties/`
+      : null,
+    workspaceSlug && projectId
+      ? () => issueServices.getIssueProperties(workspaceSlug, projectId)
+      : null
+  );
+
+  useEffect(() => {
+    if (!issueProperties || !workspaceSlug || !projectId || !user) return;
+
+    setProperties({ ...initialValues, ...issueProperties.properties });
+
+    if (Object.keys(issueProperties).length === 0)
+      issueServices.createIssueProperties(workspaceSlug, projectId, {
+        properties: { ...initialValues },
+        user: user.id,
+      });
+    else if (Object.keys(issueProperties?.properties).length === 0)
+      issueServices.patchIssueProperties(workspaceSlug, projectId, issueProperties.id, {
+        properties: { ...initialValues },
+        user: user.id,
+      });
+  }, [issueProperties, workspaceSlug, projectId, user]);
+
+  const updateIssueProperties = useCallback(
+    (key: keyof Properties) => {
+      if (!workspaceSlug || !user) return;
+
+      setProperties((prev) => ({ ...prev, [key]: !prev[key] }));
+
+      if (issueProperties && projectId) {
+        mutateIssueProperties(
+          (prev) =>
+            ({
+              ...prev,
+              properties: { ...prev?.properties, [key]: !prev?.properties?.[key] },
+            } as IssuePriorities),
+          false
+        );
+        if (Object.keys(issueProperties).length > 0) {
+          issueServices.patchIssueProperties(workspaceSlug, projectId, issueProperties.id, {
+            properties: {
+              ...issueProperties.properties,
+              [key]: !issueProperties.properties[key],
+            },
+            user: user.id,
+          });
+        } else {
+          issueServices.createIssueProperties(workspaceSlug, projectId, {
+            properties: { ...initialValues },
+            user: user.id,
+          });
+        }
+      }
+    },
+    [workspaceSlug, projectId, issueProperties, user, mutateIssueProperties]
+  );
+
+  const newProperties: Properties = {
+    assignee: properties.assignee,
+    due_date: properties.due_date,
+    key: properties.key,
+    labels: properties.labels,
+    priority: properties.priority,
+    state: properties.state,
+    sub_issue_count: properties.sub_issue_count,
+    attachment_count: properties.attachment_count,
+    link: properties.link,
+    estimate: properties.estimate,
+  };
+
+  return [newProperties, updateIssueProperties] as const;
+};
+
+export default useIssuesProperties;
diff --git a/app/hooks/use-issues-view.tsx b/app/hooks/use-issues-view.tsx
new file mode 100644
index 000000000..cb3ddb43e
--- /dev/null
+++ b/app/hooks/use-issues-view.tsx
@@ -0,0 +1,161 @@
+import { useContext, useMemo } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// contexts
+import { issueViewContext } from "contexts/issue-view.context";
+// services
+import issuesService from "services/issues.service";
+import cyclesService from "services/cycles.service";
+import modulesService from "services/modules.service";
+import stateService from "services/state.service";
+// helpers
+import { getStatesList } from "helpers/state.helper";
+// types
+import type { IIssue } from "types";
+// fetch-keys
+import {
+  CYCLE_ISSUES_WITH_PARAMS,
+  MODULE_ISSUES_WITH_PARAMS,
+  PROJECT_ISSUES_LIST_WITH_PARAMS,
+  STATE_LIST,
+} from "constants/fetch-keys";
+
+const useIssuesView = () => {
+  const {
+    issueView,
+    groupByProperty,
+    setGroupByProperty,
+    orderBy,
+    setOrderBy,
+    showEmptyGroups,
+    setShowEmptyGroups,
+    filters,
+    setFilters,
+    resetFilterToDefault,
+    setNewFilterDefaultView,
+    setIssueView,
+  } = useContext(issueViewContext);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const params: any = {
+    order_by: orderBy,
+    group_by: groupByProperty,
+    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
+    state: filters?.state ? filters?.state.join(",") : undefined,
+    priority: filters?.priority ? filters?.priority.join(",") : undefined,
+    type: filters?.type ? filters?.type : undefined,
+    labels: filters?.labels ? filters?.labels.join(",") : undefined,
+    issue__assignees__id: filters?.issue__assignees__id
+      ? filters?.issue__assignees__id.join(",")
+      : undefined,
+    issue__labels__id: filters?.issue__labels__id
+      ? filters?.issue__labels__id.join(",")
+      : undefined,
+    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
+  };
+
+  const { data: projectIssues } = useSWR(
+    workspaceSlug && projectId && params
+      ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params)
+      : null,
+    workspaceSlug && projectId && params
+      ? () =>
+          issuesService.getIssuesWithParams(workspaceSlug as string, projectId as string, params)
+      : null
+  );
+
+  const { data: cycleIssues } = useSWR(
+    workspaceSlug && projectId && cycleId && params
+      ? CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params)
+      : null,
+    workspaceSlug && projectId && cycleId && params
+      ? () =>
+          cyclesService.getCycleIssuesWithParams(
+            workspaceSlug as string,
+            projectId as string,
+            cycleId as string,
+            params
+          )
+      : null
+  );
+
+  const { data: moduleIssues } = useSWR(
+    workspaceSlug && projectId && moduleId && params
+      ? MODULE_ISSUES_WITH_PARAMS(moduleId as string, params)
+      : null,
+    workspaceSlug && projectId && moduleId && params
+      ? () =>
+          modulesService.getModuleIssuesWithParams(
+            workspaceSlug as string,
+            projectId as string,
+            moduleId as string,
+            params
+          )
+      : null
+  );
+
+  const { data: states } = useSWR(
+    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
+      : null
+  );
+  const statesList = getStatesList(states ?? {});
+  const stateIds = statesList.map((state) => state.id);
+
+  const emptyStatesObject: { [key: string]: [] } = {};
+  for (let i = 0; i < stateIds.length; i++) {
+    emptyStatesObject[stateIds[i]] = [];
+  }
+
+  const groupedByIssues:
+    | {
+        [key: string]: IIssue[];
+      }
+    | undefined = useMemo(() => {
+    const issuesToGroup = cycleId ? cycleIssues : moduleId ? moduleIssues : projectIssues;
+
+    if (Array.isArray(issuesToGroup)) return { allIssues: issuesToGroup };
+    if (groupByProperty === "state")
+      return issuesToGroup ? Object.assign(emptyStatesObject, issuesToGroup) : undefined;
+
+    return issuesToGroup;
+  }, [
+    projectIssues,
+    cycleIssues,
+    moduleIssues,
+    groupByProperty,
+    cycleId,
+    moduleId,
+    emptyStatesObject,
+  ]);
+
+  const isEmpty =
+    Object.values(groupedByIssues ?? {}).every((group) => group.length === 0) ||
+    Object.keys(groupedByIssues ?? {}).length === 0;
+
+  return {
+    groupedByIssues,
+    issueView,
+    groupByProperty,
+    setGroupByProperty,
+    orderBy,
+    setOrderBy,
+    showEmptyGroups,
+    setShowEmptyGroups,
+    filters,
+    setFilters,
+    params,
+    isNotEmpty: !isEmpty,
+    resetFilterToDefault,
+    setNewFilterDefaultView,
+    setIssueView,
+  } as const;
+};
+
+export default useIssuesView;
diff --git a/app/hooks/use-issues.tsx b/app/hooks/use-issues.tsx
new file mode 100644
index 000000000..33e099676
--- /dev/null
+++ b/app/hooks/use-issues.tsx
@@ -0,0 +1,22 @@
+import useSWR from "swr";
+// services
+import userService from "services/user.service";
+// types
+import type { IIssue } from "types";
+// fetch-keys
+import { USER_ISSUE } from "constants/fetch-keys";
+
+const useIssues = (workspaceSlug: string | undefined) => {
+  // API Fetching
+  const { data: myIssues, mutate: mutateMyIssues } = useSWR<IIssue[]>(
+    workspaceSlug ? USER_ISSUE(workspaceSlug as string) : null,
+    workspaceSlug ? () => userService.userIssues(workspaceSlug as string) : null
+  );
+
+  return {
+    myIssues: myIssues,
+    mutateMyIssues,
+  };
+};
+
+export default useIssues;
diff --git a/app/hooks/use-local-storage.tsx b/app/hooks/use-local-storage.tsx
new file mode 100644
index 000000000..0eb7e20f3
--- /dev/null
+++ b/app/hooks/use-local-storage.tsx
@@ -0,0 +1,49 @@
+import { useState, useEffect, useCallback } from "react";
+
+const getValueFromLocalStorage = (key: string, defaultValue: any) => {
+  if (typeof window === undefined || typeof window === "undefined") return defaultValue;
+  try {
+    const item = window.localStorage.getItem(key);
+    return item ? JSON.parse(item) : defaultValue;
+  } catch (error) {
+    window.localStorage.removeItem(key);
+    return defaultValue;
+  }
+};
+
+const useLocalStorage = <T,>(key: string, initialValue: T) => {
+  const [storedValue, setStoredValue] = useState<T | null>(() =>
+    getValueFromLocalStorage(key, initialValue)
+  );
+
+  const setValue = useCallback(
+    (value: T) => {
+      window.localStorage.setItem(key, JSON.stringify(value));
+      setStoredValue(value);
+      window.dispatchEvent(new Event(`local-storage:${key}`));
+    },
+    [key]
+  );
+
+  const clearValue = useCallback(() => {
+    window.localStorage.removeItem(key);
+    setStoredValue(null);
+    window.dispatchEvent(new Event(`local-storage:${key}`));
+  }, [key]);
+
+  const reHydrate = useCallback(() => {
+    const data = getValueFromLocalStorage(key, initialValue);
+    setStoredValue(data);
+  }, [key, initialValue]);
+
+  useEffect(() => {
+    window.addEventListener(`local-storage:${key}`, reHydrate);
+    return () => {
+      window.removeEventListener(`local-storage:${key}`, reHydrate);
+    };
+  }, [key, reHydrate]);
+
+  return { storedValue, setValue, clearValue } as const;
+};
+
+export default useLocalStorage;
diff --git a/app/hooks/use-my-issues-filter.tsx b/app/hooks/use-my-issues-filter.tsx
new file mode 100644
index 000000000..9d26a7a60
--- /dev/null
+++ b/app/hooks/use-my-issues-filter.tsx
@@ -0,0 +1,127 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// services
+import stateService from "services/state.service";
+import userService from "services/user.service";
+// hooks
+import useUser from "hooks/use-user";
+// helpers
+import { groupBy } from "helpers/array.helper";
+import { getStatesList } from "helpers/state.helper";
+// types
+import { Properties, NestedKeyOf, IIssue } from "types";
+// fetch-keys
+import { STATE_LIST } from "constants/fetch-keys";
+// constants
+import { PRIORITIES } from "constants/project";
+
+const initialValues: Properties = {
+  assignee: true,
+  due_date: false,
+  key: true,
+  labels: true,
+  priority: false,
+  state: true,
+  sub_issue_count: false,
+  attachment_count: false,
+  link: false,
+  estimate: false,
+};
+
+// TODO: Refactor this logic
+const useMyIssuesProperties = (issues?: IIssue[]) => {
+  const [properties, setProperties] = useState<Properties>(initialValues);
+  const [groupByProperty, setGroupByProperty] = useState<NestedKeyOf<IIssue> | null>(null);
+
+  // FIXME: where this hook is used we may not have project id in the url
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { user } = useUser();
+
+  const { data: stateGroups } = useSWR(
+    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
+      : null
+  );
+  const states = getStatesList(stateGroups ?? {});
+
+  useEffect(() => {
+    if (!user) return;
+    setProperties({ ...initialValues, ...user.my_issues_prop?.properties });
+    setGroupByProperty(user.my_issues_prop?.groupBy ?? null);
+  }, [user]);
+
+  const groupedByIssues: {
+    [key: string]: IIssue[];
+  } = {
+    ...(groupByProperty === "state_detail.name"
+      ? Object.fromEntries(
+          states
+            ?.sort((a, b) => a.sequence - b.sequence)
+            ?.map((state) => [
+              state.name,
+              issues?.filter((issue) => issue.state === state.name) ?? [],
+            ]) ?? []
+        )
+      : groupByProperty === "priority"
+      ? Object.fromEntries(
+          PRIORITIES.map((priority) => [
+            priority,
+            issues?.filter((issue) => issue.priority === priority) ?? [],
+          ])
+        )
+      : {}),
+    ...groupBy(issues ?? [], groupByProperty ?? ""),
+  };
+
+  const setMyIssueProperty = (key: keyof Properties) => {
+    if (!user) return;
+    userService.updateUser({ my_issues_prop: { properties, groupBy: groupByProperty } });
+    setProperties((prevData) => ({
+      ...prevData,
+      [key]: !prevData[key],
+    }));
+    localStorage.setItem(
+      "my_issues_prop",
+      JSON.stringify({
+        properties: {
+          ...properties,
+          [key]: !properties[key],
+        },
+        groupBy: groupByProperty,
+      })
+    );
+  };
+
+  const setMyIssueGroupByProperty = (groupByProperty: NestedKeyOf<IIssue> | null) => {
+    if (!user) return;
+    userService.updateUser({ my_issues_prop: { properties, groupBy: groupByProperty } });
+    setGroupByProperty(groupByProperty);
+    localStorage.setItem(
+      "my_issues_prop",
+      JSON.stringify({ properties, groupBy: groupByProperty })
+    );
+  };
+
+  useEffect(() => {
+    const viewProps = localStorage.getItem("my_issues_prop");
+    if (viewProps) {
+      const { properties, groupBy } = JSON.parse(viewProps);
+      setProperties(properties);
+      setGroupByProperty(groupBy);
+    }
+  }, []);
+
+  return {
+    filteredIssues: groupedByIssues,
+    groupByProperty,
+    properties,
+    setMyIssueProperty,
+    setMyIssueGroupByProperty,
+  } as const;
+};
+
+export default useMyIssuesProperties;
diff --git a/app/hooks/use-outside-click-detector.tsx b/app/hooks/use-outside-click-detector.tsx
new file mode 100644
index 000000000..f20666f8c
--- /dev/null
+++ b/app/hooks/use-outside-click-detector.tsx
@@ -0,0 +1,19 @@
+import React, { useEffect } from "react";
+
+const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
+  const handleClick = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("click", handleClick);
+
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  });
+};
+
+export default useOutsideClickDetector;
diff --git a/app/hooks/use-project-details.tsx b/app/hooks/use-project-details.tsx
new file mode 100644
index 000000000..477c82587
--- /dev/null
+++ b/app/hooks/use-project-details.tsx
@@ -0,0 +1,32 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import projectService from "services/project.service";
+// fetch-keys
+import { PROJECT_DETAILS } from "constants/fetch-keys";
+
+const useProjectDetails = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    data: projectDetails,
+    error: projectDetailsError,
+    mutate: mutateProjectDetails,
+  } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  return {
+    projectDetails,
+    projectDetailsError,
+    mutateProjectDetails,
+  };
+};
+
+export default useProjectDetails;
diff --git a/app/hooks/use-project-members.tsx b/app/hooks/use-project-members.tsx
new file mode 100644
index 000000000..9764ade75
--- /dev/null
+++ b/app/hooks/use-project-members.tsx
@@ -0,0 +1,37 @@
+import useSWR from "swr";
+// services
+import projectService from "services/project.service";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+// hooks
+import useUser from "./use-user";
+
+const useProjectMembers = (workspaceSlug: string, projectId: string) => {
+  const { user } = useUser();
+  // fetching project members
+  const { data: members } = useSWR(PROJECT_MEMBERS(projectId), () =>
+    projectService.projectMembers(workspaceSlug, projectId)
+  );
+
+  const hasJoined = members?.some((item: any) => item.member.id === (user as any)?.id);
+
+  const isOwner = members?.some((item) => item.member.id === (user as any)?.id && item.role === 20);
+  const isMember = members?.some(
+    (item) => item.member.id === (user as any)?.id && item.role === 15
+  );
+  const isViewer = members?.some(
+    (item) => item.member.id === (user as any)?.id && item.role === 10
+  );
+  const isGuest = members?.some((item) => item.member.id === (user as any)?.id && item.role === 5);
+
+  return {
+    members,
+    hasJoined,
+    isOwner,
+    isMember,
+    isViewer,
+    isGuest,
+  };
+};
+
+export default useProjectMembers;
diff --git a/app/hooks/use-projects.tsx b/app/hooks/use-projects.tsx
new file mode 100644
index 000000000..6b4a8b413
--- /dev/null
+++ b/app/hooks/use-projects.tsx
@@ -0,0 +1,29 @@
+import useSWR from "swr";
+import { useRouter } from "next/router";
+// services
+import projectService from "services/project.service";
+// fetch-keys
+import { PROJECTS_LIST } from "constants/fetch-keys";
+
+const useProjects = () => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // api fetching
+  const { data: projects, mutate: mutateProjects } = useSWR(
+    workspaceSlug ? PROJECTS_LIST(workspaceSlug as string) : null,
+    workspaceSlug ? () => projectService.getProjects(workspaceSlug as string) : null
+  );
+
+  const recentProjects = projects
+    ?.sort((a, b) => Date.parse(`${a.updated_at}`) - Date.parse(`${b.updated_at}`))
+    .filter((_item, index) => index < 3);
+
+  return {
+    projects: projects || [],
+    recentProjects: recentProjects || [],
+    mutateProjects,
+  };
+};
+
+export default useProjects;
diff --git a/app/hooks/use-theme.tsx b/app/hooks/use-theme.tsx
new file mode 100644
index 000000000..81e9249da
--- /dev/null
+++ b/app/hooks/use-theme.tsx
@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { themeContext } from "contexts/theme.context";
+
+const useTheme = () => {
+  const themeContextData = useContext(themeContext);
+  return themeContextData;
+};
+
+export default useTheme;
diff --git a/app/hooks/use-timer.tsx b/app/hooks/use-timer.tsx
new file mode 100644
index 000000000..1edf4931a
--- /dev/null
+++ b/app/hooks/use-timer.tsx
@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+
+const TIMER = 30;
+
+const useTimer = (initialValue: number = TIMER) => {
+  const [timer, setTimer] = useState(initialValue);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimer((prev) => prev - 1);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return { timer, setTimer };
+};
+
+export default useTimer;
diff --git a/app/hooks/use-toast.tsx b/app/hooks/use-toast.tsx
new file mode 100644
index 000000000..6de3c104c
--- /dev/null
+++ b/app/hooks/use-toast.tsx
@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { toastContext } from "contexts/toast.context";
+
+const useToast = () => {
+  const toastContextData = useContext(toastContext);
+  return toastContextData;
+};
+
+export default useToast;
diff --git a/app/hooks/use-user.tsx b/app/hooks/use-user.tsx
new file mode 100644
index 000000000..e59cb32e5
--- /dev/null
+++ b/app/hooks/use-user.tsx
@@ -0,0 +1,13 @@
+import { useContext } from "react";
+
+// context
+import { UserContext } from "contexts/user.context";
+
+const useUser = () => {
+  // context
+  const contextData = useContext(UserContext);
+
+  return { ...contextData };
+};
+
+export default useUser;
diff --git a/app/hooks/use-workspace-details.tsx b/app/hooks/use-workspace-details.tsx
new file mode 100644
index 000000000..4a2f97626
--- /dev/null
+++ b/app/hooks/use-workspace-details.tsx
@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// services
+import workspaceService from "services/workspace.service";
+// fetch-keys
+import { WORKSPACE_DETAILS } from "constants/fetch-keys";
+
+const useWorkspaceDetails = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // Fetching Workspace Details
+  const {
+    data: workspaceDetails,
+    error: workspaceDetailsError,
+    mutate: mutateWorkspaceDetails,
+  } = useSWR(
+    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
+    workspaceSlug ? () => workspaceService.getWorkspace(workspaceSlug as string) : null
+  );
+
+  useEffect(() => {
+    if (workspaceDetailsError?.status === 404) {
+      router.push("/404");
+    } else if (workspaceDetailsError) {
+      router.push("/error");
+    }
+  }, [workspaceDetailsError, router]);
+
+  return {
+    workspaceDetails,
+    workspaceDetailsError,
+    mutateWorkspaceDetails,
+  };
+};
+
+export default useWorkspaceDetails;
diff --git a/app/hooks/use-workspace-members.tsx b/app/hooks/use-workspace-members.tsx
new file mode 100644
index 000000000..b41f4535d
--- /dev/null
+++ b/app/hooks/use-workspace-members.tsx
@@ -0,0 +1,43 @@
+import useSWR from "swr";
+// services
+import workspaceService from "services/workspace.service";
+// fetch-keys
+import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
+// hooks
+import useUser from "./use-user";
+
+const useWorkspaceMembers = (workspaceSlug?: string) => {
+  const { user } = useUser();
+
+  const { data: workspaceMembers, error: workspaceMemberErrors } = useSWR(
+    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug) : null,
+    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug) : null
+  );
+
+  const hasJoined = workspaceMembers?.some((item: any) => item.member.id === (user as any)?.id);
+
+  const isOwner = workspaceMembers?.some(
+    (item) => item.member.id === (user as any)?.id && item.role === 20
+  );
+  const isMember = workspaceMembers?.some(
+    (item) => item.member.id === (user as any)?.id && item.role === 15
+  );
+  const isViewer = workspaceMembers?.some(
+    (item) => item.member.id === (user as any)?.id && item.role === 10
+  );
+  const isGuest = workspaceMembers?.some(
+    (item) => item.member.id === (user as any)?.id && item.role === 5
+  );
+
+  return {
+    workspaceMembers,
+    workspaceMemberErrors,
+    hasJoined,
+    isOwner,
+    isMember,
+    isViewer,
+    isGuest,
+  };
+};
+
+export default useWorkspaceMembers;
diff --git a/app/hooks/use-workspaces.tsx b/app/hooks/use-workspaces.tsx
new file mode 100644
index 000000000..7e3c59690
--- /dev/null
+++ b/app/hooks/use-workspaces.tsx
@@ -0,0 +1,31 @@
+import useSWR from "swr";
+import { useRouter } from "next/router";
+// types
+import { IWorkspace } from "types";
+// services
+import workspaceService from "services/workspace.service";
+// constants
+import { USER_WORKSPACES } from "constants/fetch-keys";
+
+const useWorkspaces = () => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // API to fetch user information
+  const {
+    data = [],
+    error,
+    mutate,
+  } = useSWR<IWorkspace[]>(USER_WORKSPACES, () => workspaceService.userWorkspaces());
+  // active workspace
+  const activeWorkspace = data?.find((w) => w.slug === workspaceSlug);
+
+  return {
+    workspaces: data,
+    error,
+    activeWorkspace,
+    mutateWorkspaces: mutate,
+  };
+};
+
+export default useWorkspaces;
diff --git a/app/layouts/app-layout/app-header.tsx b/app/layouts/app-layout/app-header.tsx
new file mode 100644
index 000000000..e915ae4d6
--- /dev/null
+++ b/app/layouts/app-layout/app-header.tsx
@@ -0,0 +1,30 @@
+// icons
+import { Bars3Icon } from "@heroicons/react/24/outline";
+
+type Props = {
+  breadcrumbs?: JSX.Element;
+  left?: JSX.Element;
+  right?: JSX.Element;
+  setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => (
+  <div className="flex w-full flex-row items-center justify-between gap-y-4 border-b border-brand-base bg-brand-sidebar px-5 py-4">
+    <div className="flex items-center gap-2">
+      <div className="block md:hidden">
+        <button
+          type="button"
+          className="grid h-8 w-8 place-items-center rounded border border-brand-base"
+          onClick={() => setToggleSidebar((prevData) => !prevData)}
+        >
+          <Bars3Icon className="h-5 w-5" />
+        </button>
+      </div>
+      {breadcrumbs}
+      {left}
+    </div>
+    {right}
+  </div>
+);
+
+export default Header;
diff --git a/app/layouts/app-layout/app-sidebar.tsx b/app/layouts/app-layout/app-sidebar.tsx
new file mode 100644
index 000000000..5a311a00c
--- /dev/null
+++ b/app/layouts/app-layout/app-sidebar.tsx
@@ -0,0 +1,40 @@
+// hooks
+import useTheme from "hooks/use-theme";
+// components
+import {
+  WorkspaceHelpSection,
+  WorkspaceSidebarDropdown,
+  WorkspaceSidebarMenu,
+} from "components/workspace";
+import { ProjectSidebarList } from "components/project";
+
+export interface SidebarProps {
+  toggleSidebar: boolean;
+  setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) => {
+  // theme
+  const { collapsed: sidebarCollapse } = useTheme();
+
+  return (
+    <nav className="relative z-20 h-screen">
+      <div
+        className={`${sidebarCollapse ? "" : "w-auto md:w-[17rem]"} fixed inset-y-0 top-0 ${
+          toggleSidebar ? "left-0" : "-left-full md:left-0"
+        } flex h-full flex-col bg-brand-sidebar duration-300 md:relative`}
+      >
+        <div className="flex h-full flex-1 flex-col border-r border-brand-base">
+          <div className="flex h-full flex-1 flex-col">
+            <WorkspaceSidebarDropdown />
+            <WorkspaceSidebarMenu />
+            <ProjectSidebarList />
+            <WorkspaceHelpSection setSidebarActive={setToggleSidebar} />
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Sidebar;
diff --git a/app/layouts/app-layout/index.tsx b/app/layouts/app-layout/index.tsx
new file mode 100644
index 000000000..230683ed0
--- /dev/null
+++ b/app/layouts/app-layout/index.tsx
@@ -0,0 +1,166 @@
+import React, { FC, useState, useEffect } from "react";
+
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+import useSWR from "swr";
+
+// services
+import projectService from "services/project.service";
+// ui
+import { PrimaryButton, Spinner } from "components/ui";
+// icon
+import { LayerDiagonalIcon } from "components/icons";
+// components
+import { NotAuthorizedView, JoinProject } from "components/auth-screens";
+import { CommandPalette } from "components/command-palette";
+// local components
+import Container from "layouts/container";
+import AppSidebar from "layouts/app-layout/app-sidebar";
+import AppHeader from "layouts/app-layout/app-header";
+// types
+import { UserAuth } from "types";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+import SettingsNavbar from "layouts/settings-navbar";
+
+type Meta = {
+  title?: string | null;
+  description?: string | null;
+  image?: string | null;
+  url?: string | null;
+};
+
+type AppLayoutProps = {
+  meta?: Meta;
+  children: React.ReactNode;
+  noPadding?: boolean;
+  bg?: "primary" | "secondary";
+  noHeader?: boolean;
+  breadcrumbs?: JSX.Element;
+  left?: JSX.Element;
+  right?: JSX.Element;
+  settingsLayout?: boolean;
+  profilePage?: boolean;
+  memberType?: UserAuth;
+};
+
+const AppLayout: FC<AppLayoutProps> = ({
+  meta,
+  children,
+  noPadding = false,
+  bg = "primary",
+  noHeader = false,
+  breadcrumbs,
+  left,
+  right,
+  settingsLayout = false,
+  profilePage = false,
+  memberType,
+}) => {
+  // states
+  const [toggleSidebar, setToggleSidebar] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: projectMembers, mutate: projectMembersMutate } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null,
+    {
+      shouldRetryOnError: false,
+    }
+  );
+  // flags
+  const isMember =
+    !projectId ||
+    memberType?.isOwner ||
+    memberType?.isMember ||
+    memberType?.isViewer ||
+    memberType?.isGuest;
+
+  return (
+    <Container meta={meta}>
+      <CommandPalette />
+      <div className="flex h-screen w-full overflow-x-hidden">
+        <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
+        {settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? (
+          <NotAuthorizedView
+            actionButton={
+              (memberType?.isViewer || memberType?.isGuest) && projectId ? (
+                <Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
+                  <PrimaryButton className="flex items-center gap-1">
+                    <LayerDiagonalIcon height={16} width={16} color="white" /> Go to Issues
+                  </PrimaryButton>
+                </Link>
+              ) : (
+                (memberType?.isViewer || memberType?.isGuest) &&
+                workspaceSlug && (
+                  <Link href={`/${workspaceSlug}`}>
+                    <PrimaryButton className="flex items-center gap-1">
+                      <LayerDiagonalIcon height={16} width={16} color="white" /> Go to workspace
+                    </PrimaryButton>
+                  </Link>
+                )
+              )
+            }
+            type="project"
+          />
+        ) : (
+          <main className="flex h-screen w-full min-w-0 flex-col overflow-y-auto">
+            {!noHeader && (
+              <AppHeader
+                breadcrumbs={breadcrumbs}
+                left={left}
+                right={right}
+                setToggleSidebar={setToggleSidebar}
+              />
+            )}
+            {projectId && !projectMembers ? (
+              <div className="flex h-full w-full items-center justify-center">
+                <Spinner />
+              </div>
+            ) : isMember ? (
+              <div
+                className={`flex w-full flex-grow flex-col ${
+                  noPadding ? "" : settingsLayout ? "p-8 lg:px-28" : "p-8"
+                } ${
+                  bg === "primary"
+                    ? "bg-brand-base"
+                    : bg === "secondary"
+                    ? "bg-brand-base"
+                    : "bg-brand-base"
+                }`}
+              >
+                {settingsLayout && (
+                  <div className="mb-12 space-y-6">
+                    <div>
+                      <h3 className="text-3xl font-semibold text-brand-base">
+                        {profilePage ? "Profile" : projectId ? "Project" : "Workspace"} Settings
+                      </h3>
+                      <p className="mt-1 text-brand-secondary">
+                        {profilePage
+                          ? "This information will be visible to only you."
+                          : projectId
+                          ? "This information will be displayed to every member of the project."
+                          : "This information will be displayed to every member of the workspace."}
+                      </p>
+                    </div>
+                    <SettingsNavbar profilePage={profilePage} />
+                  </div>
+                )}
+                {children}
+              </div>
+            ) : (
+              <JoinProject />
+            )}
+          </main>
+        )}
+      </div>
+    </Container>
+  );
+};
+
+export default AppLayout;
diff --git a/app/layouts/auth-layout/index.ts b/app/layouts/auth-layout/index.ts
new file mode 100644
index 000000000..6790a6b16
--- /dev/null
+++ b/app/layouts/auth-layout/index.ts
@@ -0,0 +1,2 @@
+export * from "./project-authorization-wrapper";
+export * from "./workspace-authorization-wrapper";
diff --git a/app/layouts/auth-layout/project-authorization-wrapper.tsx b/app/layouts/auth-layout/project-authorization-wrapper.tsx
new file mode 100644
index 000000000..b9f718e15
--- /dev/null
+++ b/app/layouts/auth-layout/project-authorization-wrapper.tsx
@@ -0,0 +1,148 @@
+import { useState } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// contexts
+import { useProjectMyMembership, ProjectMemberProvider } from "contexts/project-member.context";
+// hooks
+import useIssuesView from "hooks/use-issues-view";
+// layouts
+import Container from "layouts/container";
+import AppHeader from "layouts/app-layout/app-header";
+import AppSidebar from "layouts/app-layout/app-sidebar";
+import SettingsNavbar from "layouts/settings-navbar";
+// components
+import { NotAuthorizedView, JoinProject } from "components/auth-screens";
+import { CommandPalette } from "components/command-palette";
+// ui
+import { PrimaryButton, Spinner } from "components/ui";
+// icons
+import { LayerDiagonalIcon } from "components/icons";
+
+type Meta = {
+  title?: string | null;
+  description?: string | null;
+  image?: string | null;
+  url?: string | null;
+};
+
+type Props = {
+  meta?: Meta;
+  children: React.ReactNode;
+  noPadding?: boolean;
+  noHeader?: boolean;
+  bg?: "primary" | "secondary";
+  breadcrumbs?: JSX.Element;
+  left?: JSX.Element;
+  right?: JSX.Element;
+};
+
+export const ProjectAuthorizationWrapper: React.FC<Props> = (props) => (
+  <ProjectMemberProvider>
+    <ProjectAuthorizationWrapped {...props} />
+  </ProjectMemberProvider>
+);
+
+const ProjectAuthorizationWrapped: React.FC<Props> = ({
+  meta,
+  children,
+  noPadding = false,
+  noHeader = false,
+  bg = "primary",
+  breadcrumbs,
+  left,
+  right,
+}) => {
+  const [toggleSidebar, setToggleSidebar] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { issueView } = useIssuesView();
+
+  const { loading, error, memberRole: memberType } = useProjectMyMembership();
+
+  const settingsLayout = router.pathname.includes("/settings");
+
+  return (
+    <Container meta={meta}>
+      <CommandPalette />
+      <div className="flex h-screen w-full overflow-x-hidden">
+        <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
+        {loading ? (
+          <div className="grid h-full w-full place-items-center p-4">
+            <div className="flex flex-col items-center gap-3 text-center">
+              <h3 className="text-xl">Loading your project...</h3>
+              <Spinner />
+            </div>
+          </div>
+        ) : error?.status === 401 || error?.status === 403 ? (
+          <JoinProject />
+        ) : error?.status === 404 ? (
+          <div className="container grid h-screen place-items-center">
+            <div className="space-y-4 text-center">
+              <p className="text-2xl font-semibold">No such project exist. Create one?</p>
+              <PrimaryButton
+                onClick={() => {
+                  const e = new KeyboardEvent("keydown", { key: "p" });
+                  document.dispatchEvent(e);
+                }}
+              >
+                Create project
+              </PrimaryButton>
+            </div>
+          </div>
+        ) : settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? (
+          <NotAuthorizedView
+            actionButton={
+              <Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
+                <a>
+                  <PrimaryButton className="flex items-center gap-1">
+                    <LayerDiagonalIcon height={16} width={16} color="white" /> Go to issues
+                  </PrimaryButton>
+                </a>
+              </Link>
+            }
+            type="project"
+          />
+        ) : (
+          <main className="flex h-screen w-full min-w-0 flex-col overflow-y-auto">
+            {!noHeader && (
+              <AppHeader
+                breadcrumbs={breadcrumbs}
+                left={left}
+                right={right}
+                setToggleSidebar={setToggleSidebar}
+              />
+            )}
+            <div
+              className={`flex w-full flex-grow flex-col ${
+                noPadding || issueView === "list" ? "" : settingsLayout ? "p-8 lg:px-28" : "p-8"
+              } ${
+                bg === "primary"
+                  ? "bg-brand-surface-1"
+                  : bg === "secondary"
+                  ? "bg-brand-sidebar"
+                  : "bg-brand-base"
+              }`}
+            >
+              {settingsLayout && (
+                <div className="mb-12 space-y-6">
+                  <div>
+                    <h3 className="text-3xl font-semibold">Project Settings</h3>
+                    <p className="mt-1 text-gray-600">
+                      This information will be displayed to every member of the project.
+                    </p>
+                  </div>
+                  <SettingsNavbar />
+                </div>
+              )}
+              {children}
+            </div>
+          </main>
+        )}
+      </div>
+    </Container>
+  );
+};
diff --git a/app/layouts/auth-layout/user-authorization-wrapper.tsx b/app/layouts/auth-layout/user-authorization-wrapper.tsx
new file mode 100644
index 000000000..d11bb2ac1
--- /dev/null
+++ b/app/layouts/auth-layout/user-authorization-wrapper.tsx
@@ -0,0 +1,40 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import userService from "services/user.service";
+// ui
+import { Spinner } from "components/ui";
+// fetch-keys
+import { CURRENT_USER } from "constants/fetch-keys";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const UserAuthorizationLayout: React.FC<Props> = ({ children }) => {
+  const router = useRouter();
+
+  const { data: currentUser, error } = useSWR(CURRENT_USER, () => userService.currentUser());
+
+  if (!currentUser && !error) {
+    return (
+      <div className="h-screen grid place-items-center p-4">
+        <div className="flex flex-col items-center gap-3 text-center">
+          <h3 className="text-xl">Loading your profile...</h3>
+          <Spinner />
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    const redirectTo = router.asPath;
+
+    router.push(`/signin?next=${redirectTo}`);
+    return null;
+  }
+
+  return <>{children}</>;
+};
diff --git a/app/layouts/auth-layout/workspace-authorization-wrapper.tsx b/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
new file mode 100644
index 000000000..a1bfafa1c
--- /dev/null
+++ b/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
@@ -0,0 +1,163 @@
+import { useState } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import workspaceServices from "services/workspace.service";
+// layouts
+import Container from "layouts/container";
+import AppSidebar from "layouts/app-layout/app-sidebar";
+import AppHeader from "layouts/app-layout/app-header";
+import SettingsNavbar from "layouts/settings-navbar";
+import { UserAuthorizationLayout } from "./user-authorization-wrapper";
+// components
+import { NotAuthorizedView, NotAWorkspaceMember } from "components/auth-screens";
+import { CommandPalette } from "components/command-palette";
+// icons
+import { PrimaryButton, Spinner } from "components/ui";
+import { LayerDiagonalIcon } from "components/icons";
+// fetch-keys
+import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
+
+type Meta = {
+  title?: string | null;
+  description?: string | null;
+  image?: string | null;
+  url?: string | null;
+};
+
+type Props = {
+  meta?: Meta;
+  children: React.ReactNode;
+  noPadding?: boolean;
+  noHeader?: boolean;
+  bg?: "primary" | "secondary";
+  breadcrumbs?: JSX.Element;
+  left?: JSX.Element;
+  right?: JSX.Element;
+  profilePage?: boolean;
+};
+
+export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
+  meta,
+  children,
+  noPadding = false,
+  noHeader = false,
+  bg = "primary",
+  breadcrumbs,
+  left,
+  right,
+  profilePage = false,
+}) => {
+  const [toggleSidebar, setToggleSidebar] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: workspaceMemberMe, error } = useSWR(
+    workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug as string) : null,
+    workspaceSlug ? () => workspaceServices.workspaceMemberMe(workspaceSlug.toString()) : null,
+    {
+      onErrorRetry(err, key, config, revalidate, revalidateOpts) {
+        if (err.status === 401 || err.status === 403) return;
+        revalidateOpts.retryCount = 5;
+      },
+    }
+  );
+
+  if (!workspaceMemberMe && !error)
+    return (
+      <div className="grid h-screen place-items-center p-4">
+        <div className="flex flex-col items-center gap-3 text-center">
+          <h3 className="text-xl">Loading your workspace...</h3>
+          <Spinner />
+        </div>
+      </div>
+    );
+
+  if (error?.status === 401 || error?.status === 403) return <NotAWorkspaceMember />;
+
+  // FIXME: show 404 for workspace not workspace member
+  if (error?.status === 404) {
+    return (
+      <div className="container flex h-screen items-center justify-center">
+        <p className="text-2xl font-semibold">No such workspace exist. Create one?</p>
+      </div>
+    );
+  }
+
+  const settingsLayout = router.pathname.includes("/settings");
+  const memberType = {
+    isOwner: workspaceMemberMe?.role === 20,
+    isMember: workspaceMemberMe?.role === 15,
+    isViewer: workspaceMemberMe?.role === 10,
+    isGuest: workspaceMemberMe?.role === 5,
+  };
+
+  return (
+    <UserAuthorizationLayout>
+      <Container meta={meta}>
+        <CommandPalette />
+        <div className="flex h-screen w-full overflow-x-hidden">
+          <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
+          {settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? (
+            <NotAuthorizedView
+              actionButton={
+                <Link href={`/${workspaceSlug}`}>
+                  <a>
+                    <PrimaryButton className="flex items-center gap-1">
+                      <LayerDiagonalIcon height={16} width={16} color="white" /> Go to workspace
+                    </PrimaryButton>
+                  </a>
+                </Link>
+              }
+              type="workspace"
+            />
+          ) : (
+            <main className="flex h-screen w-full min-w-0 flex-col overflow-y-auto">
+              {!noHeader && (
+                <AppHeader
+                  breadcrumbs={breadcrumbs}
+                  left={left}
+                  right={right}
+                  setToggleSidebar={setToggleSidebar}
+                />
+              )}
+              <div
+                className={`flex w-full flex-grow flex-col ${
+                  noPadding ? "" : settingsLayout || profilePage ? "p-8 lg:px-28" : "p-8"
+                } ${
+                  bg === "primary"
+                    ? "bg-brand-surface-1"
+                    : bg === "secondary"
+                    ? "bg-brand-surface-1"
+                    : "bg-brand-base"
+                }`}
+              >
+                {(settingsLayout || profilePage) && (
+                  <div className="mb-12 space-y-6">
+                    <div>
+                      <h3 className="text-3xl font-semibold">
+                        {profilePage ? "Profile" : "Workspace"} Settings
+                      </h3>
+                      <p className="mt-1 text-gray-600">
+                        {profilePage
+                          ? "This information will be visible to only you."
+                          : "This information will be displayed to every member of the workspace."}
+                      </p>
+                    </div>
+                    <SettingsNavbar profilePage={profilePage} />
+                  </div>
+                )}
+                {children}
+              </div>
+            </main>
+          )}
+        </div>
+      </Container>
+    </UserAuthorizationLayout>
+  );
+};
diff --git a/app/layouts/container.tsx b/app/layouts/container.tsx
new file mode 100644
index 000000000..5adf9430b
--- /dev/null
+++ b/app/layouts/container.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+// next
+import Head from "next/head";
+import { useRouter } from "next/router";
+// constants
+import {
+  SITE_NAME,
+  SITE_DESCRIPTION,
+  SITE_URL,
+  TWITTER_USER_NAME,
+  SITE_KEYWORDS,
+  SITE_TITLE,
+} from "constants/seo-variables";
+
+type Meta = {
+  title?: string | null;
+  description?: string | null;
+  image?: string | null;
+  url?: string | null;
+};
+
+type Props = {
+  meta?: Meta;
+  children: React.ReactNode;
+  noPadding?: boolean;
+  bg?: "primary" | "secondary";
+  noHeader?: boolean;
+  breadcrumbs?: JSX.Element;
+  left?: JSX.Element;
+  right?: JSX.Element;
+};
+
+const Container = ({ meta, children }: Props) => {
+  const router = useRouter();
+  const image = meta?.image || "/site-image.png";
+  const title = meta?.title || SITE_TITLE;
+  const url = meta?.url || `${SITE_URL}${router.asPath}`;
+  const description = meta?.description || SITE_DESCRIPTION;
+
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <meta property="og:site_name" content={SITE_NAME} />
+        <meta property="og:title" content={title} />
+        <meta property="og:url" content={url} />
+        <meta name="description" content={description} />
+        <meta property="og:description" content={description} />
+        <meta name="keywords" content={SITE_KEYWORDS} />
+        <meta name="twitter:site" content={`@${TWITTER_USER_NAME}`} />
+        <meta name="twitter:card" content={image ? "summary_large_image" : "summary"} />
+        <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
+        <link rel="manifest" href="/site.webmanifest.json" />
+        <link rel="shortcut icon" href="/favicon/favicon.ico" />
+        {image && (
+          <meta
+            property="og:image"
+            content={image.startsWith("https://") ? image : `${SITE_URL}${image}`}
+          />
+        )}
+      </Head>
+      {children}
+    </>
+  );
+};
+
+export default Container;
diff --git a/app/layouts/default-layout/index.tsx b/app/layouts/default-layout/index.tsx
new file mode 100644
index 000000000..4134f6352
--- /dev/null
+++ b/app/layouts/default-layout/index.tsx
@@ -0,0 +1,30 @@
+// layouts
+import Container from "layouts/container";
+
+type Meta = {
+  title?: string | null;
+  description?: string | null;
+  image?: string | null;
+  url?: string | null;
+};
+
+type Props = {
+  meta?: Meta;
+  children: React.ReactNode;
+  noPadding?: boolean;
+  bg?: "primary" | "secondary";
+  noHeader?: boolean;
+  breadcrumbs?: JSX.Element;
+  left?: JSX.Element;
+  right?: JSX.Element;
+};
+
+const DefaultLayout: React.FC<Props> = ({ meta, children }) => (
+  <Container meta={meta}>
+    <div className="w-full h-screen overflow-auto bg-brand-base">
+      <>{children}</>
+    </div>
+  </Container>
+);
+
+export default DefaultLayout;
diff --git a/app/layouts/settings-navbar.tsx b/app/layouts/settings-navbar.tsx
new file mode 100644
index 000000000..027f87f61
--- /dev/null
+++ b/app/layouts/settings-navbar.tsx
@@ -0,0 +1,111 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+type Props = {
+  profilePage?: boolean;
+};
+
+const SettingsNavbar: React.FC<Props> = ({ profilePage = false }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const workspaceLinks: Array<{
+    label: string;
+    href: string;
+  }> = [
+    {
+      label: "General",
+      href: `/${workspaceSlug}/settings`,
+    },
+    {
+      label: "Members",
+      href: `/${workspaceSlug}/settings/members`,
+    },
+    {
+      label: "Billing & Plans",
+      href: `/${workspaceSlug}/settings/billing`,
+    },
+    {
+      label: "Integrations",
+      href: `/${workspaceSlug}/settings/integrations`,
+    },
+    {
+      label: "Import/Export",
+      href: `/${workspaceSlug}/settings/import-export`,
+    },
+  ];
+
+  const projectLinks: Array<{
+    label: string;
+    href: string;
+  }> = [
+    {
+      label: "General",
+      href: `/${workspaceSlug}/projects/${projectId}/settings`,
+    },
+    {
+      label: "Control",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/control`,
+    },
+    {
+      label: "Members",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/members`,
+    },
+    {
+      label: "Features",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/features`,
+    },
+    {
+      label: "States",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/states`,
+    },
+    {
+      label: "Labels",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/labels`,
+    },
+    {
+      label: "Integrations",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/integrations`,
+    },
+    {
+      label: "Estimates",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/estimates`,
+    },
+  ];
+
+  const profileLinks: Array<{
+    label: string;
+    href: string;
+  }> = [
+    {
+      label: "General",
+      href: `/${workspaceSlug}/me/profile`,
+    },
+    {
+      label: "Activity",
+      href: `/${workspaceSlug}/me/profile/activity`,
+    },
+  ];
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {(profilePage ? profileLinks : projectId ? projectLinks : workspaceLinks).map((link) => (
+        <Link key={link.href} href={link.href}>
+          <a>
+            <div
+              className={`rounded-3xl border border-brand-base px-5 py-1.5 text-sm sm:px-7 sm:py-2 sm:text-base ${
+                router.asPath === link.href
+                  ? "border-brand-accent bg-brand-accent text-white"
+                  : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
+              }`}
+            >
+              {link.label}
+            </div>
+          </a>
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default SettingsNavbar;
diff --git a/app/lib/auth.ts b/app/lib/auth.ts
new file mode 100644
index 000000000..e607fd00c
--- /dev/null
+++ b/app/lib/auth.ts
@@ -0,0 +1,203 @@
+// cookies
+import { convertCookieStringToObject } from "./cookie";
+// types
+import type { IProjectMember, IUser, IWorkspace, IWorkspaceMember } from "types";
+
+export const requiredAuth = async (cookie?: string) => {
+  const cookies = convertCookieStringToObject(cookie);
+  const token = cookies?.accessToken;
+
+  if (!token) return null;
+
+  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || "https://api.plane.so";
+
+  let user: IUser | null = null;
+
+  try {
+    const data = await fetch(`${baseUrl}/api/users/me/`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    })
+      .then((res) => res.json())
+      .then((data) => data);
+
+    user = data.user;
+  } catch (err) {
+    console.error(err);
+    user = null;
+  }
+
+  return user;
+};
+
+export const requiredAdmin = async (workspaceSlug: string, projectId: string, cookie?: string) => {
+  const user = await requiredAuth(cookie);
+
+  if (!user) return null;
+
+  const cookies = convertCookieStringToObject(cookie);
+  const token = cookies?.accessToken;
+
+  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || "https://api.plane.so";
+
+  let memberDetail: IProjectMember | null = null;
+
+  try {
+    const data = await fetch(
+      `${baseUrl}/api/workspaces/${workspaceSlug}/projects/${projectId}/project-members/me/`,
+      {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    )
+      .then((res) => res.json())
+      .then((data) => data);
+
+    memberDetail = data;
+  } catch (err) {
+    console.error(err);
+    memberDetail = null;
+  }
+
+  return memberDetail || null;
+};
+
+export const requiredWorkspaceAdmin = async (workspaceSlug: string, cookie?: string) => {
+  const user = await requiredAuth(cookie);
+
+  if (!user) return null;
+
+  const cookies = convertCookieStringToObject(cookie);
+  const token = cookies?.accessToken;
+
+  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || "https://api.plane.so";
+
+  let memberDetail: IWorkspaceMember | null = null;
+
+  try {
+    const data = await fetch(`${baseUrl}/api/workspaces/${workspaceSlug}/workspace-members/me/`, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    })
+      .then((res) => res.json())
+      .then((data) => data);
+
+    memberDetail = data;
+  } catch (err) {
+    console.error(err);
+    memberDetail = null;
+  }
+
+  return memberDetail || null;
+};
+
+export const homePageRedirect = async (cookie?: string) => {
+  const user = await requiredAuth(cookie);
+
+  if (!user)
+    return {
+      redirect: {
+        destination: "/signin",
+        permanent: false,
+      },
+    };
+
+  if (!user.is_onboarded)
+    return {
+      redirect: {
+        destination: "/onboarding",
+        permanent: false,
+      },
+    };
+
+  let workspaces: IWorkspace[] = [];
+
+  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || "https://api.plane.so";
+
+  const cookies = convertCookieStringToObject(cookie);
+  const token = cookies?.accessToken;
+
+  try {
+    const data = await fetch(`${baseUrl}/api/users/me/workspaces/`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    })
+      .then((res) => res.json())
+      .then((data) => data);
+
+    workspaces = data;
+  } catch (e) {
+    console.error(e);
+    return {
+      redirect: {
+        destination: "/error",
+        permanent: false,
+      },
+    };
+  }
+
+  const lastActiveWorkspace = workspaces.find(
+    (workspace) => workspace.id === user.last_workspace_id
+  );
+
+  if (lastActiveWorkspace) {
+    return {
+      redirect: {
+        destination: `/${lastActiveWorkspace.slug}`,
+        permanent: false,
+      },
+    };
+  } else if (workspaces.length > 0) {
+    return {
+      redirect: {
+        destination: `/${workspaces[0].slug}`,
+        permanent: false,
+      },
+    };
+  }
+
+  const invitations = await fetch(`${baseUrl}/api/users/me/invitations/workspaces/`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+  })
+    .then((res) => res.json())
+    .then((data) => data)
+    .catch((e) => {
+      console.error(e);
+      return {
+        redirect: {
+          destination: "/error",
+          permanent: false,
+        },
+      };
+    });
+
+  if (invitations.length > 0)
+    return {
+      redirect: {
+        destination: "/invitations",
+        permanent: false,
+      },
+    };
+  else {
+    return {
+      redirect: {
+        destination: "/create-workspace",
+        permanent: false,
+      },
+    };
+  }
+};
diff --git a/app/lib/cookie.ts b/app/lib/cookie.ts
new file mode 100644
index 000000000..394cca3f4
--- /dev/null
+++ b/app/lib/cookie.ts
@@ -0,0 +1,16 @@
+export const convertCookieStringToObject = (cookieHeader: string | undefined) => {
+  const list: any = {};
+  if (!cookieHeader) return list;
+
+  cookieHeader.split(`;`).forEach(function (cookie) {
+    // eslint-disable-next-line prefer-const
+    let [name, ...rest] = cookie.split(`=`);
+    name = name?.trim();
+    if (!name) return;
+    const value = rest.join(`=`).trim();
+    if (!value) return;
+    list[name] = decodeURIComponent(value);
+  });
+
+  return list;
+};
diff --git a/app/lib/redirect.ts b/app/lib/redirect.ts
new file mode 100644
index 000000000..8c179fc10
--- /dev/null
+++ b/app/lib/redirect.ts
@@ -0,0 +1,16 @@
+import Router from "next/router";
+import type { NextPageContext } from "next";
+
+const redirect = (context: NextPageContext, target: any) => {
+  if (context.res) {
+    // server
+    // 303: "See other"
+    context.res.writeHead(301, { Location: target });
+    context.res.end();
+  } else {
+    // In the browser, we just pretend like this never even happened ;)
+    Router.push(target);
+  }
+};
+
+export default redirect;
diff --git a/app/manifest.json b/app/manifest.json
new file mode 100644
index 000000000..5a00515a0
--- /dev/null
+++ b/app/manifest.json
@@ -0,0 +1,32 @@
+{
+  "theme_color": "#3579f6",
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
+  "name": "Plane | Accelerate software development with peace.",
+  "short_name": "Plane",
+  "description": "Plane accelerated the software development by order of magnitude for agencies and product companies.",
+  "icons": [
+    {
+      "src": "/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/app/next-env.d.ts b/app/next-env.d.ts
new file mode 100644
index 000000000..4f11a03dc
--- /dev/null
+++ b/app/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/app/next.config.js b/app/next.config.js
new file mode 100644
index 000000000..8d364126f
--- /dev/null
+++ b/app/next.config.js
@@ -0,0 +1,27 @@
+const { withSentryConfig } = require("@sentry/nextjs");
+const path = require("path");
+const extraImageDomains = (process.env.NEXT_PUBLIC_EXTRA_IMAGE_DOMAINS ?? "")
+  .split(",")
+  .filter((domain) => domain.length > 0);
+
+const nextConfig = {
+  reactStrictMode: false,
+  swcMinify: true,
+  images: {
+    domains: [
+      "vinci-web.s3.amazonaws.com",
+      "planefs-staging.s3.ap-south-1.amazonaws.com",
+      "planefs.s3.amazonaws.com",
+      "images.unsplash.com",
+      "avatars.githubusercontent.com",
+      ...extraImageDomains,
+    ],
+  },
+  output: "standalone",
+};
+
+if (parseInt(process.env.NEXT_PUBLIC_ENABLE_SENTRY || "0")) {
+  module.exports = withSentryConfig(nextConfig, { silent: true }, { hideSourceMaps: true });
+} else {
+  module.exports = nextConfig;
+}
diff --git a/app/package.json b/app/package.json
new file mode 100644
index 000000000..e0efbcfd6
--- /dev/null
+++ b/app/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port 3000",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@blueprintjs/core": "^4.16.3",
+    "@blueprintjs/popover2": "^1.13.3",
+    "@headlessui/react": "^1.7.3",
+    "@heroicons/react": "^2.0.12",
+    "@jitsu/nextjs": "^3.1.5",
+    "@remirror/core": "^2.0.11",
+    "@remirror/extension-react-tables": "^2.2.11",
+    "@remirror/pm": "^2.0.3",
+    "@remirror/react": "^2.0.24",
+    "@sentry/nextjs": "^7.36.0",
+    "@types/lodash.debounce": "^4.0.7",
+    "@types/react-datepicker": "^4.8.0",
+    "axios": "^1.1.3",
+    "cmdk": "^0.2.0",
+    "js-cookie": "^3.0.1",
+    "lodash.debounce": "^4.0.8",
+    "next": "12.3.2",
+    "next-pwa": "^5.6.0",
+    "next-themes": "^0.2.1",
+    "nprogress": "^0.2.0",
+    "react": "18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-color": "^2.19.3",
+    "react-datepicker": "^4.8.0",
+    "react-dom": "18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.38.0",
+    "recharts": "^2.3.2",
+    "remirror": "^2.0.23",
+    "swr": "^1.3.0",
+    "tlds": "^1.238.0",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/js-cookie": "^3.0.2",
+    "@types/node": "18.0.6",
+    "@types/nprogress": "^0.2.0",
+    "@types/react": "18.0.15",
+    "@types/react-beautiful-dnd": "^13.1.2",
+    "@types/react-color": "^3.0.6",
+    "@types/react-dom": "18.0.6",
+    "@types/uuid": "^8.3.4",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
+    "autoprefixer": "^10.4.7",
+    "eslint": "^8.31.0",
+    "eslint-config-next": "12.2.2",
+    "eslint-config-prettier": "^8.8.0",
+    "postcss": "^8.4.14",
+    "prettier": "^2.8.7",
+    "prettier-plugin-tailwindcss": "^0.2.7",
+    "tailwindcss": "^3.1.6",
+    "typescript": "4.7.4"
+  }
+}
diff --git a/app/pages/404.tsx b/app/pages/404.tsx
new file mode 100644
index 000000000..2a136a164
--- /dev/null
+++ b/app/pages/404.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// ui
+import { SecondaryButton } from "components/ui";
+// images
+import Image404 from "public/404.svg";
+// types
+import type { NextPage } from "next";
+
+const PageNotFound: NextPage = () => (
+  <DefaultLayout
+    meta={{
+      title: "Plane - Page Not Found",
+      description: "Page Not Found",
+    }}
+  >
+    <div className="grid h-full place-items-center p-4">
+      <div className="space-y-8 text-center">
+        <div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80">
+          <Image src={Image404} layout="fill" alt="404- Page not found" />
+        </div>
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>
+          <p className="text-sm text-brand-secondary">
+            Sorry, the page you are looking for cannot be found. It may have been removed, had its
+            name changed, or is temporarily unavailable.
+          </p>
+        </div>
+        <Link href="/">
+          <a className="block">
+            <SecondaryButton size="md">Go to Home</SecondaryButton>
+          </a>
+        </Link>
+      </div>
+    </div>
+  </DefaultLayout>
+);
+
+export default PageNotFound;
diff --git a/app/pages/[workspaceSlug]/index.tsx b/app/pages/[workspaceSlug]/index.tsx
new file mode 100644
index 000000000..adf893f88
--- /dev/null
+++ b/app/pages/[workspaceSlug]/index.tsx
@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+// services
+import userService from "services/user.service";
+// components
+import {
+  CompletedIssuesGraph,
+  IssuesList,
+  IssuesPieChart,
+  IssuesStats,
+} from "components/workspace";
+// types
+import type { NextPage } from "next";
+// fetch-keys
+import { USER_WORKSPACE_DASHBOARD } from "constants/fetch-keys";
+
+const WorkspacePage: NextPage = () => {
+  const [month, setMonth] = useState(new Date().getMonth() + 1);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: workspaceDashboardData } = useSWR(
+    workspaceSlug ? USER_WORKSPACE_DASHBOARD(workspaceSlug as string) : null,
+    workspaceSlug ? () => userService.userWorkspaceDashboard(workspaceSlug as string, month) : null
+  );
+
+  useEffect(() => {
+    if (!workspaceSlug) return;
+
+    mutate(USER_WORKSPACE_DASHBOARD(workspaceSlug as string));
+  }, [month, workspaceSlug]);
+
+  return (
+    <WorkspaceAuthorizationLayout noHeader>
+      <div className="h-full w-full">
+        <div className="flex flex-col gap-8">
+          <div
+            className="text-brand-muted-1 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg bg-brand-base px-8 py-6 md:flex-row md:items-center md:py-3"
+            // style={{ background: "linear-gradient(90deg, #8e2de2 0%, #4a00e0 100%)" }}
+          >
+            <p className="font-semibold">
+              Plane is open source, support us by starring us on GitHub.
+            </p>
+            <div className="flex items-center gap-2">
+              {/* <a href="#" target="_blank" rel="noopener noreferrer">
+                View roadmap
+              </a> */}
+              <a
+                href="https://github.com/makeplane/plane"
+                target="_blank"
+                className="rounded-md border-2 border-brand-base px-3 py-1.5 text-sm font-medium duration-300"
+                rel="noopener noreferrer"
+              >
+                Star us on GitHub
+              </a>
+            </div>
+          </div>
+          <IssuesStats data={workspaceDashboardData} />
+          <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+            <IssuesList issues={workspaceDashboardData?.overdue_issues} type="overdue" />
+            <IssuesList issues={workspaceDashboardData?.upcoming_issues} type="upcoming" />
+            <IssuesPieChart groupedIssues={workspaceDashboardData?.state_distribution} />
+            <CompletedIssuesGraph
+              issues={workspaceDashboardData?.completed_issues}
+              month={month}
+              setMonth={setMonth}
+            />
+          </div>
+        </div>
+      </div>
+    </WorkspaceAuthorizationLayout>
+  );
+};
+
+export default WorkspacePage;
diff --git a/app/pages/[workspaceSlug]/me/my-issues.tsx b/app/pages/[workspaceSlug]/me/my-issues.tsx
new file mode 100644
index 000000000..8e48db44a
--- /dev/null
+++ b/app/pages/[workspaceSlug]/me/my-issues.tsx
@@ -0,0 +1,206 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+// headless ui
+import { Disclosure, Popover, Transition } from "@headlessui/react";
+// icons
+import { ChevronDownIcon, PlusIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+// hooks
+import useIssues from "hooks/use-issues";
+// ui
+import { Spinner, EmptySpace, EmptySpaceItem, PrimaryButton } from "components/ui";
+import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
+// hooks
+import useIssuesProperties from "hooks/use-issue-properties";
+// types
+import { IIssue, Properties } from "types";
+// components
+import { MyIssuesListItem } from "components/issues";
+// helpers
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+// types
+import type { NextPage } from "next";
+
+const MyIssuesPage: NextPage = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // fetching user issues
+  const { myIssues } = useIssues(workspaceSlug as string);
+
+  const [properties, setProperties] = useIssuesProperties(
+    workspaceSlug ? (workspaceSlug as string) : undefined,
+    undefined
+  );
+
+  return (
+    <WorkspaceAuthorizationLayout
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title="My Issues" />
+        </Breadcrumbs>
+      }
+      noPadding
+      right={
+        <div className="flex items-center gap-2">
+          {myIssues && myIssues.length > 0 && (
+            <Popover className="relative">
+              {({ open }) => (
+                <>
+                  <Popover.Button
+                    className={`group flex items-center gap-2 rounded-md border border-brand-base bg-transparent px-3 py-1.5 text-xs hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none ${
+                      open ? "bg-brand-surface-1 text-brand-base" : "text-brand-muted-1"
+                    }`}
+                  >
+                    <span>View</span>
+                    <ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
+                  </Popover.Button>
+
+                  <Transition
+                    as={React.Fragment}
+                    enter="transition ease-out duration-200"
+                    enterFrom="opacity-0 translate-y-1"
+                    enterTo="opacity-100 translate-y-0"
+                    leave="transition ease-in duration-150"
+                    leaveFrom="opacity-100 translate-y-0"
+                    leaveTo="opacity-0 translate-y-1"
+                  >
+                    <Popover.Panel className="absolute right-1/2 z-10 mr-5 mt-1 w-screen max-w-xs translate-x-1/2 transform overflow-hidden rounded-lg bg-brand-base p-3 shadow-lg">
+                      <div className="relative flex flex-col gap-1 gap-y-4">
+                        <div className="relative flex flex-col gap-1">
+                          <h4 className="text-base text-gray-600">Properties</h4>
+                          <div className="flex flex-wrap items-center gap-2">
+                            {Object.keys(properties).map((key) => {
+                              if (key === "estimate") return null;
+
+                              return (
+                                <button
+                                  key={key}
+                                  type="button"
+                                  className={`rounded border border-theme px-2 py-1 text-xs capitalize ${
+                                    properties[key as keyof Properties]
+                                      ? "border-theme bg-theme text-white"
+                                      : ""
+                                  }`}
+                                  onClick={() => setProperties(key as keyof Properties)}
+                                >
+                                  {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
+                                </button>
+                              );
+                            })}
+                          </div>
+                        </div>
+                      </div>
+                    </Popover.Panel>
+                  </Transition>
+                </>
+              )}
+            </Popover>
+          )}
+          <PrimaryButton
+            className="flex items-center gap-2"
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", { key: "c" });
+              document.dispatchEvent(e);
+            }}
+          >
+            <PlusIcon className="w-4 h-4" />
+            Add Issue
+          </PrimaryButton>
+        </div>
+      }
+    >
+      <div className="flex h-full w-full flex-col space-y-5">
+        {myIssues ? (
+          <>
+            {myIssues.length > 0 ? (
+              <div className="flex flex-col space-y-5">
+                <Disclosure as="div" defaultOpen>
+                  {({ open }) => (
+                    <div className="rounded-[10px] border border-brand-base bg-brand-base">
+                      <div
+                        className={`flex items-center justify-start bg-brand-surface-1 px-4 py-2.5 ${
+                          open ? "rounded-t-[10px]" : "rounded-[10px]"
+                        }`}
+                      >
+                        <Disclosure.Button>
+                          <div className="flex items-center gap-x-2">
+                            <span>
+                              <ChevronDownIcon
+                                className={`h-4 w-4 text-gray-500 ${
+                                  !open ? "-rotate-90 transform" : ""
+                                }`}
+                              />
+                            </span>
+                            <h2 className="font-medium leading-5">My Issues</h2>
+                            <span className="rounded-full bg-brand-surface-2 py-0.5 px-3 text-sm text-brand-secondary">
+                              {myIssues.length}
+                            </span>
+                          </div>
+                        </Disclosure.Button>
+                      </div>
+                      <Transition
+                        show={open}
+                        enter="transition duration-100 ease-out"
+                        enterFrom="transform opacity-0"
+                        enterTo="transform opacity-100"
+                        leave="transition duration-75 ease-out"
+                        leaveFrom="transform opacity-100"
+                        leaveTo="transform opacity-0"
+                      >
+                        <Disclosure.Panel>
+                          {myIssues.map((issue: IIssue) => (
+                            <MyIssuesListItem
+                              key={issue.id}
+                              issue={issue}
+                              properties={properties}
+                              projectId={issue.project}
+                            />
+                          ))}
+                        </Disclosure.Panel>
+                      </Transition>
+                    </div>
+                  )}
+                </Disclosure>
+              </div>
+            ) : (
+              <div className="flex h-full w-full flex-col items-center justify-center px-4">
+                <EmptySpace
+                  title="You don't have any issue assigned to you yet."
+                  description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
+                  Icon={RectangleStackIcon}
+                >
+                  <EmptySpaceItem
+                    title="Create a new issue"
+                    description={
+                      <span>
+                        Use <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre> shortcut
+                        to create a new issue
+                      </span>
+                    }
+                    Icon={PlusIcon}
+                    action={() => {
+                      const e = new KeyboardEvent("keydown", {
+                        key: "c",
+                      });
+                      document.dispatchEvent(e);
+                    }}
+                  />
+                </EmptySpace>
+              </div>
+            )}
+          </>
+        ) : (
+          <div className="flex h-full w-full items-center justify-center">
+            <Spinner />
+          </div>
+        )}
+      </div>
+    </WorkspaceAuthorizationLayout>
+  );
+};
+
+export default MyIssuesPage;
diff --git a/app/pages/[workspaceSlug]/me/profile/activity.tsx b/app/pages/[workspaceSlug]/me/profile/activity.tsx
new file mode 100644
index 000000000..fc0c70d51
--- /dev/null
+++ b/app/pages/[workspaceSlug]/me/profile/activity.tsx
@@ -0,0 +1,46 @@
+import useSWR from "swr";
+
+// services
+import userService from "services/user.service";
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+// components
+import { Feeds } from "components/core";
+// ui
+import { Loader } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// fetch-keys
+import { USER_ACTIVITY } from "constants/fetch-keys";
+
+const ProfileActivity = () => {
+  const { data: userActivity } = useSWR(USER_ACTIVITY, () => userService.getUserActivity());
+
+  return (
+    <WorkspaceAuthorizationLayout
+      meta={{
+        title: "Plane - My Profile",
+      }}
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title="My Profile Activity" />
+        </Breadcrumbs>
+      }
+      profilePage
+    >
+      {userActivity ? (
+        userActivity.results.length > 0 ? (
+          <Feeds activities={userActivity.results} />
+        ) : null
+      ) : (
+        <Loader className="space-y-5">
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+        </Loader>
+      )}
+    </WorkspaceAuthorizationLayout>
+  );
+};
+
+export default ProfileActivity;
diff --git a/app/pages/[workspaceSlug]/me/profile/index.tsx b/app/pages/[workspaceSlug]/me/profile/index.tsx
new file mode 100644
index 000000000..ea6b510ee
--- /dev/null
+++ b/app/pages/[workspaceSlug]/me/profile/index.tsx
@@ -0,0 +1,295 @@
+import React, { useEffect, useState } from "react";
+
+import Image from "next/image";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// services
+import fileService from "services/file.service";
+import userService from "services/user.service";
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+// components
+import { ImageUploadModal, ThemeSwitch } from "components/core";
+// ui
+import { CustomSelect, DangerButton, Input, SecondaryButton, Spinner } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { UserIcon } from "@heroicons/react/24/outline";
+// types
+import type { NextPage } from "next";
+import type { IUser } from "types";
+// constants
+import { USER_ROLES } from "constants/workspace";
+
+const defaultValues: Partial<IUser> = {
+  avatar: "",
+  first_name: "",
+  last_name: "",
+  email: "",
+  role: "",
+};
+
+const Profile: NextPage = () => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [isRemoving, setIsRemoving] = useState(false);
+  const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    watch,
+    setValue,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<IUser>({ defaultValues });
+
+  const { setToastAlert } = useToast();
+  const { user: myProfile, mutateUser } = useUser();
+
+  useEffect(() => {
+    reset({ ...defaultValues, ...myProfile });
+  }, [myProfile, reset]);
+
+  const onSubmit = async (formData: IUser) => {
+    const payload: Partial<IUser> = {
+      first_name: formData.first_name,
+      last_name: formData.last_name,
+      avatar: formData.avatar,
+      role: formData.role,
+    };
+
+    await userService
+      .updateUser(payload)
+      .then((res) => {
+        mutateUser((prevData) => {
+          if (!prevData) return prevData;
+          return { ...prevData, user: { ...payload, ...res } };
+        }, false);
+        setIsEditing(false);
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Profile updated successfully.",
+        });
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "There was some error in updating your profile. Please try again.",
+        })
+      );
+  };
+
+  const handleDelete = (url: string | null | undefined, updateUser: boolean = false) => {
+    if (!url) return;
+
+    setIsRemoving(true);
+
+    const index = url.indexOf(".com");
+    const asset = url.substring(index + 5);
+
+    fileService.deleteUserFile(asset).then(() => {
+      if (updateUser)
+        userService
+          .updateUser({ avatar: "" })
+          .then((res) => {
+            setToastAlert({
+              type: "success",
+              title: "Success!",
+              message: "Profile picture removed successfully.",
+            });
+            mutateUser((prevData) => {
+              if (!prevData) return prevData;
+              return { ...prevData, user: res };
+            }, false);
+          })
+          .catch(() => {
+            setToastAlert({
+              type: "error",
+              title: "Error!",
+              message: "There was some error in deleting your profile picture. Please try again.",
+            });
+          })
+          .finally(() => setIsRemoving(false));
+    });
+  };
+
+  return (
+    <WorkspaceAuthorizationLayout
+      meta={{
+        title: "Plane - My Profile",
+      }}
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title="My Profile" />
+        </Breadcrumbs>
+      }
+      profilePage
+    >
+      <ImageUploadModal
+        isOpen={isImageUploadModalOpen}
+        onClose={() => setIsImageUploadModalOpen(false)}
+        onSuccess={(url) => {
+          setValue("avatar", url);
+          handleSubmit(onSubmit)();
+          setIsImageUploadModalOpen(false);
+        }}
+        value={watch("avatar") !== "" ? watch("avatar") : undefined}
+        userImage
+      />
+      {myProfile ? (
+        <div className="space-y-8 sm:space-y-12">
+          <div className="grid grid-cols-12 gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold text-brand-base">Profile Picture</h4>
+              <p className="text-brand-secondary">
+                Max file size is 5MB. Supported file types are .jpg and .png.
+              </p>
+            </div>
+            <div className="col-span-12 sm:col-span-6">
+              <div className="flex items-center gap-4">
+                <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
+                  {!watch("avatar") || watch("avatar") === "" ? (
+                    <div className="bg-brand-surface-2 h-12 w-12 p-2 rounded-md">
+                      <UserIcon className="h-full w-full text-brand-secondary" />
+                    </div>
+                  ) : (
+                    <div className="relative h-12 w-12 overflow-hidden">
+                      <Image
+                        src={watch("avatar")}
+                        alt={myProfile.first_name}
+                        layout="fill"
+                        objectFit="cover"
+                        className="rounded-md"
+                        onClick={() => setIsImageUploadModalOpen(true)}
+                        priority
+                      />
+                    </div>
+                  )}
+                </button>
+                <div className="flex items-center gap-2">
+                  <SecondaryButton
+                    onClick={() => {
+                      setIsImageUploadModalOpen(true);
+                    }}
+                  >
+                    Upload
+                  </SecondaryButton>
+                  {myProfile.avatar && myProfile.avatar !== "" && (
+                    <DangerButton
+                      onClick={() => handleDelete(myProfile.avatar, true)}
+                      loading={isRemoving}
+                    >
+                      {isRemoving ? "Removing..." : "Remove"}
+                    </DangerButton>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid grid-cols-12 gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold text-brand-base">Full Name</h4>
+              <p className="text-brand-secondary">
+                This name will be reflected on all the projects you are working on.
+              </p>
+            </div>
+            <div className="col-span-12 sm:col-span-6 flex items-center gap-2">
+              <Input
+                name="first_name"
+                id="first_name"
+                register={register}
+                error={errors.first_name}
+                placeholder="Enter your first name"
+                autoComplete="off"
+                validations={{
+                  required: "This field is required.",
+                }}
+              />
+              <Input
+                name="last_name"
+                register={register}
+                error={errors.last_name}
+                id="last_name"
+                placeholder="Enter your last name"
+                autoComplete="off"
+              />
+            </div>
+          </div>
+          <div className="grid grid-cols-12 gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold text-brand-base">Email</h4>
+              <p className="text-brand-secondary">The email address that you are using.</p>
+            </div>
+            <div className="col-span-12 sm:col-span-6">
+              <Input
+                id="email"
+                name="email"
+                autoComplete="off"
+                register={register}
+                error={errors.name}
+                className="w-full"
+                disabled
+              />
+            </div>
+          </div>
+          <div className="grid grid-cols-12 gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold text-brand-base">Role</h4>
+              <p className="text-brand-secondary">Add your role.</p>
+            </div>
+            <div className="col-span-12 sm:col-span-6">
+              <Controller
+                name="role"
+                control={control}
+                rules={{ required: "This field is required" }}
+                render={({ field: { value, onChange } }) => (
+                  <CustomSelect
+                    value={value}
+                    onChange={onChange}
+                    label={value ? value.toString() : "Select your role"}
+                    width="w-full"
+                    input
+                    position="right"
+                  >
+                    {USER_ROLES.map((item) => (
+                      <CustomSelect.Option key={item.value} value={item.value}>
+                        {item.label}
+                      </CustomSelect.Option>
+                    ))}
+                  </CustomSelect>
+                )}
+              />
+            </div>
+          </div>
+          <div className="grid grid-cols-12 gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold text-brand-base">Theme</h4>
+              <p className="text-brand-secondary">Select or customize your interface color scheme.</p>
+            </div>
+            <div className="col-span-12 sm:col-span-6">
+              <ThemeSwitch />
+            </div>
+          </div>
+          <div className="sm:text-right">
+            <SecondaryButton onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+              {isSubmitting ? "Updating..." : "Update profile"}
+            </SecondaryButton>
+          </div>
+        </div>
+      ) : (
+        <div className="grid h-full w-full place-items-center px-4 sm:px-0">
+          <Spinner />
+        </div>
+      )}
+    </WorkspaceAuthorizationLayout>
+  );
+};
+
+export default Profile;
diff --git a/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
new file mode 100644
index 000000000..ad9c231da
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -0,0 +1,181 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+// icons
+import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+import { CyclesIcon } from "components/icons";
+// layouts
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+// contexts
+import { IssueViewContextProvider } from "contexts/issue-view.context";
+// components
+import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
+import { CycleDetailsSidebar } from "components/cycles";
+// services
+import issuesService from "services/issues.service";
+import cycleServices from "services/cycles.service";
+import projectService from "services/project.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { CustomMenu } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// helpers
+import { truncateText } from "helpers/string.helper";
+import { getDateRangeStatus } from "helpers/date-time.helper";
+// fetch-keys
+import {
+  CYCLE_ISSUES,
+  CYCLE_LIST,
+  PROJECT_DETAILS,
+  CYCLE_DETAILS,
+  PROJECT_ISSUES_LIST,
+} from "constants/fetch-keys";
+
+const SingleCycle: React.FC = () => {
+  const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
+  const [cycleSidebar, setCycleSidebar] = useState(true);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { data: activeProject } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: cycles } = useSWR(
+    workspaceSlug && projectId ? CYCLE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => cycleServices.getCycles(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: cycleDetails } = useSWR(
+    cycleId ? CYCLE_DETAILS(cycleId as string) : null,
+    workspaceSlug && projectId && cycleId
+      ? () =>
+          cycleServices.getCycleDetails(
+            workspaceSlug as string,
+            projectId as string,
+            cycleId as string
+          )
+      : null
+  );
+
+  const cycleStatus =
+    cycleDetails?.start_date && cycleDetails?.end_date
+      ? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date)
+      : "draft";
+
+  const { data: issues } = useSWR(
+    workspaceSlug && projectId
+      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
+      : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssues(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const openIssuesListModal = () => {
+    setCycleIssuesListModal(true);
+  };
+
+  const handleAddIssuesToCycle = async (data: { issues: string[] }) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await issuesService
+      .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, data)
+      .then(() => {
+        mutate(CYCLE_ISSUES(cycleId as string));
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the cycle. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <IssueViewContextProvider>
+      <ExistingIssuesListModal
+        isOpen={cycleIssuesListModal}
+        handleClose={() => setCycleIssuesListModal(false)}
+        issues={issues?.filter((i) => !i.cycle_id) ?? []}
+        handleOnSubmit={handleAddIssuesToCycle}
+      />
+      <ProjectAuthorizationWrapper
+        breadcrumbs={
+          <Breadcrumbs>
+            <BreadcrumbItem
+              title={`${activeProject?.name ?? "Project"} Cycles`}
+              link={`/${workspaceSlug}/projects/${activeProject?.id}/cycles`}
+            />
+          </Breadcrumbs>
+        }
+        left={
+          <CustomMenu
+            label={
+              <>
+                <CyclesIcon className="h-3 w-3" />
+                {cycleDetails?.name && truncateText(cycleDetails.name, 40)}
+              </>
+            }
+            className="ml-1.5"
+            width="auto"
+          >
+            {cycles?.map((cycle) => (
+              <CustomMenu.MenuItem
+                key={cycle.id}
+                renderAs="a"
+                href={`/${workspaceSlug}/projects/${activeProject?.id}/cycles/${cycle.id}`}
+              >
+                {truncateText(cycle.name, 40)}
+              </CustomMenu.MenuItem>
+            ))}
+          </CustomMenu>
+        }
+        right={
+          <div
+            className={`flex items-center gap-2 ${cycleSidebar ? "mr-[24rem]" : ""} duration-300`}
+          >
+            <IssuesFilterView />
+            <button
+              type="button"
+              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1 ${
+                cycleSidebar ? "rotate-180" : ""
+              }`}
+              onClick={() => setCycleSidebar((prevData) => !prevData)}
+            >
+              <ArrowLeftIcon className="h-4 w-4" />
+            </button>
+          </div>
+        }
+      >
+        <div className={`h-full ${cycleSidebar ? "mr-[24rem]" : ""} duration-300`}>
+          <IssuesView
+            type="cycle"
+            openIssuesListModal={openIssuesListModal}
+            isCompleted={cycleStatus === "completed" ?? false}
+          />
+        </div>
+        <CycleDetailsSidebar
+          cycleStatus={cycleStatus}
+          cycle={cycleDetails}
+          isOpen={cycleSidebar}
+          isCompleted={cycleStatus === "completed" ?? false}
+        />
+      </ProjectAuthorizationWrapper>
+    </IssueViewContextProvider>
+  );
+};
+
+export default SingleCycle;
diff --git a/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
new file mode 100644
index 000000000..55351b42d
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -0,0 +1,230 @@
+import React, { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+import dynamic from "next/dynamic";
+
+import useSWR from "swr";
+
+// headless ui
+import { Tab } from "@headlessui/react";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// services
+import cycleService from "services/cycles.service";
+import projectService from "services/project.service";
+// layouts
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+// components
+import { CompletedCyclesListProps, CreateUpdateCycleModal, CyclesList } from "components/cycles";
+// ui
+import { Loader, PrimaryButton } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// types
+import { SelectCycleType } from "types";
+import type { NextPage } from "next";
+// fetch-keys
+import {
+  CYCLE_CURRENT_AND_UPCOMING_LIST,
+  CYCLE_DRAFT_LIST,
+  PROJECT_DETAILS,
+} from "constants/fetch-keys";
+
+const CompletedCyclesList = dynamic<CompletedCyclesListProps>(
+  () => import("components/cycles").then((a) => a.CompletedCyclesList),
+  {
+    ssr: false,
+    loading: () => (
+      <Loader className="mb-5">
+        <Loader.Item height="12rem" width="100%" />
+      </Loader>
+    ),
+  }
+);
+
+const ProjectCycles: NextPage = () => {
+  const [selectedCycle, setSelectedCycle] = useState<SelectCycleType>();
+  const [createUpdateCycleModal, setCreateUpdateCycleModal] = useState(false);
+
+  const { storedValue: cycleTab, setValue: setCycleTab } = useLocalStorage("cycleTab", "Upcoming");
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: activeProject } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: draftCycles } = useSWR(
+    workspaceSlug && projectId ? CYCLE_DRAFT_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => cycleService.getDraftCycles(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: currentAndUpcomingCycles } = useSWR(
+    workspaceSlug && projectId ? CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => cycleService.getCurrentAndUpcomingCycles(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  useEffect(() => {
+    if (createUpdateCycleModal) return;
+    const timer = setTimeout(() => {
+      setSelectedCycle(undefined);
+      clearTimeout(timer);
+    }, 500);
+  }, [createUpdateCycleModal]);
+
+  const currentTabValue = (tab: string | null) => {
+    switch (tab) {
+      case "Upcoming":
+        return 0;
+      case "Completed":
+        return 1;
+      case "Drafts":
+        return 2;
+
+      default:
+        return 0;
+    }
+  };
+
+  return (
+    <ProjectAuthorizationWrapper
+      meta={{
+        title: "Plane - Cycles",
+      }}
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+          <BreadcrumbItem title={`${activeProject?.name ?? "Project"} Cycles`} />
+        </Breadcrumbs>
+      }
+      right={
+        <PrimaryButton
+          className="flex items-center gap-2"
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", { key: "q" });
+            document.dispatchEvent(e);
+          }}
+        >
+          <PlusIcon className="h-4 w-4" />
+          Add Cycle
+        </PrimaryButton>
+      }
+    >
+      <CreateUpdateCycleModal
+        isOpen={createUpdateCycleModal}
+        handleClose={() => setCreateUpdateCycleModal(false)}
+        data={selectedCycle}
+      />
+      <div className="space-y-8">
+        <div className="flex flex-col gap-5">
+          {currentAndUpcomingCycles && currentAndUpcomingCycles.current_cycle.length > 0 && (
+            <h3 className="text-3xl font-semibold text-brand-base">Current Cycle</h3>
+          )}
+          <div className="space-y-5">
+            <CyclesList
+              cycles={currentAndUpcomingCycles?.current_cycle}
+              setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+              setSelectedCycle={setSelectedCycle}
+              type="current"
+            />
+          </div>
+        </div>
+        <div className="flex flex-col gap-5">
+          <h3 className="text-3xl font-semibold text-brand-base">Other Cycles</h3>
+          <div>
+            <Tab.Group
+              defaultIndex={currentTabValue(cycleTab)}
+              onChange={(i) => {
+                switch (i) {
+                  case 0:
+                    return setCycleTab("Upcoming");
+                  case 1:
+                    return setCycleTab("Completed");
+                  case 2:
+                    return setCycleTab("Drafts");
+
+                  default:
+                    return setCycleTab("Upcoming");
+                }
+              }}
+            >
+              <Tab.List
+                as="div"
+                className="flex items-center justify-start gap-4 text-base font-medium"
+              >
+                <Tab
+                  className={({ selected }) =>
+                    `rounded-3xl border px-5 py-1.5 text-sm outline-none sm:px-7 sm:py-2 sm:text-base ${
+                      selected
+                        ? "border-brand-accent bg-brand-accent text-white"
+                        : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
+                    }`
+                  }
+                >
+                  Upcoming
+                </Tab>
+                <Tab
+                  className={({ selected }) =>
+                    `rounded-3xl border px-5 py-1.5 text-sm outline-none sm:px-7 sm:py-2 sm:text-base ${
+                      selected
+                        ? "border-brand-accent bg-brand-accent text-white"
+                        : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
+                    }`
+                  }
+                >
+                  Completed
+                </Tab>
+                <Tab
+                  className={({ selected }) =>
+                    `rounded-3xl border px-5 py-1.5 text-sm outline-none sm:px-7 sm:py-2 sm:text-base ${
+                      selected
+                        ? "border-brand-accent bg-brand-accent text-white"
+                        : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
+                    }`
+                  }
+                >
+                  Drafts
+                </Tab>
+              </Tab.List>
+              <Tab.Panels>
+                <Tab.Panel as="div" className="mt-8 space-y-5">
+                  <CyclesList
+                    cycles={currentAndUpcomingCycles?.upcoming_cycle}
+                    setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+                    setSelectedCycle={setSelectedCycle}
+                    type="upcoming"
+                  />
+                </Tab.Panel>
+                <Tab.Panel as="div" className="mt-8 space-y-5">
+                  <CompletedCyclesList
+                    setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+                    setSelectedCycle={setSelectedCycle}
+                  />
+                </Tab.Panel>
+                <Tab.Panel as="div" className="mt-8 space-y-5">
+                  <CyclesList
+                    cycles={draftCycles?.draft_cycles}
+                    setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+                    setSelectedCycle={setSelectedCycle}
+                    type="draft"
+                  />
+                </Tab.Panel>
+              </Tab.Panels>
+            </Tab.Group>
+          </div>
+        </div>
+      </div>
+    </ProjectAuthorizationWrapper>
+  );
+};
+
+export default ProjectCycles;
diff --git a/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
new file mode 100644
index 000000000..85ea7551c
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -0,0 +1,238 @@
+import React, { useCallback, useEffect } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// services
+import issuesService from "services/issues.service";
+// layouts
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+// components
+import {
+  IssueDescriptionForm,
+  SubIssuesList,
+  IssueDetailsSidebar,
+  IssueActivitySection,
+  AddComment,
+  IssueAttachmentUpload,
+  IssueAttachments,
+} from "components/issues";
+// ui
+import { Loader, CustomMenu } from "components/ui";
+import { Breadcrumbs } from "components/breadcrumbs";
+// types
+import { IIssue } from "types";
+import type { NextPage } from "next";
+// fetch-keys
+import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS, SUB_ISSUES } from "constants/fetch-keys";
+
+const defaultValues = {
+  name: "",
+  description: "",
+  description_html: "",
+  estimate_point: null,
+  state: "",
+  assignees_list: [],
+  priority: "low",
+  blockers_list: [],
+  blocked_list: [],
+  target_date: new Date().toString(),
+  issue_cycle: null,
+  issue_module: null,
+  labels_list: [],
+};
+
+const IssueDetailsPage: NextPage = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { data: issueDetails, mutate: mutateIssueDetails } = useSWR<IIssue | undefined>(
+    workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
+    workspaceSlug && projectId && issueId
+      ? () =>
+          issuesService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
+      : null
+  );
+
+  const { data: siblingIssues } = useSWR(
+    workspaceSlug && projectId && issueDetails?.parent ? SUB_ISSUES(issueDetails.parent) : null,
+    workspaceSlug && projectId && issueDetails?.parent
+      ? () =>
+          issuesService.subIssues(
+            workspaceSlug as string,
+            projectId as string,
+            issueDetails.parent ?? ""
+          )
+      : null
+  );
+
+  const { reset, control, watch } = useForm<IIssue>({
+    defaultValues,
+  });
+
+  const submitChanges = useCallback(
+    async (formData: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId || !issueId) return;
+
+      mutate(
+        ISSUE_DETAILS(issueId as string),
+        (prevData: IIssue) => ({
+          ...prevData,
+          ...formData,
+        }),
+        false
+      );
+
+      const payload = { ...formData };
+      await issuesService
+        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload)
+        .then((res) => {
+          mutateIssueDetails();
+          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+    },
+    [workspaceSlug, issueId, projectId, mutateIssueDetails]
+  );
+
+  useEffect(() => {
+    if (!issueDetails) return;
+
+    mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+    reset({
+      ...issueDetails,
+      blockers_list:
+        issueDetails.blockers_list ??
+        issueDetails.blocker_issues?.map((issue) => issue.blocker_issue_detail?.id),
+      blocked_list:
+        issueDetails.blocks_list ??
+        issueDetails.blocked_issues?.map((issue) => issue.blocked_issue_detail?.id),
+      assignees_list:
+        issueDetails.assignees_list ?? issueDetails.assignee_details?.map((user) => user.id),
+      labels_list: issueDetails.labels_list ?? issueDetails.labels,
+      labels: issueDetails.labels_list ?? issueDetails.labels,
+    });
+  }, [issueDetails, reset, issueId]);
+
+  return (
+    <ProjectAuthorizationWrapper
+      noPadding
+      breadcrumbs={
+        <Breadcrumbs>
+          <Breadcrumbs.BreadcrumbItem
+            title={`${issueDetails?.project_detail.name ?? "Project"} Issues`}
+            link={`/${workspaceSlug}/projects/${projectId as string}/issues`}
+          />
+          <Breadcrumbs.BreadcrumbItem
+            title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${
+              issueDetails?.sequence_id ?? "..."
+            } Details`}
+          />
+        </Breadcrumbs>
+      }
+    >
+      {issueDetails && projectId ? (
+        <div className="flex h-full">
+          <div className="basis-2/3 space-y-5 divide-y-2 divide-brand-base p-5">
+            <div className="rounded-lg">
+              {issueDetails?.parent && issueDetails.parent !== "" ? (
+                <div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-2 p-2 text-xs">
+                  <Link
+                    href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
+                      issueDetails.parent
+                    }`}
+                  >
+                    <a className="flex items-center gap-2 text-brand-secondary">
+                      <span
+                        className="block h-1.5 w-1.5 rounded-full"
+                        style={{
+                          backgroundColor: issueDetails?.state_detail?.color,
+                        }}
+                      />
+                      <span className="flex-shrink-0">
+                        {issueDetails.project_detail.identifier}-
+                        {issueDetails.parent_detail?.sequence_id}
+                      </span>
+                      <span className="truncate">
+                        {issueDetails.parent_detail?.name.substring(0, 50)}
+                      </span>
+                    </a>
+                  </Link>
+
+                  <CustomMenu ellipsis optionsPosition="left">
+                    {siblingIssues && siblingIssues.length > 0 ? (
+                      siblingIssues.map((issue: IIssue) => (
+                        <CustomMenu.MenuItem key={issue.id}>
+                          <Link
+                            href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
+                              issue.id
+                            }`}
+                          >
+                            <a>
+                              {issueDetails.project_detail.identifier}-{issue.sequence_id}
+                            </a>
+                          </Link>
+                        </CustomMenu.MenuItem>
+                      ))
+                    ) : (
+                      <CustomMenu.MenuItem className="flex items-center gap-2 whitespace-nowrap p-2 text-left text-xs text-brand-secondary">
+                        No other sibling issues
+                      </CustomMenu.MenuItem>
+                    )}
+                  </CustomMenu>
+                </div>
+              ) : null}
+              <IssueDescriptionForm issue={issueDetails} handleFormSubmit={submitChanges} />
+              <div className="mt-2 space-y-2">
+                <SubIssuesList parentIssue={issueDetails} />
+              </div>
+            </div>
+            <div className="flex flex-col gap-3 py-3">
+              <h3 className="text-lg">Attachments</h3>
+              <div className="grid  grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+                <IssueAttachmentUpload />
+                <IssueAttachments />
+              </div>
+            </div>
+            <div className="space-y-5 pt-3">
+              <h3 className="text-lg text-brand-base">Comments/Activity</h3>
+              <IssueActivitySection />
+              <AddComment />
+            </div>
+          </div>
+          <div className="basis-1/3 space-y-5 border-l border-brand-base p-5">
+            <IssueDetailsSidebar
+              control={control}
+              issueDetail={issueDetails}
+              submitChanges={submitChanges}
+              watch={watch}
+            />
+          </div>
+        </div>
+      ) : (
+        <Loader className="flex h-full gap-5 p-5">
+          <div className="basis-2/3 space-y-2">
+            <Loader.Item height="30px" width="40%" />
+            <Loader.Item height="15px" width="60%" />
+            <Loader.Item height="15px" width="60%" />
+            <Loader.Item height="15px" width="40%" />
+          </div>
+          <div className="basis-1/3 space-y-3">
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+          </div>
+        </Loader>
+      )}
+    </ProjectAuthorizationWrapper>
+  );
+};
+
+export default IssueDetailsPage;
diff --git a/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
new file mode 100644
index 000000000..9a763cfc3
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@@ -0,0 +1,66 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import projectService from "services/project.service";
+// layouts
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+// contexts
+import { IssueViewContextProvider } from "contexts/issue-view.context";
+// components
+import { IssuesFilterView, IssuesView } from "components/core";
+// ui
+import { PrimaryButton } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// types
+import type { NextPage } from "next";
+// fetch-keys
+import { PROJECT_DETAILS } from "constants/fetch-keys";
+
+const ProjectIssues: NextPage = () => {
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: projectDetails } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  return (
+    <IssueViewContextProvider>
+      <ProjectAuthorizationWrapper
+        breadcrumbs={
+          <Breadcrumbs>
+            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+            <BreadcrumbItem title={`${projectDetails?.name ?? "Project"} Issues`} />
+          </Breadcrumbs>
+        }
+        right={
+          <div className="flex items-center gap-2">
+            <IssuesFilterView />
+            <PrimaryButton
+              className="flex items-center gap-2"
+              onClick={() => {
+                const e = new KeyboardEvent("keydown", { key: "c" });
+                document.dispatchEvent(e);
+              }}
+            >
+              <PlusIcon className="w-4 h-4" />
+              Add Issue
+            </PrimaryButton>
+          </div>
+        }
+      >
+        <IssuesView />
+      </ProjectAuthorizationWrapper>
+    </IssueViewContextProvider>
+  );
+};
+
+export default ProjectIssues;
diff --git a/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
new file mode 100644
index 000000000..6473aa2a7
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -0,0 +1,219 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// icons
+import {
+  ArrowLeftIcon,
+  ListBulletIcon,
+  PlusIcon,
+  RectangleGroupIcon,
+  RectangleStackIcon,
+} from "@heroicons/react/24/outline";
+// services
+import modulesService from "services/modules.service";
+import issuesService from "services/issues.service";
+// hooks
+import useToast from "hooks/use-toast";
+// layouts
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+// contexts
+import { IssueViewContextProvider } from "contexts/issue-view.context";
+// components
+import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
+import { ModuleDetailsSidebar } from "components/modules";
+// ui
+import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// helpers
+import { truncateText } from "helpers/string.helper";
+// types
+import { IModule } from "types";
+
+// fetch-keys
+import {
+  MODULE_DETAILS,
+  MODULE_ISSUES,
+  MODULE_LIST,
+  PROJECT_ISSUES_LIST,
+} from "constants/fetch-keys";
+
+const SingleModule: React.FC = () => {
+  const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
+  const [moduleSidebar, setModuleSidebar] = useState(true);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { data: issues } = useSWR(
+    workspaceSlug && projectId
+      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
+      : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssues(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: modules } = useSWR(
+    workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => modulesService.getModules(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: moduleIssues } = useSWR(
+    workspaceSlug && projectId && moduleId ? MODULE_ISSUES(moduleId as string) : null,
+    workspaceSlug && projectId && moduleId
+      ? () =>
+          modulesService.getModuleIssues(
+            workspaceSlug as string,
+            projectId as string,
+            moduleId as string
+          )
+      : null
+  );
+
+  const { data: moduleDetails } = useSWR<IModule>(
+    moduleId ? MODULE_DETAILS(moduleId as string) : null,
+    workspaceSlug && projectId
+      ? () =>
+          modulesService.getModuleDetails(
+            workspaceSlug as string,
+            projectId as string,
+            moduleId as string
+          )
+      : null
+  );
+
+  const handleAddIssuesToModule = async (data: { issues: string[] }) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await modulesService
+      .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, data)
+      .then(() => mutate(MODULE_ISSUES(moduleId as string)))
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the module. Please try again.",
+        })
+      );
+  };
+
+  const openIssuesListModal = () => {
+    setModuleIssuesListModal(true);
+  };
+
+  return (
+    <IssueViewContextProvider>
+      <ExistingIssuesListModal
+        isOpen={moduleIssuesListModal}
+        handleClose={() => setModuleIssuesListModal(false)}
+        issues={issues?.filter((i) => !i.module_id) ?? []}
+        handleOnSubmit={handleAddIssuesToModule}
+      />
+      <ProjectAuthorizationWrapper
+        breadcrumbs={
+          <Breadcrumbs>
+            <BreadcrumbItem
+              title={`${moduleDetails?.project_detail.name ?? "Project"} Modules`}
+              link={`/${workspaceSlug}/projects/${projectId}/modules`}
+            />
+          </Breadcrumbs>
+        }
+        left={
+          <CustomMenu
+            label={
+              <>
+                <RectangleGroupIcon className="h-3 w-3" />
+                {moduleDetails?.name && truncateText(moduleDetails.name, 40)}
+              </>
+            }
+            className="ml-1.5"
+            width="auto"
+          >
+            {modules?.map((module) => (
+              <CustomMenu.MenuItem
+                key={module.id}
+                renderAs="a"
+                href={`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`}
+              >
+                {truncateText(module.name, 40)}
+              </CustomMenu.MenuItem>
+            ))}
+          </CustomMenu>
+        }
+        right={
+          <div
+            className={`flex items-center gap-2 ${moduleSidebar ? "mr-[24rem]" : ""} duration-300`}
+          >
+            <IssuesFilterView />
+            <button
+              type="button"
+              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1 ${
+                moduleSidebar ? "rotate-180" : ""
+              }`}
+              onClick={() => setModuleSidebar((prevData) => !prevData)}
+            >
+              <ArrowLeftIcon className="h-4 w-4" />
+            </button>
+          </div>
+        }
+      >
+        {moduleIssues ? (
+          moduleIssues.length > 0 ? (
+            <div className={`h-full ${moduleSidebar ? "mr-[24rem]" : ""} duration-300`}>
+              <IssuesView type="module" openIssuesListModal={openIssuesListModal} />
+            </div>
+          ) : (
+            <div
+              className={`flex h-full flex-col items-center justify-center px-4 ${
+                moduleSidebar ? "mr-[24rem]" : ""
+              } duration-300`}
+            >
+              <EmptySpace
+                title="You don't have any issue yet."
+                description="Modules are smaller, focused projects that help you group and organize issues within a specific time frame."
+                Icon={RectangleStackIcon}
+              >
+                <EmptySpaceItem
+                  title="Create a new issue"
+                  description="Click to create a new issue inside the module."
+                  Icon={PlusIcon}
+                  action={() => {
+                    const e = new KeyboardEvent("keydown", {
+                      key: "c",
+                    });
+                    document.dispatchEvent(e);
+                  }}
+                />
+                <EmptySpaceItem
+                  title="Add an existing issue"
+                  description="Open list"
+                  Icon={ListBulletIcon}
+                  action={openIssuesListModal}
+                />
+              </EmptySpace>
+            </div>
+          )
+        ) : (
+          <div className="flex h-full w-full items-center justify-center">
+            <Spinner />
+          </div>
+        )}
+        <ModuleDetailsSidebar
+          issues={moduleIssues ?? []}
+          module={moduleDetails}
+          isOpen={moduleSidebar}
+          moduleIssues={moduleIssues}
+        />
+      </ProjectAuthorizationWrapper>
+    </IssueViewContextProvider>
+  );
+};
+
+export default SingleModule;
diff --git a/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
new file mode 100644
index 000000000..df7f21708
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -0,0 +1,129 @@
+import React, { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// layouts
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+// services
+import projectService from "services/project.service";
+import modulesService from "services/modules.service";
+// components
+import { CreateUpdateModuleModal, SingleModuleCard } from "components/modules";
+// ui
+import { EmptyState, Loader, PrimaryButton } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// images
+import emptyModule from "public/empty-state/empty-module.svg";
+// types
+import { IModule, SelectModuleType } from "types/modules";
+import type { NextPage } from "next";
+// fetch-keys
+import { MODULE_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+
+const ProjectModules: NextPage = () => {
+  const [selectedModule, setSelectedModule] = useState<SelectModuleType>();
+  const [createUpdateModule, setCreateUpdateModule] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: activeProject } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: modules } = useSWR<IModule[]>(
+    workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => modulesService.getModules(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const handleEditModule = (module: IModule) => {
+    setSelectedModule({ ...module, actionType: "edit" });
+    setCreateUpdateModule(true);
+  };
+
+  useEffect(() => {
+    if (createUpdateModule) return;
+    const timer = setTimeout(() => {
+      setSelectedModule(undefined);
+      clearTimeout(timer);
+    }, 500);
+  }, [createUpdateModule]);
+
+  return (
+    <ProjectAuthorizationWrapper
+      meta={{
+        title: "Plane - Modules",
+      }}
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+          <BreadcrumbItem title={`${activeProject?.name ?? "Project"} Modules`} />
+        </Breadcrumbs>
+      }
+      right={
+        <PrimaryButton
+          className="flex items-center gap-2"
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", { key: "m" });
+            document.dispatchEvent(e);
+          }}
+        >
+          <PlusIcon className="w-4 h-4" />
+          Add Module
+        </PrimaryButton>
+      }
+    >
+      <CreateUpdateModuleModal
+        isOpen={createUpdateModule}
+        setIsOpen={setCreateUpdateModule}
+        data={selectedModule}
+      />
+      {modules ? (
+        modules.length > 0 ? (
+          <div className="space-y-5">
+            <div className="flex flex-col gap-5">
+              <h3 className="text-3xl font-semibold text-brand-base">Modules</h3>
+
+              <div className="grid grid-cols-1 gap-9 sm:grid-cols-2 lg:grid-cols-3">
+                {modules.map((module) => (
+                  <SingleModuleCard
+                    key={module.id}
+                    module={module}
+                    handleEditModule={() => handleEditModule(module)}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <EmptyState
+            type="module"
+            title="Create New Module"
+            description="Modules are smaller, focused projects that help you group and organize issues within a specific time frame."
+            imgURL={emptyModule}
+          />
+        )
+      ) : (
+        <Loader className="grid grid-cols-3 gap-4">
+          <Loader.Item height="100px" />
+          <Loader.Item height="100px" />
+          <Loader.Item height="100px" />
+          <Loader.Item height="100px" />
+          <Loader.Item height="100px" />
+          <Loader.Item height="100px" />
+        </Loader>
+      )}
+    </ProjectAuthorizationWrapper>
+  );
+};
+
+export default ProjectModules;
diff --git a/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
new file mode 100644
index 000000000..1ff51eccb
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -0,0 +1,552 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
+// react-color
+import { TwitterPicker } from "react-color";
+// react-beautiful-dnd
+import { DragDropContext, DropResult } from "react-beautiful-dnd";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+// services
+import projectService from "services/project.service";
+import pagesService from "services/pages.service";
+import issuesService from "services/issues.service";
+// hooks
+import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
+// layouts
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+// components
+import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages";
+// ui
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { CustomSearchSelect, Loader, PrimaryButton, TextArea, Tooltip } from "components/ui";
+// icons
+import {
+  ArrowLeftIcon,
+  LockClosedIcon,
+  LockOpenIcon,
+  PlusIcon,
+  StarIcon,
+  LinkIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+import { ColorPalletteIcon, ClipboardIcon } from "components/icons";
+// helpers
+import { renderShortTime, renderShortDate } from "helpers/date-time.helper";
+import { copyTextToClipboard } from "helpers/string.helper";
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import type { NextPage } from "next";
+import { IIssueLabels, IPage, IPageBlock } from "types";
+// fetch-keys
+import {
+  PAGE_BLOCKS_LIST,
+  PAGE_DETAILS,
+  PROJECT_DETAILS,
+  PROJECT_ISSUE_LABELS,
+} from "constants/fetch-keys";
+
+const SinglePage: NextPage = () => {
+  const [createBlockForm, setCreateBlockForm] = useState(false);
+
+  const scrollToRef = useRef<HTMLDivElement>(null);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, pageId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { user } = useUser();
+
+  const { handleSubmit, reset, watch, setValue } = useForm<IPage>({
+    defaultValues: { name: "" },
+  });
+
+  const { data: projectDetails } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: pageDetails } = useSWR(
+    workspaceSlug && projectId && pageId ? PAGE_DETAILS(pageId as string) : null,
+    workspaceSlug && projectId
+      ? () =>
+          pagesService.getPageDetails(
+            workspaceSlug as string,
+            projectId as string,
+            pageId as string
+          )
+      : null
+  );
+
+  const { data: pageBlocks } = useSWR(
+    workspaceSlug && projectId && pageId ? PAGE_BLOCKS_LIST(pageId as string) : null,
+    workspaceSlug && projectId
+      ? () =>
+          pagesService.listPageBlocks(
+            workspaceSlug as string,
+            projectId as string,
+            pageId as string
+          )
+      : null
+  );
+
+  const { data: labels } = useSWR<IIssueLabels[]>(
+    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const updatePage = async (formData: IPage) => {
+    if (!workspaceSlug || !projectId || !pageId) return;
+
+    if (!formData.name || formData.name.length === 0 || formData.name === "") return;
+
+    await pagesService
+      .patchPage(workspaceSlug as string, projectId as string, pageId as string, formData)
+      .then(() => {
+        mutate<IPage>(
+          PAGE_DETAILS(pageId as string),
+          (prevData) => ({
+            ...prevData,
+            ...formData,
+          }),
+          false
+        );
+      });
+  };
+
+  const partialUpdatePage = async (formData: Partial<IPage>) => {
+    if (!workspaceSlug || !projectId || !pageId) return;
+
+    mutate<IPage>(
+      PAGE_DETAILS(pageId as string),
+      (prevData) => ({
+        ...(prevData as IPage),
+        ...formData,
+        labels: formData.labels_list ? formData.labels_list : (prevData as IPage).labels,
+      }),
+      false
+    );
+
+    await pagesService
+      .patchPage(workspaceSlug as string, projectId as string, pageId as string, formData)
+      .then(() => {
+        mutate(PAGE_DETAILS(pageId as string));
+      });
+  };
+
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug || !projectId || !pageId) return;
+
+    mutate<IPage>(
+      PAGE_DETAILS(pageId as string),
+      (prevData) => ({
+        ...(prevData as IPage),
+        is_favorite: true,
+      }),
+      false
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Success",
+        message: "Added to favorites",
+      });
+    });
+
+    pagesService.addPageToFavorites(workspaceSlug as string, projectId as string, {
+      page: pageId as string,
+    });
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug || !projectId || !pageId) return;
+
+    mutate<IPage>(
+      PAGE_DETAILS(pageId as string),
+      (prevData) => ({
+        ...(prevData as IPage),
+        is_favorite: false,
+      }),
+      false
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Success",
+        message: "Removed from favorites",
+      });
+    });
+
+    pagesService.removePageFromFavorites(
+      workspaceSlug as string,
+      projectId as string,
+      pageId as string
+    );
+  };
+
+  const handleOnDragEnd = (result: DropResult) => {
+    if (!result.destination || !workspaceSlug || !projectId || !pageId || !pageBlocks) return;
+
+    const { source, destination } = result;
+
+    let newSortOrder = pageBlocks.find((p) => p.id === result.draggableId)?.sort_order ?? 65535;
+
+    if (destination.index === 0) newSortOrder = pageBlocks[0].sort_order - 10000;
+    else if (destination.index === pageBlocks.length - 1)
+      newSortOrder = pageBlocks[pageBlocks.length - 1].sort_order + 10000;
+    else {
+      if (destination.index > source.index)
+        newSortOrder =
+          (pageBlocks[destination.index].sort_order +
+            pageBlocks[destination.index + 1].sort_order) /
+          2;
+      else if (destination.index < source.index)
+        newSortOrder =
+          (pageBlocks[destination.index - 1].sort_order +
+            pageBlocks[destination.index].sort_order) /
+          2;
+    }
+
+    const newBlocksList = pageBlocks.map((p) => ({
+      ...p,
+      sort_order: p.id === result.draggableId ? newSortOrder : p.sort_order,
+    }));
+    mutate<IPageBlock[]>(
+      PAGE_BLOCKS_LIST(pageId as string),
+      orderArrayBy(newBlocksList, "sort_order", "ascending"),
+      false
+    );
+
+    pagesService.patchPageBlock(
+      workspaceSlug as string,
+      projectId as string,
+      pageId as string,
+      result.draggableId,
+      {
+        sort_order: newSortOrder,
+      }
+    );
+  };
+
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/pages/${pageId}`).then(
+      () => {
+        setToastAlert({
+          type: "success",
+          title: "Link Copied!",
+          message: "Page link copied to clipboard.",
+        });
+      }
+    );
+  };
+
+  const handleNewBlock = useCallback(() => {
+    setCreateBlockForm(true);
+    scrollToRef.current?.scrollIntoView({
+      behavior: "smooth",
+    });
+  }, [setCreateBlockForm, scrollToRef]);
+
+  const options =
+    labels?.map((label) => ({
+      value: label.id,
+      query: label.name,
+      content: (
+        <div className="flex items-center gap-2">
+          <span
+            className="h-2 w-2 flex-shrink-0 rounded-full"
+            style={{
+              backgroundColor: label.color && label.color !== "" ? label.color : "#000000",
+            }}
+          />
+          {label.name}
+        </div>
+      ),
+    })) ?? [];
+
+  useEffect(() => {
+    if (!pageDetails) return;
+
+    reset({
+      ...pageDetails,
+    });
+  }, [reset, pageDetails]);
+
+  useEffect(() => {
+    const openCreateBlockForm = (e: KeyboardEvent) => {
+      if (e.shiftKey && e.key === "Enter") handleNewBlock();
+    };
+
+    window.addEventListener("keydown", openCreateBlockForm);
+
+    return () => {
+      window.removeEventListener("keydown", openCreateBlockForm);
+    };
+  }, [handleNewBlock, createBlockForm]);
+
+  return (
+    <ProjectAuthorizationWrapper
+      meta={{
+        title: "Plane - Pages",
+      }}
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+          <BreadcrumbItem title={`${projectDetails?.name ?? "Project"} Pages`} />
+        </Breadcrumbs>
+      }
+    >
+      {pageDetails ? (
+        <div className="h-full w-full space-y-4 rounded-md border border-brand-base bg-brand-base p-4">
+          <div className="flex items-center justify-between gap-2 px-3">
+            <button
+              type="button"
+              className="flex items-center gap-2 text-sm text-brand-secondary"
+              onClick={() => router.back()}
+            >
+              <ArrowLeftIcon className="h-4 w-4" />
+              Back
+            </button>
+            <div className="flex flex-wrap gap-1">
+              {pageDetails.labels.length > 0 ? (
+                <>
+                  {pageDetails.labels.map((labelId) => {
+                    const label = labels?.find((label) => label.id === labelId);
+
+                    if (!label) return;
+
+                    return (
+                      <div
+                        key={label.id}
+                        className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50"
+                        onClick={() => {
+                          const updatedLabels = pageDetails.labels.filter((l) => l !== labelId);
+                          partialUpdatePage({ labels_list: updatedLabels });
+                        }}
+                        style={{
+                          backgroundColor: `${
+                            label?.color && label.color !== "" ? label.color : "#000000"
+                          }20`,
+                        }}
+                      >
+                        <span
+                          className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                          style={{
+                            backgroundColor:
+                              label?.color && label.color !== "" ? label.color : "#000000",
+                          }}
+                        />
+                        {label.name}
+                        <XMarkIcon className="h-2.5 w-2.5 group-hover:text-red-500" />
+                      </div>
+                    );
+                  })}
+                  <CustomSearchSelect
+                    customButton={
+                      <button
+                        type="button"
+                        className="flex items-center gap-1 rounded-md bg-brand-surface-2 p-1.5 text-xs"
+                      >
+                        <PlusIcon className="h-3.5 w-3.5" />
+                      </button>
+                    }
+                    value={pageDetails.labels}
+                    onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
+                    options={options}
+                    multiple
+                    noChevron
+                  />
+                </>
+              ) : (
+                <CustomSearchSelect
+                  customButton={
+                    <button
+                      type="button"
+                      className="flex items-center gap-1 rounded-md bg-brand-surface-2 px-3 py-1.5 text-xs"
+                    >
+                      <PlusIcon className="h-3 w-3" />
+                      Add label
+                    </button>
+                  }
+                  value={pageDetails.labels}
+                  onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
+                  options={options}
+                  multiple
+                  noChevron
+                />
+              )}
+            </div>
+            <div className="flex items-center gap-6 text-brand-secondary">
+              <Tooltip
+                tooltipContent={`Last updated at ${renderShortTime(
+                  pageDetails.updated_at
+                )} on ${renderShortDate(pageDetails.updated_at)}`}
+              >
+                <p className="text-sm">{renderShortTime(pageDetails.updated_at)}</p>
+              </Tooltip>
+              <button className="flex items-center gap-2" onClick={handleCopyText}>
+                <LinkIcon className="h-4 w-4" />
+              </button>
+              <div className="flex-shrink-0">
+                <Popover className="relative grid place-items-center">
+                  {({ open }) => (
+                    <>
+                      <Popover.Button
+                        type="button"
+                        className={`group inline-flex items-center outline-none ${
+                          open ? "text-brand-base" : "text-brand-secondary"
+                        }`}
+                      >
+                        {watch("color") && watch("color") !== "" ? (
+                          <span
+                            className="h-4 w-4 rounded"
+                            style={{
+                              backgroundColor: watch("color") ?? "black",
+                            }}
+                          />
+                        ) : (
+                          <ColorPalletteIcon height={16} width={16} />
+                        )}
+                      </Popover.Button>
+
+                      <Transition
+                        as={React.Fragment}
+                        enter="transition ease-out duration-200"
+                        enterFrom="opacity-0 translate-y-1"
+                        enterTo="opacity-100 translate-y-0"
+                        leave="transition ease-in duration-150"
+                        leaveFrom="opacity-100 translate-y-0"
+                        leaveTo="opacity-0 translate-y-1"
+                      >
+                        <Popover.Panel className="absolute top-full right-0 z-20 mt-1 max-w-xs px-2 sm:px-0">
+                          <TwitterPicker
+                            color={pageDetails.color}
+                            onChange={(val) => partialUpdatePage({ color: val.hex })}
+                          />
+                        </Popover.Panel>
+                      </Transition>
+                    </>
+                  )}
+                </Popover>
+              </div>
+              {pageDetails.created_by === user?.id && (
+                <Tooltip
+                  tooltipContent={`${
+                    pageDetails.access
+                      ? "This page is only visible to you."
+                      : "This page can be viewed by anyone in the project."
+                  }`}
+                  theme="dark"
+                >
+                  {pageDetails.access ? (
+                    <button onClick={() => partialUpdatePage({ access: 0 })} className="z-10">
+                      <LockClosedIcon className="h-4 w-4" />
+                    </button>
+                  ) : (
+                    <button
+                      onClick={() => partialUpdatePage({ access: 1 })}
+                      type="button"
+                      className="z-10"
+                    >
+                      <LockOpenIcon className="h-4 w-4" />
+                    </button>
+                  )}
+                </Tooltip>
+              )}
+              {pageDetails.is_favorite ? (
+                <button onClick={handleRemoveFromFavorites} className="z-10">
+                  <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                </button>
+              ) : (
+                <button onClick={handleAddToFavorites} type="button" className="z-10">
+                  <StarIcon className="h-4 w-4" />
+                </button>
+              )}
+            </div>
+          </div>
+          <div className="px-4 pt-6">
+            <TextArea
+              id="name"
+              name="name"
+              placeholder="Page Title"
+              value={watch("name")}
+              onBlur={handleSubmit(updatePage)}
+              onChange={(e) => setValue("name", e.target.value)}
+              required={true}
+              className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-semibold outline-none ring-0 placeholder:text-[#858E96]"
+              role="textbox"
+            />
+          </div>
+          <div className="px-7">
+            {pageBlocks ? (
+              <>
+                <DragDropContext onDragEnd={handleOnDragEnd}>
+                  {pageBlocks.length !== 0 && (
+                    <StrictModeDroppable droppableId="blocks-list">
+                      {(provided) => (
+                        <div ref={provided.innerRef} {...provided.droppableProps}>
+                          {pageBlocks.map((block, index) => (
+                            <SinglePageBlock
+                              key={block.id}
+                              block={block}
+                              projectDetails={projectDetails}
+                              index={index}
+                            />
+                          ))}
+                          {provided.placeholder}
+                        </div>
+                      )}
+                    </StrictModeDroppable>
+                  )}
+                </DragDropContext>
+                {!createBlockForm && (
+                  <button
+                    type="button"
+                    className="mt-4 flex items-center gap-1 rounded-full bg-brand-base px-2 py-1 pr-2.5 text-xs hover:bg-brand-surface-2"
+                    onClick={handleNewBlock}
+                  >
+                    <PlusIcon className="h-3 w-3" />
+                    Add new block
+                  </button>
+                )}
+                {createBlockForm && (
+                  <div className="mt-4" ref={scrollToRef}>
+                    <CreateUpdateBlockInline
+                      handleClose={() => setCreateBlockForm(false)}
+                      focus="name"
+                      setGptAssistantModal={() => {}}
+                    />
+                  </div>
+                )}
+              </>
+            ) : (
+              <Loader>
+                <Loader.Item height="150px" />
+                <Loader.Item height="150px" />
+              </Loader>
+            )}
+          </div>
+        </div>
+      ) : (
+        <Loader>
+          <Loader.Item height="200px" />
+        </Loader>
+      )}
+    </ProjectAuthorizationWrapper>
+  );
+};
+
+export default SinglePage;
diff --git a/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
new file mode 100644
index 000000000..8dcb636a1
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -0,0 +1,311 @@
+import { useState } from "react";
+
+import { useRouter } from "next/router";
+import dynamic from "next/dynamic";
+
+import useSWR, { mutate } from "swr";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// headless ui
+import { Tab } from "@headlessui/react";
+// services
+import projectService from "services/project.service";
+import pagesService from "services/pages.service";
+// hooks
+import useToast from "hooks/use-toast";
+import useLocalStorage from "hooks/use-local-storage";
+// icons
+import { PlusIcon } from "components/icons";
+// layouts
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+// components
+import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "components/pages";
+// ui
+import { Input, PrimaryButton } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import {ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+// types
+import { IPage, TPageViewProps } from "types";
+import type { NextPage } from "next";
+// fetch-keys
+import {
+  ALL_PAGES_LIST,
+  MY_PAGES_LIST,
+  PROJECT_DETAILS,
+  RECENT_PAGES_LIST,
+} from "constants/fetch-keys";
+
+const AllPagesList = dynamic<TPagesListProps>(
+  () => import("components/pages").then((a) => a.AllPagesList),
+  {
+    ssr: false,
+  }
+);
+
+const FavoritePagesList = dynamic<TPagesListProps>(
+  () => import("components/pages").then((a) => a.FavoritePagesList),
+  {
+    ssr: false,
+  }
+);
+
+const MyPagesList = dynamic<TPagesListProps>(
+  () => import("components/pages").then((a) => a.MyPagesList),
+  {
+    ssr: false,
+  }
+);
+
+const OtherPagesList = dynamic<TPagesListProps>(
+  () => import("components/pages").then((a) => a.OtherPagesList),
+  {
+    ssr: false,
+  }
+);
+
+const ProjectPages: NextPage = () => {
+  const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false);
+
+  const [viewType, setViewType] = useState<TPageViewProps>("list");
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { storedValue: pageTab, setValue: setPageTab } = useLocalStorage("pageTab", "Recent");
+
+  const {
+    handleSubmit,
+    register,
+    watch,
+    reset,
+    formState: { isSubmitting },
+  } = useForm<Partial<IPage>>({
+    defaultValues: {
+      name: "",
+    },
+  });
+
+  const { data: projectDetails } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const createPage = async (formData: Partial<IPage>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    if (formData.name === "") {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Page name is required",
+      });
+      return;
+    }
+
+    await pagesService
+      .createPage(workspaceSlug as string, projectId as string, formData)
+      .then((res) => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Page created successfully.",
+        });
+        router.push(`/${workspaceSlug}/projects/${projectId}/pages/${res.id}`);
+        reset();
+
+        mutate(RECENT_PAGES_LIST(projectId as string));
+        mutate<IPage[]>(
+          MY_PAGES_LIST(projectId as string),
+          (prevData) => {
+            if (!prevData) return undefined;
+
+            return [res, ...(prevData as IPage[])];
+          },
+          false
+        );
+        mutate<IPage[]>(
+          ALL_PAGES_LIST(projectId as string),
+          (prevData) => {
+            if (!prevData) return undefined;
+
+            return [res, ...(prevData as IPage[])];
+          },
+          false
+        );
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Page could not be created. Please try again",
+        });
+      });
+  };
+
+  const currentTabValue = (tab: string | null) => {
+    switch (tab) {
+      case "Recent":
+        return 0;
+      case "All":
+        return 1;
+      case "Favorites":
+        return 2;
+      case "Created by me":
+        return 3;
+      case "Created by others":
+        return 4;
+
+      default:
+        return 0;
+    }
+  };
+
+  return (
+    <>
+      <CreateUpdatePageModal
+        isOpen={createUpdatePageModal}
+        handleClose={() => setCreateUpdatePageModal(false)}
+      />
+      <ProjectAuthorizationWrapper
+        meta={{
+          title: "Plane - Pages",
+        }}
+        breadcrumbs={
+          <Breadcrumbs>
+            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+            <BreadcrumbItem title={`${projectDetails?.name ?? "Project"} Pages`} />
+          </Breadcrumbs>
+        }
+        right={
+          <PrimaryButton
+            className="flex items-center gap-2"
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", { key: "d" });
+              document.dispatchEvent(e);
+            }}
+          >
+            <PlusIcon className="h-4 w-4" />
+            Create Page
+          </PrimaryButton>
+        }
+      >
+        <div className="space-y-4">
+          <form
+            onSubmit={handleSubmit(createPage)}
+            className="relative mb-12 flex items-center justify-between gap-2 rounded-[6px] border border-brand-base p-2 shadow"
+          >
+            <Input
+              type="text"
+              name="name"
+              register={register}
+              className="flex break-all border-none text-xl font-medium outline-none focus:ring-0"
+              placeholder="Title"
+            />
+            {watch("name") !== "" && (
+              <PrimaryButton type="submit" loading={isSubmitting}>
+                {isSubmitting ? "Creating..." : "Create"}
+              </PrimaryButton>
+            )}
+          </form>
+          <div>
+            <Tab.Group
+              defaultIndex={currentTabValue(pageTab)}
+              onChange={(i) => {
+                switch (i) {
+                  case 0:
+                    return setPageTab("Recent");
+                  case 1:
+                    return setPageTab("All");
+                  case 2:
+                    return setPageTab("Favorites");
+                  case 3:
+                    return setPageTab("Created by me");
+                  case 4:
+                    return setPageTab("Created by others");
+
+                  default:
+                    return setPageTab("Recent");
+                }
+              }}
+            >
+              <Tab.List as="div" className="mb-6 flex items-center justify-between">
+                <div className="flex gap-4">
+                  {["Recent", "All", "Favorites", "Created by me", "Created by others"].map(
+                    (tab, index) => (
+                      <Tab
+                        key={index}
+                        className={({ selected }) =>
+                          `rounded-full border px-5 py-1.5 text-sm outline-none ${
+                            selected
+                              ? "border-brand-accent bg-brand-accent text-white"
+                              : "border-brand-base bg-brand-base hover:bg-brand-surface-1"
+                          }`
+                        }
+                      >
+                        {tab}
+                      </Tab>
+                    )
+                  )}
+                </div>
+                <div className="flex gap-x-1">
+                  <button
+                    type="button"
+                    className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+                      viewType === "list" ? "bg-brand-surface-2" : ""
+                    }`}
+                    onClick={() => setViewType("list")}
+                  >
+                    <ListBulletIcon className="h-4 w-4" />
+                  </button>
+                  <button
+                    type="button"
+                    className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+                      viewType === "detailed" ? "bg-brand-surface-2" : ""
+                    }`}
+                    onClick={() => setViewType("detailed")}
+                  >
+                    <Squares2X2Icon className="h-4 w-4" />
+                  </button>
+                  {/* <button
+                    type="button"
+                    className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+                      viewType === "masonry" ? "bg-brand-surface-2" : ""
+                    }`}
+                    onClick={() => setViewType("masonry")}
+                  >
+                    <RectangleGroupIcon className="h-4 w-4" />
+                  </button> */}
+                </div>
+              </Tab.List>
+              <Tab.Panels>
+                <Tab.Panel>
+                  <RecentPagesList viewType={viewType} />
+                </Tab.Panel>
+                <Tab.Panel>
+                  <AllPagesList viewType={viewType} />
+                </Tab.Panel>
+                <Tab.Panel>
+                  <FavoritePagesList viewType={viewType} />
+                </Tab.Panel>
+                <Tab.Panel>
+                  <MyPagesList viewType={viewType} />
+                </Tab.Panel>
+                <Tab.Panel>
+                  <OtherPagesList viewType={viewType} />
+                </Tab.Panel>
+              </Tab.Panels>
+            </Tab.Group>
+          </div>
+        </div>
+      </ProjectAuthorizationWrapper>
+    </>
+  );
+};
+
+export default ProjectPages;
diff --git a/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx b/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
new file mode 100644
index 000000000..b13fbd4b9
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
@@ -0,0 +1,239 @@
+import React, { useEffect } from "react";
+
+import { useRouter } from "next/router";
+import Image from "next/image";
+
+import useSWR, { mutate } from "swr";
+
+import { Controller, useForm } from "react-hook-form";
+// layouts
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+// services
+import projectService from "services/project.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { CustomSelect, Loader, SecondaryButton } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// types
+import { IProject, IWorkspace } from "types";
+import type { NextPage } from "next";
+// fetch-keys
+import { PROJECTS_LIST, PROJECT_DETAILS, PROJECT_MEMBERS } from "constants/fetch-keys";
+
+const defaultValues: Partial<IProject> = {
+  project_lead: null,
+  default_assignee: null,
+};
+
+const ControlSettings: NextPage = () => {
+  const { setToastAlert } = useToast();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: projectDetails } = useSWR<IProject>(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: people } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const {
+    handleSubmit,
+    reset,
+    control,
+    formState: { isSubmitting },
+  } = useForm<IProject>({ defaultValues });
+
+  useEffect(() => {
+    if (projectDetails)
+      reset({
+        ...projectDetails,
+        default_assignee: projectDetails.default_assignee?.id ?? projectDetails.default_assignee,
+        project_lead: projectDetails.project_lead?.id ?? projectDetails.project_lead,
+        workspace: (projectDetails.workspace as IWorkspace).id,
+      });
+  }, [projectDetails, reset]);
+
+  const onSubmit = async (formData: IProject) => {
+    if (!workspaceSlug || !projectId) return;
+    const payload: Partial<IProject> = {
+      name: formData.name,
+      network: formData.network,
+      identifier: formData.identifier,
+      description: formData.description,
+      default_assignee: formData.default_assignee,
+      project_lead: formData.project_lead,
+      icon: formData.icon,
+    };
+    await projectService
+      .updateProject(workspaceSlug as string, projectId as string, payload)
+      .then((res) => {
+        mutate(PROJECT_DETAILS(projectId as string));
+        mutate(PROJECTS_LIST(workspaceSlug as string));
+
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Project updated successfully",
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  return (
+    <ProjectAuthorizationWrapper
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem
+            title={`${projectDetails?.name ?? "Project"}`}
+            link={`/${workspaceSlug}/projects/${projectId}/issues`}
+          />
+          <BreadcrumbItem title="Control Settings" />
+        </Breadcrumbs>
+      }
+    >
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="space-y-8 sm:space-y-12">
+          <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold">Project Lead</h4>
+              <p className="text-brand-secondary">Select the project leader.</p>
+            </div>
+            <div className="col-span-12 sm:col-span-6">
+              {projectDetails ? (
+                <Controller
+                  name="project_lead"
+                  control={control}
+                  render={({ field }) => (
+                    <CustomSelect
+                      {...field}
+                      label={
+                        people?.find((person) => person.member.id === field.value)?.member
+                          .first_name ?? "Select Lead"
+                      }
+                      width="w-full"
+                      input
+                    >
+                      {people?.map((person) => (
+                        <CustomSelect.Option
+                          key={person.member.id}
+                          value={person.member.id}
+                          className="flex items-center gap-2"
+                        >
+                          <div className="flex items-center gap-2">
+                            {person.member.avatar && person.member.avatar !== "" ? (
+                              <div className="relative h-4 w-4">
+                                <Image
+                                  src={person.member.avatar}
+                                  alt="avatar"
+                                  className="rounded-full"
+                                  layout="fill"
+                                  objectFit="cover"
+                                />
+                              </div>
+                            ) : (
+                              <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
+                                {person.member.first_name && person.member.first_name !== ""
+                                  ? person.member.first_name.charAt(0)
+                                  : person.member.email.charAt(0)}
+                              </div>
+                            )}
+                            {person.member.first_name !== ""
+                              ? person.member.first_name
+                              : person.member.email}
+                          </div>
+                        </CustomSelect.Option>
+                      ))}
+                    </CustomSelect>
+                  )}
+                />
+              ) : (
+                <Loader className="h-9 w-full">
+                  <Loader.Item width="100%" height="100%" />
+                </Loader>
+              )}
+            </div>
+          </div>
+          <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold">Default Assignee</h4>
+              <p className="text-brand-secondary">Select the default assignee for the project.</p>
+            </div>
+            <div className="col-span-12 sm:col-span-6">
+              {projectDetails ? (
+                <Controller
+                  name="default_assignee"
+                  control={control}
+                  render={({ field }) => (
+                    <CustomSelect
+                      {...field}
+                      label={
+                        people?.find((p) => p.member.id === field.value)?.member.first_name ??
+                        "Select Default Assignee"
+                      }
+                      width="w-full"
+                      input
+                    >
+                      {people?.map((person) => (
+                        <CustomSelect.Option
+                          key={person.member.id}
+                          value={person.member.id}
+                          className="flex items-center gap-2"
+                        >
+                          <div className="flex items-center gap-2">
+                            {person.member.avatar && person.member.avatar !== "" ? (
+                              <div className="relative h-4 w-4">
+                                <Image
+                                  src={person.member.avatar}
+                                  alt="avatar"
+                                  className="rounded-full"
+                                  layout="fill"
+                                  objectFit="cover"
+                                />
+                              </div>
+                            ) : (
+                              <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
+                                {person.member.first_name && person.member.first_name !== ""
+                                  ? person.member.first_name.charAt(0)
+                                  : person.member.email.charAt(0)}
+                              </div>
+                            )}
+                            {person.member.first_name !== ""
+                              ? person.member.first_name
+                              : person.member.email}
+                          </div>
+                        </CustomSelect.Option>
+                      ))}
+                    </CustomSelect>
+                  )}
+                />
+              ) : (
+                <Loader className="h-9 w-full">
+                  <Loader.Item width="100%" height="100%" />
+                </Loader>
+              )}
+            </div>
+          </div>
+          <div className="sm:text-right">
+            <SecondaryButton type="submit" loading={isSubmitting}>
+              {isSubmitting ? "Updating Project..." : "Update Project"}
+            </SecondaryButton>
+          </div>
+        </div>
+      </form>
+    </ProjectAuthorizationWrapper>
+  );
+};
+
+export default ControlSettings;
diff --git a/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
new file mode 100644
index 000000000..4ea47423f
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -0,0 +1,166 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import estimatesService from "services/estimates.service";
+import projectService from "services/project.service";
+// hooks
+import useProjectDetails from "hooks/use-project-details";
+// layouts
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+// components
+import { CreateUpdateEstimateModal, SingleEstimate } from "components/estimates";
+//hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Loader, SecondaryButton } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// types
+import { IEstimate, IProject } from "types";
+import type { NextPage } from "next";
+// fetch-keys
+import { ESTIMATES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+
+const EstimatesSettings: NextPage = () => {
+  const [estimateFormOpen, setEstimateFormOpen] = useState(false);
+
+  const [estimateToUpdate, setEstimateToUpdate] = useState<IEstimate | undefined>();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { projectDetails } = useProjectDetails();
+
+  const { data: estimatesList } = useSWR<IEstimate[]>(
+    workspaceSlug && projectId ? ESTIMATES_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => estimatesService.getEstimatesList(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const editEstimate = (estimate: IEstimate) => {
+    setEstimateToUpdate(estimate);
+    setEstimateFormOpen(true);
+  };
+
+  const removeEstimate = (estimateId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate<IEstimate[]>(
+      ESTIMATES_LIST(projectId as string),
+      (prevData) => (prevData ?? []).filter((p) => p.id !== estimateId),
+      false
+    );
+
+    estimatesService
+      .deleteEstimate(workspaceSlug as string, projectId as string, estimateId)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Error: Estimate could not be deleted. Please try again",
+        });
+      });
+  };
+
+  const disableEstimates = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate<IProject>(
+      PROJECT_DETAILS(projectId as string),
+      (prevData) => {
+        if (!prevData) return prevData;
+
+        return { ...prevData, estimate: null };
+      },
+      false
+    );
+
+    projectService
+      .updateProject(workspaceSlug as string, projectId as string, { estimate: null })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Estimate could not be disabled. Please try again",
+        })
+      );
+  };
+
+  return (
+    <>
+      <ProjectAuthorizationWrapper
+        breadcrumbs={
+          <Breadcrumbs>
+            <BreadcrumbItem
+              title={`${projectDetails?.name ?? "Project"}`}
+              link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+            />
+            <BreadcrumbItem title="Estimates Settings" />
+          </Breadcrumbs>
+        }
+      >
+        <CreateUpdateEstimateModal
+          isOpen={estimateFormOpen}
+          data={estimateToUpdate}
+          handleClose={() => {
+            setEstimateFormOpen(false);
+            setEstimateToUpdate(undefined);
+          }}
+        />
+        <section className="flex items-center justify-between">
+          <h3 className="text-2xl font-semibold">Estimates</h3>
+          <div className="col-span-12 space-y-5 sm:col-span-7">
+            <div className="flex items-center gap-2">
+              <span
+                className="flex cursor-pointer items-center gap-2 text-theme"
+                onClick={() => {
+                  setEstimateToUpdate(undefined);
+                  setEstimateFormOpen(true);
+                }}
+              >
+                <PlusIcon className="h-4 w-4" />
+                Create New Estimate
+              </span>
+              {projectDetails?.estimate && (
+                <SecondaryButton onClick={disableEstimates}>Disable Estimates</SecondaryButton>
+              )}
+            </div>
+          </div>
+        </section>
+        {estimatesList && estimatesList.length > 0 && (
+          <section className="mt-4 mb-8 divide-y divide-brand-base rounded-xl border border-brand-base bg-brand-base px-6">
+            <>
+              {estimatesList ? (
+                estimatesList.map((estimate) => (
+                  <SingleEstimate
+                    key={estimate.id}
+                    estimate={estimate}
+                    editEstimate={(estimate) => editEstimate(estimate)}
+                    handleEstimateDelete={(estimateId) => removeEstimate(estimateId)}
+                  />
+                ))
+              ) : (
+                <Loader className="space-y-5">
+                  <Loader.Item height="40px" />
+                  <Loader.Item height="40px" />
+                  <Loader.Item height="40px" />
+                  <Loader.Item height="40px" />
+                </Loader>
+              )}
+            </>
+          </section>
+        )}
+      </ProjectAuthorizationWrapper>
+    </>
+  );
+};
+
+export default EstimatesSettings;
diff --git a/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
new file mode 100644
index 000000000..4e48e2916
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -0,0 +1,272 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import projectService from "services/project.service";
+import trackEventServices from "services/track-event.service";
+// layouts
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { SecondaryButton } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { ContrastIcon, PeopleGroupIcon, ViewListIcon } from "components/icons";
+import { DocumentTextIcon } from "@heroicons/react/24/outline";
+// types
+import { IProject } from "types";
+import type { NextPage } from "next";
+// fetch-keys
+import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+
+const FeaturesSettings: NextPage = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { data: projectDetails } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const handleSubmit = async (formData: Partial<IProject>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate<IProject>(
+      PROJECT_DETAILS(projectId as string),
+      (prevData) => ({ ...(prevData as IProject), ...formData }),
+      false
+    );
+
+    mutate<IProject[]>(
+      PROJECTS_LIST(workspaceSlug as string),
+      (prevData) =>
+        prevData?.map((p) => {
+          if (p.id === projectId)
+            return {
+              ...p,
+              ...formData,
+            };
+
+          return p;
+        }),
+      false
+    );
+
+    await projectService
+      .updateProject(workspaceSlug as string, projectId as string, formData)
+      .then((res) => {
+        mutate(PROJECT_DETAILS(projectId as string));
+        mutate(PROJECTS_LIST(workspaceSlug as string));
+        setToastAlert({
+          title: "Success!",
+          type: "success",
+          message: "Project features updated successfully.",
+        });
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+
+  return (
+    <ProjectAuthorizationWrapper
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem
+            title={`${projectDetails?.name ?? "Project"}`}
+            link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+          />
+          <BreadcrumbItem title="Features Settings" />
+        </Breadcrumbs>
+      }
+    >
+      <section className="space-y-8">
+        <h3 className="text-2xl font-semibold">Features</h3>
+        <div className="space-y-5">
+          <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
+            <div className="flex items-start gap-3">
+              <ContrastIcon color="#3F76FF" width={28} height={28} className="flex-shrink-0" />
+              <div>
+                <h4 className="text-xl font-semibold">Cycles</h4>
+                <p className="text-brand-secondary">
+                  Cycles are enabled for all the projects in this workspace. Access them from the
+                  navigation bar.
+                </p>
+              </div>
+            </div>
+            <button
+              type="button"
+              className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                projectDetails?.cycle_view ? "bg-green-500" : "bg-brand-surface-2"
+              }`}
+              role="switch"
+              aria-checked={projectDetails?.cycle_view}
+              onClick={() => {
+                trackEventServices.trackMiscellaneousEvent(
+                  {
+                    workspaceId: (projectDetails?.workspace as any)?.id,
+                    workspaceSlug,
+                    projectId,
+                    projectIdentifier: projectDetails?.identifier,
+                    projectName: projectDetails?.name,
+                  },
+                  !projectDetails?.cycle_view ? "TOGGLE_CYCLE_ON" : "TOGGLE_CYCLE_OFF"
+                );
+                handleSubmit({ cycle_view: !projectDetails?.cycle_view });
+              }}
+            >
+              <span className="sr-only">Use cycles</span>
+              <span
+                aria-hidden="true"
+                className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
+                  projectDetails?.cycle_view ? "translate-x-5" : "translate-x-0"
+                }`}
+              />
+            </button>
+          </div>
+          <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
+            <div className="flex items-start gap-3">
+              <PeopleGroupIcon color="#FF6B00" width={28} height={28} className="flex-shrink-0" />
+              <div>
+                <h4 className="-mt-1.5 text-xl font-semibold">Modules</h4>
+                <p className="text-brand-secondary">
+                  Modules are enabled for all the projects in this workspace. Access it from the
+                  navigation bar.
+                </p>
+              </div>
+            </div>
+            <button
+              type="button"
+              className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                projectDetails?.module_view ? "bg-green-500" : "bg-brand-surface-2"
+              }`}
+              role="switch"
+              aria-checked={projectDetails?.module_view}
+              onClick={() => {
+                trackEventServices.trackMiscellaneousEvent(
+                  {
+                    workspaceId: (projectDetails?.workspace as any)?.id,
+                    workspaceSlug,
+                    projectId,
+                    projectIdentifier: projectDetails?.identifier,
+                    projectName: projectDetails?.name,
+                  },
+                  !projectDetails?.module_view ? "TOGGLE_MODULE_ON" : "TOGGLE_MODULE_OFF"
+                );
+                handleSubmit({ module_view: !projectDetails?.module_view });
+              }}
+            >
+              <span className="sr-only">Use cycles</span>
+              <span
+                aria-hidden="true"
+                className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
+                  projectDetails?.module_view ? "translate-x-5" : "translate-x-0"
+                }`}
+              />
+            </button>
+          </div>
+          <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
+            <div className="flex items-start gap-3">
+              <ViewListIcon color="#05C3FF" width={28} height={28} className="flex-shrink-0" />
+              <div>
+                <h4 className="-mt-1.5 text-xl font-semibold">Views</h4>
+                <p className="text-brand-secondary">
+                  Views are enabled for all the projects in this workspace. Access it from the
+                  navigation bar.
+                </p>
+              </div>
+            </div>
+            <button
+              type="button"
+              className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                projectDetails?.issue_views_view ? "bg-green-500" : "bg-brand-surface-2"
+              }`}
+              role="switch"
+              aria-checked={projectDetails?.issue_views_view}
+              onClick={() => {
+                trackEventServices.trackMiscellaneousEvent(
+                  {
+                    workspaceId: (projectDetails?.workspace as any)?.id,
+                    workspaceSlug,
+                    projectId,
+                    projectIdentifier: projectDetails?.identifier,
+                    projectName: projectDetails?.name,
+                  },
+                  !projectDetails?.issue_views_view ? "TOGGLE_VIEW_ON" : "TOGGLE_VIEW_OFF"
+                );
+                handleSubmit({ issue_views_view: !projectDetails?.issue_views_view });
+              }}
+            >
+              <span className="sr-only">Use views</span>
+              <span
+                aria-hidden="true"
+                className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
+                  projectDetails?.issue_views_view ? "translate-x-5" : "translate-x-0"
+                }`}
+              />
+            </button>
+          </div>
+          <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
+            <div className="flex items-start gap-3">
+              <DocumentTextIcon color="#FCBE1D" width={28} height={28} className="flex-shrink-0" />
+              <div>
+                <h4 className="text-xl font-semibold">Pages</h4>
+                <p className="text-brand-secondary">
+                  Pages are enabled for all the projects in this workspace. Access them from the
+                  navigation bar.
+                </p>
+              </div>
+            </div>
+            <button
+              type="button"
+              className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                projectDetails?.page_view ? "bg-green-500" : "bg-brand-surface-2"
+              }`}
+              role="switch"
+              aria-checked={projectDetails?.page_view}
+              onClick={() => {
+                trackEventServices.trackMiscellaneousEvent(
+                  {
+                    workspaceId: (projectDetails?.workspace as any)?.id,
+                    workspaceSlug,
+                    projectId,
+                    projectIdentifier: projectDetails?.identifier,
+                    projectName: projectDetails?.name,
+                  },
+                  !projectDetails?.page_view ? "TOGGLE_PAGES_ON" : "TOGGLE_PAGES_OFF"
+                );
+                handleSubmit({ page_view: !projectDetails?.page_view });
+              }}
+            >
+              <span className="sr-only">Use cycles</span>
+              <span
+                aria-hidden="true"
+                className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
+                  projectDetails?.page_view ? "translate-x-5" : "translate-x-0"
+                }`}
+              />
+            </button>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <a href="https://plane.so/" target="_blank" rel="noreferrer">
+            <SecondaryButton outline>Plane is open-source, view Roadmap</SecondaryButton>
+          </a>
+          <a href="https://github.com/makeplane/plane" target="_blank" rel="noreferrer">
+            <SecondaryButton outline>Star us on GitHub</SecondaryButton>
+          </a>
+        </div>
+      </section>
+    </ProjectAuthorizationWrapper>
+  );
+};
+
+export default FeaturesSettings;
diff --git a/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
new file mode 100644
index 000000000..8c75c247c
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -0,0 +1,369 @@
+import { useEffect, useState } from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// layouts
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+// services
+import projectService from "services/project.service";
+// components
+import { DeleteProjectModal } from "components/project";
+import { ImagePickerPopover } from "components/core";
+import EmojiIconPicker from "components/emoji-icon-picker";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import {
+  Input,
+  TextArea,
+  Loader,
+  CustomSelect,
+  OutlineButton,
+  SecondaryButton,
+} from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// types
+import { IProject, IWorkspace } from "types";
+import type { NextPage } from "next";
+// fetch-keys
+import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+// constants
+import { NETWORK_CHOICES } from "constants/project";
+
+const defaultValues: Partial<IProject> = {
+  name: "",
+  description: "",
+  identifier: "",
+  network: 0,
+};
+
+const GeneralSettings: NextPage = () => {
+  const [selectProject, setSelectedProject] = useState<string | null>(null);
+
+  const { setToastAlert } = useToast();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: projectDetails } = useSWR<IProject>(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    watch,
+    control,
+    setValue,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<IProject>({
+    defaultValues,
+  });
+
+  useEffect(() => {
+    if (projectDetails)
+      reset({
+        ...projectDetails,
+        default_assignee: projectDetails.default_assignee?.id,
+        project_lead: projectDetails.project_lead?.id,
+        workspace: (projectDetails.workspace as IWorkspace).id,
+      });
+  }, [projectDetails, reset]);
+
+  const updateProject = async (payload: Partial<IProject>) => {
+    if (!workspaceSlug || !projectDetails) return;
+
+    await projectService
+      .updateProject(workspaceSlug as string, projectDetails.id, payload)
+      .then((res) => {
+        mutate<IProject>(
+          PROJECT_DETAILS(projectDetails.id),
+          (prevData) => ({ ...prevData, ...res }),
+          false
+        );
+        mutate(PROJECTS_LIST(workspaceSlug as string));
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Project updated successfully",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Project could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const onSubmit = async (formData: IProject) => {
+    if (!workspaceSlug || !projectDetails) return;
+
+    const payload: Partial<IProject> = {
+      name: formData.name,
+      network: formData.network,
+      identifier: formData.identifier,
+      description: formData.description,
+      default_assignee: formData.default_assignee,
+      project_lead: formData.project_lead,
+      icon: formData.icon,
+      cover_image: formData.cover_image,
+    };
+
+    if (projectDetails.identifier !== formData.identifier)
+      await projectService
+        .checkProjectIdentifierAvailability(workspaceSlug as string, payload.identifier ?? "")
+        .then(async (res) => {
+          if (res.exists) setError("identifier", { message: "Identifier already exists" });
+          else await updateProject(payload);
+        });
+    else await updateProject(payload);
+  };
+
+  return (
+    <ProjectAuthorizationWrapper
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem
+            title={`${projectDetails?.name ?? "Project"}`}
+            link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+          />
+          <BreadcrumbItem title="General Settings" />
+        </Breadcrumbs>
+      }
+    >
+      <DeleteProjectModal
+        data={projectDetails ?? null}
+        isOpen={Boolean(selectProject)}
+        onClose={() => setSelectedProject(null)}
+        onSuccess={() => {
+          router.push(`/${workspaceSlug}/projects`);
+        }}
+      />
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="space-y-8 sm:space-y-12">
+          <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold">Icon & Name</h4>
+              <p className="text-brand-secondary">Select an icon and a name for your project.</p>
+            </div>
+            <div className="col-span-12 flex gap-2 sm:col-span-6">
+              {projectDetails ? (
+                <Controller
+                  control={control}
+                  name="icon"
+                  render={({ field: { value, onChange } }) => (
+                    <EmojiIconPicker
+                      label={value ? String.fromCodePoint(parseInt(value)) : "Icon"}
+                      value={value}
+                      onChange={onChange}
+                    />
+                  )}
+                />
+              ) : (
+                <Loader>
+                  <Loader.Item height="46px" width="46px" />
+                </Loader>
+              )}
+              {projectDetails ? (
+                <Input
+                  id="name"
+                  name="name"
+                  error={errors.name}
+                  register={register}
+                  placeholder="Project Name"
+                  validations={{
+                    required: "Name is required",
+                  }}
+                />
+              ) : (
+                <Loader>
+                  <Loader.Item height="46px" width="225px" />
+                </Loader>
+              )}
+            </div>
+          </div>
+          <div className="grid grid-cols-12 gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold">Description</h4>
+              <p className="text-brand-secondary">Give a description to your project.</p>
+            </div>
+            <div className="col-span-12 sm:col-span-6">
+              {projectDetails ? (
+                <TextArea
+                  id="description"
+                  name="description"
+                  error={errors.description}
+                  register={register}
+                  placeholder="Enter project description"
+                  validations={{}}
+                  className="min-h-[46px]"
+                />
+              ) : (
+                <Loader className="w-full">
+                  <Loader.Item height="46px" width="full" />
+                </Loader>
+              )}
+            </div>
+          </div>
+          <div className="grid grid-cols-12 gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold">Cover Photo</h4>
+              <p className="text-gray-500">Select your cover photo from the given library.</p>
+            </div>
+            <div className="col-span-12 sm:col-span-6">
+              {watch("cover_image") ? (
+                <div className="h-32 w-full rounded border p-1">
+                  <div className="relative h-full w-full rounded">
+                    <Image
+                      src={watch("cover_image")!}
+                      alt={projectDetails?.name ?? "Cover image"}
+                      objectFit="cover"
+                      layout="fill"
+                      className="rounded"
+                    />
+                    <div className="absolute bottom-0 flex w-full justify-end">
+                      <ImagePickerPopover
+                        label={"Change cover"}
+                        onChange={(imageUrl) => {
+                          setValue("cover_image", imageUrl);
+                        }}
+                        value={watch("cover_image")}
+                      />
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <Loader className="w-full">
+                  <Loader.Item height="46px" width="full" />
+                </Loader>
+              )}
+            </div>
+          </div>
+          <div className="grid grid-cols-12 gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold">Identifier</h4>
+              <p className="text-brand-secondary">
+                Create a 1-6 characters{"'"} identifier for the project.
+              </p>
+            </div>
+            <div className="col-span-12 sm:col-span-6">
+              {projectDetails ? (
+                <Input
+                  id="identifier"
+                  name="identifier"
+                  error={errors.identifier}
+                  register={register}
+                  placeholder="Enter identifier"
+                  validations={{
+                    required: "Identifier is required",
+                    validate: (value) =>
+                      /^[A-Z]+$/.test(value) || "Identifier must be uppercase text.",
+                    minLength: {
+                      value: 1,
+                      message: "Identifier must at least be of 1 character",
+                    },
+                    maxLength: {
+                      value: 5,
+                      message: "Identifier must at most be of 5 characters",
+                    },
+                  }}
+                />
+              ) : (
+                <Loader>
+                  <Loader.Item height="46px" width="160px" />
+                </Loader>
+              )}
+            </div>
+          </div>
+          <div className="grid grid-cols-12 gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold">Network</h4>
+              <p className="text-brand-secondary">Select privacy type for the project.</p>
+            </div>
+            <div className="col-span-12 sm:col-span-6">
+              {projectDetails ? (
+                <Controller
+                  name="network"
+                  control={control}
+                  render={({ field: { value, onChange } }) => (
+                    <CustomSelect
+                      value={value}
+                      onChange={onChange}
+                      label={
+                        Object.keys(NETWORK_CHOICES).find((k) => k === value.toString())
+                          ? NETWORK_CHOICES[value.toString() as keyof typeof NETWORK_CHOICES]
+                          : "Select network"
+                      }
+                      input
+                    >
+                      {Object.keys(NETWORK_CHOICES).map((key) => (
+                        <CustomSelect.Option key={key} value={parseInt(key)}>
+                          {NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES]}
+                        </CustomSelect.Option>
+                      ))}
+                    </CustomSelect>
+                  )}
+                />
+              ) : (
+                <Loader className="w-full">
+                  <Loader.Item height="46px" width="160px" />
+                </Loader>
+              )}
+            </div>
+          </div>
+          <div className="sm:text-right">
+            {projectDetails ? (
+              <SecondaryButton type="submit" loading={isSubmitting}>
+                {isSubmitting ? "Updating Project..." : "Update Project"}
+              </SecondaryButton>
+            ) : (
+              <Loader className="mt-2 w-full">
+                <Loader.Item height="34px" width="100px" />
+              </Loader>
+            )}
+          </div>
+          <div className="grid grid-cols-12 gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold">Danger Zone</h4>
+              <p className="text-brand-secondary">
+                The danger zone of the project delete page is a critical area that requires careful
+                consideration and attention. When deleting a project, all of the data and resources
+                within that project will be permanently removed and cannot be recovered.
+              </p>
+            </div>
+            <div className="col-span-12 sm:col-span-6">
+              {projectDetails ? (
+                <div>
+                  <OutlineButton
+                    theme="danger"
+                    onClick={() => setSelectedProject(projectDetails.id ?? null)}
+                  >
+                    Delete Project
+                  </OutlineButton>
+                </div>
+              ) : (
+                <Loader className="mt-2 w-full">
+                  <Loader.Item height="46px" width="100px" />
+                </Loader>
+              )}
+            </div>
+          </div>
+        </div>
+      </form>
+    </ProjectAuthorizationWrapper>
+  );
+};
+
+export default GeneralSettings;
diff --git a/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
new file mode 100644
index 000000000..101044f5c
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -0,0 +1,98 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// layouts
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+// services
+import IntegrationService from "services/integration";
+import projectService from "services/project.service";
+// components
+import { SingleIntegration } from "components/project";
+// ui
+import { EmptySpace, EmptySpaceItem, Loader } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { PlusIcon, PuzzlePieceIcon } from "@heroicons/react/24/outline";
+// types
+import { IProject } from "types";
+import type { NextPage } from "next";
+// fetch-keys
+import { PROJECT_DETAILS, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
+
+const ProjectIntegrations: NextPage = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: projectDetails } = useSWR<IProject>(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: workspaceIntegrations } = useSWR(
+    workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
+    () =>
+      workspaceSlug
+        ? IntegrationService.getWorkspaceIntegrationsList(workspaceSlug as string)
+        : null
+  );
+
+  return (
+    <ProjectAuthorizationWrapper
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem
+            title={`${projectDetails?.name ?? "Project"}`}
+            link={`/${workspaceSlug}/projects/${projectId}/issues`}
+          />
+          <BreadcrumbItem title="Integrations" />
+        </Breadcrumbs>
+      }
+    >
+      {workspaceIntegrations ? (
+        workspaceIntegrations.length > 0 ? (
+          <section className="space-y-8">
+            <h3 className="text-2xl font-semibold">Integrations</h3>
+            <div className="space-y-5">
+              {workspaceIntegrations.map((integration) => (
+                <SingleIntegration
+                  key={integration.integration_detail.id}
+                  integration={integration}
+                />
+              ))}
+            </div>
+          </section>
+        ) : (
+          <div className="grid h-full w-full place-items-center">
+            <EmptySpace
+              title="You haven't added any integration yet."
+              description="Add GitHub and other integrations to sync your project issues."
+              Icon={PuzzlePieceIcon}
+            >
+              <EmptySpaceItem
+                title="Add new integration"
+                Icon={PlusIcon}
+                action={() => {
+                  router.push(`/${workspaceSlug}/settings/integrations`);
+                }}
+              />
+            </EmptySpace>
+          </div>
+        )
+      ) : (
+        <Loader className="space-y-5">
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+        </Loader>
+      )}
+    </ProjectAuthorizationWrapper>
+  );
+};
+
+export default ProjectIntegrations;
diff --git a/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
new file mode 100644
index 000000000..ab7f2e0bc
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -0,0 +1,181 @@
+import React, { useState, useRef } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import projectService from "services/project.service";
+import issuesService from "services/issues.service";
+// lib
+import { requiredAdmin } from "lib/auth";
+// layouts
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+// components
+import {
+  CreateUpdateLabelInline,
+  LabelsListModal,
+  SingleLabel,
+  SingleLabelGroup,
+} from "components/labels";
+// ui
+import { Loader, PrimaryButton } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssueLabels, UserAuth } from "types";
+import type { GetServerSidePropsContext, NextPage } from "next";
+// fetch-keys
+import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+
+const LabelsSettings: NextPage = () => {
+  // create/edit label form
+  const [labelForm, setLabelForm] = useState(false);
+
+  // edit label
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [labelToUpdate, setLabelToUpdate] = useState<IIssueLabels | null>(null);
+
+  // labels list modal
+  const [labelsListModal, setLabelsListModal] = useState(false);
+  const [parentLabel, setParentLabel] = useState<IIssueLabels | undefined>(undefined);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const scrollToRef = useRef<HTMLDivElement>(null);
+
+  const { data: projectDetails } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
+    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const newLabel = () => {
+    setIsUpdating(false);
+    setLabelForm(true);
+  };
+
+  const addLabelToGroup = (parentLabel: IIssueLabels) => {
+    setLabelsListModal(true);
+    setParentLabel(parentLabel);
+  };
+
+  const editLabel = (label: IIssueLabels) => {
+    setLabelForm(true);
+    setIsUpdating(true);
+    setLabelToUpdate(label);
+  };
+
+  const handleLabelDelete = (labelId: string) => {
+    if (workspaceSlug && projectDetails) {
+      mutate((prevData) => prevData?.filter((p) => p.id !== labelId), false);
+      issuesService
+        .deleteIssueLabel(workspaceSlug as string, projectDetails.id, labelId)
+        .catch((e) => console.log(e));
+    }
+  };
+
+  return (
+    <>
+      <LabelsListModal
+        isOpen={labelsListModal}
+        handleClose={() => setLabelsListModal(false)}
+        parent={parentLabel}
+      />
+      <ProjectAuthorizationWrapper
+        breadcrumbs={
+          <Breadcrumbs>
+            <BreadcrumbItem
+              title={`${projectDetails?.name ?? "Project"}`}
+              link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+            />
+            <BreadcrumbItem title="Labels Settings" />
+          </Breadcrumbs>
+        }
+      >
+        <section className="grid grid-cols-12 gap-10">
+          <div className="col-span-12 sm:col-span-5">
+            <h3 className="text-2xl font-semibold">Labels</h3>
+            <p className="text-brand-secondary">Manage the labels of this project.</p>
+            <PrimaryButton onClick={newLabel} size="sm" className="mt-4">
+              <span className="flex items-center gap-2">
+                <PlusIcon className="h-4 w-4" />
+                New label
+              </span>
+            </PrimaryButton>
+          </div>
+          <div className="col-span-12 space-y-5 sm:col-span-7">
+            {labelForm && (
+              <CreateUpdateLabelInline
+                labelForm={labelForm}
+                setLabelForm={setLabelForm}
+                isUpdating={isUpdating}
+                labelToUpdate={labelToUpdate}
+                ref={scrollToRef}
+              />
+            )}
+            <>
+              {issueLabels ? (
+                issueLabels.map((label) => {
+                  const children = issueLabels?.filter((l) => l.parent === label.id);
+
+                  if (children && children.length === 0) {
+                    if (!label.parent)
+                      return (
+                        <SingleLabel
+                          key={label.id}
+                          label={label}
+                          addLabelToGroup={() => addLabelToGroup(label)}
+                          editLabel={(label) => {
+                            editLabel(label);
+                            scrollToRef.current?.scrollIntoView({
+                              behavior: "smooth",
+                            });
+                          }}
+                          handleLabelDelete={handleLabelDelete}
+                        />
+                      );
+                  } else
+                    return (
+                      <SingleLabelGroup
+                        key={label.id}
+                        label={label}
+                        labelChildren={children}
+                        addLabelToGroup={addLabelToGroup}
+                        editLabel={(label) => {
+                          editLabel(label);
+                          scrollToRef.current?.scrollIntoView({
+                            behavior: "smooth",
+                          });
+                        }}
+                        handleLabelDelete={handleLabelDelete}
+                      />
+                    );
+                })
+              ) : (
+                <Loader className="space-y-5">
+                  <Loader.Item height="40px" />
+                  <Loader.Item height="40px" />
+                  <Loader.Item height="40px" />
+                  <Loader.Item height="40px" />
+                </Loader>
+              )}
+            </>
+          </div>
+        </section>
+      </ProjectAuthorizationWrapper>
+    </>
+  );
+};
+
+export default LabelsSettings;
diff --git a/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
new file mode 100644
index 000000000..06efddf27
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -0,0 +1,277 @@
+import { useState } from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import projectService from "services/project.service";
+import workspaceService from "services/workspace.service";
+// hooks
+import useToast from "hooks/use-toast";
+// layouts
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+// components
+import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
+import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
+// ui
+import { CustomMenu, CustomSelect, Loader } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
+// types
+import type { NextPage } from "next";
+// fetch-keys
+import {
+  PROJECT_DETAILS,
+  PROJECT_INVITATIONS,
+  PROJECT_MEMBERS,
+  WORKSPACE_DETAILS,
+} from "constants/fetch-keys";
+// constants
+import { ROLE } from "constants/workspace";
+
+const MembersSettings: NextPage = () => {
+  const [inviteModal, setInviteModal] = useState(false);
+  const [selectedRemoveMember, setSelectedRemoveMember] = useState<string | null>(null);
+  const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState<string | null>(null);
+
+  const { setToastAlert } = useToast();
+
+  const {
+    query: { workspaceSlug, projectId },
+  } = useRouter();
+
+  const { data: activeWorkspace } = useSWR(
+    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
+    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
+  );
+
+  const { data: projectDetails } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: projectMembers, mutate: mutateMembers } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null,
+    {
+      onErrorRetry(err, _, __, revalidate, revalidateOpts) {
+        if (err?.status === 403) return;
+        setTimeout(() => revalidate(revalidateOpts), 5000);
+      },
+    }
+  );
+
+  const { data: projectInvitations, mutate: mutateInvitations } = useSWR(
+    workspaceSlug && projectId ? PROJECT_INVITATIONS : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectInvitations(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const members = [
+    ...(projectMembers?.map((item: any) => ({
+      id: item.id,
+      avatar: item.member?.avatar,
+      first_name: item.member?.first_name,
+      last_name: item.member?.last_name,
+      email: item.member?.email,
+      role: item.role,
+      status: true,
+      member: true,
+    })) || []),
+    ...(projectInvitations?.map((item: any) => ({
+      id: item.id,
+      avatar: item.avatar ?? "",
+      first_name: item.first_name ?? item.email,
+      last_name: item.last_name ?? "",
+      email: item.email,
+      role: item.role,
+      status: item.accepted,
+      member: false,
+    })) || []),
+  ];
+
+  return (
+    <>
+      <ConfirmProjectMemberRemove
+        isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
+        onClose={() => {
+          setSelectedRemoveMember(null);
+          setSelectedInviteRemoveMember(null);
+        }}
+        data={members.find(
+          (item) => item.id === selectedRemoveMember || item.id === selectedInviteRemoveMember
+        )}
+        handleDelete={async () => {
+          if (!activeWorkspace || !projectDetails) return;
+          if (selectedRemoveMember) {
+            await projectService.deleteProjectMember(
+              activeWorkspace.slug,
+              projectDetails.id,
+              selectedRemoveMember
+            );
+            mutateMembers(
+              (prevData) => prevData?.filter((item: any) => item.id !== selectedRemoveMember),
+              false
+            );
+          }
+          if (selectedInviteRemoveMember) {
+            await projectService.deleteProjectInvitation(
+              activeWorkspace.slug,
+              projectDetails.id,
+              selectedInviteRemoveMember
+            );
+            mutateInvitations(
+              (prevData) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
+              false
+            );
+          }
+          setToastAlert({
+            type: "success",
+            message: "Member removed successfully",
+            title: "Success",
+          });
+        }}
+      />
+      <SendProjectInvitationModal
+        isOpen={inviteModal}
+        setIsOpen={setInviteModal}
+        members={members}
+      />
+      <ProjectAuthorizationWrapper
+        breadcrumbs={
+          <Breadcrumbs>
+            <BreadcrumbItem
+              title={`${projectDetails?.name ?? "Project"}`}
+              link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+            />
+            <BreadcrumbItem title="Members Settings" />
+          </Breadcrumbs>
+        }
+      >
+        <section className="space-y-8">
+          <div className="flex items-end justify-between gap-4">
+            <h3 className="text-2xl font-semibold">Members</h3>
+            <button
+              type="button"
+              className="flex items-center gap-2 text-brand-accent outline-none"
+              onClick={() => setInviteModal(true)}
+            >
+              <PlusIcon className="h-4 w-4" />
+              Add Member
+            </button>
+          </div>
+          {!projectMembers || !projectInvitations ? (
+            <Loader className="space-y-5">
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+            </Loader>
+          ) : (
+            <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-surface-1 px-6">
+              {members.length > 0
+                ? members.map((member) => (
+                    <div key={member.id} className="flex items-center justify-between py-6">
+                      <div className="flex items-center gap-x-8 gap-y-2">
+                        <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
+                          {member.avatar && member.avatar !== "" ? (
+                            <Image
+                              src={member.avatar}
+                              alt={member.first_name}
+                              layout="fill"
+                              objectFit="cover"
+                              className="rounded-lg"
+                            />
+                          ) : member.first_name !== "" ? (
+                            member.first_name.charAt(0)
+                          ) : (
+                            member.email.charAt(0)
+                          )}
+                        </div>
+                        <div>
+                          <h4 className="text-sm">
+                            {member.first_name} {member.last_name}
+                          </h4>
+                          <p className="mt-0.5 text-xs text-brand-secondary">{member.email}</p>
+                        </div>
+                      </div>
+                      {!member.member && (
+                        <span className="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800">
+                          Request Pending
+                        </span>
+                      )}
+                      <div className="flex items-center gap-2 text-xs">
+                        <CustomSelect
+                          label={ROLE[member.role as keyof typeof ROLE]}
+                          value={member.role}
+                          onChange={(value: 5 | 10 | 15 | 20 | undefined) => {
+                            if (!activeWorkspace || !projectDetails) return;
+
+                            projectService
+                              .updateProjectMember(
+                                activeWorkspace.slug,
+                                projectDetails.id,
+                                member.id,
+                                {
+                                  role: value,
+                                }
+                              )
+                              .then((res) => {
+                                setToastAlert({
+                                  type: "success",
+                                  message: "Member role updated successfully.",
+                                  title: "Success",
+                                });
+                                mutateMembers(
+                                  (prevData: any) =>
+                                    prevData.map((m: any) =>
+                                      m.id === member.id ? { ...m, ...res, role: value } : m
+                                    ),
+                                  false
+                                );
+                              })
+                              .catch((err) => {
+                                console.log(err);
+                              });
+                          }}
+                        >
+                          {Object.keys(ROLE).map((key) => (
+                            <CustomSelect.Option key={key} value={key}>
+                              <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
+                            </CustomSelect.Option>
+                          ))}
+                        </CustomSelect>
+                        <CustomMenu ellipsis>
+                          <CustomMenu.MenuItem
+                            onClick={() => {
+                              if (member.member) setSelectedRemoveMember(member.id);
+                              else setSelectedInviteRemoveMember(member.id);
+                            }}
+                          >
+                            <span className="flex items-center justify-start gap-2">
+                              <XMarkIcon className="h-4 w-4" />
+                              <span>Remove member</span>
+                            </span>
+                          </CustomMenu.MenuItem>
+                        </CustomMenu>
+                      </div>
+                    </div>
+                  ))
+                : null}
+            </div>
+          )}
+        </section>
+      </ProjectAuthorizationWrapper>
+    </>
+  );
+};
+
+export default MembersSettings;
diff --git a/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
new file mode 100644
index 000000000..a91c1c6cb
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -0,0 +1,150 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import stateService from "services/state.service";
+import projectService from "services/project.service";
+// layouts
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+// components
+import {
+  CreateUpdateStateInline,
+  DeleteStateModal,
+  SingleState,
+  StateGroup,
+} from "components/states";
+// ui
+import { Loader } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// helpers
+import { getStatesList, orderStateGroups } from "helpers/state.helper";
+// types
+import type { NextPage } from "next";
+// fetch-keys
+import { PROJECT_DETAILS, STATE_LIST } from "constants/fetch-keys";
+
+const StatesSettings: NextPage = () => {
+  const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
+  const [selectedState, setSelectedState] = useState<string | null>(null);
+  const [selectDeleteState, setSelectDeleteState] = useState<string | null>(null);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: projectDetails } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: states } = useSWR(
+    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
+      : null
+  );
+  const orderedStateGroups = orderStateGroups(states ?? {});
+  const statesList = getStatesList(orderedStateGroups ?? {});
+
+  return (
+    <>
+      <DeleteStateModal
+        isOpen={!!selectDeleteState}
+        data={statesList?.find((s) => s.id === selectDeleteState) ?? null}
+        onClose={() => setSelectDeleteState(null)}
+      />
+      <ProjectAuthorizationWrapper
+        breadcrumbs={
+          <Breadcrumbs>
+            <BreadcrumbItem
+              title={`${projectDetails?.name ?? "Project"}`}
+              link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+            />
+            <BreadcrumbItem title="States Settings" />
+          </Breadcrumbs>
+        }
+      >
+        <div className="grid grid-cols-12 gap-10">
+          <div className="col-span-12 sm:col-span-5">
+            <h3 className="text-2xl font-semibold text-brand-base">States</h3>
+            <p className="text-brand-secondary">Manage the states of this project.</p>
+          </div>
+          <div className="col-span-12 space-y-8 sm:col-span-7">
+            {states && projectDetails ? (
+              Object.keys(orderedStateGroups).map((key) => {
+                if (orderedStateGroups[key].length !== 0)
+                  return (
+                    <div key={key}>
+                      <div className="mb-2 flex w-full justify-between">
+                        <h4 className="font-medium capitalize">{key}</h4>
+                        <button
+                          type="button"
+                          className="flex items-center gap-2 text-brand-accent outline-none"
+                          onClick={() => setActiveGroup(key as keyof StateGroup)}
+                        >
+                          <PlusIcon className="h-4 w-4" />
+                          Add
+                        </button>
+                      </div>
+                      <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
+                        {key === activeGroup && (
+                          <CreateUpdateStateInline
+                            onClose={() => {
+                              setActiveGroup(null);
+                              setSelectedState(null);
+                            }}
+                            data={null}
+                            selectedGroup={key as keyof StateGroup}
+                          />
+                        )}
+                        {orderedStateGroups[key].map((state, index) =>
+                          state.id !== selectedState ? (
+                            <SingleState
+                              key={state.id}
+                              index={index}
+                              state={state}
+                              statesList={statesList}
+                              handleEditState={() => setSelectedState(state.id)}
+                              handleDeleteState={() => setSelectDeleteState(state.id)}
+                            />
+                          ) : (
+                            <div className="border-b last:border-b-0" key={state.id}>
+                              <CreateUpdateStateInline
+                                onClose={() => {
+                                  setActiveGroup(null);
+                                  setSelectedState(null);
+                                }}
+                                data={
+                                  statesList?.find((state) => state.id === selectedState) ?? null
+                                }
+                                selectedGroup={key as keyof StateGroup}
+                              />
+                            </div>
+                          )
+                        )}
+                      </div>
+                    </div>
+                  );
+              })
+            ) : (
+              <Loader className="space-y-5 md:w-2/3">
+                <Loader.Item height="40px" />
+                <Loader.Item height="40px" />
+                <Loader.Item height="40px" />
+                <Loader.Item height="40px" />
+              </Loader>
+            )}
+          </div>
+        </div>
+      </ProjectAuthorizationWrapper>
+    </>
+  );
+};
+
+export default StatesSettings;
diff --git a/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx b/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
new file mode 100644
index 000000000..bdde38aa3
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
@@ -0,0 +1,110 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import projectService from "services/project.service";
+import viewsService from "services/views.service";
+// layouts
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+// contexts
+import { IssueViewContextProvider } from "contexts/issue-view.context";
+// components
+import { IssuesFilterView, IssuesView } from "components/core";
+// ui
+import { CustomMenu, PrimaryButton } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+import { StackedLayersIcon } from "components/icons";
+// helpers
+import { truncateText } from "helpers/string.helper";
+// fetch-keys
+import { PROJECT_DETAILS, VIEWS_LIST, VIEW_DETAILS } from "constants/fetch-keys";
+
+const SingleView: React.FC = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, viewId } = router.query;
+
+  const { data: activeProject } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: views } = useSWR(
+    workspaceSlug && projectId ? VIEWS_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => viewsService.getViews(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: viewDetails } = useSWR(
+    workspaceSlug && projectId && viewId ? VIEW_DETAILS(viewId as string) : null,
+    workspaceSlug && projectId && viewId
+      ? () =>
+          viewsService.getViewDetails(
+            workspaceSlug as string,
+            projectId as string,
+            viewId as string
+          )
+      : null
+  );
+
+  return (
+    <IssueViewContextProvider>
+      <ProjectAuthorizationWrapper
+        breadcrumbs={
+          <Breadcrumbs>
+            <BreadcrumbItem
+              title={`${activeProject?.name ?? "Project"} Views`}
+              link={`/${workspaceSlug}/projects/${activeProject?.id}/cycles`}
+            />
+          </Breadcrumbs>
+        }
+        left={
+          <CustomMenu
+            label={
+              <>
+                <StackedLayersIcon height={12} width={12} />
+                {viewDetails?.name && truncateText(viewDetails.name, 40)}
+              </>
+            }
+            className="ml-1.5"
+            width="auto"
+          >
+            {views?.map((view) => (
+              <CustomMenu.MenuItem
+                key={view.id}
+                renderAs="a"
+                href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}
+              >
+                {truncateText(view.name, 40)}
+              </CustomMenu.MenuItem>
+            ))}
+          </CustomMenu>
+        }
+        right={
+          <div className="flex items-center gap-2">
+            <IssuesFilterView />
+            <PrimaryButton
+              className="flex items-center gap-2"
+              onClick={() => {
+                const e = new KeyboardEvent("keydown", { key: "c" });
+                document.dispatchEvent(e);
+              }}
+            >
+              <PlusIcon className="w-4 h-4" />
+              Add Issue
+            </PrimaryButton>
+          </div>
+        }
+      >
+        <IssuesView />
+      </ProjectAuthorizationWrapper>
+    </IssueViewContextProvider>
+  );
+};
+
+export default SingleView;
diff --git a/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
new file mode 100644
index 000000000..06599742b
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -0,0 +1,132 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import viewsService from "services/views.service";
+import projectService from "services/project.service";
+// layouts
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+// ui
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+//icons
+import { PlusIcon } from "components/icons";
+// images
+import emptyView from "public/empty-state/empty-view.svg";
+// fetching keys
+import { PROJECT_DETAILS, VIEWS_LIST } from "constants/fetch-keys";
+// components
+import { PrimaryButton, Loader, EmptyState } from "components/ui";
+import { DeleteViewModal, CreateUpdateViewModal, SingleViewItem } from "components/views";
+// types
+import { IView } from "types";
+import type { NextPage } from "next";
+
+const ProjectViews: NextPage = () => {
+  const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false);
+  const [selectedViewToUpdate, setSelectedViewToUpdate] = useState<IView | null>(null);
+
+  const [deleteViewModal, setDeleteViewModal] = useState(false);
+  const [selectedViewToDelete, setSelectedViewToDelete] = useState<IView | null>(null);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: activeProject } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: views } = useSWR(
+    workspaceSlug && projectId ? VIEWS_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => viewsService.getViews(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const handleEditView = (view: IView) => {
+    setSelectedViewToUpdate(view);
+    setCreateUpdateViewModal(true);
+  };
+
+  const handleDeleteView = (view: IView) => {
+    setSelectedViewToDelete(view);
+    setDeleteViewModal(true);
+  };
+
+  return (
+    <ProjectAuthorizationWrapper
+      meta={{
+        title: "Plane - Views",
+      }}
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+          <BreadcrumbItem title={`${activeProject?.name ?? "Project"} Views`} />
+        </Breadcrumbs>
+      }
+      right={
+        <div className="flex items-center gap-2">
+          <PrimaryButton
+            type="button"
+            className="flex items-center gap-2"
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", { key: "v" });
+              document.dispatchEvent(e);
+            }}
+          >
+            <PlusIcon className="h-4 w-4" />
+            Create View
+          </PrimaryButton>
+        </div>
+      }
+    >
+      <CreateUpdateViewModal
+        isOpen={createUpdateViewModal}
+        handleClose={() => setCreateUpdateViewModal(false)}
+        data={selectedViewToUpdate}
+      />
+      <DeleteViewModal
+        isOpen={deleteViewModal}
+        data={selectedViewToDelete}
+        setIsOpen={setDeleteViewModal}
+      />
+      {views ? (
+        views.length > 0 ? (
+          <div className="space-y-5">
+            <h3 className="text-3xl font-semibold text-brand-base">Views</h3>
+            <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
+              {views.map((view) => (
+                <SingleViewItem
+                  key={view.id}
+                  view={view}
+                  handleEditView={() => handleEditView(view)}
+                  handleDeleteView={() => handleDeleteView(view)}
+                />
+              ))}
+            </div>
+          </div>
+        ) : (
+          <EmptyState
+            type="view"
+            title="Create New View"
+            description="Views aid in saving your issues by applying various filters and grouping options."
+            imgURL={emptyView}
+          />
+        )
+      ) : (
+        <Loader className="space-y-3">
+          <Loader.Item height="30px" />
+          <Loader.Item height="30px" />
+          <Loader.Item height="30px" />
+        </Loader>
+      )}
+    </ProjectAuthorizationWrapper>
+  );
+};
+
+export default ProjectViews;
diff --git a/app/pages/[workspaceSlug]/projects/index.tsx b/app/pages/[workspaceSlug]/projects/index.tsx
new file mode 100644
index 000000000..9cb78563f
--- /dev/null
+++ b/app/pages/[workspaceSlug]/projects/index.tsx
@@ -0,0 +1,121 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// services
+import projectService from "services/project.service";
+// hooks
+import useProjects from "hooks/use-projects";
+import useWorkspaces from "hooks/use-workspaces";
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+// components
+import { JoinProjectModal } from "components/project/join-project-modal";
+import { DeleteProjectModal, SingleProjectCard } from "components/project";
+// ui
+import { Loader, EmptyState, PrimaryButton } from "components/ui";
+import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// types
+import type { NextPage } from "next";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+// image
+import emptyProject from "public/empty-state/empty-project.svg";
+
+const ProjectsPage: NextPage = () => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // context data
+  const { activeWorkspace } = useWorkspaces();
+  const { projects } = useProjects();
+  // states
+  const [deleteProject, setDeleteProject] = useState<string | null>(null);
+  const [selectedProjectToJoin, setSelectedProjectToJoin] = useState<string | null>(null);
+
+  return (
+    <WorkspaceAuthorizationLayout
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title={`${activeWorkspace?.name ?? "Workspace"} Projects`} />
+        </Breadcrumbs>
+      }
+      right={
+        <PrimaryButton
+          className="flex items-center gap-2"
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", { key: "p" });
+            document.dispatchEvent(e);
+          }}
+        >
+          <PlusIcon className="h-4 w-4" />
+          Add Project
+        </PrimaryButton>
+      }
+    >
+      <JoinProjectModal
+        data={projects?.find((item) => item.id === selectedProjectToJoin)}
+        onClose={() => setSelectedProjectToJoin(null)}
+        onJoin={async () => {
+          const project = projects?.find((item) => item.id === selectedProjectToJoin);
+          if (!project) return;
+
+          await projectService
+            .joinProject(workspaceSlug as string, {
+              project_ids: [project.id],
+            })
+            .then(async () => {
+              mutate(PROJECT_MEMBERS(project.id));
+              setSelectedProjectToJoin(null);
+            })
+            .catch(() => {
+              setSelectedProjectToJoin(null);
+            });
+        }}
+      />
+      <DeleteProjectModal
+        isOpen={!!deleteProject}
+        onClose={() => setDeleteProject(null)}
+        data={projects?.find((item) => item.id === deleteProject) ?? null}
+      />
+      {projects ? (
+        <>
+          {projects.length === 0 ? (
+            <EmptyState
+              type="project"
+              title="Create New Project"
+              description="Projects are a collection of issues. They can be used to represent the development work for a product, project, or service."
+              imgURL={emptyProject}
+            />
+          ) : (
+            <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+              {projects.map((project) => (
+                <SingleProjectCard
+                  key={project.id}
+                  project={project}
+                  setToJoinProject={setSelectedProjectToJoin}
+                  setDeleteProject={setDeleteProject}
+                />
+              ))}
+            </div>
+          )}
+        </>
+      ) : (
+        <Loader className="grid grid-cols-3 gap-4">
+          <Loader.Item height="100px" />
+          <Loader.Item height="100px" />
+          <Loader.Item height="100px" />
+          <Loader.Item height="100px" />
+          <Loader.Item height="100px" />
+          <Loader.Item height="100px" />
+        </Loader>
+      )}
+    </WorkspaceAuthorizationLayout>
+  );
+};
+
+export default ProjectsPage;
diff --git a/app/pages/[workspaceSlug]/settings/billing.tsx b/app/pages/[workspaceSlug]/settings/billing.tsx
new file mode 100644
index 000000000..6dacb382e
--- /dev/null
+++ b/app/pages/[workspaceSlug]/settings/billing.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import workspaceService from "services/workspace.service";
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+// ui
+import { SecondaryButton } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// types
+import type { NextPage } from "next";
+// fetch-keys
+import { WORKSPACE_DETAILS } from "constants/fetch-keys";
+
+const BillingSettings: NextPage = () => {
+  const {
+    query: { workspaceSlug },
+  } = useRouter();
+
+  const { data: activeWorkspace } = useSWR(
+    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
+    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
+  );
+
+  return (
+    <WorkspaceAuthorizationLayout
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem
+            title={`${activeWorkspace?.name ?? "Workspace"}`}
+            link={`/${workspaceSlug}`}
+          />
+          <BreadcrumbItem title="Members Settings" />
+        </Breadcrumbs>
+      }
+    >
+      <section className="space-y-8">
+        <div>
+          <h3 className="text-3xl font-bold leading-6 text-gray-900">Billing & Plans</h3>
+          <p className="mt-4 text-sm text-gray-500">[Free launch preview] plan Pro</p>
+        </div>
+        <div className="space-y-8 md:w-2/3">
+          <div>
+            <div className="w-80 rounded-md border bg-white p-4 text-center">
+              <h4 className="text-md mb-1 leading-6 text-gray-900">Payment due</h4>
+              <h2 className="text-3xl font-extrabold">--</h2>
+            </div>
+          </div>
+          <div>
+            <h4 className="text-md mb-1 leading-6 text-gray-900">Current plan</h4>
+            <p className="mb-3 text-sm text-gray-500">You are currently using the free plan</p>
+            <a href="https://plane.so/pricing" target="_blank" rel="noreferrer">
+              <SecondaryButton outline>View Plans and Upgrade</SecondaryButton>
+            </a>
+          </div>
+          <div>
+            <h4 className="text-md mb-1 leading-6 text-gray-900">Billing history</h4>
+            <p className="mb-3 text-sm text-gray-500">There are no invoices to display</p>
+          </div>
+        </div>
+      </section>
+    </WorkspaceAuthorizationLayout>
+  );
+};
+
+export default BillingSettings;
diff --git a/app/pages/[workspaceSlug]/settings/import-export.tsx b/app/pages/[workspaceSlug]/settings/import-export.tsx
new file mode 100644
index 000000000..41ef3177b
--- /dev/null
+++ b/app/pages/[workspaceSlug]/settings/import-export.tsx
@@ -0,0 +1,30 @@
+import { useRouter } from "next/router";
+
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+// components
+import IntegrationGuide from "components/integration/guide";
+// ui
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// types
+import type { NextPage } from "next";
+
+const ImportExport: NextPage = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <WorkspaceAuthorizationLayout
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title={`${workspaceSlug ?? "Workspace"}`} link={`/${workspaceSlug}`} />
+          <BreadcrumbItem title="Members Settings" />
+        </Breadcrumbs>
+      }
+    >
+      <IntegrationGuide />
+    </WorkspaceAuthorizationLayout>
+  );
+};
+
+export default ImportExport;
diff --git a/app/pages/[workspaceSlug]/settings/index.tsx b/app/pages/[workspaceSlug]/settings/index.tsx
new file mode 100644
index 000000000..043ff4989
--- /dev/null
+++ b/app/pages/[workspaceSlug]/settings/index.tsx
@@ -0,0 +1,343 @@
+import React, { useEffect, useState } from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// services
+import workspaceService from "services/workspace.service";
+import fileService from "services/file.service";
+// hooks
+import useToast from "hooks/use-toast";
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+// components
+import { ImageUploadModal } from "components/core";
+import { DeleteWorkspaceModal } from "components/workspace";
+// ui
+import {
+  Spinner,
+  Input,
+  CustomSelect,
+  OutlineButton,
+  SecondaryButton,
+  DangerButton,
+} from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { LinkIcon } from "@heroicons/react/24/outline";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import type { IWorkspace } from "types";
+import type { NextPage } from "next";
+// fetch-keys
+import { WORKSPACE_DETAILS, USER_WORKSPACES } from "constants/fetch-keys";
+// constants
+import { COMPANY_SIZE } from "constants/workspace";
+
+const defaultValues: Partial<IWorkspace> = {
+  name: "",
+  url: "",
+  company_size: null,
+  logo: null,
+};
+
+const WorkspaceSettings: NextPage = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isImageUploading, setIsImageUploading] = useState(false);
+  const [isImageRemoving, setIsImageRemoving] = useState(false);
+  const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { data: activeWorkspace } = useSWR(
+    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
+    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
+  );
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    watch,
+    setValue,
+    formState: { errors, isSubmitting },
+  } = useForm<IWorkspace>({
+    defaultValues: { ...defaultValues, ...activeWorkspace },
+  });
+
+  useEffect(() => {
+    if (activeWorkspace) reset({ ...activeWorkspace });
+  }, [activeWorkspace, reset]);
+
+  const onSubmit = async (formData: IWorkspace) => {
+    if (!activeWorkspace) return;
+
+    const payload: Partial<IWorkspace> = {
+      logo: formData.logo,
+      name: formData.name,
+      company_size: formData.company_size,
+    };
+
+    await workspaceService
+      .updateWorkspace(activeWorkspace.slug, payload)
+      .then((res) => {
+        mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) =>
+          prevData?.map((workspace) => (workspace.id === res.id ? res : workspace))
+        );
+        mutate<IWorkspace>(WORKSPACE_DETAILS(workspaceSlug as string), (prevData) => {
+          if (!prevData) return prevData;
+
+          return {
+            ...prevData,
+            logo: formData.logo,
+          };
+        });
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Workspace updated successfully",
+        });
+      })
+      .catch((err) => console.error(err));
+  };
+
+  const handleDelete = (url: string | null | undefined) => {
+    if (!activeWorkspace || !url) return;
+
+    setIsImageRemoving(true);
+
+    const index = url.indexOf(".com");
+    const asset = url.substring(index + 5);
+
+    fileService.deleteFile(asset).then(() => {
+      workspaceService
+        .updateWorkspace(activeWorkspace.slug, { logo: "" })
+        .then((res) => {
+          setToastAlert({
+            type: "success",
+            title: "Success!",
+            message: "Workspace picture removed successfully.",
+          });
+          mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) =>
+            prevData?.map((workspace) => (workspace.id === res.id ? res : workspace))
+          );
+          mutate<IWorkspace>(WORKSPACE_DETAILS(workspaceSlug as string), (prevData) => {
+            if (!prevData) return prevData;
+
+            return {
+              ...prevData,
+              logo: "",
+            };
+          });
+        })
+        .catch(() => {
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "There was some error in deleting your profile picture. Please try again.",
+          });
+        })
+        .finally(() => setIsImageRemoving(false));
+    });
+  };
+
+  return (
+    <WorkspaceAuthorizationLayout
+      meta={{
+        title: "Plane - Workspace Settings",
+      }}
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title={`${activeWorkspace?.name ?? "Workspace"} Settings`} />
+        </Breadcrumbs>
+      }
+    >
+      <ImageUploadModal
+        isOpen={isImageUploadModalOpen}
+        onClose={() => setIsImageUploadModalOpen(false)}
+        onSuccess={(imageUrl) => {
+          setIsImageUploading(true);
+          setValue("logo", imageUrl);
+          setIsImageUploadModalOpen(false);
+          handleSubmit(onSubmit)().then(() => setIsImageUploading(false));
+        }}
+        value={watch("logo")}
+      />
+      <DeleteWorkspaceModal
+        isOpen={isOpen}
+        onClose={() => {
+          setIsOpen(false);
+        }}
+        data={activeWorkspace ?? null}
+      />
+      {activeWorkspace ? (
+        <div className="space-y-8 sm:space-y-12">
+          <div className="grid grid-cols-12 gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold">Logo</h4>
+              <p className="text-brand-secondary">
+                Max file size is 5MB. Supported file types are .jpg and .png.
+              </p>
+            </div>
+            <div className="col-span-12 sm:col-span-6">
+              <div className="flex items-center gap-4">
+                <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
+                  {watch("logo") && watch("logo") !== null && watch("logo") !== "" ? (
+                    <div className="relative mx-auto flex h-12 w-12">
+                      <Image
+                        src={watch("logo")!}
+                        alt="Workspace Logo"
+                        objectFit="cover"
+                        layout="fill"
+                        className="rounded-md"
+                        priority
+                      />
+                    </div>
+                  ) : (
+                    <div className="relative flex h-12 w-12 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
+                      {activeWorkspace?.name?.charAt(0) ?? "N"}
+                    </div>
+                  )}
+                </button>
+                <div className="flex gap-4">
+                  <SecondaryButton
+                    onClick={() => {
+                      setIsImageUploadModalOpen(true);
+                    }}
+                  >
+                    {isImageUploading ? "Uploading..." : "Upload"}
+                  </SecondaryButton>
+                  {activeWorkspace.logo && activeWorkspace.logo !== "" && (
+                    <DangerButton onClick={() => handleDelete(activeWorkspace.logo)}>
+                      {isImageRemoving ? "Removing..." : "Remove"}
+                    </DangerButton>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid grid-cols-12 gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold">URL</h4>
+              <p className="text-brand-secondary">Your workspace URL.</p>
+            </div>
+            <div className="col-span-12 flex items-center gap-2 sm:col-span-6">
+              <Input
+                id="url"
+                name="url"
+                autoComplete="off"
+                register={register}
+                error={errors.name}
+                className="w-full"
+                value={`${
+                  typeof window !== "undefined" &&
+                  window.location.origin.replace("http://", "").replace("https://", "")
+                }/${activeWorkspace.slug}`}
+                disabled
+              />
+              <SecondaryButton
+                className="h-min"
+                onClick={() =>
+                  copyTextToClipboard(
+                    `${typeof window !== "undefined" && window.location.origin}/${
+                      activeWorkspace.slug
+                    }`
+                  ).then(() => {
+                    setToastAlert({
+                      type: "success",
+                      title: "Link Copied!",
+                      message: "Workspace link copied to clipboard.",
+                    });
+                  })
+                }
+                outline
+              >
+                <LinkIcon className="h-[18px] w-[18px]" />
+              </SecondaryButton>
+            </div>
+          </div>
+          <div className="grid grid-cols-12 gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold">Name</h4>
+              <p className="text-brand-secondary">Give a name to your workspace.</p>
+            </div>
+            <div className="col-span-12 sm:col-span-6">
+              <Input
+                id="name"
+                name="name"
+                placeholder="Name"
+                autoComplete="off"
+                register={register}
+                error={errors.name}
+                validations={{
+                  required: "Name is required",
+                }}
+              />
+            </div>
+          </div>
+          <div className="grid grid-cols-12 gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold">Company Size</h4>
+              <p className="text-brand-secondary">How big is your company?</p>
+            </div>
+            <div className="col-span-12 sm:col-span-6">
+              <Controller
+                name="company_size"
+                control={control}
+                render={({ field: { value, onChange } }) => (
+                  <CustomSelect
+                    value={value}
+                    onChange={onChange}
+                    label={value ? value.toString() : "Select company size"}
+                    input
+                  >
+                    {COMPANY_SIZE?.map((item) => (
+                      <CustomSelect.Option key={item.value} value={item.value}>
+                        {item.label}
+                      </CustomSelect.Option>
+                    ))}
+                  </CustomSelect>
+                )}
+              />
+            </div>
+          </div>
+          <div className="sm:text-right">
+            <SecondaryButton onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+              {isSubmitting ? "Updating..." : "Update Workspace"}
+            </SecondaryButton>
+          </div>
+          <div className="grid grid-cols-12 gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold">Danger Zone</h4>
+              <p className="text-brand-secondary">
+                The danger zone of the workspace delete page is a critical area that requires
+                careful consideration and attention. When deleting a workspace, all of the data and
+                resources within that workspace will be permanently removed and cannot be recovered.
+              </p>
+            </div>
+            <div className="col-span-12 sm:col-span-6">
+              <OutlineButton theme="danger" onClick={() => setIsOpen(true)}>
+                Delete the workspace
+              </OutlineButton>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="grid h-full w-full place-items-center px-4 sm:px-0">
+          <Spinner />
+        </div>
+      )}
+    </WorkspaceAuthorizationLayout>
+  );
+};
+
+export default WorkspaceSettings;
diff --git a/app/pages/[workspaceSlug]/settings/integrations.tsx b/app/pages/[workspaceSlug]/settings/integrations.tsx
new file mode 100644
index 000000000..44717f67d
--- /dev/null
+++ b/app/pages/[workspaceSlug]/settings/integrations.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import workspaceService from "services/workspace.service";
+import IntegrationService from "services/integration";
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+// components
+import { SingleIntegrationCard } from "components/integration";
+// ui
+import { Loader } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// types
+import type { NextPage } from "next";
+// fetch-keys
+import { WORKSPACE_DETAILS, APP_INTEGRATIONS } from "constants/fetch-keys";
+
+const WorkspaceIntegrations: NextPage = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: activeWorkspace } = useSWR(
+    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
+    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
+  );
+
+  const { data: appIntegrations } = useSWR(workspaceSlug ? APP_INTEGRATIONS : null, () =>
+    workspaceSlug ? IntegrationService.getAppIntegrationsList() : null
+  );
+
+  return (
+    <WorkspaceAuthorizationLayout
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem
+            title={`${activeWorkspace?.name ?? "Workspace"}`}
+            link={`/${workspaceSlug}`}
+          />
+          <BreadcrumbItem title="Integrations" />
+        </Breadcrumbs>
+      }
+    >
+      <section className="space-y-8">
+        <h3 className="text-2xl font-semibold">Integrations</h3>
+        <div className="space-y-5">
+          {appIntegrations ? (
+            appIntegrations.map((integration) => (
+              <SingleIntegrationCard key={integration.id} integration={integration} />
+            ))
+          ) : (
+            <Loader className="space-y-5">
+              <Loader.Item height="60px" />
+              <Loader.Item height="60px" />
+            </Loader>
+          )}
+        </div>
+      </section>
+    </WorkspaceAuthorizationLayout>
+  );
+};
+
+export default WorkspaceIntegrations;
diff --git a/app/pages/[workspaceSlug]/settings/members.tsx b/app/pages/[workspaceSlug]/settings/members.tsx
new file mode 100644
index 000000000..f993c2ff9
--- /dev/null
+++ b/app/pages/[workspaceSlug]/settings/members.tsx
@@ -0,0 +1,257 @@
+import { useState } from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import workspaceService from "services/workspace.service";
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+// components
+import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace-member-remove";
+import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal";
+// ui
+import { CustomMenu, CustomSelect, Loader } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// types
+import type { NextPage } from "next";
+// fetch-keys
+import { WORKSPACE_DETAILS, WORKSPACE_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
+// constants
+import { ROLE } from "constants/workspace";
+
+const MembersSettings: NextPage = () => {
+  const [selectedRemoveMember, setSelectedRemoveMember] = useState<string | null>(null);
+  const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState<string | null>(null);
+  const [inviteModal, setInviteModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { data: activeWorkspace } = useSWR(
+    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
+    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
+  );
+
+  const { data: workspaceMembers, mutate: mutateMembers } = useSWR<any[]>(
+    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
+    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
+  );
+
+  const { data: workspaceInvitations, mutate: mutateInvitations } = useSWR<any[]>(
+    workspaceSlug ? WORKSPACE_INVITATIONS : null,
+    workspaceSlug ? () => workspaceService.workspaceInvitations(workspaceSlug as string) : null
+  );
+
+  const members = [
+    ...(workspaceMembers?.map((item) => ({
+      id: item.id,
+      avatar: item.member?.avatar,
+      first_name: item.member?.first_name,
+      last_name: item.member?.last_name,
+      email: item.member?.email,
+      role: item.role,
+      status: true,
+      member: true,
+    })) || []),
+    ...(workspaceInvitations?.map((item) => ({
+      id: item.id,
+      avatar: item.avatar ?? "",
+      first_name: item.first_name ?? item.email,
+      last_name: item.last_name ?? "",
+      email: item.email,
+      role: item.role,
+      status: item.accepted,
+      member: false,
+    })) || []),
+  ];
+
+  return (
+    <>
+      <ConfirmWorkspaceMemberRemove
+        isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
+        onClose={() => {
+          setSelectedRemoveMember(null);
+          setSelectedInviteRemoveMember(null);
+        }}
+        data={
+          selectedRemoveMember
+            ? members.find((item) => item.id === selectedRemoveMember)
+            : selectedInviteRemoveMember
+            ? members.find((item) => item.id === selectedInviteRemoveMember)
+            : null
+        }
+        handleDelete={async () => {
+          if (!workspaceSlug) return;
+          if (selectedRemoveMember) {
+            await workspaceService.deleteWorkspaceMember(
+              workspaceSlug as string,
+              selectedRemoveMember
+            );
+            mutateMembers(
+              (prevData) => prevData?.filter((item) => item.id !== selectedRemoveMember),
+              false
+            );
+          }
+          if (selectedInviteRemoveMember) {
+            await workspaceService.deleteWorkspaceInvitations(
+              workspaceSlug as string,
+              selectedInviteRemoveMember
+            );
+            mutateInvitations(
+              (prevData) => prevData?.filter((item) => item.id !== selectedInviteRemoveMember),
+              false
+            );
+          }
+          setToastAlert({
+            type: "success",
+            title: "Success",
+            message: "Member removed successfully",
+          });
+          setSelectedRemoveMember(null);
+          setSelectedInviteRemoveMember(null);
+        }}
+      />
+      <SendWorkspaceInvitationModal
+        isOpen={inviteModal}
+        setIsOpen={setInviteModal}
+        workspace_slug={workspaceSlug as string}
+        members={members}
+      />
+      <WorkspaceAuthorizationLayout
+        breadcrumbs={
+          <Breadcrumbs>
+            <BreadcrumbItem
+              title={`${activeWorkspace?.name ?? "Workspace"}`}
+              link={`/${workspaceSlug}`}
+            />
+            <BreadcrumbItem title="Members Settings" />
+          </Breadcrumbs>
+        }
+      >
+        <section className="space-y-8">
+          <div className="flex items-end justify-between gap-4">
+            <h3 className="text-2xl font-semibold">Members</h3>
+            <button
+              type="button"
+              className="flex items-center gap-2 text-brand-accent outline-none"
+              onClick={() => setInviteModal(true)}
+            >
+              <PlusIcon className="h-4 w-4" />
+              Add Member
+            </button>
+          </div>
+          {!workspaceMembers || !workspaceInvitations ? (
+            <Loader className="space-y-5">
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+            </Loader>
+          ) : (
+            <div className="divide-y rounded-[10px] divide-brand-base border border-brand-base bg-brand-surface-1 px-6">
+              {members.length > 0
+                ? members.map((member) => (
+                    <div key={member.id} className="flex items-center justify-between py-6">
+                      <div className="flex items-center gap-x-8 gap-y-2">
+                        <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
+                          {member.avatar && member.avatar !== "" ? (
+                            <Image
+                              src={member.avatar}
+                              alt={member.first_name}
+                              layout="fill"
+                              objectFit="cover"
+                              className="rounded-lg"
+                            />
+                          ) : member.first_name !== "" ? (
+                            member.first_name.charAt(0)
+                          ) : (
+                            member.email.charAt(0)
+                          )}
+                        </div>
+                        <div>
+                          <h4 className="text-sm">
+                            {member.first_name} {member.last_name}
+                          </h4>
+                          <p className="text-xs text-brand-secondary">{member.email}</p>
+                        </div>
+                      </div>
+                      <div className="flex items-center">
+                        {!member?.status && (
+                          <div className="flex mr-2 px-2 py-1 bg-yellow-200 text-yellow-700 text-center rounded-full text-xs items-center justify-center">
+                            <p>Pending</p>
+                          </div>
+                        )}
+                        <div className="flex items-center gap-2 text-xs">
+                          <CustomSelect
+                            label={ROLE[member.role as keyof typeof ROLE]}
+                            value={member.role}
+                            onChange={(value: any) => {
+                              workspaceService
+                                .updateWorkspaceMember(activeWorkspace?.slug as string, member.id, {
+                                  role: value,
+                                })
+                                .then(() => {
+                                  mutateMembers(
+                                    (prevData) =>
+                                      prevData?.map((m) =>
+                                        m.id === member.id ? { ...m, role: value } : m
+                                      ),
+                                    false
+                                  );
+                                  setToastAlert({
+                                    title: "Success",
+                                    type: "success",
+                                    message: "Member role updated successfully.",
+                                  });
+                                })
+                                .catch(() => {
+                                  setToastAlert({
+                                    title: "Error",
+                                    type: "error",
+                                    message: "An error occurred while updating member role.",
+                                  });
+                                });
+                            }}
+                          >
+                            {Object.keys(ROLE).map((key) => (
+                              <CustomSelect.Option key={key} value={key}>
+                                <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
+                              </CustomSelect.Option>
+                            ))}
+                          </CustomSelect>
+                          <CustomMenu ellipsis>
+                            <CustomMenu.MenuItem
+                              onClick={() => {
+                                if (member.member) {
+                                  setSelectedRemoveMember(member.id);
+                                } else {
+                                  setSelectedInviteRemoveMember(member.id);
+                                }
+                              }}
+                            >
+                              Remove member
+                            </CustomMenu.MenuItem>
+                          </CustomMenu>
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                : null}
+            </div>
+          )}
+        </section>
+      </WorkspaceAuthorizationLayout>
+    </>
+  );
+};
+
+export default MembersSettings;
diff --git a/app/pages/_app.tsx b/app/pages/_app.tsx
new file mode 100644
index 000000000..6f372b4e3
--- /dev/null
+++ b/app/pages/_app.tsx
@@ -0,0 +1,50 @@
+import dynamic from "next/dynamic";
+
+// themes
+import { ThemeProvider } from "next-themes";
+
+// styles
+import "styles/globals.css";
+import "styles/editor.css";
+import "styles/command-pallette.css";
+import "styles/nprogress.css";
+
+// router
+import Router from "next/router";
+
+// nprogress
+import NProgress from "nprogress";
+
+// contexts
+import { UserProvider } from "contexts/user.context";
+import { ToastContextProvider } from "contexts/toast.context";
+import { ThemeContextProvider } from "contexts/theme.context";
+// types
+import type { AppProps } from "next/app";
+// constants
+import { THEMES } from "constants/themes";
+
+const CrispWithNoSSR = dynamic(() => import("constants/crisp"), { ssr: false });
+
+// nprogress
+NProgress.configure({ showSpinner: false });
+Router.events.on("routeChangeStart", NProgress.start);
+Router.events.on("routeChangeError", NProgress.done);
+Router.events.on("routeChangeComplete", NProgress.done);
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <ThemeProvider themes={THEMES} defaultTheme="light">
+      <UserProvider>
+        <ToastContextProvider>
+          <ThemeContextProvider>
+            <CrispWithNoSSR />
+            <Component {...pageProps} />
+          </ThemeContextProvider>
+        </ToastContextProvider>
+      </UserProvider>
+    </ThemeProvider>
+  );
+}
+
+export default MyApp;
diff --git a/app/pages/_document.tsx b/app/pages/_document.tsx
new file mode 100644
index 000000000..24f3068c9
--- /dev/null
+++ b/app/pages/_document.tsx
@@ -0,0 +1,38 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+
+class MyDocument extends Document {
+  render() {
+    const isSessionRecorderEnabled = parseInt(
+      process.env.NEXT_PUBLIC_ENABLE_SESSION_RECORDER || "0"
+    );
+
+    return (
+      <Html>
+        <Head>
+          <link rel="manifest" href="/manifest.json" />
+          <link rel="apple-touch-icon" href="/icon.png" />
+          <meta name="theme-color" content="#fff" />
+          <script defer data-domain="app.plane.so" src="https://plausible.io/js/script.js" />
+          {isSessionRecorderEnabled && process.env.NEXT_PUBLIC_SESSION_RECORDER_KEY && (
+            <script
+              defer
+              dangerouslySetInnerHTML={{
+                __html: `(function(c,l,a,r,i,t,y){
+              c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+              t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+              y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+          })(window, document, "clarity", "script", "${process.env.NEXT_PUBLIC_SESSION_RECORDER_KEY}");`,
+              }}
+            />
+          )}
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;
diff --git a/app/pages/_error.js b/app/pages/_error.js
new file mode 100644
index 000000000..a615a24dc
--- /dev/null
+++ b/app/pages/_error.js
@@ -0,0 +1,106 @@
+/**
+ * NOTE: This requires `@sentry/nextjs` version 7.3.0 or higher.
+ *
+ * NOTE: If using this with `next` version 12.2.0 or lower, uncomment the
+ * penultimate line in `CustomErrorComponent`.
+ *
+ * This page is loaded by Nextjs:
+ *  - on the server, when data-fetching methods throw or reject
+ *  - on the client, when `getInitialProps` throws or rejects
+ *  - on the client, when a React lifecycle method throws or rejects, and it's
+ *    caught by the built-in Nextjs error boundary
+ *
+ * See:
+ *  - https://nextjs.org/docs/basic-features/data-fetching/overview
+ *  - https://nextjs.org/docs/api-reference/data-fetching/get-initial-props
+ *  - https://reactjs.org/docs/error-boundaries.html
+ */
+
+import * as Sentry from "@sentry/nextjs";
+
+import { useRouter } from "next/router";
+
+// services
+import authenticationService from "services/authentication.service";
+// hooks
+import useToast from "hooks/use-toast";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// ui
+import { PrimaryButton, SecondaryButton } from "components/ui";
+
+const CustomErrorComponent = () => {
+  const router = useRouter();
+
+  const { setToastAlert } = useToast();
+
+  const handleSignOut = async () => {
+    await authenticationService
+      .signOut()
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Failed to sign out. Please try again.",
+        })
+      )
+      .finally(() => router.push("/signin"));
+  };
+
+  return (
+    <DefaultLayout
+      meta={{
+        title: "Plane - Exception Detected",
+        description: "Exception Detected",
+      }}
+    >
+      <div className="grid h-full place-items-center p-4">
+        <div className="space-y-8 text-center">
+          <div className="space-y-2">
+            <h3 className="text-lg font-semibold">Exception Detected!</h3>
+            <p className="text-sm text-brand-secondary w-1/2 mx-auto">
+              We{"'"}re Sorry! An exception has been detected, and our engineering team has been
+              notified. We apologize for any inconvenience this may have caused. Please reach out to
+              our engineering team at{" "}
+              <a href="mailto:support@plane.so" className="text-brand-accent">
+                support@plane.so
+              </a>{" "}
+              or on our{" "}
+              <a
+                href="https://discord.com/invite/A92xrEGCge"
+                target="_blank"
+                className="text-brand-accent"
+                rel="noopener noreferrer"
+              >
+                Discord
+              </a>{" "}
+              server for further assistance.
+            </p>
+          </div>
+          <div className="flex items-center gap-2 justify-center">
+            <PrimaryButton size="md" onClick={() => router.back()}>
+              Go back
+            </PrimaryButton>
+            <SecondaryButton size="md" onClick={handleSignOut}>
+              Sign out
+            </SecondaryButton>
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  );
+};
+
+CustomErrorComponent.getInitialProps = async (contextData) => {
+  // In case this is running in a serverless function, await this in order to give Sentry
+  // time to send the error before the lambda exits
+  await Sentry.captureUnderscoreErrorException(contextData);
+
+  const { res, err } = contextData;
+
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
+
+  return { statusCode };
+};
+
+export default CustomErrorComponent;
diff --git a/app/pages/api/track-event.ts b/app/pages/api/track-event.ts
new file mode 100644
index 000000000..c9255d215
--- /dev/null
+++ b/app/pages/api/track-event.ts
@@ -0,0 +1,53 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+// jitsu
+import { createClient } from "@jitsu/nextjs";
+import { convertCookieStringToObject } from "lib/cookie";
+
+const jitsu = createClient({
+  key: process.env.TRACKER_ACCESS_KEY || "",
+  tracking_host: "https://t.jitsu.com",
+});
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { eventName, extra } = req.body;
+
+  if (!eventName) {
+    return res.status(400).json({ message: "Bad request" });
+  }
+
+  const cookie = convertCookieStringToObject(req.headers.cookie);
+  const accessToken = cookie?.accessToken;
+
+  if (!accessToken) return res.status(401).json({ message: "Unauthorized" });
+
+  const user = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/users/me/`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${accessToken}`,
+    },
+  })
+    .then((res) => res.json())
+    .then((data) => data.user)
+    .catch(() => res.status(401).json({ message: "Unauthorized" }));
+
+  if (!user) return res.status(401).json({ message: "Unauthorized" });
+
+  // TODO: cache user info
+
+  jitsu
+    .id({
+      id: user.id,
+      email: user.email,
+      first_name: user.first_name,
+      last_name: user.last_name,
+    })
+    .then(() => {
+      jitsu.track(eventName, {
+        ...extra,
+      });
+    });
+
+  res.status(200).json({ message: "success" });
+}
diff --git a/app/pages/api/unsplash.ts b/app/pages/api/unsplash.ts
new file mode 100644
index 000000000..5eab60b92
--- /dev/null
+++ b/app/pages/api/unsplash.ts
@@ -0,0 +1,23 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+// TODO: remove NEXT_PUBLIC_ prefix from env variable
+const unsplashKey = process.env.NEXT_PUBLIC_UNSPLASH_ACCESS;
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { query, page, per_page = 20 } = req.query;
+
+  const url = query
+    ? `https://api.unsplash.com/search/photos/?client_id=${unsplashKey}&query=${query}&page=${page}&per_page=${per_page}`
+    : `https://api.unsplash.com/photos/?client_id=${unsplashKey}&page=${page}&per_page=${per_page}`;
+
+  const response = await fetch(url, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  const data = await response.json();
+
+  res.status(200).json(data);
+}
diff --git a/app/pages/create-workspace.tsx b/app/pages/create-workspace.tsx
new file mode 100644
index 000000000..d445e873e
--- /dev/null
+++ b/app/pages/create-workspace.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+import Image from "next/image";
+
+// layouts
+import DefaultLayout from "layouts/default-layout";
+import { UserAuthorizationLayout } from "layouts/auth-layout/user-authorization-wrapper";
+// images
+import Logo from "public/onboarding/logo.svg";
+// types
+import type { NextPage } from "next";
+// constants
+import { CreateWorkspaceForm } from "components/workspace";
+
+const CreateWorkspace: NextPage = () => {
+  const router = useRouter();
+  const defaultValues = {
+    name: "",
+    slug: "",
+    company_size: null,
+  };
+
+  return (
+    <UserAuthorizationLayout>
+      <DefaultLayout>
+        <div className="grid h-full place-items-center p-5">
+          <div className="w-full space-y-4">
+            <div className="mb-8 text-center">
+              <Image src={Logo} height="50" alt="Plane Logo" />
+            </div>
+            <CreateWorkspaceForm
+              defaultValues={defaultValues}
+              setDefaultValues={() => {}}
+              onSubmit={(res) => router.push(`/${res.slug}`)}
+            />
+          </div>
+        </div>
+      </DefaultLayout>
+    </UserAuthorizationLayout>
+  );
+};
+
+export default CreateWorkspace;
diff --git a/app/pages/error.tsx b/app/pages/error.tsx
new file mode 100644
index 000000000..3909a1268
--- /dev/null
+++ b/app/pages/error.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// types
+import type { NextPage } from "next";
+
+const ErrorPage: NextPage = () => (
+  <DefaultLayout
+    meta={{
+      title: "Plane - An error occurred",
+      description: "We were unable to get this page for you.",
+    }}
+  >
+    <div className="h-full w-full">
+      <h2 className="text-3xl">Error!</h2>
+    </div>
+  </DefaultLayout>
+);
+
+export default ErrorPage;
diff --git a/app/pages/index.tsx b/app/pages/index.tsx
new file mode 100644
index 000000000..bd21abfc4
--- /dev/null
+++ b/app/pages/index.tsx
@@ -0,0 +1,66 @@
+import { useEffect } from "react";
+
+import Router from "next/router";
+
+// services
+import userService from "services/user.service";
+import workspaceService from "services/workspace.service";
+// ui
+import { Spinner } from "components/ui";
+// types
+import type { NextPage } from "next";
+
+const redirectUserTo = async () => {
+  const user = await userService
+    .currentUser()
+    .then((res) => res)
+    .catch(() => {
+      Router.push("/signin");
+      return;
+    });
+
+  if (!user) {
+    Router.push("/signin");
+    return;
+  } else if (!user.user.is_onboarded) {
+    Router.push("/onboarding");
+    return;
+  } else {
+    const userWorkspaces = await workspaceService.userWorkspaces();
+
+    const lastActiveWorkspace = userWorkspaces.find(
+      (workspace) => workspace.id === user.user.last_workspace_id
+    );
+
+    if (lastActiveWorkspace) {
+      Router.push(`/${lastActiveWorkspace.slug}`);
+      return;
+    } else if (userWorkspaces.length > 0) {
+      Router.push(`/${userWorkspaces[0].slug}`);
+      return;
+    } else {
+      const invitations = await workspaceService.userWorkspaceInvitations();
+      if (invitations.length > 0) {
+        Router.push(`/invitations`);
+        return;
+      } else {
+        Router.push(`/create-workspace`);
+        return;
+      }
+    }
+  }
+};
+
+const Home: NextPage = () => {
+  useEffect(() => {
+    redirectUserTo();
+  }, []);
+
+  return (
+    <div className="grid h-screen place-items-center">
+      <Spinner />
+    </div>
+  );
+};
+
+export default Home;
diff --git a/app/pages/installations/[provider]/index.tsx b/app/pages/installations/[provider]/index.tsx
new file mode 100644
index 000000000..31eb53c9e
--- /dev/null
+++ b/app/pages/installations/[provider]/index.tsx
@@ -0,0 +1,51 @@
+import React, { useEffect } from "react";
+
+// services
+import appinstallationsService from "services/app-installations.service";
+// components
+import { Spinner } from "components/ui";
+
+interface IGithuPostInstallationProps {
+  installation_id: string;
+  setup_action: string;
+  state: string;
+  provider: string;
+}
+
+// TODO:Change getServerSideProps to router.query
+const AppPostInstallation = ({
+  installation_id,
+  setup_action,
+  state,
+  provider,
+}: IGithuPostInstallationProps) => {
+  useEffect(() => {
+    if (state && installation_id) {
+      appinstallationsService
+        .addGithubApp(state, provider, { installation_id })
+        .then((res) => {
+          window.opener = null;
+          window.open("", "_self");
+          window.close();
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+  }, [state, installation_id, provider]);
+
+  return (
+    <div className="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-brand-surface-2">
+      <h2 className="text-2xl text-brand-base">Installing. Please wait...</h2>
+      <Spinner />
+    </div>
+  );
+};
+
+export async function getServerSideProps(context: any) {
+  return {
+    props: context.query,
+  };
+}
+
+export default AppPostInstallation;
diff --git a/app/pages/invitations.tsx b/app/pages/invitations.tsx
new file mode 100644
index 000000000..907c7bad3
--- /dev/null
+++ b/app/pages/invitations.tsx
@@ -0,0 +1,174 @@
+import React, { useState } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import workspaceService from "services/workspace.service";
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+import { UserAuthorizationLayout } from "layouts/auth-layout/user-authorization-wrapper";
+// components
+import SingleInvitation from "components/workspace/single-invitation";
+// ui
+import { Spinner, EmptySpace, EmptySpaceItem, SecondaryButton, PrimaryButton } from "components/ui";
+// icons
+import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
+// types
+import type { NextPage } from "next";
+import type { IWorkspaceMemberInvitation } from "types";
+// fetch-keys
+import { USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
+
+const OnBoard: NextPage = () => {
+  const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
+
+  const { user } = useUser();
+
+  const router = useRouter();
+
+  const { setToastAlert } = useToast();
+
+  const { data: invitations, mutate: mutateInvitations } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
+    workspaceService.userWorkspaceInvitations()
+  );
+
+  const { data: workspaces, mutate: mutateWorkspaces } = useSWR("USER_WORKSPACES", () =>
+    workspaceService.userWorkspaces()
+  );
+
+  const handleInvitation = (
+    workspace_invitation: IWorkspaceMemberInvitation,
+    action: "accepted" | "withdraw"
+  ) => {
+    if (action === "accepted") {
+      setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]);
+    } else if (action === "withdraw") {
+      setInvitationsRespond((prevData) =>
+        prevData.filter((item: string) => item !== workspace_invitation.id)
+      );
+    }
+  };
+
+  const submitInvitations = () => {
+    // userService.updateUserOnBoard();
+
+    if (invitationsRespond.length === 0) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Please select atleast one invitation.",
+      });
+      return;
+    }
+
+    workspaceService
+      .joinWorkspaces({ invitations: invitationsRespond })
+      .then(() => {
+        mutateInvitations();
+        mutateWorkspaces();
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  return (
+    <UserAuthorizationLayout>
+      <DefaultLayout
+        meta={{
+          title: "Plane - Welcome to Plane",
+          description:
+            "Please fasten your seatbelts because we are about to take your productivity to the next level.",
+        }}
+      >
+        <div className="flex min-h-full flex-col items-center justify-center p-4 sm:p-0">
+          {user && (
+            <div className="mb-10 w-96 rounded-lg bg-indigo-100 p-2 text-theme">
+              <p className="text-center text-sm">logged in as {user.email}</p>
+            </div>
+          )}
+
+          <div className="w-full rounded-lg p-8 md:w-2/3 lg:w-1/3">
+            {invitations && workspaces ? (
+              invitations.length > 0 ? (
+                <div>
+                  <h2 className="text-lg font-medium text-gray-900">Workspace Invitations</h2>
+                  <p className="mt-1 text-sm text-gray-500">
+                    Select invites that you want to accept.
+                  </p>
+                  <ul role="list" className="mt-6 divide-y divide-gray-200 border-t border-b">
+                    {invitations.map((invitation) => (
+                      <SingleInvitation
+                        key={invitation.id}
+                        invitation={invitation}
+                        invitationsRespond={invitationsRespond}
+                        handleInvitation={handleInvitation}
+                      />
+                    ))}
+                  </ul>
+                  <div className="mt-6 flex items-center gap-2">
+                    <Link href="/">
+                      <a className="w-full">
+                        <SecondaryButton className="w-full">Go to Home</SecondaryButton>
+                      </a>
+                    </Link>
+                    <PrimaryButton className="w-full" onClick={submitInvitations}>
+                      Accept and Continue
+                    </PrimaryButton>
+                  </div>
+                </div>
+              ) : workspaces && workspaces.length > 0 ? (
+                <div className="mt-3 flex flex-col gap-y-3">
+                  <h2 className="mb-4 text-2xl font-medium">Your workspaces</h2>
+                  {workspaces.map((workspace) => (
+                    <Link key={workspace.id} href={workspace.slug}>
+                      <a>
+                        <div className="mb-2 flex items-center justify-between rounded border px-4 py-2">
+                          <div className="flex items-center gap-x-2">
+                            <CubeIcon className="h-5 w-5 text-gray-400" />
+                            {workspace.name}
+                          </div>
+                          <div className="flex items-center gap-x-2">
+                            <p className="text-sm">{workspace.owner.first_name}</p>
+                          </div>
+                        </div>
+                      </a>
+                    </Link>
+                  ))}
+                </div>
+              ) : (
+                invitations.length === 0 &&
+                workspaces.length === 0 && (
+                  <EmptySpace
+                    title="You don't have any workspaces yet"
+                    description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
+                  >
+                    <EmptySpaceItem
+                      Icon={PlusIcon}
+                      title={"Create your Workspace"}
+                      action={() => {
+                        router.push("/create-workspace");
+                      }}
+                    />
+                  </EmptySpace>
+                )
+              )
+            ) : (
+              <div className="flex h-full w-full items-center justify-center">
+                <Spinner />
+              </div>
+            )}
+          </div>
+        </div>
+      </DefaultLayout>
+    </UserAuthorizationLayout>
+  );
+};
+
+export default OnBoard;
diff --git a/app/pages/magic-sign-in.tsx b/app/pages/magic-sign-in.tsx
new file mode 100644
index 000000000..521373685
--- /dev/null
+++ b/app/pages/magic-sign-in.tsx
@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// services
+import authenticationService from "services/authentication.service";
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// types
+import type { NextPage } from "next";
+// constants
+import { USER_WORKSPACES } from "constants/fetch-keys";
+
+const MagicSignIn: NextPage = () => {
+  const router = useRouter();
+
+  const [isSigningIn, setIsSigningIn] = useState(true);
+  const [errorSigningIn, setErrorSignIn] = useState<string | undefined>();
+
+  const { password, key } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { mutateUser } = useUser();
+
+  useEffect(() => {
+    setIsSigningIn(true);
+    setErrorSignIn(undefined);
+    if (!password || !key) return;
+    authenticationService
+      .magicSignIn({ token: password, key })
+      .then(async (res) => {
+        setIsSigningIn(false);
+        await mutateUser();
+        mutate(USER_WORKSPACES);
+        if (res.user.is_onboarded) router.push("/");
+        else router.push("/invitations");
+      })
+      .catch((err) => {
+        setErrorSignIn(err.response.data.error);
+        setIsSigningIn(false);
+      });
+  }, [password, key, mutateUser, router]);
+
+  return (
+    <DefaultLayout
+      meta={{
+        title: "Magic Sign In",
+      }}
+    >
+      <div className="flex h-screen w-full items-center justify-center overflow-auto bg-gray-50">
+        {isSigningIn ? (
+          <div className="flex h-full w-full flex-col items-center justify-center gap-y-2">
+            <h2 className="text-4xl">Signing you in...</h2>
+            <p className="text-sm text-gray-600">
+              Please wait while we are preparing your take off.
+            </p>
+          </div>
+        ) : errorSigningIn ? (
+          <div className="flex h-full w-full flex-col items-center justify-center gap-y-2">
+            <h2 className="text-4xl">Error</h2>
+            <p className="text-sm text-gray-600">
+              {errorSigningIn}.
+              <span
+                className="cursor-pointer underline"
+                onClick={() => {
+                  authenticationService
+                    .emailCode({ email: (key as string).split("_")[1] })
+                    .then(() => {
+                      setToastAlert({
+                        type: "success",
+                        title: "Email sent",
+                        message: "A new link/code has been send to you.",
+                      });
+                    })
+                    .catch(() => {
+                      setToastAlert({
+                        type: "error",
+                        title: "Error",
+                        message: "Unable to send email.",
+                      });
+                    });
+                }}
+              >
+                Send link again?
+              </span>
+            </p>
+          </div>
+        ) : (
+          <div className="flex h-full w-full flex-col items-center justify-center gap-y-2">
+            <h2 className="text-4xl">Success</h2>
+            <p className="text-sm text-gray-600">Redirecting you to the app...</p>
+          </div>
+        )}
+      </div>
+    </DefaultLayout>
+  );
+};
+
+export default MagicSignIn;
diff --git a/app/pages/onboarding.tsx b/app/pages/onboarding.tsx
new file mode 100644
index 000000000..4d61fe97f
--- /dev/null
+++ b/app/pages/onboarding.tsx
@@ -0,0 +1,115 @@
+import { useState } from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// services
+import userService from "services/user.service";
+// hooks
+import useUser from "hooks/use-user";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+import { UserAuthorizationLayout } from "layouts/auth-layout/user-authorization-wrapper";
+// components
+import { InviteMembers, OnboardingCard, UserDetails, Workspace } from "components/onboarding";
+// ui
+import { PrimaryButton } from "components/ui";
+// constant
+import { ONBOARDING_CARDS } from "constants/workspace";
+// images
+import Logo from "public/onboarding/logo.svg";
+// types
+import type { NextPage } from "next";
+import { ICurrentUserResponse } from "types";
+// fetch-keys
+import { CURRENT_USER } from "constants/fetch-keys";
+
+const Onboarding: NextPage = () => {
+  const [step, setStep] = useState(1);
+  const [userRole, setUserRole] = useState<string | null>(null);
+
+  const [workspace, setWorkspace] = useState();
+
+  const router = useRouter();
+
+  const { user } = useUser();
+
+  return (
+    <UserAuthorizationLayout>
+      <DefaultLayout>
+        <div className="grid h-full place-items-center p-5">
+          {step <= 3 ? (
+            <div className="w-full">
+              <div className="text-center mb-8">
+                <Image src={Logo} height="50" alt="Plane Logo" />
+              </div>
+              {step === 1 ? (
+                <UserDetails user={user} setStep={setStep} setUserRole={setUserRole} />
+              ) : step === 2 ? (
+                <Workspace setStep={setStep} setWorkspace={setWorkspace} />
+              ) : (
+                <InviteMembers setStep={setStep} workspace={workspace} />
+              )}
+            </div>
+          ) : (
+            <div className="flex w-full max-w-2xl flex-col gap-12">
+              <div className="flex flex-col items-center justify-center gap-7 rounded-[10px] bg-white pb-10 text-center shadow-md">
+                {step === 4 ? (
+                  <OnboardingCard data={ONBOARDING_CARDS.welcome} />
+                ) : step === 5 ? (
+                  <OnboardingCard data={ONBOARDING_CARDS.issue} gradient />
+                ) : step === 6 ? (
+                  <OnboardingCard data={ONBOARDING_CARDS.cycle} gradient/>
+                ) : step === 7 ? (
+                  <OnboardingCard data={ONBOARDING_CARDS.module} gradient/>
+                ) : (
+                  <OnboardingCard data={ONBOARDING_CARDS.commandMenu} />
+                )}
+                <div className="mx-auto flex h-1/4 items-end lg:w-1/2">
+                  <PrimaryButton
+                    type="button"
+                    className="flex w-full items-center justify-center text-center "
+                    size="md"
+                    onClick={() => {
+                      if (step === 8) {
+                        userService
+                          .updateUserOnBoard({ userRole })
+                          .then(() => {
+                            mutate<ICurrentUserResponse>(
+                              CURRENT_USER,
+                              (prevData) => {
+                                if (!prevData) return prevData;
+
+                                return {
+                                  ...prevData,
+                                  user: {
+                                    ...prevData.user,
+                                    is_onboarded: true,
+                                  },
+                                };
+                              },
+                              false
+                            );
+                            router.push("/");
+                          })
+                          .catch((err) => {
+                            console.log(err);
+                          });
+                      } else setStep((prevData) => prevData + 1);
+                    }}
+                  >
+                    {step === 4 || step === 8 ? "Get Started" : "Next"}
+                  </PrimaryButton>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </DefaultLayout>
+    </UserAuthorizationLayout>
+  );
+};
+
+export default Onboarding;
diff --git a/app/pages/signin.tsx b/app/pages/signin.tsx
new file mode 100644
index 000000000..a77fe2ce1
--- /dev/null
+++ b/app/pages/signin.tsx
@@ -0,0 +1,146 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+import Image from "next/image";
+
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// services
+import authenticationService from "services/authentication.service";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// social button
+import {
+  GoogleLoginButton,
+  GithubLoginButton,
+  EmailSignInForm,
+  EmailPasswordForm,
+} from "components/account";
+// ui
+import { Spinner } from "components/ui";
+// icons
+import Logo from "public/logo.png";
+// types
+import type { NextPage } from "next";
+
+const SignInPage: NextPage = () => {
+  // router
+  const router = useRouter();
+  // user hook
+  const { mutateUser } = useUser();
+  // states
+  const [isLoading, setLoading] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  console.log("ENV", process.env);
+
+  useEffect(() => {
+    console.log("effect ENV", process.env.NEXT_PUBLIC_ENABLE_OAUTH);
+  }, [router]);
+
+  const onSignInSuccess = useCallback(async () => {
+    setLoading(true);
+    await mutateUser();
+    const nextLocation = router.asPath.split("?next=")[1];
+    if (nextLocation) await router.push(nextLocation as string);
+    else await router.push("/");
+  }, [mutateUser, router]);
+
+  const handleGoogleSignIn = ({ clientId, credential }: any) => {
+    if (clientId && credential) {
+      setLoading(true);
+      authenticationService
+        .socialAuth({
+          medium: "google",
+          credential,
+          clientId,
+        })
+        .then(async () => {
+          await onSignInSuccess();
+        })
+        .catch((err) => {
+          console.log(err);
+          setToastAlert({
+            title: "Error signing in!",
+            type: "error",
+            message: "Something went wrong. Please try again later or contact the support team.",
+          });
+          setLoading(false);
+        });
+    }
+  };
+
+  const handleGithubSignIn = useCallback(
+    (credential: string) => {
+      setLoading(true);
+      authenticationService
+        .socialAuth({
+          medium: "github",
+          credential,
+          clientId: process.env.NEXT_PUBLIC_GITHUB_ID,
+        })
+        .then(async () => {
+          await onSignInSuccess();
+        })
+        .catch((err) => {
+          console.log(err);
+          setToastAlert({
+            title: "Error signing in!",
+            type: "error",
+            message: "Something went wrong. Please try again later or contact the support team.",
+          });
+          setLoading(false);
+        });
+    },
+    [onSignInSuccess, setToastAlert]
+  );
+
+  return (
+    <DefaultLayout
+      meta={{
+        title: "Plane - Sign In",
+      }}
+    >
+      {isLoading && (
+        <div className="absolute left-0 top-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-white">
+          <h2 className="text-xl text-gray-900">Signing in. Please wait...</h2>
+          <Spinner />
+        </div>
+      )}
+      <div className="flex h-screen w-full items-center justify-center overflow-auto bg-gray-50">
+        <div className="flex min-h-full w-full flex-col justify-center px-6 py-12 lg:px-8">
+          <div className="flex flex-col gap-10 sm:mx-auto sm:w-full sm:max-w-md">
+            <div className="flex flex-col items-center justify-center gap-10">
+              <Image src={Logo} height={80} width={80} alt="Plane Web Logo" />
+              <h2 className="text-center text-xl font-medium text-brand-base">
+                Sign In to your Plane Account
+              </h2>
+            </div>
+
+            <div className="flex flex-col rounded-[10px] bg-brand-surface-2  shadow-md">
+              {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
+                <>
+                  <EmailSignInForm handleSuccess={onSignInSuccess} />
+
+                  <div className="flex flex-col items-center justify-center gap-3 border-t border-brand-base px-5 py-5 ">
+                    <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
+
+                    <GithubLoginButton handleSignIn={handleGithubSignIn} />
+                  </div>
+                </>
+              ) : (
+                <>
+                  <EmailPasswordForm onSuccess={onSignInSuccess} />
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  );
+};
+
+export default SignInPage;
diff --git a/app/pages/workspace-member-invitation/[invitationId].tsx b/app/pages/workspace-member-invitation/[invitationId].tsx
new file mode 100644
index 000000000..4eb45f529
--- /dev/null
+++ b/app/pages/workspace-member-invitation/[invitationId].tsx
@@ -0,0 +1,148 @@
+import React from "react";
+// next
+
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import {
+  CheckIcon,
+  CubeIcon,
+  ShareIcon,
+  StarIcon,
+  UserIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+// swr
+// services
+import workspaceService from "services/workspace.service";
+// hooks
+import useUser from "hooks/use-user";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// ui
+import { Spinner } from "components/ui";
+// icons
+import { EmptySpace, EmptySpaceItem } from "components/ui/empty-space";
+// types
+import type { NextPage } from "next";
+// constants
+import { WORKSPACE_INVITATION } from "constants/fetch-keys";
+
+const WorkspaceInvitation: NextPage = () => {
+  const router = useRouter();
+
+  const { invitationId, email } = router.query;
+
+  const { user } = useUser();
+
+  const { data: invitationDetail, error } = useSWR(invitationId && WORKSPACE_INVITATION, () =>
+    invitationId ? workspaceService.getWorkspaceInvitation(invitationId as string) : null
+  );
+
+  const handleAccept = () => {
+    if (!invitationDetail) return;
+    workspaceService
+      .joinWorkspace(invitationDetail.workspace.slug, invitationDetail.id, {
+        accepted: true,
+        email: invitationDetail.email,
+      })
+      .then(() => {
+        if (email === user?.email) {
+          router.push("/invitations");
+        } else {
+          router.push("/signin");
+        }
+      })
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <DefaultLayout>
+      <div className="flex h-full w-full flex-col items-center justify-center px-3">
+        {invitationDetail ? (
+          <>
+            {error ? (
+              <div className="flex w-full flex-col space-y-4 rounded border border-brand-base bg-brand-base px-4 py-8 text-center shadow-2xl md:w-1/3">
+                <h2 className="text-xl uppercase">INVITATION NOT FOUND</h2>
+              </div>
+            ) : (
+              <>
+                {invitationDetail.accepted ? (
+                  <>
+                    <EmptySpace
+                      title={`You are already a member of ${invitationDetail.workspace.name}`}
+                      description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
+                    >
+                      <EmptySpaceItem
+                        Icon={CubeIcon}
+                        title="Continue to Dashboard"
+                        action={() => router.push("/")}
+                      />
+                    </EmptySpace>
+                  </>
+                ) : (
+                  <EmptySpace
+                    title={`You have been invited to ${invitationDetail.workspace.name}`}
+                    description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
+                  >
+                    <EmptySpaceItem Icon={CheckIcon} title="Accept" action={handleAccept} />
+                    <EmptySpaceItem
+                      Icon={XMarkIcon}
+                      title="Ignore"
+                      action={() => {
+                        router.push("/");
+                      }}
+                    />
+                  </EmptySpace>
+                )}
+              </>
+            )}
+          </>
+        ) : error ? (
+          <EmptySpace
+            title="This invitation link is not active anymore."
+            description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
+            link={{ text: "Or start from an empty project", href: "/" }}
+          >
+            {!user ? (
+              <EmptySpaceItem
+                Icon={UserIcon}
+                title="Sign in to continue"
+                action={() => {
+                  router.push("/signin");
+                }}
+              />
+            ) : (
+              <EmptySpaceItem
+                Icon={CubeIcon}
+                title="Continue to Dashboard"
+                action={() => {
+                  router.push("/");
+                }}
+              />
+            )}
+            <EmptySpaceItem
+              Icon={StarIcon}
+              title="Star us on GitHub"
+              action={() => {
+                router.push("https://github.com/makeplane");
+              }}
+            />
+            <EmptySpaceItem
+              Icon={ShareIcon}
+              title="Join our community of active creators"
+              action={() => {
+                router.push("https://discord.com/invite/8SR2N9PAcJ");
+              }}
+            />
+          </EmptySpace>
+        ) : (
+          <div className="flex h-full w-full items-center justify-center">
+            <Spinner />
+          </div>
+        )}
+      </div>
+    </DefaultLayout>
+  );
+};
+
+export default WorkspaceInvitation;
diff --git a/app/postcss.config.js b/app/postcss.config.js
new file mode 100644
index 000000000..12a703d90
--- /dev/null
+++ b/app/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/app/public/404.svg b/app/public/404.svg
new file mode 100644
index 000000000..4c298417d
--- /dev/null
+++ b/app/public/404.svg
@@ -0,0 +1,17 @@
+<svg width="596" height="568" viewBox="0 0 596 568" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="293" cy="284" r="284" fill="#F1F3F5"/>
+<path d="M191.016 181.117H178.242V174.008H190.293V169.477H178.242V162.68H191.016V157.816H172.344V186H191.016V181.117ZM230.172 162.426H235.191C238.121 162.426 239.957 164.184 239.957 166.918C239.957 169.711 238.219 171.41 235.25 171.41H230.172V162.426ZM230.172 175.688H234.898L240.152 186H246.832L240.895 174.809C244.137 173.539 246.012 170.414 246.012 166.801C246.012 161.234 242.301 157.816 235.816 157.816H224.273V186H230.172V175.688ZM284.797 162.426H289.816C292.746 162.426 294.582 164.184 294.582 166.918C294.582 169.711 292.844 171.41 289.875 171.41H284.797V162.426ZM284.797 175.688H289.523L294.777 186H301.457L295.52 174.809C298.762 173.539 300.637 170.414 300.637 166.801C300.637 161.234 296.926 157.816 290.441 157.816H278.898V186H284.797V175.688ZM346.238 157.328C337.879 157.328 332.645 162.934 332.645 171.918C332.645 180.883 337.879 186.488 346.238 186.488C354.578 186.488 359.832 180.883 359.832 171.918C359.832 162.934 354.578 157.328 346.238 157.328ZM346.238 162.25C350.848 162.25 353.797 166 353.797 171.918C353.797 177.816 350.848 181.547 346.238 181.547C341.609 181.547 338.66 177.816 338.66 171.918C338.66 166 341.629 162.25 346.238 162.25ZM398.539 162.426H403.559C406.488 162.426 408.324 164.184 408.324 166.918C408.324 169.711 406.586 171.41 403.617 171.41H398.539V162.426ZM398.539 175.688H403.266L408.52 186H415.199L409.262 174.809C412.504 173.539 414.379 170.414 414.379 166.801C414.379 161.234 410.668 157.816 404.184 157.816H392.641V186H398.539V175.688Z" fill="black"/>
+<path d="M191.016 181.117H178.242V174.008H190.293V169.477H178.242V162.68H191.016V157.816H172.344V186H191.016V181.117ZM230.172 162.426H235.191C238.121 162.426 239.957 164.184 239.957 166.918C239.957 169.711 238.219 171.41 235.25 171.41H230.172V162.426ZM230.172 175.688H234.898L240.152 186H246.832L240.895 174.809C244.137 173.539 246.012 170.414 246.012 166.801C246.012 161.234 242.301 157.816 235.816 157.816H224.273V186H230.172V175.688ZM284.797 162.426H289.816C292.746 162.426 294.582 164.184 294.582 166.918C294.582 169.711 292.844 171.41 289.875 171.41H284.797V162.426ZM284.797 175.688H289.523L294.777 186H301.457L295.52 174.809C298.762 173.539 300.637 170.414 300.637 166.801C300.637 161.234 296.926 157.816 290.441 157.816H278.898V186H284.797V175.688ZM346.238 157.328C337.879 157.328 332.645 162.934 332.645 171.918C332.645 180.883 337.879 186.488 346.238 186.488C354.578 186.488 359.832 180.883 359.832 171.918C359.832 162.934 354.578 157.328 346.238 157.328ZM346.238 162.25C350.848 162.25 353.797 166 353.797 171.918C353.797 177.816 350.848 181.547 346.238 181.547C341.609 181.547 338.66 177.816 338.66 171.918C338.66 166 341.629 162.25 346.238 162.25ZM398.539 162.426H403.559C406.488 162.426 408.324 164.184 408.324 166.918C408.324 169.711 406.586 171.41 403.617 171.41H398.539V162.426ZM398.539 175.688H403.266L408.52 186H415.199L409.262 174.809C412.504 173.539 414.379 170.414 414.379 166.801C414.379 161.234 410.668 157.816 404.184 157.816H392.641V186H398.539V175.688Z" fill="black"/>
+<mask id="mask0_468_2978" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="258" width="568" height="222">
+<path d="M115.723 475H157.764V437.354H185.303V401.904H157.764V263.623H95.3613C52.002 327.49 29.0039 364.551 10.5469 399.707V437.354H115.723V475ZM49.3652 402.051C66.5039 368.945 84.9609 340.088 115.723 294.971H116.602V403.223H49.3652V402.051ZM292.857 479.688C346.031 479.688 378.258 437.061 378.258 368.799C378.258 300.537 345.738 258.789 292.857 258.789C239.977 258.789 207.311 300.684 207.311 368.945C207.311 437.354 239.684 479.688 292.857 479.688ZM292.857 444.238C267.662 444.238 252.281 416.992 252.281 368.945C252.281 321.338 267.955 294.238 292.857 294.238C317.906 294.238 333.287 321.191 333.287 368.945C333.287 417.139 318.053 444.238 292.857 444.238ZM507.785 475H549.826V437.354H577.365V401.904H549.826V263.623H487.424C444.064 327.49 421.066 364.551 402.609 399.707V437.354H507.785V475ZM441.428 402.051C458.566 368.945 477.023 340.088 507.785 294.971H508.664V403.223H441.428V402.051Z" fill="#858E96"/>
+</mask>
+<g mask="url(#mask0_468_2978)">
+<path d="M369.5 527L243 223.5H-27.5V527H369.5Z" fill="#858E96"/>
+</g>
+<mask id="mask1_468_2978" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="19" y="277" width="568" height="222">
+<path d="M124.723 494H166.764V456.354H194.303V420.904H166.764V282.623H104.361C61.002 346.49 38.0039 383.551 19.5469 418.707V456.354H124.723V494ZM58.3652 421.051C75.5039 387.945 93.9609 359.088 124.723 313.971H125.602V422.223H58.3652V421.051ZM301.857 498.688C355.031 498.688 387.258 456.061 387.258 387.799C387.258 319.537 354.738 277.789 301.857 277.789C248.977 277.789 216.311 319.684 216.311 387.945C216.311 456.354 248.684 498.688 301.857 498.688ZM301.857 463.238C276.662 463.238 261.281 435.992 261.281 387.945C261.281 340.338 276.955 313.238 301.857 313.238C326.906 313.238 342.287 340.191 342.287 387.945C342.287 436.139 327.053 463.238 301.857 463.238ZM516.785 494H558.826V456.354H586.365V420.904H558.826V282.623H496.424C453.064 346.49 430.066 383.551 411.609 418.707V456.354H516.785V494ZM450.428 421.051C467.566 387.945 486.023 359.088 516.785 313.971H517.664V422.223H450.428V421.051Z" fill="#ACB5BD"/>
+</mask>
+<g mask="url(#mask1_468_2978)">
+<path d="M250 242.5L376.5 546H647V242.5H250Z" fill="#858E96"/>
+</g>
+</svg>
diff --git a/app/public/animated-icons/uploading.json b/app/public/animated-icons/uploading.json
new file mode 100644
index 000000000..1560fd40e
--- /dev/null
+++ b/app/public/animated-icons/uploading.json
@@ -0,0 +1 @@
+{"v":"5.3.4","fr":60,"ip":0,"op":84,"w":678,"h":896,"nm":"share","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Слой 18","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.347,"y":1},"o":{"x":0.333,"y":0},"n":"0p347_1_0p333_0","t":64,"s":[338,1288,0],"e":[338,492,0],"to":[0,-132.66667175293,0],"ti":[0,132.66667175293,0]},{"t":76}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.354,"y":1},"o":{"x":0.333,"y":0},"n":"0p354_1_0p333_0","t":65,"s":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[0.125,-433.461],[0.223,-433.488],[0,-433.488],[0.229,-433.33],[0,-433.488],[0.25,-433.262]],"c":false}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[177,-256.711],[0.223,-433.488],[0,-433.488],[-176.777,-256.711],[0,-433.488],[0,169.488]],"c":false}]},{"t":79}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":50,"ix":5},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":65,"op":84,"st":63,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Слой 15","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.393,"y":1},"o":{"x":0.333,"y":0},"n":"0p393_1_0p333_0","t":5,"s":[338,492,0],"e":[338,482,0],"to":[0,-1.66666662693024,0],"ti":[0,-22.1666660308838,0]},{"i":{"x":0.418,"y":1},"o":{"x":0.333,"y":0},"n":"0p418_1_0p333_0","t":15,"s":[338,482,0],"e":[338,625,0],"to":[0,22.1666660308838,0],"ti":[0,-1.66666662693024,0]},{"i":{"x":0.362,"y":1},"o":{"x":0.333,"y":0},"n":"0p362_1_0p333_0","t":26,"s":[338,625,0],"e":[338,492,0],"to":[0,1.66666662693024,0],"ti":[0,22.1666660308838,0]},{"t":35}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.338,"y":1},"o":{"x":0.333,"y":0},"n":"0p338_1_0p333_0","t":0,"s":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[177,-256.711],[0.223,-433.488],[0,-433.488],[-176.777,-256.711],[0,-433.488],[0,169.488]],"c":false}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[169,-252.711],[0.223,-433.488],[0,-433.488],[-168.777,-252.711],[0,-433.488],[0,169.488]],"c":false}]},{"i":{"x":0.368,"y":1},"o":{"x":0.333,"y":0},"n":"0p368_1_0p333_0","t":10,"s":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[169,-252.711],[0.223,-433.488],[0,-433.488],[-168.777,-252.711],[0,-433.488],[0,169.488]],"c":false}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[189,-181.274],[0.223,-273],[0,-273],[-198.777,-181.274],[0,-273],[0,169.488]],"c":false}]},{"i":{"x":0.301,"y":1},"o":{"x":0.333,"y":0},"n":"0p301_1_0p333_0","t":21,"s":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[189,-181.274],[0.223,-273],[0,-273],[-198.777,-181.274],[0,-273],[0,169.488]],"c":false}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[177,-256.711],[0.223,-433.488],[0,-433.488],[-176.777,-256.711],[0,-433.488],[0,169.488]],"c":false}]},{"i":{"x":0.338,"y":1},"o":{"x":0.333,"y":0},"n":"0p338_1_0p333_0","t":30,"s":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[177,-256.711],[0.223,-433.488],[0,-433.488],[-176.777,-256.711],[0,-433.488],[0,169.488]],"c":false}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[55,-331.686],[0.223,-433.488],[0,-433.488],[-52.777,-331.843],[0,-433.488],[0,-78.512]],"c":false}]},{"i":{"x":0.301,"y":1},"o":{"x":0.333,"y":0},"n":"0p301_1_0p333_0","t":36,"s":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[55,-331.686],[0.223,-433.488],[0,-433.488],[-52.777,-331.843],[0,-433.488],[0,-78.512]],"c":false}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[0.25,-432.593],[0.223,-433.488],[0,-433.488],[-0.027,-433.093],[0,-433.488],[0,-432.512]],"c":false}]},{"t":42}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":50,"ix":5},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":39,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Слой 17","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[338,492,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[48,-30.133],[32.954,0],[0,0],[25.447,15.225],[0,61.848],[0,0]],"o":[[0,0],[0,60.546],[-26.126,16.401],[0,0],[-31.652,0],[-49.724,-29.75],[0,0],[0,0]],"v":[[301.777,0],[301.777,196],[221.699,340.096],[131.777,366],[-131.777,366],[-218.579,342.008],[-301.777,196],[-301.777,0]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":50,"ix":5},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.473],"y":[-0.005]},"n":["0p833_1_0p473_-0p005"],"t":8,"s":[0],"e":[10]},{"i":{"x":[0.411],"y":[0.948]},"o":{"x":[0.167],"y":[0]},"n":["0p411_0p948_0p167_0"],"t":19,"s":[10],"e":[0]},{"t":40}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.473],"y":[0.005]},"n":["0p833_1_0p473_0p005"],"t":8,"s":[100],"e":[90]},{"i":{"x":[0.411],"y":[1.052]},"o":{"x":[0.167],"y":[0]},"n":["0p411_1p052_0p167_0"],"t":19,"s":[90],"e":[100]},{"t":40}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":84,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/app/public/attachment/audio-icon.png b/app/public/attachment/audio-icon.png
new file mode 100644
index 000000000..a3e551ea7
Binary files /dev/null and b/app/public/attachment/audio-icon.png differ
diff --git a/app/public/attachment/css-icon.png b/app/public/attachment/css-icon.png
new file mode 100644
index 000000000..cfb502d97
Binary files /dev/null and b/app/public/attachment/css-icon.png differ
diff --git a/app/public/attachment/csv-icon.png b/app/public/attachment/csv-icon.png
new file mode 100644
index 000000000..39d0ee713
Binary files /dev/null and b/app/public/attachment/csv-icon.png differ
diff --git a/app/public/attachment/default-icon.png b/app/public/attachment/default-icon.png
new file mode 100644
index 000000000..eb1ea5175
Binary files /dev/null and b/app/public/attachment/default-icon.png differ
diff --git a/app/public/attachment/doc-icon.png b/app/public/attachment/doc-icon.png
new file mode 100644
index 000000000..d1433721b
Binary files /dev/null and b/app/public/attachment/doc-icon.png differ
diff --git a/app/public/attachment/excel-icon.png b/app/public/attachment/excel-icon.png
new file mode 100644
index 000000000..b3a1b851e
Binary files /dev/null and b/app/public/attachment/excel-icon.png differ
diff --git a/app/public/attachment/figma-icon.png b/app/public/attachment/figma-icon.png
new file mode 100644
index 000000000..b4a1b63b3
Binary files /dev/null and b/app/public/attachment/figma-icon.png differ
diff --git a/app/public/attachment/html-icon.png b/app/public/attachment/html-icon.png
new file mode 100644
index 000000000..b6259a2be
Binary files /dev/null and b/app/public/attachment/html-icon.png differ
diff --git a/app/public/attachment/img-icon.png b/app/public/attachment/img-icon.png
new file mode 100644
index 000000000..6c5b8fce0
Binary files /dev/null and b/app/public/attachment/img-icon.png differ
diff --git a/app/public/attachment/jpg-icon.png b/app/public/attachment/jpg-icon.png
new file mode 100644
index 000000000..dfd2c9fde
Binary files /dev/null and b/app/public/attachment/jpg-icon.png differ
diff --git a/app/public/attachment/js-icon.png b/app/public/attachment/js-icon.png
new file mode 100644
index 000000000..66aacdaff
Binary files /dev/null and b/app/public/attachment/js-icon.png differ
diff --git a/app/public/attachment/pdf-icon.png b/app/public/attachment/pdf-icon.png
new file mode 100644
index 000000000..21c42d73f
Binary files /dev/null and b/app/public/attachment/pdf-icon.png differ
diff --git a/app/public/attachment/png-icon.png b/app/public/attachment/png-icon.png
new file mode 100644
index 000000000..f04207daa
Binary files /dev/null and b/app/public/attachment/png-icon.png differ
diff --git a/app/public/attachment/svg-icon.png b/app/public/attachment/svg-icon.png
new file mode 100644
index 000000000..856f94fbe
Binary files /dev/null and b/app/public/attachment/svg-icon.png differ
diff --git a/app/public/attachment/txt-icon.png b/app/public/attachment/txt-icon.png
new file mode 100644
index 000000000..1c1babf9c
Binary files /dev/null and b/app/public/attachment/txt-icon.png differ
diff --git a/app/public/attachment/video-icon.png b/app/public/attachment/video-icon.png
new file mode 100644
index 000000000..510838d91
Binary files /dev/null and b/app/public/attachment/video-icon.png differ
diff --git a/app/public/auth/join-project.svg b/app/public/auth/join-project.svg
new file mode 100644
index 000000000..f8288dd6c
--- /dev/null
+++ b/app/public/auth/join-project.svg
@@ -0,0 +1,52 @@
+<svg width="280" height="184" viewBox="0 0 280 184" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="53.5723" y="27.7246" width="79.5849" height="13.5513" rx="6.16937" fill="#EBEBEB"/>
+<rect x="148.581" y="27.7246" width="79.5849" height="13.5513" rx="6.16937" fill="#E2E2E2"/>
+<g filter="url(#filter0_d_1551_41871)">
+<rect x="17" y="3" width="260" height="160" rx="6.16937" fill="white"/>
+</g>
+<path d="M31.5043 100V90.5455H35.0498C35.7761 90.5455 36.3855 90.6809 36.8779 90.9517C37.3734 91.2225 37.7473 91.5949 37.9997 92.0689C38.2551 92.5398 38.3829 93.0753 38.3829 93.6754C38.3829 94.2817 38.2551 94.8203 37.9997 95.2912C37.7442 95.7621 37.3672 96.1329 36.8687 96.4038C36.3701 96.6715 35.7561 96.8054 35.0267 96.8054H32.6769V95.3974H34.7959C35.2206 95.3974 35.5683 95.3235 35.8392 95.1758C36.11 95.0281 36.3101 94.8249 36.4393 94.5664C36.5717 94.3079 36.6378 94.0109 36.6378 93.6754C36.6378 93.34 36.5717 93.0445 36.4393 92.7891C36.3101 92.5336 36.1085 92.3351 35.8346 92.1935C35.5637 92.0489 35.2144 91.9766 34.7866 91.9766H33.217V100H31.5043ZM39.7967 100V92.9091H41.417V94.0909H41.4909C41.6202 93.6816 41.8418 93.3661 42.1557 93.1445C42.4727 92.9199 42.8343 92.8075 43.2405 92.8075C43.3329 92.8075 43.436 92.8121 43.5498 92.8214C43.6668 92.8275 43.7637 92.8383 43.8407 92.8537V94.391C43.7699 94.3664 43.6576 94.3448 43.5037 94.3263C43.3529 94.3048 43.2067 94.294 43.0651 94.294C42.7604 94.294 42.4865 94.3602 42.2434 94.4925C42.0033 94.6218 41.8141 94.8018 41.6756 95.0327C41.5371 95.2635 41.4678 95.5297 41.4678 95.8313V100H39.7967ZM47.752 100.138C47.0595 100.138 46.4594 99.9862 45.9516 99.6815C45.4438 99.3768 45.0498 98.9505 44.7698 98.4027C44.4928 97.8549 44.3543 97.2147 44.3543 96.4822C44.3543 95.7498 44.4928 95.1081 44.7698 94.5572C45.0498 94.0063 45.4438 93.5785 45.9516 93.2738C46.4594 92.9691 47.0595 92.8168 47.752 92.8168C48.4445 92.8168 49.0446 92.9691 49.5524 93.2738C50.0602 93.5785 50.4526 94.0063 50.7296 94.5572C51.0097 95.1081 51.1497 95.7498 51.1497 96.4822C51.1497 97.2147 51.0097 97.8549 50.7296 98.4027C50.4526 98.9505 50.0602 99.3768 49.5524 99.6815C49.0446 99.9862 48.4445 100.138 47.752 100.138ZM47.7612 98.7997C48.1367 98.7997 48.4506 98.6966 48.703 98.4904C48.9554 98.2811 49.1431 98.0011 49.2662 97.6502C49.3924 97.2994 49.4555 96.9085 49.4555 96.4776C49.4555 96.0437 49.3924 95.6513 49.2662 95.3004C49.1431 94.9465 48.9554 94.6649 48.703 94.4556C48.4506 94.2463 48.1367 94.1417 47.7612 94.1417C47.3765 94.1417 47.0564 94.2463 46.801 94.4556C46.5486 94.6649 46.3594 94.9465 46.2332 95.3004C46.1101 95.6513 46.0485 96.0437 46.0485 96.4776C46.0485 96.9085 46.1101 97.2994 46.2332 97.6502C46.3594 98.0011 46.5486 98.2811 46.801 98.4904C47.0564 98.6966 47.3765 98.7997 47.7612 98.7997ZM52.5681 92.9091H54.2393V100.406C54.2393 100.917 54.1424 101.339 53.9485 101.671C53.7546 102.004 53.4745 102.251 53.1083 102.414C52.742 102.578 52.2973 102.659 51.7741 102.659C51.7126 102.659 51.6556 102.658 51.6033 102.654C51.551 102.654 51.494 102.653 51.4325 102.65V101.288C51.4786 101.291 51.5202 101.293 51.5571 101.293C51.5941 101.296 51.6325 101.297 51.6725 101.297C51.9926 101.297 52.2219 101.219 52.3604 101.062C52.4989 100.908 52.5681 100.682 52.5681 100.383V92.9091ZM53.3991 91.9027C53.1313 91.9027 52.9021 91.815 52.7112 91.6396C52.5235 91.4611 52.4296 91.2472 52.4296 90.9979C52.4296 90.7455 52.5235 90.5316 52.7112 90.3562C52.9021 90.1777 53.1313 90.0884 53.3991 90.0884C53.6638 90.0884 53.89 90.1777 54.0777 90.3562C54.2685 90.5316 54.3639 90.7455 54.3639 90.9979C54.3639 91.2472 54.2685 91.4611 54.0777 91.6396C53.89 91.815 53.6638 91.9027 53.3991 91.9027ZM59.097 100.138C58.3861 100.138 57.7721 99.9908 57.255 99.6953C56.741 99.3968 56.3456 98.9751 56.0686 98.4304C55.7916 97.8826 55.6531 97.2378 55.6531 96.4961C55.6531 95.7667 55.7916 95.1265 56.0686 94.5756C56.3486 94.0217 56.7395 93.5908 57.2412 93.283C57.7428 92.9722 58.3322 92.8168 59.0093 92.8168C59.4463 92.8168 59.8587 92.8875 60.2465 93.0291C60.6374 93.1676 60.9821 93.383 61.2806 93.6754C61.5822 93.9678 61.8192 94.3402 61.9915 94.7926C62.1639 95.242 62.25 95.7775 62.25 96.3991V96.9116H56.4379V95.7852H60.6481C60.645 95.4651 60.5758 95.1804 60.4404 94.9311C60.305 94.6787 60.1157 94.4802 59.8726 94.3356C59.6325 94.1909 59.3524 94.1186 59.0324 94.1186C58.6907 94.1186 58.3907 94.2017 58.1321 94.3679C57.8736 94.531 57.672 94.7464 57.5274 95.0142C57.3858 95.2789 57.3135 95.5697 57.3104 95.8867V96.87C57.3104 97.2824 57.3858 97.6364 57.5366 97.9318C57.6874 98.2242 57.8982 98.4489 58.1691 98.6058C58.4399 98.7597 58.7569 98.8366 59.1201 98.8366C59.3632 98.8366 59.5833 98.8028 59.7802 98.7351C59.9772 98.6643 60.148 98.5612 60.2927 98.4258C60.4373 98.2904 60.5466 98.1226 60.6204 97.9226L62.1808 98.098C62.0823 98.5104 61.8946 98.8705 61.6176 99.1783C61.3437 99.483 60.9928 99.7199 60.565 99.8892C60.1372 100.055 59.6479 100.138 59.097 100.138ZM66.7569 100.138C66.049 100.138 65.4412 99.9831 64.9334 99.6722C64.4286 99.3614 64.0393 98.9321 63.7654 98.3842C63.4946 97.8333 63.3592 97.1993 63.3592 96.4822C63.3592 95.7621 63.4976 95.1265 63.7746 94.5756C64.0516 94.0217 64.4425 93.5908 64.9472 93.283C65.455 92.9722 66.0552 92.8168 66.7476 92.8168C67.3232 92.8168 67.8325 92.9229 68.2757 93.1353C68.722 93.3446 69.0774 93.6416 69.3421 94.0263C69.6068 94.4079 69.7576 94.8542 69.7945 95.3651H68.1972C68.1326 95.0234 67.9787 94.7388 67.7356 94.511C67.4955 94.2802 67.1739 94.1648 66.7707 94.1648C66.4291 94.1648 66.129 94.2571 65.8705 94.4418C65.612 94.6233 65.4104 94.8849 65.2658 95.2266C65.1242 95.5682 65.0534 95.9775 65.0534 96.4545C65.0534 96.9377 65.1242 97.3532 65.2658 97.701C65.4073 98.0457 65.6058 98.3119 65.8613 98.4996C66.1198 98.6843 66.423 98.7766 66.7707 98.7766C67.0169 98.7766 67.237 98.7305 67.4309 98.6381C67.6279 98.5427 67.7925 98.4058 67.9248 98.2273C68.0572 98.0488 68.148 97.8318 68.1972 97.5763H69.7945C69.7545 98.078 69.6068 98.5227 69.3513 98.9105C69.0959 99.2952 68.7481 99.5968 68.308 99.8153C67.8679 100.031 67.3509 100.138 66.7569 100.138ZM74.7076 92.9091V94.2017H70.6313V92.9091H74.7076ZM71.6377 91.2102H73.3088V97.8672C73.3088 98.0919 73.3427 98.2642 73.4104 98.3842C73.4812 98.5012 73.5735 98.5812 73.6874 98.6243C73.8012 98.6674 73.9274 98.6889 74.0659 98.6889C74.1706 98.6889 74.266 98.6812 74.3521 98.6658C74.4414 98.6504 74.5091 98.6366 74.5553 98.6243L74.8369 99.9308C74.7476 99.9615 74.6199 99.9954 74.4537 100.032C74.2906 100.069 74.0905 100.091 73.8536 100.097C73.435 100.109 73.058 100.046 72.7225 99.9077C72.3871 99.7661 72.1208 99.5476 71.9239 99.2521C71.73 98.9567 71.6346 98.5874 71.6377 98.1442V91.2102ZM87.1733 90.5455V100H85.6498L81.1949 93.56H81.1164V100H79.4037V90.5455H80.9364L85.3867 96.9901H85.4698V90.5455H87.1733ZM91.0061 100.143C90.5567 100.143 90.152 100.063 89.7919 99.9031C89.4349 99.7399 89.1518 99.4999 88.9425 99.1829C88.7363 98.8659 88.6332 98.475 88.6332 98.0103C88.6332 97.6102 88.7071 97.2794 88.8548 97.0178C89.0025 96.7562 89.2041 96.5469 89.4596 96.3899C89.715 96.233 90.0028 96.1145 90.3228 96.0344C90.646 95.9513 90.9799 95.8913 91.3246 95.8544C91.7401 95.8113 92.0771 95.7728 92.3356 95.739C92.5941 95.7021 92.7819 95.6467 92.8988 95.5728C93.0189 95.4959 93.0789 95.3774 93.0789 95.2173V95.1896C93.0789 94.8419 92.9758 94.5726 92.7696 94.3817C92.5634 94.1909 92.2664 94.0955 91.8786 94.0955C91.4693 94.0955 91.1446 94.1848 90.9045 94.3633C90.6675 94.5418 90.5075 94.7526 90.4244 94.9957L88.864 94.7741C88.9871 94.3433 89.1903 93.9832 89.4734 93.6939C89.7566 93.4015 90.1028 93.183 90.5121 93.0384C90.9214 92.8906 91.3739 92.8168 91.8694 92.8168C92.211 92.8168 92.5511 92.8568 92.8896 92.9368C93.2281 93.0168 93.5374 93.1491 93.8175 93.3338C94.0976 93.5154 94.3223 93.7631 94.4915 94.0771C94.6639 94.391 94.75 94.7834 94.75 95.2543V100H93.1435V99.0259H93.0881C92.9866 99.2229 92.8434 99.4076 92.6588 99.5799C92.4772 99.7492 92.2479 99.8861 91.9709 99.9908C91.697 100.092 91.3754 100.143 91.0061 100.143ZM91.44 98.9151C91.7755 98.9151 92.0663 98.849 92.3125 98.7166C92.5588 98.5812 92.748 98.4027 92.8804 98.1811C93.0158 97.9595 93.0835 97.7179 93.0835 97.4563V96.6207C93.0312 96.6638 92.9419 96.7038 92.8157 96.7408C92.6926 96.7777 92.5541 96.81 92.4003 96.8377C92.2464 96.8654 92.094 96.89 91.9432 96.9116C91.7924 96.9331 91.6616 96.9516 91.5508 96.967C91.3015 97.0008 91.0784 97.0562 90.8814 97.1332C90.6845 97.2101 90.529 97.3178 90.4152 97.4563C90.3013 97.5917 90.2444 97.7672 90.2444 97.9826C90.2444 98.2904 90.3567 98.5227 90.5814 98.6797C90.806 98.8366 91.0923 98.9151 91.44 98.9151ZM96.4304 100V92.9091H98.0277V94.114H98.1108C98.2586 93.7077 98.5032 93.3907 98.8449 93.163C99.1865 92.9322 99.5943 92.8168 100.068 92.8168C100.548 92.8168 100.953 92.9337 101.282 93.1676C101.615 93.3984 101.849 93.7139 101.984 94.114H102.058C102.215 93.7201 102.48 93.4061 102.852 93.1722C103.227 92.9353 103.672 92.8168 104.186 92.8168C104.839 92.8168 105.371 93.023 105.783 93.4354C106.196 93.8478 106.402 94.4495 106.402 95.2404V100H104.726V95.4989C104.726 95.0588 104.609 94.7372 104.375 94.5341C104.141 94.3279 103.855 94.2248 103.517 94.2248C103.114 94.2248 102.798 94.351 102.57 94.6033C102.346 94.8526 102.233 95.1773 102.233 95.5774V100H100.595V95.4297C100.595 95.0634 100.484 94.7711 100.262 94.5526C100.044 94.334 99.7574 94.2248 99.4035 94.2248C99.1634 94.2248 98.9449 94.2863 98.7479 94.4094C98.5509 94.5295 98.394 94.7003 98.277 94.9219C98.1601 95.1404 98.1016 95.3958 98.1016 95.6882V100H96.4304ZM111.237 100.138C110.526 100.138 109.912 99.9908 109.395 99.6953C108.881 99.3968 108.485 98.9751 108.208 98.4304C107.931 97.8826 107.793 97.2378 107.793 96.4961C107.793 95.7667 107.931 95.1265 108.208 94.5756C108.488 94.0217 108.879 93.5908 109.381 93.283C109.882 92.9722 110.472 92.8168 111.149 92.8168C111.586 92.8168 111.998 92.8875 112.386 93.0291C112.777 93.1676 113.122 93.383 113.42 93.6754C113.722 93.9678 113.959 94.3402 114.131 94.7926C114.304 95.242 114.39 95.7775 114.39 96.3991V96.9116H108.578V95.7852H112.788C112.785 95.4651 112.715 95.1804 112.58 94.9311C112.445 94.6787 112.255 94.4802 112.012 94.3356C111.772 94.1909 111.492 94.1186 111.172 94.1186C110.83 94.1186 110.53 94.2017 110.272 94.3679C110.013 94.531 109.812 94.7464 109.667 95.0142C109.525 95.2789 109.453 95.5697 109.45 95.8867V96.87C109.45 97.2824 109.525 97.6364 109.676 97.9318C109.827 98.2242 110.038 98.4489 110.309 98.6058C110.58 98.7597 110.897 98.8366 111.26 98.8366C111.503 98.8366 111.723 98.8028 111.92 98.7351C112.117 98.6643 112.288 98.5612 112.432 98.4258C112.577 98.2904 112.686 98.1226 112.76 97.9226L114.32 98.098C114.222 98.5104 114.034 98.8705 113.757 99.1783C113.483 99.483 113.132 99.7199 112.705 99.8892C112.277 100.055 111.788 100.138 111.237 100.138Z" fill="black"/>
+<rect x="31" y="112.811" width="232" height="8" rx="4" fill="#EBEBEB"/>
+<rect x="31" y="128.811" width="79.5849" height="8.02018" rx="4.01009" fill="#E2E2E2"/>
+<rect x="31" y="145" width="8" height="8" rx="4" fill="#E2E2E2"/>
+<rect x="255" y="145" width="8" height="8" rx="4" fill="#E2E2E2"/>
+<rect x="241" y="145" width="8" height="8" rx="4" fill="#E2E2E2"/>
+<rect x="44" y="145" width="42" height="8" rx="4" fill="#E2E2E2"/>
+<path d="M17 9C17 5.68629 19.6863 3 23 3H271C274.314 3 277 5.68629 277 9V74H17V9Z" fill="#FCECEF"/>
+<path d="M162.95 60.0221L159.212 56.3326H134.104C133.689 56.3326 133.345 56.1968 133.074 55.9253C132.802 55.6537 132.667 55.3103 132.667 54.8951V51.8284C132.667 50.6145 132.97 49.5763 133.577 48.7138C134.184 47.8513 134.967 47.1964 135.925 46.7492C137.842 45.8867 139.686 45.2159 141.459 44.7367C143.232 44.2576 145.013 43.986 146.802 43.9221L128.929 26.0492C128.642 25.7617 128.506 25.4263 128.522 25.043C128.538 24.6596 128.689 24.3242 128.977 24.0367C129.264 23.7492 129.608 23.6055 130.007 23.6055C130.406 23.6055 130.75 23.7492 131.037 24.0367L165.01 58.0096C165.298 58.2971 165.442 58.6326 165.442 59.0159C165.442 59.3992 165.298 59.7346 165.01 60.0221C164.723 60.3096 164.379 60.4534 163.98 60.4534C163.581 60.4534 163.237 60.3096 162.95 60.0221ZM135.542 53.4576H156.337L149.677 46.7971C149.421 46.7652 149.15 46.7492 148.862 46.7492H148C146.179 46.7492 144.406 46.9329 142.681 47.3003C140.956 47.6676 139.087 48.3464 137.075 49.3367C136.628 49.5603 136.26 49.9037 135.973 50.3669C135.685 50.8301 135.542 51.3173 135.542 51.8284V53.4576ZM160.027 46.7492C161.017 47.1964 161.816 47.8513 162.423 48.7138C163.03 49.5763 163.333 50.6145 163.333 51.8284V52.2117L156.481 45.3596C157.056 45.5513 157.639 45.7669 158.23 46.0065C158.821 46.2461 159.42 46.4937 160.027 46.7492ZM151.354 40.2326L149.054 37.9326C150.012 37.7089 150.795 37.2138 151.402 36.4471C152.009 35.6805 152.312 34.786 152.312 33.7638C152.312 32.5499 151.897 31.5277 151.067 30.6971C150.236 29.8666 149.214 29.4513 148 29.4513C146.978 29.4513 146.083 29.7548 145.317 30.3617C144.55 30.9687 144.055 31.7513 143.831 32.7096L141.531 30.4096C142.138 29.1957 143.025 28.2534 144.191 27.5826C145.356 26.9117 146.626 26.5763 148 26.5763C150.012 26.5763 151.713 27.2711 153.103 28.6607C154.493 30.0503 155.187 31.7513 155.187 33.7638C155.187 35.1374 154.852 36.4072 154.181 37.5732C153.51 38.7391 152.568 39.6256 151.354 40.2326Z" fill="#F19FA9"/>
+<rect x="39.5723" y="45.7246" width="79.5849" height="13.5513" rx="6.16937" fill="#EBEBEB"/>
+<rect x="134.581" y="45.7246" width="79.5849" height="13.5513" rx="6.16937" fill="#E2E2E2"/>
+<g filter="url(#filter1_d_1551_41871)">
+<rect x="3" y="21" width="260" height="160" rx="6.16937" fill="white"/>
+</g>
+<path d="M17.5043 118V108.545H21.0498C21.7761 108.545 22.3855 108.681 22.8779 108.952C23.3734 109.223 23.7473 109.595 23.9997 110.069C24.2551 110.54 24.3829 111.075 24.3829 111.675C24.3829 112.282 24.2551 112.82 23.9997 113.291C23.7442 113.762 23.3672 114.133 22.8687 114.404C22.3701 114.672 21.7561 114.805 21.0267 114.805H18.6769V113.397H20.7959C21.2206 113.397 21.5683 113.324 21.8392 113.176C22.11 113.028 22.3101 112.825 22.4393 112.566C22.5717 112.308 22.6378 112.011 22.6378 111.675C22.6378 111.34 22.5717 111.045 22.4393 110.789C22.3101 110.534 22.1085 110.335 21.8346 110.194C21.5637 110.049 21.2144 109.977 20.7866 109.977H19.217V118H17.5043ZM25.7967 118V110.909H27.417V112.091H27.4909C27.6202 111.682 27.8418 111.366 28.1557 111.145C28.4727 110.92 28.8343 110.808 29.2405 110.808C29.3329 110.808 29.436 110.812 29.5498 110.821C29.6668 110.828 29.7637 110.838 29.8407 110.854V112.391C29.7699 112.366 29.6576 112.345 29.5037 112.326C29.3529 112.305 29.2067 112.294 29.0651 112.294C28.7604 112.294 28.4865 112.36 28.2434 112.493C28.0033 112.622 27.8141 112.802 27.6756 113.033C27.5371 113.263 27.4678 113.53 27.4678 113.831V118H25.7967ZM33.752 118.138C33.0595 118.138 32.4594 117.986 31.9516 117.681C31.4438 117.377 31.0498 116.951 30.7698 116.403C30.4928 115.855 30.3543 115.215 30.3543 114.482C30.3543 113.75 30.4928 113.108 30.7698 112.557C31.0498 112.006 31.4438 111.578 31.9516 111.274C32.4594 110.969 33.0595 110.817 33.752 110.817C34.4445 110.817 35.0446 110.969 35.5524 111.274C36.0602 111.578 36.4526 112.006 36.7296 112.557C37.0097 113.108 37.1497 113.75 37.1497 114.482C37.1497 115.215 37.0097 115.855 36.7296 116.403C36.4526 116.951 36.0602 117.377 35.5524 117.681C35.0446 117.986 34.4445 118.138 33.752 118.138ZM33.7612 116.8C34.1367 116.8 34.4506 116.697 34.703 116.49C34.9554 116.281 35.1431 116.001 35.2662 115.65C35.3924 115.299 35.4555 114.908 35.4555 114.478C35.4555 114.044 35.3924 113.651 35.2662 113.3C35.1431 112.946 34.9554 112.665 34.703 112.456C34.4506 112.246 34.1367 112.142 33.7612 112.142C33.3765 112.142 33.0564 112.246 32.801 112.456C32.5486 112.665 32.3594 112.946 32.2332 113.3C32.1101 113.651 32.0485 114.044 32.0485 114.478C32.0485 114.908 32.1101 115.299 32.2332 115.65C32.3594 116.001 32.5486 116.281 32.801 116.49C33.0564 116.697 33.3765 116.8 33.7612 116.8ZM38.5681 110.909H40.2393V118.406C40.2393 118.917 40.1424 119.339 39.9485 119.671C39.7546 120.004 39.4745 120.251 39.1083 120.414C38.742 120.578 38.2973 120.659 37.7741 120.659C37.7126 120.659 37.6556 120.658 37.6033 120.654C37.551 120.654 37.494 120.653 37.4325 120.65V119.288C37.4786 119.291 37.5202 119.293 37.5571 119.293C37.5941 119.296 37.6325 119.297 37.6725 119.297C37.9926 119.297 38.2219 119.219 38.3604 119.062C38.4989 118.908 38.5681 118.682 38.5681 118.383V110.909ZM39.3991 109.903C39.1313 109.903 38.9021 109.815 38.7112 109.64C38.5235 109.461 38.4296 109.247 38.4296 108.998C38.4296 108.746 38.5235 108.532 38.7112 108.356C38.9021 108.178 39.1313 108.088 39.3991 108.088C39.6638 108.088 39.89 108.178 40.0777 108.356C40.2685 108.532 40.3639 108.746 40.3639 108.998C40.3639 109.247 40.2685 109.461 40.0777 109.64C39.89 109.815 39.6638 109.903 39.3991 109.903ZM45.097 118.138C44.3861 118.138 43.7721 117.991 43.255 117.695C42.741 117.397 42.3456 116.975 42.0686 116.43C41.7916 115.883 41.6531 115.238 41.6531 114.496C41.6531 113.767 41.7916 113.127 42.0686 112.576C42.3486 112.022 42.7395 111.591 43.2412 111.283C43.7428 110.972 44.3322 110.817 45.0093 110.817C45.4463 110.817 45.8587 110.888 46.2465 111.029C46.6374 111.168 46.9821 111.383 47.2806 111.675C47.5822 111.968 47.8192 112.34 47.9915 112.793C48.1639 113.242 48.25 113.777 48.25 114.399V114.912H42.4379V113.785H46.6481C46.645 113.465 46.5758 113.18 46.4404 112.931C46.305 112.679 46.1157 112.48 45.8726 112.336C45.6325 112.191 45.3524 112.119 45.0324 112.119C44.6907 112.119 44.3907 112.202 44.1321 112.368C43.8736 112.531 43.672 112.746 43.5274 113.014C43.3858 113.279 43.3135 113.57 43.3104 113.887V114.87C43.3104 115.282 43.3858 115.636 43.5366 115.932C43.6874 116.224 43.8982 116.449 44.1691 116.606C44.4399 116.76 44.7569 116.837 45.1201 116.837C45.3632 116.837 45.5833 116.803 45.7802 116.735C45.9772 116.664 46.148 116.561 46.2927 116.426C46.4373 116.29 46.5466 116.123 46.6204 115.923L48.1808 116.098C48.0823 116.51 47.8946 116.871 47.6176 117.178C47.3437 117.483 46.9928 117.72 46.565 117.889C46.1372 118.055 45.6479 118.138 45.097 118.138ZM52.7569 118.138C52.049 118.138 51.4412 117.983 50.9334 117.672C50.4286 117.361 50.0393 116.932 49.7654 116.384C49.4946 115.833 49.3592 115.199 49.3592 114.482C49.3592 113.762 49.4976 113.127 49.7746 112.576C50.0516 112.022 50.4425 111.591 50.9472 111.283C51.455 110.972 52.0552 110.817 52.7476 110.817C53.3232 110.817 53.8325 110.923 54.2757 111.135C54.722 111.345 55.0774 111.642 55.3421 112.026C55.6068 112.408 55.7576 112.854 55.7945 113.365H54.1972C54.1326 113.023 53.9787 112.739 53.7356 112.511C53.4955 112.28 53.1739 112.165 52.7707 112.165C52.4291 112.165 52.129 112.257 51.8705 112.442C51.612 112.623 51.4104 112.885 51.2658 113.227C51.1242 113.568 51.0534 113.978 51.0534 114.455C51.0534 114.938 51.1242 115.353 51.2658 115.701C51.4073 116.046 51.6058 116.312 51.8613 116.5C52.1198 116.684 52.423 116.777 52.7707 116.777C53.0169 116.777 53.237 116.73 53.4309 116.638C53.6279 116.543 53.7925 116.406 53.9248 116.227C54.0572 116.049 54.148 115.832 54.1972 115.576H55.7945C55.7545 116.078 55.6068 116.523 55.3513 116.911C55.0959 117.295 54.7481 117.597 54.308 117.815C53.8679 118.031 53.3509 118.138 52.7569 118.138ZM60.7076 110.909V112.202H56.6313V110.909H60.7076ZM57.6377 109.21H59.3088V115.867C59.3088 116.092 59.3427 116.264 59.4104 116.384C59.4812 116.501 59.5735 116.581 59.6874 116.624C59.8012 116.667 59.9274 116.689 60.0659 116.689C60.1706 116.689 60.266 116.681 60.3521 116.666C60.4414 116.65 60.5091 116.637 60.5553 116.624L60.8369 117.931C60.7476 117.962 60.6199 117.995 60.4537 118.032C60.2906 118.069 60.0905 118.091 59.8536 118.097C59.435 118.109 59.058 118.046 58.7225 117.908C58.3871 117.766 58.1208 117.548 57.9239 117.252C57.73 116.957 57.6346 116.587 57.6377 116.144V109.21ZM73.1733 108.545V118H71.6498L67.1949 111.56H67.1164V118H65.4037V108.545H66.9364L71.3867 114.99H71.4698V108.545H73.1733ZM77.0061 118.143C76.5567 118.143 76.152 118.063 75.7919 117.903C75.4349 117.74 75.1518 117.5 74.9425 117.183C74.7363 116.866 74.6332 116.475 74.6332 116.01C74.6332 115.61 74.7071 115.279 74.8548 115.018C75.0025 114.756 75.2041 114.547 75.4596 114.39C75.715 114.233 76.0028 114.114 76.3228 114.034C76.646 113.951 76.9799 113.891 77.3246 113.854C77.7401 113.811 78.0771 113.773 78.3356 113.739C78.5941 113.702 78.7819 113.647 78.8988 113.573C79.0189 113.496 79.0789 113.377 79.0789 113.217V113.19C79.0789 112.842 78.9758 112.573 78.7696 112.382C78.5634 112.191 78.2664 112.096 77.8786 112.096C77.4693 112.096 77.1446 112.185 76.9045 112.363C76.6675 112.542 76.5075 112.753 76.4244 112.996L74.864 112.774C74.9871 112.343 75.1903 111.983 75.4734 111.694C75.7566 111.402 76.1028 111.183 76.5121 111.038C76.9214 110.891 77.3739 110.817 77.8694 110.817C78.211 110.817 78.5511 110.857 78.8896 110.937C79.2281 111.017 79.5374 111.149 79.8175 111.334C80.0976 111.515 80.3223 111.763 80.4915 112.077C80.6639 112.391 80.75 112.783 80.75 113.254V118H79.1435V117.026H79.0881C78.9866 117.223 78.8434 117.408 78.6588 117.58C78.4772 117.749 78.2479 117.886 77.9709 117.991C77.697 118.092 77.3754 118.143 77.0061 118.143ZM77.44 116.915C77.7755 116.915 78.0663 116.849 78.3125 116.717C78.5588 116.581 78.748 116.403 78.8804 116.181C79.0158 115.96 79.0835 115.718 79.0835 115.456V114.621C79.0312 114.664 78.9419 114.704 78.8157 114.741C78.6926 114.778 78.5541 114.81 78.4003 114.838C78.2464 114.865 78.094 114.89 77.9432 114.912C77.7924 114.933 77.6616 114.952 77.5508 114.967C77.3015 115.001 77.0784 115.056 76.8814 115.133C76.6845 115.21 76.529 115.318 76.4152 115.456C76.3013 115.592 76.2444 115.767 76.2444 115.983C76.2444 116.29 76.3567 116.523 76.5814 116.68C76.806 116.837 77.0923 116.915 77.44 116.915ZM82.4304 118V110.909H84.0277V112.114H84.1108C84.2586 111.708 84.5032 111.391 84.8449 111.163C85.1865 110.932 85.5943 110.817 86.0682 110.817C86.5483 110.817 86.9531 110.934 87.2824 111.168C87.6147 111.398 87.8486 111.714 87.9841 112.114H88.0579C88.2149 111.72 88.4796 111.406 88.852 111.172C89.2274 110.935 89.6722 110.817 90.1861 110.817C90.8386 110.817 91.371 111.023 91.7834 111.435C92.1958 111.848 92.402 112.449 92.402 113.24V118H90.7263V113.499C90.7263 113.059 90.6093 112.737 90.3754 112.534C90.1415 112.328 89.8553 112.225 89.5167 112.225C89.1136 112.225 88.7981 112.351 88.5704 112.603C88.3457 112.853 88.2334 113.177 88.2334 113.577V118H86.5945V113.43C86.5945 113.063 86.4837 112.771 86.2621 112.553C86.0436 112.334 85.7574 112.225 85.4035 112.225C85.1634 112.225 84.9449 112.286 84.7479 112.409C84.5509 112.529 84.394 112.7 84.277 112.922C84.1601 113.14 84.1016 113.396 84.1016 113.688V118H82.4304ZM97.2366 118.138C96.5257 118.138 95.9117 117.991 95.3947 117.695C94.8807 117.397 94.4852 116.975 94.2082 116.43C93.9312 115.883 93.7927 115.238 93.7927 114.496C93.7927 113.767 93.9312 113.127 94.2082 112.576C94.4883 112.022 94.8792 111.591 95.3808 111.283C95.8825 110.972 96.4718 110.817 97.1489 110.817C97.586 110.817 97.9984 110.888 98.3861 111.029C98.777 111.168 99.1217 111.383 99.4202 111.675C99.7218 111.968 99.9588 112.34 100.131 112.793C100.304 113.242 100.39 113.777 100.39 114.399V114.912H94.5775V113.785H98.7878C98.7847 113.465 98.7155 113.18 98.58 112.931C98.4446 112.679 98.2553 112.48 98.0122 112.336C97.7722 112.191 97.4921 112.119 97.172 112.119C96.8304 112.119 96.5303 112.202 96.2718 112.368C96.0133 112.531 95.8117 112.746 95.667 113.014C95.5255 113.279 95.4531 113.57 95.4501 113.887V114.87C95.4501 115.282 95.5255 115.636 95.6763 115.932C95.8271 116.224 96.0379 116.449 96.3087 116.606C96.5796 116.76 96.8966 116.837 97.2597 116.837C97.5029 116.837 97.7229 116.803 97.9199 116.735C98.1168 116.664 98.2877 116.561 98.4323 116.426C98.577 116.29 98.6862 116.123 98.7601 115.923L100.32 116.098C100.222 116.51 100.034 116.871 99.7572 117.178C99.4833 117.483 99.1325 117.72 98.7047 117.889C98.2769 118.055 97.7875 118.138 97.2366 118.138Z" fill="black"/>
+<rect x="17" y="130.811" width="232" height="8" rx="4" fill="#EBEBEB"/>
+<rect x="17" y="146.811" width="79.5849" height="8.02018" rx="4.01009" fill="#E2E2E2"/>
+<rect x="17" y="163" width="8" height="8" rx="4" fill="#E2E2E2"/>
+<rect x="241" y="163" width="8" height="8" rx="4" fill="#E2E2E2"/>
+<rect x="227" y="163" width="8" height="8" rx="4" fill="#E2E2E2"/>
+<rect x="30" y="163" width="42" height="8" rx="4" fill="#E2E2E2"/>
+<path d="M3 27C3 23.6863 5.68629 21 9 21H257C260.314 21 263 23.6863 263 27V92H3V27Z" fill="#FCECEF"/>
+<path d="M148.95 78.0221L145.212 74.3326H120.104C119.689 74.3326 119.345 74.1968 119.074 73.9253C118.802 73.6537 118.667 73.3103 118.667 72.8951V69.8284C118.667 68.6145 118.97 67.5763 119.577 66.7138C120.184 65.8513 120.967 65.1964 121.925 64.7492C123.842 63.8867 125.686 63.2159 127.459 62.7367C129.232 62.2576 131.013 61.986 132.802 61.9221L114.929 44.0492C114.642 43.7617 114.506 43.4263 114.522 43.043C114.538 42.6596 114.689 42.3242 114.977 42.0367C115.264 41.7492 115.608 41.6055 116.007 41.6055C116.406 41.6055 116.75 41.7492 117.037 42.0367L151.01 76.0096C151.298 76.2971 151.442 76.6326 151.442 77.0159C151.442 77.3992 151.298 77.7346 151.01 78.0221C150.723 78.3096 150.379 78.4534 149.98 78.4534C149.581 78.4534 149.237 78.3096 148.95 78.0221ZM121.542 71.4576H142.337L135.677 64.7971C135.421 64.7652 135.15 64.7492 134.862 64.7492H134C132.179 64.7492 130.406 64.9329 128.681 65.3003C126.956 65.6676 125.087 66.3464 123.075 67.3367C122.628 67.5603 122.26 67.9037 121.973 68.3669C121.685 68.8301 121.542 69.3173 121.542 69.8284V71.4576ZM146.027 64.7492C147.017 65.1964 147.816 65.8513 148.423 66.7138C149.03 67.5763 149.333 68.6145 149.333 69.8284V70.2117L142.481 63.3596C143.056 63.5513 143.639 63.7669 144.23 64.0065C144.821 64.2461 145.42 64.4937 146.027 64.7492ZM137.354 58.2326L135.054 55.9326C136.012 55.7089 136.795 55.2138 137.402 54.4471C138.009 53.6805 138.312 52.786 138.312 51.7638C138.312 50.5499 137.897 49.5277 137.067 48.6971C136.236 47.8666 135.214 47.4513 134 47.4513C132.978 47.4513 132.083 47.7548 131.317 48.3617C130.55 48.9687 130.055 49.7513 129.831 50.7096L127.531 48.4096C128.138 47.1957 129.025 46.2534 130.191 45.5826C131.356 44.9117 132.626 44.5763 134 44.5763C136.012 44.5763 137.713 45.2711 139.103 46.6607C140.493 48.0503 141.187 49.7513 141.187 51.7638C141.187 53.1374 140.852 54.4072 140.181 55.5732C139.51 56.7391 138.568 57.6256 137.354 58.2326Z" fill="#F19FA9"/>
+<defs>
+<filter id="filter0_d_1551_41871" x="14.5323" y="0.532252" width="264.935" height="164.935" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.23387"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1551_41871"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1551_41871" result="shape"/>
+</filter>
+<filter id="filter1_d_1551_41871" x="0.532252" y="18.5323" width="264.935" height="164.935" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.23387"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1551_41871"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1551_41871" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/app/public/auth/project-not-authorized.svg b/app/public/auth/project-not-authorized.svg
new file mode 100644
index 000000000..515fd6807
--- /dev/null
+++ b/app/public/auth/project-not-authorized.svg
@@ -0,0 +1,44 @@
+<svg width="283" height="174" viewBox="0 0 283 174" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="56.5723" y="27.7246" width="79.5849" height="13.5513" rx="6.16937" fill="#EBEBEB"/>
+<rect x="151.581" y="27.7246" width="79.5849" height="13.5513" rx="6.16937" fill="#E2E2E2"/>
+<g filter="url(#filter0_d_1537_45910)">
+<rect x="20" y="3" width="260" height="147" rx="6.16937" fill="white"/>
+</g>
+<path d="M34.5048 100V90.5455H38.0502C38.7766 90.5455 39.3859 90.6809 39.8784 90.9517C40.3739 91.2225 40.7478 91.5949 41.0002 92.0689C41.2556 92.5398 41.3833 93.0753 41.3833 93.6754C41.3833 94.2817 41.2556 94.8203 41.0002 95.2912C40.7447 95.7621 40.3677 96.1329 39.8691 96.4038C39.3706 96.6715 38.7566 96.8054 38.0272 96.8054H35.6774V95.3974H37.7963C38.2211 95.3974 38.5688 95.3235 38.8397 95.1758C39.1105 95.0281 39.3105 94.8249 39.4398 94.5664C39.5721 94.3079 39.6383 94.0109 39.6383 93.6754C39.6383 93.34 39.5721 93.0445 39.4398 92.7891C39.3105 92.5336 39.109 92.3351 38.835 92.1935C38.5642 92.0489 38.2149 91.9766 37.7871 91.9766H36.2175V100H34.5048ZM42.7971 100V92.9091H44.4175V94.0909H44.4914C44.6206 93.6816 44.8422 93.3661 45.1562 93.1445C45.4732 92.9199 45.8348 92.8075 46.241 92.8075C46.3334 92.8075 46.4365 92.8121 46.5503 92.8214C46.6673 92.8275 46.7642 92.8383 46.8412 92.8537V94.391C46.7704 94.3664 46.6581 94.3448 46.5042 94.3263C46.3534 94.3048 46.2072 94.294 46.0656 94.294C45.7609 94.294 45.487 94.3602 45.2439 94.4925C45.0038 94.6218 44.8145 94.8018 44.676 95.0327C44.5376 95.2635 44.4683 95.5297 44.4683 95.8313V100H42.7971ZM50.7525 100.138C50.06 100.138 49.4599 99.9862 48.9521 99.6815C48.4442 99.3768 48.0503 98.9505 47.7702 98.4027C47.4933 97.8549 47.3548 97.2147 47.3548 96.4822C47.3548 95.7498 47.4933 95.1081 47.7702 94.5572C48.0503 94.0063 48.4442 93.5785 48.9521 93.2738C49.4599 92.9691 50.06 92.8168 50.7525 92.8168C51.445 92.8168 52.0451 92.9691 52.5529 93.2738C53.0607 93.5785 53.4531 94.0063 53.7301 94.5572C54.0102 95.1081 54.1502 95.7498 54.1502 96.4822C54.1502 97.2147 54.0102 97.8549 53.7301 98.4027C53.4531 98.9505 53.0607 99.3768 52.5529 99.6815C52.0451 99.9862 51.445 100.138 50.7525 100.138ZM50.7617 98.7997C51.1372 98.7997 51.4511 98.6966 51.7035 98.4904C51.9558 98.2811 52.1436 98.0011 52.2667 97.6502C52.3929 97.2994 52.456 96.9085 52.456 96.4776C52.456 96.0437 52.3929 95.6513 52.2667 95.3004C52.1436 94.9465 51.9558 94.6649 51.7035 94.4556C51.4511 94.2463 51.1372 94.1417 50.7617 94.1417C50.377 94.1417 50.0569 94.2463 49.8015 94.4556C49.5491 94.6649 49.3598 94.9465 49.2337 95.3004C49.1106 95.6513 49.049 96.0437 49.049 96.4776C49.049 96.9085 49.1106 97.2994 49.2337 97.6502C49.3598 98.0011 49.5491 98.2811 49.8015 98.4904C50.0569 98.6966 50.377 98.7997 50.7617 98.7997ZM55.5686 92.9091H57.2398V100.406C57.2398 100.917 57.1428 101.339 56.949 101.671C56.7551 102.004 56.475 102.251 56.1088 102.414C55.7425 102.578 55.2978 102.659 54.7746 102.659C54.713 102.659 54.6561 102.658 54.6038 102.654C54.5515 102.654 54.4945 102.653 54.433 102.65V101.288C54.4791 101.291 54.5207 101.293 54.5576 101.293C54.5945 101.296 54.633 101.297 54.673 101.297C54.9931 101.297 55.2224 101.219 55.3609 101.062C55.4994 100.908 55.5686 100.682 55.5686 100.383V92.9091ZM56.3996 91.9027C56.1318 91.9027 55.9026 91.815 55.7117 91.6396C55.524 91.4611 55.4301 91.2472 55.4301 90.9979C55.4301 90.7455 55.524 90.5316 55.7117 90.3562C55.9026 90.1777 56.1318 90.0884 56.3996 90.0884C56.6643 90.0884 56.8905 90.1777 57.0782 90.3562C57.269 90.5316 57.3644 90.7455 57.3644 90.9979C57.3644 91.2472 57.269 91.4611 57.0782 91.6396C56.8905 91.815 56.6643 91.9027 56.3996 91.9027ZM62.0975 100.138C61.3865 100.138 60.7725 99.9908 60.2555 99.6953C59.7415 99.3968 59.3461 98.9751 59.0691 98.4304C58.7921 97.8826 58.6536 97.2378 58.6536 96.4961C58.6536 95.7667 58.7921 95.1265 59.0691 94.5756C59.3491 94.0217 59.74 93.5908 60.2417 93.283C60.7433 92.9722 61.3327 92.8168 62.0098 92.8168C62.4468 92.8168 62.8592 92.8875 63.247 93.0291C63.6378 93.1676 63.9825 93.383 64.2811 93.6754C64.5827 93.9678 64.8197 94.3402 64.992 94.7926C65.1644 95.242 65.2505 95.7775 65.2505 96.3991V96.9116H59.4384V95.7852H63.6486C63.6455 95.4651 63.5763 95.1804 63.4409 94.9311C63.3055 94.6787 63.1162 94.4802 62.873 94.3356C62.633 94.1909 62.3529 94.1186 62.0328 94.1186C61.6912 94.1186 61.3912 94.2017 61.1326 94.3679C60.8741 94.531 60.6725 94.7464 60.5279 95.0142C60.3863 95.2789 60.314 95.5697 60.3109 95.8867V96.87C60.3109 97.2824 60.3863 97.6364 60.5371 97.9318C60.6879 98.2242 60.8987 98.4489 61.1696 98.6058C61.4404 98.7597 61.7574 98.8366 62.1206 98.8366C62.3637 98.8366 62.5837 98.8028 62.7807 98.7351C62.9777 98.6643 63.1485 98.5612 63.2931 98.4258C63.4378 98.2904 63.5471 98.1226 63.6209 97.9226L65.1813 98.098C65.0828 98.5104 64.8951 98.8705 64.6181 99.1783C64.3442 99.483 63.9933 99.7199 63.5655 99.8892C63.1377 100.055 62.6484 100.138 62.0975 100.138ZM69.7574 100.138C69.0495 100.138 68.4417 99.9831 67.9339 99.6722C67.4291 99.3614 67.0398 98.9321 66.7659 98.3842C66.4951 97.8333 66.3596 97.1993 66.3596 96.4822C66.3596 95.7621 66.4981 95.1265 66.7751 94.5756C67.0521 94.0217 67.443 93.5908 67.9477 93.283C68.4555 92.9722 69.0557 92.8168 69.7481 92.8168C70.3237 92.8168 70.833 92.9229 71.2762 93.1353C71.7224 93.3446 72.0779 93.6416 72.3426 94.0263C72.6073 94.4079 72.7581 94.8542 72.795 95.3651H71.1977C71.1331 95.0234 70.9792 94.7388 70.7361 94.511C70.496 94.2802 70.1744 94.1648 69.7712 94.1648C69.4296 94.1648 69.1295 94.2571 68.871 94.4418C68.6125 94.6233 68.4109 94.8849 68.2662 95.2266C68.1247 95.5682 68.0539 95.9775 68.0539 96.4545C68.0539 96.9377 68.1247 97.3532 68.2662 97.701C68.4078 98.0457 68.6063 98.3119 68.8618 98.4996C69.1203 98.6843 69.4234 98.7766 69.7712 98.7766C70.0174 98.7766 70.2375 98.7305 70.4314 98.6381C70.6283 98.5427 70.793 98.4058 70.9253 98.2273C71.0577 98.0488 71.1485 97.8318 71.1977 97.5763H72.795C72.755 98.078 72.6073 98.5227 72.3518 98.9105C72.0964 99.2952 71.7486 99.5968 71.3085 99.8153C70.8684 100.031 70.3514 100.138 69.7574 100.138ZM77.7081 92.9091V94.2017H73.6317V92.9091H77.7081ZM74.6381 91.2102H76.3093V97.8672C76.3093 98.0919 76.3432 98.2642 76.4109 98.3842C76.4817 98.5012 76.574 98.5812 76.6879 98.6243C76.8017 98.6674 76.9279 98.6889 77.0664 98.6889C77.171 98.6889 77.2665 98.6812 77.3526 98.6658C77.4419 98.6504 77.5096 98.6366 77.5558 98.6243L77.8374 99.9308C77.7481 99.9615 77.6204 99.9954 77.4542 100.032C77.2911 100.069 77.091 100.091 76.854 100.097C76.4355 100.109 76.0585 100.046 75.723 99.9077C75.3875 99.7661 75.1213 99.5476 74.9244 99.2521C74.7305 98.9567 74.6351 98.5874 74.6381 98.1442V91.2102ZM87.5423 93.1445C87.4993 92.7414 87.3177 92.4274 86.9976 92.2028C86.6806 91.9781 86.2682 91.8658 85.7604 91.8658C85.4034 91.8658 85.0972 91.9196 84.8417 92.0273C84.5863 92.1351 84.3908 92.2812 84.2554 92.4659C84.12 92.6506 84.0508 92.8614 84.0477 93.0984C84.0477 93.2953 84.0923 93.4661 84.1816 93.6108C84.2739 93.7554 84.3985 93.8786 84.5555 93.9801C84.7124 94.0786 84.8863 94.1617 85.0771 94.2294C85.268 94.2971 85.4603 94.354 85.6542 94.4002L86.5406 94.6218C86.8976 94.7049 87.2407 94.8172 87.57 94.9588C87.9024 95.1004 88.1994 95.2789 88.461 95.4943C88.7257 95.7098 88.935 95.9698 89.0889 96.2745C89.2427 96.5792 89.3197 96.9362 89.3197 97.3455C89.3197 97.8995 89.1781 98.3873 88.895 98.8089C88.6118 99.2275 88.2025 99.5553 87.667 99.7923C87.1346 100.026 86.4898 100.143 85.7327 100.143C84.9971 100.143 84.3585 100.029 83.8169 99.8015C83.2783 99.5737 82.8566 99.2414 82.5519 98.8043C82.2503 98.3673 82.0872 97.8349 82.0626 97.207H83.7476C83.7722 97.5363 83.8738 97.8103 84.0523 98.0288C84.2308 98.2473 84.4632 98.4104 84.7494 98.5181C85.0387 98.6258 85.3618 98.6797 85.7188 98.6797C86.0912 98.6797 86.4175 98.6243 86.6975 98.5135C86.9807 98.3996 87.2023 98.2427 87.3623 98.0426C87.5223 97.8395 87.6039 97.6025 87.607 97.3317C87.6039 97.0855 87.5316 96.8823 87.39 96.7223C87.2484 96.5592 87.0499 96.4238 86.7945 96.3161C86.5421 96.2053 86.2467 96.1068 85.9081 96.0206L84.8325 95.7436C84.0538 95.5436 83.4383 95.2404 82.9859 94.8342C82.5365 94.4248 82.3119 93.8816 82.3119 93.2045C82.3119 92.6475 82.4627 92.1597 82.7643 91.7411C83.069 91.3226 83.4829 90.9979 84.0061 90.767C84.5293 90.5331 85.1218 90.4162 85.7835 90.4162C86.4544 90.4162 87.0422 90.5331 87.547 90.767C88.0548 90.9979 88.4533 91.3195 88.7426 91.7319C89.0319 92.1412 89.1812 92.6121 89.1904 93.1445H87.5423ZM93.9119 100.138C93.201 100.138 92.587 99.9908 92.07 99.6953C91.556 99.3968 91.1605 98.9751 90.8835 98.4304C90.6065 97.8826 90.468 97.2378 90.468 96.4961C90.468 95.7667 90.6065 95.1265 90.8835 94.5756C91.1636 94.0217 91.5545 93.5908 92.0561 93.283C92.5578 92.9722 93.1471 92.8168 93.8242 92.8168C94.2612 92.8168 94.6737 92.8875 95.0614 93.0291C95.4523 93.1676 95.797 93.383 96.0955 93.6754C96.3971 93.9678 96.6341 94.3402 96.8065 94.7926C96.9788 95.242 97.065 95.7775 97.065 96.3991V96.9116H91.2528V95.7852H95.4631C95.46 95.4651 95.3907 95.1804 95.2553 94.9311C95.1199 94.6787 94.9306 94.4802 94.6875 94.3356C94.4474 94.1909 94.1674 94.1186 93.8473 94.1186C93.5057 94.1186 93.2056 94.2017 92.9471 94.3679C92.6886 94.531 92.487 94.7464 92.3423 95.0142C92.2008 95.2789 92.1284 95.5697 92.1254 95.8867V96.87C92.1254 97.2824 92.2008 97.6364 92.3516 97.9318C92.5024 98.2242 92.7132 98.4489 92.984 98.6058C93.2549 98.7597 93.5719 98.8366 93.935 98.8366C94.1781 98.8366 94.3982 98.8028 94.5952 98.7351C94.7921 98.6643 94.9629 98.5612 95.1076 98.4258C95.2522 98.2904 95.3615 98.1226 95.4354 97.9226L96.9957 98.098C96.8973 98.5104 96.7095 98.8705 96.4325 99.1783C96.1586 99.483 95.8078 99.7199 95.38 99.8892C94.9522 100.055 94.4628 100.138 93.9119 100.138ZM102.02 92.9091V94.2017H97.9433V92.9091H102.02ZM98.9497 91.2102H100.621V97.8672C100.621 98.0919 100.655 98.2642 100.722 98.3842C100.793 98.5012 100.886 98.5812 100.999 98.6243C101.113 98.6674 101.239 98.6889 101.378 98.6889C101.483 98.6889 101.578 98.6812 101.664 98.6658C101.753 98.6504 101.821 98.6366 101.867 98.6243L102.149 99.9308C102.06 99.9615 101.932 99.9954 101.766 100.032C101.603 100.069 101.403 100.091 101.166 100.097C100.747 100.109 100.37 100.046 100.035 99.9077C99.6991 99.7661 99.4329 99.5476 99.2359 99.2521C99.042 98.9567 98.9466 98.5874 98.9497 98.1442V91.2102ZM106.958 92.9091V94.2017H102.882V92.9091H106.958ZM103.888 91.2102H105.559V97.8672C105.559 98.0919 105.593 98.2642 105.661 98.3842C105.732 98.5012 105.824 98.5812 105.938 98.6243C106.052 98.6674 106.178 98.6889 106.316 98.6889C106.421 98.6889 106.516 98.6812 106.603 98.6658C106.692 98.6504 106.76 98.6366 106.806 98.6243L107.087 99.9308C106.998 99.9615 106.87 99.9954 106.704 100.032C106.541 100.069 106.341 100.091 106.104 100.097C105.685 100.109 105.308 100.046 104.973 99.9077C104.638 99.7661 104.371 99.5476 104.174 99.2521C103.98 98.9567 103.885 98.5874 103.888 98.1442V91.2102ZM108.356 100V92.9091H110.027V100H108.356ZM109.196 91.9027C108.931 91.9027 108.704 91.815 108.513 91.6396C108.322 91.4611 108.226 91.2472 108.226 90.9979C108.226 90.7455 108.322 90.5316 108.513 90.3562C108.704 90.1777 108.931 90.0884 109.196 90.0884C109.464 90.0884 109.691 90.1777 109.879 90.3562C110.07 90.5316 110.165 90.7455 110.165 90.9979C110.165 91.2472 110.07 91.4611 109.879 91.6396C109.691 91.815 109.464 91.9027 109.196 91.9027ZM113.417 95.8452V100H111.745V92.9091H113.343V94.114H113.426C113.589 93.717 113.849 93.4015 114.206 93.1676C114.566 92.9337 115.011 92.8168 115.54 92.8168C116.029 92.8168 116.456 92.9214 116.819 93.1307C117.185 93.34 117.468 93.6431 117.668 94.0401C117.871 94.4371 117.971 94.9188 117.968 95.4851V100H116.297V95.7436C116.297 95.2696 116.174 94.8988 115.928 94.631C115.685 94.3633 115.348 94.2294 114.917 94.2294C114.625 94.2294 114.364 94.294 114.137 94.4233C113.912 94.5495 113.735 94.7326 113.606 94.9727C113.48 95.2127 113.417 95.5036 113.417 95.8452ZM122.751 102.807C122.151 102.807 121.635 102.725 121.205 102.562C120.774 102.402 120.427 102.187 120.166 101.916C119.904 101.645 119.723 101.345 119.621 101.016L121.126 100.651C121.194 100.789 121.292 100.926 121.422 101.062C121.551 101.2 121.725 101.314 121.943 101.403C122.165 101.496 122.443 101.542 122.779 101.542C123.253 101.542 123.645 101.426 123.956 101.196C124.267 100.968 124.422 100.592 124.422 100.069V98.7259H124.339C124.253 98.8982 124.127 99.0752 123.961 99.2567C123.797 99.4383 123.58 99.5907 123.31 99.7138C123.042 99.8369 122.705 99.8984 122.299 99.8984C121.754 99.8984 121.26 99.7707 120.817 99.5153C120.377 99.2567 120.026 98.872 119.764 98.3612C119.506 97.8472 119.376 97.204 119.376 96.4315C119.376 95.6528 119.506 94.9957 119.764 94.4602C120.026 93.9216 120.378 93.5138 120.821 93.2369C121.265 92.9568 121.759 92.8168 122.303 92.8168C122.719 92.8168 123.06 92.8875 123.328 93.0291C123.599 93.1676 123.814 93.3353 123.974 93.5323C124.134 93.7262 124.256 93.9093 124.339 94.0817H124.431V92.9091H126.08V100.115C126.08 100.722 125.935 101.223 125.646 101.62C125.356 102.017 124.961 102.314 124.459 102.511C123.958 102.708 123.388 102.807 122.751 102.807ZM122.765 98.5874C123.119 98.5874 123.42 98.5012 123.67 98.3288C123.919 98.1565 124.108 97.9087 124.238 97.5856C124.367 97.2624 124.431 96.8746 124.431 96.4222C124.431 95.976 124.367 95.5851 124.238 95.2496C124.111 94.9142 123.924 94.6541 123.674 94.4695C123.428 94.2817 123.125 94.1879 122.765 94.1879C122.393 94.1879 122.082 94.2848 121.832 94.4787C121.583 94.6726 121.395 94.9388 121.269 95.2773C121.143 95.6128 121.08 95.9944 121.08 96.4222C121.08 96.8562 121.143 97.2363 121.269 97.5625C121.398 97.8857 121.588 98.138 121.837 98.3196C122.089 98.4981 122.399 98.5874 122.765 98.5874ZM133.397 94.7834L131.873 94.9496C131.83 94.7957 131.755 94.651 131.647 94.5156C131.542 94.3802 131.401 94.271 131.222 94.1879C131.044 94.1048 130.825 94.0632 130.567 94.0632C130.219 94.0632 129.927 94.1386 129.69 94.2894C129.456 94.4402 129.34 94.6357 129.343 94.8757C129.34 95.0819 129.416 95.2496 129.57 95.3789C129.727 95.5082 129.985 95.6143 130.345 95.6974L131.555 95.956C132.226 96.1006 132.724 96.3299 133.05 96.6438C133.38 96.9577 133.546 97.3686 133.549 97.8764C133.546 98.3227 133.415 98.7166 133.157 99.0582C132.901 99.3968 132.546 99.6615 132.09 99.8523C131.635 100.043 131.112 100.138 130.521 100.138C129.653 100.138 128.954 99.9569 128.425 99.5938C127.895 99.2275 127.58 98.7182 127.478 98.0657L129.108 97.9087C129.182 98.2288 129.339 98.4704 129.579 98.6335C129.819 98.7966 130.131 98.8782 130.516 98.8782C130.913 98.8782 131.232 98.7966 131.472 98.6335C131.715 98.4704 131.836 98.2688 131.836 98.0288C131.836 97.8256 131.758 97.6579 131.601 97.5256C131.447 97.3932 131.207 97.2917 130.881 97.2209L129.671 96.967C128.991 96.8254 128.488 96.5869 128.162 96.2514C127.835 95.9129 127.674 95.4851 127.677 94.968C127.674 94.531 127.792 94.1525 128.032 93.8324C128.275 93.5092 128.612 93.2599 129.043 93.0845C129.477 92.906 129.977 92.8168 130.544 92.8168C131.375 92.8168 132.029 92.9937 132.506 93.3477C132.986 93.7016 133.283 94.1802 133.397 94.7834Z" fill="black"/>
+<rect x="34" y="112.811" width="232" height="8" rx="4" fill="#EBEBEB"/>
+<rect x="34" y="128.811" width="79.5849" height="8.02018" rx="4.01009" fill="#E2E2E2"/>
+<path d="M20 9C20 5.68629 22.6863 3 26 3H274C277.314 3 280 5.68629 280 9V74H20V9Z" fill="#FCECEF"/>
+<path d="M137.542 58.166C136.743 58.166 136.065 57.8865 135.506 57.3275C134.947 56.7684 134.667 56.0896 134.667 55.291V34.4952C134.667 33.6966 134.947 33.0178 135.506 32.4587C136.065 31.8997 136.743 31.6202 137.542 31.6202H140.896V27.0202C140.896 24.4966 141.783 22.3483 143.556 20.5754C145.328 18.8025 147.477 17.916 150 17.916C152.524 17.916 154.672 18.8025 156.445 20.5754C158.218 22.3483 159.104 24.4966 159.104 27.0202V31.6202H162.459C163.257 31.6202 163.936 31.8997 164.495 32.4587C165.054 33.0178 165.334 33.6966 165.334 34.4952V55.291C165.334 56.0896 165.054 56.7684 164.495 57.3275C163.936 57.8865 163.257 58.166 162.459 58.166H137.542ZM137.542 55.291H162.459V34.4952H137.542V55.291ZM150 48.5827C151.023 48.5827 151.893 48.2313 152.612 47.5285C153.331 46.8257 153.69 45.9792 153.69 44.9889C153.69 44.0306 153.331 43.1601 152.612 42.3775C151.893 41.5948 151.023 41.2035 150 41.2035C148.978 41.2035 148.108 41.5948 147.389 42.3775C146.67 43.1601 146.311 44.0306 146.311 44.9889C146.311 45.9792 146.67 46.8257 147.389 47.5285C148.108 48.2313 148.978 48.5827 150 48.5827ZM143.771 31.6202H156.229V27.0202C156.229 25.2952 155.623 23.8257 154.409 22.6118C153.195 21.398 151.725 20.791 150 20.791C148.275 20.791 146.806 21.398 145.592 22.6118C144.378 23.8257 143.771 25.2952 143.771 27.0202V31.6202ZM137.542 55.291V34.4952V55.291Z" fill="#F19FA9"/>
+<rect x="39.5723" y="48.7246" width="79.5849" height="13.5513" rx="6.16937" fill="#EBEBEB"/>
+<rect x="134.581" y="48.7246" width="79.5849" height="13.5513" rx="6.16937" fill="#E2E2E2"/>
+<g filter="url(#filter1_d_1537_45910)">
+<rect x="3" y="24" width="260" height="147" rx="6.16937" fill="white"/>
+</g>
+<path d="M17.5048 121V111.545H21.0502C21.7766 111.545 22.3859 111.681 22.8784 111.952C23.3739 112.223 23.7478 112.595 24.0002 113.069C24.2556 113.54 24.3833 114.075 24.3833 114.675C24.3833 115.282 24.2556 115.82 24.0002 116.291C23.7447 116.762 23.3677 117.133 22.8691 117.404C22.3706 117.672 21.7566 117.805 21.0272 117.805H18.6774V116.397H20.7963C21.2211 116.397 21.5688 116.324 21.8397 116.176C22.1105 116.028 22.3105 115.825 22.4398 115.566C22.5721 115.308 22.6383 115.011 22.6383 114.675C22.6383 114.34 22.5721 114.045 22.4398 113.789C22.3105 113.534 22.109 113.335 21.835 113.194C21.5642 113.049 21.2149 112.977 20.7871 112.977H19.2175V121H17.5048ZM25.7971 121V113.909H27.4175V115.091H27.4914C27.6206 114.682 27.8422 114.366 28.1562 114.145C28.4732 113.92 28.8348 113.808 29.241 113.808C29.3334 113.808 29.4365 113.812 29.5503 113.821C29.6673 113.828 29.7642 113.838 29.8412 113.854V115.391C29.7704 115.366 29.6581 115.345 29.5042 115.326C29.3534 115.305 29.2072 115.294 29.0656 115.294C28.7609 115.294 28.487 115.36 28.2439 115.493C28.0038 115.622 27.8145 115.802 27.676 116.033C27.5376 116.263 27.4683 116.53 27.4683 116.831V121H25.7971ZM33.7525 121.138C33.06 121.138 32.4599 120.986 31.9521 120.681C31.4442 120.377 31.0503 119.951 30.7702 119.403C30.4933 118.855 30.3548 118.215 30.3548 117.482C30.3548 116.75 30.4933 116.108 30.7702 115.557C31.0503 115.006 31.4442 114.578 31.9521 114.274C32.4599 113.969 33.06 113.817 33.7525 113.817C34.445 113.817 35.0451 113.969 35.5529 114.274C36.0607 114.578 36.4531 115.006 36.7301 115.557C37.0102 116.108 37.1502 116.75 37.1502 117.482C37.1502 118.215 37.0102 118.855 36.7301 119.403C36.4531 119.951 36.0607 120.377 35.5529 120.681C35.0451 120.986 34.445 121.138 33.7525 121.138ZM33.7617 119.8C34.1372 119.8 34.4511 119.697 34.7035 119.49C34.9558 119.281 35.1436 119.001 35.2667 118.65C35.3929 118.299 35.456 117.908 35.456 117.478C35.456 117.044 35.3929 116.651 35.2667 116.3C35.1436 115.946 34.9558 115.665 34.7035 115.456C34.4511 115.246 34.1372 115.142 33.7617 115.142C33.377 115.142 33.0569 115.246 32.8015 115.456C32.5491 115.665 32.3598 115.946 32.2337 116.3C32.1106 116.651 32.049 117.044 32.049 117.478C32.049 117.908 32.1106 118.299 32.2337 118.65C32.3598 119.001 32.5491 119.281 32.8015 119.49C33.0569 119.697 33.377 119.8 33.7617 119.8ZM38.5686 113.909H40.2398V121.406C40.2398 121.917 40.1428 122.339 39.949 122.671C39.7551 123.004 39.475 123.251 39.1088 123.414C38.7425 123.578 38.2978 123.659 37.7746 123.659C37.713 123.659 37.6561 123.658 37.6038 123.654C37.5515 123.654 37.4945 123.653 37.433 123.65V122.288C37.4791 122.291 37.5207 122.293 37.5576 122.293C37.5945 122.296 37.633 122.297 37.673 122.297C37.9931 122.297 38.2224 122.219 38.3609 122.062C38.4994 121.908 38.5686 121.682 38.5686 121.383V113.909ZM39.3996 112.903C39.1318 112.903 38.9026 112.815 38.7117 112.64C38.524 112.461 38.4301 112.247 38.4301 111.998C38.4301 111.746 38.524 111.532 38.7117 111.356C38.9026 111.178 39.1318 111.088 39.3996 111.088C39.6643 111.088 39.8905 111.178 40.0782 111.356C40.269 111.532 40.3644 111.746 40.3644 111.998C40.3644 112.247 40.269 112.461 40.0782 112.64C39.8905 112.815 39.6643 112.903 39.3996 112.903ZM45.0975 121.138C44.3865 121.138 43.7725 120.991 43.2555 120.695C42.7415 120.397 42.3461 119.975 42.0691 119.43C41.7921 118.883 41.6536 118.238 41.6536 117.496C41.6536 116.767 41.7921 116.127 42.0691 115.576C42.3491 115.022 42.74 114.591 43.2417 114.283C43.7433 113.972 44.3327 113.817 45.0098 113.817C45.4468 113.817 45.8592 113.888 46.247 114.029C46.6378 114.168 46.9825 114.383 47.2811 114.675C47.5827 114.968 47.8197 115.34 47.992 115.793C48.1644 116.242 48.2505 116.777 48.2505 117.399V117.912H42.4384V116.785H46.6486C46.6455 116.465 46.5763 116.18 46.4409 115.931C46.3055 115.679 46.1162 115.48 45.873 115.336C45.633 115.191 45.3529 115.119 45.0328 115.119C44.6912 115.119 44.3912 115.202 44.1326 115.368C43.8741 115.531 43.6725 115.746 43.5279 116.014C43.3863 116.279 43.314 116.57 43.3109 116.887V117.87C43.3109 118.282 43.3863 118.636 43.5371 118.932C43.6879 119.224 43.8987 119.449 44.1696 119.606C44.4404 119.76 44.7574 119.837 45.1206 119.837C45.3637 119.837 45.5837 119.803 45.7807 119.735C45.9777 119.664 46.1485 119.561 46.2931 119.426C46.4378 119.29 46.5471 119.123 46.6209 118.923L48.1813 119.098C48.0828 119.51 47.8951 119.871 47.6181 120.178C47.3442 120.483 46.9933 120.72 46.5655 120.889C46.1377 121.055 45.6484 121.138 45.0975 121.138ZM52.7574 121.138C52.0495 121.138 51.4417 120.983 50.9339 120.672C50.4291 120.361 50.0398 119.932 49.7659 119.384C49.4951 118.833 49.3596 118.199 49.3596 117.482C49.3596 116.762 49.4981 116.127 49.7751 115.576C50.0521 115.022 50.443 114.591 50.9477 114.283C51.4555 113.972 52.0557 113.817 52.7481 113.817C53.3237 113.817 53.833 113.923 54.2762 114.135C54.7224 114.345 55.0779 114.642 55.3426 115.026C55.6073 115.408 55.7581 115.854 55.795 116.365H54.1977C54.1331 116.023 53.9792 115.739 53.7361 115.511C53.496 115.28 53.1744 115.165 52.7712 115.165C52.4296 115.165 52.1295 115.257 51.871 115.442C51.6125 115.623 51.4109 115.885 51.2662 116.227C51.1247 116.568 51.0539 116.978 51.0539 117.455C51.0539 117.938 51.1247 118.353 51.2662 118.701C51.4078 119.046 51.6063 119.312 51.8618 119.5C52.1203 119.684 52.4234 119.777 52.7712 119.777C53.0174 119.777 53.2375 119.73 53.4314 119.638C53.6283 119.543 53.793 119.406 53.9253 119.227C54.0577 119.049 54.1485 118.832 54.1977 118.576H55.795C55.755 119.078 55.6073 119.523 55.3518 119.911C55.0964 120.295 54.7486 120.597 54.3085 120.815C53.8684 121.031 53.3514 121.138 52.7574 121.138ZM60.7081 113.909V115.202H56.6317V113.909H60.7081ZM57.6381 112.21H59.3093V118.867C59.3093 119.092 59.3432 119.264 59.4109 119.384C59.4817 119.501 59.574 119.581 59.6879 119.624C59.8017 119.667 59.9279 119.689 60.0664 119.689C60.171 119.689 60.2665 119.681 60.3526 119.666C60.4419 119.65 60.5096 119.637 60.5558 119.624L60.8374 120.931C60.7481 120.962 60.6204 120.995 60.4542 121.032C60.2911 121.069 60.091 121.091 59.854 121.097C59.4355 121.109 59.0585 121.046 58.723 120.908C58.3875 120.766 58.1213 120.548 57.9244 120.252C57.7305 119.957 57.6351 119.587 57.6381 119.144V112.21ZM70.5423 114.145C70.4993 113.741 70.3177 113.427 69.9976 113.203C69.6806 112.978 69.2682 112.866 68.7604 112.866C68.4034 112.866 68.0972 112.92 67.8417 113.027C67.5863 113.135 67.3908 113.281 67.2554 113.466C67.12 113.651 67.0508 113.861 67.0477 114.098C67.0477 114.295 67.0923 114.466 67.1816 114.611C67.2739 114.755 67.3985 114.879 67.5555 114.98C67.7124 115.079 67.8863 115.162 68.0771 115.229C68.268 115.297 68.4603 115.354 68.6542 115.4L69.5406 115.622C69.8976 115.705 70.2407 115.817 70.57 115.959C70.9024 116.1 71.1994 116.279 71.461 116.494C71.7257 116.71 71.935 116.97 72.0889 117.275C72.2427 117.579 72.3197 117.936 72.3197 118.346C72.3197 118.9 72.1781 119.387 71.895 119.809C71.6118 120.228 71.2025 120.555 70.667 120.792C70.1346 121.026 69.4898 121.143 68.7327 121.143C67.9971 121.143 67.3585 121.029 66.8169 120.801C66.2783 120.574 65.8566 120.241 65.5519 119.804C65.2503 119.367 65.0872 118.835 65.0626 118.207H66.7476C66.7722 118.536 66.8738 118.81 67.0523 119.029C67.2308 119.247 67.4632 119.41 67.7494 119.518C68.0387 119.626 68.3618 119.68 68.7188 119.68C69.0912 119.68 69.4175 119.624 69.6975 119.513C69.9807 119.4 70.2023 119.243 70.3623 119.043C70.5223 118.839 70.6039 118.603 70.607 118.332C70.6039 118.085 70.5316 117.882 70.39 117.722C70.2484 117.559 70.0499 117.424 69.7945 117.316C69.5421 117.205 69.2467 117.107 68.9081 117.021L67.8325 116.744C67.0538 116.544 66.4383 116.24 65.9859 115.834C65.5365 115.425 65.3119 114.882 65.3119 114.205C65.3119 113.647 65.4627 113.16 65.7643 112.741C66.069 112.323 66.4829 111.998 67.0061 111.767C67.5293 111.533 68.1218 111.416 68.7835 111.416C69.4544 111.416 70.0422 111.533 70.547 111.767C71.0548 111.998 71.4533 112.319 71.7426 112.732C72.0319 113.141 72.1812 113.612 72.1904 114.145H70.5423ZM76.9119 121.138C76.201 121.138 75.587 120.991 75.07 120.695C74.556 120.397 74.1605 119.975 73.8835 119.43C73.6065 118.883 73.468 118.238 73.468 117.496C73.468 116.767 73.6065 116.127 73.8835 115.576C74.1636 115.022 74.5545 114.591 75.0561 114.283C75.5578 113.972 76.1471 113.817 76.8242 113.817C77.2612 113.817 77.6737 113.888 78.0614 114.029C78.4523 114.168 78.797 114.383 79.0955 114.675C79.3971 114.968 79.6341 115.34 79.8065 115.793C79.9788 116.242 80.065 116.777 80.065 117.399V117.912H74.2528V116.785H78.4631C78.46 116.465 78.3907 116.18 78.2553 115.931C78.1199 115.679 77.9306 115.48 77.6875 115.336C77.4474 115.191 77.1674 115.119 76.8473 115.119C76.5057 115.119 76.2056 115.202 75.9471 115.368C75.6886 115.531 75.487 115.746 75.3423 116.014C75.2008 116.279 75.1284 116.57 75.1254 116.887V117.87C75.1254 118.282 75.2008 118.636 75.3516 118.932C75.5024 119.224 75.7132 119.449 75.984 119.606C76.2549 119.76 76.5719 119.837 76.935 119.837C77.1781 119.837 77.3982 119.803 77.5952 119.735C77.7921 119.664 77.9629 119.561 78.1076 119.426C78.2522 119.29 78.3615 119.123 78.4354 118.923L79.9957 119.098C79.8973 119.51 79.7095 119.871 79.4325 120.178C79.1586 120.483 78.8078 120.72 78.38 120.889C77.9522 121.055 77.4628 121.138 76.9119 121.138ZM85.0196 113.909V115.202H80.9433V113.909H85.0196ZM81.9497 112.21H83.6208V118.867C83.6208 119.092 83.6547 119.264 83.7224 119.384C83.7932 119.501 83.8855 119.581 83.9994 119.624C84.1133 119.667 84.2394 119.689 84.3779 119.689C84.4826 119.689 84.578 119.681 84.6642 119.666C84.7534 119.65 84.8211 119.637 84.8673 119.624L85.1489 120.931C85.0596 120.962 84.9319 120.995 84.7657 121.032C84.6026 121.069 84.4026 121.091 84.1656 121.097C83.747 121.109 83.37 121.046 83.0345 120.908C82.6991 120.766 82.4329 120.548 82.2359 120.252C82.042 119.957 81.9466 119.587 81.9497 119.144V112.21ZM89.9581 113.909V115.202H85.8817V113.909H89.9581ZM86.8881 112.21H88.5593V118.867C88.5593 119.092 88.5932 119.264 88.6609 119.384C88.7317 119.501 88.824 119.581 88.9379 119.624C89.0517 119.667 89.1779 119.689 89.3164 119.689C89.421 119.689 89.5165 119.681 89.6026 119.666C89.6919 119.65 89.7596 119.637 89.8058 119.624L90.0874 120.931C89.9981 120.962 89.8704 120.995 89.7042 121.032C89.5411 121.069 89.341 121.091 89.104 121.097C88.6855 121.109 88.3085 121.046 87.973 120.908C87.6375 120.766 87.3713 120.548 87.1744 120.252C86.9805 119.957 86.8851 119.587 86.8881 119.144V112.21ZM91.3557 121V113.909H93.0269V121H91.3557ZM92.1959 112.903C91.9313 112.903 91.7035 112.815 91.5127 112.64C91.3219 112.461 91.2265 112.247 91.2265 111.998C91.2265 111.746 91.3219 111.532 91.5127 111.356C91.7035 111.178 91.9313 111.088 92.1959 111.088C92.4637 111.088 92.6914 111.178 92.8792 111.356C93.07 111.532 93.1654 111.746 93.1654 111.998C93.1654 112.247 93.07 112.461 92.8792 112.64C92.6914 112.815 92.4637 112.903 92.1959 112.903ZM96.4165 116.845V121H94.7454V113.909H96.3427V115.114H96.4258C96.5889 114.717 96.849 114.402 97.206 114.168C97.5661 113.934 98.0108 113.817 98.5401 113.817C99.0295 113.817 99.4557 113.921 99.8189 114.131C100.185 114.34 100.468 114.643 100.668 115.04C100.871 115.437 100.971 115.919 100.968 116.485V121H99.2972V116.744C99.2972 116.27 99.1741 115.899 98.9279 115.631C98.6848 115.363 98.3478 115.229 97.9169 115.229C97.6245 115.229 97.3645 115.294 97.1367 115.423C96.9121 115.549 96.7351 115.733 96.6058 115.973C96.4796 116.213 96.4165 116.504 96.4165 116.845ZM105.751 123.807C105.151 123.807 104.635 123.725 104.205 123.562C103.774 123.402 103.427 123.187 103.166 122.916C102.904 122.645 102.723 122.345 102.621 122.016L104.126 121.651C104.194 121.789 104.292 121.926 104.422 122.062C104.551 122.2 104.725 122.314 104.943 122.403C105.165 122.496 105.443 122.542 105.779 122.542C106.253 122.542 106.645 122.426 106.956 122.196C107.267 121.968 107.422 121.592 107.422 121.069V119.726H107.339C107.253 119.898 107.127 120.075 106.961 120.257C106.797 120.438 106.58 120.591 106.31 120.714C106.042 120.837 105.705 120.898 105.299 120.898C104.754 120.898 104.26 120.771 103.817 120.515C103.377 120.257 103.026 119.872 102.764 119.361C102.506 118.847 102.376 118.204 102.376 117.431C102.376 116.653 102.506 115.996 102.764 115.46C103.026 114.922 103.378 114.514 103.821 114.237C104.265 113.957 104.759 113.817 105.303 113.817C105.719 113.817 106.06 113.888 106.328 114.029C106.599 114.168 106.814 114.335 106.974 114.532C107.134 114.726 107.256 114.909 107.339 115.082H107.431V113.909H109.08V121.115C109.08 121.722 108.935 122.223 108.646 122.62C108.356 123.017 107.961 123.314 107.459 123.511C106.958 123.708 106.388 123.807 105.751 123.807ZM105.765 119.587C106.119 119.587 106.42 119.501 106.67 119.329C106.919 119.156 107.108 118.909 107.238 118.586C107.367 118.262 107.431 117.875 107.431 117.422C107.431 116.976 107.367 116.585 107.238 116.25C107.111 115.914 106.924 115.654 106.674 115.469C106.428 115.282 106.125 115.188 105.765 115.188C105.393 115.188 105.082 115.285 104.832 115.479C104.583 115.673 104.395 115.939 104.269 116.277C104.143 116.613 104.08 116.994 104.08 117.422C104.08 117.856 104.143 118.236 104.269 118.562C104.398 118.886 104.588 119.138 104.837 119.32C105.089 119.498 105.399 119.587 105.765 119.587ZM116.397 115.783L114.873 115.95C114.83 115.796 114.755 115.651 114.647 115.516C114.542 115.38 114.401 115.271 114.222 115.188C114.044 115.105 113.825 115.063 113.567 115.063C113.219 115.063 112.927 115.139 112.69 115.289C112.456 115.44 112.34 115.636 112.343 115.876C112.34 116.082 112.416 116.25 112.57 116.379C112.727 116.508 112.985 116.614 113.345 116.697L114.555 116.956C115.226 117.101 115.724 117.33 116.05 117.644C116.38 117.958 116.546 118.369 116.549 118.876C116.546 119.323 116.415 119.717 116.157 120.058C115.901 120.397 115.546 120.661 115.09 120.852C114.635 121.043 114.112 121.138 113.521 121.138C112.653 121.138 111.954 120.957 111.425 120.594C110.895 120.228 110.58 119.718 110.478 119.066L112.108 118.909C112.182 119.229 112.339 119.47 112.579 119.634C112.819 119.797 113.131 119.878 113.516 119.878C113.913 119.878 114.232 119.797 114.472 119.634C114.715 119.47 114.836 119.269 114.836 119.029C114.836 118.826 114.758 118.658 114.601 118.526C114.447 118.393 114.207 118.292 113.881 118.221L112.671 117.967C111.991 117.825 111.488 117.587 111.162 117.251C110.835 116.913 110.674 116.485 110.677 115.968C110.674 115.531 110.792 115.152 111.032 114.832C111.275 114.509 111.612 114.26 112.043 114.085C112.477 113.906 112.977 113.817 113.544 113.817C114.375 113.817 115.029 113.994 115.506 114.348C115.986 114.702 116.283 115.18 116.397 115.783Z" fill="black"/>
+<rect x="17" y="133.811" width="232" height="8" rx="4" fill="#EBEBEB"/>
+<rect x="17" y="149.811" width="79.5849" height="8.02018" rx="4.01009" fill="#E2E2E2"/>
+<path d="M3 30C3 26.6863 5.68629 24 9 24H257C260.314 24 263 26.6863 263 30V95H3V30Z" fill="#FCECEF"/>
+<path d="M120.542 79.166C119.743 79.166 119.065 78.8865 118.506 78.3275C117.947 77.7684 117.667 77.0896 117.667 76.291V55.4952C117.667 54.6966 117.947 54.0178 118.506 53.4587C119.065 52.8997 119.743 52.6202 120.542 52.6202H123.896V48.0202C123.896 45.4966 124.783 43.3483 126.556 41.5754C128.328 39.8025 130.477 38.916 133 38.916C135.524 38.916 137.672 39.8025 139.445 41.5754C141.218 43.3483 142.104 45.4966 142.104 48.0202V52.6202H145.459C146.257 52.6202 146.936 52.8997 147.495 53.4587C148.054 54.0178 148.334 54.6966 148.334 55.4952V76.291C148.334 77.0896 148.054 77.7684 147.495 78.3275C146.936 78.8865 146.257 79.166 145.459 79.166H120.542ZM120.542 76.291H145.459V55.4952H120.542V76.291ZM133 69.5827C134.023 69.5827 134.893 69.2313 135.612 68.5285C136.331 67.8257 136.69 66.9792 136.69 65.9889C136.69 65.0306 136.331 64.1601 135.612 63.3775C134.893 62.5948 134.023 62.2035 133 62.2035C131.978 62.2035 131.108 62.5948 130.389 63.3775C129.67 64.1601 129.311 65.0306 129.311 65.9889C129.311 66.9792 129.67 67.8257 130.389 68.5285C131.108 69.2313 131.978 69.5827 133 69.5827ZM126.771 52.6202H139.229V48.0202C139.229 46.2952 138.623 44.8257 137.409 43.6118C136.195 42.398 134.725 41.791 133 41.791C131.275 41.791 129.806 42.398 128.592 43.6118C127.378 44.8257 126.771 46.2952 126.771 48.0202V52.6202ZM120.542 76.291V55.4952V76.291Z" fill="#F19FA9"/>
+<defs>
+<filter id="filter0_d_1537_45910" x="17.5323" y="0.532252" width="264.935" height="151.935" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.23387"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1537_45910"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1537_45910" result="shape"/>
+</filter>
+<filter id="filter1_d_1537_45910" x="0.532252" y="21.5323" width="264.935" height="151.935" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.23387"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1537_45910"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1537_45910" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/app/public/auth/workspace-not-authorized.svg b/app/public/auth/workspace-not-authorized.svg
new file mode 100644
index 000000000..dad2b0c05
--- /dev/null
+++ b/app/public/auth/workspace-not-authorized.svg
@@ -0,0 +1,44 @@
+<svg width="283" height="174" viewBox="0 0 283 174" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="56.5723" y="27.7246" width="79.5849" height="13.5513" rx="6.16937" fill="#EBEBEB"/>
+<rect x="151.581" y="27.7246" width="79.5849" height="13.5513" rx="6.16937" fill="#E2E2E2"/>
+<g filter="url(#filter0_d_1537_45910)">
+<rect x="20" y="3" width="260" height="147" rx="6.16937" fill="white"/>
+</g>
+<path d="M34.5048 100V90.5455H38.0502C38.7766 90.5455 39.3859 90.6809 39.8784 90.9517C40.3739 91.2225 40.7478 91.5949 41.0002 92.0689C41.2556 92.5398 41.3833 93.0753 41.3833 93.6754C41.3833 94.2817 41.2556 94.8203 41.0002 95.2912C40.7447 95.7621 40.3677 96.1329 39.8691 96.4038C39.3706 96.6715 38.7566 96.8054 38.0272 96.8054H35.6774V95.3974H37.7963C38.2211 95.3974 38.5688 95.3235 38.8397 95.1758C39.1105 95.0281 39.3105 94.8249 39.4398 94.5664C39.5721 94.3079 39.6383 94.0109 39.6383 93.6754C39.6383 93.34 39.5721 93.0445 39.4398 92.7891C39.3105 92.5336 39.109 92.3351 38.835 92.1935C38.5642 92.0489 38.2149 91.9766 37.7871 91.9766H36.2175V100H34.5048ZM42.7971 100V92.9091H44.4175V94.0909H44.4914C44.6206 93.6816 44.8422 93.3661 45.1562 93.1445C45.4732 92.9199 45.8348 92.8075 46.241 92.8075C46.3334 92.8075 46.4365 92.8121 46.5503 92.8214C46.6673 92.8275 46.7642 92.8383 46.8412 92.8537V94.391C46.7704 94.3664 46.6581 94.3448 46.5042 94.3263C46.3534 94.3048 46.2072 94.294 46.0656 94.294C45.7609 94.294 45.487 94.3602 45.2439 94.4925C45.0038 94.6218 44.8145 94.8018 44.676 95.0327C44.5376 95.2635 44.4683 95.5297 44.4683 95.8313V100H42.7971ZM50.7525 100.138C50.06 100.138 49.4599 99.9862 48.9521 99.6815C48.4442 99.3768 48.0503 98.9505 47.7702 98.4027C47.4933 97.8549 47.3548 97.2147 47.3548 96.4822C47.3548 95.7498 47.4933 95.1081 47.7702 94.5572C48.0503 94.0063 48.4442 93.5785 48.9521 93.2738C49.4599 92.9691 50.06 92.8168 50.7525 92.8168C51.445 92.8168 52.0451 92.9691 52.5529 93.2738C53.0607 93.5785 53.4531 94.0063 53.7301 94.5572C54.0102 95.1081 54.1502 95.7498 54.1502 96.4822C54.1502 97.2147 54.0102 97.8549 53.7301 98.4027C53.4531 98.9505 53.0607 99.3768 52.5529 99.6815C52.0451 99.9862 51.445 100.138 50.7525 100.138ZM50.7617 98.7997C51.1372 98.7997 51.4511 98.6966 51.7035 98.4904C51.9558 98.2811 52.1436 98.0011 52.2667 97.6502C52.3929 97.2994 52.456 96.9085 52.456 96.4776C52.456 96.0437 52.3929 95.6513 52.2667 95.3004C52.1436 94.9465 51.9558 94.6649 51.7035 94.4556C51.4511 94.2463 51.1372 94.1417 50.7617 94.1417C50.377 94.1417 50.0569 94.2463 49.8015 94.4556C49.5491 94.6649 49.3598 94.9465 49.2337 95.3004C49.1106 95.6513 49.049 96.0437 49.049 96.4776C49.049 96.9085 49.1106 97.2994 49.2337 97.6502C49.3598 98.0011 49.5491 98.2811 49.8015 98.4904C50.0569 98.6966 50.377 98.7997 50.7617 98.7997ZM55.5686 92.9091H57.2398V100.406C57.2398 100.917 57.1428 101.339 56.949 101.671C56.7551 102.004 56.475 102.251 56.1088 102.414C55.7425 102.578 55.2978 102.659 54.7746 102.659C54.713 102.659 54.6561 102.658 54.6038 102.654C54.5515 102.654 54.4945 102.653 54.433 102.65V101.288C54.4791 101.291 54.5207 101.293 54.5576 101.293C54.5945 101.296 54.633 101.297 54.673 101.297C54.9931 101.297 55.2224 101.219 55.3609 101.062C55.4994 100.908 55.5686 100.682 55.5686 100.383V92.9091ZM56.3996 91.9027C56.1318 91.9027 55.9026 91.815 55.7117 91.6396C55.524 91.4611 55.4301 91.2472 55.4301 90.9979C55.4301 90.7455 55.524 90.5316 55.7117 90.3562C55.9026 90.1777 56.1318 90.0884 56.3996 90.0884C56.6643 90.0884 56.8905 90.1777 57.0782 90.3562C57.269 90.5316 57.3644 90.7455 57.3644 90.9979C57.3644 91.2472 57.269 91.4611 57.0782 91.6396C56.8905 91.815 56.6643 91.9027 56.3996 91.9027ZM62.0975 100.138C61.3865 100.138 60.7725 99.9908 60.2555 99.6953C59.7415 99.3968 59.3461 98.9751 59.0691 98.4304C58.7921 97.8826 58.6536 97.2378 58.6536 96.4961C58.6536 95.7667 58.7921 95.1265 59.0691 94.5756C59.3491 94.0217 59.74 93.5908 60.2417 93.283C60.7433 92.9722 61.3327 92.8168 62.0098 92.8168C62.4468 92.8168 62.8592 92.8875 63.247 93.0291C63.6378 93.1676 63.9825 93.383 64.2811 93.6754C64.5827 93.9678 64.8197 94.3402 64.992 94.7926C65.1644 95.242 65.2505 95.7775 65.2505 96.3991V96.9116H59.4384V95.7852H63.6486C63.6455 95.4651 63.5763 95.1804 63.4409 94.9311C63.3055 94.6787 63.1162 94.4802 62.873 94.3356C62.633 94.1909 62.3529 94.1186 62.0328 94.1186C61.6912 94.1186 61.3912 94.2017 61.1326 94.3679C60.8741 94.531 60.6725 94.7464 60.5279 95.0142C60.3863 95.2789 60.314 95.5697 60.3109 95.8867V96.87C60.3109 97.2824 60.3863 97.6364 60.5371 97.9318C60.6879 98.2242 60.8987 98.4489 61.1696 98.6058C61.4404 98.7597 61.7574 98.8366 62.1206 98.8366C62.3637 98.8366 62.5837 98.8028 62.7807 98.7351C62.9777 98.6643 63.1485 98.5612 63.2931 98.4258C63.4378 98.2904 63.5471 98.1226 63.6209 97.9226L65.1813 98.098C65.0828 98.5104 64.8951 98.8705 64.6181 99.1783C64.3442 99.483 63.9933 99.7199 63.5655 99.8892C63.1377 100.055 62.6484 100.138 62.0975 100.138ZM69.7574 100.138C69.0495 100.138 68.4417 99.9831 67.9339 99.6722C67.4291 99.3614 67.0398 98.9321 66.7659 98.3842C66.4951 97.8333 66.3596 97.1993 66.3596 96.4822C66.3596 95.7621 66.4981 95.1265 66.7751 94.5756C67.0521 94.0217 67.443 93.5908 67.9477 93.283C68.4555 92.9722 69.0557 92.8168 69.7481 92.8168C70.3237 92.8168 70.833 92.9229 71.2762 93.1353C71.7224 93.3446 72.0779 93.6416 72.3426 94.0263C72.6073 94.4079 72.7581 94.8542 72.795 95.3651H71.1977C71.1331 95.0234 70.9792 94.7388 70.7361 94.511C70.496 94.2802 70.1744 94.1648 69.7712 94.1648C69.4296 94.1648 69.1295 94.2571 68.871 94.4418C68.6125 94.6233 68.4109 94.8849 68.2662 95.2266C68.1247 95.5682 68.0539 95.9775 68.0539 96.4545C68.0539 96.9377 68.1247 97.3532 68.2662 97.701C68.4078 98.0457 68.6063 98.3119 68.8618 98.4996C69.1203 98.6843 69.4234 98.7766 69.7712 98.7766C70.0174 98.7766 70.2375 98.7305 70.4314 98.6381C70.6283 98.5427 70.793 98.4058 70.9253 98.2273C71.0577 98.0488 71.1485 97.8318 71.1977 97.5763H72.795C72.755 98.078 72.6073 98.5227 72.3518 98.9105C72.0964 99.2952 71.7486 99.5968 71.3085 99.8153C70.8684 100.031 70.3514 100.138 69.7574 100.138ZM77.7081 92.9091V94.2017H73.6317V92.9091H77.7081ZM74.6381 91.2102H76.3093V97.8672C76.3093 98.0919 76.3432 98.2642 76.4109 98.3842C76.4817 98.5012 76.574 98.5812 76.6879 98.6243C76.8017 98.6674 76.9279 98.6889 77.0664 98.6889C77.171 98.6889 77.2665 98.6812 77.3526 98.6658C77.4419 98.6504 77.5096 98.6366 77.5558 98.6243L77.8374 99.9308C77.7481 99.9615 77.6204 99.9954 77.4542 100.032C77.2911 100.069 77.091 100.091 76.854 100.097C76.4355 100.109 76.0585 100.046 75.723 99.9077C75.3875 99.7661 75.1213 99.5476 74.9244 99.2521C74.7305 98.9567 74.6351 98.5874 74.6381 98.1442V91.2102ZM87.5423 93.1445C87.4993 92.7414 87.3177 92.4274 86.9976 92.2028C86.6806 91.9781 86.2682 91.8658 85.7604 91.8658C85.4034 91.8658 85.0972 91.9196 84.8417 92.0273C84.5863 92.1351 84.3908 92.2812 84.2554 92.4659C84.12 92.6506 84.0508 92.8614 84.0477 93.0984C84.0477 93.2953 84.0923 93.4661 84.1816 93.6108C84.2739 93.7554 84.3985 93.8786 84.5555 93.9801C84.7124 94.0786 84.8863 94.1617 85.0771 94.2294C85.268 94.2971 85.4603 94.354 85.6542 94.4002L86.5406 94.6218C86.8976 94.7049 87.2407 94.8172 87.57 94.9588C87.9024 95.1004 88.1994 95.2789 88.461 95.4943C88.7257 95.7098 88.935 95.9698 89.0889 96.2745C89.2427 96.5792 89.3197 96.9362 89.3197 97.3455C89.3197 97.8995 89.1781 98.3873 88.895 98.8089C88.6118 99.2275 88.2025 99.5553 87.667 99.7923C87.1346 100.026 86.4898 100.143 85.7327 100.143C84.9971 100.143 84.3585 100.029 83.8169 99.8015C83.2783 99.5737 82.8566 99.2414 82.5519 98.8043C82.2503 98.3673 82.0872 97.8349 82.0626 97.207H83.7476C83.7722 97.5363 83.8738 97.8103 84.0523 98.0288C84.2308 98.2473 84.4632 98.4104 84.7494 98.5181C85.0387 98.6258 85.3618 98.6797 85.7188 98.6797C86.0912 98.6797 86.4175 98.6243 86.6975 98.5135C86.9807 98.3996 87.2023 98.2427 87.3623 98.0426C87.5223 97.8395 87.6039 97.6025 87.607 97.3317C87.6039 97.0855 87.5316 96.8823 87.39 96.7223C87.2484 96.5592 87.0499 96.4238 86.7945 96.3161C86.5421 96.2053 86.2467 96.1068 85.9081 96.0206L84.8325 95.7436C84.0538 95.5436 83.4383 95.2404 82.9859 94.8342C82.5365 94.4248 82.3119 93.8816 82.3119 93.2045C82.3119 92.6475 82.4627 92.1597 82.7643 91.7411C83.069 91.3226 83.4829 90.9979 84.0061 90.767C84.5293 90.5331 85.1218 90.4162 85.7835 90.4162C86.4544 90.4162 87.0422 90.5331 87.547 90.767C88.0548 90.9979 88.4533 91.3195 88.7426 91.7319C89.0319 92.1412 89.1812 92.6121 89.1904 93.1445H87.5423ZM93.9119 100.138C93.201 100.138 92.587 99.9908 92.07 99.6953C91.556 99.3968 91.1605 98.9751 90.8835 98.4304C90.6065 97.8826 90.468 97.2378 90.468 96.4961C90.468 95.7667 90.6065 95.1265 90.8835 94.5756C91.1636 94.0217 91.5545 93.5908 92.0561 93.283C92.5578 92.9722 93.1471 92.8168 93.8242 92.8168C94.2612 92.8168 94.6737 92.8875 95.0614 93.0291C95.4523 93.1676 95.797 93.383 96.0955 93.6754C96.3971 93.9678 96.6341 94.3402 96.8065 94.7926C96.9788 95.242 97.065 95.7775 97.065 96.3991V96.9116H91.2528V95.7852H95.4631C95.46 95.4651 95.3907 95.1804 95.2553 94.9311C95.1199 94.6787 94.9306 94.4802 94.6875 94.3356C94.4474 94.1909 94.1674 94.1186 93.8473 94.1186C93.5057 94.1186 93.2056 94.2017 92.9471 94.3679C92.6886 94.531 92.487 94.7464 92.3423 95.0142C92.2008 95.2789 92.1284 95.5697 92.1254 95.8867V96.87C92.1254 97.2824 92.2008 97.6364 92.3516 97.9318C92.5024 98.2242 92.7132 98.4489 92.984 98.6058C93.2549 98.7597 93.5719 98.8366 93.935 98.8366C94.1781 98.8366 94.3982 98.8028 94.5952 98.7351C94.7921 98.6643 94.9629 98.5612 95.1076 98.4258C95.2522 98.2904 95.3615 98.1226 95.4354 97.9226L96.9957 98.098C96.8973 98.5104 96.7095 98.8705 96.4325 99.1783C96.1586 99.483 95.8078 99.7199 95.38 99.8892C94.9522 100.055 94.4628 100.138 93.9119 100.138ZM102.02 92.9091V94.2017H97.9433V92.9091H102.02ZM98.9497 91.2102H100.621V97.8672C100.621 98.0919 100.655 98.2642 100.722 98.3842C100.793 98.5012 100.886 98.5812 100.999 98.6243C101.113 98.6674 101.239 98.6889 101.378 98.6889C101.483 98.6889 101.578 98.6812 101.664 98.6658C101.753 98.6504 101.821 98.6366 101.867 98.6243L102.149 99.9308C102.06 99.9615 101.932 99.9954 101.766 100.032C101.603 100.069 101.403 100.091 101.166 100.097C100.747 100.109 100.37 100.046 100.035 99.9077C99.6991 99.7661 99.4329 99.5476 99.2359 99.2521C99.042 98.9567 98.9466 98.5874 98.9497 98.1442V91.2102ZM106.958 92.9091V94.2017H102.882V92.9091H106.958ZM103.888 91.2102H105.559V97.8672C105.559 98.0919 105.593 98.2642 105.661 98.3842C105.732 98.5012 105.824 98.5812 105.938 98.6243C106.052 98.6674 106.178 98.6889 106.316 98.6889C106.421 98.6889 106.516 98.6812 106.603 98.6658C106.692 98.6504 106.76 98.6366 106.806 98.6243L107.087 99.9308C106.998 99.9615 106.87 99.9954 106.704 100.032C106.541 100.069 106.341 100.091 106.104 100.097C105.685 100.109 105.308 100.046 104.973 99.9077C104.638 99.7661 104.371 99.5476 104.174 99.2521C103.98 98.9567 103.885 98.5874 103.888 98.1442V91.2102ZM108.356 100V92.9091H110.027V100H108.356ZM109.196 91.9027C108.931 91.9027 108.704 91.815 108.513 91.6396C108.322 91.4611 108.226 91.2472 108.226 90.9979C108.226 90.7455 108.322 90.5316 108.513 90.3562C108.704 90.1777 108.931 90.0884 109.196 90.0884C109.464 90.0884 109.691 90.1777 109.879 90.3562C110.07 90.5316 110.165 90.7455 110.165 90.9979C110.165 91.2472 110.07 91.4611 109.879 91.6396C109.691 91.815 109.464 91.9027 109.196 91.9027ZM113.417 95.8452V100H111.745V92.9091H113.343V94.114H113.426C113.589 93.717 113.849 93.4015 114.206 93.1676C114.566 92.9337 115.011 92.8168 115.54 92.8168C116.029 92.8168 116.456 92.9214 116.819 93.1307C117.185 93.34 117.468 93.6431 117.668 94.0401C117.871 94.4371 117.971 94.9188 117.968 95.4851V100H116.297V95.7436C116.297 95.2696 116.174 94.8988 115.928 94.631C115.685 94.3633 115.348 94.2294 114.917 94.2294C114.625 94.2294 114.364 94.294 114.137 94.4233C113.912 94.5495 113.735 94.7326 113.606 94.9727C113.48 95.2127 113.417 95.5036 113.417 95.8452ZM122.751 102.807C122.151 102.807 121.635 102.725 121.205 102.562C120.774 102.402 120.427 102.187 120.166 101.916C119.904 101.645 119.723 101.345 119.621 101.016L121.126 100.651C121.194 100.789 121.292 100.926 121.422 101.062C121.551 101.2 121.725 101.314 121.943 101.403C122.165 101.496 122.443 101.542 122.779 101.542C123.253 101.542 123.645 101.426 123.956 101.196C124.267 100.968 124.422 100.592 124.422 100.069V98.7259H124.339C124.253 98.8982 124.127 99.0752 123.961 99.2567C123.797 99.4383 123.58 99.5907 123.31 99.7138C123.042 99.8369 122.705 99.8984 122.299 99.8984C121.754 99.8984 121.26 99.7707 120.817 99.5153C120.377 99.2567 120.026 98.872 119.764 98.3612C119.506 97.8472 119.376 97.204 119.376 96.4315C119.376 95.6528 119.506 94.9957 119.764 94.4602C120.026 93.9216 120.378 93.5138 120.821 93.2369C121.265 92.9568 121.759 92.8168 122.303 92.8168C122.719 92.8168 123.06 92.8875 123.328 93.0291C123.599 93.1676 123.814 93.3353 123.974 93.5323C124.134 93.7262 124.256 93.9093 124.339 94.0817H124.431V92.9091H126.08V100.115C126.08 100.722 125.935 101.223 125.646 101.62C125.356 102.017 124.961 102.314 124.459 102.511C123.958 102.708 123.388 102.807 122.751 102.807ZM122.765 98.5874C123.119 98.5874 123.42 98.5012 123.67 98.3288C123.919 98.1565 124.108 97.9087 124.238 97.5856C124.367 97.2624 124.431 96.8746 124.431 96.4222C124.431 95.976 124.367 95.5851 124.238 95.2496C124.111 94.9142 123.924 94.6541 123.674 94.4695C123.428 94.2817 123.125 94.1879 122.765 94.1879C122.393 94.1879 122.082 94.2848 121.832 94.4787C121.583 94.6726 121.395 94.9388 121.269 95.2773C121.143 95.6128 121.08 95.9944 121.08 96.4222C121.08 96.8562 121.143 97.2363 121.269 97.5625C121.398 97.8857 121.588 98.138 121.837 98.3196C122.089 98.4981 122.399 98.5874 122.765 98.5874ZM133.397 94.7834L131.873 94.9496C131.83 94.7957 131.755 94.651 131.647 94.5156C131.542 94.3802 131.401 94.271 131.222 94.1879C131.044 94.1048 130.825 94.0632 130.567 94.0632C130.219 94.0632 129.927 94.1386 129.69 94.2894C129.456 94.4402 129.34 94.6357 129.343 94.8757C129.34 95.0819 129.416 95.2496 129.57 95.3789C129.727 95.5082 129.985 95.6143 130.345 95.6974L131.555 95.956C132.226 96.1006 132.724 96.3299 133.05 96.6438C133.38 96.9577 133.546 97.3686 133.549 97.8764C133.546 98.3227 133.415 98.7166 133.157 99.0582C132.901 99.3968 132.546 99.6615 132.09 99.8523C131.635 100.043 131.112 100.138 130.521 100.138C129.653 100.138 128.954 99.9569 128.425 99.5938C127.895 99.2275 127.58 98.7182 127.478 98.0657L129.108 97.9087C129.182 98.2288 129.339 98.4704 129.579 98.6335C129.819 98.7966 130.131 98.8782 130.516 98.8782C130.913 98.8782 131.232 98.7966 131.472 98.6335C131.715 98.4704 131.836 98.2688 131.836 98.0288C131.836 97.8256 131.758 97.6579 131.601 97.5256C131.447 97.3932 131.207 97.2917 130.881 97.2209L129.671 96.967C128.991 96.8254 128.488 96.5869 128.162 96.2514C127.835 95.9129 127.674 95.4851 127.677 94.968C127.674 94.531 127.792 94.1525 128.032 93.8324C128.275 93.5092 128.612 93.2599 129.043 93.0845C129.477 92.906 129.977 92.8168 130.544 92.8168C131.375 92.8168 132.029 92.9937 132.506 93.3477C132.986 93.7016 133.283 94.1802 133.397 94.7834Z" fill="black"/>
+<rect x="34" y="112.811" width="232" height="8" rx="4" fill="#EBEBEB"/>
+<rect x="34" y="128.811" width="79.5849" height="8.02018" rx="4.01009" fill="#E2E2E2"/>
+<path d="M20 9C20 5.68629 22.6863 3 26 3H274C277.314 3 280 5.68629 280 9V74H20V9Z" fill="#FCECEF"/>
+<path d="M137.542 58.166C136.743 58.166 136.065 57.8865 135.506 57.3275C134.947 56.7684 134.667 56.0896 134.667 55.291V34.4952C134.667 33.6966 134.947 33.0178 135.506 32.4587C136.065 31.8997 136.743 31.6202 137.542 31.6202H140.896V27.0202C140.896 24.4966 141.783 22.3483 143.556 20.5754C145.328 18.8025 147.477 17.916 150 17.916C152.524 17.916 154.672 18.8025 156.445 20.5754C158.218 22.3483 159.104 24.4966 159.104 27.0202V31.6202H162.459C163.257 31.6202 163.936 31.8997 164.495 32.4587C165.054 33.0178 165.334 33.6966 165.334 34.4952V55.291C165.334 56.0896 165.054 56.7684 164.495 57.3275C163.936 57.8865 163.257 58.166 162.459 58.166H137.542ZM137.542 55.291H162.459V34.4952H137.542V55.291ZM150 48.5827C151.023 48.5827 151.893 48.2313 152.612 47.5285C153.331 46.8257 153.69 45.9792 153.69 44.9889C153.69 44.0306 153.331 43.1601 152.612 42.3775C151.893 41.5948 151.023 41.2035 150 41.2035C148.978 41.2035 148.108 41.5948 147.389 42.3775C146.67 43.1601 146.311 44.0306 146.311 44.9889C146.311 45.9792 146.67 46.8257 147.389 47.5285C148.108 48.2313 148.978 48.5827 150 48.5827ZM143.771 31.6202H156.229V27.0202C156.229 25.2952 155.623 23.8257 154.409 22.6118C153.195 21.398 151.725 20.791 150 20.791C148.275 20.791 146.806 21.398 145.592 22.6118C144.378 23.8257 143.771 25.2952 143.771 27.0202V31.6202ZM137.542 55.291V34.4952V55.291Z" fill="#F19FA9"/>
+<rect x="39.5723" y="48.7246" width="79.5849" height="13.5513" rx="6.16937" fill="#EBEBEB"/>
+<rect x="134.581" y="48.7246" width="79.5849" height="13.5513" rx="6.16937" fill="#E2E2E2"/>
+<g filter="url(#filter1_d_1537_45910)">
+<rect x="3" y="24" width="260" height="147" rx="6.16937" fill="white"/>
+</g>
+<path d="M19.4945 121L16.8262 111.545H18.6681L20.3716 118.493H20.4593L22.2782 111.545H23.954L25.7775 118.498H25.8606L27.5641 111.545H29.4061L26.7377 121H25.0481L23.1554 114.366H23.0815L21.1841 121H19.4945ZM32.8892 121.138C32.1967 121.138 31.5966 120.986 31.0888 120.681C30.581 120.377 30.187 119.951 29.907 119.403C29.63 118.855 29.4915 118.215 29.4915 117.482C29.4915 116.75 29.63 116.108 29.907 115.557C30.187 115.006 30.581 114.578 31.0888 114.274C31.5966 113.969 32.1967 113.817 32.8892 113.817C33.5817 113.817 34.1818 113.969 34.6896 114.274C35.1974 114.578 35.5898 115.006 35.8668 115.557C36.1469 116.108 36.2869 116.75 36.2869 117.482C36.2869 118.215 36.1469 118.855 35.8668 119.403C35.5898 119.951 35.1974 120.377 34.6896 120.681C34.1818 120.986 33.5817 121.138 32.8892 121.138ZM32.8984 119.8C33.2739 119.8 33.5878 119.697 33.8402 119.49C34.0926 119.281 34.2803 119.001 34.4034 118.65C34.5296 118.299 34.5927 117.908 34.5927 117.478C34.5927 117.044 34.5296 116.651 34.4034 116.3C34.2803 115.946 34.0926 115.665 33.8402 115.456C33.5878 115.246 33.2739 115.142 32.8984 115.142C32.5137 115.142 32.1937 115.246 31.9382 115.456C31.6858 115.665 31.4966 115.946 31.3704 116.3C31.2473 116.651 31.1857 117.044 31.1857 117.478C31.1857 117.908 31.2473 118.299 31.3704 118.65C31.4966 119.001 31.6858 119.281 31.9382 119.49C32.1937 119.697 32.5137 119.8 32.8984 119.8ZM37.7053 121V113.909H39.3257V115.091H39.3996C39.5289 114.682 39.7504 114.366 40.0644 114.145C40.3814 113.92 40.743 113.808 41.1492 113.808C41.2416 113.808 41.3447 113.812 41.4585 113.821C41.5755 113.828 41.6724 113.838 41.7494 113.854V115.391C41.6786 115.366 41.5663 115.345 41.4124 115.326C41.2616 115.305 41.1154 115.294 40.9738 115.294C40.6691 115.294 40.3952 115.36 40.1521 115.493C39.912 115.622 39.7227 115.802 39.5843 116.033C39.4458 116.263 39.3765 116.53 39.3765 116.831V121H37.7053ZM44.3831 118.775L44.3785 116.757H44.6462L47.1945 113.909H49.1473L46.0127 117.399H45.6665L44.3831 118.775ZM42.8596 121V111.545H44.5308V121H42.8596ZM47.3099 121L45.0017 117.773L46.1281 116.596L49.3089 121H47.3099ZM55.8654 115.783L54.342 115.95C54.2989 115.796 54.2235 115.651 54.1158 115.516C54.0111 115.38 53.8696 115.271 53.6911 115.188C53.5125 115.105 53.294 115.063 53.0355 115.063C52.6877 115.063 52.3954 115.139 52.1584 115.289C51.9245 115.44 51.8091 115.636 51.8121 115.876C51.8091 116.082 51.8845 116.25 52.0384 116.379C52.1953 116.508 52.4538 116.614 52.8139 116.697L54.0234 116.956C54.6944 117.101 55.1929 117.33 55.5192 117.644C55.8485 117.958 56.0147 118.369 56.0178 118.876C56.0147 119.323 55.8839 119.717 55.6254 120.058C55.3699 120.397 55.0144 120.661 54.5589 120.852C54.1035 121.043 53.5803 121.138 52.9893 121.138C52.1214 121.138 51.4228 120.957 50.8935 120.594C50.3641 120.228 50.0487 119.718 49.9471 119.066L51.5767 118.909C51.6506 119.229 51.8075 119.47 52.0476 119.634C52.2876 119.797 52.6 119.878 52.9847 119.878C53.3817 119.878 53.7003 119.797 53.9403 119.634C54.1835 119.47 54.305 119.269 54.305 119.029C54.305 118.826 54.2266 118.658 54.0696 118.526C53.9157 118.393 53.6757 118.292 53.3494 118.221L52.1399 117.967C51.4598 117.825 50.9566 117.587 50.6303 117.251C50.3041 116.913 50.1425 116.485 50.1456 115.968C50.1425 115.531 50.261 115.152 50.5011 114.832C50.7442 114.509 51.0812 114.26 51.5121 114.085C51.946 113.906 52.4461 113.817 53.0124 113.817C53.8434 113.817 54.4974 113.994 54.9744 114.348C55.4545 114.702 55.7515 115.18 55.8654 115.783ZM57.3958 123.659V113.909H59.0392V115.082H59.1362C59.2224 114.909 59.3439 114.726 59.5009 114.532C59.6578 114.335 59.8702 114.168 60.138 114.029C60.4057 113.888 60.7473 113.817 61.1628 113.817C61.7106 113.817 62.2046 113.957 62.6447 114.237C63.0879 114.514 63.4387 114.925 63.6973 115.469C63.9589 116.011 64.0897 116.676 64.0897 117.464C64.0897 118.242 63.9619 118.904 63.7065 119.449C63.4511 119.994 63.1033 120.409 62.6632 120.695C62.2231 120.982 61.7245 121.125 61.1674 121.125C60.7612 121.125 60.4242 121.057 60.1564 120.922C59.8887 120.786 59.6732 120.623 59.5101 120.432C59.3501 120.238 59.2254 120.055 59.1362 119.883H59.0669V123.659H57.3958ZM59.0346 117.455C59.0346 117.913 59.0993 118.315 59.2285 118.659C59.3609 119.004 59.5501 119.273 59.7963 119.467C60.0456 119.658 60.3472 119.754 60.7012 119.754C61.0705 119.754 61.3798 119.655 61.6291 119.458C61.8784 119.258 62.0661 118.986 62.1923 118.641C62.3216 118.293 62.3862 117.898 62.3862 117.455C62.3862 117.014 62.3231 116.624 62.1969 116.282C62.0707 115.94 61.883 115.673 61.6337 115.479C61.3844 115.285 61.0736 115.188 60.7012 115.188C60.3442 115.188 60.041 115.282 59.7917 115.469C59.5424 115.657 59.3532 115.92 59.2239 116.259C59.0977 116.597 59.0346 116.996 59.0346 117.455ZM67.5613 121.143C67.1119 121.143 66.7072 121.063 66.3471 120.903C65.9901 120.74 65.707 120.5 65.4977 120.183C65.2915 119.866 65.1884 119.475 65.1884 119.01C65.1884 118.61 65.2623 118.279 65.41 118.018C65.5577 117.756 65.7593 117.547 66.0147 117.39C66.2702 117.233 66.5579 117.114 66.878 117.034C67.2012 116.951 67.5351 116.891 67.8798 116.854C68.2953 116.811 68.6323 116.773 68.8908 116.739C69.1493 116.702 69.3371 116.647 69.454 116.573C69.574 116.496 69.6341 116.377 69.6341 116.217V116.19C69.6341 115.842 69.531 115.573 69.3248 115.382C69.1185 115.191 68.8216 115.096 68.4338 115.096C68.0244 115.096 67.6998 115.185 67.4597 115.363C67.2227 115.542 67.0627 115.753 66.9796 115.996L65.4192 115.774C65.5423 115.343 65.7454 114.983 66.0286 114.694C66.3117 114.402 66.658 114.183 67.0673 114.038C67.4766 113.891 67.929 113.817 68.4245 113.817C68.7662 113.817 69.1062 113.857 69.4448 113.937C69.7833 114.017 70.0926 114.149 70.3727 114.334C70.6528 114.515 70.8774 114.763 71.0467 115.077C71.219 115.391 71.3052 115.783 71.3052 116.254V121H69.6987V120.026H69.6433C69.5417 120.223 69.3986 120.408 69.214 120.58C69.0324 120.749 68.8031 120.886 68.5261 120.991C68.2522 121.092 67.9306 121.143 67.5613 121.143ZM67.9952 119.915C68.3307 119.915 68.6215 119.849 68.8677 119.717C69.1139 119.581 69.3032 119.403 69.4355 119.181C69.571 118.96 69.6387 118.718 69.6387 118.456V117.621C69.5864 117.664 69.4971 117.704 69.3709 117.741C69.2478 117.778 69.1093 117.81 68.9554 117.838C68.8016 117.865 68.6492 117.89 68.4984 117.912C68.3476 117.933 68.2168 117.952 68.106 117.967C67.8567 118.001 67.6336 118.056 67.4366 118.133C67.2396 118.21 67.0842 118.318 66.9703 118.456C66.8565 118.592 66.7995 118.767 66.7995 118.983C66.7995 119.29 66.9119 119.523 67.1365 119.68C67.3612 119.837 67.6474 119.915 67.9952 119.915ZM76.0787 121.138C75.3708 121.138 74.763 120.983 74.2551 120.672C73.7504 120.361 73.3611 119.932 73.0872 119.384C72.8163 118.833 72.6809 118.199 72.6809 117.482C72.6809 116.762 72.8194 116.127 73.0964 115.576C73.3734 115.022 73.7643 114.591 74.269 114.283C74.7768 113.972 75.377 113.817 76.0694 113.817C76.6449 113.817 77.1543 113.923 77.5975 114.135C78.0437 114.345 78.3992 114.642 78.6639 115.026C78.9286 115.408 79.0794 115.854 79.1163 116.365H77.519C77.4544 116.023 77.3005 115.739 77.0574 115.511C76.8173 115.28 76.4957 115.165 76.0925 115.165C75.7509 115.165 75.4508 115.257 75.1923 115.442C74.9338 115.623 74.7322 115.885 74.5875 116.227C74.446 116.568 74.3752 116.978 74.3752 117.455C74.3752 117.938 74.446 118.353 74.5875 118.701C74.7291 119.046 74.9276 119.312 75.1831 119.5C75.4416 119.684 75.7447 119.777 76.0925 119.777C76.3387 119.777 76.5588 119.73 76.7527 119.638C76.9496 119.543 77.1143 119.406 77.2466 119.227C77.379 119.049 77.4698 118.832 77.519 118.576H79.1163C79.0763 119.078 78.9286 119.523 78.6731 119.911C78.4177 120.295 78.0699 120.597 77.6298 120.815C77.1897 121.031 76.6726 121.138 76.0787 121.138ZM83.6278 121.138C82.9168 121.138 82.3028 120.991 81.7858 120.695C81.2718 120.397 80.8763 119.975 80.5993 119.43C80.3224 118.883 80.1839 118.238 80.1839 117.496C80.1839 116.767 80.3224 116.127 80.5993 115.576C80.8794 115.022 81.2703 114.591 81.7719 114.283C82.2736 113.972 82.863 113.817 83.54 113.817C83.9771 113.817 84.3895 113.888 84.7773 114.029C85.1681 114.168 85.5128 114.383 85.8113 114.675C86.113 114.968 86.3499 115.34 86.5223 115.793C86.6946 116.242 86.7808 116.777 86.7808 117.399V117.912H80.9687V116.785H85.1789C85.1758 116.465 85.1066 116.18 84.9711 115.931C84.8357 115.679 84.6465 115.48 84.4033 115.336C84.1633 115.191 83.8832 115.119 83.5631 115.119C83.2215 115.119 82.9214 115.202 82.6629 115.368C82.4044 115.531 82.2028 115.746 82.0581 116.014C81.9166 116.279 81.8443 116.57 81.8412 116.887V117.87C81.8412 118.282 81.9166 118.636 82.0674 118.932C82.2182 119.224 82.429 119.449 82.6998 119.606C82.9707 119.76 83.2877 119.837 83.6508 119.837C83.894 119.837 84.114 119.803 84.311 119.735C84.508 119.664 84.6788 119.561 84.8234 119.426C84.9681 119.29 85.0773 119.123 85.1512 118.923L86.7116 119.098C86.6131 119.51 86.4253 119.871 86.1483 120.178C85.8744 120.483 85.5236 120.72 85.0958 120.889C84.668 121.055 84.1787 121.138 83.6278 121.138ZM96.6312 114.145C96.5881 113.741 96.4065 113.427 96.0865 113.203C95.7695 112.978 95.3571 112.866 94.8493 112.866C94.4922 112.866 94.186 112.92 93.9306 113.027C93.6751 113.135 93.4797 113.281 93.3443 113.466C93.2089 113.651 93.1396 113.861 93.1365 114.098C93.1365 114.295 93.1812 114.466 93.2704 114.611C93.3627 114.755 93.4874 114.879 93.6444 114.98C93.8013 115.079 93.9752 115.162 94.166 115.229C94.3568 115.297 94.5492 115.354 94.7431 115.4L95.6294 115.622C95.9864 115.705 96.3296 115.817 96.6589 115.959C96.9913 116.1 97.2883 116.279 97.5499 116.494C97.8146 116.71 98.0239 116.97 98.1777 117.275C98.3316 117.579 98.4086 117.936 98.4086 118.346C98.4086 118.9 98.267 119.387 97.9838 119.809C97.7007 120.228 97.2914 120.555 96.7559 120.792C96.2234 121.026 95.5787 121.143 94.8216 121.143C94.086 121.143 93.4474 121.029 92.9057 120.801C92.3671 120.574 91.9455 120.241 91.6408 119.804C91.3392 119.367 91.1761 118.835 91.1515 118.207H92.8365C92.8611 118.536 92.9627 118.81 93.1412 119.029C93.3197 119.247 93.552 119.41 93.8382 119.518C94.1275 119.626 94.4507 119.68 94.8077 119.68C95.1801 119.68 95.5063 119.624 95.7864 119.513C96.0695 119.4 96.2911 119.243 96.4512 119.043C96.6112 118.839 96.6928 118.603 96.6958 118.332C96.6928 118.085 96.6204 117.882 96.4789 117.722C96.3373 117.559 96.1388 117.424 95.8833 117.316C95.631 117.205 95.3355 117.107 94.997 117.021L93.9213 116.744C93.1427 116.544 92.5272 116.24 92.0748 115.834C91.6254 115.425 91.4007 114.882 91.4007 114.205C91.4007 113.647 91.5516 113.16 91.8532 112.741C92.1578 112.323 92.5718 111.998 93.095 111.767C93.6182 111.533 94.2106 111.416 94.8723 111.416C95.5433 111.416 96.1311 111.533 96.6358 111.767C97.1436 111.998 97.5422 112.319 97.8315 112.732C98.1208 113.141 98.2701 113.612 98.2793 114.145H96.6312ZM103.001 121.138C102.29 121.138 101.676 120.991 101.159 120.695C100.645 120.397 100.249 119.975 99.9724 119.43C99.6954 118.883 99.5569 118.238 99.5569 117.496C99.5569 116.767 99.6954 116.127 99.9724 115.576C100.252 115.022 100.643 114.591 101.145 114.283C101.647 113.972 102.236 113.817 102.913 113.817C103.35 113.817 103.763 113.888 104.15 114.029C104.541 114.168 104.886 114.383 105.184 114.675C105.486 114.968 105.723 115.34 105.895 115.793C106.068 116.242 106.154 116.777 106.154 117.399V117.912H100.342V116.785H104.552C104.549 116.465 104.48 116.18 104.344 115.931C104.209 115.679 104.02 115.48 103.776 115.336C103.536 115.191 103.256 115.119 102.936 115.119C102.595 115.119 102.294 115.202 102.036 115.368C101.777 115.531 101.576 115.746 101.431 116.014C101.29 116.279 101.217 116.57 101.214 116.887V117.87C101.214 118.282 101.29 118.636 101.44 118.932C101.591 119.224 101.802 119.449 102.073 119.606C102.344 119.76 102.661 119.837 103.024 119.837C103.267 119.837 103.487 119.803 103.684 119.735C103.881 119.664 104.052 119.561 104.196 119.426C104.341 119.29 104.45 119.123 104.524 118.923L106.085 119.098C105.986 119.51 105.798 119.871 105.521 120.178C105.247 120.483 104.897 120.72 104.469 120.889C104.041 121.055 103.552 121.138 103.001 121.138ZM111.108 113.909V115.202H107.032V113.909H111.108ZM108.039 112.21H109.71V118.867C109.71 119.092 109.744 119.264 109.811 119.384C109.882 119.501 109.974 119.581 110.088 119.624C110.202 119.667 110.328 119.689 110.467 119.689C110.571 119.689 110.667 119.681 110.753 119.666C110.842 119.65 110.91 119.637 110.956 119.624L111.238 120.931C111.148 120.962 111.021 120.995 110.855 121.032C110.691 121.069 110.491 121.091 110.254 121.097C109.836 121.109 109.459 121.046 109.123 120.908C108.788 120.766 108.522 120.548 108.325 120.252C108.131 119.957 108.035 119.587 108.039 119.144V112.21ZM116.047 113.909V115.202H111.971V113.909H116.047ZM112.977 112.21H114.648V118.867C114.648 119.092 114.682 119.264 114.75 119.384C114.821 119.501 114.913 119.581 115.027 119.624C115.141 119.667 115.267 119.689 115.405 119.689C115.51 119.689 115.605 119.681 115.691 119.666C115.781 119.65 115.848 119.637 115.895 119.624L116.176 120.931C116.087 120.962 115.959 120.995 115.793 121.032C115.63 121.069 115.43 121.091 115.193 121.097C114.774 121.109 114.397 121.046 114.062 120.908C113.726 120.766 113.46 120.548 113.263 120.252C113.069 119.957 112.974 119.587 112.977 119.144V112.21ZM117.445 121V113.909H119.116V121H117.445ZM118.285 112.903C118.02 112.903 117.792 112.815 117.602 112.64C117.411 112.461 117.315 112.247 117.315 111.998C117.315 111.746 117.411 111.532 117.602 111.356C117.792 111.178 118.02 111.088 118.285 111.088C118.553 111.088 118.78 111.178 118.968 111.356C119.159 111.532 119.254 111.746 119.254 111.998C119.254 112.247 119.159 112.461 118.968 112.64C118.78 112.815 118.553 112.903 118.285 112.903ZM122.505 116.845V121H120.834V113.909H122.432V115.114H122.515C122.678 114.717 122.938 114.402 123.295 114.168C123.655 113.934 124.1 113.817 124.629 113.817C125.118 113.817 125.545 113.921 125.908 114.131C126.274 114.34 126.557 114.643 126.757 115.04C126.96 115.437 127.06 115.919 127.057 116.485V121H125.386V116.744C125.386 116.27 125.263 115.899 125.017 115.631C124.774 115.363 124.437 115.229 124.006 115.229C123.713 115.229 123.453 115.294 123.226 115.423C123.001 115.549 122.824 115.733 122.695 115.973C122.569 116.213 122.505 116.504 122.505 116.845ZM131.84 123.807C131.24 123.807 130.724 123.725 130.293 123.562C129.863 123.402 129.516 123.187 129.255 122.916C128.993 122.645 128.812 122.345 128.71 122.016L130.215 121.651C130.283 121.789 130.381 121.926 130.51 122.062C130.64 122.2 130.814 122.314 131.032 122.403C131.254 122.496 131.532 122.542 131.868 122.542C132.342 122.542 132.734 122.426 133.045 122.196C133.356 121.968 133.511 121.592 133.511 121.069V119.726H133.428C133.342 119.898 133.216 120.075 133.049 120.257C132.886 120.438 132.669 120.591 132.399 120.714C132.131 120.837 131.794 120.898 131.388 120.898C130.843 120.898 130.349 120.771 129.906 120.515C129.466 120.257 129.115 119.872 128.853 119.361C128.595 118.847 128.465 118.204 128.465 117.431C128.465 116.653 128.595 115.996 128.853 115.46C129.115 114.922 129.467 114.514 129.91 114.237C130.353 113.957 130.847 113.817 131.392 113.817C131.808 113.817 132.149 113.888 132.417 114.029C132.688 114.168 132.903 114.335 133.063 114.532C133.223 114.726 133.345 114.909 133.428 115.082H133.52V113.909H135.168V121.115C135.168 121.722 135.024 122.223 134.734 122.62C134.445 123.017 134.05 123.314 133.548 123.511C133.046 123.708 132.477 123.807 131.84 123.807ZM131.854 119.587C132.208 119.587 132.509 119.501 132.759 119.329C133.008 119.156 133.197 118.909 133.326 118.586C133.456 118.262 133.52 117.875 133.52 117.422C133.52 116.976 133.456 116.585 133.326 116.25C133.2 115.914 133.013 115.654 132.763 115.469C132.517 115.282 132.214 115.188 131.854 115.188C131.481 115.188 131.171 115.285 130.921 115.479C130.672 115.673 130.484 115.939 130.358 116.277C130.232 116.613 130.169 116.994 130.169 117.422C130.169 117.856 130.232 118.236 130.358 118.562C130.487 118.886 130.677 119.138 130.926 119.32C131.178 119.498 131.488 119.587 131.854 119.587ZM142.486 115.783L140.962 115.95C140.919 115.796 140.844 115.651 140.736 115.516C140.631 115.38 140.49 115.271 140.311 115.188C140.133 115.105 139.914 115.063 139.656 115.063C139.308 115.063 139.015 115.139 138.778 115.289C138.545 115.44 138.429 115.636 138.432 115.876C138.429 116.082 138.505 116.25 138.658 116.379C138.815 116.508 139.074 116.614 139.434 116.697L140.644 116.956C141.314 117.101 141.813 117.33 142.139 117.644C142.469 117.958 142.635 118.369 142.638 118.876C142.635 119.323 142.504 119.717 142.245 120.058C141.99 120.397 141.635 120.661 141.179 120.852C140.724 121.043 140.2 121.138 139.609 121.138C138.742 121.138 138.043 120.957 137.514 120.594C136.984 120.228 136.669 119.718 136.567 119.066L138.197 118.909C138.271 119.229 138.428 119.47 138.668 119.634C138.908 119.797 139.22 119.878 139.605 119.878C140.002 119.878 140.32 119.797 140.56 119.634C140.804 119.47 140.925 119.269 140.925 119.029C140.925 118.826 140.847 118.658 140.69 118.526C140.536 118.393 140.296 118.292 139.97 118.221L138.76 117.967C138.08 117.825 137.577 117.587 137.25 117.251C136.924 116.913 136.763 116.485 136.766 115.968C136.763 115.531 136.881 115.152 137.121 114.832C137.364 114.509 137.701 114.26 138.132 114.085C138.566 113.906 139.066 113.817 139.633 113.817C140.464 113.817 141.118 113.994 141.595 114.348C142.075 114.702 142.372 115.18 142.486 115.783Z" fill="black"/>
+<rect x="17" y="133.811" width="232" height="8" rx="4" fill="#EBEBEB"/>
+<rect x="17" y="149.811" width="79.5849" height="8.02018" rx="4.01009" fill="#E2E2E2"/>
+<path d="M3 30C3 26.6863 5.68629 24 9 24H257C260.314 24 263 26.6863 263 30V95H3V30Z" fill="#FCECEF"/>
+<path d="M120.542 79.166C119.743 79.166 119.065 78.8865 118.506 78.3275C117.947 77.7684 117.667 77.0896 117.667 76.291V55.4952C117.667 54.6966 117.947 54.0178 118.506 53.4587C119.065 52.8997 119.743 52.6202 120.542 52.6202H123.896V48.0202C123.896 45.4966 124.783 43.3483 126.556 41.5754C128.328 39.8025 130.477 38.916 133 38.916C135.524 38.916 137.672 39.8025 139.445 41.5754C141.218 43.3483 142.104 45.4966 142.104 48.0202V52.6202H145.459C146.257 52.6202 146.936 52.8997 147.495 53.4587C148.054 54.0178 148.334 54.6966 148.334 55.4952V76.291C148.334 77.0896 148.054 77.7684 147.495 78.3275C146.936 78.8865 146.257 79.166 145.459 79.166H120.542ZM120.542 76.291H145.459V55.4952H120.542V76.291ZM133 69.5827C134.023 69.5827 134.893 69.2313 135.612 68.5285C136.331 67.8257 136.69 66.9792 136.69 65.9889C136.69 65.0306 136.331 64.1601 135.612 63.3775C134.893 62.5948 134.023 62.2035 133 62.2035C131.978 62.2035 131.108 62.5948 130.389 63.3775C129.67 64.1601 129.311 65.0306 129.311 65.9889C129.311 66.9792 129.67 67.8257 130.389 68.5285C131.108 69.2313 131.978 69.5827 133 69.5827ZM126.771 52.6202H139.229V48.0202C139.229 46.2952 138.623 44.8257 137.409 43.6118C136.195 42.398 134.725 41.791 133 41.791C131.275 41.791 129.806 42.398 128.592 43.6118C127.378 44.8257 126.771 46.2952 126.771 48.0202V52.6202ZM120.542 76.291V55.4952V76.291Z" fill="#F19FA9"/>
+<defs>
+<filter id="filter0_d_1537_45910" x="17.5323" y="0.532252" width="264.935" height="151.935" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.23387"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1537_45910"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1537_45910" result="shape"/>
+</filter>
+<filter id="filter1_d_1537_45910" x="0.532252" y="21.5323" width="264.935" height="151.935" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.23387"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1537_45910"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1537_45910" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/app/public/empty-state/empty-cycle.svg b/app/public/empty-state/empty-cycle.svg
new file mode 100644
index 000000000..47bed04d5
--- /dev/null
+++ b/app/public/empty-state/empty-cycle.svg
@@ -0,0 +1,50 @@
+<svg width="289" height="116" viewBox="0 0 289 116" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_2094_49731)">
+<rect x="26" y="3" width="260" height="87" rx="6.16937" fill="white"/>
+</g>
+<path d="M26 63H285.731V83.3589C285.731 86.7662 282.968 89.5283 279.561 89.5283H32.1694C28.7621 89.5283 26 86.7662 26 83.3589V63Z" fill="#FAFAFA"/>
+<path d="M26 63H285.731" stroke="#E2E2E2" stroke-width="0.616937"/>
+<path d="M45.6429 21.334C45.5998 20.9308 45.4183 20.6169 45.0982 20.3922C44.7812 20.1676 44.3688 20.0552 43.861 20.0552C43.504 20.0552 43.1977 20.1091 42.9423 20.2168C42.6868 20.3245 42.4914 20.4707 42.356 20.6554C42.2206 20.84 42.1513 21.0508 42.1483 21.2878C42.1483 21.4848 42.1929 21.6556 42.2821 21.8002C42.3745 21.9449 42.4991 22.068 42.6561 22.1696C42.813 22.2681 42.9869 22.3511 43.1777 22.4189C43.3685 22.4866 43.5609 22.5435 43.7548 22.5897L44.6412 22.8113C44.9982 22.8944 45.3413 23.0067 45.6706 23.1483C46.003 23.2898 46.3 23.4683 46.5616 23.6838C46.8263 23.8992 47.0356 24.1593 47.1895 24.464C47.3433 24.7686 47.4203 25.1257 47.4203 25.535C47.4203 26.089 47.2787 26.5768 46.9956 26.9984C46.7124 27.417 46.3031 27.7447 45.7676 27.9817C45.2351 28.2156 44.5904 28.3326 43.8333 28.3326C43.0977 28.3326 42.4591 28.2187 41.9174 27.9909C41.3788 27.7632 40.9572 27.4308 40.6525 26.9938C40.3509 26.5568 40.1878 26.0243 40.1632 25.3965H41.8482C41.8728 25.7258 41.9744 25.9997 42.1529 26.2182C42.3314 26.4367 42.5637 26.5998 42.85 26.7076C43.1393 26.8153 43.4624 26.8691 43.8194 26.8691C44.1918 26.8691 44.5181 26.8137 44.7981 26.7029C45.0813 26.5891 45.3029 26.4321 45.4629 26.2321C45.6229 26.0289 45.7045 25.792 45.7076 25.5211C45.7045 25.2749 45.6322 25.0718 45.4906 24.9118C45.349 24.7486 45.1505 24.6132 44.8951 24.5055C44.6427 24.3947 44.3472 24.2962 44.0087 24.21L42.9331 23.9331C42.1544 23.733 41.5389 23.4299 41.0865 23.0236C40.6371 22.6143 40.4125 22.0711 40.4125 21.394C40.4125 20.8369 40.5633 20.3491 40.8649 19.9306C41.1696 19.512 41.5835 19.1873 42.1067 18.9565C42.6299 18.7226 43.2224 18.6056 43.8841 18.6056C44.555 18.6056 45.1428 18.7226 45.6475 18.9565C46.1554 19.1873 46.5539 19.5089 46.8432 19.9213C47.1325 20.3307 47.2818 20.8016 47.291 21.334H45.6429ZM50.5445 18.7349V28.1895H48.8733V18.7349H50.5445ZM54.3034 28.3326C53.8541 28.3326 53.4494 28.2525 53.0893 28.0925C52.7323 27.9294 52.4492 27.6893 52.2399 27.3723C52.0337 27.0553 51.9306 26.6645 51.9306 26.1998C51.9306 25.7997 52.0044 25.4688 52.1522 25.2072C52.2999 24.9456 52.5015 24.7363 52.7569 24.5794C53.0124 24.4224 53.3001 24.3039 53.6202 24.2239C53.9434 24.1408 54.2773 24.0808 54.622 24.0439C55.0375 24.0008 55.3745 23.9623 55.633 23.9284C55.8915 23.8915 56.0792 23.8361 56.1962 23.7623C56.3162 23.6853 56.3762 23.5668 56.3762 23.4068V23.3791C56.3762 23.0313 56.2731 22.762 56.0669 22.5712C55.8607 22.3804 55.5637 22.285 55.176 22.285C54.7666 22.285 54.4419 22.3742 54.2019 22.5527C53.9649 22.7312 53.8049 22.9421 53.7218 23.1852L52.1614 22.9636C52.2845 22.5327 52.4876 22.1726 52.7708 21.8833C53.0539 21.591 53.4002 21.3725 53.8095 21.2278C54.2188 21.0801 54.6712 21.0062 55.1667 21.0062C55.5083 21.0062 55.8484 21.0462 56.187 21.1262C56.5255 21.2063 56.8348 21.3386 57.1149 21.5233C57.3949 21.7048 57.6196 21.9526 57.7889 22.2665C57.9612 22.5804 58.0474 22.9728 58.0474 23.4437V28.1895H56.4409V27.2154H56.3855C56.2839 27.4123 56.1408 27.597 55.9561 27.7694C55.7746 27.9386 55.5453 28.0756 55.2683 28.1802C54.9944 28.2818 54.6728 28.3326 54.3034 28.3326ZM54.7374 27.1046C55.0729 27.1046 55.3637 27.0384 55.6099 26.9061C55.8561 26.7707 56.0454 26.5922 56.1777 26.3706C56.3132 26.149 56.3809 25.9074 56.3809 25.6458V24.8102C56.3285 24.8533 56.2393 24.8933 56.1131 24.9302C55.99 24.9672 55.8515 24.9995 55.6976 25.0272C55.5437 25.0549 55.3914 25.0795 55.2406 25.101C55.0898 25.1226 54.959 25.141 54.8482 25.1564C54.5989 25.1903 54.3758 25.2457 54.1788 25.3226C53.9818 25.3996 53.8264 25.5073 53.7125 25.6458C53.5987 25.7812 53.5417 25.9566 53.5417 26.1721C53.5417 26.4798 53.6541 26.7122 53.8787 26.8691C54.1034 27.0261 54.3896 27.1046 54.7374 27.1046ZM62.8208 28.3279C62.113 28.3279 61.5051 28.1725 60.9973 27.8617C60.4926 27.5508 60.1033 27.1215 59.8294 26.5737C59.5585 26.0228 59.4231 25.3888 59.4231 24.6717C59.4231 23.9515 59.5616 23.316 59.8386 22.7651C60.1156 22.2111 60.5065 21.7802 61.0112 21.4725C61.519 21.1616 62.1191 21.0062 62.8116 21.0062C63.3871 21.0062 63.8965 21.1124 64.3397 21.3248C64.7859 21.534 65.1414 21.831 65.4061 22.2157C65.6708 22.5974 65.8216 23.0436 65.8585 23.5545H64.2612C64.1966 23.2129 64.0427 22.9282 63.7995 22.7005C63.5595 22.4696 63.2379 22.3542 62.8347 22.3542C62.4931 22.3542 62.193 22.4466 61.9345 22.6312C61.676 22.8128 61.4744 23.0744 61.3297 23.416C61.1882 23.7576 61.1174 24.167 61.1174 24.644C61.1174 25.1272 61.1882 25.5427 61.3297 25.8904C61.4713 26.2351 61.6698 26.5014 61.9252 26.6891C62.1838 26.8738 62.4869 26.9661 62.8347 26.9661C63.0809 26.9661 63.301 26.9199 63.4949 26.8276C63.6918 26.7322 63.8565 26.5952 63.9888 26.4167C64.1212 26.2382 64.2119 26.0212 64.2612 25.7658H65.8585C65.8185 26.2675 65.6708 26.7122 65.4153 27.1C65.1599 27.4847 64.8121 27.7863 64.372 28.0048C63.9319 28.2202 63.4148 28.3279 62.8208 28.3279ZM68.7542 25.9643L68.7496 23.9469H69.0173L71.5656 21.0985H73.5184L70.3838 24.5886H70.0376L68.7542 25.9643ZM67.2307 28.1895V18.7349H68.9019V28.1895H67.2307ZM71.681 28.1895L69.3728 24.9625L70.4992 23.7853L73.68 28.1895H71.681ZM79.6433 18.7349V28.1895H77.9306V18.7349H79.6433ZM83.0953 24.0346V28.1895H81.4241V21.0985H83.0214V22.3034H83.1045C83.2676 21.9064 83.5277 21.591 83.8847 21.3571C84.2448 21.1232 84.6895 21.0062 85.2188 21.0062C85.7082 21.0062 86.1344 21.1109 86.4976 21.3201C86.8638 21.5294 87.147 21.8326 87.347 22.2296C87.5502 22.6266 87.6502 23.1083 87.6471 23.6745V28.1895H85.9759V23.9331C85.9759 23.4591 85.8528 23.0882 85.6066 22.8205C85.3635 22.5527 85.0265 22.4189 84.5956 22.4189C84.3032 22.4189 84.0432 22.4835 83.8154 22.6127C83.5908 22.7389 83.4138 22.9221 83.2845 23.1621C83.1584 23.4022 83.0953 23.693 83.0953 24.0346ZM92.8868 21.0985V22.3912H88.8105V21.0985H92.8868ZM89.8169 19.3997H91.488V26.0566C91.488 26.2813 91.5219 26.4537 91.5896 26.5737C91.6604 26.6906 91.7527 26.7707 91.8666 26.8137C91.9804 26.8568 92.1066 26.8784 92.2451 26.8784C92.3498 26.8784 92.4452 26.8707 92.5313 26.8553C92.6206 26.8399 92.6883 26.8261 92.7345 26.8137L93.0161 28.1202C92.9268 28.151 92.7991 28.1848 92.6329 28.2218C92.4698 28.2587 92.2697 28.2802 92.0328 28.2864C91.6142 28.2987 91.2372 28.2356 90.9017 28.0971C90.5663 27.9556 90.3 27.737 90.1031 27.4416C89.9092 27.1461 89.8138 26.7768 89.8169 26.3336V19.3997ZM97.3475 28.3279C96.6365 28.3279 96.0225 28.1802 95.5055 27.8848C94.9915 27.5862 94.5961 27.1646 94.3191 26.6199C94.0421 26.072 93.9036 25.4273 93.9036 24.6855C93.9036 23.9561 94.0421 23.316 94.3191 22.7651C94.5991 22.2111 94.99 21.7802 95.4917 21.4725C95.9933 21.1616 96.5827 21.0062 97.2598 21.0062C97.6968 21.0062 98.1092 21.077 98.497 21.2186C98.8878 21.3571 99.2325 21.5725 99.5311 21.8649C99.8327 22.1573 100.07 22.5297 100.242 22.9821C100.414 23.4314 100.501 23.9669 100.501 24.5886V25.101H94.6884V23.9746H98.8986C98.8955 23.6545 98.8263 23.3699 98.6909 23.1206C98.5555 22.8682 98.3662 22.6697 98.123 22.525C97.883 22.3804 97.6029 22.3081 97.2828 22.3081C96.9412 22.3081 96.6412 22.3912 96.3826 22.5574C96.1241 22.7205 95.9225 22.9359 95.7779 23.2037C95.6363 23.4683 95.564 23.7592 95.5609 24.0762V25.0595C95.5609 25.4719 95.6363 25.8258 95.7871 26.1213C95.9379 26.4136 96.1487 26.6383 96.4196 26.7953C96.6904 26.9492 97.0074 27.0261 97.3706 27.0261C97.6137 27.0261 97.8337 26.9922 98.0307 26.9245C98.2277 26.8538 98.3985 26.7507 98.5431 26.6152C98.6878 26.4798 98.7971 26.3121 98.8709 26.112L100.431 26.2875C100.333 26.6999 100.145 27.06 99.8681 27.3677C99.5942 27.6724 99.2433 27.9094 98.8155 28.0787C98.3877 28.2449 97.8984 28.3279 97.3475 28.3279ZM104.998 30.9963C104.398 30.9963 103.882 30.9147 103.452 30.7516C103.021 30.5916 102.675 30.3761 102.413 30.1053C102.151 29.8345 101.97 29.5344 101.868 29.2051L103.373 28.8404C103.441 28.9789 103.539 29.1158 103.669 29.2512C103.798 29.3897 103.972 29.5036 104.19 29.5929C104.412 29.6852 104.69 29.7314 105.026 29.7314C105.5 29.7314 105.892 29.6159 106.203 29.3851C106.514 29.1574 106.669 28.7819 106.669 28.2587V26.9153H106.586C106.5 27.0877 106.374 27.2646 106.208 27.4462C106.045 27.6278 105.828 27.7801 105.557 27.9032C105.289 28.0263 104.952 28.0879 104.546 28.0879C104.001 28.0879 103.507 27.9602 103.064 27.7047C102.624 27.4462 102.273 27.0615 102.011 26.5506C101.753 26.0366 101.623 25.3934 101.623 24.6209C101.623 23.8423 101.753 23.1852 102.011 22.6497C102.273 22.1111 102.625 21.7033 103.068 21.4263C103.512 21.1462 104.006 21.0062 104.55 21.0062C104.966 21.0062 105.307 21.077 105.575 21.2186C105.846 21.3571 106.061 21.5248 106.222 21.7218C106.382 21.9157 106.503 22.0988 106.586 22.2711H106.679V21.0985H108.327V28.3049C108.327 28.9112 108.182 29.4128 107.893 29.8098C107.603 30.2069 107.208 30.5038 106.706 30.7008C106.205 30.8978 105.635 30.9963 104.998 30.9963ZM105.012 26.7768C105.366 26.7768 105.668 26.6906 105.917 26.5183C106.166 26.3459 106.355 26.0982 106.485 25.775C106.614 25.4519 106.679 25.0641 106.679 24.6117C106.679 24.1654 106.614 23.7746 106.485 23.4391C106.358 23.1036 106.171 22.8436 105.921 22.6589C105.675 22.4712 105.372 22.3773 105.012 22.3773C104.64 22.3773 104.329 22.4743 104.079 22.6681C103.83 22.862 103.642 23.1283 103.516 23.4668C103.39 23.8023 103.327 24.1839 103.327 24.6117C103.327 25.0456 103.39 25.4257 103.516 25.752C103.646 26.0751 103.835 26.3275 104.084 26.5091C104.336 26.6876 104.646 26.7768 105.012 26.7768ZM110.039 28.1895V21.0985H111.66V22.2804H111.734C111.863 21.871 112.084 21.5556 112.398 21.334C112.715 21.1093 113.077 20.997 113.483 20.997C113.576 20.997 113.679 21.0016 113.793 21.0108C113.909 21.017 114.006 21.0278 114.083 21.0431V22.5804C114.013 22.5558 113.9 22.5343 113.746 22.5158C113.596 22.4943 113.449 22.4835 113.308 22.4835C113.003 22.4835 112.729 22.5497 112.486 22.682C112.246 22.8113 112.057 22.9913 111.918 23.2221C111.78 23.4529 111.71 23.7192 111.71 24.0208V28.1895H110.039ZM117.107 28.3326C116.658 28.3326 116.253 28.2525 115.893 28.0925C115.536 27.9294 115.253 27.6893 115.044 27.3723C114.837 27.0553 114.734 26.6645 114.734 26.1998C114.734 25.7997 114.808 25.4688 114.956 25.2072C115.104 24.9456 115.305 24.7363 115.561 24.5794C115.816 24.4224 116.104 24.3039 116.424 24.2239C116.747 24.1408 117.081 24.0808 117.426 24.0439C117.841 24.0008 118.178 23.9623 118.437 23.9284C118.695 23.8915 118.883 23.8361 119 23.7623C119.12 23.6853 119.18 23.5668 119.18 23.4068V23.3791C119.18 23.0313 119.077 22.762 118.871 22.5712C118.664 22.3804 118.367 22.285 117.98 22.285C117.57 22.285 117.246 22.3742 117.006 22.5527C116.769 22.7312 116.609 22.9421 116.525 23.1852L114.965 22.9636C115.088 22.5327 115.291 22.1726 115.574 21.8833C115.858 21.591 116.204 21.3725 116.613 21.2278C117.023 21.0801 117.475 21.0062 117.97 21.0062C118.312 21.0062 118.652 21.0462 118.991 21.1262C119.329 21.2063 119.639 21.3386 119.919 21.5233C120.199 21.7048 120.423 21.9526 120.593 22.2665C120.765 22.5804 120.851 22.9728 120.851 23.4437V28.1895H119.245V27.2154H119.189C119.088 27.4123 118.945 27.597 118.76 27.7694C118.578 27.9386 118.349 28.0756 118.072 28.1802C117.798 28.2818 117.476 28.3326 117.107 28.3326ZM117.541 27.1046C117.877 27.1046 118.167 27.0384 118.414 26.9061C118.66 26.7707 118.849 26.5922 118.981 26.3706C119.117 26.149 119.185 25.9074 119.185 25.6458V24.8102C119.132 24.8533 119.043 24.8933 118.917 24.9302C118.794 24.9672 118.655 24.9995 118.501 25.0272C118.347 25.0549 118.195 25.0795 118.044 25.101C117.893 25.1226 117.763 25.141 117.652 25.1564C117.403 25.1903 117.179 25.2457 116.983 25.3226C116.786 25.3996 116.63 25.5073 116.516 25.6458C116.402 25.7812 116.345 25.9566 116.345 26.1721C116.345 26.4798 116.458 26.7122 116.682 26.8691C116.907 27.0261 117.193 27.1046 117.541 27.1046ZM126.072 21.0985V22.3912H121.996V21.0985H126.072ZM123.002 19.3997H124.674V26.0566C124.674 26.2813 124.707 26.4537 124.775 26.5737C124.846 26.6906 124.938 26.7707 125.052 26.8137C125.166 26.8568 125.292 26.8784 125.431 26.8784C125.535 26.8784 125.631 26.8707 125.717 26.8553C125.806 26.8399 125.874 26.8261 125.92 26.8137L126.202 28.1202C126.112 28.151 125.985 28.1848 125.818 28.2218C125.655 28.2587 125.455 28.2802 125.218 28.2864C124.8 28.2987 124.423 28.2356 124.087 28.0971C123.752 27.9556 123.486 27.737 123.289 27.4416C123.095 27.1461 122.999 26.7768 123.002 26.3336V19.3997ZM127.47 28.1895V21.0985H129.141V28.1895H127.47ZM128.31 20.0922C128.046 20.0922 127.818 20.0044 127.627 19.829C127.436 19.6505 127.341 19.4366 127.341 19.1873C127.341 18.935 127.436 18.7211 127.627 18.5456C127.818 18.3671 128.046 18.2779 128.31 18.2779C128.578 18.2779 128.806 18.3671 128.993 18.5456C129.184 18.7211 129.28 18.935 129.28 19.1873C129.28 19.4366 129.184 19.6505 128.993 19.829C128.806 20.0044 128.578 20.0922 128.31 20.0922ZM133.953 28.3279C133.26 28.3279 132.66 28.1756 132.152 27.8709C131.644 27.5662 131.251 27.14 130.97 26.5922C130.693 26.0443 130.555 25.4042 130.555 24.6717C130.555 23.9392 130.693 23.2975 130.97 22.7466C131.251 22.1957 131.644 21.7679 132.152 21.4632C132.66 21.1586 133.26 21.0062 133.953 21.0062C134.645 21.0062 135.245 21.1586 135.753 21.4632C136.261 21.7679 136.653 22.1957 136.93 22.7466C137.21 23.2975 137.35 23.9392 137.35 24.6717C137.35 25.4042 137.21 26.0443 136.93 26.5922C136.653 27.14 136.261 27.5662 135.753 27.8709C135.245 28.1756 134.645 28.3279 133.953 28.3279ZM133.962 26.9892C134.337 26.9892 134.651 26.8861 134.904 26.6799C135.156 26.4706 135.344 26.1905 135.467 25.8397C135.593 25.4888 135.656 25.098 135.656 24.6671C135.656 24.2331 135.593 23.8407 135.467 23.4899C135.344 23.1359 135.156 22.8543 134.904 22.6451C134.651 22.4358 134.337 22.3311 133.962 22.3311C133.577 22.3311 133.257 22.4358 133.002 22.6451C132.749 22.8543 132.56 23.1359 132.434 23.4899C132.311 23.8407 132.249 24.2331 132.249 24.6671C132.249 25.098 132.311 25.4888 132.434 25.8397C132.56 26.1905 132.749 26.4706 133.002 26.6799C133.257 26.8861 133.577 26.9892 133.962 26.9892ZM140.44 24.0346V28.1895H138.769V21.0985H140.366V22.3034H140.449C140.612 21.9064 140.872 21.591 141.229 21.3571C141.589 21.1232 142.034 21.0062 142.564 21.0062C143.053 21.0062 143.479 21.1109 143.842 21.3201C144.209 21.5294 144.492 21.8326 144.692 22.2296C144.895 22.6266 144.995 23.1083 144.992 23.6745V28.1895H143.321V23.9331C143.321 23.4591 143.198 23.0882 142.951 22.8205C142.708 22.5527 142.371 22.4189 141.94 22.4189C141.648 22.4189 141.388 22.4835 141.16 22.6127C140.935 22.7389 140.759 22.9221 140.629 23.1621C140.503 23.4022 140.44 23.693 140.44 24.0346ZM152.295 22.9728L150.772 23.139C150.729 22.9851 150.653 22.8405 150.545 22.7051C150.441 22.5697 150.299 22.4604 150.121 22.3773C149.942 22.2942 149.724 22.2527 149.465 22.2527C149.117 22.2527 148.825 22.3281 148.588 22.4789C148.354 22.6297 148.239 22.8251 148.242 23.0652C148.239 23.2714 148.314 23.4391 148.468 23.5684C148.625 23.6976 148.884 23.8038 149.244 23.8869L150.453 24.1454C151.124 24.2901 151.623 24.5194 151.949 24.8333C152.278 25.1472 152.444 25.5581 152.447 26.0659C152.444 26.5121 152.314 26.9061 152.055 27.2477C151.8 27.5862 151.444 27.8509 150.989 28.0417C150.533 28.2325 150.01 28.3279 149.419 28.3279C148.551 28.3279 147.853 28.1464 147.323 27.7832C146.794 27.417 146.478 26.9076 146.377 26.2551L148.006 26.0982C148.08 26.4183 148.237 26.6599 148.477 26.823C148.717 26.9861 149.03 27.0676 149.414 27.0676C149.811 27.0676 150.13 26.9861 150.37 26.823C150.613 26.6599 150.735 26.4583 150.735 26.2182C150.735 26.0151 150.656 25.8474 150.499 25.715C150.345 25.5827 150.105 25.4811 149.779 25.4103L148.57 25.1564C147.889 25.0149 147.386 24.7763 147.06 24.4409C146.734 24.1023 146.572 23.6745 146.575 23.1575C146.572 22.7205 146.691 22.3419 146.931 22.0218C147.174 21.6987 147.511 21.4494 147.942 21.274C148.376 21.0955 148.876 21.0062 149.442 21.0062C150.273 21.0062 150.927 21.1832 151.404 21.5371C151.884 21.891 152.181 22.3696 152.295 22.9728Z" fill="black"/>
+<path d="M39.5732 76.5747C39.5732 75.8932 40.1257 75.3408 40.8071 75.3408H82.8896V77.8086H40.8071C40.1257 77.8086 39.5732 77.2561 39.5732 76.5747V76.5747Z" fill="#DEE2E6"/>
+<rect x="84.4092" y="75.3408" width="29.6375" height="2.46775" fill="#26B5CE"/>
+<rect x="115.566" y="75.3408" width="61.5548" height="2.46775" fill="#F7AE59"/>
+<rect x="178.641" y="75.3408" width="33.4372" height="2.46775" fill="#D687FF"/>
+<path d="M213.6 75.3408H267.841C268.522 75.3408 269.075 75.8932 269.075 76.5747V76.5747C269.075 77.2561 268.522 77.8086 267.841 77.8086H213.6V75.3408Z" fill="#09A953"/>
+<rect x="39.5723" y="40.6328" width="79.5849" height="8.02018" rx="4.01009" fill="#EBEBEB"/>
+<rect x="134.581" y="40.6328" width="79.5849" height="8.02018" rx="4.01009" fill="#E2E2E2"/>
+<g filter="url(#filter1_d_2094_49731)">
+<rect x="3" y="26" width="260" height="87" rx="6.16937" fill="white"/>
+</g>
+<path d="M3 86H262.731V106.359C262.731 109.766 259.968 112.528 256.561 112.528H9.16936C5.76211 112.528 3 109.766 3 106.359V86Z" fill="#FAFAFA"/>
+<path d="M3 86H262.731" stroke="#E2E2E2" stroke-width="0.616937"/>
+<path d="M23.8386 44.7541C23.7617 44.5048 23.6555 44.2817 23.5201 44.0847C23.3877 43.8846 23.2277 43.7138 23.04 43.5723C22.8553 43.4307 22.6429 43.3245 22.4029 43.2537C22.1628 43.1799 21.9012 43.1429 21.6181 43.1429C21.1103 43.1429 20.6578 43.2707 20.2608 43.5261C19.8638 43.7815 19.5514 44.157 19.3237 44.6525C19.099 45.1449 18.9867 45.7451 18.9867 46.4529C18.9867 47.167 19.099 47.7717 19.3237 48.2672C19.5484 48.7627 19.8607 49.1397 20.2608 49.3983C20.6609 49.6537 21.1257 49.7814 21.655 49.7814C22.1351 49.7814 22.5506 49.6891 22.9015 49.5044C23.2554 49.3198 23.5278 49.0582 23.7186 48.7196C23.9094 48.378 24.0048 47.9779 24.0048 47.5194L24.3926 47.5794H21.8258V46.2406H25.6621V47.3762C25.6621 48.1857 25.4898 48.8858 25.1451 49.4767C24.8004 50.0676 24.3264 50.5231 23.7232 50.8432C23.12 51.1602 22.4275 51.3187 21.6458 51.3187C20.7748 51.3187 20.01 51.1233 19.3514 50.7324C18.6958 50.3385 18.1834 49.7799 17.8141 49.0566C17.4479 48.3303 17.2647 47.4686 17.2647 46.4714C17.2647 45.7082 17.3725 45.0265 17.5879 44.4263C17.8064 43.8262 18.1111 43.3168 18.502 42.8983C18.8928 42.4766 19.3514 42.1565 19.8777 41.938C20.4039 41.7164 20.9764 41.6056 21.595 41.6056C22.1182 41.6056 22.606 41.6826 23.0584 41.8365C23.5108 41.9873 23.9125 42.2027 24.2633 42.4828C24.6172 42.7628 24.9081 43.0952 25.1358 43.4799C25.3636 43.8646 25.5128 44.2894 25.5836 44.7541H23.8386ZM27.6887 51.1895V44.0985H29.3599V51.1895H27.6887ZM28.5289 43.0922C28.2643 43.0922 28.0365 43.0044 27.8457 42.829C27.6549 42.6505 27.5595 42.4366 27.5595 42.1873C27.5595 41.935 27.6549 41.7211 27.8457 41.5456C28.0365 41.3671 28.2643 41.2779 28.5289 41.2779C28.7967 41.2779 29.0244 41.3671 29.2122 41.5456C29.403 41.7211 29.4984 41.935 29.4984 42.1873C29.4984 42.4366 29.403 42.6505 29.2122 42.829C29.0244 43.0044 28.7967 43.0922 28.5289 43.0922ZM34.6192 44.0985V45.3912H30.5429V44.0985H34.6192ZM31.5493 42.3997H33.2204V49.0566C33.2204 49.2813 33.2543 49.4537 33.322 49.5737C33.3928 49.6906 33.4851 49.7707 33.599 49.8137C33.7129 49.8568 33.839 49.8784 33.9775 49.8784C34.0822 49.8784 34.1776 49.8707 34.2638 49.8553C34.353 49.8399 34.4207 49.8261 34.4669 49.8137L34.7485 51.1202C34.6592 51.151 34.5315 51.1848 34.3653 51.2218C34.2022 51.2587 34.0022 51.2802 33.7652 51.2864C33.3466 51.2987 32.9696 51.2356 32.6341 51.0971C32.2987 50.9556 32.0325 50.737 31.8355 50.4416C31.6416 50.1461 31.5462 49.7768 31.5493 49.3336V42.3997ZM37.8404 47.0346V51.1895H36.1692V41.7349H37.8034V45.3034H37.8865C38.0527 44.9033 38.3097 44.5879 38.6575 44.3571C39.0083 44.1232 39.4546 44.0062 39.9963 44.0062C40.4887 44.0062 40.918 44.1093 41.2843 44.3155C41.6505 44.5217 41.9337 44.8233 42.1337 45.2203C42.3368 45.6174 42.4384 46.1021 42.4384 46.6745V51.1895H40.7672V46.9331C40.7672 46.456 40.6441 46.0852 40.3979 45.8205C40.1548 45.5527 39.8132 45.4189 39.373 45.4189C39.0776 45.4189 38.8129 45.4835 38.579 45.6127C38.3482 45.7389 38.1666 45.9221 38.0343 46.1621C37.905 46.4022 37.8404 46.693 37.8404 47.0346ZM48.6614 48.2072V44.0985H50.3326V51.1895H48.7122V49.9292H48.6383C48.4783 50.3262 48.2151 50.6509 47.8489 50.9032C47.4857 51.1556 47.0379 51.2818 46.5055 51.2818C46.0408 51.2818 45.6299 51.1787 45.2729 50.9725C44.919 50.7632 44.642 50.46 44.4419 50.063C44.2419 49.6629 44.1419 49.1797 44.1419 48.6135V44.0985H45.813V48.3549C45.813 48.8043 45.9361 49.1613 46.1824 49.426C46.4286 49.6906 46.7517 49.823 47.1518 49.823C47.398 49.823 47.6365 49.763 47.8674 49.6429C48.0982 49.5229 48.2875 49.3444 48.4352 49.1074C48.586 48.8674 48.6614 48.5673 48.6614 48.2072ZM52.1249 51.1895V41.7349H53.7961V45.2711H53.8653C53.9515 45.0988 54.0731 44.9157 54.23 44.7218C54.387 44.5248 54.5993 44.3571 54.8671 44.2186C55.1349 44.077 55.4765 44.0062 55.892 44.0062C56.4398 44.0062 56.9337 44.1462 57.3738 44.4263C57.817 44.7033 58.1679 45.1142 58.4264 45.6589C58.688 46.2006 58.8188 46.8654 58.8188 47.6532C58.8188 48.4319 58.6911 49.0936 58.4356 49.6383C58.1802 50.1831 57.8324 50.5985 57.3923 50.8848C56.9522 51.171 56.4536 51.3141 55.8966 51.3141C55.4903 51.3141 55.1533 51.2464 54.8856 51.111C54.6178 50.9756 54.4024 50.8124 54.2393 50.6216C54.0792 50.4277 53.9546 50.2446 53.8653 50.0723H53.7684V51.1895H52.1249ZM53.7638 47.644C53.7638 48.1026 53.8284 48.5042 53.9577 48.8489C54.09 49.1936 54.2793 49.4629 54.5255 49.6568C54.7748 49.8476 55.0764 49.943 55.4303 49.943C55.7996 49.943 56.1089 49.8445 56.3582 49.6475C56.6075 49.4475 56.7952 49.1751 56.9214 48.8304C57.0507 48.4827 57.1153 48.0872 57.1153 47.644C57.1153 47.2039 57.0522 46.813 56.926 46.4714C56.7999 46.1298 56.6121 45.862 56.3628 45.6681C56.1135 45.4743 55.8027 45.3773 55.4303 45.3773C55.0733 45.3773 54.7702 45.4712 54.5209 45.6589C54.2716 45.8466 54.0823 46.1098 53.953 46.4483C53.8269 46.7869 53.7638 47.1854 53.7638 47.644ZM65.2507 41.7349V51.1895H63.538V41.7349H65.2507ZM68.7027 47.0346V51.1895H67.0315V44.0985H68.6288V45.3034H68.7119C68.875 44.9064 69.1351 44.591 69.4921 44.3571C69.8522 44.1232 70.2969 44.0062 70.8263 44.0062C71.3156 44.0062 71.7419 44.1109 72.105 44.3201C72.4713 44.5294 72.7544 44.8326 72.9545 45.2296C73.1576 45.6266 73.2576 46.1083 73.2545 46.6745V51.1895H71.5834V46.9331C71.5834 46.4591 71.4603 46.0882 71.214 45.8205C70.9709 45.5527 70.6339 45.4189 70.203 45.4189C69.9107 45.4189 69.6506 45.4835 69.4229 45.6127C69.1982 45.7389 69.0212 45.9221 68.892 46.1621C68.7658 46.4022 68.7027 46.693 68.7027 47.0346ZM78.4942 44.0985V45.3912H74.4179V44.0985H78.4942ZM75.4243 42.3997H77.0954V49.0566C77.0954 49.2813 77.1293 49.4537 77.197 49.5737C77.2678 49.6906 77.3601 49.7707 77.474 49.8137C77.5879 49.8568 77.714 49.8784 77.8525 49.8784C77.9572 49.8784 78.0526 49.8707 78.1388 49.8553C78.228 49.8399 78.2957 49.8261 78.3419 49.8137L78.6235 51.1202C78.5342 51.151 78.4065 51.1848 78.2403 51.2218C78.0772 51.2587 77.8772 51.2802 77.6402 51.2864C77.2216 51.2987 76.8446 51.2356 76.5091 51.0971C76.1737 50.9556 75.9075 50.737 75.7105 50.4416C75.5166 50.1461 75.4212 49.7768 75.4243 49.3336V42.3997ZM82.9549 51.3279C82.244 51.3279 81.63 51.1802 81.1129 50.8848C80.599 50.5862 80.2035 50.1646 79.9265 49.6199C79.6495 49.072 79.511 48.4273 79.511 47.6855C79.511 46.9561 79.6495 46.316 79.9265 45.7651C80.2066 45.2111 80.5974 44.7802 81.0991 44.4725C81.6007 44.1616 82.1901 44.0062 82.8672 44.0062C83.3042 44.0062 83.7166 44.077 84.1044 44.2186C84.4953 44.3571 84.84 44.5725 85.1385 44.8649C85.4401 45.1573 85.6771 45.5297 85.8494 45.9821C86.0218 46.4314 86.108 46.9669 86.108 47.5886V48.101H80.2958V46.9746H84.506C84.503 46.6545 84.4337 46.3699 84.2983 46.1206C84.1629 45.8682 83.9736 45.6697 83.7305 45.525C83.4904 45.3804 83.2103 45.3081 82.8903 45.3081C82.5487 45.3081 82.2486 45.3912 81.9901 45.5574C81.7315 45.7205 81.5299 45.9359 81.3853 46.2037C81.2437 46.4683 81.1714 46.7592 81.1683 47.0762V48.0595C81.1683 48.4719 81.2437 48.8258 81.3945 49.1213C81.5453 49.4136 81.7562 49.6383 82.027 49.7953C82.2978 49.9492 82.6148 50.0261 82.978 50.0261C83.2211 50.0261 83.4412 49.9922 83.6381 49.9245C83.8351 49.8538 84.0059 49.7507 84.1506 49.6152C84.2952 49.4798 84.4045 49.3121 84.4783 49.112L86.0387 49.2875C85.9402 49.6999 85.7525 50.06 85.4755 50.3677C85.2016 50.6724 84.8507 50.9094 84.4229 51.0787C83.9951 51.2449 83.5058 51.3279 82.9549 51.3279ZM90.6056 53.9963C90.0054 53.9963 89.4899 53.9147 89.059 53.7516C88.6282 53.5916 88.2819 53.3761 88.0203 53.1053C87.7587 52.8345 87.5771 52.5344 87.4756 52.2051L88.9806 51.8404C89.0483 51.9789 89.1468 52.1158 89.276 52.2512C89.4053 52.3897 89.5792 52.5036 89.7977 52.5929C90.0193 52.6852 90.2978 52.7314 90.6333 52.7314C91.1072 52.7314 91.4996 52.6159 91.8105 52.3851C92.1213 52.1574 92.2767 51.7819 92.2767 51.2587V49.9153H92.1936C92.1075 50.0877 91.9813 50.2646 91.8151 50.4462C91.652 50.6278 91.435 50.7801 91.1642 50.9032C90.8964 51.0263 90.5594 51.0879 90.1531 51.0879C89.6084 51.0879 89.1144 50.9602 88.6713 50.7047C88.2311 50.4462 87.8803 50.0615 87.6187 49.5506C87.3602 49.0366 87.2309 48.3934 87.2309 47.6209C87.2309 46.8423 87.3602 46.1852 87.6187 45.6497C87.8803 45.1111 88.2327 44.7033 88.6759 44.4263C89.1191 44.1462 89.613 44.0062 90.1578 44.0062C90.5732 44.0062 90.9149 44.077 91.1826 44.2186C91.4535 44.3571 91.6689 44.5248 91.8289 44.7218C91.989 44.9157 92.1105 45.0988 92.1936 45.2711H92.286V44.0985H93.934V51.3049C93.934 51.9112 93.7894 52.4128 93.5001 52.8098C93.2108 53.2069 92.8153 53.5038 92.3137 53.7008C91.812 53.8978 91.2426 53.9963 90.6056 53.9963ZM90.6194 49.7768C90.9733 49.7768 91.2749 49.6906 91.5242 49.5183C91.7735 49.3459 91.9628 49.0982 92.0921 48.775C92.2213 48.4519 92.286 48.0641 92.286 47.6117C92.286 47.1654 92.2213 46.7746 92.0921 46.4391C91.9659 46.1036 91.7781 45.8436 91.5289 45.6589C91.2826 45.4712 90.9795 45.3773 90.6194 45.3773C90.247 45.3773 89.9362 45.4743 89.6869 45.6681C89.4376 45.862 89.2499 46.1283 89.1237 46.4668C88.9975 46.8023 88.9344 47.1839 88.9344 47.6117C88.9344 48.0456 88.9975 48.4257 89.1237 48.752C89.2529 49.0751 89.4422 49.3275 89.6915 49.5091C89.9439 49.6876 90.2532 49.7768 90.6194 49.7768ZM95.6468 51.1895V44.0985H97.2671V45.2804H97.341C97.4703 44.871 97.6919 44.5556 98.0058 44.334C98.3228 44.1093 98.6844 43.997 99.0906 43.997C99.183 43.997 99.2861 44.0016 99.3999 44.0108C99.5169 44.017 99.6138 44.0278 99.6908 44.0431V45.5804C99.62 45.5558 99.5077 45.5343 99.3538 45.5158C99.203 45.4943 99.0568 45.4835 98.9152 45.4835C98.6105 45.4835 98.3366 45.5497 98.0935 45.682C97.8534 45.8113 97.6642 45.9913 97.5257 46.2221C97.3872 46.4529 97.3179 46.7192 97.3179 47.0208V51.1895H95.6468ZM102.715 51.3326C102.265 51.3326 101.861 51.2525 101.5 51.0925C101.143 50.9294 100.86 50.6893 100.651 50.3723C100.445 50.0553 100.342 49.6645 100.342 49.1998C100.342 48.7997 100.416 48.4688 100.563 48.2072C100.711 47.9456 100.913 47.7363 101.168 47.5794C101.424 47.4224 101.711 47.3039 102.031 47.2239C102.354 47.1408 102.688 47.0808 103.033 47.0439C103.449 47.0008 103.786 46.9623 104.044 46.9284C104.303 46.8915 104.49 46.8361 104.607 46.7623C104.727 46.6853 104.787 46.5668 104.787 46.4068V46.3791C104.787 46.0313 104.684 45.762 104.478 45.5712C104.272 45.3804 103.975 45.285 103.587 45.285C103.178 45.285 102.853 45.3742 102.613 45.5527C102.376 45.7312 102.216 45.9421 102.133 46.1852L100.573 45.9636C100.696 45.5327 100.899 45.1726 101.182 44.8833C101.465 44.591 101.811 44.3725 102.221 44.2278C102.63 44.0801 103.082 44.0062 103.578 44.0062C103.919 44.0062 104.26 44.0462 104.598 44.1262C104.937 44.2063 105.246 44.3386 105.526 44.5233C105.806 44.7048 106.031 44.9526 106.2 45.2665C106.372 45.5804 106.459 45.9728 106.459 46.4437V51.1895H104.852V50.2154H104.797C104.695 50.4123 104.552 50.597 104.367 50.7694C104.186 50.9386 103.956 51.0756 103.679 51.1802C103.406 51.2818 103.084 51.3326 102.715 51.3326ZM103.149 50.1046C103.484 50.1046 103.775 50.0384 104.021 49.9061C104.267 49.7707 104.457 49.5922 104.589 49.3706C104.724 49.149 104.792 48.9074 104.792 48.6458V47.8102C104.74 47.8533 104.65 47.8933 104.524 47.9302C104.401 47.9672 104.263 47.9995 104.109 48.0272C103.955 48.0549 103.803 48.0795 103.652 48.101C103.501 48.1226 103.37 48.141 103.259 48.1564C103.01 48.1903 102.787 48.2457 102.59 48.3226C102.393 48.3996 102.238 48.5073 102.124 48.6458C102.01 48.7812 101.953 48.9566 101.953 49.1721C101.953 49.4798 102.065 49.7122 102.29 49.8691C102.515 50.0261 102.801 50.1046 103.149 50.1046ZM111.68 44.0985V45.3912H107.603V44.0985H111.68ZM108.61 42.3997H110.281V49.0566C110.281 49.2813 110.315 49.4537 110.383 49.5737C110.453 49.6906 110.546 49.7707 110.66 49.8137C110.773 49.8568 110.9 49.8784 111.038 49.8784C111.143 49.8784 111.238 49.8707 111.324 49.8553C111.414 49.8399 111.481 49.8261 111.527 49.8137L111.809 51.1202C111.72 51.151 111.592 51.1848 111.426 51.2218C111.263 51.2587 111.063 51.2802 110.826 51.2864C110.407 51.2987 110.03 51.2356 109.695 51.0971C109.359 50.9556 109.093 50.737 108.896 50.4416C108.702 50.1461 108.607 49.7768 108.61 49.3336V42.3997ZM113.077 51.1895V44.0985H114.749V51.1895H113.077ZM113.918 43.0922C113.653 43.0922 113.425 43.0044 113.234 42.829C113.044 42.6505 112.948 42.4366 112.948 42.1873C112.948 41.935 113.044 41.7211 113.234 41.5456C113.425 41.3671 113.653 41.2779 113.918 41.2779C114.185 41.2779 114.413 41.3671 114.601 41.5456C114.792 41.7211 114.887 41.935 114.887 42.1873C114.887 42.4366 114.792 42.6505 114.601 42.829C114.413 43.0044 114.185 43.0922 113.918 43.0922ZM119.56 51.3279C118.868 51.3279 118.267 51.1756 117.76 50.8709C117.252 50.5662 116.858 50.14 116.578 49.5922C116.301 49.0443 116.162 48.4042 116.162 47.6717C116.162 46.9392 116.301 46.2975 116.578 45.7466C116.858 45.1957 117.252 44.7679 117.76 44.4632C118.267 44.1586 118.868 44.0062 119.56 44.0062C120.253 44.0062 120.853 44.1586 121.361 44.4632C121.868 44.7679 122.261 45.1957 122.538 45.7466C122.818 46.2975 122.958 46.9392 122.958 47.6717C122.958 48.4042 122.818 49.0443 122.538 49.5922C122.261 50.14 121.868 50.5662 121.361 50.8709C120.853 51.1756 120.253 51.3279 119.56 51.3279ZM119.569 49.9892C119.945 49.9892 120.259 49.8861 120.511 49.6799C120.763 49.4706 120.951 49.1905 121.074 48.8397C121.2 48.4888 121.264 48.098 121.264 47.6671C121.264 47.2331 121.2 46.8407 121.074 46.4899C120.951 46.1359 120.763 45.8543 120.511 45.6451C120.259 45.4358 119.945 45.3311 119.569 45.3311C119.185 45.3311 118.865 45.4358 118.609 45.6451C118.357 45.8543 118.167 46.1359 118.041 46.4899C117.918 46.8407 117.857 47.2331 117.857 47.6671C117.857 48.098 117.918 48.4888 118.041 48.8397C118.167 49.1905 118.357 49.4706 118.609 49.6799C118.865 49.8861 119.185 49.9892 119.569 49.9892ZM126.047 47.0346V51.1895H124.376V44.0985H125.974V45.3034H126.057C126.22 44.9064 126.48 44.591 126.837 44.3571C127.197 44.1232 127.642 44.0062 128.171 44.0062C128.66 44.0062 129.087 44.1109 129.45 44.3201C129.816 44.5294 130.099 44.8326 130.299 45.2296C130.502 45.6266 130.602 46.1083 130.599 46.6745V51.1895H128.928V46.9331C128.928 46.4591 128.805 46.0882 128.559 45.8205C128.316 45.5527 127.979 45.4189 127.548 45.4189C127.255 45.4189 126.995 45.4835 126.768 45.6127C126.543 45.7389 126.366 45.9221 126.237 46.1621C126.11 46.4022 126.047 46.693 126.047 47.0346ZM137.903 45.9728L136.379 46.139C136.336 45.9851 136.261 45.8405 136.153 45.7051C136.048 45.5697 135.907 45.4604 135.728 45.3773C135.55 45.2942 135.331 45.2527 135.073 45.2527C134.725 45.2527 134.432 45.3281 134.195 45.4789C133.962 45.6297 133.846 45.8251 133.849 46.0652C133.846 46.2714 133.922 46.4391 134.075 46.5684C134.232 46.6976 134.491 46.8038 134.851 46.8869L136.061 47.1454C136.731 47.2901 137.23 47.5194 137.556 47.8333C137.886 48.1472 138.052 48.5581 138.055 49.0659C138.052 49.5121 137.921 49.9061 137.662 50.2477C137.407 50.5862 137.052 50.8509 136.596 51.0417C136.141 51.2325 135.617 51.3279 135.026 51.3279C134.159 51.3279 133.46 51.1464 132.931 50.7832C132.401 50.417 132.086 49.9076 131.984 49.2551L133.614 49.0982C133.688 49.4183 133.845 49.6599 134.085 49.823C134.325 49.9861 134.637 50.0676 135.022 50.0676C135.419 50.0676 135.737 49.9861 135.977 49.823C136.221 49.6599 136.342 49.4583 136.342 49.2182C136.342 49.0151 136.264 48.8474 136.107 48.715C135.953 48.5827 135.713 48.4811 135.387 48.4103L134.177 48.1564C133.497 48.0149 132.994 47.7763 132.667 47.4409C132.341 47.1023 132.18 46.6745 132.183 46.1575C132.18 45.7205 132.298 45.3419 132.538 45.0218C132.781 44.6987 133.118 44.4494 133.549 44.274C133.983 44.0955 134.483 44.0062 135.05 44.0062C135.881 44.0062 136.535 44.1832 137.012 44.5371C137.492 44.891 137.789 45.3696 137.903 45.9728Z" fill="black"/>
+<path d="M16.5732 99.5747C16.5732 98.8932 17.1257 98.3408 17.8071 98.3408H59.8896V100.809H17.8071C17.1257 100.809 16.5732 100.256 16.5732 99.5747V99.5747Z" fill="#DEE2E6"/>
+<rect x="61.4092" y="98.3408" width="29.6375" height="2.46775" fill="#26B5CE"/>
+<rect x="92.5664" y="98.3408" width="61.5548" height="2.46775" fill="#F7AE59"/>
+<rect x="155.641" y="98.3408" width="33.4372" height="2.46775" fill="#D687FF"/>
+<path d="M190.6 98.3408H244.841C245.522 98.3408 246.075 98.8932 246.075 99.5747V99.5747C246.075 100.256 245.522 100.809 244.841 100.809H190.6V98.3408Z" fill="#09A953"/>
+<rect x="16.5723" y="63.6328" width="79.5849" height="8.02018" rx="4.01009" fill="#EBEBEB"/>
+<rect x="111.581" y="63.6328" width="79.5849" height="8.02018" rx="4.01009" fill="#E2E2E2"/>
+<defs>
+<filter id="filter0_d_2094_49731" x="23.5323" y="0.532252" width="264.935" height="91.9355" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.23387"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2094_49731"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2094_49731" result="shape"/>
+</filter>
+<filter id="filter1_d_2094_49731" x="0.532252" y="23.5323" width="264.935" height="91.9355" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.23387"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2094_49731"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2094_49731" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/app/public/empty-state/empty-issue.svg b/app/public/empty-state/empty-issue.svg
new file mode 100644
index 000000000..bb5f3e270
--- /dev/null
+++ b/app/public/empty-state/empty-issue.svg
@@ -0,0 +1,62 @@
+<svg width="288" height="114" viewBox="0 0 288 114" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1295_41552)">
+<rect x="25" y="3" width="260" height="84.1176" rx="5.5615" fill="white"/>
+<path d="M38.2659 22.0371L36.3304 14.9588H37.2014L38.6806 20.7238H38.7497L40.2566 14.9588H41.2244L42.7313 20.7238H42.8004L44.2796 14.9588H45.1506L43.2151 22.0371H42.3304L40.7682 16.3966H40.7129L39.1507 22.0371H38.2659ZM47.7704 22.1477C47.2911 22.1477 46.8706 22.0337 46.5089 21.8055C46.1494 21.5774 45.8683 21.2583 45.6656 20.8482C45.4651 20.438 45.3649 19.9588 45.3649 19.4104C45.3649 18.8574 45.4651 18.3747 45.6656 17.9623C45.8683 17.5498 46.1494 17.2296 46.5089 17.0014C46.8706 16.7733 47.2911 16.6593 47.7704 16.6593C48.2497 16.6593 48.669 16.7733 49.0284 17.0014C49.3902 17.2296 49.6713 17.5498 49.8718 17.9623C50.0745 18.3747 50.1759 18.8574 50.1759 19.4104C50.1759 19.9588 50.0745 20.438 49.8718 20.8482C49.6713 21.2583 49.3902 21.5774 49.0284 21.8055C48.669 22.0337 48.2497 22.1477 47.7704 22.1477ZM47.7704 21.415C48.1344 21.415 48.434 21.3217 48.669 21.135C48.904 20.9484 49.078 20.703 49.1909 20.3989C49.3038 20.0947 49.3602 19.7652 49.3602 19.4104C49.3602 19.0556 49.3038 18.7249 49.1909 18.4185C49.078 18.112 48.904 17.8643 48.669 17.6754C48.434 17.4865 48.1344 17.392 47.7704 17.392C47.4063 17.392 47.1068 17.4865 46.8718 17.6754C46.6368 17.8643 46.4628 18.112 46.3499 18.4185C46.237 18.7249 46.1805 19.0556 46.1805 19.4104C46.1805 19.7652 46.237 20.0947 46.3499 20.3989C46.4628 20.703 46.6368 20.9484 46.8718 21.135C47.1068 21.3217 47.4063 21.415 47.7704 21.415ZM51.421 22.0371V16.7284H52.209V17.5302H52.2643C52.3611 17.2676 52.5362 17.0544 52.7896 16.8908C53.0431 16.7273 53.3288 16.6455 53.6468 16.6455C53.7067 16.6455 53.7816 16.6466 53.8714 16.6489C53.9613 16.6512 54.0293 16.6547 54.0753 16.6593V17.4888C54.0477 17.4819 53.9843 17.4715 53.8853 17.4577C53.7885 17.4415 53.6859 17.4335 53.5777 17.4335C53.3196 17.4335 53.0892 17.4876 52.8864 17.5959C52.686 17.7019 52.527 17.8494 52.4095 18.0383C52.2943 18.2249 52.2367 18.4381 52.2367 18.6777V22.0371H51.421ZM55.8026 20.1016L55.7887 19.0924H55.9546L58.2772 16.7284H59.2864L56.8118 19.2307H56.7427L55.8026 20.1016ZM55.0422 22.0371V14.9588H55.8579V22.0371H55.0422ZM58.4154 22.0371L56.3417 19.4104L56.9224 18.8436L59.4523 22.0371H58.4154ZM65.2302 22.1477C64.7509 22.1477 64.3304 22.0337 63.9687 21.8055C63.6092 21.5774 63.3281 21.2583 63.1254 20.8482C62.9249 20.438 62.8247 19.9588 62.8247 19.4104C62.8247 18.8574 62.9249 18.3747 63.1254 17.9623C63.3281 17.5498 63.6092 17.2296 63.9687 17.0014C64.3304 16.7733 64.7509 16.6593 65.2302 16.6593C65.7094 16.6593 66.1288 16.7733 66.4882 17.0014C66.85 17.2296 67.1311 17.5498 67.3315 17.9623C67.5343 18.3747 67.6357 18.8574 67.6357 19.4104C67.6357 19.9588 67.5343 20.438 67.3315 20.8482C67.1311 21.2583 66.85 21.5774 66.4882 21.8055C66.1288 22.0337 65.7094 22.1477 65.2302 22.1477ZM65.2302 21.415C65.5942 21.415 65.8938 21.3217 66.1288 21.135C66.3638 20.9484 66.5378 20.703 66.6507 20.3989C66.7636 20.0947 66.82 19.7652 66.82 19.4104C66.82 19.0556 66.7636 18.7249 66.6507 18.4185C66.5378 18.112 66.3638 17.8643 66.1288 17.6754C65.8938 17.4865 65.5942 17.392 65.2302 17.392C64.8661 17.392 64.5666 17.4865 64.3316 17.6754C64.0966 17.8643 63.9226 18.112 63.8097 18.4185C63.6968 18.7249 63.6403 19.0556 63.6403 19.4104C63.6403 19.7652 63.6968 20.0947 63.8097 20.3989C63.9226 20.703 64.0966 20.9484 64.3316 21.135C64.5666 21.3217 64.8661 21.415 65.2302 21.415ZM69.6964 18.8436V22.0371H68.8808V16.7284H69.6688V17.5579H69.7379C69.8623 17.2883 70.0513 17.0717 70.3047 16.9081C70.5582 16.7422 70.8854 16.6593 71.2863 16.6593C71.6457 16.6593 71.9602 16.733 72.2298 16.8805C72.4994 17.0256 72.7091 17.2468 72.8588 17.5441C73.0086 17.839 73.0835 18.2123 73.0835 18.6639V22.0371H72.2678V18.7192C72.2678 18.3021 72.1595 17.9772 71.943 17.7445C71.7264 17.5095 71.4291 17.392 71.0513 17.392C70.7909 17.392 70.5582 17.4484 70.3531 17.5613C70.1504 17.6743 69.9902 17.839 69.8727 18.0556C69.7552 18.2722 69.6964 18.5348 69.6964 18.8436ZM82.2605 17.1708C82.1845 16.9381 82.0843 16.7296 81.9598 16.5452C81.8377 16.3586 81.6914 16.1996 81.5209 16.0683C81.3527 15.9369 81.1615 15.8367 80.9472 15.7676C80.7329 15.6985 80.4979 15.6639 80.2421 15.6639C79.8228 15.6639 79.4414 15.7722 79.0981 15.9888C78.7548 16.2054 78.4818 16.5245 78.279 16.9461C78.0762 17.3678 77.9749 17.8851 77.9749 18.498C77.9749 19.1109 78.0774 19.6281 78.2825 20.0498C78.4875 20.4715 78.7652 20.7906 79.1154 21.0072C79.4656 21.2238 79.8596 21.332 80.2974 21.332C80.703 21.332 81.0601 21.2456 81.3688 21.0728C81.6799 20.8977 81.9218 20.6512 82.0946 20.3332C82.2698 20.0129 82.3573 19.6362 82.3573 19.203L82.62 19.2583H80.491V18.498H83.1868V19.2583C83.1868 19.8413 83.0624 20.3482 82.8135 20.7791C82.567 21.2099 82.226 21.544 81.7905 21.7814C81.3573 22.0164 80.8596 22.1339 80.2974 22.1339C79.6707 22.1339 79.12 21.9864 78.6454 21.6915C78.173 21.3966 77.8044 20.9772 77.5394 20.4334C77.2767 19.8897 77.1454 19.2445 77.1454 18.498C77.1454 17.9381 77.2203 17.4346 77.37 16.9876C77.5221 16.5383 77.7364 16.1558 78.0129 15.8402C78.2894 15.5245 78.6166 15.2826 78.9944 15.1144C79.3723 14.9462 79.7882 14.8621 80.2421 14.8621C80.6154 14.8621 80.9633 14.9185 81.2859 15.0314C81.6108 15.142 81.8999 15.2999 82.1534 15.5049C82.4092 15.7077 82.6223 15.9508 82.7928 16.2342C82.9633 16.5153 83.0808 16.8275 83.1453 17.1708H82.2605ZM84.8769 22.0371V16.7284H85.6925V22.0371H84.8769ZM85.2916 15.8436C85.1326 15.8436 84.9955 15.7895 84.8803 15.6812C84.7674 15.5729 84.711 15.4427 84.711 15.2906C84.711 15.1386 84.7674 15.0084 84.8803 14.9001C84.9955 14.7918 85.1326 14.7376 85.2916 14.7376C85.4506 14.7376 85.5865 14.7918 85.6994 14.9001C85.8147 15.0084 85.8723 15.1386 85.8723 15.2906C85.8723 15.4427 85.8147 15.5729 85.6994 15.6812C85.5865 15.7895 85.4506 15.8436 85.2916 15.8436ZM89.4952 16.7284V17.4196H86.7441V16.7284H89.4952ZM87.5459 15.4565H88.3616V20.5164C88.3616 20.7468 88.395 20.9196 88.4618 21.0348C88.5309 21.1477 88.6185 21.2238 88.7245 21.2629C88.8328 21.2998 88.9468 21.3182 89.0666 21.3182C89.1565 21.3182 89.2302 21.3136 89.2878 21.3044C89.3454 21.2929 89.3915 21.2837 89.4261 21.2767L89.592 22.0095C89.5367 22.0302 89.4595 22.0509 89.3604 22.0717C89.2613 22.0947 89.1358 22.1062 88.9837 22.1062C88.7533 22.1062 88.5275 22.0567 88.3063 21.9576C88.0874 21.8585 87.9054 21.7076 87.7602 21.5049C87.6173 21.3021 87.5459 21.0463 87.5459 20.7376V15.4565ZM91.6519 18.8436V22.0371H90.8362V14.9588H91.6519V17.5579H91.721C91.8454 17.2837 92.032 17.066 92.2809 16.9047C92.532 16.7411 92.8661 16.6593 93.2832 16.6593C93.6449 16.6593 93.9617 16.7319 94.2336 16.877C94.5055 17.0199 94.7163 17.2399 94.8661 17.5372C95.0182 17.8321 95.0942 18.2077 95.0942 18.6639V22.0371H94.2786V18.7192C94.2786 18.2975 94.1691 17.9715 93.9502 17.7411C93.7336 17.5084 93.4329 17.392 93.0482 17.392C92.7809 17.392 92.5413 17.4484 92.3293 17.5613C92.1196 17.6743 91.9537 17.839 91.8316 18.0556C91.7118 18.2722 91.6519 18.5348 91.6519 18.8436ZM99.932 19.8666V16.7284H100.748V22.0371H99.932V21.1385H99.8767C99.7523 21.4081 99.5587 21.6373 99.2961 21.8263C99.0334 22.0129 98.7016 22.1062 98.3007 22.1062C97.9689 22.1062 97.674 22.0337 97.4159 21.8885C97.1579 21.741 96.9551 21.5198 96.8076 21.2249C96.6602 20.9277 96.5864 20.5533 96.5864 20.1016V16.7284H97.4021V20.0463C97.4021 20.4334 97.5104 20.7422 97.727 20.9726C97.9459 21.203 98.2247 21.3182 98.5634 21.3182C98.7661 21.3182 98.9724 21.2664 99.182 21.1627C99.394 21.059 99.5714 20.9 99.7143 20.6857C99.8594 20.4715 99.932 20.1984 99.932 19.8666ZM102.352 22.0371V14.9588H103.168V17.5717H103.237C103.297 17.4796 103.38 17.362 103.486 17.2192C103.594 17.074 103.749 16.945 103.949 16.8321C104.152 16.7169 104.426 16.6593 104.772 16.6593C105.219 16.6593 105.613 16.771 105.954 16.9945C106.295 17.218 106.561 17.5349 106.752 17.945C106.943 18.3551 107.039 18.839 107.039 19.3966C107.039 19.9588 106.943 20.4461 106.752 20.8585C106.561 21.2687 106.296 21.5867 105.957 21.8125C105.618 22.036 105.228 22.1477 104.785 22.1477C104.444 22.1477 104.171 22.0913 103.966 21.9784C103.761 21.8631 103.603 21.733 103.493 21.5878C103.382 21.4403 103.297 21.3182 103.237 21.2214H103.14V22.0371H102.352ZM103.154 19.3828C103.154 19.7837 103.213 20.1374 103.33 20.4438C103.448 20.748 103.619 20.9864 103.845 21.1592C104.071 21.3297 104.348 21.415 104.675 21.415C105.016 21.415 105.3 21.3251 105.528 21.1454C105.759 20.9634 105.932 20.7192 106.047 20.4127C106.164 20.1039 106.223 19.7606 106.223 19.3828C106.223 19.0095 106.166 18.6731 106.05 18.3736C105.937 18.0717 105.766 17.8332 105.535 17.6581C105.307 17.4807 105.02 17.392 104.675 17.392C104.343 17.392 104.064 17.4761 103.838 17.6443C103.613 17.8102 103.442 18.0429 103.327 18.3424C103.212 18.6397 103.154 18.9864 103.154 19.3828ZM111.992 14.9588V22.0371H111.134V14.9588H111.992ZM114.415 18.8436V22.0371H113.6V16.7284H114.388V17.5579H114.457C114.581 17.2883 114.77 17.0717 115.023 16.9081C115.277 16.7422 115.604 16.6593 116.005 16.6593C116.364 16.6593 116.679 16.733 116.949 16.8805C117.218 17.0256 117.428 17.2468 117.578 17.5441C117.727 17.839 117.802 18.2123 117.802 18.6639V22.0371H116.987V18.7192C116.987 18.3021 116.878 17.9772 116.662 17.7445C116.445 17.5095 116.148 17.392 115.77 17.392C115.51 17.392 115.277 17.4484 115.072 17.5613C114.869 17.6743 114.709 17.839 114.591 18.0556C114.474 18.2722 114.415 18.5348 114.415 18.8436ZM121.601 16.7284V17.4196H118.85V16.7284H121.601ZM119.652 15.4565H120.468V20.5164C120.468 20.7468 120.501 20.9196 120.568 21.0348C120.637 21.1477 120.725 21.2238 120.831 21.2629C120.939 21.2998 121.053 21.3182 121.173 21.3182C121.263 21.3182 121.336 21.3136 121.394 21.3044C121.452 21.2929 121.498 21.2837 121.532 21.2767L121.698 22.0095C121.643 22.0302 121.566 22.0509 121.467 22.0717C121.368 22.0947 121.242 22.1062 121.09 22.1062C120.86 22.1062 120.634 22.0567 120.413 21.9576C120.194 21.8585 120.012 21.7076 119.866 21.5049C119.724 21.3021 119.652 21.0463 119.652 20.7376V15.4565ZM124.997 22.1477C124.486 22.1477 124.044 22.0348 123.673 21.809C123.305 21.5809 123.02 21.2629 122.82 20.8551C122.622 20.445 122.523 19.968 122.523 19.4242C122.523 18.8805 122.622 18.4012 122.82 17.9865C123.02 17.5694 123.299 17.2445 123.656 17.0118C124.016 16.7768 124.435 16.6593 124.914 16.6593C125.191 16.6593 125.464 16.7054 125.733 16.7975C126.003 16.8897 126.248 17.0395 126.469 17.2468C126.691 17.4519 126.867 17.7238 126.998 18.0625C127.13 18.4012 127.195 18.8182 127.195 19.3136V19.6593H123.103V18.9542H126.366C126.366 18.6547 126.306 18.3874 126.186 18.1524C126.069 17.9173 125.9 17.7319 125.681 17.5959C125.465 17.46 125.209 17.392 124.914 17.392C124.589 17.392 124.308 17.4726 124.071 17.6339C123.836 17.7929 123.655 18.0003 123.528 18.256C123.402 18.5118 123.338 18.786 123.338 19.0786V19.5487C123.338 19.9496 123.407 20.2894 123.546 20.5682C123.686 20.8447 123.881 21.0556 124.13 21.2007C124.378 21.3436 124.668 21.415 124.997 21.415C125.211 21.415 125.405 21.385 125.578 21.3251C125.753 21.2629 125.904 21.1708 126.031 21.0486C126.157 20.9242 126.255 20.7698 126.324 20.5855L127.112 20.8067C127.029 21.074 126.89 21.309 126.694 21.5118C126.498 21.7122 126.256 21.8689 125.968 21.9818C125.68 22.0924 125.357 22.1477 124.997 22.1477ZM130.579 24.1385C130.185 24.1385 129.846 24.0878 129.563 23.9864C129.279 23.8873 129.043 23.756 128.854 23.5924C128.668 23.4311 128.519 23.2583 128.408 23.074L129.058 22.6177C129.132 22.7145 129.225 22.8251 129.338 22.9495C129.451 23.0763 129.605 23.1857 129.801 23.2779C129.999 23.3723 130.259 23.4196 130.579 23.4196C131.007 23.4196 131.361 23.3159 131.64 23.1085C131.919 22.9012 132.058 22.5763 132.058 22.1339V21.0556H131.989C131.929 21.1523 131.844 21.2721 131.733 21.415C131.625 21.5555 131.468 21.6811 131.263 21.7917C131.06 21.9 130.786 21.9542 130.441 21.9542C130.012 21.9542 129.627 21.8528 129.286 21.65C128.948 21.4473 128.679 21.1523 128.481 20.7652C128.285 20.3781 128.187 19.9081 128.187 19.3551C128.187 18.8113 128.283 18.3378 128.474 17.9346C128.665 17.5291 128.931 17.2157 129.272 16.9945C129.613 16.771 130.007 16.6593 130.454 16.6593C130.8 16.6593 131.074 16.7169 131.277 16.8321C131.482 16.945 131.639 17.074 131.747 17.2192C131.858 17.362 131.943 17.4796 132.003 17.5717H132.086V16.7284H132.874V22.1892C132.874 22.6454 132.77 23.0164 132.563 23.3021C132.358 23.5901 132.081 23.8009 131.733 23.9346C131.388 24.0705 131.003 24.1385 130.579 24.1385ZM130.551 21.2214C130.878 21.2214 131.155 21.1466 131.381 20.9968C131.607 20.847 131.778 20.6316 131.896 20.3505C132.013 20.0694 132.072 19.733 132.072 19.3413C132.072 18.9588 132.014 18.6212 131.899 18.3286C131.784 18.036 131.613 17.8067 131.388 17.6408C131.162 17.4749 130.883 17.392 130.551 17.392C130.206 17.392 129.918 17.4796 129.687 17.6547C129.459 17.8298 129.287 18.0648 129.172 18.3597C129.059 18.6547 129.003 18.9818 129.003 19.3413C129.003 19.7099 129.06 20.036 129.176 20.3194C129.293 20.6005 129.466 20.8217 129.694 20.983C129.925 21.142 130.21 21.2214 130.551 21.2214ZM134.367 22.0371V16.7284H135.155V17.5302H135.21C135.307 17.2676 135.482 17.0544 135.736 16.8908C135.989 16.7273 136.275 16.6455 136.593 16.6455C136.653 16.6455 136.727 16.6466 136.817 16.6489C136.907 16.6512 136.975 16.6547 137.021 16.6593V17.4888C136.994 17.4819 136.93 17.4715 136.831 17.4577C136.734 17.4415 136.632 17.4335 136.524 17.4335C136.265 17.4335 136.035 17.4876 135.832 17.5959C135.632 17.7019 135.473 17.8494 135.355 18.0383C135.24 18.2249 135.183 18.4381 135.183 18.6777V22.0371H134.367ZM139.55 22.1615C139.214 22.1615 138.909 22.0982 138.634 21.9714C138.36 21.8424 138.142 21.6569 137.981 21.415C137.82 21.1708 137.739 20.8758 137.739 20.5302C137.739 20.2261 137.799 19.9795 137.919 19.7906C138.039 19.5993 138.199 19.4496 138.399 19.3413C138.6 19.233 138.821 19.1523 139.063 19.0994C139.307 19.0441 139.553 19.0003 139.799 18.968C140.122 18.9265 140.383 18.8954 140.584 18.8747C140.786 18.8517 140.934 18.8136 141.026 18.7606C141.121 18.7076 141.168 18.6155 141.168 18.4841V18.4565C141.168 18.1155 141.074 17.8505 140.888 17.6616C140.703 17.4726 140.424 17.3782 140.048 17.3782C139.659 17.3782 139.353 17.4634 139.132 17.6339C138.911 17.8044 138.755 17.9865 138.665 18.18L137.891 17.9035C138.03 17.5809 138.214 17.3298 138.444 17.1501C138.677 16.968 138.93 16.8413 139.205 16.7699C139.481 16.6961 139.753 16.6593 140.02 16.6593C140.191 16.6593 140.387 16.68 140.608 16.7215C140.831 16.7607 141.047 16.8425 141.254 16.9669C141.464 17.0913 141.638 17.2791 141.776 17.5302C141.914 17.7814 141.983 18.1178 141.983 18.5394V22.0371H141.168V21.3182H141.126C141.071 21.4334 140.979 21.5567 140.85 21.688C140.721 21.8194 140.549 21.9311 140.335 22.0233C140.121 22.1154 139.859 22.1615 139.55 22.1615ZM139.675 21.4288C139.997 21.4288 140.269 21.3655 140.49 21.2387C140.714 21.112 140.882 20.9484 140.995 20.748C141.11 20.5475 141.168 20.3367 141.168 20.1155V19.3689C141.133 19.4104 141.057 19.4484 140.94 19.483C140.824 19.5152 140.691 19.544 140.539 19.5694C140.389 19.5924 140.243 19.6132 140.1 19.6316C139.959 19.6477 139.845 19.6616 139.758 19.6731C139.546 19.7007 139.348 19.7457 139.163 19.8079C138.981 19.8678 138.834 19.9588 138.721 20.0809C138.61 20.2007 138.555 20.3643 138.555 20.5717C138.555 20.8551 138.66 21.0694 138.869 21.2145C139.081 21.3574 139.35 21.4288 139.675 21.4288ZM145.781 16.7284V17.4196H143.03V16.7284H145.781ZM143.832 15.4565H144.647V20.5164C144.647 20.7468 144.681 20.9196 144.748 21.0348C144.817 21.1477 144.904 21.2238 145.01 21.2629C145.118 21.2998 145.233 21.3182 145.352 21.3182C145.442 21.3182 145.516 21.3136 145.574 21.3044C145.631 21.2929 145.677 21.2837 145.712 21.2767L145.878 22.0095C145.822 22.0302 145.745 22.0509 145.646 22.0717C145.547 22.0947 145.421 22.1062 145.269 22.1062C145.039 22.1062 144.813 22.0567 144.592 21.9576C144.373 21.8585 144.191 21.7076 144.046 21.5049C143.903 21.3021 143.832 21.0463 143.832 20.7376V15.4565ZM147.008 22.0371V16.7284H147.824V22.0371H147.008ZM147.423 15.8436C147.264 15.8436 147.127 15.7895 147.011 15.6812C146.898 15.5729 146.842 15.4427 146.842 15.2906C146.842 15.1386 146.898 15.0084 147.011 14.9001C147.127 14.7918 147.264 14.7376 147.423 14.7376C147.582 14.7376 147.718 14.7918 147.83 14.9001C147.946 15.0084 148.003 15.1386 148.003 15.2906C148.003 15.4427 147.946 15.5729 147.83 15.6812C147.718 15.7895 147.582 15.8436 147.423 15.8436ZM151.474 22.1477C150.995 22.1477 150.574 22.0337 150.213 21.8055C149.853 21.5774 149.572 21.2583 149.369 20.8482C149.169 20.438 149.069 19.9588 149.069 19.4104C149.069 18.8574 149.169 18.3747 149.369 17.9623C149.572 17.5498 149.853 17.2296 150.213 17.0014C150.574 16.7733 150.995 16.6593 151.474 16.6593C151.953 16.6593 152.373 16.7733 152.732 17.0014C153.094 17.2296 153.375 17.5498 153.575 17.9623C153.778 18.3747 153.88 18.8574 153.88 19.4104C153.88 19.9588 153.778 20.438 153.575 20.8482C153.375 21.2583 153.094 21.5774 152.732 21.8055C152.373 22.0337 151.953 22.1477 151.474 22.1477ZM151.474 21.415C151.838 21.415 152.138 21.3217 152.373 21.135C152.608 20.9484 152.782 20.703 152.895 20.3989C153.008 20.0947 153.064 19.7652 153.064 19.4104C153.064 19.0556 153.008 18.7249 152.895 18.4185C152.782 18.112 152.608 17.8643 152.373 17.6754C152.138 17.4865 151.838 17.392 151.474 17.392C151.11 17.392 150.811 17.4865 150.576 17.6754C150.34 17.8643 150.167 18.112 150.054 18.4185C149.941 18.7249 149.884 19.0556 149.884 19.4104C149.884 19.7652 149.941 20.0947 150.054 20.3989C150.167 20.703 150.34 20.9484 150.576 21.135C150.811 21.3217 151.11 21.415 151.474 21.415ZM155.94 18.8436V22.0371H155.125V16.7284H155.913V17.5579H155.982C156.106 17.2883 156.295 17.0717 156.549 16.9081C156.802 16.7422 157.129 16.6593 157.53 16.6593C157.89 16.6593 158.204 16.733 158.474 16.8805C158.743 17.0256 158.953 17.2468 159.103 17.5441C159.253 17.839 159.327 18.2123 159.327 18.6639V22.0371H158.512V18.7192C158.512 18.3021 158.403 17.9772 158.187 17.7445C157.97 17.5095 157.673 17.392 157.295 17.392C157.035 17.392 156.802 17.4484 156.597 17.5613C156.394 17.6743 156.234 17.839 156.117 18.0556C155.999 18.2722 155.94 18.5348 155.94 18.8436ZM168.311 14.9588H169.168V19.6454C169.168 20.1293 169.054 20.5613 168.826 20.9415C168.6 21.3194 168.281 21.6178 167.869 21.8367C167.456 22.0532 166.972 22.1615 166.417 22.1615C165.862 22.1615 165.378 22.0532 164.965 21.8367C164.553 21.6178 164.233 21.3194 164.005 20.9415C163.779 20.5613 163.666 20.1293 163.666 19.6454V14.9588H164.523V19.5763C164.523 19.9219 164.599 20.2295 164.751 20.4991C164.903 20.7664 165.12 20.9772 165.401 21.1316C165.684 21.2837 166.023 21.3597 166.417 21.3597C166.811 21.3597 167.15 21.2837 167.433 21.1316C167.716 20.9772 167.933 20.7664 168.083 20.4991C168.235 20.2295 168.311 19.9219 168.311 19.5763V14.9588ZM171.737 14.9588V22.0371H170.88V14.9588H171.737Z" fill="#858E96"/>
+<circle cx="111.106" cy="68.4444" r="4.96388" fill="white"/>
+<circle cx="111.106" cy="68.4443" r="4.51262" fill="#F7AE59"/>
+<circle cx="103.435" cy="68.4444" r="4.96388" fill="white"/>
+<circle cx="103.434" cy="68.4443" r="4.51262" fill="#8CC1FF"/>
+<circle cx="95.3115" cy="68.4444" r="4.96388" fill="white"/>
+<circle cx="95.3117" cy="68.4443" r="4.51262" fill="#2C435F"/>
+<rect x="59.238" y="60.1787" width="23.984" height="16.3369" rx="2.60695" fill="white" stroke="#DEE2E6" stroke-width="0.347594"/>
+<circle cx="70.8824" cy="68.3478" r="4.86631" stroke="#FCBE1D" stroke-width="0.695187" stroke-linecap="round" stroke-dasharray="0 13.9 0 6.95"/>
+<path d="M73.2007 65.3557C72.5321 64.8376 71.7093 64.5583 70.8634 64.5625C70.0176 64.5668 69.1975 64.8542 68.5341 65.379L70.8823 68.3474L73.2007 65.3557Z" fill="#FCBE1D"/>
+<path d="M68.5576 71.3396C69.2262 71.8578 70.049 72.137 70.8949 72.1328C71.7407 72.1285 72.5608 71.8411 73.2242 71.3163L70.876 68.3479L68.5576 71.3396Z" fill="#FCBE1D"/>
+<rect x="36.8181" y="60.0049" width="16.6845" height="16.6845" rx="2.78075" fill="#FFEDD5"/>
+<rect x="40.9893" y="64.1758" width="7.64706" height="7.64706" rx="3.47594" fill="#FFEDD5"/>
+<path d="M46.9636 70.5492C46.8521 70.5492 46.7579 70.5107 46.6809 70.4337C46.6039 70.3567 46.5654 70.2624 46.5654 70.1509V65.8495C46.5654 65.7379 46.6039 65.6437 46.6809 65.5667C46.7579 65.4897 46.8521 65.4512 46.9636 65.4512C47.0752 65.4512 47.1694 65.4897 47.2464 65.5667C47.3234 65.6437 47.3619 65.7379 47.3619 65.8495V70.1509C47.3619 70.2624 47.3234 70.3567 47.2464 70.4337C47.1694 70.5107 47.0752 70.5492 46.9636 70.5492ZM42.9888 70.5492C42.9304 70.5492 42.8759 70.5386 42.8255 70.5173C42.775 70.4961 42.7325 70.4682 42.698 70.4337C42.6635 70.3992 42.6356 70.3567 42.6144 70.3063C42.5931 70.2558 42.5825 70.204 42.5825 70.1509V69.0357C42.5825 68.9242 42.621 68.83 42.698 68.7529C42.775 68.6759 42.8693 68.6374 42.9808 68.6374C43.0923 68.6374 43.1866 68.6759 43.2636 68.7529C43.3406 68.83 43.3791 68.9242 43.3791 69.0357V70.1509C43.3791 70.204 43.3685 70.2558 43.3472 70.3063C43.326 70.3567 43.2981 70.3992 43.2636 70.4337C43.2291 70.4682 43.1879 70.4961 43.1401 70.5173C43.0923 70.5386 43.0419 70.5492 42.9888 70.5492ZM44.9722 70.5492C44.8607 70.5492 44.7664 70.5107 44.6894 70.4337C44.6124 70.3567 44.5739 70.2624 44.5739 70.1509V67.4426C44.5739 67.3311 44.6124 67.2368 44.6894 67.1598C44.7664 67.0828 44.8607 67.0443 44.9722 67.0443C45.0837 67.0443 45.178 67.0828 45.255 67.1598C45.332 67.2368 45.3705 67.3311 45.3705 67.4426V70.1509C45.3705 70.2624 45.332 70.3567 45.255 70.4337C45.178 70.5107 45.0837 70.5492 44.9722 70.5492Z" fill="#FF6B00"/>
+</g>
+<rect x="36" y="31" width="237" height="5" rx="2.5" fill="#EBEBEB"/>
+<rect x="36" y="42" width="237" height="5" rx="2.5" fill="#E2E2E2"/>
+<g filter="url(#filter1_d_1295_41552)">
+<rect x="3" y="27" width="260" height="84.1176" rx="5.5615" fill="white"/>
+<path d="M19.6253 38.9588H20.4824V43.6454C20.4824 44.1293 20.3684 44.5613 20.1403 44.9415C19.9145 45.3194 19.5953 45.6178 19.1829 45.8367C18.7705 46.0532 18.2866 46.1615 17.7313 46.1615C17.176 46.1615 16.6921 46.0532 16.2797 45.8367C15.8673 45.6178 15.547 45.3194 15.3189 44.9415C15.0931 44.5613 14.9802 44.1293 14.9802 43.6454V38.9588H15.8373V43.5763C15.8373 43.9219 15.9134 44.2295 16.0654 44.4991C16.2175 44.7664 16.4341 44.9772 16.7152 45.1316C16.9986 45.2837 17.3373 45.3597 17.7313 45.3597C18.1253 45.3597 18.464 45.2837 18.7474 45.1316C19.0308 44.9772 19.2474 44.7664 19.3972 44.4991C19.5493 44.2295 19.6253 43.9219 19.6253 43.5763V38.9588ZM22.0835 48.0279V40.7284H22.8715V41.5717H22.9683C23.0282 41.4796 23.1111 41.362 23.2171 41.2192C23.3254 41.074 23.4798 40.945 23.6803 40.8321C23.883 40.7169 24.1572 40.6593 24.5028 40.6593C24.9498 40.6593 25.3438 40.771 25.6849 40.9945C26.0259 41.218 26.292 41.5349 26.4832 41.945C26.6745 42.3551 26.7701 42.839 26.7701 43.3966C26.7701 43.9588 26.6745 44.4461 26.4832 44.8585C26.292 45.2687 26.027 45.5867 25.6883 45.8125C25.3496 46.036 24.9591 46.1477 24.5167 46.1477C24.1757 46.1477 23.9026 46.0913 23.6975 45.9784C23.4925 45.8631 23.3346 45.733 23.224 45.5878C23.1135 45.4403 23.0282 45.3182 22.9683 45.2214H22.8992V48.0279H22.0835ZM22.8853 43.3828C22.8853 43.7837 22.9441 44.1374 23.0616 44.4438C23.1791 44.748 23.3508 44.9864 23.5766 45.1592C23.8024 45.3297 24.0789 45.415 24.4061 45.415C24.7471 45.415 25.0316 45.3251 25.2597 45.1454C25.4902 44.9634 25.663 44.7192 25.7782 44.4127C25.8957 44.1039 25.9544 43.7606 25.9544 43.3828C25.9544 43.0095 25.8968 42.6731 25.7816 42.3736C25.6687 42.0717 25.4971 41.8332 25.2667 41.6581C25.0385 41.4807 24.7517 41.392 24.4061 41.392C24.0743 41.392 23.7955 41.4761 23.5697 41.6443C23.3439 41.8102 23.1734 42.0429 23.0582 42.3424C22.9429 42.6397 22.8853 42.9864 22.8853 43.3828ZM30.0189 46.1477C29.5765 46.1477 29.186 46.036 28.8473 45.8125C28.5086 45.5867 28.2436 45.2687 28.0523 44.8585C27.8611 44.4461 27.7655 43.9588 27.7655 43.3966C27.7655 42.839 27.8611 42.3551 28.0523 41.945C28.2436 41.5349 28.5097 41.218 28.8507 40.9945C29.1917 40.771 29.5857 40.6593 30.0327 40.6593C30.3784 40.6593 30.6514 40.7169 30.8519 40.8321C31.0546 40.945 31.209 41.074 31.315 41.2192C31.4233 41.362 31.5074 41.4796 31.5673 41.5717H31.6364V38.9588H32.4521V46.0371H31.6641V45.2214H31.5673C31.5074 45.3182 31.4221 45.4403 31.3115 45.5878C31.2009 45.733 31.0431 45.8631 30.838 45.9784C30.633 46.0913 30.3599 46.1477 30.0189 46.1477ZM30.1295 45.415C30.4567 45.415 30.7332 45.3297 30.959 45.1592C31.1848 44.9864 31.3565 44.748 31.474 44.4438C31.5915 44.1374 31.6502 43.7837 31.6502 43.3828C31.6502 42.9864 31.5926 42.6397 31.4774 42.3424C31.3622 42.0429 31.1917 41.8102 30.9659 41.6443C30.7401 41.4761 30.4613 41.392 30.1295 41.392C29.7839 41.392 29.4959 41.4807 29.2655 41.6581C29.0374 41.8332 28.8657 42.0717 28.7505 42.3736C28.6376 42.6731 28.5811 43.0095 28.5811 43.3828C28.5811 43.7606 28.6387 44.1039 28.7539 44.4127C28.8715 44.7192 29.0443 44.9634 29.2724 45.1454C29.5028 45.3251 29.7885 45.415 30.1295 45.415ZM35.6214 46.1615C35.285 46.1615 34.9797 46.0982 34.7055 45.9714C34.4313 45.8424 34.2136 45.6569 34.0523 45.415C33.891 45.1708 33.8103 44.8758 33.8103 44.5302C33.8103 44.2261 33.8703 43.9795 33.9901 43.7906C34.1099 43.5993 34.27 43.4496 34.4705 43.3413C34.6709 43.233 34.8921 43.1523 35.1341 43.0994C35.3783 43.0441 35.6237 43.0003 35.8702 42.968C36.1928 42.9265 36.4543 42.8954 36.6548 42.8747C36.8576 42.8517 37.005 42.8136 37.0972 42.7606C37.1916 42.7076 37.2389 42.6155 37.2389 42.4841V42.4565C37.2389 42.1155 37.1456 41.8505 36.9589 41.6616C36.7746 41.4726 36.4947 41.3782 36.1191 41.3782C35.7297 41.3782 35.4244 41.4634 35.2032 41.6339C34.982 41.8044 34.8265 41.9865 34.7366 42.18L33.9624 41.9035C34.1007 41.5809 34.285 41.3298 34.5154 41.1501C34.7481 40.968 35.0016 40.8413 35.2758 40.7699C35.5523 40.6961 35.8242 40.6593 36.0914 40.6593C36.2619 40.6593 36.4578 40.68 36.679 40.7215C36.9025 40.7607 37.1179 40.8425 37.3253 40.9669C37.535 41.0913 37.7089 41.2791 37.8472 41.5302C37.9854 41.7814 38.0545 42.1178 38.0545 42.5394V46.0371H37.2389V45.3182H37.1974C37.1421 45.4334 37.0499 45.5567 36.9209 45.688C36.7919 45.8194 36.6202 45.9311 36.4059 46.0233C36.1917 46.1154 35.9301 46.1615 35.6214 46.1615ZM35.7458 45.4288C36.0684 45.4288 36.3403 45.3655 36.5615 45.2387C36.785 45.112 36.9532 44.9484 37.0661 44.748C37.1813 44.5475 37.2389 44.3367 37.2389 44.1155V43.3689C37.2043 43.4104 37.1283 43.4484 37.0108 43.483C36.8956 43.5152 36.7619 43.544 36.6099 43.5694C36.4601 43.5924 36.3138 43.6132 36.1709 43.6316C36.0304 43.6477 35.9163 43.6616 35.8288 43.6731C35.6168 43.7007 35.4186 43.7457 35.2343 43.8079C35.0523 43.8678 34.9048 43.9588 34.7919 44.0809C34.6813 44.2007 34.626 44.3643 34.626 44.5717C34.626 44.8551 34.7308 45.0694 34.9405 45.2145C35.1525 45.3574 35.4209 45.4288 35.7458 45.4288ZM41.852 40.7284V41.4196H39.1009V40.7284H41.852ZM39.9027 39.4565H40.7184V44.5164C40.7184 44.7468 40.7518 44.9196 40.8186 45.0348C40.8878 45.1477 40.9753 45.2238 41.0813 45.2629C41.1896 45.2998 41.3036 45.3182 41.4235 45.3182C41.5133 45.3182 41.5871 45.3136 41.6447 45.3044C41.7023 45.2929 41.7483 45.2837 41.7829 45.2767L41.9488 46.0095C41.8935 46.0302 41.8163 46.0509 41.7172 46.0717C41.6182 46.0947 41.4926 46.1062 41.3405 46.1062C41.1101 46.1062 40.8843 46.0567 40.6631 45.9576C40.4442 45.8585 40.2622 45.7076 40.117 45.5049C39.9742 45.3021 39.9027 45.0463 39.9027 44.7376V39.4565ZM45.2477 46.1477C44.7362 46.1477 44.295 46.0348 43.924 45.809C43.5554 45.5809 43.2708 45.2629 43.0703 44.8551C42.8722 44.445 42.7731 43.968 42.7731 43.4242C42.7731 42.8805 42.8722 42.4012 43.0703 41.9865C43.2708 41.5694 43.5496 41.2445 43.9067 41.0118C44.2662 40.7768 44.6855 40.6593 45.1648 40.6593C45.4413 40.6593 45.7143 40.7054 45.9839 40.7975C46.2535 40.8897 46.4989 41.0395 46.7201 41.2468C46.9413 41.4519 47.1175 41.7238 47.2489 42.0625C47.3802 42.4012 47.4459 42.8182 47.4459 43.3136V43.6593H43.3537V42.9542H46.6164C46.6164 42.6547 46.5565 42.3874 46.4367 42.1524C46.3191 41.9173 46.1509 41.7319 45.9321 41.5959C45.7155 41.46 45.4597 41.392 45.1648 41.392C44.8399 41.392 44.5588 41.4726 44.3215 41.6339C44.0865 41.7929 43.9056 42.0003 43.7789 42.256C43.6521 42.5118 43.5888 42.786 43.5888 43.0786V43.5487C43.5888 43.9496 43.6579 44.2894 43.7961 44.5682C43.9367 44.8447 44.1314 45.0556 44.3802 45.2007C44.6291 45.3436 44.9182 45.415 45.2477 45.415C45.462 45.415 45.6556 45.385 45.8284 45.3251C46.0035 45.2629 46.1544 45.1708 46.2811 45.0486C46.4079 44.9242 46.5058 44.7698 46.5749 44.5855L47.3629 44.8067C47.28 45.074 47.1406 45.309 46.9447 45.5118C46.7489 45.7122 46.5069 45.8689 46.2189 45.9818C45.9309 46.0924 45.6072 46.1477 45.2477 46.1477ZM53.7327 40.7284V41.4196H50.9815V40.7284H53.7327ZM51.7834 39.4565H52.599V44.5164C52.599 44.7468 52.6324 44.9196 52.6993 45.0348C52.7684 45.1477 52.8559 45.2238 52.9619 45.2629C53.0702 45.2998 53.1843 45.3182 53.3041 45.3182C53.394 45.3182 53.4677 45.3136 53.5253 45.3044C53.5829 45.2929 53.629 45.2837 53.6635 45.2767L53.8294 46.0095C53.7741 46.0302 53.697 46.0509 53.5979 46.0717C53.4988 46.0947 53.3732 46.1062 53.2212 46.1062C52.9907 46.1062 52.7649 46.0567 52.5437 45.9576C52.3248 45.8585 52.1428 45.7076 51.9977 45.5049C51.8548 45.3021 51.7834 45.0463 51.7834 44.7376V39.4565ZM55.8893 42.8436V46.0371H55.0737V38.9588H55.8893V41.5579H55.9585C56.0829 41.2837 56.2695 41.066 56.5184 40.9047C56.7695 40.7411 57.1036 40.6593 57.5206 40.6593C57.8824 40.6593 58.1992 40.7319 58.4711 40.877C58.743 41.0199 58.9538 41.2399 59.1036 41.5372C59.2557 41.8321 59.3317 42.2077 59.3317 42.6639V46.0371H58.516V42.7192C58.516 42.2975 58.4066 41.9715 58.1877 41.7411C57.9711 41.5084 57.6704 41.392 57.2856 41.392C57.0184 41.392 56.7787 41.4484 56.5667 41.5613C56.3571 41.6743 56.1912 41.839 56.0691 42.0556C55.9492 42.2722 55.8893 42.5348 55.8893 42.8436ZM63.0497 46.1477C62.5382 46.1477 62.0969 46.0348 61.726 45.809C61.3573 45.5809 61.0727 45.2629 60.8723 44.8551C60.6741 44.445 60.5751 43.968 60.5751 43.4242C60.5751 42.8805 60.6741 42.4012 60.8723 41.9865C61.0727 41.5694 61.3515 41.2445 61.7087 41.0118C62.0681 40.7768 62.4875 40.6593 62.9667 40.6593C63.2432 40.6593 63.5163 40.7054 63.7858 40.7975C64.0554 40.8897 64.3008 41.0395 64.522 41.2468C64.7432 41.4519 64.9195 41.7238 65.0508 42.0625C65.1821 42.4012 65.2478 42.8182 65.2478 43.3136V43.6593H61.1557V42.9542H64.4183C64.4183 42.6547 64.3584 42.3874 64.2386 42.1524C64.1211 41.9173 63.9529 41.7319 63.734 41.5959C63.5174 41.46 63.2617 41.392 62.9667 41.392C62.6419 41.392 62.3607 41.4726 62.1234 41.6339C61.8884 41.7929 61.7075 42.0003 61.5808 42.256C61.4541 42.5118 61.3907 42.786 61.3907 43.0786V43.5487C61.3907 43.9496 61.4598 44.2894 61.5981 44.5682C61.7386 44.8447 61.9333 45.0556 62.1822 45.2007C62.431 45.3436 62.7202 45.415 63.0497 45.415C63.264 45.415 63.4575 45.385 63.6303 45.3251C63.8054 45.2629 63.9564 45.1708 64.0831 45.0486C64.2098 44.9242 64.3077 44.7698 64.3769 44.5855L65.1649 44.8067C65.0819 45.074 64.9425 45.309 64.7467 45.5118C64.5508 45.7122 64.3089 45.8689 64.0209 45.9818C63.7329 46.0924 63.4091 46.1477 63.0497 46.1477ZM71.2305 46.1477C70.7881 46.1477 70.3975 46.036 70.0588 45.8125C69.7201 45.5867 69.4551 45.2687 69.2639 44.8585C69.0727 44.4461 68.977 43.9588 68.977 43.3966C68.977 42.839 69.0727 42.3551 69.2639 41.945C69.4551 41.5349 69.7213 41.218 70.0623 40.9945C70.4033 40.771 70.7973 40.6593 71.2443 40.6593C71.5899 40.6593 71.863 40.7169 72.0634 40.8321C72.2662 40.945 72.4206 41.074 72.5265 41.2192C72.6348 41.362 72.7189 41.4796 72.7788 41.5717H72.848V38.9588H73.6636V46.0371H72.8756V45.2214H72.7788C72.7189 45.3182 72.6337 45.4403 72.5231 45.5878C72.4125 45.733 72.2547 45.8631 72.0496 45.9784C71.8445 46.0913 71.5715 46.1477 71.2305 46.1477ZM71.3411 45.415C71.6683 45.415 71.9448 45.3297 72.1706 45.1592C72.3964 44.9864 72.568 44.748 72.6855 44.4438C72.803 44.1374 72.8618 43.7837 72.8618 43.3828C72.8618 42.9864 72.8042 42.6397 72.689 42.3424C72.5738 42.0429 72.4033 41.8102 72.1775 41.6443C71.9517 41.4761 71.6729 41.392 71.3411 41.392C70.9955 41.392 70.7074 41.4807 70.477 41.6581C70.2489 41.8332 70.0773 42.0717 69.9621 42.3736C69.8492 42.6731 69.7927 43.0095 69.7927 43.3828C69.7927 43.7606 69.8503 44.1039 69.9655 44.4127C70.083 44.7192 70.2558 44.9634 70.4839 45.1454C70.7144 45.3251 71.0001 45.415 71.3411 45.415ZM77.4965 46.1477C76.985 46.1477 76.5438 46.0348 76.1728 45.809C75.8042 45.5809 75.5196 45.2629 75.3191 44.8551C75.121 44.445 75.0219 43.968 75.0219 43.4242C75.0219 42.8805 75.121 42.4012 75.3191 41.9865C75.5196 41.5694 75.7984 41.2445 76.1555 41.0118C76.515 40.7768 76.9343 40.6593 77.4136 40.6593C77.6901 40.6593 77.9631 40.7054 78.2327 40.7975C78.5023 40.8897 78.7477 41.0395 78.9689 41.2468C79.1901 41.4519 79.3663 41.7238 79.4977 42.0625C79.629 42.4012 79.6947 42.8182 79.6947 43.3136V43.6593H75.6025V42.9542H78.8652C78.8652 42.6547 78.8053 42.3874 78.6855 42.1524C78.568 41.9173 78.3998 41.7319 78.1809 41.5959C77.9643 41.46 77.7085 41.392 77.4136 41.392C77.0887 41.392 76.8076 41.4726 76.5703 41.6339C76.3353 41.7929 76.1544 42.0003 76.0277 42.256C75.9009 42.5118 75.8376 42.786 75.8376 43.0786V43.5487C75.8376 43.9496 75.9067 44.2894 76.0449 44.5682C76.1855 44.8447 76.3802 45.0556 76.629 45.2007C76.8779 45.3436 77.1671 45.415 77.4965 45.415C77.7108 45.415 77.9044 45.385 78.0772 45.3251C78.2523 45.2629 78.4032 45.1708 78.5299 45.0486C78.6567 44.9242 78.7546 44.7698 78.8237 44.5855L79.6117 44.8067C79.5288 45.074 79.3894 45.309 79.1935 45.5118C78.9977 45.7122 78.7557 45.8689 78.4677 45.9818C78.1797 46.0924 77.856 46.1477 77.4965 46.1477ZM84.6958 41.9173L83.9631 42.1247C83.917 42.0026 83.849 41.8839 83.7592 41.7687C83.6716 41.6512 83.5518 41.5544 83.3997 41.4784C83.2476 41.4024 83.0529 41.3643 82.8156 41.3643C82.4907 41.3643 82.22 41.4392 82.0034 41.589C81.7891 41.7365 81.682 41.9242 81.682 42.1524C81.682 42.3551 81.7557 42.5153 81.9032 42.6328C82.0506 42.7503 82.2811 42.8482 82.5944 42.9265L83.3824 43.1201C83.8571 43.2353 84.2108 43.4116 84.4435 43.6489C84.6762 43.8839 84.7926 44.1869 84.7926 44.5579C84.7926 44.862 84.705 45.1339 84.5299 45.3735C84.3571 45.6132 84.1151 45.8021 83.8041 45.9403C83.493 46.0786 83.1313 46.1477 82.7188 46.1477C82.1774 46.1477 81.7292 46.0302 81.3744 45.7952C81.0195 45.5602 80.7949 45.2168 80.7004 44.7652L81.4746 44.5717C81.5483 44.8574 81.6877 45.0717 81.8928 45.2145C82.1002 45.3574 82.3709 45.4288 82.705 45.4288C83.0852 45.4288 83.387 45.3482 83.6105 45.1869C83.8363 45.0233 83.9492 44.8274 83.9492 44.5993C83.9492 44.415 83.8847 44.2606 83.7557 44.1362C83.6267 44.0095 83.4285 43.915 83.1612 43.8528L82.2764 43.6454C81.7903 43.5302 81.4331 43.3517 81.205 43.1097C80.9792 42.8655 80.8663 42.5602 80.8663 42.1938C80.8663 41.8943 80.9504 41.6293 81.1186 41.3989C81.2891 41.1685 81.5207 40.9876 81.8133 40.8563C82.1082 40.725 82.4423 40.6593 82.8156 40.6593C83.341 40.6593 83.7534 40.7745 84.0529 41.0049C84.3548 41.2353 84.5691 41.5395 84.6958 41.9173ZM86.0204 46.0371V40.7284H86.836V46.0371H86.0204ZM86.4351 39.8436C86.2761 39.8436 86.139 39.7895 86.0238 39.6812C85.9109 39.5729 85.8545 39.4427 85.8545 39.2906C85.8545 39.1386 85.9109 39.0084 86.0238 38.9001C86.139 38.7918 86.2761 38.7376 86.4351 38.7376C86.5941 38.7376 86.73 38.7918 86.8429 38.9001C86.9581 39.0084 87.0157 39.1386 87.0157 39.2906C87.0157 39.4427 86.9581 39.5729 86.8429 39.6812C86.73 39.7895 86.5941 39.8436 86.4351 39.8436ZM90.4728 48.1385C90.0788 48.1385 89.7401 48.0878 89.4567 47.9864C89.1733 47.8873 88.9371 47.756 88.7482 47.5924C88.5615 47.4311 88.4129 47.2583 88.3023 47.074L88.9521 46.6177C89.0258 46.7145 89.1191 46.8251 89.232 46.9495C89.3449 47.0763 89.4993 47.1857 89.6951 47.2779C89.8933 47.3723 90.1525 47.4196 90.4728 47.4196C90.9014 47.4196 91.255 47.3159 91.5338 47.1085C91.8126 46.9012 91.952 46.5763 91.952 46.1339V45.0556H91.8829C91.823 45.1523 91.7378 45.2721 91.6272 45.415C91.5189 45.5555 91.3622 45.6811 91.1571 45.7917C90.9544 45.9 90.6802 45.9542 90.3345 45.9542C89.906 45.9542 89.5212 45.8528 89.1802 45.65C88.8415 45.4473 88.573 45.1523 88.3749 44.7652C88.179 44.3781 88.0811 43.9081 88.0811 43.3551C88.0811 42.8113 88.1767 42.3378 88.368 41.9346C88.5592 41.5291 88.8253 41.2157 89.1664 40.9945C89.5074 40.771 89.9014 40.6593 90.3484 40.6593C90.694 40.6593 90.9682 40.7169 91.1709 40.8321C91.376 40.945 91.5327 41.074 91.641 41.2192C91.7516 41.362 91.8368 41.4796 91.8967 41.5717H91.9797V40.7284H92.7677V46.1892C92.7677 46.6454 92.664 47.0164 92.4566 47.3021C92.2516 47.5901 91.9751 47.8009 91.6272 47.9346C91.2815 48.0705 90.8968 48.1385 90.4728 48.1385ZM90.4451 45.2214C90.7723 45.2214 91.0488 45.1466 91.2746 44.9968C91.5004 44.847 91.6721 44.6316 91.7896 44.3505C91.9071 44.0694 91.9659 43.733 91.9659 43.3413C91.9659 42.9588 91.9083 42.6212 91.7931 42.3286C91.6778 42.036 91.5073 41.8067 91.2815 41.6408C91.0557 41.4749 90.7769 41.392 90.4451 41.392C90.0995 41.392 89.8115 41.4796 89.5811 41.6547C89.353 41.8298 89.1813 42.0648 89.0661 42.3597C88.9532 42.6547 88.8968 42.9818 88.8968 43.3413C88.8968 43.7099 88.9544 44.036 89.0696 44.3194C89.1871 44.6005 89.3599 44.8217 89.588 44.983C89.8184 45.142 90.1041 45.2214 90.4451 45.2214ZM95.0764 42.8436V46.0371H94.2608V40.7284H95.0488V41.5579H95.1179C95.2423 41.2883 95.4313 41.0717 95.6847 40.9081C95.9382 40.7422 96.2654 40.6593 96.6663 40.6593C97.0257 40.6593 97.3402 40.733 97.6098 40.8805C97.8794 41.0256 98.0891 41.2468 98.2388 41.5441C98.3886 41.839 98.4635 42.2123 98.4635 42.6639V46.0371H97.6478V42.7192C97.6478 42.3021 97.5395 41.9772 97.323 41.7445C97.1064 41.5095 96.8091 41.392 96.4313 41.392C96.1709 41.392 95.9382 41.4484 95.7331 41.5613C95.5303 41.6743 95.3702 41.839 95.2527 42.0556C95.1352 42.2722 95.0764 42.5348 95.0764 42.8436ZM103.714 41.9173L102.982 42.1247C102.936 42.0026 102.868 41.8839 102.778 41.7687C102.69 41.6512 102.57 41.5544 102.418 41.4784C102.266 41.4024 102.071 41.3643 101.834 41.3643C101.509 41.3643 101.239 41.4392 101.022 41.589C100.808 41.7365 100.701 41.9242 100.701 42.1524C100.701 42.3551 100.774 42.5153 100.922 42.6328C101.069 42.7503 101.3 42.8482 101.613 42.9265L102.401 43.1201C102.876 43.2353 103.229 43.4116 103.462 43.6489C103.695 43.8839 103.811 44.1869 103.811 44.5579C103.811 44.862 103.724 45.1339 103.548 45.3735C103.376 45.6132 103.134 45.8021 102.823 45.9403C102.512 46.0786 102.15 46.1477 101.737 46.1477C101.196 46.1477 100.748 46.0302 100.393 45.7952C100.038 45.5602 99.8134 45.2168 99.719 44.7652L100.493 44.5717C100.567 44.8574 100.706 45.0717 100.911 45.2145C101.119 45.3574 101.389 45.4288 101.724 45.4288C102.104 45.4288 102.406 45.3482 102.629 45.1869C102.855 45.0233 102.968 44.8274 102.968 44.5993C102.968 44.415 102.903 44.2606 102.774 44.1362C102.645 44.0095 102.447 43.915 102.18 43.8528L101.295 43.6454C100.809 43.5302 100.452 43.3517 100.224 43.1097C99.9978 42.8655 99.8848 42.5602 99.8848 42.1938C99.8848 41.8943 99.9689 41.6293 100.137 41.3989C100.308 41.1685 100.539 40.9876 100.832 40.8563C101.127 40.725 101.461 40.6593 101.834 40.6593C102.359 40.6593 102.772 40.7745 103.071 41.0049C103.373 41.2353 103.588 41.5395 103.714 41.9173ZM109.933 46.1477C109.454 46.1477 109.033 46.0337 108.671 45.8055C108.312 45.5774 108.031 45.2583 107.828 44.8482C107.628 44.438 107.527 43.9588 107.527 43.4104C107.527 42.8574 107.628 42.3747 107.828 41.9623C108.031 41.5498 108.312 41.2296 108.671 41.0014C109.033 40.7733 109.454 40.6593 109.933 40.6593C110.412 40.6593 110.831 40.7733 111.191 41.0014C111.553 41.2296 111.834 41.5498 112.034 41.9623C112.237 42.3747 112.338 42.8574 112.338 43.4104C112.338 43.9588 112.237 44.438 112.034 44.8482C111.834 45.2583 111.553 45.5774 111.191 45.8055C110.831 46.0337 110.412 46.1477 109.933 46.1477ZM109.933 45.415C110.297 45.415 110.596 45.3217 110.831 45.135C111.066 44.9484 111.24 44.703 111.353 44.3989C111.466 44.0947 111.523 43.7652 111.523 43.4104C111.523 43.0556 111.466 42.7249 111.353 42.4185C111.24 42.112 111.066 41.8643 110.831 41.6754C110.596 41.4865 110.297 41.392 109.933 41.392C109.569 41.392 109.269 41.4865 109.034 41.6754C108.799 41.8643 108.625 42.112 108.512 42.4185C108.399 42.7249 108.343 43.0556 108.343 43.4104C108.343 43.7652 108.399 44.0947 108.512 44.3989C108.625 44.703 108.799 44.9484 109.034 45.135C109.269 45.3217 109.569 45.415 109.933 45.415ZM115.947 40.7284V41.4196H113.086V40.7284H115.947ZM113.943 46.0371V39.9957C113.943 39.6916 114.014 39.4381 114.157 39.2353C114.3 39.0326 114.486 38.8805 114.714 38.7791C114.942 38.6777 115.183 38.627 115.436 38.627C115.636 38.627 115.8 38.6432 115.927 38.6754C116.053 38.7077 116.148 38.7376 116.21 38.7653L115.975 39.4704C115.934 39.4565 115.876 39.4392 115.802 39.4185C115.731 39.3978 115.636 39.3874 115.519 39.3874C115.249 39.3874 115.055 39.4554 114.935 39.5913C114.817 39.7273 114.759 39.9266 114.759 40.1892V46.0371H113.943ZM119.939 46.0371V38.9588H120.796V42.4703H120.879L124.058 38.9588H125.178L122.206 42.1524L125.178 46.0371H124.141L121.68 42.7468L120.796 43.7422V46.0371H119.939ZM127.739 46.1615C127.403 46.1615 127.097 46.0982 126.823 45.9714C126.549 45.8424 126.331 45.6569 126.17 45.415C126.009 45.1708 125.928 44.8758 125.928 44.5302C125.928 44.2261 125.988 43.9795 126.108 43.7906C126.228 43.5993 126.388 43.4496 126.588 43.3413C126.789 43.233 127.01 43.1523 127.252 43.0994C127.496 43.0441 127.741 43.0003 127.988 42.968C128.311 42.9265 128.572 42.8954 128.773 42.8747C128.975 42.8517 129.123 42.8136 129.215 42.7606C129.309 42.7076 129.357 42.6155 129.357 42.4841V42.4565C129.357 42.1155 129.263 41.8505 129.077 41.6616C128.892 41.4726 128.612 41.3782 128.237 41.3782C127.847 41.3782 127.542 41.4634 127.321 41.6339C127.1 41.8044 126.944 41.9865 126.854 42.18L126.08 41.9035C126.218 41.5809 126.403 41.3298 126.633 41.1501C126.866 40.968 127.119 40.8413 127.393 40.7699C127.67 40.6961 127.942 40.6593 128.209 40.6593C128.38 40.6593 128.576 40.68 128.797 40.7215C129.02 40.7607 129.236 40.8425 129.443 40.9669C129.653 41.0913 129.827 41.2791 129.965 41.5302C130.103 41.7814 130.172 42.1178 130.172 42.5394V46.0371H129.357V45.3182H129.315C129.26 45.4334 129.168 45.5567 129.039 45.688C128.91 45.8194 128.738 45.9311 128.524 46.0233C128.309 46.1154 128.048 46.1615 127.739 46.1615ZM127.864 45.4288C128.186 45.4288 128.458 45.3655 128.679 45.2387C128.903 45.112 129.071 44.9484 129.184 44.748C129.299 44.5475 129.357 44.3367 129.357 44.1155V43.3689C129.322 43.4104 129.246 43.4484 129.129 43.483C129.013 43.5152 128.88 43.544 128.728 43.5694C128.578 43.5924 128.432 43.6132 128.289 43.6316C128.148 43.6477 128.034 43.6616 127.946 43.6731C127.735 43.7007 127.536 43.7457 127.352 43.8079C127.17 43.8678 127.023 43.9588 126.91 44.0809C126.799 44.2007 126.744 44.3643 126.744 44.5717C126.744 44.8551 126.849 45.0694 127.058 45.2145C127.27 45.3574 127.539 45.4288 127.864 45.4288ZM132.477 42.8436V46.0371H131.661V40.7284H132.449V41.5579H132.518C132.643 41.2883 132.832 41.0717 133.085 40.9081C133.338 40.7422 133.666 40.6593 134.067 40.6593C134.426 40.6593 134.74 40.733 135.01 40.8805C135.28 41.0256 135.489 41.2468 135.639 41.5441C135.789 41.839 135.864 42.2123 135.864 42.6639V46.0371H135.048V42.7192C135.048 42.3021 134.94 41.9772 134.723 41.7445C134.507 41.5095 134.209 41.392 133.832 41.392C133.571 41.392 133.338 41.4484 133.133 41.5613C132.931 41.6743 132.77 41.839 132.653 42.0556C132.535 42.2722 132.477 42.5348 132.477 42.8436ZM137.465 46.0371V38.9588H138.28V41.5717H138.35C138.41 41.4796 138.492 41.362 138.598 41.2192C138.707 41.074 138.861 40.945 139.062 40.8321C139.264 40.7169 139.539 40.6593 139.884 40.6593C140.331 40.6593 140.725 40.771 141.066 40.9945C141.407 41.218 141.673 41.5349 141.865 41.945C142.056 42.3551 142.151 42.839 142.151 43.3966C142.151 43.9588 142.056 44.4461 141.865 44.8585C141.673 45.2687 141.408 45.5867 141.07 45.8125C140.731 46.036 140.34 46.1477 139.898 46.1477C139.557 46.1477 139.284 46.0913 139.079 45.9784C138.874 45.8631 138.716 45.733 138.605 45.5878C138.495 45.4403 138.41 45.3182 138.35 45.2214H138.253V46.0371H137.465ZM138.267 43.3828C138.267 43.7837 138.325 44.1374 138.443 44.4438C138.56 44.748 138.732 44.9864 138.958 45.1592C139.184 45.3297 139.46 45.415 139.787 45.415C140.128 45.415 140.413 45.3251 140.641 45.1454C140.871 44.9634 141.044 44.7192 141.159 44.4127C141.277 44.1039 141.336 43.7606 141.336 43.3828C141.336 43.0095 141.278 42.6731 141.163 42.3736C141.05 42.0717 140.878 41.8332 140.648 41.6581C140.42 41.4807 140.133 41.392 139.787 41.392C139.456 41.392 139.177 41.4761 138.951 41.6443C138.725 41.8102 138.555 42.0429 138.439 42.3424C138.324 42.6397 138.267 42.9864 138.267 43.3828ZM144.961 46.1615C144.625 46.1615 144.32 46.0982 144.045 45.9714C143.771 45.8424 143.553 45.6569 143.392 45.415C143.231 45.1708 143.15 44.8758 143.15 44.5302C143.15 44.2261 143.21 43.9795 143.33 43.7906C143.45 43.5993 143.61 43.4496 143.81 43.3413C144.011 43.233 144.232 43.1523 144.474 43.0994C144.718 43.0441 144.964 43.0003 145.21 42.968C145.533 42.9265 145.794 42.8954 145.995 42.8747C146.197 42.8517 146.345 42.8136 146.437 42.7606C146.532 42.7076 146.579 42.6155 146.579 42.4841V42.4565C146.579 42.1155 146.485 41.8505 146.299 41.6616C146.115 41.4726 145.835 41.3782 145.459 41.3782C145.07 41.3782 144.764 41.4634 144.543 41.6339C144.322 41.8044 144.166 41.9865 144.077 42.18L143.302 41.9035C143.441 41.5809 143.625 41.3298 143.855 41.1501C144.088 40.968 144.341 40.8413 144.616 40.7699C144.892 40.6961 145.164 40.6593 145.431 40.6593C145.602 40.6593 145.798 40.68 146.019 40.7215C146.242 40.7607 146.458 40.8425 146.665 40.9669C146.875 41.0913 147.049 41.2791 147.187 41.5302C147.325 41.7814 147.394 42.1178 147.394 42.5394V46.0371H146.579V45.3182H146.537C146.482 45.4334 146.39 45.5567 146.261 45.688C146.132 45.8194 145.96 45.9311 145.746 46.0233C145.532 46.1154 145.27 46.1615 144.961 46.1615ZM145.086 45.4288C145.408 45.4288 145.68 45.3655 145.901 45.2387C146.125 45.112 146.293 44.9484 146.406 44.748C146.521 44.5475 146.579 44.3367 146.579 44.1155V43.3689C146.544 43.4104 146.468 43.4484 146.351 43.483C146.235 43.5152 146.102 43.544 145.95 43.5694C145.8 43.5924 145.654 43.6132 145.511 43.6316C145.37 43.6477 145.256 43.6616 145.169 43.6731C144.957 43.7007 144.759 43.7457 144.574 43.8079C144.392 43.8678 144.245 43.9588 144.132 44.0809C144.021 44.2007 143.966 44.3643 143.966 44.5717C143.966 44.8551 144.071 45.0694 144.28 45.2145C144.492 45.3574 144.761 45.4288 145.086 45.4288ZM149.699 42.8436V46.0371H148.883V40.7284H149.671V41.5579H149.74C149.865 41.2883 150.054 41.0717 150.307 40.9081C150.561 40.7422 150.888 40.6593 151.289 40.6593C151.648 40.6593 151.963 40.733 152.232 40.8805C152.502 41.0256 152.711 41.2468 152.861 41.5441C153.011 41.839 153.086 42.2123 153.086 42.6639V46.0371H152.27V42.7192C152.27 42.3021 152.162 41.9772 151.945 41.7445C151.729 41.5095 151.432 41.392 151.054 41.392C150.793 41.392 150.561 41.4484 150.356 41.5613C150.153 41.6743 149.993 41.839 149.875 42.0556C149.758 42.2722 149.699 42.5348 149.699 42.8436ZM157.715 38.9588L159.816 44.9173H159.899L162 38.9588H162.899L160.3 46.0371H159.415L156.816 38.9588H157.715ZM163.891 46.0371V40.7284H164.706V46.0371H163.891ZM164.306 39.8436C164.147 39.8436 164.009 39.7895 163.894 39.6812C163.781 39.5729 163.725 39.4427 163.725 39.2906C163.725 39.1386 163.781 39.0084 163.894 38.9001C164.009 38.7918 164.147 38.7376 164.306 38.7376C164.465 38.7376 164.6 38.7918 164.713 38.9001C164.829 39.0084 164.886 39.1386 164.886 39.2906C164.886 39.4427 164.829 39.5729 164.713 39.6812C164.6 39.7895 164.465 39.8436 164.306 39.8436ZM168.426 46.1477C167.915 46.1477 167.473 46.0348 167.102 45.809C166.734 45.5809 166.449 45.2629 166.249 44.8551C166.051 44.445 165.952 43.968 165.952 43.4242C165.952 42.8805 166.051 42.4012 166.249 41.9865C166.449 41.5694 166.728 41.2445 167.085 41.0118C167.445 40.7768 167.864 40.6593 168.343 40.6593C168.62 40.6593 168.893 40.7054 169.162 40.7975C169.432 40.8897 169.677 41.0395 169.899 41.2468C170.12 41.4519 170.296 41.7238 170.427 42.0625C170.559 42.4012 170.624 42.8182 170.624 43.3136V43.6593H166.532V42.9542H169.795C169.795 42.6547 169.735 42.3874 169.615 42.1524C169.498 41.9173 169.329 41.7319 169.111 41.5959C168.894 41.46 168.638 41.392 168.343 41.392C168.018 41.392 167.737 41.4726 167.5 41.6339C167.265 41.7929 167.084 42.0003 166.957 42.256C166.831 42.5118 166.767 42.786 166.767 43.0786V43.5487C166.767 43.9496 166.836 44.2894 166.975 44.5682C167.115 44.8447 167.31 45.0556 167.559 45.2007C167.808 45.3436 168.097 45.415 168.426 45.415C168.64 45.415 168.834 45.385 169.007 45.3251C169.182 45.2629 169.333 45.1708 169.46 45.0486C169.586 44.9242 169.684 44.7698 169.753 44.5855L170.541 44.8067C170.458 45.074 170.319 45.309 170.123 45.5118C169.927 45.7122 169.685 45.8689 169.397 45.9818C169.109 46.0924 168.786 46.1477 168.426 46.1477ZM173.068 46.0371L171.45 40.7284H172.308L173.455 44.7929H173.51L174.644 40.7284H175.515L176.635 44.7791H176.69L177.837 40.7284H178.695L177.077 46.0371H176.275L175.114 41.9588H175.031L173.87 46.0371H173.068Z" fill="#858E96"/>
+<circle cx="89.106" cy="92.4444" r="4.96388" fill="white"/>
+<circle cx="89.1056" cy="92.4443" r="4.51262" fill="#F7AE59"/>
+<circle cx="81.4346" cy="92.4444" r="4.96388" fill="white"/>
+<circle cx="81.434" cy="92.4443" r="4.51262" fill="#8CC1FF"/>
+<circle cx="73.3115" cy="92.4444" r="4.96388" fill="white"/>
+<circle cx="73.3117" cy="92.4443" r="4.51262" fill="#2C435F"/>
+<rect x="37.238" y="84.1787" width="23.984" height="16.3369" rx="2.60695" fill="white" stroke="#DEE2E6" stroke-width="0.347594"/>
+<circle cx="48.8824" cy="92.3478" r="4.86631" stroke="#FCBE1D" stroke-width="0.695187" stroke-linecap="round" stroke-dasharray="0 13.9 0 6.95"/>
+<path d="M51.2007 89.3557C50.5321 88.8376 49.7093 88.5583 48.8634 88.5625C48.0176 88.5668 47.1975 88.8542 46.5341 89.379L48.8823 92.3474L51.2007 89.3557Z" fill="#FCBE1D"/>
+<path d="M46.5576 95.3396C47.2262 95.8578 48.049 96.137 48.8949 96.1328C49.7407 96.1285 50.5608 95.8411 51.2242 95.3163L48.876 92.3479L46.5576 95.3396Z" fill="#FCBE1D"/>
+<rect x="14.8181" y="84.0049" width="16.6845" height="16.6845" rx="2.78075" fill="#FFEDD5"/>
+<rect x="18.9893" y="88.1758" width="7.64706" height="7.64706" rx="3.47594" fill="#FFEDD5"/>
+<path d="M24.9636 94.5492C24.8521 94.5492 24.7579 94.5107 24.6809 94.4337C24.6039 94.3567 24.5654 94.2624 24.5654 94.1509V89.8495C24.5654 89.7379 24.6039 89.6437 24.6809 89.5667C24.7579 89.4897 24.8521 89.4512 24.9636 89.4512C25.0752 89.4512 25.1694 89.4897 25.2464 89.5667C25.3234 89.6437 25.3619 89.7379 25.3619 89.8495V94.1509C25.3619 94.2624 25.3234 94.3567 25.2464 94.4337C25.1694 94.5107 25.0752 94.5492 24.9636 94.5492ZM20.9888 94.5492C20.9304 94.5492 20.8759 94.5386 20.8255 94.5173C20.775 94.4961 20.7325 94.4682 20.698 94.4337C20.6635 94.3992 20.6356 94.3567 20.6144 94.3063C20.5931 94.2558 20.5825 94.204 20.5825 94.1509V93.0357C20.5825 92.9242 20.621 92.83 20.698 92.7529C20.775 92.6759 20.8693 92.6374 20.9808 92.6374C21.0923 92.6374 21.1866 92.6759 21.2636 92.7529C21.3406 92.83 21.3791 92.9242 21.3791 93.0357V94.1509C21.3791 94.204 21.3685 94.2558 21.3472 94.3063C21.326 94.3567 21.2981 94.3992 21.2636 94.4337C21.2291 94.4682 21.1879 94.4961 21.1401 94.5173C21.0923 94.5386 21.0419 94.5492 20.9888 94.5492ZM22.9722 94.5492C22.8607 94.5492 22.7664 94.5107 22.6894 94.4337C22.6124 94.3567 22.5739 94.2624 22.5739 94.1509V91.4426C22.5739 91.3311 22.6124 91.2368 22.6894 91.1598C22.7664 91.0828 22.8607 91.0443 22.9722 91.0443C23.0837 91.0443 23.178 91.0828 23.255 91.1598C23.332 91.2368 23.3705 91.3311 23.3705 91.4426V94.1509C23.3705 94.2624 23.332 94.3567 23.255 94.4337C23.178 94.5107 23.0837 94.5492 22.9722 94.5492Z" fill="#FF6B00"/>
+</g>
+<rect x="14" y="55" width="237" height="5" rx="2.5" fill="#EBEBEB"/>
+<rect x="14" y="66" width="237" height="5" rx="2.5" fill="#E2E2E2"/>
+<defs>
+<filter id="filter0_d_1295_41552" x="22.2193" y="0.219251" width="265.561" height="89.6787" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.39037"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1295_41552"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1295_41552" result="shape"/>
+</filter>
+<filter id="filter1_d_1295_41552" x="0.219251" y="24.2193" width="265.561" height="89.6787" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.39037"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1295_41552"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1295_41552" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/app/public/empty-state/empty-module.svg b/app/public/empty-state/empty-module.svg
new file mode 100644
index 000000000..2b5d09c00
--- /dev/null
+++ b/app/public/empty-state/empty-module.svg
@@ -0,0 +1,50 @@
+<svg width="289" height="116" viewBox="0 0 289 116" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1424_38225)">
+<rect x="26" y="3" width="260" height="87" rx="6.16937" fill="white"/>
+</g>
+<path d="M26 63H285.731V83.3589C285.731 86.7662 282.968 89.5283 279.561 89.5283H32.1694C28.7621 89.5283 26 86.7662 26 83.3589V63Z" fill="#FAFAFA"/>
+<path d="M26 63H285.731" stroke="#E2E2E2" stroke-width="0.616937"/>
+<path d="M41.7186 28.1895H39.8904L43.2189 18.7349H45.3333L48.6664 28.1895H46.8382L44.313 20.6738H44.2392L41.7186 28.1895ZM41.7786 24.4824H46.7644V25.8581H41.7786V24.4824ZM51.6244 18.7349V28.1895H49.9117V18.7349H51.6244ZM58.4164 18.7349V28.1895H56.7036V18.7349H58.4164ZM61.8683 24.0346V28.1895H60.1972V21.0985H61.7945V22.3034H61.8776C62.0407 21.9064 62.3007 21.591 62.6577 21.3571C63.0178 21.1232 63.4626 21.0062 63.9919 21.0062C64.4813 21.0062 64.9075 21.1109 65.2707 21.3201C65.6369 21.5294 65.9201 21.8326 66.1201 22.2296C66.3232 22.6266 66.4233 23.1083 66.4202 23.6745V28.1895H64.749V23.9331C64.749 23.4591 64.6259 23.0882 64.3797 22.8205C64.1366 22.5527 63.7996 22.4189 63.3687 22.4189C63.0763 22.4189 62.8162 22.4835 62.5885 22.6127C62.3638 22.7389 62.1869 22.9221 62.0576 23.1621C61.9314 23.4022 61.8683 23.693 61.8683 24.0346ZM71.6599 21.0985V22.3912H67.5835V21.0985H71.6599ZM68.5899 19.3997H70.2611V26.0566C70.2611 26.2813 70.2949 26.4537 70.3626 26.5737C70.4334 26.6906 70.5258 26.7707 70.6396 26.8137C70.7535 26.8568 70.8797 26.8784 71.0182 26.8784C71.1228 26.8784 71.2182 26.8707 71.3044 26.8553C71.3937 26.8399 71.4614 26.8261 71.5075 26.8137L71.7891 28.1202C71.6999 28.151 71.5722 28.1848 71.406 28.2218C71.2429 28.2587 71.0428 28.2802 70.8058 28.2864C70.3873 28.2987 70.0103 28.2356 69.6748 28.0971C69.3393 27.9556 69.0731 27.737 68.8761 27.4416C68.6823 27.1461 68.5868 26.7768 68.5899 26.3336V19.3997ZM76.1205 28.3279C75.4096 28.3279 74.7956 28.1802 74.2786 27.8848C73.7646 27.5862 73.3691 27.1646 73.0921 26.6199C72.8152 26.072 72.6767 25.4273 72.6767 24.6855C72.6767 23.9561 72.8152 23.316 73.0921 22.7651C73.3722 22.2111 73.7631 21.7802 74.2647 21.4725C74.7664 21.1616 75.3558 21.0062 76.0328 21.0062C76.4699 21.0062 76.8823 21.077 77.2701 21.2186C77.6609 21.3571 78.0056 21.5725 78.3041 21.8649C78.6058 22.1573 78.8427 22.5297 79.0151 22.9821C79.1874 23.4314 79.2736 23.9669 79.2736 24.5886V25.101H73.4615V23.9746H77.6717C77.6686 23.6545 77.5994 23.3699 77.4639 23.1206C77.3285 22.8682 77.1393 22.6697 76.8961 22.525C76.6561 22.3804 76.376 22.3081 76.0559 22.3081C75.7143 22.3081 75.4142 22.3912 75.1557 22.5574C74.8972 22.7205 74.6956 22.9359 74.5509 23.2037C74.4094 23.4683 74.3371 23.7592 74.334 24.0762V25.0595C74.334 25.4719 74.4094 25.8258 74.5602 26.1213C74.711 26.4136 74.9218 26.6383 75.1926 26.7953C75.4635 26.9492 75.7805 27.0261 76.1436 27.0261C76.3868 27.0261 76.6068 26.9922 76.8038 26.9245C77.0008 26.8538 77.1716 26.7507 77.3162 26.6152C77.4609 26.4798 77.5701 26.3121 77.644 26.112L79.2044 26.2875C79.1059 26.6999 78.9181 27.06 78.6411 27.3677C78.3672 27.6724 78.0164 27.9094 77.5886 28.0787C77.1608 28.2449 76.6714 28.3279 76.1205 28.3279ZM83.7712 30.9963C83.1711 30.9963 82.6556 30.9147 82.2247 30.7516C81.7938 30.5916 81.4476 30.3761 81.186 30.1053C80.9244 29.8345 80.7428 29.5344 80.6412 29.2051L82.1462 28.8404C82.2139 28.9789 82.3124 29.1158 82.4417 29.2512C82.5709 29.3897 82.7448 29.5036 82.9633 29.5929C83.1849 29.6852 83.4634 29.7314 83.7989 29.7314C84.2729 29.7314 84.6653 29.6159 84.9761 29.3851C85.287 29.1574 85.4424 28.7819 85.4424 28.2587V26.9153H85.3593C85.2731 27.0877 85.1469 27.2646 84.9807 27.4462C84.8176 27.6278 84.6006 27.7801 84.3298 27.9032C84.062 28.0263 83.725 28.0879 83.3188 28.0879C82.774 28.0879 82.2801 27.9602 81.8369 27.7047C81.3968 27.4462 81.0459 27.0615 80.7843 26.5506C80.5258 26.0366 80.3966 25.3934 80.3966 24.6209C80.3966 23.8423 80.5258 23.1852 80.7843 22.6497C81.0459 22.1111 81.3983 21.7033 81.8415 21.4263C82.2847 21.1462 82.7787 21.0062 83.3234 21.0062C83.7389 21.0062 84.0805 21.077 84.3483 21.2186C84.6191 21.3571 84.8345 21.5248 84.9946 21.7218C85.1546 21.9157 85.2762 22.0988 85.3593 22.2711H85.4516V21.0985H87.0997V28.3049C87.0997 28.9112 86.955 29.4128 86.6657 29.8098C86.3764 30.2069 85.981 30.5038 85.4793 30.7008C84.9776 30.8978 84.4083 30.9963 83.7712 30.9963ZM83.7851 26.7768C84.139 26.7768 84.4406 26.6906 84.6899 26.5183C84.9392 26.3459 85.1285 26.0982 85.2577 25.775C85.387 25.4519 85.4516 25.0641 85.4516 24.6117C85.4516 24.1654 85.387 23.7746 85.2577 23.4391C85.1315 23.1036 84.9438 22.8436 84.6945 22.6589C84.4483 22.4712 84.1451 22.3773 83.7851 22.3773C83.4127 22.3773 83.1018 22.4743 82.8525 22.6681C82.6032 22.862 82.4155 23.1283 82.2893 23.4668C82.1631 23.8023 82.1 24.1839 82.1 24.6117C82.1 25.0456 82.1631 25.4257 82.2893 25.752C82.4186 26.0751 82.6079 26.3275 82.8571 26.5091C83.1095 26.6876 83.4188 26.7768 83.7851 26.7768ZM88.8124 28.1895V21.0985H90.4328V22.2804H90.5066C90.6359 21.871 90.8575 21.5556 91.1714 21.334C91.4884 21.1093 91.85 20.997 92.2563 20.997C92.3486 20.997 92.4517 21.0016 92.5656 21.0108C92.6825 21.017 92.7795 21.0278 92.8564 21.0431V22.5804C92.7856 22.5558 92.6733 22.5343 92.5194 22.5158C92.3686 22.4943 92.2224 22.4835 92.0809 22.4835C91.7762 22.4835 91.5023 22.5497 91.2591 22.682C91.0191 22.8113 90.8298 22.9913 90.6913 23.2221C90.5528 23.4529 90.4836 23.7192 90.4836 24.0208V28.1895H88.8124ZM95.8802 28.3326C95.4309 28.3326 95.0262 28.2525 94.6661 28.0925C94.3091 27.9294 94.0259 27.6893 93.8167 27.3723C93.6105 27.0553 93.5074 26.6645 93.5074 26.1998C93.5074 25.7997 93.5812 25.4688 93.7289 25.2072C93.8767 24.9456 94.0783 24.7363 94.3337 24.5794C94.5892 24.4224 94.8769 24.3039 95.197 24.2239C95.5201 24.1408 95.8541 24.0808 96.1988 24.0439C96.6142 24.0008 96.9512 23.9623 97.2098 23.9284C97.4683 23.8915 97.656 23.8361 97.773 23.7623C97.893 23.6853 97.953 23.5668 97.953 23.4068V23.3791C97.953 23.0313 97.8499 22.762 97.6437 22.5712C97.4375 22.3804 97.1405 22.285 96.7527 22.285C96.3434 22.285 96.0187 22.3742 95.7787 22.5527C95.5417 22.7312 95.3816 22.9421 95.2986 23.1852L93.7382 22.9636C93.8613 22.5327 94.0644 22.1726 94.3476 21.8833C94.6307 21.591 94.9769 21.3725 95.3863 21.2278C95.7956 21.0801 96.248 21.0062 96.7435 21.0062C97.0851 21.0062 97.4252 21.0462 97.7637 21.1262C98.1023 21.2063 98.4116 21.3386 98.6917 21.5233C98.9717 21.7048 99.1964 21.9526 99.3657 22.2665C99.538 22.5804 99.6242 22.9728 99.6242 23.4437V28.1895H98.0177V27.2154H97.9623C97.8607 27.4123 97.7176 27.597 97.5329 27.7694C97.3513 27.9386 97.1221 28.0756 96.8451 28.1802C96.5712 28.2818 96.2495 28.3326 95.8802 28.3326ZM96.3142 27.1046C96.6496 27.1046 96.9405 27.0384 97.1867 26.9061C97.4329 26.7707 97.6222 26.5922 97.7545 26.3706C97.8899 26.149 97.9576 25.9074 97.9576 25.6458V24.8102C97.9053 24.8533 97.8161 24.8933 97.6899 24.9302C97.5668 24.9672 97.4283 24.9995 97.2744 25.0272C97.1205 25.0549 96.9682 25.0795 96.8174 25.101C96.6666 25.1226 96.5358 25.141 96.425 25.1564C96.1757 25.1903 95.9526 25.2457 95.7556 25.3226C95.5586 25.3996 95.4032 25.5073 95.2893 25.6458C95.1754 25.7812 95.1185 25.9566 95.1185 26.1721C95.1185 26.4798 95.2308 26.7122 95.4555 26.8691C95.6802 27.0261 95.9664 27.1046 96.3142 27.1046ZM104.845 21.0985V22.3912H100.769V21.0985H104.845ZM101.775 19.3997H103.447V26.0566C103.447 26.2813 103.48 26.4537 103.548 26.5737C103.619 26.6906 103.711 26.7707 103.825 26.8137C103.939 26.8568 104.065 26.8784 104.204 26.8784C104.308 26.8784 104.404 26.8707 104.49 26.8553C104.579 26.8399 104.647 26.8261 104.693 26.8137L104.975 28.1202C104.885 28.151 104.758 28.1848 104.592 28.2218C104.428 28.2587 104.228 28.2802 103.991 28.2864C103.573 28.2987 103.196 28.2356 102.86 28.0971C102.525 27.9556 102.259 27.737 102.062 27.4416C101.868 27.1461 101.772 26.7768 101.775 26.3336V19.3997ZM106.243 28.1895V21.0985H107.914V28.1895H106.243ZM107.083 20.0922C106.819 20.0922 106.591 20.0044 106.4 19.829C106.209 19.6505 106.114 19.4366 106.114 19.1873C106.114 18.935 106.209 18.7211 106.4 18.5456C106.591 18.3671 106.819 18.2779 107.083 18.2779C107.351 18.2779 107.579 18.3671 107.767 18.5456C107.957 18.7211 108.053 18.935 108.053 19.1873C108.053 19.4366 107.957 19.6505 107.767 19.829C107.579 20.0044 107.351 20.0922 107.083 20.0922ZM112.726 28.3279C112.033 28.3279 111.433 28.1756 110.925 27.8709C110.418 27.5662 110.024 27.14 109.744 26.5922C109.467 26.0443 109.328 25.4042 109.328 24.6717C109.328 23.9392 109.467 23.2975 109.744 22.7466C110.024 22.1957 110.418 21.7679 110.925 21.4632C111.433 21.1586 112.033 21.0062 112.726 21.0062C113.418 21.0062 114.018 21.1586 114.526 21.4632C115.034 21.7679 115.426 22.1957 115.703 22.7466C115.983 23.2975 116.123 23.9392 116.123 24.6717C116.123 25.4042 115.983 26.0443 115.703 26.5922C115.426 27.14 115.034 27.5662 114.526 27.8709C114.018 28.1756 113.418 28.3279 112.726 28.3279ZM112.735 26.9892C113.11 26.9892 113.424 26.8861 113.677 26.6799C113.929 26.4706 114.117 26.1905 114.24 25.8397C114.366 25.4888 114.429 25.098 114.429 24.6671C114.429 24.2331 114.366 23.8407 114.24 23.4899C114.117 23.1359 113.929 22.8543 113.677 22.6451C113.424 22.4358 113.11 22.3311 112.735 22.3311C112.35 22.3311 112.03 22.4358 111.775 22.6451C111.522 22.8543 111.333 23.1359 111.207 23.4899C111.084 23.8407 111.022 24.2331 111.022 24.6671C111.022 25.098 111.084 25.4888 111.207 25.8397C111.333 26.1905 111.522 26.4706 111.775 26.6799C112.03 26.8861 112.35 26.9892 112.735 26.9892ZM119.213 24.0346V28.1895H117.542V21.0985H119.139V22.3034H119.222C119.385 21.9064 119.645 21.591 120.002 21.3571C120.363 21.1232 120.807 21.0062 121.337 21.0062C121.826 21.0062 122.252 21.1109 122.615 21.3201C122.982 21.5294 123.265 21.8326 123.465 22.2296C123.668 22.6266 123.768 23.1083 123.765 23.6745V28.1895H122.094V23.9331C122.094 23.4591 121.971 23.0882 121.724 22.8205C121.481 22.5527 121.144 22.4189 120.713 22.4189C120.421 22.4189 120.161 22.4835 119.933 22.6127C119.709 22.7389 119.532 22.9221 119.402 23.1621C119.276 23.4022 119.213 23.693 119.213 24.0346ZM131.068 22.9728L129.545 23.139C129.502 22.9851 129.426 22.8405 129.319 22.7051C129.214 22.5697 129.072 22.4604 128.894 22.3773C128.715 22.2942 128.497 22.2527 128.238 22.2527C127.89 22.2527 127.598 22.3281 127.361 22.4789C127.127 22.6297 127.012 22.8251 127.015 23.0652C127.012 23.2714 127.087 23.4391 127.241 23.5684C127.398 23.6976 127.657 23.8038 128.017 23.8869L129.226 24.1454C129.897 24.2901 130.396 24.5194 130.722 24.8333C131.051 25.1472 131.217 25.5581 131.221 26.0659C131.217 26.5121 131.087 26.9061 130.828 27.2477C130.573 27.5862 130.217 27.8509 129.762 28.0417C129.306 28.2325 128.783 28.3279 128.192 28.3279C127.324 28.3279 126.626 28.1464 126.096 27.7832C125.567 27.417 125.251 26.9076 125.15 26.2551L126.779 26.0982C126.853 26.4183 127.01 26.6599 127.25 26.823C127.49 26.9861 127.803 27.0676 128.187 27.0676C128.585 27.0676 128.903 26.9861 129.143 26.823C129.386 26.6599 129.508 26.4583 129.508 26.2182C129.508 26.0151 129.429 25.8474 129.272 25.715C129.118 25.5827 128.878 25.4811 128.552 25.4103L127.343 25.1564C126.663 25.0149 126.159 24.7763 125.833 24.4409C125.507 24.1023 125.345 23.6745 125.348 23.1575C125.345 22.7205 125.464 22.3419 125.704 22.0218C125.947 21.6987 126.284 21.4494 126.715 21.274C127.149 21.0955 127.649 21.0062 128.215 21.0062C129.046 21.0062 129.7 21.1832 130.177 21.5371C130.657 21.891 130.954 22.3696 131.068 22.9728Z" fill="black"/>
+<path d="M39.5732 76.5747C39.5732 75.8932 40.1257 75.3408 40.8071 75.3408H82.8896V77.8086H40.8071C40.1257 77.8086 39.5732 77.2561 39.5732 76.5747Z" fill="#DEE2E6"/>
+<rect x="84.4091" y="75.3408" width="29.6375" height="2.46775" fill="#26B5CE"/>
+<rect x="115.567" y="75.3408" width="61.5548" height="2.46775" fill="#F7AE59"/>
+<rect x="178.641" y="75.3408" width="33.4372" height="2.46775" fill="#D687FF"/>
+<path d="M213.599 75.3408H267.841C268.522 75.3408 269.075 75.8932 269.075 76.5747C269.075 77.2561 268.522 77.8086 267.841 77.8086H213.599V75.3408Z" fill="#09A953"/>
+<rect x="39.5719" y="40.6328" width="79.5849" height="8.02018" rx="4.01009" fill="#EBEBEB"/>
+<rect x="134.581" y="40.6328" width="79.5849" height="8.02018" rx="4.01009" fill="#E2E2E2"/>
+<g filter="url(#filter1_d_1424_38225)">
+<rect x="3" y="26" width="260" height="87" rx="6.16937" fill="white"/>
+</g>
+<path d="M3 86H262.731V106.359C262.731 109.766 259.968 112.528 256.561 112.528H9.16936C5.76211 112.528 3 109.766 3 106.359V86Z" fill="#FAFAFA"/>
+<path d="M3 86H262.731" stroke="#E2E2E2" stroke-width="0.616937"/>
+<path d="M25.5971 44.9249H23.8706C23.8213 44.6417 23.7305 44.3909 23.5982 44.1724C23.4658 43.9508 23.3012 43.7631 23.1042 43.6092C22.9072 43.4553 22.6826 43.3399 22.4302 43.263C22.1809 43.1829 21.9116 43.1429 21.6223 43.1429C21.1084 43.1429 20.6529 43.2722 20.2558 43.5307C19.8588 43.7862 19.548 44.1616 19.3233 44.6571C19.0987 45.1496 18.9863 45.7512 18.9863 46.4622C18.9863 47.1854 19.0987 47.7948 19.3233 48.2903C19.5511 48.7827 19.8619 49.1551 20.2558 49.4075C20.6529 49.6568 21.1068 49.7814 21.6177 49.7814C21.9009 49.7814 22.1655 49.7445 22.4117 49.6706C22.661 49.5937 22.8842 49.4814 23.0811 49.3336C23.2812 49.1859 23.4489 49.0043 23.5843 48.7889C23.7228 48.5734 23.8182 48.3272 23.8706 48.0502L25.5971 48.0595C25.5325 48.5088 25.3924 48.9305 25.177 49.3244C24.9647 49.7183 24.6861 50.0661 24.3414 50.3677C23.9967 50.6663 23.5936 50.9002 23.1319 51.0694C22.6703 51.2356 22.1578 51.3187 21.5946 51.3187C20.7637 51.3187 20.0219 51.1264 19.3695 50.7417C18.717 50.3569 18.2031 49.8014 17.8276 49.0751C17.4521 48.3488 17.2644 47.4778 17.2644 46.4622C17.2644 45.4435 17.4536 44.5725 17.8322 43.8493C18.2107 43.1229 18.7263 42.5674 19.3787 42.1827C20.0312 41.798 20.7698 41.6056 21.5946 41.6056C22.1209 41.6056 22.6103 41.6795 23.0627 41.8272C23.5151 41.975 23.9183 42.1919 24.2722 42.4782C24.6261 42.7613 24.917 43.1091 25.1447 43.5215C25.3755 43.9308 25.5263 44.3986 25.5971 44.9249ZM32.3037 44.334C32.2606 43.9308 32.079 43.6169 31.759 43.3922C31.442 43.1676 31.0296 43.0552 30.5217 43.0552C30.1647 43.0552 29.8585 43.1091 29.6031 43.2168C29.3476 43.3245 29.1522 43.4707 29.0168 43.6554C28.8814 43.84 28.8121 44.0508 28.809 44.2878C28.809 44.4848 28.8537 44.6556 28.9429 44.8002C29.0352 44.9449 29.1599 45.068 29.3168 45.1696C29.4738 45.2681 29.6477 45.3511 29.8385 45.4189C30.0293 45.4866 30.2217 45.5435 30.4156 45.5897L31.3019 45.8113C31.6589 45.8944 32.0021 46.0067 32.3314 46.1483C32.6638 46.2898 32.9608 46.4683 33.2224 46.6838C33.4871 46.8992 33.6963 47.1593 33.8502 47.464C34.0041 47.7686 34.081 48.1257 34.081 48.535C34.081 49.089 33.9395 49.5768 33.6563 49.9984C33.3732 50.417 32.9639 50.7447 32.4283 50.9817C31.8959 51.2156 31.2511 51.3326 30.494 51.3326C29.7585 51.3326 29.1199 51.2187 28.5782 50.9909C28.0396 50.7632 27.618 50.4308 27.3133 49.9938C27.0117 49.5568 26.8486 49.0243 26.8239 48.3965H28.509C28.5336 48.7258 28.6351 48.9997 28.8136 49.2182C28.9921 49.4367 29.2245 49.5998 29.5107 49.7076C29.8 49.8153 30.1232 49.8691 30.4802 49.8691C30.8526 49.8691 31.1788 49.8137 31.4589 49.7029C31.742 49.5891 31.9636 49.4321 32.1237 49.2321C32.2837 49.0289 32.3653 48.792 32.3683 48.5211C32.3653 48.2749 32.2929 48.0718 32.1514 47.9118C32.0098 47.7486 31.8113 47.6132 31.5558 47.5055C31.3035 47.3947 31.008 47.2962 30.6695 47.21L29.5938 46.9331C28.8152 46.733 28.1997 46.4299 27.7472 46.0236C27.2979 45.6143 27.0732 45.0711 27.0732 44.394C27.0732 43.8369 27.224 43.3491 27.5256 42.9306C27.8303 42.512 28.2443 42.1873 28.7675 41.9565C29.2907 41.7226 29.8831 41.6056 30.5448 41.6056C31.2158 41.6056 31.8036 41.7226 32.3083 41.9565C32.8161 42.1873 33.2147 42.5089 33.504 42.9213C33.7933 43.3307 33.9425 43.8016 33.9518 44.334H32.3037ZM36.8729 41.7349L39.3334 49.1767H39.4304L41.8864 41.7349H43.7699L40.4368 51.1895H38.3224L34.994 41.7349H36.8729ZM49.9525 41.7349V51.1895H48.2398V41.7349H49.9525ZM51.7333 51.1895V44.0985H53.3306V45.3034H53.4137C53.5614 44.8972 53.8061 44.5802 54.1477 44.3525C54.4893 44.1216 54.8971 44.0062 55.3711 44.0062C55.8512 44.0062 56.2559 44.1232 56.5852 44.3571C56.9176 44.5879 57.1515 44.9033 57.2869 45.3034H57.3608C57.5177 44.9095 57.7824 44.5956 58.1548 44.3617C58.5303 44.1247 58.975 44.0062 59.489 44.0062C60.1414 44.0062 60.6739 44.2124 61.0863 44.6248C61.4987 45.0372 61.7049 45.6389 61.7049 46.4299V51.1895H60.0291V46.6884C60.0291 46.2483 59.9122 45.9267 59.6783 45.7235C59.4444 45.5173 59.1581 45.4142 58.8196 45.4142C58.4164 45.4142 58.101 45.5404 57.8732 45.7928C57.6485 46.0421 57.5362 46.3668 57.5362 46.7669V51.1895H55.8974V46.6191C55.8974 46.2529 55.7866 45.9605 55.565 45.742C55.3465 45.5235 55.0602 45.4142 54.7063 45.4142C54.4663 45.4142 54.2477 45.4758 54.0508 45.5989C53.8538 45.7189 53.6968 45.8897 53.5799 46.1113C53.4629 46.3298 53.4045 46.5853 53.4045 46.8777V51.1895H51.7333ZM63.4003 53.8485V44.0985H65.0438V45.2711H65.1407C65.2269 45.0988 65.3484 44.9157 65.5054 44.7218C65.6624 44.5248 65.8747 44.3571 66.1425 44.2186C66.4102 44.077 66.7519 44.0062 67.1673 44.0062C67.7152 44.0062 68.2091 44.1462 68.6492 44.4263C69.0924 44.7033 69.4433 45.1142 69.7018 45.6589C69.9634 46.2006 70.0942 46.8654 70.0942 47.6532C70.0942 48.4319 69.9665 49.0936 69.711 49.6383C69.4556 50.1831 69.1078 50.5985 68.6677 50.8848C68.2276 51.171 67.729 51.3141 67.172 51.3141C66.7657 51.3141 66.4287 51.2464 66.1609 51.111C65.8932 50.9756 65.6778 50.8124 65.5146 50.6216C65.3546 50.4277 65.23 50.2446 65.1407 50.0723H65.0715V53.8485H63.4003ZM65.0391 47.644C65.0391 48.1026 65.1038 48.5042 65.233 48.8489C65.3654 49.1936 65.5546 49.4629 65.8009 49.6568C66.0501 49.8476 66.3518 49.943 66.7057 49.943C67.075 49.943 67.3843 49.8445 67.6336 49.6475C67.8829 49.4475 68.0706 49.1751 68.1968 48.8304C68.3261 48.4827 68.3907 48.0872 68.3907 47.644C68.3907 47.2039 68.3276 46.813 68.2014 46.4714C68.0752 46.1298 67.8875 45.862 67.6382 45.6681C67.3889 45.4743 67.0781 45.3773 66.7057 45.3773C66.3487 45.3773 66.0455 45.4712 65.7962 45.6589C65.547 45.8466 65.3577 46.1098 65.2284 46.4483C65.1022 46.7869 65.0391 47.1854 65.0391 47.644ZM74.6183 51.3279C73.9259 51.3279 73.3257 51.1756 72.8179 50.8709C72.3101 50.5662 71.9162 50.14 71.6361 49.5922C71.3591 49.0443 71.2206 48.4042 71.2206 47.6717C71.2206 46.9392 71.3591 46.2975 71.6361 45.7466C71.9162 45.1957 72.3101 44.7679 72.8179 44.4632C73.3257 44.1586 73.9259 44.0062 74.6183 44.0062C75.3108 44.0062 75.9109 44.1586 76.4188 44.4632C76.9266 44.7679 77.319 45.1957 77.596 45.7466C77.876 46.2975 78.0161 46.9392 78.0161 47.6717C78.0161 48.4042 77.876 49.0443 77.596 49.5922C77.319 50.14 76.9266 50.5662 76.4188 50.8709C75.9109 51.1756 75.3108 51.3279 74.6183 51.3279ZM74.6276 49.9892C75.003 49.9892 75.317 49.8861 75.5693 49.6799C75.8217 49.4706 76.0094 49.1905 76.1325 48.8397C76.2587 48.4888 76.3218 48.098 76.3218 47.6671C76.3218 47.2331 76.2587 46.8407 76.1325 46.4899C76.0094 46.1359 75.8217 45.8543 75.5693 45.6451C75.317 45.4358 75.003 45.3311 74.6276 45.3311C74.2429 45.3311 73.9228 45.4358 73.6673 45.6451C73.415 45.8543 73.2257 46.1359 73.0995 46.4899C72.9764 46.8407 72.9149 47.2331 72.9149 47.6671C72.9149 48.098 72.9764 48.4888 73.0995 48.8397C73.2257 49.1905 73.415 49.4706 73.6673 49.6799C73.9228 49.8861 74.2429 49.9892 74.6276 49.9892ZM79.4345 51.1895V44.0985H81.0549V45.2804H81.1287C81.258 44.871 81.4796 44.5556 81.7935 44.334C82.1105 44.1093 82.4721 43.997 82.8784 43.997C82.9707 43.997 83.0738 44.0016 83.1877 44.0108C83.3046 44.017 83.4016 44.0278 83.4785 44.0431V45.5804C83.4077 45.5558 83.2954 45.5343 83.1415 45.5158C82.9907 45.4943 82.8445 45.4835 82.7029 45.4835C82.3982 45.4835 82.1243 45.5497 81.8812 45.682C81.6411 45.8113 81.4519 45.9913 81.3134 46.2221C81.1749 46.4529 81.1056 46.7192 81.1056 47.0208V51.1895H79.4345ZM88.5105 44.0985V45.3912H84.4341V44.0985H88.5105ZM85.4405 42.3997H87.1117V49.0566C87.1117 49.2813 87.1455 49.4537 87.2132 49.5737C87.284 49.6906 87.3764 49.7707 87.4902 49.8137C87.6041 49.8568 87.7303 49.8784 87.8688 49.8784C87.9734 49.8784 88.0688 49.8707 88.155 49.8553C88.2442 49.8399 88.312 49.8261 88.3581 49.8137L88.6397 51.1202C88.5505 51.151 88.4228 51.1848 88.2566 51.2218C88.0934 51.2587 87.8934 51.2802 87.6564 51.2864C87.2379 51.2987 86.8608 51.2356 86.5254 51.0971C86.1899 50.9556 85.9237 50.737 85.7267 50.4416C85.5328 50.1461 85.4374 49.7768 85.4405 49.3336V42.3997ZM92.9711 51.3279C92.2602 51.3279 91.6462 51.1802 91.1292 50.8848C90.6152 50.5862 90.2197 50.1646 89.9427 49.6199C89.6657 49.072 89.5272 48.4273 89.5272 47.6855C89.5272 46.9561 89.6657 46.316 89.9427 45.7651C90.2228 45.2111 90.6137 44.7802 91.1153 44.4725C91.617 44.1616 92.2063 44.0062 92.8834 44.0062C93.3204 44.0062 93.7329 44.077 94.1206 44.2186C94.5115 44.3571 94.8562 44.5725 95.1547 44.8649C95.4563 45.1573 95.6933 45.5297 95.8657 45.9821C96.038 46.4314 96.1242 46.9669 96.1242 47.5886V48.101H90.312V46.9746H94.5223C94.5192 46.6545 94.4499 46.3699 94.3145 46.1206C94.1791 45.8682 93.9898 45.6697 93.7467 45.525C93.5066 45.3804 93.2266 45.3081 92.9065 45.3081C92.5649 45.3081 92.2648 45.3912 92.0063 45.5574C91.7478 45.7205 91.5462 45.9359 91.4015 46.2037C91.26 46.4683 91.1876 46.7592 91.1846 47.0762V48.0595C91.1846 48.4719 91.26 48.8258 91.4108 49.1213C91.5616 49.4136 91.7724 49.6383 92.0432 49.7953C92.3141 49.9492 92.6311 50.0261 92.9942 50.0261C93.2374 50.0261 93.4574 49.9922 93.6544 49.9245C93.8513 49.8538 94.0222 49.7507 94.1668 49.6152C94.3115 49.4798 94.4207 49.3121 94.4946 49.112L96.0549 49.2875C95.9565 49.6999 95.7687 50.06 95.4917 50.3677C95.2178 50.6724 94.867 50.9094 94.4392 51.0787C94.0114 51.2449 93.522 51.3279 92.9711 51.3279ZM97.538 51.1895V44.0985H99.1584V45.2804H99.2322C99.3615 44.871 99.5831 44.5556 99.897 44.334C100.214 44.1093 100.576 43.997 100.982 43.997C101.074 43.997 101.177 44.0016 101.291 44.0108C101.408 44.017 101.505 44.0278 101.582 44.0431V45.5804C101.511 45.5558 101.399 45.5343 101.245 45.5158C101.094 45.4943 100.948 45.4835 100.806 45.4835C100.502 45.4835 100.228 45.5497 99.9847 45.682C99.7447 45.8113 99.5554 45.9913 99.4169 46.2221C99.2784 46.4529 99.2092 46.7192 99.2092 47.0208V51.1895H97.538Z" fill="black"/>
+<path d="M16.5732 99.5747C16.5732 98.8932 17.1257 98.3408 17.8071 98.3408H59.8896V100.809H17.8071C17.1257 100.809 16.5732 100.256 16.5732 99.5747Z" fill="#DEE2E6"/>
+<rect x="61.4091" y="98.3408" width="29.6375" height="2.46775" fill="#26B5CE"/>
+<rect x="92.5669" y="98.3408" width="61.5548" height="2.46775" fill="#F7AE59"/>
+<rect x="155.641" y="98.3408" width="33.4372" height="2.46775" fill="#D687FF"/>
+<path d="M190.599 98.3408H244.841C245.522 98.3408 246.075 98.8932 246.075 99.5747C246.075 100.256 245.522 100.809 244.841 100.809H190.599V98.3408Z" fill="#09A953"/>
+<rect x="16.5719" y="63.6328" width="79.5849" height="8.02018" rx="4.01009" fill="#EBEBEB"/>
+<rect x="111.581" y="63.6328" width="79.5849" height="8.02018" rx="4.01009" fill="#E2E2E2"/>
+<defs>
+<filter id="filter0_d_1424_38225" x="23.5323" y="0.532252" width="264.935" height="91.9355" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.23387"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1424_38225"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1424_38225" result="shape"/>
+</filter>
+<filter id="filter1_d_1424_38225" x="0.532252" y="23.5323" width="264.935" height="91.9355" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.23387"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1424_38225"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1424_38225" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/app/public/empty-state/empty-page.svg b/app/public/empty-state/empty-page.svg
new file mode 100644
index 000000000..8246b68c1
--- /dev/null
+++ b/app/public/empty-state/empty-page.svg
@@ -0,0 +1,40 @@
+<svg width="296" height="106" viewBox="0 0 296 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_2884_60261)">
+<rect x="14" y="3.5" width="279" height="80" rx="5.5615" fill="white"/>
+<rect x="25" y="31.5" width="103" height="10" rx="5" fill="#DEE2E6"/>
+<rect x="25" y="48.5" width="230" height="7" rx="3.5" fill="#F1F3F5"/>
+<rect x="25" y="62.5" width="230" height="7" rx="3.5" fill="#F1F3F5"/>
+<path d="M31.676 17.6708H30.8188C30.7682 17.4243 30.6794 17.2077 30.5527 17.021C30.4283 16.8344 30.2762 16.6777 30.0965 16.551C29.9191 16.422 29.7221 16.3252 29.5055 16.2607C29.2889 16.1962 29.0631 16.1639 28.8281 16.1639C28.3995 16.1639 28.0113 16.2722 27.6633 16.4888C27.3177 16.7054 27.0424 17.0245 26.8373 17.4461C26.6346 17.8678 26.5332 18.3851 26.5332 18.998C26.5332 19.6109 26.6346 20.1281 26.8373 20.5498C27.0424 20.9715 27.3177 21.2906 27.6633 21.5072C28.0113 21.7238 28.3995 21.832 28.8281 21.832C29.0631 21.832 29.2889 21.7998 29.5055 21.7353C29.7221 21.6708 29.9191 21.5751 30.0965 21.4484C30.2762 21.3194 30.4283 21.1615 30.5527 20.9749C30.6794 20.786 30.7682 20.5694 30.8188 20.3252H31.676C31.6115 20.6869 31.494 21.0106 31.3234 21.2963C31.1529 21.582 30.941 21.8251 30.6875 22.0256C30.4341 22.2237 30.1495 22.3747 29.8338 22.4784C29.5205 22.582 29.1852 22.6339 28.8281 22.6339C28.2244 22.6339 27.6875 22.4864 27.2175 22.1915C26.7475 21.8966 26.3776 21.4772 26.1081 20.9334C25.8385 20.3897 25.7037 19.7445 25.7037 18.998C25.7037 18.2514 25.8385 17.6063 26.1081 17.0625C26.3776 16.5187 26.7475 16.0994 27.2175 15.8045C27.6875 15.5095 28.2244 15.3621 28.8281 15.3621C29.1852 15.3621 29.5205 15.4139 29.8338 15.5176C30.1495 15.6213 30.4341 15.7734 30.6875 15.9738C30.941 16.172 31.1529 16.4139 31.3234 16.6996C31.494 16.983 31.6115 17.3067 31.676 17.6708ZM33.7661 15.4588V22.5371H32.9504V15.4588H33.7661ZM35.26 22.5371V17.2284H36.0757V22.5371H35.26ZM35.6748 16.3436C35.5158 16.3436 35.3787 16.2895 35.2635 16.1812C35.1506 16.0729 35.0941 15.9427 35.0941 15.7906C35.0941 15.6386 35.1506 15.5084 35.2635 15.4001C35.3787 15.2918 35.5158 15.2376 35.6748 15.2376C35.8338 15.2376 35.9697 15.2918 36.0826 15.4001C36.1978 15.5084 36.2554 15.6386 36.2554 15.7906C36.2554 15.9427 36.1978 16.0729 36.0826 16.1812C35.9697 16.2895 35.8338 16.3436 35.6748 16.3436ZM39.7954 22.6477C39.2839 22.6477 38.8427 22.5348 38.4717 22.309C38.103 22.0809 37.8185 21.7629 37.618 21.3551C37.4199 20.945 37.3208 20.468 37.3208 19.9242C37.3208 19.3805 37.4199 18.9012 37.618 18.4865C37.8185 18.0694 38.0973 17.7445 38.4544 17.5118C38.8139 17.2768 39.2332 17.1593 39.7125 17.1593C39.989 17.1593 40.262 17.2054 40.5316 17.2975C40.8012 17.3897 41.0466 17.5395 41.2678 17.7468C41.489 17.9519 41.6652 18.2238 41.7966 18.5625C41.9279 18.9012 41.9936 19.3182 41.9936 19.8136V20.1593H37.9014V19.4542H41.1641C41.1641 19.1547 41.1042 18.8874 40.9843 18.6524C40.8668 18.4173 40.6986 18.2319 40.4797 18.0959C40.2632 17.96 40.0074 17.892 39.7125 17.892C39.3876 17.892 39.1065 17.9726 38.8692 18.1339C38.6341 18.2929 38.4533 18.5003 38.3265 18.756C38.1998 19.0118 38.1365 19.286 38.1365 19.5786V20.0487C38.1365 20.4496 38.2056 20.7894 38.3438 21.0682C38.4844 21.3447 38.6791 21.5556 38.9279 21.7007C39.1768 21.8436 39.4659 21.915 39.7954 21.915C40.0097 21.915 40.2033 21.885 40.3761 21.8251C40.5512 21.7629 40.7021 21.6708 40.8288 21.5486C40.9555 21.4242 41.0535 21.2698 41.1226 21.0855L41.9106 21.3067C41.8277 21.574 41.6883 21.809 41.4924 22.0118C41.2966 22.2122 41.0546 22.3689 40.7666 22.4818C40.4786 22.5924 40.1549 22.6477 39.7954 22.6477ZM44.05 19.3436V22.5371H43.2343V17.2284H44.0223V18.0579H44.0915C44.2159 17.7883 44.4048 17.5717 44.6583 17.4081C44.9117 17.2422 45.2389 17.1593 45.6398 17.1593C45.9993 17.1593 46.3138 17.233 46.5834 17.3805C46.853 17.5256 47.0626 17.7468 47.2124 18.0441C47.3622 18.339 47.437 18.7123 47.437 19.1639V22.5371H46.6214V19.2192C46.6214 18.8021 46.5131 18.4772 46.2965 18.2445C46.0799 18.0095 45.7827 17.892 45.4048 17.892C45.1444 17.892 44.9117 17.9484 44.7067 18.0613C44.5039 18.1743 44.3438 18.339 44.2263 18.5556C44.1087 18.7722 44.05 19.0348 44.05 19.3436ZM51.2363 17.2284V17.9196H48.4851V17.2284H51.2363ZM49.287 15.9565H50.1026V21.0164C50.1026 21.2468 50.136 21.4196 50.2029 21.5348C50.272 21.6477 50.3595 21.7238 50.4655 21.7629C50.5738 21.7998 50.6879 21.8182 50.8077 21.8182C50.8976 21.8182 50.9713 21.8136 51.0289 21.8044C51.0865 21.7929 51.1326 21.7837 51.1671 21.7767L51.333 22.5095C51.2777 22.5302 51.2005 22.5509 51.1015 22.5717C51.0024 22.5947 50.8768 22.6062 50.7247 22.6062C50.4943 22.6062 50.2685 22.5567 50.0473 22.4576C49.8284 22.3585 49.6464 22.2076 49.5013 22.0049C49.3584 21.8021 49.287 21.5463 49.287 21.2376V15.9565ZM55.2005 22.5371V17.2284H55.9885V18.0579H56.0576C56.1682 17.7745 56.3468 17.5544 56.5933 17.3978C56.8399 17.2388 57.136 17.1593 57.4816 17.1593C57.8318 17.1593 58.1233 17.2388 58.356 17.3978C58.591 17.5544 58.7742 17.7745 58.9055 18.0579H58.9608C59.0968 17.7837 59.3007 17.566 59.5726 17.4047C59.8445 17.2411 60.1705 17.1593 60.5507 17.1593C61.0253 17.1593 61.4136 17.3079 61.7154 17.6051C62.0173 17.9001 62.1682 18.3597 62.1682 18.9841V22.5371H61.3525V18.9841C61.3525 18.5924 61.2454 18.3125 61.0311 18.1443C60.8168 17.9761 60.5645 17.892 60.2742 17.892C59.9009 17.892 59.6118 18.0049 59.4067 18.2307C59.2016 18.4542 59.0991 18.7376 59.0991 19.0809V22.5371H58.2696V18.9012C58.2696 18.5994 58.1717 18.3563 57.9758 18.1719C57.78 17.9853 57.5277 17.892 57.2189 17.892C57.0069 17.892 56.8088 17.9484 56.6245 18.0613C56.4424 18.1743 56.295 18.3309 56.1821 18.5314C56.0715 18.7295 56.0162 18.9588 56.0162 19.2192V22.5371H55.2005ZM65.8853 22.6477C65.3738 22.6477 64.9326 22.5348 64.5616 22.309C64.1929 22.0809 63.9084 21.7629 63.7079 21.3551C63.5098 20.945 63.4107 20.468 63.4107 19.9242C63.4107 19.3805 63.5098 18.9012 63.7079 18.4865C63.9084 18.0694 64.1872 17.7445 64.5443 17.5118C64.9038 17.2768 65.3231 17.1593 65.8024 17.1593C66.0789 17.1593 66.3519 17.2054 66.6215 17.2975C66.8911 17.3897 67.1364 17.5395 67.3576 17.7468C67.5788 17.9519 67.7551 18.2238 67.8864 18.5625C68.0178 18.9012 68.0834 19.3182 68.0834 19.8136V20.1593H63.9913V19.4542H67.254C67.254 19.1547 67.194 18.8874 67.0742 18.6524C66.9567 18.4173 66.7885 18.2319 66.5696 18.0959C66.353 17.96 66.0973 17.892 65.8024 17.892C65.4775 17.892 65.1964 17.9726 64.959 18.1339C64.724 18.2929 64.5432 18.5003 64.4164 18.756C64.2897 19.0118 64.2263 19.286 64.2263 19.5786V20.0487C64.2263 20.4496 64.2955 20.7894 64.4337 21.0682C64.5743 21.3447 64.769 21.5556 65.0178 21.7007C65.2666 21.8436 65.5558 21.915 65.8853 21.915C66.0996 21.915 66.2931 21.885 66.4659 21.8251C66.6411 21.7629 66.792 21.6708 66.9187 21.5486C67.0454 21.4242 67.1434 21.2698 67.2125 21.0855L68.0005 21.3067C67.9175 21.574 67.7781 21.809 67.5823 22.0118C67.3864 22.2122 67.1445 22.3689 66.8565 22.4818C66.5685 22.5924 66.2448 22.6477 65.8853 22.6477ZM71.55 22.6477C71.0385 22.6477 70.5972 22.5348 70.2263 22.309C69.8576 22.0809 69.5731 21.7629 69.3726 21.3551C69.1744 20.945 69.0754 20.468 69.0754 19.9242C69.0754 19.3805 69.1744 18.9012 69.3726 18.4865C69.5731 18.0694 69.8519 17.7445 70.209 17.5118C70.5684 17.2768 70.9878 17.1593 71.467 17.1593C71.7435 17.1593 72.0166 17.2054 72.2862 17.2975C72.5557 17.3897 72.8011 17.5395 73.0223 17.7468C73.2435 17.9519 73.4198 18.2238 73.5511 18.5625C73.6825 18.9012 73.7481 19.3182 73.7481 19.8136V20.1593H69.656V19.4542H72.9186C72.9186 19.1547 72.8587 18.8874 72.7389 18.6524C72.6214 18.4173 72.4532 18.2319 72.2343 18.0959C72.0177 17.96 71.762 17.892 71.467 17.892C71.1422 17.892 70.8611 17.9726 70.6237 18.1339C70.3887 18.2929 70.2078 18.5003 70.0811 18.756C69.9544 19.0118 69.891 19.286 69.891 19.5786V20.0487C69.891 20.4496 69.9601 20.7894 70.0984 21.0682C70.2389 21.3447 70.4336 21.5556 70.6825 21.7007C70.9313 21.8436 71.2205 21.915 71.55 21.915C71.7643 21.915 71.9578 21.885 72.1306 21.8251C72.3057 21.7629 72.4567 21.6708 72.5834 21.5486C72.7101 21.4242 72.808 21.2698 72.8772 21.0855L73.6652 21.3067C73.5822 21.574 73.4428 21.809 73.247 22.0118C73.0511 22.2122 72.8092 22.3689 72.5212 22.4818C72.2332 22.5924 71.9094 22.6477 71.55 22.6477ZM77.2976 17.2284V17.9196H74.5465V17.2284H77.2976ZM75.3483 15.9565H76.164V21.0164C76.164 21.2468 76.1974 21.4196 76.2642 21.5348C76.3334 21.6477 76.4209 21.7238 76.5269 21.7629C76.6352 21.7998 76.7493 21.8182 76.8691 21.8182C76.9589 21.8182 77.0327 21.8136 77.0903 21.8044C77.1479 21.7929 77.1939 21.7837 77.2285 21.7767L77.3944 22.5095C77.3391 22.5302 77.2619 22.5509 77.1628 22.5717C77.0638 22.5947 76.9382 22.6062 76.7861 22.6062C76.5557 22.6062 76.3299 22.5567 76.1087 22.4576C75.8898 22.3585 75.7078 22.2076 75.5626 22.0049C75.4198 21.8021 75.3483 21.5463 75.3483 21.2376V15.9565ZM78.5246 22.5371V17.2284H79.3402V22.5371H78.5246ZM78.9393 16.3436C78.7803 16.3436 78.6432 16.2895 78.528 16.1812C78.4151 16.0729 78.3587 15.9427 78.3587 15.7906C78.3587 15.6386 78.4151 15.5084 78.528 15.4001C78.6432 15.2918 78.7803 15.2376 78.9393 15.2376C79.0983 15.2376 79.2342 15.2918 79.3472 15.4001C79.4624 15.5084 79.52 15.6386 79.52 15.7906C79.52 15.9427 79.4624 16.0729 79.3472 16.1812C79.2342 16.2895 79.0983 16.3436 78.9393 16.3436ZM81.6498 19.3436V22.5371H80.8342V17.2284H81.6222V18.0579H81.6913C81.8157 17.7883 82.0047 17.5717 82.2581 17.4081C82.5116 17.2422 82.8388 17.1593 83.2397 17.1593C83.5991 17.1593 83.9136 17.233 84.1832 17.3805C84.4528 17.5256 84.6625 17.7468 84.8122 18.0441C84.962 18.339 85.0369 18.7123 85.0369 19.1639V22.5371H84.2212V19.2192C84.2212 18.8021 84.1129 18.4772 83.8964 18.2445C83.6798 18.0095 83.3825 17.892 83.0047 17.892C82.7443 17.892 82.5116 17.9484 82.3065 18.0613C82.1037 18.1743 81.9436 18.339 81.8261 18.5556C81.7086 18.7722 81.6498 19.0348 81.6498 19.3436ZM88.6702 24.6385C88.2762 24.6385 87.9375 24.5878 87.6541 24.4864C87.3707 24.3873 87.1345 24.256 86.9456 24.0924C86.7589 23.9311 86.6103 23.7583 86.4997 23.574L87.1495 23.1177C87.2232 23.2145 87.3165 23.3251 87.4294 23.4495C87.5423 23.5763 87.6967 23.6857 87.8926 23.7779C88.0907 23.8723 88.3499 23.9196 88.6702 23.9196C89.0988 23.9196 89.4525 23.8159 89.7313 23.6085C90.0101 23.4012 90.1495 23.0763 90.1495 22.6339V21.5556H90.0803C90.0204 21.6523 89.9352 21.7721 89.8246 21.915C89.7163 22.0555 89.5596 22.1811 89.3545 22.2917C89.1518 22.4 88.8776 22.4542 88.532 22.4542C88.1034 22.4542 87.7186 22.3528 87.3776 22.15C87.0389 21.9473 86.7705 21.6523 86.5723 21.2652C86.3765 20.8781 86.2785 20.4081 86.2785 19.8551C86.2785 19.3113 86.3742 18.8378 86.5654 18.4346C86.7566 18.0291 87.0228 17.7157 87.3638 17.4945C87.7048 17.271 88.0988 17.1593 88.5458 17.1593C88.8914 17.1593 89.1656 17.2169 89.3684 17.3321C89.5734 17.445 89.7301 17.574 89.8384 17.7192C89.949 17.862 90.0343 17.9796 90.0942 18.0717H90.1771V17.2284H90.9651V22.6892C90.9651 23.1454 90.8614 23.5164 90.6541 23.8021C90.449 24.0901 90.1725 24.3009 89.8246 24.4346C89.479 24.5705 89.0942 24.6385 88.6702 24.6385ZM88.6426 21.7214C88.9697 21.7214 89.2462 21.6466 89.472 21.4968C89.6979 21.347 89.8695 21.1316 89.987 20.8505C90.1045 20.5694 90.1633 20.233 90.1633 19.8413C90.1633 19.4588 90.1057 19.1212 89.9905 18.8286C89.8753 18.536 89.7048 18.3067 89.479 18.1408C89.2532 17.9749 88.9744 17.892 88.6426 17.892C88.2969 17.892 88.0089 17.9796 87.7785 18.1547C87.5504 18.3298 87.3788 18.5648 87.2635 18.8597C87.1506 19.1547 87.0942 19.4818 87.0942 19.8413C87.0942 20.2099 87.1518 20.536 87.267 20.8194C87.3845 21.1005 87.5573 21.3217 87.7854 21.483C88.0158 21.642 88.3016 21.7214 88.6426 21.7214ZM96.0112 19.3436V22.5371H95.1955V17.2284H95.9835V18.0579H96.0526C96.1771 17.7883 96.366 17.5717 96.6194 17.4081C96.8729 17.2422 97.2001 17.1593 97.601 17.1593C97.9604 17.1593 98.275 17.233 98.5445 17.3805C98.8141 17.5256 99.0238 17.7468 99.1736 18.0441C99.3233 18.339 99.3982 18.7123 99.3982 19.1639V22.5371H98.5826V19.2192C98.5826 18.8021 98.4743 18.4772 98.2577 18.2445C98.0411 18.0095 97.7439 17.892 97.366 17.892C97.1056 17.892 96.8729 17.9484 96.6678 18.0613C96.4651 18.1743 96.3049 18.339 96.1874 18.5556C96.0699 18.7722 96.0112 19.0348 96.0112 19.3436ZM103.045 22.6477C102.566 22.6477 102.146 22.5337 101.784 22.3055C101.424 22.0774 101.143 21.7583 100.941 21.3482C100.74 20.938 100.64 20.4588 100.64 19.9104C100.64 19.3574 100.74 18.8747 100.941 18.4623C101.143 18.0498 101.424 17.7296 101.784 17.5014C102.146 17.2733 102.566 17.1593 103.045 17.1593C103.525 17.1593 103.944 17.2733 104.303 17.5014C104.665 17.7296 104.946 18.0498 105.147 18.4623C105.349 18.8747 105.451 19.3574 105.451 19.9104C105.451 20.4588 105.349 20.938 105.147 21.3482C104.946 21.7583 104.665 22.0774 104.303 22.3055C103.944 22.5337 103.525 22.6477 103.045 22.6477ZM103.045 21.915C103.409 21.915 103.709 21.8217 103.944 21.635C104.179 21.4484 104.353 21.203 104.466 20.8989C104.579 20.5947 104.635 20.2652 104.635 19.9104C104.635 19.5556 104.579 19.2249 104.466 18.9185C104.353 18.612 104.179 18.3643 103.944 18.1754C103.709 17.9865 103.409 17.892 103.045 17.892C102.681 17.892 102.382 17.9865 102.147 18.1754C101.912 18.3643 101.738 18.612 101.625 18.9185C101.512 19.2249 101.456 19.5556 101.456 19.9104C101.456 20.2652 101.512 20.5947 101.625 20.8989C101.738 21.203 101.912 21.4484 102.147 21.635C102.382 21.8217 102.681 21.915 103.045 21.915ZM109.005 17.2284V17.9196H106.254V17.2284H109.005ZM107.055 15.9565H107.871V21.0164C107.871 21.2468 107.904 21.4196 107.971 21.5348C108.04 21.6477 108.128 21.7238 108.234 21.7629C108.342 21.7998 108.456 21.8182 108.576 21.8182C108.666 21.8182 108.74 21.8136 108.797 21.8044C108.855 21.7929 108.901 21.7837 108.936 21.7767L109.101 22.5095C109.046 22.5302 108.969 22.5509 108.87 22.5717C108.771 22.5947 108.645 22.6062 108.493 22.6062C108.263 22.6062 108.037 22.5567 107.816 22.4576C107.597 22.3585 107.415 22.2076 107.27 22.0049C107.127 21.8021 107.055 21.5463 107.055 21.2376V15.9565ZM112.4 22.6477C111.889 22.6477 111.448 22.5348 111.077 22.309C110.708 22.0809 110.423 21.7629 110.223 21.3551C110.025 20.945 109.926 20.468 109.926 19.9242C109.926 19.3805 110.025 18.9012 110.223 18.4865C110.423 18.0694 110.702 17.7445 111.059 17.5118C111.419 17.2768 111.838 17.1593 112.317 17.1593C112.594 17.1593 112.867 17.2054 113.137 17.2975C113.406 17.3897 113.652 17.5395 113.873 17.7468C114.094 17.9519 114.27 18.2238 114.402 18.5625C114.533 18.9012 114.599 19.3182 114.599 19.8136V20.1593H110.506V19.4542H113.769C113.769 19.1547 113.709 18.8874 113.589 18.6524C113.472 18.4173 113.304 18.2319 113.085 18.0959C112.868 17.96 112.612 17.892 112.317 17.892C111.993 17.892 111.711 17.9726 111.474 18.1339C111.239 18.2929 111.058 18.5003 110.932 18.756C110.805 19.0118 110.741 19.286 110.741 19.5786V20.0487C110.741 20.4496 110.811 20.7894 110.949 21.0682C111.089 21.3447 111.284 21.5556 111.533 21.7007C111.782 21.8436 112.071 21.915 112.4 21.915C112.615 21.915 112.808 21.885 112.981 21.8251C113.156 21.7629 113.307 21.6708 113.434 21.5486C113.561 21.4242 113.658 21.2698 113.728 21.0855L114.516 21.3067C114.433 21.574 114.293 21.809 114.097 22.0118C113.902 22.2122 113.66 22.3689 113.372 22.4818C113.084 22.5924 112.76 22.6477 112.4 22.6477ZM119.6 18.4173L118.867 18.6247C118.821 18.5026 118.753 18.3839 118.663 18.2687C118.575 18.1512 118.456 18.0544 118.304 17.9784C118.151 17.9024 117.957 17.8643 117.719 17.8643C117.395 17.8643 117.124 17.9392 116.907 18.089C116.693 18.2365 116.586 18.4242 116.586 18.6524C116.586 18.8551 116.66 19.0153 116.807 19.1328C116.954 19.2503 117.185 19.3482 117.498 19.4265L118.286 19.6201C118.761 19.7353 119.115 19.9116 119.347 20.1489C119.58 20.3839 119.696 20.6869 119.696 21.0579C119.696 21.362 119.609 21.6339 119.434 21.8735C119.261 22.1132 119.019 22.3021 118.708 22.4403C118.397 22.5786 118.035 22.6477 117.623 22.6477C117.081 22.6477 116.633 22.5302 116.278 22.2952C115.923 22.0602 115.699 21.7168 115.604 21.2652L116.378 21.0717C116.452 21.3574 116.592 21.5717 116.797 21.7145C117.004 21.8574 117.275 21.9288 117.609 21.9288C117.989 21.9288 118.291 21.8482 118.514 21.6869C118.74 21.5233 118.853 21.3274 118.853 21.0993C118.853 20.915 118.789 20.7606 118.66 20.6362C118.531 20.5095 118.332 20.415 118.065 20.3528L117.18 20.1454C116.694 20.0302 116.337 19.8517 116.109 19.6097C115.883 19.3655 115.77 19.0602 115.77 18.6938C115.77 18.3943 115.854 18.1293 116.022 17.8989C116.193 17.6685 116.425 17.4876 116.717 17.3563C117.012 17.225 117.346 17.1593 117.719 17.1593C118.245 17.1593 118.657 17.2745 118.957 17.5049C119.259 17.7353 119.473 18.0395 119.6 18.4173Z" fill="#858E96"/>
+<path d="M278 40.668C277.118 40.668 276.342 40.3607 275.672 39.7461C275.002 39.1315 274.667 38.2999 274.667 37.2513C274.667 36.5846 274.922 35.8607 275.433 35.0794C275.943 34.2982 276.719 33.4527 277.761 32.543C277.795 32.5152 277.834 32.4926 277.875 32.4753C277.917 32.4579 277.959 32.4492 278 32.4492C278.042 32.4492 278.084 32.4579 278.125 32.4753C278.167 32.4926 278.205 32.5152 278.24 32.543C279.282 33.4527 280.058 34.2982 280.568 35.0794C281.078 35.8607 281.334 36.5846 281.334 37.2513C281.334 38.2999 280.999 39.1315 280.328 39.7461C279.658 40.3607 278.882 40.668 278 40.668ZM278 40.043C278.764 40.043 279.407 39.7791 279.927 39.2513C280.448 38.7235 280.709 38.0569 280.709 37.2513C280.709 36.7027 280.478 36.0794 280.016 35.3815C279.554 34.6836 278.882 33.9457 278 33.168C277.118 33.9457 276.447 34.6836 275.985 35.3815C275.523 36.0794 275.292 36.7027 275.292 37.2513C275.292 38.0569 275.552 38.7235 276.073 39.2513C276.594 39.7791 277.236 40.043 278 40.043ZM277.99 39.3346C278.101 39.3346 278.186 39.3155 278.245 39.2773C278.304 39.2391 278.334 39.1819 278.334 39.1055C278.334 39.0291 278.304 38.9701 278.245 38.9284C278.186 38.8867 278.098 38.8659 277.979 38.8659C277.688 38.8659 277.391 38.7739 277.089 38.5898C276.787 38.4058 276.594 38.0812 276.511 37.6159C276.497 37.5534 276.466 37.503 276.417 37.4648C276.368 37.4266 276.316 37.4076 276.261 37.4076C276.184 37.4076 276.125 37.4371 276.084 37.4961C276.042 37.5551 276.028 37.6159 276.042 37.6784C276.146 38.2617 276.393 38.6836 276.782 38.944C277.17 39.2044 277.573 39.3346 277.99 39.3346Z" fill="#858E96"/>
+</g>
+<g filter="url(#filter1_d_2884_60261)">
+<rect x="3" y="22.5" width="279" height="80" rx="5.5615" fill="white"/>
+<rect x="14" y="50.5" width="103" height="10" rx="5" fill="#DEE2E6"/>
+<rect x="14" y="67.5" width="230" height="7" rx="3.5" fill="#F1F3F5"/>
+<rect x="14" y="81.5" width="230" height="7" rx="3.5" fill="#F1F3F5"/>
+<path d="M14.9802 41.5371V34.4588H19.252V35.2192H15.8373V37.6109H19.0308V38.3712H15.8373V40.7767H19.3073V41.5371H14.9802ZM25.0273 36.2284L23.0642 41.5371H22.2347L20.2716 36.2284H21.1564L22.6218 40.4588H22.6771L24.1425 36.2284H25.0273ZM28.1396 41.6477C27.6281 41.6477 27.1869 41.5348 26.8159 41.309C26.4472 41.0809 26.1627 40.7629 25.9622 40.3551C25.7641 39.945 25.665 39.468 25.665 38.9242C25.665 38.3805 25.7641 37.9012 25.9622 37.4865C26.1627 37.0694 26.4415 36.7445 26.7986 36.5118C27.1581 36.2768 27.5774 36.1593 28.0567 36.1593C28.3332 36.1593 28.6062 36.2054 28.8758 36.2975C29.1454 36.3897 29.3907 36.5395 29.6119 36.7468C29.8331 36.9519 30.0094 37.2238 30.1407 37.5625C30.2721 37.9012 30.3377 38.3182 30.3377 38.8136V39.1593H26.2456V38.4542H29.5083C29.5083 38.1547 29.4484 37.8874 29.3285 37.6524C29.211 37.4173 29.0428 37.2319 28.8239 37.0959C28.6073 36.96 28.3516 36.892 28.0567 36.892C27.7318 36.892 27.4507 36.9726 27.2134 37.1339C26.9783 37.2929 26.7975 37.5003 26.6707 37.756C26.544 38.0118 26.4806 38.286 26.4806 38.5786V39.0487C26.4806 39.4496 26.5498 39.7894 26.688 40.0682C26.8286 40.3447 27.0233 40.5556 27.2721 40.7007C27.521 40.8436 27.8101 40.915 28.1396 40.915C28.3539 40.915 28.5474 40.885 28.7202 40.8251C28.8954 40.7629 29.0463 40.6708 29.173 40.5486C29.2997 40.4242 29.3977 40.2698 29.4668 40.0855L30.2548 40.3067C30.1718 40.574 30.0324 40.809 29.8366 41.0118C29.6407 41.2122 29.3988 41.3689 29.1108 41.4818C28.8228 41.5924 28.4991 41.6477 28.1396 41.6477ZM32.3942 38.3436V41.5371H31.5785V36.2284H32.3665V37.0579H32.4356C32.5601 36.7883 32.749 36.5717 33.0025 36.4081C33.2559 36.2422 33.5831 36.1593 33.984 36.1593C34.3435 36.1593 34.658 36.233 34.9276 36.3805C35.1971 36.5256 35.4068 36.7468 35.5566 37.0441C35.7064 37.339 35.7812 37.7123 35.7812 38.1639V41.5371H34.9656V38.2192C34.9656 37.8021 34.8573 37.4772 34.6407 37.2445C34.4241 37.0095 34.1269 36.892 33.749 36.892C33.4886 36.892 33.2559 36.9484 33.0508 37.0613C32.8481 37.1743 32.6879 37.339 32.5704 37.5556C32.4529 37.7722 32.3942 38.0348 32.3942 38.3436ZM37.2717 41.5371V36.2284H38.0874V41.5371H37.2717ZM37.6865 35.3436C37.5275 35.3436 37.3904 35.2895 37.2752 35.1812C37.1623 35.0729 37.1058 34.9427 37.1058 34.7906C37.1058 34.6386 37.1623 34.5084 37.2752 34.4001C37.3904 34.2918 37.5275 34.2376 37.6865 34.2376C37.8454 34.2376 37.9814 34.2918 38.0943 34.4001C38.2095 34.5084 38.2671 34.6386 38.2671 34.7906C38.2671 34.9427 38.2095 35.0729 38.0943 35.1812C37.9814 35.2895 37.8454 35.3436 37.6865 35.3436ZM40.397 38.3436V41.5371H39.5813V36.2284H40.3693V37.0579H40.4384C40.5629 36.7883 40.7518 36.5717 41.0053 36.4081C41.2587 36.2422 41.5859 36.1593 41.9868 36.1593C42.3463 36.1593 42.6608 36.233 42.9304 36.3805C43.1999 36.5256 43.4096 36.7468 43.5594 37.0441C43.7092 37.339 43.784 37.7123 43.784 38.1639V41.5371H42.9684V38.2192C42.9684 37.8021 42.8601 37.4772 42.6435 37.2445C42.4269 37.0095 42.1297 36.892 41.7518 36.892C41.4914 36.892 41.2587 36.9484 41.0536 37.0613C40.8509 37.1743 40.6907 37.339 40.5732 37.5556C40.4557 37.7722 40.397 38.0348 40.397 38.3436ZM47.4174 43.6385C47.0233 43.6385 46.6846 43.5878 46.4012 43.4864C46.1178 43.3873 45.8817 43.256 45.6927 43.0924C45.5061 42.9311 45.3575 42.7583 45.2469 42.574L45.8966 42.1177C45.9704 42.2145 46.0637 42.3251 46.1766 42.4495C46.2895 42.5763 46.4439 42.6857 46.6397 42.7779C46.8379 42.8723 47.0971 42.9196 47.4174 42.9196C47.8459 42.9196 48.1996 42.8159 48.4784 42.6085C48.7572 42.4012 48.8966 42.0763 48.8966 41.6339V40.5556H48.8275C48.7676 40.6523 48.6823 40.7721 48.5717 40.915C48.4634 41.0555 48.3067 41.1811 48.1017 41.2917C47.8989 41.4 47.6247 41.4542 47.2791 41.4542C46.8505 41.4542 46.4657 41.3528 46.1247 41.15C45.786 40.9473 45.5176 40.6523 45.3194 40.2652C45.1236 39.8781 45.0257 39.4081 45.0257 38.8551C45.0257 38.3113 45.1213 37.8378 45.3125 37.4346C45.5038 37.0291 45.7699 36.7157 46.1109 36.4945C46.4519 36.271 46.8459 36.1593 47.2929 36.1593C47.6385 36.1593 47.9127 36.2169 48.1155 36.3321C48.3206 36.445 48.4772 36.574 48.5855 36.7192C48.6961 36.862 48.7814 36.9796 48.8413 37.0717H48.9242V36.2284H49.7123V41.6892C49.7123 42.1454 49.6086 42.5164 49.4012 42.8021C49.1961 43.0901 48.9196 43.3009 48.5717 43.4346C48.2261 43.5705 47.8413 43.6385 47.4174 43.6385ZM47.3897 40.7214C47.7169 40.7214 47.9934 40.6466 48.2192 40.4968C48.445 40.347 48.6166 40.1316 48.7342 39.8505C48.8517 39.5694 48.9104 39.233 48.9104 38.8413C48.9104 38.4588 48.8528 38.1212 48.7376 37.8286C48.6224 37.536 48.4519 37.3067 48.2261 37.1408C48.0003 36.9749 47.7215 36.892 47.3897 36.892C47.0441 36.892 46.7561 36.9796 46.5257 37.1547C46.2975 37.3298 46.1259 37.5648 46.0107 37.8597C45.8978 38.1547 45.8413 38.4818 45.8413 38.8413C45.8413 39.2099 45.8989 39.536 46.0141 39.8194C46.1317 40.1005 46.3045 40.3217 46.5326 40.483C46.763 40.642 47.0487 40.7214 47.3897 40.7214ZM57.9242 36.2284C57.8827 35.8782 57.7145 35.6063 57.4196 35.4127C57.1246 35.2192 56.7629 35.1224 56.3343 35.1224C56.021 35.1224 55.7468 35.1731 55.5117 35.2745C55.279 35.3759 55.097 35.5153 54.9657 35.6927C54.8366 35.8701 54.7721 36.0717 54.7721 36.2975C54.7721 36.4865 54.817 36.6489 54.9069 36.7849C54.9991 36.9185 55.1166 37.0302 55.2594 37.1201C55.4023 37.2077 55.5521 37.2802 55.7087 37.3378C55.8654 37.3931 56.0094 37.4381 56.1408 37.4726L56.8597 37.6662C57.044 37.7146 57.249 37.7814 57.4749 37.8666C57.703 37.9519 57.9207 38.0683 58.1281 38.2157C58.3377 38.3609 58.5106 38.5475 58.6465 38.7756C58.7824 39.0037 58.8504 39.2837 58.8504 39.6155C58.8504 39.998 58.7502 40.3436 58.5497 40.6523C58.3516 40.9611 58.0613 41.2065 57.6788 41.3885C57.2986 41.5705 56.8366 41.6615 56.2928 41.6615C55.7859 41.6615 55.347 41.5797 54.976 41.4161C54.6074 41.2526 54.3171 41.0244 54.1051 40.7318C53.8954 40.4392 53.7767 40.0993 53.7491 39.7122H54.6339C54.6569 39.9795 54.7468 40.2007 54.9035 40.3758C55.0624 40.5486 55.2629 40.6777 55.5048 40.7629C55.7491 40.8459 56.0117 40.8873 56.2928 40.8873C56.62 40.8873 56.9138 40.8344 57.1742 40.7284C57.4345 40.6201 57.6408 40.4703 57.7928 40.2791C57.9449 40.0855 58.0209 39.8597 58.0209 39.6016C58.0209 39.3666 57.9553 39.1754 57.8239 39.0279C57.6926 38.8805 57.5198 38.7606 57.3055 38.6685C57.0912 38.5763 56.8597 38.4957 56.6108 38.4265L55.7398 38.1777C55.1869 38.0187 54.7491 37.7918 54.4265 37.4968C54.1039 37.2019 53.9426 36.816 53.9426 36.339C53.9426 35.9427 54.0498 35.5971 54.2641 35.3021C54.4806 35.0049 54.771 34.7745 55.135 34.6109C55.5014 34.445 55.9104 34.3621 56.362 34.3621C56.8182 34.3621 57.2237 34.4439 57.5785 34.6075C57.9334 34.7687 58.2145 34.9899 58.4218 35.271C58.6315 35.5521 58.7421 35.8713 58.7536 36.2284H57.9242ZM62.4578 36.2284V36.9196H59.7067V36.2284H62.4578ZM60.5085 34.9565H61.3242V40.0164C61.3242 40.2468 61.3576 40.4196 61.4244 40.5348C61.4935 40.6477 61.5811 40.7238 61.6871 40.7629C61.7954 40.7998 61.9094 40.8182 62.0292 40.8182C62.1191 40.8182 62.1928 40.8136 62.2504 40.8044C62.308 40.7929 62.3541 40.7837 62.3887 40.7767L62.5546 41.5095C62.4993 41.5302 62.4221 41.5509 62.323 41.5717C62.2239 41.5947 62.0984 41.6062 61.9463 41.6062C61.7159 41.6062 61.4901 41.5567 61.2689 41.4576C61.05 41.3585 60.868 41.2076 60.7228 41.0049C60.5799 40.8021 60.5085 40.5463 60.5085 40.2376V34.9565ZM65.247 41.6615C64.9106 41.6615 64.6053 41.5982 64.3311 41.4714C64.0569 41.3424 63.8391 41.1569 63.6778 40.915C63.5166 40.6708 63.4359 40.3758 63.4359 40.0302C63.4359 39.7261 63.4958 39.4795 63.6156 39.2906C63.7354 39.0993 63.8956 38.9496 64.096 38.8413C64.2965 38.733 64.5177 38.6523 64.7596 38.5994C65.0039 38.5441 65.2493 38.5003 65.4958 38.468C65.8184 38.4265 66.0799 38.3954 66.2804 38.3747C66.4831 38.3517 66.6306 38.3136 66.7227 38.2606C66.8172 38.2076 66.8644 38.1155 66.8644 37.9841V37.9565C66.8644 37.6155 66.7711 37.3505 66.5845 37.1616C66.4002 36.9726 66.1202 36.8782 65.7446 36.8782C65.3552 36.8782 65.05 36.9634 64.8288 37.1339C64.6076 37.3044 64.452 37.4865 64.3622 37.68L63.588 37.4035C63.7262 37.0809 63.9106 36.8298 64.141 36.6501C64.3737 36.468 64.6271 36.3413 64.9013 36.2699C65.1778 36.1961 65.4497 36.1593 65.717 36.1593C65.8875 36.1593 66.0834 36.18 66.3045 36.2215C66.528 36.2607 66.7435 36.3425 66.9509 36.4669C67.1605 36.5913 67.3345 36.7791 67.4727 37.0302C67.611 37.2814 67.6801 37.6178 67.6801 38.0394V41.5371H66.8644V40.8182H66.823C66.7677 40.9334 66.6755 41.0567 66.5465 41.188C66.4174 41.3194 66.2458 41.4311 66.0315 41.5233C65.8172 41.6154 65.5557 41.6615 65.247 41.6615ZM65.3714 40.9288C65.694 40.9288 65.9658 40.8655 66.187 40.7387C66.4105 40.612 66.5787 40.4484 66.6916 40.248C66.8068 40.0475 66.8644 39.8367 66.8644 39.6155V38.8689C66.8299 38.9104 66.7539 38.9484 66.6363 38.983C66.5211 39.0152 66.3875 39.044 66.2354 39.0694C66.0857 39.0924 65.9393 39.1132 65.7965 39.1316C65.6559 39.1477 65.5419 39.1616 65.4543 39.1731C65.2423 39.2007 65.0442 39.2457 64.8599 39.3079C64.6778 39.3678 64.5304 39.4588 64.4175 39.5809C64.3069 39.7007 64.2516 39.8643 64.2516 40.0717C64.2516 40.3551 64.3564 40.5694 64.5661 40.7145C64.7781 40.8574 65.0465 40.9288 65.3714 40.9288ZM69.9845 38.3436V41.5371H69.1689V36.2284H69.9569V37.0579H70.026C70.1504 36.7883 70.3394 36.5717 70.5928 36.4081C70.8463 36.2422 71.1734 36.1593 71.5744 36.1593C71.9338 36.1593 72.2483 36.233 72.5179 36.3805C72.7875 36.5256 72.9972 36.7468 73.1469 37.0441C73.2967 37.339 73.3716 37.7123 73.3716 38.1639V41.5371H72.5559V38.2192C72.5559 37.8021 72.4476 37.4772 72.231 37.2445C72.0145 37.0095 71.7172 36.892 71.3393 36.892C71.079 36.892 70.8463 36.9484 70.6412 37.0613C70.4384 37.1743 70.2783 37.339 70.1608 37.5556C70.0433 37.7722 69.9845 38.0348 69.9845 38.3436ZM76.8666 41.6477C76.4243 41.6477 76.0337 41.536 75.695 41.3125C75.3563 41.0867 75.0913 40.7687 74.9001 40.3585C74.7088 39.9461 74.6132 39.4588 74.6132 38.8966C74.6132 38.339 74.7088 37.8551 74.9001 37.445C75.0913 37.0349 75.3574 36.718 75.6985 36.4945C76.0395 36.271 76.4335 36.1593 76.8805 36.1593C77.2261 36.1593 77.4991 36.2169 77.6996 36.3321C77.9024 36.445 78.0567 36.574 78.1627 36.7192C78.271 36.862 78.3551 36.9796 78.415 37.0717H78.4841V34.4588H79.2998V41.5371H78.5118V40.7214H78.415C78.3551 40.8182 78.2699 40.9403 78.1593 41.0878C78.0487 41.233 77.8908 41.3631 77.6858 41.4784C77.4807 41.5913 77.2077 41.6477 76.8666 41.6477ZM76.9772 40.915C77.3044 40.915 77.5809 40.8297 77.8067 40.6592C78.0325 40.4864 78.2042 40.248 78.3217 39.9438C78.4392 39.6374 78.498 39.2837 78.498 38.8828C78.498 38.4864 78.4404 38.1397 78.3252 37.8424C78.21 37.5429 78.0394 37.3102 77.8136 37.1443C77.5878 36.9761 77.309 36.892 76.9772 36.892C76.6316 36.892 76.3436 36.9807 76.1132 37.1581C75.8851 37.3332 75.7134 37.5717 75.5982 37.8736C75.4853 38.1731 75.4289 38.5095 75.4289 38.8828C75.4289 39.2606 75.4865 39.6039 75.6017 39.9127C75.7192 40.2192 75.892 40.4634 76.1201 40.6454C76.3505 40.8251 76.6362 40.915 76.9772 40.915ZM84.2525 39.3666V36.2284H85.0682V41.5371H84.2525V40.6385H84.1972C84.0728 40.9081 83.8792 41.1373 83.6166 41.3263C83.3539 41.5129 83.0221 41.6062 82.6212 41.6062C82.2894 41.6062 81.9945 41.5337 81.7364 41.3885C81.4784 41.241 81.2756 41.0198 81.1281 40.7249C80.9807 40.4277 80.9069 40.0533 80.9069 39.6016V36.2284H81.7226V39.5463C81.7226 39.9334 81.8309 40.2422 82.0475 40.4726C82.2664 40.703 82.5452 40.8182 82.8839 40.8182C83.0866 40.8182 83.2928 40.7664 83.5025 40.6627C83.7145 40.559 83.8919 40.4 84.0348 40.1857C84.1799 39.9715 84.2525 39.6984 84.2525 39.3666ZM86.5621 43.5279V36.2284H87.3501V37.0717H87.4469C87.5068 36.9796 87.5898 36.862 87.6957 36.7192C87.804 36.574 87.9584 36.445 88.1589 36.3321C88.3616 36.2169 88.6358 36.1593 88.9814 36.1593C89.4284 36.1593 89.8225 36.271 90.1635 36.4945C90.5045 36.718 90.7706 37.0349 90.9618 37.445C91.1531 37.8551 91.2487 38.339 91.2487 38.8966C91.2487 39.4588 91.1531 39.9461 90.9618 40.3585C90.7706 40.7687 90.5056 41.0867 90.1669 41.3125C89.8282 41.536 89.4377 41.6477 88.9953 41.6477C88.6543 41.6477 88.3812 41.5913 88.1762 41.4784C87.9711 41.3631 87.8133 41.233 87.7027 41.0878C87.5921 40.9403 87.5068 40.8182 87.4469 40.7214H87.3778V43.5279H86.5621ZM87.364 38.8828C87.364 39.2837 87.4227 39.6374 87.5402 39.9438C87.6577 40.248 87.8294 40.4864 88.0552 40.6592C88.281 40.8297 88.5575 40.915 88.8847 40.915C89.2257 40.915 89.5102 40.8251 89.7384 40.6454C89.9688 40.4634 90.1416 40.2192 90.2568 39.9127C90.3743 39.6039 90.433 39.2606 90.433 38.8828C90.433 38.5095 90.3754 38.1731 90.2602 37.8736C90.1473 37.5717 89.9757 37.3332 89.7453 37.1581C89.5172 36.9807 89.2303 36.892 88.8847 36.892C88.5529 36.892 88.2741 36.9761 88.0483 37.1443C87.8225 37.3102 87.652 37.5429 87.5368 37.8424C87.4216 38.1397 87.364 38.4864 87.364 38.8828ZM100.954 34.4588V41.5371H100.124L96.2671 35.9796H96.198V41.5371H95.3408V34.4588H96.1703L100.041 40.0302H100.11V34.4588H100.954ZM104.715 41.6477C104.236 41.6477 103.815 41.5337 103.453 41.3055C103.094 41.0774 102.813 40.7583 102.61 40.3482C102.41 39.938 102.309 39.4588 102.309 38.9104C102.309 38.3574 102.41 37.8747 102.61 37.4623C102.813 37.0498 103.094 36.7296 103.453 36.5014C103.815 36.2733 104.236 36.1593 104.715 36.1593C105.194 36.1593 105.613 36.2733 105.973 36.5014C106.335 36.7296 106.616 37.0498 106.816 37.4623C107.019 37.8747 107.12 38.3574 107.12 38.9104C107.12 39.4588 107.019 39.938 106.816 40.3482C106.616 40.7583 106.335 41.0774 105.973 41.3055C105.613 41.5337 105.194 41.6477 104.715 41.6477ZM104.715 40.915C105.079 40.915 105.378 40.8217 105.613 40.635C105.849 40.4484 106.022 40.203 106.135 39.8989C106.248 39.5947 106.305 39.2652 106.305 38.9104C106.305 38.5556 106.248 38.2249 106.135 37.9185C106.022 37.612 105.849 37.3643 105.613 37.1754C105.378 36.9865 105.079 36.892 104.715 36.892C104.351 36.892 104.051 36.9865 103.816 37.1754C103.581 37.3643 103.407 37.612 103.294 37.9185C103.181 38.2249 103.125 38.5556 103.125 38.9104C103.125 39.2652 103.181 39.5947 103.294 39.8989C103.407 40.203 103.581 40.4484 103.816 40.635C104.051 40.8217 104.351 40.915 104.715 40.915ZM110.674 36.2284V36.9196H107.923V36.2284H110.674ZM108.725 34.9565H109.541V40.0164C109.541 40.2468 109.574 40.4196 109.641 40.5348C109.71 40.6477 109.797 40.7238 109.903 40.7629C110.012 40.7998 110.126 40.8182 110.246 40.8182C110.335 40.8182 110.409 40.8136 110.467 40.8044C110.524 40.7929 110.571 40.7837 110.605 40.7767L110.771 41.5095C110.716 41.5302 110.638 41.5509 110.539 41.5717C110.44 41.5947 110.315 41.6062 110.163 41.6062C109.932 41.6062 109.706 41.5567 109.485 41.4576C109.266 41.3585 109.084 41.2076 108.939 41.0049C108.796 40.8021 108.725 40.5463 108.725 40.2376V34.9565ZM114.07 41.6477C113.558 41.6477 113.117 41.5348 112.746 41.309C112.378 41.0809 112.093 40.7629 111.893 40.3551C111.694 39.945 111.595 39.468 111.595 38.9242C111.595 38.3805 111.694 37.9012 111.893 37.4865C112.093 37.0694 112.372 36.7445 112.729 36.5118C113.088 36.2768 113.508 36.1593 113.987 36.1593C114.263 36.1593 114.536 36.2054 114.806 36.2975C115.076 36.3897 115.321 36.5395 115.542 36.7468C115.763 36.9519 115.94 37.2238 116.071 37.5625C116.202 37.9012 116.268 38.3182 116.268 38.8136V39.1593H112.176V38.4542H115.439C115.439 38.1547 115.379 37.8874 115.259 37.6524C115.141 37.4173 114.973 37.2319 114.754 37.0959C114.538 36.96 114.282 36.892 113.987 36.892C113.662 36.892 113.381 36.9726 113.144 37.1339C112.909 37.2929 112.728 37.5003 112.601 37.756C112.474 38.0118 112.411 38.286 112.411 38.5786V39.0487C112.411 39.4496 112.48 39.7894 112.618 40.0682C112.759 40.3447 112.954 40.5556 113.202 40.7007C113.451 40.8436 113.74 40.915 114.07 40.915C114.284 40.915 114.478 40.885 114.651 40.8251C114.826 40.7629 114.977 40.6708 115.103 40.5486C115.23 40.4242 115.328 40.2698 115.397 40.0855L116.185 40.3067C116.102 40.574 115.963 40.809 115.767 41.0118C115.571 41.2122 115.329 41.3689 115.041 41.4818C114.753 41.5924 114.429 41.6477 114.07 41.6477ZM121.269 37.4173L120.536 37.6247C120.49 37.5026 120.422 37.3839 120.333 37.2687C120.245 37.1512 120.125 37.0544 119.973 36.9784C119.821 36.9024 119.626 36.8643 119.389 36.8643C119.064 36.8643 118.793 36.9392 118.577 37.089C118.362 37.2365 118.255 37.4242 118.255 37.6524C118.255 37.8551 118.329 38.0153 118.477 38.1328C118.624 38.2503 118.854 38.3482 119.168 38.4265L119.956 38.6201C120.43 38.7353 120.784 38.9116 121.017 39.1489C121.25 39.3839 121.366 39.6869 121.366 40.0579C121.366 40.362 121.278 40.6339 121.103 40.8735C120.93 41.1132 120.688 41.3021 120.377 41.4403C120.066 41.5786 119.705 41.6477 119.292 41.6477C118.751 41.6477 118.303 41.5302 117.948 41.2952C117.593 41.0602 117.368 40.7168 117.274 40.2652L118.048 40.0717C118.122 40.3574 118.261 40.5717 118.466 40.7145C118.674 40.8574 118.944 40.9288 119.278 40.9288C119.659 40.9288 119.96 40.8482 120.184 40.6869C120.41 40.5233 120.523 40.3274 120.523 40.0993C120.523 39.915 120.458 39.7606 120.329 39.6362C120.2 39.5095 120.002 39.415 119.735 39.3528L118.85 39.1454C118.364 39.0302 118.006 38.8517 117.778 38.6097C117.553 38.3655 117.44 38.0602 117.44 37.6938C117.44 37.3943 117.524 37.1293 117.692 36.8989C117.862 36.6685 118.094 36.4876 118.387 36.3563C118.682 36.225 119.016 36.1593 119.389 36.1593C119.914 36.1593 120.327 36.2745 120.626 36.5049C120.928 36.7353 121.142 37.0395 121.269 37.4173Z" fill="#858E96"/>
+<path d="M267 59.668C266.118 59.668 265.342 59.3607 264.672 58.7461C264.002 58.1315 263.667 57.2999 263.667 56.2513C263.667 55.5846 263.922 54.8607 264.433 54.0794C264.943 53.2982 265.719 52.4527 266.761 51.543C266.795 51.5152 266.834 51.4926 266.875 51.4753C266.917 51.4579 266.959 51.4492 267 51.4492C267.042 51.4492 267.084 51.4579 267.125 51.4753C267.167 51.4926 267.205 51.5152 267.24 51.543C268.282 52.4527 269.058 53.2982 269.568 54.0794C270.078 54.8607 270.334 55.5846 270.334 56.2513C270.334 57.2999 269.999 58.1315 269.328 58.7461C268.658 59.3607 267.882 59.668 267 59.668ZM267 59.043C267.764 59.043 268.407 58.7791 268.927 58.2513C269.448 57.7235 269.709 57.0569 269.709 56.2513C269.709 55.7027 269.478 55.0794 269.016 54.3815C268.554 53.6836 267.882 52.9457 267 52.168C266.118 52.9457 265.447 53.6836 264.985 54.3815C264.523 55.0794 264.292 55.7027 264.292 56.2513C264.292 57.0569 264.552 57.7235 265.073 58.2513C265.594 58.7791 266.236 59.043 267 59.043ZM266.99 58.3346C267.101 58.3346 267.186 58.3155 267.245 58.2773C267.304 58.2391 267.334 58.1819 267.334 58.1055C267.334 58.0291 267.304 57.9701 267.245 57.9284C267.186 57.8867 267.098 57.8659 266.979 57.8659C266.688 57.8659 266.391 57.7739 266.089 57.5898C265.787 57.4058 265.594 57.0812 265.511 56.6159C265.497 56.5534 265.466 56.503 265.417 56.4648C265.368 56.4266 265.316 56.4076 265.261 56.4076C265.184 56.4076 265.125 56.4371 265.084 56.4961C265.042 56.5551 265.028 56.6159 265.042 56.6784C265.146 57.2617 265.393 57.6836 265.782 57.944C266.17 58.2044 266.573 58.3346 266.99 58.3346Z" fill="#858E96"/>
+</g>
+<defs>
+<filter id="filter0_d_2884_60261" x="11.2193" y="0.719251" width="284.561" height="85.5615" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.39037"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2884_60261"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2884_60261" result="shape"/>
+</filter>
+<filter id="filter1_d_2884_60261" x="0.219251" y="19.7193" width="284.561" height="85.5615" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.39037"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2884_60261"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2884_60261" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/app/public/empty-state/empty-project.svg b/app/public/empty-state/empty-project.svg
new file mode 100644
index 000000000..2b917e3a9
--- /dev/null
+++ b/app/public/empty-state/empty-project.svg
@@ -0,0 +1,56 @@
+<svg width="291" height="177" viewBox="0 0 291 177" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="64.5723" y="27.2246" width="79.5849" height="13.5513" rx="6.16937" fill="#EBEBEB"/>
+<rect x="159.581" y="27.2246" width="79.5849" height="13.5513" rx="6.16937" fill="#E2E2E2"/>
+<g filter="url(#filter0_d_2884_60167)">
+<rect x="28" y="2.5" width="260" height="147" rx="6.16937" fill="white"/>
+</g>
+<path d="M42.5048 87.6895V78.2349H46.0502C46.7766 78.2349 47.3859 78.3703 47.8784 78.6412C48.3739 78.912 48.7478 79.2844 49.0002 79.7583C49.2556 80.2292 49.3833 80.7647 49.3833 81.3649C49.3833 81.9712 49.2556 82.5098 49.0002 82.9806C48.7447 83.4515 48.3677 83.8224 47.8691 84.0932C47.3706 84.361 46.7566 84.4949 46.0272 84.4949H43.6774V83.0868H45.7963C46.2211 83.0868 46.5688 83.013 46.8397 82.8652C47.1105 82.7175 47.3105 82.5144 47.4398 82.2559C47.5721 81.9973 47.6383 81.7003 47.6383 81.3649C47.6383 81.0294 47.5721 80.734 47.4398 80.4785C47.3105 80.2231 47.109 80.0246 46.835 79.883C46.5642 79.7383 46.2149 79.666 45.7871 79.666H44.2175V87.6895H42.5048ZM50.7971 87.6895V80.5985H52.4175V81.7804H52.4914C52.6206 81.371 52.8422 81.0556 53.1562 80.834C53.4732 80.6093 53.8348 80.497 54.241 80.497C54.3334 80.497 54.4365 80.5016 54.5503 80.5108C54.6673 80.517 54.7642 80.5278 54.8412 80.5431V82.0804C54.7704 82.0558 54.6581 82.0343 54.5042 82.0158C54.3534 81.9943 54.2072 81.9835 54.0656 81.9835C53.7609 81.9835 53.487 82.0497 53.2439 82.182C53.0038 82.3113 52.8145 82.4913 52.676 82.7221C52.5376 82.9529 52.4683 83.2192 52.4683 83.5208V87.6895H50.7971ZM58.7525 87.8279C58.06 87.8279 57.4599 87.6756 56.9521 87.3709C56.4442 87.0662 56.0503 86.64 55.7702 86.0922C55.4933 85.5443 55.3548 84.9042 55.3548 84.1717C55.3548 83.4392 55.4933 82.7975 55.7702 82.2466C56.0503 81.6957 56.4442 81.2679 56.9521 80.9632C57.4599 80.6586 58.06 80.5062 58.7525 80.5062C59.445 80.5062 60.0451 80.6586 60.5529 80.9632C61.0607 81.2679 61.4531 81.6957 61.7301 82.2466C62.0102 82.7975 62.1502 83.4392 62.1502 84.1717C62.1502 84.9042 62.0102 85.5443 61.7301 86.0922C61.4531 86.64 61.0607 87.0662 60.5529 87.3709C60.0451 87.6756 59.445 87.8279 58.7525 87.8279ZM58.7617 86.4892C59.1372 86.4892 59.4511 86.3861 59.7035 86.1799C59.9558 85.9706 60.1436 85.6905 60.2667 85.3397C60.3929 84.9888 60.456 84.598 60.456 84.1671C60.456 83.7331 60.3929 83.3407 60.2667 82.9899C60.1436 82.6359 59.9558 82.3543 59.7035 82.1451C59.4511 81.9358 59.1372 81.8311 58.7617 81.8311C58.377 81.8311 58.0569 81.9358 57.8015 82.1451C57.5491 82.3543 57.3598 82.6359 57.2337 82.9899C57.1106 83.3407 57.049 83.7331 57.049 84.1671C57.049 84.598 57.1106 84.9888 57.2337 85.3397C57.3598 85.6905 57.5491 85.9706 57.8015 86.1799C58.0569 86.3861 58.377 86.4892 58.7617 86.4892ZM63.5686 80.5985H65.2398V88.0957C65.2398 88.6066 65.1428 89.0282 64.949 89.3606C64.7551 89.693 64.475 89.9408 64.1088 90.1039C63.7425 90.267 63.2978 90.3485 62.7746 90.3485C62.713 90.3485 62.6561 90.347 62.6038 90.3439C62.5515 90.3439 62.4945 90.3424 62.433 90.3393V88.9775C62.4791 88.9805 62.5207 88.9821 62.5576 88.9821C62.5945 88.9851 62.633 88.9867 62.673 88.9867C62.9931 88.9867 63.2224 88.9082 63.3609 88.7512C63.4994 88.5974 63.5686 88.3712 63.5686 88.0726V80.5985ZM64.3996 79.5922C64.1318 79.5922 63.9026 79.5044 63.7117 79.329C63.524 79.1505 63.4301 78.9366 63.4301 78.6873C63.4301 78.435 63.524 78.2211 63.7117 78.0456C63.9026 77.8671 64.1318 77.7779 64.3996 77.7779C64.6643 77.7779 64.8905 77.8671 65.0782 78.0456C65.269 78.2211 65.3644 78.435 65.3644 78.6873C65.3644 78.9366 65.269 79.1505 65.0782 79.329C64.8905 79.5044 64.6643 79.5922 64.3996 79.5922ZM70.0975 87.8279C69.3865 87.8279 68.7725 87.6802 68.2555 87.3848C67.7415 87.0862 67.3461 86.6646 67.0691 86.1199C66.7921 85.572 66.6536 84.9273 66.6536 84.1855C66.6536 83.4561 66.7921 82.816 67.0691 82.2651C67.3491 81.7111 67.74 81.2802 68.2417 80.9725C68.7433 80.6616 69.3327 80.5062 70.0098 80.5062C70.4468 80.5062 70.8592 80.577 71.247 80.7186C71.6378 80.8571 71.9825 81.0725 72.2811 81.3649C72.5827 81.6573 72.8197 82.0297 72.992 82.4821C73.1644 82.9314 73.2505 83.4669 73.2505 84.0886V84.601H67.4384V83.4746H71.6486C71.6455 83.1545 71.5763 82.8699 71.4409 82.6206C71.3055 82.3682 71.1162 82.1697 70.873 82.025C70.633 81.8804 70.3529 81.8081 70.0328 81.8081C69.6912 81.8081 69.3912 81.8912 69.1326 82.0574C68.8741 82.2205 68.6725 82.4359 68.5279 82.7037C68.3863 82.9683 68.314 83.2592 68.3109 83.5762V84.5595C68.3109 84.9719 68.3863 85.3258 68.5371 85.6213C68.6879 85.9136 68.8987 86.1383 69.1696 86.2953C69.4404 86.4492 69.7574 86.5261 70.1206 86.5261C70.3637 86.5261 70.5837 86.4922 70.7807 86.4245C70.9777 86.3538 71.1485 86.2507 71.2931 86.1152C71.4378 85.9798 71.5471 85.8121 71.6209 85.612L73.1813 85.7875C73.0828 86.1999 72.8951 86.56 72.6181 86.8677C72.3442 87.1724 71.9933 87.4094 71.5655 87.5787C71.1377 87.7449 70.6484 87.8279 70.0975 87.8279ZM77.7574 87.8279C77.0495 87.8279 76.4417 87.6725 75.9339 87.3617C75.4291 87.0508 75.0398 86.6215 74.7659 86.0737C74.4951 85.5228 74.3596 84.8888 74.3596 84.1717C74.3596 83.4515 74.4981 82.816 74.7751 82.2651C75.0521 81.7111 75.443 81.2802 75.9477 80.9725C76.4555 80.6616 77.0557 80.5062 77.7481 80.5062C78.3237 80.5062 78.833 80.6124 79.2762 80.8248C79.7224 81.034 80.0779 81.331 80.3426 81.7157C80.6073 82.0974 80.7581 82.5436 80.795 83.0545H79.1977C79.1331 82.7129 78.9792 82.4282 78.7361 82.2005C78.496 81.9696 78.1744 81.8542 77.7712 81.8542C77.4296 81.8542 77.1295 81.9466 76.871 82.1312C76.6125 82.3128 76.4109 82.5744 76.2662 82.916C76.1247 83.2576 76.0539 83.667 76.0539 84.144C76.0539 84.6272 76.1247 85.0427 76.2662 85.3904C76.4078 85.7351 76.6063 86.0014 76.8618 86.1891C77.1203 86.3738 77.4234 86.4661 77.7712 86.4661C78.0174 86.4661 78.2375 86.4199 78.4314 86.3276C78.6283 86.2322 78.793 86.0952 78.9253 85.9167C79.0577 85.7382 79.1485 85.5212 79.1977 85.2658H80.795C80.755 85.7675 80.6073 86.2122 80.3518 86.6C80.0964 86.9847 79.7486 87.2863 79.3085 87.5048C78.8684 87.7202 78.3514 87.8279 77.7574 87.8279ZM85.7081 80.5985V81.8912H81.6317V80.5985H85.7081ZM82.6381 78.8997H84.3093V85.5566C84.3093 85.7813 84.3432 85.9537 84.4109 86.0737C84.4817 86.1906 84.574 86.2707 84.6879 86.3137C84.8017 86.3568 84.9279 86.3784 85.0664 86.3784C85.171 86.3784 85.2665 86.3707 85.3526 86.3553C85.4419 86.3399 85.5096 86.3261 85.5558 86.3137L85.8374 87.6202C85.7481 87.651 85.6204 87.6848 85.4542 87.7218C85.2911 87.7587 85.091 87.7802 84.854 87.7864C84.4355 87.7987 84.0585 87.7356 83.723 87.5971C83.3875 87.4556 83.1213 87.237 82.9244 86.9416C82.7305 86.6461 82.6351 86.2768 82.6381 85.8336V78.8997ZM98.1737 78.2349V87.6895H96.6503L92.1954 81.2495H92.1169V87.6895H90.4042V78.2349H91.9369L96.3872 84.6795H96.4703V78.2349H98.1737ZM102.007 87.8326C101.557 87.8326 101.153 87.7525 100.792 87.5925C100.435 87.4294 100.152 87.1893 99.943 86.8723C99.7368 86.5553 99.6337 86.1645 99.6337 85.6998C99.6337 85.2997 99.7076 84.9688 99.8553 84.7072C100.003 84.4456 100.205 84.2363 100.46 84.0794C100.715 83.9224 101.003 83.8039 101.323 83.7239C101.646 83.6408 101.98 83.5808 102.325 83.5439C102.741 83.5008 103.078 83.4623 103.336 83.4284C103.595 83.3915 103.782 83.3361 103.899 83.2623C104.019 83.1853 104.079 83.0668 104.079 82.9068V82.8791C104.079 82.5313 103.976 82.262 103.77 82.0712C103.564 81.8804 103.267 81.785 102.879 81.785C102.47 81.785 102.145 81.8742 101.905 82.0527C101.668 82.2312 101.508 82.4421 101.425 82.6852L99.8645 82.4636C99.9876 82.0327 100.191 81.6726 100.474 81.3833C100.757 81.091 101.103 80.8725 101.513 80.7278C101.922 80.5801 102.374 80.5062 102.87 80.5062C103.211 80.5062 103.552 80.5462 103.89 80.6262C104.229 80.7063 104.538 80.8386 104.818 81.0233C105.098 81.2048 105.323 81.4526 105.492 81.7665C105.664 82.0804 105.751 82.4728 105.751 82.9437V87.6895H104.144V86.7154H104.089C103.987 86.9123 103.844 87.097 103.659 87.2694C103.478 87.4386 103.248 87.5756 102.971 87.6802C102.698 87.7818 102.376 87.8326 102.007 87.8326ZM102.441 86.6046C102.776 86.6046 103.067 86.5384 103.313 86.4061C103.559 86.2707 103.749 86.0922 103.881 85.8706C104.016 85.649 104.084 85.4074 104.084 85.1458V84.3102C104.032 84.3533 103.942 84.3933 103.816 84.4302C103.693 84.4672 103.555 84.4995 103.401 84.5272C103.247 84.5549 103.095 84.5795 102.944 84.601C102.793 84.6226 102.662 84.641 102.551 84.6564C102.302 84.6903 102.079 84.7457 101.882 84.8226C101.685 84.8996 101.53 85.0073 101.416 85.1458C101.302 85.2812 101.245 85.4566 101.245 85.6721C101.245 85.9798 101.357 86.2122 101.582 86.3691C101.807 86.5261 102.093 86.6046 102.441 86.6046ZM107.431 87.6895V80.5985H109.028V81.8034H109.111C109.259 81.3972 109.504 81.0802 109.845 80.8525C110.187 80.6216 110.595 80.5062 111.069 80.5062C111.549 80.5062 111.954 80.6232 112.283 80.8571C112.615 81.0879 112.849 81.4033 112.985 81.8034H113.058C113.215 81.4095 113.48 81.0956 113.852 80.8617C114.228 80.6247 114.673 80.5062 115.187 80.5062C115.839 80.5062 116.372 80.7124 116.784 81.1248C117.196 81.5372 117.403 82.1389 117.403 82.9299V87.6895H115.727V83.1884C115.727 82.7483 115.61 82.4267 115.376 82.2235C115.142 82.0173 114.856 81.9142 114.517 81.9142C114.114 81.9142 113.799 82.0404 113.571 82.2928C113.346 82.5421 113.234 82.8668 113.234 83.2669V87.6895H111.595V83.1191C111.595 82.7529 111.484 82.4605 111.263 82.242C111.044 82.0235 110.758 81.9142 110.404 81.9142C110.164 81.9142 109.945 81.9758 109.748 82.0989C109.551 82.2189 109.394 82.3897 109.278 82.6113C109.161 82.8298 109.102 83.0853 109.102 83.3777V87.6895H107.431ZM122.237 87.8279C121.526 87.8279 120.912 87.6802 120.395 87.3848C119.881 87.0862 119.486 86.6646 119.209 86.1199C118.932 85.572 118.793 84.9273 118.793 84.1855C118.793 83.4561 118.932 82.816 119.209 82.2651C119.489 81.7111 119.88 81.2802 120.381 80.9725C120.883 80.6616 121.472 80.5062 122.149 80.5062C122.586 80.5062 122.999 80.577 123.387 80.7186C123.777 80.8571 124.122 81.0725 124.421 81.3649C124.722 81.6573 124.959 82.0297 125.132 82.4821C125.304 82.9314 125.39 83.4669 125.39 84.0886V84.601H119.578V83.4746H123.788C123.785 83.1545 123.716 82.8699 123.581 82.6206C123.445 82.3682 123.256 82.1697 123.013 82.025C122.773 81.8804 122.493 81.8081 122.172 81.8081C121.831 81.8081 121.531 81.8912 121.272 82.0574C121.014 82.2205 120.812 82.4359 120.668 82.7037C120.526 82.9683 120.454 83.2592 120.451 83.5762V84.5595C120.451 84.9719 120.526 85.3258 120.677 85.6213C120.828 85.9136 121.038 86.1383 121.309 86.2953C121.58 86.4492 121.897 86.5261 122.26 86.5261C122.503 86.5261 122.723 86.4922 122.92 86.4245C123.117 86.3538 123.288 86.2507 123.433 86.1152C123.577 85.9798 123.687 85.8121 123.761 85.612L125.321 85.7875C125.222 86.1999 125.035 86.56 124.758 86.8677C124.484 87.1724 124.133 87.4094 123.705 87.5787C123.277 87.7449 122.788 87.8279 122.237 87.8279Z" fill="black"/>
+<rect x="42" y="100.5" width="232" height="8" rx="4" fill="#EBEBEB"/>
+<rect x="42" y="116.5" width="79.5849" height="8.02018" rx="4.01009" fill="#E2E2E2"/>
+<rect x="42" y="132.5" width="8" height="8" rx="4" fill="#E2E2E2"/>
+<rect x="266" y="132.5" width="8" height="8" rx="4" fill="#E2E2E2"/>
+<rect x="252" y="132.5" width="8" height="8" rx="4" fill="#E2E2E2"/>
+<rect x="53" y="132.5" width="32" height="8" rx="4" fill="#E2E2E2"/>
+<path d="M28 8.5C28 5.18629 30.6863 2.5 34 2.5H282C285.314 2.5 288 5.18629 288 8.5V68.5H28V8.5Z" fill="#ECF4FC"/>
+<path d="M140 21.5L193.694 68H86.3064L140 21.5Z" fill="#DAECF9"/>
+<path d="M186.5 30.5L230.234 68H142.766L186.5 30.5Z" fill="#DAECF9"/>
+<circle cx="231" cy="22.5" r="8" fill="#DAECF9"/>
+<rect x="39.5723" y="52.2246" width="79.5849" height="13.5513" rx="6.16937" fill="#EBEBEB"/>
+<rect x="134.581" y="52.2246" width="79.5849" height="13.5513" rx="6.16937" fill="#E2E2E2"/>
+<g filter="url(#filter1_d_2884_60167)">
+<rect x="3" y="27.5" width="260" height="147" rx="6.16937" fill="white"/>
+</g>
+<path d="M17.5048 112.689V103.235H21.0502C21.7766 103.235 22.3859 103.37 22.8784 103.641C23.3739 103.912 23.7478 104.284 24.0002 104.758C24.2556 105.229 24.3833 105.765 24.3833 106.365C24.3833 106.971 24.2556 107.51 24.0002 107.981C23.7447 108.452 23.3677 108.822 22.8691 109.093C22.3706 109.361 21.7566 109.495 21.0272 109.495H18.6774V108.087H20.7963C21.2211 108.087 21.5688 108.013 21.8397 107.865C22.1105 107.718 22.3105 107.514 22.4398 107.256C22.5721 106.997 22.6383 106.7 22.6383 106.365C22.6383 106.029 22.5721 105.734 22.4398 105.479C22.3105 105.223 22.109 105.025 21.835 104.883C21.5642 104.738 21.2149 104.666 20.7871 104.666H19.2175V112.689H17.5048ZM27.4683 103.235V112.689H25.7971V103.235H27.4683ZM31.2273 112.833C30.7779 112.833 30.3732 112.753 30.0131 112.593C29.6561 112.429 29.373 112.189 29.1637 111.872C28.9575 111.555 28.8544 111.164 28.8544 110.7C28.8544 110.3 28.9283 109.969 29.076 109.707C29.2237 109.446 29.4253 109.236 29.6808 109.079C29.9362 108.922 30.224 108.804 30.544 108.724C30.8672 108.641 31.2011 108.581 31.5458 108.544C31.9613 108.501 32.2983 108.462 32.5568 108.428C32.8153 108.392 33.0031 108.336 33.12 108.262C33.2401 108.185 33.3001 108.067 33.3001 107.907V107.879C33.3001 107.531 33.197 107.262 32.9908 107.071C32.7846 106.88 32.4876 106.785 32.0998 106.785C31.6905 106.785 31.3658 106.874 31.1257 107.053C30.8887 107.231 30.7287 107.442 30.6456 107.685L29.0852 107.464C29.2083 107.033 29.4115 106.673 29.6946 106.383C29.9777 106.091 30.324 105.872 30.7333 105.728C31.1426 105.58 31.5951 105.506 32.0906 105.506C32.4322 105.506 32.7723 105.546 33.1108 105.626C33.4493 105.706 33.7586 105.839 34.0387 106.023C34.3188 106.205 34.5434 106.453 34.7127 106.767C34.8851 107.08 34.9712 107.473 34.9712 107.944V112.689H33.3647V111.715H33.3093C33.2077 111.912 33.0646 112.097 32.88 112.269C32.6984 112.439 32.4691 112.576 32.1921 112.68C31.9182 112.782 31.5966 112.833 31.2273 112.833ZM31.6612 111.605C31.9967 111.605 32.2875 111.538 32.5337 111.406C32.7799 111.271 32.9692 111.092 33.1016 110.871C33.237 110.649 33.3047 110.407 33.3047 110.146V109.31C33.2524 109.353 33.1631 109.393 33.0369 109.43C32.9138 109.467 32.7753 109.499 32.6214 109.527C32.4676 109.555 32.3152 109.579 32.1644 109.601C32.0136 109.623 31.8828 109.641 31.772 109.656C31.5227 109.69 31.2996 109.746 31.1026 109.823C30.9057 109.9 30.7502 110.007 30.6364 110.146C30.5225 110.281 30.4656 110.457 30.4656 110.672C30.4656 110.98 30.5779 111.212 30.8026 111.369C31.0272 111.526 31.3134 111.605 31.6612 111.605ZM38.3228 108.535V112.689H36.6516V105.599H38.2489V106.803H38.332C38.4951 106.406 38.7552 106.091 39.1122 105.857C39.4723 105.623 39.917 105.506 40.4464 105.506C40.9357 105.506 41.362 105.611 41.7251 105.82C42.0914 106.029 42.3745 106.333 42.5746 106.73C42.7777 107.127 42.8777 107.608 42.8746 108.175V112.689H41.2035V108.433C41.2035 107.959 41.0804 107.588 40.8342 107.32C40.591 107.053 40.254 106.919 39.8232 106.919C39.5308 106.919 39.2707 106.983 39.043 107.113C38.8183 107.239 38.6413 107.422 38.5121 107.662C38.3859 107.902 38.3228 108.193 38.3228 108.535ZM47.7127 112.828C47.0018 112.828 46.3878 112.68 45.8707 112.385C45.3568 112.086 44.9613 111.665 44.6843 111.12C44.4073 110.572 44.2688 109.927 44.2688 109.186C44.2688 108.456 44.4073 107.816 44.6843 107.265C44.9644 106.711 45.3552 106.28 45.8569 105.972C46.3585 105.662 46.9479 105.506 47.625 105.506C48.062 105.506 48.4744 105.577 48.8622 105.719C49.2531 105.857 49.5978 106.073 49.8963 106.365C50.1979 106.657 50.4349 107.03 50.6072 107.482C50.7796 107.931 50.8658 108.467 50.8658 109.089V109.601H45.0536V108.475H49.2638C49.2608 108.155 49.1915 107.87 49.0561 107.621C48.9207 107.368 48.7314 107.17 48.4883 107.025C48.2482 106.88 47.9682 106.808 47.6481 106.808C47.3065 106.808 47.0064 106.891 46.7479 107.057C46.4893 107.22 46.2878 107.436 46.1431 107.704C46.0015 107.968 45.9292 108.259 45.9261 108.576V109.559C45.9261 109.972 46.0015 110.326 46.1523 110.621C46.3031 110.914 46.514 111.138 46.7848 111.295C47.0556 111.449 47.3726 111.526 47.7358 111.526C47.9789 111.526 48.199 111.492 48.396 111.425C48.5929 111.354 48.7637 111.251 48.9084 111.115C49.053 110.98 49.1623 110.812 49.2362 110.612L50.7965 110.787C50.698 111.2 50.5103 111.56 50.2333 111.868C49.9594 112.172 49.6085 112.409 49.1808 112.579C48.753 112.745 48.2636 112.828 47.7127 112.828ZM55.578 103.235H57.6739L60.4807 110.086H60.5915L63.3983 103.235H65.4942V112.689H63.8508V106.194H63.7631L61.1501 112.662H59.9221L57.3092 106.18H57.2215V112.689H55.578V103.235ZM69.3259 112.833C68.8766 112.833 68.4719 112.753 68.1118 112.593C67.7548 112.429 67.4716 112.189 67.2623 111.872C67.0561 111.555 66.953 111.164 66.953 110.7C66.953 110.3 67.0269 109.969 67.1746 109.707C67.3224 109.446 67.5239 109.236 67.7794 109.079C68.0348 108.922 68.3226 108.804 68.6427 108.724C68.9658 108.641 69.2997 108.581 69.6444 108.544C70.0599 108.501 70.3969 108.462 70.6555 108.428C70.914 108.392 71.1017 108.336 71.2187 108.262C71.3387 108.185 71.3987 108.067 71.3987 107.907V107.879C71.3987 107.531 71.2956 107.262 71.0894 107.071C70.8832 106.88 70.5862 106.785 70.1984 106.785C69.7891 106.785 69.4644 106.874 69.2243 107.053C68.9874 107.231 68.8273 107.442 68.7442 107.685L67.1839 107.464C67.307 107.033 67.5101 106.673 67.7932 106.383C68.0764 106.091 68.4226 105.872 68.8319 105.728C69.2413 105.58 69.6937 105.506 70.1892 105.506C70.5308 105.506 70.8709 105.546 71.2094 105.626C71.548 105.706 71.8573 105.839 72.1373 106.023C72.4174 106.205 72.6421 106.453 72.8113 106.767C72.9837 107.08 73.0699 107.473 73.0699 107.944V112.689H71.4633V111.715H71.4079C71.3064 111.912 71.1633 112.097 70.9786 112.269C70.797 112.439 70.5677 112.576 70.2907 112.68C70.0168 112.782 69.6952 112.833 69.3259 112.833ZM69.7599 111.605C70.0953 111.605 70.3862 111.538 70.6324 111.406C70.8786 111.271 71.0679 111.092 71.2002 110.871C71.3356 110.649 71.4033 110.407 71.4033 110.146V109.31C71.351 109.353 71.2617 109.393 71.1356 109.43C71.0125 109.467 70.874 109.499 70.7201 109.527C70.5662 109.555 70.4139 109.579 70.2631 109.601C70.1122 109.623 69.9814 109.641 69.8706 109.656C69.6214 109.69 69.3982 109.746 69.2013 109.823C69.0043 109.9 68.8489 110.007 68.735 110.146C68.6211 110.281 68.5642 110.457 68.5642 110.672C68.5642 110.98 68.6765 111.212 68.9012 111.369C69.1259 111.526 69.4121 111.605 69.7599 111.605ZM74.7503 112.689V105.599H76.3706V106.78H76.4445C76.5738 106.371 76.7954 106.056 77.1093 105.834C77.4263 105.609 77.7879 105.497 78.1942 105.497C78.2865 105.497 78.3896 105.502 78.5035 105.511C78.6204 105.517 78.7174 105.528 78.7943 105.543V107.08C78.7235 107.056 78.6112 107.034 78.4573 107.016C78.3065 106.994 78.1603 106.983 78.0187 106.983C77.714 106.983 77.4401 107.05 77.197 107.182C76.9569 107.311 76.7677 107.491 76.6292 107.722C76.4907 107.953 76.4214 108.219 76.4214 108.521V112.689H74.7503ZM81.428 110.464L81.4234 108.447H81.6911L84.2394 105.599H86.1922L83.0576 109.089H82.7114L81.428 110.464ZM79.9046 112.689V103.235H81.5757V112.689H79.9046ZM84.3548 112.689L82.0466 109.463L83.173 108.285L86.3538 112.689H84.3548ZM90.1531 112.828C89.4422 112.828 88.8282 112.68 88.3112 112.385C87.7972 112.086 87.4017 111.665 87.1247 111.12C86.8477 110.572 86.7093 109.927 86.7093 109.186C86.7093 108.456 86.8477 107.816 87.1247 107.265C87.4048 106.711 87.7957 106.28 88.2973 105.972C88.799 105.662 89.3883 105.506 90.0654 105.506C90.5025 105.506 90.9149 105.577 91.3026 105.719C91.6935 105.857 92.0382 106.073 92.3367 106.365C92.6383 106.657 92.8753 107.03 93.0477 107.482C93.22 107.931 93.3062 108.467 93.3062 109.089V109.601H87.4941V108.475H91.7043C91.7012 108.155 91.632 107.87 91.4965 107.621C91.3611 107.368 91.1718 107.17 90.9287 107.025C90.6887 106.88 90.4086 106.808 90.0885 106.808C89.7469 106.808 89.4468 106.891 89.1883 107.057C88.9298 107.22 88.7282 107.436 88.5835 107.704C88.442 107.968 88.3696 108.259 88.3666 108.576V109.559C88.3666 109.972 88.442 110.326 88.5928 110.621C88.7436 110.914 88.9544 111.138 89.2252 111.295C89.4961 111.449 89.8131 111.526 90.1762 111.526C90.4194 111.526 90.6394 111.492 90.8364 111.425C91.0334 111.354 91.2042 111.251 91.3488 111.115C91.4935 110.98 91.6027 110.812 91.6766 110.612L93.2369 110.787C93.1385 111.2 92.9507 111.56 92.6737 111.868C92.3998 112.172 92.049 112.409 91.6212 112.579C91.1934 112.745 90.704 112.828 90.1531 112.828ZM98.2608 105.599V106.891H94.1845V105.599H98.2608ZM95.1909 103.9H96.862V110.557C96.862 110.781 96.8959 110.954 96.9636 111.074C97.0344 111.191 97.1267 111.271 97.2406 111.314C97.3545 111.357 97.4806 111.378 97.6191 111.378C97.7238 111.378 97.8192 111.371 97.9054 111.355C97.9946 111.34 98.0623 111.326 98.1085 111.314L98.3901 112.62C98.3008 112.651 98.1731 112.685 98.0069 112.722C97.8438 112.759 97.6438 112.78 97.4068 112.786C96.9882 112.799 96.6112 112.736 96.2757 112.597C95.9403 112.456 95.6741 112.237 95.4771 111.942C95.2832 111.646 95.1878 111.277 95.1909 110.834V103.9ZM99.6585 112.689V105.599H101.33V112.689H99.6585ZM100.499 104.592C100.234 104.592 100.006 104.504 99.8154 104.329C99.6246 104.151 99.5292 103.937 99.5292 103.687C99.5292 103.435 99.6246 103.221 99.8154 103.046C100.006 102.867 100.234 102.778 100.499 102.778C100.766 102.778 100.994 102.867 101.182 103.046C101.373 103.221 101.468 103.435 101.468 103.687C101.468 103.937 101.373 104.151 101.182 104.329C100.994 104.504 100.766 104.592 100.499 104.592ZM104.719 108.535V112.689H103.048V105.599H104.645V106.803H104.729C104.892 106.406 105.152 106.091 105.509 105.857C105.869 105.623 106.314 105.506 106.843 105.506C107.332 105.506 107.758 105.611 108.122 105.82C108.488 106.029 108.771 106.333 108.971 106.73C109.174 107.127 109.274 107.608 109.271 108.175V112.689H107.6V108.433C107.6 107.959 107.477 107.588 107.231 107.32C106.988 107.053 106.651 106.919 106.22 106.919C105.927 106.919 105.667 106.983 105.439 107.113C105.215 107.239 105.038 107.422 104.909 107.662C104.782 107.902 104.719 108.193 104.719 108.535ZM114.054 115.496C113.454 115.496 112.938 115.415 112.507 115.252C112.076 115.092 111.73 114.876 111.469 114.605C111.207 114.334 111.025 114.034 110.924 113.705L112.429 113.34C112.497 113.479 112.595 113.616 112.724 113.751C112.854 113.89 113.027 114.004 113.246 114.093C113.468 114.185 113.746 114.231 114.081 114.231C114.555 114.231 114.948 114.116 115.259 113.885C115.57 113.657 115.725 113.282 115.725 112.759V111.415H115.642C115.556 111.588 115.43 111.765 115.263 111.946C115.1 112.128 114.883 112.28 114.612 112.403C114.345 112.526 114.008 112.588 113.601 112.588C113.057 112.588 112.563 112.46 112.119 112.205C111.679 111.946 111.329 111.561 111.067 111.051C110.808 110.537 110.679 109.893 110.679 109.121C110.679 108.342 110.808 107.685 111.067 107.15C111.329 106.611 111.681 106.203 112.124 105.926C112.567 105.646 113.061 105.506 113.606 105.506C114.021 105.506 114.363 105.577 114.631 105.719C114.902 105.857 115.117 106.025 115.277 106.222C115.437 106.416 115.559 106.599 115.642 106.771H115.734V105.599H117.382V112.805C117.382 113.411 117.238 113.913 116.948 114.31C116.659 114.707 116.264 115.004 115.762 115.201C115.26 115.398 114.691 115.496 114.054 115.496ZM114.068 111.277C114.422 111.277 114.723 111.191 114.972 111.018C115.222 110.846 115.411 110.598 115.54 110.275C115.67 109.952 115.734 109.564 115.734 109.112C115.734 108.665 115.67 108.275 115.54 107.939C115.414 107.604 115.226 107.344 114.977 107.159C114.731 106.971 114.428 106.877 114.068 106.877C113.695 106.877 113.384 106.974 113.135 107.168C112.886 107.362 112.698 107.628 112.572 107.967C112.446 108.302 112.383 108.684 112.383 109.112C112.383 109.546 112.446 109.926 112.572 110.252C112.701 110.575 112.89 110.827 113.14 111.009C113.392 111.188 113.701 111.277 114.068 111.277Z" fill="black"/>
+<rect x="17" y="125.5" width="232" height="8" rx="4" fill="#EBEBEB"/>
+<rect x="17" y="141.5" width="79.5849" height="8.02018" rx="4.01009" fill="#E2E2E2"/>
+<rect x="17" y="157.5" width="8" height="8" rx="4" fill="#E2E2E2"/>
+<rect x="241" y="157.5" width="8" height="8" rx="4" fill="#E2E2E2"/>
+<rect x="227" y="157.5" width="8" height="8" rx="4" fill="#E2E2E2"/>
+<rect x="28" y="157.5" width="32" height="8" rx="4" fill="#E2E2E2"/>
+<path d="M3 33.5C3 30.1863 5.68629 27.5 9 27.5H257C260.314 27.5 263 30.1863 263 33.5V93.5H3V33.5Z" fill="#ECF4FC"/>
+<path d="M115 46.5L168.694 93H61.3064L115 46.5Z" fill="#DAECF9"/>
+<path d="M161.5 55.5L205.234 93H117.766L161.5 55.5Z" fill="#DAECF9"/>
+<circle cx="206" cy="47.5" r="8" fill="#DAECF9"/>
+<defs>
+<filter id="filter0_d_2884_60167" x="25.5323" y="0.0322516" width="264.935" height="151.935" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.23387"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2884_60167"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2884_60167" result="shape"/>
+</filter>
+<filter id="filter1_d_2884_60167" x="0.532252" y="25.0323" width="264.935" height="151.935" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.23387"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2884_60167"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2884_60167" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/app/public/empty-state/empty-view.svg b/app/public/empty-state/empty-view.svg
new file mode 100644
index 000000000..afa1c4f8e
--- /dev/null
+++ b/app/public/empty-state/empty-view.svg
@@ -0,0 +1,147 @@
+<svg width="301" height="90" viewBox="0 0 301 90" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g filter="url(#filter0_d_2884_60024)">
+<rect x="19" y="3.5" width="279" height="65" rx="5.5615" fill="white"/>
+<path d="M36.676 17.6708H35.8188C35.7682 17.4243 35.6794 17.2077 35.5527 17.021C35.4283 16.8344 35.2762 16.6777 35.0965 16.551C34.9191 16.422 34.7221 16.3252 34.5055 16.2607C34.2889 16.1962 34.0631 16.1639 33.8281 16.1639C33.3995 16.1639 33.0113 16.2722 32.6633 16.4888C32.3177 16.7054 32.0424 17.0245 31.8373 17.4461C31.6346 17.8678 31.5332 18.3851 31.5332 18.998C31.5332 19.6109 31.6346 20.1281 31.8373 20.5498C32.0424 20.9715 32.3177 21.2906 32.6633 21.5072C33.0113 21.7238 33.3995 21.832 33.8281 21.832C34.0631 21.832 34.2889 21.7998 34.5055 21.7353C34.7221 21.6708 34.9191 21.5751 35.0965 21.4484C35.2762 21.3194 35.4283 21.1615 35.5527 20.9749C35.6794 20.786 35.7682 20.5694 35.8188 20.3252H36.676C36.6115 20.6869 36.494 21.0106 36.3234 21.2963C36.1529 21.582 35.941 21.8251 35.6875 22.0256C35.4341 22.2237 35.1495 22.3747 34.8338 22.4784C34.5205 22.582 34.1852 22.6339 33.8281 22.6339C33.2244 22.6339 32.6875 22.4864 32.2175 22.1915C31.7475 21.8966 31.3776 21.4772 31.1081 20.9334C30.8385 20.3897 30.7037 19.7445 30.7037 18.998C30.7037 18.2514 30.8385 17.6063 31.1081 17.0625C31.3776 16.5187 31.7475 16.0994 32.2175 15.8045C32.6875 15.5095 33.2244 15.3621 33.8281 15.3621C34.1852 15.3621 34.5205 15.4139 34.8338 15.5176C35.1495 15.6213 35.4341 15.7734 35.6875 15.9738C35.941 16.172 36.1529 16.4139 36.3234 16.6996C36.494 16.983 36.6115 17.3067 36.676 17.6708ZM40.1071 22.6477C39.6278 22.6477 39.2073 22.5337 38.8456 22.3055C38.4862 22.0774 38.2051 21.7583 38.0023 21.3482C37.8018 20.938 37.7016 20.4588 37.7016 19.9104C37.7016 19.3574 37.8018 18.8747 38.0023 18.4623C38.2051 18.0498 38.4862 17.7296 38.8456 17.5014C39.2073 17.2733 39.6278 17.1593 40.1071 17.1593C40.5864 17.1593 41.0057 17.2733 41.3652 17.5014C41.7269 17.7296 42.008 18.0498 42.2085 18.4623C42.4112 18.8747 42.5126 19.3574 42.5126 19.9104C42.5126 20.4588 42.4112 20.938 42.2085 21.3482C42.008 21.7583 41.7269 22.0774 41.3652 22.3055C41.0057 22.5337 40.5864 22.6477 40.1071 22.6477ZM40.1071 21.915C40.4712 21.915 40.7707 21.8217 41.0057 21.635C41.2407 21.4484 41.4147 21.203 41.5276 20.8989C41.6405 20.5947 41.697 20.2652 41.697 19.9104C41.697 19.5556 41.6405 19.2249 41.5276 18.9185C41.4147 18.612 41.2407 18.3643 41.0057 18.1754C40.7707 17.9865 40.4712 17.892 40.1071 17.892C39.7431 17.892 39.4435 17.9865 39.2085 18.1754C38.9735 18.3643 38.7995 18.612 38.6866 18.9185C38.5737 19.2249 38.5173 19.5556 38.5173 19.9104C38.5173 20.2652 38.5737 20.5947 38.6866 20.8989C38.7995 21.203 38.9735 21.4484 39.2085 21.635C39.4435 21.8217 39.7431 21.915 40.1071 21.915ZM43.7577 22.5371V17.2284H44.5457V18.0579H44.6148C44.7254 17.7745 44.904 17.5544 45.1505 17.3978C45.3971 17.2388 45.6932 17.1593 46.0388 17.1593C46.389 17.1593 46.6805 17.2388 46.9132 17.3978C47.1482 17.5544 47.3314 17.7745 47.4627 18.0579H47.518C47.654 17.7837 47.8579 17.566 48.1298 17.4047C48.4017 17.2411 48.7277 17.1593 49.1079 17.1593C49.5825 17.1593 49.9708 17.3079 50.2726 17.6051C50.5745 17.9001 50.7254 18.3597 50.7254 18.9841V22.5371H49.9097V18.9841C49.9097 18.5924 49.8026 18.3125 49.5883 18.1443C49.374 17.9761 49.1217 17.892 48.8314 17.892C48.4581 17.892 48.1689 18.0049 47.9639 18.2307C47.7588 18.4542 47.6563 18.7376 47.6563 19.0809V22.5371H46.8268V18.9012C46.8268 18.5994 46.7289 18.3563 46.533 18.1719C46.3372 17.9853 46.0849 17.892 45.7761 17.892C45.5641 17.892 45.366 17.9484 45.1817 18.0613C44.9996 18.1743 44.8522 18.3309 44.7393 18.5314C44.6287 18.7295 44.5734 18.9588 44.5734 19.2192V22.5371H43.7577ZM52.2167 24.5279V17.2284H53.0047V18.0717H53.1015C53.1614 17.9796 53.2444 17.862 53.3503 17.7192C53.4586 17.574 53.613 17.445 53.8135 17.3321C54.0162 17.2169 54.2904 17.1593 54.636 17.1593C55.083 17.1593 55.4771 17.271 55.8181 17.4945C56.1591 17.718 56.4252 18.0349 56.6164 18.445C56.8077 18.8551 56.9033 19.339 56.9033 19.8966C56.9033 20.4588 56.8077 20.9461 56.6164 21.3585C56.4252 21.7687 56.1602 22.0867 55.8215 22.3125C55.4828 22.536 55.0923 22.6477 54.6499 22.6477C54.3089 22.6477 54.0358 22.5913 53.8308 22.4784C53.6257 22.3631 53.4679 22.233 53.3573 22.0878C53.2467 21.9403 53.1614 21.8182 53.1015 21.7214H53.0324V24.5279H52.2167ZM53.0186 19.8828C53.0186 20.2837 53.0773 20.6374 53.1948 20.9438C53.3123 21.248 53.484 21.4864 53.7098 21.6592C53.9356 21.8297 54.2121 21.915 54.5393 21.915C54.8803 21.915 55.1648 21.8251 55.393 21.6454C55.6234 21.4634 55.7962 21.2192 55.9114 20.9127C56.0289 20.6039 56.0876 20.2606 56.0876 19.8828C56.0876 19.5095 56.03 19.1731 55.9148 18.8736C55.8019 18.5717 55.6303 18.3332 55.3999 18.1581C55.1718 17.9807 54.8849 17.892 54.5393 17.892C54.2075 17.892 53.9287 17.9761 53.7029 18.1443C53.4771 18.3102 53.3066 18.5429 53.1914 18.8424C53.0762 19.1397 53.0186 19.4864 53.0186 19.8828ZM58.9632 15.4588V22.5371H58.1475V15.4588H58.9632ZM62.6829 22.6477C62.1714 22.6477 61.7302 22.5348 61.3592 22.309C60.9905 22.0809 60.706 21.7629 60.5055 21.3551C60.3074 20.945 60.2083 20.468 60.2083 19.9242C60.2083 19.3805 60.3074 18.9012 60.5055 18.4865C60.706 18.0694 60.9848 17.7445 61.3419 17.5118C61.7014 17.2768 62.1207 17.1593 62.6 17.1593C62.8765 17.1593 63.1495 17.2054 63.4191 17.2975C63.6887 17.3897 63.9341 17.5395 64.1552 17.7468C64.3764 17.9519 64.5527 18.2238 64.684 18.5625C64.8154 18.9012 64.881 19.3182 64.881 19.8136V20.1593H60.7889V19.4542H64.0516C64.0516 19.1547 63.9917 18.8874 63.8718 18.6524C63.7543 18.4173 63.5861 18.2319 63.3672 18.0959C63.1506 17.96 62.8949 17.892 62.6 17.892C62.2751 17.892 61.994 17.9726 61.7567 18.1339C61.5216 18.2929 61.3408 18.5003 61.214 18.756C61.0873 19.0118 61.0239 19.286 61.0239 19.5786V20.0487C61.0239 20.4496 61.0931 20.7894 61.2313 21.0682C61.3719 21.3447 61.5666 21.5556 61.8154 21.7007C62.0643 21.8436 62.3534 21.915 62.6829 21.915C62.8972 21.915 63.0907 21.885 63.2636 21.8251C63.4387 21.7629 63.5896 21.6708 63.7163 21.5486C63.843 21.4242 63.941 21.2698 64.0101 21.0855L64.7981 21.3067C64.7151 21.574 64.5758 21.809 64.3799 22.0118C64.184 22.2122 63.9421 22.3689 63.6541 22.4818C63.3661 22.5924 63.0424 22.6477 62.6829 22.6477ZM68.4306 17.2284V17.9196H65.6794V17.2284H68.4306ZM66.4813 15.9565H67.2969V21.0164C67.2969 21.2468 67.3303 21.4196 67.3972 21.5348C67.4663 21.6477 67.5538 21.7238 67.6598 21.7629C67.7681 21.7998 67.8822 21.8182 68.002 21.8182C68.0918 21.8182 68.1656 21.8136 68.2232 21.8044C68.2808 21.7929 68.3269 21.7837 68.3614 21.7767L68.5273 22.5095C68.472 22.5302 68.3948 22.5509 68.2958 22.5717C68.1967 22.5947 68.0711 22.6062 67.919 22.6062C67.6886 22.6062 67.4628 22.5567 67.2416 22.4576C67.0227 22.3585 66.8407 22.2076 66.6955 22.0049C66.5527 21.8021 66.4813 21.5463 66.4813 21.2376V15.9565ZM71.8263 22.6477C71.3147 22.6477 70.8735 22.5348 70.5025 22.309C70.1339 22.0809 69.8493 21.7629 69.6489 21.3551C69.4507 20.945 69.3516 20.468 69.3516 19.9242C69.3516 19.3805 69.4507 18.9012 69.6489 18.4865C69.8493 18.0694 70.1281 17.7445 70.4853 17.5118C70.8447 17.2768 71.264 17.1593 71.7433 17.1593C72.0198 17.1593 72.2928 17.2054 72.5624 17.2975C72.832 17.3897 73.0774 17.5395 73.2986 17.7468C73.5198 17.9519 73.6961 18.2238 73.8274 18.5625C73.9587 18.9012 74.0244 19.3182 74.0244 19.8136V20.1593H69.9323V19.4542H73.1949C73.1949 19.1547 73.135 18.8874 73.0152 18.6524C72.8977 18.4173 72.7295 18.2319 72.5106 18.0959C72.294 17.96 72.0382 17.892 71.7433 17.892C71.4184 17.892 71.1373 17.9726 70.9 18.1339C70.665 18.2929 70.4841 18.5003 70.3574 18.756C70.2306 19.0118 70.1673 19.286 70.1673 19.5786V20.0487C70.1673 20.4496 70.2364 20.7894 70.3747 21.0682C70.5152 21.3447 70.7099 21.5556 70.9588 21.7007C71.2076 21.8436 71.4968 21.915 71.8263 21.915C72.0405 21.915 72.2341 21.885 72.4069 21.8251C72.582 21.7629 72.7329 21.6708 72.8597 21.5486C72.9864 21.4242 73.0843 21.2698 73.1534 21.0855L73.9414 21.3067C73.8585 21.574 73.7191 21.809 73.5232 22.0118C73.3274 22.2122 73.0855 22.3689 72.7974 22.4818C72.5094 22.5924 72.1857 22.6477 71.8263 22.6477ZM77.2697 22.6477C76.8274 22.6477 76.4368 22.536 76.0981 22.3125C75.7594 22.0867 75.4944 21.7687 75.3032 21.3585C75.1119 20.9461 75.0163 20.4588 75.0163 19.8966C75.0163 19.339 75.1119 18.8551 75.3032 18.445C75.4944 18.0349 75.7605 17.718 76.1016 17.4945C76.4426 17.271 76.8366 17.1593 77.2836 17.1593C77.6292 17.1593 77.9022 17.2169 78.1027 17.3321C78.3055 17.445 78.4598 17.574 78.5658 17.7192C78.6741 17.862 78.7582 17.9796 78.8181 18.0717H78.8872V15.4588H79.7029V22.5371H78.9149V21.7214H78.8181C78.7582 21.8182 78.673 21.9403 78.5624 22.0878C78.4518 22.233 78.2939 22.3631 78.0889 22.4784C77.8838 22.5913 77.6108 22.6477 77.2697 22.6477ZM77.3803 21.915C77.7075 21.915 77.984 21.8297 78.2098 21.6592C78.4356 21.4864 78.6073 21.248 78.7248 20.9438C78.8423 20.6374 78.9011 20.2837 78.9011 19.8828C78.9011 19.4864 78.8435 19.1397 78.7283 18.8424C78.6131 18.5429 78.4425 18.3102 78.2167 18.1443C77.9909 17.9761 77.7121 17.892 77.3803 17.892C77.0347 17.892 76.7467 17.9807 76.5163 18.1581C76.2882 18.3332 76.1165 18.5717 76.0013 18.8736C75.8884 19.1731 75.832 19.5095 75.832 19.8828C75.832 20.2606 75.8896 20.6039 76.0048 20.9127C76.1223 21.2192 76.2951 21.4634 76.5232 21.6454C76.7536 21.8251 77.0393 21.915 77.3803 21.915ZM88.803 15.4588H89.6602V20.1454C89.6602 20.6293 89.5461 21.0613 89.318 21.4415C89.0922 21.8194 88.7731 22.1178 88.3606 22.3367C87.9482 22.5532 87.4643 22.6615 86.9091 22.6615C86.3538 22.6615 85.8699 22.5532 85.4575 22.3367C85.045 22.1178 84.7247 21.8194 84.4966 21.4415C84.2708 21.0613 84.1579 20.6293 84.1579 20.1454V15.4588H85.0151V20.0763C85.0151 20.4219 85.0911 20.7295 85.2432 20.9991C85.3952 21.2664 85.6118 21.4772 85.8929 21.6316C86.1763 21.7837 86.515 21.8597 86.9091 21.8597C87.3031 21.8597 87.6418 21.7837 87.9252 21.6316C88.2086 21.4772 88.4252 21.2664 88.5749 20.9991C88.727 20.7295 88.803 20.4219 88.803 20.0763V15.4588ZM91.2613 22.5371V17.2284H92.0493V18.0302H92.1046C92.2013 17.7676 92.3764 17.5544 92.6299 17.3908C92.8834 17.2273 93.1691 17.1455 93.487 17.1455C93.5469 17.1455 93.6218 17.1466 93.7117 17.1489C93.8016 17.1512 93.8695 17.1547 93.9156 17.1593V17.9888C93.888 17.9819 93.8246 17.9715 93.7255 17.9577C93.6287 17.9415 93.5262 17.9335 93.4179 17.9335C93.1599 17.9335 92.9294 17.9876 92.7267 18.0959C92.5262 18.2019 92.3672 18.3494 92.2497 18.5383C92.1345 18.7249 92.0769 18.9381 92.0769 19.1777V22.5371H91.2613ZM96.8637 24.6385C96.4697 24.6385 96.131 24.5878 95.8476 24.4864C95.5642 24.3873 95.328 24.256 95.1391 24.0924C94.9525 23.9311 94.8038 23.7583 94.6932 23.574L95.343 23.1177C95.4167 23.2145 95.5101 23.3251 95.623 23.4495C95.7359 23.5763 95.8902 23.6857 96.0861 23.7779C96.2842 23.8723 96.5435 23.9196 96.8637 23.9196C97.2923 23.9196 97.646 23.8159 97.9248 23.6085C98.2036 23.4012 98.343 23.0763 98.343 22.6339V21.5556H98.2739C98.2139 21.6523 98.1287 21.7721 98.0181 21.915C97.9098 22.0555 97.7531 22.1811 97.5481 22.2917C97.3453 22.4 97.0711 22.4542 96.7255 22.4542C96.2969 22.4542 95.9121 22.3528 95.5711 22.15C95.2324 21.9473 94.964 21.6523 94.7658 21.2652C94.57 20.8781 94.472 20.4081 94.472 19.8551C94.472 19.3113 94.5677 18.8378 94.7589 18.4346C94.9502 18.0291 95.2163 17.7157 95.5573 17.4945C95.8983 17.271 96.2923 17.1593 96.7393 17.1593C97.0849 17.1593 97.3591 17.2169 97.5619 17.3321C97.7669 17.445 97.9236 17.574 98.0319 17.7192C98.1425 17.862 98.2278 17.9796 98.2877 18.0717H98.3706V17.2284H99.1586V22.6892C99.1586 23.1454 99.055 23.5164 98.8476 23.8021C98.6425 24.0901 98.366 24.3009 98.0181 24.4346C97.6725 24.5705 97.2877 24.6385 96.8637 24.6385ZM96.8361 21.7214C97.1633 21.7214 97.4398 21.6466 97.6656 21.4968C97.8914 21.347 98.063 21.1316 98.1805 20.8505C98.298 20.5694 98.3568 20.233 98.3568 19.8413C98.3568 19.4588 98.2992 19.1212 98.184 18.8286C98.0688 18.536 97.8983 18.3067 97.6725 18.1408C97.4467 17.9749 97.1679 17.892 96.8361 17.892C96.4905 17.892 96.2024 17.9796 95.972 18.1547C95.7439 18.3298 95.5723 18.5648 95.4571 18.8597C95.3442 19.1547 95.2877 19.4818 95.2877 19.8413C95.2877 20.2099 95.3453 20.536 95.4605 20.8194C95.578 21.1005 95.7508 21.3217 95.9789 21.483C96.2094 21.642 96.4951 21.7214 96.8361 21.7214ZM102.877 22.6477C102.366 22.6477 101.925 22.5348 101.554 22.309C101.185 22.0809 100.901 21.7629 100.7 21.3551C100.502 20.945 100.403 20.468 100.403 19.9242C100.403 19.3805 100.502 18.9012 100.7 18.4865C100.901 18.0694 101.179 17.7445 101.536 17.5118C101.896 17.2768 102.315 17.1593 102.795 17.1593C103.071 17.1593 103.344 17.2054 103.614 17.2975C103.883 17.3897 104.129 17.5395 104.35 17.7468C104.571 17.9519 104.747 18.2238 104.879 18.5625C105.01 18.9012 105.076 19.3182 105.076 19.8136V20.1593H100.984V19.4542H104.246C104.246 19.1547 104.186 18.8874 104.066 18.6524C103.949 18.4173 103.781 18.2319 103.562 18.0959C103.345 17.96 103.089 17.892 102.795 17.892C102.47 17.892 102.189 17.9726 101.951 18.1339C101.716 18.2929 101.535 18.5003 101.409 18.756C101.282 19.0118 101.219 19.286 101.219 19.5786V20.0487C101.219 20.4496 101.288 20.7894 101.426 21.0682C101.566 21.3447 101.761 21.5556 102.01 21.7007C102.259 21.8436 102.548 21.915 102.877 21.915C103.092 21.915 103.285 21.885 103.458 21.8251C103.633 21.7629 103.784 21.6708 103.911 21.5486C104.038 21.4242 104.136 21.2698 104.205 21.0855L104.993 21.3067C104.91 21.574 104.77 21.809 104.574 22.0118C104.379 22.2122 104.137 22.3689 103.849 22.4818C103.561 22.5924 103.237 22.6477 102.877 22.6477ZM107.132 19.3436V22.5371H106.316V17.2284H107.104V18.0579H107.174C107.298 17.7883 107.487 17.5717 107.74 17.4081C107.994 17.2422 108.321 17.1593 108.722 17.1593C109.081 17.1593 109.396 17.233 109.665 17.3805C109.935 17.5256 110.145 17.7468 110.294 18.0441C110.444 18.339 110.519 18.7123 110.519 19.1639V22.5371H109.703V19.2192C109.703 18.8021 109.595 18.4772 109.379 18.2445C109.162 18.0095 108.865 17.892 108.487 17.892C108.227 17.892 107.994 17.9484 107.789 18.0613C107.586 18.1743 107.426 18.339 107.308 18.5556C107.191 18.7722 107.132 19.0348 107.132 19.3436ZM114.318 17.2284V17.9196H111.567V17.2284H114.318ZM112.369 15.9565H113.185V21.0164C113.185 21.2468 113.218 21.4196 113.285 21.5348C113.354 21.6477 113.442 21.7238 113.548 21.7629C113.656 21.7998 113.77 21.8182 113.89 21.8182C113.98 21.8182 114.053 21.8136 114.111 21.8044C114.169 21.7929 114.215 21.7837 114.249 21.7767L114.415 22.5095C114.36 22.5302 114.283 22.5509 114.184 22.5717C114.084 22.5947 113.959 22.6062 113.807 22.6062C113.576 22.6062 113.351 22.5567 113.129 22.4576C112.911 22.3585 112.728 22.2076 112.583 22.0049C112.44 21.8021 112.369 21.5463 112.369 21.2376V15.9565ZM119.25 15.4588V22.5371H118.393V15.4588H119.25ZM124.619 18.4173L123.886 18.6247C123.84 18.5026 123.772 18.3839 123.682 18.2687C123.594 18.1512 123.475 18.0544 123.323 17.9784C123.17 17.9024 122.976 17.8643 122.738 17.8643C122.414 17.8643 122.143 17.9392 121.926 18.089C121.712 18.2365 121.605 18.4242 121.605 18.6524C121.605 18.8551 121.679 19.0153 121.826 19.1328C121.973 19.2503 122.204 19.3482 122.517 19.4265L123.305 19.6201C123.78 19.7353 124.134 19.9116 124.366 20.1489C124.599 20.3839 124.715 20.6869 124.715 21.0579C124.715 21.362 124.628 21.6339 124.453 21.8735C124.28 22.1132 124.038 22.3021 123.727 22.4403C123.416 22.5786 123.054 22.6477 122.642 22.6477C122.1 22.6477 121.652 22.5302 121.297 22.2952C120.942 22.0602 120.718 21.7168 120.623 21.2652L121.397 21.0717C121.471 21.3574 121.611 21.5717 121.816 21.7145C122.023 21.8574 122.294 21.9288 122.628 21.9288C123.008 21.9288 123.31 21.8482 123.533 21.6869C123.759 21.5233 123.872 21.3274 123.872 21.0993C123.872 20.915 123.808 20.7606 123.679 20.6362C123.55 20.5095 123.351 20.415 123.084 20.3528L122.199 20.1454C121.713 20.0302 121.356 19.8517 121.128 19.6097C120.902 19.3655 120.789 19.0602 120.789 18.6938C120.789 18.3943 120.873 18.1293 121.041 17.8989C121.212 17.6685 121.444 17.4876 121.736 17.3563C122.031 17.225 122.365 17.1593 122.738 17.1593C123.264 17.1593 123.676 17.2745 123.976 17.5049C124.278 17.7353 124.492 18.0395 124.619 18.4173ZM129.704 18.4173L128.971 18.6247C128.925 18.5026 128.857 18.3839 128.767 18.2687C128.679 18.1512 128.56 18.0544 128.407 17.9784C128.255 17.9024 128.061 17.8643 127.823 17.8643C127.498 17.8643 127.228 17.9392 127.011 18.089C126.797 18.2365 126.69 18.4242 126.69 18.6524C126.69 18.8551 126.763 19.0153 126.911 19.1328C127.058 19.2503 127.289 19.3482 127.602 19.4265L128.39 19.6201C128.865 19.7353 129.219 19.9116 129.451 20.1489C129.684 20.3839 129.8 20.6869 129.8 21.0579C129.8 21.362 129.713 21.6339 129.538 21.8735C129.365 22.1132 129.123 22.3021 128.812 22.4403C128.501 22.5786 128.139 22.6477 127.727 22.6477C127.185 22.6477 126.737 22.5302 126.382 22.2952C126.027 22.0602 125.803 21.7168 125.708 21.2652L126.482 21.0717C126.556 21.3574 126.696 21.5717 126.901 21.7145C127.108 21.8574 127.379 21.9288 127.713 21.9288C128.093 21.9288 128.395 21.8482 128.618 21.6869C128.844 21.5233 128.957 21.3274 128.957 21.0993C128.957 20.915 128.892 20.7606 128.763 20.6362C128.634 20.5095 128.436 20.415 128.169 20.3528L127.284 20.1454C126.798 20.0302 126.441 19.8517 126.213 19.6097C125.987 19.3655 125.874 19.0602 125.874 18.6938C125.874 18.3943 125.958 18.1293 126.126 17.8989C126.297 17.6685 126.528 17.4876 126.821 17.3563C127.116 17.225 127.45 17.1593 127.823 17.1593C128.349 17.1593 128.761 17.2745 129.061 17.5049C129.363 17.7353 129.577 18.0395 129.704 18.4173ZM134.374 20.3666V17.2284H135.189V22.5371H134.374V21.6385H134.318C134.194 21.9081 134 22.1373 133.738 22.3263C133.475 22.5129 133.143 22.6062 132.742 22.6062C132.411 22.6062 132.116 22.5337 131.858 22.3885C131.6 22.241 131.397 22.0198 131.249 21.7249C131.102 21.4277 131.028 21.0533 131.028 20.6016V17.2284H131.844V20.5463C131.844 20.9334 131.952 21.2422 132.169 21.4726C132.388 21.703 132.666 21.8182 133.005 21.8182C133.208 21.8182 133.414 21.7664 133.624 21.6627C133.836 21.559 134.013 21.4 134.156 21.1857C134.301 20.9715 134.374 20.6984 134.374 20.3666ZM138.909 22.6477C138.398 22.6477 137.956 22.5348 137.585 22.309C137.217 22.0809 136.932 21.7629 136.732 21.3551C136.534 20.945 136.434 20.468 136.434 19.9242C136.434 19.3805 136.534 18.9012 136.732 18.4865C136.932 18.0694 137.211 17.7445 137.568 17.5118C137.928 17.2768 138.347 17.1593 138.826 17.1593C139.103 17.1593 139.376 17.2054 139.645 17.2975C139.915 17.3897 140.16 17.5395 140.381 17.7468C140.603 17.9519 140.779 18.2238 140.91 18.5625C141.042 18.9012 141.107 19.3182 141.107 19.8136V20.1593H137.015V19.4542H140.278C140.278 19.1547 140.218 18.8874 140.098 18.6524C139.981 18.4173 139.812 18.2319 139.593 18.0959C139.377 17.96 139.121 17.892 138.826 17.892C138.501 17.892 138.22 17.9726 137.983 18.1339C137.748 18.2929 137.567 18.5003 137.44 18.756C137.313 19.0118 137.25 19.286 137.25 19.5786V20.0487C137.25 20.4496 137.319 20.7894 137.457 21.0682C137.598 21.3447 137.793 21.5556 138.042 21.7007C138.29 21.8436 138.58 21.915 138.909 21.915C139.123 21.915 139.317 21.885 139.49 21.8251C139.665 21.7629 139.816 21.6708 139.942 21.5486C140.069 21.4242 140.167 21.2698 140.236 21.0855L141.024 21.3067C140.941 21.574 140.802 21.809 140.606 22.0118C140.41 22.2122 140.168 22.3689 139.88 22.4818C139.592 22.5924 139.269 22.6477 138.909 22.6477ZM146.108 18.4173L145.376 18.6247C145.33 18.5026 145.262 18.3839 145.172 18.2687C145.084 18.1512 144.964 18.0544 144.812 17.9784C144.66 17.9024 144.465 17.8643 144.228 17.8643C143.903 17.8643 143.633 17.9392 143.416 18.089C143.202 18.2365 143.095 18.4242 143.095 18.6524C143.095 18.8551 143.168 19.0153 143.316 19.1328C143.463 19.2503 143.694 19.3482 144.007 19.4265L144.795 19.6201C145.27 19.7353 145.623 19.9116 145.856 20.1489C146.089 20.3839 146.205 20.6869 146.205 21.0579C146.205 21.362 146.118 21.6339 145.942 21.8735C145.77 22.1132 145.528 22.3021 145.217 22.4403C144.906 22.5786 144.544 22.6477 144.131 22.6477C143.59 22.6477 143.142 22.5302 142.787 22.2952C142.432 22.0602 142.207 21.7168 142.113 21.2652L142.887 21.0717C142.961 21.3574 143.1 21.5717 143.305 21.7145C143.513 21.8574 143.783 21.9288 144.118 21.9288C144.498 21.9288 144.8 21.8482 145.023 21.6869C145.249 21.5233 145.362 21.3274 145.362 21.0993C145.362 20.915 145.297 20.7606 145.168 20.6362C145.039 20.5095 144.841 20.415 144.574 20.3528L143.689 20.1454C143.203 20.0302 142.846 19.8517 142.618 19.6097C142.392 19.3655 142.279 19.0602 142.279 18.6938C142.279 18.3943 142.363 18.1293 142.531 17.8989C142.702 17.6685 142.933 17.4876 143.226 17.3563C143.521 17.225 143.855 17.1593 144.228 17.1593C144.754 17.1593 145.166 17.2745 145.465 17.5049C145.767 17.7353 145.982 18.0395 146.108 18.4173Z" fill="#858E96"/>
+<rect x="30.1926" y="31.6926" width="88.9918" height="10.7869" rx="1.34836" fill="white"/>
+<circle cx="82.3717" cy="37.279" r="2.93521" fill="white"/>
+<circle cx="82.3722" cy="37.2784" r="2.64169" stroke="#FCBE1D" stroke-width="0.293521" stroke-linecap="round" stroke-dasharray="0 5.87 0 2.94"/>
+<path d="M83.6306 35.6552C83.2676 35.3739 82.8209 35.2223 82.3618 35.2246C81.9026 35.2269 81.4574 35.383 81.0973 35.6678L82.372 37.2793L83.6306 35.6552Z" fill="#FCBE1D"/>
+<path d="M81.1106 38.9015C81.4736 39.1827 81.9203 39.3343 82.3794 39.332C82.8386 39.3297 83.2838 39.1737 83.6439 38.8888L82.3692 37.2774L81.1106 38.9015Z" fill="#FCBE1D"/>
+<circle cx="79.1432" cy="37.279" r="2.93521" fill="white"/>
+<circle cx="79.1427" cy="37.2784" r="2.64169" stroke="#858E96" stroke-width="0.293521" stroke-linecap="round" stroke-dasharray="0 5.87 0 2.94"/>
+<circle cx="75.9137" cy="37.279" r="2.93521" fill="white"/>
+<circle cx="75.9132" cy="37.2784" r="2.64169" stroke="#ACB5BD" stroke-width="0.293521" stroke-linecap="round" stroke-dasharray="1.17 1.17"/>
+<path d="M113.397 37.5148L112.217 38.6946C112.183 38.7283 112.144 38.7452 112.099 38.7452C112.054 38.7452 112.015 38.7283 111.981 38.6946C111.948 38.6609 111.931 38.6216 111.931 38.5766C111.931 38.5317 111.948 38.4924 111.981 38.4587L113.161 37.2788L111.981 36.099C111.948 36.0653 111.931 36.026 111.931 35.981C111.931 35.9361 111.948 35.8968 111.981 35.8631C112.015 35.8294 112.054 35.8125 112.099 35.8125C112.144 35.8125 112.183 35.8294 112.217 35.8631L113.397 37.0429L114.577 35.8631C114.611 35.8294 114.65 35.8125 114.695 35.8125C114.74 35.8125 114.779 35.8294 114.813 35.8631C114.846 35.8968 114.863 35.9361 114.863 35.981C114.863 36.026 114.846 36.0653 114.813 36.099L113.633 37.2788L114.813 38.4587C114.846 38.4924 114.863 38.5317 114.863 38.5766C114.863 38.6216 114.846 38.6609 114.813 38.6946C114.779 38.7283 114.74 38.7452 114.695 38.7452C114.65 38.7452 114.611 38.7283 114.577 38.6946L113.397 37.5148Z" fill="black"/>
+<rect x="34" y="35.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
+<rect x="88" y="35.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
+<rect x="30.1926" y="31.6926" width="88.9918" height="10.7869" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+<rect x="122.193" y="46.6926" width="73.6148" height="10.6148" rx="1.34836" fill="white"/>
+<path d="M190.397 52.5148L189.217 53.6946C189.183 53.7283 189.144 53.7452 189.099 53.7452C189.054 53.7452 189.015 53.7283 188.981 53.6946C188.948 53.6609 188.931 53.6216 188.931 53.5766C188.931 53.5317 188.948 53.4924 188.981 53.4587L190.161 52.2788L188.981 51.099C188.948 51.0653 188.931 51.026 188.931 50.981C188.931 50.9361 188.948 50.8968 188.981 50.8631C189.015 50.8294 189.054 50.8125 189.099 50.8125C189.144 50.8125 189.183 50.8294 189.217 50.8631L190.397 52.0429L191.577 50.8631C191.611 50.8294 191.65 50.8125 191.695 50.8125C191.74 50.8125 191.779 50.8294 191.813 50.8631C191.846 50.8968 191.863 50.9361 191.863 50.981C191.863 51.026 191.846 51.0653 191.813 51.099L190.633 52.2788L191.813 53.4587C191.846 53.4924 191.863 53.5317 191.863 53.5766C191.863 53.6216 191.846 53.6609 191.813 53.6946C191.779 53.7283 191.74 53.7452 191.695 53.7452C191.65 53.7452 191.611 53.7283 191.577 53.6946L190.397 52.5148Z" fill="black"/>
+<rect x="126" y="50.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
+<rect x="165" y="50.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
+<rect x="122.193" y="46.6926" width="73.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+<rect x="214.193" y="31.6926" width="73.6148" height="10.6148" rx="1.34836" fill="white"/>
+<path d="M282.397 37.5148L281.217 38.6946C281.183 38.7283 281.144 38.7452 281.099 38.7452C281.054 38.7452 281.015 38.7283 280.981 38.6946C280.948 38.6609 280.931 38.6216 280.931 38.5766C280.931 38.5317 280.948 38.4924 280.981 38.4587L282.161 37.2788L280.981 36.099C280.948 36.0653 280.931 36.026 280.931 35.981C280.931 35.9361 280.948 35.8968 280.981 35.8631C281.015 35.8294 281.054 35.8125 281.099 35.8125C281.144 35.8125 281.183 35.8294 281.217 35.8631L282.397 37.0429L283.577 35.8631C283.611 35.8294 283.65 35.8125 283.695 35.8125C283.74 35.8125 283.779 35.8294 283.813 35.8631C283.846 35.8968 283.863 35.9361 283.863 35.981C283.863 36.026 283.846 36.0653 283.813 36.099L282.633 37.2788L283.813 38.4587C283.846 38.4924 283.863 38.5317 283.863 38.5766C283.863 38.6216 283.846 38.6609 283.813 38.6946C283.779 38.7283 283.74 38.7452 283.695 38.7452C283.65 38.7452 283.611 38.7283 283.577 38.6946L282.397 37.5148Z" fill="black"/>
+<rect x="218" y="35.5" width="24" height="4" rx="2" fill="#DEE2E6"/>
+<rect x="245" y="35.5" width="32" height="4" rx="2" fill="#ACB5BD"/>
+<rect x="214.193" y="31.6926" width="73.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+<rect x="122.193" y="31.6926" width="88.6148" height="10.6148" rx="1.34836" fill="white"/>
+<circle cx="173.397" cy="37.2785" r="2.9308" fill="white"/>
+<circle cx="173.386" cy="37.2691" r="2.62849" fill="url(#pattern0)"/>
+<circle cx="173.386" cy="37.2691" r="2.62849" fill="#F7AE59"/>
+<circle cx="170.163" cy="37.2785" r="2.9308" fill="white"/>
+<circle cx="170.153" cy="37.2691" r="2.62849" fill="url(#pattern1)"/>
+<circle cx="170.153" cy="37.2691" r="2.62849" fill="#05C3FF"/>
+<circle cx="166.931" cy="37.2785" r="2.9308" fill="white"/>
+<circle cx="166.92" cy="37.2691" r="2.62849" fill="url(#pattern2)"/>
+<circle cx="166.92" cy="37.2691" r="2.62849" fill="#2C435F"/>
+<path d="M205.697 37.5148L204.517 38.6946C204.483 38.7283 204.444 38.7452 204.399 38.7452C204.354 38.7452 204.315 38.7283 204.281 38.6946C204.247 38.6609 204.23 38.6216 204.23 38.5766C204.23 38.5317 204.247 38.4924 204.281 38.4587L205.461 37.2788L204.281 36.099C204.247 36.0653 204.23 36.026 204.23 35.981C204.23 35.9361 204.247 35.8968 204.281 35.8631C204.315 35.8294 204.354 35.8125 204.399 35.8125C204.444 35.8125 204.483 35.8294 204.517 35.8631L205.697 37.0429L206.877 35.8631C206.91 35.8294 206.95 35.8125 206.995 35.8125C207.04 35.8125 207.079 35.8294 207.113 35.8631C207.146 35.8968 207.163 35.9361 207.163 35.981C207.163 36.026 207.146 36.0653 207.113 36.099L205.933 37.2788L207.113 38.4587C207.146 38.4924 207.163 38.5317 207.163 38.5766C207.163 38.6216 207.146 38.6609 207.113 38.6946C207.079 38.7283 207.04 38.7452 206.995 38.7452C206.95 38.7452 206.91 38.7283 206.877 38.6946L205.697 37.5148Z" fill="#858E96"/>
+<rect x="125" y="35.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
+<rect x="179" y="35.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
+<rect x="122.193" y="31.6926" width="88.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+<rect x="30.1926" y="46.6926" width="88.6148" height="10.6148" rx="1.34836" fill="white"/>
+<path d="M113.697 52.5148L112.517 53.6946C112.483 53.7283 112.444 53.7452 112.399 53.7452C112.354 53.7452 112.315 53.7283 112.281 53.6946C112.247 53.6609 112.23 53.6216 112.23 53.5766C112.23 53.5317 112.247 53.4924 112.281 53.4587L113.461 52.2788L112.281 51.099C112.247 51.0653 112.23 51.026 112.23 50.981C112.23 50.9361 112.247 50.8968 112.281 50.8631C112.315 50.8294 112.354 50.8125 112.399 50.8125C112.444 50.8125 112.483 50.8294 112.517 50.8631L113.697 52.0429L114.877 50.8631C114.91 50.8294 114.95 50.8125 114.995 50.8125C115.04 50.8125 115.079 50.8294 115.113 50.8631C115.146 50.8968 115.163 50.9361 115.163 50.981C115.163 51.026 115.146 51.0653 115.113 51.099L113.933 52.2788L115.113 53.4587C115.146 53.4924 115.163 53.5317 115.163 53.5766C115.163 53.6216 115.146 53.6609 115.113 53.6946C115.079 53.7283 115.04 53.7452 114.995 53.7452C114.95 53.7452 114.91 53.7283 114.877 53.6946L113.697 52.5148Z" fill="#858E96"/>
+<rect x="33" y="50.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
+<rect x="87" y="50.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
+<circle cx="81.1477" cy="52.3527" r="2.85274" fill="white"/>
+<circle cx="81.1481" cy="52.3532" r="2.5934" fill="#ADF772"/>
+<circle cx="78.0002" cy="52.3527" r="2.85274" fill="white"/>
+<circle cx="77.9996" cy="52.3532" r="2.5934" fill="#096E8D"/>
+<circle cx="74.8527" cy="52.3527" r="2.85274" fill="white"/>
+<circle cx="74.8532" cy="52.3532" r="2.5934" fill="#FF6B00"/>
+<rect x="30.1926" y="46.6926" width="88.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+</g>
+<g filter="url(#filter1_d_2884_60024)">
+<rect x="3" y="21.5" width="279" height="65" rx="5.5615" fill="white"/>
+<path d="M15.2705 40.5371H14.3719L16.9709 33.4588H17.8557L20.4548 40.5371H19.5562L17.441 34.5786H17.3857L15.2705 40.5371ZM15.6023 37.7722H19.2244V38.5325H15.6023V37.7722ZM23.6034 40.6477C23.1057 40.6477 22.6771 40.5302 22.3177 40.2952C21.9582 40.0602 21.6817 39.7364 21.4882 39.324C21.2946 38.9115 21.1979 38.4404 21.1979 37.9104C21.1979 37.3712 21.2969 36.8954 21.4951 36.483C21.6956 36.0683 21.9743 35.7445 22.3315 35.5118C22.6909 35.2768 23.1103 35.1593 23.5895 35.1593C23.9628 35.1593 24.2992 35.2284 24.5987 35.3667C24.8983 35.5049 25.1437 35.6984 25.3349 35.9473C25.5262 36.1961 25.6448 36.4865 25.6909 36.8183H24.8752C24.813 36.5763 24.6748 36.362 24.4605 36.1754C24.2485 35.9865 23.9628 35.892 23.6034 35.892C23.2854 35.892 23.0066 35.9749 22.767 36.1408C22.5296 36.3044 22.3442 36.536 22.2105 36.8355C22.0792 37.1328 22.0135 37.4818 22.0135 37.8828C22.0135 38.2929 22.078 38.65 22.2071 38.9542C22.3384 39.2583 22.5227 39.4945 22.7601 39.6627C22.9997 39.8309 23.2808 39.915 23.6034 39.915C23.8153 39.915 24.0077 39.8781 24.1805 39.8044C24.3534 39.7307 24.4997 39.6247 24.6195 39.4864C24.7393 39.3482 24.8246 39.1823 24.8752 38.9887H25.6909C25.6448 39.3021 25.5308 39.5844 25.3487 39.8355C25.169 40.0843 24.9305 40.2825 24.6333 40.43C24.3384 40.5751 23.9951 40.6477 23.6034 40.6477ZM29.192 35.2284V35.9196H26.4409V35.2284H29.192ZM27.2427 33.9565H28.0584V39.0164C28.0584 39.2468 28.0918 39.4196 28.1586 39.5348C28.2277 39.6477 28.3153 39.7238 28.4213 39.7629C28.5296 39.7998 28.6436 39.8182 28.7635 39.8182C28.8533 39.8182 28.927 39.8136 28.9846 39.8044C29.0422 39.7929 29.0883 39.7837 29.1229 39.7767L29.2888 40.5095C29.2335 40.5302 29.1563 40.5509 29.0572 40.5717C28.9581 40.5947 28.8326 40.6062 28.6805 40.6062C28.4501 40.6062 28.2243 40.5567 28.0031 40.4576C27.7842 40.3585 27.6022 40.2076 27.457 40.0049C27.3142 39.8021 27.2427 39.5463 27.2427 39.2376V33.9565ZM30.419 40.5371V35.2284H31.2346V40.5371H30.419ZM30.8337 34.3436C30.6747 34.3436 30.5376 34.2895 30.4224 34.1812C30.3095 34.0729 30.2531 33.9427 30.2531 33.7906C30.2531 33.6386 30.3095 33.5084 30.4224 33.4001C30.5376 33.2918 30.6747 33.2376 30.8337 33.2376C30.9927 33.2376 31.1286 33.2918 31.2415 33.4001C31.3567 33.5084 31.4143 33.6386 31.4143 33.7906C31.4143 33.9427 31.3567 34.0729 31.2415 34.1812C31.1286 34.2895 30.9927 34.3436 30.8337 34.3436ZM37.0695 35.2284L35.1064 40.5371H34.2769L32.3138 35.2284H33.1986L34.664 39.4588H34.7193L36.1847 35.2284H37.0695ZM40.1818 40.6477C39.6703 40.6477 39.2291 40.5348 38.8581 40.309C38.4894 40.0809 38.2049 39.7629 38.0044 39.3551C37.8063 38.945 37.7072 38.468 37.7072 37.9242C37.7072 37.3805 37.8063 36.9012 38.0044 36.4865C38.2049 36.0694 38.4837 35.7445 38.8408 35.5118C39.2003 35.2768 39.6196 35.1593 40.0989 35.1593C40.3754 35.1593 40.6484 35.2054 40.918 35.2975C41.1876 35.3897 41.433 35.5395 41.6542 35.7468C41.8754 35.9519 42.0516 36.2238 42.183 36.5625C42.3143 36.9012 42.38 37.3182 42.38 37.8136V38.1593H38.2878V37.4542H41.5505C41.5505 37.1547 41.4906 36.8874 41.3708 36.6524C41.2532 36.4173 41.085 36.2319 40.8662 36.0959C40.6496 35.96 40.3938 35.892 40.0989 35.892C39.774 35.892 39.4929 35.9726 39.2556 36.1339C39.0205 36.2929 38.8397 36.5003 38.7129 36.756C38.5862 37.0118 38.5229 37.286 38.5229 37.5786V38.0487C38.5229 38.4496 38.592 38.7894 38.7302 39.0682C38.8708 39.3447 39.0655 39.5556 39.3143 39.7007C39.5632 39.8436 39.8523 39.915 40.1818 39.915C40.3961 39.915 40.5897 39.885 40.7625 39.8251C40.9376 39.7629 41.0885 39.6708 41.2152 39.5486C41.342 39.4242 41.4399 39.2698 41.509 39.0855L42.297 39.3067C42.2141 39.574 42.0747 39.809 41.8788 40.0118C41.683 40.2122 41.441 40.3689 41.153 40.4818C40.865 40.5924 40.5413 40.6477 40.1818 40.6477ZM46.4686 40.5371V33.4588H47.3258V36.6109H51.0999V33.4588H51.9571V40.5371H51.0999V37.3712H47.3258V40.5371H46.4686ZM53.5625 40.5371V35.2284H54.3781V40.5371H53.5625ZM53.9772 34.3436C53.8182 34.3436 53.6811 34.2895 53.5659 34.1812C53.453 34.0729 53.3966 33.9427 53.3966 33.7906C53.3966 33.6386 53.453 33.5084 53.5659 33.4001C53.6811 33.2918 53.8182 33.2376 53.9772 33.2376C54.1362 33.2376 54.2721 33.2918 54.385 33.4001C54.5002 33.5084 54.5578 33.6386 54.5578 33.7906C54.5578 33.9427 54.5002 34.0729 54.385 34.1812C54.2721 34.2895 54.1362 34.3436 53.9772 34.3436ZM58.0149 42.6385C57.6209 42.6385 57.2822 42.5878 56.9988 42.4864C56.7154 42.3873 56.4792 42.256 56.2902 42.0924C56.1036 41.9311 55.955 41.7583 55.8444 41.574L56.4942 41.1177C56.5679 41.2145 56.6612 41.3251 56.7741 41.4495C56.887 41.5763 57.0414 41.6857 57.2372 41.7779C57.4354 41.8723 57.6946 41.9196 58.0149 41.9196C58.4435 41.9196 58.7971 41.8159 59.0759 41.6085C59.3547 41.4012 59.4941 41.0763 59.4941 40.6339V39.5556H59.425C59.3651 39.6523 59.2798 39.7721 59.1692 39.915C59.061 40.0555 58.9043 40.1811 58.6992 40.2917C58.4964 40.4 58.2223 40.4542 57.8766 40.4542C57.4481 40.4542 57.0633 40.3528 56.7223 40.15C56.3836 39.9473 56.1151 39.6523 55.917 39.2652C55.7211 38.8781 55.6232 38.4081 55.6232 37.8551C55.6232 37.3113 55.7188 36.8378 55.9101 36.4346C56.1013 36.0291 56.3674 35.7157 56.7084 35.4945C57.0495 35.271 57.4435 35.1593 57.8905 35.1593C58.2361 35.1593 58.5103 35.2169 58.713 35.3321C58.9181 35.445 59.0748 35.574 59.1831 35.7192C59.2937 35.862 59.3789 35.9796 59.4388 36.0717H59.5218V35.2284H60.3098V40.6892C60.3098 41.1454 60.2061 41.5164 59.9987 41.8021C59.7937 42.0901 59.5172 42.3009 59.1692 42.4346C58.8236 42.5705 58.4388 42.6385 58.0149 42.6385ZM57.9872 39.7214C58.3144 39.7214 58.5909 39.6466 58.8167 39.4968C59.0425 39.347 59.2142 39.1316 59.3317 38.8505C59.4492 38.5694 59.508 38.233 59.508 37.8413C59.508 37.4588 59.4504 37.1212 59.3351 36.8286C59.2199 36.536 59.0494 36.3067 58.8236 36.1408C58.5978 35.9749 58.319 35.892 57.9872 35.892C57.6416 35.892 57.3536 35.9796 57.1232 36.1547C56.8951 36.3298 56.7234 36.5648 56.6082 36.8597C56.4953 37.1547 56.4389 37.4818 56.4389 37.8413C56.4389 38.2099 56.4965 38.536 56.6117 38.8194C56.7292 39.1005 56.902 39.3217 57.1301 39.483C57.3605 39.642 57.6462 39.7214 57.9872 39.7214ZM62.6185 37.3436V40.5371H61.8029V33.4588H62.6185V36.0579H62.6876C62.8121 35.7837 62.9987 35.566 63.2475 35.4047C63.4987 35.2411 63.8328 35.1593 64.2498 35.1593C64.6116 35.1593 64.9284 35.2319 65.2003 35.377C65.4722 35.5199 65.683 35.7399 65.8328 36.0372C65.9848 36.3321 66.0609 36.7077 66.0609 37.1639V40.5371H65.2452V37.2192C65.2452 36.7975 65.1358 36.4715 64.9169 36.2411C64.7003 36.0084 64.3996 35.892 64.0148 35.892C63.7475 35.892 63.5079 35.9484 63.2959 36.0613C63.0863 36.1743 62.9204 36.339 62.7982 36.5556C62.6784 36.7722 62.6185 37.0348 62.6185 37.3436ZM70.401 40.5371V33.4588H72.7927C73.348 33.4588 73.8019 33.5591 74.1544 33.7595C74.5092 33.9577 74.7719 34.2261 74.9424 34.5648C75.1129 34.9035 75.1982 35.2814 75.1982 35.6984C75.1982 36.1155 75.1129 36.4945 74.9424 36.8355C74.7742 37.1765 74.5138 37.4484 74.1613 37.6512C73.8088 37.8517 73.3572 37.9519 72.8065 37.9519H71.0922V37.1915H72.7788C73.159 37.1915 73.4643 37.1259 73.6947 36.9945C73.9251 36.8632 74.0922 36.6858 74.1959 36.4623C74.3019 36.2365 74.3549 35.9819 74.3549 35.6984C74.3549 35.415 74.3019 35.1616 74.1959 34.9381C74.0922 34.7146 73.924 34.5395 73.6913 34.4127C73.4586 34.2837 73.1498 34.2192 72.765 34.2192H71.2581V40.5371H70.401ZM76.4683 40.5371V35.2284H77.2563V36.0302H77.3116C77.4084 35.7676 77.5835 35.5544 77.837 35.3908C78.0904 35.2273 78.3761 35.1455 78.6941 35.1455C78.754 35.1455 78.8289 35.1466 78.9188 35.1489C79.0086 35.1512 79.0766 35.1547 79.1227 35.1593V35.9888C79.095 35.9819 79.0317 35.9715 78.9326 35.9577C78.8358 35.9415 78.7333 35.9335 78.625 35.9335C78.3669 35.9335 78.1365 35.9876 77.9337 36.0959C77.7333 36.2019 77.5743 36.3494 77.4568 36.5383C77.3416 36.7249 77.284 36.9381 77.284 37.1777V40.5371H76.4683ZM80.0895 40.5371V35.2284H80.9052V40.5371H80.0895ZM80.5043 34.3436C80.3453 34.3436 80.2082 34.2895 80.093 34.1812C79.9801 34.0729 79.9236 33.9427 79.9236 33.7906C79.9236 33.6386 79.9801 33.5084 80.093 33.4001C80.2082 33.2918 80.3453 33.2376 80.5043 33.2376C80.6633 33.2376 80.7992 33.2918 80.9121 33.4001C81.0273 33.5084 81.0849 33.6386 81.0849 33.7906C81.0849 33.9427 81.0273 34.0729 80.9121 34.1812C80.7992 34.2895 80.6633 34.3436 80.5043 34.3436ZM84.5558 40.6477C84.0765 40.6477 83.656 40.5337 83.2943 40.3055C82.9348 40.0774 82.6537 39.7583 82.451 39.3482C82.2505 38.938 82.1503 38.4588 82.1503 37.9104C82.1503 37.3574 82.2505 36.8747 82.451 36.4623C82.6537 36.0498 82.9348 35.7296 83.2943 35.5014C83.656 35.2733 84.0765 35.1593 84.5558 35.1593C85.0351 35.1593 85.4544 35.2733 85.8139 35.5014C86.1756 35.7296 86.4567 36.0498 86.6572 36.4623C86.8599 36.8747 86.9613 37.3574 86.9613 37.9104C86.9613 38.4588 86.8599 38.938 86.6572 39.3482C86.4567 39.7583 86.1756 40.0774 85.8139 40.3055C85.4544 40.5337 85.0351 40.6477 84.5558 40.6477ZM84.5558 39.915C84.9199 39.915 85.2194 39.8217 85.4544 39.635C85.6894 39.4484 85.8634 39.203 85.9763 38.8989C86.0892 38.5947 86.1456 38.2652 86.1456 37.9104C86.1456 37.5556 86.0892 37.2249 85.9763 36.9185C85.8634 36.612 85.6894 36.3643 85.4544 36.1754C85.2194 35.9865 84.9199 35.892 84.5558 35.892C84.1917 35.892 83.8922 35.9865 83.6572 36.1754C83.4222 36.3643 83.2482 36.612 83.1353 36.9185C83.0224 37.2249 82.966 37.5556 82.966 37.9104C82.966 38.2652 83.0224 38.5947 83.1353 38.8989C83.2482 39.203 83.4222 39.4484 83.6572 39.635C83.8922 39.8217 84.1917 39.915 84.5558 39.915ZM88.2064 40.5371V35.2284H88.9944V36.0302H89.0497C89.1465 35.7676 89.3216 35.5544 89.575 35.3908C89.8285 35.2273 90.1142 35.1455 90.4322 35.1455C90.4921 35.1455 90.567 35.1466 90.6568 35.1489C90.7467 35.1512 90.8147 35.1547 90.8607 35.1593V35.9888C90.8331 35.9819 90.7697 35.9715 90.6707 35.9577C90.5739 35.9415 90.4714 35.9335 90.3631 35.9335C90.105 35.9335 89.8746 35.9876 89.6718 36.0959C89.4714 36.2019 89.3124 36.3494 89.1949 36.5383C89.0797 36.7249 89.0221 36.9381 89.0221 37.1777V40.5371H88.2064ZM91.8276 40.5371V35.2284H92.6433V40.5371H91.8276ZM92.2424 34.3436C92.0834 34.3436 91.9463 34.2895 91.8311 34.1812C91.7182 34.0729 91.6617 33.9427 91.6617 33.7906C91.6617 33.6386 91.7182 33.5084 91.8311 33.4001C91.9463 33.2918 92.0834 33.2376 92.2424 33.2376C92.4013 33.2376 92.5373 33.2918 92.6502 33.4001C92.7654 33.5084 92.823 33.6386 92.823 33.7906C92.823 33.9427 92.7654 34.0729 92.6502 34.1812C92.5373 34.2895 92.4013 34.3436 92.2424 34.3436ZM96.4459 35.2284V35.9196H93.6948V35.2284H96.4459ZM94.4967 33.9565H95.3123V39.0164C95.3123 39.2468 95.3457 39.4196 95.4125 39.5348C95.4817 39.6477 95.5692 39.7238 95.6752 39.7629C95.7835 39.7998 95.8976 39.8182 96.0174 39.8182C96.1072 39.8182 96.181 39.8136 96.2386 39.8044C96.2962 39.7929 96.3423 39.7837 96.3768 39.7767L96.5427 40.5095C96.4874 40.5302 96.4102 40.5509 96.3112 40.5717C96.2121 40.5947 96.0865 40.6062 95.9344 40.6062C95.704 40.6062 95.4782 40.5567 95.257 40.4576C95.0381 40.3585 94.8561 40.2076 94.7109 40.0049C94.5681 39.8021 94.4967 39.5463 94.4967 39.2376V33.9565ZM98.1982 42.5279C98.06 42.5279 97.9367 42.5164 97.8284 42.4933C97.7201 42.4726 97.6452 42.4518 97.6038 42.4311L97.8111 41.7122C98.0093 41.7629 98.1844 41.7813 98.3365 41.7675C98.4885 41.7537 98.6233 41.6857 98.7409 41.5636C98.8607 41.4438 98.9701 41.2491 99.0692 40.9795L99.2213 40.5648L97.2581 35.2284H98.1429L99.6084 39.4588H99.6637L101.129 35.2284H102.014L99.7604 41.3113C99.659 41.5855 99.5335 41.8124 99.3837 41.9922C99.2339 42.1742 99.06 42.309 98.8618 42.3965C98.666 42.4841 98.4448 42.5279 98.1982 42.5279ZM106.795 33.4588V40.5371H105.938V33.4588H106.795ZM112.164 36.4173L111.431 36.6247C111.385 36.5026 111.317 36.3839 111.227 36.2687C111.14 36.1512 111.02 36.0544 110.868 35.9784C110.716 35.9024 110.521 35.8643 110.284 35.8643C109.959 35.8643 109.688 35.9392 109.471 36.089C109.257 36.2365 109.15 36.4242 109.15 36.6524C109.15 36.8551 109.224 37.0153 109.371 37.1328C109.519 37.2503 109.749 37.3482 110.062 37.4265L110.85 37.6201C111.325 37.7353 111.679 37.9116 111.912 38.1489C112.144 38.3839 112.261 38.6869 112.261 39.0579C112.261 39.362 112.173 39.6339 111.998 39.8735C111.825 40.1132 111.583 40.3021 111.272 40.4403C110.961 40.5786 110.599 40.6477 110.187 40.6477C109.645 40.6477 109.197 40.5302 108.842 40.2952C108.488 40.0602 108.263 39.7168 108.168 39.2652L108.943 39.0717C109.016 39.3574 109.156 39.5717 109.361 39.7145C109.568 39.8574 109.839 39.9288 110.173 39.9288C110.553 39.9288 110.855 39.8482 111.079 39.6869C111.304 39.5233 111.417 39.3274 111.417 39.0993C111.417 38.915 111.353 38.7606 111.224 38.6362C111.095 38.5095 110.897 38.415 110.629 38.3528L109.744 38.1454C109.258 38.0302 108.901 37.8517 108.673 37.6097C108.447 37.3655 108.334 37.0602 108.334 36.6938C108.334 36.3943 108.418 36.1293 108.587 35.8989C108.757 35.6685 108.989 35.4876 109.281 35.3563C109.576 35.225 109.91 35.1593 110.284 35.1593C110.809 35.1593 111.221 35.2745 111.521 35.5049C111.823 35.7353 112.037 36.0395 112.164 36.4173ZM117.249 36.4173L116.516 36.6247C116.47 36.5026 116.402 36.3839 116.312 36.2687C116.225 36.1512 116.105 36.0544 115.953 35.9784C115.801 35.9024 115.606 35.8643 115.369 35.8643C115.044 35.8643 114.773 35.9392 114.556 36.089C114.342 36.2365 114.235 36.4242 114.235 36.6524C114.235 36.8551 114.309 37.0153 114.456 37.1328C114.604 37.2503 114.834 37.3482 115.147 37.4265L115.935 37.6201C116.41 37.7353 116.764 37.9116 116.996 38.1489C117.229 38.3839 117.345 38.6869 117.345 39.0579C117.345 39.362 117.258 39.6339 117.083 39.8735C116.91 40.1132 116.668 40.3021 116.357 40.4403C116.046 40.5786 115.684 40.6477 115.272 40.6477C114.73 40.6477 114.282 40.5302 113.927 40.2952C113.572 40.0602 113.348 39.7168 113.253 39.2652L114.028 39.0717C114.101 39.3574 114.241 39.5717 114.446 39.7145C114.653 39.8574 114.924 39.9288 115.258 39.9288C115.638 39.9288 115.94 39.8482 116.163 39.6869C116.389 39.5233 116.502 39.3274 116.502 39.0993C116.502 38.915 116.438 38.7606 116.309 38.6362C116.18 38.5095 115.981 38.415 115.714 38.3528L114.829 38.1454C114.343 38.0302 113.986 37.8517 113.758 37.6097C113.532 37.3655 113.419 37.0602 113.419 36.6938C113.419 36.3943 113.503 36.1293 113.672 35.8989C113.842 35.6685 114.074 35.4876 114.366 35.3563C114.661 35.225 114.995 35.1593 115.369 35.1593C115.894 35.1593 116.306 35.2745 116.606 35.5049C116.908 35.7353 117.122 36.0395 117.249 36.4173ZM121.919 38.3666V35.2284H122.735V40.5371H121.919V39.6385H121.864C121.739 39.9081 121.546 40.1373 121.283 40.3263C121.02 40.5129 120.688 40.6062 120.288 40.6062C119.956 40.6062 119.661 40.5337 119.403 40.3885C119.145 40.241 118.942 40.0198 118.795 39.7249C118.647 39.4277 118.573 39.0533 118.573 38.6016V35.2284H119.389V38.5463C119.389 38.9334 119.497 39.2422 119.714 39.4726C119.933 39.703 120.212 39.8182 120.55 39.8182C120.753 39.8182 120.959 39.7664 121.169 39.6627C121.381 39.559 121.558 39.4 121.701 39.1857C121.846 38.9715 121.919 38.6984 121.919 38.3666ZM126.454 40.6477C125.943 40.6477 125.502 40.5348 125.131 40.309C124.762 40.0809 124.477 39.7629 124.277 39.3551C124.079 38.945 123.98 38.468 123.98 37.9242C123.98 37.3805 124.079 36.9012 124.277 36.4865C124.477 36.0694 124.756 35.7445 125.113 35.5118C125.473 35.2768 125.892 35.1593 126.371 35.1593C126.648 35.1593 126.921 35.2054 127.19 35.2975C127.46 35.3897 127.705 35.5395 127.927 35.7468C128.148 35.9519 128.324 36.2238 128.455 36.5625C128.587 36.9012 128.652 37.3182 128.652 37.8136V38.1593H124.56V37.4542H127.823C127.823 37.1547 127.763 36.8874 127.643 36.6524C127.526 36.4173 127.358 36.2319 127.139 36.0959C126.922 35.96 126.666 35.892 126.371 35.892C126.046 35.892 125.765 35.9726 125.528 36.1339C125.293 36.2929 125.112 36.5003 124.985 36.756C124.859 37.0118 124.795 37.286 124.795 37.5786V38.0487C124.795 38.4496 124.864 38.7894 125.003 39.0682C125.143 39.3447 125.338 39.5556 125.587 39.7007C125.836 39.8436 126.125 39.915 126.454 39.915C126.669 39.915 126.862 39.885 127.035 39.8251C127.21 39.7629 127.361 39.6708 127.488 39.5486C127.614 39.4242 127.712 39.2698 127.781 39.0855L128.569 39.3067C128.487 39.574 128.347 39.809 128.151 40.0118C127.955 40.2122 127.713 40.3689 127.425 40.4818C127.137 40.5924 126.814 40.6477 126.454 40.6477ZM133.654 36.4173L132.921 36.6247C132.875 36.5026 132.807 36.3839 132.717 36.2687C132.629 36.1512 132.51 36.0544 132.357 35.9784C132.205 35.9024 132.011 35.8643 131.773 35.8643C131.448 35.8643 131.178 35.9392 130.961 36.089C130.747 36.2365 130.64 36.4242 130.64 36.6524C130.64 36.8551 130.713 37.0153 130.861 37.1328C131.008 37.2503 131.239 37.3482 131.552 37.4265L132.34 37.6201C132.815 37.7353 133.169 37.9116 133.401 38.1489C133.634 38.3839 133.75 38.6869 133.75 39.0579C133.75 39.362 133.663 39.6339 133.488 39.8735C133.315 40.1132 133.073 40.3021 132.762 40.4403C132.451 40.5786 132.089 40.6477 131.677 40.6477C131.135 40.6477 130.687 40.5302 130.332 40.2952C129.977 40.0602 129.753 39.7168 129.658 39.2652L130.432 39.0717C130.506 39.3574 130.645 39.5717 130.851 39.7145C131.058 39.8574 131.329 39.9288 131.663 39.9288C132.043 39.9288 132.345 39.8482 132.568 39.6869C132.794 39.5233 132.907 39.3274 132.907 39.0993C132.907 38.915 132.842 38.7606 132.713 38.6362C132.584 38.5095 132.386 38.415 132.119 38.3528L131.234 38.1454C130.748 38.0302 130.391 37.8517 130.163 37.6097C129.937 37.3655 129.824 37.0602 129.824 36.6938C129.824 36.3943 129.908 36.1293 130.076 35.8989C130.247 35.6685 130.478 35.4876 130.771 35.3563C131.066 35.225 131.4 35.1593 131.773 35.1593C132.299 35.1593 132.711 35.2745 133.011 35.5049C133.313 35.7353 133.527 36.0395 133.654 36.4173Z" fill="#858E96"/>
+<rect x="14.1926" y="49.6926" width="88.9918" height="10.7869" rx="1.34836" fill="white"/>
+<circle cx="66.3717" cy="55.279" r="2.93521" fill="white"/>
+<circle cx="66.3722" cy="55.2784" r="2.64169" stroke="#FCBE1D" stroke-width="0.293521" stroke-linecap="round" stroke-dasharray="0 5.87 0 2.94"/>
+<path d="M67.6306 53.6552C67.2676 53.3739 66.8209 53.2223 66.3618 53.2246C65.9026 53.2269 65.4574 53.383 65.0973 53.6678L66.372 55.2793L67.6306 53.6552Z" fill="#FCBE1D"/>
+<path d="M65.1106 56.9015C65.4736 57.1827 65.9203 57.3343 66.3794 57.332C66.8386 57.3297 67.2838 57.1737 67.6439 56.8888L66.3692 55.2774L65.1106 56.9015Z" fill="#FCBE1D"/>
+<circle cx="63.1432" cy="55.279" r="2.93521" fill="white"/>
+<circle cx="63.1427" cy="55.2784" r="2.64169" stroke="#858E96" stroke-width="0.293521" stroke-linecap="round" stroke-dasharray="0 5.87 0 2.94"/>
+<circle cx="59.9137" cy="55.279" r="2.93521" fill="white"/>
+<circle cx="59.9132" cy="55.2784" r="2.64169" stroke="#ACB5BD" stroke-width="0.293521" stroke-linecap="round" stroke-dasharray="1.17 1.17"/>
+<path d="M97.397 55.5148L96.2172 56.6946C96.1835 56.7283 96.1442 56.7452 96.0992 56.7452C96.0543 56.7452 96.0149 56.7283 95.9812 56.6946C95.9475 56.6609 95.9307 56.6216 95.9307 56.5766C95.9307 56.5317 95.9475 56.4924 95.9812 56.4587L97.161 55.2788L95.9812 54.099C95.9475 54.0653 95.9307 54.026 95.9307 53.981C95.9307 53.9361 95.9475 53.8968 95.9812 53.8631C96.0149 53.8294 96.0543 53.8125 96.0992 53.8125C96.1442 53.8125 96.1835 53.8294 96.2172 53.8631L97.397 55.0429L98.5768 53.8631C98.6105 53.8294 98.6499 53.8125 98.6948 53.8125C98.7397 53.8125 98.7791 53.8294 98.8128 53.8631C98.8465 53.8968 98.8633 53.9361 98.8633 53.981C98.8633 54.026 98.8465 54.0653 98.8128 54.099L97.633 55.2788L98.8128 56.4587C98.8465 56.4924 98.8633 56.5317 98.8633 56.5766C98.8633 56.6216 98.8465 56.6609 98.8128 56.6946C98.7791 56.7283 98.7397 56.7452 98.6948 56.7452C98.6499 56.7452 98.6105 56.7283 98.5768 56.6946L97.397 55.5148Z" fill="black"/>
+<rect x="18" y="53.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
+<rect x="72" y="53.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
+<rect x="14.1926" y="49.6926" width="88.9918" height="10.7869" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+<rect x="106.193" y="64.6926" width="73.6148" height="10.6148" rx="1.34836" fill="white"/>
+<path d="M174.397 70.5148L173.217 71.6946C173.183 71.7283 173.144 71.7452 173.099 71.7452C173.054 71.7452 173.015 71.7283 172.981 71.6946C172.948 71.6609 172.931 71.6216 172.931 71.5766C172.931 71.5317 172.948 71.4924 172.981 71.4587L174.161 70.2788L172.981 69.099C172.948 69.0653 172.931 69.026 172.931 68.981C172.931 68.9361 172.948 68.8968 172.981 68.8631C173.015 68.8294 173.054 68.8125 173.099 68.8125C173.144 68.8125 173.183 68.8294 173.217 68.8631L174.397 70.0429L175.577 68.8631C175.611 68.8294 175.65 68.8125 175.695 68.8125C175.74 68.8125 175.779 68.8294 175.813 68.8631C175.846 68.8968 175.863 68.9361 175.863 68.981C175.863 69.026 175.846 69.0653 175.813 69.099L174.633 70.2788L175.813 71.4587C175.846 71.4924 175.863 71.5317 175.863 71.5766C175.863 71.6216 175.846 71.6609 175.813 71.6946C175.779 71.7283 175.74 71.7452 175.695 71.7452C175.65 71.7452 175.611 71.7283 175.577 71.6946L174.397 70.5148Z" fill="black"/>
+<rect x="110" y="68.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
+<rect x="149" y="68.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
+<rect x="106.193" y="64.6926" width="73.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+<rect x="198.193" y="49.6926" width="73.6148" height="10.6148" rx="1.34836" fill="white"/>
+<path d="M266.397 55.5148L265.217 56.6946C265.183 56.7283 265.144 56.7452 265.099 56.7452C265.054 56.7452 265.015 56.7283 264.981 56.6946C264.948 56.6609 264.931 56.6216 264.931 56.5766C264.931 56.5317 264.948 56.4924 264.981 56.4587L266.161 55.2788L264.981 54.099C264.948 54.0653 264.931 54.026 264.931 53.981C264.931 53.9361 264.948 53.8968 264.981 53.8631C265.015 53.8294 265.054 53.8125 265.099 53.8125C265.144 53.8125 265.183 53.8294 265.217 53.8631L266.397 55.0429L267.577 53.8631C267.611 53.8294 267.65 53.8125 267.695 53.8125C267.74 53.8125 267.779 53.8294 267.813 53.8631C267.846 53.8968 267.863 53.9361 267.863 53.981C267.863 54.026 267.846 54.0653 267.813 54.099L266.633 55.2788L267.813 56.4587C267.846 56.4924 267.863 56.5317 267.863 56.5766C267.863 56.6216 267.846 56.6609 267.813 56.6946C267.779 56.7283 267.74 56.7452 267.695 56.7452C267.65 56.7452 267.611 56.7283 267.577 56.6946L266.397 55.5148Z" fill="black"/>
+<rect x="202" y="53.5" width="24" height="4" rx="2" fill="#DEE2E6"/>
+<rect x="229" y="53.5" width="32" height="4" rx="2" fill="#ACB5BD"/>
+<rect x="198.193" y="49.6926" width="73.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+<rect x="106.193" y="49.6926" width="88.6148" height="10.6148" rx="1.34836" fill="white"/>
+<circle cx="157.397" cy="55.2785" r="2.9308" fill="white"/>
+<circle cx="157.386" cy="55.2691" r="2.62849" fill="url(#pattern3)"/>
+<circle cx="157.386" cy="55.2691" r="2.62849" fill="#F7AE59"/>
+<circle cx="154.163" cy="55.2785" r="2.9308" fill="white"/>
+<circle cx="154.153" cy="55.2691" r="2.62849" fill="url(#pattern4)"/>
+<circle cx="154.153" cy="55.2691" r="2.62849" fill="#05C3FF"/>
+<circle cx="150.931" cy="55.2785" r="2.9308" fill="white"/>
+<circle cx="150.92" cy="55.2691" r="2.62849" fill="url(#pattern5)"/>
+<circle cx="150.92" cy="55.2691" r="2.62849" fill="#2C435F"/>
+<path d="M189.697 55.5148L188.517 56.6946C188.483 56.7283 188.444 56.7452 188.399 56.7452C188.354 56.7452 188.315 56.7283 188.281 56.6946C188.247 56.6609 188.23 56.6216 188.23 56.5766C188.23 56.5317 188.247 56.4924 188.281 56.4587L189.461 55.2788L188.281 54.099C188.247 54.0653 188.23 54.026 188.23 53.981C188.23 53.9361 188.247 53.8968 188.281 53.8631C188.315 53.8294 188.354 53.8125 188.399 53.8125C188.444 53.8125 188.483 53.8294 188.517 53.8631L189.697 55.0429L190.877 53.8631C190.91 53.8294 190.95 53.8125 190.995 53.8125C191.04 53.8125 191.079 53.8294 191.113 53.8631C191.146 53.8968 191.163 53.9361 191.163 53.981C191.163 54.026 191.146 54.0653 191.113 54.099L189.933 55.2788L191.113 56.4587C191.146 56.4924 191.163 56.5317 191.163 56.5766C191.163 56.6216 191.146 56.6609 191.113 56.6946C191.079 56.7283 191.04 56.7452 190.995 56.7452C190.95 56.7452 190.91 56.7283 190.877 56.6946L189.697 55.5148Z" fill="#858E96"/>
+<rect x="109" y="53.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
+<rect x="163" y="53.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
+<rect x="106.193" y="49.6926" width="88.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+<rect x="14.1926" y="64.6926" width="88.6148" height="10.6148" rx="1.34836" fill="white"/>
+<path d="M97.6968 70.5148L96.517 71.6946C96.4833 71.7283 96.444 71.7452 96.399 71.7452C96.3541 71.7452 96.3147 71.7283 96.281 71.6946C96.2473 71.6609 96.2305 71.6216 96.2305 71.5766C96.2305 71.5317 96.2473 71.4924 96.281 71.4587L97.4608 70.2788L96.281 69.099C96.2473 69.0653 96.2305 69.026 96.2305 68.981C96.2305 68.9361 96.2473 68.8968 96.281 68.8631C96.3147 68.8294 96.3541 68.8125 96.399 68.8125C96.444 68.8125 96.4833 68.8294 96.517 68.8631L97.6968 70.0429L98.8766 68.8631C98.9103 68.8294 98.9497 68.8125 98.9946 68.8125C99.0396 68.8125 99.0789 68.8294 99.1126 68.8631C99.1463 68.8968 99.1632 68.9361 99.1632 68.981C99.1632 69.026 99.1463 69.0653 99.1126 69.099L97.9328 70.2788L99.1126 71.4587C99.1463 71.4924 99.1632 71.5317 99.1632 71.5766C99.1632 71.6216 99.1463 71.6609 99.1126 71.6946C99.0789 71.7283 99.0396 71.7452 98.9946 71.7452C98.9497 71.7452 98.9103 71.7283 98.8766 71.6946L97.6968 70.5148Z" fill="#858E96"/>
+<rect x="17" y="68.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
+<rect x="71" y="68.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
+<circle cx="65.1477" cy="70.3527" r="2.85274" fill="white"/>
+<circle cx="65.1481" cy="70.3532" r="2.5934" fill="#ADF772"/>
+<circle cx="62.0002" cy="70.3527" r="2.85274" fill="white"/>
+<circle cx="61.9996" cy="70.3532" r="2.5934" fill="#096E8D"/>
+<circle cx="58.8527" cy="70.3527" r="2.85274" fill="white"/>
+<circle cx="58.8532" cy="70.3532" r="2.5934" fill="#FF6B00"/>
+<rect x="14.1926" y="64.6926" width="88.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+</g>
+<defs>
+<filter id="filter0_d_2884_60024" x="16.2193" y="0.719251" width="284.561" height="70.5615" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.39037"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2884_60024"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2884_60024" result="shape"/>
+</filter>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2884_60024" transform="translate(0 -0.25) scale(0.003125)"/>
+</pattern>
+<pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2884_60024" transform="translate(0 -0.25) scale(0.003125)"/>
+</pattern>
+<pattern id="pattern2" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2884_60024" transform="translate(0 -0.25) scale(0.003125)"/>
+</pattern>
+<filter id="filter1_d_2884_60024" x="0.219251" y="18.7193" width="284.561" height="70.5615" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.39037"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2884_60024"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2884_60024" result="shape"/>
+</filter>
+<pattern id="pattern3" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2884_60024" transform="translate(0 -0.25) scale(0.003125)"/>
+</pattern>
+<pattern id="pattern4" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2884_60024" transform="translate(0 -0.25) scale(0.003125)"/>
+</pattern>
+<pattern id="pattern5" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2884_60024" transform="translate(0 -0.25) scale(0.003125)"/>
+</pattern>
+<image id="image0_2884_60024" width="320" height="480" xlink:href="data:image/jpeg;base64,/9j/4QBlRXhpZgAATU0AKgAAAAgAAgEOAAIAAAAoAAAAJgE7AAIAAAAPAAAATgAAAABodHRwczovL3Vuc3BsYXNoLmNvbS9waG90b3MvV01ENjR0TWZjNGsAQWxpIE1vcnNoZWRsb3UA/+AAEEpGSUYAAQEBAEgASAAA/+ICHElDQ19QUk9GSUxFAAEBAAACDGxjbXMCEAAAbW50clJHQiBYWVogB9wAAQAZAAMAKQA5YWNzcEFQUEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPbWAAEAAAAA0y1sY21zAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKZGVzYwAAAPwAAABeY3BydAAAAVwAAAALd3RwdAAAAWgAAAAUYmtwdAAAAXwAAAAUclhZWgAAAZAAAAAUZ1hZWgAAAaQAAAAUYlhZWgAAAbgAAAAUclRSQwAAAcwAAABAZ1RSQwAAAcwAAABAYlRSQwAAAcwAAABAZGVzYwAAAAAAAAADYzIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAdGV4dAAAAABJWAAAWFlaIAAAAAAAAPbWAAEAAAAA0y1YWVogAAAAAAAAAxYAAAMzAAACpFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z2N1cnYAAAAAAAAAGgAAAMsByQNjBZIIawv2ED8VURs0IfEpkDIYO5JGBVF3Xe1rcHoFibGafKxpv33Tw+kw////2wCEAAICAgMDAwMEBAMFBQUFBQcGBgYGBwoHCAcIBwoPCgsKCgsKDw4RDg0OEQ4YExERExgcGBcYHCIfHyIrKSs4OEsBAgICAwMDAwQEAwUFBQUFBwYGBgYHCgcIBwgHCg8KCwoKCwoPDhEODQ4RDhgTERETGBwYFxgcIh8fIispKzg4S//CABEIAeABQAMBIgACEQEDEQH/xAA2AAAABwEBAQEAAAAAAAAAAAAAAQIDBAUGBwgJCgEAAwEBAQEAAAAAAAAAAAAAAAECAwQFBv/aAAwDAQACEAMQAAAA+alVhmMe3cUuejxfQLHJ6THfLstlri/CsWKWNVNq8HFdiN1OopHay5dernWtJdZ3Zsg2UuWW0U2aPFRtVHCkrthTSZ3omZrlWw53scgl0ylaqLIEiLpSX4ciM3p9DTSs9OdNdVutsONt+qcUHEtDKzGOyqdSKm0KE61V1dnFgqosyMS7CsK65BktkndYCwDqVnyzVFbG2y7qpVK0hk7QZfRj0GA6jWTfDavS5VZ9KxiXB6yYw7az1tWagdrGrY8vqFvkrfbLp+ScqAwWetqbO8u/bUYS1tIRWhpOQUZ5tkWuvqu4iGUulHKaAg6jPyw3+hotdOtTV6BqlX6M5zcy4qb7LXivPe28HvFzWZ7WoXBtM7Rp7vK2zGHGpKOi1j9vcRnW8OqtaO3hzdK1IUTnH7WhkjRpbWVwIdnGcpQcLXOQ/UyGmGrNoIJymQut9zfRj6W7Uam7rm3K+X0HR5LY47804v6G4E8pEih2TmmZtKO1d7rmWyC8hktXLVdpvOooNZj0Ms1iVUlWffSumCQnn3mmcmIq4rU1mQxrFcqbIagSULCWc27y3gMz6qk9qsfq7zNce5mp1pAuIvKcr65ymoRsKPoQ81B6HTUcv01VZKbae3qy02HB5GmHfsTzpYa9k7GNcuqe20p2M6qz9Lq63Epau6r3KXDh3EtMORRN9Xcz+03D7KW/WmM873fHPkL62c14+n4r8x+tHg/2vn+KS1SPS8JdvQwldzkZ9AiVrsrZTVu1mGrixzD8dHRbfnk6dGLb0Xr+nl8uMeyMMzz+jS5PPSAAUt1C2QgMRpeVVlc9DQil0tBcJ2uF7ZOntP6heCfeXz313W8p4C5vtn9B+TcIi+R7vPOcQ0dPm+UqWLl/rPhtvfcvsaW6omr2bc2+Su50Rz+wyV5FJhGTPiokJ+4tfktL1Z3nP9jhWcayOzx+NwwZxSwTgZpuRF57TQ20qlUxb6gFX+ieS/QHl9P0X0rNejfH+k+RHlH7D8mg6d8ff0f/ABk2jxZ1vI+he7xPL2X1+X9PxYanC0zl7fC3qva5iopJp9dem8pwgmE1yA4HunXwdVuQMX03CNcVwu8wmVxFGqKDxSAysSwhc11yHqal0nn+0b1Sfb/z5+vHk/Vemej8C0nF6HQMqWW4+/nvgPuPlXq5Os6fzbuY5+X8Z7dxn3vmGlz1dnmuPuxk4FRcsSVp2pXNY5ZLl10xzXs9+aaNsNnmuX9k4854DhN7g5bAIZ0+8wkKOtsavC2Ku0aFeNv5i0N/y2/H9POy+QOkfP8A2Gtqd3q/N9jwX569Cck9jx85sMpj9vGGSEj1fGlRzj3nYWVDcFHSzmoqGt6VcVkmytBvFU0yf0kwvVeB+Z6TmW0VP2ceErYMnoxSlaByzUYZuqt6vG0UWhzItNVuJFnBYNbZe9uY+gKDyPqomj81ckwjqGe5Bb93narnnVcptzZSV1Cv6uXnsPo7QufT7dgVZB0tJlpAsbFGuUyjjxhrbW0L0L2Xybc8nV9Xee1/RfE9r5Qzmo3v+DcKjL3mwfgzAo6i2pcKdy+iokT0yI4Unpfzd070Ob9F/wAp/o7verr+M1B6e8UfJfR8b6NRbV85edPo/wDOX0/Kecr0b8VvYZkg1NZUWIT3KeInd56QbmKbqQDT7Qeu+V9lpMtsl2HmGX8/rxbdNP7+K3chPaFpMrJ9FXUXFZhUeh0MQTkyRR9mVxCjJ6MuofeP84f0E619aPNXov5LdGvOfR/zW1vzXufUv42fTT5k9XmOplzccs9E6jns7yeli6HTPOxN1kY0jMS0aYtn6iv+Lt8dK27PbybGFy1PLr0nOZSPUyLaivdomSYUl1OsIN7RTtVMPXPS1lIW+a2kpkjhsshydUuh6r81duLq7ONvQrjw/pNVyX6RfN31fl3nIknLKfo8bPHv0YdOW22wc2VhcG8mv74/QCw8HZ/i9CTUwZXbwc5CQZmQDH9JmdMnKfZdV2bbcDaIVfYQOjKMAxkSiYeBMWcxDaCTHI9r+ILvouU0Kvy/pPpn8yPTvmH1fnxJjO82TVhGkgokxAc1OG3OOkN/SOJ46NrKlzE0FfcBytyMcubEDaHNTltfrDynDVuRbCJtFRAsoO+VfHWzz0T0c4dguE7chmS0NsjSVYNRpXN6U6uSNuJ4hb3jCa+k+u638rK5bHGSp9O6K0ZFRLsWYr6J1rBcCkVbFRWFesIh7LPJZsHMS4q2sTIzdIOjmwNIjBaMaaS61NOGlAPvwnGlpeYGUmK5nuam1aYSfUnlTX7z6o5x51r52WknMc5M2uFpxme5JXT0Nhoxm0juW1nQI1hDQ4tDjG3ZBJxpUebU1tJo6jWK5N+xnVQVhChskZQwAAfDTtDQNEt00lSBthBkAgSbLtU9nK856zqp7vMMrT57fx6ESI8SAAF8hpVimiaCY/XSwBNoCVLr5TVlDmw+vNEB+Jk22Zx5VUJmaPLTIDYzh4FfomhtcTb+8SvWx+EDfrnzJ5zoRoG8nRq0EYfQ9HhFz6XSdTxyJn2UUdmH0eDJorSBI0AIdqk3GCFNr0TFIfobUpCHDQkLhgNdebYl5+A258fKi7Dxzaz0dL3PIot39BfLeF5hrh9WegeJ7v2ojeA/bHifzpIBPATYrL5SFRTklpjuMcbDg4xqspKg+js6TkQo86bgzoyJjjS2GAlBBJhKUyN4YiSQDMZsY045HMc6yz5gcuIYa5rJvaGzySGBLDIzagkIfZIwUSXQMISyYw08CUrNFkhK2MsToaJSkBjhICFpWsEm863Uw5US4JJlnQAMAo0goiJiiCQAAQA7cMohb1oNABAAAAAwDyVAYACVIYNio7roBD5pkHgNKWgCDDJL1VaRKUQAS1KbAAAAAAAAMCCkhJ0GbsLLXK3FOAMCAgAAWhQGpJgZgBPJbTFuNKCU2hCp1LEkTDTiBGpDgSo8yB0ZxYz7GNgASwAAAAAAKBIlxWEAEAAApSXAaJ1oApKgNSVAsjIJhhIKCXGIBECVoNACyBt5mSyfXqh9GZRX2cLSAJYAAAGoCMwzpEfdbvufkcnE8CSAYLNDoEzJjMBkaDUkwWkwExxAAltrYhLzYJcC0ISaARPiSqSoNhD3hliSxjTIMRRGtIGol0IMwzQbHmB6DkV+LiKSAgKS4CUuNgDIAZgAYIBNWFARvIA4jzbFJSQA0KBciLMpKjPx9oTHfYzaEqGVhKyYawdSlKklW1WxIzI4AYAAAURA6042AAAGAYAyILIBbEpMgQA0h0mlAoEAcnV0zRJaeRrDMeRHhoAGNgyVQoyOoShbaoyQIYAMCBkAAAKIyAgAAMAADILJBEyRGJILQFg240tCkEAOfW2miZCm9IaZdZhoAEWaiVSMBJJNOszYAEgAAGQAAAAAAAAAGAYEDATwTjGg2YBlxoApC0GYIF3FPfbTWtOoqWGVtZ0QBxRmBYaTISWzKGAAgAAAAAAAAGRgRkAMAAZkYf/EAEYQAAEDAgQEAwYEAwQHCQEAAAEAAgMEEQUSITEGEBNBIlFhBxQgMnGBMEJSkTNAsRUjocFDYmNyc4LRFiQ0NYOy0uHw8f/aAAgBAQABPwE1DB3Tp2X0KfUNsvehdRy3XUU/zHlZTDROGvJ6jKzaKRAq6hWUlCIpkKEITqcJ8SESNM6ytbdZdVQPZbVYtE21wqY5XpkjSxS2U+qpacIW7KXdUUXdTWsjI5wQcQi8lO0VJKCiFVfMozorp+qlCcU5NK6mie6/K6gemaoBAIBBqkjQaAnSaIxF5T6F4F0x7o3Kara9lio7Z0GkBSzKNpcUG2CBsgbuURICc7RQgkKRjidAm0sltl0H31CDDGVHUaWVUo3LOiVIiE5BH4InaqmemWTUBqmMVQ+yumi6iiQj0IVZApWWTHeJRPBjUpu5UkQsphYJzzsqdiadFI5R0ACgoI8yjw2LLsq+jYFNCE9pYnTXTFdO2TiiE9qATuYWyZPZMrD5qmqboTgI1ikkug9NcopFCA5V1DpdVLCLhbFNqCBZMbmN1Tvy6KpeFFqU0WCdIi8qKUFR7qCXwrEDdSlS6qaJU5A3TgidE7k4XWRP+G3KlemguTKZSQWXTUcWqZFZQusnPc5pFliTcpN08hbqljTo3BSTE6FUrRui5oRIunPFk+MsKpqjsUJFUuuCqhEJzU9paonXUqKzIldRFt1I23JrFlWi0UctiqKULqBSSIJgQemNURA3WO04IuE5huoYymeFddVG91SkkIxOKbAbp9PouoJB8yILTuo6gjunyhwVQxWRTo8wThkTfEFIxZE9qyq9k4XTYwnDROv8FPMQoJsybBddKy2WbVUQupKXS4WJsNk+PxFRhtk5hKAI3U4FgsPGqawIxKRhCzhnYKnIfvZVNOB8oT5HNKbLmClW/J8eYJ12ovurpysnBG4WYpkiJBXTCMJVlGwqF2VU1X2QeCpSmu1VI63dNqwBusSLHBVWjionKMi2qlspToqOaxQqkyqT5xlT25uyhaW91NUOA3Tp2u3RlA2T5hbdNlanSBB6maCFbVEIolNTwjGugUIEIiEACuiFFThTR2UBKbPYLr3QcopiFnLlWvIG6lfcqFuqbGbLpFTQaFN8Lky6jCdCSEICEY3HYJ+HPf2VRhr40YnJ8SyEJjCumngqQWQcnLMgQnWKt6oPRkKbKoKKeoIDIyfonYNVsGsRH1XQqod4inzX9FFNY2KbGHhdGxUcITIwELWVcBZSx6qlbqmNGi6YU0amjyuUcotZU7bposNUcVB7qLGAPzJ+OiyqMT6hWe/ZPF0QmGyzr5gpgrIp5Ud05XV0wF3Zez/2cTY7Lmf4IRufNYZ7NsNpYckcI9D3Vb7OKOcAmTX1Cr/ZLS9FwZPr6rGPZBVtechB+ixLgOvpgbsvbyVO57DlcnON02QhMmKbOql11I3VRPylNnaQvfLJ9WCqhwc1MPiVLMAApZtF1ChKfNF580xyhF1IEQsiLENAntunxp6cxXsnPRJKhjL3ALB8GNQ5rWt0GpXsxwr3bDWgtsXaowaaBVN2J0t2qpma2TVY/WxGYtBuuM8JjglZURtsyQ627O/+03ZXCLgnvKzmyc/xJsWZNpnqRrh2VlLIot0JbITX7puGvPZMweQ/lTcClPZHB3tTKfIpERzerp4unAItT2J26asLgzFx9bLgqnEAN4rhzSFwjGG0sY8kXnZVrLqaZrfCq+nkk210KxaiqIZnOd3WOES4dM1wvsf2XXDQpKvVMqbphBTrJ7PEqVAaKeJpVTIAVe6HLOQVFRx+Sgo4/Je7Mt8qroGi+iqdLqQ/A5POqabhT3CZInG4TwguGogRn8n7ea4OpvenxxtGvzO9NUyqpsKoi55OSMfcrGPbe+CRxjpMkd9Lgkmyb7eJpr3iZvtrqo/aRS1OQtuCd7rG+PoIGA9UfZVPtIpHvsWvP1sp62nxGimNO/8AL8p3Crn2Lfui4lNfZR1JUVRqrZlEMqdIA291U1nkU+7itlmQkQIKhChR2WIHdVe5TvgKlGqYbKUXTo7K2iICexcJNj6EWa93GTbcL2V0wHv7w4EnKP8A+Lj6ubTUwufoFjeMQMpS6fC6uVxNs3SyMuf+JYn7CygeZKyPpwuGd1mst/guH/ZfTnC5ZKmO1Rk7aWWP9aCtqYXkkseW6qFsb93gFcLtc2vY0EjdYsP+8zDykf8A1R5BRnVQO0V27qqq0ZLldRZ1dXQUSjci9VxvdVY1KfzCKlV1msUGhyfFYKTRYVRGvqqana4NMrw3Mdm9yfsFwZwfw9WiRlNjckssbcrM7QzKb75dNCvZrT+609aHNs/rlh+rd1PQx1OpYCQNCVxXgdTUMMTa0tafyljX/wBVw97IHOqWT1Fa/K119gw6fRQxthgyXO1l7UeHXf2xNJGz59fqosOlD7OoyfposFwRkUsc7Rk82rFW2rKof7V//uTmqyIUQK6lk6qKc/Mfhug4qFxJUQRCrAqtScxym3TVKopbFBmdiqmELhH/AM1pd9pdv+E5QP8A7IqOH8Mw7D4feiKcVM5ZeR/UsX2PYAKLLBU1UbQBlk/rrdR1LRb1CqoYc+ZzU3ieATe7xi+tifJYx7YcHpax9DA4zy6tvlNs3oVivtHditQS6NrbAll+9u33VFiNNVRh7BbzHkusLaEWWPYjUSxTxyRt6bX5onAf61jr/VXurKyhYpGhSMVlZZSspQYV0lFBcqGlUcKdFoq6PdVu5T1bkArKcapimCG6oJOyxGALD6x9FVwTs+aJ4cPXzH3XC0+H4lFFiDG9Z5b0mH5ZIh+YXQqiaqZ5IF2tuL37JlYfCq2XLCRn3H/4rDjQww5Y7OJ+Y9ySuNKQ0F24XhUQnnkNyxouL7lRcNOw+pfFUBjjl/KQbXXRNJLeN/hVHUucRbusZozS4eI5HtMglIc1pvYl2a3+CarINCjCnQKIVgrLRacqKAd1FEo4FJDosSbuq/coo8gVdTppUpTRcqAZVVVGZBgKwPiHEMGfI6kltnHiaflPr9VwlXSS0UM8kxf1h1Wk9hJuD9CmYvkcDpZcZYtXdCNtIQXyjKB9SoeGMd6DG1HELIWEbQR2f93Ousd4boKKVwOOT3I+YluYpuFyROMlJUh+vfQlUc8x6gkGyp542MeXuyt7lYziz6yUa+Bgyt9fU+pTSVmTnqKQoi6czRPBQuteUbC4qKna0aqSbL3VMYz3Tclt1PKy26xKVmuqryLlFFDnOgpAorXX5VUOTJSE2QELhOv6fD+HuI0ZJNGfpn0VNXCbQdzZPwxjvd3nVzTsq6Ayx9MEeId1xD7P5jNIffo83kblUuFT0j3tdr9Dop2lmf1KxGf+7bGO5ufsg1Aciozqs2i6iJCFkAEyHMgAxSVPki9YhG+kOifxC5vdS8Ql35lLXvffVTS35EIIItU6apAidVTvuFUsVkCV7PIm1PD8kThe88o/xVYMRwiou3xt3WH8fh7v70Frrfm0VbxtGPFnvYeaq+LpJJpnF/0Cp8c7uOqq6p0rXva3Qd/Upwc4klZSg1OCITN07ZCPRPNkHKJpJXUyhSzkq/LFKqGpbuqjC8x0UXDbn9lXYRJThSz+Kya5EoJvKpUe6nR3UR0Ur7ohZBYnyF/2XCOA1eCULoKpgbMXCUs/QJGggH1XEErZL+G/kqmjMx8KxKmkheQ69kbeapqYvPoqsCKjjb+p/wDQKPJdNghI2T4IghSxlPw9qdRZSixW0ToiXJlLYapzw1SSF3IjlTY+7YuWE4myRwusIw+GZgNlxfhAZE4gdlXjJM76qJ+iugmnlUJil1TxqoVMsy9lfDDcc4iwqCVzRF1Os8H8zIPER+9guK+EYMYiD2OEVQwWa7s4fpcuIsLqKCeSCpgdHIOx7+oPcLDmMD9dlxLS08t2gaqpw5sZ0Kp6QCFvmsUwfr4ZUTNvnpcsp8jG85XftusxaUKp4/MveX+aFU8d0zEHhPrcy6qEqEgClqtEXEq/wT0r26rDa58LxdcIcQAtaC5cT1TJaZ2vZYx/4h31UTtECsyaUCqgpu6lTlCFUKnp3TOsNu58lh+J1GG1dLU0snTlp3h0bvIj/I91wJ7QqTiXDY52WZK3wzxX/hv/AOnksaw2ixSAwVULZWdr7tPm09iuKvZpXYeXzUBdUw75P9K3/wCSrasuJve4NiDoQfIhTO6srdNAmuEdr6ABYFgr5MCxieZmX36AxQt/2TR833Ka3OAfMA/unREIcroFBuiKuVlWRFiAVlZVlAyyqKIA6LC8TkpXjVVnEfUg+ZV8vUkJUZ0WZXTSrqdBSonVQFSxD8xt/VB4aLN0Ce664P4qqcAxKOrhcbfLKz9bPL7dlgeLw4jRxVMT8zHtBBCIzDZcW8AYbjWZ8kZin7Tx6O/5v1D6rGeCcRwmsbC+LrZvkfCM+a/m3dpXDPs86WSsxOMFw1ipbh1j+qW2n0auJJejh1bK7tE/+ip7hjB5AJz7rp3RbZFNGqZFojGUY1l5BZVkQjT3g91IyMp1NGqwhjSFI7xKMoIJh5TBAKUKOifJr8o8yrshHg/dZi54R3RNkCvYlxmaep/suaTwS6w3/V3asRxihwykkqKqobFFGLue42AXHPtqrq974cLaaSDbquH96/6fp/qm1VcHSPFXKHPN3uEjg53+8b3K4dx/FMFmD6WazfzRH5H/AFH+axbiWmx3hbE54fCRTyNkjO7HWTXWKe3NqNVTMDnWzhv1T8N87H1BupsMcNk2leOyj00RiFlKbFXTYy5wC4d4EbWMBeTqsc4Bjo2+FPoem8hOhARxVvmnYoEcVCqq0PV7lMQQTUFILpsXmQEZImbC59VLVOcibohGO35ldZlT1EkMkcsb8r2ODmnyIWN12P8AGMHvL3N6UHyQtOjSO/8Aveqhfuxw1CAIUkmUXVH77hctZEWFzJ6UsmaP0vFwfsgdAhIQmvJ3KjqXsO6ZiTvzBMroXDVEscqi2VOYXFCncqOm8bT5Lg/E6RkTMzwCFxbjdE6IhsgKrJQ6YuvonuuuquojIi9MKYggoxdPDIoy4hOqpD5J05K6izolXRNjzBXs8x/3Cv6Un8KfwkLj7ADQ18j2DQ+K/m090aj5QG79yqKlNVUU8BtZ8gb9iuIsPZHBWyZNeg7/AAagPCOTFoShZWaruH5kKguGqjAXhUcoaUMVybFT4iX90HBxTtArq/OPdM25BRGyrpc2QJxTlf4CtubXkEEGxGoKrsYjxHhgVZt14B7uf/V0Qay7Tfb/ACTZSHBw3acw+2qx+qbUYRUTscCyWjeR923XZN5M35XTzos1msUceeIOCyuQY5OYUWFQN1U7PDt8LN1HtyCapfnKeE4hHkHc3N+CDEJYoJ4A7wSuYXD1Ybp9rJrrFYJjV+HsXpXu/gwvcz/ceNvsUU1OOijFhzldotysOmDA5h/MmuauqwJ0rU+RqgeAny6KwWULKE9M3Ue3IIKT5k9ZU48w5A8nN5lMf4V3Tal8YkA/0kbo3fR3IJ3blmHmFdPOqjCzWIsjUuGiNU5e8uRlJUUpXVcQrrMs5RKZuotuQTVMLFEJ+idzCBV1dOHMFBO3HILD6Gatq4KeFt5JXhjR6lYP7H8MoyySvlmrCP8ARMHRiP3OpXHjfeeH6yio6Klp2gMcGNe0WETgbD9kHXAKKGqGpVQNGnm0XTY0dFkd5LpP/Sug/wDSuk/9KjppCflUFO+3ZdA+YXu5/UF0dfnaqiKxb4gU+ePYJ4d53V+R53V0CjpzBXfn7I6DqYnUVboS9tNCTocur/VcTcRe8VMlqdjfuXW/dCvz2Y4sZfw5j6oDLp5aftyEd0MrE7M/Wy6T/wBJXRf+kqKCT9BTYX/pXQf5LM9CR/muo7zXUde11nf5oPf5lHMe5V3W3KuT3Ud7OCfAum4InzCt5H4gVvzaUO6CcVRY9V0lJNTQlrWyPzvOtzpZPqpnbyFHXk1Z045im3ZtuU6rmG698k8171J+pe9S/qXvEn6lvdWRareNFC1ldNB8llTAdVJm804vKyFWWqI+EFO5D8CONz9GtJPopcBrYoTM+KzQL76281HqfAC4+gv/AETSXd9FMM4uO3whqsuydo7kAmxDzTn20WYpndSBC5Ky2RDUXDsnfj0VBLUvswfUqCikp8sVNEXP/Mf+qNDFDDmq5Oo79P5R9lS4u+ZxhpaEO9Rpl+6xqiqYKp5mYxvUJeMhu1Md2ClZlcfg6wXVC6i6gBXXC64tsut6Iy+iE/ooZru2TkCB2TnI6os5EfCEXN/W390CDsQfujp8IFzZUcMsTYmM+ZynnmorkSaqmoK/FC185MUPmfmd9Apax8EckeHU/hiHitb/ADVXiE9a8Plde23pdDRS5Xt31Hw2V0dUOV+VlFo4IopyITQ4I2WQudYKLB5Hj5gjglR2LVTcOVMzsrS3zPk0Dck+Si4Vo8kf9/UucXFpLI2NZcC+mbXZT4R7kxhfZwmaXQTga+X/ACkLhx1NieC4TUy08bnTUsbnXaDqRqqrhTA5v4mFUzvrE1e1ThqkwnEYH0kDY4Z4/kaLNa9nl9UHovCyRu7LKB2XVs4WChxqojk6nhf2sRa30UuLSTStlLWeHYbhO4iriLdYfshjlX0ul1rNvfQDf6p5BQlI72T7Hf8AdP353XdH0T+ysrcjyDrEIolbp7mx+pRleVZyiPjbrZUUVgNSV12D8qwAwyx1LSWeOoijkz3ADWjMBceZP3VfgfDVDVRCrrqiQaGRxs4HS2uTUBcdupWi9Mc0L6wdF2cPuAzU/TsuAK7Lw5gt+1M1VGMtbsvarUMrcPgeN4Zc376FX5bIPRQer22WZX5OQRCsrI83nVXQGiHI8r8r5GE90G31KDQs2Y6aBOdfYKirdg7f1OidV28lSYvPQzOlYMzXjLI06XG9wexHYr/tZRMY/JRyXdkOuUZXMdmuHDue6qcSfWVPVmsMo0aNmj0WB8UQUmF0FK42dHC0H6puO07z/FWPGGalkaH3zCy+qtyut0QgVdboGysnNVFJlmYSjVw+QRrov0hb8inprdE1ysiEQOTXcp3koZjoE93a6LkCrpsrm7Fe/O7tBROpUAaXjNsN/X0T5s5JJ3WYjYptXMPzlSnxv+qzrOroGyLr87WV7oGyuCr2V+Q5FSDZXNkCEXK/K/MqRwaLDfv8N+VuYkcO66zk43N/wA5G3PMVdyzOQdyKf25WV+YVrqx8kSj+AUAj+KFmcszldyugtO6f2V/hDUQonlof/rNLT9Cn/Fbz+C/wM+YLIjCsvr8equ5ZnLxKyA5W5FZVk5XtyzWThmR+C/4MXzBBP0a76fHcq5XiWq8XK6smjXle6ceRNk9B/pybe4T4yPw7cmOym6FT6J9SHNIt+BYrVWcrOVtUN1muo/mT7K6LkSiUFmW6i0DinFH+QHxaqxWVyyuTTbVbnkzdF2qzKy0CKKCJRaA1v0TgEfwbJsRN/jATh8FllKyuWUonkRomFHfkUOVuVrqU6p34eA4fJUCUtNiHAX+y4gwz3aVpto74z8FllKylW+Aboo8rq6vyj+YKSXU6IyLMj+DwfUshZNm/M/8AyXEUEdXRyZfmbqPtytzHxWVll9Vl9VZZUW2TRqE7fkFZHnD8wTxqraIhH8GknMbdPNR4tZpvqprZ3W2v+HZW9Vb1WZZkU3cIjfkPgJUR1T125H4R8GbRB580/sfw7K3wg3IWyuir87qNSb8z8I+DPSW/hSg+jwf6hHLra/3/ABrevLut13CJ1KJTj8MYUm7uZ/C8OXY37/yBF00oHUI7rRWRQ05WUad35H8LRX3/AB9uZ3Ct8ARQUHdP78j+Cf5E8+4R3VuV053On2Kcij+Cf5OyA8QTt07lfkeUPyJ3ZXR/mNFoiOQTPmCk3KvzHOJv92E7U8j+Af5DRactF3TTYp51+ADm7wtA5n+Z0X//xAAoEAEBAQACAgICAgICAwEAAAABABEhMRBBUWEgcYGRMKGxwUDR4fH/2gAIAQEAAT8QMRiFHueSwveG5mTCN0GPANN4lzZpGu0+XmGBDqKKuud7sDZtqzJtoJ7SYAFxRf3njg5sxoWvVgOI1BZcr0bvDezubGGh2ABsTZYo2EAGEXyVEjGJEwxeYsgj+J5NkS5OprUsOFxsZ4CPbpe4mRU1NxpCmzjIxt66Ilu7aJ1c+JnFxwHIQsbpHeZRiajHS5p3a6T4ycEKAsvmRLSAGsaQtsa5i4tGR6z75mBYlfVxNzHjNE3dYScF6YnBQkbBaOFgTPEZkYaiWlgnh7TXNDifIdS9W0Re7Ia24kjuKcZzIgG1YnEsVuRIqADUY/iFGcu8NidbH9NwLAYgDlmtjc511cDObSAwzFY8JzmeD+IcZeJ0jcg1a9E6JwcSPvwoaISoNFsTuk4Rh0wHdu8zeEs8Q4cLKa1rJbCM43UYp4kzgLFQ8hFlcsQTU1gOYH1EfUJ6gnUTqRMTSAMthYBKxJCJkQivi7KXbkrLOF8YjHVw5tNZ4seY8JVYYbNfI3se5h94T3N0kHm3wSBzcAWI7FbOiMm3RLYItkhcO7nC4ATmIHG+ML1BNkMB+7pztRw8HPkkBxHJniKNMFLplSyt+ax7h7SDbHM8ZWa3WmAg9WJsQzCJlyJ1PgPufSEYFyeOFoWhOU3fEvE16AeKchN3d6cbNn3cYOSy28CtXiGn+brW4hchWzvN3CEkpGy13aOxBHKn1VRmRZHEp6tOK3GhLcXmHkZbl/qNdRILDfc2dS6Q9w+MYZMp5wNs0U7gkAE22cSPGTEt6Aqxp3vUSLmFP6uumvhjwsY4jHEWwdyXVl0l9PVzW4kYmptlvxOrkwjuWlxJrjFk7dLjYk7gCOGcZFBkFl1JYxUklGxkgr1OucTtt7Kfv+lixzlD4e/mxADOND9nwytKhzNgLgvtMe5P2JWHJctzDZaSyOWMmMK4CchOMB97BMsZzwMJ4t98SKnP3ZCxIn1Fd9W0LVCQS9twS7e0h+99vwEtd5zvqAvTwyx3wdWvg4LmkwT95aDryZCyx3EPSPUfOfqcxelgXeLRy7JDxEOpd5Qu1mTL2JBjGxX3WyoNre/JAD4c0RYRs2DYwxvVgXZMi9jg2XiSh84DdjAd/uboZByG3AE3tycVi0yEN5cI6QTcYj8q4CT2txzB6t8ExqHRGC0FkQWXP7lfmbtheHU8AikXCwWssQQ4ZDQ+OaqQP78U+zxhS5G4d8Oo9yRpiBVOHcnDV+iBsmUDDub67gAIszB6fn9QsIQE5tzNXeJtN1aGJ+rCe+D/ABOSmGZsidbObjbIFFVI5jY308R9+C5CIBInFHHadgiPDcqSiZHdDMmHSB+oaAOf9QTIcfRxsGNO8/b8wLRAA/tP7MDJE8JVXjB3+oNDLjH6Zqad+jLP1x0/3kicDRvCJEk6AfWMhk83C3FgNYIU2XAy7NgJ1+FQPj4nzicFtPPozxgIzxnqAk+q54C90VDFIdgLk8yoviueV6Ob+FEXoB9DDLRYNzYcYdV+NO5PEmIaC0z1kYTex1f2tnbwMp2DuBq95XH85PlD9XKPJ+zFPiIlotkincyKy+RbfjCJEJseJMbuy5Y8nrzOFmjB1y6JdZ7fe+m3VaB/+xcWIwHeDNyJfvYwLh6PqQAPXMxGn4V/NyGRnjjrrUycLuvaF19TdDTU7ghHJOrLlYhQXkfnoQ5r4trerIyRpxKLfxfRfVOtSRg9WYcXwLAnGBq+AeN4+ALuhNwbI5I9xAnrHCfQUgRvhzpl7idTwBvQJl5P1ICOuQoAWBXOM5UwHSUJGNTx7cUgIM65P04hVC3r9w57Ax65s4NMBi185ygbGjqDBs0zJkjisEHgHUkI8S0Ti4+rPpYQZHd8DxPGfL+HYQGbhMWN3lylOvoPm+W5dgEB9xEg5HP161s3C7Pejc4JnRr2Ku5utO/cgLBfhcYC/IaOznL6e+lvSfA7B44uc6PfsHDQ5hBLaJ+cRwgM/lMNsIRpGsPWZKTLoirjMcx2Dd2dzsl7grG0gIc4LunC7Xb2KJ8BzJbeFnyzg+eB6bPAqGsx6tTiV5sLFBDg6KRbw3gt/wAH0LawlfJZI6Z1yeFq64h+Mn5FKurM9cRCLtrlbKu3W7PF2jBHLm2ZYzVGN1nHcZ4bhOiP3uy6i47EIEdifREj2cPo9Hczt3o4Ne9nR1hWaMub6aYFyELBevwG4RTbUykbmnUm0eGfFiAZV9LkNTtxyAS9NqHjV0l8DsHE5n4QWyQ4Iv0NYpQFVU9dOOXNLk+2PyxfidBxOXjtIM8Hh/fzD5LpjOPIdP7G39YDonEA8A84bnthLJ1uLEZM0cZjuDwZzDRUCoYyDUuMwRRTg3OXlPcsZ4ZJ1gAyzptMxLc5Afv+JtqLq+t1h6PT6lKu/S/hJ8k5RutzpgTBgvHxcpB3r02HkRYRL3rL9vNfF7yKwVv256dg7IHbS+BLZtBMavgMvHhZA27nvxeM2GqhluB4TweHxqLCWtxRwbpoP0C96gmypyewUHsYlxjmkDk+32vZJ/PPT8Q8/YQWRugA/wDAPrGzQMgIHaORPY2LMei+fEVcOLR0QNEYi+NlPqf/AOXLZmDPjyTM0SzG+5ql2zxtyUgSpFyADZMn0vnXbhQo8Y8PdlxYTaVhyvXcxUB6JVLAcSPDOqPntBcJM3uQRTxD5Dwhw9AePogENwa+EBv1Hj4bCzQoIdI3Q9H7ZkfLj6x3Emok/RBPcTdiFuJG7urFnhLcpLPad9XBM7TJvqENqrgJeQeDnuGe1n9p+iFTS+32yz33PnzGO+WwmpRln12jC/FX/sL6LntDES+Q6H9jBtyQCex/sMI/TVuXs6B+nNss/wC5/V+vhuSnAQvZ8xpaPfEsg0T0IWw9ZY2HgrYYFLpADtcJxx9JchXO222F8R8vwNTLsXSXgpy8A2bVA+2c3G9zc5n7MKR8txw4WY+I5+36NoO7Xz8WPa+UjtCJj6SR7uddAv8AU+kojP8ALDdJl1Fw1I1BtJ1fq4wz7IRgJ82QGP3KGEhweZjzZu59r2jI052QD56YsLlZHHift4h8+Pdung7dbXs4D5Wd9D4uwf5JXt2x4G7D6ZZefAJtpautuhr5ddT/AKtoqbx6CW0q3c5OTn5OILgO7nowsh+iOtTSYHDDhT+odcLT1kJ4WWe+SWwbQHJaYbH023ry73ZS1atfC8I8dU4HoN/liOM82xbG7Z52fAB6TkYbG/XlBBf4eSUkHA5+IaahD5Xg/snztZ+k3pLuMC50hXIkkfjY/wBDf2eJR1Fer4k+eL0PxdHgDwUl+jMsvAEvj2y0h9ef6oExGCjTz1PzPQQ+ELBQ6WkWKC1rpRwn0kseCQdF8c8RYYv5eIk+GAN1xgeBv9ONzZ1Zyy/hOkPk7h9WREePtWS/8S6+HPHyw+p5jm3M07+P39XW2nLHNJ95CeEp4Yfd7C3CitLrjsCELkfkLa4G5My+QU1e8u5snwel49IkjDOHyL6ANX4uYOyJ3wol/IMaDaGxVOuIIDwgn6ZcxUcweNsVdvH4ZSDiPmw3Svtz8yKZOEcfzJuP99ni/wBsZA/3XuoHk9cxt7T2yNeDxzYZ+AukNfTPjQu3FuXAR97Vh9OCwRu4B/cdpyL6WIAc5lA03kx09INZ8GxDg5+Z8TR9R/8ACj/51oNhPGo99R9xHicfeCKjsm4r/wB0mWtRT7Dbfc7YgZznLPTYX/mI9wfqd9+N48D4Mx4XwdorhyNCfCmATdDDPide38Of8S1ry/fPkYSUAsQf+gSOcP2S9bfZlu3BpbAy6skYj7skzw4iGsVvBGN95Ii1DttfU5g/MY9zLGOmLebfwSHr0NuZnvT+kHZFUEd7M/jU3rySCHXr6/FDX1FMe0AJ34g4H3dViLHqeCWo+rQIcC4ub3CKcLXcu/gMOl1vg6JfxNcXfoIZQnD0famus52cXwe382Xu7HH2QYTmUroc45wdPZYGD+5AZx2fhxdN+6Ndbdjt9DK9u32V8LgA53FaNGHZIYQ8sd2cjerJ/Db1wt7oJwiBP2Msn6QMXh+LEO1y4YPh9HzCqaeXbsqV4A+E6Ptt/nMIO98aFbhYSEAAtcz57YA5E/RcQb6vwQTgnhCOiIubS2meCt0GEnK5Srxek0uTqQu5t8F/EZ5H8pB0XFVTum6EHUH9wDhrOyt1AlkgV5yq/T+y6YxeF9iAQf3s/wCpjjnAgBz6A7kB6L4ZHoD9cXrAjWDR4claAQXAPsdTyS9UQfSnvJ8gH4/99h4d1Dr8nGrAuOTucn1NBAb0OmOM8/CNpBY1YAjn3ZzcI6LdfDOCTYBE5/D8Xvc/U/bMg8j22maCU25Ck71oUHIHI/g3A7eStcj2oJFBKNIXhnJhxsBl0P6u8mXNCQP0X/U2i79wsVMni2LOgrLn4unu5SBx6Zv2lr4tfDfKzCcOLiB6npxfCh3ze5E4xoH6mz/EpWpy2R9B3LyWPcSDhIQ4XrwKyIuvg6gLaZcJx2FdHVvEIBsS1Pa40dJU5IcXZufL5X3fp1v0bdqY/CMacr/axFOxw/smJloZw2DehtDGTVjMwi6gaO/CQlsfUGjG22N2JXcodXz8IMxl6tNLZEDq2QIHUdp7bgwMLG592TuHx6ljPvjiJQM56kn5w+n/AGuQBSv7YVyn6YXOK575T/fNqVOpVfAkhHhlKwce5eDJMuTgh/Fr8ReYDuKvdhcMbYL0E7Mk+LlloPUsVbRfLt+G+ALbUCQVzotfIBWX5b4yMTSHoyrE/DfVEbEvotKXeDuDAgHqUsM8TkuNRIdodHXPgGtn4ivBD6O2QGFsy/y69F+yPtv22R4u8cmc56E+DuxLkITriPREN/P/AOGkMWWXyXHtb6LfiCeGfgdhD6gdcsYLj8sYSYEfbftl+8d21NnGOR+5OerRDscWBY1tz8x8lk47z8AHtuPRn+E0Nhq+F5PwIPkbV8wfe/lD2WwzbXu3MuLA9LDJeJ1Lg92BHl6tCPVzEn+HIS4HjFxs53TOxTPGR+HPgDzgSCQISdLq1uRyD8QrKuDPmJJ526SzkvvghXl+2e/+EfONkPOSLUjGEUjT3jTYBPmwsAeYvm5wd9BzvmF6/wAX0j0epEUfxLWIzzjbifsvtukl3OLKch4nuTsX3Yuw53e4KD5tP08XqfzyNOmBvpDeNjG5P/ZJ+BEePONuI+638xmc+Dn3EwkuZnhcYtO3uDZBdttfU8epfiWedldH+gTQhD+fwfD1Kb0+c8DfstHpH0QnqHFAMGHKyGviJEO7qHJAp/mNCCH4ZBZ4LlDNVjN8EC5/s0fzbPnmzzlkfYv0WPhA2Z+++MyzDLHjbNe76ptPwTAYME+eeF8kiMY1gM2nB8cT/hz7sfMj5gPmPjJDCOtCbhTiebk2TLVu2x8rgv8AF3fqXqfLPGQ8+mVO5HKIv6kpxwC8jf8AX5DZP4YfNh82IGu2Bzs1xCZWFCepOLs8bluvBNv8zhn8GeDwzweB6S926I/X4ngnzh82HzYfNh8w6XYsNndo6nZ1PXmWsvYnmMZzzc0tr5H8Dyz9w/FsAAefzJ/Di4uJ39GTE5kxmUjXmDuNgbW83eb3PdftlhM8X8A8r+M/HSfPFxcXEnCGES2sb1kDDERz4nJ4G7f1df58j5PBLN2/Hf8ADxcXFqssrxAx3Quk8TWcax5/bd468HyeVl/zcXHkU6YwL5QpZWvD1JMbbMsPvVlGSnznln/n4t+Fvwht9peXxYraqDwZmeLpg4v1MnhmXk8sS7/4Gnxb8L//xAAvEQACAgEDBAAFAgYDAAAAAAABAgARAxAhMQQSIEEFMDJRYRMiFBVCcYGRJFKh/9oACAECAQE/AC0uHmLowgiw+JEOg1M7YEjDeCXDoPC9TK8CNEhG+pgMXwHOhEuAweB3nEOhjRYPEARjDANog8CIL0uXGiwatmQGiwi5FPB0owieoutzuncZvelRopglzqM1kIDVzPhRd+2HKcZtWInQ9aHoFtzDow2mM7aNLudggSMKOrCVFMyN2KxmHMWyliKAmXOHU0rGOxY12m4uPJj7GKkbiI3cAdG4MxEESoRKrQR+dcnMG4izrcyhO0miZkxk4yoO5nT5UxoyjGQ1VzdzoQMLIX/qBuz7nW9QoUjmxMQpF/toYgrwMUx+dcsTiCfE8VlGIse/8XHaozMXpSF+5idjKWck7bC/97TNgFAqdp0JBxGuO46GJpcJha4vMyc65RMcEfGGBBFgzrU7SQBQERyv9AMxZQMZIyAn2pEGEZSK2uIgRQo4Gq+HT9Q1bxOrW6ud165InEU76dZ3Y8rAoCPYMx9NhyGg3b+I/SYlWp0gHZsPfgp38MnTijUcFWmJj2LrlmM7RfqnTqO4Mw2BnxD4WnU/vU0339GZvh+XDlHcpWdQ79qAmdMhTBi7uaN+FC/D9ZJmKO42iCgINMswqWNAXF6UKbY2fsIxnQ5t+wnnj+86zJhVCMnv1P8Aj9/d/oH1HAMZSosbxcyn3LgNtp/H4u/t3gMGBIuBLuoYIBc/h0P1EwMFFKABC02B4gYzqMAy4BlBJYGnjpuI+PtXH+b0ZVb6gDD0q+iRFRkIBN6HoULXcG0rQwTF9UaEwGHTB1BxDIPTKR/n1OZmcPjwH8HwyqWFj1KlGG4VMVSDrh+qNGMB8GFXMZPaBACaAh6QqpLNR+3MMuEVrWlCbfaYq7uI/d7GhlwGGNF4mF1VwT6mTMW0sepQ9z9v3M28UH7hMghxQjXnS6qXozVBl+4i7jW5cMuK24hjQjUoRWxn8p7hYy/+TN05xuyk8Ts/M7IcZhwH8CChG8agMuOa45hH3MHMU0Qa9zNmVxQETOOxQD6E68WyN9xpc7jL0A3qHGP+w1OuNto3Nkwm5cuCfqRsljmWfC4ToNDqDUc+YEI8xL8KJHmpAjm/MSvCiFEbxr5Ih1HIjOI3hUx4FbCa58D8lPqEbmMNRomYrVGNyfkCHVPqEMbSoNAK+bj+qGNoBoflDwxcwwwjVvlnXDyYYxg1Pyf/xAAuEQACAgEEAQMDBAEFAQAAAAABAgARAwQQEjEhBSBBE0BhIjBRccEGQlKBkaH/2gAIAQMBAT8AUbDqHYGXG3HsBqHuGVsOp3D4inxDufYDuIRCYdhOUEfqA+PafcIJkHnY7jatxGh9gOwgj9wm9gdr2B2qKYTDt4i6bIwsYzUbEy9qRBANmu5UKwTjuvW1wLGl7aHRgA5HFgTBqnfwCP6qHAuVadAZ6n6YMYLoOuxBLl+YfE5TszqCGKfG4MJjCYE5uoj4QMIUGyZhQY2FuoicUTlyWvkzJnxZRkVXBJB8TIKYiAxfJj2IzQNLuCGL1ughHmHxPTdFkcnKq2i+CfzMTUysR4Amo02TK6N9W1sHoCp6nhfLhycP9jCq+RNBpXLg0BxPmZjeR/7OyGjMj37TE63SN3G8if6dzKcGbEHp+RYf0wA/xMePkAD2PEwonG3BPwBNXkzIwTEAFu2bj8fHn+Zh1V+GFNPWARqFs+fprc4wCo424wCcSI8TrdI3cbqYsrIwZGKsOiJo8/JEJPlgD/7MaoWDFz4HV1Nfyy5Ry03Bfhg0Oc4QfN1/My5WyOzsbJOwMaATjCZnwC/0x9O9XUArdO4/cbrbTYRk02Fg1EKKMyazPhBJF/mDX53bu5rOXMAn4BMKTgZUYeBte2LUEEXFIZfxUcfqO6R+4R+mOfgTQepvgHBhyT/6ImsxZcRAIImmwpzeh46nqFHOxXo/4nmAmXORr2HC0w/URT58QtZO6zIahy2KEAjTSplZj9MHxAdTwoYj+SJnPlYpDGjG07j4gWMlLsNBmKcqFQqYdQxhzuRVxd/qn4h8971NDqThyfg9w51CtwJMy+GI2R3Xpqg1LfKgx3DiwIBB6gwTjUuydxs/UG4lTEBzS+rE1ThSooUf4+ZnFZGHsxEA+fmVDUEDL/EZhUG2TqCAbVBtjynIi38eJnN5GlwAn43v2ico/Rgr2VtgamjmyxggyVsPfUbowGcoD7AaPs0ujbL5Nhf5qP6UlrWWh+RZMyIUdlPYP9e89QbCBCehPpt/xMRL+ROZgaXAYmtRVA5EV1MfqmFLr6hJFE0L/wCo7MzFiSSYP2BAZhcCPksVcH6eqip1D2dgJUre/cYJX2RAi/YAShL2vz9hcv2D7MCD2kfunZfsjsNyf322G5g/ebYbH7Btl/d//9k="/>
+</defs>
+</svg>
diff --git a/app/public/favicon/android-chrome-192x192.png b/app/public/favicon/android-chrome-192x192.png
new file mode 100644
index 000000000..62e95acfc
Binary files /dev/null and b/app/public/favicon/android-chrome-192x192.png differ
diff --git a/app/public/favicon/android-chrome-512x512.png b/app/public/favicon/android-chrome-512x512.png
new file mode 100644
index 000000000..41400832b
Binary files /dev/null and b/app/public/favicon/android-chrome-512x512.png differ
diff --git a/app/public/favicon/apple-touch-icon.png b/app/public/favicon/apple-touch-icon.png
new file mode 100644
index 000000000..5273d4951
Binary files /dev/null and b/app/public/favicon/apple-touch-icon.png differ
diff --git a/app/public/favicon/favicon-16x16.png b/app/public/favicon/favicon-16x16.png
new file mode 100644
index 000000000..8ddbd49c0
Binary files /dev/null and b/app/public/favicon/favicon-16x16.png differ
diff --git a/app/public/favicon/favicon-32x32.png b/app/public/favicon/favicon-32x32.png
new file mode 100644
index 000000000..80cbe7a68
Binary files /dev/null and b/app/public/favicon/favicon-32x32.png differ
diff --git a/app/public/favicon/favicon.ico b/app/public/favicon/favicon.ico
new file mode 100644
index 000000000..9094a07c7
Binary files /dev/null and b/app/public/favicon/favicon.ico differ
diff --git a/app/public/favicon/site.webmanifest b/app/public/favicon/site.webmanifest
new file mode 100644
index 000000000..45dc8a206
--- /dev/null
+++ b/app/public/favicon/site.webmanifest
@@ -0,0 +1 @@
+{"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"}
\ No newline at end of file
diff --git a/app/public/logo-with-text.png b/app/public/logo-with-text.png
new file mode 100644
index 000000000..ee922a2a0
Binary files /dev/null and b/app/public/logo-with-text.png differ
diff --git a/app/public/logo.png b/app/public/logo.png
new file mode 100644
index 000000000..ea94aec79
Binary files /dev/null and b/app/public/logo.png differ
diff --git a/app/public/logos/github-black.png b/app/public/logos/github-black.png
new file mode 100644
index 000000000..7a7a82474
Binary files /dev/null and b/app/public/logos/github-black.png differ
diff --git a/app/public/logos/github-square.png b/app/public/logos/github-square.png
new file mode 100644
index 000000000..527ba79f2
Binary files /dev/null and b/app/public/logos/github-square.png differ
diff --git a/app/public/logos/github.png b/app/public/logos/github.png
new file mode 100644
index 000000000..dbb2b578c
Binary files /dev/null and b/app/public/logos/github.png differ
diff --git a/app/public/mac-command.svg b/app/public/mac-command.svg
new file mode 100644
index 000000000..5cee45951
--- /dev/null
+++ b/app/public/mac-command.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" id="icon" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;}</style></defs><title>mac-command</title><path d="M24,13a4,4,0,0,0,4-4V8a4,4,0,0,0-4-4H23a4,4,0,0,0-4,4v3H13V8A4,4,0,0,0,9,4H8A4,4,0,0,0,4,8V9a4,4,0,0,0,4,4h3v6H8a4,4,0,0,0-4,4v1a4,4,0,0,0,4,4H9a4,4,0,0,0,4-4V21h6v3a4,4,0,0,0,4,4h1a4,4,0,0,0,4-4V23a4,4,0,0,0-4-4H21V13ZM21,8a2,2,0,0,1,2-2h1a2,2,0,0,1,2,2V9a2,2,0,0,1-2,2H21ZM8,11A2,2,0,0,1,6,9V8A2,2,0,0,1,8,6H9a2,2,0,0,1,2,2v3H8Zm3,13a2,2,0,0,1-2,2H8a2,2,0,0,1-2-2V23a2,2,0,0,1,2-2h3Zm8-5H13V13h6Zm2,2h3a2,2,0,0,1,2,2v1a2,2,0,0,1-2,2H23a2,2,0,0,1-2-2Z"/><rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/></svg>
\ No newline at end of file
diff --git a/app/public/onboarding/command-menu.svg b/app/public/onboarding/command-menu.svg
new file mode 100644
index 000000000..71975d55e
--- /dev/null
+++ b/app/public/onboarding/command-menu.svg
@@ -0,0 +1,7 @@
+<svg width="450" height="180" viewBox="0 0 450 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M115.673 17.6818C115.673 18.9091 115.451 19.9697 115.008 20.8636C114.565 21.7576 113.957 22.447 113.184 22.9318C112.411 23.4167 111.529 23.6591 110.536 23.6591C109.544 23.6591 108.661 23.4167 107.888 22.9318C107.116 22.447 106.508 21.7576 106.065 20.8636C105.621 19.9697 105.4 18.9091 105.4 17.6818C105.4 16.4545 105.621 15.3939 106.065 14.5C106.508 13.6061 107.116 12.9167 107.888 12.4318C108.661 11.947 109.544 11.7045 110.536 11.7045C111.529 11.7045 112.411 11.947 113.184 12.4318C113.957 12.9167 114.565 13.6061 115.008 14.5C115.451 15.3939 115.673 16.4545 115.673 17.6818ZM114.309 17.6818C114.309 16.6742 114.14 15.8239 113.803 15.1307C113.47 14.4375 113.017 13.9129 112.445 13.5568C111.877 13.2008 111.241 13.0227 110.536 13.0227C109.832 13.0227 109.193 13.2008 108.621 13.5568C108.053 13.9129 107.601 14.4375 107.263 15.1307C106.93 15.8239 106.763 16.6742 106.763 17.6818C106.763 18.6894 106.93 19.5398 107.263 20.233C107.601 20.9261 108.053 21.4508 108.621 21.8068C109.193 22.1629 109.832 22.3409 110.536 22.3409C111.241 22.3409 111.877 22.1629 112.445 21.8068C113.017 21.4508 113.47 20.9261 113.803 20.233C114.14 19.5398 114.309 18.6894 114.309 17.6818ZM117.86 26.7727V14.7727H119.156V16.1591H119.315C119.413 16.0076 119.549 15.8144 119.724 15.5795C119.902 15.3409 120.156 15.1288 120.485 14.9432C120.818 14.7538 121.269 14.6591 121.837 14.6591C122.572 14.6591 123.22 14.8428 123.781 15.2102C124.341 15.5777 124.779 16.0985 125.093 16.7727C125.407 17.447 125.565 18.2424 125.565 19.1591C125.565 20.0833 125.407 20.8845 125.093 21.5625C124.779 22.2367 124.343 22.7595 123.786 23.1307C123.229 23.4981 122.587 23.6818 121.86 23.6818C121.299 23.6818 120.851 23.589 120.513 23.4034C120.176 23.214 119.917 23 119.735 22.7614C119.553 22.5189 119.413 22.3182 119.315 22.1591H119.201V26.7727H117.86ZM119.178 19.1364C119.178 19.7955 119.275 20.3769 119.468 20.8807C119.661 21.3807 119.943 21.7727 120.315 22.0568C120.686 22.3371 121.14 22.4773 121.678 22.4773C122.239 22.4773 122.707 22.3295 123.082 22.0341C123.46 21.7348 123.745 21.3333 123.934 20.8295C124.127 20.322 124.224 19.7576 124.224 19.1364C124.224 18.5227 124.129 17.9697 123.94 17.4773C123.754 16.9811 123.472 16.589 123.093 16.3011C122.718 16.0095 122.246 15.8636 121.678 15.8636C121.133 15.8636 120.674 16.0019 120.303 16.2784C119.932 16.5511 119.652 16.9337 119.462 17.4261C119.273 17.9148 119.178 18.4848 119.178 19.1364ZM131.269 23.6818C130.428 23.6818 129.703 23.4962 129.093 23.125C128.487 22.75 128.019 22.2273 127.69 21.5568C127.364 20.8826 127.201 20.0985 127.201 19.2045C127.201 18.3106 127.364 17.5227 127.69 16.8409C128.019 16.1553 128.478 15.6212 129.065 15.2386C129.656 14.8523 130.345 14.6591 131.133 14.6591C131.587 14.6591 132.036 14.7348 132.479 14.8864C132.923 15.0379 133.326 15.2841 133.69 15.625C134.053 15.9621 134.343 16.4091 134.559 16.9659C134.775 17.5227 134.883 18.2083 134.883 19.0227V19.5909H128.156V18.4318H133.519C133.519 17.9394 133.421 17.5 133.224 17.1136C133.031 16.7273 132.754 16.4223 132.394 16.1989C132.038 15.9754 131.618 15.8636 131.133 15.8636C130.599 15.8636 130.137 15.9962 129.746 16.2614C129.36 16.5227 129.063 16.8636 128.854 17.2841C128.646 17.7045 128.542 18.1553 128.542 18.6364V19.4091C128.542 20.0682 128.656 20.6269 128.883 21.0852C129.114 21.5398 129.434 21.8864 129.843 22.125C130.252 22.3598 130.728 22.4773 131.269 22.4773C131.621 22.4773 131.94 22.428 132.224 22.3295C132.512 22.2273 132.76 22.0758 132.968 21.875C133.176 21.6705 133.337 21.4167 133.451 21.1136L134.746 21.4773C134.61 21.9167 134.381 22.303 134.059 22.6364C133.737 22.9659 133.339 23.2235 132.866 23.4091C132.392 23.5909 131.86 23.6818 131.269 23.6818ZM138.263 18.25V23.5H136.923V14.7727H138.218V16.1364H138.332C138.536 15.6932 138.847 15.3371 139.263 15.0682C139.68 14.7955 140.218 14.6591 140.877 14.6591C141.468 14.6591 141.985 14.7803 142.428 15.0227C142.871 15.2614 143.216 15.625 143.462 16.1136C143.709 16.5985 143.832 17.2121 143.832 17.9545V23.5H142.491V18.0455C142.491 17.3598 142.313 16.8258 141.957 16.4432C141.601 16.0568 141.112 15.8636 140.491 15.8636C140.063 15.8636 139.68 15.9564 139.343 16.142C139.01 16.3277 138.746 16.5985 138.553 16.9545C138.36 17.3106 138.263 17.7424 138.263 18.25ZM154.577 14.7727V15.9091H150.055V14.7727H154.577ZM151.373 12.6818H152.714V21C152.714 21.3788 152.769 21.6629 152.879 21.8523C152.992 22.0379 153.136 22.1629 153.31 22.2273C153.488 22.2879 153.676 22.3182 153.873 22.3182C154.021 22.3182 154.142 22.3106 154.237 22.2955C154.331 22.2765 154.407 22.2614 154.464 22.25L154.737 23.4545C154.646 23.4886 154.519 23.5227 154.356 23.5568C154.193 23.5947 153.987 23.6136 153.737 23.6136C153.358 23.6136 152.987 23.5322 152.623 23.3693C152.263 23.2064 151.964 22.9583 151.725 22.625C151.49 22.2917 151.373 21.8712 151.373 21.3636V12.6818ZM158.123 18.25V23.5H156.782V11.8636H158.123V16.1364H158.237C158.441 15.6856 158.748 15.3277 159.157 15.0625C159.57 14.7936 160.119 14.6591 160.805 14.6591C161.399 14.6591 161.92 14.7784 162.367 15.017C162.814 15.2519 163.161 15.6136 163.407 16.1023C163.657 16.5871 163.782 17.2045 163.782 17.9545V23.5H162.441V18.0455C162.441 17.3523 162.261 16.8163 161.901 16.4375C161.545 16.0549 161.051 15.8636 160.418 15.8636C159.979 15.8636 159.585 15.9564 159.237 16.142C158.892 16.3277 158.619 16.5985 158.418 16.9545C158.221 17.3106 158.123 17.7424 158.123 18.25ZM169.894 23.6818C169.053 23.6818 168.328 23.4962 167.718 23.125C167.112 22.75 166.644 22.2273 166.315 21.5568C165.989 20.8826 165.826 20.0985 165.826 19.2045C165.826 18.3106 165.989 17.5227 166.315 16.8409C166.644 16.1553 167.103 15.6212 167.69 15.2386C168.281 14.8523 168.97 14.6591 169.758 14.6591C170.212 14.6591 170.661 14.7348 171.104 14.8864C171.548 15.0379 171.951 15.2841 172.315 15.625C172.678 15.9621 172.968 16.4091 173.184 16.9659C173.4 17.5227 173.508 18.2083 173.508 19.0227V19.5909H166.781V18.4318H172.144C172.144 17.9394 172.046 17.5 171.849 17.1136C171.656 16.7273 171.379 16.4223 171.019 16.1989C170.663 15.9754 170.243 15.8636 169.758 15.8636C169.224 15.8636 168.762 15.9962 168.371 16.2614C167.985 16.5227 167.688 16.8636 167.479 17.2841C167.271 17.7045 167.167 18.1553 167.167 18.6364V19.4091C167.167 20.0682 167.281 20.6269 167.508 21.0852C167.739 21.5398 168.059 21.8864 168.468 22.125C168.877 22.3598 169.353 22.4773 169.894 22.4773C170.246 22.4773 170.565 22.428 170.849 22.3295C171.137 22.2273 171.385 22.0758 171.593 21.875C171.801 21.6705 171.962 21.4167 172.076 21.1136L173.371 21.4773C173.235 21.9167 173.006 22.303 172.684 22.6364C172.362 22.9659 171.964 23.2235 171.491 23.4091C171.017 23.5909 170.485 23.6818 169.894 23.6818ZM183.593 23.6818C182.775 23.6818 182.07 23.4886 181.479 23.1023C180.888 22.7159 180.434 22.1837 180.116 21.5057C179.798 20.8277 179.638 20.053 179.638 19.1818C179.638 18.2955 179.801 17.5133 180.127 16.8352C180.457 16.1534 180.915 15.6212 181.502 15.2386C182.093 14.8523 182.782 14.6591 183.57 14.6591C184.184 14.6591 184.737 14.7727 185.229 15C185.722 15.2273 186.125 15.5455 186.44 15.9545C186.754 16.3636 186.949 16.8409 187.025 17.3864H185.684C185.582 16.9886 185.354 16.6364 185.002 16.3295C184.654 16.0189 184.184 15.8636 183.593 15.8636C183.07 15.8636 182.612 16 182.218 16.2727C181.828 16.5417 181.523 16.9223 181.303 17.4148C181.087 17.9034 180.979 18.4773 180.979 19.1364C180.979 19.8106 181.085 20.3977 181.298 20.8977C181.513 21.3977 181.817 21.786 182.207 22.0625C182.601 22.339 183.063 22.4773 183.593 22.4773C183.942 22.4773 184.258 22.4167 184.542 22.2955C184.826 22.1742 185.067 22 185.263 21.7727C185.46 21.5455 185.601 21.2727 185.684 20.9545H187.025C186.949 21.4697 186.762 21.9337 186.462 22.3466C186.167 22.7557 185.775 23.0814 185.286 23.3239C184.801 23.5625 184.237 23.6818 183.593 23.6818ZM192.531 23.6818C191.743 23.6818 191.051 23.4943 190.457 23.1193C189.866 22.7443 189.404 22.2197 189.07 21.5455C188.741 20.8712 188.576 20.0833 188.576 19.1818C188.576 18.2727 188.741 17.4792 189.07 16.8011C189.404 16.1231 189.866 15.5966 190.457 15.2216C191.051 14.8466 191.743 14.6591 192.531 14.6591C193.318 14.6591 194.008 14.8466 194.599 15.2216C195.193 15.5966 195.656 16.1231 195.985 16.8011C196.318 17.4792 196.485 18.2727 196.485 19.1818C196.485 20.0833 196.318 20.8712 195.985 21.5455C195.656 22.2197 195.193 22.7443 194.599 23.1193C194.008 23.4943 193.318 23.6818 192.531 23.6818ZM192.531 22.4773C193.129 22.4773 193.621 22.3239 194.008 22.017C194.394 21.7102 194.68 21.3068 194.866 20.8068C195.051 20.3068 195.144 19.7652 195.144 19.1818C195.144 18.5985 195.051 18.0549 194.866 17.5511C194.68 17.0473 194.394 16.6402 194.008 16.3295C193.621 16.0189 193.129 15.8636 192.531 15.8636C191.932 15.8636 191.44 16.0189 191.053 16.3295C190.667 16.6402 190.381 17.0473 190.195 17.5511C190.01 18.0549 189.917 18.5985 189.917 19.1818C189.917 19.7652 190.01 20.3068 190.195 20.8068C190.381 21.3068 190.667 21.7102 191.053 22.017C191.44 22.3239 191.932 22.4773 192.531 22.4773ZM199.873 18.25V23.5H198.532V14.7727H199.827V16.1364H199.941C200.146 15.6932 200.456 15.3371 200.873 15.0682C201.29 14.7955 201.827 14.6591 202.487 14.6591C203.077 14.6591 203.594 14.7803 204.038 15.0227C204.481 15.2614 204.826 15.625 205.072 16.1136C205.318 16.5985 205.441 17.2121 205.441 17.9545V23.5H204.1V18.0455C204.1 17.3598 203.922 16.8258 203.566 16.4432C203.21 16.0568 202.721 15.8636 202.1 15.8636C201.672 15.8636 201.29 15.9564 200.952 16.142C200.619 16.3277 200.356 16.5985 200.163 16.9545C199.969 17.3106 199.873 17.7424 199.873 18.25ZM211.687 14.7727V15.9091H207.164V14.7727H211.687ZM208.482 12.6818H209.823V21C209.823 21.3788 209.878 21.6629 209.988 21.8523C210.102 22.0379 210.246 22.1629 210.42 22.2273C210.598 22.2879 210.785 22.3182 210.982 22.3182C211.13 22.3182 211.251 22.3106 211.346 22.2955C211.441 22.2765 211.516 22.2614 211.573 22.25L211.846 23.4545C211.755 23.4886 211.628 23.5227 211.465 23.5568C211.302 23.5947 211.096 23.6136 210.846 23.6136C210.467 23.6136 210.096 23.5322 209.732 23.3693C209.372 23.2064 209.073 22.9583 208.835 22.625C208.6 22.2917 208.482 21.8712 208.482 21.3636V12.6818ZM217.269 23.6818C216.428 23.6818 215.703 23.4962 215.093 23.125C214.487 22.75 214.019 22.2273 213.69 21.5568C213.364 20.8826 213.201 20.0985 213.201 19.2045C213.201 18.3106 213.364 17.5227 213.69 16.8409C214.019 16.1553 214.478 15.6212 215.065 15.2386C215.656 14.8523 216.345 14.6591 217.133 14.6591C217.587 14.6591 218.036 14.7348 218.479 14.8864C218.923 15.0379 219.326 15.2841 219.69 15.625C220.053 15.9621 220.343 16.4091 220.559 16.9659C220.775 17.5227 220.883 18.2083 220.883 19.0227V19.5909H214.156V18.4318H219.519C219.519 17.9394 219.421 17.5 219.224 17.1136C219.031 16.7273 218.754 16.4223 218.394 16.1989C218.038 15.9754 217.618 15.8636 217.133 15.8636C216.599 15.8636 216.137 15.9962 215.746 16.2614C215.36 16.5227 215.063 16.8636 214.854 17.2841C214.646 17.7045 214.542 18.1553 214.542 18.6364V19.4091C214.542 20.0682 214.656 20.6269 214.883 21.0852C215.114 21.5398 215.434 21.8864 215.843 22.125C216.252 22.3598 216.728 22.4773 217.269 22.4773C217.621 22.4773 217.94 22.428 218.224 22.3295C218.512 22.2273 218.76 22.0758 218.968 21.875C219.176 21.6705 219.337 21.4167 219.451 21.1136L220.746 21.4773C220.61 21.9167 220.381 22.303 220.059 22.6364C219.737 22.9659 219.339 23.2235 218.866 23.4091C218.392 23.5909 217.86 23.6818 217.269 23.6818ZM223.688 14.7727L225.779 18.3409L227.87 14.7727H229.415L226.597 19.1364L229.415 23.5H227.87L225.779 20.1136L223.688 23.5H222.143L224.915 19.1364L222.143 14.7727H223.688ZM235.124 14.7727V15.9091H230.602V14.7727H235.124ZM231.92 12.6818H233.261V21C233.261 21.3788 233.316 21.6629 233.425 21.8523C233.539 22.0379 233.683 22.1629 233.857 22.2273C234.035 22.2879 234.223 22.3182 234.42 22.3182C234.567 22.3182 234.689 22.3106 234.783 22.2955C234.878 22.2765 234.954 22.2614 235.011 22.25L235.283 23.4545C235.192 23.4886 235.066 23.5227 234.903 23.5568C234.74 23.5947 234.533 23.6136 234.283 23.6136C233.905 23.6136 233.533 23.5322 233.17 23.3693C232.81 23.2064 232.511 22.9583 232.272 22.625C232.037 22.2917 231.92 21.8712 231.92 21.3636V12.6818ZM242.641 19.9318V14.7727H243.982V23.5H242.641V22.0227H242.55C242.346 22.4659 242.028 22.8428 241.596 23.1534C241.164 23.4602 240.619 23.6136 239.96 23.6136C239.414 23.6136 238.929 23.4943 238.505 23.2557C238.081 23.0133 237.747 22.6496 237.505 22.1648C237.263 21.6761 237.141 21.0606 237.141 20.3182V14.7727H238.482V20.2273C238.482 20.8636 238.66 21.3712 239.016 21.75C239.376 22.1288 239.835 22.3182 240.391 22.3182C240.725 22.3182 241.064 22.233 241.408 22.0625C241.757 21.892 242.049 21.6307 242.283 21.2784C242.522 20.9261 242.641 20.4773 242.641 19.9318ZM249.006 23.7045C248.453 23.7045 247.951 23.6004 247.501 23.392C247.05 23.1799 246.692 22.875 246.427 22.4773C246.162 22.0758 246.029 21.5909 246.029 21.0227C246.029 20.5227 246.128 20.1174 246.325 19.8068C246.522 19.4924 246.785 19.2462 247.114 19.0682C247.444 18.8902 247.808 18.7576 248.205 18.6705C248.607 18.5795 249.01 18.5076 249.415 18.4545C249.946 18.3864 250.376 18.3352 250.705 18.3011C251.039 18.2633 251.281 18.2008 251.433 18.1136C251.588 18.0265 251.665 17.875 251.665 17.6591V17.6136C251.665 17.053 251.512 16.6174 251.205 16.3068C250.902 15.9962 250.442 15.8409 249.825 15.8409C249.184 15.8409 248.683 15.9811 248.319 16.2614C247.955 16.5417 247.7 16.8409 247.552 17.1591L246.279 16.7045C246.506 16.1742 246.809 15.7614 247.188 15.4659C247.571 15.1667 247.987 14.9583 248.438 14.8409C248.893 14.7197 249.34 14.6591 249.779 14.6591C250.059 14.6591 250.381 14.6932 250.745 14.7614C251.112 14.8258 251.467 14.9602 251.808 15.1648C252.152 15.3693 252.438 15.678 252.665 16.0909C252.893 16.5038 253.006 17.0568 253.006 17.75V23.5H251.665V22.3182H251.597C251.506 22.5076 251.355 22.7102 251.143 22.9261C250.931 23.142 250.648 23.3258 250.296 23.4773C249.944 23.6288 249.514 23.7045 249.006 23.7045ZM249.211 22.5C249.741 22.5 250.188 22.3958 250.552 22.1875C250.919 21.9792 251.196 21.7102 251.381 21.3807C251.571 21.0511 251.665 20.7045 251.665 20.3409V19.1136C251.609 19.1818 251.484 19.2443 251.29 19.3011C251.101 19.3542 250.881 19.4015 250.631 19.4432C250.385 19.4811 250.145 19.5152 249.91 19.5455C249.679 19.572 249.491 19.5947 249.347 19.6136C248.999 19.6591 248.673 19.733 248.37 19.8352C248.071 19.9337 247.828 20.0833 247.643 20.2841C247.461 20.4811 247.37 20.75 247.37 21.0909C247.37 21.5568 247.542 21.9091 247.887 22.1477C248.236 22.3826 248.677 22.5 249.211 22.5ZM256.795 11.8636V23.5H255.454V11.8636H256.795ZM263.751 23.5V14.7727H265.046V16.1364H265.16C265.342 15.6705 265.635 15.3087 266.04 15.0511C266.446 14.7898 266.933 14.6591 267.501 14.6591C268.076 14.6591 268.556 14.7898 268.938 15.0511C269.325 15.3087 269.626 15.6705 269.842 16.1364H269.933C270.156 15.6856 270.491 15.3277 270.938 15.0625C271.385 14.7936 271.921 14.6591 272.546 14.6591C273.326 14.6591 273.965 14.9034 274.461 15.392C274.957 15.8769 275.205 16.6326 275.205 17.6591V23.5H273.864V17.6591C273.864 17.0152 273.688 16.5549 273.336 16.2784C272.984 16.0019 272.569 15.8636 272.092 15.8636C271.478 15.8636 271.003 16.0492 270.665 16.4205C270.328 16.7879 270.16 17.2538 270.16 17.8182V23.5H268.796V17.5227C268.796 17.0265 268.635 16.6269 268.313 16.3239C267.991 16.017 267.576 15.8636 267.069 15.8636C266.72 15.8636 266.395 15.9564 266.092 16.142C265.792 16.3277 265.55 16.5852 265.364 16.9148C265.183 17.2405 265.092 17.6174 265.092 18.0455V23.5H263.751ZM281.316 23.6818C280.475 23.6818 279.75 23.4962 279.14 23.125C278.534 22.75 278.066 22.2273 277.737 21.5568C277.411 20.8826 277.248 20.0985 277.248 19.2045C277.248 18.3106 277.411 17.5227 277.737 16.8409C278.066 16.1553 278.524 15.6212 279.112 15.2386C279.702 14.8523 280.392 14.6591 281.18 14.6591C281.634 14.6591 282.083 14.7348 282.526 14.8864C282.969 15.0379 283.373 15.2841 283.737 15.625C284.1 15.9621 284.39 16.4091 284.606 16.9659C284.822 17.5227 284.93 18.2083 284.93 19.0227V19.5909H278.202V18.4318H283.566C283.566 17.9394 283.468 17.5 283.271 17.1136C283.077 16.7273 282.801 16.4223 282.441 16.1989C282.085 15.9754 281.665 15.8636 281.18 15.8636C280.646 15.8636 280.183 15.9962 279.793 16.2614C279.407 16.5227 279.11 16.8636 278.901 17.2841C278.693 17.7045 278.589 18.1553 278.589 18.6364V19.4091C278.589 20.0682 278.702 20.6269 278.93 21.0852C279.161 21.5398 279.481 21.8864 279.89 22.125C280.299 22.3598 280.774 22.4773 281.316 22.4773C281.668 22.4773 281.987 22.428 282.271 22.3295C282.558 22.2273 282.807 22.0758 283.015 21.875C283.223 21.6705 283.384 21.4167 283.498 21.1136L284.793 21.4773C284.657 21.9167 284.428 22.303 284.106 22.6364C283.784 22.9659 283.386 23.2235 282.913 23.4091C282.439 23.5909 281.907 23.6818 281.316 23.6818ZM288.31 18.25V23.5H286.969V14.7727H288.265V16.1364H288.379C288.583 15.6932 288.894 15.3371 289.31 15.0682C289.727 14.7955 290.265 14.6591 290.924 14.6591C291.515 14.6591 292.032 14.7803 292.475 15.0227C292.918 15.2614 293.263 15.625 293.509 16.1136C293.755 16.5985 293.879 17.2121 293.879 17.9545V23.5H292.538V18.0455C292.538 17.3598 292.36 16.8258 292.004 16.4432C291.647 16.0568 291.159 15.8636 290.538 15.8636C290.11 15.8636 289.727 15.9564 289.39 16.142C289.057 16.3277 288.793 16.5985 288.6 16.9545C288.407 17.3106 288.31 17.7424 288.31 18.25ZM301.829 19.9318V14.7727H303.17V23.5H301.829V22.0227H301.738C301.533 22.4659 301.215 22.8428 300.783 23.1534C300.352 23.4602 299.806 23.6136 299.147 23.6136C298.602 23.6136 298.117 23.4943 297.692 23.2557C297.268 23.0133 296.935 22.6496 296.692 22.1648C296.45 21.6761 296.329 21.0606 296.329 20.3182V14.7727H297.67V20.2273C297.67 20.8636 297.848 21.3712 298.204 21.75C298.564 22.1288 299.022 22.3182 299.579 22.3182C299.912 22.3182 300.251 22.233 300.596 22.0625C300.944 21.892 301.236 21.6307 301.471 21.2784C301.71 20.9261 301.829 20.4773 301.829 19.9318ZM312.103 23.5L309.444 14.7727H310.853L312.739 21.4545H312.83L314.694 14.7727H316.126L317.967 21.4318H318.058L319.944 14.7727H321.353L318.694 23.5H317.376L315.467 16.7955H315.33L313.421 23.5H312.103ZM323.126 23.5V14.7727H324.467V23.5H323.126ZM323.808 13.3182C323.546 13.3182 323.321 13.2292 323.131 13.0511C322.946 12.8731 322.853 12.6591 322.853 12.4091C322.853 12.1591 322.946 11.9451 323.131 11.767C323.321 11.589 323.546 11.5 323.808 11.5C324.069 11.5 324.292 11.589 324.478 11.767C324.667 11.9451 324.762 12.1591 324.762 12.4091C324.762 12.6591 324.667 12.8731 324.478 13.0511C324.292 13.2292 324.069 13.3182 323.808 13.3182ZM330.718 14.7727V15.9091H326.195V14.7727H330.718ZM327.513 12.6818H328.854V21C328.854 21.3788 328.909 21.6629 329.019 21.8523C329.133 22.0379 329.277 22.1629 329.451 22.2273C329.629 22.2879 329.817 22.3182 330.013 22.3182C330.161 22.3182 330.282 22.3106 330.377 22.2955C330.472 22.2765 330.548 22.2614 330.604 22.25L330.877 23.4545C330.786 23.4886 330.659 23.5227 330.496 23.5568C330.334 23.5947 330.127 23.6136 329.877 23.6136C329.498 23.6136 329.127 23.5322 328.763 23.3693C328.404 23.2064 328.104 22.9583 327.866 22.625C327.631 22.2917 327.513 21.8712 327.513 21.3636V12.6818ZM334.263 18.25V23.5H332.923V11.8636H334.263V16.1364H334.377C334.582 15.6856 334.888 15.3277 335.298 15.0625C335.71 14.7936 336.26 14.6591 336.945 14.6591C337.54 14.6591 338.061 14.7784 338.508 15.017C338.955 15.2519 339.301 15.6136 339.548 16.1023C339.798 16.5871 339.923 17.2045 339.923 17.9545V23.5H338.582V18.0455C338.582 17.3523 338.402 16.8163 338.042 16.4375C337.686 16.0549 337.192 15.8636 336.559 15.8636C336.12 15.8636 335.726 15.9564 335.377 16.142C335.032 16.3277 334.76 16.5985 334.559 16.9545C334.362 17.3106 334.263 17.7424 334.263 18.25ZM343.353 23.5909C343.073 23.5909 342.832 23.4905 342.631 23.2898C342.431 23.089 342.33 22.8485 342.33 22.5682C342.33 22.2879 342.431 22.0473 342.631 21.8466C342.832 21.6458 343.073 21.5455 343.353 21.5455C343.633 21.5455 343.874 21.6458 344.075 21.8466C344.275 22.0473 344.376 22.2879 344.376 22.5682C344.376 22.7538 344.328 22.9242 344.234 23.0795C344.143 23.2348 344.02 23.3598 343.864 23.4545C343.713 23.5455 343.542 23.5909 343.353 23.5909ZM343.353 17.1136C343.073 17.1136 342.832 17.0133 342.631 16.8125C342.431 16.6117 342.33 16.3712 342.33 16.0909C342.33 15.8106 342.431 15.5701 342.631 15.3693C342.832 15.1686 343.073 15.0682 343.353 15.0682C343.633 15.0682 343.874 15.1686 344.075 15.3693C344.275 15.5701 344.376 15.8106 344.376 16.0909C344.376 16.2765 344.328 16.447 344.234 16.6023C344.143 16.7576 344.02 16.8826 343.864 16.9773C343.713 17.0682 343.542 17.1136 343.353 17.1136Z" fill="#495057"/>
+<rect x="240.942" y="81.5" width="93" height="93" rx="9.3" fill="#E9ECEF"/>
+<path d="M269.261 154.757V102.58H277.133V127.497H277.77L299.655 102.58H309.565L288.521 126.07L309.641 154.757H300.164L283.298 131.446L277.133 138.528V154.757H269.261Z" fill="black"/>
+<rect x="116.057" y="81.5" width="93" height="93" rx="9.3" fill="#E9ECEF"/>
+<path d="M143.458 157.892C140.468 157.892 137.922 156.841 135.818 154.737C133.715 152.633 132.663 150.087 132.663 147.098C132.663 144.108 133.715 141.562 135.818 139.458C137.922 137.355 140.468 136.303 143.458 136.303H149.27V119.696H143.458C140.468 119.696 137.922 118.644 135.818 116.541C133.715 114.437 132.663 111.891 132.663 108.901C132.663 105.912 133.715 103.366 135.818 101.262C137.922 99.1585 140.468 98.1067 143.458 98.1067C146.447 98.1067 148.993 99.1585 151.097 101.262C153.201 103.366 154.252 105.912 154.252 108.901V114.714H170.86V108.901C170.86 105.912 171.911 103.366 174.015 101.262C176.118 99.1585 178.665 98.1067 181.654 98.1067C184.643 98.1067 187.19 99.1585 189.293 101.262C191.397 103.366 192.449 105.912 192.449 108.901C192.449 111.891 191.397 114.437 189.293 116.541C187.19 118.644 184.643 119.696 181.654 119.696H175.842V136.303H181.654C184.643 136.303 187.19 137.355 189.293 139.458C191.397 141.562 192.449 144.108 192.449 147.098C192.449 150.087 191.397 152.633 189.293 154.737C187.19 156.841 184.643 157.892 181.654 157.892C178.665 157.892 176.118 156.841 174.015 154.737C171.911 152.633 170.86 150.087 170.86 147.098V141.285H154.252V147.098C154.252 150.087 153.201 152.633 151.097 154.737C148.993 156.841 146.447 157.892 143.458 157.892V157.892ZM143.458 152.91C145.063 152.91 146.433 152.343 147.568 151.208C148.703 150.073 149.27 148.703 149.27 147.098V141.285H143.458C141.852 141.285 140.482 141.853 139.347 142.987C138.213 144.122 137.645 145.492 137.645 147.098C137.645 148.703 138.213 150.073 139.347 151.208C140.482 152.343 141.852 152.91 143.458 152.91ZM181.654 152.91C183.26 152.91 184.63 152.343 185.764 151.208C186.899 150.073 187.467 148.703 187.467 147.098C187.467 145.492 186.899 144.122 185.764 142.987C184.63 141.853 183.26 141.285 181.654 141.285H175.842V147.098C175.842 148.703 176.409 150.073 177.544 151.208C178.679 152.343 180.049 152.91 181.654 152.91ZM154.252 136.303H170.86V119.696H154.252V136.303ZM143.458 114.714H149.27V108.901C149.27 107.296 148.703 105.926 147.568 104.791C146.433 103.656 145.063 103.089 143.458 103.089C141.852 103.089 140.482 103.656 139.347 104.791C138.213 105.926 137.645 107.296 137.645 108.901C137.645 110.507 138.213 111.877 139.347 113.012C140.482 114.146 141.852 114.714 143.458 114.714ZM175.842 114.714H181.654C183.26 114.714 184.63 114.146 185.764 113.012C186.899 111.877 187.467 110.507 187.467 108.901C187.467 107.296 186.899 105.926 185.764 104.791C184.63 103.656 183.26 103.089 181.654 103.089C180.049 103.089 178.679 103.656 177.544 104.791C176.409 105.926 175.842 107.296 175.842 108.901V114.714Z" fill="black"/>
+</svg>
diff --git a/app/public/onboarding/cycle.svg b/app/public/onboarding/cycle.svg
new file mode 100644
index 000000000..2841d367a
--- /dev/null
+++ b/app/public/onboarding/cycle.svg
@@ -0,0 +1,43 @@
+<svg width="450" height="217" viewBox="0 0 450 217" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g filter="url(#filter0_d_2610_65105)">
+<rect x="15" y="8" width="421" height="197" rx="10" fill="white"/>
+</g>
+<path d="M15 162H436V195C436 200.523 431.523 205 426 205H25C19.4772 205 15 200.523 15 195V162Z" fill="#FAFAFA"/>
+<path d="M408 182L411.5 185.5L415 182" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 162.5H436" stroke="#E2E2E2"/>
+<path d="M68.4148 131.273L71.0057 138.619H71.108L73.6989 131.273H74.8068L71.6023 140H70.5114L67.3068 131.273H68.4148ZM77.3466 140.153C76.9318 140.153 76.5554 140.075 76.2173 139.919C75.8793 139.76 75.6108 139.531 75.4119 139.233C75.2131 138.932 75.1136 138.568 75.1136 138.142C75.1136 137.767 75.1875 137.463 75.3352 137.23C75.483 136.994 75.6804 136.81 75.9276 136.676C76.1747 136.543 76.4474 136.443 76.7457 136.378C77.0469 136.31 77.3494 136.256 77.6534 136.216C78.0511 136.165 78.3736 136.126 78.6207 136.101C78.8707 136.072 79.0526 136.026 79.1662 135.96C79.2827 135.895 79.3409 135.781 79.3409 135.619V135.585C79.3409 135.165 79.2259 134.838 78.9957 134.605C78.7685 134.372 78.4233 134.256 77.9602 134.256C77.4801 134.256 77.1037 134.361 76.831 134.571C76.5582 134.781 76.3665 135.006 76.2557 135.244L75.3011 134.903C75.4716 134.506 75.6989 134.196 75.983 133.974C76.2699 133.75 76.5824 133.594 76.9205 133.506C77.2614 133.415 77.5966 133.369 77.9261 133.369C78.1364 133.369 78.3778 133.395 78.6506 133.446C78.9261 133.494 79.1918 133.595 79.4474 133.749C79.706 133.902 79.9205 134.134 80.0909 134.443C80.2614 134.753 80.3466 135.168 80.3466 135.688V140H79.3409V139.114H79.2898C79.2216 139.256 79.108 139.408 78.9489 139.57C78.7898 139.732 78.5781 139.869 78.3139 139.983C78.0497 140.097 77.7273 140.153 77.3466 140.153ZM77.5 139.25C77.8977 139.25 78.233 139.172 78.5057 139.016C78.7813 138.859 78.9886 138.658 79.1278 138.411C79.2699 138.163 79.3409 137.903 79.3409 137.631V136.71C79.2983 136.761 79.2045 136.808 79.0597 136.851C78.9176 136.891 78.7528 136.926 78.5653 136.957C78.3807 136.986 78.2003 137.011 78.0241 137.034C77.8509 137.054 77.7102 137.071 77.6023 137.085C77.3409 137.119 77.0966 137.175 76.8693 137.251C76.6449 137.325 76.4631 137.437 76.3239 137.588C76.1875 137.736 76.1193 137.937 76.1193 138.193C76.1193 138.543 76.2486 138.807 76.5071 138.986C76.7685 139.162 77.0994 139.25 77.5 139.25ZM82.1822 140V133.455H83.1538V134.477H83.239C83.3754 134.128 83.5955 133.857 83.8995 133.663C84.2035 133.467 84.5685 133.369 84.9947 133.369C85.4265 133.369 85.7859 133.467 86.0728 133.663C86.3626 133.857 86.5884 134.128 86.7504 134.477H86.8185C86.9862 134.139 87.2376 133.871 87.5728 133.672C87.908 133.47 88.31 133.369 88.7788 133.369C89.364 133.369 89.8427 133.553 90.2148 133.919C90.587 134.283 90.7731 134.849 90.7731 135.619V140H89.7674V135.619C89.7674 135.136 89.6353 134.791 89.3711 134.584C89.1069 134.376 88.7958 134.273 88.4379 134.273C87.9776 134.273 87.6211 134.412 87.3683 134.69C87.1154 134.966 86.989 135.315 86.989 135.739V140H85.9663V135.517C85.9663 135.145 85.8455 134.845 85.604 134.618C85.3626 134.388 85.0515 134.273 84.6708 134.273C84.4094 134.273 84.1651 134.342 83.9379 134.482C83.7134 134.621 83.5316 134.814 83.3924 135.061C83.256 135.305 83.1879 135.588 83.1879 135.909V140H82.1822ZM97.2482 134.92L96.3448 135.176C96.288 135.026 96.2042 134.879 96.0934 134.737C95.9854 134.592 95.8377 134.473 95.6502 134.379C95.4627 134.286 95.2227 134.239 94.93 134.239C94.5295 134.239 94.1957 134.331 93.9286 134.516C93.6644 134.697 93.5323 134.929 93.5323 135.21C93.5323 135.46 93.6232 135.658 93.805 135.803C93.9869 135.947 94.271 136.068 94.6573 136.165L95.6289 136.403C96.2141 136.545 96.6502 136.763 96.9371 137.055C97.2241 137.345 97.3675 137.719 97.3675 138.176C97.3675 138.551 97.2596 138.886 97.0437 139.182C96.8306 139.477 96.5323 139.71 96.1488 139.881C95.7653 140.051 95.3192 140.136 94.8107 140.136C94.1431 140.136 93.5906 139.991 93.1531 139.702C92.7156 139.412 92.4386 138.989 92.3221 138.432L93.2766 138.193C93.3675 138.545 93.5394 138.81 93.7923 138.986C94.0479 139.162 94.3817 139.25 94.7937 139.25C95.2624 139.25 95.6346 139.151 95.9102 138.952C96.1886 138.75 96.3278 138.509 96.3278 138.227C96.3278 138 96.2482 137.81 96.0891 137.656C95.93 137.5 95.6857 137.384 95.3562 137.307L94.2653 137.051C93.6658 136.909 93.2255 136.689 92.9442 136.391C92.6658 136.089 92.5266 135.713 92.5266 135.261C92.5266 134.892 92.6303 134.565 92.8377 134.281C93.0479 133.997 93.3335 133.774 93.6942 133.612C94.0579 133.45 94.4698 133.369 94.93 133.369C95.5778 133.369 96.0863 133.511 96.4556 133.795C96.8278 134.08 97.092 134.455 97.2482 134.92ZM98.8814 140V133.455H99.8871V140H98.8814ZM99.3928 132.364C99.1967 132.364 99.0277 132.297 98.8857 132.163C98.7464 132.03 98.6768 131.869 98.6768 131.682C98.6768 131.494 98.7464 131.334 98.8857 131.2C99.0277 131.067 99.1967 131 99.3928 131C99.5888 131 99.7564 131.067 99.8956 131.2C100.038 131.334 100.109 131.494 100.109 131.682C100.109 131.869 100.038 132.03 99.8956 132.163C99.7564 132.297 99.5888 132.364 99.3928 132.364ZM105.24 140V131.273H106.297V135.602H106.4L110.32 131.273H111.701L108.036 135.21L111.701 140H110.422L107.388 135.943L106.297 137.17V140H105.24ZM116.647 137.324V133.455H117.653V140H116.647V138.892H116.579C116.425 139.224 116.187 139.507 115.863 139.74C115.539 139.97 115.13 140.085 114.636 140.085C114.227 140.085 113.863 139.996 113.545 139.817C113.227 139.635 112.977 139.362 112.795 138.999C112.613 138.632 112.522 138.17 112.522 137.614V133.455H113.528V137.545C113.528 138.023 113.661 138.403 113.928 138.688C114.198 138.972 114.542 139.114 114.96 139.114C115.21 139.114 115.464 139.05 115.722 138.922C115.984 138.794 116.202 138.598 116.379 138.334C116.558 138.07 116.647 137.733 116.647 137.324ZM119.495 140V133.455H120.466V134.443H120.534C120.654 134.119 120.87 133.857 121.182 133.655C121.495 133.453 121.847 133.352 122.239 133.352C122.313 133.352 122.405 133.354 122.516 133.357C122.627 133.359 122.711 133.364 122.767 133.369V134.392C122.733 134.384 122.655 134.371 122.533 134.354C122.414 134.334 122.287 134.324 122.154 134.324C121.836 134.324 121.551 134.391 121.301 134.524C121.054 134.655 120.858 134.837 120.713 135.07C120.571 135.3 120.5 135.562 120.5 135.858V140H119.495ZM125.886 140.153C125.471 140.153 125.094 140.075 124.756 139.919C124.418 139.76 124.15 139.531 123.951 139.233C123.752 138.932 123.653 138.568 123.653 138.142C123.653 137.767 123.727 137.463 123.874 137.23C124.022 136.994 124.219 136.81 124.467 136.676C124.714 136.543 124.987 136.443 125.285 136.378C125.586 136.31 125.888 136.256 126.192 136.216C126.59 136.165 126.913 136.126 127.16 136.101C127.41 136.072 127.592 136.026 127.705 135.96C127.822 135.895 127.88 135.781 127.88 135.619V135.585C127.88 135.165 127.765 134.838 127.535 134.605C127.308 134.372 126.962 134.256 126.499 134.256C126.019 134.256 125.643 134.361 125.37 134.571C125.097 134.781 124.906 135.006 124.795 135.244L123.84 134.903C124.011 134.506 124.238 134.196 124.522 133.974C124.809 133.75 125.121 133.594 125.46 133.506C125.8 133.415 126.136 133.369 126.465 133.369C126.675 133.369 126.917 133.395 127.19 133.446C127.465 133.494 127.731 133.595 127.987 133.749C128.245 133.902 128.46 134.134 128.63 134.443C128.8 134.753 128.886 135.168 128.886 135.688V140H127.88V139.114H127.829C127.761 139.256 127.647 139.408 127.488 139.57C127.329 139.732 127.117 139.869 126.853 139.983C126.589 140.097 126.266 140.153 125.886 140.153ZM126.039 139.25C126.437 139.25 126.772 139.172 127.045 139.016C127.32 138.859 127.528 138.658 127.667 138.411C127.809 138.163 127.88 137.903 127.88 137.631V136.71C127.837 136.761 127.744 136.808 127.599 136.851C127.457 136.891 127.292 136.926 127.104 136.957C126.92 136.986 126.739 137.011 126.563 137.034C126.39 137.054 126.249 137.071 126.141 137.085C125.88 137.119 125.636 137.175 125.408 137.251C125.184 137.325 125.002 137.437 124.863 137.588C124.727 137.736 124.658 137.937 124.658 138.193C124.658 138.543 124.788 138.807 125.046 138.986C125.308 139.162 125.638 139.25 126.039 139.25ZM130.721 140V133.455H131.693V134.477H131.778C131.914 134.128 132.135 133.857 132.439 133.663C132.743 133.467 133.108 133.369 133.534 133.369C133.966 133.369 134.325 133.467 134.612 133.663C134.902 133.857 135.127 134.128 135.289 134.477H135.358C135.525 134.139 135.777 133.871 136.112 133.672C136.447 133.47 136.849 133.369 137.318 133.369C137.903 133.369 138.382 133.553 138.754 133.919C139.126 134.283 139.312 134.849 139.312 135.619V140H138.306V135.619C138.306 135.136 138.174 134.791 137.91 134.584C137.646 134.376 137.335 134.273 136.977 134.273C136.517 134.273 136.16 134.412 135.907 134.69C135.654 134.966 135.528 135.315 135.528 135.739V140H134.505V135.517C134.505 135.145 134.385 134.845 134.143 134.618C133.902 134.388 133.591 134.273 133.21 134.273C132.949 134.273 132.704 134.342 132.477 134.482C132.252 134.621 132.071 134.814 131.931 135.061C131.795 135.305 131.727 135.588 131.727 135.909V140H130.721ZM143.077 140.153C142.662 140.153 142.286 140.075 141.948 139.919C141.61 139.76 141.341 139.531 141.142 139.233C140.944 138.932 140.844 138.568 140.844 138.142C140.844 137.767 140.918 137.463 141.066 137.23C141.213 136.994 141.411 136.81 141.658 136.676C141.905 136.543 142.178 136.443 142.476 136.378C142.777 136.31 143.08 136.256 143.384 136.216C143.782 136.165 144.104 136.126 144.351 136.101C144.601 136.072 144.783 136.026 144.897 135.96C145.013 135.895 145.071 135.781 145.071 135.619V135.585C145.071 135.165 144.956 134.838 144.726 134.605C144.499 134.372 144.154 134.256 143.691 134.256C143.211 134.256 142.834 134.361 142.561 134.571C142.289 134.781 142.097 135.006 141.986 135.244L141.032 134.903C141.202 134.506 141.429 134.196 141.713 133.974C142 133.75 142.313 133.594 142.651 133.506C142.992 133.415 143.327 133.369 143.657 133.369C143.867 133.369 144.108 133.395 144.381 133.446C144.657 133.494 144.922 133.595 145.178 133.749C145.436 133.902 145.651 134.134 145.821 134.443C145.992 134.753 146.077 135.168 146.077 135.688V140H145.071V139.114H145.02C144.952 139.256 144.838 139.408 144.679 139.57C144.52 139.732 144.309 139.869 144.044 139.983C143.78 140.097 143.458 140.153 143.077 140.153ZM143.23 139.25C143.628 139.25 143.963 139.172 144.236 139.016C144.512 138.859 144.719 138.658 144.858 138.411C145 138.163 145.071 137.903 145.071 137.631V136.71C145.029 136.761 144.935 136.808 144.79 136.851C144.648 136.891 144.483 136.926 144.296 136.957C144.111 136.986 143.931 137.011 143.755 137.034C143.581 137.054 143.441 137.071 143.333 137.085C143.071 137.119 142.827 137.175 142.6 137.251C142.375 137.325 142.194 137.437 142.054 137.588C141.918 137.736 141.85 137.937 141.85 138.193C141.85 138.543 141.979 138.807 142.238 138.986C142.499 139.162 142.83 139.25 143.23 139.25Z" fill="#2E3337"/>
+<circle cx="47" cy="136" r="10" fill="#F7AE59"/>
+<path d="M45.179 132.727L47.3381 138.849H47.4233L49.5824 132.727H50.5057L47.8352 140H46.9261L44.2557 132.727H45.179Z" fill="white"/>
+<path d="M373.75 142.25H374.667L383.896 133.021L382.979 132.104L373.75 141.333V142.25ZM386.542 132.125L383.875 129.458L384.746 128.587C384.985 128.348 385.281 128.233 385.635 128.24C385.99 128.246 386.285 128.368 386.521 128.604L387.417 129.5C387.653 129.736 387.771 130.028 387.771 130.375C387.771 130.722 387.653 131.014 387.417 131.249L386.542 132.125ZM373.132 143.5C372.953 143.5 372.803 143.439 372.682 143.318C372.561 143.197 372.5 143.047 372.5 142.868V141.085C372.5 141 372.514 140.924 372.542 140.854C372.569 140.785 372.618 140.715 372.688 140.646L383 130.333L385.667 133L375.354 143.312C375.285 143.382 375.214 143.431 375.141 143.458C375.069 143.486 374.994 143.5 374.917 143.5H373.132ZM383.438 132.562L382.979 132.104L383.896 133.021L383.438 132.562Z" fill="black"/>
+<path d="M43 79.334C42.8111 79.334 42.6528 79.2701 42.525 79.1423C42.3972 79.0145 42.3333 78.8562 42.3333 78.6673C42.3333 78.4784 42.3972 78.3201 42.525 78.1923C42.6528 78.0645 42.8111 78.0007 43 78.0007C43.1889 78.0007 43.3472 78.0645 43.475 78.1923C43.6028 78.3201 43.6667 78.4784 43.6667 78.6673C43.6667 78.8562 43.6028 79.0145 43.475 79.1423C43.3472 79.2701 43.1889 79.334 43 79.334ZM40.3333 79.334C40.1444 79.334 39.9861 79.2701 39.8583 79.1423C39.7306 79.0145 39.6667 78.8562 39.6667 78.6673C39.6667 78.4784 39.7306 78.3201 39.8583 78.1923C39.9861 78.0645 40.1444 78.0007 40.3333 78.0007C40.5222 78.0007 40.6806 78.0645 40.8083 78.1923C40.9361 78.3201 41 78.4784 41 78.6673C41 78.8562 40.9361 79.0145 40.8083 79.1423C40.6806 79.2701 40.5222 79.334 40.3333 79.334ZM45.6667 79.334C45.4778 79.334 45.3194 79.2701 45.1917 79.1423C45.0639 79.0145 45 78.8562 45 78.6673C45 78.4784 45.0639 78.3201 45.1917 78.1923C45.3194 78.0645 45.4778 78.0007 45.6667 78.0007C45.8556 78.0007 46.0139 78.0645 46.1417 78.1923C46.2694 78.3201 46.3333 78.4784 46.3333 78.6673C46.3333 78.8562 46.2694 79.0145 46.1417 79.1423C46.0139 79.2701 45.8556 79.334 45.6667 79.334ZM43 82.0007C42.8111 82.0007 42.6528 81.9368 42.525 81.809C42.3972 81.6812 42.3333 81.5229 42.3333 81.334C42.3333 81.1451 42.3972 80.9868 42.525 80.859C42.6528 80.7312 42.8111 80.6673 43 80.6673C43.1889 80.6673 43.3472 80.7312 43.475 80.859C43.6028 80.9868 43.6667 81.1451 43.6667 81.334C43.6667 81.5229 43.6028 81.6812 43.475 81.809C43.3472 81.9368 43.1889 82.0007 43 82.0007ZM40.3333 82.0007C40.1444 82.0007 39.9861 81.9368 39.8583 81.809C39.7306 81.6812 39.6667 81.5229 39.6667 81.334C39.6667 81.1451 39.7306 80.9868 39.8583 80.859C39.9861 80.7312 40.1444 80.6673 40.3333 80.6673C40.5222 80.6673 40.6806 80.7312 40.8083 80.859C40.9361 80.9868 41 81.1451 41 81.334C41 81.5229 40.9361 81.6812 40.8083 81.809C40.6806 81.9368 40.5222 82.0007 40.3333 82.0007ZM45.6667 82.0007C45.4778 82.0007 45.3194 81.9368 45.1917 81.809C45.0639 81.6812 45 81.5229 45 81.334C45 81.1451 45.0639 80.9868 45.1917 80.859C45.3194 80.7312 45.4778 80.6673 45.6667 80.6673C45.8556 80.6673 46.0139 80.7312 46.1417 80.859C46.2694 80.9868 46.3333 81.1451 46.3333 81.334C46.3333 81.5229 46.2694 81.6812 46.1417 81.809C46.0139 81.9368 45.8556 82.0007 45.6667 82.0007ZM38 84.6673C37.7333 84.6673 37.5 84.5673 37.3 84.3673C37.1 84.1673 37 83.934 37 83.6673V73.334C37 73.0673 37.1 72.834 37.3 72.634C37.5 72.434 37.7333 72.334 38 72.334H39.0833V71.8673C39.0833 71.7118 39.1333 71.584 39.2333 71.484C39.3333 71.384 39.4611 71.334 39.6167 71.334C39.7722 71.334 39.9028 71.384 40.0083 71.484C40.1139 71.584 40.1667 71.7118 40.1667 71.8673V72.334H45.8333V71.8673C45.8333 71.7118 45.8833 71.584 45.9833 71.484C46.0833 71.384 46.2111 71.334 46.3667 71.334C46.5222 71.334 46.6528 71.384 46.7583 71.484C46.8639 71.584 46.9167 71.7118 46.9167 71.8673V72.334H48C48.2667 72.334 48.5 72.434 48.7 72.634C48.9 72.834 49 73.0673 49 73.334V83.6673C49 83.934 48.9 84.1673 48.7 84.3673C48.5 84.5673 48.2667 84.6673 48 84.6673H38ZM38 83.6673H48V76.5007H38V83.6673ZM38 75.5007H48V73.334H38V75.5007ZM38 75.5007V73.334V75.5007Z" fill="#212529"/>
+<path d="M60.8295 76.4545C60.7784 76.0227 60.571 75.6875 60.2074 75.4489C59.8438 75.2102 59.3977 75.0909 58.8693 75.0909C58.483 75.0909 58.1449 75.1534 57.8551 75.2784C57.5682 75.4034 57.3438 75.5753 57.1818 75.794C57.0227 76.0128 56.9432 76.2614 56.9432 76.5398C56.9432 76.7727 56.9986 76.973 57.1094 77.1406C57.223 77.3054 57.3679 77.4432 57.544 77.554C57.7202 77.6619 57.9048 77.7514 58.098 77.8224C58.2912 77.8906 58.4688 77.946 58.6307 77.9886L59.517 78.2273C59.7443 78.2869 59.9972 78.3693 60.2756 78.4744C60.5568 78.5795 60.8253 78.723 61.081 78.9048C61.3395 79.0838 61.5526 79.3139 61.7202 79.5952C61.8878 79.8764 61.9716 80.2216 61.9716 80.6307C61.9716 81.1023 61.848 81.5284 61.6009 81.9091C61.3565 82.2898 60.9986 82.5923 60.527 82.8168C60.0582 83.0412 59.4886 83.1534 58.8182 83.1534C58.1932 83.1534 57.652 83.0526 57.1946 82.8509C56.7401 82.6491 56.3821 82.3679 56.1207 82.0071C55.8622 81.6463 55.7159 81.2273 55.6818 80.75H56.7727C56.8011 81.0795 56.9119 81.3523 57.1051 81.5682C57.3011 81.7812 57.5483 81.9403 57.8466 82.0455C58.1477 82.1477 58.4716 82.1989 58.8182 82.1989C59.2216 82.1989 59.5838 82.1335 59.9048 82.0028C60.2259 81.8693 60.4801 81.6847 60.6676 81.4489C60.8551 81.2102 60.9489 80.9318 60.9489 80.6136C60.9489 80.3239 60.8679 80.0881 60.706 79.9062C60.544 79.7244 60.331 79.5767 60.0668 79.4631C59.8026 79.3494 59.517 79.25 59.2102 79.1648L58.1364 78.858C57.4545 78.6619 56.9148 78.3821 56.517 78.0185C56.1193 77.6548 55.9205 77.179 55.9205 76.5909C55.9205 76.1023 56.0526 75.6761 56.3168 75.3125C56.5838 74.946 56.9418 74.6619 57.3906 74.4602C57.8423 74.2557 58.3466 74.1534 58.9034 74.1534C59.4659 74.1534 59.9659 74.2543 60.4034 74.456C60.8409 74.6548 61.1875 74.9276 61.4432 75.2741C61.7017 75.6207 61.8381 76.0142 61.8523 76.4545H60.8295ZM66.4194 76.4545V77.3068H63.0273V76.4545H66.4194ZM64.016 74.8864H65.0217V81.125C65.0217 81.4091 65.0629 81.6222 65.1452 81.7642C65.2305 81.9034 65.3384 81.9972 65.4691 82.0455C65.6026 82.0909 65.7433 82.1136 65.891 82.1136C66.0018 82.1136 66.0927 82.108 66.1637 82.0966C66.2347 82.0824 66.2915 82.071 66.3342 82.0625L66.5387 82.9659C66.4705 82.9915 66.3754 83.017 66.2532 83.0426C66.131 83.071 65.9762 83.0852 65.7887 83.0852C65.5046 83.0852 65.2262 83.0241 64.9535 82.902C64.6836 82.7798 64.4592 82.5938 64.2802 82.3438C64.104 82.0938 64.016 81.7784 64.016 81.3977V74.8864ZM69.8583 83.1534C69.4435 83.1534 69.0671 83.0753 68.729 82.919C68.391 82.7599 68.1225 82.5312 67.9237 82.233C67.7248 81.9318 67.6254 81.5682 67.6254 81.142C67.6254 80.767 67.6992 80.4631 67.8469 80.2301C67.9947 79.9943 68.1921 79.8097 68.4393 79.6761C68.6864 79.5426 68.9592 79.4432 69.2575 79.3778C69.5586 79.3097 69.8612 79.2557 70.1651 79.2159C70.5629 79.1648 70.8853 79.1264 71.1325 79.1009C71.3825 79.0724 71.5643 79.0256 71.6779 78.9602C71.7944 78.8949 71.8526 78.7812 71.8526 78.6193V78.5852C71.8526 78.1648 71.7376 77.8381 71.5075 77.6051C71.2802 77.3722 70.935 77.2557 70.4719 77.2557C69.9918 77.2557 69.6154 77.3608 69.3427 77.571C69.07 77.7812 68.8782 78.0057 68.7674 78.2443L67.8129 77.9034C67.9833 77.5057 68.2106 77.196 68.4947 76.9744C68.7816 76.75 69.0941 76.5937 69.4322 76.5057C69.7731 76.4148 70.1083 76.3693 70.4379 76.3693C70.6481 76.3693 70.8896 76.3949 71.1623 76.446C71.4379 76.4943 71.7035 76.5952 71.9592 76.7486C72.2177 76.902 72.4322 77.1335 72.6026 77.4432C72.7731 77.7528 72.8583 78.1676 72.8583 78.6875V83H71.8526V82.1136H71.8015C71.7333 82.2557 71.6197 82.4077 71.4606 82.5696C71.3015 82.7315 71.0898 82.8693 70.8256 82.983C70.5614 83.0966 70.239 83.1534 69.8583 83.1534ZM70.0117 82.25C70.4094 82.25 70.7447 82.1719 71.0174 82.0156C71.293 81.8594 71.5004 81.6577 71.6396 81.4105C71.7816 81.1634 71.8526 80.9034 71.8526 80.6307V79.7102C71.81 79.7614 71.7163 79.8082 71.5714 79.8509C71.4293 79.8906 71.2646 79.9261 71.0771 79.9574C70.8924 79.9858 70.712 80.0114 70.5359 80.0341C70.3626 80.054 70.2219 80.071 70.114 80.0852C69.8526 80.1193 69.6083 80.1747 69.381 80.2514C69.1566 80.3253 68.9748 80.4375 68.8356 80.5881C68.6992 80.7358 68.631 80.9375 68.631 81.1932C68.631 81.5426 68.7603 81.8068 69.0188 81.9858C69.2802 82.1619 69.6112 82.25 70.0117 82.25ZM74.6939 83V76.4545H75.6655V77.4432H75.7337C75.853 77.1193 76.0689 76.8565 76.3814 76.6548C76.6939 76.4531 77.0462 76.3523 77.4382 76.3523C77.5121 76.3523 77.6044 76.3537 77.7152 76.3565C77.826 76.3594 77.9098 76.3636 77.9666 76.3693V77.392C77.9325 77.3835 77.8544 77.3707 77.7322 77.3537C77.6129 77.3338 77.4865 77.3239 77.353 77.3239C77.0348 77.3239 76.7507 77.3906 76.5007 77.5241C76.2536 77.6548 76.0575 77.8366 75.9126 78.0696C75.7706 78.2997 75.6996 78.5625 75.6996 78.858V83H74.6939ZM82.4155 76.4545V77.3068H79.0234V76.4545H82.4155ZM80.0121 74.8864H81.0178V81.125C81.0178 81.4091 81.0589 81.6222 81.1413 81.7642C81.2266 81.9034 81.3345 81.9972 81.4652 82.0455C81.5987 82.0909 81.7393 82.1136 81.8871 82.1136C81.9979 82.1136 82.0888 82.108 82.1598 82.0966C82.2308 82.0824 82.2876 82.071 82.3303 82.0625L82.5348 82.9659C82.4666 82.9915 82.3714 83.017 82.2493 83.0426C82.1271 83.071 81.9723 83.0852 81.7848 83.0852C81.5007 83.0852 81.2223 83.0241 80.9496 82.902C80.6797 82.7798 80.4553 82.5938 80.2763 82.3438C80.1001 82.0938 80.0121 81.7784 80.0121 81.3977V74.8864ZM88.0362 83.0682C87.826 83.0682 87.6456 82.9929 87.495 82.8423C87.3445 82.6918 87.2692 82.5114 87.2692 82.3011C87.2692 82.0909 87.3445 81.9105 87.495 81.7599C87.6456 81.6094 87.826 81.5341 88.0362 81.5341C88.2464 81.5341 88.4268 81.6094 88.5774 81.7599C88.728 81.9105 88.8033 82.0909 88.8033 82.3011C88.8033 82.4403 88.7678 82.5682 88.6967 82.6847C88.6286 82.8011 88.5362 82.8949 88.4197 82.9659C88.3061 83.0341 88.1783 83.0682 88.0362 83.0682ZM88.0362 78.2102C87.826 78.2102 87.6456 78.1349 87.495 77.9844C87.3445 77.8338 87.2692 77.6534 87.2692 77.4432C87.2692 77.233 87.3445 77.0526 87.495 76.902C87.6456 76.7514 87.826 76.6761 88.0362 76.6761C88.2464 76.6761 88.4268 76.7514 88.5774 76.902C88.728 77.0526 88.8033 77.233 88.8033 77.4432C88.8033 77.5824 88.7678 77.7102 88.6967 77.8267C88.6286 77.9432 88.5362 78.0369 88.4197 78.108C88.3061 78.1761 88.1783 78.2102 88.0362 78.2102Z" fill="#858E96"/>
+<path d="M97.4602 74.2727H98.517V80.5114C98.517 81.0682 98.4148 81.5412 98.2102 81.9304C98.0057 82.3196 97.7173 82.6151 97.3452 82.8168C96.973 83.0185 96.5341 83.1193 96.0284 83.1193C95.5511 83.1193 95.1264 83.0327 94.7543 82.8594C94.3821 82.6832 94.0895 82.4332 93.8764 82.1094C93.6634 81.7855 93.5568 81.4006 93.5568 80.9545H94.5966C94.5966 81.2017 94.6577 81.4176 94.7798 81.6023C94.9048 81.7841 95.0753 81.9261 95.2912 82.0284C95.5071 82.1307 95.7528 82.1818 96.0284 82.1818C96.3324 82.1818 96.5909 82.1179 96.804 81.9901C97.017 81.8622 97.179 81.6747 97.2898 81.4276C97.4034 81.1776 97.4602 80.8722 97.4602 80.5114V74.2727ZM102.425 83.1534C102.01 83.1534 101.634 83.0753 101.295 82.919C100.957 82.7599 100.689 82.5312 100.49 82.233C100.291 81.9318 100.192 81.5682 100.192 81.142C100.192 80.767 100.266 80.4631 100.413 80.2301C100.561 79.9943 100.759 79.8097 101.006 79.6761C101.253 79.5426 101.526 79.4432 101.824 79.3778C102.125 79.3097 102.428 79.2557 102.732 79.2159C103.129 79.1648 103.452 79.1264 103.699 79.1009C103.949 79.0724 104.131 79.0256 104.244 78.9602C104.361 78.8949 104.419 78.7812 104.419 78.6193V78.5852C104.419 78.1648 104.304 77.8381 104.074 77.6051C103.847 77.3722 103.501 77.2557 103.038 77.2557C102.558 77.2557 102.182 77.3608 101.909 77.571C101.636 77.7812 101.445 78.0057 101.334 78.2443L100.379 77.9034C100.55 77.5057 100.777 77.196 101.061 76.9744C101.348 76.75 101.661 76.5937 101.999 76.5057C102.339 76.4148 102.675 76.3693 103.004 76.3693C103.214 76.3693 103.456 76.3949 103.729 76.446C104.004 76.4943 104.27 76.5952 104.526 76.7486C104.784 76.902 104.999 77.1335 105.169 77.4432C105.339 77.7528 105.425 78.1676 105.425 78.6875V83H104.419V82.1136H104.368C104.3 82.2557 104.186 82.4077 104.027 82.5696C103.868 82.7315 103.656 82.8693 103.392 82.983C103.128 83.0966 102.805 83.1534 102.425 83.1534ZM102.578 82.25C102.976 82.25 103.311 82.1719 103.584 82.0156C103.859 81.8594 104.067 81.6577 104.206 81.4105C104.348 81.1634 104.419 80.9034 104.419 80.6307V79.7102C104.376 79.7614 104.283 79.8082 104.138 79.8509C103.996 79.8906 103.831 79.9261 103.643 79.9574C103.459 79.9858 103.278 80.0114 103.102 80.0341C102.929 80.054 102.788 80.071 102.68 80.0852C102.419 80.1193 102.175 80.1747 101.947 80.2514C101.723 80.3253 101.541 80.4375 101.402 80.5881C101.266 80.7358 101.197 80.9375 101.197 81.1932C101.197 81.5426 101.327 81.8068 101.585 81.9858C101.847 82.1619 102.178 82.25 102.578 82.25ZM108.266 79.0625V83H107.26V76.4545H108.232V77.4773H108.317C108.471 77.1449 108.703 76.8778 109.016 76.6761C109.328 76.4716 109.732 76.3693 110.226 76.3693C110.669 76.3693 111.057 76.4602 111.39 76.642C111.722 76.821 111.98 77.0938 112.165 77.4602C112.35 77.8239 112.442 78.2841 112.442 78.8409V83H111.436V78.9091C111.436 78.3949 111.303 77.9943 111.036 77.7074C110.769 77.4176 110.402 77.2727 109.936 77.2727C109.615 77.2727 109.328 77.3423 109.076 77.4815C108.826 77.6207 108.628 77.8239 108.483 78.0909C108.338 78.358 108.266 78.6818 108.266 79.0625ZM120.706 74.2727V83H119.649V75.3807H119.598L117.467 76.7955V75.7216L119.649 74.2727H120.706ZM126.114 83.1193C125.756 83.1136 125.398 83.0455 125.04 82.9148C124.682 82.7841 124.355 82.5639 124.06 82.2543C123.764 81.9418 123.527 81.5199 123.348 80.9886C123.169 80.4545 123.08 79.7841 123.08 78.9773C123.08 78.2045 123.152 77.5199 123.297 76.9233C123.442 76.3239 123.652 75.8196 123.928 75.4105C124.203 74.9986 124.536 74.6861 124.925 74.473C125.317 74.2599 125.759 74.1534 126.25 74.1534C126.739 74.1534 127.173 74.2514 127.554 74.4474C127.938 74.6406 128.25 74.9105 128.491 75.2571C128.733 75.6037 128.889 76.0028 128.96 76.4545H127.92C127.824 76.0625 127.636 75.7372 127.358 75.4787C127.08 75.2202 126.71 75.0909 126.25 75.0909C125.574 75.0909 125.041 75.3849 124.652 75.973C124.266 76.5611 124.071 77.3864 124.068 78.4489H124.136C124.295 78.2074 124.484 78.0014 124.703 77.831C124.925 77.6577 125.169 77.5241 125.436 77.4304C125.703 77.3366 125.986 77.2898 126.284 77.2898C126.784 77.2898 127.241 77.4148 127.656 77.6648C128.071 77.9119 128.403 78.2543 128.653 78.6918C128.903 79.1264 129.028 79.625 129.028 80.1875C129.028 80.7273 128.908 81.2216 128.666 81.6705C128.425 82.1165 128.085 82.4716 127.648 82.7358C127.213 82.9972 126.702 83.125 126.114 83.1193ZM126.114 82.1818C126.472 82.1818 126.793 82.0923 127.077 81.9134C127.364 81.7344 127.589 81.4943 127.754 81.1932C127.922 80.892 128.006 80.5568 128.006 80.1875C128.006 79.8267 127.925 79.4986 127.763 79.2031C127.604 78.9048 127.384 78.6676 127.102 78.4915C126.824 78.3153 126.506 78.2273 126.148 78.2273C125.878 78.2273 125.626 78.2812 125.393 78.3892C125.161 78.4943 124.956 78.6392 124.78 78.8239C124.607 79.0085 124.47 79.2202 124.371 79.4588C124.271 79.6946 124.222 79.9432 124.222 80.2045C124.222 80.5511 124.303 80.875 124.464 81.1761C124.629 81.4773 124.854 81.7202 125.138 81.9048C125.425 82.0895 125.75 82.1818 126.114 82.1818ZM131.811 81.8068L131.743 82.267C131.695 82.5909 131.621 82.9375 131.521 83.3068C131.425 83.6761 131.324 84.0241 131.219 84.3509C131.114 84.6776 131.027 84.9375 130.959 85.1307H130.192C130.229 84.9489 130.277 84.7088 130.337 84.4105C130.396 84.1122 130.456 83.7784 130.516 83.4091C130.578 83.0426 130.629 82.6676 130.669 82.2841L130.72 81.8068H131.811ZM137.032 83V82.233L139.913 79.0795C140.251 78.7102 140.529 78.3892 140.748 78.1165C140.967 77.8409 141.129 77.5824 141.234 77.3409C141.342 77.0966 141.396 76.8409 141.396 76.5739C141.396 76.267 141.322 76.0014 141.174 75.777C141.029 75.5526 140.831 75.3793 140.578 75.2571C140.325 75.1349 140.041 75.0739 139.725 75.0739C139.39 75.0739 139.098 75.1435 138.848 75.2827C138.6 75.419 138.409 75.6108 138.272 75.858C138.139 76.1051 138.072 76.3949 138.072 76.7273H137.066C137.066 76.2159 137.184 75.767 137.42 75.3807C137.656 74.9943 137.977 74.6932 138.383 74.4773C138.792 74.2614 139.251 74.1534 139.76 74.1534C140.271 74.1534 140.724 74.2614 141.119 74.4773C141.514 74.6932 141.824 74.9844 142.048 75.3509C142.272 75.7173 142.385 76.125 142.385 76.5739C142.385 76.8949 142.326 77.2088 142.21 77.5156C142.096 77.8196 141.897 78.1591 141.613 78.5341C141.332 78.9062 140.941 79.3608 140.441 79.8977L138.481 81.9943V82.0625H142.538V83H137.032ZM147.145 83.1193C146.502 83.1193 145.956 82.9446 145.504 82.5952C145.052 82.2429 144.707 81.733 144.468 81.0653C144.23 80.3949 144.11 79.5852 144.11 78.6364C144.11 77.6932 144.23 76.8878 144.468 76.2202C144.71 75.5497 145.056 75.0384 145.508 74.6861C145.963 74.331 146.508 74.1534 147.145 74.1534C147.781 74.1534 148.325 74.331 148.777 74.6861C149.231 75.0384 149.578 75.5497 149.816 76.2202C150.058 76.8878 150.179 77.6932 150.179 78.6364C150.179 79.5852 150.059 80.3949 149.821 81.0653C149.582 81.733 149.237 82.2429 148.785 82.5952C148.333 82.9446 147.787 83.1193 147.145 83.1193ZM147.145 82.1818C147.781 82.1818 148.275 81.875 148.627 81.2614C148.98 80.6477 149.156 79.7727 149.156 78.6364C149.156 77.8807 149.075 77.2372 148.913 76.706C148.754 76.1747 148.524 75.7699 148.223 75.4915C147.924 75.2131 147.565 75.0739 147.145 75.0739C146.514 75.0739 146.021 75.3849 145.666 76.0071C145.311 76.6264 145.133 77.5028 145.133 78.6364C145.133 79.392 145.213 80.0341 145.372 80.5625C145.531 81.0909 145.76 81.4929 146.058 81.7685C146.359 82.044 146.721 82.1818 147.145 82.1818ZM151.798 83V82.233L154.679 79.0795C155.017 78.7102 155.295 78.3892 155.514 78.1165C155.733 77.8409 155.895 77.5824 156 77.3409C156.108 77.0966 156.162 76.8409 156.162 76.5739C156.162 76.267 156.088 76.0014 155.94 75.777C155.795 75.5526 155.596 75.3793 155.343 75.2571C155.091 75.1349 154.806 75.0739 154.491 75.0739C154.156 75.0739 153.863 75.1435 153.613 75.2827C153.366 75.419 153.174 75.6108 153.038 75.858C152.904 76.1051 152.838 76.3949 152.838 76.7273H151.832C151.832 76.2159 151.95 75.767 152.186 75.3807C152.422 74.9943 152.743 74.6932 153.149 74.4773C153.558 74.2614 154.017 74.1534 154.525 74.1534C155.037 74.1534 155.49 74.2614 155.885 74.4773C156.279 74.6932 156.589 74.9844 156.814 75.3509C157.038 75.7173 157.15 76.125 157.15 76.5739C157.15 76.8949 157.092 77.2088 156.975 77.5156C156.862 77.8196 156.663 78.1591 156.379 78.5341C156.098 78.9062 155.707 79.3608 155.207 79.8977L153.247 81.9943V82.0625H157.304V83H151.798ZM159.064 83V82.233L161.944 79.0795C162.282 78.7102 162.561 78.3892 162.779 78.1165C162.998 77.8409 163.16 77.5824 163.265 77.3409C163.373 77.0966 163.427 76.8409 163.427 76.5739C163.427 76.267 163.353 76.0014 163.206 75.777C163.061 75.5526 162.862 75.3793 162.609 75.2571C162.356 75.1349 162.072 75.0739 161.757 75.0739C161.422 75.0739 161.129 75.1435 160.879 75.2827C160.632 75.419 160.44 75.6108 160.304 75.858C160.17 76.1051 160.103 76.3949 160.103 76.7273H159.098C159.098 76.2159 159.216 75.767 159.451 75.3807C159.687 74.9943 160.008 74.6932 160.414 74.4773C160.824 74.2614 161.282 74.1534 161.791 74.1534C162.302 74.1534 162.755 74.2614 163.15 74.4773C163.545 74.6932 163.855 74.9844 164.079 75.3509C164.304 75.7173 164.416 76.125 164.416 76.5739C164.416 76.8949 164.358 77.2088 164.241 77.5156C164.127 77.8196 163.929 78.1591 163.645 78.5341C163.363 78.9062 162.973 79.3608 162.473 79.8977L160.512 81.9943V82.0625H164.569V83H159.064Z" fill="#212529"/>
+<path d="M38.4347 49V34.4545H43.8892C45.0066 34.4545 45.9441 34.6629 46.7017 35.0795C47.464 35.4962 48.0393 36.0691 48.4276 36.7983C48.8205 37.5227 49.017 38.3466 49.017 39.2699C49.017 40.2027 48.8205 41.0312 48.4276 41.7557C48.0346 42.4801 47.4545 43.0507 46.6875 43.4673C45.9205 43.8793 44.9759 44.0852 43.8537 44.0852H40.2386V41.919H43.4986C44.152 41.919 44.687 41.8054 45.1037 41.5781C45.5204 41.3509 45.8281 41.0384 46.027 40.6406C46.2306 40.2429 46.3324 39.786 46.3324 39.2699C46.3324 38.7538 46.2306 38.2992 46.027 37.9062C45.8281 37.5133 45.518 37.2079 45.0966 36.9901C44.6799 36.7675 44.1425 36.6562 43.4844 36.6562H41.0696V49H38.4347ZM53.7631 34.4545V49H51.1921V34.4545H53.7631ZM59.5462 49.2202C58.8549 49.2202 58.2322 49.0971 57.6783 48.8509C57.129 48.5999 56.6934 48.2306 56.3714 47.7429C56.0542 47.2552 55.8956 46.6539 55.8956 45.9389C55.8956 45.3234 56.0092 44.8144 56.2365 44.4119C56.4638 44.0095 56.7739 43.6875 57.1669 43.446C57.5599 43.2045 58.0026 43.0223 58.495 42.8991C58.9922 42.7713 59.5059 42.679 60.0362 42.6222C60.6754 42.5559 61.1939 42.4967 61.5916 42.4446C61.9893 42.3878 62.2782 42.3026 62.4581 42.1889C62.6428 42.0705 62.7351 41.8883 62.7351 41.642V41.5994C62.7351 41.0644 62.5765 40.6501 62.2592 40.3565C61.942 40.063 61.4851 39.9162 60.8885 39.9162C60.2588 39.9162 59.7592 40.0535 59.3899 40.3281C59.0253 40.6027 58.7791 40.9271 58.6513 41.3011L56.2507 40.9602C56.4401 40.2973 56.7526 39.7434 57.1882 39.2983C57.6238 38.8485 58.1565 38.5123 58.7862 38.2898C59.416 38.0625 60.112 37.9489 60.8743 37.9489C61.3999 37.9489 61.9231 38.0104 62.4439 38.1335C62.9647 38.2566 63.4406 38.4602 63.8714 38.7443C64.3023 39.0237 64.648 39.4048 64.9084 39.8878C65.1735 40.3707 65.3061 40.9744 65.3061 41.6989V49H62.8345V47.5014H62.7493C62.593 47.8045 62.3729 48.0885 62.0888 48.3537C61.8094 48.6141 61.4567 48.8248 61.0305 48.9858C60.6091 49.142 60.1143 49.2202 59.5462 49.2202ZM60.2138 47.331C60.7299 47.331 61.1773 47.2292 61.5561 47.0256C61.9349 46.8172 62.2261 46.5426 62.4297 46.2017C62.638 45.8608 62.7422 45.4891 62.7422 45.0866V43.8011C62.6617 43.8674 62.5244 43.929 62.3303 43.9858C62.1409 44.0426 61.9278 44.0923 61.6911 44.1349C61.4543 44.1776 61.2199 44.2154 60.9879 44.2486C60.7559 44.2817 60.5547 44.3101 60.3842 44.3338C60.0007 44.3859 59.6574 44.4711 59.3544 44.5895C59.0514 44.7079 58.8123 44.8736 58.6371 45.0866C58.4619 45.295 58.3743 45.5649 58.3743 45.8963C58.3743 46.3698 58.5471 46.7273 58.8928 46.9688C59.2384 47.2102 59.6787 47.331 60.2138 47.331ZM70.4624 42.608V49H67.8913V38.0909H70.3487V39.9446H70.4766C70.7275 39.3338 71.1276 38.8485 71.6768 38.4886C72.2308 38.1288 72.915 37.9489 73.7294 37.9489C74.4822 37.9489 75.138 38.1098 75.6967 38.4318C76.2602 38.7538 76.6958 39.2202 77.0036 39.831C77.3161 40.4418 77.4699 41.1828 77.4652 42.054V49H74.8942V42.4517C74.8942 41.7225 74.7048 41.152 74.326 40.7401C73.9519 40.3281 73.4335 40.1222 72.7706 40.1222C72.3208 40.1222 71.9207 40.2216 71.5703 40.4205C71.2247 40.6146 70.9524 40.8963 70.7536 41.2656C70.5594 41.6349 70.4624 42.0824 70.4624 42.608ZM84.9084 49.2131C83.8146 49.2131 82.87 48.9858 82.0746 48.5312C81.2839 48.072 80.6754 47.4233 80.2493 46.5852C79.8232 45.7424 79.6101 44.7505 79.6101 43.6094C79.6101 42.4872 79.8232 41.5024 80.2493 40.6548C80.6802 39.8026 81.2815 39.1397 82.0533 38.6662C82.825 38.188 83.7318 37.9489 84.7734 37.9489C85.4458 37.9489 86.0803 38.0578 86.6768 38.2756C87.2782 38.4886 87.8085 38.8201 88.2678 39.2699C88.7318 39.7197 89.0964 40.2926 89.3615 40.9886C89.6267 41.6799 89.7592 42.5038 89.7592 43.4602V44.2486H80.8175V42.5156H87.2947C87.29 42.0232 87.1835 41.5852 86.9751 41.2017C86.7668 40.8134 86.4756 40.508 86.1016 40.2855C85.7322 40.063 85.3014 39.9517 84.8089 39.9517C84.2834 39.9517 83.8217 40.0795 83.424 40.3352C83.0263 40.5862 82.7161 40.9176 82.4936 41.3295C82.2758 41.7367 82.1645 42.1842 82.1598 42.6719V44.1847C82.1598 44.8191 82.2758 45.3636 82.5078 45.8182C82.7398 46.268 83.0642 46.6136 83.4808 46.8551C83.8975 47.0919 84.3852 47.2102 84.9439 47.2102C85.3179 47.2102 85.6565 47.1581 85.9595 47.054C86.2625 46.9451 86.5253 46.7865 86.7479 46.5781C86.9704 46.3698 87.1385 46.1117 87.2521 45.804L89.6527 46.0739C89.5012 46.7083 89.2124 47.2623 88.7862 47.7358C88.3648 48.2045 87.825 48.5691 87.1669 48.8295C86.5088 49.0852 85.7559 49.2131 84.9084 49.2131ZM97.0089 49V34.4545H99.6438V46.7912H106.05V49H97.0089ZM111.363 49.2202C110.671 49.2202 110.049 49.0971 109.495 48.8509C108.945 48.5999 108.51 48.2306 108.188 47.7429C107.871 47.2552 107.712 46.6539 107.712 45.9389C107.712 45.3234 107.826 44.8144 108.053 44.4119C108.28 44.0095 108.59 43.6875 108.983 43.446C109.376 43.2045 109.819 43.0223 110.311 42.8991C110.809 42.7713 111.322 42.679 111.853 42.6222C112.492 42.5559 113.01 42.4967 113.408 42.4446C113.806 42.3878 114.095 42.3026 114.275 42.1889C114.459 42.0705 114.551 41.8883 114.551 41.642V41.5994C114.551 41.0644 114.393 40.6501 114.076 40.3565C113.758 40.063 113.301 39.9162 112.705 39.9162C112.075 39.9162 111.576 40.0535 111.206 40.3281C110.842 40.6027 110.596 40.9271 110.468 41.3011L108.067 40.9602C108.257 40.2973 108.569 39.7434 109.005 39.2983C109.44 38.8485 109.973 38.5123 110.603 38.2898C111.232 38.0625 111.928 37.9489 112.691 37.9489C113.216 37.9489 113.739 38.0104 114.26 38.1335C114.781 38.2566 115.257 38.4602 115.688 38.7443C116.119 39.0237 116.464 39.4048 116.725 39.8878C116.99 40.3707 117.123 40.9744 117.123 41.6989V49H114.651V47.5014H114.566C114.409 47.8045 114.189 48.0885 113.905 48.3537C113.626 48.6141 113.273 48.8248 112.847 48.9858C112.426 49.142 111.931 49.2202 111.363 49.2202ZM112.03 47.331C112.546 47.331 112.994 47.2292 113.373 47.0256C113.751 46.8172 114.042 46.5426 114.246 46.2017C114.454 45.8608 114.559 45.4891 114.559 45.0866V43.8011C114.478 43.8674 114.341 43.929 114.147 43.9858C113.957 44.0426 113.744 44.0923 113.507 44.1349C113.271 44.1776 113.036 44.2154 112.804 44.2486C112.572 44.2817 112.371 44.3101 112.201 44.3338C111.817 44.3859 111.474 44.4711 111.171 44.5895C110.868 44.7079 110.629 44.8736 110.453 45.0866C110.278 45.295 110.191 45.5649 110.191 45.8963C110.191 46.3698 110.364 46.7273 110.709 46.9688C111.055 47.2102 111.495 47.331 112.03 47.331ZM126.661 44.4119V38.0909H129.232V49H126.739V47.0611H126.625C126.379 47.6719 125.974 48.1714 125.411 48.5597C124.852 48.9479 124.163 49.142 123.344 49.142C122.629 49.142 121.997 48.9834 121.448 48.6662C120.903 48.3442 120.477 47.8778 120.169 47.267C119.862 46.6515 119.708 45.9081 119.708 45.0369V38.0909H122.279V44.6392C122.279 45.3305 122.468 45.8797 122.847 46.2869C123.226 46.6941 123.723 46.8977 124.338 46.8977C124.717 46.8977 125.084 46.8054 125.439 46.6207C125.794 46.4361 126.086 46.1615 126.313 45.7969C126.545 45.4276 126.661 44.9659 126.661 44.4119ZM134.447 42.608V49H131.876V38.0909H134.333V39.9446H134.461C134.712 39.3338 135.112 38.8485 135.661 38.4886C136.215 38.1288 136.899 37.9489 137.714 37.9489C138.467 37.9489 139.122 38.1098 139.681 38.4318C140.245 38.7538 140.68 39.2202 140.988 39.831C141.3 40.4418 141.454 41.1828 141.45 42.054V49H138.879V42.4517C138.879 41.7225 138.689 41.152 138.31 40.7401C137.936 40.3281 137.418 40.1222 136.755 40.1222C136.305 40.1222 135.905 40.2216 135.555 40.4205C135.209 40.6146 134.937 40.8963 134.738 41.2656C134.544 41.6349 134.447 42.0824 134.447 42.608ZM148.822 49.2131C147.733 49.2131 146.798 48.974 146.016 48.4957C145.24 48.0175 144.641 47.357 144.219 46.5142C143.803 45.6667 143.594 44.6913 143.594 43.5881C143.594 42.4801 143.808 41.5024 144.234 40.6548C144.66 39.8026 145.261 39.1397 146.038 38.6662C146.819 38.188 147.742 37.9489 148.808 37.9489C149.693 37.9489 150.477 38.1122 151.158 38.4389C151.845 38.7609 152.392 39.2178 152.799 39.8097C153.206 40.3968 153.438 41.0833 153.495 41.8693H151.038C150.938 41.3437 150.701 40.9058 150.327 40.5554C149.958 40.2003 149.463 40.0227 148.843 40.0227C148.317 40.0227 147.856 40.1648 147.458 40.4489C147.06 40.7282 146.75 41.1307 146.528 41.6562C146.31 42.1818 146.201 42.8116 146.201 43.5455C146.201 44.2888 146.31 44.928 146.528 45.4631C146.746 45.9934 147.051 46.4029 147.444 46.6918C147.842 46.9759 148.308 47.1179 148.843 47.1179C149.222 47.1179 149.56 47.0469 149.859 46.9048C150.162 46.758 150.415 46.5473 150.619 46.2727C150.822 45.9981 150.962 45.6643 151.038 45.2713H153.495C153.433 46.0431 153.206 46.7273 152.813 47.3239C152.42 47.9157 151.885 48.3797 151.208 48.7159C150.531 49.0473 149.736 49.2131 148.822 49.2131ZM158.177 42.608V49H155.606V34.4545H158.12V39.9446H158.248C158.504 39.3291 158.899 38.8437 159.434 38.4886C159.974 38.1288 160.661 37.9489 161.494 37.9489C162.252 37.9489 162.912 38.1075 163.475 38.4247C164.039 38.742 164.475 39.206 164.782 39.8168C165.095 40.4276 165.251 41.1733 165.251 42.054V49H162.68V42.4517C162.68 41.7178 162.491 41.1473 162.112 40.7401C161.738 40.3281 161.212 40.1222 160.535 40.1222C160.081 40.1222 159.673 40.2216 159.314 40.4205C158.958 40.6146 158.679 40.8963 158.475 41.2656C158.277 41.6349 158.177 42.0824 158.177 42.608ZM185.397 39.3622H182.74C182.665 38.9266 182.525 38.5407 182.321 38.2045C182.118 37.8636 181.864 37.5748 181.561 37.3381C181.258 37.1013 180.913 36.9238 180.525 36.8054C180.141 36.6823 179.727 36.6207 179.282 36.6207C178.491 36.6207 177.79 36.8196 177.179 37.2173C176.569 37.6103 176.09 38.188 175.745 38.9503C175.399 39.7079 175.226 40.6335 175.226 41.7273C175.226 42.84 175.399 43.7775 175.745 44.5398C176.095 45.2973 176.573 45.8703 177.179 46.2585C177.79 46.642 178.489 46.8338 179.275 46.8338C179.71 46.8338 180.117 46.777 180.496 46.6634C180.88 46.545 181.223 46.3722 181.526 46.1449C181.834 45.9176 182.092 45.6383 182.3 45.3068C182.513 44.9754 182.66 44.5966 182.74 44.1705L185.397 44.1847C185.297 44.8759 185.082 45.5246 184.75 46.1307C184.424 46.7367 183.995 47.2718 183.465 47.7358C182.935 48.1951 182.314 48.5549 181.604 48.8153C180.894 49.071 180.105 49.1989 179.239 49.1989C177.961 49.1989 176.819 48.9029 175.816 48.3111C174.812 47.7192 174.021 46.8646 173.444 45.7472C172.866 44.6297 172.577 43.2898 172.577 41.7273C172.577 40.16 172.868 38.8201 173.451 37.7074C174.033 36.59 174.826 35.7353 175.83 35.1435C176.834 34.5516 177.97 34.2557 179.239 34.2557C180.049 34.2557 180.801 34.3693 181.498 34.5966C182.194 34.8239 182.814 35.1577 183.358 35.598C183.903 36.0336 184.35 36.5687 184.701 37.2031C185.056 37.8329 185.288 38.5526 185.397 39.3622ZM189.392 53.0909C189.041 53.0909 188.717 53.0625 188.419 53.0057C188.125 52.9536 187.891 52.892 187.716 52.821L188.312 50.8182C188.686 50.9271 189.02 50.9792 189.314 50.9744C189.607 50.9697 189.865 50.8774 190.088 50.6974C190.315 50.5223 190.507 50.2287 190.663 49.8168L190.883 49.2273L186.927 38.0909H189.654L192.169 46.3295H192.282L194.804 38.0909H197.538L193.17 50.321C192.967 50.8987 192.697 51.3935 192.36 51.8054C192.024 52.2221 191.612 52.5393 191.125 52.7571C190.642 52.9796 190.064 53.0909 189.392 53.0909ZM203.705 49.2131C202.616 49.2131 201.68 48.974 200.899 48.4957C200.123 48.0175 199.524 47.357 199.102 46.5142C198.686 45.6667 198.477 44.6913 198.477 43.5881C198.477 42.4801 198.69 41.5024 199.116 40.6548C199.543 39.8026 200.144 39.1397 200.92 38.6662C201.702 38.188 202.625 37.9489 203.69 37.9489C204.576 37.9489 205.359 38.1122 206.041 38.4389C206.728 38.7609 207.275 39.2178 207.682 39.8097C208.089 40.3968 208.321 41.0833 208.378 41.8693H205.92C205.821 41.3437 205.584 40.9058 205.21 40.5554C204.841 40.2003 204.346 40.0227 203.726 40.0227C203.2 40.0227 202.739 40.1648 202.341 40.4489C201.943 40.7282 201.633 41.1307 201.411 41.6562C201.193 42.1818 201.084 42.8116 201.084 43.5455C201.084 44.2888 201.193 44.928 201.411 45.4631C201.628 45.9934 201.934 46.4029 202.327 46.6918C202.724 46.9759 203.191 47.1179 203.726 47.1179C204.105 47.1179 204.443 47.0469 204.741 46.9048C205.045 46.758 205.298 46.5473 205.501 46.2727C205.705 45.9981 205.845 45.6643 205.92 45.2713H208.378C208.316 46.0431 208.089 46.7273 207.696 47.3239C207.303 47.9157 206.768 48.3797 206.091 48.7159C205.414 49.0473 204.618 49.2131 203.705 49.2131ZM213.06 34.4545V49H210.489V34.4545H213.06ZM220.533 49.2131C219.44 49.2131 218.495 48.9858 217.7 48.5312C216.909 48.072 216.3 47.4233 215.874 46.5852C215.448 45.7424 215.235 44.7505 215.235 43.6094C215.235 42.4872 215.448 41.5024 215.874 40.6548C216.305 39.8026 216.906 39.1397 217.678 38.6662C218.45 38.188 219.357 37.9489 220.398 37.9489C221.071 37.9489 221.705 38.0578 222.302 38.2756C222.903 38.4886 223.433 38.8201 223.893 39.2699C224.357 39.7197 224.721 40.2926 224.987 40.9886C225.252 41.6799 225.384 42.5038 225.384 43.4602V44.2486H216.442V42.5156H222.92C222.915 42.0232 222.808 41.5852 222.6 41.2017C222.392 40.8134 222.101 40.508 221.727 40.2855C221.357 40.063 220.926 39.9517 220.434 39.9517C219.908 39.9517 219.447 40.0795 219.049 40.3352C218.651 40.5862 218.341 40.9176 218.119 41.3295C217.901 41.7367 217.79 42.1842 217.785 42.6719V44.1847C217.785 44.8191 217.901 45.3636 218.133 45.8182C218.365 46.268 218.689 46.6136 219.106 46.8551C219.522 47.0919 220.01 47.2102 220.569 47.2102C220.943 47.2102 221.281 47.1581 221.585 47.054C221.888 46.9451 222.15 46.7865 222.373 46.5781C222.595 46.3698 222.763 46.1117 222.877 45.804L225.278 46.0739C225.126 46.7083 224.837 47.2623 224.411 47.7358C223.99 48.2045 223.45 48.5691 222.792 48.8295C222.134 49.0852 221.381 49.2131 220.533 49.2131Z" fill="black"/>
+<path d="M410.997 142.667C410.721 142.667 410.486 142.568 410.292 142.372C410.097 142.176 410 141.939 410 141.664C410 141.388 410.098 141.153 410.295 140.958C410.491 140.764 410.727 140.667 411.003 140.667C411.279 140.667 411.514 140.765 411.708 140.961C411.903 141.158 412 141.394 412 141.67C412 141.945 411.902 142.18 411.705 142.375C411.509 142.569 411.273 142.667 410.997 142.667ZM410.997 137C410.721 137 410.486 136.902 410.292 136.705C410.097 136.509 410 136.273 410 135.997C410 135.721 410.098 135.486 410.295 135.292C410.491 135.097 410.727 135 411.003 135C411.279 135 411.514 135.098 411.708 135.295C411.903 135.491 412 135.727 412 136.003C412 136.279 411.902 136.514 411.705 136.708C411.509 136.903 411.273 137 410.997 137ZM410.997 131.333C410.721 131.333 410.486 131.235 410.292 131.039C410.097 130.842 410 130.606 410 130.33C410 130.054 410.098 129.819 410.295 129.625C410.491 129.43 410.727 129.333 411.003 129.333C411.279 129.333 411.514 129.431 411.708 129.628C411.903 129.824 412 130.06 412 130.336C412 130.612 411.902 130.847 411.705 131.042C411.509 131.236 411.273 131.333 410.997 131.333Z" fill="black"/>
+<path d="M405.287 46.5968L409.001 44.3622L412.714 46.6218L411.731 42.393L414.999 39.5565L410.689 39.1757L409.001 35.1969L407.312 39.1507L403.003 39.5315L406.27 42.3776L405.287 46.5968ZM409.001 45.6891L404.745 48.2583C404.637 48.316 404.528 48.3423 404.416 48.3372C404.304 48.332 404.203 48.2974 404.112 48.2333C404.021 48.1692 403.953 48.0849 403.907 47.9805C403.862 47.876 403.856 47.7596 403.889 47.6314L405.008 42.793L401.264 39.5257C401.163 39.4411 401.1 39.344 401.075 39.2344C401.05 39.1248 401.054 39.0161 401.087 38.9084C401.114 38.8071 401.171 38.7219 401.259 38.6527C401.347 38.5834 401.455 38.5437 401.583 38.5334L406.537 38.0969L408.464 33.52C408.518 33.4085 408.594 33.3232 408.692 33.2642C408.79 33.2053 408.893 33.1758 409.001 33.1758C409.108 33.1758 409.211 33.2053 409.309 33.2642C409.407 33.3232 409.483 33.4085 409.537 33.52L411.464 38.0969L416.418 38.5334C416.546 38.5437 416.654 38.5834 416.742 38.6527C416.83 38.7219 416.89 38.8071 416.924 38.9084C416.951 39.0161 416.951 39.1248 416.926 39.2344C416.901 39.344 416.838 39.4411 416.737 39.5257L412.993 42.793L414.122 47.6314C414.149 47.7596 414.139 47.876 414.094 47.9805C414.048 48.0849 413.98 48.1692 413.889 48.2333C413.798 48.2974 413.697 48.332 413.585 48.3372C413.474 48.3423 413.364 48.316 413.256 48.2583L409.001 45.6891Z" fill="#858E96"/>
+<path d="M91 184C91 182.895 91.8954 182 93 182H148V186H93C91.8954 186 91 185.105 91 184Z" fill="#DEE2E6"/>
+<rect x="150" y="182" width="39" height="4" fill="#26B5CE"/>
+<rect x="191" y="182" width="81" height="4" fill="#F7AE59"/>
+<rect x="274" y="182" width="44" height="4" fill="#D687FF"/>
+<path d="M320 182H391C392.105 182 393 182.895 393 184C393 185.105 392.105 186 391 186H320V182Z" fill="#09A953"/>
+<path d="M37.8203 187H38.875V183.982H40.832C42.4199 183.982 43.5449 182.863 43.5449 181.258V181.246C43.5449 179.641 42.4199 178.545 40.832 178.545H37.8203V187ZM40.5625 179.482C41.7695 179.482 42.4668 180.145 42.4668 181.258V181.27C42.4668 182.383 41.7695 183.045 40.5625 183.045H38.875V179.482H40.5625ZM44.5996 187H45.6191V183.238C45.6191 182.312 46.1348 181.762 46.9258 181.762C47.1719 181.762 47.3887 181.791 47.4707 181.82V180.83C47.3887 180.818 47.2363 180.789 47.0605 180.789C46.375 180.789 45.8477 181.234 45.6426 181.938H45.6191V180.906H44.5996V187ZM50.5352 187.117C52.2168 187.117 53.3535 185.898 53.3535 183.953V183.941C53.3535 181.996 52.2109 180.789 50.5293 180.789C48.8477 180.789 47.7109 182.002 47.7109 183.941V183.953C47.7109 185.893 48.8418 187.117 50.5352 187.117ZM50.541 186.215C49.4629 186.215 48.7539 185.389 48.7539 183.953V183.941C48.7539 182.518 49.4688 181.691 50.5293 181.691C51.6074 181.691 52.3105 182.512 52.3105 183.941V183.953C52.3105 185.383 51.6133 186.215 50.541 186.215ZM56.9629 189.168C58.6152 189.168 59.6523 188.242 59.6523 186.83V180.906H58.6328V181.938H58.6094C58.2344 181.258 57.5547 180.789 56.6934 180.789C55.1465 180.789 54.0859 182.02 54.0859 183.912V183.918C54.0859 185.822 55.1348 187.059 56.6699 187.059C57.543 187.059 58.2461 186.625 58.6094 185.951H58.6328V186.73C58.6328 187.674 58.0234 188.266 56.9512 188.266C56.1191 188.266 55.5391 187.996 55.3457 187.557L55.3223 187.504H54.2969L54.3086 187.557C54.5078 188.459 55.457 189.168 56.9629 189.168ZM56.8926 186.156C55.8086 186.156 55.1289 185.301 55.1289 183.918V183.912C55.1289 182.559 55.8086 181.691 56.8926 181.691C57.9238 181.691 58.6328 182.57 58.6328 183.912V183.918C58.6328 185.271 57.9297 186.156 56.8926 186.156ZM60.9707 187H61.9902V183.238C61.9902 182.312 62.5059 181.762 63.2969 181.762C63.543 181.762 63.7598 181.791 63.8418 181.82V180.83C63.7598 180.818 63.6074 180.789 63.4316 180.789C62.7461 180.789 62.2188 181.234 62.0137 181.938H61.9902V180.906H60.9707V187ZM66.8887 187.117C68.2188 187.117 69.2148 186.32 69.4141 185.312L69.4258 185.254H68.4238L68.4062 185.307C68.2305 185.828 67.6855 186.215 66.9121 186.215C65.8281 186.215 65.1367 185.482 65.1133 184.229H69.502V183.854C69.502 182.025 68.4883 180.789 66.8242 180.789C65.1602 180.789 64.082 182.084 64.082 183.971V183.977C64.082 185.893 65.1367 187.117 66.8887 187.117ZM66.8184 181.691C67.709 181.691 68.3652 182.248 68.4648 183.432H65.1309C65.2422 182.295 65.9336 181.691 66.8184 181.691ZM72.6953 187.117C74.0547 187.117 75.0625 186.367 75.0625 185.301V185.295C75.0625 184.428 74.6172 183.941 73.3867 183.643L72.4199 183.408C71.7461 183.244 71.4707 182.957 71.4707 182.541V182.535C71.4707 181.996 71.9277 181.639 72.666 181.639C73.4219 181.639 73.873 182.031 73.9551 182.623L73.9609 182.664H74.9336L74.9277 182.588C74.8516 181.568 74.002 180.789 72.666 180.789C71.3477 180.789 70.4277 181.533 70.4277 182.582V182.588C70.4277 183.467 70.9844 184 72.1328 184.275L73.0996 184.51C73.791 184.68 74.0195 184.926 74.0195 185.365V185.371C74.0195 185.922 73.5273 186.268 72.7012 186.268C71.8691 186.268 71.418 185.91 71.2949 185.301L71.2832 185.242H70.2637L70.2695 185.295C70.3926 186.385 71.2598 187.117 72.6953 187.117ZM78.2852 187.117C79.6445 187.117 80.6523 186.367 80.6523 185.301V185.295C80.6523 184.428 80.207 183.941 78.9766 183.643L78.0098 183.408C77.3359 183.244 77.0605 182.957 77.0605 182.541V182.535C77.0605 181.996 77.5176 181.639 78.2559 181.639C79.0117 181.639 79.4629 182.031 79.5449 182.623L79.5508 182.664H80.5234L80.5176 182.588C80.4414 181.568 79.5918 180.789 78.2559 180.789C76.9375 180.789 76.0176 181.533 76.0176 182.582V182.588C76.0176 183.467 76.5742 184 77.7227 184.275L78.6895 184.51C79.3809 184.68 79.6094 184.926 79.6094 185.365V185.371C79.6094 185.922 79.1172 186.268 78.291 186.268C77.459 186.268 77.0078 185.91 76.8848 185.301L76.873 185.242H75.8535L75.8594 185.295C75.9824 186.385 76.8496 187.117 78.2852 187.117Z" fill="black"/>
+<path d="M206.029 83V74.2727H211.297V75.2102H207.086V78.1591H211.024V79.0966H207.086V82.0625H211.365V83H206.029ZM214.071 79.0625V83H213.065V76.4545H214.037V77.4773H214.122C214.275 77.1449 214.508 76.8778 214.821 76.6761C215.133 76.4716 215.537 76.3693 216.031 76.3693C216.474 76.3693 216.862 76.4602 217.194 76.642C217.527 76.821 217.785 77.0938 217.97 77.4602C218.154 77.8239 218.247 78.2841 218.247 78.8409V83H217.241V78.9091C217.241 78.3949 217.108 77.9943 216.841 77.7074C216.574 77.4176 216.207 77.2727 215.741 77.2727C215.42 77.2727 215.133 77.3423 214.88 77.4815C214.63 77.6207 214.433 77.8239 214.288 78.0909C214.143 78.358 214.071 78.6818 214.071 79.0625ZM222.556 83.1364C222.011 83.1364 221.529 82.9986 221.112 82.723C220.694 82.4446 220.367 82.0526 220.131 81.5469C219.896 81.0384 219.778 80.4375 219.778 79.7443C219.778 79.0568 219.896 78.4602 220.131 77.9545C220.367 77.4489 220.695 77.0582 221.116 76.7827C221.536 76.5071 222.022 76.3693 222.573 76.3693C222.999 76.3693 223.336 76.4403 223.583 76.5824C223.833 76.7216 224.023 76.8807 224.154 77.0597C224.288 77.2358 224.391 77.3807 224.465 77.4943H224.55V74.2727H225.556V83H224.585V81.9943H224.465C224.391 82.1136 224.286 82.2642 224.15 82.446C224.013 82.625 223.819 82.7855 223.566 82.9276C223.313 83.0668 222.977 83.1364 222.556 83.1364ZM222.692 82.233C223.096 82.233 223.437 82.1278 223.715 81.9176C223.994 81.7045 224.205 81.4105 224.35 81.0355C224.495 80.6577 224.567 80.2216 224.567 79.7273C224.567 79.2386 224.496 78.8111 224.354 78.4446C224.212 78.0753 224.002 77.7884 223.724 77.5838C223.445 77.3764 223.102 77.2727 222.692 77.2727C222.266 77.2727 221.911 77.3821 221.627 77.6009C221.346 77.8168 221.134 78.1108 220.992 78.483C220.853 78.8523 220.783 79.267 220.783 79.7273C220.783 80.1932 220.854 80.6165 220.996 80.9972C221.141 81.375 221.354 81.6761 221.636 81.9006C221.92 82.1222 222.272 82.233 222.692 82.233ZM231.646 83.0682C231.435 83.0682 231.255 82.9929 231.104 82.8423C230.954 82.6918 230.879 82.5114 230.879 82.3011C230.879 82.0909 230.954 81.9105 231.104 81.7599C231.255 81.6094 231.435 81.5341 231.646 81.5341C231.856 81.5341 232.036 81.6094 232.187 81.7599C232.337 81.9105 232.413 82.0909 232.413 82.3011C232.413 82.4403 232.377 82.5682 232.306 82.6847C232.238 82.8011 232.146 82.8949 232.029 82.9659C231.915 83.0341 231.788 83.0682 231.646 83.0682ZM231.646 78.2102C231.435 78.2102 231.255 78.1349 231.104 77.9844C230.954 77.8338 230.879 77.6534 230.879 77.4432C230.879 77.233 230.954 77.0526 231.104 76.902C231.255 76.7514 231.435 76.6761 231.646 76.6761C231.856 76.6761 232.036 76.7514 232.187 76.902C232.337 77.0526 232.413 77.233 232.413 77.4432C232.413 77.5824 232.377 77.7102 232.306 77.8267C232.238 77.9432 232.146 78.0369 232.029 78.108C231.915 78.1761 231.788 78.2102 231.646 78.2102Z" fill="#858E96"/>
+<path d="M238.087 83H236.979L240.183 74.2727H241.274L244.479 83H243.371L240.763 75.6534H240.695L238.087 83ZM238.496 79.5909H242.962V80.5284H238.496V79.5909ZM245.702 85.4545V76.4545H246.673V77.4943H246.793C246.866 77.3807 246.969 77.2358 247.099 77.0597C247.233 76.8807 247.423 76.7216 247.67 76.5824C247.92 76.4403 248.259 76.3693 248.685 76.3693C249.236 76.3693 249.722 76.5071 250.142 76.7827C250.563 77.0582 250.891 77.4489 251.126 77.9545C251.362 78.4602 251.48 79.0568 251.48 79.7443C251.48 80.4375 251.362 81.0384 251.126 81.5469C250.891 82.0526 250.564 82.4446 250.146 82.723C249.729 82.9986 249.247 83.1364 248.702 83.1364C248.281 83.1364 247.945 83.0668 247.692 82.9276C247.439 82.7855 247.244 82.625 247.108 82.446C246.972 82.2642 246.866 82.1136 246.793 81.9943H246.707V85.4545H245.702ZM246.69 79.7273C246.69 80.2216 246.763 80.6577 246.908 81.0355C247.053 81.4105 247.264 81.7045 247.543 81.9176C247.821 82.1278 248.162 82.233 248.565 82.233C248.986 82.233 249.337 82.1222 249.618 81.9006C249.902 81.6761 250.115 81.375 250.257 80.9972C250.402 80.6165 250.474 80.1932 250.474 79.7273C250.474 79.267 250.403 78.8523 250.261 78.483C250.122 78.1108 249.911 77.8168 249.626 77.6009C249.345 77.3821 248.991 77.2727 248.565 77.2727C248.156 77.2727 247.813 77.3764 247.534 77.5838C247.256 77.7884 247.045 78.0753 246.903 78.4446C246.761 78.8111 246.69 79.2386 246.69 79.7273ZM253.014 83V76.4545H253.986V77.4432H254.054C254.173 77.1193 254.389 76.8565 254.702 76.6548C255.014 76.4531 255.366 76.3523 255.759 76.3523C255.832 76.3523 255.925 76.3537 256.036 76.3565C256.146 76.3594 256.23 76.3636 256.287 76.3693V77.392C256.253 77.3835 256.175 77.3707 256.053 77.3537C255.933 77.3338 255.807 77.3239 255.673 77.3239C255.355 77.3239 255.071 77.3906 254.821 77.5241C254.574 77.6548 254.378 77.8366 254.233 78.0696C254.091 78.2997 254.02 78.5625 254.02 78.858V83H253.014ZM263.905 74.2727V83H262.848V75.3807H262.797L260.667 76.7955V75.7216L262.848 74.2727H263.905ZM269.313 83.1193C268.955 83.1136 268.597 83.0455 268.239 82.9148C267.881 82.7841 267.554 82.5639 267.259 82.2543C266.963 81.9418 266.726 81.5199 266.547 80.9886C266.368 80.4545 266.279 79.7841 266.279 78.9773C266.279 78.2045 266.351 77.5199 266.496 76.9233C266.641 76.3239 266.851 75.8196 267.127 75.4105C267.402 74.9986 267.735 74.6861 268.124 74.473C268.516 74.2599 268.958 74.1534 269.449 74.1534C269.938 74.1534 270.373 74.2514 270.753 74.4474C271.137 74.6406 271.449 74.9105 271.691 75.2571C271.932 75.6037 272.088 76.0028 272.159 76.4545H271.12C271.023 76.0625 270.836 75.7372 270.557 75.4787C270.279 75.2202 269.909 75.0909 269.449 75.0909C268.773 75.0909 268.24 75.3849 267.851 75.973C267.465 76.5611 267.27 77.3864 267.267 78.4489H267.336C267.495 78.2074 267.684 78.0014 267.902 77.831C268.124 77.6577 268.368 77.5241 268.635 77.4304C268.902 77.3366 269.185 77.2898 269.483 77.2898C269.983 77.2898 270.441 77.4148 270.855 77.6648C271.27 77.9119 271.603 78.2543 271.853 78.6918C272.103 79.1264 272.228 79.625 272.228 80.1875C272.228 80.7273 272.107 81.2216 271.865 81.6705C271.624 82.1165 271.284 82.4716 270.847 82.7358C270.412 82.9972 269.901 83.125 269.313 83.1193ZM269.313 82.1818C269.671 82.1818 269.992 82.0923 270.276 81.9134C270.563 81.7344 270.789 81.4943 270.953 81.1932C271.121 80.892 271.205 80.5568 271.205 80.1875C271.205 79.8267 271.124 79.4986 270.962 79.2031C270.803 78.9048 270.583 78.6676 270.301 78.4915C270.023 78.3153 269.705 78.2273 269.347 78.2273C269.077 78.2273 268.826 78.2812 268.593 78.3892C268.36 78.4943 268.155 78.6392 267.979 78.8239C267.806 79.0085 267.669 79.2202 267.57 79.4588C267.471 79.6946 267.421 79.9432 267.421 80.2045C267.421 80.5511 267.502 80.875 267.664 81.1761C267.828 81.4773 268.053 81.7202 268.337 81.9048C268.624 82.0895 268.949 82.1818 269.313 82.1818ZM275.01 81.8068L274.942 82.267C274.894 82.5909 274.82 82.9375 274.721 83.3068C274.624 83.6761 274.523 84.0241 274.418 84.3509C274.313 84.6776 274.226 84.9375 274.158 85.1307H273.391C273.428 84.9489 273.476 84.7088 273.536 84.4105C273.596 84.1122 273.655 83.7784 273.715 83.4091C273.777 83.0426 273.828 82.6676 273.868 82.2841L273.919 81.8068H275.01ZM280.232 83V82.233L283.112 79.0795C283.45 78.7102 283.729 78.3892 283.947 78.1165C284.166 77.8409 284.328 77.5824 284.433 77.3409C284.541 77.0966 284.595 76.8409 284.595 76.5739C284.595 76.267 284.521 76.0014 284.374 75.777C284.229 75.5526 284.03 75.3793 283.777 75.2571C283.524 75.1349 283.24 75.0739 282.925 75.0739C282.589 75.0739 282.297 75.1435 282.047 75.2827C281.8 75.419 281.608 75.6108 281.472 75.858C281.338 76.1051 281.271 76.3949 281.271 76.7273H280.266C280.266 76.2159 280.384 75.767 280.619 75.3807C280.855 74.9943 281.176 74.6932 281.582 74.4773C281.991 74.2614 282.45 74.1534 282.959 74.1534C283.47 74.1534 283.923 74.2614 284.318 74.4773C284.713 74.6932 285.023 74.9844 285.247 75.3509C285.472 75.7173 285.584 76.125 285.584 76.5739C285.584 76.8949 285.526 77.2088 285.409 77.5156C285.295 77.8196 285.097 78.1591 284.812 78.5341C284.531 78.9062 284.141 79.3608 283.641 79.8977L281.68 81.9943V82.0625H285.737V83H280.232ZM290.344 83.1193C289.702 83.1193 289.155 82.9446 288.703 82.5952C288.251 82.2429 287.906 81.733 287.668 81.0653C287.429 80.3949 287.31 79.5852 287.31 78.6364C287.31 77.6932 287.429 76.8878 287.668 76.2202C287.909 75.5497 288.256 75.0384 288.707 74.6861C289.162 74.331 289.707 74.1534 290.344 74.1534C290.98 74.1534 291.524 74.331 291.976 74.6861C292.43 75.0384 292.777 75.5497 293.016 76.2202C293.257 76.8878 293.378 77.6932 293.378 78.6364C293.378 79.5852 293.259 80.3949 293.02 81.0653C292.781 81.733 292.436 82.2429 291.984 82.5952C291.533 82.9446 290.986 83.1193 290.344 83.1193ZM290.344 82.1818C290.98 82.1818 291.474 81.875 291.827 81.2614C292.179 80.6477 292.355 79.7727 292.355 78.6364C292.355 77.8807 292.274 77.2372 292.112 76.706C291.953 76.1747 291.723 75.7699 291.422 75.4915C291.124 75.2131 290.764 75.0739 290.344 75.0739C289.713 75.0739 289.22 75.3849 288.865 76.0071C288.51 76.6264 288.332 77.5028 288.332 78.6364C288.332 79.392 288.412 80.0341 288.571 80.5625C288.73 81.0909 288.959 81.4929 289.257 81.7685C289.558 82.044 289.92 82.1818 290.344 82.1818ZM294.997 83V82.233L297.878 79.0795C298.216 78.7102 298.494 78.3892 298.713 78.1165C298.932 77.8409 299.094 77.5824 299.199 77.3409C299.307 77.0966 299.361 76.8409 299.361 76.5739C299.361 76.267 299.287 76.0014 299.139 75.777C298.994 75.5526 298.795 75.3793 298.543 75.2571C298.29 75.1349 298.006 75.0739 297.69 75.0739C297.355 75.0739 297.062 75.1435 296.812 75.2827C296.565 75.419 296.374 75.6108 296.237 75.858C296.104 76.1051 296.037 76.3949 296.037 76.7273H295.031C295.031 76.2159 295.149 75.767 295.385 75.3807C295.621 74.9943 295.942 74.6932 296.348 74.4773C296.757 74.2614 297.216 74.1534 297.724 74.1534C298.236 74.1534 298.689 74.2614 299.084 74.4773C299.479 74.6932 299.788 74.9844 300.013 75.3509C300.237 75.7173 300.349 76.125 300.349 76.5739C300.349 76.8949 300.291 77.2088 300.175 77.5156C300.061 77.8196 299.862 78.1591 299.578 78.5341C299.297 78.9062 298.906 79.3608 298.406 79.8977L296.446 81.9943V82.0625H300.503V83H294.997ZM305.212 83.1193C304.649 83.1193 304.148 83.0227 303.707 82.8295C303.27 82.6364 302.922 82.3679 302.663 82.0241C302.408 81.6776 302.268 81.2756 302.246 80.8182H303.32C303.342 81.0994 303.439 81.3423 303.609 81.5469C303.78 81.7486 304.003 81.9048 304.278 82.0156C304.554 82.1264 304.859 82.1818 305.195 82.1818C305.57 82.1818 305.902 82.1165 306.192 81.9858C306.482 81.8551 306.709 81.6733 306.874 81.4403C307.038 81.2074 307.121 80.9375 307.121 80.6307C307.121 80.3097 307.041 80.027 306.882 79.7827C306.723 79.5355 306.49 79.3423 306.183 79.2031C305.876 79.0639 305.501 78.9943 305.058 78.9943H304.359V78.0568H305.058C305.405 78.0568 305.709 77.9943 305.97 77.8693C306.234 77.7443 306.44 77.5682 306.588 77.3409C306.739 77.1136 306.814 76.8466 306.814 76.5398C306.814 76.2443 306.749 75.9872 306.618 75.7685C306.487 75.5497 306.303 75.3793 306.064 75.2571C305.828 75.1349 305.55 75.0739 305.229 75.0739C304.928 75.0739 304.643 75.1293 304.376 75.2401C304.112 75.348 303.896 75.5057 303.729 75.7131C303.561 75.9176 303.47 76.1648 303.456 76.4545H302.433C302.45 75.9972 302.588 75.5966 302.847 75.2528C303.105 74.9062 303.443 74.6364 303.861 74.4432C304.281 74.25 304.743 74.1534 305.246 74.1534C305.786 74.1534 306.249 74.2628 306.635 74.4815C307.021 74.6974 307.318 74.983 307.526 75.3381C307.733 75.6932 307.837 76.0767 307.837 76.4886C307.837 76.9801 307.707 77.3991 307.449 77.7457C307.193 78.0923 306.845 78.3324 306.405 78.4659V78.5341C306.956 78.625 307.386 78.8594 307.696 79.2372C308.006 79.6122 308.161 80.0767 308.161 80.6307C308.161 81.1051 308.031 81.5312 307.773 81.9091C307.517 82.2841 307.168 82.5795 306.724 82.7955C306.281 83.0114 305.777 83.1193 305.212 83.1193Z" fill="#212529"/>
+<rect x="185" y="71" width="16" height="16" fill="url(#pattern0)"/>
+<defs>
+<filter id="filter0_d_2610_65105" x="5" y="0" width="441" height="217" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.647059 0 0 0 0 1 0 0 0 0.63 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2610_65105"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2610_65105" result="shape"/>
+</filter>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2610_65105" transform="scale(0.01)"/>
+</pattern>
+<image id="image0_2610_65105" width="100" height="100" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAMyElEQVR4nO1de3AdZRX/3TQpBdJH2gZR+zCJUHDUOoiKSO2DWhkZRjttaauAPEpQRKWog9Q+RYGqbcdhUOlgKeXhCNVIq/KHTxCfQSwtIAVtG8ACaRraatskTe51DnOusx7O3nu+b3fv3Zu5v5mdySQ5u99+5/vO+zsLVFFFFVVUUcXgxTAAkwFcCGApgHsB/BHAdgD/BNANoBdAP//8IoB/APgdgE0AVgG4FMC7ANSW+2UqEXUAzgGwHMBvAPQAyMV0/QfAIwBuAfBBAEPK/bJpRQ2AcwHcBeBQjAwodu0DsBHA+TEzZyUqFOMB3ATg+RIyIRdyPc8TSWOKgpV8v4rCWwHcwbLfMlm7AfwUwLcAXAlgKoC3A2gC0MBibgj//GYApwKYyf97M4CfAHjJ+KxjAO4E0BKBGRXDkCZWyv1FJuVfrJBJGU+I8flvAfBxAPcAeNXImAkezEg9Q45jC+lIgQn4N8vzGaxTkkYd76KNRcZ1GMANAIY6MCPVDKGX3lnghelvlwM4sYxjJFF3LYDnCozzGbbMLMxIJUNqebADIQMmP+KSlJmeNQDmAXg2ZMxZAN8O7JYwZqSOIRMB/ClkoC8DuBhABulFHYDPFNAz5JiuLaKDUoPz2GOWAyRFfhuAUagcnMwGQNwmdsn8lIsA9CkD2APgLFQuzgfQWWnM+GyIvngQwGhUPk4C8FBEZqwo1WC/GiKiFqdcV/go/dTvjMXKwykgOCeBFTqHV9kPAPwVwC7WV318dbN4/AuA+3ihfBTA2BjHkXqdkRUPPwhgekz3P5OtmR3Kc1wuon2K42YUyo+C1DLjPEWBH+RJjILhAK7jCcwldD0J4CoAJ3iML5XMmKiYtj0Rd0YDv8D+BBkhry4ASwAcbxzj/DQyo05x+voj6AxS+pcZzMp+fi5FfBcBmCKivbX880QOcVA4Zh3rk2NF7v0Ci99izDiWNmaAJ0QOgBS7D1o41Rr2Yr0A2pjZIyKMeQRHeduKhPwpxP+mSmLGTEW5tnmatnMBHCggSpbFbB3l8UYAN3K2UHs2icyPFGHGMf592UPoO5XEEYkJFxDzvlkg570EQD2Sx0i2urTQOzm41wNYEJEZIzn0QnMXO5YqMv39jvcgWX93CDMeZPlfajRzMYVFHLkyI69rae5iRZOykihQ6MqMLcpLHgVwNcqLDOvBYwkwI5/kinWx3aeE0Ec5vvDdIanaM5AeTA2JVLvqjDHKfSgdHFtBgsyBUz7DBZrOeJZ3XpowP0YF/nnlPqfEMcg7xI23OVpVc0OY8QakC/NjtqbqlMwjFW5EwnjFbqeSThc/44AiptK2M+YpzCCp8ImI971M3LOPy5S8cZO44U6HHHhGcfqOxqAzWtgIIL32OPssfaw4d3N6dSN73pTxi3NnNPMqzzjskl1x5URqlIpCCkf4ro5cBGtqCICFAH5vNE/zFzmxvwAwKyZmdPD/0LtZca0iIbyKvs9V6qaspToNSmyK/AwfzOISnFzEi/In7/FkRlOAGXS94uC8NvDuDT4nbIEUxF3iJiQGrJDlMT52+PEA1sfACDnhN7KV6KLAT1FSDVSdb8VGQft9x7l4re5IVqFTRaE1nyFD6BQOcUEjgPYiq50mZBqA03jnnsBln1P5b486MqqYNXWroHnVYZd8WNB2F6mEfB3OUeSetbzzOkHb5RibagTw9xB98ACASQ73mswOaaFso9W0beQEXJCWCjusyl0uUq0KMhTLI9jPMtNHUVsXMdWuTNquiGVE00Oq3139jK8J+qcdaDcJWjrZZYYMtlEVugVnCrpexxD6emXSHo4hDB+X09es7LZ3G2kvFXQkUs1n+uQxMmtJ/lolV2LFrBBmOMnaEnjgcrFSWMiCiYKuh0WZSe4GCcnZsmKHoJ3j4Gc8o4iptOyMIC5RisateFHQvsNCdKEg2upQN5UVL05haAsWKgr8LESDq59hLdAYLd4zy1lIC34mxlMsj/8algkiyqFbMEfQ/Rl2SA/8AUSDjwf+S4f7SyuQivEsuFnQUWiqKGS1N53Ts2CFoFvjEJuSK24S/OEbDsk6BP42eBY2yHASmeTOq5UcLZ8kFpXqWHC14vSVSmf83HPxXSno7vc0XMhAKIrtgohOu1rwmKCjuikfRi6HW3pgM0cVuj0U+CrPrN4UQUfpWgveJugoX1IUuwWRNQa1R9DRiVcLHhd00xyYUajK0WJNTRc0tKgsaFIK7Sw4WdCRs1oUXYKI8sOlpDvVSLc5IjPy+kvWClgwUtBREs5asBeko1BMUcgModUxi4tuuJGuUAsOEl8W1CsJNAvqBF1fknSDgSEHjPcYrnjPFhxXSrpKEVltBRjyQ+M9Jgk6SqpZMFbQ7UuSrtxKfbrDZGo1VMTgccZ7zIhJqe9Kkq7UZu+9Ec3e+1k5HuSdYWWGltk0OWrsmwXp6MiDBe8UdE9YiB4tsWP46RgdQ1f8TTy71UjXKugoumGBNLOpKsc5dNLqmdRa45ljyEYMnVhxuhhv1kE8rxO01mLqT/kk/pZ5TmyU4KLclZuRPH4snkmt/6yQWc3Znoz8ik/4nU4VwZhzzorKP2v4fYGyWs9GcviAYgxQ9aK1rKdfnCWxWpQydkZlts6KxyVBtd3ngZygelp5LjE5bjQqFuEOhyIOefCTrEQrOnwMpmHssfqYvmsEHbXWczkul0sghRvEUBZNcjda42dQzrisdtCVQbojLierfi2IraWTZ0QscvhuCFPi2CmNCjNyXG8Fh6yoLJizNiK4QtC5JMRep9it9rmWV3fxK4axMZBTHKizI+oMKabo+oPj+b9VPn5EiL+1JIrS2+sgYxdHLJQbq+iTvGj5EZurVpyuWFPBbg5WZZyP1MrIAB3KserIlwWtU81AnRK8IxlvQb0Sn3I99Di2QEe6HDt0Kzn0cRo/s55/nsF/k06f3BkuzNC8+k6H4vNZSvDTuQL+TnETKr72FXmHHWJbQfH1nQKT6nNlWWe4HlNuUQwd6lRqhXS26VSaM2ZEOI4wikv2ffwZbRxxNKLZ4WhN5ZFRGpftdUgT1PP5e59w1P+hRrGbyVLwLShzKU7WxjKfYz8ubZqybFnNi9ALWB64yXGbDnjGvXZHaer2dSUp73Kk7WElIRO1fVMTt1a6hyPMXWxe93J+4TG2Cls9xKTEe5UE2q8c6Gv50xlBejqf4o1xyoAozGHFBKUQodMhCVVONCsV892OTL5YWZCRDn1qFenbHbfcbEXMPJfCY9GyOkR2uaZ3uAB21CjmOzm+kdGi1Dt90vEesoQyzxRahWlDiyJmfETNIkHfF4MI/R9kW4xXHLsAZZRzdnlrJapOiRPvUxy4/JlAF6kwRmn/FFtrDXBw8XDE7VfLwcacIld9ra+4kGFrSmtu1ubhxK1XXAaX1LIJN4iHDHjEl2pDdkreT2lCeURUWIPkDR7MmKI0lP5SEgMfqpThd3h0rc6wTtH8iSMcjLQ6XVEwgsMhWgOzLOuMjEfI5wUlZmY6KeXrNcuJ3OLp6HwspIwnx6byioQSVCdx1LbQs12sqTwyyoGcAdfTtj5YrbzEFz3vRVbHb0MmJseWyRZOK0f5qkIDe/pbQz4WEHT6fD+x9GXlfuRYJ4465QzJgENOWltZFxk+2tXPxQXr2AufymbzaBanQ/nnZo5ZtfL/thu+ebXXMRwisUDRG4+U8kOWmgfew/1RfDGSw/Rh3UKTuDo5URRFZ81UrLN9SVhVxfAhZSCHRIMXH9SzCSoLJuK8nuDk0okxxLpk3qjXoQ1J7FiobNVDEXdKEPT92m9wsinsW1aWa4CrQ1bH0Iw/uDMOKc8pez/fzykT0OPYec5qUs4OfKC4nT9OvD8Q7d3Pv2vnaPBSpnHNDlp0huZEXoOUQPta2QA7RIPpgy4Ztqa03erS06UkuCZkoFsTWKHlwBiOJsj3I7/sC0gpFoZs5Q6uZKlUTFE88LwCL7vOsFhfXSEi7HsV9oGwMRwo1Hb+vnJaU64YX6CjWydXQpbie7e+qOF8hraw8k5fyf2MpD+9+iQXQpTMm3X49OpTRT69mliwsBSYFlKJGMwcLirRJyrCUM/tMrRMYXABJR4oLBXq2DMudJT5KJ8XvKBEu6aGe0vezgmksHEd5p0eZxV+ajCBKyCLfT7oJXbsLo8zD80JsCvYsdRStcGrj9OuFacrfCfmdqWVYC7k6uDTR2u5JmsaHywKi/ZO5gOWVzHNQ0rRX9jVw+npOBdCxWAcd/q0TlYuwWsPZwkj100NBtTwqt+g9MZN8jrAFSVTB1mIJ1YM4dar13MjfS3n7XsdYf/oFo7WDkpFnTSGsr6Yy8eIN/GkbisQ7d3G/7OJE1BzuQNolQFVVFFFFVVgsOK/CQ2naFV2iSEAAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/app/public/onboarding/issue.svg b/app/public/onboarding/issue.svg
new file mode 100644
index 000000000..e6d0fa0f6
--- /dev/null
+++ b/app/public/onboarding/issue.svg
@@ -0,0 +1,43 @@
+<svg width="488" height="201" viewBox="0 0 488 201" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_2610_65027)">
+<g filter="url(#filter1_d_2610_65027)">
+<rect x="10" y="8.00537" width="468" height="180.193" rx="10.0107" fill="white"/>
+</g>
+<path d="M33.3377 65.366V79.0588H31.6796V65.366H33.3377ZM43.7226 71.0892L42.3052 71.4904C42.2161 71.2541 42.0846 71.0246 41.9107 70.8017C41.7414 70.5744 41.5096 70.3872 41.2154 70.2401C40.9212 70.093 40.5446 70.0195 40.0855 70.0195C39.457 70.0195 38.9333 70.1643 38.5143 70.454C38.0998 70.7393 37.8925 71.1026 37.8925 71.5438C37.8925 71.9361 38.0351 72.2459 38.3204 72.4732C38.6057 72.7005 39.0514 72.89 39.6576 73.0415L41.182 73.4159C42.1002 73.6388 42.7844 73.9798 43.2346 74.4389C43.6847 74.8935 43.9098 75.4796 43.9098 76.1973C43.9098 76.7856 43.7405 77.3116 43.4017 77.7751C43.0674 78.2387 42.5994 78.6042 41.9977 78.8716C41.3959 79.1391 40.6961 79.2728 39.8983 79.2728C38.8508 79.2728 37.9839 79.0455 37.2975 78.5908C36.611 78.1362 36.1764 77.472 35.9937 76.5984L37.4913 76.224C37.634 76.7767 37.9036 77.1912 38.3003 77.4676C38.7015 77.7439 39.2252 77.8821 39.8715 77.8821C40.607 77.8821 41.1909 77.7261 41.6232 77.4141C42.0601 77.0976 42.2785 76.7188 42.2785 76.2775C42.2785 75.9209 42.1537 75.6223 41.9041 75.3816C41.6545 75.1364 41.2711 74.9537 40.7541 74.8333L39.0425 74.4322C38.102 74.2093 37.4111 73.8639 36.9698 73.3959C36.533 72.9234 36.3146 72.3328 36.3146 71.6241C36.3146 71.0446 36.4773 70.532 36.8027 70.0863C37.1325 69.6406 37.5805 69.2907 38.1466 69.0366C38.7171 68.7826 39.3634 68.6555 40.0855 68.6555C41.1017 68.6555 41.8996 68.8784 42.479 69.3241C43.063 69.7698 43.4775 70.3582 43.7226 71.0892ZM53.5593 71.0892L52.1419 71.4904C52.0527 71.2541 51.9213 71.0246 51.7474 70.8017C51.578 70.5744 51.3463 70.3872 51.0521 70.2401C50.7579 70.093 50.3813 70.0195 49.9222 70.0195C49.2937 70.0195 48.77 70.1643 48.351 70.454C47.9364 70.7393 47.7292 71.1026 47.7292 71.5438C47.7292 71.9361 47.8718 72.2459 48.1571 72.4732C48.4423 72.7005 48.8881 72.89 49.4943 73.0415L51.0187 73.4159C51.9369 73.6388 52.6211 73.9798 53.0712 74.4389C53.5214 74.8935 53.7465 75.4796 53.7465 76.1973C53.7465 76.7856 53.5771 77.3116 53.2384 77.7751C52.9041 78.2387 52.4361 78.6042 51.8343 78.8716C51.2326 79.1391 50.5328 79.2728 49.735 79.2728C48.6875 79.2728 47.8206 79.0455 47.1341 78.5908C46.4477 78.1362 46.0131 77.472 45.8304 76.5984L47.328 76.224C47.4707 76.7767 47.7403 77.1912 48.137 77.4676C48.5382 77.7439 49.0619 77.8821 49.7082 77.8821C50.4437 77.8821 51.0276 77.7261 51.4599 77.4141C51.8967 77.0976 52.1152 76.7188 52.1152 76.2775C52.1152 75.9209 51.9903 75.6223 51.7407 75.3816C51.4911 75.1364 51.1078 74.9537 50.5908 74.8333L48.8792 74.4322C47.9387 74.2093 47.2478 73.8639 46.8065 73.3959C46.3697 72.9234 46.1513 72.3328 46.1513 71.6241C46.1513 71.0446 46.314 70.532 46.6394 70.0863C46.9692 69.6406 47.4172 69.2907 47.9832 69.0366C48.5538 68.7826 49.2001 68.6555 49.9222 68.6555C50.9384 68.6555 51.7363 68.8784 52.3157 69.3241C52.8996 69.7698 53.3142 70.3582 53.5593 71.0892ZM62.5937 74.8601V68.7892H64.1716V79.0588H62.5937V77.3205H62.4867C62.246 77.842 61.8716 78.2855 61.3635 78.651C60.8553 79.012 60.2135 79.1926 59.4379 79.1926C58.7961 79.1926 58.2255 79.0522 57.7263 78.7713C57.2271 78.4861 56.8349 78.0582 56.5496 77.4876C56.2643 76.9127 56.1217 76.1883 56.1217 75.3147V68.7892H57.6996V75.2077C57.6996 75.9566 57.9091 76.5538 58.3281 76.9996C58.7515 77.4453 59.2908 77.6682 59.946 77.6682C60.3383 77.6682 60.7372 77.5679 61.1428 77.3673C61.5529 77.1667 61.8961 76.8592 62.1725 76.4446C62.4533 76.0301 62.5937 75.5019 62.5937 74.8601ZM71.3673 79.2728C70.3778 79.2728 69.5242 79.0544 68.8066 78.6176C68.0934 78.1763 67.5429 77.5612 67.1552 76.7722C66.7718 75.9789 66.5802 75.0562 66.5802 74.0043C66.5802 72.9524 66.7718 72.0252 67.1552 71.2229C67.5429 70.4162 68.0823 69.7877 68.7732 69.3375C69.4685 68.8828 70.2797 68.6555 71.2068 68.6555C71.7417 68.6555 72.2699 68.7447 72.7914 68.923C73.3129 69.1013 73.7876 69.391 74.2155 69.7921C74.6434 70.1888 74.9844 70.7148 75.2384 71.37C75.4925 72.0252 75.6195 72.832 75.6195 73.7903V74.4589H67.7034V73.095H74.0149C74.0149 72.5155 73.899 71.9985 73.6673 71.5438C73.4399 71.0892 73.1145 70.7304 72.6911 70.4674C72.2721 70.2044 71.7774 70.0729 71.2068 70.0729C70.5784 70.0729 70.0346 70.2289 69.5755 70.541C69.1208 70.8485 68.7709 71.2497 68.5258 71.7444C68.2806 72.2392 68.158 72.7696 68.158 73.3357V74.245C68.158 75.0205 68.2918 75.678 68.5592 76.2173C68.8311 76.7522 69.2077 77.16 69.6891 77.4408C70.1705 77.7172 70.7299 77.8554 71.3673 77.8554C71.7818 77.8554 72.1562 77.7974 72.4905 77.6815C72.8293 77.5612 73.1212 77.3829 73.3664 77.1467C73.6115 76.906 73.801 76.6073 73.9347 76.2507L75.4591 76.6786C75.2986 77.1957 75.029 77.6503 74.6501 78.0426C74.2712 78.4304 73.8032 78.7335 73.246 78.9519C72.6889 79.1658 72.0626 79.2728 71.3673 79.2728ZM87.1929 79.2728C86.3371 79.2728 85.5816 79.0566 84.9264 78.6243C84.2711 78.1874 83.7586 77.5723 83.3886 76.7789C83.0186 75.9811 82.8337 75.0384 82.8337 73.9508C82.8337 72.8721 83.0186 71.9361 83.3886 71.1427C83.7586 70.3493 84.2734 69.7364 84.9331 69.3041C85.5927 68.8717 86.3549 68.6555 87.2196 68.6555C87.8882 68.6555 88.4164 68.767 88.8042 68.9898C89.1964 69.2082 89.4951 69.4578 89.7001 69.7386C89.9096 70.015 90.0723 70.2423 90.1882 70.4206H90.3219V65.366H91.8998V79.0588H90.3754V77.481H90.1882C90.0723 77.6682 89.9074 77.9044 89.6934 78.1897C89.4795 78.4705 89.1742 78.7223 88.7775 78.9452C88.3808 79.1636 87.8526 79.2728 87.1929 79.2728ZM87.4068 77.8554C88.0398 77.8554 88.5747 77.6905 89.0115 77.3606C89.4483 77.0263 89.7804 76.565 90.0077 75.9766C90.235 75.3838 90.3487 74.6996 90.3487 73.924C90.3487 73.1574 90.2372 72.4866 90.0144 71.9116C89.7915 71.3321 89.4617 70.8819 89.0248 70.561C88.588 70.2356 88.0487 70.0729 87.4068 70.0729C86.7383 70.0729 86.1811 70.2445 85.7354 70.5878C85.2941 70.9265 84.962 71.3878 84.7392 71.9717C84.5208 72.5512 84.4116 73.202 84.4116 73.924C84.4116 74.655 84.523 75.3192 84.7458 75.9164C84.9732 76.5093 85.3075 76.9817 85.7487 77.3339C86.1945 77.6815 86.7472 77.8554 87.4068 77.8554ZM99.3145 79.2728C98.325 79.2728 97.4714 79.0544 96.7538 78.6176C96.0406 78.1763 95.4901 77.5612 95.1024 76.7722C94.719 75.9789 94.5274 75.0562 94.5274 74.0043C94.5274 72.9524 94.719 72.0252 95.1024 71.2229C95.4901 70.4162 96.0295 69.7877 96.7204 69.3375C97.4157 68.8828 98.2269 68.6555 99.154 68.6555C99.6889 68.6555 100.217 68.7447 100.739 68.923C101.26 69.1013 101.735 69.391 102.163 69.7921C102.591 70.1888 102.932 70.7148 103.186 71.37C103.44 72.0252 103.567 72.832 103.567 73.7903V74.4589H95.6506V73.095H101.962C101.962 72.5155 101.846 71.9985 101.614 71.5438C101.387 71.0892 101.062 70.7304 100.638 70.4674C100.219 70.2044 99.7246 70.0729 99.154 70.0729C98.5256 70.0729 97.9818 70.2289 97.5227 70.541C97.068 70.8485 96.7181 71.2497 96.473 71.7444C96.2278 72.2392 96.1052 72.7696 96.1052 73.3357V74.245C96.1052 75.0205 96.239 75.678 96.5064 76.2173C96.7783 76.7522 97.1549 77.16 97.6363 77.4408C98.1177 77.7172 98.6771 77.8554 99.3145 77.8554C99.729 77.8554 100.103 77.7974 100.438 77.6815C100.776 77.5612 101.068 77.3829 101.314 77.1467C101.559 76.906 101.748 76.6073 101.882 76.2507L103.406 76.6786C103.246 77.1957 102.976 77.6503 102.597 78.0426C102.218 78.4304 101.75 78.7335 101.193 78.9519C100.636 79.1658 100.01 79.2728 99.3145 79.2728ZM110.433 68.7892V70.1264H105.111V68.7892H110.433ZM106.662 66.3288H108.24V76.117C108.24 76.5628 108.305 76.8971 108.434 77.1199C108.568 77.3383 108.737 77.4854 108.942 77.5612C109.152 77.6325 109.372 77.6682 109.604 77.6682C109.778 77.6682 109.921 77.6592 110.032 77.6414C110.143 77.6191 110.233 77.6013 110.299 77.5879L110.62 79.0054C110.513 79.0455 110.364 79.0856 110.172 79.1257C109.981 79.1703 109.738 79.1926 109.444 79.1926C108.998 79.1926 108.561 79.0967 108.133 78.9051C107.71 78.7134 107.358 78.4214 107.077 78.0292C106.801 77.637 106.662 77.1422 106.662 76.5449V66.3288ZM115.829 79.2995C115.178 79.2995 114.587 79.177 114.057 78.9318C113.527 78.6822 113.105 78.3234 112.793 77.8554C112.481 77.3829 112.325 76.8124 112.325 76.1438C112.325 75.5554 112.441 75.0785 112.673 74.713C112.905 74.343 113.215 74.0533 113.602 73.8438C113.99 73.6343 114.418 73.4783 114.886 73.3758C115.359 73.2688 115.833 73.1841 116.31 73.1217C116.934 73.0415 117.44 72.9813 117.828 72.9412C118.22 72.8966 118.505 72.8231 118.684 72.7206C118.866 72.6181 118.958 72.4398 118.958 72.1857V72.1322C118.958 71.4725 118.777 70.9599 118.416 70.5944C118.06 70.2289 117.518 70.0462 116.792 70.0462C116.038 70.0462 115.448 70.2111 115.02 70.541C114.592 70.8708 114.291 71.2229 114.117 71.5973L112.619 71.0625C112.887 70.4384 113.244 69.9526 113.689 69.6049C114.139 69.2528 114.63 69.0077 115.16 68.8695C115.695 68.7268 116.221 68.6555 116.738 68.6555C117.068 68.6555 117.447 68.6956 117.875 68.7759C118.307 68.8516 118.724 69.0099 119.125 69.2506C119.531 69.4913 119.867 69.8545 120.134 70.3404C120.402 70.8262 120.536 71.477 120.536 72.2927V79.0588H118.958V77.6682H118.878C118.771 77.891 118.592 78.1295 118.343 78.3836C118.093 78.6376 117.761 78.8538 117.346 79.0321C116.932 79.2104 116.426 79.2995 115.829 79.2995ZM116.069 77.8821C116.693 77.8821 117.219 77.7595 117.647 77.5144C118.08 77.2692 118.405 76.9528 118.623 76.565C118.846 76.1772 118.958 75.7694 118.958 75.3415V73.8973C118.891 73.9775 118.744 74.0511 118.516 74.1179C118.294 74.1803 118.035 74.2361 117.741 74.2851C117.451 74.3297 117.168 74.3698 116.892 74.4054C116.62 74.4366 116.399 74.4634 116.23 74.4857C115.82 74.5391 115.437 74.6261 115.08 74.7464C114.728 74.8623 114.443 75.0384 114.224 75.2746C114.01 75.5064 113.903 75.8228 113.903 76.224C113.903 76.7722 114.106 77.1868 114.512 77.4676C114.922 77.7439 115.441 77.8821 116.069 77.8821ZM123.416 79.0588V68.7892H124.993V79.0588H123.416ZM124.218 67.0776C123.91 67.0776 123.645 66.9729 123.422 66.7634C123.204 66.5539 123.095 66.3021 123.095 66.0079C123.095 65.7137 123.204 65.4619 123.422 65.2524C123.645 65.0429 123.91 64.9381 124.218 64.9381C124.525 64.9381 124.788 65.0429 125.007 65.2524C125.23 65.4619 125.341 65.7137 125.341 66.0079C125.341 66.3021 125.23 66.5539 125.007 66.7634C124.788 66.9729 124.525 67.0776 124.218 67.0776ZM129.461 65.366V79.0588H127.883V65.366H129.461ZM140.669 79.2995C140.018 79.2995 139.427 79.177 138.897 78.9318C138.366 78.6822 137.945 78.3234 137.633 77.8554C137.321 77.3829 137.165 76.8124 137.165 76.1438C137.165 75.5554 137.281 75.0785 137.513 74.713C137.745 74.343 138.054 74.0533 138.442 73.8438C138.83 73.6343 139.258 73.4783 139.726 73.3758C140.198 73.2688 140.673 73.1841 141.15 73.1217C141.774 73.0415 142.28 72.9813 142.668 72.9412C143.06 72.8966 143.345 72.8231 143.524 72.7206C143.706 72.6181 143.798 72.4398 143.798 72.1857V72.1322C143.798 71.4725 143.617 70.9599 143.256 70.5944C142.9 70.2289 142.358 70.0462 141.631 70.0462C140.878 70.0462 140.288 70.2111 139.86 70.541C139.432 70.8708 139.131 71.2229 138.957 71.5973L137.459 71.0625C137.727 70.4384 138.083 69.9526 138.529 69.6049C138.979 69.2528 139.47 69.0077 140 68.8695C140.535 68.7268 141.061 68.6555 141.578 68.6555C141.908 68.6555 142.287 68.6956 142.715 68.7759C143.147 68.8516 143.564 69.0099 143.965 69.2506C144.37 69.4913 144.707 69.8545 144.974 70.3404C145.242 70.8262 145.376 71.477 145.376 72.2927V79.0588H143.798V77.6682H143.717C143.61 77.891 143.432 78.1295 143.183 78.3836C142.933 78.6376 142.601 78.8538 142.186 79.0321C141.772 79.2104 141.266 79.2995 140.669 79.2995ZM140.909 77.8821C141.533 77.8821 142.059 77.7595 142.487 77.5144C142.92 77.2692 143.245 76.9528 143.463 76.565C143.686 76.1772 143.798 75.7694 143.798 75.3415V73.8973C143.731 73.9775 143.584 74.0511 143.356 74.1179C143.134 74.1803 142.875 74.2361 142.581 74.2851C142.291 74.3297 142.008 74.3698 141.732 74.4054C141.46 74.4366 141.239 74.4634 141.07 74.4857C140.66 74.5391 140.276 74.6261 139.92 74.7464C139.568 74.8623 139.282 75.0384 139.064 75.2746C138.85 75.5064 138.743 75.8228 138.743 76.224C138.743 76.7722 138.946 77.1868 139.352 77.4676C139.762 77.7439 140.281 77.8821 140.909 77.8821ZM152.428 79.2728C151.465 79.2728 150.636 79.0455 149.94 78.5908C149.245 78.1362 148.71 77.5099 148.336 76.7121C147.961 75.9142 147.774 75.0027 147.774 73.9775C147.774 72.9345 147.966 72.0141 148.349 71.2162C148.737 70.4139 149.276 69.7877 149.967 69.3375C150.662 68.8828 151.474 68.6555 152.401 68.6555C153.123 68.6555 153.774 68.7892 154.353 69.0567C154.933 69.3241 155.407 69.6985 155.777 70.1799C156.147 70.6613 156.377 71.2229 156.466 71.8648H154.888C154.768 71.3968 154.5 70.9822 154.086 70.6212C153.676 70.2557 153.123 70.0729 152.428 70.0729C151.812 70.0729 151.273 70.2334 150.81 70.5543C150.35 70.8708 149.992 71.3188 149.733 71.8982C149.479 72.4732 149.352 73.1485 149.352 73.924C149.352 74.7174 149.477 75.4083 149.726 75.9967C149.98 76.585 150.337 77.0419 150.796 77.3673C151.26 77.6927 151.804 77.8554 152.428 77.8554C152.838 77.8554 153.21 77.7841 153.544 77.6414C153.878 77.4988 154.161 77.2938 154.393 77.0263C154.625 76.7589 154.79 76.438 154.888 76.0635H156.466C156.377 76.6697 156.156 77.2157 155.804 77.7016C155.456 78.183 154.995 78.5663 154.42 78.8516C153.849 79.1324 153.185 79.2728 152.428 79.2728ZM163.239 68.7892V70.1264H157.917V68.7892H163.239ZM159.468 66.3288H161.046V76.117C161.046 76.5628 161.11 76.8971 161.24 77.1199C161.373 77.3383 161.543 77.4854 161.748 77.5612C161.957 77.6325 162.178 77.6682 162.41 77.6682C162.583 77.6682 162.726 77.6592 162.838 77.6414C162.949 77.6191 163.038 77.6013 163.105 77.5879L163.426 79.0054C163.319 79.0455 163.17 79.0856 162.978 79.1257C162.786 79.1703 162.543 79.1926 162.249 79.1926C161.803 79.1926 161.367 79.0967 160.939 78.9051C160.515 78.7134 160.163 78.4214 159.882 78.0292C159.606 77.637 159.468 77.1422 159.468 76.5449V66.3288ZM165.612 79.0588V68.7892H167.19V79.0588H165.612ZM166.415 67.0776C166.107 67.0776 165.842 66.9729 165.619 66.7634C165.4 66.5539 165.291 66.3021 165.291 66.0079C165.291 65.7137 165.4 65.4619 165.619 65.2524C165.842 65.0429 166.107 64.9381 166.415 64.9381C166.722 64.9381 166.985 65.0429 167.203 65.2524C167.426 65.4619 167.538 65.7137 167.538 66.0079C167.538 66.3021 167.426 66.5539 167.203 66.7634C166.985 66.9729 166.722 67.0776 166.415 67.0776ZM178.478 68.7892L174.68 79.0588H173.075L169.278 68.7892H170.989L173.824 76.9728H173.931L176.766 68.7892H178.478ZM180.56 79.0588V68.7892H182.138V79.0588H180.56ZM181.363 67.0776C181.055 67.0776 180.79 66.9729 180.567 66.7634C180.349 66.5539 180.239 66.3021 180.239 66.0079C180.239 65.7137 180.349 65.4619 180.567 65.2524C180.79 65.0429 181.055 64.9381 181.363 64.9381C181.67 64.9381 181.933 65.0429 182.152 65.2524C182.374 65.4619 182.486 65.7137 182.486 66.0079C182.486 66.3021 182.374 66.5539 182.152 66.7634C181.933 66.9729 181.67 67.0776 181.363 67.0776ZM189.494 68.7892V70.1264H184.172V68.7892H189.494ZM185.723 66.3288H187.301V76.117C187.301 76.5628 187.366 76.8971 187.495 77.1199C187.629 77.3383 187.798 77.4854 188.003 77.5612C188.213 77.6325 188.434 77.6682 188.665 77.6682C188.839 77.6682 188.982 77.6592 189.093 77.6414C189.205 77.6191 189.294 77.6013 189.361 77.5879L189.682 79.0054C189.575 79.0455 189.425 79.0856 189.234 79.1257C189.042 79.1703 188.799 79.1926 188.505 79.1926C188.059 79.1926 187.622 79.0967 187.194 78.9051C186.771 78.7134 186.419 78.4214 186.138 78.0292C185.862 77.637 185.723 77.1422 185.723 76.5449V66.3288ZM191.868 79.0588V68.7892H193.446V79.0588H191.868ZM192.67 67.0776C192.363 67.0776 192.097 66.9729 191.875 66.7634C191.656 66.5539 191.547 66.3021 191.547 66.0079C191.547 65.7137 191.656 65.4619 191.875 65.2524C192.097 65.0429 192.363 64.9381 192.67 64.9381C192.978 64.9381 193.241 65.0429 193.459 65.2524C193.682 65.4619 193.793 65.7137 193.793 66.0079C193.793 66.3021 193.682 66.5539 193.459 66.7634C193.241 66.9729 192.978 67.0776 192.67 67.0776ZM200.641 79.2728C199.652 79.2728 198.798 79.0544 198.081 78.6176C197.368 78.1763 196.817 77.5612 196.429 76.7722C196.046 75.9789 195.854 75.0562 195.854 74.0043C195.854 72.9524 196.046 72.0252 196.429 71.2229C196.817 70.4162 197.356 69.7877 198.047 69.3375C198.743 68.8828 199.554 68.6555 200.481 68.6555C201.016 68.6555 201.544 68.7447 202.066 68.923C202.587 69.1013 203.062 69.391 203.49 69.7921C203.918 70.1888 204.259 70.7148 204.513 71.37C204.767 72.0252 204.894 72.832 204.894 73.7903V74.4589H196.978V73.095H203.289C203.289 72.5155 203.173 71.9985 202.941 71.5438C202.714 71.0892 202.389 70.7304 201.965 70.4674C201.546 70.2044 201.052 70.0729 200.481 70.0729C199.853 70.0729 199.309 70.2289 198.85 70.541C198.395 70.8485 198.045 71.2497 197.8 71.7444C197.555 72.2392 197.432 72.7696 197.432 73.3357V74.245C197.432 75.0205 197.566 75.678 197.833 76.2173C198.105 76.7522 198.482 77.16 198.963 77.4408C199.445 77.7172 200.004 77.8554 200.641 77.8554C201.056 77.8554 201.43 77.7974 201.765 77.6815C202.103 77.5612 202.395 77.3829 202.641 77.1467C202.886 76.906 203.075 76.6073 203.209 76.2507L204.733 76.6786C204.573 77.1957 204.303 77.6503 203.924 78.0426C203.545 78.4304 203.077 78.7335 202.52 78.9519C201.963 79.1658 201.337 79.2728 200.641 79.2728ZM214.568 71.0892L213.151 71.4904C213.062 71.2541 212.93 71.0246 212.756 70.8017C212.587 70.5744 212.355 70.3872 212.061 70.2401C211.767 70.093 211.39 70.0195 210.931 70.0195C210.303 70.0195 209.779 70.1643 209.36 70.454C208.945 70.7393 208.738 71.1026 208.738 71.5438C208.738 71.9361 208.881 72.2459 209.166 72.4732C209.451 72.7005 209.897 72.89 210.503 73.0415L212.028 73.4159C212.946 73.6388 213.63 73.9798 214.08 74.4389C214.53 74.8935 214.755 75.4796 214.755 76.1973C214.755 76.7856 214.586 77.3116 214.247 77.7751C213.913 78.2387 213.445 78.6042 212.843 78.8716C212.242 79.1391 211.542 79.2728 210.744 79.2728C209.696 79.2728 208.83 79.0455 208.143 78.5908C207.457 78.1362 207.022 77.472 206.839 76.5984L208.337 76.224C208.48 76.7767 208.749 77.1912 209.146 77.4676C209.547 77.7439 210.071 77.8821 210.717 77.8821C211.453 77.8821 212.037 77.7261 212.469 77.4141C212.906 77.0976 213.124 76.7188 213.124 76.2775C213.124 75.9209 212.999 75.6223 212.75 75.3816C212.5 75.1364 212.117 74.9537 211.6 74.8333L209.888 74.4322C208.948 74.2093 208.257 73.8639 207.815 73.3959C207.379 72.9234 207.16 72.3328 207.16 71.6241C207.16 71.0446 207.323 70.532 207.648 70.0863C207.978 69.6406 208.426 69.2907 208.992 69.0366C209.563 68.7826 210.209 68.6555 210.931 68.6555C211.947 68.6555 212.745 68.8784 213.325 69.3241C213.909 69.7698 214.323 70.3582 214.568 71.0892ZM225.448 79.2995C224.797 79.2995 224.207 79.177 223.676 78.9318C223.146 78.6822 222.725 78.3234 222.413 77.8554C222.101 77.3829 221.945 76.8124 221.945 76.1438C221.945 75.5554 222.06 75.0785 222.292 74.713C222.524 74.343 222.834 74.0533 223.222 73.8438C223.609 73.6343 224.037 73.4783 224.505 73.3758C224.978 73.2688 225.452 73.1841 225.929 73.1217C226.553 73.0415 227.059 72.9813 227.447 72.9412C227.839 72.8966 228.125 72.8231 228.303 72.7206C228.486 72.6181 228.577 72.4398 228.577 72.1857V72.1322C228.577 71.4725 228.396 70.9599 228.035 70.5944C227.679 70.2289 227.137 70.0462 226.411 70.0462C225.657 70.0462 225.067 70.2111 224.639 70.541C224.211 70.8708 223.91 71.2229 223.736 71.5973L222.239 71.0625C222.506 70.4384 222.863 69.9526 223.308 69.6049C223.759 69.2528 224.249 69.0077 224.779 68.8695C225.314 68.7268 225.84 68.6555 226.357 68.6555C226.687 68.6555 227.066 68.6956 227.494 68.7759C227.926 68.8516 228.343 69.0099 228.744 69.2506C229.15 69.4913 229.486 69.8545 229.754 70.3404C230.021 70.8262 230.155 71.477 230.155 72.2927V79.0588H228.577V77.6682H228.497C228.39 77.891 228.211 78.1295 227.962 78.3836C227.712 78.6376 227.38 78.8538 226.966 79.0321C226.551 79.2104 226.045 79.2995 225.448 79.2995ZM225.689 77.8821C226.313 77.8821 226.839 77.7595 227.267 77.5144C227.699 77.2692 228.024 76.9528 228.243 76.565C228.466 76.1772 228.577 75.7694 228.577 75.3415V73.8973C228.51 73.9775 228.363 74.0511 228.136 74.1179C227.913 74.1803 227.654 74.2361 227.36 74.2851C227.07 74.3297 226.787 74.3698 226.511 74.4054C226.239 74.4366 226.018 74.4634 225.849 74.4857C225.439 74.5391 225.056 74.6261 224.699 74.7464C224.347 74.8623 224.062 75.0384 223.843 75.2746C223.629 75.5064 223.522 75.8228 223.522 76.224C223.522 76.7722 223.725 77.1868 224.131 77.4676C224.541 77.7439 225.06 77.8821 225.689 77.8821ZM234.613 72.881V79.0588H233.035V68.7892H234.559V70.3939H234.693C234.934 69.8724 235.299 69.4534 235.789 69.1369C236.28 68.816 236.913 68.6555 237.688 68.6555C238.384 68.6555 238.992 68.7982 239.513 69.0834C240.035 69.3642 240.441 69.7921 240.73 70.3671C241.02 70.9377 241.165 71.6597 241.165 72.5334V79.0588H239.587V72.6403C239.587 71.8336 239.378 71.2051 238.959 70.7549C238.54 70.3003 237.965 70.0729 237.234 70.0729C236.73 70.0729 236.28 70.1821 235.883 70.4006C235.491 70.619 235.181 70.9377 234.954 71.3566C234.726 71.7756 234.613 72.2838 234.613 72.881ZM247.926 79.2728C247.07 79.2728 246.315 79.0566 245.66 78.6243C245.004 78.1874 244.492 77.5723 244.122 76.7789C243.752 75.9811 243.567 75.0384 243.567 73.9508C243.567 72.8721 243.752 71.9361 244.122 71.1427C244.492 70.3493 245.007 69.7364 245.666 69.3041C246.326 68.8717 247.088 68.6555 247.953 68.6555C248.621 68.6555 249.15 68.767 249.537 68.9898C249.93 69.2082 250.228 69.4578 250.433 69.7386C250.643 70.015 250.805 70.2423 250.921 70.4206H251.055V65.366H252.633V79.0588H251.109V77.481H250.921C250.805 77.6682 250.641 77.9044 250.427 78.1897C250.213 78.4705 249.907 78.7223 249.511 78.9452C249.114 79.1636 248.586 79.2728 247.926 79.2728ZM248.14 77.8554C248.773 77.8554 249.308 77.6905 249.745 77.3606C250.181 77.0263 250.514 76.565 250.741 75.9766C250.968 75.3838 251.082 74.6996 251.082 73.924C251.082 73.1574 250.97 72.4866 250.748 71.9116C250.525 71.3321 250.195 70.8819 249.758 70.561C249.321 70.2356 248.782 70.0729 248.14 70.0729C247.471 70.0729 246.914 70.2445 246.469 70.5878C246.027 70.9265 245.695 71.3878 245.472 71.9717C245.254 72.5512 245.145 73.202 245.145 73.924C245.145 74.655 245.256 75.3192 245.479 75.9164C245.706 76.5093 246.041 76.9817 246.482 77.3339C246.928 77.6815 247.48 77.8554 248.14 77.8554ZM265.209 79.2728C264.246 79.2728 263.417 79.0455 262.722 78.5908C262.027 78.1362 261.492 77.5099 261.117 76.7121C260.743 75.9142 260.556 75.0027 260.556 73.9775C260.556 72.9345 260.747 72.0141 261.131 71.2162C261.519 70.4139 262.058 69.7877 262.749 69.3375C263.444 68.8828 264.255 68.6555 265.182 68.6555C265.905 68.6555 266.555 68.7892 267.135 69.0567C267.714 69.3241 268.189 69.6985 268.559 70.1799C268.929 70.6613 269.158 71.2229 269.248 71.8648H267.67C267.549 71.3968 267.282 70.9822 266.867 70.6212C266.457 70.2557 265.905 70.0729 265.209 70.0729C264.594 70.0729 264.055 70.2334 263.591 70.5543C263.132 70.8708 262.773 71.3188 262.515 71.8982C262.261 72.4732 262.134 73.1485 262.134 73.924C262.134 74.7174 262.258 75.4083 262.508 75.9967C262.762 76.585 263.119 77.0419 263.578 77.3673C264.041 77.6927 264.585 77.8554 265.209 77.8554C265.619 77.8554 265.991 77.7841 266.326 77.6414C266.66 77.4988 266.943 77.2938 267.175 77.0263C267.407 76.7589 267.572 76.438 267.67 76.0635H269.248C269.158 76.6697 268.938 77.2157 268.586 77.7016C268.238 78.183 267.777 78.5663 267.202 78.8516C266.631 79.1324 265.967 79.2728 265.209 79.2728ZM275.726 79.2728C274.799 79.2728 273.986 79.0522 273.286 78.6109C272.59 78.1696 272.047 77.5523 271.654 76.7589C271.267 75.9655 271.073 75.0384 271.073 73.9775C271.073 72.9078 271.267 71.974 271.654 71.1761C272.047 70.3783 272.59 69.7587 273.286 69.3174C273.986 68.8762 274.799 68.6555 275.726 68.6555C276.653 68.6555 277.465 68.8762 278.16 69.3174C278.86 69.7587 279.403 70.3783 279.791 71.1761C280.183 71.974 280.38 72.9078 280.38 73.9775C280.38 75.0384 280.183 75.9655 279.791 76.7589C279.403 77.5523 278.86 78.1696 278.16 78.6109C277.465 79.0522 276.653 79.2728 275.726 79.2728ZM275.726 77.8554C276.43 77.8554 277.01 77.6748 277.465 77.3138C277.919 76.9528 278.256 76.4781 278.474 75.8897C278.692 75.3013 278.802 74.664 278.802 73.9775C278.802 73.2911 278.692 72.6515 278.474 72.0587C278.256 71.4658 277.919 70.9867 277.465 70.6212C277.01 70.2557 276.43 70.0729 275.726 70.0729C275.022 70.0729 274.442 70.2557 273.988 70.6212C273.533 70.9867 273.197 71.4658 272.978 72.0587C272.76 72.6515 272.651 73.2911 272.651 73.9775C272.651 74.664 272.76 75.3013 272.978 75.8897C273.197 76.4781 273.533 76.9528 273.988 77.3138C274.442 77.6748 275.022 77.8554 275.726 77.8554ZM282.788 79.0588V68.7892H284.313V70.3939H284.446C284.66 69.8456 285.006 69.42 285.483 69.1169C285.96 68.8093 286.532 68.6555 287.201 68.6555C287.878 68.6555 288.442 68.8093 288.892 69.1169C289.347 69.42 289.701 69.8456 289.956 70.3939H290.062C290.325 69.8635 290.72 69.4422 291.246 69.1302C291.772 68.8138 292.403 68.6555 293.138 68.6555C294.056 68.6555 294.807 68.943 295.391 69.518C295.975 70.0885 296.267 70.9778 296.267 72.1857V79.0588H294.689V72.1857C294.689 71.428 294.482 70.8864 294.067 70.561C293.653 70.2356 293.165 70.0729 292.603 70.0729C291.881 70.0729 291.322 70.2914 290.925 70.7282C290.528 71.1605 290.33 71.7088 290.33 72.3729V79.0588H288.725V72.0252C288.725 71.4413 288.536 70.9711 288.157 70.6145C287.778 70.2535 287.29 70.0729 286.693 70.0729C286.283 70.0729 285.899 70.1821 285.543 70.4006C285.191 70.619 284.905 70.9221 284.687 71.3098C284.473 71.6932 284.366 72.1367 284.366 72.6403V79.0588H282.788ZM299.152 79.0588V68.7892H300.676V70.3939H300.81C301.024 69.8456 301.37 69.42 301.846 69.1169C302.323 68.8093 302.896 68.6555 303.565 68.6555C304.242 68.6555 304.806 68.8093 305.256 69.1169C305.711 69.42 306.065 69.8456 306.319 70.3939H306.426C306.689 69.8635 307.084 69.4422 307.61 69.1302C308.136 68.8138 308.766 68.6555 309.502 68.6555C310.42 68.6555 311.171 68.943 311.755 69.518C312.339 70.0885 312.631 70.9778 312.631 72.1857V79.0588H311.053V72.1857C311.053 71.428 310.846 70.8864 310.431 70.561C310.017 70.2356 309.529 70.0729 308.967 70.0729C308.245 70.0729 307.685 70.2914 307.289 70.7282C306.892 71.1605 306.694 71.7088 306.694 72.3729V79.0588H305.089V72.0252C305.089 71.4413 304.9 70.9711 304.521 70.6145C304.142 70.2535 303.654 70.0729 303.057 70.0729C302.647 70.0729 302.263 70.1821 301.907 70.4006C301.554 70.619 301.269 70.9221 301.051 71.3098C300.837 71.6932 300.73 72.1367 300.73 72.6403V79.0588H299.152ZM319.822 79.2728C318.832 79.2728 317.978 79.0544 317.261 78.6176C316.548 78.1763 315.997 77.5612 315.609 76.7722C315.226 75.9789 315.034 75.0562 315.034 74.0043C315.034 72.9524 315.226 72.0252 315.609 71.2229C315.997 70.4162 316.537 69.7877 317.227 69.3375C317.923 68.8828 318.734 68.6555 319.661 68.6555C320.196 68.6555 320.724 68.7447 321.246 68.923C321.767 69.1013 322.242 69.391 322.67 69.7921C323.098 70.1888 323.439 70.7148 323.693 71.37C323.947 72.0252 324.074 72.832 324.074 73.7903V74.4589H316.158V73.095H322.469C322.469 72.5155 322.353 71.9985 322.122 71.5438C321.894 71.0892 321.569 70.7304 321.145 70.4674C320.726 70.2044 320.232 70.0729 319.661 70.0729C319.033 70.0729 318.489 70.2289 318.03 70.541C317.575 70.8485 317.225 71.2497 316.98 71.7444C316.735 72.2392 316.612 72.7696 316.612 73.3357V74.245C316.612 75.0205 316.746 75.678 317.013 76.2173C317.285 76.7522 317.662 77.16 318.143 77.4408C318.625 77.7172 319.184 77.8554 319.822 77.8554C320.236 77.8554 320.611 77.7974 320.945 77.6815C321.284 77.5612 321.576 77.3829 321.821 77.1467C322.066 76.906 322.255 76.6073 322.389 76.2507L323.913 76.6786C323.753 77.1957 323.483 77.6503 323.104 78.0426C322.726 78.4304 322.257 78.7335 321.7 78.9519C321.143 79.1658 320.517 79.2728 319.822 79.2728ZM328.052 72.881V79.0588H326.474V68.7892H327.998V70.3939H328.132C328.373 69.8724 328.738 69.4534 329.229 69.1369C329.719 68.816 330.352 68.6555 331.127 68.6555C331.823 68.6555 332.431 68.7982 332.953 69.0834C333.474 69.3642 333.88 69.7921 334.17 70.3671C334.459 70.9377 334.604 71.6597 334.604 72.5334V79.0588H333.026V72.6403C333.026 71.8336 332.817 71.2051 332.398 70.7549C331.979 70.3003 331.404 70.0729 330.673 70.0729C330.169 70.0729 329.719 70.1821 329.322 70.4006C328.93 70.619 328.62 70.9377 328.393 71.3566C328.166 71.7756 328.052 72.2838 328.052 72.881ZM341.954 68.7892V70.1264H336.632V68.7892H341.954ZM338.183 66.3288H339.761V76.117C339.761 76.5628 339.825 76.8971 339.955 77.1199C340.088 77.3383 340.258 77.4854 340.463 77.5612C340.672 77.6325 340.893 77.6682 341.125 77.6682C341.298 77.6682 341.441 77.6592 341.553 77.6414C341.664 77.6191 341.753 77.6013 341.82 77.5879L342.141 79.0054C342.034 79.0455 341.885 79.0856 341.693 79.1257C341.501 79.1703 341.258 79.1926 340.964 79.1926C340.518 79.1926 340.082 79.0967 339.654 78.9051C339.23 78.7134 338.878 78.4214 338.597 78.0292C338.321 77.637 338.183 77.1422 338.183 76.5449V66.3288ZM351.418 71.0892L350 71.4904C349.911 71.2541 349.78 71.0246 349.606 70.8017C349.436 70.5744 349.205 70.3872 348.91 70.2401C348.616 70.093 348.24 70.0195 347.78 70.0195C347.152 70.0195 346.628 70.1643 346.209 70.454C345.795 70.7393 345.587 71.1026 345.587 71.5438C345.587 71.9361 345.73 72.2459 346.015 72.4732C346.301 72.7005 346.746 72.89 347.353 73.0415L348.877 73.4159C349.795 73.6388 350.479 73.9798 350.93 74.4389C351.38 74.8935 351.605 75.4796 351.605 76.1973C351.605 76.7856 351.435 77.3116 351.097 77.7751C350.762 78.2387 350.294 78.6042 349.693 78.8716C349.091 79.1391 348.391 79.2728 347.593 79.2728C346.546 79.2728 345.679 79.0455 344.992 78.5908C344.306 78.1362 343.871 77.472 343.689 76.5984L345.186 76.224C345.329 76.7767 345.599 77.1912 345.995 77.4676C346.396 77.7439 346.92 77.8821 347.567 77.8821C348.302 77.8821 348.886 77.7261 349.318 77.4141C349.755 77.0976 349.973 76.7188 349.973 76.2775C349.973 75.9209 349.849 75.6223 349.599 75.3816C349.349 75.1364 348.966 74.9537 348.449 74.8333L346.737 74.4322C345.797 74.2093 345.106 73.8639 344.665 73.3959C344.228 72.9234 344.01 72.3328 344.01 71.6241C344.01 71.0446 344.172 70.532 344.498 70.0863C344.828 69.6406 345.275 69.2907 345.842 69.0366C346.412 68.7826 347.058 68.6555 347.78 68.6555C348.797 68.6555 349.595 68.8784 350.174 69.3241C350.758 69.7698 351.172 70.3582 351.418 71.0892ZM360.051 79.0588H358.313L363.34 65.366H365.052L370.08 79.0588H368.341L364.25 67.5323H364.143L360.051 79.0588ZM360.693 73.7101H367.7V75.181H360.693V73.7101ZM372.213 79.0588V65.366H376.839C377.913 65.366 378.792 65.5599 379.473 65.9477C380.16 66.3311 380.668 66.8503 380.998 67.5055C381.328 68.1608 381.493 68.8918 381.493 69.6985C381.493 70.5053 381.328 71.2385 380.998 71.8982C380.672 72.5579 380.169 73.0838 379.487 73.4761C378.805 73.8639 377.931 74.0578 376.866 74.0578H373.55V72.5869H376.812C377.548 72.5869 378.139 72.4598 378.584 72.2058C379.03 71.9517 379.353 71.6085 379.554 71.1761C379.759 70.7393 379.861 70.2468 379.861 69.6985C379.861 69.1503 379.759 68.66 379.554 68.2276C379.353 67.7953 379.028 67.4565 378.578 67.2114C378.127 66.9618 377.53 66.837 376.786 66.837H373.871V79.0588H372.213ZM385.822 65.366V79.0588H384.164V65.366H385.822ZM35.7714 108.273C34.7819 108.273 33.9283 108.054 33.2107 107.618C32.4975 107.176 31.947 106.561 31.5592 105.772C31.1759 104.979 30.9843 104.056 30.9843 103.004C30.9843 101.952 31.1759 101.025 31.5592 100.223C31.947 99.4162 32.4864 98.7877 33.1772 98.3375C33.8726 97.8828 34.6838 97.6555 35.6109 97.6555C36.1458 97.6555 36.674 97.7447 37.1955 97.923C37.717 98.1013 38.1917 98.391 38.6196 98.7921C39.0475 99.1888 39.3885 99.7148 39.6425 100.37C39.8966 101.025 40.0236 101.832 40.0236 102.79V103.459H32.1075V102.095H38.419C38.419 101.516 38.3031 100.998 38.0713 100.544C37.844 100.089 37.5186 99.7304 37.0952 99.4674C36.6762 99.2044 36.1815 99.0729 35.6109 99.0729C34.9824 99.0729 34.4387 99.2289 33.9796 99.541C33.5249 99.8485 33.175 100.25 32.9299 100.744C32.6847 101.239 32.5621 101.77 32.5621 102.336V103.245C32.5621 104.021 32.6959 104.678 32.9633 105.217C33.2352 105.752 33.6118 106.16 34.0932 106.441C34.5746 106.717 35.134 106.855 35.7714 106.855C36.1859 106.855 36.5603 106.797 36.8946 106.682C37.2334 106.561 37.5253 106.383 37.7705 106.147C38.0156 105.906 38.2051 105.607 38.3388 105.251L39.8632 105.679C39.7027 106.196 39.433 106.65 39.0542 107.043C38.6753 107.43 38.2073 107.733 37.6501 107.952C37.093 108.166 36.4667 108.273 35.7714 108.273ZM44.0018 101.881V108.059H42.4239V97.7892H43.9483V99.3939H44.082C44.3227 98.8724 44.6882 98.4534 45.1785 98.1369C45.6688 97.816 46.3017 97.6555 47.0773 97.6555C47.7726 97.6555 48.3811 97.7982 48.9026 98.0834C49.4241 98.3642 49.8297 98.7921 50.1194 99.3671C50.4091 99.9377 50.554 100.66 50.554 101.533V108.059H48.9761V101.64C48.9761 100.834 48.7666 100.205 48.3476 99.7549C47.9286 99.3003 47.3537 99.0729 46.6227 99.0729C46.119 99.0729 45.6688 99.1821 45.2721 99.4006C44.8799 99.619 44.5701 99.9377 44.3428 100.357C44.1154 100.776 44.0018 101.284 44.0018 101.881ZM57.3151 108.273C56.4593 108.273 55.7038 108.057 55.0486 107.624C54.3934 107.187 53.8808 106.572 53.5108 105.779C53.1409 104.981 52.9559 104.038 52.9559 102.951C52.9559 101.872 53.1409 100.936 53.5108 100.143C53.8808 99.3493 54.3956 98.7364 55.0553 98.3041C55.715 97.8717 56.4772 97.6555 57.3419 97.6555C58.0105 97.6555 58.5387 97.767 58.9264 97.9898C59.3187 98.2082 59.6173 98.4578 59.8224 98.7386C60.0319 99.015 60.1945 99.2423 60.3104 99.4206H60.4442V94.366H62.022V108.059H60.4976V106.481H60.3104C60.1945 106.668 60.0296 106.904 59.8157 107.19C59.6017 107.47 59.2964 107.722 58.8997 107.945C58.503 108.164 57.9748 108.273 57.3151 108.273ZM57.5291 106.855C58.162 106.855 58.6969 106.69 59.1337 106.361C59.5705 106.026 59.9026 105.565 60.1299 104.977C60.3572 104.384 60.4709 103.7 60.4709 102.924C60.4709 102.157 60.3595 101.487 60.1366 100.912C59.9137 100.332 59.5839 99.8819 59.1471 99.561C58.7103 99.2356 58.1709 99.0729 57.5291 99.0729C56.8605 99.0729 56.3033 99.2445 55.8576 99.5878C55.4163 99.9265 55.0843 100.388 54.8614 100.972C54.643 101.551 54.5338 102.202 54.5338 102.924C54.5338 103.655 54.6452 104.319 54.8681 104.916C55.0954 105.509 55.4297 105.982 55.871 106.334C56.3167 106.682 56.8694 106.855 57.5291 106.855ZM65.131 111.91V97.7892H66.6554V99.4206H66.8426C66.9585 99.2423 67.1189 99.015 67.324 98.7386C67.5335 98.4578 67.8321 98.2082 68.2199 97.9898C68.6121 97.767 69.1426 97.6555 69.8111 97.6555C70.6759 97.6555 71.4381 97.8717 72.0977 98.3041C72.7574 98.7364 73.2722 99.3493 73.6422 100.143C74.0121 100.936 74.1971 101.872 74.1971 102.951C74.1971 104.038 74.0121 104.981 73.6422 105.779C73.2722 106.572 72.7596 107.187 72.1044 107.624C71.4492 108.057 70.6937 108.273 69.8379 108.273C69.1782 108.273 68.65 108.164 68.2533 107.945C67.8566 107.722 67.5513 107.47 67.3373 107.19C67.1234 106.904 66.9585 106.668 66.8426 106.481H66.7089V111.91H65.131ZM66.6821 102.924C66.6821 103.7 66.7958 104.384 67.0231 104.977C67.2504 105.565 67.5825 106.026 68.0193 106.361C68.4561 106.69 68.991 106.855 69.6239 106.855C70.2836 106.855 70.8341 106.682 71.2754 106.334C71.7211 105.982 72.0554 105.509 72.2783 104.916C72.5056 104.319 72.6192 103.655 72.6192 102.924C72.6192 102.202 72.5078 101.551 72.2849 100.972C72.0665 100.388 71.7345 99.9265 71.2887 99.5878C70.8475 99.2445 70.2925 99.0729 69.6239 99.0729C68.9821 99.0729 68.4428 99.2356 68.0059 99.561C67.5691 99.8819 67.2393 100.332 67.0164 100.912C66.7936 101.487 66.6821 102.157 66.6821 102.924ZM80.7761 108.273C79.849 108.273 79.0355 108.052 78.3357 107.611C77.6404 107.17 77.0966 106.552 76.7043 105.759C76.3166 104.965 76.1227 104.038 76.1227 102.978C76.1227 101.908 76.3166 100.974 76.7043 100.176C77.0966 99.3783 77.6404 98.7587 78.3357 98.3174C79.0355 97.8762 79.849 97.6555 80.7761 97.6555C81.7032 97.6555 82.5144 97.8762 83.2098 98.3174C83.9095 98.7587 84.4533 99.3783 84.8411 100.176C85.2334 100.974 85.4295 101.908 85.4295 102.978C85.4295 104.038 85.2334 104.965 84.8411 105.759C84.4533 106.552 83.9095 107.17 83.2098 107.611C82.5144 108.052 81.7032 108.273 80.7761 108.273ZM80.7761 106.855C81.4803 106.855 82.0598 106.675 82.5144 106.314C82.9691 105.953 83.3056 105.478 83.524 104.89C83.7424 104.301 83.8516 103.664 83.8516 102.978C83.8516 102.291 83.7424 101.651 83.524 101.059C83.3056 100.466 82.9691 99.9867 82.5144 99.6212C82.0598 99.2557 81.4803 99.0729 80.7761 99.0729C80.0718 99.0729 79.4924 99.2557 79.0377 99.6212C78.5831 99.9867 78.2466 100.466 78.0282 101.059C77.8097 101.651 77.7005 102.291 77.7005 102.978C77.7005 103.664 77.8097 104.301 78.0282 104.89C78.2466 105.478 78.5831 105.953 79.0377 106.314C79.4924 106.675 80.0718 106.855 80.7761 106.855ZM87.8381 108.059V97.7892H89.416V108.059H87.8381ZM88.6404 96.0776C88.3328 96.0776 88.0676 95.9729 87.8448 95.7634C87.6264 95.5539 87.5172 95.3021 87.5172 95.0079C87.5172 94.7137 87.6264 94.4619 87.8448 94.2524C88.0676 94.0429 88.3328 93.9381 88.6404 93.9381C88.948 93.9381 89.2109 94.0429 89.4293 94.2524C89.6522 94.4619 89.7636 94.7137 89.7636 95.0079C89.7636 95.3021 89.6522 95.5539 89.4293 95.7634C89.2109 95.9729 88.948 96.0776 88.6404 96.0776ZM93.8838 101.881V108.059H92.306V97.7892H93.8304V99.3939H93.9641C94.2048 98.8724 94.5703 98.4534 95.0606 98.1369C95.5509 97.816 96.1838 97.6555 96.9594 97.6555C97.6547 97.6555 98.2631 97.7982 98.7846 98.0834C99.3061 98.3642 99.7117 98.7921 100.001 99.3671C100.291 99.9377 100.436 100.66 100.436 101.533V108.059H98.8582V101.64C98.8582 100.834 98.6487 100.205 98.2297 99.7549C97.8107 99.3003 97.2357 99.0729 96.5047 99.0729C96.0011 99.0729 95.5509 99.1821 95.1542 99.4006C94.7619 99.619 94.4521 99.9377 94.2248 100.357C93.9975 100.776 93.8838 101.284 93.8838 101.881ZM107.786 97.7892V99.1264H102.464V97.7892H107.786ZM104.015 95.3288H105.593V105.117C105.593 105.563 105.657 105.897 105.786 106.12C105.92 106.338 106.09 106.485 106.295 106.561C106.504 106.633 106.725 106.668 106.957 106.668C107.13 106.668 107.273 106.659 107.384 106.641C107.496 106.619 107.585 106.601 107.652 106.588L107.973 108.005C107.866 108.045 107.716 108.086 107.525 108.126C107.333 108.17 107.09 108.193 106.796 108.193C106.35 108.193 105.914 108.097 105.486 107.905C105.062 107.713 104.71 107.421 104.429 107.029C104.153 106.637 104.015 106.142 104.015 105.545V95.3288ZM117.25 100.089L115.832 100.49C115.743 100.254 115.611 100.025 115.438 99.8017C115.268 99.5744 115.036 99.3872 114.742 99.2401C114.448 99.093 114.071 99.0195 113.612 99.0195C112.984 99.0195 112.46 99.1643 112.041 99.454C111.627 99.7393 111.419 100.103 111.419 100.544C111.419 100.936 111.562 101.246 111.847 101.473C112.133 101.701 112.578 101.89 113.184 102.041L114.709 102.416C115.627 102.639 116.311 102.98 116.761 103.439C117.212 103.894 117.437 104.48 117.437 105.197C117.437 105.786 117.267 106.312 116.929 106.775C116.594 107.239 116.126 107.604 115.525 107.872C114.923 108.139 114.223 108.273 113.425 108.273C112.378 108.273 111.511 108.045 110.824 107.591C110.138 107.136 109.703 106.472 109.521 105.598L111.018 105.224C111.161 105.777 111.431 106.191 111.827 106.468C112.228 106.744 112.752 106.882 113.398 106.882C114.134 106.882 114.718 106.726 115.15 106.414C115.587 106.098 115.805 105.719 115.805 105.277C115.805 104.921 115.681 104.622 115.431 104.382C115.181 104.136 114.798 103.954 114.281 103.833L112.569 103.432C111.629 103.209 110.938 102.864 110.497 102.396C110.06 101.923 109.841 101.333 109.841 100.624C109.841 100.045 110.004 99.532 110.33 99.0863C110.659 98.6406 111.107 98.2907 111.673 98.0366C112.244 97.7826 112.89 97.6555 113.612 97.6555C114.629 97.6555 115.426 97.8784 116.006 98.3241C116.59 98.7698 117.004 99.3582 117.25 100.089ZM122.165 106.187L122.058 106.909C121.983 107.417 121.867 107.961 121.711 108.54C121.559 109.12 121.401 109.666 121.236 110.178C121.071 110.691 120.935 111.099 120.828 111.402H119.625C119.683 111.117 119.758 110.74 119.852 110.272C119.946 109.804 120.039 109.28 120.133 108.701C120.231 108.126 120.311 107.537 120.374 106.936L120.454 106.187H122.165ZM133.406 108.3C132.755 108.3 132.165 108.177 131.634 107.932C131.104 107.682 130.683 107.323 130.371 106.855C130.059 106.383 129.903 105.812 129.903 105.144C129.903 104.555 130.019 104.078 130.25 103.713C130.482 103.343 130.792 103.053 131.18 102.844C131.567 102.634 131.995 102.478 132.463 102.376C132.936 102.269 133.411 102.184 133.887 102.122C134.511 102.041 135.017 101.981 135.405 101.941C135.797 101.897 136.083 101.823 136.261 101.721C136.444 101.618 136.535 101.44 136.535 101.186V101.132C136.535 100.473 136.355 99.9599 135.994 99.5944C135.637 99.2289 135.095 99.0462 134.369 99.0462C133.616 99.0462 133.025 99.2111 132.597 99.541C132.169 99.8708 131.868 100.223 131.694 100.597L130.197 100.062C130.464 99.4384 130.821 98.9526 131.267 98.6049C131.717 98.2528 132.207 98.0077 132.737 97.8695C133.272 97.7268 133.798 97.6555 134.315 97.6555C134.645 97.6555 135.024 97.6956 135.452 97.7759C135.884 97.8516 136.301 98.0099 136.702 98.2506C137.108 98.4913 137.444 98.8545 137.712 99.3404C137.979 99.8262 138.113 100.477 138.113 101.293V108.059H136.535V106.668H136.455C136.348 106.891 136.17 107.129 135.92 107.384C135.67 107.638 135.338 107.854 134.924 108.032C134.509 108.21 134.003 108.3 133.406 108.3ZM133.647 106.882C134.271 106.882 134.797 106.76 135.225 106.514C135.657 106.269 135.982 105.953 136.201 105.565C136.424 105.177 136.535 104.769 136.535 104.341V102.897C136.468 102.978 136.321 103.051 136.094 103.118C135.871 103.18 135.612 103.236 135.318 103.285C135.029 103.33 134.745 103.37 134.469 103.405C134.197 103.437 133.977 103.463 133.807 103.486C133.397 103.539 133.014 103.626 132.657 103.746C132.305 103.862 132.02 104.038 131.801 104.275C131.587 104.506 131.481 104.823 131.481 105.224C131.481 105.772 131.683 106.187 132.089 106.468C132.499 106.744 133.018 106.882 133.647 106.882ZM142.571 101.881V108.059H140.993V97.7892H142.517V99.3939H142.651C142.892 98.8724 143.257 98.4534 143.748 98.1369C144.238 97.816 144.871 97.6555 145.646 97.6555C146.342 97.6555 146.95 97.7982 147.472 98.0834C147.993 98.3642 148.399 98.7921 148.688 99.3671C148.978 99.9377 149.123 100.66 149.123 101.533V108.059H147.545V101.64C147.545 100.834 147.336 100.205 146.917 99.7549C146.498 99.3003 145.923 99.0729 145.192 99.0729C144.688 99.0729 144.238 99.1821 143.841 99.4006C143.449 99.619 143.139 99.9377 142.912 100.357C142.684 100.776 142.571 101.284 142.571 101.881ZM155.884 108.273C155.028 108.273 154.273 108.057 153.618 107.624C152.962 107.187 152.45 106.572 152.08 105.779C151.71 104.981 151.525 104.038 151.525 102.951C151.525 101.872 151.71 100.936 152.08 100.143C152.45 99.3493 152.965 98.7364 153.624 98.3041C154.284 97.8717 155.046 97.6555 155.911 97.6555C156.58 97.6555 157.108 97.767 157.495 97.9898C157.888 98.2082 158.186 98.4578 158.391 98.7386C158.601 99.015 158.764 99.2423 158.879 99.4206H159.013V94.366H160.591V108.059H159.067V106.481H158.879C158.764 106.668 158.599 106.904 158.385 107.19C158.171 107.47 157.865 107.722 157.469 107.945C157.072 108.164 156.544 108.273 155.884 108.273ZM156.098 106.855C156.731 106.855 157.266 106.69 157.703 106.361C158.14 106.026 158.472 105.565 158.699 104.977C158.926 104.384 159.04 103.7 159.04 102.924C159.04 102.157 158.928 101.487 158.706 100.912C158.483 100.332 158.153 99.8819 157.716 99.561C157.279 99.2356 156.74 99.0729 156.098 99.0729C155.43 99.0729 154.872 99.2445 154.427 99.5878C153.985 99.9265 153.653 100.388 153.43 100.972C153.212 101.551 153.103 102.202 153.103 102.924C153.103 103.655 153.214 104.319 153.437 104.916C153.664 105.509 153.999 105.982 154.44 106.334C154.886 106.682 155.438 106.855 156.098 106.855ZM172.873 108.273C172.017 108.273 171.262 108.057 170.607 107.624C169.951 107.187 169.439 106.572 169.069 105.779C168.699 104.981 168.514 104.038 168.514 102.951C168.514 101.872 168.699 100.936 169.069 100.143C169.439 99.3493 169.954 98.7364 170.613 98.3041C171.273 97.8717 172.035 97.6555 172.9 97.6555C173.568 97.6555 174.097 97.767 174.484 97.9898C174.877 98.2082 175.175 98.4578 175.38 98.7386C175.59 99.015 175.753 99.2423 175.868 99.4206H176.002V94.366H177.58V108.059H176.056V106.481H175.868C175.753 106.668 175.588 106.904 175.374 107.19C175.16 107.47 174.854 107.722 174.458 107.945C174.061 108.164 173.533 108.273 172.873 108.273ZM173.087 106.855C173.72 106.855 174.255 106.69 174.692 106.361C175.129 106.026 175.461 105.565 175.688 104.977C175.915 104.384 176.029 103.7 176.029 102.924C176.029 102.157 175.917 101.487 175.695 100.912C175.472 100.332 175.142 99.8819 174.705 99.561C174.268 99.2356 173.729 99.0729 173.087 99.0729C172.418 99.0729 171.861 99.2445 171.416 99.5878C170.974 99.9265 170.642 100.388 170.419 100.972C170.201 101.551 170.092 102.202 170.092 102.924C170.092 103.655 170.203 104.319 170.426 104.916C170.653 105.509 170.988 105.982 171.429 106.334C171.875 106.682 172.427 106.855 173.087 106.855ZM184.861 108.273C183.934 108.273 183.12 108.052 182.421 107.611C181.725 107.17 181.182 106.552 180.789 105.759C180.401 104.965 180.208 104.038 180.208 102.978C180.208 101.908 180.401 100.974 180.789 100.176C181.182 99.3783 181.725 98.7587 182.421 98.3174C183.12 97.8762 183.934 97.6555 184.861 97.6555C185.788 97.6555 186.599 97.8762 187.295 98.3174C187.994 98.7587 188.538 99.3783 188.926 100.176C189.318 100.974 189.514 101.908 189.514 102.978C189.514 104.038 189.318 104.965 188.926 105.759C188.538 106.552 187.994 107.17 187.295 107.611C186.599 108.052 185.788 108.273 184.861 108.273ZM184.861 106.855C185.565 106.855 186.145 106.675 186.599 106.314C187.054 105.953 187.391 105.478 187.609 104.89C187.827 104.301 187.937 103.664 187.937 102.978C187.937 102.291 187.827 101.651 187.609 101.059C187.391 100.466 187.054 99.9867 186.599 99.6212C186.145 99.2557 185.565 99.0729 184.861 99.0729C184.157 99.0729 183.577 99.2557 183.123 99.6212C182.668 99.9867 182.331 100.466 182.113 101.059C181.895 101.651 181.785 102.291 181.785 102.978C181.785 103.664 181.895 104.301 182.113 104.89C182.331 105.478 182.668 105.953 183.123 106.314C183.577 106.675 184.157 106.855 184.861 106.855ZM196.095 108.273C195.132 108.273 194.303 108.045 193.608 107.591C192.913 107.136 192.378 106.51 192.003 105.712C191.629 104.914 191.442 104.003 191.442 102.978C191.442 101.935 191.633 101.014 192.017 100.216C192.404 99.4139 192.944 98.7877 193.635 98.3375C194.33 97.8828 195.141 97.6555 196.068 97.6555C196.79 97.6555 197.441 97.7892 198.021 98.0567C198.6 98.3241 199.075 98.6985 199.445 99.1799C199.815 99.6613 200.044 100.223 200.133 100.865H198.555C198.435 100.397 198.168 99.9822 197.753 99.6212C197.343 99.2557 196.79 99.0729 196.095 99.0729C195.48 99.0729 194.941 99.2334 194.477 99.5543C194.018 99.8708 193.659 100.319 193.401 100.898C193.147 101.473 193.02 102.148 193.02 102.924C193.02 103.717 193.144 104.408 193.394 104.997C193.648 105.585 194.005 106.042 194.464 106.367C194.927 106.693 195.471 106.855 196.095 106.855C196.505 106.855 196.877 106.784 197.212 106.641C197.546 106.499 197.829 106.294 198.061 106.026C198.292 105.759 198.457 105.438 198.555 105.064H200.133C200.044 105.67 199.824 106.216 199.471 106.702C199.124 107.183 198.662 107.566 198.087 107.852C197.517 108.132 196.853 108.273 196.095 108.273ZM208.912 103.86V97.7892H210.49V108.059H208.912V106.32H208.805C208.564 106.842 208.19 107.285 207.682 107.651C207.174 108.012 206.532 108.193 205.756 108.193C205.114 108.193 204.544 108.052 204.045 107.771C203.545 107.486 203.153 107.058 202.868 106.488C202.583 105.913 202.44 105.188 202.44 104.315V97.7892H204.018V104.208C204.018 104.957 204.227 105.554 204.646 106C205.07 106.445 205.609 106.668 206.264 106.668C206.657 106.668 207.056 106.568 207.461 106.367C207.871 106.167 208.214 105.859 208.491 105.445C208.772 105.03 208.912 104.502 208.912 103.86ZM213.38 108.059V97.7892H214.904V99.3939H215.038C215.252 98.8456 215.597 98.42 216.074 98.1169C216.551 97.8093 217.124 97.6555 217.793 97.6555C218.47 97.6555 219.034 97.8093 219.484 98.1169C219.939 98.42 220.293 98.8456 220.547 99.3939H220.654C220.917 98.8635 221.312 98.4422 221.838 98.1302C222.364 97.8138 222.994 97.6555 223.73 97.6555C224.648 97.6555 225.399 97.943 225.983 98.518C226.567 99.0885 226.859 99.9778 226.859 101.186V108.059H225.281V101.186C225.281 100.428 225.074 99.8864 224.659 99.561C224.244 99.2356 223.756 99.0729 223.195 99.0729C222.473 99.0729 221.913 99.2914 221.517 99.7282C221.12 100.161 220.922 100.709 220.922 101.373V108.059H219.317V101.025C219.317 100.441 219.128 99.9711 218.749 99.6145C218.37 99.2535 217.882 99.0729 217.284 99.0729C216.874 99.0729 216.491 99.1821 216.134 99.4006C215.782 99.619 215.497 99.9221 215.279 100.31C215.065 100.693 214.958 101.137 214.958 101.64V108.059H213.38ZM234.049 108.273C233.06 108.273 232.206 108.054 231.489 107.618C230.776 107.176 230.225 106.561 229.837 105.772C229.454 104.979 229.262 104.056 229.262 103.004C229.262 101.952 229.454 101.025 229.837 100.223C230.225 99.4162 230.764 98.7877 231.455 98.3375C232.151 97.8828 232.962 97.6555 233.889 97.6555C234.424 97.6555 234.952 97.7447 235.474 97.923C235.995 98.1013 236.47 98.391 236.898 98.7921C237.326 99.1888 237.667 99.7148 237.921 100.37C238.175 101.025 238.302 101.832 238.302 102.79V103.459H230.386V102.095H236.697C236.697 101.516 236.581 100.998 236.349 100.544C236.122 100.089 235.797 99.7304 235.373 99.4674C234.954 99.2044 234.459 99.0729 233.889 99.0729C233.26 99.0729 232.717 99.2289 232.258 99.541C231.803 99.8485 231.453 100.25 231.208 100.744C230.963 101.239 230.84 101.77 230.84 102.336V103.245C230.84 104.021 230.974 104.678 231.241 105.217C231.513 105.752 231.89 106.16 232.371 106.441C232.853 106.717 233.412 106.855 234.049 106.855C234.464 106.855 234.838 106.797 235.173 106.682C235.511 106.561 235.803 106.383 236.049 106.147C236.294 105.906 236.483 105.607 236.617 105.251L238.141 105.679C237.981 106.196 237.711 106.65 237.332 107.043C236.953 107.43 236.485 107.733 235.928 107.952C235.371 108.166 234.745 108.273 234.049 108.273ZM242.28 101.881V108.059H240.702V97.7892H242.226V99.3939H242.36C242.601 98.8724 242.966 98.4534 243.457 98.1369C243.947 97.816 244.58 97.6555 245.355 97.6555C246.051 97.6555 246.659 97.7982 247.181 98.0834C247.702 98.3642 248.108 98.7921 248.397 99.3671C248.687 99.9377 248.832 100.66 248.832 101.533V108.059H247.254V101.64C247.254 100.834 247.045 100.205 246.626 99.7549C246.207 99.3003 245.632 99.0729 244.901 99.0729C244.397 99.0729 243.947 99.1821 243.55 99.4006C243.158 99.619 242.848 99.9377 242.621 100.357C242.393 100.776 242.28 101.284 242.28 101.881ZM256.182 97.7892V99.1264H250.86V97.7892H256.182ZM252.411 95.3288H253.989V105.117C253.989 105.563 254.053 105.897 254.182 106.12C254.316 106.338 254.486 106.485 254.691 106.561C254.9 106.633 255.121 106.668 255.352 106.668C255.526 106.668 255.669 106.659 255.78 106.641C255.892 106.619 255.981 106.601 256.048 106.588L256.369 108.005C256.262 108.045 256.112 108.086 255.921 108.126C255.729 108.17 255.486 108.193 255.192 108.193C254.746 108.193 254.309 108.097 253.882 107.905C253.458 107.713 253.106 107.421 252.825 107.029C252.549 106.637 252.411 106.142 252.411 105.545V95.3288ZM261.577 108.3C260.926 108.3 260.336 108.177 259.805 107.932C259.275 107.682 258.854 107.323 258.542 106.855C258.23 106.383 258.074 105.812 258.074 105.144C258.074 104.555 258.19 104.078 258.421 103.713C258.653 103.343 258.963 103.053 259.351 102.844C259.738 102.634 260.166 102.478 260.634 102.376C261.107 102.269 261.582 102.184 262.058 102.122C262.682 102.041 263.188 101.981 263.576 101.941C263.968 101.897 264.254 101.823 264.432 101.721C264.615 101.618 264.706 101.44 264.706 101.186V101.132C264.706 100.473 264.526 99.9599 264.165 99.5944C263.808 99.2289 263.266 99.0462 262.54 99.0462C261.787 99.0462 261.196 99.2111 260.768 99.541C260.34 99.8708 260.039 100.223 259.865 100.597L258.368 100.062C258.635 99.4384 258.992 98.9526 259.438 98.6049C259.888 98.2528 260.378 98.0077 260.908 97.8695C261.443 97.7268 261.969 97.6555 262.486 97.6555C262.816 97.6555 263.195 97.6956 263.623 97.7759C264.055 97.8516 264.472 98.0099 264.873 98.2506C265.279 98.4913 265.615 98.8545 265.883 99.3404C266.15 99.8262 266.284 100.477 266.284 101.293V108.059H264.706V106.668H264.626C264.519 106.891 264.341 107.129 264.091 107.384C263.841 107.638 263.509 107.854 263.095 108.032C262.68 108.21 262.174 108.3 261.577 108.3ZM261.818 106.882C262.442 106.882 262.968 106.76 263.396 106.514C263.828 106.269 264.153 105.953 264.372 105.565C264.595 105.177 264.706 104.769 264.706 104.341V102.897C264.639 102.978 264.492 103.051 264.265 103.118C264.042 103.18 263.783 103.236 263.489 103.285C263.2 103.33 262.916 103.37 262.64 103.405C262.368 103.437 262.148 103.463 261.978 103.486C261.568 103.539 261.185 103.626 260.828 103.746C260.476 103.862 260.191 104.038 259.972 104.275C259.758 104.506 259.652 104.823 259.652 105.224C259.652 105.772 259.854 106.187 260.26 106.468C260.67 106.744 261.189 106.882 261.818 106.882ZM273.63 97.7892V99.1264H268.308V97.7892H273.63ZM269.859 95.3288H271.437V105.117C271.437 105.563 271.502 105.897 271.631 106.12C271.765 106.338 271.934 106.485 272.139 106.561C272.349 106.633 272.569 106.668 272.801 106.668C272.975 106.668 273.118 106.659 273.229 106.641C273.34 106.619 273.43 106.601 273.496 106.588L273.817 108.005C273.71 108.045 273.561 108.086 273.369 108.126C273.178 108.17 272.935 108.193 272.641 108.193C272.195 108.193 271.758 108.097 271.33 107.905C270.907 107.713 270.555 107.421 270.274 107.029C269.997 106.637 269.859 106.142 269.859 105.545V95.3288ZM276.004 108.059V97.7892H277.582V108.059H276.004ZM276.806 96.0776C276.498 96.0776 276.233 95.9729 276.01 95.7634C275.792 95.5539 275.683 95.3021 275.683 95.0079C275.683 94.7137 275.792 94.4619 276.01 94.2524C276.233 94.0429 276.498 93.9381 276.806 93.9381C277.114 93.9381 277.376 94.0429 277.595 94.2524C277.818 94.4619 277.929 94.7137 277.929 95.0079C277.929 95.3021 277.818 95.5539 277.595 95.7634C277.376 95.9729 277.114 96.0776 276.806 96.0776ZM284.644 108.273C283.716 108.273 282.903 108.052 282.203 107.611C281.508 107.17 280.964 106.552 280.572 105.759C280.184 104.965 279.99 104.038 279.99 102.978C279.99 101.908 280.184 100.974 280.572 100.176C280.964 99.3783 281.508 98.7587 282.203 98.3174C282.903 97.8762 283.716 97.6555 284.644 97.6555C285.571 97.6555 286.382 97.8762 287.077 98.3174C287.777 98.7587 288.321 99.3783 288.709 100.176C289.101 100.974 289.297 101.908 289.297 102.978C289.297 104.038 289.101 104.965 288.709 105.759C288.321 106.552 287.777 107.17 287.077 107.611C286.382 108.052 285.571 108.273 284.644 108.273ZM284.644 106.855C285.348 106.855 285.927 106.675 286.382 106.314C286.837 105.953 287.173 105.478 287.391 104.89C287.61 104.301 287.719 103.664 287.719 102.978C287.719 102.291 287.61 101.651 287.391 101.059C287.173 100.466 286.837 99.9867 286.382 99.6212C285.927 99.2557 285.348 99.0729 284.644 99.0729C283.939 99.0729 283.36 99.2557 282.905 99.6212C282.451 99.9867 282.114 100.466 281.896 101.059C281.677 101.651 281.568 102.291 281.568 102.978C281.568 103.664 281.677 104.301 281.896 104.89C282.114 105.478 282.451 105.953 282.905 106.314C283.36 106.675 283.939 106.855 284.644 106.855ZM293.283 101.881V108.059H291.706V97.7892H293.23V99.3939H293.364C293.604 98.8724 293.97 98.4534 294.46 98.1369C294.95 97.816 295.583 97.6555 296.359 97.6555C297.054 97.6555 297.663 97.7982 298.184 98.0834C298.706 98.3642 299.111 98.7921 299.401 99.3671C299.691 99.9377 299.836 100.66 299.836 101.533V108.059H298.258V101.64C298.258 100.834 298.048 100.205 297.629 99.7549C297.21 99.3003 296.635 99.0729 295.904 99.0729C295.401 99.0729 294.95 99.1821 294.554 99.4006C294.162 99.619 293.852 99.9377 293.624 100.357C293.397 100.776 293.283 101.284 293.283 101.881ZM303.869 108.166C303.539 108.166 303.256 108.048 303.02 107.811C302.784 107.575 302.665 107.292 302.665 106.962C302.665 106.633 302.784 106.349 303.02 106.113C303.256 105.877 303.539 105.759 303.869 105.759C304.199 105.759 304.482 105.877 304.718 106.113C304.954 106.349 305.072 106.633 305.072 106.962C305.072 107.181 305.017 107.381 304.905 107.564C304.798 107.747 304.653 107.894 304.471 108.005C304.292 108.112 304.092 108.166 303.869 108.166Z" fill="black"/>
+<path d="M31.5643 41.2727V28.5318H39.2039V29.9005H33.1072V34.2055H38.6315V35.5741H33.1072V41.2727H31.5643ZM52.0987 32.5133H50.5559C50.4647 32.0696 50.305 31.6797 50.0769 31.3438C49.8529 31.0078 49.5792 30.7258 49.2557 30.4977C48.9363 30.2654 48.5817 30.0913 48.1919 29.9751C47.802 29.859 47.3956 29.8009 46.9725 29.8009C46.2011 29.8009 45.5023 29.9959 44.876 30.3857C44.2539 30.7756 43.7583 31.35 43.3891 32.109C43.0242 32.868 42.8417 33.799 42.8417 34.9023C42.8417 36.0055 43.0242 36.9366 43.3891 37.6956C43.7583 38.4545 44.2539 39.0289 44.876 39.4188C45.5023 39.8087 46.2011 40.0036 46.9725 40.0036C47.3956 40.0036 47.802 39.9455 48.1919 39.8294C48.5817 39.7133 48.9363 39.5412 49.2557 39.313C49.5792 39.0808 49.8529 38.7967 50.0769 38.4608C50.305 38.1207 50.4647 37.7308 50.5559 37.2912H52.0987C51.9826 37.9423 51.7711 38.525 51.4642 39.0393C51.1573 39.5536 50.7757 39.9912 50.3195 40.352C49.8633 40.7087 49.3511 40.9803 48.7829 41.1669C48.2188 41.3536 47.6154 41.4469 46.9725 41.4469C45.8859 41.4469 44.9195 41.1815 44.0735 40.6506C43.2274 40.1197 42.5617 39.3649 42.0765 38.3861C41.5912 37.4073 41.3486 36.246 41.3486 34.9023C41.3486 33.5585 41.5912 32.3972 42.0765 31.4184C42.5617 30.4396 43.2274 29.6848 44.0735 29.1539C44.9195 28.6231 45.8859 28.3576 46.9725 28.3576C47.6154 28.3576 48.2188 28.4509 48.7829 28.6376C49.3511 28.8242 49.8633 29.0979 50.3195 29.4588C50.7757 29.8154 51.1573 30.2509 51.4642 30.7652C51.7711 31.2753 51.9826 31.8581 52.0987 32.5133ZM59.8674 34.2179V35.5866H54.2932V34.2179H59.8674ZM62.4305 41.2727L68.129 30V29.9005H61.5595V28.5318H69.7217V29.9751L64.048 41.2727H62.4305Z" fill="#858E96"/>
+<circle cx="188.766" cy="155.839" r="8.93498" fill="white"/>
+<circle cx="188.765" cy="155.839" r="8.12271" fill="#F7AE59"/>
+<circle cx="174.957" cy="155.839" r="8.93498" fill="white"/>
+<circle cx="174.957" cy="155.839" r="8.12271" fill="#8CC1FF"/>
+<circle cx="160.336" cy="155.839" r="8.93498" fill="white"/>
+<circle cx="160.336" cy="155.839" r="8.12271" fill="#2C435F"/>
+<rect x="71.6288" y="140.96" width="69.4492" height="29.4064" rx="4.69251" fill="white" stroke="#DEE2E6" stroke-width="0.625668"/>
+<circle cx="82.5987" cy="155.037" r="3.75401" fill="#F7AE59"/>
+<path d="M92.0831 150.29V149.117H100.274V150.29H96.8396V160.038H95.5172V150.29H92.0831ZM104.284 160.208C103.544 160.208 102.895 160.032 102.337 159.68C101.783 159.328 101.349 158.836 101.036 158.203C100.727 157.57 100.572 156.831 100.572 155.985C100.572 155.132 100.727 154.387 101.036 153.751C101.349 153.114 101.783 152.62 102.337 152.268C102.895 151.916 103.544 151.74 104.284 151.74C105.023 151.74 105.67 151.916 106.225 152.268C106.783 152.62 107.216 153.114 107.526 153.751C107.839 154.387 107.995 155.132 107.995 155.985C107.995 156.831 107.839 157.57 107.526 158.203C107.216 158.836 106.783 159.328 106.225 159.68C105.67 160.032 105.023 160.208 104.284 160.208ZM104.284 159.078C104.845 159.078 105.307 158.934 105.67 158.646C106.033 158.358 106.301 157.979 106.475 157.51C106.649 157.041 106.737 156.532 106.737 155.985C106.737 155.438 106.649 154.927 106.475 154.455C106.301 153.982 106.033 153.6 105.67 153.308C105.307 153.017 104.845 152.871 104.284 152.871C103.722 152.871 103.26 153.017 102.897 153.308C102.535 153.6 102.266 153.982 102.092 154.455C101.918 154.927 101.831 155.438 101.831 155.985C101.831 156.532 101.918 157.041 102.092 157.51C102.266 157.979 102.535 158.358 102.897 158.646C103.26 158.934 103.722 159.078 104.284 159.078ZM117.232 160.208C116.55 160.208 115.947 160.036 115.424 159.691C114.902 159.343 114.493 158.852 114.198 158.219C113.903 157.583 113.755 156.831 113.755 155.964C113.755 155.103 113.903 154.357 114.198 153.724C114.493 153.091 114.904 152.602 115.43 152.258C115.956 151.913 116.564 151.74 117.253 151.74C117.787 151.74 118.208 151.829 118.517 152.007C118.83 152.181 119.068 152.38 119.232 152.604C119.399 152.825 119.529 153.006 119.621 153.148H119.728V149.117H120.986V160.038H119.77V158.779H119.621C119.529 158.928 119.397 159.117 119.226 159.344C119.056 159.568 118.812 159.769 118.496 159.947C118.179 160.121 117.758 160.208 117.232 160.208ZM117.403 159.078C117.907 159.078 118.334 158.946 118.682 158.683C119.031 158.417 119.296 158.049 119.477 157.579C119.658 157.107 119.749 156.561 119.749 155.942C119.749 155.331 119.66 154.796 119.482 154.337C119.305 153.875 119.042 153.516 118.693 153.26C118.345 153.001 117.915 152.871 117.403 152.871C116.869 152.871 116.425 153.008 116.07 153.281C115.718 153.552 115.453 153.92 115.275 154.385C115.101 154.847 115.014 155.366 115.014 155.942C115.014 156.525 115.103 157.055 115.28 157.531C115.462 158.004 115.728 158.381 116.08 158.662C116.436 158.939 116.877 159.078 117.403 159.078ZM126.793 160.208C126.054 160.208 125.405 160.032 124.847 159.68C124.292 159.328 123.858 158.836 123.546 158.203C123.236 157.57 123.082 156.831 123.082 155.985C123.082 155.132 123.236 154.387 123.546 153.751C123.858 153.114 124.292 152.62 124.847 152.268C125.405 151.916 126.054 151.74 126.793 151.74C127.532 151.74 128.179 151.916 128.734 152.268C129.292 152.62 129.726 153.114 130.035 153.751C130.348 154.387 130.504 155.132 130.504 155.985C130.504 156.831 130.348 157.57 130.035 158.203C129.726 158.836 129.292 159.328 128.734 159.68C128.179 160.032 127.532 160.208 126.793 160.208ZM126.793 159.078C127.355 159.078 127.817 158.934 128.179 158.646C128.542 158.358 128.81 157.979 128.985 157.51C129.159 157.041 129.246 156.532 129.246 155.985C129.246 155.438 129.159 154.927 128.985 154.455C128.81 153.982 128.542 153.6 128.179 153.308C127.817 153.017 127.355 152.871 126.793 152.871C126.231 152.871 125.769 153.017 125.407 153.308C125.044 153.6 124.776 153.982 124.601 154.455C124.427 154.927 124.34 155.438 124.34 155.985C124.34 156.532 124.427 157.041 124.601 157.51C124.776 157.979 125.044 158.358 125.407 158.646C125.769 158.934 126.231 159.078 126.793 159.078Z" fill="#495057"/>
+<rect x="31.2729" y="140.647" width="30.0321" height="30.0321" rx="5.00535" fill="#FFEDD5"/>
+<rect x="38.7808" y="148.155" width="13.7647" height="13.7647" rx="6.25668" fill="#FFEDD5"/>
+<path d="M49.535 159.626C49.3342 159.626 49.1645 159.557 49.0259 159.418C48.8873 159.279 48.818 159.11 48.818 158.909V151.166C48.818 150.966 48.8873 150.796 49.0259 150.657C49.1645 150.519 49.3342 150.449 49.535 150.449C49.7357 150.449 49.9054 150.519 50.044 150.657C50.1826 150.796 50.2519 150.966 50.2519 151.166V158.909C50.2519 159.11 50.1826 159.279 50.044 159.418C49.9054 159.557 49.7357 159.626 49.535 159.626ZM42.3802 159.626C42.275 159.626 42.1771 159.607 42.0862 159.569C41.9954 159.53 41.919 159.48 41.8568 159.418C41.7947 159.356 41.7445 159.279 41.7063 159.189C41.668 159.098 41.6489 159.005 41.6489 158.909V156.902C41.6489 156.701 41.7182 156.531 41.8568 156.393C41.9954 156.254 42.1651 156.185 42.3658 156.185C42.5666 156.185 42.7362 156.254 42.8748 156.393C43.0134 156.531 43.0827 156.701 43.0827 156.902V158.909C43.0827 159.005 43.0636 159.098 43.0254 159.189C42.9872 159.279 42.937 159.356 42.8748 159.418C42.8127 159.48 42.7386 159.53 42.6526 159.569C42.5666 159.607 42.4758 159.626 42.3802 159.626ZM45.9504 159.626C45.7497 159.626 45.58 159.557 45.4414 159.418C45.3028 159.279 45.2335 159.11 45.2335 158.909V154.034C45.2335 153.833 45.3028 153.664 45.4414 153.525C45.58 153.386 45.7497 153.317 45.9504 153.317C46.1511 153.317 46.3208 153.386 46.4594 153.525C46.598 153.664 46.6673 153.833 46.6673 154.034V158.909C46.6673 159.11 46.598 159.279 46.4594 159.418C46.3208 159.557 46.1511 159.626 45.9504 159.626Z" fill="#FF6B00"/>
+</g>
+<defs>
+<filter id="filter0_d_2610_65027" x="4.99465" y="3.00002" width="478.011" height="190.203" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2.50267"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2610_65027"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2610_65027" result="shape"/>
+</filter>
+<filter id="filter1_d_2610_65027" x="0" y="0.00537109" width="488" height="200.193" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.3475 0 0 0 0 0.64765 0 0 0 0 1 0 0 0 0.63 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2610_65027"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2610_65027" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/app/public/onboarding/logo.svg b/app/public/onboarding/logo.svg
new file mode 100644
index 000000000..4c39a394c
--- /dev/null
+++ b/app/public/onboarding/logo.svg
@@ -0,0 +1,6 @@
+<svg width="201" height="51" viewBox="0 0 201 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M68.7311 32.3701V15.9189H74.9003C76.1641 15.9189 77.2244 16.1546 78.0813 16.6258C78.9434 17.0971 79.5941 17.7451 80.0332 18.5698C80.4777 19.3891 80.6999 20.3209 80.6999 21.3652C80.6999 22.4202 80.4777 23.3573 80.0332 24.1767C79.5887 24.996 78.9327 25.6413 78.0652 26.1126C77.1976 26.5785 76.1293 26.8114 74.8601 26.8114H70.7714V24.3614H74.4585C75.1975 24.3614 75.8026 24.2329 76.2739 23.9758C76.7451 23.7188 77.0932 23.3653 77.3181 22.9155C77.5484 22.4657 77.6635 21.9489 77.6635 21.3652C77.6635 20.7815 77.5484 20.2674 77.3181 19.8229C77.0932 19.3784 76.7425 19.033 76.2658 18.7866C75.7946 18.535 75.1868 18.4091 74.4424 18.4091H71.7112V32.3701H68.7311ZM97.9918 32.3701V15.9189H100.972V29.8719H108.218V32.3701H97.9918ZM128.238 32.3701H125.057L130.849 15.9189H134.528L140.328 32.3701H137.147L132.753 19.2927H132.624L128.238 32.3701ZM128.343 25.9198H137.018V28.3136H128.343V25.9198ZM170.717 15.9189V32.3701H168.066L160.315 21.1644H160.178V32.3701H157.198V15.9189H159.865L167.608 27.1327H167.753V15.9189H170.717ZM188.668 32.3701V15.9189H199.367V18.4171H191.648V22.8834H198.813V25.3816H191.648V29.8719H199.432V32.3701H188.668Z" fill="#212529"/>
+<path d="M40.2549 10.6406H20.5122V20.5124H30.3832V30.3834H40.2549V10.6406Z" fill="#3F76FF"/>
+<path d="M20.5121 20.5127H10.6411V30.3616H20.5121V20.5127Z" fill="#3F76FF"/>
+<path d="M30.3831 30.3838H20.5342V40.2548H30.3831V30.3838Z" fill="#3F76FF"/>
+</svg>
diff --git a/app/public/onboarding/module.svg b/app/public/onboarding/module.svg
new file mode 100644
index 000000000..2058bb4f3
--- /dev/null
+++ b/app/public/onboarding/module.svg
@@ -0,0 +1,48 @@
+<svg width="450" height="192" viewBox="0 0 450 192" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g filter="url(#filter0_d_2610_65058)">
+<rect x="11" y="8" width="428" height="172" rx="10" fill="white"/>
+</g>
+<path d="M39 79.334C38.8111 79.334 38.6528 79.2701 38.525 79.1423C38.3972 79.0145 38.3333 78.8562 38.3333 78.6673C38.3333 78.4784 38.3972 78.3201 38.525 78.1923C38.6528 78.0645 38.8111 78.0007 39 78.0007C39.1889 78.0007 39.3472 78.0645 39.475 78.1923C39.6028 78.3201 39.6667 78.4784 39.6667 78.6673C39.6667 78.8562 39.6028 79.0145 39.475 79.1423C39.3472 79.2701 39.1889 79.334 39 79.334ZM36.3333 79.334C36.1444 79.334 35.9861 79.2701 35.8583 79.1423C35.7306 79.0145 35.6667 78.8562 35.6667 78.6673C35.6667 78.4784 35.7306 78.3201 35.8583 78.1923C35.9861 78.0645 36.1444 78.0007 36.3333 78.0007C36.5222 78.0007 36.6806 78.0645 36.8083 78.1923C36.9361 78.3201 37 78.4784 37 78.6673C37 78.8562 36.9361 79.0145 36.8083 79.1423C36.6806 79.2701 36.5222 79.334 36.3333 79.334ZM41.6667 79.334C41.4778 79.334 41.3194 79.2701 41.1917 79.1423C41.0639 79.0145 41 78.8562 41 78.6673C41 78.4784 41.0639 78.3201 41.1917 78.1923C41.3194 78.0645 41.4778 78.0007 41.6667 78.0007C41.8556 78.0007 42.0139 78.0645 42.1417 78.1923C42.2694 78.3201 42.3333 78.4784 42.3333 78.6673C42.3333 78.8562 42.2694 79.0145 42.1417 79.1423C42.0139 79.2701 41.8556 79.334 41.6667 79.334ZM39 82.0007C38.8111 82.0007 38.6528 81.9368 38.525 81.809C38.3972 81.6812 38.3333 81.5229 38.3333 81.334C38.3333 81.1451 38.3972 80.9868 38.525 80.859C38.6528 80.7312 38.8111 80.6673 39 80.6673C39.1889 80.6673 39.3472 80.7312 39.475 80.859C39.6028 80.9868 39.6667 81.1451 39.6667 81.334C39.6667 81.5229 39.6028 81.6812 39.475 81.809C39.3472 81.9368 39.1889 82.0007 39 82.0007ZM36.3333 82.0007C36.1444 82.0007 35.9861 81.9368 35.8583 81.809C35.7306 81.6812 35.6667 81.5229 35.6667 81.334C35.6667 81.1451 35.7306 80.9868 35.8583 80.859C35.9861 80.7312 36.1444 80.6673 36.3333 80.6673C36.5222 80.6673 36.6806 80.7312 36.8083 80.859C36.9361 80.9868 37 81.1451 37 81.334C37 81.5229 36.9361 81.6812 36.8083 81.809C36.6806 81.9368 36.5222 82.0007 36.3333 82.0007ZM41.6667 82.0007C41.4778 82.0007 41.3194 81.9368 41.1917 81.809C41.0639 81.6812 41 81.5229 41 81.334C41 81.1451 41.0639 80.9868 41.1917 80.859C41.3194 80.7312 41.4778 80.6673 41.6667 80.6673C41.8556 80.6673 42.0139 80.7312 42.1417 80.859C42.2694 80.9868 42.3333 81.1451 42.3333 81.334C42.3333 81.5229 42.2694 81.6812 42.1417 81.809C42.0139 81.9368 41.8556 82.0007 41.6667 82.0007ZM34 84.6673C33.7333 84.6673 33.5 84.5673 33.3 84.3673C33.1 84.1673 33 83.934 33 83.6673V73.334C33 73.0673 33.1 72.834 33.3 72.634C33.5 72.434 33.7333 72.334 34 72.334H35.0833V71.8673C35.0833 71.7118 35.1333 71.584 35.2333 71.484C35.3333 71.384 35.4611 71.334 35.6167 71.334C35.7722 71.334 35.9028 71.384 36.0083 71.484C36.1139 71.584 36.1667 71.7118 36.1667 71.8673V72.334H41.8333V71.8673C41.8333 71.7118 41.8833 71.584 41.9833 71.484C42.0833 71.384 42.2111 71.334 42.3667 71.334C42.5222 71.334 42.6528 71.384 42.7583 71.484C42.8639 71.584 42.9167 71.7118 42.9167 71.8673V72.334H44C44.2667 72.334 44.5 72.434 44.7 72.634C44.9 72.834 45 73.0673 45 73.334V83.6673C45 83.934 44.9 84.1673 44.7 84.3673C44.5 84.5673 44.2667 84.6673 44 84.6673H34ZM34 83.6673H44V76.5007H34V83.6673ZM34 75.5007H44V73.334H34V75.5007ZM34 75.5007V73.334V75.5007Z" fill="#212529"/>
+<path d="M56.8295 76.4545C56.7784 76.0227 56.571 75.6875 56.2074 75.4489C55.8438 75.2102 55.3977 75.0909 54.8693 75.0909C54.483 75.0909 54.1449 75.1534 53.8551 75.2784C53.5682 75.4034 53.3438 75.5753 53.1818 75.794C53.0227 76.0128 52.9432 76.2614 52.9432 76.5398C52.9432 76.7727 52.9986 76.973 53.1094 77.1406C53.223 77.3054 53.3679 77.4432 53.544 77.554C53.7202 77.6619 53.9048 77.7514 54.098 77.8224C54.2912 77.8906 54.4688 77.946 54.6307 77.9886L55.517 78.2273C55.7443 78.2869 55.9972 78.3693 56.2756 78.4744C56.5568 78.5795 56.8253 78.723 57.081 78.9048C57.3395 79.0838 57.5526 79.3139 57.7202 79.5952C57.8878 79.8764 57.9716 80.2216 57.9716 80.6307C57.9716 81.1023 57.848 81.5284 57.6009 81.9091C57.3565 82.2898 56.9986 82.5923 56.527 82.8168C56.0582 83.0412 55.4886 83.1534 54.8182 83.1534C54.1932 83.1534 53.652 83.0526 53.1946 82.8509C52.7401 82.6491 52.3821 82.3679 52.1207 82.0071C51.8622 81.6463 51.7159 81.2273 51.6818 80.75H52.7727C52.8011 81.0795 52.9119 81.3523 53.1051 81.5682C53.3011 81.7812 53.5483 81.9403 53.8466 82.0455C54.1477 82.1477 54.4716 82.1989 54.8182 82.1989C55.2216 82.1989 55.5838 82.1335 55.9048 82.0028C56.2259 81.8693 56.4801 81.6847 56.6676 81.4489C56.8551 81.2102 56.9489 80.9318 56.9489 80.6136C56.9489 80.3239 56.8679 80.0881 56.706 79.9062C56.544 79.7244 56.331 79.5767 56.0668 79.4631C55.8026 79.3494 55.517 79.25 55.2102 79.1648L54.1364 78.858C53.4545 78.6619 52.9148 78.3821 52.517 78.0185C52.1193 77.6548 51.9205 77.179 51.9205 76.5909C51.9205 76.1023 52.0526 75.6761 52.3168 75.3125C52.5838 74.946 52.9418 74.6619 53.3906 74.4602C53.8423 74.2557 54.3466 74.1534 54.9034 74.1534C55.4659 74.1534 55.9659 74.2543 56.4034 74.456C56.8409 74.6548 57.1875 74.9276 57.4432 75.2741C57.7017 75.6207 57.8381 76.0142 57.8523 76.4545H56.8295ZM62.4194 76.4545V77.3068H59.0273V76.4545H62.4194ZM60.016 74.8864H61.0217V81.125C61.0217 81.4091 61.0629 81.6222 61.1452 81.7642C61.2305 81.9034 61.3384 81.9972 61.4691 82.0455C61.6026 82.0909 61.7433 82.1136 61.891 82.1136C62.0018 82.1136 62.0927 82.108 62.1637 82.0966C62.2347 82.0824 62.2915 82.071 62.3342 82.0625L62.5387 82.9659C62.4705 82.9915 62.3754 83.017 62.2532 83.0426C62.131 83.071 61.9762 83.0852 61.7887 83.0852C61.5046 83.0852 61.2262 83.0241 60.9535 82.902C60.6836 82.7798 60.4592 82.5938 60.2802 82.3438C60.104 82.0938 60.016 81.7784 60.016 81.3977V74.8864ZM65.8583 83.1534C65.4435 83.1534 65.0671 83.0753 64.729 82.919C64.391 82.7599 64.1225 82.5312 63.9237 82.233C63.7248 81.9318 63.6254 81.5682 63.6254 81.142C63.6254 80.767 63.6992 80.4631 63.8469 80.2301C63.9947 79.9943 64.1921 79.8097 64.4393 79.6761C64.6864 79.5426 64.9592 79.4432 65.2575 79.3778C65.5586 79.3097 65.8612 79.2557 66.1651 79.2159C66.5629 79.1648 66.8853 79.1264 67.1325 79.1009C67.3825 79.0724 67.5643 79.0256 67.6779 78.9602C67.7944 78.8949 67.8526 78.7812 67.8526 78.6193V78.5852C67.8526 78.1648 67.7376 77.8381 67.5075 77.6051C67.2802 77.3722 66.935 77.2557 66.4719 77.2557C65.9918 77.2557 65.6154 77.3608 65.3427 77.571C65.07 77.7812 64.8782 78.0057 64.7674 78.2443L63.8129 77.9034C63.9833 77.5057 64.2106 77.196 64.4947 76.9744C64.7816 76.75 65.0941 76.5937 65.4322 76.5057C65.7731 76.4148 66.1083 76.3693 66.4379 76.3693C66.6481 76.3693 66.8896 76.3949 67.1623 76.446C67.4379 76.4943 67.7035 76.5952 67.9592 76.7486C68.2177 76.902 68.4322 77.1335 68.6026 77.4432C68.7731 77.7528 68.8583 78.1676 68.8583 78.6875V83H67.8526V82.1136H67.8015C67.7333 82.2557 67.6197 82.4077 67.4606 82.5696C67.3015 82.7315 67.0898 82.8693 66.8256 82.983C66.5614 83.0966 66.239 83.1534 65.8583 83.1534ZM66.0117 82.25C66.4094 82.25 66.7447 82.1719 67.0174 82.0156C67.293 81.8594 67.5004 81.6577 67.6396 81.4105C67.7816 81.1634 67.8526 80.9034 67.8526 80.6307V79.7102C67.81 79.7614 67.7163 79.8082 67.5714 79.8509C67.4293 79.8906 67.2646 79.9261 67.0771 79.9574C66.8924 79.9858 66.712 80.0114 66.5359 80.0341C66.3626 80.054 66.2219 80.071 66.114 80.0852C65.8526 80.1193 65.6083 80.1747 65.381 80.2514C65.1566 80.3253 64.9748 80.4375 64.8356 80.5881C64.6992 80.7358 64.631 80.9375 64.631 81.1932C64.631 81.5426 64.7603 81.8068 65.0188 81.9858C65.2802 82.1619 65.6112 82.25 66.0117 82.25ZM70.6939 83V76.4545H71.6655V77.4432H71.7337C71.853 77.1193 72.0689 76.8565 72.3814 76.6548C72.6939 76.4531 73.0462 76.3523 73.4382 76.3523C73.5121 76.3523 73.6044 76.3537 73.7152 76.3565C73.826 76.3594 73.9098 76.3636 73.9666 76.3693V77.392C73.9325 77.3835 73.8544 77.3707 73.7322 77.3537C73.6129 77.3338 73.4865 77.3239 73.353 77.3239C73.0348 77.3239 72.7507 77.3906 72.5007 77.5241C72.2536 77.6548 72.0575 77.8366 71.9126 78.0696C71.7706 78.2997 71.6996 78.5625 71.6996 78.858V83H70.6939ZM78.4155 76.4545V77.3068H75.0234V76.4545H78.4155ZM76.0121 74.8864H77.0178V81.125C77.0178 81.4091 77.0589 81.6222 77.1413 81.7642C77.2266 81.9034 77.3345 81.9972 77.4652 82.0455C77.5987 82.0909 77.7393 82.1136 77.8871 82.1136C77.9979 82.1136 78.0888 82.108 78.1598 82.0966C78.2308 82.0824 78.2876 82.071 78.3303 82.0625L78.5348 82.9659C78.4666 82.9915 78.3714 83.017 78.2493 83.0426C78.1271 83.071 77.9723 83.0852 77.7848 83.0852C77.5007 83.0852 77.2223 83.0241 76.9496 82.902C76.6797 82.7798 76.4553 82.5938 76.2763 82.3438C76.1001 82.0938 76.0121 81.7784 76.0121 81.3977V74.8864ZM84.0362 83.0682C83.826 83.0682 83.6456 82.9929 83.495 82.8423C83.3445 82.6918 83.2692 82.5114 83.2692 82.3011C83.2692 82.0909 83.3445 81.9105 83.495 81.7599C83.6456 81.6094 83.826 81.5341 84.0362 81.5341C84.2464 81.5341 84.4268 81.6094 84.5774 81.7599C84.728 81.9105 84.8033 82.0909 84.8033 82.3011C84.8033 82.4403 84.7678 82.5682 84.6967 82.6847C84.6286 82.8011 84.5362 82.8949 84.4197 82.9659C84.3061 83.0341 84.1783 83.0682 84.0362 83.0682ZM84.0362 78.2102C83.826 78.2102 83.6456 78.1349 83.495 77.9844C83.3445 77.8338 83.2692 77.6534 83.2692 77.4432C83.2692 77.233 83.3445 77.0526 83.495 76.902C83.6456 76.7514 83.826 76.6761 84.0362 76.6761C84.2464 76.6761 84.4268 76.7514 84.5774 76.902C84.728 77.0526 84.8033 77.233 84.8033 77.4432C84.8033 77.5824 84.7678 77.7102 84.6967 77.8267C84.6286 77.9432 84.5362 78.0369 84.4197 78.108C84.3061 78.1761 84.1783 78.2102 84.0362 78.2102Z" fill="#858E96"/>
+<path d="M93.4602 74.2727H94.517V80.5114C94.517 81.0682 94.4148 81.5412 94.2102 81.9304C94.0057 82.3196 93.7173 82.6151 93.3452 82.8168C92.973 83.0185 92.5341 83.1193 92.0284 83.1193C91.5511 83.1193 91.1264 83.0327 90.7543 82.8594C90.3821 82.6832 90.0895 82.4332 89.8764 82.1094C89.6634 81.7855 89.5568 81.4006 89.5568 80.9545H90.5966C90.5966 81.2017 90.6577 81.4176 90.7798 81.6023C90.9048 81.7841 91.0753 81.9261 91.2912 82.0284C91.5071 82.1307 91.7528 82.1818 92.0284 82.1818C92.3324 82.1818 92.5909 82.1179 92.804 81.9901C93.017 81.8622 93.179 81.6747 93.2898 81.4276C93.4034 81.1776 93.4602 80.8722 93.4602 80.5114V74.2727ZM98.4247 83.1534C98.0099 83.1534 97.6335 83.0753 97.2955 82.919C96.9574 82.7599 96.6889 82.5312 96.4901 82.233C96.2912 81.9318 96.1918 81.5682 96.1918 81.142C96.1918 80.767 96.2656 80.4631 96.4134 80.2301C96.5611 79.9943 96.7585 79.8097 97.0057 79.6761C97.2528 79.5426 97.5256 79.4432 97.8239 79.3778C98.125 79.3097 98.4276 79.2557 98.7315 79.2159C99.1293 79.1648 99.4517 79.1264 99.6989 79.1009C99.9489 79.0724 100.131 79.0256 100.244 78.9602C100.361 78.8949 100.419 78.7812 100.419 78.6193V78.5852C100.419 78.1648 100.304 77.8381 100.074 77.6051C99.8466 77.3722 99.5014 77.2557 99.0384 77.2557C98.5582 77.2557 98.1818 77.3608 97.9091 77.571C97.6364 77.7812 97.4446 78.0057 97.3338 78.2443L96.3793 77.9034C96.5497 77.5057 96.777 77.196 97.0611 76.9744C97.348 76.75 97.6605 76.5937 97.9986 76.5057C98.3395 76.4148 98.6747 76.3693 99.0043 76.3693C99.2145 76.3693 99.456 76.3949 99.7287 76.446C100.004 76.4943 100.27 76.5952 100.526 76.7486C100.784 76.902 100.999 77.1335 101.169 77.4432C101.339 77.7528 101.425 78.1676 101.425 78.6875V83H100.419V82.1136H100.368C100.3 82.2557 100.186 82.4077 100.027 82.5696C99.8679 82.7315 99.6563 82.8693 99.392 82.983C99.1278 83.0966 98.8054 83.1534 98.4247 83.1534ZM98.5781 82.25C98.9759 82.25 99.3111 82.1719 99.5838 82.0156C99.8594 81.8594 100.067 81.6577 100.206 81.4105C100.348 81.1634 100.419 80.9034 100.419 80.6307V79.7102C100.376 79.7614 100.283 79.8082 100.138 79.8509C99.9957 79.8906 99.831 79.9261 99.6435 79.9574C99.4588 79.9858 99.2784 80.0114 99.1023 80.0341C98.929 80.054 98.7884 80.071 98.6804 80.0852C98.419 80.1193 98.1747 80.1747 97.9474 80.2514C97.723 80.3253 97.5412 80.4375 97.402 80.5881C97.2656 80.7358 97.1974 80.9375 97.1974 81.1932C97.1974 81.5426 97.3267 81.8068 97.5852 81.9858C97.8466 82.1619 98.1776 82.25 98.5781 82.25ZM104.266 79.0625V83H103.26V76.4545H104.232V77.4773H104.317C104.471 77.1449 104.703 76.8778 105.016 76.6761C105.328 76.4716 105.732 76.3693 106.226 76.3693C106.669 76.3693 107.057 76.4602 107.39 76.642C107.722 76.821 107.98 77.0938 108.165 77.4602C108.35 77.8239 108.442 78.2841 108.442 78.8409V83H107.436V78.9091C107.436 78.3949 107.303 77.9943 107.036 77.7074C106.769 77.4176 106.402 77.2727 105.936 77.2727C105.615 77.2727 105.328 77.3423 105.076 77.4815C104.826 77.6207 104.628 77.8239 104.483 78.0909C104.338 78.358 104.266 78.6818 104.266 79.0625ZM116.706 74.2727V83H115.649V75.3807H115.598L113.467 76.7955V75.7216L115.649 74.2727H116.706ZM122.114 83.1193C121.756 83.1136 121.398 83.0455 121.04 82.9148C120.682 82.7841 120.355 82.5639 120.06 82.2543C119.764 81.9418 119.527 81.5199 119.348 80.9886C119.169 80.4545 119.08 79.7841 119.08 78.9773C119.08 78.2045 119.152 77.5199 119.297 76.9233C119.442 76.3239 119.652 75.8196 119.928 75.4105C120.203 74.9986 120.536 74.6861 120.925 74.473C121.317 74.2599 121.759 74.1534 122.25 74.1534C122.739 74.1534 123.173 74.2514 123.554 74.4474C123.938 74.6406 124.25 74.9105 124.491 75.2571C124.733 75.6037 124.889 76.0028 124.96 76.4545H123.92C123.824 76.0625 123.636 75.7372 123.358 75.4787C123.08 75.2202 122.71 75.0909 122.25 75.0909C121.574 75.0909 121.041 75.3849 120.652 75.973C120.266 76.5611 120.071 77.3864 120.068 78.4489H120.136C120.295 78.2074 120.484 78.0014 120.703 77.831C120.925 77.6577 121.169 77.5241 121.436 77.4304C121.703 77.3366 121.986 77.2898 122.284 77.2898C122.784 77.2898 123.241 77.4148 123.656 77.6648C124.071 77.9119 124.403 78.2543 124.653 78.6918C124.903 79.1264 125.028 79.625 125.028 80.1875C125.028 80.7273 124.908 81.2216 124.666 81.6705C124.425 82.1165 124.085 82.4716 123.648 82.7358C123.213 82.9972 122.702 83.125 122.114 83.1193ZM122.114 82.1818C122.472 82.1818 122.793 82.0923 123.077 81.9134C123.364 81.7344 123.589 81.4943 123.754 81.1932C123.922 80.892 124.006 80.5568 124.006 80.1875C124.006 79.8267 123.925 79.4986 123.763 79.2031C123.604 78.9048 123.384 78.6676 123.102 78.4915C122.824 78.3153 122.506 78.2273 122.148 78.2273C121.878 78.2273 121.626 78.2812 121.393 78.3892C121.161 78.4943 120.956 78.6392 120.78 78.8239C120.607 79.0085 120.47 79.2202 120.371 79.4588C120.271 79.6946 120.222 79.9432 120.222 80.2045C120.222 80.5511 120.303 80.875 120.464 81.1761C120.629 81.4773 120.854 81.7202 121.138 81.9048C121.425 82.0895 121.75 82.1818 122.114 82.1818ZM127.811 81.8068L127.743 82.267C127.695 82.5909 127.621 82.9375 127.521 83.3068C127.425 83.6761 127.324 84.0241 127.219 84.3509C127.114 84.6776 127.027 84.9375 126.959 85.1307H126.192C126.229 84.9489 126.277 84.7088 126.337 84.4105C126.396 84.1122 126.456 83.7784 126.516 83.4091C126.578 83.0426 126.629 82.6676 126.669 82.2841L126.72 81.8068H127.811ZM133.032 83V82.233L135.913 79.0795C136.251 78.7102 136.529 78.3892 136.748 78.1165C136.967 77.8409 137.129 77.5824 137.234 77.3409C137.342 77.0966 137.396 76.8409 137.396 76.5739C137.396 76.267 137.322 76.0014 137.174 75.777C137.029 75.5526 136.831 75.3793 136.578 75.2571C136.325 75.1349 136.041 75.0739 135.725 75.0739C135.39 75.0739 135.098 75.1435 134.848 75.2827C134.6 75.419 134.409 75.6108 134.272 75.858C134.139 76.1051 134.072 76.3949 134.072 76.7273H133.066C133.066 76.2159 133.184 75.767 133.42 75.3807C133.656 74.9943 133.977 74.6932 134.383 74.4773C134.792 74.2614 135.251 74.1534 135.76 74.1534C136.271 74.1534 136.724 74.2614 137.119 74.4773C137.514 74.6932 137.824 74.9844 138.048 75.3509C138.272 75.7173 138.385 76.125 138.385 76.5739C138.385 76.8949 138.326 77.2088 138.21 77.5156C138.096 77.8196 137.897 78.1591 137.613 78.5341C137.332 78.9062 136.941 79.3608 136.441 79.8977L134.481 81.9943V82.0625H138.538V83H133.032ZM143.145 83.1193C142.502 83.1193 141.956 82.9446 141.504 82.5952C141.052 82.2429 140.707 81.733 140.468 81.0653C140.23 80.3949 140.11 79.5852 140.11 78.6364C140.11 77.6932 140.23 76.8878 140.468 76.2202C140.71 75.5497 141.056 75.0384 141.508 74.6861C141.963 74.331 142.508 74.1534 143.145 74.1534C143.781 74.1534 144.325 74.331 144.777 74.6861C145.231 75.0384 145.578 75.5497 145.816 76.2202C146.058 76.8878 146.179 77.6932 146.179 78.6364C146.179 79.5852 146.059 80.3949 145.821 81.0653C145.582 81.733 145.237 82.2429 144.785 82.5952C144.333 82.9446 143.787 83.1193 143.145 83.1193ZM143.145 82.1818C143.781 82.1818 144.275 81.875 144.627 81.2614C144.98 80.6477 145.156 79.7727 145.156 78.6364C145.156 77.8807 145.075 77.2372 144.913 76.706C144.754 76.1747 144.524 75.7699 144.223 75.4915C143.924 75.2131 143.565 75.0739 143.145 75.0739C142.514 75.0739 142.021 75.3849 141.666 76.0071C141.311 76.6264 141.133 77.5028 141.133 78.6364C141.133 79.392 141.213 80.0341 141.372 80.5625C141.531 81.0909 141.76 81.4929 142.058 81.7685C142.359 82.044 142.721 82.1818 143.145 82.1818ZM147.798 83V82.233L150.679 79.0795C151.017 78.7102 151.295 78.3892 151.514 78.1165C151.733 77.8409 151.895 77.5824 152 77.3409C152.108 77.0966 152.162 76.8409 152.162 76.5739C152.162 76.267 152.088 76.0014 151.94 75.777C151.795 75.5526 151.596 75.3793 151.343 75.2571C151.091 75.1349 150.806 75.0739 150.491 75.0739C150.156 75.0739 149.863 75.1435 149.613 75.2827C149.366 75.419 149.174 75.6108 149.038 75.858C148.904 76.1051 148.838 76.3949 148.838 76.7273H147.832C147.832 76.2159 147.95 75.767 148.186 75.3807C148.422 74.9943 148.743 74.6932 149.149 74.4773C149.558 74.2614 150.017 74.1534 150.525 74.1534C151.037 74.1534 151.49 74.2614 151.885 74.4773C152.279 74.6932 152.589 74.9844 152.814 75.3509C153.038 75.7173 153.15 76.125 153.15 76.5739C153.15 76.8949 153.092 77.2088 152.975 77.5156C152.862 77.8196 152.663 78.1591 152.379 78.5341C152.098 78.9062 151.707 79.3608 151.207 79.8977L149.247 81.9943V82.0625H153.304V83H147.798ZM155.064 83V82.233L157.944 79.0795C158.282 78.7102 158.561 78.3892 158.779 78.1165C158.998 77.8409 159.16 77.5824 159.265 77.3409C159.373 77.0966 159.427 76.8409 159.427 76.5739C159.427 76.267 159.353 76.0014 159.206 75.777C159.061 75.5526 158.862 75.3793 158.609 75.2571C158.356 75.1349 158.072 75.0739 157.757 75.0739C157.422 75.0739 157.129 75.1435 156.879 75.2827C156.632 75.419 156.44 75.6108 156.304 75.858C156.17 76.1051 156.103 76.3949 156.103 76.7273H155.098C155.098 76.2159 155.216 75.767 155.451 75.3807C155.687 74.9943 156.008 74.6932 156.414 74.4773C156.824 74.2614 157.282 74.1534 157.791 74.1534C158.302 74.1534 158.755 74.2614 159.15 74.4773C159.545 74.6932 159.855 74.9844 160.079 75.3509C160.304 75.7173 160.416 76.125 160.416 76.5739C160.416 76.8949 160.358 77.2088 160.241 77.5156C160.127 77.8196 159.929 78.1591 159.645 78.5341C159.363 78.9062 158.973 79.3608 158.473 79.8977L156.512 81.9943V82.0625H160.569V83H155.064Z" fill="#212529"/>
+<path d="M44.179 39.0994C44.0606 38.7159 43.8973 38.3726 43.6889 38.0696C43.4853 37.7618 43.2391 37.4991 42.9503 37.2812C42.6662 37.0634 42.3395 36.9001 41.9702 36.7912C41.6009 36.6776 41.1984 36.6207 40.7628 36.6207C39.9815 36.6207 39.2855 36.8172 38.6747 37.2102C38.0639 37.6032 37.5833 38.1809 37.233 38.9432C36.8873 39.7008 36.7145 40.6241 36.7145 41.7131C36.7145 42.8116 36.8873 43.742 37.233 44.5043C37.5786 45.2666 38.0592 45.8466 38.6747 46.2443C39.2902 46.6373 40.0052 46.8338 40.8196 46.8338C41.5582 46.8338 42.1974 46.6918 42.7372 46.4077C43.2817 46.1236 43.7008 45.7211 43.9943 45.2003C44.2879 44.6747 44.4347 44.0592 44.4347 43.3537L45.0312 43.446H41.0824V41.3864H46.9844V43.1335C46.9844 44.3788 46.7192 45.456 46.1889 46.3651C45.6586 47.2741 44.9295 47.9749 44.0014 48.4673C43.0734 48.955 42.008 49.1989 40.8054 49.1989C39.4654 49.1989 38.2888 48.8982 37.2756 48.2969C36.267 47.6908 35.4787 46.8314 34.9105 45.7188C34.3471 44.6013 34.0653 43.2756 34.0653 41.7415C34.0653 40.5672 34.2311 39.5185 34.5625 38.5952C34.8987 37.6719 35.3674 36.8883 35.9688 36.2443C36.5701 35.5956 37.2756 35.1032 38.0852 34.767C38.8949 34.4261 39.7756 34.2557 40.7273 34.2557C41.5322 34.2557 42.2827 34.3741 42.9787 34.6108C43.6747 34.8428 44.2926 35.1742 44.8324 35.6051C45.3769 36.036 45.8243 36.5473 46.1747 37.1392C46.5251 37.7311 46.7547 38.3845 46.8636 39.0994H44.179ZM50.1023 49V38.0909H52.6733V49H50.1023ZM51.3949 36.5426C50.9877 36.5426 50.6373 36.4077 50.3438 36.1378C50.0502 35.8632 49.9034 35.5341 49.9034 35.1506C49.9034 34.7623 50.0502 34.4332 50.3438 34.1634C50.6373 33.8887 50.9877 33.7514 51.3949 33.7514C51.8068 33.7514 52.1572 33.8887 52.446 34.1634C52.7396 34.4332 52.8864 34.7623 52.8864 35.1506C52.8864 35.5341 52.7396 35.8632 52.446 36.1378C52.1572 36.4077 51.8068 36.5426 51.3949 36.5426ZM60.7646 38.0909V40.0795H54.4933V38.0909H60.7646ZM56.0415 35.4773H58.6126V45.7188C58.6126 46.0644 58.6647 46.3295 58.7688 46.5142C58.8777 46.6941 59.0198 46.8172 59.195 46.8835C59.3701 46.9498 59.5643 46.983 59.7773 46.983C59.9383 46.983 60.0851 46.9711 60.2177 46.9474C60.355 46.9238 60.4592 46.9025 60.5302 46.8835L60.9634 48.8935C60.8261 48.9408 60.6296 48.9929 60.3739 49.0497C60.123 49.1065 59.8152 49.1397 59.4506 49.1491C58.8067 49.1681 58.2267 49.071 57.7106 48.858C57.1945 48.6402 56.7849 48.304 56.4819 47.8494C56.1836 47.3949 56.0368 46.8267 56.0415 46.1449V35.4773ZM65.7202 42.608V49H63.1491V34.4545H65.6634V39.9446H65.7912C66.0469 39.3291 66.4422 38.8437 66.9773 38.4886C67.517 38.1288 68.2036 37.9489 69.0369 37.9489C69.7945 37.9489 70.455 38.1075 71.0185 38.4247C71.5819 38.742 72.0175 39.206 72.3253 39.8168C72.6378 40.4276 72.794 41.1733 72.794 42.054V49H70.223V42.4517C70.223 41.7178 70.0336 41.1473 69.6548 40.7401C69.2808 40.3281 68.7552 40.1222 68.0781 40.1222C67.6236 40.1222 67.2164 40.2216 66.8565 40.4205C66.5014 40.6146 66.2221 40.8963 66.0185 41.2656C65.8196 41.6349 65.7202 42.0824 65.7202 42.608ZM82.3679 44.4119V38.0909H84.9389V49H82.446V47.0611H82.3324C82.0862 47.6719 81.6813 48.1714 81.1179 48.5597C80.5592 48.9479 79.8703 49.142 79.0511 49.142C78.3362 49.142 77.7041 48.9834 77.1548 48.6662C76.6103 48.3442 76.1842 47.8778 75.8764 47.267C75.5687 46.6515 75.4148 45.9081 75.4148 45.0369V38.0909H77.9858V44.6392C77.9858 45.3305 78.1752 45.8797 78.554 46.2869C78.9328 46.6941 79.4299 46.8977 80.0455 46.8977C80.4242 46.8977 80.7912 46.8054 81.1463 46.6207C81.5014 46.4361 81.7926 46.1615 82.0199 45.7969C82.2519 45.4276 82.3679 44.9659 82.3679 44.4119ZM87.6964 49V34.4545H90.2674V39.8949H90.3739C90.5065 39.6297 90.6935 39.348 90.935 39.0497C91.1765 38.7467 91.5032 38.4886 91.9151 38.2756C92.3271 38.0578 92.8526 37.9489 93.4918 37.9489C94.3346 37.9489 95.0946 38.1643 95.7717 38.5952C96.4535 39.0213 96.9933 39.6534 97.391 40.4915C97.7934 41.3248 97.9947 42.3475 97.9947 43.5597C97.9947 44.7576 97.7982 45.7756 97.4052 46.6136C97.0122 47.4517 96.4772 48.0909 95.8001 48.5312C95.123 48.9716 94.3559 49.1918 93.4989 49.1918C92.8739 49.1918 92.3555 49.0876 91.9435 48.8793C91.5316 48.6709 91.2002 48.42 90.9492 48.1264C90.703 47.8281 90.5112 47.5464 90.3739 47.2812H90.2248V49H87.6964ZM90.2177 43.5455C90.2177 44.2509 90.3171 44.8688 90.516 45.3991C90.7196 45.9295 91.0108 46.3437 91.3896 46.642C91.7731 46.9356 92.2371 47.0824 92.7816 47.0824C93.3498 47.0824 93.8256 46.9309 94.2092 46.6278C94.5927 46.3201 94.8815 45.901 95.0756 45.3707C95.2745 44.8357 95.3739 44.2273 95.3739 43.5455C95.3739 42.8684 95.2769 42.267 95.0827 41.7415C94.8886 41.2159 94.5998 40.804 94.2163 40.5057C93.8327 40.2074 93.3545 40.0582 92.7816 40.0582C92.2324 40.0582 91.766 40.2027 91.3825 40.4915C90.9989 40.7803 90.7077 41.1851 90.5089 41.706C90.3147 42.2268 90.2177 42.84 90.2177 43.5455ZM107.89 34.4545V49H105.255V34.4545H107.89ZM113.201 42.608V49H110.63V38.0909H113.087V39.9446H113.215C113.466 39.3338 113.866 38.8485 114.415 38.4886C114.969 38.1288 115.653 37.9489 116.468 37.9489C117.221 37.9489 117.876 38.1098 118.435 38.4318C118.998 38.7538 119.434 39.2202 119.742 39.831C120.054 40.4418 120.208 41.1828 120.203 42.054V49H117.632V42.4517C117.632 41.7225 117.443 41.152 117.064 40.7401C116.69 40.3281 116.172 40.1222 115.509 40.1222C115.059 40.1222 114.659 40.2216 114.309 40.4205C113.963 40.6146 113.691 40.8963 113.492 41.2656C113.298 41.6349 113.201 42.0824 113.201 42.608ZM128.265 38.0909V40.0795H121.993V38.0909H128.265ZM123.542 35.4773H126.113V45.7188C126.113 46.0644 126.165 46.3295 126.269 46.5142C126.378 46.6941 126.52 46.8172 126.695 46.8835C126.87 46.9498 127.064 46.983 127.277 46.983C127.438 46.983 127.585 46.9711 127.718 46.9474C127.855 46.9238 127.959 46.9025 128.03 46.8835L128.463 48.8935C128.326 48.9408 128.13 48.9929 127.874 49.0497C127.623 49.1065 127.315 49.1397 126.951 49.1491C126.307 49.1681 125.727 49.071 125.211 48.858C124.694 48.6402 124.285 48.304 123.982 47.8494C123.684 47.3949 123.537 46.8267 123.542 46.1449V35.4773ZM135.127 49.2131C134.033 49.2131 133.089 48.9858 132.293 48.5312C131.503 48.072 130.894 47.4233 130.468 46.5852C130.042 45.7424 129.829 44.7505 129.829 43.6094C129.829 42.4872 130.042 41.5024 130.468 40.6548C130.899 39.8026 131.5 39.1397 132.272 38.6662C133.044 38.188 133.951 37.9489 134.992 37.9489C135.665 37.9489 136.299 38.0578 136.896 38.2756C137.497 38.4886 138.027 38.8201 138.487 39.2699C138.951 39.7197 139.315 40.2926 139.58 40.9886C139.845 41.6799 139.978 42.5038 139.978 43.4602V44.2486H131.036V42.5156H137.513C137.509 42.0232 137.402 41.5852 137.194 41.2017C136.986 40.8134 136.694 40.508 136.32 40.2855C135.951 40.063 135.52 39.9517 135.028 39.9517C134.502 39.9517 134.04 40.0795 133.643 40.3352C133.245 40.5862 132.935 40.9176 132.712 41.3295C132.495 41.7367 132.383 42.1842 132.379 42.6719V44.1847C132.379 44.8191 132.495 45.3636 132.727 45.8182C132.959 46.268 133.283 46.6136 133.7 46.8551C134.116 47.0919 134.604 47.2102 135.163 47.2102C135.537 47.2102 135.875 47.1581 136.178 47.054C136.481 46.9451 136.744 46.7865 136.967 46.5781C137.189 46.3698 137.357 46.1117 137.471 45.804L139.871 46.0739C139.72 46.7083 139.431 47.2623 139.005 47.7358C138.584 48.2045 138.044 48.5691 137.386 48.8295C136.728 49.0852 135.975 49.2131 135.127 49.2131ZM146.897 53.3182C145.974 53.3182 145.181 53.1927 144.518 52.9418C143.855 52.6955 143.323 52.3641 142.92 51.9474C142.518 51.5308 142.238 51.0691 142.082 50.5625L144.397 50.0014C144.502 50.2145 144.653 50.4252 144.852 50.6335C145.051 50.8466 145.318 51.0218 145.654 51.1591C145.995 51.3011 146.424 51.3722 146.94 51.3722C147.669 51.3722 148.273 51.1946 148.751 50.8395C149.229 50.4891 149.468 49.9115 149.468 49.1065V47.0398H149.341C149.208 47.3049 149.014 47.5772 148.758 47.8565C148.507 48.1359 148.173 48.3703 147.757 48.5597C147.345 48.7491 146.826 48.8438 146.201 48.8438C145.363 48.8438 144.603 48.6473 143.922 48.2543C143.244 47.8565 142.705 47.2647 142.302 46.4787C141.904 45.688 141.706 44.6984 141.706 43.5099C141.706 42.312 141.904 41.3011 142.302 40.4773C142.705 39.6487 143.247 39.0213 143.929 38.5952C144.61 38.1643 145.37 37.9489 146.208 37.9489C146.848 37.9489 147.373 38.0578 147.785 38.2756C148.202 38.4886 148.533 38.7467 148.779 39.0497C149.026 39.348 149.213 39.6297 149.341 39.8949H149.483V38.0909H152.018V49.1776C152.018 50.1103 151.796 50.8821 151.35 51.4929C150.905 52.1037 150.297 52.5606 149.525 52.8636C148.753 53.1667 147.877 53.3182 146.897 53.3182ZM146.919 46.8267C147.463 46.8267 147.927 46.6941 148.311 46.429C148.694 46.1638 148.985 45.7827 149.184 45.2855C149.383 44.7884 149.483 44.1918 149.483 43.4957C149.483 42.8092 149.383 42.2079 149.184 41.6918C148.99 41.1757 148.701 40.7756 148.318 40.4915C147.939 40.2027 147.473 40.0582 146.919 40.0582C146.346 40.0582 145.868 40.2074 145.484 40.5057C145.1 40.804 144.812 41.2135 144.618 41.7344C144.423 42.2505 144.326 42.8376 144.326 43.4957C144.326 44.1634 144.423 44.7481 144.618 45.25C144.816 45.7472 145.108 46.1354 145.491 46.4148C145.879 46.6894 146.355 46.8267 146.919 46.8267ZM154.653 49V38.0909H157.146V39.9091H157.26C157.458 39.2794 157.799 38.794 158.282 38.4531C158.77 38.1075 159.326 37.9347 159.951 37.9347C160.093 37.9347 160.252 37.9418 160.427 37.956C160.607 37.9654 160.756 37.982 160.875 38.0057V40.3707C160.766 40.3329 160.593 40.2997 160.356 40.2713C160.124 40.2382 159.899 40.2216 159.681 40.2216C159.213 40.2216 158.791 40.3234 158.417 40.527C158.048 40.7259 157.757 41.0028 157.544 41.358C157.331 41.7131 157.224 42.1226 157.224 42.5866V49H154.653ZM165.527 49.2202C164.835 49.2202 164.213 49.0971 163.659 48.8509C163.109 48.5999 162.674 48.2306 162.352 47.7429C162.035 47.2552 161.876 46.6539 161.876 45.9389C161.876 45.3234 161.99 44.8144 162.217 44.4119C162.444 44.0095 162.754 43.6875 163.147 43.446C163.54 43.2045 163.983 43.0223 164.475 42.8991C164.973 42.7713 165.486 42.679 166.017 42.6222C166.656 42.5559 167.174 42.4967 167.572 42.4446C167.97 42.3878 168.259 42.3026 168.439 42.1889C168.623 42.0705 168.716 41.8883 168.716 41.642V41.5994C168.716 41.0644 168.557 40.6501 168.24 40.3565C167.922 40.063 167.466 39.9162 166.869 39.9162C166.239 39.9162 165.74 40.0535 165.37 40.3281C165.006 40.6027 164.76 40.9271 164.632 41.3011L162.231 40.9602C162.421 40.2973 162.733 39.7434 163.169 39.2983C163.604 38.8485 164.137 38.5123 164.767 38.2898C165.396 38.0625 166.092 37.9489 166.855 37.9489C167.38 37.9489 167.904 38.0104 168.424 38.1335C168.945 38.2566 169.421 38.4602 169.852 38.7443C170.283 39.0237 170.628 39.4048 170.889 39.8878C171.154 40.3707 171.287 40.9744 171.287 41.6989V49H168.815V47.5014H168.73C168.574 47.8045 168.353 48.0885 168.069 48.3537C167.79 48.6141 167.437 48.8248 167.011 48.9858C166.59 49.142 166.095 49.2202 165.527 49.2202ZM166.194 47.331C166.71 47.331 167.158 47.2292 167.537 47.0256C167.915 46.8172 168.207 46.5426 168.41 46.2017C168.618 45.8608 168.723 45.4891 168.723 45.0866V43.8011C168.642 43.8674 168.505 43.929 168.311 43.9858C168.121 44.0426 167.908 44.0923 167.672 44.1349C167.435 44.1776 167.2 44.2154 166.968 44.2486C166.736 44.2817 166.535 44.3101 166.365 44.3338C165.981 44.3859 165.638 44.4711 165.335 44.5895C165.032 44.7079 164.793 44.8736 164.618 45.0866C164.442 45.295 164.355 45.5649 164.355 45.8963C164.355 46.3698 164.528 46.7273 164.873 46.9688C165.219 47.2102 165.659 47.331 166.194 47.331ZM179.319 38.0909V40.0795H173.048V38.0909H179.319ZM174.596 35.4773H177.167V45.7188C177.167 46.0644 177.219 46.3295 177.324 46.5142C177.432 46.6941 177.574 46.8172 177.75 46.8835C177.925 46.9498 178.119 46.983 178.332 46.983C178.493 46.983 178.64 46.9711 178.772 46.9474C178.91 46.9238 179.014 46.9025 179.085 46.8835L179.518 48.8935C179.381 48.9408 179.184 48.9929 178.929 49.0497C178.678 49.1065 178.37 49.1397 178.005 49.1491C177.361 49.1681 176.781 49.071 176.265 48.858C175.749 48.6402 175.34 48.304 175.037 47.8494C174.738 47.3949 174.592 46.8267 174.596 46.1449V35.4773ZM181.469 49V38.0909H184.04V49H181.469ZM182.762 36.5426C182.355 36.5426 182.004 36.4077 181.711 36.1378C181.417 35.8632 181.271 35.5341 181.271 35.1506C181.271 34.7623 181.417 34.4332 181.711 34.1634C182.004 33.8887 182.355 33.7514 182.762 33.7514C183.174 33.7514 183.524 33.8887 183.813 34.1634C184.107 34.4332 184.254 34.7623 184.254 35.1506C184.254 35.5341 184.107 35.8632 183.813 36.1378C183.524 36.4077 183.174 36.5426 182.762 36.5426ZM191.443 49.2131C190.377 49.2131 189.454 48.9787 188.673 48.5099C187.892 48.0412 187.286 47.3854 186.855 46.5426C186.429 45.6998 186.216 44.715 186.216 43.5881C186.216 42.4612 186.429 41.474 186.855 40.6264C187.286 39.7789 187.892 39.1207 188.673 38.652C189.454 38.1832 190.377 37.9489 191.443 37.9489C192.508 37.9489 193.431 38.1832 194.213 38.652C194.994 39.1207 195.598 39.7789 196.024 40.6264C196.455 41.474 196.67 42.4612 196.67 43.5881C196.67 44.715 196.455 45.6998 196.024 46.5426C195.598 47.3854 194.994 48.0412 194.213 48.5099C193.431 48.9787 192.508 49.2131 191.443 49.2131ZM191.457 47.1534C192.035 47.1534 192.518 46.9948 192.906 46.6776C193.294 46.3556 193.583 45.9247 193.772 45.3849C193.967 44.8452 194.064 44.2438 194.064 43.581C194.064 42.9134 193.967 42.3097 193.772 41.7699C193.583 41.2254 193.294 40.7921 192.906 40.4702C192.518 40.1482 192.035 39.9872 191.457 39.9872C190.865 39.9872 190.373 40.1482 189.98 40.4702C189.592 40.7921 189.3 41.2254 189.106 41.7699C188.917 42.3097 188.822 42.9134 188.822 43.581C188.822 44.2438 188.917 44.8452 189.106 45.3849C189.3 45.9247 189.592 46.3556 189.98 46.6776C190.373 46.9948 190.865 47.1534 191.457 47.1534ZM201.423 42.608V49H198.852V38.0909H201.31V39.9446H201.438C201.688 39.3338 202.089 38.8485 202.638 38.4886C203.192 38.1288 203.876 37.9489 204.69 37.9489C205.443 37.9489 206.099 38.1098 206.658 38.4318C207.221 38.7538 207.657 39.2202 207.964 39.831C208.277 40.4418 208.431 41.1828 208.426 42.054V49H205.855V42.4517C205.855 41.7225 205.666 41.152 205.287 40.7401C204.913 40.3281 204.394 40.1222 203.732 40.1222C203.282 40.1222 202.882 40.2216 202.531 40.4205C202.186 40.6146 201.913 40.8963 201.714 41.2656C201.52 41.6349 201.423 42.0824 201.423 42.608ZM219.662 40.9744L217.318 41.2301C217.252 40.9934 217.136 40.7708 216.97 40.5625C216.809 40.3542 216.591 40.1861 216.317 40.0582C216.042 39.9304 215.706 39.8665 215.308 39.8665C214.773 39.8665 214.323 39.9825 213.959 40.2145C213.599 40.4465 213.421 40.7472 213.426 41.1165C213.421 41.4337 213.537 41.6918 213.774 41.8906C214.016 42.0895 214.413 42.2528 214.967 42.3807L216.828 42.7784C217.86 43.0009 218.627 43.3537 219.129 43.8366C219.636 44.3196 219.892 44.9517 219.896 45.733C219.892 46.4195 219.69 47.0256 219.293 47.5511C218.9 48.072 218.353 48.4792 217.652 48.7727C216.951 49.0663 216.146 49.2131 215.237 49.2131C213.902 49.2131 212.827 48.9337 212.013 48.375C211.198 47.8116 210.713 47.0279 210.557 46.0241L213.064 45.7827C213.178 46.2751 213.419 46.6468 213.788 46.8977C214.158 47.1487 214.638 47.2741 215.23 47.2741C215.841 47.2741 216.331 47.1487 216.7 46.8977C217.074 46.6468 217.261 46.3366 217.261 45.9673C217.261 45.6548 217.141 45.3968 216.899 45.1932C216.662 44.9896 216.293 44.8333 215.791 44.7244L213.93 44.3338C212.884 44.116 212.11 43.7491 211.608 43.233C211.106 42.7121 210.857 42.054 210.862 41.2585C210.857 40.5862 211.04 40.0038 211.409 39.5114C211.783 39.0142 212.302 38.6307 212.964 38.3608C213.632 38.0862 214.402 37.9489 215.273 37.9489C216.551 37.9489 217.557 38.2211 218.291 38.7656C219.03 39.3101 219.487 40.0464 219.662 40.9744Z" fill="black"/>
+<path d="M414.997 48.6663C414.721 48.6663 414.486 48.5681 414.292 48.3717C414.097 48.1753 414 47.9392 414 47.6634C414 47.3876 414.098 47.1525 414.295 46.958C414.491 46.7636 414.727 46.6663 415.003 46.6663C415.279 46.6663 415.514 46.7645 415.708 46.961C415.903 47.1574 416 47.3935 416 47.6693C416 47.9451 415.902 48.1802 415.705 48.3747C415.509 48.5691 415.273 48.6663 414.997 48.6663ZM414.997 42.9997C414.721 42.9997 414.486 42.9015 414.292 42.705C414.097 42.5086 414 42.2725 414 41.9967C414 41.7209 414.098 41.4858 414.295 41.2913C414.491 41.0969 414.727 40.9997 415.003 40.9997C415.279 40.9997 415.514 41.0979 415.708 41.2943C415.903 41.4907 416 41.7268 416 42.0026C416 42.2784 415.902 42.5136 415.705 42.708C415.509 42.9025 415.273 42.9997 414.997 42.9997ZM414.997 37.333C414.721 37.333 414.486 37.2348 414.292 37.0384C414.097 36.842 414 36.6059 414 36.33C414 36.0542 414.098 35.8191 414.295 35.6247C414.491 35.4302 414.727 35.333 415.003 35.333C415.279 35.333 415.514 35.4312 415.708 35.6276C415.903 35.824 416 36.0601 416 36.336C416 36.6118 415.902 36.8469 415.705 37.0413C415.509 37.2358 415.273 37.333 414.997 37.333Z" fill="black"/>
+<path d="M376.229 47.421L379.942 45.1864L383.655 47.446L382.673 43.2172L385.94 40.3807L381.63 39.9999L379.942 36.0211L378.254 39.9749L373.944 40.3557L377.211 43.2018L376.229 47.421ZM379.942 46.5133L375.686 49.0825C375.579 49.1402 375.469 49.1665 375.357 49.1614C375.246 49.1563 375.145 49.1216 375.054 49.0575C374.963 48.9934 374.894 48.9092 374.849 48.8047C374.803 48.7002 374.797 48.5838 374.83 48.4556L375.95 43.6172L372.205 40.3499C372.104 40.2653 372.041 40.1682 372.016 40.0586C371.991 39.949 371.995 39.8403 372.029 39.7326C372.056 39.6314 372.113 39.5461 372.201 39.4769C372.289 39.4076 372.397 39.3679 372.525 39.3576L377.479 38.9211L379.405 34.3442C379.459 34.2327 379.535 34.1474 379.633 34.0884C379.731 34.0295 379.834 34 379.942 34C380.05 34 380.153 34.0295 380.251 34.0884C380.349 34.1474 380.425 34.2327 380.478 34.3442L382.405 38.9211L387.359 39.3576C387.487 39.3679 387.595 39.4076 387.683 39.4769C387.771 39.5461 387.832 39.6314 387.865 39.7326C387.892 39.8403 387.893 39.949 387.868 40.0586C387.843 40.1682 387.78 40.2653 387.678 40.3499L383.934 43.6172L385.063 48.4556C385.09 48.5838 385.081 48.7002 385.035 48.8047C384.99 48.9092 384.921 48.9934 384.83 49.0575C384.739 49.1216 384.638 49.1563 384.527 49.1614C384.415 49.1665 384.305 49.1402 384.198 49.0825L379.942 46.5133Z" fill="#858E96"/>
+<path d="M241.029 83V74.2727H246.297V75.2102H242.086V78.1591H246.024V79.0966H242.086V82.0625H246.365V83H241.029ZM249.071 79.0625V83H248.065V76.4545H249.037V77.4773H249.122C249.275 77.1449 249.508 76.8778 249.821 76.6761C250.133 76.4716 250.537 76.3693 251.031 76.3693C251.474 76.3693 251.862 76.4602 252.194 76.642C252.527 76.821 252.785 77.0938 252.97 77.4602C253.154 77.8239 253.247 78.2841 253.247 78.8409V83H252.241V78.9091C252.241 78.3949 252.108 77.9943 251.841 77.7074C251.574 77.4176 251.207 77.2727 250.741 77.2727C250.42 77.2727 250.133 77.3423 249.88 77.4815C249.63 77.6207 249.433 77.8239 249.288 78.0909C249.143 78.358 249.071 78.6818 249.071 79.0625ZM257.556 83.1364C257.011 83.1364 256.529 82.9986 256.112 82.723C255.694 82.4446 255.367 82.0526 255.131 81.5469C254.896 81.0384 254.778 80.4375 254.778 79.7443C254.778 79.0568 254.896 78.4602 255.131 77.9545C255.367 77.4489 255.695 77.0582 256.116 76.7827C256.536 76.5071 257.022 76.3693 257.573 76.3693C257.999 76.3693 258.336 76.4403 258.583 76.5824C258.833 76.7216 259.023 76.8807 259.154 77.0597C259.288 77.2358 259.391 77.3807 259.465 77.4943H259.55V74.2727H260.556V83H259.585V81.9943H259.465C259.391 82.1136 259.286 82.2642 259.15 82.446C259.013 82.625 258.819 82.7855 258.566 82.9276C258.313 83.0668 257.977 83.1364 257.556 83.1364ZM257.692 82.233C258.096 82.233 258.437 82.1278 258.715 81.9176C258.994 81.7045 259.205 81.4105 259.35 81.0355C259.495 80.6577 259.567 80.2216 259.567 79.7273C259.567 79.2386 259.496 78.8111 259.354 78.4446C259.212 78.0753 259.002 77.7884 258.724 77.5838C258.445 77.3764 258.102 77.2727 257.692 77.2727C257.266 77.2727 256.911 77.3821 256.627 77.6009C256.346 77.8168 256.134 78.1108 255.992 78.483C255.853 78.8523 255.783 79.267 255.783 79.7273C255.783 80.1932 255.854 80.6165 255.996 80.9972C256.141 81.375 256.354 81.6761 256.636 81.9006C256.92 82.1222 257.272 82.233 257.692 82.233ZM266.646 83.0682C266.435 83.0682 266.255 82.9929 266.104 82.8423C265.954 82.6918 265.879 82.5114 265.879 82.3011C265.879 82.0909 265.954 81.9105 266.104 81.7599C266.255 81.6094 266.435 81.5341 266.646 81.5341C266.856 81.5341 267.036 81.6094 267.187 81.7599C267.337 81.9105 267.413 82.0909 267.413 82.3011C267.413 82.4403 267.377 82.5682 267.306 82.6847C267.238 82.8011 267.146 82.8949 267.029 82.9659C266.915 83.0341 266.788 83.0682 266.646 83.0682ZM266.646 78.2102C266.435 78.2102 266.255 78.1349 266.104 77.9844C265.954 77.8338 265.879 77.6534 265.879 77.4432C265.879 77.233 265.954 77.0526 266.104 76.902C266.255 76.7514 266.435 76.6761 266.646 76.6761C266.856 76.6761 267.036 76.7514 267.187 76.902C267.337 77.0526 267.413 77.233 267.413 77.4432C267.413 77.5824 267.377 77.7102 267.306 77.8267C267.238 77.9432 267.146 78.0369 267.029 78.108C266.915 78.1761 266.788 78.2102 266.646 78.2102Z" fill="#858E96"/>
+<path d="M273.087 83H271.979L275.183 74.2727H276.274L279.479 83H278.371L275.763 75.6534H275.695L273.087 83ZM273.496 79.5909H277.962V80.5284H273.496V79.5909ZM280.702 85.4545V76.4545H281.673V77.4943H281.793C281.866 77.3807 281.969 77.2358 282.099 77.0597C282.233 76.8807 282.423 76.7216 282.67 76.5824C282.92 76.4403 283.259 76.3693 283.685 76.3693C284.236 76.3693 284.722 76.5071 285.142 76.7827C285.563 77.0582 285.891 77.4489 286.126 77.9545C286.362 78.4602 286.48 79.0568 286.48 79.7443C286.48 80.4375 286.362 81.0384 286.126 81.5469C285.891 82.0526 285.564 82.4446 285.146 82.723C284.729 82.9986 284.247 83.1364 283.702 83.1364C283.281 83.1364 282.945 83.0668 282.692 82.9276C282.439 82.7855 282.244 82.625 282.108 82.446C281.972 82.2642 281.866 82.1136 281.793 81.9943H281.707V85.4545H280.702ZM281.69 79.7273C281.69 80.2216 281.763 80.6577 281.908 81.0355C282.053 81.4105 282.264 81.7045 282.543 81.9176C282.821 82.1278 283.162 82.233 283.565 82.233C283.986 82.233 284.337 82.1222 284.618 81.9006C284.902 81.6761 285.115 81.375 285.257 80.9972C285.402 80.6165 285.474 80.1932 285.474 79.7273C285.474 79.267 285.403 78.8523 285.261 78.483C285.122 78.1108 284.911 77.8168 284.626 77.6009C284.345 77.3821 283.991 77.2727 283.565 77.2727C283.156 77.2727 282.813 77.3764 282.534 77.5838C282.256 77.7884 282.045 78.0753 281.903 78.4446C281.761 78.8111 281.69 79.2386 281.69 79.7273ZM288.014 83V76.4545H288.986V77.4432H289.054C289.173 77.1193 289.389 76.8565 289.702 76.6548C290.014 76.4531 290.366 76.3523 290.759 76.3523C290.832 76.3523 290.925 76.3537 291.036 76.3565C291.146 76.3594 291.23 76.3636 291.287 76.3693V77.392C291.253 77.3835 291.175 77.3707 291.053 77.3537C290.933 77.3338 290.807 77.3239 290.673 77.3239C290.355 77.3239 290.071 77.3906 289.821 77.5241C289.574 77.6548 289.378 77.8366 289.233 78.0696C289.091 78.2997 289.02 78.5625 289.02 78.858V83H288.014ZM298.905 74.2727V83H297.848V75.3807H297.797L295.667 76.7955V75.7216L297.848 74.2727H298.905ZM304.313 83.1193C303.955 83.1136 303.597 83.0455 303.239 82.9148C302.881 82.7841 302.554 82.5639 302.259 82.2543C301.963 81.9418 301.726 81.5199 301.547 80.9886C301.368 80.4545 301.279 79.7841 301.279 78.9773C301.279 78.2045 301.351 77.5199 301.496 76.9233C301.641 76.3239 301.851 75.8196 302.127 75.4105C302.402 74.9986 302.735 74.6861 303.124 74.473C303.516 74.2599 303.958 74.1534 304.449 74.1534C304.938 74.1534 305.373 74.2514 305.753 74.4474C306.137 74.6406 306.449 74.9105 306.691 75.2571C306.932 75.6037 307.088 76.0028 307.159 76.4545H306.12C306.023 76.0625 305.836 75.7372 305.557 75.4787C305.279 75.2202 304.909 75.0909 304.449 75.0909C303.773 75.0909 303.24 75.3849 302.851 75.973C302.465 76.5611 302.27 77.3864 302.267 78.4489H302.336C302.495 78.2074 302.684 78.0014 302.902 77.831C303.124 77.6577 303.368 77.5241 303.635 77.4304C303.902 77.3366 304.185 77.2898 304.483 77.2898C304.983 77.2898 305.441 77.4148 305.855 77.6648C306.27 77.9119 306.603 78.2543 306.853 78.6918C307.103 79.1264 307.228 79.625 307.228 80.1875C307.228 80.7273 307.107 81.2216 306.865 81.6705C306.624 82.1165 306.284 82.4716 305.847 82.7358C305.412 82.9972 304.901 83.125 304.313 83.1193ZM304.313 82.1818C304.671 82.1818 304.992 82.0923 305.276 81.9134C305.563 81.7344 305.789 81.4943 305.953 81.1932C306.121 80.892 306.205 80.5568 306.205 80.1875C306.205 79.8267 306.124 79.4986 305.962 79.2031C305.803 78.9048 305.583 78.6676 305.301 78.4915C305.023 78.3153 304.705 78.2273 304.347 78.2273C304.077 78.2273 303.826 78.2812 303.593 78.3892C303.36 78.4943 303.155 78.6392 302.979 78.8239C302.806 79.0085 302.669 79.2202 302.57 79.4588C302.471 79.6946 302.421 79.9432 302.421 80.2045C302.421 80.5511 302.502 80.875 302.664 81.1761C302.828 81.4773 303.053 81.7202 303.337 81.9048C303.624 82.0895 303.949 82.1818 304.313 82.1818ZM310.01 81.8068L309.942 82.267C309.894 82.5909 309.82 82.9375 309.721 83.3068C309.624 83.6761 309.523 84.0241 309.418 84.3509C309.313 84.6776 309.226 84.9375 309.158 85.1307H308.391C308.428 84.9489 308.476 84.7088 308.536 84.4105C308.596 84.1122 308.655 83.7784 308.715 83.4091C308.777 83.0426 308.828 82.6676 308.868 82.2841L308.919 81.8068H310.01ZM315.232 83V82.233L318.112 79.0795C318.45 78.7102 318.729 78.3892 318.947 78.1165C319.166 77.8409 319.328 77.5824 319.433 77.3409C319.541 77.0966 319.595 76.8409 319.595 76.5739C319.595 76.267 319.521 76.0014 319.374 75.777C319.229 75.5526 319.03 75.3793 318.777 75.2571C318.524 75.1349 318.24 75.0739 317.925 75.0739C317.589 75.0739 317.297 75.1435 317.047 75.2827C316.8 75.419 316.608 75.6108 316.472 75.858C316.338 76.1051 316.271 76.3949 316.271 76.7273H315.266C315.266 76.2159 315.384 75.767 315.619 75.3807C315.855 74.9943 316.176 74.6932 316.582 74.4773C316.991 74.2614 317.45 74.1534 317.959 74.1534C318.47 74.1534 318.923 74.2614 319.318 74.4773C319.713 74.6932 320.023 74.9844 320.247 75.3509C320.472 75.7173 320.584 76.125 320.584 76.5739C320.584 76.8949 320.526 77.2088 320.409 77.5156C320.295 77.8196 320.097 78.1591 319.812 78.5341C319.531 78.9062 319.141 79.3608 318.641 79.8977L316.68 81.9943V82.0625H320.737V83H315.232ZM325.344 83.1193C324.702 83.1193 324.155 82.9446 323.703 82.5952C323.251 82.2429 322.906 81.733 322.668 81.0653C322.429 80.3949 322.31 79.5852 322.31 78.6364C322.31 77.6932 322.429 76.8878 322.668 76.2202C322.909 75.5497 323.256 75.0384 323.707 74.6861C324.162 74.331 324.707 74.1534 325.344 74.1534C325.98 74.1534 326.524 74.331 326.976 74.6861C327.43 75.0384 327.777 75.5497 328.016 76.2202C328.257 76.8878 328.378 77.6932 328.378 78.6364C328.378 79.5852 328.259 80.3949 328.02 81.0653C327.781 81.733 327.436 82.2429 326.984 82.5952C326.533 82.9446 325.986 83.1193 325.344 83.1193ZM325.344 82.1818C325.98 82.1818 326.474 81.875 326.827 81.2614C327.179 80.6477 327.355 79.7727 327.355 78.6364C327.355 77.8807 327.274 77.2372 327.112 76.706C326.953 76.1747 326.723 75.7699 326.422 75.4915C326.124 75.2131 325.764 75.0739 325.344 75.0739C324.713 75.0739 324.22 75.3849 323.865 76.0071C323.51 76.6264 323.332 77.5028 323.332 78.6364C323.332 79.392 323.412 80.0341 323.571 80.5625C323.73 81.0909 323.959 81.4929 324.257 81.7685C324.558 82.044 324.92 82.1818 325.344 82.1818ZM329.997 83V82.233L332.878 79.0795C333.216 78.7102 333.494 78.3892 333.713 78.1165C333.932 77.8409 334.094 77.5824 334.199 77.3409C334.307 77.0966 334.361 76.8409 334.361 76.5739C334.361 76.267 334.287 76.0014 334.139 75.777C333.994 75.5526 333.795 75.3793 333.543 75.2571C333.29 75.1349 333.006 75.0739 332.69 75.0739C332.355 75.0739 332.062 75.1435 331.812 75.2827C331.565 75.419 331.374 75.6108 331.237 75.858C331.104 76.1051 331.037 76.3949 331.037 76.7273H330.031C330.031 76.2159 330.149 75.767 330.385 75.3807C330.621 74.9943 330.942 74.6932 331.348 74.4773C331.757 74.2614 332.216 74.1534 332.724 74.1534C333.236 74.1534 333.689 74.2614 334.084 74.4773C334.479 74.6932 334.788 74.9844 335.013 75.3509C335.237 75.7173 335.349 76.125 335.349 76.5739C335.349 76.8949 335.291 77.2088 335.175 77.5156C335.061 77.8196 334.862 78.1591 334.578 78.5341C334.297 78.9062 333.906 79.3608 333.406 79.8977L331.446 81.9943V82.0625H335.503V83H329.997ZM340.212 83.1193C339.649 83.1193 339.148 83.0227 338.707 82.8295C338.27 82.6364 337.922 82.3679 337.663 82.0241C337.408 81.6776 337.268 81.2756 337.246 80.8182H338.32C338.342 81.0994 338.439 81.3423 338.609 81.5469C338.78 81.7486 339.003 81.9048 339.278 82.0156C339.554 82.1264 339.859 82.1818 340.195 82.1818C340.57 82.1818 340.902 82.1165 341.192 81.9858C341.482 81.8551 341.709 81.6733 341.874 81.4403C342.038 81.2074 342.121 80.9375 342.121 80.6307C342.121 80.3097 342.041 80.027 341.882 79.7827C341.723 79.5355 341.49 79.3423 341.183 79.2031C340.876 79.0639 340.501 78.9943 340.058 78.9943H339.359V78.0568H340.058C340.405 78.0568 340.709 77.9943 340.97 77.8693C341.234 77.7443 341.44 77.5682 341.588 77.3409C341.739 77.1136 341.814 76.8466 341.814 76.5398C341.814 76.2443 341.749 75.9872 341.618 75.7685C341.487 75.5497 341.303 75.3793 341.064 75.2571C340.828 75.1349 340.55 75.0739 340.229 75.0739C339.928 75.0739 339.643 75.1293 339.376 75.2401C339.112 75.348 338.896 75.5057 338.729 75.7131C338.561 75.9176 338.47 76.1648 338.456 76.4545H337.433C337.45 75.9972 337.588 75.5966 337.847 75.2528C338.105 74.9062 338.443 74.6364 338.861 74.4432C339.281 74.25 339.743 74.1534 340.246 74.1534C340.786 74.1534 341.249 74.2628 341.635 74.4815C342.021 74.6974 342.318 74.983 342.526 75.3381C342.733 75.6932 342.837 76.0767 342.837 76.4886C342.837 76.9801 342.707 77.3991 342.449 77.7457C342.193 78.0923 341.845 78.3324 341.405 78.4659V78.5341C341.956 78.625 342.386 78.8594 342.696 79.2372C343.006 79.6122 343.161 80.0767 343.161 80.6307C343.161 81.1051 343.031 81.5312 342.773 81.9091C342.517 82.2841 342.168 82.5795 341.724 82.7955C341.281 83.0114 340.777 83.1193 340.212 83.1193Z" fill="#212529"/>
+<rect x="220" y="71" width="16" height="16" fill="url(#pattern0)"/>
+<path d="M110.415 107.273L113.006 114.619H113.108L115.699 107.273H116.807L113.602 116H112.511L109.307 107.273H110.415ZM119.347 116.153C118.932 116.153 118.555 116.075 118.217 115.919C117.879 115.76 117.611 115.531 117.412 115.233C117.213 114.932 117.114 114.568 117.114 114.142C117.114 113.767 117.188 113.463 117.335 113.23C117.483 112.994 117.68 112.81 117.928 112.676C118.175 112.543 118.447 112.443 118.746 112.378C119.047 112.31 119.349 112.256 119.653 112.216C120.051 112.165 120.374 112.126 120.621 112.101C120.871 112.072 121.053 112.026 121.166 111.96C121.283 111.895 121.341 111.781 121.341 111.619V111.585C121.341 111.165 121.226 110.838 120.996 110.605C120.768 110.372 120.423 110.256 119.96 110.256C119.48 110.256 119.104 110.361 118.831 110.571C118.558 110.781 118.366 111.006 118.256 111.244L117.301 110.903C117.472 110.506 117.699 110.196 117.983 109.974C118.27 109.75 118.582 109.594 118.92 109.506C119.261 109.415 119.597 109.369 119.926 109.369C120.136 109.369 120.378 109.395 120.651 109.446C120.926 109.494 121.192 109.595 121.447 109.749C121.706 109.902 121.92 110.134 122.091 110.443C122.261 110.753 122.347 111.168 122.347 111.688V116H121.341V115.114H121.29C121.222 115.256 121.108 115.408 120.949 115.57C120.79 115.732 120.578 115.869 120.314 115.983C120.05 116.097 119.727 116.153 119.347 116.153ZM119.5 115.25C119.898 115.25 120.233 115.172 120.506 115.016C120.781 114.859 120.989 114.658 121.128 114.411C121.27 114.163 121.341 113.903 121.341 113.631V112.71C121.298 112.761 121.205 112.808 121.06 112.851C120.918 112.891 120.753 112.926 120.565 112.957C120.381 112.986 120.2 113.011 120.024 113.034C119.851 113.054 119.71 113.071 119.602 113.085C119.341 113.119 119.097 113.175 118.869 113.251C118.645 113.325 118.463 113.437 118.324 113.588C118.188 113.736 118.119 113.937 118.119 114.193C118.119 114.543 118.249 114.807 118.507 114.986C118.768 115.162 119.099 115.25 119.5 115.25ZM124.182 116V109.455H125.154V110.477H125.239C125.375 110.128 125.596 109.857 125.9 109.663C126.203 109.467 126.569 109.369 126.995 109.369C127.426 109.369 127.786 109.467 128.073 109.663C128.363 109.857 128.588 110.128 128.75 110.477H128.819C128.986 110.139 129.238 109.871 129.573 109.672C129.908 109.47 130.31 109.369 130.779 109.369C131.364 109.369 131.843 109.553 132.215 109.919C132.587 110.283 132.773 110.849 132.773 111.619V116H131.767V111.619C131.767 111.136 131.635 110.791 131.371 110.584C131.107 110.376 130.796 110.273 130.438 110.273C129.978 110.273 129.621 110.412 129.368 110.69C129.115 110.966 128.989 111.315 128.989 111.739V116H127.966V111.517C127.966 111.145 127.846 110.845 127.604 110.618C127.363 110.388 127.051 110.273 126.671 110.273C126.409 110.273 126.165 110.342 125.938 110.482C125.713 110.621 125.532 110.814 125.392 111.061C125.256 111.305 125.188 111.588 125.188 111.909V116H124.182ZM139.248 110.92L138.345 111.176C138.288 111.026 138.204 110.879 138.093 110.737C137.985 110.592 137.838 110.473 137.65 110.379C137.463 110.286 137.223 110.239 136.93 110.239C136.529 110.239 136.196 110.331 135.929 110.516C135.664 110.697 135.532 110.929 135.532 111.21C135.532 111.46 135.623 111.658 135.805 111.803C135.987 111.947 136.271 112.068 136.657 112.165L137.629 112.403C138.214 112.545 138.65 112.763 138.937 113.055C139.224 113.345 139.368 113.719 139.368 114.176C139.368 114.551 139.26 114.886 139.044 115.182C138.831 115.477 138.532 115.71 138.149 115.881C137.765 116.051 137.319 116.136 136.811 116.136C136.143 116.136 135.591 115.991 135.153 115.702C134.716 115.412 134.439 114.989 134.322 114.432L135.277 114.193C135.368 114.545 135.539 114.81 135.792 114.986C136.048 115.162 136.382 115.25 136.794 115.25C137.262 115.25 137.635 115.151 137.91 114.952C138.189 114.75 138.328 114.509 138.328 114.227C138.328 114 138.248 113.81 138.089 113.656C137.93 113.5 137.686 113.384 137.356 113.307L136.265 113.051C135.666 112.909 135.225 112.689 134.944 112.391C134.666 112.089 134.527 111.713 134.527 111.261C134.527 110.892 134.63 110.565 134.838 110.281C135.048 109.997 135.333 109.774 135.694 109.612C136.058 109.45 136.47 109.369 136.93 109.369C137.578 109.369 138.086 109.511 138.456 109.795C138.828 110.08 139.092 110.455 139.248 110.92ZM140.881 116V109.455H141.887V116H140.881ZM141.393 108.364C141.197 108.364 141.028 108.297 140.886 108.163C140.746 108.03 140.677 107.869 140.677 107.682C140.677 107.494 140.746 107.334 140.886 107.2C141.028 107.067 141.197 107 141.393 107C141.589 107 141.756 107.067 141.896 107.2C142.038 107.334 142.109 107.494 142.109 107.682C142.109 107.869 142.038 108.03 141.896 108.163C141.756 108.297 141.589 108.364 141.393 108.364ZM147.24 116V107.273H148.297V111.602H148.4L152.32 107.273H153.701L150.036 111.21L153.701 116H152.422L149.388 111.943L148.297 113.17V116H147.24ZM158.647 113.324V109.455H159.653V116H158.647V114.892H158.579C158.425 115.224 158.187 115.507 157.863 115.74C157.539 115.97 157.13 116.085 156.636 116.085C156.227 116.085 155.863 115.996 155.545 115.817C155.227 115.635 154.977 115.362 154.795 114.999C154.613 114.632 154.522 114.17 154.522 113.614V109.455H155.528V113.545C155.528 114.023 155.661 114.403 155.928 114.688C156.198 114.972 156.542 115.114 156.96 115.114C157.21 115.114 157.464 115.05 157.722 114.922C157.984 114.794 158.202 114.598 158.379 114.334C158.558 114.07 158.647 113.733 158.647 113.324ZM161.495 116V109.455H162.466V110.443H162.534C162.654 110.119 162.87 109.857 163.182 109.655C163.495 109.453 163.847 109.352 164.239 109.352C164.313 109.352 164.405 109.354 164.516 109.357C164.627 109.359 164.711 109.364 164.767 109.369V110.392C164.733 110.384 164.655 110.371 164.533 110.354C164.414 110.334 164.287 110.324 164.154 110.324C163.836 110.324 163.551 110.391 163.301 110.524C163.054 110.655 162.858 110.837 162.713 111.07C162.571 111.3 162.5 111.562 162.5 111.858V116H161.495ZM167.886 116.153C167.471 116.153 167.094 116.075 166.756 115.919C166.418 115.76 166.15 115.531 165.951 115.233C165.752 114.932 165.653 114.568 165.653 114.142C165.653 113.767 165.727 113.463 165.874 113.23C166.022 112.994 166.219 112.81 166.467 112.676C166.714 112.543 166.987 112.443 167.285 112.378C167.586 112.31 167.888 112.256 168.192 112.216C168.59 112.165 168.913 112.126 169.16 112.101C169.41 112.072 169.592 112.026 169.705 111.96C169.822 111.895 169.88 111.781 169.88 111.619V111.585C169.88 111.165 169.765 110.838 169.535 110.605C169.308 110.372 168.962 110.256 168.499 110.256C168.019 110.256 167.643 110.361 167.37 110.571C167.097 110.781 166.906 111.006 166.795 111.244L165.84 110.903C166.011 110.506 166.238 110.196 166.522 109.974C166.809 109.75 167.121 109.594 167.46 109.506C167.8 109.415 168.136 109.369 168.465 109.369C168.675 109.369 168.917 109.395 169.19 109.446C169.465 109.494 169.731 109.595 169.987 109.749C170.245 109.902 170.46 110.134 170.63 110.443C170.8 110.753 170.886 111.168 170.886 111.688V116H169.88V115.114H169.829C169.761 115.256 169.647 115.408 169.488 115.57C169.329 115.732 169.117 115.869 168.853 115.983C168.589 116.097 168.266 116.153 167.886 116.153ZM168.039 115.25C168.437 115.25 168.772 115.172 169.045 115.016C169.32 114.859 169.528 114.658 169.667 114.411C169.809 114.163 169.88 113.903 169.88 113.631V112.71C169.837 112.761 169.744 112.808 169.599 112.851C169.457 112.891 169.292 112.926 169.104 112.957C168.92 112.986 168.739 113.011 168.563 113.034C168.39 113.054 168.249 113.071 168.141 113.085C167.88 113.119 167.636 113.175 167.408 113.251C167.184 113.325 167.002 113.437 166.863 113.588C166.727 113.736 166.658 113.937 166.658 114.193C166.658 114.543 166.788 114.807 167.046 114.986C167.308 115.162 167.638 115.25 168.039 115.25ZM172.721 116V109.455H173.693V110.477H173.778C173.914 110.128 174.135 109.857 174.439 109.663C174.743 109.467 175.108 109.369 175.534 109.369C175.966 109.369 176.325 109.467 176.612 109.663C176.902 109.857 177.127 110.128 177.289 110.477H177.358C177.525 110.139 177.777 109.871 178.112 109.672C178.447 109.47 178.849 109.369 179.318 109.369C179.903 109.369 180.382 109.553 180.754 109.919C181.126 110.283 181.312 110.849 181.312 111.619V116H180.306V111.619C180.306 111.136 180.174 110.791 179.91 110.584C179.646 110.376 179.335 110.273 178.977 110.273C178.517 110.273 178.16 110.412 177.907 110.69C177.654 110.966 177.528 111.315 177.528 111.739V116H176.505V111.517C176.505 111.145 176.385 110.845 176.143 110.618C175.902 110.388 175.591 110.273 175.21 110.273C174.949 110.273 174.704 110.342 174.477 110.482C174.252 110.621 174.071 110.814 173.931 111.061C173.795 111.305 173.727 111.588 173.727 111.909V116H172.721ZM185.077 116.153C184.662 116.153 184.286 116.075 183.948 115.919C183.61 115.76 183.341 115.531 183.142 115.233C182.944 114.932 182.844 114.568 182.844 114.142C182.844 113.767 182.918 113.463 183.066 113.23C183.213 112.994 183.411 112.81 183.658 112.676C183.905 112.543 184.178 112.443 184.476 112.378C184.777 112.31 185.08 112.256 185.384 112.216C185.782 112.165 186.104 112.126 186.351 112.101C186.601 112.072 186.783 112.026 186.897 111.96C187.013 111.895 187.071 111.781 187.071 111.619V111.585C187.071 111.165 186.956 110.838 186.726 110.605C186.499 110.372 186.154 110.256 185.691 110.256C185.211 110.256 184.834 110.361 184.561 110.571C184.289 110.781 184.097 111.006 183.986 111.244L183.032 110.903C183.202 110.506 183.429 110.196 183.713 109.974C184 109.75 184.313 109.594 184.651 109.506C184.992 109.415 185.327 109.369 185.657 109.369C185.867 109.369 186.108 109.395 186.381 109.446C186.657 109.494 186.922 109.595 187.178 109.749C187.436 109.902 187.651 110.134 187.821 110.443C187.992 110.753 188.077 111.168 188.077 111.688V116H187.071V115.114H187.02C186.952 115.256 186.838 115.408 186.679 115.57C186.52 115.732 186.309 115.869 186.044 115.983C185.78 116.097 185.458 116.153 185.077 116.153ZM185.23 115.25C185.628 115.25 185.963 115.172 186.236 115.016C186.512 114.859 186.719 114.658 186.858 114.411C187 114.163 187.071 113.903 187.071 113.631V112.71C187.029 112.761 186.935 112.808 186.79 112.851C186.648 112.891 186.483 112.926 186.296 112.957C186.111 112.986 185.931 113.011 185.755 113.034C185.581 113.054 185.441 113.071 185.333 113.085C185.071 113.119 184.827 113.175 184.6 113.251C184.375 113.325 184.194 113.437 184.054 113.588C183.918 113.736 183.85 113.937 183.85 114.193C183.85 114.543 183.979 114.807 184.238 114.986C184.499 115.162 184.83 115.25 185.23 115.25Z" fill="#2E3337"/>
+<circle cx="95.5" cy="111.5" r="6.5" fill="#F7AE59"/>
+<path d="M93.9432 109.182L95.6705 114.08H95.7386L97.4659 109.182H98.2045L96.0682 115H95.3409L93.2045 109.182H93.9432Z" fill="white"/>
+<path d="M36.2378 115.282C36.8503 114.854 37.458 114.526 38.0607 114.297C38.6635 114.069 39.31 113.954 40.0003 113.954C40.6906 113.954 41.3396 114.069 41.9472 114.297C42.5548 114.526 43.1649 114.854 43.7774 115.282C44.2052 114.757 44.509 114.227 44.6889 113.692C44.8687 113.157 44.9587 112.593 44.9587 112C44.9587 110.591 44.4847 109.412 43.5368 108.464C42.5889 107.516 41.41 107.042 40.0003 107.042C38.5906 107.042 37.4118 107.516 36.4639 108.464C35.516 109.412 35.042 110.591 35.042 112C35.042 112.593 35.1344 113.157 35.3191 113.692C35.5038 114.227 35.81 114.757 36.2378 115.282ZM40.0003 112.438C39.4364 112.438 38.9625 112.246 38.5785 111.862C38.1944 111.478 38.0024 111.004 38.0024 110.44C38.0024 109.876 38.1944 109.402 38.5785 109.018C38.9625 108.634 39.4364 108.442 40.0003 108.442C40.5642 108.442 41.0382 108.634 41.4222 109.018C41.8062 109.402 41.9982 109.876 41.9982 110.44C41.9982 111.004 41.8062 111.478 41.4222 111.862C41.0382 112.246 40.5642 112.438 40.0003 112.438ZM40.0003 117.834C39.2031 117.834 38.4496 117.681 37.7399 117.374C37.0302 117.068 36.4104 116.65 35.8805 116.12C35.3507 115.59 34.9326 114.97 34.6264 114.261C34.3201 113.551 34.167 112.798 34.167 112C34.167 111.193 34.3201 110.437 34.6264 109.733C34.9326 109.028 35.3507 108.41 35.8805 107.881C36.4104 107.351 37.0302 106.933 37.7399 106.626C38.4496 106.32 39.2031 106.167 40.0003 106.167C40.8073 106.167 41.5632 106.32 42.268 106.626C42.9729 106.933 43.5903 107.351 44.1201 107.881C44.65 108.41 45.068 109.028 45.3743 109.733C45.6805 110.437 45.8337 111.193 45.8337 112C45.8337 112.798 45.6805 113.551 45.3743 114.261C45.068 114.97 44.65 115.59 44.1201 116.12C43.5903 116.65 42.9729 117.068 42.268 117.374C41.5632 117.681 40.8073 117.834 40.0003 117.834ZM40.0003 116.959C40.535 116.959 41.0576 116.881 41.568 116.725C42.0785 116.57 42.5816 116.298 43.0774 115.909C42.5816 115.559 42.076 115.291 41.5607 115.107C41.0455 114.922 40.5253 114.829 40.0003 114.829C39.4753 114.829 38.9552 114.922 38.4399 115.107C37.9246 115.291 37.4191 115.559 36.9232 115.909C37.4191 116.298 37.9222 116.57 38.4326 116.725C38.943 116.881 39.4656 116.959 40.0003 116.959ZM40.0003 111.563C40.3309 111.563 40.6007 111.458 40.8097 111.249C41.0187 111.04 41.1232 110.77 41.1232 110.44C41.1232 110.109 41.0187 109.84 40.8097 109.631C40.6007 109.422 40.3309 109.317 40.0003 109.317C39.6698 109.317 39.4 109.422 39.191 109.631C38.9819 109.84 38.8774 110.109 38.8774 110.44C38.8774 110.77 38.9819 111.04 39.191 111.249C39.4 111.458 39.6698 111.563 40.0003 111.563Z" fill="#212529"/>
+<path d="M54.0568 116V107.273H55.1136V115.062H59.1705V116H54.0568ZM63.4148 116.136C62.7841 116.136 62.2401 115.997 61.7827 115.719C61.3281 115.438 60.9773 115.045 60.7301 114.543C60.4858 114.037 60.3636 113.449 60.3636 112.778C60.3636 112.108 60.4858 111.517 60.7301 111.006C60.9773 110.491 61.321 110.091 61.7614 109.804C62.2045 109.514 62.7216 109.369 63.3125 109.369C63.6534 109.369 63.9901 109.426 64.3224 109.54C64.6548 109.653 64.9574 109.838 65.2301 110.094C65.5028 110.347 65.7202 110.682 65.8821 111.099C66.044 111.517 66.125 112.031 66.125 112.642V113.068H61.0795V112.199H65.1023C65.1023 111.83 65.0284 111.5 64.8807 111.21C64.7358 110.92 64.5284 110.692 64.2585 110.524C63.9915 110.357 63.6761 110.273 63.3125 110.273C62.9119 110.273 62.5653 110.372 62.2727 110.571C61.983 110.767 61.7599 111.023 61.6037 111.338C61.4474 111.653 61.3693 111.991 61.3693 112.352V112.932C61.3693 113.426 61.4545 113.845 61.625 114.189C61.7983 114.53 62.0384 114.79 62.3452 114.969C62.652 115.145 63.0085 115.233 63.4148 115.233C63.679 115.233 63.9176 115.196 64.1307 115.122C64.3466 115.045 64.5327 114.932 64.6889 114.781C64.8452 114.628 64.9659 114.437 65.0511 114.21L66.0227 114.483C65.9205 114.812 65.7486 115.102 65.5071 115.352C65.2656 115.599 64.9673 115.793 64.6122 115.932C64.2571 116.068 63.858 116.136 63.4148 116.136ZM69.581 116.153C69.1662 116.153 68.7898 116.075 68.4517 115.919C68.1136 115.76 67.8452 115.531 67.6463 115.233C67.4474 114.932 67.348 114.568 67.348 114.142C67.348 113.767 67.4219 113.463 67.5696 113.23C67.7173 112.994 67.9148 112.81 68.1619 112.676C68.4091 112.543 68.6818 112.443 68.9801 112.378C69.2813 112.31 69.5838 112.256 69.8878 112.216C70.2855 112.165 70.608 112.126 70.8551 112.101C71.1051 112.072 71.2869 112.026 71.4006 111.96C71.517 111.895 71.5753 111.781 71.5753 111.619V111.585C71.5753 111.165 71.4602 110.838 71.2301 110.605C71.0028 110.372 70.6577 110.256 70.1946 110.256C69.7145 110.256 69.3381 110.361 69.0653 110.571C68.7926 110.781 68.6009 111.006 68.4901 111.244L67.5355 110.903C67.706 110.506 67.9332 110.196 68.2173 109.974C68.5043 109.75 68.8168 109.594 69.1548 109.506C69.4957 109.415 69.831 109.369 70.1605 109.369C70.3707 109.369 70.6122 109.395 70.8849 109.446C71.1605 109.494 71.4261 109.595 71.6818 109.749C71.9403 109.902 72.1548 110.134 72.3253 110.443C72.4957 110.753 72.581 111.168 72.581 111.688V116H71.5753V115.114H71.5241C71.456 115.256 71.3423 115.408 71.1832 115.57C71.0241 115.732 70.8125 115.869 70.5483 115.983C70.2841 116.097 69.9616 116.153 69.581 116.153ZM69.7344 115.25C70.1321 115.25 70.4673 115.172 70.7401 115.016C71.0156 114.859 71.223 114.658 71.3622 114.411C71.5043 114.163 71.5753 113.903 71.5753 113.631V112.71C71.5327 112.761 71.4389 112.808 71.294 112.851C71.152 112.891 70.9872 112.926 70.7997 112.957C70.6151 112.986 70.4347 113.011 70.2585 113.034C70.0852 113.054 69.9446 113.071 69.8366 113.085C69.5753 113.119 69.331 113.175 69.1037 113.251C68.8793 113.325 68.6974 113.437 68.5582 113.588C68.4219 113.736 68.3537 113.937 68.3537 114.193C68.3537 114.543 68.483 114.807 68.7415 114.986C69.0028 115.162 69.3338 115.25 69.7344 115.25ZM76.8881 116.136C76.3427 116.136 75.8612 115.999 75.4435 115.723C75.0259 115.445 74.6992 115.053 74.4634 114.547C74.2276 114.038 74.1097 113.438 74.1097 112.744C74.1097 112.057 74.2276 111.46 74.4634 110.955C74.6992 110.449 75.0273 110.058 75.4478 109.783C75.8683 109.507 76.354 109.369 76.9052 109.369C77.3313 109.369 77.668 109.44 77.9151 109.582C78.1651 109.722 78.3555 109.881 78.4862 110.06C78.6197 110.236 78.7234 110.381 78.7972 110.494H78.8825V107.273H79.8881V116H78.9165V114.994H78.7972C78.7234 115.114 78.6183 115.264 78.4819 115.446C78.3455 115.625 78.1509 115.786 77.8981 115.928C77.6452 116.067 77.3086 116.136 76.8881 116.136ZM77.0245 115.233C77.4279 115.233 77.7688 115.128 78.0472 114.918C78.3256 114.705 78.5373 114.411 78.6822 114.036C78.8271 113.658 78.8995 113.222 78.8995 112.727C78.8995 112.239 78.8285 111.811 78.6864 111.445C78.5444 111.075 78.3342 110.788 78.0558 110.584C77.7773 110.376 77.4336 110.273 77.0245 110.273C76.5984 110.273 76.2433 110.382 75.9592 110.601C75.6779 110.817 75.4663 111.111 75.3242 111.483C75.185 111.852 75.1154 112.267 75.1154 112.727C75.1154 113.193 75.1864 113.616 75.3285 113.997C75.4734 114.375 75.6864 114.676 75.9677 114.901C76.2518 115.122 76.604 115.233 77.0245 115.233ZM82.6026 116.068C82.3924 116.068 82.212 115.993 82.0614 115.842C81.9109 115.692 81.8356 115.511 81.8356 115.301C81.8356 115.091 81.9109 114.911 82.0614 114.76C82.212 114.609 82.3924 114.534 82.6026 114.534C82.8129 114.534 82.9933 114.609 83.1438 114.76C83.2944 114.911 83.3697 115.091 83.3697 115.301C83.3697 115.44 83.3342 115.568 83.2631 115.685C83.195 115.801 83.1026 115.895 82.9862 115.966C82.8725 116.034 82.7447 116.068 82.6026 116.068ZM82.6026 111.21C82.3924 111.21 82.212 111.135 82.0614 110.984C81.9109 110.834 81.8356 110.653 81.8356 110.443C81.8356 110.233 81.9109 110.053 82.0614 109.902C82.212 109.751 82.3924 109.676 82.6026 109.676C82.8129 109.676 82.9933 109.751 83.1438 109.902C83.2944 110.053 83.3697 110.233 83.3697 110.443C83.3697 110.582 83.3342 110.71 83.2631 110.827C83.195 110.943 83.1026 111.037 82.9862 111.108C82.8725 111.176 82.7447 111.21 82.6026 111.21Z" fill="#858E96"/>
+<path d="M228.607 110.333C229.17 110.333 229.628 110.791 229.628 111.354V114.124C229.628 114.821 229.351 115.489 228.859 115.981C228.366 116.473 227.698 116.75 227.002 116.75C226.306 116.75 225.638 116.473 225.146 115.981C224.653 115.489 224.376 114.821 224.376 114.124V111.354C224.376 110.791 224.833 110.333 225.397 110.333H228.607ZM228.607 111.208H225.397C225.359 111.208 225.322 111.224 225.294 111.251C225.267 111.278 225.251 111.315 225.251 111.354V114.124C225.251 114.589 225.436 115.034 225.764 115.362C226.093 115.691 226.538 115.875 227.002 115.875C227.466 115.875 227.912 115.691 228.24 115.362C228.568 115.034 228.753 114.589 228.753 114.124V111.354C228.753 111.315 228.737 111.278 228.71 111.251C228.683 111.224 228.646 111.208 228.607 111.208ZM222.188 110.333H224.16C223.954 110.582 223.829 110.887 223.8 111.208H222.188C222.149 111.208 222.112 111.224 222.085 111.251C222.057 111.278 222.042 111.315 222.042 111.354V113.249C222.042 113.47 222.092 113.687 222.188 113.886C222.284 114.084 222.424 114.258 222.597 114.395C222.77 114.531 222.972 114.627 223.187 114.674C223.402 114.722 223.625 114.72 223.84 114.669C223.889 114.963 223.98 115.243 224.104 115.504C223.758 115.596 223.396 115.608 223.045 115.538C222.694 115.468 222.364 115.319 222.08 115.101C221.796 114.883 221.566 114.602 221.408 114.281C221.249 113.96 221.167 113.607 221.167 113.249V111.354C221.167 110.791 221.624 110.333 222.188 110.333ZM229.844 110.333H231.813C232.376 110.333 232.834 110.791 232.834 111.354V113.25C232.834 113.608 232.752 113.961 232.594 114.281C232.436 114.602 232.206 114.883 231.922 115.101C231.639 115.319 231.309 115.468 230.958 115.539C230.607 115.609 230.245 115.597 229.899 115.505C230.024 115.244 230.115 114.963 230.165 114.669C230.379 114.72 230.602 114.721 230.817 114.674C231.031 114.626 231.233 114.53 231.405 114.394C231.578 114.257 231.717 114.083 231.813 113.885C231.909 113.687 231.959 113.47 231.959 113.25V111.354C231.959 111.315 231.943 111.278 231.916 111.251C231.889 111.224 231.852 111.208 231.813 111.208H230.205C230.176 110.887 230.05 110.582 229.844 110.333ZM227 106.25C227.464 106.25 227.91 106.434 228.238 106.763C228.566 107.091 228.75 107.536 228.75 108C228.75 108.464 228.566 108.909 228.238 109.237C227.91 109.566 227.464 109.75 227 109.75C226.536 109.75 226.091 109.566 225.763 109.237C225.435 108.909 225.25 108.464 225.25 108C225.25 107.536 225.435 107.091 225.763 106.763C226.091 106.434 226.536 106.25 227 106.25ZM230.792 106.833C231.179 106.833 231.55 106.987 231.823 107.26C232.097 107.534 232.25 107.905 232.25 108.292C232.25 108.678 232.097 109.049 231.823 109.323C231.55 109.596 231.179 109.75 230.792 109.75C230.405 109.75 230.034 109.596 229.761 109.323C229.487 109.049 229.334 108.678 229.334 108.292C229.334 107.905 229.487 107.534 229.761 107.26C230.034 106.987 230.405 106.833 230.792 106.833ZM223.209 106.833C223.595 106.833 223.966 106.987 224.24 107.26C224.513 107.534 224.667 107.905 224.667 108.292C224.667 108.678 224.513 109.049 224.24 109.323C223.966 109.596 223.595 109.75 223.209 109.75C222.822 109.75 222.451 109.596 222.177 109.323C221.904 109.049 221.75 108.678 221.75 108.292C221.75 107.905 221.904 107.534 222.177 107.26C222.451 106.987 222.822 106.833 223.209 106.833ZM227 107.125C226.768 107.125 226.546 107.217 226.382 107.381C226.218 107.545 226.125 107.768 226.125 108C226.125 108.232 226.218 108.455 226.382 108.619C226.546 108.783 226.768 108.875 227 108.875C227.232 108.875 227.455 108.783 227.619 108.619C227.783 108.455 227.875 108.232 227.875 108C227.875 107.768 227.783 107.545 227.619 107.381C227.455 107.217 227.232 107.125 227 107.125ZM230.792 107.708C230.637 107.708 230.489 107.77 230.38 107.879C230.27 107.989 230.209 108.137 230.209 108.292C230.209 108.446 230.27 108.595 230.38 108.704C230.489 108.814 230.637 108.875 230.792 108.875C230.947 108.875 231.095 108.814 231.204 108.704C231.314 108.595 231.375 108.446 231.375 108.292C231.375 108.137 231.314 107.989 231.204 107.879C231.095 107.77 230.947 107.708 230.792 107.708ZM223.209 107.708C223.054 107.708 222.906 107.77 222.796 107.879C222.687 107.989 222.625 108.137 222.625 108.292C222.625 108.446 222.687 108.595 222.796 108.704C222.906 108.814 223.054 108.875 223.209 108.875C223.363 108.875 223.512 108.814 223.621 108.704C223.731 108.595 223.792 108.446 223.792 108.292C223.792 108.137 223.731 107.989 223.621 107.879C223.512 107.77 223.363 107.708 223.209 107.708Z" fill="#212529"/>
+<path d="M240.057 107.273H241.318L244.284 114.517H244.386L247.352 107.273H248.614V116H247.625V109.369H247.54L244.812 116H243.858L241.131 109.369H241.045V116H240.057V107.273ZM253.341 116.136C252.71 116.136 252.166 115.997 251.708 115.719C251.254 115.438 250.903 115.045 250.656 114.543C250.412 114.037 250.289 113.449 250.289 112.778C250.289 112.108 250.412 111.517 250.656 111.006C250.903 110.491 251.247 110.091 251.687 109.804C252.13 109.514 252.647 109.369 253.238 109.369C253.579 109.369 253.916 109.426 254.248 109.54C254.581 109.653 254.883 109.838 255.156 110.094C255.429 110.347 255.646 110.682 255.808 111.099C255.97 111.517 256.051 112.031 256.051 112.642V113.068H251.005V112.199H255.028C255.028 111.83 254.954 111.5 254.806 111.21C254.662 110.92 254.454 110.692 254.184 110.524C253.917 110.357 253.602 110.273 253.238 110.273C252.838 110.273 252.491 110.372 252.199 110.571C251.909 110.767 251.686 111.023 251.529 111.338C251.373 111.653 251.295 111.991 251.295 112.352V112.932C251.295 113.426 251.38 113.845 251.551 114.189C251.724 114.53 251.964 114.79 252.271 114.969C252.578 115.145 252.934 115.233 253.341 115.233C253.605 115.233 253.843 115.196 254.056 115.122C254.272 115.045 254.458 114.932 254.615 114.781C254.771 114.628 254.892 114.437 254.977 114.21L255.949 114.483C255.846 114.812 255.674 115.102 255.433 115.352C255.191 115.599 254.893 115.793 254.538 115.932C254.183 116.068 253.784 116.136 253.341 116.136ZM257.581 116V109.455H258.552V110.477H258.637C258.774 110.128 258.994 109.857 259.298 109.663C259.602 109.467 259.967 109.369 260.393 109.369C260.825 109.369 261.184 109.467 261.471 109.663C261.761 109.857 261.987 110.128 262.149 110.477H262.217C262.385 110.139 262.636 109.871 262.971 109.672C263.306 109.47 263.708 109.369 264.177 109.369C264.762 109.369 265.241 109.553 265.613 109.919C265.985 110.283 266.172 110.849 266.172 111.619V116H265.166V111.619C265.166 111.136 265.034 110.791 264.77 110.584C264.505 110.376 264.194 110.273 263.836 110.273C263.376 110.273 263.02 110.412 262.767 110.69C262.514 110.966 262.387 111.315 262.387 111.739V116H261.365V111.517C261.365 111.145 261.244 110.845 261.002 110.618C260.761 110.388 260.45 110.273 260.069 110.273C259.808 110.273 259.564 110.342 259.336 110.482C259.112 110.621 258.93 110.814 258.791 111.061C258.654 111.305 258.586 111.588 258.586 111.909V116H257.581ZM268.147 116V107.273H269.152V110.494H269.238C269.311 110.381 269.414 110.236 269.544 110.06C269.678 109.881 269.868 109.722 270.115 109.582C270.365 109.44 270.703 109.369 271.13 109.369C271.681 109.369 272.167 109.507 272.587 109.783C273.007 110.058 273.336 110.449 273.571 110.955C273.807 111.46 273.925 112.057 273.925 112.744C273.925 113.438 273.807 114.038 273.571 114.547C273.336 115.053 273.009 115.445 272.591 115.723C272.174 115.999 271.692 116.136 271.147 116.136C270.726 116.136 270.39 116.067 270.137 115.928C269.884 115.786 269.689 115.625 269.553 115.446C269.417 115.264 269.311 115.114 269.238 114.994H269.118V116H268.147ZM269.135 112.727C269.135 113.222 269.208 113.658 269.353 114.036C269.498 114.411 269.709 114.705 269.988 114.918C270.266 115.128 270.607 115.233 271.01 115.233C271.431 115.233 271.782 115.122 272.063 114.901C272.347 114.676 272.56 114.375 272.702 113.997C272.847 113.616 272.919 113.193 272.919 112.727C272.919 112.267 272.848 111.852 272.706 111.483C272.567 111.111 272.355 110.817 272.071 110.601C271.79 110.382 271.436 110.273 271.01 110.273C270.601 110.273 270.257 110.376 269.979 110.584C269.701 110.788 269.49 111.075 269.348 111.445C269.206 111.811 269.135 112.239 269.135 112.727ZM278.208 116.136C277.577 116.136 277.033 115.997 276.576 115.719C276.121 115.438 275.77 115.045 275.523 114.543C275.279 114.037 275.157 113.449 275.157 112.778C275.157 112.108 275.279 111.517 275.523 111.006C275.77 110.491 276.114 110.091 276.554 109.804C276.998 109.514 277.515 109.369 278.105 109.369C278.446 109.369 278.783 109.426 279.115 109.54C279.448 109.653 279.75 109.838 280.023 110.094C280.296 110.347 280.513 110.682 280.675 111.099C280.837 111.517 280.918 112.031 280.918 112.642V113.068H275.873V112.199H279.895C279.895 111.83 279.821 111.5 279.674 111.21C279.529 110.92 279.321 110.692 279.051 110.524C278.784 110.357 278.469 110.273 278.105 110.273C277.705 110.273 277.358 110.372 277.066 110.571C276.776 110.767 276.553 111.023 276.397 111.338C276.24 111.653 276.162 111.991 276.162 112.352V112.932C276.162 113.426 276.248 113.845 276.418 114.189C276.591 114.53 276.831 114.79 277.138 114.969C277.445 115.145 277.801 115.233 278.208 115.233C278.472 115.233 278.711 115.196 278.924 115.122C279.14 115.045 279.326 114.932 279.482 114.781C279.638 114.628 279.759 114.437 279.844 114.21L280.816 114.483C280.713 114.812 280.542 115.102 280.3 115.352C280.059 115.599 279.76 115.793 279.405 115.932C279.05 116.068 278.651 116.136 278.208 116.136ZM282.448 116V109.455H283.419V110.443H283.488C283.607 110.119 283.823 109.857 284.135 109.655C284.448 109.453 284.8 109.352 285.192 109.352C285.266 109.352 285.358 109.354 285.469 109.357C285.58 109.359 285.664 109.364 285.721 109.369V110.392C285.686 110.384 285.608 110.371 285.486 110.354C285.367 110.334 285.24 110.324 285.107 110.324C284.789 110.324 284.505 110.391 284.255 110.524C284.007 110.655 283.811 110.837 283.667 111.07C283.525 111.3 283.453 111.562 283.453 111.858V116H282.448ZM291.549 110.92L290.646 111.176C290.589 111.026 290.505 110.879 290.394 110.737C290.286 110.592 290.138 110.473 289.951 110.379C289.763 110.286 289.523 110.239 289.231 110.239C288.83 110.239 288.496 110.331 288.229 110.516C287.965 110.697 287.833 110.929 287.833 111.21C287.833 111.46 287.924 111.658 288.106 111.803C288.288 111.947 288.572 112.068 288.958 112.165L289.93 112.403C290.515 112.545 290.951 112.763 291.238 113.055C291.525 113.345 291.668 113.719 291.668 114.176C291.668 114.551 291.56 114.886 291.344 115.182C291.131 115.477 290.833 115.71 290.45 115.881C290.066 116.051 289.62 116.136 289.112 116.136C288.444 116.136 287.891 115.991 287.454 115.702C287.016 115.412 286.739 114.989 286.623 114.432L287.577 114.193C287.668 114.545 287.84 114.81 288.093 114.986C288.349 115.162 288.683 115.25 289.094 115.25C289.563 115.25 289.935 115.151 290.211 114.952C290.489 114.75 290.629 114.509 290.629 114.227C290.629 114 290.549 113.81 290.39 113.656C290.231 113.5 289.987 113.384 289.657 113.307L288.566 113.051C287.967 112.909 287.526 112.689 287.245 112.391C286.967 112.089 286.827 111.713 286.827 111.261C286.827 110.892 286.931 110.565 287.138 110.281C287.349 109.997 287.634 109.774 287.995 109.612C288.359 109.45 288.771 109.369 289.231 109.369C289.879 109.369 290.387 109.511 290.756 109.795C291.129 110.08 291.393 110.455 291.549 110.92ZM293.915 116.068C293.705 116.068 293.525 115.993 293.374 115.842C293.223 115.692 293.148 115.511 293.148 115.301C293.148 115.091 293.223 114.911 293.374 114.76C293.525 114.609 293.705 114.534 293.915 114.534C294.125 114.534 294.306 114.609 294.456 114.76C294.607 114.911 294.682 115.091 294.682 115.301C294.682 115.44 294.647 115.568 294.576 115.685C294.507 115.801 294.415 115.895 294.299 115.966C294.185 116.034 294.057 116.068 293.915 116.068ZM293.915 111.21C293.705 111.21 293.525 111.135 293.374 110.984C293.223 110.834 293.148 110.653 293.148 110.443C293.148 110.233 293.223 110.053 293.374 109.902C293.525 109.751 293.705 109.676 293.915 109.676C294.125 109.676 294.306 109.751 294.456 109.902C294.607 110.053 294.682 110.233 294.682 110.443C294.682 110.582 294.647 110.71 294.576 110.827C294.507 110.943 294.415 111.037 294.299 111.108C294.185 111.176 294.057 111.21 293.915 111.21Z" fill="#858E96"/>
+<ellipse cx="337.263" cy="111.5" rx="8.67158" ry="8.49258" fill="white"/>
+<ellipse cx="337.263" cy="111.5" rx="7.88326" ry="7.72053" fill="#F7AE59"/>
+<ellipse cx="323.862" cy="111.5" rx="8.67158" ry="8.49258" fill="white"/>
+<ellipse cx="323.862" cy="111.5" rx="7.88326" ry="7.72053" fill="#8CC1FF"/>
+<ellipse cx="309.672" cy="111.5" rx="8.67158" ry="8.49258" fill="white"/>
+<ellipse cx="309.672" cy="111.5" rx="7.88326" ry="7.72053" fill="#1E3958"/>
+<path d="M11 137H439V170C439 175.523 434.523 180 429 180H21C15.4772 180 11 175.523 11 170V137Z" fill="#FAFAFA"/>
+<path d="M87 159C87 157.895 87.8954 157 89 157H377V161H89C87.8954 161 87 160.105 87 159Z" fill="#09A953"/>
+<path d="M425 159C425 157.895 424.105 157 423 157H377V161H423C424.105 161 425 160.105 425 159Z" fill="#DEE2E6"/>
+<path d="M33.8203 153.545V162H34.875V158.982H36.8262C38.4141 158.982 39.5449 157.863 39.5449 156.258C39.5449 154.658 38.4258 153.545 36.8379 153.545H33.8203ZM34.875 154.482H36.5625C37.7754 154.482 38.4609 155.139 38.4609 156.258C38.4609 157.383 37.7695 158.045 36.5625 158.045H34.875V154.482ZM40.5996 162H41.6191V158.203C41.6191 157.342 42.1348 156.773 42.9258 156.773C43.1719 156.773 43.3887 156.803 43.4707 156.832V155.842C43.3887 155.83 43.2363 155.801 43.0605 155.801C42.3457 155.801 41.7832 156.229 41.584 156.902H41.5605V155.906H40.5996V162ZM46.5352 162.105C48.2168 162.105 49.3535 160.893 49.3535 158.953C49.3535 157.008 48.2168 155.801 46.5352 155.801C44.8477 155.801 43.7109 157.008 43.7109 158.953C43.7109 160.893 44.8477 162.105 46.5352 162.105ZM46.5352 161.209C45.457 161.209 44.748 160.389 44.748 158.953C44.748 157.518 45.457 156.697 46.5352 156.697C47.6133 156.697 48.3164 157.518 48.3164 158.953C48.3164 160.389 47.6133 161.209 46.5352 161.209ZM52.8633 161.15C51.8145 161.15 51.1289 160.295 51.1289 158.93C51.1289 157.564 51.8145 156.697 52.8633 156.697C53.9238 156.697 54.6328 157.588 54.6328 158.93C54.6328 160.271 53.9238 161.15 52.8633 161.15ZM52.8984 164.297C54.5801 164.297 55.6523 163.33 55.6523 161.877V155.906H54.6797V156.932H54.6621C54.2578 156.223 53.543 155.801 52.6816 155.801C51.1055 155.801 50.0859 157.02 50.0859 158.93C50.0859 160.822 51.1055 162.047 52.6582 162.047C53.5137 162.047 54.2344 161.613 54.6094 160.951H54.6328V161.912C54.6328 162.82 53.9941 163.43 52.9395 163.43C52.1777 163.43 51.5742 163.061 51.375 162.504H50.3262C50.4961 163.541 51.5566 164.297 52.8984 164.297ZM56.9824 162H58.002V158.203C58.002 157.342 58.5176 156.773 59.3086 156.773C59.5547 156.773 59.7715 156.803 59.8535 156.832V155.842C59.7715 155.83 59.6191 155.801 59.4434 155.801C58.7285 155.801 58.166 156.229 57.9668 156.902H57.9434V155.906H56.9824V162ZM62.8359 156.686C63.7969 156.686 64.4355 157.412 64.459 158.432H61.1484C61.2129 157.418 61.8809 156.686 62.8359 156.686ZM64.4355 160.254C64.2656 160.828 63.6973 161.221 62.9238 161.221C61.8281 161.221 61.1426 160.453 61.1426 159.287V159.229H65.5137V158.842C65.5137 156.996 64.5 155.801 62.8535 155.801C61.1719 155.801 60.0938 157.084 60.0938 158.977C60.0938 160.893 61.1543 162.105 62.9004 162.105C64.2305 162.105 65.2617 161.32 65.4375 160.254H64.4355ZM66.4395 157.588C66.4395 158.42 66.9668 158.971 68.0391 159.246L69.1113 159.521C69.7969 159.703 70.0488 159.938 70.0488 160.371C70.0488 160.922 69.5391 161.273 68.7129 161.273C67.8867 161.273 67.4062 160.934 67.2949 160.301H66.2754C66.3809 161.379 67.3125 162.105 68.6484 162.105C70.0723 162.105 71.0742 161.355 71.0742 160.295C71.0742 159.398 70.6289 158.953 69.3984 158.643L68.4551 158.414C67.7637 158.238 67.4414 157.957 67.4414 157.535C67.4414 157.002 67.9336 156.633 68.6777 156.633C69.4277 156.633 69.9023 156.996 69.9727 157.582H70.9453C70.8984 156.551 69.9727 155.801 68.7129 155.801C67.3711 155.801 66.4395 156.545 66.4395 157.588ZM72.0293 157.588C72.0293 158.42 72.5566 158.971 73.6289 159.246L74.7012 159.521C75.3867 159.703 75.6387 159.938 75.6387 160.371C75.6387 160.922 75.1289 161.273 74.3027 161.273C73.4766 161.273 72.9961 160.934 72.8848 160.301H71.8652C71.9707 161.379 72.9023 162.105 74.2383 162.105C75.6621 162.105 76.6641 161.355 76.6641 160.295C76.6641 159.398 76.2188 158.953 74.9883 158.643L74.0449 158.414C73.3535 158.238 73.0312 157.957 73.0312 157.535C73.0312 157.002 73.5234 156.633 74.2676 156.633C75.0176 156.633 75.4922 156.996 75.5625 157.582H76.5352C76.4883 156.551 75.5625 155.801 74.3027 155.801C72.9609 155.801 72.0293 156.545 72.0293 157.588Z" fill="black"/>
+<line x1="11" y1="136.5" x2="439" y2="136.5" stroke="#DEE2E6"/>
+<defs>
+<filter id="filter0_d_2610_65058" x="1" y="0" width="448" height="192" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.647059 0 0 0 0 1 0 0 0 0.63 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2610_65058"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2610_65058" result="shape"/>
+</filter>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2610_65058" transform="scale(0.01)"/>
+</pattern>
+<image id="image0_2610_65058" width="100" height="100" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAMyElEQVR4nO1de3AdZRX/3TQpBdJH2gZR+zCJUHDUOoiKSO2DWhkZRjttaauAPEpQRKWog9Q+RYGqbcdhUOlgKeXhCNVIq/KHTxCfQSwtIAVtG8ACaRraatskTe51DnOusx7O3nu+b3fv3Zu5v5mdySQ5u99+5/vO+zsLVFFFFVVUUcXgxTAAkwFcCGApgHsB/BHAdgD/BNANoBdAP//8IoB/APgdgE0AVgG4FMC7ANSW+2UqEXUAzgGwHMBvAPQAyMV0/QfAIwBuAfBBAEPK/bJpRQ2AcwHcBeBQjAwodu0DsBHA+TEzZyUqFOMB3ATg+RIyIRdyPc8TSWOKgpV8v4rCWwHcwbLfMlm7AfwUwLcAXAlgKoC3A2gC0MBibgj//GYApwKYyf97M4CfAHjJ+KxjAO4E0BKBGRXDkCZWyv1FJuVfrJBJGU+I8flvAfBxAPcAeNXImAkezEg9Q45jC+lIgQn4N8vzGaxTkkYd76KNRcZ1GMANAIY6MCPVDKGX3lnghelvlwM4sYxjJFF3LYDnCozzGbbMLMxIJUNqebADIQMmP+KSlJmeNQDmAXg2ZMxZAN8O7JYwZqSOIRMB/ClkoC8DuBhABulFHYDPFNAz5JiuLaKDUoPz2GOWAyRFfhuAUagcnMwGQNwmdsn8lIsA9CkD2APgLFQuzgfQWWnM+GyIvngQwGhUPk4C8FBEZqwo1WC/GiKiFqdcV/go/dTvjMXKwykgOCeBFTqHV9kPAPwVwC7WV318dbN4/AuA+3ihfBTA2BjHkXqdkRUPPwhgekz3P5OtmR3Kc1wuon2K42YUyo+C1DLjPEWBH+RJjILhAK7jCcwldD0J4CoAJ3iML5XMmKiYtj0Rd0YDv8D+BBkhry4ASwAcbxzj/DQyo05x+voj6AxS+pcZzMp+fi5FfBcBmCKivbX880QOcVA4Zh3rk2NF7v0Ci99izDiWNmaAJ0QOgBS7D1o41Rr2Yr0A2pjZIyKMeQRHeduKhPwpxP+mSmLGTEW5tnmatnMBHCggSpbFbB3l8UYAN3K2UHs2icyPFGHGMf592UPoO5XEEYkJFxDzvlkg570EQD2Sx0i2urTQOzm41wNYEJEZIzn0QnMXO5YqMv39jvcgWX93CDMeZPlfajRzMYVFHLkyI69rae5iRZOykihQ6MqMLcpLHgVwNcqLDOvBYwkwI5/kinWx3aeE0Ec5vvDdIanaM5AeTA2JVLvqjDHKfSgdHFtBgsyBUz7DBZrOeJZ3XpowP0YF/nnlPqfEMcg7xI23OVpVc0OY8QakC/NjtqbqlMwjFW5EwnjFbqeSThc/44AiptK2M+YpzCCp8ImI971M3LOPy5S8cZO44U6HHHhGcfqOxqAzWtgIIL32OPssfaw4d3N6dSN73pTxi3NnNPMqzzjskl1x5URqlIpCCkf4ro5cBGtqCICFAH5vNE/zFzmxvwAwKyZmdPD/0LtZca0iIbyKvs9V6qaspToNSmyK/AwfzOISnFzEi/In7/FkRlOAGXS94uC8NvDuDT4nbIEUxF3iJiQGrJDlMT52+PEA1sfACDnhN7KV6KLAT1FSDVSdb8VGQft9x7l4re5IVqFTRaE1nyFD6BQOcUEjgPYiq50mZBqA03jnnsBln1P5b486MqqYNXWroHnVYZd8WNB2F6mEfB3OUeSetbzzOkHb5RibagTw9xB98ACASQ73mswOaaFso9W0beQEXJCWCjusyl0uUq0KMhTLI9jPMtNHUVsXMdWuTNquiGVE00Oq3139jK8J+qcdaDcJWjrZZYYMtlEVugVnCrpexxD6emXSHo4hDB+X09es7LZ3G2kvFXQkUs1n+uQxMmtJ/lolV2LFrBBmOMnaEnjgcrFSWMiCiYKuh0WZSe4GCcnZsmKHoJ3j4Gc8o4iptOyMIC5RisateFHQvsNCdKEg2upQN5UVL05haAsWKgr8LESDq59hLdAYLd4zy1lIC34mxlMsj/8algkiyqFbMEfQ/Rl2SA/8AUSDjwf+S4f7SyuQivEsuFnQUWiqKGS1N53Ts2CFoFvjEJuSK24S/OEbDsk6BP42eBY2yHASmeTOq5UcLZ8kFpXqWHC14vSVSmf83HPxXSno7vc0XMhAKIrtgohOu1rwmKCjuikfRi6HW3pgM0cVuj0U+CrPrN4UQUfpWgveJugoX1IUuwWRNQa1R9DRiVcLHhd00xyYUajK0WJNTRc0tKgsaFIK7Sw4WdCRs1oUXYKI8sOlpDvVSLc5IjPy+kvWClgwUtBREs5asBeko1BMUcgModUxi4tuuJGuUAsOEl8W1CsJNAvqBF1fknSDgSEHjPcYrnjPFhxXSrpKEVltBRjyQ+M9Jgk6SqpZMFbQ7UuSrtxKfbrDZGo1VMTgccZ7zIhJqe9Kkq7UZu+9Ec3e+1k5HuSdYWWGltk0OWrsmwXp6MiDBe8UdE9YiB4tsWP46RgdQ1f8TTy71UjXKugoumGBNLOpKsc5dNLqmdRa45ljyEYMnVhxuhhv1kE8rxO01mLqT/kk/pZ5TmyU4KLclZuRPH4snkmt/6yQWc3Znoz8ik/4nU4VwZhzzorKP2v4fYGyWs9GcviAYgxQ9aK1rKdfnCWxWpQydkZlts6KxyVBtd3ngZygelp5LjE5bjQqFuEOhyIOefCTrEQrOnwMpmHssfqYvmsEHbXWczkul0sghRvEUBZNcjda42dQzrisdtCVQbojLierfi2IraWTZ0QscvhuCFPi2CmNCjNyXG8Fh6yoLJizNiK4QtC5JMRep9it9rmWV3fxK4axMZBTHKizI+oMKabo+oPj+b9VPn5EiL+1JIrS2+sgYxdHLJQbq+iTvGj5EZurVpyuWFPBbg5WZZyP1MrIAB3KserIlwWtU81AnRK8IxlvQb0Sn3I99Di2QEe6HDt0Kzn0cRo/s55/nsF/k06f3BkuzNC8+k6H4vNZSvDTuQL+TnETKr72FXmHHWJbQfH1nQKT6nNlWWe4HlNuUQwd6lRqhXS26VSaM2ZEOI4wikv2ffwZbRxxNKLZ4WhN5ZFRGpftdUgT1PP5e59w1P+hRrGbyVLwLShzKU7WxjKfYz8ubZqybFnNi9ALWB64yXGbDnjGvXZHaer2dSUp73Kk7WElIRO1fVMTt1a6hyPMXWxe93J+4TG2Cls9xKTEe5UE2q8c6Gv50xlBejqf4o1xyoAozGHFBKUQodMhCVVONCsV892OTL5YWZCRDn1qFenbHbfcbEXMPJfCY9GyOkR2uaZ3uAB21CjmOzm+kdGi1Dt90vEesoQyzxRahWlDiyJmfETNIkHfF4MI/R9kW4xXHLsAZZRzdnlrJapOiRPvUxy4/JlAF6kwRmn/FFtrDXBw8XDE7VfLwcacIld9ra+4kGFrSmtu1ubhxK1XXAaX1LIJN4iHDHjEl2pDdkreT2lCeURUWIPkDR7MmKI0lP5SEgMfqpThd3h0rc6wTtH8iSMcjLQ6XVEwgsMhWgOzLOuMjEfI5wUlZmY6KeXrNcuJ3OLp6HwspIwnx6byioQSVCdx1LbQs12sqTwyyoGcAdfTtj5YrbzEFz3vRVbHb0MmJseWyRZOK0f5qkIDe/pbQz4WEHT6fD+x9GXlfuRYJ4465QzJgENOWltZFxk+2tXPxQXr2AufymbzaBanQ/nnZo5ZtfL/thu+ebXXMRwisUDRG4+U8kOWmgfew/1RfDGSw/Rh3UKTuDo5URRFZ81UrLN9SVhVxfAhZSCHRIMXH9SzCSoLJuK8nuDk0okxxLpk3qjXoQ1J7FiobNVDEXdKEPT92m9wsinsW1aWa4CrQ1bH0Iw/uDMOKc8pez/fzykT0OPYec5qUs4OfKC4nT9OvD8Q7d3Pv2vnaPBSpnHNDlp0huZEXoOUQPta2QA7RIPpgy4Ztqa03erS06UkuCZkoFsTWKHlwBiOJsj3I7/sC0gpFoZs5Q6uZKlUTFE88LwCL7vOsFhfXSEi7HsV9oGwMRwo1Hb+vnJaU64YX6CjWydXQpbie7e+qOF8hraw8k5fyf2MpD+9+iQXQpTMm3X49OpTRT69mliwsBSYFlKJGMwcLirRJyrCUM/tMrRMYXABJR4oLBXq2DMudJT5KJ8XvKBEu6aGe0vezgmksHEd5p0eZxV+ajCBKyCLfT7oJXbsLo8zD80JsCvYsdRStcGrj9OuFacrfCfmdqWVYC7k6uDTR2u5JmsaHywKi/ZO5gOWVzHNQ0rRX9jVw+npOBdCxWAcd/q0TlYuwWsPZwkj100NBtTwqt+g9MZN8jrAFSVTB1mIJ1YM4dar13MjfS3n7XsdYf/oFo7WDkpFnTSGsr6Yy8eIN/GkbisQ7d3G/7OJE1BzuQNolQFVVFFFFVVgsOK/CQ2naFV2iSEAAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/app/public/onboarding/welcome.svg b/app/public/onboarding/welcome.svg
new file mode 100644
index 000000000..d53ed2d77
--- /dev/null
+++ b/app/public/onboarding/welcome.svg
@@ -0,0 +1,5 @@
+<svg width="450" height="180" viewBox="0 0 450 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M293.949 21.0508H202.016V67.0193H247.981V112.984H293.949V21.0508Z" fill="#3F76FF"/>
+<path d="M202.016 67.0195H156.051V112.881H202.016V67.0195Z" fill="#3F76FF"/>
+<path d="M247.98 112.984H202.118V158.949H247.98V112.984Z" fill="#3F76FF"/>
+</svg>
diff --git a/app/public/services/github.png b/app/public/services/github.png
new file mode 100644
index 000000000..527ba79f2
Binary files /dev/null and b/app/public/services/github.png differ
diff --git a/app/public/services/jira.png b/app/public/services/jira.png
new file mode 100644
index 000000000..ca9db1926
Binary files /dev/null and b/app/public/services/jira.png differ
diff --git a/app/public/services/slack.png b/app/public/services/slack.png
new file mode 100644
index 000000000..fc918001f
Binary files /dev/null and b/app/public/services/slack.png differ
diff --git a/app/public/sign-in-bg.png b/app/public/sign-in-bg.png
new file mode 100644
index 000000000..893fbd6c8
Binary files /dev/null and b/app/public/sign-in-bg.png differ
diff --git a/app/public/sign-up-sideimg.svg b/app/public/sign-up-sideimg.svg
new file mode 100644
index 000000000..da9d67b52
--- /dev/null
+++ b/app/public/sign-up-sideimg.svg
@@ -0,0 +1,57 @@
+<svg width="748" height="813" viewBox="0 0 748 813" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_491_6452)">
+<path d="M150.685 667.271C161.118 667.271 169.575 658.815 169.575 648.383C169.575 637.951 161.118 629.494 150.685 629.494C140.253 629.494 131.796 637.951 131.796 648.383C131.796 658.815 140.253 667.271 150.685 667.271Z" fill="#F0F0F0"/>
+<path d="M115.725 670.654C123.044 670.654 128.976 664.722 128.976 657.404C128.976 650.086 123.044 644.154 115.725 644.154C108.407 644.154 102.475 650.086 102.475 657.404C102.475 664.722 108.407 670.654 115.725 670.654Z" fill="#F0F0F0"/>
+<path d="M142.954 78.4899C151.345 78.4899 158.147 71.6884 158.147 63.2983C158.147 54.9082 151.345 48.1067 142.954 48.1067C134.564 48.1067 127.762 54.9082 127.762 63.2983C127.762 71.6884 134.564 78.4899 142.954 78.4899Z" fill="#CCCCCC"/>
+<path d="M689.884 255.726C698.274 255.726 705.076 248.924 705.076 240.534C705.076 232.144 698.274 225.342 689.884 225.342C681.493 225.342 674.691 232.144 674.691 240.534C674.691 248.924 681.493 255.726 689.884 255.726Z" fill="#CCCCCC"/>
+<path d="M167.009 350.673H141.688V375.992H167.009V350.673Z" fill="#CCCCCC"/>
+<path d="M11.287 164.576H8.75488V0H170.808V2.53194H11.287V164.576Z" fill="#CCCCCC"/>
+<path d="M748 164.576H745.468V2.53194H585.947V0H748V164.576Z" fill="#CCCCCC"/>
+<path d="M11.287 303.832H8.75488V468.408H170.808V465.876H11.287V303.832Z" fill="#CCCCCC"/>
+<path d="M748 303.832H745.468V465.876H585.947V468.408H748V303.832Z" fill="#CCCCCC"/>
+<path d="M231.578 77.2241H54.332V79.7561H231.578V77.2241Z" fill="#CCCCCC"/>
+<path d="M104.973 54.4365H102.441V77.8569H104.973V54.4365Z" fill="#CCCCCC"/>
+<path d="M182.202 54.4365H179.67V77.8569H182.202V54.4365Z" fill="#CCCCCC"/>
+<path d="M710.14 255.726H532.895V258.258H710.14V255.726Z" fill="#CCCCCC"/>
+<path d="M583.536 232.938H581.004V256.358H583.536V232.938Z" fill="#CCCCCC"/>
+<path d="M660.765 232.938H658.232V256.358H660.765V232.938Z" fill="#CCCCCC"/>
+<path d="M242.972 374.726H65.7266V377.258H242.972V374.726Z" fill="#CCCCCC"/>
+<path d="M116.368 351.939H113.836V375.359H116.368V351.939Z" fill="#CCCCCC"/>
+<path d="M193.597 351.939H191.064V375.359H193.597V351.939Z" fill="#CCCCCC"/>
+<path d="M375.769 529.726C414.925 529.726 446.668 522.358 446.668 513.269C446.668 504.18 414.925 496.811 375.769 496.811C336.613 496.811 304.871 504.18 304.871 513.269C304.871 522.358 336.613 529.726 375.769 529.726Z" fill="#3F3D56"/>
+<path d="M432.648 677.22L364.281 682.275L364.468 684.799L432.835 679.744L432.648 677.22Z" fill="#CACACA"/>
+<path d="M319.407 668.507L318.188 670.725L343.508 684.651L344.728 682.432L319.407 668.507Z" fill="#CACACA"/>
+<path d="M390.962 659.488H368.173V662.02H390.962V659.488Z" fill="#CACACA"/>
+<path d="M308.667 817.82L306.14 817.648L325.13 527.741L327.657 527.914L308.667 817.82Z" fill="#CACACA"/>
+<path d="M402.358 817.796L389.697 550.677L392.227 550.553L404.887 817.672L402.358 817.796Z" fill="#CACACA"/>
+<path d="M427.673 526.457L425.149 526.666L449.204 817.838L451.728 817.63L427.673 526.457Z" fill="#CACACA"/>
+<path d="M347.917 817.764L345.385 817.704L352.981 550.584L355.513 550.645L347.917 817.764Z" fill="#CACACA"/>
+<path d="M335.799 650.316L318.984 660.274L272.565 600.157L297.385 585.458L335.799 650.316Z" fill="#FFB6B6"/>
+<path d="M349.742 664.075L295.521 696.187L295.115 695.501C291.8 689.904 290.844 683.22 292.458 676.919C294.071 670.617 298.122 665.215 303.719 661.899L303.72 661.898L336.837 642.286L349.742 664.075Z" fill="#2F2E41"/>
+<path d="M417.006 650.316L433.821 660.274L480.239 600.157L455.421 585.458L417.006 650.316Z" fill="#FFB6B6"/>
+<path d="M415.968 642.286L449.085 661.898L449.086 661.899C454.683 665.215 458.734 670.617 460.347 676.919C461.96 683.22 461.005 689.904 457.69 695.501L457.284 696.187L403.062 664.075L415.968 642.286Z" fill="#2F2E41"/>
+<path d="M428.561 420.934C428.561 420.934 373.697 459.575 320.294 424.706L319.458 449.013C319.458 449.013 205.066 497.525 223.844 535.423C242.623 573.321 282.082 612.647 282.082 612.647L303.605 594.924L279.55 534.157L344.981 506.439L402.023 506.727L481.564 538.918L443.583 595.887L477.052 606.317C477.052 606.317 556.813 532.891 539.721 512.003C526.022 495.26 444.016 457.721 444.016 457.721L428.561 420.934Z" fill="#2F2E41"/>
+<path d="M447.655 279.181L400.168 263.44L388.43 246.783H354.247L344.12 263.704L300.086 279.181C297.686 279.867 295.623 281.416 294.294 283.529C292.966 285.643 292.465 288.174 292.888 290.634L312.468 451.869L344.119 449.338C344.119 449.338 386.762 482.61 412.485 444.274L413.859 424.942L440.338 450.604L454.854 290.634C455.277 288.174 454.776 285.643 453.448 283.529C452.119 281.416 450.056 279.867 447.655 279.181Z" fill="#6C63FF"/>
+<path d="M411.197 169.842C397.156 146.12 369.379 145.014 369.379 145.014C369.379 145.014 342.311 141.553 324.948 177.682C308.764 211.357 286.427 232.478 321.352 240.361L327.66 220.728L331.567 241.823C336.54 242.181 341.528 242.266 346.51 242.078C383.912 240.871 419.531 242.432 418.384 229.011C416.859 211.171 424.706 192.667 411.197 169.842Z" fill="#2F2E41"/>
+<path d="M372.605 240.35C392.882 240.35 409.32 223.913 409.32 203.637C409.32 183.361 392.882 166.924 372.605 166.924C352.328 166.924 335.89 183.361 335.89 203.637C335.89 223.913 352.328 240.35 372.605 240.35Z" fill="#FFB8B8"/>
+<path d="M406.255 166.289L378.812 151.915L340.916 157.795L333.075 192.423L352.592 191.673L358.045 178.951V191.464L367.052 191.117L372.278 170.863L375.546 192.423L407.563 191.77L406.255 166.289Z" fill="#2F2E41"/>
+<path opacity="0.2" d="M315.229 313.96L343.715 425.354C343.715 425.354 330.422 327.886 315.229 313.96Z" fill="black"/>
+<path opacity="0.2" d="M400.227 426.62L428.712 315.226C413.52 329.151 400.227 426.62 400.227 426.62Z" fill="black"/>
+<path d="M406.861 523.935C408.395 523.124 409.734 521.987 410.782 520.604C411.829 519.22 412.561 517.624 412.925 515.927C413.289 514.23 413.277 512.474 412.888 510.783C412.5 509.091 411.746 507.505 410.679 506.137L436.539 435.412L416.744 425.335L393.273 504.511C391.092 506.456 389.701 509.134 389.363 512.036C389.025 514.938 389.764 517.864 391.439 520.258C393.114 522.652 395.609 524.349 398.451 525.026C401.293 525.704 404.286 525.316 406.861 523.935Z" fill="#FFB6B6"/>
+<path d="M431.848 307.001L402.996 432.46C402.717 433.757 402.959 435.111 403.668 436.231C404.377 437.351 405.497 438.149 406.787 438.453L434.574 442.456C435.258 442.617 435.967 442.633 436.658 442.505C437.349 442.377 438.005 442.106 438.586 441.711C439.166 441.315 439.658 440.803 440.03 440.207C440.402 439.611 440.645 438.945 440.746 438.25L449.2 307.549L431.848 307.001Z" fill="#6C63FF"/>
+<path d="M340.88 526.467C339.345 525.656 338.007 524.519 336.959 523.136C335.911 521.752 335.18 520.156 334.816 518.459C334.452 516.762 334.464 515.006 334.852 513.315C335.24 511.623 335.994 510.037 337.062 508.669L311.201 437.944L330.996 427.867L354.468 507.043C356.648 508.988 358.039 511.666 358.377 514.568C358.715 517.47 357.977 520.396 356.302 522.79C354.627 525.184 352.132 526.881 349.289 527.558C346.447 528.236 343.455 527.848 340.88 526.467Z" fill="#FFB6B6"/>
+<path d="M315.892 309.533L344.745 434.992C345.023 436.289 344.782 437.643 344.073 438.763C343.364 439.883 342.244 440.681 340.953 440.985L313.167 444.988C312.483 445.149 311.773 445.165 311.082 445.037C310.392 444.909 309.735 444.638 309.155 444.243C308.574 443.847 308.083 443.335 307.711 442.739C307.339 442.143 307.095 441.477 306.995 440.782L296.009 310.081L315.892 309.533Z" fill="#6C63FF"/>
+<path d="M635.059 687.141L636.005 685.792C652.256 697.201 664.111 722.581 671.24 761.225C674.499 779.274 676.455 797.535 677.093 815.865L675.444 815.897C675.425 814.879 673.021 713.794 635.059 687.141Z" fill="#E4E4E4"/>
+<path d="M637.532 760.074L638.479 758.724C655.419 770.617 656.449 813.645 656.485 815.471L654.836 815.503C654.828 815.064 653.789 771.487 637.532 760.074Z" fill="#E4E4E4"/>
+<path d="M625.64 686.466C630.193 686.466 633.883 682.776 633.883 678.223C633.883 673.671 630.193 669.98 625.64 669.98C621.087 669.98 617.396 673.671 617.396 678.223C617.396 682.776 621.087 686.466 625.64 686.466Z" fill="#E4E4E4"/>
+<path d="M629.762 758.18C634.315 758.18 638.005 754.49 638.005 749.937C638.005 745.385 634.315 741.694 629.762 741.694C625.209 741.694 621.519 745.385 621.519 749.937C621.519 754.49 625.209 758.18 629.762 758.18Z" fill="#E4E4E4"/>
+<path d="M666.778 675.144C669.398 681.022 670.262 687.532 669.266 693.889C668.271 700.247 665.458 706.181 661.168 710.977C658.548 705.099 657.684 698.589 658.679 692.232C659.674 685.874 662.487 679.94 666.778 675.144Z" fill="#E4E4E4"/>
+<path d="M616.317 705.311C622.562 703.756 629.123 704.039 635.21 706.127C641.298 708.215 646.651 712.018 650.626 717.079C644.382 718.634 637.821 718.351 631.733 716.263C625.646 714.175 620.292 710.372 616.317 705.311Z" fill="#E4E4E4"/>
+<path d="M620.623 771.366C625 770.276 629.599 770.475 633.865 771.938C638.132 773.402 641.885 776.067 644.671 779.615C640.294 780.705 635.695 780.506 631.428 779.043C627.162 777.579 623.409 774.913 620.623 771.366Z" fill="#E4E4E4"/>
+</g>
+<defs>
+<clipPath id="clip0_491_6452">
+<rect width="748" height="819" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/app/public/site-image.png b/app/public/site-image.png
new file mode 100644
index 000000000..fca512f17
Binary files /dev/null and b/app/public/site-image.png differ
diff --git a/app/public/site.webmanifest.json b/app/public/site.webmanifest.json
new file mode 100644
index 000000000..86855745a
--- /dev/null
+++ b/app/public/site.webmanifest.json
@@ -0,0 +1,13 @@
+{
+  "name": "Plane",
+  "short_name": "Plane",
+  "description": "Plane helps you plan your issues, cycles, and product modules.",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#f9fafb",
+  "theme_color": "#3f76ff",
+  "icons": [
+    { "src": "/favicon/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/favicon/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}
diff --git a/app/public/sw.js b/app/public/sw.js
new file mode 100644
index 000000000..c079a3cd9
--- /dev/null
+++ b/app/public/sw.js
@@ -0,0 +1,101 @@
+/**
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// If the loader is already loaded, just stop.
+if (!self.define) {
+  let registry = {};
+
+  // Used for `eval` and `importScripts` where we can't get script URL by other means.
+  // In both cases, it's safe to use a global var because those functions are synchronous.
+  let nextDefineUri;
+
+  const singleRequire = (uri, parentUri) => {
+    uri = new URL(uri + ".js", parentUri).href;
+    return registry[uri] || (
+      
+        new Promise(resolve => {
+          if ("document" in self) {
+            const script = document.createElement("script");
+            script.src = uri;
+            script.onload = resolve;
+            document.head.appendChild(script);
+          } else {
+            nextDefineUri = uri;
+            importScripts(uri);
+            resolve();
+          }
+        })
+      
+      .then(() => {
+        let promise = registry[uri];
+        if (!promise) {
+          throw new Error(`Module ${uri} didn’t register its module`);
+        }
+        return promise;
+      })
+    );
+  };
+
+  self.define = (depsNames, factory) => {
+    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
+    if (registry[uri]) {
+      // Module is already loading or loaded.
+      return;
+    }
+    let exports = {};
+    const require = depUri => singleRequire(depUri, uri);
+    const specialDeps = {
+      module: { uri },
+      exports,
+      require
+    };
+    registry[uri] = Promise.all(depsNames.map(
+      depName => specialDeps[depName] || require(depName)
+    )).then(deps => {
+      factory(...deps);
+      return exports;
+    });
+  };
+}
+define(['./workbox-7805bd61'], (function (workbox) { 'use strict';
+
+  importScripts();
+  self.skipWaiting();
+  workbox.clientsClaim();
+  workbox.registerRoute("/", new workbox.NetworkFirst({
+    "cacheName": "start-url",
+    plugins: [{
+      cacheWillUpdate: async ({
+        request,
+        response,
+        event,
+        state
+      }) => {
+        if (response && response.type === 'opaqueredirect') {
+          return new Response(response.body, {
+            status: 200,
+            statusText: 'OK',
+            headers: response.headers
+          });
+        }
+        return response;
+      }
+    }]
+  }), 'GET');
+  workbox.registerRoute(/.*/i, new workbox.NetworkOnly({
+    "cacheName": "dev",
+    plugins: []
+  }), 'GET');
+
+}));
+//# sourceMappingURL=sw.js.map
diff --git a/app/public/sw.js.map b/app/public/sw.js.map
new file mode 100644
index 000000000..b51b108ef
--- /dev/null
+++ b/app/public/sw.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"sw.js","sources":["../../../../../../../private/var/folders/6g/17wwm83n2f7684q23njhqds40000gn/T/248c600d301effe1a5aaad1f4bbdbf7d/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/Users/sriram/Desktop/caravel/plane/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from '/Users/sriram/Desktop/caravel/plane/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/Users/sriram/Desktop/caravel/plane/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/Users/sriram/Desktop/caravel/plane/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n  \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({ request, response, event, state }) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, { status: 200, statusText: 'OK', headers: response.headers }) } return response } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","self","skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkFirst","plugins","cacheWillUpdate","request","response","event","state","type","Response","body","status","statusText","headers","workbox_strategies_NetworkOnly"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAa,EAEZ,CAAA;EAQDC,CAAI,CAAA,CAAA,CAAA,CAACC,CAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAE,CAAA;AAElBC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAyB,EAAE,CAAA;AAI3BC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAA6B,CAAC,CAAA,CAAA,CAAG,CAAE,CAAA,CAAA,CAAA,CAAA,CAAIC,oBAA+B,CAAC,CAAA;EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,EAAC,CAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;EAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAO,EAAE,CAAC,CAAA;EAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAe,EAAE,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;QAAEC,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;QAAEC,CAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;QAAEC,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA;AAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAAM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAC,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA;EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAIF,QAAQ,CAAIA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAQ,CAACG,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAK,gBAAgB,CAAE,CAAA,CAAA;AAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAO,CAAIC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAQ,CAACJ,CAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAACK,IAAI,CAAE,CAAA,CAAA;EAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAM,EAAE,CAAG,CAAA,CAAA,CAAA;EAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAU,EAAE,CAAI,CAAA,CAAA,CAAA,CAAA;YAAEC,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAER,CAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAACQ,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAC,CAAC,CAAA;EAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAOR,QAAQ,CAAA;EAAC,CAAA,CAAA,CAAA,CAAA,CAAA;KAAG,CAAA;AAAE,CAAA,CAAA,CAAC,CAAC,CAAA,CAAE,CAAK,CAAA,CAAA,CAAA,CAAA,CAAC,CAAA;AACxWL,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAA6B,CAAC,CAAA,CAAA,CAAA,CAAA,CAAK,CAAE,CAAA,CAAA,CAAA,CAAA,CAAIc,mBAA8B,CAAC,CAAA;EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,EAAC,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA;EAAEZ,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAO,EAAE,CAAA,CAAA;EAAG,CAAC,CAAC,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAK,CAAC,CAAA;;"}
\ No newline at end of file
diff --git a/app/public/user.png b/app/public/user.png
new file mode 100644
index 000000000..bc0251228
Binary files /dev/null and b/app/public/user.png differ
diff --git a/app/public/vercel.svg b/app/public/vercel.svg
new file mode 100644
index 000000000..fbf0e25a6
--- /dev/null
+++ b/app/public/vercel.svg
@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>
\ No newline at end of file
diff --git a/app/public/workbox-7805bd61.js b/app/public/workbox-7805bd61.js
new file mode 100644
index 000000000..d9e8284d3
--- /dev/null
+++ b/app/public/workbox-7805bd61.js
@@ -0,0 +1,2458 @@
+define(['exports'], (function (exports) { 'use strict';
+
+    // @ts-ignore
+    try {
+      self['workbox:core:6.5.3'] && _();
+    } catch (e) {}
+
+    /*
+      Copyright 2019 Google LLC
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const logger = (() => {
+      // Don't overwrite this value if it's already set.
+      // See https://github.com/GoogleChrome/workbox/pull/2284#issuecomment-560470923
+      if (!('__WB_DISABLE_DEV_LOGS' in self)) {
+        self.__WB_DISABLE_DEV_LOGS = false;
+      }
+      let inGroup = false;
+      const methodToColorMap = {
+        debug: `#7f8c8d`,
+        log: `#2ecc71`,
+        warn: `#f39c12`,
+        error: `#c0392b`,
+        groupCollapsed: `#3498db`,
+        groupEnd: null // No colored prefix on groupEnd
+      };
+
+      const print = function (method, args) {
+        if (self.__WB_DISABLE_DEV_LOGS) {
+          return;
+        }
+        if (method === 'groupCollapsed') {
+          // Safari doesn't print all console.groupCollapsed() arguments:
+          // https://bugs.webkit.org/show_bug.cgi?id=182754
+          if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+            console[method](...args);
+            return;
+          }
+        }
+        const styles = [`background: ${methodToColorMap[method]}`, `border-radius: 0.5em`, `color: white`, `font-weight: bold`, `padding: 2px 0.5em`];
+        // When in a group, the workbox prefix is not displayed.
+        const logPrefix = inGroup ? [] : ['%cworkbox', styles.join(';')];
+        console[method](...logPrefix, ...args);
+        if (method === 'groupCollapsed') {
+          inGroup = true;
+        }
+        if (method === 'groupEnd') {
+          inGroup = false;
+        }
+      };
+      // eslint-disable-next-line @typescript-eslint/ban-types
+      const api = {};
+      const loggerMethods = Object.keys(methodToColorMap);
+      for (const key of loggerMethods) {
+        const method = key;
+        api[method] = (...args) => {
+          print(method, args);
+        };
+      }
+      return api;
+    })();
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const messages$1 = {
+      'invalid-value': ({
+        paramName,
+        validValueDescription,
+        value
+      }) => {
+        if (!paramName || !validValueDescription) {
+          throw new Error(`Unexpected input to 'invalid-value' error.`);
+        }
+        return `The '${paramName}' parameter was given a value with an ` + `unexpected value. ${validValueDescription} Received a value of ` + `${JSON.stringify(value)}.`;
+      },
+      'not-an-array': ({
+        moduleName,
+        className,
+        funcName,
+        paramName
+      }) => {
+        if (!moduleName || !className || !funcName || !paramName) {
+          throw new Error(`Unexpected input to 'not-an-array' error.`);
+        }
+        return `The parameter '${paramName}' passed into ` + `'${moduleName}.${className}.${funcName}()' must be an array.`;
+      },
+      'incorrect-type': ({
+        expectedType,
+        paramName,
+        moduleName,
+        className,
+        funcName
+      }) => {
+        if (!expectedType || !paramName || !moduleName || !funcName) {
+          throw new Error(`Unexpected input to 'incorrect-type' error.`);
+        }
+        const classNameStr = className ? `${className}.` : '';
+        return `The parameter '${paramName}' passed into ` + `'${moduleName}.${classNameStr}` + `${funcName}()' must be of type ${expectedType}.`;
+      },
+      'incorrect-class': ({
+        expectedClassName,
+        paramName,
+        moduleName,
+        className,
+        funcName,
+        isReturnValueProblem
+      }) => {
+        if (!expectedClassName || !moduleName || !funcName) {
+          throw new Error(`Unexpected input to 'incorrect-class' error.`);
+        }
+        const classNameStr = className ? `${className}.` : '';
+        if (isReturnValueProblem) {
+          return `The return value from ` + `'${moduleName}.${classNameStr}${funcName}()' ` + `must be an instance of class ${expectedClassName}.`;
+        }
+        return `The parameter '${paramName}' passed into ` + `'${moduleName}.${classNameStr}${funcName}()' ` + `must be an instance of class ${expectedClassName}.`;
+      },
+      'missing-a-method': ({
+        expectedMethod,
+        paramName,
+        moduleName,
+        className,
+        funcName
+      }) => {
+        if (!expectedMethod || !paramName || !moduleName || !className || !funcName) {
+          throw new Error(`Unexpected input to 'missing-a-method' error.`);
+        }
+        return `${moduleName}.${className}.${funcName}() expected the ` + `'${paramName}' parameter to expose a '${expectedMethod}' method.`;
+      },
+      'add-to-cache-list-unexpected-type': ({
+        entry
+      }) => {
+        return `An unexpected entry was passed to ` + `'workbox-precaching.PrecacheController.addToCacheList()' The entry ` + `'${JSON.stringify(entry)}' isn't supported. You must supply an array of ` + `strings with one or more characters, objects with a url property or ` + `Request objects.`;
+      },
+      'add-to-cache-list-conflicting-entries': ({
+        firstEntry,
+        secondEntry
+      }) => {
+        if (!firstEntry || !secondEntry) {
+          throw new Error(`Unexpected input to ` + `'add-to-cache-list-duplicate-entries' error.`);
+        }
+        return `Two of the entries passed to ` + `'workbox-precaching.PrecacheController.addToCacheList()' had the URL ` + `${firstEntry} but different revision details. Workbox is ` + `unable to cache and version the asset correctly. Please remove one ` + `of the entries.`;
+      },
+      'plugin-error-request-will-fetch': ({
+        thrownErrorMessage
+      }) => {
+        if (!thrownErrorMessage) {
+          throw new Error(`Unexpected input to ` + `'plugin-error-request-will-fetch', error.`);
+        }
+        return `An error was thrown by a plugins 'requestWillFetch()' method. ` + `The thrown error message was: '${thrownErrorMessage}'.`;
+      },
+      'invalid-cache-name': ({
+        cacheNameId,
+        value
+      }) => {
+        if (!cacheNameId) {
+          throw new Error(`Expected a 'cacheNameId' for error 'invalid-cache-name'`);
+        }
+        return `You must provide a name containing at least one character for ` + `setCacheDetails({${cacheNameId}: '...'}). Received a value of ` + `'${JSON.stringify(value)}'`;
+      },
+      'unregister-route-but-not-found-with-method': ({
+        method
+      }) => {
+        if (!method) {
+          throw new Error(`Unexpected input to ` + `'unregister-route-but-not-found-with-method' error.`);
+        }
+        return `The route you're trying to unregister was not  previously ` + `registered for the method type '${method}'.`;
+      },
+      'unregister-route-route-not-registered': () => {
+        return `The route you're trying to unregister was not previously ` + `registered.`;
+      },
+      'queue-replay-failed': ({
+        name
+      }) => {
+        return `Replaying the background sync queue '${name}' failed.`;
+      },
+      'duplicate-queue-name': ({
+        name
+      }) => {
+        return `The Queue name '${name}' is already being used. ` + `All instances of backgroundSync.Queue must be given unique names.`;
+      },
+      'expired-test-without-max-age': ({
+        methodName,
+        paramName
+      }) => {
+        return `The '${methodName}()' method can only be used when the ` + `'${paramName}' is used in the constructor.`;
+      },
+      'unsupported-route-type': ({
+        moduleName,
+        className,
+        funcName,
+        paramName
+      }) => {
+        return `The supplied '${paramName}' parameter was an unsupported type. ` + `Please check the docs for ${moduleName}.${className}.${funcName} for ` + `valid input types.`;
+      },
+      'not-array-of-class': ({
+        value,
+        expectedClass,
+        moduleName,
+        className,
+        funcName,
+        paramName
+      }) => {
+        return `The supplied '${paramName}' parameter must be an array of ` + `'${expectedClass}' objects. Received '${JSON.stringify(value)},'. ` + `Please check the call to ${moduleName}.${className}.${funcName}() ` + `to fix the issue.`;
+      },
+      'max-entries-or-age-required': ({
+        moduleName,
+        className,
+        funcName
+      }) => {
+        return `You must define either config.maxEntries or config.maxAgeSeconds` + `in ${moduleName}.${className}.${funcName}`;
+      },
+      'statuses-or-headers-required': ({
+        moduleName,
+        className,
+        funcName
+      }) => {
+        return `You must define either config.statuses or config.headers` + `in ${moduleName}.${className}.${funcName}`;
+      },
+      'invalid-string': ({
+        moduleName,
+        funcName,
+        paramName
+      }) => {
+        if (!paramName || !moduleName || !funcName) {
+          throw new Error(`Unexpected input to 'invalid-string' error.`);
+        }
+        return `When using strings, the '${paramName}' parameter must start with ` + `'http' (for cross-origin matches) or '/' (for same-origin matches). ` + `Please see the docs for ${moduleName}.${funcName}() for ` + `more info.`;
+      },
+      'channel-name-required': () => {
+        return `You must provide a channelName to construct a ` + `BroadcastCacheUpdate instance.`;
+      },
+      'invalid-responses-are-same-args': () => {
+        return `The arguments passed into responsesAreSame() appear to be ` + `invalid. Please ensure valid Responses are used.`;
+      },
+      'expire-custom-caches-only': () => {
+        return `You must provide a 'cacheName' property when using the ` + `expiration plugin with a runtime caching strategy.`;
+      },
+      'unit-must-be-bytes': ({
+        normalizedRangeHeader
+      }) => {
+        if (!normalizedRangeHeader) {
+          throw new Error(`Unexpected input to 'unit-must-be-bytes' error.`);
+        }
+        return `The 'unit' portion of the Range header must be set to 'bytes'. ` + `The Range header provided was "${normalizedRangeHeader}"`;
+      },
+      'single-range-only': ({
+        normalizedRangeHeader
+      }) => {
+        if (!normalizedRangeHeader) {
+          throw new Error(`Unexpected input to 'single-range-only' error.`);
+        }
+        return `Multiple ranges are not supported. Please use a  single start ` + `value, and optional end value. The Range header provided was ` + `"${normalizedRangeHeader}"`;
+      },
+      'invalid-range-values': ({
+        normalizedRangeHeader
+      }) => {
+        if (!normalizedRangeHeader) {
+          throw new Error(`Unexpected input to 'invalid-range-values' error.`);
+        }
+        return `The Range header is missing both start and end values. At least ` + `one of those values is needed. The Range header provided was ` + `"${normalizedRangeHeader}"`;
+      },
+      'no-range-header': () => {
+        return `No Range header was found in the Request provided.`;
+      },
+      'range-not-satisfiable': ({
+        size,
+        start,
+        end
+      }) => {
+        return `The start (${start}) and end (${end}) values in the Range are ` + `not satisfiable by the cached response, which is ${size} bytes.`;
+      },
+      'attempt-to-cache-non-get-request': ({
+        url,
+        method
+      }) => {
+        return `Unable to cache '${url}' because it is a '${method}' request and ` + `only 'GET' requests can be cached.`;
+      },
+      'cache-put-with-no-response': ({
+        url
+      }) => {
+        return `There was an attempt to cache '${url}' but the response was not ` + `defined.`;
+      },
+      'no-response': ({
+        url,
+        error
+      }) => {
+        let message = `The strategy could not generate a response for '${url}'.`;
+        if (error) {
+          message += ` The underlying error is ${error}.`;
+        }
+        return message;
+      },
+      'bad-precaching-response': ({
+        url,
+        status
+      }) => {
+        return `The precaching request for '${url}' failed` + (status ? ` with an HTTP status of ${status}.` : `.`);
+      },
+      'non-precached-url': ({
+        url
+      }) => {
+        return `createHandlerBoundToURL('${url}') was called, but that URL is ` + `not precached. Please pass in a URL that is precached instead.`;
+      },
+      'add-to-cache-list-conflicting-integrities': ({
+        url
+      }) => {
+        return `Two of the entries passed to ` + `'workbox-precaching.PrecacheController.addToCacheList()' had the URL ` + `${url} with different integrity values. Please remove one of them.`;
+      },
+      'missing-precache-entry': ({
+        cacheName,
+        url
+      }) => {
+        return `Unable to find a precached response in ${cacheName} for ${url}.`;
+      },
+      'cross-origin-copy-response': ({
+        origin
+      }) => {
+        return `workbox-core.copyResponse() can only be used with same-origin ` + `responses. It was passed a response with origin ${origin}.`;
+      },
+      'opaque-streams-source': ({
+        type
+      }) => {
+        const message = `One of the workbox-streams sources resulted in an ` + `'${type}' response.`;
+        if (type === 'opaqueredirect') {
+          return `${message} Please do not use a navigation request that results ` + `in a redirect as a source.`;
+        }
+        return `${message} Please ensure your sources are CORS-enabled.`;
+      }
+    };
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const generatorFunction = (code, details = {}) => {
+      const message = messages$1[code];
+      if (!message) {
+        throw new Error(`Unable to find message for code '${code}'.`);
+      }
+      return message(details);
+    };
+    const messageGenerator = generatorFunction;
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Workbox errors should be thrown with this class.
+     * This allows use to ensure the type easily in tests,
+     * helps developers identify errors from workbox
+     * easily and allows use to optimise error
+     * messages correctly.
+     *
+     * @private
+     */
+    class WorkboxError extends Error {
+      /**
+       *
+       * @param {string} errorCode The error code that
+       * identifies this particular error.
+       * @param {Object=} details Any relevant arguments
+       * that will help developers identify issues should
+       * be added as a key on the context object.
+       */
+      constructor(errorCode, details) {
+        const message = messageGenerator(errorCode, details);
+        super(message);
+        this.name = errorCode;
+        this.details = details;
+      }
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /*
+     * This method throws if the supplied value is not an array.
+     * The destructed values are required to produce a meaningful error for users.
+     * The destructed and restructured object is so it's clear what is
+     * needed.
+     */
+    const isArray = (value, details) => {
+      if (!Array.isArray(value)) {
+        throw new WorkboxError('not-an-array', details);
+      }
+    };
+    const hasMethod = (object, expectedMethod, details) => {
+      const type = typeof object[expectedMethod];
+      if (type !== 'function') {
+        details['expectedMethod'] = expectedMethod;
+        throw new WorkboxError('missing-a-method', details);
+      }
+    };
+    const isType = (object, expectedType, details) => {
+      if (typeof object !== expectedType) {
+        details['expectedType'] = expectedType;
+        throw new WorkboxError('incorrect-type', details);
+      }
+    };
+    const isInstance = (object,
+    // Need the general type to do the check later.
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    expectedClass, details) => {
+      if (!(object instanceof expectedClass)) {
+        details['expectedClassName'] = expectedClass.name;
+        throw new WorkboxError('incorrect-class', details);
+      }
+    };
+    const isOneOf = (value, validValues, details) => {
+      if (!validValues.includes(value)) {
+        details['validValueDescription'] = `Valid values are ${JSON.stringify(validValues)}.`;
+        throw new WorkboxError('invalid-value', details);
+      }
+    };
+    const isArrayOfClass = (value,
+    // Need general type to do check later.
+    expectedClass,
+    // eslint-disable-line
+    details) => {
+      const error = new WorkboxError('not-array-of-class', details);
+      if (!Array.isArray(value)) {
+        throw error;
+      }
+      for (const item of value) {
+        if (!(item instanceof expectedClass)) {
+          throw error;
+        }
+      }
+    };
+    const finalAssertExports = {
+      hasMethod,
+      isArray,
+      isInstance,
+      isOneOf,
+      isType,
+      isArrayOfClass
+    };
+
+    // @ts-ignore
+    try {
+      self['workbox:routing:6.5.3'] && _();
+    } catch (e) {}
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * The default HTTP method, 'GET', used when there's no specific method
+     * configured for a route.
+     *
+     * @type {string}
+     *
+     * @private
+     */
+    const defaultMethod = 'GET';
+    /**
+     * The list of valid HTTP methods associated with requests that could be routed.
+     *
+     * @type {Array<string>}
+     *
+     * @private
+     */
+    const validMethods = ['DELETE', 'GET', 'HEAD', 'PATCH', 'POST', 'PUT'];
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * @param {function()|Object} handler Either a function, or an object with a
+     * 'handle' method.
+     * @return {Object} An object with a handle method.
+     *
+     * @private
+     */
+    const normalizeHandler = handler => {
+      if (handler && typeof handler === 'object') {
+        {
+          finalAssertExports.hasMethod(handler, 'handle', {
+            moduleName: 'workbox-routing',
+            className: 'Route',
+            funcName: 'constructor',
+            paramName: 'handler'
+          });
+        }
+        return handler;
+      } else {
+        {
+          finalAssertExports.isType(handler, 'function', {
+            moduleName: 'workbox-routing',
+            className: 'Route',
+            funcName: 'constructor',
+            paramName: 'handler'
+          });
+        }
+        return {
+          handle: handler
+        };
+      }
+    };
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * A `Route` consists of a pair of callback functions, "match" and "handler".
+     * The "match" callback determine if a route should be used to "handle" a
+     * request by returning a non-falsy value if it can. The "handler" callback
+     * is called when there is a match and should return a Promise that resolves
+     * to a `Response`.
+     *
+     * @memberof workbox-routing
+     */
+    class Route {
+      /**
+       * Constructor for Route class.
+       *
+       * @param {workbox-routing~matchCallback} match
+       * A callback function that determines whether the route matches a given
+       * `fetch` event by returning a non-falsy value.
+       * @param {workbox-routing~handlerCallback} handler A callback
+       * function that returns a Promise resolving to a Response.
+       * @param {string} [method='GET'] The HTTP method to match the Route
+       * against.
+       */
+      constructor(match, handler, method = defaultMethod) {
+        {
+          finalAssertExports.isType(match, 'function', {
+            moduleName: 'workbox-routing',
+            className: 'Route',
+            funcName: 'constructor',
+            paramName: 'match'
+          });
+          if (method) {
+            finalAssertExports.isOneOf(method, validMethods, {
+              paramName: 'method'
+            });
+          }
+        }
+        // These values are referenced directly by Router so cannot be
+        // altered by minificaton.
+        this.handler = normalizeHandler(handler);
+        this.match = match;
+        this.method = method;
+      }
+      /**
+       *
+       * @param {workbox-routing-handlerCallback} handler A callback
+       * function that returns a Promise resolving to a Response
+       */
+      setCatchHandler(handler) {
+        this.catchHandler = normalizeHandler(handler);
+      }
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * RegExpRoute makes it easy to create a regular expression based
+     * {@link workbox-routing.Route}.
+     *
+     * For same-origin requests the RegExp only needs to match part of the URL. For
+     * requests against third-party servers, you must define a RegExp that matches
+     * the start of the URL.
+     *
+     * @memberof workbox-routing
+     * @extends workbox-routing.Route
+     */
+    class RegExpRoute extends Route {
+      /**
+       * If the regular expression contains
+       * [capture groups]{@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#grouping-back-references},
+       * the captured values will be passed to the
+       * {@link workbox-routing~handlerCallback} `params`
+       * argument.
+       *
+       * @param {RegExp} regExp The regular expression to match against URLs.
+       * @param {workbox-routing~handlerCallback} handler A callback
+       * function that returns a Promise resulting in a Response.
+       * @param {string} [method='GET'] The HTTP method to match the Route
+       * against.
+       */
+      constructor(regExp, handler, method) {
+        {
+          finalAssertExports.isInstance(regExp, RegExp, {
+            moduleName: 'workbox-routing',
+            className: 'RegExpRoute',
+            funcName: 'constructor',
+            paramName: 'pattern'
+          });
+        }
+        const match = ({
+          url
+        }) => {
+          const result = regExp.exec(url.href);
+          // Return immediately if there's no match.
+          if (!result) {
+            return;
+          }
+          // Require that the match start at the first character in the URL string
+          // if it's a cross-origin request.
+          // See https://github.com/GoogleChrome/workbox/issues/281 for the context
+          // behind this behavior.
+          if (url.origin !== location.origin && result.index !== 0) {
+            {
+              logger.debug(`The regular expression '${regExp.toString()}' only partially matched ` + `against the cross-origin URL '${url.toString()}'. RegExpRoute's will only ` + `handle cross-origin requests if they match the entire URL.`);
+            }
+            return;
+          }
+          // If the route matches, but there aren't any capture groups defined, then
+          // this will return [], which is truthy and therefore sufficient to
+          // indicate a match.
+          // If there are capture groups, then it will return their values.
+          return result.slice(1);
+        };
+        super(match, handler, method);
+      }
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const getFriendlyURL = url => {
+      const urlObj = new URL(String(url), location.href);
+      // See https://github.com/GoogleChrome/workbox/issues/2323
+      // We want to include everything, except for the origin if it's same-origin.
+      return urlObj.href.replace(new RegExp(`^${location.origin}`), '');
+    };
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * The Router can be used to process a `FetchEvent` using one or more
+     * {@link workbox-routing.Route}, responding with a `Response` if
+     * a matching route exists.
+     *
+     * If no route matches a given a request, the Router will use a "default"
+     * handler if one is defined.
+     *
+     * Should the matching Route throw an error, the Router will use a "catch"
+     * handler if one is defined to gracefully deal with issues and respond with a
+     * Request.
+     *
+     * If a request matches multiple routes, the **earliest** registered route will
+     * be used to respond to the request.
+     *
+     * @memberof workbox-routing
+     */
+    class Router {
+      /**
+       * Initializes a new Router.
+       */
+      constructor() {
+        this._routes = new Map();
+        this._defaultHandlerMap = new Map();
+      }
+      /**
+       * @return {Map<string, Array<workbox-routing.Route>>} routes A `Map` of HTTP
+       * method name ('GET', etc.) to an array of all the corresponding `Route`
+       * instances that are registered.
+       */
+      get routes() {
+        return this._routes;
+      }
+      /**
+       * Adds a fetch event listener to respond to events when a route matches
+       * the event's request.
+       */
+      addFetchListener() {
+        // See https://github.com/Microsoft/TypeScript/issues/28357#issuecomment-436484705
+        self.addEventListener('fetch', event => {
+          const {
+            request
+          } = event;
+          const responsePromise = this.handleRequest({
+            request,
+            event
+          });
+          if (responsePromise) {
+            event.respondWith(responsePromise);
+          }
+        });
+      }
+      /**
+       * Adds a message event listener for URLs to cache from the window.
+       * This is useful to cache resources loaded on the page prior to when the
+       * service worker started controlling it.
+       *
+       * The format of the message data sent from the window should be as follows.
+       * Where the `urlsToCache` array may consist of URL strings or an array of
+       * URL string + `requestInit` object (the same as you'd pass to `fetch()`).
+       *
+       * ```
+       * {
+       *   type: 'CACHE_URLS',
+       *   payload: {
+       *     urlsToCache: [
+       *       './script1.js',
+       *       './script2.js',
+       *       ['./script3.js', {mode: 'no-cors'}],
+       *     ],
+       *   },
+       * }
+       * ```
+       */
+      addCacheListener() {
+        // See https://github.com/Microsoft/TypeScript/issues/28357#issuecomment-436484705
+        self.addEventListener('message', event => {
+          // event.data is type 'any'
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          if (event.data && event.data.type === 'CACHE_URLS') {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            const {
+              payload
+            } = event.data;
+            {
+              logger.debug(`Caching URLs from the window`, payload.urlsToCache);
+            }
+            const requestPromises = Promise.all(payload.urlsToCache.map(entry => {
+              if (typeof entry === 'string') {
+                entry = [entry];
+              }
+              const request = new Request(...entry);
+              return this.handleRequest({
+                request,
+                event
+              });
+              // TODO(philipwalton): TypeScript errors without this typecast for
+              // some reason (probably a bug). The real type here should work but
+              // doesn't: `Array<Promise<Response> | undefined>`.
+            })); // TypeScript
+            event.waitUntil(requestPromises);
+            // If a MessageChannel was used, reply to the message on success.
+            if (event.ports && event.ports[0]) {
+              void requestPromises.then(() => event.ports[0].postMessage(true));
+            }
+          }
+        });
+      }
+      /**
+       * Apply the routing rules to a FetchEvent object to get a Response from an
+       * appropriate Route's handler.
+       *
+       * @param {Object} options
+       * @param {Request} options.request The request to handle.
+       * @param {ExtendableEvent} options.event The event that triggered the
+       *     request.
+       * @return {Promise<Response>|undefined} A promise is returned if a
+       *     registered route can handle the request. If there is no matching
+       *     route and there's no `defaultHandler`, `undefined` is returned.
+       */
+      handleRequest({
+        request,
+        event
+      }) {
+        {
+          finalAssertExports.isInstance(request, Request, {
+            moduleName: 'workbox-routing',
+            className: 'Router',
+            funcName: 'handleRequest',
+            paramName: 'options.request'
+          });
+        }
+        const url = new URL(request.url, location.href);
+        if (!url.protocol.startsWith('http')) {
+          {
+            logger.debug(`Workbox Router only supports URLs that start with 'http'.`);
+          }
+          return;
+        }
+        const sameOrigin = url.origin === location.origin;
+        const {
+          params,
+          route
+        } = this.findMatchingRoute({
+          event,
+          request,
+          sameOrigin,
+          url
+        });
+        let handler = route && route.handler;
+        const debugMessages = [];
+        {
+          if (handler) {
+            debugMessages.push([`Found a route to handle this request:`, route]);
+            if (params) {
+              debugMessages.push([`Passing the following params to the route's handler:`, params]);
+            }
+          }
+        }
+        // If we don't have a handler because there was no matching route, then
+        // fall back to defaultHandler if that's defined.
+        const method = request.method;
+        if (!handler && this._defaultHandlerMap.has(method)) {
+          {
+            debugMessages.push(`Failed to find a matching route. Falling ` + `back to the default handler for ${method}.`);
+          }
+          handler = this._defaultHandlerMap.get(method);
+        }
+        if (!handler) {
+          {
+            // No handler so Workbox will do nothing. If logs is set of debug
+            // i.e. verbose, we should print out this information.
+            logger.debug(`No route found for: ${getFriendlyURL(url)}`);
+          }
+          return;
+        }
+        {
+          // We have a handler, meaning Workbox is going to handle the route.
+          // print the routing details to the console.
+          logger.groupCollapsed(`Router is responding to: ${getFriendlyURL(url)}`);
+          debugMessages.forEach(msg => {
+            if (Array.isArray(msg)) {
+              logger.log(...msg);
+            } else {
+              logger.log(msg);
+            }
+          });
+          logger.groupEnd();
+        }
+        // Wrap in try and catch in case the handle method throws a synchronous
+        // error. It should still callback to the catch handler.
+        let responsePromise;
+        try {
+          responsePromise = handler.handle({
+            url,
+            request,
+            event,
+            params
+          });
+        } catch (err) {
+          responsePromise = Promise.reject(err);
+        }
+        // Get route's catch handler, if it exists
+        const catchHandler = route && route.catchHandler;
+        if (responsePromise instanceof Promise && (this._catchHandler || catchHandler)) {
+          responsePromise = responsePromise.catch(async err => {
+            // If there's a route catch handler, process that first
+            if (catchHandler) {
+              {
+                // Still include URL here as it will be async from the console group
+                // and may not make sense without the URL
+                logger.groupCollapsed(`Error thrown when responding to: ` + ` ${getFriendlyURL(url)}. Falling back to route's Catch Handler.`);
+                logger.error(`Error thrown by:`, route);
+                logger.error(err);
+                logger.groupEnd();
+              }
+              try {
+                return await catchHandler.handle({
+                  url,
+                  request,
+                  event,
+                  params
+                });
+              } catch (catchErr) {
+                if (catchErr instanceof Error) {
+                  err = catchErr;
+                }
+              }
+            }
+            if (this._catchHandler) {
+              {
+                // Still include URL here as it will be async from the console group
+                // and may not make sense without the URL
+                logger.groupCollapsed(`Error thrown when responding to: ` + ` ${getFriendlyURL(url)}. Falling back to global Catch Handler.`);
+                logger.error(`Error thrown by:`, route);
+                logger.error(err);
+                logger.groupEnd();
+              }
+              return this._catchHandler.handle({
+                url,
+                request,
+                event
+              });
+            }
+            throw err;
+          });
+        }
+        return responsePromise;
+      }
+      /**
+       * Checks a request and URL (and optionally an event) against the list of
+       * registered routes, and if there's a match, returns the corresponding
+       * route along with any params generated by the match.
+       *
+       * @param {Object} options
+       * @param {URL} options.url
+       * @param {boolean} options.sameOrigin The result of comparing `url.origin`
+       *     against the current origin.
+       * @param {Request} options.request The request to match.
+       * @param {Event} options.event The corresponding event.
+       * @return {Object} An object with `route` and `params` properties.
+       *     They are populated if a matching route was found or `undefined`
+       *     otherwise.
+       */
+      findMatchingRoute({
+        url,
+        sameOrigin,
+        request,
+        event
+      }) {
+        const routes = this._routes.get(request.method) || [];
+        for (const route of routes) {
+          let params;
+          // route.match returns type any, not possible to change right now.
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          const matchResult = route.match({
+            url,
+            sameOrigin,
+            request,
+            event
+          });
+          if (matchResult) {
+            {
+              // Warn developers that using an async matchCallback is almost always
+              // not the right thing to do.
+              if (matchResult instanceof Promise) {
+                logger.warn(`While routing ${getFriendlyURL(url)}, an async ` + `matchCallback function was used. Please convert the ` + `following route to use a synchronous matchCallback function:`, route);
+              }
+            }
+            // See https://github.com/GoogleChrome/workbox/issues/2079
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            params = matchResult;
+            if (Array.isArray(params) && params.length === 0) {
+              // Instead of passing an empty array in as params, use undefined.
+              params = undefined;
+            } else if (matchResult.constructor === Object &&
+            // eslint-disable-line
+            Object.keys(matchResult).length === 0) {
+              // Instead of passing an empty object in as params, use undefined.
+              params = undefined;
+            } else if (typeof matchResult === 'boolean') {
+              // For the boolean value true (rather than just something truth-y),
+              // don't set params.
+              // See https://github.com/GoogleChrome/workbox/pull/2134#issuecomment-513924353
+              params = undefined;
+            }
+            // Return early if have a match.
+            return {
+              route,
+              params
+            };
+          }
+        }
+        // If no match was found above, return and empty object.
+        return {};
+      }
+      /**
+       * Define a default `handler` that's called when no routes explicitly
+       * match the incoming request.
+       *
+       * Each HTTP method ('GET', 'POST', etc.) gets its own default handler.
+       *
+       * Without a default handler, unmatched requests will go against the
+       * network as if there were no service worker present.
+       *
+       * @param {workbox-routing~handlerCallback} handler A callback
+       * function that returns a Promise resulting in a Response.
+       * @param {string} [method='GET'] The HTTP method to associate with this
+       * default handler. Each method has its own default.
+       */
+      setDefaultHandler(handler, method = defaultMethod) {
+        this._defaultHandlerMap.set(method, normalizeHandler(handler));
+      }
+      /**
+       * If a Route throws an error while handling a request, this `handler`
+       * will be called and given a chance to provide a response.
+       *
+       * @param {workbox-routing~handlerCallback} handler A callback
+       * function that returns a Promise resulting in a Response.
+       */
+      setCatchHandler(handler) {
+        this._catchHandler = normalizeHandler(handler);
+      }
+      /**
+       * Registers a route with the router.
+       *
+       * @param {workbox-routing.Route} route The route to register.
+       */
+      registerRoute(route) {
+        {
+          finalAssertExports.isType(route, 'object', {
+            moduleName: 'workbox-routing',
+            className: 'Router',
+            funcName: 'registerRoute',
+            paramName: 'route'
+          });
+          finalAssertExports.hasMethod(route, 'match', {
+            moduleName: 'workbox-routing',
+            className: 'Router',
+            funcName: 'registerRoute',
+            paramName: 'route'
+          });
+          finalAssertExports.isType(route.handler, 'object', {
+            moduleName: 'workbox-routing',
+            className: 'Router',
+            funcName: 'registerRoute',
+            paramName: 'route'
+          });
+          finalAssertExports.hasMethod(route.handler, 'handle', {
+            moduleName: 'workbox-routing',
+            className: 'Router',
+            funcName: 'registerRoute',
+            paramName: 'route.handler'
+          });
+          finalAssertExports.isType(route.method, 'string', {
+            moduleName: 'workbox-routing',
+            className: 'Router',
+            funcName: 'registerRoute',
+            paramName: 'route.method'
+          });
+        }
+        if (!this._routes.has(route.method)) {
+          this._routes.set(route.method, []);
+        }
+        // Give precedence to all of the earlier routes by adding this additional
+        // route to the end of the array.
+        this._routes.get(route.method).push(route);
+      }
+      /**
+       * Unregisters a route with the router.
+       *
+       * @param {workbox-routing.Route} route The route to unregister.
+       */
+      unregisterRoute(route) {
+        if (!this._routes.has(route.method)) {
+          throw new WorkboxError('unregister-route-but-not-found-with-method', {
+            method: route.method
+          });
+        }
+        const routeIndex = this._routes.get(route.method).indexOf(route);
+        if (routeIndex > -1) {
+          this._routes.get(route.method).splice(routeIndex, 1);
+        } else {
+          throw new WorkboxError('unregister-route-route-not-registered');
+        }
+      }
+    }
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    let defaultRouter;
+    /**
+     * Creates a new, singleton Router instance if one does not exist. If one
+     * does already exist, that instance is returned.
+     *
+     * @private
+     * @return {Router}
+     */
+    const getOrCreateDefaultRouter = () => {
+      if (!defaultRouter) {
+        defaultRouter = new Router();
+        // The helpers that use the default Router assume these listeners exist.
+        defaultRouter.addFetchListener();
+        defaultRouter.addCacheListener();
+      }
+      return defaultRouter;
+    };
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Easily register a RegExp, string, or function with a caching
+     * strategy to a singleton Router instance.
+     *
+     * This method will generate a Route for you if needed and
+     * call {@link workbox-routing.Router#registerRoute}.
+     *
+     * @param {RegExp|string|workbox-routing.Route~matchCallback|workbox-routing.Route} capture
+     * If the capture param is a `Route`, all other arguments will be ignored.
+     * @param {workbox-routing~handlerCallback} [handler] A callback
+     * function that returns a Promise resulting in a Response. This parameter
+     * is required if `capture` is not a `Route` object.
+     * @param {string} [method='GET'] The HTTP method to match the Route
+     * against.
+     * @return {workbox-routing.Route} The generated `Route`.
+     *
+     * @memberof workbox-routing
+     */
+    function registerRoute(capture, handler, method) {
+      let route;
+      if (typeof capture === 'string') {
+        const captureUrl = new URL(capture, location.href);
+        {
+          if (!(capture.startsWith('/') || capture.startsWith('http'))) {
+            throw new WorkboxError('invalid-string', {
+              moduleName: 'workbox-routing',
+              funcName: 'registerRoute',
+              paramName: 'capture'
+            });
+          }
+          // We want to check if Express-style wildcards are in the pathname only.
+          // TODO: Remove this log message in v4.
+          const valueToCheck = capture.startsWith('http') ? captureUrl.pathname : capture;
+          // See https://github.com/pillarjs/path-to-regexp#parameters
+          const wildcards = '[*:?+]';
+          if (new RegExp(`${wildcards}`).exec(valueToCheck)) {
+            logger.debug(`The '$capture' parameter contains an Express-style wildcard ` + `character (${wildcards}). Strings are now always interpreted as ` + `exact matches; use a RegExp for partial or wildcard matches.`);
+          }
+        }
+        const matchCallback = ({
+          url
+        }) => {
+          {
+            if (url.pathname === captureUrl.pathname && url.origin !== captureUrl.origin) {
+              logger.debug(`${capture} only partially matches the cross-origin URL ` + `${url.toString()}. This route will only handle cross-origin requests ` + `if they match the entire URL.`);
+            }
+          }
+          return url.href === captureUrl.href;
+        };
+        // If `capture` is a string then `handler` and `method` must be present.
+        route = new Route(matchCallback, handler, method);
+      } else if (capture instanceof RegExp) {
+        // If `capture` is a `RegExp` then `handler` and `method` must be present.
+        route = new RegExpRoute(capture, handler, method);
+      } else if (typeof capture === 'function') {
+        // If `capture` is a function then `handler` and `method` must be present.
+        route = new Route(capture, handler, method);
+      } else if (capture instanceof Route) {
+        route = capture;
+      } else {
+        throw new WorkboxError('unsupported-route-type', {
+          moduleName: 'workbox-routing',
+          funcName: 'registerRoute',
+          paramName: 'capture'
+        });
+      }
+      const defaultRouter = getOrCreateDefaultRouter();
+      defaultRouter.registerRoute(route);
+      return route;
+    }
+
+    // @ts-ignore
+    try {
+      self['workbox:strategies:6.5.3'] && _();
+    } catch (e) {}
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const cacheOkAndOpaquePlugin = {
+      /**
+       * Returns a valid response (to allow caching) if the status is 200 (OK) or
+       * 0 (opaque).
+       *
+       * @param {Object} options
+       * @param {Response} options.response
+       * @return {Response|null}
+       *
+       * @private
+       */
+      cacheWillUpdate: async ({
+        response
+      }) => {
+        if (response.status === 200 || response.status === 0) {
+          return response;
+        }
+        return null;
+      }
+    };
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const _cacheNameDetails = {
+      googleAnalytics: 'googleAnalytics',
+      precache: 'precache-v2',
+      prefix: 'workbox',
+      runtime: 'runtime',
+      suffix: typeof registration !== 'undefined' ? registration.scope : ''
+    };
+    const _createCacheName = cacheName => {
+      return [_cacheNameDetails.prefix, cacheName, _cacheNameDetails.suffix].filter(value => value && value.length > 0).join('-');
+    };
+    const eachCacheNameDetail = fn => {
+      for (const key of Object.keys(_cacheNameDetails)) {
+        fn(key);
+      }
+    };
+    const cacheNames = {
+      updateDetails: details => {
+        eachCacheNameDetail(key => {
+          if (typeof details[key] === 'string') {
+            _cacheNameDetails[key] = details[key];
+          }
+        });
+      },
+      getGoogleAnalyticsName: userCacheName => {
+        return userCacheName || _createCacheName(_cacheNameDetails.googleAnalytics);
+      },
+      getPrecacheName: userCacheName => {
+        return userCacheName || _createCacheName(_cacheNameDetails.precache);
+      },
+      getPrefix: () => {
+        return _cacheNameDetails.prefix;
+      },
+      getRuntimeName: userCacheName => {
+        return userCacheName || _createCacheName(_cacheNameDetails.runtime);
+      },
+      getSuffix: () => {
+        return _cacheNameDetails.suffix;
+      }
+    };
+
+    /*
+      Copyright 2020 Google LLC
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    function stripParams(fullURL, ignoreParams) {
+      const strippedURL = new URL(fullURL);
+      for (const param of ignoreParams) {
+        strippedURL.searchParams.delete(param);
+      }
+      return strippedURL.href;
+    }
+    /**
+     * Matches an item in the cache, ignoring specific URL params. This is similar
+     * to the `ignoreSearch` option, but it allows you to ignore just specific
+     * params (while continuing to match on the others).
+     *
+     * @private
+     * @param {Cache} cache
+     * @param {Request} request
+     * @param {Object} matchOptions
+     * @param {Array<string>} ignoreParams
+     * @return {Promise<Response|undefined>}
+     */
+    async function cacheMatchIgnoreParams(cache, request, ignoreParams, matchOptions) {
+      const strippedRequestURL = stripParams(request.url, ignoreParams);
+      // If the request doesn't include any ignored params, match as normal.
+      if (request.url === strippedRequestURL) {
+        return cache.match(request, matchOptions);
+      }
+      // Otherwise, match by comparing keys
+      const keysOptions = Object.assign(Object.assign({}, matchOptions), {
+        ignoreSearch: true
+      });
+      const cacheKeys = await cache.keys(request, keysOptions);
+      for (const cacheKey of cacheKeys) {
+        const strippedCacheKeyURL = stripParams(cacheKey.url, ignoreParams);
+        if (strippedRequestURL === strippedCacheKeyURL) {
+          return cache.match(cacheKey, matchOptions);
+        }
+      }
+      return;
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * The Deferred class composes Promises in a way that allows for them to be
+     * resolved or rejected from outside the constructor. In most cases promises
+     * should be used directly, but Deferreds can be necessary when the logic to
+     * resolve a promise must be separate.
+     *
+     * @private
+     */
+    class Deferred {
+      /**
+       * Creates a promise and exposes its resolve and reject functions as methods.
+       */
+      constructor() {
+        this.promise = new Promise((resolve, reject) => {
+          this.resolve = resolve;
+          this.reject = reject;
+        });
+      }
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    // Callbacks to be executed whenever there's a quota error.
+    // Can't change Function type right now.
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const quotaErrorCallbacks = new Set();
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Runs all of the callback functions, one at a time sequentially, in the order
+     * in which they were registered.
+     *
+     * @memberof workbox-core
+     * @private
+     */
+    async function executeQuotaErrorCallbacks() {
+      {
+        logger.log(`About to run ${quotaErrorCallbacks.size} ` + `callbacks to clean up caches.`);
+      }
+      for (const callback of quotaErrorCallbacks) {
+        await callback();
+        {
+          logger.log(callback, 'is complete.');
+        }
+      }
+      {
+        logger.log('Finished running callbacks.');
+      }
+    }
+
+    /*
+      Copyright 2019 Google LLC
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Returns a promise that resolves and the passed number of milliseconds.
+     * This utility is an async/await-friendly version of `setTimeout`.
+     *
+     * @param {number} ms
+     * @return {Promise}
+     * @private
+     */
+    function timeout(ms) {
+      return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    /*
+      Copyright 2020 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    function toRequest(input) {
+      return typeof input === 'string' ? new Request(input) : input;
+    }
+    /**
+     * A class created every time a Strategy instance instance calls
+     * {@link workbox-strategies.Strategy~handle} or
+     * {@link workbox-strategies.Strategy~handleAll} that wraps all fetch and
+     * cache actions around plugin callbacks and keeps track of when the strategy
+     * is "done" (i.e. all added `event.waitUntil()` promises have resolved).
+     *
+     * @memberof workbox-strategies
+     */
+    class StrategyHandler {
+      /**
+       * Creates a new instance associated with the passed strategy and event
+       * that's handling the request.
+       *
+       * The constructor also initializes the state that will be passed to each of
+       * the plugins handling this request.
+       *
+       * @param {workbox-strategies.Strategy} strategy
+       * @param {Object} options
+       * @param {Request|string} options.request A request to run this strategy for.
+       * @param {ExtendableEvent} options.event The event associated with the
+       *     request.
+       * @param {URL} [options.url]
+       * @param {*} [options.params] The return value from the
+       *     {@link workbox-routing~matchCallback} (if applicable).
+       */
+      constructor(strategy, options) {
+        this._cacheKeys = {};
+        /**
+         * The request the strategy is performing (passed to the strategy's
+         * `handle()` or `handleAll()` method).
+         * @name request
+         * @instance
+         * @type {Request}
+         * @memberof workbox-strategies.StrategyHandler
+         */
+        /**
+         * The event associated with this request.
+         * @name event
+         * @instance
+         * @type {ExtendableEvent}
+         * @memberof workbox-strategies.StrategyHandler
+         */
+        /**
+         * A `URL` instance of `request.url` (if passed to the strategy's
+         * `handle()` or `handleAll()` method).
+         * Note: the `url` param will be present if the strategy was invoked
+         * from a workbox `Route` object.
+         * @name url
+         * @instance
+         * @type {URL|undefined}
+         * @memberof workbox-strategies.StrategyHandler
+         */
+        /**
+         * A `param` value (if passed to the strategy's
+         * `handle()` or `handleAll()` method).
+         * Note: the `param` param will be present if the strategy was invoked
+         * from a workbox `Route` object and the
+         * {@link workbox-routing~matchCallback} returned
+         * a truthy value (it will be that value).
+         * @name params
+         * @instance
+         * @type {*|undefined}
+         * @memberof workbox-strategies.StrategyHandler
+         */
+        {
+          finalAssertExports.isInstance(options.event, ExtendableEvent, {
+            moduleName: 'workbox-strategies',
+            className: 'StrategyHandler',
+            funcName: 'constructor',
+            paramName: 'options.event'
+          });
+        }
+        Object.assign(this, options);
+        this.event = options.event;
+        this._strategy = strategy;
+        this._handlerDeferred = new Deferred();
+        this._extendLifetimePromises = [];
+        // Copy the plugins list (since it's mutable on the strategy),
+        // so any mutations don't affect this handler instance.
+        this._plugins = [...strategy.plugins];
+        this._pluginStateMap = new Map();
+        for (const plugin of this._plugins) {
+          this._pluginStateMap.set(plugin, {});
+        }
+        this.event.waitUntil(this._handlerDeferred.promise);
+      }
+      /**
+       * Fetches a given request (and invokes any applicable plugin callback
+       * methods) using the `fetchOptions` (for non-navigation requests) and
+       * `plugins` defined on the `Strategy` object.
+       *
+       * The following plugin lifecycle methods are invoked when using this method:
+       * - `requestWillFetch()`
+       * - `fetchDidSucceed()`
+       * - `fetchDidFail()`
+       *
+       * @param {Request|string} input The URL or request to fetch.
+       * @return {Promise<Response>}
+       */
+      async fetch(input) {
+        const {
+          event
+        } = this;
+        let request = toRequest(input);
+        if (request.mode === 'navigate' && event instanceof FetchEvent && event.preloadResponse) {
+          const possiblePreloadResponse = await event.preloadResponse;
+          if (possiblePreloadResponse) {
+            {
+              logger.log(`Using a preloaded navigation response for ` + `'${getFriendlyURL(request.url)}'`);
+            }
+            return possiblePreloadResponse;
+          }
+        }
+        // If there is a fetchDidFail plugin, we need to save a clone of the
+        // original request before it's either modified by a requestWillFetch
+        // plugin or before the original request's body is consumed via fetch().
+        const originalRequest = this.hasCallback('fetchDidFail') ? request.clone() : null;
+        try {
+          for (const cb of this.iterateCallbacks('requestWillFetch')) {
+            request = await cb({
+              request: request.clone(),
+              event
+            });
+          }
+        } catch (err) {
+          if (err instanceof Error) {
+            throw new WorkboxError('plugin-error-request-will-fetch', {
+              thrownErrorMessage: err.message
+            });
+          }
+        }
+        // The request can be altered by plugins with `requestWillFetch` making
+        // the original request (most likely from a `fetch` event) different
+        // from the Request we make. Pass both to `fetchDidFail` to aid debugging.
+        const pluginFilteredRequest = request.clone();
+        try {
+          let fetchResponse;
+          // See https://github.com/GoogleChrome/workbox/issues/1796
+          fetchResponse = await fetch(request, request.mode === 'navigate' ? undefined : this._strategy.fetchOptions);
+          if ("development" !== 'production') {
+            logger.debug(`Network request for ` + `'${getFriendlyURL(request.url)}' returned a response with ` + `status '${fetchResponse.status}'.`);
+          }
+          for (const callback of this.iterateCallbacks('fetchDidSucceed')) {
+            fetchResponse = await callback({
+              event,
+              request: pluginFilteredRequest,
+              response: fetchResponse
+            });
+          }
+          return fetchResponse;
+        } catch (error) {
+          {
+            logger.log(`Network request for ` + `'${getFriendlyURL(request.url)}' threw an error.`, error);
+          }
+          // `originalRequest` will only exist if a `fetchDidFail` callback
+          // is being used (see above).
+          if (originalRequest) {
+            await this.runCallbacks('fetchDidFail', {
+              error: error,
+              event,
+              originalRequest: originalRequest.clone(),
+              request: pluginFilteredRequest.clone()
+            });
+          }
+          throw error;
+        }
+      }
+      /**
+       * Calls `this.fetch()` and (in the background) runs `this.cachePut()` on
+       * the response generated by `this.fetch()`.
+       *
+       * The call to `this.cachePut()` automatically invokes `this.waitUntil()`,
+       * so you do not have to manually call `waitUntil()` on the event.
+       *
+       * @param {Request|string} input The request or URL to fetch and cache.
+       * @return {Promise<Response>}
+       */
+      async fetchAndCachePut(input) {
+        const response = await this.fetch(input);
+        const responseClone = response.clone();
+        void this.waitUntil(this.cachePut(input, responseClone));
+        return response;
+      }
+      /**
+       * Matches a request from the cache (and invokes any applicable plugin
+       * callback methods) using the `cacheName`, `matchOptions`, and `plugins`
+       * defined on the strategy object.
+       *
+       * The following plugin lifecycle methods are invoked when using this method:
+       * - cacheKeyWillByUsed()
+       * - cachedResponseWillByUsed()
+       *
+       * @param {Request|string} key The Request or URL to use as the cache key.
+       * @return {Promise<Response|undefined>} A matching response, if found.
+       */
+      async cacheMatch(key) {
+        const request = toRequest(key);
+        let cachedResponse;
+        const {
+          cacheName,
+          matchOptions
+        } = this._strategy;
+        const effectiveRequest = await this.getCacheKey(request, 'read');
+        const multiMatchOptions = Object.assign(Object.assign({}, matchOptions), {
+          cacheName
+        });
+        cachedResponse = await caches.match(effectiveRequest, multiMatchOptions);
+        {
+          if (cachedResponse) {
+            logger.debug(`Found a cached response in '${cacheName}'.`);
+          } else {
+            logger.debug(`No cached response found in '${cacheName}'.`);
+          }
+        }
+        for (const callback of this.iterateCallbacks('cachedResponseWillBeUsed')) {
+          cachedResponse = (await callback({
+            cacheName,
+            matchOptions,
+            cachedResponse,
+            request: effectiveRequest,
+            event: this.event
+          })) || undefined;
+        }
+        return cachedResponse;
+      }
+      /**
+       * Puts a request/response pair in the cache (and invokes any applicable
+       * plugin callback methods) using the `cacheName` and `plugins` defined on
+       * the strategy object.
+       *
+       * The following plugin lifecycle methods are invoked when using this method:
+       * - cacheKeyWillByUsed()
+       * - cacheWillUpdate()
+       * - cacheDidUpdate()
+       *
+       * @param {Request|string} key The request or URL to use as the cache key.
+       * @param {Response} response The response to cache.
+       * @return {Promise<boolean>} `false` if a cacheWillUpdate caused the response
+       * not be cached, and `true` otherwise.
+       */
+      async cachePut(key, response) {
+        const request = toRequest(key);
+        // Run in the next task to avoid blocking other cache reads.
+        // https://github.com/w3c/ServiceWorker/issues/1397
+        await timeout(0);
+        const effectiveRequest = await this.getCacheKey(request, 'write');
+        {
+          if (effectiveRequest.method && effectiveRequest.method !== 'GET') {
+            throw new WorkboxError('attempt-to-cache-non-get-request', {
+              url: getFriendlyURL(effectiveRequest.url),
+              method: effectiveRequest.method
+            });
+          }
+          // See https://github.com/GoogleChrome/workbox/issues/2818
+          const vary = response.headers.get('Vary');
+          if (vary) {
+            logger.debug(`The response for ${getFriendlyURL(effectiveRequest.url)} ` + `has a 'Vary: ${vary}' header. ` + `Consider setting the {ignoreVary: true} option on your strategy ` + `to ensure cache matching and deletion works as expected.`);
+          }
+        }
+        if (!response) {
+          {
+            logger.error(`Cannot cache non-existent response for ` + `'${getFriendlyURL(effectiveRequest.url)}'.`);
+          }
+          throw new WorkboxError('cache-put-with-no-response', {
+            url: getFriendlyURL(effectiveRequest.url)
+          });
+        }
+        const responseToCache = await this._ensureResponseSafeToCache(response);
+        if (!responseToCache) {
+          {
+            logger.debug(`Response '${getFriendlyURL(effectiveRequest.url)}' ` + `will not be cached.`, responseToCache);
+          }
+          return false;
+        }
+        const {
+          cacheName,
+          matchOptions
+        } = this._strategy;
+        const cache = await self.caches.open(cacheName);
+        const hasCacheUpdateCallback = this.hasCallback('cacheDidUpdate');
+        const oldResponse = hasCacheUpdateCallback ? await cacheMatchIgnoreParams(
+        // TODO(philipwalton): the `__WB_REVISION__` param is a precaching
+        // feature. Consider into ways to only add this behavior if using
+        // precaching.
+        cache, effectiveRequest.clone(), ['__WB_REVISION__'], matchOptions) : null;
+        {
+          logger.debug(`Updating the '${cacheName}' cache with a new Response ` + `for ${getFriendlyURL(effectiveRequest.url)}.`);
+        }
+        try {
+          await cache.put(effectiveRequest, hasCacheUpdateCallback ? responseToCache.clone() : responseToCache);
+        } catch (error) {
+          if (error instanceof Error) {
+            // See https://developer.mozilla.org/en-US/docs/Web/API/DOMException#exception-QuotaExceededError
+            if (error.name === 'QuotaExceededError') {
+              await executeQuotaErrorCallbacks();
+            }
+            throw error;
+          }
+        }
+        for (const callback of this.iterateCallbacks('cacheDidUpdate')) {
+          await callback({
+            cacheName,
+            oldResponse,
+            newResponse: responseToCache.clone(),
+            request: effectiveRequest,
+            event: this.event
+          });
+        }
+        return true;
+      }
+      /**
+       * Checks the list of plugins for the `cacheKeyWillBeUsed` callback, and
+       * executes any of those callbacks found in sequence. The final `Request`
+       * object returned by the last plugin is treated as the cache key for cache
+       * reads and/or writes. If no `cacheKeyWillBeUsed` plugin callbacks have
+       * been registered, the passed request is returned unmodified
+       *
+       * @param {Request} request
+       * @param {string} mode
+       * @return {Promise<Request>}
+       */
+      async getCacheKey(request, mode) {
+        const key = `${request.url} | ${mode}`;
+        if (!this._cacheKeys[key]) {
+          let effectiveRequest = request;
+          for (const callback of this.iterateCallbacks('cacheKeyWillBeUsed')) {
+            effectiveRequest = toRequest(await callback({
+              mode,
+              request: effectiveRequest,
+              event: this.event,
+              // params has a type any can't change right now.
+              params: this.params // eslint-disable-line
+            }));
+          }
+
+          this._cacheKeys[key] = effectiveRequest;
+        }
+        return this._cacheKeys[key];
+      }
+      /**
+       * Returns true if the strategy has at least one plugin with the given
+       * callback.
+       *
+       * @param {string} name The name of the callback to check for.
+       * @return {boolean}
+       */
+      hasCallback(name) {
+        for (const plugin of this._strategy.plugins) {
+          if (name in plugin) {
+            return true;
+          }
+        }
+        return false;
+      }
+      /**
+       * Runs all plugin callbacks matching the given name, in order, passing the
+       * given param object (merged ith the current plugin state) as the only
+       * argument.
+       *
+       * Note: since this method runs all plugins, it's not suitable for cases
+       * where the return value of a callback needs to be applied prior to calling
+       * the next callback. See
+       * {@link workbox-strategies.StrategyHandler#iterateCallbacks}
+       * below for how to handle that case.
+       *
+       * @param {string} name The name of the callback to run within each plugin.
+       * @param {Object} param The object to pass as the first (and only) param
+       *     when executing each callback. This object will be merged with the
+       *     current plugin state prior to callback execution.
+       */
+      async runCallbacks(name, param) {
+        for (const callback of this.iterateCallbacks(name)) {
+          // TODO(philipwalton): not sure why `any` is needed. It seems like
+          // this should work with `as WorkboxPluginCallbackParam[C]`.
+          await callback(param);
+        }
+      }
+      /**
+       * Accepts a callback and returns an iterable of matching plugin callbacks,
+       * where each callback is wrapped with the current handler state (i.e. when
+       * you call each callback, whatever object parameter you pass it will
+       * be merged with the plugin's current state).
+       *
+       * @param {string} name The name fo the callback to run
+       * @return {Array<Function>}
+       */
+      *iterateCallbacks(name) {
+        for (const plugin of this._strategy.plugins) {
+          if (typeof plugin[name] === 'function') {
+            const state = this._pluginStateMap.get(plugin);
+            const statefulCallback = param => {
+              const statefulParam = Object.assign(Object.assign({}, param), {
+                state
+              });
+              // TODO(philipwalton): not sure why `any` is needed. It seems like
+              // this should work with `as WorkboxPluginCallbackParam[C]`.
+              return plugin[name](statefulParam);
+            };
+            yield statefulCallback;
+          }
+        }
+      }
+      /**
+       * Adds a promise to the
+       * [extend lifetime promises]{@link https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises}
+       * of the event event associated with the request being handled (usually a
+       * `FetchEvent`).
+       *
+       * Note: you can await
+       * {@link workbox-strategies.StrategyHandler~doneWaiting}
+       * to know when all added promises have settled.
+       *
+       * @param {Promise} promise A promise to add to the extend lifetime promises
+       *     of the event that triggered the request.
+       */
+      waitUntil(promise) {
+        this._extendLifetimePromises.push(promise);
+        return promise;
+      }
+      /**
+       * Returns a promise that resolves once all promises passed to
+       * {@link workbox-strategies.StrategyHandler~waitUntil}
+       * have settled.
+       *
+       * Note: any work done after `doneWaiting()` settles should be manually
+       * passed to an event's `waitUntil()` method (not this handler's
+       * `waitUntil()` method), otherwise the service worker thread my be killed
+       * prior to your work completing.
+       */
+      async doneWaiting() {
+        let promise;
+        while (promise = this._extendLifetimePromises.shift()) {
+          await promise;
+        }
+      }
+      /**
+       * Stops running the strategy and immediately resolves any pending
+       * `waitUntil()` promises.
+       */
+      destroy() {
+        this._handlerDeferred.resolve(null);
+      }
+      /**
+       * This method will call cacheWillUpdate on the available plugins (or use
+       * status === 200) to determine if the Response is safe and valid to cache.
+       *
+       * @param {Request} options.request
+       * @param {Response} options.response
+       * @return {Promise<Response|undefined>}
+       *
+       * @private
+       */
+      async _ensureResponseSafeToCache(response) {
+        let responseToCache = response;
+        let pluginsUsed = false;
+        for (const callback of this.iterateCallbacks('cacheWillUpdate')) {
+          responseToCache = (await callback({
+            request: this.request,
+            response: responseToCache,
+            event: this.event
+          })) || undefined;
+          pluginsUsed = true;
+          if (!responseToCache) {
+            break;
+          }
+        }
+        if (!pluginsUsed) {
+          if (responseToCache && responseToCache.status !== 200) {
+            responseToCache = undefined;
+          }
+          {
+            if (responseToCache) {
+              if (responseToCache.status !== 200) {
+                if (responseToCache.status === 0) {
+                  logger.warn(`The response for '${this.request.url}' ` + `is an opaque response. The caching strategy that you're ` + `using will not cache opaque responses by default.`);
+                } else {
+                  logger.debug(`The response for '${this.request.url}' ` + `returned a status code of '${response.status}' and won't ` + `be cached as a result.`);
+                }
+              }
+            }
+          }
+        }
+        return responseToCache;
+      }
+    }
+
+    /*
+      Copyright 2020 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * An abstract base class that all other strategy classes must extend from:
+     *
+     * @memberof workbox-strategies
+     */
+    class Strategy {
+      /**
+       * Creates a new instance of the strategy and sets all documented option
+       * properties as public instance properties.
+       *
+       * Note: if a custom strategy class extends the base Strategy class and does
+       * not need more than these properties, it does not need to define its own
+       * constructor.
+       *
+       * @param {Object} [options]
+       * @param {string} [options.cacheName] Cache name to store and retrieve
+       * requests. Defaults to the cache names provided by
+       * {@link workbox-core.cacheNames}.
+       * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
+       * to use in conjunction with this caching strategy.
+       * @param {Object} [options.fetchOptions] Values passed along to the
+       * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)
+       * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)
+       * `fetch()` requests made by this strategy.
+       * @param {Object} [options.matchOptions] The
+       * [`CacheQueryOptions`]{@link https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions}
+       * for any `cache.match()` or `cache.put()` calls made by this strategy.
+       */
+      constructor(options = {}) {
+        /**
+         * Cache name to store and retrieve
+         * requests. Defaults to the cache names provided by
+         * {@link workbox-core.cacheNames}.
+         *
+         * @type {string}
+         */
+        this.cacheName = cacheNames.getRuntimeName(options.cacheName);
+        /**
+         * The list
+         * [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
+         * used by this strategy.
+         *
+         * @type {Array<Object>}
+         */
+        this.plugins = options.plugins || [];
+        /**
+         * Values passed along to the
+         * [`init`]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters}
+         * of all fetch() requests made by this strategy.
+         *
+         * @type {Object}
+         */
+        this.fetchOptions = options.fetchOptions;
+        /**
+         * The
+         * [`CacheQueryOptions`]{@link https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions}
+         * for any `cache.match()` or `cache.put()` calls made by this strategy.
+         *
+         * @type {Object}
+         */
+        this.matchOptions = options.matchOptions;
+      }
+      /**
+       * Perform a request strategy and returns a `Promise` that will resolve with
+       * a `Response`, invoking all relevant plugin callbacks.
+       *
+       * When a strategy instance is registered with a Workbox
+       * {@link workbox-routing.Route}, this method is automatically
+       * called when the route matches.
+       *
+       * Alternatively, this method can be used in a standalone `FetchEvent`
+       * listener by passing it to `event.respondWith()`.
+       *
+       * @param {FetchEvent|Object} options A `FetchEvent` or an object with the
+       *     properties listed below.
+       * @param {Request|string} options.request A request to run this strategy for.
+       * @param {ExtendableEvent} options.event The event associated with the
+       *     request.
+       * @param {URL} [options.url]
+       * @param {*} [options.params]
+       */
+      handle(options) {
+        const [responseDone] = this.handleAll(options);
+        return responseDone;
+      }
+      /**
+       * Similar to {@link workbox-strategies.Strategy~handle}, but
+       * instead of just returning a `Promise` that resolves to a `Response` it
+       * it will return an tuple of `[response, done]` promises, where the former
+       * (`response`) is equivalent to what `handle()` returns, and the latter is a
+       * Promise that will resolve once any promises that were added to
+       * `event.waitUntil()` as part of performing the strategy have completed.
+       *
+       * You can await the `done` promise to ensure any extra work performed by
+       * the strategy (usually caching responses) completes successfully.
+       *
+       * @param {FetchEvent|Object} options A `FetchEvent` or an object with the
+       *     properties listed below.
+       * @param {Request|string} options.request A request to run this strategy for.
+       * @param {ExtendableEvent} options.event The event associated with the
+       *     request.
+       * @param {URL} [options.url]
+       * @param {*} [options.params]
+       * @return {Array<Promise>} A tuple of [response, done]
+       *     promises that can be used to determine when the response resolves as
+       *     well as when the handler has completed all its work.
+       */
+      handleAll(options) {
+        // Allow for flexible options to be passed.
+        if (options instanceof FetchEvent) {
+          options = {
+            event: options,
+            request: options.request
+          };
+        }
+        const event = options.event;
+        const request = typeof options.request === 'string' ? new Request(options.request) : options.request;
+        const params = 'params' in options ? options.params : undefined;
+        const handler = new StrategyHandler(this, {
+          event,
+          request,
+          params
+        });
+        const responseDone = this._getResponse(handler, request, event);
+        const handlerDone = this._awaitComplete(responseDone, handler, request, event);
+        // Return an array of promises, suitable for use with Promise.all().
+        return [responseDone, handlerDone];
+      }
+      async _getResponse(handler, request, event) {
+        await handler.runCallbacks('handlerWillStart', {
+          event,
+          request
+        });
+        let response = undefined;
+        try {
+          response = await this._handle(request, handler);
+          // The "official" Strategy subclasses all throw this error automatically,
+          // but in case a third-party Strategy doesn't, ensure that we have a
+          // consistent failure when there's no response or an error response.
+          if (!response || response.type === 'error') {
+            throw new WorkboxError('no-response', {
+              url: request.url
+            });
+          }
+        } catch (error) {
+          if (error instanceof Error) {
+            for (const callback of handler.iterateCallbacks('handlerDidError')) {
+              response = await callback({
+                error,
+                event,
+                request
+              });
+              if (response) {
+                break;
+              }
+            }
+          }
+          if (!response) {
+            throw error;
+          } else {
+            logger.log(`While responding to '${getFriendlyURL(request.url)}', ` + `an ${error instanceof Error ? error.toString() : ''} error occurred. Using a fallback response provided by ` + `a handlerDidError plugin.`);
+          }
+        }
+        for (const callback of handler.iterateCallbacks('handlerWillRespond')) {
+          response = await callback({
+            event,
+            request,
+            response
+          });
+        }
+        return response;
+      }
+      async _awaitComplete(responseDone, handler, request, event) {
+        let response;
+        let error;
+        try {
+          response = await responseDone;
+        } catch (error) {
+          // Ignore errors, as response errors should be caught via the `response`
+          // promise above. The `done` promise will only throw for errors in
+          // promises passed to `handler.waitUntil()`.
+        }
+        try {
+          await handler.runCallbacks('handlerDidRespond', {
+            event,
+            request,
+            response
+          });
+          await handler.doneWaiting();
+        } catch (waitUntilError) {
+          if (waitUntilError instanceof Error) {
+            error = waitUntilError;
+          }
+        }
+        await handler.runCallbacks('handlerDidComplete', {
+          event,
+          request,
+          response,
+          error: error
+        });
+        handler.destroy();
+        if (error) {
+          throw error;
+        }
+      }
+    }
+    /**
+     * Classes extending the `Strategy` based class should implement this method,
+     * and leverage the {@link workbox-strategies.StrategyHandler}
+     * arg to perform all fetching and cache logic, which will ensure all relevant
+     * cache, cache options, fetch options and plugins are used (per the current
+     * strategy instance).
+     *
+     * @name _handle
+     * @instance
+     * @abstract
+     * @function
+     * @param {Request} request
+     * @param {workbox-strategies.StrategyHandler} handler
+     * @return {Promise<Response>}
+     *
+     * @memberof workbox-strategies.Strategy
+     */
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const messages = {
+      strategyStart: (strategyName, request) => `Using ${strategyName} to respond to '${getFriendlyURL(request.url)}'`,
+      printFinalResponse: response => {
+        if (response) {
+          logger.groupCollapsed(`View the final response here.`);
+          logger.log(response || '[No response returned]');
+          logger.groupEnd();
+        }
+      }
+    };
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * An implementation of a
+     * [network first](https://developer.chrome.com/docs/workbox/caching-strategies-overview/#network-first-falling-back-to-cache)
+     * request strategy.
+     *
+     * By default, this strategy will cache responses with a 200 status code as
+     * well as [opaque responses](https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#opaque-responses).
+     * Opaque responses are are cross-origin requests where the response doesn't
+     * support [CORS](https://enable-cors.org/).
+     *
+     * If the network request fails, and there is no cache match, this will throw
+     * a `WorkboxError` exception.
+     *
+     * @extends workbox-strategies.Strategy
+     * @memberof workbox-strategies
+     */
+    class NetworkFirst extends Strategy {
+      /**
+       * @param {Object} [options]
+       * @param {string} [options.cacheName] Cache name to store and retrieve
+       * requests. Defaults to cache names provided by
+       * {@link workbox-core.cacheNames}.
+       * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
+       * to use in conjunction with this caching strategy.
+       * @param {Object} [options.fetchOptions] Values passed along to the
+       * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)
+       * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)
+       * `fetch()` requests made by this strategy.
+       * @param {Object} [options.matchOptions] [`CacheQueryOptions`](https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions)
+       * @param {number} [options.networkTimeoutSeconds] If set, any network requests
+       * that fail to respond within the timeout will fallback to the cache.
+       *
+       * This option can be used to combat
+       * "[lie-fi]{@link https://developers.google.com/web/fundamentals/performance/poor-connectivity/#lie-fi}"
+       * scenarios.
+       */
+      constructor(options = {}) {
+        super(options);
+        // If this instance contains no plugins with a 'cacheWillUpdate' callback,
+        // prepend the `cacheOkAndOpaquePlugin` plugin to the plugins list.
+        if (!this.plugins.some(p => 'cacheWillUpdate' in p)) {
+          this.plugins.unshift(cacheOkAndOpaquePlugin);
+        }
+        this._networkTimeoutSeconds = options.networkTimeoutSeconds || 0;
+        {
+          if (this._networkTimeoutSeconds) {
+            finalAssertExports.isType(this._networkTimeoutSeconds, 'number', {
+              moduleName: 'workbox-strategies',
+              className: this.constructor.name,
+              funcName: 'constructor',
+              paramName: 'networkTimeoutSeconds'
+            });
+          }
+        }
+      }
+      /**
+       * @private
+       * @param {Request|string} request A request to run this strategy for.
+       * @param {workbox-strategies.StrategyHandler} handler The event that
+       *     triggered the request.
+       * @return {Promise<Response>}
+       */
+      async _handle(request, handler) {
+        const logs = [];
+        {
+          finalAssertExports.isInstance(request, Request, {
+            moduleName: 'workbox-strategies',
+            className: this.constructor.name,
+            funcName: 'handle',
+            paramName: 'makeRequest'
+          });
+        }
+        const promises = [];
+        let timeoutId;
+        if (this._networkTimeoutSeconds) {
+          const {
+            id,
+            promise
+          } = this._getTimeoutPromise({
+            request,
+            logs,
+            handler
+          });
+          timeoutId = id;
+          promises.push(promise);
+        }
+        const networkPromise = this._getNetworkPromise({
+          timeoutId,
+          request,
+          logs,
+          handler
+        });
+        promises.push(networkPromise);
+        const response = await handler.waitUntil((async () => {
+          // Promise.race() will resolve as soon as the first promise resolves.
+          return (await handler.waitUntil(Promise.race(promises))) || (
+          // If Promise.race() resolved with null, it might be due to a network
+          // timeout + a cache miss. If that were to happen, we'd rather wait until
+          // the networkPromise resolves instead of returning null.
+          // Note that it's fine to await an already-resolved promise, so we don't
+          // have to check to see if it's still "in flight".
+          await networkPromise);
+        })());
+        {
+          logger.groupCollapsed(messages.strategyStart(this.constructor.name, request));
+          for (const log of logs) {
+            logger.log(log);
+          }
+          messages.printFinalResponse(response);
+          logger.groupEnd();
+        }
+        if (!response) {
+          throw new WorkboxError('no-response', {
+            url: request.url
+          });
+        }
+        return response;
+      }
+      /**
+       * @param {Object} options
+       * @param {Request} options.request
+       * @param {Array} options.logs A reference to the logs array
+       * @param {Event} options.event
+       * @return {Promise<Response>}
+       *
+       * @private
+       */
+      _getTimeoutPromise({
+        request,
+        logs,
+        handler
+      }) {
+        let timeoutId;
+        const timeoutPromise = new Promise(resolve => {
+          const onNetworkTimeout = async () => {
+            {
+              logs.push(`Timing out the network response at ` + `${this._networkTimeoutSeconds} seconds.`);
+            }
+            resolve(await handler.cacheMatch(request));
+          };
+          timeoutId = setTimeout(onNetworkTimeout, this._networkTimeoutSeconds * 1000);
+        });
+        return {
+          promise: timeoutPromise,
+          id: timeoutId
+        };
+      }
+      /**
+       * @param {Object} options
+       * @param {number|undefined} options.timeoutId
+       * @param {Request} options.request
+       * @param {Array} options.logs A reference to the logs Array.
+       * @param {Event} options.event
+       * @return {Promise<Response>}
+       *
+       * @private
+       */
+      async _getNetworkPromise({
+        timeoutId,
+        request,
+        logs,
+        handler
+      }) {
+        let error;
+        let response;
+        try {
+          response = await handler.fetchAndCachePut(request);
+        } catch (fetchError) {
+          if (fetchError instanceof Error) {
+            error = fetchError;
+          }
+        }
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+        {
+          if (response) {
+            logs.push(`Got response from network.`);
+          } else {
+            logs.push(`Unable to get a response from the network. Will respond ` + `with a cached response.`);
+          }
+        }
+        if (error || !response) {
+          response = await handler.cacheMatch(request);
+          {
+            if (response) {
+              logs.push(`Found a cached response in the '${this.cacheName}'` + ` cache.`);
+            } else {
+              logs.push(`No response found in the '${this.cacheName}' cache.`);
+            }
+          }
+        }
+        return response;
+      }
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * An implementation of a
+     * [network-only](https://developer.chrome.com/docs/workbox/caching-strategies-overview/#network-only)
+     * request strategy.
+     *
+     * This class is useful if you want to take advantage of any
+     * [Workbox plugins](https://developer.chrome.com/docs/workbox/using-plugins/).
+     *
+     * If the network request fails, this will throw a `WorkboxError` exception.
+     *
+     * @extends workbox-strategies.Strategy
+     * @memberof workbox-strategies
+     */
+    class NetworkOnly extends Strategy {
+      /**
+       * @param {Object} [options]
+       * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
+       * to use in conjunction with this caching strategy.
+       * @param {Object} [options.fetchOptions] Values passed along to the
+       * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)
+       * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)
+       * `fetch()` requests made by this strategy.
+       * @param {number} [options.networkTimeoutSeconds] If set, any network requests
+       * that fail to respond within the timeout will result in a network error.
+       */
+      constructor(options = {}) {
+        super(options);
+        this._networkTimeoutSeconds = options.networkTimeoutSeconds || 0;
+      }
+      /**
+       * @private
+       * @param {Request|string} request A request to run this strategy for.
+       * @param {workbox-strategies.StrategyHandler} handler The event that
+       *     triggered the request.
+       * @return {Promise<Response>}
+       */
+      async _handle(request, handler) {
+        {
+          finalAssertExports.isInstance(request, Request, {
+            moduleName: 'workbox-strategies',
+            className: this.constructor.name,
+            funcName: '_handle',
+            paramName: 'request'
+          });
+        }
+        let error = undefined;
+        let response;
+        try {
+          const promises = [handler.fetch(request)];
+          if (this._networkTimeoutSeconds) {
+            const timeoutPromise = timeout(this._networkTimeoutSeconds * 1000);
+            promises.push(timeoutPromise);
+          }
+          response = await Promise.race(promises);
+          if (!response) {
+            throw new Error(`Timed out the network response after ` + `${this._networkTimeoutSeconds} seconds.`);
+          }
+        } catch (err) {
+          if (err instanceof Error) {
+            error = err;
+          }
+        }
+        {
+          logger.groupCollapsed(messages.strategyStart(this.constructor.name, request));
+          if (response) {
+            logger.log(`Got response from network.`);
+          } else {
+            logger.log(`Unable to get a response from the network.`);
+          }
+          messages.printFinalResponse(response);
+          logger.groupEnd();
+        }
+        if (!response) {
+          throw new WorkboxError('no-response', {
+            url: request.url,
+            error
+          });
+        }
+        return response;
+      }
+    }
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Claim any currently available clients once the service worker
+     * becomes active. This is normally used in conjunction with `skipWaiting()`.
+     *
+     * @memberof workbox-core
+     */
+    function clientsClaim() {
+      self.addEventListener('activate', () => self.clients.claim());
+    }
+
+    exports.NetworkFirst = NetworkFirst;
+    exports.NetworkOnly = NetworkOnly;
+    exports.clientsClaim = clientsClaim;
+    exports.registerRoute = registerRoute;
+
+}));
+//# sourceMappingURL=workbox-7805bd61.js.map
diff --git a/app/public/workbox-7805bd61.js.map b/app/public/workbox-7805bd61.js.map
new file mode 100644
index 000000000..783daedfc
--- /dev/null
+++ b/app/public/workbox-7805bd61.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"workbox-7805bd61.js","sources":["../../node_modules/workbox-core/_version.js","../../node_modules/workbox-core/_private/logger.js","../../node_modules/workbox-core/models/messages/messages.js","../../node_modules/workbox-core/models/messages/messageGenerator.js","../../node_modules/workbox-core/_private/WorkboxError.js","../../node_modules/workbox-core/_private/assert.js","../../node_modules/workbox-routing/_version.js","../../node_modules/workbox-routing/utils/constants.js","../../node_modules/workbox-routing/utils/normalizeHandler.js","../../node_modules/workbox-routing/Route.js","../../node_modules/workbox-routing/RegExpRoute.js","../../node_modules/workbox-core/_private/getFriendlyURL.js","../../node_modules/workbox-routing/Router.js","../../node_modules/workbox-routing/utils/getOrCreateDefaultRouter.js","../../node_modules/workbox-routing/registerRoute.js","../../node_modules/workbox-strategies/_version.js","../../node_modules/workbox-strategies/plugins/cacheOkAndOpaquePlugin.js","../../node_modules/workbox-core/_private/cacheNames.js","../../node_modules/workbox-core/_private/cacheMatchIgnoreParams.js","../../node_modules/workbox-core/_private/Deferred.js","../../node_modules/workbox-core/models/quotaErrorCallbacks.js","../../node_modules/workbox-core/_private/executeQuotaErrorCallbacks.js","../../node_modules/workbox-core/_private/timeout.js","../../node_modules/workbox-strategies/StrategyHandler.js","../../node_modules/workbox-strategies/Strategy.js","../../node_modules/workbox-strategies/utils/messages.js","../../node_modules/workbox-strategies/NetworkFirst.js","../../node_modules/workbox-strategies/NetworkOnly.js","../../node_modules/workbox-core/clientsClaim.js"],"sourcesContent":["\"use strict\";\n// @ts-ignore\ntry {\n    self['workbox:core:6.5.3'] && _();\n}\ncatch (e) { }\n","/*\n  Copyright 2019 Google LLC\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../_version.js';\nconst logger = (process.env.NODE_ENV === 'production'\n    ? null\n    : (() => {\n        // Don't overwrite this value if it's already set.\n        // See https://github.com/GoogleChrome/workbox/pull/2284#issuecomment-560470923\n        if (!('__WB_DISABLE_DEV_LOGS' in self)) {\n            self.__WB_DISABLE_DEV_LOGS = false;\n        }\n        let inGroup = false;\n        const methodToColorMap = {\n            debug: `#7f8c8d`,\n            log: `#2ecc71`,\n            warn: `#f39c12`,\n            error: `#c0392b`,\n            groupCollapsed: `#3498db`,\n            groupEnd: null, // No colored prefix on groupEnd\n        };\n        const print = function (method, args) {\n            if (self.__WB_DISABLE_DEV_LOGS) {\n                return;\n            }\n            if (method === 'groupCollapsed') {\n                // Safari doesn't print all console.groupCollapsed() arguments:\n                // https://bugs.webkit.org/show_bug.cgi?id=182754\n                if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {\n                    console[method](...args);\n                    return;\n                }\n            }\n            const styles = [\n                `background: ${methodToColorMap[method]}`,\n                `border-radius: 0.5em`,\n                `color: white`,\n                `font-weight: bold`,\n                `padding: 2px 0.5em`,\n            ];\n            // When in a group, the workbox prefix is not displayed.\n            const logPrefix = inGroup ? [] : ['%cworkbox', styles.join(';')];\n            console[method](...logPrefix, ...args);\n            if (method === 'groupCollapsed') {\n                inGroup = true;\n            }\n            if (method === 'groupEnd') {\n                inGroup = false;\n            }\n        };\n        // eslint-disable-next-line @typescript-eslint/ban-types\n        const api = {};\n        const loggerMethods = Object.keys(methodToColorMap);\n        for (const key of loggerMethods) {\n            const method = key;\n            api[method] = (...args) => {\n                print(method, args);\n            };\n        }\n        return api;\n    })());\nexport { logger };\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../../_version.js';\nexport const messages = {\n    'invalid-value': ({ paramName, validValueDescription, value }) => {\n        if (!paramName || !validValueDescription) {\n            throw new Error(`Unexpected input to 'invalid-value' error.`);\n        }\n        return (`The '${paramName}' parameter was given a value with an ` +\n            `unexpected value. ${validValueDescription} Received a value of ` +\n            `${JSON.stringify(value)}.`);\n    },\n    'not-an-array': ({ moduleName, className, funcName, paramName }) => {\n        if (!moduleName || !className || !funcName || !paramName) {\n            throw new Error(`Unexpected input to 'not-an-array' error.`);\n        }\n        return (`The parameter '${paramName}' passed into ` +\n            `'${moduleName}.${className}.${funcName}()' must be an array.`);\n    },\n    'incorrect-type': ({ expectedType, paramName, moduleName, className, funcName, }) => {\n        if (!expectedType || !paramName || !moduleName || !funcName) {\n            throw new Error(`Unexpected input to 'incorrect-type' error.`);\n        }\n        const classNameStr = className ? `${className}.` : '';\n        return (`The parameter '${paramName}' passed into ` +\n            `'${moduleName}.${classNameStr}` +\n            `${funcName}()' must be of type ${expectedType}.`);\n    },\n    'incorrect-class': ({ expectedClassName, paramName, moduleName, className, funcName, isReturnValueProblem, }) => {\n        if (!expectedClassName || !moduleName || !funcName) {\n            throw new Error(`Unexpected input to 'incorrect-class' error.`);\n        }\n        const classNameStr = className ? `${className}.` : '';\n        if (isReturnValueProblem) {\n            return (`The return value from ` +\n                `'${moduleName}.${classNameStr}${funcName}()' ` +\n                `must be an instance of class ${expectedClassName}.`);\n        }\n        return (`The parameter '${paramName}' passed into ` +\n            `'${moduleName}.${classNameStr}${funcName}()' ` +\n            `must be an instance of class ${expectedClassName}.`);\n    },\n    'missing-a-method': ({ expectedMethod, paramName, moduleName, className, funcName, }) => {\n        if (!expectedMethod ||\n            !paramName ||\n            !moduleName ||\n            !className ||\n            !funcName) {\n            throw new Error(`Unexpected input to 'missing-a-method' error.`);\n        }\n        return (`${moduleName}.${className}.${funcName}() expected the ` +\n            `'${paramName}' parameter to expose a '${expectedMethod}' method.`);\n    },\n    'add-to-cache-list-unexpected-type': ({ entry }) => {\n        return (`An unexpected entry was passed to ` +\n            `'workbox-precaching.PrecacheController.addToCacheList()' The entry ` +\n            `'${JSON.stringify(entry)}' isn't supported. You must supply an array of ` +\n            `strings with one or more characters, objects with a url property or ` +\n            `Request objects.`);\n    },\n    'add-to-cache-list-conflicting-entries': ({ firstEntry, secondEntry }) => {\n        if (!firstEntry || !secondEntry) {\n            throw new Error(`Unexpected input to ` + `'add-to-cache-list-duplicate-entries' error.`);\n        }\n        return (`Two of the entries passed to ` +\n            `'workbox-precaching.PrecacheController.addToCacheList()' had the URL ` +\n            `${firstEntry} but different revision details. Workbox is ` +\n            `unable to cache and version the asset correctly. Please remove one ` +\n            `of the entries.`);\n    },\n    'plugin-error-request-will-fetch': ({ thrownErrorMessage }) => {\n        if (!thrownErrorMessage) {\n            throw new Error(`Unexpected input to ` + `'plugin-error-request-will-fetch', error.`);\n        }\n        return (`An error was thrown by a plugins 'requestWillFetch()' method. ` +\n            `The thrown error message was: '${thrownErrorMessage}'.`);\n    },\n    'invalid-cache-name': ({ cacheNameId, value }) => {\n        if (!cacheNameId) {\n            throw new Error(`Expected a 'cacheNameId' for error 'invalid-cache-name'`);\n        }\n        return (`You must provide a name containing at least one character for ` +\n            `setCacheDetails({${cacheNameId}: '...'}). Received a value of ` +\n            `'${JSON.stringify(value)}'`);\n    },\n    'unregister-route-but-not-found-with-method': ({ method }) => {\n        if (!method) {\n            throw new Error(`Unexpected input to ` +\n                `'unregister-route-but-not-found-with-method' error.`);\n        }\n        return (`The route you're trying to unregister was not  previously ` +\n            `registered for the method type '${method}'.`);\n    },\n    'unregister-route-route-not-registered': () => {\n        return (`The route you're trying to unregister was not previously ` +\n            `registered.`);\n    },\n    'queue-replay-failed': ({ name }) => {\n        return `Replaying the background sync queue '${name}' failed.`;\n    },\n    'duplicate-queue-name': ({ name }) => {\n        return (`The Queue name '${name}' is already being used. ` +\n            `All instances of backgroundSync.Queue must be given unique names.`);\n    },\n    'expired-test-without-max-age': ({ methodName, paramName }) => {\n        return (`The '${methodName}()' method can only be used when the ` +\n            `'${paramName}' is used in the constructor.`);\n    },\n    'unsupported-route-type': ({ moduleName, className, funcName, paramName }) => {\n        return (`The supplied '${paramName}' parameter was an unsupported type. ` +\n            `Please check the docs for ${moduleName}.${className}.${funcName} for ` +\n            `valid input types.`);\n    },\n    'not-array-of-class': ({ value, expectedClass, moduleName, className, funcName, paramName, }) => {\n        return (`The supplied '${paramName}' parameter must be an array of ` +\n            `'${expectedClass}' objects. Received '${JSON.stringify(value)},'. ` +\n            `Please check the call to ${moduleName}.${className}.${funcName}() ` +\n            `to fix the issue.`);\n    },\n    'max-entries-or-age-required': ({ moduleName, className, funcName }) => {\n        return (`You must define either config.maxEntries or config.maxAgeSeconds` +\n            `in ${moduleName}.${className}.${funcName}`);\n    },\n    'statuses-or-headers-required': ({ moduleName, className, funcName }) => {\n        return (`You must define either config.statuses or config.headers` +\n            `in ${moduleName}.${className}.${funcName}`);\n    },\n    'invalid-string': ({ moduleName, funcName, paramName }) => {\n        if (!paramName || !moduleName || !funcName) {\n            throw new Error(`Unexpected input to 'invalid-string' error.`);\n        }\n        return (`When using strings, the '${paramName}' parameter must start with ` +\n            `'http' (for cross-origin matches) or '/' (for same-origin matches). ` +\n            `Please see the docs for ${moduleName}.${funcName}() for ` +\n            `more info.`);\n    },\n    'channel-name-required': () => {\n        return (`You must provide a channelName to construct a ` +\n            `BroadcastCacheUpdate instance.`);\n    },\n    'invalid-responses-are-same-args': () => {\n        return (`The arguments passed into responsesAreSame() appear to be ` +\n            `invalid. Please ensure valid Responses are used.`);\n    },\n    'expire-custom-caches-only': () => {\n        return (`You must provide a 'cacheName' property when using the ` +\n            `expiration plugin with a runtime caching strategy.`);\n    },\n    'unit-must-be-bytes': ({ normalizedRangeHeader }) => {\n        if (!normalizedRangeHeader) {\n            throw new Error(`Unexpected input to 'unit-must-be-bytes' error.`);\n        }\n        return (`The 'unit' portion of the Range header must be set to 'bytes'. ` +\n            `The Range header provided was \"${normalizedRangeHeader}\"`);\n    },\n    'single-range-only': ({ normalizedRangeHeader }) => {\n        if (!normalizedRangeHeader) {\n            throw new Error(`Unexpected input to 'single-range-only' error.`);\n        }\n        return (`Multiple ranges are not supported. Please use a  single start ` +\n            `value, and optional end value. The Range header provided was ` +\n            `\"${normalizedRangeHeader}\"`);\n    },\n    'invalid-range-values': ({ normalizedRangeHeader }) => {\n        if (!normalizedRangeHeader) {\n            throw new Error(`Unexpected input to 'invalid-range-values' error.`);\n        }\n        return (`The Range header is missing both start and end values. At least ` +\n            `one of those values is needed. The Range header provided was ` +\n            `\"${normalizedRangeHeader}\"`);\n    },\n    'no-range-header': () => {\n        return `No Range header was found in the Request provided.`;\n    },\n    'range-not-satisfiable': ({ size, start, end }) => {\n        return (`The start (${start}) and end (${end}) values in the Range are ` +\n            `not satisfiable by the cached response, which is ${size} bytes.`);\n    },\n    'attempt-to-cache-non-get-request': ({ url, method }) => {\n        return (`Unable to cache '${url}' because it is a '${method}' request and ` +\n            `only 'GET' requests can be cached.`);\n    },\n    'cache-put-with-no-response': ({ url }) => {\n        return (`There was an attempt to cache '${url}' but the response was not ` +\n            `defined.`);\n    },\n    'no-response': ({ url, error }) => {\n        let message = `The strategy could not generate a response for '${url}'.`;\n        if (error) {\n            message += ` The underlying error is ${error}.`;\n        }\n        return message;\n    },\n    'bad-precaching-response': ({ url, status }) => {\n        return (`The precaching request for '${url}' failed` +\n            (status ? ` with an HTTP status of ${status}.` : `.`));\n    },\n    'non-precached-url': ({ url }) => {\n        return (`createHandlerBoundToURL('${url}') was called, but that URL is ` +\n            `not precached. Please pass in a URL that is precached instead.`);\n    },\n    'add-to-cache-list-conflicting-integrities': ({ url }) => {\n        return (`Two of the entries passed to ` +\n            `'workbox-precaching.PrecacheController.addToCacheList()' had the URL ` +\n            `${url} with different integrity values. Please remove one of them.`);\n    },\n    'missing-precache-entry': ({ cacheName, url }) => {\n        return `Unable to find a precached response in ${cacheName} for ${url}.`;\n    },\n    'cross-origin-copy-response': ({ origin }) => {\n        return (`workbox-core.copyResponse() can only be used with same-origin ` +\n            `responses. It was passed a response with origin ${origin}.`);\n    },\n    'opaque-streams-source': ({ type }) => {\n        const message = `One of the workbox-streams sources resulted in an ` +\n            `'${type}' response.`;\n        if (type === 'opaqueredirect') {\n            return (`${message} Please do not use a navigation request that results ` +\n                `in a redirect as a source.`);\n        }\n        return `${message} Please ensure your sources are CORS-enabled.`;\n    },\n};\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { messages } from './messages.js';\nimport '../../_version.js';\nconst fallback = (code, ...args) => {\n    let msg = code;\n    if (args.length > 0) {\n        msg += ` :: ${JSON.stringify(args)}`;\n    }\n    return msg;\n};\nconst generatorFunction = (code, details = {}) => {\n    const message = messages[code];\n    if (!message) {\n        throw new Error(`Unable to find message for code '${code}'.`);\n    }\n    return message(details);\n};\nexport const messageGenerator = process.env.NODE_ENV === 'production' ? fallback : generatorFunction;\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { messageGenerator } from '../models/messages/messageGenerator.js';\nimport '../_version.js';\n/**\n * Workbox errors should be thrown with this class.\n * This allows use to ensure the type easily in tests,\n * helps developers identify errors from workbox\n * easily and allows use to optimise error\n * messages correctly.\n *\n * @private\n */\nclass WorkboxError extends Error {\n    /**\n     *\n     * @param {string} errorCode The error code that\n     * identifies this particular error.\n     * @param {Object=} details Any relevant arguments\n     * that will help developers identify issues should\n     * be added as a key on the context object.\n     */\n    constructor(errorCode, details) {\n        const message = messageGenerator(errorCode, details);\n        super(message);\n        this.name = errorCode;\n        this.details = details;\n    }\n}\nexport { WorkboxError };\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { WorkboxError } from '../_private/WorkboxError.js';\nimport '../_version.js';\n/*\n * This method throws if the supplied value is not an array.\n * The destructed values are required to produce a meaningful error for users.\n * The destructed and restructured object is so it's clear what is\n * needed.\n */\nconst isArray = (value, details) => {\n    if (!Array.isArray(value)) {\n        throw new WorkboxError('not-an-array', details);\n    }\n};\nconst hasMethod = (object, expectedMethod, details) => {\n    const type = typeof object[expectedMethod];\n    if (type !== 'function') {\n        details['expectedMethod'] = expectedMethod;\n        throw new WorkboxError('missing-a-method', details);\n    }\n};\nconst isType = (object, expectedType, details) => {\n    if (typeof object !== expectedType) {\n        details['expectedType'] = expectedType;\n        throw new WorkboxError('incorrect-type', details);\n    }\n};\nconst isInstance = (object, \n// Need the general type to do the check later.\n// eslint-disable-next-line @typescript-eslint/ban-types\nexpectedClass, details) => {\n    if (!(object instanceof expectedClass)) {\n        details['expectedClassName'] = expectedClass.name;\n        throw new WorkboxError('incorrect-class', details);\n    }\n};\nconst isOneOf = (value, validValues, details) => {\n    if (!validValues.includes(value)) {\n        details['validValueDescription'] = `Valid values are ${JSON.stringify(validValues)}.`;\n        throw new WorkboxError('invalid-value', details);\n    }\n};\nconst isArrayOfClass = (value, \n// Need general type to do check later.\nexpectedClass, // eslint-disable-line\ndetails) => {\n    const error = new WorkboxError('not-array-of-class', details);\n    if (!Array.isArray(value)) {\n        throw error;\n    }\n    for (const item of value) {\n        if (!(item instanceof expectedClass)) {\n            throw error;\n        }\n    }\n};\nconst finalAssertExports = process.env.NODE_ENV === 'production'\n    ? null\n    : {\n        hasMethod,\n        isArray,\n        isInstance,\n        isOneOf,\n        isType,\n        isArrayOfClass,\n    };\nexport { finalAssertExports as assert };\n","\"use strict\";\n// @ts-ignore\ntry {\n    self['workbox:routing:6.5.3'] && _();\n}\ncatch (e) { }\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../_version.js';\n/**\n * The default HTTP method, 'GET', used when there's no specific method\n * configured for a route.\n *\n * @type {string}\n *\n * @private\n */\nexport const defaultMethod = 'GET';\n/**\n * The list of valid HTTP methods associated with requests that could be routed.\n *\n * @type {Array<string>}\n *\n * @private\n */\nexport const validMethods = [\n    'DELETE',\n    'GET',\n    'HEAD',\n    'PATCH',\n    'POST',\n    'PUT',\n];\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { assert } from 'workbox-core/_private/assert.js';\nimport '../_version.js';\n/**\n * @param {function()|Object} handler Either a function, or an object with a\n * 'handle' method.\n * @return {Object} An object with a handle method.\n *\n * @private\n */\nexport const normalizeHandler = (handler) => {\n    if (handler && typeof handler === 'object') {\n        if (process.env.NODE_ENV !== 'production') {\n            assert.hasMethod(handler, 'handle', {\n                moduleName: 'workbox-routing',\n                className: 'Route',\n                funcName: 'constructor',\n                paramName: 'handler',\n            });\n        }\n        return handler;\n    }\n    else {\n        if (process.env.NODE_ENV !== 'production') {\n            assert.isType(handler, 'function', {\n                moduleName: 'workbox-routing',\n                className: 'Route',\n                funcName: 'constructor',\n                paramName: 'handler',\n            });\n        }\n        return { handle: handler };\n    }\n};\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { assert } from 'workbox-core/_private/assert.js';\nimport { defaultMethod, validMethods } from './utils/constants.js';\nimport { normalizeHandler } from './utils/normalizeHandler.js';\nimport './_version.js';\n/**\n * A `Route` consists of a pair of callback functions, \"match\" and \"handler\".\n * The \"match\" callback determine if a route should be used to \"handle\" a\n * request by returning a non-falsy value if it can. The \"handler\" callback\n * is called when there is a match and should return a Promise that resolves\n * to a `Response`.\n *\n * @memberof workbox-routing\n */\nclass Route {\n    /**\n     * Constructor for Route class.\n     *\n     * @param {workbox-routing~matchCallback} match\n     * A callback function that determines whether the route matches a given\n     * `fetch` event by returning a non-falsy value.\n     * @param {workbox-routing~handlerCallback} handler A callback\n     * function that returns a Promise resolving to a Response.\n     * @param {string} [method='GET'] The HTTP method to match the Route\n     * against.\n     */\n    constructor(match, handler, method = defaultMethod) {\n        if (process.env.NODE_ENV !== 'production') {\n            assert.isType(match, 'function', {\n                moduleName: 'workbox-routing',\n                className: 'Route',\n                funcName: 'constructor',\n                paramName: 'match',\n            });\n            if (method) {\n                assert.isOneOf(method, validMethods, { paramName: 'method' });\n            }\n        }\n        // These values are referenced directly by Router so cannot be\n        // altered by minificaton.\n        this.handler = normalizeHandler(handler);\n        this.match = match;\n        this.method = method;\n    }\n    /**\n     *\n     * @param {workbox-routing-handlerCallback} handler A callback\n     * function that returns a Promise resolving to a Response\n     */\n    setCatchHandler(handler) {\n        this.catchHandler = normalizeHandler(handler);\n    }\n}\nexport { Route };\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { assert } from 'workbox-core/_private/assert.js';\nimport { logger } from 'workbox-core/_private/logger.js';\nimport { Route } from './Route.js';\nimport './_version.js';\n/**\n * RegExpRoute makes it easy to create a regular expression based\n * {@link workbox-routing.Route}.\n *\n * For same-origin requests the RegExp only needs to match part of the URL. For\n * requests against third-party servers, you must define a RegExp that matches\n * the start of the URL.\n *\n * @memberof workbox-routing\n * @extends workbox-routing.Route\n */\nclass RegExpRoute extends Route {\n    /**\n     * If the regular expression contains\n     * [capture groups]{@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#grouping-back-references},\n     * the captured values will be passed to the\n     * {@link workbox-routing~handlerCallback} `params`\n     * argument.\n     *\n     * @param {RegExp} regExp The regular expression to match against URLs.\n     * @param {workbox-routing~handlerCallback} handler A callback\n     * function that returns a Promise resulting in a Response.\n     * @param {string} [method='GET'] The HTTP method to match the Route\n     * against.\n     */\n    constructor(regExp, handler, method) {\n        if (process.env.NODE_ENV !== 'production') {\n            assert.isInstance(regExp, RegExp, {\n                moduleName: 'workbox-routing',\n                className: 'RegExpRoute',\n                funcName: 'constructor',\n                paramName: 'pattern',\n            });\n        }\n        const match = ({ url }) => {\n            const result = regExp.exec(url.href);\n            // Return immediately if there's no match.\n            if (!result) {\n                return;\n            }\n            // Require that the match start at the first character in the URL string\n            // if it's a cross-origin request.\n            // See https://github.com/GoogleChrome/workbox/issues/281 for the context\n            // behind this behavior.\n            if (url.origin !== location.origin && result.index !== 0) {\n                if (process.env.NODE_ENV !== 'production') {\n                    logger.debug(`The regular expression '${regExp.toString()}' only partially matched ` +\n                        `against the cross-origin URL '${url.toString()}'. RegExpRoute's will only ` +\n                        `handle cross-origin requests if they match the entire URL.`);\n                }\n                return;\n            }\n            // If the route matches, but there aren't any capture groups defined, then\n            // this will return [], which is truthy and therefore sufficient to\n            // indicate a match.\n            // If there are capture groups, then it will return their values.\n            return result.slice(1);\n        };\n        super(match, handler, method);\n    }\n}\nexport { RegExpRoute };\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../_version.js';\nconst getFriendlyURL = (url) => {\n    const urlObj = new URL(String(url), location.href);\n    // See https://github.com/GoogleChrome/workbox/issues/2323\n    // We want to include everything, except for the origin if it's same-origin.\n    return urlObj.href.replace(new RegExp(`^${location.origin}`), '');\n};\nexport { getFriendlyURL };\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { assert } from 'workbox-core/_private/assert.js';\nimport { getFriendlyURL } from 'workbox-core/_private/getFriendlyURL.js';\nimport { defaultMethod } from './utils/constants.js';\nimport { logger } from 'workbox-core/_private/logger.js';\nimport { normalizeHandler } from './utils/normalizeHandler.js';\nimport { WorkboxError } from 'workbox-core/_private/WorkboxError.js';\nimport './_version.js';\n/**\n * The Router can be used to process a `FetchEvent` using one or more\n * {@link workbox-routing.Route}, responding with a `Response` if\n * a matching route exists.\n *\n * If no route matches a given a request, the Router will use a \"default\"\n * handler if one is defined.\n *\n * Should the matching Route throw an error, the Router will use a \"catch\"\n * handler if one is defined to gracefully deal with issues and respond with a\n * Request.\n *\n * If a request matches multiple routes, the **earliest** registered route will\n * be used to respond to the request.\n *\n * @memberof workbox-routing\n */\nclass Router {\n    /**\n     * Initializes a new Router.\n     */\n    constructor() {\n        this._routes = new Map();\n        this._defaultHandlerMap = new Map();\n    }\n    /**\n     * @return {Map<string, Array<workbox-routing.Route>>} routes A `Map` of HTTP\n     * method name ('GET', etc.) to an array of all the corresponding `Route`\n     * instances that are registered.\n     */\n    get routes() {\n        return this._routes;\n    }\n    /**\n     * Adds a fetch event listener to respond to events when a route matches\n     * the event's request.\n     */\n    addFetchListener() {\n        // See https://github.com/Microsoft/TypeScript/issues/28357#issuecomment-436484705\n        self.addEventListener('fetch', ((event) => {\n            const { request } = event;\n            const responsePromise = this.handleRequest({ request, event });\n            if (responsePromise) {\n                event.respondWith(responsePromise);\n            }\n        }));\n    }\n    /**\n     * Adds a message event listener for URLs to cache from the window.\n     * This is useful to cache resources loaded on the page prior to when the\n     * service worker started controlling it.\n     *\n     * The format of the message data sent from the window should be as follows.\n     * Where the `urlsToCache` array may consist of URL strings or an array of\n     * URL string + `requestInit` object (the same as you'd pass to `fetch()`).\n     *\n     * ```\n     * {\n     *   type: 'CACHE_URLS',\n     *   payload: {\n     *     urlsToCache: [\n     *       './script1.js',\n     *       './script2.js',\n     *       ['./script3.js', {mode: 'no-cors'}],\n     *     ],\n     *   },\n     * }\n     * ```\n     */\n    addCacheListener() {\n        // See https://github.com/Microsoft/TypeScript/issues/28357#issuecomment-436484705\n        self.addEventListener('message', ((event) => {\n            // event.data is type 'any'\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n            if (event.data && event.data.type === 'CACHE_URLS') {\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                const { payload } = event.data;\n                if (process.env.NODE_ENV !== 'production') {\n                    logger.debug(`Caching URLs from the window`, payload.urlsToCache);\n                }\n                const requestPromises = Promise.all(payload.urlsToCache.map((entry) => {\n                    if (typeof entry === 'string') {\n                        entry = [entry];\n                    }\n                    const request = new Request(...entry);\n                    return this.handleRequest({ request, event });\n                    // TODO(philipwalton): TypeScript errors without this typecast for\n                    // some reason (probably a bug). The real type here should work but\n                    // doesn't: `Array<Promise<Response> | undefined>`.\n                })); // TypeScript\n                event.waitUntil(requestPromises);\n                // If a MessageChannel was used, reply to the message on success.\n                if (event.ports && event.ports[0]) {\n                    void requestPromises.then(() => event.ports[0].postMessage(true));\n                }\n            }\n        }));\n    }\n    /**\n     * Apply the routing rules to a FetchEvent object to get a Response from an\n     * appropriate Route's handler.\n     *\n     * @param {Object} options\n     * @param {Request} options.request The request to handle.\n     * @param {ExtendableEvent} options.event The event that triggered the\n     *     request.\n     * @return {Promise<Response>|undefined} A promise is returned if a\n     *     registered route can handle the request. If there is no matching\n     *     route and there's no `defaultHandler`, `undefined` is returned.\n     */\n    handleRequest({ request, event, }) {\n        if (process.env.NODE_ENV !== 'production') {\n            assert.isInstance(request, Request, {\n                moduleName: 'workbox-routing',\n                className: 'Router',\n                funcName: 'handleRequest',\n                paramName: 'options.request',\n            });\n        }\n        const url = new URL(request.url, location.href);\n        if (!url.protocol.startsWith('http')) {\n            if (process.env.NODE_ENV !== 'production') {\n                logger.debug(`Workbox Router only supports URLs that start with 'http'.`);\n            }\n            return;\n        }\n        const sameOrigin = url.origin === location.origin;\n        const { params, route } = this.findMatchingRoute({\n            event,\n            request,\n            sameOrigin,\n            url,\n        });\n        let handler = route && route.handler;\n        const debugMessages = [];\n        if (process.env.NODE_ENV !== 'production') {\n            if (handler) {\n                debugMessages.push([`Found a route to handle this request:`, route]);\n                if (params) {\n                    debugMessages.push([\n                        `Passing the following params to the route's handler:`,\n                        params,\n                    ]);\n                }\n            }\n        }\n        // If we don't have a handler because there was no matching route, then\n        // fall back to defaultHandler if that's defined.\n        const method = request.method;\n        if (!handler && this._defaultHandlerMap.has(method)) {\n            if (process.env.NODE_ENV !== 'production') {\n                debugMessages.push(`Failed to find a matching route. Falling ` +\n                    `back to the default handler for ${method}.`);\n            }\n            handler = this._defaultHandlerMap.get(method);\n        }\n        if (!handler) {\n            if (process.env.NODE_ENV !== 'production') {\n                // No handler so Workbox will do nothing. If logs is set of debug\n                // i.e. verbose, we should print out this information.\n                logger.debug(`No route found for: ${getFriendlyURL(url)}`);\n            }\n            return;\n        }\n        if (process.env.NODE_ENV !== 'production') {\n            // We have a handler, meaning Workbox is going to handle the route.\n            // print the routing details to the console.\n            logger.groupCollapsed(`Router is responding to: ${getFriendlyURL(url)}`);\n            debugMessages.forEach((msg) => {\n                if (Array.isArray(msg)) {\n                    logger.log(...msg);\n                }\n                else {\n                    logger.log(msg);\n                }\n            });\n            logger.groupEnd();\n        }\n        // Wrap in try and catch in case the handle method throws a synchronous\n        // error. It should still callback to the catch handler.\n        let responsePromise;\n        try {\n            responsePromise = handler.handle({ url, request, event, params });\n        }\n        catch (err) {\n            responsePromise = Promise.reject(err);\n        }\n        // Get route's catch handler, if it exists\n        const catchHandler = route && route.catchHandler;\n        if (responsePromise instanceof Promise &&\n            (this._catchHandler || catchHandler)) {\n            responsePromise = responsePromise.catch(async (err) => {\n                // If there's a route catch handler, process that first\n                if (catchHandler) {\n                    if (process.env.NODE_ENV !== 'production') {\n                        // Still include URL here as it will be async from the console group\n                        // and may not make sense without the URL\n                        logger.groupCollapsed(`Error thrown when responding to: ` +\n                            ` ${getFriendlyURL(url)}. Falling back to route's Catch Handler.`);\n                        logger.error(`Error thrown by:`, route);\n                        logger.error(err);\n                        logger.groupEnd();\n                    }\n                    try {\n                        return await catchHandler.handle({ url, request, event, params });\n                    }\n                    catch (catchErr) {\n                        if (catchErr instanceof Error) {\n                            err = catchErr;\n                        }\n                    }\n                }\n                if (this._catchHandler) {\n                    if (process.env.NODE_ENV !== 'production') {\n                        // Still include URL here as it will be async from the console group\n                        // and may not make sense without the URL\n                        logger.groupCollapsed(`Error thrown when responding to: ` +\n                            ` ${getFriendlyURL(url)}. Falling back to global Catch Handler.`);\n                        logger.error(`Error thrown by:`, route);\n                        logger.error(err);\n                        logger.groupEnd();\n                    }\n                    return this._catchHandler.handle({ url, request, event });\n                }\n                throw err;\n            });\n        }\n        return responsePromise;\n    }\n    /**\n     * Checks a request and URL (and optionally an event) against the list of\n     * registered routes, and if there's a match, returns the corresponding\n     * route along with any params generated by the match.\n     *\n     * @param {Object} options\n     * @param {URL} options.url\n     * @param {boolean} options.sameOrigin The result of comparing `url.origin`\n     *     against the current origin.\n     * @param {Request} options.request The request to match.\n     * @param {Event} options.event The corresponding event.\n     * @return {Object} An object with `route` and `params` properties.\n     *     They are populated if a matching route was found or `undefined`\n     *     otherwise.\n     */\n    findMatchingRoute({ url, sameOrigin, request, event, }) {\n        const routes = this._routes.get(request.method) || [];\n        for (const route of routes) {\n            let params;\n            // route.match returns type any, not possible to change right now.\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n            const matchResult = route.match({ url, sameOrigin, request, event });\n            if (matchResult) {\n                if (process.env.NODE_ENV !== 'production') {\n                    // Warn developers that using an async matchCallback is almost always\n                    // not the right thing to do.\n                    if (matchResult instanceof Promise) {\n                        logger.warn(`While routing ${getFriendlyURL(url)}, an async ` +\n                            `matchCallback function was used. Please convert the ` +\n                            `following route to use a synchronous matchCallback function:`, route);\n                    }\n                }\n                // See https://github.com/GoogleChrome/workbox/issues/2079\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                params = matchResult;\n                if (Array.isArray(params) && params.length === 0) {\n                    // Instead of passing an empty array in as params, use undefined.\n                    params = undefined;\n                }\n                else if (matchResult.constructor === Object && // eslint-disable-line\n                    Object.keys(matchResult).length === 0) {\n                    // Instead of passing an empty object in as params, use undefined.\n                    params = undefined;\n                }\n                else if (typeof matchResult === 'boolean') {\n                    // For the boolean value true (rather than just something truth-y),\n                    // don't set params.\n                    // See https://github.com/GoogleChrome/workbox/pull/2134#issuecomment-513924353\n                    params = undefined;\n                }\n                // Return early if have a match.\n                return { route, params };\n            }\n        }\n        // If no match was found above, return and empty object.\n        return {};\n    }\n    /**\n     * Define a default `handler` that's called when no routes explicitly\n     * match the incoming request.\n     *\n     * Each HTTP method ('GET', 'POST', etc.) gets its own default handler.\n     *\n     * Without a default handler, unmatched requests will go against the\n     * network as if there were no service worker present.\n     *\n     * @param {workbox-routing~handlerCallback} handler A callback\n     * function that returns a Promise resulting in a Response.\n     * @param {string} [method='GET'] The HTTP method to associate with this\n     * default handler. Each method has its own default.\n     */\n    setDefaultHandler(handler, method = defaultMethod) {\n        this._defaultHandlerMap.set(method, normalizeHandler(handler));\n    }\n    /**\n     * If a Route throws an error while handling a request, this `handler`\n     * will be called and given a chance to provide a response.\n     *\n     * @param {workbox-routing~handlerCallback} handler A callback\n     * function that returns a Promise resulting in a Response.\n     */\n    setCatchHandler(handler) {\n        this._catchHandler = normalizeHandler(handler);\n    }\n    /**\n     * Registers a route with the router.\n     *\n     * @param {workbox-routing.Route} route The route to register.\n     */\n    registerRoute(route) {\n        if (process.env.NODE_ENV !== 'production') {\n            assert.isType(route, 'object', {\n                moduleName: 'workbox-routing',\n                className: 'Router',\n                funcName: 'registerRoute',\n                paramName: 'route',\n            });\n            assert.hasMethod(route, 'match', {\n                moduleName: 'workbox-routing',\n                className: 'Router',\n                funcName: 'registerRoute',\n                paramName: 'route',\n            });\n            assert.isType(route.handler, 'object', {\n                moduleName: 'workbox-routing',\n                className: 'Router',\n                funcName: 'registerRoute',\n                paramName: 'route',\n            });\n            assert.hasMethod(route.handler, 'handle', {\n                moduleName: 'workbox-routing',\n                className: 'Router',\n                funcName: 'registerRoute',\n                paramName: 'route.handler',\n            });\n            assert.isType(route.method, 'string', {\n                moduleName: 'workbox-routing',\n                className: 'Router',\n                funcName: 'registerRoute',\n                paramName: 'route.method',\n            });\n        }\n        if (!this._routes.has(route.method)) {\n            this._routes.set(route.method, []);\n        }\n        // Give precedence to all of the earlier routes by adding this additional\n        // route to the end of the array.\n        this._routes.get(route.method).push(route);\n    }\n    /**\n     * Unregisters a route with the router.\n     *\n     * @param {workbox-routing.Route} route The route to unregister.\n     */\n    unregisterRoute(route) {\n        if (!this._routes.has(route.method)) {\n            throw new WorkboxError('unregister-route-but-not-found-with-method', {\n                method: route.method,\n            });\n        }\n        const routeIndex = this._routes.get(route.method).indexOf(route);\n        if (routeIndex > -1) {\n            this._routes.get(route.method).splice(routeIndex, 1);\n        }\n        else {\n            throw new WorkboxError('unregister-route-route-not-registered');\n        }\n    }\n}\nexport { Router };\n","/*\n  Copyright 2019 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { Router } from '../Router.js';\nimport '../_version.js';\nlet defaultRouter;\n/**\n * Creates a new, singleton Router instance if one does not exist. If one\n * does already exist, that instance is returned.\n *\n * @private\n * @return {Router}\n */\nexport const getOrCreateDefaultRouter = () => {\n    if (!defaultRouter) {\n        defaultRouter = new Router();\n        // The helpers that use the default Router assume these listeners exist.\n        defaultRouter.addFetchListener();\n        defaultRouter.addCacheListener();\n    }\n    return defaultRouter;\n};\n","/*\n  Copyright 2019 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { logger } from 'workbox-core/_private/logger.js';\nimport { WorkboxError } from 'workbox-core/_private/WorkboxError.js';\nimport { Route } from './Route.js';\nimport { RegExpRoute } from './RegExpRoute.js';\nimport { getOrCreateDefaultRouter } from './utils/getOrCreateDefaultRouter.js';\nimport './_version.js';\n/**\n * Easily register a RegExp, string, or function with a caching\n * strategy to a singleton Router instance.\n *\n * This method will generate a Route for you if needed and\n * call {@link workbox-routing.Router#registerRoute}.\n *\n * @param {RegExp|string|workbox-routing.Route~matchCallback|workbox-routing.Route} capture\n * If the capture param is a `Route`, all other arguments will be ignored.\n * @param {workbox-routing~handlerCallback} [handler] A callback\n * function that returns a Promise resulting in a Response. This parameter\n * is required if `capture` is not a `Route` object.\n * @param {string} [method='GET'] The HTTP method to match the Route\n * against.\n * @return {workbox-routing.Route} The generated `Route`.\n *\n * @memberof workbox-routing\n */\nfunction registerRoute(capture, handler, method) {\n    let route;\n    if (typeof capture === 'string') {\n        const captureUrl = new URL(capture, location.href);\n        if (process.env.NODE_ENV !== 'production') {\n            if (!(capture.startsWith('/') || capture.startsWith('http'))) {\n                throw new WorkboxError('invalid-string', {\n                    moduleName: 'workbox-routing',\n                    funcName: 'registerRoute',\n                    paramName: 'capture',\n                });\n            }\n            // We want to check if Express-style wildcards are in the pathname only.\n            // TODO: Remove this log message in v4.\n            const valueToCheck = capture.startsWith('http')\n                ? captureUrl.pathname\n                : capture;\n            // See https://github.com/pillarjs/path-to-regexp#parameters\n            const wildcards = '[*:?+]';\n            if (new RegExp(`${wildcards}`).exec(valueToCheck)) {\n                logger.debug(`The '$capture' parameter contains an Express-style wildcard ` +\n                    `character (${wildcards}). Strings are now always interpreted as ` +\n                    `exact matches; use a RegExp for partial or wildcard matches.`);\n            }\n        }\n        const matchCallback = ({ url }) => {\n            if (process.env.NODE_ENV !== 'production') {\n                if (url.pathname === captureUrl.pathname &&\n                    url.origin !== captureUrl.origin) {\n                    logger.debug(`${capture} only partially matches the cross-origin URL ` +\n                        `${url.toString()}. This route will only handle cross-origin requests ` +\n                        `if they match the entire URL.`);\n                }\n            }\n            return url.href === captureUrl.href;\n        };\n        // If `capture` is a string then `handler` and `method` must be present.\n        route = new Route(matchCallback, handler, method);\n    }\n    else if (capture instanceof RegExp) {\n        // If `capture` is a `RegExp` then `handler` and `method` must be present.\n        route = new RegExpRoute(capture, handler, method);\n    }\n    else if (typeof capture === 'function') {\n        // If `capture` is a function then `handler` and `method` must be present.\n        route = new Route(capture, handler, method);\n    }\n    else if (capture instanceof Route) {\n        route = capture;\n    }\n    else {\n        throw new WorkboxError('unsupported-route-type', {\n            moduleName: 'workbox-routing',\n            funcName: 'registerRoute',\n            paramName: 'capture',\n        });\n    }\n    const defaultRouter = getOrCreateDefaultRouter();\n    defaultRouter.registerRoute(route);\n    return route;\n}\nexport { registerRoute };\n","\"use strict\";\n// @ts-ignore\ntry {\n    self['workbox:strategies:6.5.3'] && _();\n}\ncatch (e) { }\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../_version.js';\nexport const cacheOkAndOpaquePlugin = {\n    /**\n     * Returns a valid response (to allow caching) if the status is 200 (OK) or\n     * 0 (opaque).\n     *\n     * @param {Object} options\n     * @param {Response} options.response\n     * @return {Response|null}\n     *\n     * @private\n     */\n    cacheWillUpdate: async ({ response }) => {\n        if (response.status === 200 || response.status === 0) {\n            return response;\n        }\n        return null;\n    },\n};\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../_version.js';\nconst _cacheNameDetails = {\n    googleAnalytics: 'googleAnalytics',\n    precache: 'precache-v2',\n    prefix: 'workbox',\n    runtime: 'runtime',\n    suffix: typeof registration !== 'undefined' ? registration.scope : '',\n};\nconst _createCacheName = (cacheName) => {\n    return [_cacheNameDetails.prefix, cacheName, _cacheNameDetails.suffix]\n        .filter((value) => value && value.length > 0)\n        .join('-');\n};\nconst eachCacheNameDetail = (fn) => {\n    for (const key of Object.keys(_cacheNameDetails)) {\n        fn(key);\n    }\n};\nexport const cacheNames = {\n    updateDetails: (details) => {\n        eachCacheNameDetail((key) => {\n            if (typeof details[key] === 'string') {\n                _cacheNameDetails[key] = details[key];\n            }\n        });\n    },\n    getGoogleAnalyticsName: (userCacheName) => {\n        return userCacheName || _createCacheName(_cacheNameDetails.googleAnalytics);\n    },\n    getPrecacheName: (userCacheName) => {\n        return userCacheName || _createCacheName(_cacheNameDetails.precache);\n    },\n    getPrefix: () => {\n        return _cacheNameDetails.prefix;\n    },\n    getRuntimeName: (userCacheName) => {\n        return userCacheName || _createCacheName(_cacheNameDetails.runtime);\n    },\n    getSuffix: () => {\n        return _cacheNameDetails.suffix;\n    },\n};\n","/*\n  Copyright 2020 Google LLC\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../_version.js';\nfunction stripParams(fullURL, ignoreParams) {\n    const strippedURL = new URL(fullURL);\n    for (const param of ignoreParams) {\n        strippedURL.searchParams.delete(param);\n    }\n    return strippedURL.href;\n}\n/**\n * Matches an item in the cache, ignoring specific URL params. This is similar\n * to the `ignoreSearch` option, but it allows you to ignore just specific\n * params (while continuing to match on the others).\n *\n * @private\n * @param {Cache} cache\n * @param {Request} request\n * @param {Object} matchOptions\n * @param {Array<string>} ignoreParams\n * @return {Promise<Response|undefined>}\n */\nasync function cacheMatchIgnoreParams(cache, request, ignoreParams, matchOptions) {\n    const strippedRequestURL = stripParams(request.url, ignoreParams);\n    // If the request doesn't include any ignored params, match as normal.\n    if (request.url === strippedRequestURL) {\n        return cache.match(request, matchOptions);\n    }\n    // Otherwise, match by comparing keys\n    const keysOptions = Object.assign(Object.assign({}, matchOptions), { ignoreSearch: true });\n    const cacheKeys = await cache.keys(request, keysOptions);\n    for (const cacheKey of cacheKeys) {\n        const strippedCacheKeyURL = stripParams(cacheKey.url, ignoreParams);\n        if (strippedRequestURL === strippedCacheKeyURL) {\n            return cache.match(cacheKey, matchOptions);\n        }\n    }\n    return;\n}\nexport { cacheMatchIgnoreParams };\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../_version.js';\n/**\n * The Deferred class composes Promises in a way that allows for them to be\n * resolved or rejected from outside the constructor. In most cases promises\n * should be used directly, but Deferreds can be necessary when the logic to\n * resolve a promise must be separate.\n *\n * @private\n */\nclass Deferred {\n    /**\n     * Creates a promise and exposes its resolve and reject functions as methods.\n     */\n    constructor() {\n        this.promise = new Promise((resolve, reject) => {\n            this.resolve = resolve;\n            this.reject = reject;\n        });\n    }\n}\nexport { Deferred };\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../_version.js';\n// Callbacks to be executed whenever there's a quota error.\n// Can't change Function type right now.\n// eslint-disable-next-line @typescript-eslint/ban-types\nconst quotaErrorCallbacks = new Set();\nexport { quotaErrorCallbacks };\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { logger } from '../_private/logger.js';\nimport { quotaErrorCallbacks } from '../models/quotaErrorCallbacks.js';\nimport '../_version.js';\n/**\n * Runs all of the callback functions, one at a time sequentially, in the order\n * in which they were registered.\n *\n * @memberof workbox-core\n * @private\n */\nasync function executeQuotaErrorCallbacks() {\n    if (process.env.NODE_ENV !== 'production') {\n        logger.log(`About to run ${quotaErrorCallbacks.size} ` +\n            `callbacks to clean up caches.`);\n    }\n    for (const callback of quotaErrorCallbacks) {\n        await callback();\n        if (process.env.NODE_ENV !== 'production') {\n            logger.log(callback, 'is complete.');\n        }\n    }\n    if (process.env.NODE_ENV !== 'production') {\n        logger.log('Finished running callbacks.');\n    }\n}\nexport { executeQuotaErrorCallbacks };\n","/*\n  Copyright 2019 Google LLC\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../_version.js';\n/**\n * Returns a promise that resolves and the passed number of milliseconds.\n * This utility is an async/await-friendly version of `setTimeout`.\n *\n * @param {number} ms\n * @return {Promise}\n * @private\n */\nexport function timeout(ms) {\n    return new Promise((resolve) => setTimeout(resolve, ms));\n}\n","/*\n  Copyright 2020 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { assert } from 'workbox-core/_private/assert.js';\nimport { cacheMatchIgnoreParams } from 'workbox-core/_private/cacheMatchIgnoreParams.js';\nimport { Deferred } from 'workbox-core/_private/Deferred.js';\nimport { executeQuotaErrorCallbacks } from 'workbox-core/_private/executeQuotaErrorCallbacks.js';\nimport { getFriendlyURL } from 'workbox-core/_private/getFriendlyURL.js';\nimport { logger } from 'workbox-core/_private/logger.js';\nimport { timeout } from 'workbox-core/_private/timeout.js';\nimport { WorkboxError } from 'workbox-core/_private/WorkboxError.js';\nimport './_version.js';\nfunction toRequest(input) {\n    return typeof input === 'string' ? new Request(input) : input;\n}\n/**\n * A class created every time a Strategy instance instance calls\n * {@link workbox-strategies.Strategy~handle} or\n * {@link workbox-strategies.Strategy~handleAll} that wraps all fetch and\n * cache actions around plugin callbacks and keeps track of when the strategy\n * is \"done\" (i.e. all added `event.waitUntil()` promises have resolved).\n *\n * @memberof workbox-strategies\n */\nclass StrategyHandler {\n    /**\n     * Creates a new instance associated with the passed strategy and event\n     * that's handling the request.\n     *\n     * The constructor also initializes the state that will be passed to each of\n     * the plugins handling this request.\n     *\n     * @param {workbox-strategies.Strategy} strategy\n     * @param {Object} options\n     * @param {Request|string} options.request A request to run this strategy for.\n     * @param {ExtendableEvent} options.event The event associated with the\n     *     request.\n     * @param {URL} [options.url]\n     * @param {*} [options.params] The return value from the\n     *     {@link workbox-routing~matchCallback} (if applicable).\n     */\n    constructor(strategy, options) {\n        this._cacheKeys = {};\n        /**\n         * The request the strategy is performing (passed to the strategy's\n         * `handle()` or `handleAll()` method).\n         * @name request\n         * @instance\n         * @type {Request}\n         * @memberof workbox-strategies.StrategyHandler\n         */\n        /**\n         * The event associated with this request.\n         * @name event\n         * @instance\n         * @type {ExtendableEvent}\n         * @memberof workbox-strategies.StrategyHandler\n         */\n        /**\n         * A `URL` instance of `request.url` (if passed to the strategy's\n         * `handle()` or `handleAll()` method).\n         * Note: the `url` param will be present if the strategy was invoked\n         * from a workbox `Route` object.\n         * @name url\n         * @instance\n         * @type {URL|undefined}\n         * @memberof workbox-strategies.StrategyHandler\n         */\n        /**\n         * A `param` value (if passed to the strategy's\n         * `handle()` or `handleAll()` method).\n         * Note: the `param` param will be present if the strategy was invoked\n         * from a workbox `Route` object and the\n         * {@link workbox-routing~matchCallback} returned\n         * a truthy value (it will be that value).\n         * @name params\n         * @instance\n         * @type {*|undefined}\n         * @memberof workbox-strategies.StrategyHandler\n         */\n        if (process.env.NODE_ENV !== 'production') {\n            assert.isInstance(options.event, ExtendableEvent, {\n                moduleName: 'workbox-strategies',\n                className: 'StrategyHandler',\n                funcName: 'constructor',\n                paramName: 'options.event',\n            });\n        }\n        Object.assign(this, options);\n        this.event = options.event;\n        this._strategy = strategy;\n        this._handlerDeferred = new Deferred();\n        this._extendLifetimePromises = [];\n        // Copy the plugins list (since it's mutable on the strategy),\n        // so any mutations don't affect this handler instance.\n        this._plugins = [...strategy.plugins];\n        this._pluginStateMap = new Map();\n        for (const plugin of this._plugins) {\n            this._pluginStateMap.set(plugin, {});\n        }\n        this.event.waitUntil(this._handlerDeferred.promise);\n    }\n    /**\n     * Fetches a given request (and invokes any applicable plugin callback\n     * methods) using the `fetchOptions` (for non-navigation requests) and\n     * `plugins` defined on the `Strategy` object.\n     *\n     * The following plugin lifecycle methods are invoked when using this method:\n     * - `requestWillFetch()`\n     * - `fetchDidSucceed()`\n     * - `fetchDidFail()`\n     *\n     * @param {Request|string} input The URL or request to fetch.\n     * @return {Promise<Response>}\n     */\n    async fetch(input) {\n        const { event } = this;\n        let request = toRequest(input);\n        if (request.mode === 'navigate' &&\n            event instanceof FetchEvent &&\n            event.preloadResponse) {\n            const possiblePreloadResponse = (await event.preloadResponse);\n            if (possiblePreloadResponse) {\n                if (process.env.NODE_ENV !== 'production') {\n                    logger.log(`Using a preloaded navigation response for ` +\n                        `'${getFriendlyURL(request.url)}'`);\n                }\n                return possiblePreloadResponse;\n            }\n        }\n        // If there is a fetchDidFail plugin, we need to save a clone of the\n        // original request before it's either modified by a requestWillFetch\n        // plugin or before the original request's body is consumed via fetch().\n        const originalRequest = this.hasCallback('fetchDidFail')\n            ? request.clone()\n            : null;\n        try {\n            for (const cb of this.iterateCallbacks('requestWillFetch')) {\n                request = await cb({ request: request.clone(), event });\n            }\n        }\n        catch (err) {\n            if (err instanceof Error) {\n                throw new WorkboxError('plugin-error-request-will-fetch', {\n                    thrownErrorMessage: err.message,\n                });\n            }\n        }\n        // The request can be altered by plugins with `requestWillFetch` making\n        // the original request (most likely from a `fetch` event) different\n        // from the Request we make. Pass both to `fetchDidFail` to aid debugging.\n        const pluginFilteredRequest = request.clone();\n        try {\n            let fetchResponse;\n            // See https://github.com/GoogleChrome/workbox/issues/1796\n            fetchResponse = await fetch(request, request.mode === 'navigate' ? undefined : this._strategy.fetchOptions);\n            if (process.env.NODE_ENV !== 'production') {\n                logger.debug(`Network request for ` +\n                    `'${getFriendlyURL(request.url)}' returned a response with ` +\n                    `status '${fetchResponse.status}'.`);\n            }\n            for (const callback of this.iterateCallbacks('fetchDidSucceed')) {\n                fetchResponse = await callback({\n                    event,\n                    request: pluginFilteredRequest,\n                    response: fetchResponse,\n                });\n            }\n            return fetchResponse;\n        }\n        catch (error) {\n            if (process.env.NODE_ENV !== 'production') {\n                logger.log(`Network request for ` +\n                    `'${getFriendlyURL(request.url)}' threw an error.`, error);\n            }\n            // `originalRequest` will only exist if a `fetchDidFail` callback\n            // is being used (see above).\n            if (originalRequest) {\n                await this.runCallbacks('fetchDidFail', {\n                    error: error,\n                    event,\n                    originalRequest: originalRequest.clone(),\n                    request: pluginFilteredRequest.clone(),\n                });\n            }\n            throw error;\n        }\n    }\n    /**\n     * Calls `this.fetch()` and (in the background) runs `this.cachePut()` on\n     * the response generated by `this.fetch()`.\n     *\n     * The call to `this.cachePut()` automatically invokes `this.waitUntil()`,\n     * so you do not have to manually call `waitUntil()` on the event.\n     *\n     * @param {Request|string} input The request or URL to fetch and cache.\n     * @return {Promise<Response>}\n     */\n    async fetchAndCachePut(input) {\n        const response = await this.fetch(input);\n        const responseClone = response.clone();\n        void this.waitUntil(this.cachePut(input, responseClone));\n        return response;\n    }\n    /**\n     * Matches a request from the cache (and invokes any applicable plugin\n     * callback methods) using the `cacheName`, `matchOptions`, and `plugins`\n     * defined on the strategy object.\n     *\n     * The following plugin lifecycle methods are invoked when using this method:\n     * - cacheKeyWillByUsed()\n     * - cachedResponseWillByUsed()\n     *\n     * @param {Request|string} key The Request or URL to use as the cache key.\n     * @return {Promise<Response|undefined>} A matching response, if found.\n     */\n    async cacheMatch(key) {\n        const request = toRequest(key);\n        let cachedResponse;\n        const { cacheName, matchOptions } = this._strategy;\n        const effectiveRequest = await this.getCacheKey(request, 'read');\n        const multiMatchOptions = Object.assign(Object.assign({}, matchOptions), { cacheName });\n        cachedResponse = await caches.match(effectiveRequest, multiMatchOptions);\n        if (process.env.NODE_ENV !== 'production') {\n            if (cachedResponse) {\n                logger.debug(`Found a cached response in '${cacheName}'.`);\n            }\n            else {\n                logger.debug(`No cached response found in '${cacheName}'.`);\n            }\n        }\n        for (const callback of this.iterateCallbacks('cachedResponseWillBeUsed')) {\n            cachedResponse =\n                (await callback({\n                    cacheName,\n                    matchOptions,\n                    cachedResponse,\n                    request: effectiveRequest,\n                    event: this.event,\n                })) || undefined;\n        }\n        return cachedResponse;\n    }\n    /**\n     * Puts a request/response pair in the cache (and invokes any applicable\n     * plugin callback methods) using the `cacheName` and `plugins` defined on\n     * the strategy object.\n     *\n     * The following plugin lifecycle methods are invoked when using this method:\n     * - cacheKeyWillByUsed()\n     * - cacheWillUpdate()\n     * - cacheDidUpdate()\n     *\n     * @param {Request|string} key The request or URL to use as the cache key.\n     * @param {Response} response The response to cache.\n     * @return {Promise<boolean>} `false` if a cacheWillUpdate caused the response\n     * not be cached, and `true` otherwise.\n     */\n    async cachePut(key, response) {\n        const request = toRequest(key);\n        // Run in the next task to avoid blocking other cache reads.\n        // https://github.com/w3c/ServiceWorker/issues/1397\n        await timeout(0);\n        const effectiveRequest = await this.getCacheKey(request, 'write');\n        if (process.env.NODE_ENV !== 'production') {\n            if (effectiveRequest.method && effectiveRequest.method !== 'GET') {\n                throw new WorkboxError('attempt-to-cache-non-get-request', {\n                    url: getFriendlyURL(effectiveRequest.url),\n                    method: effectiveRequest.method,\n                });\n            }\n            // See https://github.com/GoogleChrome/workbox/issues/2818\n            const vary = response.headers.get('Vary');\n            if (vary) {\n                logger.debug(`The response for ${getFriendlyURL(effectiveRequest.url)} ` +\n                    `has a 'Vary: ${vary}' header. ` +\n                    `Consider setting the {ignoreVary: true} option on your strategy ` +\n                    `to ensure cache matching and deletion works as expected.`);\n            }\n        }\n        if (!response) {\n            if (process.env.NODE_ENV !== 'production') {\n                logger.error(`Cannot cache non-existent response for ` +\n                    `'${getFriendlyURL(effectiveRequest.url)}'.`);\n            }\n            throw new WorkboxError('cache-put-with-no-response', {\n                url: getFriendlyURL(effectiveRequest.url),\n            });\n        }\n        const responseToCache = await this._ensureResponseSafeToCache(response);\n        if (!responseToCache) {\n            if (process.env.NODE_ENV !== 'production') {\n                logger.debug(`Response '${getFriendlyURL(effectiveRequest.url)}' ` +\n                    `will not be cached.`, responseToCache);\n            }\n            return false;\n        }\n        const { cacheName, matchOptions } = this._strategy;\n        const cache = await self.caches.open(cacheName);\n        const hasCacheUpdateCallback = this.hasCallback('cacheDidUpdate');\n        const oldResponse = hasCacheUpdateCallback\n            ? await cacheMatchIgnoreParams(\n            // TODO(philipwalton): the `__WB_REVISION__` param is a precaching\n            // feature. Consider into ways to only add this behavior if using\n            // precaching.\n            cache, effectiveRequest.clone(), ['__WB_REVISION__'], matchOptions)\n            : null;\n        if (process.env.NODE_ENV !== 'production') {\n            logger.debug(`Updating the '${cacheName}' cache with a new Response ` +\n                `for ${getFriendlyURL(effectiveRequest.url)}.`);\n        }\n        try {\n            await cache.put(effectiveRequest, hasCacheUpdateCallback ? responseToCache.clone() : responseToCache);\n        }\n        catch (error) {\n            if (error instanceof Error) {\n                // See https://developer.mozilla.org/en-US/docs/Web/API/DOMException#exception-QuotaExceededError\n                if (error.name === 'QuotaExceededError') {\n                    await executeQuotaErrorCallbacks();\n                }\n                throw error;\n            }\n        }\n        for (const callback of this.iterateCallbacks('cacheDidUpdate')) {\n            await callback({\n                cacheName,\n                oldResponse,\n                newResponse: responseToCache.clone(),\n                request: effectiveRequest,\n                event: this.event,\n            });\n        }\n        return true;\n    }\n    /**\n     * Checks the list of plugins for the `cacheKeyWillBeUsed` callback, and\n     * executes any of those callbacks found in sequence. The final `Request`\n     * object returned by the last plugin is treated as the cache key for cache\n     * reads and/or writes. If no `cacheKeyWillBeUsed` plugin callbacks have\n     * been registered, the passed request is returned unmodified\n     *\n     * @param {Request} request\n     * @param {string} mode\n     * @return {Promise<Request>}\n     */\n    async getCacheKey(request, mode) {\n        const key = `${request.url} | ${mode}`;\n        if (!this._cacheKeys[key]) {\n            let effectiveRequest = request;\n            for (const callback of this.iterateCallbacks('cacheKeyWillBeUsed')) {\n                effectiveRequest = toRequest(await callback({\n                    mode,\n                    request: effectiveRequest,\n                    event: this.event,\n                    // params has a type any can't change right now.\n                    params: this.params, // eslint-disable-line\n                }));\n            }\n            this._cacheKeys[key] = effectiveRequest;\n        }\n        return this._cacheKeys[key];\n    }\n    /**\n     * Returns true if the strategy has at least one plugin with the given\n     * callback.\n     *\n     * @param {string} name The name of the callback to check for.\n     * @return {boolean}\n     */\n    hasCallback(name) {\n        for (const plugin of this._strategy.plugins) {\n            if (name in plugin) {\n                return true;\n            }\n        }\n        return false;\n    }\n    /**\n     * Runs all plugin callbacks matching the given name, in order, passing the\n     * given param object (merged ith the current plugin state) as the only\n     * argument.\n     *\n     * Note: since this method runs all plugins, it's not suitable for cases\n     * where the return value of a callback needs to be applied prior to calling\n     * the next callback. See\n     * {@link workbox-strategies.StrategyHandler#iterateCallbacks}\n     * below for how to handle that case.\n     *\n     * @param {string} name The name of the callback to run within each plugin.\n     * @param {Object} param The object to pass as the first (and only) param\n     *     when executing each callback. This object will be merged with the\n     *     current plugin state prior to callback execution.\n     */\n    async runCallbacks(name, param) {\n        for (const callback of this.iterateCallbacks(name)) {\n            // TODO(philipwalton): not sure why `any` is needed. It seems like\n            // this should work with `as WorkboxPluginCallbackParam[C]`.\n            await callback(param);\n        }\n    }\n    /**\n     * Accepts a callback and returns an iterable of matching plugin callbacks,\n     * where each callback is wrapped with the current handler state (i.e. when\n     * you call each callback, whatever object parameter you pass it will\n     * be merged with the plugin's current state).\n     *\n     * @param {string} name The name fo the callback to run\n     * @return {Array<Function>}\n     */\n    *iterateCallbacks(name) {\n        for (const plugin of this._strategy.plugins) {\n            if (typeof plugin[name] === 'function') {\n                const state = this._pluginStateMap.get(plugin);\n                const statefulCallback = (param) => {\n                    const statefulParam = Object.assign(Object.assign({}, param), { state });\n                    // TODO(philipwalton): not sure why `any` is needed. It seems like\n                    // this should work with `as WorkboxPluginCallbackParam[C]`.\n                    return plugin[name](statefulParam);\n                };\n                yield statefulCallback;\n            }\n        }\n    }\n    /**\n     * Adds a promise to the\n     * [extend lifetime promises]{@link https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises}\n     * of the event event associated with the request being handled (usually a\n     * `FetchEvent`).\n     *\n     * Note: you can await\n     * {@link workbox-strategies.StrategyHandler~doneWaiting}\n     * to know when all added promises have settled.\n     *\n     * @param {Promise} promise A promise to add to the extend lifetime promises\n     *     of the event that triggered the request.\n     */\n    waitUntil(promise) {\n        this._extendLifetimePromises.push(promise);\n        return promise;\n    }\n    /**\n     * Returns a promise that resolves once all promises passed to\n     * {@link workbox-strategies.StrategyHandler~waitUntil}\n     * have settled.\n     *\n     * Note: any work done after `doneWaiting()` settles should be manually\n     * passed to an event's `waitUntil()` method (not this handler's\n     * `waitUntil()` method), otherwise the service worker thread my be killed\n     * prior to your work completing.\n     */\n    async doneWaiting() {\n        let promise;\n        while ((promise = this._extendLifetimePromises.shift())) {\n            await promise;\n        }\n    }\n    /**\n     * Stops running the strategy and immediately resolves any pending\n     * `waitUntil()` promises.\n     */\n    destroy() {\n        this._handlerDeferred.resolve(null);\n    }\n    /**\n     * This method will call cacheWillUpdate on the available plugins (or use\n     * status === 200) to determine if the Response is safe and valid to cache.\n     *\n     * @param {Request} options.request\n     * @param {Response} options.response\n     * @return {Promise<Response|undefined>}\n     *\n     * @private\n     */\n    async _ensureResponseSafeToCache(response) {\n        let responseToCache = response;\n        let pluginsUsed = false;\n        for (const callback of this.iterateCallbacks('cacheWillUpdate')) {\n            responseToCache =\n                (await callback({\n                    request: this.request,\n                    response: responseToCache,\n                    event: this.event,\n                })) || undefined;\n            pluginsUsed = true;\n            if (!responseToCache) {\n                break;\n            }\n        }\n        if (!pluginsUsed) {\n            if (responseToCache && responseToCache.status !== 200) {\n                responseToCache = undefined;\n            }\n            if (process.env.NODE_ENV !== 'production') {\n                if (responseToCache) {\n                    if (responseToCache.status !== 200) {\n                        if (responseToCache.status === 0) {\n                            logger.warn(`The response for '${this.request.url}' ` +\n                                `is an opaque response. The caching strategy that you're ` +\n                                `using will not cache opaque responses by default.`);\n                        }\n                        else {\n                            logger.debug(`The response for '${this.request.url}' ` +\n                                `returned a status code of '${response.status}' and won't ` +\n                                `be cached as a result.`);\n                        }\n                    }\n                }\n            }\n        }\n        return responseToCache;\n    }\n}\nexport { StrategyHandler };\n","/*\n  Copyright 2020 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { cacheNames } from 'workbox-core/_private/cacheNames.js';\nimport { WorkboxError } from 'workbox-core/_private/WorkboxError.js';\nimport { logger } from 'workbox-core/_private/logger.js';\nimport { getFriendlyURL } from 'workbox-core/_private/getFriendlyURL.js';\nimport { StrategyHandler } from './StrategyHandler.js';\nimport './_version.js';\n/**\n * An abstract base class that all other strategy classes must extend from:\n *\n * @memberof workbox-strategies\n */\nclass Strategy {\n    /**\n     * Creates a new instance of the strategy and sets all documented option\n     * properties as public instance properties.\n     *\n     * Note: if a custom strategy class extends the base Strategy class and does\n     * not need more than these properties, it does not need to define its own\n     * constructor.\n     *\n     * @param {Object} [options]\n     * @param {string} [options.cacheName] Cache name to store and retrieve\n     * requests. Defaults to the cache names provided by\n     * {@link workbox-core.cacheNames}.\n     * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}\n     * to use in conjunction with this caching strategy.\n     * @param {Object} [options.fetchOptions] Values passed along to the\n     * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)\n     * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)\n     * `fetch()` requests made by this strategy.\n     * @param {Object} [options.matchOptions] The\n     * [`CacheQueryOptions`]{@link https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions}\n     * for any `cache.match()` or `cache.put()` calls made by this strategy.\n     */\n    constructor(options = {}) {\n        /**\n         * Cache name to store and retrieve\n         * requests. Defaults to the cache names provided by\n         * {@link workbox-core.cacheNames}.\n         *\n         * @type {string}\n         */\n        this.cacheName = cacheNames.getRuntimeName(options.cacheName);\n        /**\n         * The list\n         * [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}\n         * used by this strategy.\n         *\n         * @type {Array<Object>}\n         */\n        this.plugins = options.plugins || [];\n        /**\n         * Values passed along to the\n         * [`init`]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters}\n         * of all fetch() requests made by this strategy.\n         *\n         * @type {Object}\n         */\n        this.fetchOptions = options.fetchOptions;\n        /**\n         * The\n         * [`CacheQueryOptions`]{@link https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions}\n         * for any `cache.match()` or `cache.put()` calls made by this strategy.\n         *\n         * @type {Object}\n         */\n        this.matchOptions = options.matchOptions;\n    }\n    /**\n     * Perform a request strategy and returns a `Promise` that will resolve with\n     * a `Response`, invoking all relevant plugin callbacks.\n     *\n     * When a strategy instance is registered with a Workbox\n     * {@link workbox-routing.Route}, this method is automatically\n     * called when the route matches.\n     *\n     * Alternatively, this method can be used in a standalone `FetchEvent`\n     * listener by passing it to `event.respondWith()`.\n     *\n     * @param {FetchEvent|Object} options A `FetchEvent` or an object with the\n     *     properties listed below.\n     * @param {Request|string} options.request A request to run this strategy for.\n     * @param {ExtendableEvent} options.event The event associated with the\n     *     request.\n     * @param {URL} [options.url]\n     * @param {*} [options.params]\n     */\n    handle(options) {\n        const [responseDone] = this.handleAll(options);\n        return responseDone;\n    }\n    /**\n     * Similar to {@link workbox-strategies.Strategy~handle}, but\n     * instead of just returning a `Promise` that resolves to a `Response` it\n     * it will return an tuple of `[response, done]` promises, where the former\n     * (`response`) is equivalent to what `handle()` returns, and the latter is a\n     * Promise that will resolve once any promises that were added to\n     * `event.waitUntil()` as part of performing the strategy have completed.\n     *\n     * You can await the `done` promise to ensure any extra work performed by\n     * the strategy (usually caching responses) completes successfully.\n     *\n     * @param {FetchEvent|Object} options A `FetchEvent` or an object with the\n     *     properties listed below.\n     * @param {Request|string} options.request A request to run this strategy for.\n     * @param {ExtendableEvent} options.event The event associated with the\n     *     request.\n     * @param {URL} [options.url]\n     * @param {*} [options.params]\n     * @return {Array<Promise>} A tuple of [response, done]\n     *     promises that can be used to determine when the response resolves as\n     *     well as when the handler has completed all its work.\n     */\n    handleAll(options) {\n        // Allow for flexible options to be passed.\n        if (options instanceof FetchEvent) {\n            options = {\n                event: options,\n                request: options.request,\n            };\n        }\n        const event = options.event;\n        const request = typeof options.request === 'string'\n            ? new Request(options.request)\n            : options.request;\n        const params = 'params' in options ? options.params : undefined;\n        const handler = new StrategyHandler(this, { event, request, params });\n        const responseDone = this._getResponse(handler, request, event);\n        const handlerDone = this._awaitComplete(responseDone, handler, request, event);\n        // Return an array of promises, suitable for use with Promise.all().\n        return [responseDone, handlerDone];\n    }\n    async _getResponse(handler, request, event) {\n        await handler.runCallbacks('handlerWillStart', { event, request });\n        let response = undefined;\n        try {\n            response = await this._handle(request, handler);\n            // The \"official\" Strategy subclasses all throw this error automatically,\n            // but in case a third-party Strategy doesn't, ensure that we have a\n            // consistent failure when there's no response or an error response.\n            if (!response || response.type === 'error') {\n                throw new WorkboxError('no-response', { url: request.url });\n            }\n        }\n        catch (error) {\n            if (error instanceof Error) {\n                for (const callback of handler.iterateCallbacks('handlerDidError')) {\n                    response = await callback({ error, event, request });\n                    if (response) {\n                        break;\n                    }\n                }\n            }\n            if (!response) {\n                throw error;\n            }\n            else if (process.env.NODE_ENV !== 'production') {\n                logger.log(`While responding to '${getFriendlyURL(request.url)}', ` +\n                    `an ${error instanceof Error ? error.toString() : ''} error occurred. Using a fallback response provided by ` +\n                    `a handlerDidError plugin.`);\n            }\n        }\n        for (const callback of handler.iterateCallbacks('handlerWillRespond')) {\n            response = await callback({ event, request, response });\n        }\n        return response;\n    }\n    async _awaitComplete(responseDone, handler, request, event) {\n        let response;\n        let error;\n        try {\n            response = await responseDone;\n        }\n        catch (error) {\n            // Ignore errors, as response errors should be caught via the `response`\n            // promise above. The `done` promise will only throw for errors in\n            // promises passed to `handler.waitUntil()`.\n        }\n        try {\n            await handler.runCallbacks('handlerDidRespond', {\n                event,\n                request,\n                response,\n            });\n            await handler.doneWaiting();\n        }\n        catch (waitUntilError) {\n            if (waitUntilError instanceof Error) {\n                error = waitUntilError;\n            }\n        }\n        await handler.runCallbacks('handlerDidComplete', {\n            event,\n            request,\n            response,\n            error: error,\n        });\n        handler.destroy();\n        if (error) {\n            throw error;\n        }\n    }\n}\nexport { Strategy };\n/**\n * Classes extending the `Strategy` based class should implement this method,\n * and leverage the {@link workbox-strategies.StrategyHandler}\n * arg to perform all fetching and cache logic, which will ensure all relevant\n * cache, cache options, fetch options and plugins are used (per the current\n * strategy instance).\n *\n * @name _handle\n * @instance\n * @abstract\n * @function\n * @param {Request} request\n * @param {workbox-strategies.StrategyHandler} handler\n * @return {Promise<Response>}\n *\n * @memberof workbox-strategies.Strategy\n */\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { logger } from 'workbox-core/_private/logger.js';\nimport { getFriendlyURL } from 'workbox-core/_private/getFriendlyURL.js';\nimport '../_version.js';\nexport const messages = {\n    strategyStart: (strategyName, request) => `Using ${strategyName} to respond to '${getFriendlyURL(request.url)}'`,\n    printFinalResponse: (response) => {\n        if (response) {\n            logger.groupCollapsed(`View the final response here.`);\n            logger.log(response || '[No response returned]');\n            logger.groupEnd();\n        }\n    },\n};\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { assert } from 'workbox-core/_private/assert.js';\nimport { logger } from 'workbox-core/_private/logger.js';\nimport { WorkboxError } from 'workbox-core/_private/WorkboxError.js';\nimport { cacheOkAndOpaquePlugin } from './plugins/cacheOkAndOpaquePlugin.js';\nimport { Strategy } from './Strategy.js';\nimport { messages } from './utils/messages.js';\nimport './_version.js';\n/**\n * An implementation of a\n * [network first](https://developer.chrome.com/docs/workbox/caching-strategies-overview/#network-first-falling-back-to-cache)\n * request strategy.\n *\n * By default, this strategy will cache responses with a 200 status code as\n * well as [opaque responses](https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#opaque-responses).\n * Opaque responses are are cross-origin requests where the response doesn't\n * support [CORS](https://enable-cors.org/).\n *\n * If the network request fails, and there is no cache match, this will throw\n * a `WorkboxError` exception.\n *\n * @extends workbox-strategies.Strategy\n * @memberof workbox-strategies\n */\nclass NetworkFirst extends Strategy {\n    /**\n     * @param {Object} [options]\n     * @param {string} [options.cacheName] Cache name to store and retrieve\n     * requests. Defaults to cache names provided by\n     * {@link workbox-core.cacheNames}.\n     * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}\n     * to use in conjunction with this caching strategy.\n     * @param {Object} [options.fetchOptions] Values passed along to the\n     * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)\n     * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)\n     * `fetch()` requests made by this strategy.\n     * @param {Object} [options.matchOptions] [`CacheQueryOptions`](https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions)\n     * @param {number} [options.networkTimeoutSeconds] If set, any network requests\n     * that fail to respond within the timeout will fallback to the cache.\n     *\n     * This option can be used to combat\n     * \"[lie-fi]{@link https://developers.google.com/web/fundamentals/performance/poor-connectivity/#lie-fi}\"\n     * scenarios.\n     */\n    constructor(options = {}) {\n        super(options);\n        // If this instance contains no plugins with a 'cacheWillUpdate' callback,\n        // prepend the `cacheOkAndOpaquePlugin` plugin to the plugins list.\n        if (!this.plugins.some((p) => 'cacheWillUpdate' in p)) {\n            this.plugins.unshift(cacheOkAndOpaquePlugin);\n        }\n        this._networkTimeoutSeconds = options.networkTimeoutSeconds || 0;\n        if (process.env.NODE_ENV !== 'production') {\n            if (this._networkTimeoutSeconds) {\n                assert.isType(this._networkTimeoutSeconds, 'number', {\n                    moduleName: 'workbox-strategies',\n                    className: this.constructor.name,\n                    funcName: 'constructor',\n                    paramName: 'networkTimeoutSeconds',\n                });\n            }\n        }\n    }\n    /**\n     * @private\n     * @param {Request|string} request A request to run this strategy for.\n     * @param {workbox-strategies.StrategyHandler} handler The event that\n     *     triggered the request.\n     * @return {Promise<Response>}\n     */\n    async _handle(request, handler) {\n        const logs = [];\n        if (process.env.NODE_ENV !== 'production') {\n            assert.isInstance(request, Request, {\n                moduleName: 'workbox-strategies',\n                className: this.constructor.name,\n                funcName: 'handle',\n                paramName: 'makeRequest',\n            });\n        }\n        const promises = [];\n        let timeoutId;\n        if (this._networkTimeoutSeconds) {\n            const { id, promise } = this._getTimeoutPromise({ request, logs, handler });\n            timeoutId = id;\n            promises.push(promise);\n        }\n        const networkPromise = this._getNetworkPromise({\n            timeoutId,\n            request,\n            logs,\n            handler,\n        });\n        promises.push(networkPromise);\n        const response = await handler.waitUntil((async () => {\n            // Promise.race() will resolve as soon as the first promise resolves.\n            return ((await handler.waitUntil(Promise.race(promises))) ||\n                // If Promise.race() resolved with null, it might be due to a network\n                // timeout + a cache miss. If that were to happen, we'd rather wait until\n                // the networkPromise resolves instead of returning null.\n                // Note that it's fine to await an already-resolved promise, so we don't\n                // have to check to see if it's still \"in flight\".\n                (await networkPromise));\n        })());\n        if (process.env.NODE_ENV !== 'production') {\n            logger.groupCollapsed(messages.strategyStart(this.constructor.name, request));\n            for (const log of logs) {\n                logger.log(log);\n            }\n            messages.printFinalResponse(response);\n            logger.groupEnd();\n        }\n        if (!response) {\n            throw new WorkboxError('no-response', { url: request.url });\n        }\n        return response;\n    }\n    /**\n     * @param {Object} options\n     * @param {Request} options.request\n     * @param {Array} options.logs A reference to the logs array\n     * @param {Event} options.event\n     * @return {Promise<Response>}\n     *\n     * @private\n     */\n    _getTimeoutPromise({ request, logs, handler, }) {\n        let timeoutId;\n        const timeoutPromise = new Promise((resolve) => {\n            const onNetworkTimeout = async () => {\n                if (process.env.NODE_ENV !== 'production') {\n                    logs.push(`Timing out the network response at ` +\n                        `${this._networkTimeoutSeconds} seconds.`);\n                }\n                resolve(await handler.cacheMatch(request));\n            };\n            timeoutId = setTimeout(onNetworkTimeout, this._networkTimeoutSeconds * 1000);\n        });\n        return {\n            promise: timeoutPromise,\n            id: timeoutId,\n        };\n    }\n    /**\n     * @param {Object} options\n     * @param {number|undefined} options.timeoutId\n     * @param {Request} options.request\n     * @param {Array} options.logs A reference to the logs Array.\n     * @param {Event} options.event\n     * @return {Promise<Response>}\n     *\n     * @private\n     */\n    async _getNetworkPromise({ timeoutId, request, logs, handler, }) {\n        let error;\n        let response;\n        try {\n            response = await handler.fetchAndCachePut(request);\n        }\n        catch (fetchError) {\n            if (fetchError instanceof Error) {\n                error = fetchError;\n            }\n        }\n        if (timeoutId) {\n            clearTimeout(timeoutId);\n        }\n        if (process.env.NODE_ENV !== 'production') {\n            if (response) {\n                logs.push(`Got response from network.`);\n            }\n            else {\n                logs.push(`Unable to get a response from the network. Will respond ` +\n                    `with a cached response.`);\n            }\n        }\n        if (error || !response) {\n            response = await handler.cacheMatch(request);\n            if (process.env.NODE_ENV !== 'production') {\n                if (response) {\n                    logs.push(`Found a cached response in the '${this.cacheName}'` + ` cache.`);\n                }\n                else {\n                    logs.push(`No response found in the '${this.cacheName}' cache.`);\n                }\n            }\n        }\n        return response;\n    }\n}\nexport { NetworkFirst };\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { assert } from 'workbox-core/_private/assert.js';\nimport { logger } from 'workbox-core/_private/logger.js';\nimport { timeout } from 'workbox-core/_private/timeout.js';\nimport { WorkboxError } from 'workbox-core/_private/WorkboxError.js';\nimport { Strategy } from './Strategy.js';\nimport { messages } from './utils/messages.js';\nimport './_version.js';\n/**\n * An implementation of a\n * [network-only](https://developer.chrome.com/docs/workbox/caching-strategies-overview/#network-only)\n * request strategy.\n *\n * This class is useful if you want to take advantage of any\n * [Workbox plugins](https://developer.chrome.com/docs/workbox/using-plugins/).\n *\n * If the network request fails, this will throw a `WorkboxError` exception.\n *\n * @extends workbox-strategies.Strategy\n * @memberof workbox-strategies\n */\nclass NetworkOnly extends Strategy {\n    /**\n     * @param {Object} [options]\n     * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}\n     * to use in conjunction with this caching strategy.\n     * @param {Object} [options.fetchOptions] Values passed along to the\n     * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)\n     * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)\n     * `fetch()` requests made by this strategy.\n     * @param {number} [options.networkTimeoutSeconds] If set, any network requests\n     * that fail to respond within the timeout will result in a network error.\n     */\n    constructor(options = {}) {\n        super(options);\n        this._networkTimeoutSeconds = options.networkTimeoutSeconds || 0;\n    }\n    /**\n     * @private\n     * @param {Request|string} request A request to run this strategy for.\n     * @param {workbox-strategies.StrategyHandler} handler The event that\n     *     triggered the request.\n     * @return {Promise<Response>}\n     */\n    async _handle(request, handler) {\n        if (process.env.NODE_ENV !== 'production') {\n            assert.isInstance(request, Request, {\n                moduleName: 'workbox-strategies',\n                className: this.constructor.name,\n                funcName: '_handle',\n                paramName: 'request',\n            });\n        }\n        let error = undefined;\n        let response;\n        try {\n            const promises = [\n                handler.fetch(request),\n            ];\n            if (this._networkTimeoutSeconds) {\n                const timeoutPromise = timeout(this._networkTimeoutSeconds * 1000);\n                promises.push(timeoutPromise);\n            }\n            response = await Promise.race(promises);\n            if (!response) {\n                throw new Error(`Timed out the network response after ` +\n                    `${this._networkTimeoutSeconds} seconds.`);\n            }\n        }\n        catch (err) {\n            if (err instanceof Error) {\n                error = err;\n            }\n        }\n        if (process.env.NODE_ENV !== 'production') {\n            logger.groupCollapsed(messages.strategyStart(this.constructor.name, request));\n            if (response) {\n                logger.log(`Got response from network.`);\n            }\n            else {\n                logger.log(`Unable to get a response from the network.`);\n            }\n            messages.printFinalResponse(response);\n            logger.groupEnd();\n        }\n        if (!response) {\n            throw new WorkboxError('no-response', { url: request.url, error });\n        }\n        return response;\n    }\n}\nexport { NetworkOnly };\n","/*\n  Copyright 2019 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport './_version.js';\n/**\n * Claim any currently available clients once the service worker\n * becomes active. This is normally used in conjunction with `skipWaiting()`.\n *\n * @memberof workbox-core\n */\nfunction clientsClaim() {\n    self.addEventListener('activate', () => self.clients.claim());\n}\nexport { clientsClaim };\n"],"names":["self","_","e","logger","__WB_DISABLE_DEV_LOGS","inGroup","methodToColorMap","debug","log","warn","error","groupCollapsed","groupEnd","print","method","args","test","navigator","userAgent","console","styles","logPrefix","join","api","loggerMethods","Object","keys","key","messages","paramName","validValueDescription","value","Error","JSON","stringify","moduleName","className","funcName","expectedType","classNameStr","expectedClassName","isReturnValueProblem","expectedMethod","entry","firstEntry","secondEntry","thrownErrorMessage","cacheNameId","name","methodName","expectedClass","normalizedRangeHeader","size","start","end","url","message","status","cacheName","origin","type","generatorFunction","code","details","messageGenerator","WorkboxError","constructor","errorCode","isArray","Array","hasMethod","object","isType","isInstance","isOneOf","validValues","includes","isArrayOfClass","item","finalAssertExports","defaultMethod","validMethods","normalizeHandler","handler","assert","handle","Route","match","setCatchHandler","catchHandler","RegExpRoute","regExp","RegExp","result","exec","href","location","index","toString","slice","getFriendlyURL","urlObj","URL","String","replace","Router","_routes","Map","_defaultHandlerMap","routes","addFetchListener","addEventListener","event","request","responsePromise","handleRequest","respondWith","addCacheListener","data","payload","urlsToCache","requestPromises","Promise","all","map","Request","waitUntil","ports","then","postMessage","protocol","startsWith","sameOrigin","params","route","findMatchingRoute","debugMessages","push","has","get","forEach","msg","err","reject","_catchHandler","catch","catchErr","matchResult","length","undefined","setDefaultHandler","set","registerRoute","unregisterRoute","routeIndex","indexOf","splice","defaultRouter","getOrCreateDefaultRouter","capture","captureUrl","valueToCheck","pathname","wildcards","matchCallback","cacheOkAndOpaquePlugin","cacheWillUpdate","response","_cacheNameDetails","googleAnalytics","precache","prefix","runtime","suffix","registration","scope","_createCacheName","filter","eachCacheNameDetail","fn","cacheNames","updateDetails","getGoogleAnalyticsName","userCacheName","getPrecacheName","getPrefix","getRuntimeName","getSuffix","stripParams","fullURL","ignoreParams","strippedURL","param","searchParams","delete","cacheMatchIgnoreParams","cache","matchOptions","strippedRequestURL","keysOptions","assign","ignoreSearch","cacheKeys","cacheKey","strippedCacheKeyURL","Deferred","promise","resolve","quotaErrorCallbacks","Set","executeQuotaErrorCallbacks","callback","timeout","ms","setTimeout","toRequest","input","StrategyHandler","strategy","options","_cacheKeys","ExtendableEvent","_strategy","_handlerDeferred","_extendLifetimePromises","_plugins","plugins","_pluginStateMap","plugin","fetch","mode","FetchEvent","preloadResponse","possiblePreloadResponse","originalRequest","hasCallback","clone","cb","iterateCallbacks","pluginFilteredRequest","fetchResponse","fetchOptions","runCallbacks","fetchAndCachePut","responseClone","cachePut","cacheMatch","cachedResponse","effectiveRequest","getCacheKey","multiMatchOptions","caches","vary","headers","responseToCache","_ensureResponseSafeToCache","open","hasCacheUpdateCallback","oldResponse","put","newResponse","state","statefulCallback","statefulParam","doneWaiting","shift","destroy","pluginsUsed","Strategy","responseDone","handleAll","_getResponse","handlerDone","_awaitComplete","_handle","waitUntilError","strategyStart","strategyName","printFinalResponse","NetworkFirst","some","p","unshift","_networkTimeoutSeconds","networkTimeoutSeconds","logs","promises","timeoutId","id","_getTimeoutPromise","networkPromise","_getNetworkPromise","race","timeoutPromise","onNetworkTimeout","fetchError","clearTimeout","NetworkOnly","clientsClaim","clients","claim"],"mappings":";;IACA;IACA,IAAI;IACAA,EAAAA,IAAI,CAAC,oBAAoB,CAAC,IAAIC,CAAC,EAAE,CAAA;IACrC,CAAC,CACD,OAAOC,CAAC,EAAE;;ICLV;IACA;IACA;IACA;IACA;IACA;IAEA,MAAMC,MAAM,GAEN,CAAC,MAAM;IACL;IACA;IACA,EAAA,IAAI,EAAE,uBAAuB,IAAIH,IAAI,CAAC,EAAE;QACpCA,IAAI,CAACI,qBAAqB,GAAG,KAAK,CAAA;IACtC,GAAA;MACA,IAAIC,OAAO,GAAG,KAAK,CAAA;IACnB,EAAA,MAAMC,gBAAgB,GAAG;IACrBC,IAAAA,KAAK,EAAG,CAAQ,OAAA,CAAA;IAChBC,IAAAA,GAAG,EAAG,CAAQ,OAAA,CAAA;IACdC,IAAAA,IAAI,EAAG,CAAQ,OAAA,CAAA;IACfC,IAAAA,KAAK,EAAG,CAAQ,OAAA,CAAA;IAChBC,IAAAA,cAAc,EAAG,CAAQ,OAAA,CAAA;QACzBC,QAAQ,EAAE,IAAI;OACjB,CAAA;;IACD,EAAA,MAAMC,KAAK,GAAG,UAAUC,MAAM,EAAEC,IAAI,EAAE;QAClC,IAAIf,IAAI,CAACI,qBAAqB,EAAE;IAC5B,MAAA,OAAA;IACJ,KAAA;QACA,IAAIU,MAAM,KAAK,gBAAgB,EAAE;IAC7B;IACA;UACA,IAAI,gCAAgC,CAACE,IAAI,CAACC,SAAS,CAACC,SAAS,CAAC,EAAE;IAC5DC,QAAAA,OAAO,CAACL,MAAM,CAAC,CAAC,GAAGC,IAAI,CAAC,CAAA;IACxB,QAAA,OAAA;IACJ,OAAA;IACJ,KAAA;IACA,IAAA,MAAMK,MAAM,GAAG,CACV,CAAcd,YAAAA,EAAAA,gBAAgB,CAACQ,MAAM,CAAE,CAAC,CAAA,EACxC,sBAAqB,EACrB,CAAA,YAAA,CAAa,EACb,CAAkB,iBAAA,CAAA,EAClB,oBAAmB,CACvB,CAAA;IACD;IACA,IAAA,MAAMO,SAAS,GAAGhB,OAAO,GAAG,EAAE,GAAG,CAAC,WAAW,EAAEe,MAAM,CAACE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;QAChEH,OAAO,CAACL,MAAM,CAAC,CAAC,GAAGO,SAAS,EAAE,GAAGN,IAAI,CAAC,CAAA;QACtC,IAAID,MAAM,KAAK,gBAAgB,EAAE;IAC7BT,MAAAA,OAAO,GAAG,IAAI,CAAA;IAClB,KAAA;QACA,IAAIS,MAAM,KAAK,UAAU,EAAE;IACvBT,MAAAA,OAAO,GAAG,KAAK,CAAA;IACnB,KAAA;OACH,CAAA;IACD;MACA,MAAMkB,GAAG,GAAG,EAAE,CAAA;IACd,EAAA,MAAMC,aAAa,GAAGC,MAAM,CAACC,IAAI,CAACpB,gBAAgB,CAAC,CAAA;IACnD,EAAA,KAAK,MAAMqB,GAAG,IAAIH,aAAa,EAAE;QAC7B,MAAMV,MAAM,GAAGa,GAAG,CAAA;IAClBJ,IAAAA,GAAG,CAACT,MAAM,CAAC,GAAG,CAAC,GAAGC,IAAI,KAAK;IACvBF,MAAAA,KAAK,CAACC,MAAM,EAAEC,IAAI,CAAC,CAAA;SACtB,CAAA;IACL,GAAA;IACA,EAAA,OAAOQ,GAAG,CAAA;IACd,CAAC,GAAI;;IC/DT;IACA;AACA;IACA;IACA;IACA;IACA;IAEO,MAAMK,UAAQ,GAAG;IACpB,EAAA,eAAe,EAAE,CAAC;QAAEC,SAAS;QAAEC,qBAAqB;IAAEC,IAAAA,KAAAA;IAAM,GAAC,KAAK;IAC9D,IAAA,IAAI,CAACF,SAAS,IAAI,CAACC,qBAAqB,EAAE;IACtC,MAAA,MAAM,IAAIE,KAAK,CAAE,CAAA,0CAAA,CAA2C,CAAC,CAAA;IACjE,KAAA;IACA,IAAA,OAAS,CAAOH,KAAAA,EAAAA,SAAU,CAAuC,sCAAA,CAAA,GAC5D,qBAAoBC,qBAAsB,CAAA,qBAAA,CAAsB,GAChE,CAAA,EAAEG,IAAI,CAACC,SAAS,CAACH,KAAK,CAAE,CAAE,CAAA,CAAA,CAAA;OAClC;IACD,EAAA,cAAc,EAAE,CAAC;QAAEI,UAAU;QAAEC,SAAS;QAAEC,QAAQ;IAAER,IAAAA,SAAAA;IAAU,GAAC,KAAK;QAChE,IAAI,CAACM,UAAU,IAAI,CAACC,SAAS,IAAI,CAACC,QAAQ,IAAI,CAACR,SAAS,EAAE;IACtD,MAAA,MAAM,IAAIG,KAAK,CAAE,CAAA,yCAAA,CAA0C,CAAC,CAAA;IAChE,KAAA;QACA,OAAS,CAAA,eAAA,EAAiBH,SAAU,CAAA,cAAA,CAAe,GAC9C,CAAA,CAAA,EAAGM,UAAW,CAAGC,CAAAA,EAAAA,SAAU,CAAGC,CAAAA,EAAAA,QAAS,CAAsB,qBAAA,CAAA,CAAA;OACrE;IACD,EAAA,gBAAgB,EAAE,CAAC;QAAEC,YAAY;QAAET,SAAS;QAAEM,UAAU;QAAEC,SAAS;IAAEC,IAAAA,QAAAA;IAAU,GAAC,KAAK;QACjF,IAAI,CAACC,YAAY,IAAI,CAACT,SAAS,IAAI,CAACM,UAAU,IAAI,CAACE,QAAQ,EAAE;IACzD,MAAA,MAAM,IAAIL,KAAK,CAAE,CAAA,2CAAA,CAA4C,CAAC,CAAA;IAClE,KAAA;QACA,MAAMO,YAAY,GAAGH,SAAS,GAAI,GAAEA,SAAU,CAAA,CAAA,CAAE,GAAG,EAAE,CAAA;IACrD,IAAA,OAAS,CAAiBP,eAAAA,EAAAA,SAAU,CAAe,cAAA,CAAA,GAC9C,IAAGM,UAAW,CAAA,CAAA,EAAGI,YAAa,CAAA,CAAC,GAC/B,CAAA,EAAEF,QAAS,CAAA,oBAAA,EAAsBC,YAAa,CAAE,CAAA,CAAA,CAAA;OACxD;IACD,EAAA,iBAAiB,EAAE,CAAC;QAAEE,iBAAiB;QAAEX,SAAS;QAAEM,UAAU;QAAEC,SAAS;QAAEC,QAAQ;IAAEI,IAAAA,oBAAAA;IAAsB,GAAC,KAAK;QAC7G,IAAI,CAACD,iBAAiB,IAAI,CAACL,UAAU,IAAI,CAACE,QAAQ,EAAE;IAChD,MAAA,MAAM,IAAIL,KAAK,CAAE,CAAA,4CAAA,CAA6C,CAAC,CAAA;IACnE,KAAA;QACA,MAAMO,YAAY,GAAGH,SAAS,GAAI,GAAEA,SAAU,CAAA,CAAA,CAAE,GAAG,EAAE,CAAA;IACrD,IAAA,IAAIK,oBAAoB,EAAE;IACtB,MAAA,OAAS,CAAuB,sBAAA,CAAA,GAC3B,CAAGN,CAAAA,EAAAA,UAAW,CAAGI,CAAAA,EAAAA,YAAa,CAAEF,EAAAA,QAAS,CAAK,IAAA,CAAA,GAC9C,CAA+BG,6BAAAA,EAAAA,iBAAkB,CAAE,CAAA,CAAA,CAAA;IAC5D,KAAA;IACA,IAAA,OAAS,CAAiBX,eAAAA,EAAAA,SAAU,CAAe,cAAA,CAAA,GAC9C,IAAGM,UAAW,CAAA,CAAA,EAAGI,YAAa,CAAA,EAAEF,QAAS,CAAA,IAAA,CAAK,GAC9C,CAAA,6BAAA,EAA+BG,iBAAkB,CAAE,CAAA,CAAA,CAAA;OAC3D;IACD,EAAA,kBAAkB,EAAE,CAAC;QAAEE,cAAc;QAAEb,SAAS;QAAEM,UAAU;QAAEC,SAAS;IAAEC,IAAAA,QAAAA;IAAU,GAAC,KAAK;IACrF,IAAA,IAAI,CAACK,cAAc,IACf,CAACb,SAAS,IACV,CAACM,UAAU,IACX,CAACC,SAAS,IACV,CAACC,QAAQ,EAAE;IACX,MAAA,MAAM,IAAIL,KAAK,CAAE,CAAA,6CAAA,CAA8C,CAAC,CAAA;IACpE,KAAA;IACA,IAAA,OAAS,CAAEG,EAAAA,UAAW,CAAGC,CAAAA,EAAAA,SAAU,CAAGC,CAAAA,EAAAA,QAAS,CAAiB,gBAAA,CAAA,GAC3D,CAAGR,CAAAA,EAAAA,SAAU,CAA2Ba,yBAAAA,EAAAA,cAAe,CAAU,SAAA,CAAA,CAAA;OACzE;IACD,EAAA,mCAAmC,EAAE,CAAC;IAAEC,IAAAA,KAAAA;IAAM,GAAC,KAAK;IAChD,IAAA,OAAS,CAAmC,kCAAA,CAAA,GACvC,CAAoE,mEAAA,CAAA,GACpE,IAAGV,IAAI,CAACC,SAAS,CAACS,KAAK,CAAE,CAAA,+CAAA,CAAgD,GACzE,CAAA,oEAAA,CAAqE,GACrE,CAAiB,gBAAA,CAAA,CAAA;OACzB;IACD,EAAA,uCAAuC,EAAE,CAAC;QAAEC,UAAU;IAAEC,IAAAA,WAAAA;IAAY,GAAC,KAAK;IACtE,IAAA,IAAI,CAACD,UAAU,IAAI,CAACC,WAAW,EAAE;IAC7B,MAAA,MAAM,IAAIb,KAAK,CAAE,CAAqB,oBAAA,CAAA,GAAI,8CAA6C,CAAC,CAAA;IAC5F,KAAA;QACA,OAAS,CAAA,6BAAA,CAA8B,GAClC,CAAA,qEAAA,CAAsE,GACtE,CAAA,EAAEY,UAAW,CAA6C,4CAAA,CAAA,GAC1D,CAAoE,mEAAA,CAAA,GACpE,CAAgB,eAAA,CAAA,CAAA;OACxB;IACD,EAAA,iCAAiC,EAAE,CAAC;IAAEE,IAAAA,kBAAAA;IAAmB,GAAC,KAAK;QAC3D,IAAI,CAACA,kBAAkB,EAAE;IACrB,MAAA,MAAM,IAAId,KAAK,CAAE,CAAqB,oBAAA,CAAA,GAAI,2CAA0C,CAAC,CAAA;IACzF,KAAA;IACA,IAAA,OAAS,CAA+D,8DAAA,CAAA,GACnE,CAAiCc,+BAAAA,EAAAA,kBAAmB,CAAG,EAAA,CAAA,CAAA;OAC/D;IACD,EAAA,oBAAoB,EAAE,CAAC;QAAEC,WAAW;IAAEhB,IAAAA,KAAAA;IAAM,GAAC,KAAK;QAC9C,IAAI,CAACgB,WAAW,EAAE;IACd,MAAA,MAAM,IAAIf,KAAK,CAAE,CAAA,uDAAA,CAAwD,CAAC,CAAA;IAC9E,KAAA;IACA,IAAA,OAAS,CAA+D,8DAAA,CAAA,GACnE,CAAmBe,iBAAAA,EAAAA,WAAY,CAAgC,+BAAA,CAAA,GAC/D,CAAGd,CAAAA,EAAAA,IAAI,CAACC,SAAS,CAACH,KAAK,CAAE,CAAE,CAAA,CAAA,CAAA;OACnC;IACD,EAAA,4CAA4C,EAAE,CAAC;IAAEjB,IAAAA,MAAAA;IAAO,GAAC,KAAK;QAC1D,IAAI,CAACA,MAAM,EAAE;IACT,MAAA,MAAM,IAAIkB,KAAK,CAAE,CAAqB,oBAAA,CAAA,GACjC,qDAAoD,CAAC,CAAA;IAC9D,KAAA;IACA,IAAA,OAAS,CAA2D,0DAAA,CAAA,GAC/D,CAAkClB,gCAAAA,EAAAA,MAAO,CAAG,EAAA,CAAA,CAAA;OACpD;IACD,EAAA,uCAAuC,EAAE,MAAM;QAC3C,OAAS,CAAA,yDAAA,CAA0D,GAC9D,CAAY,WAAA,CAAA,CAAA;OACpB;IACD,EAAA,qBAAqB,EAAE,CAAC;IAAEkC,IAAAA,IAAAA;IAAK,GAAC,KAAK;QACjC,OAAQ,CAAA,qCAAA,EAAuCA,IAAK,CAAU,SAAA,CAAA,CAAA;OACjE;IACD,EAAA,sBAAsB,EAAE,CAAC;IAAEA,IAAAA,IAAAA;IAAK,GAAC,KAAK;IAClC,IAAA,OAAS,CAAkBA,gBAAAA,EAAAA,IAAK,CAA0B,yBAAA,CAAA,GACrD,CAAkE,iEAAA,CAAA,CAAA;OAC1E;IACD,EAAA,8BAA8B,EAAE,CAAC;QAAEC,UAAU;IAAEpB,IAAAA,SAAAA;IAAU,GAAC,KAAK;IAC3D,IAAA,OAAS,QAAOoB,UAAW,CAAA,qCAAA,CAAsC,GAC5D,CAAA,CAAA,EAAGpB,SAAU,CAA8B,6BAAA,CAAA,CAAA;OACnD;IACD,EAAA,wBAAwB,EAAE,CAAC;QAAEM,UAAU;QAAEC,SAAS;QAAEC,QAAQ;IAAER,IAAAA,SAAAA;IAAU,GAAC,KAAK;IAC1E,IAAA,OAAS,CAAgBA,cAAAA,EAAAA,SAAU,CAAsC,qCAAA,CAAA,GACpE,CAA4BM,0BAAAA,EAAAA,UAAW,CAAGC,CAAAA,EAAAA,SAAU,CAAGC,CAAAA,EAAAA,QAAS,CAAM,KAAA,CAAA,GACtE,CAAmB,kBAAA,CAAA,CAAA;OAC3B;IACD,EAAA,oBAAoB,EAAE,CAAC;QAAEN,KAAK;QAAEmB,aAAa;QAAEf,UAAU;QAAEC,SAAS;QAAEC,QAAQ;IAAER,IAAAA,SAAAA;IAAW,GAAC,KAAK;QAC7F,OAAS,CAAA,cAAA,EAAgBA,SAAU,CAAiC,gCAAA,CAAA,GAC/D,IAAGqB,aAAc,CAAA,qBAAA,EAAuBjB,IAAI,CAACC,SAAS,CAACH,KAAK,CAAE,CAAA,IAAA,CAAK,GACnE,CAAA,yBAAA,EAA2BI,UAAW,CAAA,CAAA,EAAGC,SAAU,CAAGC,CAAAA,EAAAA,QAAS,CAAI,GAAA,CAAA,GACnE,CAAkB,iBAAA,CAAA,CAAA;OAC1B;IACD,EAAA,6BAA6B,EAAE,CAAC;QAAEF,UAAU;QAAEC,SAAS;IAAEC,IAAAA,QAAAA;IAAS,GAAC,KAAK;QACpE,OAAS,CAAA,gEAAA,CAAiE,GACrE,CAAKF,GAAAA,EAAAA,UAAW,IAAGC,SAAU,CAAA,CAAA,EAAGC,QAAS,CAAC,CAAA,CAAA;OAClD;IACD,EAAA,8BAA8B,EAAE,CAAC;QAAEF,UAAU;QAAEC,SAAS;IAAEC,IAAAA,QAAAA;IAAS,GAAC,KAAK;QACrE,OAAS,CAAA,wDAAA,CAAyD,GAC7D,CAAKF,GAAAA,EAAAA,UAAW,IAAGC,SAAU,CAAA,CAAA,EAAGC,QAAS,CAAC,CAAA,CAAA;OAClD;IACD,EAAA,gBAAgB,EAAE,CAAC;QAAEF,UAAU;QAAEE,QAAQ;IAAER,IAAAA,SAAAA;IAAU,GAAC,KAAK;QACvD,IAAI,CAACA,SAAS,IAAI,CAACM,UAAU,IAAI,CAACE,QAAQ,EAAE;IACxC,MAAA,MAAM,IAAIL,KAAK,CAAE,CAAA,2CAAA,CAA4C,CAAC,CAAA;IAClE,KAAA;IACA,IAAA,OAAS,CAA2BH,yBAAAA,EAAAA,SAAU,CAA6B,4BAAA,CAAA,GACtE,CAAqE,oEAAA,CAAA,GACrE,CAA0BM,wBAAAA,EAAAA,UAAW,CAAGE,CAAAA,EAAAA,QAAS,CAAQ,OAAA,CAAA,GACzD,CAAW,UAAA,CAAA,CAAA;OACnB;IACD,EAAA,uBAAuB,EAAE,MAAM;QAC3B,OAAS,CAAA,8CAAA,CAA+C,GACnD,CAA+B,8BAAA,CAAA,CAAA;OACvC;IACD,EAAA,iCAAiC,EAAE,MAAM;QACrC,OAAS,CAAA,0DAAA,CAA2D,GAC/D,CAAiD,gDAAA,CAAA,CAAA;OACzD;IACD,EAAA,2BAA2B,EAAE,MAAM;QAC/B,OAAS,CAAA,uDAAA,CAAwD,GAC5D,CAAmD,kDAAA,CAAA,CAAA;OAC3D;IACD,EAAA,oBAAoB,EAAE,CAAC;IAAEc,IAAAA,qBAAAA;IAAsB,GAAC,KAAK;QACjD,IAAI,CAACA,qBAAqB,EAAE;IACxB,MAAA,MAAM,IAAInB,KAAK,CAAE,CAAA,+CAAA,CAAgD,CAAC,CAAA;IACtE,KAAA;IACA,IAAA,OAAS,CAAgE,+DAAA,CAAA,GACpE,CAAiCmB,+BAAAA,EAAAA,qBAAsB,CAAE,CAAA,CAAA,CAAA;OACjE;IACD,EAAA,mBAAmB,EAAE,CAAC;IAAEA,IAAAA,qBAAAA;IAAsB,GAAC,KAAK;QAChD,IAAI,CAACA,qBAAqB,EAAE;IACxB,MAAA,MAAM,IAAInB,KAAK,CAAE,CAAA,8CAAA,CAA+C,CAAC,CAAA;IACrE,KAAA;IACA,IAAA,OAAS,gEAA+D,GACnE,CAAA,6DAAA,CAA8D,GAC9D,CAAA,CAAA,EAAGmB,qBAAsB,CAAE,CAAA,CAAA,CAAA;OACnC;IACD,EAAA,sBAAsB,EAAE,CAAC;IAAEA,IAAAA,qBAAAA;IAAsB,GAAC,KAAK;QACnD,IAAI,CAACA,qBAAqB,EAAE;IACxB,MAAA,MAAM,IAAInB,KAAK,CAAE,CAAA,iDAAA,CAAkD,CAAC,CAAA;IACxE,KAAA;IACA,IAAA,OAAS,kEAAiE,GACrE,CAAA,6DAAA,CAA8D,GAC9D,CAAA,CAAA,EAAGmB,qBAAsB,CAAE,CAAA,CAAA,CAAA;OACnC;IACD,EAAA,iBAAiB,EAAE,MAAM;IACrB,IAAA,OAAQ,CAAmD,kDAAA,CAAA,CAAA;OAC9D;IACD,EAAA,uBAAuB,EAAE,CAAC;QAAEC,IAAI;QAAEC,KAAK;IAAEC,IAAAA,GAAAA;IAAI,GAAC,KAAK;QAC/C,OAAS,CAAA,WAAA,EAAaD,KAAM,CAAaC,WAAAA,EAAAA,GAAI,4BAA2B,GACnE,CAAA,iDAAA,EAAmDF,IAAK,CAAQ,OAAA,CAAA,CAAA;OACxE;IACD,EAAA,kCAAkC,EAAE,CAAC;QAAEG,GAAG;IAAEzC,IAAAA,MAAAA;IAAO,GAAC,KAAK;IACrD,IAAA,OAAS,oBAAmByC,GAAI,CAAA,mBAAA,EAAqBzC,MAAO,CAAA,cAAA,CAAe,GACtE,CAAmC,kCAAA,CAAA,CAAA;OAC3C;IACD,EAAA,4BAA4B,EAAE,CAAC;IAAEyC,IAAAA,GAAAA;IAAI,GAAC,KAAK;IACvC,IAAA,OAAS,CAAiCA,+BAAAA,EAAAA,GAAI,CAA4B,2BAAA,CAAA,GACrE,CAAS,QAAA,CAAA,CAAA;OACjB;IACD,EAAA,aAAa,EAAE,CAAC;QAAEA,GAAG;IAAE7C,IAAAA,KAAAA;IAAM,GAAC,KAAK;IAC/B,IAAA,IAAI8C,OAAO,GAAI,CAAkDD,gDAAAA,EAAAA,GAAI,CAAG,EAAA,CAAA,CAAA;IACxE,IAAA,IAAI7C,KAAK,EAAE;UACP8C,OAAO,IAAK,CAA2B9C,yBAAAA,EAAAA,KAAM,CAAE,CAAA,CAAA,CAAA;IACnD,KAAA;IACA,IAAA,OAAO8C,OAAO,CAAA;OACjB;IACD,EAAA,yBAAyB,EAAE,CAAC;QAAED,GAAG;IAAEE,IAAAA,MAAAA;IAAO,GAAC,KAAK;QAC5C,OAAS,CAAA,4BAAA,EAA8BF,GAAI,CAAA,QAAA,CAAS,IAC/CE,MAAM,GAAI,CAAA,wBAAA,EAA0BA,MAAO,CAAA,CAAA,CAAE,GAAI,CAAA,CAAA,CAAE,CAAC,CAAA;OAC5D;IACD,EAAA,mBAAmB,EAAE,CAAC;IAAEF,IAAAA,GAAAA;IAAI,GAAC,KAAK;IAC9B,IAAA,OAAS,CAA2BA,yBAAAA,EAAAA,GAAI,CAAgC,+BAAA,CAAA,GACnE,CAA+D,8DAAA,CAAA,CAAA;OACvE;IACD,EAAA,2CAA2C,EAAE,CAAC;IAAEA,IAAAA,GAAAA;IAAI,GAAC,KAAK;IACtD,IAAA,OAAS,+BAA8B,GAClC,CAAA,qEAAA,CAAsE,GACtE,CAAA,EAAEA,GAAI,CAA6D,4DAAA,CAAA,CAAA;OAC3E;IACD,EAAA,wBAAwB,EAAE,CAAC;QAAEG,SAAS;IAAEH,IAAAA,GAAAA;IAAI,GAAC,KAAK;IAC9C,IAAA,OAAQ,CAAyCG,uCAAAA,EAAAA,SAAU,CAAOH,KAAAA,EAAAA,GAAI,CAAE,CAAA,CAAA,CAAA;OAC3E;IACD,EAAA,4BAA4B,EAAE,CAAC;IAAEI,IAAAA,MAAAA;IAAO,GAAC,KAAK;IAC1C,IAAA,OAAS,CAA+D,8DAAA,CAAA,GACnE,CAAkDA,gDAAAA,EAAAA,MAAO,CAAE,CAAA,CAAA,CAAA;OACnE;IACD,EAAA,uBAAuB,EAAE,CAAC;IAAEC,IAAAA,IAAAA;IAAK,GAAC,KAAK;IACnC,IAAA,MAAMJ,OAAO,GAAI,CAAA,kDAAA,CAAmD,GAC/D,CAAA,CAAA,EAAGI,IAAK,CAAY,WAAA,CAAA,CAAA;QACzB,IAAIA,IAAI,KAAK,gBAAgB,EAAE;IAC3B,MAAA,OAAS,CAAEJ,EAAAA,OAAQ,CAAsD,qDAAA,CAAA,GACpE,CAA2B,0BAAA,CAAA,CAAA;IACpC,KAAA;QACA,OAAQ,CAAA,EAAEA,OAAQ,CAA8C,6CAAA,CAAA,CAAA;IACpE,GAAA;IACJ,CAAC;;ICnOD;IACA;AACA;IACA;IACA;IACA;IACA;IAUA,MAAMK,iBAAiB,GAAG,CAACC,IAAI,EAAEC,OAAO,GAAG,EAAE,KAAK;IAC9C,EAAA,MAAMP,OAAO,GAAG5B,UAAQ,CAACkC,IAAI,CAAC,CAAA;MAC9B,IAAI,CAACN,OAAO,EAAE;IACV,IAAA,MAAM,IAAIxB,KAAK,CAAE,CAAmC8B,iCAAAA,EAAAA,IAAK,IAAG,CAAC,CAAA;IACjE,GAAA;MACA,OAAON,OAAO,CAACO,OAAO,CAAC,CAAA;IAC3B,CAAC,CAAA;IACM,MAAMC,gBAAgB,GAAsDH,iBAAiB;;ICvBpG;IACA;AACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAMI,YAAY,SAASjC,KAAK,CAAC;IAC7B;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACIkC,EAAAA,WAAW,CAACC,SAAS,EAAEJ,OAAO,EAAE;IAC5B,IAAA,MAAMP,OAAO,GAAGQ,gBAAgB,CAACG,SAAS,EAAEJ,OAAO,CAAC,CAAA;QACpD,KAAK,CAACP,OAAO,CAAC,CAAA;QACd,IAAI,CAACR,IAAI,GAAGmB,SAAS,CAAA;QACrB,IAAI,CAACJ,OAAO,GAAGA,OAAO,CAAA;IAC1B,GAAA;IACJ;;ICjCA;IACA;AACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA,MAAMK,OAAO,GAAG,CAACrC,KAAK,EAAEgC,OAAO,KAAK;IAChC,EAAA,IAAI,CAACM,KAAK,CAACD,OAAO,CAACrC,KAAK,CAAC,EAAE;IACvB,IAAA,MAAM,IAAIkC,YAAY,CAAC,cAAc,EAAEF,OAAO,CAAC,CAAA;IACnD,GAAA;IACJ,CAAC,CAAA;IACD,MAAMO,SAAS,GAAG,CAACC,MAAM,EAAE7B,cAAc,EAAEqB,OAAO,KAAK;IACnD,EAAA,MAAMH,IAAI,GAAG,OAAOW,MAAM,CAAC7B,cAAc,CAAC,CAAA;MAC1C,IAAIkB,IAAI,KAAK,UAAU,EAAE;IACrBG,IAAAA,OAAO,CAAC,gBAAgB,CAAC,GAAGrB,cAAc,CAAA;IAC1C,IAAA,MAAM,IAAIuB,YAAY,CAAC,kBAAkB,EAAEF,OAAO,CAAC,CAAA;IACvD,GAAA;IACJ,CAAC,CAAA;IACD,MAAMS,MAAM,GAAG,CAACD,MAAM,EAAEjC,YAAY,EAAEyB,OAAO,KAAK;IAC9C,EAAA,IAAI,OAAOQ,MAAM,KAAKjC,YAAY,EAAE;IAChCyB,IAAAA,OAAO,CAAC,cAAc,CAAC,GAAGzB,YAAY,CAAA;IACtC,IAAA,MAAM,IAAI2B,YAAY,CAAC,gBAAgB,EAAEF,OAAO,CAAC,CAAA;IACrD,GAAA;IACJ,CAAC,CAAA;IACD,MAAMU,UAAU,GAAG,CAACF,MAAM;IAC1B;IACA;IACArB,aAAa,EAAEa,OAAO,KAAK;IACvB,EAAA,IAAI,EAAEQ,MAAM,YAAYrB,aAAa,CAAC,EAAE;IACpCa,IAAAA,OAAO,CAAC,mBAAmB,CAAC,GAAGb,aAAa,CAACF,IAAI,CAAA;IACjD,IAAA,MAAM,IAAIiB,YAAY,CAAC,iBAAiB,EAAEF,OAAO,CAAC,CAAA;IACtD,GAAA;IACJ,CAAC,CAAA;IACD,MAAMW,OAAO,GAAG,CAAC3C,KAAK,EAAE4C,WAAW,EAAEZ,OAAO,KAAK;IAC7C,EAAA,IAAI,CAACY,WAAW,CAACC,QAAQ,CAAC7C,KAAK,CAAC,EAAE;QAC9BgC,OAAO,CAAC,uBAAuB,CAAC,GAAI,CAAA,iBAAA,EAAmB9B,IAAI,CAACC,SAAS,CAACyC,WAAW,CAAE,CAAE,CAAA,CAAA,CAAA;IACrF,IAAA,MAAM,IAAIV,YAAY,CAAC,eAAe,EAAEF,OAAO,CAAC,CAAA;IACpD,GAAA;IACJ,CAAC,CAAA;IACD,MAAMc,cAAc,GAAG,CAAC9C,KAAK;IAC7B;IACAmB,aAAa;IAAE;IACfa,OAAO,KAAK;MACR,MAAMrD,KAAK,GAAG,IAAIuD,YAAY,CAAC,oBAAoB,EAAEF,OAAO,CAAC,CAAA;IAC7D,EAAA,IAAI,CAACM,KAAK,CAACD,OAAO,CAACrC,KAAK,CAAC,EAAE;IACvB,IAAA,MAAMrB,KAAK,CAAA;IACf,GAAA;IACA,EAAA,KAAK,MAAMoE,IAAI,IAAI/C,KAAK,EAAE;IACtB,IAAA,IAAI,EAAE+C,IAAI,YAAY5B,aAAa,CAAC,EAAE;IAClC,MAAA,MAAMxC,KAAK,CAAA;IACf,KAAA;IACJ,GAAA;IACJ,CAAC,CAAA;IACD,MAAMqE,kBAAkB,GAElB;MACET,SAAS;MACTF,OAAO;MACPK,UAAU;MACVC,OAAO;MACPF,MAAM;IACNK,EAAAA,cAAAA;IACJ,CAAC;;ICtEL;IACA,IAAI;IACA7E,EAAAA,IAAI,CAAC,uBAAuB,CAAC,IAAIC,CAAC,EAAE,CAAA;IACxC,CAAC,CACD,OAAOC,CAAC,EAAE;;ICLV;IACA;AACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACO,MAAM8E,aAAa,GAAG,KAAK,CAAA;IAClC;IACA;IACA;IACA;IACA;IACA;IACA;IACO,MAAMC,YAAY,GAAG,CACxB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,OAAO,EACP,MAAM,EACN,KAAK,CACR;;IC/BD;IACA;AACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACO,MAAMC,gBAAgB,GAAIC,OAAO,IAAK;IACzC,EAAA,IAAIA,OAAO,IAAI,OAAOA,OAAO,KAAK,QAAQ,EAAE;QACG;IACvCC,MAAAA,kBAAM,CAACd,SAAS,CAACa,OAAO,EAAE,QAAQ,EAAE;IAChChD,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,OAAO;IAClBC,QAAAA,QAAQ,EAAE,aAAa;IACvBR,QAAAA,SAAS,EAAE,SAAA;IACf,OAAC,CAAC,CAAA;IACN,KAAA;IACA,IAAA,OAAOsD,OAAO,CAAA;IAClB,GAAC,MACI;QAC0C;IACvCC,MAAAA,kBAAM,CAACZ,MAAM,CAACW,OAAO,EAAE,UAAU,EAAE;IAC/BhD,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,OAAO;IAClBC,QAAAA,QAAQ,EAAE,aAAa;IACvBR,QAAAA,SAAS,EAAE,SAAA;IACf,OAAC,CAAC,CAAA;IACN,KAAA;QACA,OAAO;IAAEwD,MAAAA,MAAM,EAAEF,OAAAA;SAAS,CAAA;IAC9B,GAAA;IACJ,CAAC;;ICvCD;IACA;AACA;IACA;IACA;IACA;IACA;IAKA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAMG,KAAK,CAAC;IACR;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACIpB,WAAW,CAACqB,KAAK,EAAEJ,OAAO,EAAErE,MAAM,GAAGkE,aAAa,EAAE;QACL;IACvCI,MAAAA,kBAAM,CAACZ,MAAM,CAACe,KAAK,EAAE,UAAU,EAAE;IAC7BpD,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,OAAO;IAClBC,QAAAA,QAAQ,EAAE,aAAa;IACvBR,QAAAA,SAAS,EAAE,OAAA;IACf,OAAC,CAAC,CAAA;IACF,MAAA,IAAIf,MAAM,EAAE;IACRsE,QAAAA,kBAAM,CAACV,OAAO,CAAC5D,MAAM,EAAEmE,YAAY,EAAE;IAAEpD,UAAAA,SAAS,EAAE,QAAA;IAAS,SAAC,CAAC,CAAA;IACjE,OAAA;IACJ,KAAA;IACA;IACA;IACA,IAAA,IAAI,CAACsD,OAAO,GAAGD,gBAAgB,CAACC,OAAO,CAAC,CAAA;QACxC,IAAI,CAACI,KAAK,GAAGA,KAAK,CAAA;QAClB,IAAI,CAACzE,MAAM,GAAGA,MAAM,CAAA;IACxB,GAAA;IACA;IACJ;IACA;IACA;IACA;MACI0E,eAAe,CAACL,OAAO,EAAE;IACrB,IAAA,IAAI,CAACM,YAAY,GAAGP,gBAAgB,CAACC,OAAO,CAAC,CAAA;IACjD,GAAA;IACJ;;IC1DA;IACA;AACA;IACA;IACA;IACA;IACA;IAKA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAMO,WAAW,SAASJ,KAAK,CAAC;IAC5B;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACIpB,EAAAA,WAAW,CAACyB,MAAM,EAAER,OAAO,EAAErE,MAAM,EAAE;QACU;IACvCsE,MAAAA,kBAAM,CAACX,UAAU,CAACkB,MAAM,EAAEC,MAAM,EAAE;IAC9BzD,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,aAAa;IACxBC,QAAAA,QAAQ,EAAE,aAAa;IACvBR,QAAAA,SAAS,EAAE,SAAA;IACf,OAAC,CAAC,CAAA;IACN,KAAA;QACA,MAAM0D,KAAK,GAAG,CAAC;IAAEhC,MAAAA,GAAAA;IAAI,KAAC,KAAK;UACvB,MAAMsC,MAAM,GAAGF,MAAM,CAACG,IAAI,CAACvC,GAAG,CAACwC,IAAI,CAAC,CAAA;IACpC;UACA,IAAI,CAACF,MAAM,EAAE;IACT,QAAA,OAAA;IACJ,OAAA;IACA;IACA;IACA;IACA;IACA,MAAA,IAAItC,GAAG,CAACI,MAAM,KAAKqC,QAAQ,CAACrC,MAAM,IAAIkC,MAAM,CAACI,KAAK,KAAK,CAAC,EAAE;YACX;IACvC9F,UAAAA,MAAM,CAACI,KAAK,CAAE,2BAA0BoF,MAAM,CAACO,QAAQ,EAAG,CAAA,yBAAA,CAA0B,GAC/E,CAAA,8BAAA,EAAgC3C,GAAG,CAAC2C,QAAQ,EAAG,CAA4B,2BAAA,CAAA,GAC3E,4DAA2D,CAAC,CAAA;IACrE,SAAA;IACA,QAAA,OAAA;IACJ,OAAA;IACA;IACA;IACA;IACA;IACA,MAAA,OAAOL,MAAM,CAACM,KAAK,CAAC,CAAC,CAAC,CAAA;SACzB,CAAA;IACD,IAAA,KAAK,CAACZ,KAAK,EAAEJ,OAAO,EAAErE,MAAM,CAAC,CAAA;IACjC,GAAA;IACJ;;ICvEA;IACA;AACA;IACA;IACA;IACA;IACA;IAEA,MAAMsF,cAAc,GAAI7C,GAAG,IAAK;IAC5B,EAAA,MAAM8C,MAAM,GAAG,IAAIC,GAAG,CAACC,MAAM,CAAChD,GAAG,CAAC,EAAEyC,QAAQ,CAACD,IAAI,CAAC,CAAA;IAClD;IACA;IACA,EAAA,OAAOM,MAAM,CAACN,IAAI,CAACS,OAAO,CAAC,IAAIZ,MAAM,CAAE,CAAA,CAAA,EAAGI,QAAQ,CAACrC,MAAO,EAAC,CAAC,EAAE,EAAE,CAAC,CAAA;IACrE,CAAC;;ICbD;IACA;AACA;IACA;IACA;IACA;IACA;IAQA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAM8C,MAAM,CAAC;IACT;IACJ;IACA;IACIvC,EAAAA,WAAW,GAAG;IACV,IAAA,IAAI,CAACwC,OAAO,GAAG,IAAIC,GAAG,EAAE,CAAA;IACxB,IAAA,IAAI,CAACC,kBAAkB,GAAG,IAAID,GAAG,EAAE,CAAA;IACvC,GAAA;IACA;IACJ;IACA;IACA;IACA;IACI,EAAA,IAAIE,MAAM,GAAG;QACT,OAAO,IAAI,CAACH,OAAO,CAAA;IACvB,GAAA;IACA;IACJ;IACA;IACA;IACII,EAAAA,gBAAgB,GAAG;IACf;IACA9G,IAAAA,IAAI,CAAC+G,gBAAgB,CAAC,OAAO,EAAIC,KAAK,IAAK;UACvC,MAAM;IAAEC,QAAAA,OAAAA;IAAQ,OAAC,GAAGD,KAAK,CAAA;IACzB,MAAA,MAAME,eAAe,GAAG,IAAI,CAACC,aAAa,CAAC;YAAEF,OAAO;IAAED,QAAAA,KAAAA;IAAM,OAAC,CAAC,CAAA;IAC9D,MAAA,IAAIE,eAAe,EAAE;IACjBF,QAAAA,KAAK,CAACI,WAAW,CAACF,eAAe,CAAC,CAAA;IACtC,OAAA;IACJ,KAAC,CAAE,CAAA;IACP,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACIG,EAAAA,gBAAgB,GAAG;IACf;IACArH,IAAAA,IAAI,CAAC+G,gBAAgB,CAAC,SAAS,EAAIC,KAAK,IAAK;IACzC;IACA;UACA,IAAIA,KAAK,CAACM,IAAI,IAAIN,KAAK,CAACM,IAAI,CAAC1D,IAAI,KAAK,YAAY,EAAE;IAChD;YACA,MAAM;IAAE2D,UAAAA,OAAAA;aAAS,GAAGP,KAAK,CAACM,IAAI,CAAA;YACa;cACvCnH,MAAM,CAACI,KAAK,CAAE,CAAA,4BAAA,CAA6B,EAAEgH,OAAO,CAACC,WAAW,CAAC,CAAA;IACrE,SAAA;IACA,QAAA,MAAMC,eAAe,GAAGC,OAAO,CAACC,GAAG,CAACJ,OAAO,CAACC,WAAW,CAACI,GAAG,CAAEjF,KAAK,IAAK;IACnE,UAAA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;gBAC3BA,KAAK,GAAG,CAACA,KAAK,CAAC,CAAA;IACnB,WAAA;IACA,UAAA,MAAMsE,OAAO,GAAG,IAAIY,OAAO,CAAC,GAAGlF,KAAK,CAAC,CAAA;cACrC,OAAO,IAAI,CAACwE,aAAa,CAAC;gBAAEF,OAAO;IAAED,YAAAA,KAAAA;IAAM,WAAC,CAAC,CAAA;IAC7C;IACA;IACA;aACH,CAAC,CAAC,CAAC;IACJA,QAAAA,KAAK,CAACc,SAAS,CAACL,eAAe,CAAC,CAAA;IAChC;YACA,IAAIT,KAAK,CAACe,KAAK,IAAIf,KAAK,CAACe,KAAK,CAAC,CAAC,CAAC,EAAE;IAC/B,UAAA,KAAKN,eAAe,CAACO,IAAI,CAAC,MAAMhB,KAAK,CAACe,KAAK,CAAC,CAAC,CAAC,CAACE,WAAW,CAAC,IAAI,CAAC,CAAC,CAAA;IACrE,SAAA;IACJ,OAAA;IACJ,KAAC,CAAE,CAAA;IACP,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACId,EAAAA,aAAa,CAAC;QAAEF,OAAO;IAAED,IAAAA,KAAAA;IAAO,GAAC,EAAE;QACY;IACvC5B,MAAAA,kBAAM,CAACX,UAAU,CAACwC,OAAO,EAAEY,OAAO,EAAE;IAChC1F,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,QAAQ;IACnBC,QAAAA,QAAQ,EAAE,eAAe;IACzBR,QAAAA,SAAS,EAAE,iBAAA;IACf,OAAC,CAAC,CAAA;IACN,KAAA;IACA,IAAA,MAAM0B,GAAG,GAAG,IAAI+C,GAAG,CAACW,OAAO,CAAC1D,GAAG,EAAEyC,QAAQ,CAACD,IAAI,CAAC,CAAA;QAC/C,IAAI,CAACxC,GAAG,CAAC2E,QAAQ,CAACC,UAAU,CAAC,MAAM,CAAC,EAAE;UACS;IACvChI,QAAAA,MAAM,CAACI,KAAK,CAAE,CAAA,yDAAA,CAA0D,CAAC,CAAA;IAC7E,OAAA;IACA,MAAA,OAAA;IACJ,KAAA;QACA,MAAM6H,UAAU,GAAG7E,GAAG,CAACI,MAAM,KAAKqC,QAAQ,CAACrC,MAAM,CAAA;QACjD,MAAM;UAAE0E,MAAM;IAAEC,MAAAA,KAAAA;IAAM,KAAC,GAAG,IAAI,CAACC,iBAAiB,CAAC;UAC7CvB,KAAK;UACLC,OAAO;UACPmB,UAAU;IACV7E,MAAAA,GAAAA;IACJ,KAAC,CAAC,CAAA;IACF,IAAA,IAAI4B,OAAO,GAAGmD,KAAK,IAAIA,KAAK,CAACnD,OAAO,CAAA;QACpC,MAAMqD,aAAa,GAAG,EAAE,CAAA;QACmB;IACvC,MAAA,IAAIrD,OAAO,EAAE;YACTqD,aAAa,CAACC,IAAI,CAAC,CAAE,uCAAsC,EAAEH,KAAK,CAAC,CAAC,CAAA;IACpE,QAAA,IAAID,MAAM,EAAE;cACRG,aAAa,CAACC,IAAI,CAAC,CACd,sDAAqD,EACtDJ,MAAM,CACT,CAAC,CAAA;IACN,SAAA;IACJ,OAAA;IACJ,KAAA;IACA;IACA;IACA,IAAA,MAAMvH,MAAM,GAAGmG,OAAO,CAACnG,MAAM,CAAA;QAC7B,IAAI,CAACqE,OAAO,IAAI,IAAI,CAACyB,kBAAkB,CAAC8B,GAAG,CAAC5H,MAAM,CAAC,EAAE;UACN;YACvC0H,aAAa,CAACC,IAAI,CAAE,CAAA,yCAAA,CAA0C,GACzD,CAAkC3H,gCAAAA,EAAAA,MAAO,GAAE,CAAC,CAAA;IACrD,OAAA;UACAqE,OAAO,GAAG,IAAI,CAACyB,kBAAkB,CAAC+B,GAAG,CAAC7H,MAAM,CAAC,CAAA;IACjD,KAAA;QACA,IAAI,CAACqE,OAAO,EAAE;UACiC;IACvC;IACA;YACAhF,MAAM,CAACI,KAAK,CAAE,CAAA,oBAAA,EAAsB6F,cAAc,CAAC7C,GAAG,CAAE,CAAA,CAAC,CAAC,CAAA;IAC9D,OAAA;IACA,MAAA,OAAA;IACJ,KAAA;QAC2C;IACvC;IACA;UACApD,MAAM,CAACQ,cAAc,CAAE,CAAA,yBAAA,EAA2ByF,cAAc,CAAC7C,GAAG,CAAE,CAAA,CAAC,CAAC,CAAA;IACxEiF,MAAAA,aAAa,CAACI,OAAO,CAAEC,GAAG,IAAK;IAC3B,QAAA,IAAIxE,KAAK,CAACD,OAAO,CAACyE,GAAG,CAAC,EAAE;IACpB1I,UAAAA,MAAM,CAACK,GAAG,CAAC,GAAGqI,GAAG,CAAC,CAAA;IACtB,SAAC,MACI;IACD1I,UAAAA,MAAM,CAACK,GAAG,CAACqI,GAAG,CAAC,CAAA;IACnB,SAAA;IACJ,OAAC,CAAC,CAAA;UACF1I,MAAM,CAACS,QAAQ,EAAE,CAAA;IACrB,KAAA;IACA;IACA;IACA,IAAA,IAAIsG,eAAe,CAAA;QACnB,IAAI;IACAA,MAAAA,eAAe,GAAG/B,OAAO,CAACE,MAAM,CAAC;YAAE9B,GAAG;YAAE0D,OAAO;YAAED,KAAK;IAAEqB,QAAAA,MAAAA;IAAO,OAAC,CAAC,CAAA;SACpE,CACD,OAAOS,GAAG,EAAE;IACR5B,MAAAA,eAAe,GAAGQ,OAAO,CAACqB,MAAM,CAACD,GAAG,CAAC,CAAA;IACzC,KAAA;IACA;IACA,IAAA,MAAMrD,YAAY,GAAG6C,KAAK,IAAIA,KAAK,CAAC7C,YAAY,CAAA;QAChD,IAAIyB,eAAe,YAAYQ,OAAO,KACjC,IAAI,CAACsB,aAAa,IAAIvD,YAAY,CAAC,EAAE;IACtCyB,MAAAA,eAAe,GAAGA,eAAe,CAAC+B,KAAK,CAAC,MAAOH,GAAG,IAAK;IACnD;IACA,QAAA,IAAIrD,YAAY,EAAE;cAC6B;IACvC;IACA;gBACAtF,MAAM,CAACQ,cAAc,CAAE,CAAkC,iCAAA,CAAA,GACpD,CAAGyF,CAAAA,EAAAA,cAAc,CAAC7C,GAAG,CAAE,CAAA,wCAAA,CAAyC,CAAC,CAAA;IACtEpD,YAAAA,MAAM,CAACO,KAAK,CAAE,CAAiB,gBAAA,CAAA,EAAE4H,KAAK,CAAC,CAAA;IACvCnI,YAAAA,MAAM,CAACO,KAAK,CAACoI,GAAG,CAAC,CAAA;gBACjB3I,MAAM,CAACS,QAAQ,EAAE,CAAA;IACrB,WAAA;cACA,IAAI;IACA,YAAA,OAAO,MAAM6E,YAAY,CAACJ,MAAM,CAAC;kBAAE9B,GAAG;kBAAE0D,OAAO;kBAAED,KAAK;IAAEqB,cAAAA,MAAAA;IAAO,aAAC,CAAC,CAAA;eACpE,CACD,OAAOa,QAAQ,EAAE;gBACb,IAAIA,QAAQ,YAAYlH,KAAK,EAAE;IAC3B8G,cAAAA,GAAG,GAAGI,QAAQ,CAAA;IAClB,aAAA;IACJ,WAAA;IACJ,SAAA;YACA,IAAI,IAAI,CAACF,aAAa,EAAE;cACuB;IACvC;IACA;gBACA7I,MAAM,CAACQ,cAAc,CAAE,CAAkC,iCAAA,CAAA,GACpD,CAAGyF,CAAAA,EAAAA,cAAc,CAAC7C,GAAG,CAAE,CAAA,uCAAA,CAAwC,CAAC,CAAA;IACrEpD,YAAAA,MAAM,CAACO,KAAK,CAAE,CAAiB,gBAAA,CAAA,EAAE4H,KAAK,CAAC,CAAA;IACvCnI,YAAAA,MAAM,CAACO,KAAK,CAACoI,GAAG,CAAC,CAAA;gBACjB3I,MAAM,CAACS,QAAQ,EAAE,CAAA;IACrB,WAAA;IACA,UAAA,OAAO,IAAI,CAACoI,aAAa,CAAC3D,MAAM,CAAC;gBAAE9B,GAAG;gBAAE0D,OAAO;IAAED,YAAAA,KAAAA;IAAM,WAAC,CAAC,CAAA;IAC7D,SAAA;IACA,QAAA,MAAM8B,GAAG,CAAA;IACb,OAAC,CAAC,CAAA;IACN,KAAA;IACA,IAAA,OAAO5B,eAAe,CAAA;IAC1B,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACIqB,EAAAA,iBAAiB,CAAC;QAAEhF,GAAG;QAAE6E,UAAU;QAAEnB,OAAO;IAAED,IAAAA,KAAAA;IAAO,GAAC,EAAE;IACpD,IAAA,MAAMH,MAAM,GAAG,IAAI,CAACH,OAAO,CAACiC,GAAG,CAAC1B,OAAO,CAACnG,MAAM,CAAC,IAAI,EAAE,CAAA;IACrD,IAAA,KAAK,MAAMwH,KAAK,IAAIzB,MAAM,EAAE;IACxB,MAAA,IAAIwB,MAAM,CAAA;IACV;IACA;IACA,MAAA,MAAMc,WAAW,GAAGb,KAAK,CAAC/C,KAAK,CAAC;YAAEhC,GAAG;YAAE6E,UAAU;YAAEnB,OAAO;IAAED,QAAAA,KAAAA;IAAM,OAAC,CAAC,CAAA;IACpE,MAAA,IAAImC,WAAW,EAAE;YAC8B;IACvC;IACA;cACA,IAAIA,WAAW,YAAYzB,OAAO,EAAE;IAChCvH,YAAAA,MAAM,CAACM,IAAI,CAAE,CAAA,cAAA,EAAgB2F,cAAc,CAAC7C,GAAG,CAAE,CAAA,WAAA,CAAY,GACxD,CAAqD,oDAAA,CAAA,GACrD,CAA6D,4DAAA,CAAA,EAAE+E,KAAK,CAAC,CAAA;IAC9E,WAAA;IACJ,SAAA;IACA;IACA;IACAD,QAAAA,MAAM,GAAGc,WAAW,CAAA;IACpB,QAAA,IAAI9E,KAAK,CAACD,OAAO,CAACiE,MAAM,CAAC,IAAIA,MAAM,CAACe,MAAM,KAAK,CAAC,EAAE;IAC9C;IACAf,UAAAA,MAAM,GAAGgB,SAAS,CAAA;IACtB,SAAC,MACI,IAAIF,WAAW,CAACjF,WAAW,KAAKzC,MAAM;IAAI;YAC3CA,MAAM,CAACC,IAAI,CAACyH,WAAW,CAAC,CAACC,MAAM,KAAK,CAAC,EAAE;IACvC;IACAf,UAAAA,MAAM,GAAGgB,SAAS,CAAA;IACtB,SAAC,MACI,IAAI,OAAOF,WAAW,KAAK,SAAS,EAAE;IACvC;IACA;IACA;IACAd,UAAAA,MAAM,GAAGgB,SAAS,CAAA;IACtB,SAAA;IACA;YACA,OAAO;cAAEf,KAAK;IAAED,UAAAA,MAAAA;aAAQ,CAAA;IAC5B,OAAA;IACJ,KAAA;IACA;IACA,IAAA,OAAO,EAAE,CAAA;IACb,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACIiB,EAAAA,iBAAiB,CAACnE,OAAO,EAAErE,MAAM,GAAGkE,aAAa,EAAE;QAC/C,IAAI,CAAC4B,kBAAkB,CAAC2C,GAAG,CAACzI,MAAM,EAAEoE,gBAAgB,CAACC,OAAO,CAAC,CAAC,CAAA;IAClE,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;MACIK,eAAe,CAACL,OAAO,EAAE;IACrB,IAAA,IAAI,CAAC6D,aAAa,GAAG9D,gBAAgB,CAACC,OAAO,CAAC,CAAA;IAClD,GAAA;IACA;IACJ;IACA;IACA;IACA;MACIqE,aAAa,CAAClB,KAAK,EAAE;QAC0B;IACvClD,MAAAA,kBAAM,CAACZ,MAAM,CAAC8D,KAAK,EAAE,QAAQ,EAAE;IAC3BnG,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,QAAQ;IACnBC,QAAAA,QAAQ,EAAE,eAAe;IACzBR,QAAAA,SAAS,EAAE,OAAA;IACf,OAAC,CAAC,CAAA;IACFuD,MAAAA,kBAAM,CAACd,SAAS,CAACgE,KAAK,EAAE,OAAO,EAAE;IAC7BnG,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,QAAQ;IACnBC,QAAAA,QAAQ,EAAE,eAAe;IACzBR,QAAAA,SAAS,EAAE,OAAA;IACf,OAAC,CAAC,CAAA;UACFuD,kBAAM,CAACZ,MAAM,CAAC8D,KAAK,CAACnD,OAAO,EAAE,QAAQ,EAAE;IACnChD,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,QAAQ;IACnBC,QAAAA,QAAQ,EAAE,eAAe;IACzBR,QAAAA,SAAS,EAAE,OAAA;IACf,OAAC,CAAC,CAAA;UACFuD,kBAAM,CAACd,SAAS,CAACgE,KAAK,CAACnD,OAAO,EAAE,QAAQ,EAAE;IACtChD,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,QAAQ;IACnBC,QAAAA,QAAQ,EAAE,eAAe;IACzBR,QAAAA,SAAS,EAAE,eAAA;IACf,OAAC,CAAC,CAAA;UACFuD,kBAAM,CAACZ,MAAM,CAAC8D,KAAK,CAACxH,MAAM,EAAE,QAAQ,EAAE;IAClCqB,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,QAAQ;IACnBC,QAAAA,QAAQ,EAAE,eAAe;IACzBR,QAAAA,SAAS,EAAE,cAAA;IACf,OAAC,CAAC,CAAA;IACN,KAAA;QACA,IAAI,CAAC,IAAI,CAAC6E,OAAO,CAACgC,GAAG,CAACJ,KAAK,CAACxH,MAAM,CAAC,EAAE;UACjC,IAAI,CAAC4F,OAAO,CAAC6C,GAAG,CAACjB,KAAK,CAACxH,MAAM,EAAE,EAAE,CAAC,CAAA;IACtC,KAAA;IACA;IACA;IACA,IAAA,IAAI,CAAC4F,OAAO,CAACiC,GAAG,CAACL,KAAK,CAACxH,MAAM,CAAC,CAAC2H,IAAI,CAACH,KAAK,CAAC,CAAA;IAC9C,GAAA;IACA;IACJ;IACA;IACA;IACA;MACImB,eAAe,CAACnB,KAAK,EAAE;QACnB,IAAI,CAAC,IAAI,CAAC5B,OAAO,CAACgC,GAAG,CAACJ,KAAK,CAACxH,MAAM,CAAC,EAAE;IACjC,MAAA,MAAM,IAAImD,YAAY,CAAC,4CAA4C,EAAE;YACjEnD,MAAM,EAAEwH,KAAK,CAACxH,MAAAA;IAClB,OAAC,CAAC,CAAA;IACN,KAAA;IACA,IAAA,MAAM4I,UAAU,GAAG,IAAI,CAAChD,OAAO,CAACiC,GAAG,CAACL,KAAK,CAACxH,MAAM,CAAC,CAAC6I,OAAO,CAACrB,KAAK,CAAC,CAAA;IAChE,IAAA,IAAIoB,UAAU,GAAG,CAAC,CAAC,EAAE;IACjB,MAAA,IAAI,CAAChD,OAAO,CAACiC,GAAG,CAACL,KAAK,CAACxH,MAAM,CAAC,CAAC8I,MAAM,CAACF,UAAU,EAAE,CAAC,CAAC,CAAA;IACxD,KAAC,MACI;IACD,MAAA,MAAM,IAAIzF,YAAY,CAAC,uCAAuC,CAAC,CAAA;IACnE,KAAA;IACJ,GAAA;IACJ;;ICvYA;IACA;AACA;IACA;IACA;IACA;IACA;IAGA,IAAI4F,aAAa,CAAA;IACjB;IACA;IACA;IACA;IACA;IACA;IACA;IACO,MAAMC,wBAAwB,GAAG,MAAM;MAC1C,IAAI,CAACD,aAAa,EAAE;QAChBA,aAAa,GAAG,IAAIpD,MAAM,EAAE,CAAA;IAC5B;QACAoD,aAAa,CAAC/C,gBAAgB,EAAE,CAAA;QAChC+C,aAAa,CAACxC,gBAAgB,EAAE,CAAA;IACpC,GAAA;IACA,EAAA,OAAOwC,aAAa,CAAA;IACxB,CAAC;;ICzBD;IACA;AACA;IACA;IACA;IACA;IACA;IAOA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,SAASL,aAAa,CAACO,OAAO,EAAE5E,OAAO,EAAErE,MAAM,EAAE;IAC7C,EAAA,IAAIwH,KAAK,CAAA;IACT,EAAA,IAAI,OAAOyB,OAAO,KAAK,QAAQ,EAAE;QAC7B,MAAMC,UAAU,GAAG,IAAI1D,GAAG,CAACyD,OAAO,EAAE/D,QAAQ,CAACD,IAAI,CAAC,CAAA;QACP;IACvC,MAAA,IAAI,EAAEgE,OAAO,CAAC5B,UAAU,CAAC,GAAG,CAAC,IAAI4B,OAAO,CAAC5B,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE;IAC1D,QAAA,MAAM,IAAIlE,YAAY,CAAC,gBAAgB,EAAE;IACrC9B,UAAAA,UAAU,EAAE,iBAAiB;IAC7BE,UAAAA,QAAQ,EAAE,eAAe;IACzBR,UAAAA,SAAS,EAAE,SAAA;IACf,SAAC,CAAC,CAAA;IACN,OAAA;IACA;IACA;IACA,MAAA,MAAMoI,YAAY,GAAGF,OAAO,CAAC5B,UAAU,CAAC,MAAM,CAAC,GACzC6B,UAAU,CAACE,QAAQ,GACnBH,OAAO,CAAA;IACb;UACA,MAAMI,SAAS,GAAG,QAAQ,CAAA;IAC1B,MAAA,IAAI,IAAIvE,MAAM,CAAE,CAAA,EAAEuE,SAAU,CAAA,CAAC,CAAC,CAACrE,IAAI,CAACmE,YAAY,CAAC,EAAE;YAC/C9J,MAAM,CAACI,KAAK,CAAE,CAA6D,4DAAA,CAAA,GACtE,cAAa4J,SAAU,CAAA,yCAAA,CAA0C,GACjE,CAAA,4DAAA,CAA6D,CAAC,CAAA;IACvE,OAAA;IACJ,KAAA;QACA,MAAMC,aAAa,GAAG,CAAC;IAAE7G,MAAAA,GAAAA;IAAI,KAAC,KAAK;UACY;IACvC,QAAA,IAAIA,GAAG,CAAC2G,QAAQ,KAAKF,UAAU,CAACE,QAAQ,IACpC3G,GAAG,CAACI,MAAM,KAAKqG,UAAU,CAACrG,MAAM,EAAE;IAClCxD,UAAAA,MAAM,CAACI,KAAK,CAAE,CAAA,EAAEwJ,OAAQ,CAA8C,6CAAA,CAAA,GACjE,CAAExG,EAAAA,GAAG,CAAC2C,QAAQ,EAAG,CAAqD,oDAAA,CAAA,GACtE,+BAA8B,CAAC,CAAA;IACxC,SAAA;IACJ,OAAA;IACA,MAAA,OAAO3C,GAAG,CAACwC,IAAI,KAAKiE,UAAU,CAACjE,IAAI,CAAA;SACtC,CAAA;IACD;QACAuC,KAAK,GAAG,IAAIhD,KAAK,CAAC8E,aAAa,EAAEjF,OAAO,EAAErE,MAAM,CAAC,CAAA;IACrD,GAAC,MACI,IAAIiJ,OAAO,YAAYnE,MAAM,EAAE;IAChC;QACA0C,KAAK,GAAG,IAAI5C,WAAW,CAACqE,OAAO,EAAE5E,OAAO,EAAErE,MAAM,CAAC,CAAA;IACrD,GAAC,MACI,IAAI,OAAOiJ,OAAO,KAAK,UAAU,EAAE;IACpC;QACAzB,KAAK,GAAG,IAAIhD,KAAK,CAACyE,OAAO,EAAE5E,OAAO,EAAErE,MAAM,CAAC,CAAA;IAC/C,GAAC,MACI,IAAIiJ,OAAO,YAAYzE,KAAK,EAAE;IAC/BgD,IAAAA,KAAK,GAAGyB,OAAO,CAAA;IACnB,GAAC,MACI;IACD,IAAA,MAAM,IAAI9F,YAAY,CAAC,wBAAwB,EAAE;IAC7C9B,MAAAA,UAAU,EAAE,iBAAiB;IAC7BE,MAAAA,QAAQ,EAAE,eAAe;IACzBR,MAAAA,SAAS,EAAE,SAAA;IACf,KAAC,CAAC,CAAA;IACN,GAAA;MACA,MAAMgI,aAAa,GAAGC,wBAAwB,EAAE,CAAA;IAChDD,EAAAA,aAAa,CAACL,aAAa,CAAClB,KAAK,CAAC,CAAA;IAClC,EAAA,OAAOA,KAAK,CAAA;IAChB;;IC1FA;IACA,IAAI;IACAtI,EAAAA,IAAI,CAAC,0BAA0B,CAAC,IAAIC,CAAC,EAAE,CAAA;IAC3C,CAAC,CACD,OAAOC,CAAC,EAAE;;ICLV;IACA;AACA;IACA;IACA;IACA;IACA;IAEO,MAAMmK,sBAAsB,GAAG;IAClC;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACIC,EAAAA,eAAe,EAAE,OAAO;IAAEC,IAAAA,QAAAA;IAAS,GAAC,KAAK;QACrC,IAAIA,QAAQ,CAAC9G,MAAM,KAAK,GAAG,IAAI8G,QAAQ,CAAC9G,MAAM,KAAK,CAAC,EAAE;IAClD,MAAA,OAAO8G,QAAQ,CAAA;IACnB,KAAA;IACA,IAAA,OAAO,IAAI,CAAA;IACf,GAAA;IACJ,CAAC;;ICzBD;IACA;AACA;IACA;IACA;IACA;IACA;IAEA,MAAMC,iBAAiB,GAAG;IACtBC,EAAAA,eAAe,EAAE,iBAAiB;IAClCC,EAAAA,QAAQ,EAAE,aAAa;IACvBC,EAAAA,MAAM,EAAE,SAAS;IACjBC,EAAAA,OAAO,EAAE,SAAS;MAClBC,MAAM,EAAE,OAAOC,YAAY,KAAK,WAAW,GAAGA,YAAY,CAACC,KAAK,GAAG,EAAA;IACvE,CAAC,CAAA;IACD,MAAMC,gBAAgB,GAAItH,SAAS,IAAK;IACpC,EAAA,OAAO,CAAC8G,iBAAiB,CAACG,MAAM,EAAEjH,SAAS,EAAE8G,iBAAiB,CAACK,MAAM,CAAC,CACjEI,MAAM,CAAElJ,KAAK,IAAKA,KAAK,IAAIA,KAAK,CAACqH,MAAM,GAAG,CAAC,CAAC,CAC5C9H,IAAI,CAAC,GAAG,CAAC,CAAA;IAClB,CAAC,CAAA;IACD,MAAM4J,mBAAmB,GAAIC,EAAE,IAAK;MAChC,KAAK,MAAMxJ,GAAG,IAAIF,MAAM,CAACC,IAAI,CAAC8I,iBAAiB,CAAC,EAAE;QAC9CW,EAAE,CAACxJ,GAAG,CAAC,CAAA;IACX,GAAA;IACJ,CAAC,CAAA;IACM,MAAMyJ,UAAU,GAAG;MACtBC,aAAa,EAAGtH,OAAO,IAAK;QACxBmH,mBAAmB,CAAEvJ,GAAG,IAAK;IACzB,MAAA,IAAI,OAAOoC,OAAO,CAACpC,GAAG,CAAC,KAAK,QAAQ,EAAE;IAClC6I,QAAAA,iBAAiB,CAAC7I,GAAG,CAAC,GAAGoC,OAAO,CAACpC,GAAG,CAAC,CAAA;IACzC,OAAA;IACJ,KAAC,CAAC,CAAA;OACL;MACD2J,sBAAsB,EAAGC,aAAa,IAAK;IACvC,IAAA,OAAOA,aAAa,IAAIP,gBAAgB,CAACR,iBAAiB,CAACC,eAAe,CAAC,CAAA;OAC9E;MACDe,eAAe,EAAGD,aAAa,IAAK;IAChC,IAAA,OAAOA,aAAa,IAAIP,gBAAgB,CAACR,iBAAiB,CAACE,QAAQ,CAAC,CAAA;OACvE;IACDe,EAAAA,SAAS,EAAE,MAAM;QACb,OAAOjB,iBAAiB,CAACG,MAAM,CAAA;OAClC;MACDe,cAAc,EAAGH,aAAa,IAAK;IAC/B,IAAA,OAAOA,aAAa,IAAIP,gBAAgB,CAACR,iBAAiB,CAACI,OAAO,CAAC,CAAA;OACtE;IACDe,EAAAA,SAAS,EAAE,MAAM;QACb,OAAOnB,iBAAiB,CAACK,MAAM,CAAA;IACnC,GAAA;IACJ,CAAC;;IChDD;IACA;IACA;IACA;IACA;IACA;IAEA,SAASe,WAAW,CAACC,OAAO,EAAEC,YAAY,EAAE;IACxC,EAAA,MAAMC,WAAW,GAAG,IAAIzF,GAAG,CAACuF,OAAO,CAAC,CAAA;IACpC,EAAA,KAAK,MAAMG,KAAK,IAAIF,YAAY,EAAE;IAC9BC,IAAAA,WAAW,CAACE,YAAY,CAACC,MAAM,CAACF,KAAK,CAAC,CAAA;IAC1C,GAAA;MACA,OAAOD,WAAW,CAAChG,IAAI,CAAA;IAC3B,CAAA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,eAAeoG,sBAAsB,CAACC,KAAK,EAAEnF,OAAO,EAAE6E,YAAY,EAAEO,YAAY,EAAE;MAC9E,MAAMC,kBAAkB,GAAGV,WAAW,CAAC3E,OAAO,CAAC1D,GAAG,EAAEuI,YAAY,CAAC,CAAA;IACjE;IACA,EAAA,IAAI7E,OAAO,CAAC1D,GAAG,KAAK+I,kBAAkB,EAAE;IACpC,IAAA,OAAOF,KAAK,CAAC7G,KAAK,CAAC0B,OAAO,EAAEoF,YAAY,CAAC,CAAA;IAC7C,GAAA;IACA;IACA,EAAA,MAAME,WAAW,GAAG9K,MAAM,CAAC+K,MAAM,CAAC/K,MAAM,CAAC+K,MAAM,CAAC,EAAE,EAAEH,YAAY,CAAC,EAAE;IAAEI,IAAAA,YAAY,EAAE,IAAA;IAAK,GAAC,CAAC,CAAA;MAC1F,MAAMC,SAAS,GAAG,MAAMN,KAAK,CAAC1K,IAAI,CAACuF,OAAO,EAAEsF,WAAW,CAAC,CAAA;IACxD,EAAA,KAAK,MAAMI,QAAQ,IAAID,SAAS,EAAE;QAC9B,MAAME,mBAAmB,GAAGhB,WAAW,CAACe,QAAQ,CAACpJ,GAAG,EAAEuI,YAAY,CAAC,CAAA;QACnE,IAAIQ,kBAAkB,KAAKM,mBAAmB,EAAE;IAC5C,MAAA,OAAOR,KAAK,CAAC7G,KAAK,CAACoH,QAAQ,EAAEN,YAAY,CAAC,CAAA;IAC9C,KAAA;IACJ,GAAA;IACA,EAAA,OAAA;IACJ;;IC1CA;IACA;AACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAMQ,QAAQ,CAAC;IACX;IACJ;IACA;IACI3I,EAAAA,WAAW,GAAG;QACV,IAAI,CAAC4I,OAAO,GAAG,IAAIpF,OAAO,CAAC,CAACqF,OAAO,EAAEhE,MAAM,KAAK;UAC5C,IAAI,CAACgE,OAAO,GAAGA,OAAO,CAAA;UACtB,IAAI,CAAChE,MAAM,GAAGA,MAAM,CAAA;IACxB,KAAC,CAAC,CAAA;IACN,GAAA;IACJ;;IC1BA;IACA;AACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA,MAAMiE,mBAAmB,GAAG,IAAIC,GAAG,EAAE;;ICXrC;IACA;AACA;IACA;IACA;IACA;IACA;IAIA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,eAAeC,0BAA0B,GAAG;MACG;QACvC/M,MAAM,CAACK,GAAG,CAAE,CAAewM,aAAAA,EAAAA,mBAAmB,CAAC5J,IAAK,CAAA,CAAA,CAAE,GACjD,CAAA,6BAAA,CAA8B,CAAC,CAAA;IACxC,GAAA;IACA,EAAA,KAAK,MAAM+J,QAAQ,IAAIH,mBAAmB,EAAE;IACxC,IAAA,MAAMG,QAAQ,EAAE,CAAA;QAC2B;IACvChN,MAAAA,MAAM,CAACK,GAAG,CAAC2M,QAAQ,EAAE,cAAc,CAAC,CAAA;IACxC,KAAA;IACJ,GAAA;MAC2C;IACvChN,IAAAA,MAAM,CAACK,GAAG,CAAC,6BAA6B,CAAC,CAAA;IAC7C,GAAA;IACJ;;IC/BA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACO,SAAS4M,OAAO,CAACC,EAAE,EAAE;MACxB,OAAO,IAAI3F,OAAO,CAAEqF,OAAO,IAAKO,UAAU,CAACP,OAAO,EAAEM,EAAE,CAAC,CAAC,CAAA;IAC5D;;ICjBA;IACA;AACA;IACA;IACA;IACA;IACA;IAUA,SAASE,SAAS,CAACC,KAAK,EAAE;MACtB,OAAO,OAAOA,KAAK,KAAK,QAAQ,GAAG,IAAI3F,OAAO,CAAC2F,KAAK,CAAC,GAAGA,KAAK,CAAA;IACjE,CAAA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAMC,eAAe,CAAC;IAClB;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACIvJ,EAAAA,WAAW,CAACwJ,QAAQ,EAAEC,OAAO,EAAE;IAC3B,IAAA,IAAI,CAACC,UAAU,GAAG,EAAE,CAAA;IACpB;IACR;IACA;IACA;IACA;IACA;IACA;IACA;IACQ;IACR;IACA;IACA;IACA;IACA;IACA;IACQ;IACR;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACQ;IACR;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;QACmD;UACvCxI,kBAAM,CAACX,UAAU,CAACkJ,OAAO,CAAC3G,KAAK,EAAE6G,eAAe,EAAE;IAC9C1L,QAAAA,UAAU,EAAE,oBAAoB;IAChCC,QAAAA,SAAS,EAAE,iBAAiB;IAC5BC,QAAAA,QAAQ,EAAE,aAAa;IACvBR,QAAAA,SAAS,EAAE,eAAA;IACf,OAAC,CAAC,CAAA;IACN,KAAA;IACAJ,IAAAA,MAAM,CAAC+K,MAAM,CAAC,IAAI,EAAEmB,OAAO,CAAC,CAAA;IAC5B,IAAA,IAAI,CAAC3G,KAAK,GAAG2G,OAAO,CAAC3G,KAAK,CAAA;QAC1B,IAAI,CAAC8G,SAAS,GAAGJ,QAAQ,CAAA;IACzB,IAAA,IAAI,CAACK,gBAAgB,GAAG,IAAIlB,QAAQ,EAAE,CAAA;QACtC,IAAI,CAACmB,uBAAuB,GAAG,EAAE,CAAA;IACjC;IACA;QACA,IAAI,CAACC,QAAQ,GAAG,CAAC,GAAGP,QAAQ,CAACQ,OAAO,CAAC,CAAA;IACrC,IAAA,IAAI,CAACC,eAAe,GAAG,IAAIxH,GAAG,EAAE,CAAA;IAChC,IAAA,KAAK,MAAMyH,MAAM,IAAI,IAAI,CAACH,QAAQ,EAAE;UAChC,IAAI,CAACE,eAAe,CAAC5E,GAAG,CAAC6E,MAAM,EAAE,EAAE,CAAC,CAAA;IACxC,KAAA;QACA,IAAI,CAACpH,KAAK,CAACc,SAAS,CAAC,IAAI,CAACiG,gBAAgB,CAACjB,OAAO,CAAC,CAAA;IACvD,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACI,MAAMuB,KAAK,CAACb,KAAK,EAAE;QACf,MAAM;IAAExG,MAAAA,KAAAA;IAAM,KAAC,GAAG,IAAI,CAAA;IACtB,IAAA,IAAIC,OAAO,GAAGsG,SAAS,CAACC,KAAK,CAAC,CAAA;IAC9B,IAAA,IAAIvG,OAAO,CAACqH,IAAI,KAAK,UAAU,IAC3BtH,KAAK,YAAYuH,UAAU,IAC3BvH,KAAK,CAACwH,eAAe,EAAE;IACvB,MAAA,MAAMC,uBAAuB,GAAI,MAAMzH,KAAK,CAACwH,eAAgB,CAAA;IAC7D,MAAA,IAAIC,uBAAuB,EAAE;YACkB;IACvCtO,UAAAA,MAAM,CAACK,GAAG,CAAE,CAAA,0CAAA,CAA2C,GAClD,CAAA,CAAA,EAAG4F,cAAc,CAACa,OAAO,CAAC1D,GAAG,CAAE,GAAE,CAAC,CAAA;IAC3C,SAAA;IACA,QAAA,OAAOkL,uBAAuB,CAAA;IAClC,OAAA;IACJ,KAAA;IACA;IACA;IACA;IACA,IAAA,MAAMC,eAAe,GAAG,IAAI,CAACC,WAAW,CAAC,cAAc,CAAC,GAClD1H,OAAO,CAAC2H,KAAK,EAAE,GACf,IAAI,CAAA;QACV,IAAI;UACA,KAAK,MAAMC,EAAE,IAAI,IAAI,CAACC,gBAAgB,CAAC,kBAAkB,CAAC,EAAE;YACxD7H,OAAO,GAAG,MAAM4H,EAAE,CAAC;IAAE5H,UAAAA,OAAO,EAAEA,OAAO,CAAC2H,KAAK,EAAE;IAAE5H,UAAAA,KAAAA;IAAM,SAAC,CAAC,CAAA;IAC3D,OAAA;SACH,CACD,OAAO8B,GAAG,EAAE;UACR,IAAIA,GAAG,YAAY9G,KAAK,EAAE;IACtB,QAAA,MAAM,IAAIiC,YAAY,CAAC,iCAAiC,EAAE;cACtDnB,kBAAkB,EAAEgG,GAAG,CAACtF,OAAAA;IAC5B,SAAC,CAAC,CAAA;IACN,OAAA;IACJ,KAAA;IACA;IACA;IACA;IACA,IAAA,MAAMuL,qBAAqB,GAAG9H,OAAO,CAAC2H,KAAK,EAAE,CAAA;QAC7C,IAAI;IACA,MAAA,IAAII,aAAa,CAAA;IACjB;IACAA,MAAAA,aAAa,GAAG,MAAMX,KAAK,CAACpH,OAAO,EAAEA,OAAO,CAACqH,IAAI,KAAK,UAAU,GAAGjF,SAAS,GAAG,IAAI,CAACyE,SAAS,CAACmB,YAAY,CAAC,CAAA;UAC3G,IAAI,aAAoB,KAAK,YAAY,EAAE;IACvC9O,QAAAA,MAAM,CAACI,KAAK,CAAE,sBAAqB,GAC9B,CAAA,CAAA,EAAG6F,cAAc,CAACa,OAAO,CAAC1D,GAAG,CAAE,6BAA4B,GAC3D,CAAA,QAAA,EAAUyL,aAAa,CAACvL,MAAO,IAAG,CAAC,CAAA;IAC5C,OAAA;UACA,KAAK,MAAM0J,QAAQ,IAAI,IAAI,CAAC2B,gBAAgB,CAAC,iBAAiB,CAAC,EAAE;YAC7DE,aAAa,GAAG,MAAM7B,QAAQ,CAAC;cAC3BnG,KAAK;IACLC,UAAAA,OAAO,EAAE8H,qBAAqB;IAC9BxE,UAAAA,QAAQ,EAAEyE,aAAAA;IACd,SAAC,CAAC,CAAA;IACN,OAAA;IACA,MAAA,OAAOA,aAAa,CAAA;SACvB,CACD,OAAOtO,KAAK,EAAE;UACiC;IACvCP,QAAAA,MAAM,CAACK,GAAG,CAAE,CAAA,oBAAA,CAAqB,GAC5B,CAAG4F,CAAAA,EAAAA,cAAc,CAACa,OAAO,CAAC1D,GAAG,CAAE,CAAkB,iBAAA,CAAA,EAAE7C,KAAK,CAAC,CAAA;IAClE,OAAA;IACA;IACA;IACA,MAAA,IAAIgO,eAAe,EAAE;IACjB,QAAA,MAAM,IAAI,CAACQ,YAAY,CAAC,cAAc,EAAE;IACpCxO,UAAAA,KAAK,EAAEA,KAAK;cACZsG,KAAK;IACL0H,UAAAA,eAAe,EAAEA,eAAe,CAACE,KAAK,EAAE;cACxC3H,OAAO,EAAE8H,qBAAqB,CAACH,KAAK,EAAA;IACxC,SAAC,CAAC,CAAA;IACN,OAAA;IACA,MAAA,MAAMlO,KAAK,CAAA;IACf,KAAA;IACJ,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACI,MAAMyO,gBAAgB,CAAC3B,KAAK,EAAE;QAC1B,MAAMjD,QAAQ,GAAG,MAAM,IAAI,CAAC8D,KAAK,CAACb,KAAK,CAAC,CAAA;IACxC,IAAA,MAAM4B,aAAa,GAAG7E,QAAQ,CAACqE,KAAK,EAAE,CAAA;IACtC,IAAA,KAAK,IAAI,CAAC9G,SAAS,CAAC,IAAI,CAACuH,QAAQ,CAAC7B,KAAK,EAAE4B,aAAa,CAAC,CAAC,CAAA;IACxD,IAAA,OAAO7E,QAAQ,CAAA;IACnB,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACI,MAAM+E,UAAU,CAAC3N,GAAG,EAAE;IAClB,IAAA,MAAMsF,OAAO,GAAGsG,SAAS,CAAC5L,GAAG,CAAC,CAAA;IAC9B,IAAA,IAAI4N,cAAc,CAAA;QAClB,MAAM;UAAE7L,SAAS;IAAE2I,MAAAA,YAAAA;SAAc,GAAG,IAAI,CAACyB,SAAS,CAAA;QAClD,MAAM0B,gBAAgB,GAAG,MAAM,IAAI,CAACC,WAAW,CAACxI,OAAO,EAAE,MAAM,CAAC,CAAA;IAChE,IAAA,MAAMyI,iBAAiB,GAAGjO,MAAM,CAAC+K,MAAM,CAAC/K,MAAM,CAAC+K,MAAM,CAAC,EAAE,EAAEH,YAAY,CAAC,EAAE;IAAE3I,MAAAA,SAAAA;IAAU,KAAC,CAAC,CAAA;QACvF6L,cAAc,GAAG,MAAMI,MAAM,CAACpK,KAAK,CAACiK,gBAAgB,EAAEE,iBAAiB,CAAC,CAAA;QAC7B;IACvC,MAAA,IAAIH,cAAc,EAAE;IAChBpP,QAAAA,MAAM,CAACI,KAAK,CAAE,CAA8BmD,4BAAAA,EAAAA,SAAU,IAAG,CAAC,CAAA;IAC9D,OAAC,MACI;IACDvD,QAAAA,MAAM,CAACI,KAAK,CAAE,CAA+BmD,6BAAAA,EAAAA,SAAU,IAAG,CAAC,CAAA;IAC/D,OAAA;IACJ,KAAA;QACA,KAAK,MAAMyJ,QAAQ,IAAI,IAAI,CAAC2B,gBAAgB,CAAC,0BAA0B,CAAC,EAAE;IACtES,MAAAA,cAAc,GACV,CAAC,MAAMpC,QAAQ,CAAC;YACZzJ,SAAS;YACT2I,YAAY;YACZkD,cAAc;IACdtI,QAAAA,OAAO,EAAEuI,gBAAgB;YACzBxI,KAAK,EAAE,IAAI,CAACA,KAAAA;WACf,CAAC,KAAKqC,SAAS,CAAA;IACxB,KAAA;IACA,IAAA,OAAOkG,cAAc,CAAA;IACzB,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACI,EAAA,MAAMF,QAAQ,CAAC1N,GAAG,EAAE4I,QAAQ,EAAE;IAC1B,IAAA,MAAMtD,OAAO,GAAGsG,SAAS,CAAC5L,GAAG,CAAC,CAAA;IAC9B;IACA;QACA,MAAMyL,OAAO,CAAC,CAAC,CAAC,CAAA;QAChB,MAAMoC,gBAAgB,GAAG,MAAM,IAAI,CAACC,WAAW,CAACxI,OAAO,EAAE,OAAO,CAAC,CAAA;QACtB;UACvC,IAAIuI,gBAAgB,CAAC1O,MAAM,IAAI0O,gBAAgB,CAAC1O,MAAM,KAAK,KAAK,EAAE;IAC9D,QAAA,MAAM,IAAImD,YAAY,CAAC,kCAAkC,EAAE;IACvDV,UAAAA,GAAG,EAAE6C,cAAc,CAACoJ,gBAAgB,CAACjM,GAAG,CAAC;cACzCzC,MAAM,EAAE0O,gBAAgB,CAAC1O,MAAAA;IAC7B,SAAC,CAAC,CAAA;IACN,OAAA;IACA;UACA,MAAM8O,IAAI,GAAGrF,QAAQ,CAACsF,OAAO,CAAClH,GAAG,CAAC,MAAM,CAAC,CAAA;IACzC,MAAA,IAAIiH,IAAI,EAAE;IACNzP,QAAAA,MAAM,CAACI,KAAK,CAAE,oBAAmB6F,cAAc,CAACoJ,gBAAgB,CAACjM,GAAG,CAAE,CAAE,CAAA,CAAA,GACnE,gBAAeqM,IAAK,CAAA,UAAA,CAAW,GAC/B,CAAiE,gEAAA,CAAA,GACjE,0DAAyD,CAAC,CAAA;IACnE,OAAA;IACJ,KAAA;QACA,IAAI,CAACrF,QAAQ,EAAE;UACgC;IACvCpK,QAAAA,MAAM,CAACO,KAAK,CAAE,CAAA,uCAAA,CAAwC,GACjD,CAAA,CAAA,EAAG0F,cAAc,CAACoJ,gBAAgB,CAACjM,GAAG,CAAE,IAAG,CAAC,CAAA;IACrD,OAAA;IACA,MAAA,MAAM,IAAIU,YAAY,CAAC,4BAA4B,EAAE;IACjDV,QAAAA,GAAG,EAAE6C,cAAc,CAACoJ,gBAAgB,CAACjM,GAAG,CAAA;IAC5C,OAAC,CAAC,CAAA;IACN,KAAA;QACA,MAAMuM,eAAe,GAAG,MAAM,IAAI,CAACC,0BAA0B,CAACxF,QAAQ,CAAC,CAAA;QACvE,IAAI,CAACuF,eAAe,EAAE;UACyB;IACvC3P,QAAAA,MAAM,CAACI,KAAK,CAAE,CAAA,UAAA,EAAY6F,cAAc,CAACoJ,gBAAgB,CAACjM,GAAG,CAAE,CAAG,EAAA,CAAA,GAC7D,CAAoB,mBAAA,CAAA,EAAEuM,eAAe,CAAC,CAAA;IAC/C,OAAA;IACA,MAAA,OAAO,KAAK,CAAA;IAChB,KAAA;QACA,MAAM;UAAEpM,SAAS;IAAE2I,MAAAA,YAAAA;SAAc,GAAG,IAAI,CAACyB,SAAS,CAAA;QAClD,MAAM1B,KAAK,GAAG,MAAMpM,IAAI,CAAC2P,MAAM,CAACK,IAAI,CAACtM,SAAS,CAAC,CAAA;IAC/C,IAAA,MAAMuM,sBAAsB,GAAG,IAAI,CAACtB,WAAW,CAAC,gBAAgB,CAAC,CAAA;IACjE,IAAA,MAAMuB,WAAW,GAAGD,sBAAsB,GACpC,MAAM9D,sBAAsB;IAC9B;IACA;IACA;IACAC,IAAAA,KAAK,EAAEoD,gBAAgB,CAACZ,KAAK,EAAE,EAAE,CAAC,iBAAiB,CAAC,EAAEvC,YAAY,CAAC,GACjE,IAAI,CAAA;QACiC;IACvClM,MAAAA,MAAM,CAACI,KAAK,CAAE,CAAA,cAAA,EAAgBmD,SAAU,CAA6B,4BAAA,CAAA,GAChE,CAAM0C,IAAAA,EAAAA,cAAc,CAACoJ,gBAAgB,CAACjM,GAAG,CAAE,GAAE,CAAC,CAAA;IACvD,KAAA;QACA,IAAI;IACA,MAAA,MAAM6I,KAAK,CAAC+D,GAAG,CAACX,gBAAgB,EAAES,sBAAsB,GAAGH,eAAe,CAAClB,KAAK,EAAE,GAAGkB,eAAe,CAAC,CAAA;SACxG,CACD,OAAOpP,KAAK,EAAE;UACV,IAAIA,KAAK,YAAYsB,KAAK,EAAE;IACxB;IACA,QAAA,IAAItB,KAAK,CAACsC,IAAI,KAAK,oBAAoB,EAAE;IACrC,UAAA,MAAMkK,0BAA0B,EAAE,CAAA;IACtC,SAAA;IACA,QAAA,MAAMxM,KAAK,CAAA;IACf,OAAA;IACJ,KAAA;QACA,KAAK,MAAMyM,QAAQ,IAAI,IAAI,CAAC2B,gBAAgB,CAAC,gBAAgB,CAAC,EAAE;IAC5D,MAAA,MAAM3B,QAAQ,CAAC;YACXzJ,SAAS;YACTwM,WAAW;IACXE,QAAAA,WAAW,EAAEN,eAAe,CAAClB,KAAK,EAAE;IACpC3H,QAAAA,OAAO,EAAEuI,gBAAgB;YACzBxI,KAAK,EAAE,IAAI,CAACA,KAAAA;IAChB,OAAC,CAAC,CAAA;IACN,KAAA;IACA,IAAA,OAAO,IAAI,CAAA;IACf,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACI,EAAA,MAAMyI,WAAW,CAACxI,OAAO,EAAEqH,IAAI,EAAE;QAC7B,MAAM3M,GAAG,GAAI,CAAEsF,EAAAA,OAAO,CAAC1D,GAAI,CAAA,GAAA,EAAK+K,IAAK,CAAC,CAAA,CAAA;IACtC,IAAA,IAAI,CAAC,IAAI,CAACV,UAAU,CAACjM,GAAG,CAAC,EAAE;UACvB,IAAI6N,gBAAgB,GAAGvI,OAAO,CAAA;UAC9B,KAAK,MAAMkG,QAAQ,IAAI,IAAI,CAAC2B,gBAAgB,CAAC,oBAAoB,CAAC,EAAE;IAChEU,QAAAA,gBAAgB,GAAGjC,SAAS,CAAC,MAAMJ,QAAQ,CAAC;cACxCmB,IAAI;IACJrH,UAAAA,OAAO,EAAEuI,gBAAgB;cACzBxI,KAAK,EAAE,IAAI,CAACA,KAAK;IACjB;IACAqB,UAAAA,MAAM,EAAE,IAAI,CAACA,MAAM;IACvB,SAAC,CAAC,CAAC,CAAA;IACP,OAAA;;IACA,MAAA,IAAI,CAACuF,UAAU,CAACjM,GAAG,CAAC,GAAG6N,gBAAgB,CAAA;IAC3C,KAAA;IACA,IAAA,OAAO,IAAI,CAAC5B,UAAU,CAACjM,GAAG,CAAC,CAAA;IAC/B,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;MACIgN,WAAW,CAAC3L,IAAI,EAAE;QACd,KAAK,MAAMoL,MAAM,IAAI,IAAI,CAACN,SAAS,CAACI,OAAO,EAAE;UACzC,IAAIlL,IAAI,IAAIoL,MAAM,EAAE;IAChB,QAAA,OAAO,IAAI,CAAA;IACf,OAAA;IACJ,KAAA;IACA,IAAA,OAAO,KAAK,CAAA;IAChB,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACI,EAAA,MAAMc,YAAY,CAAClM,IAAI,EAAEgJ,KAAK,EAAE;QAC5B,KAAK,MAAMmB,QAAQ,IAAI,IAAI,CAAC2B,gBAAgB,CAAC9L,IAAI,CAAC,EAAE;IAChD;IACA;UACA,MAAMmK,QAAQ,CAACnB,KAAK,CAAC,CAAA;IACzB,KAAA;IACJ,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACI,CAAC8C,gBAAgB,CAAC9L,IAAI,EAAE;QACpB,KAAK,MAAMoL,MAAM,IAAI,IAAI,CAACN,SAAS,CAACI,OAAO,EAAE;IACzC,MAAA,IAAI,OAAOE,MAAM,CAACpL,IAAI,CAAC,KAAK,UAAU,EAAE;YACpC,MAAMqN,KAAK,GAAG,IAAI,CAAClC,eAAe,CAACxF,GAAG,CAACyF,MAAM,CAAC,CAAA;YAC9C,MAAMkC,gBAAgB,GAAItE,KAAK,IAAK;IAChC,UAAA,MAAMuE,aAAa,GAAG9O,MAAM,CAAC+K,MAAM,CAAC/K,MAAM,CAAC+K,MAAM,CAAC,EAAE,EAAER,KAAK,CAAC,EAAE;IAAEqE,YAAAA,KAAAA;IAAM,WAAC,CAAC,CAAA;IACxE;IACA;IACA,UAAA,OAAOjC,MAAM,CAACpL,IAAI,CAAC,CAACuN,aAAa,CAAC,CAAA;aACrC,CAAA;IACD,QAAA,MAAMD,gBAAgB,CAAA;IAC1B,OAAA;IACJ,KAAA;IACJ,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACIxI,SAAS,CAACgF,OAAO,EAAE;IACf,IAAA,IAAI,CAACkB,uBAAuB,CAACvF,IAAI,CAACqE,OAAO,CAAC,CAAA;IAC1C,IAAA,OAAOA,OAAO,CAAA;IAClB,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACI,EAAA,MAAM0D,WAAW,GAAG;IAChB,IAAA,IAAI1D,OAAO,CAAA;QACX,OAAQA,OAAO,GAAG,IAAI,CAACkB,uBAAuB,CAACyC,KAAK,EAAE,EAAG;IACrD,MAAA,MAAM3D,OAAO,CAAA;IACjB,KAAA;IACJ,GAAA;IACA;IACJ;IACA;IACA;IACI4D,EAAAA,OAAO,GAAG;IACN,IAAA,IAAI,CAAC3C,gBAAgB,CAAChB,OAAO,CAAC,IAAI,CAAC,CAAA;IACvC,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACI,MAAMgD,0BAA0B,CAACxF,QAAQ,EAAE;QACvC,IAAIuF,eAAe,GAAGvF,QAAQ,CAAA;QAC9B,IAAIoG,WAAW,GAAG,KAAK,CAAA;QACvB,KAAK,MAAMxD,QAAQ,IAAI,IAAI,CAAC2B,gBAAgB,CAAC,iBAAiB,CAAC,EAAE;IAC7DgB,MAAAA,eAAe,GACX,CAAC,MAAM3C,QAAQ,CAAC;YACZlG,OAAO,EAAE,IAAI,CAACA,OAAO;IACrBsD,QAAAA,QAAQ,EAAEuF,eAAe;YACzB9I,KAAK,EAAE,IAAI,CAACA,KAAAA;WACf,CAAC,KAAKqC,SAAS,CAAA;IACpBsH,MAAAA,WAAW,GAAG,IAAI,CAAA;UAClB,IAAI,CAACb,eAAe,EAAE;IAClB,QAAA,MAAA;IACJ,OAAA;IACJ,KAAA;QACA,IAAI,CAACa,WAAW,EAAE;IACd,MAAA,IAAIb,eAAe,IAAIA,eAAe,CAACrM,MAAM,KAAK,GAAG,EAAE;IACnDqM,QAAAA,eAAe,GAAGzG,SAAS,CAAA;IAC/B,OAAA;UAC2C;IACvC,QAAA,IAAIyG,eAAe,EAAE;IACjB,UAAA,IAAIA,eAAe,CAACrM,MAAM,KAAK,GAAG,EAAE;IAChC,YAAA,IAAIqM,eAAe,CAACrM,MAAM,KAAK,CAAC,EAAE;IAC9BtD,cAAAA,MAAM,CAACM,IAAI,CAAE,CAAA,kBAAA,EAAoB,IAAI,CAACwG,OAAO,CAAC1D,GAAI,CAAG,EAAA,CAAA,GAChD,CAAyD,wDAAA,CAAA,GACzD,mDAAkD,CAAC,CAAA;IAC5D,aAAC,MACI;IACDpD,cAAAA,MAAM,CAACI,KAAK,CAAE,qBAAoB,IAAI,CAAC0G,OAAO,CAAC1D,GAAI,CAAG,EAAA,CAAA,GACjD,8BAA6BgH,QAAQ,CAAC9G,MAAO,CAAa,YAAA,CAAA,GAC1D,wBAAuB,CAAC,CAAA;IACjC,aAAA;IACJ,WAAA;IACJ,SAAA;IACJ,OAAA;IACJ,KAAA;IACA,IAAA,OAAOqM,eAAe,CAAA;IAC1B,GAAA;IACJ;;ICngBA;IACA;AACA;IACA;IACA;IACA;IACA;IAOA;IACA;IACA;IACA;IACA;IACA,MAAMc,QAAQ,CAAC;IACX;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACI1M,EAAAA,WAAW,CAACyJ,OAAO,GAAG,EAAE,EAAE;IACtB;IACR;IACA;IACA;IACA;IACA;IACA;QACQ,IAAI,CAACjK,SAAS,GAAG0H,UAAU,CAACM,cAAc,CAACiC,OAAO,CAACjK,SAAS,CAAC,CAAA;IAC7D;IACR;IACA;IACA;IACA;IACA;IACA;IACQ,IAAA,IAAI,CAACwK,OAAO,GAAGP,OAAO,CAACO,OAAO,IAAI,EAAE,CAAA;IACpC;IACR;IACA;IACA;IACA;IACA;IACA;IACQ,IAAA,IAAI,CAACe,YAAY,GAAGtB,OAAO,CAACsB,YAAY,CAAA;IACxC;IACR;IACA;IACA;IACA;IACA;IACA;IACQ,IAAA,IAAI,CAAC5C,YAAY,GAAGsB,OAAO,CAACtB,YAAY,CAAA;IAC5C,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACIhH,MAAM,CAACsI,OAAO,EAAE;QACZ,MAAM,CAACkD,YAAY,CAAC,GAAG,IAAI,CAACC,SAAS,CAACnD,OAAO,CAAC,CAAA;IAC9C,IAAA,OAAOkD,YAAY,CAAA;IACvB,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACIC,SAAS,CAACnD,OAAO,EAAE;IACf;QACA,IAAIA,OAAO,YAAYY,UAAU,EAAE;IAC/BZ,MAAAA,OAAO,GAAG;IACN3G,QAAAA,KAAK,EAAE2G,OAAO;YACd1G,OAAO,EAAE0G,OAAO,CAAC1G,OAAAA;WACpB,CAAA;IACL,KAAA;IACA,IAAA,MAAMD,KAAK,GAAG2G,OAAO,CAAC3G,KAAK,CAAA;IAC3B,IAAA,MAAMC,OAAO,GAAG,OAAO0G,OAAO,CAAC1G,OAAO,KAAK,QAAQ,GAC7C,IAAIY,OAAO,CAAC8F,OAAO,CAAC1G,OAAO,CAAC,GAC5B0G,OAAO,CAAC1G,OAAO,CAAA;QACrB,MAAMoB,MAAM,GAAG,QAAQ,IAAIsF,OAAO,GAAGA,OAAO,CAACtF,MAAM,GAAGgB,SAAS,CAAA;IAC/D,IAAA,MAAMlE,OAAO,GAAG,IAAIsI,eAAe,CAAC,IAAI,EAAE;UAAEzG,KAAK;UAAEC,OAAO;IAAEoB,MAAAA,MAAAA;IAAO,KAAC,CAAC,CAAA;QACrE,MAAMwI,YAAY,GAAG,IAAI,CAACE,YAAY,CAAC5L,OAAO,EAAE8B,OAAO,EAAED,KAAK,CAAC,CAAA;IAC/D,IAAA,MAAMgK,WAAW,GAAG,IAAI,CAACC,cAAc,CAACJ,YAAY,EAAE1L,OAAO,EAAE8B,OAAO,EAAED,KAAK,CAAC,CAAA;IAC9E;IACA,IAAA,OAAO,CAAC6J,YAAY,EAAEG,WAAW,CAAC,CAAA;IACtC,GAAA;IACA,EAAA,MAAMD,YAAY,CAAC5L,OAAO,EAAE8B,OAAO,EAAED,KAAK,EAAE;IACxC,IAAA,MAAM7B,OAAO,CAAC+J,YAAY,CAAC,kBAAkB,EAAE;UAAElI,KAAK;IAAEC,MAAAA,OAAAA;IAAQ,KAAC,CAAC,CAAA;QAClE,IAAIsD,QAAQ,GAAGlB,SAAS,CAAA;QACxB,IAAI;UACAkB,QAAQ,GAAG,MAAM,IAAI,CAAC2G,OAAO,CAACjK,OAAO,EAAE9B,OAAO,CAAC,CAAA;IAC/C;IACA;IACA;UACA,IAAI,CAACoF,QAAQ,IAAIA,QAAQ,CAAC3G,IAAI,KAAK,OAAO,EAAE;IACxC,QAAA,MAAM,IAAIK,YAAY,CAAC,aAAa,EAAE;cAAEV,GAAG,EAAE0D,OAAO,CAAC1D,GAAAA;IAAI,SAAC,CAAC,CAAA;IAC/D,OAAA;SACH,CACD,OAAO7C,KAAK,EAAE;UACV,IAAIA,KAAK,YAAYsB,KAAK,EAAE;YACxB,KAAK,MAAMmL,QAAQ,IAAIhI,OAAO,CAAC2J,gBAAgB,CAAC,iBAAiB,CAAC,EAAE;cAChEvE,QAAQ,GAAG,MAAM4C,QAAQ,CAAC;gBAAEzM,KAAK;gBAAEsG,KAAK;IAAEC,YAAAA,OAAAA;IAAQ,WAAC,CAAC,CAAA;IACpD,UAAA,IAAIsD,QAAQ,EAAE;IACV,YAAA,MAAA;IACJ,WAAA;IACJ,SAAA;IACJ,OAAA;UACA,IAAI,CAACA,QAAQ,EAAE;IACX,QAAA,MAAM7J,KAAK,CAAA;IACf,OAAC,MAC+C;YAC5CP,MAAM,CAACK,GAAG,CAAE,CAAuB4F,qBAAAA,EAAAA,cAAc,CAACa,OAAO,CAAC1D,GAAG,CAAE,CAAA,GAAA,CAAI,GAC9D,CAAA,GAAA,EAAK7C,KAAK,YAAYsB,KAAK,GAAGtB,KAAK,CAACwF,QAAQ,EAAE,GAAG,EAAG,CAAA,uDAAA,CAAwD,GAC5G,CAAA,yBAAA,CAA0B,CAAC,CAAA;IACpC,OAAA;IACJ,KAAA;QACA,KAAK,MAAMiH,QAAQ,IAAIhI,OAAO,CAAC2J,gBAAgB,CAAC,oBAAoB,CAAC,EAAE;UACnEvE,QAAQ,GAAG,MAAM4C,QAAQ,CAAC;YAAEnG,KAAK;YAAEC,OAAO;IAAEsD,QAAAA,QAAAA;IAAS,OAAC,CAAC,CAAA;IAC3D,KAAA;IACA,IAAA,OAAOA,QAAQ,CAAA;IACnB,GAAA;MACA,MAAM0G,cAAc,CAACJ,YAAY,EAAE1L,OAAO,EAAE8B,OAAO,EAAED,KAAK,EAAE;IACxD,IAAA,IAAIuD,QAAQ,CAAA;IACZ,IAAA,IAAI7J,KAAK,CAAA;QACT,IAAI;UACA6J,QAAQ,GAAG,MAAMsG,YAAY,CAAA;SAChC,CACD,OAAOnQ,KAAK,EAAE;IACV;IACA;IACA;IAAA,KAAA;QAEJ,IAAI;IACA,MAAA,MAAMyE,OAAO,CAAC+J,YAAY,CAAC,mBAAmB,EAAE;YAC5ClI,KAAK;YACLC,OAAO;IACPsD,QAAAA,QAAAA;IACJ,OAAC,CAAC,CAAA;UACF,MAAMpF,OAAO,CAACqL,WAAW,EAAE,CAAA;SAC9B,CACD,OAAOW,cAAc,EAAE;UACnB,IAAIA,cAAc,YAAYnP,KAAK,EAAE;IACjCtB,QAAAA,KAAK,GAAGyQ,cAAc,CAAA;IAC1B,OAAA;IACJ,KAAA;IACA,IAAA,MAAMhM,OAAO,CAAC+J,YAAY,CAAC,oBAAoB,EAAE;UAC7ClI,KAAK;UACLC,OAAO;UACPsD,QAAQ;IACR7J,MAAAA,KAAK,EAAEA,KAAAA;IACX,KAAC,CAAC,CAAA;QACFyE,OAAO,CAACuL,OAAO,EAAE,CAAA;IACjB,IAAA,IAAIhQ,KAAK,EAAE;IACP,MAAA,MAAMA,KAAK,CAAA;IACf,KAAA;IACJ,GAAA;IACJ,CAAA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;ICnOA;IACA;AACA;IACA;IACA;IACA;IACA;IAIO,MAAMkB,QAAQ,GAAG;IACpBwP,EAAAA,aAAa,EAAE,CAACC,YAAY,EAAEpK,OAAO,KAAM,CAAA,MAAA,EAAQoK,YAAa,CAAA,gBAAA,EAAkBjL,cAAc,CAACa,OAAO,CAAC1D,GAAG,CAAE,CAAE,CAAA,CAAA;MAChH+N,kBAAkB,EAAG/G,QAAQ,IAAK;IAC9B,IAAA,IAAIA,QAAQ,EAAE;IACVpK,MAAAA,MAAM,CAACQ,cAAc,CAAE,CAAA,6BAAA,CAA8B,CAAC,CAAA;IACtDR,MAAAA,MAAM,CAACK,GAAG,CAAC+J,QAAQ,IAAI,wBAAwB,CAAC,CAAA;UAChDpK,MAAM,CAACS,QAAQ,EAAE,CAAA;IACrB,KAAA;IACJ,GAAA;IACJ,CAAC;;ICnBD;IACA;AACA;IACA;IACA;IACA;IACA;IAQA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAM2Q,YAAY,SAASX,QAAQ,CAAC;IAChC;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACI1M,EAAAA,WAAW,CAACyJ,OAAO,GAAG,EAAE,EAAE;QACtB,KAAK,CAACA,OAAO,CAAC,CAAA;IACd;IACA;IACA,IAAA,IAAI,CAAC,IAAI,CAACO,OAAO,CAACsD,IAAI,CAAEC,CAAC,IAAK,iBAAiB,IAAIA,CAAC,CAAC,EAAE;IACnD,MAAA,IAAI,CAACvD,OAAO,CAACwD,OAAO,CAACrH,sBAAsB,CAAC,CAAA;IAChD,KAAA;IACA,IAAA,IAAI,CAACsH,sBAAsB,GAAGhE,OAAO,CAACiE,qBAAqB,IAAI,CAAC,CAAA;QACrB;UACvC,IAAI,IAAI,CAACD,sBAAsB,EAAE;YAC7BvM,kBAAM,CAACZ,MAAM,CAAC,IAAI,CAACmN,sBAAsB,EAAE,QAAQ,EAAE;IACjDxP,UAAAA,UAAU,EAAE,oBAAoB;IAChCC,UAAAA,SAAS,EAAE,IAAI,CAAC8B,WAAW,CAAClB,IAAI;IAChCX,UAAAA,QAAQ,EAAE,aAAa;IACvBR,UAAAA,SAAS,EAAE,uBAAA;IACf,SAAC,CAAC,CAAA;IACN,OAAA;IACJ,KAAA;IACJ,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACI,EAAA,MAAMqP,OAAO,CAACjK,OAAO,EAAE9B,OAAO,EAAE;QAC5B,MAAM0M,IAAI,GAAG,EAAE,CAAA;QAC4B;IACvCzM,MAAAA,kBAAM,CAACX,UAAU,CAACwC,OAAO,EAAEY,OAAO,EAAE;IAChC1F,QAAAA,UAAU,EAAE,oBAAoB;IAChCC,QAAAA,SAAS,EAAE,IAAI,CAAC8B,WAAW,CAAClB,IAAI;IAChCX,QAAAA,QAAQ,EAAE,QAAQ;IAClBR,QAAAA,SAAS,EAAE,aAAA;IACf,OAAC,CAAC,CAAA;IACN,KAAA;QACA,MAAMiQ,QAAQ,GAAG,EAAE,CAAA;IACnB,IAAA,IAAIC,SAAS,CAAA;QACb,IAAI,IAAI,CAACJ,sBAAsB,EAAE;UAC7B,MAAM;YAAEK,EAAE;IAAElF,QAAAA,OAAAA;IAAQ,OAAC,GAAG,IAAI,CAACmF,kBAAkB,CAAC;YAAEhL,OAAO;YAAE4K,IAAI;IAAE1M,QAAAA,OAAAA;IAAQ,OAAC,CAAC,CAAA;IAC3E4M,MAAAA,SAAS,GAAGC,EAAE,CAAA;IACdF,MAAAA,QAAQ,CAACrJ,IAAI,CAACqE,OAAO,CAAC,CAAA;IAC1B,KAAA;IACA,IAAA,MAAMoF,cAAc,GAAG,IAAI,CAACC,kBAAkB,CAAC;UAC3CJ,SAAS;UACT9K,OAAO;UACP4K,IAAI;IACJ1M,MAAAA,OAAAA;IACJ,KAAC,CAAC,CAAA;IACF2M,IAAAA,QAAQ,CAACrJ,IAAI,CAACyJ,cAAc,CAAC,CAAA;QAC7B,MAAM3H,QAAQ,GAAG,MAAMpF,OAAO,CAAC2C,SAAS,CAAC,CAAC,YAAY;IAClD;IACA,MAAA,OAAQ,CAAC,MAAM3C,OAAO,CAAC2C,SAAS,CAACJ,OAAO,CAAC0K,IAAI,CAACN,QAAQ,CAAC,CAAC;IACpD;IACA;IACA;IACA;IACA;IACC,MAAA,MAAMI,cAAc,CAAC,CAAA;IAC9B,KAAC,GAAG,CAAC,CAAA;QACsC;IACvC/R,MAAAA,MAAM,CAACQ,cAAc,CAACiB,QAAQ,CAACwP,aAAa,CAAC,IAAI,CAAClN,WAAW,CAAClB,IAAI,EAAEiE,OAAO,CAAC,CAAC,CAAA;IAC7E,MAAA,KAAK,MAAMzG,GAAG,IAAIqR,IAAI,EAAE;IACpB1R,QAAAA,MAAM,CAACK,GAAG,CAACA,GAAG,CAAC,CAAA;IACnB,OAAA;IACAoB,MAAAA,QAAQ,CAAC0P,kBAAkB,CAAC/G,QAAQ,CAAC,CAAA;UACrCpK,MAAM,CAACS,QAAQ,EAAE,CAAA;IACrB,KAAA;QACA,IAAI,CAAC2J,QAAQ,EAAE;IACX,MAAA,MAAM,IAAItG,YAAY,CAAC,aAAa,EAAE;YAAEV,GAAG,EAAE0D,OAAO,CAAC1D,GAAAA;IAAI,OAAC,CAAC,CAAA;IAC/D,KAAA;IACA,IAAA,OAAOgH,QAAQ,CAAA;IACnB,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACI0H,EAAAA,kBAAkB,CAAC;QAAEhL,OAAO;QAAE4K,IAAI;IAAE1M,IAAAA,OAAAA;IAAS,GAAC,EAAE;IAC5C,IAAA,IAAI4M,SAAS,CAAA;IACb,IAAA,MAAMM,cAAc,GAAG,IAAI3K,OAAO,CAAEqF,OAAO,IAAK;UAC5C,MAAMuF,gBAAgB,GAAG,YAAY;YACU;cACvCT,IAAI,CAACpJ,IAAI,CAAE,CAAoC,mCAAA,CAAA,GAC1C,GAAE,IAAI,CAACkJ,sBAAuB,CAAA,SAAA,CAAU,CAAC,CAAA;IAClD,SAAA;YACA5E,OAAO,CAAC,MAAM5H,OAAO,CAACmK,UAAU,CAACrI,OAAO,CAAC,CAAC,CAAA;WAC7C,CAAA;UACD8K,SAAS,GAAGzE,UAAU,CAACgF,gBAAgB,EAAE,IAAI,CAACX,sBAAsB,GAAG,IAAI,CAAC,CAAA;IAChF,KAAC,CAAC,CAAA;QACF,OAAO;IACH7E,MAAAA,OAAO,EAAEuF,cAAc;IACvBL,MAAAA,EAAE,EAAED,SAAAA;SACP,CAAA;IACL,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACI,EAAA,MAAMI,kBAAkB,CAAC;QAAEJ,SAAS;QAAE9K,OAAO;QAAE4K,IAAI;IAAE1M,IAAAA,OAAAA;IAAS,GAAC,EAAE;IAC7D,IAAA,IAAIzE,KAAK,CAAA;IACT,IAAA,IAAI6J,QAAQ,CAAA;QACZ,IAAI;IACAA,MAAAA,QAAQ,GAAG,MAAMpF,OAAO,CAACgK,gBAAgB,CAAClI,OAAO,CAAC,CAAA;SACrD,CACD,OAAOsL,UAAU,EAAE;UACf,IAAIA,UAAU,YAAYvQ,KAAK,EAAE;IAC7BtB,QAAAA,KAAK,GAAG6R,UAAU,CAAA;IACtB,OAAA;IACJ,KAAA;IACA,IAAA,IAAIR,SAAS,EAAE;UACXS,YAAY,CAACT,SAAS,CAAC,CAAA;IAC3B,KAAA;QAC2C;IACvC,MAAA,IAAIxH,QAAQ,EAAE;IACVsH,QAAAA,IAAI,CAACpJ,IAAI,CAAE,CAAA,0BAAA,CAA2B,CAAC,CAAA;IAC3C,OAAC,MACI;IACDoJ,QAAAA,IAAI,CAACpJ,IAAI,CAAE,CAAyD,wDAAA,CAAA,GAC/D,yBAAwB,CAAC,CAAA;IAClC,OAAA;IACJ,KAAA;IACA,IAAA,IAAI/H,KAAK,IAAI,CAAC6J,QAAQ,EAAE;IACpBA,MAAAA,QAAQ,GAAG,MAAMpF,OAAO,CAACmK,UAAU,CAACrI,OAAO,CAAC,CAAA;UACD;IACvC,QAAA,IAAIsD,QAAQ,EAAE;cACVsH,IAAI,CAACpJ,IAAI,CAAE,CAAkC,gCAAA,EAAA,IAAI,CAAC/E,SAAU,CAAA,CAAA,CAAE,GAAI,CAAA,OAAA,CAAQ,CAAC,CAAA;IAC/E,SAAC,MACI;cACDmO,IAAI,CAACpJ,IAAI,CAAE,CAAA,0BAAA,EAA4B,IAAI,CAAC/E,SAAU,UAAS,CAAC,CAAA;IACpE,SAAA;IACJ,OAAA;IACJ,KAAA;IACA,IAAA,OAAO6G,QAAQ,CAAA;IACnB,GAAA;IACJ;;ICnMA;IACA;AACA;IACA;IACA;IACA;IACA;IAQA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAMkI,WAAW,SAAS7B,QAAQ,CAAC;IAC/B;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACI1M,EAAAA,WAAW,CAACyJ,OAAO,GAAG,EAAE,EAAE;QACtB,KAAK,CAACA,OAAO,CAAC,CAAA;IACd,IAAA,IAAI,CAACgE,sBAAsB,GAAGhE,OAAO,CAACiE,qBAAqB,IAAI,CAAC,CAAA;IACpE,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACI,EAAA,MAAMV,OAAO,CAACjK,OAAO,EAAE9B,OAAO,EAAE;QACe;IACvCC,MAAAA,kBAAM,CAACX,UAAU,CAACwC,OAAO,EAAEY,OAAO,EAAE;IAChC1F,QAAAA,UAAU,EAAE,oBAAoB;IAChCC,QAAAA,SAAS,EAAE,IAAI,CAAC8B,WAAW,CAAClB,IAAI;IAChCX,QAAAA,QAAQ,EAAE,SAAS;IACnBR,QAAAA,SAAS,EAAE,SAAA;IACf,OAAC,CAAC,CAAA;IACN,KAAA;QACA,IAAInB,KAAK,GAAG2I,SAAS,CAAA;IACrB,IAAA,IAAIkB,QAAQ,CAAA;QACZ,IAAI;UACA,MAAMuH,QAAQ,GAAG,CACb3M,OAAO,CAACkJ,KAAK,CAACpH,OAAO,CAAC,CACzB,CAAA;UACD,IAAI,IAAI,CAAC0K,sBAAsB,EAAE;YAC7B,MAAMU,cAAc,GAAGjF,OAAO,CAAC,IAAI,CAACuE,sBAAsB,GAAG,IAAI,CAAC,CAAA;IAClEG,QAAAA,QAAQ,CAACrJ,IAAI,CAAC4J,cAAc,CAAC,CAAA;IACjC,OAAA;IACA9H,MAAAA,QAAQ,GAAG,MAAM7C,OAAO,CAAC0K,IAAI,CAACN,QAAQ,CAAC,CAAA;UACvC,IAAI,CAACvH,QAAQ,EAAE;YACX,MAAM,IAAIvI,KAAK,CAAE,CAAsC,qCAAA,CAAA,GAClD,GAAE,IAAI,CAAC2P,sBAAuB,CAAA,SAAA,CAAU,CAAC,CAAA;IAClD,OAAA;SACH,CACD,OAAO7I,GAAG,EAAE;UACR,IAAIA,GAAG,YAAY9G,KAAK,EAAE;IACtBtB,QAAAA,KAAK,GAAGoI,GAAG,CAAA;IACf,OAAA;IACJ,KAAA;QAC2C;IACvC3I,MAAAA,MAAM,CAACQ,cAAc,CAACiB,QAAQ,CAACwP,aAAa,CAAC,IAAI,CAAClN,WAAW,CAAClB,IAAI,EAAEiE,OAAO,CAAC,CAAC,CAAA;IAC7E,MAAA,IAAIsD,QAAQ,EAAE;IACVpK,QAAAA,MAAM,CAACK,GAAG,CAAE,CAAA,0BAAA,CAA2B,CAAC,CAAA;IAC5C,OAAC,MACI;IACDL,QAAAA,MAAM,CAACK,GAAG,CAAE,CAAA,0CAAA,CAA2C,CAAC,CAAA;IAC5D,OAAA;IACAoB,MAAAA,QAAQ,CAAC0P,kBAAkB,CAAC/G,QAAQ,CAAC,CAAA;UACrCpK,MAAM,CAACS,QAAQ,EAAE,CAAA;IACrB,KAAA;QACA,IAAI,CAAC2J,QAAQ,EAAE;IACX,MAAA,MAAM,IAAItG,YAAY,CAAC,aAAa,EAAE;YAAEV,GAAG,EAAE0D,OAAO,CAAC1D,GAAG;IAAE7C,QAAAA,KAAAA;IAAM,OAAC,CAAC,CAAA;IACtE,KAAA;IACA,IAAA,OAAO6J,QAAQ,CAAA;IACnB,GAAA;IACJ;;IChGA;IACA;AACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA,SAASmI,YAAY,GAAG;IACpB1S,EAAAA,IAAI,CAAC+G,gBAAgB,CAAC,UAAU,EAAE,MAAM/G,IAAI,CAAC2S,OAAO,CAACC,KAAK,EAAE,CAAC,CAAA;IACjE;;;;;;;;;;;"}
\ No newline at end of file
diff --git a/app/sentry.client.config.js b/app/sentry.client.config.js
new file mode 100644
index 000000000..ca473045b
--- /dev/null
+++ b/app/sentry.client.config.js
@@ -0,0 +1,18 @@
+// This file configures the initialization of Sentry on the browser.
+// The config you add here will be used whenever a page is visited.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT || "development",
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});
diff --git a/app/sentry.edge.config.js b/app/sentry.edge.config.js
new file mode 100644
index 000000000..8374ed410
--- /dev/null
+++ b/app/sentry.edge.config.js
@@ -0,0 +1,18 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever middleware or an Edge route handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT || "development",
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});
diff --git a/app/sentry.properties b/app/sentry.properties
new file mode 100644
index 000000000..6796827bd
--- /dev/null
+++ b/app/sentry.properties
@@ -0,0 +1,3 @@
+defaults.url=https://sentry.io/
+defaults.org=plane
+defaults.project=plane-web
diff --git a/app/sentry.server.config.js b/app/sentry.server.config.js
new file mode 100644
index 000000000..d2acb07e1
--- /dev/null
+++ b/app/sentry.server.config.js
@@ -0,0 +1,18 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT || "development",
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});
diff --git a/app/services/ai.service.ts b/app/services/ai.service.ts
new file mode 100644
index 000000000..6d1e3b0f9
--- /dev/null
+++ b/app/services/ai.service.ts
@@ -0,0 +1,34 @@
+// services
+import APIService from "services/api.service";
+import trackEventServices from "services/track-event.service";
+
+// types
+import { IGptResponse } from "types";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+const trackEvent =
+  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
+
+class AiServices extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async createGptTask(
+    workspaceSlug: string,
+    projectId: string,
+    data: { prompt: string; task: string }
+  ): Promise<IGptResponse> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/ai-assistant/`, data)
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackAskGptEvent(response?.data, "ASK_GPT");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}
+
+export default new AiServices();
diff --git a/app/services/api.service.ts b/app/services/api.service.ts
new file mode 100644
index 000000000..a625c0b37
--- /dev/null
+++ b/app/services/api.service.ts
@@ -0,0 +1,117 @@
+import axios from "axios";
+import Cookies from "js-cookie";
+
+abstract class APIService {
+  protected baseURL: string;
+  protected headers: any = {};
+
+  constructor(baseURL: string) {
+    this.baseURL = baseURL;
+  }
+
+  setRefreshToken(token: string) {
+    Cookies.set("refreshToken", token);
+  }
+
+  getRefreshToken() {
+    return Cookies.get("refreshToken");
+  }
+
+  purgeRefreshToken() {
+    Cookies.remove("refreshToken", { path: "/" });
+  }
+
+  setAccessToken(token: string) {
+    Cookies.set("accessToken", token);
+  }
+
+  getAccessToken() {
+    return Cookies.get("accessToken");
+  }
+
+  purgeAccessToken() {
+    Cookies.remove("accessToken", { path: "/" });
+  }
+
+  getHeaders() {
+    return {
+      Authorization: `Bearer ${this.getAccessToken()}`,
+    };
+  }
+
+  getWithoutBase(url: string, config = {}): Promise<any> {
+    return axios({
+      method: "get",
+      url: url,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  get(url: string, config = {}): Promise<any> {
+    return axios({
+      method: "get",
+      url: this.baseURL + url,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  post(url: string, data = {}, config = {}): Promise<any> {
+    return axios({
+      method: "post",
+      url: this.baseURL + url,
+      data,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  put(url: string, data = {}, config = {}): Promise<any> {
+    return axios({
+      method: "put",
+      url: this.baseURL + url,
+      data,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  patch(url: string, data = {}, config = {}): Promise<any> {
+    return axios({
+      method: "patch",
+      url: this.baseURL + url,
+      data,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  delete(url: string, data?: any, config = {}): Promise<any> {
+    return axios({
+      method: "delete",
+      url: this.baseURL + url,
+      data: data,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  mediaUpload(url: string, data = {}, config = {}): Promise<any> {
+    return axios({
+      method: "post",
+      url: this.baseURL + url,
+      data,
+      headers: this.getAccessToken()
+        ? { ...this.getHeaders(), "Content-Type": "multipart/form-data" }
+        : {},
+      ...config,
+    });
+  }
+
+  request(config = {}) {
+    return axios(config);
+  }
+}
+
+export default APIService;
diff --git a/app/services/app-installations.service.ts b/app/services/app-installations.service.ts
new file mode 100644
index 000000000..3ceae3b1a
--- /dev/null
+++ b/app/services/app-installations.service.ts
@@ -0,0 +1,20 @@
+// services
+import APIService from "services/api.service";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+class AppInstallationsService extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async addGithubApp(workspaceSlug: string, provider: string, data: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/workspace-integrations/${provider}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}
+
+export default new AppInstallationsService();
diff --git a/app/services/authentication.service.ts b/app/services/authentication.service.ts
new file mode 100644
index 000000000..291f255d8
--- /dev/null
+++ b/app/services/authentication.service.ts
@@ -0,0 +1,67 @@
+// services
+import APIService from "services/api.service";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+class AuthService extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async emailLogin(data: any) {
+    return this.post("/api/sign-in/", data, { headers: {} })
+      .then((response) => {
+        this.setAccessToken(response?.data?.access_token);
+        this.setRefreshToken(response?.data?.refresh_token);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async socialAuth(data: any) {
+    return this.post("/api/social-auth/", data, { headers: {} })
+      .then((response) => {
+        this.setAccessToken(response?.data?.access_token);
+        this.setRefreshToken(response?.data?.refresh_token);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async emailCode(data: any) {
+    return this.post("/api/magic-generate/", data, { headers: {} })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+  async magicSignIn(data: any) {
+    const response = await this.post("/api/magic-sign-in/", data, { headers: {} });
+    if (response?.status === 200) {
+      this.setAccessToken(response?.data?.access_token);
+      this.setRefreshToken(response?.data?.refresh_token);
+      return response?.data;
+    }
+    throw response.response.data;
+  }
+
+  async signOut() {
+    return this.post("/api/sign-out/", { refresh_token: this.getRefreshToken() })
+      .then((response) => {
+        this.purgeAccessToken();
+        this.purgeRefreshToken();
+        return response?.data;
+      })
+      .catch((error) => {
+        this.purgeAccessToken();
+        this.purgeRefreshToken();
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new AuthService();
diff --git a/app/services/cycles.service.ts b/app/services/cycles.service.ts
new file mode 100644
index 000000000..0e942fed0
--- /dev/null
+++ b/app/services/cycles.service.ts
@@ -0,0 +1,246 @@
+// services
+import APIService from "services/api.service";
+import trackEventServices from "services/track-event.service";
+
+// types
+import type {
+  CycleIssueResponse,
+  CompletedCyclesResponse,
+  CurrentAndUpcomingCyclesResponse,
+  DraftCyclesResponse,
+  ICycle,
+  IIssue,
+  IIssueViewOptions,
+} from "types";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+const trackEvent =
+  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
+
+class ProjectCycleServices extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async createCycle(workspaceSlug: string, projectId: string, data: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/`, data)
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackCycleEvent(response?.data, "CYCLE_CREATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getCycles(workspaceSlug: string, projectId: string): Promise<ICycle[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIncompleteCycles(workspaceSlug: string, projectId: string): Promise<ICycle[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/incomplete-cycles/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getCycleDetails(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string
+  ): Promise<ICycle> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async getCycleIssues(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string
+  ): Promise<IIssue[]> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getCycleIssuesWithParams(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    queries?: Partial<IIssueViewOptions>
+  ): Promise<IIssue[] | { [key: string]: IIssue[] }> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`,
+      { params: queries }
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateCycle(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    data: any
+  ): Promise<any> {
+    return this.put(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackCycleEvent(response?.data, "CYCLE_UPDATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchCycle(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    data: Partial<ICycle>
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackCycleEvent(response?.data, "CYCLE_UPDATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteCycle(workspaceSlug: string, projectId: string, cycleId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`)
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackCycleEvent(response?.data, "CYCLE_DELETE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async cycleDateCheck(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      start_date: string;
+      end_date: string;
+    }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/date-check/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getCurrentAndUpcomingCycles(
+    workspaceSlug: string,
+    projectId: string
+  ): Promise<CurrentAndUpcomingCyclesResponse> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/current-upcoming-cycles/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getDraftCycles(workspaceSlug: string, projectId: string): Promise<DraftCyclesResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/draft-cycles/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getCompletedCycles(
+    workspaceSlug: string,
+    projectId: string
+  ): Promise<CompletedCyclesResponse> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/completed-cycles/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addCycleToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      cycle: string;
+    }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async transferIssues(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    data: {
+      new_cycle_id: string;
+    }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/transfer-issues/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeCycleFromFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/${cycleId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new ProjectCycleServices();
diff --git a/app/services/estimates.service.ts b/app/services/estimates.service.ts
new file mode 100644
index 000000000..0718f286b
--- /dev/null
+++ b/app/services/estimates.service.ts
@@ -0,0 +1,74 @@
+// services
+import APIService from "services/api.service";
+// types
+import type { IEstimate, IEstimateFormData, IEstimatePoint } from "types";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+class ProjectEstimateServices extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async createEstimate(
+    workspaceSlug: string,
+    projectId: string,
+    data: IEstimateFormData
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async patchEstimate(
+    workspaceSlug: string,
+    projectId: string,
+    estimateId: string,
+    data: IEstimateFormData
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getEstimateDetails(
+    workspaceSlug: string,
+    projectId: string,
+    estimateId: string
+  ): Promise<IEstimate> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getEstimatesList(workspaceSlug: string, projectId: string): Promise<IEstimate[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteEstimate(workspaceSlug: string, projectId: string, estimateId: string): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new ProjectEstimateServices();
diff --git a/app/services/file.service.ts b/app/services/file.service.ts
new file mode 100644
index 000000000..d3a5118b8
--- /dev/null
+++ b/app/services/file.service.ts
@@ -0,0 +1,86 @@
+// services
+import APIService from "services/api.service";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+interface UnSplashImage {
+  id: string;
+  created_at: Date;
+  updated_at: Date;
+  promoted_at: Date;
+  width: number;
+  height: number;
+  color: string;
+  blur_hash: string;
+  description: null;
+  alt_description: string;
+  urls: UnSplashImageUrls;
+  [key: string]: any;
+}
+
+interface UnSplashImageUrls {
+  raw: string;
+  full: string;
+  regular: string;
+  small: string;
+  thumb: string;
+  small_s3: string;
+}
+
+class FileServices extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async uploadFile(workspaceSlug: string, file: FormData): Promise<any> {
+    return this.mediaUpload(`/api/workspaces/${workspaceSlug}/file-assets/`, file)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteFile(asset: string): Promise<any> {
+    return this.delete(`/api/workspaces/file-assets/${asset}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async uploadUserFile(file: FormData): Promise<any> {
+    return this.mediaUpload(`/api/users/file-assets/`, file)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteUserFile(asset: string): Promise<any> {
+    return this.delete(`/api/users/file-assets/${asset}`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getUnsplashImages(page: number = 1, query?: string): Promise<UnSplashImage[]> {
+    const url = "/api/unsplash";
+
+    return this.request({
+      method: "get",
+      url,
+      params: {
+        page,
+        per_page: 20,
+        query,
+      },
+    })
+      .then((response) => response?.data?.results ?? response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new FileServices();
diff --git a/app/services/integration/github.service.ts b/app/services/integration/github.service.ts
new file mode 100644
index 000000000..641d2cd2c
--- /dev/null
+++ b/app/services/integration/github.service.ts
@@ -0,0 +1,51 @@
+import APIService from "services/api.service";
+import { IGithubRepoInfo, IGithubServiceImportFormData } from "types";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+const integrationServiceType: string = "github";
+
+class GithubIntegrationService extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async listAllRepositories(workspaceSlug: string, integrationSlug: string): Promise<any> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/workspace-integrations/${integrationSlug}/github-repositories`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getGithubRepoInfo(
+    workspaceSlug: string,
+    params: { owner: string; repo: string }
+  ): Promise<IGithubRepoInfo> {
+    return this.get(`/api/workspaces/${workspaceSlug}/importers/${integrationServiceType}/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createGithubServiceImport(
+    workspaceSlug: string,
+    data: IGithubServiceImportFormData
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/importers/${integrationServiceType}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new GithubIntegrationService();
diff --git a/app/services/integration/index.ts b/app/services/integration/index.ts
new file mode 100644
index 000000000..425087085
--- /dev/null
+++ b/app/services/integration/index.ts
@@ -0,0 +1,59 @@
+import APIService from "services/api.service";
+// types
+import { IAppIntegration, IImporterService, IWorkspaceIntegration } from "types";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+class IntegrationService extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async getAppIntegrationsList(): Promise<IAppIntegration[]> {
+    return this.get(`/api/integrations/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getWorkspaceIntegrationsList(workspaceSlug: string): Promise<IWorkspaceIntegration[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/workspace-integrations/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteWorkspaceIntegration(workspaceSlug: string, integrationId: string): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/workspace-integrations/${integrationId}/provider/`
+    )
+      .then((res) => res?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getImporterServicesList(workspaceSlug: string): Promise<IImporterService[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/importers/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteImporterService(
+    workspaceSlug: string,
+    service: string,
+    importerId: string
+  ): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/importers/${service}/${importerId}/`)
+      .then((res) => res?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new IntegrationService();
diff --git a/app/services/integration/jira.service.ts b/app/services/integration/jira.service.ts
new file mode 100644
index 000000000..20ad8166a
--- /dev/null
+++ b/app/services/integration/jira.service.ts
@@ -0,0 +1,34 @@
+import APIService from "services/api.service";
+
+// types
+import { IJiraMetadata, IJiraResponse, IJiraImporterForm } from "types";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+class JiraImportedService extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async getJiraProjectInfo(workspaceSlug: string, params: IJiraMetadata): Promise<IJiraResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/importers/jira`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createJiraImporter(workspaceSlug: string, data: IJiraImporterForm): Promise<IJiraResponse> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/importers/jira/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+const jiraImporterService = new JiraImportedService();
+
+export default jiraImporterService;
diff --git a/app/services/issues.service.ts b/app/services/issues.service.ts
new file mode 100644
index 000000000..c5a23b232
--- /dev/null
+++ b/app/services/issues.service.ts
@@ -0,0 +1,490 @@
+// services
+import APIService from "services/api.service";
+import trackEventServices from "services/track-event.service";
+// type
+import type { IIssue, IIssueActivity, IIssueComment, IIssueLabels, IIssueViewOptions } from "types";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+const trackEvent =
+  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
+
+class ProjectIssuesServices extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async createIssues(workspaceSlug: string, projectId: string, data: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/`, data)
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackIssueEvent(response.data, "ISSUE_CREATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssues(workspaceSlug: string, projectId: string): Promise<IIssue[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssuesWithParams(
+    workspaceSlug: string,
+    projectId: string,
+    queries?: any
+  ): Promise<IIssue[] | { [key: string]: IIssue[] }> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/`, {
+      params: queries,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async retrieve(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssueActivities(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string
+  ): Promise<IIssueActivity[]> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/history/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssueComments(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssueProperties(workspaceSlug: string, projectId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-properties/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addIssueToCycle(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    data: {
+      issues: string[];
+    }
+  ) {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent)
+          trackEventServices.trackIssueMovedToCycleOrModuleEvent(
+            {
+              workspaceSlug,
+              workspaceName: response?.data?.[0]?.issue_detail?.workspace_detail?.name,
+              projectId,
+              projectIdentifier: response?.data?.[0]?.issue_detail?.project_detail?.identifier,
+              projectName: response?.data?.[0]?.issue_detail?.project_detail?.name,
+              issueId: response?.data?.[0]?.issue_detail?.id,
+              cycleId,
+            },
+            response.data.length > 1 ? "ISSUE_MOVED_TO_CYCLE_IN_BULK" : "ISSUE_MOVED_TO_CYCLE"
+          );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeIssueFromCycle(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    bridgeId: string
+  ) {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/${bridgeId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createIssueProperties(workspaceSlug: string, projectId: string, data: any): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-properties/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchIssueProperties(
+    workspaceSlug: string,
+    projectId: string,
+    issuePropertyId: string,
+    data: any
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-properties/` +
+        `${issuePropertyId}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createIssueComment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: any
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent)
+          trackEventServices.trackIssueCommentEvent(response.data, "ISSUE_COMMENT_CREATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchIssueComment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    data: IIssueComment
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/${commentId}/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent)
+          trackEventServices.trackIssueCommentEvent(response.data, "ISSUE_COMMENT_UPDATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssueComment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/${commentId}/`
+    )
+      .then((response) => {
+        if (trackEvent)
+          trackEventServices.trackIssueCommentEvent(
+            {
+              issueId,
+              commentId,
+            },
+            "ISSUE_COMMENT_DELETE"
+          );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssueLabels(workspaceSlug: string, projectId: string): Promise<IIssueLabels[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createIssueLabel(
+    workspaceSlug: string,
+    projectId: string,
+    data: any
+  ): Promise<IIssueLabels> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/`, data)
+      .then((response: { data: IIssueLabels; [key: string]: any }) => {
+        if (trackEvent)
+          trackEventServices.trackIssueLabelEvent(
+            {
+              workSpaceId: response?.data?.workspace_detail?.id,
+              workSpaceName: response?.data?.workspace_detail?.name,
+              workspaceSlug,
+              projectId,
+              projectIdentifier: response?.data?.project_detail?.identifier,
+              projectName: response?.data?.project_detail?.name,
+              labelId: response?.data?.id,
+              color: response?.data?.color,
+            },
+            "ISSUE_LABEL_CREATE"
+          );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchIssueLabel(
+    workspaceSlug: string,
+    projectId: string,
+    labelId: string,
+    data: any
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/${labelId}/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent)
+          trackEventServices.trackIssueLabelEvent(
+            {
+              workSpaceId: response?.data?.workspace_detail?.id,
+              workSpaceName: response?.data?.workspace_detail?.name,
+              workspaceSlug,
+              projectId,
+              projectIdentifier: response?.data?.project_detail?.identifier,
+              projectName: response?.data?.project_detail?.name,
+              labelId: response?.data?.id,
+              color: response?.data?.color,
+            },
+            "ISSUE_LABEL_UPDATE"
+          );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssueLabel(workspaceSlug: string, projectId: string, labelId: string): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/${labelId}/`
+    )
+      .then((response) => {
+        if (trackEvent)
+          trackEventServices.trackIssueLabelEvent(
+            {
+              workspaceSlug,
+              projectId,
+            },
+            "ISSUE_LABEL_DELETE"
+          );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateIssue(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: any
+  ): Promise<any> {
+    return this.put(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackIssueEvent(response.data, "ISSUE_UPDATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchIssue(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: Partial<IIssue>
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackIssueEvent(response.data, "ISSUE_UPDATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssue(workspaceSlug: string, projectId: string, issuesId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issuesId}/`)
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackIssueEvent({ issuesId }, "ISSUE_DELETE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async bulkDeleteIssues(workspaceSlug: string, projectId: string, data: any): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/bulk-delete-issues/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackIssueBulkDeleteEvent(data);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async subIssues(workspaceSlug: string, projectId: string, issueId: string) {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/sub-issues/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addSubIssues(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: { sub_issue_ids: string[] }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/sub-issues/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createIssueLink(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: {
+      metadata: any;
+      title: string;
+      url: string;
+    }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteIssueLink(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    linkId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/${linkId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async uploadIssueAttachment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    file: FormData
+  ): Promise<any> {
+    return this.mediaUpload(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-attachments/`,
+      file
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssueAttachment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string
+  ): Promise<any> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-attachments/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssueAttachment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    assetId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-attachments/${assetId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new ProjectIssuesServices();
diff --git a/app/services/modules.service.ts b/app/services/modules.service.ts
new file mode 100644
index 000000000..89227982c
--- /dev/null
+++ b/app/services/modules.service.ts
@@ -0,0 +1,248 @@
+// services
+import APIService from "services/api.service";
+import trackEventServices from "./track-event.service";
+
+// types
+import type { IIssueViewOptions, IModule, IIssue } from "types";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+const trackEvent =
+  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
+
+class ProjectIssuesServices extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async getModules(workspaceSlug: string, projectId: string): Promise<IModule[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createModule(workspaceSlug: string, projectId: string, data: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/`, data)
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackModuleEvent(response?.data, "MODULE_CREATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: any
+  ): Promise<any> {
+    return this.put(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackModuleEvent(response?.data, "MODULE_UPDATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getModuleDetails(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string
+  ): Promise<IModule> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: any
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackModuleEvent(response?.data, "MODULE_UPDATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteModule(workspaceSlug: string, projectId: string, moduleId: string): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`
+    )
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackModuleEvent(response?.data, "MODULE_DELETE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getModuleIssues(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string
+  ): Promise<IIssue[]> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getModuleIssuesWithParams(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    queries?: Partial<IIssueViewOptions>
+  ): Promise<
+    | IIssue[]
+    | {
+        [key: string]: IIssue[];
+      }
+  > {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/`,
+      { params: queries }
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addIssuesToModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: { issues: string[] }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent)
+          trackEventServices.trackIssueMovedToCycleOrModuleEvent(
+            {
+              workspaceSlug,
+              workspaceName: response?.data?.[0]?.issue_detail?.workspace_detail?.name,
+              projectId,
+              projectIdentifier: response?.data?.[0]?.issue_detail?.project_detail?.identifier,
+              projectName: response?.data?.[0]?.issue_detail?.project_detail?.name,
+              issueId: response?.data?.[0]?.issue_detail?.id,
+              moduleId,
+            },
+            response?.data?.length > 1 ? "ISSUE_MOVED_TO_MODULE_IN_BULK" : "ISSUE_MOVED_TO_MODULE"
+          );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeIssueFromModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    bridgeId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/${bridgeId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createModuleLink(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: {
+      metadata: any;
+      title: string;
+      url: string;
+    }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-links/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteModuleLink(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    linkId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-links/${linkId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addModuleToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      module: string;
+    }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-modules/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeModuleFromFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-modules/${moduleId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new ProjectIssuesServices();
diff --git a/app/services/pages.service.ts b/app/services/pages.service.ts
new file mode 100644
index 000000000..89fba2624
--- /dev/null
+++ b/app/services/pages.service.ts
@@ -0,0 +1,242 @@
+// services
+import APIService from "services/api.service";
+import trackEventServices from "services/track-event.service";
+
+// types
+import { IPage, IPageBlock, RecentPagesResponse, IIssue } from "types";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+const trackEvent =
+  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
+
+class PageServices extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async createPage(workspaceSlug: string, projectId: string, data: Partial<IPage>): Promise<IPage> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/`, data)
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackPageEvent(response?.data, "PAGE_CREATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchPage(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    data: Partial<IPage>
+  ): Promise<IPage> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackPageEvent(response?.data, "PAGE_UPDATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deletePage(workspaceSlug: string, projectId: string, pageId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/`)
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackPageEvent(response?.data, "PAGE_DELETE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addPageToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      page: string;
+    }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-pages/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removePageFromFavorites(workspaceSlug: string, projectId: string, pageId: string) {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-pages/${pageId}`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getRecentPages(workspaceSlug: string, projectId: string): Promise<RecentPagesResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/recent-pages/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getAllPages(workspaceSlug: string, projectId: string): Promise<IPage[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getFavoritePages(workspaceSlug: string, projectId: string): Promise<IPage[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/favorite-pages/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getMyPages(workspaceSlug: string, projectId: string): Promise<IPage[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/my-pages/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getOtherPages(workspaceSlug: string, projectId: string): Promise<IPage[]> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/created-by-other-pages/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getPageDetails(workspaceSlug: string, projectId: string, pageId: string): Promise<IPage> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createPageBlock(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    data: Partial<IPageBlock>
+  ): Promise<IPageBlock> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackPageBlockEvent(response?.data, "PAGE_BLOCK_CREATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getPageBlock(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    pageBlockId: string
+  ): Promise<IPageBlock[]> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/${pageBlockId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchPageBlock(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    pageBlockId: string,
+    data: Partial<IPageBlock>
+  ): Promise<IPage> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/${pageBlockId}/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackPageBlockEvent(response?.data, "PAGE_BLOCK_UPDATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deletePageBlock(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    pageBlockId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/${pageBlockId}/`
+    )
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackPageBlockEvent(response?.data, "PAGE_BLOCK_DELETE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async listPageBlocks(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string
+  ): Promise<IPageBlock[]> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async convertPageBlockToIssue(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    blockId: string
+  ): Promise<IIssue> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/${blockId}/issues/`
+    )
+      .then((response) => {
+        if (trackEvent)
+          trackEventServices.trackPageBlockEvent(response?.data, "PAGE_BLOCK_CONVERTED_TO_ISSUE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new PageServices();
diff --git a/app/services/project.service.ts b/app/services/project.service.ts
new file mode 100644
index 000000000..f1740152b
--- /dev/null
+++ b/app/services/project.service.ts
@@ -0,0 +1,312 @@
+// services
+import APIService from "services/api.service";
+import trackEventServices from "services/track-event.service";
+
+// types
+import type {
+  GithubRepositoriesResponse,
+  IFavoriteProject,
+  IProject,
+  IProjectMember,
+  IProjectMemberInvitation,
+  ProjectViewTheme,
+} from "types";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+const trackEvent =
+  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
+
+class ProjectServices extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async createProject(workspaceSlug: string, data: Partial<IProject>): Promise<IProject> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/`, data)
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackProjectEvent(response.data, "CREATE_PROJECT");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async checkProjectIdentifierAvailability(workspaceSlug: string, data: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/project-identifiers`, {
+      params: {
+        name: data,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getProjects(workspaceSlug: string): Promise<IProject[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getProject(workspaceSlug: string, projectId: string): Promise<IProject> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateProject(
+    workspaceSlug: string,
+    projectId: string,
+    data: Partial<IProject>
+  ): Promise<IProject> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`, data)
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackProjectEvent(response.data, "UPDATE_PROJECT");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteProject(workspaceSlug: string, projectId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`)
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackProjectEvent({ projectId }, "DELETE_PROJECT");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async inviteProject(workspaceSlug: string, projectId: string, data: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/add/`, data)
+      .then((response) => {
+        if (trackEvent)
+          trackEventServices.trackProjectEvent(
+            {
+              workspaceId: response?.data?.workspace?.id,
+              workspaceSlug,
+              projectId,
+              projectName: response?.data?.project?.name,
+              memberEmail: response?.data?.member?.email,
+            },
+            "PROJECT_MEMBER_INVITE"
+          );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async joinProject(workspaceSlug: string, data: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/join/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async joinProjects(data: any): Promise<any> {
+    return this.post("/api/users/me/invitations/projects/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async projectMembers(workspaceSlug: string, projectId: string): Promise<IProjectMember[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async projectMemberMe(workspaceSlug: string, projectId: string): Promise<IProjectMember> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/project-members/me/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getProjectMember(
+    workspaceSlug: string,
+    projectId: string,
+    memberId: string
+  ): Promise<IProjectMember> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateProjectMember(
+    workspaceSlug: string,
+    projectId: string,
+    memberId: string,
+    data: Partial<IProjectMember>
+  ): Promise<IProjectMember> {
+    return this.put(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteProjectMember(
+    workspaceSlug: string,
+    projectId: string,
+    memberId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async projectInvitations(
+    workspaceSlug: string,
+    projectId: string
+  ): Promise<IProjectMemberInvitation[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateProjectInvitation(
+    workspaceSlug: string,
+    projectId: string,
+    invitationId: string
+  ): Promise<any> {
+    return this.put(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/${invitationId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteProjectInvitation(
+    workspaceSlug: string,
+    projectId: string,
+    invitationId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/${invitationId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async setProjectView(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      view_props?: ProjectViewTheme;
+      default_props?: ProjectViewTheme;
+    }
+  ): Promise<any> {
+    await this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/project-views/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getGithubRepositories(url: string): Promise<GithubRepositoriesResponse> {
+    return this.getWithoutBase(url)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async syncGiuthubRepository(
+    workspaceSlug: string,
+    projectId: string,
+    workspaceIntegrationId: string,
+    data: {
+      name: string;
+      owner: string;
+      repository_id: string;
+      url: string;
+    }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${workspaceIntegrationId}/github-repository-sync/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getProjectGithubRepository(
+    workspaceSlug: string,
+    projectId: string,
+    integrationId: string
+  ): Promise<any> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/github-repository-sync/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getFavoriteProjects(workspaceSlug: string): Promise<IFavoriteProject[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-favorite-projects/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addProjectToFavorites(
+    workspaceSlug: string,
+    data: {
+      project: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/user-favorite-projects/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeProjectFromFavorites(workspaceSlug: string, projectId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/user-favorite-projects/${projectId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new ProjectServices();
diff --git a/app/services/state.service.ts b/app/services/state.service.ts
new file mode 100644
index 000000000..69f30a3dc
--- /dev/null
+++ b/app/services/state.service.ts
@@ -0,0 +1,104 @@
+// services
+import APIService from "services/api.service";
+import trackEventServices from "services/track-event.service";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+const trackEvent =
+  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
+
+// types
+import type { IState, StateResponse } from "types";
+
+class ProjectStateServices extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async createState(workspaceSlug: string, projectId: string, data: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/`, data)
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackStateEvent(response?.data, "STATE_CREATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getStates(workspaceSlug: string, projectId: string): Promise<StateResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssuesByState(workspaceSlug: string, projectId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/?group_by=state`)
+
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getState(workspaceSlug: string, projectId: string, stateId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateState(
+    workspaceSlug: string,
+    projectId: string,
+    stateId: string,
+    data: IState
+  ): Promise<any> {
+    return this.put(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackStateEvent(response?.data, "STATE_UPDATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async patchState(
+    workspaceSlug: string,
+    projectId: string,
+    stateId: string,
+    data: Partial<IState>
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackStateEvent(response?.data, "STATE_UPDATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteState(workspaceSlug: string, projectId: string, stateId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`)
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackStateEvent(response?.data, "STATE_DELETE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new ProjectStateServices();
diff --git a/app/services/track-event.service.ts b/app/services/track-event.service.ts
new file mode 100644
index 000000000..a8b77150c
--- /dev/null
+++ b/app/services/track-event.service.ts
@@ -0,0 +1,556 @@
+// services
+import APIService from "services/api.service";
+
+const trackEvent =
+  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
+
+// types
+import type {
+  ICycle,
+  IGptResponse,
+  IIssue,
+  IIssueComment,
+  IModule,
+  IPage,
+  IPageBlock,
+  IProject,
+  IState,
+  IView,
+  IWorkspace,
+} from "types";
+
+type WorkspaceEventType =
+  | "CREATE_WORKSPACE"
+  | "UPDATE_WORKSPACE"
+  | "DELETE_WORKSPACE"
+  | "WORKSPACE_USER_INVITE"
+  | "WORKSPACE_USER_INVITE_ACCEPT"
+  | "WORKSPACE_USER_BULK_INVITE_ACCEPT";
+
+type ProjectEventType =
+  | "CREATE_PROJECT"
+  | "UPDATE_PROJECT"
+  | "DELETE_PROJECT"
+  | "PROJECT_MEMBER_INVITE";
+
+type IssueEventType = "ISSUE_CREATE" | "ISSUE_UPDATE" | "ISSUE_DELETE";
+
+type CycleEventType = "CYCLE_CREATE" | "CYCLE_UPDATE" | "CYCLE_DELETE";
+
+type StateEventType = "STATE_CREATE" | "STATE_UPDATE" | "STATE_DELETE";
+
+type ModuleEventType = "MODULE_CREATE" | "MODULE_UPDATE" | "MODULE_DELETE";
+
+type PagesEventType = "PAGE_CREATE" | "PAGE_UPDATE" | "PAGE_DELETE";
+
+type ViewEventType = "VIEW_CREATE" | "VIEW_UPDATE" | "VIEW_DELETE";
+
+type IssueCommentType = "ISSUE_COMMENT_CREATE" | "ISSUE_COMMENT_UPDATE" | "ISSUE_COMMENT_DELETE";
+
+type MiscellaneousEventType =
+  | "TOGGLE_CYCLE_ON"
+  | "TOGGLE_CYCLE_OFF"
+  | "TOGGLE_MODULE_ON"
+  | "TOGGLE_MODULE_OFF"
+  | "TOGGLE_VIEW_ON"
+  | "TOGGLE_VIEW_OFF"
+  | "TOGGLE_PAGES_ON"
+  | "TOGGLE_PAGES_OFF"
+  | "TOGGLE_STATE_ON"
+  | "TOGGLE_STATE_OFF";
+
+type IntegrationEventType = "ADD_WORKSPACE_INTEGRATION" | "REMOVE_WORKSPACE_INTEGRATION";
+
+type GitHubSyncEventType = "GITHUB_REPO_SYNC";
+
+type PageBlocksEventType =
+  | "PAGE_BLOCK_CREATE"
+  | "PAGE_BLOCK_UPDATE"
+  | "PAGE_BLOCK_DELETE"
+  | "PAGE_BLOCK_CONVERTED_TO_ISSUE";
+
+type IssueLabelEventType = "ISSUE_LABEL_CREATE" | "ISSUE_LABEL_UPDATE" | "ISSUE_LABEL_DELETE";
+
+type GptEventType = "ASK_GPT" | "USE_GPT_RESPONSE_IN_ISSUE" | "USE_GPT_RESPONSE_IN_PAGE_BLOCK";
+
+class TrackEventServices extends APIService {
+  constructor() {
+    super("/");
+  }
+
+  async trackWorkspaceEvent(data: IWorkspace | any, eventName: WorkspaceEventType): Promise<any> {
+    let payload: any;
+    if (
+      eventName !== "DELETE_WORKSPACE" &&
+      eventName !== "WORKSPACE_USER_INVITE" &&
+      eventName !== "WORKSPACE_USER_INVITE_ACCEPT" &&
+      eventName !== "WORKSPACE_USER_BULK_INVITE_ACCEPT"
+    )
+      payload = {
+        workspaceId: data.id,
+        workspaceSlug: data.slug,
+        workspaceName: data.name,
+      };
+    else payload = data;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+      },
+    });
+  }
+
+  async trackProjectEvent(
+    data: Partial<IProject> | any,
+    eventName: ProjectEventType
+  ): Promise<any> {
+    let payload: any;
+    if (eventName !== "DELETE_PROJECT" && eventName !== "PROJECT_MEMBER_INVITE")
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.id,
+        projectName: data?.name,
+      };
+    else payload = data;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+      },
+    });
+  }
+
+  async trackUserOnboardingCompleteEvent(data: any): Promise<any> {
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName: "USER_ONBOARDING_COMPLETE",
+        extra: {
+          ...data,
+        },
+      },
+    });
+  }
+
+  async trackIssueEvent(data: IIssue | any, eventName: IssueEventType): Promise<any> {
+    let payload: any;
+    if (eventName !== "ISSUE_DELETE")
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectName: data?.project_detail?.name,
+        projectIdentifier: data?.project_detail?.identifier,
+        issueId: data?.id,
+      };
+    else payload = data;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+      },
+    });
+  }
+
+  async trackIssueMarkedAsDoneEvent(data: any): Promise<any> {
+    if (!trackEvent) return;
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName: "ISSUES_MARKED_AS_DONE",
+        extra: {
+          ...data,
+        },
+      },
+    });
+  }
+
+  async trackIssuePartialPropertyUpdateEvent(
+    data: any,
+    propertyName:
+      | "ISSUE_PROPERTY_UPDATE_PRIORITY"
+      | "ISSUE_PROPERTY_UPDATE_STATE"
+      | "ISSUE_PROPERTY_UPDATE_ASSIGNEE"
+      | "ISSUE_PROPERTY_UPDATE_DUE_DATE"
+      | "ISSUE_PROPERTY_UPDATE_ESTIMATE"
+  ): Promise<any> {
+    if (!trackEvent) return;
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName: propertyName,
+        extra: {
+          ...data,
+        },
+      },
+    });
+  }
+
+  async trackIssueCommentEvent(
+    data: Partial<IIssueComment> | any,
+    eventName: IssueCommentType
+  ): Promise<any> {
+    let payload: any;
+    if (eventName !== "ISSUE_COMMENT_DELETE")
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectName: data?.project_detail?.name,
+        projectIdentifier: data?.project_detail?.identifier,
+        issueId: data?.issue,
+      };
+    else payload = data;
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+      },
+    });
+  }
+
+  async trackIssueMovedToCycleOrModuleEvent(
+    data: any,
+    eventName:
+      | "ISSUE_MOVED_TO_CYCLE"
+      | "ISSUE_MOVED_TO_MODULE"
+      | "ISSUE_MOVED_TO_CYCLE_IN_BULK"
+      | "ISSUE_MOVED_TO_MODULE_IN_BULK"
+  ): Promise<any> {
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...data,
+        },
+      },
+    });
+  }
+
+  async trackIssueBulkDeleteEvent(data: any): Promise<any> {
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName: "ISSUE_BULK_DELETE",
+        extra: {
+          ...data,
+        },
+      },
+    });
+  }
+
+  async trackIssueLabelEvent(data: any, eventName: IssueLabelEventType): Promise<any> {
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...data,
+        },
+      },
+    });
+  }
+
+  async trackStateEvent(data: IState | any, eventName: StateEventType): Promise<any> {
+    let payload: any;
+    if (eventName !== "STATE_DELETE")
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectName: data?.project_detail?.name,
+        projectIdentifier: data?.project_detail?.identifier,
+        stateId: data.id,
+      };
+    else payload = data;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+      },
+    });
+  }
+
+  async trackCycleEvent(data: ICycle | any, eventName: CycleEventType): Promise<any> {
+    let payload: any;
+    if (eventName !== "CYCLE_DELETE")
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectName: data?.project_detail?.name,
+        projectIdentifier: data?.project_detail?.identifier,
+        cycleId: data.id,
+      };
+    else payload = data;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+      },
+    });
+  }
+
+  async trackModuleEvent(data: IModule | any, eventName: ModuleEventType): Promise<any> {
+    let payload: any;
+    if (eventName !== "MODULE_DELETE")
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectName: data.project_detail?.name,
+        projectIdentifier: data?.project_detail?.identifier,
+        moduleId: data.id,
+      };
+    else payload = data;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+      },
+    });
+  }
+
+  async trackPageEvent(data: Partial<IPage> | any, eventName: PagesEventType): Promise<any> {
+    let payload: any;
+    if (eventName !== "PAGE_DELETE")
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectName: data?.project_detail?.name,
+        projectIdentifier: data?.project_detail?.identifier,
+        pageId: data.id,
+      };
+    else payload = data;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+      },
+    });
+  }
+
+  async trackPageBlockEvent(
+    data: Partial<IPageBlock> | IIssue,
+    eventName: PageBlocksEventType
+  ): Promise<any> {
+    let payload: any;
+    if (eventName !== "PAGE_BLOCK_DELETE" && eventName !== "PAGE_BLOCK_CONVERTED_TO_ISSUE")
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectName: data?.project_detail?.name,
+        projectIdentifier: data?.project_detail?.identifier,
+        pageId: (data as IPageBlock)?.page,
+        pageBlockId: data.id,
+      };
+    else if (eventName === "PAGE_BLOCK_CONVERTED_TO_ISSUE") {
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectName: data?.project_detail?.name,
+        projectIdentifier: data?.project_detail?.identifier,
+        issueId: data?.id,
+      };
+    } else payload = data;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+      },
+    });
+  }
+
+  async trackAskGptEvent(data: IGptResponse, eventName: GptEventType): Promise<any> {
+    const payload = {
+      workspaceId: data?.workspace_detail?.id,
+      workspaceName: data?.workspace_detail?.name,
+      workspaceSlug: data?.workspace_detail?.slug,
+      projectId: data?.project_detail?.id,
+      projectIdentifier: data?.project_detail?.identifier,
+      projectName: data?.project_detail?.name,
+      count: data?.count,
+    };
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+      },
+    });
+  }
+
+  async trackUseGPTResponseEvent(data: IIssue | IPageBlock, eventName: GptEventType): Promise<any> {
+    if (!trackEvent) return;
+
+    let payload: any;
+
+    if (eventName === "USE_GPT_RESPONSE_IN_ISSUE") {
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectIdentifier: data?.project_detail?.identifier,
+        projectName: data?.project_detail?.name,
+        issueId: data.id,
+      };
+    } else if (eventName === "USE_GPT_RESPONSE_IN_PAGE_BLOCK") {
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectIdentifier: data?.project_detail?.identifier,
+        projectName: data?.project_detail?.name,
+        pageId: (data as IPageBlock)?.page,
+        pageBlockId: data.id,
+      };
+    }
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+      },
+    });
+  }
+
+  async trackViewEvent(data: IView, eventName: ViewEventType): Promise<any> {
+    let payload: any;
+    if (eventName === "VIEW_DELETE") payload = data;
+    else
+      payload = {
+        labels: Boolean(data.query_data.labels),
+        assignees: Boolean(data.query_data.assignees),
+        priority: Boolean(data.query_data.priority),
+        state: Boolean(data.query_data.state),
+        created_by: Boolean(data.query_data.created_by),
+      };
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+      },
+    });
+  }
+
+  async trackMiscellaneousEvent(data: any, eventName: MiscellaneousEventType): Promise<any> {
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...data,
+        },
+      },
+    });
+  }
+
+  async trackAppIntegrationEvent(data: any, eventName: IntegrationEventType): Promise<any> {
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...data,
+        },
+      },
+    });
+  }
+
+  async trackGitHubSyncEvent(data: any, eventName: GitHubSyncEventType): Promise<any> {
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...data,
+        },
+      },
+    });
+  }
+}
+
+const trackEventServices = new TrackEventServices();
+
+export default trackEventServices;
diff --git a/app/services/user.service.ts b/app/services/user.service.ts
new file mode 100644
index 000000000..5f0786b81
--- /dev/null
+++ b/app/services/user.service.ts
@@ -0,0 +1,94 @@
+// services
+import APIService from "services/api.service";
+import trackEventServices from "services/track-event.service";
+
+import type {
+  ICurrentUserResponse,
+  IUser,
+  IUserActivityResponse,
+  IUserWorkspaceDashboard,
+} from "types";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+const trackEvent =
+  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
+
+class UserService extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  currentUserConfig() {
+    return {
+      url: `${this.baseURL}/api/users/me/`,
+      headers: this.getHeaders(),
+    };
+  }
+
+  async userIssues(workspaceSlug: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/my-issues/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async currentUser(): Promise<ICurrentUserResponse> {
+    return this.get("/api/users/me/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateUser(data: Partial<IUser>): Promise<any> {
+    return this.patch("/api/users/me/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateUserOnBoard({ userRole }: any): Promise<any> {
+    return this.patch("/api/users/me/onboard/", {
+      is_onboarded: true,
+    })
+      .then((response) => {
+        if (trackEvent)
+          trackEventServices.trackUserOnboardingCompleteEvent({
+            ...response.data,
+            user_role: userRole ?? "None",
+          });
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getUserActivity(): Promise<IUserActivityResponse> {
+    return this.get("/api/users/activities/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async userWorkspaceDashboard(
+    workspaceSlug: string,
+    month: number
+  ): Promise<IUserWorkspaceDashboard> {
+    return this.get(`/api/users/me/workspaces/${workspaceSlug}/dashboard/`, {
+      params: {
+        month: month,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new UserService();
diff --git a/app/services/views.service.ts b/app/services/views.service.ts
new file mode 100644
index 000000000..af2426a7c
--- /dev/null
+++ b/app/services/views.service.ts
@@ -0,0 +1,133 @@
+// services
+import APIService from "services/api.service";
+import trackEventServices from "services/track-event.service";
+
+// types
+import { IView } from "types/views";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+const trackEvent =
+  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
+
+class ViewServices extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async createView(workspaceSlug: string, projectId: string, data: IView): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/`, data)
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackViewEvent(response?.data, "VIEW_CREATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateView(
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    data: IView
+  ): Promise<any> {
+    return this.put(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`, data)
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackViewEvent(response?.data, "VIEW_UPDATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchView(
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    data: Partial<IView>
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackViewEvent(response?.data, "VIEW_UPDATE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteView(workspaceSlug: string, projectId: string, viewId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`)
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackViewEvent(response?.data, "VIEW_DELETE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViews(workspaceSlug: string, projectId: string): Promise<IView[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViewDetails(workspaceSlug: string, projectId: string, viewId: string): Promise<IView> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViewIssues(workspaceSlug: string, projectId: string, viewId: string): Promise<any> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/issues/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addViewToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      view: string;
+    }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-views/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeViewFromFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-views/${viewId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new ViewServices();
diff --git a/app/services/workspace.service.ts b/app/services/workspace.service.ts
new file mode 100644
index 000000000..6a67a1a7a
--- /dev/null
+++ b/app/services/workspace.service.ts
@@ -0,0 +1,211 @@
+// services
+import APIService from "services/api.service";
+import trackEventServices from "services/track-event.service";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+// types
+import {
+  IWorkspace,
+  IWorkspaceMember,
+  IWorkspaceMemberInvitation,
+  ILastActiveWorkspaceDetails,
+  IWorkspaceSearchResults,
+} from "types";
+
+const trackEvent =
+  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
+
+class WorkspaceService extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async userWorkspaces(): Promise<IWorkspace[]> {
+    return this.get("/api/users/me/workspaces/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getWorkspace(workspaceSlug: string): Promise<IWorkspace> {
+    return this.get(`/api/workspaces/${workspaceSlug}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createWorkspace(data: Partial<IWorkspace>): Promise<IWorkspace> {
+    return this.post("/api/workspaces/", data)
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackWorkspaceEvent(response.data, "CREATE_WORKSPACE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateWorkspace(workspaceSlug: string, data: Partial<IWorkspace>): Promise<IWorkspace> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/`, data)
+      .then((response) => {
+        if (trackEvent) trackEventServices.trackWorkspaceEvent(response.data, "UPDATE_WORKSPACE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteWorkspace(workspaceSlug: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/`)
+      .then((response) => {
+        if (trackEvent)
+          trackEventServices.trackWorkspaceEvent({ workspaceSlug }, "DELETE_WORKSPACE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async inviteWorkspace(workspaceSlug: string, data: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/invite/`, data)
+      .then((response) => {
+        if (trackEvent)
+          trackEventServices.trackWorkspaceEvent(response.data, "WORKSPACE_USER_INVITE");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async joinWorkspace(workspaceSlug: string, invitationId: string, data: any): Promise<any> {
+    return this.post(
+      `/api/users/me/invitations/workspaces/${workspaceSlug}/${invitationId}/join/`,
+      data,
+      {
+        headers: {},
+      }
+    )
+      .then((response) => {
+        if (trackEvent)
+          trackEventServices.trackWorkspaceEvent(response.data, "WORKSPACE_USER_INVITE_ACCEPT");
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async joinWorkspaces(data: any): Promise<any> {
+    return this.post("/api/users/me/invitations/workspaces/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getLastActiveWorkspaceAndProjects(): Promise<ILastActiveWorkspaceDetails> {
+    return this.get("/api/users/last-visited-workspace/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async userWorkspaceInvitations(): Promise<IWorkspaceMemberInvitation[]> {
+    return this.get("/api/users/me/invitations/workspaces/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async workspaceMembers(workspaceSlug: string): Promise<IWorkspaceMember[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/members/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async workspaceMemberMe(workspaceSlug: string): Promise<IWorkspaceMember> {
+    return this.get(`/api/workspaces/${workspaceSlug}/workspace-members/me/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateWorkspaceMember(
+    workspaceSlug: string,
+    memberId: string,
+    data: Partial<IWorkspaceMember>
+  ): Promise<IWorkspaceMember> {
+    return this.put(`/api/workspaces/${workspaceSlug}/members/${memberId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteWorkspaceMember(workspaceSlug: string, memberId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/members/${memberId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async workspaceInvitations(workspaceSlug: string): Promise<IWorkspaceMemberInvitation[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/invitations/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getWorkspaceInvitation(invitationId: string): Promise<IWorkspaceMemberInvitation> {
+    return this.get(`/api/users/me/invitations/${invitationId}/`, { headers: {} })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteWorkspaceInvitations(workspaceSlug: string, invitationId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/invitations/${invitationId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async workspaceSlugCheck(slug: string): Promise<any> {
+    return this.get(`/api/workspace-slug-check/?slug=${slug}`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async searchWorkspace(
+    workspaceSlug: string,
+    projectId: string,
+    query: string
+  ): Promise<IWorkspaceSearchResults> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/search/?search=${query}`
+    )
+      .then((res) => res?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new WorkspaceService();
diff --git a/app/styles/command-pallette.css b/app/styles/command-pallette.css
new file mode 100644
index 000000000..5362f308a
--- /dev/null
+++ b/app/styles/command-pallette.css
@@ -0,0 +1,39 @@
+[cmdk-group]:not(:first-child) {
+  margin-top: 0.5rem;
+}
+
+[cmdk-group-heading] {
+  color: rgb(var(--color-text-secondary));
+  font-size: 0.75rem;
+  margin: 0 0 0.25rem 0.25rem;
+}
+
+[cmdk-item] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 0.375rem;
+  padding: 0.5rem;
+  font-size: 0.825rem;
+  line-height: 1.25rem;
+  cursor: pointer;
+}
+
+[cmdk-item] kbd {
+  height: 1.25rem;
+  width: 1.25rem;
+  display: grid;
+  place-items: center;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  border-radius: 0.25rem;
+  background-color: rgba(var(--color-bg-base));
+}
+
+[cmdk-item]:hover {
+  background-color: rgba(var(--color-bg-base));
+}
+
+[cmdk-item][aria-selected="true"] {
+  background-color: rgba(var(--color-bg-base));
+}
diff --git a/app/styles/editor.css b/app/styles/editor.css
new file mode 100644
index 000000000..c9d58dfaf
--- /dev/null
+++ b/app/styles/editor.css
@@ -0,0 +1,446 @@
+.ProseMirror {
+  position: relative;
+}
+
+.ProseMirror {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  white-space: break-spaces;
+  -webkit-font-variant-ligatures: none;
+  font-variant-ligatures: none;
+  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
+}
+
+.ProseMirror pre {
+  white-space: pre-wrap;
+}
+
+.ProseMirror li {
+  position: relative;
+}
+
+.ProseMirror-hideselection *::selection {
+  background: transparent;
+}
+.ProseMirror-hideselection *::-moz-selection {
+  background: transparent;
+}
+.ProseMirror-hideselection {
+  caret-color: transparent;
+}
+
+.ProseMirror-selectednode {
+  outline: 2px solid #8cf;
+}
+
+/* Make sure li selections wrap around markers */
+
+li.ProseMirror-selectednode {
+  outline: none;
+}
+
+li.ProseMirror-selectednode:after {
+  content: "";
+  position: absolute;
+  left: -32px;
+  right: -2px;
+  top: -2px;
+  bottom: -2px;
+  border: 2px solid #8cf;
+  pointer-events: none;
+}
+
+/* Protect against generic img rules */
+
+img.ProseMirror-separator {
+  display: inline !important;
+  border: none !important;
+  margin: 0 !important;
+}
+.ProseMirror-textblock-dropdown {
+  min-width: 3em;
+}
+
+.ProseMirror-menu {
+  margin: 0 -4px;
+  line-height: 1;
+}
+
+.ProseMirror-tooltip .ProseMirror-menu {
+  width: -webkit-fit-content;
+  width: fit-content;
+  white-space: pre;
+}
+
+.ProseMirror-menuitem {
+  margin-right: 3px;
+  display: inline-block;
+}
+
+.ProseMirror-menuseparator {
+  border-right: 1px solid #ddd;
+  margin-right: 3px;
+}
+
+.ProseMirror-menu-dropdown,
+.ProseMirror-menu-dropdown-menu {
+  font-size: 90%;
+  white-space: nowrap;
+}
+
+.ProseMirror-menu-dropdown {
+  vertical-align: 1px;
+  cursor: pointer;
+  position: relative;
+  padding-right: 15px;
+}
+
+.ProseMirror-menu-dropdown-wrap {
+  padding: 1px 0 1px 4px;
+  display: inline-block;
+  position: relative;
+}
+
+.ProseMirror-menu-dropdown:after {
+  content: "";
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid currentColor;
+  opacity: 0.6;
+  position: absolute;
+  right: 4px;
+  top: calc(50% - 2px);
+}
+
+.ProseMirror-menu-dropdown-menu,
+.ProseMirror-menu-submenu {
+  position: absolute;
+  background: white;
+  color: #666;
+  border: 1px solid #aaa;
+  padding: 2px;
+}
+
+.ProseMirror-menu-dropdown-menu {
+  z-index: 15;
+  min-width: 6em;
+}
+
+.ProseMirror-menu-dropdown-item {
+  cursor: pointer;
+  padding: 2px 8px 2px 4px;
+}
+
+.ProseMirror-menu-dropdown-item:hover {
+  background: #f2f2f2;
+}
+
+.ProseMirror-menu-submenu-wrap {
+  position: relative;
+  margin-right: -4px;
+}
+
+.ProseMirror-menu-submenu-label:after {
+  content: "";
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 4px solid currentColor;
+  opacity: 0.6;
+  position: absolute;
+  right: 4px;
+  top: calc(50% - 4px);
+}
+
+.ProseMirror-menu-submenu {
+  display: none;
+  min-width: 4em;
+  left: 100%;
+  top: -3px;
+}
+
+.ProseMirror-menu-active {
+  background: #eee;
+  border-radius: 4px;
+}
+
+.ProseMirror-menu-disabled {
+  opacity: 0.3;
+}
+
+.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,
+.ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu {
+  display: block;
+}
+
+.ProseMirror-menubar {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+  position: relative;
+  min-height: 1em;
+  color: #666;
+  padding: 1px 6px;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid silver;
+  background: white;
+  z-index: 10;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+.ProseMirror-icon {
+  display: inline-block;
+  line-height: 0.8;
+  vertical-align: -2px; /* Compensate for padding */
+  padding: 2px 8px;
+  cursor: pointer;
+}
+
+.ProseMirror-menu-disabled.ProseMirror-icon {
+  cursor: default;
+}
+
+.ProseMirror-icon svg {
+  fill: currentColor;
+  height: 1em;
+}
+
+.ProseMirror-icon span {
+  vertical-align: text-top;
+}
+.ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+}
+
+.ProseMirror-gapcursor:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid black;
+  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}
+/* Add space around the hr to make clicking it easier */
+
+.ProseMirror-example-setup-style hr {
+  padding: 2px 10px;
+  border: none;
+  margin: 1em 0;
+}
+
+.ProseMirror-example-setup-style hr:after {
+  content: "";
+  display: block;
+  height: 1px;
+  background-color: silver;
+  line-height: 2px;
+}
+
+.ProseMirror ul,
+.ProseMirror ol {
+  padding-left: 30px;
+}
+
+.ProseMirror blockquote {
+  padding-left: 1em;
+  border-left: 3px solid #eee;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.ProseMirror-example-setup-style img {
+  cursor: default;
+}
+
+.ProseMirror-prompt {
+  background: white;
+  padding: 5px 10px 5px 15px;
+  border: 1px solid silver;
+  position: fixed;
+  border-radius: 3px;
+  z-index: 11;
+  box-shadow: -0.5px 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.ProseMirror-prompt h5 {
+  margin: 0;
+  font-weight: normal;
+  font-size: 100%;
+  color: #444;
+}
+
+.ProseMirror-prompt input[type="text"],
+.ProseMirror-prompt textarea {
+  background: #eee;
+  border: none;
+  outline: none;
+}
+
+.ProseMirror-prompt input[type="text"] {
+  padding: 0 4px;
+}
+
+.ProseMirror-prompt-close {
+  position: absolute;
+  left: 2px;
+  top: 1px;
+  color: #666;
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+
+.ProseMirror-prompt-close:after {
+  content: "✕";
+  font-size: 12px;
+}
+
+.ProseMirror-invalid {
+  background: #ffc;
+  border: 1px solid #cc7;
+  border-radius: 4px;
+  padding: 5px 10px;
+  position: absolute;
+  min-width: 10em;
+}
+
+.ProseMirror-prompt-buttons {
+  margin-top: 5px;
+  display: none;
+}
+#editor,
+.editor {
+  background: white;
+  color: black;
+  background-clip: padding-box;
+  border-radius: 4px;
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  padding: 5px 0;
+  margin-bottom: 23px;
+}
+
+.ProseMirror p:first-child,
+.ProseMirror h1:first-child,
+.ProseMirror h2:first-child,
+.ProseMirror h3:first-child,
+.ProseMirror h4:first-child,
+.ProseMirror h5:first-child,
+.ProseMirror h6:first-child {
+  margin-top: 10px;
+}
+
+.ProseMirror {
+  padding: 8px 8px 4px 14px;
+  line-height: 1.2;
+  outline: none;
+}
+
+.ProseMirror p {
+  margin-bottom: 1em;
+}
+
+.remirror-editor-wrapper .remirror-editor {
+  min-height: 150px;
+}
+
+.issue-comments-section .remirror-editor-wrapper .remirror-editor,
+.page-block-section .remirror-editor-wrapper .remirror-editor {
+  min-height: 50px;
+}
+
+.remirror-section .remirror-editor-wrapper .remirror-editor {
+  min-height: 0 !important;
+}
+
+.remirror-editor-wrapper {
+  padding-top: 8px;
+}
+
+/* heading styling */
+.remirror-editor-wrapper h1 {
+  font-size: 2rem;
+}
+
+.remirror-editor-wrapper h2 {
+  font-size: 1.5rem;
+}
+
+.remirror-editor-wrapper h3 {
+  font-size: 1.17rem;
+}
+/* end heading styling */
+
+/* list styling */
+.remirror-editor-wrapper ul {
+  list-style-type: disc;
+}
+
+.remirror-editor-wrapper ol {
+  list-style-type: decimal;
+}
+/* end list styling */
+
+/* table styling */
+.remirror-editor-wrapper table {
+  border-collapse: collapse;
+}
+
+.remirror-editor-wrapper table td {
+  border: 1px solid #000;
+}
+/* end table styling */
+
+/* link styling */
+.remirror-floating-popover {
+  z-index: 20 !important;
+}
+
+.remirror-floating-popover input {
+  font-size: 0.75rem;
+  border-radius: 5px;
+  padding: 5px;
+  border: 1px solid #a8a6a6;
+  box-shadow: 1px 1px 5px #c0bebe;
+  outline: none;
+}
+
+.remirror-editor-wrapper a {
+  color: blue;
+  text-decoration: underline;
+}
+/* end link styling */
+
+/* format buttons styling */
+.MuiButtonBase-root {
+  border: none !important;
+  border-radius: 0.25rem !important;
+  padding: 0.25rem !important;
+}
+
+.MuiButtonBase-root:hover {
+  background-color: rgb(229 231 235);
+}
+
+.MuiButtonBase-root svg {
+  fill: #000 !important;
+}
+
+.MuiButtonBase-root.Mui-selected {
+  background-color: rgb(229 231 235) !important;
+}
+/* end format buttons styling */
diff --git a/app/styles/globals.css b/app/styles/globals.css
new file mode 100644
index 000000000..c16b39807
--- /dev/null
+++ b/app/styles/globals.css
@@ -0,0 +1,214 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0");
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .text-1\.5xl {
+    font-size: 1.375rem;
+    line-height: 1.875rem;
+  }
+}
+
+@layer base {
+  html {
+    font-family: "Inter", sans-serif;
+  }
+
+  :root {
+    --color-bg-base: 243, 244, 246;
+    --color-bg-surface-1: 249, 250, 251;
+    --color-bg-surface-2: 255, 255, 255;
+
+    --color-border: 229, 231, 235;
+    --color-bg-sidebar: 255, 255, 255;
+    --color-accent: 63, 118, 255;
+
+    --color-text-base: 3, 7, 18;
+    --color-text-secondary: 55, 65, 81;
+  }
+
+  [data-theme="light"] {
+    --color-bg-base: 255, 255, 255;
+    --color-bg-surface-1: 249, 250, 251;
+    --color-bg-surface-2: 243, 244, 246;
+
+    --color-border: 229, 231, 235;
+    --color-bg-sidebar: 255, 255, 255;
+    --color-accent: 63, 118, 255;
+
+    --color-text-base: 3, 7, 18;
+    --color-text-secondary: 55, 65, 81;
+  }
+
+  [data-theme="dark"] {
+    --color-bg-base: 25, 27, 27;
+    --color-bg-surface-1: 29, 30, 32;
+    --color-bg-surface-2: 39, 42, 45;
+
+    --color-border: 46, 50, 52;
+    --color-bg-sidebar: 19, 20, 22;
+    --color-accent: 60, 133, 217;
+
+    --color-text-base: 233, 244, 252;
+    --color-text-secondary: 142, 148, 146;
+  }
+
+  [data-theme="light-contrast"] {
+    --color-bg-base: 250, 250, 250;
+    --color-bg-surface-1: 250, 250, 250;
+    --color-bg-surface-2: 206, 212, 218;
+
+    --color-border: 0, 0, 0;
+    --color-bg-sidebar: 255, 255, 255;
+    --color-accent: 63, 118, 255;
+
+    --color-text-base: 0, 0, 0;
+    --color-text-secondary: 0, 0, 0;
+  }
+
+  [data-theme="dark-contrast"] {
+    --color-bg-base: 25, 27, 27;
+    --color-bg-surface-1: 31, 32, 35;
+    --color-bg-surface-2: 39, 42, 45;
+
+    --color-border: 255, 255, 255;
+    --color-bg-sidebar: 19, 20, 22;
+    --color-accent: 60, 133, 217;
+
+    --color-text-base: 255, 255, 255;
+    --color-text-secondary: 142, 148, 146;
+    color-scheme: dark !important;
+  }
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  font-variant-ligatures: none;
+  -webkit-font-variant-ligatures: none;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* scrollbar style */
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+.horizontal-scroll-enable {
+  overflow-x: scroll;
+}
+
+.horizontal-scroll-enable::-webkit-scrollbar {
+  display: block;
+  height: 7px;
+}
+
+.horizontal-scroll-enable::-webkit-scrollbar-track {
+  height: 7px;
+}
+
+.horizontal-scroll-enable::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: rgba(var(--color-bg-surface-1));
+}
+
+.vertical-scroll-enable::-webkit-scrollbar {
+  display: block;
+  width: 5px;
+}
+
+.vertical-scroll-enable::-webkit-scrollbar-track {
+  width: 5px;
+}
+
+.vertical-scroll-enable::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: rgba(var(--color-bg-surface-1));
+}
+/* end scrollbar style */
+
+.tags-input-container {
+  border: 2px solid #000;
+  padding: 0.5em;
+  border-radius: 3px;
+  width: min(80vw, 600px);
+  margin-top: 1em;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
+.tag-item {
+  background-color: rgb(218, 216, 216);
+  display: inline-block;
+  padding: 0.5em 0.75em;
+  border-radius: 20px;
+}
+.tag-item .close {
+  height: 20px;
+  width: 20px;
+  background-color: rgb(48, 48, 48);
+  color: #fff;
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 0.5em;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.tags-input {
+  flex-grow: 1;
+  padding: 0.5em 0;
+  border: none;
+  outline: none;
+}
+
+/* react datepicker styling */
+.react-datepicker-wrapper input::placeholder {
+  color: rgba(var(--color-text-secondary));
+  opacity: 1;
+}
+
+.react-datepicker-wrapper input:-ms-input-placeholder {
+  color: rgba(var(--color-text-secondary));
+}
+
+.react-datepicker-wrapper .react-datepicker__close-icon::after {
+  background: transparent;
+  color: rgba(var(--color-text-secondary));
+}
+
+.react-datepicker-popper {
+  z-index: 30 !important;
+}
+
+.conical-gradient {
+  background: conic-gradient(
+    from 180deg at 50% 50%,
+    #ff6b00 0deg,
+    #f7ae59 70.5deg,
+    #3f76ff 151.12deg,
+    #05c3ff 213deg,
+    #18914f 289.87deg,
+    #f6f172 329.25deg,
+    #ff6b00 360deg
+  );
+}
+
+.progress-bar{
+  fill: currentColor;
+  color: rgba(var(--color-bg-sidebar));
+}
+
+/* end react datepicker styling */
diff --git a/app/styles/nprogress.css b/app/styles/nprogress.css
new file mode 100644
index 000000000..338d24189
--- /dev/null
+++ b/app/styles/nprogress.css
@@ -0,0 +1,39 @@
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #3f76ff;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 0.2rem;
+}
+
+/* for blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #3f76ff, 0 0 5px #3f76ff;
+  opacity: 1;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
new file mode 100644
index 000000000..732e4be00
--- /dev/null
+++ b/app/tailwind.config.js
@@ -0,0 +1,60 @@
+function withOpacity(variableName) {
+  return ({ opacityValue }) => {
+    if (opacityValue !== undefined) return `rgba(var(${variableName}), ${opacityValue})`;
+
+    return `rgb(var(${variableName}))`;
+  };
+}
+
+module.exports = {
+  darkMode: "class",
+  content: ["./pages/**/*.tsx", "./components/**/*.tsx", "./layouts/**/*.tsx", "./ui/**/*.tsx"],
+  theme: {
+    extend: {
+      colors: {
+        theme: "#3f76ff",
+        "hover-gray": "#f5f5f5",
+        primary: "#f9fafb", // gray-50
+        secondary: "white",
+        brand: {
+          accent: withOpacity("--color-accent"),
+          base: withOpacity("--color-bg-base"),
+        },
+      },
+      borderColor: {
+        brand: {
+          base: withOpacity("--color-border"),
+          "surface-1": withOpacity("--color-bg-surface-1"),
+          "surface-2": withOpacity("--color-bg-surface-2"),
+        },
+      },
+      backgroundColor: {
+        brand: {
+          base: withOpacity("--color-bg-base"),
+          "surface-1": withOpacity("--color-bg-surface-1"),
+          "surface-2": withOpacity("--color-bg-surface-2"),
+          sidebar: withOpacity("--color-bg-sidebar"),
+        },
+      },
+      textColor: {
+        brand: {
+          base: withOpacity("--color-text-base"),
+          secondary: withOpacity("--color-text-secondary"),
+        },
+      },
+      keyframes: {
+        leftToaster: {
+          "0%": { left: "-20rem" },
+          "100%": { left: "0" },
+        },
+        rightToaster: {
+          "0%": { right: "-20rem" },
+          "100%": { right: "0" },
+        },
+      },
+    },
+    fontFamily: {
+      custom: ["Inter", "sans-serif"],
+    },
+  },
+};
diff --git a/app/tsconfig.json b/app/tsconfig.json
new file mode 100644
index 000000000..0c5ba6075
--- /dev/null
+++ b/app/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Next.js",
+  "compilerOptions": {
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "jsx": "preserve",
+    "baseUrl": "."
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/app/types/ai.d.ts b/app/types/ai.d.ts
new file mode 100644
index 000000000..6c933a033
--- /dev/null
+++ b/app/types/ai.d.ts
@@ -0,0 +1,9 @@
+import { IProjectLite, IWorkspaceLite } from "types";
+
+export interface IGptResponse {
+  response: string;
+  response_html: string;
+  count: number;
+  project_detail: IProjectLite;
+  workspace_detail: IWorkspaceLite;
+}
diff --git a/app/types/cycles.d.ts b/app/types/cycles.d.ts
new file mode 100644
index 000000000..760ba03d5
--- /dev/null
+++ b/app/types/cycles.d.ts
@@ -0,0 +1,70 @@
+import type {
+  IUser,
+  IIssue,
+  IProject,
+  IProjectLite,
+  IWorkspace,
+  IWorkspaceLite,
+  IIssueFilterOptions,
+} from "types";
+
+export interface ICycle {
+  backlog_issues: number;
+  cancelled_issues: number;
+  completed_issues: number;
+  created_at: Date;
+  created_by: string;
+  description: string;
+  end_date: string | null;
+  id: string;
+  is_favorite: boolean;
+  issue: string;
+  name: string;
+  owned_by: IUser;
+  project: string;
+  project_detail: IProjectLite;
+  start_date: string | null;
+  started_issues: number;
+  total_issues: number;
+  unstarted_issues: number;
+  updated_at: Date;
+  updated_by: string;
+  view_props: {
+    filters: IIssueFilterOptions;
+  };
+  workspace: string;
+  workspace_detail: IWorkspaceLite;
+}
+
+export interface CurrentAndUpcomingCyclesResponse {
+  current_cycle: ICycle[];
+  upcoming_cycle: ICycle[];
+}
+
+export interface DraftCyclesResponse {
+  draft_cycles: ICycle[];
+}
+
+export interface CompletedCyclesResponse {
+  completed_cycles: ICycle[];
+}
+
+export interface CycleIssueResponse {
+  id: string;
+  issue_detail: IIssue;
+  created_at: Date;
+  updated_at: Date;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  workspace: string;
+  issue: string;
+  cycle: string;
+  sub_issues_count: number;
+}
+
+export type SelectCycleType =
+  | (ICycle & { actionType: "edit" | "delete" | "create-issue" })
+  | undefined;
+
+export type SelectIssue = (IIssue & { actionType: "edit" | "delete" | "create" }) | null;
diff --git a/app/types/estimate.d.ts b/app/types/estimate.d.ts
new file mode 100644
index 000000000..a222e1cf6
--- /dev/null
+++ b/app/types/estimate.d.ts
@@ -0,0 +1,37 @@
+export interface IEstimate {
+  id: string;
+  created_at: Date;
+  updated_at: Date;
+  name: string;
+  description: string;
+  created_by: string;
+  updated_by: string;
+  points: IEstimatePoint[];
+  project: string;
+  workspace: string;
+}
+
+export interface IEstimatePoint {
+  id: string;
+  created_at: string;
+  created_by: string;
+  description: string;
+  estimate: string;
+  key: number;
+  project: string;
+  updated_at: string;
+  updated_by: string;
+  value: string;
+  workspace: string;
+}
+
+export interface IEstimateFormData {
+  estimate: {
+    name: string;
+    description: string;
+  };
+  estimate_points: {
+    key: number;
+    value: string;
+  }[];
+}
diff --git a/app/types/importer/github-importer.d.ts b/app/types/importer/github-importer.d.ts
new file mode 100644
index 000000000..36220b626
--- /dev/null
+++ b/app/types/importer/github-importer.d.ts
@@ -0,0 +1,33 @@
+export interface IGithubServiceImportFormData {
+  metadata: {
+    owner: string;
+    name: string;
+    repository_id: number;
+    url: string;
+  };
+  data: {
+    users: {
+      username: string;
+      import: boolean | "invite" | "map";
+      email: string;
+    }[];
+  };
+  config: {
+    sync: boolean;
+  };
+  project_id: string;
+}
+
+export interface IGithubRepoCollaborator {
+  avatar_url: string;
+  html_url: string;
+  id: number;
+  login: string;
+  url: string;
+}
+
+export interface IGithubRepoInfo {
+  issue_count: number;
+  labels: number;
+  collaborators: IGithubRepoCollaborator[];
+}
diff --git a/app/types/importer/index.ts b/app/types/importer/index.ts
new file mode 100644
index 000000000..134248a71
--- /dev/null
+++ b/app/types/importer/index.ts
@@ -0,0 +1,34 @@
+export * from "./github-importer";
+export * from "./jira-importer";
+
+import { IProjectLite } from "types/projects";
+// types
+import { IUserLite } from "types/users";
+
+export interface IImporterService {
+  created_at: string;
+  config: {
+    sync: boolean;
+  };
+  created_by: string | null;
+  data: {
+    users: [];
+  };
+  id: string;
+  initiated_by: string;
+  initiated_by_detail: IUserLite;
+  metadata: {
+    name: string;
+    owner: string;
+    repository_id: number;
+    url: string;
+  };
+  project: string;
+  project_detail: IProjectLite;
+  service: string;
+  status: "processing" | "completed" | "failed";
+  updated_at: string;
+  updated_by: string;
+  token: string;
+  workspace: string;
+}
diff --git a/app/types/importer/jira-importer.d.ts b/app/types/importer/jira-importer.d.ts
new file mode 100644
index 000000000..cd9e31ad2
--- /dev/null
+++ b/app/types/importer/jira-importer.d.ts
@@ -0,0 +1,58 @@
+export interface IJiraImporterForm {
+  metadata: IJiraMetadata;
+  config: IJiraConfig;
+  data: IJiraData;
+  project_id: string;
+}
+
+export interface IJiraConfig {
+  epics_to_modules: boolean;
+}
+
+export interface IJiraData {
+  users: User[];
+  invite_users: boolean;
+  total_issues: number;
+  total_labels: number;
+  total_states: number;
+  total_modules: number;
+}
+
+export interface User {
+  username: string;
+  import: "invite" | "map" | false;
+  email: string;
+}
+
+export interface IJiraMetadata {
+  cloud_hostname: string;
+  api_token: string;
+  project_key: string;
+  email: string;
+}
+
+export interface IJiraResponse {
+  issues: number;
+  modules: number;
+  labels: number;
+  states: number;
+  users: IJiraResponseUser[];
+}
+
+export interface IJiraResponseUser {
+  self: string;
+  accountId: string;
+  accountType: string;
+  emailAddress: string;
+  avatarUrls: AvatarUrls;
+  displayName: string;
+  active: boolean;
+  locale: string;
+}
+
+export interface IJiraResponseAvatarUrls {
+  "48x48": string;
+  "24x24": string;
+  "16x16": string;
+  "32x32": string;
+}
diff --git a/app/types/index.d.ts b/app/types/index.d.ts
new file mode 100644
index 000000000..259cb1d41
--- /dev/null
+++ b/app/types/index.d.ts
@@ -0,0 +1,22 @@
+export * from "./users";
+export * from "./workspace";
+export * from "./cycles";
+export * from "./projects";
+export * from "./state";
+export * from "./invitation";
+export * from "./issues";
+export * from "./modules";
+export * from "./views";
+export * from "./integration";
+export * from "./pages";
+export * from "./ai";
+export * from "./estimate"
+export * from "./importer";
+
+export type NestedKeyOf<ObjectType extends object> = {
+  [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
+    ? ObjectType[Key] extends { pop: any; push: any }
+      ? `${Key}`
+      : `${Key}` | `${Key}.${NestedKeyOf<ObjectType[Key]>}`
+    : `${Key}`;
+}[keyof ObjectType & (string | number)];
diff --git a/app/types/integration.d.ts b/app/types/integration.d.ts
new file mode 100644
index 000000000..b499d743f
--- /dev/null
+++ b/app/types/integration.d.ts
@@ -0,0 +1,35 @@
+// All the app integrations that are available
+export interface IAppIntegration {
+  author: string;
+  author: "";
+  avatar_url: string | null;
+  created_at: string;
+  created_by: string | null;
+  description: any;
+  id: string;
+  metadata: any;
+  network: number;
+  provider: string;
+  redirect_url: string;
+  title: string;
+  updated_at: string;
+  updated_by: string | null;
+  verified: boolean;
+  webhook_secret: string;
+  webhook_url: string;
+}
+
+export interface IWorkspaceIntegration {
+  actor: string;
+  api_token: string;
+  config: any;
+  created_at: string;
+  created_by: string;
+  id: string;
+  integration: string;
+  integration_detail: IIntegrations;
+  metadata: any;
+  updated_at: string;
+  updated_by: string;
+  workspace: string;
+}
diff --git a/app/types/issues.d.ts b/app/types/issues.d.ts
new file mode 100644
index 000000000..a7fc92163
--- /dev/null
+++ b/app/types/issues.d.ts
@@ -0,0 +1,280 @@
+import type {
+  IState,
+  IUser,
+  IProject,
+  ICycle,
+  IModule,
+  IUserLite,
+  IProjectLite,
+  IWorkspaceLite,
+} from "types";
+
+export interface IIssueCycle {
+  id: string;
+  cycle_detail: ICycle;
+  created_at: Date;
+  updated_at: Date;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  workspace: string;
+  issue: string;
+  cycle: string;
+}
+
+export interface IIssueModule {
+  created_at: Date;
+  created_by: string;
+  id: string;
+  issue: string;
+  module: string;
+  module_detail: IModule;
+  project: string;
+  updated_at: Date;
+  updated_by: string;
+  workspace: string;
+}
+
+export interface IIssueCycle {
+  created_at: Date;
+  created_by: string;
+  cycle: string;
+  cycle_detail: ICycle;
+  id: string;
+  issue: string;
+  project: string;
+  updated_at: Date;
+  updated_by: string;
+  workspace: string;
+}
+
+export interface IIssueParent {
+  description: any;
+  id: string;
+  name: string;
+  priority: string | null;
+  sequence_id: number;
+  start_date: string | null;
+  target_date: string | null;
+}
+
+export interface IIssueLink {
+  title: string;
+  url: string;
+}
+
+export interface IIssue {
+  assignees: string[];
+  assignee_details: IUser[];
+  assignees_list: string[];
+  attachment_count: number;
+  attachments: any[];
+  blocked_by_issue_details: any[];
+  blocked_issue_details: any[];
+  blocked_issues: BlockeIssue[];
+  blocked_list: string[];
+  blocker_issues: BlockeIssue[];
+  blockers: any[];
+  blockers_list: string[];
+  blocks_list: string[];
+  bridge_id?: string | null;
+  completed_at: Date;
+  created_at: Date;
+  created_by: string;
+  cycle: string | null;
+  cycle_id: string | null;
+  cycle_detail: ICycle | null;
+  description: any;
+  description_html: any;
+  description_stripped: any;
+  estimate_point: number | null;
+  id: string;
+  issue_cycle: IIssueCycle | null;
+  issue_link: {
+    created_at: Date;
+    created_by: string;
+    created_by_detail: IUserLite;
+    id: string;
+    metadata: any;
+    title: string;
+    url: string;
+  }[];
+  issue_module: IIssueModule | null;
+  label_details: any[];
+  links_list: IIssueLink[];
+  link_count: number;
+  module: string | null;
+  module_id: string | null;
+  name: string;
+  parent: string | null;
+  parent_detail: IIssueParent | null;
+  priority: string | null;
+  project: string;
+  project_detail: IProjectLite;
+  sequence_id: number;
+  sort_order: number;
+  sprints: string | null;
+  start_date: string | null;
+  state: string;
+  state_detail: IState;
+  sub_issues_count: number;
+  target_date: string | null;
+  updated_at: Date;
+  updated_by: string;
+  workspace: string;
+  workspace_detail: IWorkspaceLite;
+  labels: any[];
+  labels_list: string[];
+}
+
+export interface BlockeIssue {
+  id: string;
+  blocked_issue_detail?: BlockeIssueDetail;
+  created_at: Date;
+  updated_at: Date;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  workspace: string;
+  block: string;
+  blocked_by: string;
+  blocker_issue_detail?: BlockeIssueDetail;
+}
+
+export interface BlockeIssueDetail {
+  id: string;
+  name: string;
+  description: string;
+  priority: null;
+  start_date: null;
+  target_date: null;
+}
+
+export interface IIssueComment {
+  id: string;
+  actor: string;
+  actor_detail: IUserLite;
+  created_at: Date;
+  updated_at: Date;
+  comment: string;
+  comment_html: string;
+  comment_json: any;
+  attachments: any[];
+  created_by: string;
+  updated_by: string;
+  project: string;
+  project_detail: IProjectLite;
+  workspace: string;
+  workspace_detail: IWorkspaceLite;
+  issue: string;
+}
+
+export type IssuePriorities = {
+  id: string;
+  created_at: Date;
+  updated_at: Date;
+  uuid: string;
+  properties: Properties;
+  created_by: number;
+  updated_by: number;
+  user: string;
+};
+
+export type Properties = {
+  assignee: boolean;
+  due_date: boolean;
+  labels: boolean;
+  key: boolean;
+  priority: boolean;
+  state: boolean;
+  sub_issue_count: boolean;
+  link: boolean;
+  attachment_count: boolean;
+  estimate: boolean;
+};
+
+export interface IIssueLabels {
+  id: string;
+  created_at: Date;
+  updated_at: Date;
+  name: string;
+  description: string;
+  color: string;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  project_detail: IProjectLite;
+  workspace: string;
+  workspace_detail: IWorkspaceLite;
+  parent: string | null;
+}
+
+export interface IIssueActivity {
+  id: string;
+  actor_detail: IUserLite;
+  created_at: Date;
+  updated_at: Date;
+  verb: string;
+  field: string | null;
+  old_value: string | null;
+  new_value: string | null;
+  comment: string;
+  attachments: any[];
+  old_identifier: string | null;
+  new_identifier: string | null;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  workspace: string;
+  issue: string;
+  issue_comment: string | null;
+  actor: string;
+}
+
+export interface IIssueLite {
+  id: string;
+  name: string;
+  project_id: string;
+  target_date: string;
+  workspace__slug: string;
+}
+
+export interface IIssueFilterOptions {
+  type: "active" | "backlog" | null;
+  assignees: string[] | null;
+  state: string[] | null;
+  labels: string[] | null;
+  issue__assignees__id: string[] | null;
+  issue__labels__id: string[] | null;
+  priority: string[] | null;
+  created_by: string[] | null;
+}
+
+export type TIssueViewOptions = "list" | "kanban" | "calendar";
+
+export type TIssueGroupByOptions = "state" | "priority" | "labels" | "created_by" | null;
+
+export type TIssueOrderByOptions = "-created_at" | "updated_at" | "priority" | "sort_order";
+
+export interface IIssueViewOptions {
+  group_by: TIssueGroupByOptions;
+  order_by: TIssueOrderByOptions;
+  filters: IIssueFilterOptions;
+  target_date: string;
+}
+
+export interface IIssueAttachment {
+  asset: string;
+  attributes: {
+    name: string;
+    size: number;
+  };
+  created_at: string;
+  created_by: string;
+  id: string;
+  issue: string;
+  project: string;
+  updated_at: string;
+  updated_by: string;
+  workspace: string;
+}
diff --git a/app/types/modules.d.ts b/app/types/modules.d.ts
new file mode 100644
index 000000000..3e2a326c4
--- /dev/null
+++ b/app/types/modules.d.ts
@@ -0,0 +1,80 @@
+import type {
+  IUser,
+  IUserLite,
+  IIssue,
+  IProject,
+  IWorkspace,
+  IWorkspaceLite,
+  IProjectLite,
+  IIssueFilterOptions,
+} from "types";
+
+export interface IModule {
+  backlog_issues: number;
+  cancelled_issues: number;
+  completed_issues: number;
+  created_at: Date;
+  created_by: string;
+  description: string;
+  description_text: any;
+  description_html: any;
+  id: string;
+  lead: string | null;
+  lead_detail: IUserLite | null;
+  link_module: {
+    created_at: Date;
+    created_by: string;
+    created_by_detail: IUserLite;
+    id: string;
+    metadata: any;
+    title: string;
+    url: string;
+  }[];
+  links_list: ModuleLink[];
+  members: string[];
+  members_list: string[];
+  members_detail: IUserLite[];
+  is_favorite: boolean;
+  name: string;
+  project: string;
+  project_detail: IProjectLite;
+  start_date: string | null;
+  started_issues: number;
+  status: "backlog" | "planned" | "in-progress" | "paused" | "completed" | "cancelled" | null;
+  target_date: string | null;
+  total_issues: number;
+  unstarted_issues: number;
+  updated_at: Date;
+  updated_by: string;
+  view_props: {
+    filters: IIssueFilterOptions;
+  };
+  workspace: string;
+  workspace_detail: IWorkspaceLite;
+}
+
+export interface ModuleIssueResponse {
+  created_at: Date;
+  created_by: string;
+  id: string;
+  issue: string;
+  issue_detail: IIssue;
+  module: string;
+  module_detail: IModule;
+  project: string;
+  updated_at: Date;
+  updated_by: string;
+  workspace: string;
+  sub_issues_count: number;
+}
+
+export type ModuleLink = {
+  title: string;
+  url: string;
+};
+
+export type SelectModuleType =
+  | (IModule & { actionType: "edit" | "delete" | "create-issue" })
+  | undefined;
+
+export type SelectIssue = (IIssue & { actionType: "edit" | "delete" | "create" }) | undefined;
diff --git a/app/types/pages.d.ts b/app/types/pages.d.ts
new file mode 100644
index 000000000..6be966f7c
--- /dev/null
+++ b/app/types/pages.d.ts
@@ -0,0 +1,54 @@
+// types
+import { IIssue, IIssueLabels, IWorkspaceLite, IProjectLite } from "types";
+
+export interface IPage {
+  access: number;
+  blocks: IPageBlock[];
+  color: string;
+  created_at: Date;
+  created_by: string;
+  description: string;
+  description_html: string;
+  description_stripped: string | null;
+  id: string;
+  is_favorite: boolean;
+  label_details: IIssueLabels[];
+  labels: string[];
+  labels_list: string[];
+  name: string;
+  owned_by: string;
+  project: string;
+  project_detail: IProjectLite;
+  updated_at: Date;
+  updated_by: string;
+  workspace: string;
+  workspace_detail: IWorkspaceLite;
+}
+
+export interface RecentPagesResponse {
+  [key: string]: IPage[];
+}
+
+export interface IPageBlock {
+  completed_at: Date | null;
+  created_at: Date;
+  created_by: string;
+  description: any;
+  description_html: any;
+  description_stripped: any;
+  id: string;
+  issue: string | null;
+  issue_detail: IIssue | null;
+  name: string;
+  page: string;
+  project: string;
+  project_detail: IProjectLite;
+  sort_order: number;
+  sync: boolean;
+  updated_at: Date;
+  updated_by: string;
+  workspace: string;
+  workspace_detail: IWorkspaceLite;
+}
+
+export type TPageViewProps = "list" | "detailed" | "masonry";
diff --git a/app/types/projects.d.ts b/app/types/projects.d.ts
new file mode 100644
index 000000000..792403a6f
--- /dev/null
+++ b/app/types/projects.d.ts
@@ -0,0 +1,106 @@
+import type {
+  IIssueFilterOptions,
+  IUserLite,
+  IWorkspace,
+  IWorkspaceLite,
+  TIssueGroupByOptions,
+  TIssueOrderByOptions,
+  TIssueViewOptions,
+} from "./";
+
+export interface IProject {
+  cover_image: string | null;
+  created_at: Date;
+  created_by: string;
+  cycle_view: boolean;
+  issue_views_view: boolean;
+  module_view: boolean;
+  page_view: boolean;
+  default_assignee: IUser | string | null;
+  description: string;
+  estimate: string | null;
+  icon: string;
+  id: string;
+  identifier: string;
+  is_favorite: boolean;
+  name: string;
+  network: number;
+  project_lead: IUser | string | null;
+  slug: string;
+  updated_at: Date;
+  updated_by: string;
+  workspace: IWorkspace | string;
+  workspace_detail: IWorkspaceLite;
+}
+
+export interface IProjectLite {
+  id: string;
+  name: string;
+  identifier: string;
+}
+
+export interface IFavoriteProject {
+  created_at: Date;
+  created_by: string;
+  id: string;
+  project: string;
+  project_detail: IProject;
+  updated_at: Date;
+  updated_by: string;
+  user: string;
+  workspace: string;
+}
+
+type ProjectViewTheme = {
+  issueView: TIssueViewOptions;
+  groupByProperty: TIssueGroupByOptions;
+  orderBy: TIssueOrderByOptions;
+  filters: IIssueFilterOptions;
+};
+
+export interface IProjectMember {
+  member: IUserLite;
+  project: IProject;
+  workspace: IWorkspace;
+  comment: string;
+  role: 5 | 10 | 15 | 20;
+
+  view_props: ProjectViewTheme;
+  default_props: ProjectViewTheme;
+
+  created_at: Date;
+  updated_at: Date;
+  created_by: string;
+  updated_by: string;
+}
+
+export interface IProjectMemberInvitation {
+  id: string;
+
+  project: IProject;
+  workspace: IWorkspace;
+
+  email: string;
+  accepted: boolean;
+  token: string;
+  message: string;
+  responded_at: Date;
+  role: 5 | 10 | 15 | 20;
+
+  created_at: Date;
+  updated_at: Date;
+  created_by: string;
+  updated_by: string;
+}
+
+export interface IGithubRepository {
+  id: string;
+  full_name: string;
+  html_url: string;
+  url: string;
+}
+
+export interface GithubRepositoriesResponse {
+  repositories: IGithubRepository[];
+  total_count: number;
+}
diff --git a/app/types/state.d.ts b/app/types/state.d.ts
new file mode 100644
index 000000000..c0d9514c2
--- /dev/null
+++ b/app/types/state.d.ts
@@ -0,0 +1,24 @@
+import { IProject, IProjectLite, IWorkspaceLite } from "types";
+
+export interface IState {
+  readonly id: string;
+  color: string;
+  readonly created_at: Date;
+  readonly created_by: string;
+  default: boolean;
+  description: string;
+  group: "backlog" | "unstarted" | "started" | "completed" | "cancelled";
+  name: string;
+  project: string;
+  readonly project_detail: IProjectLite;
+  sequence: number;
+  readonly slug: string;
+  readonly updated_at: Date;
+  readonly updated_by: string;
+  workspace: string;
+  workspace_detail: IWorkspaceLite;
+}
+
+export interface StateResponse {
+  [key: string]: IState[];
+}
diff --git a/app/types/users.d.ts b/app/types/users.d.ts
new file mode 100644
index 000000000..2d90c8b57
--- /dev/null
+++ b/app/types/users.d.ts
@@ -0,0 +1,109 @@
+import { IIssue, IIssueLite, IWorkspace, NestedKeyOf, Properties } from "./";
+
+export interface IUser {
+  id: readonly string;
+  last_login: readonly Date;
+  avatar: string;
+  username: string;
+  mobile_number: string;
+  email: string;
+  first_name: string;
+  last_name: string;
+  date_joined: readonly Date;
+  created_at: readonly Date;
+  updated_at: readonly Date;
+  last_location: readonly string;
+  created_location: readonly string;
+  is_email_verified: boolean;
+  is_onboarded: boolean;
+  token: string;
+  role: string;
+
+  my_issues_prop?: {
+    properties: Properties;
+    groupBy: NestedKeyOf<IIssue> | null;
+  };
+
+  [...rest: string]: any;
+}
+
+export interface ICurrentUserResponse {
+  assigned_issues: number;
+  user: IUser;
+  workspace_invites: number;
+}
+
+export interface IUserLite {
+  readonly id: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  avatar: string;
+  created_at: Date;
+  is_bot: boolean;
+}
+
+export interface IUserActivity {
+  created_date: string;
+  activity_count: number;
+}
+
+export interface IUserStateDistribution {
+  state_group: string;
+  state_count: number;
+}
+
+export interface IUserWorkspaceDashboard {
+  assigned_issues_count: number;
+  completed_issues_count: number;
+  issue_activities: IUserActivity[];
+  issues_due_week_count: number;
+  overdue_issues: IIssueLite[];
+  completed_issues: {
+    week_in_month: number;
+    completed_count: number;
+  }[];
+  pending_issues_count: number;
+  state_distribution: IUserStateDistribution[];
+  upcoming_issues: IIssueLite[];
+}
+
+export interface IUserDetailedActivity {
+  actor: string;
+  actor_detail: IUserLite;
+  attachments: any[];
+  comment: string;
+  created_at: string;
+  created_by: string | null;
+  field: string;
+  id: string;
+  issue: string;
+  issue_comment: string | null;
+  new_identifier: string | null;
+  new_value: string | null;
+  old_identifier: string | null;
+  old_value: string | null;
+  project: string;
+  updated_at: string;
+  updated_by: string | null;
+  verb: string;
+  workspace: string;
+}
+
+export interface IUserActivityResponse {
+  count: number;
+  extra_stats: null;
+  next_cursor: string;
+  next_page_results: boolean;
+  prev_cursor: string;
+  prev_page_results: boolean;
+  results: IUserDetailedActivity[];
+  total_pages: number;
+}
+
+export type UserAuth = {
+  isMember: boolean;
+  isOwner: boolean;
+  isViewer: boolean;
+  isGuest: boolean;
+};
diff --git a/app/types/views.d.ts b/app/types/views.d.ts
new file mode 100644
index 000000000..f599d2f6d
--- /dev/null
+++ b/app/types/views.d.ts
@@ -0,0 +1,40 @@
+export interface IView {
+  id: string;
+  access: string;
+  created_at: Date;
+  updated_at: Date;
+  is_favorite: boolean;
+  created_by: string;
+  updated_by: string;
+  name: string;
+  description: string;
+  query: IQuery;
+  query_data: IQuery;
+  project: string;
+  workspace: string;
+}
+
+export interface IQuery {
+  state: string[] | null;
+  parent: string[] | null;
+  priority: string[] | null;
+  labels: string[] | null;
+  assignees: string[] | null;
+  created_by: string[] | null;
+  name: string | null;
+  created_at: [
+    {
+      datetime: string;
+      timeline: "before";
+    },
+    {
+      datetime: string;
+      timeline: "after";
+    }
+  ];
+  updated_at: string[] | null;
+  start_date: string[] | null;
+  target_date: string[] | null;
+  completed_at: string[] | null;
+  type: string;
+}
diff --git a/app/types/workspace.d.ts b/app/types/workspace.d.ts
new file mode 100644
index 000000000..e31d8f481
--- /dev/null
+++ b/app/types/workspace.d.ts
@@ -0,0 +1,84 @@
+import type { IProjectMember, IUser, IUserLite } from "types";
+
+export interface IWorkspace {
+  readonly id: string;
+  readonly owner: IUser;
+  readonly created_at: Date;
+  readonly updated_at: Date;
+  name: string;
+  url: string;
+  logo: string | null;
+  slug: string;
+  readonly total_members: number;
+  readonly slug: string;
+  readonly created_by: string;
+  readonly updated_by: string;
+  company_size: number | null;
+}
+
+export interface IWorkspaceLite {
+  readonly id: string;
+  name: string;
+  slug: string;
+}
+
+export interface IWorkspaceMemberInvitation {
+  readonly id: string;
+  email: string;
+  accepted: boolean;
+  token: string;
+  message: string;
+  responded_at: Date;
+  role: 5 | 10 | 15 | 20;
+  workspace: IWorkspace;
+}
+
+export interface IWorkspaceMember {
+  readonly id: string;
+  user: IUserLite;
+  workspace: IWorkspace;
+  member: IUserLite;
+  role: 5 | 10 | 15 | 20;
+  company_role: string | null;
+  created_at: Date;
+  updated_at: Date;
+  created_by: string;
+  updated_by: string;
+}
+
+export interface ILastActiveWorkspaceDetails {
+  workspace_details: IWorkspace;
+  project_details?: IProjectMember[];
+}
+
+export interface IWorkspaceDefaultSearchResult {
+  name: string;
+  id: string;
+  project_id: string;
+  workspace__slug: string;
+}
+export interface IWorkspaceSearchResult {
+  name: string;
+  id: string;
+  slug: string;
+}
+
+export interface IWorkspaceIssueSearchResult {
+  name: string;
+  id: string;
+  sequence_id: number;
+  project__identifier: string;
+  project_id: string;
+  workspace__slug: string;
+}
+export interface IWorkspaceSearchResults {
+  results: {
+    workspace: IWorkspaceSearchResult[];
+    project: IWorkspaceDefaultSearchResult[];
+    issue: IWorkspaceIssueSearchResult[];
+    cycle: IWorkspaceDefaultSearchResult[];
+    module: IWorkspaceDefaultSearchResult[];
+    issue_view: IWorkspaceDefaultSearchResult[];
+    page: IWorkspaceDefaultSearchResult[];
+  };
+}
diff --git a/app/yarn.lock b/app/yarn.lock
new file mode 100644
index 000000000..7c5ebb21f
--- /dev/null
+++ b/app/yarn.lock
@@ -0,0 +1,8029 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@ampproject/remapping@^2.2.0":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
+  integrity sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@apideck/better-ajv-errors@^0.3.1":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz#957d4c28e886a64a8141f7522783be65733ff097"
+  integrity sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==
+  dependencies:
+    json-schema "^0.4.0"
+    jsonpointer "^5.0.0"
+    leven "^3.1.0"
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.21.4.tgz#d0fa9e4413aca81f2b23b9442797bda1826edb39"
+  integrity sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==
+  dependencies:
+    "@babel/highlight" "^7.18.6"
+
+"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.5", "@babel/compat-data@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.21.4.tgz#457ffe647c480dff59c2be092fc3acf71195c87f"
+  integrity sha512-/DYyDpeCfaVinT40FPGdkkb+lYSKvsVuMjDAG7jPOWWiM1ibOaB9CXJAlc4d1QpP/U2q2P9jbrSlClKSErd55g==
+
+"@babel/core@^7.11.1":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.4.tgz#c6dc73242507b8e2a27fd13a9c1814f9fa34a659"
+  integrity sha512-qt/YV149Jman/6AfmlxJ04LMIu8bMoyl3RB91yTFrxQmgbrSvQMy7cI8Q62FHx1t8wJ8B5fu0UDoLwHAhUo1QA==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.21.4"
+    "@babel/generator" "^7.21.4"
+    "@babel/helper-compilation-targets" "^7.21.4"
+    "@babel/helper-module-transforms" "^7.21.2"
+    "@babel/helpers" "^7.21.0"
+    "@babel/parser" "^7.21.4"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.21.4"
+    "@babel/types" "^7.21.4"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.2"
+    semver "^6.3.0"
+
+"@babel/generator@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.4.tgz#64a94b7448989f421f919d5239ef553b37bb26bc"
+  integrity sha512-NieM3pVIYW2SwGzKoqfPrQsf4xGs9M9AIG3ThppsSRmO+m7eQhmI6amajKMUeIO37wFfsvnvcxQFx6x6iqxDnA==
+  dependencies:
+    "@babel/types" "^7.21.4"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
+"@babel/helper-annotate-as-pure@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
+  integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.18.6":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.18.9.tgz#acd4edfd7a566d1d51ea975dff38fd52906981bb"
+  integrity sha512-yFQ0YCHoIqarl8BCRwBL8ulYUaZpz3bNsA7oFepAzee+8/+ImtADXNOmO5vJvsPff3qi+hvpkY/NYBTrBQgdNw==
+  dependencies:
+    "@babel/helper-explode-assignable-expression" "^7.18.6"
+    "@babel/types" "^7.18.9"
+
+"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.4.tgz#770cd1ce0889097ceacb99418ee6934ef0572656"
+  integrity sha512-Fa0tTuOXZ1iL8IeDFUWCzjZcn+sJGd9RZdH9esYVjEejGmzf+FFYQpMi/kZUk2kPy/q1H3/GPw7np8qar/stfg==
+  dependencies:
+    "@babel/compat-data" "^7.21.4"
+    "@babel/helper-validator-option" "^7.21.0"
+    browserslist "^4.21.3"
+    lru-cache "^5.1.1"
+    semver "^6.3.0"
+
+"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.21.0":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.4.tgz#3a017163dc3c2ba7deb9a7950849a9586ea24c18"
+  integrity sha512-46QrX2CQlaFRF4TkwfTt6nJD7IHq8539cCL7SDpqWSDeJKY1xylKKY5F/33mJhLZ3mFvKv2gGrVS6NkyF6qs+Q==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.21.0"
+    "@babel/helper-member-expression-to-functions" "^7.21.0"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.20.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+
+"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.20.5":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.4.tgz#40411a8ab134258ad2cf3a3d987ec6aa0723cee5"
+  integrity sha512-M00OuhU+0GyZ5iBBN9czjugzWrEq2vDpf/zCYHxxf93ul/Q5rv+a5h+/+0WnI1AebHNVtl5bFV0qsJoH23DbfA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    regexpu-core "^5.3.1"
+
+"@babel/helper-define-polyfill-provider@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz#8612e55be5d51f0cd1f36b4a5a83924e89884b7a"
+  integrity sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.17.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    debug "^4.1.1"
+    lodash.debounce "^4.0.8"
+    resolve "^1.14.2"
+    semver "^6.1.2"
+
+"@babel/helper-environment-visitor@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
+  integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
+
+"@babel/helper-explode-assignable-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz#41f8228ef0a6f1a036b8dfdfec7ce94f9a6bc096"
+  integrity sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-function-name@^7.18.9", "@babel/helper-function-name@^7.19.0", "@babel/helper-function-name@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz#d552829b10ea9f120969304023cd0645fa00b1b4"
+  integrity sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==
+  dependencies:
+    "@babel/template" "^7.20.7"
+    "@babel/types" "^7.21.0"
+
+"@babel/helper-hoist-variables@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
+  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-member-expression-to-functions@^7.20.7", "@babel/helper-member-expression-to-functions@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.0.tgz#319c6a940431a133897148515877d2f3269c3ba5"
+  integrity sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==
+  dependencies:
+    "@babel/types" "^7.21.0"
+
+"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz#ac88b2f76093637489e718a90cec6cf8a9b029af"
+  integrity sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==
+  dependencies:
+    "@babel/types" "^7.21.4"
+
+"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.20.11", "@babel/helper-module-transforms@^7.21.2":
+  version "7.21.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz#160caafa4978ac8c00ac66636cb0fa37b024e2d2"
+  integrity sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.20.2"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.21.2"
+    "@babel/types" "^7.21.2"
+
+"@babel/helper-optimise-call-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
+  integrity sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz#d1b9000752b18d0877cff85a5c376ce5c3121629"
+  integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==
+
+"@babel/helper-remap-async-to-generator@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
+  integrity sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-wrap-function" "^7.18.9"
+    "@babel/types" "^7.18.9"
+
+"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz#243ecd2724d2071532b2c8ad2f0f9f083bcae331"
+  integrity sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-member-expression-to-functions" "^7.20.7"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.20.7"
+    "@babel/types" "^7.20.7"
+
+"@babel/helper-simple-access@^7.20.2":
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz#0ab452687fe0c2cfb1e2b9e0015de07fc2d62dd9"
+  integrity sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==
+  dependencies:
+    "@babel/types" "^7.20.2"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.20.0":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz#fbe4c52f60518cab8140d77101f0e63a8a230684"
+  integrity sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==
+  dependencies:
+    "@babel/types" "^7.20.0"
+
+"@babel/helper-split-export-declaration@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
+  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-string-parser@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
+  integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
+
+"@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
+  integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
+
+"@babel/helper-validator-option@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz#8224c7e13ace4bafdc4004da2cf064ef42673180"
+  integrity sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==
+
+"@babel/helper-wrap-function@^7.18.9":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz#75e2d84d499a0ab3b31c33bcfe59d6b8a45f62e3"
+  integrity sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==
+  dependencies:
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.20.5"
+    "@babel/types" "^7.20.5"
+
+"@babel/helpers@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.21.0.tgz#9dd184fb5599862037917cdc9eecb84577dc4e7e"
+  integrity sha512-XXve0CBtOW0pd7MRzzmoyuSj0e3SEzj8pgyFxnTT1NJZL38BD1MK7yYrm8yefRPIDvNNe14xR4FdbHwpInD4rA==
+  dependencies:
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.21.0"
+    "@babel/types" "^7.21.0"
+
+"@babel/highlight@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
+  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.20.7", "@babel/parser@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.4.tgz#94003fdfc520bbe2875d4ae557b43ddb6d880f17"
+  integrity sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==
+
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
+  integrity sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz#d9c85589258539a22a901033853101a6198d4ef1"
+  integrity sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/plugin-proposal-optional-chaining" "^7.20.7"
+
+"@babel/plugin-proposal-async-generator-functions@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz#bfb7276d2d573cb67ba379984a2334e262ba5326"
+  integrity sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-remap-async-to-generator" "^7.18.9"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+
+"@babel/plugin-proposal-class-properties@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
+  integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-proposal-class-static-block@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz#77bdd66fb7b605f3a61302d224bdfacf5547977d"
+  integrity sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+
+"@babel/plugin-proposal-dynamic-import@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz#72bcf8d408799f547d759298c3c27c7e7faa4d94"
+  integrity sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+
+"@babel/plugin-proposal-export-namespace-from@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
+  integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
+"@babel/plugin-proposal-json-strings@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz#7e8788c1811c393aff762817e7dbf1ebd0c05f0b"
+  integrity sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+
+"@babel/plugin-proposal-logical-assignment-operators@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz#dfbcaa8f7b4d37b51e8bfb46d94a5aea2bb89d83"
+  integrity sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
+  integrity sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
+"@babel/plugin-proposal-numeric-separator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz#899b14fbafe87f053d2c5ff05b36029c62e13c75"
+  integrity sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-proposal-object-rest-spread@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz#aa662940ef425779c75534a5c41e9d936edc390a"
+  integrity sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
+  dependencies:
+    "@babel/compat-data" "^7.20.5"
+    "@babel/helper-compilation-targets" "^7.20.7"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.20.7"
+
+"@babel/plugin-proposal-optional-catch-binding@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz#f9400d0e6a3ea93ba9ef70b09e72dd6da638a2cb"
+  integrity sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+
+"@babel/plugin-proposal-optional-chaining@^7.20.7", "@babel/plugin-proposal-optional-chaining@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz#886f5c8978deb7d30f678b2e24346b287234d3ea"
+  integrity sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
+"@babel/plugin-proposal-private-methods@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea"
+  integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-proposal-private-property-in-object@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz#19496bd9883dd83c23c7d7fc45dcd9ad02dfa1dc"
+  integrity sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
+"@babel/plugin-proposal-unicode-property-regex@^7.18.6", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz#af613d2cd5e643643b65cded64207b15c85cb78e"
+  integrity sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-syntax-async-generators@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
+  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
+"@babel/plugin-syntax-class-static-block@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz#195df89b146b4b78b3bf897fd7a257c84659d406"
+  integrity sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-dynamic-import@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
+  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-export-namespace-from@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
+  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
+"@babel/plugin-syntax-import-assertions@^7.20.0":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz#bb50e0d4bea0957235390641209394e87bdb9cc4"
+  integrity sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.19.0"
+
+"@babel/plugin-syntax-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-numeric-separator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-object-rest-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-private-property-in-object@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz#0dc6671ec0ea22b6e94a1114f857970cd39de1ad"
+  integrity sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-top-level-await@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
+  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-arrow-functions@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.20.7.tgz#bea332b0e8b2dab3dafe55a163d8227531ab0551"
+  integrity sha512-3poA5E7dzDomxj9WXWwuD6A5F3kc7VXwIJO+E+J8qtDtS+pXPAhrgEyh+9GBwBgPq1Z+bB+/JD60lp5jsN7JPQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-async-to-generator@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz#dfee18623c8cb31deb796aa3ca84dda9cea94354"
+  integrity sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==
+  dependencies:
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-remap-async-to-generator" "^7.18.9"
+
+"@babel/plugin-transform-block-scoped-functions@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz#9187bf4ba302635b9d70d986ad70f038726216a8"
+  integrity sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-block-scoping@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz#e737b91037e5186ee16b76e7ae093358a5634f02"
+  integrity sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-classes@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz#f469d0b07a4c5a7dbb21afad9e27e57b47031665"
+  integrity sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-compilation-targets" "^7.20.7"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.21.0"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-replace-supers" "^7.20.7"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    globals "^11.1.0"
+
+"@babel/plugin-transform-computed-properties@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.20.7.tgz#704cc2fd155d1c996551db8276d55b9d46e4d0aa"
+  integrity sha512-Lz7MvBK6DTjElHAmfu6bfANzKcxpyNPeYBGEafyA6E5HtRpjpZwU+u7Qrgz/2OR0z+5TvKYbPdphfSaAcZBrYQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/template" "^7.20.7"
+
+"@babel/plugin-transform-destructuring@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.21.3.tgz#73b46d0fd11cd6ef57dea8a381b1215f4959d401"
+  integrity sha512-bp6hwMFzuiE4HqYEyoGJ/V2LeIWn+hLVKc4pnj++E5XQptwhtcGmSayM029d/j2X1bPKGTlsyPwAubuU22KhMA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-dotall-regex@^7.18.6", "@babel/plugin-transform-dotall-regex@^7.4.4":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz#b286b3e7aae6c7b861e45bed0a2fafd6b1a4fef8"
+  integrity sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-duplicate-keys@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz#687f15ee3cdad6d85191eb2a372c4528eaa0ae0e"
+  integrity sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-exponentiation-operator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz#421c705f4521888c65e91fdd1af951bfefd4dacd"
+  integrity sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-for-of@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.0.tgz#964108c9988de1a60b4be2354a7d7e245f36e86e"
+  integrity sha512-LlUYlydgDkKpIY7mcBWvyPPmMcOphEyYA27Ef4xpbh1IiDNLr0kZsos2nf92vz3IccvJI25QUwp86Eo5s6HmBQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-function-name@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz#cc354f8234e62968946c61a46d6365440fc764e0"
+  integrity sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-literals@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz#72796fdbef80e56fba3c6a699d54f0de557444bc"
+  integrity sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-member-expression-literals@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz#ac9fdc1a118620ac49b7e7a5d2dc177a1bfee88e"
+  integrity sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-modules-amd@^7.20.11":
+  version "7.20.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz#3daccca8e4cc309f03c3a0c4b41dc4b26f55214a"
+  integrity sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.20.11"
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-modules-commonjs@^7.21.2":
+  version "7.21.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.2.tgz#6ff5070e71e3192ef2b7e39820a06fb78e3058e7"
+  integrity sha512-Cln+Yy04Gxua7iPdj6nOV96smLGjpElir5YwzF0LBPKoPlLDNJePNlrGGaybAJkd0zKRnOVXOgizSqPYMNYkzA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.21.2"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-simple-access" "^7.20.2"
+
+"@babel/plugin-transform-modules-systemjs@^7.20.11":
+  version "7.20.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz#467ec6bba6b6a50634eea61c9c232654d8a4696e"
+  integrity sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-module-transforms" "^7.20.11"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-validator-identifier" "^7.19.1"
+
+"@babel/plugin-transform-modules-umd@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz#81d3832d6034b75b54e62821ba58f28ed0aab4b9"
+  integrity sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-named-capturing-groups-regex@^7.20.5":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz#626298dd62ea51d452c3be58b285d23195ba69a8"
+  integrity sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.20.5"
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-new-target@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.6.tgz#d128f376ae200477f37c4ddfcc722a8a1b3246a8"
+  integrity sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-object-super@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
+  integrity sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.18.6"
+
+"@babel/plugin-transform-parameters@^7.20.7", "@babel/plugin-transform-parameters@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.21.3.tgz#18fc4e797cf6d6d972cb8c411dbe8a809fa157db"
+  integrity sha512-Wxc+TvppQG9xWFYatvCGPvZ6+SIUxQ2ZdiBP+PHYMIjnPXD+uThCshaz4NZOnODAtBjjcVQQ/3OKs9LW28purQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-property-literals@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz#e22498903a483448e94e032e9bbb9c5ccbfc93a3"
+  integrity sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-regenerator@^7.20.5":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.20.5.tgz#57cda588c7ffb7f4f8483cc83bdcea02a907f04d"
+  integrity sha512-kW/oO7HPBtntbsahzQ0qSE3tFvkFwnbozz3NWFhLGqH75vLEg+sCGngLlhVkePlCs3Jv0dBBHDzCHxNiFAQKCQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    regenerator-transform "^0.15.1"
+
+"@babel/plugin-transform-reserved-words@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz#b1abd8ebf8edaa5f7fe6bbb8d2133d23b6a6f76a"
+  integrity sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-shorthand-properties@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz#6d6df7983d67b195289be24909e3f12a8f664dc9"
+  integrity sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-spread@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz#c2d83e0b99d3bf83e07b11995ee24bf7ca09401e"
+  integrity sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+
+"@babel/plugin-transform-sticky-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz#c6706eb2b1524028e317720339583ad0f444adcc"
+  integrity sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-template-literals@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz#04ec6f10acdaa81846689d63fae117dd9c243a5e"
+  integrity sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-typeof-symbol@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz#c8cea68263e45addcd6afc9091429f80925762c0"
+  integrity sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-unicode-escapes@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz#1ecfb0eda83d09bbcb77c09970c2dd55832aa246"
+  integrity sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-unicode-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz#194317225d8c201bbae103364ffe9e2cea36cdca"
+  integrity sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/preset-env@^7.11.0":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.21.4.tgz#a952482e634a8dd8271a3fe5459a16eb10739c58"
+  integrity sha512-2W57zHs2yDLm6GD5ZpvNn71lZ0B/iypSdIeq25OurDKji6AdzV07qp4s3n1/x5BqtiGaTrPN3nerlSCaC5qNTw==
+  dependencies:
+    "@babel/compat-data" "^7.21.4"
+    "@babel/helper-compilation-targets" "^7.21.4"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-validator-option" "^7.21.0"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.20.7"
+    "@babel/plugin-proposal-async-generator-functions" "^7.20.7"
+    "@babel/plugin-proposal-class-properties" "^7.18.6"
+    "@babel/plugin-proposal-class-static-block" "^7.21.0"
+    "@babel/plugin-proposal-dynamic-import" "^7.18.6"
+    "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
+    "@babel/plugin-proposal-json-strings" "^7.18.6"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.20.7"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
+    "@babel/plugin-proposal-numeric-separator" "^7.18.6"
+    "@babel/plugin-proposal-object-rest-spread" "^7.20.7"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
+    "@babel/plugin-proposal-optional-chaining" "^7.21.0"
+    "@babel/plugin-proposal-private-methods" "^7.18.6"
+    "@babel/plugin-proposal-private-property-in-object" "^7.21.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-class-properties" "^7.12.13"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-import-assertions" "^7.20.0"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+    "@babel/plugin-syntax-top-level-await" "^7.14.5"
+    "@babel/plugin-transform-arrow-functions" "^7.20.7"
+    "@babel/plugin-transform-async-to-generator" "^7.20.7"
+    "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
+    "@babel/plugin-transform-block-scoping" "^7.21.0"
+    "@babel/plugin-transform-classes" "^7.21.0"
+    "@babel/plugin-transform-computed-properties" "^7.20.7"
+    "@babel/plugin-transform-destructuring" "^7.21.3"
+    "@babel/plugin-transform-dotall-regex" "^7.18.6"
+    "@babel/plugin-transform-duplicate-keys" "^7.18.9"
+    "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
+    "@babel/plugin-transform-for-of" "^7.21.0"
+    "@babel/plugin-transform-function-name" "^7.18.9"
+    "@babel/plugin-transform-literals" "^7.18.9"
+    "@babel/plugin-transform-member-expression-literals" "^7.18.6"
+    "@babel/plugin-transform-modules-amd" "^7.20.11"
+    "@babel/plugin-transform-modules-commonjs" "^7.21.2"
+    "@babel/plugin-transform-modules-systemjs" "^7.20.11"
+    "@babel/plugin-transform-modules-umd" "^7.18.6"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.20.5"
+    "@babel/plugin-transform-new-target" "^7.18.6"
+    "@babel/plugin-transform-object-super" "^7.18.6"
+    "@babel/plugin-transform-parameters" "^7.21.3"
+    "@babel/plugin-transform-property-literals" "^7.18.6"
+    "@babel/plugin-transform-regenerator" "^7.20.5"
+    "@babel/plugin-transform-reserved-words" "^7.18.6"
+    "@babel/plugin-transform-shorthand-properties" "^7.18.6"
+    "@babel/plugin-transform-spread" "^7.20.7"
+    "@babel/plugin-transform-sticky-regex" "^7.18.6"
+    "@babel/plugin-transform-template-literals" "^7.18.9"
+    "@babel/plugin-transform-typeof-symbol" "^7.18.9"
+    "@babel/plugin-transform-unicode-escapes" "^7.18.10"
+    "@babel/plugin-transform-unicode-regex" "^7.18.6"
+    "@babel/preset-modules" "^0.1.5"
+    "@babel/types" "^7.21.4"
+    babel-plugin-polyfill-corejs2 "^0.3.3"
+    babel-plugin-polyfill-corejs3 "^0.6.0"
+    babel-plugin-polyfill-regenerator "^0.4.1"
+    core-js-compat "^3.25.1"
+    semver "^6.3.0"
+
+"@babel/preset-modules@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.5.tgz#ef939d6e7f268827e1841638dc6ff95515e115d9"
+  integrity sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
+"@babel/regjsgen@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
+  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
+
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
+  integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
+"@babel/template@^7.18.10", "@babel/template@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
+  integrity sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
+
+"@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.21.0", "@babel/traverse@^7.21.2", "@babel/traverse@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.4.tgz#a836aca7b116634e97a6ed99976236b3282c9d36"
+  integrity sha512-eyKrRHKdyZxqDm+fV1iqL9UAHMoIg0nDaGqfIOd8rKH17m5snv7Gn4qgjBoFfLz9APvjFU/ICT00NVCv1Epp8Q==
+  dependencies:
+    "@babel/code-frame" "^7.21.4"
+    "@babel/generator" "^7.21.4"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.21.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.21.4"
+    "@babel/types" "^7.21.4"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.5", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.2", "@babel/types@^7.21.4", "@babel/types@^7.4.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.4.tgz#2d5d6bb7908699b3b416409ffd3b5daa25b030d4"
+  integrity sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
+"@blueprintjs/colors@^4.1.22":
+  version "4.1.22"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/colors/-/colors-4.1.22.tgz#033cbf03705100d5114d54161c225eec5cfeacfb"
+  integrity sha512-qcC7nWW9TTSS7aDxE5gbo9vrxo+IOpC6/Kzpi0rdOBYFDd02PppCdnCCjGYw1/IopSsZ9EWqDLmD7zuy0H+WEA==
+
+"@blueprintjs/core@^4.16.3", "@blueprintjs/core@^4.18.0":
+  version "4.18.0"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-4.18.0.tgz#4e7ffe1f7d2490212b814fe2b34724c832dbbed3"
+  integrity sha512-BZk+wglL5KGcZC9/ziJWT6TH7frjW469O6FPSN1thFdzKYj6XATpfTSP0g0L90UW6r8yskCcUOo1Faw3jRoFTA==
+  dependencies:
+    "@blueprintjs/colors" "^4.1.22"
+    "@blueprintjs/icons" "^4.15.0"
+    "@juggle/resize-observer" "^3.4.0"
+    "@types/dom4" "^2.0.2"
+    classnames "^2.3.1"
+    dom4 "^2.1.5"
+    normalize.css "^8.0.1"
+    popper.js "^1.16.1"
+    react-popper "^1.3.11"
+    react-transition-group "^4.4.5"
+    tslib "~2.5.0"
+
+"@blueprintjs/icons@^4.15.0":
+  version "4.15.0"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/icons/-/icons-4.15.0.tgz#f7e26f19c882a96f611f0874d1e159f7b55bdd91"
+  integrity sha512-h8+y4iXjpHsLE/7NU9GNhxnPyiYXgJPyJ/NmushtmcVrFn9tT5HlEc1+5bmxqv4osROQLyWJ9U5gDKu1rF72Ag==
+  dependencies:
+    change-case "^4.1.2"
+    classnames "^2.3.1"
+    tslib "~2.5.0"
+
+"@blueprintjs/popover2@^1.13.3":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/popover2/-/popover2-1.14.1.tgz#f56c7c21c0cf6304bfd4d4b2cc32d75ef472561f"
+  integrity sha512-/KU4qb4BTny4JKUt4OOl9y2L5NJd7PRCL5Ti58ctCG3bOa6y/hh3vgQWq7jhSGz+dVGxowGMtvEjvaj1rZKSew==
+  dependencies:
+    "@blueprintjs/core" "^4.18.0"
+    "@juggle/resize-observer" "^3.4.0"
+    "@popperjs/core" "^2.11.7"
+    classnames "^2.3.1"
+    dom4 "^2.1.5"
+    react-popper "^2.3.0"
+    tslib "~2.5.0"
+
+"@emotion/babel-plugin@^11.10.6":
+  version "11.10.6"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz#a68ee4b019d661d6f37dec4b8903255766925ead"
+  integrity sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/serialize" "^1.1.1"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.1.3"
+
+"@emotion/cache@^11.10.5", "@emotion/cache@^11.10.7":
+  version "11.10.7"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.7.tgz#2e3b12d3c7c74db0a020ae79eefc52a1b03a6908"
+  integrity sha512-VLl1/2D6LOjH57Y8Vem1RoZ9haWF4jesHDGiHtKozDQuBIkJm2gimVo0I02sWCuzZtVACeixTVB4jeE8qvCBoQ==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/sheet" "^1.2.1"
+    "@emotion/utils" "^1.2.0"
+    "@emotion/weak-memoize" "^0.3.0"
+    stylis "4.1.3"
+
+"@emotion/css@^11.1.3":
+  version "11.10.6"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-11.10.6.tgz#5d226fdd8ef2a46d28e4eb09f66dc01a3bda5a04"
+  integrity sha512-88Sr+3heKAKpj9PCqq5A1hAmAkoSIvwEq1O2TwDij7fUtsJpdkV4jMTISSTouFeRvsGvXIpuSuDQ4C1YdfNGXw==
+  dependencies:
+    "@emotion/babel-plugin" "^11.10.6"
+    "@emotion/cache" "^11.10.5"
+    "@emotion/serialize" "^1.1.1"
+    "@emotion/sheet" "^1.2.1"
+    "@emotion/utils" "^1.2.0"
+
+"@emotion/hash@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
+  integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
+
+"@emotion/is-prop-valid@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
+  integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+
+"@emotion/memoize@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
+  integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
+
+"@emotion/react@^11.9.0":
+  version "11.10.6"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.6.tgz#dbe5e650ab0f3b1d2e592e6ab1e006e75fd9ac11"
+  integrity sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.10.6"
+    "@emotion/cache" "^11.10.5"
+    "@emotion/serialize" "^1.1.1"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
+    "@emotion/utils" "^1.2.0"
+    "@emotion/weak-memoize" "^0.3.0"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.1.tgz#0595701b1902feded8a96d293b26be3f5c1a5cf0"
+  integrity sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==
+  dependencies:
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/unitless" "^0.8.0"
+    "@emotion/utils" "^1.2.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c"
+  integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==
+
+"@emotion/styled@^11.3.0":
+  version "11.10.6"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.6.tgz#d886afdc51ef4d66c787ebde848f3cc8b117ebba"
+  integrity sha512-OXtBzOmDSJo5Q0AFemHCfl+bUueT8BIcPSxu0EGTpGk6DmI5dnhSzQANm1e1ze0YZL7TDyAyy6s/b/zmGOS3Og==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.10.6"
+    "@emotion/is-prop-valid" "^1.2.0"
+    "@emotion/serialize" "^1.1.1"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
+    "@emotion/utils" "^1.2.0"
+
+"@emotion/unitless@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
+  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df"
+  integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==
+
+"@emotion/utils@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561"
+  integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==
+
+"@emotion/weak-memoize@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb"
+  integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==
+
+"@eslint-community/eslint-utils@^4.2.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+  dependencies:
+    eslint-visitor-keys "^3.3.0"
+
+"@eslint-community/regexpp@^4.4.0":
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.5.0.tgz#f6f729b02feee2c749f57e334b7a1b5f40a81724"
+  integrity sha512-vITaYzIcNmjn5tF5uxcZ/ft7/RXGrMUIS9HalWckEOF6ESiwXKoMzAQf2UW0aVd6rnOeExTJVd5hmWXucBKGXQ==
+
+"@eslint/eslintrc@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.0.2.tgz#01575e38707add677cf73ca1589abba8da899a02"
+  integrity sha512-3W4f5tDUra+pA+FzgugqL2pRimUTDJWKr7BINqOpkZrC0uYI0NIc0/JFgBROCU07HR6GieA5m3/rsPIhDmCXTQ==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^9.5.1"
+    globals "^13.19.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
+"@eslint/js@8.39.0":
+  version "8.39.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.39.0.tgz#58b536bcc843f4cd1e02a7e6171da5c040f4d44b"
+  integrity sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==
+
+"@headlessui/react@^1.7.3":
+  version "1.7.14"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.14.tgz#75f19552c535113640fe8a3a40e71474f49e89c9"
+  integrity sha512-znzdq9PG8rkwcu9oQ2FwIy0ZFtP9Z7ycS+BAqJ3R5EIqC/0bJGvhT7193rFf+45i9nnPsYvCQVW4V/bB9Xc+gA==
+  dependencies:
+    client-only "^0.0.1"
+
+"@heroicons/react@^2.0.12":
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.17.tgz#42a8086bc434ceefc03592f20c4e81b11e915cf8"
+  integrity sha512-90GMZktkA53YbNzHp6asVEDevUQCMtxWH+2UK2S8OpnLEu7qckTJPhNxNQG52xIR1WFTwFqtH6bt7a60ZNcLLA==
+
+"@humanwhocodes/config-array@^0.11.8":
+  version "0.11.8"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
+  integrity sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==
+  dependencies:
+    "@humanwhocodes/object-schema" "^1.2.1"
+    debug "^4.1.1"
+    minimatch "^3.0.5"
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
+"@humanwhocodes/object-schema@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
+  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+
+"@hypnosphi/create-react-context@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz#f8bfebdc7665f5d426cba3753e0e9c7d3154d7c6"
+  integrity sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==
+  dependencies:
+    gud "^1.0.0"
+    warning "^4.0.3"
+
+"@icons/material@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
+  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
+
+"@jitsu/nextjs@^3.1.5":
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/@jitsu/nextjs/-/nextjs-3.1.5.tgz#991e718b28ef5f997c2ed5386416943e78b13ce0"
+  integrity sha512-JdRxa+iy9w9rTf33XBAUQYdHDATPEt1X3HV6UpsoIHYqJQqAwsSBb226Kno/uVoVBrGqjdpa4ae6+7BSprxz0g==
+  dependencies:
+    "@jitsu/sdk-js" "^3.1.5"
+    cookie "^0.5.0"
+
+"@jitsu/sdk-js@^3.1.5":
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/@jitsu/sdk-js/-/sdk-js-3.1.5.tgz#3d0d92ccc01b621cbe67484c6e246d5ff8721de8"
+  integrity sha512-e7P8uvGBNwWCC864MItcYSv0IT2+nwYiX8QXZ0lfyG8hutEXXX9Yt2/+MynXuGxMIoIrJ+j0bWVu20k9rrhxSg==
+
+"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
+  integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/resolve-uri@3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
+  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
+
+"@jridgewell/set-array@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+
+"@jridgewell/source-map@^0.3.2":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.3.tgz#8108265659d4c33e72ffe14e33d6cc5eb59f2fda"
+  integrity sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/sourcemap-codec@1.4.14":
+  version "1.4.14"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
+  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
+"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.18"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
+  integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
+  dependencies:
+    "@jridgewell/resolve-uri" "3.1.0"
+    "@jridgewell/sourcemap-codec" "1.4.14"
+
+"@juggle/resize-observer@^3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
+  integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
+
+"@linaria/core@3.0.0-beta.13":
+  version "3.0.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@linaria/core/-/core-3.0.0-beta.13.tgz#049c5be5faa67e341e413a0f6b641d5d78d91056"
+  integrity sha512-3zEi5plBCOsEzUneRVuQb+2SAx3qaC1dj0FfFAI6zIJQoDWu0dlSwKijMRack7oO9tUWrchfj3OkKQAd1LBdVg==
+
+"@lingui/core@^3.14.0", "@lingui/core@^3.17.1":
+  version "3.17.2"
+  resolved "https://registry.yarnpkg.com/@lingui/core/-/core-3.17.2.tgz#275aa19520477910ddf41a838ef91a8204bea7eb"
+  integrity sha512-YOd068NanznN8lLQqOKPlAY0ill3rrgmiAvPRKuYkrxzJMIHqlIFO/2Kcc/RH5vClOmLfg+wgR4rsHK/kLKelQ==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    "@messageformat/parser" "^5.0.0"
+    make-plural "^6.2.2"
+
+"@lingui/detect-locale@^3.14.0":
+  version "3.17.2"
+  resolved "https://registry.yarnpkg.com/@lingui/detect-locale/-/detect-locale-3.17.2.tgz#9d7c2839f9ddd061261aaa479b908f06fe7e63f7"
+  integrity sha512-rqyO16lj05WRfBuppo++mPzB1fQBFDhGqEFz5X97CbWXYp6AadOIkrm+pbn114Y2Yumy9QI7Cm4Ptbfk7CXO3Q==
+
+"@messageformat/parser@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@messageformat/parser/-/parser-5.0.0.tgz#5737e69d7d4a469998b527710f1891174fc1b262"
+  integrity sha512-WiDKhi8F0zQaFU8cXgqq69eYFarCnTVxKcvhAONufKf0oUxbqLMW6JX6rV4Hqh+BEQWGyKKKHY4g1XA6bCLylA==
+  dependencies:
+    moo "^0.5.1"
+
+"@mui/base@5.0.0-alpha.126":
+  version "5.0.0-alpha.126"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.126.tgz#99555a5876a60e7dad772d75eb171e3d1336321d"
+  integrity sha512-I5e52A0Muv9Gaoy2GcqbYrQ6dpRyC2UXeA00brT3HuW0nF0E4fiTOIqdNTN+N5gyaYK0z3O6jtLt/97CCrIxVA==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@emotion/is-prop-valid" "^1.2.0"
+    "@mui/types" "^7.2.4"
+    "@mui/utils" "^5.12.0"
+    "@popperjs/core" "^2.11.7"
+    clsx "^1.2.1"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+
+"@mui/core-downloads-tracker@^5.12.1":
+  version "5.12.1"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.12.1.tgz#f828554889e6ab7345395626bb46e561c113435e"
+  integrity sha512-rNiQYHtkXljcvCEnhWrJzie1ifff5O98j3uW7ZlchFgD8HWxEcz/QoxZvo+sCKC9aayAgxi9RsVn2VjCyp5CrA==
+
+"@mui/material@^5.8.5":
+  version "5.12.1"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.12.1.tgz#3297ffc6836f426a26568332d68357c1398f0630"
+  integrity sha512-m+G9J6+FzIMhRqKV2y30yONH97wX107z9EWgiNCeS1/+y1CnytFZNG1ENdOuaJo1NimCRnmB/iXPvoOaSo6dOg==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@mui/base" "5.0.0-alpha.126"
+    "@mui/core-downloads-tracker" "^5.12.1"
+    "@mui/system" "^5.12.1"
+    "@mui/types" "^7.2.4"
+    "@mui/utils" "^5.12.0"
+    "@types/react-transition-group" "^4.4.5"
+    clsx "^1.2.1"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+    react-transition-group "^4.4.5"
+
+"@mui/private-theming@^5.12.0":
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.12.0.tgz#5f1e6fd09b1447c387fdac1eef7f23efca5c6d69"
+  integrity sha512-w5dwMen1CUm1puAtubqxY9BIzrBxbOThsg2iWMvRJmWyJAPdf3Z583fPXpqeA2lhTW79uH2jajk5Ka4FuGlTPg==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@mui/utils" "^5.12.0"
+    prop-types "^15.8.1"
+
+"@mui/styled-engine@^5.12.0":
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.12.0.tgz#44640cad961adcc9413ae32116237cd1c8f7ddb0"
+  integrity sha512-frh8L7CRnvD0RDmIqEv6jFeKQUIXqW90BaZ6OrxJ2j4kIsiVLu29Gss4SbBvvrWwwatR72sBmC3w1aG4fjp9mQ==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@emotion/cache" "^11.10.7"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+
+"@mui/system@^5.12.1":
+  version "5.12.1"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.12.1.tgz#8452bc03159f0a6725b96bde1dee1316e308231b"
+  integrity sha512-Po+sicdV3bbRYXdU29XZaHPZrW7HUYUqU1qCu77GCCEMbahC756YpeyefdIYuPMUg0OdO3gKIUfDISBrkjJL+w==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@mui/private-theming" "^5.12.0"
+    "@mui/styled-engine" "^5.12.0"
+    "@mui/types" "^7.2.4"
+    "@mui/utils" "^5.12.0"
+    clsx "^1.2.1"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.2.4":
+  version "7.2.4"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.4.tgz#b6fade19323b754c5c6de679a38f068fd50b9328"
+  integrity sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==
+
+"@mui/utils@^5.12.0":
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.12.0.tgz#284db48b36ac26f3d34076379072c1dc8aed1ad0"
+  integrity sha512-RmQwgzF72p7Yr4+AAUO6j1v2uzt6wr7SWXn68KBsnfVpdOHyclCzH2lr/Xu6YOw9su4JRtdAIYfJFXsS6Cjkmw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@types/prop-types" "^15.7.5"
+    "@types/react-is" "^16.7.1 || ^17.0.0"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+
+"@next/env@12.3.2":
+  version "12.3.2"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.3.2.tgz#fb819366771f5721e9438ca3a42ad18684f0949b"
+  integrity sha512-upwtMaHxlv/udAWGq0kE+rg8huwmcxQPsKZFhS1R5iVO323mvxEBe1YrSXe1awLbg9sTIuEHbgxjLLt7JbeuAQ==
+
+"@next/eslint-plugin-next@12.2.2":
+  version "12.2.2"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-12.2.2.tgz#b4a22c06b6454068b54cc44502168d90fbb29a6d"
+  integrity sha512-XOi0WzJhGH3Lk51SkSu9eZxF+IY1ZZhWcJTIGBycAbWU877IQa6+6KxMATWCOs7c+bmp6Sd8KywXJaDRxzu0JA==
+  dependencies:
+    glob "7.1.7"
+
+"@next/swc-android-arm-eabi@12.3.2":
+  version "12.3.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.2.tgz#806e3be9741bc14aafdfad0f0c4c6a8de5b77ee1"
+  integrity sha512-r2rrz+DZ8YYGqzVrbRrpP6GKzwozpOrnFbErc4k36vUTSFMag9yQahZfaBe06JYdqu/e5yhm/saIDEaSVPRP4g==
+
+"@next/swc-android-arm64@12.3.2":
+  version "12.3.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.3.2.tgz#f9ec6b7fc746832a217ad6bb5478624d1a9a9822"
+  integrity sha512-B+TINJhCf+CrY1+b3/JWQlkecv53rAGa/gA7gi5B1cnBa/2Uvoe+Ue0JeCefTjfiyl1ScsyNx+NcESY8Ye2Ngg==
+
+"@next/swc-darwin-arm64@12.3.2":
+  version "12.3.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.2.tgz#97c532d35c66ce6b6941ae24b5b8b267b9b0d0d8"
+  integrity sha512-PTUfe1ZrwjsiuTmr3bOM9lsoy5DCmfYsLOUF9ZVhtbi5MNJVmUTy4VZ06GfrvnCO5hGCr48z3vpFE9QZ0qLcPw==
+
+"@next/swc-darwin-x64@12.3.2":
+  version "12.3.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.2.tgz#e0cb4ff4b11faaff3a891bd1d18ed72f71e30ebe"
+  integrity sha512-1HkjmS9awwlaeEY8Y01nRSNkSv3y+qnC/mjMPe/W66hEh3QKa/LQHqHeS7NOdEs19B2mhZ7w+EgMRXdLQ0Su8w==
+
+"@next/swc-freebsd-x64@12.3.2":
+  version "12.3.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.2.tgz#d7b93dd344cb67d1969565d0796c7b7d0217fccf"
+  integrity sha512-h5Mx0BKDCJ5Vu/U8e07esF6PjPv1EJgmRbYWTUZMAflu13MQpCJkKEJir7+BeRfTXRfgFf+llc7uocrpd7mcrg==
+
+"@next/swc-linux-arm-gnueabihf@12.3.2":
+  version "12.3.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.2.tgz#c2170a89effe00fdd65798c99684fd93a02b197c"
+  integrity sha512-EuRZAamoxfe/WoWRaC0zsCAoE4gs/mEhilcloNM4J5Mnb3PLY8PZV394W7t5tjBjItMCF7l2Ebwjwtm46tq2RA==
+
+"@next/swc-linux-arm64-gnu@12.3.2":
+  version "12.3.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.2.tgz#26df7d7cdc18cf413f12a408179ee4ac315f383a"
+  integrity sha512-T9GCFyOIb4S3acA9LqflUYD+QZ94iZketHCqKdoO0Nx0OCHIgGJV5rotDe8TDXwh/goYpIfyHU4j1qqw4w4VnA==
+
+"@next/swc-linux-arm64-musl@12.3.2":
+  version "12.3.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.2.tgz#fd42232a6b10d9f9a4f71433d59c280a4532d06f"
+  integrity sha512-hxNVZS6L3c2z3l9EH2GP0MGQ9exu6O8cohYNZyqC9WUl6C03sEn8xzDH1y+NgD3fVurvYkGU5F0PDddJJLfDIw==
+
+"@next/swc-linux-x64-gnu@12.3.2":
+  version "12.3.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.2.tgz#5307579e3d8fbdb03adbe6cfc915b51548e0a103"
+  integrity sha512-fCPkLuwDwY8/QeXxciJJjDHG09liZym/Bhb4A+RLFQ877wUkwFsNWDUTSdUx0YXlYK/1gf67BKauqKkOKp6CYw==
+
+"@next/swc-linux-x64-musl@12.3.2":
+  version "12.3.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.2.tgz#d5cb920a825a8dc80ffba8a6b797fb845af0b84c"
+  integrity sha512-o+GifBIQ2K+/MEFxHsxUZoU3bsuVFLXZYWd3idimFHiVdDCVYiKsY6mYMmKDlucX+9xRyOCkKL9Tjf+3tuXJpw==
+
+"@next/swc-win32-arm64-msvc@12.3.2":
+  version "12.3.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.2.tgz#2a0d619e5bc0cec17ed093afd1ca6b1c37c2690c"
+  integrity sha512-crii66irzGGMSUR0L8r9+A06eTv7FTXqw4rgzJ33M79EwQJOdpY7RVKXLQMurUhniEeQEEOfamiEdPIi/qxisw==
+
+"@next/swc-win32-ia32-msvc@12.3.2":
+  version "12.3.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.2.tgz#769bef60d0d678c3d7606a4dc7fee018d6199227"
+  integrity sha512-5hRUSvn3MdQ4nVRu1rmKxq5YJzpTtZfaC/NyGw6wa4NSF1noUn/pdQGUr+I5Qz3CZkd1gZzzC0eaXQHlrk0E2g==
+
+"@next/swc-win32-x64-msvc@12.3.2":
+  version "12.3.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.2.tgz#45beb4b9d28e6dd6abf63cab1c5b92dc84323a6b"
+  integrity sha512-tpQJYUH+TzPMIsdVl9fH8uDg47iwiNjKY+8e9da3dXqlkztKzjSw0OwSADoqh3KrifplXeKSta+BBGLdBqg3sg==
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@ocavue/svgmoji-cjs@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@ocavue/svgmoji-cjs/-/svgmoji-cjs-0.1.1.tgz#7240e6860c907187e4cd95b39858507384e4025f"
+  integrity sha512-tCP6ggbtgIL4hPM5goVFSjL51jH/BLl/yBLy98wAV9a2L/Sn9iS3abfprPeQw6/nan5lLaz4Vz8ZP37LKh+xfQ==
+  dependencies:
+    svgmoji "^3.2.0"
+
+"@popperjs/core@^2.11.7", "@popperjs/core@^2.9.2":
+  version "2.11.7"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.7.tgz#ccab5c8f7dc557a52ca3288c10075c9ccd37fff7"
+  integrity sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==
+
+"@radix-ui/primitive@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253"
+  integrity sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-compose-refs@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
+  integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-context@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.0.tgz#f38e30c5859a9fb5e9aa9a9da452ee3ed9e0aee0"
+  integrity sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-dialog@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.0.tgz#997e97cb183bc90bd888b26b8e23a355ac9fe5f0"
+  integrity sha512-Yn9YU+QlHYLWwV1XfKiqnGVpWYWk6MeBVM6x/bcoyPvxgjQGoeT35482viLPctTMWoMw0PoHgqfSox7Ig+957Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-dismissable-layer" "1.0.0"
+    "@radix-ui/react-focus-guards" "1.0.0"
+    "@radix-ui/react-focus-scope" "1.0.0"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-portal" "1.0.0"
+    "@radix-ui/react-presence" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-slot" "1.0.0"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.4"
+
+"@radix-ui/react-dismissable-layer@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz#35b7826fa262fd84370faef310e627161dffa76b"
+  integrity sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-escape-keydown" "1.0.0"
+
+"@radix-ui/react-focus-guards@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz#339c1c69c41628c1a5e655f15f7020bf11aa01fa"
+  integrity sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-focus-scope@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.0.tgz#95a0c1188276dc8933b1eac5f1cdb6471e01ade5"
+  integrity sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
+"@radix-ui/react-id@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.0.tgz#8d43224910741870a45a8c9d092f25887bb6d11e"
+  integrity sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
+"@radix-ui/react-portal@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.0.tgz#7220b66743394fabb50c55cb32381395cc4a276b"
+  integrity sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.0"
+
+"@radix-ui/react-presence@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
+  integrity sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
+"@radix-ui/react-primitive@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz#376cd72b0fcd5e0e04d252ed33eb1b1f025af2b0"
+  integrity sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.0"
+
+"@radix-ui/react-slot@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.0.tgz#7fa805b99891dea1e862d8f8fbe07f4d6d0fd698"
+  integrity sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+
+"@radix-ui/react-use-callback-ref@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
+  integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-controllable-state@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz#a64deaafbbc52d5d407afaa22d493d687c538b7f"
+  integrity sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
+"@radix-ui/react-use-escape-keydown@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz#aef375db4736b9de38a5a679f6f49b45a060e5d1"
+  integrity sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
+"@radix-ui/react-use-layout-effect@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
+  integrity sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@remirror/core-constants@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@remirror/core-constants/-/core-constants-2.0.0.tgz#a52f89059d93955e00810023cc76b4f7db9650bf"
+  integrity sha512-vpePPMecHJllBqCWXl6+FIcZqS+tRUM2kSCCKFeEo1H3XUEv3ocijBIPhnlSAa7g6maX+12ATTgxrOsLpWVr2g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@remirror/core-helpers@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@remirror/core-helpers/-/core-helpers-2.0.1.tgz#6847666a009ada8c9b9f3a093c13a6d07a95d9bb"
+  integrity sha512-s8M1pn33aBUhduvD1QR02uUQMegnFkGaTr4c1iBzxTTyg0rbQstzuQ7Q8TkL6n64JtgCdJS9jLz2dONb2meBKQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@linaria/core" "3.0.0-beta.13"
+    "@remirror/core-constants" "^2.0.0"
+    "@remirror/types" "^1.0.0"
+    "@types/object.omit" "^3.0.0"
+    "@types/object.pick" "^1.3.1"
+    "@types/throttle-debounce" "^2.1.0"
+    case-anything "^2.1.10"
+    dash-get "^1.0.2"
+    deepmerge "^4.2.2"
+    fast-deep-equal "^3.1.3"
+    make-error "^1.3.6"
+    object.omit "^3.0.0"
+    object.pick "^1.3.0"
+    throttle-debounce "^3.0.1"
+
+"@remirror/core-types@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@remirror/core-types/-/core-types-2.0.4.tgz#441e97cf1bc741ab462f29bc959bd7a6c17a3b9d"
+  integrity sha512-sTlEW++rVhrKKSBc1+rDax0U4kUJGS1sN8qzafeUMJlmr9a3qGstYHN35YeNIUMaPjDZqmr6JRGiwIX5eR+hDQ==
+  dependencies:
+    "@remirror/core-constants" "^2.0.0"
+    "@remirror/types" "^1.0.0"
+
+"@remirror/core-utils@^2.0.11":
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/@remirror/core-utils/-/core-utils-2.0.11.tgz#7e898fd97c4edeecc11d3f71c1ea3b26f742bdbc"
+  integrity sha512-ZOd9rybgx1b753abMB3pJ1rrNm6FwN6Xz0vDMv3eC+kREv5bT2NFg/ctTi5J5RrvctSxMGBcIDafve+7GkUluA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core-constants" "^2.0.0"
+    "@remirror/core-helpers" "^2.0.1"
+    "@remirror/core-types" "^2.0.4"
+    "@remirror/messages" "^2.0.2"
+    "@types/min-document" "^2.19.0"
+    css-in-js-utils "^3.1.0"
+    get-dom-document "^0.1.3"
+    min-document "^2.19.0"
+    parenthesis "^3.1.8"
+
+"@remirror/core@^2.0.11", "@remirror/core@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/core/-/core-2.0.12.tgz#3940b0ad7fd8f0ac397bdd71dd6920a1123bfae3"
+  integrity sha512-O8tvkEKANEw7RrYM8PlIY/DyuU31g+rAuXAXzo52YBbgRFeRhFY11XJFmboouISaDWnbBT9ByCLdsO54F9b9Ww==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@linaria/core" "3.0.0-beta.13"
+    "@remirror/core-constants" "^2.0.0"
+    "@remirror/core-helpers" "^2.0.1"
+    "@remirror/core-types" "^2.0.4"
+    "@remirror/core-utils" "^2.0.11"
+    "@remirror/i18n" "^2.0.2"
+    "@remirror/icons" "^2.0.1"
+    "@remirror/messages" "^2.0.2"
+    nanoevents "^5.1.13"
+    tiny-warning "^1.0.3"
+
+"@remirror/dom@^2.0.15":
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/@remirror/dom/-/dom-2.0.15.tgz#be79a7e5b86103f2cedfd47a5e632c042ad73616"
+  integrity sha512-dosZXInyhZmRwpAyC4AfqfPC454lMNPpJypTvj9lsEHY+vhMVVw7ae1SgYaTB4WdBceVOZB+DOKKH0QqBumCEg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/preset-core" "^2.0.15"
+
+"@remirror/extension-annotation@^2.0.15":
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-annotation/-/extension-annotation-2.0.15.tgz#7a332a3f9ce37125c4f5dc19e594050d8fa055b3"
+  integrity sha512-l5kPxObJEMn8nFctqGPyYkC4AErfke4v8VfXj0p0UHSHwrE+SXLWjYXjQZfRwBhYr/2tp4eqo9iDhozJGklMAw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/extension-positioner" "^2.1.7"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-bidi@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-bidi/-/extension-bidi-2.0.12.tgz#e39bc4754c4c55fa4c658b469e5f81aeba066cf8"
+  integrity sha512-8O5h9ZVZPqNr+pyJ7yDytZM8mguPMG9De9GUh7HKF745GGiUHtO7j3ypE2tWLsS2H9Qu86BjGy8dw4pCUM/C6w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+    "@types/direction" "^1.0.0"
+    direction "^1.0.4"
+
+"@remirror/extension-blockquote@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-blockquote/-/extension-blockquote-2.0.13.tgz#8735682c5e2ccd4d6ee297732ad55c0ba0ecb20e"
+  integrity sha512-7mzjv71Scx84pJcGAiYkYjvY+1NkEMVC65sY1CejDGmy0FyCM86IPX1+TfQ5zgz4RTCu46G9JpnfSrTq5MTunA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+    "@remirror/theme" "^2.0.6"
+
+"@remirror/extension-bold@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-bold/-/extension-bold-2.0.12.tgz#b5710732e66a42e04c9117ff2e6bf2346ea6f1a0"
+  integrity sha512-YHXK03Gjk3/T3OF+Xv6Zz2eh2GIlUSXfFzBz//ZLE9kwySYmXFH//GqoOUoM5lrMlPW9bUxLMk4IC9Pt5UjeKg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-callout@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-callout/-/extension-callout-2.0.13.tgz#a6260cef41886c21c2a818325d7bdfd508639d83"
+  integrity sha512-SFdrs/Rof8ySMkikRT4ecHtNcPPzS+nfgFAKxYxB9euZpr+URR0a2e/IaHXMv3/3RCjFzbSsRJViramSVYc56A==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+    "@remirror/theme" "^2.0.6"
+
+"@remirror/extension-code-block@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-code-block/-/extension-code-block-2.0.13.tgz#47618e600009a1eb357d8a57f6f8122a7709b482"
+  integrity sha512-lSScanxQiSzew3l8K6elPYaxe8oy6yfqqDQVMqZjjP89iYkNC/vRkIkT6rAUzPT/usG5XLTbz4yL3hHQsHfy5A==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+    "@remirror/theme" "^2.0.6"
+    "@types/refractor" "^3.0.2"
+    refractor "^3.3.1"
+
+"@remirror/extension-code@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-code/-/extension-code-2.0.12.tgz#6e76664801f9f8417fe77567d5abb696383baf6b"
+  integrity sha512-h6JxvxYsfS+H+ZWPxtuvW9sXsVoEntOwx7yi+Z0cL+9ZrAz3BefdPX4IYqO5ynzrFplPbaHuaz6R4MOxGqwNJg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-codemirror5@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-codemirror5/-/extension-codemirror5-2.0.12.tgz#8cf0f07d31f3b6faaaab4b5273c2e3d58f5f01d3"
+  integrity sha512-HRMIVhK/YEzx/NbKUPMuKU0UJHQW62ekOSSoznygY68Cy3TkVmQhqTAtfCf15y5+YzJ9nE7/0JSqOLCh1tstvw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-collaboration@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-collaboration/-/extension-collaboration-2.0.12.tgz#42908a4983b842d278ca7ebe16e5dc292f33a54b"
+  integrity sha512-59ze1klQrhVaSkXvctho/MyDtd8M9wWVgAoUFLqwwdZeZ9TInBLqPr9roFpnpbanka9XuzThJhZTTcSo0f0q+A==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-columns@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-columns/-/extension-columns-2.0.12.tgz#f2eb4a4a71b9e82187aa45e9ae208849576e58de"
+  integrity sha512-u359gScEIBrjyrSMufoWWCcfq2tUbBRibngggZOpmthQasMIMxFNpOybnPCqPrbqM3yJyAklrlJy+CYUzr+MMw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-diff@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-diff/-/extension-diff-2.0.12.tgz#aa0bca92153cb9d4822b08b1ca63bc4c552241f2"
+  integrity sha512-puctbhyfLe5MvcGk3DbPU3HeMnWK5rcwCqLDHAtGAQoUDFSIF4uYJbA6QaDRtJ473+GI8ncKAAP3HsXqdz0nGA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-doc@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-doc/-/extension-doc-2.1.4.tgz#cb13e8dd2a3e6f0c4b14ae8db3f39ca2fc1dad78"
+  integrity sha512-4iBewkmtQiaS5uuUk2LkU3PRN9QYWq4e0kFRYGO8pzoQINLY2ugvtOo5cR1gWwcxZsNn9ybkTZGibCmMV4rkLA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-drop-cursor@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-drop-cursor/-/extension-drop-cursor-2.0.12.tgz#901520d5488a098b749c0b6e16ef9dccb46d4132"
+  integrity sha512-rOppI/M3ABZ1gmIm2vTJuQhGhgoDkDNop4TNb4njkdsMqwANqgIuihiYfj+4/UDNzgnOYu/b5Y+RY/U/Fr5RgQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-embed@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-embed/-/extension-embed-2.0.12.tgz#25faf9a9ff0ff99c1b1d7bc36e29aa9c0ef9deac"
+  integrity sha512-HKRM2dEPdQ5Ze/IUm7Np4WjRbCABy0l9CupgvFnZFrrMkbhuRikG5rNYV89ojh+E9fbyJoye4rX17SPYuVilkA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+    "@types/querystringify" "^2.0.0"
+    prosemirror-resizable-view "^2.0.11"
+    querystringify "^2.2.0"
+
+"@remirror/extension-emoji@^2.0.16":
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-emoji/-/extension-emoji-2.0.16.tgz#aa3d55821207326cbeec543025adb45d43f928b2"
+  integrity sha512-KDj/goot+mVHP0Tvt6NEziJdzlezgGBl2BAu74fE5ZoGsAGq64UZVIhyrr7OaWSeTlnYdEd52UH/CLxHO2imtA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@ocavue/svgmoji-cjs" "^0.1.1"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+    "@remirror/theme" "^2.0.6"
+    emojibase "^6.0.0"
+    emojibase-data "^6.1.0"
+    emojibase-regex "^6.0.0"
+    escape-string-regexp "^4.0.0"
+    svgmoji "^3.2.0"
+
+"@remirror/extension-entity-reference@^2.2.5":
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-entity-reference/-/extension-entity-reference-2.2.5.tgz#5cad8e12835faed392aadcb04008958f65464b75"
+  integrity sha512-UHtJlmjNNDfuGk6DsB53AHEnQSuKi3BJzjOu8MdQKekLt3DOHorMmJoxpAuyVedjVC7mhKZMty7PAKPseS530Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/extension-events" "^2.1.13"
+    "@remirror/extension-positioner" "^2.1.7"
+
+"@remirror/extension-epic-mode@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-epic-mode/-/extension-epic-mode-2.0.12.tgz#4d6123fc25bbc727acd1c5edf3433a85759a47df"
+  integrity sha512-4OM3DgixstiteSEP+uOB86F76DhCARnIBJpmFktGwdZnu2PWKkNIrDVh3msh817JE1Qo4c1b4qgCVIheaOJe7Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-events@^2.1.13":
+  version "2.1.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-events/-/extension-events-2.1.13.tgz#abb7a6c1b5b3cb4b2b51cd35725afaf7a1bccf9b"
+  integrity sha512-q0Zdjo8K7cCt8HnPs/hvrewM3zMPCTmMSodO8LVzKdou5+Gz3yzGZPpG16CecCIJ1iHWsYHUt75ifiYT087iBg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-find@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-find/-/extension-find-0.1.5.tgz#62cd0e672fec0de674699d4bec011a6fd201d5d0"
+  integrity sha512-bcTHAzjym+lNROKldh2e8ip3KsnRWmyqb23W9UxFq9O6dJGJqUxqXclev7+MQnSTJyUF2C7YCnRQD81oj5HYdw==
+  dependencies:
+    "@remirror/core" "^2.0.12"
+    "@types/string.prototype.matchall" "^4.0.1"
+    escape-string-regexp "^4.0.0"
+    string.prototype.matchall "^4.0.7"
+
+"@remirror/extension-font-family@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-font-family/-/extension-font-family-2.0.12.tgz#539bde66dd13098d84f0fb17278f2f7626bf378c"
+  integrity sha512-iXQoW9FES+Psk/jZ2HVaw4qUjXH6VgHXz7w2FqdfvI+Iql87mNIyyn83r/9CzOmeZKefhX3gsT++IPjAE/dS5A==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-font-size@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-font-size/-/extension-font-size-2.0.12.tgz#c95aee9060ce6c35091fe5b3a62556a4d9fb4fa0"
+  integrity sha512-9hser2/J9ka82g6x/mMOJvk5hhWf2ikL+5fBfe7pLo6pb0nVXgwugUs++fXUwwblKeZsIgbW+WsKavXbo6m0EA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+    round "^2.0.1"
+
+"@remirror/extension-gap-cursor@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-gap-cursor/-/extension-gap-cursor-2.0.12.tgz#d6d6af61564e5f38fdb32c71f2f7f4242920b772"
+  integrity sha512-4CW7Wh9BV09m4MPtvXpuPc7nfVWe5AvMrpH3oB0Z95EXOmF7U13+hH9fBFPW8ZfO3n000xqNkpXBBlSRd8rhQQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-hard-break@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-hard-break/-/extension-hard-break-2.0.12.tgz#81f605f4a7cd10eba4a8d82168e21cf8cf3bc8ac"
+  integrity sha512-IE67w2dyU+2enzMBgJmS/nkmTCPoydG+kTIcRvspJssH3XQGznZNyQcB732RWpslduZxhFM+m8y8B16nZAzscA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-heading@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-heading/-/extension-heading-2.0.12.tgz#151468d6b2ca2f910a5338d82698e72fbc0d6624"
+  integrity sha512-ioSmgsjt1A37kivh598hTY278h170v5+RBr7kTzJMd2l400osyYjlIFtG0kqBRR62w8ig2zkTHIv3hvB3/2uwQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-history@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-history/-/extension-history-2.0.12.tgz#4198642cfa68210baf998967f617d6d7cf41c0bc"
+  integrity sha512-HFwCNw8nMcR6aFqQNOBTa2e7VkX8JnqIpTgtcfmWMvBqEdG5LIAubr3BdJOp/8QtJby3/o8e4LP6AW8BNk0CXg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-horizontal-rule@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-horizontal-rule/-/extension-horizontal-rule-2.0.12.tgz#0c32c5fca9f23235b67f1257e6e02f8c3d3549ce"
+  integrity sha512-oabqxyymSG4rGRDEpu3xvHdrhfRXXXHvklUdbvmyFN+2JWJ+QE/Rs4q2JEy/y4tLIsn5deOMOFwy4MBrcnqrMw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-image@^2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-image/-/extension-image-2.1.8.tgz#00c859f2d42ea2eb65637535f134befc86bece15"
+  integrity sha512-xWZIFPDrv3a9FKkbRm9neR/Vmn2tAP1H3fcB6DORmS/PnsyByGQKZjRK2mJa+S+hseWDDF3J78zC7QkTq5AT8Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+    "@remirror/theme" "^2.0.6"
+    prosemirror-resizable-view "^2.0.11"
+
+"@remirror/extension-italic@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-italic/-/extension-italic-2.0.12.tgz#1c63b136833e156923e30cf0f7ca3f40ac605bee"
+  integrity sha512-CmkYxDTIhWD8u9LNiXPtpHuixzP2XMv8FGmBGa5XGOp3Yp+1MbkWCbaazneE/gPUch8Labtm8N8mJ6mrF/6sdw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-link@^2.0.14":
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-link/-/extension-link-2.0.14.tgz#be34ddcdec5d875923c1683f89adf3209f75edd9"
+  integrity sha512-n1gMEPrcC2bWjVt3OMaw13/8BaJrtn8WN9KA3X+4sSUioXsfyyMUlRg34XsHna+2iY9aosRglmJW11bqnE1Efw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/extension-events" "^2.1.13"
+    "@remirror/messages" "^2.0.2"
+    extract-domain "2.2.1"
+
+"@remirror/extension-list@^2.0.15":
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-list/-/extension-list-2.0.15.tgz#62e4e61016a4a38ae0d3a043465e0d7511632ce1"
+  integrity sha512-f0A6NJpYzFG/fjclkncvktFJEGFBs+ORTwcOmP8rBwYETpRaWDMM19x84QZfyBWpxfIA3+jRpNXtwPosmtAR5w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/extension-events" "^2.1.13"
+    "@remirror/messages" "^2.0.2"
+    "@remirror/theme" "^2.0.6"
+
+"@remirror/extension-markdown@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-markdown/-/extension-markdown-2.0.12.tgz#a7ac2f264c4bea57013ffc270d88c860231bc4c9"
+  integrity sha512-jInKP2wyD7jBFNmx2ilgD4vgfeFw4SQE+zt/lbSn0unpKf2LuTDFhJpWO1MZWCkvfpA7ah1louIrqWUn2aD5Wg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+    "@types/marked" "^4.0.2"
+    "@types/turndown" "^5.0.1"
+    marked "^4.0.12"
+    turndown "^7.1.1"
+    turndown-plugin-gfm "^1.0.2"
+
+"@remirror/extension-mention-atom@^2.0.15":
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-mention-atom/-/extension-mention-atom-2.0.15.tgz#c359c39d94ad33b34f716ab503397e2676e4dcdf"
+  integrity sha512-7yE5PGu79sJuy5G+JXYyb0rjvQxnxKfTTCdyewrY6axGRm4SccqGnaibKUUIEEmr2/mgFnsyPZ1xiRi8BPy/kA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/extension-events" "^2.1.13"
+    "@remirror/messages" "^2.0.2"
+    "@remirror/theme" "^2.0.6"
+
+"@remirror/extension-mention@^2.0.14":
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-mention/-/extension-mention-2.0.14.tgz#8415e0c7b6be320bd47636198a910878e8c9ef49"
+  integrity sha512-q3zduAXAZBeBQYOR+DS8HpySuH62COHvBxNp/UwEt2pJyDpc6JcTMgQn128be+GH5YNb03AmQf5IpJsGgPlvsg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/extension-events" "^2.1.13"
+    "@remirror/messages" "^2.0.2"
+    escape-string-regexp "^4.0.0"
+
+"@remirror/extension-node-formatting@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-node-formatting/-/extension-node-formatting-2.0.12.tgz#0612066051aa46b0d98c762cddc4a6365f0ba25a"
+  integrity sha512-jG4tE+b2nTXNVzHGP5+T9x2YIfyl8xu9SOQCgkXxcBjgH9oSviULGMCMaPHMoaEAnCIyT0ACjtMXgVM1Yneqng==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-paragraph@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-paragraph/-/extension-paragraph-2.0.12.tgz#611e888706153258157a3474425e401add2e2ffe"
+  integrity sha512-cX4NyNOXZZqH+YnEvSFBiWsAA92E5RRQB14UV1IsIHlmBu5GRHSXwNLPJCNLbEOycDxatZly67iB5xenD7Bz1A==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-placeholder@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-placeholder/-/extension-placeholder-2.0.13.tgz#e9f2c21906046489a984d247e95ccb6ca0b66068"
+  integrity sha512-f2E/CbtRTnFgYVaBPBK/az9zC6FErMQFv1uuzSm4sxN0fAXFOq6QgfCEG0LcMKryONcG0FgMo3eVsclvg634kA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+    "@remirror/theme" "^2.0.6"
+
+"@remirror/extension-positioner@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-positioner/-/extension-positioner-2.1.7.tgz#4827371795042a319cb9b70cd1bfae279f8af2b2"
+  integrity sha512-Yt5QV7yIu4KUQbRFMZPU/CzuzXqv7f/+dEUramvSk0LoYQ+JKsPgenAl7gf64VtzegafeGzP224QRA/2zwFLgg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/extension-events" "^2.1.13"
+    "@remirror/messages" "^2.0.2"
+    "@remirror/theme" "^2.0.6"
+    nanoevents "^5.1.13"
+
+"@remirror/extension-react-component@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-react-component/-/extension-react-component-2.0.12.tgz#369617a8b4edad3417ffd0cfef35355efff535c1"
+  integrity sha512-D1/ey92uBmFZZmDDmf4j7IsJ/q9gqZDz2EEqqtDPPBr09yOtYaakuLh8/FJ5ntlCTjIWO4646eBfKHBcZOCFhA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+    nanoevents "^5.1.13"
+
+"@remirror/extension-react-tables@^2.2.11", "@remirror/extension-react-tables@^2.2.14":
+  version "2.2.14"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-react-tables/-/extension-react-tables-2.2.14.tgz#0835f30e2ec2e4c660b25a387c71a533cf1a4561"
+  integrity sha512-ElzTY1KGbg6LdDk9hMQobZ6krjyfQB5Pkc+0JhurwrEDjEFE0ccvb89UlNDRO88PmABU71G7WGutlZec3RMKoQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/css" "^11.1.3"
+    "@linaria/core" "3.0.0-beta.13"
+    "@remirror/core" "^2.0.12"
+    "@remirror/core-utils" "^2.0.11"
+    "@remirror/extension-positioner" "^2.1.7"
+    "@remirror/extension-tables" "^2.2.9"
+    "@remirror/icons" "^2.0.1"
+    "@remirror/messages" "^2.0.2"
+    "@remirror/preset-core" "^2.0.15"
+    "@remirror/react-components" "^2.1.11"
+    "@remirror/react-core" "^2.0.16"
+    "@remirror/react-hooks" "^2.0.21"
+    "@remirror/theme" "^2.0.6"
+    jsx-dom-cjs "^8.0.0"
+
+"@remirror/extension-search@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-search/-/extension-search-2.0.13.tgz#0af5582acc10833d1a462c1c9f637bc8c68cdb33"
+  integrity sha512-ZWB3h5BqKOBzW3QV5/I2tg1DBLdTV4IU+Tlsz31T6CjtUARMdizEvqEhUTOPY/G0FOz9JQK8mpcDjoOIHTJBeA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+    escape-string-regexp "^4.0.0"
+
+"@remirror/extension-shortcuts@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-shortcuts/-/extension-shortcuts-2.0.12.tgz#d9595e8a412443cca1800efeae926e4fab8935d0"
+  integrity sha512-jTSaq19lLpjzbDqTvwztx+ULcbL4s1b/iiHi7lTSTDqRikshAnWBjg/r5iU06y8DxO6cWQGYeBxlfBlVezoo8w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+
+"@remirror/extension-strike@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-strike/-/extension-strike-2.0.12.tgz#1ce80b8b4fdbc1456883339db9247f17b739dda0"
+  integrity sha512-EhWi5AjnAsXNfS4LmyPnpaqlMzmWwr+9Mi+99Uj5+Tf1uw7+dB2LKIqoIyl+ld34QYxEs5C3QJTAcBJXintrqA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-sub@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-sub/-/extension-sub-2.0.12.tgz#d72e2d37dfb0ca1d71936eda70dd9099bf42e237"
+  integrity sha512-6C3UsZ4x5MHh3hfDnwuW4nWzTjqkLjYSoJLP93mlGqTTzRBfeGWTTVeVVa7v9mo4Gdeo5BY5GQbGQIREos7HxQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-sup@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-sup/-/extension-sup-2.0.12.tgz#2b7c829646bc87a41f22cceeb866771de41bd6a9"
+  integrity sha512-JGmx8Z7z5cQABRuNoK3JWXj3VWU97IjRIIBQvqgLnBDCzgdvHHcFpHaT1y7w0cntjv3ffdPawlUBLsFiTiI7og==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-tables@^2.2.9":
+  version "2.2.9"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-tables/-/extension-tables-2.2.9.tgz#3187cd3998cdd983be306e85d57bd8e286ba574d"
+  integrity sha512-i0D0P4PGiq8g6b6th0k10YejBV5i5nz76RMhSjsbs/3LcctlH7OX3IH9SQhCZCMkRBpI3I7kjlxNwTNcHRGdKg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/extension-positioner" "^2.1.7"
+    "@remirror/messages" "^2.0.2"
+    "@remirror/theme" "^2.0.6"
+
+"@remirror/extension-text-case@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-text-case/-/extension-text-case-2.0.12.tgz#a154cb1872f9caf467f285295852261c0b0235be"
+  integrity sha512-YPyhoTKcVP+EB3InB4tJBGATcGzhFE0yX9Dnu8yEMjGi4afeEDOgHn8D7iEyJ+bcsDbkpJdmkCHZ5AKvUotywQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-text-color@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-text-color/-/extension-text-color-2.0.13.tgz#a346a7b069eeb54df9b5b1def25bbe6694b31611"
+  integrity sha512-fvmFPBhQ50oGRnguzCtDpsE8TxCjJkijsPrOIgUHQ0agfq4xW9gDiROc8SgMn2y7YLWaQ0FYIEJwpa8XXurc2Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/i18n" "^2.0.2"
+    "@remirror/messages" "^2.0.2"
+    "@remirror/theme" "^2.0.6"
+    color2k "^2.0.0"
+
+"@remirror/extension-text-highlight@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-text-highlight/-/extension-text-highlight-2.0.13.tgz#1cbabe7a98babfb9aea3bd9cc7e33a6e97590ac1"
+  integrity sha512-SkebXrma/mhZArbYcz2O7/MeKyfu5090VDwUS0lB7gtVmVBRRlAy8Ol7KVoKNMPzBDlKEs/MzCbr9+wXnEsvrA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/extension-text-color" "^2.0.13"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-text@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-text/-/extension-text-2.0.12.tgz#5d6e6e9f26a82a75d53ed1a2f35ae60eb6f7deb4"
+  integrity sha512-kVyBKnwmaO/fD+4moMWS675BIvkB4a6Bd3Eq35NazwF5XAREX2RGSxUFs50Z+Y373MWH2TWX09FYpCMp166YFg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-trailing-node@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-trailing-node/-/extension-trailing-node-2.0.12.tgz#4c430623265f73c86bc8822c22b061251cb9da82"
+  integrity sha512-+GFNb7bP2KWW2VUBwTdKZQKSsxu8BCH3qk47Cb/cKYd5PXIH8oDcvsj9Jvwp/bSYcJlLqbPMuk9ecy2defxbKg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-underline@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-underline/-/extension-underline-2.0.12.tgz#d88cb33264dcbe91b7b5f569f7abd4723271a7e0"
+  integrity sha512-ro63Aj6Q0GsoBhhV7uz7U+RzhHouvQZS1mjoaFcU6RSBwLIvScp6G83Q1cPCbmsUPro6Zds+JfBjiMEMDfXWmQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-whitespace@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-whitespace/-/extension-whitespace-2.0.12.tgz#10d6478fa5798caaba6ee4cb5274842b2e94c6f7"
+  integrity sha512-K1HThBBwQx0uOsonK/lTqpLOOhT8w29vMcQBzBT00WlrPO7iODe6gCekimG/oKAQ04UouHLczrehUWFr5YRqxg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+
+"@remirror/extension-yjs@^3.0.13":
+  version "3.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-yjs/-/extension-yjs-3.0.13.tgz#0da96e83d5ea83d06f52de5e878ed2cf86908e2d"
+  integrity sha512-XR/INB38+0dj63jDQeMvdt18wvpn9YLYPLBnwBo/2a4USD3Qy/iSJYrU8+BA20hlQ0/JdtyjWdZRXUfI4b229A==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/messages" "^2.0.2"
+    prosemirror-model "^1.19.0"
+    prosemirror-state "^1.4.2"
+    prosemirror-view "^1.30.1"
+    y-prosemirror "^1.0.19"
+    y-protocols "^1.0.5"
+
+"@remirror/i18n@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@remirror/i18n/-/i18n-2.0.2.tgz#0b48c27da65ea9452f784a4e8ad94ec45c66537e"
+  integrity sha512-NYKGdMf3DGILMHKZfOrmiGW8XlhQ7w4edkenjQfa5FPTyvZTbQzKT0urxeoF9B1Pfu7VR6yiZZLp4yRMIiGqvw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@lingui/core" "^3.14.0"
+    "@lingui/detect-locale" "^3.14.0"
+    "@remirror/core-helpers" "^2.0.1"
+    make-plural "^6.2.1"
+
+"@remirror/icons@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@remirror/icons/-/icons-2.0.1.tgz#5a3a5c5aa0f5a580a26e4009f27fb64c8081a539"
+  integrity sha512-dk+F9c38seXFnJLfPNDXKCUonUAg53LFxhpBXNkZfPxmf6bVqv2p3L5QhwEvbYmvOgdY0w4BM1Po1NYHUJfATg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core-helpers" "^2.0.1"
+
+"@remirror/messages@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@remirror/messages/-/messages-2.0.2.tgz#05c7259ebc86cbec121c1bc0f58c51c0a77bfae3"
+  integrity sha512-Cf78RL2OXQCWkiO0QgV+1FCpmDwjoVctZ/ZAXT2RgBBmNKQHauPBZaG0Z3Cpb9I0vdz3xIaaEghwVS0cJNWtYA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@lingui/core" "^3.14.0"
+    "@remirror/core-helpers" "^2.0.1"
+
+"@remirror/pm@^2.0.3":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@remirror/pm/-/pm-2.0.4.tgz#75f8e99c759446fcac965e82bb4e06edb4c2cb70"
+  integrity sha512-rPtXxOIC62nIXK1MbVZvMGdyhW8w685uHJjKYcKu0NA8TViBTUKZr5Ou7yrye2+vLUkkXWJ9JZJHMoNwxF6onA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core-constants" "^2.0.0"
+    "@remirror/core-helpers" "^2.0.1"
+    prosemirror-collab "^1.3.0"
+    prosemirror-commands "^1.5.1"
+    prosemirror-dropcursor "^1.7.1"
+    prosemirror-gapcursor "^1.3.1"
+    prosemirror-history "^1.3.0"
+    prosemirror-inputrules "^1.2.0"
+    prosemirror-keymap "^1.2.1"
+    prosemirror-model "^1.19.0"
+    prosemirror-paste-rules "^2.0.4"
+    prosemirror-schema-list "^1.2.2"
+    prosemirror-state "^1.4.2"
+    prosemirror-suggest "^2.0.3"
+    prosemirror-tables "^1.3.2"
+    prosemirror-trailing-node "^2.0.3"
+    prosemirror-transform "^1.7.1"
+    prosemirror-view "^1.30.1"
+
+"@remirror/preset-core@^2.0.15":
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/@remirror/preset-core/-/preset-core-2.0.15.tgz#cb4016dd9322998d4c0204063c6766e9f33dea57"
+  integrity sha512-F8vjA4XKwdzsaNNuGNHJeLniKSDHiMPXcg/QI4cgUEYiHq5hgwuEJQKPAubfe6B/Z6wgvnOS7WtrPNK6MEGzTQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/extension-doc" "^2.1.4"
+    "@remirror/extension-events" "^2.1.13"
+    "@remirror/extension-gap-cursor" "^2.0.12"
+    "@remirror/extension-history" "^2.0.12"
+    "@remirror/extension-paragraph" "^2.0.12"
+    "@remirror/extension-positioner" "^2.1.7"
+    "@remirror/extension-text" "^2.0.12"
+
+"@remirror/preset-formatting@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/preset-formatting/-/preset-formatting-2.0.13.tgz#dd05746794e49106e14b5e89cc8ea0a682d230c5"
+  integrity sha512-/Dw1UTgw7IeoSJTSGkn568ClAikpVd21vg8uMGJjILfzm1DTsROQBNyI0ztALTr9eFGQ7H++AoXkfqjLfP9iTg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/extension-bold" "^2.0.12"
+    "@remirror/extension-columns" "^2.0.12"
+    "@remirror/extension-font-size" "^2.0.12"
+    "@remirror/extension-heading" "^2.0.12"
+    "@remirror/extension-italic" "^2.0.12"
+    "@remirror/extension-node-formatting" "^2.0.12"
+    "@remirror/extension-strike" "^2.0.12"
+    "@remirror/extension-sub" "^2.0.12"
+    "@remirror/extension-sup" "^2.0.12"
+    "@remirror/extension-text-case" "^2.0.12"
+    "@remirror/extension-text-color" "^2.0.13"
+    "@remirror/extension-text-highlight" "^2.0.13"
+    "@remirror/extension-underline" "^2.0.12"
+    "@remirror/extension-whitespace" "^2.0.12"
+
+"@remirror/preset-react@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/preset-react/-/preset-react-2.0.13.tgz#977e1fd9eb6280b5a1bb6d21301230da5bfe73a7"
+  integrity sha512-NZTyQllH+YZb8zsiiuUSOxbIdmy9nWu5R94GR3ITIrUlvjBxo2fwb0rjV/NDr9DT89mdTSvHqQ2JFsmtjHswVQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/extension-placeholder" "^2.0.13"
+    "@remirror/extension-react-component" "^2.0.12"
+    "@remirror/react-utils" "^2.0.4"
+
+"@remirror/preset-wysiwyg@^2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@remirror/preset-wysiwyg/-/preset-wysiwyg-2.0.18.tgz#8ef1c5aef4580fc7a763bb817446c97e135ff837"
+  integrity sha512-dnCkuo0XGVqy4D6leXWjatdpGCronGIUss96V+/d3oNWFhQHNydoQ7rqFRsaEOuMYzMpHHGrVIu6cxtk1PdMJw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/extension-bidi" "^2.0.12"
+    "@remirror/extension-blockquote" "^2.0.13"
+    "@remirror/extension-bold" "^2.0.12"
+    "@remirror/extension-code" "^2.0.12"
+    "@remirror/extension-code-block" "^2.0.13"
+    "@remirror/extension-drop-cursor" "^2.0.12"
+    "@remirror/extension-embed" "^2.0.12"
+    "@remirror/extension-gap-cursor" "^2.0.12"
+    "@remirror/extension-hard-break" "^2.0.12"
+    "@remirror/extension-heading" "^2.0.12"
+    "@remirror/extension-horizontal-rule" "^2.0.12"
+    "@remirror/extension-image" "^2.1.8"
+    "@remirror/extension-italic" "^2.0.12"
+    "@remirror/extension-link" "^2.0.14"
+    "@remirror/extension-list" "^2.0.15"
+    "@remirror/extension-search" "^2.0.13"
+    "@remirror/extension-shortcuts" "^2.0.12"
+    "@remirror/extension-strike" "^2.0.12"
+    "@remirror/extension-trailing-node" "^2.0.12"
+    "@remirror/extension-underline" "^2.0.12"
+    "@remirror/preset-core" "^2.0.15"
+
+"@remirror/react-components@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@remirror/react-components/-/react-components-2.1.11.tgz#21be34c0c4a730466637b62cba940c99279e4876"
+  integrity sha512-2JYxMryRdsR50GmNwVV2ff2DRu4uVCJ5g1ZZCpDxTFOJeOqFIPFNKtoGjBdUhkTQihKkIN5NFvG6tci1LsqgqA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/react" "^11.9.0"
+    "@emotion/styled" "^11.3.0"
+    "@lingui/core" "^3.17.1"
+    "@mui/material" "^5.8.5"
+    "@popperjs/core" "^2.9.2"
+    "@remirror/core" "^2.0.12"
+    "@remirror/extension-blockquote" "^2.0.13"
+    "@remirror/extension-bold" "^2.0.12"
+    "@remirror/extension-callout" "^2.0.13"
+    "@remirror/extension-code" "^2.0.12"
+    "@remirror/extension-code-block" "^2.0.13"
+    "@remirror/extension-columns" "^2.0.12"
+    "@remirror/extension-find" "^0.1.5"
+    "@remirror/extension-font-size" "^2.0.12"
+    "@remirror/extension-heading" "^2.0.12"
+    "@remirror/extension-history" "^2.0.12"
+    "@remirror/extension-horizontal-rule" "^2.0.12"
+    "@remirror/extension-italic" "^2.0.12"
+    "@remirror/extension-list" "^2.0.15"
+    "@remirror/extension-node-formatting" "^2.0.12"
+    "@remirror/extension-positioner" "^2.1.7"
+    "@remirror/extension-strike" "^2.0.12"
+    "@remirror/extension-sub" "^2.0.12"
+    "@remirror/extension-sup" "^2.0.12"
+    "@remirror/extension-tables" "^2.2.9"
+    "@remirror/extension-text-color" "^2.0.13"
+    "@remirror/extension-underline" "^2.0.12"
+    "@remirror/extension-whitespace" "^2.0.12"
+    "@remirror/i18n" "^2.0.2"
+    "@remirror/icons" "^2.0.1"
+    "@remirror/messages" "^2.0.2"
+    "@remirror/react-core" "^2.0.16"
+    "@remirror/react-hooks" "^2.0.21"
+    "@remirror/react-utils" "^2.0.4"
+    "@remirror/theme" "^2.0.6"
+    "@seznam/compose-react-refs" "^1.0.6"
+    "@types/react-color" "^3.0.6"
+    create-context-state "^2.0.0"
+    match-sorter "^6.3.0"
+    multishift "^2.0.7"
+    react-color "^2.19.3"
+
+"@remirror/react-core@^2.0.16":
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/@remirror/react-core/-/react-core-2.0.16.tgz#34e86d4b0c52198c8479571a4a1822545f1d548c"
+  integrity sha512-x70HJWGK30d4DbPPyPNN/qgwDAhnerD9Jb0eC2ykkrh7jushyma5fSCbAi7FbixKN47knC7aQg8+5PmiKxluAQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/extension-positioner" "^2.1.7"
+    "@remirror/extension-react-component" "^2.0.12"
+    "@remirror/i18n" "^2.0.2"
+    "@remirror/preset-core" "^2.0.15"
+    "@remirror/preset-react" "^2.0.13"
+    "@remirror/react-renderer" "^2.0.12"
+    "@remirror/react-utils" "^2.0.4"
+    "@remirror/theme" "^2.0.6"
+    "@seznam/compose-react-refs" "^1.0.6"
+    create-context-state "^2.0.0"
+    fast-deep-equal "^3.1.3"
+    resize-observer-polyfill "^1.5.1"
+    tiny-warning "^1.0.3"
+
+"@remirror/react-hooks@^2.0.21":
+  version "2.0.21"
+  resolved "https://registry.yarnpkg.com/@remirror/react-hooks/-/react-hooks-2.0.21.tgz#2c908e65f2bda9dbce7c16e7541cb2a66a158ae4"
+  integrity sha512-40P+vooE4lIJ9m+xS/gRkKv+R4jRZvESx+YRKlaAknc3L841iU/KfUmTCES64ass0nTCRxwYU6Q2evSBLx547g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/extension-emoji" "^2.0.16"
+    "@remirror/extension-events" "^2.1.13"
+    "@remirror/extension-history" "^2.0.12"
+    "@remirror/extension-mention" "^2.0.14"
+    "@remirror/extension-mention-atom" "^2.0.15"
+    "@remirror/extension-positioner" "^2.1.7"
+    "@remirror/i18n" "^2.0.2"
+    "@remirror/react-core" "^2.0.16"
+    "@remirror/react-utils" "^2.0.4"
+    multishift "^2.0.7"
+    use-isomorphic-layout-effect "^1.1.1"
+    use-previous "^1.1.0"
+
+"@remirror/react-renderer@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/react-renderer/-/react-renderer-2.0.12.tgz#528774bcaca01a8e077d03dc982d902435350f46"
+  integrity sha512-Zj0yfATfaK7/eFzunQwcyxA7tUDwsysZo1jqO/r/YRWTNgUqCVYfMabYvdc5WIALpT/L/XWr3hWdvTUpCoQYlQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+
+"@remirror/react-utils@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@remirror/react-utils/-/react-utils-2.0.4.tgz#6b75b630eb0b86bed2ae045f2a4185ecaaa45744"
+  integrity sha512-zRwPzBpGgrYfP5f8j6aFXyiUcGnC1vOc/FIl7YVQO384oquV8zLVmbX6+s+WKswqbS7UNBWPwD1Z6sCTq6yTwQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core-constants" "^2.0.0"
+    "@remirror/core-helpers" "^2.0.1"
+    "@remirror/core-types" "^2.0.4"
+
+"@remirror/react@^2.0.24":
+  version "2.0.27"
+  resolved "https://registry.yarnpkg.com/@remirror/react/-/react-2.0.27.tgz#19c6d193291852d679f3af74232a09a2495a78a0"
+  integrity sha512-BsJjoHo6sx5a0wWN9XzWYo6yukbquv2cLWoyAfEvqgXV3MQdGv9NAGD94nNDk0Bzi5iQu5pdx4/pkcVAW/NeXA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/extension-placeholder" "^2.0.13"
+    "@remirror/extension-positioner" "^2.1.7"
+    "@remirror/extension-react-component" "^2.0.12"
+    "@remirror/extension-react-tables" "^2.2.14"
+    "@remirror/preset-react" "^2.0.13"
+    "@remirror/react-components" "^2.1.11"
+    "@remirror/react-core" "^2.0.16"
+    "@remirror/react-hooks" "^2.0.21"
+    "@remirror/react-renderer" "^2.0.12"
+    "@remirror/react-utils" "^2.0.4"
+
+"@remirror/theme@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@remirror/theme/-/theme-2.0.6.tgz#04aabfa7ac5de67d5550af462aef1e94bddb48c0"
+  integrity sha512-sTrOKe1YRF2cPSLnV4wxEJVs9tW4hHRNxqAhwItKkGgh18Auej7/HWuwsSgM15kv3W9GatT8/5Tf+D5vPS+3Ew==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@linaria/core" "3.0.0-beta.13"
+    "@remirror/core-types" "^2.0.4"
+    color2k "^2.0.0"
+    csstype "^3.0.7"
+
+"@remirror/types@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@remirror/types/-/types-1.0.0.tgz#cc8764440089a2ada71f149c409739575b73b12e"
+  integrity sha512-7HQbW7k8VxrAtfzs9FxwO6XSDabn8tSFDi1wwzShOnU+cvaYpfxu0ygyTk3TpXsag1hgFKY3ZIlAfB4WVz2LkQ==
+  dependencies:
+    type-fest "^2.0.0"
+
+"@rollup/plugin-babel@^5.2.0":
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
+  integrity sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==
+  dependencies:
+    "@babel/helper-module-imports" "^7.10.4"
+    "@rollup/pluginutils" "^3.1.0"
+
+"@rollup/plugin-commonjs@24.0.0":
+  version "24.0.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.0.tgz#fb7cf4a6029f07ec42b25daa535c75b05a43f75c"
+  integrity sha512-0w0wyykzdyRRPHOb0cQt14mIBLujfAv6GgP6g8nvg/iBxEm112t3YPPq+Buqe2+imvElTka+bjNlJ/gB56TD8g==
+  dependencies:
+    "@rollup/pluginutils" "^5.0.1"
+    commondir "^1.0.1"
+    estree-walker "^2.0.2"
+    glob "^8.0.3"
+    is-reference "1.2.1"
+    magic-string "^0.27.0"
+
+"@rollup/plugin-node-resolve@^11.2.1":
+  version "11.2.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz#82aa59397a29cd4e13248b106e6a4a1880362a60"
+  integrity sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    "@types/resolve" "1.17.1"
+    builtin-modules "^3.1.0"
+    deepmerge "^4.2.2"
+    is-module "^1.0.0"
+    resolve "^1.19.0"
+
+"@rollup/plugin-replace@^2.4.1":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz#a2d539314fbc77c244858faa523012825068510a"
+  integrity sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    magic-string "^0.25.7"
+
+"@rollup/pluginutils@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
+  integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
+  dependencies:
+    "@types/estree" "0.0.39"
+    estree-walker "^1.0.1"
+    picomatch "^2.2.2"
+
+"@rollup/pluginutils@^5.0.1":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.2.tgz#012b8f53c71e4f6f9cb317e311df1404f56e7a33"
+  integrity sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^2.3.1"
+
+"@rushstack/eslint-patch@^1.1.3":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728"
+  integrity sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==
+
+"@sentry-internal/tracing@7.49.0":
+  version "7.49.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.49.0.tgz#f589de565370884b9a13f82c98463de9b2d25dcd"
+  integrity sha512-ESh3+ZneQk/3HESTUmIPNrW5GVPu/HrRJU+eAJJto74vm+6vP7zDn2YV2gJ1w18O/37nc7W/bVCgZJlhZ3cwew==
+  dependencies:
+    "@sentry/core" "7.49.0"
+    "@sentry/types" "7.49.0"
+    "@sentry/utils" "7.49.0"
+    tslib "^1.9.3"
+
+"@sentry/browser@7.49.0":
+  version "7.49.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.49.0.tgz#5ce1cdb8d883c129d9a4e313c08a54c5ada4661b"
+  integrity sha512-x2DekKkQoY7/dhBzE4J25mdQ978NtPBTVQb+uZqlF/t5mp4K44TAszmPqy8lC/CmVHkp7qcpRGSCIzeboUL4KA==
+  dependencies:
+    "@sentry-internal/tracing" "7.49.0"
+    "@sentry/core" "7.49.0"
+    "@sentry/replay" "7.49.0"
+    "@sentry/types" "7.49.0"
+    "@sentry/utils" "7.49.0"
+    tslib "^1.9.3"
+
+"@sentry/cli@^1.74.6":
+  version "1.75.0"
+  resolved "https://registry.yarnpkg.com/@sentry/cli/-/cli-1.75.0.tgz#4a5e71b5619cd4e9e6238cc77857c66f6b38d86a"
+  integrity sha512-vT8NurHy00GcN8dNqur4CMIYvFH3PaKdkX3qllVvi4syybKqjwoz+aWRCvprbYv0knweneFkLt1SmBWqazUMfA==
+  dependencies:
+    https-proxy-agent "^5.0.0"
+    mkdirp "^0.5.5"
+    node-fetch "^2.6.7"
+    progress "^2.0.3"
+    proxy-from-env "^1.1.0"
+    which "^2.0.2"
+
+"@sentry/core@7.49.0":
+  version "7.49.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.49.0.tgz#340d059f5efeff1a3359fef66d0c8e34e79ac992"
+  integrity sha512-AlSnCYgfEbvK8pkNluUkmdW/cD9UpvOVCa+ERQswXNRkAv5aDGCL6Ihv6fnIajE++BYuwZh0+HwZUBVKTFzoZg==
+  dependencies:
+    "@sentry/types" "7.49.0"
+    "@sentry/utils" "7.49.0"
+    tslib "^1.9.3"
+
+"@sentry/integrations@7.49.0":
+  version "7.49.0"
+  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.49.0.tgz#e123f687e0abe10d3428027e3879ce231503fc2f"
+  integrity sha512-qsEVkcZjw+toFGnzsVo+Cozz+hMK9LugzkfJyOFL+CyiEx9MfkEmsvRpZe1ETEWKe/VZylYU27NQzl6UNuAUjw==
+  dependencies:
+    "@sentry/types" "7.49.0"
+    "@sentry/utils" "7.49.0"
+    localforage "^1.8.1"
+    tslib "^1.9.3"
+
+"@sentry/nextjs@^7.36.0":
+  version "7.49.0"
+  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-7.49.0.tgz#4cc1b8a6cf77db2d9f9cb488644f5f8f80505122"
+  integrity sha512-MXcaIe1qgSDlRYIlq4XzjFNIBNmSRb4MnaQg7JKmoSzEh+AXvnRDNG5gYhsKJBKdBZGRsKyevNrbb9Yh9YpsNg==
+  dependencies:
+    "@rollup/plugin-commonjs" "24.0.0"
+    "@sentry/core" "7.49.0"
+    "@sentry/integrations" "7.49.0"
+    "@sentry/node" "7.49.0"
+    "@sentry/react" "7.49.0"
+    "@sentry/types" "7.49.0"
+    "@sentry/utils" "7.49.0"
+    "@sentry/webpack-plugin" "1.20.0"
+    chalk "3.0.0"
+    rollup "2.78.0"
+    stacktrace-parser "^0.1.10"
+    tslib "^1.9.3"
+
+"@sentry/node@7.49.0":
+  version "7.49.0"
+  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.49.0.tgz#95c28848b5c27940b079c08e9987088e2bf9d821"
+  integrity sha512-KLIrqcbKk4yR3g8fjl87Eyv4M9j4YI6b7sqVAZYj3FrX3mC6JQyGdlDfUpSKy604n1iAdr6OuUp5f9x7jPJaeQ==
+  dependencies:
+    "@sentry-internal/tracing" "7.49.0"
+    "@sentry/core" "7.49.0"
+    "@sentry/types" "7.49.0"
+    "@sentry/utils" "7.49.0"
+    cookie "^0.4.1"
+    https-proxy-agent "^5.0.0"
+    lru_map "^0.3.3"
+    tslib "^1.9.3"
+
+"@sentry/react@7.49.0":
+  version "7.49.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.49.0.tgz#9a31808d4232d3010019e09d7c706b3d4fe54960"
+  integrity sha512-s+ROJr1tP9zVBmoOn94JM+fu2TuoJKxkSXTEUOKoQ9P6P5ROzpDqTzHRGk6u4OjZTy5tftRyEqBGM2Iaf9Y+UA==
+  dependencies:
+    "@sentry/browser" "7.49.0"
+    "@sentry/types" "7.49.0"
+    "@sentry/utils" "7.49.0"
+    hoist-non-react-statics "^3.3.2"
+    tslib "^1.9.3"
+
+"@sentry/replay@7.49.0":
+  version "7.49.0"
+  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.49.0.tgz#c7f16bc3ca0c5911f641738f8894eb596c5da00d"
+  integrity sha512-UY3bHoBDPOu4Dpq3m3oxNjLrq09NiFVYUfrTN4QOq1Am2SA04XbuCj/YZ+jNVy/NrFtoz9cTovK6oQbNw53jog==
+  dependencies:
+    "@sentry/core" "7.49.0"
+    "@sentry/types" "7.49.0"
+    "@sentry/utils" "7.49.0"
+
+"@sentry/types@7.49.0":
+  version "7.49.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.49.0.tgz#2c217091e13dc373682f5be2e9b5baed9d2ae695"
+  integrity sha512-9yXXh7iv76+O6h2ONUVx0wsL1auqJFWez62mTjWk4350SgMmWp/zUkBxnVXhmcYqscz/CepC+Loz9vITLXtgxg==
+
+"@sentry/utils@7.49.0":
+  version "7.49.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.49.0.tgz#b1b3a2af52067dd27e660c7c3062a31cdf4b94f9"
+  integrity sha512-JdC9yGnOgev4ISJVwmIoFsk8Zx0psDZJAj2DV7x4wMZsO6QK+YjC7G3mUED/S5D5lsrkBZ/3uvQQhr8DQI4UcQ==
+  dependencies:
+    "@sentry/types" "7.49.0"
+    tslib "^1.9.3"
+
+"@sentry/webpack-plugin@1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@sentry/webpack-plugin/-/webpack-plugin-1.20.0.tgz#e7add76122708fb6b4ee7951294b521019720e58"
+  integrity sha512-Ssj1mJVFsfU6vMCOM2d+h+KQR7QHSfeIP16t4l20Uq/neqWXZUQ2yvQfe4S3BjdbJXz/X4Rw8Hfy1Sd0ocunYw==
+  dependencies:
+    "@sentry/cli" "^1.74.6"
+    webpack-sources "^2.0.0 || ^3.0.0"
+
+"@seznam/compose-react-refs@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@seznam/compose-react-refs/-/compose-react-refs-1.0.6.tgz#6ec4e70bdd6e32f8e70b4100f27267cf306bd8df"
+  integrity sha512-izzOXQfeQLonzrIQb8u6LQ8dk+ymz3WXTIXjvOlTXHq6sbzROg3NWU+9TTAOpEoK9Bth24/6F/XrfHJ5yR5n6Q==
+
+"@surma/rollup-plugin-off-main-thread@^2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
+  integrity sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==
+  dependencies:
+    ejs "^3.1.6"
+    json5 "^2.2.0"
+    magic-string "^0.25.0"
+    string.prototype.matchall "^4.0.6"
+
+"@svgmoji/blob@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@svgmoji/blob/-/blob-3.2.0.tgz#62a0ab1ba22a0d27f23cb38aacf6d4fb13123dfb"
+  integrity sha512-N96WOrH9GxPSPZ/FuvZl6T9Rh54stAEuUcBppIRFh9/WwkU7Hczrjabw4uunwxFLX5TgR+rHlKJl3/jaTnXJrQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@svgmoji/core" "^3.2.0"
+
+"@svgmoji/core@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@svgmoji/core/-/core-3.2.0.tgz#792326078ded3446747691d633278010f322f460"
+  integrity sha512-QsD78Op3S/5kUVsa5ierr4Wu/xwAdYuMI3Zmc/Y2ekYBEMGEUY8QxilXQRSAQ4ku4PnNV4xlB9e7xhD5hy113A==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    emojibase "^5.1.0"
+    emojibase-regex "^5.1.1"
+    idb-keyval "^5.0.2"
+    match-sorter "^6.2.0"
+    type-fest "^1.2.0"
+
+"@svgmoji/noto@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@svgmoji/noto/-/noto-3.2.0.tgz#ff99dc95f2d098050d9d19696d019fe22677760b"
+  integrity sha512-JgtNciB06hMDI1Pb1N2IgLh44XRMZUUNwBANzjY5jXTPqOCu1A1VA35ENvUsRhEUZOm8I+hbdAEHkwMVqxLeIQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@svgmoji/core" "^3.2.0"
+
+"@svgmoji/openmoji@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@svgmoji/openmoji/-/openmoji-3.2.0.tgz#776fece19f8c253206182cb65685c864ba9bebd2"
+  integrity sha512-USHbG+O80HfmdoNAHbOnlO+2gppXJfHFWKSRFj53Th4aimWEx4/9MB3cFbC3KZ1NOqXaLBq9jDaw4vFuGDVTUQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@svgmoji/core" "^3.2.0"
+
+"@svgmoji/twemoji@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@svgmoji/twemoji/-/twemoji-3.2.0.tgz#0a12df9f5b30af457b4a1779051de470a15c1b00"
+  integrity sha512-6xqZgh9viFDKf5wvrxw56ImCR3Ni84IqwK45lxojOe1Gc1Mni1GpPfr4gb7WHDKjumfx+K7BHSvX0KXt3Nr3CQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@svgmoji/core" "^3.2.0"
+
+"@swc/helpers@0.4.11":
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.11.tgz#db23a376761b3d31c26502122f349a21b592c8de"
+  integrity sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==
+  dependencies:
+    tslib "^2.4.0"
+
+"@types/codemirror@^5.60.2":
+  version "5.60.7"
+  resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-5.60.7.tgz#efbb78e5e79f90c6762c2127c02096648e600808"
+  integrity sha512-QXIC+RPzt/1BGSuD6iFn6UMC9TDp+9hkOANYNPVsjjrDdzKphfRkwQDKGp2YaC54Yhz0g6P5uYTCCibZZEiMAA==
+  dependencies:
+    "@types/tern" "*"
+
+"@types/d3-array@^3.0.3":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.0.4.tgz#44eebe40be57476cad6a0cd6a85b0f57d54185a2"
+  integrity sha512-nwvEkG9vYOc0Ic7G7kwgviY4AQlTfYGIZ0fqB7CQHXGyYM6nO7kJh5EguSNA3jfh4rq7Sb7eMVq8isuvg2/miQ==
+
+"@types/d3-color@*":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.0.tgz#6594da178ded6c7c3842f3cc0ac84b156f12f2d4"
+  integrity sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==
+
+"@types/d3-ease@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-3.0.0.tgz#c29926f8b596f9dadaeca062a32a45365681eae0"
+  integrity sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==
+
+"@types/d3-interpolate@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz#e7d17fa4a5830ad56fe22ce3b4fac8541a9572dc"
+  integrity sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==
+  dependencies:
+    "@types/d3-color" "*"
+
+"@types/d3-path@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.0.0.tgz#939e3a784ae4f80b1fde8098b91af1776ff1312b"
+  integrity sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==
+
+"@types/d3-scale@^4.0.2":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.3.tgz#7a5780e934e52b6f63ad9c24b105e33dd58102b5"
+  integrity sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==
+  dependencies:
+    "@types/d3-time" "*"
+
+"@types/d3-shape@^3.1.0":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.1.tgz#15cc497751dac31192d7aef4e67a8d2c62354b95"
+  integrity sha512-6Uh86YFF7LGg4PQkuO2oG6EMBRLuW9cbavUW46zkIO5kuS2PfTqo2o9SkgtQzguBHbLgNnU90UNsITpsX1My+A==
+  dependencies:
+    "@types/d3-path" "*"
+
+"@types/d3-time@*", "@types/d3-time@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.0.tgz#e1ac0f3e9e195135361fa1a1d62f795d87e6e819"
+  integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==
+
+"@types/d3-timer@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.0.tgz#e2505f1c21ec08bda8915238e397fb71d2fc54ce"
+  integrity sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==
+
+"@types/direction@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/direction/-/direction-1.0.0.tgz#6a0962feade8502f9e986e87abe1130b611b13be"
+  integrity sha512-et1wmqXm/5smJ8lTJfBnwD12/2Y7eVJLKbuaRT0h2xaKAoo1h8Dz2Io22GObDLFwxY1ddXRTLH3Gq5v44Fl/2w==
+
+"@types/dom4@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/dom4/-/dom4-2.0.2.tgz#6495303f049689ce936ed328a3e5ede9c51408ee"
+  integrity sha512-Rt4IC1T7xkCWa0OG1oSsPa0iqnxlDeQqKXZAHrQGLb7wFGncWm85MaxKUjAGejOrUynOgWlFi4c6S6IyJwoK4g==
+
+"@types/estree@*", "@types/estree@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.1.tgz#aa22750962f3bf0e79d753d3cc067f010c95f194"
+  integrity sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==
+
+"@types/estree@0.0.39":
+  version "0.0.39"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
+  integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
+
+"@types/glob@^7.1.1":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb"
+  integrity sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==
+  dependencies:
+    "@types/minimatch" "*"
+    "@types/node" "*"
+
+"@types/hast@^2.0.0":
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.4.tgz#8aa5ef92c117d20d974a82bdfb6a648b08c0bafc"
+  integrity sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==
+  dependencies:
+    "@types/unist" "*"
+
+"@types/hoist-non-react-statics@^3.3.0":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
+"@types/js-cookie@^2.2.6":
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.7.tgz#226a9e31680835a6188e887f3988e60c04d3f6a3"
+  integrity sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==
+
+"@types/js-cookie@^3.0.2":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-3.0.3.tgz#d6bfbbdd0c187354ca555213d1962f6d0691ff4e"
+  integrity sha512-Xe7IImK09HP1sv2M/aI+48a20VX+TdRJucfq4vfRVy6nWN8PYPOEnlMRSgxJAgYQIXJVL8dZ4/ilAM7dWNaOww==
+
+"@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
+  version "7.0.11"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
+  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
+
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
+  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
+
+"@types/lodash.debounce@^4.0.7":
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.7.tgz#0285879defb7cdb156ae633cecd62d5680eded9f"
+  integrity sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.194"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.194.tgz#b71eb6f7a0ff11bff59fc987134a093029258a76"
+  integrity sha512-r22s9tAS7imvBt2lyHC9B8AGwWnXaYb1tY09oyLkXDs4vArpYJzw09nj8MLx5VfciBPGIb+ZwG0ssYnEPJxn/g==
+
+"@types/marked@^4.0.2":
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.0.8.tgz#b316887ab3499d0a8f4c70b7bd8508f92d477955"
+  integrity sha512-HVNzMT5QlWCOdeuBsgXP8EZzKUf0+AXzN+sLmjvaB3ZlLqO+e4u0uXrdw9ub69wBKFs+c6/pA4r9sy6cCDvImw==
+
+"@types/min-document@^2.19.0":
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/@types/min-document/-/min-document-2.19.0.tgz#4f9919e789917c00de967a2c38fa8d234cbcd7d6"
+  integrity sha512-lsYeSW1zfNqHTL1RuaOgfAhoiOWV1RAQDKT0BZ26z4Faz8llVIj1r1ablUo5QY6yzHMketuvu4+N0sv0eZpXTg==
+
+"@types/minimatch@*":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-5.1.2.tgz#07508b45797cb81ec3f273011b054cd0755eddca"
+  integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
+
+"@types/node@*":
+  version "18.15.13"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.13.tgz#f64277c341150c979e42b00e4ac289290c9df469"
+  integrity sha512-N+0kuo9KgrUQ1Sn/ifDXsvg0TTleP7rIy4zOBGECxAljqvqfqpTfzx0Q1NUedOixRMBfe2Whhb056a42cWs26Q==
+
+"@types/node@18.0.6":
+  version "18.0.6"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.0.6.tgz#0ba49ac517ad69abe7a1508bc9b3a5483df9d5d7"
+  integrity sha512-/xUq6H2aQm261exT6iZTMifUySEt4GR5KX8eYyY+C4MSNPqSh9oNIP7tz2GLKTlFaiBbgZNxffoR3CVRG+cljw==
+
+"@types/nprogress@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.2.0.tgz#86c593682d4199212a0509cc3c4d562bbbd6e45f"
+  integrity sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==
+
+"@types/object.omit@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/object.omit/-/object.omit-3.0.0.tgz#0d31e1208eac8fe2ad5c9499a1016a8273bbfafc"
+  integrity sha512-I27IoPpH250TUzc9FzXd0P1BV/BMJuzqD3jOz98ehf9dQqGkxlq+hO1bIqZGWqCg5bVOy0g4AUVJtnxe0klDmw==
+
+"@types/object.pick@^1.3.1":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@types/object.pick/-/object.pick-1.3.2.tgz#9eb28118240ad8f658b9c9c6caf35359fdb37150"
+  integrity sha512-sn7L+qQ6RLPdXRoiaE7bZ/Ek+o4uICma/lBFPyJEKDTPTBP1W8u0c4baj3EiS4DiqLs+Hk+KUGvMVJtAw3ePJg==
+
+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+
+"@types/prismjs@*":
+  version "1.26.0"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.0.tgz#a1c3809b0ad61c62cac6d4e0c56d610c910b7654"
+  integrity sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==
+
+"@types/prop-types@*", "@types/prop-types@^15.7.5":
+  version "15.7.5"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
+  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+
+"@types/querystringify@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/querystringify/-/querystringify-2.0.0.tgz#d1eab3214ee2b57c3bd7eba0ab94b231028522fb"
+  integrity sha512-9WgEGTevECrXJC2LSWPqiPYWq8BRmeaOyZn47js/3V6UF0PWtcVfvvR43YjeO8BzBsthTz98jMczujOwTw+WYg==
+
+"@types/react-beautiful-dnd@^13.1.2":
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.4.tgz#bcec72da719c18c0d8b4a7cb00e7fb443211d6d7"
+  integrity sha512-4bIBdzOr0aavN+88q3C7Pgz+xkb7tz3whORYrmSj77wfVEMfiWiooIwVWFR7KM2e+uGTe5BVrXqSfb0aHeflJA==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-color@^3.0.6":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.6.tgz#602fed023802b2424e7cd6ff3594ccd3d5055f9a"
+  integrity sha512-OzPIO5AyRmLA7PlOyISlgabpYUa3En74LP8mTMa0veCA719SvYQov4WLMsHvCgXP+L+KI9yGhYnqZafVGG0P4w==
+  dependencies:
+    "@types/react" "*"
+    "@types/reactcss" "*"
+
+"@types/react-datepicker@^4.8.0":
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-4.10.0.tgz#fcb0e6a7787491bf2f37fbda2b537062608a0056"
+  integrity sha512-Cq+ks20vBIU6XN67TbkCHu8M7V46Y6vJrKE2n+8q/GfueJyWWTIKeC3Z7cz/d+qxGDq/VCrqA929R0U4lNuztg==
+  dependencies:
+    "@popperjs/core" "^2.9.2"
+    "@types/react" "*"
+    date-fns "^2.0.1"
+    react-popper "^2.2.5"
+
+"@types/react-dom@18.0.6":
+  version "18.0.6"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1"
+  integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-is@^16.7.1 || ^17.0.0":
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a"
+  integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-redux@^7.1.20":
+  version "7.1.25"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.25.tgz#de841631205b24f9dfb4967dd4a7901e048f9a88"
+  integrity sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
+"@types/react-transition-group@^4.4.5":
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
+  integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "18.0.38"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.38.tgz#02a23bef8848b360a0d1dceef4432c15c21c600c"
+  integrity sha512-ExsidLLSzYj4cvaQjGnQCk4HFfVT9+EZ9XZsQ8Hsrcn8QNgXtpZ3m9vSIC2MWtx7jHictK6wYhQgGh6ic58oOw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/react@18.0.15":
+  version "18.0.15"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.15.tgz#d355644c26832dc27f3e6cbf0c4f4603fc4ab7fe"
+  integrity sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/reactcss@*":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.6.tgz#133c1e7e896f2726370d1d5a26bf06a30a038bcc"
+  integrity sha512-qaIzpCuXNWomGR1Xq8SCFTtF4v8V27Y6f+b9+bzHiv087MylI/nTCqqdChNeWS7tslgROmYB7yeiruWX7WnqNg==
+  dependencies:
+    "@types/react" "*"
+
+"@types/refractor@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/refractor/-/refractor-3.0.2.tgz#2d42128d59f78f84d2c799ffc5ab5cadbcba2d82"
+  integrity sha512-2HMXuwGuOqzUG+KUTm9GDJCHl0LCBKsB5cg28ujEmVi/0qgTb6jOmkVSO5K48qXksyl2Fr3C0Q2VrgD4zbwyXg==
+  dependencies:
+    "@types/prismjs" "*"
+
+"@types/resolve@1.17.1":
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
+  integrity sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==
+  dependencies:
+    "@types/node" "*"
+
+"@types/scheduler@*":
+  version "0.16.3"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
+  integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
+
+"@types/semver@^7.3.12":
+  version "7.3.13"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.13.tgz#da4bfd73f49bd541d28920ab0e2bf0ee80f71c91"
+  integrity sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==
+
+"@types/string.prototype.matchall@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/string.prototype.matchall/-/string.prototype.matchall-4.0.1.tgz#f418c53cf4b95f152b870e43c41fa3825caea942"
+  integrity sha512-jVQQq9YbEcLwWejeHs4CMVZkereuGPgflaOH/BGqHOYT45f3LV0Ah2Cmc0Cby/DZ9qhIp2V3lqPTHnLXlK7VLQ==
+
+"@types/tern@*":
+  version "0.23.4"
+  resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.4.tgz#03926eb13dbeaf3ae0d390caf706b2643a0127fb"
+  integrity sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==
+  dependencies:
+    "@types/estree" "*"
+
+"@types/throttle-debounce@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz#1c3df624bfc4b62f992d3012b84c56d41eab3776"
+  integrity sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==
+
+"@types/trusted-types@^2.0.2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.3.tgz#a136f83b0758698df454e328759dbd3d44555311"
+  integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==
+
+"@types/turndown@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@types/turndown/-/turndown-5.0.1.tgz#fcda7b02cda4c9d445be1440036df20f335b9387"
+  integrity sha512-N8Ad4e3oJxh9n9BiZx9cbe/0M3kqDpOTm2wzj13wdDUxDPjfjloWIJaquZzWE1cYTAHpjOH3rcTnXQdpEfS/SQ==
+
+"@types/unist@*":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
+  integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
+
+"@types/uuid@^8.3.4":
+  version "8.3.4"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
+  integrity sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==
+
+"@typescript-eslint/eslint-plugin@^5.48.2":
+  version "5.59.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.0.tgz#c0e10eeb936debe5d1c3433cf36206a95befefd0"
+  integrity sha512-p0QgrEyrxAWBecR56gyn3wkG15TJdI//eetInP3zYRewDh0XS+DhB3VUAd3QqvziFsfaQIoIuZMxZRB7vXYaYw==
+  dependencies:
+    "@eslint-community/regexpp" "^4.4.0"
+    "@typescript-eslint/scope-manager" "5.59.0"
+    "@typescript-eslint/type-utils" "5.59.0"
+    "@typescript-eslint/utils" "5.59.0"
+    debug "^4.3.4"
+    grapheme-splitter "^1.0.4"
+    ignore "^5.2.0"
+    natural-compare-lite "^1.4.0"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/parser@^5.21.0", "@typescript-eslint/parser@^5.48.2":
+  version "5.59.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.59.0.tgz#0ad7cd019346cc5d150363f64869eca10ca9977c"
+  integrity sha512-qK9TZ70eJtjojSUMrrEwA9ZDQ4N0e/AuoOIgXuNBorXYcBDk397D2r5MIe1B3cok/oCtdNC5j+lUUpVB+Dpb+w==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.59.0"
+    "@typescript-eslint/types" "5.59.0"
+    "@typescript-eslint/typescript-estree" "5.59.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/scope-manager@5.59.0":
+  version "5.59.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.59.0.tgz#86501d7a17885710b6716a23be2e93fc54a4fe8c"
+  integrity sha512-tsoldKaMh7izN6BvkK6zRMINj4Z2d6gGhO2UsI8zGZY3XhLq1DndP3Ycjhi1JwdwPRwtLMW4EFPgpuKhbCGOvQ==
+  dependencies:
+    "@typescript-eslint/types" "5.59.0"
+    "@typescript-eslint/visitor-keys" "5.59.0"
+
+"@typescript-eslint/type-utils@5.59.0":
+  version "5.59.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.59.0.tgz#8e8d1420fc2265989fa3a0d897bde37f3851e8c9"
+  integrity sha512-d/B6VSWnZwu70kcKQSCqjcXpVH+7ABKH8P1KNn4K7j5PXXuycZTPXF44Nui0TEm6rbWGi8kc78xRgOC4n7xFgA==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "5.59.0"
+    "@typescript-eslint/utils" "5.59.0"
+    debug "^4.3.4"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/types@5.59.0":
+  version "5.59.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.59.0.tgz#3fcdac7dbf923ec5251545acdd9f1d42d7c4fe32"
+  integrity sha512-yR2h1NotF23xFFYKHZs17QJnB51J/s+ud4PYU4MqdZbzeNxpgUr05+dNeCN/bb6raslHvGdd6BFCkVhpPk/ZeA==
+
+"@typescript-eslint/typescript-estree@5.59.0":
+  version "5.59.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.0.tgz#8869156ee1dcfc5a95be3ed0e2809969ea28e965"
+  integrity sha512-sUNnktjmI8DyGzPdZ8dRwW741zopGxltGs/SAPgGL/AAgDpiLsCFLcMNSpbfXfmnNeHmK9h3wGmCkGRGAoUZAg==
+  dependencies:
+    "@typescript-eslint/types" "5.59.0"
+    "@typescript-eslint/visitor-keys" "5.59.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/utils@5.59.0":
+  version "5.59.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.59.0.tgz#063d066b3bc4850c18872649ed0da9ee72d833d5"
+  integrity sha512-GGLFd+86drlHSvPgN/el6dRQNYYGOvRSDVydsUaQluwIW3HvbXuxyuD5JETvBt/9qGYe+lOrDk6gRrWOHb/FvA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@types/json-schema" "^7.0.9"
+    "@types/semver" "^7.3.12"
+    "@typescript-eslint/scope-manager" "5.59.0"
+    "@typescript-eslint/types" "5.59.0"
+    "@typescript-eslint/typescript-estree" "5.59.0"
+    eslint-scope "^5.1.1"
+    semver "^7.3.7"
+
+"@typescript-eslint/visitor-keys@5.59.0":
+  version "5.59.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.0.tgz#a59913f2bf0baeb61b5cfcb6135d3926c3854365"
+  integrity sha512-qZ3iXxQhanchCeaExlKPV3gDQFxMUmU35xfd5eCXB6+kUw1TUAbIy2n7QIrwz9s98DQLzNWyHp61fY0da4ZcbA==
+  dependencies:
+    "@typescript-eslint/types" "5.59.0"
+    eslint-visitor-keys "^3.3.0"
+
+"@xobotyi/scrollbar-width@^1.9.5":
+  version "1.9.5"
+  resolved "https://registry.yarnpkg.com/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz#80224a6919272f405b87913ca13b92929bdf3c4d"
+  integrity sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==
+
+a11y-status@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/a11y-status/-/a11y-status-2.0.0.tgz#7a4ee09a499c378b2690ab47a1354b736ee20b81"
+  integrity sha512-Iy+OM+mJJHL0z3AT4O3EMlXqcT7FA96vSukndOM6SFKC4+q+KuO6juSN9Avwhn6s1P3oABZiljOdr5pF+0r9VA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@types/throttle-debounce" "^2.1.0"
+    throttle-debounce "^3.0.1"
+
+acorn-jsx@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn@^8.5.0, acorn@^8.8.0:
+  version "8.8.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
+  integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
+
+agent-base@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
+  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
+  dependencies:
+    debug "4"
+
+ajv-keywords@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ajv@^8.6.0:
+  version "8.12.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
+  integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
+ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+arg@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
+  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
+
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
+aria-hidden@^1.1.1:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954"
+  integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==
+  dependencies:
+    tslib "^2.0.0"
+
+aria-query@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
+  integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
+  dependencies:
+    deep-equal "^2.0.5"
+
+array-buffer-byte-length@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz#fabe8bc193fea865f317fe7807085ee0dee5aead"
+  integrity sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==
+  dependencies:
+    call-bind "^1.0.2"
+    is-array-buffer "^3.0.1"
+
+array-includes@^3.1.5, array-includes@^3.1.6:
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.6.tgz#9e9e720e194f198266ba9e18c29e6a9b0e4b225f"
+  integrity sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    get-intrinsic "^1.1.3"
+    is-string "^1.0.7"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  integrity sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-union@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
+  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+
+array-uniq@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+  integrity sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==
+
+array.prototype.flat@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz#ffc6576a7ca3efc2f46a143b9d1dda9b4b3cf5e2"
+  integrity sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.flatmap@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz#1aae7903c2100433cb8261cd4ed310aab5c4a183"
+  integrity sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.tosorted@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.1.tgz#ccf44738aa2b5ac56578ffda97c03fd3e23dd532"
+  integrity sha512-pZYPXPRl2PqWcsUs6LOMn+1f1532nEoPTYowBtqLwAW+W8vSVhkIGnmOX1t/UQjD6YGI0vcD2B1U7ZFGQH9jnQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    es-shim-unscopables "^1.0.0"
+    get-intrinsic "^1.1.3"
+
+ast-types-flow@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
+  integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==
+
+async@^3.2.3:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
+  integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+at-least-node@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
+
+attr-accept@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
+  integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
+
+autoprefixer@^10.4.7:
+  version "10.4.14"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.14.tgz#e28d49902f8e759dd25b153264e862df2705f79d"
+  integrity sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==
+  dependencies:
+    browserslist "^4.21.5"
+    caniuse-lite "^1.0.30001464"
+    fraction.js "^4.2.0"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
+available-typed-arrays@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
+  integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
+
+axe-core@^4.6.2:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.0.tgz#34ba5a48a8b564f67e103f0aa5768d76e15bbbbf"
+  integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
+
+axios@^1.1.3:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.3.6.tgz#1ace9a9fb994314b5f6327960918406fa92c6646"
+  integrity sha512-PEcdkk7JcdPiMDkvM4K6ZBRYq9keuVJsToxm2zQIM70Qqo2WHTdJZMXcG9X+RmRp2VPNUQC8W1RAGbgt6b1yMg==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
+axobject-query@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.1.1.tgz#3b6e5c6d4e43ca7ba51c5babf99d22a9c68485e1"
+  integrity sha512-goKlv8DZrK9hUh975fnHzhNIO4jUnFCfv/dszV5VwUGDFjI6vQ2VwoyjYjYNEbBE8AH87TduWP5uyDR1D+Iteg==
+  dependencies:
+    deep-equal "^2.0.5"
+
+babel-loader@^8.2.5:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.3.0.tgz#124936e841ba4fe8176786d6ff28add1f134d6a8"
+  integrity sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q==
+  dependencies:
+    find-cache-dir "^3.3.1"
+    loader-utils "^2.0.0"
+    make-dir "^3.1.0"
+    schema-utils "^2.6.5"
+
+babel-plugin-macros@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
+  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    cosmiconfig "^7.0.0"
+    resolve "^1.19.0"
+
+babel-plugin-polyfill-corejs2@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz#5d1bd3836d0a19e1b84bbf2d9640ccb6f951c122"
+  integrity sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==
+  dependencies:
+    "@babel/compat-data" "^7.17.7"
+    "@babel/helper-define-polyfill-provider" "^0.3.3"
+    semver "^6.1.1"
+
+babel-plugin-polyfill-corejs3@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz#56ad88237137eade485a71b52f72dbed57c6230a"
+  integrity sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.3.3"
+    core-js-compat "^3.25.1"
+
+babel-plugin-polyfill-regenerator@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz#390f91c38d90473592ed43351e801a9d3e0fd747"
+  integrity sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.3.3"
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
+braces@^3.0.2, braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+browserslist@^4.21.3, browserslist@^4.21.5:
+  version "4.21.5"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7"
+  integrity sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==
+  dependencies:
+    caniuse-lite "^1.0.30001449"
+    electron-to-chromium "^1.4.284"
+    node-releases "^2.0.8"
+    update-browserslist-db "^1.0.10"
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
+builtin-modules@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
+  integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==
+
+call-bind@^1.0.0, call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
+camel-case@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
+  integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==
+  dependencies:
+    pascal-case "^3.1.2"
+    tslib "^2.0.3"
+
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
+caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464:
+  version "1.0.30001481"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001481.tgz#f58a717afe92f9e69d0e35ff64df596bfad93912"
+  integrity sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ==
+
+capital-case@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669"
+  integrity sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+    upper-case-first "^2.0.2"
+
+case-anything@^2.1.10:
+  version "2.1.10"
+  resolved "https://registry.yarnpkg.com/case-anything/-/case-anything-2.1.10.tgz#d18a6ca968d54ec3421df71e3e190f3bced23410"
+  integrity sha512-JczJwVrCP0jPKh05McyVsuOg6AYosrB9XWZKbQzXeDAm2ClE/PJE/BcrrQrVyGYH7Jg8V/LDupmyL4kFlVsVFQ==
+
+chalk@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chalk@^2.0.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^4.0.0, chalk@^4.0.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+change-case@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/change-case/-/change-case-4.1.2.tgz#fedfc5f136045e2398c0410ee441f95704641e12"
+  integrity sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==
+  dependencies:
+    camel-case "^4.1.2"
+    capital-case "^1.0.4"
+    constant-case "^3.0.4"
+    dot-case "^3.0.4"
+    header-case "^2.0.4"
+    no-case "^3.0.4"
+    param-case "^3.0.4"
+    pascal-case "^3.1.2"
+    path-case "^3.0.4"
+    sentence-case "^3.0.4"
+    snake-case "^3.0.4"
+    tslib "^2.0.3"
+
+character-entities-legacy@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
+  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
+
+character-entities@^1.0.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
+  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
+
+character-reference-invalid@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
+  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
+
+chokidar@^3.5.3:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
+clean-webpack-plugin@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/clean-webpack-plugin/-/clean-webpack-plugin-4.0.0.tgz#72947d4403d452f38ed61a9ff0ada8122aacd729"
+  integrity sha512-WuWE1nyTNAyW5T7oNyys2EN0cfP2fdRxhxnIQWiAp0bMabPdHhoGxM8A6YL2GhqwgrPnnaemVE7nv5XJ2Fhh2w==
+  dependencies:
+    del "^4.1.1"
+
+client-only@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
+cmdk@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/cmdk/-/cmdk-0.2.0.tgz#53c52d56d8776c8bb8ced1055b5054100c388f7c"
+  integrity sha512-JQpKvEOb86SnvMZbYaFKYhvzFntWBeSZdyii0rZPhKJj9uwJBxu4DaVYDrRN7r3mPop56oPhRw+JYWTKs66TYw==
+  dependencies:
+    "@radix-ui/react-dialog" "1.0.0"
+    command-score "0.1.2"
+
+codemirror@^5.62.0:
+  version "5.65.12"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.12.tgz#294fdf097d10ac5b56a9e011a91eff252afc73ae"
+  integrity sha512-z2jlHBocElRnPYysN2HAuhXbO3DNB0bcSKmNz3hcWR2Js2Dkhc1bEOxG93Z3DeUrnm+qx56XOY5wQmbP5KY0sw==
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
+
+color-name@^1.1.4, color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+color2k@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/color2k/-/color2k-2.0.2.tgz#ac2b4aea11c822a6bcb70c768b5a289f4fffcebb"
+  integrity sha512-kJhwH5nAwb34tmyuqq/lgjEKzlFXn1U99NlnB6Ws4qVaERcRUYeYP1cBw6BJ4vxaWStAUEef4WMr7WjOCnBt8w==
+
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
+comma-separated-tokens@^1.0.0:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
+  integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
+
+command-score@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/command-score/-/command-score-0.1.2.tgz#b986ad7e8c0beba17552a56636c44ae38363d381"
+  integrity sha512-VtDvQpIJBvBatnONUsPzXYFVKQQAhuf3XTNOAsdBxCNO/QCtUUd8LSgjn0GVarBkCad6aJCZfXgrjYbl/KRr7w==
+
+commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
+common-tags@^1.8.0:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
+  integrity sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
+
+compute-scroll-into-view@^1.0.17:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz#1768b5522d1172754f5d0c9b02de3af6be506a43"
+  integrity sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
+constant-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-3.0.4.tgz#3b84a9aeaf4cf31ec45e6bf5de91bdfb0589faf1"
+  integrity sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+    upper-case "^2.0.2"
+
+convert-source-map@^1.5.0, convert-source-map@^1.7.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
+cookie@^0.4.1:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
+  integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
+
+cookie@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
+  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
+
+copy-to-clipboard@^3.3.1:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
+  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
+  dependencies:
+    toggle-selection "^1.0.6"
+
+core-js-compat@^3.25.1:
+  version "3.30.1"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.30.1.tgz#961541e22db9c27fc48bfc13a3cafa8734171dfe"
+  integrity sha512-d690npR7MC6P0gq4npTl5n2VQeNAmUrJ90n+MHiKS7W2+xno4o3F5GDEuylSdi6EJ3VssibSGXOa1r3YXD3Mhw==
+  dependencies:
+    browserslist "^4.21.5"
+
+cosmiconfig@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
+  integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
+create-context-state@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/create-context-state/-/create-context-state-2.0.0.tgz#b58d33c553ef6c66958899d06fad4edf1b99ca24"
+  integrity sha512-lJsJ9XTsFLQpeXQkowyT3v2vWdxsYWoUCntUjdUCBzLqhTeGSkuCP4SrBUmkKaDDCzxJEDlmqM4HH2KD+YXVHQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+cross-spawn@^7.0.2:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+crypto-random-string@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
+  integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
+
+css-box-model@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
+  integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
+  dependencies:
+    tiny-invariant "^1.0.6"
+
+css-in-js-utils@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz#640ae6a33646d401fc720c54fc61c42cd76ae2bb"
+  integrity sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==
+  dependencies:
+    hyphenate-style-name "^1.0.3"
+
+css-tree@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
+css-unit-converter@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
+  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+csstype@^3.0.2, csstype@^3.0.6, csstype@^3.0.7, csstype@^3.1.1, csstype@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
+"d3-array@2 - 3", "d3-array@2.10.0 - 3", d3-array@^3.1.6:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.3.tgz#39f1f4954e4a09ff69ac597c2d61906b04e84740"
+  integrity sha512-JRHwbQQ84XuAESWhvIPaUV4/1UYTBOLiOPGWqgFDHZS1D5QN9c57FbH3QpEnQMYiOXNzKUQyGTZf+EVO7RT5TQ==
+  dependencies:
+    internmap "1 - 2"
+
+"d3-color@1 - 3":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
+  integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
+
+d3-ease@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
+  integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
+
+"d3-format@1 - 3":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
+  integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
+
+"d3-interpolate@1.2.0 - 3", d3-interpolate@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
+  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
+  dependencies:
+    d3-color "1 - 3"
+
+d3-path@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
+  integrity sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==
+
+d3-scale@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
+  integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
+  dependencies:
+    d3-array "2.10.0 - 3"
+    d3-format "1 - 3"
+    d3-interpolate "1.2.0 - 3"
+    d3-time "2.1.1 - 3"
+    d3-time-format "2 - 4"
+
+d3-shape@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5"
+  integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==
+  dependencies:
+    d3-path "^3.1.0"
+
+"d3-time-format@2 - 4":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
+  integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
+  dependencies:
+    d3-time "1 - 3"
+
+"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
+  integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
+  dependencies:
+    d3-array "2 - 3"
+
+d3-timer@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
+  integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
+
+damerau-levenshtein@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
+  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
+
+dash-get@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/dash-get/-/dash-get-1.0.2.tgz#4c9e9ad5ef04c4bf9d3c9a451f6f7997298dcc7c"
+  integrity sha512-4FbVrHDwfOASx7uQVxeiCTo7ggSdYZbqs8lH+WU6ViypPlDbe9y6IP5VVUDQBv9DcnyaiPT5XT0UWHgJ64zLeQ==
+
+date-fns@^2.0.1, date-fns@^2.24.0:
+  version "2.29.3"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
+  integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
+
+debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+decimal.js-light@^2.4.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.1.tgz#134fd32508f19e208f4fb2f8dac0d2626a867934"
+  integrity sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==
+
+deep-equal@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
+  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
+  dependencies:
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.1"
+    is-regex "^1.0.4"
+    object-is "^1.0.1"
+    object-keys "^1.1.1"
+    regexp.prototype.flags "^1.2.0"
+
+deep-equal@^2.0.5:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.0.tgz#5caeace9c781028b9ff459f33b779346637c43e6"
+  integrity sha512-RdpzE0Hv4lhowpIUKKMJfeH6C1pXdtT1/it80ubgWqwI3qpuxUBpC1S4hnHg+zjnuOoDkzUtUCEEkG+XG5l3Mw==
+  dependencies:
+    call-bind "^1.0.2"
+    es-get-iterator "^1.1.2"
+    get-intrinsic "^1.1.3"
+    is-arguments "^1.1.1"
+    is-array-buffer "^3.0.1"
+    is-date-object "^1.0.5"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
+    isarray "^2.0.5"
+    object-is "^1.1.5"
+    object-keys "^1.1.1"
+    object.assign "^4.1.4"
+    regexp.prototype.flags "^1.4.3"
+    side-channel "^1.0.4"
+    which-boxed-primitive "^1.0.2"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.9"
+
+deep-is@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
+deepmerge@^4.2.2:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
+define-properties@^1.1.3, define-properties@^1.1.4, define-properties@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.0.tgz#52988570670c9eacedd8064f4a990f2405849bd5"
+  integrity sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==
+  dependencies:
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
+del@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/del/-/del-4.1.1.tgz#9e8f117222ea44a31ff3a156c049b99052a9f0b4"
+  integrity sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==
+  dependencies:
+    "@types/glob" "^7.1.1"
+    globby "^6.1.0"
+    is-path-cwd "^2.0.0"
+    is-path-in-cwd "^2.0.0"
+    p-map "^2.0.0"
+    pify "^4.0.1"
+    rimraf "^2.6.3"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
+direction@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/direction/-/direction-1.0.4.tgz#2b86fb686967e987088caf8b89059370d4837442"
+  integrity sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==
+
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
+doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
+  dependencies:
+    esutils "^2.0.2"
+
+doctrine@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
+  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
+  dependencies:
+    esutils "^2.0.2"
+
+dom-helpers@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
+dom-walk@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
+  integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
+
+dom4@^2.1.5:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/dom4/-/dom4-2.1.6.tgz#c90df07134aa0dbd81ed4d6ba1237b36fc164770"
+  integrity sha512-JkCVGnN4ofKGbjf5Uvc8mmxaATIErKQKSgACdBXpsQ3fY6DlIpAyWfiBSrGkttATssbDCp3psiAKWXk5gmjycA==
+
+domino@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/domino/-/domino-2.1.6.tgz#fe4ace4310526e5e7b9d12c7de01b7f485a57ffe"
+  integrity sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ==
+
+dot-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
+  integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
+ejs@^3.1.6:
+  version "3.1.9"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.9.tgz#03c9e8777fe12686a9effcef22303ca3d8eeb361"
+  integrity sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==
+  dependencies:
+    jake "^10.8.5"
+
+electron-to-chromium@^1.4.284:
+  version "1.4.369"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.369.tgz#a98d838cdd79be4471cd04e9b4dffe891d037874"
+  integrity sha512-LfxbHXdA/S+qyoTEA4EbhxGjrxx7WK2h6yb5K2v0UCOufUKX+VZaHbl3svlzZfv9sGseym/g3Ne4DpsgRULmqg==
+
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+emojibase-data@^6.1.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/emojibase-data/-/emojibase-data-6.2.0.tgz#db6c75c36905284fa623f4aa5f468d2be6ed364a"
+  integrity sha512-SWKaXD2QeQs06IE7qfJftsI5924Dqzp+V9xaa5RzZIEWhmlrG6Jt2iKwfgOPHu+5S8MEtOI7GdpKsXj46chXOw==
+
+emojibase-regex@^5.1.1:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/emojibase-regex/-/emojibase-regex-5.1.3.tgz#f0ef621ed6ec624becd2326f999fd4ea01b94554"
+  integrity sha512-gT8T9LxLA8VJdI+8KQtyykB9qKzd7WuUL3M2yw6y9tplFeufOUANg3UKVaKUvkMcRNvZsSElWhxcJrx8WPE12g==
+
+emojibase-regex@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/emojibase-regex/-/emojibase-regex-6.0.1.tgz#dc0b33d05c02f045ea44795d453698b205d41f0f"
+  integrity sha512-Mj1UT6IIk4j91yMFE0QetpUYcmsr5ZDkkOIMSGafhIgC086mBMaCh2Keaykx8YEllmV7hmx5zdANDzCYBYAVDw==
+
+emojibase@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/emojibase/-/emojibase-5.2.0.tgz#3b53899f9a9f8aae1280db446c83ce28f1d286d5"
+  integrity sha512-5T02oTJaWpScAtYbukKVc8vQ1367MyfVtFHUMoOVZ9/r1kFcbYqjSktD56TICBAeyW9uc1t+7qQuXEtntM6p5A==
+
+emojibase@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/emojibase/-/emojibase-6.1.0.tgz#c3bc281e998a0e06398416090c23bac8c5ed3ee8"
+  integrity sha512-1GkKJPXP6tVkYJHOBSJHoGOr/6uaDxZ9xJ6H7m6PfdGXTmQgbALHLWaVRY4Gi/qf5x/gT/NUXLPuSHYLqtLtrQ==
+
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
+error-stack-parser@^2.0.6:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.1.4.tgz#229cb01cdbfa84440bfa91876285b94680188286"
+  integrity sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==
+  dependencies:
+    stackframe "^1.3.4"
+
+es-abstract@^1.19.0, es-abstract@^1.20.4:
+  version "1.21.2"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.21.2.tgz#a56b9695322c8a185dc25975aa3b8ec31d0e7eff"
+  integrity sha512-y/B5POM2iBnIxCiernH1G7rC9qQoM77lLIMQLuob0zhp8C56Po81+2Nj0WFKnd0pNReDTnkYryc+zhOzpEIROg==
+  dependencies:
+    array-buffer-byte-length "^1.0.0"
+    available-typed-arrays "^1.0.5"
+    call-bind "^1.0.2"
+    es-set-tostringtag "^2.0.1"
+    es-to-primitive "^1.2.1"
+    function.prototype.name "^1.1.5"
+    get-intrinsic "^1.2.0"
+    get-symbol-description "^1.0.0"
+    globalthis "^1.0.3"
+    gopd "^1.0.1"
+    has "^1.0.3"
+    has-property-descriptors "^1.0.0"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.5"
+    is-array-buffer "^3.0.2"
+    is-callable "^1.2.7"
+    is-negative-zero "^2.0.2"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
+    is-string "^1.0.7"
+    is-typed-array "^1.1.10"
+    is-weakref "^1.0.2"
+    object-inspect "^1.12.3"
+    object-keys "^1.1.1"
+    object.assign "^4.1.4"
+    regexp.prototype.flags "^1.4.3"
+    safe-regex-test "^1.0.0"
+    string.prototype.trim "^1.2.7"
+    string.prototype.trimend "^1.0.6"
+    string.prototype.trimstart "^1.0.6"
+    typed-array-length "^1.0.4"
+    unbox-primitive "^1.0.2"
+    which-typed-array "^1.1.9"
+
+es-get-iterator@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.3.tgz#3ef87523c5d464d41084b2c3c9c214f1199763d6"
+  integrity sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.3"
+    has-symbols "^1.0.3"
+    is-arguments "^1.1.1"
+    is-map "^2.0.2"
+    is-set "^2.0.2"
+    is-string "^1.0.7"
+    isarray "^2.0.5"
+    stop-iteration-iterator "^1.0.0"
+
+es-set-tostringtag@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
+  integrity sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==
+  dependencies:
+    get-intrinsic "^1.1.3"
+    has "^1.0.3"
+    has-tostringtag "^1.0.0"
+
+es-shim-unscopables@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
+  integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
+  dependencies:
+    has "^1.0.3"
+
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
+escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+eslint-config-next@12.2.2:
+  version "12.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-12.2.2.tgz#4bb996026e118071849bc4011283a160ad5bde46"
+  integrity sha512-oJhWBLC4wDYYUFv/5APbjHUFd0QRFCojMdj/QnMoOEktmeTvwnnoA8F8uaXs0fQgsaTK0tbUxBRv9/Y4/rpxOA==
+  dependencies:
+    "@next/eslint-plugin-next" "12.2.2"
+    "@rushstack/eslint-patch" "^1.1.3"
+    "@typescript-eslint/parser" "^5.21.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-import-resolver-typescript "^2.7.1"
+    eslint-plugin-import "^2.26.0"
+    eslint-plugin-jsx-a11y "^6.5.1"
+    eslint-plugin-react "^7.29.4"
+    eslint-plugin-react-hooks "^4.5.0"
+
+eslint-config-prettier@^8.8.0:
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz#bfda738d412adc917fd7b038857110efe98c9348"
+  integrity sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==
+
+eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.7:
+  version "0.3.7"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz#83b375187d412324a1963d84fa664377a23eb4d7"
+  integrity sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==
+  dependencies:
+    debug "^3.2.7"
+    is-core-module "^2.11.0"
+    resolve "^1.22.1"
+
+eslint-import-resolver-typescript@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz#a90a4a1c80da8d632df25994c4c5fdcdd02b8751"
+  integrity sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==
+  dependencies:
+    debug "^4.3.4"
+    glob "^7.2.0"
+    is-glob "^4.0.3"
+    resolve "^1.22.0"
+    tsconfig-paths "^3.14.1"
+
+eslint-module-utils@^2.7.4:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz#e439fee65fc33f6bba630ff621efc38ec0375c49"
+  integrity sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==
+  dependencies:
+    debug "^3.2.7"
+
+eslint-plugin-import@^2.26.0:
+  version "2.27.5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz#876a6d03f52608a3e5bb439c2550588e51dd6c65"
+  integrity sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==
+  dependencies:
+    array-includes "^3.1.6"
+    array.prototype.flat "^1.3.1"
+    array.prototype.flatmap "^1.3.1"
+    debug "^3.2.7"
+    doctrine "^2.1.0"
+    eslint-import-resolver-node "^0.3.7"
+    eslint-module-utils "^2.7.4"
+    has "^1.0.3"
+    is-core-module "^2.11.0"
+    is-glob "^4.0.3"
+    minimatch "^3.1.2"
+    object.values "^1.1.6"
+    resolve "^1.22.1"
+    semver "^6.3.0"
+    tsconfig-paths "^3.14.1"
+
+eslint-plugin-jsx-a11y@^6.5.1:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz#fca5e02d115f48c9a597a6894d5bcec2f7a76976"
+  integrity sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==
+  dependencies:
+    "@babel/runtime" "^7.20.7"
+    aria-query "^5.1.3"
+    array-includes "^3.1.6"
+    array.prototype.flatmap "^1.3.1"
+    ast-types-flow "^0.0.7"
+    axe-core "^4.6.2"
+    axobject-query "^3.1.1"
+    damerau-levenshtein "^1.0.8"
+    emoji-regex "^9.2.2"
+    has "^1.0.3"
+    jsx-ast-utils "^3.3.3"
+    language-tags "=1.0.5"
+    minimatch "^3.1.2"
+    object.entries "^1.1.6"
+    object.fromentries "^2.0.6"
+    semver "^6.3.0"
+
+eslint-plugin-react-hooks@^4.5.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
+  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
+
+eslint-plugin-react@^7.29.4:
+  version "7.32.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz#e71f21c7c265ebce01bcbc9d0955170c55571f10"
+  integrity sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==
+  dependencies:
+    array-includes "^3.1.6"
+    array.prototype.flatmap "^1.3.1"
+    array.prototype.tosorted "^1.1.1"
+    doctrine "^2.1.0"
+    estraverse "^5.3.0"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    minimatch "^3.1.2"
+    object.entries "^1.1.6"
+    object.fromentries "^2.0.6"
+    object.hasown "^1.1.2"
+    object.values "^1.1.6"
+    prop-types "^15.8.1"
+    resolve "^2.0.0-next.4"
+    semver "^6.3.0"
+    string.prototype.matchall "^4.0.8"
+
+eslint-scope@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+eslint-scope@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.0.tgz#f21ebdafda02352f103634b96dd47d9f81ca117b"
+  integrity sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz#c7f0f956124ce677047ddbc192a68f999454dedc"
+  integrity sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==
+
+eslint@^8.31.0:
+  version "8.39.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.39.0.tgz#7fd20a295ef92d43809e914b70c39fd5a23cf3f1"
+  integrity sha512-mwiok6cy7KTW7rBpo05k6+p4YVZByLNjAZ/ACB9DRCu4YDRwjXI01tWHp6KAUWelsBetTxKK/2sHB0vdS8Z2Og==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.4.0"
+    "@eslint/eslintrc" "^2.0.2"
+    "@eslint/js" "8.39.0"
+    "@humanwhocodes/config-array" "^0.11.8"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.2.0"
+    eslint-visitor-keys "^3.4.0"
+    espree "^9.5.1"
+    esquery "^1.4.2"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    grapheme-splitter "^1.0.4"
+    ignore "^5.2.0"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    js-sdsl "^4.1.4"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    strip-ansi "^6.0.1"
+    strip-json-comments "^3.1.0"
+    text-table "^0.2.0"
+
+espree@^9.5.1:
+  version "9.5.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.5.1.tgz#4f26a4d5f18905bf4f2e0bd99002aab807e96dd4"
+  integrity sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg==
+  dependencies:
+    acorn "^8.8.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.4.0"
+
+esquery@^1.4.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
+  integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+estree-walker@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
+  integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
+
+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+eventemitter3@^4.0.1:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
+  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
+
+extract-domain@2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/extract-domain/-/extract-domain-2.2.1.tgz#1deeae633a5cbf05ae2fd7b3ff87cb98cbc4cb5b"
+  integrity sha512-lOq1adCJha0tFFBci4quxC4XLa6+Rs2WgAwTo9qbO9OsElvJmGgCvOzmHo/yg5CiqeP4+sHjkXYGkrCcIEprMg==
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-equals@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-4.0.3.tgz#72884cc805ec3c6679b99875f6b7654f39f0e8c7"
+  integrity sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==
+
+fast-glob@^3.2.12, fast-glob@^3.2.9:
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
+  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
+
+fast-loops@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.1.3.tgz#ce96adb86d07e7bf9b4822ab9c6fac9964981f75"
+  integrity sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==
+
+fast-shallow-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz#d4dcaf6472440dcefa6f88b98e3251e27f25628b"
+  integrity sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==
+
+fastest-stable-stringify@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz#3757a6774f6ec8de40c4e86ec28ea02417214c76"
+  integrity sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==
+
+fastq@^1.6.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.15.0.tgz#d04d07c6a2a68fe4599fea8d2e103a937fae6b3a"
+  integrity sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==
+  dependencies:
+    reusify "^1.0.4"
+
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
+file-selector@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.6.0.tgz#fa0a8d9007b829504db4d07dd4de0310b65287dc"
+  integrity sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==
+  dependencies:
+    tslib "^2.4.0"
+
+filelist@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.4.tgz#f78978a1e944775ff9e62e744424f215e58352b5"
+  integrity sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==
+  dependencies:
+    minimatch "^5.0.1"
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+find-cache-dir@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
+  integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^3.0.2"
+    pkg-dir "^4.1.0"
+
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
+find-up@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+flat-cache@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
+  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  dependencies:
+    flatted "^3.1.0"
+    rimraf "^3.0.2"
+
+flatted@^3.1.0:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
+  integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
+
+follow-redirects@^1.15.0:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
+for-each@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
+  integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
+  dependencies:
+    is-callable "^1.1.3"
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
+fraction.js@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
+  integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
+
+fs-extra@^9.0.1:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
+  integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+function.prototype.name@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
+  integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.0"
+    functions-have-names "^1.2.2"
+
+functions-have-names@^1.2.2, functions-have-names@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
+get-dom-document@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/get-dom-document/-/get-dom-document-0.1.3.tgz#d0188090e43d38dd146c467ac6e3e1f2ace7af52"
+  integrity sha512-bZ0O00gSQgMo+wz7gU6kbbWCPh4dfDsL9ZOmVhA8TOXszl5GV56TpTuW1/Qq/QctgpjK56yyvB1vBO+wzz8Szw==
+
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.0.tgz#7ad1dc0535f3a2904bba075772763e5051f6d05f"
+  integrity sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.3"
+
+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
+get-own-enumerable-property-symbols@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
+  integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
+
+get-symbol-description@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
+  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
+glob-parent@^5.1.2, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+glob@7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@7.1.7:
+  version "7.1.7"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.0.3, glob@^7.1.3, glob@^7.1.6, glob@^7.2.0:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^8.0.3:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e"
+  integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^5.0.1"
+    once "^1.3.0"
+
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
+globals@^13.19.0:
+  version "13.20.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.20.0.tgz#ea276a1e508ffd4f1612888f9d1bad1e2717bf82"
+  integrity sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==
+  dependencies:
+    type-fest "^0.20.2"
+
+globalthis@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.3.tgz#5852882a52b80dc301b0660273e1ed082f0b6ccf"
+  integrity sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==
+  dependencies:
+    define-properties "^1.1.3"
+
+globby@^11.0.4, globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
+globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  integrity sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==
+  dependencies:
+    array-union "^1.0.1"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+gopd@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
+  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+  dependencies:
+    get-intrinsic "^1.1.3"
+
+graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+grapheme-splitter@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
+  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
+
+gud@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+  integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
+
+has-bigints@^1.0.1, has-bigints@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
+  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-property-descriptors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
+  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  dependencies:
+    get-intrinsic "^1.1.1"
+
+has-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
+  integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
+
+has-symbols@^1.0.2, has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
+has-tostringtag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25"
+  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+  dependencies:
+    has-symbols "^1.0.2"
+
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+hast-util-parse-selector@^2.0.0:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz#d57c23f4da16ae3c63b3b6ca4616683313499c3a"
+  integrity sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==
+
+hastscript@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-6.0.0.tgz#e8768d7eac56c3fdeac8a92830d58e811e5bf640"
+  integrity sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    comma-separated-tokens "^1.0.0"
+    hast-util-parse-selector "^2.0.0"
+    property-information "^5.0.0"
+    space-separated-tokens "^1.0.0"
+
+header-case@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/header-case/-/header-case-2.0.4.tgz#5a42e63b55177349cf405beb8d775acabb92c063"
+  integrity sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==
+  dependencies:
+    capital-case "^1.0.4"
+    tslib "^2.0.3"
+
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
+https-proxy-agent@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
+  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
+  dependencies:
+    agent-base "6"
+    debug "4"
+
+hyphenate-style-name@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
+idb-keyval@^5.0.2:
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-5.1.5.tgz#be11174bac0cb756dba4cc86fb36b6cd63f5ce6d"
+  integrity sha512-J1utxYWQokYjy01LvDQ7WmiAtZCGUSkVi9EIBfUSyLOr/BesnMIxNGASTh9A1LzeISSjSqEPsfFdTss7EE7ofQ==
+  dependencies:
+    safari-14-idb-fix "^1.0.6"
+
+idb@^7.0.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/idb/-/idb-7.1.1.tgz#d910ded866d32c7ced9befc5bfdf36f572ced72b"
+  integrity sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==
+
+ignore@^5.2.0:
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
+  integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
+
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
+
+import-fresh@^3.0.0, import-fresh@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+inline-style-prefixer@^6.0.0:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz#4290ed453ab0e4441583284ad86e41ad88384f44"
+  integrity sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==
+  dependencies:
+    css-in-js-utils "^3.1.0"
+    fast-loops "^1.1.3"
+
+internal-slot@^1.0.3, internal-slot@^1.0.4, internal-slot@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.5.tgz#f2a2ee21f668f8627a4667f309dc0f4fb6674986"
+  integrity sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==
+  dependencies:
+    get-intrinsic "^1.2.0"
+    has "^1.0.3"
+    side-channel "^1.0.4"
+
+"internmap@1 - 2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
+  integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
+
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
+is-alphabetical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
+  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
+
+is-alphanumerical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
+  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
+is-arguments@^1.0.4, is-arguments@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
+  integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-array-buffer@^3.0.1, is-array-buffer@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.2.tgz#f2653ced8412081638ecb0ebbd0c41c6e0aecbbe"
+  integrity sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.2.0"
+    is-typed-array "^1.1.10"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
+is-bigint@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
+  integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==
+  dependencies:
+    has-bigints "^1.0.1"
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-boolean-object@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
+  integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
+  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
+
+is-core-module@^2.11.0, is-core-module@^2.9.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.12.0.tgz#36ad62f6f73c8253fd6472517a12483cf03e7ec4"
+  integrity sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==
+  dependencies:
+    has "^1.0.3"
+
+is-date-object@^1.0.1, is-date-object@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
+  integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-decimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
+  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
+
+is-extendable@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
+  dependencies:
+    is-plain-object "^2.0.4"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-finite@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.1.0.tgz#904135c77fb42c0641d6aa1bcdbc4daa8da082f3"
+  integrity sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==
+
+is-finite@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  integrity sha512-e+gU0KGrlbqjEcV80SAqg4g7PQYOm3/IrdwAJ+kPwHqGhLKhtuTJGGxGtrsc8RXlHt2A8Vlnv+79Vq2B1GQasg==
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-hexadecimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
+  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
+
+is-integer@~1.0.4:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-integer/-/is-integer-1.0.7.tgz#6bde81aacddf78b659b6629d629cadc51a886d5c"
+  integrity sha512-RPQc/s9yBHSvpi+hs9dYiJ2cuFeU6x3TyyIp8O2H6SKEltIvJOzRj9ToyvcStDvPR/pS4rxgr1oBFajQjZ2Szg==
+  dependencies:
+    is-finite "^1.0.0"
+
+is-map@^2.0.1, is-map@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
+  integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
+
+is-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
+  integrity sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==
+
+is-negative-zero@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
+  integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
+
+is-number-object@^1.0.4:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
+  integrity sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+  integrity sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==
+
+is-path-cwd@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
+  integrity sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==
+
+is-path-in-cwd@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz#bfe2dca26c69f397265a4009963602935a053acb"
+  integrity sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==
+  dependencies:
+    is-path-inside "^2.1.0"
+
+is-path-inside@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-2.1.0.tgz#7c9810587d659a40d27bcdb4d5616eab059494b2"
+  integrity sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==
+  dependencies:
+    path-is-inside "^1.0.2"
+
+is-path-inside@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
+is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
+  dependencies:
+    isobject "^3.0.1"
+
+is-reference@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7"
+  integrity sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==
+  dependencies:
+    "@types/estree" "*"
+
+is-regex@^1.0.4, is-regex@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
+  integrity sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==
+
+is-set@^2.0.1, is-set@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
+  integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
+
+is-shared-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
+  integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+
+is-string@^1.0.5, is-string@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
+  integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
+  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
+  dependencies:
+    has-symbols "^1.0.2"
+
+is-typed-array@^1.1.10, is-typed-array@^1.1.9:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.10.tgz#36a5b5cb4189b575d1a3e4b08536bfb485801e3f"
+  integrity sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==
+  dependencies:
+    available-typed-arrays "^1.0.5"
+    call-bind "^1.0.2"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-tostringtag "^1.0.0"
+
+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
+is-weakref@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
+  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-weakset@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.2.tgz#4569d67a747a1ce5a994dfd4ef6dcea76e7c0a1d"
+  integrity sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+  integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
+
+isomorphic.js@^0.2.4:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/isomorphic.js/-/isomorphic.js-0.2.5.tgz#13eecf36f2dba53e85d355e11bf9d4208c6f7f88"
+  integrity sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==
+
+jake@^10.8.5:
+  version "10.8.5"
+  resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.5.tgz#f2183d2c59382cb274226034543b9c03b8164c46"
+  integrity sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==
+  dependencies:
+    async "^3.2.3"
+    chalk "^4.0.2"
+    filelist "^1.0.1"
+    minimatch "^3.0.4"
+
+jest-worker@^26.2.1:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
+  integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
+
+jest-worker@^27.4.5:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
+  integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+jiti@^1.17.2:
+  version "1.18.2"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.18.2.tgz#80c3ef3d486ebf2450d9335122b32d121f2a83cd"
+  integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==
+
+js-cookie@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
+  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+
+js-cookie@^3.0.1:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.4.tgz#9ae3c5f6eb34d2292d76e0579fabfe7c872e1fae"
+  integrity sha512-tlu5VGqPFMP5eBefnmszCFZkPXG2n527NRN9XdNtN6FZ5n/0e98TdDm8BOz290OIIsxtXb9XTJjfqE6gVhOHQw==
+
+js-sdsl@^4.1.4:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.4.0.tgz#8b437dbe642daa95760400b602378ed8ffea8430"
+  integrity sha512-FfVSdx6pJ41Oa+CF7RDaFmTnCaFhua+SNYQX74riGOpl96x+2jQCqEfQ2bnXu/5DPCqlRuiqyvTJM0Qjz26IVg==
+
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+  integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
+
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json-schema-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
+json-schema@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.4.0.tgz#f7de4cf6efab838ebaeb3236474cbba5a1930ab5"
+  integrity sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==
+
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+
+json5@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
+  integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
+  dependencies:
+    minimist "^1.2.0"
+
+json5@^2.1.2, json5@^2.2.0, json5@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
+jsonfile@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
+  dependencies:
+    universalify "^2.0.0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonpointer@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
+  integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==
+
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz#76b3e6e6cece5c69d49a5792c3d01bd1a0cdc7ea"
+  integrity sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==
+  dependencies:
+    array-includes "^3.1.5"
+    object.assign "^4.1.3"
+
+jsx-dom-cjs@^8.0.0:
+  version "8.0.5"
+  resolved "https://registry.yarnpkg.com/jsx-dom-cjs/-/jsx-dom-cjs-8.0.5.tgz#353c2cabab7d2f90c0ed05520113006204b97d8f"
+  integrity sha512-VwoUYxTyZlP8SO5F0NPXbHZLFMkYE8bQgwArpq10vE8dYGga0OwVQqSUZgIUCxaZOScVJXTNn94rBy4+vqLyYA==
+  dependencies:
+    csstype "^3.1.1"
+
+language-subtag-registry@~0.3.2:
+  version "0.3.22"
+  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
+  integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
+
+language-tags@=1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
+  integrity sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==
+  dependencies:
+    language-subtag-registry "~0.3.2"
+
+leven@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
+  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
+
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+lib0@^0.2.42, lib0@^0.2.72:
+  version "0.2.73"
+  resolved "https://registry.yarnpkg.com/lib0/-/lib0-0.2.73.tgz#af7d7ce9ad523fa3e241d437cc3ab1862f9a1f29"
+  integrity sha512-aJJIElCLWnHMcYZPtsM07QoSfHwpxCy4VUzBYGXFYEmh/h2QS5uZNbCCfL0CqnkOE30b7Tp9DVfjXag+3qzZjQ==
+  dependencies:
+    isomorphic.js "^0.2.4"
+
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  integrity sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==
+  dependencies:
+    immediate "~3.0.5"
+
+lilconfig@^2.0.5, lilconfig@^2.0.6:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
+  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
+
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
+loader-utils@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
+  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
+localforage@^1.8.1:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
+  integrity sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==
+  dependencies:
+    lie "3.1.1"
+
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
+lodash-es@^4.17.15:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+  integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
+
+lodash@^4.0.1, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+lower-case@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
+  integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
+  dependencies:
+    tslib "^2.0.3"
+
+lru-cache@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
+  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
+  dependencies:
+    yallist "^3.0.2"
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
+lru_map@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/lru_map/-/lru_map-0.3.3.tgz#b5c8351b9464cbd750335a79650a0ec0e56118dd"
+  integrity sha512-Pn9cox5CsMYngeDbmChANltQl+5pi6XmTrraMSzhPmMBbmgcxmqWry0U3PGapCU1yB4/LqCcom7qhHZiF/jGfQ==
+
+magic-string@^0.25.0, magic-string@^0.25.7:
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
+  integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
+  dependencies:
+    sourcemap-codec "^1.4.8"
+
+magic-string@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.27.0.tgz#e4a3413b4bab6d98d2becffd48b4a257effdbbf3"
+  integrity sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.13"
+
+make-dir@^3.0.2, make-dir@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+  dependencies:
+    semver "^6.0.0"
+
+make-error@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
+  integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
+
+make-plural@^6.2.1, make-plural@^6.2.2:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/make-plural/-/make-plural-6.2.2.tgz#beb5fd751355e72660eeb2218bb98eec92853c6c"
+  integrity sha512-8iTuFioatnTTmb/YJjywkVIHLjcwkFD9Ms0JpxjEm9Mo8eQYkh1z+55dwv4yc1jQ8ftVBxWQbihvZL1DfzGGWA==
+
+marked@^4.0.12:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3"
+  integrity sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==
+
+match-sorter@^6.2.0, match-sorter@^6.3.0:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda"
+  integrity sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    remove-accents "0.4.2"
+
+material-colors@^1.2.1:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
+memoize-one@^5.1.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
+merge2@^1.3.0, merge2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+micromatch@^4.0.4, micromatch@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.1"
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==
+  dependencies:
+    dom-walk "^0.1.0"
+
+minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@^5.0.1:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimist@^1.2.0, minimist@^1.2.6:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
+mkdirp@^0.5.5:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
+  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
+  dependencies:
+    minimist "^1.2.6"
+
+moo@^0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.2.tgz#f9fe82473bc7c184b0d32e2215d3f6e67278733c"
+  integrity sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+multishift@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/multishift/-/multishift-2.0.7.tgz#525abc0491883dad1220881de2e9a193970267b5"
+  integrity sha512-8r3H8z2y34yPXcYaGDqHVKilIs7reENEp1WDjai71ghGXrNSG9XSoanCey0VhhHRdA9n/t+NVB4fiMAkoqu8oA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core-helpers" "^2.0.1"
+    "@remirror/core-types" "^2.0.4"
+    "@seznam/compose-react-refs" "^1.0.6"
+    a11y-status "^2.0.0"
+    compute-scroll-into-view "^1.0.17"
+    react-use "^17.3.2"
+    tiny-warning "^1.0.3"
+    w3c-keyname "^2.2.4"
+
+mz@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
+nano-css@^5.3.1:
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/nano-css/-/nano-css-5.3.5.tgz#3075ea29ffdeb0c7cb6d25edb21d8f7fa8e8fe8e"
+  integrity sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg==
+  dependencies:
+    css-tree "^1.1.2"
+    csstype "^3.0.6"
+    fastest-stable-stringify "^2.0.2"
+    inline-style-prefixer "^6.0.0"
+    rtl-css-js "^1.14.0"
+    sourcemap-codec "^1.4.8"
+    stacktrace-js "^2.0.2"
+    stylis "^4.0.6"
+
+nanoevents@^5.1.13:
+  version "5.1.13"
+  resolved "https://registry.yarnpkg.com/nanoevents/-/nanoevents-5.1.13.tgz#0e49c30acbcf847c10f29f1d1e7147c0f88fa3d1"
+  integrity sha512-JFAeG9fp0QZnRoESHjkbVFbZ9BkOXkkagUVwZVo/pkSX+Fq1VKlY+5og/8X9CYc6C7vje/CV+bwJ5M2X0+IY9Q==
+
+nanoid@^3.3.4, nanoid@^3.3.6:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
+  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+
+natural-compare-lite@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
+  integrity sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
+
+next-pwa@^5.6.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/next-pwa/-/next-pwa-5.6.0.tgz#f7b1960c4fdd7be4253eb9b41b612ac773392bf4"
+  integrity sha512-XV8g8C6B7UmViXU8askMEYhWwQ4qc/XqJGnexbLV68hzKaGHZDMtHsm2TNxFcbR7+ypVuth/wwpiIlMwpRJJ5A==
+  dependencies:
+    babel-loader "^8.2.5"
+    clean-webpack-plugin "^4.0.0"
+    globby "^11.0.4"
+    terser-webpack-plugin "^5.3.3"
+    workbox-webpack-plugin "^6.5.4"
+    workbox-window "^6.5.4"
+
+next-themes@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45"
+  integrity sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==
+
+next@12.3.2:
+  version "12.3.2"
+  resolved "https://registry.yarnpkg.com/next/-/next-12.3.2.tgz#3a3356a8d752726128825a8bdf17f2a3b3f861cf"
+  integrity sha512-orzvvebCwOqaz1eA5ZA0R5dbKxqtJyw7yeig7kDspu6p8OrplfyelzpvMHcDTKscv/l0nn/0l0v3mSsE8w4k7A==
+  dependencies:
+    "@next/env" "12.3.2"
+    "@swc/helpers" "0.4.11"
+    caniuse-lite "^1.0.30001406"
+    postcss "8.4.14"
+    styled-jsx "5.0.7"
+    use-sync-external-store "1.2.0"
+  optionalDependencies:
+    "@next/swc-android-arm-eabi" "12.3.2"
+    "@next/swc-android-arm64" "12.3.2"
+    "@next/swc-darwin-arm64" "12.3.2"
+    "@next/swc-darwin-x64" "12.3.2"
+    "@next/swc-freebsd-x64" "12.3.2"
+    "@next/swc-linux-arm-gnueabihf" "12.3.2"
+    "@next/swc-linux-arm64-gnu" "12.3.2"
+    "@next/swc-linux-arm64-musl" "12.3.2"
+    "@next/swc-linux-x64-gnu" "12.3.2"
+    "@next/swc-linux-x64-musl" "12.3.2"
+    "@next/swc-win32-arm64-msvc" "12.3.2"
+    "@next/swc-win32-ia32-msvc" "12.3.2"
+    "@next/swc-win32-x64-msvc" "12.3.2"
+
+no-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
+  integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==
+  dependencies:
+    lower-case "^2.0.2"
+    tslib "^2.0.3"
+
+node-fetch@^2.6.7:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.9.tgz#7c7f744b5cc6eb5fd404e0c7a9fec630a55657e6"
+  integrity sha512-DJm/CJkZkRjKKj4Zi4BsKVZh3ValV5IR5s7LVZnW+6YMh0W1BfNA8XSs6DLMGYlId5F3KnA70uu2qepcR08Qqg==
+  dependencies:
+    whatwg-url "^5.0.0"
+
+node-releases@^2.0.8:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f"
+  integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
+
+normalize.css@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
+
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
+
+number-is-nan@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+  integrity sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==
+
+object-assign@^4.0.1, object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
+object-hash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
+  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
+
+object-inspect@^1.12.3, object-inspect@^1.9.0:
+  version "1.12.3"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
+  integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
+
+object-is@^1.0.1, object-is@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
+  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object.assign@^4.1.3, object.assign@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
+  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
+
+object.entries@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.6.tgz#9737d0e5b8291edd340a3e3264bb8a3b00d5fa23"
+  integrity sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
+object.fromentries@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.6.tgz#cdb04da08c539cffa912dcd368b886e0904bfa73"
+  integrity sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
+object.hasown@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.2.tgz#f919e21fad4eb38a57bc6345b3afd496515c3f92"
+  integrity sha512-B5UIT3J1W+WuWIU55h0mjlwaqxiE5vYENJXIXZ4VFe05pNYrkKuK0U/6aFcb0pKywYJh7IhfoqUfKVmrJJHZHw==
+  dependencies:
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
+object.omit@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-3.0.0.tgz#0e3edc2fce2ba54df5577ff529f6d97bd8a522af"
+  integrity sha512-EO+BCv6LJfu+gBIF3ggLicFebFLN5zqzz/WWJlMFfkMyGth+oBkhxzDl0wx2W4GkLzuQs/FsSkXZb2IMWQqmBQ==
+  dependencies:
+    is-extendable "^1.0.0"
+
+object.pick@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  integrity sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==
+  dependencies:
+    isobject "^3.0.1"
+
+object.values@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.6.tgz#4abbaa71eba47d63589d402856f908243eea9b1d"
+  integrity sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+  dependencies:
+    wrappy "1"
+
+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
+
+orderedmap@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-2.1.0.tgz#819457082fa3a06abd316d83a281a1ca467437cd"
+  integrity sha512-/pIFexOm6S70EPdznemIz3BQZoJ4VTFrhqzu0ACBqBgeLsLxq8e6Jim63ImIfwW/zAD1AlXpRMlOv3aghmo4dA==
+
+p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
+p-map@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
+  integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
+
+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
+
+param-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
+  integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
+parenthesis@^3.1.8:
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/parenthesis/-/parenthesis-3.1.8.tgz#3457fccb8f05db27572b841dad9d2630b912f125"
+  integrity sha512-KF/U8tk54BgQewkJPvB4s/US3VQY68BRDpH638+7O/n58TpnwiwnOtGIOsT2/i+M78s61BBpeC83STB88d8sqw==
+
+parse-entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
+  integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
+parse-exponential@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parse-exponential/-/parse-exponential-1.0.1.tgz#ddf8181c454a9a4b131765381efa43f5c1c61019"
+  integrity sha512-QUa7PaOc7O6ei3hb0NmADJGrDYLbPBdcSKFUBGfwlMdHsrg8LOsliPEkpP0qHSKQOyzyyxCB00fxJKcP75Gl7w==
+
+parse-json@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+pascal-case@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
+  integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
+path-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/path-case/-/path-case-3.0.4.tgz#9168645334eb942658375c56f80b4c0cb5f82c6f"
+  integrity sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+
+path-is-inside@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
+  integrity sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==
+
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pify@^2.0.0, pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
+
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  integrity sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+  integrity sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==
+
+pirates@^4.0.1:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
+  integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
+
+pkg-dir@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
+popper.js@^1.14.4, popper.js@^1.16.1:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
+postcss-import@^14.1.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0"
+  integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+postcss-js@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
+  dependencies:
+    camelcase-css "^2.0.1"
+
+postcss-load-config@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
+  integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
+  dependencies:
+    lilconfig "^2.0.5"
+    yaml "^1.10.2"
+
+postcss-nested@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.0.tgz#1572f1984736578f360cffc7eb7dca69e30d1735"
+  integrity sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11:
+  version "6.0.11"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
+  integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-value-parser@^3.3.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
+  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
+
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+postcss@8.4.14:
+  version "8.4.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
+  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+postcss@^8.0.9, postcss@^8.4.14:
+  version "8.4.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.23.tgz#df0aee9ac7c5e53e1075c24a3613496f9e6552ab"
+  integrity sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+precision@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/precision/-/precision-1.0.1.tgz#5cf489b9d4a114700d300479cb8b9d85a502cfe8"
+  integrity sha512-cBMxnM2nzEF1xx75NhhOaKjsDNt92WUZv17t/p3wrvCfA+2RL0twbgfvXvgDbxxsfUUb5C5he5tla8Xa2ny1Ew==
+  dependencies:
+    is-finite "~1.0.1"
+    parse-exponential "~1.0.1"
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+prettier-plugin-tailwindcss@^0.2.7:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.7.tgz#2314d728cce9c9699ced41a01253eb48b4218da5"
+  integrity sha512-jQopIOgjLpX+y8HeD56XZw7onupRTC0cw7eKKUimI7vhjkPF5/1ltW5LyqaPtSyc8HvEpvNZsvvsGFa2qpa59w==
+
+prettier@^2.8.7:
+  version "2.8.7"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.7.tgz#bb79fc8729308549d28fe3a98fce73d2c0656450"
+  integrity sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==
+
+pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
+  integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
+
+prismjs@~1.27.0:
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
+  integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
+
+progress@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
+prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
+property-information@^5.0.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
+  integrity sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==
+  dependencies:
+    xtend "^4.0.0"
+
+prosemirror-collab@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-collab/-/prosemirror-collab-1.3.0.tgz#601d33473bf72e6c43041a54b860c84c60b37769"
+  integrity sha512-+S/IJ69G2cUu2IM5b3PBekuxs94HO1CxJIWOFrLQXUaUDKL/JfBx+QcH31ldBlBXyDEUl+k3Vltfi1E1MKp2mA==
+  dependencies:
+    prosemirror-state "^1.0.0"
+
+prosemirror-commands@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.5.1.tgz#89ddfa14e144dcc7fb0938aa0e2568c7fdde306f"
+  integrity sha512-ga1ga/RkbzxfAvb6iEXYmrEpekn5NCwTb8w1dr/gmhSoaGcQ0VPuCzOn5qDEpC45ql2oDkKoKQbRxLJwKLpMTQ==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-dropcursor@^1.7.1:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.0.tgz#7bfa11925e0da41d1db869954fe51e1aa55158e4"
+  integrity sha512-TZMitR8nlp9Xh42pDYGcWopCoFPmJduoyGJ7FjYM2/7gZKnfD41TIaZN5Q1cQjm6Fm/P5vk/DpVYFhS8kDdigw==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+    prosemirror-view "^1.1.0"
+
+prosemirror-gapcursor@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.1.tgz#8cfd874592e4504d63720e14ed680c7866e64554"
+  integrity sha512-GKTeE7ZoMsx5uVfc51/ouwMFPq0o8YrZ7Hx4jTF4EeGbXxBveUV8CGv46mSHuBBeXGmvu50guoV2kSnOeZZnUA==
+  dependencies:
+    prosemirror-keymap "^1.0.0"
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-view "^1.0.0"
+
+prosemirror-history@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-history/-/prosemirror-history-1.3.0.tgz#bf5a1ff7759aca759ddf0c722c2fa5b14fb0ddc1"
+  integrity sha512-qo/9Wn4B/Bq89/YD+eNWFbAytu6dmIM85EhID+fz9Jcl9+DfGEo8TTSrRhP15+fFEoaPqpHSxlvSzSEbmlxlUA==
+  dependencies:
+    prosemirror-state "^1.2.2"
+    prosemirror-transform "^1.0.0"
+    rope-sequence "^1.3.0"
+
+prosemirror-inputrules@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-inputrules/-/prosemirror-inputrules-1.2.0.tgz#476dde2dc244050b3aca00cf58a82adfad6749e7"
+  integrity sha512-eAW/M/NTSSzpCOxfR8Abw6OagdG0MiDAiWHQMQveIsZtoKVYzm0AflSPq/ymqJd56/Su1YPbwy9lM13wgHOFmQ==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.2, prosemirror-keymap@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-keymap/-/prosemirror-keymap-1.2.1.tgz#3839e7db66cecddae7451f4246e73bdd8489be1d"
+  integrity sha512-kVK6WGC+83LZwuSJnuCb9PsADQnFZllt94qPP3Rx/vLcOUV65+IbBeH2nS5cFggPyEVJhGkGrgYFRrG250WhHQ==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    w3c-keyname "^2.2.0"
+
+prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.19.0, prosemirror-model@^1.8.1:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.19.0.tgz#d7ad9a65ada0bb12196f64fe0dd4fc392c841c29"
+  integrity sha512-/CvFGJnwc41EJSfDkQLly1cAJJJmBpZwwUJtwZPTjY2RqZJfM8HVbCreOY/jti8wTRbVyjagcylyGoeJH/g/3w==
+  dependencies:
+    orderedmap "^2.0.0"
+
+prosemirror-paste-rules@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-paste-rules/-/prosemirror-paste-rules-2.0.4.tgz#9addf44a6174aa2053129909d0cec5d438a66c14"
+  integrity sha512-K4d+9WYtUxnF1NecR1fy6+XotUZUDc6M6kuM00he9ORMEz1Ce77SQ39UmWDNFKCY/Xm4l2/pea2nZWLbN4951w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core-constants" "^2.0.0"
+    "@remirror/core-helpers" "^2.0.1"
+    escape-string-regexp "^4.0.0"
+
+prosemirror-resizable-view@^2.0.11:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/prosemirror-resizable-view/-/prosemirror-resizable-view-2.0.11.tgz#79c78c8076a53d09b8606deb82259c4cb962ff41"
+  integrity sha512-wcowbkde+3iDe9gxb4+PZH8GB0d44DL2sHF5Gv/e/szmAMkRfk5ZaEva9Ex0b3j8zcf7tritxrWjEC+2tU1TVw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core-helpers" "^2.0.1"
+    "@remirror/core-utils" "^2.0.11"
+    prosemirror-model "^1.19.0"
+    prosemirror-view "^1.30.1"
+
+prosemirror-schema-list@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.2.2.tgz#bafda37b72367d39accdcaf6ddf8fb654a16e8e5"
+  integrity sha512-rd0pqSDp86p0MUMKG903g3I9VmElFkQpkZ2iOd3EOVg1vo5Cst51rAsoE+5IPy0LPXq64eGcCYlW1+JPNxOj2w==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.3.1, prosemirror-state@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.4.2.tgz#f93bd8a33a4454efab917ba9b738259d828db7e5"
+  integrity sha512-puuzLD2mz/oTdfgd8msFbe0A42j5eNudKAAPDB0+QJRw8cO1ygjLmhLrg9RvDpf87Dkd6D4t93qdef00KKNacQ==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-transform "^1.0.0"
+    prosemirror-view "^1.27.0"
+
+prosemirror-suggest@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-suggest/-/prosemirror-suggest-2.0.3.tgz#e9188f4d97b847e229a3c7de648e9b6179f06af2"
+  integrity sha512-GIglNie+M982LwoYKLiKCQfdBr3nk/A7WtM7EtETZReExudKRXvuAI9Xe6Q/ulbyQy+4qVT4mBw7Z1Ziye2SMQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core-constants" "^2.0.0"
+    "@remirror/core-helpers" "^2.0.1"
+    "@remirror/types" "^1.0.0"
+    escape-string-regexp "^4.0.0"
+
+prosemirror-tables@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-tables/-/prosemirror-tables-1.3.2.tgz#ca208c6a55d510af14b652d23e800e00ba6bebd4"
+  integrity sha512-/9JTeN6s58Zq66HXaxP6uf8PAmc7XXKZFPlOGVtLvxEd6xBP6WtzaJB9wBjiGUzwbdhdMEy7V62yuHqk/3VrnQ==
+  dependencies:
+    prosemirror-keymap "^1.1.2"
+    prosemirror-model "^1.8.1"
+    prosemirror-state "^1.3.1"
+    prosemirror-transform "^1.2.1"
+    prosemirror-view "^1.13.3"
+
+prosemirror-trailing-node@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-trailing-node/-/prosemirror-trailing-node-2.0.3.tgz#213fc0e545a434ff3c37b5218a0de69561bf3892"
+  integrity sha512-lGrjMrn97KWkjQSW/FjdvnhJmqFACmQIyr6lKYApvHitDnKsCoZz6XzrHB7RZYHni/0NxQmZ01p/2vyK2SkvaA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core-constants" "^2.0.0"
+    "@remirror/core-helpers" "^2.0.1"
+    escape-string-regexp "^4.0.0"
+
+prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.2.1, prosemirror-transform@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.7.1.tgz#b516e818c3add0bdf960f4ca8ccb9d057a3ba21b"
+  integrity sha512-VteoifAfpt46z0yEt6Fc73A5OID9t/y2QIeR5MgxEwTuitadEunD/V0c9jQW8ziT8pbFM54uTzRLJ/nLuQjMxg==
+  dependencies:
+    prosemirror-model "^1.0.0"
+
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3, prosemirror-view@^1.27.0, prosemirror-view@^1.30.1:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.30.2.tgz#57a9d15c5baa454f0d0f4a3028ddbd9be1e8ed9b"
+  integrity sha512-nTNzZvalQf9kHeEyO407LiV6DoOs/pXsid88UqW9Vvybo4ozJW2PJhkfZUxCUF1hR/9vJLdhxX84wuw9P9HsXA==
+  dependencies:
+    prosemirror-model "^1.16.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
+punycode@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
+  integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
+
+querystringify@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+quick-lru@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
+  integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
+
+raf-schd@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
+  integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
+
+randombytes@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
+  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
+  dependencies:
+    safe-buffer "^5.1.0"
+
+react-beautiful-dnd@^13.1.1:
+  version "13.1.1"
+  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz#b0f3087a5840920abf8bb2325f1ffa46d8c4d0a2"
+  integrity sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+    css-box-model "^1.2.0"
+    memoize-one "^5.1.1"
+    raf-schd "^4.0.2"
+    react-redux "^7.2.0"
+    redux "^4.0.4"
+    use-memo-one "^1.1.1"
+
+react-color@^2.19.3:
+  version "2.19.3"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
+  integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
+  dependencies:
+    "@icons/material" "^0.2.4"
+    lodash "^4.17.15"
+    lodash-es "^4.17.15"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
+
+react-datepicker@^4.8.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.11.0.tgz#40e73b4729a284ed206fdb322b8e84eb566e11a3"
+  integrity sha512-50n93o7mQwBEhg05tbopjFKgs8qgi8VBCAOMC4VqrKut72eAjESc/wXS/k5hRtnP0oe2FCGw7MJuIwh37wuXOw==
+  dependencies:
+    "@popperjs/core" "^2.9.2"
+    classnames "^2.2.6"
+    date-fns "^2.24.0"
+    prop-types "^15.7.2"
+    react-onclickoutside "^6.12.2"
+    react-popper "^2.3.0"
+
+react-dom@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
+react-dropzone@^14.2.3:
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.3.tgz#0acab68308fda2d54d1273a1e626264e13d4e84b"
+  integrity sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==
+  dependencies:
+    attr-accept "^2.2.2"
+    file-selector "^0.6.0"
+    prop-types "^15.8.1"
+
+react-fast-compare@^3.0.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.1.tgz#53933d9e14f364281d6cba24bfed7a4afb808b5f"
+  integrity sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg==
+
+react-hook-form@^7.38.0:
+  version "7.43.9"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.43.9.tgz#84b56ac2f38f8e946c6032ccb760e13a1037c66d"
+  integrity sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==
+
+react-is@^16.10.2, react-is@^16.13.1, react-is@^16.7.0:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-is@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
+react-is@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
+react-onclickoutside@^6.12.2:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz#e165ea4e5157f3da94f4376a3ab3e22a565f4ffc"
+  integrity sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==
+
+react-popper@^1.3.11:
+  version "1.3.11"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.11.tgz#a2cc3f0a67b75b66cfa62d2c409f9dd1fcc71ffd"
+  integrity sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    "@hypnosphi/create-react-context" "^0.3.1"
+    deep-equal "^1.1.1"
+    popper.js "^1.14.4"
+    prop-types "^15.6.1"
+    typed-styles "^0.0.7"
+    warning "^4.0.2"
+
+react-popper@^2.2.5, react-popper@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
+  integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
+  dependencies:
+    react-fast-compare "^3.0.1"
+    warning "^4.0.2"
+
+react-redux@^7.2.0:
+  version "7.2.9"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"
+  integrity sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/react-redux" "^7.1.20"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
+react-remove-scroll-bar@^2.3.3:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
+  integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
+react-remove-scroll@2.5.4:
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz#afe6491acabde26f628f844b67647645488d2ea0"
+  integrity sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==
+  dependencies:
+    react-remove-scroll-bar "^2.3.3"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
+react-resize-detector@^8.0.4:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-8.1.0.tgz#1c7817db8bc886e2dbd3fbe3b26ea8e56be0524a"
+  integrity sha512-S7szxlaIuiy5UqLhLL1KY3aoyGHbZzsTpYal9eYMwCyKqoqoVLCmIgAgNyIM1FhnP2KyBygASJxdhejrzjMb+w==
+  dependencies:
+    lodash "^4.17.21"
+
+react-smooth@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.2.tgz#0ef24213628cb13bf4305194a050e1db4302a3a1"
+  integrity sha512-pgqSp1q8rAGtF1bXQE0m3CHGLNfZZh5oA5o1tsPLXRHnKtkujMIJ8Ws5nO1mTySZf1c4vgwlEk+pHi3Ln6eYLw==
+  dependencies:
+    fast-equals "^4.0.3"
+    react-transition-group "2.9.0"
+
+react-style-singleton@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
+  integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
+  dependencies:
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^2.0.0"
+
+react-transition-group@2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
+  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
+  dependencies:
+    dom-helpers "^3.4.0"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+    react-lifecycles-compat "^3.0.4"
+
+react-transition-group@^4.4.5:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
+react-universal-interface@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b"
+  integrity sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==
+
+react-use@^17.3.2:
+  version "17.4.0"
+  resolved "https://registry.yarnpkg.com/react-use/-/react-use-17.4.0.tgz#cefef258b0a6c534a5c8021c2528ac6e1a4cdc6d"
+  integrity sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q==
+  dependencies:
+    "@types/js-cookie" "^2.2.6"
+    "@xobotyi/scrollbar-width" "^1.9.5"
+    copy-to-clipboard "^3.3.1"
+    fast-deep-equal "^3.1.3"
+    fast-shallow-equal "^1.0.0"
+    js-cookie "^2.2.1"
+    nano-css "^5.3.1"
+    react-universal-interface "^0.6.2"
+    resize-observer-polyfill "^1.5.1"
+    screenfull "^5.1.0"
+    set-harmonic-interval "^1.0.1"
+    throttle-debounce "^3.0.1"
+    ts-easing "^0.2.0"
+    tslib "^2.1.0"
+
+react@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
+  dependencies:
+    lodash "^4.0.1"
+
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
+  dependencies:
+    pify "^2.3.0"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+recharts-scale@^0.4.4:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/recharts-scale/-/recharts-scale-0.4.5.tgz#0969271f14e732e642fcc5bd4ab270d6e87dd1d9"
+  integrity sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==
+  dependencies:
+    decimal.js-light "^2.4.1"
+
+recharts@^2.3.2:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.5.0.tgz#34452852509099502690f9d2a72bde1d4cd65648"
+  integrity sha512-0EQYz3iA18r1Uq8VqGZ4dABW52AKBnio37kJgnztIqprELJXpOEsa0SzkqU1vjAhpCXCv52Dx1hiL9119xsqsQ==
+  dependencies:
+    classnames "^2.2.5"
+    eventemitter3 "^4.0.1"
+    lodash "^4.17.19"
+    react-is "^16.10.2"
+    react-resize-detector "^8.0.4"
+    react-smooth "^2.0.2"
+    recharts-scale "^0.4.4"
+    reduce-css-calc "^2.1.8"
+    victory-vendor "^36.6.8"
+
+reduce-css-calc@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
+  integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
+  dependencies:
+    css-unit-converter "^1.1.1"
+    postcss-value-parser "^3.3.0"
+
+redux@^4.0.0, redux@^4.0.4:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
+  integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
+refractor@^3.3.1:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a"
+  integrity sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==
+  dependencies:
+    hastscript "^6.0.0"
+    parse-entities "^2.0.0"
+    prismjs "~1.27.0"
+
+regenerate-unicode-properties@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
+  integrity sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==
+  dependencies:
+    regenerate "^1.4.2"
+
+regenerate@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
+  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
+
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
+regenerator-transform@^0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"
+  integrity sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+
+regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.4.3:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz#fe7ce25e7e4cca8db37b6634c8a2c7009199b9cb"
+  integrity sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    functions-have-names "^1.2.3"
+
+regexpu-core@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b"
+  integrity sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==
+  dependencies:
+    "@babel/regjsgen" "^0.8.0"
+    regenerate "^1.4.2"
+    regenerate-unicode-properties "^10.1.0"
+    regjsparser "^0.9.1"
+    unicode-match-property-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.1.0"
+
+regjsparser@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709"
+  integrity sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==
+  dependencies:
+    jsesc "~0.5.0"
+
+remirror@^2.0.23:
+  version "2.0.26"
+  resolved "https://registry.yarnpkg.com/remirror/-/remirror-2.0.26.tgz#07bfc0c4967638bc0c9b42907ea0970a1f6e0fa9"
+  integrity sha512-2Ft2cXqtnGxm/ibo8t8CeXOWvufPjZqsDveHN2ZOoWj3VPj24jcXqGy04dsWdnM0X8xBLH+5F4S0Z+OQ5AQ1sA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@remirror/core" "^2.0.12"
+    "@remirror/core-constants" "^2.0.0"
+    "@remirror/core-helpers" "^2.0.1"
+    "@remirror/core-types" "^2.0.4"
+    "@remirror/core-utils" "^2.0.11"
+    "@remirror/dom" "^2.0.15"
+    "@remirror/extension-annotation" "^2.0.15"
+    "@remirror/extension-bidi" "^2.0.12"
+    "@remirror/extension-blockquote" "^2.0.13"
+    "@remirror/extension-bold" "^2.0.12"
+    "@remirror/extension-callout" "^2.0.13"
+    "@remirror/extension-code" "^2.0.12"
+    "@remirror/extension-code-block" "^2.0.13"
+    "@remirror/extension-codemirror5" "^2.0.12"
+    "@remirror/extension-collaboration" "^2.0.12"
+    "@remirror/extension-columns" "^2.0.12"
+    "@remirror/extension-diff" "^2.0.12"
+    "@remirror/extension-doc" "^2.1.4"
+    "@remirror/extension-drop-cursor" "^2.0.12"
+    "@remirror/extension-embed" "^2.0.12"
+    "@remirror/extension-emoji" "^2.0.16"
+    "@remirror/extension-entity-reference" "^2.2.5"
+    "@remirror/extension-epic-mode" "^2.0.12"
+    "@remirror/extension-events" "^2.1.13"
+    "@remirror/extension-font-family" "^2.0.12"
+    "@remirror/extension-font-size" "^2.0.12"
+    "@remirror/extension-gap-cursor" "^2.0.12"
+    "@remirror/extension-hard-break" "^2.0.12"
+    "@remirror/extension-heading" "^2.0.12"
+    "@remirror/extension-history" "^2.0.12"
+    "@remirror/extension-horizontal-rule" "^2.0.12"
+    "@remirror/extension-image" "^2.1.8"
+    "@remirror/extension-italic" "^2.0.12"
+    "@remirror/extension-link" "^2.0.14"
+    "@remirror/extension-list" "^2.0.15"
+    "@remirror/extension-markdown" "^2.0.12"
+    "@remirror/extension-mention" "^2.0.14"
+    "@remirror/extension-mention-atom" "^2.0.15"
+    "@remirror/extension-node-formatting" "^2.0.12"
+    "@remirror/extension-paragraph" "^2.0.12"
+    "@remirror/extension-placeholder" "^2.0.13"
+    "@remirror/extension-positioner" "^2.1.7"
+    "@remirror/extension-search" "^2.0.13"
+    "@remirror/extension-shortcuts" "^2.0.12"
+    "@remirror/extension-strike" "^2.0.12"
+    "@remirror/extension-sub" "^2.0.12"
+    "@remirror/extension-sup" "^2.0.12"
+    "@remirror/extension-tables" "^2.2.9"
+    "@remirror/extension-text" "^2.0.12"
+    "@remirror/extension-text-case" "^2.0.12"
+    "@remirror/extension-text-color" "^2.0.13"
+    "@remirror/extension-text-highlight" "^2.0.13"
+    "@remirror/extension-trailing-node" "^2.0.12"
+    "@remirror/extension-underline" "^2.0.12"
+    "@remirror/extension-whitespace" "^2.0.12"
+    "@remirror/extension-yjs" "^3.0.13"
+    "@remirror/icons" "^2.0.1"
+    "@remirror/preset-core" "^2.0.15"
+    "@remirror/preset-formatting" "^2.0.13"
+    "@remirror/preset-wysiwyg" "^2.0.18"
+    "@remirror/theme" "^2.0.6"
+    "@types/codemirror" "^5.60.2"
+    "@types/refractor" "^3.0.2"
+    codemirror "^5.62.0"
+    refractor "^3.3.1"
+    yjs "^13.5.23"
+
+remove-accents@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
+  integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
+
+require-from-string@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.0, resolve@^1.22.1:
+  version "1.22.2"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f"
+  integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
+  dependencies:
+    is-core-module "^2.11.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+resolve@^2.0.0-next.4:
+  version "2.0.0-next.4"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
+  integrity sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+rimraf@^2.6.3:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.3"
+
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+rollup-plugin-terser@^7.0.0:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
+  integrity sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    jest-worker "^26.2.1"
+    serialize-javascript "^4.0.0"
+    terser "^5.0.0"
+
+rollup@2.78.0:
+  version "2.78.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.78.0.tgz#00995deae70c0f712ea79ad904d5f6b033209d9e"
+  integrity sha512-4+YfbQC9QEVvKTanHhIAFVUFSRsezvQF8vFOJwtGfb9Bb+r014S+qryr9PSmw8x6sMnPkmFBGAvIFVQxvJxjtg==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+rollup@^2.43.1:
+  version "2.79.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7"
+  integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+rope-sequence@^1.3.0:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/rope-sequence/-/rope-sequence-1.3.3.tgz#3f67fc106288b84b71532b4a5fd9d4881e4457f0"
+  integrity sha512-85aZYCxweiD5J8yTEbw+E6A27zSnLPNDL0WfPdw3YYodq7WjnTKo0q4dtyQ2gz23iPT8Q9CUyJtAaUNcTxRf5Q==
+
+round-precision@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/round-precision/-/round-precision-1.0.0.tgz#f5a2beb7ed59e6fe85312fbf553769102ea8f64f"
+  integrity sha512-L2a0XDSNeaaBTEGmzuENMK4T8c0HqKYeS3pCDurW4MRPo8O6LeCLqVPWUt5+xW9rrEcG9QaYrAFcApEFXKziyw==
+  dependencies:
+    is-finite "~1.0.1"
+    is-integer "~1.0.4"
+
+round@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/round/-/round-2.0.1.tgz#ec1bbb87cb1cab9ff2c81b7c43c84a5d1ed97e65"
+  integrity sha512-wzT6PF3wNEd2PCLTBQxteheeSwViBrD89E1XZjl4sj505C4LwTpqOQSNXLEROHDQw35NoylYbMxoUhgf2hb4qw==
+  dependencies:
+    precision "~1.0.0"
+    round-precision "~1.0.0"
+
+rtl-css-js@^1.14.0:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.16.1.tgz#4b48b4354b0ff917a30488d95100fbf7219a3e80"
+  integrity sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+safari-14-idb-fix@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/safari-14-idb-fix/-/safari-14-idb-fix-1.0.6.tgz#cbaabc33a4500c44b5c432d6c525b0ed9b68bb65"
+  integrity sha512-oTEQOdMwRX+uCtWCKT1nx2gAeSdpr8elg/2gcaKUH00SJU2xWESfkx11nmXwTRHy7xfQoj1o4TTQvdmuBosTnA==
+
+safe-buffer@^5.1.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+safe-regex-test@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz#793b874d524eb3640d1873aad03596db2d4f2295"
+  integrity sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.3"
+    is-regex "^1.1.4"
+
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.0"
+
+schema-utils@^2.6.5:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
+  integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
+  dependencies:
+    "@types/json-schema" "^7.0.5"
+    ajv "^6.12.4"
+    ajv-keywords "^3.5.2"
+
+schema-utils@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.2.tgz#36c10abca6f7577aeae136c804b0c741edeadc99"
+  integrity sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
+screenfull@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba"
+  integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==
+
+semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+semver@^7.3.7:
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.0.tgz#ed8c5dc8efb6c629c88b23d41dc9bf40c1d96cd0"
+  integrity sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==
+  dependencies:
+    lru-cache "^6.0.0"
+
+sentence-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-3.0.4.tgz#3645a7b8c117c787fde8702056225bb62a45131f"
+  integrity sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+    upper-case-first "^2.0.2"
+
+serialize-javascript@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
+  dependencies:
+    randombytes "^2.1.0"
+
+serialize-javascript@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz#b206efb27c3da0b0ab6b52f48d170b7996458e5c"
+  integrity sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==
+  dependencies:
+    randombytes "^2.1.0"
+
+set-harmonic-interval@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz#e1773705539cdfb80ce1c3d99e7f298bb3995249"
+  integrity sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
+snake-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
+  integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
+source-list-map@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
+  integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
+
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
+source-map-support@~0.5.20:
+  version "0.5.21"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map@0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+  integrity sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==
+
+source-map@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
+
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+source-map@^0.8.0-beta.0:
+  version "0.8.0-beta.0"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
+  integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
+  dependencies:
+    whatwg-url "^7.0.0"
+
+sourcemap-codec@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
+space-separated-tokens@^1.0.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
+  integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
+
+stack-generator@^2.0.5:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/stack-generator/-/stack-generator-2.0.10.tgz#8ae171e985ed62287d4f1ed55a1633b3fb53bb4d"
+  integrity sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==
+  dependencies:
+    stackframe "^1.3.4"
+
+stackframe@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310"
+  integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==
+
+stacktrace-gps@^3.0.4:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz#0c40b24a9b119b20da4525c398795338966a2fb0"
+  integrity sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==
+  dependencies:
+    source-map "0.5.6"
+    stackframe "^1.3.4"
+
+stacktrace-js@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/stacktrace-js/-/stacktrace-js-2.0.2.tgz#4ca93ea9f494752d55709a081d400fdaebee897b"
+  integrity sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==
+  dependencies:
+    error-stack-parser "^2.0.6"
+    stack-generator "^2.0.5"
+    stacktrace-gps "^3.0.4"
+
+stacktrace-parser@^0.1.10:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/stacktrace-parser/-/stacktrace-parser-0.1.10.tgz#29fb0cae4e0d0b85155879402857a1639eb6051a"
+  integrity sha512-KJP1OCML99+8fhOHxwwzyWrlUuVX5GQ0ZpJTd1DFXhdkrvg1szxfHhawXUZ3g9TkXORQd4/WG68jMlQZ2p8wlg==
+  dependencies:
+    type-fest "^0.7.1"
+
+stop-iteration-iterator@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
+  integrity sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==
+  dependencies:
+    internal-slot "^1.0.4"
+
+string.prototype.matchall@^4.0.6, string.prototype.matchall@^4.0.7, string.prototype.matchall@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz#3bf85722021816dcd1bf38bb714915887ca79fd3"
+  integrity sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    get-intrinsic "^1.1.3"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    regexp.prototype.flags "^1.4.3"
+    side-channel "^1.0.4"
+
+string.prototype.trim@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz#a68352740859f6893f14ce3ef1bb3037f7a90533"
+  integrity sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
+string.prototype.trimend@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz#c4a27fa026d979d79c04f17397f250a462944533"
+  integrity sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
+string.prototype.trimstart@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz#e90ab66aa8e4007d92ef591bbf3cd422c56bdcf4"
+  integrity sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
+stringify-object@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
+  integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
+  dependencies:
+    get-own-enumerable-property-symbols "^3.0.0"
+    is-obj "^1.0.1"
+    is-regexp "^1.0.0"
+
+strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
+
+strip-comments@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-2.0.1.tgz#4ad11c3fbcac177a67a40ac224ca339ca1c1ba9b"
+  integrity sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==
+
+strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+styled-jsx@5.0.7:
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.7.tgz#be44afc53771b983769ac654d355ca8d019dff48"
+  integrity sha512-b3sUzamS086YLRuvnaDigdAewz1/EFYlHpYBP5mZovKEdQQOIIYq8lApylub3HHZ6xFjV051kkGU7cudJmrXEA==
+
+stylis@4.1.3, stylis@^4.0.6:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
+  integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
+
+sucrase@^3.29.0:
+  version "3.32.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.32.0.tgz#c4a95e0f1e18b6847127258a75cf360bc568d4a7"
+  integrity sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "7.1.6"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
+supports-color@^5.3.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^7.0.0, supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^8.0.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+svgmoji@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/svgmoji/-/svgmoji-3.2.0.tgz#2214f4930e76e82c33bae23139c85b3973610b32"
+  integrity sha512-tjmdQhIju2ZQ81FLBlPngg1aWMOhQjP9ErXb2ROikM0aBGA/hqI0/DN/5J0sDsXzJPHmODpSFhWfiSsUieU3bA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@svgmoji/blob" "^3.2.0"
+    "@svgmoji/core" "^3.2.0"
+    "@svgmoji/noto" "^3.2.0"
+    "@svgmoji/openmoji" "^3.2.0"
+    "@svgmoji/twemoji" "^3.2.0"
+
+swr@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-1.3.0.tgz#c6531866a35b4db37b38b72c45a63171faf9f4e8"
+  integrity sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==
+
+tailwindcss@^3.1.6:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.1.tgz#b6662fab6a9b704779e48d083a9fef5a81d2b81e"
+  integrity sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==
+  dependencies:
+    arg "^5.0.2"
+    chokidar "^3.5.3"
+    color-name "^1.1.4"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.2.12"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.17.2"
+    lilconfig "^2.0.6"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.0.9"
+    postcss-import "^14.1.0"
+    postcss-js "^4.0.0"
+    postcss-load-config "^3.1.4"
+    postcss-nested "6.0.0"
+    postcss-selector-parser "^6.0.11"
+    postcss-value-parser "^4.2.0"
+    quick-lru "^5.1.1"
+    resolve "^1.22.1"
+    sucrase "^3.29.0"
+
+temp-dir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"
+  integrity sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==
+
+tempy@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tempy/-/tempy-0.6.0.tgz#65e2c35abc06f1124a97f387b08303442bde59f3"
+  integrity sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==
+  dependencies:
+    is-stream "^2.0.0"
+    temp-dir "^2.0.0"
+    type-fest "^0.16.0"
+    unique-string "^2.0.0"
+
+terser-webpack-plugin@^5.3.3:
+  version "5.3.7"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.7.tgz#ef760632d24991760f339fe9290deb936ad1ffc7"
+  integrity sha512-AfKwIktyP7Cu50xNjXF/6Qb5lBNzYaWpU6YfoX3uZicTx0zTy0stDDCsvjDapKsSDvOeWo5MEq4TmdBy2cNoHw==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jest-worker "^27.4.5"
+    schema-utils "^3.1.1"
+    serialize-javascript "^6.0.1"
+    terser "^5.16.5"
+
+terser@^5.0.0, terser@^5.16.5:
+  version "5.17.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.17.1.tgz#948f10830454761e2eeedc6debe45c532c83fd69"
+  integrity sha512-hVl35zClmpisy6oaoKALOpS0rDYLxRFLHhRuDlEGTKey9qHjS1w9GMORjuwIMt70Wan4lwsLYyWDVnWgF+KUEw==
+  dependencies:
+    "@jridgewell/source-map" "^0.3.2"
+    acorn "^8.5.0"
+    commander "^2.20.0"
+    source-map-support "~0.5.20"
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
+
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
+throttle-debounce@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"
+  integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==
+
+tiny-invariant@^1.0.6:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
+  integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
+
+tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
+tinycolor2@^1.4.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
+  integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
+
+tlds@^1.238.0:
+  version "1.238.0"
+  resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.238.0.tgz#ffe7c19c8940c35b497cda187a6927f9450325a4"
+  integrity sha512-lFPF9pZFhLrPodaJ0wt9QIN0l8jOxqmUezGZnm7BfkDSVd9q667oVIJukLVzhF+4oW7uDlrLlfJrL5yu9RWwew==
+
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
+
+tr46@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+  integrity sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==
+  dependencies:
+    punycode "^2.1.0"
+
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
+
+ts-easing@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ts-easing/-/ts-easing-0.2.0.tgz#c8a8a35025105566588d87dbda05dd7fbfa5a4ec"
+  integrity sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==
+
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
+tsconfig-paths@^3.14.1:
+  version "3.14.2"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088"
+  integrity sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.2"
+    minimist "^1.2.6"
+    strip-bom "^3.0.0"
+
+tslib@^1.8.1, tslib@^1.9.3:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, tslib@~2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
+  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
+
+tsutils@^3.21.0:
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
+  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
+  dependencies:
+    tslib "^1.8.1"
+
+turndown-plugin-gfm@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/turndown-plugin-gfm/-/turndown-plugin-gfm-1.0.2.tgz#6f8678a361f35220b2bdf5619e6049add75bf1c7"
+  integrity sha512-vwz9tfvF7XN/jE0dGoBei3FXWuvll78ohzCZQuOb+ZjWrs3a0XhQVomJEb2Qh4VHTPNRO4GPZh0V7VRbiWwkRg==
+
+turndown@^7.1.1:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/turndown/-/turndown-7.1.2.tgz#7feb838c78f14241e79ed92a416e0d213e044a29"
+  integrity sha512-ntI9R7fcUKjqBP6QU8rBK2Ehyt8LAzt3UBT9JR9tgo6GtuKvyUzpayWmeMKJw1DPdXzktvtIT8m2mVXz+bL/Qg==
+  dependencies:
+    domino "^2.1.6"
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-fest@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.16.0.tgz#3240b891a78b0deae910dbeb86553e552a148860"
+  integrity sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+type-fest@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.7.1.tgz#8dda65feaf03ed78f0a3f9678f1869147f7c5c48"
+  integrity sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==
+
+type-fest@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-1.4.0.tgz#e9fb813fe3bf1744ec359d55d1affefa76f14be1"
+  integrity sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==
+
+type-fest@^2.0.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
+  integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
+
+typed-array-length@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.4.tgz#89d83785e5c4098bec72e08b319651f0eac9c1bb"
+  integrity sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==
+  dependencies:
+    call-bind "^1.0.2"
+    for-each "^0.3.3"
+    is-typed-array "^1.1.9"
+
+typed-styles@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
+  integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
+
+typescript@4.7.4:
+  version "4.7.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
+  integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
+
+unbox-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
+  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
+  dependencies:
+    call-bind "^1.0.2"
+    has-bigints "^1.0.2"
+    has-symbols "^1.0.3"
+    which-boxed-primitive "^1.0.2"
+
+unicode-canonical-property-names-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
+  integrity sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==
+
+unicode-match-property-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"
+  integrity sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==
+  dependencies:
+    unicode-canonical-property-names-ecmascript "^2.0.0"
+    unicode-property-aliases-ecmascript "^2.0.0"
+
+unicode-match-property-value-ecmascript@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz#cb5fffdcd16a05124f5a4b0bf7c3770208acbbe0"
+  integrity sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==
+
+unicode-property-aliases-ecmascript@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz#43d41e3be698bd493ef911077c9b131f827e8ccd"
+  integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==
+
+unique-string@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"
+  integrity sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==
+  dependencies:
+    crypto-random-string "^2.0.0"
+
+universalify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
+  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
+
+upath@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
+  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
+
+update-browserslist-db@^1.0.10:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940"
+  integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
+upper-case-first@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-2.0.2.tgz#992c3273f882abd19d1e02894cc147117f844324"
+  integrity sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==
+  dependencies:
+    tslib "^2.0.3"
+
+upper-case@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-2.0.2.tgz#d89810823faab1df1549b7d97a76f8662bae6f7a"
+  integrity sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==
+  dependencies:
+    tslib "^2.0.3"
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+use-callback-ref@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"
+  integrity sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==
+  dependencies:
+    tslib "^2.0.0"
+
+use-isomorphic-layout-effect@^1.1.0, use-isomorphic-layout-effect@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
+use-memo-one@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
+  integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
+
+use-previous@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-previous/-/use-previous-1.2.0.tgz#df7f0c6d5dc7c9e81650eb29c36575306a6898c0"
+  integrity sha512-tK7Ne779nqTKGeh0rsFvxnQcEqePFRYlM0rfmNy9JH+h+2ndja7P0017nda0Q1gkqfcOD//pKZbDyyLIUH2s+Q==
+  dependencies:
+    use-isomorphic-layout-effect "^1.1.0"
+
+use-sidecar@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
+  integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^2.0.0"
+
+use-sync-external-store@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
+util-deprecate@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
+uuid@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
+  integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
+
+victory-vendor@^36.6.8:
+  version "36.6.8"
+  resolved "https://registry.yarnpkg.com/victory-vendor/-/victory-vendor-36.6.8.tgz#5a1c555ca99a39fdb66a6c959c8426eb834893a2"
+  integrity sha512-H3kyQ+2zgjMPvbPqAl7Vwm2FD5dU7/4bCTQakFQnpIsfDljeOMDojRsrmJfwh4oAlNnWhpAf+mbAoLh8u7dwyQ==
+  dependencies:
+    "@types/d3-array" "^3.0.3"
+    "@types/d3-ease" "^3.0.0"
+    "@types/d3-interpolate" "^3.0.1"
+    "@types/d3-scale" "^4.0.2"
+    "@types/d3-shape" "^3.1.0"
+    "@types/d3-time" "^3.0.0"
+    "@types/d3-timer" "^3.0.0"
+    d3-array "^3.1.6"
+    d3-ease "^3.0.1"
+    d3-interpolate "^3.0.1"
+    d3-scale "^4.0.2"
+    d3-shape "^3.1.0"
+    d3-time "^3.0.0"
+    d3-timer "^3.0.1"
+
+w3c-keyname@^2.2.0, w3c-keyname@^2.2.4:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.6.tgz#8412046116bc16c5d73d4e612053ea10a189c85f"
+  integrity sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==
+
+warning@^4.0.2, warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
+
+webidl-conversions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
+  integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
+
+webpack-sources@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
+  integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
+  dependencies:
+    source-list-map "^2.0.0"
+    source-map "~0.6.1"
+
+"webpack-sources@^2.0.0 || ^3.0.0":
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
+  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
+
+whatwg-url@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+  integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
+whatwg-url@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"
+  integrity sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
+which-boxed-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
+which-typed-array@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.9.tgz#307cf898025848cf995e795e8423c7f337efbde6"
+  integrity sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==
+  dependencies:
+    available-typed-arrays "^1.0.5"
+    call-bind "^1.0.2"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-tostringtag "^1.0.0"
+    is-typed-array "^1.1.10"
+
+which@^2.0.1, which@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+word-wrap@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+
+workbox-background-sync@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-6.5.4.tgz#3141afba3cc8aa2ae14c24d0f6811374ba8ff6a9"
+  integrity sha512-0r4INQZMyPky/lj4Ou98qxcThrETucOde+7mRGJl13MPJugQNKeZQOdIJe/1AchOP23cTqHcN/YVpD6r8E6I8g==
+  dependencies:
+    idb "^7.0.1"
+    workbox-core "6.5.4"
+
+workbox-broadcast-update@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-6.5.4.tgz#8441cff5417cd41f384ba7633ca960a7ffe40f66"
+  integrity sha512-I/lBERoH1u3zyBosnpPEtcAVe5lwykx9Yg1k6f8/BGEPGaMMgZrwVrqL1uA9QZ1NGGFoyE6t9i7lBjOlDhFEEw==
+  dependencies:
+    workbox-core "6.5.4"
+
+workbox-build@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-6.5.4.tgz#7d06d31eb28a878817e1c991c05c5b93409f0389"
+  integrity sha512-kgRevLXEYvUW9WS4XoziYqZ8Q9j/2ziJYEtTrjdz5/L/cTUa2XfyMP2i7c3p34lgqJ03+mTiz13SdFef2POwbA==
+  dependencies:
+    "@apideck/better-ajv-errors" "^0.3.1"
+    "@babel/core" "^7.11.1"
+    "@babel/preset-env" "^7.11.0"
+    "@babel/runtime" "^7.11.2"
+    "@rollup/plugin-babel" "^5.2.0"
+    "@rollup/plugin-node-resolve" "^11.2.1"
+    "@rollup/plugin-replace" "^2.4.1"
+    "@surma/rollup-plugin-off-main-thread" "^2.2.3"
+    ajv "^8.6.0"
+    common-tags "^1.8.0"
+    fast-json-stable-stringify "^2.1.0"
+    fs-extra "^9.0.1"
+    glob "^7.1.6"
+    lodash "^4.17.20"
+    pretty-bytes "^5.3.0"
+    rollup "^2.43.1"
+    rollup-plugin-terser "^7.0.0"
+    source-map "^0.8.0-beta.0"
+    stringify-object "^3.3.0"
+    strip-comments "^2.0.1"
+    tempy "^0.6.0"
+    upath "^1.2.0"
+    workbox-background-sync "6.5.4"
+    workbox-broadcast-update "6.5.4"
+    workbox-cacheable-response "6.5.4"
+    workbox-core "6.5.4"
+    workbox-expiration "6.5.4"
+    workbox-google-analytics "6.5.4"
+    workbox-navigation-preload "6.5.4"
+    workbox-precaching "6.5.4"
+    workbox-range-requests "6.5.4"
+    workbox-recipes "6.5.4"
+    workbox-routing "6.5.4"
+    workbox-strategies "6.5.4"
+    workbox-streams "6.5.4"
+    workbox-sw "6.5.4"
+    workbox-window "6.5.4"
+
+workbox-cacheable-response@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-6.5.4.tgz#a5c6ec0c6e2b6f037379198d4ef07d098f7cf137"
+  integrity sha512-DCR9uD0Fqj8oB2TSWQEm1hbFs/85hXXoayVwFKLVuIuxwJaihBsLsp4y7J9bvZbqtPJ1KlCkmYVGQKrBU4KAug==
+  dependencies:
+    workbox-core "6.5.4"
+
+workbox-core@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.5.4.tgz#df48bf44cd58bb1d1726c49b883fb1dffa24c9ba"
+  integrity sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q==
+
+workbox-expiration@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.5.4.tgz#501056f81e87e1d296c76570bb483ce5e29b4539"
+  integrity sha512-jUP5qPOpH1nXtjGGh1fRBa1wJL2QlIb5mGpct3NzepjGG2uFFBn4iiEBiI9GUmfAFR2ApuRhDydjcRmYXddiEQ==
+  dependencies:
+    idb "^7.0.1"
+    workbox-core "6.5.4"
+
+workbox-google-analytics@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-6.5.4.tgz#c74327f80dfa4c1954cbba93cd7ea640fe7ece7d"
+  integrity sha512-8AU1WuaXsD49249Wq0B2zn4a/vvFfHkpcFfqAFHNHwln3jK9QUYmzdkKXGIZl9wyKNP+RRX30vcgcyWMcZ9VAg==
+  dependencies:
+    workbox-background-sync "6.5.4"
+    workbox-core "6.5.4"
+    workbox-routing "6.5.4"
+    workbox-strategies "6.5.4"
+
+workbox-navigation-preload@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-6.5.4.tgz#ede56dd5f6fc9e860a7e45b2c1a8f87c1c793212"
+  integrity sha512-IIwf80eO3cr8h6XSQJF+Hxj26rg2RPFVUmJLUlM0+A2GzB4HFbQyKkrgD5y2d84g2IbJzP4B4j5dPBRzamHrng==
+  dependencies:
+    workbox-core "6.5.4"
+
+workbox-precaching@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-6.5.4.tgz#740e3561df92c6726ab5f7471e6aac89582cab72"
+  integrity sha512-hSMezMsW6btKnxHB4bFy2Qfwey/8SYdGWvVIKFaUm8vJ4E53JAY+U2JwLTRD8wbLWoP6OVUdFlXsTdKu9yoLTg==
+  dependencies:
+    workbox-core "6.5.4"
+    workbox-routing "6.5.4"
+    workbox-strategies "6.5.4"
+
+workbox-range-requests@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-6.5.4.tgz#86b3d482e090433dab38d36ae031b2bb0bd74399"
+  integrity sha512-Je2qR1NXCFC8xVJ/Lux6saH6IrQGhMpDrPXWZWWS8n/RD+WZfKa6dSZwU+/QksfEadJEr/NfY+aP/CXFFK5JFg==
+  dependencies:
+    workbox-core "6.5.4"
+
+workbox-recipes@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-recipes/-/workbox-recipes-6.5.4.tgz#cca809ee63b98b158b2702dcfb741b5cc3e24acb"
+  integrity sha512-QZNO8Ez708NNwzLNEXTG4QYSKQ1ochzEtRLGaq+mr2PyoEIC1xFW7MrWxrONUxBFOByksds9Z4//lKAX8tHyUA==
+  dependencies:
+    workbox-cacheable-response "6.5.4"
+    workbox-core "6.5.4"
+    workbox-expiration "6.5.4"
+    workbox-precaching "6.5.4"
+    workbox-routing "6.5.4"
+    workbox-strategies "6.5.4"
+
+workbox-routing@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.5.4.tgz#6a7fbbd23f4ac801038d9a0298bc907ee26fe3da"
+  integrity sha512-apQswLsbrrOsBUWtr9Lf80F+P1sHnQdYodRo32SjiByYi36IDyL2r7BH1lJtFX8fwNHDa1QOVY74WKLLS6o5Pg==
+  dependencies:
+    workbox-core "6.5.4"
+
+workbox-strategies@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.5.4.tgz#4edda035b3c010fc7f6152918370699334cd204d"
+  integrity sha512-DEtsxhx0LIYWkJBTQolRxG4EI0setTJkqR4m7r4YpBdxtWJH1Mbg01Cj8ZjNOO8etqfA3IZaOPHUxCs8cBsKLw==
+  dependencies:
+    workbox-core "6.5.4"
+
+workbox-streams@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-6.5.4.tgz#1cb3c168a6101df7b5269d0353c19e36668d7d69"
+  integrity sha512-FXKVh87d2RFXkliAIheBojBELIPnWbQdyDvsH3t74Cwhg0fDheL1T8BqSM86hZvC0ZESLsznSYWw+Va+KVbUzg==
+  dependencies:
+    workbox-core "6.5.4"
+    workbox-routing "6.5.4"
+
+workbox-sw@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-6.5.4.tgz#d93e9c67924dd153a61367a4656ff4d2ae2ed736"
+  integrity sha512-vo2RQo7DILVRoH5LjGqw3nphavEjK4Qk+FenXeUsknKn14eCNedHOXWbmnvP4ipKhlE35pvJ4yl4YYf6YsJArA==
+
+workbox-webpack-plugin@^6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-6.5.4.tgz#baf2d3f4b8f435f3469887cf4fba2b7fac3d0fd7"
+  integrity sha512-LmWm/zoaahe0EGmMTrSLUi+BjyR3cdGEfU3fS6PN1zKFYbqAKuQ+Oy/27e4VSXsyIwAw8+QDfk1XHNGtZu9nQg==
+  dependencies:
+    fast-json-stable-stringify "^2.1.0"
+    pretty-bytes "^5.4.1"
+    upath "^1.2.0"
+    webpack-sources "^1.4.3"
+    workbox-build "6.5.4"
+
+workbox-window@6.5.4, workbox-window@^6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.5.4.tgz#d991bc0a94dff3c2dbb6b84558cff155ca878e91"
+  integrity sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==
+  dependencies:
+    "@types/trusted-types" "^2.0.2"
+    workbox-core "6.5.4"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+xtend@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
+y-prosemirror@^1.0.19:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/y-prosemirror/-/y-prosemirror-1.2.1.tgz#a8b5c50b8fd445e556dfa831f295765f4ca022bd"
+  integrity sha512-czMBfB1eL2awqmOSxQM8cS/fsUOGE6fjvyPLInrh4crPxFiw67wDpwIW+EGBYKRa04sYbS0ScGj7ZgvWuDrmBQ==
+  dependencies:
+    lib0 "^0.2.42"
+
+y-protocols@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/y-protocols/-/y-protocols-1.0.5.tgz#91d574250060b29fcac8f8eb5e276fbad594245e"
+  integrity sha512-Wil92b7cGk712lRHDqS4T90IczF6RkcvCwAD0A2OPg+adKmOe+nOiT/N2hvpQIWS3zfjmtL4CPaH5sIW1Hkm/A==
+  dependencies:
+    lib0 "^0.2.42"
+
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
+yaml@^1.10.0, yaml@^1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
+yjs@^13.5.23:
+  version "13.5.53"
+  resolved "https://registry.yarnpkg.com/yjs/-/yjs-13.5.53.tgz#6531378981b89cfadd107145f7fb9f65f708a01f"
+  integrity sha512-B4UUycEK8BcYf195HL4LN4Az4Sg2+QzTHnabFHjQwLvGn96v/G+4CS52xNZk/0QWNXhLRCb+2GK3JmcX5fiCEQ==
+  dependencies:
+    lib0 "^0.2.72"
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==