diff --git a/apps/app/components/account/email-code-form.tsx b/apps/app/components/account/email-code-form.tsx
index 5e4c49b1af6..389153d60ce 100644
--- a/apps/app/components/account/email-code-form.tsx
+++ b/apps/app/components/account/email-code-form.tsx
@@ -141,7 +141,7 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
             <button
               type="button"
               className={`mt-5 flex w-full justify-end text-xs outline-none ${
-                isResendDisabled ? "cursor-default text-gray-400" : "cursor-pointer text-theme"
+                isResendDisabled ? "cursor-default text-gray-400" : "cursor-pointer text-brand-accent"
               } `}
               onClick={() => {
                 setIsCodeResending(true);
diff --git a/apps/app/components/account/email-password-form.tsx b/apps/app/components/account/email-password-form.tsx
index 91ef2b433cf..d35abdfe8f8 100644
--- a/apps/app/components/account/email-password-form.tsx
+++ b/apps/app/components/account/email-password-form.tsx
@@ -94,7 +94,7 @@ export const EmailPasswordForm = ({ onSuccess }: any) => {
         <div className="mt-2 flex items-center justify-between">
           <div className="ml-auto text-sm">
             <Link href={"/forgot-password"}>
-              <a className="font-medium text-theme hover:text-indigo-500">Forgot your password?</a>
+              <a className="font-medium text-brand-accent hover:text-indigo-500">Forgot your password?</a>
             </Link>
           </div>
         </div>
diff --git a/apps/app/components/account/github-login-button.tsx b/apps/app/components/account/github-login-button.tsx
index 92e9cdccd9a..5b49208bbce 100644
--- a/apps/app/components/account/github-login-button.tsx
+++ b/apps/app/components/account/github-login-button.tsx
@@ -37,7 +37,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
       <Link
         href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
       >
-        <button className="flex w-full items-center justify-center gap-3 rounded-md border border-gray-200 p-2 text-sm font-medium text-gray-600 duration-300 hover:bg-gray-50">
+        <button className="flex w-full items-center justify-center gap-3 rounded-md border border-brand-base p-2 text-sm font-medium text-gray-600 duration-300 hover:bg-gray-50">
           <Image src={githubImage} height={22} width={22} color="#000" alt="GitHub Logo" />
           <span>Sign In with Github</span>
         </button>
diff --git a/apps/app/components/auth-screens/not-authorized-view.tsx b/apps/app/components/auth-screens/not-authorized-view.tsx
index 37c07e8def9..054e5bfa353 100644
--- a/apps/app/components/auth-screens/not-authorized-view.tsx
+++ b/apps/app/components/auth-screens/not-authorized-view.tsx
@@ -36,16 +36,16 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
             alt="ProjectSettingImg"
           />
         </div>
-        <h1 className="text-xl font-medium text-gray-900">
+        <h1 className="text-xl font-medium text-brand-base">
           Oops! You are not authorized to view this page
         </h1>
 
-        <div className="w-full text-base text-gray-500 max-w-md ">
+        <div className="w-full text-base text-brand-secondary max-w-md ">
           {user ? (
             <p>
               You have signed in as {user.email}. <br />
               <Link href={`/signin?next=${currentPath}`}>
-                <a className="text-gray-900 font-medium">Sign in</a>
+                <a className="text-brand-base font-medium">Sign in</a>
               </Link>{" "}
               with different account that has access to this page.
             </p>
@@ -53,7 +53,7 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
             <p>
               You need to{" "}
               <Link href={`/signin?next=${currentPath}`}>
-                <a className="text-gray-900 font-medium">Sign in</a>
+                <a className="text-brand-base font-medium">Sign in</a>
               </Link>{" "}
               with an account that has access to this page.
             </p>
diff --git a/apps/app/components/breadcrumbs/index.tsx b/apps/app/components/breadcrumbs/index.tsx
index 0a2d36e1f31..98944fe37ec 100644
--- a/apps/app/components/breadcrumbs/index.tsx
+++ b/apps/app/components/breadcrumbs/index.tsx
@@ -16,7 +16,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
       <div className="flex items-center">
         <button
           type="button"
-          className="grid h-8 w-8 flex-shrink-0 cursor-pointer place-items-center rounded border border-gray-300 text-center text-sm hover:bg-gray-100"
+          className="grid h-8 w-8 flex-shrink-0 cursor-pointer place-items-center rounded border border-brand-base text-center text-sm hover:bg-brand-surface-1"
           onClick={() => router.back()}
         >
           <ArrowLeftIcon className="h-3 w-3" />
@@ -37,7 +37,7 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) =>
   <>
     {link ? (
       <Link href={link}>
-        <a className="border-r-2 border-gray-300 px-3 text-sm">
+        <a className="border-r-2 border-brand-base px-3 text-sm">
           <p className={`${icon ? "flex items-center gap-2" : ""}`}>
             {icon ?? null}
             {title}
diff --git a/apps/app/components/command-palette/change-interface-theme.tsx b/apps/app/components/command-palette/change-interface-theme.tsx
new file mode 100644
index 00000000000..f4bcd7483cb
--- /dev/null
+++ b/apps/app/components/command-palette/change-interface-theme.tsx
@@ -0,0 +1,45 @@
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+
+// cmdk
+import { Command } from "cmdk";
+import { THEMES_OBJ } from "constants/themes";
+import { useTheme } from "next-themes";
+import { SettingIcon } from "components/icons";
+
+type Props = {
+  setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
+};
+
+export const ChangeInterfaceTheme: React.FC<Props> = ({ setIsPaletteOpen }) => {
+  const [mounted, setMounted] = useState(false);
+  const { setTheme } = useTheme();
+
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <>
+      {THEMES_OBJ.map((theme) => (
+        <Command.Item
+          key={theme.value}
+          onSelect={() => {
+            setTheme(theme.value);
+            setIsPaletteOpen(false);
+          }}
+          className="focus:outline-none"
+        >
+          <div className="flex items-center gap-2 text-brand-secondary">
+            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+            {theme.label}
+          </div>
+        </Command.Item>
+      ))}
+    </>
+  );
+};
diff --git a/apps/app/components/command-palette/command-pallette.tsx b/apps/app/components/command-palette/command-pallette.tsx
index 53e9cd5a7d1..3feca33f6e2 100644
--- a/apps/app/components/command-palette/command-pallette.tsx
+++ b/apps/app/components/command-palette/command-pallette.tsx
@@ -44,6 +44,7 @@ import {
   ChangeIssueState,
   ChangeIssuePriority,
   ChangeIssueAssignee,
+  ChangeInterfaceTheme,
 } from "components/command-palette";
 import { BulkDeleteIssuesModal } from "components/core";
 import { CreateUpdateCycleModal } from "components/cycles";
@@ -379,7 +380,7 @@ export const CommandPalette: React.FC = () => {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
+            <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20">
@@ -392,7 +393,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-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-brand-base divide-opacity-10 rounded-xl bg-brand-surface-2 border-brand-base border shadow-2xl transition-all">
                 <Command
                   filter={(value, search) => {
                     if (value.toLowerCase().includes(search.toLowerCase())) return 1;
@@ -415,7 +416,7 @@ export const CommandPalette: React.FC = () => {
                 >
                   {issueId && issueDetails && (
                     <div className="flex p-3">
-                      <p className="overflow-hidden truncate rounded-md bg-gray-100 p-1 px-2 text-xs font-medium text-gray-500">
+                      <p className="overflow-hidden truncate rounded-md bg-brand-surface-1 p-1 px-2 text-xs font-medium text-brand-secondary">
                         {issueDetails.project_detail?.identifier}-{issueDetails.sequence_id}{" "}
                         {issueDetails?.name}
                       </p>
@@ -423,11 +424,11 @@ export const CommandPalette: React.FC = () => {
                   )}
                   <div className="relative">
                     <MagnifyingGlassIcon
-                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
+                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-secondary"
                       aria-hidden="true"
                     />
                     <Command.Input
-                      className="w-full border-0 border-b bg-transparent p-4 pl-11 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                      className="w-full border-0 border-b border-brand-base bg-transparent p-4 pl-11 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
                       placeholder={placeholder}
                       value={searchTerm}
                       onValueChange={(e) => {
@@ -441,7 +442,9 @@ export const CommandPalette: React.FC = () => {
                       resultsCount === 0 &&
                       searchTerm !== "" &&
                       debouncedSearchTerm !== "" && (
-                        <div className="my-4 text-center text-gray-500">No results found.</div>
+                        <div className="my-4 text-center text-brand-secondary">
+                          No results found.
+                        </div>
                       )}
 
                     {(isLoading || isSearching) && (
@@ -502,8 +505,11 @@ export const CommandPalette: React.FC = () => {
                                       value={value}
                                       className="focus:outline-none"
                                     >
-                                      <div className="flex items-center gap-2 overflow-hidden text-gray-700">
-                                        <Icon className="h-4 w-4 text-gray-500" color="#6b7280" />
+                                      <div className="flex items-center gap-2 overflow-hidden text-brand-secondary">
+                                        <Icon
+                                          className="h-4 w-4 text-brand-secondary"
+                                          color="#6b7280"
+                                        />
                                         <p className="block flex-1 truncate">{item.name}</p>
                                       </div>
                                     </Command.Item>
@@ -528,8 +534,8 @@ export const CommandPalette: React.FC = () => {
                               }}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-gray-700">
-                                <Squares2X2Icon className="h-4 w-4 text-gray-500" />
+                              <div className="flex items-center gap-2 text-brand-secondary">
+                                <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
                                 Change state...
                               </div>
                             </Command.Item>
@@ -541,8 +547,8 @@ export const CommandPalette: React.FC = () => {
                               }}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-gray-700">
-                                <ChartBarIcon className="h-4 w-4 text-gray-500" />
+                              <div className="flex items-center gap-2 text-brand-secondary">
+                                <ChartBarIcon className="h-4 w-4 text-brand-secondary" />
                                 Change priority...
                               </div>
                             </Command.Item>
@@ -554,8 +560,8 @@ export const CommandPalette: React.FC = () => {
                               }}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-gray-700">
-                                <UsersIcon className="h-4 w-4 text-gray-500" />
+                              <div className="flex items-center gap-2 text-brand-secondary">
+                                <UsersIcon className="h-4 w-4 text-brand-secondary" />
                                 Assign to...
                               </div>
                             </Command.Item>
@@ -566,15 +572,15 @@ export const CommandPalette: React.FC = () => {
                               }}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-gray-700">
+                              <div className="flex items-center gap-2 text-brand-secondary">
                                 {issueDetails?.assignees.includes(user.id) ? (
                                   <>
-                                    <UserMinusIcon className="h-4 w-4 text-gray-500" />
+                                    <UserMinusIcon className="h-4 w-4 text-brand-secondary" />
                                     Un-assign from me
                                   </>
                                 ) : (
                                   <>
-                                    <UserPlusIcon className="h-4 w-4 text-gray-500" />
+                                    <UserPlusIcon className="h-4 w-4 text-brand-secondary" />
                                     Assign to me
                                   </>
                                 )}
@@ -582,8 +588,8 @@ export const CommandPalette: React.FC = () => {
                             </Command.Item>
 
                             <Command.Item onSelect={deleteIssue} className="focus:outline-none">
-                              <div className="flex items-center gap-2 text-gray-700">
-                                <TrashIcon className="h-4 w-4 text-gray-500" />
+                              <div className="flex items-center gap-2 text-brand-secondary">
+                                <TrashIcon className="h-4 w-4 text-brand-secondary" />
                                 Delete issue
                               </div>
                             </Command.Item>
@@ -594,16 +600,19 @@ export const CommandPalette: React.FC = () => {
                               }}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-gray-700">
-                                <LinkIcon className="h-4 w-4 text-gray-500" />
+                              <div className="flex items-center gap-2 text-brand-secondary">
+                                <LinkIcon className="h-4 w-4 text-brand-secondary" />
                                 Copy issue URL to clipboard
                               </div>
                             </Command.Item>
                           </>
                         )}
                         <Command.Group heading="Issue">
-                          <Command.Item onSelect={createNewIssue} className="focus:bg-gray-200">
-                            <div className="flex items-center gap-2 text-gray-700">
+                          <Command.Item
+                            onSelect={createNewIssue}
+                            className="focus:bg-brand-surface-2"
+                          >
+                            <div className="flex items-center gap-2 text-brand-secondary">
                               <LayerDiagonalIcon className="h-4 w-4" color="#6b7280" />
                               Create new issue
                             </div>
@@ -617,7 +626,7 @@ export const CommandPalette: React.FC = () => {
                               onSelect={createNewProject}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-gray-700">
+                              <div className="flex items-center gap-2 text-brand-secondary">
                                 <AssignmentClipboardIcon className="h-4 w-4" color="#6b7280" />
                                 Create new project
                               </div>
@@ -633,7 +642,7 @@ export const CommandPalette: React.FC = () => {
                                 onSelect={createNewCycle}
                                 className="focus:outline-none"
                               >
-                                <div className="flex items-center gap-2 text-gray-700">
+                                <div className="flex items-center gap-2 text-brand-secondary">
                                   <ContrastIcon className="h-4 w-4" color="#6b7280" />
                                   Create new cycle
                                 </div>
@@ -646,7 +655,7 @@ export const CommandPalette: React.FC = () => {
                                 onSelect={createNewModule}
                                 className="focus:outline-none"
                               >
-                                <div className="flex items-center gap-2 text-gray-700">
+                                <div className="flex items-center gap-2 text-brand-secondary">
                                   <PeopleGroupIcon className="h-4 w-4" color="#6b7280" />
                                   Create new module
                                 </div>
@@ -656,7 +665,7 @@ export const CommandPalette: React.FC = () => {
 
                             <Command.Group heading="View">
                               <Command.Item onSelect={createNewView} className="focus:outline-none">
-                                <div className="flex items-center gap-2 text-gray-700">
+                                <div className="flex items-center gap-2 text-brand-secondary">
                                   <ViewListIcon className="h-4 w-4" color="#6b7280" />
                                   Create new view
                                 </div>
@@ -685,7 +694,7 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-gray-700">
+                            <div className="flex items-center gap-2 text-brand-secondary">
                               <SettingIcon className="h-4 w-4" color="#6b7280" />
                               Search settings...
                             </div>
@@ -696,11 +705,24 @@ export const CommandPalette: React.FC = () => {
                             onSelect={createNewWorkspace}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-gray-700">
-                              <FolderPlusIcon className="h-4 w-4 text-gray-500" />
+                            <div className="flex items-center gap-2 text-brand-secondary">
+                              <FolderPlusIcon className="h-4 w-4 text-brand-secondary" />
                               Create new workspace
                             </div>
                           </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              setPlaceholder("Change interface theme...");
+                              setSearchTerm("");
+                              setPages([...pages, "change-interface-theme"]);
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-brand-secondary">
+                              <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                              Change interface theme...
+                            </div>
+                          </Command.Item>
                         </Command.Group>
                         <Command.Group heading="Help">
                           <Command.Item
@@ -713,8 +735,8 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-gray-700">
-                              <RocketLaunchIcon className="h-4 w-4 text-gray-500" />
+                            <div className="flex items-center gap-2 text-brand-secondary">
+                              <RocketLaunchIcon className="h-4 w-4 text-brand-secondary" />
                               Open keyboard shortcuts
                             </div>
                           </Command.Item>
@@ -725,8 +747,8 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-gray-700">
-                              <DocumentIcon className="h-4 w-4 text-gray-500" />
+                            <div className="flex items-center gap-2 text-brand-secondary">
+                              <DocumentIcon className="h-4 w-4 text-brand-secondary" />
                               Open Plane documentation
                             </div>
                           </Command.Item>
@@ -737,7 +759,7 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-gray-700">
+                            <div className="flex items-center gap-2 text-brand-secondary">
                               <DiscordIcon className="h-4 w-4" color="#6b7280" />
                               Join our Discord
                             </div>
@@ -752,7 +774,7 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-gray-700">
+                            <div className="flex items-center gap-2 text-brand-secondary">
                               <GithubIcon className="h-4 w-4" color="#6b7280" />
                               Report a bug
                             </div>
@@ -764,8 +786,8 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-gray-700">
-                              <ChatBubbleOvalLeftEllipsisIcon className="h-4 w-4 text-gray-500" />
+                            <div className="flex items-center gap-2 text-brand-secondary">
+                              <ChatBubbleOvalLeftEllipsisIcon className="h-4 w-4 text-brand-secondary" />
                               Chat with us
                             </div>
                           </Command.Item>
@@ -779,8 +801,8 @@ export const CommandPalette: React.FC = () => {
                           onSelect={() => goToSettings()}
                           className="focus:outline-none"
                         >
-                          <div className="flex items-center gap-2 text-gray-700">
-                            <SettingIcon className="h-4 w-4 text-gray-500" />
+                          <div className="flex items-center gap-2 text-brand-secondary">
+                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
                             General
                           </div>
                         </Command.Item>
@@ -788,8 +810,8 @@ export const CommandPalette: React.FC = () => {
                           onSelect={() => goToSettings("members")}
                           className="focus:outline-none"
                         >
-                          <div className="flex items-center gap-2 text-gray-700">
-                            <SettingIcon className="h-4 w-4 text-gray-500" />
+                          <div className="flex items-center gap-2 text-brand-secondary">
+                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
                             Members
                           </div>
                         </Command.Item>
@@ -797,8 +819,8 @@ export const CommandPalette: React.FC = () => {
                           onSelect={() => goToSettings("billing")}
                           className="focus:outline-none"
                         >
-                          <div className="flex items-center gap-2 text-gray-700">
-                            <SettingIcon className="h-4 w-4 text-gray-500" />
+                          <div className="flex items-center gap-2 text-brand-secondary">
+                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
                             Billings and Plans
                           </div>
                         </Command.Item>
@@ -806,8 +828,8 @@ export const CommandPalette: React.FC = () => {
                           onSelect={() => goToSettings("integrations")}
                           className="focus:outline-none"
                         >
-                          <div className="flex items-center gap-2 text-gray-700">
-                            <SettingIcon className="h-4 w-4 text-gray-500" />
+                          <div className="flex items-center gap-2 text-brand-secondary">
+                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
                             Integrations
                           </div>
                         </Command.Item>
@@ -815,8 +837,8 @@ export const CommandPalette: React.FC = () => {
                           onSelect={() => goToSettings("import-export")}
                           className="focus:outline-none"
                         >
-                          <div className="flex items-center gap-2 text-gray-700">
-                            <SettingIcon className="h-4 w-4 text-gray-500" />
+                          <div className="flex items-center gap-2 text-brand-secondary">
+                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
                             Import/Export
                           </div>
                         </Command.Item>
@@ -842,6 +864,9 @@ export const CommandPalette: React.FC = () => {
                         setIsPaletteOpen={setIsPaletteOpen}
                       />
                     )}
+                    {page === "change-interface-theme" && (
+                      <ChangeInterfaceTheme setIsPaletteOpen={setIsPaletteOpen} />
+                    )}
                   </Command.List>
                 </Command>
               </Dialog.Panel>
diff --git a/apps/app/components/command-palette/index.ts b/apps/app/components/command-palette/index.ts
index c1d79a2c4a9..858aba401b2 100644
--- a/apps/app/components/command-palette/index.ts
+++ b/apps/app/components/command-palette/index.ts
@@ -3,3 +3,4 @@ export * from "./shortcuts-modal";
 export * from "./change-issue-state";
 export * from "./change-issue-priority";
 export * from "./change-issue-assignee";
+export * from "./change-interface-theme";
diff --git a/apps/app/components/command-palette/shortcuts-modal.tsx b/apps/app/components/command-palette/shortcuts-modal.tsx
index 9c5309138d0..af7f19b0acb 100644
--- a/apps/app/components/command-palette/shortcuts-modal.tsx
+++ b/apps/app/components/command-palette/shortcuts-modal.tsx
@@ -71,7 +71,7 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -85,29 +85,29 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
-                <div className="bg-white p-5">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="bg-brand-surface-2 p-5">
                   <div className="sm:flex sm:items-start">
                     <div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="flex justify-between text-lg font-medium leading-6 text-gray-900"
+                        className="flex justify-between text-lg font-medium leading-6 text-brand-base"
                       >
                         <span>Keyboard Shortcuts</span>
                         <span>
                           <button type="button" onClick={() => setIsOpen(false)}>
                             <XMarkIcon
-                              className="h-6 w-6 text-gray-400 hover:text-gray-500"
+                              className="h-6 w-6 text-gray-400 hover:text-brand-secondary"
                               aria-hidden="true"
                             />
                           </button>
                         </span>
                       </Dialog.Title>
                       <div>
-                        <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-gray-200 bg-gray-100 px-3 py-2">
-                          <MagnifyingGlassIcon className="h-3.5 w-3.5 text-gray-500" />
+                        <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-brand-base bg-brand-surface-1 px-3 py-2">
+                          <MagnifyingGlassIcon className="h-3.5 w-3.5 text-brand-secondary" />
                           <Input
-                            className="w-full  border-none bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
+                            className="w-full  border-none bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
                             id="search"
                             name="search"
                             type="text"
@@ -123,16 +123,16 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                               <div key={shortcut.keys} className="flex w-full flex-col">
                                 <div className="flex flex-col gap-y-3">
                                   <div className="flex items-center justify-between">
-                                    <p className="text-sm text-gray-500">{shortcut.description}</p>
+                                    <p className="text-sm text-brand-secondary">{shortcut.description}</p>
                                     <div className="flex items-center gap-x-2.5">
                                       {shortcut.keys.split(",").map((key, index) => (
                                         <span key={index} className="flex items-center gap-1">
                                           {key === "Ctrl" ? (
-                                            <span className="flex h-full items-center rounded-sm border border-gray-200 bg-gray-100 p-2">
+                                            <span className="flex h-full items-center rounded-sm border border-brand-base bg-brand-surface-1 p-2">
                                               <MacCommandIcon />
                                             </span>
                                           ) : (
-                                            <kbd className="rounded-sm border border-gray-200 bg-gray-100 px-2 py-1 text-sm font-medium text-gray-800">
+                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-gray-800">
                                               {key === "Ctrl" ? <MacCommandIcon /> : key}
                                             </kbd>
                                           )}
@@ -145,7 +145,7 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                             ))
                           ) : (
                             <div className="flex flex-col gap-y-3">
-                              <p className="text-sm text-gray-500">
+                              <p className="text-sm text-brand-secondary">
                                 No shortcuts found for{" "}
                                 <span className="font-semibold italic">
                                   {`"`}
@@ -162,16 +162,16 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                               <div className="flex flex-col gap-y-3">
                                 {shortcuts.map(({ keys, description }, index) => (
                                   <div key={index} className="flex items-center justify-between">
-                                    <p className="text-sm text-gray-500">{description}</p>
+                                    <p className="text-sm text-brand-secondary">{description}</p>
                                     <div className="flex items-center gap-x-2.5">
                                       {keys.split(",").map((key, index) => (
                                         <span key={index} className="flex items-center gap-1">
                                           {key === "Ctrl" ? (
-                                            <span className="flex h-full items-center rounded-sm border border-gray-200 bg-gray-100 p-2">
+                                            <span className="flex h-full items-center rounded-sm border border-brand-base text-brand-secondary bg-brand-surface-1 p-2">
                                               <MacCommandIcon />
                                             </span>
                                           ) : (
-                                            <kbd className="rounded-sm border border-gray-200 bg-gray-100 px-2 py-1 text-sm font-medium text-gray-800">
+                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-brand-secondary">
                                               {key === "Ctrl" ? <MacCommandIcon /> : key}
                                             </kbd>
                                           )}
diff --git a/apps/app/components/core/board-view/all-boards.tsx b/apps/app/components/core/board-view/all-boards.tsx
index f476b76a5ce..19d0e7636f2 100644
--- a/apps/app/components/core/board-view/all-boards.tsx
+++ b/apps/app/components/core/board-view/all-boards.tsx
@@ -81,7 +81,7 @@ export const AllBoards: React.FC<Props> = ({
                     return (
                       <div
                         key={index}
-                        className="flex items-center justify-between gap-2 rounded bg-white p-2 shadow"
+                        className="flex items-center justify-between gap-2 rounded bg-brand-surface-1 p-2 shadow"
                       >
                         <div className="flex items-center gap-2">
                           {currentState &&
@@ -92,7 +92,7 @@ export const AllBoards: React.FC<Props> = ({
                               : addSpaceIfCamelCase(singleGroup)}
                           </h4>
                         </div>
-                        <span className="text-xs text-gray-500">0</span>
+                        <span className="text-xs text-brand-secondary">0</span>
                       </div>
                     );
                 })}
diff --git a/apps/app/components/core/board-view/board-header.tsx b/apps/app/components/core/board-view/board-header.tsx
index f209ba6e235..93443d99c81 100644
--- a/apps/app/components/core/board-view/board-header.tsx
+++ b/apps/app/components/core/board-view/board-header.tsx
@@ -124,7 +124,7 @@ export const BoardHeader: React.FC<Props> = ({
   return (
     <div
       className={`flex justify-between items-center px-1 ${
-        !isCollapsed ? "flex-col rounded-md border bg-gray-50" : ""
+        !isCollapsed ? "flex-col rounded-md border bg-brand-surface-2 border-brand-base" : ""
       }`}
     >
       <div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
@@ -145,7 +145,7 @@ export const BoardHeader: React.FC<Props> = ({
           <span
             className={`${
               isCollapsed ? "ml-0.5" : ""
-            } rounded-full bg-gray-100 py-1 min-w-[2.5rem] text-xs text-center`}
+            } rounded-full bg-brand-surface-2 py-1 min-w-[2.5rem] text-xs text-center`}
           >
             {groupedByIssues?.[groupTitle].length ?? 0}
           </span>
@@ -155,7 +155,7 @@ export const BoardHeader: React.FC<Props> = ({
       <div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}>
         <button
           type="button"
-          className="grid h-7 w-7 place-items-center rounded p-1 text-gray-700 outline-none duration-300 hover:bg-gray-100"
+          className="grid h-7 w-7 place-items-center rounded p-1 text-brand-secondary outline-none duration-300 hover:bg-brand-surface-2"
           onClick={() => {
             setIsCollapsed((prevData) => !prevData);
           }}
@@ -169,7 +169,7 @@ export const BoardHeader: React.FC<Props> = ({
         {!isCompleted && (
           <button
             type="button"
-            className="grid h-7 w-7 place-items-center rounded p-1 text-gray-700 outline-none duration-300 hover:bg-gray-100"
+            className="grid h-7 w-7 place-items-center rounded p-1 text-brand-secondary outline-none duration-300 hover:bg-brand-surface-2"
             onClick={addIssueToState}
           >
             <PlusIcon className="h-4 w-4" />
diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index 99ec0029f92..f9c3f30fe80 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -66,7 +66,7 @@ export const SingleBoard: React.FC<Props> = ({
   }, [currentState]);
 
   return (
-    <div className={`h-full flex-shrink-0 ${!isCollapsed ? "" : "w-96 bg-gray-50"}`}>
+    <div className={`h-full flex-shrink-0 ${!isCollapsed ? "" : "w-96 bg-brand-base"}`}>
       <div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3"}`}>
         <BoardHeader
           addIssueToState={addIssueToState}
@@ -81,7 +81,7 @@ export const SingleBoard: React.FC<Props> = ({
             {(provided, snapshot) => (
               <div
                 className={`relative h-full overflow-y-auto p-1  ${
-                  snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
+                  snapshot.isDraggingOver ? "bg-brand-accent bg-opacity-50" : ""
                 } ${!isCollapsed ? "hidden" : "block"}`}
                 ref={provided.innerRef}
                 {...provided.droppableProps}
@@ -91,12 +91,12 @@ export const SingleBoard: React.FC<Props> = ({
                     <div
                       className={`absolute ${
                         snapshot.isDraggingOver ? "block" : "hidden"
-                      } pointer-events-none top-0 left-0 z-[99] h-full w-full bg-gray-100 opacity-50`}
+                      } pointer-events-none top-0 left-0 z-[99] h-full w-full bg-brand-surface-1 opacity-50`}
                     />
                     <div
                       className={`absolute ${
                         snapshot.isDraggingOver ? "block" : "hidden"
-                      } pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-white p-2 text-xs`}
+                      } pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-brand-surface-2 p-2 text-xs`}
                     >
                       This board is ordered by{" "}
                       {replaceUnderscoreIfSnakeCase(orderBy ?? "created_at")}
@@ -146,7 +146,7 @@ export const SingleBoard: React.FC<Props> = ({
                 {type === "issue" ? (
                   <button
                     type="button"
-                    className="flex items-center gap-2 font-medium text-theme outline-none"
+                    className="flex items-center gap-2 font-medium text-brand-accent outline-none"
                     onClick={addIssueToState}
                   >
                     <PlusIcon className="h-4 w-4" />
@@ -158,7 +158,7 @@ export const SingleBoard: React.FC<Props> = ({
                       customButton={
                         <button
                           type="button"
-                          className="flex items-center gap-2 font-medium text-theme outline-none"
+                          className="flex items-center gap-2 font-medium text-brand-accent outline-none"
                         >
                           <PlusIcon className="h-4 w-4" />
                           Add Issue
diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index 8c18678b608..76ae934d7bf 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -261,8 +261,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
         </a>
       </ContextMenu>
       <div
-        className={`mb-3 rounded bg-white shadow ${
-          snapshot.isDragging ? "border-2 border-theme shadow-lg" : ""
+        className={`mb-3 rounded bg-brand-surface-1 shadow ${
+          snapshot.isDragging ? "border-2 border-brand-accent shadow-lg" : ""
         }`}
         ref={provided.innerRef}
         {...provided.draggableProps}
@@ -312,12 +312,12 @@ export const SingleBoardIssue: React.FC<Props> = ({
           <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
             <a>
               {properties.key && (
-                <div className="mb-2.5 text-xs font-medium text-gray-700">
+                <div className="mb-2.5 text-xs font-medium text-brand-secondary">
                   {issue.project_detail.identifier}-{issue.sequence_id}
                 </div>
               )}
               <h5
-                className="break-all text-sm group-hover:text-theme"
+                className="break-all text-sm group-hover:text-brand-accent"
                 style={{ lineClamp: 3, WebkitLineClamp: 3 }}
               >
                 {truncateText(issue.name, 100)}
@@ -349,7 +349,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
               />
             )}
             {properties.sub_issue_count && (
-              <div className="flex flex-shrink-0 items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
+              <div className="flex flex-shrink-0 items-center gap-1 rounded-md border border-brand-base px-3 py-1.5 text-xs shadow-sm">
                 {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
               </div>
             )}
diff --git a/apps/app/components/core/bulk-delete-issues-modal.tsx b/apps/app/components/core/bulk-delete-issues-modal.tsx
index 0074ae9b3f8..bd5e18e5784 100644
--- a/apps/app/components/core/bulk-delete-issues-modal.tsx
+++ b/apps/app/components/core/bulk-delete-issues-modal.tsx
@@ -121,7 +121,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+            <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
               <form>
                 <Combobox
                   onChange={(val: string) => {
@@ -136,12 +136,12 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
                 >
                   <div className="relative m-1">
                     <MagnifyingGlassIcon
-                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
+                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
                       aria-hidden="true"
                     />
                     <input
                       type="text"
-                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
                       placeholder="Search..."
                       onChange={(event) => setQuery(event.target.value)}
                     />
@@ -154,7 +154,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
                     {filteredIssues.length > 0 ? (
                       <li className="p-2">
                         {query === "" && (
-                          <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
+                          <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
                             Select issues to delete
                           </h2>
                         )}
@@ -166,7 +166,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
                               value={issue.id}
                               className={({ active }) =>
                                 `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
-                                  active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
+                                  active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
                                 }`
                               }
                             >
@@ -182,7 +182,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
                                     backgroundColor: issue.state_detail.color,
                                   }}
                                 />
-                                <span className="flex-shrink-0 text-xs text-gray-500">
+                                <span className="flex-shrink-0 text-xs text-brand-secondary">
                                   {issue.project_detail.identifier}-{issue.sequence_id}
                                 </span>
                                 <span>{issue.name}</span>
@@ -194,9 +194,9 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
                     ) : (
                       <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
                         <LayerDiagonalIcon height="56" width="56" />
-                        <h3 className="text-gray-500">
+                        <h3 className="text-brand-secondary">
                           No issues found. Create a new issue with{" "}
-                          <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
+                          <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
                         </h3>
                       </div>
                     )}
diff --git a/apps/app/components/core/calendar-view/calendar.tsx b/apps/app/components/core/calendar-view/calendar.tsx
index 1c9febe0bec..7dd84a0f890 100644
--- a/apps/app/components/core/calendar-view/calendar.tsx
+++ b/apps/app/components/core/calendar-view/calendar.tsx
@@ -208,7 +208,7 @@ export const CalendarView = () => {
                 <>
                   <Popover.Button className={`group flex h-full items-start gap-1 text-gray-800`}>
                     <div className="flex  items-center   justify-center gap-2 text-2xl font-semibold">
-                      <span className="text-black">{formatDate(currentDate, "Month")}</span>{" "}
+                      <span className="text-brand-base">{formatDate(currentDate, "Month")}</span>{" "}
                       <span>{formatDate(currentDate, "yyyy")}</span>
                     </div>
                   </Popover.Button>
@@ -222,7 +222,7 @@ export const CalendarView = () => {
                     leaveFrom="opacity-100 translate-y-0"
                     leaveTo="opacity-0 translate-y-1"
                   >
-                    <Popover.Panel className="absolute top-10 left-0 z-20 w-full max-w-xs flex flex-col transform overflow-hidden bg-white shadow-lg rounded-[10px]">
+                    <Popover.Panel className="absolute top-10 left-0 z-20 w-full max-w-xs flex flex-col transform overflow-hidden bg-brand-surface-2 shadow-lg rounded-[10px]">
                       <div className="flex justify-center items-center text-sm gap-5 px-2 py-2">
                         {yearOptions.map((year) => (
                           <button
@@ -237,7 +237,7 @@ export const CalendarView = () => {
                           </button>
                         ))}
                       </div>
-                      <div className="grid grid-cols-4  px-2 border-t border-gray-200">
+                      <div className="grid grid-cols-4  px-2 border-t border-brand-base">
                         {monthOptions.map((month) => (
                           <button
                             onClick={() =>
@@ -297,7 +297,7 @@ export const CalendarView = () => {
 
           <div className="flex w-full gap-2 items-center justify-end">
             <button
-              className="group flex cursor-pointer items-center gap-2 rounded-md border bg-white px-4 py-1.5 text-sm  hover:bg-gray-100 hover:text-gray-900 focus:outline-none"
+              className="group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base bg-brand-surface-2 px-4 py-1.5 text-sm  hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none"
               onClick={() => {
                 if (isMonthlyView) {
                   updateDate(new Date());
@@ -315,7 +315,7 @@ export const CalendarView = () => {
             <CustomMenu
               customButton={
                 <div
-                  className={`group flex cursor-pointer items-center gap-2 rounded-md border bg-white px-3 py-1.5 text-sm  hover:bg-gray-100 hover:text-gray-900 focus:outline-none `}
+                  className={`group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base bg-brand-surface-2 px-3 py-1.5 text-sm  hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none `}
                 >
                   {isMonthlyView ? "Monthly" : "Weekly"}
                   <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
@@ -360,12 +360,12 @@ export const CalendarView = () => {
                   />
                 </div>
               </CustomMenu.MenuItem>
-              <div className="mt-1 flex w-52 items-center justify-between border-t border-gray-200 py-2 px-1  text-sm text-gray-600">
+              <div className="mt-1 flex w-52 items-center justify-between border-t border-brand-base py-2 px-1  text-sm text-gray-600">
                 <h4>Show weekends</h4>
                 <button
                   type="button"
                   className={`relative inline-flex h-3.5 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
-                    showWeekEnds ? "bg-green-500" : "bg-gray-200"
+                    showWeekEnds ? "bg-green-500" : "bg-brand-surface-2"
                   }`}
                   role="switch"
                   aria-checked={showWeekEnds}
@@ -374,7 +374,7 @@ export const CalendarView = () => {
                   <span className="sr-only">Show weekends</span>
                   <span
                     aria-hidden="true"
-                    className={`inline-block h-2.5 w-2.5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                    className={`inline-block h-2.5 w-2.5 transform rounded-full bg-brand-surface-2 shadow ring-0 transition duration-200 ease-in-out ${
                       showWeekEnds ? "translate-x-2.5" : "translate-x-0"
                     }`}
                   />
@@ -392,7 +392,7 @@ export const CalendarView = () => {
           {weeks.map((date, index) => (
             <div
               key={index}
-              className={`flex  items-center justify-start p-1.5 gap-2 border-gray-300 bg-gray-100 text-base font-medium text-gray-600 ${
+              className={`flex  items-center justify-start p-1.5 gap-2 border-brand-base bg-brand-surface-1 text-base font-medium text-gray-600 ${
                 !isMonthlyView
                   ? showWeekEnds
                     ? (index + 1) % 7 === 0
@@ -424,7 +424,7 @@ export const CalendarView = () => {
                   key={index}
                   ref={provided.innerRef}
                   {...provided.droppableProps}
-                  className={`flex flex-col gap-1.5 border-t border-gray-300 p-2.5 text-left text-sm font-medium hover:bg-gray-100 ${
+                  className={`flex flex-col gap-1.5 border-t border-brand-base p-2.5 text-left text-sm font-medium hover:bg-brand-surface-1 ${
                     showWeekEnds
                       ? (index + 1) % 7 === 0
                         ? ""
@@ -444,7 +444,7 @@ export const CalendarView = () => {
                             ref={provided.innerRef}
                             {...provided.draggableProps}
                             {...provided.dragHandleProps}
-                            className={`w-full cursor-pointer truncate rounded bg-white p-1.5 hover:scale-105 ${
+                            className={`w-full cursor-pointer truncate rounded bg-brand-surface-2 p-1.5 hover:scale-105 ${
                               snapshot.isDragging ? "shadow-lg" : ""
                             }`}
                           >
diff --git a/apps/app/components/core/custom-theme-form.tsx b/apps/app/components/core/custom-theme-form.tsx
new file mode 100644
index 00000000000..ed10094681d
--- /dev/null
+++ b/apps/app/components/core/custom-theme-form.tsx
@@ -0,0 +1,267 @@
+import { useEffect, useState } from "react";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// ui
+import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+
+const defaultValues = {
+  palette: "",
+};
+
+export const ThemeForm: React.FC<any> = ({ handleFormSubmit, handleClose, status, data }) => {
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<any>({
+    defaultValues,
+  });
+  const [darkPalette, setDarkPalette] = useState(false);
+
+  const handleUpdateTheme = async (formData: any) => {
+    await handleFormSubmit({ ...formData, darkPalette });
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
+  // --color-bg-base: 25, 27, 27;
+  //   --color-bg-surface-1: 31, 32, 35;
+  //   --color-bg-surface-2: 39, 42, 45;
+
+  //   --color-border: 46, 50, 52;
+  //   --color-bg-sidebar: 19, 20, 22;
+  //   --color-accent: 60, 133, 217;
+
+  //   --color-text-base: 255, 255, 255;
+  //   --color-text-secondary: 142, 148, 146;
+
+  return (
+    <form onSubmit={handleSubmit(handleUpdateTheme)}>
+      <div className="space-y-5">
+        <h3 className="text-lg font-medium leading-6 text-brand-base">Customize your theme</h3>
+        <div className="space-y-4">
+          <div className="mt-6 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-6">
+            <div className="sm:col-span-2">
+              <Input
+                id="bgBase"
+                label="Background"
+                name="bgBase"
+                type="name"
+                placeholder="#FFFFFF"
+                autoComplete="off"
+                error={errors.bgBase}
+                register={register}
+                validations={{
+                  required: "Background color is required",
+                  pattern: {
+                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
+                    message: "Background color should be hex format",
+                  },
+                }}
+              />
+            </div>
+            <div className="sm:col-span-2">
+              <Input
+                id="bgSurface1"
+                label="Background surface 1"
+                name="bgSurface1"
+                type="name"
+                placeholder="#FFFFFF"
+                autoComplete="off"
+                error={errors.bgSurface1}
+                register={register}
+                validations={{
+                  required: "Background surface 1 color is required",
+                  pattern: {
+                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
+                    message: "Background surface 1 color should be hex format",
+                  },
+                }}
+              />
+            </div>
+            <div className="sm:col-span-2">
+              <Input
+                id="bgSurface2"
+                label="Background surface 2"
+                name="bgSurface1"
+                type="name"
+                placeholder="#FFFFFF"
+                autoComplete="off"
+                error={errors.bgSurface1}
+                register={register}
+                validations={{
+                  required: "Background surface 2 color is required",
+                  pattern: {
+                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
+                    message: "Background surface 2 color should be hex format",
+                  },
+                }}
+              />
+            </div>
+
+            <div className="sm:col-span-2">
+              <Input
+                id="border"
+                label="Border"
+                name="border"
+                type="name"
+                placeholder="#FFFFFF"
+                autoComplete="off"
+                error={errors.border}
+                register={register}
+                validations={{
+                  required: "Border color is required",
+                  pattern: {
+                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
+                    message: "Border color should be hex format",
+                  },
+                }}
+              />
+            </div>
+            <div className="sm:col-span-2">
+              <Input
+                id="sidebar"
+                label="Sidebar"
+                name="sidebar"
+                type="name"
+                placeholder="#FFFFFF"
+                autoComplete="off"
+                error={errors.sidebar}
+                register={register}
+                validations={{
+                  required: "Sidebar color is required",
+                  pattern: {
+                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
+                    message: "Sidebar color should be hex format",
+                  },
+                }}
+              />
+            </div>
+            <div className="sm:col-span-2">
+              <Input
+                id="accent"
+                label="Accent"
+                name="accent"
+                type="name"
+                placeholder="#FFFFFF"
+                autoComplete="off"
+                error={errors.accent}
+                register={register}
+                validations={{
+                  required: "Accent color is required",
+                  pattern: {
+                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
+                    message: "Accent color should be hex format",
+                  },
+                }}
+              />
+            </div>
+            <div className="sm:col-span-3">
+              <Input
+                id="textBase"
+                label="Text primary"
+                name="textBase"
+                type="name"
+                placeholder="#FFFFFF"
+                autoComplete="off"
+                error={errors.textBase}
+                register={register}
+                validations={{
+                  required: "Text primary color is required",
+                  pattern: {
+                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
+                    message: "Text primary color should be hex format",
+                  },
+                }}
+              />
+            </div>
+            <div className="sm:col-span-3">
+              <Input
+                id="textSecondary"
+                label="Text secondary"
+                name="textSecondary"
+                type="name"
+                placeholder="#FFFFFF"
+                autoComplete="off"
+                error={errors.textSecondary}
+                register={register}
+                validations={{
+                  required: "Text secondary color is required",
+                  pattern: {
+                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
+                    message: "Text secondary color should be hex format",
+                  },
+                }}
+              />
+            </div>
+          </div>
+
+          <div>
+            <Input
+              id="palette"
+              label="All colors"
+              name="palette"
+              type="name"
+              placeholder="Enter comma separated hex colors"
+              autoComplete="off"
+              error={errors.palette}
+              register={register}
+              validations={{
+                required: "Color values is required",
+                pattern: {
+                  value: /^(#(?:[0-9a-fA-F]{3}){1,2},){7}#(?:[0-9a-fA-F]{3}){1,2}$/g,
+                  message: "Color values should be hex format, separated by commas",
+                },
+              }}
+            />
+          </div>
+          <div
+            className="flex cursor-pointer items-center gap-1"
+            onClick={() => setDarkPalette((prevData) => !prevData)}
+          >
+            <span className="text-xs">Dark palette</span>
+            <button
+              type="button"
+              className={`pointer-events-none relative inline-flex h-4 w-7 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent ${
+                darkPalette ? "bg-brand-accent" : "bg-gray-300"
+              } transition-colors duration-300 ease-in-out focus:outline-none`}
+              role="switch"
+              aria-checked="false"
+            >
+              <span className="sr-only">Dark palette</span>
+              <span
+                aria-hidden="true"
+                className={`pointer-events-none inline-block h-3 w-3 ${
+                  darkPalette ? "translate-x-3" : "translate-x-0"
+                } transform rounded-full bg-brand-surface-2 shadow ring-0 transition duration-300 ease-in-out`}
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end gap-2">
+        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+        <PrimaryButton type="submit" loading={isSubmitting}>
+          {status
+            ? isSubmitting
+              ? "Updating Theme..."
+              : "Update Theme"
+            : isSubmitting
+            ? "Creating Theme..."
+            : "Set Theme"}
+        </PrimaryButton>
+      </div>
+    </form>
+  );
+};
diff --git a/apps/app/components/core/custom-theme-modal.tsx b/apps/app/components/core/custom-theme-modal.tsx
new file mode 100644
index 00000000000..d46d17d2822
--- /dev/null
+++ b/apps/app/components/core/custom-theme-modal.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// components
+import { ThemeForm } from "./custom-theme-form";
+// helpers
+import { applyTheme } from "helpers/theme.helper";
+// fetch-keys
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+};
+
+export const CustomThemeModal: React.FC<Props> = ({ isOpen, handleClose }) => {
+  const onClose = () => {
+    handleClose();
+  };
+
+  const handleFormSubmit = async (formData: any) => {
+    applyTheme(formData.palette, formData.darkPalette);
+    onClose();
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <ThemeForm
+                  handleClose={handleClose}
+                  handleFormSubmit={handleFormSubmit}
+                  status={false}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/apps/app/components/core/existing-issues-list-modal.tsx b/apps/app/components/core/existing-issues-list-modal.tsx
index 2e255ae1963..2d5ac37dca1 100644
--- a/apps/app/components/core/existing-issues-list-modal.tsx
+++ b/apps/app/components/core/existing-issues-list-modal.tsx
@@ -130,7 +130,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 divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
                 <form>
                   <Controller
                     control={control}
@@ -139,11 +139,11 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                       <Combobox as="div" {...field} multiple>
                         <div className="relative m-1">
                           <MagnifyingGlassIcon
-                            className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
+                            className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
                             aria-hidden="true"
                           />
                           <Combobox.Input
-                            className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                            className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
                             placeholder="Search..."
                             onChange={(e) => setQuery(e.target.value)}
                           />
@@ -156,7 +156,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                           {filteredIssues.length > 0 ? (
                             <li className="p-2">
                               {query === "" && (
-                                <h2 className="mb-2 px-3 text-xs font-semibold text-gray-900">
+                                <h2 className="mb-2 px-3 text-xs font-semibold text-brand-base">
                                   Select issues to add
                                 </h2>
                               )}
@@ -169,7 +169,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                                     value={issue.id}
                                     className={({ active }) =>
                                       `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
-                                        active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
+                                        active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
                                       }`
                                     }
                                   >
@@ -182,7 +182,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                                             backgroundColor: issue.state_detail.color,
                                           }}
                                         />
-                                        <span className="flex-shrink-0 text-xs text-gray-500">
+                                        <span className="flex-shrink-0 text-xs text-brand-secondary">
                                           {issue.project_detail.identifier}-{issue.sequence_id}
                                         </span>
                                         {issue.name}
@@ -195,9 +195,9 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                           ) : (
                             <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
                               <LayerDiagonalIcon height="56" width="56" />
-                              <h3 className="text-gray-500">
+                              <h3 className="text-brand-secondary">
                                 No issues found. Create a new issue with{" "}
-                                <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
+                                <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
                               </h3>
                             </div>
                           )}
diff --git a/apps/app/components/core/feeds.tsx b/apps/app/components/core/feeds.tsx
index c16fcd10f7d..0d68fd7a63c 100644
--- a/apps/app/components/core/feeds.tsx
+++ b/apps/app/components/core/feeds.tsx
@@ -55,23 +55,23 @@ const activityDetails: {
   },
   modules: {
     message: "set the module to",
-    icon: <RectangleGroupIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+    icon: <RectangleGroupIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
   },
   state: {
     message: "set the state to",
-    icon: <Squares2X2Icon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+    icon: <Squares2X2Icon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
   },
   priority: {
     message: "set the priority to",
-    icon: <ChartBarIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+    icon: <ChartBarIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
   },
   name: {
     message: "set the name to",
-    icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+    icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
   },
   description: {
     message: "updated the description.",
-    icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+    icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
   },
   estimate_point: {
     message: "set the estimate point to",
@@ -79,15 +79,15 @@ const activityDetails: {
   },
   target_date: {
     message: "set the due date to",
-    icon: <CalendarDaysIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+    icon: <CalendarDaysIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
   },
   parent: {
     message: "set the parent to",
-    icon: <UserIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+    icon: <UserIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
   },
   issue: {
     message: "deleted the issue.",
-    icon: <TrashIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+    icon: <TrashIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
   },
   estimate: {
     message: "updated the estimate",
@@ -217,7 +217,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                     </div>
                   )}
 
-                  <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-white px-0.5 py-px">
+                  <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-brand-surface-2 px-0.5 py-px">
                     <ChatBubbleLeftEllipsisIcon
                       className="h-3.5 w-3.5 text-gray-400"
                       aria-hidden="true"
@@ -230,7 +230,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                       {activity.actor_detail.first_name}
                       {activity.actor_detail.is_bot ? "Bot" : " " + activity.actor_detail.last_name}
                     </div>
-                    <p className="mt-0.5 text-xs text-gray-500">
+                    <p className="mt-0.5 text-xs text-brand-secondary">
                       Commented {timeAgo(activity.created_at)}
                     </p>
                   </div>
@@ -244,7 +244,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                       editable={false}
                       onBlur={() => ({})}
                       noBorder
-                      customClassName="text-xs bg-gray-100"
+                      customClassName="text-xs bg-brand-surface-1"
                     />
                   </div>
                 </div>
@@ -259,7 +259,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
               <div className="relative pb-1">
                 {activities.length > 1 && activityIdx !== activities.length - 1 ? (
                   <span
-                    className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-gray-200"
+                    className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-surface-2"
                     aria-hidden="true"
                   />
                 ) : null}
@@ -268,7 +268,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                     <div>
                       <div className="relative px-1.5">
                         <div className="mt-1.5">
-                          <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-gray-100 ring-white">
+                          <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-1 ring-white">
                             {activity.field ? (
                               activityDetails[activity.field as keyof typeof activityDetails]?.icon
                             ) : activity.actor_detail.avatar &&
@@ -292,7 +292,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                       </div>
                     </div>
                     <div className="min-w-0 flex-1 py-3">
-                      <div className="text-xs text-gray-500">
+                      <div className="text-xs text-brand-secondary">
                         <span className="text-gray font-medium">
                           {activity.actor_detail.first_name}
                           {activity.actor_detail.is_bot
@@ -300,7 +300,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                             : " " + activity.actor_detail.last_name}
                         </span>
                         <span> {action} </span>
-                        <span className="text-xs font-medium text-gray-900"> {value} </span>
+                        <span className="text-xs font-medium text-brand-base"> {value} </span>
                         <span className="whitespace-nowrap">{timeAgo(activity.created_at)}</span>
                       </div>
                     </div>
diff --git a/apps/app/components/core/filter-list.tsx b/apps/app/components/core/filter-list.tsx
index 08d1e806213..c42b7501bd8 100644
--- a/apps/app/components/core/filter-list.tsx
+++ b/apps/app/components/core/filter-list.tsx
@@ -57,9 +57,9 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
           return (
             <div
               key={key}
-              className="flex items-center gap-x-2 rounded-full border bg-white px-2 py-1"
+              className="flex items-center gap-x-2 rounded-full border border-brand-base bg-brand-surface-2 px-2 py-1"
             >
-              <span className="font-medium capitalize text-gray-500">
+              <span className="font-medium capitalize text-brand-secondary">
                 {replaceUnderscoreIfSnakeCase(key)}:
               </span>
               {filters[key as keyof IIssueFilterOptions] === null ||
@@ -131,7 +131,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                               ? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100"
                               : priority === "low"
                               ? "bg-green-100 text-green-500 hover:bg-green-100"
-                              : "bg-gray-100 text-gray-700 hover:bg-gray-100"
+                              : "bg-brand-surface-1 text-gray-700 hover:bg-brand-surface-1"
                           }`}
                         >
                           <span>{getPriorityIcon(priority)}</span>
@@ -339,7 +339,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
               created_by: null,
             })
           }
-          className="flex items-center gap-x-1 rounded-full border bg-white px-3 py-1.5 text-xs"
+          className="flex items-center gap-x-1 rounded-full border border-brand-base bg-brand-surface-2 px-3 py-1.5 text-xs"
         >
           <span className="font-medium">Clear all filters</span>
           <XMarkIcon className="h-4 w-4" />
diff --git a/apps/app/components/core/gpt-assistant-modal.tsx b/apps/app/components/core/gpt-assistant-modal.tsx
index b50b1e0f8e7..37104e30f8b 100644
--- a/apps/app/components/core/gpt-assistant-modal.tsx
+++ b/apps/app/components/core/gpt-assistant-modal.tsx
@@ -121,7 +121,7 @@ export const GptAssistantModal: React.FC<Props> = ({
 
   return (
     <div
-      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border bg-white p-4 shadow ${
+      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-brand-base bg-brand-surface-2 p-4 shadow ${
         isOpen ? "block" : "hidden"
       }`}
     >
diff --git a/apps/app/components/core/image-picker-popover.tsx b/apps/app/components/core/image-picker-popover.tsx
index a6f2efb72bf..9a3d5ff2f30 100644
--- a/apps/app/components/core/image-picker-popover.tsx
+++ b/apps/app/components/core/image-picker-popover.tsx
@@ -65,7 +65,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
   return (
     <Popover className="relative z-[2]" ref={ref}>
       <Popover.Button
-        className="rounded border border-gray-500 bg-white px-2 py-1 text-xs text-gray-700"
+        className="rounded-md border border-brand-base bg-brand-surface-2 px-2 py-1 text-xs text-gray-700"
         onClick={() => setIsOpen((prev) => !prev)}
       >
         {label}
@@ -79,16 +79,16 @@ 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 bg-white shadow-lg">
-          <div className="h-96 w-80 overflow-auto rounded border bg-white 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 bg-brand-surface-2 shadow-lg">
+          <div className="h-96 w-80 overflow-auto rounded border border-brand-base bg-brand-surface-2 p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
             <Tab.Group>
-              <Tab.List as="span" className="inline-block rounded bg-gray-200 p-1">
+              <Tab.List as="span" className="inline-block rounded bg-brand-surface-2 p-1">
                 {tabOptions.map((tab) => (
                   <Tab
                     key={tab.key}
                     className={({ selected }) =>
                       `rounded py-1 px-4 text-center text-sm outline-none transition-colors ${
-                        selected ? "bg-theme text-white" : "text-black"
+                        selected ? "bg-brand-accent text-white" : "text-brand-base"
                       }`
                     }
                   >
diff --git a/apps/app/components/core/image-upload-modal.tsx b/apps/app/components/core/image-upload-modal.tsx
index 28ff260d47f..ba41f3efad0 100644
--- a/apps/app/components/core/image-upload-modal.tsx
+++ b/apps/app/components/core/image-upload-modal.tsx
@@ -110,7 +110,7 @@ export const ImageUploadModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-30 overflow-y-auto">
@@ -124,9 +124,9 @@ 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 bg-white 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 bg-brand-surface-2 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
                     Upload Image
                   </Dialog.Title>
                   <div className="space-y-3">
@@ -135,7 +135,7 @@ export const ImageUploadModal: React.FC<Props> = ({
                         {...getRootProps()}
                         className={`relative block h-80 w-full rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
                           (image === null && isDragActive) || !value
-                            ? "border-2 border-dashed border-gray-300 hover:border-gray-400"
+                            ? "border-2 border-dashed border-brand-base hover:border-gray-400"
                             : ""
                         }`}
                       >
@@ -143,7 +143,7 @@ export const ImageUploadModal: React.FC<Props> = ({
                           <>
                             <button
                               type="button"
-                              className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600"
+                              className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded bg-brand-surface-1 px-2 py-0.5 text-xs font-medium text-gray-600"
                             >
                               Edit
                             </button>
@@ -157,7 +157,7 @@ export const ImageUploadModal: React.FC<Props> = ({
                         ) : (
                           <>
                             <UserCircleIcon className="mx-auto h-16 w-16 text-gray-400" />
-                            <span className="mt-2 block text-sm font-medium text-gray-900">
+                            <span className="mt-2 block text-sm font-medium text-brand-base">
                               {isDragActive
                                 ? "Drop image here to upload"
                                 : "Drag & drop image here"}
diff --git a/apps/app/components/core/index.ts b/apps/app/components/core/index.ts
index 41a71d96523..eb547578c47 100644
--- a/apps/app/components/core/index.ts
+++ b/apps/app/components/core/index.ts
@@ -11,3 +11,4 @@ export * from "./link-modal";
 export * from "./image-picker-popover";
 export * from "./filter-list";
 export * from "./feeds";
+export * from "./theme-switch";
diff --git a/apps/app/components/core/issues-view-filter.tsx b/apps/app/components/core/issues-view-filter.tsx
index 4b4d15e0946..0df8e8f1b2b 100644
--- a/apps/app/components/core/issues-view-filter.tsx
+++ b/apps/app/components/core/issues-view-filter.tsx
@@ -12,8 +12,7 @@ import { SelectFilters } from "components/views";
 // ui
 import { CustomMenu } from "components/ui";
 // icons
-import { ChevronDownIcon, ListBulletIcon, CalendarDaysIcon } from "@heroicons/react/24/outline";
-import { Squares2X2Icon } from "@heroicons/react/20/solid";
+import { ChevronDownIcon, ListBulletIcon, Squares2X2Icon, CalendarDaysIcon } from "@heroicons/react/24/outline";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
@@ -53,30 +52,30 @@ export const IssuesFilterView: React.FC = () => {
       <div className="flex items-center gap-x-1">
         <button
           type="button"
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
-            issueView === "list" ? "bg-gray-200" : ""
+          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1 ${
+            issueView === "list" ? "bg-brand-base" : ""
           }`}
           onClick={() => setIssueView("list")}
         >
-          <ListBulletIcon className="h-4 w-4" />
+          <ListBulletIcon className="h-4 w-4 text-brand-secondary" />
         </button>
         <button
           type="button"
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
-            issueView === "kanban" ? "bg-gray-200" : ""
+          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-base ${
+            issueView === "kanban" ? "bg-brand-base" : ""
           }`}
           onClick={() => setIssueView("kanban")}
         >
-          <Squares2X2Icon className="h-4 w-4" />
+          <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
         </button>
         <button
           type="button"
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
-            issueView === "calendar" ? "bg-gray-200" : ""
+          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-base ${
+            issueView === "calendar" ? "bg-brand-base" : ""
           }`}
           onClick={() => setIssueView("calendar")}
         >
-          <CalendarDaysIcon className="h-4 w-4" />
+          <CalendarDaysIcon className="h-4 w-4 text-brand-secondary" />
         </button>
       </div>
       <SelectFilters
@@ -113,8 +112,8 @@ export const IssuesFilterView: React.FC = () => {
         {({ open }) => (
           <>
             <Popover.Button
-              className={`group flex items-center gap-2 rounded-md border bg-transparent px-3 py-1.5 text-xs hover:bg-gray-100 hover:text-gray-900 focus:outline-none ${
-                open ? "bg-gray-100 text-gray-900" : "text-gray-500"
+              className={`group flex items-center gap-2 rounded-md border border-brand-base bg-transparent px-3 py-1.5 text-xs hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none ${
+                open ? "bg-brand-surface-1 text-brand-base" : "text-brand-muted-1"
               }`}
             >
               View
@@ -130,11 +129,11 @@ export const IssuesFilterView: React.FC = () => {
               leaveFrom="opacity-100 translate-y-0"
               leaveTo="opacity-0 translate-y-1"
             >
-              <Popover.Panel className="absolute right-0 z-20 mt-1 w-screen max-w-xs transform overflow-hidden rounded-lg bg-white p-3 shadow-lg">
-                <div className="relative divide-y-2">
+              <Popover.Panel className="absolute right-0 z-20 mt-1 w-screen max-w-xs transform overflow-hidden rounded-lg bg-brand-surface-2 p-3 shadow-lg">
+                <div className="relative divide-y-2 divide-brand-base">
                   <div className="space-y-4 pb-3 text-xs">
                     <div className="flex items-center justify-between">
-                      <h4 className="text-gray-600">Group by</h4>
+                      <h4 className="text-brand-secondary">Group by</h4>
                       <CustomMenu
                         label={
                           GROUP_BY_OPTIONS.find((option) => option.key === groupByProperty)?.name ??
@@ -155,7 +154,7 @@ export const IssuesFilterView: React.FC = () => {
                       </CustomMenu>
                     </div>
                     <div className="flex items-center justify-between">
-                      <h4 className="text-gray-600">Order by</h4>
+                      <h4 className="text-brand-secondary">Order by</h4>
                       <CustomMenu
                         label={
                           ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
@@ -178,7 +177,7 @@ export const IssuesFilterView: React.FC = () => {
                       </CustomMenu>
                     </div>
                     <div className="flex items-center justify-between">
-                      <h4 className="text-gray-600">Issue type</h4>
+                      <h4 className="text-brand-secondary">Issue type</h4>
                       <CustomMenu
                         label={
                           FILTER_ISSUE_OPTIONS.find((option) => option.key === filters.type)
@@ -201,11 +200,11 @@ export const IssuesFilterView: React.FC = () => {
                       </CustomMenu>
                     </div>
                     <div className="flex items-center justify-between">
-                      <h4 className="text-gray-600">Show empty states</h4>
+                      <h4 className="text-brand-secondary">Show empty states</h4>
                       <button
                         type="button"
                         className={`relative inline-flex h-3.5 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
-                          showEmptyGroups ? "bg-green-500" : "bg-gray-200"
+                          showEmptyGroups ? "bg-green-500" : "bg-brand-surface-2"
                         }`}
                         role="switch"
                         aria-checked={showEmptyGroups}
@@ -214,7 +213,7 @@ export const IssuesFilterView: React.FC = () => {
                         <span className="sr-only">Show empty groups</span>
                         <span
                           aria-hidden="true"
-                          className={`inline-block h-2.5 w-2.5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                          className={`inline-block h-2.5 w-2.5 transform rounded-full bg-brand-surface-2 shadow ring-0 transition duration-200 ease-in-out ${
                             showEmptyGroups ? "translate-x-2.5" : "translate-x-0"
                           }`}
                         />
@@ -226,7 +225,7 @@ export const IssuesFilterView: React.FC = () => {
                       </button>
                       <button
                         type="button"
-                        className="font-medium text-theme"
+                        className="font-medium text-brand-accent"
                         onClick={() => setNewFilterDefaultView()}
                       >
                         Set as default
@@ -234,7 +233,7 @@ export const IssuesFilterView: React.FC = () => {
                     </div>
                   </div>
                   <div className="space-y-2 py-3">
-                    <h4 className="text-sm text-gray-600">Display Properties</h4>
+                    <h4 className="text-sm text-brand-secondary">Display Properties</h4>
                     <div className="flex flex-wrap items-center gap-2">
                       {Object.keys(properties).map((key) => {
                         if (key === "estimate" && !isEstimateActive) return null;
diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index 22261de06cd..18e685866a0 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@@ -502,8 +502,8 @@ export const IssuesView: React.FC<Props> = ({
                   title="Create a new issue"
                   description={
                     <span>
-                      Use <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre> shortcut to
-                      create a new issue
+                      Use <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>{" "}
+                      shortcut to create a new issue
                     </span>
                   }
                   Icon={PlusIcon}
diff --git a/apps/app/components/core/link-modal.tsx b/apps/app/components/core/link-modal.tsx
index 7fd19dc8af8..3c22c2b1baf 100644
--- a/apps/app/components/core/link-modal.tsx
+++ b/apps/app/components/core/link-modal.tsx
@@ -56,7 +56,7 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -70,11 +70,11 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white 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 overflow-hidden rounded-lg bg-brand-surface-2 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
                     <div className="space-y-5">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
                         Add Link
                       </Dialog.Title>
                       <div className="mt-2 space-y-3">
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index 4fa51876988..a728c3a750a 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -217,7 +217,7 @@ export const SingleListIssue: React.FC<Props> = ({
         </a>
       </ContextMenu>
       <div
-        className="flex items-center justify-between gap-2 px-4 py-2.5 border-b border-gray-300 last:border-b-0"
+        className="flex items-center justify-between gap-2 px-4 py-2.5 border-b border-brand-base last:border-b-0"
         onContextMenu={(e) => {
           e.preventDefault();
           setContextMenu(true);
diff --git a/apps/app/components/core/list-view/single-list.tsx b/apps/app/components/core/list-view/single-list.tsx
index 32880a1a63c..bfd8acdabdf 100644
--- a/apps/app/components/core/list-view/single-list.tsx
+++ b/apps/app/components/core/list-view/single-list.tsx
@@ -132,10 +132,10 @@ export const SingleList: React.FC<Props> = ({
   return (
     <Disclosure key={groupTitle} as="div" defaultOpen>
       {({ open }) => (
-        <div className="bg-white">
+        <div className="rounded-[10px] border border-brand-base bg-brand-surface-2">
           <div
-            className={`flex items-center justify-between bg-gray-100 px-4 py-2.5 ${
-              open ? "" : "rounded-[10px]"
+            className={`flex items-center justify-between bg-brand-surface-1 px-4 py-2.5 ${
+              open ? "rounded-t-[10px]" : "rounded-[10px]"
             }`}
           >
             <Disclosure.Button>
@@ -144,21 +144,21 @@ export const SingleList: React.FC<Props> = ({
                   <div className="flex items-center">{getGroupIcon()}</div>
                 )}
                 {selectedGroup !== null ? (
-                  <h2 className="text-sm font-semibold capitalize leading-6 text-gray-800">
+                  <h2 className="text-sm font-semibold capitalize leading-6 text-brand-base">
                     {getGroupTitle()}
                   </h2>
                 ) : (
                   <h2 className="font-medium leading-5">All Issues</h2>
                 )}
-                <span className="rounded-full bg-gray-200 py-1 min-w-[2.5rem] text-center text-xs text-black">
-                  {groupedByIssues?.[groupTitle].length ?? 0}
+                <span className="rounded-full bg-brand-surface-2 py-1 min-w-[2.5rem] text-center text-xs text-brand-2">
+                  {groupedByIssues[groupTitle as keyof IIssue].length}
                 </span>
               </div>
             </Disclosure.Button>
             {type === "issue" ? (
               <button
                 type="button"
-                className="p-1  text-gray-500 hover:bg-gray-100"
+                className="p-1  text-brand-secondary hover:bg-brand-surface-2"
                 onClick={addIssueToState}
               >
                 <PlusIcon className="h-4 w-4" />
@@ -215,7 +215,7 @@ export const SingleList: React.FC<Props> = ({
                     />
                   ))
                 ) : (
-                  <p className="px-4 py-3 text-sm text-gray-500">No issues.</p>
+                  <p className="px-4 py-3 text-sm text-brand-secondary">No issues.</p>
                 )
               ) : (
                 <div className="flex h-full w-full items-center justify-center">Loading...</div>
diff --git a/apps/app/components/core/sidebar/links-list.tsx b/apps/app/components/core/sidebar/links-list.tsx
index edbd110106c..6af6d253a2f 100644
--- a/apps/app/components/core/sidebar/links-list.tsx
+++ b/apps/app/components/core/sidebar/links-list.tsx
@@ -33,7 +33,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
             <div className="absolute top-1.5 right-1.5 z-[1] flex items-center gap-1">
               <Link href={link.url}>
                 <a
-                  className="grid h-7 w-7 place-items-center rounded bg-gray-100 p-1 outline-none"
+                  className="grid h-7 w-7 place-items-center rounded bg-brand-surface-1 p-1 outline-none"
                   target="_blank"
                 >
                   <ExternalLinkIcon width="14" height="14" />
@@ -41,7 +41,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
               </Link>
               <button
                 type="button"
-                className="grid h-7 w-7 place-items-center rounded bg-gray-100 p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
+                className="grid h-7 w-7 place-items-center rounded bg-brand-surface-1 p-1 text-red-500 outline-none duration-300 hover:bg-red-500/30"
                 onClick={() => handleDeleteLink(link.id)}
               >
                 <TrashIcon className="h-4 w-4" />
@@ -49,13 +49,13 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
             </div>
           )}
           <Link href={link.url}>
-            <a className="relative flex gap-2 rounded-md border bg-gray-50 p-2" target="_blank">
+            <a className="relative flex gap-2 rounded-md border border-brand-base bg-brand-surface-2 p-2" target="_blank">
               <div className="mt-0.5">
                 <LinkIcon className="h-3.5 w-3.5" />
               </div>
               <div>
                 <h5 className="w-4/5 break-all">{link.title}</h5>
-                <p className="mt-0.5 text-gray-500">
+                <p className="mt-0.5 text-brand-secondary">
                   Added {timeAgo(link.created_at)}
                   <br />
                   by{" "}
diff --git a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx
index fad29ddaa92..84b79e4df3f 100644
--- a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx
+++ b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx
@@ -100,13 +100,13 @@ export const SidebarProgressStats: React.FC<Props> = ({
     >
       <Tab.List
         as="div"
-        className={`flex w-full items-center justify-between rounded-md bg-gray-100 px-1 py-1.5 
+        className={`flex w-full items-center justify-between rounded-md bg-brand-surface-1 px-1 py-1.5 
         ${module ? "text-xs" : "text-sm"} `}
       >
         <Tab
           className={({ selected }) =>
-            `w-full rounded px-3 py-1 text-gray-900  ${
-              selected ? " bg-theme text-white" : "  hover:bg-hover-gray"
+            `w-full rounded px-3 py-1 text-brand-base  ${
+              selected ? " bg-brand-accent text-white" : "  hover:bg-brand-surface-2"
             }`
           }
         >
@@ -114,8 +114,8 @@ export const SidebarProgressStats: React.FC<Props> = ({
         </Tab>
         <Tab
           className={({ selected }) =>
-            `w-full rounded px-3 py-1 text-gray-900 ${
-              selected ? " bg-theme text-white" : " hover:bg-hover-gray"
+            `w-full rounded px-3 py-1 text-brand-base ${
+              selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
             }`
           }
         >
@@ -123,8 +123,8 @@ export const SidebarProgressStats: React.FC<Props> = ({
         </Tab>
         <Tab
           className={({ selected }) =>
-            `w-full rounded px-3 py-1  text-gray-900 ${
-              selected ? " bg-theme text-white" : " hover:bg-hover-gray"
+            `w-full rounded px-3 py-1  text-brand-base ${
+              selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
             }`
           }
         >
@@ -166,7 +166,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
             <SingleProgressStats
               title={
                 <>
-                  <div className="h-5 w-5 rounded-full border-2 border-white bg-white">
+                  <div className="h-5 w-5 rounded-full border-2 border-white bg-brand-surface-2">
                     <Image
                       src={User}
                       height="100%"
diff --git a/apps/app/components/core/sidebar/single-progress-stats.tsx b/apps/app/components/core/sidebar/single-progress-stats.tsx
index 5ea7206f08c..3e672ce8b22 100644
--- a/apps/app/components/core/sidebar/single-progress-stats.tsx
+++ b/apps/app/components/core/sidebar/single-progress-stats.tsx
@@ -19,8 +19,8 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
 }) => (
   <div
     className={`flex w-full items-center justify-between rounded p-2 text-xs ${
-      onClick ? "cursor-pointer hover:bg-gray-100" : ""
-    } ${selected ? "bg-gray-100" : ""}`}
+      onClick ? "cursor-pointer hover:bg-brand-surface-1" : ""
+    } ${selected ? "bg-brand-surface-1" : ""}`}
     onClick={onClick}
   >
     <div className="flex w-1/2 items-center justify-start gap-2">{title}</div>
diff --git a/apps/app/components/core/theme-switch.tsx b/apps/app/components/core/theme-switch.tsx
new file mode 100644
index 00000000000..f93b1998e90
--- /dev/null
+++ b/apps/app/components/core/theme-switch.tsx
@@ -0,0 +1,60 @@
+import { useState, useEffect, ChangeEvent } from "react";
+import { useTheme } from "next-themes";
+import { THEMES_OBJ } from "constants/themes";
+import { CustomSelect } from "components/ui";
+import { CustomThemeModal } from "./custom-theme-modal";
+
+export const ThemeSwitch = () => {
+  const [mounted, setMounted] = useState(false);
+  const [customThemeModal, setCustomThemeModal] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <>
+      <CustomSelect
+        value={theme}
+        label={theme ? THEMES_OBJ.find((t) => t.value === theme)?.label : "Select your theme"}
+        onChange={({ value, type }: { value: string; type: string }) => {
+          if (value === "custom") {
+            if (!customThemeModal) setCustomThemeModal(true);
+          } else {
+            const cssVars = [
+              "--color-bg-base",
+              "--color-bg-surface-1",
+              "--color-bg-surface-2",
+
+              "--color-border",
+              "--color-bg-sidebar",
+              "--color-accent",
+
+              "--color-text-base",
+              "--color-text-secondary",
+            ];
+            cssVars.forEach((cssVar) => document.documentElement.style.removeProperty(cssVar));
+          }
+          document.documentElement.style.setProperty("color-scheme", type);
+          setTheme(value);
+        }}
+        input
+        width="w-full"
+        position="right"
+      >
+        {THEMES_OBJ.map(({ value, label, type }) => (
+          <CustomSelect.Option key={value} value={{ value, type }}>
+            {label}
+          </CustomSelect.Option>
+        ))}
+      </CustomSelect>
+      {/* <CustomThemeModal isOpen={customThemeModal} handleClose={() => setCustomThemeModal(false)} /> */}
+    </>
+  );
+};
diff --git a/apps/app/components/cycles/completed-cycles-list.tsx b/apps/app/components/cycles/completed-cycles-list.tsx
index cb8bb43d7f5..bf1971368c3 100644
--- a/apps/app/components/cycles/completed-cycles-list.tsx
+++ b/apps/app/components/cycles/completed-cycles-list.tsx
@@ -64,7 +64,7 @@ export const CompletedCyclesList: React.FC<CompletedCyclesListProps> = ({
       {completedCycles ? (
         completedCycles.completed_cycles.length > 0 ? (
           <div className="flex flex-col gap-4">
-            <div className="flex items-center gap-2 text-sm text-gray-500">
+            <div className="flex items-center gap-2 text-sm text-brand-secondary">
               <ExclamationIcon height={14} width={14} />
               <span>Completed cycles are not editable.</span>
             </div>
diff --git a/apps/app/components/cycles/cycles-list.tsx b/apps/app/components/cycles/cycles-list.tsx
index 28cd171d07d..68592b05120 100644
--- a/apps/app/components/cycles/cycles-list.tsx
+++ b/apps/app/components/cycles/cycles-list.tsx
@@ -62,8 +62,8 @@ export const CyclesList: React.FC<TCycleStatsViewProps> = ({
           </div>
         ) : type === "current" ? (
           showNoCurrentCycleMessage && (
-            <div className="flex items-center justify-between bg-white w-full px-6 py-4 rounded-[10px]">
-              <h3 className="text-base font-medium text-black "> No current cycle is present.</h3>
+            <div className="flex items-center justify-between bg-brand-surface-2 w-full px-6 py-4 rounded-[10px]">
+              <h3 className="text-base font-medium text-brand-base "> No current cycle is present.</h3>
               <button onClick={() => setShowNoCurrentCycleMessage(false)}>
                 <XMarkIcon className="h-4 w-4" />
               </button>
diff --git a/apps/app/components/cycles/delete-cycle-modal.tsx b/apps/app/components/cycles/delete-cycle-modal.tsx
index c43d34d689c..b69537cdc47 100644
--- a/apps/app/components/cycles/delete-cycle-modal.tsx
+++ b/apps/app/components/cycles/delete-cycle-modal.tsx
@@ -139,7 +139,7 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -153,8 +153,8 @@ 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 bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                       <ExclamationTriangleIcon
@@ -163,11 +163,11 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
                       />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
                         Delete Cycle
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-gray-500">
+                        <p className="text-sm text-brand-secondary">
                           Are you sure you want to delete cycle-{" "}
                           <span className="font-bold">{data?.name}</span>? All of the data related
                           to the cycle will be permanently removed. This action cannot be undone.
diff --git a/apps/app/components/cycles/empty-cycle.tsx b/apps/app/components/cycles/empty-cycle.tsx
index dfefa401129..af2f12a1111 100644
--- a/apps/app/components/cycles/empty-cycle.tsx
+++ b/apps/app/components/cycles/empty-cycle.tsx
@@ -37,30 +37,30 @@ export const EmptyCycle = () => {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-5 ">
       <div className="relative h-32 w-72">
-        <div className="absolute right-0 top-0 flex w-64 flex-col rounded-[10px] bg-white text-xs shadow">
+        <div className="absolute right-0 top-0 flex w-64 flex-col rounded-[10px] bg-brand-surface-2 text-xs shadow">
           <div className="flex flex-col items-start justify-center gap-2.5 p-3.5">
-            <span className="text-sm font-semibold text-black">Cycle Name</span>
+            <span className="text-sm font-semibold text-brand-base">Cycle Name</span>
             <div className="flex h-full w-full items-center gap-4">
-              <span className="h-2 w-20 rounded-full bg-gray-200" />
-              <span className="h-2 w-20 rounded-full bg-gray-200" />
+              <span className="h-2 w-20 rounded-full bg-brand-surface-2" />
+              <span className="h-2 w-20 rounded-full bg-brand-surface-2" />
             </div>
           </div>
 
-          <div className="border-t border-gray-200 bg-gray-100 px-4 py-3">
+          <div className="border-t border-brand-base bg-brand-surface-1 px-4 py-3">
             <LinearProgressIndicator data={emptyCycleData} />
           </div>
         </div>
 
-        <div className="absolute left-0 bottom-0 flex w-64 flex-col rounded-[10px] bg-white text-xs shadow">
+        <div className="absolute left-0 bottom-0 flex w-64 flex-col rounded-[10px] bg-brand-surface-2 text-xs shadow">
           <div className="flex flex-col items-start justify-center gap-2.5 p-3.5">
-            <span className="text-sm font-semibold text-black">Cycle Name</span>
+            <span className="text-sm font-semibold text-brand-base">Cycle Name</span>
             <div className="flex h-full w-full items-center gap-4">
-              <span className="h-2 w-20 rounded-full bg-gray-200" />
-              <span className="h-2 w-20 rounded-full bg-gray-200" />
+              <span className="h-2 w-20 rounded-full bg-brand-surface-2" />
+              <span className="h-2 w-20 rounded-full bg-brand-surface-2" />
             </div>
           </div>
 
-          <div className="border-t border-gray-200 bg-gray-100 px-4 py-3">
+          <div className="border-t border-brand-base bg-brand-surface-1 px-4 py-3">
             <LinearProgressIndicator data={emptyCycleData} />
           </div>
         </div>
@@ -68,7 +68,7 @@ export const EmptyCycle = () => {
 
       <div className="flex flex-col items-center justify-center gap-4 text-center ">
         <h3 className="text-xl font-semibold">Create New Cycle</h3>
-        <p className="text-sm text-gray-500">
+        <p className="text-sm text-brand-secondary">
           Sprint more effectively with Cycles by confining your project <br /> to a fixed amount of
           time. Create new cycle now.
         </p>
diff --git a/apps/app/components/cycles/form.tsx b/apps/app/components/cycles/form.tsx
index 99e55ce7ace..168f4f2cd18 100644
--- a/apps/app/components/cycles/form.tsx
+++ b/apps/app/components/cycles/form.tsx
@@ -94,7 +94,7 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateCycle)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-gray-900">
+        <h3 className="text-lg font-medium leading-6 text-brand-base">
           {status ? "Update" : "Create"} Cycle
         </h3>
         <div className="space-y-3">
@@ -196,7 +196,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 px-5 pt-5">
+      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-brand-base px-5 pt-5">
         <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
         <PrimaryButton
           type="submit"
diff --git a/apps/app/components/cycles/modal.tsx b/apps/app/components/cycles/modal.tsx
index a71b380feb9..aba22b0ec7d 100644
--- a/apps/app/components/cycles/modal.tsx
+++ b/apps/app/components/cycles/modal.tsx
@@ -151,7 +151,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
         <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
@@ -164,7 +164,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 bg-white 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 bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <CycleForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/cycles/select.tsx b/apps/app/components/cycles/select.tsx
index c482192763b..971c60dddd7 100644
--- a/apps/app/components/cycles/select.tsx
+++ b/apps/app/components/cycles/select.tsx
@@ -59,9 +59,9 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
         {({ open }) => (
           <>
             <Listbox.Button
-              className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 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-brand-base px-2 py-1 text-xs shadow-sm duration-300 hover:bg-brand-surface-1 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
             >
-              <CyclesIcon className="h-3 w-3 text-gray-500" />
+              <CyclesIcon className="h-3 w-3 text-brand-secondary" />
               <div className="flex items-center gap-2 truncate">
                 {cycles?.find((c) => c.id === value)?.name ?? "Cycles"}
               </div>
@@ -75,7 +75,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
               leaveTo="opacity-0"
             >
               <Listbox.Options
-                className={`absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-white shadow-lg text-xs z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none`}
+                className={`absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-brand-surface-2 shadow-lg text-xs z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none`}
               >
                 <div className="py-1">
                   {options ? (
@@ -93,7 +93,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
                                 : ""
                             } ${
                               active ? "bg-indigo-50" : ""
-                            } relative cursor-pointer select-none p-2 text-gray-900`
+                            } relative cursor-pointer select-none p-2 text-brand-base`
                           }
                           value={option.value}
                         >
@@ -103,14 +103,14 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
                         </Listbox.Option>
                       ))
                     ) : (
-                      <p className="text-center text-sm text-gray-500">No options</p>
+                      <p className="text-center text-sm text-brand-secondary">No options</p>
                     )
                   ) : (
-                    <p className="text-center text-sm text-gray-500">Loading...</p>
+                    <p className="text-center text-sm text-brand-secondary">Loading...</p>
                   )}
                   <button
                     type="button"
-                    className="relative w-full flex select-none items-center gap-x-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-gray-900"
+                    className="relative w-full flex select-none items-center gap-x-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-brand-base"
                     onClick={openCycleModal}
                   >
                     <PlusIcon className="h-4 w-4 text-gray-400" aria-hidden="true" />
diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index 306ec5578c1..1b9a3de34fe 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -135,7 +135,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
       <div
         className={`fixed top-0 ${
           isOpen ? "right-0" : "-right-[24rem]"
-        } z-20 h-full w-[24rem] overflow-y-auto border-l bg-gray-50 py-5 duration-300`}
+        } z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-surface-2 py-5 duration-300`}
       >
         {cycle ? (
           <>
@@ -143,19 +143,19 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
               <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-gray-200 bg-gray-100 px-2.5 py-1.5 text-center text-sm capitalize text-gray-800 `}
+                    className={`flex items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-center text-sm capitalize text-brand-muted-1 `}
                   >
                     {capitalizeFirstLetter(cycleStatus)}
                   </span>
                 </div>
-                <div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-gray-800">
+                <div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-brand-muted-1">
                   <Popover className="flex h-full items-center  justify-center rounded-lg">
                     {({ open }) => (
                       <>
                         <Popover.Button
                           disabled={isCompleted ?? false}
-                          className={`group flex h-full items-center gap-1 rounded border-[0.5px]  border-gray-200 bg-gray-100 px-2.5 py-1.5 text-gray-800   ${
-                            open ? "bg-gray-100" : ""
+                          className={`group flex h-full items-center gap-1 rounded border-[0.5px]  border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1   ${
+                            open ? "bg-brand-surface-1" : ""
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
@@ -216,8 +216,8 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                       <>
                         <Popover.Button
                           disabled={isCompleted ?? false}
-                          className={`group flex items-center gap-1 rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-gray-800  ${
-                            open ? "bg-gray-100" : ""
+                          className={`group flex items-center gap-1 rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1  ${
+                            open ? "bg-brand-surface-1" : ""
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3 " />
@@ -278,7 +278,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
               <div className="flex flex-col gap-6 px-6 py-6 w-full">
                 <div className="flex flex-col items-start justify-start gap-2 w-full">
                   <div className="flex items-start justify-between gap-2 w-full">
-                    <h4 className="text-xl font-semibold text-gray-900">{cycle.name}</h4>
+                    <h4 className="text-xl font-semibold text-brand-base">{cycle.name}</h4>
                     <CustomMenu width="lg" ellipsis>
                       {!isCompleted && (
                         <CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
@@ -297,7 +297,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                     </CustomMenu>
                   </div>
 
-                  <span className="whitespace-normal text-sm leading-5 text-black">
+                  <span className="whitespace-normal text-sm leading-5 text-brand-base">
                     {cycle.description}
                   </span>
                 </div>
@@ -323,7 +323,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                           {cycle.owned_by.first_name.charAt(0)}
                         </span>
                       )}
-                      <span className="text-gray-900">{cycle.owned_by.first_name}</span>
+                      <span className="text-brand-base">{cycle.owned_by.first_name}</span>
                     </div>
                   </div>
 
@@ -333,7 +333,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                       <span>Progress</span>
                     </div>
 
-                    <div className="flex items-center gap-2.5 text-gray-800">
+                    <div className="flex items-center gap-2.5 text-brand-muted-1">
                       <span className="h-4 w-4">
                         <ProgressBar value={cycle.completed_issues} maxValue={cycle.total_issues} />
                       </span>
@@ -344,15 +344,15 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
               </div>
             </div>
 
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
-              <Disclosure defaultOpen>
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
+              <Disclosure>
                 {({ open }) => (
                   <div
                     className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}
                   >
                     <div className="flex w-full items-center justify-between gap-2    ">
                       <div className="flex items-center justify-start gap-2 text-sm">
-                        <span className="font-medium text-gray-500">Progress</span>
+                        <span className="font-medium text-brand-secondary">Progress</span>
                         {!open && progressPercentage ? (
                           <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
                             {progressPercentage ? `${progressPercentage}%` : ""}
@@ -371,7 +371,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                       ) : (
                         <div className="flex items-center gap-1">
                           <ExclamationIcon height={14} width={14} />
-                          <span className="text-xs italic text-gray-500">
+                          <span className="text-xs italic text-brand-secondary">
                             {cycleStatus === "upcoming"
                               ? "Cycle is yet to start."
                               : "Invalid date. Please enter valid date."}
@@ -386,7 +386,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                             <div className="flex  items-start justify-between gap-4 py-2 text-xs">
                               <div className="flex items-center gap-1">
                                 <span>
-                                  <DocumentIcon className="h-3 w-3 text-gray-500" />
+                                  <DocumentIcon className="h-3 w-3 text-brand-secondary" />
                                 </span>
                                 <span>
                                   Pending Issues -{" "}
@@ -395,7 +395,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                                 </span>
                               </div>
 
-                              <div className="flex items-center gap-3 text-gray-900">
+                              <div className="flex items-center gap-3 text-brand-base">
                                 <div className="flex items-center justify-center gap-1">
                                   <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
                                   <span>Ideal</span>
@@ -424,15 +424,15 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
               </Disclosure>
             </div>
 
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
-              <Disclosure defaultOpen>
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
+              <Disclosure>
                 {({ open }) => (
                   <div
                     className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}
                   >
                     <div className="flex w-full items-center justify-between gap-2">
                       <div className="flex items-center justify-start gap-2 text-sm">
-                        <span className="font-medium text-gray-500">Other Information</span>
+                        <span className="font-medium text-brand-secondary">Other Information</span>
                       </div>
 
                       {cycle.total_issues > 0 ? (
@@ -445,7 +445,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                       ) : (
                         <div className="flex items-center gap-1">
                           <ExclamationIcon height={14} width={14} />
-                          <span className="text-xs italic text-gray-500">
+                          <span className="text-xs italic text-brand-secondary">
                             No issues found. Please add issue.
                           </span>
                         </div>
diff --git a/apps/app/components/cycles/single-cycle-card.tsx b/apps/app/components/cycles/single-cycle-card.tsx
index c14617ee760..5811398751c 100644
--- a/apps/app/components/cycles/single-cycle-card.tsx
+++ b/apps/app/components/cycles/single-cycle-card.tsx
@@ -238,7 +238,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
 
   return (
     <div>
-      <div className="flex flex-col rounded-[10px] bg-white text-xs shadow">
+      <div className="flex flex-col rounded-[10px] bg-brand-surface-2 text-xs shadow">
         <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
           <a className="w-full">
             <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
@@ -350,7 +350,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
           <Disclosure>
             {({ open }) => (
               <div
-                className={`flex h-full w-full flex-col border-t border-gray-200 bg-gray-100 ${
+                className={`flex h-full w-full flex-col border-t border-brand-base bg-brand-surface-1 ${
                   open ? "" : "flex-row"
                 }`}
               >
@@ -368,7 +368,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                 </div>
                 <Transition show={open}>
                   <Disclosure.Panel>
-                    <div className="overflow-hidden rounded-b-md bg-white py-3 shadow">
+                    <div className="overflow-hidden rounded-b-md bg-brand-surface-2 py-3 shadow">
                       <div className="col-span-2 space-y-3 px-4">
                         <div className="space-y-3 text-xs">
                           {stateGroups.map((group) => (
@@ -388,7 +388,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                               <div>
                                 <span>
                                   {cycle[group.key as keyof ICycle] as number}{" "}
-                                  <span className="text-gray-500">
+                                  <span className="text-brand-secondary">
                                     -{" "}
                                     {cycle.total_issues > 0
                                       ? `${Math.round(
diff --git a/apps/app/components/cycles/transfer-issues-modal.tsx b/apps/app/components/cycles/transfer-issues-modal.tsx
index ef44993b9a6..b928eea7eea 100644
--- a/apps/app/components/cycles/transfer-issues-modal.tsx
+++ b/apps/app/components/cycles/transfer-issues-modal.tsx
@@ -89,7 +89,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10">
@@ -103,7 +103,7 @@ export const TransferIssuesModal: 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 transform rounded-lg bg-white py-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 py-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-4">
                   <div className="flex items-center justify-between px-5">
                     <div className="flex items-center gap-2">
@@ -114,8 +114,8 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                       <XMarkIcon className="h-4 w-4" />
                     </button>
                   </div>
-                  <div className="flex items-center gap-2 pb-3 mt-2 px-5 border-b border-gray-200">
-                    <MagnifyingGlassIcon className="h-4 w-4 text-gray-500" />
+                  <div className="flex items-center gap-2 pb-3 px-5 border-b border-brand-base">
+                    <MagnifyingGlassIcon className="h-4 w-4 text-brand-secondary" />
                     <input
                       className="outline-none"
                       placeholder="Search for a cycle..."
@@ -129,7 +129,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                         filteredOptions.map((option: ICycle) => (
                           <button
                             key={option.id}
-                            className="flex items-center gap-4 py-3 px-2 text-gray-600 text-sm rounded w-full hover:bg-gray-100"
+                            className="flex items-center gap-4 px-4 py-3 text-gray-600 text-sm rounded w-full hover:bg-brand-surface-1"
                             onClick={() => {
                               transferIssue({
                                 new_cycle_id: option?.id,
@@ -149,14 +149,14 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                       ) : (
                         <div className="flex items-center justify-center gap-4 p-5 text-sm w-full">
                           <ExclamationIcon height={14} width={14} />
-                          <span className="text-center text-gray-500">
+                          <span className="text-center text-brand-secondary">
                             You don’t have any current cycle. Please create one to transfer the
                             issues.
                           </span>
                         </div>
                       )
                     ) : (
-                      <p className="text-center text-gray-500">Loading...</p>
+                      <p className="text-center text-brand-secondary">Loading...</p>
                     )}
                   </div>
                 </div>
diff --git a/apps/app/components/cycles/transfer-issues.tsx b/apps/app/components/cycles/transfer-issues.tsx
index 979e87b93aa..59a10a4d8a5 100644
--- a/apps/app/components/cycles/transfer-issues.tsx
+++ b/apps/app/components/cycles/transfer-issues.tsx
@@ -38,7 +38,7 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
     : 0;
   return (
     <div className="flex items-center justify-between -mt-4 mb-4">
-      <div className="flex items-center gap-2 text-sm text-gray-500">
+      <div className="flex items-center gap-2 text-sm text-brand-secondary">
         <ExclamationIcon height={14} width={14} />
         <span>Completed cycles are not editable.</span>
       </div>
diff --git a/apps/app/components/emoji-icon-picker/index.tsx b/apps/app/components/emoji-icon-picker/index.tsx
index 6c3d3842b0d..6cb3b84f9b8 100644
--- a/apps/app/components/emoji-icon-picker/index.tsx
+++ b/apps/app/components/emoji-icon-picker/index.tsx
@@ -55,7 +55,7 @@ const EmojiIconPicker: React.FC<Props> = ({
   return (
     <Popover className="relative z-[1]" ref={ref}>
       <Popover.Button
-        className="rounded-full bg-gray-100 p-2 outline-none sm:text-sm"
+        className="rounded-full bg-brand-surface-1 p-2 outline-none sm:text-sm"
         onClick={() => setIsOpen((prev) => !prev)}
       >
         {label}
@@ -69,8 +69,8 @@ const EmojiIconPicker: React.FC<Props> = ({
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] bg-white shadow-lg">
-          <div className="h-[230px] w-[250px] overflow-auto border rounded-[4px] bg-white p-2 shadow-xl">
+        <Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] bg-brand-surface-2 shadow-lg">
+          <div className="h-[230px] w-[250px] overflow-auto border border-brand-base rounded-[4px] bg-brand-surface-2 p-2 shadow-xl">
             <Tab.Group as="div" className="flex h-full w-full flex-col">
               <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
                 {tabOptions.map((tab) => (
@@ -100,7 +100,7 @@ const EmojiIconPicker: React.FC<Props> = ({
                         {recentEmojis.map((emoji) => (
                           <button
                             type="button"
-                            className="h-4 w-4 select-none text-base hover:bg-hover-gray flex items-center justify-between"
+                            className="h-4 w-4 select-none text-sm hover:bg-brand-surface-2 flex items-center justify-between"
                             key={emoji}
                             onClick={() => {
                               onChange(emoji);
@@ -119,7 +119,7 @@ const EmojiIconPicker: React.FC<Props> = ({
                       {emojis.map((emoji) => (
                         <button
                           type="button"
-                          className="h-4 w-4 ml-1 select-none text-base hover:bg-hover-gray flex justify-center items-center"
+                          className="h-4 w-4 mb-1 select-none text-sm hover:bg-brand-surface-2 flex items-center"
                           key={emoji}
                           onClick={() => {
                             onChange(emoji);
@@ -184,7 +184,7 @@ const EmojiIconPicker: React.FC<Props> = ({
                       {icons.material_rounded.map((icon) => (
                         <button
                           type="button"
-                          className="h-4 w-4 mb-1 select-none text-lg hover:bg-hover-gray flex items-center"
+                          className="h-4 w-4 mb-1 select-none text-lg hover:bg-brand-surface-2 flex items-center"
                           key={icon.name}
                           onClick={() => {
                             if (onIconsClick) onIconsClick(icon.name);
diff --git a/apps/app/components/integration/single-integration-card.tsx b/apps/app/components/integration/single-integration-card.tsx
index 824ea0b9b28..0f1819bb96d 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 bg-white p-5">
+    <div className="flex items-center justify-between gap-2 rounded-[10px] border border-brand-base bg-brand-surface-2 p-5">
       <div className="flex items-start gap-4">
         <div className="h-12 w-12 flex-shrink-0">
           <Image
diff --git a/apps/app/components/issues/activity.tsx b/apps/app/components/issues/activity.tsx
index 36fd19b42a2..974ace9f450 100644
--- a/apps/app/components/issues/activity.tsx
+++ b/apps/app/components/issues/activity.tsx
@@ -66,31 +66,31 @@ const activityDetails: {
   },
   modules: {
     message: "set the module to",
-    icon: <RectangleGroupIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+    icon: <RectangleGroupIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
   },
   state: {
     message: "set the state to",
-    icon: <Squares2X2Icon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+    icon: <Squares2X2Icon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
   },
   priority: {
     message: "set the priority to",
-    icon: <ChartBarIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+    icon: <ChartBarIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
   },
   name: {
     message: "set the name to",
-    icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+    icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
   },
   description: {
     message: "updated the description.",
-    icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+    icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
   },
   target_date: {
     message: "set the due date to",
-    icon: <CalendarDaysIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+    icon: <CalendarDaysIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
   },
   parent: {
     message: "set the parent to",
-    icon: <UserIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+    icon: <UserIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
   },
   estimate: {
     message: "updated the estimate",
@@ -255,7 +255,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
             }
 
             value = (
-              <span className="relative inline-flex items-center rounded-full px-2 py-0.5 text-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
+              <span className="relative inline-flex items-center rounded-full px-2 py-0.5 text-xs border border-brand-base">
                 <span className="absolute flex flex-shrink-0 items-center justify-center">
                   <span
                     className="h-1.5 w-1.5 rounded-full"
@@ -265,7 +265,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
                     aria-hidden="true"
                   />
                 </span>
-                <span className="ml-3 font-medium text-gray-900">{name}</span>
+                <span className="ml-3 font-medium text-brand-base">{name}</span>
               </span>
             );
           } else if (activityItem.field === "assignees") {
@@ -298,7 +298,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
                 <div className="relative pb-1">
                   {issueActivities.length > 1 && activityItemIdx !== issueActivities.length - 1 ? (
                     <span
-                      className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-gray-200"
+                      className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-surface-2"
                       aria-hidden="true"
                     />
                   ) : null}
@@ -307,7 +307,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
                       <div>
                         <div className="relative px-1.5">
                           <div className="mt-1.5">
-                            <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-gray-100 ring-white">
+                            <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-1 ring-white">
                               {activityItem.field ? (
                                 activityDetails[activityItem.field as keyof typeof activityDetails]
                                   ?.icon
@@ -332,7 +332,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
                         </div>
                       </div>
                       <div className="min-w-0 flex-1 py-3">
-                        <div className="text-xs text-gray-500">
+                        <div className="text-xs text-brand-secondary">
                           <span className="text-gray font-medium">
                             {activityItem.actor_detail.first_name}
                             {activityItem.actor_detail.is_bot
@@ -340,7 +340,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
                               : " " + activityItem.actor_detail.last_name}
                           </span>
                           <span> {action} </span>
-                          <span className="text-xs font-medium text-gray-900"> {value} </span>
+                          <span className="text-xs font-medium text-brand-base"> {value} </span>
                           <span className="whitespace-nowrap">
                             {timeAgo(activityItem.created_at)}
                           </span>
diff --git a/apps/app/components/issues/comment/add-comment.tsx b/apps/app/components/issues/comment/add-comment.tsx
index 307b4b0b487..620b6054346 100644
--- a/apps/app/components/issues/comment/add-comment.tsx
+++ b/apps/app/components/issues/comment/add-comment.tsx
@@ -10,7 +10,7 @@ import { useForm, Controller } from "react-hook-form";
 // services
 import issuesServices from "services/issues.service";
 // ui
-import { Loader } from "components/ui";
+import { Loader, SecondaryButton } from "components/ui";
 // helpers
 import { debounce } from "helpers/common.helper";
 // types
@@ -83,9 +83,9 @@ export const AddComment: React.FC = () => {
   );
 
   return (
-    <div className="space-y-5">
+    <div>
       <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="issue-comments-section">
+        <div className="issue-comments-section" >
           <Controller
             name="comment_html"
             control={control}
@@ -101,13 +101,9 @@ export const AddComment: React.FC = () => {
             )}
           />
 
-          <button
-            type="submit"
-            disabled={isSubmitting}
-            className="rounded-md bg-gray-300 p-2 px-4 text-sm text-black hover:bg-gray-300 mt-4"
-          >
+          <SecondaryButton type="submit" disabled={isSubmitting} className="mt-2">
             {isSubmitting ? "Adding..." : "Comment"}
-          </button>
+          </SecondaryButton>
         </div>
       </form>
     </div>
diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx
index 9cab65531e4..4691ad70564 100644
--- a/apps/app/components/issues/comment/comment-card.tsx
+++ b/apps/app/components/issues/comment/comment-card.tsx
@@ -67,7 +67,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
           </div>
         )}
 
-        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-white px-0.5 py-px">
+        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-brand-surface-2 px-0.5 py-px">
           <ChatBubbleLeftEllipsisIcon className="h-3.5 w-3.5 text-gray-400" aria-hidden="true" />
         </span>
       </div>
@@ -77,7 +77,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
             {comment.actor_detail.first_name}
             {comment.actor_detail.is_bot ? "Bot" : " " + comment.actor_detail.last_name}
           </div>
-          <p className="mt-0.5 text-xs text-gray-500">Commented {timeAgo(comment.created_at)}</p>
+          <p className="mt-0.5 text-xs text-brand-secondary">Commented {timeAgo(comment.created_at)}</p>
         </div>
         <div className="issue-comments-section p-0">
           {isEditing ? (
@@ -117,7 +117,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
               editable={false}
               onBlur={() => ({})}
               noBorder
-              customClassName="text-xs bg-gray-100"
+              customClassName="text-xs bg-brand-surface-1"
             />
           )}
         </div>
diff --git a/apps/app/components/issues/delete-issue-modal.tsx b/apps/app/components/issues/delete-issue-modal.tsx
index e161e52a1fd..4fb5f92eaca 100644
--- a/apps/app/components/issues/delete-issue-modal.tsx
+++ b/apps/app/components/issues/delete-issue-modal.tsx
@@ -88,7 +88,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -102,7 +102,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 bg-white 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 bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-100 p-4">
@@ -116,7 +116,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
                     </span>
                   </div>
                   <span>
-                    <p className="break-all text-sm leading-7 text-gray-500">
+                    <p className="break-all text-sm leading-7 text-brand-secondary">
                       Are you sure you want to delete issue{" "}
                       <span className="break-all font-semibold">
                         {data?.project_detail.identifier}-{data?.sequence_id}
diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx
index 95962b92919..b568fb0160b 100644
--- a/apps/app/components/issues/description-form.tsx
+++ b/apps/app/components/issues/description-form.tsx
@@ -115,7 +115,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
           role="textbox"
         />
         {characterLimit && (
-          <div className="pointer-events-none absolute bottom-0 right-0 z-[2] rounded bg-white p-1 text-xs">
+          <div className="pointer-events-none absolute bottom-0 right-0 z-[2] rounded bg-brand-surface-2 p-1 text-xs">
             <span
               className={`${
                 watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
@@ -158,7 +158,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
         )}
       />
       <div
-        className={`absolute -bottom-8 right-0 text-sm text-gray-500 ${
+        className={`absolute -bottom-8 right-0 text-sm text-brand-secondary ${
           isSubmitting ? "block" : "hidden"
         }`}
       >
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index 257a6a4e185..8556c255174 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -216,12 +216,12 @@ export const IssueForm: FC<IssueFormProps> = ({
                 />
               )}
             />
-            <h3 className="text-xl font-semibold leading-6 text-gray-900">
+            <h3 className="text-xl font-semibold leading-6 text-brand-base">
               {status ? "Update" : "Create"} Issue
             </h3>
           </div>
           {watch("parent") && watch("parent") !== "" ? (
-            <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-gray-100 p-2 text-xs">
+            <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-1 p-2 text-xs">
               <div className="flex items-center gap-2">
                 <span
                   className="block h-1.5 w-1.5 rounded-full"
@@ -267,7 +267,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                 />
                 {mostSimilarIssue && (
                   <div className="flex items-center gap-x-2">
-                    <p className="text-sm text-gray-500">
+                    <p className="text-sm text-brand-secondary">
                       <Link
                         href={`/${workspaceSlug}/projects/${projectId}/issues/${mostSimilarIssue.id}`}
                       >
@@ -283,7 +283,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                     </p>
                     <button
                       type="button"
-                      className="text-sm text-blue-500"
+                      className="text-sm text-brand-accent"
                       onClick={() => {
                         setMostSimilarIssue(undefined);
                       }}
@@ -298,7 +298,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                   {issueName && issueName !== "" && (
                     <button
                       type="button"
-                      className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100 ${
+                      className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${
                         iAmFeelingLucky ? "cursor-wait" : ""
                       }`}
                       onClick={handleAutoGenerateDescription}
@@ -315,7 +315,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                   )}
                   <button
                     type="button"
-                    className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100"
+                    className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
                     onClick={() => setGptAssistantModal((prevData) => !prevData)}
                   >
                     <SparklesIcon className="h-4 w-4" />
@@ -444,7 +444,7 @@ export const IssueForm: FC<IssueFormProps> = ({
             </div>
           </div>
         </div>
-        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t px-5 pt-5">
+        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-brand-base px-5 pt-5">
           <div
             className="flex cursor-pointer items-center gap-1"
             onClick={() => setCreateMore((prevData) => !prevData)}
@@ -453,7 +453,7 @@ export const IssueForm: FC<IssueFormProps> = ({
             <button
               type="button"
               className={`pointer-events-none relative inline-flex h-4 w-7 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent ${
-                createMore ? "bg-theme" : "bg-gray-300"
+                createMore ? "bg-brand-accent" : "bg-gray-300"
               } transition-colors duration-300 ease-in-out focus:outline-none`}
               role="switch"
               aria-checked="false"
@@ -463,7 +463,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                 aria-hidden="true"
                 className={`pointer-events-none inline-block h-3 w-3 ${
                   createMore ? "translate-x-3" : "translate-x-0"
-                } transform rounded-full bg-white shadow ring-0 transition duration-300 ease-in-out`}
+                } transform rounded-full bg-brand-surface-2 shadow ring-0 transition duration-300 ease-in-out`}
               />
             </button>
           </div>
diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx
index 47fe6e87147..1b74664b14f 100644
--- a/apps/app/components/issues/modal.tsx
+++ b/apps/app/components/issues/modal.tsx
@@ -219,7 +219,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -233,7 +233,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 bg-white p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <IssueForm
                   issues={issues ?? []}
                   handleFormSubmit={handleFormSubmit}
diff --git a/apps/app/components/issues/my-issues-list-item.tsx b/apps/app/components/issues/my-issues-list-item.tsx
index bf8f1d39cfa..ebf06371918 100644
--- a/apps/app/components/issues/my-issues-list-item.tsx
+++ b/apps/app/components/issues/my-issues-list-item.tsx
@@ -82,7 +82,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
   const isNotAllowed = false;
 
   return (
-    <div className="border-b border-gray-300 last:border-b-0 mx-6">
+    <div className="border-b border-brand-base last:border-b-0 mx-6">
       <div key={issue.id} className="flex items-center justify-between gap-2 py-3">
         <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
           <a className="group relative flex items-center gap-2">
@@ -97,7 +97,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
               </Tooltip>
             )}
             <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-              <span className="break-all text-sm text-gray-800">
+              <span className="break-all text-sm text-brand-base">
                 {truncateText(issue.name, 50)}
               </span>
             </Tooltip>
@@ -127,7 +127,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
             />
           )}
           {properties.sub_issue_count && (
-            <div className="flex items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
+            <div className="flex items-center gap-1 rounded-md border border-brand-base px-3 py-1.5 text-xs shadow-sm">
               {issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
             </div>
           )}
@@ -136,7 +136,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 px-2 py-0.5 text-xs"
+                  className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
                 >
                   <span
                     className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
diff --git a/apps/app/components/issues/parent-issues-list-modal.tsx b/apps/app/components/issues/parent-issues-list-modal.tsx
index 27cdcf03966..3b1c18b80b2 100644
--- a/apps/app/components/issues/parent-issues-list-modal.tsx
+++ b/apps/app/components/issues/parent-issues-list-modal.tsx
@@ -71,17 +71,17 @@ 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 divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
                 {multiple ? (
                   <>
                     <Combobox value={value} onChange={() => ({})} multiple>
                       <div className="relative m-1">
                         <MagnifyingGlassIcon
-                          className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
+                          className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
                           aria-hidden="true"
                         />
                         <Combobox.Input
-                          className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                          className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
                           placeholder="Search..."
                           onChange={(e) => setQuery(e.target.value)}
                           displayValue={() => ""}
@@ -95,7 +95,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                         {filteredIssues.length > 0 && (
                           <li className="p-2">
                             {query === "" && (
-                              <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
+                              <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
                                 {title}
                               </h2>
                             )}
@@ -106,7 +106,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                                   value={issue.id}
                                   className={({ active }) =>
                                     `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
-                                      active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
+                                      active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
                                     }`
                                   }
                                 >
@@ -119,7 +119,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                                           backgroundColor: issue.state_detail.color,
                                         }}
                                       />
-                                      <span className="flex-shrink-0 text-xs text-gray-500">
+                                      <span className="flex-shrink-0 text-xs text-brand-secondary">
                                         {issue.project_detail?.identifier}-{issue.sequence_id}
                                       </span>{" "}
                                       {issue.id}
@@ -135,10 +135,10 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                       {query !== "" && filteredIssues.length === 0 && (
                         <div className="py-14 px-6 text-center sm:px-14">
                           <RectangleStackIcon
-                            className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
+                            className="mx-auto h-6 w-6 text-brand-base text-opacity-40"
                             aria-hidden="true"
                           />
-                          <p className="mt-4 text-sm text-gray-900">
+                          <p className="mt-4 text-sm text-brand-base">
                             We couldn{"'"}t find any issue with that term. Please try again.
                           </p>
                         </div>
@@ -153,11 +153,11 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                   <Combobox value={value} onChange={onChange}>
                     <div className="relative m-1">
                       <MagnifyingGlassIcon
-                        className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
+                        className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
                         aria-hidden="true"
                       />
                       <Combobox.Input
-                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
                         placeholder="Search..."
                         onChange={(e) => setQuery(e.target.value)}
                         displayValue={() => ""}
@@ -171,7 +171,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                       {filteredIssues.length > 0 ? (
                         <li className="p-2">
                           {query === "" && (
-                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
+                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
                               {title}
                             </h2>
                           )}
@@ -182,7 +182,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                                 value={issue.id}
                                 className={({ active }) =>
                                   `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
-                                    active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
+                                    active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
                                   }`
                                 }
                                 onClick={() => handleClose()}
@@ -194,7 +194,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                                       backgroundColor: issue.state_detail.color,
                                     }}
                                   />
-                                  <span className="flex-shrink-0 text-xs text-gray-500">
+                                  <span className="flex-shrink-0 text-xs text-brand-secondary">
                                     {issue.project_detail?.identifier}-{issue.sequence_id}
                                   </span>{" "}
                                   {issue.name}
@@ -206,9 +206,9 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                       ) : (
                         <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
                           <LayerDiagonalIcon height="56" width="56" />
-                          <h3 className="text-gray-500">
+                          <h3 className="text-brand-secondary">
                             No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
+                            <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
                           </h3>
                         </div>
                       )}
diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx
index 1d06f3f0ec6..5c1d7c1b428 100644
--- a/apps/app/components/issues/select/assignee.tsx
+++ b/apps/app/components/issues/select/assignee.tsx
@@ -54,15 +54,15 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
       onChange={onChange}
       options={options}
       label={
-        <div className="flex items-center gap-2 text-gray-500">
+        <div className="flex items-center gap-2 text-brand-secondary">
           {value && value.length > 0 && Array.isArray(value) ? (
             <div className="flex items-center justify-center gap-2">
               <AssigneesList userIds={value} length={3} showLength={true} />
             </div>
           ) : (
             <div className="flex items-center justify-center gap-2">
-              <UserGroupIcon className="h-4 w-4 text-gray-500" />
-              <span className="text-gray-500">Assignee</span>
+              <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
+              <span className="text-brand-secondary">Assignee</span>
             </div>
           )}
         </div>
diff --git a/apps/app/components/issues/select/date.tsx b/apps/app/components/issues/select/date.tsx
index 438291a2d64..3bb8c1bed02 100644
--- a/apps/app/components/issues/select/date.tsx
+++ b/apps/app/components/issues/select/date.tsx
@@ -18,11 +18,11 @@ export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
       <>
         <Popover.Button
           className={({ open }) =>
-            `flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200 
+            `flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200 
               ${
                 open
-                  ? "border-theme bg-theme/5 outline-none ring-1 ring-theme "
-                  : "hover:bg-theme/5 "
+                  ? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
+                  : "hover:bg-brand-accent/5 "
               }`
           }
         >
diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx
index 2adeaa222d2..f5b023280df 100644
--- a/apps/app/components/issues/select/label.tsx
+++ b/apps/app/components/issues/select/label.tsx
@@ -60,11 +60,11 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
         <>
           <Combobox.Button
             className={({ open }) =>
-              `flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200 
+              `flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200 
               ${
                 open
-                  ? "border-theme bg-theme/5 outline-none ring-1 ring-theme "
-                  : "hover:bg-theme/5 "
+                  ? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
+                  : "hover:bg-brand-accent/5 "
               }`
             }
           >
@@ -78,8 +78,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
               </span>
             ) : (
               <span className="flex items-center justify-center gap-2 px-3  py-1.5 text-xs">
-                <TagIcon className="h-3 w-3 text-gray-500" />
-                <span className=" text-gray-500">Label</span>
+                <TagIcon className="h-3 w-3 text-brand-secondary" />
+                <span className=" text-brand-secondary">Label</span>
               </span>
             )}
           </Combobox.Button>
@@ -96,12 +96,12 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
           >
             <Combobox.Options
               className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
-                bg-white px-2 py-2 text-xs shadow-md focus:outline-none`}
+                bg-brand-surface-2 px-2 py-2 text-xs shadow-md focus:outline-none`}
             >
-              <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2">
-                <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
+              <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-brand-surface-1 px-2">
+                <MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" />
                 <Combobox.Input
-                  className="w-full  bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
+                  className="w-full  bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
                   onChange={(event) => setQuery(event.target.value)}
                   placeholder="Search for label..."
                   displayValue={(assigned: any) => assigned?.name}
@@ -120,7 +120,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                               key={label.id}
                               className={({ active }) =>
                                 `${
-                                  active ? "bg-gray-200" : ""
+                                  active ? "bg-brand-surface-2" : ""
                                 } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
                               }
                               value={label.id}
@@ -150,8 +150,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                           );
                       } else
                         return (
-                          <div className="border-y border-gray-400 bg-gray-50">
-                            <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-gray-900">
+                          <div className="border-y border-brand-base bg-brand-surface-2">
+                            <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-brand-base">
                               <RectangleGroupIcon className="h-3 w-3" /> {label.name}
                             </div>
                             <div>
@@ -160,7 +160,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                                   key={child.id}
                                   className={({ active }) =>
                                     `${
-                                      active ? "bg-gray-200" : ""
+                                      active ? "bg-brand-surface-2" : ""
                                     } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
                                   }
                                   value={child.id}
@@ -192,14 +192,14 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                         );
                     })
                   ) : (
-                    <p className="px-2 text-xs text-gray-500">No labels found</p>
+                    <p className="px-2 text-xs text-brand-secondary">No labels found</p>
                   )
                 ) : (
-                  <p className="px-2 text-xs text-gray-500">Loading...</p>
+                  <p className="px-2 text-xs text-brand-secondary">Loading...</p>
                 )}
                 <button
                   type="button"
-                  className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-gray-200"
+                  className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
                   onClick={() => setIsOpen(true)}
                 >
                   <span className="flex items-center justify-start gap-1">
diff --git a/apps/app/components/issues/select/priority.tsx b/apps/app/components/issues/select/priority.tsx
index f912b31c0f7..89e07b4e60f 100644
--- a/apps/app/components/issues/select/priority.tsx
+++ b/apps/app/components/issues/select/priority.tsx
@@ -18,9 +18,9 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
     label={
       <div className="flex items-center justify-center gap-2 text-xs">
         <span className="flex items-center">
-          {getPriorityIcon(value, `text-xs ${value ? "" : "text-gray-500"}`)}
+          {getPriorityIcon(value, `text-xs ${value ? "" : "text-brand-secondary"}`)}
         </span>
-        <span className={`${value ? "text-gray-600" : "text-gray-500"} capitalize`}>
+        <span className={`${value ? "text-gray-600" : "text-brand-secondary"} capitalize`}>
           {value ?? "Priority"}
         </span>
       </div>
diff --git a/apps/app/components/issues/select/project.tsx b/apps/app/components/issues/select/project.tsx
index be35098e0d8..09ed5225c43 100644
--- a/apps/app/components/issues/select/project.tsx
+++ b/apps/app/components/issues/select/project.tsx
@@ -59,7 +59,7 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({
           <p className="text-gray-400">No projects found!</p>
         )
       ) : (
-        <div className="px-2 text-sm text-gray-500">Loading...</div>
+        <div className="px-2 text-sm text-brand-secondary">Loading...</div>
       )}
     </CustomSelect>
   );
diff --git a/apps/app/components/issues/select/state.tsx b/apps/app/components/issues/select/state.tsx
index f1fd1d22beb..1be797e0deb 100644
--- a/apps/app/components/issues/select/state.tsx
+++ b/apps/app/components/issues/select/state.tsx
@@ -56,7 +56,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
       onChange={onChange}
       options={options}
       label={
-        <div className="flex items-center gap-2 text-gray-500">
+        <div className="flex items-center gap-2 text-brand-secondary">
           {selectedOption ? (
             getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)
           ) : currentDefaultState ? (
@@ -70,7 +70,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
       footerOption={
         <button
           type="button"
-          className="flex w-full select-none items-center gap-2 rounded px-1 py-1.5 text-xs text-gray-500 hover:bg-hover-gray"
+          className="flex w-full select-none items-center gap-2 rounded px-1 py-1.5 text-xs text-brand-secondary hover:bg-brand-surface-2"
           onClick={() => setIsOpen(true)}
         >
           <PlusIcon className="h-4 w-4" aria-hidden="true" />
diff --git a/apps/app/components/issues/sidebar-select/assignee.tsx b/apps/app/components/issues/sidebar-select/assignee.tsx
index 34b9aac37a4..3653859c9b5 100644
--- a/apps/app/components/issues/sidebar-select/assignee.tsx
+++ b/apps/app/components/issues/sidebar-select/assignee.tsx
@@ -64,11 +64,11 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, userAu
         <CustomSearchSelect
           value={value}
           label={
-            <div className="flex items-center gap-2 text-gray-500">
+            <div className="flex items-center gap-2 text-brand-secondary">
               {value && value.length > 0 && Array.isArray(value) ? (
                 <div className="flex items-center justify-center gap-2 -my-0.5">
                   <AssigneesList userIds={value} length={3} showLength={false} />
-                  <span className="text-gray-500">{value.length} Assignees</span>
+                  <span className="text-brand-secondary">{value.length} Assignees</span>
                 </div>
               ) : (
                 "No assignees"
diff --git a/apps/app/components/issues/sidebar-select/blocked.tsx b/apps/app/components/issues/sidebar-select/blocked.tsx
index 62169222aa1..5165595f38b 100644
--- a/apps/app/components/issues/sidebar-select/blocked.tsx
+++ b/apps/app/components/issues/sidebar-select/blocked.tsx
@@ -115,7 +115,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
             ? watch("blocked_list").map((issue) => (
                 <div
                   key={issue}
-                  className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-white px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500 hover:bg-red-50"
+                  className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500 hover:bg-red-500/30"
                 >
                   <Link
                     href={`/${workspaceSlug}/projects/${projectId}/issues/${
@@ -176,7 +176,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
+                <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
                   <form>
                     <Combobox
                       onChange={(val: string) => {
@@ -191,12 +191,12 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
                     >
                       <div className="relative m-1">
                         <MagnifyingGlassIcon
-                          className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
+                          className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
                           aria-hidden="true"
                         />
                         <input
                           type="text"
-                          className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                          className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
                           placeholder="Search..."
                           onChange={(e) => setQuery(e.target.value)}
                         />
@@ -209,7 +209,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
                         {filteredIssues.length > 0 ? (
                           <li className="p-2">
                             {query === "" && (
-                              <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
+                              <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
                                 Select blocked issues
                               </h2>
                             )}
@@ -226,7 +226,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
                                       value={issue.id}
                                       className={({ active }) =>
                                         `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
-                                          active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
+                                          active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
                                         }`
                                       }
                                     >
@@ -244,7 +244,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
                                             backgroundColor: issue.state_detail.color,
                                           }}
                                         />
-                                        <span className="flex-shrink-0 text-xs text-gray-500">
+                                        <span className="flex-shrink-0 text-xs text-brand-secondary">
                                           {
                                             issues?.find((i) => i.id === issue.id)?.project_detail
                                               ?.identifier
@@ -262,9 +262,9 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
                         ) : (
                           <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
                             <LayerDiagonalIcon height="56" width="56" />
-                            <h3 className="text-gray-500">
+                            <h3 className="text-brand-secondary">
                               No issues found. Create a new issue with{" "}
-                              <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
+                              <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
                             </h3>
                           </div>
                         )}
@@ -288,8 +288,8 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
         <button
           type="button"
           className={`flex w-full ${
-            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
-          } items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
+            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
+          } items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`}
           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 4dc24583016..37a9a4560be 100644
--- a/apps/app/components/issues/sidebar-select/blocker.tsx
+++ b/apps/app/components/issues/sidebar-select/blocker.tsx
@@ -176,7 +176,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
+                <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
                   <Combobox
                     onChange={(val: string) => {
                       const selectedIssues = watchBlocker("blocker_issue_ids");
@@ -190,12 +190,12 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
                   >
                     <div className="relative m-1">
                       <MagnifyingGlassIcon
-                        className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
+                        className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
                         aria-hidden="true"
                       />
                       <input
                         type="text"
-                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
                         placeholder="Search..."
                         onChange={(e) => setQuery(e.target.value)}
                       />
@@ -208,7 +208,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
                       {filteredIssues.length > 0 ? (
                         <li className="p-2">
                           {query === "" && (
-                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
+                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
                               Select blocker issues
                             </h2>
                           )}
@@ -225,7 +225,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
                                     value={issue.id}
                                     className={({ active }) =>
                                       `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
-                                        active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
+                                        active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
                                       }`
                                     }
                                   >
@@ -243,14 +243,14 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
                                           backgroundColor: issue.state_detail.color,
                                         }}
                                       />
-                                      <span className="flex-shrink-0 text-xs text-gray-500">
+                                      <span className="flex-shrink-0 text-xs text-brand-secondary">
                                         {
                                           issues?.find((i) => i.id === issue.id)?.project_detail
                                             ?.identifier
                                         }
                                         -{issue.sequence_id}
                                       </span>
-                                      <span>{issue.name}</span>
+                                      <span className="text-brand-muted-1">{issue.name}</span>
                                     </div>
                                   </Combobox.Option>
                                 );
@@ -260,9 +260,9 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
                       ) : (
                         <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
                           <LayerDiagonalIcon height="56" width="56" />
-                          <h3 className="text-gray-500">
+                          <h3 className="text-brand-secondary">
                             No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
+                            <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
                           </h3>
                         </div>
                       )}
@@ -285,8 +285,8 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
         <button
           type="button"
           className={`flex w-full ${
-            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
-          } items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
+            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
+          } items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`}
           onClick={() => setIsBlockerModalOpen(true)}
           disabled={isNotAllowed}
         >
diff --git a/apps/app/components/issues/sidebar-select/cycle.tsx b/apps/app/components/issues/sidebar-select/cycle.tsx
index 9c72064e265..96a299b2bf1 100644
--- a/apps/app/components/issues/sidebar-select/cycle.tsx
+++ b/apps/app/components/issues/sidebar-select/cycle.tsx
@@ -70,7 +70,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
             <Tooltip position="left" tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : ""}`}>
               <span
                 className={`w-full max-w-[125px] truncate text-left sm:block ${
-                  issueCycle ? "" : "text-gray-900"
+                  issueCycle ? "" : "text-brand-base"
                 }`}
               >
                 {issueCycle ? truncateText(issueCycle.cycle_detail.name, 15) : "None"}
diff --git a/apps/app/components/issues/sidebar-select/module.tsx b/apps/app/components/issues/sidebar-select/module.tsx
index 501b59df7a1..a31957eaad5 100644
--- a/apps/app/components/issues/sidebar-select/module.tsx
+++ b/apps/app/components/issues/sidebar-select/module.tsx
@@ -69,7 +69,7 @@ export const SidebarModuleSelect: React.FC<Props> = ({
             <Tooltip position="left" tooltipContent={`${modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}`}>
             <span
               className={`w-full max-w-[125px] truncate text-left sm:block ${
-                issueModule ? "" : "text-gray-900"
+                issueModule ? "" : "text-brand-base"
               }`}
             >
               {truncateText(`${modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}`, 15)}
diff --git a/apps/app/components/issues/sidebar-select/parent.tsx b/apps/app/components/issues/sidebar-select/parent.tsx
index f2458a53ef3..8103e727dd1 100644
--- a/apps/app/components/issues/sidebar-select/parent.tsx
+++ b/apps/app/components/issues/sidebar-select/parent.tsx
@@ -78,8 +78,8 @@ export const SidebarParentSelect: React.FC<Props> = ({
         <button
           type="button"
           className={`flex w-full ${
-            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
-          } items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
+            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
+          } items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`}
           onClick={() => setIsParentModalOpen(true)}
           disabled={isNotAllowed}
         >
diff --git a/apps/app/components/issues/sidebar-select/priority.tsx b/apps/app/components/issues/sidebar-select/priority.tsx
index ba89b4401d8..79e90d32334 100644
--- a/apps/app/components/issues/sidebar-select/priority.tsx
+++ b/apps/app/components/issues/sidebar-select/priority.tsx
@@ -30,7 +30,7 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, userAu
           label={
             <span
               className={`flex items-center gap-2 text-left capitalize ${
-                value ? "" : "text-gray-900"
+                value ? "" : "text-brand-base"
               }`}
             >
               {getPriorityIcon(value && value !== "" ? value ?? "" : "None", "text-sm")}
diff --git a/apps/app/components/issues/sidebar-select/state.tsx b/apps/app/components/issues/sidebar-select/state.tsx
index 74aa1f1e780..a8fbba42922 100644
--- a/apps/app/components/issues/sidebar-select/state.tsx
+++ b/apps/app/components/issues/sidebar-select/state.tsx
@@ -50,7 +50,7 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, userAuth
       <div className="sm:basis-1/2">
         <CustomSelect
           label={
-            <div className={`flex items-center gap-2 text-left ${value ? "" : "text-gray-900"}`}>
+            <div className={`flex items-center gap-2 text-left ${value ? "" : "text-brand-base"}`}>
               {getStateGroupIcon(
                 selectedState?.group ?? "backlog",
                 "16",
diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
index 09eef138ee0..f82b9ca5459 100644
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -229,7 +229,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
         isOpen={deleteIssueModal}
         data={issueDetail ?? null}
       />
-      <div className="sticky top-5 w-full divide-y-2 divide-gray-100">
+      <div className="sticky top-5 w-full divide-y-2 divide-brand-base">
         <div className="flex items-center justify-between pb-3">
           <h4 className="text-sm font-medium">
             {issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
@@ -237,7 +237,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
           <div className="flex flex-wrap items-center gap-2">
             <button
               type="button"
-              className="rounded-md border p-2 shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+              className="rounded-md border border-brand-base p-2 shadow-sm duration-300 hover:bg-brand-surface-1 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent"
               onClick={handleCopyText}
             >
               <LinkIcon className="h-3.5 w-3.5" />
@@ -245,7 +245,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
             {!isNotAllowed && (
               <button
                 type="button"
-                className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-50 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-500/30 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent"
                 onClick={() => setDeleteIssueModal(true)}
               >
                 <TrashIcon className="h-3.5 w-3.5" />
@@ -253,7 +253,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
             )}
           </div>
         </div>
-        <div className="divide-y-2 divide-gray-100">
+        <div className="divide-y-2 divide-brand-base">
           <div className="py-1">
             <Controller
               control={control}
@@ -316,14 +316,14 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 issueDetail?.parent_detail ? (
                   <button
                     type="button"
-                    className="flex items-center gap-2 rounded bg-gray-100 px-3 py-2 text-xs"
+                    className="flex items-center gap-2 rounded bg-brand-surface-1 px-3 py-2 text-xs"
                     onClick={() => submitChanges({ parent: null })}
                   >
                     {issueDetail.parent_detail?.name}
                     <XMarkIcon className="h-3 w-3" />
                   </button>
                 ) : (
-                  <div className="inline-block rounded bg-gray-100 px-3 py-2 text-xs">
+                  <div className="inline-block rounded bg-brand-surface-1 px-3 py-2 text-xs">
                     No parent selected
                   </div>
                 )
@@ -395,7 +395,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                     return (
                       <span
                         key={label.id}
-                        className="group flex cursor-pointer items-center gap-1 rounded-2xl border px-1 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-brand-base px-1 py-0.5 text-xs hover:border-red-500 hover:bg-red-500/30"
                         onClick={() => {
                           const updatedLabels = watchIssue("labels_list")?.filter(
                             (l) => l !== labelId
@@ -435,8 +435,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                             className={`flex ${
                               isNotAllowed
                                 ? "cursor-not-allowed"
-                                : "cursor-pointer hover:bg-gray-100"
-                            } items-center gap-2 rounded-2xl border px-2 py-0.5 text-xs`}
+                                : "cursor-pointer hover:bg-brand-surface-1"
+                            } items-center gap-2 rounded-2xl border border-brand-base px-2 py-0.5 text-xs`}
                           >
                             Select Label
                           </Listbox.Button>
@@ -448,7 +448,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-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                            <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-brand-surface-2 py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                               <div className="py-1">
                                 {issueLabels ? (
                                   issueLabels.length > 0 ? (
@@ -463,9 +463,9 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                             <Listbox.Option
                                               key={label.id}
                                               className={({ active, selected }) =>
-                                                `${active || selected ? "bg-indigo-50" : ""} ${
+                                                `${active || selected ? "bg-brand-surface-1" : ""} ${
                                                   selected ? "font-medium" : ""
-                                                } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
+                                                } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-brand-base`
                                               }
                                               value={label.id}
                                             >
@@ -483,8 +483,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                           );
                                       } else
                                         return (
-                                          <div className="border-y border-gray-400 bg-gray-50">
-                                            <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-gray-900">
+                                          <div className="border-y border-brand-base bg-brand-surface-1">
+                                            <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-brand-base">
                                               <RectangleGroupIcon className="h-3 w-3" />{" "}
                                               {label.name}
                                             </div>
@@ -495,7 +495,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                                   className={({ active, selected }) =>
                                                     `${active || selected ? "bg-indigo-50" : ""} ${
                                                       selected ? "font-medium" : ""
-                                                    } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
+                                                    } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-brand-base`
                                                   }
                                                   value={child.id}
                                                 >
@@ -530,8 +530,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                   <button
                     type="button"
                     className={`flex ${
-                      isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
-                    } items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs`}
+                      isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
+                    } items-center gap-1 rounded-2xl border border-brand-base  px-2 py-0.5 text-xs`}
                     onClick={() => setCreateLabelForm((prevData) => !prevData)}
                   >
                     {createLabelForm ? (
@@ -555,7 +555,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                   {({ open }) => (
                     <>
                       <Popover.Button
-                        className={`flex items-center gap-1 rounded-md bg-white p-1 outline-none focus:ring-2 focus:ring-indigo-500`}
+                        className={`flex items-center gap-1 rounded-md bg-brand-surface-2 p-1 outline-none focus:ring-2 focus:ring-brand-accent`}
                       >
                         {watch("color") && watch("color") !== "" && (
                           <span
@@ -627,7 +627,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
             {!isNotAllowed && (
               <button
                 type="button"
-                className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100"
+                className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1"
                 onClick={() => setLinkModal(true)}
               >
                 <PlusIcon className="h-4 w-4" />
diff --git a/apps/app/components/issues/sub-issues-list.tsx b/apps/app/components/issues/sub-issues-list.tsx
index 0c9bd879efc..bde0b0e979d 100644
--- a/apps/app/components/issues/sub-issues-list.tsx
+++ b/apps/app/components/issues/sub-issues-list.tsx
@@ -173,7 +173,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
           {({ open }) => (
             <>
               <div className="flex items-center justify-between">
-                <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100">
+                <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-brand-surface-1">
                   <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
                   Sub-issues <span className="ml-1 text-gray-600">{subIssues.length}</span>
                 </Disclosure.Button>
@@ -181,7 +181,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
                   <div className="flex items-center">
                     <button
                       type="button"
-                      className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
+                      className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-brand-surface-1"
                       onClick={handleCreateIssueModal}
                     >
                       <PlusIcon className="h-3 w-3" />
@@ -210,7 +210,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
                       key={issue.id}
                       href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
                     >
-                      <a className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-gray-100">
+                      <a className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-brand-surface-1">
                         <div className="flex items-center gap-2 rounded text-xs">
                           <span
                             className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
@@ -234,7 +234,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
                               handleSubIssueRemove(issue.id);
                             }}
                           >
-                            <XMarkIcon className="h-4 w-4 text-gray-500 hover:text-gray-900" />
+                            <XMarkIcon className="h-4 w-4 text-brand-secondary hover:text-brand-base" />
                           </button>
                         )}
                       </a>
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
index 1429555d999..64199b901c3 100644
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/apps/app/components/issues/view-select/assignee.tsx
@@ -103,17 +103,17 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
           <div
             className={`flex ${
               isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-            } items-center gap-2 text-gray-500`}
+            } items-center gap-2 text-brand-secondary`}
           >
             {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
               <div className="flex items-center justify-center gap-2 -my-0.5">
                 <AssigneesList userIds={issue.assignees} length={3} showLength={false} />
-                <span className="text-gray-500">{issue.assignees.length} Assignees</span>
+                <span className="text-brand-secondary">{issue.assignees.length} Assignees</span>
               </div>
             ) : (
               <div className="flex items-center justify-center gap-2">
-                <UserGroupIcon className="h-4 w-4 text-gray-500" />
-                <span className="text-gray-500">Assignee</span>
+                <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
+                <span className="text-brand-secondary">Assignee</span>
               </div>
             )}
           </div>
diff --git a/apps/app/components/issues/view-select/state.tsx b/apps/app/components/issues/view-select/state.tsx
index 34ce8c82c5d..4a6482cdef4 100644
--- a/apps/app/components/issues/view-select/state.tsx
+++ b/apps/app/components/issues/view-select/state.tsx
@@ -97,7 +97,7 @@ export const ViewStateSelect: React.FC<Props> = ({
           tooltipHeading="State"
           tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")}
         >
-          <div className="flex items-center gap-2 text-gray-500">
+          <div className="flex items-center gap-2 text-brand-secondary">
             {selectedOption &&
               getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)}
             {selectedOption?.name ?? "State"}
diff --git a/apps/app/components/labels/create-label-modal.tsx b/apps/app/components/labels/create-label-modal.tsx
index e07de48f568..c186cbd7cd7 100644
--- a/apps/app/components/labels/create-label-modal.tsx
+++ b/apps/app/components/labels/create-label-modal.tsx
@@ -84,7 +84,7 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -98,10 +98,10 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-white 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 bg-brand-surface-1 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
                       Create Label
                     </Dialog.Title>
                     <div className="mt-8 flex items-center gap-2">
@@ -109,8 +109,8 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                         {({ open, close }) => (
                           <>
                             <Popover.Button
-                              className={`group inline-flex items-center rounded-sm bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
-                                open ? "text-gray-900" : "text-gray-500"
+                              className={`group inline-flex items-center rounded-sm bg-brand-surface-2 text-base font-medium hover:text-brand-base focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
+                                open ? "text-brand-base" : "text-brand-secondary"
                               }`}
                             >
                               {watch("color") && watch("color") !== "" && (
@@ -122,7 +122,7 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                                 />
                               )}
                               <ChevronDownIcon
-                                className={`ml-2 h-5 w-5 group-hover:text-gray-500 ${
+                                className={`ml-2 h-5 w-5 group-hover:text-brand-secondary ${
                                   open ? "text-gray-600" : "text-gray-400"
                                 }`}
                                 aria-hidden="true"
diff --git a/apps/app/components/labels/create-update-label-inline.tsx b/apps/app/components/labels/create-update-label-inline.tsx
index 21c70f31c91..70c87bc1c22 100644
--- a/apps/app/components/labels/create-update-label-inline.tsx
+++ b/apps/app/components/labels/create-update-label-inline.tsx
@@ -108,18 +108,18 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
 
   return (
     <div
-      className={`flex items-center gap-2 scroll-m-8 rounded-[10px] border bg-white p-5 ${
+      className={`flex items-center gap-2 scroll-m-8 rounded-[10px] border border-brand-base bg-brand-surface-2 p-5 ${
         labelForm ? "" : "hidden"
       }`}
       ref={ref}
     >
       <div className="h-8 w-8 flex-shrink-0">
-        <Popover className="relative z-10 flex h-full w-full items-center justify-center rounded-xl bg-gray-200">
+        <Popover className="relative z-10 flex h-full w-full items-center justify-center rounded-xl bg-brand-surface-2">
           {({ open }) => (
             <>
               <Popover.Button
-                className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
-                  open ? "text-gray-900" : "text-gray-500"
+                className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-brand-accent focus:ring-offset-2 ${
+                  open ? "text-brand-base" : "text-brand-secondary"
                 }`}
               >
                 {watch("color") && watch("color") !== "" && (
diff --git a/apps/app/components/labels/labels-list-modal.tsx b/apps/app/components/labels/labels-list-modal.tsx
index b2c687380c7..37862888dc1 100644
--- a/apps/app/components/labels/labels-list-modal.tsx
+++ b/apps/app/components/labels/labels-list-modal.tsx
@@ -89,15 +89,15 @@ 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 divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+            <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
               <Combobox>
                 <div className="relative m-1">
                   <MagnifyingGlassIcon
-                    className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
+                    className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
                     aria-hidden="true"
                   />
                   <Combobox.Input
-                    className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                    className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
                     placeholder="Search..."
                     onChange={(e) => setQuery(e.target.value)}
                   />
@@ -111,7 +111,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
                     <>
                       <li className="p-2">
                         {query === "" && (
-                          <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
+                          <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
                             Labels
                           </h2>
                         )}
@@ -132,7 +132,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
                                   }}
                                   className={({ active }) =>
                                     `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
-                                      active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
+                                      active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
                                     }`
                                   }
                                   onClick={() => {
@@ -159,10 +159,10 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
                 {query !== "" && filteredLabels.length === 0 && (
                   <div className="py-14 px-6 text-center sm:px-14">
                     <RectangleStackIcon
-                      className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
+                      className="mx-auto h-6 w-6 text-brand-base text-opacity-40"
                       aria-hidden="true"
                     />
-                    <p className="mt-4 text-sm text-gray-900">
+                    <p className="mt-4 text-sm text-brand-base">
                       We couldn{"'"}t find any label with that term. Please try again.
                     </p>
                   </div>
diff --git a/apps/app/components/labels/single-label-group.tsx b/apps/app/components/labels/single-label-group.tsx
index d41b8508e36..c5e5f91dba5 100644
--- a/apps/app/components/labels/single-label-group.tsx
+++ b/apps/app/components/labels/single-label-group.tsx
@@ -66,7 +66,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
   };
 
   return (
-    <Disclosure as="div" className="rounded-[10px] border bg-white p-5 text-gray-900" defaultOpen>
+    <Disclosure as="div" className="rounded-[10px] border border-brand-base bg-brand-surface-1 p-5 text-brand-base" defaultOpen>
       {({ open }) => (
         <>
           <div className="flex cursor-pointer items-center justify-between gap-2">
@@ -74,7 +74,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
               <span>
                 <RectangleGroupIcon className="h-4 w-4" />
               </span>
-              <h6 className="font-medium text-gray-600">{label.name}</h6>
+              <h6 className="font-medium text-brand-base">{label.name}</h6>
             </div>
             <div className="flex items-center gap-2">
               <CustomMenu ellipsis>
@@ -100,7 +100,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
               <Disclosure.Button>
                 <span>
                   <ChevronDownIcon
-                    className={`h-4 w-4 text-gray-500 ${!open ? "rotate-90 transform" : ""}`}
+                    className={`h-4 w-4 text-brand-base ${!open ? "rotate-90 transform" : ""}`}
                   />
                 </span>
               </Disclosure.Button>
@@ -120,9 +120,9 @@ export const SingleLabelGroup: React.FC<Props> = ({
                 {labelChildren.map((child) => (
                   <div
                     key={child.id}
-                    className="group flex items-center justify-between rounded-md border p-2 text-sm"
+                    className="group flex items-center justify-between rounded-md border border-brand-base p-2 text-sm"
                   >
-                    <h5 className="flex items-center gap-3 text-gray-600">
+                    <h5 className="flex items-center gap-3 text-brand-base">
                       <span
                         className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
                         style={{
diff --git a/apps/app/components/labels/single-label.tsx b/apps/app/components/labels/single-label.tsx
index 201d97d58d8..93836e2773d 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 rounded-[10px] border bg-white p-5">
+  <div className="gap-2 space-y-3 divide-y divide-brand-base rounded-[10px]  border border-brand-base bg-brand-surface-1 p-5">
     <div className="flex items-center justify-between">
       <div className="flex items-center gap-3">
         <span
@@ -29,7 +29,7 @@ export const SingleLabel: React.FC<Props> = ({
             backgroundColor: label.color && label.color !== "" ? label.color : "#000",
           }}
         />
-        <h6 className="font-medium text-gray-600">{label.name}</h6>
+        <h6 className="font-medium text-brand-base">{label.name}</h6>
       </div>
       <CustomMenu ellipsis>
         <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
diff --git a/apps/app/components/modules/delete-module-modal.tsx b/apps/app/components/modules/delete-module-modal.tsx
index 70fca1916e8..77ed8dd4c29 100644
--- a/apps/app/components/modules/delete-module-modal.tsx
+++ b/apps/app/components/modules/delete-module-modal.tsx
@@ -77,7 +77,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -91,8 +91,8 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, 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 bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                       <ExclamationTriangleIcon
@@ -101,11 +101,11 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
                       />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
                         Delete Module
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-gray-500">
+                        <p className="text-sm text-brand-secondary">
                           Are you sure you want to delete module-{" "}
                           <span className="font-bold">{data?.name}</span>? All of the data related
                           to the module will be permanently removed. This action cannot be undone.
diff --git a/apps/app/components/modules/form.tsx b/apps/app/components/modules/form.tsx
index b1e56ce9052..fe1e557b70c 100644
--- a/apps/app/components/modules/form.tsx
+++ b/apps/app/components/modules/form.tsx
@@ -66,7 +66,7 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateModule)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-gray-900">
+        <h3 className="text-lg font-medium leading-6 text-brand-base">
           {status ? "Update" : "Create"} Module
         </h3>
         <div className="space-y-3">
@@ -170,7 +170,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 px-5 pt-5">
+      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-brand-base px-5 pt-5">
         <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
         <PrimaryButton type="submit" loading={isSubmitting || isDateValid ? false : true}>
           {status
diff --git a/apps/app/components/modules/modal.tsx b/apps/app/components/modules/modal.tsx
index b611f415b1c..d42a09ee783 100644
--- a/apps/app/components/modules/modal.tsx
+++ b/apps/app/components/modules/modal.tsx
@@ -125,7 +125,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -139,7 +139,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 bg-white 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 bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <ModuleForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/modules/select/select-lead.tsx b/apps/app/components/modules/select/select-lead.tsx
index 0d0e1ace1d6..96896146acc 100644
--- a/apps/app/components/modules/select/select-lead.tsx
+++ b/apps/app/components/modules/select/select-lead.tsx
@@ -56,11 +56,11 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
       options={options}
       value={value}
       label={
-        <div className="flex items-center gap-2 text-gray-500">
+        <div className="flex items-center gap-2 text-brand-secondary">
           {selectedOption ? (
             <Avatar user={selectedOption} />
           ) : (
-            <div className="h-4 w-4 rounded-full bg-white">
+            <div className="h-4 w-4 rounded-full bg-brand-surface-2">
               <Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
             </div>
           )}
diff --git a/apps/app/components/modules/select/select-members.tsx b/apps/app/components/modules/select/select-members.tsx
index 439753a9171..8d407f36a0a 100644
--- a/apps/app/components/modules/select/select-members.tsx
+++ b/apps/app/components/modules/select/select-members.tsx
@@ -51,16 +51,16 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
     <CustomSearchSelect
       value={value}
       label={
-        <div className="flex items-center gap-2 text-gray-500">
+        <div className="flex items-center gap-2 text-brand-secondary">
           {value && value.length > 0 && Array.isArray(value) ? (
             <div className="flex items-center justify-center gap-2">
               <AssigneesList userIds={value} length={3} showLength={false} />
-              <span className="text-gray-500">{value.length} Assignees</span>
+              <span className="text-brand-secondary">{value.length} Assignees</span>
             </div>
           ) : (
             <div className="flex items-center justify-center gap-2">
-              <UserGroupIcon className="h-4 w-4 text-gray-500" />
-              <span className="text-gray-500">Assignee</span>
+              <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
+              <span className="text-brand-secondary">Assignee</span>
             </div>
           )}
         </div>
diff --git a/apps/app/components/modules/sidebar-select/select-lead.tsx b/apps/app/components/modules/sidebar-select/select-lead.tsx
index bf45f614ef5..795d0f75c21 100644
--- a/apps/app/components/modules/sidebar-select/select-lead.tsx
+++ b/apps/app/components/modules/sidebar-select/select-lead.tsx
@@ -62,11 +62,11 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
         <CustomSearchSelect
           value={value}
           label={
-            <div className="flex items-center gap-2 text-gray-500">
+            <div className="flex items-center gap-2 text-brand-secondary">
               {selectedOption ? (
                 <Avatar user={selectedOption} />
               ) : (
-                <div className="h-5 w-5 rounded-full border-2 border-transparent bg-white">
+                <div className="h-5 w-5 rounded-full border-2 border-transparent bg-brand-surface-2">
                   <Image
                     src={User}
                     height="100%"
diff --git a/apps/app/components/modules/sidebar-select/select-members.tsx b/apps/app/components/modules/sidebar-select/select-members.tsx
index ba00f324645..c71a2c52808 100644
--- a/apps/app/components/modules/sidebar-select/select-members.tsx
+++ b/apps/app/components/modules/sidebar-select/select-members.tsx
@@ -58,11 +58,11 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
         <CustomSearchSelect
           value={value}
           label={
-            <div className="flex items-center gap-2 text-gray-500">
+            <div className="flex items-center gap-2 text-brand-secondary">
               {value && value.length > 0 && Array.isArray(value) ? (
                 <div className="flex items-center justify-center gap-2">
                   <AssigneesList userIds={value} length={3} showLength={false} />
-                  <span className="text-gray-500">{value.length} Assignees</span>
+                  <span className="text-brand-secondary">{value.length} Assignees</span>
                 </div>
               ) : (
                 "No members"
diff --git a/apps/app/components/modules/sidebar-select/select-status.tsx b/apps/app/components/modules/sidebar-select/select-status.tsx
index 2156b4357e3..5d5ac946468 100644
--- a/apps/app/components/modules/sidebar-select/select-status.tsx
+++ b/apps/app/components/modules/sidebar-select/select-status.tsx
@@ -33,7 +33,7 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
             label={
               <span
                 className={`flex items-center gap-2 text-left capitalize ${
-                  value ? "" : "text-gray-900"
+                  value ? "" : "text-brand-base"
                 }`}
               >
                 <span
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx
index 7811407dd05..aa08c5c6962 100644
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@@ -185,7 +185,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
       <div
         className={`fixed top-0 ${
           isOpen ? "right-0" : "-right-[24rem]"
-        } z-20 h-full w-[24rem] overflow-y-auto border-l bg-gray-50 py-5 duration-300`}
+        } z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-surface-2 py-5 duration-300`}
       >
         {module ? (
           <>
@@ -199,7 +199,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
                       <CustomSelect
                         customButton={
                           <span
-                            className={`flex cursor-pointer items-center rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-center text-sm capitalize text-gray-800 `}
+                            className={`flex cursor-pointer items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-center text-sm capitalize text-brand-muted-1 `}
                           >
                             {capitalizeFirstLetter(`${watch("status")}`)}
                           </span>
@@ -218,13 +218,13 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
                     )}
                   />
                 </div>
-                <div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-gray-800">
+                <div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-brand-muted-1">
                   <Popover className="flex h-full items-center  justify-center rounded-lg">
                     {({ open }) => (
                       <>
                         <Popover.Button
-                          className={`group flex h-full items-center gap-1 rounded border-[0.5px]  border-gray-200 bg-gray-100 px-2.5 py-1.5 text-gray-800   ${
-                            open ? "bg-gray-100" : ""
+                          className={`group flex h-full items-center gap-1 rounded border-[0.5px]  border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1   ${
+                            open ? "bg-brand-surface-1" : ""
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
@@ -271,8 +271,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
                     {({ open }) => (
                       <>
                         <Popover.Button
-                          className={`group flex items-center gap-1 rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-gray-800  ${
-                            open ? "bg-gray-100" : ""
+                          className={`group flex items-center gap-1 rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1  ${
+                            open ? "bg-brand-surface-1" : ""
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3 " />
@@ -319,7 +319,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
               <div className="flex flex-col gap-6 px-6 py-6 w-full">
                 <div className="flex flex-col items-start justify-start gap-2 w-full">
                   <div className="flex items-start justify-between gap-2 w-full  ">
-                    <h4 className="text-xl font-semibold text-gray-900">{module.name}</h4>
+                    <h4 className="text-xl font-semibold text-brand-base">{module.name}</h4>
                     <CustomMenu width="lg" ellipsis>
                       <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
                         <span className="flex items-center justify-start gap-2">
@@ -336,7 +336,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
                     </CustomMenu>
                   </div>
 
-                  <span className="whitespace-normal text-sm leading-5 text-black">
+                  <span className="whitespace-normal text-sm leading-5 text-brand-base">
                     {module.description}
                   </span>
                 </div>
@@ -373,7 +373,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
                       <span>Progress</span>
                     </div>
 
-                    <div className="flex items-center gap-2.5 text-gray-800">
+                    <div className="flex items-center gap-2.5 text-brand-muted-1">
                       <span className="h-4 w-4">
                         <ProgressBar
                           value={module.completed_issues}
@@ -387,15 +387,15 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
               </div>
             </div>
 
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
-              <Disclosure defaultOpen>
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
+              <Disclosure>
                 {({ open }) => (
                   <div
                     className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}
                   >
                     <div className="flex w-full items-center justify-between gap-2    ">
                       <div className="flex items-center justify-start gap-2 text-sm">
-                        <span className="font-medium text-gray-500">Progress</span>
+                        <span className="font-medium text-brand-secondary">Progress</span>
                         {!open && moduleIssues && progressPercentage ? (
                           <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
                             {progressPercentage ? `${progressPercentage}%` : ""}
@@ -415,7 +415,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
                       ) : (
                         <div className="flex items-center gap-1">
                           <ExclamationIcon height={14} width={14} />
-                          <span className="text-xs italic text-gray-500">
+                          <span className="text-xs italic text-brand-secondary">
                             Invalid date. Please enter valid date.
                           </span>
                         </div>
@@ -428,7 +428,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
                             <div className="flex  items-start justify-between gap-4 py-2 text-xs">
                               <div className="flex items-center gap-1">
                                 <span>
-                                  <DocumentIcon className="h-3 w-3 text-gray-500" />
+                                  <DocumentIcon className="h-3 w-3 text-brand-secondary" />
                                 </span>
                                 <span>
                                   Pending Issues -{" "}
@@ -437,7 +437,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
                                 </span>
                               </div>
 
-                              <div className="flex items-center gap-3 text-gray-900">
+                              <div className="flex items-center gap-3 text-brand-base">
                                 <div className="flex items-center justify-center gap-1">
                                   <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
                                   <span>Ideal</span>
@@ -466,15 +466,15 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
               </Disclosure>
             </div>
 
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
-              <Disclosure defaultOpen>
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
+              <Disclosure>
                 {({ open }) => (
                   <div
                     className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}
                   >
                     <div className="flex w-full items-center justify-between gap-2    ">
                       <div className="flex items-center justify-start gap-2 text-sm">
-                        <span className="font-medium text-gray-500">Other Information</span>
+                        <span className="font-medium text-brand-secondary">Other Information</span>
                       </div>
 
                       {module.total_issues > 0 ? (
@@ -487,7 +487,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
                       ) : (
                         <div className="flex items-center gap-1">
                           <ExclamationIcon height={14} width={14} />
-                          <span className="text-xs italic text-gray-500">
+                          <span className="text-xs italic text-brand-secondary">
                             No issues found. Please add issue.
                           </span>
                         </div>
@@ -522,11 +522,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
               </Disclosure>
             </div>
 
-            <div className="flex w-full flex-col text-xs border-t border-gray-300 px-6 py-6">
+            <div className="flex w-full flex-col text-xs border-t border-brand-base px-6 py-6">
               <div className="flex justify-between items-center w-full">
-                <h4 className="font-medium text-sm text-gray-500">Links</h4>
+                <h4 className="font-medium text-sm text-brand-secondary">Links</h4>
                 <button
-                  className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100"
+                  className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1"
                   onClick={() => setModuleLinkModal(true)}
                 >
                   <PlusIcon className="h-4 w-4" />
diff --git a/apps/app/components/modules/single-module-card.tsx b/apps/app/components/modules/single-module-card.tsx
index b5b815a69ab..1cfa7928cdb 100644
--- a/apps/app/components/modules/single-module-card.tsx
+++ b/apps/app/components/modules/single-module-card.tsx
@@ -122,14 +122,14 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
         setIsOpen={setModuleDeleteModal}
         data={module}
       />
-      <div className="flex flex-col divide-y overflow-hidden rounded-[10px] border bg-white text-xs">
+      <div className="flex flex-col divide-y divide-brand-base overflow-hidden rounded-[10px] border border-brand-base bg-brand-surface-2 text-xs">
         <div className="p-4">
           <div className="flex w-full flex-col gap-5">
             <div className="flex items-start justify-between gap-2">
               <Tooltip tooltipContent={module.name} position="top-left">
                 <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
                   <a className="w-auto max-w-[calc(100%-9rem)]">
-                    <h3 className="truncate break-all text-lg font-semibold text-black">
+                    <h3 className="truncate break-all text-lg font-semibold text-brand-base">
                       {truncateText(module.name, 75)}
                     </h3>
                   </a>
@@ -137,7 +137,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
               </Tooltip>
 
               <div className="flex items-center gap-1">
-                <div className="mr-2 flex whitespace-nowrap rounded bg-gray-100 px-2.5 py-2">
+                <div className="mr-2 flex whitespace-nowrap rounded bg-brand-surface-1 px-2.5 py-2">
                   <span className="capitalize">{module?.status?.replace("-", " ")}</span>
                 </div>
                 {module.is_favorite ? (
@@ -174,12 +174,12 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
             </div>
             <div className="grid grid-cols-2 gap-4">
               <div className="flex items-start gap-1">
-                <CalendarMonthIcon className="h-4 w-4 text-gray-900" />
+                <CalendarMonthIcon className="h-4 w-4 text-brand-base" />
                 <span className="text-gray-400">Start:</span>
                 <span>{renderShortDateWithYearFormat(startDate)}</span>
               </div>
               <div className="flex items-start gap-1">
-                <TargetIcon className="h-4 w-4 text-gray-900" />
+                <TargetIcon className="h-4 w-4 text-brand-base" />
                 <span className="text-gray-400">End:</span>
                 <span>{renderShortDateWithYearFormat(endDate)}</span>
               </div>
@@ -187,7 +187,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
           </div>
         </div>
         <div className="flex h-20 flex-col items-end">
-          <div className="flex w-full items-center justify-between gap-2 justify-self-end bg-gray-100 p-4">
+          <div className="flex w-full items-center justify-between gap-2 justify-self-end bg-brand-surface-1 p-4">
             <span>Progress</span>
             <div className="bar relative h-1 w-full rounded bg-gray-300">
               <div
@@ -199,10 +199,10 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
             </div>
             <span>{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%</span>
           </div>
-          <div className="item-center flex h-full w-full justify-between bg-gray-100 px-4 pb-4">
+          <div className="item-center flex h-full w-full justify-between bg-brand-surface-1 px-4 pb-4">
             <p className="text-[#858E96]">
               Last updated:
-              <span className="font-medium text-black">
+              <span className="font-medium text-brand-base">
                 {renderShortDateWithYearFormat(lastUpdated)}
               </span>
             </p>
diff --git a/apps/app/components/onboarding/invite-members.tsx b/apps/app/components/onboarding/invite-members.tsx
index e075caf73c8..b533126f420 100644
--- a/apps/app/components/onboarding/invite-members.tsx
+++ b/apps/app/components/onboarding/invite-members.tsx
@@ -44,7 +44,7 @@ export const InviteMembers: React.FC<Props> = ({ setStep, workspace }) => {
       }}
     >
       <div className="flex w-full max-w-xl flex-col gap-12">
-        <div className="flex flex-col gap-6  rounded-[10px] bg-white px-10 py-7 shadow-md">
+        <div className="flex flex-col gap-6  rounded-[10px] bg-brand-surface-2 px-10 py-7 shadow-md">
           <h2 className="text-2xl font-medium ">Invite co-workers to your team</h2>
           <div className="flex flex-col items-start justify-center gap-2.5 ">
             <span>Email</span>
diff --git a/apps/app/components/onboarding/user-details.tsx b/apps/app/components/onboarding/user-details.tsx
index ab7af9ab3aa..0297c2347aa 100644
--- a/apps/app/components/onboarding/user-details.tsx
+++ b/apps/app/components/onboarding/user-details.tsx
@@ -67,7 +67,7 @@ export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) =>
   return (
     <form className="flex w-full items-center justify-center" onSubmit={handleSubmit(onSubmit)}>
       <div className="flex w-full max-w-xl flex-col gap-12">
-        <div className="flex flex-col  rounded-[10px] bg-white shadow-md">
+        <div className="flex flex-col rounded-[10px] bg-brand-surface-2 shadow-md">
           <div className="flex flex-col justify-between gap-3 px-10 py-7 sm:flex-row">
             <div className="flex flex-col items-start justify-center gap-2.5">
               <span>First name</span>
@@ -94,7 +94,7 @@ export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) =>
               />
             </div>
           </div>
-          <div className="flex flex-col items-start justify-center gap-2.5 border-t border-gray-300 px-10 py-7">
+          <div className="flex flex-col items-start justify-center gap-2.5 border-t border-brand-base px-10 py-7">
             <span>What is your role?</span>
             <div className="w-full">
               <Controller
diff --git a/apps/app/components/onboarding/workspace.tsx b/apps/app/components/onboarding/workspace.tsx
index 7432fd7a7f7..57e2c86fa60 100644
--- a/apps/app/components/onboarding/workspace.tsx
+++ b/apps/app/components/onboarding/workspace.tsx
@@ -65,10 +65,10 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
   };
 
   return (
-    <div className="grid w-full place-items-center min-h-[490px]">
+    <div className="grid min-h-[490px] w-full place-items-center">
       <Tab.Group
         as="div"
-        className="flex h-full w-full max-w-xl flex-col justify-between rounded-[10px] bg-white shadow-md"
+        className="flex h-full w-full max-w-xl flex-col justify-between rounded-[10px] bg-brand-surface-2 shadow-md"
       >
         <Tab.List
           as="div"
@@ -78,8 +78,8 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
             className={({ selected }) =>
               `rounded-3xl border px-4 py-2 outline-none ${
                 selected
-                  ? "border-theme bg-theme text-white"
-                  : "border-gray-300 bg-white hover:bg-hover-gray"
+                  ? "border-brand-accent bg-brand-accent text-white"
+                  : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
               }`
             }
           >
@@ -89,8 +89,8 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
             className={({ selected }) =>
               `rounded-3xl border px-5 py-2 outline-none ${
                 selected
-                  ? "border-theme bg-theme text-white"
-                  : "border-gray-300 bg-white hover:bg-hover-gray"
+                  ? "border-brand-accent bg-brand-accent text-white"
+                  : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
               }`
             }
           >
@@ -109,7 +109,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
             />
           </Tab.Panel>
           <Tab.Panel className="h-full">
-            <div className="flex flex-col justify-between h-full w-full">
+            <div className="flex h-full w-full flex-col justify-between">
               <div className="divide-y px-4 py-7">
                 {invitations && invitations.length > 0 ? (
                   invitations.map((invitation) => (
@@ -136,10 +136,10 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
                           </span>
                         </div>
                         <div className="min-w-0 flex-1">
-                          <div className="text-sm font-medium text-gray-900">
+                          <div className="text-sm font-medium text-brand-base">
                             {invitation.workspace.name}
                           </div>
-                          <p className="text-sm text-gray-500">
+                          <p className="text-sm text-brand-secondary">
                             Invited by {invitation.workspace.owner.first_name}
                           </p>
                         </div>
@@ -157,7 +157,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
                               );
                             }}
                             type="checkbox"
-                            className="h-4 w-4 rounded border-gray-300 text-theme focus:ring-indigo-500"
+                            className="h-4 w-4 rounded border-brand-base text-brand-accent focus:ring-brand-accent"
                           />
                         </div>
                       </label>
diff --git a/apps/app/components/pages/create-update-page-modal.tsx b/apps/app/components/pages/create-update-page-modal.tsx
index d1d0d02bef4..09db533d510 100644
--- a/apps/app/components/pages/create-update-page-modal.tsx
+++ b/apps/app/components/pages/create-update-page-modal.tsx
@@ -151,7 +151,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -165,7 +165,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 bg-white 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 bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <PageForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/pages/delete-page-modal.tsx b/apps/app/components/pages/delete-page-modal.tsx
index a92bb49b6cf..b37f05bbea9 100644
--- a/apps/app/components/pages/delete-page-modal.tsx
+++ b/apps/app/components/pages/delete-page-modal.tsx
@@ -101,7 +101,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -115,8 +115,8 @@ 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 bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                       <ExclamationTriangleIcon
@@ -125,11 +125,11 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
                       />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
                         Delete Page
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-gray-500">
+                        <p className="text-sm text-brand-secondary">
                           Are you sure you want to delete Page- {" "}
                           <span className="font-bold">{data?.name}</span>
                           ? All of the data related to the page will be permanently removed.
diff --git a/apps/app/components/pages/page-form.tsx b/apps/app/components/pages/page-form.tsx
index 8888a861da3..22cab9e31d1 100644
--- a/apps/app/components/pages/page-form.tsx
+++ b/apps/app/components/pages/page-form.tsx
@@ -61,7 +61,7 @@ export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
   return (
     <form onSubmit={handleSubmit(handleCreateUpdatePage)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-gray-900">
+        <h3 className="text-lg font-medium leading-6 text-brand-base">
           {status ? "Update" : "Create"} Page
         </h3>
         <div className="space-y-3">
diff --git a/apps/app/components/pages/pages-view.tsx b/apps/app/components/pages/pages-view.tsx
index 7e923b0febc..b57729003b4 100644
--- a/apps/app/components/pages/pages-view.tsx
+++ b/apps/app/components/pages/pages-view.tsx
@@ -217,7 +217,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
               ))}
             </ul>
           ) : viewType === "detailed" ? (
-            <div className="divide-y rounded-[10px] border  border-gray-200 bg-white">
+            <div className="divide-y rounded-[10px] border border-brand-base bg-brand-surface-2">
               {pages.map((page) => (
                 <SinglePageDetailedItem
                   key={page.id}
@@ -232,7 +232,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
               ))}
             </div>
           ) : (
-            <div className="rounded-[10px] border border-gray-200 bg-white">
+            <div className="rounded-[10px] border border-brand-base bg-brand-surface-2">
               {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 c7ebec25d10..c43aed1953d 100644
--- a/apps/app/components/pages/single-page-detailed-item.tsx
+++ b/apps/app/components/pages/single-page-detailed-item.tsx
@@ -57,7 +57,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 px-2 py-0.5 text-xs"
+                    className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
                     style={{
                       backgroundColor: `${
                         label?.color && label.color !== "" ? label.color : "#000000"
diff --git a/apps/app/components/pages/single-page-list-item.tsx b/apps/app/components/pages/single-page-list-item.tsx
index 55baea26f72..a60e907295b 100644
--- a/apps/app/components/pages/single-page-list-item.tsx
+++ b/apps/app/components/pages/single-page-list-item.tsx
@@ -51,7 +51,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
     <li>
       <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
         <a>
-          <div className="relative rounded p-4 hover:bg-gray-200">
+          <div className="relative rounded p-4 hover:bg-brand-surface-1">
             <div className="flex items-center justify-between">
               <div className="flex flex-wrap items-center gap-2">
                 <DocumentTextIcon className="h-4 w-4" />
@@ -62,7 +62,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 px-2 py-0.5 text-xs"
+                      className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
                       style={{
                         backgroundColor: `${
                           label?.color && label.color !== "" ? label.color : "#000000"
diff --git a/apps/app/components/project/confirm-project-member-remove.tsx b/apps/app/components/project/confirm-project-member-remove.tsx
index 646400cdef5..e2cdf1af798 100644
--- a/apps/app/components/project/confirm-project-member-remove.tsx
+++ b/apps/app/components/project/confirm-project-member-remove.tsx
@@ -39,7 +39,7 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -53,8 +53,8 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                       <ExclamationTriangleIcon
@@ -63,11 +63,11 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
                       />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
                         Remove {data?.email}?
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-gray-500">
+                        <p className="text-sm text-brand-secondary">
                           Are you sure you want to remove member- {" "}
                           <span className="font-bold">{data?.email}</span>
                           ? They will no longer have access to this project. This action
diff --git a/apps/app/components/project/create-project-modal.tsx b/apps/app/components/project/create-project-modal.tsx
index 88552825f90..1b82210bdbb 100644
--- a/apps/app/components/project/create-project-modal.tsx
+++ b/apps/app/components/project/create-project-modal.tsx
@@ -164,7 +164,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -178,7 +178,7 @@ export const CreateProjectModal: React.FC<Props> = (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="transform rounded-lg bg-white text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="transform rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <div className="relative h-36 w-full rounded-t-lg bg-gray-300">
                   {watch("cover_image") !== null && (
                     <Image
diff --git a/apps/app/components/project/delete-project-modal.tsx b/apps/app/components/project/delete-project-modal.tsx
index efc5a197416..07cdd09f8fd 100644
--- a/apps/app/components/project/delete-project-modal.tsx
+++ b/apps/app/components/project/delete-project-modal.tsx
@@ -96,7 +96,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -110,7 +110,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 bg-white 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 bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-100 p-4">
@@ -124,7 +124,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm leading-7 text-gray-500">
+                    <p className="text-sm leading-7 text-brand-secondary">
                       Are you sure you want to delete project{" "}
                       <span className="break-all font-semibold">{selectedProject?.name}</span>? All
                       of the data related to the project will be permanently removed. This action
diff --git a/apps/app/components/project/join-project-modal.tsx b/apps/app/components/project/join-project-modal.tsx
index 6f2f9c6d6dc..83933dffb48 100644
--- a/apps/app/components/project/join-project-modal.tsx
+++ b/apps/app/components/project/join-project-modal.tsx
@@ -45,7 +45,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, on
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -59,9 +59,9 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, on
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white 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 bg-brand-surface-2 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
                     Join Project?
                   </Dialog.Title>
                   <p>
diff --git a/apps/app/components/project/send-project-invitation-modal.tsx b/apps/app/components/project/send-project-invitation-modal.tsx
index bae90f66485..ea2fa9781fc 100644
--- a/apps/app/components/project/send-project-invitation-modal.tsx
+++ b/apps/app/components/project/send-project-invitation-modal.tsx
@@ -115,7 +115,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -129,14 +129,14 @@ 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 overflow-hidden rounded-lg bg-white p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="space-y-5">
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
                       Invite Members
                     </Dialog.Title>
                     <div className="mt-2">
-                      <p className="text-sm text-gray-500">
+                      <p className="text-sm text-brand-secondary">
                         Invite members to work on your project.
                       </p>
                     </div>
@@ -181,7 +181,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
                         />
                       </div>
                       <div>
-                        <h6 className="text-gray-500">Role</h6>
+                        <h6 className="text-brand-secondary">Role</h6>
                         <Controller
                           name="role"
                           control={control}
diff --git a/apps/app/components/project/settings/single-label.tsx b/apps/app/components/project/settings/single-label.tsx
index 87d93ad1e48..adee30bb5c4 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 p-3 md:w-2/3">
+        <div className="gap-2 space-y-3 divide-y rounded-md border  border-brand-base p-3 md:w-2/3">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               <span
@@ -61,12 +61,12 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
           </div>
           <div className={`flex items-center gap-2 ${newLabelForm ? "" : "hidden"}`}>
             <div className="h-8 w-8 flex-shrink-0">
-              <Popover className="relative flex h-full w-full items-center justify-center rounded-xl bg-gray-200">
+              <Popover className="relative flex h-full w-full items-center justify-center rounded-xl bg-brand-surface-2">
                 {({ open }) => (
                   <>
                     <Popover.Button
                       className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
-                        open ? "text-gray-900" : "text-gray-500"
+                        open ? "text-brand-base" : "text-brand-secondary"
                       }`}
                     >
                       {watch("color") && watch("color") !== "" && (
@@ -123,13 +123,13 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
           </div>
         </div>
       ) : (
-        <div className="rounded-md bg-white p-4 text-gray-900">
+        <div className="rounded-md bg-brand-surface-2 p-4 text-brand-base">
           <h3 className="flex items-center gap-2 font-medium leading-5">
             <RectangleGroupIcon className="h-5 w-5" />
             This is the label group title
           </h3>
           <div className="mt-4 pl-5">
-            <div className="group flex items-center justify-between rounded p-2 text-sm hover:bg-gray-100">
+            <div className="group flex items-center justify-between rounded p-2 text-sm hover:bg-brand-surface-1">
               <h5 className="flex items-center gap-2">
                 <div className="h-2 w-2 rounded-full bg-red-600" />
                 This is the label title
diff --git a/apps/app/components/project/sidebar-list.tsx b/apps/app/components/project/sidebar-list.tsx
index a02cfe26cc7..3cf1e2a97ed 100644
--- a/apps/app/components/project/sidebar-list.tsx
+++ b/apps/app/components/project/sidebar-list.tsx
@@ -142,7 +142,7 @@ export const ProjectSidebarList: FC = () => {
         onClose={() => setDeleteProjectModal(false)}
         data={projectToDelete}
       />
-      <div className="mt-2.5 h-full overflow-y-auto border-t bg-white pt-2.5">
+      <div className="mt-2.5 h-full overflow-y-auto border-t border-brand-base bg-brand-sidebar pt-2.5">
         {favoriteProjects && favoriteProjects.length > 0 && (
           <div className="mt-3 flex flex-col space-y-2 px-3">
             {!sidebarCollapse && <h5 className="text-sm font-semibold text-gray-400">Favorites</h5>}
@@ -184,7 +184,7 @@ export const ProjectSidebarList: FC = () => {
                   )}
                   <button
                     type="button"
-                    className="group flex w-full items-center justify-center gap-2 rounded-md bg-gray-200 p-2 text-xs text-gray-900"
+                    className="group flex w-full items-center justify-center gap-2 rounded-md bg-brand-surface-2 p-2 text-xs text-brand-base"
                     onClick={() => setCreateProjectModal(true)}
                   >
                     <PlusIcon className="h-4 w-4" />
diff --git a/apps/app/components/project/single-integration-card.tsx b/apps/app/components/project/single-integration-card.tsx
index bbf21f438d2..20a84b0b440 100644
--- a/apps/app/components/project/single-integration-card.tsx
+++ b/apps/app/components/project/single-integration-card.tsx
@@ -80,7 +80,7 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
   return (
     <>
       {integration && (
-        <div className="flex items-center justify-between gap-2 rounded-[10px] border bg-white p-5">
+        <div className="flex items-center justify-between gap-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
           <div className="flex items-start gap-4">
             <div className="h-12 w-12 flex-shrink-0">
               <Image src={GithubLogo} alt="GithubLogo" />
diff --git a/apps/app/components/project/single-project-card.tsx b/apps/app/components/project/single-project-card.tsx
index 02e2190c752..e633f198577 100644
--- a/apps/app/components/project/single-project-card.tsx
+++ b/apps/app/components/project/single-project-card.tsx
@@ -138,7 +138,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
   return (
     <>
       {members ? (
-        <div className="flex flex-col rounded-[10px] shadow">
+        <div className="flex flex-col rounded-[10px] shadow bg-brand-surface-2">
           <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
             <a>
               <div className="relative h-32 w-full rounded-t-[10px]">
@@ -211,7 +211,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
                 <div className="flex items-center">
                   {(isOwner || isMember) && (
                     <Link href={`/${workspaceSlug}/projects/${project.id}/settings`}>
-                      <a className="grid cursor-pointer place-items-center rounded p-1 duration-300 hover:bg-gray-100">
+                      <a className="grid cursor-pointer place-items-center rounded p-1 duration-300 hover:bg-brand-surface-1">
                         <PencilIcon className="h-4 w-4" />
                       </a>
                     </Link>
diff --git a/apps/app/components/project/single-sidebar-project.tsx b/apps/app/components/project/single-sidebar-project.tsx
index 1e2273513b6..ab2f0ae2af3 100644
--- a/apps/app/components/project/single-sidebar-project.tsx
+++ b/apps/app/components/project/single-sidebar-project.tsx
@@ -173,18 +173,18 @@ export const SingleSidebarProject: React.FC<Props> = ({
                     <a
                       className={`group flex items-center rounded-md p-2 text-xs font-medium outline-none ${
                         item.href === router.asPath
-                          ? "bg-indigo-50 text-gray-900"
-                          : "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50 focus:text-gray-900"
+                          ? "bg-brand-base text-brand-secondary"
+                          : "text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-secondary focus:bg-brand-base focus:text-brand-secondary"
                       } ${sidebarCollapse ? "justify-center" : ""}`}
                     >
                       <div className="grid place-items-center">
                         <item.icon
                           className={`h-5 w-5 flex-shrink-0 ${
                             item.href === router.asPath
-                              ? "text-gray-900"
-                              : "text-gray-500 group-hover:text-gray-900"
+                              ? "text-brand-secondary"
+                              : "text-brand-secondary group-hover:text-brand-base"
                           } ${!sidebarCollapse ? "mr-3" : ""}`}
-                          color={item.href === router.asPath ? "#111827" : "#858e96"}
+                          color="#858e96"
                           aria-hidden="true"
                         />
                       </div>
diff --git a/apps/app/components/rich-text-editor/index.tsx b/apps/app/components/rich-text-editor/index.tsx
index 701a96562f5..529523d8e95 100644
--- a/apps/app/components/rich-text-editor/index.tsx
+++ b/apps/app/components/rich-text-editor/index.tsx
@@ -195,9 +195,11 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
         manager={manager}
         initialContent={state}
         classNames={[
-          `p-4 relative focus:outline-none rounded-md focus:border-gray-200 ${
-            noBorder ? "" : "border"
-          } ${borderOnFocus ? "focus:border" : "focus:border-0"} ${customClassName}`,
+          `p-4 relative focus:outline-none rounded-md focus:border-brand-base ${
+            noBorder ? "" : "border border-brand-base"
+          } ${
+            borderOnFocus ? "focus:border border-brand-base" : "focus:border-0"
+          } ${customClassName}`,
         ]}
         editable={editable}
         onBlur={() => {
@@ -207,7 +209,9 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
         {(!value || value === "" || value?.content?.[0]?.content === undefined) &&
           !(typeof value === "string" && value.includes("<")) &&
           placeholder && (
-            <p className="absolute pointer-events-none top-4 left-4 text-gray-300">{placeholder}</p>
+            <p className="absolute pointer-events-none top-4 left-4 text-brand-secondary">
+              {placeholder}
+            </p>
           )}
         <EditorComponent />
 
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 03477779460..731c7e8b4db 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
@@ -21,7 +21,7 @@ export const CustomFloatingToolbar: React.FC<Props> = ({ gptOption, editorState
   const active = useActive();
 
   return (
-    <div className="z-[99999] flex items-center gap-y-2 divide-x rounded border bg-white p-1 px-0.5 shadow-md">
+    <div className="z-[99999] flex items-center gap-y-2 divide-x divide-brand-base rounded border border-brand-base bg-brand-surface-2 p-1 px-0.5 shadow-md">
       <div className="flex items-center gap-x-1 px-2">
         <ToggleHeadingButton
           attrs={{
@@ -51,7 +51,11 @@ export const CustomFloatingToolbar: React.FC<Props> = ({ gptOption, editorState
       </div>
       {gptOption && (
         <div className="flex items-center gap-x-1 px-2">
-          <button type="button" className="rounded py-1 px-1.5 text-xs hover:bg-gray-100">
+          <button
+            type="button"
+            className="rounded py-1 px-1.5 text-xs hover:bg-brand-surface-1"
+            onClick={() => console.log(editorState.selection.$anchor.nodeBefore)}
+          >
             AI
           </button>
         </div>
diff --git a/apps/app/components/rich-text-editor/toolbar/link.tsx b/apps/app/components/rich-text-editor/toolbar/link.tsx
index 458a5017171..a47c45c1a5b 100644
--- a/apps/app/components/rich-text-editor/toolbar/link.tsx
+++ b/apps/app/components/rich-text-editor/toolbar/link.tsx
@@ -173,12 +173,12 @@ export const FloatingLinkToolbar = () => {
   return (
     <>
       {!isEditing && (
-        <FloatingToolbar className="rounded bg-white p-1 shadow-lg">
+        <FloatingToolbar className="rounded bg-brand-surface-2 p-1 shadow-lg">
           {linkEditButtons}
         </FloatingToolbar>
       )}
       {!isEditing && empty && (
-        <FloatingToolbar positioner={linkPositioner} className="rounded bg-white p-1 shadow-lg">
+        <FloatingToolbar positioner={linkPositioner} className="rounded bg-brand-surface-2 p-1 shadow-lg">
           {linkEditButtons}
         </FloatingToolbar>
       )}
diff --git a/apps/app/components/rich-text-editor/toolbar/table-controls.tsx b/apps/app/components/rich-text-editor/toolbar/table-controls.tsx
index 3ad28524535..d8f8e24e2a0 100644
--- a/apps/app/components/rich-text-editor/toolbar/table-controls.tsx
+++ b/apps/app/components/rich-text-editor/toolbar/table-controls.tsx
@@ -8,7 +8,7 @@ export const TableControls = () => {
       <button
         type="button"
         onClick={() => createTable({ rowsCount: 3, columnsCount: 3, withHeaderRow: false })}
-        className="rounded p-1 hover:bg-gray-100"
+        className="rounded p-1 hover:bg-brand-surface-1"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -28,7 +28,7 @@ export const TableControls = () => {
       <button
         type="button"
         onClick={() => commands.deleteTable()}
-        className="rounded p-1 hover:bg-gray-100"
+        className="rounded p-1 hover:bg-brand-surface-1"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/app/components/search-listbox/index.tsx b/apps/app/components/search-listbox/index.tsx
index 538dde29aed..ef7c3363404 100644
--- a/apps/app/components/search-listbox/index.tsx
+++ b/apps/app/components/search-listbox/index.tsx
@@ -87,14 +87,14 @@ 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 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 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-brand-base px-2 py-1 text-xs shadow-sm duration-300 hover:bg-brand-surface-1 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent ${
               buttonClassName || ""
             }`}
           >
             {icon ?? null}
             <span
               className={`hidden truncate sm:block ${
-                value === null || value === undefined ? "" : "text-gray-900"
+                value === null || value === undefined ? "" : "text-brand-base"
               }`}
             >
               {Array.isArray(value)
@@ -113,7 +113,7 @@ const SearchListbox: React.FC<Props> = ({
             leaveTo="opacity-0"
           >
             <Combobox.Options
-              className={`absolute z-10 mt-1 max-h-32 min-w-[8rem] overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none  ${
+              className={`absolute z-10 mt-1 max-h-32 min-w-[8rem] overflow-auto rounded-md bg-brand-surface-2 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none  ${
                 optionsFontsize === "sm"
                   ? "text-xs"
                   : optionsFontsize === "md"
@@ -142,7 +142,7 @@ const SearchListbox: React.FC<Props> = ({
                         className={({ active }) =>
                           `${
                             active ? "bg-indigo-50" : ""
-                          } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
+                          } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-brand-base`
                         }
                         value={option.value}
                       >
@@ -151,10 +151,10 @@ const SearchListbox: React.FC<Props> = ({
                       </Combobox.Option>
                     ))
                   ) : (
-                    <p className="text-xs text-gray-500 px-2">No {title.toLowerCase()} found</p>
+                    <p className="text-xs text-brand-secondary px-2">No {title.toLowerCase()} found</p>
                   )
                 ) : (
-                  <p className="text-xs text-gray-500 px-2">Loading...</p>
+                  <p className="text-xs text-brand-secondary px-2">Loading...</p>
                 )}
               </div>
             </Combobox.Options>
diff --git a/apps/app/components/states/create-state-modal.tsx b/apps/app/components/states/create-state-modal.tsx
index ca19cd752c5..769ca68219b 100644
--- a/apps/app/components/states/create-state-modal.tsx
+++ b/apps/app/components/states/create-state-modal.tsx
@@ -102,7 +102,7 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -116,10 +116,10 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white 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 overflow-hidden rounded-lg bg-brand-surface-2 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
                       Create State
                     </Dialog.Title>
                     <div className="mt-2 space-y-3">
@@ -165,8 +165,8 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                           {({ open }) => (
                             <>
                               <Popover.Button
-                                className={`group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
-                                  open ? "text-gray-900" : "text-gray-500"
+                                className={`group inline-flex items-center rounded-md bg-brand-surface-2 text-base font-medium hover:text-brand-base focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
+                                  open ? "text-brand-base" : "text-brand-secondary"
                                 }`}
                               >
                                 <span>Color</span>
@@ -179,7 +179,7 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                                   />
                                 )}
                                 <ChevronDownIcon
-                                  className={`ml-2 h-5 w-5 group-hover:text-gray-500 ${
+                                  className={`ml-2 h-5 w-5 group-hover:text-brand-secondary ${
                                     open ? "text-gray-600" : "text-gray-400"
                                   }`}
                                   aria-hidden="true"
diff --git a/apps/app/components/states/create-update-state-inline.tsx b/apps/app/components/states/create-update-state-inline.tsx
index d9e7263795e..54bd85eeee1 100644
--- a/apps/app/components/states/create-update-state-inline.tsx
+++ b/apps/app/components/states/create-update-state-inline.tsx
@@ -144,7 +144,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
-      className="flex items-center gap-x-2 rounded-[10px] bg-white p-5"
+      className="flex items-center gap-x-2 rounded-[10px] bg-brand-surface-1 p-5"
     >
       <div className="flex-shrink-0">
         <Popover className="relative flex h-full w-full items-center justify-center">
diff --git a/apps/app/components/states/delete-state-modal.tsx b/apps/app/components/states/delete-state-modal.tsx
index d1eca3a9325..362ff9353e8 100644
--- a/apps/app/components/states/delete-state-modal.tsx
+++ b/apps/app/components/states/delete-state-modal.tsx
@@ -90,7 +90,7 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data }) =>
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -104,8 +104,8 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, 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 bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                       <ExclamationTriangleIcon
@@ -114,11 +114,14 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data }) =>
                       />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium leading-6 text-brand-base"
+                      >
                         Delete State
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-gray-500">
+                        <p className="text-sm text-brand-secondary">
                           Are you sure you want to delete state-{" "}
                           <span className="italic">{data?.name}</span>? All of the data related to
                           the state will be permanently removed. This action cannot be undone.
diff --git a/apps/app/components/states/single-state.tsx b/apps/app/components/states/single-state.tsx
index f4383b37681..2a65a1674e2 100644
--- a/apps/app/components/states/single-state.tsx
+++ b/apps/app/components/states/single-state.tsx
@@ -135,12 +135,12 @@ export const SingleState: React.FC<Props> = ({
 
   return (
     <div
-      className={`group flex items-center justify-between gap-2 bg-white p-5 first:rounded-t-[10px] last:rounded-b-[10px]`}
+      className={`group flex items-center justify-between gap-2 border-brand-base bg-brand-surface-1 p-5 first:rounded-t-[10px] last:rounded-b-[10px]`}
     >
       <div className="flex items-center gap-3">
         {getStateGroupIcon(state.group, "20", "20", state.color)}
         <div>
-          <h6 className="font-medium text-gray-600">{addSpaceIfCamelCase(state.name)}</h6>
+          <h6 className="font-medium text-brand-muted-1">{addSpaceIfCamelCase(state.name)}</h6>
           <p className="text-xs text-gray-400">{state.description}</p>
         </div>
       </div>
@@ -148,7 +148,7 @@ export const SingleState: React.FC<Props> = ({
         {index !== 0 && (
           <button
             type="button"
-            className="hidden text-gray-400 hover:text-gray-900 group-hover:inline-block"
+            className="hidden text-gray-400 hover:text-brand-base group-hover:inline-block"
             onClick={() => handleMove(state, "up")}
           >
             <ArrowUpIcon className="h-4 w-4" />
@@ -157,7 +157,7 @@ export const SingleState: React.FC<Props> = ({
         {!(index === groupLength - 1) && (
           <button
             type="button"
-            className="hidden text-gray-400 hover:text-gray-900 group-hover:inline-block"
+            className="hidden text-gray-400 hover:text-brand-base group-hover:inline-block"
             onClick={() => handleMove(state, "down")}
           >
             <ArrowDownIcon className="h-4 w-4" />
@@ -168,7 +168,7 @@ export const SingleState: React.FC<Props> = ({
         ) : (
           <button
             type="button"
-            className="hidden text-xs text-gray-400 hover:text-gray-900 group-hover:inline-block"
+            className="hidden text-xs text-gray-400 hover:text-brand-base group-hover:inline-block"
             onClick={handleMakeDefault}
             disabled={isSubmitting}
           >
diff --git a/apps/app/components/ui/avatar.tsx b/apps/app/components/ui/avatar.tsx
index 5bc94bfcf06..12b6c295bfa 100644
--- a/apps/app/components/ui/avatar.tsx
+++ b/apps/app/components/ui/avatar.tsx
@@ -28,7 +28,7 @@ export const Avatar: React.FC<AvatarProps> = ({ user, index, height="20px", widt
     {user && user.avatar && user.avatar !== "" ? (
       <div
         className={`rounded-full border-2 ${
-          index ? "border-white bg-white" : "border-transparent"
+          index ? "border-white bg-brand-surface-2" : "border-transparent"
         }`}
         style={{
           height: height,
@@ -80,7 +80,7 @@ export const AssigneesList: React.FC<AsigneesListProps> = ({
 
   if ((users && users.length === 0) || (userIds && userIds.length === 0))
     return (
-      <div className="h-5 w-5 rounded-full border-2 border-white bg-white">
+      <div className="h-5 w-5 rounded-full border-2 border-white bg-brand-surface-2">
         <Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
       </div>
     );
diff --git a/apps/app/components/ui/buttons/primary-button.tsx b/apps/app/components/ui/buttons/primary-button.tsx
index 3b3c70bfe64..d86227e3a3b 100644
--- a/apps/app/components/ui/buttons/primary-button.tsx
+++ b/apps/app/components/ui/buttons/primary-button.tsx
@@ -13,7 +13,7 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
 }) => (
   <button
     type={type}
-    className={`${className} border border-theme font-medium duration-300 ${
+    className={`${className} border border-brand-accent font-medium duration-300 ${
       size === "sm"
         ? "rounded px-3 py-2 text-xs"
         : size === "md"
@@ -25,8 +25,8 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
         : ""
     } ${
       outline
-        ? "bg-transparent text-theme hover:bg-theme hover:text-white"
-        : "text-white bg-theme hover:border-opacity-90 hover:bg-opacity-90"
+        ? "bg-transparent text-brand-accent hover:bg-brand-accent hover:text-white"
+        : "text-white bg-brand-accent hover:border-opacity-90 hover:bg-opacity-90"
     }  ${loading ? "cursor-wait" : ""}`}
     onClick={onClick}
     disabled={disabled || loading}
diff --git a/apps/app/components/ui/buttons/secondary-button.tsx b/apps/app/components/ui/buttons/secondary-button.tsx
index 479dca7496d..6f0ab72b4a9 100644
--- a/apps/app/components/ui/buttons/secondary-button.tsx
+++ b/apps/app/components/ui/buttons/secondary-button.tsx
@@ -13,7 +13,7 @@ export const SecondaryButton: React.FC<ButtonProps> = ({
 }) => (
   <button
     type={type}
-    className={`${className} border font-medium duration-300 ${
+    className={`${className} border border-brand-base font-medium duration-300 ${
       size === "sm"
         ? "rounded px-3 py-2 text-xs"
         : size === "md"
@@ -21,12 +21,12 @@ export const SecondaryButton: React.FC<ButtonProps> = ({
         : "rounded-lg px-4 py-2 text-base"
     } ${
       disabled
-        ? "cursor-not-allowed border-gray-300 bg-gray-300 hover:border-gray-300 hover:border-opacity-100 hover:bg-gray-300 hover:bg-opacity-100"
+        ? "cursor-not-allowed border-brand-base bg-brand-surface-1 hover:border-brand-base hover:border-opacity-100 hover:bg-brand-surface-1 hover:bg-opacity-100"
         : ""
     } ${
       outline
-        ? "bg-transparent hover:bg-gray-300"
-        : "bg-gray-300 hover:border-opacity-90 hover:bg-opacity-90"
+        ? "bg-transparent hover:bg-brand-surface-2"
+        : "bg-brand-surface-2 hover:border-opacity-70 hover:bg-opacity-70"
     } ${loading ? "cursor-wait" : ""}`}
     onClick={onClick}
     disabled={disabled || loading}
diff --git a/apps/app/components/ui/context-menu.tsx b/apps/app/components/ui/context-menu.tsx
index ac91cc27f7a..c1ea7eb70d3 100644
--- a/apps/app/components/ui/context-menu.tsx
+++ b/apps/app/components/ui/context-menu.tsx
@@ -37,7 +37,7 @@ 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 bg-white p-2 text-xs shadow-lg`}
+        className={`fixed z-20 flex min-w-[8rem] flex-col items-stretch gap-1 rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs shadow-lg`}
         style={{
           left: `${position.x}px`,
           top: `${position.y}px`,
@@ -71,7 +71,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
     {renderAs === "a" ? (
       <Link href={href}>
         <a
-          className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-gray-500 hover:bg-gray-100 hover:text-gray-900`}
+          className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-base`}
         >
           <>
             {Icon && <Icon />}
@@ -82,7 +82,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
     ) : (
       <button
         type="button"
-        className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-gray-500 hover:bg-gray-100 hover:text-gray-900`}
+        className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-base`}
         onClick={onClick}
       >
         <>
diff --git a/apps/app/components/ui/custom-menu.tsx b/apps/app/components/ui/custom-menu.tsx
index d324ad2998e..5474df284e4 100644
--- a/apps/app/components/ui/custom-menu.tsx
+++ b/apps/app/components/ui/custom-menu.tsx
@@ -51,14 +51,14 @@ const CustomMenu = ({
         {ellipsis || verticalEllipsis ? (
           <Menu.Button
             type="button"
-            className="relative grid place-items-center rounded p-1 hover:bg-gray-100 focus:outline-none"
+            className="relative grid place-items-center rounded p-1 hover:bg-brand-surface-1 focus:outline-none"
           >
             <EllipsisHorizontalIcon className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`} />
           </Menu.Button>
         ) : (
           <Menu.Button
             type="button"
-            className={`flex cursor-pointer items-center justify-between gap-1 px-2.5 py-1 text-xs duration-300 hover:bg-gray-100 ${
+            className={`flex cursor-pointer items-center justify-between gap-1 px-2.5 py-1 text-xs duration-300 hover:bg-brand-surface-1 ${
               textAlignment === "right"
                 ? "text-right"
                 : textAlignment === "center"
@@ -67,7 +67,7 @@ const CustomMenu = ({
             } ${
               noBorder
                 ? "rounded"
-                : "rounded-md border shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                : "rounded-md border border-brand-base shadow-sm focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-skinborder-brand-accent"
             } ${
               width === "sm"
                 ? "w-10"
@@ -97,7 +97,7 @@ const CustomMenu = ({
       leaveTo="transform opacity-0 scale-95"
     >
       <Menu.Items
-        className={`absolute z-20 mt-1 overflow-y-scroll whitespace-nowrap rounded-md bg-white p-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
+        className={`absolute z-20 mt-1 overflow-y-scroll whitespace-nowrap rounded-md bg-brand-surface-2 p-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
           optionsPosition === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
         } ${
           height === "sm"
@@ -140,8 +140,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
         <Link href={href ?? ""}>
           <a
             className={`${className} ${
-              active ? "bg-hover-gray" : ""
-            } inline-block w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-gray-500 hover:bg-gray-100 hover:text-gray-900`}
+              active ? "bg-brand-surface-1" : ""
+            } inline-block w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-muted-1`}
             onClick={close}
           >
             {children}
@@ -151,8 +151,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
         <button
           type="button"
           className={`${className} ${
-            active ? "bg-hover-gray" : ""
-          } w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-gray-500 hover:bg-gray-100 hover:text-gray-900`}
+            active ? "bg-brand-surface-1" : ""
+          } w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-muted-1`}
           onClick={onClick}
         >
           {children}
diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
index fd7188db61a..d6e3d339688 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -69,10 +69,10 @@ export const CustomSearchSelect = ({
           ) : (
             <Combobox.Button
               className={`flex w-full ${
-                disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
+                disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
               } ${
-                input ? "border-gray-300 px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
-              } items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+                input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+              } items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent ${
                 textAlignment === "right"
                   ? "text-right"
                   : textAlignment === "center"
@@ -99,12 +99,12 @@ export const CustomSearchSelect = ({
             <Combobox.Options
               className={`${optionsClassName} absolute min-w-[10rem] p-2 ${
                 position === "right" ? "right-0" : "left-0"
-              } z-10 mt-1 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
+              } z-10 mt-1 origin-top-right rounded-md bg-brand-surface-2 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
             >
-              <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2">
-                <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
+              <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-brand-base bg-brand-surface-1 px-2">
+                <MagnifyingGlassIcon className="text-brand-muted-1 h-3 w-3" />
                 <Combobox.Input
-                  className="w-full  bg-transparent py-1 px-2  text-xs text-gray-500 focus:outline-none"
+                  className="text-brand-muted-1  w-full bg-transparent py-1  px-2 text-xs focus:outline-none"
                   onChange={(e) => setQuery(e.target.value)}
                   placeholder="Type to search..."
                   displayValue={(assigned: any) => assigned?.name}
@@ -130,9 +130,9 @@ export const CustomSearchSelect = ({
                         key={option.value}
                         value={option.value}
                         className={({ active, selected }) =>
-                          `${active || selected ? "bg-hover-gray" : ""} ${
+                          `${active || selected ? "bg-brand-surface-1" : ""} ${
                             selected ? "font-medium" : ""
-                          } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-gray-500`
+                          } text-brand-muted-1 flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5`
                         }
                       >
                         {({ active, selected }) => (
@@ -158,10 +158,10 @@ export const CustomSearchSelect = ({
                       </Combobox.Option>
                     ))
                   ) : (
-                    <p className="text-center text-gray-500">No matching results</p>
+                    <p className="text-center text-brand-secondary">No matching results</p>
                   )
                 ) : (
-                  <p className="text-center text-gray-500">Loading...</p>
+                  <p className="text-center text-brand-secondary">Loading...</p>
                 )}
               </div>
               {footerOption}
diff --git a/apps/app/components/ui/custom-select.tsx b/apps/app/components/ui/custom-select.tsx
index 28460634b1d..62a87ec4577 100644
--- a/apps/app/components/ui/custom-select.tsx
+++ b/apps/app/components/ui/custom-select.tsx
@@ -51,9 +51,9 @@ const CustomSelect = ({
       ) : (
         <Listbox.Button
           className={`flex w-full ${
-            disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
-          } items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-            input ? "border-gray-300 px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+            disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
+          } items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent ${
+            input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
           } ${
             textAlignment === "right"
               ? "text-right"
@@ -80,7 +80,7 @@ const CustomSelect = ({
       <Listbox.Options
         className={`${optionsClassName} absolute ${
           position === "right" ? "right-0" : "left-0"
-        } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
+        } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-brand-surface-2 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
           width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
         } ${input ? "max-h-48" : ""} ${
           maxHeight === "lg"
@@ -110,9 +110,9 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
   <Listbox.Option
     value={value}
     className={({ active, selected }) =>
-      `${className} ${active || selected ? "bg-hover-gray" : ""} ${
+      `${className} ${active || selected ? "bg-brand-surface-1" : ""} ${
         selected ? "font-medium" : ""
-      } cursor-pointer select-none truncate rounded px-1 py-1.5 text-gray-500`
+      } cursor-pointer select-none truncate rounded px-1 py-1.5 text-brand-secondary`
     }
   >
     {({ selected }) => (
diff --git a/apps/app/components/ui/date.tsx b/apps/app/components/ui/date.tsx
index 4325f5a42b3..54a684086d6 100644
--- a/apps/app/components/ui/date.tsx
+++ b/apps/app/components/ui/date.tsx
@@ -19,11 +19,11 @@ export const DateSelect: React.FC<Props> = ({ value, onChange, label }) => (
       <>
         <Popover.Button
           className={({ open }) =>
-            `flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200 
+            `flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200 
               ${
                 open
-                  ? "border-theme bg-theme/5 outline-none ring-1 ring-theme "
-                  : "hover:bg-theme/5 "
+                  ? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
+                  : "hover:bg-brand-accent/5 "
               }`
           }
         >
@@ -37,8 +37,8 @@ export const DateSelect: React.FC<Props> = ({ value, onChange, label }) => (
               </>
             ) : (
               <>
-                <CalendarDaysIcon className="h-4 w-4 flex-shrink-0 text-gray-500" />
-                <span className="text-gray-500">{label}</span>
+                <CalendarDaysIcon className="h-4 w-4 flex-shrink-0 text-brand-secondary" />
+                <span className="text-brand-secondary">{label}</span>
               </>
             )}
           </span>
diff --git a/apps/app/components/ui/datepicker.tsx b/apps/app/components/ui/datepicker.tsx
index cf99bcc0408..e1013e356fe 100644
--- a/apps/app/components/ui/datepicker.tsx
+++ b/apps/app/components/ui/datepicker.tsx
@@ -36,11 +36,11 @@ export const CustomDatePicker: React.FC<Props> = ({
     }}
     className={`${
       renderAs === "input"
-        ? "block border-gray-300 bg-transparent px-3 py-2 text-sm focus:outline-none"
+        ? "block border-brand-base bg-transparent px-3 py-2 text-sm focus:outline-none"
         : renderAs === "button"
         ? `px-3 py-1 text-xs shadow-sm ${
-            disabled ? "" : "hover:bg-gray-100"
-          } duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`
+            disabled ? "" : "hover:bg-brand-surface-1"
+          } duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`
         : ""
     } ${error ? "border-red-500 bg-red-100" : ""} ${
       disabled ? "cursor-not-allowed" : "cursor-pointer"
diff --git a/apps/app/components/ui/empty-space.tsx b/apps/app/components/ui/empty-space.tsx
index 26ba70a60ca..75508529919 100644
--- a/apps/app/components/ui/empty-space.tsx
+++ b/apps/app/components/ui/empty-space.tsx
@@ -22,15 +22,15 @@ const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, I
         </div>
       ) : null}
 
-      <h2 className="text-lg font-medium text-gray-900">{title}</h2>
-      <div className="mt-1 text-sm text-gray-500">{description}</div>
-      <ul role="list" className="mt-6 divide-y divide-gray-200 border-t border-b">
+      <h2 className="text-lg font-medium text-brand-base">{title}</h2>
+      <div className="mt-1 text-sm text-brand-secondary">{description}</div>
+      <ul role="list" className="mt-6 divide-y divide-gray-200 border-t border-brand-base border-b">
         {children}
       </ul>
       {link ? (
         <div className="mt-6 flex">
           <Link href={link.href}>
-            <a className="text-sm font-medium text-theme hover:text-indigo-500">
+            <a className="text-sm font-medium text-brand-accent hover:text-brand-accent">
               {link.text}
               <span aria-hidden="true"> &rarr;</span>
             </a>
@@ -57,17 +57,17 @@ const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Ico
         } space-x-3 py-4`}
       >
         <div className="flex-shrink-0">
-          <span className={`inline-flex h-10 w-10 items-center justify-center rounded-lg bg-theme`}>
+          <span className={`inline-flex h-10 w-10 items-center justify-center rounded-lg bg-brand-accent`}>
             <Icon className="h-6 w-6 text-white" aria-hidden="true" />
           </span>
         </div>
         <div className="min-w-0 flex-1">
-          <div className="text-sm font-medium text-gray-900">{title}</div>
-          {description ? <div className="text-sm text-gray-500">{description}</div> : null}
+          <div className="text-sm font-medium text-brand-base">{title}</div>
+          {description ? <div className="text-sm text-brand-secondary">{description}</div> : null}
         </div>
         <div className="flex-shrink-0 self-center">
           <ChevronRightIcon
-            className="h-5 w-5 text-gray-400 group-hover:text-gray-500"
+            className="h-5 w-5 text-gray-400 group-hover:text-brand-secondary"
             aria-hidden="true"
           />
         </div>
diff --git a/apps/app/components/ui/empty-state.tsx b/apps/app/components/ui/empty-state.tsx
index 5c1b7eb8be4..c0fec4ee5bf 100644
--- a/apps/app/components/ui/empty-state.tsx
+++ b/apps/app/components/ui/empty-state.tsx
@@ -41,17 +41,17 @@ export const EmptyState: React.FC<Props> = ({ type, title, description, imgURL,
         <Image src={imgURL} height="128" width="288" alt={type} />
       </div>
 
-      <h3 className="text-xl font-semibold">{title}</h3>
+      <h3 className="text-xl font-semibold text-brand-secondary">{title}</h3>
       {shortcutKey(type) && (
         <span>
           Use shortcut{" "}
-          <span className="mx-1 rounded-sm border border-gray-200 bg-gray-100 px-2 py-1 text-sm font-medium text-gray-800">
+          <span className="mx-1 rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-brand-muted-1">
             {shortcutKey(type)}
           </span>{" "}
           to create {type} from anywhere.
         </span>
       )}
-      <p className="max-w-md text-sm text-gray-500">{description}</p>
+      <p className="max-w-md text-sm text-brand-secondary">{description}</p>
 
       <PrimaryButton
         className="flex items-center gap-1"
diff --git a/apps/app/components/ui/input/index.tsx b/apps/app/components/ui/input/index.tsx
index df623bfbd66..0139dae1a8d 100644
--- a/apps/app/components/ui/input/index.tsx
+++ b/apps/app/components/ui/input/index.tsx
@@ -21,7 +21,7 @@ export const Input: React.FC<Props> = ({
 }) => (
   <>
     {label && (
-      <label htmlFor={id} className="mb-2 text-gray-500">
+      <label htmlFor={id} className="mb-2 text-brand-muted-1">
         {label}
       </label>
     )}
@@ -36,9 +36,9 @@ export const Input: React.FC<Props> = ({
       }}
       className={`block rounded-md bg-transparent text-sm focus:outline-none ${
         mode === "primary"
-          ? "rounded-md border border-gray-300"
+          ? "rounded-md border border-brand-base"
           : mode === "transparent"
-          ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-indigo-500"
+          ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-brand-accent"
           : mode === "trueTransparent"
           ? "rounded border-none bg-transparent ring-0"
           : ""
diff --git a/apps/app/components/ui/labels-list.tsx b/apps/app/components/ui/labels-list.tsx
index ceb8d7e3aec..564811f1902 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-white
+              className={`h-4 w-4 flex-shrink-0 rounded-full border border-brand-base
               `}
               style={{
                 backgroundColor: color && color !== "" ? color : "#000000",
diff --git a/apps/app/components/ui/loader.tsx b/apps/app/components/ui/loader.tsx
index 4df317dfc5d..1cbb6529c88 100644
--- a/apps/app/components/ui/loader.tsx
+++ b/apps/app/components/ui/loader.tsx
@@ -19,7 +19,7 @@ type ItemProps = {
 
 const Item: React.FC<ItemProps> = ({ height = "auto", width = "auto", light }) => (
   <div
-    className={`rounded-md ${light ? "bg-gray-200" : "bg-gray-300"}`}
+    className={`rounded-md ${light ? "bg-brand-surface-2" : "bg-gray-300"}`}
     style={{ height: height, width: width }}
   />
 );
diff --git a/apps/app/components/ui/multi-input.tsx b/apps/app/components/ui/multi-input.tsx
index 7f2697bf34a..c27a900e8ff 100644
--- a/apps/app/components/ui/multi-input.tsx
+++ b/apps/app/components/ui/multi-input.tsx
@@ -53,8 +53,8 @@ export const MultiInput = ({ label, name, placeholder, setValue, watch }: any) =
 
   return (
     <>
-      {label && <label className="mb-2 text-gray-500">{label}</label>}
-      <div className="rounded-md border p-2">
+      {label && <label className="mb-2 text-brand-secondary">{label}</label>}
+      <div className="rounded-md border border-brand-base p-2">
         {watch(name)?.map((tag: any, index: number) => (
           <button type="button" className="m-1.5 rounded-full bg-slate-300 p-1.5" key={index}>
             {tag.email} <span onClick={() => removeTag(index)}>&times;</span>
diff --git a/apps/app/components/ui/multi-level-dropdown.tsx b/apps/app/components/ui/multi-level-dropdown.tsx
index 6abf22b79b4..2b2a9719bee 100644
--- a/apps/app/components/ui/multi-level-dropdown.tsx
+++ b/apps/app/components/ui/multi-level-dropdown.tsx
@@ -41,8 +41,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
           <div>
             <Menu.Button
               onClick={() => setOpenChildFor(null)}
-              className={`group flex items-center justify-between gap-2 rounded-md border px-3 py-1.5 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-                open ? "bg-gray-100 text-gray-900" : "text-gray-500"
+              className={`group flex items-center justify-between gap-2 rounded-md border border-brand-base px-3 py-1.5 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+                open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
               }`}
             >
               {label}
@@ -60,7 +60,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
           >
             <Menu.Items
               static
-              className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+              className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-brand-surface-2 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
             >
               {options.map((option) => (
                 <div className="relative p-1" key={option.id}>
@@ -83,7 +83,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                       <>
                         <div
                           className={`${
-                            active || option.selected ? "bg-gray-100" : "text-gray-900"
+                            active || option.selected ? "bg-brand-surface-1" : "text-brand-base"
                           } flex items-center gap-1 rounded px-1 py-1.5 ${
                             direction === "right" ? "justify-between" : ""
                           }`}
@@ -101,7 +101,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                   </Menu.Item>
                   {option.children && option.id === openChildFor && (
                     <div
-                      className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
+                      className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-brand-surface-2 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
                         direction === "left"
                           ? "right-full -translate-x-1"
                           : "left-full translate-x-1"
@@ -126,8 +126,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                               onSelect(child.value);
                             }}
                             className={`${
-                              child.selected ? "bg-gray-100" : "text-gray-900"
-                            } flex w-full items-center break-all rounded px-1 py-1.5 text-left capitalize hover:bg-gray-100`}
+                              child.selected ? "bg-brand-surface-1" : "text-brand-base"
+                            } flex w-full items-center break-all rounded px-1 py-1.5 text-left capitalize hover:bg-brand-surface-1`}
                           >
                             {child.label}
                           </button>
diff --git a/apps/app/components/ui/multi-level-select.tsx b/apps/app/components/ui/multi-level-select.tsx
index 1662c58a846..a063ee45f2a 100644
--- a/apps/app/components/ui/multi-level-select.tsx
+++ b/apps/app/components/ui/multi-level-select.tsx
@@ -48,7 +48,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
           <div className="relative mt-1">
             <Listbox.Button
               onClick={() => setOpenChildFor(null)}
-              className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md sm:text-sm"
+              className="relative w-full cursor-default rounded-lg bg-brand-surface-2 py-2 pl-3 pr-10 text-left shadow-md sm:text-sm"
             >
               <span className="block truncate">{selected?.label ?? label}</span>
               <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -64,13 +64,13 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
             >
               <Listbox.Options
                 static
-                className="absolute mt-1 max-h-60 w-full rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+                className="absolute mt-1 max-h-60 w-full rounded-md bg-brand-surface-2 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
               >
                 {options.map((option) => (
                   <Listbox.Option
                     key={option.id}
                     className={
-                      "relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-gray-100 hover:text-gray-900"
+                      "relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-brand-surface-1 hover:text-brand-base"
                     }
                     onClick={(e: any) => {
                       if (option.children !== null) {
@@ -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 bg-white ${
+                            className={`absolute h-auto max-h-72 w-72 rounded-lg border border-brand-base bg-brand-surface-2 ${
                               direction === "right"
                                 ? "left-full translate-x-2 rounded-tl-none shadow-md"
                                 : "right-full -translate-x-2 rounded-tr-none shadow-md"
@@ -98,7 +98,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
                               <Listbox.Option
                                 key={child.id}
                                 className={
-                                  "relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-gray-100 hover:text-gray-900"
+                                  "relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-brand-surface-1 hover:text-brand-base"
                                 }
                                 as="div"
                                 value={child}
@@ -123,7 +123,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
                             ))}
 
                             <div
-                              className={`absolute h-0 w-0 border-t-8 border-gray-300 ${
+                              className={`absolute h-0 w-0 border-t-8 border-brand-base ${
                                 direction === "right"
                                   ? "top-0 left-0 -translate-x-2 border-r-8 border-b-8 border-b-transparent border-t-transparent border-l-transparent"
                                   : "top-0 right-0 translate-x-2 border-l-8 border-b-8 border-b-transparent border-t-transparent border-r-transparent"
diff --git a/apps/app/components/ui/outline-button.tsx b/apps/app/components/ui/outline-button.tsx
index 5f67fb0f663..b4938b73065 100644
--- a/apps/app/components/ui/outline-button.tsx
+++ b/apps/app/components/ui/outline-button.tsx
@@ -32,9 +32,9 @@ export const OutlineButton = React.forwardRef<HTMLButtonElement, Props>(
         theme === "primary"
           ? `${
               disabled ? "opacity-70" : ""
-            } border border-theme text-white shadow-sm hover:bg-theme focus:outline-none`
+            } border border-brand-accent text-white shadow-sm hover:bg-brand-accent focus:outline-none`
           : theme === "secondary"
-          ? "border bg-transparent hover:bg-gray-100"
+          ? "border bg-transparent hover:bg-brand-surface-1"
           : theme === "success"
           ? `${
               disabled ? "opacity-70" : ""
diff --git a/apps/app/components/ui/text-area/index.tsx b/apps/app/components/ui/text-area/index.tsx
index 8cda2907786..be4938699ef 100644
--- a/apps/app/components/ui/text-area/index.tsx
+++ b/apps/app/components/ui/text-area/index.tsx
@@ -44,7 +44,7 @@ export const TextArea: React.FC<Props> = ({
   return (
     <>
       {label && (
-        <label htmlFor={id} className="mb-2 text-gray-500">
+        <label htmlFor={id} className="mb-2 text-brand-secondary">
           {label}
         </label>
       )}
@@ -67,7 +67,7 @@ export const TextArea: React.FC<Props> = ({
         }}
         className={`no-scrollbar w-full bg-transparent px-3 py-2 outline-none ${
           mode === "primary"
-            ? "rounded-md border border-gray-300"
+            ? "rounded-md border border-brand-base"
             : mode === "transparent"
             ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme"
             : ""
diff --git a/apps/app/components/ui/tooltip.tsx b/apps/app/components/ui/tooltip.tsx
index 580d264f367..0fb5a035214 100644
--- a/apps/app/components/ui/tooltip.tsx
+++ b/apps/app/components/ui/tooltip.tsx
@@ -41,7 +41,7 @@ export const Tooltip: React.FC<Props> = ({
     content={
       <div
         className={`${className} flex max-w-[600px] flex-col items-start justify-center gap-1 rounded-md p-2 text-left text-xs shadow-md ${
-          theme === "light" ? "bg-white text-gray-700" : "bg-black text-white"
+          theme === "light" ? "bg-brand-surface-2 text-brand-muted-1" : "bg-black text-white"
         }`}
       >
         {tooltipHeading && <h5 className="font-medium">{tooltipHeading}</h5>}
diff --git a/apps/app/components/views/delete-view-modal.tsx b/apps/app/components/views/delete-view-modal.tsx
index e48c85de8c2..1ae6865c5d1 100644
--- a/apps/app/components/views/delete-view-modal.tsx
+++ b/apps/app/components/views/delete-view-modal.tsx
@@ -81,7 +81,7 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen }) =>
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -95,8 +95,8 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen }) =>
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                       <ExclamationTriangleIcon
@@ -105,14 +105,15 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen }) =>
                       />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
                         Delete View
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-gray-500">
-                          Are you sure you want to delete view-{" "}
-                          <span className="font-bold">{data?.name}</span>? All of the data related
-                          to the view will be permanently removed. This action cannot be undone.
+                        <p className="text-sm text-brand-secondary">
+                          Are you sure you want to delete view- {" "}
+                          <span className="font-bold">{data?.name}</span>
+                          ? All of the data related to the view will be permanently removed.
+                          This action cannot be undone.
                         </p>
                       </div>
                     </div>
diff --git a/apps/app/components/views/form.tsx b/apps/app/components/views/form.tsx
index 827c68d562c..d75a66430b0 100644
--- a/apps/app/components/views/form.tsx
+++ b/apps/app/components/views/form.tsx
@@ -67,7 +67,7 @@ export const ViewForm: React.FC<Props> = ({
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateView)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-gray-900">
+        <h3 className="text-lg font-medium leading-6 text-brand-base">
           {status ? "Update" : "Create"} View
         </h3>
         <div className="space-y-3">
diff --git a/apps/app/components/views/modal.tsx b/apps/app/components/views/modal.tsx
index 053fbea58e5..aafda3499a1 100644
--- a/apps/app/components/views/modal.tsx
+++ b/apps/app/components/views/modal.tsx
@@ -114,7 +114,7 @@ export const CreateUpdateViewModal: React.FC<Props> = ({ isOpen, handleClose, da
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -128,7 +128,7 @@ export const CreateUpdateViewModal: 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 bg-white 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 bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <ViewForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/workspace/activity-graph.tsx b/apps/app/components/workspace/activity-graph.tsx
index d63d2e4d31b..741a44e9c1d 100644
--- a/apps/app/components/workspace/activity-graph.tsx
+++ b/apps/app/components/workspace/activity-graph.tsx
@@ -117,8 +117,8 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
                       date === "" ? "pointer-events-none opacity-0" : ""
                     } h-4 w-4 rounded ${
                       isActive
-                        ? `bg-blue-500 ${activitiesIntensity(isActive.activity_count)}`
-                        : "bg-gray-100"
+                        ? `bg-brand-accent ${activitiesIntensity(isActive.activity_count)}`
+                        : "bg-brand-base"
                     }`}
                   />
                 </Tooltip>
@@ -127,11 +127,11 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
           </div>
           <div className="mt-8 flex items-center gap-2 text-xs">
             <span>Less</span>
-            <span className="h-4 w-4 rounded bg-gray-100" />
-            <span className="h-4 w-4 rounded bg-blue-500 opacity-20" />
-            <span className="h-4 w-4 rounded bg-blue-500 opacity-40" />
-            <span className="h-4 w-4 rounded bg-blue-500 opacity-80" />
-            <span className="h-4 w-4 rounded bg-blue-500" />
+            <span className="h-4 w-4 rounded bg-brand-base" />
+            <span className="h-4 w-4 rounded bg-brand-accent opacity-20" />
+            <span className="h-4 w-4 rounded bg-brand-accent opacity-40" />
+            <span className="h-4 w-4 rounded bg-brand-accent opacity-80" />
+            <span className="h-4 w-4 rounded bg-brand-accent" />
             <span>More</span>
           </div>
         </div>
diff --git a/apps/app/components/workspace/completed-issues-graph.tsx b/apps/app/components/workspace/completed-issues-graph.tsx
index 5343b76216d..7439bf9cb34 100644
--- a/apps/app/components/workspace/completed-issues-graph.tsx
+++ b/apps/app/components/workspace/completed-issues-graph.tsx
@@ -37,8 +37,8 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
   }
 
   const CustomTooltip = ({ payload, label }: any) => (
-    <div className="space-y-1 rounded bg-white p-3 text-sm shadow-md">
-      <h4 className="text-gray-500">{label}</h4>
+    <div className="space-y-1 rounded bg-brand-surface-1 p-3 text-sm shadow-md">
+      <h4 className="text-brand-secondary">{label}</h4>
       <h5>Completed issues: {payload[0]?.value}</h5>
     </div>
   );
@@ -55,7 +55,7 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
           ))}
         </CustomMenu>
       </div>
-      <div className="rounded-[10px] border bg-white p-8 pl-4">
+      <div className="rounded-[10px] border border-brand-base bg-brand-sidebar p-8 pl-4">
         <ResponsiveContainer width="100%" height={250}>
           <LineChart data={data}>
             <CartesianGrid stroke="#e2e2e280" />
diff --git a/apps/app/components/workspace/confirm-workspace-member-remove.tsx b/apps/app/components/workspace/confirm-workspace-member-remove.tsx
index c70c5c98d4f..9a9df93b77f 100644
--- a/apps/app/components/workspace/confirm-workspace-member-remove.tsx
+++ b/apps/app/components/workspace/confirm-workspace-member-remove.tsx
@@ -39,7 +39,7 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -53,8 +53,8 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, 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 bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                       <ExclamationTriangleIcon
@@ -63,11 +63,11 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
                       />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
                         Remove {data?.email}?
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-gray-500">
+                        <p className="text-sm text-brand-secondary">
                           Are you sure you want to remove member- {" "}
                           <span className="font-bold">{data?.email}</span>
                           ? They will no longer have access to this workspace. This action
diff --git a/apps/app/components/workspace/create-workspace-form.tsx b/apps/app/components/workspace/create-workspace-form.tsx
index 10d9ed919ad..1c4e7114ff7 100644
--- a/apps/app/components/workspace/create-workspace-form.tsx
+++ b/apps/app/components/workspace/create-workspace-form.tsx
@@ -100,7 +100,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
       onSubmit={handleSubmit(handleCreateWorkspace)}
     >
       <div className="flex w-full max-w-xl flex-col">
-        <div className="flex flex-col rounded-[10px] bg-white">
+        <div className="flex flex-col rounded-[10px] bg-brand-surface-2">
           <div className="flex flex-col justify-between gap-3 px-4 py-7">
             <div className="flex flex-col items-start justify-center gap-2.5">
               <span>Workspace name</span>
@@ -123,8 +123,8 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
             </div>
             <div className="flex flex-col items-start justify-center gap-2.5">
               <span>Workspace URL</span>
-              <div className="flex w-full items-center rounded-md border border-gray-300 px-3">
-                <span className="text-sm whitespace-nowrap text-slate-600">
+              <div className="flex w-full items-center rounded-md border border-brand-base px-3">
+                <span className="whitespace-nowrap text-sm text-slate-600">
                   {typeof window !== "undefined" && window.location.origin}/
                 </span>
                 <Input
@@ -152,7 +152,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
             </div>
           </div>
 
-          <div className="flex flex-col items-start justify-center gap-2.5 border-t border-gray-300 px-4 py-7">
+          <div className="flex flex-col items-start justify-center gap-2.5 border-t border-brand-base px-4 py-7">
             <span>How large is your company</span>
             <div className="w-full">
               <Controller
diff --git a/apps/app/components/workspace/delete-workspace-modal.tsx b/apps/app/components/workspace/delete-workspace-modal.tsx
index 19189abc977..5e354a82785 100644
--- a/apps/app/components/workspace/delete-workspace-modal.tsx
+++ b/apps/app/components/workspace/delete-workspace-modal.tsx
@@ -88,7 +88,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -102,7 +102,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-100 p-4">
@@ -117,7 +117,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
                   </div>
 
                   <span>
-                    <p className="text-sm leading-7 text-gray-500">
+                    <p className="text-sm leading-7 text-brand-secondary">
                       Are you sure you want to delete workspace{" "}
                       <span className="break-all font-semibold">{data?.name}</span>? All of the data
                       related to the workspace will be permanently removed. This action cannot be
diff --git a/apps/app/components/workspace/help-section.tsx b/apps/app/components/workspace/help-section.tsx
index 36297cff30a..013cbd1bfd0 100644
--- a/apps/app/components/workspace/help-section.tsx
+++ b/apps/app/components/workspace/help-section.tsx
@@ -58,13 +58,13 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
 
   return (
     <div
-      className={`flex w-full items-center justify-between self-baseline border-t bg-white px-6 py-2 ${
+      className={`flex w-full items-center justify-between self-baseline border-t border-brand-base bg-brand-sidebar px-6 py-2 ${
         sidebarCollapse ? "flex-col" : ""
       }`}
     >
       <button
         type="button"
-        className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 ${
+        className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base ${
           sidebarCollapse ? "w-full justify-center" : ""
         }`}
         onClick={() => {
@@ -75,36 +75,36 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
         }}
         title="Shortcuts"
       >
-        <RocketLaunchIcon className="h-4 w-4 text-gray-500" />
+        <RocketLaunchIcon className="h-4 w-4 text-brand-secondary" />
         {!sidebarCollapse && <span>Shortcuts</span>}
       </button>
       <button
         type="button"
-        className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 ${
+        className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base ${
           sidebarCollapse ? "w-full justify-center" : ""
         }`}
         onClick={() => setIsNeedHelpOpen((prev) => !prev)}
         title="Help"
       >
-        <QuestionMarkCircleIcon className="h-4 w-4 text-gray-500" />
+        <QuestionMarkCircleIcon className="h-4 w-4 text-brand-secondary" />
         {!sidebarCollapse && <span>Help</span>}
       </button>
       <button
         type="button"
-        className="flex items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 md:hidden"
+        className="flex items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base md:hidden"
         onClick={() => setSidebarActive(false)}
       >
-        <ArrowLongLeftIcon className="h-4 w-4 flex-shrink-0 text-gray-500 group-hover:text-gray-900" />
+        <ArrowLongLeftIcon className="h-4 w-4 flex-shrink-0 text-brand-secondary group-hover:text-brand-base" />
       </button>
       <button
         type="button"
-        className={`hidden items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 md:flex ${
+        className={`hidden items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base md:flex ${
           sidebarCollapse ? "w-full justify-center" : ""
         }`}
         onClick={() => toggleCollapsed()}
       >
         <ArrowLongLeftIcon
-          className={`h-4 w-4 flex-shrink-0 text-gray-500 duration-300 group-hover:text-gray-900 ${
+          className={`h-4 w-4 flex-shrink-0 text-brand-secondary duration-300 group-hover:text-brand-base ${
             sidebarCollapse ? "rotate-180" : ""
           }`}
         />
@@ -121,7 +121,7 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
           leaveTo="transform opacity-0 scale-95"
         >
           <div
-            className={`absolute bottom-2 ${helpOptionMode} space-y-2 rounded-sm bg-white p-1 shadow-md`}
+            className={`absolute bottom-2 ${helpOptionMode} space-y-2 rounded-sm bg-brand-surface-2 p-1 shadow-md`}
             ref={helpOptionsRef}
           >
             {helpOptions.map(({ name, Icon, href, onClick }) => {
@@ -130,9 +130,9 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
                   <Link href={href} key={name}>
                     <a
                       target="_blank"
-                      className="flex items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-1 text-xs hover:bg-gray-100"
+                      className="flex items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-1 text-xs hover:bg-brand-surface-1"
                     >
-                      <Icon className="h-4 w-4 text-gray-500" />
+                      <Icon className="h-4 w-4 text-brand-secondary" />
                       <span className="text-sm">{name}</span>
                     </a>
                   </Link>
@@ -143,9 +143,9 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
                     key={name}
                     type="button"
                     onClick={onClick ? onClick : undefined}
-                    className="flex w-full items-center gap-x-2 whitespace-nowrap rounded-md  px-2 py-1 text-xs hover:bg-gray-100"
+                    className="flex w-full items-center gap-x-2 whitespace-nowrap rounded-md  px-2 py-1 text-xs hover:bg-brand-surface-1"
                   >
-                    <Icon className="h-4 w-4 text-gray-500" />
+                    <Icon className="h-4 w-4 text-brand-secondary" />
                     <span className="text-sm">{name}</span>
                   </button>
                 );
diff --git a/apps/app/components/workspace/issues-list.tsx b/apps/app/components/workspace/issues-list.tsx
index 8308baede43..3325040deff 100644
--- a/apps/app/components/workspace/issues-list.tsx
+++ b/apps/app/components/workspace/issues-list.tsx
@@ -36,10 +36,10 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
     <div>
       <h3 className="mb-2 font-semibold capitalize">{type} Issues</h3>
       {issues ? (
-        <div className="rounded-[10px] border bg-white p-4 text-sm h-[calc(100%-2.25rem)]">
+        <div className="rounded-[10px] border border-brand-base bg-brand-sidebar p-4 text-sm h-[calc(100%-2.25rem)]">
           <div
             className={`mb-2 grid grid-cols-4 gap-2 rounded-lg px-3 py-2 font-medium ${
-              type === "overdue" ? "bg-red-100" : "bg-gray-100"
+              type === "overdue" ? "bg-red-600 bg-opacity-20" : "bg-brand-surface-1"
             }`}
           >
             <h4 className="capitalize">{type}</h4>
@@ -83,12 +83,12 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
               })
             ) : (
               <div className="grid h-full place-items-center">
-                <div className="flex flex-col items-center gap-4">
+                <div className="flex flex-col items-center gap-4 my-5">
                   <LayerDiagonalIcon height={60} width={60} />
                   <span>
                     No issues found. Use{" "}
-                    <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre> shortcut to create
-                    a new issue
+                    <pre className="inline rounded bg-brand-surface-1 px-2 py-1">C</pre> shortcut to
+                    create a new issue
                   </span>
                 </div>
               </div>
diff --git a/apps/app/components/workspace/issues-pie-chart.tsx b/apps/app/components/workspace/issues-pie-chart.tsx
index fecd4a8ec8a..eedcdd6f3a8 100644
--- a/apps/app/components/workspace/issues-pie-chart.tsx
+++ b/apps/app/components/workspace/issues-pie-chart.tsx
@@ -79,7 +79,7 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => {
   return (
     <div>
       <h3 className="mb-2 font-semibold">Issues by States</h3>
-      <div className="rounded-[10px] border bg-white p-4">
+      <div className="rounded-[10px] border border-brand-base bg-brand-sidebar p-4">
         <ResponsiveContainer width="100%" height={320}>
           <PieChart>
             <Pie
diff --git a/apps/app/components/workspace/issues-stats.tsx b/apps/app/components/workspace/issues-stats.tsx
index 18b9b808bd6..59c9fd55f79 100644
--- a/apps/app/components/workspace/issues-stats.tsx
+++ b/apps/app/components/workspace/issues-stats.tsx
@@ -11,8 +11,8 @@ type Props = {
 };
 
 export const IssuesStats: React.FC<Props> = ({ data }) => (
-  <div className="grid grid-cols-1 rounded-[10px] border bg-white lg:grid-cols-3">
-    <div className="grid grid-cols-1 divide-y border-b lg:border-r lg:border-b-0">
+  <div className="grid grid-cols-1 rounded-[10px] border border-brand-base bg-brand-sidebar lg:grid-cols-3">
+    <div className="grid grid-cols-1 divide-y divide-brand-base border-b border-brand-base lg:border-r lg:border-b-0">
       <div className="flex">
         <div className="basis-1/2 p-4">
           <h4 className="text-sm">Issues assigned to you</h4>
@@ -26,7 +26,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => (
             )}
           </h5>
         </div>
-        <div className="basis-1/2 border-l p-4">
+        <div className="basis-1/2 border-l border-brand-base p-4">
           <h4 className="text-sm">Pending issues</h4>
           <h5 className="mt-2 text-2xl font-semibold">
             {data ? (
@@ -52,7 +52,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => (
             )}
           </h5>
         </div>
-        <div className="basis-1/2 border-l p-4">
+        <div className="basis-1/2 border-l border-brand-base p-4">
           <h4 className="text-sm">Issues due by this week</h4>
           <h5 className="mt-2 text-2xl font-semibold">
             {data ? (
diff --git a/apps/app/components/workspace/send-workspace-invitation-modal.tsx b/apps/app/components/workspace/send-workspace-invitation-modal.tsx
index b81023c2ae2..f58269b89f8 100644
--- a/apps/app/components/workspace/send-workspace-invitation-modal.tsx
+++ b/apps/app/components/workspace/send-workspace-invitation-modal.tsx
@@ -83,7 +83,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -97,14 +97,14 @@ const SendWorkspaceInvitationModal: 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 bg-white p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="space-y-5">
                     <div>
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
                         Members
                       </Dialog.Title>
-                      <p className="text-sm text-gray-500">
+                      <p className="text-sm text-brand-secondary">
                         Invite members to work on your workspace.
                       </p>
                     </div>
diff --git a/apps/app/components/workspace/sidebar-dropdown.tsx b/apps/app/components/workspace/sidebar-dropdown.tsx
index 93be576fe08..ac5ee7f7a64 100644
--- a/apps/app/components/workspace/sidebar-dropdown.tsx
+++ b/apps/app/components/workspace/sidebar-dropdown.tsx
@@ -84,13 +84,13 @@ export const WorkspaceSidebarDropdown = () => {
     <div className="relative">
       <Menu as="div" className="col-span-4 inline-block w-full p-3 text-left">
         <div className="flex items-center justify-between gap-2.5">
-          <Menu.Button className="flex w-full items-center rounded-md py-2 text-sm font-semibold text-gray-700 focus:outline-none">
+          <Menu.Button className="flex w-full items-center rounded-md py-2 text-sm font-semibold text-brand-muted-1 focus:outline-none">
             <div
-              className={`flex w-full items-center gap-x-2 rounded-md bg-gray-100 px-2 py-1.5 ${
+              className={`flex w-full items-center gap-x-2 rounded-md bg-brand-base px-2 py-1.5 ${
                 sidebarCollapse ? "justify-center" : ""
               }`}
             >
-              <div className="relative grid h-6 w-6 place-items-center rounded bg-gray-700 uppercase text-white">
+              <div className="relative grid h-6 w-6 place-items-center rounded bg-gray-700 dark:bg-brand-surface-2 uppercase text-white dark:text-gray-800">
                 {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
                   <Image
                     src={activeWorkspace.logo}
@@ -134,11 +134,11 @@ export const WorkspaceSidebarDropdown = () => {
         >
           <Menu.Items
             className="fixed left-2 z-20 mt-1  flex w-full max-w-[17rem] origin-top-left flex-col rounded-md
-          bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+          bg-brand-surface-2 shadow-lg border border-brand-base focus:outline-none"
           >
             <div className="flex flex-col items-start justify-start gap-3 p-3">
-              <div className="text-sm text-gray-500">{user?.email}</div>
-              <span className="text-sm font-semibold text-gray-500">Workspace</span>
+              <div className="text-sm text-brand-secondary">{user?.email}</div>
+              <span className="text-sm font-semibold text-brand-secondary">Workspace</span>
               {workspaces ? (
                 <div className="flex h-full w-full flex-col items-start justify-start gap-3.5">
                   {workspaces.length > 0 ? (
@@ -148,7 +148,7 @@ export const WorkspaceSidebarDropdown = () => {
                           <button
                             type="button"
                             onClick={() => handleWorkspaceNavigation(workspace)}
-                            className="flex w-full items-center justify-between gap-1 rounded-md text-sm text-gray-900"
+                            className="flex w-full items-center justify-between gap-1 rounded-md text-sm text-brand-base"
                           >
                             <div className="flex items-center justify-start gap-2.5">
                               <span className="relative flex h-6 w-6 items-center justify-center rounded bg-gray-700 p-2 text-xs uppercase text-white">
@@ -169,7 +169,7 @@ export const WorkspaceSidebarDropdown = () => {
                             </div>
                             <span className="p-1">
                               <CheckIcon
-                                className={`h-3 w-3.5 text-gray-600 ${
+                                className={`h-3 w-3.5 text-brand-base ${
                                   active || workspace.id === activeWorkspace?.id
                                     ? "opacity-100"
                                     : "opacity-0"
@@ -204,12 +204,12 @@ export const WorkspaceSidebarDropdown = () => {
                 </div>
               )}
             </div>
-            <div className="flex w-full flex-col items-start justify-start gap-2 border-t border-t-gray-200 px-3 py-2 text-sm">
+            <div className="flex w-full flex-col items-start justify-start gap-2 border-t border-t-brand-base px-3 py-2 text-sm">
               {userLinks(workspaceSlug as string).map((link, index) => (
                 <Menu.Item
                   key={index}
                   as="div"
-                  className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-gray-600 hover:bg-gray-100"
+                  className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-gray-600 hover:bg-brand-surface-1"
                 >
                   <Link href={link.href}>
                     <a className="w-full">{link.name}</a>
@@ -217,11 +217,11 @@ export const WorkspaceSidebarDropdown = () => {
                 </Menu.Item>
               ))}
             </div>
-            <div className="w-full border-t border-t-gray-200 px-3 py-2">
+            <div className="w-full border-t border-t-brand-base px-3 py-2">
               <Menu.Item
                 as="button"
                 type="button"
-                className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-red-600 hover:bg-gray-100"
+                className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-red-600 hover:bg-brand-surface-1"
                 onClick={handleSignOut}
               >
                 Sign out
diff --git a/apps/app/components/workspace/sidebar-menu.tsx b/apps/app/components/workspace/sidebar-menu.tsx
index ea43976377e..4250d7376ae 100644
--- a/apps/app/components/workspace/sidebar-menu.tsx
+++ b/apps/app/components/workspace/sidebar-menu.tsx
@@ -43,8 +43,8 @@ export const WorkspaceSidebarMenu: React.FC = () => {
           <a
             className={`${
               link.href === router.asPath
-                ? "bg-indigo-50 text-gray-900"
-                : "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50"
+                ? "bg-brand-base text-brand-base"
+                : "text-brand-secondary hover:bg-brand-base hover:text-brand-base focus:bg-brand-base"
             } group flex w-full items-center gap-3 rounded-md p-2 text-sm font-medium outline-none ${
               sidebarCollapse ? "justify-center" : ""
             }`}
@@ -52,8 +52,8 @@ export const WorkspaceSidebarMenu: React.FC = () => {
             <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
               <link.icon
                 className={`${
-                  link.href === router.asPath ? "text-gray-900" : "text-gray-600"
-                } group-hover:text-gray-900`}
+                  link.href === router.asPath ? "text-brand-base" : "text-brand-secondary"
+                } group-hover:text-brand-base`}
                 aria-hidden="true"
                 height="20"
                 width="20"
diff --git a/apps/app/components/workspace/single-invitation.tsx b/apps/app/components/workspace/single-invitation.tsx
index c6c3249b538..b9807c1d05a 100644
--- a/apps/app/components/workspace/single-invitation.tsx
+++ b/apps/app/components/workspace/single-invitation.tsx
@@ -45,8 +45,8 @@ const SingleInvitation: React.FC<Props> = ({
             </span>
           </div>
           <div className="min-w-0 flex-1">
-            <div className="text-sm font-medium text-gray-900">{invitation.workspace.name}</div>
-            <p className="text-sm text-gray-500">
+            <div className="text-sm font-medium text-brand-base">{invitation.workspace.name}</div>
+            <p className="text-sm text-brand-secondary">
               Invited by {invitation.workspace.owner.first_name}
             </p>
           </div>
@@ -65,7 +65,7 @@ const SingleInvitation: React.FC<Props> = ({
                 setIsChecked(e.target.checked);
               }}
               type="checkbox"
-              className="h-4 w-4 rounded border-gray-300 text-theme focus:ring-indigo-500"
+              className="h-4 w-4 rounded border-brand-base text-brand-accent focus:ring-indigo-500"
             />
           </div>
         </label>
diff --git a/apps/app/constants/themes.ts b/apps/app/constants/themes.ts
new file mode 100644
index 00000000000..8ac745b824b
--- /dev/null
+++ b/apps/app/constants/themes.ts
@@ -0,0 +1,35 @@
+export const THEMES = [
+  "light",
+  "dark",
+  "light-contrast",
+  "dark-contrast",
+  // "custom"
+];
+
+export const THEMES_OBJ = [
+  {
+    value: "light",
+    label: "Light",
+    type: "light",
+  },
+  {
+    value: "dark",
+    label: "Dark",
+    type: "dark",
+  },
+  {
+    value: "light-contrast",
+    label: "Light High Contrast",
+    type: "light",
+  },
+  {
+    value: "dark-contrast",
+    label: "Dark High Contrast",
+    type: "dark",
+  },
+  // {
+  //   value: "custom",
+  //   label: "Custom",
+  //   type: "light",
+  // },
+];
diff --git a/apps/app/helpers/theme.helper.ts b/apps/app/helpers/theme.helper.ts
new file mode 100644
index 00000000000..d3d76f3e538
--- /dev/null
+++ b/apps/app/helpers/theme.helper.ts
@@ -0,0 +1,35 @@
+export const hexToRgb = (hex: string) => {
+  hex = hex.toLowerCase();
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)].join(",")
+    : null;
+};
+
+export const applyTheme = (palette: string, isDarkPalette: boolean) => {
+  const values: string[] = [];
+  palette.split(",").map((color: string) => {
+    const cssVarColor = hexToRgb(color);
+    if (cssVarColor) values.push(cssVarColor);
+  });
+
+  const cssVars = [
+    "--color-bg-base",
+    "--color-bg-surface-1",
+    "--color-bg-surface-2",
+    "--color-border",
+    "--color-bg-sidebar",
+    "--color-accent",
+    "--color-text-base",
+    "--color-text-secondary",
+    "color-scheme",
+  ];
+
+  values.push(isDarkPalette ? "dark" : "light");
+
+  cssVars.forEach((cssVar, i) =>
+    document
+      .querySelector<HTMLElement>("[data-theme='custom']")
+      ?.style.setProperty(cssVar, values[i])
+  );
+};
diff --git a/apps/app/layouts/app-layout/app-header.tsx b/apps/app/layouts/app-layout/app-header.tsx
index 13106f480cf..81ec5dbf0c4 100644
--- a/apps/app/layouts/app-layout/app-header.tsx
+++ b/apps/app/layouts/app-layout/app-header.tsx
@@ -9,12 +9,12 @@ type Props = {
 };
 
 const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => (
-  <div className="flex w-full flex-row items-center justify-between gap-y-4 border-b bg-white px-5 py-4 ">
+  <div className="flex w-full flex-row items-center justify-between gap-y-4 border-b border-brand-base bg-brand-sidebar px-5 py-4 ">
     <div className="flex items-center gap-2">
       <div className="block md:hidden">
         <button
           type="button"
-          className="grid h-8 w-8 place-items-center rounded border border-gray-300"
+          className="grid h-8 w-8 place-items-center rounded border border-brand-base"
           onClick={() => setToggleSidebar((prevData) => !prevData)}
         >
           <Bars3Icon className="h-5 w-5" />
diff --git a/apps/app/layouts/app-layout/app-sidebar.tsx b/apps/app/layouts/app-layout/app-sidebar.tsx
index 8659daa1588..5a311a00c36 100644
--- a/apps/app/layouts/app-layout/app-sidebar.tsx
+++ b/apps/app/layouts/app-layout/app-sidebar.tsx
@@ -22,9 +22,9 @@ const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) =>
       <div
         className={`${sidebarCollapse ? "" : "w-auto md:w-[17rem]"} fixed inset-y-0 top-0 ${
           toggleSidebar ? "left-0" : "-left-full md:left-0"
-        } flex h-full flex-col bg-white duration-300 md:relative`}
+        } flex h-full flex-col bg-brand-sidebar duration-300 md:relative`}
       >
-        <div className="flex h-full flex-1 flex-col border-r">
+        <div className="flex h-full flex-1 flex-col border-r border-brand-base">
           <div className="flex h-full flex-1 flex-col">
             <WorkspaceSidebarDropdown />
             <WorkspaceSidebarMenu />
diff --git a/apps/app/layouts/app-layout/index.tsx b/apps/app/layouts/app-layout/index.tsx
index 9bf11fe9dd1..230683ed0a4 100644
--- a/apps/app/layouts/app-layout/index.tsx
+++ b/apps/app/layouts/app-layout/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import React, { FC, useState, useEffect } from "react";
 
 import { useRouter } from "next/router";
 import Link from "next/link";
@@ -128,19 +128,19 @@ const AppLayout: FC<AppLayoutProps> = ({
                   noPadding ? "" : settingsLayout ? "p-8 lg:px-28" : "p-8"
                 } ${
                   bg === "primary"
-                    ? "bg-primary"
+                    ? "bg-brand-base"
                     : bg === "secondary"
-                    ? "bg-secondary"
-                    : "bg-primary"
+                    ? "bg-brand-base"
+                    : "bg-brand-base"
                 }`}
               >
                 {settingsLayout && (
                   <div className="mb-12 space-y-6">
                     <div>
-                      <h3 className="text-3xl font-semibold">
+                      <h3 className="text-3xl font-semibold text-brand-base">
                         {profilePage ? "Profile" : projectId ? "Project" : "Workspace"} Settings
                       </h3>
-                      <p className="mt-1 text-gray-600">
+                      <p className="mt-1 text-brand-secondary">
                         {profilePage
                           ? "This information will be visible to only you."
                           : projectId
diff --git a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
index b98e5e2e2bd..a233d164793 100644
--- a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
+++ b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
@@ -121,7 +121,7 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
               className={`flex w-full flex-grow flex-col ${
                 noPadding || issueView === "list" ? "" : settingsLayout ? "p-8 lg:px-28" : "p-8"
               } ${
-                bg === "primary" ? "bg-primary" : bg === "secondary" ? "bg-secondary" : "bg-primary"
+                bg === "primary" ? "bg-brand-base" : bg === "secondary" ? "bg-brand-surface-1" : "bg-brand-base"
               }`}
             >
               {settingsLayout && (
diff --git a/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx b/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
index 8f9ec7f8b95..cd3766cf1d6 100644
--- a/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
+++ b/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
@@ -131,10 +131,10 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
                   noPadding ? "" : settingsLayout || profilePage ? "p-8 lg:px-28" : "p-8"
                 } ${
                   bg === "primary"
-                    ? "bg-primary"
+                    ? "bg-brand-base"
                     : bg === "secondary"
-                    ? "bg-secondary"
-                    : "bg-primary"
+                    ? "bg-brand-surface-1"
+                    : "bg-brand-base"
                 }`}
               >
                 {(settingsLayout || profilePage) && (
diff --git a/apps/app/layouts/default-layout/index.tsx b/apps/app/layouts/default-layout/index.tsx
index ad50fb5f610..4134f63525a 100644
--- a/apps/app/layouts/default-layout/index.tsx
+++ b/apps/app/layouts/default-layout/index.tsx
@@ -21,7 +21,7 @@ type Props = {
 
 const DefaultLayout: React.FC<Props> = ({ meta, children }) => (
   <Container meta={meta}>
-    <div className="w-full h-screen overflow-auto bg-gray-50">
+    <div className="w-full h-screen overflow-auto bg-brand-base">
       <>{children}</>
     </div>
   </Container>
diff --git a/apps/app/layouts/settings-navbar.tsx b/apps/app/layouts/settings-navbar.tsx
index 169690afffb..027f87f61d2 100644
--- a/apps/app/layouts/settings-navbar.tsx
+++ b/apps/app/layouts/settings-navbar.tsx
@@ -93,10 +93,10 @@ const SettingsNavbar: React.FC<Props> = ({ profilePage = false }) => {
         <Link key={link.href} href={link.href}>
           <a>
             <div
-              className={`rounded-3xl border px-5 py-1.5 text-sm sm:px-7 sm:py-2 sm:text-base ${
+              className={`rounded-3xl border border-brand-base px-5 py-1.5 text-sm sm:px-7 sm:py-2 sm:text-base ${
                 router.asPath === link.href
-                  ? "border-theme bg-theme text-white"
-                  : "border-gray-300 bg-white hover:bg-hover-gray"
+                  ? "border-brand-accent bg-brand-accent text-white"
+                  : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
               }`}
             >
               {link.label}
diff --git a/apps/app/package.json b/apps/app/package.json
index 823541cb292..6911625b2a1 100644
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -27,6 +27,7 @@
     "lodash.debounce": "^4.0.8",
     "next": "12.3.2",
     "next-pwa": "^5.6.0",
+    "next-themes": "^0.2.1",
     "nprogress": "^0.2.0",
     "react": "18.2.0",
     "react-beautiful-dnd": "^13.1.1",
diff --git a/apps/app/pages/404.tsx b/apps/app/pages/404.tsx
index 84efad79381..2a136a164c6 100644
--- a/apps/app/pages/404.tsx
+++ b/apps/app/pages/404.tsx
@@ -26,7 +26,7 @@ const PageNotFound: NextPage = () => (
         </div>
         <div className="space-y-2">
           <h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>
-          <p className="text-sm text-gray-500">
+          <p className="text-sm text-brand-secondary">
             Sorry, the page you are looking for cannot be found. It may have been removed, had its
             name changed, or is temporarily unavailable.
           </p>
diff --git a/apps/app/pages/[workspaceSlug]/index.tsx b/apps/app/pages/[workspaceSlug]/index.tsx
index 0546985f531..5e46cac57d6 100644
--- a/apps/app/pages/[workspaceSlug]/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/index.tsx
@@ -21,7 +21,7 @@ import type { NextPage } from "next";
 import { USER_WORKSPACE_DASHBOARD } from "constants/fetch-keys";
 
 const WorkspacePage: NextPage = () => {
-  const [month, setMonth] = useState(new Date().getMonth() + 1);
+   const [month, setMonth] = useState(new Date().getMonth() + 1);
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -42,7 +42,7 @@ const WorkspacePage: NextPage = () => {
       <div className="h-full w-full">
         <div className="flex flex-col gap-8">
           <div
-            className="flex flex-col bg-white justify-between gap-x-2 gap-y-6 rounded-lg px-8 py-6 text-black md:flex-row md:items-center md:py-3"
+            className="flex flex-col bg-brand-sidebar justify-between gap-x-2 gap-y-6 rounded-lg px-8 py-6 text-brand-muted-1 md:flex-row md:items-center md:py-3"
             // style={{ background: "linear-gradient(90deg, #8e2de2 0%, #4a00e0 100%)" }}
           >
             <p className="font-semibold">
@@ -55,7 +55,7 @@ const WorkspacePage: NextPage = () => {
               <a
                 href="https://github.com/makeplane/plane"
                 target="_blank"
-                className="rounded-md border-2 border-black font-medium px-3 py-1.5 text-sm duration-300"
+                className="rounded-md border-2 border-brand-base font-medium px-3 py-1.5 text-sm 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 9e2e9732eb3..8e48db44a3d 100644
--- a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
@@ -51,8 +51,8 @@ const MyIssuesPage: NextPage = () => {
               {({ open }) => (
                 <>
                   <Popover.Button
-                    className={`group flex items-center gap-2 rounded-md border bg-transparent p-2 text-xs font-medium hover:bg-gray-100 hover:text-gray-900 focus:outline-none ${
-                      open ? "bg-gray-100 text-gray-900" : "text-gray-500"
+                    className={`group flex items-center gap-2 rounded-md border border-brand-base bg-transparent px-3 py-1.5 text-xs hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none ${
+                      open ? "bg-brand-surface-1 text-brand-base" : "text-brand-muted-1"
                     }`}
                   >
                     <span>View</span>
@@ -68,7 +68,7 @@ const MyIssuesPage: NextPage = () => {
                     leaveFrom="opacity-100 translate-y-0"
                     leaveTo="opacity-0 translate-y-1"
                   >
-                    <Popover.Panel className="absolute right-1/2 z-10 mr-5 mt-1 w-screen max-w-xs translate-x-1/2 transform overflow-hidden rounded-lg bg-white p-3 shadow-lg">
+                    <Popover.Panel className="absolute right-1/2 z-10 mr-5 mt-1 w-screen max-w-xs translate-x-1/2 transform overflow-hidden rounded-lg bg-brand-base p-3 shadow-lg">
                       <div className="relative flex flex-col gap-1 gap-y-4">
                         <div className="relative flex flex-col gap-1">
                           <h4 className="text-base text-gray-600">Properties</h4>
@@ -120,10 +120,10 @@ const MyIssuesPage: NextPage = () => {
               <div className="flex flex-col space-y-5">
                 <Disclosure as="div" defaultOpen>
                   {({ open }) => (
-                    <div className="bg-white">
+                    <div className="rounded-[10px] border border-brand-base bg-brand-base">
                       <div
-                        className={`flex items-center justify-start bg-gray-100 px-5 py-3 ${
-                          open ? "" : "rounded-[10px]"
+                        className={`flex items-center justify-start bg-brand-surface-1 px-4 py-2.5 ${
+                          open ? "rounded-t-[10px]" : "rounded-[10px]"
                         }`}
                       >
                         <Disclosure.Button>
@@ -136,7 +136,7 @@ const MyIssuesPage: NextPage = () => {
                               />
                             </span>
                             <h2 className="font-medium leading-5">My Issues</h2>
-                            <span className="rounded-full bg-gray-200 py-0.5 px-3 text-sm text-black">
+                            <span className="rounded-full bg-brand-surface-2 py-0.5 px-3 text-sm text-brand-secondary">
                               {myIssues.length}
                             </span>
                           </div>
diff --git a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx b/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
index 4f36c5c3ed8..ea6b510ee77 100644
--- a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
@@ -13,7 +13,7 @@ import useToast from "hooks/use-toast";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // components
-import { ImageUploadModal } from "components/core";
+import { ImageUploadModal, ThemeSwitch } from "components/core";
 // ui
 import { CustomSelect, DangerButton, Input, SecondaryButton, Spinner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -147,8 +147,8 @@ const Profile: NextPage = () => {
         <div className="space-y-8 sm:space-y-12">
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-xl font-semibold">Profile Picture</h4>
-              <p className="text-gray-500">
+              <h4 className="text-xl font-semibold text-brand-base">Profile Picture</h4>
+              <p className="text-brand-secondary">
                 Max file size is 5MB. Supported file types are .jpg and .png.
               </p>
             </div>
@@ -156,8 +156,8 @@ const Profile: NextPage = () => {
               <div className="flex items-center gap-4">
                 <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
                   {!watch("avatar") || watch("avatar") === "" ? (
-                    <div className="bg-gray-100 h-12 w-12 p-2 rounded-md">
-                      <UserIcon className="h-full w-full text-gray-300" />
+                    <div className="bg-brand-surface-2 h-12 w-12 p-2 rounded-md">
+                      <UserIcon className="h-full w-full text-brand-secondary" />
                     </div>
                   ) : (
                     <div className="relative h-12 w-12 overflow-hidden">
@@ -195,8 +195,8 @@ const Profile: NextPage = () => {
           </div>
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-xl font-semibold">Full Name</h4>
-              <p className="text-gray-500">
+              <h4 className="text-xl font-semibold text-brand-base">Full Name</h4>
+              <p className="text-brand-secondary">
                 This name will be reflected on all the projects you are working on.
               </p>
             </div>
@@ -224,8 +224,8 @@ const Profile: NextPage = () => {
           </div>
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-xl font-semibold">Email</h4>
-              <p className="text-gray-500">The email address that you are using.</p>
+              <h4 className="text-xl font-semibold text-brand-base">Email</h4>
+              <p className="text-brand-secondary">The email address that you are using.</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               <Input
@@ -241,8 +241,8 @@ const Profile: NextPage = () => {
           </div>
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-xl font-semibold">Role</h4>
-              <p className="text-gray-500">Add your role.</p>
+              <h4 className="text-xl font-semibold text-brand-base">Role</h4>
+              <p className="text-brand-secondary">Add your role.</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               <Controller
@@ -268,6 +268,15 @@ const Profile: NextPage = () => {
               />
             </div>
           </div>
+          <div className="grid grid-cols-12 gap-4 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-xl font-semibold text-brand-base">Theme</h4>
+              <p className="text-brand-secondary">Select or customize your interface color scheme.</p>
+            </div>
+            <div className="col-span-12 sm:col-span-6">
+              <ThemeSwitch />
+            </div>
+          </div>
           <div className="sm:text-right">
             <SecondaryButton onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
               {isSubmitting ? "Updating..." : "Update profile"}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index b96dc794573..ad9c231da5c 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -150,7 +150,7 @@ const SingleCycle: React.FC = () => {
             <IssuesFilterView />
             <button
               type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100 ${
+              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1 ${
                 cycleSidebar ? "rotate-180" : ""
               }`}
               onClick={() => setCycleSidebar((prevData) => !prevData)}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index cd53e80b6cc..55351b42d1e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -127,7 +127,7 @@ const ProjectCycles: NextPage = () => {
       <div className="space-y-8">
         <div className="flex flex-col gap-5">
           {currentAndUpcomingCycles && currentAndUpcomingCycles.current_cycle.length > 0 && (
-            <h3 className="text-3xl font-semibold text-black">Current Cycle</h3>
+            <h3 className="text-3xl font-semibold text-brand-base">Current Cycle</h3>
           )}
           <div className="space-y-5">
             <CyclesList
@@ -139,7 +139,7 @@ const ProjectCycles: NextPage = () => {
           </div>
         </div>
         <div className="flex flex-col gap-5">
-          <h3 className="text-3xl font-semibold text-black">Other Cycles</h3>
+          <h3 className="text-3xl font-semibold text-brand-base">Other Cycles</h3>
           <div>
             <Tab.Group
               defaultIndex={currentTabValue(cycleTab)}
@@ -165,8 +165,8 @@ const ProjectCycles: NextPage = () => {
                   className={({ selected }) =>
                     `rounded-3xl border px-5 py-1.5 text-sm outline-none sm:px-7 sm:py-2 sm:text-base ${
                       selected
-                        ? "border-theme bg-theme text-white"
-                        : "border-gray-300 bg-white hover:bg-hover-gray"
+                        ? "border-brand-accent bg-brand-accent text-white"
+                        : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
                     }`
                   }
                 >
@@ -176,8 +176,8 @@ const ProjectCycles: NextPage = () => {
                   className={({ selected }) =>
                     `rounded-3xl border px-5 py-1.5 text-sm outline-none sm:px-7 sm:py-2 sm:text-base ${
                       selected
-                        ? "border-theme bg-theme text-white"
-                        : "border-gray-300 bg-white hover:bg-hover-gray"
+                        ? "border-brand-accent bg-brand-accent text-white"
+                        : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
                     }`
                   }
                 >
@@ -187,8 +187,8 @@ const ProjectCycles: NextPage = () => {
                   className={({ selected }) =>
                     `rounded-3xl border px-5 py-1.5 text-sm outline-none sm:px-7 sm:py-2 sm:text-base ${
                       selected
-                        ? "border-theme bg-theme text-white"
-                        : "border-gray-300 bg-white hover:bg-hover-gray"
+                        ? "border-brand-accent bg-brand-accent text-white"
+                        : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
                     }`
                   }
                 >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index b2ebf721df2..6f6bd95e51e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -140,10 +140,10 @@ const IssueDetailsPage: NextPage = () => {
     >
       {issueDetails && projectId ? (
         <div className="flex h-full">
-          <div className="basis-2/3 space-y-5 divide-y-2 p-5">
+          <div className="basis-2/3 space-y-5 divide-y-2 divide-brand-base p-5">
             <div className="rounded-lg">
               {issueDetails?.parent && issueDetails.parent !== "" ? (
-                <div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-gray-100 p-2 text-xs">
+                <div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-1 p-2 text-xs">
                   <Link
                     href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
                       issueDetails.parent
@@ -182,7 +182,7 @@ const IssueDetailsPage: NextPage = () => {
                         </CustomMenu.MenuItem>
                       ))
                     ) : (
-                      <CustomMenu.MenuItem className="flex items-center gap-2 whitespace-nowrap p-2 text-left text-xs text-gray-900">
+                      <CustomMenu.MenuItem className="flex items-center gap-2 whitespace-nowrap p-2 text-left text-xs text-brand-base">
                         No other sibling issues
                       </CustomMenu.MenuItem>
                     )}
@@ -201,13 +201,13 @@ const IssueDetailsPage: NextPage = () => {
                 <IssueAttachments />
               </div>
             </div>
-            <div className="space-y-5 bg-secondary pt-3">
-              <h3 className="text-lg">Comments/Activity</h3>
+            <div className="space-y-5 bg-brand-base pt-3">
+              <h3 className="text-lg text-brand-base">Comments/Activity</h3>
               <IssueActivitySection />
               <AddComment />
             </div>
           </div>
-          <div className="basis-1/3 space-y-5 border-l p-5">
+          <div className="basis-1/3 space-y-5 border-l border-brand-base p-5">
             <IssueDetailsSidebar
               control={control}
               issueDetail={issueDetails}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index e8b2daf9c92..6473aa2a70a 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -154,7 +154,7 @@ const SingleModule: React.FC = () => {
             <IssuesFilterView />
             <button
               type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100 ${
+              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1 ${
                 moduleSidebar ? "rotate-180" : ""
               }`}
               onClick={() => setModuleSidebar((prevData) => !prevData)}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index 087230226b4..df7f21708c9 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -91,7 +91,7 @@ const ProjectModules: NextPage = () => {
         modules.length > 0 ? (
           <div className="space-y-5">
             <div className="flex flex-col gap-5">
-              <h3 className="text-3xl font-semibold text-black">Modules</h3>
+              <h3 className="text-3xl font-semibold text-brand-base">Modules</h3>
 
               <div className="grid grid-cols-1 gap-9 sm:grid-cols-2 lg:grid-cols-3">
                 {modules.map((module) => (
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index 3c42621984b..f4545ec306e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -310,11 +310,11 @@ const SinglePage: NextPage = () => {
       }
     >
       {pageDetails ? (
-        <div className="h-full w-full space-y-4 rounded-md border bg-white p-4">
+        <div className="h-full w-full space-y-4 rounded-md border border-brand-base bg-brand-surface-1 p-4">
           <div className="flex items-center justify-between gap-2 px-3">
             <button
               type="button"
-              className="flex items-center gap-2 text-sm text-gray-500"
+              className="flex items-center gap-2 text-sm text-brand-secondary"
               onClick={() => router.back()}
             >
               <ArrowLeftIcon className="h-4 w-4" />
@@ -331,7 +331,7 @@ const SinglePage: NextPage = () => {
                     return (
                       <div
                         key={label.id}
-                        className="group flex items-center gap-1 cursor-pointer rounded-2xl border px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50"
+                        className="group flex items-center gap-1 cursor-pointer rounded-2xl border border-brand-base px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50"
                         onClick={() => {
                           const updatedLabels = pageDetails.labels.filter((l) => l !== labelId);
                           partialUpdatePage({ labels_list: updatedLabels });
@@ -358,7 +358,7 @@ const SinglePage: NextPage = () => {
                     customButton={
                       <button
                         type="button"
-                        className="flex items-center gap-1 rounded-md bg-gray-100 p-1.5 text-xs hover:bg-gray-200"
+                        className="flex items-center gap-1 rounded-md bg-brand-surface-1 p-1.5 text-xs hover:bg-brand-surface-2"
                       >
                         <PlusIcon className="h-3.5 w-3.5" />
                       </button>
@@ -375,7 +375,7 @@ const SinglePage: NextPage = () => {
                   customButton={
                     <button
                       type="button"
-                      className="flex items-center gap-1 rounded-full bg-gray-100 px-2  pr-2.5 py-1 text-xs hover:bg-gray-200"
+                      className="flex items-center gap-1 rounded-md bg-brand-surface-1 px-3 py-1.5 text-xs hover:bg-brand-surface-2"
                     >
                       <PlusIcon className="h-3 w-3" />
                       Add label
@@ -407,7 +407,7 @@ const SinglePage: NextPage = () => {
                       <Popover.Button
                         type="button"
                         className={`group inline-flex items-center outline-none ${
-                          open ? "text-gray-900" : "text-gray-500"
+                          open ? "text-brand-base" : "text-brand-secondary"
                         }`}
                       >
                         {watch("color") && watch("color") !== "" ? (
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index 73f9b0aa1c7..9f65011e72d 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -244,8 +244,8 @@ const ProjectPages: NextPage = () => {
                         className={({ selected }) =>
                           `rounded-full border px-5 py-1.5 text-sm outline-none ${
                             selected
-                              ? "border-theme bg-theme text-white"
-                              : "border-gray-300 bg-white hover:bg-hover-gray"
+                              ? "border-brand-accent bg-brand-accent text-white"
+                              : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
                           }`
                         }
                       >
@@ -257,8 +257,8 @@ const ProjectPages: NextPage = () => {
                 <div className="flex gap-x-1">
                   <button
                     type="button"
-                    className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
-                      viewType === "list" ? "bg-gray-200" : ""
+                    className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+                      viewType === "list" ? "bg-brand-surface-2" : ""
                     }`}
                     onClick={() => setViewType("list")}
                   >
@@ -266,8 +266,8 @@ const ProjectPages: NextPage = () => {
                   </button>
                   <button
                     type="button"
-                    className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
-                      viewType === "detailed" ? "bg-gray-200" : ""
+                    className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+                      viewType === "detailed" ? "bg-brand-surface-2" : ""
                     }`}
                     onClick={() => setViewType("detailed")}
                   >
@@ -275,8 +275,8 @@ const ProjectPages: NextPage = () => {
                   </button>
                   {/* <button
                     type="button"
-                    className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
-                      viewType === "masonry" ? "bg-gray-200" : ""
+                    className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+                      viewType === "masonry" ? "bg-brand-surface-2" : ""
                     }`}
                     onClick={() => setViewType("masonry")}
                   >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
index 2548e4bacf9..b13fbd4b92f 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
@@ -108,7 +108,7 @@ const ControlSettings: NextPage = () => {
           <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-xl font-semibold">Project Lead</h4>
-              <p className="text-gray-500">Select the project leader.</p>
+              <p className="text-brand-secondary">Select the project leader.</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               {projectDetails ? (
@@ -168,7 +168,7 @@ const ControlSettings: NextPage = () => {
           <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-xl font-semibold">Default Assignee</h4>
-              <p className="text-gray-500">Select the default assignee for the project.</p>
+              <p className="text-brand-secondary">Select the default assignee for the project.</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               {projectDetails ? (
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index 17588784c06..4e48e29161b 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -91,12 +91,12 @@ const FeaturesSettings: NextPage = () => {
       <section className="space-y-8">
         <h3 className="text-2xl font-semibold">Features</h3>
         <div className="space-y-5">
-          <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-5">
+          <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
             <div className="flex items-start gap-3">
               <ContrastIcon color="#3F76FF" width={28} height={28} className="flex-shrink-0" />
               <div>
                 <h4 className="text-xl font-semibold">Cycles</h4>
-                <p className="text-gray-500">
+                <p className="text-brand-secondary">
                   Cycles are enabled for all the projects in this workspace. Access them from the
                   navigation bar.
                 </p>
@@ -105,7 +105,7 @@ const FeaturesSettings: NextPage = () => {
             <button
               type="button"
               className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
-                projectDetails?.cycle_view ? "bg-green-500" : "bg-gray-200"
+                projectDetails?.cycle_view ? "bg-green-500" : "bg-brand-surface-2"
               }`}
               role="switch"
               aria-checked={projectDetails?.cycle_view}
@@ -126,18 +126,18 @@ const FeaturesSettings: NextPage = () => {
               <span className="sr-only">Use cycles</span>
               <span
                 aria-hidden="true"
-                className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
                   projectDetails?.cycle_view ? "translate-x-5" : "translate-x-0"
                 }`}
               />
             </button>
           </div>
-          <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-5">
+          <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
             <div className="flex items-start gap-3">
               <PeopleGroupIcon color="#FF6B00" width={28} height={28} className="flex-shrink-0" />
               <div>
                 <h4 className="-mt-1.5 text-xl font-semibold">Modules</h4>
-                <p className="text-gray-500">
+                <p className="text-brand-secondary">
                   Modules are enabled for all the projects in this workspace. Access it from the
                   navigation bar.
                 </p>
@@ -146,7 +146,7 @@ const FeaturesSettings: NextPage = () => {
             <button
               type="button"
               className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
-                projectDetails?.module_view ? "bg-green-500" : "bg-gray-200"
+                projectDetails?.module_view ? "bg-green-500" : "bg-brand-surface-2"
               }`}
               role="switch"
               aria-checked={projectDetails?.module_view}
@@ -167,18 +167,18 @@ const FeaturesSettings: NextPage = () => {
               <span className="sr-only">Use cycles</span>
               <span
                 aria-hidden="true"
-                className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
                   projectDetails?.module_view ? "translate-x-5" : "translate-x-0"
                 }`}
               />
             </button>
           </div>
-          <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-5">
+          <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
             <div className="flex items-start gap-3">
               <ViewListIcon color="#05C3FF" width={28} height={28} className="flex-shrink-0" />
               <div>
                 <h4 className="-mt-1.5 text-xl font-semibold">Views</h4>
-                <p className="text-gray-500">
+                <p className="text-brand-secondary">
                   Views are enabled for all the projects in this workspace. Access it from the
                   navigation bar.
                 </p>
@@ -187,7 +187,7 @@ const FeaturesSettings: NextPage = () => {
             <button
               type="button"
               className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
-                projectDetails?.issue_views_view ? "bg-green-500" : "bg-gray-200"
+                projectDetails?.issue_views_view ? "bg-green-500" : "bg-brand-surface-2"
               }`}
               role="switch"
               aria-checked={projectDetails?.issue_views_view}
@@ -208,18 +208,18 @@ const FeaturesSettings: NextPage = () => {
               <span className="sr-only">Use views</span>
               <span
                 aria-hidden="true"
-                className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
                   projectDetails?.issue_views_view ? "translate-x-5" : "translate-x-0"
                 }`}
               />
             </button>
           </div>
-          <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-5">
+          <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-surface-1 p-5">
             <div className="flex items-start gap-3">
               <DocumentTextIcon color="#FCBE1D" width={28} height={28} className="flex-shrink-0" />
               <div>
                 <h4 className="text-xl font-semibold">Pages</h4>
-                <p className="text-gray-500">
+                <p className="text-brand-secondary">
                   Pages are enabled for all the projects in this workspace. Access them from the
                   navigation bar.
                 </p>
@@ -228,7 +228,7 @@ const FeaturesSettings: NextPage = () => {
             <button
               type="button"
               className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
-                projectDetails?.page_view ? "bg-green-500" : "bg-gray-200"
+                projectDetails?.page_view ? "bg-green-500" : "bg-brand-surface-2"
               }`}
               role="switch"
               aria-checked={projectDetails?.page_view}
@@ -249,7 +249,7 @@ const FeaturesSettings: NextPage = () => {
               <span className="sr-only">Use cycles</span>
               <span
                 aria-hidden="true"
-                className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                className={`inline-block h-5 w-5 transform rounded-full bg-brand-surface-1 shadow ring-0 transition duration-200 ease-in-out ${
                   projectDetails?.page_view ? "translate-x-5" : "translate-x-0"
                 }`}
               />
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index 4f86e5cf92f..2f8ca3d4aac 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -156,7 +156,7 @@ const GeneralSettings: NextPage = () => {
           <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-xl font-semibold">Icon & Name</h4>
-              <p className="text-gray-500">Select an icon and a name for your project.</p>
+              <p className="text-brand-secondary">Select an icon and a name for your project.</p>
             </div>
             <div className="col-span-12 flex gap-2 sm:col-span-6">
               {projectDetails ? (
@@ -197,7 +197,7 @@ const GeneralSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-xl font-semibold">Description</h4>
-              <p className="text-gray-500">Give a description to your project.</p>
+              <p className="text-brand-secondary">Give a description to your project.</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               {projectDetails ? (
@@ -254,8 +254,8 @@ const GeneralSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-xl font-semibold">Identifier</h4>
-              <p className="text-gray-500">
-                Create a 1-5 characters{"'"} identifier for the project.
+              <p className="text-brand-secondary">
+                Create a 1-6 characters{"'"} identifier for the project.
               </p>
             </div>
             <div className="col-span-12 sm:col-span-6">
@@ -290,7 +290,7 @@ const GeneralSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-xl font-semibold">Network</h4>
-              <p className="text-gray-500">Select privacy type for the project.</p>
+              <p className="text-brand-secondary">Select privacy type for the project.</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               {projectDetails ? (
@@ -337,7 +337,7 @@ const GeneralSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-xl font-semibold">Danger Zone</h4>
-              <p className="text-gray-500">
+              <p className="text-brand-secondary">
                 The danger zone of the project delete page is a critical area that requires careful
                 consideration and attention. When deleting a project, all of the data and resources
                 within that project will be permanently removed and cannot be recovered.
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index 049345b947c..ab7f2e0bc22 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -106,7 +106,7 @@ const LabelsSettings: NextPage = () => {
         <section className="grid grid-cols-12 gap-10">
           <div className="col-span-12 sm:col-span-5">
             <h3 className="text-2xl font-semibold">Labels</h3>
-            <p className="text-gray-500">Manage the labels of this project.</p>
+            <p className="text-brand-secondary">Manage the labels of this project.</p>
             <PrimaryButton onClick={newLabel} size="sm" className="mt-4">
               <span className="flex items-center gap-2">
                 <PlusIcon className="h-4 w-4" />
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index 8ead3550ccf..06efddf2739 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -161,7 +161,7 @@ const MembersSettings: NextPage = () => {
             <h3 className="text-2xl font-semibold">Members</h3>
             <button
               type="button"
-              className="flex items-center gap-2 text-theme outline-none"
+              className="flex items-center gap-2 text-brand-accent outline-none"
               onClick={() => setInviteModal(true)}
             >
               <PlusIcon className="h-4 w-4" />
@@ -176,7 +176,7 @@ const MembersSettings: NextPage = () => {
               <Loader.Item height="40px" />
             </Loader>
           ) : (
-            <div className="divide-y rounded-[10px] border bg-white px-6">
+            <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-surface-1 px-6">
               {members.length > 0
                 ? members.map((member) => (
                     <div key={member.id} className="flex items-center justify-between py-6">
@@ -200,7 +200,7 @@ const MembersSettings: NextPage = () => {
                           <h4 className="text-sm">
                             {member.first_name} {member.last_name}
                           </h4>
-                          <p className="mt-0.5 text-xs text-gray-500">{member.email}</p>
+                          <p className="mt-0.5 text-xs text-brand-secondary">{member.email}</p>
                         </div>
                       </div>
                       {!member.member && (
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index d4439d05c05..a91c1c6cba4 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -72,8 +72,8 @@ const StatesSettings: NextPage = () => {
       >
         <div className="grid grid-cols-12 gap-10">
           <div className="col-span-12 sm:col-span-5">
-            <h3 className="text-2xl font-semibold">States</h3>
-            <p className="text-gray-500">Manage the states of this project.</p>
+            <h3 className="text-2xl font-semibold text-brand-base">States</h3>
+            <p className="text-brand-secondary">Manage the states of this project.</p>
           </div>
           <div className="col-span-12 space-y-8 sm:col-span-7">
             {states && projectDetails ? (
@@ -85,14 +85,14 @@ const StatesSettings: NextPage = () => {
                         <h4 className="font-medium capitalize">{key}</h4>
                         <button
                           type="button"
-                          className="flex items-center gap-2 text-theme outline-none"
+                          className="flex items-center gap-2 text-brand-accent outline-none"
                           onClick={() => setActiveGroup(key as keyof StateGroup)}
                         >
                           <PlusIcon className="h-4 w-4" />
                           Add
                         </button>
                       </div>
-                      <div className="divide-y rounded-[10px] border">
+                      <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
                         {key === activeGroup && (
                           <CreateUpdateStateInline
                             onClose={() => {
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
index 7c8f7ff64ea..e6a7eb10a13 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -79,7 +79,7 @@ const ProjectViews: NextPage = () => {
               document.dispatchEvent(e);
             }}
           >
-            <PlusIcon className="w-4 h-4" />
+            <PlusIcon className="h-4 w-4" />
             Create View
           </PrimaryButton>
         </div>
@@ -98,8 +98,8 @@ const ProjectViews: NextPage = () => {
       {views ? (
         views.length > 0 ? (
           <div className="space-y-5">
-            <h3 className="text-3xl font-semibold text-black">Views</h3>
-            <ul role="list" className="divide-y">
+            <h3 className="text-3xl font-semibold text-brand-base">Views</h3>
+            <div className="rounded-[10px] border border-brand-base">
               {views.map((view) => (
                 <SingleViewItem
                   key={view.id}
@@ -108,7 +108,7 @@ const ProjectViews: NextPage = () => {
                   handleDeleteView={() => handleDeleteView(view)}
                 />
               ))}
-            </ul>
+            </div>
           </div>
         ) : (
           <EmptyState
diff --git a/apps/app/pages/[workspaceSlug]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/settings/index.tsx
index e49efd13006..043ff498923 100644
--- a/apps/app/pages/[workspaceSlug]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/index.tsx
@@ -184,7 +184,7 @@ const WorkspaceSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-xl font-semibold">Logo</h4>
-              <p className="text-gray-500">
+              <p className="text-brand-secondary">
                 Max file size is 5MB. Supported file types are .jpg and .png.
               </p>
             </div>
@@ -228,7 +228,7 @@ const WorkspaceSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-xl font-semibold">URL</h4>
-              <p className="text-gray-500">Your workspace URL.</p>
+              <p className="text-brand-secondary">Your workspace URL.</p>
             </div>
             <div className="col-span-12 flex items-center gap-2 sm:col-span-6">
               <Input
@@ -268,7 +268,7 @@ const WorkspaceSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-xl font-semibold">Name</h4>
-              <p className="text-gray-500">Give a name to your workspace.</p>
+              <p className="text-brand-secondary">Give a name to your workspace.</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               <Input
@@ -287,7 +287,7 @@ const WorkspaceSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-xl font-semibold">Company Size</h4>
-              <p className="text-gray-500">How big is your company?</p>
+              <p className="text-brand-secondary">How big is your company?</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               <Controller
@@ -318,7 +318,7 @@ const WorkspaceSettings: NextPage = () => {
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-xl font-semibold">Danger Zone</h4>
-              <p className="text-gray-500">
+              <p className="text-brand-secondary">
                 The danger zone of the workspace delete page is a critical area that requires
                 careful consideration and attention. When deleting a workspace, all of the data and
                 resources within that workspace will be permanently removed and cannot be recovered.
diff --git a/apps/app/pages/[workspaceSlug]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/settings/members.tsx
index a85c00cf30e..f993c2ff9ad 100644
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/members.tsx
@@ -142,7 +142,7 @@ const MembersSettings: NextPage = () => {
             <h3 className="text-2xl font-semibold">Members</h3>
             <button
               type="button"
-              className="flex items-center gap-2 text-theme outline-none"
+              className="flex items-center gap-2 text-brand-accent outline-none"
               onClick={() => setInviteModal(true)}
             >
               <PlusIcon className="h-4 w-4" />
@@ -157,7 +157,7 @@ const MembersSettings: NextPage = () => {
               <Loader.Item height="40px" />
             </Loader>
           ) : (
-            <div className="divide-y rounded-[10px] border border-gray-200 bg-white px-6">
+            <div className="divide-y rounded-[10px] divide-brand-base border border-brand-base bg-brand-surface-1 px-6">
               {members.length > 0
                 ? members.map((member) => (
                     <div key={member.id} className="flex items-center justify-between py-6">
@@ -181,12 +181,12 @@ const MembersSettings: NextPage = () => {
                           <h4 className="text-sm">
                             {member.first_name} {member.last_name}
                           </h4>
-                          <p className="text-xs text-gray-500">{member.email}</p>
+                          <p className="text-xs text-brand-secondary">{member.email}</p>
                         </div>
                       </div>
                       <div className="flex items-center">
                         {!member?.status && (
-                          <div className="flex mr-2 px-2 py-1 bg-yellow-200 text-center rounded-full text-xs items-center justify-center">
+                          <div className="flex mr-2 px-2 py-1 bg-yellow-200 text-yellow-700 text-center rounded-full text-xs items-center justify-center">
                             <p>Pending</p>
                           </div>
                         )}
diff --git a/apps/app/pages/_app.tsx b/apps/app/pages/_app.tsx
index 0d3bf310536..6f372b4e34e 100644
--- a/apps/app/pages/_app.tsx
+++ b/apps/app/pages/_app.tsx
@@ -1,5 +1,8 @@
 import dynamic from "next/dynamic";
 
+// themes
+import { ThemeProvider } from "next-themes";
+
 // styles
 import "styles/globals.css";
 import "styles/editor.css";
@@ -18,6 +21,8 @@ import { ToastContextProvider } from "contexts/toast.context";
 import { ThemeContextProvider } from "contexts/theme.context";
 // types
 import type { AppProps } from "next/app";
+// constants
+import { THEMES } from "constants/themes";
 
 const CrispWithNoSSR = dynamic(() => import("constants/crisp"), { ssr: false });
 
@@ -29,14 +34,16 @@ Router.events.on("routeChangeComplete", NProgress.done);
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <UserProvider>
-      <ToastContextProvider>
-        <ThemeContextProvider>
-          <CrispWithNoSSR />
-          <Component {...pageProps} />
-        </ThemeContextProvider>
-      </ToastContextProvider>
-    </UserProvider>
+    <ThemeProvider themes={THEMES} defaultTheme="light">
+      <UserProvider>
+        <ToastContextProvider>
+          <ThemeContextProvider>
+            <CrispWithNoSSR />
+            <Component {...pageProps} />
+          </ThemeContextProvider>
+        </ToastContextProvider>
+      </UserProvider>
+    </ThemeProvider>
   );
 }
 
diff --git a/apps/app/pages/_error.js b/apps/app/pages/_error.js
index bef260a7eb6..a615a24dcb5 100644
--- a/apps/app/pages/_error.js
+++ b/apps/app/pages/_error.js
@@ -58,18 +58,18 @@ const CustomErrorComponent = () => {
         <div className="space-y-8 text-center">
           <div className="space-y-2">
             <h3 className="text-lg font-semibold">Exception Detected!</h3>
-            <p className="text-sm text-gray-500 w-1/2 mx-auto">
+            <p className="text-sm text-brand-secondary w-1/2 mx-auto">
               We{"'"}re Sorry! An exception has been detected, and our engineering team has been
               notified. We apologize for any inconvenience this may have caused. Please reach out to
               our engineering team at{" "}
-              <a href="mailto:support@plane.so" className="text-theme">
+              <a href="mailto:support@plane.so" className="text-brand-accent">
                 support@plane.so
               </a>{" "}
               or on our{" "}
               <a
                 href="https://discord.com/invite/A92xrEGCge"
                 target="_blank"
-                className="text-theme"
+                className="text-brand-accent"
                 rel="noopener noreferrer"
               >
                 Discord
diff --git a/apps/app/pages/installations/[provider]/index.tsx b/apps/app/pages/installations/[provider]/index.tsx
index a804b8d97c1..31eb53c9ea1 100644
--- a/apps/app/pages/installations/[provider]/index.tsx
+++ b/apps/app/pages/installations/[provider]/index.tsx
@@ -35,8 +35,8 @@ const AppPostInstallation = ({
   }, [state, installation_id, provider]);
 
   return (
-    <div className="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-white">
-      <h2 className="text-2xl text-gray-900">Installing. Please wait...</h2>
+    <div className="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-brand-surface-2">
+      <h2 className="text-2xl text-brand-base">Installing. Please wait...</h2>
       <Spinner />
     </div>
   );
diff --git a/apps/app/pages/signin.tsx b/apps/app/pages/signin.tsx
index b9244c1ac26..3b423b370ba 100644
--- a/apps/app/pages/signin.tsx
+++ b/apps/app/pages/signin.tsx
@@ -108,17 +108,17 @@ const SignInPage: NextPage = () => {
           <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-black">
+              <h2 className="text-center text-xl font-medium text-brand-base">
                 Sign In to your Plane Account
               </h2>
             </div>
 
-            <div className="flex flex-col rounded-[10px] bg-white  shadow-md">
+            <div className="flex flex-col rounded-[10px] bg-brand-surface-2  shadow-md">
               {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
                 <>
                   <EmailSignInForm handleSuccess={onSignInSuccess} />
 
-                  <div className="flex flex-col gap-3 py-5 px-5 border-t items-center justify-center border-gray-300 ">
+                  <div className="flex flex-col gap-3 py-5 px-5 border-t items-center justify-center border-brand-base ">
                     <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
 
                     <GithubLoginButton handleSignIn={handleGithubSignIn} />
diff --git a/apps/app/pages/workspace-member-invitation/[invitationId].tsx b/apps/app/pages/workspace-member-invitation/[invitationId].tsx
index cbbb2fd410c..4eb45f529e5 100644
--- a/apps/app/pages/workspace-member-invitation/[invitationId].tsx
+++ b/apps/app/pages/workspace-member-invitation/[invitationId].tsx
@@ -61,7 +61,7 @@ const WorkspaceInvitation: NextPage = () => {
         {invitationDetail ? (
           <>
             {error ? (
-              <div className="flex w-full flex-col space-y-4 rounded border bg-gray-50 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-brand-base bg-brand-base px-4 py-8 text-center shadow-2xl md:w-1/3">
                 <h2 className="text-xl uppercase">INVITATION NOT FOUND</h2>
               </div>
             ) : (
diff --git a/apps/app/styles/command-pallette.css b/apps/app/styles/command-pallette.css
index 86fcb51daae..5362f308a18 100644
--- a/apps/app/styles/command-pallette.css
+++ b/apps/app/styles/command-pallette.css
@@ -3,7 +3,7 @@
 }
 
 [cmdk-group-heading] {
-  color: rgb(107 114 128);
+  color: rgb(var(--color-text-secondary));
   font-size: 0.75rem;
   margin: 0 0 0.25rem 0.25rem;
 }
@@ -27,13 +27,13 @@
   font-size: 0.75rem;
   line-height: 1rem;
   border-radius: 0.25rem;
-  background-color: rgb(229 231 235);
+  background-color: rgba(var(--color-bg-base));
 }
 
 [cmdk-item]:hover {
-  background-color: rgb(229 231 235);
+  background-color: rgba(var(--color-bg-base));
 }
 
 [cmdk-item][aria-selected="true"] {
-  background-color: rgb(229 231 235);
+  background-color: rgba(var(--color-bg-base));
 }
diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
index eeed87dd4bc..afd3d59b9f1 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -15,6 +15,72 @@
   html {
     font-family: "Inter", sans-serif;
   }
+
+  :root {
+    --color-bg-base: 243, 244, 246;
+    --color-bg-surface-1: 249, 250, 251;
+    --color-bg-surface-2: 255, 255, 255;
+
+    --color-border: 229, 231, 235;
+    --color-bg-sidebar: 255, 255, 255;
+    --color-accent: 63, 118, 255;
+
+    --color-text-base: 3, 7, 18;
+    --color-text-secondary: 55, 65, 81;
+  }
+
+  [data-theme="light"] {
+    --color-bg-base: 243, 244, 246;
+    --color-bg-surface-1: 249, 250, 251;
+    --color-bg-surface-2: 255, 255, 255;
+
+    --color-border: 229, 231, 235;
+    --color-bg-sidebar: 255, 255, 255;
+    --color-accent: 63, 118, 255;
+
+    --color-text-base: 3, 7, 18;
+    --color-text-secondary: 55, 65, 81;
+  }
+
+  [data-theme="dark"] {
+    --color-bg-base: 25, 27, 27;
+    --color-bg-surface-1: 31, 32, 35;
+    --color-bg-surface-2: 39, 42, 45;
+
+    --color-border: 46, 50, 52;
+    --color-bg-sidebar: 19, 20, 22;
+    --color-accent: 60, 133, 217;
+
+    --color-text-base: 255, 255, 255;
+    --color-text-secondary: 142, 148, 146;
+  }
+
+  [data-theme="light-contrast"] {
+    --color-bg-base: 250, 250, 250;
+    --color-bg-surface-1: 250, 250, 250;
+    --color-bg-surface-2: 206, 212, 218;
+
+    --color-border: 0, 0, 0;
+    --color-bg-sidebar: 255, 255, 255;
+    --color-accent: 63, 118, 255;
+
+    --color-text-base: 0, 0, 0;
+    --color-text-secondary: 0, 0, 0;
+  }
+
+  [data-theme="dark-contrast"] {
+    --color-bg-base: 25, 27, 27;
+    --color-bg-surface-1: 31, 32, 35;
+    --color-bg-surface-2: 39, 42, 45;
+
+    --color-border: 255, 255, 255;
+    --color-bg-sidebar: 19, 20, 22;
+    --color-accent: 60, 133, 217;
+
+    --color-text-base: 255, 255, 255;
+    --color-text-secondary: 142, 148, 146;
+    color-scheme: dark !important;
+  }
 }
 
 * {
@@ -129,8 +195,17 @@
   z-index: 30 !important;
 }
 
-.conical-gradient{
-  background: conic-gradient(from 180deg at 50% 50%, #FF6B00 0deg, #F7AE59 70.5deg, #3F76FF 151.12deg, #05C3FF 213deg, #18914F 289.87deg, #F6F172 329.25deg, #FF6B00 360deg);
+.conical-gradient {
+  background: conic-gradient(
+    from 180deg at 50% 50%,
+    #ff6b00 0deg,
+    #f7ae59 70.5deg,
+    #3f76ff 151.12deg,
+    #05c3ff 213deg,
+    #18914f 289.87deg,
+    #f6f172 329.25deg,
+    #ff6b00 360deg
+  );
 }
 
 /* end react datepicker styling */
diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js
index e714441601f..85c18cda1ed 100644
--- a/apps/app/tailwind.config.js
+++ b/apps/app/tailwind.config.js
@@ -1,4 +1,14 @@
+function withOpacity(variableName) {
+  return ({ opacityValue }) => {
+    if (opacityValue !== undefined) {
+      return `rgba(var(${variableName}), ${opacityValue})`;
+    }
+    return `rgb(var(${variableName}))`;
+  };
+}
+
 module.exports = {
+  darkMode: "class",
   content: ["./pages/**/*.tsx", "./components/**/*.tsx", "./layouts/**/*.tsx", "./ui/**/*.tsx"],
   theme: {
     extend: {
@@ -7,6 +17,28 @@ module.exports = {
         "hover-gray": "#f5f5f5",
         primary: "#f9fafb", // gray-50
         secondary: "white",
+        brand: {
+          accent: withOpacity("--color-accent"),
+        },
+      },
+      borderColor: {
+        brand: {
+          base: withOpacity("--color-border"),
+        },
+      },
+      backgroundColor: {
+        brand: {
+          base: withOpacity("--color-bg-base"),
+          "surface-1": withOpacity("--color-bg-surface-1"),
+          "surface-2": withOpacity("--color-bg-surface-2"),
+          sidebar: withOpacity("--color-bg-sidebar"),
+        },
+      },
+      textColor: {
+        brand: {
+          base: withOpacity("--color-text-base"),
+          secondary: withOpacity("--color-text-secondary"),
+        },
       },
       keyframes: {
         leftToaster: {
diff --git a/yarn.lock b/yarn.lock
index 1e8bb41f0ad..3f88abe95b6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6038,6 +6038,11 @@ next-pwa@^5.6.0:
     workbox-webpack-plugin "^6.5.4"
     workbox-window "^6.5.4"
 
+next-themes@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45"
+  integrity sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==
+
 next@12.3.2:
   version "12.3.2"
   resolved "https://registry.npmjs.org/next/-/next-12.3.2.tgz"