From 0d821b1eb5ee86e2e5e4c0530514a88114af6826 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Fri, 6 Oct 2023 14:57:26 +0530
Subject: [PATCH 01/15] chore: swap input component with plane/ui package

---
 packages/ui/dist/index.d.ts                   |   4 +-
 packages/ui/dist/index.js                     |   4 +-
 packages/ui/dist/index.mjs                    |   4 +-
 packages/ui/src/form-fields/input.tsx         |   8 +-
 web/components/account/email-code-form.tsx    |  61 ++++---
 .../account/email-password-form.tsx           |  59 ++++---
 .../account/email-reset-password-form.tsx     |  40 +++--
 web/components/account/email-signup-form.tsx  |  87 ++++++----
 .../create-update-analytics-modal.tsx         |  36 ++--
 .../automation/select-month-modal.tsx         | 101 ++++++-----
 .../command-palette/shortcuts-modal.tsx       |  15 +-
 web/components/core/image-picker-popover.tsx  |  60 +++----
 .../core/modals/gpt-assistant-modal.tsx       |  29 +++-
 web/components/core/modals/link-modal.tsx     |  74 ++++----
 .../core/theme/color-picker-input.tsx         |  36 ++--
 .../core/theme/custom-theme-selector.tsx      |  22 ++-
 .../create-update-estimate-modal.tsx          | 162 ++++++++++++------
 .../integration/delete-import-modal.tsx       |   7 +-
 .../integration/github/single-user-select.tsx |  12 +-
 .../integration/jira/give-details.tsx         | 101 +++++++----
 .../integration/jira/import-users.tsx         |  42 ++---
 web/components/issues/draft-issue-form.tsx    |  27 ++-
 web/components/issues/form.tsx                |  27 ++-
 .../issues/sidebar-select/label.tsx           |  31 ++--
 web/components/labels/create-label-modal.tsx  |  28 +--
 .../labels/create-update-label-inline.tsx     |  26 ++-
 web/components/modules/form.tsx               |  40 +++--
 web/components/onboarding/invite-members.tsx  |  40 ++---
 web/components/onboarding/user-details.tsx    |  67 ++++----
 web/components/pages/page-form.tsx            |  35 ++--
 .../project/create-project-modal.tsx          |  54 +++---
 .../project/delete-project-modal.tsx          |  27 ++-
 web/components/project/form.tsx               |  39 +++--
 .../project/leave-project-modal.tsx           |  30 +++-
 .../project/settings/single-label.tsx         |  35 ++--
 web/components/states/create-state-modal.tsx  |  33 ++--
 .../states/create-update-state-inline.tsx     |  48 ++++--
 web/components/views/form.tsx                 |  31 ++--
 .../web-view/create-update-link-form.tsx      |  66 ++++---
 .../workspace/create-workspace-form.tsx       |  76 ++++----
 .../workspace/delete-workspace-modal.tsx      |  53 +++---
 .../send-workspace-invitation-modal.tsx       |  24 +--
 web/components/workspace/views/form.tsx       |  48 +++---
 .../[workspaceSlug]/me/profile/index.tsx      |  99 +++++++----
 web/pages/[workspaceSlug]/settings/index.tsx  |  57 +++---
 .../[workspaceSlug]/workspace-views/index.tsx |  29 ++--
 web/pages/reset-password.tsx                  |  77 +++++----
 47 files changed, 1266 insertions(+), 845 deletions(-)

diff --git a/packages/ui/dist/index.d.ts b/packages/ui/dist/index.d.ts
index d5161da6cc3..4f7437a1d38 100644
--- a/packages/ui/dist/index.d.ts
+++ b/packages/ui/dist/index.d.ts
@@ -8,10 +8,10 @@ interface InputProps {
     id: string;
     value: string;
     name: string;
-    onChange: () => void;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     className?: string;
     mode?: "primary" | "transparent" | "true-transparent";
-    size?: "sm" | "md" | "lg";
+    size?: "sm" | "md";
     hasError?: boolean;
     placeholder?: string;
     disabled?: boolean;
diff --git a/packages/ui/dist/index.js b/packages/ui/dist/index.js
index e9c8d0e60c2..57d360c3a03 100644
--- a/packages/ui/dist/index.js
+++ b/packages/ui/dist/index.js
@@ -50,7 +50,7 @@ var Input = React2.forwardRef((props, ref) => {
     onChange,
     className = "",
     mode = "primary",
-    size = "md",
+    size = "sm",
     hasError = false,
     placeholder = "",
     disabled = false
@@ -64,7 +64,7 @@ var Input = React2.forwardRef((props, ref) => {
     onChange,
     placeholder,
     disabled,
-    className: `block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary" : mode === "true-transparent" ? "rounded border-none bg-transparent ring-0" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-500/20" : ""} ${size === "sm" ? "px-3 py-2" : size === "lg" ? "p-3" : ""} ${className}`
+    className: `block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary" : mode === "true-transparent" ? "rounded border-none bg-transparent ring-0" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-500/20" : ""} ${size === "sm" ? "px-3 py-2" : size === "md" ? "p-3" : ""} ${className}`
   });
 });
 Input.displayName = "form-input-field";
diff --git a/packages/ui/dist/index.mjs b/packages/ui/dist/index.mjs
index ed0946a3342..42cab7cbd13 100644
--- a/packages/ui/dist/index.mjs
+++ b/packages/ui/dist/index.mjs
@@ -15,7 +15,7 @@ var Input = React2.forwardRef((props, ref) => {
     onChange,
     className = "",
     mode = "primary",
-    size = "md",
+    size = "sm",
     hasError = false,
     placeholder = "",
     disabled = false
@@ -29,7 +29,7 @@ var Input = React2.forwardRef((props, ref) => {
     onChange,
     placeholder,
     disabled,
-    className: `block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary" : mode === "true-transparent" ? "rounded border-none bg-transparent ring-0" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-500/20" : ""} ${size === "sm" ? "px-3 py-2" : size === "lg" ? "p-3" : ""} ${className}`
+    className: `block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary" : mode === "true-transparent" ? "rounded border-none bg-transparent ring-0" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-500/20" : ""} ${size === "sm" ? "px-3 py-2" : size === "md" ? "p-3" : ""} ${className}`
   });
 });
 Input.displayName = "form-input-field";
diff --git a/packages/ui/src/form-fields/input.tsx b/packages/ui/src/form-fields/input.tsx
index 7c93898482f..5a9f9843e91 100644
--- a/packages/ui/src/form-fields/input.tsx
+++ b/packages/ui/src/form-fields/input.tsx
@@ -5,10 +5,10 @@ export interface InputProps {
   id: string;
   value: string;
   name: string;
-  onChange: () => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   className?: string;
   mode?: "primary" | "transparent" | "true-transparent";
-  size?: "sm" | "md" | "lg";
+  size?: "sm" | "md";
   hasError?: boolean;
   placeholder?: string;
   disabled?: boolean;
@@ -23,7 +23,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     onChange,
     className = "",
     mode = "primary",
-    size = "md",
+    size = "sm",
     hasError = false,
     placeholder = "",
     disabled = false,
@@ -50,7 +50,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
       } ${hasError ? "border-red-500" : ""} ${
         hasError && mode === "primary" ? "bg-red-500/20" : ""
       } ${
-        size === "sm" ? "px-3 py-2" : size === "lg" ? "p-3" : ""
+        size === "sm" ? "px-3 py-2" : size === "md" ? "p-3" : ""
       } ${className}`}
     />
   );
diff --git a/web/components/account/email-code-form.tsx b/web/components/account/email-code-form.tsx
index 1e68cbb294a..9932b5f0544 100644
--- a/web/components/account/email-code-form.tsx
+++ b/web/components/account/email-code-form.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // ui
 import { CheckCircleIcon } from "@heroicons/react/20/solid";
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // services
 import authenticationService from "services/authentication.service";
 import useToast from "hooks/use-toast";
@@ -29,6 +30,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
   const {
     register,
     handleSubmit,
+    control,
     setError,
     setValue,
     getValues,
@@ -44,8 +46,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
     reValidateMode: "onChange",
   });
 
-  const isResendDisabled =
-    resendCodeTimer > 0 || isCodeResending || isSubmitting || errorResendingCode;
+  const isResendDisabled = resendCodeTimer > 0 || isCodeResending || isSubmitting || errorResendingCode;
 
   const onSubmit = async ({ email }: EmailCodeFormValues) => {
     setErrorResendingCode(false);
@@ -122,44 +123,58 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
       )}
       <form className="space-y-4 mt-10 sm:w-[360px] mx-auto">
         <div className="space-y-1">
-          <Input
-            id="email"
-            type="email"
+          <Controller
+            control={control}
             name="email"
-            register={register}
-            validations={{
+            rules={{
               required: "Email address 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 address is not valid",
             }}
-            error={errors.email}
-            placeholder="Enter your email address..."
-            className="border-custom-border-300 h-[46px]"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.email)}
+                placeholder="Enter your email address..."
+                className="border-custom-border-300 h-[46px] w-full"
+              />
+            )}
           />
         </div>
 
         {codeSent && (
           <>
-            <Input
-              id="token"
-              type="token"
+            <Controller
+              control={control}
               name="token"
-              register={register}
-              validations={{
+              rules={{
                 required: "Code is required",
               }}
-              error={errors.token}
-              placeholder="Enter code..."
-              className="border-custom-border-300 h-[46px]"
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="token"
+                  name="token"
+                  type="token"
+                  value={value ?? ""}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.token)}
+                  placeholder="Enter code..."
+                  className="border-custom-border-300 h-[46px] w-full"
+                />
+              )}
             />
             <button
               type="button"
               className={`flex w-full justify-end text-xs outline-none ${
-                isResendDisabled
-                  ? "cursor-default text-custom-text-200"
-                  : "cursor-pointer text-custom-primary-100"
+                isResendDisabled ? "cursor-default text-custom-text-200" : "cursor-pointer text-custom-primary-100"
               } `}
               onClick={() => {
                 setIsCodeResending(true);
diff --git a/web/components/account/email-password-form.tsx b/web/components/account/email-password-form.tsx
index 7a95095ee0b..b0b93c1c39a 100644
--- a/web/components/account/email-password-form.tsx
+++ b/web/components/account/email-password-form.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // ui
-import { Input, PrimaryButton } from "components/ui";
+import { PrimaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // types
 type EmailPasswordFormValues = {
   email: string;
@@ -20,6 +21,7 @@ export const EmailPasswordForm: React.FC<Props> = (props) => {
   const {
     register,
     handleSubmit,
+    control,
     formState: { errors, isSubmitting, isValid, isDirty },
   } = useForm<EmailPasswordFormValues>({
     defaultValues: {
@@ -33,40 +35,53 @@ export const EmailPasswordForm: React.FC<Props> = (props) => {
 
   return (
     <>
-      <form
-        className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
-        onSubmit={handleSubmit(onSubmit)}
-      >
+      <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}>
         <div className="space-y-1">
-          <Input
-            id="email"
-            type="email"
+          <Controller
+            control={control}
             name="email"
-            register={register}
-            validations={{
+            rules={{
               required: "Email address 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 address is not valid",
             }}
-            error={errors.email}
-            placeholder="Enter your email address..."
-            className="border-custom-border-300 h-[46px]"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.email)}
+                placeholder="Enter your email address..."
+                className="border-custom-border-300 h-[46px] w-full "
+              />
+            )}
           />
         </div>
         <div className="space-y-1">
-          <Input
-            id="password"
-            type="password"
+          <Controller
+            control={control}
             name="password"
-            register={register}
-            validations={{
+            rules={{
               required: "Password is required",
             }}
-            error={errors.password}
-            placeholder="Enter your password..."
-            className="border-custom-border-300 h-[46px]"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                value={value ?? ""}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.password)}
+                placeholder="Enter your password..."
+                className="border-custom-border-300 h-[46px] w-full"
+              />
+            )}
           />
         </div>
         <div className="text-right text-xs">
diff --git a/web/components/account/email-reset-password-form.tsx b/web/components/account/email-reset-password-form.tsx
index 3717e88012f..8b8d382a1fd 100644
--- a/web/components/account/email-reset-password-form.tsx
+++ b/web/components/account/email-reset-password-form.tsx
@@ -1,13 +1,14 @@
 import React from "react";
 
 // react hook form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // services
 import userService from "services/user.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // types
 type Props = {
   setIsResettingPassword: React.Dispatch<React.SetStateAction<boolean>>;
@@ -19,6 +20,7 @@ export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword
   const {
     register,
     handleSubmit,
+    control,
     formState: { errors, isSubmitting },
   } = useForm({
     defaultValues: {
@@ -59,33 +61,35 @@ export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword
   };
 
   return (
-    <form
-      className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
-      onSubmit={handleSubmit(forgotPassword)}
-    >
+    <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(forgotPassword)}>
       <div className="space-y-1">
-        <Input
-          id="email"
-          type="email"
+        <Controller
+          control={control}
           name="email"
-          register={register}
-          validations={{
+          rules={{
             required: "Email address 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 address is not valid",
           }}
-          error={errors.email}
-          placeholder="Enter registered email address.."
-          className="border-custom-border-300 h-[46px]"
+          render={({ field: { value, onChange, ref } }) => (
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              value={value}
+              onChange={onChange}
+              ref={ref}
+              hasError={Boolean(errors.email)}
+              placeholder="Enter registered email address.."
+              className="border-custom-border-300 h-[46px] w-full"
+            />
+          )}
         />
       </div>
       <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
-        <SecondaryButton
-          className="w-full text-center h-[46px]"
-          onClick={() => setIsResettingPassword(false)}
-        >
+        <SecondaryButton className="w-full text-center h-[46px]" onClick={() => setIsResettingPassword(false)}>
           Go Back
         </SecondaryButton>
         <PrimaryButton type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
diff --git a/web/components/account/email-signup-form.tsx b/web/components/account/email-signup-form.tsx
index 0a219741fb1..10e3cea6624 100644
--- a/web/components/account/email-signup-form.tsx
+++ b/web/components/account/email-signup-form.tsx
@@ -1,8 +1,9 @@
 import React from "react";
 import Link from "next/link";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // ui
-import { Input, PrimaryButton } from "components/ui";
+import { PrimaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // types
 type EmailPasswordFormValues = {
   email: string;
@@ -21,6 +22,7 @@ export const EmailSignUpForm: React.FC<Props> = (props) => {
   const {
     register,
     handleSubmit,
+    control,
     watch,
     formState: { errors, isSubmitting, isValid, isDirty },
   } = useForm<EmailPasswordFormValues>({
@@ -36,49 +38,60 @@ export const EmailSignUpForm: React.FC<Props> = (props) => {
 
   return (
     <>
-      <form
-        className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
-        onSubmit={handleSubmit(onSubmit)}
-      >
+      <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}>
         <div className="space-y-1">
-          <Input
-            id="email"
-            type="email"
+          <Controller
+            control={control}
             name="email"
-            register={register}
-            validations={{
+            rules={{
               required: "Email address 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 address is not valid",
             }}
-            error={errors.email}
-            placeholder="Enter your email address..."
-            className="border-custom-border-300 h-[46px]"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.email)}
+                placeholder="Enter your email address..."
+                className="border-custom-border-300 h-[46px] w-full"
+              />
+            )}
           />
         </div>
         <div className="space-y-1">
-          <Input
-            id="password"
-            type="password"
+          <Controller
+            control={control}
             name="password"
-            register={register}
-            validations={{
+            rules={{
               required: "Password is required",
             }}
-            error={errors.password}
-            placeholder="Enter your password..."
-            className="border-custom-border-300 h-[46px]"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                value={value ?? ""}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.password)}
+                placeholder="Enter your password..."
+                className="border-custom-border-300 h-[46px] w-full"
+              />
+            )}
           />
         </div>
         <div className="space-y-1">
-          <Input
-            id="confirm_password"
-            type="password"
+          <Controller
+            control={control}
             name="confirm_password"
-            register={register}
-            validations={{
+            rules={{
               required: "Password is required",
               validate: (val: string) => {
                 if (watch("password") != val) {
@@ -86,16 +99,24 @@ export const EmailSignUpForm: React.FC<Props> = (props) => {
                 }
               },
             }}
-            error={errors.confirm_password}
-            placeholder="Confirm your password..."
-            className="border-custom-border-300 h-[46px]"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="confirm_password"
+                name="confirm_password"
+                type="password"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.confirm_password)}
+                placeholder="Confirm your password..."
+                className="border-custom-border-300 h-[46px] w-full"
+              />
+            )}
           />
         </div>
         <div className="text-right text-xs">
           <Link href="/">
-            <a className="text-custom-text-200 hover:text-custom-primary-100">
-              Already have an account? Sign in.
-            </a>
+            <a className="text-custom-text-200 hover:text-custom-primary-100">Already have an account? Sign in.</a>
           </Link>
         </div>
         <div>
diff --git a/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx b/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx
index 66917ed7c80..3913e3cd882 100644
--- a/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx
+++ b/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { useRouter } from "next/router";
 
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
@@ -11,7 +11,8 @@ import analyticsService from "services/analytics.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { Input } from "@plane/ui";
 // types
 import { IAnalyticsParams, ISaveAnalyticsFormData } from "types";
 
@@ -42,6 +43,7 @@ export const CreateUpdateAnalyticsModal: React.FC<Props> = ({ isOpen, handleClos
     register,
     formState: { errors, isSubmitting },
     handleSubmit,
+    control,
     reset,
   } = useForm<FormValues>({
     defaultValues,
@@ -114,25 +116,29 @@ export const CreateUpdateAnalyticsModal: React.FC<Props> = ({ isOpen, handleClos
               <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 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-custom-text-100"
-                    >
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                       Save Analytics
                     </Dialog.Title>
                     <div className="mt-5">
-                      <Input
-                        type="text"
-                        id="name"
+                      <Controller
+                        control={control}
                         name="name"
-                        placeholder="Title"
-                        autoComplete="off"
-                        error={errors.name}
-                        register={register}
-                        width="full"
-                        validations={{
+                        rules={{
                           required: "Title is required",
                         }}
+                        render={({ field: { value, onChange, ref } }) => (
+                          <Input
+                            id="name"
+                            name="name"
+                            type="text"
+                            value={value}
+                            onChange={onChange}
+                            ref={ref}
+                            hasError={Boolean(errors.name)}
+                            placeholder="Title"
+                            className="w-full"
+                          />
+                        )}
                       />
                       <TextArea
                         id="description"
diff --git a/web/components/automation/select-month-modal.tsx b/web/components/automation/select-month-modal.tsx
index 18239d62b4f..030558165d3 100644
--- a/web/components/automation/select-month-modal.tsx
+++ b/web/components/automation/select-month-modal.tsx
@@ -3,11 +3,12 @@ import React from "react";
 import { useRouter } from "next/router";
 
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // types
 import type { IProject } from "types";
 
@@ -20,13 +21,7 @@ type Props = {
   handleChange: (formData: Partial<IProject>) => Promise<void>;
 };
 
-export const SelectMonthModal: React.FC<Props> = ({
-  type,
-  initialValues,
-  isOpen,
-  handleClose,
-  handleChange,
-}) => {
+export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen, handleClose, handleChange }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -34,6 +29,7 @@ export const SelectMonthModal: React.FC<Props> = ({
     register,
     formState: { errors, isSubmitting },
     handleSubmit,
+    control,
     reset,
   } = useForm<IProject>({
     defaultValues: initialValues,
@@ -50,27 +46,6 @@ export const SelectMonthModal: React.FC<Props> = ({
     onClose();
   };
 
-  const inputSection = (name: string) => (
-    <div className="relative flex flex-col gap-1 justify-center w-full">
-      <Input
-        type="number"
-        id={name}
-        name={name}
-        placeholder="Enter Months"
-        autoComplete="off"
-        register={register}
-        width="full"
-        validations={{
-          required: "Select a month between 1 and 12.",
-          min: 1,
-          max: 12,
-        }}
-        className="border-custom-border-200"
-      />
-      <span className="absolute text-sm text-custom-text-200 top-2.5 right-8">Months</span>
-    </div>
-  );
-
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-30" onClose={onClose}>
@@ -100,30 +75,72 @@ export const SelectMonthModal: React.FC<Props> = ({
               <Dialog.Panel className="relative transform rounded-lg bg-custom-background-90 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-custom-text-100"
-                    >
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                       Customise Time Range
                     </Dialog.Title>
                     <div className="mt-8 flex items-center gap-2">
                       <div className="flex w-full flex-col gap-1 justify-center">
                         {type === "auto-close" ? (
                           <>
-                            {inputSection("close_in")}
+                            <Controller
+                              control={control}
+                              name="close_in"
+                              rules={{
+                                required: "Select a month between 1 and 12.",
+                                min: 1,
+                                max: 12,
+                              }}
+                              render={({ field: { value, onChange, ref } }) => (
+                                <div className="relative flex flex-col gap-1 justify-center w-full">
+                                  <Input
+                                    id="close_in"
+                                    name="close_in"
+                                    type="number"
+                                    value={value.toString()}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.close_in)}
+                                    placeholder="Enter Months"
+                                    className="border-custom-border-200 w-full"
+                                  />
+                                  <span className="absolute text-sm text-custom-text-200 top-2.5 right-8">Months</span>
+                                </div>
+                              )}
+                            />
+
                             {errors.close_in && (
-                              <span className="text-sm px-1 text-red-500">
-                                Select a month between 1 and 12.
-                              </span>
+                              <span className="text-sm px-1 text-red-500">Select a month between 1 and 12.</span>
                             )}
                           </>
                         ) : (
                           <>
-                            {inputSection("archive_in")}
+                            <Controller
+                              control={control}
+                              name="archive_in"
+                              rules={{
+                                required: "Select a month between 1 and 12.",
+                                min: 1,
+                                max: 12,
+                              }}
+                              render={({ field: { value, onChange, ref } }) => (
+                                <div className="relative flex flex-col gap-1 justify-center w-full">
+                                  <Input
+                                    id="archive_in"
+                                    name="archive_in"
+                                    type="number"
+                                    value={value.toString()}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.archive_in)}
+                                    placeholder="Enter Months"
+                                    className="border-custom-border-200 w-full"
+                                  />
+                                  <span className="absolute text-sm text-custom-text-200 top-2.5 right-8">Months</span>
+                                </div>
+                              )}
+                            />
                             {errors.archive_in && (
-                              <span className="text-sm px-1 text-red-500">
-                                Select a month between 1 and 12.
-                              </span>
+                              <span className="text-sm px-1 text-red-500">Select a month between 1 and 12.</span>
                             )}
                           </>
                         )}
diff --git a/web/components/command-palette/shortcuts-modal.tsx b/web/components/command-palette/shortcuts-modal.tsx
index 82f9b398c2f..44f3d54429e 100644
--- a/web/components/command-palette/shortcuts-modal.tsx
+++ b/web/components/command-palette/shortcuts-modal.tsx
@@ -6,7 +6,7 @@ import { XMarkIcon } from "@heroicons/react/20/solid";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { CommandIcon } from "components/icons";
 // ui
-import { Input } from "components/ui";
+import { Input } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
@@ -48,9 +48,7 @@ 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
+    shortcut.description.toLowerCase().includes(query.trim().toLowerCase()) || query === "" ? true : false
   );
 
   useEffect(() => {
@@ -105,12 +103,13 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                         <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-custom-border-200 bg-custom-background-90 px-3 py-2">
                           <MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-200" />
                           <Input
-                            className="w-full  border-none bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
                             id="search"
                             name="search"
                             type="text"
-                            placeholder="Search for shortcuts"
+                            value={query}
                             onChange={(e) => setQuery(e.target.value)}
+                            placeholder="Search for shortcuts"
+                            className="w-full border-none bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
                           />
                         </div>
                       </div>
@@ -121,9 +120,7 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                               <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-custom-text-200">
-                                      {shortcut.description}
-                                    </p>
+                                    <p className="text-sm text-custom-text-200">{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">
diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx
index cfe18cd97d9..2162dc3203e 100644
--- a/web/components/core/image-picker-popover.tsx
+++ b/web/components/core/image-picker-popover.tsx
@@ -5,13 +5,16 @@ import useSWR from "swr";
 import { useDropzone } from "react-dropzone";
 import { Tab, Transition, Popover } from "@headlessui/react";
 
+import { Control, Controller } from "react-hook-form";
+
 // services
 import fileService from "services/file.service";
 // hooks
 import useWorkspaceDetails from "hooks/use-workspace-details";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
-import { Input, PrimaryButton, SecondaryButton, Loader } from "components/ui";
+import { PrimaryButton, SecondaryButton, Loader } from "components/ui";
+import { Input } from "@plane/ui";
 
 const tabOptions = [
   {
@@ -31,16 +34,12 @@ const tabOptions = [
 type Props = {
   label: string | React.ReactNode;
   value: string | null;
+  control: Control<any>;
   onChange: (data: string) => void;
   disabled?: boolean;
 };
 
-export const ImagePickerPopover: React.FC<Props> = ({
-  label,
-  value,
-  onChange,
-  disabled = false,
-}) => {
+export const ImagePickerPopover: React.FC<Props> = ({ label, value, control, onChange, disabled = false }) => {
   const ref = useRef<HTMLDivElement>(null);
 
   const router = useRouter();
@@ -64,14 +63,10 @@ export const ImagePickerPopover: React.FC<Props> = ({
     }
   );
 
-  const { data: projectCoverImages } = useSWR(
-    `PROJECT_COVER_IMAGES`,
-    () => fileService.getProjectCoverImages(),
-    {
-      revalidateOnFocus: false,
-      revalidateOnReconnect: false,
-    }
-  );
+  const { data: projectCoverImages } = useSWR(`PROJECT_COVER_IMAGES`, () => fileService.getProjectCoverImages(), {
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+  });
 
   const imagePickerRef = useRef<HTMLDivElement>(null);
 
@@ -154,8 +149,7 @@ export const ImagePickerPopover: React.FC<Props> = ({
               <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
                 {tabOptions.map((tab) => {
                   if (!unsplashImages && unsplashError && tab.key === "unsplash") return null;
-                  if (projectCoverImages && projectCoverImages.length === 0 && tab.key === "images")
-                    return null;
+                  if (projectCoverImages && projectCoverImages.length === 0 && tab.key === "images") return null;
 
                   return (
                     <Tab
@@ -175,13 +169,21 @@ export const ImagePickerPopover: React.FC<Props> = ({
                 {(unsplashImages || !unsplashError) && (
                   <Tab.Panel className="h-full w-full space-y-4 mt-4">
                     <div className="flex gap-x-2">
-                      <Input
+                      <Controller
+                        control={control}
                         name="search"
-                        className="text-sm"
-                        id="search"
-                        value={formData.search}
-                        onChange={(e) => setFormData({ ...formData, search: e.target.value })}
-                        placeholder="Search for images"
+                        render={({ field: { value, ref } }) => (
+                          <Input
+                            id="search"
+                            name="search"
+                            type="text"
+                            value={value}
+                            onChange={(e) => setFormData({ ...formData, search: e.target.value })}
+                            ref={ref}
+                            placeholder="Search for images"
+                            className="text-sm w-full"
+                          />
+                        )}
                       />
                       <PrimaryButton onClick={() => setSearchParams(formData.search)} size="sm">
                         Search
@@ -208,9 +210,7 @@ export const ImagePickerPopover: React.FC<Props> = ({
                           ))}
                         </div>
                       ) : (
-                        <p className="text-center text-custom-text-300 text-xs pt-7">
-                          No images found.
-                        </p>
+                        <p className="text-center text-custom-text-300 text-xs pt-7">No images found.</p>
                       )
                     ) : (
                       <Loader className="grid grid-cols-4 gap-4">
@@ -249,9 +249,7 @@ export const ImagePickerPopover: React.FC<Props> = ({
                           ))}
                         </div>
                       ) : (
-                        <p className="text-center text-custom-text-300 text-xs pt-7">
-                          No images found.
-                        </p>
+                        <p className="text-center text-custom-text-300 text-xs pt-7">No images found.</p>
                       )
                     ) : (
                       <Loader className="grid grid-cols-4 gap-4 pt-4">
@@ -297,9 +295,7 @@ export const ImagePickerPopover: React.FC<Props> = ({
                         ) : (
                           <div>
                             <span className="mt-2 block text-sm font-medium text-custom-text-200">
-                              {isDragActive
-                                ? "Drop image here to upload"
-                                : "Drag & drop image here"}
+                              {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
                             </span>
                           </div>
                         )}
diff --git a/web/components/core/modals/gpt-assistant-modal.tsx b/web/components/core/modals/gpt-assistant-modal.tsx
index fd2de641ff6..ad183261b95 100644
--- a/web/components/core/modals/gpt-assistant-modal.tsx
+++ b/web/components/core/modals/gpt-assistant-modal.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, forwardRef, useRef } from "react";
 import { useRouter } from "next/router";
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // services
 import aiService from "services/ai.service";
 import trackEventServices from "services/track_event.service";
@@ -9,8 +9,9 @@ import trackEventServices from "services/track_event.service";
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { PrimaryButton, SecondaryButton } from "components/ui";
 import { TipTapEditor } from "components/tiptap";
+import { Input } from "@plane/ui";
 // types
 import { IIssue, IPageBlock } from "types";
 
@@ -56,6 +57,7 @@ export const GptAssistantModal: React.FC<Props> = ({
 
   const {
     handleSubmit,
+    control,
     register,
     reset,
     setFocus,
@@ -167,14 +169,23 @@ export const GptAssistantModal: React.FC<Props> = ({
           No response could be generated. This may be due to insufficient content or task information. Please try again.
         </div>
       )}
-      <Input
-        type="text"
+      <Controller
+        control={control}
         name="task"
-        register={register}
-        placeholder={`${
-          content && content !== "" ? "Tell AI what action to perform on this content..." : "Ask AI anything..."
-        }`}
-        autoComplete="off"
+        render={({ field: { value, onChange, ref } }) => (
+          <Input
+            id="task"
+            name="task"
+            type="text"
+            value={value}
+            onChange={onChange}
+            ref={ref}
+            placeholder={`${
+              content && content !== "" ? "Tell AI what action to perform on this content..." : "Ask AI anything..."
+            }`}
+            className="w-full"
+          />
+        )}
       />
       <div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}>
         {response !== "" && (
diff --git a/web/components/core/modals/link-modal.tsx b/web/components/core/modals/link-modal.tsx
index bed74fca0d7..369ca76c1af 100644
--- a/web/components/core/modals/link-modal.tsx
+++ b/web/components/core/modals/link-modal.tsx
@@ -1,11 +1,12 @@
 import React, { useEffect } from "react";
 
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // types
 import type { IIssueLink, linkDetails, ModuleLink } from "types";
 
@@ -23,18 +24,12 @@ const defaultValues: IIssueLink | ModuleLink = {
   url: "",
 };
 
-export const LinkModal: React.FC<Props> = ({
-  isOpen,
-  handleClose,
-  createIssueLink,
-  updateIssueLink,
-  status,
-  data,
-}) => {
+export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, createIssueLink, updateIssueLink, status, data }) => {
   const {
     register,
     formState: { errors, isSubmitting },
     handleSubmit,
+    control,
     reset,
   } = useForm<ModuleLink>({
     defaultValues,
@@ -99,38 +94,55 @@ export const LinkModal: React.FC<Props> = ({
                 <form onSubmit={handleSubmit(handleCreateUpdatePage)}>
                   <div>
                     <div className="space-y-5">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-custom-text-100"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         {status ? "Update Link" : "Add Link"}
                       </Dialog.Title>
                       <div className="mt-2 space-y-3">
                         <div>
-                          <Input
-                            id="url"
-                            label="URL"
+                          <label htmlFor="url" className="text-custom-text-200 mb-2">
+                            URL
+                          </label>
+                          <Controller
+                            control={control}
                             name="url"
-                            type="url"
-                            placeholder="https://..."
-                            autoComplete="off"
-                            error={errors.url}
-                            register={register}
-                            validations={{
+                            rules={{
                               required: "URL is required",
                             }}
+                            render={({ field: { value, onChange, ref } }) => (
+                              <Input
+                                id="url"
+                                name="url"
+                                type="url"
+                                value={value}
+                                onChange={onChange}
+                                ref={ref}
+                                hasError={Boolean(errors.url)}
+                                placeholder="https://..."
+                                className="w-full"
+                              />
+                            )}
                           />
                         </div>
                         <div>
-                          <Input
-                            id="title"
-                            label="Title (optional)"
+                          <label htmlFor="title" className="text-custom-text-200 mb-2">
+                            {`Title (optional)`}
+                          </label>
+                          <Controller
+                            control={control}
                             name="title"
-                            type="text"
-                            placeholder="Enter title"
-                            autoComplete="off"
-                            error={errors.title}
-                            register={register}
+                            render={({ field: { value, onChange, ref } }) => (
+                              <Input
+                                id="title"
+                                name="title"
+                                type="text"
+                                value={value}
+                                onChange={onChange}
+                                ref={ref}
+                                hasError={Boolean(errors.title)}
+                                placeholder="Enter title"
+                                className="w-full"
+                              />
+                            )}
                           />
                         </div>
                       </div>
diff --git a/web/components/core/theme/color-picker-input.tsx b/web/components/core/theme/color-picker-input.tsx
index 73d71e46bd2..a34aa05cbdf 100644
--- a/web/components/core/theme/color-picker-input.tsx
+++ b/web/components/core/theme/color-picker-input.tsx
@@ -2,6 +2,8 @@ import React from "react";
 
 // react-form
 import {
+  Control,
+  Controller,
   FieldError,
   FieldErrorsImpl,
   Merge,
@@ -13,7 +15,7 @@ import {
 import { ColorResult, SketchPicker } from "react-color";
 // component
 import { Popover, Transition } from "@headlessui/react";
-import { Input } from "components/ui";
+import { Input } from "@plane/ui";
 // icons
 import { ColorPickerIcon } from "components/icons";
 // types
@@ -24,6 +26,7 @@ type Props = {
   position?: "left" | "right";
   watch: UseFormWatch<any>;
   setValue: UseFormSetValue<any>;
+  control: Control<ICustomTheme, any>;
   error: FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
   register: UseFormRegister<any>;
 };
@@ -34,6 +37,7 @@ export const ColorPickerInput: React.FC<Props> = ({
   watch,
   setValue,
   error,
+  control,
   register,
 }) => {
   const handleColorChange = (newColor: ColorResult) => {
@@ -60,22 +64,28 @@ export const ColorPickerInput: React.FC<Props> = ({
 
   return (
     <div className="relative">
-      <Input
-        id={name}
+      <Controller
+        control={control}
         name={name}
-        type="name"
-        placeholder="#FFFFFF"
-        autoComplete="off"
-        error={error}
-        value={watch(name)}
-        register={register}
-        validations={{
+        rules={{
           required: `${getColorText(name)} color is required`,
           pattern: {
             value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
             message: `${getColorText(name)} color should be hex format`,
           },
         }}
+        render={({ field: { onChange, ref } }) => (
+          <Input
+            id={name}
+            name={name}
+            type="text"
+            value={watch("name")}
+            onChange={onChange}
+            ref={ref}
+            hasError={Boolean(error)}
+            placeholder="#FFFFFF"
+          />
+        )}
       />
       <div className="absolute right-4 top-2.5">
         <Popover className="relative grid place-items-center">
@@ -95,11 +105,7 @@ export const ColorPickerInput: React.FC<Props> = ({
                     }}
                   />
                 ) : (
-                  <ColorPickerIcon
-                    height={14}
-                    width={14}
-                    className="fill-current text-custom-text-100"
-                  />
+                  <ColorPickerIcon height={14} width={14} className="fill-current text-custom-text-100" />
                 )}
               </Popover.Button>
 
diff --git a/web/components/core/theme/custom-theme-selector.tsx b/web/components/core/theme/custom-theme-selector.tsx
index 27817c82aa1..cc6a7fa805c 100644
--- a/web/components/core/theme/custom-theme-selector.tsx
+++ b/web/components/core/theme/custom-theme-selector.tsx
@@ -38,6 +38,7 @@ export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData })
     register,
     formState: { errors, isSubmitting },
     handleSubmit,
+    control,
     watch,
     setValue,
     reset,
@@ -78,12 +79,11 @@ export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData })
         <div className="space-y-4">
           <div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2 md:grid-cols-3">
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">
-                Background color
-              </h3>
+              <h3 className="text-left text-sm font-medium text-custom-text-200">Background color</h3>
               <ColorPickerInput
                 name="background"
                 position="right"
+                control={control}
                 error={errors.background}
                 watch={watch}
                 setValue={setValue}
@@ -95,6 +95,7 @@ export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData })
               <h3 className="text-left text-sm font-medium text-custom-text-200">Text color</h3>
               <ColorPickerInput
                 name="text"
+                control={control}
                 error={errors.text}
                 watch={watch}
                 setValue={setValue}
@@ -103,12 +104,11 @@ export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData })
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">
-                Primary(Theme) color
-              </h3>
+              <h3 className="text-left text-sm font-medium text-custom-text-200">Primary(Theme) color</h3>
               <ColorPickerInput
                 name="primary"
                 error={errors.primary}
+                control={control}
                 watch={watch}
                 setValue={setValue}
                 register={register}
@@ -116,12 +116,11 @@ export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData })
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">
-                Sidebar background color
-              </h3>
+              <h3 className="text-left text-sm font-medium text-custom-text-200">Sidebar background color</h3>
               <ColorPickerInput
                 name="sidebarBackground"
                 position="right"
+                control={control}
                 error={errors.sidebarBackground}
                 watch={watch}
                 setValue={setValue}
@@ -130,11 +129,10 @@ export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData })
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">
-                Sidebar text color
-              </h3>
+              <h3 className="text-left text-sm font-medium text-custom-text-200">Sidebar text color</h3>
               <ColorPickerInput
                 name="sidebarText"
+                control={control}
                 error={errors.sidebarText}
                 watch={watch}
                 setValue={setValue}
diff --git a/web/components/estimates/create-update-estimate-modal.tsx b/web/components/estimates/create-update-estimate-modal.tsx
index 1242742d43a..520367658e1 100644
--- a/web/components/estimates/create-update-estimate-modal.tsx
+++ b/web/components/estimates/create-update-estimate-modal.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
@@ -13,7 +13,8 @@ import estimatesService from "services/project_estimates.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { Input } from "@plane/ui";
 // helpers
 import { checkDuplicates } from "helpers/array.helper";
 // types
@@ -53,8 +54,9 @@ const defaultValues: Partial<FormValues> = {
 export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data, isOpen, user }) => {
   const {
     register,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
     handleSubmit,
+    control,
     reset,
   } = useForm<FormValues>({
     defaultValues,
@@ -253,14 +255,22 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                     <div className="space-y-3">
                       <div className="text-lg font-medium leading-6">{data ? "Update" : "Create"} Estimate</div>
                       <div>
-                        <Input
-                          id="name"
+                        <Controller
+                          control={control}
                           name="name"
-                          type="name"
-                          placeholder="Title"
-                          autoComplete="off"
-                          className="resize-none text-xl"
-                          register={register}
+                          render={({ field: { value, onChange, ref } }) => (
+                            <Input
+                              id="name"
+                              name="name"
+                              type="name"
+                              value={value}
+                              onChange={onChange}
+                              ref={ref}
+                              hasError={Boolean(errors.name)}
+                              placeholder="Title"
+                              className="resize-none text-xl w-full"
+                            />
+                          )}
                         />
                       </div>
                       <div>
@@ -277,14 +287,22 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           <span className="flex h-full items-center rounded-lg bg-custom-background-80">
                             <span className="rounded-lg px-2 text-sm text-custom-text-200">1</span>
                             <span className="rounded-r-lg bg-custom-background-100">
-                              <Input
-                                id="name"
+                              <Controller
+                                control={control}
                                 name="value1"
-                                type="name"
-                                className="rounded-l-none"
-                                placeholder="Point 1"
-                                autoComplete="off"
-                                register={register}
+                                render={({ field: { value, onChange, ref } }) => (
+                                  <Input
+                                    id="value1"
+                                    name="value1"
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.value1)}
+                                    placeholder="Point 1"
+                                    className="rounded-l-none w-full"
+                                  />
+                                )}
                               />
                             </span>
                           </span>
@@ -293,14 +311,22 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           <span className="flex h-full items-center rounded-lg bg-custom-background-80">
                             <span className="rounded-lg px-2 text-sm text-custom-text-200">2</span>
                             <span className="rounded-r-lg bg-custom-background-100">
-                              <Input
-                                id="name"
+                              <Controller
+                                control={control}
                                 name="value2"
-                                type="name"
-                                className="rounded-l-none"
-                                placeholder="Point 2"
-                                autoComplete="off"
-                                register={register}
+                                render={({ field: { value, onChange, ref } }) => (
+                                  <Input
+                                    id="value2"
+                                    name="value2"
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.value2)}
+                                    placeholder="Point 2"
+                                    className="rounded-l-none w-full"
+                                  />
+                                )}
                               />
                             </span>
                           </span>
@@ -309,14 +335,22 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           <span className="flex h-full items-center rounded-lg bg-custom-background-80">
                             <span className="rounded-lg px-2 text-sm text-custom-text-200">3</span>
                             <span className="rounded-r-lg bg-custom-background-100">
-                              <Input
-                                id="name"
+                              <Controller
+                                control={control}
                                 name="value3"
-                                type="name"
-                                className="rounded-l-none"
-                                placeholder="Point 3"
-                                autoComplete="off"
-                                register={register}
+                                render={({ field: { value, onChange, ref } }) => (
+                                  <Input
+                                    id="value3"
+                                    name="value3"
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.value3)}
+                                    placeholder="Point 3"
+                                    className="rounded-l-none w-full"
+                                  />
+                                )}
                               />
                             </span>
                           </span>
@@ -325,14 +359,22 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           <span className="flex h-full items-center rounded-lg bg-custom-background-80">
                             <span className="rounded-lg px-2 text-sm text-custom-text-200">4</span>
                             <span className="rounded-r-lg bg-custom-background-100">
-                              <Input
-                                id="name"
+                              <Controller
+                                control={control}
                                 name="value4"
-                                type="name"
-                                className="rounded-l-none"
-                                placeholder="Point 4"
-                                autoComplete="off"
-                                register={register}
+                                render={({ field: { value, onChange, ref } }) => (
+                                  <Input
+                                    id="value4"
+                                    name="value4"
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.value4)}
+                                    placeholder="Point 4"
+                                    className="rounded-l-none w-full"
+                                  />
+                                )}
                               />
                             </span>
                           </span>
@@ -341,14 +383,22 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           <span className="flex h-full items-center rounded-lg bg-custom-background-80">
                             <span className="rounded-lg px-2 text-sm text-custom-text-200">5</span>
                             <span className="rounded-r-lg bg-custom-background-100">
-                              <Input
-                                id="name"
+                              <Controller
+                                control={control}
                                 name="value5"
-                                type="name"
-                                className="rounded-l-none"
-                                placeholder="Point 5"
-                                autoComplete="off"
-                                register={register}
+                                render={({ field: { value, onChange, ref } }) => (
+                                  <Input
+                                    id="value5"
+                                    name="value5"
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.value5)}
+                                    placeholder="Point 5"
+                                    className="rounded-l-none w-full"
+                                  />
+                                )}
                               />
                             </span>
                           </span>
@@ -357,14 +407,22 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           <span className="flex h-full items-center rounded-lg bg-custom-background-80">
                             <span className="rounded-lg px-2 text-sm text-custom-text-200">6</span>
                             <span className="rounded-r-lg bg-custom-background-100">
-                              <Input
-                                id="name"
+                              <Controller
+                                control={control}
                                 name="value6"
-                                type="name"
-                                className="rounded-l-none"
-                                placeholder="Point 6"
-                                autoComplete="off"
-                                register={register}
+                                render={({ field: { value, onChange, ref } }) => (
+                                  <Input
+                                    id="value6"
+                                    name="value6"
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.value6)}
+                                    placeholder="Point 6"
+                                    className="rounded-l-none w-full"
+                                  />
+                                )}
                               />
                             </span>
                           </span>
diff --git a/web/components/integration/delete-import-modal.tsx b/web/components/integration/delete-import-modal.tsx
index 23b95664410..0ea2c2b7c1c 100644
--- a/web/components/integration/delete-import-modal.tsx
+++ b/web/components/integration/delete-import-modal.tsx
@@ -11,7 +11,8 @@ import IntegrationService from "services/integration.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { DangerButton, Input, SecondaryButton } from "components/ui";
+import { DangerButton, SecondaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
@@ -110,14 +111,16 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
                       To confirm, type <span className="font-medium text-custom-text-100">delete import</span> below:
                     </p>
                     <Input
+                      id="typeDelete"
                       type="text"
                       name="typeDelete"
-                      className="mt-2"
+                      value=""
                       onChange={(e) => {
                         if (e.target.value === "delete import") setConfirmDeleteImport(true);
                         else setConfirmDeleteImport(false);
                       }}
                       placeholder="Enter 'delete import'"
+                      className="mt-2 w-full"
                     />
                   </div>
                   <div className="flex justify-end gap-2">
diff --git a/web/components/integration/github/single-user-select.tsx b/web/components/integration/github/single-user-select.tsx
index 13671ac8930..b66b135c3c0 100644
--- a/web/components/integration/github/single-user-select.tsx
+++ b/web/components/integration/github/single-user-select.tsx
@@ -5,7 +5,8 @@ import useSWR from "swr";
 // services
 import workspaceService from "services/workspace.service";
 // ui
-import { Avatar, CustomSearchSelect, CustomSelect, Input } from "components/ui";
+import { Avatar, CustomSearchSelect, CustomSelect } from "components/ui";
+import { Input } from "@plane/ui";
 // types
 import { IGithubRepoCollaborator } from "types";
 import { IUserDetails } from "./root";
@@ -69,11 +70,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
       <div>
         <CustomSelect
           value={users[index].import}
-          label={
-            <div className="text-xs">
-              {importOptions.find((o) => o.key === users[index].import)?.label}
-            </div>
-          }
+          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;
@@ -92,6 +89,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
       </div>
       {users[index].import === "invite" && (
         <Input
+          id="email"
           type="email"
           name={`userEmail${index}`}
           value={users[index].email}
@@ -101,7 +99,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
             setUsers(newUsers);
           }}
           placeholder="Enter email of the user"
-          className="py-1 text-xs"
+          className="py-1 text-xs w-full"
         />
       )}
       {users[index].import === "map" && members && (
diff --git a/web/components/integration/jira/give-details.tsx b/web/components/integration/jira/give-details.tsx
index 3fc5d9641c5..d549114dfb5 100644
--- a/web/components/integration/jira/give-details.tsx
+++ b/web/components/integration/jira/give-details.tsx
@@ -13,8 +13,10 @@ import { PlusIcon } from "@heroicons/react/20/solid";
 import useProjects from "hooks/use-projects";
 
 // components
-import { Input, CustomSelect } from "components/ui";
+import { CustomSelect } from "components/ui";
+import { Input } from "@plane/ui";
 
+// types
 import { IJiraImporterForm } from "types";
 
 export const JiraGetImportDetail: React.FC = () => {
@@ -42,15 +44,24 @@ export const JiraGetImportDetail: React.FC = () => {
         </div>
 
         <div className="col-span-1">
-          <Input
-            id="metadata.api_token"
+          <Controller
+            control={control}
             name="metadata.api_token"
-            placeholder="XXXXXXXX"
-            validations={{
+            rules={{
               required: "Please enter your personal access token.",
             }}
-            register={register}
-            error={errors.metadata?.api_token}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="metadata.api_token"
+                name="metadata.api_token"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                placeholder="XXXXXXXX"
+                className="w-full"
+              />
+            )}
           />
         </div>
       </div>
@@ -61,15 +72,25 @@ export const JiraGetImportDetail: React.FC = () => {
           <p className="text-sm text-custom-text-200">If XXX-123 is your issue, then enter XXX</p>
         </div>
         <div className="col-span-1">
-          <Input
-            id="metadata.project_key"
+          <Controller
+            control={control}
             name="metadata.project_key"
-            placeholder="LIN"
-            register={register}
-            validations={{
+            rules={{
               required: "Please enter your project key.",
             }}
-            error={errors.metadata?.project_key}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="metadata.project_key"
+                name="metadata.project_key"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.metadata?.project_key)}
+                placeholder="LIN"
+                className="w-full"
+              />
+            )}
           />
         </div>
       </div>
@@ -77,21 +98,28 @@ export const JiraGetImportDetail: React.FC = () => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Jira Email Address</h3>
-          <p className="text-sm text-custom-text-200">
-            Enter the Gmail account that you use in Jira account
-          </p>
+          <p className="text-sm text-custom-text-200">Enter the Gmail account that you use in Jira account</p>
         </div>
         <div className="col-span-1">
-          <Input
-            id="metadata.email"
+          <Controller
+            control={control}
             name="metadata.email"
-            type="email"
-            placeholder="name@company.com"
-            register={register}
-            validations={{
+            rules={{
               required: "Please enter email address.",
             }}
-            error={errors.metadata?.email}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="metadata.email"
+                name="metadata.email"
+                type="email"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.metadata?.email)}
+                placeholder="name@company.com"
+                className="w-full"
+              />
+            )}
           />
         </div>
       </div>
@@ -102,16 +130,25 @@ export const JiraGetImportDetail: React.FC = () => {
           <p className="text-sm text-custom-text-200">Enter your companies cloud host name</p>
         </div>
         <div className="col-span-1">
-          <Input
-            id="metadata.cloud_hostname"
+          <Controller
+            control={control}
             name="metadata.cloud_hostname"
-            type="email"
-            placeholder="my-company.atlassian.net"
-            register={register}
-            validations={{
+            rules={{
               required: "Please enter your cloud host name.",
             }}
-            error={errors.metadata?.cloud_hostname}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="metadata.cloud_hostname"
+                name="metadata.cloud_hostname"
+                type="email"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.metadata?.cloud_hostname)}
+                placeholder="my-company.atlassian.net"
+                className="w-full"
+              />
+            )}
           />
         </div>
       </div>
@@ -119,9 +156,7 @@ export const JiraGetImportDetail: React.FC = () => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Import to project</h3>
-          <p className="text-sm text-custom-text-200">
-            Select which project you want to import to.
-          </p>
+          <p className="text-sm text-custom-text-200">Select which project you want to import to.</p>
         </div>
         <div className="col-span-1">
           <Controller
diff --git a/web/components/integration/jira/import-users.tsx b/web/components/integration/jira/import-users.tsx
index bb3057f1ed8..2379be6dd6c 100644
--- a/web/components/integration/jira/import-users.tsx
+++ b/web/components/integration/jira/import-users.tsx
@@ -16,7 +16,8 @@ import { WORKSPACE_MEMBERS_WITH_EMAIL } from "constants/fetch-keys";
 import workspaceService from "services/workspace.service";
 
 // components
-import { ToggleSwitch, Input, CustomSelect, CustomSearchSelect, Avatar } from "components/ui";
+import { ToggleSwitch, CustomSelect, CustomSearchSelect, Avatar } from "components/ui";
+import { Input } from "@plane/ui";
 
 import { IJiraImporterForm } from "types";
 
@@ -38,9 +39,7 @@ export const JiraImportUsers: FC = () => {
 
   const { data: members } = useSWR(
     workspaceSlug ? WORKSPACE_MEMBERS_WITH_EMAIL(workspaceSlug?.toString() ?? "") : null,
-    workspaceSlug
-      ? () => workspaceService.workspaceMembersWithEmail(workspaceSlug?.toString() ?? "")
-      : null
+    workspaceSlug ? () => workspaceService.workspaceMembersWithEmail(workspaceSlug?.toString() ?? "") : null
   );
 
   const options = members?.map((member) => ({
@@ -59,17 +58,13 @@ export const JiraImportUsers: FC = () => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Users</h3>
-          <p className="text-sm text-custom-text-200">
-            Update, invite or choose not to invite assignee
-          </p>
+          <p className="text-sm text-custom-text-200">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} />
-            )}
+            render={({ field: { value, onChange } }) => <ToggleSwitch onChange={onChange} value={value} />}
           />
         </div>
       </div>
@@ -97,11 +92,7 @@ export const JiraImportUsers: FC = () => {
                         value={value}
                         onChange={onChange}
                         width="w-full"
-                        label={
-                          <span className="capitalize">
-                            {Boolean(value) ? value : ("Ignore" as any)}
-                          </span>
-                        }
+                        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>
@@ -112,15 +103,24 @@ export const JiraImportUsers: FC = () => {
                 </div>
                 <div className="col-span-1">
                   {watch(`data.users.${index}.import`) === "invite" && (
-                    <Input
-                      id={`data.users.${index}.email`}
+                    <Controller
+                      control={control}
                       name={`data.users.${index}.email`}
-                      type="text"
-                      register={register}
-                      validations={{
+                      rules={{
                         required: "This field is required",
                       }}
-                      error={errors?.data?.users?.[index]?.email}
+                      render={({ field: { value, onChange, ref } }) => (
+                        <Input
+                          id={`data.users.${index}.email`}
+                          name={`data.users.${index}.email`}
+                          type="text"
+                          value={value}
+                          onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.data?.users?.[index]?.email)}
+                          className="w-full"
+                        />
+                      )}
                     />
                   )}
                   {watch(`data.users.${index}.import`) === "map" && (
diff --git a/web/components/issues/draft-issue-form.tsx b/web/components/issues/draft-issue-form.tsx
index bf6d511e3da..a2715b6b3d9 100644
--- a/web/components/issues/draft-issue-form.tsx
+++ b/web/components/issues/draft-issue-form.tsx
@@ -24,7 +24,8 @@ import {
 import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
 // ui
-import { CustomMenu, Input, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
+import { CustomMenu, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
+import { Input } from "@plane/ui";
 import { TipTapEditor } from "components/tiptap";
 // icons
 import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
@@ -356,21 +357,29 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
             <div className="mt-2 space-y-3">
               {(fieldsToShow.includes("all") || fieldsToShow.includes("name")) && (
                 <div>
-                  <Input
-                    id="name"
+                  <Controller
+                    control={control}
                     name="name"
-                    className="resize-none text-xl"
-                    placeholder="Title"
-                    autoComplete="off"
-                    error={errors.name}
-                    register={register}
-                    validations={{
+                    rules={{
                       required: "Title is required",
                       maxLength: {
                         value: 255,
                         message: "Title should be less than 255 characters",
                       },
                     }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="name"
+                        name="name"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.name)}
+                        placeholder="Title"
+                        className="resize-none text-xl w-full"
+                      />
+                    )}
                   />
                 </div>
               )}
diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx
index dd382d43fae..68dcf71349d 100644
--- a/web/components/issues/form.tsx
+++ b/web/components/issues/form.tsx
@@ -23,7 +23,8 @@ import {
 import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
 // ui
-import { CustomMenu, Input, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
+import { CustomMenu, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
+import { Input } from "@plane/ui";
 import { TipTapEditor } from "components/tiptap";
 // icons
 import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
@@ -321,21 +322,29 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
             <div className="mt-2 space-y-3">
               {(fieldsToShow.includes("all") || fieldsToShow.includes("name")) && (
                 <div>
-                  <Input
-                    id="name"
+                  <Controller
+                    control={control}
                     name="name"
-                    className="resize-none text-xl"
-                    placeholder="Title"
-                    autoComplete="off"
-                    error={errors.name}
-                    register={register}
-                    validations={{
+                    rules={{
                       required: "Title is required",
                       maxLength: {
                         value: 255,
                         message: "Title should be less than 255 characters",
                       },
                     }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="name"
+                        name="name"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.name)}
+                        placeholder="Title"
+                        className="resize-none text-xl w-full"
+                      />
+                    )}
                   />
                 </div>
               )}
diff --git a/web/components/issues/sidebar-select/label.tsx b/web/components/issues/sidebar-select/label.tsx
index 2052a0d56ee..0899c848793 100644
--- a/web/components/issues/sidebar-select/label.tsx
+++ b/web/components/issues/sidebar-select/label.tsx
@@ -15,7 +15,8 @@ import issuesService from "services/issue.service";
 // hooks
 import useUser from "hooks/use-user";
 // ui
-import { Input, Spinner } from "components/ui";
+import { Spinner } from "components/ui";
+import { Input } from "@plane/ui";
 // icons
 import { PlusIcon, RectangleGroupIcon, TagIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
@@ -53,10 +54,10 @@ export const SidebarLabelSelect: React.FC<Props> = ({
   const {
     register,
     handleSubmit,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
     reset,
     watch,
-    control: labelControl,
+    control,
     setFocus,
   } = useForm<Partial<IIssueLabels>>({
     defaultValues,
@@ -281,7 +282,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
                     <Popover.Panel className="absolute z-10 mt-1.5 max-w-xs px-2 sm:px-0">
                       <Controller
                         name="color"
-                        control={labelControl}
+                        control={control}
                         render={({ field: { value, onChange } }) => (
                           <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
                         )}
@@ -292,15 +293,25 @@ export const SidebarLabelSelect: React.FC<Props> = ({
               )}
             </Popover>
           </div>
-          <Input
-            id="name"
+          <Controller
+            control={control}
             name="name"
-            placeholder="Title"
-            register={register}
-            validations={{
+            rules={{
               required: "This is required",
             }}
-            autoComplete="off"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="name"
+                name="name"
+                type="text"
+                value={value ?? ""}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.name)}
+                placeholder="Title"
+                className="w-full"
+              />
+            )}
           />
           <button
             type="button"
diff --git a/web/components/labels/create-label-modal.tsx b/web/components/labels/create-label-modal.tsx
index f4123633f55..12dfd355ea1 100644
--- a/web/components/labels/create-label-modal.tsx
+++ b/web/components/labels/create-label-modal.tsx
@@ -13,7 +13,8 @@ import { Dialog, Popover, Transition } from "@headlessui/react";
 // services
 import issuesService from "services/issue.service";
 // ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 // types
@@ -163,18 +164,25 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                         )}
                       </Popover>
                       <div className="flex w-full flex-col gap-0.5 justify-center">
-                        <Input
-                          type="text"
-                          id="name"
+                        <Controller
+                          control={control}
                           name="name"
-                          placeholder="Label title"
-                          autoComplete="off"
-                          error={errors.name}
-                          register={register}
-                          width="full"
-                          validations={{
+                          rules={{
                             required: "Label title is required",
                           }}
+                          render={({ field: { value, onChange, ref } }) => (
+                            <Input
+                              id="name"
+                              name="name"
+                              type="text"
+                              value={value}
+                              onChange={onChange}
+                              ref={ref}
+                              hasError={Boolean(errors.name)}
+                              placeholder="Label title"
+                              className="resize-none text-xl w-full"
+                            />
+                          )}
                         />
                       </div>
                     </div>
diff --git a/web/components/labels/create-update-label-inline.tsx b/web/components/labels/create-update-label-inline.tsx
index 0f5dcbeff9d..d81b593b8b1 100644
--- a/web/components/labels/create-update-label-inline.tsx
+++ b/web/components/labels/create-update-label-inline.tsx
@@ -15,7 +15,8 @@ import { Popover, Transition } from "@headlessui/react";
 // services
 import issuesService from "services/issue.service";
 // ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // types
 import { IIssueLabels } from "types";
 // fetch-keys
@@ -164,16 +165,25 @@ export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(functio
         </Popover>
       </div>
       <div className="flex flex-1 flex-col justify-center">
-        <Input
-          type="text"
-          id="labelName"
+        <Controller
+          control={control}
           name="name"
-          register={register}
-          placeholder="Label title"
-          validations={{
+          rules={{
             required: "Label title is required",
           }}
-          error={errors.name}
+          render={({ field: { value, onChange, ref } }) => (
+            <Input
+              id="labelName"
+              name="name"
+              type="text"
+              value={value}
+              onChange={onChange}
+              ref={ref}
+              hasError={Boolean(errors.name)}
+              placeholder="Label title"
+              className="w-full"
+            />
+          )}
         />
       </div>
       <SecondaryButton onClick={() => handleClose()}>Cancel</SecondaryButton>
diff --git a/web/components/modules/form.tsx b/web/components/modules/form.tsx
index 2715ba26621..a2011795d2d 100644
--- a/web/components/modules/form.tsx
+++ b/web/components/modules/form.tsx
@@ -5,7 +5,8 @@ import { Controller, useForm } from "react-hook-form";
 // components
 import { ModuleLeadSelect, ModuleMembersSelect, ModuleStatusSelect } from "components/modules";
 // ui
-import { DateSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { DateSelect, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { Input } from "@plane/ui";
 // types
 import { IModule } from "types";
 
@@ -63,27 +64,32 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateModule)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
-          {status ? "Update" : "Create"} Module
-        </h3>
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{status ? "Update" : "Create"} Module</h3>
         <div className="space-y-3">
           <div>
-            <Input
-              id="name"
+            <Controller
+              control={control}
               name="name"
-              type="name"
-              placeholder="Title"
-              autoComplete="off"
-              className="resize-none text-xl"
-              error={errors.name}
-              register={register}
-              validations={{
+              rules={{
                 required: "Title is required",
                 maxLength: {
                   value: 255,
                   message: "Title should be less than 255 characters",
                 },
               }}
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="name"
+                  name="name"
+                  type="text"
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.name)}
+                  placeholder="Title"
+                  className="resize-none text-xl w-full"
+                />
+              )}
             />
           </div>
           <div>
@@ -129,16 +135,12 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
             <Controller
               control={control}
               name="lead"
-              render={({ field: { value, onChange } }) => (
-                <ModuleLeadSelect value={value} onChange={onChange} />
-              )}
+              render={({ field: { value, onChange } }) => <ModuleLeadSelect value={value} onChange={onChange} />}
             />
             <Controller
               control={control}
               name="members"
-              render={({ field: { value, onChange } }) => (
-                <ModuleMembersSelect value={value} onChange={onChange} />
-              )}
+              render={({ field: { value, onChange } }) => <ModuleMembersSelect value={value} onChange={onChange} />}
             />
           </div>
         </div>
diff --git a/web/components/onboarding/invite-members.tsx b/web/components/onboarding/invite-members.tsx
index 8f1b1fa4103..1a709de6b29 100644
--- a/web/components/onboarding/invite-members.tsx
+++ b/web/components/onboarding/invite-members.tsx
@@ -3,20 +3,14 @@ import React, { useEffect, useRef, useState } from "react";
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // react-hook-form
-import {
-  Control,
-  Controller,
-  FieldArrayWithId,
-  UseFieldArrayRemove,
-  useFieldArray,
-  useForm,
-} from "react-hook-form";
+import { Control, Controller, FieldArrayWithId, UseFieldArrayRemove, useFieldArray, useForm } from "react-hook-form";
 // services
 import workspaceService from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 // icons
@@ -60,12 +54,7 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
 
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
-  useDynamicDropdownPosition(
-    isDropdownOpen,
-    () => setIsDropdownOpen(false),
-    buttonRef,
-    dropdownRef
-  );
+  useDynamicDropdownPosition(isDropdownOpen, () => setIsDropdownOpen(false), buttonRef, dropdownRef);
 
   return (
     <div className="group relative grid grid-cols-11 gap-4">
@@ -80,15 +69,18 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
               message: "Invalid Email ID",
             },
           }}
-          render={({ field }) => (
-            <>
-              <Input {...field} className="text-xs sm:text-sm" placeholder="Enter their email..." />
-              {errors.emails?.[index]?.email && (
-                <span className="text-red-500 text-xs">
-                  {errors.emails?.[index]?.email?.message}
-                </span>
-              )}
-            </>
+          render={({ field: { value, onChange, ref } }) => (
+            <Input
+              id={`emails.${index}.email`}
+              name={`emails.${index}.email`}
+              type="text"
+              value={value}
+              onChange={onChange}
+              ref={ref}
+              hasError={Boolean(errors.emails?.[index]?.email)}
+              placeholder="Enter their email..."
+              className="text-xs sm:text-sm w-full"
+            />
           )}
         />
       </div>
diff --git a/web/components/onboarding/user-details.tsx b/web/components/onboarding/user-details.tsx
index 2911bbc80f4..710a9a7641c 100644
--- a/web/components/onboarding/user-details.tsx
+++ b/web/components/onboarding/user-details.tsx
@@ -9,7 +9,8 @@ import useToast from "hooks/use-toast";
 // services
 import userService from "services/user.service";
 // ui
-import { CustomSearchSelect, CustomSelect, Input, PrimaryButton } from "components/ui";
+import { CustomSearchSelect, CustomSelect, PrimaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // types
 import { ICurrentUserResponse, IUser } from "types";
 // fetch-keys
@@ -113,38 +114,56 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
       <div className="space-y-7 sm:w-3/4 md:w-2/5">
         <div className="space-y-1 text-sm">
           <label htmlFor="firstName">First Name</label>
-          <Input
-            id="firstName"
+          <Controller
+            control={control}
             name="first_name"
-            autoComplete="off"
-            placeholder="Enter your first name..."
-            register={register}
-            validations={{
+            rules={{
               required: "First name is required",
               maxLength: {
                 value: 24,
                 message: "First name cannot exceed the limit of 24 characters",
               },
             }}
-            error={errors.first_name}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="first_name"
+                name="first_name"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.first_name)}
+                placeholder="Enter your first name..."
+                className="w-full"
+              />
+            )}
           />
         </div>
         <div className="space-y-1 text-sm">
           <label htmlFor="lastName">Last Name</label>
-          <Input
-            id="lastName"
+          <Controller
+            control={control}
             name="last_name"
-            autoComplete="off"
-            register={register}
-            placeholder="Enter your last name..."
-            validations={{
+            rules={{
               required: "Last name is required",
               maxLength: {
                 value: 24,
                 message: "Last name cannot exceed the limit of 24 characters",
               },
             }}
-            error={errors.last_name}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="last_name"
+                name="last_name"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.last_name)}
+                placeholder="Enter your last name..."
+                className="w-full"
+              />
+            )}
           />
         </div>
         <div className="space-y-1 text-sm">
@@ -158,13 +177,7 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
                 <CustomSelect
                   value={value}
                   onChange={(val: any) => onChange(val)}
-                  label={
-                    value ? (
-                      value.toString()
-                    ) : (
-                      <span className="text-custom-text-400">Select your role...</span>
-                    )
-                  }
+                  label={value ? value.toString() : <span className="text-custom-text-400">Select your role...</span>}
                   input
                   width="w-full"
                   verticalPosition="top"
@@ -190,11 +203,7 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
               render={({ field: { value, onChange } }) => (
                 <CustomSearchSelect
                   value={value}
-                  label={
-                    value
-                      ? TIME_ZONES.find((t) => t.value === value)?.label ?? value
-                      : "Select a timezone"
-                  }
+                  label={value ? TIME_ZONES.find((t) => t.value === value)?.label ?? value : "Select a timezone"}
                   options={timeZoneOptions}
                   onChange={onChange}
                   verticalPosition="top"
@@ -203,9 +212,7 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
                 />
               )}
             />
-            {errors?.user_timezone && (
-              <span className="text-sm text-red-500">{errors.user_timezone.message}</span>
-            )}
+            {errors?.user_timezone && <span className="text-sm text-red-500">{errors.user_timezone.message}</span>}
           </div>
         </div>
       </div>
diff --git a/web/components/pages/page-form.tsx b/web/components/pages/page-form.tsx
index c4c669e1e71..20bd7dfb7ba 100644
--- a/web/components/pages/page-form.tsx
+++ b/web/components/pages/page-form.tsx
@@ -1,9 +1,10 @@
 import { useEffect } from "react";
 
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // ui
-import { Input, Loader, PrimaryButton, SecondaryButton } from "components/ui";
+import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // types
 import { IPage } from "types";
 
@@ -24,6 +25,7 @@ export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
     register,
     formState: { errors, isSubmitting },
     handleSubmit,
+    control,
     reset,
   } = useForm<IPage>({
     defaultValues,
@@ -47,27 +49,32 @@ export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
   return (
     <form onSubmit={handleSubmit(handleCreateUpdatePage)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
-          {status ? "Update" : "Create"} Page
-        </h3>
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{status ? "Update" : "Create"} Page</h3>
         <div className="space-y-3">
           <div>
-            <Input
-              id="name"
+            <Controller
+              control={control}
               name="name"
-              type="name"
-              placeholder="Title"
-              className="resize-none text-xl"
-              autoComplete="off"
-              error={errors.name}
-              register={register}
-              validations={{
+              rules={{
                 required: "Title is required",
                 maxLength: {
                   value: 255,
                   message: "Title should be less than 255 characters",
                 },
               }}
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="name"
+                  name="name"
+                  type="text"
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.name)}
+                  placeholder="Title"
+                  className="resize-none text-xl w-full"
+                />
+              )}
             />
           </div>
         </div>
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index f07e8193bfd..3418bee32ee 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -13,7 +13,6 @@ import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
 import useWorkspaceMembers from "hooks/use-workspace-members";
 // ui
 import {
-  Input,
   TextArea,
   CustomSelect,
   PrimaryButton,
@@ -22,6 +21,7 @@ import {
   Avatar,
   CustomSearchSelect,
 } from "components/ui";
+import { Input } from "@plane/ui";
 // components
 import { ImagePickerPopover } from "components/core";
 import EmojiIconPicker from "components/emoji-icon-picker";
@@ -234,6 +234,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                       onChange={(image) => {
                         setValue("cover_image", image);
                       }}
+                      control={control}
                       value={watch("cover_image")}
                     />
                   </div>
@@ -259,36 +260,36 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                   <div className="mt-9 space-y-6 pb-5">
                     <div className="grid grid-cols-1 md:grid-cols-4 gap-y-3 gap-x-2">
                       <div className="md:col-span-3">
-                        <Input
-                          id="name"
+                        <Controller
+                          control={control}
                           name="name"
-                          type="name"
-                          placeholder="Project Title"
-                          onChange={changeIdentifierOnNameChange}
-                          error={errors.name}
-                          register={register}
-                          validations={{
+                          rules={{
                             required: "Title is required",
                             maxLength: {
                               value: 255,
                               message: "Title should be less than 255 characters",
                             },
                           }}
-                          autoComplete="off"
-                          tabIndex={1}
+                          render={({ field: { value, ref } }) => (
+                            <Input
+                              id="name"
+                              name="name"
+                              type="text"
+                              value={value}
+                              onChange={changeIdentifierOnNameChange}
+                              ref={ref}
+                              hasError={Boolean(errors.name)}
+                              placeholder="Project Title"
+                              className="w-full"
+                            />
+                          )}
                         />
                       </div>
                       <div>
-                        <Input
-                          id="identifier"
+                        <Controller
+                          control={control}
                           name="identifier"
-                          type="text"
-                          className="text-sm"
-                          placeholder="Identifier"
-                          error={errors.identifier}
-                          register={register}
-                          onChange={handleIdentifierChange}
-                          validations={{
+                          rules={{
                             required: "Identifier is required",
                             validate: (value) =>
                               /^[A-Z0-9]+$/.test(value.toUpperCase()) || "Identifier must be in uppercase.",
@@ -301,6 +302,19 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                               message: "Identifier must at most be of 12 characters",
                             },
                           }}
+                          render={({ field: { value, ref } }) => (
+                            <Input
+                              id="identifier"
+                              name="identifier"
+                              type="text"
+                              value={value}
+                              onChange={handleIdentifierChange}
+                              ref={ref}
+                              hasError={Boolean(errors.name)}
+                              placeholder="Identifier"
+                              className="text-sm w-full"
+                            />
+                          )}
                         />
                       </div>
                       <div className="md:col-span-4">
diff --git a/web/components/project/delete-project-modal.tsx b/web/components/project/delete-project-modal.tsx
index 8d0833001aa..7c3a4f0a63d 100644
--- a/web/components/project/delete-project-modal.tsx
+++ b/web/components/project/delete-project-modal.tsx
@@ -7,7 +7,8 @@ import useToast from "hooks/use-toast";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { DangerButton, Input, SecondaryButton } from "components/ui";
+import { DangerButton, SecondaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // types
 import type { IProject } from "types";
 // fetch-keys
@@ -36,7 +37,7 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
   // form info
   const {
     control,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
     handleSubmit,
     reset,
     watch,
@@ -121,13 +122,17 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
                     <Controller
                       control={control}
                       name="projectName"
-                      render={({ field: { onChange, value } }) => (
+                      render={({ field: { value, onChange, ref } }) => (
                         <Input
+                          id="projectName"
+                          name="projectName"
                           type="text"
-                          placeholder="Project name"
-                          className="mt-2"
                           value={value}
                           onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.projectName)}
+                          placeholder="Project name"
+                          className="mt-2 w-full"
                         />
                       )}
                     />
@@ -140,13 +145,17 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
                     <Controller
                       control={control}
                       name="confirmDelete"
-                      render={({ field: { onChange, value } }) => (
+                      render={({ field: { value, onChange, ref } }) => (
                         <Input
+                          id="confirmDelete"
+                          name="confirmDelete"
                           type="text"
-                          placeholder="Enter 'delete my project'"
-                          className="mt-2"
-                          onChange={onChange}
                           value={value}
+                          onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.confirmDelete)}
+                          placeholder="Enter 'delete my project'"
+                          className="mt-2 w-full"
                         />
                       )}
                     />
diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
index ae154a59cad..92146337fcf 100644
--- a/web/components/project/form.tsx
+++ b/web/components/project/form.tsx
@@ -3,8 +3,8 @@ import { Controller, useForm } from "react-hook-form";
 // components
 import EmojiIconPicker from "components/emoji-icon-picker";
 import { ImagePickerPopover } from "components/core";
-import { Input, TextArea, CustomSelect, PrimaryButton } from "components/ui";
-import { Input as InputElement } from "@plane/ui";
+import { TextArea, CustomSelect, PrimaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // types
 import { IProject, IWorkspace } from "types";
 // helpers
@@ -147,7 +147,13 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                 control={control}
                 name="cover_image"
                 render={({ field: { value, onChange } }) => (
-                  <ImagePickerPopover label={"Change cover"} onChange={onChange} value={value} disabled={!isAdmin} />
+                  <ImagePickerPopover
+                    label={"Change cover"}
+                    control={control}
+                    onChange={onChange}
+                    value={value}
+                    disabled={!isAdmin}
+                  />
                 )}
               />
             </div>
@@ -164,7 +170,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
               required: "Name is required",
             }}
             render={({ field: { value, onChange, ref } }) => (
-              <InputElement
+              <Input
                 id="name"
                 name="name"
                 type="text"
@@ -197,14 +203,10 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
         <div className="flex items-center justify-between gap-10 w-full">
           <div className="flex flex-col gap-1 w-1/2">
             <h4 className="text-sm">Identifier</h4>
-            <Input
-              id="identifier"
+            <Controller
+              control={control}
               name="identifier"
-              error={errors.identifier}
-              register={register}
-              placeholder="Enter identifier"
-              onChange={handleIdentifierChange}
-              validations={{
+              rules={{
                 required: "Identifier is required",
                 validate: (value) => /^[A-Z0-9]+$/.test(value.toUpperCase()) || "Identifier must be in uppercase.",
                 minLength: {
@@ -216,7 +218,20 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                   message: "Identifier must at most be of 5 characters",
                 },
               }}
-              disabled={!isAdmin}
+              render={({ field: { value, ref } }) => (
+                <Input
+                  id="identifier"
+                  name="identifier"
+                  type="text"
+                  value={value}
+                  onChange={handleIdentifierChange}
+                  ref={ref}
+                  hasError={Boolean(errors.identifier)}
+                  placeholder="Enter identifier"
+                  className="w-full"
+                  disabled={!isAdmin}
+                />
+              )}
             />
           </div>
 
diff --git a/web/components/project/leave-project-modal.tsx b/web/components/project/leave-project-modal.tsx
index 90da32d74a3..6f022f0b491 100644
--- a/web/components/project/leave-project-modal.tsx
+++ b/web/components/project/leave-project-modal.tsx
@@ -5,7 +5,8 @@ import { Dialog, Transition } from "@headlessui/react";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { observer } from "mobx-react-lite";
 // ui
-import { DangerButton, Input, SecondaryButton } from "components/ui";
+import { DangerButton, SecondaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // fetch-keys
 import { PROJECTS_LIST } from "constants/fetch-keys";
 // mobx react lite
@@ -51,7 +52,7 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
 
   const {
     control,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
     handleSubmit,
     reset,
   } = useForm({ defaultValues });
@@ -155,13 +156,20 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
                     <Controller
                       control={control}
                       name="projectName"
-                      render={({ field: { onChange, value } }) => (
+                      rules={{
+                        required: "Label title is required",
+                      }}
+                      render={({ field: { value, onChange, ref } }) => (
                         <Input
+                          id="projectName"
+                          name="projectName"
                           type="text"
-                          placeholder="Enter project name"
-                          className="mt-2"
                           value={value}
                           onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.projectName)}
+                          placeholder="Enter project name"
+                          className="mt-2 w-full"
                         />
                       )}
                     />
@@ -174,13 +182,17 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
                     <Controller
                       control={control}
                       name="confirmLeave"
-                      render={({ field: { onChange, value } }) => (
+                      render={({ field: { value, onChange, ref } }) => (
                         <Input
+                          id="confirmLeave"
+                          name="confirmLeave"
                           type="text"
-                          placeholder="Enter 'leave project'"
-                          className="mt-2"
-                          onChange={onChange}
                           value={value}
+                          onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.confirmLeave)}
+                          placeholder="Enter 'leave project'"
+                          className="mt-2 w-full"
                         />
                       )}
                     />
diff --git a/web/components/project/settings/single-label.tsx b/web/components/project/settings/single-label.tsx
index f6ed8be3b2d..25cb7d7c813 100644
--- a/web/components/project/settings/single-label.tsx
+++ b/web/components/project/settings/single-label.tsx
@@ -7,7 +7,8 @@ import { TwitterPicker } from "react-color";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
 // ui
-import { CustomMenu, Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { CustomMenu, PrimaryButton, SecondaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // icons
 import { PencilIcon, RectangleGroupIcon } from "@heroicons/react/24/outline";
 // types
@@ -54,9 +55,7 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
             <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.MenuItem onClick={() => handleLabelDelete(label.id)}>Delete</CustomMenu.MenuItem>
             </CustomMenu>
           </div>
           <div className={`flex items-center gap-2 ${newLabelForm ? "" : "hidden"}`}>
@@ -93,10 +92,7 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
                           name="color"
                           control={control}
                           render={({ field: { value, onChange } }) => (
-                            <TwitterPicker
-                              color={value}
-                              onChange={(value) => onChange(value.hex)}
-                            />
+                            <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
                           )}
                         />
                       </Popover.Panel>
@@ -106,16 +102,25 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
               </Popover>
             </div>
             <div className="flex w-full flex-col justify-center">
-              <Input
-                type="text"
-                id="labelName"
+              <Controller
+                control={control}
                 name="name"
-                register={register}
-                placeholder="Label title"
-                validations={{
+                rules={{
                   required: "Label title is required",
                 }}
-                error={errors.name}
+                render={({ field: { value, onChange, ref } }) => (
+                  <Input
+                    id="labelName"
+                    name="name"
+                    type="text"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.name)}
+                    placeholder="Label title"
+                    className="w-full"
+                  />
+                )}
               />
             </div>
             <SecondaryButton onClick={() => setNewLabelForm(false)}>Cancel</SecondaryButton>
diff --git a/web/components/states/create-state-modal.tsx b/web/components/states/create-state-modal.tsx
index 171f4f17e42..fc955b672e9 100644
--- a/web/components/states/create-state-modal.tsx
+++ b/web/components/states/create-state-modal.tsx
@@ -15,7 +15,8 @@ import stateService from "services/project_state.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { CustomSelect, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { Input } from "@plane/ui";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 // types
@@ -136,18 +137,30 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                     </Dialog.Title>
                     <div className="mt-2 space-y-3">
                       <div>
-                        <Input
-                          id="name"
-                          label="Name"
+                        <Controller
+                          control={control}
                           name="name"
-                          type="name"
-                          placeholder="Enter name"
-                          autoComplete="off"
-                          error={errors.name}
-                          register={register}
-                          validations={{
+                          rules={{
                             required: "Name is required",
                           }}
+                          render={({ field: { value, onChange, ref } }) => (
+                            <>
+                              <label htmlFor="name" className="text-custom-text-200 mb-2">
+                                Name
+                              </label>
+                              <Input
+                                id="name"
+                                name="name"
+                                type="text"
+                                value={value}
+                                onChange={onChange}
+                                ref={ref}
+                                hasError={Boolean(errors.name)}
+                                placeholder="Enter name"
+                                className="w-full"
+                              />
+                            </>
+                          )}
                         />
                       </div>
                       <div>
diff --git a/web/components/states/create-update-state-inline.tsx b/web/components/states/create-update-state-inline.tsx
index 3cd5bfb8d40..74a50413a73 100644
--- a/web/components/states/create-update-state-inline.tsx
+++ b/web/components/states/create-update-state-inline.tsx
@@ -15,7 +15,8 @@ import stateService from "services/project_state.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, Input, PrimaryButton, SecondaryButton, Tooltip } from "components/ui";
+import { CustomSelect, PrimaryButton, SecondaryButton, Tooltip } from "components/ui";
+import { Input } from "@plane/ui";
 // types
 import type { ICurrentUserResponse, IState, IStateResponse } from "types";
 // fetch-keys
@@ -206,17 +207,25 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
           )}
         </Popover>
       </div>
-      <Input
-        id="name"
+      <Controller
+        control={control}
         name="name"
-        register={register}
-        autoFocus
-        placeholder="Name"
-        validations={{
+        rules={{
           required: true,
         }}
-        error={errors.name}
-        autoComplete="off"
+        render={({ field: { value, onChange, ref } }) => (
+          <Input
+            id="name"
+            name="name"
+            type="text"
+            value={value}
+            onChange={onChange}
+            ref={ref}
+            hasError={Boolean(errors.name)}
+            placeholder="Name"
+            className="w-full"
+          />
+        )}
       />
       {data && (
         <Controller
@@ -247,13 +256,22 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
           )}
         />
       )}
-      <Input
-        id="description"
+      <Controller
+        control={control}
         name="description"
-        register={register}
-        placeholder="Description"
-        error={errors.description}
-        autoComplete="off"
+        render={({ field: { value, onChange, ref } }) => (
+          <Input
+            id="description"
+            name="description"
+            type="text"
+            value={value}
+            onChange={onChange}
+            ref={ref}
+            hasError={Boolean(errors.description)}
+            placeholder="Description"
+            className="w-full"
+          />
+        )}
       />
       <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
       <PrimaryButton type="submit" loading={isSubmitting}>
diff --git a/web/components/views/form.tsx b/web/components/views/form.tsx
index 0856bafa4a6..9a6c86d6d7f 100644
--- a/web/components/views/form.tsx
+++ b/web/components/views/form.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // services
 import stateService from "services/project_state.service";
 // hooks
@@ -14,7 +14,8 @@ import useProjectMembers from "hooks/use-project-members";
 import { FiltersList } from "components/core";
 import { SelectFilters } from "components/views";
 // ui
-import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { Input } from "@plane/ui";
 // helpers
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 import { getStatesList } from "helpers/state.helper";
@@ -45,6 +46,7 @@ export const ViewForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
     register,
     formState: { errors, isSubmitting },
     handleSubmit,
+    control,
     reset,
     watch,
     setValue,
@@ -112,22 +114,29 @@ export const ViewForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
         <h3 className="text-lg font-medium leading-6 text-custom-text-100">{status ? "Update" : "Create"} View</h3>
         <div className="space-y-3">
           <div>
-            <Input
-              id="name"
+            <Controller
+              control={control}
               name="name"
-              type="name"
-              placeholder="Title"
-              autoComplete="off"
-              className="resize-none text-xl"
-              error={errors.name}
-              register={register}
-              validations={{
+              rules={{
                 required: "Title is required",
                 maxLength: {
                   value: 255,
                   message: "Title should be less than 255 characters",
                 },
               }}
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="name"
+                  name="name"
+                  type="text"
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.name)}
+                  placeholder="Title"
+                  className="resize-none text-xl w-full"
+                />
+              )}
             />
           </div>
           <div>
diff --git a/web/components/web-view/create-update-link-form.tsx b/web/components/web-view/create-update-link-form.tsx
index 692ffb9c9e2..d29667ef8b2 100644
--- a/web/components/web-view/create-update-link-form.tsx
+++ b/web/components/web-view/create-update-link-form.tsx
@@ -8,7 +8,7 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 
 // react hooks form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 
 // services
 import issuesService from "services/issue.service";
@@ -20,10 +20,11 @@ import { ISSUE_DETAILS } from "constants/fetch-keys";
 import useToast from "hooks/use-toast";
 
 // ui
-import { PrimaryButton, Input } from "components/ui";
+import { PrimaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 
 // types
-import type { linkDetails, IIssueLink } from "types";
+import type { linkDetails, IIssueLink, IIssue } from "types";
 
 type Props = {
   isOpen: boolean;
@@ -43,6 +44,7 @@ export const CreateUpdateLinkForm: React.FC<Props> = (props) => {
   const {
     register,
     handleSubmit,
+    control,
     reset,
     formState: { errors, isSubmitting },
   } = useForm({
@@ -122,30 +124,54 @@ export const CreateUpdateLinkForm: React.FC<Props> = (props) => {
         <div className="space-y-5">
           <div className="mt-2 space-y-3">
             <div>
-              <Input
-                id="url"
-                label="URL"
+              <Controller
+                control={control}
                 name="url"
-                type="url"
-                placeholder="https://..."
-                autoComplete="off"
-                error={errors.url}
-                register={register}
-                validations={{
+                rules={{
                   required: "URL is required",
                 }}
+                render={({ field: { value, onChange, ref } }) => (
+                  <>
+                    <label htmlFor="url" className="text-custom-text-200 mb-2">
+                      URL
+                    </label>
+                    <Input
+                      id="url"
+                      name="url"
+                      type="url"
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      hasError={Boolean(errors.url)}
+                      placeholder="https://..."
+                      className="w-full"
+                    />
+                  </>
+                )}
               />
             </div>
             <div>
-              <Input
-                id="title"
-                label="Title (optional)"
+              <Controller
+                control={control}
                 name="title"
-                type="text"
-                placeholder="Enter title"
-                autoComplete="off"
-                error={errors.title}
-                register={register}
+                render={({ field: { value, onChange, ref } }) => (
+                  <>
+                    <label htmlFor="title" className="text-custom-text-200 mb-2">
+                      {`Title (optional)`}
+                    </label>
+                    <Input
+                      id="title"
+                      name="title"
+                      type="text"
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      hasError={Boolean(errors.title)}
+                      placeholder="Enter title"
+                      className="w-full"
+                    />
+                  </>
+                )}
               />
             </div>
           </div>
diff --git a/web/components/workspace/create-workspace-form.tsx b/web/components/workspace/create-workspace-form.tsx
index c7eb584b9ab..9736a08e888 100644
--- a/web/components/workspace/create-workspace-form.tsx
+++ b/web/components/workspace/create-workspace-form.tsx
@@ -9,7 +9,8 @@ import workspaceService from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, Input, PrimaryButton } from "components/ui";
+import { CustomSelect, PrimaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // types
 import { ICurrentUserResponse, IWorkspace } from "types";
 // fetch-keys
@@ -90,11 +91,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
                 message: "Workspace created successfully.",
               });
 
-              mutate<IWorkspace[]>(
-                USER_WORKSPACES,
-                (prevData) => [res, ...(prevData ?? [])],
-                false
-              );
+              mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) => [res, ...(prevData ?? [])], false);
               if (onSubmit) await onSubmit(res);
             })
             .catch(() =>
@@ -128,54 +125,61 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
       <div className="space-y-6 sm:space-y-7">
         <div className="space-y-1 text-sm">
           <label htmlFor="workspaceName">Workspace Name</label>
-          <Input
-            id="workspaceName"
+          <Controller
+            control={control}
             name="name"
-            register={register}
-            autoComplete="off"
-            onChange={(e) =>
-              setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"))
-            }
-            validations={{
+            rules={{
               required: "Workspace name is required",
               validate: (value) =>
-                /^[\w\s-]*$/.test(value) ||
-                `Name can only contain (" "), ( - ), ( _ ) & alphanumeric characters.`,
+                /^[\w\s-]*$/.test(value) || `Name can only contain (" "), ( - ), ( _ ) & alphanumeric characters.`,
               maxLength: {
                 value: 80,
                 message: "Workspace name should not exceed 80 characters",
               },
             }}
-            placeholder="Enter workspace name..."
-            error={errors.name}
+            render={({ field: { value, ref } }) => (
+              <Input
+                id="workspaceName"
+                name="name"
+                type="text"
+                value={value}
+                onChange={(e) => setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"))}
+                ref={ref}
+                hasError={Boolean(errors.name)}
+                placeholder="Enter workspace name..."
+                className="w-full"
+              />
+            )}
           />
         </div>
         <div className="space-y-1 text-sm">
           <label htmlFor="workspaceUrl">Workspace URL</label>
           <div className="flex w-full items-center rounded-md border border-custom-border-200 px-3">
-            <span className="whitespace-nowrap text-sm text-custom-text-200">
-              {window && window.location.host}/
-            </span>
-            <Input
-              id="workspaceUrl"
-              mode="trueTransparent"
-              autoComplete="off"
+            <span className="whitespace-nowrap text-sm text-custom-text-200">{window && window.location.host}/</span>
+            <Controller
+              control={control}
               name="slug"
-              register={register}
-              className="block w-full rounded-md bg-transparent py-2 !px-0 text-sm"
-              validations={{
+              rules={{
                 required: "Workspace URL is required",
               }}
-              onChange={(e) =>
-                /^[a-zA-Z0-9_-]+$/.test(e.target.value)
-                  ? setInvalidSlug(false)
-                  : setInvalidSlug(true)
-              }
+              render={({ field: { value, ref } }) => (
+                <Input
+                  id="workspaceUrl"
+                  name="slug"
+                  type="text"
+                  value={value}
+                  onChange={(e) =>
+                    /^[a-zA-Z0-9_-]+$/.test(e.target.value) ? setInvalidSlug(false) : setInvalidSlug(true)
+                  }
+                  ref={ref}
+                  hasError={Boolean(errors.slug)}
+                  placeholder="Enter workspace name..."
+                  className="block rounded-md bg-transparent py-2 !px-0 text-sm w-full"
+                />
+              )}
             />
           </div>
-          {slugError && (
-            <span className="-mt-3 text-sm text-red-500">Workspace URL is already taken!</span>
-          )}
+          {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>
           )}
diff --git a/web/components/workspace/delete-workspace-modal.tsx b/web/components/workspace/delete-workspace-modal.tsx
index 80cf08cd140..1f55f2d33d7 100644
--- a/web/components/workspace/delete-workspace-modal.tsx
+++ b/web/components/workspace/delete-workspace-modal.tsx
@@ -15,7 +15,8 @@ import useToast from "hooks/use-toast";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { DangerButton, Input, SecondaryButton } from "components/ui";
+import { DangerButton, SecondaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // types
 import type { ICurrentUserResponse, IWorkspace } from "types";
 // fetch-keys
@@ -40,14 +41,13 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
 
   const {
     control,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
     handleSubmit,
     reset,
     watch,
   } = useForm({ defaultValues });
 
-  const canDelete =
-    watch("workspaceName") === data?.name && watch("confirmDelete") === "delete my workspace";
+  const canDelete = watch("workspaceName") === data?.name && watch("confirmDelete") === "delete my workspace";
 
   const handleClose = () => {
     const timer = setTimeout(() => {
@@ -68,10 +68,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
 
         router.push("/");
 
-        mutate<IWorkspace[]>(
-          USER_WORKSPACES,
-          (prevData) => prevData?.filter((workspace) => workspace.id !== data.id)
-        );
+        mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) => prevData?.filter((workspace) => workspace.id !== data.id));
 
         setToastAlert({
           type: "success",
@@ -118,10 +115,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
                 <form onSubmit={handleSubmit(onSubmit)} 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-500/20 p-4">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <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>
@@ -131,28 +125,30 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
                   <span>
                     <p className="text-sm leading-7 text-custom-text-200">
                       Are you sure you want to delete workspace{" "}
-                      <span className="break-words font-semibold">{data?.name}</span>? All of the
-                      data related to the workspace will be permanently removed. This action cannot
-                      be undone.
+                      <span className="break-words 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-custom-text-200">
                     <p className="break-words text-sm ">
-                      Enter the workspace name{" "}
-                      <span className="font-medium text-custom-text-100">{data?.name}</span> to
+                      Enter the workspace name <span className="font-medium text-custom-text-100">{data?.name}</span> to
                       continue:
                     </p>
                     <Controller
                       control={control}
                       name="workspaceName"
-                      render={({ field: { onChange, value } }) => (
+                      render={({ field: { value, onChange, ref } }) => (
                         <Input
+                          id="workspaceName"
+                          name="workspaceName"
                           type="text"
-                          placeholder="Workspace name"
-                          className="mt-2"
-                          onChange={onChange}
                           value={value}
+                          onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.workspaceName)}
+                          placeholder="Workspace name"
+                          className="mt-2 w-full"
                         />
                       )}
                     />
@@ -160,20 +156,23 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
 
                   <div className="text-custom-text-200">
                     <p className="text-sm">
-                      To confirm, type{" "}
-                      <span className="font-medium text-custom-text-100">delete my workspace</span>{" "}
+                      To confirm, type <span className="font-medium text-custom-text-100">delete my workspace</span>{" "}
                       below:
                     </p>
                     <Controller
                       control={control}
                       name="confirmDelete"
-                      render={({ field: { onChange, value } }) => (
+                      render={({ field: { value, onChange, ref } }) => (
                         <Input
+                          id="confirmDelete"
+                          name="confirmDelete"
                           type="text"
-                          placeholder="Enter 'delete my workspace'"
-                          className="mt-2"
-                          onChange={onChange}
                           value={value}
+                          onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.confirmDelete)}
+                          placeholder="Enter 'delete my workspace'"
+                          className="mt-2 w-full"
                         />
                       )}
                     />
diff --git a/web/components/workspace/send-workspace-invitation-modal.tsx b/web/components/workspace/send-workspace-invitation-modal.tsx
index c9d090405a3..025622369b0 100644
--- a/web/components/workspace/send-workspace-invitation-modal.tsx
+++ b/web/components/workspace/send-workspace-invitation-modal.tsx
@@ -11,7 +11,8 @@ import workspaceService from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { CustomSelect, PrimaryButton, SecondaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // icons
 import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
@@ -145,16 +146,11 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
                   }}
                 >
                   <div className="space-y-5">
-                    <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-custom-text-100"
-                    >
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                       Invite people to collaborate
                     </Dialog.Title>
                     <div className="mt-2">
-                      <p className="text-sm text-custom-text-200">
-                        Invite members to work on your workspace.
-                      </p>
+                      <p className="text-sm text-custom-text-200">Invite members to work on your workspace.</p>
                     </div>
 
                     <div className="space-y-4 mb-3">
@@ -171,12 +167,18 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
                                   message: "Invalid Email ID",
                                 },
                               }}
-                              render={({ field }) => (
+                              render={({ field: { value, onChange, ref } }) => (
                                 <>
                                   <Input
-                                    {...field}
-                                    className="text-xs sm:text-sm"
+                                    id={`emails.${index}.email`}
+                                    name={`emails.${index}.email`}
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.emails?.[index]?.email)}
                                     placeholder="Enter their email..."
+                                    className="text-xs sm:text-sm w-full"
                                   />
                                   {errors.emails?.[index]?.email && (
                                     <span className="ml-1 text-red-500 text-xs">
diff --git a/web/components/workspace/views/form.tsx b/web/components/workspace/views/form.tsx
index b16d613990c..f2ab0e98bf2 100644
--- a/web/components/workspace/views/form.tsx
+++ b/web/components/workspace/views/form.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // services
 import issuesService from "services/issues.service";
 
@@ -17,7 +17,8 @@ import { WorkspaceFiltersList } from "components/core";
 import { GlobalSelectFilters } from "components/workspace/views/global-select-filters";
 
 // ui
-import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { Input } from "@plane/ui";
 // helpers
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
@@ -40,13 +41,7 @@ const defaultValues: Partial<IWorkspaceView> = {
   description: "",
 };
 
-export const WorkspaceViewForm: React.FC<Props> = ({
-  handleFormSubmit,
-  handleClose,
-  status,
-  data,
-  preLoadedData,
-}) => {
+export const WorkspaceViewForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data, preLoadedData }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -54,6 +49,7 @@ export const WorkspaceViewForm: React.FC<Props> = ({
     register,
     formState: { errors, isSubmitting },
     handleSubmit,
+    control,
     reset,
     watch,
     setValue,
@@ -113,27 +109,32 @@ export const WorkspaceViewForm: React.FC<Props> = ({
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateView)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
-          {status ? "Update" : "Create"} View
-        </h3>
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{status ? "Update" : "Create"} View</h3>
         <div className="space-y-3">
           <div>
-            <Input
-              id="name"
+            <Controller
+              control={control}
               name="name"
-              type="name"
-              placeholder="Title"
-              autoComplete="off"
-              className="resize-none text-xl"
-              error={errors.name}
-              register={register}
-              validations={{
+              rules={{
                 required: "Title is required",
                 maxLength: {
                   value: 255,
                   message: "Title should be less than 255 characters",
                 },
               }}
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="name"
+                  name="name"
+                  type="name"
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.name)}
+                  placeholder="Title"
+                  className="resize-none text-xl w-full"
+                />
+              )}
             />
           </div>
           <div>
@@ -153,10 +154,7 @@ export const WorkspaceViewForm: React.FC<Props> = ({
                 const key = option.key as keyof typeof filters;
 
                 if (key === "start_date" || key === "target_date") {
-                  const valueExists = checkIfArraysHaveSameElements(
-                    filters?.[key] ?? [],
-                    option.value
-                  );
+                  const valueExists = checkIfArraysHaveSameElements(filters?.[key] ?? [], option.value);
 
                   setValue("query", {
                     ...filters,
diff --git a/web/pages/[workspaceSlug]/me/profile/index.tsx b/web/pages/[workspaceSlug]/me/profile/index.tsx
index dcd682611b1..9ef5a9e1451 100644
--- a/web/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/index.tsx
@@ -16,7 +16,8 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 import { ImagePickerPopover, ImageUploadModal } from "components/core";
 import { SettingsSidebar } from "components/project";
 // ui
-import { CustomSearchSelect, CustomSelect, Input, PrimaryButton, Spinner } from "components/ui";
+import { CustomSearchSelect, CustomSelect, PrimaryButton, Spinner } from "components/ui";
+import { Input } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { UserIcon } from "@heroicons/react/24/outline";
@@ -211,6 +212,7 @@ const Profile: NextPage = () => {
                         onChange={(imageUrl) => {
                           setValue("cover_image", imageUrl);
                         }}
+                        control={control}
                         value={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
                       />
                     )}
@@ -239,42 +241,66 @@ const Profile: NextPage = () => {
               <div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6 px-8">
                 <div className="flex flex-col gap-1">
                   <h4 className="text-sm">First Name</h4>
-                  <Input
+                  <Controller
+                    control={control}
                     name="first_name"
-                    id="first_name"
-                    register={register}
-                    error={errors.first_name}
-                    placeholder="Enter your first name"
-                    className="!px-3 !py-2 rounded-md font-medium"
-                    autoComplete="off"
-                    maxLength={24}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="first_name"
+                        name="first_name"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.first_name)}
+                        placeholder="Enter your first name"
+                        className="rounded-md font-medium w-full"
+                      />
+                    )}
                   />
                 </div>
 
                 <div className="flex flex-col gap-1">
                   <h4 className="text-sm">Last Name</h4>
-                  <Input
+
+                  <Controller
+                    control={control}
                     name="last_name"
-                    register={register}
-                    error={errors.last_name}
-                    id="last_name"
-                    placeholder="Enter your last name"
-                    autoComplete="off"
-                    className="!px-3 !py-2 rounded-md font-medium"
-                    maxLength={24}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="last_name"
+                        name="last_name"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.last_name)}
+                        placeholder="Enter your last name"
+                        className="rounded-md font-medium w-full"
+                      />
+                    )}
                   />
                 </div>
 
                 <div className="flex flex-col gap-1">
                   <h4 className="text-sm">Email</h4>
-                  <Input
-                    id="email"
+                  <Controller
+                    control={control}
                     name="email"
-                    autoComplete="off"
-                    register={register}
-                    className="!px-3 !py-2 rounded-md font-medium"
-                    error={errors.name}
-                    disabled
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="email"
+                        name="email"
+                        type="email"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.email)}
+                        placeholder="Enter your last name"
+                        className="rounded-md font-medium w-full"
+                        disabled
+                      />
+                    )}
                   />
                 </div>
 
@@ -308,16 +334,10 @@ const Profile: NextPage = () => {
 
                 <div className="flex flex-col gap-1">
                   <h4 className="text-sm">Display name </h4>
-
-                  <Input
-                    id="display_name"
+                  <Controller
+                    control={control}
                     name="display_name"
-                    autoComplete="off"
-                    register={register}
-                    error={errors.display_name}
-                    className="w-full"
-                    placeholder="Enter your display name"
-                    validations={{
+                    rules={{
                       required: "Display name is required.",
                       validate: (value) => {
                         if (value.trim().length < 1) return "Display name can't be empty.";
@@ -333,6 +353,19 @@ const Profile: NextPage = () => {
                         return true;
                       },
                     }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="display_name"
+                        name="display_name"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.display_name)}
+                        placeholder="Enter your display name"
+                        className="w-full"
+                      />
+                    )}
                   />
                 </div>
 
diff --git a/web/pages/[workspaceSlug]/settings/index.tsx b/web/pages/[workspaceSlug]/settings/index.tsx
index 2e3c31a1ce1..567fb0a0416 100644
--- a/web/pages/[workspaceSlug]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/index.tsx
@@ -20,7 +20,8 @@ import { DeleteWorkspaceModal } from "components/workspace";
 import { SettingsSidebar } from "components/project";
 // ui
 import { Disclosure, Transition } from "@headlessui/react";
-import { Spinner, Input, CustomSelect, DangerButton, PrimaryButton, Icon } from "components/ui";
+import { Spinner, CustomSelect, DangerButton, PrimaryButton, Icon } from "components/ui";
+import { Input } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { Pencil } from "lucide-react";
@@ -232,21 +233,30 @@ const WorkspaceSettings: NextPage = () => {
               <div className="grid grid-col grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 items-center justify-between gap-10 w-full">
                 <div className="flex flex-col gap-1 ">
                   <h4 className="text-sm">Workspace Name</h4>
-                  <Input
-                    id="name"
+                  <Controller
+                    control={control}
                     name="name"
-                    placeholder="Name"
-                    autoComplete="off"
-                    register={register}
-                    error={errors.name}
-                    validations={{
+                    rules={{
                       required: "Name is required",
                       maxLength: {
                         value: 80,
                         message: "Workspace name should not exceed 80 characters",
                       },
                     }}
-                    disabled={!isAdmin}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="name"
+                        name="name"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.name)}
+                        placeholder="Name"
+                        className="rounded-md font-medium w-full"
+                        disabled={!isAdmin}
+                      />
+                    )}
                   />
                 </div>
 
@@ -276,18 +286,25 @@ const WorkspaceSettings: NextPage = () => {
 
                 <div className="flex flex-col gap-1 ">
                   <h4 className="text-sm">Workspace URL</h4>
-                  <Input
-                    id="url"
+                  <Controller
+                    control={control}
                     name="url"
-                    autoComplete="off"
-                    register={register}
-                    error={errors.url}
-                    className="w-full"
-                    value={`${
-                      typeof window !== "undefined" &&
-                      window.location.origin.replace("http://", "").replace("https://", "")
-                    }/${activeWorkspace.slug}`}
-                    disabled
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="url"
+                        name="url"
+                        type="url"
+                        value={`${
+                          typeof window !== "undefined" &&
+                          window.location.origin.replace("http://", "").replace("https://", "")
+                        }/${activeWorkspace.slug}`}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.url)}
+                        className="w-full"
+                        disabled
+                      />
+                    )}
                   />
                 </div>
               </div>
diff --git a/web/pages/[workspaceSlug]/workspace-views/index.tsx b/web/pages/[workspaceSlug]/workspace-views/index.tsx
index 5e1ef61a875..968e735520a 100644
--- a/web/pages/[workspaceSlug]/workspace-views/index.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/index.tsx
@@ -16,7 +16,8 @@ import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/wo
 import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
 import { DeleteWorkspaceViewModal } from "components/workspace/views/delete-workspace-view-modal";
 // ui
-import { EmptyState, Input, Loader, PrimaryButton } from "components/ui";
+import { EmptyState, Loader, PrimaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // icons
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { PlusIcon } from "lucide-react";
@@ -74,9 +75,7 @@ const WorkspaceViews: NextPage = () => {
   const filteredDefaultOptions =
     query === ""
       ? defaultWorkspaceViewsList
-      : defaultWorkspaceViewsList?.filter((option) =>
-          option.label.toLowerCase().includes(query.toLowerCase())
-        );
+      : defaultWorkspaceViewsList?.filter((option) => option.label.toLowerCase().includes(query.toLowerCase()));
 
   const filteredOptions =
     query === ""
@@ -104,10 +103,7 @@ const WorkspaceViews: NextPage = () => {
         <div className="flex items-center gap-2">
           <WorkspaceIssuesViewOptions />
 
-          <PrimaryButton
-            className="flex items-center gap-2"
-            onClick={() => setCreateUpdateViewModal(true)}
-          >
+          <PrimaryButton className="flex items-center gap-2" onClick={() => setCreateUpdateViewModal(true)}>
             <PlusIcon className="h-4 w-4" />
             New View
           </PrimaryButton>
@@ -122,21 +118,20 @@ const WorkspaceViews: NextPage = () => {
         }}
         data={selectedViewToUpdate}
       />
-      <DeleteWorkspaceViewModal
-        isOpen={deleteViewModal}
-        data={selectedViewToDelete}
-        setIsOpen={setDeleteViewModal}
-      />
+      <DeleteWorkspaceViewModal isOpen={deleteViewModal} data={selectedViewToDelete} setIsOpen={setDeleteViewModal} />
       <div className="flex flex-col">
         <div className="h-full w-full flex flex-col overflow-hidden">
           <div className="flex items-center gap-2.5 w-full px-5 py-3 border-b border-custom-border-200">
             <MagnifyingGlassIcon className="h-4 w-4 text-custom-text-200" />
             <Input
-              className="w-full bg-transparent text-xs leading-5 text-custom-text-200 placeholder:text-custom-text-400 !p-0 focus:outline-none"
+              id="search"
+              name="search"
+              type="text"
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               placeholder="Search"
-              mode="trueTransparent"
+              className="w-full bg-transparent text-xs leading-5 text-custom-text-200 placeholder:text-custom-text-400 !p-0 focus:outline-none"
+              mode="true-transparent"
             />
           </div>
         </div>
@@ -154,9 +149,7 @@ const WorkspaceViews: NextPage = () => {
                         <PhotoFilterOutlined className="!text-base !leading-6" />
                       </div>
                       <div className="flex flex-col">
-                        <p className="truncate text-sm leading-4 font-medium">
-                          {truncateText(option.label, 75)}
-                        </p>
+                        <p className="truncate text-sm leading-4 font-medium">{truncateText(option.label, 75)}</p>
                       </div>
                     </div>
                   </div>
diff --git a/web/pages/reset-password.tsx b/web/pages/reset-password.tsx
index fa17d2333e2..4624d9bef49 100644
--- a/web/pages/reset-password.tsx
+++ b/web/pages/reset-password.tsx
@@ -6,7 +6,7 @@ import Image from "next/image";
 // next-themes
 import { useTheme } from "next-themes";
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // hooks
 import useToast from "hooks/use-toast";
 // services
@@ -14,7 +14,8 @@ import userService from "services/user.service";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // ui
-import { Input, PrimaryButton, Spinner } from "components/ui";
+import { PrimaryButton, Spinner } from "components/ui";
+import { Input } from "@plane/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // types
@@ -38,6 +39,7 @@ const ResetPasswordPage: NextPage = () => {
   const {
     register,
     handleSubmit,
+    control,
     formState: { errors, isSubmitting },
   } = useForm<FormData>();
 
@@ -73,9 +75,7 @@ const ResetPasswordPage: NextPage = () => {
         setToastAlert({
           type: "error",
           title: "Error!",
-          message:
-            err?.error ||
-            "Something went wrong. Please try again later or contact the support team.",
+          message: err?.error || "Something went wrong. Please try again later or contact the support team.",
         })
       );
   };
@@ -110,47 +110,54 @@ const ResetPasswordPage: NextPage = () => {
       </>
       <div className="grid place-items-center h-full w-full overflow-y-auto py-5 px-7">
         <div className="w-full">
-          <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
-            Reset your password
-          </h1>
-
-          <form
-            className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
-            onSubmit={handleSubmit(onSubmit)}
-          >
+          <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">Reset your password</h1>
+
+          <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}>
             <div className="space-y-1">
-              <Input
-                id="password"
-                type="password"
+              <Controller
+                control={control}
                 name="password"
-                register={register}
-                validations={{
+                rules={{
                   required: "Password is required",
                 }}
-                error={errors.password}
-                placeholder="Enter new password..."
-                className="border-custom-border-300 h-[46px]"
+                render={({ field: { value, onChange, ref } }) => (
+                  <Input
+                    id="password"
+                    name="password"
+                    type="password"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.password)}
+                    placeholder="Enter new password..."
+                    className="border-custom-border-300 h-[46px] w-full"
+                  />
+                )}
               />
             </div>
             <div className="space-y-1">
-              <Input
-                id="confirmPassword"
-                type="password"
+              <Controller
+                control={control}
                 name="confirmPassword"
-                register={register}
-                validations={{
-                  required: "Password confirmation is required",
+                rules={{
+                  required: "Password is required",
                 }}
-                error={errors.confirmPassword}
-                placeholder="Confirm new password..."
-                className="border-custom-border-300 h-[46px]"
+                render={({ field: { value, onChange, ref } }) => (
+                  <Input
+                    id="confirmPassword"
+                    name="confirmPassword"
+                    type="password"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.confirmPassword)}
+                    placeholder="Confirm new password..."
+                    className="border-custom-border-300 h-[46px] w-full"
+                  />
+                )}
               />
             </div>
-            <PrimaryButton
-              type="submit"
-              className="w-full text-center h-[46px]"
-              loading={isSubmitting}
-            >
+            <PrimaryButton type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
               {isSubmitting ? "Resetting..." : "Reset"}
             </PrimaryButton>
           </form>

From 6880f4cba4d34b77e22a4246c044d6cff4d3c0e7 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 9 Oct 2023 11:34:43 +0530
Subject: [PATCH 02/15] chore: swap textarea component with plane/ui package

---
 packages/ui/dist/index.d.ts                   | 23 ++-----
 packages/ui/dist/index.js                     | 28 +++------
 packages/ui/dist/index.mjs                    | 28 +++------
 packages/ui/src/form-fields/input.tsx         | 30 +++------
 packages/ui/src/form-fields/textarea.tsx      | 19 ++----
 .../create-update-analytics-modal.tsx         | 24 ++++---
 .../create-update-estimate-modal.tsx          | 23 ++++---
 web/components/issues/description-form.tsx    | 63 +++++++++----------
 web/components/modules/form.tsx               | 23 ++++---
 web/components/pages/create-block.tsx         | 31 +++++----
 .../pages/create-update-block-inline.tsx      | 27 +++++---
 web/components/pages/single-page-block.tsx    | 17 +++--
 .../project/create-project-modal.tsx          | 31 +++++----
 web/components/project/form.tsx               | 26 +++++---
 web/components/states/create-state-modal.tsx  | 25 +++++---
 web/components/views/form.tsx                 | 23 ++++---
 .../web-view/issue-web-view-form.tsx          | 54 ++++++++--------
 web/components/workspace/views/form.tsx       | 23 ++++---
 .../projects/[projectId]/pages/[pageId].tsx   | 32 ++++++----
 19 files changed, 280 insertions(+), 270 deletions(-)

diff --git a/packages/ui/dist/index.d.ts b/packages/ui/dist/index.d.ts
index 4f7437a1d38..b4241e33bf1 100644
--- a/packages/ui/dist/index.d.ts
+++ b/packages/ui/dist/index.d.ts
@@ -3,30 +3,15 @@ import { FC } from 'react';
 
 declare const Button: () => JSX.Element;
 
-interface InputProps {
-    type: string;
-    id: string;
-    value: string;
-    name: string;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    className?: string;
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     mode?: "primary" | "transparent" | "true-transparent";
-    size?: "sm" | "md";
+    inputSize?: "sm" | "md";
     hasError?: boolean;
-    placeholder?: string;
-    disabled?: boolean;
+    className?: string;
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
-interface TextAreaProps {
-    id: string;
-    name: string;
-    placeholder?: string;
-    value?: string;
-    rows?: number;
-    cols?: number;
-    disabled?: boolean;
-    onChange: () => void;
+interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     mode?: "primary" | "transparent";
     hasError?: boolean;
     className?: string;
diff --git a/packages/ui/dist/index.js b/packages/ui/dist/index.js
index 57d360c3a03..b37e4cb1fe8 100644
--- a/packages/ui/dist/index.js
+++ b/packages/ui/dist/index.js
@@ -45,26 +45,20 @@ var Input = React2.forwardRef((props, ref) => {
   const {
     id,
     type,
-    value,
     name,
-    onChange,
-    className = "",
     mode = "primary",
-    size = "sm",
+    inputSize = "sm",
     hasError = false,
-    placeholder = "",
-    disabled = false
+    className = "",
+    ...rest
   } = props;
   return /* @__PURE__ */ React2.createElement("input", {
     id,
     ref,
     type,
-    value,
     name,
-    onChange,
-    placeholder,
-    disabled,
-    className: `block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary" : mode === "true-transparent" ? "rounded border-none bg-transparent ring-0" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-500/20" : ""} ${size === "sm" ? "px-3 py-2" : size === "md" ? "p-3" : ""} ${className}`
+    className: `block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary" : mode === "true-transparent" ? "rounded border-none bg-transparent ring-0" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-500/20" : ""} ${inputSize === "sm" ? "px-3 py-2" : inputSize === "md" ? "p-3" : ""} ${className}`,
+    ...rest
   });
 });
 Input.displayName = "form-input-field";
@@ -85,15 +79,13 @@ var TextArea = React3.forwardRef(
     const {
       id,
       name,
-      placeholder = "",
       value = "",
       rows = 1,
       cols = 1,
-      disabled,
-      onChange,
       mode = "primary",
       hasError = false,
-      className = ""
+      className = "",
+      ...rest
     } = props;
     const textAreaRef = React3.useRef(ref);
     ref && useAutoSizeTextArea(textAreaRef == null ? void 0 : textAreaRef.current, value);
@@ -101,13 +93,11 @@ var TextArea = React3.forwardRef(
       id,
       name,
       ref: textAreaRef,
-      placeholder,
       value,
       rows,
       cols,
-      disabled,
-      onChange,
-      className: `no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-100" : ""} ${className}`
+      className: `no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-100" : ""} ${className}`,
+      ...rest
     });
   }
 );
diff --git a/packages/ui/dist/index.mjs b/packages/ui/dist/index.mjs
index 42cab7cbd13..7b3466c5d74 100644
--- a/packages/ui/dist/index.mjs
+++ b/packages/ui/dist/index.mjs
@@ -10,26 +10,20 @@ var Input = React2.forwardRef((props, ref) => {
   const {
     id,
     type,
-    value,
     name,
-    onChange,
-    className = "",
     mode = "primary",
-    size = "sm",
+    inputSize = "sm",
     hasError = false,
-    placeholder = "",
-    disabled = false
+    className = "",
+    ...rest
   } = props;
   return /* @__PURE__ */ React2.createElement("input", {
     id,
     ref,
     type,
-    value,
     name,
-    onChange,
-    placeholder,
-    disabled,
-    className: `block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary" : mode === "true-transparent" ? "rounded border-none bg-transparent ring-0" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-500/20" : ""} ${size === "sm" ? "px-3 py-2" : size === "md" ? "p-3" : ""} ${className}`
+    className: `block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary" : mode === "true-transparent" ? "rounded border-none bg-transparent ring-0" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-500/20" : ""} ${inputSize === "sm" ? "px-3 py-2" : inputSize === "md" ? "p-3" : ""} ${className}`,
+    ...rest
   });
 });
 Input.displayName = "form-input-field";
@@ -50,15 +44,13 @@ var TextArea = React3.forwardRef(
     const {
       id,
       name,
-      placeholder = "",
       value = "",
       rows = 1,
       cols = 1,
-      disabled,
-      onChange,
       mode = "primary",
       hasError = false,
-      className = ""
+      className = "",
+      ...rest
     } = props;
     const textAreaRef = React3.useRef(ref);
     ref && useAutoSizeTextArea(textAreaRef == null ? void 0 : textAreaRef.current, value);
@@ -66,13 +58,11 @@ var TextArea = React3.forwardRef(
       id,
       name,
       ref: textAreaRef,
-      placeholder,
       value,
       rows,
       cols,
-      disabled,
-      onChange,
-      className: `no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-100" : ""} ${className}`
+      className: `no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-100" : ""} ${className}`,
+      ...rest
     });
   }
 );
diff --git a/packages/ui/src/form-fields/input.tsx b/packages/ui/src/form-fields/input.tsx
index 5a9f9843e91..648b78aa73b 100644
--- a/packages/ui/src/form-fields/input.tsx
+++ b/packages/ui/src/form-fields/input.tsx
@@ -1,32 +1,23 @@
 import * as React from "react";
 
-export interface InputProps {
-  type: string;
-  id: string;
-  value: string;
-  name: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  className?: string;
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
   mode?: "primary" | "transparent" | "true-transparent";
-  size?: "sm" | "md";
+  inputSize?: "sm" | "md";
   hasError?: boolean;
-  placeholder?: string;
-  disabled?: boolean;
+  className?: string;
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const {
     id,
     type,
-    value,
     name,
-    onChange,
-    className = "",
     mode = "primary",
-    size = "sm",
+    inputSize = "sm",
     hasError = false,
-    placeholder = "",
-    disabled = false,
+    className = "",
+    ...rest
   } = props;
 
   return (
@@ -34,11 +25,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
       id={id}
       ref={ref}
       type={type}
-      value={value}
       name={name}
-      onChange={onChange}
-      placeholder={placeholder}
-      disabled={disabled}
       className={`block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${
         mode === "primary"
           ? "rounded-md border border-custom-border-200"
@@ -50,8 +37,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
       } ${hasError ? "border-red-500" : ""} ${
         hasError && mode === "primary" ? "bg-red-500/20" : ""
       } ${
-        size === "sm" ? "px-3 py-2" : size === "md" ? "p-3" : ""
+        inputSize === "sm" ? "px-3 py-2" : inputSize === "md" ? "p-3" : ""
       } ${className}`}
+      {...rest}
     />
   );
 });
diff --git a/packages/ui/src/form-fields/textarea.tsx b/packages/ui/src/form-fields/textarea.tsx
index e9b748230d2..93a850059f8 100644
--- a/packages/ui/src/form-fields/textarea.tsx
+++ b/packages/ui/src/form-fields/textarea.tsx
@@ -1,14 +1,7 @@
 import * as React from "react";
 
-export interface TextAreaProps {
-  id: string;
-  name: string;
-  placeholder?: string;
-  value?: string;
-  rows?: number;
-  cols?: number;
-  disabled?: boolean;
-  onChange: () => void;
+export interface TextAreaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   mode?: "primary" | "transparent";
   hasError?: boolean;
   className?: string;
@@ -37,15 +30,13 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
     const {
       id,
       name,
-      placeholder = "",
       value = "",
       rows = 1,
       cols = 1,
-      disabled,
-      onChange,
       mode = "primary",
       hasError = false,
       className = "",
+      ...rest
     } = props;
 
     const textAreaRef = React.useRef<any>(ref);
@@ -57,12 +48,9 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
         id={id}
         name={name}
         ref={textAreaRef}
-        placeholder={placeholder}
         value={value}
         rows={rows}
         cols={cols}
-        disabled={disabled}
-        onChange={onChange}
         className={`no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${
           mode === "primary"
             ? "rounded-md border border-custom-border-200"
@@ -72,6 +60,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
         } ${hasError ? "border-red-500" : ""} ${
           hasError && mode === "primary" ? "bg-red-100" : ""
         } ${className}`}
+        {...rest}
       />
     );
   }
diff --git a/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx b/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx
index 3913e3cd882..029d268ff3d 100644
--- a/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx
+++ b/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx
@@ -11,8 +11,8 @@ import analyticsService from "services/analytics.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { PrimaryButton, SecondaryButton, TextArea } from "components/ui";
-import { Input } from "@plane/ui";
+import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Input, TextArea } from "@plane/ui";
 // types
 import { IAnalyticsParams, ISaveAnalyticsFormData } from "types";
 
@@ -40,7 +40,6 @@ export const CreateUpdateAnalyticsModal: React.FC<Props> = ({ isOpen, handleClos
   const { setToastAlert } = useToast();
 
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
     control,
@@ -140,13 +139,20 @@ export const CreateUpdateAnalyticsModal: React.FC<Props> = ({ isOpen, handleClos
                           />
                         )}
                       />
-                      <TextArea
-                        id="description"
+                      <Controller
                         name="description"
-                        placeholder="Description"
-                        className="mt-3 h-32 resize-none text-sm"
-                        error={errors.description}
-                        register={register}
+                        control={control}
+                        render={({ field: { value, onChange } }) => (
+                          <TextArea
+                            id="description"
+                            name="description"
+                            placeholder="Description"
+                            className="mt-3 h-32 resize-none text-sm"
+                            hasError={Boolean(errors?.description)}
+                            value={value}
+                            onChange={onChange}
+                          />
+                        )}
                       />
                     </div>
                   </div>
diff --git a/web/components/estimates/create-update-estimate-modal.tsx b/web/components/estimates/create-update-estimate-modal.tsx
index 520367658e1..5c512bbd4e3 100644
--- a/web/components/estimates/create-update-estimate-modal.tsx
+++ b/web/components/estimates/create-update-estimate-modal.tsx
@@ -13,8 +13,8 @@ import estimatesService from "services/project_estimates.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { PrimaryButton, SecondaryButton, TextArea } from "components/ui";
-import { Input } from "@plane/ui";
+import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Input, TextArea } from "@plane/ui";
 // helpers
 import { checkDuplicates } from "helpers/array.helper";
 // types
@@ -53,7 +53,6 @@ const defaultValues: Partial<FormValues> = {
 
 export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data, isOpen, user }) => {
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
     control,
@@ -274,12 +273,20 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                         />
                       </div>
                       <div>
-                        <TextArea
-                          id="description"
+                        <Controller
                           name="description"
-                          placeholder="Description"
-                          className="h-32 resize-none text-sm"
-                          register={register}
+                          control={control}
+                          render={({ field: { value, onChange } }) => (
+                            <TextArea
+                              id="description"
+                              name="description"
+                              value={value}
+                              placeholder="Description"
+                              onChange={onChange}
+                              className="mt-3 h-32 resize-none text-sm"
+                              hasError={Boolean(errors?.description)}
+                            />
+                          )}
                         />
                       </div>
                       <div className="grid grid-cols-3 gap-3">
diff --git a/web/components/issues/description-form.tsx b/web/components/issues/description-form.tsx
index 54ea0a9760d..cacfc7a6db6 100644
--- a/web/components/issues/description-form.tsx
+++ b/web/components/issues/description-form.tsx
@@ -6,7 +6,7 @@ import { Controller, useForm } from "react-hook-form";
 import useReloadConfirmations from "hooks/use-reload-confirmation";
 import { useDebouncedCallback } from "use-debounce";
 // components
-import { TextArea } from "components/ui";
+import { TextArea } from "@plane/ui";
 import { TipTapEditor } from "components/tiptap";
 // types
 import { IIssue } from "types";
@@ -26,12 +26,7 @@ export interface IssueDetailsProps {
   isAllowed: boolean;
 }
 
-export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
-  issue,
-  handleFormSubmit,
-  workspaceSlug,
-  isAllowed,
-}) => {
+export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormSubmit, workspaceSlug, isAllowed }) => {
   const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
   const [characterLimit, setCharacterLimit] = useState(false);
 
@@ -93,32 +88,36 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
     <div className="relative">
       <div className="relative">
         {isAllowed ? (
-          <TextArea
-            id="name"
+          <Controller
             name="name"
-            placeholder="Enter issue name"
-            register={register}
-            onFocus={() => setCharacterLimit(true)}
-            onChange={(e) => {
-              setCharacterLimit(false);
-              setIsSubmitting("submitting");
-              debouncedTitleSave();
-            }}
-            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-custom-primary"
-            role="textbox"
-            disabled={!isAllowed}
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <TextArea
+                id="name"
+                name="name"
+                value={value}
+                placeholder="Enter issue name"
+                onFocus={() => setCharacterLimit(true)}
+                onChange={(e) => {
+                  setCharacterLimit(false);
+                  setIsSubmitting("submitting");
+                  debouncedTitleSave();
+                  onChange(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-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
+                hasError={Boolean(errors?.description)}
+                role="textbox"
+                disabled={!isAllowed}
+              />
+            )}
           />
         ) : (
           <h4 className="break-words text-2xl font-semibold">{issue.name}</h4>
         )}
         {characterLimit && isAllowed && (
           <div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 text-custom-text-200 p-0.5 text-xs">
-            <span
-              className={`${
-                watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
-              }`}
-            >
+            <span className={`${watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""}`}>
               {watch("name").length}
             </span>
             /255
@@ -136,9 +135,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
             return (
               <TipTapEditor
                 value={
-                  !value ||
-                  value === "" ||
-                  (typeof value === "object" && Object.keys(value).length === 0)
+                  !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
                     ? "<p></p>"
                     : value
                 }
@@ -146,17 +143,13 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
                 debouncedUpdatesEnabled={true}
                 setShouldShowAlert={setShowAlert}
                 setIsSubmitting={setIsSubmitting}
-                customClassName={
-                  isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"
-                }
+                customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
                 noBorder={!isAllowed}
                 onChange={(description: Object, description_html: string) => {
                   setShowAlert(true);
                   setIsSubmitting("submitting");
                   onChange(description_html);
-                  handleSubmit(handleDescriptionFormSubmit)().finally(() =>
-                    setIsSubmitting("submitted")
-                  );
+                  handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
                 }}
                 editable={isAllowed}
               />
diff --git a/web/components/modules/form.tsx b/web/components/modules/form.tsx
index a2011795d2d..320b416fb8e 100644
--- a/web/components/modules/form.tsx
+++ b/web/components/modules/form.tsx
@@ -5,8 +5,8 @@ import { Controller, useForm } from "react-hook-form";
 // components
 import { ModuleLeadSelect, ModuleMembersSelect, ModuleStatusSelect } from "components/modules";
 // ui
-import { DateSelect, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
-import { Input } from "@plane/ui";
+import { DateSelect, PrimaryButton, SecondaryButton } from "components/ui";
+import { Input, TextArea } from "@plane/ui";
 // types
 import { IModule } from "types";
 
@@ -93,13 +93,20 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
             />
           </div>
           <div>
-            <TextArea
-              id="description"
+            <Controller
               name="description"
-              placeholder="Description"
-              className="h-32 resize-none text-sm"
-              error={errors.description}
-              register={register}
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <TextArea
+                  id="description"
+                  name="description"
+                  value={value}
+                  placeholder="Description"
+                  onChange={onChange}
+                  className="h-32 resize-none text-sm"
+                  hasError={Boolean(errors?.description)}
+                />
+              )}
             />
           </div>
           <div className="flex flex-wrap items-center gap-2">
diff --git a/web/components/pages/create-block.tsx b/web/components/pages/create-block.tsx
index 6f6159ad037..69a1b96bf7d 100644
--- a/web/components/pages/create-block.tsx
+++ b/web/components/pages/create-block.tsx
@@ -7,14 +7,14 @@ import { mutate } from "swr";
 import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
 
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // services
 import pagesService from "services/page.service";
 
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { TextArea } from "components/ui";
+import { TextArea } from "@plane/ui";
 // types
 import { ICurrentUserResponse, IPageBlock } from "types";
 // fetch-keys
@@ -44,7 +44,7 @@ export const CreateBlock: React.FC<Props> = ({ user }) => {
     setValue,
     setFocus,
     reset,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
   } = useForm<IPageBlock>({
     defaultValues,
   });
@@ -99,16 +99,23 @@ export const CreateBlock: React.FC<Props> = ({ user }) => {
         onSubmit={handleSubmit(createPageBlock)}
       >
         <div className="flex min-h-full w-full">
-          <TextArea
-            id="name"
+          <Controller
             name="name"
-            placeholder="Title"
-            register={register}
-            className="min-h-full block w-full resize-none overflow-hidden border-none bg-transparent px-1 py-1 text-sm font-medium"
-            role="textbox"
-            onKeyDown={handleKeyDown}
-            maxLength={255}
-            noPadding
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <TextArea
+                id="name"
+                name="name"
+                value={value}
+                placeholder="Title"
+                role="textbox"
+                onKeyDown={handleKeyDown}
+                maxLength={255}
+                onChange={onChange}
+                className="min-h-full block w-full resize-none overflow-hidden border-none bg-transparent !px-1 !py-1 text-sm font-medium"
+                hasError={Boolean(errors?.name)}
+              />
+            )}
           />
         </div>
 
diff --git a/web/components/pages/create-update-block-inline.tsx b/web/components/pages/create-update-block-inline.tsx
index 14e5c283e0d..9452ba5925a 100644
--- a/web/components/pages/create-update-block-inline.tsx
+++ b/web/components/pages/create-update-block-inline.tsx
@@ -12,7 +12,8 @@ import useToast from "hooks/use-toast";
 // components
 import { GptAssistantModal } from "components/core";
 import { TipTapEditor } from "components/tiptap";
-import { PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { PrimaryButton, SecondaryButton } from "components/ui";
+import { TextArea } from "@plane/ui";
 // types
 import { ICurrentUserResponse, IPageBlock } from "types";
 // fetch-keys
@@ -59,7 +60,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
     setValue,
     setFocus,
     reset,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
   } = useForm<IPageBlock>({
     defaultValues,
   });
@@ -261,14 +262,22 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
       >
         <div className="pt-2">
           <div className="flex justify-between">
-            <TextArea
-              id="name"
+            <Controller
               name="name"
-              placeholder="Title"
-              register={register}
-              className="min-h-10 font medium block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-base"
-              autoComplete="off"
-              maxLength={255}
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <TextArea
+                  id="name"
+                  name="name"
+                  value={value}
+                  placeholder="Title"
+                  onChange={onChange}
+                  className="min-h-10 font medium block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-base"
+                  autoComplete="off"
+                  maxLength={255}
+                  hasError={Boolean(errors?.name)}
+                />
+              )}
             />
           </div>
           <div className="page-block-section relative -mt-2 text-custom-text-200">
diff --git a/web/components/pages/single-page-block.tsx b/web/components/pages/single-page-block.tsx
index 5d784d98a49..ac2ea925acd 100644
--- a/web/components/pages/single-page-block.tsx
+++ b/web/components/pages/single-page-block.tsx
@@ -21,7 +21,8 @@ import { GptAssistantModal } from "components/core";
 import { CreateUpdateBlockInline } from "components/pages";
 import { TipTapEditor } from "components/tiptap";
 // ui
-import { CustomMenu, TextArea } from "components/ui";
+import { CustomMenu } from "components/ui";
+import { TextArea } from "@plane/ui";
 // icons
 import { LayerDiagonalIcon } from "components/icons";
 import { ArrowPathIcon, LinkIcon } from "@heroicons/react/20/solid";
@@ -63,7 +64,14 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, showBl
 
   const { setToastAlert } = useToast();
 
-  const { handleSubmit, watch, reset, setValue, register } = useForm<IPageBlock>({
+  const {
+    handleSubmit,
+    watch,
+    reset,
+    setValue,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm<IPageBlock>({
     defaultValues: {
       name: "",
       description: {},
@@ -414,10 +422,11 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, showBl
                       </div>
                     )}
                     <TextArea
+                      id="blockName"
                       name="blockName"
                       value={block.name}
-                      className="min-h-[20px] block w-full resize-none overflow-hidden border-none bg-transparent text-sm text-custom-text-100"
-                      noPadding
+                      placeholder="Title"
+                      className="min-h-[20px] block w-full resize-none overflow-hidden border-none bg-transparent text-sm text-custom-text-100 !p-0"
                     />
                   </div>
 
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index 3418bee32ee..bd45744135e 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -12,16 +12,8 @@ import useToast from "hooks/use-toast";
 import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
 import useWorkspaceMembers from "hooks/use-workspace-members";
 // ui
-import {
-  TextArea,
-  CustomSelect,
-  PrimaryButton,
-  SecondaryButton,
-  Icon,
-  Avatar,
-  CustomSearchSelect,
-} from "components/ui";
-import { Input } from "@plane/ui";
+import { CustomSelect, PrimaryButton, SecondaryButton, Icon, Avatar, CustomSearchSelect } from "components/ui";
+import { Input, TextArea } from "@plane/ui";
 // components
 import { ImagePickerPopover } from "components/core";
 import EmojiIconPicker from "components/emoji-icon-picker";
@@ -318,13 +310,20 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                         />
                       </div>
                       <div className="md:col-span-4">
-                        <TextArea
-                          id="description"
+                        <Controller
                           name="description"
-                          className="text-sm !h-24"
-                          placeholder="Description..."
-                          error={errors.description}
-                          register={register}
+                          control={control}
+                          render={({ field: { value, onChange } }) => (
+                            <TextArea
+                              id="description"
+                              name="description"
+                              value={value}
+                              placeholder="Description..."
+                              onChange={onChange}
+                              className="text-sm !h-24"
+                              hasError={Boolean(errors?.name)}
+                            />
+                          )}
                         />
                       </div>
                     </div>
diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
index 92146337fcf..27f1a21bb20 100644
--- a/web/components/project/form.tsx
+++ b/web/components/project/form.tsx
@@ -3,8 +3,8 @@ import { Controller, useForm } from "react-hook-form";
 // components
 import EmojiIconPicker from "components/emoji-icon-picker";
 import { ImagePickerPopover } from "components/core";
-import { TextArea, CustomSelect, PrimaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { CustomSelect, PrimaryButton } from "components/ui";
+import { Input, TextArea } from "@plane/ui";
 // types
 import { IProject, IWorkspace } from "types";
 // helpers
@@ -188,15 +188,21 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
 
         <div className="flex flex-col gap-1">
           <h4 className="text-sm">Description</h4>
-          <TextArea
-            id="description"
+          <Controller
             name="description"
-            error={errors.description}
-            register={register}
-            placeholder="Enter project description"
-            validations={{}}
-            className="min-h-[102px] text-sm"
-            disabled={!isAdmin}
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <TextArea
+                id="description"
+                name="description"
+                value={value}
+                placeholder="Enter project description"
+                onChange={onChange}
+                className="min-h-[102px] text-sm"
+                hasError={Boolean(errors?.description)}
+                disabled={!isAdmin}
+              />
+            )}
           />
         </div>
 
diff --git a/web/components/states/create-state-modal.tsx b/web/components/states/create-state-modal.tsx
index fc955b672e9..12cf445ab48 100644
--- a/web/components/states/create-state-modal.tsx
+++ b/web/components/states/create-state-modal.tsx
@@ -15,8 +15,8 @@ import stateService from "services/project_state.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
-import { Input } from "@plane/ui";
+import { CustomSelect, PrimaryButton, SecondaryButton } from "components/ui";
+import { Input, TextArea } from "@plane/ui";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 // types
@@ -235,13 +235,22 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                         </Popover>
                       </div>
                       <div>
-                        <TextArea
-                          id="description"
+                        <label htmlFor="description" className="mb-2 text-custom-text-200">
+                          Description
+                        </label>
+                        <Controller
                           name="description"
-                          label="Description"
-                          placeholder="Enter description"
-                          error={errors.description}
-                          register={register}
+                          control={control}
+                          render={({ field: { value, onChange } }) => (
+                            <TextArea
+                              id="description"
+                              name="description"
+                              value={value}
+                              placeholder="Enter description"
+                              onChange={onChange}
+                              hasError={Boolean(errors?.description)}
+                            />
+                          )}
                         />
                       </div>
                     </div>
diff --git a/web/components/views/form.tsx b/web/components/views/form.tsx
index 9a6c86d6d7f..13cf67d42b7 100644
--- a/web/components/views/form.tsx
+++ b/web/components/views/form.tsx
@@ -14,8 +14,8 @@ import useProjectMembers from "hooks/use-project-members";
 import { FiltersList } from "components/core";
 import { SelectFilters } from "components/views";
 // ui
-import { PrimaryButton, SecondaryButton, TextArea } from "components/ui";
-import { Input } from "@plane/ui";
+import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Input, TextArea } from "@plane/ui";
 // helpers
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 import { getStatesList } from "helpers/state.helper";
@@ -140,13 +140,20 @@ export const ViewForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
             />
           </div>
           <div>
-            <TextArea
-              id="description"
+            <Controller
               name="description"
-              placeholder="Description"
-              className="h-32 resize-none text-sm"
-              error={errors.description}
-              register={register}
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <TextArea
+                  id="description"
+                  name="description"
+                  value={value}
+                  placeholder="Description"
+                  onChange={onChange}
+                  hasError={Boolean(errors?.description)}
+                  className="h-32 resize-none text-sm"
+                />
+              )}
             />
           </div>
           <div>
diff --git a/web/components/web-view/issue-web-view-form.tsx b/web/components/web-view/issue-web-view-form.tsx
index ff9383fd0af..a9c837132ac 100644
--- a/web/components/web-view/issue-web-view-form.tsx
+++ b/web/components/web-view/issue-web-view-form.tsx
@@ -13,7 +13,7 @@ import { useDebouncedCallback } from "use-debounce";
 import useReloadConfirmations from "hooks/use-reload-confirmation";
 
 // ui
-import { TextArea } from "components/ui";
+import { TextArea } from "@plane/ui";
 
 // components
 import { TipTapEditor } from "components/tiptap";
@@ -78,32 +78,34 @@ export const IssueWebViewForm: React.FC<Props> = (props) => {
         <Label>Title</Label>
         <div className="relative">
           {isAllowed ? (
-            <TextArea
-              id="name"
+            <Controller
               name="name"
-              placeholder="Enter issue name"
-              register={register}
-              onFocus={() => setCharacterLimit(true)}
-              onChange={(e) => {
-                setCharacterLimit(false);
-                setIsSubmitting("submitting");
-                debouncedTitleSave();
-              }}
-              required={true}
-              className="min-h-10 block w-full resize-none overflow-hidden rounded border bg-transparent px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
-              role="textbox"
-              disabled={!isAllowed}
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <TextArea
+                  id="name"
+                  name="name"
+                  value={value}
+                  placeholder="Enter issue name"
+                  onFocus={() => setCharacterLimit(true)}
+                  onChange={() => {
+                    setCharacterLimit(false);
+                    setIsSubmitting("submitting");
+                    debouncedTitleSave();
+                  }}
+                  required={true}
+                  className="min-h-10 block w-full resize-none overflow-hidden rounded border bg-transparent px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
+                  role="textbox"
+                  disabled={!isAllowed}
+                />
+              )}
             />
           ) : (
             <h4 className="break-words text-2xl font-semibold">{issueDetails?.name}</h4>
           )}
           {characterLimit && isAllowed && (
             <div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 text-custom-text-200 p-0.5 text-xs">
-              <span
-                className={`${
-                  watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
-                }`}
-              >
+              <span className={`${watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""}`}>
                 {watch("name").length}
               </span>
               /255
@@ -123,9 +125,7 @@ export const IssueWebViewForm: React.FC<Props> = (props) => {
               return (
                 <TipTapEditor
                   value={
-                    !value ||
-                    value === "" ||
-                    (typeof value === "object" && Object.keys(value).length === 0)
+                    !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
                       ? "<p></p>"
                       : value
                   }
@@ -133,17 +133,13 @@ export const IssueWebViewForm: React.FC<Props> = (props) => {
                   debouncedUpdatesEnabled={true}
                   setShouldShowAlert={setShowAlert}
                   setIsSubmitting={setIsSubmitting}
-                  customClassName={
-                    isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"
-                  }
+                  customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
                   noBorder={!isAllowed}
                   onChange={(description: Object, description_html: string) => {
                     setShowAlert(true);
                     setIsSubmitting("submitting");
                     onChange(description_html);
-                    handleSubmit(handleDescriptionFormSubmit)().finally(() =>
-                      setIsSubmitting("submitted")
-                    );
+                    handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
                   }}
                   editable={isAllowed}
                 />
diff --git a/web/components/workspace/views/form.tsx b/web/components/workspace/views/form.tsx
index f2ab0e98bf2..21db24510de 100644
--- a/web/components/workspace/views/form.tsx
+++ b/web/components/workspace/views/form.tsx
@@ -17,8 +17,8 @@ import { WorkspaceFiltersList } from "components/core";
 import { GlobalSelectFilters } from "components/workspace/views/global-select-filters";
 
 // ui
-import { PrimaryButton, SecondaryButton, TextArea } from "components/ui";
-import { Input } from "@plane/ui";
+import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Input, TextArea } from "@plane/ui";
 // helpers
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
@@ -138,13 +138,20 @@ export const WorkspaceViewForm: React.FC<Props> = ({ handleFormSubmit, handleClo
             />
           </div>
           <div>
-            <TextArea
-              id="description"
+            <Controller
               name="description"
-              placeholder="Description"
-              className="h-32 resize-none text-sm"
-              error={errors.description}
-              register={register}
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <TextArea
+                  id="description"
+                  name="description"
+                  value={value}
+                  placeholder="Description"
+                  onChange={onChange}
+                  className="h-32 resize-none text-sm"
+                  hasError={Boolean(errors?.description)}
+                />
+              )}
             />
           </div>
           <div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index f25091b43f5..d57c6fb1631 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
 // react-color
@@ -28,7 +28,8 @@ import { CreateLabelModal } from "components/labels";
 import { CreateBlock } from "components/pages/create-block";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import { CustomSearchSelect, EmptyState, Loader, TextArea, ToggleSwitch, Tooltip } from "components/ui";
+import { CustomSearchSelect, EmptyState, Loader, ToggleSwitch, Tooltip } from "components/ui";
+import { TextArea } from "@plane/ui";
 // images
 import emptyPage from "public/empty-state/page.svg";
 // icons
@@ -73,7 +74,7 @@ const SinglePage: NextPage = () => {
 
   const { user } = useUser();
 
-  const { handleSubmit, reset, watch, setValue } = useForm<IPage>({
+  const { handleSubmit, reset, watch, setValue, control } = useForm<IPage>({
     defaultValues: { name: "" },
   });
 
@@ -337,17 +338,22 @@ const SinglePage: NextPage = () => {
                     <ArrowLeftIcon className="h-4 w-4" />
                   </button>
 
-                  <TextArea
-                    id="name"
+                  <Controller
                     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-xl font-semibold outline-none ring-0"
-                    role="textbox"
-                    noPadding
+                    control={control}
+                    render={({ field: { value, onChange } }) => (
+                      <TextArea
+                        id="name"
+                        name="name"
+                        value={watch("name")}
+                        placeholder="Page Title"
+                        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-xl font-semibold outline-none ring-0"
+                        role="textbox"
+                      />
+                    )}
                   />
                 </div>
 

From ce6af6de1d5162930961fb2ff3e48b1f5f9a05ed Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 9 Oct 2023 16:05:42 +0530
Subject: [PATCH 03/15] chore: swap button component with plane/ui package

---
 packages/ui/dist/index.d.ts                   | 12 ++-
 packages/ui/dist/index.js                     | 56 ++++++++++-
 packages/ui/dist/index.mjs                    | 56 ++++++++++-
 packages/ui/package.json                      |  3 +
 packages/ui/src/buttons/index.tsx             | 96 ++++++++++++++++++-
 web/components/account/email-code-form.tsx    | 14 +--
 .../account/email-password-form.tsx           |  8 +-
 .../account/email-reset-password-form.tsx     | 15 +--
 web/components/account/email-signup-form.tsx  |  8 +-
 .../create-update-analytics-modal.tsx         | 11 ++-
 .../custom-analytics/custom-analytics.tsx     | 28 ++----
 .../analytics/custom-analytics/sidebar.tsx    | 11 ++-
 .../scope-and-demand/scope-and-demand.tsx     | 18 ++--
 .../auth-screens/project/join-project.tsx     | 17 +---
 .../auth-screens/workspace/not-a-member.tsx   | 10 +-
 .../automation/select-month-modal.tsx         | 11 ++-
 .../core/filters/date-filter-modal.tsx        | 10 +-
 web/components/core/image-picker-popover.tsx  | 18 ++--
 .../core/modals/bulk-delete-issues-modal.tsx  | 10 +-
 .../modals/existing-issues-list-modal.tsx     | 52 ++++------
 .../core/modals/gpt-assistant-modal.tsx       | 16 ++--
 .../core/modals/image-upload-modal.tsx        | 27 ++----
 web/components/core/modals/link-modal.tsx     | 11 ++-
 .../core/theme/custom-theme-selector.tsx      |  6 +-
 web/components/core/views/issues-view.tsx     | 15 ++-
 web/components/cycles/delete-cycle-modal.tsx  | 34 +++----
 web/components/cycles/form.tsx                | 12 ++-
 web/components/cycles/transfer-issues.tsx     | 13 +--
 .../create-update-estimate-modal.tsx          | 11 ++-
 .../estimates/delete-estimate-modal.tsx       | 31 +++---
 web/components/estimates/single-estimate.tsx  | 33 +++----
 web/components/exporter/export-modal.tsx      | 16 +++-
 web/components/exporter/guide.tsx             |  7 +-
 web/components/exporter/single-export.tsx     | 14 +--
 web/components/inbox/accept-issue-modal.tsx   | 10 +-
 web/components/inbox/decline-issue-modal.tsx  | 15 ++-
 web/components/inbox/delete-issue-modal.tsx   | 18 ++--
 web/components/inbox/inbox-action-headers.tsx | 43 ++++-----
 web/components/inbox/select-duplicate.tsx     | 10 +-
 .../integration/delete-import-modal.tsx       | 16 +++-
 web/components/integration/github/auth.tsx    | 10 +-
 .../integration/github/import-configure.tsx   | 12 +--
 .../integration/github/import-confirm.tsx     | 13 ++-
 .../integration/github/import-data.tsx        | 26 +++--
 .../integration/github/import-users.tsx       | 21 ++--
 .../integration/github/repo-details.tsx       | 12 ++-
 web/components/integration/guide.tsx          |  7 +-
 web/components/integration/jira/root.tsx      | 12 ++-
 .../integration/single-integration-card.tsx   | 11 ++-
 .../attachment/delete-attachment-modal.tsx    | 11 ++-
 web/components/issues/comment/add-comment.tsx | 17 ++--
 .../issues/confirm-issue-discard.tsx          | 23 +++--
 .../issues/delete-draft-issue-modal.tsx       | 10 +-
 web/components/issues/delete-issue-modal.tsx  | 10 +-
 web/components/issues/draft-issue-form.tsx    | 18 ++--
 web/components/issues/form.tsx                | 13 +--
 .../workspace-views/workpace-view-issues.tsx  | 17 ++--
 .../workspace-views/workspace-all-issue.tsx   | 19 ++--
 web/components/labels/create-label-modal.tsx  | 11 ++-
 .../labels/create-update-label-inline.tsx     | 15 +--
 web/components/labels/delete-label-modal.tsx  | 10 +-
 .../modules/delete-module-modal.tsx           | 33 +++----
 web/components/modules/form.tsx               | 12 ++-
 .../select-snooze-till-modal.tsx              | 38 +++-----
 web/components/onboarding/invite-members.tsx  | 11 +--
 web/components/onboarding/join-workspaces.tsx | 47 +++------
 web/components/onboarding/tour/root.tsx       | 28 +++---
 web/components/onboarding/user-details.tsx    |  8 +-
 web/components/onboarding/workspace.tsx       | 14 +--
 .../pages/create-update-block-inline.tsx      | 11 ++-
 web/components/pages/delete-page-modal.tsx    | 10 +-
 web/components/pages/page-form.tsx            | 11 ++-
 .../project/confirm-project-member-remove.tsx | 24 ++---
 .../project/create-project-modal.tsx          | 12 ++-
 .../project/delete-project-modal.tsx          | 11 ++-
 web/components/project/form.tsx               |  8 +-
 web/components/project/join-project-modal.tsx | 10 +-
 .../project/leave-project-modal.tsx           | 11 ++-
 .../project/publish-project/modal.tsx         | 20 ++--
 .../project/send-project-invitation-modal.tsx | 50 +++-------
 .../project/settings/single-label.tsx         | 12 ++-
 web/components/states/create-state-modal.tsx  | 12 ++-
 .../states/create-update-state-inline.tsx     | 12 ++-
 web/components/states/delete-state-modal.tsx  | 10 +-
 web/components/ui/empty-state.tsx             | 13 +--
 web/components/views/delete-view-modal.tsx    | 31 +++---
 web/components/views/form.tsx                 | 11 ++-
 web/components/web-view/add-comment.tsx       |  8 +-
 .../web-view/create-update-link-form.tsx      |  8 +-
 web/components/web-view/issue-link-list.tsx   |  7 +-
 .../web-view/issue-properties-detail.tsx      |  8 +-
 .../confirm-workspace-member-remove.tsx       | 24 ++---
 .../workspace/create-workspace-form.tsx       |  8 +-
 .../workspace/delete-workspace-modal.tsx      | 11 ++-
 .../send-workspace-invitation-modal.tsx       | 12 ++-
 .../views/delete-workspace-view-modal.tsx     | 27 ++----
 web/components/workspace/views/form.tsx       | 11 ++-
 .../project-authorization-wrapper.tsx         |  7 +-
 .../workspace-authorization-wrapper.tsx       |  7 +-
 web/layouts/auth-layout/workspace-wrapper.tsx |  9 +-
 web/pages/404.tsx                             | 10 +-
 web/pages/[workspaceSlug]/index.tsx           |  8 +-
 web/pages/[workspaceSlug]/me/my-issues.tsx    |  7 +-
 .../[workspaceSlug]/me/profile/index.tsx      |  8 +-
 .../projects/[projectId]/cycles/[cycleId].tsx |  8 +-
 .../projects/[projectId]/cycles/index.tsx     |  8 +-
 .../projects/[projectId]/inbox/[inboxId].tsx  |  7 +-
 .../[projectId]/modules/[moduleId].tsx        |  8 +-
 .../projects/[projectId]/modules/index.tsx    |  8 +-
 .../projects/[projectId]/pages/index.tsx      |  7 +-
 .../[projectId]/settings/estimates.tsx        | 12 ++-
 .../projects/[projectId]/settings/index.tsx   |  8 +-
 .../projects/[projectId]/settings/labels.tsx  |  7 +-
 .../projects/[projectId]/settings/members.tsx | 15 +--
 .../projects/[projectId]/views/[viewId].tsx   |  8 +-
 .../projects/[projectId]/views/index.tsx      |  8 +-
 web/pages/[workspaceSlug]/projects/index.tsx  |  8 +-
 .../[workspaceSlug]/settings/billing.tsx      |  6 +-
 web/pages/[workspaceSlug]/settings/index.tsx  | 12 +--
 .../[workspaceSlug]/settings/members.tsx      |  7 +-
 .../workspace-views/all-issues.tsx            |  7 +-
 .../workspace-views/assigned.tsx              |  7 +-
 .../workspace-views/created.tsx               |  7 +-
 .../[workspaceSlug]/workspace-views/index.tsx |  8 +-
 .../workspace-views/issues.tsx                |  7 +-
 .../workspace-views/subscribed.tsx            |  7 +-
 web/pages/_error.tsx                          | 15 ++-
 web/pages/invitations.tsx                     | 11 ++-
 web/pages/m/[workspaceSlug]/editor.tsx        | 12 +--
 web/pages/reset-password.tsx                  |  8 +-
 130 files changed, 1064 insertions(+), 932 deletions(-)

diff --git a/packages/ui/dist/index.d.ts b/packages/ui/dist/index.d.ts
index b4241e33bf1..e98ae316ee7 100644
--- a/packages/ui/dist/index.d.ts
+++ b/packages/ui/dist/index.d.ts
@@ -1,7 +1,15 @@
 import * as React from 'react';
 import { FC } from 'react';
 
-declare const Button: () => JSX.Element;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "danger";
+    children: React.ReactNode;
+    className?: string;
+    loading?: boolean;
+    size?: "sm" | "md" | "lg";
+    outline?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     mode?: "primary" | "transparent" | "true-transparent";
@@ -23,4 +31,4 @@ interface IRadialProgressBar {
 }
 declare const RadialProgressBar: FC<IRadialProgressBar>;
 
-export { Button, Input, InputProps, RadialProgressBar, TextArea, TextAreaProps };
+export { Button, ButtonProps, Input, InputProps, RadialProgressBar, TextArea, TextAreaProps };
diff --git a/packages/ui/dist/index.js b/packages/ui/dist/index.js
index b37e4cb1fe8..58f9787ec53 100644
--- a/packages/ui/dist/index.js
+++ b/packages/ui/dist/index.js
@@ -35,9 +35,59 @@ module.exports = __toCommonJS(src_exports);
 
 // src/buttons/index.tsx
 var React = __toESM(require("react"));
-var Button = () => {
-  return /* @__PURE__ */ React.createElement("button", null, "button");
-};
+var import_clsx = __toESM(require("clsx"));
+var Button = React.forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className = "",
+      type = "button",
+      disabled = false,
+      loading = false,
+      size = "sm",
+      outline = false,
+      variant = "primary",
+      ...rest
+    } = props;
+    const buttonStyleClasses = {
+      primary: {
+        variantStyle: "text-white bg-custom-primary hover:border-opacity-90 hover:bg-opacity-90",
+        variantOutlineStyle: "text-custom-primary hover:bg-custom-primary hover:text-white",
+        variantBorderStyles: "border-custom-primary"
+      },
+      secondary: {
+        variantStyle: "bg-custom-background-100 hover:border-opacity-70 hover:bg-opacity-70",
+        variantOutlineStyle: "hover:bg-custom-background-80",
+        variantBorderStyles: "border-custom-border-200"
+      },
+      danger: {
+        variantStyle: "text-white bg-red-500 hover:border-opacity-90 hover:bg-opacity-90",
+        variantOutlineStyle: " text-red-500 hover:bg-red-500 hover:text-white",
+        variantBorderStyles: "border-red-500"
+      }
+    };
+    return /* @__PURE__ */ React.createElement("button", {
+      type,
+      ref,
+      className: `${className} border 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 opacity-70" : ""} ${outline ? (0, import_clsx.default)({
+        [buttonStyleClasses.primary.variantOutlineStyle]: variant === "primary",
+        [buttonStyleClasses.secondary.variantOutlineStyle]: variant === "secondary",
+        [buttonStyleClasses.danger.variantOutlineStyle]: variant === "danger"
+      }) : (0, import_clsx.default)({
+        [buttonStyleClasses.primary.variantStyle]: variant === "primary",
+        [buttonStyleClasses.secondary.variantStyle]: variant === "secondary",
+        [buttonStyleClasses.danger.variantStyle]: variant === "danger"
+      })}  ${loading ? "cursor-wait" : ""} ${(0, import_clsx.default)({
+        [buttonStyleClasses.primary.variantBorderStyles]: variant === "primary",
+        [buttonStyleClasses.secondary.variantBorderStyles]: variant === "secondary",
+        [buttonStyleClasses.danger.variantBorderStyles]: variant === "danger"
+      })}`,
+      disabled: disabled || loading,
+      ...rest
+    }, children);
+  }
+);
+Button.displayName = "plane-ui-button";
 
 // src/form-fields/input.tsx
 var React2 = __toESM(require("react"));
diff --git a/packages/ui/dist/index.mjs b/packages/ui/dist/index.mjs
index 7b3466c5d74..14bfc7f5f96 100644
--- a/packages/ui/dist/index.mjs
+++ b/packages/ui/dist/index.mjs
@@ -1,8 +1,58 @@
 // src/buttons/index.tsx
 import * as React from "react";
-var Button = () => {
-  return /* @__PURE__ */ React.createElement("button", null, "button");
-};
+import clsx from "clsx";
+var Button = React.forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className = "",
+      type = "button",
+      disabled = false,
+      loading = false,
+      size = "sm",
+      outline = false,
+      variant = "primary",
+      ...rest
+    } = props;
+    const buttonStyleClasses = {
+      primary: {
+        variantStyle: "text-white bg-custom-primary hover:border-opacity-90 hover:bg-opacity-90",
+        variantOutlineStyle: "text-custom-primary hover:bg-custom-primary hover:text-white",
+        variantBorderStyles: "border-custom-primary"
+      },
+      secondary: {
+        variantStyle: "bg-custom-background-100 hover:border-opacity-70 hover:bg-opacity-70",
+        variantOutlineStyle: "hover:bg-custom-background-80",
+        variantBorderStyles: "border-custom-border-200"
+      },
+      danger: {
+        variantStyle: "text-white bg-red-500 hover:border-opacity-90 hover:bg-opacity-90",
+        variantOutlineStyle: " text-red-500 hover:bg-red-500 hover:text-white",
+        variantBorderStyles: "border-red-500"
+      }
+    };
+    return /* @__PURE__ */ React.createElement("button", {
+      type,
+      ref,
+      className: `${className} border 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 opacity-70" : ""} ${outline ? clsx({
+        [buttonStyleClasses.primary.variantOutlineStyle]: variant === "primary",
+        [buttonStyleClasses.secondary.variantOutlineStyle]: variant === "secondary",
+        [buttonStyleClasses.danger.variantOutlineStyle]: variant === "danger"
+      }) : clsx({
+        [buttonStyleClasses.primary.variantStyle]: variant === "primary",
+        [buttonStyleClasses.secondary.variantStyle]: variant === "secondary",
+        [buttonStyleClasses.danger.variantStyle]: variant === "danger"
+      })}  ${loading ? "cursor-wait" : ""} ${clsx({
+        [buttonStyleClasses.primary.variantBorderStyles]: variant === "primary",
+        [buttonStyleClasses.secondary.variantBorderStyles]: variant === "secondary",
+        [buttonStyleClasses.danger.variantBorderStyles]: variant === "danger"
+      })}`,
+      disabled: disabled || loading,
+      ...rest
+    }, children);
+  }
+);
+Button.displayName = "plane-ui-button";
 
 // src/form-fields/input.tsx
 import * as React2 from "react";
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 1f95e468b3f..667ff24e253 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -29,5 +29,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "clsx": "^2.0.0"
   }
 }
diff --git a/packages/ui/src/buttons/index.tsx b/packages/ui/src/buttons/index.tsx
index de1b0da3186..59506c2d42c 100644
--- a/packages/ui/src/buttons/index.tsx
+++ b/packages/ui/src/buttons/index.tsx
@@ -1,5 +1,95 @@
 import * as React from "react";
+import clsx from "clsx";
 
-export const Button = () => {
-  return <button>button</button>;
-};
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "danger";
+  children: React.ReactNode;
+  className?: string;
+  loading?: boolean;
+  size?: "sm" | "md" | "lg";
+  outline?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const {
+      children,
+      className = "",
+      type = "button",
+      disabled = false,
+      loading = false,
+      size = "sm",
+      outline = false,
+      variant = "primary",
+      ...rest
+    } = props;
+
+    const buttonStyleClasses = {
+      primary: {
+        variantStyle:
+          "text-white bg-custom-primary hover:border-opacity-90 hover:bg-opacity-90",
+        variantOutlineStyle:
+          "text-custom-primary hover:bg-custom-primary hover:text-white",
+        variantBorderStyles: "border-custom-primary",
+      },
+      secondary: {
+        variantStyle:
+          "bg-custom-background-100 hover:border-opacity-70 hover:bg-opacity-70",
+        variantOutlineStyle: "hover:bg-custom-background-80",
+        variantBorderStyles: "border-custom-border-200",
+      },
+      danger: {
+        variantStyle:
+          "text-white bg-red-500 hover:border-opacity-90 hover:bg-opacity-90",
+        variantOutlineStyle: " text-red-500 hover:bg-red-500 hover:text-white",
+        variantBorderStyles: "border-red-500",
+      },
+    };
+
+    return (
+      <button
+        type={type}
+        ref={ref}
+        className={`${className} border 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 opacity-70" : ""} ${
+          outline
+            ? clsx({
+                [buttonStyleClasses.primary.variantOutlineStyle]:
+                  variant === "primary",
+                [buttonStyleClasses.secondary.variantOutlineStyle]:
+                  variant === "secondary",
+                [buttonStyleClasses.danger.variantOutlineStyle]:
+                  variant === "danger",
+              })
+            : clsx({
+                [buttonStyleClasses.primary.variantStyle]:
+                  variant === "primary",
+                [buttonStyleClasses.secondary.variantStyle]:
+                  variant === "secondary",
+                [buttonStyleClasses.danger.variantStyle]: variant === "danger",
+              })
+        }  ${loading ? "cursor-wait" : ""} ${clsx({
+          [buttonStyleClasses.primary.variantBorderStyles]:
+            variant === "primary",
+          [buttonStyleClasses.secondary.variantBorderStyles]:
+            variant === "secondary",
+          [buttonStyleClasses.danger.variantBorderStyles]: variant === "danger",
+        })}`}
+        disabled={disabled || loading}
+        {...rest}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = "plane-ui-button";
+
+export { Button };
diff --git a/web/components/account/email-code-form.tsx b/web/components/account/email-code-form.tsx
index 9932b5f0544..52fea3b5b8d 100644
--- a/web/components/account/email-code-form.tsx
+++ b/web/components/account/email-code-form.tsx
@@ -1,9 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 // ui
-import { CheckCircleIcon } from "@heroicons/react/20/solid";
-import { PrimaryButton, SecondaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
 // services
 import authenticationService from "services/authentication.service";
 import useToast from "hooks/use-toast";
@@ -199,7 +197,8 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
           </>
         )}
         {codeSent ? (
-          <PrimaryButton
+          <Button
+            variant="primary"
             type="submit"
             className="w-full text-center h-[46px]"
             size="md"
@@ -208,9 +207,10 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
             loading={isLoading}
           >
             {isLoading ? "Signing in..." : "Sign in"}
-          </PrimaryButton>
+          </Button>
         ) : (
-          <PrimaryButton
+          <Button
+            variant="primary"
             className="w-full text-center h-[46px]"
             size="md"
             onClick={() => {
@@ -222,7 +222,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
             loading={isSubmitting}
           >
             {isSubmitting ? "Sending code..." : "Send sign in code"}
-          </PrimaryButton>
+          </Button>
         )}
       </form>
     </>
diff --git a/web/components/account/email-password-form.tsx b/web/components/account/email-password-form.tsx
index b0b93c1c39a..e6bbf719bda 100644
--- a/web/components/account/email-password-form.tsx
+++ b/web/components/account/email-password-form.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import { Controller, useForm } from "react-hook-form";
 // ui
-import { PrimaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
 // types
 type EmailPasswordFormValues = {
   email: string;
@@ -94,14 +93,15 @@ export const EmailPasswordForm: React.FC<Props> = (props) => {
           </button>
         </div>
         <div>
-          <PrimaryButton
+          <Button
+            variant="primary"
             type="submit"
             className="w-full text-center h-[46px]"
             disabled={!isValid && isDirty}
             loading={isSubmitting}
           >
             {isSubmitting ? "Signing in..." : "Sign in"}
-          </PrimaryButton>
+          </Button>
         </div>
       </form>
     </>
diff --git a/web/components/account/email-reset-password-form.tsx b/web/components/account/email-reset-password-form.tsx
index 8b8d382a1fd..5d6470463e3 100644
--- a/web/components/account/email-reset-password-form.tsx
+++ b/web/components/account/email-reset-password-form.tsx
@@ -7,8 +7,7 @@ import userService from "services/user.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
 // types
 type Props = {
   setIsResettingPassword: React.Dispatch<React.SetStateAction<boolean>>;
@@ -89,12 +88,16 @@ export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword
         />
       </div>
       <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
-        <SecondaryButton className="w-full text-center h-[46px]" onClick={() => setIsResettingPassword(false)}>
+        <Button
+          variant="secondary"
+          className="w-full text-center h-[46px]"
+          onClick={() => setIsResettingPassword(false)}
+        >
           Go Back
-        </SecondaryButton>
-        <PrimaryButton type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
+        </Button>
+        <Button variant="primary" type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
           {isSubmitting ? "Sending link..." : "Send reset link"}
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/account/email-signup-form.tsx b/web/components/account/email-signup-form.tsx
index 10e3cea6624..21f8844dfc8 100644
--- a/web/components/account/email-signup-form.tsx
+++ b/web/components/account/email-signup-form.tsx
@@ -2,8 +2,7 @@ import React from "react";
 import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 // ui
-import { PrimaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
 // types
 type EmailPasswordFormValues = {
   email: string;
@@ -120,14 +119,15 @@ export const EmailSignUpForm: React.FC<Props> = (props) => {
           </Link>
         </div>
         <div>
-          <PrimaryButton
+          <Button
+            variant="primary"
             type="submit"
             className="w-full text-center h-[46px]"
             disabled={!isValid && isDirty}
             loading={isSubmitting}
           >
             {isSubmitting ? "Signing up..." : "Sign up"}
-          </PrimaryButton>
+          </Button>
         </div>
       </form>
     </>
diff --git a/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx b/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx
index 029d268ff3d..30a8eb060d6 100644
--- a/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx
+++ b/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx
@@ -11,8 +11,7 @@ import analyticsService from "services/analytics.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-import { Input, TextArea } from "@plane/ui";
+import { Button, Input, TextArea } from "@plane/ui";
 // types
 import { IAnalyticsParams, ISaveAnalyticsFormData } from "types";
 
@@ -157,10 +156,12 @@ export const CreateUpdateAnalyticsModal: React.FC<Props> = ({ isOpen, handleClos
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton type="submit" loading={isSubmitting}>
+                    <Button variant="secondary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" type="submit" loading={isSubmitting}>
                       {isSubmitting ? "Saving..." : "Save Analytics"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/analytics/custom-analytics/custom-analytics.tsx b/web/components/analytics/custom-analytics/custom-analytics.tsx
index d04733b56a9..a0fdf42cce9 100644
--- a/web/components/analytics/custom-analytics/custom-analytics.tsx
+++ b/web/components/analytics/custom-analytics/custom-analytics.tsx
@@ -7,14 +7,10 @@ import { Control, UseFormSetValue } from "react-hook-form";
 // hooks
 import useProjects from "hooks/use-projects";
 // components
-import {
-  AnalyticsGraph,
-  AnalyticsSelectBar,
-  AnalyticsSidebar,
-  AnalyticsTable,
-} from "components/analytics";
+import { Button } from "@plane/ui";
+import { AnalyticsGraph, AnalyticsSelectBar, AnalyticsSidebar, AnalyticsTable } from "components/analytics";
 // ui
-import { Loader, PrimaryButton } from "components/ui";
+import { Loader } from "components/ui";
 // helpers
 import { convertResponseToBarGraphData } from "helpers/analytics.helper";
 // types
@@ -52,11 +48,7 @@ export const CustomAnalytics: React.FC<Props> = ({
   const { projects } = useProjects();
 
   return (
-    <div
-      className={`overflow-hidden flex flex-col-reverse ${
-        fullScreen ? "md:grid md:grid-cols-4 md:h-full" : ""
-      }`}
-    >
+    <div className={`overflow-hidden flex flex-col-reverse ${fullScreen ? "md:grid md:grid-cols-4 md:h-full" : ""}`}>
       <div className="col-span-3 flex flex-col h-full overflow-hidden">
         <AnalyticsSelectBar
           control={control}
@@ -77,12 +69,7 @@ export const CustomAnalytics: React.FC<Props> = ({
                   yAxisKey={yAxisKey}
                   fullScreen={fullScreen}
                 />
-                <AnalyticsTable
-                  analytics={analytics}
-                  barGraphData={barGraphData}
-                  params={params}
-                  yAxisKey={yAxisKey}
-                />
+                <AnalyticsTable analytics={analytics} barGraphData={barGraphData} params={params} yAxisKey={yAxisKey} />
               </div>
             ) : (
               <div className="grid h-full place-items-center p-5">
@@ -107,7 +94,8 @@ export const CustomAnalytics: React.FC<Props> = ({
             <div className="space-y-4 text-custom-text-200">
               <p className="text-sm">There was some error in fetching the data.</p>
               <div className="flex items-center justify-center gap-2">
-                <PrimaryButton
+                <Button
+                  variant="primary"
                   onClick={() => {
                     if (!workspaceSlug) return;
 
@@ -115,7 +103,7 @@ export const CustomAnalytics: React.FC<Props> = ({
                   }}
                 >
                   Refresh
-                </PrimaryButton>
+                </Button>
               </div>
             </div>
           </div>
diff --git a/web/components/analytics/custom-analytics/sidebar.tsx b/web/components/analytics/custom-analytics/sidebar.tsx
index 787fa79bde9..12809617251 100644
--- a/web/components/analytics/custom-analytics/sidebar.tsx
+++ b/web/components/analytics/custom-analytics/sidebar.tsx
@@ -12,7 +12,7 @@ import trackEventServices from "services/track_event.service";
 import useProjects from "hooks/use-projects";
 import useToast from "hooks/use-toast";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { ArrowDownTrayIcon, ArrowPathIcon, CalendarDaysIcon, UserGroupIcon } from "@heroicons/react/24/outline";
 import { ContrastIcon, LayerDiagonalIcon } from "components/icons";
@@ -328,7 +328,8 @@ export const AnalyticsSidebar: React.FC<Props> = ({ analytics, params, fullScree
         ) : null}
       </div>
       <div className="flex items-center gap-2 flex-wrap justify-self-end">
-        <SecondaryButton
+        <Button
+          variant="secondary"
           onClick={() => {
             if (!workspaceSlug) return;
 
@@ -339,13 +340,13 @@ export const AnalyticsSidebar: React.FC<Props> = ({ analytics, params, fullScree
             <ArrowPathIcon className="h-3.5 w-3.5" />
             Refresh
           </div>
-        </SecondaryButton>
-        <PrimaryButton onClick={exportAnalytics}>
+        </Button>
+        <Button variant="primary" onClick={exportAnalytics}>
           <div className="flex items-center gap-2 -my-1">
             <ArrowDownTrayIcon className="h-3.5 w-3.5" />
             Export as CSV
           </div>
-        </PrimaryButton>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/analytics/scope-and-demand/scope-and-demand.tsx b/web/components/analytics/scope-and-demand/scope-and-demand.tsx
index dc7e6551589..41915d805c2 100644
--- a/web/components/analytics/scope-and-demand/scope-and-demand.tsx
+++ b/web/components/analytics/scope-and-demand/scope-and-demand.tsx
@@ -5,14 +5,10 @@ import useSWR from "swr";
 // services
 import analyticsService from "services/analytics.service";
 // components
-import {
-  AnalyticsDemand,
-  AnalyticsLeaderboard,
-  AnalyticsScope,
-  AnalyticsYearWiseIssues,
-} from "components/analytics";
+import { Button } from "@plane/ui";
+import { AnalyticsDemand, AnalyticsLeaderboard, AnalyticsScope, AnalyticsYearWiseIssues } from "components/analytics";
 // ui
-import { Loader, PrimaryButton } from "components/ui";
+import { Loader } from "components/ui";
 // fetch-keys
 import { DEFAULT_ANALYTICS } from "constants/fetch-keys";
 
@@ -40,9 +36,7 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
     mutate: mutateDefaultAnalytics,
   } = useSWR(
     workspaceSlug ? DEFAULT_ANALYTICS(workspaceSlug.toString(), params) : null,
-    workspaceSlug
-      ? () => analyticsService.getDefaultAnalytics(workspaceSlug.toString(), params)
-      : null
+    workspaceSlug ? () => analyticsService.getDefaultAnalytics(workspaceSlug.toString(), params) : null
   );
 
   return (
@@ -97,7 +91,9 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
           <div className="space-y-4 text-custom-text-200">
             <p className="text-sm">There was some error in fetching the data.</p>
             <div className="flex items-center justify-center gap-2">
-              <PrimaryButton onClick={() => mutateDefaultAnalytics()}>Refresh</PrimaryButton>
+              <Button variant="primary" onClick={() => mutateDefaultAnalytics()}>
+                Refresh
+              </Button>
             </div>
           </div>
         </div>
diff --git a/web/components/auth-screens/project/join-project.tsx b/web/components/auth-screens/project/join-project.tsx
index 73b824b639d..d9a1263662f 100644
--- a/web/components/auth-screens/project/join-project.tsx
+++ b/web/components/auth-screens/project/join-project.tsx
@@ -8,7 +8,7 @@ import { mutate } from "swr";
 // services
 import projectService from "services/project.service";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { AssignmentClipboardIcon } from "components/icons";
 // images
@@ -45,25 +45,18 @@ export const JoinProject: React.FC = () => {
       <div className="h-44 w-72">
         <Image src={JoinProjectImg} height="176" width="288" alt="JoinProject" />
       </div>
-      <h1 className="text-xl font-medium text-custom-text-100">
-        You are not a member of this project
-      </h1>
+      <h1 className="text-xl font-medium text-custom-text-100">You are not a member of this project</h1>
 
       <div className="w-full max-w-md text-base text-custom-text-200">
         <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.
+          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}
-        >
+        <Button variant="primary" className="flex items-center gap-1" loading={isJoiningProject} onClick={handleJoin}>
           <AssignmentClipboardIcon height={16} width={16} color="white" />
           {isJoiningProject ? "Joining..." : "Click to join"}
-        </PrimaryButton>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/auth-screens/workspace/not-a-member.tsx b/web/components/auth-screens/workspace/not-a-member.tsx
index ee63b58831f..852b2fdc31e 100644
--- a/web/components/auth-screens/workspace/not-a-member.tsx
+++ b/web/components/auth-screens/workspace/not-a-member.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 
 export const NotAWorkspaceMember = () => (
   <DefaultLayout>
@@ -12,19 +12,19 @@ export const NotAWorkspaceMember = () => (
         <div className="space-y-2">
           <h3 className="text-lg font-semibold">Not Authorized!</h3>
           <p className="mx-auto w-1/2 text-sm text-custom-text-200">
-            You{"'"}re not a member of this workspace. Please contact the workspace admin to get an
-            invitation or check your pending invitations.
+            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 justify-center gap-2">
           <Link href="/invitations">
             <a>
-              <SecondaryButton>Check pending invites</SecondaryButton>
+              <Button variant="secondary">Check pending invites</Button>
             </a>
           </Link>
           <Link href="/create-workspace">
             <a>
-              <PrimaryButton>Create new workspace</PrimaryButton>
+              <Button variant="primary">Create new workspace</Button>
             </a>
           </Link>
         </div>
diff --git a/web/components/automation/select-month-modal.tsx b/web/components/automation/select-month-modal.tsx
index 030558165d3..a1fbfb83284 100644
--- a/web/components/automation/select-month-modal.tsx
+++ b/web/components/automation/select-month-modal.tsx
@@ -7,8 +7,7 @@ import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
 // types
 import type { IProject } from "types";
 
@@ -148,10 +147,12 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton type="submit" loading={isSubmitting}>
+                    <Button variant="secondary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" type="submit" loading={isSubmitting}>
                       {isSubmitting ? "Submitting..." : "Submit"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/core/filters/date-filter-modal.tsx b/web/components/core/filters/date-filter-modal.tsx
index 4a1ec0e8b98..dd728de7828 100644
--- a/web/components/core/filters/date-filter-modal.tsx
+++ b/web/components/core/filters/date-filter-modal.tsx
@@ -6,7 +6,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // components
 import { DateFilterSelect } from "./date-filter-select";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { XMarkIcon } from "@heroicons/react/20/solid";
 // helpers
@@ -127,12 +127,12 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                     </h6>
                   )}
                   <div className="flex justify-end gap-4">
-                    <SecondaryButton className="flex items-center gap-2" onClick={handleClose}>
+                    <Button variant="secondary" className="flex items-center gap-2" onClick={handleClose}>
                       Cancel
-                    </SecondaryButton>
-                    <PrimaryButton type="submit" className="flex items-center gap-2" disabled={isInvalid}>
+                    </Button>
+                    <Button variant="primary" type="submit" className="flex items-center gap-2" disabled={isInvalid}>
                       Apply
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx
index 2162dc3203e..f34223216d9 100644
--- a/web/components/core/image-picker-popover.tsx
+++ b/web/components/core/image-picker-popover.tsx
@@ -13,8 +13,8 @@ import fileService from "services/file.service";
 import useWorkspaceDetails from "hooks/use-workspace-details";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
-import { PrimaryButton, SecondaryButton, Loader } from "components/ui";
-import { Input } from "@plane/ui";
+import { Loader } from "components/ui";
+import { Button, Input } from "@plane/ui";
 
 const tabOptions = [
   {
@@ -185,9 +185,9 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, control, onC
                           />
                         )}
                       />
-                      <PrimaryButton onClick={() => setSearchParams(formData.search)} size="sm">
+                      <Button variant="primary" onClick={() => setSearchParams(formData.search)} size="sm">
                         Search
-                      </PrimaryButton>
+                      </Button>
                     </div>
                     {unsplashImages ? (
                       unsplashImages.length > 0 ? (
@@ -316,7 +316,8 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, control, onC
                     </p>
 
                     <div className="flex items-center justify-end gap-2">
-                      <SecondaryButton
+                      <Button
+                        variant="secondary"
                         className="w-full"
                         onClick={() => {
                           setIsOpen(false);
@@ -324,15 +325,16 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, control, onC
                         }}
                       >
                         Cancel
-                      </SecondaryButton>
-                      <PrimaryButton
+                      </Button>
+                      <Button
+                        variant="primary"
                         className="w-full"
                         onClick={handleSubmit}
                         disabled={!image}
                         loading={isImageUploading}
                       >
                         {isImageUploading ? "Uploading..." : "Upload & Save"}
-                      </PrimaryButton>
+                      </Button>
                     </div>
                   </div>
                 </Tab.Panel>
diff --git a/web/components/core/modals/bulk-delete-issues-modal.tsx b/web/components/core/modals/bulk-delete-issues-modal.tsx
index 964b47d48af..3f4cb049e43 100644
--- a/web/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/web/components/core/modals/bulk-delete-issues-modal.tsx
@@ -14,7 +14,7 @@ import issuesServices from "services/issue.service";
 import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { LayerDiagonalIcon } from "components/icons";
@@ -240,10 +240,12 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
 
                 {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}>
+                    <Button variant="secondary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" onClick={handleSubmit(handleDelete)} loading={isSubmitting}>
                       {isSubmitting ? "Deleting..." : "Delete selected issues"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 )}
               </form>
diff --git a/web/components/core/modals/existing-issues-list-modal.tsx b/web/components/core/modals/existing-issues-list-modal.tsx
index ed3902a4a64..3657fbbafa6 100644
--- a/web/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/components/core/modals/existing-issues-list-modal.tsx
@@ -13,7 +13,8 @@ import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
 import useDebounce from "hooks/use-debounce";
 // ui
-import { Loader, PrimaryButton, SecondaryButton, ToggleSwitch, Tooltip } from "components/ui";
+import { Button } from "@plane/ui";
+import { Loader, ToggleSwitch, Tooltip } from "components/ui";
 // icons
 import { LaunchOutlined } from "@mui/icons-material";
 import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
@@ -117,12 +118,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
 
   return (
     <>
-      <Transition.Root
-        show={isOpen}
-        as={React.Fragment}
-        afterLeave={() => setSearchTerm("")}
-        appear
-      >
+      <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setSearchTerm("")} appear>
         <Dialog as="div" className="relative z-20" onClose={handleClose}>
           <Transition.Child
             as={React.Fragment}
@@ -180,11 +176,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                             <button
                               type="button"
                               className="group p-1"
-                              onClick={() =>
-                                setSelectedIssues((prevData) =>
-                                  prevData.filter((i) => i.id !== issue.id)
-                                )
-                              }
+                              onClick={() => setSelectedIssues((prevData) => prevData.filter((i) => i.id !== issue.id))}
                             >
                               <XMarkIcon className="h-3 w-3 text-custom-text-200 group-hover:text-custom-text-100" />
                             </button>
@@ -232,21 +224,15 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                       </h5>
                     )}
 
-                    {!isSearching &&
-                      issues.length === 0 &&
-                      searchTerm !== "" &&
-                      debouncedSearchTerm !== "" && (
-                        <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                          <LayerDiagonalIcon height="52" width="52" />
-                          <h3 className="text-custom-text-200">
-                            No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">
-                              C
-                            </pre>
-                            .
-                          </h3>
-                        </div>
-                      )}
+                    {!isSearching && issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
+                      <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
+                        <LayerDiagonalIcon height="52" width="52" />
+                        <h3 className="text-custom-text-200">
+                          No issues found. Create a new issue with{" "}
+                          <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">C</pre>.
+                        </h3>
+                      </div>
+                    )}
 
                     {isSearching ? (
                       <Loader className="space-y-3 p-3">
@@ -256,9 +242,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                         <Loader.Item height="40px" />
                       </Loader>
                     ) : (
-                      <ul
-                        className={`text-sm text-custom-text-100 ${issues.length > 0 ? "p-2" : ""}`}
-                      >
+                      <ul className={`text-sm text-custom-text-100 ${issues.length > 0 ? "p-2" : ""}`}>
                         {issues.map((issue) => {
                           const selected = selectedIssues.some((i) => i.id === issue.id);
 
@@ -309,10 +293,12 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                 </Combobox>
                 {selectedIssues.length > 0 && (
                   <div className="flex items-center justify-end gap-2 p-3">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <PrimaryButton onClick={onSubmit} loading={isSubmitting}>
+                    <Button variant="secondary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" onClick={onSubmit} loading={isSubmitting}>
                       {isSubmitting ? "Adding..." : "Add selected issues"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 )}
               </Dialog.Panel>
diff --git a/web/components/core/modals/gpt-assistant-modal.tsx b/web/components/core/modals/gpt-assistant-modal.tsx
index ad183261b95..08566acf67d 100644
--- a/web/components/core/modals/gpt-assistant-modal.tsx
+++ b/web/components/core/modals/gpt-assistant-modal.tsx
@@ -9,9 +9,8 @@ import trackEventServices from "services/track_event.service";
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
 import { TipTapEditor } from "components/tiptap";
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
 // types
 import { IIssue, IPageBlock } from "types";
 
@@ -189,7 +188,8 @@ export const GptAssistantModal: React.FC<Props> = ({
       />
       <div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}>
         {response !== "" && (
-          <PrimaryButton
+          <Button
+            variant="primary"
             onClick={() => {
               onResponse(response);
               onClose();
@@ -198,13 +198,15 @@ export const GptAssistantModal: React.FC<Props> = ({
             }}
           >
             Use this response
-          </PrimaryButton>
+          </Button>
         )}
         <div className="flex items-center gap-2">
-          <SecondaryButton onClick={onClose}>Close</SecondaryButton>
-          <PrimaryButton type="button" onClick={handleSubmit(handleResponse)} loading={isSubmitting}>
+          <Button variant="secondary" onClick={onClose}>
+            Close
+          </Button>
+          <Button variant="primary" type="button" onClick={handleSubmit(handleResponse)} loading={isSubmitting}>
             {isSubmitting ? "Generating response..." : response === "" ? "Generate response" : "Generate again"}
-          </PrimaryButton>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/web/components/core/modals/image-upload-modal.tsx b/web/components/core/modals/image-upload-modal.tsx
index df4f21e12b7..64974b2fa79 100644
--- a/web/components/core/modals/image-upload-modal.tsx
+++ b/web/components/core/modals/image-upload-modal.tsx
@@ -11,7 +11,7 @@ import fileServices from "services/file.service";
 // hooks
 import useWorkspaceDetails from "hooks/use-workspace-details";
 // ui
-import { DangerButton, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { UserCircleIcon } from "components/icons";
 
@@ -127,10 +127,7 @@ export const ImageUploadModal: React.FC<Props> = ({
             >
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 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-custom-text-100"
-                  >
+                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                     Upload Image
                   </Dialog.Title>
                   <div className="space-y-3">
@@ -161,9 +158,7 @@ export const ImageUploadModal: React.FC<Props> = ({
                           <div>
                             <UserCircleIcon className="mx-auto h-16 w-16 text-custom-text-200" />
                             <span className="mt-2 block text-sm font-medium text-custom-text-200">
-                              {isDragActive
-                                ? "Drop image here to upload"
-                                : "Drag & drop image here"}
+                              {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
                             </span>
                           </div>
                         )}
@@ -185,19 +180,17 @@ export const ImageUploadModal: React.FC<Props> = ({
                 </p>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center">
-                    <DangerButton onClick={handleDelete} outline disabled={!value}>
+                    <Button variant="danger" onClick={handleDelete} outline disabled={!value}>
                       {isRemoving ? "Removing..." : "Remove"}
-                    </DangerButton>
+                    </Button>
                   </div>
                   <div className="flex items-center gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <PrimaryButton
-                      onClick={handleSubmit}
-                      disabled={!image}
-                      loading={isImageUploading}
-                    >
+                    <Button variant="secondary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" onClick={handleSubmit} disabled={!image} loading={isImageUploading}>
                       {isImageUploading ? "Uploading..." : "Upload & Save"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/core/modals/link-modal.tsx b/web/components/core/modals/link-modal.tsx
index 369ca76c1af..ab1d035e1f4 100644
--- a/web/components/core/modals/link-modal.tsx
+++ b/web/components/core/modals/link-modal.tsx
@@ -5,8 +5,7 @@ import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
 // types
 import type { IIssueLink, linkDetails, ModuleLink } from "types";
 
@@ -149,8 +148,10 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, createIssueLin
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton type="submit" loading={isSubmitting}>
+                    <Button variant="secondary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" type="submit" loading={isSubmitting}>
                       {status
                         ? isSubmitting
                           ? "Updating Link..."
@@ -158,7 +159,7 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, createIssueLin
                         : isSubmitting
                         ? "Adding Link..."
                         : "Add Link"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/core/theme/custom-theme-selector.tsx b/web/components/core/theme/custom-theme-selector.tsx
index cc6a7fa805c..b94232c8165 100644
--- a/web/components/core/theme/custom-theme-selector.tsx
+++ b/web/components/core/theme/custom-theme-selector.tsx
@@ -5,8 +5,8 @@ import { useTheme } from "next-themes";
 import { useForm } from "react-hook-form";
 
 // ui
-import { PrimaryButton } from "components/ui";
 import { ColorPickerInput } from "components/core";
+import { Button } from "@plane/ui";
 // types
 import { ICustomTheme } from "types";
 // mobx react lite
@@ -143,9 +143,9 @@ export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData })
         </div>
       </div>
       <div className="mt-5 flex justify-end gap-2">
-        <PrimaryButton type="submit" loading={isSubmitting}>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
           {isSubmitting ? "Creating Theme..." : "Set Theme"}
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/core/views/issues-view.tsx b/web/components/core/views/issues-view.tsx
index 6d28913285c..f461f4d5c84 100644
--- a/web/components/core/views/issues-view.tsx
+++ b/web/components/core/views/issues-view.tsx
@@ -27,7 +27,7 @@ import {
 } from "components/issues";
 import { CreateUpdateViewModal } from "components/views";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // helpers
@@ -498,7 +498,8 @@ export const IssuesView: React.FC<Props> = ({ openIssuesListModal, disableUserAc
                 })
               }
             />
-            <PrimaryButton
+            <Button
+              variant="primary"
               onClick={() => {
                 if (viewId) {
                   setFilters({}, true);
@@ -516,7 +517,7 @@ export const IssuesView: React.FC<Props> = ({ openIssuesListModal, disableUserAc
             >
               {!viewId && <PlusIcon className="h-4 w-4" />}
               {viewId ? "Update" : "Save"} view
-            </PrimaryButton>
+            </Button>
           </div>
           {<div className="mt-3 border-t border-custom-border-200" />}
         </>
@@ -556,10 +557,14 @@ export const IssuesView: React.FC<Props> = ({ openIssuesListModal, disableUserAc
             : undefined,
           secondaryButton:
             cycleId || moduleId ? (
-              <SecondaryButton className="flex items-center gap-1.5" onClick={openIssuesListModal ?? (() => {})}>
+              <Button
+                variant="secondary"
+                className="flex items-center gap-1.5"
+                onClick={openIssuesListModal ?? (() => {})}
+              >
                 <PlusIcon className="h-4 w-4" />
                 Add an existing issue
-              </SecondaryButton>
+              </Button>
             ) : null,
         }}
         handleOnDragEnd={handleOnDragEnd}
diff --git a/web/components/cycles/delete-cycle-modal.tsx b/web/components/cycles/delete-cycle-modal.tsx
index 35b8e118e66..9b19da3776a 100644
--- a/web/components/cycles/delete-cycle-modal.tsx
+++ b/web/components/cycles/delete-cycle-modal.tsx
@@ -10,7 +10,7 @@ import cycleService from "services/cycles.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
@@ -32,12 +32,7 @@ import {
 } from "constants/fetch-keys";
 import { getDateRangeStatus } from "helpers/date-time.helper";
 
-export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
-  isOpen,
-  setIsOpen,
-  data,
-  user,
-}) => {
+export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({ isOpen, setIsOpen, data, user }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
@@ -144,36 +139,29 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
                 <div className="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-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <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-custom-text-100"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         Delete Cycle
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete cycle-{" "}
-                          <span className="break-words font-medium text-custom-text-100">
-                            {data?.name}
-                          </span>
-                          ? All of the data related to the cycle will be permanently removed. This
-                          action cannot be undone.
+                          <span className="break-words font-medium text-custom-text-100">{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 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                  <Button variant="secondary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/cycles/form.tsx b/web/components/cycles/form.tsx
index acf5dbf5f63..74f122cd188 100644
--- a/web/components/cycles/form.tsx
+++ b/web/components/cycles/form.tsx
@@ -1,7 +1,7 @@
 import { Controller, useForm } from "react-hook-form";
 // ui
-import { Input, TextArea } from "@plane/ui";
-import { DateSelect, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, Input, TextArea } from "@plane/ui";
+import { DateSelect } from "components/ui";
 // types
 import { ICycle } from "types";
 
@@ -114,8 +114,10 @@ export const CycleForm: React.FC<Props> = (props) => {
         </div>
       </div>
       <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-200 px-5 pt-5">
-        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-        <PrimaryButton type="submit" loading={isSubmitting}>
+        <Button variant="secondary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
           {data
             ? isSubmitting
               ? "Updating Cycle..."
@@ -123,7 +125,7 @@ export const CycleForm: React.FC<Props> = (props) => {
             : isSubmitting
             ? "Creating Cycle..."
             : "Create Cycle"}
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/cycles/transfer-issues.tsx b/web/components/cycles/transfer-issues.tsx
index a49c7665f83..2a849347ec6 100644
--- a/web/components/cycles/transfer-issues.tsx
+++ b/web/components/cycles/transfer-issues.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // component
-import { PrimaryButton, Tooltip } from "components/ui";
+import { Button } from "@plane/ui";
 // icon
 import { ExclamationIcon, TransferIcon } from "components/icons";
 // services
@@ -24,12 +24,7 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
   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
-          )
+      ? () => cycleServices.getCycleDetails(workspaceSlug as string, projectId as string, cycleId as string)
       : null
   );
 
@@ -45,10 +40,10 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
 
       {transferableIssuesCount > 0 && (
         <div>
-          <PrimaryButton onClick={handleClick} className="flex items-center gap-3 rounded-lg">
+          <Button variant="primary" 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>
+          </Button>
         </div>
       )}
     </div>
diff --git a/web/components/estimates/create-update-estimate-modal.tsx b/web/components/estimates/create-update-estimate-modal.tsx
index 5c512bbd4e3..a317d8015e8 100644
--- a/web/components/estimates/create-update-estimate-modal.tsx
+++ b/web/components/estimates/create-update-estimate-modal.tsx
@@ -13,8 +13,7 @@ import estimatesService from "services/project_estimates.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-import { Input, TextArea } from "@plane/ui";
+import { Button, Input, TextArea } from "@plane/ui";
 // helpers
 import { checkDuplicates } from "helpers/array.helper";
 // types
@@ -437,8 +436,10 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                       </div>
                     </div>
                     <div className="mt-5 flex justify-end gap-2">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton type="submit" loading={isSubmitting}>
+                      <Button variant="secondary" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" type="submit" loading={isSubmitting}>
                         {data
                           ? isSubmitting
                             ? "Updating Estimate..."
@@ -446,7 +447,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           : isSubmitting
                           ? "Creating Estimate..."
                           : "Create Estimate"}
-                      </PrimaryButton>
+                      </Button>
                     </div>
                   </form>
                 </Dialog.Panel>
diff --git a/web/components/estimates/delete-estimate-modal.tsx b/web/components/estimates/delete-estimate-modal.tsx
index b4c08b4214e..557e70fede3 100644
--- a/web/components/estimates/delete-estimate-modal.tsx
+++ b/web/components/estimates/delete-estimate-modal.tsx
@@ -8,7 +8,7 @@ import { IEstimate } from "types";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
@@ -17,12 +17,7 @@ type Props = {
   handleDelete: () => void;
 };
 
-export const DeleteEstimateModal: React.FC<Props> = ({
-  isOpen,
-  handleClose,
-  data,
-  handleDelete,
-}) => {
+export const DeleteEstimateModal: React.FC<Props> = ({ isOpen, handleClose, data, handleDelete }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   useEffect(() => {
@@ -64,10 +59,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({
                 <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-500/20 p-4">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <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>
@@ -76,16 +68,17 @@ export const DeleteEstimateModal: React.FC<Props> = ({
                   <span>
                     <p className="break-words text-sm leading-7 text-custom-text-200">
                       Are you sure you want to delete estimate-{" "}
-                      <span className="break-words font-medium text-custom-text-100">
-                        {data.name}
-                      </span>
-                      {""}? All of the data related to the estiamte will be permanently removed.
-                      This action cannot be undone.
+                      <span className="break-words font-medium text-custom-text-100">{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
+                    <Button variant="secondary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="danger"
                       onClick={() => {
                         setIsDeleteLoading(true);
                         handleDelete();
@@ -93,7 +86,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({
                       loading={isDeleteLoading}
                     >
                       {isDeleteLoading ? "Deleting..." : "Delete Estimate"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/estimates/single-estimate.tsx b/web/components/estimates/single-estimate.tsx
index 43edfcb2c7e..c793a2618cd 100644
--- a/web/components/estimates/single-estimate.tsx
+++ b/web/components/estimates/single-estimate.tsx
@@ -10,7 +10,8 @@ import useProjectDetails from "hooks/use-project-details";
 // components
 import { DeleteEstimateModal } from "components/estimates";
 // ui
-import { CustomMenu, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
+import { CustomMenu } from "components/ui";
 //icons
 import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
 // helpers
@@ -25,12 +26,7 @@ type Props = {
   handleEstimateDelete: (estimateId: string) => void;
 };
 
-export const SingleEstimate: React.FC<Props> = ({
-  user,
-  estimate,
-  editEstimate,
-  handleEstimateDelete,
-}) => {
+export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate, handleEstimateDelete }) => {
   const [isDeleteEstimateModalOpen, setIsDeleteEstimateModalOpen] = useState(false);
 
   const router = useRouter();
@@ -53,15 +49,13 @@ export const SingleEstimate: React.FC<Props> = ({
       return { ...prevData, estimate: estimate.id };
     }, false);
 
-    await projectService
-      .updateProject(workspaceSlug as string, projectId as string, payload, user)
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Estimate points could not be used. Please try again.",
-        });
+    await projectService.updateProject(workspaceSlug as string, projectId as string, payload, user).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Estimate points could not be used. Please try again.",
       });
+    });
   };
 
   return (
@@ -72,9 +66,7 @@ export const SingleEstimate: React.FC<Props> = ({
             <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 text-green-500">
-                  In use
-                </span>
+                <span className="rounded bg-green-500/20 px-2 py-0.5 text-xs text-green-500">In use</span>
               )}
             </h6>
             <p className="font-sm w-[40vw] truncate text-[14px] font-normal text-custom-text-200">
@@ -83,12 +75,13 @@ export const SingleEstimate: React.FC<Props> = ({
           </div>
           <div className="flex items-center gap-2">
             {projectDetails?.estimate !== estimate.id && estimate.points.length > 0 && (
-              <SecondaryButton
+              <Button
+                variant="secondary"
                 onClick={handleUseEstimate}
                 className="!py-1 text-custom-text-200 hover:text-custom-text-100"
               >
                 Use
-              </SecondaryButton>
+              </Button>
             )}
             <CustomMenu ellipsis>
               <CustomMenu.MenuItem
diff --git a/web/components/exporter/export-modal.tsx b/web/components/exporter/export-modal.tsx
index 70d33019a1f..ebb72366b3c 100644
--- a/web/components/exporter/export-modal.tsx
+++ b/web/components/exporter/export-modal.tsx
@@ -7,7 +7,8 @@ import { CSVIntegrationService } from "services/csv.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { SecondaryButton, PrimaryButton, CustomSearchSelect } from "components/ui";
+import { Button } from "@plane/ui";
+import { CustomSearchSelect } from "components/ui";
 // types
 import { ICurrentUserResponse, IImporterService } from "types";
 // fetch-keys
@@ -143,10 +144,17 @@ export const Exporter: React.FC<Props> = ({ isOpen, handleClose, user, provider,
                     <div className="text-sm whitespace-nowrap">Export the data into separate files</div>
                   </div>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <PrimaryButton onClick={ExportCSVToMail} disabled={exportLoading} loading={exportLoading}>
+                    <Button variant="secondary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="primary"
+                      onClick={ExportCSVToMail}
+                      disabled={exportLoading}
+                      loading={exportLoading}
+                    >
                       {exportLoading ? "Exporting..." : "Export"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/exporter/guide.tsx b/web/components/exporter/guide.tsx
index 553c7c19b9c..2b13c3a9bae 100644
--- a/web/components/exporter/guide.tsx
+++ b/web/components/exporter/guide.tsx
@@ -13,7 +13,8 @@ import IntegrationService from "services/integration.service";
 // components
 import { Exporter, SingleExport } from "components/exporter";
 // ui
-import { Icon, Loader, PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
+import { Icon, Loader } from "components/ui";
 // icons
 import { ArrowPathIcon } from "@heroicons/react/24/outline";
 // fetch-keys
@@ -65,9 +66,9 @@ const IntegrationGuide = () => {
                   <div className="flex-shrink-0">
                     <Link href={`/${workspaceSlug}/settings/exports?provider=${service.provider}`}>
                       <a>
-                        <PrimaryButton>
+                        <Button variant="primary">
                           <span className="capitalize">{service.type}</span>
-                        </PrimaryButton>
+                        </Button>
                       </a>
                     </Link>
                   </div>
diff --git a/web/components/exporter/single-export.tsx b/web/components/exporter/single-export.tsx
index 772119f25a3..8abde68c2db 100644
--- a/web/components/exporter/single-export.tsx
+++ b/web/components/exporter/single-export.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 // ui
-import { PrimaryButton } from "components/ui"; // icons
+import { Button } from "@plane/ui";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
@@ -29,13 +29,7 @@ export const SingleExport: React.FC<Props> = ({ service, refreshing }) => {
           <span>
             Export to{" "}
             <span className="font-medium">
-              {provider === "csv"
-                ? "CSV"
-                : provider === "xlsx"
-                ? "Excel"
-                : provider === "json"
-                ? "JSON"
-                : ""}
+              {provider === "csv" ? "CSV" : provider === "xlsx" ? "Excel" : provider === "json" ? "JSON" : ""}
             </span>{" "}
           </span>
           <span
@@ -64,9 +58,9 @@ export const SingleExport: React.FC<Props> = ({ service, refreshing }) => {
           {service.status == "completed" && (
             <div>
               <a target="_blank" href={service?.url} rel="noopener noreferrer">
-                <PrimaryButton className="w-full text-center">
+                <Button variant="primary" className="w-full text-center">
                   {isLoading ? "Downloading..." : "Download"}
-                </PrimaryButton>
+                </Button>
               </a>
             </div>
           )}
diff --git a/web/components/inbox/accept-issue-modal.tsx b/web/components/inbox/accept-issue-modal.tsx
index be557536ba7..d84e21c3ac0 100644
--- a/web/components/inbox/accept-issue-modal.tsx
+++ b/web/components/inbox/accept-issue-modal.tsx
@@ -5,7 +5,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { CheckCircleIcon } from "@heroicons/react/24/outline";
 // ui
-import { SecondaryButton, PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { IInboxIssue } from "types";
 
@@ -76,10 +76,12 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton onClick={handleAccept} loading={isAccepting}>
+                    <Button variant="secondary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" onClick={handleAccept} loading={isAccepting}>
                       {isAccepting ? "Accepting..." : "Accept Issue"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/inbox/decline-issue-modal.tsx b/web/components/inbox/decline-issue-modal.tsx
index b3168915a56..118824bd3d1 100644
--- a/web/components/inbox/decline-issue-modal.tsx
+++ b/web/components/inbox/decline-issue-modal.tsx
@@ -5,7 +5,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { IInboxIssue } from "types";
 
@@ -60,10 +60,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
                 <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-500/20 p-4">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <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">Decline Issue</h3>
@@ -79,10 +76,12 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <DangerButton onClick={handleDecline} loading={isDeclining}>
+                    <Button variant="secondary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" onClick={handleDecline} loading={isDeclining}>
                       {isDeclining ? "Declining..." : "Decline Issue"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/inbox/delete-issue-modal.tsx b/web/components/inbox/delete-issue-modal.tsx
index a000571133c..232fbdad1e0 100644
--- a/web/components/inbox/delete-issue-modal.tsx
+++ b/web/components/inbox/delete-issue-modal.tsx
@@ -15,7 +15,7 @@ import useUser from "hooks/use-user";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { IInboxIssue } from "types";
 // fetch-keys
@@ -115,10 +115,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
                 <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-500/20 p-4">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <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>
@@ -130,15 +127,16 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
                       <span className="break-words font-medium text-custom-text-100">
                         {data?.project_detail?.identifier}-{data?.sequence_id}
                       </span>
-                      {""}? The issue will only be deleted from the inbox and this action cannot be
-                      undone.
+                      {""}? The issue will only be deleted from the inbox and this action cannot be undone.
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <DangerButton onClick={handleDelete} loading={isDeleting}>
+                    <Button variant="secondary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" onClick={handleDelete} loading={isDeleting}>
                       {isDeleting ? "Deleting..." : "Delete Issue"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/inbox/inbox-action-headers.tsx b/web/components/inbox/inbox-action-headers.tsx
index 86bc15d01aa..7bab9c227a3 100644
--- a/web/components/inbox/inbox-action-headers.tsx
+++ b/web/components/inbox/inbox-action-headers.tsx
@@ -25,7 +25,7 @@ import {
   SelectDuplicateInboxIssueModal,
 } from "components/inbox";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { InboxIcon, StackedLayersHorizontalIcon } from "components/icons";
 import {
@@ -74,9 +74,7 @@ export const InboxActionHeader = () => {
     mutateInboxIssues(
       (prevData: any) =>
         (prevData ?? []).map((i: any) =>
-          i.bridge_id === inboxIssueId
-            ? { ...i, issue_inbox: [{ ...i.issue_inbox[0], ...data }] }
-            : i
+          i.bridge_id === inboxIssueId ? { ...i, issue_inbox: [{ ...i.issue_inbox[0], ...data }] } : i
         ),
       false
     );
@@ -104,8 +102,7 @@ export const InboxActionHeader = () => {
   };
 
   const issue = inboxIssues?.find((issue) => issue.bridge_id === inboxIssueId);
-  const currentIssueIndex =
-    inboxIssues?.findIndex((issue) => issue.bridge_id === inboxIssueId) ?? 0;
+  const currentIssueIndex = inboxIssues?.findIndex((issue) => issue.bridge_id === inboxIssueId) ?? 0;
 
   useEffect(() => {
     if (!issue?.issue_inbox[0].snoozed_till) return;
@@ -126,10 +123,7 @@ export const InboxActionHeader = () => {
       <SelectDuplicateInboxIssueModal
         isOpen={selectDuplicateIssue}
         onClose={() => setSelectDuplicateIssue(false)}
-        value={
-          inboxIssues?.find((inboxIssue) => inboxIssue.bridge_id === inboxIssueId)?.issue_inbox[0]
-            .duplicate_to
-        }
+        value={inboxIssues?.find((inboxIssue) => inboxIssue.bridge_id === inboxIssueId)?.issue_inbox[0].duplicate_to}
         onSubmit={(dupIssueId: string) => {
           markInboxStatus({
             status: 2,
@@ -202,10 +196,10 @@ export const InboxActionHeader = () => {
                 <div className="flex-shrink-0">
                   <Popover className="relative">
                     <Popover.Button as="button" type="button">
-                      <SecondaryButton className="flex gap-x-1 items-center" size="sm">
+                      <Button variant="secondary" className="flex gap-x-1 items-center" size="sm">
                         <ClockIcon className="h-4 w-4 text-custom-text-200" />
                         <span>Snooze</span>
-                      </SecondaryButton>
+                      </Button>
                     </Popover.Button>
                     <Popover.Panel className="w-80 p-2 absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-80 shadow-lg">
                       {({ close }) => (
@@ -220,7 +214,8 @@ export const InboxActionHeader = () => {
                             minDate={tomorrow}
                             inline
                           />
-                          <PrimaryButton
+                          <Button
+                            variant="primary"
                             className="ml-auto"
                             onClick={() => {
                               close();
@@ -231,7 +226,7 @@ export const InboxActionHeader = () => {
                             }}
                           >
                             Snooze
-                          </PrimaryButton>
+                          </Button>
                         </div>
                       )}
                     </Popover.Panel>
@@ -240,50 +235,54 @@ export const InboxActionHeader = () => {
               )}
               {isAllowed && issueStatus === -2 && (
                 <div className="flex-shrink-0">
-                  <SecondaryButton
+                  <Button
+                    variant="secondary"
                     size="sm"
                     className="flex gap-2 items-center"
                     onClick={() => setSelectDuplicateIssue(true)}
                   >
                     <StackedLayersHorizontalIcon className="h-4 w-4 text-custom-text-200" />
                     <span>Mark as duplicate</span>
-                  </SecondaryButton>
+                  </Button>
                 </div>
               )}
               {isAllowed && (issueStatus === 0 || issueStatus === -2) && (
                 <div className="flex-shrink-0">
-                  <SecondaryButton
+                  <Button
+                    variant="secondary"
                     size="sm"
                     className="flex gap-2 items-center"
                     onClick={() => setAcceptIssueModal(true)}
                   >
                     <CheckCircleIcon className="h-4 w-4 text-green-500" />
                     <span>Accept</span>
-                  </SecondaryButton>
+                  </Button>
                 </div>
               )}
               {isAllowed && issueStatus === -2 && (
                 <div className="flex-shrink-0">
-                  <SecondaryButton
+                  <Button
+                    variant="secondary"
                     size="sm"
                     className="flex gap-2 items-center"
                     onClick={() => setDeclineIssueModal(true)}
                   >
                     <XCircleIcon className="h-4 w-4 text-red-500" />
                     <span>Decline</span>
-                  </SecondaryButton>
+                  </Button>
                 </div>
               )}
               {(isAllowed || user?.id === issue?.created_by) && (
                 <div className="flex-shrink-0">
-                  <SecondaryButton
+                  <Button
+                    variant="secondary"
                     size="sm"
                     className="flex gap-2 items-center"
                     onClick={() => setDeleteIssueModal(true)}
                   >
                     <TrashIcon className="h-4 w-4 text-red-500" />
                     <span>Delete</span>
-                  </SecondaryButton>
+                  </Button>
                 </div>
               )}
             </div>
diff --git a/web/components/inbox/select-duplicate.tsx b/web/components/inbox/select-duplicate.tsx
index 8dbb58faa24..7f066a88a51 100644
--- a/web/components/inbox/select-duplicate.tsx
+++ b/web/components/inbox/select-duplicate.tsx
@@ -13,7 +13,7 @@ import useToast from "hooks/use-toast";
 // services
 import issuesServices from "services/issue.service";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { LayerDiagonalIcon } from "components/icons";
@@ -170,8 +170,12 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
 
                   {filteredIssues.length > 0 && (
                     <div className="flex items-center justify-end gap-2 p-3">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton onClick={handleSubmit}>Mark as original</PrimaryButton>
+                      <Button variant="secondary" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" onClick={handleSubmit}>
+                        Mark as original
+                      </Button>
                     </div>
                   )}
                 </Dialog.Panel>
diff --git a/web/components/integration/delete-import-modal.tsx b/web/components/integration/delete-import-modal.tsx
index 0ea2c2b7c1c..855b9aac84e 100644
--- a/web/components/integration/delete-import-modal.tsx
+++ b/web/components/integration/delete-import-modal.tsx
@@ -11,8 +11,7 @@ import IntegrationService from "services/integration.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
@@ -124,10 +123,17 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
                     />
                   </div>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <DangerButton onClick={handleDeletion} disabled={!confirmDeleteImport} loading={deleteLoading}>
+                    <Button variant="secondary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="danger"
+                      onClick={handleDeletion}
+                      disabled={!confirmDeleteImport}
+                      loading={deleteLoading}
+                    >
                       {deleteLoading ? "Deleting..." : "Delete Project"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/integration/github/auth.tsx b/web/components/integration/github/auth.tsx
index b530b4a24b8..c94bfacd572 100644
--- a/web/components/integration/github/auth.tsx
+++ b/web/components/integration/github/auth.tsx
@@ -1,7 +1,7 @@
 // hooks
 import useIntegrationPopup from "hooks/use-integration-popup";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import { IWorkspaceIntegration } from "types";
 
@@ -16,11 +16,13 @@ export const GithubAuth: React.FC<Props> = ({ workspaceIntegration, provider })
   return (
     <div>
       {workspaceIntegration && workspaceIntegration?.id ? (
-        <PrimaryButton disabled>Successfully Connected</PrimaryButton>
+        <Button variant="primary" disabled>
+          Successfully Connected
+        </Button>
       ) : (
-        <PrimaryButton onClick={startAuth} loading={isConnecting}>
+        <Button variant="primary" onClick={startAuth} loading={isConnecting}>
           {isConnecting ? "Connecting..." : "Connect"}
-        </PrimaryButton>
+        </Button>
       )}
     </div>
   );
diff --git a/web/components/integration/github/import-configure.tsx b/web/components/integration/github/import-configure.tsx
index ca5a55a77d3..f804d32dddb 100644
--- a/web/components/integration/github/import-configure.tsx
+++ b/web/components/integration/github/import-configure.tsx
@@ -1,7 +1,6 @@
 // components
+import { Button } from "@plane/ui";
 import { GithubAuth, TIntegrationSteps } from "components/integration";
-// ui
-import { PrimaryButton } from "components/ui";
 // types
 import { IAppIntegration, IWorkspaceIntegration } from "types";
 
@@ -20,9 +19,7 @@ export const GithubImportConfigure: React.FC<Props> = ({
 }) => {
   // current integration from all the integrations available
   const integration =
-    appIntegrations &&
-    appIntegrations.length > 0 &&
-    appIntegrations.find((i) => i.provider === provider);
+    appIntegrations && appIntegrations.length > 0 && appIntegrations.find((i) => i.provider === provider);
 
   // current integration from workspace integrations
   const workspaceIntegration =
@@ -44,12 +41,13 @@ export const GithubImportConfigure: React.FC<Props> = ({
       </div>
 
       <div className="flex items-center justify-end">
-        <PrimaryButton
+        <Button
+          variant="primary"
           onClick={() => handleStepChange("import-data")}
           disabled={workspaceIntegration && workspaceIntegration?.id ? false : true}
         >
           Next
-        </PrimaryButton>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/integration/github/import-confirm.tsx b/web/components/integration/github/import-confirm.tsx
index 8a7383062ef..69b27b2710e 100644
--- a/web/components/integration/github/import-confirm.tsx
+++ b/web/components/integration/github/import-confirm.tsx
@@ -3,7 +3,7 @@ import { FC } from "react";
 // react-hook-form
 import { UseFormWatch } from "react-hook-form";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import { TFormValues, TIntegrationSteps } from "components/integration";
 
@@ -15,13 +15,16 @@ type Props = {
 export const GithubImportConfirm: FC<Props> = ({ handleStepChange, watch }) => (
   <div className="mt-6">
     <h4 className="font-medium text-custom-text-200">
-      You are about to import issues from {watch("github").full_name}. Click on {'"'}Confirm &
-      Import{'" '}
+      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>
+      <Button variant="secondary" onClick={() => handleStepChange("import-users")}>
+        Back
+      </Button>
+      <Button variant="primary" type="submit">
+        Confirm & Import
+      </Button>
     </div>
   </div>
 );
diff --git a/web/components/integration/github/import-data.tsx b/web/components/integration/github/import-data.tsx
index eeae3f28de1..f7dce7a8688 100644
--- a/web/components/integration/github/import-data.tsx
+++ b/web/components/integration/github/import-data.tsx
@@ -7,7 +7,8 @@ import useProjects from "hooks/use-projects";
 // components
 import { SelectRepository, TFormValues, TIntegrationSteps } from "components/integration";
 // ui
-import { CustomSearchSelect, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
+import { Button } from "@plane/ui";
+import { CustomSearchSelect, ToggleSwitch } from "components/ui";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
@@ -51,11 +52,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
                     integration={integration}
                     value={value ? value.id : null}
                     label={
-                      value ? (
-                        `${value.full_name}`
-                      ) : (
-                        <span className="text-custom-text-200">Select Repository</span>
-                      )
+                      value ? `${value.full_name}` : <span className="text-custom-text-200">Select Repository</span>
                     }
                     onChange={onChange}
                     characterLimit={50}
@@ -68,9 +65,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         <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-xs text-custom-text-200">
-              Select the project to import the issues to.
-            </p>
+            <p className="text-xs text-custom-text-200">Select the project to import the issues to.</p>
           </div>
           <div className="col-span-12 sm:col-span-4">
             {projects && (
@@ -99,9 +94,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         <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-xs text-custom-text-200">
-              Set whether you want to sync the issues or not.
-            </p>
+            <p className="text-xs text-custom-text-200">Set whether you want to sync the issues or not.</p>
           </div>
           <div className="col-span-12 sm:col-span-4">
             <Controller
@@ -115,13 +108,16 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         </div>
       </div>
       <div className="mt-6 flex items-center justify-end gap-2">
-        <SecondaryButton onClick={() => handleStepChange("import-configure")}>Back</SecondaryButton>
-        <PrimaryButton
+        <Button variant="secondary" onClick={() => handleStepChange("import-configure")}>
+          Back
+        </Button>
+        <Button
+          variant="primary"
           onClick={() => handleStepChange("repo-details")}
           disabled={!watch("github") || !watch("project")}
         >
           Next
-        </PrimaryButton>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/integration/github/import-users.tsx b/web/components/integration/github/import-users.tsx
index e4caf349b96..efedce2b68b 100644
--- a/web/components/integration/github/import-users.tsx
+++ b/web/components/integration/github/import-users.tsx
@@ -3,14 +3,9 @@ import { FC } from "react";
 // react-hook-form
 import { UseFormWatch } from "react-hook-form";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
-import {
-  IUserDetails,
-  SingleUserSelect,
-  TFormValues,
-  TIntegrationSteps,
-} from "components/integration";
+import { IUserDetails, SingleUserSelect, TFormValues, TIntegrationSteps } from "components/integration";
 
 type Props = {
   handleStepChange: (value: TIntegrationSteps) => void;
@@ -28,9 +23,7 @@ export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers
         <div className="mb-2 grid grid-cols-3 gap-2 text-sm font-medium">
           <div className="text-custom-text-200">Name</div>
           <div className="text-custom-text-200">Import as...</div>
-          <div className="text-right">
-            {users.filter((u) => u.import !== false).length} users selected
-          </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) => (
@@ -45,10 +38,12 @@ export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, 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}>
+        <Button variant="secondary" onClick={() => handleStepChange("repo-details")}>
+          Back
+        </Button>
+        <Button variant="primary" onClick={() => handleStepChange("import-confirm")} disabled={isInvalid}>
           Next
-        </PrimaryButton>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/integration/github/repo-details.tsx b/web/components/integration/github/repo-details.tsx
index b53ae2f01ec..8f1a41b2da8 100644
--- a/web/components/integration/github/repo-details.tsx
+++ b/web/components/integration/github/repo-details.tsx
@@ -9,7 +9,8 @@ import { UseFormSetValue } from "react-hook-form";
 // services
 import GithubIntegrationService from "services/github.service";
 // ui
-import { Loader, PrimaryButton, SecondaryButton } from "components/ui";
+import { Loader } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import { IUserDetails, TFormValues, TIntegrationSteps } from "components/integration";
 // fetch-keys
@@ -85,13 +86,16 @@ export const GithubRepoDetails: FC<Props> = ({ selectedRepo, handleStepChange, s
         </Loader>
       )}
       <div className="mt-6 flex items-center justify-end gap-2">
-        <SecondaryButton onClick={() => handleStepChange("import-data")}>Back</SecondaryButton>
-        <PrimaryButton
+        <Button variant="secondary" onClick={() => handleStepChange("import-data")}>
+          Back
+        </Button>
+        <Button
+          variant="primary"
           onClick={() => handleStepChange("import-users")}
           disabled={!repoInfo || repoInfo.issue_count === 0}
         >
           Next
-        </PrimaryButton>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/integration/guide.tsx b/web/components/integration/guide.tsx
index 3d8e5d39a91..8f1bb7fd6a1 100644
--- a/web/components/integration/guide.tsx
+++ b/web/components/integration/guide.tsx
@@ -13,7 +13,8 @@ import IntegrationService from "services/integration.service";
 // components
 import { DeleteImportModal, GithubImporterRoot, JiraImporterRoot, SingleImport } from "components/integration";
 // ui
-import { Loader, PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
+import { Loader } from "components/ui";
 // icons
 import { ArrowPathIcon } from "@heroicons/react/24/outline";
 // types
@@ -90,9 +91,9 @@ const IntegrationGuide = () => {
                 <div className="flex-shrink-0">
                   <Link href={`/${workspaceSlug}/settings/imports?provider=${service.provider}`}>
                     <a>
-                      <PrimaryButton>
+                      <Button variant="primary">
                         <span className="capitalize">{service.type}</span>
-                      </PrimaryButton>
+                      </Button>
                     </a>
                   </Link>
                 </div>
diff --git a/web/components/integration/jira/root.tsx b/web/components/integration/jira/root.tsx
index 2a4b572ec17..374f0f1b32d 100644
--- a/web/components/integration/jira/root.tsx
+++ b/web/components/integration/jira/root.tsx
@@ -22,7 +22,7 @@ import jiraImporterService from "services/jira.service";
 import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
 
 // components
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 import {
   JiraGetImportDetail,
   JiraProjectDetail,
@@ -178,7 +178,8 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
 
               <div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-custom-border-200 p-4 pb-0">
                 {currentStep?.state !== "import-configure" && (
-                  <SecondaryButton
+                  <Button
+                    variant="secondary"
                     onClick={() => {
                       const currentElementIndex = integrationWorkflowData.findIndex(
                         (i) => i?.key === currentStep?.state
@@ -189,9 +190,10 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
                     }}
                   >
                     Back
-                  </SecondaryButton>
+                  </Button>
                 )}
-                <PrimaryButton
+                <Button
+                  variant="primary"
                   disabled={disableTopBarAfter === currentStep?.state || !isValid || methods.formState.isSubmitting}
                   onClick={() => {
                     const currentElementIndex = integrationWorkflowData.findIndex((i) => i?.key === currentStep?.state);
@@ -206,7 +208,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
                   }}
                 >
                   {currentStep?.state === "import-confirmation" ? "Confirm & Import" : "Next"}
-                </PrimaryButton>
+                </Button>
               </div>
             </form>
           </FormProvider>
diff --git a/web/components/integration/single-integration-card.tsx b/web/components/integration/single-integration-card.tsx
index 8dbc60bf58d..7780edd1796 100644
--- a/web/components/integration/single-integration-card.tsx
+++ b/web/components/integration/single-integration-card.tsx
@@ -11,7 +11,8 @@ import IntegrationService from "services/integration.service";
 import useToast from "hooks/use-toast";
 import useIntegrationPopup from "hooks/use-integration-popup";
 // ui
-import { DangerButton, Loader, PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
+import { Loader } from "components/ui";
 // icons
 import GithubLogo from "public/services/github.png";
 import SlackLogo from "public/services/slack.png";
@@ -113,13 +114,13 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
 
       {workspaceIntegrations ? (
         isInstalled ? (
-          <DangerButton onClick={handleRemoveIntegration} loading={deletingIntegration} outline>
+          <Button variant="danger" onClick={handleRemoveIntegration} loading={deletingIntegration} outline>
             {deletingIntegration ? "Uninstalling..." : "Uninstall"}
-          </DangerButton>
+          </Button>
         ) : (
-          <PrimaryButton onClick={startAuth} loading={isInstalling}>
+          <Button variant="primary" onClick={startAuth} loading={isInstalling}>
             {isInstalling ? "Installing..." : "Install"}
-          </PrimaryButton>
+          </Button>
         )
       ) : (
         <Loader>
diff --git a/web/components/issues/attachment/delete-attachment-modal.tsx b/web/components/issues/attachment/delete-attachment-modal.tsx
index 62dc3cffe13..908d59e047d 100644
--- a/web/components/issues/attachment/delete-attachment-modal.tsx
+++ b/web/components/issues/attachment/delete-attachment-modal.tsx
@@ -11,7 +11,7 @@ import issuesService from "services/issue.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // helper
@@ -106,15 +106,18 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
                     </div>
                   </div>
                   <div className="flex justify-end gap-2 bg-custom-background-90 p-4 sm:px-6">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <DangerButton
+                    <Button variant="secondary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="danger"
                       onClick={() => {
                         handleDeletion(data.id);
                         handleClose();
                       }}
                     >
                       Delete
-                    </DangerButton>
+                    </Button>
                   </div>
                 </Dialog.Panel>
               </Transition.Child>
diff --git a/web/components/issues/comment/add-comment.tsx b/web/components/issues/comment/add-comment.tsx
index 33d7f2289c7..1cabb6f2f16 100644
--- a/web/components/issues/comment/add-comment.tsx
+++ b/web/components/issues/comment/add-comment.tsx
@@ -5,7 +5,8 @@ import { useForm, Controller } from "react-hook-form";
 // components
 import { TipTapEditor } from "components/tiptap";
 // ui
-import { Icon, SecondaryButton, Tooltip } from "components/ui";
+import { Icon, Tooltip } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { IIssueComment } from "types";
 
@@ -33,11 +34,7 @@ const commentAccess = [
   },
 ];
 
-export const AddComment: React.FC<Props> = ({
-  disabled = false,
-  onSubmit,
-  showAccessSpecifier = false,
-}) => {
+export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit, showAccessSpecifier = false }) => {
   const editorRef = React.useRef<any>(null);
 
   const router = useRouter();
@@ -83,9 +80,7 @@ export const AddComment: React.FC<Props> = ({
                             <Icon
                               iconName={access.icon}
                               className={`w-4 h-4 -mt-1 ${
-                                value === access.key
-                                  ? "!text-custom-text-100"
-                                  : "!text-custom-text-400"
+                                value === access.key ? "!text-custom-text-100" : "!text-custom-text-400"
                               }`}
                             />
                           </button>
@@ -112,9 +107,9 @@ export const AddComment: React.FC<Props> = ({
             />
           </div>
 
-          <SecondaryButton type="submit" disabled={isSubmitting || disabled} className="mt-2">
+          <Button variant="secondary" type="submit" disabled={isSubmitting || disabled} className="mt-2">
             {isSubmitting ? "Adding..." : "Comment"}
-          </SecondaryButton>
+          </Button>
         </div>
       </form>
     </div>
diff --git a/web/components/issues/confirm-issue-discard.tsx b/web/components/issues/confirm-issue-discard.tsx
index f8feab73d65..24ccc3f2b10 100644
--- a/web/components/issues/confirm-issue-discard.tsx
+++ b/web/components/issues/confirm-issue-discard.tsx
@@ -3,7 +3,7 @@ import React, { useState } from "react";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { SecondaryButton, PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
@@ -58,29 +58,28 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mt-3 text-center sm:mt-0 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-custom-text-100"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         Draft Issue
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          Would you like to save this issue in drafts?
-                        </p>
+                        <p className="text-sm text-custom-text-200">Would you like to save this issue in drafts?</p>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div className="flex justify-between gap-2 p-4 sm:px-6">
                   <div>
-                    <SecondaryButton onClick={onDiscard}>Discard</SecondaryButton>
+                    <Button variant="secondary" onClick={onDiscard}>
+                      Discard
+                    </Button>
                   </div>
                   <div className="space-x-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton onClick={handleDeletion} loading={isLoading}>
+                    <Button variant="secondary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" onClick={handleDeletion} loading={isLoading}>
                       {isLoading ? "Saving..." : "Save Draft"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/issues/delete-draft-issue-modal.tsx b/web/components/issues/delete-draft-issue-modal.tsx
index e7f748975ef..e0f84153969 100644
--- a/web/components/issues/delete-draft-issue-modal.tsx
+++ b/web/components/issues/delete-draft-issue-modal.tsx
@@ -16,7 +16,7 @@ import useToast from "hooks/use-toast";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { IIssue } from "types";
 // fetch-keys
@@ -129,10 +129,12 @@ export const DeleteDraftIssueModal: React.FC<Props> = (props) => {
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                    <Button variant="secondary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                       {isDeleteLoading ? "Deleting..." : "Delete Issue"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/issues/delete-issue-modal.tsx b/web/components/issues/delete-issue-modal.tsx
index 2f23f3f6378..605ec985c15 100644
--- a/web/components/issues/delete-issue-modal.tsx
+++ b/web/components/issues/delete-issue-modal.tsx
@@ -14,7 +14,7 @@ import useToast from "hooks/use-toast";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { IIssue, ICurrentUserResponse, ISubIssueResponse } from "types";
 // fetch-keys
@@ -182,10 +182,12 @@ export const DeleteIssueModal: React.FC<Props> = ({
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <DangerButton onClick={handleIssueDelete} loading={isDeleteLoading}>
+                    <Button variant="secondary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" onClick={handleIssueDelete} loading={isDeleteLoading}>
                       {isDeleteLoading ? "Deleting..." : "Delete Issue"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/issues/draft-issue-form.tsx b/web/components/issues/draft-issue-form.tsx
index a2715b6b3d9..43cda61bf57 100644
--- a/web/components/issues/draft-issue-form.tsx
+++ b/web/components/issues/draft-issue-form.tsx
@@ -24,8 +24,8 @@ import {
 import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
 // ui
-import { CustomMenu, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
-import { Input } from "@plane/ui";
+import { CustomMenu, ToggleSwitch } from "components/ui";
+import { Button, Input } from "@plane/ui";
 import { TipTapEditor } from "components/tiptap";
 // icons
 import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
@@ -593,23 +593,27 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
             <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
           </div>
           <div className="flex items-center gap-2">
-            <SecondaryButton onClick={handleDiscard}>Discard</SecondaryButton>
-            <SecondaryButton
+            <Button variant="secondary" onClick={handleDiscard}>
+              Discard
+            </Button>
+            <Button
+              variant="secondary"
               loading={isSubmitting}
               onClick={handleSubmit((formData) =>
                 handleCreateUpdateIssue(formData, data?.id ? "updateDraft" : "createDraft")
               )}
             >
               {isSubmitting ? "Saving..." : "Save Draft"}
-            </SecondaryButton>
-            <PrimaryButton
+            </Button>
+            <Button
               loading={isSubmitting}
+              variant="primary"
               onClick={handleSubmit((formData) =>
                 handleCreateUpdateIssue(formData, data ? "convertToNewIssue" : "createNewIssue")
               )}
             >
               {isSubmitting ? "Saving..." : "Add Issue"}
-            </PrimaryButton>
+            </Button>
           </div>
         </div>
       </form>
diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx
index 68dcf71349d..0eae65a3bb6 100644
--- a/web/components/issues/form.tsx
+++ b/web/components/issues/form.tsx
@@ -23,8 +23,8 @@ import {
 import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
 // ui
-import { CustomMenu, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
-import { Input } from "@plane/ui";
+import { CustomMenu, ToggleSwitch } from "components/ui";
+import { Button, Input } from "@plane/ui";
 import { TipTapEditor } from "components/tiptap";
 // icons
 import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
@@ -558,14 +558,15 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
             <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
           </div>
           <div className="flex items-center gap-2">
-            <SecondaryButton
+            <Button
+              variant="secondary"
               onClick={() => {
                 handleDiscardClose();
               }}
             >
               Discard
-            </SecondaryButton>
-            <PrimaryButton type="submit" loading={isSubmitting}>
+            </Button>
+            <Button variant="primary" type="submit" loading={isSubmitting}>
               {status
                 ? isSubmitting
                   ? "Updating Issue..."
@@ -573,7 +574,7 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
                 : isSubmitting
                 ? "Adding Issue..."
                 : "Add Issue"}
-            </PrimaryButton>
+            </Button>
           </div>
         </div>
       </form>
diff --git a/web/components/issues/workspace-views/workpace-view-issues.tsx b/web/components/issues/workspace-views/workpace-view-issues.tsx
index 78a12f80706..664d52e5fb1 100644
--- a/web/components/issues/workspace-views/workpace-view-issues.tsx
+++ b/web/components/issues/workspace-views/workpace-view-issues.tsx
@@ -15,8 +15,9 @@ import { useWorkspaceView } from "hooks/use-workspace-view";
 import useWorkspaceMembers from "hooks/use-workspace-members";
 import useToast from "hooks/use-toast";
 // components
+import { Button } from "@plane/ui";
 import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
-import { EmptyState, PrimaryButton } from "components/ui";
+import { EmptyState } from "components/ui";
 import { SpreadsheetView, WorkspaceFiltersList } from "components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
@@ -38,10 +39,7 @@ export const WorkspaceViewIssues = () => {
 
   const { memberRole } = useProjectMyMembership();
   const { user } = useUser();
-  const { isGuest, isViewer } = useWorkspaceMembers(
-    workspaceSlug?.toString(),
-    Boolean(workspaceSlug)
-  );
+  const { isGuest, isViewer } = useWorkspaceMembers(workspaceSlug?.toString(), Boolean(workspaceSlug));
   const { filters, viewIssues, mutateViewIssues, handleFilters } = useWorkspaceView();
 
   const [createViewModal, setCreateViewModal] = useState<any>(null);
@@ -54,9 +52,7 @@ export const WorkspaceViewIssues = () => {
 
   // update issue modal
   const [editIssueModal, setEditIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<
-    (IIssue & { actionType: "edit" | "delete" }) | undefined
-  >(undefined);
+  const [issueToEdit, setIssueToEdit] = useState<(IIssue & { actionType: "edit" | "delete" }) | undefined>(undefined);
 
   // delete issue modal
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
@@ -192,7 +188,8 @@ export const WorkspaceViewIssues = () => {
                         })
                       }
                     />
-                    <PrimaryButton
+                    <Button
+                      variant="primary"
                       onClick={() => {
                         if (globalViewId) {
                           handleFilters("filters", filters.filters, true);
@@ -210,7 +207,7 @@ export const WorkspaceViewIssues = () => {
                     >
                       {!globalViewId && <PlusIcon className="h-4 w-4" />}
                       {globalViewId ? "Update" : "Save"} view
-                    </PrimaryButton>
+                    </Button>
                   </div>
                   {<div className="mt-3 border-t border-custom-border-200" />}
                 </>
diff --git a/web/components/issues/workspace-views/workspace-all-issue.tsx b/web/components/issues/workspace-views/workspace-all-issue.tsx
index 4618c331d1d..3eccae26ef1 100644
--- a/web/components/issues/workspace-views/workspace-all-issue.tsx
+++ b/web/components/issues/workspace-views/workspace-all-issue.tsx
@@ -19,7 +19,7 @@ import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-vi
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // fetch-keys
@@ -43,9 +43,7 @@ export const WorkspaceAllIssue = () => {
 
   // update issue modal
   const [editIssueModal, setEditIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<
-    (IIssue & { actionType: "edit" | "delete" }) | undefined
-  >(undefined);
+  const [issueToEdit, setIssueToEdit] = useState<(IIssue & { actionType: "edit" | "delete" }) | undefined>(undefined);
 
   // delete issue modal
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
@@ -66,16 +64,12 @@ export const WorkspaceAllIssue = () => {
   const params: any = {
     assignees: filters?.filters?.assignees ? filters?.filters?.assignees.join(",") : undefined,
     subscriber: filters?.filters?.subscriber ? filters?.filters?.subscriber.join(",") : undefined,
-    state_group: filters?.filters?.state_group
-      ? filters?.filters?.state_group.join(",")
-      : undefined,
+    state_group: filters?.filters?.state_group ? filters?.filters?.state_group.join(",") : undefined,
     priority: filters?.filters?.priority ? filters?.filters?.priority.join(",") : undefined,
     labels: filters?.filters?.labels ? filters?.filters?.labels.join(",") : undefined,
     created_by: filters?.filters?.created_by ? filters?.filters?.created_by.join(",") : undefined,
     start_date: filters?.filters?.start_date ? filters?.filters?.start_date.join(",") : undefined,
-    target_date: filters?.filters?.target_date
-      ? filters?.filters?.target_date.join(",")
-      : undefined,
+    target_date: filters?.filters?.target_date ? filters?.filters?.target_date.join(",") : undefined,
     project: filters?.filters?.project ? filters?.filters?.project.join(",") : undefined,
     sub_issue: false,
     type: undefined,
@@ -203,7 +197,8 @@ export const WorkspaceAllIssue = () => {
                       })
                     }
                   />
-                  <PrimaryButton
+                  <Button
+                    variant="primary"
                     onClick={() => {
                       if (globalViewId) handleFilters("filters", filters.filters, true);
                       else
@@ -215,7 +210,7 @@ export const WorkspaceAllIssue = () => {
                   >
                     {!globalViewId && <PlusIcon className="h-4 w-4" />}
                     {globalViewId ? "Update" : "Save"} view
-                  </PrimaryButton>
+                  </Button>
                 </div>
                 {<div className="mt-3 border-t border-custom-border-200" />}
               </>
diff --git a/web/components/labels/create-label-modal.tsx b/web/components/labels/create-label-modal.tsx
index 12dfd355ea1..f04c77d563f 100644
--- a/web/components/labels/create-label-modal.tsx
+++ b/web/components/labels/create-label-modal.tsx
@@ -13,8 +13,7 @@ import { Dialog, Popover, Transition } from "@headlessui/react";
 // services
 import issuesService from "services/issue.service";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 // types
@@ -188,10 +187,12 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton type="submit" loading={isSubmitting}>
+                    <Button variant="secondary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" type="submit" loading={isSubmitting}>
                       {isSubmitting ? "Creating Label..." : "Create Label"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/labels/create-update-label-inline.tsx b/web/components/labels/create-update-label-inline.tsx
index d81b593b8b1..52ea30fc0b3 100644
--- a/web/components/labels/create-update-label-inline.tsx
+++ b/web/components/labels/create-update-label-inline.tsx
@@ -15,8 +15,7 @@ import { Popover, Transition } from "@headlessui/react";
 // services
 import issuesService from "services/issue.service";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
 // types
 import { IIssueLabels } from "types";
 // fetch-keys
@@ -186,15 +185,17 @@ export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(functio
           )}
         />
       </div>
-      <SecondaryButton onClick={() => handleClose()}>Cancel</SecondaryButton>
+      <Button variant="secondary" onClick={() => handleClose()}>
+        Cancel
+      </Button>
       {isUpdating ? (
-        <PrimaryButton onClick={handleSubmit(handleLabelUpdate)} loading={isSubmitting}>
+        <Button variant="primary" onClick={handleSubmit(handleLabelUpdate)} loading={isSubmitting}>
           {isSubmitting ? "Updating" : "Update"}
-        </PrimaryButton>
+        </Button>
       ) : (
-        <PrimaryButton onClick={handleSubmit(handleLabelCreate)} loading={isSubmitting}>
+        <Button variant="primary" onClick={handleSubmit(handleLabelCreate)} loading={isSubmitting}>
           {isSubmitting ? "Adding" : "Add"}
-        </PrimaryButton>
+        </Button>
       )}
     </div>
   );
diff --git a/web/components/labels/delete-label-modal.tsx b/web/components/labels/delete-label-modal.tsx
index 452fcd79806..d074ef5c8d3 100644
--- a/web/components/labels/delete-label-modal.tsx
+++ b/web/components/labels/delete-label-modal.tsx
@@ -13,7 +13,7 @@ import issuesService from "services/issue.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { ICurrentUserResponse, IIssueLabels } from "types";
 // fetch-keys
@@ -112,10 +112,12 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                  <Button variant="secondary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/modules/delete-module-modal.tsx b/web/components/modules/delete-module-modal.tsx
index 9faede08f14..354d613cc22 100644
--- a/web/components/modules/delete-module-modal.tsx
+++ b/web/components/modules/delete-module-modal.tsx
@@ -11,7 +11,7 @@ import modulesService from "services/modules.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
@@ -44,11 +44,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
 
     if (!workspaceSlug || !projectId || !data) return;
 
-    mutate<IModule[]>(
-      MODULE_LIST(projectId as string),
-      (prevData) => prevData?.filter((m) => m.id !== data.id),
-      false
-    );
+    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, user)
@@ -96,36 +92,29 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
                 <div className="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-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <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-custom-text-100"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         Delete Module
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete module-{" "}
-                          <span className="break-words font-medium text-custom-text-100">
-                            {data?.name}
-                          </span>
-                          ? All of the data related to the module will be permanently removed. This
-                          action cannot be undone.
+                          <span className="break-words font-medium text-custom-text-100">{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 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                  <Button variant="secondary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/modules/form.tsx b/web/components/modules/form.tsx
index 320b416fb8e..2385532c931 100644
--- a/web/components/modules/form.tsx
+++ b/web/components/modules/form.tsx
@@ -5,8 +5,8 @@ import { Controller, useForm } from "react-hook-form";
 // components
 import { ModuleLeadSelect, ModuleMembersSelect, ModuleStatusSelect } from "components/modules";
 // ui
-import { DateSelect, PrimaryButton, SecondaryButton } from "components/ui";
-import { Input, TextArea } from "@plane/ui";
+import { DateSelect } from "components/ui";
+import { Button, Input, TextArea } from "@plane/ui";
 // types
 import { IModule } from "types";
 
@@ -153,8 +153,10 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
         </div>
       </div>
       <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-200 px-5 pt-5">
-        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-        <PrimaryButton type="submit" loading={isSubmitting}>
+        <Button variant="secondary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
           {status
             ? isSubmitting
               ? "Updating Module..."
@@ -162,7 +164,7 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
             : isSubmitting
             ? "Creating Module..."
             : "Create Module"}
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/notifications/select-snooze-till-modal.tsx b/web/components/notifications/select-snooze-till-modal.tsx
index 99281350e32..979b9e96a8f 100644
--- a/web/components/notifications/select-snooze-till-modal.tsx
+++ b/web/components/notifications/select-snooze-till-modal.tsx
@@ -15,13 +15,8 @@ import { getAllTimeIn30MinutesInterval } from "helpers/date-time.helper";
 import useToast from "hooks/use-toast";
 
 // components
-import {
-  PrimaryButton,
-  SecondaryButton,
-  Icon,
-  CustomDatePicker,
-  CustomSelect,
-} from "components/ui";
+import { Button } from "@plane/ui";
+import { Icon, CustomDatePicker, CustomSelect } from "components/ui";
 
 // types
 import type { IUserNotification } from "types";
@@ -158,10 +153,7 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
               <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="flex justify-between items-center">
-                    <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-custom-text-100"
-                    >
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                       Customize Snooze Time
                     </Dialog.Title>
 
@@ -174,9 +166,7 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
 
                   <div className="mt-5 flex items-center gap-3">
                     <div className="flex-1">
-                      <h6 className="block text-sm font-medium text-custom-text-400 mb-2">
-                        Pick a date
-                      </h6>
+                      <h6 className="block text-sm font-medium text-custom-text-400 mb-2">Pick a date</h6>
                       <Controller
                         name="date"
                         control={control}
@@ -197,9 +187,7 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
                       />
                     </div>
                     <div className="flex-1">
-                      <h6 className="block text-sm font-medium text-custom-text-400 mb-2">
-                        Pick a time
-                      </h6>
+                      <h6 className="block text-sm font-medium text-custom-text-400 mb-2">Pick a time</h6>
                       <Controller
                         control={control}
                         name="time"
@@ -215,9 +203,7 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
                                     {value} {watch("period").toLowerCase()}
                                   </span>
                                 ) : (
-                                  <span className="text-custom-text-400 text-sm">
-                                    Select a time
-                                  </span>
+                                  <span className="text-custom-text-400 text-sm">Select a time</span>
                                 )}
                               </div>
                             }
@@ -259,9 +245,7 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
                                 </CustomSelect.Option>
                               ))
                             ) : (
-                              <p className="text-custom-text-200 text-center p-3">
-                                No available time for this date.
-                              </p>
+                              <p className="text-custom-text-200 text-center p-3">No available time for this date.</p>
                             )}
                           </CustomSelect>
                         )}
@@ -271,10 +255,12 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
 
                   <div className="mt-5 flex items-center justify-between gap-2">
                     <div className="w-full flex items-center gap-2 justify-end">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton type="submit" loading={isSubmitting}>
+                      <Button variant="secondary" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" type="submit" loading={isSubmitting}>
                         {isSubmitting ? "Submitting..." : "Submit"}
-                      </PrimaryButton>
+                      </Button>
                     </div>
                   </div>
                 </form>
diff --git a/web/components/onboarding/invite-members.tsx b/web/components/onboarding/invite-members.tsx
index 1a709de6b29..4f1887e3795 100644
--- a/web/components/onboarding/invite-members.tsx
+++ b/web/components/onboarding/invite-members.tsx
@@ -9,8 +9,7 @@ import workspaceService from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 // icons
@@ -258,12 +257,12 @@ export const InviteMembers: React.FC<Props> = (props) => {
         </button>
       </div>
       <div className="flex items-center gap-4">
-        <PrimaryButton type="submit" disabled={!isValid} loading={isSubmitting} size="md">
+        <Button variant="primary" type="submit" disabled={!isValid} loading={isSubmitting} size="md">
           {isSubmitting ? "Sending..." : "Send Invite"}
-        </PrimaryButton>
-        <SecondaryButton className="border border-none bg-transparent" size="md" onClick={nextStep}>
+        </Button>
+        <Button variant="secondary" className="border border-none bg-transparent" size="md" onClick={nextStep}>
           Skip this step
-        </SecondaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/onboarding/join-workspaces.tsx b/web/components/onboarding/join-workspaces.tsx
index 84b5bdfc971..fa0042a2e18 100644
--- a/web/components/onboarding/join-workspaces.tsx
+++ b/web/components/onboarding/join-workspaces.tsx
@@ -7,7 +7,7 @@ import workspaceService from "services/workspace.service";
 // hooks
 import useUser from "hooks/use-user";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { CheckCircleIcon } from "@heroicons/react/24/outline";
 // helpers
@@ -25,11 +25,7 @@ type Props = {
   updateLastWorkspace: () => Promise<void>;
 };
 
-export const JoinWorkspaces: React.FC<Props> = ({
-  finishOnboarding,
-  stepChange,
-  updateLastWorkspace,
-}) => {
+export const JoinWorkspaces: React.FC<Props> = ({ finishOnboarding, stepChange, updateLastWorkspace }) => {
   const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
   const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
 
@@ -39,16 +35,11 @@ export const JoinWorkspaces: React.FC<Props> = ({
     workspaceService.userWorkspaceInvitations()
   );
 
-  const handleInvitation = (
-    workspace_invitation: IWorkspaceMemberInvitation,
-    action: "accepted" | "withdraw"
-  ) => {
+  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)
-      );
+      setInvitationsRespond((prevData) => prevData.filter((item: string) => item !== workspace_invitation.id));
     }
   };
 
@@ -57,8 +48,7 @@ export const JoinWorkspaces: React.FC<Props> = ({
 
     await stepChange({ workspace_join: true });
 
-    if (user.onboarding_step.workspace_create && user.onboarding_step.workspace_invite)
-      await finishOnboarding();
+    if (user.onboarding_step.workspace_create && user.onboarding_step.workspace_invite) await finishOnboarding();
   };
 
   const submitInvitations = async () => {
@@ -91,9 +81,7 @@ export const JoinWorkspaces: React.FC<Props> = ({
               <div
                 key={invitation.id}
                 className={`flex cursor-pointer items-center gap-2 border py-5 px-3.5 rounded ${
-                  isSelected
-                    ? "border-custom-primary-100"
-                    : "border-custom-border-200 hover:bg-custom-background-80"
+                  isSelected ? "border-custom-primary-100" : "border-custom-border-200 hover:bg-custom-background-80"
                 }`}
                 onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
               >
@@ -115,16 +103,10 @@ export const JoinWorkspaces: React.FC<Props> = ({
                   </div>
                 </div>
                 <div className="min-w-0 flex-1">
-                  <div className="text-sm font-medium">
-                    {truncateText(invitation.workspace.name, 30)}
-                  </div>
+                  <div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
                   <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
                 </div>
-                <span
-                  className={`flex-shrink-0 ${
-                    isSelected ? "text-custom-primary-100" : "text-custom-text-200"
-                  }`}
-                >
+                <span className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-custom-text-200"}`}>
                   <CheckCircleIcon className="h-5 w-5" />
                 </span>
               </div>
@@ -132,7 +114,8 @@ export const JoinWorkspaces: React.FC<Props> = ({
           })}
       </div>
       <div className="flex items-center gap-3">
-        <PrimaryButton
+        <Button
+          variant="primary"
           type="submit"
           size="md"
           onClick={submitInvitations}
@@ -140,14 +123,10 @@ export const JoinWorkspaces: React.FC<Props> = ({
           loading={isJoiningWorkspaces}
         >
           Accept & Join
-        </PrimaryButton>
-        <SecondaryButton
-          className="border border-none bg-transparent"
-          size="md"
-          onClick={handleNextStep}
-        >
+        </Button>
+        <Button variant="secondary" className="border border-none bg-transparent" size="md" onClick={handleNextStep}>
           Skip for now
-        </SecondaryButton>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/onboarding/tour/root.tsx b/web/components/onboarding/tour/root.tsx
index a28d93d975b..5b5038795e8 100644
--- a/web/components/onboarding/tour/root.tsx
+++ b/web/components/onboarding/tour/root.tsx
@@ -7,7 +7,7 @@ import useUser from "hooks/use-user";
 // components
 import { TourSidebar } from "components/onboarding";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { XMarkIcon } from "@heroicons/react/24/outline";
 // images
@@ -52,8 +52,7 @@ const TOUR_STEPS: {
   {
     key: "modules",
     title: "Break into modules",
-    description:
-      "Modules break your big thing into Projects or Features, to help you organize better.",
+    description: "Modules break your big thing into Projects or Features, to help you organize better.",
     image: ModulesTour,
     prevStep: "cycles",
     nextStep: "views",
@@ -97,11 +96,13 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
                 Welcome to Plane, {user?.first_name} {user?.last_name}
               </h3>
               <p className="text-custom-text-200 text-sm mt-3">
-                We{"'"}re glad that you decided to try out Plane. You can now manage your projects
-                with ease. Get started by creating a project.
+                We{"'"}re glad that you decided to try out Plane. You can now manage your projects with ease. Get
+                started by creating a project.
               </p>
               <div className="flex items-center gap-6 mt-8">
-                <PrimaryButton onClick={() => setStep("issues")}>Take a Product Tour</PrimaryButton>
+                <Button variant="primary" onClick={() => setStep("issues")}>
+                  Take a Product Tour
+                </Button>
                 <button
                   type="button"
                   className="outline-custom-text-100 bg-transparent text-custom-primary-100 text-xs font-medium"
@@ -137,19 +138,20 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
               <div className="h-full flex items-end justify-between gap-4 mt-3">
                 <div className="flex items-center gap-4">
                   {currentStep?.prevStep && (
-                    <SecondaryButton onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
+                    <Button variant="secondary" onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
                       Back
-                    </SecondaryButton>
+                    </Button>
                   )}
                   {currentStep?.nextStep && (
-                    <PrimaryButton onClick={() => setStep(currentStep.nextStep ?? "issues")}>
+                    <Button variant="primary" onClick={() => setStep(currentStep.nextStep ?? "issues")}>
                       Next
-                    </PrimaryButton>
+                    </Button>
                   )}
                 </div>
-                {TOUR_STEPS.findIndex((tourStep) => tourStep.key === step) ===
-                  TOUR_STEPS.length - 1 && (
-                  <PrimaryButton onClick={onComplete}>Create my first project</PrimaryButton>
+                {TOUR_STEPS.findIndex((tourStep) => tourStep.key === step) === TOUR_STEPS.length - 1 && (
+                  <Button variant="primary" onClick={onComplete}>
+                    Create my first project
+                  </Button>
                 )}
               </div>
             </div>
diff --git a/web/components/onboarding/user-details.tsx b/web/components/onboarding/user-details.tsx
index 710a9a7641c..a8f8e616a20 100644
--- a/web/components/onboarding/user-details.tsx
+++ b/web/components/onboarding/user-details.tsx
@@ -9,8 +9,8 @@ import useToast from "hooks/use-toast";
 // services
 import userService from "services/user.service";
 // ui
-import { CustomSearchSelect, CustomSelect, PrimaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { CustomSearchSelect, CustomSelect } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // types
 import { ICurrentUserResponse, IUser } from "types";
 // fetch-keys
@@ -217,9 +217,9 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
         </div>
       </div>
 
-      <PrimaryButton type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
+      <Button variant="primary" type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
         {isSubmitting ? "Updating..." : "Continue"}
-      </PrimaryButton>
+      </Button>
     </form>
   );
 };
diff --git a/web/components/onboarding/workspace.tsx b/web/components/onboarding/workspace.tsx
index 8f744243273..d595a6f7b97 100644
--- a/web/components/onboarding/workspace.tsx
+++ b/web/components/onboarding/workspace.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 // ui
-import { SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import { ICurrentUserResponse, IWorkspace, TOnboardingSteps } from "types";
 // constants
@@ -15,13 +15,7 @@ type Props = {
   workspaces: IWorkspace[] | undefined;
 };
 
-export const Workspace: React.FC<Props> = ({
-  finishOnboarding,
-  stepChange,
-  updateLastWorkspace,
-  user,
-  workspaces,
-}) => {
+export const Workspace: React.FC<Props> = ({ finishOnboarding, stepChange, updateLastWorkspace, user, workspaces }) => {
   const [defaultValues, setDefaultValues] = useState({
     name: "",
     slug: "",
@@ -61,9 +55,9 @@ export const Workspace: React.FC<Props> = ({
           }}
           secondaryButton={
             workspaces ? (
-              <SecondaryButton onClick={secondaryButtonAction}>
+              <Button variant="secondary" onClick={secondaryButtonAction}>
                 {workspaces.length > 0 ? "Skip & continue" : "Back"}
-              </SecondaryButton>
+              </Button>
             ) : undefined
           }
         />
diff --git a/web/components/pages/create-update-block-inline.tsx b/web/components/pages/create-update-block-inline.tsx
index 9452ba5925a..83b00f03015 100644
--- a/web/components/pages/create-update-block-inline.tsx
+++ b/web/components/pages/create-update-block-inline.tsx
@@ -12,8 +12,7 @@ import useToast from "hooks/use-toast";
 // components
 import { GptAssistantModal } from "components/core";
 import { TipTapEditor } from "components/tiptap";
-import { PrimaryButton, SecondaryButton } from "components/ui";
-import { TextArea } from "@plane/ui";
+import { Button, TextArea } from "@plane/ui";
 // types
 import { ICurrentUserResponse, IPageBlock } from "types";
 // fetch-keys
@@ -355,10 +354,12 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
           </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}>
+          <Button variant="secondary" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
             {data ? (isSubmitting ? "Updating..." : "Update block") : isSubmitting ? "Adding..." : "Add block"}
-          </PrimaryButton>
+          </Button>
         </div>
       </form>
       <GptAssistantModal
diff --git a/web/components/pages/delete-page-modal.tsx b/web/components/pages/delete-page-modal.tsx
index 15a67090b9e..4e7a9cc850a 100644
--- a/web/components/pages/delete-page-modal.tsx
+++ b/web/components/pages/delete-page-modal.tsx
@@ -11,7 +11,7 @@ import pagesService from "services/page.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
@@ -128,10 +128,12 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({ isOpen, s
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                  <Button variant="secondary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/pages/page-form.tsx b/web/components/pages/page-form.tsx
index 20bd7dfb7ba..18a9f8f9ee6 100644
--- a/web/components/pages/page-form.tsx
+++ b/web/components/pages/page-form.tsx
@@ -3,8 +3,7 @@ import { useEffect } from "react";
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
 // types
 import { IPage } from "types";
 
@@ -80,8 +79,10 @@ export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
         </div>
       </div>
       <div className="mt-5 flex justify-end gap-2">
-        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-        <PrimaryButton type="submit" loading={isSubmitting}>
+        <Button variant="secondary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
           {status
             ? isSubmitting
               ? "Updating Page..."
@@ -89,7 +90,7 @@ export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
             : isSubmitting
             ? "Creating Page..."
             : "Create Page"}
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/project/confirm-project-member-remove.tsx b/web/components/project/confirm-project-member-remove.tsx
index 4edc278219c..f8e477453ce 100644
--- a/web/components/project/confirm-project-member-remove.tsx
+++ b/web/components/project/confirm-project-member-remove.tsx
@@ -4,7 +4,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
@@ -57,33 +57,29 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
                 <div className="bg-custom-background-80 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"
-                      />
+                      <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-custom-text-100"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         Remove {data?.display_name}?
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-200">
                           Are you sure you want to remove member-{" "}
-                          <span className="font-bold">{data?.display_name}</span>? They will no
-                          longer have access to this project. This action cannot be undone.
+                          <span className="font-bold">{data?.display_name}</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 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                  <Button variant="secondary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Removing..." : "Remove"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index bd45744135e..ca2f2fc3568 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -12,8 +12,8 @@ import useToast from "hooks/use-toast";
 import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
 import useWorkspaceMembers from "hooks/use-workspace-members";
 // ui
-import { CustomSelect, PrimaryButton, SecondaryButton, Icon, Avatar, CustomSearchSelect } from "components/ui";
-import { Input, TextArea } from "@plane/ui";
+import { CustomSelect, Icon, Avatar, CustomSearchSelect } from "components/ui";
+import { Button, Input, TextArea } from "@plane/ui";
 // components
 import { ImagePickerPopover } from "components/core";
 import EmojiIconPicker from "components/emoji-icon-picker";
@@ -411,10 +411,12 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                   </div>
 
                   <div className="flex justify-end gap-2 pt-5">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <PrimaryButton type="submit" size="sm" loading={isSubmitting}>
+                    <Button variant="secondary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" type="submit" size="sm" loading={isSubmitting}>
                       {isSubmitting ? "Creating..." : "Create Project"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/project/delete-project-modal.tsx b/web/components/project/delete-project-modal.tsx
index 7c3a4f0a63d..036abc87d9c 100644
--- a/web/components/project/delete-project-modal.tsx
+++ b/web/components/project/delete-project-modal.tsx
@@ -7,8 +7,7 @@ import useToast from "hooks/use-toast";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
 // types
 import type { IProject } from "types";
 // fetch-keys
@@ -161,10 +160,12 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
                     />
                   </div>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <DangerButton type="submit" disabled={!canDelete} loading={isSubmitting}>
+                    <Button variant="secondary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" type="submit" disabled={!canDelete} loading={isSubmitting}>
                       {isSubmitting ? "Deleting..." : "Delete Project"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
index 27f1a21bb20..d581a01e867 100644
--- a/web/components/project/form.tsx
+++ b/web/components/project/form.tsx
@@ -3,8 +3,8 @@ import { Controller, useForm } from "react-hook-form";
 // components
 import EmojiIconPicker from "components/emoji-icon-picker";
 import { ImagePickerPopover } from "components/core";
-import { CustomSelect, PrimaryButton } from "components/ui";
-import { Input, TextArea } from "@plane/ui";
+import { CustomSelect } from "components/ui";
+import { Button, Input, TextArea } from "@plane/ui";
 // types
 import { IProject, IWorkspace } from "types";
 // helpers
@@ -269,9 +269,9 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
 
         <div className="flex items-center justify-between py-2">
           <>
-            <PrimaryButton type="submit" loading={isSubmitting} disabled={!isAdmin}>
+            <Button variant="primary" type="submit" loading={isSubmitting} disabled={!isAdmin}>
               {isSubmitting ? "Updating Project..." : "Update Project"}
-            </PrimaryButton>
+            </Button>
             <span className="text-sm text-custom-sidebar-text-400 italic">
               Created on {renderShortDateWithYearFormat(project?.created_at)}
             </span>
diff --git a/web/components/project/join-project-modal.tsx b/web/components/project/join-project-modal.tsx
index 984fafa85ec..f4276b2d447 100644
--- a/web/components/project/join-project-modal.tsx
+++ b/web/components/project/join-project-modal.tsx
@@ -1,7 +1,7 @@
 import { useState, Fragment } from "react";
 import { Transition, Dialog } from "@headlessui/react";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { IProject } from "types";
 // lib
@@ -73,10 +73,12 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
                   <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}>
+                  <Button variant="secondary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="primary" type="submit" onClick={handleJoin} loading={isJoiningLoading}>
                     {isJoiningLoading ? "Joining..." : "Join Project"}
-                  </PrimaryButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/project/leave-project-modal.tsx b/web/components/project/leave-project-modal.tsx
index 6f022f0b491..b313c5a1a71 100644
--- a/web/components/project/leave-project-modal.tsx
+++ b/web/components/project/leave-project-modal.tsx
@@ -5,8 +5,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { observer } from "mobx-react-lite";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
 // fetch-keys
 import { PROJECTS_LIST } from "constants/fetch-keys";
 // mobx react lite
@@ -198,10 +197,12 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
                     />
                   </div>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <DangerButton type="submit" loading={isSubmitting}>
+                    <Button variant="secondary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" type="submit" loading={isSubmitting}>
                       {isSubmitting ? "Leaving..." : "Leave Project"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/project/publish-project/modal.tsx b/web/components/project/publish-project/modal.tsx
index 51ad8c9aa6b..4ea215d759a 100644
--- a/web/components/project/publish-project/modal.tsx
+++ b/web/components/project/publish-project/modal.tsx
@@ -6,7 +6,8 @@ import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // ui components
-import { ToggleSwitch, PrimaryButton, SecondaryButton, Icon, DangerButton, Loader } from "components/ui";
+import { Button } from "@plane/ui";
+import { ToggleSwitch, Icon, Loader } from "components/ui";
 import { CustomPopover } from "./popover";
 // mobx react lite
 import { observer } from "mobx-react-lite";
@@ -306,13 +307,14 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                   <div className="px-6 pt-4 flex items-center justify-between gap-2">
                     <h5 className="font-semibold text-xl inline-block">Publish</h5>
                     {projectPublish.projectPublishSettings !== "not-initialized" && (
-                      <DangerButton
+                      <Button
+                        variant="danger"
                         onClick={() => handleUnpublishProject(watch("id") ?? "")}
                         className="!px-2 !py-1.5"
                         loading={isUnpublishing}
                       >
                         {isUnpublishing ? "Unpublishing..." : "Unpublish"}
-                      </DangerButton>
+                      </Button>
                     )}
                   </div>
 
@@ -475,19 +477,21 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                     </div>
                     {!projectPublish.fetchSettingsLoader && (
                       <div className="relative flex items-center gap-2">
-                        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                        <Button variant="secondary" onClick={handleClose}>
+                          Cancel
+                        </Button>
                         {watch("id") ? (
                           <>
                             {isUpdateRequired && (
-                              <PrimaryButton type="submit" loading={isSubmitting}>
+                              <Button variant="primary" type="submit" loading={isSubmitting}>
                                 {isSubmitting ? "Updating..." : "Update settings"}
-                              </PrimaryButton>
+                              </Button>
                             )}
                           </>
                         ) : (
-                          <PrimaryButton type="submit" loading={isSubmitting}>
+                          <Button variant="primary" type="submit" loading={isSubmitting}>
                             {isSubmitting ? "Publishing..." : "Publish"}
-                          </PrimaryButton>
+                          </Button>
                         )}
                       </div>
                     )}
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index 07b90840c86..395a3c74fe9 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -8,13 +8,8 @@ import { useForm, Controller, useFieldArray } from "react-hook-form";
 
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import {
-  Avatar,
-  CustomSearchSelect,
-  CustomSelect,
-  PrimaryButton,
-  SecondaryButton,
-} from "components/ui";
+import { Button } from "@plane/ui";
+import { Avatar, CustomSearchSelect, CustomSelect } from "components/ui";
 //icons
 import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
@@ -178,24 +173,16 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
               <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-80 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-custom-text-100"
-                    >
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                       Invite Members
                     </Dialog.Title>
                     <div className="mt-2">
-                      <p className="text-sm text-custom-text-200">
-                        Invite members to work on your project.
-                      </p>
+                      <p className="text-sm text-custom-text-200">Invite members to work on your project.</p>
                     </div>
 
                     <div className="space-y-4 mb-3">
                       {fields.map((field, index) => (
-                        <div
-                          key={field.id}
-                          className="group grid grid-cols-12 gap-x-4 mb-1 text-sm items-start"
-                        >
+                        <div key={field.id} className="group grid grid-cols-12 gap-x-4 mb-1 text-sm items-start">
                           <div className="flex flex-col gap-1 col-span-7">
                             <Controller
                               control={control}
@@ -208,20 +195,11 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
                                     <button className="flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-200 shadow-sm duration-300 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 focus:outline-none px-3 py-2 text-sm text-left">
                                       {value && value !== "" ? (
                                         <div className="flex items-center gap-2">
-                                          <Avatar
-                                            user={
-                                              people?.find((p) => p.member.id === value)?.member
-                                            }
-                                          />
-                                          {
-                                            people?.find((p) => p.member.id === value)?.member
-                                              .display_name
-                                          }
+                                          <Avatar user={people?.find((p) => p.member.id === value)?.member} />
+                                          {people?.find((p) => p.member.id === value)?.member.display_name}
                                         </div>
                                       ) : (
-                                        <div className="flex items-center gap-2 py-0.5">
-                                          Select co-worker
-                                        </div>
+                                        <div className="flex items-center gap-2 py-0.5">Select co-worker</div>
                                       )}
                                       <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
                                     </button>
@@ -307,14 +285,14 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
                       Add more
                     </button>
                     <div className="flex items-center gap-2">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton type="submit" loading={isSubmitting}>
+                      <Button variant="secondary" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" type="submit" loading={isSubmitting}>
                         {isSubmitting
-                          ? `${
-                              fields && fields.length > 1 ? "Adding Members..." : "Adding Member..."
-                            }`
+                          ? `${fields && fields.length > 1 ? "Adding Members..." : "Adding Member..."}`
                           : `${fields && fields.length > 1 ? "Add Members" : "Add Member"}`}
-                      </PrimaryButton>
+                      </Button>
                     </div>
                   </div>
                 </form>
diff --git a/web/components/project/settings/single-label.tsx b/web/components/project/settings/single-label.tsx
index 25cb7d7c813..b7acc272c8a 100644
--- a/web/components/project/settings/single-label.tsx
+++ b/web/components/project/settings/single-label.tsx
@@ -7,8 +7,8 @@ import { TwitterPicker } from "react-color";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
 // ui
-import { CustomMenu, PrimaryButton, SecondaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { CustomMenu } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // icons
 import { PencilIcon, RectangleGroupIcon } from "@heroicons/react/24/outline";
 // types
@@ -123,8 +123,12 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
                 )}
               />
             </div>
-            <SecondaryButton onClick={() => setNewLabelForm(false)}>Cancel</SecondaryButton>
-            <PrimaryButton loading={isSubmitting}>{isSubmitting ? "Adding" : "Add"}</PrimaryButton>
+            <Button variant="secondary" onClick={() => setNewLabelForm(false)}>
+              Cancel
+            </Button>
+            <Button variant="primary" loading={isSubmitting}>
+              {isSubmitting ? "Adding" : "Add"}
+            </Button>
           </div>
         </div>
       ) : (
diff --git a/web/components/states/create-state-modal.tsx b/web/components/states/create-state-modal.tsx
index 12cf445ab48..355d68c9982 100644
--- a/web/components/states/create-state-modal.tsx
+++ b/web/components/states/create-state-modal.tsx
@@ -15,8 +15,8 @@ import stateService from "services/project_state.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, PrimaryButton, SecondaryButton } from "components/ui";
-import { Input, TextArea } from "@plane/ui";
+import { CustomSelect } from "components/ui";
+import { Button, Input, TextArea } from "@plane/ui";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 // types
@@ -256,10 +256,12 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton type="submit" loading={isSubmitting}>
+                    <Button variant="secondary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" type="submit" loading={isSubmitting}>
                       {isSubmitting ? "Creating State..." : "Create State"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/states/create-update-state-inline.tsx b/web/components/states/create-update-state-inline.tsx
index 74a50413a73..e30c2e803cb 100644
--- a/web/components/states/create-update-state-inline.tsx
+++ b/web/components/states/create-update-state-inline.tsx
@@ -15,8 +15,8 @@ import stateService from "services/project_state.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, PrimaryButton, SecondaryButton, Tooltip } from "components/ui";
-import { Input } from "@plane/ui";
+import { CustomSelect, Tooltip } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // types
 import type { ICurrentUserResponse, IState, IStateResponse } from "types";
 // fetch-keys
@@ -273,10 +273,12 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
           />
         )}
       />
-      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-      <PrimaryButton type="submit" loading={isSubmitting}>
+      <Button variant="secondary" onClick={handleClose}>
+        Cancel
+      </Button>
+      <Button variant="primary" type="submit" loading={isSubmitting}>
         {isSubmitting ? (data ? "Updating..." : "Creating...") : data ? "Update" : "Create"}
-      </PrimaryButton>
+      </Button>
     </form>
   );
 };
diff --git a/web/components/states/delete-state-modal.tsx b/web/components/states/delete-state-modal.tsx
index 580d42bdc34..9e428d0be06 100644
--- a/web/components/states/delete-state-modal.tsx
+++ b/web/components/states/delete-state-modal.tsx
@@ -13,7 +13,7 @@ import stateServices from "services/project_state.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { ICurrentUserResponse, IState, IStateResponse } from "types";
 // fetch-keys
@@ -129,10 +129,12 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                  <Button variant="secondary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/ui/empty-state.tsx b/web/components/ui/empty-state.tsx
index e39b10801f2..4b70b5ee42f 100644
--- a/web/components/ui/empty-state.tsx
+++ b/web/components/ui/empty-state.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import Image from "next/image";
 
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 
 type Props = {
   title: string;
@@ -28,25 +28,22 @@ export const EmptyState: React.FC<Props> = ({
   isFullScreen = true,
   disabled = false,
 }) => (
-  <div
-    className={`h-full w-full mx-auto grid place-items-center p-8 ${
-      isFullScreen ? "md:w-4/5 lg:w-3/5" : ""
-    }`}
-  >
+  <div className={`h-full w-full mx-auto grid place-items-center p-8 ${isFullScreen ? "md:w-4/5 lg:w-3/5" : ""}`}>
     <div className="text-center flex flex-col items-center w-full">
       <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text} />
       <h6 className="text-xl font-semibold mt-6 sm:mt-8 mb-3">{title}</h6>
       {description && <p className="text-custom-text-300 mb-7 sm:mb-8">{description}</p>}
       <div className="flex items-center gap-4">
         {primaryButton && (
-          <PrimaryButton
+          <Button
+            variant="primary"
             className="flex items-center gap-1.5"
             onClick={primaryButton.onClick}
             disabled={disabled}
           >
             {primaryButton.icon}
             {primaryButton.text}
-          </PrimaryButton>
+          </Button>
         )}
         {secondaryButton}
       </div>
diff --git a/web/components/views/delete-view-modal.tsx b/web/components/views/delete-view-modal.tsx
index 61c627430f0..8ed64487af8 100644
--- a/web/components/views/delete-view-modal.tsx
+++ b/web/components/views/delete-view-modal.tsx
@@ -11,7 +11,7 @@ import viewsService from "services/views.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
@@ -46,9 +46,7 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user
     await viewsService
       .deleteView(workspaceSlug as string, projectId as string, data.id, user)
       .then(() => {
-        mutate<IView[]>(VIEWS_LIST(projectId as string), (views) =>
-          views?.filter((view) => view.id !== data.id)
-        );
+        mutate<IView[]>(VIEWS_LIST(projectId as string), (views) => views?.filter((view) => view.id !== data.id));
 
         handleClose();
 
@@ -100,36 +98,29 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user
                 <div className="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-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <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-custom-text-100"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         Delete View
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete view-{" "}
-                          <span className="break-words font-medium text-custom-text-100">
-                            {data?.name}
-                          </span>
-                          ? All of the data related to the view will be permanently removed. This
-                          action cannot be undone.
+                          <span className="break-words font-medium text-custom-text-100">{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 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                  <Button variant="secondary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/views/form.tsx b/web/components/views/form.tsx
index 13cf67d42b7..8ee414b7f58 100644
--- a/web/components/views/form.tsx
+++ b/web/components/views/form.tsx
@@ -14,8 +14,7 @@ import useProjectMembers from "hooks/use-project-members";
 import { FiltersList } from "components/core";
 import { SelectFilters } from "components/views";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-import { Input, TextArea } from "@plane/ui";
+import { Button, Input, TextArea } from "@plane/ui";
 // helpers
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 import { getStatesList } from "helpers/state.helper";
@@ -203,8 +202,10 @@ export const ViewForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
         </div>
       </div>
       <div className="mt-5 flex justify-end gap-2">
-        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-        <PrimaryButton type="submit" loading={isSubmitting}>
+        <Button variant="secondary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
           {status
             ? isSubmitting
               ? "Updating View..."
@@ -212,7 +213,7 @@ export const ViewForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
             : isSubmitting
             ? "Creating View..."
             : "Create View"}
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/web-view/add-comment.tsx b/web/components/web-view/add-comment.tsx
index b4f49d7beb0..3ed76d515a6 100644
--- a/web/components/web-view/add-comment.tsx
+++ b/web/components/web-view/add-comment.tsx
@@ -16,10 +16,11 @@ import { TipTapEditor } from "components/tiptap";
 import { Send } from "lucide-react";
 
 // ui
-import { Icon, SecondaryButton, Tooltip, PrimaryButton } from "components/ui";
+import { Icon, Tooltip } from "components/ui";
 
 // types
 import type { IIssueComment } from "types";
+import { Button } from "@plane/ui";
 
 const defaultValues: Partial<IIssueComment> = {
   access: "INTERNAL",
@@ -120,13 +121,14 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
       </div>
 
       <div className="inline">
-        <PrimaryButton
+        <Button
+          variant="primary"
           type="submit"
           disabled={isSubmitting || disabled}
           className="mt-2 w-10 h-10 flex items-center justify-center"
         >
           <Send className="w-4 h-4" />
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/web-view/create-update-link-form.tsx b/web/components/web-view/create-update-link-form.tsx
index d29667ef8b2..1b378974806 100644
--- a/web/components/web-view/create-update-link-form.tsx
+++ b/web/components/web-view/create-update-link-form.tsx
@@ -20,8 +20,7 @@ import { ISSUE_DETAILS } from "constants/fetch-keys";
 import useToast from "hooks/use-toast";
 
 // ui
-import { PrimaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
 
 // types
 import type { linkDetails, IIssueLink, IIssue } from "types";
@@ -178,13 +177,14 @@ export const CreateUpdateLinkForm: React.FC<Props> = (props) => {
         </div>
       </div>
       <div className="mt-5 flex justify-end gap-2">
-        <PrimaryButton
+        <Button
+          variant="primary"
           type="submit"
           loading={isSubmitting}
           className="w-full !py-2 text-custom-text-300 !text-base flex items-center justify-center"
         >
           {data ? (isSubmitting ? "Updating Link..." : "Update Link") : isSubmitting ? "Adding Link..." : "Add Link"}
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/web-view/issue-link-list.tsx b/web/components/web-view/issue-link-list.tsx
index 5df652300df..767e2a55bb8 100644
--- a/web/components/web-view/issue-link-list.tsx
+++ b/web/components/web-view/issue-link-list.tsx
@@ -19,7 +19,7 @@ import { Link as LinkIcon, Plus, Pencil, X } from "lucide-react";
 import { Label, WebViewModal, CreateUpdateLinkForm } from "components/web-view";
 
 // ui
-import { SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 
 // fetch keys
 import { ISSUE_DETAILS } from "constants/fetch-keys";
@@ -123,7 +123,8 @@ export const IssueLinks: React.FC<Props> = (props) => {
             )}
           </div>
         ))}
-        <SecondaryButton
+        <Button
+          variant="secondary"
           type="button"
           disabled={!allowed}
           onClick={() => setIsOpen(true)}
@@ -131,7 +132,7 @@ export const IssueLinks: React.FC<Props> = (props) => {
         >
           <Plus className="w-[18px] h-[18px] inline-block mr-1" />
           <span>Add</span>
-        </SecondaryButton>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/web-view/issue-properties-detail.tsx b/web/components/web-view/issue-properties-detail.tsx
index 65a2eb173bb..ebfd607f78c 100644
--- a/web/components/web-view/issue-properties-detail.tsx
+++ b/web/components/web-view/issue-properties-detail.tsx
@@ -27,7 +27,8 @@ import { ChevronDown, PlayIcon, User, X, CalendarDays, LayoutGrid, Users } from
 import useEstimateOption from "hooks/use-estimate-option";
 
 // ui
-import { SecondaryButton, CustomDatePicker } from "components/ui";
+import { Button } from "@plane/ui";
+import { CustomDatePicker } from "components/ui";
 
 // components
 import {
@@ -391,14 +392,15 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
         </>
       )}
       <div className="mb-[6px]">
-        <SecondaryButton
+        <Button
+          variant="secondary"
           type="button"
           onClick={() => setIsViewAllOpen((prev) => !prev)}
           className="w-full flex justify-center items-center gap-1 !py-2"
         >
           <span className="text-base text-custom-primary-100">{isViewAllOpen ? "View less" : "View all"}</span>
           <ChevronDown size={16} className={`ml-1 text-custom-primary-100 ${isViewAllOpen ? "-rotate-180" : ""}`} />
-        </SecondaryButton>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/workspace/confirm-workspace-member-remove.tsx b/web/components/workspace/confirm-workspace-member-remove.tsx
index 9ca80c3dc67..945e7211356 100644
--- a/web/components/workspace/confirm-workspace-member-remove.tsx
+++ b/web/components/workspace/confirm-workspace-member-remove.tsx
@@ -4,7 +4,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
@@ -57,33 +57,29 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
                 <div className="bg-custom-background-80 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"
-                      />
+                      <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-custom-text-100"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         Remove {data?.display_name}?
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-200">
                           Are you sure you want to remove member-{" "}
-                          <span className="font-bold">{data?.display_name}</span>? They will no
-                          longer have access to this workspace. This action cannot be undone.
+                          <span className="font-bold">{data?.display_name}</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 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                  <Button variant="secondary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Removing..." : "Remove"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/workspace/create-workspace-form.tsx b/web/components/workspace/create-workspace-form.tsx
index 9736a08e888..27e00245c77 100644
--- a/web/components/workspace/create-workspace-form.tsx
+++ b/web/components/workspace/create-workspace-form.tsx
@@ -9,8 +9,8 @@ import workspaceService from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, PrimaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { CustomSelect } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // types
 import { ICurrentUserResponse, IWorkspace } from "types";
 // fetch-keys
@@ -220,9 +220,9 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
 
       <div className="flex items-center gap-4">
         {secondaryButton}
-        <PrimaryButton type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
+        <Button variant="primary" type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
           {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/workspace/delete-workspace-modal.tsx b/web/components/workspace/delete-workspace-modal.tsx
index 1f55f2d33d7..e87181a0eb6 100644
--- a/web/components/workspace/delete-workspace-modal.tsx
+++ b/web/components/workspace/delete-workspace-modal.tsx
@@ -15,8 +15,7 @@ import useToast from "hooks/use-toast";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
 // types
 import type { ICurrentUserResponse, IWorkspace } from "types";
 // fetch-keys
@@ -179,10 +178,12 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
                   </div>
 
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <DangerButton type="submit" disabled={!canDelete} loading={isSubmitting}>
+                    <Button variant="secondary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" type="submit" disabled={!canDelete} loading={isSubmitting}>
                       {isSubmitting ? "Deleting..." : "Delete Workspace"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/workspace/send-workspace-invitation-modal.tsx b/web/components/workspace/send-workspace-invitation-modal.tsx
index 025622369b0..2655d4dd153 100644
--- a/web/components/workspace/send-workspace-invitation-modal.tsx
+++ b/web/components/workspace/send-workspace-invitation-modal.tsx
@@ -11,8 +11,8 @@ import workspaceService from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, PrimaryButton, SecondaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { CustomSelect } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // icons
 import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
@@ -235,10 +235,12 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
                       Add more
                     </button>
                     <div className="flex items-center gap-2">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton type="submit" loading={isSubmitting}>
+                      <Button variant="secondary" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" type="submit" loading={isSubmitting}>
                         {isSubmitting ? "Sending Invitation..." : "Send Invitation"}
-                      </PrimaryButton>
+                      </Button>
                     </div>
                   </div>
                 </form>
diff --git a/web/components/workspace/views/delete-workspace-view-modal.tsx b/web/components/workspace/views/delete-workspace-view-modal.tsx
index 6030f630f11..cf4441f0587 100644
--- a/web/components/workspace/views/delete-workspace-view-modal.tsx
+++ b/web/components/workspace/views/delete-workspace-view-modal.tsx
@@ -11,7 +11,7 @@ import workspaceService from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
@@ -100,36 +100,29 @@ export const DeleteWorkspaceViewModal: React.FC<Props> = ({ isOpen, data, setIsO
                 <div className="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-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <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-custom-text-100"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         Delete View
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete view-{" "}
-                          <span className="break-words font-medium text-custom-text-100">
-                            {data?.name}
-                          </span>
-                          ? All of the data related to the view will be permanently removed. This
-                          action cannot be undone.
+                          <span className="break-words font-medium text-custom-text-100">{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 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                  <Button variant="secondary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/workspace/views/form.tsx b/web/components/workspace/views/form.tsx
index 21db24510de..685d6e47879 100644
--- a/web/components/workspace/views/form.tsx
+++ b/web/components/workspace/views/form.tsx
@@ -17,8 +17,7 @@ import { WorkspaceFiltersList } from "components/core";
 import { GlobalSelectFilters } from "components/workspace/views/global-select-filters";
 
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-import { Input, TextArea } from "@plane/ui";
+import { Button, Input, TextArea } from "@plane/ui";
 // helpers
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
@@ -202,8 +201,10 @@ export const WorkspaceViewForm: React.FC<Props> = ({ handleFormSubmit, handleClo
         </div>
       </div>
       <div className="mt-5 flex justify-end gap-2">
-        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-        <PrimaryButton type="submit" loading={isSubmitting}>
+        <Button variant="secondary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
           {status
             ? isSubmitting
               ? "Updating View..."
@@ -211,7 +212,7 @@ export const WorkspaceViewForm: React.FC<Props> = ({ handleFormSubmit, handleClo
             : isSubmitting
             ? "Creating View..."
             : "Create View"}
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx b/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
index 85191fdd522..f182ea8737e 100644
--- a/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
+++ b/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
@@ -13,7 +13,8 @@ import AppSidebar from "layouts/app-layout-legacy/app-sidebar";
 import { NotAuthorizedView, JoinProject } from "components/auth-screens";
 import { CommandPalette } from "components/command-palette";
 // ui
-import { EmptyState, PrimaryButton, Spinner } from "components/ui";
+import { Button } from "@plane/ui";
+import { EmptyState, Spinner } from "components/ui";
 // icons
 import { LayerDiagonalIcon } from "components/icons";
 // images
@@ -90,9 +91,9 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
             actionButton={
               <Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
                 <a>
-                  <PrimaryButton className="flex items-center gap-1">
+                  <Button variant="primary" className="flex items-center gap-1">
                     <LayerDiagonalIcon height={16} width={16} color="white" /> Go to issues
-                  </PrimaryButton>
+                  </Button>
                 </a>
               </Link>
             }
diff --git a/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx b/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
index c66945d4234..04aa33ad3c2 100644
--- a/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
+++ b/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
@@ -14,10 +14,11 @@ import AppSidebar from "layouts/app-layout-legacy/app-sidebar";
 import AppHeader from "layouts/app-layout-legacy/app-header";
 import { UserAuthorizationLayout } from "./user-authorization-wrapper";
 // components
+import { Button } from "@plane/ui";
 import { NotAuthorizedView, NotAWorkspaceMember } from "components/auth-screens";
 import { CommandPalette } from "components/command-palette";
 // icons
-import { PrimaryButton, Spinner } from "components/ui";
+import { Spinner } from "components/ui";
 import { LayerDiagonalIcon } from "components/icons";
 // fetch-keys
 import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
@@ -89,9 +90,9 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
               actionButton={
                 <Link href={`/${workspaceSlug}`}>
                   <a>
-                    <PrimaryButton className="flex items-center gap-1">
+                    <Button variant="primary" className="flex items-center gap-1">
                       <LayerDiagonalIcon height={16} width={16} color="white" /> Go to workspace
-                    </PrimaryButton>
+                    </Button>
                   </a>
                 </Link>
               }
diff --git a/web/layouts/auth-layout/workspace-wrapper.tsx b/web/layouts/auth-layout/workspace-wrapper.tsx
index 99233abc924..bfd38828178 100644
--- a/web/layouts/auth-layout/workspace-wrapper.tsx
+++ b/web/layouts/auth-layout/workspace-wrapper.tsx
@@ -4,8 +4,9 @@ import Link from "next/link";
 import useSWR from "swr";
 // services
 import workspaceServices from "services/workspace.service";
-// icons
-import { Spinner, PrimaryButton, SecondaryButton } from "components/ui";
+// ui
+import { Spinner } from "components/ui";
+import { Button } from "@plane/ui";
 // fetch-keys
 import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
 
@@ -54,12 +55,12 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = (props) => {
             <div className="flex items-center justify-center gap-2">
               <Link href="/invitations">
                 <a>
-                  <SecondaryButton>Check pending invites</SecondaryButton>
+                  <Button variant="secondary">Check pending invites</Button>
                 </a>
               </Link>
               <Link href="/create-workspace">
                 <a>
-                  <PrimaryButton>Create new workspace</PrimaryButton>
+                  <Button variant="primary">Create new workspace</Button>
                 </a>
               </Link>
             </div>
diff --git a/web/pages/404.tsx b/web/pages/404.tsx
index 6386093a707..328a74178e5 100644
--- a/web/pages/404.tsx
+++ b/web/pages/404.tsx
@@ -6,7 +6,7 @@ import Image from "next/image";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // ui
-import { SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // images
 import Image404 from "public/404.svg";
 // types
@@ -22,13 +22,15 @@ const PageNotFound: NextPage = () => (
         <div className="space-y-2">
           <h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>
           <p className="text-sm text-custom-text-200">
-            Sorry, the page you are looking for cannot be found. It may have been removed, had its
-            name changed, or is temporarily unavailable.
+            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>
+            <Button variant="secondary" size="md">
+              Go to Home
+            </Button>
           </a>
         </Link>
       </div>
diff --git a/web/pages/[workspaceSlug]/index.tsx b/web/pages/[workspaceSlug]/index.tsx
index 3968e9be7fa..1e97843a197 100644
--- a/web/pages/[workspaceSlug]/index.tsx
+++ b/web/pages/[workspaceSlug]/index.tsx
@@ -19,7 +19,8 @@ import useProjects from "hooks/use-projects";
 import { CompletedIssuesGraph, IssuesList, IssuesPieChart, IssuesStats } from "components/workspace";
 import { TourRoot } from "components/onboarding";
 // ui
-import { PrimaryButton, ProductUpdatesModal } from "components/ui";
+import { Button } from "@plane/ui";
+import { ProductUpdatesModal } from "components/ui";
 // icons
 import { BoltOutlined, GridViewOutlined } from "@mui/icons-material";
 // images
@@ -175,7 +176,8 @@ const WorkspacePage: NextPage = () => {
               <div className="p-5 md:p-8 pr-0">
                 <h5 className="text-xl font-semibold">Create a project</h5>
                 <p className="mt-2 mb-5">Manage your projects by creating issues, cycles, modules, views and pages.</p>
-                <PrimaryButton
+                <Button
+                  variant="primary"
                   onClick={() => {
                     const e = new KeyboardEvent("keydown", {
                       key: "p",
@@ -184,7 +186,7 @@ const WorkspacePage: NextPage = () => {
                   }}
                 >
                   Create Project
-                </PrimaryButton>
+                </Button>
               </div>
               <div className="hidden md:block self-end overflow-hidden pt-8">
                 <Image src={emptyDashboard} alt="Empty Dashboard" />
diff --git a/web/pages/[workspaceSlug]/me/my-issues.tsx b/web/pages/[workspaceSlug]/me/my-issues.tsx
index de12f5b3248..f861c467f7d 100644
--- a/web/pages/[workspaceSlug]/me/my-issues.tsx
+++ b/web/pages/[workspaceSlug]/me/my-issues.tsx
@@ -11,7 +11,7 @@ import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
 // components
 import { MyIssuesView, MyIssuesViewOptions } from "components/issues";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // types
 import type { NextPage } from "next";
@@ -85,7 +85,8 @@ const MyIssuesPage: NextPage = () => {
       right={
         <div className="flex items-center gap-2">
           <MyIssuesViewOptions />
-          <PrimaryButton
+          <Button
+            variant="primary"
             className="flex items-center gap-2"
             onClick={() => {
               const e = new KeyboardEvent("keydown", { key: "c" });
@@ -94,7 +95,7 @@ const MyIssuesPage: NextPage = () => {
           >
             <PlusIcon className="h-4 w-4" />
             Add Issue
-          </PrimaryButton>
+          </Button>
         </div>
       }
     >
diff --git a/web/pages/[workspaceSlug]/me/profile/index.tsx b/web/pages/[workspaceSlug]/me/profile/index.tsx
index 9ef5a9e1451..d18a332f18f 100644
--- a/web/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/index.tsx
@@ -16,8 +16,8 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 import { ImagePickerPopover, ImageUploadModal } from "components/core";
 import { SettingsSidebar } from "components/project";
 // ui
-import { CustomSearchSelect, CustomSelect, PrimaryButton, Spinner } from "components/ui";
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
+import { CustomSearchSelect, CustomSelect, Spinner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { UserIcon } from "@heroicons/react/24/outline";
@@ -392,9 +392,9 @@ const Profile: NextPage = () => {
                 </div>
 
                 <div className="flex items-center justify-between py-2">
-                  <PrimaryButton type="submit" loading={isSubmitting}>
+                  <Button variant="primary" type="submit" loading={isSubmitting}>
                     {isSubmitting ? "Updating Profile..." : "Update Profile"}
-                  </PrimaryButton>
+                  </Button>
                 </div>
               </div>
             </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index d41813898c5..c1b2f366447 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -22,7 +22,8 @@ import useUserAuth from "hooks/use-user-auth";
 // components
 import { AnalyticsProjectModal } from "components/analytics";
 // ui
-import { CustomMenu, EmptyState, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
+import { CustomMenu, EmptyState } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // images
 import emptyCycle from "public/empty-state/cycle.svg";
@@ -131,13 +132,14 @@ const SingleCycle: React.FC = () => {
         right={
           <div className={`flex flex-shrink-0 items-center gap-2 duration-300`}>
             <IssuesFilterView />
-            <SecondaryButton
+            <Button
+              variant="secondary"
               onClick={() => setAnalyticsModal(true)}
               className="!py-1.5 font-normal rounded-md text-custom-text-200 hover:text-custom-text-100"
               outline
             >
               Analytics
-            </SecondaryButton>
+            </Button>
             <button
               type="button"
               className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 2c80aa37b0a..6135bda429d 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -10,7 +10,8 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { CyclesView, ActiveCycleDetails, CreateUpdateCycleModal } from "components/cycles";
 // ui
-import { EmptyState, Icon, PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
+import { EmptyState, Icon } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -81,7 +82,8 @@ const ProjectCyclesPage: NextPage = observer(() => {
         </Breadcrumbs>
       }
       right={
-        <PrimaryButton
+        <Button
+          variant="primary"
           className="flex items-center gap-2"
           onClick={() => {
             const e = new KeyboardEvent("keydown", { key: "q" });
@@ -90,7 +92,7 @@ const ProjectCyclesPage: NextPage = observer(() => {
         >
           <PlusIcon className="h-4 w-4" />
           Add Cycle
-        </PrimaryButton>
+        </Button>
       }
     >
       <CreateUpdateCycleModal
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
index 2ede846c3e4..0543f368b97 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
@@ -11,7 +11,7 @@ import { InboxActionHeader, InboxMainContent, IssuesListSidebar } from "componen
 // helper
 import { truncateText } from "helpers/string.helper";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -35,7 +35,8 @@ const ProjectInbox: NextPage = () => {
         }
         right={
           <div className="flex items-center gap-2">
-            <PrimaryButton
+            <Button
+              variant="primary"
               className="flex items-center gap-2"
               onClick={() => {
                 const e = new KeyboardEvent("keydown", { key: "c" });
@@ -44,7 +45,7 @@ const ProjectInbox: NextPage = () => {
             >
               <PlusIcon className="h-4 w-4" />
               Add Issue
-            </PrimaryButton>
+            </Button>
           </div>
         }
       >
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index 6354af6d65a..598cad15baa 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -18,7 +18,7 @@ import { ExistingIssuesListModal, IssuesFilterView } from "components/core";
 import { ModuleDetailsSidebar } from "components/modules";
 import { AnalyticsProjectModal } from "components/analytics";
 // ui
-import { CustomMenu, EmptyState, SecondaryButton } from "components/ui";
+import { CustomMenu, EmptyState } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // images
 import emptyModule from "public/empty-state/module.svg";
@@ -140,9 +140,9 @@ const SingleModule: React.FC = () => {
           <>
             <AnalyticsProjectModal isOpen={analyticsModal} onClose={() => setAnalyticsModal(false)} />
             <div
-              className={`relative overflow-y-auto h-full flex flex-col ${
-                moduleSidebar ? "mr-[24rem]" : ""
-              } ${analyticsModal ? "mr-[50%]" : ""} duration-300`}
+              className={`relative overflow-y-auto h-full flex flex-col ${moduleSidebar ? "mr-[24rem]" : ""} ${
+                analyticsModal ? "mr-[50%]" : ""
+              } duration-300`}
             >
               <ModuleAllLayouts />
             </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index 72454e124e8..9b69ce23270 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -14,7 +14,8 @@ import modulesService from "services/modules.service";
 // components
 import { CreateUpdateModuleModal, ModulesListGanttChartView, SingleModuleCard } from "components/modules";
 // ui
-import { EmptyState, Icon, Loader, PrimaryButton, Tooltip } from "components/ui";
+import { Button } from "@plane/ui";
+import { EmptyState, Icon, Loader, Tooltip } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -101,7 +102,8 @@ const ProjectModules: NextPage = () => {
               </button>
             </Tooltip>
           ))}
-          <PrimaryButton
+          <Button
+            variant="primary"
             className="flex items-center gap-2"
             onClick={() => {
               const e = new KeyboardEvent("keydown", { key: "m" });
@@ -110,7 +112,7 @@ const ProjectModules: NextPage = () => {
           >
             <PlusIcon className="h-4 w-4" />
             Add Module
-          </PrimaryButton>
+          </Button>
         </div>
       }
     >
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index 3e5e07478e5..f6736a56b95 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -19,7 +19,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "components/pages";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
@@ -99,7 +99,8 @@ const ProjectPages: NextPage = () => {
           </Breadcrumbs>
         }
         right={
-          <PrimaryButton
+          <Button
+            variant="primary"
             className="flex items-center gap-2"
             onClick={() => {
               const e = new KeyboardEvent("keydown", { key: "d" });
@@ -108,7 +109,7 @@ const ProjectPages: NextPage = () => {
           >
             <PlusIcon className="h-4 w-4" />
             Create Page
-          </PrimaryButton>
+          </Button>
         }
       >
         <div className="space-y-5 p-8 h-full overflow-hidden flex flex-col">
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index 1f2f5595286..9785fdafc03 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -18,7 +18,8 @@ import { SettingsSidebar } from "components/project";
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // ui
-import { EmptyState, Loader, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
+import { EmptyState, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -130,16 +131,19 @@ const EstimatesSettings: NextPage = () => {
               <h3 className="text-xl font-medium">Estimates</h3>
               <div className="col-span-12 space-y-5 sm:col-span-7">
                 <div className="flex items-center gap-2">
-                  <PrimaryButton
+                  <Button
+                    variant="primary"
                     onClick={() => {
                       setEstimateToUpdate(undefined);
                       setEstimateFormOpen(true);
                     }}
                   >
                     Add Estimate
-                  </PrimaryButton>
+                  </Button>
                   {projectDetails?.estimate && (
-                    <SecondaryButton onClick={disableEstimates}>Disable Estimates</SecondaryButton>
+                    <Button variant="secondary" onClick={disableEstimates}>
+                      Disable Estimates
+                    </Button>
                   )}
                 </div>
               </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index 4d38582322a..8b96c150098 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -11,7 +11,8 @@ import { DeleteProjectModal, ProjectDetailsForm, ProjectDetailsFormLoader, Setti
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // components
-import { Loader, DangerButton, Icon } from "components/ui";
+import { Button } from "@plane/ui";
+import { Loader, Icon } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // helpers
 import { truncateText } from "helpers/string.helper";
@@ -128,13 +129,14 @@ const GeneralSettings: NextPage = observer(() => {
                         <div>
                           {projectDetails ? (
                             <div>
-                              <DangerButton
+                              <Button
+                                variant="danger"
                                 onClick={() => setSelectedProject(projectDetails.id ?? null)}
                                 className="!text-sm"
                                 outline
                               >
                                 Delete my project
-                              </DangerButton>
+                              </Button>
                             </div>
                           ) : (
                             <Loader className="mt-2 w-full">
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index 4f6a236df77..f971f60da80 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -21,7 +21,8 @@ import {
 } from "components/labels";
 import { SettingsSidebar } from "components/project";
 // ui
-import { EmptyState, Loader, PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
+import { EmptyState, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -117,9 +118,9 @@ const LabelsSettings: NextPage = () => {
             <div className="flex items-center justify-between pt-2 pb-3.5 border-b border-custom-border-200">
               <h3 className="text-xl font-medium">Labels</h3>
 
-              <PrimaryButton onClick={newLabel} size="sm" className="flex items-center justify-center">
+              <Button variant="primary" onClick={newLabel} size="sm" className="flex items-center justify-center">
                 Add label
-              </PrimaryButton>
+              </Button>
             </div>
             <div className="space-y-3 py-6 h-full w-full">
               {labelForm && (
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index 4e7d684af0f..ba953410202 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -21,15 +21,8 @@ import ConfirmProjectMemberRemove from "components/project/confirm-project-membe
 import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
 import { MemberSelect, SettingsSidebar } from "components/project";
 // ui
-import {
-  CustomMenu,
-  CustomSearchSelect,
-  CustomSelect,
-  Icon,
-  Loader,
-  PrimaryButton,
-  SecondaryButton,
-} from "components/ui";
+import { Button } from "@plane/ui";
+import { CustomMenu, CustomSearchSelect, CustomSelect, Icon, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
@@ -331,7 +324,9 @@ const MembersSettings: NextPage = () => {
 
           <div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-200">
             <h4 className="text-xl font-medium">Members</h4>
-            <PrimaryButton onClick={() => setInviteModal(true)}>Add Member</PrimaryButton>
+            <Button variant="primary" onClick={() => setInviteModal(true)}>
+              Add Member
+            </Button>
           </div>
           {!projectMembers || !projectInvitations ? (
             <Loader className="space-y-5">
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
index 463a3c7c727..67d4ff2f091 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
@@ -12,7 +12,8 @@ import { IssueViewContextProvider } from "contexts/issue-view.context";
 // components
 import { IssuesFilterView, IssuesView } from "components/core";
 // ui
-import { CustomMenu, EmptyState, PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
+import { CustomMenu, EmptyState } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -81,7 +82,8 @@ const SingleView: React.FC = () => {
         right={
           <div className="flex items-center gap-2">
             <IssuesFilterView />
-            <PrimaryButton
+            <Button
+              variant="primary"
               className="flex items-center gap-2"
               onClick={() => {
                 const e = new KeyboardEvent("keydown", { key: "c" });
@@ -90,7 +92,7 @@ const SingleView: React.FC = () => {
             >
               <PlusIcon className="h-4 w-4" />
               Add Issue
-            </PrimaryButton>
+            </Button>
           </div>
         }
       >
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
index bbf34dff2d4..393cbb0e511 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -20,7 +20,8 @@ import emptyView from "public/empty-state/view.svg";
 // fetching keys
 import { PROJECT_DETAILS, VIEWS_LIST } from "constants/fetch-keys";
 // components
-import { PrimaryButton, Loader, EmptyState } from "components/ui";
+import { Button } from "@plane/ui";
+import { Loader, EmptyState } from "components/ui";
 import { DeleteViewModal, CreateUpdateViewModal, SingleViewItem } from "components/views";
 // types
 import { IView } from "types";
@@ -68,7 +69,8 @@ const ProjectViews: NextPage = () => {
       }
       right={
         <div className="flex items-center gap-2">
-          <PrimaryButton
+          <Button
+            variant="primary"
             type="button"
             className="flex items-center gap-2"
             onClick={() => {
@@ -78,7 +80,7 @@ const ProjectViews: NextPage = () => {
           >
             <PlusIcon className="h-4 w-4" />
             Create View
-          </PrimaryButton>
+          </Button>
         </div>
       }
     >
diff --git a/web/pages/[workspaceSlug]/projects/index.tsx b/web/pages/[workspaceSlug]/projects/index.tsx
index 1beeb0c5557..26641efe310 100644
--- a/web/pages/[workspaceSlug]/projects/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/index.tsx
@@ -11,7 +11,8 @@ import useUserAuth from "hooks/use-user-auth";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // ui
-import { Icon, PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
+import { Icon } from "components/ui";
 import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -53,7 +54,8 @@ const ProjectsPage: NextPage = () => {
             />
           </div>
 
-          <PrimaryButton
+          <Button
+            variant="primary"
             className="flex items-center gap-2 flex-shrink-0"
             onClick={() => {
               const e = new KeyboardEvent("keydown", { key: "p" });
@@ -62,7 +64,7 @@ const ProjectsPage: NextPage = () => {
           >
             <PlusIcon className="h-4 w-4" />
             Add Project
-          </PrimaryButton>
+          </Button>
         </div>
       }
     >
diff --git a/web/pages/[workspaceSlug]/settings/billing.tsx b/web/pages/[workspaceSlug]/settings/billing.tsx
index 1379eb4979f..be7d4574744 100644
--- a/web/pages/[workspaceSlug]/settings/billing.tsx
+++ b/web/pages/[workspaceSlug]/settings/billing.tsx
@@ -11,7 +11,7 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // component
 import { SettingsSidebar } from "components/project";
 // ui
-import { SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
 import type { NextPage } from "next";
@@ -57,7 +57,9 @@ const BillingSettings: NextPage = () => {
               <h4 className="text-md mb-1 leading-6">Current plan</h4>
               <p className="mb-3 text-sm text-custom-text-200">You are currently using the free plan</p>
               <a href="https://plane.so/pricing" target="_blank" rel="noreferrer">
-                <SecondaryButton outline>View Plans</SecondaryButton>
+                <Button variant="secondary" outline>
+                  View Plans
+                </Button>
               </a>
             </div>
           </div>
diff --git a/web/pages/[workspaceSlug]/settings/index.tsx b/web/pages/[workspaceSlug]/settings/index.tsx
index 567fb0a0416..ee29e3ff854 100644
--- a/web/pages/[workspaceSlug]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/index.tsx
@@ -20,8 +20,8 @@ import { DeleteWorkspaceModal } from "components/workspace";
 import { SettingsSidebar } from "components/project";
 // ui
 import { Disclosure, Transition } from "@headlessui/react";
-import { Spinner, CustomSelect, DangerButton, PrimaryButton, Icon } from "components/ui";
-import { Input } from "@plane/ui";
+import { Spinner, CustomSelect, Icon } from "components/ui";
+import { Button, Input } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { Pencil } from "lucide-react";
@@ -310,9 +310,9 @@ const WorkspaceSettings: NextPage = () => {
               </div>
 
               <div className="flex items-center justify-between py-2">
-                <PrimaryButton onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isAdmin}>
+                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isAdmin}>
                   {isSubmitting ? "Updating..." : "Update Workspace"}
-                </PrimaryButton>
+                </Button>
               </div>
             </div>
             {isAdmin && (
@@ -345,9 +345,9 @@ const WorkspaceSettings: NextPage = () => {
                             that workspace will be permanently removed and cannot be recovered.
                           </span>
                           <div>
-                            <DangerButton onClick={() => setIsOpen(true)} className="!text-sm" outline>
+                            <Button variant="danger" onClick={() => setIsOpen(true)} className="!text-sm" outline>
                               Delete my workspace
-                            </DangerButton>
+                            </Button>
                           </div>
                         </div>
                       </Disclosure.Panel>
diff --git a/web/pages/[workspaceSlug]/settings/members.tsx b/web/pages/[workspaceSlug]/settings/members.tsx
index e5f65a40bcc..f72f564ad83 100644
--- a/web/pages/[workspaceSlug]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/settings/members.tsx
@@ -18,7 +18,8 @@ import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace
 import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal";
 import { SettingsSidebar } from "components/project";
 // ui
-import { CustomMenu, CustomSelect, Icon, Loader, PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
+import { CustomMenu, CustomSelect, Icon, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { XMarkIcon } from "components/icons";
@@ -181,7 +182,9 @@ const MembersSettings: NextPage = () => {
         <section className="pr-9 py-8 w-full overflow-y-auto">
           <div className="flex items-center justify-between gap-4 pt-2 pb-3.5 border-b border-custom-border-200">
             <h4 className="text-xl font-medium">Members</h4>
-            <PrimaryButton onClick={() => setInviteModal(true)}>Add Member</PrimaryButton>
+            <Button variant="primary" onClick={() => setInviteModal(true)}>
+              Add Member
+            </Button>
           </div>
           {!workspaceMembers || !workspaceInvitations ? (
             <Loader className="space-y-5">
diff --git a/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx b/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
index e41b50a4aa1..5ce4d0789e3 100644
--- a/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
@@ -1,7 +1,7 @@
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
-import { PrimaryButton } from "components/ui";
 // component
+import { Button } from "@plane/ui";
 import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
 import { WorkspaceAllIssue } from "components/issues/workspace-views/workspace-all-issue";
 // icons
@@ -20,7 +20,8 @@ const WorkspaceViewAllIssue = () => (
       <div className="flex items-center gap-2">
         <WorkspaceIssuesViewOptions />
 
-        <PrimaryButton
+        <Button
+          variant="primary"
           className="flex items-center gap-2"
           onClick={() => {
             const e = new KeyboardEvent("keydown", { key: "c" });
@@ -29,7 +30,7 @@ const WorkspaceViewAllIssue = () => (
         >
           <PlusIcon className="h-4 w-4" />
           Add Issue
-        </PrimaryButton>
+        </Button>
       </div>
     }
   >
diff --git a/web/pages/[workspaceSlug]/workspace-views/assigned.tsx b/web/pages/[workspaceSlug]/workspace-views/assigned.tsx
index 0edef4d81b2..602ce0de482 100644
--- a/web/pages/[workspaceSlug]/workspace-views/assigned.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/assigned.tsx
@@ -4,7 +4,7 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
 import { WorkspaceAssignedIssue } from "components/issues/workspace-views/workspace-assigned-issue";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { CheckCircle } from "lucide-react";
@@ -20,7 +20,8 @@ const WorkspaceViewAssignedIssue: React.FC = () => (
     right={
       <div className="flex items-center gap-2">
         <WorkspaceIssuesViewOptions />
-        <PrimaryButton
+        <Button
+          variant="primary"
           className="flex items-center gap-2"
           onClick={() => {
             const e = new KeyboardEvent("keydown", { key: "c" });
@@ -29,7 +30,7 @@ const WorkspaceViewAssignedIssue: React.FC = () => (
         >
           <PlusIcon className="h-4 w-4" />
           Add Issue
-        </PrimaryButton>
+        </Button>
       </div>
     }
   >
diff --git a/web/pages/[workspaceSlug]/workspace-views/created.tsx b/web/pages/[workspaceSlug]/workspace-views/created.tsx
index 07ddbbae996..327cecc4353 100644
--- a/web/pages/[workspaceSlug]/workspace-views/created.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/created.tsx
@@ -4,7 +4,7 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
 import { WorkspaceCreatedIssues } from "components/issues/workspace-views/workspace-created-issues";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { CheckCircle } from "lucide-react";
@@ -20,7 +20,8 @@ const WorkspaceViewCreatedIssue: React.FC = () => (
     right={
       <div className="flex items-center gap-2">
         <WorkspaceIssuesViewOptions />
-        <PrimaryButton
+        <Button
+          variant="primary"
           className="flex items-center gap-2"
           onClick={() => {
             const e = new KeyboardEvent("keydown", { key: "c" });
@@ -29,7 +30,7 @@ const WorkspaceViewCreatedIssue: React.FC = () => (
         >
           <PlusIcon className="h-4 w-4" />
           Add Issue
-        </PrimaryButton>
+        </Button>
       </div>
     }
   >
diff --git a/web/pages/[workspaceSlug]/workspace-views/index.tsx b/web/pages/[workspaceSlug]/workspace-views/index.tsx
index 968e735520a..5259dd7259b 100644
--- a/web/pages/[workspaceSlug]/workspace-views/index.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/index.tsx
@@ -16,8 +16,8 @@ import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/wo
 import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
 import { DeleteWorkspaceViewModal } from "components/workspace/views/delete-workspace-view-modal";
 // ui
-import { EmptyState, Loader, PrimaryButton } from "components/ui";
-import { Input } from "@plane/ui";
+import { EmptyState, Loader } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // icons
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { PlusIcon } from "lucide-react";
@@ -103,10 +103,10 @@ const WorkspaceViews: NextPage = () => {
         <div className="flex items-center gap-2">
           <WorkspaceIssuesViewOptions />
 
-          <PrimaryButton className="flex items-center gap-2" onClick={() => setCreateUpdateViewModal(true)}>
+          <Button variant="primary" className="flex items-center gap-2" onClick={() => setCreateUpdateViewModal(true)}>
             <PlusIcon className="h-4 w-4" />
             New View
-          </PrimaryButton>
+          </Button>
         </div>
       }
     >
diff --git a/web/pages/[workspaceSlug]/workspace-views/issues.tsx b/web/pages/[workspaceSlug]/workspace-views/issues.tsx
index 1f94604c700..571da80f13c 100644
--- a/web/pages/[workspaceSlug]/workspace-views/issues.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/issues.tsx
@@ -4,7 +4,7 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
 import { WorkspaceViewIssues } from "components/issues/workspace-views/workpace-view-issues";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { CheckCircle } from "lucide-react";
@@ -20,7 +20,8 @@ const WorkspaceView = () => (
     right={
       <div className="flex items-center gap-2">
         <WorkspaceIssuesViewOptions />
-        <PrimaryButton
+        <Button
+          variant="primary"
           className="flex items-center gap-2"
           onClick={() => {
             const e = new KeyboardEvent("keydown", { key: "c" });
@@ -29,7 +30,7 @@ const WorkspaceView = () => (
         >
           <PlusIcon className="h-4 w-4" />
           Add Issue
-        </PrimaryButton>
+        </Button>
       </div>
     }
   >
diff --git a/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx b/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
index 50da24a82d2..47dc39ff110 100644
--- a/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
@@ -4,7 +4,7 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
 import { WorkspaceSubscribedIssues } from "components/issues/workspace-views/workspace-subscribed-issue";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { CheckCircle } from "lucide-react";
@@ -20,7 +20,8 @@ const WorkspaceViewSubscribedIssue: React.FC = () => (
     right={
       <div className="flex items-center gap-2">
         <WorkspaceIssuesViewOptions />
-        <PrimaryButton
+        <Button
+          variant="primary"
           className="flex items-center gap-2"
           onClick={() => {
             const e = new KeyboardEvent("keydown", { key: "c" });
@@ -29,7 +30,7 @@ const WorkspaceViewSubscribedIssue: React.FC = () => (
         >
           <PlusIcon className="h-4 w-4" />
           Add Issue
-        </PrimaryButton>
+        </Button>
       </div>
     }
   >
diff --git a/web/pages/_error.tsx b/web/pages/_error.tsx
index 3595c6ce77a..7b0659cbad5 100644
--- a/web/pages/_error.tsx
+++ b/web/pages/_error.tsx
@@ -9,7 +9,7 @@ import useToast from "hooks/use-toast";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 
 const CustomErrorComponent = () => {
   const router = useRouter();
@@ -36,9 +36,8 @@ const CustomErrorComponent = () => {
           <div className="space-y-2">
             <h3 className="text-lg font-semibold">Exception Detected!</h3>
             <p className="text-sm text-custom-text-200 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{" "}
+              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-custom-primary">
                 support@plane.so
               </a>{" "}
@@ -55,12 +54,12 @@ const CustomErrorComponent = () => {
             </p>
           </div>
           <div className="flex items-center gap-2 justify-center">
-            <PrimaryButton size="md" onClick={() => router.back()}>
+            <Button variant="primary" size="md" onClick={() => router.back()}>
               Go back
-            </PrimaryButton>
-            <SecondaryButton size="md" onClick={handleSignOut}>
+            </Button>
+            <Button variant="secondary" size="md" onClick={handleSignOut}>
               Sign out
-            </SecondaryButton>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/web/pages/invitations.tsx b/web/pages/invitations.tsx
index 283e54abffd..d2fbe46f018 100644
--- a/web/pages/invitations.tsx
+++ b/web/pages/invitations.tsx
@@ -17,7 +17,7 @@ import useToast from "hooks/use-toast";
 import DefaultLayout from "layouts/default-layout";
 import { UserAuthorizationLayout } from "layouts/auth-layout-legacy/user-authorization-wrapper";
 // ui
-import { SecondaryButton, PrimaryButton, EmptyState } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { CheckCircleIcon } from "@heroicons/react/24/outline";
 // images
@@ -174,7 +174,8 @@ const OnBoard: NextPage = () => {
                     })}
                   </div>
                   <div className="flex items-center gap-3">
-                    <PrimaryButton
+                    <Button
+                      variant="primary"
                       type="submit"
                       size="md"
                       onClick={submitInvitations}
@@ -182,12 +183,12 @@ const OnBoard: NextPage = () => {
                       loading={isJoiningWorkspaces}
                     >
                       Accept & Join
-                    </PrimaryButton>
+                    </Button>
                     <Link href="/">
                       <a>
-                        <SecondaryButton size="md" outline>
+                        <Button variant="secondary" size="md" outline>
                           Go Home
-                        </SecondaryButton>
+                        </Button>
                       </a>
                     </Link>
                   </div>
diff --git a/web/pages/m/[workspaceSlug]/editor.tsx b/web/pages/m/[workspaceSlug]/editor.tsx
index 2bfac63b85a..971c7135e6a 100644
--- a/web/pages/m/[workspaceSlug]/editor.tsx
+++ b/web/pages/m/[workspaceSlug]/editor.tsx
@@ -15,7 +15,8 @@ import WebViewLayout from "layouts/web-view-layout";
 
 // components
 import { TipTapEditor } from "components/tiptap";
-import { PrimaryButton, Spinner } from "components/ui";
+import { Spinner } from "components/ui";
+import { Button } from "@plane/ui";
 
 const Editor: NextPage = () => {
   const [isLoading, setIsLoading] = useState(false);
@@ -55,9 +56,7 @@ const Editor: NextPage = () => {
               <TipTapEditor
                 borderOnFocus={false}
                 value={
-                  !value ||
-                  value === "" ||
-                  (typeof value === "object" && Object.keys(value).length === 0)
+                  !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
                     ? watch("data_html")
                     : value
                 }
@@ -76,7 +75,8 @@ const Editor: NextPage = () => {
             )}
           />
           {isEditable && (
-            <PrimaryButton
+            <Button
+              variant="primary"
               className="mt-4 w-[calc(100%-30px)] h-[45px] mx-[15px] text-[17px]"
               onClick={() => {
                 console.log(
@@ -88,7 +88,7 @@ const Editor: NextPage = () => {
               }}
             >
               Submit
-            </PrimaryButton>
+            </Button>
           )}
         </>
       )}
diff --git a/web/pages/reset-password.tsx b/web/pages/reset-password.tsx
index 4624d9bef49..34a2ce9def3 100644
--- a/web/pages/reset-password.tsx
+++ b/web/pages/reset-password.tsx
@@ -14,8 +14,8 @@ import userService from "services/user.service";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // ui
-import { PrimaryButton, Spinner } from "components/ui";
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
+import { Spinner } from "components/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // types
@@ -157,9 +157,9 @@ const ResetPasswordPage: NextPage = () => {
                 )}
               />
             </div>
-            <PrimaryButton type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
+            <Button variant="primary" type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
               {isSubmitting ? "Resetting..." : "Reset"}
-            </PrimaryButton>
+            </Button>
           </form>
         </div>
       </div>

From e4e93f4a162bf3c542f9087641fed39d80cff36f Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 10 Oct 2023 20:15:16 +0530
Subject: [PATCH 04/15] chore: button component revamp

---
 .../tailwind-config-custom/tailwind.config.js |   2 +-
 packages/ui/dist/index.d.ts                   |   9 +-
 packages/ui/dist/index.js                     | 145 +++++++++++++-----
 packages/ui/dist/index.mjs                    | 145 +++++++++++++-----
 packages/ui/src/buttons/button.tsx            |  59 +++++++
 packages/ui/src/buttons/helper.tsx            | 115 ++++++++++++++
 packages/ui/src/buttons/index.tsx             |  95 ------------
 packages/ui/src/index.tsx                     |   2 +-
 8 files changed, 391 insertions(+), 181 deletions(-)
 create mode 100644 packages/ui/src/buttons/button.tsx
 create mode 100644 packages/ui/src/buttons/helper.tsx
 delete mode 100644 packages/ui/src/buttons/index.tsx

diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config-custom/tailwind.config.js
index 061168c4f78..4e727ecc1f5 100644
--- a/packages/tailwind-config-custom/tailwind.config.js
+++ b/packages/tailwind-config-custom/tailwind.config.js
@@ -7,7 +7,7 @@ module.exports = {
     "./constants/**/*.{js,ts,jsx,tsx}",
     "./layouts/**/*.tsx",
     "./pages/**/*.tsx",
-    "./ui/**/*.tsx",
+    "../packages/ui/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
diff --git a/packages/ui/dist/index.d.ts b/packages/ui/dist/index.d.ts
index e98ae316ee7..6a1bc60427e 100644
--- a/packages/ui/dist/index.d.ts
+++ b/packages/ui/dist/index.d.ts
@@ -3,11 +3,12 @@ import { FC } from 'react';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "primary" | "secondary" | "danger";
-    children: React.ReactNode;
-    className?: string;
-    loading?: boolean;
     size?: "sm" | "md" | "lg";
-    outline?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    appendIcon?: any;
+    prependIcon?: any;
+    children: React.ReactNode;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
diff --git a/packages/ui/dist/index.js b/packages/ui/dist/index.js
index 58f9787ec53..4296ea0a972 100644
--- a/packages/ui/dist/index.js
+++ b/packages/ui/dist/index.js
@@ -33,58 +33,123 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/buttons/index.tsx
+// src/buttons/button.tsx
 var React = __toESM(require("react"));
-var import_clsx = __toESM(require("clsx"));
+
+// src/buttons/helper.tsx
+var buttonStyling = {
+  primary: {
+    default: `text-white bg-custom-primary-100`,
+    hover: `hover:bg-custom-primary-200`,
+    pressed: `focus:text-custom-brand-40 focus:bg-custom-primary-200`,
+    disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`
+  },
+  "accent-primary": {
+    default: `bg-custom-primary-10 text-custom-primary-100`,
+    hover: `hover:bg-custom-primary-20 hover:text-custom-primary-200`,
+    pressed: `focus:bg-custom-primary-20`,
+    disabled: `cursor-not-allowed !text-custom-primary-60`
+  },
+  "outline-primary": {
+    default: `text-custom-primary-100 bg-custom-background-100 border border-custom-primary-100`,
+    hover: `hover:border-custom-primary-80 hover:bg-custom-primary-10`,
+    pressed: `focus:text-custom-primary-80 focus:bg-custom-primary-10 focus:border-custom-primary-80`,
+    disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `
+  },
+  "neutral-primary": {
+    default: `text-custom-text-200 bg-custom-background-100 border border-custom-border-200`,
+    hover: `hover:bg-custom-background-90`,
+    pressed: `focus:text-custom-text-300 focus:bg-custom-background-90`,
+    disabled: `cursor-not-allowed !text-custom-text-400`
+  },
+  "link-primary": {
+    default: `text-custom-primary-100 bg-custom-background-100`,
+    hover: `hover:text-custom-primary-200`,
+    pressed: `focus:text-custom-primary-80 `,
+    disabled: `cursor-not-allowed !text-custom-primary-60`
+  },
+  danger: {
+    default: `text-white bg-red-500`,
+    hover: ` hover:bg-red-600`,
+    pressed: `focus:text-red-200 focus:bg-red-600`,
+    disabled: `cursor-not-allowed !bg-red-300`
+  },
+  "accent-danger": {
+    default: `text-red-500 bg-red-50`,
+    hover: `hover:text-red-600 hover:bg-red-100`,
+    pressed: `focus:text-red-500 focus:bg-red-100`,
+    disabled: `cursor-not-allowed !text-red-300`
+  },
+  "outline-danger": {
+    default: `text-red-500 bg-custom-background-100 border border-red-500`,
+    hover: `hover:text-red-400 hover:border-red-400`,
+    pressed: `focus:text-red-400 focus:border-red-400`,
+    disabled: `cursor-not-allowed !text-red-300 !border-red-300`
+  },
+  "link-danger": {
+    default: `text-red-500 bg-custom-background-100`,
+    hover: `hover:text-red-400`,
+    pressed: `focus:text-red-400`,
+    disabled: `cursor-not-allowed !text-red-300`
+  },
+  "tertiary-danger": {
+    default: `text-red-500 bg-custom-background-100 border border-red-200`,
+    hover: `hover:bg-red-50 hover:border-red-300`,
+    pressed: `focus:text-red-400`,
+    disabled: `cursor-not-allowed !text-red-300`
+  }
+};
+var getButtonStyling = (variant, size, disabled = false) => {
+  let _variant = ``;
+  const currentVariant = buttonStyling[variant];
+  _variant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover} ${currentVariant.pressed}`;
+  let _size = ``;
+  if (size === "sm")
+    _size = "px-3 py-1.5 font-medium text-xs rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline" /* sm */;
+  if (size === "md")
+    _size = "px-4 py-1.5 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline" /* md */;
+  if (size === "lg")
+    _size = "px-5 py-2 font-medium text-base rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline" /* lg */;
+  return `${_variant} ${_size}`;
+};
+var getIconStyling = (size) => {
+  let icon = ``;
+  if (size === "sm")
+    icon = "h-3 w-3 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0" /* sm */;
+  if (size === "md")
+    icon = "h-3.5 w-3.5 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0" /* md */;
+  if (size === "lg")
+    icon = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0" /* lg */;
+  return icon;
+};
+
+// src/buttons/button.tsx
 var Button = React.forwardRef(
   (props, ref) => {
     const {
-      children,
-      className = "",
+      variant = "primary",
+      size = "sm",
       type = "button",
-      disabled = false,
       loading = false,
-      size = "sm",
-      outline = false,
-      variant = "primary",
+      disabled = false,
+      prependIcon = null,
+      appendIcon = null,
+      children,
       ...rest
     } = props;
-    const buttonStyleClasses = {
-      primary: {
-        variantStyle: "text-white bg-custom-primary hover:border-opacity-90 hover:bg-opacity-90",
-        variantOutlineStyle: "text-custom-primary hover:bg-custom-primary hover:text-white",
-        variantBorderStyles: "border-custom-primary"
-      },
-      secondary: {
-        variantStyle: "bg-custom-background-100 hover:border-opacity-70 hover:bg-opacity-70",
-        variantOutlineStyle: "hover:bg-custom-background-80",
-        variantBorderStyles: "border-custom-border-200"
-      },
-      danger: {
-        variantStyle: "text-white bg-red-500 hover:border-opacity-90 hover:bg-opacity-90",
-        variantOutlineStyle: " text-red-500 hover:bg-red-500 hover:text-white",
-        variantBorderStyles: "border-red-500"
-      }
-    };
+    const buttonStyle = getButtonStyling(variant, size, disabled || loading);
+    const buttonIconStyle = getIconStyling(size);
     return /* @__PURE__ */ React.createElement("button", {
-      type,
       ref,
-      className: `${className} border 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 opacity-70" : ""} ${outline ? (0, import_clsx.default)({
-        [buttonStyleClasses.primary.variantOutlineStyle]: variant === "primary",
-        [buttonStyleClasses.secondary.variantOutlineStyle]: variant === "secondary",
-        [buttonStyleClasses.danger.variantOutlineStyle]: variant === "danger"
-      }) : (0, import_clsx.default)({
-        [buttonStyleClasses.primary.variantStyle]: variant === "primary",
-        [buttonStyleClasses.secondary.variantStyle]: variant === "secondary",
-        [buttonStyleClasses.danger.variantStyle]: variant === "danger"
-      })}  ${loading ? "cursor-wait" : ""} ${(0, import_clsx.default)({
-        [buttonStyleClasses.primary.variantBorderStyles]: variant === "primary",
-        [buttonStyleClasses.secondary.variantBorderStyles]: variant === "secondary",
-        [buttonStyleClasses.danger.variantBorderStyles]: variant === "danger"
-      })}`,
+      type,
+      className: `${buttonStyle}`,
       disabled: disabled || loading,
       ...rest
-    }, children);
+    }, prependIcon && /* @__PURE__ */ React.createElement("div", {
+      className: buttonIconStyle
+    }, React.cloneElement(prependIcon, { "stroke-width": 2 })), children, appendIcon && /* @__PURE__ */ React.createElement("div", {
+      className: buttonIconStyle
+    }, React.cloneElement(appendIcon, { "stroke-width": 2 })));
   }
 );
 Button.displayName = "plane-ui-button";
diff --git a/packages/ui/dist/index.mjs b/packages/ui/dist/index.mjs
index 14bfc7f5f96..645a5e06680 100644
--- a/packages/ui/dist/index.mjs
+++ b/packages/ui/dist/index.mjs
@@ -1,55 +1,120 @@
-// src/buttons/index.tsx
+// src/buttons/button.tsx
 import * as React from "react";
-import clsx from "clsx";
+
+// src/buttons/helper.tsx
+var buttonStyling = {
+  primary: {
+    default: `text-white bg-custom-primary-100`,
+    hover: `hover:bg-custom-primary-200`,
+    pressed: `focus:text-custom-brand-40 focus:bg-custom-primary-200`,
+    disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`
+  },
+  "accent-primary": {
+    default: `bg-custom-primary-10 text-custom-primary-100`,
+    hover: `hover:bg-custom-primary-20 hover:text-custom-primary-200`,
+    pressed: `focus:bg-custom-primary-20`,
+    disabled: `cursor-not-allowed !text-custom-primary-60`
+  },
+  "outline-primary": {
+    default: `text-custom-primary-100 bg-custom-background-100 border border-custom-primary-100`,
+    hover: `hover:border-custom-primary-80 hover:bg-custom-primary-10`,
+    pressed: `focus:text-custom-primary-80 focus:bg-custom-primary-10 focus:border-custom-primary-80`,
+    disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `
+  },
+  "neutral-primary": {
+    default: `text-custom-text-200 bg-custom-background-100 border border-custom-border-200`,
+    hover: `hover:bg-custom-background-90`,
+    pressed: `focus:text-custom-text-300 focus:bg-custom-background-90`,
+    disabled: `cursor-not-allowed !text-custom-text-400`
+  },
+  "link-primary": {
+    default: `text-custom-primary-100 bg-custom-background-100`,
+    hover: `hover:text-custom-primary-200`,
+    pressed: `focus:text-custom-primary-80 `,
+    disabled: `cursor-not-allowed !text-custom-primary-60`
+  },
+  danger: {
+    default: `text-white bg-red-500`,
+    hover: ` hover:bg-red-600`,
+    pressed: `focus:text-red-200 focus:bg-red-600`,
+    disabled: `cursor-not-allowed !bg-red-300`
+  },
+  "accent-danger": {
+    default: `text-red-500 bg-red-50`,
+    hover: `hover:text-red-600 hover:bg-red-100`,
+    pressed: `focus:text-red-500 focus:bg-red-100`,
+    disabled: `cursor-not-allowed !text-red-300`
+  },
+  "outline-danger": {
+    default: `text-red-500 bg-custom-background-100 border border-red-500`,
+    hover: `hover:text-red-400 hover:border-red-400`,
+    pressed: `focus:text-red-400 focus:border-red-400`,
+    disabled: `cursor-not-allowed !text-red-300 !border-red-300`
+  },
+  "link-danger": {
+    default: `text-red-500 bg-custom-background-100`,
+    hover: `hover:text-red-400`,
+    pressed: `focus:text-red-400`,
+    disabled: `cursor-not-allowed !text-red-300`
+  },
+  "tertiary-danger": {
+    default: `text-red-500 bg-custom-background-100 border border-red-200`,
+    hover: `hover:bg-red-50 hover:border-red-300`,
+    pressed: `focus:text-red-400`,
+    disabled: `cursor-not-allowed !text-red-300`
+  }
+};
+var getButtonStyling = (variant, size, disabled = false) => {
+  let _variant = ``;
+  const currentVariant = buttonStyling[variant];
+  _variant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover} ${currentVariant.pressed}`;
+  let _size = ``;
+  if (size === "sm")
+    _size = "px-3 py-1.5 font-medium text-xs rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline" /* sm */;
+  if (size === "md")
+    _size = "px-4 py-1.5 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline" /* md */;
+  if (size === "lg")
+    _size = "px-5 py-2 font-medium text-base rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline" /* lg */;
+  return `${_variant} ${_size}`;
+};
+var getIconStyling = (size) => {
+  let icon = ``;
+  if (size === "sm")
+    icon = "h-3 w-3 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0" /* sm */;
+  if (size === "md")
+    icon = "h-3.5 w-3.5 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0" /* md */;
+  if (size === "lg")
+    icon = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0" /* lg */;
+  return icon;
+};
+
+// src/buttons/button.tsx
 var Button = React.forwardRef(
   (props, ref) => {
     const {
-      children,
-      className = "",
+      variant = "primary",
+      size = "sm",
       type = "button",
-      disabled = false,
       loading = false,
-      size = "sm",
-      outline = false,
-      variant = "primary",
+      disabled = false,
+      prependIcon = null,
+      appendIcon = null,
+      children,
       ...rest
     } = props;
-    const buttonStyleClasses = {
-      primary: {
-        variantStyle: "text-white bg-custom-primary hover:border-opacity-90 hover:bg-opacity-90",
-        variantOutlineStyle: "text-custom-primary hover:bg-custom-primary hover:text-white",
-        variantBorderStyles: "border-custom-primary"
-      },
-      secondary: {
-        variantStyle: "bg-custom-background-100 hover:border-opacity-70 hover:bg-opacity-70",
-        variantOutlineStyle: "hover:bg-custom-background-80",
-        variantBorderStyles: "border-custom-border-200"
-      },
-      danger: {
-        variantStyle: "text-white bg-red-500 hover:border-opacity-90 hover:bg-opacity-90",
-        variantOutlineStyle: " text-red-500 hover:bg-red-500 hover:text-white",
-        variantBorderStyles: "border-red-500"
-      }
-    };
+    const buttonStyle = getButtonStyling(variant, size, disabled || loading);
+    const buttonIconStyle = getIconStyling(size);
     return /* @__PURE__ */ React.createElement("button", {
-      type,
       ref,
-      className: `${className} border 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 opacity-70" : ""} ${outline ? clsx({
-        [buttonStyleClasses.primary.variantOutlineStyle]: variant === "primary",
-        [buttonStyleClasses.secondary.variantOutlineStyle]: variant === "secondary",
-        [buttonStyleClasses.danger.variantOutlineStyle]: variant === "danger"
-      }) : clsx({
-        [buttonStyleClasses.primary.variantStyle]: variant === "primary",
-        [buttonStyleClasses.secondary.variantStyle]: variant === "secondary",
-        [buttonStyleClasses.danger.variantStyle]: variant === "danger"
-      })}  ${loading ? "cursor-wait" : ""} ${clsx({
-        [buttonStyleClasses.primary.variantBorderStyles]: variant === "primary",
-        [buttonStyleClasses.secondary.variantBorderStyles]: variant === "secondary",
-        [buttonStyleClasses.danger.variantBorderStyles]: variant === "danger"
-      })}`,
+      type,
+      className: `${buttonStyle}`,
       disabled: disabled || loading,
       ...rest
-    }, children);
+    }, prependIcon && /* @__PURE__ */ React.createElement("div", {
+      className: buttonIconStyle
+    }, React.cloneElement(prependIcon, { "stroke-width": 2 })), children, appendIcon && /* @__PURE__ */ React.createElement("div", {
+      className: buttonIconStyle
+    }, React.cloneElement(appendIcon, { "stroke-width": 2 })));
   }
 );
 Button.displayName = "plane-ui-button";
diff --git a/packages/ui/src/buttons/button.tsx b/packages/ui/src/buttons/button.tsx
new file mode 100644
index 00000000000..b5da4604b2f
--- /dev/null
+++ b/packages/ui/src/buttons/button.tsx
@@ -0,0 +1,59 @@
+import * as React from "react";
+
+import { getIconStyling, getButtonStyling } from "./helper";
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "danger";
+  size?: "sm" | "md" | "lg";
+  loading?: boolean;
+  disabled?: boolean;
+  appendIcon?: any;
+  prependIcon?: any;
+  children: React.ReactNode;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const {
+      variant = "primary",
+      size = "sm",
+      type = "button",
+      loading = false,
+      disabled = false,
+      prependIcon = null,
+      appendIcon = null,
+      children,
+      ...rest
+    } = props;
+
+    const buttonStyle = getButtonStyling(variant, size, disabled || loading);
+    const buttonIconStyle = getIconStyling(size);
+
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={`${buttonStyle}`}
+        disabled={disabled || loading}
+        {...rest}
+      >
+        {prependIcon && (
+          <div className={buttonIconStyle}>
+            {React.cloneElement(prependIcon, { "stroke-width": 2 })}
+          </div>
+        )}
+        {children}
+        {appendIcon && (
+          <div className={buttonIconStyle}>
+            {React.cloneElement(appendIcon, { "stroke-width": 2 })}
+          </div>
+        )}
+      </button>
+    );
+  }
+);
+
+Button.displayName = "plane-ui-button";
+
+export { Button };
diff --git a/packages/ui/src/buttons/helper.tsx b/packages/ui/src/buttons/helper.tsx
new file mode 100644
index 00000000000..5a0b6a99225
--- /dev/null
+++ b/packages/ui/src/buttons/helper.tsx
@@ -0,0 +1,115 @@
+export type TButtonVariant = "primary" | "secondary" | "danger";
+
+export type TButtonSizes = "sm" | "md" | "lg";
+
+export interface IButtonStyling {
+  [key: string]: {
+    default: string;
+    hover: string;
+    pressed: string;
+    disabled: string;
+  };
+}
+
+enum buttonSizeStyling {
+  sm = `px-3 py-1.5 font-medium text-xs rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
+  md = `px-4 py-1.5 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
+  lg = `px-5 py-2 font-medium text-base rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
+}
+
+enum buttonIconStyling {
+  sm = "h-3 w-3 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
+  md = "h-3.5 w-3.5 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
+  lg = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
+}
+
+export const buttonStyling: IButtonStyling = {
+  primary: {
+    default: `text-white bg-custom-primary-100`,
+    hover: `hover:bg-custom-primary-200`,
+    pressed: `focus:text-custom-brand-40 focus:bg-custom-primary-200`,
+    disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
+  },
+  "accent-primary": {
+    default: `bg-custom-primary-10 text-custom-primary-100`,
+    hover: `hover:bg-custom-primary-20 hover:text-custom-primary-200`,
+    pressed: `focus:bg-custom-primary-20`,
+    disabled: `cursor-not-allowed !text-custom-primary-60`,
+  },
+  "outline-primary": {
+    default: `text-custom-primary-100 bg-custom-background-100 border border-custom-primary-100`,
+    hover: `hover:border-custom-primary-80 hover:bg-custom-primary-10`,
+    pressed: `focus:text-custom-primary-80 focus:bg-custom-primary-10 focus:border-custom-primary-80`,
+    disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
+  },
+  "neutral-primary": {
+    default: `text-custom-text-200 bg-custom-background-100 border border-custom-border-200`,
+    hover: `hover:bg-custom-background-90`,
+    pressed: `focus:text-custom-text-300 focus:bg-custom-background-90`,
+    disabled: `cursor-not-allowed !text-custom-text-400`,
+  },
+  "link-primary": {
+    default: `text-custom-primary-100 bg-custom-background-100`,
+    hover: `hover:text-custom-primary-200`,
+    pressed: `focus:text-custom-primary-80 `,
+    disabled: `cursor-not-allowed !text-custom-primary-60`,
+  },
+
+  danger: {
+    default: `text-white bg-red-500`,
+    hover: ` hover:bg-red-600`,
+    pressed: `focus:text-red-200 focus:bg-red-600`,
+    disabled: `cursor-not-allowed !bg-red-300`,
+  },
+  "accent-danger": {
+    default: `text-red-500 bg-red-50`,
+    hover: `hover:text-red-600 hover:bg-red-100`,
+    pressed: `focus:text-red-500 focus:bg-red-100`,
+    disabled: `cursor-not-allowed !text-red-300`,
+  },
+  "outline-danger": {
+    default: `text-red-500 bg-custom-background-100 border border-red-500`,
+    hover: `hover:text-red-400 hover:border-red-400`,
+    pressed: `focus:text-red-400 focus:border-red-400`,
+    disabled: `cursor-not-allowed !text-red-300 !border-red-300`,
+  },
+  "link-danger": {
+    default: `text-red-500 bg-custom-background-100`,
+    hover: `hover:text-red-400`,
+    pressed: `focus:text-red-400`,
+    disabled: `cursor-not-allowed !text-red-300`,
+  },
+  "tertiary-danger": {
+    default: `text-red-500 bg-custom-background-100 border border-red-200`,
+    hover: `hover:bg-red-50 hover:border-red-300`,
+    pressed: `focus:text-red-400`,
+    disabled: `cursor-not-allowed !text-red-300`,
+  },
+};
+
+export const getButtonStyling = (
+  variant: TButtonVariant,
+  size: TButtonSizes,
+  disabled: boolean = false
+): string => {
+  let _variant: string = ``;
+  const currentVariant = buttonStyling[variant];
+
+  _variant = `${currentVariant.default} ${
+    disabled ? currentVariant.disabled : currentVariant.hover
+  } ${currentVariant.pressed}`;
+
+  let _size: string = ``;
+  if (size === "sm") _size = buttonSizeStyling["sm"];
+  if (size === "md") _size = buttonSizeStyling["md"];
+  if (size === "lg") _size = buttonSizeStyling["lg"];
+  return `${_variant} ${_size}`;
+};
+
+export const getIconStyling = (size: TButtonSizes): string => {
+  let icon: string = ``;
+  if (size === "sm") icon = buttonIconStyling["sm"];
+  if (size === "md") icon = buttonIconStyling["md"];
+  if (size === "lg") icon = buttonIconStyling["lg"];
+  return icon;
+};
diff --git a/packages/ui/src/buttons/index.tsx b/packages/ui/src/buttons/index.tsx
deleted file mode 100644
index 59506c2d42c..00000000000
--- a/packages/ui/src/buttons/index.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import * as React from "react";
-import clsx from "clsx";
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "primary" | "secondary" | "danger";
-  children: React.ReactNode;
-  className?: string;
-  loading?: boolean;
-  size?: "sm" | "md" | "lg";
-  outline?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    const {
-      children,
-      className = "",
-      type = "button",
-      disabled = false,
-      loading = false,
-      size = "sm",
-      outline = false,
-      variant = "primary",
-      ...rest
-    } = props;
-
-    const buttonStyleClasses = {
-      primary: {
-        variantStyle:
-          "text-white bg-custom-primary hover:border-opacity-90 hover:bg-opacity-90",
-        variantOutlineStyle:
-          "text-custom-primary hover:bg-custom-primary hover:text-white",
-        variantBorderStyles: "border-custom-primary",
-      },
-      secondary: {
-        variantStyle:
-          "bg-custom-background-100 hover:border-opacity-70 hover:bg-opacity-70",
-        variantOutlineStyle: "hover:bg-custom-background-80",
-        variantBorderStyles: "border-custom-border-200",
-      },
-      danger: {
-        variantStyle:
-          "text-white bg-red-500 hover:border-opacity-90 hover:bg-opacity-90",
-        variantOutlineStyle: " text-red-500 hover:bg-red-500 hover:text-white",
-        variantBorderStyles: "border-red-500",
-      },
-    };
-
-    return (
-      <button
-        type={type}
-        ref={ref}
-        className={`${className} border 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 opacity-70" : ""} ${
-          outline
-            ? clsx({
-                [buttonStyleClasses.primary.variantOutlineStyle]:
-                  variant === "primary",
-                [buttonStyleClasses.secondary.variantOutlineStyle]:
-                  variant === "secondary",
-                [buttonStyleClasses.danger.variantOutlineStyle]:
-                  variant === "danger",
-              })
-            : clsx({
-                [buttonStyleClasses.primary.variantStyle]:
-                  variant === "primary",
-                [buttonStyleClasses.secondary.variantStyle]:
-                  variant === "secondary",
-                [buttonStyleClasses.danger.variantStyle]: variant === "danger",
-              })
-        }  ${loading ? "cursor-wait" : ""} ${clsx({
-          [buttonStyleClasses.primary.variantBorderStyles]:
-            variant === "primary",
-          [buttonStyleClasses.secondary.variantBorderStyles]:
-            variant === "secondary",
-          [buttonStyleClasses.danger.variantBorderStyles]: variant === "danger",
-        })}`}
-        disabled={disabled || loading}
-        {...rest}
-      >
-        {children}
-      </button>
-    );
-  }
-);
-
-Button.displayName = "plane-ui-button";
-
-export { Button };
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 3833a91fa31..53f00fb3b04 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -1,3 +1,3 @@
-export * from "./buttons";
+export * from "./buttons/button";
 export * from "./form-fields";
 export * from "./progress";

From 8e379c45409a04d07c35e509aea6f333ca7a31d4 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 10 Oct 2023 20:30:09 +0530
Subject: [PATCH 05/15] fix: button type fix

---
 packages/ui/dist/index.d.ts        |  4 +++-
 packages/ui/dist/index.js          |  2 +-
 packages/ui/dist/index.mjs         |  2 +-
 packages/ui/src/buttons/button.tsx |  6 +++---
 packages/ui/src/buttons/helper.tsx | 12 +++++++++++-
 5 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/ui/dist/index.d.ts b/packages/ui/dist/index.d.ts
index 967d23ee4d6..5bf2067599d 100644
--- a/packages/ui/dist/index.d.ts
+++ b/packages/ui/dist/index.d.ts
@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { FC } from 'react';
 
+declare type TButtonVariant = "primary" | "accent-primary" | "outline-primary" | "neutral-primary" | "link-primary" | "danger" | "accent-danger" | "outline-danger" | "link-danger" | "tertiary-danger";
+
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: "primary" | "secondary" | "danger";
+    variant?: TButtonVariant;
     size?: "sm" | "md" | "lg";
     loading?: boolean;
     disabled?: boolean;
diff --git a/packages/ui/dist/index.js b/packages/ui/dist/index.js
index 091476eb050..bbd5542d9e0 100644
--- a/packages/ui/dist/index.js
+++ b/packages/ui/dist/index.js
@@ -129,7 +129,7 @@ var Button = React.forwardRef(
   (props, ref) => {
     const {
       variant = "primary",
-      size = "sm",
+      size = "md",
       type = "button",
       loading = false,
       disabled = false,
diff --git a/packages/ui/dist/index.mjs b/packages/ui/dist/index.mjs
index 011b00f84d5..451153738f2 100644
--- a/packages/ui/dist/index.mjs
+++ b/packages/ui/dist/index.mjs
@@ -93,7 +93,7 @@ var Button = React.forwardRef(
   (props, ref) => {
     const {
       variant = "primary",
-      size = "sm",
+      size = "md",
       type = "button",
       loading = false,
       disabled = false,
diff --git a/packages/ui/src/buttons/button.tsx b/packages/ui/src/buttons/button.tsx
index b5da4604b2f..e301b625ef0 100644
--- a/packages/ui/src/buttons/button.tsx
+++ b/packages/ui/src/buttons/button.tsx
@@ -1,10 +1,10 @@
 import * as React from "react";
 
-import { getIconStyling, getButtonStyling } from "./helper";
+import { getIconStyling, getButtonStyling, TButtonVariant } from "./helper";
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "primary" | "secondary" | "danger";
+  variant?: TButtonVariant;
   size?: "sm" | "md" | "lg";
   loading?: boolean;
   disabled?: boolean;
@@ -17,7 +17,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref) => {
     const {
       variant = "primary",
-      size = "sm",
+      size = "md",
       type = "button",
       loading = false,
       disabled = false,
diff --git a/packages/ui/src/buttons/helper.tsx b/packages/ui/src/buttons/helper.tsx
index 5a0b6a99225..1eaee51340c 100644
--- a/packages/ui/src/buttons/helper.tsx
+++ b/packages/ui/src/buttons/helper.tsx
@@ -1,4 +1,14 @@
-export type TButtonVariant = "primary" | "secondary" | "danger";
+export type TButtonVariant =
+  | "primary"
+  | "accent-primary"
+  | "outline-primary"
+  | "neutral-primary"
+  | "link-primary"
+  | "danger"
+  | "accent-danger"
+  | "outline-danger"
+  | "link-danger"
+  | "tertiary-danger";
 
 export type TButtonSizes = "sm" | "md" | "lg";
 

From fddea280b0917fc13a925f176247fb9ba8dc5f33 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 10 Oct 2023 23:30:17 +0530
Subject: [PATCH 06/15] chore: secondary button revamp

---
 .../account/email-reset-password-form.tsx     |  6 +--
 .../create-update-analytics-modal.tsx         |  2 +-
 .../analytics/custom-analytics/sidebar.tsx    | 15 +++-----
 .../auth-screens/workspace/not-a-member.tsx   |  2 +-
 .../automation/select-month-modal.tsx         |  2 +-
 .../core/filters/date-filter-modal.tsx        |  2 +-
 web/components/core/image-picker-popover.tsx  |  3 +-
 .../core/modals/bulk-delete-issues-modal.tsx  |  2 +-
 .../modals/existing-issues-list-modal.tsx     |  2 +-
 .../core/modals/gpt-assistant-modal.tsx       |  2 +-
 .../core/modals/image-upload-modal.tsx        |  2 +-
 web/components/core/modals/link-modal.tsx     |  2 +-
 web/components/core/views/issues-view.tsx     |  7 +---
 web/components/cycles/delete-cycle-modal.tsx  |  2 +-
 web/components/cycles/form.tsx                |  2 +-
 .../create-update-estimate-modal.tsx          |  2 +-
 .../estimates/delete-estimate-modal.tsx       |  2 +-
 web/components/estimates/single-estimate.tsx  |  6 +--
 web/components/exporter/export-modal.tsx      |  2 +-
 web/components/inbox/accept-issue-modal.tsx   |  2 +-
 web/components/inbox/decline-issue-modal.tsx  |  2 +-
 web/components/inbox/delete-issue-modal.tsx   |  2 +-
 web/components/inbox/inbox-action-headers.tsx | 37 +++++++++----------
 web/components/inbox/select-duplicate.tsx     |  2 +-
 .../integration/delete-import-modal.tsx       |  2 +-
 .../integration/github/import-confirm.tsx     |  2 +-
 .../integration/github/import-data.tsx        |  2 +-
 .../integration/github/import-users.tsx       |  2 +-
 .../integration/github/repo-details.tsx       |  2 +-
 web/components/integration/jira/root.tsx      |  2 +-
 .../attachment/delete-attachment-modal.tsx    |  2 +-
 web/components/issues/comment/add-comment.tsx |  2 +-
 .../issues/confirm-issue-discard.tsx          |  4 +-
 .../issues/delete-draft-issue-modal.tsx       |  2 +-
 web/components/issues/delete-issue-modal.tsx  |  2 +-
 web/components/issues/draft-issue-form.tsx    |  4 +-
 web/components/issues/form.tsx                |  2 +-
 web/components/labels/create-label-modal.tsx  |  2 +-
 .../labels/create-update-label-inline.tsx     |  2 +-
 web/components/labels/delete-label-modal.tsx  |  2 +-
 .../modules/delete-module-modal.tsx           |  2 +-
 web/components/modules/form.tsx               |  2 +-
 .../select-snooze-till-modal.tsx              |  2 +-
 web/components/onboarding/invite-members.tsx  |  2 +-
 web/components/onboarding/join-workspaces.tsx |  2 +-
 web/components/onboarding/tour/root.tsx       |  2 +-
 web/components/onboarding/workspace.tsx       |  2 +-
 .../pages/create-update-block-inline.tsx      |  2 +-
 web/components/pages/delete-page-modal.tsx    |  2 +-
 web/components/pages/page-form.tsx            |  2 +-
 .../project/confirm-project-member-remove.tsx |  2 +-
 .../project/create-project-modal.tsx          |  2 +-
 .../project/delete-project-modal.tsx          |  2 +-
 web/components/project/join-project-modal.tsx |  2 +-
 .../project/leave-project-modal.tsx           |  2 +-
 .../project/publish-project/modal.tsx         |  2 +-
 .../project/send-project-invitation-modal.tsx |  2 +-
 .../project/settings/single-label.tsx         |  2 +-
 web/components/states/create-state-modal.tsx  |  2 +-
 .../states/create-update-state-inline.tsx     |  2 +-
 web/components/states/delete-state-modal.tsx  |  2 +-
 web/components/views/delete-view-modal.tsx    |  2 +-
 web/components/views/form.tsx                 |  2 +-
 web/components/web-view/issue-link-list.tsx   | 11 +-----
 .../web-view/issue-properties-detail.tsx      |  8 ++--
 .../confirm-workspace-member-remove.tsx       |  2 +-
 .../workspace/delete-workspace-modal.tsx      |  2 +-
 .../send-workspace-invitation-modal.tsx       |  2 +-
 .../views/delete-workspace-view-modal.tsx     |  2 +-
 web/components/workspace/views/form.tsx       |  2 +-
 web/layouts/auth-layout/workspace-wrapper.tsx |  2 +-
 web/pages/404.tsx                             |  2 +-
 .../projects/[projectId]/cycles/[cycleId].tsx |  7 +---
 .../[projectId]/settings/estimates.tsx        |  2 +-
 .../[workspaceSlug]/settings/billing.tsx      |  4 +-
 web/pages/_error.tsx                          |  2 +-
 web/pages/invitations/index.tsx               |  2 +-
 77 files changed, 103 insertions(+), 139 deletions(-)

diff --git a/web/components/account/email-reset-password-form.tsx b/web/components/account/email-reset-password-form.tsx
index 43f5389b1f4..947f045d7f4 100644
--- a/web/components/account/email-reset-password-form.tsx
+++ b/web/components/account/email-reset-password-form.tsx
@@ -91,11 +91,7 @@ export const EmailResetPasswordForm: React.FC<Props> = (props) => {
         />
       </div>
       <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
-        <Button
-          variant="secondary"
-          className="w-full text-center h-[46px]"
-          onClick={() => setIsResettingPassword(false)}
-        >
+        <Button variant="neutral-primary" onClick={() => setIsResettingPassword(false)}>
           Go Back
         </Button>
         <Button variant="primary" type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
diff --git a/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx b/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx
index 30a8eb060d6..508f5722ec0 100644
--- a/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx
+++ b/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx
@@ -156,7 +156,7 @@ export const CreateUpdateAnalyticsModal: React.FC<Props> = ({ isOpen, handleClos
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <Button variant="secondary" onClick={onClose}>
+                    <Button variant="neutral-primary" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button variant="primary" type="submit" loading={isSubmitting}>
diff --git a/web/components/analytics/custom-analytics/sidebar.tsx b/web/components/analytics/custom-analytics/sidebar.tsx
index 12809617251..6c6dbb7a5be 100644
--- a/web/components/analytics/custom-analytics/sidebar.tsx
+++ b/web/components/analytics/custom-analytics/sidebar.tsx
@@ -329,23 +329,18 @@ export const AnalyticsSidebar: React.FC<Props> = ({ analytics, params, fullScree
       </div>
       <div className="flex items-center gap-2 flex-wrap justify-self-end">
         <Button
-          variant="secondary"
+          variant="neutral-primary"
+          prependIcon={<ArrowPathIcon className="h-3.5 w-3.5" />}
           onClick={() => {
             if (!workspaceSlug) return;
-
             mutate(ANALYTICS(workspaceSlug.toString(), params));
           }}
         >
-          <div className="flex items-center gap-2 -my-1">
-            <ArrowPathIcon className="h-3.5 w-3.5" />
-            Refresh
-          </div>
+          Refresh
         </Button>
         <Button variant="primary" onClick={exportAnalytics}>
-          <div className="flex items-center gap-2 -my-1">
-            <ArrowDownTrayIcon className="h-3.5 w-3.5" />
-            Export as CSV
-          </div>
+          <ArrowDownTrayIcon className="h-3.5 w-3.5" />
+          Export as CSV
         </Button>
       </div>
     </div>
diff --git a/web/components/auth-screens/workspace/not-a-member.tsx b/web/components/auth-screens/workspace/not-a-member.tsx
index 852b2fdc31e..6737115a0f7 100644
--- a/web/components/auth-screens/workspace/not-a-member.tsx
+++ b/web/components/auth-screens/workspace/not-a-member.tsx
@@ -19,7 +19,7 @@ export const NotAWorkspaceMember = () => (
         <div className="flex items-center justify-center gap-2">
           <Link href="/invitations">
             <a>
-              <Button variant="secondary">Check pending invites</Button>
+              <Button variant="neutral-primary">Check pending invites</Button>
             </a>
           </Link>
           <Link href="/create-workspace">
diff --git a/web/components/automation/select-month-modal.tsx b/web/components/automation/select-month-modal.tsx
index a1fbfb83284..0fc42361a44 100644
--- a/web/components/automation/select-month-modal.tsx
+++ b/web/components/automation/select-month-modal.tsx
@@ -147,7 +147,7 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <Button variant="secondary" onClick={onClose}>
+                    <Button variant="neutral-primary" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button variant="primary" type="submit" loading={isSubmitting}>
diff --git a/web/components/core/filters/date-filter-modal.tsx b/web/components/core/filters/date-filter-modal.tsx
index dd728de7828..561fa881ca0 100644
--- a/web/components/core/filters/date-filter-modal.tsx
+++ b/web/components/core/filters/date-filter-modal.tsx
@@ -127,7 +127,7 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                     </h6>
                   )}
                   <div className="flex justify-end gap-4">
-                    <Button variant="secondary" className="flex items-center gap-2" onClick={handleClose}>
+                    <Button variant="neutral-primary" className="flex items-center gap-2" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button variant="primary" type="submit" className="flex items-center gap-2" disabled={isInvalid}>
diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx
index f34223216d9..6f69e244e96 100644
--- a/web/components/core/image-picker-popover.tsx
+++ b/web/components/core/image-picker-popover.tsx
@@ -317,8 +317,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, control, onC
 
                     <div className="flex items-center justify-end gap-2">
                       <Button
-                        variant="secondary"
-                        className="w-full"
+                        variant="neutral-primary"
                         onClick={() => {
                           setIsOpen(false);
                           setImage(null);
diff --git a/web/components/core/modals/bulk-delete-issues-modal.tsx b/web/components/core/modals/bulk-delete-issues-modal.tsx
index 3f4cb049e43..7ecbb3a13b0 100644
--- a/web/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/web/components/core/modals/bulk-delete-issues-modal.tsx
@@ -240,7 +240,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
 
                 {filteredIssues.length > 0 && (
                   <div className="flex items-center justify-end gap-2 p-3">
-                    <Button variant="secondary" onClick={handleClose}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button variant="danger" onClick={handleSubmit(handleDelete)} loading={isSubmitting}>
diff --git a/web/components/core/modals/existing-issues-list-modal.tsx b/web/components/core/modals/existing-issues-list-modal.tsx
index 3657fbbafa6..f6644e84e9b 100644
--- a/web/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/components/core/modals/existing-issues-list-modal.tsx
@@ -293,7 +293,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                 </Combobox>
                 {selectedIssues.length > 0 && (
                   <div className="flex items-center justify-end gap-2 p-3">
-                    <Button variant="secondary" onClick={handleClose}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button variant="primary" onClick={onSubmit} loading={isSubmitting}>
diff --git a/web/components/core/modals/gpt-assistant-modal.tsx b/web/components/core/modals/gpt-assistant-modal.tsx
index 08566acf67d..3da40b5c5d7 100644
--- a/web/components/core/modals/gpt-assistant-modal.tsx
+++ b/web/components/core/modals/gpt-assistant-modal.tsx
@@ -201,7 +201,7 @@ export const GptAssistantModal: React.FC<Props> = ({
           </Button>
         )}
         <div className="flex items-center gap-2">
-          <Button variant="secondary" onClick={onClose}>
+          <Button variant="neutral-primary" onClick={onClose}>
             Close
           </Button>
           <Button variant="primary" type="button" onClick={handleSubmit(handleResponse)} loading={isSubmitting}>
diff --git a/web/components/core/modals/image-upload-modal.tsx b/web/components/core/modals/image-upload-modal.tsx
index 64974b2fa79..a83edfb79bd 100644
--- a/web/components/core/modals/image-upload-modal.tsx
+++ b/web/components/core/modals/image-upload-modal.tsx
@@ -185,7 +185,7 @@ export const ImageUploadModal: React.FC<Props> = ({
                     </Button>
                   </div>
                   <div className="flex items-center gap-2">
-                    <Button variant="secondary" onClick={handleClose}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button variant="primary" onClick={handleSubmit} disabled={!image} loading={isImageUploading}>
diff --git a/web/components/core/modals/link-modal.tsx b/web/components/core/modals/link-modal.tsx
index ab1d035e1f4..2e8531bd678 100644
--- a/web/components/core/modals/link-modal.tsx
+++ b/web/components/core/modals/link-modal.tsx
@@ -148,7 +148,7 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, createIssueLin
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <Button variant="secondary" onClick={onClose}>
+                    <Button variant="neutral-primary" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button variant="primary" type="submit" loading={isSubmitting}>
diff --git a/web/components/core/views/issues-view.tsx b/web/components/core/views/issues-view.tsx
index f461f4d5c84..3df93b3b74d 100644
--- a/web/components/core/views/issues-view.tsx
+++ b/web/components/core/views/issues-view.tsx
@@ -557,12 +557,7 @@ export const IssuesView: React.FC<Props> = ({ openIssuesListModal, disableUserAc
             : undefined,
           secondaryButton:
             cycleId || moduleId ? (
-              <Button
-                variant="secondary"
-                className="flex items-center gap-1.5"
-                onClick={openIssuesListModal ?? (() => {})}
-              >
-                <PlusIcon className="h-4 w-4" />
+              <Button variant="neutral-primary" prependIcon={<PlusIcon />} onClick={openIssuesListModal ?? (() => {})}>
                 Add an existing issue
               </Button>
             ) : null,
diff --git a/web/components/cycles/delete-cycle-modal.tsx b/web/components/cycles/delete-cycle-modal.tsx
index 9b19da3776a..c2e5085b2cb 100644
--- a/web/components/cycles/delete-cycle-modal.tsx
+++ b/web/components/cycles/delete-cycle-modal.tsx
@@ -156,7 +156,7 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({ isOpen,
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="secondary" onClick={handleClose}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
diff --git a/web/components/cycles/form.tsx b/web/components/cycles/form.tsx
index 74f122cd188..c4188ea00a3 100644
--- a/web/components/cycles/form.tsx
+++ b/web/components/cycles/form.tsx
@@ -114,7 +114,7 @@ export const CycleForm: React.FC<Props> = (props) => {
         </div>
       </div>
       <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-200 px-5 pt-5">
-        <Button variant="secondary" onClick={handleClose}>
+        <Button variant="neutral-primary" onClick={handleClose}>
           Cancel
         </Button>
         <Button variant="primary" type="submit" loading={isSubmitting}>
diff --git a/web/components/estimates/create-update-estimate-modal.tsx b/web/components/estimates/create-update-estimate-modal.tsx
index a317d8015e8..5cf9140d761 100644
--- a/web/components/estimates/create-update-estimate-modal.tsx
+++ b/web/components/estimates/create-update-estimate-modal.tsx
@@ -436,7 +436,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                       </div>
                     </div>
                     <div className="mt-5 flex justify-end gap-2">
-                      <Button variant="secondary" onClick={handleClose}>
+                      <Button variant="neutral-primary" onClick={handleClose}>
                         Cancel
                       </Button>
                       <Button variant="primary" type="submit" loading={isSubmitting}>
diff --git a/web/components/estimates/delete-estimate-modal.tsx b/web/components/estimates/delete-estimate-modal.tsx
index 557e70fede3..ce5eb9db5e3 100644
--- a/web/components/estimates/delete-estimate-modal.tsx
+++ b/web/components/estimates/delete-estimate-modal.tsx
@@ -74,7 +74,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({ isOpen, handleClose, data
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <Button variant="secondary" onClick={onClose}>
+                    <Button variant="neutral-primary" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button
diff --git a/web/components/estimates/single-estimate.tsx b/web/components/estimates/single-estimate.tsx
index c793a2618cd..31831078009 100644
--- a/web/components/estimates/single-estimate.tsx
+++ b/web/components/estimates/single-estimate.tsx
@@ -75,11 +75,7 @@ export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate,
           </div>
           <div className="flex items-center gap-2">
             {projectDetails?.estimate !== estimate.id && estimate.points.length > 0 && (
-              <Button
-                variant="secondary"
-                onClick={handleUseEstimate}
-                className="!py-1 text-custom-text-200 hover:text-custom-text-100"
-              >
+              <Button variant="neutral-primary" onClick={handleUseEstimate}>
                 Use
               </Button>
             )}
diff --git a/web/components/exporter/export-modal.tsx b/web/components/exporter/export-modal.tsx
index ebb72366b3c..9b4d35b2c80 100644
--- a/web/components/exporter/export-modal.tsx
+++ b/web/components/exporter/export-modal.tsx
@@ -144,7 +144,7 @@ export const Exporter: React.FC<Props> = ({ isOpen, handleClose, user, provider,
                     <div className="text-sm whitespace-nowrap">Export the data into separate files</div>
                   </div>
                   <div className="flex justify-end gap-2">
-                    <Button variant="secondary" onClick={handleClose}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button
diff --git a/web/components/inbox/accept-issue-modal.tsx b/web/components/inbox/accept-issue-modal.tsx
index d84e21c3ac0..bca83a3ec9e 100644
--- a/web/components/inbox/accept-issue-modal.tsx
+++ b/web/components/inbox/accept-issue-modal.tsx
@@ -76,7 +76,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <Button variant="secondary" onClick={onClose}>
+                    <Button variant="neutral-primary" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button variant="primary" onClick={handleAccept} loading={isAccepting}>
diff --git a/web/components/inbox/decline-issue-modal.tsx b/web/components/inbox/decline-issue-modal.tsx
index 118824bd3d1..48786da556b 100644
--- a/web/components/inbox/decline-issue-modal.tsx
+++ b/web/components/inbox/decline-issue-modal.tsx
@@ -76,7 +76,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <Button variant="secondary" onClick={onClose}>
+                    <Button variant="neutral-primary" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button variant="danger" onClick={handleDecline} loading={isDeclining}>
diff --git a/web/components/inbox/delete-issue-modal.tsx b/web/components/inbox/delete-issue-modal.tsx
index 232fbdad1e0..fc4f7fd0faf 100644
--- a/web/components/inbox/delete-issue-modal.tsx
+++ b/web/components/inbox/delete-issue-modal.tsx
@@ -131,7 +131,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <Button variant="secondary" onClick={onClose}>
+                    <Button variant="neutral-primary" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button variant="danger" onClick={handleDelete} loading={isDeleting}>
diff --git a/web/components/inbox/inbox-action-headers.tsx b/web/components/inbox/inbox-action-headers.tsx
index 7bab9c227a3..42450768bfc 100644
--- a/web/components/inbox/inbox-action-headers.tsx
+++ b/web/components/inbox/inbox-action-headers.tsx
@@ -196,9 +196,12 @@ export const InboxActionHeader = () => {
                 <div className="flex-shrink-0">
                   <Popover className="relative">
                     <Popover.Button as="button" type="button">
-                      <Button variant="secondary" className="flex gap-x-1 items-center" size="sm">
-                        <ClockIcon className="h-4 w-4 text-custom-text-200" />
-                        <span>Snooze</span>
+                      <Button
+                        variant="neutral-primary"
+                        prependIcon={<ClockIcon className="text-custom-text-200" />}
+                        size="sm"
+                      >
+                        Snooze
                       </Button>
                     </Popover.Button>
                     <Popover.Panel className="w-80 p-2 absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-80 shadow-lg">
@@ -236,52 +239,48 @@ export const InboxActionHeader = () => {
               {isAllowed && issueStatus === -2 && (
                 <div className="flex-shrink-0">
                   <Button
-                    variant="secondary"
+                    variant="neutral-primary"
                     size="sm"
-                    className="flex gap-2 items-center"
+                    prependIcon={<StackedLayersHorizontalIcon className="text-custom-text-200" />}
                     onClick={() => setSelectDuplicateIssue(true)}
                   >
-                    <StackedLayersHorizontalIcon className="h-4 w-4 text-custom-text-200" />
-                    <span>Mark as duplicate</span>
+                    Mark as duplicate
                   </Button>
                 </div>
               )}
               {isAllowed && (issueStatus === 0 || issueStatus === -2) && (
                 <div className="flex-shrink-0">
                   <Button
-                    variant="secondary"
+                    variant="neutral-primary"
                     size="sm"
-                    className="flex gap-2 items-center"
+                    prependIcon={<CheckCircleIcon className="text-green-500" />}
                     onClick={() => setAcceptIssueModal(true)}
                   >
-                    <CheckCircleIcon className="h-4 w-4 text-green-500" />
-                    <span>Accept</span>
+                    Accept
                   </Button>
                 </div>
               )}
               {isAllowed && issueStatus === -2 && (
                 <div className="flex-shrink-0">
                   <Button
-                    variant="secondary"
+                    variant="neutral-primary"
                     size="sm"
-                    className="flex gap-2 items-center"
+                    prependIcon={<XCircleIcon className="text-red-500" />}
                     onClick={() => setDeclineIssueModal(true)}
                   >
-                    <XCircleIcon className="h-4 w-4 text-red-500" />
-                    <span>Decline</span>
+                    Decline
                   </Button>
                 </div>
               )}
               {(isAllowed || user?.id === issue?.created_by) && (
                 <div className="flex-shrink-0">
                   <Button
-                    variant="secondary"
+                    variant="neutral-primary"
                     size="sm"
-                    className="flex gap-2 items-center"
+                    prependIcon={<TrashIcon className="text-red-500" />}
                     onClick={() => setDeleteIssueModal(true)}
                   >
-                    <TrashIcon className="h-4 w-4 text-red-500" />
-                    <span>Delete</span>
+                    Delete
                   </Button>
                 </div>
               )}
diff --git a/web/components/inbox/select-duplicate.tsx b/web/components/inbox/select-duplicate.tsx
index 7f066a88a51..6bf68341247 100644
--- a/web/components/inbox/select-duplicate.tsx
+++ b/web/components/inbox/select-duplicate.tsx
@@ -170,7 +170,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
 
                   {filteredIssues.length > 0 && (
                     <div className="flex items-center justify-end gap-2 p-3">
-                      <Button variant="secondary" onClick={handleClose}>
+                      <Button variant="neutral-primary" onClick={handleClose}>
                         Cancel
                       </Button>
                       <Button variant="primary" onClick={handleSubmit}>
diff --git a/web/components/integration/delete-import-modal.tsx b/web/components/integration/delete-import-modal.tsx
index 855b9aac84e..b4de8b3871c 100644
--- a/web/components/integration/delete-import-modal.tsx
+++ b/web/components/integration/delete-import-modal.tsx
@@ -123,7 +123,7 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
                     />
                   </div>
                   <div className="flex justify-end gap-2">
-                    <Button variant="secondary" onClick={handleClose}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button
diff --git a/web/components/integration/github/import-confirm.tsx b/web/components/integration/github/import-confirm.tsx
index 69b27b2710e..65f3e82b2e6 100644
--- a/web/components/integration/github/import-confirm.tsx
+++ b/web/components/integration/github/import-confirm.tsx
@@ -19,7 +19,7 @@ export const GithubImportConfirm: FC<Props> = ({ handleStepChange, watch }) => (
       to complete the process.
     </h4>
     <div className="mt-6 flex items-center justify-between">
-      <Button variant="secondary" onClick={() => handleStepChange("import-users")}>
+      <Button variant="neutral-primary" onClick={() => handleStepChange("import-users")}>
         Back
       </Button>
       <Button variant="primary" type="submit">
diff --git a/web/components/integration/github/import-data.tsx b/web/components/integration/github/import-data.tsx
index f7dce7a8688..380bcfa5248 100644
--- a/web/components/integration/github/import-data.tsx
+++ b/web/components/integration/github/import-data.tsx
@@ -108,7 +108,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         </div>
       </div>
       <div className="mt-6 flex items-center justify-end gap-2">
-        <Button variant="secondary" onClick={() => handleStepChange("import-configure")}>
+        <Button variant="neutral-primary" onClick={() => handleStepChange("import-configure")}>
           Back
         </Button>
         <Button
diff --git a/web/components/integration/github/import-users.tsx b/web/components/integration/github/import-users.tsx
index efedce2b68b..ad06544387c 100644
--- a/web/components/integration/github/import-users.tsx
+++ b/web/components/integration/github/import-users.tsx
@@ -38,7 +38,7 @@ export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers
         </div>
       </div>
       <div className="mt-6 flex items-center justify-end gap-2">
-        <Button variant="secondary" onClick={() => handleStepChange("repo-details")}>
+        <Button variant="neutral-primary" onClick={() => handleStepChange("repo-details")}>
           Back
         </Button>
         <Button variant="primary" onClick={() => handleStepChange("import-confirm")} disabled={isInvalid}>
diff --git a/web/components/integration/github/repo-details.tsx b/web/components/integration/github/repo-details.tsx
index 8f1a41b2da8..a59197750a6 100644
--- a/web/components/integration/github/repo-details.tsx
+++ b/web/components/integration/github/repo-details.tsx
@@ -86,7 +86,7 @@ export const GithubRepoDetails: FC<Props> = ({ selectedRepo, handleStepChange, s
         </Loader>
       )}
       <div className="mt-6 flex items-center justify-end gap-2">
-        <Button variant="secondary" onClick={() => handleStepChange("import-data")}>
+        <Button variant="neutral-primary" onClick={() => handleStepChange("import-data")}>
           Back
         </Button>
         <Button
diff --git a/web/components/integration/jira/root.tsx b/web/components/integration/jira/root.tsx
index 374f0f1b32d..b1b5fa746fe 100644
--- a/web/components/integration/jira/root.tsx
+++ b/web/components/integration/jira/root.tsx
@@ -179,7 +179,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
               <div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-custom-border-200 p-4 pb-0">
                 {currentStep?.state !== "import-configure" && (
                   <Button
-                    variant="secondary"
+                    variant="neutral-primary"
                     onClick={() => {
                       const currentElementIndex = integrationWorkflowData.findIndex(
                         (i) => i?.key === currentStep?.state
diff --git a/web/components/issues/attachment/delete-attachment-modal.tsx b/web/components/issues/attachment/delete-attachment-modal.tsx
index 908d59e047d..3dead2d39a6 100644
--- a/web/components/issues/attachment/delete-attachment-modal.tsx
+++ b/web/components/issues/attachment/delete-attachment-modal.tsx
@@ -106,7 +106,7 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
                     </div>
                   </div>
                   <div className="flex justify-end gap-2 bg-custom-background-90 p-4 sm:px-6">
-                    <Button variant="secondary" onClick={handleClose}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button
diff --git a/web/components/issues/comment/add-comment.tsx b/web/components/issues/comment/add-comment.tsx
index 1cabb6f2f16..64198784d9c 100644
--- a/web/components/issues/comment/add-comment.tsx
+++ b/web/components/issues/comment/add-comment.tsx
@@ -107,7 +107,7 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit, showAc
             />
           </div>
 
-          <Button variant="secondary" type="submit" disabled={isSubmitting || disabled} className="mt-2">
+          <Button variant="neutral-primary" type="submit" disabled={isSubmitting || disabled}>
             {isSubmitting ? "Adding..." : "Comment"}
           </Button>
         </div>
diff --git a/web/components/issues/confirm-issue-discard.tsx b/web/components/issues/confirm-issue-discard.tsx
index 24ccc3f2b10..98b4eaf4806 100644
--- a/web/components/issues/confirm-issue-discard.tsx
+++ b/web/components/issues/confirm-issue-discard.tsx
@@ -69,12 +69,12 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
                 </div>
                 <div className="flex justify-between gap-2 p-4 sm:px-6">
                   <div>
-                    <Button variant="secondary" onClick={onDiscard}>
+                    <Button variant="neutral-primary" onClick={onDiscard}>
                       Discard
                     </Button>
                   </div>
                   <div className="space-x-2">
-                    <Button variant="secondary" onClick={onClose}>
+                    <Button variant="neutral-primary" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button variant="primary" onClick={handleDeletion} loading={isLoading}>
diff --git a/web/components/issues/delete-draft-issue-modal.tsx b/web/components/issues/delete-draft-issue-modal.tsx
index e0f84153969..1b54f2c0972 100644
--- a/web/components/issues/delete-draft-issue-modal.tsx
+++ b/web/components/issues/delete-draft-issue-modal.tsx
@@ -129,7 +129,7 @@ export const DeleteDraftIssueModal: React.FC<Props> = (props) => {
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <Button variant="secondary" onClick={onClose}>
+                    <Button variant="neutral-primary" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
diff --git a/web/components/issues/delete-issue-modal.tsx b/web/components/issues/delete-issue-modal.tsx
index 605ec985c15..0dcf08f5ee2 100644
--- a/web/components/issues/delete-issue-modal.tsx
+++ b/web/components/issues/delete-issue-modal.tsx
@@ -182,7 +182,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <Button variant="secondary" onClick={onClose}>
+                    <Button variant="neutral-primary" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button variant="danger" onClick={handleIssueDelete} loading={isDeleteLoading}>
diff --git a/web/components/issues/draft-issue-form.tsx b/web/components/issues/draft-issue-form.tsx
index 43cda61bf57..5c384c2b5f0 100644
--- a/web/components/issues/draft-issue-form.tsx
+++ b/web/components/issues/draft-issue-form.tsx
@@ -593,11 +593,11 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
             <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
           </div>
           <div className="flex items-center gap-2">
-            <Button variant="secondary" onClick={handleDiscard}>
+            <Button variant="neutral-primary" onClick={handleDiscard}>
               Discard
             </Button>
             <Button
-              variant="secondary"
+              variant="neutral-primary"
               loading={isSubmitting}
               onClick={handleSubmit((formData) =>
                 handleCreateUpdateIssue(formData, data?.id ? "updateDraft" : "createDraft")
diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx
index 0eae65a3bb6..f073f1e4b0a 100644
--- a/web/components/issues/form.tsx
+++ b/web/components/issues/form.tsx
@@ -559,7 +559,7 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
           </div>
           <div className="flex items-center gap-2">
             <Button
-              variant="secondary"
+              variant="neutral-primary"
               onClick={() => {
                 handleDiscardClose();
               }}
diff --git a/web/components/labels/create-label-modal.tsx b/web/components/labels/create-label-modal.tsx
index f04c77d563f..158eefb9499 100644
--- a/web/components/labels/create-label-modal.tsx
+++ b/web/components/labels/create-label-modal.tsx
@@ -187,7 +187,7 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <Button variant="secondary" onClick={onClose}>
+                    <Button variant="neutral-primary" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button variant="primary" type="submit" loading={isSubmitting}>
diff --git a/web/components/labels/create-update-label-inline.tsx b/web/components/labels/create-update-label-inline.tsx
index 52ea30fc0b3..de87a1341a6 100644
--- a/web/components/labels/create-update-label-inline.tsx
+++ b/web/components/labels/create-update-label-inline.tsx
@@ -185,7 +185,7 @@ export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(functio
           )}
         />
       </div>
-      <Button variant="secondary" onClick={() => handleClose()}>
+      <Button variant="neutral-primary" onClick={() => handleClose()}>
         Cancel
       </Button>
       {isUpdating ? (
diff --git a/web/components/labels/delete-label-modal.tsx b/web/components/labels/delete-label-modal.tsx
index d074ef5c8d3..99362741ffd 100644
--- a/web/components/labels/delete-label-modal.tsx
+++ b/web/components/labels/delete-label-modal.tsx
@@ -112,7 +112,7 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="secondary" onClick={handleClose}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
diff --git a/web/components/modules/delete-module-modal.tsx b/web/components/modules/delete-module-modal.tsx
index 354d613cc22..06bf44a4b72 100644
--- a/web/components/modules/delete-module-modal.tsx
+++ b/web/components/modules/delete-module-modal.tsx
@@ -109,7 +109,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="secondary" onClick={handleClose}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
diff --git a/web/components/modules/form.tsx b/web/components/modules/form.tsx
index 2385532c931..fa52e227ff4 100644
--- a/web/components/modules/form.tsx
+++ b/web/components/modules/form.tsx
@@ -153,7 +153,7 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
         </div>
       </div>
       <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-200 px-5 pt-5">
-        <Button variant="secondary" onClick={handleClose}>
+        <Button variant="neutral-primary" onClick={handleClose}>
           Cancel
         </Button>
         <Button variant="primary" type="submit" loading={isSubmitting}>
diff --git a/web/components/notifications/select-snooze-till-modal.tsx b/web/components/notifications/select-snooze-till-modal.tsx
index 979b9e96a8f..46600549c45 100644
--- a/web/components/notifications/select-snooze-till-modal.tsx
+++ b/web/components/notifications/select-snooze-till-modal.tsx
@@ -255,7 +255,7 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
 
                   <div className="mt-5 flex items-center justify-between gap-2">
                     <div className="w-full flex items-center gap-2 justify-end">
-                      <Button variant="secondary" onClick={handleClose}>
+                      <Button variant="neutral-primary" onClick={handleClose}>
                         Cancel
                       </Button>
                       <Button variant="primary" type="submit" loading={isSubmitting}>
diff --git a/web/components/onboarding/invite-members.tsx b/web/components/onboarding/invite-members.tsx
index 4f1887e3795..cf05bc9aeb4 100644
--- a/web/components/onboarding/invite-members.tsx
+++ b/web/components/onboarding/invite-members.tsx
@@ -260,7 +260,7 @@ export const InviteMembers: React.FC<Props> = (props) => {
         <Button variant="primary" type="submit" disabled={!isValid} loading={isSubmitting} size="md">
           {isSubmitting ? "Sending..." : "Send Invite"}
         </Button>
-        <Button variant="secondary" className="border border-none bg-transparent" size="md" onClick={nextStep}>
+        <Button variant="neutral-primary" size="md" onClick={nextStep}>
           Skip this step
         </Button>
       </div>
diff --git a/web/components/onboarding/join-workspaces.tsx b/web/components/onboarding/join-workspaces.tsx
index fa0042a2e18..43828961728 100644
--- a/web/components/onboarding/join-workspaces.tsx
+++ b/web/components/onboarding/join-workspaces.tsx
@@ -124,7 +124,7 @@ export const JoinWorkspaces: React.FC<Props> = ({ finishOnboarding, stepChange,
         >
           Accept & Join
         </Button>
-        <Button variant="secondary" className="border border-none bg-transparent" size="md" onClick={handleNextStep}>
+        <Button variant="neutral-primary" size="md" onClick={handleNextStep}>
           Skip for now
         </Button>
       </div>
diff --git a/web/components/onboarding/tour/root.tsx b/web/components/onboarding/tour/root.tsx
index 5b5038795e8..001e13be8ae 100644
--- a/web/components/onboarding/tour/root.tsx
+++ b/web/components/onboarding/tour/root.tsx
@@ -138,7 +138,7 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
               <div className="h-full flex items-end justify-between gap-4 mt-3">
                 <div className="flex items-center gap-4">
                   {currentStep?.prevStep && (
-                    <Button variant="secondary" onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
+                    <Button variant="neutral-primary" onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
                       Back
                     </Button>
                   )}
diff --git a/web/components/onboarding/workspace.tsx b/web/components/onboarding/workspace.tsx
index d595a6f7b97..e433268b7a6 100644
--- a/web/components/onboarding/workspace.tsx
+++ b/web/components/onboarding/workspace.tsx
@@ -55,7 +55,7 @@ export const Workspace: React.FC<Props> = ({ finishOnboarding, stepChange, updat
           }}
           secondaryButton={
             workspaces ? (
-              <Button variant="secondary" onClick={secondaryButtonAction}>
+              <Button variant="neutral-primary" onClick={secondaryButtonAction}>
                 {workspaces.length > 0 ? "Skip & continue" : "Back"}
               </Button>
             ) : undefined
diff --git a/web/components/pages/create-update-block-inline.tsx b/web/components/pages/create-update-block-inline.tsx
index 83b00f03015..3639b48191e 100644
--- a/web/components/pages/create-update-block-inline.tsx
+++ b/web/components/pages/create-update-block-inline.tsx
@@ -354,7 +354,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
           </div>
         </div>
         <div className="flex items-center justify-end gap-2 p-4">
-          <Button variant="secondary" onClick={handleClose}>
+          <Button variant="neutral-primary" onClick={handleClose}>
             Cancel
           </Button>
           <Button variant="primary" type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
diff --git a/web/components/pages/delete-page-modal.tsx b/web/components/pages/delete-page-modal.tsx
index 4e7a9cc850a..9b2d5d4538b 100644
--- a/web/components/pages/delete-page-modal.tsx
+++ b/web/components/pages/delete-page-modal.tsx
@@ -128,7 +128,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({ isOpen, s
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="secondary" onClick={handleClose}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
diff --git a/web/components/pages/page-form.tsx b/web/components/pages/page-form.tsx
index 18a9f8f9ee6..160a0f4f0db 100644
--- a/web/components/pages/page-form.tsx
+++ b/web/components/pages/page-form.tsx
@@ -79,7 +79,7 @@ export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
         </div>
       </div>
       <div className="mt-5 flex justify-end gap-2">
-        <Button variant="secondary" onClick={handleClose}>
+        <Button variant="neutral-primary" onClick={handleClose}>
           Cancel
         </Button>
         <Button variant="primary" type="submit" loading={isSubmitting}>
diff --git a/web/components/project/confirm-project-member-remove.tsx b/web/components/project/confirm-project-member-remove.tsx
index f8e477453ce..772a3045e84 100644
--- a/web/components/project/confirm-project-member-remove.tsx
+++ b/web/components/project/confirm-project-member-remove.tsx
@@ -74,7 +74,7 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="secondary" onClick={handleClose}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index ca2f2fc3568..d80c25c576f 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -411,7 +411,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                   </div>
 
                   <div className="flex justify-end gap-2 pt-5">
-                    <Button variant="secondary" onClick={handleClose}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button variant="primary" type="submit" size="sm" loading={isSubmitting}>
diff --git a/web/components/project/delete-project-modal.tsx b/web/components/project/delete-project-modal.tsx
index 036abc87d9c..d2cfdc5b111 100644
--- a/web/components/project/delete-project-modal.tsx
+++ b/web/components/project/delete-project-modal.tsx
@@ -160,7 +160,7 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
                     />
                   </div>
                   <div className="flex justify-end gap-2">
-                    <Button variant="secondary" onClick={handleClose}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button variant="danger" type="submit" disabled={!canDelete} loading={isSubmitting}>
diff --git a/web/components/project/join-project-modal.tsx b/web/components/project/join-project-modal.tsx
index f4276b2d447..ef6874db928 100644
--- a/web/components/project/join-project-modal.tsx
+++ b/web/components/project/join-project-modal.tsx
@@ -73,7 +73,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
                   <div className="space-y-3" />
                 </div>
                 <div className="mt-5 flex justify-end gap-2">
-                  <Button variant="secondary" onClick={handleClose}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button variant="primary" type="submit" onClick={handleJoin} loading={isJoiningLoading}>
diff --git a/web/components/project/leave-project-modal.tsx b/web/components/project/leave-project-modal.tsx
index b313c5a1a71..584ad9d5b78 100644
--- a/web/components/project/leave-project-modal.tsx
+++ b/web/components/project/leave-project-modal.tsx
@@ -197,7 +197,7 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
                     />
                   </div>
                   <div className="flex justify-end gap-2">
-                    <Button variant="secondary" onClick={handleClose}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button variant="danger" type="submit" loading={isSubmitting}>
diff --git a/web/components/project/publish-project/modal.tsx b/web/components/project/publish-project/modal.tsx
index 4ea215d759a..74f9a1131e9 100644
--- a/web/components/project/publish-project/modal.tsx
+++ b/web/components/project/publish-project/modal.tsx
@@ -477,7 +477,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                     </div>
                     {!projectPublish.fetchSettingsLoader && (
                       <div className="relative flex items-center gap-2">
-                        <Button variant="secondary" onClick={handleClose}>
+                        <Button variant="neutral-primary" onClick={handleClose}>
                           Cancel
                         </Button>
                         {watch("id") ? (
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index 395a3c74fe9..1ffb2bf7cbf 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -285,7 +285,7 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
                       Add more
                     </button>
                     <div className="flex items-center gap-2">
-                      <Button variant="secondary" onClick={handleClose}>
+                      <Button variant="neutral-primary" onClick={handleClose}>
                         Cancel
                       </Button>
                       <Button variant="primary" type="submit" loading={isSubmitting}>
diff --git a/web/components/project/settings/single-label.tsx b/web/components/project/settings/single-label.tsx
index b7acc272c8a..6b0c58afbca 100644
--- a/web/components/project/settings/single-label.tsx
+++ b/web/components/project/settings/single-label.tsx
@@ -123,7 +123,7 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
                 )}
               />
             </div>
-            <Button variant="secondary" onClick={() => setNewLabelForm(false)}>
+            <Button variant="neutral-primary" onClick={() => setNewLabelForm(false)}>
               Cancel
             </Button>
             <Button variant="primary" loading={isSubmitting}>
diff --git a/web/components/states/create-state-modal.tsx b/web/components/states/create-state-modal.tsx
index 355d68c9982..de109b9987e 100644
--- a/web/components/states/create-state-modal.tsx
+++ b/web/components/states/create-state-modal.tsx
@@ -256,7 +256,7 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <Button variant="secondary" onClick={onClose}>
+                    <Button variant="neutral-primary" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button variant="primary" type="submit" loading={isSubmitting}>
diff --git a/web/components/states/create-update-state-inline.tsx b/web/components/states/create-update-state-inline.tsx
index e30c2e803cb..46d8a068c43 100644
--- a/web/components/states/create-update-state-inline.tsx
+++ b/web/components/states/create-update-state-inline.tsx
@@ -273,7 +273,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
           />
         )}
       />
-      <Button variant="secondary" onClick={handleClose}>
+      <Button variant="neutral-primary" onClick={handleClose}>
         Cancel
       </Button>
       <Button variant="primary" type="submit" loading={isSubmitting}>
diff --git a/web/components/states/delete-state-modal.tsx b/web/components/states/delete-state-modal.tsx
index 9e428d0be06..7d089319351 100644
--- a/web/components/states/delete-state-modal.tsx
+++ b/web/components/states/delete-state-modal.tsx
@@ -129,7 +129,7 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="secondary" onClick={handleClose}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
diff --git a/web/components/views/delete-view-modal.tsx b/web/components/views/delete-view-modal.tsx
index 8ed64487af8..31bdd7db7e9 100644
--- a/web/components/views/delete-view-modal.tsx
+++ b/web/components/views/delete-view-modal.tsx
@@ -115,7 +115,7 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="secondary" onClick={handleClose}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
diff --git a/web/components/views/form.tsx b/web/components/views/form.tsx
index 8ee414b7f58..07877355f95 100644
--- a/web/components/views/form.tsx
+++ b/web/components/views/form.tsx
@@ -202,7 +202,7 @@ export const ViewForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
         </div>
       </div>
       <div className="mt-5 flex justify-end gap-2">
-        <Button variant="secondary" onClick={handleClose}>
+        <Button variant="neutral-primary" onClick={handleClose}>
           Cancel
         </Button>
         <Button variant="primary" type="submit" loading={isSubmitting}>
diff --git a/web/components/web-view/issue-link-list.tsx b/web/components/web-view/issue-link-list.tsx
index 767e2a55bb8..746ea7eb6c6 100644
--- a/web/components/web-view/issue-link-list.tsx
+++ b/web/components/web-view/issue-link-list.tsx
@@ -123,15 +123,8 @@ export const IssueLinks: React.FC<Props> = (props) => {
             )}
           </div>
         ))}
-        <Button
-          variant="secondary"
-          type="button"
-          disabled={!allowed}
-          onClick={() => setIsOpen(true)}
-          className="w-full !py-2 text-custom-text-300 !text-base flex items-center justify-center"
-        >
-          <Plus className="w-[18px] h-[18px] inline-block mr-1" />
-          <span>Add</span>
+        <Button variant="neutral-primary" prependIcon={<Plus />} disabled={!allowed} onClick={() => setIsOpen(true)}>
+          Add
         </Button>
       </div>
     </div>
diff --git a/web/components/web-view/issue-properties-detail.tsx b/web/components/web-view/issue-properties-detail.tsx
index ebfd607f78c..27457333b6e 100644
--- a/web/components/web-view/issue-properties-detail.tsx
+++ b/web/components/web-view/issue-properties-detail.tsx
@@ -393,13 +393,11 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
       )}
       <div className="mb-[6px]">
         <Button
-          variant="secondary"
-          type="button"
+          variant="neutral-primary"
+          appendIcon={<ChevronDown className={`text-custom-primary-100 ${isViewAllOpen ? "-rotate-180" : ""}`} />}
           onClick={() => setIsViewAllOpen((prev) => !prev)}
-          className="w-full flex justify-center items-center gap-1 !py-2"
         >
-          <span className="text-base text-custom-primary-100">{isViewAllOpen ? "View less" : "View all"}</span>
-          <ChevronDown size={16} className={`ml-1 text-custom-primary-100 ${isViewAllOpen ? "-rotate-180" : ""}`} />
+          {isViewAllOpen ? "View less" : "View all"}
         </Button>
       </div>
     </div>
diff --git a/web/components/workspace/confirm-workspace-member-remove.tsx b/web/components/workspace/confirm-workspace-member-remove.tsx
index 945e7211356..aa2f4cd4dc1 100644
--- a/web/components/workspace/confirm-workspace-member-remove.tsx
+++ b/web/components/workspace/confirm-workspace-member-remove.tsx
@@ -74,7 +74,7 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="secondary" onClick={handleClose}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
diff --git a/web/components/workspace/delete-workspace-modal.tsx b/web/components/workspace/delete-workspace-modal.tsx
index e87181a0eb6..3e18d7575e4 100644
--- a/web/components/workspace/delete-workspace-modal.tsx
+++ b/web/components/workspace/delete-workspace-modal.tsx
@@ -178,7 +178,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
                   </div>
 
                   <div className="flex justify-end gap-2">
-                    <Button variant="secondary" onClick={handleClose}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button variant="danger" type="submit" disabled={!canDelete} loading={isSubmitting}>
diff --git a/web/components/workspace/send-workspace-invitation-modal.tsx b/web/components/workspace/send-workspace-invitation-modal.tsx
index 2655d4dd153..c243fd1c911 100644
--- a/web/components/workspace/send-workspace-invitation-modal.tsx
+++ b/web/components/workspace/send-workspace-invitation-modal.tsx
@@ -235,7 +235,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
                       Add more
                     </button>
                     <div className="flex items-center gap-2">
-                      <Button variant="secondary" onClick={handleClose}>
+                      <Button variant="neutral-primary" onClick={handleClose}>
                         Cancel
                       </Button>
                       <Button variant="primary" type="submit" loading={isSubmitting}>
diff --git a/web/components/workspace/views/delete-workspace-view-modal.tsx b/web/components/workspace/views/delete-workspace-view-modal.tsx
index cf4441f0587..0bddaa306c0 100644
--- a/web/components/workspace/views/delete-workspace-view-modal.tsx
+++ b/web/components/workspace/views/delete-workspace-view-modal.tsx
@@ -117,7 +117,7 @@ export const DeleteWorkspaceViewModal: React.FC<Props> = ({ isOpen, data, setIsO
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="secondary" onClick={handleClose}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
diff --git a/web/components/workspace/views/form.tsx b/web/components/workspace/views/form.tsx
index 685d6e47879..a0069fd0dbf 100644
--- a/web/components/workspace/views/form.tsx
+++ b/web/components/workspace/views/form.tsx
@@ -201,7 +201,7 @@ export const WorkspaceViewForm: React.FC<Props> = ({ handleFormSubmit, handleClo
         </div>
       </div>
       <div className="mt-5 flex justify-end gap-2">
-        <Button variant="secondary" onClick={handleClose}>
+        <Button variant="neutral-primary" onClick={handleClose}>
           Cancel
         </Button>
         <Button variant="primary" type="submit" loading={isSubmitting}>
diff --git a/web/layouts/auth-layout/workspace-wrapper.tsx b/web/layouts/auth-layout/workspace-wrapper.tsx
index bfd38828178..37d6a399ea3 100644
--- a/web/layouts/auth-layout/workspace-wrapper.tsx
+++ b/web/layouts/auth-layout/workspace-wrapper.tsx
@@ -55,7 +55,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = (props) => {
             <div className="flex items-center justify-center gap-2">
               <Link href="/invitations">
                 <a>
-                  <Button variant="secondary">Check pending invites</Button>
+                  <Button variant="neutral-primary">Check pending invites</Button>
                 </a>
               </Link>
               <Link href="/create-workspace">
diff --git a/web/pages/404.tsx b/web/pages/404.tsx
index 328a74178e5..e5f5ee7fd68 100644
--- a/web/pages/404.tsx
+++ b/web/pages/404.tsx
@@ -28,7 +28,7 @@ const PageNotFound: NextPage = () => (
         </div>
         <Link href="/">
           <a className="block">
-            <Button variant="secondary" size="md">
+            <Button variant="neutral-primary" size="md">
               Go to Home
             </Button>
           </a>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index 0934ac9a6f9..40ab0b4819f 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -133,12 +133,7 @@ const SingleCycle: React.FC = () => {
         right={
           <div className={`flex flex-shrink-0 items-center gap-2 duration-300`}>
             <IssuesFilterView />
-            <Button
-              variant="secondary"
-              onClick={() => setAnalyticsModal(true)}
-              className="!py-1.5 font-normal rounded-md text-custom-text-200 hover:text-custom-text-100"
-              outline
-            >
+            <Button variant="neutral-primary" onClick={() => setAnalyticsModal(true)}>
               Analytics
             </Button>
             <button
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index 9785fdafc03..b6aba4141e1 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -141,7 +141,7 @@ const EstimatesSettings: NextPage = () => {
                     Add Estimate
                   </Button>
                   {projectDetails?.estimate && (
-                    <Button variant="secondary" onClick={disableEstimates}>
+                    <Button variant="neutral-primary" onClick={disableEstimates}>
                       Disable Estimates
                     </Button>
                   )}
diff --git a/web/pages/[workspaceSlug]/settings/billing.tsx b/web/pages/[workspaceSlug]/settings/billing.tsx
index be7d4574744..c852fe9e1ce 100644
--- a/web/pages/[workspaceSlug]/settings/billing.tsx
+++ b/web/pages/[workspaceSlug]/settings/billing.tsx
@@ -57,9 +57,7 @@ const BillingSettings: NextPage = () => {
               <h4 className="text-md mb-1 leading-6">Current plan</h4>
               <p className="mb-3 text-sm text-custom-text-200">You are currently using the free plan</p>
               <a href="https://plane.so/pricing" target="_blank" rel="noreferrer">
-                <Button variant="secondary" outline>
-                  View Plans
-                </Button>
+                <Button variant="neutral-primary">View Plans</Button>
               </a>
             </div>
           </div>
diff --git a/web/pages/_error.tsx b/web/pages/_error.tsx
index 7b0659cbad5..c285dd41542 100644
--- a/web/pages/_error.tsx
+++ b/web/pages/_error.tsx
@@ -57,7 +57,7 @@ const CustomErrorComponent = () => {
             <Button variant="primary" size="md" onClick={() => router.back()}>
               Go back
             </Button>
-            <Button variant="secondary" size="md" onClick={handleSignOut}>
+            <Button variant="neutral-primary" size="md" onClick={handleSignOut}>
               Sign out
             </Button>
           </div>
diff --git a/web/pages/invitations/index.tsx b/web/pages/invitations/index.tsx
index d2fbe46f018..0f6c68edcb5 100644
--- a/web/pages/invitations/index.tsx
+++ b/web/pages/invitations/index.tsx
@@ -186,7 +186,7 @@ const OnBoard: NextPage = () => {
                     </Button>
                     <Link href="/">
                       <a>
-                        <Button variant="secondary" size="md" outline>
+                        <Button variant="neutral-primary" size="md">
                           Go Home
                         </Button>
                       </a>

From 26743833deefa08e102aa9a01c94fbc4dfcd3fe9 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 11 Oct 2023 01:46:58 +0530
Subject: [PATCH 07/15] chore: button props updated

---
 packages/ui/dist/index.d.ts                           |  1 +
 packages/ui/dist/index.js                             |  3 ++-
 packages/ui/dist/index.mjs                            |  3 ++-
 packages/ui/src/buttons/button.tsx                    |  4 +++-
 .../components/accounts/email-reset-password-form.tsx | 11 ++++++-----
 web/components/account/email-code-form.tsx            |  4 ++--
 web/components/account/email-password-form.tsx        |  2 +-
 web/components/account/email-reset-password-form.tsx  |  4 ++--
 web/components/account/email-signup-form.tsx          |  2 +-
 web/components/analytics/custom-analytics/sidebar.tsx |  3 +--
 web/components/auth-screens/project/join-project.tsx  |  8 ++++++--
 web/components/core/filters/date-filter-modal.tsx     |  4 ++--
 web/components/core/modals/gpt-assistant-modal.tsx    |  2 +-
 web/components/core/modals/image-upload-modal.tsx     |  2 +-
 web/components/core/views/issues-view.tsx             |  3 +--
 web/components/cycles/transfer-issues.tsx             |  5 ++---
 web/components/exporter/guide.tsx                     |  4 +---
 web/components/exporter/single-export.tsx             |  2 +-
 web/components/inbox/inbox-action-headers.tsx         |  1 -
 web/components/integration/guide.tsx                  |  4 +---
 .../integration/single-integration-card.tsx           |  2 +-
 .../issues/workspace-views/workpace-view-issues.tsx   |  3 +--
 .../issues/workspace-views/workspace-all-issue.tsx    |  2 +-
 web/components/project/publish-project/modal.tsx      |  1 -
 web/components/ui/empty-state.tsx                     |  3 +--
 web/components/web-view/add-comment.tsx               |  7 +------
 web/components/web-view/create-update-link-form.tsx   |  7 +------
 .../project-authorization-wrapper.tsx                 |  4 ++--
 .../workspace-authorization-wrapper.tsx               |  4 ++--
 web/pages/[workspaceSlug]/me/my-issues.tsx            |  3 +--
 .../projects/[projectId]/cycles/index.tsx             |  3 +--
 .../projects/[projectId]/inbox/[inboxId].tsx          |  3 +--
 .../projects/[projectId]/modules/index.tsx            |  3 +--
 .../projects/[projectId]/pages/index.tsx              |  3 +--
 .../projects/[projectId]/settings/index.tsx           |  7 +------
 .../projects/[projectId]/settings/labels.tsx          |  2 +-
 .../projects/[projectId]/views/[viewId].tsx           |  3 +--
 .../projects/[projectId]/views/index.tsx              |  4 +---
 web/pages/[workspaceSlug]/projects/index.tsx          |  3 +--
 web/pages/[workspaceSlug]/settings/index.tsx          |  2 +-
 .../[workspaceSlug]/workspace-views/all-issues.tsx    |  3 +--
 .../[workspaceSlug]/workspace-views/assigned.tsx      |  3 +--
 web/pages/[workspaceSlug]/workspace-views/created.tsx |  3 +--
 web/pages/[workspaceSlug]/workspace-views/index.tsx   |  3 +--
 web/pages/[workspaceSlug]/workspace-views/issues.tsx  |  3 +--
 .../[workspaceSlug]/workspace-views/subscribed.tsx    |  3 +--
 web/pages/accounts/reset-password.tsx                 |  2 +-
 47 files changed, 65 insertions(+), 96 deletions(-)

diff --git a/packages/ui/dist/index.d.ts b/packages/ui/dist/index.d.ts
index 5bf2067599d..4413cd58797 100644
--- a/packages/ui/dist/index.d.ts
+++ b/packages/ui/dist/index.d.ts
@@ -6,6 +6,7 @@ declare type TButtonVariant = "primary" | "accent-primary" | "outline-primary" |
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: TButtonVariant;
     size?: "sm" | "md" | "lg";
+    className?: string;
     loading?: boolean;
     disabled?: boolean;
     appendIcon?: any;
diff --git a/packages/ui/dist/index.js b/packages/ui/dist/index.js
index bbd5542d9e0..ddf2336f309 100644
--- a/packages/ui/dist/index.js
+++ b/packages/ui/dist/index.js
@@ -130,6 +130,7 @@ var Button = React.forwardRef(
     const {
       variant = "primary",
       size = "md",
+      className = "",
       type = "button",
       loading = false,
       disabled = false,
@@ -143,7 +144,7 @@ var Button = React.forwardRef(
     return /* @__PURE__ */ React.createElement("button", {
       ref,
       type,
-      className: `${buttonStyle}`,
+      className: `${buttonStyle} ${className}`,
       disabled: disabled || loading,
       ...rest
     }, prependIcon && /* @__PURE__ */ React.createElement("div", {
diff --git a/packages/ui/dist/index.mjs b/packages/ui/dist/index.mjs
index 451153738f2..3503eb8040f 100644
--- a/packages/ui/dist/index.mjs
+++ b/packages/ui/dist/index.mjs
@@ -94,6 +94,7 @@ var Button = React.forwardRef(
     const {
       variant = "primary",
       size = "md",
+      className = "",
       type = "button",
       loading = false,
       disabled = false,
@@ -107,7 +108,7 @@ var Button = React.forwardRef(
     return /* @__PURE__ */ React.createElement("button", {
       ref,
       type,
-      className: `${buttonStyle}`,
+      className: `${buttonStyle} ${className}`,
       disabled: disabled || loading,
       ...rest
     }, prependIcon && /* @__PURE__ */ React.createElement("div", {
diff --git a/packages/ui/src/buttons/button.tsx b/packages/ui/src/buttons/button.tsx
index e301b625ef0..a11ce9e8bf1 100644
--- a/packages/ui/src/buttons/button.tsx
+++ b/packages/ui/src/buttons/button.tsx
@@ -6,6 +6,7 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: TButtonVariant;
   size?: "sm" | "md" | "lg";
+  className?: string;
   loading?: boolean;
   disabled?: boolean;
   appendIcon?: any;
@@ -18,6 +19,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const {
       variant = "primary",
       size = "md",
+      className = "",
       type = "button",
       loading = false,
       disabled = false,
@@ -34,7 +36,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <button
         ref={ref}
         type={type}
-        className={`${buttonStyle}`}
+        className={`${buttonStyle} ${className}`}
         disabled={disabled || loading}
         {...rest}
       >
diff --git a/space/components/accounts/email-reset-password-form.tsx b/space/components/accounts/email-reset-password-form.tsx
index c850b305cec..ee71890ecd3 100644
--- a/space/components/accounts/email-reset-password-form.tsx
+++ b/space/components/accounts/email-reset-password-form.tsx
@@ -7,7 +7,8 @@ import userService from "services/user.service";
 // hooks
 // import useToast from "hooks/use-toast";
 // ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { Input } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 type Props = {
   setIsResettingPassword: React.Dispatch<React.SetStateAction<boolean>>;
@@ -77,12 +78,12 @@ export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword
         {errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
       </div>
       <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
-        <SecondaryButton className="w-full text-center h-[46px]" onClick={() => setIsResettingPassword(false)}>
+        <Button variant="neutral-primary" className="w-full" onClick={() => setIsResettingPassword(false)}>
           Go Back
-        </SecondaryButton>
-        <PrimaryButton type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
+        </Button>
+        <Button variant="primary" className="w-full" type="submit" loading={isSubmitting}>
           {isSubmitting ? "Sending link..." : "Send reset link"}
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/account/email-code-form.tsx b/web/components/account/email-code-form.tsx
index 52fea3b5b8d..1a4b1208d89 100644
--- a/web/components/account/email-code-form.tsx
+++ b/web/components/account/email-code-form.tsx
@@ -200,7 +200,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
           <Button
             variant="primary"
             type="submit"
-            className="w-full text-center h-[46px]"
+            className="w-full"
             size="md"
             onClick={handleSubmit(handleSignin)}
             disabled={!isValid && isDirty}
@@ -211,7 +211,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
         ) : (
           <Button
             variant="primary"
-            className="w-full text-center h-[46px]"
+            className="w-full"
             size="md"
             onClick={() => {
               handleSubmit(onSubmit)().then(() => {
diff --git a/web/components/account/email-password-form.tsx b/web/components/account/email-password-form.tsx
index eb2da3ab007..8420dd2c0a1 100644
--- a/web/components/account/email-password-form.tsx
+++ b/web/components/account/email-password-form.tsx
@@ -91,7 +91,7 @@ export const EmailPasswordForm: React.FC<IEmailPasswordForm> = (props) => {
           <Button
             variant="primary"
             type="submit"
-            className="w-full text-center h-[46px]"
+            className="w-full"
             disabled={!isValid && isDirty}
             loading={isSubmitting}
           >
diff --git a/web/components/account/email-reset-password-form.tsx b/web/components/account/email-reset-password-form.tsx
index 947f045d7f4..850e141c35d 100644
--- a/web/components/account/email-reset-password-form.tsx
+++ b/web/components/account/email-reset-password-form.tsx
@@ -91,10 +91,10 @@ export const EmailResetPasswordForm: React.FC<Props> = (props) => {
         />
       </div>
       <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
-        <Button variant="neutral-primary" onClick={() => setIsResettingPassword(false)}>
+        <Button variant="neutral-primary" className="w-full" onClick={() => setIsResettingPassword(false)}>
           Go Back
         </Button>
-        <Button variant="primary" type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
+        <Button variant="primary" type="submit" className="w-full" loading={isSubmitting}>
           {isSubmitting ? "Sending link..." : "Send reset link"}
         </Button>
       </div>
diff --git a/web/components/account/email-signup-form.tsx b/web/components/account/email-signup-form.tsx
index 21f8844dfc8..76c7e523be3 100644
--- a/web/components/account/email-signup-form.tsx
+++ b/web/components/account/email-signup-form.tsx
@@ -122,7 +122,7 @@ export const EmailSignUpForm: React.FC<Props> = (props) => {
           <Button
             variant="primary"
             type="submit"
-            className="w-full text-center h-[46px]"
+            className="w-full"
             disabled={!isValid && isDirty}
             loading={isSubmitting}
           >
diff --git a/web/components/analytics/custom-analytics/sidebar.tsx b/web/components/analytics/custom-analytics/sidebar.tsx
index 6c6dbb7a5be..e39f726cd62 100644
--- a/web/components/analytics/custom-analytics/sidebar.tsx
+++ b/web/components/analytics/custom-analytics/sidebar.tsx
@@ -338,8 +338,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({ analytics, params, fullScree
         >
           Refresh
         </Button>
-        <Button variant="primary" onClick={exportAnalytics}>
-          <ArrowDownTrayIcon className="h-3.5 w-3.5" />
+        <Button variant="primary" prependIcon={<ArrowDownTrayIcon />} onClick={exportAnalytics}>
           Export as CSV
         </Button>
       </div>
diff --git a/web/components/auth-screens/project/join-project.tsx b/web/components/auth-screens/project/join-project.tsx
index d9a1263662f..7e2c8cebd5a 100644
--- a/web/components/auth-screens/project/join-project.tsx
+++ b/web/components/auth-screens/project/join-project.tsx
@@ -53,8 +53,12 @@ export const JoinProject: React.FC = () => {
         </p>
       </div>
       <div>
-        <Button variant="primary" className="flex items-center gap-1" loading={isJoiningProject} onClick={handleJoin}>
-          <AssignmentClipboardIcon height={16} width={16} color="white" />
+        <Button
+          variant="primary"
+          prependIcon={<AssignmentClipboardIcon color="white" />}
+          loading={isJoiningProject}
+          onClick={handleJoin}
+        >
           {isJoiningProject ? "Joining..." : "Click to join"}
         </Button>
       </div>
diff --git a/web/components/core/filters/date-filter-modal.tsx b/web/components/core/filters/date-filter-modal.tsx
index 561fa881ca0..a94dd809ee1 100644
--- a/web/components/core/filters/date-filter-modal.tsx
+++ b/web/components/core/filters/date-filter-modal.tsx
@@ -127,10 +127,10 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                     </h6>
                   )}
                   <div className="flex justify-end gap-4">
-                    <Button variant="neutral-primary" className="flex items-center gap-2" onClick={handleClose}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
                       Cancel
                     </Button>
-                    <Button variant="primary" type="submit" className="flex items-center gap-2" disabled={isInvalid}>
+                    <Button variant="primary" type="submit" disabled={isInvalid}>
                       Apply
                     </Button>
                   </div>
diff --git a/web/components/core/modals/gpt-assistant-modal.tsx b/web/components/core/modals/gpt-assistant-modal.tsx
index 3da40b5c5d7..c48c72796db 100644
--- a/web/components/core/modals/gpt-assistant-modal.tsx
+++ b/web/components/core/modals/gpt-assistant-modal.tsx
@@ -204,7 +204,7 @@ export const GptAssistantModal: React.FC<Props> = ({
           <Button variant="neutral-primary" onClick={onClose}>
             Close
           </Button>
-          <Button variant="primary" type="button" onClick={handleSubmit(handleResponse)} loading={isSubmitting}>
+          <Button variant="primary" onClick={handleSubmit(handleResponse)} loading={isSubmitting}>
             {isSubmitting ? "Generating response..." : response === "" ? "Generate response" : "Generate again"}
           </Button>
         </div>
diff --git a/web/components/core/modals/image-upload-modal.tsx b/web/components/core/modals/image-upload-modal.tsx
index a83edfb79bd..eb299af3cff 100644
--- a/web/components/core/modals/image-upload-modal.tsx
+++ b/web/components/core/modals/image-upload-modal.tsx
@@ -180,7 +180,7 @@ export const ImageUploadModal: React.FC<Props> = ({
                 </p>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center">
-                    <Button variant="danger" onClick={handleDelete} outline disabled={!value}>
+                    <Button variant="danger" onClick={handleDelete} disabled={!value}>
                       {isRemoving ? "Removing..." : "Remove"}
                     </Button>
                   </div>
diff --git a/web/components/core/views/issues-view.tsx b/web/components/core/views/issues-view.tsx
index 3df93b3b74d..ff3754cc05b 100644
--- a/web/components/core/views/issues-view.tsx
+++ b/web/components/core/views/issues-view.tsx
@@ -500,6 +500,7 @@ export const IssuesView: React.FC<Props> = ({ openIssuesListModal, disableUserAc
             />
             <Button
               variant="primary"
+              prependIcon={!viewId && <PlusIcon />}
               onClick={() => {
                 if (viewId) {
                   setFilters({}, true);
@@ -513,9 +514,7 @@ export const IssuesView: React.FC<Props> = ({ openIssuesListModal, disableUserAc
                     query: filters,
                   });
               }}
-              className="flex items-center gap-2 text-sm"
             >
-              {!viewId && <PlusIcon className="h-4 w-4" />}
               {viewId ? "Update" : "Save"} view
             </Button>
           </div>
diff --git a/web/components/cycles/transfer-issues.tsx b/web/components/cycles/transfer-issues.tsx
index 2a849347ec6..a604bc7e697 100644
--- a/web/components/cycles/transfer-issues.tsx
+++ b/web/components/cycles/transfer-issues.tsx
@@ -40,9 +40,8 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
 
       {transferableIssuesCount > 0 && (
         <div>
-          <Button variant="primary" 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>
+          <Button variant="primary" prependIcon={<TransferIcon color="white" />} onClick={handleClick}>
+            Transfer Issues
           </Button>
         </div>
       )}
diff --git a/web/components/exporter/guide.tsx b/web/components/exporter/guide.tsx
index 2b13c3a9bae..e5f0278006d 100644
--- a/web/components/exporter/guide.tsx
+++ b/web/components/exporter/guide.tsx
@@ -66,9 +66,7 @@ const IntegrationGuide = () => {
                   <div className="flex-shrink-0">
                     <Link href={`/${workspaceSlug}/settings/exports?provider=${service.provider}`}>
                       <a>
-                        <Button variant="primary">
-                          <span className="capitalize">{service.type}</span>
-                        </Button>
+                        <Button variant="primary">{service.type}</Button>
                       </a>
                     </Link>
                   </div>
diff --git a/web/components/exporter/single-export.tsx b/web/components/exporter/single-export.tsx
index 8abde68c2db..2eea9887579 100644
--- a/web/components/exporter/single-export.tsx
+++ b/web/components/exporter/single-export.tsx
@@ -58,7 +58,7 @@ export const SingleExport: React.FC<Props> = ({ service, refreshing }) => {
           {service.status == "completed" && (
             <div>
               <a target="_blank" href={service?.url} rel="noopener noreferrer">
-                <Button variant="primary" className="w-full text-center">
+                <Button variant="primary" className="w-full">
                   {isLoading ? "Downloading..." : "Download"}
                 </Button>
               </a>
diff --git a/web/components/inbox/inbox-action-headers.tsx b/web/components/inbox/inbox-action-headers.tsx
index 42450768bfc..ea397a35a89 100644
--- a/web/components/inbox/inbox-action-headers.tsx
+++ b/web/components/inbox/inbox-action-headers.tsx
@@ -219,7 +219,6 @@ export const InboxActionHeader = () => {
                           />
                           <Button
                             variant="primary"
-                            className="ml-auto"
                             onClick={() => {
                               close();
                               markInboxStatus({
diff --git a/web/components/integration/guide.tsx b/web/components/integration/guide.tsx
index 8f1bb7fd6a1..c428beb2a7f 100644
--- a/web/components/integration/guide.tsx
+++ b/web/components/integration/guide.tsx
@@ -91,9 +91,7 @@ const IntegrationGuide = () => {
                 <div className="flex-shrink-0">
                   <Link href={`/${workspaceSlug}/settings/imports?provider=${service.provider}`}>
                     <a>
-                      <Button variant="primary">
-                        <span className="capitalize">{service.type}</span>
-                      </Button>
+                      <Button variant="primary">{service.type}</Button>
                     </a>
                   </Link>
                 </div>
diff --git a/web/components/integration/single-integration-card.tsx b/web/components/integration/single-integration-card.tsx
index 7780edd1796..798b8d2b131 100644
--- a/web/components/integration/single-integration-card.tsx
+++ b/web/components/integration/single-integration-card.tsx
@@ -114,7 +114,7 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
 
       {workspaceIntegrations ? (
         isInstalled ? (
-          <Button variant="danger" onClick={handleRemoveIntegration} loading={deletingIntegration} outline>
+          <Button variant="danger" onClick={handleRemoveIntegration} loading={deletingIntegration}>
             {deletingIntegration ? "Uninstalling..." : "Uninstall"}
           </Button>
         ) : (
diff --git a/web/components/issues/workspace-views/workpace-view-issues.tsx b/web/components/issues/workspace-views/workpace-view-issues.tsx
index 664d52e5fb1..c9e8ba30e97 100644
--- a/web/components/issues/workspace-views/workpace-view-issues.tsx
+++ b/web/components/issues/workspace-views/workpace-view-issues.tsx
@@ -190,6 +190,7 @@ export const WorkspaceViewIssues = () => {
                     />
                     <Button
                       variant="primary"
+                      prependIcon={!globalViewId && <PlusIcon className="h-4 w-4" />}
                       onClick={() => {
                         if (globalViewId) {
                           handleFilters("filters", filters.filters, true);
@@ -203,9 +204,7 @@ export const WorkspaceViewIssues = () => {
                             query: filters.filters,
                           });
                       }}
-                      className="flex items-center gap-2 text-sm"
                     >
-                      {!globalViewId && <PlusIcon className="h-4 w-4" />}
                       {globalViewId ? "Update" : "Save"} view
                     </Button>
                   </div>
diff --git a/web/components/issues/workspace-views/workspace-all-issue.tsx b/web/components/issues/workspace-views/workspace-all-issue.tsx
index 3eccae26ef1..aa5be95c468 100644
--- a/web/components/issues/workspace-views/workspace-all-issue.tsx
+++ b/web/components/issues/workspace-views/workspace-all-issue.tsx
@@ -199,6 +199,7 @@ export const WorkspaceAllIssue = () => {
                   />
                   <Button
                     variant="primary"
+                    prependIcon={!globalViewId && <PlusIcon className="h-4 w-4" />}
                     onClick={() => {
                       if (globalViewId) handleFilters("filters", filters.filters, true);
                       else
@@ -208,7 +209,6 @@ export const WorkspaceAllIssue = () => {
                     }}
                     className="flex items-center gap-2 text-sm"
                   >
-                    {!globalViewId && <PlusIcon className="h-4 w-4" />}
                     {globalViewId ? "Update" : "Save"} view
                   </Button>
                 </div>
diff --git a/web/components/project/publish-project/modal.tsx b/web/components/project/publish-project/modal.tsx
index 74f9a1131e9..088e83f9b60 100644
--- a/web/components/project/publish-project/modal.tsx
+++ b/web/components/project/publish-project/modal.tsx
@@ -310,7 +310,6 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                       <Button
                         variant="danger"
                         onClick={() => handleUnpublishProject(watch("id") ?? "")}
-                        className="!px-2 !py-1.5"
                         loading={isUnpublishing}
                       >
                         {isUnpublishing ? "Unpublishing..." : "Unpublish"}
diff --git a/web/components/ui/empty-state.tsx b/web/components/ui/empty-state.tsx
index 4b70b5ee42f..146d4bf85b3 100644
--- a/web/components/ui/empty-state.tsx
+++ b/web/components/ui/empty-state.tsx
@@ -37,11 +37,10 @@ export const EmptyState: React.FC<Props> = ({
         {primaryButton && (
           <Button
             variant="primary"
-            className="flex items-center gap-1.5"
+            prependIcon={primaryButton.icon}
             onClick={primaryButton.onClick}
             disabled={disabled}
           >
-            {primaryButton.icon}
             {primaryButton.text}
           </Button>
         )}
diff --git a/web/components/web-view/add-comment.tsx b/web/components/web-view/add-comment.tsx
index 3ed76d515a6..7111a128178 100644
--- a/web/components/web-view/add-comment.tsx
+++ b/web/components/web-view/add-comment.tsx
@@ -121,12 +121,7 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
       </div>
 
       <div className="inline">
-        <Button
-          variant="primary"
-          type="submit"
-          disabled={isSubmitting || disabled}
-          className="mt-2 w-10 h-10 flex items-center justify-center"
-        >
+        <Button variant="primary" type="submit" disabled={isSubmitting || disabled}>
           <Send className="w-4 h-4" />
         </Button>
       </div>
diff --git a/web/components/web-view/create-update-link-form.tsx b/web/components/web-view/create-update-link-form.tsx
index 1b378974806..fb356758d45 100644
--- a/web/components/web-view/create-update-link-form.tsx
+++ b/web/components/web-view/create-update-link-form.tsx
@@ -177,12 +177,7 @@ export const CreateUpdateLinkForm: React.FC<Props> = (props) => {
         </div>
       </div>
       <div className="mt-5 flex justify-end gap-2">
-        <Button
-          variant="primary"
-          type="submit"
-          loading={isSubmitting}
-          className="w-full !py-2 text-custom-text-300 !text-base flex items-center justify-center"
-        >
+        <Button variant="primary" type="submit" loading={isSubmitting}>
           {data ? (isSubmitting ? "Updating Link..." : "Update Link") : isSubmitting ? "Adding Link..." : "Add Link"}
         </Button>
       </div>
diff --git a/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx b/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
index f182ea8737e..c3c9d588e25 100644
--- a/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
+++ b/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
@@ -91,8 +91,8 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
             actionButton={
               <Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
                 <a>
-                  <Button variant="primary" className="flex items-center gap-1">
-                    <LayerDiagonalIcon height={16} width={16} color="white" /> Go to issues
+                  <Button variant="primary" prependIcon={<LayerDiagonalIcon color="white" />}>
+                    Go to issues
                   </Button>
                 </a>
               </Link>
diff --git a/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx b/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
index 04aa33ad3c2..6dfdf313141 100644
--- a/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
+++ b/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
@@ -90,8 +90,8 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
               actionButton={
                 <Link href={`/${workspaceSlug}`}>
                   <a>
-                    <Button variant="primary" className="flex items-center gap-1">
-                      <LayerDiagonalIcon height={16} width={16} color="white" /> Go to workspace
+                    <Button variant="primary" prependIcon={<LayerDiagonalIcon color="white" />}>
+                      Go to workspace
                     </Button>
                   </a>
                 </Link>
diff --git a/web/pages/[workspaceSlug]/me/my-issues.tsx b/web/pages/[workspaceSlug]/me/my-issues.tsx
index f861c467f7d..697e739e54b 100644
--- a/web/pages/[workspaceSlug]/me/my-issues.tsx
+++ b/web/pages/[workspaceSlug]/me/my-issues.tsx
@@ -87,13 +87,12 @@ const MyIssuesPage: NextPage = () => {
           <MyIssuesViewOptions />
           <Button
             variant="primary"
-            className="flex items-center gap-2"
+            prependIcon={<PlusIcon />}
             onClick={() => {
               const e = new KeyboardEvent("keydown", { key: "c" });
               document.dispatchEvent(e);
             }}
           >
-            <PlusIcon className="h-4 w-4" />
             Add Issue
           </Button>
         </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 6135bda429d..7f9005be09a 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -84,13 +84,12 @@ const ProjectCyclesPage: NextPage = observer(() => {
       right={
         <Button
           variant="primary"
-          className="flex items-center gap-2"
+          prependIcon={<PlusIcon />}
           onClick={() => {
             const e = new KeyboardEvent("keydown", { key: "q" });
             document.dispatchEvent(e);
           }}
         >
-          <PlusIcon className="h-4 w-4" />
           Add Cycle
         </Button>
       }
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
index 0543f368b97..efbc960c8df 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
@@ -37,13 +37,12 @@ const ProjectInbox: NextPage = () => {
           <div className="flex items-center gap-2">
             <Button
               variant="primary"
-              className="flex items-center gap-2"
+              prependIcon={<PlusIcon />}
               onClick={() => {
                 const e = new KeyboardEvent("keydown", { key: "c" });
                 document.dispatchEvent(e);
               }}
             >
-              <PlusIcon className="h-4 w-4" />
               Add Issue
             </Button>
           </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index 9b69ce23270..aeb8659db3f 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -104,13 +104,12 @@ const ProjectModules: NextPage = () => {
           ))}
           <Button
             variant="primary"
-            className="flex items-center gap-2"
+            prependIcon={<PlusIcon />}
             onClick={() => {
               const e = new KeyboardEvent("keydown", { key: "m" });
               document.dispatchEvent(e);
             }}
           >
-            <PlusIcon className="h-4 w-4" />
             Add Module
           </Button>
         </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index f6736a56b95..1ebf7d5a027 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -101,13 +101,12 @@ const ProjectPages: NextPage = () => {
         right={
           <Button
             variant="primary"
-            className="flex items-center gap-2"
+            prependIcon={<PlusIcon />}
             onClick={() => {
               const e = new KeyboardEvent("keydown", { key: "d" });
               document.dispatchEvent(e);
             }}
           >
-            <PlusIcon className="h-4 w-4" />
             Create Page
           </Button>
         }
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index 8b96c150098..9c67e28b5da 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -129,12 +129,7 @@ const GeneralSettings: NextPage = observer(() => {
                         <div>
                           {projectDetails ? (
                             <div>
-                              <Button
-                                variant="danger"
-                                onClick={() => setSelectedProject(projectDetails.id ?? null)}
-                                className="!text-sm"
-                                outline
-                              >
+                              <Button variant="danger" onClick={() => setSelectedProject(projectDetails.id ?? null)}>
                                 Delete my project
                               </Button>
                             </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index f971f60da80..c49d5de0092 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -118,7 +118,7 @@ const LabelsSettings: NextPage = () => {
             <div className="flex items-center justify-between pt-2 pb-3.5 border-b border-custom-border-200">
               <h3 className="text-xl font-medium">Labels</h3>
 
-              <Button variant="primary" onClick={newLabel} size="sm" className="flex items-center justify-center">
+              <Button variant="primary" onClick={newLabel} size="sm">
                 Add label
               </Button>
             </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
index 67d4ff2f091..a1ce938ad88 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
@@ -84,13 +84,12 @@ const SingleView: React.FC = () => {
             <IssuesFilterView />
             <Button
               variant="primary"
-              className="flex items-center gap-2"
+              prependIcon={<PlusIcon />}
               onClick={() => {
                 const e = new KeyboardEvent("keydown", { key: "c" });
                 document.dispatchEvent(e);
               }}
             >
-              <PlusIcon className="h-4 w-4" />
               Add Issue
             </Button>
           </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
index 393cbb0e511..14661269d3e 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -71,14 +71,12 @@ const ProjectViews: NextPage = () => {
         <div className="flex items-center gap-2">
           <Button
             variant="primary"
-            type="button"
-            className="flex items-center gap-2"
+            prependIcon={<PlusIcon />}
             onClick={() => {
               const e = new KeyboardEvent("keydown", { key: "v" });
               document.dispatchEvent(e);
             }}
           >
-            <PlusIcon className="h-4 w-4" />
             Create View
           </Button>
         </div>
diff --git a/web/pages/[workspaceSlug]/projects/index.tsx b/web/pages/[workspaceSlug]/projects/index.tsx
index 26641efe310..7af8d852214 100644
--- a/web/pages/[workspaceSlug]/projects/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/index.tsx
@@ -56,13 +56,12 @@ const ProjectsPage: NextPage = () => {
 
           <Button
             variant="primary"
-            className="flex items-center gap-2 flex-shrink-0"
+            prependIcon={<PlusIcon />}
             onClick={() => {
               const e = new KeyboardEvent("keydown", { key: "p" });
               document.dispatchEvent(e);
             }}
           >
-            <PlusIcon className="h-4 w-4" />
             Add Project
           </Button>
         </div>
diff --git a/web/pages/[workspaceSlug]/settings/index.tsx b/web/pages/[workspaceSlug]/settings/index.tsx
index ee29e3ff854..84c6b86fbee 100644
--- a/web/pages/[workspaceSlug]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/index.tsx
@@ -345,7 +345,7 @@ const WorkspaceSettings: NextPage = () => {
                             that workspace will be permanently removed and cannot be recovered.
                           </span>
                           <div>
-                            <Button variant="danger" onClick={() => setIsOpen(true)} className="!text-sm" outline>
+                            <Button variant="danger" onClick={() => setIsOpen(true)}>
                               Delete my workspace
                             </Button>
                           </div>
diff --git a/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx b/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
index 5ce4d0789e3..3175d609eb6 100644
--- a/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
@@ -22,13 +22,12 @@ const WorkspaceViewAllIssue = () => (
 
         <Button
           variant="primary"
-          className="flex items-center gap-2"
+          prependIcon={<PlusIcon />}
           onClick={() => {
             const e = new KeyboardEvent("keydown", { key: "c" });
             document.dispatchEvent(e);
           }}
         >
-          <PlusIcon className="h-4 w-4" />
           Add Issue
         </Button>
       </div>
diff --git a/web/pages/[workspaceSlug]/workspace-views/assigned.tsx b/web/pages/[workspaceSlug]/workspace-views/assigned.tsx
index 602ce0de482..05bbdde0547 100644
--- a/web/pages/[workspaceSlug]/workspace-views/assigned.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/assigned.tsx
@@ -22,13 +22,12 @@ const WorkspaceViewAssignedIssue: React.FC = () => (
         <WorkspaceIssuesViewOptions />
         <Button
           variant="primary"
-          className="flex items-center gap-2"
+          prependIcon={<PlusIcon />}
           onClick={() => {
             const e = new KeyboardEvent("keydown", { key: "c" });
             document.dispatchEvent(e);
           }}
         >
-          <PlusIcon className="h-4 w-4" />
           Add Issue
         </Button>
       </div>
diff --git a/web/pages/[workspaceSlug]/workspace-views/created.tsx b/web/pages/[workspaceSlug]/workspace-views/created.tsx
index 327cecc4353..e276e9dd9b4 100644
--- a/web/pages/[workspaceSlug]/workspace-views/created.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/created.tsx
@@ -22,13 +22,12 @@ const WorkspaceViewCreatedIssue: React.FC = () => (
         <WorkspaceIssuesViewOptions />
         <Button
           variant="primary"
-          className="flex items-center gap-2"
+          prependIcon={<PlusIcon />}
           onClick={() => {
             const e = new KeyboardEvent("keydown", { key: "c" });
             document.dispatchEvent(e);
           }}
         >
-          <PlusIcon className="h-4 w-4" />
           Add Issue
         </Button>
       </div>
diff --git a/web/pages/[workspaceSlug]/workspace-views/index.tsx b/web/pages/[workspaceSlug]/workspace-views/index.tsx
index 5259dd7259b..b8390ca0c98 100644
--- a/web/pages/[workspaceSlug]/workspace-views/index.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/index.tsx
@@ -103,8 +103,7 @@ const WorkspaceViews: NextPage = () => {
         <div className="flex items-center gap-2">
           <WorkspaceIssuesViewOptions />
 
-          <Button variant="primary" className="flex items-center gap-2" onClick={() => setCreateUpdateViewModal(true)}>
-            <PlusIcon className="h-4 w-4" />
+          <Button variant="primary" prependIcon={<PlusIcon />} onClick={() => setCreateUpdateViewModal(true)}>
             New View
           </Button>
         </div>
diff --git a/web/pages/[workspaceSlug]/workspace-views/issues.tsx b/web/pages/[workspaceSlug]/workspace-views/issues.tsx
index 571da80f13c..fa818602621 100644
--- a/web/pages/[workspaceSlug]/workspace-views/issues.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/issues.tsx
@@ -22,13 +22,12 @@ const WorkspaceView = () => (
         <WorkspaceIssuesViewOptions />
         <Button
           variant="primary"
-          className="flex items-center gap-2"
+          prependIcon={<PlusIcon />}
           onClick={() => {
             const e = new KeyboardEvent("keydown", { key: "c" });
             document.dispatchEvent(e);
           }}
         >
-          <PlusIcon className="h-4 w-4" />
           Add Issue
         </Button>
       </div>
diff --git a/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx b/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
index 47dc39ff110..45da026d4f8 100644
--- a/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
@@ -22,13 +22,12 @@ const WorkspaceViewSubscribedIssue: React.FC = () => (
         <WorkspaceIssuesViewOptions />
         <Button
           variant="primary"
-          className="flex items-center gap-2"
+          prependIcon={<PlusIcon />}
           onClick={() => {
             const e = new KeyboardEvent("keydown", { key: "c" });
             document.dispatchEvent(e);
           }}
         >
-          <PlusIcon className="h-4 w-4" />
           Add Issue
         </Button>
       </div>
diff --git a/web/pages/accounts/reset-password.tsx b/web/pages/accounts/reset-password.tsx
index 34a2ce9def3..977a21a7ee6 100644
--- a/web/pages/accounts/reset-password.tsx
+++ b/web/pages/accounts/reset-password.tsx
@@ -157,7 +157,7 @@ const ResetPasswordPage: NextPage = () => {
                 )}
               />
             </div>
-            <Button variant="primary" type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
+            <Button variant="primary" type="submit" className="w-full" loading={isSubmitting}>
               {isSubmitting ? "Resetting..." : "Reset"}
             </Button>
           </form>

From 5859775311ea4b0cff6d88e10e58136afb058f71 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 11 Oct 2023 02:25:19 +0530
Subject: [PATCH 08/15] chore: swap loader component with plane/ui package

---
 packages/ui/dist/index.d.ts                   |  18 ++-
 packages/ui/dist/index.js                     |  15 +++
 packages/ui/dist/index.mjs                    |  14 +++
 packages/ui/src/index.tsx                     |   1 +
 packages/ui/src/loader.tsx                    |  30 +++++
 .../custom-analytics/custom-analytics.tsx     |   3 +-
 .../scope-and-demand/scope-and-demand.tsx     |   3 +-
 web/components/command-palette/command-k.tsx  |   3 +-
 web/components/core/image-picker-popover.tsx  |   3 +-
 .../modals/existing-issues-list-modal.tsx     |   4 +-
 .../cycles/active-cycle-details.tsx           | 104 +++++-------------
 web/components/cycles/cycles-list.tsx         |   2 +-
 web/components/cycles/cycles-view-legacy.tsx  |   2 +-
 web/components/cycles/cycles-view.tsx         |   2 +-
 web/components/cycles/sidebar.tsx             |   3 +-
 web/components/exporter/guide.tsx             |   4 +-
 web/components/gantt-chart/sidebar.tsx        |  15 +--
 web/components/inbox/inbox-main-content.tsx   |  42 ++-----
 web/components/inbox/issues-list-sidebar.tsx  |  11 +-
 .../integration/github/repo-details.tsx       |   3 +-
 web/components/integration/guide.tsx          |   3 +-
 .../integration/single-integration-card.tsx   |   3 +-
 .../integration/slack/select-channel.tsx      |   2 +-
 web/components/issues/activity.tsx            |  27 ++---
 .../filters/header/filters/assignee.tsx       |   3 +-
 .../filters/header/filters/created-by.tsx     |   3 +-
 .../filters/header/filters/labels.tsx         |   2 +-
 .../filters/header/filters/state.tsx          |   2 +-
 .../issues/parent-issues-list-modal.tsx       |  34 ++----
 .../peek-overview/full-screen-peek-view.tsx   |   8 +-
 .../issues/peek-overview/side-peek-view.tsx   |  10 +-
 web/components/modules/sidebar.tsx            |  75 +++----------
 .../notifications/notification-popover.tsx    |  15 +--
 .../pages/pages-list/recent-pages-list.tsx    |   3 +-
 web/components/pages/pages-view.tsx           |   3 +-
 web/components/profile/overview/activity.tsx  |  11 +-
 .../overview/priority-distribution.tsx        |   3 +-
 web/components/profile/overview/stats.tsx     |   3 +-
 web/components/profile/sidebar.tsx            |  35 ++----
 web/components/project/card-list.tsx          |   3 +-
 web/components/project/form-loader.tsx        |   2 +-
 .../project/publish-project/modal.tsx         |   4 +-
 web/components/ui/multi-level-dropdown.tsx    |  14 +--
 web/components/ui/product-updates-modal.tsx   |   8 +-
 web/components/workspace/issues-list.tsx      |  20 +---
 web/components/workspace/issues-stats.tsx     |   8 +-
 web/components/workspace/sidebar-dropdown.tsx |  29 +++--
 .../[workspaceSlug]/me/profile/activity.tsx   |   3 +-
 .../archived-issues/[archivedIssueId].tsx     |   3 +-
 .../projects/[projectId]/issues/[issueId].tsx |   3 +-
 .../projects/[projectId]/modules/index.tsx    |   4 +-
 .../projects/[projectId]/pages/[pageId].tsx   |   4 +-
 .../[projectId]/settings/estimates.tsx        |   4 +-
 .../projects/[projectId]/settings/index.tsx   |   4 +-
 .../[projectId]/settings/integrations.tsx     |   3 +-
 .../projects/[projectId]/settings/labels.tsx  |   4 +-
 .../projects/[projectId]/settings/members.tsx |   4 +-
 .../projects/[projectId]/settings/states.tsx  |   2 +-
 .../projects/[projectId]/views/index.tsx      |   4 +-
 .../[workspaceSlug]/settings/integrations.tsx |   3 +-
 .../[workspaceSlug]/settings/members.tsx      |   4 +-
 .../[workspaceSlug]/workspace-views/index.tsx |   4 +-
 62 files changed, 272 insertions(+), 396 deletions(-)
 create mode 100644 packages/ui/src/loader.tsx

diff --git a/packages/ui/dist/index.d.ts b/packages/ui/dist/index.d.ts
index 4413cd58797..3664cacd4cc 100644
--- a/packages/ui/dist/index.d.ts
+++ b/packages/ui/dist/index.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC } from 'react';
+import React__default, { FC } from 'react';
 
 declare type TButtonVariant = "primary" | "accent-primary" | "outline-primary" | "neutral-primary" | "link-primary" | "danger" | "accent-danger" | "outline-danger" | "link-danger" | "tertiary-danger";
 
@@ -37,4 +37,18 @@ declare const RadialProgressBar: FC<IRadialProgressBar>;
 
 declare const Spinner: React.FC;
 
-export { Button, ButtonProps, Input, InputProps, RadialProgressBar, Spinner, TextArea, TextAreaProps };
+declare type Props = {
+    children: React__default.ReactNode;
+    className?: string;
+};
+declare const Loader: {
+    ({ children, className }: Props): JSX.Element;
+    Item: React__default.FC<ItemProps>;
+    displayName: string;
+};
+declare type ItemProps = {
+    height?: string;
+    width?: string;
+};
+
+export { Button, ButtonProps, Input, InputProps, Loader, RadialProgressBar, Spinner, TextArea, TextAreaProps };
diff --git a/packages/ui/dist/index.js b/packages/ui/dist/index.js
index ddf2336f309..f85a5360a8f 100644
--- a/packages/ui/dist/index.js
+++ b/packages/ui/dist/index.js
@@ -28,6 +28,7 @@ var src_exports = {};
 __export(src_exports, {
   Button: () => Button,
   Input: () => Input,
+  Loader: () => Loader,
   RadialProgressBar: () => RadialProgressBar,
   Spinner: () => Spinner,
   TextArea: () => TextArea
@@ -275,10 +276,24 @@ var Spinner = () => /* @__PURE__ */ React5.createElement("div", {
 })), /* @__PURE__ */ React5.createElement("span", {
   className: "sr-only"
 }, "Loading..."));
+
+// src/loader.tsx
+var import_react2 = __toESM(require("react"));
+var Loader = ({ children, className = "" }) => /* @__PURE__ */ import_react2.default.createElement("div", {
+  className: `${className} animate-pulse`,
+  role: "status"
+}, children);
+var Item = ({ height = "auto", width = "auto" }) => /* @__PURE__ */ import_react2.default.createElement("div", {
+  className: "rounded-md bg-custom-background-80",
+  style: { height, width }
+});
+Loader.Item = Item;
+Loader.displayName = "plane-ui-loader";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
   Input,
+  Loader,
   RadialProgressBar,
   Spinner,
   TextArea
diff --git a/packages/ui/dist/index.mjs b/packages/ui/dist/index.mjs
index 3503eb8040f..4c2215e8b66 100644
--- a/packages/ui/dist/index.mjs
+++ b/packages/ui/dist/index.mjs
@@ -239,9 +239,23 @@ var Spinner = () => /* @__PURE__ */ React5.createElement("div", {
 })), /* @__PURE__ */ React5.createElement("span", {
   className: "sr-only"
 }, "Loading..."));
+
+// src/loader.tsx
+import React6 from "react";
+var Loader = ({ children, className = "" }) => /* @__PURE__ */ React6.createElement("div", {
+  className: `${className} animate-pulse`,
+  role: "status"
+}, children);
+var Item = ({ height = "auto", width = "auto" }) => /* @__PURE__ */ React6.createElement("div", {
+  className: "rounded-md bg-custom-background-80",
+  style: { height, width }
+});
+Loader.Item = Item;
+Loader.displayName = "plane-ui-loader";
 export {
   Button,
   Input,
+  Loader,
   RadialProgressBar,
   Spinner,
   TextArea
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 6c5ec5538d2..2ef42f7b180 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -2,3 +2,4 @@ export * from "./buttons/button";
 export * from "./form-fields";
 export * from "./progress";
 export * from "./spinners";
+export * from "./loader";
diff --git a/packages/ui/src/loader.tsx b/packages/ui/src/loader.tsx
new file mode 100644
index 00000000000..cd12bc22f57
--- /dev/null
+++ b/packages/ui/src/loader.tsx
@@ -0,0 +1,30 @@
+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-custom-background-80"
+    style={{ height: height, width: width }}
+  />
+);
+
+Loader.Item = Item;
+
+Loader.displayName = "plane-ui-loader";
+
+export { Loader };
diff --git a/web/components/analytics/custom-analytics/custom-analytics.tsx b/web/components/analytics/custom-analytics/custom-analytics.tsx
index a0fdf42cce9..c07e6b9eedd 100644
--- a/web/components/analytics/custom-analytics/custom-analytics.tsx
+++ b/web/components/analytics/custom-analytics/custom-analytics.tsx
@@ -7,10 +7,9 @@ import { Control, UseFormSetValue } from "react-hook-form";
 // hooks
 import useProjects from "hooks/use-projects";
 // components
-import { Button } from "@plane/ui";
 import { AnalyticsGraph, AnalyticsSelectBar, AnalyticsSidebar, AnalyticsTable } from "components/analytics";
 // ui
-import { Loader } from "components/ui";
+import { Button, Loader } from "@plane/ui";
 // helpers
 import { convertResponseToBarGraphData } from "helpers/analytics.helper";
 // types
diff --git a/web/components/analytics/scope-and-demand/scope-and-demand.tsx b/web/components/analytics/scope-and-demand/scope-and-demand.tsx
index 41915d805c2..aef15880f9d 100644
--- a/web/components/analytics/scope-and-demand/scope-and-demand.tsx
+++ b/web/components/analytics/scope-and-demand/scope-and-demand.tsx
@@ -5,10 +5,9 @@ import useSWR from "swr";
 // services
 import analyticsService from "services/analytics.service";
 // components
-import { Button } from "@plane/ui";
 import { AnalyticsDemand, AnalyticsLeaderboard, AnalyticsScope, AnalyticsYearWiseIssues } from "components/analytics";
 // ui
-import { Loader } from "components/ui";
+import { Button, Loader } from "@plane/ui";
 // fetch-keys
 import { DEFAULT_ANALYTICS } from "constants/fetch-keys";
 
diff --git a/web/components/command-palette/command-k.tsx b/web/components/command-palette/command-k.tsx
index d51d269cd09..53cdca7d78c 100644
--- a/web/components/command-palette/command-k.tsx
+++ b/web/components/command-palette/command-k.tsx
@@ -26,7 +26,8 @@ import {
   commandGroups,
 } from "components/command-palette";
 // ui
-import { Icon, Loader, ToggleSwitch, Tooltip } from "components/ui";
+import { Icon, ToggleSwitch, Tooltip } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
 import { DiscordIcon, GithubIcon, SettingIcon } from "components/icons";
 import { InboxIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx
index 6f69e244e96..7ab0ec6bfbc 100644
--- a/web/components/core/image-picker-popover.tsx
+++ b/web/components/core/image-picker-popover.tsx
@@ -13,8 +13,7 @@ import fileService from "services/file.service";
 import useWorkspaceDetails from "hooks/use-workspace-details";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
-import { Loader } from "components/ui";
-import { Button, Input } from "@plane/ui";
+import { Button, Input, Loader } from "@plane/ui";
 
 const tabOptions = [
   {
diff --git a/web/components/core/modals/existing-issues-list-modal.tsx b/web/components/core/modals/existing-issues-list-modal.tsx
index f6644e84e9b..5b9a6c3c369 100644
--- a/web/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/components/core/modals/existing-issues-list-modal.tsx
@@ -13,8 +13,8 @@ import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
 import useDebounce from "hooks/use-debounce";
 // ui
-import { Button } from "@plane/ui";
-import { Loader, ToggleSwitch, Tooltip } from "components/ui";
+import { Button, Loader } from "@plane/ui";
+import { ToggleSwitch, Tooltip } from "components/ui";
 // icons
 import { LaunchOutlined } from "@mui/icons-material";
 import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
diff --git a/web/components/cycles/active-cycle-details.tsx b/web/components/cycles/active-cycle-details.tsx
index 7816f0edba1..76391984682 100644
--- a/web/components/cycles/active-cycle-details.tsx
+++ b/web/components/cycles/active-cycle-details.tsx
@@ -10,9 +10,10 @@ import cyclesService from "services/cycles.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { LinearProgressIndicator, Loader, Tooltip } from "components/ui";
+import { LinearProgressIndicator, Tooltip } from "components/ui";
 import { AssigneesList } from "components/ui/avatar";
 import { SingleProgressStats } from "components/core";
+import { Loader } from "@plane/ui";
 // components
 import ProgressChart from "components/core/sidebar/progress-chart";
 import { ActiveCycleProgressStats } from "components/cycles";
@@ -34,11 +35,7 @@ import { StarIcon } from "@heroicons/react/24/outline";
 // components
 import { ViewIssueLabel } from "components/issues";
 // helpers
-import {
-  getDateRangeStatus,
-  renderShortDateWithYearFormat,
-  findHowManyDaysLeft,
-} from "helpers/date-time.helper";
+import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { truncateText } from "helpers/string.helper";
 // types
 import { ICycle, IIssue } from "types";
@@ -82,24 +79,18 @@ export const ActiveCycleDetails: React.FC = () => {
   const { data: currentCycle } = useSWR(
     workspaceSlug && projectId ? CURRENT_CYCLE_LIST(projectId as string) : null,
     workspaceSlug && projectId
-      ? () =>
-          cyclesService.getCyclesWithParams(workspaceSlug as string, projectId as string, "current")
+      ? () => cyclesService.getCyclesWithParams(workspaceSlug as string, projectId as string, "current")
       : null
   );
   const cycle = currentCycle ? currentCycle[0] : null;
 
   const { data: issues } = useSWR(
-    workspaceSlug && projectId && cycle?.id
-      ? CYCLE_ISSUES_WITH_PARAMS(cycle?.id, { priority: "urgent,high" })
-      : null,
+    workspaceSlug && projectId && cycle?.id ? CYCLE_ISSUES_WITH_PARAMS(cycle?.id, { priority: "urgent,high" }) : null,
     workspaceSlug && projectId && cycle?.id
       ? () =>
-          cyclesService.getCycleIssuesWithParams(
-            workspaceSlug as string,
-            projectId as string,
-            cycle.id,
-            { priority: "urgent,high" }
-          )
+          cyclesService.getCycleIssuesWithParams(workspaceSlug as string, projectId as string, cycle.id, {
+            priority: "urgent,high",
+          })
       : null
   ) as { data: IIssue[] | undefined };
 
@@ -115,20 +106,8 @@ export const ActiveCycleDetails: React.FC = () => {
       <div className="h-full grid place-items-center text-center">
         <div className="space-y-2">
           <div className="mx-auto flex justify-center">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="66"
-              height="66"
-              viewBox="0 0 66 66"
-              fill="none"
-            >
-              <circle
-                cx="34.375"
-                cy="34.375"
-                r="22"
-                stroke="rgb(var(--color-text-400))"
-                strokeLinecap="round"
-              />
+            <svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66" fill="none">
+              <circle cx="34.375" cy="34.375" r="22" stroke="rgb(var(--color-text-400))" strokeLinecap="round" />
               <path
                 d="M36.4375 20.9919C36.4375 19.2528 37.6796 17.8127 39.1709 18.1419C40.125 18.3526 41.0604 18.6735 41.9625 19.1014C43.7141 19.9322 45.3057 21.1499 46.6464 22.685C47.987 24.2202 49.0505 26.0426 49.776 28.0484C50.5016 30.0541 50.875 32.2038 50.875 34.3748C50.875 36.5458 50.5016 38.6956 49.776 40.7013C49.0505 42.7071 47.987 44.5295 46.6464 46.0647C45.3057 47.5998 43.7141 48.8175 41.9625 49.6483C41.0604 50.0762 40.125 50.3971 39.1709 50.6077C37.6796 50.937 36.4375 49.4969 36.4375 47.7578L36.4375 20.9919Z"
                 fill="rgb(var(--color-text-400))"
@@ -224,24 +203,19 @@ export const ActiveCycleDetails: React.FC = () => {
       false
     );
 
-    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.",
-        });
+    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 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,
+    value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
     color: group.color,
   }));
 
@@ -270,9 +244,7 @@ export const ActiveCycleDetails: React.FC = () => {
                     />
                   </span>
                   <Tooltip tooltipContent={cycle.name} position="top-left">
-                    <h3 className="break-words text-lg font-semibold">
-                      {truncateText(cycle.name, 70)}
-                    </h3>
+                    <h3 className="break-words text-lg font-semibold">{truncateText(cycle.name, 70)}</h3>
                   </Tooltip>
                 </span>
                 <span className="flex items-center gap-1 capitalize">
@@ -304,9 +276,7 @@ export const ActiveCycleDetails: React.FC = () => {
                       <span className="flex gap-1 whitespace-nowrap">
                         {cycle.total_issues - cycle.completed_issues > 0 && (
                           <Tooltip
-                            tooltipContent={`${
-                              cycle.total_issues - cycle.completed_issues
-                            } more pending ${
+                            tooltipContent={`${cycle.total_issues - cycle.completed_issues} more pending ${
                               cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
                             }`}
                           >
@@ -443,9 +413,7 @@ export const ActiveCycleDetails: React.FC = () => {
                   issues.map((issue) => (
                     <div
                       key={issue.id}
-                      onClick={() =>
-                        router.push(`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`)
-                      }
+                      onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`)}
                       className="flex flex-wrap cursor-pointer rounded-md items-center justify-between gap-2 border border-custom-border-200 bg-custom-background-90 px-3 py-1.5"
                     >
                       <div className="flex flex-col gap-1">
@@ -459,14 +427,8 @@ export const ActiveCycleDetails: React.FC = () => {
                             </span>
                           </Tooltip>
                         </div>
-                        <Tooltip
-                          position="top-left"
-                          tooltipHeading="Title"
-                          tooltipContent={issue.name}
-                        >
-                          <span className="text-[0.825rem] text-custom-text-100">
-                            {truncateText(issue.name, 30)}
-                          </span>
+                        <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
+                          <span className="text-[0.825rem] text-custom-text-100">{truncateText(issue.name, 30)}</span>
                         </Tooltip>
                       </div>
                       <div className="flex items-center gap-1.5">
@@ -481,15 +443,9 @@ export const ActiveCycleDetails: React.FC = () => {
                         </div>
                         <ViewIssueLabel labelDetails={issue.label_details} maxRender={2} />
                         <div className={`flex items-center gap-2 text-custom-text-200`}>
-                          {issue.assignees &&
-                          issue.assignees.length > 0 &&
-                          Array.isArray(issue.assignees) ? (
+                          {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
                             <div className="-my-0.5 flex items-center justify-center gap-2">
-                              <AssigneesList
-                                users={issue.assignee_details}
-                                length={3}
-                                showLength={false}
-                              />
+                              <AssigneesList users={issue.assignee_details} length={3} showLength={false} />
                             </div>
                           ) : (
                             ""
@@ -522,17 +478,14 @@ export const ActiveCycleDetails: React.FC = () => {
                     width:
                       issues &&
                       `${
-                        (issues.filter((issue) => issue?.state_detail?.group === "completed")
-                          ?.length /
-                          issues.length) *
+                        (issues.filter((issue) => issue?.state_detail?.group === "completed")?.length / issues.length) *
                           100 ?? 0
                       }%`,
                   }}
                 />
               </div>
               <div className="w-16 text-end text-xs text-custom-text-200">
-                {issues?.filter((issue) => issue?.state_detail?.group === "completed")?.length} of{" "}
-                {issues?.length}
+                {issues?.filter((issue) => issue?.state_detail?.group === "completed")?.length} of {issues?.length}
               </div>
             </div>
           )}
@@ -553,10 +506,7 @@ export const ActiveCycleDetails: React.FC = () => {
               <span>
                 <LayerDiagonalIcon className="h-5 w-5 flex-shrink-0 text-custom-text-200" />
               </span>
-              <span>
-                Pending Issues -{" "}
-                {cycle.total_issues - (cycle.completed_issues + cycle.cancelled_issues)}
-              </span>
+              <span>Pending Issues - {cycle.total_issues - (cycle.completed_issues + cycle.cancelled_issues)}</span>
             </div>
           </div>
           <div className="relative h-64">
diff --git a/web/components/cycles/cycles-list.tsx b/web/components/cycles/cycles-list.tsx
index 923bdc20ab7..ec8a40837ec 100644
--- a/web/components/cycles/cycles-list.tsx
+++ b/web/components/cycles/cycles-list.tsx
@@ -1,6 +1,6 @@
 import { FC } from "react";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // types
 import { ICycle } from "types";
 import { CyclesListItem } from "./cycles-list-item";
diff --git a/web/components/cycles/cycles-view-legacy.tsx b/web/components/cycles/cycles-view-legacy.tsx
index 5d025e4fdce..da858bf52db 100644
--- a/web/components/cycles/cycles-view-legacy.tsx
+++ b/web/components/cycles/cycles-view-legacy.tsx
@@ -16,7 +16,7 @@ import {
   SingleCycleList,
 } from "components/cycles";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // helpers
 import { getDateRangeStatus } from "helpers/date-time.helper";
 // types
diff --git a/web/components/cycles/cycles-view.tsx b/web/components/cycles/cycles-view.tsx
index 42e0a427213..2404c27da35 100644
--- a/web/components/cycles/cycles-view.tsx
+++ b/web/components/cycles/cycles-view.tsx
@@ -5,7 +5,7 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { CyclesBoard, CyclesList } from "components/cycles";
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 
 export interface ICyclesView {
   filter: "all" | "current" | "upcoming" | "draft" | "completed" | "incomplete";
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index e2ca98d3f86..4b2e1efeaa4 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -17,7 +17,8 @@ import { SidebarProgressStats } from "components/core";
 import ProgressChart from "components/core/sidebar/progress-chart";
 import { DeleteCycleModal } from "components/cycles";
 // ui
-import { CustomMenu, CustomRangeDatePicker, Loader, ProgressBar } from "components/ui";
+import { CustomMenu, CustomRangeDatePicker, ProgressBar } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
 import {
   CalendarDaysIcon,
diff --git a/web/components/exporter/guide.tsx b/web/components/exporter/guide.tsx
index e5f0278006d..5df8b1d9327 100644
--- a/web/components/exporter/guide.tsx
+++ b/web/components/exporter/guide.tsx
@@ -13,8 +13,8 @@ import IntegrationService from "services/integration.service";
 // components
 import { Exporter, SingleExport } from "components/exporter";
 // ui
-import { Button } from "@plane/ui";
-import { Icon, Loader } from "components/ui";
+import { Button, Loader } from "@plane/ui";
+import { Icon } from "components/ui";
 // icons
 import { ArrowPathIcon } from "@heroicons/react/24/outline";
 // fetch-keys
diff --git a/web/components/gantt-chart/sidebar.tsx b/web/components/gantt-chart/sidebar.tsx
index 2aec274d9e2..85a5031cf52 100644
--- a/web/components/gantt-chart/sidebar.tsx
+++ b/web/components/gantt-chart/sidebar.tsx
@@ -5,7 +5,7 @@ import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 // hooks
 import { useChart } from "./hooks";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
 import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
 // helpers
@@ -55,8 +55,7 @@ export const GanttSidebar: React.FC<Props> = (props) => {
     // update the sort order to the lowest if dropped at the top
     if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
     // update the sort order to the highest if dropped at the bottom
-    else if (destination.index === blocks.length - 1)
-      updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
+    else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
     // update the sort order to the average of the two adjacent blocks if dropped in between
     else {
       const destinationSortingOrder = blocks[destination.index].sort_order;
@@ -95,11 +94,7 @@ export const GanttSidebar: React.FC<Props> = (props) => {
             <>
               {blocks ? (
                 blocks.map((block, index) => {
-                  const duration = findTotalDaysInRange(
-                    block.start_date ?? "",
-                    block.target_date ?? "",
-                    true
-                  );
+                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "", true);
 
                   return (
                     <Draggable
@@ -110,9 +105,7 @@ export const GanttSidebar: React.FC<Props> = (props) => {
                     >
                       {(provided, snapshot) => (
                         <div
-                          className={`h-11 ${
-                            snapshot.isDragging ? "bg-custom-background-80 rounded" : ""
-                          }`}
+                          className={`h-11 ${snapshot.isDragging ? "bg-custom-background-80 rounded" : ""}`}
                           onMouseEnter={() => updateActiveBlock(block)}
                           onMouseLeave={() => updateActiveBlock(null)}
                           ref={provided.innerRef}
diff --git a/web/components/inbox/inbox-main-content.tsx b/web/components/inbox/inbox-main-content.tsx
index 6c096072963..5b0fb1da70a 100644
--- a/web/components/inbox/inbox-main-content.tsx
+++ b/web/components/inbox/inbox-main-content.tsx
@@ -17,7 +17,7 @@ import useUserAuth from "hooks/use-user-auth";
 import { IssueDescriptionForm, IssueDetailsSidebar, IssueReaction } from "components/issues";
 import { InboxIssueActivity } from "components/inbox";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
 import {
   ArrowTopRightOnSquareIcon,
@@ -117,16 +117,7 @@ export const InboxMainContent: React.FC = () => {
           mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
         });
     },
-    [
-      workspaceSlug,
-      inboxIssueId,
-      projectId,
-      mutateIssueDetails,
-      inboxId,
-      user,
-      issueDetails,
-      params,
-    ]
+    [workspaceSlug, inboxIssueId, projectId, mutateIssueDetails, inboxId, user, issueDetails, params]
   );
 
   const onKeyDown = useCallback(
@@ -178,8 +169,7 @@ export const InboxMainContent: React.FC = () => {
 
     reset({
       ...issueDetails,
-      assignees_list:
-        issueDetails.assignees_list ?? (issueDetails.assignee_details ?? []).map((user) => user.id),
+      assignees_list: issueDetails.assignees_list ?? (issueDetails.assignee_details ?? []).map((user) => user.id),
       labels_list: issueDetails.labels_list ?? issueDetails.labels,
     });
   }, [issueDetails, reset, inboxIssueId]);
@@ -194,13 +184,11 @@ export const InboxMainContent: React.FC = () => {
             <InboxIcon height={60} width={60} />
             {inboxIssues && inboxIssues.length > 0 ? (
               <span className="text-custom-text-200">
-                {inboxIssues?.length} issues found. Select an issue from the sidebar to view its
-                details.
+                {inboxIssues?.length} issues found. Select an issue from the sidebar to view its details.
               </span>
             ) : (
               <span className="text-custom-text-200">
-                No issues found. Use{" "}
-                <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre> shortcut
+                No issues found. Use <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre> shortcut
                 to create a new issue
               </span>
             )}
@@ -247,18 +235,12 @@ export const InboxMainContent: React.FC = () => {
                   {new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date() ? (
                     <p>
                       This issue was snoozed till{" "}
-                      {renderShortDateWithYearFormat(
-                        issueDetails.issue_inbox[0].snoozed_till ?? ""
-                      )}
-                      .
+                      {renderShortDateWithYearFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}.
                     </p>
                   ) : (
                     <p>
                       This issue has been snoozed till{" "}
-                      {renderShortDateWithYearFormat(
-                        issueDetails.issue_inbox[0].snoozed_till ?? ""
-                      )}
-                      .
+                      {renderShortDateWithYearFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}.
                     </p>
                   )}
                 </>
@@ -293,17 +275,11 @@ export const InboxMainContent: React.FC = () => {
                   description_html: issueDetails.description_html,
                 }}
                 handleFormSubmit={submitChanges}
-                isAllowed={
-                  memberRole.isMember || memberRole.isOwner || user?.id === issueDetails.created_by
-                }
+                isAllowed={memberRole.isMember || memberRole.isOwner || user?.id === issueDetails.created_by}
               />
             </div>
 
-            <IssueReaction
-              projectId={projectId}
-              workspaceSlug={workspaceSlug}
-              issueId={issueDetails.id}
-            />
+            <IssueReaction projectId={projectId} workspaceSlug={workspaceSlug} issueId={issueDetails.id} />
 
             <InboxIssueActivity issueDetails={issueDetails} />
           </div>
diff --git a/web/components/inbox/issues-list-sidebar.tsx b/web/components/inbox/issues-list-sidebar.tsx
index 5f0fd116a2e..31fb3e7e6f5 100644
--- a/web/components/inbox/issues-list-sidebar.tsx
+++ b/web/components/inbox/issues-list-sidebar.tsx
@@ -5,7 +5,7 @@ import useInboxView from "hooks/use-inbox-view";
 // components
 import { InboxIssueCard, InboxFiltersList } from "components/inbox";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 
 export const IssuesListSidebar = () => {
   const router = useRouter();
@@ -20,17 +20,12 @@ export const IssuesListSidebar = () => {
         inboxIssues.length > 0 ? (
           <div className="divide-y divide-custom-border-200 overflow-auto h-full">
             {inboxIssues.map((issue) => (
-              <InboxIssueCard
-                key={issue.id}
-                active={issue.bridge_id === inboxIssueId}
-                issue={issue}
-              />
+              <InboxIssueCard key={issue.id} active={issue.bridge_id === inboxIssueId} issue={issue} />
             ))}
           </div>
         ) : (
           <div className="h-full p-4 grid place-items-center text-center text-sm text-custom-text-200">
-            {filtersLength > 0 &&
-              "No issues found for the selected filters. Try changing the filters."}
+            {filtersLength > 0 && "No issues found for the selected filters. Try changing the filters."}
           </div>
         )
       ) : (
diff --git a/web/components/integration/github/repo-details.tsx b/web/components/integration/github/repo-details.tsx
index a59197750a6..1e78f924151 100644
--- a/web/components/integration/github/repo-details.tsx
+++ b/web/components/integration/github/repo-details.tsx
@@ -9,8 +9,7 @@ import { UseFormSetValue } from "react-hook-form";
 // services
 import GithubIntegrationService from "services/github.service";
 // ui
-import { Loader } from "components/ui";
-import { Button } from "@plane/ui";
+import { Button, Loader } from "@plane/ui";
 // types
 import { IUserDetails, TFormValues, TIntegrationSteps } from "components/integration";
 // fetch-keys
diff --git a/web/components/integration/guide.tsx b/web/components/integration/guide.tsx
index c428beb2a7f..6ed5d03f36a 100644
--- a/web/components/integration/guide.tsx
+++ b/web/components/integration/guide.tsx
@@ -13,8 +13,7 @@ import IntegrationService from "services/integration.service";
 // components
 import { DeleteImportModal, GithubImporterRoot, JiraImporterRoot, SingleImport } from "components/integration";
 // ui
-import { Button } from "@plane/ui";
-import { Loader } from "components/ui";
+import { Button, Loader } from "@plane/ui";
 // icons
 import { ArrowPathIcon } from "@heroicons/react/24/outline";
 // types
diff --git a/web/components/integration/single-integration-card.tsx b/web/components/integration/single-integration-card.tsx
index 798b8d2b131..081de73788e 100644
--- a/web/components/integration/single-integration-card.tsx
+++ b/web/components/integration/single-integration-card.tsx
@@ -11,8 +11,7 @@ import IntegrationService from "services/integration.service";
 import useToast from "hooks/use-toast";
 import useIntegrationPopup from "hooks/use-integration-popup";
 // ui
-import { Button } from "@plane/ui";
-import { Loader } from "components/ui";
+import { Button, Loader } from "@plane/ui";
 // icons
 import GithubLogo from "public/services/github.png";
 import SlackLogo from "public/services/slack.png";
diff --git a/web/components/integration/slack/select-channel.tsx b/web/components/integration/slack/select-channel.tsx
index 728b582f146..6455011d44e 100644
--- a/web/components/integration/slack/select-channel.tsx
+++ b/web/components/integration/slack/select-channel.tsx
@@ -6,7 +6,7 @@ import useSWR, { mutate } from "swr";
 // services
 import appinstallationsService from "services/app_installation.service";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // hooks
 import useToast from "hooks/use-toast";
 import useIntegrationPopup from "hooks/use-integration-popup";
diff --git a/web/components/issues/activity.tsx b/web/components/issues/activity.tsx
index e6f54f51246..5e5f5b4df99 100644
--- a/web/components/issues/activity.tsx
+++ b/web/components/issues/activity.tsx
@@ -7,7 +7,8 @@ import { useRouter } from "next/router";
 import { ActivityIcon, ActivityMessage } from "components/core";
 import { CommentCard } from "components/issues/comment";
 // ui
-import { Icon, Loader, Tooltip } from "components/ui";
+import { Icon, Tooltip } from "components/ui";
+import { Loader } from "@plane/ui";
 // helpers
 import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/date-time.helper";
 // types
@@ -52,11 +53,7 @@ export const IssueActivitySection: React.FC<Props> = ({
       <ul role="list" className="-mb-4">
         {activity.map((activityItem, index) => {
           // determines what type of action is performed
-          const message = activityItem.field ? (
-            <ActivityMessage activity={activityItem} />
-          ) : (
-            "created the issue."
-          );
+          const message = activityItem.field ? <ActivityMessage activity={activityItem} /> : "created the issue.";
 
           if ("field" in activityItem && activityItem.field !== "updated_by") {
             return (
@@ -79,8 +76,7 @@ export const IssueActivitySection: React.FC<Props> = ({
                               ) : (
                                 <ActivityIcon activity={activityItem} />
                               )
-                            ) : activityItem.actor_detail.avatar &&
-                              activityItem.actor_detail.avatar !== "" ? (
+                            ) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
                               <img
                                 src={activityItem.actor_detail.avatar}
                                 alt={activityItem.actor_detail.display_name}
@@ -103,13 +99,10 @@ export const IssueActivitySection: React.FC<Props> = ({
                     </div>
                     <div className="min-w-0 flex-1 py-3">
                       <div className="text-xs text-custom-text-200 break-words">
-                        {activityItem.field === "archived_at" &&
-                        activityItem.new_value !== "restore" ? (
+                        {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
                           <span className="text-gray font-medium">Plane</span>
                         ) : activityItem.actor_detail.is_bot ? (
-                          <span className="text-gray font-medium">
-                            {activityItem.actor_detail.first_name} Bot
-                          </span>
+                          <span className="text-gray font-medium">{activityItem.actor_detail.first_name} Bot</span>
                         ) : (
                           <Link href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}>
                             <a className="text-gray font-medium">
@@ -121,13 +114,11 @@ export const IssueActivitySection: React.FC<Props> = ({
                         )}{" "}
                         {message}{" "}
                         <Tooltip
-                          tooltipContent={`${renderLongDateFormat(
+                          tooltipContent={`${renderLongDateFormat(activityItem.created_at)}, ${render24HourFormatTime(
                             activityItem.created_at
-                          )}, ${render24HourFormatTime(activityItem.created_at)}`}
+                          )}`}
                         >
-                          <span className="whitespace-nowrap">
-                            {timeAgo(activityItem.created_at)}
-                          </span>
+                          <span className="whitespace-nowrap">{timeAgo(activityItem.created_at)}</span>
                         </Tooltip>
                       </div>
                     </div>
diff --git a/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx b/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
index 9e41784f8ca..eace4bec53e 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
@@ -3,7 +3,8 @@ import React, { useState } from "react";
 // components
 import { FilterHeader, FilterOption } from "components/issues";
 // ui
-import { Avatar, Loader } from "components/ui";
+import { Avatar } from "components/ui";
+import { Loader } from "@plane/ui";
 // types
 import { IUserLite } from "types";
 
diff --git a/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx b/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
index 9be5bd05c1d..5d8978ffd29 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
@@ -3,7 +3,8 @@ import React, { useState } from "react";
 // components
 import { FilterHeader, FilterOption } from "components/issues";
 // ui
-import { Avatar, Loader } from "components/ui";
+import { Avatar } from "components/ui";
+import { Loader } from "@plane/ui";
 // types
 import { IUserLite } from "types";
 
diff --git a/web/components/issues/issue-layouts/filters/header/filters/labels.tsx b/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
index a4140507633..37f6846f944 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
@@ -3,7 +3,7 @@ import React, { useState } from "react";
 // components
 import { FilterHeader, FilterOption } from "components/issues";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // types
 import { IIssueLabels } from "types";
 
diff --git a/web/components/issues/issue-layouts/filters/header/filters/state.tsx b/web/components/issues/issue-layouts/filters/header/filters/state.tsx
index ae719758af9..6f3472c8e13 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/state.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/state.tsx
@@ -3,7 +3,7 @@ import React, { useState } from "react";
 // components
 import { FilterHeader, FilterOption } from "components/issues";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
 import { StateGroupIcon } from "components/icons";
 // helpers
diff --git a/web/components/issues/parent-issues-list-modal.tsx b/web/components/issues/parent-issues-list-modal.tsx
index a29fa6521c4..c98ee8e14d9 100644
--- a/web/components/issues/parent-issues-list-modal.tsx
+++ b/web/components/issues/parent-issues-list-modal.tsx
@@ -11,7 +11,8 @@ import useDebounce from "hooks/use-debounce";
 // components
 import { LayerDiagonalIcon } from "components/icons";
 // ui
-import { Loader, ToggleSwitch, Tooltip } from "components/ui";
+import { ToggleSwitch, Tooltip } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
 import { LaunchOutlined } from "@mui/icons-material";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
@@ -69,12 +70,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
 
   return (
     <>
-      <Transition.Root
-        show={isOpen}
-        as={React.Fragment}
-        afterLeave={() => setSearchTerm("")}
-        appear
-      >
+      <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setSearchTerm("")} appear>
         <Dialog as="div" className="relative z-20" onClose={handleClose}>
           <Transition.Child
             as={React.Fragment}
@@ -154,21 +150,15 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                       </h5>
                     )}
 
-                    {!isSearching &&
-                      issues.length === 0 &&
-                      searchTerm !== "" &&
-                      debouncedSearchTerm !== "" && (
-                        <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                          <LayerDiagonalIcon height="52" width="52" />
-                          <h3 className="text-custom-text-200">
-                            No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">
-                              C
-                            </pre>
-                            .
-                          </h3>
-                        </div>
-                      )}
+                    {!isSearching && issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
+                      <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
+                        <LayerDiagonalIcon height="52" width="52" />
+                        <h3 className="text-custom-text-200">
+                          No issues found. Create a new issue with{" "}
+                          <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">C</pre>.
+                        </h3>
+                      </div>
+                    )}
 
                     {isSearching ? (
                       <Loader className="space-y-3 p-3">
diff --git a/web/components/issues/peek-overview/full-screen-peek-view.tsx b/web/components/issues/peek-overview/full-screen-peek-view.tsx
index 9c04e0b6ae5..47d0d1e7d53 100644
--- a/web/components/issues/peek-overview/full-screen-peek-view.tsx
+++ b/web/components/issues/peek-overview/full-screen-peek-view.tsx
@@ -7,7 +7,7 @@ import {
   TPeekOverviewModes,
 } from "components/issues";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // types
 import { IIssue } from "types";
 
@@ -59,11 +59,7 @@ export const FullScreenPeekView: React.FC<Props> = ({
           <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
           {/* issue activity/comments */}
           <div className="w-full pb-5">
-            <PeekOverviewIssueActivity
-              workspaceSlug={workspaceSlug}
-              issue={issue}
-              readOnly={readOnly}
-            />
+            <PeekOverviewIssueActivity workspaceSlug={workspaceSlug} issue={issue} readOnly={readOnly} />
           </div>
         </div>
       ) : (
diff --git a/web/components/issues/peek-overview/side-peek-view.tsx b/web/components/issues/peek-overview/side-peek-view.tsx
index 1bdeed4791f..cb3e8316b4a 100644
--- a/web/components/issues/peek-overview/side-peek-view.tsx
+++ b/web/components/issues/peek-overview/side-peek-view.tsx
@@ -7,7 +7,7 @@ import {
   TPeekOverviewModes,
 } from "components/issues";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // types
 import { IIssue } from "types";
 
@@ -69,13 +69,7 @@ export const SidePeekView: React.FC<Props> = ({
         <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
         {/* issue activity/comments */}
         <div className="w-full pb-5">
-          {issue && (
-            <PeekOverviewIssueActivity
-              workspaceSlug={workspaceSlug}
-              issue={issue}
-              readOnly={readOnly}
-            />
-          )}
+          {issue && <PeekOverviewIssueActivity workspaceSlug={workspaceSlug} issue={issue} readOnly={readOnly} />}
         </div>
       </div>
     ) : (
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index e815d19506f..e7613000be7 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -29,7 +29,8 @@ import useToast from "hooks/use-toast";
 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";
+import { CustomMenu, CustomSelect, ProgressBar } from "components/ui";
+import { Loader } from "@plane/ui";
 // icon
 import { ExclamationIcon } from "components/icons";
 import { LinkIcon } from "@heroicons/react/20/solid";
@@ -169,8 +170,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
   };
 
   const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
 
     copyTextToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module?.id}`)
       .then(() => {
@@ -198,9 +198,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
   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;
+  const progressPercentage = module ? Math.round((module.completed_issues / module.total_issues) * 100) : null;
 
   const handleEditLink = (link: linkDetails) => {
     setSelectedLinkToUpdate(link);
@@ -220,12 +218,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
         createIssueLink={handleCreateLink}
         updateIssueLink={handleUpdateLink}
       />
-      <DeleteModuleModal
-        isOpen={moduleDeleteModal}
-        setIsOpen={setModuleDeleteModal}
-        data={module}
-        user={user}
-      />
+      <DeleteModuleModal isOpen={moduleDeleteModal} setIsOpen={setModuleDeleteModal} data={module} user={user} />
       <div
         className={`fixed top-[66px] ${
           isOpen ? "right-0" : "-right-[24rem]"
@@ -270,12 +263,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
-                          <span>
-                            {renderShortDateWithYearFormat(
-                              new Date(`${module.start_date}`),
-                              "Start date"
-                            )}
-                          </span>
+                          <span>{renderShortDateWithYearFormat(new Date(`${module.start_date}`), "Start date")}</span>
                         </Popover.Button>
 
                         <Transition
@@ -289,11 +277,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                         >
                           <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()
-                              }
+                              selected={watch("start_date") ? new Date(`${watch("start_date")}`) : new Date()}
                               onChange={(date) => {
                                 submitChanges({
                                   start_date: renderDateFormat(date),
@@ -324,12 +308,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                         >
                           <CalendarDaysIcon className="h-3 w-3 " />
 
-                          <span>
-                            {renderShortDateWithYearFormat(
-                              new Date(`${module?.target_date}`),
-                              "End date"
-                            )}
-                          </span>
+                          <span>{renderShortDateWithYearFormat(new Date(`${module?.target_date}`), "End date")}</span>
                         </Popover.Button>
 
                         <Transition
@@ -343,11 +322,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                         >
                           <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()
-                              }
+                              selected={watch("target_date") ? new Date(`${watch("target_date")}`) : new Date()}
                               onChange={(date) => {
                                 submitChanges({
                                   target_date: renderDateFormat(date),
@@ -372,9 +347,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                 <div className="flex w-full flex-col items-start justify-start gap-2">
                   <div className="flex w-full items-start justify-between gap-2  ">
                     <div className="max-w-[300px]">
-                      <h4 className="text-xl font-semibold break-words w-full text-custom-text-100">
-                        {module.name}
-                      </h4>
+                      <h4 className="text-xl font-semibold break-words w-full text-custom-text-100">{module.name}</h4>
                     </div>
                     <CustomMenu width="lg" ellipsis>
                       <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
@@ -431,10 +404,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
 
                     <div className="flex items-center gap-2.5 text-custom-text-200">
                       <span className="h-4 w-4">
-                        <ProgressBar
-                          value={module.completed_issues}
-                          maxValue={module.total_issues}
-                        />
+                        <ProgressBar value={module.completed_issues} maxValue={module.total_issues} />
                       </span>
                       {module.completed_issues}/{module.total_issues}
                     </div>
@@ -446,9 +416,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
             <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
-                  <div
-                    className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}
-                  >
+                  <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-custom-text-200">Progress</span>
@@ -470,11 +438,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                         </Disclosure.Button>
                       ) : (
                         <div className="flex items-center gap-1">
-                          <ExclamationIcon
-                            height={14}
-                            width={14}
-                            className="fill-current text-custom-text-200"
-                          />
+                          <ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" />
                           <span className="text-xs italic text-custom-text-200">
                             Invalid date. Please enter valid date.
                           </span>
@@ -492,8 +456,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                                 </span>
                                 <span>
                                   Pending Issues -{" "}
-                                  {module.total_issues -
-                                    (module.completed_issues + module.cancelled_issues)}{" "}
+                                  {module.total_issues - (module.completed_issues + module.cancelled_issues)}{" "}
                                 </span>
                               </div>
 
@@ -530,9 +493,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
             <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
-                  <div
-                    className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}
-                  >
+                  <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-custom-text-200">Other Information</span>
@@ -547,11 +508,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                         </Disclosure.Button>
                       ) : (
                         <div className="flex items-center gap-1">
-                          <ExclamationIcon
-                            height={14}
-                            width={14}
-                            className="fill-current text-custom-text-200"
-                          />
+                          <ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" />
                           <span className="text-xs italic text-custom-text-200">
                             No issues found. Please add issue.
                           </span>
diff --git a/web/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx
index f01fdafd155..d465d8c776c 100644
--- a/web/components/notifications/notification-popover.tsx
+++ b/web/components/notifications/notification-popover.tsx
@@ -9,12 +9,9 @@ import { Popover, Transition } from "@headlessui/react";
 import useUserNotification from "hooks/use-user-notifications";
 
 // components
-import { Loader, EmptyState, Tooltip } from "components/ui";
-import {
-  SnoozeNotificationModal,
-  NotificationCard,
-  NotificationHeader,
-} from "components/notifications";
+import { EmptyState, Tooltip } from "components/ui";
+import { SnoozeNotificationModal, NotificationCard, NotificationHeader } from "components/notifications";
+import { Loader } from "@plane/ui";
 // icons
 import { NotificationsOutlined } from "@mui/icons-material";
 // images
@@ -63,11 +60,7 @@ export const NotificationPopover = () => {
         isOpen={selectedNotificationForSnooze !== null}
         onClose={() => setSelectedNotificationForSnooze(null)}
         onSubmit={markSnoozeNotification}
-        notification={
-          notifications?.find(
-            (notification) => notification.id === selectedNotificationForSnooze
-          ) || null
-        }
+        notification={notifications?.find((notification) => notification.id === selectedNotificationForSnooze) || null}
         onSuccess={() => {
           setSelectedNotificationForSnooze(null);
         }}
diff --git a/web/components/pages/pages-list/recent-pages-list.tsx b/web/components/pages/pages-list/recent-pages-list.tsx
index 6ea8f9d010c..f302d607b23 100644
--- a/web/components/pages/pages-list/recent-pages-list.tsx
+++ b/web/components/pages/pages-list/recent-pages-list.tsx
@@ -9,7 +9,8 @@ import pagesService from "services/page.service";
 // components
 import { PagesView } from "components/pages";
 // ui
-import { EmptyState, Loader } from "components/ui";
+import { EmptyState } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // images
diff --git a/web/components/pages/pages-view.tsx b/web/components/pages/pages-view.tsx
index b7fc0249c51..ba385a3168e 100644
--- a/web/components/pages/pages-view.tsx
+++ b/web/components/pages/pages-view.tsx
@@ -12,7 +12,8 @@ import useUserAuth from "hooks/use-user-auth";
 // components
 import { CreateUpdatePageModal, DeletePageModal, SinglePageDetailedItem, SinglePageListItem } from "components/pages";
 // ui
-import { EmptyState, Loader } from "components/ui";
+import { EmptyState } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // images
diff --git a/web/components/profile/overview/activity.tsx b/web/components/profile/overview/activity.tsx
index 0458123632f..e2cc01c8f24 100644
--- a/web/components/profile/overview/activity.tsx
+++ b/web/components/profile/overview/activity.tsx
@@ -7,7 +7,8 @@ import userService from "services/user.service";
 // components
 import { ActivityMessage } from "components/core";
 // ui
-import { ProfileEmptyState, Icon, Loader } from "components/ui";
+import { ProfileEmptyState, Icon } from "components/ui";
+import { Loader } from "@plane/ui";
 // image
 import recentActivityEmptyState from "public/empty-state/recent_activity.svg";
 // helpers
@@ -20,9 +21,7 @@ export const ProfileActivity = () => {
   const { workspaceSlug, userId } = router.query;
 
   const { data: userProfileActivity } = useSWR(
-    workspaceSlug && userId
-      ? USER_PROFILE_ACTIVITY(workspaceSlug.toString(), userId.toString())
-      : null,
+    workspaceSlug && userId ? USER_PROFILE_ACTIVITY(workspaceSlug.toString(), userId.toString()) : null,
     workspaceSlug && userId
       ? () => userService.getUserProfileActivity(workspaceSlug.toString(), userId.toString())
       : null
@@ -54,9 +53,7 @@ export const ProfileActivity = () => {
                   </div>
                   <div className="-mt-1 w-4/5 break-words">
                     <p className="text-sm text-custom-text-200">
-                      <span className="font-medium text-custom-text-100">
-                        {activity.actor_detail.display_name}{" "}
-                      </span>
+                      <span className="font-medium text-custom-text-100">{activity.actor_detail.display_name} </span>
                       {activity.field ? (
                         <ActivityMessage activity={activity} showIssue />
                       ) : (
diff --git a/web/components/profile/overview/priority-distribution.tsx b/web/components/profile/overview/priority-distribution.tsx
index d72985285dd..de88cf5175f 100644
--- a/web/components/profile/overview/priority-distribution.tsx
+++ b/web/components/profile/overview/priority-distribution.tsx
@@ -1,5 +1,6 @@
 // ui
-import { BarGraph, ProfileEmptyState, Loader } from "components/ui";
+import { BarGraph, ProfileEmptyState } from "components/ui";
+import { Loader } from "@plane/ui";
 // image
 import emptyBarGraph from "public/empty-state/empty_bar_graph.svg";
 // helpers
diff --git a/web/components/profile/overview/stats.tsx b/web/components/profile/overview/stats.tsx
index 0277ac5b387..f6ec73778cd 100644
--- a/web/components/profile/overview/stats.tsx
+++ b/web/components/profile/overview/stats.tsx
@@ -2,7 +2,8 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 
 // ui
-import { Icon, Loader } from "components/ui";
+import { Icon } from "components/ui";
+import { Loader } from "@plane/ui";
 // types
 import { IUserProfileData } from "types";
 
diff --git a/web/components/profile/sidebar.tsx b/web/components/profile/sidebar.tsx
index 59cc5528bec..b61c20e369f 100644
--- a/web/components/profile/sidebar.tsx
+++ b/web/components/profile/sidebar.tsx
@@ -10,7 +10,8 @@ import userService from "services/user.service";
 // hooks
 import useUser from "hooks/use-user";
 // ui
-import { Icon, Loader, Tooltip } from "components/ui";
+import { Icon, Tooltip } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
 import { EditOutlined } from "@mui/icons-material";
 // helpers
@@ -26,12 +27,9 @@ export const ProfileSidebar = () => {
   const { user } = useUser();
 
   const { data: userProjectsData } = useSWR(
+    workspaceSlug && userId ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString()) : null,
     workspaceSlug && userId
-      ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString())
-      : null,
-    workspaceSlug && userId
-      ? () =>
-          userService.getUserProfileProjectsSegregation(workspaceSlug.toString(), userId.toString())
+      ? () => userService.getUserProfileProjectsSegregation(workspaceSlug.toString(), userId.toString())
       : null
   );
 
@@ -54,8 +52,7 @@ export const ProfileSidebar = () => {
       label: "Timezone",
       value: (
         <span>
-          {timeString}{" "}
-          <span className="text-custom-text-200">{userProjectsData?.user_data.user_timezone}</span>
+          {timeString} <span className="text-custom-text-200">{userProjectsData?.user_data.user_timezone}</span>
         </span>
       ),
     },
@@ -81,8 +78,7 @@ export const ProfileSidebar = () => {
             )}
             <img
               src={
-                userProjectsData.user_data.cover_image ??
-                "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"
+                userProjectsData.user_data.cover_image ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"
               }
               alt={userProjectsData.user_data.display_name}
               className="h-32 w-full object-cover"
@@ -106,9 +102,7 @@ export const ProfileSidebar = () => {
               <h4 className="text-lg font-semibold">
                 {userProjectsData.user_data.first_name} {userProjectsData.user_data.last_name}
               </h4>
-              <h6 className="text-custom-text-200 text-sm">
-                ({userProjectsData.user_data.display_name})
-              </h6>
+              <h6 className="text-custom-text-200 text-sm">({userProjectsData.user_data.display_name})</h6>
             </div>
             <div className="mt-6 space-y-5">
               {userDetails.map((detail) => (
@@ -121,10 +115,7 @@ export const ProfileSidebar = () => {
             <div className="mt-9 divide-y divide-custom-border-100">
               {userProjectsData.project_data.map((project, index) => {
                 const totalIssues =
-                  project.created_issues +
-                  project.assigned_issues +
-                  project.pending_issues +
-                  project.completed_issues;
+                  project.created_issues + project.assigned_issues + project.pending_issues + project.completed_issues;
 
                 const completedIssuePercentage =
                   project.assigned_issues === 0
@@ -132,11 +123,7 @@ export const ProfileSidebar = () => {
                     : Math.round((project.completed_issues / project.assigned_issues) * 100);
 
                 return (
-                  <Disclosure
-                    key={project.id}
-                    as="div"
-                    className={`${index === 0 ? "pb-3" : "py-3"}`}
-                  >
+                  <Disclosure key={project.id} as="div" className={`${index === 0 ? "pb-3" : "py-3"}`}>
                     {({ open }) => (
                       <div className="w-full">
                         <Disclosure.Button className="flex items-center justify-between gap-2 w-full">
@@ -154,9 +141,7 @@ export const ProfileSidebar = () => {
                                 {project?.name.charAt(0)}
                               </div>
                             )}
-                            <div className="text-sm font-medium truncate break-words">
-                              {project.name}
-                            </div>
+                            <div className="text-sm font-medium truncate break-words">{project.name}</div>
                           </div>
                           <div className="flex-shrink-0 flex items-center gap-2">
                             {project.assigned_issues > 0 && (
diff --git a/web/components/project/card-list.tsx b/web/components/project/card-list.tsx
index 0aff18b3755..1c8e5958e49 100644
--- a/web/components/project/card-list.tsx
+++ b/web/components/project/card-list.tsx
@@ -4,7 +4,8 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { ProjectCard } from "components/project";
-import { Loader, EmptyState } from "components/ui";
+import { EmptyState } from "components/ui";
+import { Loader } from "@plane/ui";
 // images
 import emptyProject from "public/empty-state/project.svg";
 // icons
diff --git a/web/components/project/form-loader.tsx b/web/components/project/form-loader.tsx
index 325807b83a6..039cdd25f6f 100644
--- a/web/components/project/form-loader.tsx
+++ b/web/components/project/form-loader.tsx
@@ -1,6 +1,6 @@
 import { FC } from "react";
 // components
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 
 export interface IProjectDetailsFormLoader {}
 
diff --git a/web/components/project/publish-project/modal.tsx b/web/components/project/publish-project/modal.tsx
index 088e83f9b60..de5205bc9d9 100644
--- a/web/components/project/publish-project/modal.tsx
+++ b/web/components/project/publish-project/modal.tsx
@@ -6,8 +6,8 @@ import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // ui components
-import { Button } from "@plane/ui";
-import { ToggleSwitch, Icon, Loader } from "components/ui";
+import { Button, Loader } from "@plane/ui";
+import { ToggleSwitch, Icon } from "components/ui";
 import { CustomPopover } from "./popover";
 // mobx react lite
 import { observer } from "mobx-react-lite";
diff --git a/web/components/ui/multi-level-dropdown.tsx b/web/components/ui/multi-level-dropdown.tsx
index cfdaa72d55c..1c435594305 100644
--- a/web/components/ui/multi-level-dropdown.tsx
+++ b/web/components/ui/multi-level-dropdown.tsx
@@ -3,7 +3,7 @@ import { Fragment, useState } from "react";
 // headless ui
 import { Menu, Transition } from "@headlessui/react";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
 import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
 import { ChevronRightIcon, ChevronLeftIcon } from "@heroicons/react/20/solid";
@@ -108,9 +108,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                     {option.hasChildren && option.id === openChildFor && (
                       <div
                         className={`absolute top-0 min-w-36 whitespace-nowrap origin-top-right select-none overflow-y-scroll rounded-md bg-custom-background-90 border border-custom-border-300 shadow-lg focus:outline-none ${
-                          direction === "left"
-                            ? "right-full -translate-x-1"
-                            : "left-full translate-x-1"
+                          direction === "left" ? "right-full -translate-x-1" : "left-full translate-x-1"
                         } ${
                           height === "sm"
                             ? "max-h-28"
@@ -126,9 +124,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                         {option.children ? (
                           <div className="space-y-1 p-1">
                             {option.children.length === 0 ? (
-                              <p className="text-custom-text-200 text-center px-1 py-1.5">
-                                No {option.label} found
-                              </p> //if no children found, show this message.
+                              <p className="text-custom-text-200 text-center px-1 py-1.5">No {option.label} found</p> //if no children found, show this message.
                             ) : (
                               option.children.map((child) => {
                                 if (child.element) return child.element;
@@ -144,9 +140,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                                     >
                                       {child.label}{" "}
                                       <CheckIcon
-                                        className={`h-3.5 w-3.5 opacity-0 ${
-                                          child.selected ? "opacity-100" : ""
-                                        }`}
+                                        className={`h-3.5 w-3.5 opacity-0 ${child.selected ? "opacity-100" : ""}`}
                                       />
                                     </button>
                                   );
diff --git a/web/components/ui/product-updates-modal.tsx b/web/components/ui/product-updates-modal.tsx
index 4f5bad7b3f1..2c88419ddd7 100644
--- a/web/components/ui/product-updates-modal.tsx
+++ b/web/components/ui/product-updates-modal.tsx
@@ -7,7 +7,8 @@ import { Dialog, Transition } from "@headlessui/react";
 // services
 import workspaceService from "services/workspace.service";
 // components
-import { Loader, MarkdownRenderer } from "components/ui";
+import { MarkdownRenderer } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
 import { XMarkIcon } from "@heroicons/react/20/solid";
 // helpers
@@ -48,10 +49,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
             >
               <Dialog.Panel className="relative overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-100 shadow-custom-shadow-rg] min-w-[100%] sm:min-w-[50%] sm:max-w-[50%]">
                 <div className="flex flex-col p-4 max-h-[90vh] w-full">
-                  <Dialog.Title
-                    as="h3"
-                    className="flex items-center justify-between text-lg font-semibold"
-                  >
+                  <Dialog.Title as="h3" className="flex items-center justify-between text-lg font-semibold">
                     <span>Product Updates</span>
                     <span>
                       <button type="button" onClick={() => setIsOpen(false)}>
diff --git a/web/components/workspace/issues-list.tsx b/web/components/workspace/issues-list.tsx
index 0cb8416c04b..a27951280e4 100644
--- a/web/components/workspace/issues-list.tsx
+++ b/web/components/workspace/issues-list.tsx
@@ -8,7 +8,7 @@ import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { truncateText } from "helpers/string.helper";
 // types
 import { IIssueLite } from "types";
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 import { LayerDiagonalIcon } from "components/icons";
 
 type Props = {
@@ -55,24 +55,15 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
                 const dateDifference = getDateDifference(new Date(date as string));
 
                 return (
-                  <Link
-                    href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
-                    key={issue.id}
-                  >
+                  <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" ? (dateDifference > 6 ? "text-red-500" : "text-yellow-400") : ""
                           }`}
                         >
-                          {type === "overdue" && (
-                            <ExclamationTriangleIcon className="h-3.5 w-3.5" />
-                          )}
+                          {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>
@@ -89,8 +80,7 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
                 <div className="my-5 flex flex-col items-center gap-4">
                   <LayerDiagonalIcon height={60} width={60} />
                   <span className="text-custom-text-200">
-                    No issues found. Use{" "}
-                    <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>{" "}
+                    No issues found. Use <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>{" "}
                     shortcut to create a new issue
                   </span>
                 </div>
diff --git a/web/components/workspace/issues-stats.tsx b/web/components/workspace/issues-stats.tsx
index 2c874d5033b..76e6a197053 100644
--- a/web/components/workspace/issues-stats.tsx
+++ b/web/components/workspace/issues-stats.tsx
@@ -1,7 +1,8 @@
 // components
 import { ActivityGraph } from "components/workspace";
 // ui
-import { Loader, Tooltip } from "components/ui";
+import { Tooltip } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
 import { InformationCircleIcon } from "@heroicons/react/24/outline";
 // types
@@ -23,10 +24,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => {
             <h4 className="text-sm">Issues assigned to you</h4>
             <h5 className="mt-2 text-2xl font-semibold">
               {data ? (
-                <div
-                  className="cursor-pointer"
-                  onClick={() => router.push(`/${workspaceSlug}/me/my-issues`)}
-                >
+                <div className="cursor-pointer" onClick={() => router.push(`/${workspaceSlug}/me/my-issues`)}>
                   {data.assigned_issues_count}
                 </div>
               ) : (
diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
index f3bbc029b6d..8d9ae1ff6c0 100644
--- a/web/components/workspace/sidebar-dropdown.tsx
+++ b/web/components/workspace/sidebar-dropdown.tsx
@@ -14,7 +14,8 @@ import useToast from "hooks/use-toast";
 import userService from "services/user.service";
 import authenticationService from "services/authentication.service";
 // components
-import { Avatar, Icon, Loader } from "components/ui";
+import { Avatar, Icon } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
 import { CheckIcon, PlusIcon } from "@heroicons/react/24/outline";
 // helpers
@@ -171,9 +172,7 @@ export const WorkspaceSidebarDropdown = () => {
                               </span>
 
                               <h5
-                                className={`text-sm ${
-                                  workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
-                                }`}
+                                className={`text-sm ${workspaceSlug === workspace.slug ? "" : "text-custom-text-200"}`}
                               >
                                 {truncateText(workspace.name, 18)}
                               </h5>
@@ -261,18 +260,16 @@ export const WorkspaceSidebarDropdown = () => {
             >
               <div className="flex flex-col gap-2.5 pb-2">
                 <span className="px-2 text-custom-sidebar-text-200">{user?.email}</span>
-                {profileLinks(workspaceSlug?.toString() ?? "", user?.id ?? "").map(
-                  (link, index) => (
-                    <Menu.Item key={index} as="button" type="button">
-                      <Link href={link.link}>
-                        <a className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
-                          <Icon iconName={link.icon} className="!text-lg !leading-5" />
-                          {link.name}
-                        </a>
-                      </Link>
-                    </Menu.Item>
-                  )
-                )}
+                {profileLinks(workspaceSlug?.toString() ?? "", user?.id ?? "").map((link, index) => (
+                  <Menu.Item key={index} as="button" type="button">
+                    <Link href={link.link}>
+                      <a className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
+                        <Icon iconName={link.icon} className="!text-lg !leading-5" />
+                        {link.name}
+                      </a>
+                    </Link>
+                  </Menu.Item>
+                ))}
               </div>
               <div className="pt-2">
                 <Menu.Item
diff --git a/web/pages/[workspaceSlug]/me/profile/activity.tsx b/web/pages/[workspaceSlug]/me/profile/activity.tsx
index df2ae803568..f6b08133b30 100644
--- a/web/pages/[workspaceSlug]/me/profile/activity.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/activity.tsx
@@ -13,8 +13,9 @@ import { TipTapEditor } from "components/tiptap";
 // icons
 import { ArrowTopRightOnSquareIcon, ChatBubbleLeftEllipsisIcon } from "@heroicons/react/24/outline";
 // ui
-import { Icon, Loader } from "components/ui";
+import { Icon } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { Loader } from "@plane/ui";
 // fetch-keys
 import { USER_ACTIVITY } from "constants/fetch-keys";
 // helper
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
index db2c296f7df..7d6eae3313a 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
@@ -16,8 +16,9 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
 // ui
-import { Icon, Loader } from "components/ui";
+import { Icon } from "components/ui";
 import { Breadcrumbs } from "components/breadcrumbs";
+import { Loader } from "@plane/ui";
 // types
 import { IIssue } from "types";
 import type { NextPage } from "next";
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index 4f1c8c88704..ccc10fdd378 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -15,8 +15,9 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
 // ui
-import { EmptyState, Loader } from "components/ui";
+import { EmptyState } from "components/ui";
 import { Breadcrumbs } from "components/breadcrumbs";
+import { Loader } from "@plane/ui";
 // images
 import emptyIssue from "public/empty-state/issue.svg";
 // types
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index aeb8659db3f..66fb2ea0c8c 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -14,8 +14,8 @@ import modulesService from "services/modules.service";
 // components
 import { CreateUpdateModuleModal, ModulesListGanttChartView, SingleModuleCard } from "components/modules";
 // ui
-import { Button } from "@plane/ui";
-import { EmptyState, Icon, Loader, Tooltip } from "components/ui";
+import { Button, Loader } from "@plane/ui";
+import { EmptyState, Icon, Tooltip } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index d57c6fb1631..56b0fa27130 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -28,8 +28,8 @@ import { CreateLabelModal } from "components/labels";
 import { CreateBlock } from "components/pages/create-block";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import { CustomSearchSelect, EmptyState, Loader, ToggleSwitch, Tooltip } from "components/ui";
-import { TextArea } from "@plane/ui";
+import { CustomSearchSelect, EmptyState, ToggleSwitch, Tooltip } from "components/ui";
+import { TextArea, Loader } from "@plane/ui";
 // images
 import emptyPage from "public/empty-state/page.svg";
 // icons
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index b6aba4141e1..a08174334ff 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -18,8 +18,8 @@ import { SettingsSidebar } from "components/project";
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // ui
-import { Button } from "@plane/ui";
-import { EmptyState, Loader } from "components/ui";
+import { Button, Loader } from "@plane/ui";
+import { EmptyState } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index 9c67e28b5da..a85482081b4 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -11,8 +11,8 @@ import { DeleteProjectModal, ProjectDetailsForm, ProjectDetailsFormLoader, Setti
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // components
-import { Button } from "@plane/ui";
-import { Loader, Icon } from "components/ui";
+import { Button, Loader } from "@plane/ui";
+import { Icon } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // helpers
 import { truncateText } from "helpers/string.helper";
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
index db5340f8791..5d665f3e63d 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -12,8 +12,9 @@ import projectService from "services/project.service";
 // components
 import { SettingsSidebar, SingleIntegration } from "components/project";
 // ui
-import { EmptyState, IntegrationAndImportExportBanner, Loader } from "components/ui";
+import { EmptyState, IntegrationAndImportExportBanner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { Loader } from "@plane/ui";
 // icons
 import { PlusIcon, PuzzlePieceIcon } from "@heroicons/react/24/outline";
 // images
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index c49d5de0092..0911c8bf256 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -21,8 +21,8 @@ import {
 } from "components/labels";
 import { SettingsSidebar } from "components/project";
 // ui
-import { Button } from "@plane/ui";
-import { EmptyState, Loader } from "components/ui";
+import { Button, Loader } from "@plane/ui";
+import { EmptyState } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index ba953410202..e1c63147a03 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -21,8 +21,8 @@ import ConfirmProjectMemberRemove from "components/project/confirm-project-membe
 import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
 import { MemberSelect, SettingsSidebar } from "components/project";
 // ui
-import { Button } from "@plane/ui";
-import { CustomMenu, CustomSearchSelect, CustomSelect, Icon, Loader } from "components/ui";
+import { Button, Loader } from "@plane/ui";
+import { CustomMenu, CustomSearchSelect, CustomSelect, Icon } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index aaf3e86f1f1..ccb1950e7b4 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -15,7 +15,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 import { CreateUpdateStateInline, DeleteStateModal, SingleState, StateGroup } from "components/states";
 import { SettingsSidebar } from "components/project";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
index 14661269d3e..3f099e15d3d 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -20,8 +20,8 @@ import emptyView from "public/empty-state/view.svg";
 // fetching keys
 import { PROJECT_DETAILS, VIEWS_LIST } from "constants/fetch-keys";
 // components
-import { Button } from "@plane/ui";
-import { Loader, EmptyState } from "components/ui";
+import { Button, Loader } from "@plane/ui";
+import { EmptyState } from "components/ui";
 import { DeleteViewModal, CreateUpdateViewModal, SingleViewItem } from "components/views";
 // types
 import { IView } from "types";
diff --git a/web/pages/[workspaceSlug]/settings/integrations.tsx b/web/pages/[workspaceSlug]/settings/integrations.tsx
index 8b1f603543e..840350f716e 100644
--- a/web/pages/[workspaceSlug]/settings/integrations.tsx
+++ b/web/pages/[workspaceSlug]/settings/integrations.tsx
@@ -13,8 +13,9 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 import { SingleIntegrationCard } from "components/integration";
 import { SettingsSidebar } from "components/project";
 // ui
-import { IntegrationAndImportExportBanner, Loader } from "components/ui";
+import { IntegrationAndImportExportBanner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { Loader } from "@plane/ui";
 // types
 import type { NextPage } from "next";
 // fetch-keys
diff --git a/web/pages/[workspaceSlug]/settings/members.tsx b/web/pages/[workspaceSlug]/settings/members.tsx
index f72f564ad83..a4058b1ece2 100644
--- a/web/pages/[workspaceSlug]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/settings/members.tsx
@@ -18,8 +18,8 @@ import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace
 import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal";
 import { SettingsSidebar } from "components/project";
 // ui
-import { Button } from "@plane/ui";
-import { CustomMenu, CustomSelect, Icon, Loader } from "components/ui";
+import { Button, Loader } from "@plane/ui";
+import { CustomMenu, CustomSelect, Icon } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { XMarkIcon } from "components/icons";
diff --git a/web/pages/[workspaceSlug]/workspace-views/index.tsx b/web/pages/[workspaceSlug]/workspace-views/index.tsx
index b8390ca0c98..488d809b344 100644
--- a/web/pages/[workspaceSlug]/workspace-views/index.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/index.tsx
@@ -16,8 +16,8 @@ import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/wo
 import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
 import { DeleteWorkspaceViewModal } from "components/workspace/views/delete-workspace-view-modal";
 // ui
-import { EmptyState, Loader } from "components/ui";
-import { Button, Input } from "@plane/ui";
+import { EmptyState } from "components/ui";
+import { Button, Input, Loader } from "@plane/ui";
 // icons
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { PlusIcon } from "lucide-react";

From f9f4905c33a613ea1a644ac856c2cc29ddf051f9 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 11 Oct 2023 14:48:32 +0530
Subject: [PATCH 09/15] fix: build error fix

---
 web/components/workspace/views/form.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/components/workspace/views/form.tsx b/web/components/workspace/views/form.tsx
index eb85b59b3af..bfe08981ff6 100644
--- a/web/components/workspace/views/form.tsx
+++ b/web/components/workspace/views/form.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { Controller, Controller, useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
@@ -39,7 +39,6 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
   const { workspace: workspaceStore, project: projectStore } = useMobxStore();
 
   const {
-    control,
     formState: { errors, isSubmitting },
     handleSubmit,
     control,

From 996c869530a2d9e0f316d50ecae08b01478e6830 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 11 Oct 2023 15:09:06 +0530
Subject: [PATCH 10/15] chore: button component refactor

---
 packages/ui/dist/index.js                     |  6 ++--
 packages/ui/dist/index.mjs                    |  6 ++--
 .../ui/src/{buttons => button}/button.tsx     |  0
 .../ui/src/{buttons => button}/helper.tsx     |  0
 packages/ui/src/button/index.tsx              |  1 +
 packages/ui/src/index.tsx                     |  2 +-
 web/components/headers/global-issues.tsx      |  8 ++---
 .../applied-filters/global-views-root.tsx     |  6 ++--
 web/components/ui/buttons/danger-button.tsx   | 36 -------------------
 web/components/ui/buttons/index.ts            |  3 --
 web/components/ui/buttons/primary-button.tsx  | 32 -----------------
 .../ui/buttons/secondary-button.tsx           | 32 -----------------
 web/components/ui/buttons/type.d.ts           | 10 ------
 web/components/ui/index.ts                    |  1 -
 14 files changed, 15 insertions(+), 128 deletions(-)
 rename packages/ui/src/{buttons => button}/button.tsx (100%)
 rename packages/ui/src/{buttons => button}/helper.tsx (100%)
 create mode 100644 packages/ui/src/button/index.tsx
 delete mode 100644 web/components/ui/buttons/danger-button.tsx
 delete mode 100644 web/components/ui/buttons/index.ts
 delete mode 100644 web/components/ui/buttons/primary-button.tsx
 delete mode 100644 web/components/ui/buttons/secondary-button.tsx
 delete mode 100644 web/components/ui/buttons/type.d.ts

diff --git a/packages/ui/dist/index.js b/packages/ui/dist/index.js
index f85a5360a8f..33357be1def 100644
--- a/packages/ui/dist/index.js
+++ b/packages/ui/dist/index.js
@@ -35,10 +35,10 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/buttons/button.tsx
+// src/button/button.tsx
 var React = __toESM(require("react"));
 
-// src/buttons/helper.tsx
+// src/button/helper.tsx
 var buttonStyling = {
   primary: {
     default: `text-white bg-custom-primary-100`,
@@ -125,7 +125,7 @@ var getIconStyling = (size) => {
   return icon;
 };
 
-// src/buttons/button.tsx
+// src/button/button.tsx
 var Button = React.forwardRef(
   (props, ref) => {
     const {
diff --git a/packages/ui/dist/index.mjs b/packages/ui/dist/index.mjs
index 4c2215e8b66..94edef0d82f 100644
--- a/packages/ui/dist/index.mjs
+++ b/packages/ui/dist/index.mjs
@@ -1,7 +1,7 @@
-// src/buttons/button.tsx
+// src/button/button.tsx
 import * as React from "react";
 
-// src/buttons/helper.tsx
+// src/button/helper.tsx
 var buttonStyling = {
   primary: {
     default: `text-white bg-custom-primary-100`,
@@ -88,7 +88,7 @@ var getIconStyling = (size) => {
   return icon;
 };
 
-// src/buttons/button.tsx
+// src/button/button.tsx
 var Button = React.forwardRef(
   (props, ref) => {
     const {
diff --git a/packages/ui/src/buttons/button.tsx b/packages/ui/src/button/button.tsx
similarity index 100%
rename from packages/ui/src/buttons/button.tsx
rename to packages/ui/src/button/button.tsx
diff --git a/packages/ui/src/buttons/helper.tsx b/packages/ui/src/button/helper.tsx
similarity index 100%
rename from packages/ui/src/buttons/helper.tsx
rename to packages/ui/src/button/helper.tsx
diff --git a/packages/ui/src/button/index.tsx b/packages/ui/src/button/index.tsx
new file mode 100644
index 00000000000..98d55acde68
--- /dev/null
+++ b/packages/ui/src/button/index.tsx
@@ -0,0 +1 @@
+export * from "./button";
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 2ef42f7b180..36eb08ef419 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -1,4 +1,4 @@
-export * from "./buttons/button";
+export * from "./button";
 export * from "./form-fields";
 export * from "./progress";
 export * from "./spinners";
diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx
index 962eb85b303..a976f070482 100644
--- a/web/components/headers/global-issues.tsx
+++ b/web/components/headers/global-issues.tsx
@@ -10,7 +10,8 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "components/issues";
 import { CreateUpdateWorkspaceViewModal } from "components/workspace";
 // ui
-import { PrimaryButton, Tooltip } from "components/ui";
+import { Tooltip } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { List, PlusIcon, Sheet } from "lucide-react";
 // types
@@ -148,10 +149,9 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
             </FiltersDropdown>
           </>
         )}
-        <PrimaryButton className="flex items-center gap-2" onClick={() => setCreateViewModal(true)}>
-          <PlusIcon className="h-4 w-4" />
+        <Button variant="primary" prependIcon={<PlusIcon />} onClick={() => setCreateViewModal(true)}>
           New View
-        </PrimaryButton>
+        </Button>
       </div>
     </>
   );
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/global-views-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/global-views-root.tsx
index 9c5ba1db108..283fac906ce 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/global-views-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/global-views-root.tsx
@@ -7,7 +7,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { AppliedFiltersList } from "components/issues";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // helpers
 import { areFiltersDifferent } from "helpers/filter.helper";
 // types
@@ -93,9 +93,9 @@ export const GlobalViewsAppliedFiltersRoot = observer(() => {
         projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
       />
       {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data.filters ?? {}) && (
-        <PrimaryButton className="whitespace-nowrap" onClick={handleUpdateView}>
+        <Button variant="primary" onClick={handleUpdateView}>
           Update view
-        </PrimaryButton>
+        </Button>
       )}
     </div>
   );
diff --git a/web/components/ui/buttons/danger-button.tsx b/web/components/ui/buttons/danger-button.tsx
deleted file mode 100644
index 3adb7012b1c..00000000000
--- a/web/components/ui/buttons/danger-button.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-// 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/web/components/ui/buttons/index.ts b/web/components/ui/buttons/index.ts
deleted file mode 100644
index 0ce5c556a80..00000000000
--- a/web/components/ui/buttons/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./danger-button";
-export * from "./primary-button";
-export * from "./secondary-button";
diff --git a/web/components/ui/buttons/primary-button.tsx b/web/components/ui/buttons/primary-button.tsx
deleted file mode 100644
index 8817679b42d..00000000000
--- a/web/components/ui/buttons/primary-button.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// 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-custom-primary 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 opacity-70 hover:opacity-70" : ""} ${
-      outline
-        ? "bg-transparent text-custom-primary hover:bg-custom-primary hover:text-white"
-        : "text-white bg-custom-primary hover:border-opacity-90 hover:bg-opacity-90"
-    }  ${loading ? "cursor-wait" : ""}`}
-    onClick={onClick}
-    disabled={disabled || loading}
-  >
-    {children}
-  </button>
-);
diff --git a/web/components/ui/buttons/secondary-button.tsx b/web/components/ui/buttons/secondary-button.tsx
deleted file mode 100644
index a642dd65ffc..00000000000
--- a/web/components/ui/buttons/secondary-button.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// 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-custom-border-200 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-custom-border-200 bg-custom-background-90" : ""} ${
-      outline
-        ? "bg-transparent hover:bg-custom-background-80"
-        : "bg-custom-background-100 hover:border-opacity-70 hover:bg-opacity-70"
-    } ${loading ? "cursor-wait" : ""}`}
-    onClick={onClick}
-    disabled={disabled || loading}
-  >
-    {children}
-  </button>
-);
diff --git a/web/components/ui/buttons/type.d.ts b/web/components/ui/buttons/type.d.ts
deleted file mode 100644
index b227887ef6e..00000000000
--- a/web/components/ui/buttons/type.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export type ButtonProps = {
-  children: React.ReactNode;
-  className?: string;
-  onClick?: (e: any) => void;
-  type?: "button" | "submit" | "reset";
-  disabled?: boolean;
-  loading?: boolean;
-  size?: "sm" | "md" | "lg";
-  outline?: boolean;
-};
diff --git a/web/components/ui/index.ts b/web/components/ui/index.ts
index 3f981553354..137f15a5885 100644
--- a/web/components/ui/index.ts
+++ b/web/components/ui/index.ts
@@ -1,4 +1,3 @@
-export * from "./buttons";
 export * from "./dropdowns";
 export * from "./graphs";
 export * from "./input";

From 172f6242a7666de19d71e178bdaf1a76246be68d Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 11 Oct 2023 15:11:59 +0530
Subject: [PATCH 11/15] chore: code refactor

---
 web/components/ui/circular-progress.tsx       | 39 ---------
 web/components/ui/index.ts                    |  3 -
 web/components/ui/input/index.tsx             | 52 ------------
 web/components/ui/input/types.d.ts            | 15 ----
 web/components/ui/text-area/index.tsx         | 85 -------------------
 web/components/ui/text-area/types.d.ts        | 13 ---
 .../[workspaceSlug]/workspace-views/index.tsx |  3 +-
 7 files changed, 1 insertion(+), 209 deletions(-)
 delete mode 100644 web/components/ui/circular-progress.tsx
 delete mode 100644 web/components/ui/input/index.tsx
 delete mode 100644 web/components/ui/input/types.d.ts
 delete mode 100644 web/components/ui/text-area/index.tsx
 delete mode 100644 web/components/ui/text-area/types.d.ts

diff --git a/web/components/ui/circular-progress.tsx b/web/components/ui/circular-progress.tsx
deleted file mode 100644
index af808ee8a7e..00000000000
--- a/web/components/ui/circular-progress.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-export const CircularProgress = ({ progress }: { progress: number }) => {
-  const [circumference, setCircumference] = useState(0);
-
-  useEffect(() => {
-    const radius = 40;
-    const calcCircumference = 2 * Math.PI * radius;
-    setCircumference(calcCircumference);
-  }, []);
-
-  const progressAngle = (progress / 100) * 360 >= 360 ? 359.9 : (progress / 100) * 360;
-  const progressX = 50 + Math.cos((progressAngle - 90) * (Math.PI / 180)) * 40;
-  const progressY = 50 + Math.sin((progressAngle - 90) * (Math.PI / 180)) * 40;
-
-  return (
-    <div className="relative h-5 w-5">
-      <svg className="absolute top-0 left-0" viewBox="0 0 100 100">
-        <circle
-          className="stroke-current"
-          cx="50"
-          cy="50"
-          r="40"
-          strokeWidth="12"
-          fill="none"
-          strokeDasharray={`${circumference} ${circumference}`}
-        />
-        <path
-          className="fill-current"
-          d={`M50 10
-            A40 40 0 ${progress > 50 ? 1 : 0} 1 ${progressX} ${progressY}
-            L50 50 Z`}
-          strokeWidth="12"
-          strokeLinecap="round"
-        />
-      </svg>
-    </div>
-  );
-};
diff --git a/web/components/ui/index.ts b/web/components/ui/index.ts
index 137f15a5885..5857d44982e 100644
--- a/web/components/ui/index.ts
+++ b/web/components/ui/index.ts
@@ -1,7 +1,5 @@
 export * from "./dropdowns";
 export * from "./graphs";
-export * from "./input";
-export * from "./text-area";
 export * from "./avatar";
 export * from "./date";
 export * from "./datepicker";
@@ -21,5 +19,4 @@ export * from "./markdown-to-component";
 export * from "./product-updates-modal";
 export * from "./integration-and-import-export-banner";
 export * from "./range-datepicker";
-export * from "./circular-progress";
 export * from "./profile-empty-state";
diff --git a/web/components/ui/input/index.tsx b/web/components/ui/input/index.tsx
deleted file mode 100644
index 867712a2907..00000000000
--- a/web/components/ui/input/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-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-custom-text-200 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 placeholder-custom-text-400 ${
-        mode === "primary"
-          ? "rounded-md border border-custom-border-200"
-          : mode === "transparent"
-          ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
-          : mode === "trueTransparent"
-          ? "rounded border-none bg-transparent ring-0"
-          : ""
-      } ${error ? "border-red-500" : ""} ${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/web/components/ui/input/types.d.ts b/web/components/ui/input/types.d.ts
deleted file mode 100644
index 77a48b4b9a5..00000000000
--- a/web/components/ui/input/types.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-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/web/components/ui/text-area/index.tsx b/web/components/ui/text-area/index.tsx
deleted file mode 100644
index a962281a41d..00000000000
--- a/web/components/ui/text-area/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-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,
-  noPadding = false,
-  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-custom-text-200">
-          {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 placeholder-custom-text-400 ${
-          noPadding ? "" : "px-3 py-2"
-        } outline-none ${
-          mode === "primary"
-            ? "rounded-md border border-custom-border-200"
-            : 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/web/components/ui/text-area/types.d.ts b/web/components/ui/text-area/types.d.ts
deleted file mode 100644
index 27d031dee84..00000000000
--- a/web/components/ui/text-area/types.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-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>>;
-  noPadding?: boolean;
-}
diff --git a/web/pages/[workspaceSlug]/workspace-views/index.tsx b/web/pages/[workspaceSlug]/workspace-views/index.tsx
index 3d9285b7688..2a9d6b40a66 100644
--- a/web/pages/[workspaceSlug]/workspace-views/index.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/index.tsx
@@ -10,7 +10,7 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 import { GlobalDefaultViewListItem, GlobalViewsList } from "components/workspace";
 import { GlobalIssuesHeader } from "components/headers";
 // ui
-import { Input } from "components/ui";
+import { Input } from "@plane/ui";
 // icons
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 // types
@@ -51,7 +51,6 @@ const WorkspaceViews: NextPage = () => {
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               placeholder="Search"
-              mode="trueTransparent"
             />
           </div>
         </div>

From 0b5faf2f940c1dd051ed2aad1edcbf9bf1c4075f Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 11 Oct 2023 15:53:26 +0530
Subject: [PATCH 12/15] chore: swap toggle switch component with plane/ui
 package

---
 packages/ui/dist/index.d.ts                   | 12 ++-
 packages/ui/dist/index.js                     | 73 ++++++++++++-------
 packages/ui/dist/index.mjs                    | 66 +++++++++++------
 packages/ui/package.json                      |  1 +
 packages/ui/src/button/index.tsx              |  1 +
 .../ui/src/button}/toggle-switch.tsx          | 12 ++-
 .../automation/auto-archive-automation.tsx    | 21 ++----
 .../automation/auto-close-automation.tsx      |  9 +--
 web/components/command-palette/command-k.tsx  |  4 +-
 .../core/filters/issues-view-filter.tsx       |  3 +-
 .../modals/existing-issues-list-modal.tsx     |  4 +-
 .../views/calendar-view/calendar-header.tsx   | 40 +++-------
 .../integration/github/import-data.tsx        |  4 +-
 .../integration/jira/import-users.tsx         |  4 +-
 .../integration/jira/jira-project-detail.tsx  |  3 +-
 web/components/issues/draft-issue-form.tsx    |  4 +-
 web/components/issues/form.tsx                |  4 +-
 .../calendar/dropdowns/options-dropdown.tsx   |  2 +-
 .../issues/parent-issues-list-modal.tsx       |  4 +-
 .../profile/profile-issues-view-options.tsx   |  3 +-
 .../project/publish-project/modal.tsx         |  4 +-
 web/components/ui/index.ts                    |  1 -
 .../projects/[projectId]/pages/[pageId].tsx   |  4 +-
 .../[projectId]/settings/features.tsx         |  2 +-
 yarn.lock                                     |  2 +-
 25 files changed, 158 insertions(+), 129 deletions(-)
 rename {web/components/ui => packages/ui/src/button}/toggle-switch.tsx (87%)

diff --git a/packages/ui/dist/index.d.ts b/packages/ui/dist/index.d.ts
index 3664cacd4cc..f368acbb1e2 100644
--- a/packages/ui/dist/index.d.ts
+++ b/packages/ui/dist/index.d.ts
@@ -15,6 +15,16 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
+interface IToggleSwitchProps {
+    value: boolean;
+    onChange: (value: boolean) => void;
+    label?: string;
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    className?: string;
+}
+declare const ToggleSwitch: React.FC<IToggleSwitchProps>;
+
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     mode?: "primary" | "transparent" | "true-transparent";
     inputSize?: "sm" | "md";
@@ -51,4 +61,4 @@ declare type ItemProps = {
     width?: string;
 };
 
-export { Button, ButtonProps, Input, InputProps, Loader, RadialProgressBar, Spinner, TextArea, TextAreaProps };
+export { Button, ButtonProps, Input, InputProps, Loader, RadialProgressBar, Spinner, TextArea, TextAreaProps, ToggleSwitch };
diff --git a/packages/ui/dist/index.js b/packages/ui/dist/index.js
index 33357be1def..a334583a6ce 100644
--- a/packages/ui/dist/index.js
+++ b/packages/ui/dist/index.js
@@ -31,7 +31,8 @@ __export(src_exports, {
   Loader: () => Loader,
   RadialProgressBar: () => RadialProgressBar,
   Spinner: () => Spinner,
-  TextArea: () => TextArea
+  TextArea: () => TextArea,
+  ToggleSwitch: () => ToggleSwitch
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -157,9 +158,28 @@ var Button = React.forwardRef(
 );
 Button.displayName = "plane-ui-button";
 
-// src/form-fields/input.tsx
+// src/button/toggle-switch.tsx
 var React2 = __toESM(require("react"));
-var Input = React2.forwardRef((props, ref) => {
+var import_react = require("@headlessui/react");
+var ToggleSwitch = (props) => {
+  const { value, onChange, label, size = "sm", disabled, className } = props;
+  return /* @__PURE__ */ React2.createElement(import_react.Switch, {
+    checked: value,
+    disabled,
+    onChange,
+    className: `relative flex-shrink-0 inline-flex ${size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10"} flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${value ? "bg-custom-primary-100" : "bg-gray-700"} ${className || ""} ${disabled ? "cursor-not-allowed" : ""}`
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, label), /* @__PURE__ */ React2.createElement("span", {
+    "aria-hidden": "true",
+    className: `self-center inline-block ${size === "sm" ? "h-2 w-2" : size === "md" ? "h-3 w-3" : "h-4 w-4"} transform rounded-full shadow ring-0 transition duration-200 ease-in-out ${value ? (size === "sm" ? "translate-x-3" : size === "md" ? "translate-x-4" : "translate-x-5") + " bg-white" : "translate-x-0.5 bg-custom-background-90"} ${disabled ? "cursor-not-allowed" : ""}`
+  }));
+};
+ToggleSwitch.displayName = "plane-ui-toggle-switch";
+
+// src/form-fields/input.tsx
+var React3 = __toESM(require("react"));
+var Input = React3.forwardRef((props, ref) => {
   const {
     id,
     type,
@@ -170,7 +190,7 @@ var Input = React2.forwardRef((props, ref) => {
     className = "",
     ...rest
   } = props;
-  return /* @__PURE__ */ React2.createElement("input", {
+  return /* @__PURE__ */ React3.createElement("input", {
     id,
     ref,
     type,
@@ -182,9 +202,9 @@ var Input = React2.forwardRef((props, ref) => {
 Input.displayName = "form-input-field";
 
 // src/form-fields/textarea.tsx
-var React3 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var useAutoSizeTextArea = (textAreaRef, value) => {
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (textAreaRef) {
       textAreaRef.style.height = "0px";
       const scrollHeight = textAreaRef.scrollHeight;
@@ -192,7 +212,7 @@ var useAutoSizeTextArea = (textAreaRef, value) => {
     }
   }, [textAreaRef, value]);
 };
-var TextArea = React3.forwardRef(
+var TextArea = React4.forwardRef(
   (props, ref) => {
     const {
       id,
@@ -205,9 +225,9 @@ var TextArea = React3.forwardRef(
       className = "",
       ...rest
     } = props;
-    const textAreaRef = React3.useRef(ref);
+    const textAreaRef = React4.useRef(ref);
     ref && useAutoSizeTextArea(textAreaRef == null ? void 0 : textAreaRef.current, value);
-    return /* @__PURE__ */ React3.createElement("textarea", {
+    return /* @__PURE__ */ React4.createElement("textarea", {
       id,
       name,
       ref: textAreaRef,
@@ -221,22 +241,22 @@ var TextArea = React3.forwardRef(
 );
 
 // src/progress/radial-progress.tsx
-var import_react = __toESM(require("react"));
+var import_react2 = __toESM(require("react"));
 var RadialProgressBar = (props) => {
   const { progress } = props;
-  const [circumference, setCircumference] = (0, import_react.useState)(0);
-  (0, import_react.useEffect)(() => {
+  const [circumference, setCircumference] = (0, import_react2.useState)(0);
+  (0, import_react2.useEffect)(() => {
     const radius = 40;
     const circumference2 = 2 * Math.PI * radius;
     setCircumference(circumference2);
   }, []);
   const progressOffset = (100 - progress) / 100 * circumference;
-  return /* @__PURE__ */ import_react.default.createElement("div", {
+  return /* @__PURE__ */ import_react2.default.createElement("div", {
     className: "relative h-4 w-4"
-  }, /* @__PURE__ */ import_react.default.createElement("svg", {
+  }, /* @__PURE__ */ import_react2.default.createElement("svg", {
     className: "absolute top-0 left-0",
     viewBox: "0 0 100 100"
-  }, /* @__PURE__ */ import_react.default.createElement("circle", {
+  }, /* @__PURE__ */ import_react2.default.createElement("circle", {
     className: "stroke-current opacity-10",
     cx: "50",
     cy: "50",
@@ -244,7 +264,7 @@ var RadialProgressBar = (props) => {
     strokeWidth: "12",
     fill: "none",
     strokeDasharray: `${circumference} ${circumference}`
-  }), /* @__PURE__ */ import_react.default.createElement("circle", {
+  }), /* @__PURE__ */ import_react2.default.createElement("circle", {
     className: `stroke-current`,
     cx: "50",
     cy: "50",
@@ -258,32 +278,32 @@ var RadialProgressBar = (props) => {
 };
 
 // src/spinners/circular-spinner.tsx
-var React5 = __toESM(require("react"));
-var Spinner = () => /* @__PURE__ */ React5.createElement("div", {
+var React6 = __toESM(require("react"));
+var Spinner = () => /* @__PURE__ */ React6.createElement("div", {
   role: "status"
-}, /* @__PURE__ */ React5.createElement("svg", {
+}, /* @__PURE__ */ React6.createElement("svg", {
   "aria-hidden": "true",
   className: "mr-2 h-8 w-8 animate-spin fill-blue-600 text-custom-text-200",
   viewBox: "0 0 100 101",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, /* @__PURE__ */ React5.createElement("path", {
+}, /* @__PURE__ */ React6.createElement("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"
-}), /* @__PURE__ */ React5.createElement("path", {
+}), /* @__PURE__ */ React6.createElement("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"
-})), /* @__PURE__ */ React5.createElement("span", {
+})), /* @__PURE__ */ React6.createElement("span", {
   className: "sr-only"
 }, "Loading..."));
 
 // src/loader.tsx
-var import_react2 = __toESM(require("react"));
-var Loader = ({ children, className = "" }) => /* @__PURE__ */ import_react2.default.createElement("div", {
+var import_react3 = __toESM(require("react"));
+var Loader = ({ children, className = "" }) => /* @__PURE__ */ import_react3.default.createElement("div", {
   className: `${className} animate-pulse`,
   role: "status"
 }, children);
-var Item = ({ height = "auto", width = "auto" }) => /* @__PURE__ */ import_react2.default.createElement("div", {
+var Item = ({ height = "auto", width = "auto" }) => /* @__PURE__ */ import_react3.default.createElement("div", {
   className: "rounded-md bg-custom-background-80",
   style: { height, width }
 });
@@ -296,5 +316,6 @@ Loader.displayName = "plane-ui-loader";
   Loader,
   RadialProgressBar,
   Spinner,
-  TextArea
+  TextArea,
+  ToggleSwitch
 });
diff --git a/packages/ui/dist/index.mjs b/packages/ui/dist/index.mjs
index 94edef0d82f..d185a5fa8fc 100644
--- a/packages/ui/dist/index.mjs
+++ b/packages/ui/dist/index.mjs
@@ -120,9 +120,28 @@ var Button = React.forwardRef(
 );
 Button.displayName = "plane-ui-button";
 
-// src/form-fields/input.tsx
+// src/button/toggle-switch.tsx
 import * as React2 from "react";
-var Input = React2.forwardRef((props, ref) => {
+import { Switch } from "@headlessui/react";
+var ToggleSwitch = (props) => {
+  const { value, onChange, label, size = "sm", disabled, className } = props;
+  return /* @__PURE__ */ React2.createElement(Switch, {
+    checked: value,
+    disabled,
+    onChange,
+    className: `relative flex-shrink-0 inline-flex ${size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10"} flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${value ? "bg-custom-primary-100" : "bg-gray-700"} ${className || ""} ${disabled ? "cursor-not-allowed" : ""}`
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, label), /* @__PURE__ */ React2.createElement("span", {
+    "aria-hidden": "true",
+    className: `self-center inline-block ${size === "sm" ? "h-2 w-2" : size === "md" ? "h-3 w-3" : "h-4 w-4"} transform rounded-full shadow ring-0 transition duration-200 ease-in-out ${value ? (size === "sm" ? "translate-x-3" : size === "md" ? "translate-x-4" : "translate-x-5") + " bg-white" : "translate-x-0.5 bg-custom-background-90"} ${disabled ? "cursor-not-allowed" : ""}`
+  }));
+};
+ToggleSwitch.displayName = "plane-ui-toggle-switch";
+
+// src/form-fields/input.tsx
+import * as React3 from "react";
+var Input = React3.forwardRef((props, ref) => {
   const {
     id,
     type,
@@ -133,7 +152,7 @@ var Input = React2.forwardRef((props, ref) => {
     className = "",
     ...rest
   } = props;
-  return /* @__PURE__ */ React2.createElement("input", {
+  return /* @__PURE__ */ React3.createElement("input", {
     id,
     ref,
     type,
@@ -145,9 +164,9 @@ var Input = React2.forwardRef((props, ref) => {
 Input.displayName = "form-input-field";
 
 // src/form-fields/textarea.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 var useAutoSizeTextArea = (textAreaRef, value) => {
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (textAreaRef) {
       textAreaRef.style.height = "0px";
       const scrollHeight = textAreaRef.scrollHeight;
@@ -155,7 +174,7 @@ var useAutoSizeTextArea = (textAreaRef, value) => {
     }
   }, [textAreaRef, value]);
 };
-var TextArea = React3.forwardRef(
+var TextArea = React4.forwardRef(
   (props, ref) => {
     const {
       id,
@@ -168,9 +187,9 @@ var TextArea = React3.forwardRef(
       className = "",
       ...rest
     } = props;
-    const textAreaRef = React3.useRef(ref);
+    const textAreaRef = React4.useRef(ref);
     ref && useAutoSizeTextArea(textAreaRef == null ? void 0 : textAreaRef.current, value);
-    return /* @__PURE__ */ React3.createElement("textarea", {
+    return /* @__PURE__ */ React4.createElement("textarea", {
       id,
       name,
       ref: textAreaRef,
@@ -184,7 +203,7 @@ var TextArea = React3.forwardRef(
 );
 
 // src/progress/radial-progress.tsx
-import React4, { useState, useEffect as useEffect2 } from "react";
+import React5, { useState, useEffect as useEffect2 } from "react";
 var RadialProgressBar = (props) => {
   const { progress } = props;
   const [circumference, setCircumference] = useState(0);
@@ -194,12 +213,12 @@ var RadialProgressBar = (props) => {
     setCircumference(circumference2);
   }, []);
   const progressOffset = (100 - progress) / 100 * circumference;
-  return /* @__PURE__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React5.createElement("div", {
     className: "relative h-4 w-4"
-  }, /* @__PURE__ */ React4.createElement("svg", {
+  }, /* @__PURE__ */ React5.createElement("svg", {
     className: "absolute top-0 left-0",
     viewBox: "0 0 100 100"
-  }, /* @__PURE__ */ React4.createElement("circle", {
+  }, /* @__PURE__ */ React5.createElement("circle", {
     className: "stroke-current opacity-10",
     cx: "50",
     cy: "50",
@@ -207,7 +226,7 @@ var RadialProgressBar = (props) => {
     strokeWidth: "12",
     fill: "none",
     strokeDasharray: `${circumference} ${circumference}`
-  }), /* @__PURE__ */ React4.createElement("circle", {
+  }), /* @__PURE__ */ React5.createElement("circle", {
     className: `stroke-current`,
     cx: "50",
     cy: "50",
@@ -221,32 +240,32 @@ var RadialProgressBar = (props) => {
 };
 
 // src/spinners/circular-spinner.tsx
-import * as React5 from "react";
-var Spinner = () => /* @__PURE__ */ React5.createElement("div", {
+import * as React6 from "react";
+var Spinner = () => /* @__PURE__ */ React6.createElement("div", {
   role: "status"
-}, /* @__PURE__ */ React5.createElement("svg", {
+}, /* @__PURE__ */ React6.createElement("svg", {
   "aria-hidden": "true",
   className: "mr-2 h-8 w-8 animate-spin fill-blue-600 text-custom-text-200",
   viewBox: "0 0 100 101",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, /* @__PURE__ */ React5.createElement("path", {
+}, /* @__PURE__ */ React6.createElement("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"
-}), /* @__PURE__ */ React5.createElement("path", {
+}), /* @__PURE__ */ React6.createElement("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"
-})), /* @__PURE__ */ React5.createElement("span", {
+})), /* @__PURE__ */ React6.createElement("span", {
   className: "sr-only"
 }, "Loading..."));
 
 // src/loader.tsx
-import React6 from "react";
-var Loader = ({ children, className = "" }) => /* @__PURE__ */ React6.createElement("div", {
+import React7 from "react";
+var Loader = ({ children, className = "" }) => /* @__PURE__ */ React7.createElement("div", {
   className: `${className} animate-pulse`,
   role: "status"
 }, children);
-var Item = ({ height = "auto", width = "auto" }) => /* @__PURE__ */ React6.createElement("div", {
+var Item = ({ height = "auto", width = "auto" }) => /* @__PURE__ */ React7.createElement("div", {
   className: "rounded-md bg-custom-background-80",
   style: { height, width }
 });
@@ -258,5 +277,6 @@ export {
   Loader,
   RadialProgressBar,
   Spinner,
-  TextArea
+  TextArea,
+  ToggleSwitch
 };
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 667ff24e253..9385a26c705 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -31,6 +31,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.17",
     "clsx": "^2.0.0"
   }
 }
diff --git a/packages/ui/src/button/index.tsx b/packages/ui/src/button/index.tsx
index 98d55acde68..f1a2d03d4bd 100644
--- a/packages/ui/src/button/index.tsx
+++ b/packages/ui/src/button/index.tsx
@@ -1 +1,2 @@
 export * from "./button";
+export * from "./toggle-switch";
diff --git a/web/components/ui/toggle-switch.tsx b/packages/ui/src/button/toggle-switch.tsx
similarity index 87%
rename from web/components/ui/toggle-switch.tsx
rename to packages/ui/src/button/toggle-switch.tsx
index 5ad9377de11..9888dd205f9 100644
--- a/web/components/ui/toggle-switch.tsx
+++ b/packages/ui/src/button/toggle-switch.tsx
@@ -1,15 +1,17 @@
+import * as React from "react";
+
 import { Switch } from "@headlessui/react";
 
-type Props = {
+interface IToggleSwitchProps {
   value: boolean;
   onChange: (value: boolean) => void;
   label?: string;
   size?: "sm" | "md" | "lg";
   disabled?: boolean;
   className?: string;
-};
+}
 
-export const ToggleSwitch: React.FC<Props> = (props) => {
+const ToggleSwitch: React.FC<IToggleSwitchProps> = (props) => {
   const { value, onChange, label, size = "sm", disabled, className } = props;
 
   return (
@@ -41,3 +43,7 @@ export const ToggleSwitch: React.FC<Props> = (props) => {
     </Switch>
   );
 };
+
+ToggleSwitch.displayName = "plane-ui-toggle-switch";
+
+export { ToggleSwitch };
diff --git a/web/components/automation/auto-archive-automation.tsx b/web/components/automation/auto-archive-automation.tsx
index d0c9a1be6bf..563381e695e 100644
--- a/web/components/automation/auto-archive-automation.tsx
+++ b/web/components/automation/auto-archive-automation.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from "react";
 
 // component
-import { CustomSelect, ToggleSwitch } from "components/ui";
+import { CustomSelect } from "components/ui";
+import { ToggleSwitch } from "@plane/ui";
 import { SelectMonthModal } from "components/automation";
 // icon
 import { ArchiveRestore } from "lucide-react";
@@ -16,11 +17,7 @@ type Props = {
   disabled?: boolean;
 };
 
-export const AutoArchiveAutomation: React.FC<Props> = ({
-  projectDetails,
-  handleChange,
-  disabled = false,
-}) => {
+export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleChange, disabled = false }) => {
   const [monthModal, setmonthModal] = useState(false);
 
   const initialValues: Partial<IProject> = { archive_in: 1 };
@@ -49,9 +46,7 @@ export const AutoArchiveAutomation: React.FC<Props> = ({
           <ToggleSwitch
             value={projectDetails?.archive_in !== 0}
             onChange={() =>
-              projectDetails?.archive_in === 0
-                ? handleChange({ archive_in: 1 })
-                : handleChange({ archive_in: 0 })
+              projectDetails?.archive_in === 0 ? handleChange({ archive_in: 1 }) : handleChange({ archive_in: 0 })
             }
             size="sm"
             disabled={disabled}
@@ -61,15 +56,11 @@ export const AutoArchiveAutomation: React.FC<Props> = ({
         {projectDetails?.archive_in !== 0 && (
           <div className="ml-12">
             <div className="flex items-center justify-between rounded px-5 py-4 bg-custom-background-90 border border-custom-border-200 gap-2 w-full">
-              <div className="w-1/2 text-sm font-medium">
-                Auto-archive issues that are closed for
-              </div>
+              <div className="w-1/2 text-sm font-medium">Auto-archive issues that are closed for</div>
               <div className="w-1/2">
                 <CustomSelect
                   value={projectDetails?.archive_in}
-                  label={`${projectDetails?.archive_in} ${
-                    projectDetails?.archive_in === 1 ? "Month" : "Months"
-                  }`}
+                  label={`${projectDetails?.archive_in} ${projectDetails?.archive_in === 1 ? "Month" : "Months"}`}
                   onChange={(val: number) => {
                     handleChange({ archive_in: val });
                   }}
diff --git a/web/components/automation/auto-close-automation.tsx b/web/components/automation/auto-close-automation.tsx
index 664967d0faf..30beed9da50 100644
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@@ -5,8 +5,9 @@ import useSWR from "swr";
 import { useRouter } from "next/router";
 
 // component
-import { CustomSearchSelect, CustomSelect, Icon, ToggleSwitch } from "components/ui";
+import { CustomSearchSelect, CustomSelect, Icon } from "components/ui";
 import { SelectMonthModal } from "components/automation";
+import { ToggleSwitch } from "@plane/ui";
 // icons
 import { Squares2X2Icon } from "@heroicons/react/24/outline";
 import { StateGroupIcon } from "components/icons";
@@ -27,11 +28,7 @@ type Props = {
   disabled?: boolean;
 };
 
-export const AutoCloseAutomation: React.FC<Props> = ({
-  projectDetails,
-  handleChange,
-  disabled = false,
-}) => {
+export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleChange, disabled = false }) => {
   const [monthModal, setmonthModal] = useState(false);
 
   const router = useRouter();
diff --git a/web/components/command-palette/command-k.tsx b/web/components/command-palette/command-k.tsx
index 53cdca7d78c..04c42f8cf68 100644
--- a/web/components/command-palette/command-k.tsx
+++ b/web/components/command-palette/command-k.tsx
@@ -26,8 +26,8 @@ import {
   commandGroups,
 } from "components/command-palette";
 // ui
-import { Icon, ToggleSwitch, Tooltip } from "components/ui";
-import { Loader } from "@plane/ui";
+import { Icon, Tooltip } from "components/ui";
+import { Loader, ToggleSwitch } from "@plane/ui";
 // icons
 import { DiscordIcon, GithubIcon, SettingIcon } from "components/icons";
 import { InboxIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
diff --git a/web/components/core/filters/issues-view-filter.tsx b/web/components/core/filters/issues-view-filter.tsx
index 79fa9c98439..a190ebfda33 100644
--- a/web/components/core/filters/issues-view-filter.tsx
+++ b/web/components/core/filters/issues-view-filter.tsx
@@ -11,7 +11,8 @@ import useEstimateOption from "hooks/use-estimate-option";
 // components
 import { SelectFilters } from "components/views";
 // ui
-import { CustomMenu, ToggleSwitch, Tooltip } from "components/ui";
+import { CustomMenu, Tooltip } from "components/ui";
+import { ToggleSwitch } from "@plane/ui";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import {
diff --git a/web/components/core/modals/existing-issues-list-modal.tsx b/web/components/core/modals/existing-issues-list-modal.tsx
index 5b9a6c3c369..ea66eaa54f6 100644
--- a/web/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/components/core/modals/existing-issues-list-modal.tsx
@@ -13,8 +13,8 @@ import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
 import useDebounce from "hooks/use-debounce";
 // ui
-import { Button, Loader } from "@plane/ui";
-import { ToggleSwitch, Tooltip } from "components/ui";
+import { Button, Loader, ToggleSwitch } from "@plane/ui";
+import { Tooltip } from "components/ui";
 // icons
 import { LaunchOutlined } from "@mui/icons-material";
 import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
diff --git a/web/components/core/views/calendar-view/calendar-header.tsx b/web/components/core/views/calendar-view/calendar-header.tsx
index fd69ed44315..931bd3b49a8 100644
--- a/web/components/core/views/calendar-view/calendar-header.tsx
+++ b/web/components/core/views/calendar-view/calendar-header.tsx
@@ -3,17 +3,12 @@ import React from "react";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
 // ui
-import { CustomMenu, ToggleSwitch } from "components/ui";
+import { CustomMenu } from "components/ui";
+import { ToggleSwitch } from "@plane/ui";
 // icons
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
 // helpers
-import {
-  formatDate,
-  isSameMonth,
-  isSameYear,
-  updateDateWithMonth,
-  updateDateWithYear,
-} from "helpers/calendar.helper";
+import { formatDate, isSameMonth, isSameYear, updateDateWithMonth, updateDateWithYear } from "helpers/calendar.helper";
 // constants
 import { MONTHS_LIST, YEARS_LIST } from "constants/calendar";
 
@@ -24,12 +19,7 @@ type Props = {
   setShowWeekEnds: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-export const CalendarHeader: React.FC<Props> = ({
-  currentDate,
-  setCurrentDate,
-  showWeekEnds,
-  setShowWeekEnds,
-}) => (
+export const CalendarHeader: React.FC<Props> = ({ currentDate, setCurrentDate, showWeekEnds, setShowWeekEnds }) => (
   <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">
@@ -37,8 +27,7 @@ export const CalendarHeader: React.FC<Props> = ({
           <>
             <Popover.Button>
               <div className="flex items-center justify-center gap-2 text-2xl font-semibold text-custom-text-100">
-                <span>{formatDate(currentDate, "Month")}</span>{" "}
-                <span>{formatDate(currentDate, "yyyy")}</span>
+                <span>{formatDate(currentDate, "Month")}</span> <span>{formatDate(currentDate, "yyyy")}</span>
               </div>
             </Popover.Button>
 
@@ -69,13 +58,9 @@ export const CalendarHeader: React.FC<Props> = ({
                 <div className="grid grid-cols-4  border-t border-custom-border-200 px-2">
                   {MONTHS_LIST.map((month) => (
                     <button
-                      onClick={() =>
-                        setCurrentDate(updateDateWithMonth(`${month.value}`, currentDate))
-                      }
+                      onClick={() => setCurrentDate(updateDateWithMonth(`${month.value}`, currentDate))}
                       className={`px-2 py-2 text-xs text-custom-text-200 hover:font-medium hover:text-custom-text-100 ${
-                        isSameMonth(`${month.value}`, currentDate)
-                          ? "font-medium text-custom-text-100"
-                          : ""
+                        isSameMonth(`${month.value}`, currentDate) ? "font-medium text-custom-text-100" : ""
                       }`}
                     >
                       {month.label}
@@ -93,11 +78,8 @@ export const CalendarHeader: React.FC<Props> = ({
           className="cursor-pointer"
           onClick={() => {
             const previousMonthYear =
-              currentDate.getMonth() === 0
-                ? currentDate.getFullYear() - 1
-                : currentDate.getFullYear();
-            const previousMonthMonth =
-              currentDate.getMonth() === 0 ? 11 : currentDate.getMonth() - 1;
+              currentDate.getMonth() === 0 ? currentDate.getFullYear() - 1 : currentDate.getFullYear();
+            const previousMonthMonth = currentDate.getMonth() === 0 ? 11 : currentDate.getMonth() - 1;
 
             const previousMonthFirstDate = new Date(previousMonthYear, previousMonthMonth, 1);
 
@@ -110,9 +92,7 @@ export const CalendarHeader: React.FC<Props> = ({
           className="cursor-pointer"
           onClick={() => {
             const nextMonthYear =
-              currentDate.getMonth() === 11
-                ? currentDate.getFullYear() + 1
-                : currentDate.getFullYear();
+              currentDate.getMonth() === 11 ? currentDate.getFullYear() + 1 : currentDate.getFullYear();
             const nextMonthMonth = (currentDate.getMonth() + 1) % 12;
 
             const nextMonthFirstDate = new Date(nextMonthYear, nextMonthMonth, 1);
diff --git a/web/components/integration/github/import-data.tsx b/web/components/integration/github/import-data.tsx
index 380bcfa5248..32f76527765 100644
--- a/web/components/integration/github/import-data.tsx
+++ b/web/components/integration/github/import-data.tsx
@@ -7,8 +7,8 @@ import useProjects from "hooks/use-projects";
 // components
 import { SelectRepository, TFormValues, TIntegrationSteps } from "components/integration";
 // ui
-import { Button } from "@plane/ui";
-import { CustomSearchSelect, ToggleSwitch } from "components/ui";
+import { Button, ToggleSwitch } from "@plane/ui";
+import { CustomSearchSelect } from "components/ui";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
diff --git a/web/components/integration/jira/import-users.tsx b/web/components/integration/jira/import-users.tsx
index 2379be6dd6c..d062a9bf5c7 100644
--- a/web/components/integration/jira/import-users.tsx
+++ b/web/components/integration/jira/import-users.tsx
@@ -16,8 +16,8 @@ import { WORKSPACE_MEMBERS_WITH_EMAIL } from "constants/fetch-keys";
 import workspaceService from "services/workspace.service";
 
 // components
-import { ToggleSwitch, CustomSelect, CustomSearchSelect, Avatar } from "components/ui";
-import { Input } from "@plane/ui";
+import { CustomSelect, CustomSearchSelect, Avatar } from "components/ui";
+import { Input, ToggleSwitch } from "@plane/ui";
 
 import { IJiraImporterForm } from "types";
 
diff --git a/web/components/integration/jira/jira-project-detail.tsx b/web/components/integration/jira/jira-project-detail.tsx
index edd35231fbb..64a2e7e59cc 100644
--- a/web/components/integration/jira/jira-project-detail.tsx
+++ b/web/components/integration/jira/jira-project-detail.tsx
@@ -18,7 +18,8 @@ import { JIRA_IMPORTER_DETAIL } from "constants/fetch-keys";
 import { IJiraImporterForm, IJiraMetadata } from "types";
 
 // components
-import { Spinner, ToggleSwitch } from "components/ui";
+import { Spinner } from "components/ui";
+import { ToggleSwitch } from "@plane/ui";
 
 import type { IJiraIntegrationData, TJiraIntegrationSteps } from ".";
 
diff --git a/web/components/issues/draft-issue-form.tsx b/web/components/issues/draft-issue-form.tsx
index 5c384c2b5f0..7b16117ccbc 100644
--- a/web/components/issues/draft-issue-form.tsx
+++ b/web/components/issues/draft-issue-form.tsx
@@ -24,8 +24,8 @@ import {
 import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
 // ui
-import { CustomMenu, ToggleSwitch } from "components/ui";
-import { Button, Input } from "@plane/ui";
+import { CustomMenu } from "components/ui";
+import { Button, Input, ToggleSwitch } from "@plane/ui";
 import { TipTapEditor } from "components/tiptap";
 // icons
 import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx
index f073f1e4b0a..3931ba58c3a 100644
--- a/web/components/issues/form.tsx
+++ b/web/components/issues/form.tsx
@@ -23,8 +23,8 @@ import {
 import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
 // ui
-import { CustomMenu, ToggleSwitch } from "components/ui";
-import { Button, Input } from "@plane/ui";
+import { CustomMenu } from "components/ui";
+import { Button, Input, ToggleSwitch } from "@plane/ui";
 import { TipTapEditor } from "components/tiptap";
 // icons
 import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
diff --git a/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx b/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
index fe14e32f63c..c02be508411 100644
--- a/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
+++ b/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
@@ -6,7 +6,7 @@ import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // ui
-import { ToggleSwitch } from "components/ui";
+import { ToggleSwitch } from "@plane/ui";
 // icons
 import { Check, ChevronUp } from "lucide-react";
 // types
diff --git a/web/components/issues/parent-issues-list-modal.tsx b/web/components/issues/parent-issues-list-modal.tsx
index c98ee8e14d9..8c74439a6f0 100644
--- a/web/components/issues/parent-issues-list-modal.tsx
+++ b/web/components/issues/parent-issues-list-modal.tsx
@@ -11,8 +11,8 @@ import useDebounce from "hooks/use-debounce";
 // components
 import { LayerDiagonalIcon } from "components/icons";
 // ui
-import { ToggleSwitch, Tooltip } from "components/ui";
-import { Loader } from "@plane/ui";
+import { Tooltip } from "components/ui";
+import { Loader, ToggleSwitch } from "@plane/ui";
 // icons
 import { LaunchOutlined } from "@mui/icons-material";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
diff --git a/web/components/profile/profile-issues-view-options.tsx b/web/components/profile/profile-issues-view-options.tsx
index 2118c6eb955..56947a27464 100644
--- a/web/components/profile/profile-issues-view-options.tsx
+++ b/web/components/profile/profile-issues-view-options.tsx
@@ -10,7 +10,8 @@ import useEstimateOption from "hooks/use-estimate-option";
 // components
 import { MyIssuesSelectFilters } from "components/issues";
 // ui
-import { CustomMenu, ToggleSwitch, Tooltip } from "components/ui";
+import { CustomMenu, Tooltip } from "components/ui";
+import { ToggleSwitch } from "@plane/ui";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import { FormatListBulletedOutlined, GridViewOutlined } from "@mui/icons-material";
diff --git a/web/components/project/publish-project/modal.tsx b/web/components/project/publish-project/modal.tsx
index de5205bc9d9..7a16da91d0f 100644
--- a/web/components/project/publish-project/modal.tsx
+++ b/web/components/project/publish-project/modal.tsx
@@ -6,8 +6,8 @@ import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // ui components
-import { Button, Loader } from "@plane/ui";
-import { ToggleSwitch, Icon } from "components/ui";
+import { Button, Loader, ToggleSwitch } from "@plane/ui";
+import { Icon } from "components/ui";
 import { CustomPopover } from "./popover";
 // mobx react lite
 import { observer } from "mobx-react-lite";
diff --git a/web/components/ui/index.ts b/web/components/ui/index.ts
index 5857d44982e..6e4a761b92d 100644
--- a/web/components/ui/index.ts
+++ b/web/components/ui/index.ts
@@ -14,7 +14,6 @@ export * from "./multi-level-select";
 export * from "./progress-bar";
 export * from "./spinner";
 export * from "./tooltip";
-export * from "./toggle-switch";
 export * from "./markdown-to-component";
 export * from "./product-updates-modal";
 export * from "./integration-and-import-export-banner";
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index 56b0fa27130..3e4fb3c33fb 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -28,8 +28,8 @@ import { CreateLabelModal } from "components/labels";
 import { CreateBlock } from "components/pages/create-block";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import { CustomSearchSelect, EmptyState, ToggleSwitch, Tooltip } from "components/ui";
-import { TextArea, Loader } from "@plane/ui";
+import { CustomSearchSelect, EmptyState, Tooltip } from "components/ui";
+import { TextArea, Loader, ToggleSwitch } from "@plane/ui";
 // images
 import emptyPage from "public/empty-state/page.svg";
 // icons
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index bd9e8222439..c9325d337a0 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -15,7 +15,7 @@ import useUserAuth from "hooks/use-user-auth";
 // components
 import { SettingsSidebar } from "components/project";
 // ui
-import { ToggleSwitch } from "components/ui";
+import { ToggleSwitch } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { ModuleIcon } from "components/icons";
diff --git a/yarn.lock b/yarn.lock
index 2f6c546da69..35cddaecdd4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1248,7 +1248,7 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.2.tgz#b7e9309ccce5a0a40ac482cb894f120dba2b357f"
   integrity sha512-ou3elfqG/hZsbmF4bxeJhPHIf3G2pm0ujc39hYEZrfVqt7Vk/Zji6CXc3W0pmYM8BW1g40U+akTl9DKZhFhInQ==
 
-"@headlessui/react@^1.7.13", "@headlessui/react@^1.7.3":
+"@headlessui/react@^1.7.13", "@headlessui/react@^1.7.17", "@headlessui/react@^1.7.3":
   version "1.7.17"
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.17.tgz#a0ec23af21b527c030967245fd99776aa7352bc6"
   integrity sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==

From d98cd4a60ff58296392dad521bd67aafc64d780e Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 11 Oct 2023 16:09:04 +0530
Subject: [PATCH 13/15] chore: swap spinner component with plane/ui package

---
 .../issue/change-issue-state.tsx              |  2 +-
 .../core/views/calendar-view/calendar.tsx     |  2 +-
 .../spreadsheet-view/spreadsheet-view.tsx     |  3 ++-
 .../integration/jira/jira-project-detail.tsx  |  3 +--
 .../issue-layouts/calendar/calendar.tsx       |  2 +-
 .../issue-layouts/spreadsheet/module-root.tsx |  3 ++-
 .../issues/issue-layouts/spreadsheet/root.tsx |  3 ++-
 .../issues/sidebar-select/cycle.tsx           |  3 ++-
 .../issues/sidebar-select/label.tsx           |  3 +--
 .../issues/sidebar-select/module.tsx          | 23 +++++--------------
 .../issues/sidebar-select/state.tsx           |  3 ++-
 web/components/ui/index.ts                    |  1 -
 web/components/ui/spinner.tsx                 | 23 -------------------
 web/components/web-view/sub-issues.tsx        |  2 +-
 .../project-authorization-wrapper.tsx         |  4 ++--
 .../user-authorization-wrapper.tsx            |  2 +-
 .../workspace-authorization-wrapper.tsx       |  3 +--
 web/layouts/auth-layout/user-wrapper.tsx      |  2 +-
 web/layouts/auth-layout/workspace-wrapper.tsx |  3 +--
 web/layouts/web-view-layout/index.tsx         |  2 +-
 web/pages/[workspaceSlug]/editor.tsx          |  2 +-
 .../[workspaceSlug]/me/profile/index.tsx      |  4 ++--
 .../me/profile/preferences.tsx                |  2 +-
 web/pages/[workspaceSlug]/settings/index.tsx  |  4 ++--
 web/pages/accounts/reset-password.tsx         |  3 +--
 web/pages/installations/[provider]/index.tsx  |  2 +-
 web/pages/m/[workspaceSlug]/editor.tsx        |  3 +--
 .../projects/[projectId]/issues/[issueId].tsx |  2 +-
 web/pages/onboarding.tsx                      | 15 ++++--------
 web/pages/workspace-member-invitation.tsx     | 17 +++-----------
 30 files changed, 46 insertions(+), 100 deletions(-)
 delete mode 100644 web/components/ui/spinner.tsx

diff --git a/web/components/command-palette/issue/change-issue-state.tsx b/web/components/command-palette/issue/change-issue-state.tsx
index 3cc16c2365b..50e396da31d 100644
--- a/web/components/command-palette/issue/change-issue-state.tsx
+++ b/web/components/command-palette/issue/change-issue-state.tsx
@@ -10,7 +10,7 @@ import { Command } from "cmdk";
 import issuesService from "services/issue.service";
 import stateService from "services/project_state.service";
 // ui
-import { Spinner } from "components/ui";
+import { Spinner } from "@plane/ui";
 // icons
 import { CheckIcon, StateGroupIcon } from "components/icons";
 // helpers
diff --git a/web/components/core/views/calendar-view/calendar.tsx b/web/components/core/views/calendar-view/calendar.tsx
index 553c7b723f0..6ded660bd61 100644
--- a/web/components/core/views/calendar-view/calendar.tsx
+++ b/web/components/core/views/calendar-view/calendar.tsx
@@ -8,7 +8,7 @@ import issuesService from "services/issue.service";
 import { SingleCalendarDate, CalendarHeader } from "components/core";
 import { IssuePeekOverview } from "components/issues";
 // ui
-import { Spinner } from "components/ui";
+import { Spinner } from "@plane/ui";
 // helpers
 import { renderDateFormat } from "helpers/date-time.helper";
 import { startOfWeek, lastDayOfWeek, eachDayOfInterval, weekDayInterval, formatDate } from "helpers/calendar.helper";
diff --git a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
index 152ede98d05..258026a4b71 100644
--- a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
@@ -18,8 +18,9 @@ import {
   SpreadsheetStateColumn,
   SpreadsheetUpdatedOnColumn,
 } from "components/core";
-import { CustomMenu, Icon, Spinner } from "components/ui";
+import { CustomMenu, Icon } from "components/ui";
 import { IssuePeekOverview } from "components/issues";
+import { Spinner } from "@plane/ui";
 // types
 import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueOrderByOptions } from "types";
 // icon
diff --git a/web/components/integration/jira/jira-project-detail.tsx b/web/components/integration/jira/jira-project-detail.tsx
index 64a2e7e59cc..e9609dfec1b 100644
--- a/web/components/integration/jira/jira-project-detail.tsx
+++ b/web/components/integration/jira/jira-project-detail.tsx
@@ -18,8 +18,7 @@ import { JIRA_IMPORTER_DETAIL } from "constants/fetch-keys";
 import { IJiraImporterForm, IJiraMetadata } from "types";
 
 // components
-import { Spinner } from "components/ui";
-import { ToggleSwitch } from "@plane/ui";
+import { ToggleSwitch, Spinner } from "@plane/ui";
 
 import type { IJiraIntegrationData, TJiraIntegrationSteps } from ".";
 
diff --git a/web/components/issues/issue-layouts/calendar/calendar.tsx b/web/components/issues/issue-layouts/calendar/calendar.tsx
index df359e97cf1..778feb57f52 100644
--- a/web/components/issues/issue-layouts/calendar/calendar.tsx
+++ b/web/components/issues/issue-layouts/calendar/calendar.tsx
@@ -5,7 +5,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { CalendarHeader, CalendarWeekDays, CalendarWeekHeader } from "components/issues";
 // ui
-import { Spinner } from "components/ui";
+import { Spinner } from "@plane/ui";
 // types
 import { ICalendarWeek } from "./types";
 import { IIssueGroupedStructure } from "store/issue";
diff --git a/web/components/issues/issue-layouts/spreadsheet/module-root.tsx b/web/components/issues/issue-layouts/spreadsheet/module-root.tsx
index 17abf5e33e9..fe291ac5dd3 100644
--- a/web/components/issues/issue-layouts/spreadsheet/module-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/module-root.tsx
@@ -11,7 +11,8 @@ import useProjectDetails from "hooks/use-project-details";
 import { SpreadsheetColumns, SpreadsheetIssues } from "components/core";
 import { IssuePeekOverview } from "components/issues";
 // ui
-import { CustomMenu, Spinner } from "components/ui";
+import { CustomMenu } from "components/ui";
+import { Spinner } from "@plane/ui";
 // icon
 import { PlusIcon } from "@heroicons/react/24/outline";
 // types
diff --git a/web/components/issues/issue-layouts/spreadsheet/root.tsx b/web/components/issues/issue-layouts/spreadsheet/root.tsx
index 4ceb15fc60f..0c2373dd8df 100644
--- a/web/components/issues/issue-layouts/spreadsheet/root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/root.tsx
@@ -11,7 +11,8 @@ import useProjectDetails from "hooks/use-project-details";
 import { SpreadsheetColumns, SpreadsheetIssues } from "components/core";
 import { IssuePeekOverview } from "components/issues";
 // ui
-import { CustomMenu, Spinner } from "components/ui";
+import { CustomMenu } from "components/ui";
+import { Spinner } from "@plane/ui";
 // icon
 import { PlusIcon } from "@heroicons/react/24/outline";
 // types
diff --git a/web/components/issues/sidebar-select/cycle.tsx b/web/components/issues/sidebar-select/cycle.tsx
index 3080c1af221..5e567256165 100644
--- a/web/components/issues/sidebar-select/cycle.tsx
+++ b/web/components/issues/sidebar-select/cycle.tsx
@@ -8,7 +8,8 @@ import useSWR, { mutate } from "swr";
 import issuesService from "services/issue.service";
 import cyclesService from "services/cycles.service";
 // ui
-import { Spinner, CustomSelect, Tooltip } from "components/ui";
+import { CustomSelect, Tooltip } from "components/ui";
+import { Spinner } from "@plane/ui";
 // helper
 import { truncateText } from "helpers/string.helper";
 // types
diff --git a/web/components/issues/sidebar-select/label.tsx b/web/components/issues/sidebar-select/label.tsx
index 0899c848793..4e373a1c097 100644
--- a/web/components/issues/sidebar-select/label.tsx
+++ b/web/components/issues/sidebar-select/label.tsx
@@ -15,8 +15,7 @@ import issuesService from "services/issue.service";
 // hooks
 import useUser from "hooks/use-user";
 // ui
-import { Spinner } from "components/ui";
-import { Input } from "@plane/ui";
+import { Input, Spinner } from "@plane/ui";
 // icons
 import { PlusIcon, RectangleGroupIcon, TagIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
diff --git a/web/components/issues/sidebar-select/module.tsx b/web/components/issues/sidebar-select/module.tsx
index c9599bdf467..a2f0e708d19 100644
--- a/web/components/issues/sidebar-select/module.tsx
+++ b/web/components/issues/sidebar-select/module.tsx
@@ -7,7 +7,8 @@ import useSWR, { mutate } from "swr";
 // services
 import modulesService from "services/modules.service";
 // ui
-import { Spinner, CustomSelect, Tooltip } from "components/ui";
+import { CustomSelect, Tooltip } from "components/ui";
+import { Spinner } from "@plane/ui";
 // helper
 import { truncateText } from "helpers/string.helper";
 // types
@@ -21,19 +22,13 @@ type Props = {
   disabled?: boolean;
 };
 
-export const SidebarModuleSelect: React.FC<Props> = ({
-  issueDetail,
-  handleModuleChange,
-  disabled = false,
-}) => {
+export const SidebarModuleSelect: React.FC<Props> = ({ issueDetail, handleModuleChange, disabled = false }) => {
   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
+    workspaceSlug && projectId ? () => modulesService.getModules(workspaceSlug as string, projectId as string) : null
   );
 
   const removeIssueFromModule = (bridgeId: string, moduleId: string) => {
@@ -59,9 +54,7 @@ export const SidebarModuleSelect: React.FC<Props> = ({
         <div>
           <Tooltip
             position="left"
-            tooltipContent={`${
-              modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"
-            }`}
+            tooltipContent={`${modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}`}
           >
             <button
               type="button"
@@ -69,11 +62,7 @@ export const SidebarModuleSelect: React.FC<Props> = ({
                 disabled ? "cursor-not-allowed" : ""
               }`}
             >
-              <span
-                className={`truncate ${
-                  issueModule ? "text-custom-text-100" : "text-custom-text-200"
-                }`}
-              >
+              <span className={`truncate ${issueModule ? "text-custom-text-100" : "text-custom-text-200"}`}>
                 {modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}
               </span>
             </button>
diff --git a/web/components/issues/sidebar-select/state.tsx b/web/components/issues/sidebar-select/state.tsx
index 7c7970b5a8e..90ac18f64c2 100644
--- a/web/components/issues/sidebar-select/state.tsx
+++ b/web/components/issues/sidebar-select/state.tsx
@@ -7,7 +7,8 @@ import useSWR from "swr";
 // services
 import stateService from "services/project_state.service";
 // ui
-import { Spinner, CustomSelect } from "components/ui";
+import { CustomSelect } from "components/ui";
+import { Spinner } from "@plane/ui";
 // icons
 import { StateGroupIcon } from "components/icons";
 // helpers
diff --git a/web/components/ui/index.ts b/web/components/ui/index.ts
index 6e4a761b92d..517b6c25a77 100644
--- a/web/components/ui/index.ts
+++ b/web/components/ui/index.ts
@@ -12,7 +12,6 @@ export * from "./loader";
 export * from "./multi-level-dropdown";
 export * from "./multi-level-select";
 export * from "./progress-bar";
-export * from "./spinner";
 export * from "./tooltip";
 export * from "./markdown-to-component";
 export * from "./product-updates-modal";
diff --git a/web/components/ui/spinner.tsx b/web/components/ui/spinner.tsx
deleted file mode 100644
index b961880305b..00000000000
--- a/web/components/ui/spinner.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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-custom-text-200"
-      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/web/components/web-view/sub-issues.tsx b/web/components/web-view/sub-issues.tsx
index a4e1809716c..8d44fd814b8 100644
--- a/web/components/web-view/sub-issues.tsx
+++ b/web/components/web-view/sub-issues.tsx
@@ -20,7 +20,7 @@ import { SUB_ISSUES } from "constants/fetch-keys";
 import useUser from "hooks/use-user";
 
 // ui
-import { Spinner } from "components/ui";
+import { Spinner } from "@plane/ui";
 import { IIssue } from "types";
 
 // components
diff --git a/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx b/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
index c3c9d588e25..98ee0d668f2 100644
--- a/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
+++ b/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
@@ -13,8 +13,8 @@ import AppSidebar from "layouts/app-layout-legacy/app-sidebar";
 import { NotAuthorizedView, JoinProject } from "components/auth-screens";
 import { CommandPalette } from "components/command-palette";
 // ui
-import { Button } from "@plane/ui";
-import { EmptyState, Spinner } from "components/ui";
+import { Button, Spinner } from "@plane/ui";
+import { EmptyState } from "components/ui";
 // icons
 import { LayerDiagonalIcon } from "components/icons";
 // images
diff --git a/web/layouts/auth-layout-legacy/user-authorization-wrapper.tsx b/web/layouts/auth-layout-legacy/user-authorization-wrapper.tsx
index 9e795aed778..8f323268b88 100644
--- a/web/layouts/auth-layout-legacy/user-authorization-wrapper.tsx
+++ b/web/layouts/auth-layout-legacy/user-authorization-wrapper.tsx
@@ -5,7 +5,7 @@ import useSWR from "swr";
 // services
 import userService from "services/user.service";
 // ui
-import { Spinner } from "components/ui";
+import { Spinner } from "@plane/ui";
 // fetch-keys
 import { CURRENT_USER } from "constants/fetch-keys";
 
diff --git a/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx b/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
index 6dfdf313141..94451a9bd3f 100644
--- a/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
+++ b/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
@@ -14,11 +14,10 @@ import AppSidebar from "layouts/app-layout-legacy/app-sidebar";
 import AppHeader from "layouts/app-layout-legacy/app-header";
 import { UserAuthorizationLayout } from "./user-authorization-wrapper";
 // components
-import { Button } from "@plane/ui";
+import { Button, Spinner } from "@plane/ui";
 import { NotAuthorizedView, NotAWorkspaceMember } from "components/auth-screens";
 import { CommandPalette } from "components/command-palette";
 // icons
-import { Spinner } from "components/ui";
 import { LayerDiagonalIcon } from "components/icons";
 // fetch-keys
 import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
diff --git a/web/layouts/auth-layout/user-wrapper.tsx b/web/layouts/auth-layout/user-wrapper.tsx
index e37b4064e5d..3c30910513b 100644
--- a/web/layouts/auth-layout/user-wrapper.tsx
+++ b/web/layouts/auth-layout/user-wrapper.tsx
@@ -4,7 +4,7 @@ import useSWR from "swr";
 // services
 import userService from "services/user.service";
 // ui
-import { Spinner } from "components/ui";
+import { Spinner } from "@plane/ui";
 // fetch-keys
 import { CURRENT_USER } from "constants/fetch-keys";
 
diff --git a/web/layouts/auth-layout/workspace-wrapper.tsx b/web/layouts/auth-layout/workspace-wrapper.tsx
index 37d6a399ea3..5db665bfb92 100644
--- a/web/layouts/auth-layout/workspace-wrapper.tsx
+++ b/web/layouts/auth-layout/workspace-wrapper.tsx
@@ -5,8 +5,7 @@ import useSWR from "swr";
 // services
 import workspaceServices from "services/workspace.service";
 // ui
-import { Spinner } from "components/ui";
-import { Button } from "@plane/ui";
+import { Button, Spinner } from "@plane/ui";
 // fetch-keys
 import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
 
diff --git a/web/layouts/web-view-layout/index.tsx b/web/layouts/web-view-layout/index.tsx
index 8a58407c3de..66039e971b5 100644
--- a/web/layouts/web-view-layout/index.tsx
+++ b/web/layouts/web-view-layout/index.tsx
@@ -11,7 +11,7 @@ import { CURRENT_USER } from "constants/fetch-keys";
 import { AlertCircle } from "lucide-react";
 
 // ui
-import { Spinner } from "components/ui";
+import { Spinner } from "@plane/ui";
 
 type Props = {
   children: React.ReactNode;
diff --git a/web/pages/[workspaceSlug]/editor.tsx b/web/pages/[workspaceSlug]/editor.tsx
index e52e26d5739..1754e089309 100644
--- a/web/pages/[workspaceSlug]/editor.tsx
+++ b/web/pages/[workspaceSlug]/editor.tsx
@@ -5,7 +5,7 @@ import { Controller, useForm } from "react-hook-form";
 import issuesService from "services/issue.service";
 import { ICurrentUserResponse, IIssue } from "types";
 import useReloadConfirmations from "hooks/use-reload-confirmation";
-import { Spinner } from "components/ui";
+import { Spinner } from "@plane/ui";
 import Image404 from "public/404.svg";
 import DefaultLayout from "layouts/default-layout";
 import Image from "next/image";
diff --git a/web/pages/[workspaceSlug]/me/profile/index.tsx b/web/pages/[workspaceSlug]/me/profile/index.tsx
index d18a332f18f..0a19117702e 100644
--- a/web/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/index.tsx
@@ -16,8 +16,8 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 import { ImagePickerPopover, ImageUploadModal } from "components/core";
 import { SettingsSidebar } from "components/project";
 // ui
-import { Button, Input } from "@plane/ui";
-import { CustomSearchSelect, CustomSelect, Spinner } from "components/ui";
+import { Button, Input, Spinner } from "@plane/ui";
+import { CustomSearchSelect, CustomSelect } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { UserIcon } from "@heroicons/react/24/outline";
diff --git a/web/pages/[workspaceSlug]/me/profile/preferences.tsx b/web/pages/[workspaceSlug]/me/profile/preferences.tsx
index bd8ea1fd04d..15357e95652 100644
--- a/web/pages/[workspaceSlug]/me/profile/preferences.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/preferences.tsx
@@ -6,7 +6,7 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // components
 import { CustomThemeSelector, ThemeSwitch } from "components/core";
 // ui
-import { Spinner } from "components/ui";
+import { Spinner } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
 import { ICustomTheme } from "types";
diff --git a/web/pages/[workspaceSlug]/settings/index.tsx b/web/pages/[workspaceSlug]/settings/index.tsx
index 84c6b86fbee..aadc38b2321 100644
--- a/web/pages/[workspaceSlug]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/index.tsx
@@ -20,8 +20,8 @@ import { DeleteWorkspaceModal } from "components/workspace";
 import { SettingsSidebar } from "components/project";
 // ui
 import { Disclosure, Transition } from "@headlessui/react";
-import { Spinner, CustomSelect, Icon } from "components/ui";
-import { Button, Input } from "@plane/ui";
+import { CustomSelect, Icon } from "components/ui";
+import { Button, Input, Spinner } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { Pencil } from "lucide-react";
diff --git a/web/pages/accounts/reset-password.tsx b/web/pages/accounts/reset-password.tsx
index 977a21a7ee6..533f9df1204 100644
--- a/web/pages/accounts/reset-password.tsx
+++ b/web/pages/accounts/reset-password.tsx
@@ -14,8 +14,7 @@ import userService from "services/user.service";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // ui
-import { Button, Input } from "@plane/ui";
-import { Spinner } from "components/ui";
+import { Button, Input, Spinner } from "@plane/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // types
diff --git a/web/pages/installations/[provider]/index.tsx b/web/pages/installations/[provider]/index.tsx
index 15dad934429..abdcf94cc10 100644
--- a/web/pages/installations/[provider]/index.tsx
+++ b/web/pages/installations/[provider]/index.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 // services
 import appInstallationsService from "services/app_installation.service";
 // ui
-import { Spinner } from "components/ui";
+import { Spinner } from "@plane/ui";
 
 const AppPostInstallation = () => {
   const router = useRouter();
diff --git a/web/pages/m/[workspaceSlug]/editor.tsx b/web/pages/m/[workspaceSlug]/editor.tsx
index 971c7135e6a..a613aff4155 100644
--- a/web/pages/m/[workspaceSlug]/editor.tsx
+++ b/web/pages/m/[workspaceSlug]/editor.tsx
@@ -15,8 +15,7 @@ import WebViewLayout from "layouts/web-view-layout";
 
 // components
 import { TipTapEditor } from "components/tiptap";
-import { Spinner } from "components/ui";
-import { Button } from "@plane/ui";
+import { Button, Spinner } from "@plane/ui";
 
 const Editor: NextPage = () => {
   const [isLoading, setIsLoading] = useState(false);
diff --git a/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index eb3df545893..3d25987cb9c 100644
--- a/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -24,7 +24,7 @@ import useProjectMembers from "hooks/use-project-members";
 import WebViewLayout from "layouts/web-view-layout";
 
 // ui
-import { Spinner } from "components/ui";
+import { Spinner } from "@plane/ui";
 
 // components
 import {
diff --git a/web/pages/onboarding.tsx b/web/pages/onboarding.tsx
index 51148b19e35..169fa1db184 100644
--- a/web/pages/onboarding.tsx
+++ b/web/pages/onboarding.tsx
@@ -17,7 +17,7 @@ import DefaultLayout from "layouts/default-layout";
 // components
 import { InviteMembers, JoinWorkspaces, UserDetails, Workspace } from "components/onboarding";
 // ui
-import { Spinner } from "components/ui";
+import { Spinner } from "@plane/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
@@ -38,9 +38,7 @@ const Onboarding: NextPage = () => {
   const { workspaces } = useWorkspaces();
   const userWorkspaces = workspaces?.filter((w) => w.created_by === user?.id);
 
-  const { data: invitations } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
-    workspaceService.userWorkspaceInvitations()
-  );
+  const { data: invitations } = useSWR(USER_WORKSPACE_INVITATIONS, () => workspaceService.userWorkspaceInvitations());
 
   // update last active workspace details
   const updateLastWorkspace = async () => {
@@ -129,13 +127,8 @@ const Onboarding: NextPage = () => {
       if (!onboardingStep.profile_complete && step !== 1) setStep(1);
 
       if (onboardingStep.profile_complete) {
-        if (!onboardingStep.workspace_join && invitations.length > 0 && step !== 2 && step !== 4)
-          setStep(4);
-        else if (
-          !onboardingStep.workspace_create &&
-          (step !== 4 || onboardingStep.workspace_join) &&
-          step !== 2
-        )
+        if (!onboardingStep.workspace_join && invitations.length > 0 && step !== 2 && step !== 4) setStep(4);
+        else if (!onboardingStep.workspace_create && (step !== 4 || onboardingStep.workspace_join) && step !== 2)
           setStep(2);
       }
 
diff --git a/web/pages/workspace-member-invitation.tsx b/web/pages/workspace-member-invitation.tsx
index e351310a43e..86bce7f5192 100644
--- a/web/pages/workspace-member-invitation.tsx
+++ b/web/pages/workspace-member-invitation.tsx
@@ -3,14 +3,7 @@ import React from "react";
 
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import {
-  CheckIcon,
-  CubeIcon,
-  ShareIcon,
-  StarIcon,
-  UserIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
+import { CheckIcon, CubeIcon, ShareIcon, StarIcon, UserIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // swr
 // services
 import workspaceService from "services/workspace.service";
@@ -19,7 +12,7 @@ import useUser from "hooks/use-user";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // ui
-import { Spinner } from "components/ui";
+import { Spinner } from "@plane/ui";
 // icons
 import { EmptySpace, EmptySpaceItem } from "components/ui/empty-space";
 // types
@@ -77,11 +70,7 @@ const WorkspaceInvitation: NextPage = () => {
                       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("/")}
-                      />
+                      <EmptySpaceItem Icon={CubeIcon} title="Continue to Dashboard" action={() => router.push("/")} />
                     </EmptySpace>
                   </>
                 ) : (

From 4f55a52a925bfbf29f0ab2929b59345f76a4d91c Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 11 Oct 2023 16:16:35 +0530
Subject: [PATCH 14/15] chore: swap progress bar componenet with plan/ui
 package

---
 packages/ui/dist/index.d.ts                   | 12 +++-
 packages/ui/dist/index.js                     | 70 ++++++++++++++++---
 packages/ui/dist/index.mjs                    | 69 +++++++++++++++---
 packages/ui/src/progress/index.tsx            |  1 +
 .../ui/src/progress}/progress-bar.tsx         | 16 +++--
 .../core/sidebar/single-progress-stats.tsx    |  7 +-
 web/components/cycles/sidebar.tsx             |  4 +-
 web/components/modules/sidebar.tsx            |  4 +-
 web/components/ui/index.ts                    |  1 -
 9 files changed, 151 insertions(+), 33 deletions(-)
 rename {web/components/ui => packages/ui/src/progress}/progress-bar.tsx (80%)

diff --git a/packages/ui/dist/index.d.ts b/packages/ui/dist/index.d.ts
index f368acbb1e2..e3b79002451 100644
--- a/packages/ui/dist/index.d.ts
+++ b/packages/ui/dist/index.d.ts
@@ -45,6 +45,16 @@ interface IRadialProgressBar {
 }
 declare const RadialProgressBar: FC<IRadialProgressBar>;
 
+declare type Props$1 = {
+    maxValue?: number;
+    value?: number;
+    radius?: number;
+    strokeWidth?: number;
+    activeStrokeColor?: string;
+    inactiveStrokeColor?: string;
+};
+declare const ProgressBar: React__default.FC<Props$1>;
+
 declare const Spinner: React.FC;
 
 declare type Props = {
@@ -61,4 +71,4 @@ declare type ItemProps = {
     width?: string;
 };
 
-export { Button, ButtonProps, Input, InputProps, Loader, RadialProgressBar, Spinner, TextArea, TextAreaProps, ToggleSwitch };
+export { Button, ButtonProps, Input, InputProps, Loader, ProgressBar, RadialProgressBar, Spinner, TextArea, TextAreaProps, ToggleSwitch };
diff --git a/packages/ui/dist/index.js b/packages/ui/dist/index.js
index a334583a6ce..7ac83b1aece 100644
--- a/packages/ui/dist/index.js
+++ b/packages/ui/dist/index.js
@@ -29,6 +29,7 @@ __export(src_exports, {
   Button: () => Button,
   Input: () => Input,
   Loader: () => Loader,
+  ProgressBar: () => ProgressBar,
   RadialProgressBar: () => RadialProgressBar,
   Spinner: () => Spinner,
   TextArea: () => TextArea,
@@ -277,33 +278,83 @@ var RadialProgressBar = (props) => {
   })));
 };
 
+// src/progress/progress-bar.tsx
+var import_react3 = __toESM(require("react"));
+var ProgressBar = ({
+  maxValue = 0,
+  value = 0,
+  radius = 8,
+  strokeWidth = 2,
+  activeStrokeColor = "#3e98c7",
+  inactiveStrokeColor = "#ddd"
+}) => {
+  const generatePie = (value2) => {
+    const x = radius - Math.cos(2 * Math.PI / (100 / value2)) * radius;
+    const y = radius + Math.sin(2 * Math.PI / (100 / value2)) * radius;
+    const long = value2 <= 50 ? 0 : 1;
+    const d = `M${radius} ${radius} L${radius} ${0} A${radius} ${radius} 0 ${long} 1 ${y} ${x} Z`;
+    return d;
+  };
+  const calculatePieValue = (numberOfBars) => {
+    const angle = 360 / numberOfBars;
+    const pieValue = Math.floor(angle / 4);
+    return pieValue < 1 ? 1 : Math.floor(angle / 4);
+  };
+  const renderPie = (i) => {
+    const DIRECTION = -1;
+    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 /* @__PURE__ */ import_react3.default.createElement("path", {
+      style: { opacity: i === 0 ? 0 : 1 },
+      key: i,
+      d: dValue,
+      fill: fillColor,
+      transform: rotationTransformation
+    });
+  };
+  const renderOuterCircle = () => [...Array(maxValue + 1)].map((e, i) => renderPie(i));
+  return /* @__PURE__ */ import_react3.default.createElement("svg", {
+    width: radius * 2,
+    height: radius * 2
+  }, renderOuterCircle(), /* @__PURE__ */ import_react3.default.createElement("circle", {
+    r: radius - strokeWidth,
+    cx: radius,
+    cy: radius,
+    className: "progress-bar"
+  }));
+};
+
 // src/spinners/circular-spinner.tsx
-var React6 = __toESM(require("react"));
-var Spinner = () => /* @__PURE__ */ React6.createElement("div", {
+var React7 = __toESM(require("react"));
+var Spinner = () => /* @__PURE__ */ React7.createElement("div", {
   role: "status"
-}, /* @__PURE__ */ React6.createElement("svg", {
+}, /* @__PURE__ */ React7.createElement("svg", {
   "aria-hidden": "true",
   className: "mr-2 h-8 w-8 animate-spin fill-blue-600 text-custom-text-200",
   viewBox: "0 0 100 101",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, /* @__PURE__ */ React6.createElement("path", {
+}, /* @__PURE__ */ React7.createElement("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"
-}), /* @__PURE__ */ React6.createElement("path", {
+}), /* @__PURE__ */ React7.createElement("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"
-})), /* @__PURE__ */ React6.createElement("span", {
+})), /* @__PURE__ */ React7.createElement("span", {
   className: "sr-only"
 }, "Loading..."));
 
 // src/loader.tsx
-var import_react3 = __toESM(require("react"));
-var Loader = ({ children, className = "" }) => /* @__PURE__ */ import_react3.default.createElement("div", {
+var import_react4 = __toESM(require("react"));
+var Loader = ({ children, className = "" }) => /* @__PURE__ */ import_react4.default.createElement("div", {
   className: `${className} animate-pulse`,
   role: "status"
 }, children);
-var Item = ({ height = "auto", width = "auto" }) => /* @__PURE__ */ import_react3.default.createElement("div", {
+var Item = ({ height = "auto", width = "auto" }) => /* @__PURE__ */ import_react4.default.createElement("div", {
   className: "rounded-md bg-custom-background-80",
   style: { height, width }
 });
@@ -314,6 +365,7 @@ Loader.displayName = "plane-ui-loader";
   Button,
   Input,
   Loader,
+  ProgressBar,
   RadialProgressBar,
   Spinner,
   TextArea,
diff --git a/packages/ui/dist/index.mjs b/packages/ui/dist/index.mjs
index d185a5fa8fc..d9112b83216 100644
--- a/packages/ui/dist/index.mjs
+++ b/packages/ui/dist/index.mjs
@@ -239,33 +239,83 @@ var RadialProgressBar = (props) => {
   })));
 };
 
+// src/progress/progress-bar.tsx
+import React6 from "react";
+var ProgressBar = ({
+  maxValue = 0,
+  value = 0,
+  radius = 8,
+  strokeWidth = 2,
+  activeStrokeColor = "#3e98c7",
+  inactiveStrokeColor = "#ddd"
+}) => {
+  const generatePie = (value2) => {
+    const x = radius - Math.cos(2 * Math.PI / (100 / value2)) * radius;
+    const y = radius + Math.sin(2 * Math.PI / (100 / value2)) * radius;
+    const long = value2 <= 50 ? 0 : 1;
+    const d = `M${radius} ${radius} L${radius} ${0} A${radius} ${radius} 0 ${long} 1 ${y} ${x} Z`;
+    return d;
+  };
+  const calculatePieValue = (numberOfBars) => {
+    const angle = 360 / numberOfBars;
+    const pieValue = Math.floor(angle / 4);
+    return pieValue < 1 ? 1 : Math.floor(angle / 4);
+  };
+  const renderPie = (i) => {
+    const DIRECTION = -1;
+    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 /* @__PURE__ */ React6.createElement("path", {
+      style: { opacity: i === 0 ? 0 : 1 },
+      key: i,
+      d: dValue,
+      fill: fillColor,
+      transform: rotationTransformation
+    });
+  };
+  const renderOuterCircle = () => [...Array(maxValue + 1)].map((e, i) => renderPie(i));
+  return /* @__PURE__ */ React6.createElement("svg", {
+    width: radius * 2,
+    height: radius * 2
+  }, renderOuterCircle(), /* @__PURE__ */ React6.createElement("circle", {
+    r: radius - strokeWidth,
+    cx: radius,
+    cy: radius,
+    className: "progress-bar"
+  }));
+};
+
 // src/spinners/circular-spinner.tsx
-import * as React6 from "react";
-var Spinner = () => /* @__PURE__ */ React6.createElement("div", {
+import * as React7 from "react";
+var Spinner = () => /* @__PURE__ */ React7.createElement("div", {
   role: "status"
-}, /* @__PURE__ */ React6.createElement("svg", {
+}, /* @__PURE__ */ React7.createElement("svg", {
   "aria-hidden": "true",
   className: "mr-2 h-8 w-8 animate-spin fill-blue-600 text-custom-text-200",
   viewBox: "0 0 100 101",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, /* @__PURE__ */ React6.createElement("path", {
+}, /* @__PURE__ */ React7.createElement("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"
-}), /* @__PURE__ */ React6.createElement("path", {
+}), /* @__PURE__ */ React7.createElement("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"
-})), /* @__PURE__ */ React6.createElement("span", {
+})), /* @__PURE__ */ React7.createElement("span", {
   className: "sr-only"
 }, "Loading..."));
 
 // src/loader.tsx
-import React7 from "react";
-var Loader = ({ children, className = "" }) => /* @__PURE__ */ React7.createElement("div", {
+import React8 from "react";
+var Loader = ({ children, className = "" }) => /* @__PURE__ */ React8.createElement("div", {
   className: `${className} animate-pulse`,
   role: "status"
 }, children);
-var Item = ({ height = "auto", width = "auto" }) => /* @__PURE__ */ React7.createElement("div", {
+var Item = ({ height = "auto", width = "auto" }) => /* @__PURE__ */ React8.createElement("div", {
   className: "rounded-md bg-custom-background-80",
   style: { height, width }
 });
@@ -275,6 +325,7 @@ export {
   Button,
   Input,
   Loader,
+  ProgressBar,
   RadialProgressBar,
   Spinner,
   TextArea,
diff --git a/packages/ui/src/progress/index.tsx b/packages/ui/src/progress/index.tsx
index caee5259d3a..288a0c1fc46 100644
--- a/packages/ui/src/progress/index.tsx
+++ b/packages/ui/src/progress/index.tsx
@@ -1 +1,2 @@
 export * from "./radial-progress";
+export * from "./progress-bar";
diff --git a/web/components/ui/progress-bar.tsx b/packages/ui/src/progress/progress-bar.tsx
similarity index 80%
rename from web/components/ui/progress-bar.tsx
rename to packages/ui/src/progress/progress-bar.tsx
index 8ac0b1e1e05..d241e3d5e50 100644
--- a/web/components/ui/progress-bar.tsx
+++ b/packages/ui/src/progress/progress-bar.tsx
@@ -40,11 +40,13 @@ export const ProgressBar: React.FC<Props> = ({
     // Rotation Calc
     const primaryRotationAngle = (maxValue - 1) * (360 / maxValue);
     const rotationAngle =
-      -1 * DIRECTION * primaryRotationAngle + i * DIRECTION * primaryRotationAngle;
+      -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;
+    const fillColor =
+      value > 0 && i <= value ? activeStrokeColor : inactiveStrokeColor;
 
     return (
       <path
@@ -58,12 +60,18 @@ export const ProgressBar: React.FC<Props> = ({
   };
 
   // combining the Pies
-  const renderOuterCircle = () => [...Array(maxValue + 1)].map((e, i) => renderPie(i));
+  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" />
+      <circle
+        r={radius - strokeWidth}
+        cx={radius}
+        cy={radius}
+        className="progress-bar"
+      />
     </svg>
   );
 };
diff --git a/web/components/core/sidebar/single-progress-stats.tsx b/web/components/core/sidebar/single-progress-stats.tsx
index 1498c9badb9..3ff214b5713 100644
--- a/web/components/core/sidebar/single-progress-stats.tsx
+++ b/web/components/core/sidebar/single-progress-stats.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ProgressBar } from "components/ui";
+import { ProgressBar } from "@plane/ui";
 
 type TSingleProgressStatsProps = {
   title: any;
@@ -30,10 +30,7 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
           <ProgressBar value={completed} maxValue={total} />
         </span>
         <span className="w-8 text-right">
-          {isNaN(Math.floor((completed / total) * 100))
-            ? "0"
-            : Math.floor((completed / total) * 100)}
-          %
+          {isNaN(Math.floor((completed / total) * 100)) ? "0" : Math.floor((completed / total) * 100)}%
         </span>
       </div>
       <span>of {total}</span>
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index 4b2e1efeaa4..aa52aa27fa3 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -17,8 +17,8 @@ import { SidebarProgressStats } from "components/core";
 import ProgressChart from "components/core/sidebar/progress-chart";
 import { DeleteCycleModal } from "components/cycles";
 // ui
-import { CustomMenu, CustomRangeDatePicker, ProgressBar } from "components/ui";
-import { Loader } from "@plane/ui";
+import { CustomMenu, CustomRangeDatePicker } from "components/ui";
+import { Loader, ProgressBar } from "@plane/ui";
 // icons
 import {
   CalendarDaysIcon,
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index e7613000be7..f53d48998e8 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -29,8 +29,8 @@ import useToast from "hooks/use-toast";
 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, ProgressBar } from "components/ui";
-import { Loader } from "@plane/ui";
+import { CustomMenu, CustomSelect } from "components/ui";
+import { Loader, ProgressBar } from "@plane/ui";
 // icon
 import { ExclamationIcon } from "components/icons";
 import { LinkIcon } from "@heroicons/react/20/solid";
diff --git a/web/components/ui/index.ts b/web/components/ui/index.ts
index 517b6c25a77..db723264583 100644
--- a/web/components/ui/index.ts
+++ b/web/components/ui/index.ts
@@ -11,7 +11,6 @@ export * from "./linear-progress-indicator";
 export * from "./loader";
 export * from "./multi-level-dropdown";
 export * from "./multi-level-select";
-export * from "./progress-bar";
 export * from "./tooltip";
 export * from "./markdown-to-component";
 export * from "./product-updates-modal";

From 97b4e312931698d8204a9ee36328bb6fa557bbea Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 11 Oct 2023 16:19:57 +0530
Subject: [PATCH 15/15] chore: code refactor

---
 .../filters/header/filters/project.tsx        |  2 +-
 web/components/ui/index.ts                    |  1 -
 web/components/ui/loader.tsx                  | 25 -------------------
 web/components/workspace/views/views-list.tsx |  2 +-
 4 files changed, 2 insertions(+), 28 deletions(-)
 delete mode 100644 web/components/ui/loader.tsx

diff --git a/web/components/issues/issue-layouts/filters/header/filters/project.tsx b/web/components/issues/issue-layouts/filters/header/filters/project.tsx
index 93163dd9142..de02e969282 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/project.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/project.tsx
@@ -3,7 +3,7 @@ import React, { useState } from "react";
 // components
 import { FilterHeader, FilterOption } from "components/issues";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 // types
diff --git a/web/components/ui/index.ts b/web/components/ui/index.ts
index db723264583..6ce83cbd5a5 100644
--- a/web/components/ui/index.ts
+++ b/web/components/ui/index.ts
@@ -8,7 +8,6 @@ export * from "./empty-state";
 export * from "./icon";
 export * from "./labels-list";
 export * from "./linear-progress-indicator";
-export * from "./loader";
 export * from "./multi-level-dropdown";
 export * from "./multi-level-select";
 export * from "./tooltip";
diff --git a/web/components/ui/loader.tsx b/web/components/ui/loader.tsx
deleted file mode 100644
index b9d13883a7b..00000000000
--- a/web/components/ui/loader.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-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-custom-background-80" style={{ height: height, width: width }} />
-);
-
-Loader.Item = Item;
-
-export { Loader };
diff --git a/web/components/workspace/views/views-list.tsx b/web/components/workspace/views/views-list.tsx
index ccfeba75b80..5a06293052a 100644
--- a/web/components/workspace/views/views-list.tsx
+++ b/web/components/workspace/views/views-list.tsx
@@ -5,7 +5,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { GlobalViewListItem } from "components/workspace";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 
 type Props = {
   searchQuery: string;