diff --git a/apps/app/components/account/email-code-form.tsx b/apps/app/components/account/email-code-form.tsx
index ba8c759af..e6b3eeac3 100644
--- a/apps/app/components/account/email-code-form.tsx
+++ b/apps/app/components/account/email-code-form.tsx
@@ -32,6 +32,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
     setError,
     setValue,
     getValues,
+    watch,
     formState: { errors, isSubmitting, isValid, isDirty },
   } = useForm<EmailCodeFormValues>({
     defaultValues: {
@@ -112,43 +113,34 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
 
   return (
     <>
-      <form className="space-y-5 py-5 px-5">
-        {(codeSent || codeResent) && (
-          <div className="rounded-md bg-green-500/20 p-4">
-            <div className="flex">
-              <div className="flex-shrink-0">
-                <CheckCircleIcon className="h-5 w-5 text-green-500" aria-hidden="true" />
-              </div>
-              <div className="ml-3">
-                <p className="text-sm font-medium text-green-500">
-                  {codeResent
-                    ? "Please check your mail for new code."
-                    : "Please check your mail for code."}
-                </p>
-              </div>
-            </div>
-          </div>
-        )}
-        <div>
+      {(codeSent || codeResent) && (
+        <p className="text-center mt-4">
+          We have sent the sign in code.
+          <br />
+          Please check your inbox at <span className="font-medium">{watch("email")}</span>
+        </p>
+      )}
+      <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto">
+        <div className="space-y-1">
           <Input
             id="email"
             type="email"
             name="email"
             register={register}
             validations={{
-              required: "Email ID is required",
+              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 ID is not valid",
+                ) || "Email address is not valid",
             }}
             error={errors.email}
-            placeholder="Enter your Email ID"
+            placeholder="Enter your email address..."
           />
         </div>
 
         {codeSent && (
-          <div>
+          <>
             <Input
               id="token"
               type="token"
@@ -158,14 +150,14 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
                 required: "Code is required",
               }}
               error={errors.token}
-              placeholder="Enter code"
+              placeholder="Enter code..."
             />
             <button
               type="button"
-              className={`mt-5 flex w-full justify-end text-xs outline-none ${
+              className={`flex w-full justify-end text-xs outline-none ${
                 isResendDisabled
                   ? "cursor-default text-custom-text-200"
-                  : "cursor-pointer text-custom-primary"
+                  : "cursor-pointer text-custom-primary-100"
               } `}
               onClick={() => {
                 setIsCodeResending(true);
@@ -178,46 +170,43 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
               disabled={isResendDisabled}
             >
               {resendCodeTimer > 0 ? (
-                <p className="text-right">
-                  Didn{"'"}t receive code? Get new code in {resendCodeTimer} seconds.
-                </p>
+                <span className="text-right">Request new code in {resendCodeTimer} seconds</span>
               ) : isCodeResending ? (
-                "Sending code..."
+                "Sending new code..."
               ) : errorResendingCode ? (
                 "Please try again later"
               ) : (
                 "Resend code"
               )}
             </button>
-          </div>
+          </>
+        )}
+        {codeSent ? (
+          <PrimaryButton
+            type="submit"
+            className="w-full text-center"
+            size="md"
+            onClick={handleSubmit(handleSignin)}
+            disabled={!isValid && isDirty}
+            loading={isLoading}
+          >
+            {isLoading ? "Signing in..." : "Sign in"}
+          </PrimaryButton>
+        ) : (
+          <PrimaryButton
+            className="w-full text-center"
+            size="md"
+            onClick={() => {
+              handleSubmit(onSubmit)().then(() => {
+                setResendCodeTimer(30);
+              });
+            }}
+            disabled={!isValid && isDirty}
+            loading={isSubmitting}
+          >
+            {isSubmitting ? "Sending code..." : "Send sign in code"}
+          </PrimaryButton>
         )}
-        <div>
-          {codeSent ? (
-            <PrimaryButton
-              type="submit"
-              className="w-full text-center"
-              size="md"
-              onClick={handleSubmit(handleSignin)}
-              disabled={!isValid && isDirty}
-              loading={isLoading}
-            >
-              {isLoading ? "Signing in..." : "Sign in"}
-            </PrimaryButton>
-          ) : (
-            <PrimaryButton
-              className="w-full text-center"
-              size="md"
-              onClick={() => {
-                handleSubmit(onSubmit)().then(() => {
-                  setResendCodeTimer(30);
-                });
-              }}
-              loading={isSubmitting || (!isValid && isDirty)}
-            >
-              {isSubmitting ? "Sending code..." : "Send code"}
-            </PrimaryButton>
-          )}
-        </div>
       </form>
     </>
   );
diff --git a/apps/app/components/account/email-password-form.tsx b/apps/app/components/account/email-password-form.tsx
index 97da2b9e4..ab902ee96 100644
--- a/apps/app/components/account/email-password-form.tsx
+++ b/apps/app/components/account/email-password-form.tsx
@@ -8,7 +8,7 @@ import { useForm } from "react-hook-form";
 // components
 import { EmailResetPasswordForm } from "components/account";
 // ui
-import { Input, SecondaryButton } from "components/ui";
+import { Input, PrimaryButton } from "components/ui";
 // types
 type EmailPasswordFormValues = {
   email: string;
@@ -42,28 +42,38 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
 
   return (
     <>
+      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
+        {isResettingPassword
+          ? "Reset your password"
+          : isSignUpPage
+          ? "Sign up on Plane"
+          : "Sign in to Plane"}
+      </h1>
       {isResettingPassword ? (
         <EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
       ) : (
-        <form className="mt-5 py-5 px-5" onSubmit={handleSubmit(onSubmit)}>
-          <div>
+        <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"
               name="email"
               register={register}
               validations={{
-                required: "Email ID is required",
+                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 ID is not valid",
+                  ) || "Email address is not valid",
               }}
               error={errors.email}
-              placeholder="Enter your email ID"
+              placeholder="Enter your email address..."
             />
           </div>
-          <div className="mt-5">
+          <div className="space-y-1">
             <Input
               id="password"
               type="password"
@@ -73,30 +83,28 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
                 required: "Password is required",
               }}
               error={errors.password}
-              placeholder="Enter your password"
+              placeholder="Enter your password..."
             />
           </div>
-          <div className="mt-2 flex items-center justify-between">
-            <div className="ml-auto text-sm">
-              {isSignUpPage ? (
-                <Link href="/">
-                  <a className="font-medium text-custom-primary hover:text-custom-primary">
-                    Already have an account? Sign in.
-                  </a>
-                </Link>
-              ) : (
-                <button
-                  type="button"
-                  onClick={() => setIsResettingPassword(true)}
-                  className="font-medium text-custom-primary hover:text-custom-primary"
-                >
-                  Forgot your password?
-                </button>
-              )}
-            </div>
+          <div className="text-right text-xs">
+            {isSignUpPage ? (
+              <Link href="/">
+                <a className="text-custom-text-200 hover:text-custom-primary-100">
+                  Already have an account? Sign in.
+                </a>
+              </Link>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setIsResettingPassword(true)}
+                className="text-custom-text-200 hover:text-custom-primary-100"
+              >
+                Forgot your password?
+              </button>
+            )}
           </div>
-          <div className="mt-5">
-            <SecondaryButton
+          <div>
+            <PrimaryButton
               type="submit"
               className="w-full text-center"
               disabled={!isValid && isDirty}
@@ -105,14 +113,14 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
               {isSignUpPage
                 ? isSubmitting
                   ? "Signing up..."
-                  : "Sign Up"
+                  : "Sign up"
                 : isSubmitting
                 ? "Signing in..."
-                : "Sign In"}
-            </SecondaryButton>
+                : "Sign in"}
+            </PrimaryButton>
             {!isSignUpPage && (
               <Link href="/sign-up">
-                <a className="block font-medium text-custom-primary hover:text-custom-primary text-sm mt-1">
+                <a className="block text-custom-text-200 hover:text-custom-primary-100 text-xs mt-4">
                   Don{"'"}t have an account? Sign up.
                 </a>
               </Link>
diff --git a/apps/app/components/account/email-reset-password-form.tsx b/apps/app/components/account/email-reset-password-form.tsx
index 03ea69042..2fa787a5f 100644
--- a/apps/app/components/account/email-reset-password-form.tsx
+++ b/apps/app/components/account/email-reset-password-form.tsx
@@ -59,25 +59,28 @@ export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword
   };
 
   return (
-    <form className="mt-5 py-5 px-5" onSubmit={handleSubmit(forgotPassword)}>
-      <div>
+    <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"
           name="email"
           register={register}
           validations={{
-            required: "Email ID is required",
+            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 ID is not valid",
+              ) || "Email address is not valid",
           }}
           error={errors.email}
-          placeholder="Enter registered Email ID"
+          placeholder="Enter registered email address.."
         />
       </div>
-      <div className="mt-5 flex items-center gap-2">
+      <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
         <SecondaryButton
           className="w-full text-center"
           onClick={() => setIsResettingPassword(false)}
diff --git a/apps/app/components/account/github-login-button.tsx b/apps/app/components/account/github-login-button.tsx
index 889d46405..844f32355 100644
--- a/apps/app/components/account/github-login-button.tsx
+++ b/apps/app/components/account/github-login-button.tsx
@@ -1,9 +1,14 @@
 import { useEffect, useState, FC } from "react";
+
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
+
+// next-themes
+import { useTheme } from "next-themes";
 // images
-import githubImage from "/public/logos/github-black.png";
+import githubBlackImage from "/public/logos/github-black.png";
+import githubWhiteImage from "/public/logos/github-white.png";
 
 const { NEXT_PUBLIC_GITHUB_ID } = process.env;
 
@@ -11,15 +16,15 @@ export interface GithubLoginButtonProps {
   handleSignIn: React.Dispatch<string>;
 }
 
-export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
-  const { handleSignIn } = props;
-  // router
+export const GithubLoginButton: FC<GithubLoginButtonProps> = ({ handleSignIn }) => {
+  const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
+  const [gitCode, setGitCode] = useState<null | string>(null);
+
   const {
     query: { code },
   } = useRouter();
-  // states
-  const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
-  const [gitCode, setGitCode] = useState<null | string>(null);
+
+  const { theme } = useTheme();
 
   useEffect(() => {
     if (code && !gitCode) {
@@ -35,13 +40,18 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
   }, []);
 
   return (
-    <div className="w-full flex justify-center items-center px-[3px]">
+    <div className="w-full flex justify-center items-center">
       <Link
         href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
       >
-        <button className="flex w-full items-center justify-center gap-3 rounded border border-custom-border-100 p-2 text-sm font-medium text-custom-text-200 duration-300 hover:bg-custom-background-80">
-          <Image src={githubImage} height={20} width={20} color="#000" alt="GitHub Logo" />
-          <span>Sign In with Github</span>
+        <button className="flex w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80">
+          <Image
+            src={theme === "light" ? githubBlackImage : githubWhiteImage}
+            height={20}
+            width={20}
+            alt="GitHub Logo"
+          />
+          <span>Sign in with GitHub</span>
         </button>
       </Link>
     </div>
diff --git a/apps/app/components/account/google-login.tsx b/apps/app/components/account/google-login.tsx
index c12fb4e24..a2cdb7750 100644
--- a/apps/app/components/account/google-login.tsx
+++ b/apps/app/components/account/google-login.tsx
@@ -27,7 +27,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
         theme: "outline",
         size: "large",
         logo_alignment: "center",
-        width: "410",
+        width: "360",
         text: "continue_with",
       } as GsiButtonConfiguration // customization attributes
     );
@@ -48,7 +48,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
     <>
       <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
       <div
-        className="overflow-hidden rounded w-full flex justify-center items-center"
+        className="overflow-hidden rounded w-full flex justify-center items-center !text-sm !font-medium !text-custom-text-100"
         id="googleSignInButton"
         ref={googleSignInButton}
       />
diff --git a/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx b/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx
index 22e728089..28f8c0fba 100644
--- a/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx
+++ b/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx
@@ -111,7 +111,7 @@ export const CreateUpdateAnalyticsModal: React.FC<Props> = ({ isOpen, handleClos
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 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">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-300 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
diff --git a/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx b/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
index 8f4a413b5..206b09fd7 100644
--- a/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
+++ b/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
@@ -31,7 +31,7 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
   }
 
   return (
-    <div className="flex items-center gap-2 rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
+    <div className="flex items-center gap-2 rounded-md border border-custom-border-300 bg-custom-background-80 p-2 text-xs">
       <span
         className="h-3 w-3 rounded"
         style={{
diff --git a/apps/app/components/analytics/custom-analytics/sidebar.tsx b/apps/app/components/analytics/custom-analytics/sidebar.tsx
index 8a736af0a..46e2264b1 100644
--- a/apps/app/components/analytics/custom-analytics/sidebar.tsx
+++ b/apps/app/components/analytics/custom-analytics/sidebar.tsx
@@ -185,7 +185,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
     <div
       className={`px-5 py-2.5 flex items-center justify-between space-y-2 ${
         fullScreen
-          ? "border-l border-custom-border-100 md:h-full md:border-l md:border-custom-border-100 md:space-y-4 overflow-hidden md:flex-col md:items-start md:py-5"
+          ? "border-l border-custom-border-300 md:h-full md:border-l md:border-custom-border-300 md:space-y-4 overflow-hidden md:flex-col md:items-start md:py-5"
           : ""
       }`}
     >
diff --git a/apps/app/components/analytics/custom-analytics/table.tsx b/apps/app/components/analytics/custom-analytics/table.tsx
index 54a73186e..7dcdfb7d9 100644
--- a/apps/app/components/analytics/custom-analytics/table.tsx
+++ b/apps/app/components/analytics/custom-analytics/table.tsx
@@ -37,9 +37,9 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
     <div className="flow-root">
       <div className="overflow-x-auto">
         <div className="inline-block min-w-full align-middle">
-          <table className="min-w-full divide-y divide-custom-border-100 whitespace-nowrap border-y border-custom-border-100">
+          <table className="min-w-full divide-y divide-custom-border-300 whitespace-nowrap border-y border-custom-border-300">
             <thead className="bg-custom-background-80">
-              <tr className="divide-x divide-custom-border-100 text-sm text-custom-text-100">
+              <tr className="divide-x divide-custom-border-300 text-sm text-custom-text-100">
                 <th scope="col" className="py-3 px-2.5 text-left font-medium">
                   {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
                 </th>
@@ -80,11 +80,11 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
                 )}
               </tr>
             </thead>
-            <tbody className="divide-y divide-custom-border-100">
+            <tbody className="divide-y divide-custom-border-300">
               {barGraphData.data.map((item, index) => (
                 <tr
                   key={`table-row-${index}`}
-                  className="divide-x divide-custom-border-100 text-xs text-custom-text-200"
+                  className="divide-x divide-custom-border-300 text-xs text-custom-text-200"
                 >
                   <td
                     className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${
diff --git a/apps/app/components/analytics/project-modal.tsx b/apps/app/components/analytics/project-modal.tsx
index 454b2abaf..e0f0e5c53 100644
--- a/apps/app/components/analytics/project-modal.tsx
+++ b/apps/app/components/analytics/project-modal.tsx
@@ -155,7 +155,7 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
       } ${isOpen ? "right-0" : "-right-full"} duration-300 transition-all`}
     >
       <div
-        className={`flex h-full flex-col overflow-hidden border-custom-border-100 bg-custom-background-100 text-left ${
+        className={`flex h-full flex-col overflow-hidden border-custom-border-300 bg-custom-background-100 text-left ${
           fullScreen ? "rounded-lg border" : "border-l"
         }`}
       >
@@ -186,12 +186,12 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
           </div>
         </div>
         <Tab.Group as={Fragment}>
-          <Tab.List as="div" className="space-x-2 border-b border-custom-border-100 p-5 pt-0">
+          <Tab.List as="div" className="space-x-2 border-b border-custom-border-300 p-5 pt-0">
             {tabsList.map((tab) => (
               <Tab
                 key={tab}
                 className={({ selected }) =>
-                  `rounded-3xl border border-custom-border-100 px-4 py-2 text-xs hover:bg-custom-background-80 ${
+                  `rounded-3xl border border-custom-border-300 px-4 py-2 text-xs hover:bg-custom-background-80 ${
                     selected ? "bg-custom-background-80" : ""
                   }`
                 }
diff --git a/apps/app/components/analytics/scope-and-demand/demand.tsx b/apps/app/components/analytics/scope-and-demand/demand.tsx
index bb0627025..c19382c31 100644
--- a/apps/app/components/analytics/scope-and-demand/demand.tsx
+++ b/apps/app/components/analytics/scope-and-demand/demand.tsx
@@ -10,7 +10,7 @@ type Props = {
 };
 
 export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="space-y-3 rounded-[10px] border border-custom-border-100 p-3">
+  <div className="space-y-3 rounded-[10px] border border-custom-border-300 p-3">
     <h5 className="text-xs text-red-500">DEMAND</h5>
     <div>
       <h4 className="text-custom-text-100 text-base font-medium">Total open tasks</h4>
@@ -50,7 +50,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
         );
       })}
     </div>
-    <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
+    <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-80 p-2 text-xs">
       <p className="flex items-center gap-1 text-custom-text-200">
         <PlayIcon className="h-4 w-4 -rotate-90" aria-hidden="true" />
         <span>Estimate Demand:</span>
diff --git a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
index daad1a9d9..2bf8c0d68 100644
--- a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
+++ b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
@@ -10,7 +10,7 @@ type Props = {
 };
 
 export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
-  <div className="p-3 border border-custom-border-100 rounded-[10px]">
+  <div className="p-3 border border-custom-border-300 rounded-[10px]">
     <h6 className="text-base font-medium">{title}</h6>
     {users.length > 0 ? (
       <div className="mt-3 space-y-3">
diff --git a/apps/app/components/analytics/scope-and-demand/scope.tsx b/apps/app/components/analytics/scope-and-demand/scope.tsx
index 1247fa824..0d63c70ea 100644
--- a/apps/app/components/analytics/scope-and-demand/scope.tsx
+++ b/apps/app/components/analytics/scope-and-demand/scope.tsx
@@ -8,9 +8,9 @@ type Props = {
 };
 
 export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="rounded-[10px] border border-custom-border-100">
+  <div className="rounded-[10px] border border-custom-border-300">
     <h5 className="p-3 text-xs text-green-500">SCOPE</h5>
-    <div className="divide-y divide-custom-border-100">
+    <div className="divide-y divide-custom-border-300">
       <div>
         <h6 className="px-3 text-base font-medium">Pending issues</h6>
         {defaultAnalytics.pending_issue_user.length > 0 ? (
@@ -27,7 +27,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
               );
 
               return (
-                <div className="rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
+                <div className="rounded-md border border-custom-border-300 bg-custom-background-80 p-2 text-xs">
                   <span className="font-medium text-custom-text-200">
                     {assignee
                       ? assignee.assignees__first_name + " " + assignee.assignees__last_name
diff --git a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
index c1e0e95fa..335ef993c 100644
--- a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
+++ b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
@@ -15,7 +15,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
   const quarterMonthsList = [startMonth, startMonth + 1, startMonth + 2];
 
   return (
-    <div className="py-3 border border-custom-border-100 rounded-[10px]">
+    <div className="py-3 border border-custom-border-300 rounded-[10px]">
       <h1 className="px-3 text-base font-medium">Issues closed in a year</h1>
       {defaultAnalytics.issue_completed_month_wise.length > 0 ? (
         <LineGraph
@@ -43,7 +43,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
           margin={{ top: 20 }}
           enableSlices="x"
           sliceTooltip={(datum) => (
-            <div className="rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
+            <div className="rounded-md border border-custom-border-300 bg-custom-background-80 p-2 text-xs">
               {datum.slice.points[0].data.yFormatted}
               <span className="text-custom-text-200"> issues closed in </span>
               {datum.slice.points[0].data.xFormatted}
diff --git a/apps/app/components/command-palette/command-pallette.tsx b/apps/app/components/command-palette/command-pallette.tsx
index 244265ff5..293b3557b 100644
--- a/apps/app/components/command-palette/command-pallette.tsx
+++ b/apps/app/components/command-palette/command-pallette.tsx
@@ -421,7 +421,7 @@ export const CommandPalette: React.FC = () => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-custom-border-100 divide-opacity-10 rounded-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-custom-border-300 divide-opacity-10 rounded-xl border border-custom-border-300 bg-custom-background-100 shadow-2xl transition-all">
                 <Command
                   filter={(value, search) => {
                     if (value.toLowerCase().includes(search.toLowerCase())) return 1;
@@ -456,7 +456,7 @@ export const CommandPalette: React.FC = () => {
                       aria-hidden="true"
                     />
                     <Command.Input
-                      className="w-full border-0 border-b border-custom-border-100 bg-transparent p-4 pl-11 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
+                      className="w-full border-0 border-b border-custom-border-300 bg-transparent p-4 pl-11 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
                       placeholder={placeholder}
                       value={searchTerm}
                       onValueChange={(e) => {
diff --git a/apps/app/components/command-palette/shortcuts-modal.tsx b/apps/app/components/command-palette/shortcuts-modal.tsx
index 339d3695e..41793f83f 100644
--- a/apps/app/components/command-palette/shortcuts-modal.tsx
+++ b/apps/app/components/command-palette/shortcuts-modal.tsx
@@ -104,7 +104,7 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                         </span>
                       </Dialog.Title>
                       <div>
-                        <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-custom-border-100 bg-custom-background-90 px-3 py-2">
+                        <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-custom-border-300 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"
@@ -130,15 +130,15 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                                       {shortcut.keys.split(",").map((key, index) => (
                                         <span key={index} className="flex items-center gap-1">
                                           {key === "Ctrl" ? (
-                                            <span className="flex h-full items-center rounded-sm border border-custom-border-100 bg-custom-background-90 p-1.5">
+                                            <span className="flex h-full items-center rounded-sm border border-custom-border-300 bg-custom-background-90 p-1.5">
                                               <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
                                             </span>
                                           ) : key === "Ctrl" ? (
-                                            <kbd className="rounded-sm border border-custom-border-100 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
+                                            <kbd className="rounded-sm border border-custom-border-300 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
                                               <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
                                             </kbd>
                                           ) : (
-                                            <kbd className="rounded-sm border border-custom-border-100 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
+                                            <kbd className="rounded-sm border border-custom-border-300 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
                                               {key}
                                             </kbd>
                                           )}
@@ -173,15 +173,15 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                                       {keys.split(",").map((key, index) => (
                                         <span key={index} className="flex items-center gap-1">
                                           {key === "Ctrl" ? (
-                                            <span className="flex h-full items-center rounded-sm border border-custom-border-100 bg-custom-background-90 p-1.5 text-custom-text-200">
+                                            <span className="flex h-full items-center rounded-sm border border-custom-border-300 bg-custom-background-90 p-1.5 text-custom-text-200">
                                               <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
                                             </span>
                                           ) : key === "Ctrl" ? (
-                                            <kbd className="rounded-sm border border-custom-border-100 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
+                                            <kbd className="rounded-sm border border-custom-border-300 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
                                               <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
                                             </kbd>
                                           ) : (
-                                            <kbd className="rounded-sm border border-custom-border-100 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
+                                            <kbd className="rounded-sm border border-custom-border-300 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
                                               {key}
                                             </kbd>
                                           )}
diff --git a/apps/app/components/core/board-view/all-boards.tsx b/apps/app/components/core/board-view/all-boards.tsx
index 7b5d1e527..003083aa9 100644
--- a/apps/app/components/core/board-view/all-boards.tsx
+++ b/apps/app/components/core/board-view/all-boards.tsx
@@ -74,7 +74,7 @@ export const AllBoards: React.FC<Props> = ({
             );
           })}
           {!showEmptyGroups && (
-            <div className="h-full w-96 flex-shrink-0 space-y-3 p-1">
+            <div className="h-full w-96 flex-shrink-0 space-y-2 p-1">
               <h2 className="text-lg font-semibold">Hidden groups</h2>
               <div className="space-y-3">
                 {Object.keys(groupedByIssues).map((singleGroup, index) => {
diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index e019d3a9e..ba7368ce1 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -392,7 +392,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
               />
             )}
             {properties.sub_issue_count && (
-              <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
+              <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
                   <div className="flex items-center gap-1 text-custom-text-200">
                     <LayerDiagonalIcon className="h-3.5 w-3.5" />
@@ -402,7 +402,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
               </div>
             )}
             {properties.link && (
-              <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
+              <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
                   <div className="flex items-center gap-1 text-custom-text-200">
                     <LinkIcon className="h-3.5 w-3.5" />
@@ -412,7 +412,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
               </div>
             )}
             {properties.attachment_count && (
-              <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
+              <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
                   <div className="flex items-center gap-1 text-custom-text-200">
                     <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
diff --git a/apps/app/components/core/calendar-view/calendar-header.tsx b/apps/app/components/core/calendar-view/calendar-header.tsx
index c9afc4217..9e9ea1916 100644
--- a/apps/app/components/core/calendar-view/calendar-header.tsx
+++ b/apps/app/components/core/calendar-view/calendar-header.tsx
@@ -92,7 +92,7 @@ export const CalendarHeader: React.FC<Props> = ({
                       </button>
                     ))}
                   </div>
-                  <div className="grid grid-cols-4  border-t border-custom-border-100 px-2">
+                  <div className="grid grid-cols-4  border-t border-custom-border-300 px-2">
                     {MONTHS_LIST.map((month) => (
                       <button
                         onClick={() =>
@@ -152,7 +152,7 @@ export const CalendarHeader: React.FC<Props> = ({
 
       <div className="flex w-full items-center justify-end gap-2">
         <button
-          className="group flex cursor-pointer items-center gap-2 rounded-md border border-custom-border-100 px-3 py-1 text-sm hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none"
+          className="group flex cursor-pointer items-center gap-2 rounded-md border border-custom-border-300 px-3 py-1 text-sm hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none"
           onClick={() => {
             if (isMonthlyView) {
               updateDate(new Date());
@@ -170,7 +170,7 @@ export const CalendarHeader: React.FC<Props> = ({
 
         <CustomMenu
           customButton={
-            <div className="group flex cursor-pointer items-center gap-2 rounded-md border border-custom-border-100 px-3 py-1 text-sm hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none ">
+            <div className="group flex cursor-pointer items-center gap-2 rounded-md border border-custom-border-300 px-3 py-1 text-sm hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none ">
               {isMonthlyView ? "Monthly" : "Weekly"}
               <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
             </div>
@@ -207,7 +207,7 @@ export const CalendarHeader: React.FC<Props> = ({
               />
             </div>
           </CustomMenu.MenuItem>
-          <div className="mt-1 flex w-52 items-center justify-between border-t border-custom-border-100 py-2 px-1  text-sm text-custom-text-200">
+          <div className="mt-1 flex w-52 items-center justify-between border-t border-custom-border-300 py-2 px-1  text-sm text-custom-text-200">
             <h4>Show weekends</h4>
             <ToggleSwitch value={showWeekEnds} onChange={() => setShowWeekEnds(!showWeekEnds)} />
           </div>
diff --git a/apps/app/components/core/calendar-view/calendar.tsx b/apps/app/components/core/calendar-view/calendar.tsx
index e61a7b1ce..719d5d19d 100644
--- a/apps/app/components/core/calendar-view/calendar.tsx
+++ b/apps/app/components/core/calendar-view/calendar.tsx
@@ -191,7 +191,7 @@ export const CalendarView: React.FC<Props> = ({
             {weeks.map((date, index) => (
               <div
                 key={index}
-                className={`flex  items-center justify-start gap-2 border-custom-border-100 bg-custom-background-90 p-1.5 text-base font-medium text-custom-text-200 ${
+                className={`flex  items-center justify-start gap-2 border-custom-border-300 bg-custom-background-90 p-1.5 text-base font-medium text-custom-text-200 ${
                   !isMonthlyView
                     ? showWeekEnds
                       ? (index + 1) % 7 === 0
diff --git a/apps/app/components/core/calendar-view/single-date.tsx b/apps/app/components/core/calendar-view/single-date.tsx
index 0e39e1950..dccf952f4 100644
--- a/apps/app/components/core/calendar-view/single-date.tsx
+++ b/apps/app/components/core/calendar-view/single-date.tsx
@@ -49,7 +49,7 @@ export const SingleCalendarDate: React.FC<Props> = ({
           key={index}
           ref={provided.innerRef}
           {...provided.droppableProps}
-          className={`group relative flex min-h-[150px] flex-col gap-1.5 border-t border-custom-border-100 p-2.5 text-left text-sm font-medium hover:bg-custom-background-90 ${
+          className={`group relative flex min-h-[150px] flex-col gap-1.5 border-t border-custom-border-300 p-2.5 text-left text-sm font-medium hover:bg-custom-background-90 ${
             isMonthlyView ? "" : "pt-9"
           } ${
             showWeekEnds
@@ -83,7 +83,7 @@ export const SingleCalendarDate: React.FC<Props> = ({
           {totalIssues > 4 && (
             <button
               type="button"
-              className="w-min whitespace-nowrap rounded-md border border-custom-border-100 bg-custom-background-80 px-1.5 py-1 text-xs"
+              className="w-min whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-80 px-1.5 py-1 text-xs"
               onClick={() => setShowAllIssues((prevData) => !prevData)}
             >
               {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
diff --git a/apps/app/components/core/calendar-view/single-issue.tsx b/apps/app/components/core/calendar-view/single-issue.tsx
index 7c5c89afa..bf64941f9 100644
--- a/apps/app/components/core/calendar-view/single-issue.tsx
+++ b/apps/app/components/core/calendar-view/single-issue.tsx
@@ -163,7 +163,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
       ref={provided.innerRef}
       {...provided.draggableProps}
       {...provided.dragHandleProps}
-      className={`w-full relative cursor-pointer rounded border border-custom-border-100 px-1.5 py-1.5 text-xs duration-300 hover:cursor-move hover:bg-custom-background-80 ${
+      className={`w-full relative cursor-pointer rounded border border-custom-border-300 px-1.5 py-1.5 text-xs duration-300 hover:cursor-move hover:bg-custom-background-80 ${
         snapshot.isDragging ? "bg-custom-background-80 shadow-lg" : ""
       }`}
     >
@@ -267,7 +267,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
               />
             )}
             {properties.sub_issue_count && (
-              <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
+              <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
                   <div className="flex items-center gap-1 text-custom-text-200">
                     <LayerDiagonalIcon className="h-3.5 w-3.5" />
@@ -277,7 +277,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
               </div>
             )}
             {properties.link && (
-              <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
+              <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
                   <div className="flex items-center gap-1 text-custom-text-200">
                     <LinkIcon className="h-3.5 w-3.5" />
@@ -287,7 +287,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
               </div>
             )}
             {properties.attachment_count && (
-              <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
+              <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
                   <div className="flex items-center gap-1 text-custom-text-200">
                     <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
diff --git a/apps/app/components/core/feeds.tsx b/apps/app/components/core/feeds.tsx
index 27be9ba31..b0de524c7 100644
--- a/apps/app/components/core/feeds.tsx
+++ b/apps/app/components/core/feeds.tsx
@@ -263,7 +263,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                       }
                       editable={false}
                       noBorder
-                      customClassName="text-xs border border-custom-border-100 bg-custom-background-100"
+                      customClassName="text-xs border border-custom-border-300 bg-custom-background-100"
                     />
                   </div>
                 </div>
diff --git a/apps/app/components/core/filters/due-date-filter-modal.tsx b/apps/app/components/core/filters/due-date-filter-modal.tsx
index e3a24a7b1..c63f76497 100644
--- a/apps/app/components/core/filters/due-date-filter-modal.tsx
+++ b/apps/app/components/core/filters/due-date-filter-modal.tsx
@@ -109,7 +109,7 @@ export const DueDateFilterModal: React.FC<Props> = ({ isOpen, handleClose }) =>
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative flex transform rounded-lg border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative flex transform rounded-lg border border-custom-border-300 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form className="space-y-4" onSubmit={handleSubmit(handleFormSubmit)}>
                   <div className="flex w-full justify-between">
                     <Controller
diff --git a/apps/app/components/core/filters/filters-list.tsx b/apps/app/components/core/filters/filters-list.tsx
index 2e895e5e4..d4215cf3c 100644
--- a/apps/app/components/core/filters/filters-list.tsx
+++ b/apps/app/components/core/filters/filters-list.tsx
@@ -58,7 +58,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
           return (
             <div
               key={key}
-              className="flex items-center gap-x-2 rounded-full border border-custom-border-100 bg-custom-background-80 px-2 py-1"
+              className="flex items-center gap-x-2 rounded-full border border-custom-border-300 bg-custom-background-80 px-2 py-1"
             >
               <span className="capitalize text-custom-text-200">
                 {key === "target_date" ? "Due Date" : replaceUnderscoreIfSnakeCase(key)}:
@@ -310,7 +310,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                         return (
                           <div
                             key={date}
-                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-100 bg-custom-background-100 px-1 py-0.5"
+                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-300 bg-custom-background-100 px-1 py-0.5"
                           >
                             <div className="h-1.5 w-1.5 rounded-full" />
                             <span className="capitalize">
@@ -381,7 +381,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
               target_date: null,
             })
           }
-          className="flex items-center gap-x-1 rounded-full border border-custom-border-100 bg-custom-background-80 px-3 py-1.5 text-xs"
+          className="flex items-center gap-x-1 rounded-full border border-custom-border-300 bg-custom-background-80 px-3 py-1.5 text-xs"
         >
           <span>Clear all filters</span>
           <XMarkIcon className="h-3 w-3" />
diff --git a/apps/app/components/core/filters/issues-view-filter.tsx b/apps/app/components/core/filters/issues-view-filter.tsx
index a0036325e..7a4fb246b 100644
--- a/apps/app/components/core/filters/issues-view-filter.tsx
+++ b/apps/app/components/core/filters/issues-view-filter.tsx
@@ -165,8 +165,8 @@ export const IssuesFilterView: React.FC = () => {
               leaveFrom="opacity-100 translate-y-0"
               leaveTo="opacity-0 translate-y-1"
             >
-              <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-100 bg-custom-background-90 p-3 shadow-lg">
-                <div className="relative divide-y-2 divide-custom-border-100">
+              <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-300 bg-custom-background-90 p-3 shadow-lg">
+                <div className="relative divide-y-2 divide-custom-border-300">
                   <div className="space-y-4 pb-3 text-xs">
                     {issueView !== "calendar" && issueView !== "spreadsheet" && (
                       <>
@@ -292,7 +292,7 @@ export const IssuesFilterView: React.FC = () => {
                             className={`rounded border px-2 py-1 text-xs capitalize ${
                               properties[key as keyof Properties]
                                 ? "border-custom-primary bg-custom-primary text-white"
-                                : "border-custom-border-100"
+                                : "border-custom-border-300"
                             }`}
                             onClick={() => setProperties(key as keyof Properties)}
                           >
diff --git a/apps/app/components/core/image-picker-popover.tsx b/apps/app/components/core/image-picker-popover.tsx
index 0bc64142d..84c90d9a4 100644
--- a/apps/app/components/core/image-picker-popover.tsx
+++ b/apps/app/components/core/image-picker-popover.tsx
@@ -62,7 +62,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
   return (
     <Popover className="relative z-[2]" ref={ref}>
       <Popover.Button
-        className="rounded-md border border-custom-border-100 bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200"
+        className="rounded-md border border-custom-border-300 bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200"
         onClick={() => setIsOpen((prev) => !prev)}
       >
         {label}
@@ -76,8 +76,8 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-100 bg-custom-background-80 shadow-lg">
-          <div className="h-96 w-80 overflow-auto rounded border border-custom-border-100 bg-custom-background-80 p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
+        <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-300 bg-custom-background-80 shadow-lg">
+          <div className="h-96 w-80 overflow-auto rounded border border-custom-border-300 bg-custom-background-80 p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
             <Tab.Group>
               <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
                 {tabOptions.map((tab) => (
diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index b53553c9f..7b22cb11f 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@@ -488,7 +488,7 @@ export const IssuesView: React.FC<Props> = ({
               {viewId ? "Update" : "Save"} view
             </PrimaryButton>
           </div>
-          {<div className="mt-3 border-t border-custom-border-100" />}
+          {<div className="mt-3 border-t border-custom-border-300" />}
         </>
       )}
 
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index 3e72598fe..af4e59edc 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -219,7 +219,7 @@ export const SingleListIssue: React.FC<Props> = ({
         </a>
       </ContextMenu>
       <div
-        className="flex flex-wrap items-center justify-between px-4 py-2.5 gap-2 border-b border-custom-border-100 bg-custom-background-100 last:border-b-0"
+        className="flex flex-wrap items-center justify-between px-4 py-2.5 gap-2 border-b border-custom-border-300 bg-custom-background-100 last:border-b-0"
         onContextMenu={(e) => {
           e.preventDefault();
           setContextMenu(true);
@@ -307,7 +307,7 @@ export const SingleListIssue: React.FC<Props> = ({
             />
           )}
           {properties.sub_issue_count && (
-            <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
                 <div className="flex items-center gap-1 text-custom-text-200">
                   <LayerDiagonalIcon className="h-3.5 w-3.5" />
@@ -317,7 +317,7 @@ export const SingleListIssue: React.FC<Props> = ({
             </div>
           )}
           {properties.link && (
-            <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
                 <div className="flex items-center gap-1 text-custom-text-200">
                   <LinkIcon className="h-3.5 w-3.5" />
@@ -327,7 +327,7 @@ export const SingleListIssue: React.FC<Props> = ({
             </div>
           )}
           {properties.attachment_count && (
-            <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
                 <div className="flex items-center gap-1 text-custom-text-200">
                   <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
diff --git a/apps/app/components/core/modals/bulk-delete-issues-modal.tsx b/apps/app/components/core/modals/bulk-delete-issues-modal.tsx
index 6addb2e94..3232cfbca 100644
--- a/apps/app/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/apps/app/components/core/modals/bulk-delete-issues-modal.tsx
@@ -173,7 +173,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all">
+            <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-300 bg-custom-background-100 shadow-2xl transition-all">
               <form>
                 <Combobox
                   onChange={(val: string) => {
@@ -201,7 +201,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
 
                   <Combobox.Options
                     static
-                    className="max-h-80 scroll-py-2 divide-y divide-custom-border-100 overflow-y-auto"
+                    className="max-h-80 scroll-py-2 divide-y divide-custom-border-300 overflow-y-auto"
                   >
                     {filteredIssues.length > 0 ? (
                       <li className="p-2">
diff --git a/apps/app/components/core/modals/existing-issues-list-modal.tsx b/apps/app/components/core/modals/existing-issues-list-modal.tsx
index 906d6d470..c3d3c5f28 100644
--- a/apps/app/components/core/modals/existing-issues-list-modal.tsx
+++ b/apps/app/components/core/modals/existing-issues-list-modal.tsx
@@ -154,7 +154,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-300 bg-custom-background-100 shadow-2xl transition-all">
                 <Combobox
                   as="div"
                   onChange={(val: ISearchIssueResponse) => {
@@ -182,7 +182,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                         {selectedIssues.map((issue) => (
                           <div
                             key={issue.id}
-                            className="flex items-center gap-1 text-xs border border-custom-border-100 bg-custom-background-80 pl-2 py-1 rounded-md text-custom-text-100 whitespace-nowrap"
+                            className="flex items-center gap-1 text-xs border border-custom-border-300 bg-custom-background-80 pl-2 py-1 rounded-md text-custom-text-100 whitespace-nowrap"
                           >
                             {issue.project__identifier}-{issue.sequence_id}
                             <button
@@ -200,7 +200,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                         ))}
                       </div>
                     ) : (
-                      <div className="w-min text-xs border border-custom-border-100 bg-custom-background-80 p-2 rounded-md whitespace-nowrap">
+                      <div className="w-min text-xs border border-custom-border-300 bg-custom-background-80 p-2 rounded-md whitespace-nowrap">
                         No issues selected
                       </div>
                     )}
diff --git a/apps/app/components/core/modals/gpt-assistant-modal.tsx b/apps/app/components/core/modals/gpt-assistant-modal.tsx
index dff1209c3..5dce1d5ad 100644
--- a/apps/app/components/core/modals/gpt-assistant-modal.tsx
+++ b/apps/app/components/core/modals/gpt-assistant-modal.tsx
@@ -143,7 +143,7 @@ export const GptAssistantModal: React.FC<Props> = ({
 
   return (
     <div
-      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4 shadow ${
+      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-4 shadow ${
         isOpen ? "block" : "hidden"
       }`}
     >
diff --git a/apps/app/components/core/modals/image-upload-modal.tsx b/apps/app/components/core/modals/image-upload-modal.tsx
index 9bca11124..ee25ff6e2 100644
--- a/apps/app/components/core/modals/image-upload-modal.tsx
+++ b/apps/app/components/core/modals/image-upload-modal.tsx
@@ -118,7 +118,7 @@ export const ImageUploadModal: React.FC<Props> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 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"
@@ -132,7 +132,7 @@ export const ImageUploadModal: React.FC<Props> = ({
                         {...getRootProps()}
                         className={`relative grid h-80 w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
                           (image === null && isDragActive) || !value
-                            ? "border-2 border-dashed border-custom-border-100 hover:bg-custom-background-90"
+                            ? "border-2 border-dashed border-custom-border-300 hover:bg-custom-background-90"
                             : ""
                         }`}
                       >
diff --git a/apps/app/components/core/sidebar/progress-chart.tsx b/apps/app/components/core/sidebar/progress-chart.tsx
index 86de2f336..d6f06a806 100644
--- a/apps/app/components/core/sidebar/progress-chart.tsx
+++ b/apps/app/components/core/sidebar/progress-chart.tsx
@@ -119,7 +119,7 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
         gridXValues={chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : ""))}
         enableSlices="x"
         sliceTooltip={(datum) => (
-          <div className="rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
+          <div className="rounded-md border border-custom-border-300 bg-custom-background-80 p-2 text-xs">
             {datum.slice.points[0].data.yFormatted}
             <span className="text-custom-text-200"> issues pending on </span>
             {datum.slice.points[0].data.xFormatted}
diff --git a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx
index cfa8bdc2b..92630026f 100644
--- a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx
+++ b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx
@@ -87,7 +87,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
         <Tab
           className={({ selected }) =>
             `w-full  ${
-              roundedTab ? "rounded-3xl border border-custom-border-100" : "rounded"
+              roundedTab ? "rounded-3xl border border-custom-border-300" : "rounded"
             } px-3 py-1 text-custom-text-100 ${
               selected ? " bg-custom-primary text-white" : "  hover:bg-custom-background-80"
             }`
@@ -98,7 +98,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
         <Tab
           className={({ selected }) =>
             `w-full ${
-              roundedTab ? "rounded-3xl border border-custom-border-100" : "rounded"
+              roundedTab ? "rounded-3xl border border-custom-border-300" : "rounded"
             } px-3 py-1 text-custom-text-100 ${
               selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
             }`
@@ -109,7 +109,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
         <Tab
           className={({ selected }) =>
             `w-full ${
-              roundedTab ? "rounded-3xl border border-custom-border-100" : "rounded"
+              roundedTab ? "rounded-3xl border border-custom-border-300" : "rounded"
             } px-3 py-1  text-custom-text-100 ${
               selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
             }`
@@ -159,7 +159,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
                   key={`unassigned-${index}`}
                   title={
                     <div className="flex items-center gap-2">
-                      <div className="h-5 w-5 rounded-full border-2 border-custom-border-100 bg-custom-background-80">
+                      <div className="h-5 w-5 rounded-full border-2 border-custom-border-300 bg-custom-background-80">
                         <img
                           src="/user.png"
                           height="100%"
diff --git a/apps/app/components/core/spreadsheet-view/single-issue.tsx b/apps/app/components/core/spreadsheet-view/single-issue.tsx
index f57007e2c..a6c6726cc 100644
--- a/apps/app/components/core/spreadsheet-view/single-issue.tsx
+++ b/apps/app/components/core/spreadsheet-view/single-issue.tsx
@@ -179,10 +179,10 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 
   return (
     <div
-      className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-100 w-full min-w-max"
+      className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-300 w-full min-w-max"
       style={{ gridTemplateColumns }}
     >
-      <div className="flex gap-1.5 items-center px-4 sticky z-[1] left-0 text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-100 w-full">
+      <div className="flex gap-1.5 items-center px-4 sticky z-[1] left-0 text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-300 w-full">
         <div className="flex gap-1.5 items-center" style={issue.parent ? { paddingLeft } : {}}>
           <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100 w-14">
             {properties.key && (
@@ -198,7 +198,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
                   onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
                   content={
                     <div
-                      className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-100 bg-custom-background-90`}
+                      className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-300 bg-custom-background-90`}
                     >
                       <button
                         type="button"
@@ -270,7 +270,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </Link>
       </div>
       {properties.state && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100">
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-300">
           <ViewStateSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -284,7 +284,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
       )}
       {properties.priority && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100">
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-300">
           <ViewPrioritySelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -297,7 +297,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
       )}
       {properties.assignee && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100">
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-300">
           <ViewAssigneeSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -310,7 +310,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
       )}
       {properties.labels && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100">
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-300">
           <ViewLabelSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -324,7 +324,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
       )}
 
       {properties.due_date && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100">
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-300">
           <ViewDueDateSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -336,7 +336,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
       )}
       {properties.estimate && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100">
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-300">
           <ViewEstimateSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -348,12 +348,12 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
       )}
       {properties.created_on && (
-        <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100">
+        <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-300">
           {renderLongDetailDateFormat(issue.created_at)}
         </div>
       )}
       {properties.updated_on && (
-        <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-100">
+        <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-300">
           {renderLongDetailDateFormat(issue.updated_at)}
         </div>
       )}
diff --git a/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx b/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
index ad78ae938..b47ab97a0 100644
--- a/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
+++ b/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
@@ -62,7 +62,7 @@ export const SpreadsheetView: React.FC<Props> = ({
 
   return (
     <div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
-      <div className="sticky z-[2] top-0 border-b border-custom-border-100 bg-custom-background-90 w-full min-w-max">
+      <div className="sticky z-[2] top-0 border-b border-custom-border-300 bg-custom-background-90 w-full min-w-max">
         <SpreadsheetColumns columnData={columnData} gridTemplateColumns={gridTemplateColumns} />
       </div>
       {spreadsheetIssues ? (
@@ -84,12 +84,12 @@ export const SpreadsheetView: React.FC<Props> = ({
             />
           ))}
           <div
-            className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-100 w-full min-w-max"
+            className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-300 w-full min-w-max"
             style={{ gridTemplateColumns }}
           >
             {type === "issue" ? (
               <button
-                className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-100 w-full"
+                className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-300 w-full"
                 onClick={() => {
                   const e = new KeyboardEvent("keydown", { key: "c" });
                   document.dispatchEvent(e);
@@ -104,7 +104,7 @@ export const SpreadsheetView: React.FC<Props> = ({
                   className="sticky left-0 z-[1]"
                   customButton={
                     <button
-                      className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-100 w-full"
+                      className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-300 w-full"
                       type="button"
                     >
                       <PlusIcon className="h-4 w-4" />
diff --git a/apps/app/components/core/theme/color-picker-input.tsx b/apps/app/components/core/theme/color-picker-input.tsx
index 1b740ca27..e08e3a196 100644
--- a/apps/app/components/core/theme/color-picker-input.tsx
+++ b/apps/app/components/core/theme/color-picker-input.tsx
@@ -81,7 +81,7 @@ export const ColorPickerInput: React.FC<Props> = ({ name, watch, setValue, error
               >
                 {watch(name) && watch(name) !== "" ? (
                   <span
-                    className="h-4 w-4 rounded border border-custom-border-100"
+                    className="h-4 w-4 rounded border border-custom-border-300"
                     style={{
                       backgroundColor: `${watch(name)}`,
                     }}
diff --git a/apps/app/components/cycles/active-cycle-details.tsx b/apps/app/components/cycles/active-cycle-details.tsx
index b97d7c9c6..b8ed189b6 100644
--- a/apps/app/components/cycles/active-cycle-details.tsx
+++ b/apps/app/components/cycles/active-cycle-details.tsx
@@ -209,8 +209,8 @@ export const ActiveCycleDetails: React.FC = () => {
   }));
 
   return (
-    <div className="grid-row-2 grid rounded-[10px] shadow divide-y bg-custom-background-100 border border-custom-border-100">
-      <div className="grid grid-cols-1 divide-y border-custom-border-100 lg:divide-y-0 lg:divide-x lg:grid-cols-3">
+    <div className="grid-row-2 grid rounded-[10px] shadow divide-y bg-custom-background-100 border border-custom-border-300">
+      <div className="grid grid-cols-1 divide-y border-custom-border-300 lg:divide-y-0 lg:divide-x lg:grid-cols-3">
         <div className="flex flex-col text-xs">
           <div className="h-full w-full">
             <div className="flex h-60 flex-col gap-5 justify-between rounded-b-[10px] p-4">
@@ -362,8 +362,8 @@ export const ActiveCycleDetails: React.FC = () => {
             </div>
           </div>
         </div>
-        <div className="grid col-span-2 grid-cols-1 divide-y border-custom-border-100 md:divide-y-0 md:divide-x md:grid-cols-2">
-          <div className="flex h-60 flex-col border-custom-border-100">
+        <div className="grid col-span-2 grid-cols-1 divide-y border-custom-border-300 md:divide-y-0 md:divide-x md:grid-cols-2">
+          <div className="flex h-60 flex-col border-custom-border-300">
             <div className="flex h-full w-full flex-col text-custom-text-200 p-4">
               <div className="flex w-full items-center gap-2 py-1">
                 <span>Progress</span>
@@ -391,12 +391,12 @@ export const ActiveCycleDetails: React.FC = () => {
               </div>
             </div>
           </div>
-          <div className="border-custom-border-100 h-60 overflow-y-scroll">
+          <div className="border-custom-border-300 h-60 overflow-y-scroll">
             <ActiveCycleProgressStats cycle={cycle} />
           </div>
         </div>
       </div>
-      <div className="grid grid-cols-1 divide-y border-custom-border-100 lg:divide-y-0 lg:divide-x lg:grid-cols-2">
+      <div className="grid grid-cols-1 divide-y border-custom-border-300 lg:divide-y-0 lg:divide-x lg:grid-cols-2">
         <div className="flex flex-col justify-between p-4">
           <div>
             <div className="text-custom-primary">High Priority Issues</div>
@@ -406,7 +406,7 @@ export const ActiveCycleDetails: React.FC = () => {
                   issues.map((issue) => (
                     <div
                       key={issue.id}
-                      className="flex flex-wrap rounded-md items-center justify-between gap-2 border border-custom-border-100 bg-custom-background-90 px-3 py-1.5"
+                      className="flex flex-wrap rounded-md items-center justify-between gap-2 border border-custom-border-300 bg-custom-background-90 px-3 py-1.5"
                     >
                       <div className="flex flex-col gap-1">
                         <div>
@@ -444,7 +444,7 @@ export const ActiveCycleDetails: React.FC = () => {
                             {issue.label_details.map((label) => (
                               <span
                                 key={label.id}
-                                className="group flex items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-200"
+                                className="group flex items-center gap-1 rounded-2xl border border-custom-border-300 px-2 py-0.5 text-xs text-custom-text-200"
                               >
                                 <span
                                   className="h-1.5 w-1.5  rounded-full"
@@ -517,7 +517,7 @@ export const ActiveCycleDetails: React.FC = () => {
             </div>
           )}
         </div>
-        <div className="flex flex-col justify-between border-custom-border-100 p-4">
+        <div className="flex flex-col justify-between border-custom-border-300 p-4">
           <div className="flex items-start justify-between gap-4 py-1.5 text-xs">
             <div className="flex items-center gap-3 text-custom-text-100">
               <div className="flex items-center justify-center gap-1">
diff --git a/apps/app/components/cycles/active-cycle-stats.tsx b/apps/app/components/cycles/active-cycle-stats.tsx
index 09a692b39..3a4638503 100644
--- a/apps/app/components/cycles/active-cycle-stats.tsx
+++ b/apps/app/components/cycles/active-cycle-stats.tsx
@@ -52,7 +52,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
       >
         <Tab
           className={({ selected }) =>
-            `px-3 py-1 text-custom-text-100 rounded-3xl border border-custom-border-100 ${
+            `px-3 py-1 text-custom-text-100 rounded-3xl border border-custom-border-300 ${
               selected ? " bg-custom-primary text-white" : "  hover:bg-custom-background-80"
             }`
           }
@@ -61,7 +61,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
         </Tab>
         <Tab
           className={({ selected }) =>
-            `px-3 py-1 text-custom-text-100 rounded-3xl border border-custom-border-100 ${
+            `px-3 py-1 text-custom-text-100 rounded-3xl border border-custom-border-300 ${
               selected ? " bg-custom-primary text-white" : "  hover:bg-custom-background-80"
             }`
           }
@@ -103,7 +103,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
                     key={`unassigned-${index}`}
                     title={
                       <div className="flex items-center gap-2">
-                        <div className="h-5 w-5 rounded-full border-2 border-custom-border-100 bg-custom-background-80">
+                        <div className="h-5 w-5 rounded-full border-2 border-custom-border-300 bg-custom-background-80">
                           <img
                             src="/user.png"
                             height="100%"
diff --git a/apps/app/components/cycles/cycles-view.tsx b/apps/app/components/cycles/cycles-view.tsx
index bcf3281ce..1f019002a 100644
--- a/apps/app/components/cycles/cycles-view.tsx
+++ b/apps/app/components/cycles/cycles-view.tsx
@@ -173,10 +173,10 @@ export const CyclesView: React.FC<Props> = ({ cycles, viewType }) => {
       {cycles ? (
         cycles.length > 0 ? (
           viewType === "list" ? (
-            <div className="divide-y divide-custom-border-100">
+            <div className="divide-y divide-custom-border-300">
               {cycles.map((cycle) => (
                 <div className="hover:bg-custom-background-80">
-                  <div className="flex flex-col border-custom-border-100">
+                  <div className="flex flex-col border-custom-border-300">
                     <SingleCycleList
                       key={cycle.id}
                       cycle={cycle}
diff --git a/apps/app/components/cycles/delete-cycle-modal.tsx b/apps/app/components/cycles/delete-cycle-modal.tsx
index 4d9a59b41..3ac4f372e 100644
--- a/apps/app/components/cycles/delete-cycle-modal.tsx
+++ b/apps/app/components/cycles/delete-cycle-modal.tsx
@@ -124,7 +124,7 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <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">
diff --git a/apps/app/components/cycles/form.tsx b/apps/app/components/cycles/form.tsx
index 8ff2b20d0..6dea3bba1 100644
--- a/apps/app/components/cycles/form.tsx
+++ b/apps/app/components/cycles/form.tsx
@@ -107,7 +107,7 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
           </div>
         </div>
       </div>
-      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-100 px-5 pt-5">
+      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-300 px-5 pt-5">
         <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
         <PrimaryButton type="submit" loading={isSubmitting}>
           {status
diff --git a/apps/app/components/cycles/modal.tsx b/apps/app/components/cycles/modal.tsx
index 3af8b1cec..c68acceb6 100644
--- a/apps/app/components/cycles/modal.tsx
+++ b/apps/app/components/cycles/modal.tsx
@@ -247,7 +247,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-300 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <CycleForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/cycles/select.tsx b/apps/app/components/cycles/select.tsx
index 70aad5b88..59b9ecd08 100644
--- a/apps/app/components/cycles/select.tsx
+++ b/apps/app/components/cycles/select.tsx
@@ -66,7 +66,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
         {({ open }) => (
           <>
             <Listbox.Button
-              className={`flex cursor-pointer items-center gap-1 rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-custom-background-90 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
+              className={`flex cursor-pointer items-center gap-1 rounded-md border border-custom-border-300 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-custom-background-90 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
             >
               <CyclesIcon className="h-3 w-3 text-custom-text-200" />
               <div className="flex items-center gap-2 truncate">
diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index 6c9cce134..55a500776 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -292,14 +292,14 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
       <div
         className={`fixed top-[66px] ${
           isOpen ? "right-0" : "-right-[24rem]"
-        } h-full w-[24rem] overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 pt-5 pb-10 duration-300`}
+        } h-full w-[24rem] overflow-y-auto border-l border-custom-border-300 bg-custom-sidebar-background-100 pt-5 pb-10 duration-300`}
       >
         {cycle ? (
           <>
             <div className="flex flex-col items-start justify-center">
               <div className="flex gap-2.5 px-5 text-sm">
                 <div className="flex items-center">
-                  <span className="flex items-center rounded border-[0.5px] border-custom-border-100 bg-custom-background-90 px-2 py-1 text-center text-xs capitalize">
+                  <span className="flex items-center rounded border-[0.5px] border-custom-border-300 bg-custom-background-90 px-2 py-1 text-center text-xs capitalize">
                     {capitalizeFirstLetter(cycleStatus)}
                   </span>
                 </div>
@@ -309,7 +309,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                       <>
                         <Popover.Button
                           disabled={isCompleted ?? false}
-                          className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-100 bg-custom-background-90 px-2 py-1 text-xs ${
+                          className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-300 bg-custom-background-90 px-2 py-1 text-xs ${
                             cycle.start_date ? "" : "text-custom-text-200"
                           }`}
                         >
@@ -359,7 +359,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                       <>
                         <Popover.Button
                           disabled={isCompleted ?? false}
-                          className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-100 bg-custom-background-90 px-2 py-1 text-xs ${
+                          className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-300 bg-custom-background-90 px-2 py-1 text-xs ${
                             cycle.end_date ? "" : "text-custom-text-200"
                           }`}
                         >
@@ -477,7 +477,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                 </div>
               </div>
             </div>
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-100 p-6">
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-300 p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
                   <div
@@ -561,7 +561,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                 )}
               </Disclosure>
             </div>
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-100 p-6">
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-300 p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
                   <div
diff --git a/apps/app/components/cycles/single-cycle-card.tsx b/apps/app/components/cycles/single-cycle-card.tsx
index b5ae3f28d..817ca902f 100644
--- a/apps/app/components/cycles/single-cycle-card.tsx
+++ b/apps/app/components/cycles/single-cycle-card.tsx
@@ -128,7 +128,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
 
   return (
     <div>
-      <div className="flex flex-col rounded-[10px] bg-custom-background-100 border border-custom-border-100 text-xs shadow">
+      <div className="flex flex-col rounded-[10px] bg-custom-background-100 border border-custom-border-300 text-xs shadow">
         <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
           <a className="w-full">
             <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
@@ -321,7 +321,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
           <Disclosure>
             {({ open }) => (
               <div
-                className={`flex h-full w-full flex-col rounded-b-[10px] border-t border-custom-border-100 bg-custom-background-80 text-custom-text-200 ${
+                className={`flex h-full w-full flex-col rounded-b-[10px] border-t border-custom-border-300 bg-custom-background-80 text-custom-text-200 ${
                   open ? "" : "flex-row"
                 }`}
               >
diff --git a/apps/app/components/cycles/transfer-issues-modal.tsx b/apps/app/components/cycles/transfer-issues-modal.tsx
index fe71d82a2..b3889e024 100644
--- a/apps/app/components/cycles/transfer-issues-modal.tsx
+++ b/apps/app/components/cycles/transfer-issues-modal.tsx
@@ -119,7 +119,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                       <XMarkIcon className="h-4 w-4" />
                     </button>
                   </div>
-                  <div className="flex items-center gap-2 border-b border-custom-border-100 px-5 pb-3">
+                  <div className="flex items-center gap-2 border-b border-custom-border-300 px-5 pb-3">
                     <MagnifyingGlassIcon className="h-4 w-4 text-custom-text-200" />
                     <input
                       className="bg-custom-background-90 outline-none"
diff --git a/apps/app/components/emoji-icon-picker/index.tsx b/apps/app/components/emoji-icon-picker/index.tsx
index ff9a40d40..c8f05c422 100644
--- a/apps/app/components/emoji-icon-picker/index.tsx
+++ b/apps/app/components/emoji-icon-picker/index.tsx
@@ -63,8 +63,8 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] border border-custom-border-100 bg-custom-background-80 shadow-lg">
-          <div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-100 bg-custom-background-80 p-2 shadow-xl">
+        <Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] border border-custom-border-300 bg-custom-background-80 shadow-lg">
+          <div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-300 bg-custom-background-80 p-2 shadow-xl">
             <Tab.Group as="div" className="flex h-full w-full flex-col">
               <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
                 {tabOptions.map((tab) => (
@@ -107,7 +107,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
                       </div>
                     </div>
                   )}
-                  <hr className="mb-2 h-[1px] w-full border-custom-border-100" />
+                  <hr className="mb-2 h-[1px] w-full border-custom-border-300" />
                   <div>
                     <div className="grid grid-cols-8 gap-x-2 gap-y-3">
                       {emojis.map((emoji) => (
@@ -173,7 +173,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
                         />
                       </div>
                     </div>
-                    <hr className="mb-1 h-[1px] w-full border-custom-border-100" />
+                    <hr className="mb-1 h-[1px] w-full border-custom-border-300" />
                     <div className="mt-1 ml-1 grid grid-cols-8 gap-x-2 gap-y-3">
                       {icons.material_rounded.map((icon, index) => (
                         <button
diff --git a/apps/app/components/estimates/create-update-estimate-modal.tsx b/apps/app/components/estimates/create-update-estimate-modal.tsx
index e9caeeee3..3fc86662d 100644
--- a/apps/app/components/estimates/create-update-estimate-modal.tsx
+++ b/apps/app/components/estimates/create-update-estimate-modal.tsx
@@ -254,7 +254,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                 leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                 leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
               >
-                <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <Dialog.Panel className="relative transform rounded-lg border border-custom-border-300 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                   <form onSubmit={handleSubmit(onSubmit)}>
                     <div className="space-y-3">
                       <div className="text-lg font-medium leading-6">
diff --git a/apps/app/components/estimates/delete-estimate-modal.tsx b/apps/app/components/estimates/delete-estimate-modal.tsx
index 52cc42417..f1b725ff3 100644
--- a/apps/app/components/estimates/delete-estimate-modal.tsx
+++ b/apps/app/components/estimates/delete-estimate-modal.tsx
@@ -60,7 +60,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
diff --git a/apps/app/components/gantt-chart/blocks/index.tsx b/apps/app/components/gantt-chart/blocks/index.tsx
index 7e3f9972d..aa3311c29 100644
--- a/apps/app/components/gantt-chart/blocks/index.tsx
+++ b/apps/app/components/gantt-chart/blocks/index.tsx
@@ -44,7 +44,7 @@ export const GanttChartBlocks: FC<{
                     </div>
 
                     <div
-                      className="rounded shadow-sm bg-custom-background-100 overflow-hidden relative flex items-center h-[34px] border border-custom-border-100"
+                      className="rounded shadow-sm bg-custom-background-100 overflow-hidden relative flex items-center h-[34px] border border-custom-border-300"
                       style={{
                         width: `${block?.position?.width}px`,
                       }}
@@ -68,7 +68,7 @@ export const GanttChartBlocks: FC<{
       </div>
 
       {/* sidebar */}
-      {/* <div className="fixed top-0 bottom-0 w-[300px] flex-shrink-0 divide-y divide-custom-border-100 border-r border-custom-border-100 overflow-y-auto">
+      {/* <div className="fixed top-0 bottom-0 w-[300px] flex-shrink-0 divide-y divide-custom-border-300 border-r border-custom-border-300 overflow-y-auto">
         {blocks &&
           blocks.length > 0 &&
           blocks.map((block: any, _idx: number) => (
diff --git a/apps/app/components/gantt-chart/chart/bi-week.tsx b/apps/app/components/gantt-chart/chart/bi-week.tsx
index 8c46eaf6b..a53ba8a3c 100644
--- a/apps/app/components/gantt-chart/chart/bi-week.tsx
+++ b/apps/app/components/gantt-chart/chart/bi-week.tsx
@@ -7,18 +7,18 @@ export const BiWeekChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-100">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-300">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-custom-border-100">
+              <div className="relative border-b border-custom-border-300">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-custom-border-100">
+              <div className="flex h-full w-full divide-x divide-custom-border-300">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const BiWeekChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-100`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-300`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/apps/app/components/gantt-chart/chart/day.tsx b/apps/app/components/gantt-chart/chart/day.tsx
index f8b3458cb..18fd9cabf 100644
--- a/apps/app/components/gantt-chart/chart/day.tsx
+++ b/apps/app/components/gantt-chart/chart/day.tsx
@@ -7,18 +7,18 @@ export const DayChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-100">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-300">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-custom-border-100">
+              <div className="relative border-b border-custom-border-300">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-custom-border-100">
+              <div className="flex h-full w-full divide-x divide-custom-border-300">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const DayChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-100`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-300`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/apps/app/components/gantt-chart/chart/hours.tsx b/apps/app/components/gantt-chart/chart/hours.tsx
index 2ee097664..b1f235464 100644
--- a/apps/app/components/gantt-chart/chart/hours.tsx
+++ b/apps/app/components/gantt-chart/chart/hours.tsx
@@ -7,18 +7,18 @@ export const HourChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-100">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-300">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-custom-border-100">
+              <div className="relative border-b border-custom-border-300">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-custom-border-100">
+              <div className="flex h-full w-full divide-x divide-custom-border-300">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const HourChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-100`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-300`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx
index 5731abc2f..8bfbcee16 100644
--- a/apps/app/components/gantt-chart/chart/index.tsx
+++ b/apps/app/components/gantt-chart/chart/index.tsx
@@ -219,11 +219,11 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
           ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-custom-background-100`
           : `relative`
       } ${
-        border ? `border border-custom-border-100` : ``
+        border ? `border border-custom-border-300` : ``
       } flex h-full flex-col rounded-sm select-none bg-custom-background-100 shadow`}
     >
       {/* chart title */}
-      {/* <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-custom-border-100">
+      {/* <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-custom-border-300">
         {title && (
           <div className="text-lg font-medium flex gap-2 items-center">
             <div>{title}</div>
@@ -244,7 +244,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       {/* chart header */}
       <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2">
         {/* <div
-          className="transition-all border border-custom-border-100 w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80"
+          className="transition-all border border-custom-border-300 w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80"
           onClick={() => setBlocksSidebarView(() => !blocksSidebarView)}
         >
           {blocksSidebarView ? (
@@ -279,7 +279,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             allViews.map((_chatView: any, _idx: any) => (
               <div
                 key={_chatView?.key}
-                className={`cursor-pointer rounded-sm border border-custom-border-100 p-1 px-2 text-xs ${
+                className={`cursor-pointer rounded-sm border border-custom-border-300 p-1 px-2 text-xs ${
                   currentView === _chatView?.key
                     ? `bg-custom-background-80`
                     : `hover:bg-custom-background-90`
@@ -293,7 +293,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
 
         <div className="flex items-center gap-1">
           <div
-            className={`cursor-pointer rounded-sm border border-custom-border-100 p-1 px-2 text-xs hover:bg-custom-background-80`}
+            className={`cursor-pointer rounded-sm border border-custom-border-300 p-1 px-2 text-xs hover:bg-custom-background-80`}
             onClick={handleToday}
           >
             Today
@@ -301,7 +301,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
         </div>
 
         <div
-          className="transition-all border border-custom-border-100 w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80"
+          className="transition-all border border-custom-border-300 w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80"
           onClick={() => setFullScreenMode(() => !fullScreenMode)}
         >
           {fullScreenMode ? (
@@ -313,7 +313,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       </div>
 
       {/* content */}
-      <div className="relative flex h-full w-full flex-1 overflow-hidden border-t border-custom-border-100">
+      <div className="relative flex h-full w-full flex-1 overflow-hidden border-t border-custom-border-300">
         <div
           className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto"
           id="scroll-container"
diff --git a/apps/app/components/gantt-chart/chart/month.tsx b/apps/app/components/gantt-chart/chart/month.tsx
index 7941de48c..e3b32fe40 100644
--- a/apps/app/components/gantt-chart/chart/month.tsx
+++ b/apps/app/components/gantt-chart/chart/month.tsx
@@ -7,18 +7,18 @@ export const MonthChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-100">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-300">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-custom-border-100">
+              <div className="relative border-b border-custom-border-300">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-custom-border-100">
+              <div className="flex h-full w-full divide-x divide-custom-border-300">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const MonthChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-100`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-300`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/apps/app/components/gantt-chart/chart/quarter.tsx b/apps/app/components/gantt-chart/chart/quarter.tsx
index 159eeaa63..538bed920 100644
--- a/apps/app/components/gantt-chart/chart/quarter.tsx
+++ b/apps/app/components/gantt-chart/chart/quarter.tsx
@@ -7,18 +7,18 @@ export const QuarterChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-100">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-300">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-custom-border-100">
+              <div className="relative border-b border-custom-border-300">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-custom-border-100">
+              <div className="flex h-full w-full divide-x divide-custom-border-300">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const QuarterChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-100`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-300`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/apps/app/components/gantt-chart/chart/week.tsx b/apps/app/components/gantt-chart/chart/week.tsx
index da87ff811..281f67681 100644
--- a/apps/app/components/gantt-chart/chart/week.tsx
+++ b/apps/app/components/gantt-chart/chart/week.tsx
@@ -7,18 +7,18 @@ export const WeekChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-100">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-300">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-custom-border-100">
+              <div className="relative border-b border-custom-border-300">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-custom-border-100">
+              <div className="flex h-full w-full divide-x divide-custom-border-300">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const WeekChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-100`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-300`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/apps/app/components/gantt-chart/chart/year.tsx b/apps/app/components/gantt-chart/chart/year.tsx
index ec4578ca4..2be0b5a10 100644
--- a/apps/app/components/gantt-chart/chart/year.tsx
+++ b/apps/app/components/gantt-chart/chart/year.tsx
@@ -7,18 +7,18 @@ export const YearChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-100">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-300">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-custom-border-100">
+              <div className="relative border-b border-custom-border-300">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-custom-border-100">
+              <div className="flex h-full w-full divide-x divide-custom-border-300">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const YearChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-100`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-300`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/apps/app/components/inbox/accept-issue-modal.tsx b/apps/app/components/inbox/accept-issue-modal.tsx
index 82979051c..d6eef1d3e 100644
--- a/apps/app/components/inbox/accept-issue-modal.tsx
+++ b/apps/app/components/inbox/accept-issue-modal.tsx
@@ -56,7 +56,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-green-500/20 p-4">
diff --git a/apps/app/components/inbox/decline-issue-modal.tsx b/apps/app/components/inbox/decline-issue-modal.tsx
index 36fa0b72d..a14e4277d 100644
--- a/apps/app/components/inbox/decline-issue-modal.tsx
+++ b/apps/app/components/inbox/decline-issue-modal.tsx
@@ -56,7 +56,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
diff --git a/apps/app/components/inbox/delete-issue-modal.tsx b/apps/app/components/inbox/delete-issue-modal.tsx
index 8973a1395..3fa2ffe67 100644
--- a/apps/app/components/inbox/delete-issue-modal.tsx
+++ b/apps/app/components/inbox/delete-issue-modal.tsx
@@ -111,7 +111,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
diff --git a/apps/app/components/inbox/filters-dropdown.tsx b/apps/app/components/inbox/filters-dropdown.tsx
index 3ca57d42d..a8ed04c20 100644
--- a/apps/app/components/inbox/filters-dropdown.tsx
+++ b/apps/app/components/inbox/filters-dropdown.tsx
@@ -72,7 +72,7 @@ export const FiltersDropdown: React.FC = () => {
         ]}
       />
       {filtersLength > 0 && (
-        <div className="absolute -top-2 -right-2 h-4 w-4 text-[0.65rem] grid place-items-center rounded-full text-custom-text-100 bg-custom-background-80 border border-custom-border-100 z-10">
+        <div className="absolute -top-2 -right-2 h-4 w-4 text-[0.65rem] grid place-items-center rounded-full text-custom-text-100 bg-custom-background-80 border border-custom-border-300 z-10">
           <span>{filtersLength}</span>
         </div>
       )}
diff --git a/apps/app/components/inbox/filters-list.tsx b/apps/app/components/inbox/filters-list.tsx
index a7430872d..aef9e02ee 100644
--- a/apps/app/components/inbox/filters-list.tsx
+++ b/apps/app/components/inbox/filters-list.tsx
@@ -22,7 +22,7 @@ export const InboxFiltersList = () => {
           return (
             <div
               key={key}
-              className="flex items-center gap-x-2 rounded-full border border-custom-border-100 bg-custom-background-80 px-2 py-1"
+              className="flex items-center gap-x-2 rounded-full border border-custom-border-300 bg-custom-background-80 px-2 py-1"
             >
               <span className="capitalize text-custom-text-200">
                 {replaceUnderscoreIfSnakeCase(key)}:
@@ -116,7 +116,7 @@ export const InboxFiltersList = () => {
       <button
         type="button"
         onClick={clearAllFilters}
-        className="flex items-center gap-x-1 rounded-full border border-custom-border-100 bg-custom-background-80 px-3 py-1.5 text-custom-text-200 hover:text-custom-text-100"
+        className="flex items-center gap-x-1 rounded-full border border-custom-border-300 bg-custom-background-80 px-3 py-1.5 text-custom-text-200 hover:text-custom-text-100"
       >
         <span>Clear all</span>
         <XMarkIcon className="h-3 w-3" />
diff --git a/apps/app/components/inbox/inbox-action-headers.tsx b/apps/app/components/inbox/inbox-action-headers.tsx
index a26e0aede..d19e028c9 100644
--- a/apps/app/components/inbox/inbox-action-headers.tsx
+++ b/apps/app/components/inbox/inbox-action-headers.tsx
@@ -162,7 +162,7 @@ export const InboxActionHeader = () => {
         handleClose={() => setDeleteIssueModal(false)}
         data={inboxIssues?.find((i) => i.bridge_id === inboxIssueId)}
       />
-      <div className="grid grid-cols-4 border-b border-custom-border-100 divide-x divide-custom-border-100">
+      <div className="grid grid-cols-4 border-b border-custom-border-300 divide-x divide-custom-border-300">
         <div className="col-span-1 flex justify-between p-4">
           <div className="flex items-center gap-2">
             <InboxIcon className="h-4 w-4 text-custom-text-200" />
@@ -175,7 +175,7 @@ export const InboxActionHeader = () => {
             <div className="flex items-center gap-x-2">
               <button
                 type="button"
-                className="rounded border border-custom-border-100 bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
+                className="rounded border border-custom-border-300 bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
                 onClick={() => {
                   const e = new KeyboardEvent("keydown", { key: "ArrowUp" });
                   document.dispatchEvent(e);
@@ -185,7 +185,7 @@ export const InboxActionHeader = () => {
               </button>
               <button
                 type="button"
-                className="rounded border border-custom-border-100 bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
+                className="rounded border border-custom-border-300 bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
                 onClick={() => {
                   const e = new KeyboardEvent("keydown", { key: "ArrowDown" });
                   document.dispatchEvent(e);
@@ -207,7 +207,7 @@ export const InboxActionHeader = () => {
                         <span>Snooze</span>
                       </SecondaryButton>
                     </Popover.Button>
-                    <Popover.Panel className="w-80 p-2 absolute right-0 z-10 mt-2 rounded-md border border-custom-border-100 bg-custom-background-80 shadow-lg">
+                    <Popover.Panel className="w-80 p-2 absolute right-0 z-10 mt-2 rounded-md border border-custom-border-300 bg-custom-background-80 shadow-lg">
                       {({ close }) => (
                         <div className="w-full h-full flex flex-col gap-y-1">
                           <DatePicker
diff --git a/apps/app/components/inbox/inbox-issue-card.tsx b/apps/app/components/inbox/inbox-issue-card.tsx
index f226d91a5..187940e68 100644
--- a/apps/app/components/inbox/inbox-issue-card.tsx
+++ b/apps/app/components/inbox/inbox-issue-card.tsx
@@ -40,7 +40,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
       <a>
         <div
           id={issue.id}
-          className={`relative min-h-[5rem] cursor-pointer select-none space-y-3 py-2 px-4 border-b border-custom-border-100 hover:bg-custom-primary/5 ${
+          className={`relative min-h-[5rem] cursor-pointer select-none space-y-3 py-2 px-4 border-b border-custom-border-300 hover:bg-custom-primary/5 ${
             active ? "bg-custom-primary/5" : " "
           } ${issue.issue_inbox[0].status !== -2 ? "opacity-60" : ""}`}
         >
@@ -62,7 +62,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
                     ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
                     : issue.priority === "low"
                     ? "border-green-500/20 bg-green-500/20 text-green-500"
-                    : "border-custom-border-100"
+                    : "border-custom-border-300"
                 }`}
               >
                 {getPriorityIcon(
@@ -75,7 +75,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
               tooltipHeading="Created on"
               tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`}
             >
-              <div className="flex items-center gap-1 rounded border border-custom-border-100 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200">
+              <div className="flex items-center gap-1 rounded border border-custom-border-300 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200">
                 <CalendarDaysIcon className="h-3.5 w-3.5" />
                 <span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span>
               </div>
diff --git a/apps/app/components/inbox/inbox-main-content.tsx b/apps/app/components/inbox/inbox-main-content.tsx
index 3a0b5550b..14a9be325 100644
--- a/apps/app/components/inbox/inbox-main-content.tsx
+++ b/apps/app/components/inbox/inbox-main-content.tsx
@@ -310,7 +310,7 @@ export const InboxMainContent: React.FC = () => {
             </div>
           </div>
 
-          <div className="basis-1/3 space-y-5 border-custom-border-100 p-5">
+          <div className="basis-1/3 space-y-5 border-custom-border-300 p-5">
             <IssueDetailsSidebar
               control={control}
               issueDetail={issueDetails}
diff --git a/apps/app/components/inbox/issues-list-sidebar.tsx b/apps/app/components/inbox/issues-list-sidebar.tsx
index c188a1b39..ec9b39c3d 100644
--- a/apps/app/components/inbox/issues-list-sidebar.tsx
+++ b/apps/app/components/inbox/issues-list-sidebar.tsx
@@ -18,7 +18,7 @@ export const IssuesListSidebar = () => {
       <InboxFiltersList />
       {inboxIssues ? (
         inboxIssues.length > 0 ? (
-          <div className="divide-y divide-custom-border-100 overflow-auto h-full">
+          <div className="divide-y divide-custom-border-300 overflow-auto h-full">
             {inboxIssues.map((issue) => (
               <InboxIssueCard
                 key={issue.id}
diff --git a/apps/app/components/inbox/select-duplicate.tsx b/apps/app/components/inbox/select-duplicate.tsx
index a28ba072a..6cff72d5f 100644
--- a/apps/app/components/inbox/select-duplicate.tsx
+++ b/apps/app/components/inbox/select-duplicate.tsx
@@ -101,7 +101,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all">
+                <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-300 bg-custom-background-100 shadow-2xl transition-all">
                   <Combobox
                     value={selectedItem}
                     onChange={(value) => {
@@ -123,7 +123,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
 
                     <Combobox.Options
                       static
-                      className="max-h-80 scroll-py-2 divide-y divide-custom-border-100 overflow-y-auto"
+                      className="max-h-80 scroll-py-2 divide-y divide-custom-border-300 overflow-y-auto"
                     >
                       {filteredIssues.length > 0 ? (
                         <li className="p-2">
diff --git a/apps/app/components/integration/delete-import-modal.tsx b/apps/app/components/integration/delete-import-modal.tsx
index 6566399c3..74bd1c973 100644
--- a/apps/app/components/integration/delete-import-modal.tsx
+++ b/apps/app/components/integration/delete-import-modal.tsx
@@ -88,7 +88,7 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
diff --git a/apps/app/components/integration/github/root.tsx b/apps/app/components/integration/github/root.tsx
index ebbd76ee5..34b122ee3 100644
--- a/apps/app/components/integration/github/root.tsx
+++ b/apps/app/components/integration/github/root.tsx
@@ -185,7 +185,7 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
           </div>
         </Link>
 
-        <div className="space-y-4 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4">
+        <div className="space-y-4 rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-4">
           <div className="flex items-center gap-2">
             <div className="h-10 w-10 flex-shrink-0">
               <Image src={GithubLogo} alt="GithubLogo" />
@@ -201,7 +201,7 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
                               ? "border-opacity-100 bg-opacity-100"
                               : "border-opacity-80 bg-opacity-80"
                           }`
-                        : "border-custom-border-100"
+                        : "border-custom-border-300"
                     }`}
                   >
                     <integration.icon
@@ -216,7 +216,7 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
                       className={`border-b px-7 ${
                         index <= activeIntegrationState() - 1
                           ? `border-custom-primary`
-                          : `border-custom-border-100`
+                          : `border-custom-border-300`
                       }`}
                     >
                       {" "}
diff --git a/apps/app/components/integration/guide.tsx b/apps/app/components/integration/guide.tsx
index 1b1a56bb9..9cf6a06d4 100644
--- a/apps/app/components/integration/guide.tsx
+++ b/apps/app/components/integration/guide.tsx
@@ -83,7 +83,7 @@ const IntegrationGuide = () => {
               {IMPORTERS_EXPORTERS_LIST.map((service) => (
                 <div
                   key={service.provider}
-                  className="rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4"
+                  className="rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-4"
                 >
                   <div className="flex items-center gap-4 whitespace-nowrap">
                     <div className="relative h-10 w-10 flex-shrink-0">
@@ -113,7 +113,7 @@ const IntegrationGuide = () => {
                 </div>
               ))}
             </div>
-            <div className="rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4">
+            <div className="rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-4">
               <h3 className="mb-2 flex gap-2 text-lg font-medium">
                 Previous Imports
                 <button
@@ -133,7 +133,7 @@ const IntegrationGuide = () => {
               {importerServices ? (
                 importerServices.length > 0 ? (
                   <div className="space-y-2">
-                    <div className="divide-y divide-custom-border-100">
+                    <div className="divide-y divide-custom-border-300">
                       {importerServices.map((service) => (
                         <SingleImport
                           key={service.id}
diff --git a/apps/app/components/integration/jira/import-users.tsx b/apps/app/components/integration/jira/import-users.tsx
index 8c7e04788..57d35a964 100644
--- a/apps/app/components/integration/jira/import-users.tsx
+++ b/apps/app/components/integration/jira/import-users.tsx
@@ -51,7 +51,7 @@ export const JiraImportUsers: FC = () => {
   }));
 
   return (
-    <div className="h-full w-full space-y-10 divide-y-2 divide-custom-border-100 overflow-y-auto">
+    <div className="h-full w-full space-y-10 divide-y-2 divide-custom-border-300 overflow-y-auto">
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Users</h3>
diff --git a/apps/app/components/integration/jira/root.tsx b/apps/app/components/integration/jira/root.tsx
index 35dc14357..ee7fcd871 100644
--- a/apps/app/components/integration/jira/root.tsx
+++ b/apps/app/components/integration/jira/root.tsx
@@ -118,7 +118,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
         </div>
       </Link>
 
-      <div className="flex h-full flex-col space-y-4 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4">
+      <div className="flex h-full flex-col space-y-4 rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-4">
         <div className="flex items-center gap-2">
           <div className="h-10 w-10 flex-shrink-0">
             <Image src={JiraLogo} alt="jira logo" />
@@ -135,14 +135,14 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
                     index > activeIntegrationState() + 1 ||
                     Boolean(index === activeIntegrationState() + 1 && disableTopBarAfter)
                   }
-                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-custom-border-100 ${
+                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-custom-border-300 ${
                     index <= activeIntegrationState()
                       ? `border-custom-primary bg-custom-primary ${
                           index === activeIntegrationState()
                             ? "border-opacity-100 bg-opacity-100"
                             : "border-opacity-80 bg-opacity-80"
                         }`
-                      : "border-custom-border-100"
+                      : "border-custom-border-300"
                   }`}
                 >
                   <integration.icon
@@ -157,7 +157,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
                     className={`border-b px-7 ${
                       index <= activeIntegrationState() - 1
                         ? `border-custom-primary`
-                        : `border-custom-border-100`
+                        : `border-custom-border-300`
                     }`}
                   >
                     {" "}
@@ -183,7 +183,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
                 {currentStep?.state === "import-confirmation" && <JiraConfirmImport />}
               </div>
 
-              <div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-custom-border-100 p-4 pb-0">
+              <div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-custom-border-300 p-4 pb-0">
                 {currentStep?.state !== "import-configure" && (
                   <SecondaryButton
                     onClick={() => {
diff --git a/apps/app/components/integration/single-integration-card.tsx b/apps/app/components/integration/single-integration-card.tsx
index 8d1d480f0..48ff7e7e2 100644
--- a/apps/app/components/integration/single-integration-card.tsx
+++ b/apps/app/components/integration/single-integration-card.tsx
@@ -99,7 +99,7 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
   );
 
   return (
-    <div className="flex items-center justify-between gap-2 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-5">
+    <div className="flex items-center justify-between gap-2 rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-5">
       <div className="flex items-start gap-4">
         <div className="h-12 w-12 flex-shrink-0">
           <Image
diff --git a/apps/app/components/issues/activity.tsx b/apps/app/components/issues/activity.tsx
index d5ee2abd9..cc4ce16ba 100644
--- a/apps/app/components/issues/activity.tsx
+++ b/apps/app/components/issues/activity.tsx
@@ -288,7 +288,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
             }
 
             value = (
-              <span className="relative inline-flex items-center rounded-full border border-custom-border-100 px-2 py-0.5 text-xs">
+              <span className="relative inline-flex items-center rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
                 <span className="absolute flex flex-shrink-0 items-center justify-center">
                   <span
                     className="h-1.5 w-1.5 rounded-full"
diff --git a/apps/app/components/issues/attachment-upload.tsx b/apps/app/components/issues/attachment-upload.tsx
index 44dedb690..f71f07fe6 100644
--- a/apps/app/components/issues/attachment-upload.tsx
+++ b/apps/app/components/issues/attachment-upload.tsx
@@ -90,7 +90,7 @@ export const IssueAttachmentUpload: React.FC<Props> = ({ disabled = false }) =>
     <div
       {...getRootProps()}
       className={`flex items-center justify-center h-[60px] border-2 border-dashed text-custom-primary bg-custom-primary/5 text-xs rounded-md px-4 ${
-        isDragActive ? "bg-custom-primary/10 border-custom-primary" : "border-custom-border-100"
+        isDragActive ? "bg-custom-primary/10 border-custom-primary" : "border-custom-border-300"
       } ${isDragReject ? "bg-red-100" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
     >
       <input {...getInputProps()} />
diff --git a/apps/app/components/issues/attachments.tsx b/apps/app/components/issues/attachments.tsx
index 95bd3488d..a3ccd32d7 100644
--- a/apps/app/components/issues/attachments.tsx
+++ b/apps/app/components/issues/attachments.tsx
@@ -61,7 +61,7 @@ export const IssueAttachments = () => {
         attachments.map((file) => (
           <div
             key={file.id}
-            className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-100 bg-custom-background-100 px-4 py-2 text-sm"
+            className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-300 bg-custom-background-100 px-4 py-2 text-sm"
           >
             <Link href={file.asset}>
               <a target="_blank">
diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx
index a90c7ff47..df49faa63 100644
--- a/apps/app/components/issues/comment/comment-card.tsx
+++ b/apps/app/components/issues/comment/comment-card.tsx
@@ -72,7 +72,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
             alt={comment.actor_detail.first_name}
             height={30}
             width={30}
-            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-100"
+            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-300"
           />
         ) : (
           <div
@@ -135,7 +135,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
               value={comment.comment_html}
               editable={false}
               noBorder
-              customClassName="text-xs border border-custom-border-100 bg-custom-background-100"
+              customClassName="text-xs border border-custom-border-300 bg-custom-background-100"
               ref={showEditorRef}
             />
           </div>
diff --git a/apps/app/components/issues/delete-issue-modal.tsx b/apps/app/components/issues/delete-issue-modal.tsx
index 7a58dd251..a59832f5c 100644
--- a/apps/app/components/issues/delete-issue-modal.tsx
+++ b/apps/app/components/issues/delete-issue-modal.tsx
@@ -180,7 +180,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, u
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index a06b1d7cd..6cc792c5e 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -529,7 +529,7 @@ export const IssueForm: FC<IssueFormProps> = ({
             </div>
           </div>
         </div>
-        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-100 px-5 pt-5">
+        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-300 px-5 pt-5">
           <div
             className="flex cursor-pointer items-center gap-1"
             onClick={() => setCreateMore((prevData) => !prevData)}
diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx
index d034afb11..5ac890fc4 100644
--- a/apps/app/components/issues/modal.tsx
+++ b/apps/app/components/issues/modal.tsx
@@ -343,7 +343,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-300 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <IssueForm
                   issues={issues ?? []}
                   handleFormSubmit={handleFormSubmit}
diff --git a/apps/app/components/issues/my-issues-list-item.tsx b/apps/app/components/issues/my-issues-list-item.tsx
index 7ef4b495f..14247e930 100644
--- a/apps/app/components/issues/my-issues-list-item.tsx
+++ b/apps/app/components/issues/my-issues-list-item.tsx
@@ -87,7 +87,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
   const isNotAllowed = false;
 
   return (
-    <div className="border-b border-custom-border-100 bg-custom-background-100 px-4 py-2.5 last:border-b-0">
+    <div className="border-b border-custom-border-300 bg-custom-background-100 px-4 py-2.5 last:border-b-0">
       <div key={issue.id} className="flex items-center justify-between gap-2">
         <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
           <a className="group relative flex items-center gap-2">
@@ -139,7 +139,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
               {issue.label_details.map((label) => (
                 <span
                   key={label.id}
-                  className="group flex items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-200"
+                  className="group flex items-center gap-1 rounded-2xl border border-custom-border-300 px-2 py-0.5 text-xs text-custom-text-200"
                 >
                   <span
                     className="h-1.5 w-1.5 rounded-full"
@@ -155,7 +155,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
             ""
           )}
           {properties.assignee && (
-            <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2 py-1 text-xs shadow-sm">
               <Tooltip
                 position="top-right"
                 tooltipHeading="Assignees"
@@ -176,7 +176,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
             </div>
           )}
           {properties.sub_issue_count && (
-            <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2.5 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
                 <div className="flex items-center gap-1 text-custom-text-200">
                   <LayerDiagonalIcon className="h-3.5 w-3.5" />
@@ -186,7 +186,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
             </div>
           )}
           {properties.link && (
-            <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
                 <div className="flex items-center gap-1 text-custom-text-200">
                   <LinkIcon className="h-3.5 w-3.5 text-custom-text-200" />
@@ -196,7 +196,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
             </div>
           )}
           {properties.attachment_count && (
-            <div className="flex cursor-default items-center rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
                 <div className="flex items-center gap-1 text-custom-text-200">
                   <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-custom-text-200" />
diff --git a/apps/app/components/issues/parent-issues-list-modal.tsx b/apps/app/components/issues/parent-issues-list-modal.tsx
index f01fe80bf..1983023b9 100644
--- a/apps/app/components/issues/parent-issues-list-modal.tsx
+++ b/apps/app/components/issues/parent-issues-list-modal.tsx
@@ -108,7 +108,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-300 bg-custom-background-100 shadow-2xl transition-all">
                 <Combobox value={value} onChange={onChange}>
                   <div className="relative m-1">
                     <MagnifyingGlassIcon
diff --git a/apps/app/components/issues/select/date.tsx b/apps/app/components/issues/select/date.tsx
index 7ce39c449..56d6bf880 100644
--- a/apps/app/components/issues/select/date.tsx
+++ b/apps/app/components/issues/select/date.tsx
@@ -16,7 +16,7 @@ export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
   <Popover className="relative flex items-center justify-center  rounded-lg">
     {({ open }) => (
       <>
-        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-100 text-xs shadow-sm duration-200">
+        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-300 text-xs shadow-sm duration-200">
           <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200">
             {value ? (
               <>
diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx
index 318d70185..eda23927f 100644
--- a/apps/app/components/issues/select/label.tsx
+++ b/apps/app/components/issues/select/label.tsx
@@ -59,7 +59,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
     >
       {({ open }: any) => (
         <>
-          <Combobox.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-100 text-xs shadow-sm duration-200 hover:bg-custom-background-80">
+          <Combobox.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-300 text-xs shadow-sm duration-200 hover:bg-custom-background-80">
             {value && value.length > 0 ? (
               <span className="flex items-center justify-center gap-2 px-3 py-1 text-xs">
                 <IssueLabelsList
@@ -90,7 +90,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
               className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
                 bg-custom-background-90 px-2 py-2 text-xs shadow-md focus:outline-none`}
             >
-              <div className="flex w-full items-center justify-start rounded-sm  border-[0.6px] border-custom-border-100 bg-custom-background-90 px-2">
+              <div className="flex w-full items-center justify-start rounded-sm  border-[0.6px] border-custom-border-300 bg-custom-background-90 px-2">
                 <MagnifyingGlassIcon className="h-3 w-3 text-custom-text-200" />
                 <Combobox.Input
                   className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
@@ -141,7 +141,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                           );
                       } else
                         return (
-                          <div className="border-y border-custom-border-100">
+                          <div className="border-y border-custom-border-300">
                             <div className="flex select-none items-center gap-2 truncate p-2 text-custom-text-100">
                               <RectangleGroupIcon className="h-3 w-3" /> {label.name}
                             </div>
diff --git a/apps/app/components/issues/sidebar-select/blocked.tsx b/apps/app/components/issues/sidebar-select/blocked.tsx
index bbb776bd6..66eb0b2ca 100644
--- a/apps/app/components/issues/sidebar-select/blocked.tsx
+++ b/apps/app/components/issues/sidebar-select/blocked.tsx
@@ -92,7 +92,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
               ? watch("blocked_issues").map((issue) => (
                   <div
                     key={issue.blocked_issue_detail?.id}
-                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20"
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-300 px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20"
                   >
                     <Link
                       href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.blocked_issue_detail?.id}`}
@@ -126,7 +126,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
             type="button"
             className={`flex w-full text-custom-text-200 ${
               isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
-            } items-center justify-between gap-1 rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
+            } items-center justify-between gap-1 rounded-md border border-custom-border-300 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
             onClick={() => setIsBlockedModalOpen(true)}
             disabled={isNotAllowed}
           >
diff --git a/apps/app/components/issues/sidebar-select/blocker.tsx b/apps/app/components/issues/sidebar-select/blocker.tsx
index a2048112c..8d1e8b131 100644
--- a/apps/app/components/issues/sidebar-select/blocker.tsx
+++ b/apps/app/components/issues/sidebar-select/blocker.tsx
@@ -92,7 +92,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
               ? watch("blocker_issues").map((issue) => (
                   <div
                     key={issue.blocker_issue_detail?.id}
-                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-300 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
                   >
                     <Link
                       href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.blocker_issue_detail?.id}`}
@@ -128,7 +128,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
             type="button"
             className={`flex w-full text-custom-text-200 ${
               isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
-            } items-center justify-between gap-1 rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
+            } items-center justify-between gap-1 rounded-md border border-custom-border-300 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
             onClick={() => setIsBlockerModalOpen(true)}
             disabled={isNotAllowed}
           >
diff --git a/apps/app/components/issues/sidebar-select/parent.tsx b/apps/app/components/issues/sidebar-select/parent.tsx
index b48151494..67ff55022 100644
--- a/apps/app/components/issues/sidebar-select/parent.tsx
+++ b/apps/app/components/issues/sidebar-select/parent.tsx
@@ -78,7 +78,7 @@ export const SidebarParentSelect: React.FC<Props> = ({
           type="button"
           className={`flex w-full ${
             isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
-          } items-center justify-between gap-1 rounded-md border border-custom-border-100 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
+          } items-center justify-between gap-1 rounded-md border border-custom-border-300 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
           onClick={() => setIsParentModalOpen(true)}
           disabled={isNotAllowed}
         >
diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
index 5ae8969da..c798e0759 100644
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -283,7 +283,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
         data={issueDetail ?? null}
         user={user}
       />
-      <div className="sticky top-5 w-full divide-y-2 divide-custom-border-100">
+      <div className="sticky top-5 w-full divide-y-2 divide-custom-border-300">
         <div className="flex items-center justify-between pb-3">
           <h4 className="text-sm font-medium">
             {issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
@@ -292,7 +292,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
             {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
               <button
                 type="button"
-                className="rounded-md border border-custom-border-100 p-2 shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary"
+                className="rounded-md border border-custom-border-300 p-2 shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary"
                 onClick={handleCopyText}
               >
                 <LinkIcon className="h-3.5 w-3.5" />
@@ -310,7 +310,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
           </div>
         </div>
 
-        <div className={`divide-y-2 divide-custom-border-100 ${uneditable ? "opacity-60" : ""}`}>
+        <div className={`divide-y-2 divide-custom-border-300 ${uneditable ? "opacity-60" : ""}`}>
           {showFirstSection && (
             <div className="py-1">
               {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
@@ -483,7 +483,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                       return (
                         <span
                           key={label.id}
-                          className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20"
+                          className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-300 px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20"
                           onClick={() => {
                             const updatedLabels = watchIssue("labels_list")?.filter(
                               (l) => l !== labelId
@@ -524,7 +524,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                 isNotAllowed || uneditable
                                   ? "cursor-not-allowed"
                                   : "cursor-pointer hover:bg-custom-background-90"
-                              } items-center gap-2 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-200`}
+                              } items-center gap-2 rounded-2xl border border-custom-border-300 px-2 py-0.5 text-xs text-custom-text-200`}
                             >
                               Select Label
                             </Listbox.Button>
@@ -536,7 +536,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                               leaveFrom="opacity-100"
                               leaveTo="opacity-0"
                             >
-                              <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-custom-background-80 py-1 text-xs shadow-lg border border-custom-border-100 focus:outline-none">
+                              <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-custom-background-80 py-1 text-xs shadow-lg border border-custom-border-300 focus:outline-none">
                                 <div className="py-1">
                                   {issueLabels ? (
                                     issueLabels.length > 0 ? (
@@ -575,7 +575,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                             );
                                         } else
                                           return (
-                                            <div className="border-y border-custom-border-100 bg-custom-background-90">
+                                            <div className="border-y border-custom-border-300 bg-custom-background-90">
                                               <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-custom-text-100">
                                                 <RectangleGroupIcon className="h-3 w-3" />
                                                 {label.name}
@@ -629,7 +629,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                         isNotAllowed || uneditable
                           ? "cursor-not-allowed"
                           : "cursor-pointer hover:bg-custom-background-90"
-                      } items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-200`}
+                      } items-center gap-1 rounded-2xl border border-custom-border-300 px-2 py-0.5 text-xs text-custom-text-200`}
                       onClick={() => setCreateLabelForm((prevData) => !prevData)}
                       disabled={uneditable}
                     >
diff --git a/apps/app/components/issues/view-select/label.tsx b/apps/app/components/issues/view-select/label.tsx
index 098576dd7..80b8b276a 100644
--- a/apps/app/components/issues/view-select/label.tsx
+++ b/apps/app/components/issues/view-select/label.tsx
@@ -95,7 +95,7 @@ export const ViewLabelSelect: React.FC<Props> = ({
               return (
                 <div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
                   <span
-                    className={`h-4 w-4 flex-shrink-0 rounded-full border group-hover:bg-custom-background-80 border-custom-border-100`}
+                    className={`h-4 w-4 flex-shrink-0 rounded-full border group-hover:bg-custom-background-80 border-custom-border-300`}
                     style={{
                       backgroundColor: label?.color ?? "#000000",
                     }}
diff --git a/apps/app/components/issues/view-select/priority.tsx b/apps/app/components/issues/view-select/priority.tsx
index 04f500e88..4b5a36a20 100644
--- a/apps/app/components/issues/view-select/priority.tsx
+++ b/apps/app/components/issues/view-select/priority.tsx
@@ -74,7 +74,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
               ? "border-yellow-500/20 bg-yellow-500/20"
               : issue.priority === "low"
               ? "border-green-500/20 bg-green-500/20"
-              : "border-custom-border-100 bg-custom-background-80"
+              : "border-custom-border-300 bg-custom-background-80"
           } items-center`}
         >
           <Tooltip
diff --git a/apps/app/components/labels/create-update-label-inline.tsx b/apps/app/components/labels/create-update-label-inline.tsx
index f0198b247..ceb1f9447 100644
--- a/apps/app/components/labels/create-update-label-inline.tsx
+++ b/apps/app/components/labels/create-update-label-inline.tsx
@@ -115,7 +115,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
 
   return (
     <div
-      className={`flex scroll-m-8 items-center gap-2 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-5 ${
+      className={`flex scroll-m-8 items-center gap-2 rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-5 ${
         labelForm ? "" : "hidden"
       }`}
       ref={ref}
diff --git a/apps/app/components/labels/delete-label-modal.tsx b/apps/app/components/labels/delete-label-modal.tsx
index e45926bfa..e94f2059e 100644
--- a/apps/app/components/labels/delete-label-modal.tsx
+++ b/apps/app/components/labels/delete-label-modal.tsx
@@ -91,7 +91,7 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-300 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <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-100 sm:mx-0 sm:h-10 sm:w-10">
diff --git a/apps/app/components/labels/labels-list-modal.tsx b/apps/app/components/labels/labels-list-modal.tsx
index bc270d9e0..369c8feec 100644
--- a/apps/app/components/labels/labels-list-modal.tsx
+++ b/apps/app/components/labels/labels-list-modal.tsx
@@ -96,7 +96,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all">
+            <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-300 bg-custom-background-100 shadow-2xl transition-all">
               <Combobox>
                 <div className="relative m-1">
                   <MagnifyingGlassIcon
diff --git a/apps/app/components/labels/single-label-group.tsx b/apps/app/components/labels/single-label-group.tsx
index 1ee04f932..1f0fd781b 100644
--- a/apps/app/components/labels/single-label-group.tsx
+++ b/apps/app/components/labels/single-label-group.tsx
@@ -76,7 +76,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
   return (
     <Disclosure
       as="div"
-      className="rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-5 text-custom-text-100"
+      className="rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-5 text-custom-text-100"
       defaultOpen
     >
       {({ open }) => (
@@ -132,7 +132,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
                 {labelChildren.map((child) => (
                   <div
                     key={child.id}
-                    className="group flex items-center justify-between rounded-md border border-custom-border-100 p-2 text-sm"
+                    className="group flex items-center justify-between rounded-md border border-custom-border-300 p-2 text-sm"
                   >
                     <h5 className="flex items-center gap-3">
                       <span
diff --git a/apps/app/components/labels/single-label.tsx b/apps/app/components/labels/single-label.tsx
index d305db1a6..1f0f284fe 100644
--- a/apps/app/components/labels/single-label.tsx
+++ b/apps/app/components/labels/single-label.tsx
@@ -20,7 +20,7 @@ export const SingleLabel: React.FC<Props> = ({
   editLabel,
   handleLabelDelete,
 }) => (
-  <div className="gap-2 space-y-3 divide-y divide-custom-border-100 rounded-[10px]  border border-custom-border-100 bg-custom-background-100 p-5">
+  <div className="gap-2 space-y-3 divide-y divide-custom-border-300 rounded-[10px]  border border-custom-border-300 bg-custom-background-100 p-5">
     <div className="flex items-center justify-between">
       <div className="flex items-center gap-3">
         <span
diff --git a/apps/app/components/modules/delete-module-modal.tsx b/apps/app/components/modules/delete-module-modal.tsx
index b83092625..5cba26696 100644
--- a/apps/app/components/modules/delete-module-modal.tsx
+++ b/apps/app/components/modules/delete-module-modal.tsx
@@ -92,7 +92,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <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">
diff --git a/apps/app/components/modules/form.tsx b/apps/app/components/modules/form.tsx
index b5af60ca6..348dac9be 100644
--- a/apps/app/components/modules/form.tsx
+++ b/apps/app/components/modules/form.tsx
@@ -164,7 +164,7 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
           </div>
         </div>
       </div>
-      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-100 px-5 pt-5">
+      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-300 px-5 pt-5">
         <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
         <PrimaryButton type="submit" loading={isSubmitting || isDateValid ? false : true}>
           {status
diff --git a/apps/app/components/modules/modal.tsx b/apps/app/components/modules/modal.tsx
index 3ab144739..e8dcbb216 100644
--- a/apps/app/components/modules/modal.tsx
+++ b/apps/app/components/modules/modal.tsx
@@ -140,7 +140,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-300 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <ModuleForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx
index 5cb8e7d75..14f7c1068 100644
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@@ -186,7 +186,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
       <div
         className={`fixed top-[66px] ${
           isOpen ? "right-0" : "-right-[24rem]"
-        } h-full w-[24rem] overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 pt-5 pb-10 duration-300`}
+        } h-full w-[24rem] overflow-y-auto border-l border-custom-border-300 bg-custom-sidebar-background-100 pt-5 pb-10 duration-300`}
       >
         {module ? (
           <>
@@ -199,7 +199,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                     render={({ field: { value } }) => (
                       <CustomSelect
                         customButton={
-                          <span className="flex cursor-pointer items-center rounded border-[0.5px] border-custom-border-100 bg-custom-background-90 px-2 py-1 text-center text-xs capitalize">
+                          <span className="flex cursor-pointer items-center rounded border-[0.5px] border-custom-border-300 bg-custom-background-90 px-2 py-1 text-center text-xs capitalize">
                             {capitalizeFirstLetter(`${watch("status")}`)}
                           </span>
                         }
@@ -222,7 +222,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                     {({ open }) => (
                       <>
                         <Popover.Button
-                          className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-100 bg-custom-background-90 px-2 py-1 text-xs ${
+                          className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-300 bg-custom-background-90 px-2 py-1 text-xs ${
                             module.start_date ? "" : "text-custom-text-200"
                           }`}
                         >
@@ -275,7 +275,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                     {({ open }) => (
                       <>
                         <Popover.Button
-                          className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-100 bg-custom-background-90 px-2 py-1 text-xs ${
+                          className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-300 bg-custom-background-90 px-2 py-1 text-xs ${
                             module.target_date ? "" : "text-custom-text-200"
                           }`}
                         >
@@ -400,7 +400,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
               </div>
             </div>
 
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-100 p-6">
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-300 p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
                   <div
@@ -484,7 +484,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
               </Disclosure>
             </div>
 
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-100 p-6">
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-300 p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
                   <div
@@ -544,7 +544,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
               </Disclosure>
             </div>
 
-            <div className="flex w-full flex-col border-t border-custom-border-100 px-6 py-6 text-xs">
+            <div className="flex w-full flex-col border-t border-custom-border-300 px-6 py-6 text-xs">
               <div className="flex w-full items-center justify-between">
                 <h4 className="text-sm font-medium text-custom-text-200">Links</h4>
                 <button
diff --git a/apps/app/components/modules/single-module-card.tsx b/apps/app/components/modules/single-module-card.tsx
index 16535e77f..65d8c01b5 100644
--- a/apps/app/components/modules/single-module-card.tsx
+++ b/apps/app/components/modules/single-module-card.tsx
@@ -131,7 +131,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
         data={module}
         user={user}
       />
-      <div className="flex flex-col divide-y divide-custom-border-100 overflow-hidden rounded-[10px] border border-custom-border-100 bg-custom-background-100 text-xs">
+      <div className="flex flex-col divide-y divide-custom-border-300 overflow-hidden rounded-[10px] border border-custom-border-300 bg-custom-background-100 text-xs">
         <div className="p-4">
           <div className="flex w-full flex-col gap-5">
             <div className="flex items-start justify-between gap-2">
diff --git a/apps/app/components/onboarding/join-workspaces.tsx b/apps/app/components/onboarding/join-workspaces.tsx
index 47b214cb1..50a7c2a2d 100644
--- a/apps/app/components/onboarding/join-workspaces.tsx
+++ b/apps/app/components/onboarding/join-workspaces.tsx
@@ -99,7 +99,7 @@ export const JoinWorkspaces: React.FC<Props> = ({ stepChange }) => {
                 className={`flex cursor-pointer items-center gap-2 border py-5 px-3.5 rounded ${
                   isSelected
                     ? "border-custom-primary-100"
-                    : "border-custom-border-100 hover:bg-custom-background-80"
+                    : "border-custom-border-300 hover:bg-custom-background-80"
                 }`}
                 onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
               >
diff --git a/apps/app/components/pages/create-block.tsx b/apps/app/components/pages/create-block.tsx
index 29c83da07..20e481abf 100644
--- a/apps/app/components/pages/create-block.tsx
+++ b/apps/app/components/pages/create-block.tsx
@@ -96,7 +96,7 @@ export const CreateBlock: React.FC<Props> = ({ user }) => {
   return (
     <div className="relative">
       <form
-        className="flex flex-col items-center justify-between rounded border-2 border-custom-border-100 p-2"
+        className="flex flex-col items-center justify-between rounded border-2 border-custom-border-300 p-2"
         onSubmit={handleSubmit(createPageBlock)}
       >
         <div className="flex min-h-[75px] w-full">
diff --git a/apps/app/components/pages/create-update-block-inline.tsx b/apps/app/components/pages/create-update-block-inline.tsx
index 95ede7ebe..42f61f89e 100644
--- a/apps/app/components/pages/create-update-block-inline.tsx
+++ b/apps/app/components/pages/create-update-block-inline.tsx
@@ -280,7 +280,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
   return (
     <div className="relative">
       <form
-        className="divide-y divide-custom-border-100 rounded border border-custom-border-100 shadow"
+        className="divide-y divide-custom-border-300 rounded border border-custom-border-300 shadow"
         onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
       >
         <div className="pt-2">
diff --git a/apps/app/components/pages/create-update-page-modal.tsx b/apps/app/components/pages/create-update-page-modal.tsx
index bf74f352a..36e207966 100644
--- a/apps/app/components/pages/create-update-page-modal.tsx
+++ b/apps/app/components/pages/create-update-page-modal.tsx
@@ -166,7 +166,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-300 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <PageForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/pages/delete-page-modal.tsx b/apps/app/components/pages/delete-page-modal.tsx
index 3d2c5e62d..d29e761c8 100644
--- a/apps/app/components/pages/delete-page-modal.tsx
+++ b/apps/app/components/pages/delete-page-modal.tsx
@@ -117,7 +117,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <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">
diff --git a/apps/app/components/pages/pages-view.tsx b/apps/app/components/pages/pages-view.tsx
index b1c8419f6..3f2b896a8 100644
--- a/apps/app/components/pages/pages-view.tsx
+++ b/apps/app/components/pages/pages-view.tsx
@@ -210,7 +210,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
         <div className="space-y-4 h-full overflow-y-auto">
           {pages.length > 0 ? (
             viewType === "list" ? (
-              <ul role="list" className="divide-y divide-custom-border-100">
+              <ul role="list" className="divide-y divide-custom-border-300">
                 {pages.map((page) => (
                   <SinglePageListItem
                     key={page.id}
@@ -225,7 +225,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
                 ))}
               </ul>
             ) : viewType === "detailed" ? (
-              <div className="divide-y divide-custom-border-100 rounded-[10px] border border-custom-border-100 bg-custom-background-100">
+              <div className="divide-y divide-custom-border-300 rounded-[10px] border border-custom-border-300 bg-custom-background-100">
                 {pages.map((page) => (
                   <SinglePageDetailedItem
                     key={page.id}
@@ -240,7 +240,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
                 ))}
               </div>
             ) : (
-              <div className="rounded-[10px] border border-custom-border-100">
+              <div className="rounded-[10px] border border-custom-border-300">
                 {pages.map((page) => (
                   <SinglePageDetailedItem
                     key={page.id}
diff --git a/apps/app/components/pages/single-page-detailed-item.tsx b/apps/app/components/pages/single-page-detailed-item.tsx
index 2ae792940..fdda288bc 100644
--- a/apps/app/components/pages/single-page-detailed-item.tsx
+++ b/apps/app/components/pages/single-page-detailed-item.tsx
@@ -79,7 +79,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                 page.label_details.map((label) => (
                   <div
                     key={label.id}
-                    className="group flex items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs"
+                    className="group flex items-center gap-1 rounded-2xl border border-custom-border-300 px-2 py-0.5 text-xs"
                     style={{
                       backgroundColor: `${
                         label?.color && label.color !== "" ? label.color : "#000000"
diff --git a/apps/app/components/pages/single-page-list-item.tsx b/apps/app/components/pages/single-page-list-item.tsx
index 30199b27f..0a4c0da71 100644
--- a/apps/app/components/pages/single-page-list-item.tsx
+++ b/apps/app/components/pages/single-page-list-item.tsx
@@ -84,7 +84,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                   page.label_details.map((label) => (
                     <div
                       key={label.id}
-                      className="group flex items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs"
+                      className="group flex items-center gap-1 rounded-2xl border border-custom-border-300 px-2 py-0.5 text-xs"
                       style={{
                         backgroundColor: `${label?.color}20`,
                       }}
diff --git a/apps/app/components/project/create-project-modal.tsx b/apps/app/components/project/create-project-modal.tsx
index 3b9e2fc7a..09914e169 100644
--- a/apps/app/components/project/create-project-modal.tsx
+++ b/apps/app/components/project/create-project-modal.tsx
@@ -328,7 +328,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                     </div>
                   </div>
 
-                  <div className="mt-5 flex justify-end gap-2 border-t-2 border-custom-border-100 px-4 py-3">
+                  <div className="mt-5 flex justify-end gap-2 border-t-2 border-custom-border-300 px-4 py-3">
                     <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                     <PrimaryButton type="submit" size="sm" loading={isSubmitting}>
                       {isSubmitting ? "Adding project..." : "Add Project"}
diff --git a/apps/app/components/project/delete-project-modal.tsx b/apps/app/components/project/delete-project-modal.tsx
index d0474dddb..1b8bd58b5 100644
--- a/apps/app/components/project/delete-project-modal.tsx
+++ b/apps/app/components/project/delete-project-modal.tsx
@@ -113,7 +113,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
diff --git a/apps/app/components/project/send-project-invitation-modal.tsx b/apps/app/components/project/send-project-invitation-modal.tsx
index 13d1c7bc5..81f3011b2 100644
--- a/apps/app/components/project/send-project-invitation-modal.tsx
+++ b/apps/app/components/project/send-project-invitation-modal.tsx
@@ -172,7 +172,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-80 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-300 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
@@ -202,7 +202,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
                                 <CustomSearchSelect
                                   value={value}
                                   customButton={
-                                    <button className="flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-100 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">
+                                    <button className="flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-300 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
diff --git a/apps/app/components/project/settings/single-label.tsx b/apps/app/components/project/settings/single-label.tsx
index 33abb5875..8b3ca47b3 100644
--- a/apps/app/components/project/settings/single-label.tsx
+++ b/apps/app/components/project/settings/single-label.tsx
@@ -40,7 +40,7 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
   return (
     <>
       {children && children.length === 0 ? (
-        <div className="gap-2 space-y-3 divide-y rounded-md border  border-custom-border-100 p-3 md:w-2/3">
+        <div className="gap-2 space-y-3 divide-y rounded-md border  border-custom-border-300 p-3 md:w-2/3">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               <span
diff --git a/apps/app/components/project/single-integration-card.tsx b/apps/app/components/project/single-integration-card.tsx
index 7a78d8048..b966fe601 100644
--- a/apps/app/components/project/single-integration-card.tsx
+++ b/apps/app/components/project/single-integration-card.tsx
@@ -93,7 +93,7 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
   return (
     <>
       {integration && (
-        <div className="flex items-center justify-between gap-2 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-5">
+        <div className="flex items-center justify-between gap-2 rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-5">
           <div className="flex items-start gap-4">
             <div className="h-12 w-12 flex-shrink-0">
               <Image
diff --git a/apps/app/components/rich-text-editor/index.tsx b/apps/app/components/rich-text-editor/index.tsx
index 944a1179a..32ad16e81 100644
--- a/apps/app/components/rich-text-editor/index.tsx
+++ b/apps/app/components/rich-text-editor/index.tsx
@@ -186,10 +186,10 @@ const RemirrorRichTextEditor: React.FC<IRemirrorRichTextEditor> = (props) => {
         manager={manager}
         initialContent={state}
         classNames={[
-          `p-3 relative focus:outline-none rounded-md focus:border-custom-border-100 ${
-            noBorder ? "" : "border border-custom-border-100"
+          `p-3 relative focus:outline-none rounded-md focus:border-custom-border-300 ${
+            noBorder ? "" : "border border-custom-border-300"
           } ${
-            borderOnFocus ? "focus:border border-custom-border-100" : "focus:border-0"
+            borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
           } ${customClassName}`,
         ]}
         editable={editable}
diff --git a/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx b/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx
index 81aed8d20..5f3be9c7a 100644
--- a/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx
+++ b/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx
@@ -209,8 +209,8 @@ export const CustomFloatingToolbar: React.FC<Props> = ({
   }, [clickEdit]);
 
   return (
-    <div className="z-[99999] flex flex-col items-center gap-y-2 divide-x divide-y divide-custom-border-100 rounded border border-custom-border-100 bg-custom-background-80 p-1 px-0.5 shadow-md">
-      <div className="flex items-center gap-y-2 divide-x divide-custom-border-100">
+    <div className="z-[99999] flex flex-col items-center gap-y-2 divide-x divide-y divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-80 p-1 px-0.5 shadow-md">
+      <div className="flex items-center gap-y-2 divide-x divide-custom-border-300">
         <div className="flex items-center gap-x-1 px-2">
           <ToggleHeadingButton
             attrs={{
diff --git a/apps/app/components/search-listbox/index.tsx b/apps/app/components/search-listbox/index.tsx
index 863179f5f..e31c7fd94 100644
--- a/apps/app/components/search-listbox/index.tsx
+++ b/apps/app/components/search-listbox/index.tsx
@@ -84,7 +84,7 @@ const SearchListbox: React.FC<Props> = ({
         <>
           <Combobox.Label className="sr-only">{title}</Combobox.Label>
           <Combobox.Button
-            className={`flex cursor-pointer items-center gap-1 rounded-md border  border-custom-border-100 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary ${
+            className={`flex cursor-pointer items-center gap-1 rounded-md border  border-custom-border-300 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary ${
               buttonClassName || ""
             }`}
           >
diff --git a/apps/app/components/states/single-state.tsx b/apps/app/components/states/single-state.tsx
index 589648357..681867a9e 100644
--- a/apps/app/components/states/single-state.tsx
+++ b/apps/app/components/states/single-state.tsx
@@ -160,7 +160,7 @@ export const SingleState: React.FC<Props> = ({
   };
 
   return (
-    <div className="group flex items-center justify-between gap-2 border-custom-border-100 bg-custom-background-100 p-5 first:rounded-t-[10px] last:rounded-b-[10px]">
+    <div className="group flex items-center justify-between gap-2 border-custom-border-300 bg-custom-background-100 p-5 first:rounded-t-[10px] last:rounded-b-[10px]">
       <div className="flex items-center gap-3">
         {getStateGroupIcon(state.group, "20", "20", state.color)}
         <div>
diff --git a/apps/app/components/ui/avatar.tsx b/apps/app/components/ui/avatar.tsx
index c8f9f791b..b22cd5e7b 100644
--- a/apps/app/components/ui/avatar.tsx
+++ b/apps/app/components/ui/avatar.tsx
@@ -37,7 +37,7 @@ export const Avatar: React.FC<AvatarProps> = ({
     {user && user.avatar && user.avatar !== "" ? (
       <div
         className={`rounded-full border-2 ${
-          index ? "border-custom-border-100 bg-custom-background-80" : "border-transparent"
+          index ? "border-custom-border-300 bg-custom-background-80" : "border-transparent"
         }`}
         style={{
           height: height,
@@ -52,7 +52,7 @@ export const Avatar: React.FC<AvatarProps> = ({
       </div>
     ) : (
       <div
-        className="grid place-items-center rounded-full border-2 border-custom-border-100 bg-gray-700 text-xs capitalize text-white"
+        className="grid place-items-center rounded-full border-2 border-custom-border-300 bg-gray-700 text-xs capitalize text-white"
         style={{
           height: height,
           width: width,
diff --git a/apps/app/components/ui/buttons/secondary-button.tsx b/apps/app/components/ui/buttons/secondary-button.tsx
index c65b3a2df..e6aecc43b 100644
--- a/apps/app/components/ui/buttons/secondary-button.tsx
+++ b/apps/app/components/ui/buttons/secondary-button.tsx
@@ -13,13 +13,13 @@ export const SecondaryButton: React.FC<ButtonProps> = ({
 }) => (
   <button
     type={type}
-    className={`${className} border border-custom-border-100 font-medium duration-300 ${
+    className={`${className} border border-custom-border-300 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-100 bg-custom-background-90" : ""} ${
+    } ${disabled ? "cursor-not-allowed border-custom-border-300 bg-custom-background-90" : ""} ${
       outline
         ? "bg-transparent hover:bg-custom-background-80"
         : "bg-custom-background-80 hover:border-opacity-70 hover:bg-opacity-70"
diff --git a/apps/app/components/ui/context-menu.tsx b/apps/app/components/ui/context-menu.tsx
index 3977b6152..b37e46a98 100644
--- a/apps/app/components/ui/context-menu.tsx
+++ b/apps/app/components/ui/context-menu.tsx
@@ -37,14 +37,14 @@ const ContextMenu = ({ position, children, title, isOpen, setIsOpen }: Props) =>
       }`}
     >
       <div
-        className={`fixed z-20 flex min-w-[8rem] flex-col items-stretch gap-1 rounded-md border border-custom-border-100 bg-custom-background-90 p-2 text-xs shadow-lg`}
+        className={`fixed z-20 flex min-w-[8rem] flex-col items-stretch gap-1 rounded-md border border-custom-border-300 bg-custom-background-90 p-2 text-xs shadow-lg`}
         style={{
           left: `${position.x}px`,
           top: `${position.y}px`,
         }}
       >
         {title && (
-          <h4 className="border-b border-custom-border-100 px-1 py-1 pb-2 text-[0.8rem] font-medium">
+          <h4 className="border-b border-custom-border-300 px-1 py-1 pb-2 text-[0.8rem] font-medium">
             {title}
           </h4>
         )}
diff --git a/apps/app/components/ui/custom-menu.tsx b/apps/app/components/ui/custom-menu.tsx
index f4021b249..f8e3704c1 100644
--- a/apps/app/components/ui/custom-menu.tsx
+++ b/apps/app/components/ui/custom-menu.tsx
@@ -81,7 +81,7 @@ const CustomMenu = ({
                 } ${
                   noBorder
                     ? "rounded-md"
-                    : "rounded-md border border-custom-border-100 shadow-sm focus:outline-none"
+                    : "rounded-md border border-custom-border-300 shadow-sm focus:outline-none"
                 } ${
                   width === "sm"
                     ? "w-10"
@@ -136,7 +136,7 @@ const CustomMenu = ({
             } ${
               menuItemsWhiteBg
                 ? "border-custom-border-200 bg-custom-background-100"
-                : "border-custom-border-100 bg-custom-background-90"
+                : "border-custom-border-300 bg-custom-background-90"
             } ${menuItemsClassName}`}
           >
             <div className="py-1">{children}</div>
diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
index 0450dc2e0..3f39a30e2 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -81,7 +81,7 @@ export const CustomSearchSelect = ({
             <Combobox.Button as="div">{customButton}</Combobox.Button>
           ) : (
             <Combobox.Button
-              className={`flex w-full border border-custom-border-100 ${
+              className={`flex w-full border border-custom-border-300 ${
                 disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
               } ${
                 input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
@@ -110,7 +110,7 @@ export const CustomSearchSelect = ({
             leaveTo="opacity-0 translate-y-1"
           >
             <Combobox.Options
-              className={`${optionsClassName} absolute min-w-[10rem] border border-custom-border-100 p-2 ${
+              className={`${optionsClassName} absolute min-w-[10rem] border border-custom-border-300 p-2 ${
                 position === "right" ? "right-0" : "left-0"
               } ${
                 verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"
@@ -118,7 +118,7 @@ export const CustomSearchSelect = ({
                 dropdownWidth ? dropdownWidth : ``
               } `}
             >
-              <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-100 bg-custom-background-90 px-2">
+              <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-300 bg-custom-background-90 px-2">
                 <MagnifyingGlassIcon className="h-3 w-3 text-custom-text-200" />
                 <Combobox.Input
                   className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
diff --git a/apps/app/components/ui/custom-select.tsx b/apps/app/components/ui/custom-select.tsx
index be26ec5be..af2e15157 100644
--- a/apps/app/components/ui/custom-select.tsx
+++ b/apps/app/components/ui/custom-select.tsx
@@ -57,8 +57,8 @@ const CustomSelect = ({
             disabled
               ? "cursor-not-allowed text-custom-text-200"
               : "cursor-pointer hover:bg-custom-background-80"
-          } items-center justify-between gap-1 rounded-md border border-custom-border-100 shadow-sm duration-300 focus:outline-none ${
-            input ? "border-custom-border-100 px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+          } items-center justify-between gap-1 rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
+            input ? "border-custom-border-300 px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
           } ${
             textAlignment === "right"
               ? "text-right"
@@ -83,7 +83,7 @@ const CustomSelect = ({
       leaveTo="transform opacity-0 scale-95"
     >
       <Listbox.Options
-        className={`${optionsClassName} absolute border border-custom-border-100 ${
+        className={`${optionsClassName} absolute border border-custom-border-300 ${
           position === "right" ? "right-0" : "left-0"
         } ${
           verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"
diff --git a/apps/app/components/ui/date.tsx b/apps/app/components/ui/date.tsx
index abfd9a171..2c57366e9 100644
--- a/apps/app/components/ui/date.tsx
+++ b/apps/app/components/ui/date.tsx
@@ -17,7 +17,7 @@ export const DateSelect: React.FC<Props> = ({ value, onChange, label }) => (
   <Popover className="relative flex items-center justify-center  rounded-lg">
     {({ open }) => (
       <>
-        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-100 text-xs shadow-sm duration-300 hover:bg-custom-background-80">
+        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-300 text-xs shadow-sm duration-300 hover:bg-custom-background-80">
           <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200">
             {value ? (
               <>
diff --git a/apps/app/components/ui/datepicker.tsx b/apps/app/components/ui/datepicker.tsx
index a13220ee6..b0f5208c4 100644
--- a/apps/app/components/ui/datepicker.tsx
+++ b/apps/app/components/ui/datepicker.tsx
@@ -47,7 +47,7 @@ export const CustomDatePicker: React.FC<Props> = ({
     } ${error ? "border-red-500 bg-red-100" : ""} ${
       disabled ? "cursor-not-allowed" : "cursor-pointer"
     } ${
-      noBorder ? "" : "border border-custom-border-100"
+      noBorder ? "" : "border border-custom-border-300"
     } w-full rounded-md caret-transparent outline-none ${className}`}
     dateFormat="MMM dd, yyyy"
     isClearable={isClearable}
diff --git a/apps/app/components/ui/empty-space.tsx b/apps/app/components/ui/empty-space.tsx
index f31280aeb..72abf4d8f 100644
--- a/apps/app/components/ui/empty-space.tsx
+++ b/apps/app/components/ui/empty-space.tsx
@@ -26,7 +26,7 @@ const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, I
       <div className="mt-1 text-sm text-custom-text-200">{description}</div>
       <ul
         role="list"
-        className="mt-6 divide-y divide-custom-border-100 border-t border-b border-custom-border-100"
+        className="mt-6 divide-y divide-custom-border-300 border-t border-b border-custom-border-300"
       >
         {children}
       </ul>
diff --git a/apps/app/components/ui/input/index.tsx b/apps/app/components/ui/input/index.tsx
index 17dfa639b..e664c37f8 100644
--- a/apps/app/components/ui/input/index.tsx
+++ b/apps/app/components/ui/input/index.tsx
@@ -36,7 +36,7 @@ export const Input: React.FC<Props> = ({
       }}
       className={`block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${
         mode === "primary"
-          ? "rounded-md border border-custom-border-100"
+          ? "rounded-md border border-custom-border-300"
           : mode === "transparent"
           ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
           : mode === "trueTransparent"
diff --git a/apps/app/components/ui/labels-list.tsx b/apps/app/components/ui/labels-list.tsx
index 053e646cd..b1b7b3b67 100644
--- a/apps/app/components/ui/labels-list.tsx
+++ b/apps/app/components/ui/labels-list.tsx
@@ -17,7 +17,7 @@ export const IssueLabelsList: React.FC<IssueLabelsListProps> = ({
         {labels.slice(0, length).map((color, index) => (
           <div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
             <span
-              className={`h-4 w-4 flex-shrink-0 rounded-full border border-custom-border-100
+              className={`h-4 w-4 flex-shrink-0 rounded-full border border-custom-border-300
               `}
               style={{
                 backgroundColor: color && color !== "" ? color : "#000000",
diff --git a/apps/app/components/ui/multi-input.tsx b/apps/app/components/ui/multi-input.tsx
index bacb65713..94daf711f 100644
--- a/apps/app/components/ui/multi-input.tsx
+++ b/apps/app/components/ui/multi-input.tsx
@@ -54,7 +54,7 @@ export const MultiInput = ({ label, name, placeholder, setValue, watch }: any) =
   return (
     <>
       {label && <label className="mb-2 text-custom-text-200">{label}</label>}
-      <div className="rounded-md border border-custom-border-100 p-2">
+      <div className="rounded-md border border-custom-border-300 p-2">
         {watch(name)?.map((tag: any, index: number) => (
           <button
             type="button"
diff --git a/apps/app/components/ui/multi-level-dropdown.tsx b/apps/app/components/ui/multi-level-dropdown.tsx
index 14f2a8106..ebc41d57e 100644
--- a/apps/app/components/ui/multi-level-dropdown.tsx
+++ b/apps/app/components/ui/multi-level-dropdown.tsx
@@ -43,7 +43,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
             <div>
               <Menu.Button
                 onClick={() => setOpenChildFor(null)}
-                className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-100 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none hover:text-custom-text-100 hover:bg-custom-background-90 ${
+                className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-300 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none hover:text-custom-text-100 hover:bg-custom-background-90 ${
                   open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
                 }`}
               >
diff --git a/apps/app/components/ui/multi-level-select.tsx b/apps/app/components/ui/multi-level-select.tsx
index 510efc5ad..2e8ae5eee 100644
--- a/apps/app/components/ui/multi-level-select.tsx
+++ b/apps/app/components/ui/multi-level-select.tsx
@@ -88,7 +88,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
                       <>
                         {openChildFor?.id === option.id && (
                           <div
-                            className={`absolute h-auto max-h-72 w-72 rounded-lg border border-custom-border-100 bg-custom-background-80 ${
+                            className={`absolute h-auto max-h-72 w-72 rounded-lg border border-custom-border-300 bg-custom-background-80 ${
                               direction === "right"
                                 ? "left-full translate-x-2 rounded-tl-none shadow-md"
                                 : "right-full -translate-x-2 rounded-tr-none shadow-md"
@@ -123,7 +123,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
                             ))}
 
                             <div
-                              className={`absolute h-0 w-0 border-t-8 border-custom-border-100 ${
+                              className={`absolute h-0 w-0 border-t-8 border-custom-border-300 ${
                                 direction === "right"
                                   ? "top-0 left-0 -translate-x-2 border-r-8 border-b-8 border-b-transparent border-t-transparent border-l-transparent"
                                   : "top-0 right-0 translate-x-2 border-l-8 border-b-8 border-b-transparent border-t-transparent border-r-transparent"
diff --git a/apps/app/components/ui/product-updates-modal.tsx b/apps/app/components/ui/product-updates-modal.tsx
index f965356f8..559a02b03 100644
--- a/apps/app/components/ui/product-updates-modal.tsx
+++ b/apps/app/components/ui/product-updates-modal.tsx
@@ -67,12 +67,12 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                         updates.map((item, index) => (
                           <React.Fragment key={item.id}>
                             <div className="flex items-center gap-3 text-xs text-custom-text-200">
-                              <span className="flex items-center rounded-full border border-custom-border-100 bg-custom-background-90 px-3 py-1.5 text-xs">
+                              <span className="flex items-center rounded-full border border-custom-border-300 bg-custom-background-90 px-3 py-1.5 text-xs">
                                 {item.tag_name}
                               </span>
                               <span>{renderLongDateFormat(item.published_at)}</span>
                               {index === 0 && (
-                                <span className="flex items-center rounded-full border border-custom-border-100 bg-custom-primary px-3 py-1.5 text-xs text-white">
+                                <span className="flex items-center rounded-full border border-custom-border-300 bg-custom-primary px-3 py-1.5 text-xs text-white">
                                   New
                                 </span>
                               )}
diff --git a/apps/app/components/ui/range-datepicker.tsx b/apps/app/components/ui/range-datepicker.tsx
index e2054fd89..61e011761 100644
--- a/apps/app/components/ui/range-datepicker.tsx
+++ b/apps/app/components/ui/range-datepicker.tsx
@@ -50,7 +50,7 @@ export const CustomRangeDatePicker: React.FC<Props> = ({
         : ""
     } ${error ? "border-red-500 bg-red-100" : ""} ${
       disabled ? "cursor-not-allowed" : "cursor-pointer"
-    } w-full rounded-md border border-custom-border-100 bg-transparent caret-transparent ${className}`}
+    } w-full rounded-md border border-custom-border-300 bg-transparent caret-transparent ${className}`}
     dateFormat="dd-MM-yyyy"
     disabled={disabled}
     selectsStart={selectsStart}
diff --git a/apps/app/components/ui/text-area/index.tsx b/apps/app/components/ui/text-area/index.tsx
index 05f8640fd..042ef4507 100644
--- a/apps/app/components/ui/text-area/index.tsx
+++ b/apps/app/components/ui/text-area/index.tsx
@@ -70,7 +70,7 @@ export const TextArea: React.FC<Props> = ({
           noPadding ? "" : "px-3 py-2"
         } outline-none ${
           mode === "primary"
-            ? "rounded-md border border-custom-border-100"
+            ? "rounded-md border border-custom-border-300"
             : mode === "transparent"
             ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme"
             : ""
diff --git a/apps/app/components/ui/toggle-switch.tsx b/apps/app/components/ui/toggle-switch.tsx
index f8046191e..5fb1b0a89 100644
--- a/apps/app/components/ui/toggle-switch.tsx
+++ b/apps/app/components/ui/toggle-switch.tsx
@@ -19,7 +19,7 @@ export const ToggleSwitch: React.FC<Props> = (props) => {
       onChange={onChange}
       className={`relative inline-flex ${
         size === "sm" ? "h-3.5 w-6" : size === "md" ? "h-4 w-7" : "h-6 w-11"
-      } flex-shrink-0 cursor-pointer rounded-full border-2 border-custom-border-100 transition-colors duration-200 ease-in-out focus:outline-none ${
+      } flex-shrink-0 cursor-pointer rounded-full border-2 border-custom-border-300 transition-colors duration-200 ease-in-out focus:outline-none ${
         value ? "bg-green-500" : "bg-custom-background-80"
       } ${className || ""}`}
     >
diff --git a/apps/app/components/views/delete-view-modal.tsx b/apps/app/components/views/delete-view-modal.tsx
index 3a2afe977..313837840 100644
--- a/apps/app/components/views/delete-view-modal.tsx
+++ b/apps/app/components/views/delete-view-modal.tsx
@@ -96,7 +96,7 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <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">
diff --git a/apps/app/components/views/modal.tsx b/apps/app/components/views/modal.tsx
index 179106a33..d5a2befa6 100644
--- a/apps/app/components/views/modal.tsx
+++ b/apps/app/components/views/modal.tsx
@@ -135,7 +135,7 @@ export const CreateUpdateViewModal: React.FC<Props> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-300 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <ViewForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/workspace/completed-issues-graph.tsx b/apps/app/components/workspace/completed-issues-graph.tsx
index f2776affd..eb9eaf5f2 100644
--- a/apps/app/components/workspace/completed-issues-graph.tsx
+++ b/apps/app/components/workspace/completed-issues-graph.tsx
@@ -38,7 +38,7 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
           ))}
         </CustomMenu>
       </div>
-      <div className="rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-8 pl-4">
+      <div className="rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-8 pl-4">
         {data.every((item) => item.completed_count === 0) ? (
           <div className="flex items-center justify-center h-72">
             <h4 className="text-[#d687ff]">No issues closed this month</h4>
@@ -62,7 +62,7 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
               colors={(datum) => datum.color}
               enableSlices="x"
               sliceTooltip={(datum) => (
-                <div className="rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
+                <div className="rounded-md border border-custom-border-300 bg-custom-background-80 p-2 text-xs">
                   {datum.slice.points[0].data.yFormatted}
                   <span className="text-custom-text-200"> issues closed in </span>
                   {datum.slice.points[0].data.xFormatted}
diff --git a/apps/app/components/workspace/create-workspace-form.tsx b/apps/app/components/workspace/create-workspace-form.tsx
index 57aff736f..c825a3eb9 100644
--- a/apps/app/components/workspace/create-workspace-form.tsx
+++ b/apps/app/components/workspace/create-workspace-form.tsx
@@ -138,7 +138,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
         </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-100 px-3">
+          <div className="flex w-full items-center rounded-md border border-custom-border-300 px-3">
             <span className="whitespace-nowrap text-sm text-custom-text-200">
               {window && window.location.host}/
             </span>
diff --git a/apps/app/components/workspace/delete-workspace-modal.tsx b/apps/app/components/workspace/delete-workspace-modal.tsx
index afbd6801c..e43f18982 100644
--- a/apps/app/components/workspace/delete-workspace-modal.tsx
+++ b/apps/app/components/workspace/delete-workspace-modal.tsx
@@ -103,7 +103,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
diff --git a/apps/app/components/workspace/help-section.tsx b/apps/app/components/workspace/help-section.tsx
index 41d0d033f..45eb89b74 100644
--- a/apps/app/components/workspace/help-section.tsx
+++ b/apps/app/components/workspace/help-section.tsx
@@ -120,7 +120,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = ({ setS
         </div>
       )}
       <div
-        className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-100 bg-custom-sidebar-background-100 px-4 py-2 ${
+        className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-300 bg-custom-sidebar-background-100 px-4 py-2 ${
           sidebarCollapse ? "flex-col" : ""
         }`}
       >
diff --git a/apps/app/components/workspace/issues-list.tsx b/apps/app/components/workspace/issues-list.tsx
index 3c0157a7f..eaa2c0f10 100644
--- a/apps/app/components/workspace/issues-list.tsx
+++ b/apps/app/components/workspace/issues-list.tsx
@@ -37,7 +37,7 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
     <div>
       <h3 className="mb-2 font-semibold capitalize">{type} Issues</h3>
       {issues ? (
-        <div className="h-[calc(100%-2.25rem)] rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4 text-sm">
+        <div className="h-[calc(100%-2.25rem)] rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-4 text-sm">
           <div
             className={`mb-2 grid grid-cols-4 gap-2 rounded-lg px-3 py-2 font-medium ${
               type === "overdue" ? "bg-red-500/20 bg-opacity-20" : "bg-custom-background-80"
diff --git a/apps/app/components/workspace/issues-pie-chart.tsx b/apps/app/components/workspace/issues-pie-chart.tsx
index 5219a4d3a..dbd5eeceb 100644
--- a/apps/app/components/workspace/issues-pie-chart.tsx
+++ b/apps/app/components/workspace/issues-pie-chart.tsx
@@ -14,7 +14,7 @@ type Props = {
 export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
   <div>
     <h3 className="mb-2 font-semibold">Issues by States</h3>
-    <div className="rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4">
+    <div className="rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-4">
       <PieGraph
         data={
           groupedIssues?.map((cell) => ({
@@ -58,7 +58,7 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
         activeInnerRadiusOffset={5}
         colors={(datum) => datum.data.color}
         tooltip={(datum) => (
-          <div className="flex items-center gap-2 rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
+          <div className="flex items-center gap-2 rounded-md border border-custom-border-300 bg-custom-background-80 p-2 text-xs">
             <span className="text-custom-text-200 capitalize">{datum.datum.label} issues:</span>{" "}
             {datum.datum.value}
           </div>
diff --git a/apps/app/components/workspace/issues-stats.tsx b/apps/app/components/workspace/issues-stats.tsx
index 1d1162a3d..5fba3444c 100644
--- a/apps/app/components/workspace/issues-stats.tsx
+++ b/apps/app/components/workspace/issues-stats.tsx
@@ -12,8 +12,8 @@ type Props = {
 };
 
 export const IssuesStats: React.FC<Props> = ({ data }) => (
-  <div className="grid grid-cols-1 rounded-[10px] border border-custom-border-100 bg-custom-background-100 lg:grid-cols-3">
-    <div className="grid grid-cols-1 divide-y divide-custom-border-100 border-b border-custom-border-100 lg:border-r lg:border-b-0">
+  <div className="grid grid-cols-1 rounded-[10px] border border-custom-border-300 bg-custom-background-100 lg:grid-cols-3">
+    <div className="grid grid-cols-1 divide-y divide-custom-border-300 border-b border-custom-border-300 lg:border-r lg:border-b-0">
       <div className="flex">
         <div className="basis-1/2 p-4">
           <h4 className="text-sm">Issues assigned to you</h4>
@@ -27,7 +27,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => (
             )}
           </h5>
         </div>
-        <div className="basis-1/2 border-l border-custom-border-100 p-4">
+        <div className="basis-1/2 border-l border-custom-border-300 p-4">
           <h4 className="text-sm">Pending issues</h4>
           <h5 className="mt-2 text-2xl font-semibold">
             {data ? (
@@ -53,7 +53,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => (
             )}
           </h5>
         </div>
-        <div className="basis-1/2 border-l border-custom-border-100 p-4">
+        <div className="basis-1/2 border-l border-custom-border-300 p-4">
           <h4 className="text-sm">Issues due by this week</h4>
           <h5 className="mt-2 text-2xl font-semibold">
             {data ? (
@@ -72,7 +72,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => (
         Activity Graph
         <Tooltip
           tooltipContent="Your profile activity graph is a record of actions you've performed on issues across the workspace."
-          className="w-72 border border-custom-border-100"
+          className="w-72 border border-custom-border-300"
         >
           <InformationCircleIcon className="h-3 w-3" />
         </Tooltip>
diff --git a/apps/app/components/workspace/single-invitation.tsx b/apps/app/components/workspace/single-invitation.tsx
index 623a43a08..bd12cec7e 100644
--- a/apps/app/components/workspace/single-invitation.tsx
+++ b/apps/app/components/workspace/single-invitation.tsx
@@ -51,7 +51,7 @@ const SingleInvitation: React.FC<Props> = ({
             invitationsRespond.includes(invitation.id)
               ? "bg-custom-background-80 text-custom-text-200"
               : "bg-custom-primary text-white"
-          } text-sm px-4 py-2 border border-custom-border-100 rounded-3xl`}
+          } text-sm px-4 py-2 border border-custom-border-300 rounded-3xl`}
           onClick={(e) => {
             handleInvitation(
               invitation,
diff --git a/apps/app/components/workspace/upgrade-to-pro-modal.tsx b/apps/app/components/workspace/upgrade-to-pro-modal.tsx
index 32d778fc0..19a43b6e6 100644
--- a/apps/app/components/workspace/upgrade-to-pro-modal.tsx
+++ b/apps/app/components/workspace/upgrade-to-pro-modal.tsx
@@ -137,7 +137,7 @@ const UpgradeToProModal: React.FC<Props> = ({ isOpen, onClose, user, issueNumber
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-300 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl">
                 <div className="flex flex-wrap">
                   <div className="w-full md:w-3/5 p-6 flex flex-col gap-y-6">
                     <div className="flex gap-2">
diff --git a/apps/app/constants/workspace.ts b/apps/app/constants/workspace.ts
index ab8c8b069..76b099ec5 100644
--- a/apps/app/constants/workspace.ts
+++ b/apps/app/constants/workspace.ts
@@ -1,9 +1,3 @@
-// onboarding images
-import Welcome from "public/onboarding/welcome.svg";
-import Issue from "public/onboarding/issue.svg";
-import Cycle from "public/onboarding/cycle.svg";
-import Module from "public/onboarding/module.svg";
-import CommandMenu from "public/onboarding/command-menu.svg";
 // services images
 import GithubLogo from "public/services/github.png";
 import JiraLogo from "public/services/jira.png";
diff --git a/apps/app/layouts/app-layout/app-header.tsx b/apps/app/layouts/app-layout/app-header.tsx
index 0c07ceb85..725c678ca 100644
--- a/apps/app/layouts/app-layout/app-header.tsx
+++ b/apps/app/layouts/app-layout/app-header.tsx
@@ -11,7 +11,7 @@ type Props = {
 
 const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar, noHeader }) => (
   <div
-    className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-y-4 border-b border-custom-border-100 bg-custom-sidebar-background-100 px-5 py-4 ${
+    className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-y-4 border-b border-custom-border-300 bg-custom-sidebar-background-100 px-5 py-4 ${
       noHeader ? "md:hidden" : ""
     }`}
   >
@@ -19,7 +19,7 @@ const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar, n
       <div className="block md:hidden">
         <button
           type="button"
-          className="grid h-8 w-8 place-items-center rounded border border-custom-border-100"
+          className="grid h-8 w-8 place-items-center rounded border border-custom-border-300"
           onClick={() => setToggleSidebar((prevData) => !prevData)}
         >
           <Bars3Icon className="h-5 w-5" />
diff --git a/apps/app/layouts/default-layout/index.tsx b/apps/app/layouts/default-layout/index.tsx
index 483803a0a..5f31dcd67 100644
--- a/apps/app/layouts/default-layout/index.tsx
+++ b/apps/app/layouts/default-layout/index.tsx
@@ -1,16 +1,11 @@
 type Props = {
   children: React.ReactNode;
-  noPadding?: boolean;
-  bg?: "primary" | "secondary";
-  noHeader?: boolean;
-  breadcrumbs?: JSX.Element;
-  left?: JSX.Element;
-  right?: JSX.Element;
+  gradient?: boolean;
 };
 
-const DefaultLayout: React.FC<Props> = ({ children }) => (
-  <div className="h-screen w-full overflow-hidden bg-custom-background-100">
-    <>{children}</>
+const DefaultLayout: React.FC<Props> = ({ children, gradient = false }) => (
+  <div className={`h-screen w-full overflow-hidden ${gradient ? "" : "bg-custom-background-100"}`}>
+    {children}
   </div>
 );
 
diff --git a/apps/app/layouts/settings-navbar.tsx b/apps/app/layouts/settings-navbar.tsx
index 92e967746..6ee70a5c2 100644
--- a/apps/app/layouts/settings-navbar.tsx
+++ b/apps/app/layouts/settings-navbar.tsx
@@ -108,7 +108,7 @@ const SettingsNavbar: React.FC<Props> = ({ profilePage = false }) => {
                     : router.asPath === link.href
                 )
                   ? "border-custom-primary bg-custom-primary text-white"
-                  : "border-custom-border-100 bg-custom-background-100 hover:bg-custom-background-90"
+                  : "border-custom-border-300 bg-custom-background-100 hover:bg-custom-background-90"
               }`}
             >
               {link.label}
diff --git a/apps/app/pages/[workspaceSlug]/analytics.tsx b/apps/app/pages/[workspaceSlug]/analytics.tsx
index bbed700cf..b17127e6b 100644
--- a/apps/app/pages/[workspaceSlug]/analytics.tsx
+++ b/apps/app/pages/[workspaceSlug]/analytics.tsx
@@ -96,12 +96,12 @@ const Analytics = () => {
         projects.length > 0 ? (
           <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
             <Tab.Group as={Fragment}>
-              <Tab.List as="div" className="space-x-2 border-b border-custom-border-100 px-5 py-3">
+              <Tab.List as="div" className="space-x-2 border-b border-custom-border-300 px-5 py-3">
                 {tabsList.map((tab) => (
                   <Tab
                     key={tab}
                     className={({ selected }) =>
-                      `rounded-3xl border border-custom-border-100 px-4 py-2 text-xs hover:bg-custom-background-80 ${
+                      `rounded-3xl border border-custom-border-300 px-4 py-2 text-xs hover:bg-custom-background-80 ${
                         selected ? "bg-custom-background-80" : ""
                       }`
                     }
diff --git a/apps/app/pages/[workspaceSlug]/index.tsx b/apps/app/pages/[workspaceSlug]/index.tsx
index e53e310e6..83413427c 100644
--- a/apps/app/pages/[workspaceSlug]/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/index.tsx
@@ -93,21 +93,21 @@ const WorkspacePage: NextPage = () => {
         projects.length > 0 ? (
           <div className="p-8">
             <div className="flex flex-col gap-8">
-              <div className="text-custom-text-200 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg border border-custom-border-100 bg-custom-background-100 px-4 py-6 md:flex-row md:items-center md:py-3">
+              <div className="text-custom-text-200 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg border border-custom-border-300 bg-custom-background-100 px-4 py-6 md:flex-row md:items-center md:py-3">
                 <p className="font-semibold">
                   Plane is open source, support us by starring us on GitHub.
                 </p>
                 <div className="flex items-center gap-2">
                   <button
                     onClick={() => setIsProductUpdatesModalOpen(true)}
-                    className="rounded-md border-2 border-custom-border-100 px-3 py-1.5 text-sm font-medium duration-300"
+                    className="rounded-md border-2 border-custom-border-300 px-3 py-1.5 text-sm font-medium duration-300"
                   >
                     {`What's New?`}
                   </button>
                   <a
                     href="https://github.com/makeplane/plane"
                     target="_blank"
-                    className="rounded-md border-2 border-custom-border-100 px-3 py-1.5 text-sm font-medium duration-300"
+                    className="rounded-md border-2 border-custom-border-300 px-3 py-1.5 text-sm font-medium duration-300"
                     rel="noopener noreferrer"
                   >
                     Star us on GitHub
diff --git a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
index e4826bf64..d03b3939c 100644
--- a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
@@ -50,7 +50,7 @@ const MyIssuesPage: NextPage = () => {
               {({ open }) => (
                 <>
                   <Popover.Button
-                    className={`group flex items-center gap-2 rounded-md border border-custom-border-100 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-background-90 hover:text-custom-text-100 focus:outline-none ${
+                    className={`group flex items-center gap-2 rounded-md border border-custom-border-300 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-background-90 hover:text-custom-text-100 focus:outline-none ${
                       open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
                     }`}
                   >
@@ -81,7 +81,7 @@ const MyIssuesPage: NextPage = () => {
                                 className={`rounded border px-2 py-1 text-xs capitalize ${
                                   properties[key as keyof Properties]
                                     ? "border-custom-primary bg-custom-primary text-white"
-                                    : "border-custom-border-100"
+                                    : "border-custom-border-300"
                                 }`}
                                 onClick={() => setProperties(key as keyof Properties)}
                               >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
index bff1a93b3..3e3f2e257 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
@@ -170,7 +170,7 @@ const ArchivedIssueDetailsPage: NextPage = () => {
                 </button>
               </div>
             )}
-            <div className="space-y-5 divide-y-2 divide-custom-border-100 opacity-60">
+            <div className="space-y-5 divide-y-2 divide-custom-border-300 opacity-60">
               <IssueMainContent
                 issueDetails={issueDetails}
                 submitChanges={submitChanges}
@@ -178,7 +178,7 @@ const ArchivedIssueDetailsPage: NextPage = () => {
               />
             </div>
           </div>
-          <div className="w-1/3 space-y-5 border-l border-custom-border-100 p-5">
+          <div className="w-1/3 space-y-5 border-l border-custom-border-300 p-5">
             <IssueDetailsSidebar
               control={control}
               issueDetail={issueDetails}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
index 16cf2f0bc..2f2c983e0 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
@@ -55,11 +55,11 @@ const ProjectArchivedIssues: NextPage = () => {
         }
       >
         <div className="h-full w-full flex flex-col">
-          <div className="flex items-center ga-1 px-4 py-2.5 shadow-sm border-b border-custom-border-100">
+          <div className="flex items-center ga-1 px-4 py-2.5 shadow-sm border-b border-custom-border-300">
             <button
               type="button"
               onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/`)}
-              className="flex items-center gap-1.5 rounded-full border border-custom-border-100 px-3 py-1.5 text-xs"
+              className="flex items-center gap-1.5 rounded-full border border-custom-border-300 px-3 py-1.5 text-xs"
             >
               <Icon iconName="archive" className="text-base" />
               <span>Archived Issues</span>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 4997ddf6e..2389b023b 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -177,7 +177,7 @@ const ProjectCycles: NextPage = () => {
                     `rounded-3xl border px-6 py-1 outline-none ${
                       selected
                         ? "border-custom-primary bg-custom-primary text-white font-medium"
-                        : "border-custom-border-100 bg-custom-background-100 hover:bg-custom-background-80"
+                        : "border-custom-border-300 bg-custom-background-100 hover:bg-custom-background-80"
                     }`
                   }
                 >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
index 387bf5979..43de121ea 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
@@ -52,7 +52,7 @@ const ProjectInbox: NextPage = () => {
       >
         <div className="flex flex-col h-full">
           <InboxActionHeader />
-          <div className="grid grid-cols-4 flex-1 divide-x divide-custom-border-100 overflow-hidden">
+          <div className="grid grid-cols-4 flex-1 divide-x divide-custom-border-300 overflow-hidden">
             <IssuesListSidebar />
             <div className="col-span-3 h-full overflow-auto">
               <InboxMainContent />
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index 6592e3123..267f185cb 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -120,10 +120,10 @@ const IssueDetailsPage: NextPage = () => {
     >
       {issueDetails && projectId ? (
         <div className="flex h-full">
-          <div className="w-2/3 space-y-5 divide-y-2 divide-custom-border-100 p-5">
+          <div className="w-2/3 space-y-5 divide-y-2 divide-custom-border-300 p-5">
             <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
           </div>
-          <div className="w-1/3 space-y-5 border-l border-custom-border-100 p-5">
+          <div className="w-1/3 space-y-5 border-l border-custom-border-300 p-5">
             <IssueDetailsSidebar
               control={control}
               issueDetail={issueDetails}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index 36612c92b..1e6c091e0 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -337,7 +337,7 @@ const SinglePage: NextPage = () => {
                         return (
                           <div
                             key={label.id}
-                            className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50"
+                            className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-300 px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50"
                             onClick={() => {
                               const updatedLabels = pageDetails.labels.filter((l) => l !== labelId);
                               partialUpdatePage({ labels_list: updatedLabels });
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index e7a2be1c6..50f724a80 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -177,7 +177,7 @@ const ProjectPages: NextPage = () => {
                       `rounded-full border px-5 py-1.5 text-sm outline-none ${
                         selected
                           ? "border-custom-primary bg-custom-primary text-white"
-                          : "border-custom-border-100 bg-custom-background-100 hover:bg-custom-background-90"
+                          : "border-custom-border-300 bg-custom-background-100 hover:bg-custom-background-90"
                       }`
                     }
                   >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index 5c924d187..2a37b97c5 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -146,7 +146,7 @@ const EstimatesSettings: NextPage = () => {
           </section>
           {estimatesList ? (
             estimatesList.length > 0 ? (
-              <section className="h-full mt-5 divide-y divide-custom-border-100 rounded-xl border border-custom-border-100 bg-custom-background-100 px-6 overflow-y-auto">
+              <section className="h-full mt-5 divide-y divide-custom-border-300 rounded-xl border border-custom-border-300 bg-custom-background-100 px-6 overflow-y-auto">
                 {estimatesList.map((estimate) => (
                   <SingleEstimate
                     key={estimate.id}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index d04adaa0f..e673d3940 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -154,7 +154,7 @@ const FeaturesSettings: NextPage = () => {
             {featuresList.map((feature) => (
               <div
                 key={feature.property}
-                className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-5"
+                className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-5"
               >
                 <div className="flex items-start gap-3">
                   {feature.icon}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index 02d63c379..67f4ad9ad 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -261,7 +261,7 @@ const GeneralSettings: NextPage = () => {
             </div>
             <div className="col-span-12 sm:col-span-6">
               {watch("cover_image") ? (
-                <div className="h-32 w-full rounded border border-custom-border-100 p-1">
+                <div className="h-32 w-full rounded border border-custom-border-300 p-1">
                   <div className="relative h-full w-full rounded">
                     <img
                       src={watch("cover_image")!}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index 65fcff4bc..f47a11ee9 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -168,7 +168,7 @@ const MembersSettings: NextPage = () => {
               <Loader.Item height="40px" />
             </Loader>
           ) : (
-            <div className="divide-y divide-custom-border-100 rounded-[10px] border border-custom-border-100 bg-custom-background-100 px-6">
+            <div className="divide-y divide-custom-border-300 rounded-[10px] border border-custom-border-300 bg-custom-background-100 px-6">
               {members.length > 0
                 ? members.map((member) => (
                     <div key={member.id} className="flex items-center justify-between py-6">
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 835b395f5..3656042b4 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -95,7 +95,7 @@ const StatesSettings: NextPage = () => {
                             Add
                           </button>
                         </div>
-                        <div className="divide-y divide-custom-border-100 rounded-[10px] border border-custom-border-100">
+                        <div className="divide-y divide-custom-border-300 rounded-[10px] border border-custom-border-300">
                           {key === activeGroup && (
                             <CreateUpdateStateInline
                               groupLength={orderedStateGroups[key].length}
@@ -121,7 +121,7 @@ const StatesSettings: NextPage = () => {
                               />
                             ) : (
                               <div
-                                className="border-b border-custom-border-100 last:border-b-0"
+                                className="border-b border-custom-border-300 last:border-b-0"
                                 key={state.id}
                               >
                                 <CreateUpdateStateInline
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
index acd8c882c..cc587ee40 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -102,7 +102,7 @@ const ProjectViews: NextPage = () => {
         views.length > 0 ? (
           <div className="space-y-5 p-8">
             <h3 className="text-2xl font-semibold text-custom-text-100">Views</h3>
-            <div className="divide-y divide-custom-border-100 rounded-[10px] border border-custom-border-100">
+            <div className="divide-y divide-custom-border-300 rounded-[10px] border border-custom-border-300">
               {views.map((view) => (
                 <SingleViewItem
                   key={view.id}
diff --git a/apps/app/pages/[workspaceSlug]/settings/billing.tsx b/apps/app/pages/[workspaceSlug]/settings/billing.tsx
index 3827a398e..65169e5d9 100644
--- a/apps/app/pages/[workspaceSlug]/settings/billing.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/billing.tsx
@@ -48,7 +48,7 @@ const BillingSettings: NextPage = () => {
           </div>
           <div className="space-y-8 md:w-2/3">
             <div>
-              <div className="w-80 rounded-md border border-custom-border-100 bg-custom-background-100 p-4 text-center">
+              <div className="w-80 rounded-md border border-custom-border-300 bg-custom-background-100 p-4 text-center">
                 <h4 className="text-md mb-1 leading-6">Payment due</h4>
                 <h2 className="text-3xl font-extrabold">--</h2>
               </div>
diff --git a/apps/app/pages/[workspaceSlug]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/settings/members.tsx
index 0955f6c07..f8c126a4b 100644
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/members.tsx
@@ -169,7 +169,7 @@ const MembersSettings: NextPage = () => {
               <Loader.Item height="40px" />
             </Loader>
           ) : (
-            <div className="divide-y divide-custom-border-100 rounded-[10px] border border-custom-border-100 bg-custom-background-100 px-6">
+            <div className="divide-y divide-custom-border-300 rounded-[10px] border border-custom-border-300 bg-custom-background-100 px-6">
               {members.length > 0
                 ? members.map((member) => (
                     <div key={member.id} className="flex items-center justify-between py-6">
diff --git a/apps/app/pages/index.tsx b/apps/app/pages/index.tsx
index 6f36df530..deb6c444c 100644
--- a/apps/app/pages/index.tsx
+++ b/apps/app/pages/index.tsx
@@ -1,16 +1,17 @@
 import React from "react";
-// next imports
+
 import Image from "next/image";
-// next types
+
 import type { NextPage } from "next";
+
 // layouts
 import DefaultLayout from "layouts/default-layout";
+// services
+import authenticationService from "services/authentication.service";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 import useToast from "hooks/use-toast";
-// services
-import authenticationService from "services/authentication.service";
-// social auth buttons
+// components
 import {
   GoogleLoginButton,
   GithubLoginButton,
@@ -19,8 +20,8 @@ import {
 } from "components/account";
 // ui
 import { Spinner } from "components/ui";
-// icons
-import Logo from "public/plane-logos/blue-without-text.png";
+// images
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // types
 type EmailPasswordFormValues = {
   email: string;
@@ -29,7 +30,7 @@ type EmailPasswordFormValues = {
 };
 
 const HomePage: NextPage = () => {
-  const { user, isLoading, mutateUser } = useUserAuth("sign-in");
+  const { isLoading, mutateUser } = useUserAuth("sign-in");
 
   const { setToastAlert } = useToast();
 
@@ -56,7 +57,7 @@ const HomePage: NextPage = () => {
     }
   };
 
-  const handleGithubSignIn = async (credential: string) => {
+  const handleGitHubSignIn = async (credential: string) => {
     try {
       if (process.env.NEXT_PUBLIC_GITHUB_ID && credential) {
         const socialAuthPayload = {
@@ -122,38 +123,58 @@ const HomePage: NextPage = () => {
   return (
     <DefaultLayout>
       {isLoading ? (
-        <div className="flex flex-col gap-3 w-full h-screen justify-center items-center">
-          <div>
-            <Spinner />
-          </div>
+        <div className="grid place-items-center h-screen">
+          <Spinner />
         </div>
       ) : (
-        <div className="flex h-screen w-full items-center justify-center overflow-auto">
-          <div className="flex min-h-full w-full flex-col justify-center py-12 px-6 lg:px-8">
-            <div className="flex flex-col gap-10 sm:mx-auto sm:w-full sm:max-w-md">
-              <div className="flex flex-col items-center justify-center gap-10">
-                <Image src={Logo} height={80} width={80} alt="Plane Web Logo" />
-                <div className="text-center text-xl font-medium text-custom-text-100">
-                  Sign In to your Plane Account
+        <>
+          <>
+            <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
+            <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
+              <div className="grid place-items-center bg-custom-background-100">
+                <div className="h-[30px] w-[30px]">
+                  <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
                 </div>
               </div>
-
-              <div className="flex flex-col rounded-[10px] bg-custom-background-100 shadow-md">
-                {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
-                  <>
-                    <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
-                    <div className="flex flex-col items-center justify-center gap-3 border-t border-custom-border-100 py-5 px-5">
-                      <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
-                      <GithubLoginButton handleSignIn={handleGithubSignIn} />
+            </div>
+          </>
+          <div className="grid place-items-center h-full overflow-y-auto px-7">
+            <div>
+              {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
+                <>
+                  <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
+                    Sign in to Plane
+                  </h1>
+                  <div className="divide-y divide-custom-border-200">
+                    <div className="pb-7">
+                      <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
                     </div>
-                  </>
-                ) : (
-                  <EmailPasswordForm onSubmit={handlePasswordSignIn} />
-                )}
-              </div>
+                    <div className="space-y-4 pt-7 w-full sm:w-[360px] mx-auto">
+                      <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
+                      <GithubLoginButton handleSignIn={handleGitHubSignIn} />
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <EmailPasswordForm onSubmit={handlePasswordSignIn} />
+              )}
+
+              {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
+                <p className="pt-16 text-custom-text-200 text-sm text-center">
+                  By signing up, you agree to the{" "}
+                  <a
+                    href="https://plane.so/terms-and-conditions"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="font-medium underline"
+                  >
+                    Terms & Conditions
+                  </a>
+                </p>
+              ) : null}
             </div>
           </div>
-        </div>
+        </>
       )}
     </DefaultLayout>
   );
diff --git a/apps/app/pages/invitations.tsx b/apps/app/pages/invitations.tsx
index 5639fc3f5..34291c9a3 100644
--- a/apps/app/pages/invitations.tsx
+++ b/apps/app/pages/invitations.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 
 import Link from "next/link";
 import Image from "next/image";
+import { useRouter } from "next/router";
 
 import useSWR, { mutate } from "swr";
 
@@ -16,12 +17,13 @@ import useToast from "hooks/use-toast";
 import DefaultLayout from "layouts/default-layout";
 import { UserAuthorizationLayout } from "layouts/auth-layout/user-authorization-wrapper";
 // ui
-import { SecondaryButton, PrimaryButton } from "components/ui";
+import { SecondaryButton, PrimaryButton, EmptyState } from "components/ui";
 // icons
 import { CheckCircleIcon } from "@heroicons/react/24/outline";
 // images
 import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
 import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
+import emptyInvitation from "public/empty-state/invitation.svg";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
@@ -36,6 +38,8 @@ const OnBoard: NextPage = () => {
   const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
   const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
 
+  const router = useRouter();
+
   const { theme } = useTheme();
 
   const { user } = useUser();
@@ -79,7 +83,7 @@ const OnBoard: NextPage = () => {
 
         setIsJoiningWorkspaces(false);
       })
-      .catch((err) => setIsJoiningWorkspaces(false));
+      .catch(() => setIsJoiningWorkspaces(false));
   };
 
   return (
@@ -101,13 +105,13 @@ const OnBoard: NextPage = () => {
               {user?.email}
             </div>
           </div>
-          <div className="relative flex justify-center sm:justify-start sm:items-center h-full px-8 pb-8 sm:p-0 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5">
-            <div className="w-full space-y-10">
-              <h5 className="text-lg">We see that someone has invited you to</h5>
-              <h4 className="text-2xl font-semibold">Join a workspace</h4>
-              <div className="md:w-3/5 space-y-4">
-                {invitations &&
-                  invitations.map((invitation) => {
+          {invitations && invitations.length > 0 ? (
+            <div className="relative flex justify-center sm:justify-start sm:items-center h-full px-8 pb-8 sm:p-0 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5">
+              <div className="w-full space-y-10">
+                <h5 className="text-lg">We see that someone has invited you to</h5>
+                <h4 className="text-2xl font-semibold">Join a workspace</h4>
+                <div className="md:w-3/5 space-y-4">
+                  {invitations.map((invitation) => {
                     const isSelected = invitationsRespond.includes(invitation.id);
 
                     return (
@@ -116,7 +120,7 @@ const OnBoard: NextPage = () => {
                         className={`flex cursor-pointer items-center gap-2 border py-5 px-3.5 rounded ${
                           isSelected
                             ? "border-custom-primary-100"
-                            : "border-custom-border-100 hover:bg-custom-background-80"
+                            : "border-custom-border-300 hover:bg-custom-background-80"
                         }`}
                         onClick={() =>
                           handleInvitation(invitation, isSelected ? "withdraw" : "accepted")
@@ -155,26 +159,37 @@ const OnBoard: NextPage = () => {
                       </div>
                     );
                   })}
-              </div>
-              <div className="flex items-center gap-3">
-                <PrimaryButton
-                  type="submit"
-                  size="md"
-                  onClick={submitInvitations}
-                  disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
-                >
-                  Accept & Join
-                </PrimaryButton>
-                <Link href="/">
-                  <a>
-                    <SecondaryButton size="md" outline>
-                      Go Home
-                    </SecondaryButton>
-                  </a>
-                </Link>
+                </div>
+                <div className="flex items-center gap-3">
+                  <PrimaryButton
+                    type="submit"
+                    size="md"
+                    onClick={submitInvitations}
+                    disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
+                  >
+                    Accept & Join
+                  </PrimaryButton>
+                  <Link href="/">
+                    <a>
+                      <SecondaryButton size="md" outline>
+                        Go Home
+                      </SecondaryButton>
+                    </a>
+                  </Link>
+                </div>
               </div>
             </div>
-          </div>
+          ) : (
+            <div className="fixed top-0 left-0 h-full w-full grid place-items-center">
+              <EmptyState
+                title="No pending invites"
+                description="You can see here if someone invites you to a workspace."
+                image={emptyInvitation}
+                buttonText="Back to Dashboard"
+                onClick={() => router.push("/")}
+              />
+            </div>
+          )}
         </div>
       </DefaultLayout>
     </UserAuthorizationLayout>
diff --git a/apps/app/pages/reset-password.tsx b/apps/app/pages/reset-password.tsx
index 34faf3021..7f2b3c428 100644
--- a/apps/app/pages/reset-password.tsx
+++ b/apps/app/pages/reset-password.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
 import Image from "next/image";
@@ -12,9 +12,9 @@ import userService from "services/user.service";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // ui
-import { Input, SecondaryButton } from "components/ui";
-// icons
-import Logo from "public/plane-logos/blue-without-text.png";
+import { Input, PrimaryButton, Spinner } from "components/ui";
+// images
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // types
 import type { NextPage } from "next";
 
@@ -24,6 +24,8 @@ type FormData = {
 };
 
 const ResetPasswordPage: NextPage = () => {
+  const [isLoading, setIsLoading] = useState(true);
+
   const router = useRouter();
   const { uidb64, token } = router.query;
 
@@ -74,58 +76,71 @@ const ResetPasswordPage: NextPage = () => {
       );
   };
 
+  useEffect(() => {
+    if (parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0")) router.push("/");
+    else setIsLoading(false);
+  }, [router]);
+
+  if (isLoading)
+    return (
+      <div className="grid place-items-center h-screen w-full">
+        <Spinner />
+      </div>
+    );
+
   return (
     <DefaultLayout>
-      <div className="flex h-screen w-full items-center justify-center overflow-auto">
-        <div className="flex min-h-full w-full flex-col justify-center py-12 px-6 lg:px-8">
-          <div className="flex flex-col gap-10 sm:mx-auto sm:w-full sm:max-w-md">
-            <div className="flex flex-col items-center justify-center gap-10">
-              <Image src={Logo} height={80} width={80} alt="Plane Web Logo" />
-              <h2 className="text-center text-xl font-medium text-custom-text-100">
-                Reset your password
-              </h2>
-            </div>
-            <div className="flex flex-col rounded-[10px] bg-custom-background-100 shadow-md">
-              <form className="mt-5 py-5 px-5" onSubmit={handleSubmit(onSubmit)}>
-                <div>
-                  <Input
-                    id="password"
-                    type="password"
-                    name="password"
-                    register={register}
-                    validations={{
-                      required: "Password is required",
-                    }}
-                    error={errors.password}
-                    placeholder="Enter new password"
-                  />
-                </div>
-                <div className="mt-5">
-                  <Input
-                    id="confirmPassword"
-                    type="password"
-                    name="confirmPassword"
-                    register={register}
-                    validations={{
-                      required: "Confirm password is required",
-                    }}
-                    error={errors.confirmPassword}
-                    placeholder="Confirm new password"
-                  />
-                </div>
-                <div className="mt-5">
-                  <SecondaryButton
-                    type="submit"
-                    className="w-full text-center"
-                    loading={isSubmitting}
-                  >
-                    {isSubmitting ? "Resetting..." : "Reset"}
-                  </SecondaryButton>
-                </div>
-              </form>
+      <>
+        <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
+        <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
+          <div className="grid place-items-center bg-custom-background-100">
+            <div className="h-[30px] w-[30px]">
+              <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
             </div>
           </div>
         </div>
+      </>
+      <div className="grid place-items-center h-full w-full overflow-y-auto 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)}
+          >
+            <div className="space-y-1">
+              <Input
+                id="password"
+                type="password"
+                name="password"
+                register={register}
+                validations={{
+                  required: "Password is required",
+                }}
+                error={errors.password}
+                placeholder="Enter new password..."
+              />
+            </div>
+            <div className="space-y-1">
+              <Input
+                id="confirmPassword"
+                type="password"
+                name="confirmPassword"
+                register={register}
+                validations={{
+                  required: "Password confirmation is required",
+                }}
+                error={errors.confirmPassword}
+                placeholder="Confirm new password..."
+              />
+            </div>
+            <PrimaryButton type="submit" className="w-full text-center" loading={isSubmitting}>
+              {isSubmitting ? "Resetting..." : "Reset"}
+            </PrimaryButton>
+          </form>
+        </div>
       </div>
     </DefaultLayout>
   );
diff --git a/apps/app/pages/sign-up.tsx b/apps/app/pages/sign-up.tsx
index d0ae3ddb1..c391ef2e4 100644
--- a/apps/app/pages/sign-up.tsx
+++ b/apps/app/pages/sign-up.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import Image from "next/image";
 import { useRouter } from "next/router";
@@ -12,8 +12,10 @@ import useToast from "hooks/use-toast";
 import DefaultLayout from "layouts/default-layout";
 // components
 import { EmailPasswordForm } from "components/account";
+// ui
+import { Spinner } from "components/ui";
 // images
-import Logo from "public/plane-logos/blue-without-text.png";
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // types
 import type { NextPage } from "next";
 type EmailPasswordFormValues = {
@@ -23,6 +25,8 @@ type EmailPasswordFormValues = {
 };
 
 const SignUp: NextPage = () => {
+  const [isLoading, setIsLoading] = useState(true);
+
   const router = useRouter();
 
   const { setToastAlert } = useToast();
@@ -58,23 +62,34 @@ const SignUp: NextPage = () => {
       );
   };
 
+  useEffect(() => {
+    if (parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0")) router.push("/");
+    else setIsLoading(false);
+  }, [router]);
+
+  if (isLoading)
+    return (
+      <div className="grid place-items-center h-screen w-full">
+        <Spinner />
+      </div>
+    );
+
   return (
     <DefaultLayout>
-      <div className="flex h-screen w-full items-center justify-center overflow-auto">
-        <div className="flex min-h-full w-full flex-col justify-center py-12 px-6 lg:px-8">
-          <div className="flex flex-col gap-10 sm:mx-auto sm:w-full sm:max-w-md">
-            <div className="flex flex-col items-center justify-center gap-10">
-              <Image src={Logo} height={80} width={80} alt="Plane Web Logo" />
-              <div className="text-center text-xl font-medium text-custom-text-100">
-                Create a new Plane Account
-              </div>
-            </div>
-
-            <div className="flex flex-col rounded-[10px] bg-custom-background-100 shadow-md">
-              <EmailPasswordForm onSubmit={handleSignUp} />
+      <>
+        <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
+        <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
+          <div className="grid place-items-center bg-custom-background-100">
+            <div className="h-[30px] w-[30px]">
+              <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
             </div>
           </div>
         </div>
+      </>
+      <div className="grid place-items-center h-full w-full overflow-y-auto px-7">
+        <div>
+          <EmailPasswordForm onSubmit={handleSignUp} />
+        </div>
       </div>
     </DefaultLayout>
   );
diff --git a/apps/app/pages/workspace-member-invitation.tsx b/apps/app/pages/workspace-member-invitation.tsx
index 9af057f94..334d29480 100644
--- a/apps/app/pages/workspace-member-invitation.tsx
+++ b/apps/app/pages/workspace-member-invitation.tsx
@@ -66,7 +66,7 @@ const WorkspaceInvitation: NextPage = () => {
         {invitationDetail ? (
           <>
             {error ? (
-              <div className="flex w-full flex-col space-y-4 rounded border border-custom-border-100 bg-custom-background-100 px-4 py-8 text-center shadow-2xl md:w-1/3">
+              <div className="flex w-full flex-col space-y-4 rounded border border-custom-border-300 bg-custom-background-100 px-4 py-8 text-center shadow-2xl md:w-1/3">
                 <h2 className="text-xl uppercase">INVITATION NOT FOUND</h2>
               </div>
             ) : (
diff --git a/apps/app/public/empty-state/empty-project.svg b/apps/app/public/empty-state/empty-project.svg
deleted file mode 100644
index 2b917e3a9..000000000
--- a/apps/app/public/empty-state/empty-project.svg
+++ /dev/null
@@ -1,56 +0,0 @@
-<svg width="291" height="177" viewBox="0 0 291 177" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="64.5723" y="27.2246" width="79.5849" height="13.5513" rx="6.16937" fill="#EBEBEB"/>
-<rect x="159.581" y="27.2246" width="79.5849" height="13.5513" rx="6.16937" fill="#E2E2E2"/>
-<g filter="url(#filter0_d_2884_60167)">
-<rect x="28" y="2.5" width="260" height="147" rx="6.16937" fill="white"/>
-</g>
-<path d="M42.5048 87.6895V78.2349H46.0502C46.7766 78.2349 47.3859 78.3703 47.8784 78.6412C48.3739 78.912 48.7478 79.2844 49.0002 79.7583C49.2556 80.2292 49.3833 80.7647 49.3833 81.3649C49.3833 81.9712 49.2556 82.5098 49.0002 82.9806C48.7447 83.4515 48.3677 83.8224 47.8691 84.0932C47.3706 84.361 46.7566 84.4949 46.0272 84.4949H43.6774V83.0868H45.7963C46.2211 83.0868 46.5688 83.013 46.8397 82.8652C47.1105 82.7175 47.3105 82.5144 47.4398 82.2559C47.5721 81.9973 47.6383 81.7003 47.6383 81.3649C47.6383 81.0294 47.5721 80.734 47.4398 80.4785C47.3105 80.2231 47.109 80.0246 46.835 79.883C46.5642 79.7383 46.2149 79.666 45.7871 79.666H44.2175V87.6895H42.5048ZM50.7971 87.6895V80.5985H52.4175V81.7804H52.4914C52.6206 81.371 52.8422 81.0556 53.1562 80.834C53.4732 80.6093 53.8348 80.497 54.241 80.497C54.3334 80.497 54.4365 80.5016 54.5503 80.5108C54.6673 80.517 54.7642 80.5278 54.8412 80.5431V82.0804C54.7704 82.0558 54.6581 82.0343 54.5042 82.0158C54.3534 81.9943 54.2072 81.9835 54.0656 81.9835C53.7609 81.9835 53.487 82.0497 53.2439 82.182C53.0038 82.3113 52.8145 82.4913 52.676 82.7221C52.5376 82.9529 52.4683 83.2192 52.4683 83.5208V87.6895H50.7971ZM58.7525 87.8279C58.06 87.8279 57.4599 87.6756 56.9521 87.3709C56.4442 87.0662 56.0503 86.64 55.7702 86.0922C55.4933 85.5443 55.3548 84.9042 55.3548 84.1717C55.3548 83.4392 55.4933 82.7975 55.7702 82.2466C56.0503 81.6957 56.4442 81.2679 56.9521 80.9632C57.4599 80.6586 58.06 80.5062 58.7525 80.5062C59.445 80.5062 60.0451 80.6586 60.5529 80.9632C61.0607 81.2679 61.4531 81.6957 61.7301 82.2466C62.0102 82.7975 62.1502 83.4392 62.1502 84.1717C62.1502 84.9042 62.0102 85.5443 61.7301 86.0922C61.4531 86.64 61.0607 87.0662 60.5529 87.3709C60.0451 87.6756 59.445 87.8279 58.7525 87.8279ZM58.7617 86.4892C59.1372 86.4892 59.4511 86.3861 59.7035 86.1799C59.9558 85.9706 60.1436 85.6905 60.2667 85.3397C60.3929 84.9888 60.456 84.598 60.456 84.1671C60.456 83.7331 60.3929 83.3407 60.2667 82.9899C60.1436 82.6359 59.9558 82.3543 59.7035 82.1451C59.4511 81.9358 59.1372 81.8311 58.7617 81.8311C58.377 81.8311 58.0569 81.9358 57.8015 82.1451C57.5491 82.3543 57.3598 82.6359 57.2337 82.9899C57.1106 83.3407 57.049 83.7331 57.049 84.1671C57.049 84.598 57.1106 84.9888 57.2337 85.3397C57.3598 85.6905 57.5491 85.9706 57.8015 86.1799C58.0569 86.3861 58.377 86.4892 58.7617 86.4892ZM63.5686 80.5985H65.2398V88.0957C65.2398 88.6066 65.1428 89.0282 64.949 89.3606C64.7551 89.693 64.475 89.9408 64.1088 90.1039C63.7425 90.267 63.2978 90.3485 62.7746 90.3485C62.713 90.3485 62.6561 90.347 62.6038 90.3439C62.5515 90.3439 62.4945 90.3424 62.433 90.3393V88.9775C62.4791 88.9805 62.5207 88.9821 62.5576 88.9821C62.5945 88.9851 62.633 88.9867 62.673 88.9867C62.9931 88.9867 63.2224 88.9082 63.3609 88.7512C63.4994 88.5974 63.5686 88.3712 63.5686 88.0726V80.5985ZM64.3996 79.5922C64.1318 79.5922 63.9026 79.5044 63.7117 79.329C63.524 79.1505 63.4301 78.9366 63.4301 78.6873C63.4301 78.435 63.524 78.2211 63.7117 78.0456C63.9026 77.8671 64.1318 77.7779 64.3996 77.7779C64.6643 77.7779 64.8905 77.8671 65.0782 78.0456C65.269 78.2211 65.3644 78.435 65.3644 78.6873C65.3644 78.9366 65.269 79.1505 65.0782 79.329C64.8905 79.5044 64.6643 79.5922 64.3996 79.5922ZM70.0975 87.8279C69.3865 87.8279 68.7725 87.6802 68.2555 87.3848C67.7415 87.0862 67.3461 86.6646 67.0691 86.1199C66.7921 85.572 66.6536 84.9273 66.6536 84.1855C66.6536 83.4561 66.7921 82.816 67.0691 82.2651C67.3491 81.7111 67.74 81.2802 68.2417 80.9725C68.7433 80.6616 69.3327 80.5062 70.0098 80.5062C70.4468 80.5062 70.8592 80.577 71.247 80.7186C71.6378 80.8571 71.9825 81.0725 72.2811 81.3649C72.5827 81.6573 72.8197 82.0297 72.992 82.4821C73.1644 82.9314 73.2505 83.4669 73.2505 84.0886V84.601H67.4384V83.4746H71.6486C71.6455 83.1545 71.5763 82.8699 71.4409 82.6206C71.3055 82.3682 71.1162 82.1697 70.873 82.025C70.633 81.8804 70.3529 81.8081 70.0328 81.8081C69.6912 81.8081 69.3912 81.8912 69.1326 82.0574C68.8741 82.2205 68.6725 82.4359 68.5279 82.7037C68.3863 82.9683 68.314 83.2592 68.3109 83.5762V84.5595C68.3109 84.9719 68.3863 85.3258 68.5371 85.6213C68.6879 85.9136 68.8987 86.1383 69.1696 86.2953C69.4404 86.4492 69.7574 86.5261 70.1206 86.5261C70.3637 86.5261 70.5837 86.4922 70.7807 86.4245C70.9777 86.3538 71.1485 86.2507 71.2931 86.1152C71.4378 85.9798 71.5471 85.8121 71.6209 85.612L73.1813 85.7875C73.0828 86.1999 72.8951 86.56 72.6181 86.8677C72.3442 87.1724 71.9933 87.4094 71.5655 87.5787C71.1377 87.7449 70.6484 87.8279 70.0975 87.8279ZM77.7574 87.8279C77.0495 87.8279 76.4417 87.6725 75.9339 87.3617C75.4291 87.0508 75.0398 86.6215 74.7659 86.0737C74.4951 85.5228 74.3596 84.8888 74.3596 84.1717C74.3596 83.4515 74.4981 82.816 74.7751 82.2651C75.0521 81.7111 75.443 81.2802 75.9477 80.9725C76.4555 80.6616 77.0557 80.5062 77.7481 80.5062C78.3237 80.5062 78.833 80.6124 79.2762 80.8248C79.7224 81.034 80.0779 81.331 80.3426 81.7157C80.6073 82.0974 80.7581 82.5436 80.795 83.0545H79.1977C79.1331 82.7129 78.9792 82.4282 78.7361 82.2005C78.496 81.9696 78.1744 81.8542 77.7712 81.8542C77.4296 81.8542 77.1295 81.9466 76.871 82.1312C76.6125 82.3128 76.4109 82.5744 76.2662 82.916C76.1247 83.2576 76.0539 83.667 76.0539 84.144C76.0539 84.6272 76.1247 85.0427 76.2662 85.3904C76.4078 85.7351 76.6063 86.0014 76.8618 86.1891C77.1203 86.3738 77.4234 86.4661 77.7712 86.4661C78.0174 86.4661 78.2375 86.4199 78.4314 86.3276C78.6283 86.2322 78.793 86.0952 78.9253 85.9167C79.0577 85.7382 79.1485 85.5212 79.1977 85.2658H80.795C80.755 85.7675 80.6073 86.2122 80.3518 86.6C80.0964 86.9847 79.7486 87.2863 79.3085 87.5048C78.8684 87.7202 78.3514 87.8279 77.7574 87.8279ZM85.7081 80.5985V81.8912H81.6317V80.5985H85.7081ZM82.6381 78.8997H84.3093V85.5566C84.3093 85.7813 84.3432 85.9537 84.4109 86.0737C84.4817 86.1906 84.574 86.2707 84.6879 86.3137C84.8017 86.3568 84.9279 86.3784 85.0664 86.3784C85.171 86.3784 85.2665 86.3707 85.3526 86.3553C85.4419 86.3399 85.5096 86.3261 85.5558 86.3137L85.8374 87.6202C85.7481 87.651 85.6204 87.6848 85.4542 87.7218C85.2911 87.7587 85.091 87.7802 84.854 87.7864C84.4355 87.7987 84.0585 87.7356 83.723 87.5971C83.3875 87.4556 83.1213 87.237 82.9244 86.9416C82.7305 86.6461 82.6351 86.2768 82.6381 85.8336V78.8997ZM98.1737 78.2349V87.6895H96.6503L92.1954 81.2495H92.1169V87.6895H90.4042V78.2349H91.9369L96.3872 84.6795H96.4703V78.2349H98.1737ZM102.007 87.8326C101.557 87.8326 101.153 87.7525 100.792 87.5925C100.435 87.4294 100.152 87.1893 99.943 86.8723C99.7368 86.5553 99.6337 86.1645 99.6337 85.6998C99.6337 85.2997 99.7076 84.9688 99.8553 84.7072C100.003 84.4456 100.205 84.2363 100.46 84.0794C100.715 83.9224 101.003 83.8039 101.323 83.7239C101.646 83.6408 101.98 83.5808 102.325 83.5439C102.741 83.5008 103.078 83.4623 103.336 83.4284C103.595 83.3915 103.782 83.3361 103.899 83.2623C104.019 83.1853 104.079 83.0668 104.079 82.9068V82.8791C104.079 82.5313 103.976 82.262 103.77 82.0712C103.564 81.8804 103.267 81.785 102.879 81.785C102.47 81.785 102.145 81.8742 101.905 82.0527C101.668 82.2312 101.508 82.4421 101.425 82.6852L99.8645 82.4636C99.9876 82.0327 100.191 81.6726 100.474 81.3833C100.757 81.091 101.103 80.8725 101.513 80.7278C101.922 80.5801 102.374 80.5062 102.87 80.5062C103.211 80.5062 103.552 80.5462 103.89 80.6262C104.229 80.7063 104.538 80.8386 104.818 81.0233C105.098 81.2048 105.323 81.4526 105.492 81.7665C105.664 82.0804 105.751 82.4728 105.751 82.9437V87.6895H104.144V86.7154H104.089C103.987 86.9123 103.844 87.097 103.659 87.2694C103.478 87.4386 103.248 87.5756 102.971 87.6802C102.698 87.7818 102.376 87.8326 102.007 87.8326ZM102.441 86.6046C102.776 86.6046 103.067 86.5384 103.313 86.4061C103.559 86.2707 103.749 86.0922 103.881 85.8706C104.016 85.649 104.084 85.4074 104.084 85.1458V84.3102C104.032 84.3533 103.942 84.3933 103.816 84.4302C103.693 84.4672 103.555 84.4995 103.401 84.5272C103.247 84.5549 103.095 84.5795 102.944 84.601C102.793 84.6226 102.662 84.641 102.551 84.6564C102.302 84.6903 102.079 84.7457 101.882 84.8226C101.685 84.8996 101.53 85.0073 101.416 85.1458C101.302 85.2812 101.245 85.4566 101.245 85.6721C101.245 85.9798 101.357 86.2122 101.582 86.3691C101.807 86.5261 102.093 86.6046 102.441 86.6046ZM107.431 87.6895V80.5985H109.028V81.8034H109.111C109.259 81.3972 109.504 81.0802 109.845 80.8525C110.187 80.6216 110.595 80.5062 111.069 80.5062C111.549 80.5062 111.954 80.6232 112.283 80.8571C112.615 81.0879 112.849 81.4033 112.985 81.8034H113.058C113.215 81.4095 113.48 81.0956 113.852 80.8617C114.228 80.6247 114.673 80.5062 115.187 80.5062C115.839 80.5062 116.372 80.7124 116.784 81.1248C117.196 81.5372 117.403 82.1389 117.403 82.9299V87.6895H115.727V83.1884C115.727 82.7483 115.61 82.4267 115.376 82.2235C115.142 82.0173 114.856 81.9142 114.517 81.9142C114.114 81.9142 113.799 82.0404 113.571 82.2928C113.346 82.5421 113.234 82.8668 113.234 83.2669V87.6895H111.595V83.1191C111.595 82.7529 111.484 82.4605 111.263 82.242C111.044 82.0235 110.758 81.9142 110.404 81.9142C110.164 81.9142 109.945 81.9758 109.748 82.0989C109.551 82.2189 109.394 82.3897 109.278 82.6113C109.161 82.8298 109.102 83.0853 109.102 83.3777V87.6895H107.431ZM122.237 87.8279C121.526 87.8279 120.912 87.6802 120.395 87.3848C119.881 87.0862 119.486 86.6646 119.209 86.1199C118.932 85.572 118.793 84.9273 118.793 84.1855C118.793 83.4561 118.932 82.816 119.209 82.2651C119.489 81.7111 119.88 81.2802 120.381 80.9725C120.883 80.6616 121.472 80.5062 122.149 80.5062C122.586 80.5062 122.999 80.577 123.387 80.7186C123.777 80.8571 124.122 81.0725 124.421 81.3649C124.722 81.6573 124.959 82.0297 125.132 82.4821C125.304 82.9314 125.39 83.4669 125.39 84.0886V84.601H119.578V83.4746H123.788C123.785 83.1545 123.716 82.8699 123.581 82.6206C123.445 82.3682 123.256 82.1697 123.013 82.025C122.773 81.8804 122.493 81.8081 122.172 81.8081C121.831 81.8081 121.531 81.8912 121.272 82.0574C121.014 82.2205 120.812 82.4359 120.668 82.7037C120.526 82.9683 120.454 83.2592 120.451 83.5762V84.5595C120.451 84.9719 120.526 85.3258 120.677 85.6213C120.828 85.9136 121.038 86.1383 121.309 86.2953C121.58 86.4492 121.897 86.5261 122.26 86.5261C122.503 86.5261 122.723 86.4922 122.92 86.4245C123.117 86.3538 123.288 86.2507 123.433 86.1152C123.577 85.9798 123.687 85.8121 123.761 85.612L125.321 85.7875C125.222 86.1999 125.035 86.56 124.758 86.8677C124.484 87.1724 124.133 87.4094 123.705 87.5787C123.277 87.7449 122.788 87.8279 122.237 87.8279Z" fill="black"/>
-<rect x="42" y="100.5" width="232" height="8" rx="4" fill="#EBEBEB"/>
-<rect x="42" y="116.5" width="79.5849" height="8.02018" rx="4.01009" fill="#E2E2E2"/>
-<rect x="42" y="132.5" width="8" height="8" rx="4" fill="#E2E2E2"/>
-<rect x="266" y="132.5" width="8" height="8" rx="4" fill="#E2E2E2"/>
-<rect x="252" y="132.5" width="8" height="8" rx="4" fill="#E2E2E2"/>
-<rect x="53" y="132.5" width="32" height="8" rx="4" fill="#E2E2E2"/>
-<path d="M28 8.5C28 5.18629 30.6863 2.5 34 2.5H282C285.314 2.5 288 5.18629 288 8.5V68.5H28V8.5Z" fill="#ECF4FC"/>
-<path d="M140 21.5L193.694 68H86.3064L140 21.5Z" fill="#DAECF9"/>
-<path d="M186.5 30.5L230.234 68H142.766L186.5 30.5Z" fill="#DAECF9"/>
-<circle cx="231" cy="22.5" r="8" fill="#DAECF9"/>
-<rect x="39.5723" y="52.2246" width="79.5849" height="13.5513" rx="6.16937" fill="#EBEBEB"/>
-<rect x="134.581" y="52.2246" width="79.5849" height="13.5513" rx="6.16937" fill="#E2E2E2"/>
-<g filter="url(#filter1_d_2884_60167)">
-<rect x="3" y="27.5" width="260" height="147" rx="6.16937" fill="white"/>
-</g>
-<path d="M17.5048 112.689V103.235H21.0502C21.7766 103.235 22.3859 103.37 22.8784 103.641C23.3739 103.912 23.7478 104.284 24.0002 104.758C24.2556 105.229 24.3833 105.765 24.3833 106.365C24.3833 106.971 24.2556 107.51 24.0002 107.981C23.7447 108.452 23.3677 108.822 22.8691 109.093C22.3706 109.361 21.7566 109.495 21.0272 109.495H18.6774V108.087H20.7963C21.2211 108.087 21.5688 108.013 21.8397 107.865C22.1105 107.718 22.3105 107.514 22.4398 107.256C22.5721 106.997 22.6383 106.7 22.6383 106.365C22.6383 106.029 22.5721 105.734 22.4398 105.479C22.3105 105.223 22.109 105.025 21.835 104.883C21.5642 104.738 21.2149 104.666 20.7871 104.666H19.2175V112.689H17.5048ZM27.4683 103.235V112.689H25.7971V103.235H27.4683ZM31.2273 112.833C30.7779 112.833 30.3732 112.753 30.0131 112.593C29.6561 112.429 29.373 112.189 29.1637 111.872C28.9575 111.555 28.8544 111.164 28.8544 110.7C28.8544 110.3 28.9283 109.969 29.076 109.707C29.2237 109.446 29.4253 109.236 29.6808 109.079C29.9362 108.922 30.224 108.804 30.544 108.724C30.8672 108.641 31.2011 108.581 31.5458 108.544C31.9613 108.501 32.2983 108.462 32.5568 108.428C32.8153 108.392 33.0031 108.336 33.12 108.262C33.2401 108.185 33.3001 108.067 33.3001 107.907V107.879C33.3001 107.531 33.197 107.262 32.9908 107.071C32.7846 106.88 32.4876 106.785 32.0998 106.785C31.6905 106.785 31.3658 106.874 31.1257 107.053C30.8887 107.231 30.7287 107.442 30.6456 107.685L29.0852 107.464C29.2083 107.033 29.4115 106.673 29.6946 106.383C29.9777 106.091 30.324 105.872 30.7333 105.728C31.1426 105.58 31.5951 105.506 32.0906 105.506C32.4322 105.506 32.7723 105.546 33.1108 105.626C33.4493 105.706 33.7586 105.839 34.0387 106.023C34.3188 106.205 34.5434 106.453 34.7127 106.767C34.8851 107.08 34.9712 107.473 34.9712 107.944V112.689H33.3647V111.715H33.3093C33.2077 111.912 33.0646 112.097 32.88 112.269C32.6984 112.439 32.4691 112.576 32.1921 112.68C31.9182 112.782 31.5966 112.833 31.2273 112.833ZM31.6612 111.605C31.9967 111.605 32.2875 111.538 32.5337 111.406C32.7799 111.271 32.9692 111.092 33.1016 110.871C33.237 110.649 33.3047 110.407 33.3047 110.146V109.31C33.2524 109.353 33.1631 109.393 33.0369 109.43C32.9138 109.467 32.7753 109.499 32.6214 109.527C32.4676 109.555 32.3152 109.579 32.1644 109.601C32.0136 109.623 31.8828 109.641 31.772 109.656C31.5227 109.69 31.2996 109.746 31.1026 109.823C30.9057 109.9 30.7502 110.007 30.6364 110.146C30.5225 110.281 30.4656 110.457 30.4656 110.672C30.4656 110.98 30.5779 111.212 30.8026 111.369C31.0272 111.526 31.3134 111.605 31.6612 111.605ZM38.3228 108.535V112.689H36.6516V105.599H38.2489V106.803H38.332C38.4951 106.406 38.7552 106.091 39.1122 105.857C39.4723 105.623 39.917 105.506 40.4464 105.506C40.9357 105.506 41.362 105.611 41.7251 105.82C42.0914 106.029 42.3745 106.333 42.5746 106.73C42.7777 107.127 42.8777 107.608 42.8746 108.175V112.689H41.2035V108.433C41.2035 107.959 41.0804 107.588 40.8342 107.32C40.591 107.053 40.254 106.919 39.8232 106.919C39.5308 106.919 39.2707 106.983 39.043 107.113C38.8183 107.239 38.6413 107.422 38.5121 107.662C38.3859 107.902 38.3228 108.193 38.3228 108.535ZM47.7127 112.828C47.0018 112.828 46.3878 112.68 45.8707 112.385C45.3568 112.086 44.9613 111.665 44.6843 111.12C44.4073 110.572 44.2688 109.927 44.2688 109.186C44.2688 108.456 44.4073 107.816 44.6843 107.265C44.9644 106.711 45.3552 106.28 45.8569 105.972C46.3585 105.662 46.9479 105.506 47.625 105.506C48.062 105.506 48.4744 105.577 48.8622 105.719C49.2531 105.857 49.5978 106.073 49.8963 106.365C50.1979 106.657 50.4349 107.03 50.6072 107.482C50.7796 107.931 50.8658 108.467 50.8658 109.089V109.601H45.0536V108.475H49.2638C49.2608 108.155 49.1915 107.87 49.0561 107.621C48.9207 107.368 48.7314 107.17 48.4883 107.025C48.2482 106.88 47.9682 106.808 47.6481 106.808C47.3065 106.808 47.0064 106.891 46.7479 107.057C46.4893 107.22 46.2878 107.436 46.1431 107.704C46.0015 107.968 45.9292 108.259 45.9261 108.576V109.559C45.9261 109.972 46.0015 110.326 46.1523 110.621C46.3031 110.914 46.514 111.138 46.7848 111.295C47.0556 111.449 47.3726 111.526 47.7358 111.526C47.9789 111.526 48.199 111.492 48.396 111.425C48.5929 111.354 48.7637 111.251 48.9084 111.115C49.053 110.98 49.1623 110.812 49.2362 110.612L50.7965 110.787C50.698 111.2 50.5103 111.56 50.2333 111.868C49.9594 112.172 49.6085 112.409 49.1808 112.579C48.753 112.745 48.2636 112.828 47.7127 112.828ZM55.578 103.235H57.6739L60.4807 110.086H60.5915L63.3983 103.235H65.4942V112.689H63.8508V106.194H63.7631L61.1501 112.662H59.9221L57.3092 106.18H57.2215V112.689H55.578V103.235ZM69.3259 112.833C68.8766 112.833 68.4719 112.753 68.1118 112.593C67.7548 112.429 67.4716 112.189 67.2623 111.872C67.0561 111.555 66.953 111.164 66.953 110.7C66.953 110.3 67.0269 109.969 67.1746 109.707C67.3224 109.446 67.5239 109.236 67.7794 109.079C68.0348 108.922 68.3226 108.804 68.6427 108.724C68.9658 108.641 69.2997 108.581 69.6444 108.544C70.0599 108.501 70.3969 108.462 70.6555 108.428C70.914 108.392 71.1017 108.336 71.2187 108.262C71.3387 108.185 71.3987 108.067 71.3987 107.907V107.879C71.3987 107.531 71.2956 107.262 71.0894 107.071C70.8832 106.88 70.5862 106.785 70.1984 106.785C69.7891 106.785 69.4644 106.874 69.2243 107.053C68.9874 107.231 68.8273 107.442 68.7442 107.685L67.1839 107.464C67.307 107.033 67.5101 106.673 67.7932 106.383C68.0764 106.091 68.4226 105.872 68.8319 105.728C69.2413 105.58 69.6937 105.506 70.1892 105.506C70.5308 105.506 70.8709 105.546 71.2094 105.626C71.548 105.706 71.8573 105.839 72.1373 106.023C72.4174 106.205 72.6421 106.453 72.8113 106.767C72.9837 107.08 73.0699 107.473 73.0699 107.944V112.689H71.4633V111.715H71.4079C71.3064 111.912 71.1633 112.097 70.9786 112.269C70.797 112.439 70.5677 112.576 70.2907 112.68C70.0168 112.782 69.6952 112.833 69.3259 112.833ZM69.7599 111.605C70.0953 111.605 70.3862 111.538 70.6324 111.406C70.8786 111.271 71.0679 111.092 71.2002 110.871C71.3356 110.649 71.4033 110.407 71.4033 110.146V109.31C71.351 109.353 71.2617 109.393 71.1356 109.43C71.0125 109.467 70.874 109.499 70.7201 109.527C70.5662 109.555 70.4139 109.579 70.2631 109.601C70.1122 109.623 69.9814 109.641 69.8706 109.656C69.6214 109.69 69.3982 109.746 69.2013 109.823C69.0043 109.9 68.8489 110.007 68.735 110.146C68.6211 110.281 68.5642 110.457 68.5642 110.672C68.5642 110.98 68.6765 111.212 68.9012 111.369C69.1259 111.526 69.4121 111.605 69.7599 111.605ZM74.7503 112.689V105.599H76.3706V106.78H76.4445C76.5738 106.371 76.7954 106.056 77.1093 105.834C77.4263 105.609 77.7879 105.497 78.1942 105.497C78.2865 105.497 78.3896 105.502 78.5035 105.511C78.6204 105.517 78.7174 105.528 78.7943 105.543V107.08C78.7235 107.056 78.6112 107.034 78.4573 107.016C78.3065 106.994 78.1603 106.983 78.0187 106.983C77.714 106.983 77.4401 107.05 77.197 107.182C76.9569 107.311 76.7677 107.491 76.6292 107.722C76.4907 107.953 76.4214 108.219 76.4214 108.521V112.689H74.7503ZM81.428 110.464L81.4234 108.447H81.6911L84.2394 105.599H86.1922L83.0576 109.089H82.7114L81.428 110.464ZM79.9046 112.689V103.235H81.5757V112.689H79.9046ZM84.3548 112.689L82.0466 109.463L83.173 108.285L86.3538 112.689H84.3548ZM90.1531 112.828C89.4422 112.828 88.8282 112.68 88.3112 112.385C87.7972 112.086 87.4017 111.665 87.1247 111.12C86.8477 110.572 86.7093 109.927 86.7093 109.186C86.7093 108.456 86.8477 107.816 87.1247 107.265C87.4048 106.711 87.7957 106.28 88.2973 105.972C88.799 105.662 89.3883 105.506 90.0654 105.506C90.5025 105.506 90.9149 105.577 91.3026 105.719C91.6935 105.857 92.0382 106.073 92.3367 106.365C92.6383 106.657 92.8753 107.03 93.0477 107.482C93.22 107.931 93.3062 108.467 93.3062 109.089V109.601H87.4941V108.475H91.7043C91.7012 108.155 91.632 107.87 91.4965 107.621C91.3611 107.368 91.1718 107.17 90.9287 107.025C90.6887 106.88 90.4086 106.808 90.0885 106.808C89.7469 106.808 89.4468 106.891 89.1883 107.057C88.9298 107.22 88.7282 107.436 88.5835 107.704C88.442 107.968 88.3696 108.259 88.3666 108.576V109.559C88.3666 109.972 88.442 110.326 88.5928 110.621C88.7436 110.914 88.9544 111.138 89.2252 111.295C89.4961 111.449 89.8131 111.526 90.1762 111.526C90.4194 111.526 90.6394 111.492 90.8364 111.425C91.0334 111.354 91.2042 111.251 91.3488 111.115C91.4935 110.98 91.6027 110.812 91.6766 110.612L93.2369 110.787C93.1385 111.2 92.9507 111.56 92.6737 111.868C92.3998 112.172 92.049 112.409 91.6212 112.579C91.1934 112.745 90.704 112.828 90.1531 112.828ZM98.2608 105.599V106.891H94.1845V105.599H98.2608ZM95.1909 103.9H96.862V110.557C96.862 110.781 96.8959 110.954 96.9636 111.074C97.0344 111.191 97.1267 111.271 97.2406 111.314C97.3545 111.357 97.4806 111.378 97.6191 111.378C97.7238 111.378 97.8192 111.371 97.9054 111.355C97.9946 111.34 98.0623 111.326 98.1085 111.314L98.3901 112.62C98.3008 112.651 98.1731 112.685 98.0069 112.722C97.8438 112.759 97.6438 112.78 97.4068 112.786C96.9882 112.799 96.6112 112.736 96.2757 112.597C95.9403 112.456 95.6741 112.237 95.4771 111.942C95.2832 111.646 95.1878 111.277 95.1909 110.834V103.9ZM99.6585 112.689V105.599H101.33V112.689H99.6585ZM100.499 104.592C100.234 104.592 100.006 104.504 99.8154 104.329C99.6246 104.151 99.5292 103.937 99.5292 103.687C99.5292 103.435 99.6246 103.221 99.8154 103.046C100.006 102.867 100.234 102.778 100.499 102.778C100.766 102.778 100.994 102.867 101.182 103.046C101.373 103.221 101.468 103.435 101.468 103.687C101.468 103.937 101.373 104.151 101.182 104.329C100.994 104.504 100.766 104.592 100.499 104.592ZM104.719 108.535V112.689H103.048V105.599H104.645V106.803H104.729C104.892 106.406 105.152 106.091 105.509 105.857C105.869 105.623 106.314 105.506 106.843 105.506C107.332 105.506 107.758 105.611 108.122 105.82C108.488 106.029 108.771 106.333 108.971 106.73C109.174 107.127 109.274 107.608 109.271 108.175V112.689H107.6V108.433C107.6 107.959 107.477 107.588 107.231 107.32C106.988 107.053 106.651 106.919 106.22 106.919C105.927 106.919 105.667 106.983 105.439 107.113C105.215 107.239 105.038 107.422 104.909 107.662C104.782 107.902 104.719 108.193 104.719 108.535ZM114.054 115.496C113.454 115.496 112.938 115.415 112.507 115.252C112.076 115.092 111.73 114.876 111.469 114.605C111.207 114.334 111.025 114.034 110.924 113.705L112.429 113.34C112.497 113.479 112.595 113.616 112.724 113.751C112.854 113.89 113.027 114.004 113.246 114.093C113.468 114.185 113.746 114.231 114.081 114.231C114.555 114.231 114.948 114.116 115.259 113.885C115.57 113.657 115.725 113.282 115.725 112.759V111.415H115.642C115.556 111.588 115.43 111.765 115.263 111.946C115.1 112.128 114.883 112.28 114.612 112.403C114.345 112.526 114.008 112.588 113.601 112.588C113.057 112.588 112.563 112.46 112.119 112.205C111.679 111.946 111.329 111.561 111.067 111.051C110.808 110.537 110.679 109.893 110.679 109.121C110.679 108.342 110.808 107.685 111.067 107.15C111.329 106.611 111.681 106.203 112.124 105.926C112.567 105.646 113.061 105.506 113.606 105.506C114.021 105.506 114.363 105.577 114.631 105.719C114.902 105.857 115.117 106.025 115.277 106.222C115.437 106.416 115.559 106.599 115.642 106.771H115.734V105.599H117.382V112.805C117.382 113.411 117.238 113.913 116.948 114.31C116.659 114.707 116.264 115.004 115.762 115.201C115.26 115.398 114.691 115.496 114.054 115.496ZM114.068 111.277C114.422 111.277 114.723 111.191 114.972 111.018C115.222 110.846 115.411 110.598 115.54 110.275C115.67 109.952 115.734 109.564 115.734 109.112C115.734 108.665 115.67 108.275 115.54 107.939C115.414 107.604 115.226 107.344 114.977 107.159C114.731 106.971 114.428 106.877 114.068 106.877C113.695 106.877 113.384 106.974 113.135 107.168C112.886 107.362 112.698 107.628 112.572 107.967C112.446 108.302 112.383 108.684 112.383 109.112C112.383 109.546 112.446 109.926 112.572 110.252C112.701 110.575 112.89 110.827 113.14 111.009C113.392 111.188 113.701 111.277 114.068 111.277Z" fill="black"/>
-<rect x="17" y="125.5" width="232" height="8" rx="4" fill="#EBEBEB"/>
-<rect x="17" y="141.5" width="79.5849" height="8.02018" rx="4.01009" fill="#E2E2E2"/>
-<rect x="17" y="157.5" width="8" height="8" rx="4" fill="#E2E2E2"/>
-<rect x="241" y="157.5" width="8" height="8" rx="4" fill="#E2E2E2"/>
-<rect x="227" y="157.5" width="8" height="8" rx="4" fill="#E2E2E2"/>
-<rect x="28" y="157.5" width="32" height="8" rx="4" fill="#E2E2E2"/>
-<path d="M3 33.5C3 30.1863 5.68629 27.5 9 27.5H257C260.314 27.5 263 30.1863 263 33.5V93.5H3V33.5Z" fill="#ECF4FC"/>
-<path d="M115 46.5L168.694 93H61.3064L115 46.5Z" fill="#DAECF9"/>
-<path d="M161.5 55.5L205.234 93H117.766L161.5 55.5Z" fill="#DAECF9"/>
-<circle cx="206" cy="47.5" r="8" fill="#DAECF9"/>
-<defs>
-<filter id="filter0_d_2884_60167" x="25.5323" y="0.0322516" width="264.935" height="151.935" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="1.23387"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2884_60167"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2884_60167" result="shape"/>
-</filter>
-<filter id="filter1_d_2884_60167" x="0.532252" y="25.0323" width="264.935" height="151.935" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="1.23387"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2884_60167"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2884_60167" result="shape"/>
-</filter>
-</defs>
-</svg>
diff --git a/apps/app/public/empty-state/invitation.svg b/apps/app/public/empty-state/invitation.svg
new file mode 100644
index 000000000..bda66dadc
--- /dev/null
+++ b/apps/app/public/empty-state/invitation.svg
@@ -0,0 +1,23 @@
+<svg width="225" height="172" viewBox="0 0 225 172" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M180.708 50.9526H180.659L152.217 63.0972L113.304 79.7136C113.152 79.7776 112.989 79.811 112.824 79.8118C112.659 79.8127 112.495 79.781 112.342 79.7186L72.195 63.0625L43.0549 50.9725L43.0104 50.9526H42.9608C42.501 50.9531 42.0602 51.136 41.7351 51.4611C41.41 51.7863 41.2271 52.2271 41.2266 52.6869V128.002C41.2271 128.462 41.41 128.903 41.7351 129.228C42.0602 129.553 42.501 129.736 42.9608 129.736H180.708C181.168 129.736 181.609 129.553 181.934 129.228C182.259 128.903 182.442 128.462 182.443 128.002V52.6869C182.442 52.2271 182.259 51.7863 181.934 51.4611C181.609 51.136 181.168 50.9531 180.708 50.9526Z" fill="white"/>
+<path d="M180.843 51.4476C180.793 51.4477 180.743 51.4322 180.702 51.4032L112.185 3.68622C111.977 3.54168 111.729 3.46444 111.475 3.46487C111.222 3.4653 110.974 3.54339 110.766 3.68863L42.7428 51.4028C42.689 51.4402 42.6226 51.4548 42.558 51.4434C42.4935 51.4319 42.4361 51.3953 42.3984 51.3417C42.3608 51.288 42.346 51.2216 42.3572 51.157C42.3684 51.0924 42.4047 51.0349 42.4583 50.997L110.482 3.28292C110.773 3.07961 111.119 2.97031 111.474 2.96973C111.83 2.96915 112.177 3.0773 112.468 3.27965L180.985 50.9965C181.028 51.0267 181.061 51.0699 181.078 51.1198C181.095 51.1698 181.096 51.2238 181.08 51.2742C181.064 51.3245 181.033 51.3684 180.99 51.3996C180.948 51.4308 180.896 51.4477 180.843 51.4476Z" fill="#737373"/>
+<path d="M46.6191 53.1389L111.532 5.03052L176.937 56.5619L114.876 93.3522L81.1828 85.6723L46.6191 53.1389Z" fill="#E5E5E5"/>
+<path d="M84.0318 116.076H51.9633C51.566 116.077 51.1847 115.919 50.9033 115.639C50.6219 115.358 50.4635 114.977 50.4629 114.58C50.4623 114.183 50.6196 113.801 50.9001 113.52C51.1807 113.239 51.5616 113.08 51.9589 113.08H84.0318C84.4292 113.079 84.8105 113.236 85.0919 113.517C85.3733 113.797 85.5317 114.178 85.5323 114.576C85.5329 114.973 85.3756 115.354 85.095 115.636C84.8145 115.917 84.4336 116.075 84.0363 116.076H84.0318Z" fill="#3F76FF"/>
+<path d="M63.4697 109.635H51.9642C51.5671 109.635 51.186 109.478 50.9049 109.197C50.6237 108.916 50.4654 108.536 50.4648 108.139C50.4643 107.741 50.6214 107.36 50.9017 107.079C51.1821 106.798 51.5626 106.639 51.9598 106.638H63.4697C63.6665 106.638 63.8615 106.676 64.0435 106.751C64.2255 106.826 64.391 106.936 64.5304 107.075C64.6699 107.214 64.7806 107.379 64.8562 107.561C64.9318 107.742 64.9709 107.937 64.9712 108.134C64.9715 108.331 64.933 108.526 64.8579 108.708C64.7828 108.89 64.6726 109.055 64.5335 109.195C64.3945 109.334 64.2294 109.445 64.0476 109.52C63.8659 109.596 63.671 109.634 63.4741 109.635H63.4697Z" fill="#3F76FF"/>
+<path d="M112.457 79.9355C112.214 79.9357 111.972 79.8884 111.747 79.7962L71.7129 63.185V11.1893C71.7134 10.7295 71.8963 10.2887 72.2214 9.96362C72.5465 9.6385 72.9873 9.45562 73.4471 9.45508H150.249C150.709 9.45562 151.149 9.6385 151.475 9.96362C151.8 10.2887 151.983 10.7295 151.983 11.1893V63.2213L151.908 63.2535L113.19 79.7881C112.958 79.8855 112.709 79.9356 112.457 79.9355Z" fill="white"/>
+<path d="M112.449 80.0571C112.189 80.0574 111.931 80.007 111.69 79.9088L71.5801 63.2657V11.1872C71.5806 10.6946 71.7766 10.2223 72.1249 9.87394C72.4733 9.5256 72.9456 9.32966 73.4382 9.3291H150.24C150.733 9.32966 151.205 9.5256 151.553 9.87394C151.902 10.2223 152.097 10.6946 152.098 11.1872V63.301L113.229 79.8999C112.982 80.0039 112.717 80.0574 112.449 80.0571ZM72.0756 62.9347L111.879 79.4507C112.251 79.6013 112.666 79.5989 113.036 79.4438L151.603 62.9739V11.1872C151.602 10.826 151.458 10.4796 151.203 10.2242C150.948 9.96874 150.601 9.82505 150.24 9.82462H73.4382C73.0769 9.82505 72.7306 9.96874 72.4752 10.2242C72.2197 10.4796 72.076 10.826 72.0756 11.1872L72.0756 62.9347Z" fill="#737373"/>
+<path d="M180.333 50.9526H180.284L151.842 63.0972L112.929 79.7136C112.777 79.7776 112.614 79.811 112.449 79.8118C112.284 79.8127 112.12 79.781 111.967 79.7186L71.82 63.0625L42.6799 50.9725L42.6354 50.9526H42.5858C42.126 50.9531 41.6852 51.136 41.3601 51.4611C41.035 51.7863 40.8521 52.2271 40.8516 52.6869V128.002C40.8521 128.462 41.035 128.903 41.3601 129.228C41.6852 129.553 42.126 129.736 42.5858 129.736H180.333C180.793 129.736 181.234 129.553 181.559 129.228C181.884 128.903 182.067 128.462 182.068 128.002V52.6869C182.067 52.2271 181.884 51.7863 181.559 51.4611C181.234 51.136 180.793 50.9531 180.333 50.9526ZM181.572 128.002C181.572 128.331 181.441 128.646 181.209 128.878C180.977 129.11 180.662 129.241 180.333 129.241H42.5858C42.2573 129.241 41.9423 129.11 41.71 128.878C41.4777 128.646 41.3472 128.331 41.3471 128.002V52.6869C41.3475 52.3665 41.4717 52.0588 41.6938 51.8279C41.9159 51.5971 42.2186 51.461 42.5387 51.4481L71.82 63.5977L111.777 80.1769C112.209 80.3529 112.694 80.3502 113.124 80.1695L151.842 63.6348L180.383 51.4481C180.702 51.4619 181.004 51.5984 181.226 51.8291C181.447 52.0598 181.571 52.367 181.572 52.6869V128.002Z" fill="#737373"/>
+<path d="M106.214 28.8902H78.9616C78.4364 28.8895 77.933 28.6803 77.562 28.3087C77.1909 27.9371 76.9824 27.4334 76.9824 26.9083C76.9824 26.3831 77.1909 25.8794 77.562 25.5078C77.933 25.1362 78.4364 24.927 78.9616 24.9263H106.214C106.739 24.927 107.242 25.1362 107.613 25.5078C107.985 25.8794 108.193 26.3831 108.193 26.9083C108.193 27.4334 107.985 27.9371 107.613 28.3087C107.242 28.6803 106.739 28.8895 106.214 28.8902Z" fill="#3F76FF"/>
+<path d="M92.095 20.4671H78.9644C78.4387 20.4671 77.9346 20.2583 77.5629 19.8866C77.1912 19.5149 76.9824 19.0108 76.9824 18.4851C76.9824 17.9595 77.1912 17.4554 77.5629 17.0837C77.9346 16.712 78.4387 16.5032 78.9644 16.5032H92.095C92.6207 16.5032 93.1248 16.712 93.4965 17.0837C93.8682 17.4554 94.077 17.9595 94.077 18.4851C94.077 19.0108 93.8682 19.5149 93.4965 19.8866C93.1248 20.2583 92.6207 20.4671 92.095 20.4671Z" fill="#3F76FF"/>
+<path d="M132.224 48.7101H90.6022C90.077 48.7093 89.5736 48.5002 89.2026 48.1286C88.8315 47.7569 88.623 47.2532 88.623 46.7281C88.623 46.2029 88.8315 45.6992 89.2026 45.3276C89.5736 44.956 90.077 44.7468 90.6022 44.7461H132.224C132.749 44.7468 133.252 44.956 133.623 45.3276C133.995 45.6992 134.203 46.2029 134.203 46.7281C134.203 47.2532 133.995 47.7569 133.623 48.1286C133.252 48.5002 132.749 48.7093 132.224 48.7101Z" fill="#D4D4D4"/>
+<path d="M132.227 57.8775H90.605C90.0794 57.8775 89.5753 57.6687 89.2036 57.297C88.8319 56.9253 88.623 56.4212 88.623 55.8956C88.623 55.3699 88.8319 54.8658 89.2036 54.4941C89.5753 54.1224 90.0794 53.9136 90.605 53.9136H132.227C132.752 53.9136 133.256 54.1224 133.628 54.4941C134 54.8658 134.209 55.3699 134.209 55.8956C134.209 56.4212 134 56.9253 133.628 57.297C133.256 57.6687 132.752 57.8775 132.227 57.8775Z" fill="#D4D4D4"/>
+<path d="M4.31884 18.8089C4.1902 18.7329 4.04274 18.6946 3.89335 18.6985C3.74396 18.7024 3.59869 18.7483 3.47421 18.831C3.34972 18.9137 3.25105 19.0298 3.1895 19.1659C3.12795 19.3021 3.10603 19.4529 3.12622 19.6009L3.74041 24.1058C3.74886 24.1722 3.74432 24.2396 3.72705 24.3043C3.70779 24.368 3.67565 24.4271 3.63263 24.4778L0.192651 28.5531C0.0777315 28.6843 0.0102569 28.8503 0.00107788 29.0244C-0.00810114 29.1986 0.0415537 29.3708 0.142047 29.5133L0.145653 29.5185C0.241921 29.6626 0.38362 29.7703 0.548188 29.8245C0.712756 29.8787 0.89073 29.8763 1.05378 29.8177L3.53806 28.9745C3.62041 28.9472 3.70862 28.9429 3.79325 28.9619C3.87788 28.981 3.95574 29.0227 4.01849 29.0826C4.0653 29.1259 4.10263 29.1785 4.12813 29.237C4.15363 29.2955 4.16674 29.3586 4.16664 29.4224L4.26375 38.2739C4.26476 38.402 4.29696 38.528 4.35755 38.6409C4.41814 38.7538 4.50531 38.8502 4.61153 38.9219C4.71736 38.9934 4.83881 39.0385 4.96568 39.0532C5.09255 39.068 5.22111 39.0521 5.34055 39.0068L23.8825 31.9156C24.0224 31.8624 24.1443 31.7708 24.2344 31.6514C24.3245 31.532 24.379 31.3895 24.3918 31.2405C24.4045 31.0914 24.3749 30.9418 24.3064 30.8088C24.2379 30.6759 24.1332 30.5649 24.0045 30.4888L23.752 30.3388L4.31884 18.8089ZM3.44013 19.5577C3.4282 19.4688 3.44155 19.3783 3.47865 19.2966C3.51575 19.2149 3.57511 19.1454 3.64991 19.0958C3.72472 19.0463 3.81195 19.0189 3.90163 19.0166C3.99131 19.0144 4.07981 19.0375 4.15699 19.0832L23.584 30.6097L23.8426 30.763C23.9194 30.8089 23.9818 30.8755 24.0226 30.9552C24.0635 31.0348 24.0811 31.1243 24.0735 31.2135C24.0659 31.3027 24.0335 31.388 23.9798 31.4596C23.9261 31.5313 23.8534 31.5864 23.7699 31.6187L5.22796 38.71C5.15625 38.7373 5.07901 38.7468 5.00281 38.7379C4.9266 38.7289 4.85369 38.7017 4.79027 38.6585C4.72684 38.6153 4.67476 38.5575 4.63848 38.4898C4.6022 38.4222 4.58278 38.3469 4.58185 38.2702L4.48477 29.4188C4.48483 29.3312 4.46979 29.2443 4.4403 29.1618L23.3178 31.3308C23.3914 31.34 23.4659 31.3232 23.5284 31.2832C23.5909 31.2433 23.6376 31.1828 23.6602 31.1122C23.6828 31.0415 23.6801 30.9652 23.6524 30.8963C23.6247 30.8275 23.5738 30.7705 23.5085 30.7352C23.4927 30.7264 23.4761 30.7192 23.4588 30.7136L4.06 24.2382C4.0647 24.1796 4.0628 24.1207 4.05432 24.0625L3.44013 19.5577Z" fill="#FAFAFA"/>
+<path d="M4.31884 18.8089C4.1902 18.7329 4.04274 18.6946 3.89335 18.6985C3.74396 18.7024 3.59869 18.7483 3.47421 18.831C3.34972 18.9137 3.25105 19.0298 3.1895 19.1659C3.12795 19.3021 3.10603 19.4529 3.12622 19.6009L3.74041 24.1058C3.74886 24.1722 3.74432 24.2396 3.72705 24.3043C3.70779 24.368 3.67565 24.4271 3.63263 24.4778L0.192651 28.5531C0.0777315 28.6843 0.0102569 28.8503 0.00107788 29.0244C-0.00810114 29.1986 0.0415537 29.3708 0.142047 29.5133L0.145653 29.5185C0.241921 29.6626 0.38362 29.7703 0.548188 29.8245C0.712756 29.8787 0.89073 29.8763 1.05378 29.8177L3.53806 28.9745C3.62041 28.9472 3.70862 28.9429 3.79325 28.9619C3.87788 28.981 3.95574 29.0227 4.01849 29.0826C4.0653 29.1259 4.10263 29.1785 4.12813 29.237C4.15363 29.2955 4.16674 29.3586 4.16664 29.4224L4.26375 38.2739C4.26476 38.402 4.29696 38.528 4.35755 38.6409C4.41814 38.7538 4.50531 38.8502 4.61153 38.9219C4.71736 38.9934 4.83881 39.0385 4.96568 39.0532C5.09255 39.068 5.22111 39.0521 5.34055 39.0068L23.8825 31.9156C24.0224 31.8624 24.1443 31.7708 24.2344 31.6514C24.3245 31.532 24.379 31.3895 24.3918 31.2405C24.4045 31.0914 24.3749 30.9418 24.3064 30.8088C24.2379 30.6759 24.1332 30.5649 24.0045 30.4888L23.752 30.3388L4.31884 18.8089ZM3.44013 19.5577C3.4282 19.4688 3.44155 19.3783 3.47865 19.2966C3.51575 19.2149 3.57511 19.1454 3.64991 19.0958C3.72472 19.0463 3.81195 19.0189 3.90163 19.0166C3.99131 19.0144 4.07981 19.0375 4.15699 19.0832L23.584 30.6097L23.8426 30.763C23.9194 30.8089 23.9818 30.8755 24.0226 30.9552C24.0635 31.0348 24.0811 31.1243 24.0735 31.2135C24.0659 31.3027 24.0335 31.388 23.9798 31.4596C23.9261 31.5313 23.8534 31.5864 23.7699 31.6187L5.22796 38.71C5.15625 38.7372 5.07901 38.7468 5.00281 38.7378C4.92661 38.7289 4.85369 38.7016 4.79027 38.6585C4.72684 38.6153 4.67478 38.5574 4.63849 38.4898C4.60221 38.4222 4.58278 38.3469 4.58185 38.2701L4.48476 29.4188C4.48482 29.3312 4.46978 29.2443 4.44029 29.1618C4.39874 29.043 4.32884 28.9362 4.23664 28.8506C4.22409 28.838 4.21025 28.8264 4.19636 28.8147L4.19548 28.8134C4.09132 28.7274 3.96692 28.6694 3.83408 28.645C3.70123 28.6206 3.56435 28.6306 3.43642 28.6739L0.950856 29.518C0.852886 29.5536 0.74577 29.555 0.646894 29.522C0.548019 29.4891 0.463174 29.4237 0.406114 29.3365L0.404305 29.3339C0.343313 29.2487 0.313121 29.1453 0.318699 29.0407C0.324276 28.9361 0.365294 28.8364 0.434997 28.7582L3.87503 24.683C3.91181 24.6403 3.94366 24.5936 3.97001 24.5438L3.97132 24.5429C3.99674 24.4953 4.01703 24.445 4.03182 24.393C4.0467 24.3426 4.05614 24.2907 4.06001 24.2383C4.06471 24.1797 4.06281 24.1207 4.05433 24.0625L3.44013 19.5577Z" fill="#A3A3A3"/>
+<path d="M4.05073 24.2382L23.4495 30.7135C23.4668 30.7191 23.4834 30.7263 23.4993 30.7351C23.5645 30.7704 23.6154 30.8274 23.6431 30.8962C23.6707 30.9651 23.6735 31.0414 23.6509 31.1121C23.6282 31.1827 23.5816 31.2432 23.5191 31.2831C23.4566 31.3231 23.3821 31.3399 23.3085 31.3307L4.43101 29.1617L4.09764 29.1237L4.13455 28.8084L4.1862 28.8133L4.18707 28.8146L23.3445 31.0141L3.96204 24.5428L3.96073 24.5437L3.87695 24.5148L3.97757 24.2134L4.05073 24.2382Z" fill="#A3A3A3"/>
+<path d="M220.658 0.110677L201.225 11.6406L200.972 11.7905C200.843 11.8667 200.739 11.9776 200.67 12.1106C200.602 12.2436 200.572 12.3932 200.585 12.5423C200.598 12.6913 200.652 12.8337 200.742 12.9532C200.832 13.0726 200.954 13.1641 201.094 13.2173L219.636 20.3086C219.756 20.3539 219.884 20.3698 220.011 20.355C220.138 20.3402 220.259 20.2952 220.365 20.2237C220.471 20.152 220.559 20.0555 220.619 19.9426C220.68 19.8297 220.712 19.7038 220.713 19.5756L220.81 10.7242C220.81 10.6604 220.823 10.5973 220.849 10.5388C220.874 10.4803 220.911 10.4277 220.958 10.3843C221.021 10.3244 221.099 10.2827 221.183 10.2637C221.268 10.2447 221.356 10.249 221.439 10.2762L223.923 11.1194C224.086 11.1781 224.264 11.1805 224.429 11.1263C224.593 11.072 224.735 10.9643 224.831 10.8203L224.835 10.815C224.935 10.6725 224.985 10.5003 224.976 10.3262C224.966 10.152 224.899 9.98603 224.784 9.85486L221.344 5.77957C221.301 5.72882 221.269 5.66977 221.25 5.60608C221.232 5.54139 221.228 5.47396 221.236 5.40754L221.85 0.902707C221.871 0.75464 221.849 0.603882 221.787 0.467707C221.726 0.331533 221.627 0.215459 221.502 0.132785C221.378 0.0501121 221.233 0.00418352 221.083 0.000272462C220.934 -0.0036386 220.786 0.0346305 220.658 0.110677ZM221.537 0.859443L220.922 5.36426C220.914 5.42244 220.912 5.4814 220.917 5.54001L201.518 12.0154C201.501 12.0209 201.484 12.0282 201.468 12.037C201.403 12.0723 201.352 12.1293 201.324 12.1981C201.297 12.2669 201.294 12.3433 201.317 12.4139C201.339 12.4846 201.386 12.5451 201.448 12.585C201.511 12.6249 201.585 12.6417 201.659 12.6325L220.536 10.4636C220.507 10.546 220.492 10.633 220.492 10.7206L220.395 19.5719C220.394 19.6486 220.375 19.724 220.338 19.7916C220.302 19.8592 220.25 19.9171 220.186 19.9602C220.123 20.0034 220.05 20.0306 219.974 20.0396C219.898 20.0486 219.82 20.039 219.749 20.0117L201.207 12.9205C201.123 12.8882 201.051 12.833 200.997 12.7614C200.943 12.6898 200.911 12.6045 200.903 12.5153C200.896 12.4261 200.913 12.3366 200.954 12.2569C200.995 12.1773 201.057 12.1107 201.134 12.0647L201.393 11.9114L220.82 0.384924C220.897 0.339207 220.985 0.316151 221.075 0.318391C221.165 0.320631 221.252 0.348079 221.327 0.397593C221.402 0.447106 221.461 0.516681 221.498 0.598356C221.535 0.680032 221.549 0.770532 221.537 0.859443Z" fill="#FAFAFA"/>
+<path d="M220.658 0.110677L201.225 11.6406L200.972 11.7905C200.843 11.8667 200.739 11.9776 200.67 12.1106C200.602 12.2436 200.572 12.3932 200.585 12.5423C200.598 12.6913 200.652 12.8337 200.742 12.9532C200.832 13.0726 200.954 13.1641 201.094 13.2173L219.636 20.3086C219.756 20.3539 219.884 20.3698 220.011 20.355C220.138 20.3402 220.259 20.2952 220.365 20.2237C220.471 20.152 220.559 20.0555 220.619 19.9426C220.68 19.8297 220.712 19.7038 220.713 19.5756L220.81 10.7242C220.81 10.6604 220.823 10.5973 220.849 10.5388C220.874 10.4803 220.911 10.4277 220.958 10.3843C221.021 10.3244 221.099 10.2827 221.183 10.2637C221.268 10.2447 221.356 10.249 221.439 10.2762L223.923 11.1194C224.086 11.1781 224.264 11.1805 224.429 11.1263C224.593 11.072 224.735 10.9643 224.831 10.8203L224.835 10.815C224.935 10.6725 224.985 10.5003 224.976 10.3262C224.966 10.152 224.899 9.98603 224.784 9.85486L221.344 5.77957C221.301 5.72882 221.269 5.66977 221.25 5.60608C221.232 5.54139 221.228 5.47396 221.236 5.40754L221.85 0.902707C221.871 0.75464 221.849 0.603882 221.787 0.467707C221.726 0.331533 221.627 0.215459 221.502 0.132785C221.378 0.0501121 221.233 0.00418352 221.083 0.000272462C220.934 -0.0036386 220.786 0.0346305 220.658 0.110677ZM221.537 0.859443L220.922 5.36427C220.914 5.42245 220.912 5.48141 220.917 5.54002C220.921 5.59246 220.93 5.64434 220.945 5.69478C220.96 5.74676 220.98 5.79701 221.005 5.8447L221.007 5.8456C221.033 5.8954 221.065 5.94208 221.102 5.98476L224.542 10.06C224.611 10.1382 224.652 10.2378 224.658 10.3424C224.664 10.447 224.633 10.5504 224.572 10.6356L224.571 10.6382C224.514 10.7255 224.429 10.7908 224.33 10.8238C224.231 10.8567 224.124 10.8553 224.026 10.8198L221.54 9.97565C221.412 9.93231 221.275 9.92237 221.143 9.94678C221.01 9.9712 220.885 10.0291 220.781 10.1151L220.78 10.1164C220.766 10.1281 220.753 10.1398 220.74 10.1523C220.648 10.2379 220.578 10.3448 220.536 10.4635C220.507 10.546 220.492 10.633 220.492 10.7205L220.395 19.5719C220.394 19.6486 220.374 19.724 220.338 19.7916C220.302 19.8592 220.25 19.917 220.186 19.9602C220.123 20.0034 220.05 20.0306 219.974 20.0396C219.898 20.0486 219.82 20.039 219.749 20.0117L201.207 12.9205C201.123 12.8882 201.051 12.833 200.997 12.7614C200.943 12.6898 200.911 12.6045 200.903 12.5153C200.896 12.4261 200.913 12.3366 200.954 12.2569C200.995 12.1773 201.057 12.1107 201.134 12.0647L201.393 11.9114L220.82 0.38493C220.897 0.339213 220.985 0.316157 221.075 0.318397C221.165 0.320637 221.252 0.348086 221.327 0.397599C221.402 0.447112 221.461 0.516687 221.498 0.598363C221.535 0.680038 221.549 0.770532 221.537 0.859443Z" fill="#A3A3A3"/>
+<path d="M220.976 5.51562L221.076 5.81706L220.992 5.84598L220.991 5.84508L201.609 12.3164L220.766 10.1168L220.767 10.1155L220.819 10.1107L220.856 10.426L220.522 10.4639L201.645 12.6329C201.571 12.6421 201.497 12.6253 201.434 12.5854C201.372 12.5455 201.325 12.485 201.302 12.4143C201.28 12.3437 201.282 12.2673 201.31 12.1985C201.338 12.1297 201.389 12.0727 201.454 12.0374C201.47 12.0286 201.486 12.0213 201.504 12.0158L220.902 5.54042L220.976 5.51562Z" fill="#A3A3A3"/>
+<path d="M54.3665 161.212C54.2335 161.28 54.1223 161.384 54.0458 161.513C53.9693 161.641 53.9304 161.788 53.9338 161.938C53.9371 162.087 53.9825 162.232 54.0647 162.357C54.1469 162.482 54.2626 162.581 54.3986 162.643L58.5344 164.532C58.595 164.56 58.6496 164.6 58.6951 164.649C58.7386 164.699 58.7713 164.758 58.7912 164.822L60.3973 169.907C60.4468 170.074 60.551 170.22 60.6933 170.321C60.8356 170.422 61.0077 170.472 61.1819 170.463L61.1882 170.463C61.3614 170.458 61.5282 170.396 61.662 170.286C61.7958 170.176 61.8888 170.024 61.9264 169.855L62.5414 167.305C62.5624 167.22 62.6058 167.144 62.6672 167.082C62.7285 167.021 62.8053 166.977 62.8895 166.956C62.9512 166.94 63.0155 166.936 63.0786 166.946C63.1417 166.956 63.202 166.978 63.2559 167.013L70.7892 171.661C70.898 171.729 71.0217 171.769 71.1495 171.778C71.2774 171.787 71.4055 171.765 71.5228 171.713C71.6398 171.662 71.7428 171.584 71.8231 171.484C71.9034 171.385 71.9586 171.268 71.9842 171.143L75.8998 151.681C75.9296 151.534 75.9174 151.382 75.8646 151.242C75.8118 151.102 75.7205 150.98 75.6014 150.89C75.4822 150.799 75.3399 150.744 75.1909 150.731C75.0419 150.718 74.8922 150.747 74.759 150.815L74.4974 150.949L54.3665 161.212ZM54.5298 162.355C54.4482 162.317 54.3789 162.258 54.3297 162.183C54.2805 162.108 54.2534 162.02 54.2515 161.931C54.2497 161.841 54.2731 161.753 54.3191 161.676C54.3651 161.599 54.4319 161.536 54.5118 161.495L74.6364 151.235L74.9042 151.099C74.9841 151.058 75.0737 151.041 75.1629 151.049C75.252 151.057 75.3371 151.09 75.4085 151.144C75.4798 151.198 75.5345 151.271 75.5664 151.355C75.5982 151.439 75.606 151.53 75.5887 151.617L71.6731 171.079C71.6578 171.154 71.6246 171.225 71.5763 171.284C71.528 171.344 71.466 171.391 71.3956 171.422C71.3252 171.452 71.2485 171.465 71.172 171.46C71.0954 171.454 71.0214 171.43 70.956 171.39L63.4228 166.742C63.3488 166.695 63.2673 166.661 63.1818 166.642L75.1036 151.846C75.1508 151.788 75.1764 151.716 75.1761 151.642C75.1757 151.568 75.1495 151.496 75.1019 151.439C75.0542 151.383 74.9882 151.344 74.9153 151.331C74.8423 151.317 74.7669 151.33 74.7022 151.366C74.6863 151.375 74.6713 151.385 74.6574 151.397L58.8171 164.332C58.7701 164.297 58.7193 164.267 58.6656 164.243L54.5298 162.355Z" fill="#FAFAFA"/>
+<path d="M54.3665 161.212C54.2335 161.28 54.1223 161.384 54.0458 161.513C53.9693 161.641 53.9304 161.788 53.9338 161.938C53.9371 162.087 53.9825 162.232 54.0647 162.357C54.1469 162.482 54.2626 162.581 54.3986 162.643L58.5344 164.532C58.595 164.56 58.6496 164.6 58.6951 164.649C58.7386 164.699 58.7713 164.758 58.7912 164.822L60.3973 169.907C60.4468 170.074 60.551 170.22 60.6933 170.321C60.8356 170.422 61.0077 170.472 61.1819 170.463L61.1882 170.463C61.3614 170.458 61.5282 170.396 61.662 170.286C61.7958 170.176 61.8888 170.024 61.9264 169.855L62.5414 167.305C62.5624 167.22 62.6058 167.144 62.6672 167.082C62.7285 167.021 62.8053 166.977 62.8895 166.956C62.9512 166.94 63.0155 166.936 63.0786 166.946C63.1417 166.956 63.202 166.978 63.2559 167.013L70.7892 171.661C70.898 171.729 71.0217 171.769 71.1495 171.778C71.2774 171.787 71.4055 171.765 71.5228 171.713C71.6398 171.662 71.7428 171.584 71.8231 171.484C71.9034 171.385 71.9586 171.268 71.9842 171.143L75.8998 151.681C75.9296 151.534 75.9174 151.382 75.8646 151.242C75.8118 151.102 75.7205 150.98 75.6014 150.89C75.4822 150.799 75.3399 150.744 75.1909 150.731C75.0419 150.718 74.8922 150.747 74.759 150.815L74.4974 150.949L54.3665 161.212ZM54.5298 162.355C54.4482 162.317 54.3789 162.258 54.3297 162.183C54.2805 162.108 54.2534 162.02 54.2515 161.931C54.2497 161.841 54.2731 161.753 54.3191 161.676C54.3651 161.599 54.4319 161.536 54.5118 161.495L74.6364 151.235L74.9042 151.099C74.9841 151.058 75.0737 151.041 75.1629 151.049C75.252 151.057 75.3371 151.09 75.4085 151.144C75.4798 151.198 75.5345 151.271 75.5664 151.355C75.5982 151.439 75.606 151.53 75.5887 151.617L71.6731 171.079C71.6578 171.154 71.6246 171.225 71.5763 171.284C71.528 171.344 71.466 171.391 71.3956 171.422C71.3252 171.452 71.2485 171.465 71.172 171.46C71.0954 171.454 71.0214 171.43 70.956 171.39L63.4228 166.742C63.3488 166.695 63.2673 166.661 63.1818 166.642C63.0592 166.614 62.9316 166.616 62.8099 166.648C62.7926 166.652 62.7754 166.657 62.7581 166.663L62.7565 166.663C62.6282 166.705 62.5127 166.779 62.4211 166.878C62.3295 166.978 62.2647 167.099 62.233 167.23L61.6181 169.782C61.5958 169.884 61.5397 169.975 61.459 170.041C61.3783 170.107 61.2777 170.144 61.1735 170.145L61.1703 170.145C61.0657 170.151 60.9622 170.122 60.8768 170.061C60.7913 170 60.7291 169.912 60.7002 169.812L59.0942 164.726C59.0778 164.672 59.0553 164.621 59.0273 164.572L59.0273 164.57C59.0005 164.523 58.9689 164.479 58.9329 164.439C58.8982 164.399 58.8594 164.364 58.8171 164.332C58.7701 164.297 58.7193 164.267 58.6656 164.243L54.5298 162.355Z" fill="#A3A3A3"/>
+<path d="M58.8217 164.332L74.662 151.396C74.6759 151.385 74.691 151.375 74.7069 151.366C74.7716 151.33 74.8469 151.317 74.9199 151.33C74.9929 151.344 75.0589 151.382 75.1065 151.439C75.1541 151.496 75.1803 151.568 75.1807 151.642C75.181 151.716 75.1554 151.788 75.1082 151.845L63.1864 166.642L62.9762 166.903L62.7294 166.704L62.7611 166.663L62.7627 166.662L74.86 151.646L59.0319 164.57L59.032 164.571L58.9627 164.627L58.7617 164.381L58.8217 164.332Z" fill="#A3A3A3"/>
+</svg>
diff --git a/apps/app/public/logos/github.png b/apps/app/public/logos/github-white.png
similarity index 100%
rename from apps/app/public/logos/github.png
rename to apps/app/public/logos/github-white.png
diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
index ed6316ebd..9a0d9541c 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -10,6 +10,11 @@
     font-size: 1.375rem;
     line-height: 1.875rem;
   }
+
+  .text-2\.5xl {
+    font-size: 1.75rem;
+    line-height: 2.25rem;
+  }
 }
 
 @layer base {
diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js
index dbb4b940c..2a247c388 100644
--- a/apps/app/tailwind.config.js
+++ b/apps/app/tailwind.config.js
@@ -83,7 +83,7 @@ module.exports = {
             300: convertToRGB("--color-border-300"),
             400: convertToRGB("--color-border-400"),
             1000: "rgb(0, 0, 0)",
-            DEFAULT: convertToRGB("--color-border-100"),
+            DEFAULT: convertToRGB("--color-border-300"),
           },
           sidebar: {
             background: {
@@ -139,7 +139,7 @@ module.exports = {
               300: convertToRGB("--color-sidebar-border-300"),
               400: convertToRGB("--color-sidebar-border-400"),
               1000: "rgb(0, 0, 0)",
-              DEFAULT: convertToRGB("--color-sidebar-border-100"),
+              DEFAULT: convertToRGB("--color-sidebar-border-300"),
             },
           },
           backdrop: "#131313",