diff --git a/apps/app/components/account/email-code-form.tsx b/apps/app/components/account/email-code-form.tsx
index e1b7aea988..ba8c759af4 100644
--- a/apps/app/components/account/email-code-form.tsx
+++ b/apps/app/components/account/email-code-form.tsx
@@ -164,8 +164,8 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
               type="button"
               className={`mt-5 flex w-full justify-end text-xs outline-none ${
                 isResendDisabled
-                  ? "cursor-default text-brand-secondary"
-                  : "cursor-pointer text-brand-accent"
+                  ? "cursor-default text-custom-text-200"
+                  : "cursor-pointer text-custom-primary"
               } `}
               onClick={() => {
                 setIsCodeResending(true);
diff --git a/apps/app/components/account/email-password-form.tsx b/apps/app/components/account/email-password-form.tsx
index 8a0dc3a339..97da2b9e45 100644
--- a/apps/app/components/account/email-password-form.tsx
+++ b/apps/app/components/account/email-password-form.tsx
@@ -80,7 +80,7 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
             <div className="ml-auto text-sm">
               {isSignUpPage ? (
                 <Link href="/">
-                  <a className="font-medium text-brand-accent hover:text-brand-accent">
+                  <a className="font-medium text-custom-primary hover:text-custom-primary">
                     Already have an account? Sign in.
                   </a>
                 </Link>
@@ -88,7 +88,7 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
                 <button
                   type="button"
                   onClick={() => setIsResettingPassword(true)}
-                  className="font-medium text-brand-accent hover:text-brand-accent"
+                  className="font-medium text-custom-primary hover:text-custom-primary"
                 >
                   Forgot your password?
                 </button>
@@ -112,7 +112,7 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
             </SecondaryButton>
             {!isSignUpPage && (
               <Link href="/sign-up">
-                <a className="block font-medium text-brand-accent hover:text-brand-accent text-sm mt-1">
+                <a className="block font-medium text-custom-primary hover:text-custom-primary text-sm mt-1">
                   Don{"'"}t have an account? Sign up.
                 </a>
               </Link>
diff --git a/apps/app/components/account/github-login-button.tsx b/apps/app/components/account/github-login-button.tsx
index d997b3a3de..43a42cbe18 100644
--- a/apps/app/components/account/github-login-button.tsx
+++ b/apps/app/components/account/github-login-button.tsx
@@ -39,7 +39,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 border border-brand-base p-2 text-sm font-medium text-brand-secondary duration-300 hover:bg-brand-surface-2">
+        <button className="flex w-full items-center justify-center gap-3 rounded border border-custom-border-80 p-2 text-sm font-medium text-custom-text-200 duration-300 hover:bg-custom-background-80">
           <Image src={githubImage} height={20} width={20} color="#000" alt="GitHub Logo" />
           <span>Sign In with Github</span>
         </button>
diff --git a/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx b/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx
index afaaf1b986..d506cb3151 100644
--- a/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx
+++ b/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx
@@ -97,7 +97,7 @@ export const CreateUpdateAnalyticsModal: React.FC<Props> = ({ isOpen, handleClos
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -111,10 +111,13 @@ export const CreateUpdateAnalyticsModal: React.FC<Props> = ({ isOpen, handleClos
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-80 bg-custom-background-100 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                    <Dialog.Title
+                      as="h3"
+                      className="text-lg font-medium leading-6 text-custom-text-100"
+                    >
                       Save Analytics
                     </Dialog.Title>
                     <div className="mt-5">
diff --git a/apps/app/components/analytics/custom-analytics/custom-analytics.tsx b/apps/app/components/analytics/custom-analytics/custom-analytics.tsx
index f46b7f2b23..4d6a2bdbeb 100644
--- a/apps/app/components/analytics/custom-analytics/custom-analytics.tsx
+++ b/apps/app/components/analytics/custom-analytics/custom-analytics.tsx
@@ -86,7 +86,7 @@ export const CustomAnalytics: React.FC<Props> = ({
               </div>
             ) : (
               <div className="grid h-full place-items-center p-5">
-                <div className="space-y-4 text-brand-secondary">
+                <div className="space-y-4 text-custom-text-200">
                   <p className="text-sm">No matching issues found. Try changing the parameters.</p>
                 </div>
               </div>
@@ -104,7 +104,7 @@ export const CustomAnalytics: React.FC<Props> = ({
           )
         ) : (
           <div className="grid h-full place-items-center p-5">
-            <div className="space-y-4 text-brand-secondary">
+            <div className="space-y-4 text-custom-text-200">
               <p className="text-sm">There was some error in fetching the data.</p>
               <div className="flex items-center justify-center gap-2">
                 <PrimaryButton
diff --git a/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx b/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
index 7fd0c13967..767a27ed41 100644
--- a/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
+++ b/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
@@ -31,7 +31,7 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
   }
 
   return (
-    <div className="flex items-center gap-2 rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
+    <div className="flex items-center gap-2 rounded-md border border-custom-border-80 bg-custom-background-80 p-2 text-xs">
       <span
         className="h-3 w-3 rounded"
         style={{
@@ -39,7 +39,7 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
         }}
       />
       <span
-        className={`font-medium text-brand-secondary ${
+        className={`font-medium text-custom-text-200 ${
           params.segment
             ? params.segment === "priority" || params.segment === "state__group"
               ? "capitalize"
diff --git a/apps/app/components/analytics/custom-analytics/graph/index.tsx b/apps/app/components/analytics/custom-analytics/graph/index.tsx
index cce93204c8..3f70dddc51 100644
--- a/apps/app/components/analytics/custom-analytics/graph/index.tsx
+++ b/apps/app/components/analytics/custom-analytics/graph/index.tsx
@@ -111,7 +111,6 @@ export const AnalyticsGraph: React.FC<Props> = ({
             : undefined,
       }}
       theme={{
-        background: "rgb(var(--color-bg-base))",
         axis: {},
       }}
     />
diff --git a/apps/app/components/analytics/custom-analytics/select-bar.tsx b/apps/app/components/analytics/custom-analytics/select-bar.tsx
index 7286a9cf87..8c2b822e5b 100644
--- a/apps/app/components/analytics/custom-analytics/select-bar.tsx
+++ b/apps/app/components/analytics/custom-analytics/select-bar.tsx
@@ -29,7 +29,7 @@ export const AnalyticsSelectBar: React.FC<Props> = ({
   >
     {!isProjectLevel && (
       <div>
-        <h6 className="text-xs text-brand-secondary">Project</h6>
+        <h6 className="text-xs text-custom-text-200">Project</h6>
         <Controller
           name="project"
           control={control}
@@ -40,7 +40,7 @@ export const AnalyticsSelectBar: React.FC<Props> = ({
       </div>
     )}
     <div>
-      <h6 className="text-xs text-brand-secondary">Measure (y-axis)</h6>
+      <h6 className="text-xs text-custom-text-200">Measure (y-axis)</h6>
       <Controller
         name="y_axis"
         control={control}
@@ -50,7 +50,7 @@ export const AnalyticsSelectBar: React.FC<Props> = ({
       />
     </div>
     <div>
-      <h6 className="text-xs text-brand-secondary">Dimension (x-axis)</h6>
+      <h6 className="text-xs text-custom-text-200">Dimension (x-axis)</h6>
       <Controller
         name="x_axis"
         control={control}
@@ -67,7 +67,7 @@ export const AnalyticsSelectBar: React.FC<Props> = ({
       />
     </div>
     <div>
-      <h6 className="text-xs text-brand-secondary">Group</h6>
+      <h6 className="text-xs text-custom-text-200">Group</h6>
       <Controller
         name="segment"
         control={control}
diff --git a/apps/app/components/analytics/custom-analytics/sidebar.tsx b/apps/app/components/analytics/custom-analytics/sidebar.tsx
index 418d87c4a4..8117e1da96 100644
--- a/apps/app/components/analytics/custom-analytics/sidebar.tsx
+++ b/apps/app/components/analytics/custom-analytics/sidebar.tsx
@@ -185,17 +185,17 @@ export const AnalyticsSidebar: React.FC<Props> = ({
     <div
       className={`px-5 py-2.5 flex items-center justify-between space-y-2 ${
         fullScreen
-          ? "border-l border-brand-base md:h-full md:border-l md:border-brand-base md:space-y-4 overflow-hidden md:flex-col md:items-start md:py-5"
+          ? "border-l border-custom-border-80 md:h-full md:border-l md:border-custom-border-80 md:space-y-4 overflow-hidden md:flex-col md:items-start md:py-5"
           : ""
       }`}
     >
       <div className="flex items-center gap-2 flex-wrap">
-        <div className="flex items-center gap-1 bg-brand-surface-2 rounded-md px-3 py-1 text-brand-secondary text-xs">
+        <div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs">
           <LayerDiagonalIcon height={14} width={14} />
           {analytics ? analytics.total : "..."} Issues
         </div>
         {isProjectLevel && (
-          <div className="flex items-center gap-1 bg-brand-surface-2 rounded-md px-3 py-1 text-brand-secondary text-xs">
+          <div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs">
             <CalendarDaysIcon className="h-3.5 w-3.5" />
             {renderShortDate(
               (cycleId
@@ -240,7 +240,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                           )}
                           <h5 className="break-words">
                             {project.name}
-                            <span className="text-brand-secondary text-xs ml-1">
+                            <span className="text-custom-text-200 text-xs ml-1">
                               ({project.identifier})
                             </span>
                           </h5>
@@ -248,24 +248,24 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                         <div className="mt-4 space-y-3 pl-2">
                           <div className="flex items-center justify-between gap-2 text-xs">
                             <div className="flex items-center gap-2">
-                              <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
+                              <UserGroupIcon className="h-4 w-4 text-custom-text-200" />
                               <h6>Total members</h6>
                             </div>
-                            <span className="text-brand-secondary">{project.total_members}</span>
+                            <span className="text-custom-text-200">{project.total_members}</span>
                           </div>
                           <div className="flex items-center justify-between gap-2 text-xs">
                             <div className="flex items-center gap-2">
                               <ContrastIcon height={16} width={16} />
                               <h6>Total cycles</h6>
                             </div>
-                            <span className="text-brand-secondary">{project.total_cycles}</span>
+                            <span className="text-custom-text-200">{project.total_cycles}</span>
                           </div>
                           <div className="flex items-center justify-between gap-2 text-xs">
                             <div className="flex items-center gap-2">
-                              <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
+                              <UserGroupIcon className="h-4 w-4 text-custom-text-200" />
                               <h6>Total modules</h6>
                             </div>
-                            <span className="text-brand-secondary">{project.total_modules}</span>
+                            <span className="text-custom-text-200">{project.total_modules}</span>
                           </div>
                         </div>
                       </div>
@@ -280,13 +280,13 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                   <h4 className="font-medium break-words">Analytics for {cycleDetails.name}</h4>
                   <div className="space-y-4 mt-4">
                     <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-brand-secondary">Lead</h6>
+                      <h6 className="text-custom-text-200">Lead</h6>
                       <span>
                         {cycleDetails.owned_by?.first_name} {cycleDetails.owned_by?.last_name}
                       </span>
                     </div>
                     <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-brand-secondary">Start Date</h6>
+                      <h6 className="text-custom-text-200">Start Date</h6>
                       <span>
                         {cycleDetails.start_date && cycleDetails.start_date !== ""
                           ? renderShortDate(cycleDetails.start_date)
@@ -294,7 +294,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                       </span>
                     </div>
                     <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-brand-secondary">Target Date</h6>
+                      <h6 className="text-custom-text-200">Target Date</h6>
                       <span>
                         {cycleDetails.end_date && cycleDetails.end_date !== ""
                           ? renderShortDate(cycleDetails.end_date)
@@ -308,14 +308,14 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                   <h4 className="font-medium break-words">Analytics for {moduleDetails.name}</h4>
                   <div className="space-y-4 mt-4">
                     <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-brand-secondary">Lead</h6>
+                      <h6 className="text-custom-text-200">Lead</h6>
                       <span>
                         {moduleDetails.lead_detail?.first_name}{" "}
                         {moduleDetails.lead_detail?.last_name}
                       </span>
                     </div>
                     <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-brand-secondary">Start Date</h6>
+                      <h6 className="text-custom-text-200">Start Date</h6>
                       <span>
                         {moduleDetails.start_date && moduleDetails.start_date !== ""
                           ? renderShortDate(moduleDetails.start_date)
@@ -323,7 +323,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                       </span>
                     </div>
                     <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-brand-secondary">Target Date</h6>
+                      <h6 className="text-custom-text-200">Target Date</h6>
                       <span>
                         {moduleDetails.target_date && moduleDetails.target_date !== ""
                           ? renderShortDate(moduleDetails.target_date)
@@ -357,7 +357,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                   </div>
                   <div className="space-y-4 mt-4">
                     <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-brand-secondary">Network</h6>
+                      <h6 className="text-custom-text-200">Network</h6>
                       <span>
                         {
                           NETWORK_CHOICES[
diff --git a/apps/app/components/analytics/custom-analytics/table.tsx b/apps/app/components/analytics/custom-analytics/table.tsx
index df3953b350..70bd53604b 100644
--- a/apps/app/components/analytics/custom-analytics/table.tsx
+++ b/apps/app/components/analytics/custom-analytics/table.tsx
@@ -37,9 +37,9 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
     <div className="flow-root">
       <div className="overflow-x-auto">
         <div className="inline-block min-w-full align-middle">
-          <table className="min-w-full divide-y divide-brand-base whitespace-nowrap border-y border-brand-base">
-            <thead className="bg-brand-surface-2">
-              <tr className="divide-x divide-brand-base text-sm text-brand-base">
+          <table className="min-w-full divide-y divide-custom-border-80 whitespace-nowrap border-y border-custom-border-80">
+            <thead className="bg-custom-background-80">
+              <tr className="divide-x divide-custom-border-80 text-sm text-custom-text-100">
                 <th scope="col" className="py-3 px-2.5 text-left font-medium">
                   {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
                 </th>
@@ -80,11 +80,11 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
                 )}
               </tr>
             </thead>
-            <tbody className="divide-y divide-brand-base">
+            <tbody className="divide-y divide-custom-border-80">
               {barGraphData.data.map((item, index) => (
                 <tr
                   key={`table-row-${index}`}
-                  className="divide-x divide-brand-base text-xs text-brand-secondary"
+                  className="divide-x divide-custom-border-80 text-xs text-custom-text-200"
                 >
                   <td
                     className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${
diff --git a/apps/app/components/analytics/project-modal.tsx b/apps/app/components/analytics/project-modal.tsx
index 5fdb6682d6..a8bea270ad 100644
--- a/apps/app/components/analytics/project-modal.tsx
+++ b/apps/app/components/analytics/project-modal.tsx
@@ -150,16 +150,16 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
 
   return (
     <div
-      className={`absolute top-0 z-30 h-full bg-brand-surface-1 ${
+      className={`absolute top-0 z-30 h-full bg-custom-background-90 ${
         fullScreen ? "p-2 w-full" : "w-1/2"
       } ${isOpen ? "right-0" : "-right-full"} duration-300 transition-all`}
     >
       <div
-        className={`flex h-full flex-col overflow-hidden border-brand-base bg-brand-base text-left ${
+        className={`flex h-full flex-col overflow-hidden border-custom-border-80 bg-custom-background-100 text-left ${
           fullScreen ? "rounded-lg border" : "border-l"
         }`}
       >
-        <div className="flex items-center justify-between gap-4 bg-brand-base px-5 py-4 text-sm">
+        <div className="flex items-center justify-between gap-4 bg-custom-background-100 px-5 py-4 text-sm">
           <h3 className="break-words">
             Analytics for{" "}
             {cycleId ? cycleDetails?.name : moduleId ? moduleDetails?.name : projectDetails?.name}
@@ -167,7 +167,7 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
           <div className="flex items-center gap-2">
             <button
               type="button"
-              className="grid place-items-center p-1 text-brand-secondary hover:text-brand-base"
+              className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
               onClick={() => setFullScreen((prevData) => !prevData)}
             >
               {fullScreen ? (
@@ -178,7 +178,7 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
             </button>
             <button
               type="button"
-              className="grid place-items-center p-1 text-brand-secondary hover:text-brand-base"
+              className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
               onClick={handleClose}
             >
               <XMarkIcon className="h-4 w-4" />
@@ -186,13 +186,13 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
           </div>
         </div>
         <Tab.Group as={Fragment}>
-          <Tab.List as="div" className="space-x-2 border-b border-brand-base p-5 pt-0">
+          <Tab.List as="div" className="space-x-2 border-b border-custom-border-80 p-5 pt-0">
             {tabsList.map((tab) => (
               <Tab
                 key={tab}
                 className={({ selected }) =>
-                  `rounded-3xl border border-brand-base px-4 py-2 text-xs hover:bg-brand-surface-2 ${
-                    selected ? "bg-brand-surface-2" : ""
+                  `rounded-3xl border border-custom-border-80 px-4 py-2 text-xs hover:bg-custom-background-80 ${
+                    selected ? "bg-custom-background-80" : ""
                   }`
                 }
                 onClick={() => trackAnalyticsEvent(tab)}
diff --git a/apps/app/components/analytics/scope-and-demand/demand.tsx b/apps/app/components/analytics/scope-and-demand/demand.tsx
index 4a454b564c..e634fbc222 100644
--- a/apps/app/components/analytics/scope-and-demand/demand.tsx
+++ b/apps/app/components/analytics/scope-and-demand/demand.tsx
@@ -10,7 +10,7 @@ type Props = {
 };
 
 export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="space-y-3 rounded-[10px] border border-brand-base p-3">
+  <div className="space-y-3 rounded-[10px] border border-custom-border-80 p-3">
     <h5 className="text-xs text-red-500">DEMAND</h5>
     <div>
       <h4 className="text-brand-bas text-base font-medium">Total open tasks</h4>
@@ -31,13 +31,13 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
                   }}
                 />
                 <h6 className="capitalize">{group.state_group}</h6>
-                <span className="ml-1 rounded-3xl bg-brand-surface-2 px-2 py-0.5 text-[0.65rem] text-brand-secondary">
+                <span className="ml-1 rounded-3xl bg-custom-background-80 px-2 py-0.5 text-[0.65rem] text-custom-text-200">
                   {group.state_count}
                 </span>
               </div>
-              <p className="text-brand-secondary">{percentage}%</p>
+              <p className="text-custom-text-200">{percentage}%</p>
             </div>
-            <div className="bar relative h-1 w-full rounded bg-brand-surface-2">
+            <div className="bar relative h-1 w-full rounded bg-custom-background-80">
               <div
                 className="absolute top-0 left-0 h-1 rounded duration-300"
                 style={{
@@ -50,8 +50,8 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
         );
       })}
     </div>
-    <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
-      <p className="flex items-center gap-1 text-brand-secondary">
+    <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-custom-border-80 bg-custom-background-80 p-2 text-xs">
+      <p className="flex items-center gap-1 text-custom-text-200">
         <PlayIcon className="h-4 w-4 -rotate-90" aria-hidden="true" />
         <span>Estimate Demand:</span>
       </p>
diff --git a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
index 72b892eebd..51116294a7 100644
--- a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
+++ b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
@@ -10,7 +10,7 @@ type Props = {
 };
 
 export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
-  <div className="p-3 border border-brand-base rounded-[10px]">
+  <div className="p-3 border border-custom-border-80 rounded-[10px]">
     <h6 className="text-base font-medium">{title}</h6>
     {users.length > 0 ? (
       <div className="mt-3 space-y-3">
@@ -33,7 +33,7 @@ export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
                   {user.firstName !== "" ? user.firstName[0] : "?"}
                 </div>
               )}
-              <span className="break-words text-brand-secondary">
+              <span className="break-words text-custom-text-200">
                 {user.firstName !== "" ? `${user.firstName} ${user.lastName}` : "No assignee"}
               </span>
             </div>
@@ -42,7 +42,7 @@ export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
         ))}
       </div>
     ) : (
-      <div className="text-brand-secondary text-center text-sm py-8">No matching data found.</div>
+      <div className="text-custom-text-200 text-center text-sm py-8">No matching data found.</div>
     )}
   </div>
 );
diff --git a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx b/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
index d5bf10bc29..cfc315ac18 100644
--- a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
+++ b/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
@@ -88,7 +88,7 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
         )
       ) : (
         <div className="grid h-full place-items-center p-5">
-          <div className="space-y-4 text-brand-secondary">
+          <div className="space-y-4 text-custom-text-200">
             <p className="text-sm">There was some error in fetching the data.</p>
             <div className="flex items-center justify-center gap-2">
               <PrimaryButton onClick={() => mutateDefaultAnalytics()}>Refresh</PrimaryButton>
diff --git a/apps/app/components/analytics/scope-and-demand/scope.tsx b/apps/app/components/analytics/scope-and-demand/scope.tsx
index b0a422ed4e..b4be041a56 100644
--- a/apps/app/components/analytics/scope-and-demand/scope.tsx
+++ b/apps/app/components/analytics/scope-and-demand/scope.tsx
@@ -8,9 +8,9 @@ type Props = {
 };
 
 export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="rounded-[10px] border border-brand-base">
+  <div className="rounded-[10px] border border-custom-border-80">
     <h5 className="p-3 text-xs text-green-500">SCOPE</h5>
-    <div className="divide-y divide-brand-base">
+    <div className="divide-y divide-custom-border-80">
       <div>
         <h6 className="px-3 text-base font-medium">Pending issues</h6>
         {defaultAnalytics.pending_issue_user.length > 0 ? (
@@ -27,8 +27,8 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
               );
 
               return (
-                <div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
-                  <span className="font-medium text-brand-secondary">
+                <div className="rounded-md border border-custom-border-80 bg-custom-background-80 p-2 text-xs">
+                  <span className="font-medium text-custom-text-200">
                     {assignee
                       ? assignee.assignees__first_name + " " + assignee.assignees__last_name
                       : "No assignee"}
@@ -69,12 +69,11 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
             }}
             margin={{ top: 20 }}
             theme={{
-              background: "rgb(var(--color-bg-base))",
               axis: {},
             }}
           />
         ) : (
-          <div className="text-brand-secondary text-center text-sm py-8">
+          <div className="text-custom-text-200 text-center text-sm py-8">
             No matching data found.
           </div>
         )}
diff --git a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
index 9a1f7bdc36..c75e577722 100644
--- a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
+++ b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
@@ -15,7 +15,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
   const quarterMonthsList = [startMonth, startMonth + 1, startMonth + 2];
 
   return (
-    <div className="py-3 border border-brand-base rounded-[10px]">
+    <div className="py-3 border border-custom-border-80 rounded-[10px]">
       <h1 className="px-3 text-base font-medium">Issues closed in a year</h1>
       {defaultAnalytics.issue_completed_month_wise.length > 0 ? (
         <LineGraph
@@ -43,9 +43,9 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
           margin={{ top: 20 }}
           enableSlices="x"
           sliceTooltip={(datum) => (
-            <div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
+            <div className="rounded-md border border-custom-border-80 bg-custom-background-80 p-2 text-xs">
               {datum.slice.points[0].data.yFormatted}
-              <span className="text-brand-secondary"> issues closed in </span>
+              <span className="text-custom-text-200"> issues closed in </span>
               {datum.slice.points[0].data.xFormatted}
             </div>
           )}
@@ -55,7 +55,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
           enableArea
         />
       ) : (
-        <div className="text-brand-secondary text-center text-sm py-8">No matching data found.</div>
+        <div className="text-custom-text-200 text-center text-sm py-8">No matching data found.</div>
       )}
     </div>
   );
diff --git a/apps/app/components/analytics/select/project.tsx b/apps/app/components/analytics/select/project.tsx
index 0cc88aa3b6..5d625bd02d 100644
--- a/apps/app/components/analytics/select/project.tsx
+++ b/apps/app/components/analytics/select/project.tsx
@@ -15,7 +15,7 @@ export const SelectProject: React.FC<Props> = ({ value, onChange, projects }) =>
     query: project.name + project.identifier,
     content: (
       <div className="flex items-center gap-2">
-        <span className="text-brand-secondary text-[0.65rem]">{project.identifier}</span>
+        <span className="text-custom-text-200 text-[0.65rem]">{project.identifier}</span>
         {project.name}
       </div>
     ),
diff --git a/apps/app/components/analytics/select/segment.tsx b/apps/app/components/analytics/select/segment.tsx
index ef6a2fe51d..e125d8401c 100644
--- a/apps/app/components/analytics/select/segment.tsx
+++ b/apps/app/components/analytics/select/segment.tsx
@@ -23,7 +23,7 @@ export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => {
       label={
         <span>
           {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label ?? (
-            <span className="text-brand-secondary">No value</span>
+            <span className="text-custom-text-200">No value</span>
           )}
         </span>
       }
diff --git a/apps/app/components/auth-screens/not-authorized-view.tsx b/apps/app/components/auth-screens/not-authorized-view.tsx
index d76e56b61e..f0917a6406 100644
--- a/apps/app/components/auth-screens/not-authorized-view.tsx
+++ b/apps/app/components/auth-screens/not-authorized-view.tsx
@@ -22,7 +22,7 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
 
   return (
     <DefaultLayout>
-      <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-brand-surface-1 text-center">
+      <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-90 text-center">
         <div className="h-44 w-72">
           <Image
             src={type === "project" ? ProjectNotAuthorizedImg : WorkspaceNotAuthorizedImg}
@@ -31,16 +31,16 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
             alt="ProjectSettingImg"
           />
         </div>
-        <h1 className="text-xl font-medium text-brand-base">
+        <h1 className="text-xl font-medium text-custom-text-100">
           Oops! You are not authorized to view this page
         </h1>
 
-        <div className="w-full max-w-md text-base text-brand-secondary">
+        <div className="w-full max-w-md text-base text-custom-text-200">
           {user ? (
             <p>
               You have signed in as {user.email}. <br />
               <Link href={`/?next=${currentPath}`}>
-                <a className="font-medium text-brand-base">Sign in</a>
+                <a className="font-medium text-custom-text-100">Sign in</a>
               </Link>{" "}
               with different account that has access to this page.
             </p>
@@ -48,7 +48,7 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
             <p>
               You need to{" "}
               <Link href={`/?next=${currentPath}`}>
-                <a className="font-medium text-brand-base">Sign in</a>
+                <a className="font-medium text-custom-text-100">Sign in</a>
               </Link>{" "}
               with an account that has access to this page.
             </p>
diff --git a/apps/app/components/auth-screens/project/join-project.tsx b/apps/app/components/auth-screens/project/join-project.tsx
index 06ae1c2409..8547736329 100644
--- a/apps/app/components/auth-screens/project/join-project.tsx
+++ b/apps/app/components/auth-screens/project/join-project.tsx
@@ -41,13 +41,15 @@ export const JoinProject: React.FC = () => {
   };
 
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-brand-surface-1 text-center">
+    <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-90 text-center">
       <div className="h-44 w-72">
         <Image src={JoinProjectImg} height="176" width="288" alt="JoinProject" />
       </div>
-      <h1 className="text-xl font-medium text-brand-base">You are not a member of this project</h1>
+      <h1 className="text-xl font-medium text-custom-text-100">
+        You are not a member of this project
+      </h1>
 
-      <div className="w-full max-w-md text-base text-brand-secondary">
+      <div className="w-full max-w-md text-base text-custom-text-200">
         <p className="mx-auto w-full text-sm md:w-3/4">
           You are not a member of this project, but you can join this project by clicking the button
           below.
diff --git a/apps/app/components/auth-screens/workspace/not-a-member.tsx b/apps/app/components/auth-screens/workspace/not-a-member.tsx
index 12bb3d850f..ee63b58831 100644
--- a/apps/app/components/auth-screens/workspace/not-a-member.tsx
+++ b/apps/app/components/auth-screens/workspace/not-a-member.tsx
@@ -11,7 +11,7 @@ export const NotAWorkspaceMember = () => (
       <div className="space-y-8 text-center">
         <div className="space-y-2">
           <h3 className="text-lg font-semibold">Not Authorized!</h3>
-          <p className="mx-auto w-1/2 text-sm text-brand-secondary">
+          <p className="mx-auto w-1/2 text-sm text-custom-text-200">
             You{"'"}re not a member of this workspace. Please contact the workspace admin to get an
             invitation or check your pending invitations.
           </p>
diff --git a/apps/app/components/breadcrumbs/index.tsx b/apps/app/components/breadcrumbs/index.tsx
index 6e2c857854..ce0e0fafdd 100644
--- a/apps/app/components/breadcrumbs/index.tsx
+++ b/apps/app/components/breadcrumbs/index.tsx
@@ -17,12 +17,12 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
       <div className="flex items-center">
         <button
           type="button"
-          className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-brand-base text-center text-sm hover:bg-brand-surface-1"
+          className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-custom-sidebar-border-80 text-center text-sm hover:bg-custom-sidebar-background-90"
           onClick={() => router.back()}
         >
           <Icon
             iconName="keyboard_backspace"
-            className="text-base leading-4 text-brand-secondary group-hover:text-brand-base"
+            className="text-base leading-4 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100"
           />
         </button>
         {children}
@@ -41,7 +41,7 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) =>
   <>
     {link ? (
       <Link href={link}>
-        <a className="border-r-2 border-brand-base px-3 text-sm">
+        <a className="border-r-2 border-custom-sidebar-border-80 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
index f4bcd7483c..b2b43c6704 100644
--- a/apps/app/components/command-palette/change-interface-theme.tsx
+++ b/apps/app/components/command-palette/change-interface-theme.tsx
@@ -34,8 +34,8 @@ export const ChangeInterfaceTheme: React.FC<Props> = ({ setIsPaletteOpen }) => {
           }}
           className="focus:outline-none"
         >
-          <div className="flex items-center gap-2 text-brand-secondary">
-            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <SettingIcon className="h-4 w-4 text-custom-text-200" />
             {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 32634f18c3..1dcb3eec39 100644
--- a/apps/app/components/command-palette/command-pallette.tsx
+++ b/apps/app/components/command-palette/command-pallette.tsx
@@ -408,7 +408,7 @@ export const CommandPalette: React.FC = () => {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+            <div className="fixed inset-0 bg-custom-backdrop 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">
@@ -421,7 +421,7 @@ export const CommandPalette: React.FC = () => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-brand-base divide-opacity-10 rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-custom-border-80 divide-opacity-10 rounded-xl border border-custom-border-80 bg-custom-background-100 shadow-2xl transition-all">
                 <Command
                   filter={(value, search) => {
                     if (value.toLowerCase().includes(search.toLowerCase())) return 1;
@@ -444,7 +444,7 @@ export const CommandPalette: React.FC = () => {
                 >
                   {issueId && issueDetails && (
                     <div className="flex p-3">
-                      <p className="overflow-hidden truncate rounded-md bg-brand-surface-1 p-1 px-2 text-xs font-medium text-brand-secondary">
+                      <p className="overflow-hidden truncate rounded-md bg-custom-background-90 p-1 px-2 text-xs font-medium text-custom-text-200">
                         {issueDetails.project_detail?.identifier}-{issueDetails.sequence_id}{" "}
                         {issueDetails?.name}
                       </p>
@@ -452,11 +452,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-brand-secondary"
+                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-200"
                       aria-hidden="true"
                     />
                     <Command.Input
-                      className="w-full border-0 border-b border-brand-base bg-transparent p-4 pl-11 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                      className="w-full border-0 border-b border-custom-border-80 bg-transparent p-4 pl-11 text-custom-text-100 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
                       placeholder={placeholder}
                       value={searchTerm}
                       onValueChange={(e) => {
@@ -470,7 +470,7 @@ export const CommandPalette: React.FC = () => {
                       resultsCount === 0 &&
                       searchTerm !== "" &&
                       debouncedSearchTerm !== "" && (
-                        <div className="my-4 text-center text-brand-secondary">
+                        <div className="my-4 text-center text-custom-text-200">
                           No results found.
                         </div>
                       )}
@@ -533,9 +533,9 @@ export const CommandPalette: React.FC = () => {
                                       value={value}
                                       className="focus:outline-none"
                                     >
-                                      <div className="flex items-center gap-2 overflow-hidden text-brand-secondary">
+                                      <div className="flex items-center gap-2 overflow-hidden text-custom-text-200">
                                         <Icon
-                                          className="h-4 w-4 text-brand-secondary"
+                                          className="h-4 w-4 text-custom-text-200"
                                           color="#6b7280"
                                         />
                                         <p className="block flex-1 truncate">{item.name}</p>
@@ -562,8 +562,8 @@ export const CommandPalette: React.FC = () => {
                               }}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-brand-secondary">
-                                <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <Squares2X2Icon className="h-4 w-4 text-custom-text-200" />
                                 Change state...
                               </div>
                             </Command.Item>
@@ -575,8 +575,8 @@ export const CommandPalette: React.FC = () => {
                               }}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-brand-secondary">
-                                <ChartBarIcon className="h-4 w-4 text-brand-secondary" />
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <ChartBarIcon className="h-4 w-4 text-custom-text-200" />
                                 Change priority...
                               </div>
                             </Command.Item>
@@ -588,8 +588,8 @@ export const CommandPalette: React.FC = () => {
                               }}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-brand-secondary">
-                                <UsersIcon className="h-4 w-4 text-brand-secondary" />
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <UsersIcon className="h-4 w-4 text-custom-text-200" />
                                 Assign to...
                               </div>
                             </Command.Item>
@@ -600,15 +600,15 @@ export const CommandPalette: React.FC = () => {
                               }}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-brand-secondary">
+                              <div className="flex items-center gap-2 text-custom-text-200">
                                 {issueDetails?.assignees.includes(user.id) ? (
                                   <>
-                                    <UserMinusIcon className="h-4 w-4 text-brand-secondary" />
+                                    <UserMinusIcon className="h-4 w-4 text-custom-text-200" />
                                     Un-assign from me
                                   </>
                                 ) : (
                                   <>
-                                    <UserPlusIcon className="h-4 w-4 text-brand-secondary" />
+                                    <UserPlusIcon className="h-4 w-4 text-custom-text-200" />
                                     Assign to me
                                   </>
                                 )}
@@ -616,8 +616,8 @@ export const CommandPalette: React.FC = () => {
                             </Command.Item>
 
                             <Command.Item onSelect={deleteIssue} className="focus:outline-none">
-                              <div className="flex items-center gap-2 text-brand-secondary">
-                                <TrashIcon className="h-4 w-4 text-brand-secondary" />
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <TrashIcon className="h-4 w-4 text-custom-text-200" />
                                 Delete issue
                               </div>
                             </Command.Item>
@@ -628,8 +628,8 @@ export const CommandPalette: React.FC = () => {
                               }}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-brand-secondary">
-                                <LinkIcon className="h-4 w-4 text-brand-secondary" />
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <LinkIcon className="h-4 w-4 text-custom-text-200" />
                                 Copy issue URL to clipboard
                               </div>
                             </Command.Item>
@@ -638,9 +638,9 @@ export const CommandPalette: React.FC = () => {
                         <Command.Group heading="Issue">
                           <Command.Item
                             onSelect={createNewIssue}
-                            className="focus:bg-brand-surface-2"
+                            className="focus:bg-custom-background-80"
                           >
-                            <div className="flex items-center gap-2 text-brand-secondary">
+                            <div className="flex items-center gap-2 text-custom-text-200">
                               <LayerDiagonalIcon className="h-4 w-4" color="#6b7280" />
                               Create new issue
                             </div>
@@ -654,7 +654,7 @@ export const CommandPalette: React.FC = () => {
                               onSelect={createNewProject}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-brand-secondary">
+                              <div className="flex items-center gap-2 text-custom-text-200">
                                 <AssignmentClipboardIcon className="h-4 w-4" color="#6b7280" />
                                 Create new project
                               </div>
@@ -670,7 +670,7 @@ export const CommandPalette: React.FC = () => {
                                 onSelect={createNewCycle}
                                 className="focus:outline-none"
                               >
-                                <div className="flex items-center gap-2 text-brand-secondary">
+                                <div className="flex items-center gap-2 text-custom-text-200">
                                   <ContrastIcon className="h-4 w-4" color="#6b7280" />
                                   Create new cycle
                                 </div>
@@ -683,7 +683,7 @@ export const CommandPalette: React.FC = () => {
                                 onSelect={createNewModule}
                                 className="focus:outline-none"
                               >
-                                <div className="flex items-center gap-2 text-brand-secondary">
+                                <div className="flex items-center gap-2 text-custom-text-200">
                                   <PeopleGroupIcon className="h-4 w-4" color="#6b7280" />
                                   Create new module
                                 </div>
@@ -693,7 +693,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-brand-secondary">
+                                <div className="flex items-center gap-2 text-custom-text-200">
                                   <ViewListIcon className="h-4 w-4" color="#6b7280" />
                                   Create new view
                                 </div>
@@ -703,7 +703,7 @@ export const CommandPalette: React.FC = () => {
 
                             <Command.Group heading="Page">
                               <Command.Item onSelect={createNewPage} className="focus:outline-none">
-                                <div className="flex items-center gap-2 text-brand-secondary">
+                                <div className="flex items-center gap-2 text-custom-text-200">
                                   <DocumentTextIcon className="h-4 w-4" color="#6b7280" />
                                   Create new page
                                 </div>
@@ -721,7 +721,7 @@ export const CommandPalette: React.FC = () => {
                                   }
                                   className="focus:outline-none"
                                 >
-                                  <div className="flex items-center gap-2 text-brand-secondary">
+                                  <div className="flex items-center gap-2 text-custom-text-200">
                                     <InboxIcon className="h-4 w-4" color="#6b7280" />
                                     Open inbox
                                   </div>
@@ -740,7 +740,7 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-brand-secondary">
+                            <div className="flex items-center gap-2 text-custom-text-200">
                               <SettingIcon className="h-4 w-4" color="#6b7280" />
                               Search settings...
                             </div>
@@ -751,8 +751,8 @@ export const CommandPalette: React.FC = () => {
                             onSelect={createNewWorkspace}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-brand-secondary">
-                              <FolderPlusIcon className="h-4 w-4 text-brand-secondary" />
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <FolderPlusIcon className="h-4 w-4 text-custom-text-200" />
                               Create new workspace
                             </div>
                           </Command.Item>
@@ -764,8 +764,8 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-brand-secondary">
-                              <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <SettingIcon className="h-4 w-4 text-custom-text-200" />
                               Change interface theme...
                             </div>
                           </Command.Item>
@@ -781,8 +781,8 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-brand-secondary">
-                              <RocketLaunchIcon className="h-4 w-4 text-brand-secondary" />
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <RocketLaunchIcon className="h-4 w-4 text-custom-text-200" />
                               Open keyboard shortcuts
                             </div>
                           </Command.Item>
@@ -793,8 +793,8 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-brand-secondary">
-                              <DocumentIcon className="h-4 w-4 text-brand-secondary" />
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <DocumentIcon className="h-4 w-4 text-custom-text-200" />
                               Open Plane documentation
                             </div>
                           </Command.Item>
@@ -805,7 +805,7 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-brand-secondary">
+                            <div className="flex items-center gap-2 text-custom-text-200">
                               <DiscordIcon className="h-4 w-4" color="#6b7280" />
                               Join our Discord
                             </div>
@@ -820,7 +820,7 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-brand-secondary">
+                            <div className="flex items-center gap-2 text-custom-text-200">
                               <GithubIcon className="h-4 w-4" color="#6b7280" />
                               Report a bug
                             </div>
@@ -832,8 +832,8 @@ export const CommandPalette: React.FC = () => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-brand-secondary">
-                              <ChatBubbleOvalLeftEllipsisIcon className="h-4 w-4 text-brand-secondary" />
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <ChatBubbleOvalLeftEllipsisIcon className="h-4 w-4 text-custom-text-200" />
                               Chat with us
                             </div>
                           </Command.Item>
@@ -847,8 +847,8 @@ export const CommandPalette: React.FC = () => {
                           onSelect={() => redirect(`/${workspaceSlug}/settings`)}
                           className="focus:outline-none"
                         >
-                          <div className="flex items-center gap-2 text-brand-secondary">
-                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
                             General
                           </div>
                         </Command.Item>
@@ -856,8 +856,8 @@ export const CommandPalette: React.FC = () => {
                           onSelect={() => redirect(`/${workspaceSlug}/settings/members`)}
                           className="focus:outline-none"
                         >
-                          <div className="flex items-center gap-2 text-brand-secondary">
-                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
                             Members
                           </div>
                         </Command.Item>
@@ -865,8 +865,8 @@ export const CommandPalette: React.FC = () => {
                           onSelect={() => redirect(`/${workspaceSlug}/settings/billing`)}
                           className="focus:outline-none"
                         >
-                          <div className="flex items-center gap-2 text-brand-secondary">
-                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
                             Billing and Plans
                           </div>
                         </Command.Item>
@@ -874,8 +874,8 @@ export const CommandPalette: React.FC = () => {
                           onSelect={() => redirect(`/${workspaceSlug}/settings/integrations`)}
                           className="focus:outline-none"
                         >
-                          <div className="flex items-center gap-2 text-brand-secondary">
-                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
                             Integrations
                           </div>
                         </Command.Item>
@@ -883,8 +883,8 @@ export const CommandPalette: React.FC = () => {
                           onSelect={() => redirect(`/${workspaceSlug}/settings/import-export`)}
                           className="focus:outline-none"
                         >
-                          <div className="flex items-center gap-2 text-brand-secondary">
-                            <SettingIcon className="h-4 w-4 text-brand-secondary" />
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
                             Import/Export
                           </div>
                         </Command.Item>
diff --git a/apps/app/components/command-palette/shortcuts-modal.tsx b/apps/app/components/command-palette/shortcuts-modal.tsx
index 8f946f5ea7..bee6f42ce5 100644
--- a/apps/app/components/command-palette/shortcuts-modal.tsx
+++ b/apps/app/components/command-palette/shortcuts-modal.tsx
@@ -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-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">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="bg-custom-background-80 p-5">
                   <div className="sm:flex sm:items-start">
                     <div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="flex justify-between text-lg font-medium leading-6 text-brand-base"
+                        className="flex justify-between text-lg font-medium leading-6 text-custom-text-100"
                       >
                         <span>Keyboard Shortcuts</span>
                         <span>
                           <button type="button" onClick={() => setIsOpen(false)}>
                             <XMarkIcon
-                              className="h-6 w-6 text-gray-400 hover:text-brand-secondary"
+                              className="h-6 w-6 text-gray-400 hover:text-custom-text-200"
                               aria-hidden="true"
                             />
                           </button>
                         </span>
                       </Dialog.Title>
                       <div>
-                        <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-brand-base bg-brand-surface-1 px-3 py-2">
-                          <MagnifyingGlassIcon className="h-3.5 w-3.5 text-brand-secondary" />
+                        <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-custom-border-80 bg-custom-background-90 px-3 py-2">
+                          <MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-200" />
                           <Input
-                            className="w-full  border-none bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
+                            className="w-full  border-none bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
                             id="search"
                             name="search"
                             type="text"
@@ -123,22 +123,22 @@ 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-brand-secondary">
+                                    <p className="text-sm text-custom-text-200">
                                       {shortcut.description}
                                     </p>
                                     <div className="flex items-center gap-x-2.5">
                                       {shortcut.keys.split(",").map((key, index) => (
                                         <span key={index} className="flex items-center gap-1">
                                           {key === "Ctrl" ? (
-                                            <span className="flex h-full items-center rounded-sm border border-brand-base bg-brand-surface-1 p-1.5">
-                                              <CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
+                                            <span className="flex h-full items-center rounded-sm border border-custom-border-80 bg-custom-background-90 p-1.5">
+                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
                                             </span>
                                           ) : key === "Ctrl" ? (
-                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 p-1.5 text-sm font-medium text-brand-secondary">
-                                              <CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
+                                            <kbd className="rounded-sm border border-custom-border-80 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
+                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
                                             </kbd>
                                           ) : (
-                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-brand-secondary">
+                                            <kbd className="rounded-sm border border-custom-border-80 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
                                               {key}
                                             </kbd>
                                           )}
@@ -151,7 +151,7 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                             ))
                           ) : (
                             <div className="flex flex-col gap-y-3">
-                              <p className="text-sm text-brand-secondary">
+                              <p className="text-sm text-custom-text-200">
                                 No shortcuts found for{" "}
                                 <span className="font-semibold italic">
                                   {`"`}
@@ -168,20 +168,20 @@ 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-brand-secondary">{description}</p>
+                                    <p className="text-sm text-custom-text-200">{description}</p>
                                     <div className="flex items-center gap-x-2.5">
                                       {keys.split(",").map((key, index) => (
                                         <span key={index} className="flex items-center gap-1">
                                           {key === "Ctrl" ? (
-                                            <span className="flex h-full items-center rounded-sm border border-brand-base bg-brand-surface-1 p-1.5 text-brand-secondary">
-                                              <CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
+                                            <span className="flex h-full items-center rounded-sm border border-custom-border-80 bg-custom-background-90 p-1.5 text-custom-text-200">
+                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
                                             </span>
                                           ) : key === "Ctrl" ? (
-                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 p-1.5 text-sm font-medium text-brand-secondary">
-                                              <CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
+                                            <kbd className="rounded-sm border border-custom-border-80 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
+                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
                                             </kbd>
                                           ) : (
-                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-brand-secondary">
+                                            <kbd className="rounded-sm border border-custom-border-80 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
                                               {key}
                                             </kbd>
                                           )}
diff --git a/apps/app/components/core/board-view/all-boards.tsx b/apps/app/components/core/board-view/all-boards.tsx
index 711fb7336a..7b5d1e5275 100644
--- a/apps/app/components/core/board-view/all-boards.tsx
+++ b/apps/app/components/core/board-view/all-boards.tsx
@@ -85,7 +85,7 @@ export const AllBoards: React.FC<Props> = ({
                     return (
                       <div
                         key={index}
-                        className="flex items-center justify-between gap-2 rounded bg-brand-surface-1 p-2 shadow"
+                        className="flex items-center justify-between gap-2 rounded bg-custom-background-90 p-2 shadow"
                       >
                         <div className="flex items-center gap-2">
                           {currentState &&
@@ -96,7 +96,7 @@ export const AllBoards: React.FC<Props> = ({
                               : addSpaceIfCamelCase(singleGroup)}
                           </h4>
                         </div>
-                        <span className="text-xs text-brand-secondary">0</span>
+                        <span className="text-xs text-custom-text-200">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 30ec5c0fb7..028ec823f5 100644
--- a/apps/app/components/core/board-view/board-header.tsx
+++ b/apps/app/components/core/board-view/board-header.tsx
@@ -113,7 +113,7 @@ export const BoardHeader: React.FC<Props> = ({
   return (
     <div
       className={`flex items-center justify-between px-1 ${
-        !isCollapsed ? "flex-col rounded-md bg-brand-surface-1" : ""
+        !isCollapsed ? "flex-col rounded-md bg-custom-background-90" : ""
       }`}
     >
       <div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
@@ -134,7 +134,7 @@ export const BoardHeader: React.FC<Props> = ({
           <span
             className={`${
               isCollapsed ? "ml-0.5" : ""
-            } min-w-[2.5rem] rounded-full bg-brand-surface-2 py-1 text-center text-xs`}
+            } min-w-[2.5rem] rounded-full bg-custom-background-80 py-1 text-center text-xs`}
           >
             {groupedByIssues?.[groupTitle].length ?? 0}
           </span>
@@ -144,7 +144,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-brand-secondary outline-none duration-300 hover:bg-brand-surface-2"
+          className="grid h-7 w-7 place-items-center rounded p-1 text-custom-text-200 outline-none duration-300 hover:bg-custom-background-80"
           onClick={() => {
             setIsCollapsed((prevData) => !prevData);
           }}
@@ -158,7 +158,7 @@ export const BoardHeader: React.FC<Props> = ({
         {!isCompleted && selectedGroup !== "created_by" && (
           <button
             type="button"
-            className="grid h-7 w-7 place-items-center rounded p-1 text-brand-secondary outline-none duration-300 hover:bg-brand-surface-2"
+            className="grid h-7 w-7 place-items-center rounded p-1 text-custom-text-200 outline-none duration-300 hover:bg-custom-background-80"
             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 52b20d2209..9cfe9c9375 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -77,7 +77,9 @@ export const SingleBoard: React.FC<Props> = ({
           {(provided, snapshot) => (
             <div
               className={`relative h-full ${
-                orderBy !== "sort_order" && snapshot.isDraggingOver ? "bg-brand-base/20" : ""
+                orderBy !== "sort_order" && snapshot.isDraggingOver
+                  ? "bg-custom-background-100/20"
+                  : ""
               } ${!isCollapsed ? "hidden" : "flex flex-col"}`}
               ref={provided.innerRef}
               {...provided.droppableProps}
@@ -87,12 +89,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-brand-surface-1 opacity-50`}
+                    } pointer-events-none top-0 left-0 z-[99] h-full w-full bg-custom-background-90 opacity-50`}
                   />
                   <div
                     className={`absolute ${
                       snapshot.isDraggingOver ? "block" : "hidden"
-                    } pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-brand-base p-2 text-xs`}
+                    } pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-custom-background-100 p-2 text-xs`}
                   >
                     This board is ordered by{" "}
                     {replaceUnderscoreIfSnakeCase(
@@ -150,7 +152,7 @@ export const SingleBoard: React.FC<Props> = ({
                   {type === "issue" ? (
                     <button
                       type="button"
-                      className="flex items-center gap-2 font-medium text-brand-accent outline-none p-1"
+                      className="flex items-center gap-2 font-medium text-custom-primary outline-none p-1"
                       onClick={addIssueToState}
                     >
                       <PlusIcon className="h-4 w-4" />
@@ -162,7 +164,7 @@ export const SingleBoard: React.FC<Props> = ({
                         customButton={
                           <button
                             type="button"
-                            className="flex items-center gap-2 font-medium text-brand-accent outline-none"
+                            className="flex items-center gap-2 font-medium text-custom-primary 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 6753e84cd7..a27989a2f0 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -43,7 +43,7 @@ import {
 import { LayerDiagonalIcon } from "components/icons";
 // helpers
 import { handleIssuesMutation } from "constants/issue";
-import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import {
   ICurrentUserResponse,
@@ -265,8 +265,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
         </a>
       </ContextMenu>
       <div
-        className={`mb-3 rounded bg-brand-base shadow ${
-          snapshot.isDragging ? "border-2 border-brand-accent shadow-lg" : ""
+        className={`mb-3 rounded bg-custom-background-90 shadow ${
+          snapshot.isDragging ? "border-2 border-custom-primary shadow-lg" : ""
         }`}
         ref={provided.innerRef}
         {...provided.draggableProps}
@@ -290,7 +290,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 <CustomMenu
                   customButton={
                     <button
-                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded p-1 text-left text-xs duration-300 hover:bg-brand-surface-2"
+                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded p-1 text-left text-xs duration-300 hover:bg-custom-background-80"
                       onClick={() => setIsMenuActive(!isMenuActive)}
                     >
                       <EllipsisHorizontalIcon className="h-4 w-4" />
@@ -330,11 +330,11 @@ 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-brand-secondary">
+                <div className="mb-2.5 text-xs font-medium text-custom-text-200">
                   {issue.project_detail.identifier}-{issue.sequence_id}
                 </div>
               )}
-              <h5 className="text-sm group-hover:text-brand-accent break-words line-clamp-3">
+              <h5 className="text-sm group-hover:text-custom-primary break-words line-clamp-3">
                 {issue.name}
               </h5>
             </a>
@@ -394,9 +394,9 @@ export const SingleBoardIssue: React.FC<Props> = ({
               />
             )}
             {properties.sub_issue_count && (
-              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+              <div className="flex cursor-default items-center rounded-md border border-custom-border-80 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
-                  <div className="flex items-center gap-1 text-brand-secondary">
+                  <div className="flex items-center gap-1 text-custom-text-200">
                     <LayerDiagonalIcon className="h-3.5 w-3.5" />
                     {issue.sub_issues_count}
                   </div>
@@ -404,9 +404,9 @@ export const SingleBoardIssue: React.FC<Props> = ({
               </div>
             )}
             {properties.link && (
-              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+              <div className="flex cursor-default items-center rounded-md border border-custom-border-80 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
-                  <div className="flex items-center gap-1 text-brand-secondary">
+                  <div className="flex items-center gap-1 text-custom-text-200">
                     <LinkIcon className="h-3.5 w-3.5" />
                     {issue.link_count}
                   </div>
@@ -414,9 +414,9 @@ export const SingleBoardIssue: React.FC<Props> = ({
               </div>
             )}
             {properties.attachment_count && (
-              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+              <div className="flex cursor-default items-center rounded-md border border-custom-border-80 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
-                  <div className="flex items-center gap-1 text-brand-secondary">
+                  <div className="flex items-center gap-1 text-custom-text-200">
                     <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
                     {issue.attachment_count}
                   </div>
diff --git a/apps/app/components/core/calendar-view/calendar-header.tsx b/apps/app/components/core/calendar-view/calendar-header.tsx
index 23c11d254c..0f62632b1c 100644
--- a/apps/app/components/core/calendar-view/calendar-header.tsx
+++ b/apps/app/components/core/calendar-view/calendar-header.tsx
@@ -62,7 +62,7 @@ export const CalendarHeader: React.FC<Props> = ({
           {({ open }) => (
             <>
               <Popover.Button>
-                <div className="flex items-center justify-center gap-2 text-2xl font-semibold text-brand-base">
+                <div className="flex items-center justify-center gap-2 text-2xl font-semibold text-custom-text-100">
                   <span>{formatDate(currentDate, "Month")}</span>{" "}
                   <span>{formatDate(currentDate, "yyyy")}</span>
                 </div>
@@ -77,30 +77,30 @@ export const CalendarHeader: React.FC<Props> = ({
                 leaveFrom="opacity-100 translate-y-0"
                 leaveTo="opacity-0 translate-y-1"
               >
-                <Popover.Panel className="absolute top-10 left-0 z-20 flex w-full max-w-xs transform flex-col overflow-hidden rounded-[10px] bg-brand-surface-2 shadow-lg">
+                <Popover.Panel className="absolute top-10 left-0 z-20 flex w-full max-w-xs transform flex-col overflow-hidden rounded-[10px] bg-custom-background-80 shadow-lg">
                   <div className="flex items-center justify-center gap-5 px-2 py-2 text-sm">
                     {YEARS_LIST.map((year) => (
                       <button
                         onClick={() => updateDate(updateDateWithYear(year.label, currentDate))}
                         className={` ${
                           isSameYear(year.value, currentDate)
-                            ? "text-sm font-medium text-brand-base"
-                            : "text-xs text-brand-secondary "
-                        } hover:text-sm hover:font-medium hover:text-brand-base`}
+                            ? "text-sm font-medium text-custom-text-100"
+                            : "text-xs text-custom-text-200 "
+                        } hover:text-sm hover:font-medium hover:text-custom-text-100`}
                       >
                         {year.label}
                       </button>
                     ))}
                   </div>
-                  <div className="grid grid-cols-4  border-t border-brand-base px-2">
+                  <div className="grid grid-cols-4  border-t border-custom-border-80 px-2">
                     {MONTHS_LIST.map((month) => (
                       <button
                         onClick={() =>
                           updateDate(updateDateWithMonth(`${month.value}`, currentDate))
                         }
-                        className={`px-2 py-2 text-xs text-brand-secondary hover:font-medium hover:text-brand-base ${
+                        className={`px-2 py-2 text-xs text-custom-text-200 hover:font-medium hover:text-custom-text-100 ${
                           isSameMonth(`${month.value}`, currentDate)
-                            ? "font-medium text-brand-base"
+                            ? "font-medium text-custom-text-100"
                             : ""
                         }`}
                       >
@@ -152,7 +152,7 @@ export const CalendarHeader: React.FC<Props> = ({
 
       <div className="flex w-full items-center justify-end gap-2">
         <button
-          className="group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base px-3 py-1 text-sm hover:bg-brand-surface-2 hover:text-brand-base focus:outline-none"
+          className="group flex cursor-pointer items-center gap-2 rounded-md border border-custom-border-80 px-3 py-1 text-sm hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none"
           onClick={() => {
             if (isMonthlyView) {
               updateDate(new Date());
@@ -170,7 +170,7 @@ export const CalendarHeader: React.FC<Props> = ({
 
         <CustomMenu
           customButton={
-            <div className="group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base px-3 py-1 text-sm hover:bg-brand-surface-2 hover:text-brand-base focus:outline-none ">
+            <div className="group flex cursor-pointer items-center gap-2 rounded-md border border-custom-border-80 px-3 py-1 text-sm hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none ">
               {isMonthlyView ? "Monthly" : "Weekly"}
               <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
             </div>
@@ -181,7 +181,7 @@ export const CalendarHeader: React.FC<Props> = ({
               setIsMonthlyView(true);
               changeDateRange(startOfWeek(currentDate), lastDayOfWeek(currentDate));
             }}
-            className="w-52 text-sm text-brand-secondary"
+            className="w-52 text-sm text-custom-text-200"
           >
             <div className="flex w-full max-w-[260px] items-center justify-between gap-2">
               <span className="flex items-center gap-2">Monthly View</span>
@@ -198,7 +198,7 @@ export const CalendarHeader: React.FC<Props> = ({
                 getCurrentWeekEndDate(currentDate)
               );
             }}
-            className="w-52 text-sm text-brand-secondary"
+            className="w-52 text-sm text-custom-text-200"
           >
             <div className="flex w-full items-center justify-between gap-2">
               <span className="flex items-center gap-2">Weekly View</span>
@@ -207,7 +207,7 @@ export const CalendarHeader: React.FC<Props> = ({
               />
             </div>
           </CustomMenu.MenuItem>
-          <div className="mt-1 flex w-52 items-center justify-between border-t border-brand-base py-2 px-1  text-sm text-brand-secondary">
+          <div className="mt-1 flex w-52 items-center justify-between border-t border-custom-border-80 py-2 px-1  text-sm text-custom-text-200">
             <h4>Show weekends</h4>
             <ToggleSwitch value={showWeekEnds} onChange={() => setShowWeekEnds(!showWeekEnds)} />
           </div>
diff --git a/apps/app/components/core/calendar-view/calendar.tsx b/apps/app/components/core/calendar-view/calendar.tsx
index 9da6e58731..903f87f0fa 100644
--- a/apps/app/components/core/calendar-view/calendar.tsx
+++ b/apps/app/components/core/calendar-view/calendar.tsx
@@ -172,7 +172,7 @@ export const CalendarView: React.FC<Props> = ({
   return calendarIssues ? (
     <div className="h-full overflow-y-auto">
       <DragDropContext onDragEnd={onDragEnd}>
-        <div className="h-full rounded-lg p-8 text-brand-secondary">
+        <div className="h-full rounded-lg p-8 text-custom-text-200">
           <CalendarHeader
             isMonthlyView={isMonthlyView}
             setIsMonthlyView={setIsMonthlyView}
@@ -191,7 +191,7 @@ export const CalendarView: React.FC<Props> = ({
             {weeks.map((date, index) => (
               <div
                 key={index}
-                className={`flex  items-center justify-start gap-2 border-brand-base bg-brand-surface-1 p-1.5 text-base font-medium text-brand-secondary ${
+                className={`flex  items-center justify-start gap-2 border-custom-border-80 bg-custom-background-90 p-1.5 text-base font-medium text-custom-text-200 ${
                   !isMonthlyView
                     ? showWeekEnds
                       ? (index + 1) % 7 === 0
diff --git a/apps/app/components/core/calendar-view/single-date.tsx b/apps/app/components/core/calendar-view/single-date.tsx
index 2dbfe5dfdb..ae1ef398b4 100644
--- a/apps/app/components/core/calendar-view/single-date.tsx
+++ b/apps/app/components/core/calendar-view/single-date.tsx
@@ -49,7 +49,7 @@ export const SingleCalendarDate: React.FC<Props> = ({
           key={index}
           ref={provided.innerRef}
           {...provided.droppableProps}
-          className={`group relative flex min-h-[150px] flex-col gap-1.5 border-t border-brand-base p-2.5 text-left text-sm font-medium hover:bg-brand-surface-1 ${
+          className={`group relative flex min-h-[150px] flex-col gap-1.5 border-t border-custom-border-80 p-2.5 text-left text-sm font-medium hover:bg-custom-background-90 ${
             isMonthlyView ? "" : "pt-9"
           } ${
             showWeekEnds
@@ -83,7 +83,7 @@ export const SingleCalendarDate: React.FC<Props> = ({
           {totalIssues > 4 && (
             <button
               type="button"
-              className="w-min whitespace-nowrap rounded-md border border-brand-base bg-brand-surface-2 px-1.5 py-1 text-xs"
+              className="w-min whitespace-nowrap rounded-md border border-custom-border-80 bg-custom-background-80 px-1.5 py-1 text-xs"
               onClick={() => setShowAllIssues((prevData) => !prevData)}
             >
               {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
@@ -91,13 +91,13 @@ export const SingleCalendarDate: React.FC<Props> = ({
           )}
 
           <div
-            className={`absolute top-2 right-2 flex items-center justify-center rounded-md bg-brand-surface-2 p-1 text-xs text-brand-secondary opacity-0 group-hover:opacity-100`}
+            className={`absolute top-2 right-2 flex items-center justify-center rounded-md bg-custom-background-80 p-1 text-xs text-custom-text-200 opacity-0 group-hover:opacity-100`}
           >
             <button
               className="flex items-center justify-center gap-1 text-center"
               onClick={() => addIssueToDate(date.date)}
             >
-              <PlusSmallIcon className="h-4 w-4 text-brand-secondary" />
+              <PlusSmallIcon className="h-4 w-4 text-custom-text-200" />
               Add issue
             </button>
           </div>
diff --git a/apps/app/components/core/calendar-view/single-issue.tsx b/apps/app/components/core/calendar-view/single-issue.tsx
index f172f9a5ae..db9da37941 100644
--- a/apps/app/components/core/calendar-view/single-issue.tsx
+++ b/apps/app/components/core/calendar-view/single-issue.tsx
@@ -163,8 +163,8 @@ export const SingleCalendarIssue: React.FC<Props> = ({
       ref={provided.innerRef}
       {...provided.draggableProps}
       {...provided.dragHandleProps}
-      className={`w-full relative cursor-pointer rounded border border-brand-base px-1.5 py-1.5 text-xs duration-300 hover:cursor-move hover:bg-brand-surface-2 ${
-        snapshot.isDragging ? "bg-brand-surface-2 shadow-lg" : ""
+      className={`w-full relative cursor-pointer rounded border border-custom-border-80 px-1.5 py-1.5 text-xs duration-300 hover:cursor-move hover:bg-custom-background-80 ${
+        snapshot.isDragging ? "bg-custom-background-80 shadow-lg" : ""
       }`}
     >
       <div className="group/card flex w-full flex-col items-start justify-center gap-1.5 text-xs sm:w-auto ">
@@ -199,13 +199,13 @@ export const SingleCalendarIssue: React.FC<Props> = ({
                 tooltipHeading="Issue ID"
                 tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
               >
-                <span className="flex-shrink-0 text-xs text-brand-secondary">
+                <span className="flex-shrink-0 text-xs text-custom-text-200">
                   {issue.project_detail?.identifier}-{issue.sequence_id}
                 </span>
               </Tooltip>
             )}
             <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-              <span className="text-xs text-brand-base">{truncateText(issue.name, 25)}</span>
+              <span className="text-xs text-custom-text-100">{truncateText(issue.name, 25)}</span>
             </Tooltip>
           </a>
         </Link>
@@ -266,9 +266,9 @@ export const SingleCalendarIssue: React.FC<Props> = ({
               />
             )}
             {properties.sub_issue_count && (
-              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+              <div className="flex cursor-default items-center rounded-md border border-custom-border-80 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
-                  <div className="flex items-center gap-1 text-brand-secondary">
+                  <div className="flex items-center gap-1 text-custom-text-200">
                     <LayerDiagonalIcon className="h-3.5 w-3.5" />
                     {issue.sub_issues_count}
                   </div>
@@ -276,9 +276,9 @@ export const SingleCalendarIssue: React.FC<Props> = ({
               </div>
             )}
             {properties.link && (
-              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+              <div className="flex cursor-default items-center rounded-md border border-custom-border-80 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-                  <div className="flex items-center gap-1 text-brand-secondary">
+                  <div className="flex items-center gap-1 text-custom-text-200">
                     <LinkIcon className="h-3.5 w-3.5" />
                     {issue.link_count}
                   </div>
@@ -286,9 +286,9 @@ export const SingleCalendarIssue: React.FC<Props> = ({
               </div>
             )}
             {properties.attachment_count && (
-              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+              <div className="flex cursor-default items-center rounded-md border border-custom-border-80 px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-                  <div className="flex items-center gap-1 text-brand-secondary">
+                  <div className="flex items-center gap-1 text-custom-text-200">
                     <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
                     {issue.attachment_count}
                   </div>
diff --git a/apps/app/components/core/feeds.tsx b/apps/app/components/core/feeds.tsx
index d00804ec84..e294aac0f2 100644
--- a/apps/app/components/core/feeds.tsx
+++ b/apps/app/components/core/feeds.tsx
@@ -55,43 +55,43 @@ const activityDetails: {
   },
   modules: {
     message: "set the module to",
-    icon: <RectangleGroupIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <RectangleGroupIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   state: {
     message: "set the state to",
-    icon: <Squares2X2Icon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <Squares2X2Icon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   priority: {
     message: "set the priority to",
-    icon: <ChartBarIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <ChartBarIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   name: {
     message: "set the name to",
     icon: (
-      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />
+      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />
     ),
   },
   description: {
     message: "updated the description.",
     icon: (
-      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />
+      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />
     ),
   },
   estimate_point: {
     message: "set the estimate point to",
-    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-brand-secondary" aria-hidden="true" />,
+    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-custom-text-200" aria-hidden="true" />,
   },
   target_date: {
     message: "set the due date to",
-    icon: <CalendarDaysIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <CalendarDaysIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   parent: {
     message: "set the parent to",
-    icon: <UserIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <UserIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   issue: {
     message: "deleted the issue.",
-    icon: <TrashIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <TrashIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   estimate: {
     message: "updated the estimate",
@@ -157,7 +157,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
         ) {
           const { workspace_detail, project, issue } = activity;
           value = (
-            <span className="text-brand-secondary">
+            <span className="text-custom-text-200">
               created{" "}
               <Link href={`/${workspace_detail.slug}/projects/${project}/issues/${issue}`}>
                 <a className="inline-flex items-center hover:underline">
@@ -221,9 +221,9 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                     </div>
                   )}
 
-                  <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-brand-surface-2 px-0.5 py-px">
+                  <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
                     <ChatBubbleLeftEllipsisIcon
-                      className="h-3.5 w-3.5 text-brand-secondary"
+                      className="h-3.5 w-3.5 text-custom-text-200"
                       aria-hidden="true"
                     />
                   </span>
@@ -234,7 +234,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-brand-secondary">
+                    <p className="mt-0.5 text-xs text-custom-text-200">
                       Commented {timeAgo(activity.created_at)}
                     </p>
                   </div>
@@ -247,7 +247,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                       }
                       editable={false}
                       noBorder
-                      customClassName="text-xs border border-brand-base bg-brand-base"
+                      customClassName="text-xs border border-custom-border-80 bg-custom-background-100"
                     />
                   </div>
                 </div>
@@ -262,7 +262,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-brand-surface-2"
+                    className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-custom-background-80"
                     aria-hidden="true"
                   />
                 ) : null}
@@ -271,7 +271,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-brand-surface-2 ring-white">
+                          <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-80 ring-white">
                             {activity.field ? (
                               activityDetails[activity.field as keyof typeof activityDetails]?.icon
                             ) : activity.actor_detail.avatar &&
@@ -295,7 +295,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                       </div>
                     </div>
                     <div className="min-w-0 flex-1 py-3">
-                      <div className="text-xs text-brand-secondary">
+                      <div className="text-xs text-custom-text-200">
                         <span className="text-gray font-medium">
                           {activity.actor_detail.first_name}
                           {activity.actor_detail.is_bot
@@ -303,7 +303,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                             : " " + activity.actor_detail.last_name}
                         </span>
                         <span> {action} </span>
-                        <span className="text-xs font-medium text-brand-base"> {value} </span>
+                        <span className="text-xs font-medium text-custom-text-100"> {value} </span>
                         <span className="whitespace-nowrap">{timeAgo(activity.created_at)}</span>
                       </div>
                     </div>
diff --git a/apps/app/components/core/filters/due-date-filter-modal.tsx b/apps/app/components/core/filters/due-date-filter-modal.tsx
index 6c6bc4ec6e..bfed98314b 100644
--- a/apps/app/components/core/filters/due-date-filter-modal.tsx
+++ b/apps/app/components/core/filters/due-date-filter-modal.tsx
@@ -96,7 +96,7 @@ export const DueDateFilterModal: React.FC<Props> = ({ isOpen, handleClose }) =>
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
         <div className="fixed inset-0 z-20 flex w-full justify-center overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
@@ -109,7 +109,7 @@ export const DueDateFilterModal: React.FC<Props> = ({ isOpen, handleClose }) =>
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative flex transform rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative flex transform rounded-lg border border-custom-border-80 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form className="space-y-4" onSubmit={handleSubmit(handleFormSubmit)}>
                   <div className="flex w-full justify-between">
                     <Controller
@@ -157,9 +157,9 @@ export const DueDateFilterModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                   </div>
                   {watch("filterType") === "range" && (
                     <h6 className="text-xs flex items-center gap-1">
-                      <span className="text-brand-secondary">After:</span>
+                      <span className="text-custom-text-200">After:</span>
                       <span>{renderShortDateWithYearFormat(watch("date1"))}</span>
-                      <span className="text-brand-secondary ml-1">Before:</span>
+                      <span className="text-custom-text-200 ml-1">Before:</span>
                       {!isInvalid && <span>{renderShortDateWithYearFormat(watch("date2"))}</span>}
                     </h6>
                   )}
diff --git a/apps/app/components/core/filters/filters-list.tsx b/apps/app/components/core/filters/filters-list.tsx
index 7254f80728..1de8e703e6 100644
--- a/apps/app/components/core/filters/filters-list.tsx
+++ b/apps/app/components/core/filters/filters-list.tsx
@@ -58,9 +58,9 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
           return (
             <div
               key={key}
-              className="flex items-center gap-x-2 rounded-full border border-brand-base bg-brand-surface-2 px-2 py-1"
+              className="flex items-center gap-x-2 rounded-full border border-custom-border-80 bg-custom-background-80 px-2 py-1"
             >
-              <span className="capitalize text-brand-secondary">
+              <span className="capitalize text-custom-text-200">
                 {key === "target_date" ? "Due Date" : replaceUnderscoreIfSnakeCase(key)}:
               </span>
               {filters[key as keyof IIssueFilterOptions] === null ||
@@ -132,7 +132,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                               ? "bg-yellow-500/20 text-yellow-500"
                               : priority === "low"
                               ? "bg-green-500/20 text-green-500"
-                              : "bg-brand-surface-1 text-brand-secondary"
+                              : "bg-custom-background-90 text-custom-text-200"
                           }`}
                         >
                           <span>{getPriorityIcon(priority)}</span>
@@ -171,7 +171,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                         return (
                           <div
                             key={memberId}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-brand-surface-1 px-1 capitalize"
+                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1 capitalize"
                           >
                             <Avatar user={member} />
                             <span>{member?.first_name}</span>
@@ -212,7 +212,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                         return (
                           <div
                             key={`${memberId}-${key}`}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-brand-surface-1 px-1 capitalize"
+                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1 capitalize"
                           >
                             <Avatar user={member} />
                             <span>{member?.first_name}</span>
@@ -310,7 +310,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                         return (
                           <div
                             key={date}
-                            className="inline-flex items-center gap-x-1 rounded-full border border-brand-base bg-brand-base px-1 py-0.5"
+                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-80 bg-custom-background-100 px-1 py-0.5"
                           >
                             <div className="h-1.5 w-1.5 rounded-full" />
                             <span className="capitalize">
@@ -381,7 +381,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
               target_date: null,
             })
           }
-          className="flex items-center gap-x-1 rounded-full border border-brand-base bg-brand-surface-2 px-3 py-1.5 text-xs"
+          className="flex items-center gap-x-1 rounded-full border border-custom-border-80 bg-custom-background-80 px-3 py-1.5 text-xs"
         >
           <span>Clear all filters</span>
           <XMarkIcon className="h-3 w-3" />
diff --git a/apps/app/components/core/filters/issues-view-filter.tsx b/apps/app/components/core/filters/issues-view-filter.tsx
index 4452bfb615..f7d21b276b 100644
--- a/apps/app/components/core/filters/issues-view-filter.tsx
+++ b/apps/app/components/core/filters/issues-view-filter.tsx
@@ -58,48 +58,48 @@ 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-brand-surface-2 ${
-            issueView === "list" ? "bg-brand-surface-2" : ""
+          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
+            issueView === "list" ? "bg-custom-sidebar-background-80" : ""
           }`}
           onClick={() => setIssueView("list")}
         >
-          <ListBulletIcon className="h-4 w-4 text-brand-secondary" />
+          <ListBulletIcon className="h-4 w-4 text-custom-sidebar-text-200" />
         </button>
         <button
           type="button"
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-            issueView === "kanban" ? "bg-brand-surface-2" : ""
+          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
+            issueView === "kanban" ? "bg-custom-sidebar-background-80" : ""
           }`}
           onClick={() => setIssueView("kanban")}
         >
-          <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
+          <Squares2X2Icon className="h-4 w-4 text-custom-sidebar-text-200" />
         </button>
         <button
           type="button"
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-            issueView === "calendar" ? "bg-brand-surface-2" : ""
+          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
+            issueView === "calendar" ? "bg-custom-sidebar-background-80" : ""
           }`}
           onClick={() => setIssueView("calendar")}
         >
-          <CalendarDaysIcon className="h-4 w-4 text-brand-secondary" />
+          <CalendarDaysIcon className="h-4 w-4 text-custom-sidebar-text-200" />
         </button>
         <button
           type="button"
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-            issueView === "spreadsheet" ? "bg-brand-surface-2" : ""
+          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
+            issueView === "spreadsheet" ? "bg-custom-sidebar-background-80" : ""
           }`}
           onClick={() => setIssueView("spreadsheet")}
         >
-          <Icon iconName="table_chart" className="text-brand-secondary" />
+          <Icon iconName="table_chart" className="text-custom-sidebar-text-200" />
         </button>
         <button
           type="button"
-          className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-brand-surface-2 ${
-            issueView === "gantt_chart" ? "bg-brand-surface-2" : ""
+          className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
+            issueView === "gantt_chart" ? "bg-custom-sidebar-background-80" : ""
           }`}
           onClick={() => setIssueView("gantt_chart")}
         >
-          <span className="material-symbols-rounded text-brand-secondary text-[18px] rotate-90">
+          <span className="material-symbols-rounded text-custom-sidebar-text-200 text-[18px] rotate-90">
             waterfall_chart
           </span>
         </button>
@@ -146,8 +146,10 @@ export const IssuesFilterView: React.FC = () => {
         {({ open }) => (
           <>
             <Popover.Button
-              className={`group flex items-center gap-2 rounded-md border border-brand-base bg-transparent px-3 py-1.5 text-xs hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none ${
-                open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
+              className={`group flex items-center gap-2 rounded-md border border-custom-sidebar-border-80 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none ${
+                open
+                  ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
+                  : "text-custom-sidebar-text-200"
               }`}
             >
               View
@@ -163,13 +165,13 @@ export const IssuesFilterView: React.FC = () => {
               leaveFrom="opacity-100 translate-y-0"
               leaveTo="opacity-0 translate-y-1"
             >
-              <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-brand-base bg-brand-surface-1 p-3 shadow-lg">
-                <div className="relative divide-y-2 divide-brand-base">
+              <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-80 bg-custom-background-90 p-3 shadow-lg">
+                <div className="relative divide-y-2 divide-custom-border-80">
                   <div className="space-y-4 pb-3 text-xs">
                     {issueView !== "calendar" && issueView !== "spreadsheet" && (
                       <>
                         <div className="flex items-center justify-between">
-                          <h4 className="text-brand-secondary">Group by</h4>
+                          <h4 className="text-custom-text-200">Group by</h4>
                           <CustomMenu
                             label={
                               GROUP_BY_OPTIONS.find((option) => option.key === groupByProperty)
@@ -190,7 +192,7 @@ export const IssuesFilterView: React.FC = () => {
                           </CustomMenu>
                         </div>
                         <div className="flex items-center justify-between">
-                          <h4 className="text-brand-secondary">Order by</h4>
+                          <h4 className="text-custom-text-200">Order by</h4>
                           <CustomMenu
                             label={
                               ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
@@ -215,7 +217,7 @@ export const IssuesFilterView: React.FC = () => {
                       </>
                     )}
                     <div className="flex items-center justify-between">
-                      <h4 className="text-brand-secondary">Issue type</h4>
+                      <h4 className="text-custom-text-200">Issue type</h4>
                       <CustomMenu
                         label={
                           FILTER_ISSUE_OPTIONS.find((option) => option.key === filters.type)
@@ -241,7 +243,7 @@ export const IssuesFilterView: React.FC = () => {
                     {issueView !== "calendar" && issueView !== "spreadsheet" && (
                       <>
                         <div className="flex items-center justify-between">
-                          <h4 className="text-brand-secondary">Show empty states</h4>
+                          <h4 className="text-custom-text-200">Show empty states</h4>
                           <ToggleSwitch
                             value={showEmptyGroups}
                             onChange={() => setShowEmptyGroups(!showEmptyGroups)}
@@ -253,7 +255,7 @@ export const IssuesFilterView: React.FC = () => {
                           </button>
                           <button
                             type="button"
-                            className="font-medium text-brand-accent"
+                            className="font-medium text-custom-primary"
                             onClick={() => setNewFilterDefaultView()}
                           >
                             Set as default
@@ -264,7 +266,7 @@ export const IssuesFilterView: React.FC = () => {
                   </div>
 
                   <div className="space-y-2 py-3">
-                    <h4 className="text-sm text-brand-secondary">Display Properties</h4>
+                    <h4 className="text-sm text-custom-text-200">Display Properties</h4>
                     <div className="flex flex-wrap items-center gap-2">
                       {Object.keys(properties).map((key) => {
                         if (key === "estimate" && !isEstimateActive) return null;
@@ -282,8 +284,8 @@ export const IssuesFilterView: React.FC = () => {
                             type="button"
                             className={`rounded border px-2 py-1 text-xs capitalize ${
                               properties[key as keyof Properties]
-                                ? "border-brand-accent bg-brand-accent text-white"
-                                : "border-brand-base"
+                                ? "border-custom-primary bg-custom-primary text-white"
+                                : "border-custom-border-80"
                             }`}
                             onClick={() => setProperties(key as keyof Properties)}
                           >
diff --git a/apps/app/components/core/image-picker-popover.tsx b/apps/app/components/core/image-picker-popover.tsx
index 380c6f3560..2bf1a466fc 100644
--- a/apps/app/components/core/image-picker-popover.tsx
+++ b/apps/app/components/core/image-picker-popover.tsx
@@ -62,7 +62,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
   return (
     <Popover className="relative z-[2]" ref={ref}>
       <Popover.Button
-        className="rounded-md border border-brand-base bg-brand-surface-2 px-2 py-1 text-xs text-brand-secondary"
+        className="rounded-md border border-custom-border-80 bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200"
         onClick={() => setIsOpen((prev) => !prev)}
       >
         {label}
@@ -76,16 +76,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 border border-brand-base 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]">
+        <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-80 bg-custom-background-80 shadow-lg">
+          <div className="h-96 w-80 overflow-auto rounded border border-custom-border-80 bg-custom-background-80 p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
             <Tab.Group>
-              <Tab.List as="span" className="inline-block rounded bg-brand-surface-2 p-1">
+              <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
                 {tabOptions.map((tab) => (
                   <Tab
                     key={tab.key}
                     className={({ selected }) =>
                       `rounded py-1 px-4 text-center text-sm outline-none transition-colors ${
-                        selected ? "bg-brand-accent text-white" : "text-brand-base"
+                        selected ? "bg-custom-primary text-white" : "text-custom-text-100"
                       }`
                     }
                   >
diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index 7a8c8960fe..eee8932f47 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@@ -495,7 +495,7 @@ export const IssuesView: React.FC<Props> = ({
               {viewId ? "Update" : "Save"} view
             </PrimaryButton>
           </div>
-          {<div className="mt-3 border-t border-brand-base" />}
+          {<div className="mt-3 border-t border-custom-border-80" />}
         </>
       )}
 
@@ -505,7 +505,7 @@ export const IssuesView: React.FC<Props> = ({
             <div
               className={`${
                 trashBox ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
-              } fixed top-4 left-1/2 -translate-x-1/2 z-40 w-72 flex items-center justify-center gap-2 rounded border-2 border-red-500/20 bg-brand-base px-3 py-5 text-xs font-medium italic text-red-500 ${
+              } fixed top-4 left-1/2 -translate-x-1/2 z-40 w-72 flex items-center justify-center gap-2 rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
                 snapshot.isDraggingOver ? "bg-red-500 blur-2xl opacity-70" : ""
               } transition duration-300`}
               ref={provided.innerRef}
@@ -602,7 +602,7 @@ export const IssuesView: React.FC<Props> = ({
                   title="Create a new issue"
                   description={
                     <span>
-                      Use <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>{" "}
+                      Use <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>{" "}
                       shortcut to create a new issue
                     </span>
                   }
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index 774fbb02d1..f0b5c4295d 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -218,7 +218,7 @@ export const SingleListIssue: React.FC<Props> = ({
         </a>
       </ContextMenu>
       <div
-        className="flex flex-wrap items-center justify-between px-4 py-2.5 gap-2 border-b border-brand-base bg-brand-base last:border-b-0"
+        className="flex flex-wrap items-center justify-between px-4 py-2.5 gap-2 border-b border-custom-border-80 bg-custom-background-100 last:border-b-0"
         onContextMenu={(e) => {
           e.preventDefault();
           setContextMenu(true);
@@ -233,13 +233,13 @@ export const SingleListIssue: React.FC<Props> = ({
                   tooltipHeading="Issue ID"
                   tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
                 >
-                  <span className="flex-shrink-0 text-xs text-brand-secondary">
+                  <span className="flex-shrink-0 text-xs text-custom-text-200">
                     {issue.project_detail?.identifier}-{issue.sequence_id}
                   </span>
                 </Tooltip>
               )}
               <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-                <span className="text-[0.825rem] text-brand-base">
+                <span className="text-[0.825rem] text-custom-text-100">
                   {truncateText(issue.name, 50)}
                 </span>
               </Tooltip>
@@ -302,9 +302,9 @@ export const SingleListIssue: React.FC<Props> = ({
             />
           )}
           {properties.sub_issue_count && (
-            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-80 px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
-                <div className="flex items-center gap-1 text-brand-secondary">
+                <div className="flex items-center gap-1 text-custom-text-200">
                   <LayerDiagonalIcon className="h-3.5 w-3.5" />
                   {issue.sub_issues_count}
                 </div>
@@ -312,9 +312,9 @@ export const SingleListIssue: React.FC<Props> = ({
             </div>
           )}
           {properties.link && (
-            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-80 px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-                <div className="flex items-center gap-1 text-brand-secondary">
+                <div className="flex items-center gap-1 text-custom-text-200">
                   <LinkIcon className="h-3.5 w-3.5" />
                   {issue.link_count}
                 </div>
@@ -322,9 +322,9 @@ export const SingleListIssue: React.FC<Props> = ({
             </div>
           )}
           {properties.attachment_count && (
-            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-80 px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-                <div className="flex items-center gap-1 text-brand-secondary">
+                <div className="flex items-center gap-1 text-custom-text-200">
                   <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
                   {issue.attachment_count}
                 </div>
diff --git a/apps/app/components/core/list-view/single-list.tsx b/apps/app/components/core/list-view/single-list.tsx
index b76f3ad8aa..511508766d 100644
--- a/apps/app/components/core/list-view/single-list.tsx
+++ b/apps/app/components/core/list-view/single-list.tsx
@@ -141,20 +141,20 @@ export const SingleList: React.FC<Props> = ({
     <Disclosure as="div" defaultOpen>
       {({ open }) => (
         <div>
-          <div className="flex items-center justify-between px-4 py-2.5">
+          <div className="flex items-center justify-between px-4 py-2.5 bg-custom-background-90">
             <Disclosure.Button>
               <div className="flex items-center gap-x-3">
                 {selectedGroup !== null && (
                   <div className="flex items-center">{getGroupIcon()}</div>
                 )}
                 {selectedGroup !== null ? (
-                  <h2 className="text-sm font-semibold capitalize leading-6 text-brand-base">
+                  <h2 className="text-sm font-semibold capitalize leading-6 text-custom-text-100">
                     {getGroupTitle()}
                   </h2>
                 ) : (
                   <h2 className="font-medium leading-5">All Issues</h2>
                 )}
-                <span className="text-brand-2 min-w-[2.5rem] rounded-full bg-brand-surface-2 py-1 text-center text-xs">
+                <span className="text-brand-2 min-w-[2.5rem] rounded-full bg-custom-background-80 py-1 text-center text-xs">
                   {groupedByIssues[groupTitle as keyof IIssue].length}
                 </span>
               </div>
@@ -162,7 +162,7 @@ export const SingleList: React.FC<Props> = ({
             {type === "issue" ? (
               <button
                 type="button"
-                className="p-1  text-brand-secondary hover:bg-brand-surface-2"
+                className="p-1  text-custom-text-200 hover:bg-custom-background-80"
                 onClick={addIssueToState}
               >
                 <PlusIcon className="h-4 w-4" />
@@ -221,7 +221,7 @@ export const SingleList: React.FC<Props> = ({
                     />
                   ))
                 ) : (
-                  <p className="bg-brand-base px-4 py-2.5 text-sm text-brand-secondary">
+                  <p className="bg-custom-background-100 px-4 py-2.5 text-sm text-custom-text-200">
                     No issues.
                   </p>
                 )
diff --git a/apps/app/components/core/modals/bulk-delete-issues-modal.tsx b/apps/app/components/core/modals/bulk-delete-issues-modal.tsx
index a2c6310e9f..8b84a3303a 100644
--- a/apps/app/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/apps/app/components/core/modals/bulk-delete-issues-modal.tsx
@@ -173,7 +173,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
+            <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 rounded-xl border border-custom-border-80 bg-custom-background-100 shadow-2xl transition-all">
               <form>
                 <Combobox
                   onChange={(val: string) => {
@@ -188,12 +188,12 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
                 >
                   <div className="relative m-1">
                     <MagnifyingGlassIcon
-                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
+                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
                     <input
                       type="text"
-                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
                       placeholder="Search..."
                       onChange={(event) => setQuery(event.target.value)}
                     />
@@ -201,16 +201,16 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
 
                   <Combobox.Options
                     static
-                    className="max-h-80 scroll-py-2 divide-y divide-brand-base overflow-y-auto"
+                    className="max-h-80 scroll-py-2 divide-y divide-custom-border-80 overflow-y-auto"
                   >
                     {filteredIssues.length > 0 ? (
                       <li className="p-2">
                         {query === "" && (
-                          <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
+                          <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-custom-text-100">
                             Select issues to delete
                           </h2>
                         )}
-                        <ul className="text-sm text-brand-secondary">
+                        <ul className="text-sm text-custom-text-200">
                           {filteredIssues.map((issue) => (
                             <Combobox.Option
                               key={issue.id}
@@ -218,7 +218,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
                               value={issue.id}
                               className={({ active, selected }) =>
                                 `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
-                                  active ? "bg-brand-surface-2 text-brand-base" : ""
+                                  active ? "bg-custom-background-80 text-custom-text-100" : ""
                                 }`
                               }
                             >
@@ -246,9 +246,9 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
                     ) : (
                       <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
                         <LayerDiagonalIcon height="56" width="56" />
-                        <h3 className="text-brand-secondary">
+                        <h3 className="text-custom-text-200">
                           No issues found. Create a new issue with{" "}
-                          <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
+                          <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>.
                         </h3>
                       </div>
                     )}
diff --git a/apps/app/components/core/modals/existing-issues-list-modal.tsx b/apps/app/components/core/modals/existing-issues-list-modal.tsx
index e9a004a5ed..02445df9c8 100644
--- a/apps/app/components/core/modals/existing-issues-list-modal.tsx
+++ b/apps/app/components/core/modals/existing-issues-list-modal.tsx
@@ -141,7 +141,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
@@ -154,7 +154,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-80 bg-custom-background-100 shadow-2xl transition-all">
                 <Combobox
                   as="div"
                   onChange={(val: ISearchIssueResponse) => {
@@ -165,24 +165,24 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                 >
                   <div className="relative m-1">
                     <MagnifyingGlassIcon
-                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
+                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
                     <Combobox.Input
-                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
                       placeholder="Type to search..."
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
                     />
                   </div>
 
-                  <div className="text-brand-secondary text-[0.825rem] p-2">
+                  <div className="text-custom-text-200 text-[0.825rem] p-2">
                     {selectedIssues.length > 0 ? (
                       <div className="flex items-center gap-2 flex-wrap mt-1">
                         {selectedIssues.map((issue) => (
                           <div
                             key={issue.id}
-                            className="flex items-center gap-1 text-xs border border-brand-base bg-brand-surface-2 pl-2 py-1 rounded-md text-brand-base whitespace-nowrap"
+                            className="flex items-center gap-1 text-xs border border-custom-border-80 bg-custom-background-80 pl-2 py-1 rounded-md text-custom-text-100 whitespace-nowrap"
                           >
                             {issue.project__identifier}-{issue.sequence_id}
                             <button
@@ -194,13 +194,13 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                                 )
                               }
                             >
-                              <XMarkIcon className="h-3 w-3 text-brand-secondary group-hover:text-brand-base" />
+                              <XMarkIcon className="h-3 w-3 text-custom-text-200 group-hover:text-custom-text-100" />
                             </button>
                           </div>
                         ))}
                       </div>
                     ) : (
-                      <div className="w-min text-xs border border-brand-base bg-brand-surface-2 p-2 rounded-md whitespace-nowrap">
+                      <div className="w-min text-xs border border-custom-border-80 bg-custom-background-80 p-2 rounded-md whitespace-nowrap">
                         No issues selected
                       </div>
                     )}
@@ -208,9 +208,9 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
 
                   <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto mt-2">
                     {debouncedSearchTerm !== "" && (
-                      <h5 className="text-[0.825rem] text-brand-secondary mx-2">
+                      <h5 className="text-[0.825rem] text-custom-text-200 mx-2">
                         Search results for{" "}
-                        <span className="text-brand-base">
+                        <span className="text-custom-text-100">
                           {'"'}
                           {debouncedSearchTerm}
                           {'"'}
@@ -225,9 +225,9 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                       debouncedSearchTerm !== "" && (
                         <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
                           <LayerDiagonalIcon height="52" width="52" />
-                          <h3 className="text-brand-secondary">
+                          <h3 className="text-custom-text-200">
                             No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-brand-surface-2 px-2 py-1 text-sm">
+                            <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">
                               C
                             </pre>
                             .
@@ -243,7 +243,9 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                         <Loader.Item height="40px" />
                       </Loader>
                     ) : (
-                      <ul className={`text-sm text-brand-base ${issues.length > 0 ? "p-2" : ""}`}>
+                      <ul
+                        className={`text-sm text-custom-text-100 ${issues.length > 0 ? "p-2" : ""}`}
+                      >
                         {issues.map((issue) => {
                           const selected = selectedIssues.some((i) => i.id === issue.id);
 
@@ -254,9 +256,9 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                               htmlFor={`issue-${issue.id}`}
                               value={issue}
                               className={({ active }) =>
-                                `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
-                                  active ? "bg-brand-surface-2 text-brand-base" : ""
-                                } ${selected ? "text-brand-base" : ""}`
+                                `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
+                                  active ? "bg-custom-background-80 text-custom-text-100" : ""
+                                } ${selected ? "text-custom-text-100" : ""}`
                               }
                             >
                               <input type="checkbox" checked={selected} readOnly />
diff --git a/apps/app/components/core/modals/gpt-assistant-modal.tsx b/apps/app/components/core/modals/gpt-assistant-modal.tsx
index a62b3e413c..a46b835ce4 100644
--- a/apps/app/components/core/modals/gpt-assistant-modal.tsx
+++ b/apps/app/components/core/modals/gpt-assistant-modal.tsx
@@ -143,7 +143,7 @@ export const GptAssistantModal: React.FC<Props> = ({
 
   return (
     <div
-      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-brand-base bg-brand-base p-4 shadow ${
+      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-80 bg-custom-background-100 p-4 shadow ${
         isOpen ? "block" : "hidden"
       }`}
     >
diff --git a/apps/app/components/core/modals/image-upload-modal.tsx b/apps/app/components/core/modals/image-upload-modal.tsx
index 4168c5e0a7..078e3ff661 100644
--- a/apps/app/components/core/modals/image-upload-modal.tsx
+++ b/apps/app/components/core/modals/image-upload-modal.tsx
@@ -104,7 +104,7 @@ export const ImageUploadModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-30 overflow-y-auto">
@@ -118,18 +118,21 @@ export const ImageUploadModal: React.FC<Props> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-80 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                  <Dialog.Title
+                    as="h3"
+                    className="text-lg font-medium leading-6 text-custom-text-100"
+                  >
                     Upload Image
                   </Dialog.Title>
                   <div className="space-y-3">
                     <div className="flex items-center gap-3">
                       <div
                         {...getRootProps()}
-                        className={`relative grid h-80 w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-brand-accent focus:ring-offset-2 ${
+                        className={`relative grid h-80 w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
                           (image === null && isDragActive) || !value
-                            ? "border-2 border-dashed border-brand-base hover:bg-brand-surface-1"
+                            ? "border-2 border-dashed border-custom-border-80 hover:bg-custom-background-90"
                             : ""
                         }`}
                       >
@@ -137,7 +140,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-brand-surface-1 px-2 py-0.5 text-xs font-medium text-brand-secondary"
+                              className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
                             >
                               Edit
                             </button>
@@ -151,8 +154,8 @@ export const ImageUploadModal: React.FC<Props> = ({
                           </>
                         ) : (
                           <div>
-                            <UserCircleIcon className="mx-auto h-16 w-16 text-brand-secondary" />
-                            <span className="mt-2 block text-sm font-medium text-brand-secondary">
+                            <UserCircleIcon className="mx-auto h-16 w-16 text-custom-text-200" />
+                            <span className="mt-2 block text-sm font-medium text-custom-text-200">
                               {isDragActive
                                 ? "Drop image here to upload"
                                 : "Drag & drop image here"}
diff --git a/apps/app/components/core/modals/link-modal.tsx b/apps/app/components/core/modals/link-modal.tsx
index 3c22c2b1ba..543e733d67 100644
--- a/apps/app/components/core/modals/link-modal.tsx
+++ b/apps/app/components/core/modals/link-modal.tsx
@@ -70,11 +70,14 @@ 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-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">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
                     <div className="space-y-5">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
+                      >
                         Add Link
                       </Dialog.Title>
                       <div className="mt-2 space-y-3">
diff --git a/apps/app/components/core/sidebar/links-list.tsx b/apps/app/components/core/sidebar/links-list.tsx
index 590ebc758d..7094b9b866 100644
--- a/apps/app/components/core/sidebar/links-list.tsx
+++ b/apps/app/components/core/sidebar/links-list.tsx
@@ -32,15 +32,15 @@ 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-brand-surface-1 p-1 outline-none hover:bg-brand-surface-2"
+                  className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 outline-none hover:bg-custom-background-80"
                   target="_blank"
                 >
-                  <ArrowTopRightOnSquareIcon className="h-4 w-4 text-brand-secondary" />
+                  <ArrowTopRightOnSquareIcon className="h-4 w-4 text-custom-text-200" />
                 </a>
               </Link>
               <button
                 type="button"
-                className="grid h-7 w-7 place-items-center rounded bg-brand-surface-1 p-1 text-red-500 outline-none duration-300 hover:bg-red-500/20"
+                className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 text-red-500 outline-none duration-300 hover:bg-red-500/20"
                 onClick={() => handleDeleteLink(link.id)}
               >
                 <TrashIcon className="h-4 w-4" />
@@ -48,13 +48,16 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
             </div>
           )}
           <Link href={link.url}>
-            <a className="relative flex gap-2 rounded-md bg-brand-base p-2" target="_blank">
+            <a
+              className="relative flex gap-2 rounded-md bg-custom-background-100 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-words">{link.title}</h5>
-                <p className="mt-0.5 text-brand-secondary">
+                <p className="mt-0.5 text-custom-text-200">
                   Added {timeAgo(link.created_at)}
                   <br />
                   by{" "}
diff --git a/apps/app/components/core/sidebar/progress-chart.tsx b/apps/app/components/core/sidebar/progress-chart.tsx
index 5fa25e863d..a51b42f3cb 100644
--- a/apps/app/components/core/sidebar/progress-chart.tsx
+++ b/apps/app/components/core/sidebar/progress-chart.tsx
@@ -119,9 +119,9 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
         gridXValues={chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : ""))}
         enableSlices="x"
         sliceTooltip={(datum) => (
-          <div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
+          <div className="rounded-md border border-custom-border-80 bg-custom-background-80 p-2 text-xs">
             {datum.slice.points[0].data.yFormatted}
-            <span className="text-brand-secondary"> issues pending on </span>
+            <span className="text-custom-text-200"> issues pending on </span>
             {datum.slice.points[0].data.xFormatted}
           </div>
         )}
diff --git a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx
index b90f4e3ee2..67c53db042 100644
--- a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx
+++ b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx
@@ -80,16 +80,16 @@ export const SidebarProgressStats: React.FC<Props> = ({
       <Tab.List
         as="div"
         className={`flex w-full items-center gap-2 justify-between rounded-md ${
-          noBackground ? "" : "bg-brand-surface-1"
+          noBackground ? "" : "bg-custom-background-90"
         } px-1 py-1.5 
         ${module ? "text-xs" : "text-sm"} `}
       >
         <Tab
           className={({ selected }) =>
             `w-full  ${
-              roundedTab ? "rounded-3xl border border-brand-base" : "rounded"
-            } px-3 py-1 text-brand-base ${
-              selected ? " bg-brand-accent text-white" : "  hover:bg-brand-surface-2"
+              roundedTab ? "rounded-3xl border border-custom-border-80" : "rounded"
+            } px-3 py-1 text-custom-text-100 ${
+              selected ? " bg-custom-primary text-white" : "  hover:bg-custom-background-80"
             }`
           }
         >
@@ -98,9 +98,9 @@ export const SidebarProgressStats: React.FC<Props> = ({
         <Tab
           className={({ selected }) =>
             `w-full ${
-              roundedTab ? "rounded-3xl border border-brand-base" : "rounded"
-            } px-3 py-1 text-brand-base ${
-              selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
+              roundedTab ? "rounded-3xl border border-custom-border-80" : "rounded"
+            } px-3 py-1 text-custom-text-100 ${
+              selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
             }`
           }
         >
@@ -109,16 +109,16 @@ export const SidebarProgressStats: React.FC<Props> = ({
         <Tab
           className={({ selected }) =>
             `w-full ${
-              roundedTab ? "rounded-3xl border border-brand-base" : "rounded"
-            } px-3 py-1  text-brand-base ${
-              selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
+              roundedTab ? "rounded-3xl border border-custom-border-80" : "rounded"
+            } px-3 py-1  text-custom-text-100 ${
+              selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
             }`
           }
         >
           States
         </Tab>
       </Tab.List>
-      <Tab.Panels className="flex w-full items-center justify-between pt-1 text-brand-secondary">
+      <Tab.Panels className="flex w-full items-center justify-between pt-1 text-custom-text-200">
         <Tab.Panel as="div" className="w-full space-y-1">
           {distribution.assignees.map((assignee, index) => {
             if (assignee.assignee_id)
@@ -159,7 +159,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
                   key={`unassigned-${index}`}
                   title={
                     <div className="flex items-center gap-2">
-                      <div className="h-5 w-5 rounded-full border-2 border-brand-base bg-brand-surface-2">
+                      <div className="h-5 w-5 rounded-full border-2 border-custom-border-80 bg-custom-background-80">
                         <img
                           src="/user.png"
                           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 7c7f654469..1498c9badb 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 gap-4 justify-between rounded-sm p-1 text-xs ${
-      onClick ? "cursor-pointer hover:bg-brand-surface-1" : ""
-    } ${selected ? "bg-brand-surface-1" : ""}`}
+      onClick ? "cursor-pointer hover:bg-custom-background-90" : ""
+    } ${selected ? "bg-custom-background-90" : ""}`}
     onClick={onClick}
   >
     <div className="w-1/2">{title}</div>
diff --git a/apps/app/components/core/spreadsheet-view/single-issue.tsx b/apps/app/components/core/spreadsheet-view/single-issue.tsx
index ada1e3689a..cb51013f1b 100644
--- a/apps/app/components/core/spreadsheet-view/single-issue.tsx
+++ b/apps/app/components/core/spreadsheet-view/single-issue.tsx
@@ -178,12 +178,12 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 
   return (
     <div
-      className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-brand-surface-2 border-b border-brand-base w-full min-w-max"
+      className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-80 w-full min-w-max"
       style={{ gridTemplateColumns }}
     >
-      <div className="flex gap-1.5 items-center px-4 sticky z-[1] left-0 text-brand-secondary bg-brand-base group-hover:text-brand-base group-hover:bg-brand-surface-2 border-brand-base w-full">
+      <div className="flex gap-1.5 items-center px-4 sticky z-[1] left-0 text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-80 w-full">
         <div className="flex gap-1.5 items-center" style={issue.parent ? { paddingLeft } : {}}>
-          <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-brand-base w-14">
+          <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100 w-14">
             {properties.key && (
               <span className="flex items-center justify-center opacity-100 group-hover:opacity-0">
                 {issue.project_detail?.identifier}-{issue.sequence_id}
@@ -197,11 +197,11 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
                   onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
                   content={
                     <div
-                      className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-brand-base bg-brand-surface-1`}
+                      className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-80 bg-custom-background-90`}
                     >
                       <button
                         type="button"
-                        className="hover:text-brand-muted-1 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2"
+                        className="hover:text-brand-muted-1 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
                         onClick={() => {
                           handleEditIssue(issue);
                           setIsOpen(false);
@@ -215,7 +215,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 
                       <button
                         type="button"
-                        className="hover:text-brand-muted-1 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2"
+                        className="hover:text-brand-muted-1 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
                         onClick={() => {
                           handleDeleteIssue(issue);
                           setIsOpen(false);
@@ -229,7 +229,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 
                       <button
                         type="button"
-                        className="hover:text-brand-muted-1 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2"
+                        className="hover:text-brand-muted-1 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
                         onClick={() => {
                           handleCopyText();
                           setIsOpen(false);
@@ -244,7 +244,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
                   }
                   placement="bottom-start"
                 >
-                  <EllipsisHorizontalIcon className="h-5 w-5 text-brand-secondary" />
+                  <EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
                 </Popover2>
               </div>
             )}
@@ -253,7 +253,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           {issue.sub_issues_count > 0 && (
             <div className="h-6 w-6 flex justify-center items-center">
               <button
-                className="h-5 w-5 hover:bg-brand-surface-1 hover:text-brand-base rounded-sm cursor-pointer"
+                className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
                 onClick={() => handleToggleExpand(issue.id)}
               >
                 <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
@@ -263,13 +263,13 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
 
         <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
-          <a className="truncate text-brand-base cursor-pointer w-full text-[0.825rem]">
+          <a className="truncate text-custom-text-100 cursor-pointer w-full text-[0.825rem]">
             {issue.name}
           </a>
         </Link>
       </div>
       {properties.state && (
-        <div className="flex items-center text-xs text-brand-secondary text-center p-2 group-hover:bg-brand-surface-2 border-brand-base">
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-80">
           <ViewStateSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -282,7 +282,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
       )}
       {properties.priority && (
-        <div className="flex items-center text-xs text-brand-secondary text-center p-2 group-hover:bg-brand-surface-2 border-brand-base">
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-80">
           <ViewPrioritySelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -295,7 +295,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
       )}
       {properties.assignee && (
-        <div className="flex items-center text-xs text-brand-secondary text-center p-2 group-hover:bg-brand-surface-2 border-brand-base">
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-80">
           <ViewAssigneeSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -308,7 +308,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
       )}
       {properties.labels && (
-        <div className="flex items-center text-xs text-brand-secondary text-center p-2 group-hover:bg-brand-surface-2 border-brand-base">
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-80">
           <ViewLabelSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -322,7 +322,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
       )}
 
       {properties.due_date && (
-        <div className="flex items-center text-xs text-brand-secondary text-center p-2 group-hover:bg-brand-surface-2 border-brand-base">
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-80">
           <ViewDueDateSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -334,7 +334,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
       )}
       {properties.estimate && (
-        <div className="flex items-center text-xs text-brand-secondary text-center p-2 group-hover:bg-brand-surface-2 border-brand-base">
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-80">
           <ViewEstimateSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
diff --git a/apps/app/components/core/spreadsheet-view/spreadsheet-columns.tsx b/apps/app/components/core/spreadsheet-view/spreadsheet-columns.tsx
index a0f404fbae..06c0c1b4db 100644
--- a/apps/app/components/core/spreadsheet-view/spreadsheet-columns.tsx
+++ b/apps/app/components/core/spreadsheet-view/spreadsheet-columns.tsx
@@ -39,13 +39,15 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
         if (col.isActive) {
           return (
             <div
-              className={`bg-brand-surface-1 w-full ${
-                col.propertyName === "title" ? "sticky left-0 z-20 bg-brand-surface-1 pl-24" : ""
+              className={`bg-custom-background-90 w-full ${
+                col.propertyName === "title"
+                  ? "sticky left-0 z-20 bg-custom-background-90 pl-24"
+                  : ""
               }`}
             >
               {col.propertyName === "title" ? (
                 <div
-                  className={`flex items-center justify-start gap-1.5 cursor-default text-sm text-brand-secondary text-current w-full py-2.5 px-2`}
+                  className={`flex items-center justify-start gap-1.5 cursor-default text-sm text-custom-text-200 text-current w-full py-2.5 px-2`}
                 >
                   {col.colName}
                 </div>
@@ -54,22 +56,22 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                   className="!w-full"
                   customButton={
                     <div
-                      className={`relative group flex items-center justify-start gap-1.5 cursor-pointer text-sm text-brand-secondary text-current hover:text-brand-base w-full py-3 px-2 ${
-                        activeSortingProperty === col.propertyName ? "bg-brand-surface-2" : ""
+                      className={`relative group flex items-center justify-start gap-1.5 cursor-pointer text-sm text-custom-text-200 text-current hover:text-custom-text-100 w-full py-3 px-2 ${
+                        activeSortingProperty === col.propertyName ? "bg-custom-background-80" : ""
                       }`}
                     >
                       {activeSortingProperty === col.propertyName && (
                         <div className="absolute top-1 right-1.5">
                           <Icon
                             iconName="filter_list"
-                            className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-brand-accent text-xs text-white"
+                            className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-custom-primary text-xs text-white"
                           />
                         </div>
                       )}
 
                       {col.icon ? (
                         <col.icon
-                          className={`text-brand-secondary group-hover:text-brand-base ${
+                          className={`text-custom-text-200 group-hover:text-custom-text-100 ${
                             col.propertyName === "estimate" ? "-rotate-90" : ""
                           }`}
                           aria-hidden="true"
@@ -77,7 +79,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                           width="14"
                         />
                       ) : col.propertyName === "priority" ? (
-                        <span className="text-sm material-symbols-rounded text-brand-secondary">
+                        <span className="text-sm material-symbols-rounded text-custom-text-200">
                           signal_cellular_alt
                         </span>
                       ) : (
@@ -94,7 +96,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                   <CustomMenu.MenuItem
                     className={`${
                       selectedMenuItem === `${col.ascendingOrder}_${col.propertyName}`
-                        ? "bg-brand-surface-2"
+                        ? "bg-custom-background-80"
                         : ""
                     }`}
                     key={col.propertyName}
@@ -105,8 +107,8 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                     <div
                       className={`group flex gap-1.5 px-1 items-center justify-between ${
                         selectedMenuItem === `${col.ascendingOrder}_${col.propertyName}`
-                          ? "text-brand-base"
-                          : "text-brand-secondary hover:text-brand-base"
+                          ? "text-custom-text-100"
+                          : "text-custom-text-200 hover:text-custom-text-100"
                       }`}
                     >
                       <div className="flex gap-2 items-center">
@@ -164,7 +166,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                   <CustomMenu.MenuItem
                     className={`mt-0.5 ${
                       selectedMenuItem === `${col.descendingOrder}_${col.propertyName}`
-                        ? "bg-brand-surface-2"
+                        ? "bg-custom-background-80"
                         : ""
                     }`}
                     key={col.property}
@@ -175,8 +177,8 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                     <div
                       className={`group flex gap-1.5 px-1 items-center justify-between ${
                         selectedMenuItem === `${col.descendingOrder}_${col.propertyName}`
-                          ? "text-brand-base"
-                          : "text-brand-secondary hover:text-brand-base"
+                          ? "text-custom-text-100"
+                          : "text-custom-text-200 hover:text-custom-text-100"
                       }`}
                     >
                       <div className="flex gap-2 items-center">
@@ -247,7 +249,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                       <CustomMenu.MenuItem
                         className={`mt-0.5${
                           selectedMenuItem === `-created_at_${col.propertyName}`
-                            ? "bg-brand-surface-2"
+                            ? "bg-custom-background-80"
                             : ""
                         }`}
                         key={col.property}
diff --git a/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx b/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
index 5b8ee00776..18c541aa22 100644
--- a/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
+++ b/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
@@ -61,12 +61,12 @@ export const SpreadsheetView: React.FC<Props> = ({
     .join(" ");
 
   return (
-    <div className="h-full rounded-lg text-brand-secondary overflow-x-auto whitespace-nowrap bg-brand-base">
-      <div className="sticky z-[2] top-0 border-b border-brand-base bg-brand-surface-1 w-full min-w-max">
+    <div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
+      <div className="sticky z-[2] top-0 border-b border-custom-border-80 bg-custom-background-90 w-full min-w-max">
         <SpreadsheetColumns columnData={columnData} gridTemplateColumns={gridTemplateColumns} />
       </div>
       {spreadsheetIssues ? (
-        <div className="flex flex-col h-full w-full bg-brand-base rounded-sm ">
+        <div className="flex flex-col h-full w-full bg-custom-background-100 rounded-sm ">
           {spreadsheetIssues.map((issue: IIssue, index) => (
             <SpreadsheetIssues
               key={`${issue.id}_${index}`}
@@ -84,12 +84,12 @@ export const SpreadsheetView: React.FC<Props> = ({
             />
           ))}
           <div
-            className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-brand-surface-2 border-b border-brand-base w-full min-w-max"
+            className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-80 w-full min-w-max"
             style={{ gridTemplateColumns }}
           >
             {type === "issue" ? (
               <button
-                className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-brand-secondary bg-brand-base group-hover:text-brand-base group-hover:bg-brand-surface-2 border-brand-base w-full"
+                className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-80 w-full"
                 onClick={() => {
                   const e = new KeyboardEvent("keydown", { key: "c" });
                   document.dispatchEvent(e);
@@ -104,7 +104,7 @@ export const SpreadsheetView: React.FC<Props> = ({
                   className="sticky left-0 z-[1]"
                   customButton={
                     <button
-                      className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-brand-secondary bg-brand-base group-hover:text-brand-base group-hover:bg-brand-surface-2 border-brand-base w-full"
+                      className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-80 w-full"
                       type="button"
                     >
                       <PlusIcon className="h-4 w-4" />
diff --git a/apps/app/components/core/theme/color-picker-input.tsx b/apps/app/components/core/theme/color-picker-input.tsx
index 8582023a2a..498d0bd5eb 100644
--- a/apps/app/components/core/theme/color-picker-input.tsx
+++ b/apps/app/components/core/theme/color-picker-input.tsx
@@ -76,12 +76,12 @@ export const ColorPickerInput: React.FC<Props> = ({ name, watch, setValue, error
               <Popover.Button
                 type="button"
                 className={`group inline-flex items-center outline-none ${
-                  open ? "text-brand-base" : "text-brand-secondary"
+                  open ? "text-custom-text-100" : "text-custom-text-200"
                 }`}
               >
                 {watch(name) && watch(name) !== "" ? (
                   <span
-                    className="h-4 w-4 rounded border border-brand-base"
+                    className="h-4 w-4 rounded border border-custom-border-80"
                     style={{
                       backgroundColor: `${watch(name)}`,
                     }}
@@ -90,7 +90,7 @@ export const ColorPickerInput: React.FC<Props> = ({ name, watch, setValue, error
                   <ColorPickerIcon
                     height={14}
                     width={14}
-                    className="fill-current text-brand-base"
+                    className="fill-current text-custom-text-100"
                   />
                 )}
               </Popover.Button>
diff --git a/apps/app/components/core/theme/custom-theme-selector.tsx b/apps/app/components/core/theme/custom-theme-selector.tsx
index 2af368f015..4ee904b116 100644
--- a/apps/app/components/core/theme/custom-theme-selector.tsx
+++ b/apps/app/components/core/theme/custom-theme-selector.tsx
@@ -89,11 +89,11 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
   return (
     <form onSubmit={handleSubmit(handleUpdateTheme)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-semibold text-brand-base">Customize your theme</h3>
+        <h3 className="text-lg font-semibold text-custom-text-100">Customize your theme</h3>
         <div className="space-y-4">
           <div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2 md:grid-cols-3">
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-brand-secondary">
+              <h3 className="text-left text-sm font-medium text-custom-text-200">
                 Background color
               </h3>
               <ColorPickerInput
@@ -106,7 +106,7 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-brand-secondary">Text color</h3>
+              <h3 className="text-left text-sm font-medium text-custom-text-200">Text color</h3>
               <ColorPickerInput
                 name="text"
                 error={errors.text}
@@ -117,7 +117,7 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-brand-secondary">
+              <h3 className="text-left text-sm font-medium text-custom-text-200">
                 Primary(Theme) color
               </h3>
               <ColorPickerInput
@@ -130,7 +130,7 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-brand-secondary">
+              <h3 className="text-left text-sm font-medium text-custom-text-200">
                 Sidebar background color
               </h3>
               <ColorPickerInput
@@ -143,7 +143,7 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-brand-secondary">
+              <h3 className="text-left text-sm font-medium text-custom-text-200">
                 Sidebar text color
               </h3>
               <ColorPickerInput
diff --git a/apps/app/components/cycles/active-cycle-details.tsx b/apps/app/components/cycles/active-cycle-details.tsx
index e7a1990e94..354468fb03 100644
--- a/apps/app/components/cycles/active-cycle-details.tsx
+++ b/apps/app/components/cycles/active-cycle-details.tsx
@@ -110,8 +110,8 @@ export const ActiveCycleDetails: React.FC = () => {
 
   if (!cycle)
     return (
-      <div className="flex w-full items-center justify-start rounded-[10px] bg-brand-surface-2 px-6 py-4">
-        <h3 className="text-base font-medium text-brand-base ">No active cycle is present.</h3>
+      <div className="flex w-full items-center justify-start rounded-[10px] bg-custom-background-80 px-6 py-4">
+        <h3 className="text-base font-medium text-custom-text-100 ">No active cycle is present.</h3>
       </div>
     );
 
@@ -209,8 +209,8 @@ export const ActiveCycleDetails: React.FC = () => {
   }));
 
   return (
-    <div className="grid-row-2 grid rounded-[10px] shadow divide-y bg-brand-base border border-brand-base">
-      <div className="grid grid-cols-1 divide-y border-brand-base lg:divide-y-0 lg:divide-x lg:grid-cols-3">
+    <div className="grid-row-2 grid rounded-[10px] shadow divide-y bg-custom-background-100 border border-custom-border-80">
+      <div className="grid grid-cols-1 divide-y border-custom-border-80 lg:divide-y-0 lg:divide-x lg:grid-cols-3">
         <div className="flex flex-col text-xs">
           <div className="h-full w-full">
             <div className="flex h-60 flex-col gap-5 justify-between rounded-b-[10px] p-4">
@@ -306,12 +306,12 @@ export const ActiveCycleDetails: React.FC = () => {
                 </span>
               </div>
 
-              <div className="flex items-center justify-start gap-5 text-brand-secondary">
+              <div className="flex items-center justify-start gap-5 text-custom-text-200">
                 <div className="flex items-start gap-1">
                   <CalendarDaysIcon className="h-4 w-4" />
                   <span>{renderShortDateWithYearFormat(startDate)}</span>
                 </div>
-                <ArrowRightIcon className="h-4 w-4 text-brand-secondary" />
+                <ArrowRightIcon className="h-4 w-4 text-custom-text-200" />
                 <div className="flex items-start gap-1">
                   <TargetIcon className="h-4 w-4" />
                   <span>{renderShortDateWithYearFormat(endDate)}</span>
@@ -319,7 +319,7 @@ export const ActiveCycleDetails: React.FC = () => {
               </div>
 
               <div className="flex items-center gap-4">
-                <div className="flex items-center gap-2.5 text-brand-secondary">
+                <div className="flex items-center gap-2.5 text-custom-text-200">
                   {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
                     <img
                       src={cycle.owned_by.avatar}
@@ -329,21 +329,21 @@ export const ActiveCycleDetails: React.FC = () => {
                       alt={cycle.owned_by.first_name}
                     />
                   ) : (
-                    <span className="bg-brand-secondary flex h-5 w-5 items-center justify-center rounded-full bg-brand-base  capitalize">
+                    <span className="bg-brand-secondary flex h-5 w-5 items-center justify-center rounded-full bg-custom-background-100  capitalize">
                       {cycle.owned_by.first_name.charAt(0)}
                     </span>
                   )}
-                  <span className="text-brand-secondary">{cycle.owned_by.first_name}</span>
+                  <span className="text-custom-text-200">{cycle.owned_by.first_name}</span>
                 </div>
 
                 {cycle.assignees.length > 0 && (
-                  <div className="flex items-center gap-1 text-brand-secondary">
+                  <div className="flex items-center gap-1 text-custom-text-200">
                     <AssigneesList users={cycle.assignees} length={4} />
                   </div>
                 )}
               </div>
 
-              <div className="flex items-center gap-4 text-brand-secondary">
+              <div className="flex items-center gap-4 text-custom-text-200">
                 <div className="flex gap-2">
                   <LayerDiagonalIcon className="h-4 w-4 flex-shrink-0" />
                   {cycle.total_issues} issues
@@ -355,16 +355,16 @@ export const ActiveCycleDetails: React.FC = () => {
               </div>
 
               <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
-                <a className="bg-brand-accent text-white px-4 rounded-md py-2 text-center text-sm font-medium w-full hover:bg-brand-accent/90">
+                <a className="bg-custom-primary text-white px-4 rounded-md py-2 text-center text-sm font-medium w-full hover:bg-custom-primary/90">
                   View Cycle
                 </a>
               </Link>
             </div>
           </div>
         </div>
-        <div className="grid col-span-2 grid-cols-1 divide-y border-brand-base md:divide-y-0 md:divide-x md:grid-cols-2">
-          <div className="flex h-60 flex-col border-brand-base">
-            <div className="flex h-full w-full flex-col text-brand-secondary p-4">
+        <div className="grid col-span-2 grid-cols-1 divide-y border-custom-border-80 md:divide-y-0 md:divide-x md:grid-cols-2">
+          <div className="flex h-60 flex-col border-custom-border-80">
+            <div className="flex h-full w-full flex-col text-custom-text-200 p-4">
               <div className="flex w-full items-center gap-2 py-1">
                 <span>Progress</span>
                 <LinearProgressIndicator data={progressIndicatorData} />
@@ -391,12 +391,12 @@ export const ActiveCycleDetails: React.FC = () => {
               </div>
             </div>
           </div>
-          <div className="border-brand-base h-60 overflow-y-scroll">
+          <div className="border-custom-border-80 h-60 overflow-y-scroll">
             <ActiveCycleProgressStats cycle={cycle} />
           </div>
         </div>
       </div>
-      <div className="grid grid-cols-1 divide-y border-brand-base lg:divide-y-0 lg:divide-x lg:grid-cols-2">
+      <div className="grid grid-cols-1 divide-y border-custom-border-80 lg:divide-y-0 lg:divide-x lg:grid-cols-2">
         <div className="flex flex-col justify-between p-4">
           <div>
             <div className="text-brand-primary">High Priority Issues</div>
@@ -406,7 +406,7 @@ export const ActiveCycleDetails: React.FC = () => {
                   issues.map((issue) => (
                     <div
                       key={issue.id}
-                      className="flex flex-wrap rounded-md items-center justify-between gap-2 border border-brand-base bg-brand-surface-1 px-3 py-1.5"
+                      className="flex flex-wrap rounded-md items-center justify-between gap-2 border border-custom-border-80 bg-custom-background-90 px-3 py-1.5"
                     >
                       <div className="flex flex-col gap-1">
                         <div>
@@ -414,7 +414,7 @@ export const ActiveCycleDetails: React.FC = () => {
                             tooltipHeading="Issue ID"
                             tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
                           >
-                            <span className="flex-shrink-0 text-xs text-brand-secondary">
+                            <span className="flex-shrink-0 text-xs text-custom-text-200">
                               {issue.project_detail?.identifier}-{issue.sequence_id}
                             </span>
                           </Tooltip>
@@ -424,7 +424,7 @@ export const ActiveCycleDetails: React.FC = () => {
                           tooltipHeading="Title"
                           tooltipContent={issue.name}
                         >
-                          <span className="text-[0.825rem] text-brand-base">
+                          <span className="text-[0.825rem] text-custom-text-100">
                             {truncateText(issue.name, 30)}
                           </span>
                         </Tooltip>
@@ -444,7 +444,7 @@ export const ActiveCycleDetails: React.FC = () => {
                             {issue.label_details.map((label) => (
                               <span
                                 key={label.id}
-                                className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary"
+                                className="group flex items-center gap-1 rounded-2xl border border-custom-border-80 px-2 py-0.5 text-xs text-custom-text-200"
                               >
                                 <span
                                   className="h-1.5 w-1.5  rounded-full"
@@ -460,7 +460,7 @@ export const ActiveCycleDetails: React.FC = () => {
                         ) : (
                           ""
                         )}
-                        <div className={`flex items-center gap-2 text-brand-secondary`}>
+                        <div className={`flex items-center gap-2 text-custom-text-200`}>
                           {issue.assignees &&
                           issue.assignees.length > 0 &&
                           Array.isArray(issue.assignees) ? (
@@ -479,7 +479,7 @@ export const ActiveCycleDetails: React.FC = () => {
                     </div>
                   ))
                 ) : (
-                  <div className="grid place-items-center text-brand-secondary text-sm text-center">
+                  <div className="grid place-items-center text-custom-text-200 text-sm text-center">
                     No issues present in the cycle.
                   </div>
                 )
@@ -495,7 +495,7 @@ export const ActiveCycleDetails: React.FC = () => {
 
           {issues && issues.length > 0 && (
             <div className="flex items-center justify-between gap-2">
-              <div className="h-1 w-full rounded-full bg-brand-surface-2">
+              <div className="h-1 w-full rounded-full bg-custom-background-80">
                 <div
                   className="h-1 rounded-full bg-green-600"
                   style={{
@@ -510,16 +510,16 @@ export const ActiveCycleDetails: React.FC = () => {
                   }}
                 />
               </div>
-              <div className="w-16 text-end text-xs text-brand-secondary">
+              <div className="w-16 text-end text-xs text-custom-text-200">
                 {issues?.filter((issue) => issue?.state_detail?.group === "completed")?.length} of{" "}
                 {issues?.length}
               </div>
             </div>
           )}
         </div>
-        <div className="flex flex-col justify-between border-brand-base p-4">
+        <div className="flex flex-col justify-between border-custom-border-80 p-4">
           <div className="flex items-start justify-between gap-4 py-1.5 text-xs">
-            <div className="flex items-center gap-3 text-brand-base">
+            <div className="flex items-center gap-3 text-custom-text-100">
               <div className="flex items-center justify-center gap-1">
                 <span className="h-2.5 w-2.5 rounded-full bg-[#a9bbd0]" />
                 <span>Ideal</span>
@@ -531,7 +531,7 @@ export const ActiveCycleDetails: React.FC = () => {
             </div>
             <div className="flex items-center gap-1">
               <span>
-                <LayerDiagonalIcon className="h-5 w-5 flex-shrink-0 text-brand-secondary" />
+                <LayerDiagonalIcon className="h-5 w-5 flex-shrink-0 text-custom-text-200" />
               </span>
               <span>
                 Pending Issues -{" "}
diff --git a/apps/app/components/cycles/active-cycle-stats.tsx b/apps/app/components/cycles/active-cycle-stats.tsx
index 30b69ffafb..3abb9cd6d1 100644
--- a/apps/app/components/cycles/active-cycle-stats.tsx
+++ b/apps/app/components/cycles/active-cycle-stats.tsx
@@ -48,12 +48,12 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
     >
       <Tab.List
         as="div"
-        className="flex sticky top-0 z-10 bg-brand-base w-full px-4 pt-4 pb-1 flex-wrap items-center justify-start gap-4 text-sm"
+        className="flex sticky top-0 z-10 bg-custom-background-100 w-full px-4 pt-4 pb-1 flex-wrap items-center justify-start gap-4 text-sm"
       >
         <Tab
           className={({ selected }) =>
-            `px-3 py-1 text-brand-base rounded-3xl border border-brand-base ${
-              selected ? " bg-brand-accent text-white" : "  hover:bg-brand-surface-2"
+            `px-3 py-1 text-custom-text-100 rounded-3xl border border-custom-border-80 ${
+              selected ? " bg-custom-primary text-white" : "  hover:bg-custom-background-80"
             }`
           }
         >
@@ -61,8 +61,8 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
         </Tab>
         <Tab
           className={({ selected }) =>
-            `px-3 py-1 text-brand-base rounded-3xl border border-brand-base ${
-              selected ? " bg-brand-accent text-white" : "  hover:bg-brand-surface-2"
+            `px-3 py-1 text-custom-text-100 rounded-3xl border border-custom-border-80 ${
+              selected ? " bg-custom-primary text-white" : "  hover:bg-custom-background-80"
             }`
           }
         >
@@ -73,7 +73,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
         <Tab.Panels as={Fragment}>
           <Tab.Panel
             as="div"
-            className="w-full gap-1 overflow-y-scroll items-center text-brand-secondary p-4"
+            className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4"
           >
             {cycle.distribution.assignees.map((assignee, index) => {
               if (assignee.assignee_id)
@@ -103,7 +103,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
                     key={`unassigned-${index}`}
                     title={
                       <div className="flex items-center gap-2">
-                        <div className="h-5 w-5 rounded-full border-2 border-brand-base bg-brand-surface-2">
+                        <div className="h-5 w-5 rounded-full border-2 border-custom-border-80 bg-custom-background-80">
                           <img
                             src="/user.png"
                             height="100%"
@@ -123,7 +123,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
           </Tab.Panel>
           <Tab.Panel
             as="div"
-            className="w-full gap-1 overflow-y-scroll items-center text-brand-secondary p-4"
+            className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4"
           >
             {cycle.distribution.labels.map((label, index) => (
               <SingleProgressStats
@@ -146,7 +146,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
           </Tab.Panel>
         </Tab.Panels>
       ) : (
-        <div className="grid place-items-center text-brand-secondary text-sm text-center mt-4">
+        <div className="grid place-items-center text-custom-text-200 text-sm text-center mt-4">
           No issues present in the cycle.
         </div>
       )}
diff --git a/apps/app/components/cycles/cycles-list-gantt-chart.tsx b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
index 056872c33c..ddb9a5b134 100644
--- a/apps/app/components/cycles/cycles-list-gantt-chart.tsx
+++ b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
@@ -24,7 +24,7 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
         className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
         style={{ backgroundColor: "#858e96" }}
       />
-      <div className="text-brand-base text-sm">{data?.name}</div>
+      <div className="text-custom-text-100 text-sm">{data?.name}</div>
     </div>
   );
 
@@ -34,7 +34,7 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
       <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
         <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
         <Tooltip tooltipContent={data?.name} className={`z-[999999]`}>
-          <div className="text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
+          <div className="text-custom-text-100 text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
             {data?.name}
           </div>
         </Tooltip>
diff --git a/apps/app/components/cycles/cycles-view.tsx b/apps/app/components/cycles/cycles-view.tsx
index 261e810186..9d24ec951e 100644
--- a/apps/app/components/cycles/cycles-view.tsx
+++ b/apps/app/components/cycles/cycles-view.tsx
@@ -171,10 +171,10 @@ export const CyclesView: React.FC<Props> = ({ cycles, viewType }) => {
       {cycles ? (
         cycles.length > 0 ? (
           viewType === "list" ? (
-            <div className="divide-y divide-brand-base">
+            <div className="divide-y divide-custom-border-80">
               {cycles.map((cycle) => (
-                <div className="hover:bg-brand-surface-2">
-                  <div className="flex flex-col border-brand-base">
+                <div className="hover:bg-custom-background-80">
+                  <div className="flex flex-col border-custom-border-80">
                     <SingleCycleList
                       key={cycle.id}
                       cycle={cycle}
diff --git a/apps/app/components/cycles/delete-cycle-modal.tsx b/apps/app/components/cycles/delete-cycle-modal.tsx
index d60e3ddce0..bea656423f 100644
--- a/apps/app/components/cycles/delete-cycle-modal.tsx
+++ b/apps/app/components/cycles/delete-cycle-modal.tsx
@@ -110,7 +110,7 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -124,7 +124,7 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-80 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
@@ -136,14 +136,14 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-brand-base"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
                       >
                         Delete Cycle
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-brand-secondary">
+                        <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete cycle-{" "}
-                          <span className="break-words font-medium text-brand-base">
+                          <span className="break-words font-medium text-custom-text-100">
                             {data?.name}
                           </span>
                           ? All of the data related to the cycle will be permanently removed. This
diff --git a/apps/app/components/cycles/form.tsx b/apps/app/components/cycles/form.tsx
index 5c0b2e0801..9494e0e45c 100644
--- a/apps/app/components/cycles/form.tsx
+++ b/apps/app/components/cycles/form.tsx
@@ -51,7 +51,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-brand-base">
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
           {status ? "Update" : "Create"} Cycle
         </h3>
         <div className="space-y-3">
@@ -107,7 +107,7 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
           </div>
         </div>
       </div>
-      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-brand-base px-5 pt-5">
+      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-80 px-5 pt-5">
         <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
         <PrimaryButton type="submit" loading={isSubmitting}>
           {status
diff --git a/apps/app/components/cycles/gantt-chart.tsx b/apps/app/components/cycles/gantt-chart.tsx
index 42ecad448c..f484365e21 100644
--- a/apps/app/components/cycles/gantt-chart.tsx
+++ b/apps/app/components/cycles/gantt-chart.tsx
@@ -28,7 +28,7 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
         className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="text-brand-base text-sm">{data?.name}</div>
+      <div className="text-custom-text-100 text-sm">{data?.name}</div>
     </div>
   );
 
@@ -41,7 +41,7 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
           style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
         />
         <Tooltip tooltipContent={data?.name} className={`z-[999999]`}>
-          <div className="text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
+          <div className="text-custom-text-100 text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
             {data?.name}
           </div>
         </Tooltip>
@@ -51,7 +51,7 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
             className={`z-[999999]`}
           >
             <div className="flex-shrink-0 mx-2 w-[18px] h-[18px] overflow-hidden flex justify-center items-center">
-              <span className="material-symbols-rounded text-brand-secondary text-[18px]">
+              <span className="material-symbols-rounded text-custom-text-200 text-[18px]">
                 info
               </span>
             </div>
diff --git a/apps/app/components/cycles/modal.tsx b/apps/app/components/cycles/modal.tsx
index 3c1c165062..f80d79f102 100644
--- a/apps/app/components/cycles/modal.tsx
+++ b/apps/app/components/cycles/modal.tsx
@@ -234,7 +234,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop 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">
@@ -247,7 +247,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-80 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <CycleForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/cycles/select.tsx b/apps/app/components/cycles/select.tsx
index 2fdda69b57..3c7b6ade1b 100644
--- a/apps/app/components/cycles/select.tsx
+++ b/apps/app/components/cycles/select.tsx
@@ -66,9 +66,9 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
         {({ open }) => (
           <>
             <Listbox.Button
-              className={`flex cursor-pointer items-center gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 hover:bg-brand-surface-1 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
+              className={`flex cursor-pointer items-center gap-1 rounded-md border border-custom-border-80 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-custom-background-90 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
             >
-              <CyclesIcon className="h-3 w-3 text-brand-secondary" />
+              <CyclesIcon className="h-3 w-3 text-custom-text-200" />
               <div className="flex items-center gap-2 truncate">
                 {cycles?.find((c) => c.id === value)?.name ?? "Cycles"}
               </div>
@@ -82,7 +82,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-brand-surface-2 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-custom-background-80 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 ? (
@@ -100,7 +100,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
                                 : ""
                             } ${
                               active ? "bg-indigo-50" : ""
-                            } relative cursor-pointer select-none p-2 text-brand-base`
+                            } relative cursor-pointer select-none p-2 text-custom-text-100`
                           }
                           value={option.value}
                         >
@@ -110,14 +110,14 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
                         </Listbox.Option>
                       ))
                     ) : (
-                      <p className="text-center text-sm text-brand-secondary">No options</p>
+                      <p className="text-center text-sm text-custom-text-200">No options</p>
                     )
                   ) : (
-                    <p className="text-center text-sm text-brand-secondary">Loading...</p>
+                    <p className="text-center text-sm text-custom-text-200">Loading...</p>
                   )}
                   <button
                     type="button"
-                    className="relative w-full flex select-none items-center gap-x-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-brand-base"
+                    className="relative w-full flex select-none items-center gap-x-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-custom-text-100"
                     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 2080d7f6b6..04981a8edf 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -292,14 +292,14 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
       <div
         className={`fixed top-[66px] ${
           isOpen ? "right-0" : "-right-[24rem]"
-        } h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar pt-5 pb-10 duration-300`}
+        } h-full w-[24rem] overflow-y-auto border-l border-custom-border-80 bg-custom-sidebar-background-100 pt-5 pb-10 duration-300`}
       >
         {cycle ? (
           <>
             <div className="flex flex-col items-start justify-center">
               <div className="flex gap-2.5 px-5 text-sm">
                 <div className="flex items-center">
-                  <span className="flex items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-center text-xs capitalize">
+                  <span className="flex items-center rounded border-[0.5px] border-custom-border-80 bg-custom-background-90 px-2 py-1 text-center text-xs capitalize">
                     {capitalizeFirstLetter(cycleStatus)}
                   </span>
                 </div>
@@ -309,8 +309,8 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                       <>
                         <Popover.Button
                           disabled={isCompleted ?? false}
-                          className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-xs ${
-                            cycle.start_date ? "" : "text-brand-secondary"
+                          className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-80 bg-custom-background-90 px-2 py-1 text-xs ${
+                            cycle.start_date ? "" : "text-custom-text-200"
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
@@ -352,15 +352,15 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                     )}
                   </Popover>
                   <span>
-                    <ArrowLongRightIcon className="h-3 w-3 text-brand-secondary" />
+                    <ArrowLongRightIcon className="h-3 w-3 text-custom-text-200" />
                   </span>
                   <Popover className="flex h-full items-center justify-center rounded-lg">
                     {({ open }) => (
                       <>
                         <Popover.Button
                           disabled={isCompleted ?? false}
-                          className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-xs ${
-                            cycle.end_date ? "" : "text-brand-secondary"
+                          className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-80 bg-custom-background-90 px-2 py-1 text-xs ${
+                            cycle.end_date ? "" : "text-custom-text-200"
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
@@ -409,7 +409,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                 <div className="flex w-full flex-col items-start justify-start gap-2">
                   <div className="flex w-full items-start justify-between gap-2">
                     <div className="max-w-[300px]">
-                      <h4 className="text-xl font-semibold text-brand-base break-words w-full">
+                      <h4 className="text-xl font-semibold text-custom-text-100 break-words w-full">
                         {cycle.name}
                       </h4>
                     </div>
@@ -431,14 +431,14 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                     </CustomMenu>
                   </div>
 
-                  <span className="whitespace-normal text-sm leading-5 text-brand-secondary break-words w-full">
+                  <span className="whitespace-normal text-sm leading-5 text-custom-text-200 break-words w-full">
                     {cycle.description}
                   </span>
                 </div>
 
                 <div className="flex flex-col  gap-4  text-sm">
                   <div className="flex items-center justify-start gap-1">
-                    <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+                    <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
                       <UserCircleIcon className="h-5 w-5" />
                       <span>Lead</span>
                     </div>
@@ -457,17 +457,17 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                           {cycle.owned_by.first_name.charAt(0)}
                         </span>
                       )}
-                      <span className="text-brand-secondary">{cycle.owned_by.first_name}</span>
+                      <span className="text-custom-text-200">{cycle.owned_by.first_name}</span>
                     </div>
                   </div>
 
                   <div className="flex items-center justify-start gap-1">
-                    <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+                    <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
                       <ChartPieIcon className="h-5 w-5" />
                       <span>Progress</span>
                     </div>
 
-                    <div className="flex items-center gap-2.5 text-brand-secondary">
+                    <div className="flex items-center gap-2.5 text-custom-text-200">
                       <span className="h-4 w-4">
                         <ProgressBar value={cycle.completed_issues} maxValue={cycle.total_issues} />
                       </span>
@@ -477,7 +477,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                 </div>
               </div>
             </div>
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-80 p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
                   <div
@@ -485,7 +485,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                   >
                     <div className="flex w-full items-center justify-between gap-2    ">
                       <div className="flex items-center justify-start gap-2 text-sm">
-                        <span className="font-medium text-brand-secondary">Progress</span>
+                        <span className="font-medium text-custom-text-200">Progress</span>
                         {!open && progressPercentage ? (
                           <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
                             {progressPercentage ? `${progressPercentage}%` : ""}
@@ -506,9 +506,9 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                           <ExclamationIcon
                             height={14}
                             width={14}
-                            className="fill-current text-brand-secondary"
+                            className="fill-current text-custom-text-200"
                           />
-                          <span className="text-xs italic text-brand-secondary">
+                          <span className="text-xs italic text-custom-text-200">
                             {cycleStatus === "upcoming"
                               ? "Cycle is yet to start."
                               : "Invalid date. Please enter valid date."}
@@ -523,7 +523,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-brand-secondary" />
+                                  <DocumentIcon className="h-3 w-3 text-custom-text-200" />
                                 </span>
                                 <span>
                                   Pending Issues -{" "}
@@ -532,7 +532,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                                 </span>
                               </div>
 
-                              <div className="flex items-center gap-3 text-brand-base">
+                              <div className="flex items-center gap-3 text-custom-text-100">
                                 <div className="flex items-center justify-center gap-1">
                                   <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
                                   <span>Ideal</span>
@@ -561,7 +561,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                 )}
               </Disclosure>
             </div>
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-80 p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
                   <div
@@ -569,7 +569,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                   >
                     <div className="flex w-full items-center justify-between gap-2">
                       <div className="flex items-center justify-start gap-2 text-sm">
-                        <span className="font-medium text-brand-secondary">Other Information</span>
+                        <span className="font-medium text-custom-text-200">Other Information</span>
                       </div>
 
                       {cycle.total_issues > 0 ? (
@@ -584,9 +584,9 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                           <ExclamationIcon
                             height={14}
                             width={14}
-                            className="fill-current text-brand-secondary"
+                            className="fill-current text-custom-text-200"
                           />
-                          <span className="text-xs italic text-brand-secondary">
+                          <span className="text-xs italic text-custom-text-200">
                             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 c00429a439..cc80334155 100644
--- a/apps/app/components/cycles/single-cycle-card.tsx
+++ b/apps/app/components/cycles/single-cycle-card.tsx
@@ -128,7 +128,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
 
   return (
     <div>
-      <div className="flex flex-col rounded-[10px] bg-brand-base border border-brand-base text-xs shadow">
+      <div className="flex flex-col rounded-[10px] bg-custom-background-100 border border-custom-border-80 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">
@@ -223,7 +223,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                   )}
                 </span>
               </div>
-              <div className="flex h-4 items-center justify-start gap-5 text-brand-secondary">
+              <div className="flex h-4 items-center justify-start gap-5 text-custom-text-200">
                 {cycleStatus !== "draft" && (
                   <>
                     <div className="flex items-start gap-1">
@@ -240,10 +240,10 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
               </div>
 
               <div className="flex justify-between items-end">
-                <div className="flex flex-col gap-2 text-xs text-brand-secondary">
+                <div className="flex flex-col gap-2 text-xs text-custom-text-200">
                   <div className="flex items-center gap-2">
                     <div className="w-16">Creator:</div>
-                    <div className="flex items-center gap-2.5 text-brand-secondary">
+                    <div className="flex items-center gap-2.5 text-custom-text-200">
                       {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
                         <img
                           src={cycle.owned_by.avatar}
@@ -257,13 +257,13 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                           {cycle.owned_by.first_name.charAt(0)}
                         </span>
                       )}
-                      <span className="text-brand-secondary">{cycle.owned_by.first_name}</span>
+                      <span className="text-custom-text-200">{cycle.owned_by.first_name}</span>
                     </div>
                   </div>
                   <div className="flex h-5 items-center gap-2">
                     <div className="w-16">Members:</div>
                     {cycle.assignees.length > 0 ? (
-                      <div className="flex items-center gap-1 text-brand-secondary">
+                      <div className="flex items-center gap-1 text-custom-text-200">
                         <AssigneesList users={cycle.assignees} length={4} />
                       </div>
                     ) : (
@@ -279,7 +279,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                         e.preventDefault();
                         handleEditCycle();
                       }}
-                      className="flex cursor-pointer items-center rounded p-1 text-brand-secondary duration-300 hover:bg-brand-surface-1"
+                      className="flex cursor-pointer items-center rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-90"
                     >
                       <span>
                         <PencilIcon className="h-4 w-4" />
@@ -323,7 +323,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
           <Disclosure>
             {({ open }) => (
               <div
-                className={`flex h-full w-full flex-col rounded-b-[10px] border-t border-brand-base bg-brand-surface-2 text-brand-secondary ${
+                className={`flex h-full w-full flex-col rounded-b-[10px] border-t border-custom-border-80 bg-custom-background-80 text-custom-text-200 ${
                   open ? "" : "flex-row"
                 }`}
               >
@@ -369,7 +369,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                 </div>
                 <Transition show={open}>
                   <Disclosure.Panel>
-                    <div className="overflow-hidden rounded-b-md bg-brand-surface-2 py-3 shadow">
+                    <div className="overflow-hidden rounded-b-md bg-custom-background-80 py-3 shadow">
                       <div className="col-span-2 space-y-3 px-4">
                         <div className="space-y-3 text-xs">
                           {stateGroups.map((group) => (
@@ -389,7 +389,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                               <div>
                                 <span>
                                   {cycle[group.key as keyof ICycle] as number}{" "}
-                                  <span className="text-brand-secondary">
+                                  <span className="text-custom-text-200">
                                     -{" "}
                                     {cycle.total_issues > 0
                                       ? `${Math.round(
diff --git a/apps/app/components/cycles/single-cycle-list.tsx b/apps/app/components/cycles/single-cycle-list.tsx
index 4235803831..706340d7b4 100644
--- a/apps/app/components/cycles/single-cycle-list.tsx
+++ b/apps/app/components/cycles/single-cycle-list.tsx
@@ -152,7 +152,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
 
   return (
     <div>
-      <div className="flex flex-col text-xs hover:bg-brand-surface-2">
+      <div className="flex flex-col text-xs hover:bg-custom-background-80">
         <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">
@@ -182,7 +182,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                         {truncateText(cycle.name, 70)}
                       </h3>
                     </Tooltip>
-                    <p className="mt-2 text-brand-secondary break-words w-full">
+                    <p className="mt-2 text-custom-text-200 break-words w-full">
                       {cycle.description}
                     </p>
                   </div>
@@ -235,7 +235,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                   </span>
 
                   {cycleStatus !== "draft" && (
-                    <div className="flex items-center justify-start gap-2 text-brand-secondary">
+                    <div className="flex items-center justify-start gap-2 text-custom-text-200">
                       <div className="flex items-start gap-1 ">
                         <CalendarDaysIcon className="h-4 w-4" />
                         <span>{renderShortDateWithYearFormat(startDate)}</span>
@@ -248,7 +248,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                     </div>
                   )}
 
-                  <div className="flex items-center gap-2.5 text-brand-secondary">
+                  <div className="flex items-center gap-2.5 text-custom-text-200">
                     {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
                       <img
                         src={cycle.owned_by.avatar}
diff --git a/apps/app/components/cycles/transfer-issues-modal.tsx b/apps/app/components/cycles/transfer-issues-modal.tsx
index 6eea69342c..b31249134a 100644
--- a/apps/app/components/cycles/transfer-issues-modal.tsx
+++ b/apps/app/components/cycles/transfer-issues-modal.tsx
@@ -108,21 +108,21 @@ 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-brand-surface-1 py-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-90 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-3">
                       <TransferIcon className="h-4 w-5" color="#495057" />
-                      <h4 className="text-xl font-medium text-brand-base">Transfer Issues</h4>
+                      <h4 className="text-xl font-medium text-custom-text-100">Transfer Issues</h4>
                     </div>
                     <button onClick={handleClose}>
                       <XMarkIcon className="h-4 w-4" />
                     </button>
                   </div>
-                  <div className="flex items-center gap-2 border-b border-brand-base px-5 pb-3">
-                    <MagnifyingGlassIcon className="h-4 w-4 text-brand-secondary" />
+                  <div className="flex items-center gap-2 border-b border-custom-border-80 px-5 pb-3">
+                    <MagnifyingGlassIcon className="h-4 w-4 text-custom-text-200" />
                     <input
-                      className="bg-brand-surface-1 outline-none"
+                      className="bg-custom-background-90 outline-none"
                       placeholder="Search for a cycle..."
                       onChange={(e) => setQuery(e.target.value)}
                       value={query}
@@ -134,7 +134,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                         filteredOptions.map((option: ICycle) => (
                           <button
                             key={option.id}
-                            className="flex w-full items-center gap-4 rounded px-4 py-3 text-sm text-brand-secondary hover:bg-brand-surface-1"
+                            className="flex w-full items-center gap-4 rounded px-4 py-3 text-sm text-custom-text-200 hover:bg-custom-background-90"
                             onClick={() => {
                               transferIssue({
                                 new_cycle_id: option?.id,
@@ -145,7 +145,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                             <ContrastIcon className="h-5 w-5" />
                             <div className="flex w-full justify-between">
                               <span>{option?.name}</span>
-                              <span className=" flex items-center rounded-full bg-brand-surface-2  px-2 capitalize">
+                              <span className=" flex items-center rounded-full bg-custom-background-80  px-2 capitalize">
                                 {getDateRangeStatus(option?.start_date, option?.end_date)}
                               </span>
                             </div>
@@ -156,16 +156,16 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                           <ExclamationIcon
                             height={14}
                             width={14}
-                            className="fill-current text-brand-secondary"
+                            className="fill-current text-custom-text-200"
                           />
-                          <span className="text-center text-brand-secondary">
+                          <span className="text-center text-custom-text-200">
                             You don’t have any current cycle. Please create one to transfer the
                             issues.
                           </span>
                         </div>
                       )
                     ) : (
-                      <p className="text-center text-brand-secondary">Loading...</p>
+                      <p className="text-center text-custom-text-200">Loading...</p>
                     )}
                   </div>
                 </div>
diff --git a/apps/app/components/cycles/transfer-issues.tsx b/apps/app/components/cycles/transfer-issues.tsx
index 5febdffcc9..a49c7665f8 100644
--- a/apps/app/components/cycles/transfer-issues.tsx
+++ b/apps/app/components/cycles/transfer-issues.tsx
@@ -38,8 +38,8 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
     : 0;
   return (
     <div className="-mt-2 mb-4 flex items-center justify-between px-8 pt-6">
-      <div className="flex items-center gap-2 text-sm text-brand-secondary">
-        <ExclamationIcon height={14} width={14} className="fill-current text-brand-secondary" />
+      <div className="flex items-center gap-2 text-sm text-custom-text-200">
+        <ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" />
         <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 fecba1c154..2c3fa20464 100644
--- a/apps/app/components/emoji-icon-picker/index.tsx
+++ b/apps/app/components/emoji-icon-picker/index.tsx
@@ -49,7 +49,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
   return (
     <Popover className="relative z-[1]" ref={ref}>
       <Popover.Button
-        className="rounded-full bg-brand-surface-1 p-2 outline-none sm:text-sm"
+        className="rounded-full bg-custom-background-90 p-2 outline-none sm:text-sm"
         onClick={() => setIsOpen((prev) => !prev)}
       >
         {label}
@@ -63,8 +63,8 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] border border-brand-base bg-brand-surface-2 shadow-lg">
-          <div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-brand-base bg-brand-surface-2 p-2 shadow-xl">
+        <Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] border border-custom-border-80 bg-custom-background-80 shadow-lg">
+          <div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-80 bg-custom-background-80 p-2 shadow-xl">
             <Tab.Group as="div" className="flex h-full w-full flex-col">
               <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
                 {tabOptions.map((tab) => (
@@ -76,7 +76,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
                           setOpenColorPicker(false);
                         }}
                         className={`-my-1 w-1/2 border-b pb-2 text-center text-sm font-medium outline-none transition-colors ${
-                          selected ? "" : "border-transparent text-brand-secondary"
+                          selected ? "" : "border-transparent text-custom-text-200"
                         }`}
                       >
                         {tab.title}
@@ -89,7 +89,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
                 <Tab.Panel>
                   {recentEmojis.length > 0 && (
                     <div className="py-2">
-                      <h3 className="mb-2 text-xs text-brand-secondary">Recent</h3>
+                      <h3 className="mb-2 text-xs text-custom-text-200">Recent</h3>
                       <div className="grid grid-cols-8 gap-2">
                         {recentEmojis.map((emoji) => (
                           <button
@@ -107,7 +107,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
                       </div>
                     </div>
                   )}
-                  <hr className="mb-2 h-[1px] w-full border-brand-base" />
+                  <hr className="mb-2 h-[1px] w-full border-custom-border-80" />
                   <div>
                     <div className="grid grid-cols-8 gap-x-2 gap-y-3">
                       {emojis.map((emoji) => (
@@ -173,7 +173,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
                         />
                       </div>
                     </div>
-                    <hr className="mb-1 h-[1px] w-full border-brand-base" />
+                    <hr className="mb-1 h-[1px] w-full border-custom-border-80" />
                     <div className="mt-1 ml-1 grid grid-cols-8 gap-x-2 gap-y-3">
                       {icons.material_rounded.map((icon, index) => (
                         <button
diff --git a/apps/app/components/estimates/create-update-estimate-modal.tsx b/apps/app/components/estimates/create-update-estimate-modal.tsx
index 68cbcaaaf6..388b68d5fe 100644
--- a/apps/app/components/estimates/create-update-estimate-modal.tsx
+++ b/apps/app/components/estimates/create-update-estimate-modal.tsx
@@ -240,7 +240,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -254,7 +254,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                 leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                 leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
               >
-                <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <Dialog.Panel className="relative transform rounded-lg border border-custom-border-80 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                   <form onSubmit={handleSubmit(onSubmit)}>
                     <div className="space-y-3">
                       <div className="text-lg font-medium leading-6">
@@ -282,9 +282,9 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                       </div>
                       <div className="grid grid-cols-3 gap-3">
                         <div className="flex items-center">
-                          <span className="flex h-full items-center rounded-lg bg-brand-surface-2">
-                            <span className="rounded-lg px-2 text-sm text-brand-secondary">1</span>
-                            <span className="rounded-r-lg bg-brand-base">
+                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                            <span className="rounded-lg px-2 text-sm text-custom-text-200">1</span>
+                            <span className="rounded-r-lg bg-custom-background-100">
                               <Input
                                 id="name"
                                 name="value1"
@@ -298,9 +298,9 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           </span>
                         </div>
                         <div className="flex items-center">
-                          <span className="flex h-full items-center rounded-lg bg-brand-surface-2">
-                            <span className="rounded-lg px-2 text-sm text-brand-secondary">2</span>
-                            <span className="rounded-r-lg bg-brand-base">
+                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                            <span className="rounded-lg px-2 text-sm text-custom-text-200">2</span>
+                            <span className="rounded-r-lg bg-custom-background-100">
                               <Input
                                 id="name"
                                 name="value2"
@@ -314,9 +314,9 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           </span>
                         </div>
                         <div className="flex items-center">
-                          <span className="flex h-full items-center rounded-lg bg-brand-surface-2">
-                            <span className="rounded-lg px-2 text-sm text-brand-secondary">3</span>
-                            <span className="rounded-r-lg bg-brand-base">
+                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                            <span className="rounded-lg px-2 text-sm text-custom-text-200">3</span>
+                            <span className="rounded-r-lg bg-custom-background-100">
                               <Input
                                 id="name"
                                 name="value3"
@@ -330,9 +330,9 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           </span>
                         </div>
                         <div className="flex items-center">
-                          <span className="flex h-full items-center rounded-lg bg-brand-surface-2">
-                            <span className="rounded-lg px-2 text-sm text-brand-secondary">4</span>
-                            <span className="rounded-r-lg bg-brand-base">
+                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                            <span className="rounded-lg px-2 text-sm text-custom-text-200">4</span>
+                            <span className="rounded-r-lg bg-custom-background-100">
                               <Input
                                 id="name"
                                 name="value4"
@@ -346,9 +346,9 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           </span>
                         </div>
                         <div className="flex items-center">
-                          <span className="flex h-full items-center rounded-lg bg-brand-surface-2">
-                            <span className="rounded-lg px-2 text-sm text-brand-secondary">5</span>
-                            <span className="rounded-r-lg bg-brand-base">
+                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                            <span className="rounded-lg px-2 text-sm text-custom-text-200">5</span>
+                            <span className="rounded-r-lg bg-custom-background-100">
                               <Input
                                 id="name"
                                 name="value5"
@@ -362,9 +362,9 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           </span>
                         </div>
                         <div className="flex items-center">
-                          <span className="flex h-full items-center rounded-lg bg-brand-surface-2">
-                            <span className="rounded-lg px-2 text-sm text-brand-secondary">6</span>
-                            <span className="rounded-r-lg bg-brand-base">
+                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                            <span className="rounded-lg px-2 text-sm text-custom-text-200">6</span>
+                            <span className="rounded-r-lg bg-custom-background-100">
                               <Input
                                 id="name"
                                 name="value6"
diff --git a/apps/app/components/estimates/delete-estimate-modal.tsx b/apps/app/components/estimates/delete-estimate-modal.tsx
index 5a4f9ccfa1..b236610e4a 100644
--- a/apps/app/components/estimates/delete-estimate-modal.tsx
+++ b/apps/app/components/estimates/delete-estimate-modal.tsx
@@ -46,7 +46,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -60,7 +60,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-80 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
@@ -74,9 +74,11 @@ export const DeleteEstimateModal: React.FC<Props> = ({
                     </span>
                   </div>
                   <span>
-                    <p className="break-words text-sm leading-7 text-brand-secondary">
+                    <p className="break-words text-sm leading-7 text-custom-text-200">
                       Are you sure you want to delete estimate-{" "}
-                      <span className="break-words font-medium text-brand-base">{data.name}</span>
+                      <span className="break-words font-medium text-custom-text-100">
+                        {data.name}
+                      </span>
                       {""}? All of the data related to the estiamte will be permanently removed.
                       This action cannot be undone.
                     </p>
diff --git a/apps/app/components/estimates/single-estimate.tsx b/apps/app/components/estimates/single-estimate.tsx
index 5e331c1397..21ffe4afff 100644
--- a/apps/app/components/estimates/single-estimate.tsx
+++ b/apps/app/components/estimates/single-estimate.tsx
@@ -77,7 +77,7 @@ export const SingleEstimate: React.FC<Props> = ({
                 </span>
               )}
             </h6>
-            <p className="font-sm w-[40vw] truncate text-[14px] font-normal text-brand-secondary">
+            <p className="font-sm w-[40vw] truncate text-[14px] font-normal text-custom-text-200">
               {estimate.description}
             </p>
           </div>
@@ -114,11 +114,11 @@ export const SingleEstimate: React.FC<Props> = ({
           </div>
         </div>
         {estimate.points.length > 0 ? (
-          <div className="flex text-xs text-brand-secondary">
+          <div className="flex text-xs text-custom-text-200">
             Estimate points (
             <span className="flex gap-1">
               {orderArrayBy(estimate.points, "key").map((point, index) => (
-                <h6 key={point.id} className="text-brand-secondary">
+                <h6 key={point.id} className="text-custom-text-200">
                   {point.value}
                   {index !== estimate.points.length - 1 && ","}{" "}
                 </h6>
@@ -128,7 +128,7 @@ export const SingleEstimate: React.FC<Props> = ({
           </div>
         ) : (
           <div>
-            <p className="text-xs text-brand-secondary">No estimate points</p>
+            <p className="text-xs text-custom-text-200">No estimate points</p>
           </div>
         )}
       </div>
diff --git a/apps/app/components/gantt-chart/blocks/index.tsx b/apps/app/components/gantt-chart/blocks/index.tsx
index 31e7839cc9..ba5815e611 100644
--- a/apps/app/components/gantt-chart/blocks/index.tsx
+++ b/apps/app/components/gantt-chart/blocks/index.tsx
@@ -38,13 +38,13 @@ export const GanttChartBlocks: FC<{
                     style={{ marginLeft: `${block?.position?.marginLeft}px` }}
                   >
                     <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
-                      <div className="absolute right-0 mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
+                      <div className="absolute right-0 mr-[5px] rounded-sm bg-custom-background-90 px-2 py-0.5 text-xs font-medium">
                         {block?.start_date ? datePreview(block?.start_date) : "-"}
                       </div>
                     </div>
 
                     <div
-                      className="rounded shadow-sm bg-brand-base overflow-hidden relative flex items-center h-[34px] border border-brand-base"
+                      className="rounded shadow-sm bg-custom-background-100 overflow-hidden relative flex items-center h-[34px] border border-custom-border-80"
                       style={{
                         width: `${block?.position?.width}px`,
                       }}
@@ -56,7 +56,7 @@ export const GanttChartBlocks: FC<{
                     </div>
 
                     <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
-                      <div className="absolute left-0 ml-[5px] mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
+                      <div className="absolute left-0 ml-[5px] mr-[5px] rounded-sm bg-custom-background-90 px-2 py-0.5 text-xs font-medium">
                         {block?.target_date ? datePreview(block?.target_date) : "-"}
                       </div>
                     </div>
@@ -68,11 +68,11 @@ export const GanttChartBlocks: FC<{
       </div>
 
       {/* sidebar */}
-      {/* <div className="fixed top-0 bottom-0 w-[300px] flex-shrink-0 divide-y divide-brand-base border-r border-brand-base overflow-y-auto">
+      {/* <div className="fixed top-0 bottom-0 w-[300px] flex-shrink-0 divide-y divide-custom-border-80 border-r border-custom-border-80 overflow-y-auto">
         {blocks &&
           blocks.length > 0 &&
           blocks.map((block: any, _idx: number) => (
-            <div className="relative h-[40px] bg-brand-base" key={`sidebar-blocks-${_idx}`}>
+            <div className="relative h-[40px] bg-custom-background-100" key={`sidebar-blocks-${_idx}`}>
               {sidebarBlockRender(block?.data)}
             </div>
           ))}
diff --git a/apps/app/components/gantt-chart/chart/bi-week.tsx b/apps/app/components/gantt-chart/chart/bi-week.tsx
index 489bc3eb6f..b10931cf23 100644
--- a/apps/app/components/gantt-chart/chart/bi-week.tsx
+++ b/apps/app/components/gantt-chart/chart/bi-week.tsx
@@ -7,18 +7,18 @@ export const BiWeekChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-80">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-brand-base">
+              <div className="relative border-b border-custom-border-80">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-brand-base">
+              <div className="flex h-full w-full divide-x divide-custom-border-80">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const BiWeekChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-80`
                         }`}
                       >
                         <div>{_item.title}</div>
@@ -37,7 +37,7 @@ export const BiWeekChartView: FC<any> = () => {
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
                           ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-brand-surface-2`
+                            ? `bg-custom-background-80`
                             : ``
                         }`}
                       >
diff --git a/apps/app/components/gantt-chart/chart/day.tsx b/apps/app/components/gantt-chart/chart/day.tsx
index 1ad1649b6d..0187252e70 100644
--- a/apps/app/components/gantt-chart/chart/day.tsx
+++ b/apps/app/components/gantt-chart/chart/day.tsx
@@ -7,18 +7,18 @@ export const DayChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-80">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-brand-base">
+              <div className="relative border-b border-custom-border-80">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-brand-base">
+              <div className="flex h-full w-full divide-x divide-custom-border-80">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const DayChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-80`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/apps/app/components/gantt-chart/chart/hours.tsx b/apps/app/components/gantt-chart/chart/hours.tsx
index 02b2d15b1a..1764a896bc 100644
--- a/apps/app/components/gantt-chart/chart/hours.tsx
+++ b/apps/app/components/gantt-chart/chart/hours.tsx
@@ -7,18 +7,18 @@ export const HourChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-80">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-brand-base">
+              <div className="relative border-b border-custom-border-80">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-brand-base">
+              <div className="flex h-full w-full divide-x divide-custom-border-80">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const HourChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-80`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx
index 72d6888e23..e6d6920bd8 100644
--- a/apps/app/components/gantt-chart/chart/index.tsx
+++ b/apps/app/components/gantt-chart/chart/index.tsx
@@ -215,17 +215,19 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   return (
     <div
       className={`${
-        fullScreenMode ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-brand-base` : `relative`
+        fullScreenMode
+          ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-custom-background-100`
+          : `relative`
       } ${
-        border ? `border border-brand-base` : ``
-      } flex h-full flex-col rounded-sm select-none bg-brand-base shadow`}
+        border ? `border border-custom-border-80` : ``
+      } flex h-full flex-col rounded-sm select-none bg-custom-background-100 shadow`}
     >
       {/* chart title */}
-      {/* <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-brand-base">
+      {/* <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-custom-border-80">
         {title && (
           <div className="text-lg font-medium flex gap-2 items-center">
             <div>{title}</div>
-            <div className="text-xs rounded-full px-2 py-1 font-bold border border-brand-accent/75 bg-brand-accent/5 text-brand-base">
+            <div className="text-xs rounded-full px-2 py-1 font-bold border border-custom-primary/75 bg-custom-primary/5 text-custom-text-100">
               Gantt View Beta
             </div>
           </div>
@@ -242,7 +244,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       {/* chart header */}
       <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2">
         {/* <div
-          className="transition-all border border-brand-base w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-brand-surface-2"
+          className="transition-all border border-custom-border-80 w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80"
           onClick={() => setBlocksSidebarView(() => !blocksSidebarView)}
         >
           {blocksSidebarView ? (
@@ -255,7 +257,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
         {title && (
           <div className="text-lg font-medium flex gap-2 items-center">
             <div>{title}</div>
-            <div className="text-xs rounded-full px-2 py-1 font-bold border border-brand-accent/75 bg-brand-accent/5 text-brand-base">
+            <div className="text-xs rounded-full px-2 py-1 font-bold border border-custom-primary/75 bg-custom-primary/5 text-custom-text-100">
               Gantt View Beta
             </div>
           </div>
@@ -277,8 +279,10 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             allViews.map((_chatView: any, _idx: any) => (
               <div
                 key={_chatView?.key}
-                className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-xs ${
-                  currentView === _chatView?.key ? `bg-brand-surface-2` : `hover:bg-brand-surface-1`
+                className={`cursor-pointer rounded-sm border border-custom-border-80 p-1 px-2 text-xs ${
+                  currentView === _chatView?.key
+                    ? `bg-custom-background-80`
+                    : `hover:bg-custom-background-90`
                 }`}
                 onClick={() => handleChartView(_chatView?.key)}
               >
@@ -289,7 +293,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
 
         <div className="flex items-center gap-1">
           <div
-            className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-xs hover:bg-brand-surface-2`}
+            className={`cursor-pointer rounded-sm border border-custom-border-80 p-1 px-2 text-xs hover:bg-custom-background-80`}
             onClick={handleToday}
           >
             Today
@@ -297,7 +301,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
         </div>
 
         <div
-          className="transition-all border border-brand-base w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-brand-surface-2"
+          className="transition-all border border-custom-border-80 w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80"
           onClick={() => setFullScreenMode(() => !fullScreenMode)}
         >
           {fullScreenMode ? (
@@ -309,7 +313,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       </div>
 
       {/* content */}
-      <div className="relative flex h-full w-full flex-1 overflow-hidden border-t border-brand-base">
+      <div className="relative flex h-full w-full flex-1 overflow-hidden border-t border-custom-border-80">
         <div
           className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto"
           id="scroll-container"
diff --git a/apps/app/components/gantt-chart/chart/month.tsx b/apps/app/components/gantt-chart/chart/month.tsx
index 197ac99303..cb415e49e8 100644
--- a/apps/app/components/gantt-chart/chart/month.tsx
+++ b/apps/app/components/gantt-chart/chart/month.tsx
@@ -7,18 +7,18 @@ export const MonthChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-80">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-brand-base">
+              <div className="relative border-b border-custom-border-80">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-brand-base">
+              <div className="flex h-full w-full divide-x divide-custom-border-80">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const MonthChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-80`
                         }`}
                       >
                         <div>{_item.title}</div>
@@ -37,7 +37,7 @@ export const MonthChartView: FC<any> = () => {
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
                           ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-brand-surface-1`
+                            ? `bg-custom-background-90`
                             : ``
                         }`}
                       >
diff --git a/apps/app/components/gantt-chart/chart/quarter.tsx b/apps/app/components/gantt-chart/chart/quarter.tsx
index 57f6f4f5e9..109acce819 100644
--- a/apps/app/components/gantt-chart/chart/quarter.tsx
+++ b/apps/app/components/gantt-chart/chart/quarter.tsx
@@ -7,18 +7,18 @@ export const QuarterChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-80">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-brand-base">
+              <div className="relative border-b border-custom-border-80">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-brand-base">
+              <div className="flex h-full w-full divide-x divide-custom-border-80">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const QuarterChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-80`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/apps/app/components/gantt-chart/chart/week.tsx b/apps/app/components/gantt-chart/chart/week.tsx
index 695fa2aa57..7e06a4edc2 100644
--- a/apps/app/components/gantt-chart/chart/week.tsx
+++ b/apps/app/components/gantt-chart/chart/week.tsx
@@ -7,18 +7,18 @@ export const WeekChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-80">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-brand-base">
+              <div className="relative border-b border-custom-border-80">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-brand-base">
+              <div className="flex h-full w-full divide-x divide-custom-border-80">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const WeekChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-80`
                         }`}
                       >
                         <div>{_item.title}</div>
@@ -37,7 +37,7 @@ export const WeekChartView: FC<any> = () => {
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
                           ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-brand-surface-2`
+                            ? `bg-custom-background-80`
                             : ``
                         }`}
                       >
diff --git a/apps/app/components/gantt-chart/chart/year.tsx b/apps/app/components/gantt-chart/chart/year.tsx
index d06f0e0255..558cd78a54 100644
--- a/apps/app/components/gantt-chart/chart/year.tsx
+++ b/apps/app/components/gantt-chart/chart/year.tsx
@@ -7,18 +7,18 @@ export const YearChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-80">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-brand-base">
+              <div className="relative border-b border-custom-border-80">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-brand-base">
+              <div className="flex h-full w-full divide-x divide-custom-border-80">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -29,7 +29,7 @@ export const YearChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
-                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                          _item?.today ? `text-red-500 border-red-500` : `border-custom-border-80`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/apps/app/components/inbox/accept-issue-modal.tsx b/apps/app/components/inbox/accept-issue-modal.tsx
index 6427c562c2..adc16ce113 100644
--- a/apps/app/components/inbox/accept-issue-modal.tsx
+++ b/apps/app/components/inbox/accept-issue-modal.tsx
@@ -42,7 +42,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -56,7 +56,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-80 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-green-500/20 p-4">
@@ -67,9 +67,9 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm text-brand-secondary">
+                    <p className="text-sm text-custom-text-200">
                       Are you sure you want to accept issue{" "}
-                      <span className="break-all font-medium text-brand-base">
+                      <span className="break-all font-medium text-custom-text-100">
                         {data?.project_detail?.identifier}-{data?.sequence_id}
                       </span>
                       {""}? Once accepted, this issue will be added to the project issues list.
diff --git a/apps/app/components/inbox/decline-issue-modal.tsx b/apps/app/components/inbox/decline-issue-modal.tsx
index 11f1db5de0..8dbac2d2bb 100644
--- a/apps/app/components/inbox/decline-issue-modal.tsx
+++ b/apps/app/components/inbox/decline-issue-modal.tsx
@@ -42,7 +42,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -56,7 +56,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-80 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
@@ -70,9 +70,9 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm text-brand-secondary">
+                    <p className="text-sm text-custom-text-200">
                       Are you sure you want to decline issue{" "}
-                      <span className="break-words font-medium text-brand-base">
+                      <span className="break-words font-medium text-custom-text-100">
                         {data?.project_detail?.identifier}-{data?.sequence_id}
                       </span>
                       {""}? This action cannot be undone.
diff --git a/apps/app/components/inbox/delete-issue-modal.tsx b/apps/app/components/inbox/delete-issue-modal.tsx
index f188ff1aa3..2153f1d9fe 100644
--- a/apps/app/components/inbox/delete-issue-modal.tsx
+++ b/apps/app/components/inbox/delete-issue-modal.tsx
@@ -97,7 +97,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -111,7 +111,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-80 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
@@ -125,9 +125,9 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm text-brand-secondary">
+                    <p className="text-sm text-custom-text-200">
                       Are you sure you want to delete issue{" "}
-                      <span className="break-words font-medium text-brand-base">
+                      <span className="break-words font-medium text-custom-text-100">
                         {data?.project_detail?.identifier}-{data?.sequence_id}
                       </span>
                       {""}? The issue will only be deleted from the inbox and this action cannot be
diff --git a/apps/app/components/inbox/filters-dropdown.tsx b/apps/app/components/inbox/filters-dropdown.tsx
index c12fcb8d24..6900b31f9a 100644
--- a/apps/app/components/inbox/filters-dropdown.tsx
+++ b/apps/app/components/inbox/filters-dropdown.tsx
@@ -72,7 +72,7 @@ export const FiltersDropdown: React.FC = () => {
         ]}
       />
       {filtersLength > 0 && (
-        <div className="absolute -top-2 -right-2 h-4 w-4 text-[0.65rem] grid place-items-center rounded-full text-brand-base bg-brand-surface-2 border border-brand-base z-10">
+        <div className="absolute -top-2 -right-2 h-4 w-4 text-[0.65rem] grid place-items-center rounded-full text-custom-text-100 bg-custom-background-80 border border-custom-border-80 z-10">
           <span>{filtersLength}</span>
         </div>
       )}
diff --git a/apps/app/components/inbox/filters-list.tsx b/apps/app/components/inbox/filters-list.tsx
index 264b925a2d..da1bbeb5ae 100644
--- a/apps/app/components/inbox/filters-list.tsx
+++ b/apps/app/components/inbox/filters-list.tsx
@@ -22,9 +22,9 @@ export const InboxFiltersList = () => {
           return (
             <div
               key={key}
-              className="flex items-center gap-x-2 rounded-full border border-brand-base bg-brand-surface-2 px-2 py-1"
+              className="flex items-center gap-x-2 rounded-full border border-custom-border-80 bg-custom-background-80 px-2 py-1"
             >
-              <span className="capitalize text-brand-secondary">
+              <span className="capitalize text-custom-text-200">
                 {replaceUnderscoreIfSnakeCase(key)}:
               </span>
               {filters[filterKey] === null || (filters[filterKey]?.length ?? 0) <= 0 ? (
@@ -45,7 +45,7 @@ export const InboxFiltersList = () => {
                               ? "bg-yellow-500/20 text-yellow-500"
                               : priority === "low"
                               ? "bg-green-500/20 text-green-500"
-                              : "bg-brand-surface-1 text-brand-secondary"
+                              : "bg-custom-background-90 text-custom-text-200"
                           }`}
                         >
                           <span>{getPriorityIcon(priority)}</span>
@@ -78,7 +78,7 @@ export const InboxFiltersList = () => {
                       {filters.inbox_status?.map((status) => (
                         <div
                           key={status}
-                          className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize bg-brand-surface-1 text-brand-secondary"
+                          className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize bg-custom-background-90 text-custom-text-200"
                         >
                           <span>{INBOX_STATUS.find((s) => s.value === status)?.label}</span>
                           <button
@@ -116,7 +116,7 @@ export const InboxFiltersList = () => {
       <button
         type="button"
         onClick={clearAllFilters}
-        className="flex items-center gap-x-1 rounded-full border border-brand-base bg-brand-surface-2 px-3 py-1.5 text-brand-secondary hover:text-brand-base"
+        className="flex items-center gap-x-1 rounded-full border border-custom-border-80 bg-custom-background-80 px-3 py-1.5 text-custom-text-200 hover:text-custom-text-100"
       >
         <span>Clear all</span>
         <XMarkIcon className="h-3 w-3" />
diff --git a/apps/app/components/inbox/inbox-action-headers.tsx b/apps/app/components/inbox/inbox-action-headers.tsx
index ac144ba0bb..fbc30ee927 100644
--- a/apps/app/components/inbox/inbox-action-headers.tsx
+++ b/apps/app/components/inbox/inbox-action-headers.tsx
@@ -162,10 +162,10 @@ export const InboxActionHeader = () => {
         handleClose={() => setDeleteIssueModal(false)}
         data={inboxIssues?.find((i) => i.bridge_id === inboxIssueId)}
       />
-      <div className="grid grid-cols-4 border-b border-brand-base divide-x divide-brand-base">
+      <div className="grid grid-cols-4 border-b border-custom-border-80 divide-x divide-custom-border-80">
         <div className="col-span-1 flex justify-between p-4">
           <div className="flex items-center gap-2">
-            <InboxIcon className="h-4 w-4 text-brand-secondary" />
+            <InboxIcon className="h-4 w-4 text-custom-text-200" />
             <h3 className="font-medium">Inbox</h3>
           </div>
           <FiltersDropdown />
@@ -175,7 +175,7 @@ export const InboxActionHeader = () => {
             <div className="flex items-center gap-x-2">
               <button
                 type="button"
-                className="rounded border border-brand-base bg-brand-surface-1 p-1.5 hover:bg-brand-surface-2"
+                className="rounded border border-custom-border-80 bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
                 onClick={() => {
                   const e = new KeyboardEvent("keydown", { key: "ArrowUp" });
                   document.dispatchEvent(e);
@@ -185,7 +185,7 @@ export const InboxActionHeader = () => {
               </button>
               <button
                 type="button"
-                className="rounded border border-brand-base bg-brand-surface-1 p-1.5 hover:bg-brand-surface-2"
+                className="rounded border border-custom-border-80 bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
                 onClick={() => {
                   const e = new KeyboardEvent("keydown", { key: "ArrowDown" });
                   document.dispatchEvent(e);
@@ -203,11 +203,11 @@ export const InboxActionHeader = () => {
                   <Popover className="relative">
                     <Popover.Button as="button" type="button">
                       <SecondaryButton className="flex gap-x-1 items-center" size="sm">
-                        <ClockIcon className="h-4 w-4 text-brand-secondary" />
+                        <ClockIcon className="h-4 w-4 text-custom-text-200" />
                         <span>Snooze</span>
                       </SecondaryButton>
                     </Popover.Button>
-                    <Popover.Panel className="w-80 p-2 absolute right-0 z-10 mt-2 rounded-md border border-brand-base bg-brand-surface-2 shadow-lg">
+                    <Popover.Panel className="w-80 p-2 absolute right-0 z-10 mt-2 rounded-md border border-custom-border-80 bg-custom-background-80 shadow-lg">
                       {({ close }) => (
                         <div className="w-full h-full flex flex-col gap-y-1">
                           <DatePicker
@@ -245,7 +245,7 @@ export const InboxActionHeader = () => {
                     className="flex gap-2 items-center"
                     onClick={() => setSelectDuplicateIssue(true)}
                   >
-                    <StackedLayersHorizontalIcon className="h-4 w-4 text-brand-secondary" />
+                    <StackedLayersHorizontalIcon className="h-4 w-4 text-custom-text-200" />
                     <span>Mark as duplicate</span>
                   </SecondaryButton>
                 </div>
diff --git a/apps/app/components/inbox/inbox-issue-card.tsx b/apps/app/components/inbox/inbox-issue-card.tsx
index 53d6c2e955..4ddaf39008 100644
--- a/apps/app/components/inbox/inbox-issue-card.tsx
+++ b/apps/app/components/inbox/inbox-issue-card.tsx
@@ -40,12 +40,12 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
       <a>
         <div
           id={issue.id}
-          className={`relative min-h-[5rem] cursor-pointer select-none space-y-3 py-2 px-4 border-b border-brand-base hover:bg-brand-accent hover:bg-opacity-10 ${
-            active ? "bg-brand-accent bg-opacity-5" : " "
+          className={`relative min-h-[5rem] cursor-pointer select-none space-y-3 py-2 px-4 border-b border-custom-border-80 hover:bg-custom-primary hover:bg-opacity-10 ${
+            active ? "bg-custom-primary bg-opacity-5" : " "
           } ${issue.issue_inbox[0].status !== -2 ? "opacity-60" : ""}`}
         >
           <div className="flex items-center gap-x-2">
-            <p className="flex-shrink-0 text-brand-secondary text-xs">
+            <p className="flex-shrink-0 text-custom-text-200 text-xs">
               {issue.project_detail?.identifier}-{issue.sequence_id}
             </p>
             <h5 className="truncate text-sm">{issue.name}</h5>
@@ -62,7 +62,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
                     ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
                     : issue.priority === "low"
                     ? "border-green-500/20 bg-green-500/20 text-green-500"
-                    : "border-brand-base"
+                    : "border-custom-border-80"
                 }`}
               >
                 {getPriorityIcon(
@@ -75,7 +75,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
               tooltipHeading="Created on"
               tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`}
             >
-              <div className="flex items-center gap-1 rounded border border-brand-base shadow-sm text-xs px-2 py-[0.19rem] text-brand-secondary">
+              <div className="flex items-center gap-1 rounded border border-custom-border-80 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200">
                 <CalendarDaysIcon className="h-3.5 w-3.5" />
                 <span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span>
               </div>
diff --git a/apps/app/components/inbox/inbox-main-content.tsx b/apps/app/components/inbox/inbox-main-content.tsx
index 46aa4b33fc..82ff5191eb 100644
--- a/apps/app/components/inbox/inbox-main-content.tsx
+++ b/apps/app/components/inbox/inbox-main-content.tsx
@@ -193,20 +193,20 @@ export const InboxMainContent: React.FC = () => {
 
   if (!inboxIssueId)
     return (
-      <div className="h-full p-4 grid place-items-center text-brand-secondary">
+      <div className="h-full p-4 grid place-items-center text-custom-text-200">
         <div className="grid h-full place-items-center">
           <div className="my-5 flex flex-col items-center gap-4">
             <InboxIcon height={60} width={60} />
             {inboxIssues && inboxIssues.length > 0 ? (
-              <span className="text-brand-secondary">
+              <span className="text-custom-text-200">
                 {inboxIssues?.length} issues found. Select an issue from the sidebar to view its
                 details.
               </span>
             ) : (
-              <span className="text-brand-secondary">
+              <span className="text-custom-text-200">
                 No issues found. Use{" "}
-                <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre> shortcut to
-                create a new issue
+                <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre> shortcut
+                to create a new issue
               </span>
             )}
           </div>
@@ -228,11 +228,11 @@ export const InboxMainContent: React.FC = () => {
                   : issueStatus === 0
                   ? new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date()
                     ? "text-red-500 border-red-500 bg-red-500/10"
-                    : "text-brand-secondary border-gray-500 bg-gray-500/10"
+                    : "text-custom-text-200 border-gray-500 bg-gray-500/10"
                   : issueStatus === 1
                   ? "text-green-500 border-green-500 bg-green-500/10"
                   : issueStatus === 2
-                  ? "text-brand-secondary border-gray-500 bg-gray-500/10"
+                  ? "text-custom-text-200 border-gray-500 bg-gray-500/10"
                   : ""
               }`}
             >
@@ -304,13 +304,13 @@ export const InboxMainContent: React.FC = () => {
               />
             </div>
             <div className="space-y-5">
-              <h3 className="text-lg text-brand-base">Comments/Activity</h3>
+              <h3 className="text-lg text-custom-text-100">Comments/Activity</h3>
               <IssueActivitySection issueId={issueDetails.id} user={user} />
               <AddComment issueId={issueDetails.id} user={user} />
             </div>
           </div>
 
-          <div className="basis-1/3 space-y-5 border-brand-base p-5">
+          <div className="basis-1/3 space-y-5 border-custom-border-80 p-5">
             <IssueDetailsSidebar
               control={control}
               issueDetail={issueDetails}
diff --git a/apps/app/components/inbox/issues-list-sidebar.tsx b/apps/app/components/inbox/issues-list-sidebar.tsx
index 6126be1170..dc8a20bbf4 100644
--- a/apps/app/components/inbox/issues-list-sidebar.tsx
+++ b/apps/app/components/inbox/issues-list-sidebar.tsx
@@ -18,7 +18,7 @@ export const IssuesListSidebar = () => {
       <InboxFiltersList />
       {inboxIssues ? (
         inboxIssues.length > 0 ? (
-          <div className="divide-y divide-brand-base overflow-auto h-full">
+          <div className="divide-y divide-custom-border-80 overflow-auto h-full">
             {inboxIssues.map((issue) => (
               <InboxIssueCard
                 key={issue.id}
@@ -28,7 +28,7 @@ export const IssuesListSidebar = () => {
             ))}
           </div>
         ) : (
-          <div className="h-full p-4 grid place-items-center text-center text-sm text-brand-secondary">
+          <div className="h-full p-4 grid place-items-center text-center text-sm text-custom-text-200">
             {filtersLength > 0 &&
               "No issues found for the selected filters. Try changing the filters."}
           </div>
diff --git a/apps/app/components/inbox/select-duplicate.tsx b/apps/app/components/inbox/select-duplicate.tsx
index 74409a57f7..711beb832b 100644
--- a/apps/app/components/inbox/select-duplicate.tsx
+++ b/apps/app/components/inbox/select-duplicate.tsx
@@ -88,7 +88,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+              <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
             </Transition.Child>
 
             <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
@@ -101,7 +101,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
+                <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-80 bg-custom-background-100 shadow-2xl transition-all">
                   <Combobox
                     value={selectedItem}
                     onChange={(value) => {
@@ -110,12 +110,12 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                   >
                     <div className="relative m-1">
                       <MagnifyingGlassIcon
-                        className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
+                        className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                         aria-hidden="true"
                       />
                       <input
                         type="text"
-                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
                         placeholder="Search..."
                         onChange={(e) => setQuery(e.target.value)}
                       />
@@ -123,24 +123,26 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
 
                     <Combobox.Options
                       static
-                      className="max-h-80 scroll-py-2 divide-y divide-brand-base overflow-y-auto"
+                      className="max-h-80 scroll-py-2 divide-y divide-custom-border-80 overflow-y-auto"
                     >
                       {filteredIssues.length > 0 ? (
                         <li className="p-2">
                           {query === "" && (
-                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
+                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-custom-text-100">
                               Select issue
                             </h2>
                           )}
-                          <ul className="text-sm text-brand-base">
+                          <ul className="text-sm text-custom-text-100">
                             {filteredIssues.map((issue) => (
                               <Combobox.Option
                                 key={issue.id}
                                 as="div"
                                 value={issue.id}
                                 className={({ active, selected }) =>
-                                  `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
-                                    active || selected ? "bg-brand-surface-2 text-brand-base" : ""
+                                  `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
+                                    active || selected
+                                      ? "bg-custom-background-80 text-custom-text-100"
+                                      : ""
                                   } `
                                 }
                               >
@@ -151,7 +153,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                                       backgroundColor: issue.state_detail.color,
                                     }}
                                   />
-                                  <span className="flex-shrink-0 text-xs text-brand-secondary">
+                                  <span className="flex-shrink-0 text-xs text-custom-text-200">
                                     {
                                       issues?.find((i) => i.id === issue.id)?.project_detail
                                         ?.identifier
@@ -167,9 +169,12 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (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-sm text-brand-secondary">
+                          <h3 className="text-sm text-custom-text-200">
                             No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
+                            <pre className="inline rounded bg-custom-background-80 px-2 py-1">
+                              C
+                            </pre>
+                            .
                           </h3>
                         </div>
                       )}
diff --git a/apps/app/components/integration/delete-import-modal.tsx b/apps/app/components/integration/delete-import-modal.tsx
index 57af3fbfca..f1e92129f5 100644
--- a/apps/app/components/integration/delete-import-modal.tsx
+++ b/apps/app/components/integration/delete-import-modal.tsx
@@ -74,7 +74,7 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -88,7 +88,7 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-80 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
@@ -102,9 +102,9 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm leading-7 text-brand-secondary">
+                    <p className="text-sm leading-7 text-custom-text-200">
                       Are you sure you want to delete import from{" "}
-                      <span className="break-words font-semibold capitalize text-brand-base">
+                      <span className="break-words font-semibold capitalize text-custom-text-100">
                         {data?.service}
                       </span>
                       ? All of the data related to the import will be permanently removed. This
@@ -112,9 +112,9 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
                     </p>
                   </span>
                   <div>
-                    <p className="text-sm text-brand-secondary">
+                    <p className="text-sm text-custom-text-200">
                       To confirm, type{" "}
-                      <span className="font-medium text-brand-base">delete import</span> below:
+                      <span className="font-medium text-custom-text-100">delete import</span> below:
                     </p>
                     <Input
                       type="text"
diff --git a/apps/app/components/integration/github/import-configure.tsx b/apps/app/components/integration/github/import-configure.tsx
index 4f5784ffd8..ca5a55a77d 100644
--- a/apps/app/components/integration/github/import-configure.tsx
+++ b/apps/app/components/integration/github/import-configure.tsx
@@ -36,7 +36,7 @@ export const GithubImportConfigure: React.FC<Props> = ({
       <div className="flex items-center gap-2 py-5">
         <div className="w-full">
           <div className="font-medium">Configure</div>
-          <div className="text-sm text-brand-secondary">Set up your GitHub import.</div>
+          <div className="text-sm text-custom-text-200">Set up your GitHub import.</div>
         </div>
         <div className="flex-shrink-0">
           <GithubAuth workspaceIntegration={workspaceIntegration} provider={provider} />
diff --git a/apps/app/components/integration/github/import-confirm.tsx b/apps/app/components/integration/github/import-confirm.tsx
index 7b8c507fe8..8a7383062e 100644
--- a/apps/app/components/integration/github/import-confirm.tsx
+++ b/apps/app/components/integration/github/import-confirm.tsx
@@ -14,7 +14,7 @@ type Props = {
 
 export const GithubImportConfirm: FC<Props> = ({ handleStepChange, watch }) => (
   <div className="mt-6">
-    <h4 className="font-medium text-brand-secondary">
+    <h4 className="font-medium text-custom-text-200">
       You are about to import issues from {watch("github").full_name}. Click on {'"'}Confirm &
       Import{'" '}
       to complete the process.
diff --git a/apps/app/components/integration/github/import-data.tsx b/apps/app/components/integration/github/import-data.tsx
index 6babaf2e71..eeae3f28de 100644
--- a/apps/app/components/integration/github/import-data.tsx
+++ b/apps/app/components/integration/github/import-data.tsx
@@ -37,7 +37,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         <div className="grid grid-cols-12 gap-4 sm:gap-16">
           <div className="col-span-12 sm:col-span-8">
             <h4 className="font-semibold">Select Repository</h4>
-            <p className="text-xs text-brand-secondary">
+            <p className="text-xs text-custom-text-200">
               Select the repository that you want the issues to be imported from.
             </p>
           </div>
@@ -54,7 +54,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
                       value ? (
                         `${value.full_name}`
                       ) : (
-                        <span className="text-brand-secondary">Select Repository</span>
+                        <span className="text-custom-text-200">Select Repository</span>
                       )
                     }
                     onChange={onChange}
@@ -68,7 +68,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         <div className="grid grid-cols-12 gap-4 sm:gap-16">
           <div className="col-span-12 sm:col-span-8">
             <h4 className="font-semibold">Select Project</h4>
-            <p className="text-xs text-brand-secondary">
+            <p className="text-xs text-custom-text-200">
               Select the project to import the issues to.
             </p>
           </div>
@@ -84,7 +84,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
                       value ? (
                         projects.find((p) => p.id === value)?.name
                       ) : (
-                        <span className="text-brand-secondary">Select Project</span>
+                        <span className="text-custom-text-200">Select Project</span>
                       )
                     }
                     onChange={onChange}
@@ -99,7 +99,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         <div className="grid grid-cols-12 gap-4 sm:gap-16">
           <div className="col-span-12 sm:col-span-8">
             <h4 className="font-semibold">Sync Issues</h4>
-            <p className="text-xs text-brand-secondary">
+            <p className="text-xs text-custom-text-200">
               Set whether you want to sync the issues or not.
             </p>
           </div>
diff --git a/apps/app/components/integration/github/import-users.tsx b/apps/app/components/integration/github/import-users.tsx
index e609e88d47..e4caf349b9 100644
--- a/apps/app/components/integration/github/import-users.tsx
+++ b/apps/app/components/integration/github/import-users.tsx
@@ -26,8 +26,8 @@ export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers
     <div className="mt-6">
       <div>
         <div className="mb-2 grid grid-cols-3 gap-2 text-sm font-medium">
-          <div className="text-brand-secondary">Name</div>
-          <div className="text-brand-secondary">Import as...</div>
+          <div className="text-custom-text-200">Name</div>
+          <div className="text-custom-text-200">Import as...</div>
           <div className="text-right">
             {users.filter((u) => u.import !== false).length} users selected
           </div>
diff --git a/apps/app/components/integration/github/repo-details.tsx b/apps/app/components/integration/github/repo-details.tsx
index 2a1d74e4fb..8a9c971937 100644
--- a/apps/app/components/integration/github/repo-details.tsx
+++ b/apps/app/components/integration/github/repo-details.tsx
@@ -64,20 +64,20 @@ export const GithubRepoDetails: FC<Props> = ({
           <div className="flex items-center justify-between gap-4">
             <div>
               <div className="font-medium">Repository Details</div>
-              <div className="text-sm text-brand-secondary">Import completed. We have found:</div>
+              <div className="text-sm text-custom-text-200">Import completed. We have found:</div>
             </div>
             <div className="mt-4 flex gap-16">
               <div className="flex-shrink-0 text-center">
                 <p className="text-3xl font-bold">{repoInfo.issue_count}</p>
-                <h6 className="text-sm text-brand-secondary">Issues</h6>
+                <h6 className="text-sm text-custom-text-200">Issues</h6>
               </div>
               <div className="flex-shrink-0 text-center">
                 <p className="text-3xl font-bold">{repoInfo.labels}</p>
-                <h6 className="text-sm text-brand-secondary">Labels</h6>
+                <h6 className="text-sm text-custom-text-200">Labels</h6>
               </div>
               <div className="flex-shrink-0 text-center">
                 <p className="text-3xl font-bold">{repoInfo.collaborators.length}</p>
-                <h6 className="text-sm text-brand-secondary">Users</h6>
+                <h6 className="text-sm text-custom-text-200">Users</h6>
               </div>
             </div>
           </div>
diff --git a/apps/app/components/integration/github/root.tsx b/apps/app/components/integration/github/root.tsx
index 96ce845c44..c98c91c1bd 100644
--- a/apps/app/components/integration/github/root.tsx
+++ b/apps/app/components/integration/github/root.tsx
@@ -179,13 +179,13 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
     <form onSubmit={handleSubmit(createGithubImporterService)}>
       <div className="space-y-2">
         <Link href={`/${workspaceSlug}/settings/import-export`}>
-          <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-brand-secondary hover:text-brand-base">
+          <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
             <ArrowLeftIcon className="h-3 w-3" />
             <div>Cancel import & go back</div>
           </div>
         </Link>
 
-        <div className="space-y-4 rounded-[10px] border border-brand-base bg-brand-base p-4">
+        <div className="space-y-4 rounded-[10px] border border-custom-border-80 bg-custom-background-100 p-4">
           <div className="flex items-center gap-2">
             <div className="h-10 w-10 flex-shrink-0">
               <Image src={GithubLogo} alt="GithubLogo" />
@@ -196,12 +196,12 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
                   <div
                     className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border ${
                       index <= activeIntegrationState()
-                        ? `border-brand-accent bg-brand-accent ${
+                        ? `border-custom-primary bg-custom-primary ${
                             index === activeIntegrationState()
                               ? "border-opacity-100 bg-opacity-100"
                               : "border-opacity-80 bg-opacity-80"
                           }`
-                        : "border-brand-base"
+                        : "border-custom-border-80"
                     }`}
                   >
                     <integration.icon
@@ -215,8 +215,8 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
                       key={index}
                       className={`border-b px-7 ${
                         index <= activeIntegrationState() - 1
-                          ? `border-brand-accent`
-                          : `border-brand-base`
+                          ? `border-custom-primary`
+                          : `border-custom-border-80`
                       }`}
                     >
                       {" "}
diff --git a/apps/app/components/integration/github/select-repository.tsx b/apps/app/components/integration/github/select-repository.tsx
index 69040c2d00..9857c0088e 100644
--- a/apps/app/components/integration/github/select-repository.tsx
+++ b/apps/app/components/integration/github/select-repository.tsx
@@ -81,7 +81,7 @@ export const SelectRepository: React.FC<Props> = ({
           {userRepositories && options.length < totalCount && (
             <button
               type="button"
-              className="w-full p-1 text-center text-[0.6rem] text-brand-secondary hover:bg-brand-surface-2"
+              className="w-full p-1 text-center text-[0.6rem] text-custom-text-200 hover:bg-custom-background-80"
               onClick={() => setSize(size + 1)}
               disabled={isValidating}
             >
diff --git a/apps/app/components/integration/github/single-user-select.tsx b/apps/app/components/integration/github/single-user-select.tsx
index b94fc1dbde..01e1f23279 100644
--- a/apps/app/components/integration/github/single-user-select.tsx
+++ b/apps/app/components/integration/github/single-user-select.tsx
@@ -62,7 +62,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
   }));
 
   return (
-    <div className="grid grid-cols-3 items-center gap-2 rounded-md bg-brand-surface-2 px-2 py-3">
+    <div className="grid grid-cols-3 items-center gap-2 rounded-md bg-custom-background-80 px-2 py-3">
       <div className="flex items-center gap-2">
         <div className="relative h-8 w-8 flex-shrink-0 rounded">
           <img
diff --git a/apps/app/components/integration/guide.tsx b/apps/app/components/integration/guide.tsx
index 2db8ef0102..0a341f88a1 100644
--- a/apps/app/components/integration/guide.tsx
+++ b/apps/app/components/integration/guide.tsx
@@ -83,7 +83,7 @@ const IntegrationGuide = () => {
               {IMPORTERS_EXPORTERS_LIST.map((service) => (
                 <div
                   key={service.provider}
-                  className="rounded-[10px] border border-brand-base bg-brand-base p-4"
+                  className="rounded-[10px] border border-custom-border-80 bg-custom-background-100 p-4"
                 >
                   <div className="flex items-center gap-4 whitespace-nowrap">
                     <div className="relative h-10 w-10 flex-shrink-0">
@@ -96,7 +96,7 @@ const IntegrationGuide = () => {
                     </div>
                     <div className="w-full">
                       <h3>{service.title}</h3>
-                      <p className="text-sm text-brand-secondary">{service.description}</p>
+                      <p className="text-sm text-custom-text-200">{service.description}</p>
                     </div>
                     <div className="flex-shrink-0">
                       <Link
@@ -113,12 +113,12 @@ const IntegrationGuide = () => {
                 </div>
               ))}
             </div>
-            <div className="rounded-[10px] border border-brand-base bg-brand-base p-4">
+            <div className="rounded-[10px] border border-custom-border-80 bg-custom-background-100 p-4">
               <h3 className="mb-2 flex gap-2 text-lg font-medium">
                 Previous Imports
                 <button
                   type="button"
-                  className="flex flex-shrink-0 items-center gap-1 rounded bg-brand-surface-2 py-1 px-1.5 text-xs outline-none"
+                  className="flex flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs outline-none"
                   onClick={() => {
                     setRefreshing(true);
                     mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string)).then(() =>
@@ -133,7 +133,7 @@ const IntegrationGuide = () => {
               {importerServices ? (
                 importerServices.length > 0 ? (
                   <div className="space-y-2">
-                    <div className="divide-y divide-brand-base">
+                    <div className="divide-y divide-custom-border-80">
                       {importerServices.map((service) => (
                         <SingleImport
                           key={service.id}
@@ -145,7 +145,7 @@ const IntegrationGuide = () => {
                     </div>
                   </div>
                 ) : (
-                  <p className="py-2 text-sm text-brand-secondary">
+                  <p className="py-2 text-sm text-custom-text-200">
                     No previous imports available.
                   </p>
                 )
diff --git a/apps/app/components/integration/jira/confirm-import.tsx b/apps/app/components/integration/jira/confirm-import.tsx
index 1945bb501e..54c599151b 100644
--- a/apps/app/components/integration/jira/confirm-import.tsx
+++ b/apps/app/components/integration/jira/confirm-import.tsx
@@ -17,30 +17,30 @@ export const JiraConfirmImport: React.FC = () => {
         </div>
 
         <div className="col-span-1">
-          <p className="text-sm text-brand-secondary">Migrating</p>
+          <p className="text-sm text-custom-text-200">Migrating</p>
         </div>
         <div className="col-span-1 flex items-center justify-between">
           <div>
             <h4 className="mb-2 text-lg font-semibold">{watch("data.total_issues")}</h4>
-            <p className="text-sm text-brand-secondary">Issues</p>
+            <p className="text-sm text-custom-text-200">Issues</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{watch("data.total_states")}</h4>
-            <p className="text-sm text-brand-secondary">States</p>
+            <p className="text-sm text-custom-text-200">States</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{watch("data.total_modules")}</h4>
-            <p className="text-sm text-brand-secondary">Modules</p>
+            <p className="text-sm text-custom-text-200">Modules</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{watch("data.total_labels")}</h4>
-            <p className="text-sm text-brand-secondary">Labels</p>
+            <p className="text-sm text-custom-text-200">Labels</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">
               {watch("data.users").filter((user) => user.import).length}
             </h4>
-            <p className="text-sm text-brand-secondary">User</p>
+            <p className="text-sm text-custom-text-200">User</p>
           </div>
         </div>
       </div>
diff --git a/apps/app/components/integration/jira/give-details.tsx b/apps/app/components/integration/jira/give-details.tsx
index 6a1c5b66f2..cb358e8ef0 100644
--- a/apps/app/components/integration/jira/give-details.tsx
+++ b/apps/app/components/integration/jira/give-details.tsx
@@ -31,10 +31,10 @@ export const JiraGetImportDetail: React.FC = () => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Jira Personal Access Token</h3>
-          <p className="text-sm text-brand-secondary">
+          <p className="text-sm text-custom-text-200">
             Get to know your access token by navigating to{" "}
             <Link href="https://id.atlassian.com/manage-profile/security/api-tokens">
-              <a className="text-brand-accent underline" target="_blank" rel="noreferrer">
+              <a className="text-custom-primary underline" target="_blank" rel="noreferrer">
                 Atlassian Settings
               </a>
             </Link>
@@ -58,7 +58,7 @@ export const JiraGetImportDetail: React.FC = () => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Jira Project Key</h3>
-          <p className="text-sm text-brand-secondary">If XXX-123 is your issue, then enter XXX</p>
+          <p className="text-sm text-custom-text-200">If XXX-123 is your issue, then enter XXX</p>
         </div>
         <div className="col-span-1">
           <Input
@@ -77,7 +77,7 @@ export const JiraGetImportDetail: React.FC = () => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Jira Email Address</h3>
-          <p className="text-sm text-brand-secondary">
+          <p className="text-sm text-custom-text-200">
             Enter the Gmail account that you use in Jira account
           </p>
         </div>
@@ -99,7 +99,7 @@ export const JiraGetImportDetail: React.FC = () => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Jira Installation or Cloud Host Name</h3>
-          <p className="text-sm text-brand-secondary">Enter your companies cloud host name</p>
+          <p className="text-sm text-custom-text-200">Enter your companies cloud host name</p>
         </div>
         <div className="col-span-1">
           <Input
@@ -119,7 +119,7 @@ export const JiraGetImportDetail: React.FC = () => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Import to project</h3>
-          <p className="text-sm text-brand-secondary">
+          <p className="text-sm text-custom-text-200">
             Select which project you want to import to.
           </p>
         </div>
@@ -139,7 +139,7 @@ export const JiraGetImportDetail: React.FC = () => {
                     {value && value !== "" ? (
                       projects.find((p) => p.id === value)?.name
                     ) : (
-                      <span className="text-brand-secondary">Select a project</span>
+                      <span className="text-custom-text-200">Select a project</span>
                     )}
                   </span>
                 }
@@ -152,7 +152,7 @@ export const JiraGetImportDetail: React.FC = () => {
                     </CustomSelect.Option>
                   ))
                 ) : (
-                  <div className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-brand-secondary">
+                  <div className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200">
                     <p>You don{"'"}t have any project. Please create a project first.</p>
                   </div>
                 )}
@@ -163,7 +163,7 @@ export const JiraGetImportDetail: React.FC = () => {
                       const event = new KeyboardEvent("keydown", { key: "p" });
                       document.dispatchEvent(event);
                     }}
-                    className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-brand-secondary"
+                    className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200"
                   >
                     <PlusIcon className="h-4 w-4 text-gray-500" />
                     <span>Create new project</span>
diff --git a/apps/app/components/integration/jira/import-users.tsx b/apps/app/components/integration/jira/import-users.tsx
index 80c0c4c9bc..1135d06efd 100644
--- a/apps/app/components/integration/jira/import-users.tsx
+++ b/apps/app/components/integration/jira/import-users.tsx
@@ -51,11 +51,11 @@ export const JiraImportUsers: FC = () => {
   }));
 
   return (
-    <div className="h-full w-full space-y-10 divide-y-2 divide-brand-base overflow-y-auto">
+    <div className="h-full w-full space-y-10 divide-y-2 divide-custom-border-80 overflow-y-auto">
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Users</h3>
-          <p className="text-sm text-brand-secondary">
+          <p className="text-sm text-custom-text-200">
             Update, invite or choose not to invite assignee
           </p>
         </div>
@@ -73,8 +73,8 @@ export const JiraImportUsers: FC = () => {
       {watch("data.invite_users") && (
         <div className="pt-6">
           <div className="grid grid-cols-3 gap-3">
-            <div className="col-span-1 text-sm text-brand-secondary">Name</div>
-            <div className="col-span-1 text-sm text-brand-secondary">Import as</div>
+            <div className="col-span-1 text-sm text-custom-text-200">Name</div>
+            <div className="col-span-1 text-sm text-custom-text-200">Import as</div>
           </div>
 
           <div className="mt-5 space-y-3">
diff --git a/apps/app/components/integration/jira/jira-project-detail.tsx b/apps/app/components/integration/jira/jira-project-detail.tsx
index 2e40616384..88803727cf 100644
--- a/apps/app/components/integration/jira/jira-project-detail.tsx
+++ b/apps/app/components/integration/jira/jira-project-detail.tsx
@@ -102,12 +102,12 @@ export const JiraProjectDetail: React.FC<Props> = (props) => {
   if (error) {
     return (
       <div className="flex h-full w-full items-center justify-center">
-        <p className="text-sm text-brand-secondary">
+        <p className="text-sm text-custom-text-200">
           Something went wrong. Please{" "}
           <button
             onClick={() => setCurrentStep({ state: "import-configure" })}
             type="button"
-            className="inline text-brand-accent underline"
+            className="inline text-custom-primary underline"
           >
             go back
           </button>{" "}
@@ -122,28 +122,28 @@ export const JiraProjectDetail: React.FC<Props> = (props) => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Import Data</h3>
-          <p className="text-sm text-brand-secondary">Import Completed. We have found:</p>
+          <p className="text-sm text-custom-text-200">Import Completed. We have found:</p>
         </div>
         <div className="col-span-1 flex items-center justify-between">
           <div>
             <h4 className="mb-2 text-lg font-semibold">{projectInfo?.issues}</h4>
-            <p className="text-sm text-brand-secondary">Issues</p>
+            <p className="text-sm text-custom-text-200">Issues</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{projectInfo?.states}</h4>
-            <p className="text-sm text-brand-secondary">States</p>
+            <p className="text-sm text-custom-text-200">States</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{projectInfo?.modules}</h4>
-            <p className="text-sm text-brand-secondary">Modules</p>
+            <p className="text-sm text-custom-text-200">Modules</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{projectInfo?.labels}</h4>
-            <p className="text-sm text-brand-secondary">Labels</p>
+            <p className="text-sm text-custom-text-200">Labels</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{projectInfo?.users?.length}</h4>
-            <p className="text-sm text-brand-secondary">Users</p>
+            <p className="text-sm text-custom-text-200">Users</p>
           </div>
         </div>
       </div>
@@ -151,7 +151,7 @@ export const JiraProjectDetail: React.FC<Props> = (props) => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Import Epics</h3>
-          <p className="text-sm text-brand-secondary">Import epics as modules</p>
+          <p className="text-sm text-custom-text-200">Import epics as modules</p>
         </div>
         <div className="col-span-1">
           <Controller
diff --git a/apps/app/components/integration/jira/root.tsx b/apps/app/components/integration/jira/root.tsx
index b1098c9cba..d051d1781f 100644
--- a/apps/app/components/integration/jira/root.tsx
+++ b/apps/app/components/integration/jira/root.tsx
@@ -110,7 +110,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
   return (
     <div className="flex h-full flex-col space-y-2">
       <Link href={`/${workspaceSlug}/settings/import-export`}>
-        <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-brand-secondary hover:text-brand-base">
+        <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
           <div>
             <ArrowLeftIcon className="h-3 w-3" />
           </div>
@@ -118,7 +118,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
         </div>
       </Link>
 
-      <div className="flex h-full flex-col space-y-4 rounded-[10px] border border-brand-base bg-brand-base p-4">
+      <div className="flex h-full flex-col space-y-4 rounded-[10px] border border-custom-border-80 bg-custom-background-100 p-4">
         <div className="flex items-center gap-2">
           <div className="h-10 w-10 flex-shrink-0">
             <Image src={JiraLogo} alt="jira logo" />
@@ -135,14 +135,14 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
                     index > activeIntegrationState() + 1 ||
                     Boolean(index === activeIntegrationState() + 1 && disableTopBarAfter)
                   }
-                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-brand-base ${
+                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-custom-border-80 ${
                     index <= activeIntegrationState()
-                      ? `border-brand-accent bg-brand-accent ${
+                      ? `border-custom-primary bg-custom-primary ${
                           index === activeIntegrationState()
                             ? "border-opacity-100 bg-opacity-100"
                             : "border-opacity-80 bg-opacity-80"
                         }`
-                      : "border-brand-base"
+                      : "border-custom-border-80"
                   }`}
                 >
                   <integration.icon
@@ -156,8 +156,8 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
                     key={index}
                     className={`border-b px-7 ${
                       index <= activeIntegrationState() - 1
-                        ? `border-brand-accent`
-                        : `border-brand-base`
+                        ? `border-custom-primary`
+                        : `border-custom-border-80`
                     }`}
                   >
                     {" "}
@@ -183,7 +183,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
                 {currentStep?.state === "import-confirmation" && <JiraConfirmImport />}
               </div>
 
-              <div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-brand-base p-4 pb-0">
+              <div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-custom-border-80 p-4 pb-0">
                 {currentStep?.state !== "import-configure" && (
                   <SecondaryButton
                     onClick={() => {
diff --git a/apps/app/components/integration/single-import.tsx b/apps/app/components/integration/single-import.tsx
index fa3fd45f6e..56ee0adf80 100644
--- a/apps/app/components/integration/single-import.tsx
+++ b/apps/app/components/integration/single-import.tsx
@@ -40,7 +40,7 @@ export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelet
           {refreshing ? "Refreshing..." : service.status}
         </span>
       </h4>
-      <div className="mt-2 flex items-center gap-2 text-xs text-brand-secondary">
+      <div className="mt-2 flex items-center gap-2 text-xs text-custom-text-200">
         <span>{renderShortDateWithYearFormat(service.created_at)}</span>|
         <span>
           Imported by{" "}
diff --git a/apps/app/components/integration/single-integration-card.tsx b/apps/app/components/integration/single-integration-card.tsx
index f6ae65b127..12a682b822 100644
--- a/apps/app/components/integration/single-integration-card.tsx
+++ b/apps/app/components/integration/single-integration-card.tsx
@@ -99,7 +99,7 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
   );
 
   return (
-    <div className="flex items-center justify-between gap-2 rounded-[10px] border border-brand-base bg-brand-base p-5">
+    <div className="flex items-center justify-between gap-2 rounded-[10px] border border-custom-border-80 bg-custom-background-100 p-5">
       <div className="flex items-start gap-4">
         <div className="h-12 w-12 flex-shrink-0">
           <Image
diff --git a/apps/app/components/issues/activity.tsx b/apps/app/components/issues/activity.tsx
index e30f00b0b1..213a58e334 100644
--- a/apps/app/components/issues/activity.tsx
+++ b/apps/app/components/issues/activity.tsx
@@ -61,54 +61,54 @@ const activityDetails: {
   },
   estimate_point: {
     message: "set the estimate point to",
-    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-brand-secondary" aria-hidden="true" />,
+    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-custom-text-200" aria-hidden="true" />,
   },
   labels: {
     icon: <TagIcon height="12" width="12" color="#6b7280" />,
   },
   modules: {
     message: "set the module to",
-    icon: <RectangleGroupIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <RectangleGroupIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   state: {
     message: "set the state to",
-    icon: <Squares2X2Icon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <Squares2X2Icon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   priority: {
     message: "set the priority to",
-    icon: <ChartBarIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <ChartBarIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   name: {
     message: "set the name to",
     icon: (
-      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />
+      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />
     ),
   },
   description: {
     message: "updated the description.",
     icon: (
-      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />
+      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />
     ),
   },
   target_date: {
     message: "set the due date to",
-    icon: <CalendarDaysIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <CalendarDaysIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   parent: {
     message: "set the parent to",
-    icon: <UserIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <UserIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   estimate: {
     message: "updated the estimate",
-    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-brand-secondary" aria-hidden="true" />,
+    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-custom-text-200" aria-hidden="true" />,
   },
   link: {
     message: "updated the link",
-    icon: <LinkIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <LinkIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
   attachment: {
     message: "updated the attachment",
-    icon: <PaperClipIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: <PaperClipIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
   },
 };
 
@@ -264,7 +264,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
             activityItem.field !== "link" &&
             activityItem.field !== "estimate"
           ) {
-            value = <span className="text-brand-secondary">created this issue.</span>;
+            value = <span className="text-custom-text-200">created this issue.</span>;
           } else if (activityItem.field === "state") {
             value = activityItem.new_value ? addSpaceIfCamelCase(activityItem.new_value) : "None";
           } else if (activityItem.field === "labels") {
@@ -279,7 +279,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
             }
 
             value = (
-              <span className="relative inline-flex items-center rounded-full border border-brand-base px-2 py-0.5 text-xs">
+              <span className="relative inline-flex items-center rounded-full border border-custom-border-80 px-2 py-0.5 text-xs">
                 <span className="absolute flex flex-shrink-0 items-center justify-center">
                   <span
                     className="h-1.5 w-1.5 rounded-full"
@@ -289,7 +289,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
                     aria-hidden="true"
                   />
                 </span>
-                <span className="ml-3 font-medium text-brand-base">{name}</span>
+                <span className="ml-3 font-medium text-custom-text-100">{name}</span>
               </span>
             );
           } else if (activityItem.field === "assignees") {
@@ -334,7 +334,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
                 <div className="relative pb-1">
                   {issueActivities.length > 1 && activityItemIdx !== issueActivities.length - 1 ? (
                     <span
-                      className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-surface-2"
+                      className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-custom-background-80"
                       aria-hidden="true"
                     />
                   ) : null}
@@ -343,7 +343,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
                       <div>
                         <div className="relative px-1.5">
                           <div className="mt-1.5">
-                            <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-2 ring-white">
+                            <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-80 ring-white">
                               {activityItem.field ? (
                                 activityDetails[activityItem.field as keyof typeof activityDetails]
                                   ?.icon
@@ -368,7 +368,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
                         </div>
                       </div>
                       <div className="min-w-0 flex-1 py-3">
-                        <div className="text-xs text-brand-secondary">
+                        <div className="text-xs text-custom-text-200">
                           <span className="text-gray font-medium">
                             {activityItem.actor_detail.first_name}
                             {activityItem.actor_detail.is_bot
@@ -376,7 +376,10 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
                               : " " + activityItem.actor_detail.last_name}
                           </span>
                           <span> {action} </span>
-                          <span className="text-xs font-medium text-brand-base"> {value} </span>
+                          <span className="text-xs font-medium text-custom-text-100">
+                            {" "}
+                            {value}{" "}
+                          </span>
                           <span className="whitespace-nowrap">
                             {timeAgo(activityItem.created_at)}
                           </span>
diff --git a/apps/app/components/issues/attachment-upload.tsx b/apps/app/components/issues/attachment-upload.tsx
index 7e5184ce81..bd33c9c55e 100644
--- a/apps/app/components/issues/attachment-upload.tsx
+++ b/apps/app/components/issues/attachment-upload.tsx
@@ -85,8 +85,8 @@ export const IssueAttachmentUpload = () => {
   return (
     <div
       {...getRootProps()}
-      className={`flex items-center justify-center h-[60px] cursor-pointer border-2 border-dashed text-brand-accent bg-brand-accent/5 text-xs rounded-md px-4 ${
-        isDragActive ? "bg-brand-accent/10 border-brand-accent" : "border-brand-base"
+      className={`flex items-center justify-center h-[60px] cursor-pointer border-2 border-dashed text-custom-primary bg-custom-primary/5 text-xs rounded-md px-4 ${
+        isDragActive ? "bg-custom-primary/10 border-custom-primary" : "border-custom-border-80"
       } ${isDragReject ? "bg-red-100" : ""}`}
     >
       <input {...getInputProps()} />
diff --git a/apps/app/components/issues/attachments.tsx b/apps/app/components/issues/attachments.tsx
index 7f4be47dd0..b72bdeb21f 100644
--- a/apps/app/components/issues/attachments.tsx
+++ b/apps/app/components/issues/attachments.tsx
@@ -61,7 +61,7 @@ export const IssueAttachments = () => {
         attachments.map((file) => (
           <div
             key={file.id}
-            className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-brand-surface-2 bg-brand-base px-4 py-2 text-sm"
+            className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-80 bg-custom-background-100 px-4 py-2 text-sm"
           >
             <Link href={file.asset}>
               <a target="_blank">
@@ -82,7 +82,7 @@ export const IssueAttachments = () => {
                         } uploaded on ${renderLongDateFormat(file.updated_at)}`}
                       >
                         <span>
-                          <ExclamationIcon className="h-3 w-3 fill-current text-brand-base" />
+                          <ExclamationIcon className="h-3 w-3 fill-current text-custom-text-100" />
                         </span>
                       </Tooltip>
                     </div>
diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx
index 72f6fcae6d..731f7b12cc 100644
--- a/apps/app/components/issues/comment/comment-card.tsx
+++ b/apps/app/components/issues/comment/comment-card.tsx
@@ -72,7 +72,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
             alt={comment.actor_detail.first_name}
             height={30}
             width={30}
-            className="grid h-7 w-7 place-items-center rounded-full border-2 border-brand-base"
+            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-80"
           />
         ) : (
           <div
@@ -82,9 +82,9 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
           </div>
         )}
 
-        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-brand-surface-2 px-0.5 py-px">
+        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
           <ChatBubbleLeftEllipsisIcon
-            className="h-3.5 w-3.5 text-brand-secondary"
+            className="h-3.5 w-3.5 text-custom-text-200"
             aria-hidden="true"
           />
         </span>
@@ -95,7 +95,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-brand-secondary">
+          <p className="mt-0.5 text-xs text-custom-text-200">
             Commented {timeAgo(comment.created_at)}
           </p>
         </div>
@@ -135,7 +135,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
               value={comment.comment_html}
               editable={false}
               noBorder
-              customClassName="text-xs border border-brand-base bg-brand-base"
+              customClassName="text-xs border border-custom-border-80 bg-custom-background-100"
               ref={showEditorRef}
             />
           </div>
diff --git a/apps/app/components/issues/delete-attachment-modal.tsx b/apps/app/components/issues/delete-attachment-modal.tsx
index 85450809ad..0ea0f9684f 100644
--- a/apps/app/components/issues/delete-attachment-modal.tsx
+++ b/apps/app/components/issues/delete-attachment-modal.tsx
@@ -75,7 +75,7 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-brand-backdrop bg-opacity-75 transition-opacity" />
+            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-75 transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -89,8 +89,8 @@ export const DeleteAttachmentModal: 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-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">
+                <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                  <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                     <div className="sm:flex sm:items-start">
                       <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                         <ExclamationTriangleIcon
@@ -101,12 +101,12 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
                       <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                         <Dialog.Title
                           as="h3"
-                          className="text-lg font-medium leading-6 text-brand-base"
+                          className="text-lg font-medium leading-6 text-custom-text-100"
                         >
                           Delete Attachment
                         </Dialog.Title>
                         <div className="mt-2">
-                          <p className="text-sm text-brand-secondary">
+                          <p className="text-sm text-custom-text-200">
                             Are you sure you want to delete attachment-{" "}
                             <span className="font-bold">{getFileName(data.attributes.name)}</span>?
                             This attachment will be permanently removed. This action cannot be
@@ -116,7 +116,7 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
                       </div>
                     </div>
                   </div>
-                  <div className="flex justify-end gap-2 bg-brand-surface-1 p-4 sm:px-6">
+                  <div className="flex justify-end gap-2 bg-custom-background-90 p-4 sm:px-6">
                     <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                     <DangerButton
                       onClick={() => {
diff --git a/apps/app/components/issues/delete-issue-modal.tsx b/apps/app/components/issues/delete-issue-modal.tsx
index c4fb3b00a5..0637654df8 100644
--- a/apps/app/components/issues/delete-issue-modal.tsx
+++ b/apps/app/components/issues/delete-issue-modal.tsx
@@ -138,7 +138,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, u
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -152,7 +152,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, u
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-80 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
@@ -166,9 +166,9 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, u
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm text-brand-secondary">
+                    <p className="text-sm text-custom-text-200">
                       Are you sure you want to delete issue{" "}
-                      <span className="break-words font-medium text-brand-base">
+                      <span className="break-words font-medium text-custom-text-100">
                         {data?.project_detail.identifier}-{data?.sequence_id}
                       </span>
                       {""}? All of the data related to the issue will be permanently removed. This
diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx
index 492110a8c8..0770834faf 100644
--- a/apps/app/components/issues/description-form.tsx
+++ b/apps/app/components/issues/description-form.tsx
@@ -105,14 +105,12 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
               });
           }}
           required={true}
-          className="min-h-10 block w-full resize-none
-      overflow-hidden rounded border-none bg-transparent
-      px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-theme"
+          className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
           role="textbox"
           disabled={!isAllowed}
         />
         {characterLimit && (
-          <div className="pointer-events-none absolute bottom-0 right-0 z-[2] rounded bg-brand-surface-2 p-1 text-xs">
+          <div className="pointer-events-none absolute bottom-0 right-0 z-[2] rounded bg-custom-background-80 p-1 text-xs">
             <span
               className={`${
                 watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
@@ -166,7 +164,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
         }}
       />
       <div
-        className={`absolute -bottom-8 right-0 text-sm text-brand-secondary ${
+        className={`absolute -bottom-8 right-0 text-sm text-custom-text-200 ${
           isSubmitting ? "block" : "hidden"
         }`}
       >
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index 8bf64e6ff5..7583b6519e 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -273,14 +273,14 @@ export const IssueForm: FC<IssueFormProps> = ({
                 )}
               />
             )}
-            <h3 className="text-xl font-semibold leading-6 text-brand-base">
+            <h3 className="text-xl font-semibold leading-6 text-custom-text-100">
               {status ? "Update" : "Create"} Issue
             </h3>
           </div>
           {watch("parent") &&
             watch("parent") !== "" &&
             (fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
-              <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-2 p-2 text-xs">
+              <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-custom-background-80 p-2 text-xs">
                 <div className="flex items-center gap-2">
                   <span
                     className="block h-1.5 w-1.5 rounded-full"
@@ -289,7 +289,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                         .color,
                     }}
                   />
-                  <span className="flex-shrink-0 text-brand-secondary">
+                  <span className="flex-shrink-0 text-custom-text-200">
                     {/* {projects?.find((p) => p.id === projectId)?.identifier}- */}
                     {issues.find((i) => i.id === watch("parent"))?.sequence_id}
                   </span>
@@ -326,7 +326,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                   />
                   {mostSimilarIssue && (
                     <div className="flex items-center gap-x-2">
-                      <p className="text-sm text-brand-secondary">
+                      <p className="text-sm text-custom-text-200">
                         <Link
                           href={`/${workspaceSlug}/projects/${projectId}/issues/${mostSimilarIssue.id}`}
                         >
@@ -342,7 +342,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                       </p>
                       <button
                         type="button"
-                        className="text-sm text-brand-accent"
+                        className="text-sm text-custom-primary"
                         onClick={() => {
                           setMostSimilarIssue(undefined);
                         }}
@@ -359,7 +359,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-brand-surface-1 ${
+                        className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${
                           iAmFeelingLucky ? "cursor-wait" : ""
                         }`}
                         onClick={handleAutoGenerateDescription}
@@ -376,7 +376,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-brand-surface-1"
+                      className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
                       onClick={() => setGptAssistantModal((prevData) => !prevData)}
                     >
                       <SparklesIcon className="h-4 w-4" />
@@ -529,7 +529,7 @@ export const IssueForm: FC<IssueFormProps> = ({
             </div>
           </div>
         </div>
-        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-brand-base px-5 pt-5">
+        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-80 px-5 pt-5">
           <div
             className="flex cursor-pointer items-center gap-1"
             onClick={() => setCreateMore((prevData) => !prevData)}
diff --git a/apps/app/components/issues/gantt-chart.tsx b/apps/app/components/issues/gantt-chart.tsx
index 571583707f..533badd7d6 100644
--- a/apps/app/components/issues/gantt-chart.tsx
+++ b/apps/app/components/issues/gantt-chart.tsx
@@ -27,7 +27,7 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
         className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="text-brand-base text-sm">{data?.name}</div>
+      <div className="text-custom-text-100 text-sm">{data?.name}</div>
     </div>
   );
 
@@ -40,7 +40,7 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
           style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
         />
         <Tooltip tooltipContent={data?.name} className={`z-[999999]`}>
-          <div className="text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
+          <div className="text-custom-text-100 text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
             {data?.name}
           </div>
         </Tooltip>
@@ -50,7 +50,7 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
             className={`z-[999999]`}
           >
             <div className="flex-shrink-0 mx-2 w-[18px] h-[18px] overflow-hidden flex justify-center items-center">
-              <span className="material-symbols-rounded text-brand-secondary text-[18px]">
+              <span className="material-symbols-rounded text-custom-text-200 text-[18px]">
                 info
               </span>
             </div>
diff --git a/apps/app/components/issues/main-content.tsx b/apps/app/components/issues/main-content.tsx
index 6123556a5f..9eb351c8b5 100644
--- a/apps/app/components/issues/main-content.tsx
+++ b/apps/app/components/issues/main-content.tsx
@@ -53,9 +53,9 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges
     <>
       <div className="rounded-lg">
         {issueDetails?.parent && issueDetails.parent !== "" ? (
-          <div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-2 p-2 text-xs">
+          <div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-custom-background-80 p-2 text-xs">
             <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${issueDetails.parent}`}>
-              <a className="flex items-center gap-2 text-brand-secondary">
+              <a className="flex items-center gap-2 text-custom-text-200">
                 <span
                   className="block h-1.5 w-1.5 rounded-full"
                   style={{
@@ -85,7 +85,7 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges
                   </CustomMenu.MenuItem>
                 ))
               ) : (
-                <CustomMenu.MenuItem className="flex items-center gap-2 whitespace-nowrap p-2 text-left text-xs text-brand-secondary">
+                <CustomMenu.MenuItem className="flex items-center gap-2 whitespace-nowrap p-2 text-left text-xs text-custom-text-200">
                   No other sibling issues
                 </CustomMenu.MenuItem>
               )}
@@ -109,7 +109,7 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges
         </div>
       </div>
       <div className="space-y-5 pt-3">
-        <h3 className="text-lg text-brand-base">Comments/Activity</h3>
+        <h3 className="text-lg text-custom-text-100">Comments/Activity</h3>
         <IssueActivitySection issueId={issueId as string} user={user} />
         <AddComment issueId={issueId as string} user={user} />
       </div>
diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx
index b83bbc480c..9fd459908b 100644
--- a/apps/app/components/issues/modal.tsx
+++ b/apps/app/components/issues/modal.tsx
@@ -333,7 +333,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -347,7 +347,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-80 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <IssueForm
                   issues={issues ?? []}
                   handleFormSubmit={handleFormSubmit}
diff --git a/apps/app/components/issues/my-issues-list-item.tsx b/apps/app/components/issues/my-issues-list-item.tsx
index 790570cce1..7577601de5 100644
--- a/apps/app/components/issues/my-issues-list-item.tsx
+++ b/apps/app/components/issues/my-issues-list-item.tsx
@@ -87,7 +87,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
   const isNotAllowed = false;
 
   return (
-    <div className="border-b border-brand-base bg-brand-base px-4 py-2.5 last:border-b-0">
+    <div className="border-b border-custom-border-80 bg-custom-background-100 px-4 py-2.5 last:border-b-0">
       <div key={issue.id} className="flex items-center justify-between gap-2">
         <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
           <a className="group relative flex items-center gap-2">
@@ -96,13 +96,13 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
                 tooltipHeading="Issue ID"
                 tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
               >
-                <span className="flex-shrink-0 text-xs text-brand-secondary">
+                <span className="flex-shrink-0 text-xs text-custom-text-200">
                   {issue.project_detail?.identifier}-{issue.sequence_id}
                 </span>
               </Tooltip>
             )}
             <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-              <span className="text-[0.825rem] text-brand-base">
+              <span className="text-[0.825rem] text-custom-text-100">
                 {truncateText(issue.name, 50)}
               </span>
             </Tooltip>
@@ -139,7 +139,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
               {issue.label_details.map((label) => (
                 <span
                   key={label.id}
-                  className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary"
+                  className="group flex items-center gap-1 rounded-2xl border border-custom-border-80 px-2 py-0.5 text-xs text-custom-text-200"
                 >
                   <span
                     className="h-1.5 w-1.5 rounded-full"
@@ -155,7 +155,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
             ""
           )}
           {properties.assignee && (
-            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-80 px-2 py-1 text-xs shadow-sm">
               <Tooltip
                 position="top-right"
                 tooltipHeading="Assignees"
@@ -176,9 +176,9 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
             </div>
           )}
           {properties.sub_issue_count && (
-            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-80 px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
-                <div className="flex items-center gap-1 text-brand-secondary">
+                <div className="flex items-center gap-1 text-custom-text-200">
                   <LayerDiagonalIcon className="h-3.5 w-3.5" />
                   {issue.sub_issues_count}
                 </div>
@@ -186,20 +186,20 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
             </div>
           )}
           {properties.link && (
-            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-80 px-2 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
-                <div className="flex items-center gap-1 text-brand-secondary">
-                  <LinkIcon className="h-3.5 w-3.5 text-brand-secondary" />
+                <div className="flex items-center gap-1 text-custom-text-200">
+                  <LinkIcon className="h-3.5 w-3.5 text-custom-text-200" />
                   {issue.link_count}
                 </div>
               </Tooltip>
             </div>
           )}
           {properties.attachment_count && (
-            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-custom-border-80 px-2 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
-                <div className="flex items-center gap-1 text-brand-secondary">
-                  <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-brand-secondary" />
+                <div className="flex items-center gap-1 text-custom-text-200">
+                  <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-custom-text-200" />
                   {issue.attachment_count}
                 </div>
               </Tooltip>
diff --git a/apps/app/components/issues/parent-issues-list-modal.tsx b/apps/app/components/issues/parent-issues-list-modal.tsx
index b93c07d3c2..0db1dfdc6f 100644
--- a/apps/app/components/issues/parent-issues-list-modal.tsx
+++ b/apps/app/components/issues/parent-issues-list-modal.tsx
@@ -95,7 +95,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
@@ -108,15 +108,15 @@ export const ParentIssuesListModal: React.FC<Props> = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-80 bg-custom-background-100 shadow-2xl transition-all">
                 <Combobox value={value} onChange={onChange}>
                   <div className="relative m-1">
                     <MagnifyingGlassIcon
-                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
+                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
                     <Combobox.Input
-                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
                       placeholder="Type to search..."
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
@@ -126,9 +126,9 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                   {customDisplay && <div className="p-2">{customDisplay}</div>}
                   <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto mt-2">
                     {debouncedSearchTerm !== "" && (
-                      <h5 className="text-[0.825rem] text-brand-secondary mx-2">
+                      <h5 className="text-[0.825rem] text-custom-text-200 mx-2">
                         Search results for{" "}
-                        <span className="text-brand-base">
+                        <span className="text-custom-text-100">
                           {'"'}
                           {debouncedSearchTerm}
                           {'"'}
@@ -143,9 +143,9 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                       debouncedSearchTerm !== "" && (
                         <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
                           <LayerDiagonalIcon height="52" width="52" />
-                          <h3 className="text-brand-secondary">
+                          <h3 className="text-custom-text-200">
                             No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-brand-surface-2 px-2 py-1 text-sm">
+                            <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">
                               C
                             </pre>
                             .
@@ -167,9 +167,9 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                             key={issue.id}
                             value={issue.id}
                             className={({ active, selected }) =>
-                              `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
-                                active ? "bg-brand-surface-2 text-brand-base" : ""
-                              } ${selected ? "text-brand-base" : ""}`
+                              `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
+                                active ? "bg-custom-background-80 text-custom-text-100" : ""
+                              } ${selected ? "text-custom-text-100" : ""}`
                             }
                             onClick={handleClose}
                           >
diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx
index 2e1844a69c..6805c931ec 100644
--- a/apps/app/components/issues/select/assignee.tsx
+++ b/apps/app/components/issues/select/assignee.tsx
@@ -55,15 +55,15 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
       onChange={onChange}
       options={options}
       label={
-        <div className="flex items-center gap-2 text-brand-secondary">
+        <div className="flex items-center gap-2 text-custom-text-200">
           {value && value.length > 0 && Array.isArray(value) ? (
             <div className="flex items-center justify-center gap-2">
               <AssigneesList userIds={value} length={3} showLength={true} />
             </div>
           ) : (
             <div className="flex items-center justify-center gap-2">
-              <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
-              <span className="text-brand-secondary">Assignee</span>
+              <UserGroupIcon className="h-4 w-4 text-custom-text-200" />
+              <span className="text-custom-text-200">Assignee</span>
             </div>
           )}
         </div>
diff --git a/apps/app/components/issues/select/date.tsx b/apps/app/components/issues/select/date.tsx
index 26288e11bf..598c9ff581 100644
--- a/apps/app/components/issues/select/date.tsx
+++ b/apps/app/components/issues/select/date.tsx
@@ -16,11 +16,11 @@ export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
   <Popover className="relative flex items-center justify-center  rounded-lg">
     {({ open }) => (
       <>
-        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200">
-          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-brand-secondary">
+        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-80 text-xs shadow-sm duration-200">
+          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200">
             {value ? (
               <>
-                <span className="text-brand-base">{renderShortDateWithYearFormat(value)}</span>
+                <span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
                 <button onClick={() => onChange(null)}>
                   <XMarkIcon className="h-3 w-3" />
                 </button>
diff --git a/apps/app/components/issues/select/estimate.tsx b/apps/app/components/issues/select/estimate.tsx
index 18204295b7..0d910013b4 100644
--- a/apps/app/components/issues/select/estimate.tsx
+++ b/apps/app/components/issues/select/estimate.tsx
@@ -22,8 +22,12 @@ export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
       value={value}
       label={
         <div className="flex items-center gap-2 text-xs">
-          <PlayIcon className={`h-3.5 w-3.5 -rotate-90 ${value !== null ? "text-brand-base" : "text-brand-secondary"}`} />
-          <span className={value !== null ? "text-brand-base" : "text-brand-secondary"}>
+          <PlayIcon
+            className={`h-3.5 w-3.5 -rotate-90 ${
+              value !== null ? "text-custom-text-100" : "text-custom-text-200"
+            }`}
+          />
+          <span className={value !== null ? "text-custom-text-100" : "text-custom-text-200"}>
             {estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate"}
           </span>
         </div>
diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx
index e99eecc160..2fec371177 100644
--- a/apps/app/components/issues/select/label.tsx
+++ b/apps/app/components/issues/select/label.tsx
@@ -59,7 +59,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
     >
       {({ open }: any) => (
         <>
-          <Combobox.Button className="flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200 hover:bg-brand-surface-2">
+          <Combobox.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-80 text-xs shadow-sm duration-200 hover:bg-custom-background-80">
             {value && value.length > 0 ? (
               <span className="flex items-center justify-center gap-2 px-3 py-1 text-xs">
                 <IssueLabelsList
@@ -70,8 +70,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
               </span>
             ) : (
               <span className="flex items-center justify-center gap-2 px-2.5 py-1 text-xs">
-                <TagIcon className="h-3.5 w-3.5 text-brand-secondary" />
-                <span className=" text-brand-secondary">Label</span>
+                <TagIcon className="h-3.5 w-3.5 text-custom-text-200" />
+                <span className=" text-custom-text-200">Label</span>
               </span>
             )}
           </Combobox.Button>
@@ -88,12 +88,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-brand-surface-1 px-2 py-2 text-xs shadow-md focus:outline-none`}
+                bg-custom-background-90 px-2 py-2 text-xs shadow-md focus:outline-none`}
             >
-              <div className="flex w-full items-center justify-start rounded-sm  border-[0.6px] border-brand-base bg-brand-surface-1 px-2">
-                <MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" />
+              <div className="flex w-full items-center justify-start rounded-sm  border-[0.6px] border-custom-border-80 bg-custom-background-90 px-2">
+                <MagnifyingGlassIcon className="h-3 w-3 text-custom-text-200" />
                 <Combobox.Input
-                  className="w-full bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
+                  className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
                   onChange={(event) => setQuery(event.target.value)}
                   placeholder="Search for label..."
                   displayValue={(assigned: any) => assigned?.name}
@@ -112,8 +112,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                               key={label.id}
                               className={({ active }) =>
                                 `${
-                                  active ? "bg-brand-surface-2" : ""
-                                } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-brand-secondary`
+                                  active ? "bg-custom-background-80" : ""
+                                } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
                               }
                               value={label.id}
                             >
@@ -141,8 +141,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                           );
                       } else
                         return (
-                          <div className="border-y border-brand-base">
-                            <div className="flex select-none items-center gap-2 truncate p-2 text-brand-base">
+                          <div className="border-y border-custom-border-80">
+                            <div className="flex select-none items-center gap-2 truncate p-2 text-custom-text-100">
                               <RectangleGroupIcon className="h-3 w-3" /> {label.name}
                             </div>
                             <div>
@@ -151,8 +151,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                                   key={child.id}
                                   className={({ active }) =>
                                     `${
-                                      active ? "bg-brand-surface-2" : ""
-                                    } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-brand-secondary`
+                                      active ? "bg-custom-background-80" : ""
+                                    } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
                                   }
                                   value={child.id}
                                 >
@@ -183,17 +183,17 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                         );
                     })
                   ) : (
-                    <p className="px-2 text-xs text-brand-secondary">No labels found</p>
+                    <p className="px-2 text-xs text-custom-text-200">No labels found</p>
                   )
                 ) : (
-                  <p className="px-2 text-xs text-brand-secondary">Loading...</p>
+                  <p className="px-2 text-xs text-custom-text-200">Loading...</p>
                 )}
                 <button
                   type="button"
-                  className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
+                  className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-custom-background-80"
                   onClick={() => setIsOpen(true)}
                 >
-                  <span className="flex items-center justify-start gap-1 text-brand-secondary">
+                  <span className="flex items-center justify-start gap-1 text-custom-text-200">
                     <PlusIcon className="h-4 w-4" aria-hidden="true" />
                     <span>Create New Label</span>
                   </span>
diff --git a/apps/app/components/issues/select/priority.tsx b/apps/app/components/issues/select/priority.tsx
index 7404ac5a0a..b734e6a908 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-brand-secondary"}`)}
+          {getPriorityIcon(value, `text-xs ${value ? "" : "text-custom-text-200"}`)}
         </span>
-        <span className={`${value ? "" : "text-brand-secondary"} capitalize`}>
+        <span className={`${value ? "" : "text-custom-text-200"} capitalize`}>
           {value ?? "Priority"}
         </span>
       </div>
diff --git a/apps/app/components/issues/select/project.tsx b/apps/app/components/issues/select/project.tsx
index 09ed5225c4..12ee0a50cd 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-brand-secondary">Loading...</div>
+        <div className="px-2 text-sm text-custom-text-200">Loading...</div>
       )}
     </CustomSelect>
   );
diff --git a/apps/app/components/issues/select/state.tsx b/apps/app/components/issues/select/state.tsx
index fa4807815d..99c4140b20 100644
--- a/apps/app/components/issues/select/state.tsx
+++ b/apps/app/components/issues/select/state.tsx
@@ -62,17 +62,17 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
           ) : currentDefaultState ? (
             getStateGroupIcon(currentDefaultState.group, "16", "16", currentDefaultState.color)
           ) : (
-            <Squares2X2Icon className="h-3.5 w-3.5 text-brand-secondary" />
+            <Squares2X2Icon className="h-3.5 w-3.5 text-custom-text-200" />
           )}
           {selectedOption?.name
             ? selectedOption.name
-            : currentDefaultState?.name ?? <span className="text-brand-secondary">State</span>}
+            : currentDefaultState?.name ?? <span className="text-custom-text-200">State</span>}
         </div>
       }
       footerOption={
         <button
           type="button"
-          className="flex w-full select-none items-center gap-2 rounded px-1 py-1.5 text-xs text-brand-secondary hover:bg-brand-surface-2"
+          className="flex w-full select-none items-center gap-2 rounded px-1 py-1.5 text-xs text-custom-text-200 hover:bg-custom-background-80"
           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 6fcd04eb8f..93e6d37d56 100644
--- a/apps/app/components/issues/sidebar-select/assignee.tsx
+++ b/apps/app/components/issues/sidebar-select/assignee.tsx
@@ -57,7 +57,7 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, userAu
 
   return (
     <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
         <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
         <p>Assignees</p>
       </div>
@@ -65,11 +65,11 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, userAu
         <CustomSearchSelect
           value={value}
           label={
-            <div className="flex items-center gap-2 text-brand-secondary">
+            <div className="flex items-center gap-2 text-custom-text-200">
               {value && value.length > 0 && Array.isArray(value) ? (
                 <div className="-my-0.5 flex items-center justify-center gap-2">
                   <AssigneesList userIds={value} length={3} showLength={false} />
-                  <span className="text-brand-base">{value.length} Assignees</span>
+                  <span className="text-custom-text-100">{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 de8985792b..b26763a889 100644
--- a/apps/app/components/issues/sidebar-select/blocked.tsx
+++ b/apps/app/components/issues/sidebar-select/blocked.tsx
@@ -80,7 +80,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
         handleOnSubmit={onSubmit}
       />
       <div className="flex flex-wrap items-start py-2">
-        <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+        <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
           <BlockedIcon height={16} width={16} />
           <p>Blocked by</p>
         </div>
@@ -90,7 +90,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
               ? watch("blocked_issues").map((issue) => (
                   <div
                     key={issue.blocked_issue_detail?.id}
-                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20"
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-80 px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20"
                   >
                     <Link
                       href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.blocked_issue_detail?.id}`}
@@ -122,9 +122,9 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
           </div>
           <button
             type="button"
-            className={`flex w-full text-brand-secondary ${
-              isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
-            } items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
+            className={`flex w-full text-custom-text-200 ${
+              isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+            } items-center justify-between gap-1 rounded-md border border-custom-border-80 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
             onClick={() => setIsBlockedModalOpen(true)}
             disabled={isNotAllowed}
           >
diff --git a/apps/app/components/issues/sidebar-select/blocker.tsx b/apps/app/components/issues/sidebar-select/blocker.tsx
index 40f1eb10fc..d3ee5a61e3 100644
--- a/apps/app/components/issues/sidebar-select/blocker.tsx
+++ b/apps/app/components/issues/sidebar-select/blocker.tsx
@@ -80,7 +80,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
         handleOnSubmit={onSubmit}
       />
       <div className="flex flex-wrap items-start py-2">
-        <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+        <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
           <BlockerIcon height={16} width={16} />
           <p>Blocking</p>
         </div>
@@ -90,7 +90,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
               ? watch("blocker_issues").map((issue) => (
                   <div
                     key={issue.blocker_issue_detail?.id}
-                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-80 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
                   >
                     <Link
                       href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.blocker_issue_detail?.id}`}
@@ -124,9 +124,9 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
           </div>
           <button
             type="button"
-            className={`flex w-full text-brand-secondary ${
-              isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
-            } items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
+            className={`flex w-full text-custom-text-200 ${
+              isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+            } items-center justify-between gap-1 rounded-md border border-custom-border-80 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
             onClick={() => setIsBlockerModalOpen(true)}
             disabled={isNotAllowed}
           >
diff --git a/apps/app/components/issues/sidebar-select/cycle.tsx b/apps/app/components/issues/sidebar-select/cycle.tsx
index 0d8beaab81..4ada12672b 100644
--- a/apps/app/components/issues/sidebar-select/cycle.tsx
+++ b/apps/app/components/issues/sidebar-select/cycle.tsx
@@ -65,7 +65,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
 
   return (
     <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
         <ContrastIcon className="h-4 w-4 flex-shrink-0" />
         <p>Cycle</p>
       </div>
@@ -77,7 +77,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
               tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : "No cycle"}`}
             >
               <span className="w-full max-w-[125px] truncate text-left sm:block">
-                <span className={`${issueCycle ? "text-brand-base" : "text-brand-secondary"}`}>
+                <span className={`${issueCycle ? "text-custom-text-100" : "text-custom-text-200"}`}>
                   {issueCycle ? truncateText(issueCycle.cycle_detail.name, 15) : "No cycle"}
                 </span>
               </span>
diff --git a/apps/app/components/issues/sidebar-select/estimate.tsx b/apps/app/components/issues/sidebar-select/estimate.tsx
index cfe4bdf75b..e1d40d49c7 100644
--- a/apps/app/components/issues/sidebar-select/estimate.tsx
+++ b/apps/app/components/issues/sidebar-select/estimate.tsx
@@ -24,7 +24,7 @@ export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, userAu
 
   return (
     <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
         <PlayIcon className="h-4 w-4 flex-shrink-0 -rotate-90" />
         <p>Estimate</p>
       </div>
@@ -35,11 +35,11 @@ export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, userAu
             <div className="flex items-center gap-2 text-xs">
               <PlayIcon
                 className={`h-4 w-4 -rotate-90 ${
-                  value !== null ? "text-brand-base" : "text-brand-secondary"
+                  value !== null ? "text-custom-text-100" : "text-custom-text-200"
                 }`}
               />
               {estimatePoints?.find((e) => e.key === value)?.value ?? (
-                <span className="text-brand-secondary">No estimates</span>
+                <span className="text-custom-text-200">No estimates</span>
               )}
             </div>
           }
diff --git a/apps/app/components/issues/sidebar-select/module.tsx b/apps/app/components/issues/sidebar-select/module.tsx
index 7f08bc92cf..b64a8cb2b9 100644
--- a/apps/app/components/issues/sidebar-select/module.tsx
+++ b/apps/app/components/issues/sidebar-select/module.tsx
@@ -59,7 +59,7 @@ export const SidebarModuleSelect: React.FC<Props> = ({
 
   return (
     <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
         <RectangleGroupIcon className="h-4 w-4 flex-shrink-0" />
         <p>Module</p>
       </div>
@@ -73,7 +73,9 @@ export const SidebarModuleSelect: React.FC<Props> = ({
               }`}
             >
               <span className="w-full max-w-[125px] truncate text-left sm:block">
-                <span className={`${issueModule ? "text-brand-base" : "text-brand-secondary"}`}>
+                <span
+                  className={`${issueModule ? "text-custom-text-100" : "text-custom-text-200"}`}
+                >
                   {truncateText(
                     `${modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}`,
                     15
diff --git a/apps/app/components/issues/sidebar-select/parent.tsx b/apps/app/components/issues/sidebar-select/parent.tsx
index 9d183d2627..5227fe9f0c 100644
--- a/apps/app/components/issues/sidebar-select/parent.tsx
+++ b/apps/app/components/issues/sidebar-select/parent.tsx
@@ -50,7 +50,7 @@ export const SidebarParentSelect: React.FC<Props> = ({
 
   return (
     <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
         <UserIcon className="h-4 w-4 flex-shrink-0" />
         <p>Parent</p>
       </div>
@@ -75,8 +75,8 @@ export const SidebarParentSelect: React.FC<Props> = ({
         <button
           type="button"
           className={`flex w-full ${
-            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
-          } items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
+            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+          } items-center justify-between gap-1 rounded-md border border-custom-border-80 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
           onClick={() => setIsParentModalOpen(true)}
           disabled={isNotAllowed}
         >
@@ -85,7 +85,7 @@ export const SidebarParentSelect: React.FC<Props> = ({
               issues?.find((i) => i.id === watch("parent"))?.sequence_id
             }`
           ) : (
-            <span className="text-brand-secondary">Select issue</span>
+            <span className="text-custom-text-200">Select issue</span>
           )}
         </button>
       </div>
diff --git a/apps/app/components/issues/sidebar-select/priority.tsx b/apps/app/components/issues/sidebar-select/priority.tsx
index 70a23090cf..9f3631f7c0 100644
--- a/apps/app/components/issues/sidebar-select/priority.tsx
+++ b/apps/app/components/issues/sidebar-select/priority.tsx
@@ -21,7 +21,7 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, userAu
 
   return (
     <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
         <ChartBarIcon className="h-4 w-4 flex-shrink-0" />
         <p>Priority</p>
       </div>
@@ -29,10 +29,10 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, userAu
         <CustomSelect
           label={
             <div className="flex items-center gap-2 text-left capitalize">
-              <span className={`${value ? "text-brand-base" : "text-brand-secondary"}`}>
+              <span className={`${value ? "text-custom-text-100" : "text-custom-text-200"}`}>
                 {getPriorityIcon(value ?? "None", "text-sm")}
               </span>
-              <span className={`${value ? "text-brand-base" : "text-brand-secondary"}`}>
+              <span className={`${value ? "text-custom-text-100" : "text-custom-text-200"}`}>
                 {value ?? "None"}
               </span>
             </div>
diff --git a/apps/app/components/issues/sidebar-select/state.tsx b/apps/app/components/issues/sidebar-select/state.tsx
index 02d1dd5cb3..518e95c81e 100644
--- a/apps/app/components/issues/sidebar-select/state.tsx
+++ b/apps/app/components/issues/sidebar-select/state.tsx
@@ -43,7 +43,7 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, userAuth
 
   return (
     <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
         <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
         <p>State</p>
       </div>
@@ -51,7 +51,7 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, userAuth
         <CustomSelect
           label={
             selectedState ? (
-              <div className="flex items-center gap-2 text-left text-brand-base">
+              <div className="flex items-center gap-2 text-left text-custom-text-100">
                 {getStateGroupIcon(
                   selectedState?.group ?? "backlog",
                   "16",
@@ -61,7 +61,7 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, userAuth
                 {addSpaceIfCamelCase(selectedState?.name ?? "")}
               </div>
             ) : inboxIssueId ? (
-              <div className="flex items-center gap-2 text-left text-brand-base">
+              <div className="flex items-center gap-2 text-left text-custom-text-100">
                 {getStateGroupIcon("backlog", "16", "16", "#ff7700")}
                 Triage
               </div>
diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
index 6f231871b1..e7a54d5c1f 100644
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -281,7 +281,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
         data={issueDetail ?? null}
         user={user}
       />
-      <div className="sticky top-5 w-full divide-y-2 divide-brand-base">
+      <div className="sticky top-5 w-full divide-y-2 divide-custom-border-80">
         <div className="flex items-center justify-between pb-3">
           <h4 className="text-sm font-medium">
             {issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
@@ -290,7 +290,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
             {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
               <button
                 type="button"
-                className="rounded-md border border-brand-base p-2 shadow-sm duration-300 hover:bg-brand-surface-1 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent"
+                className="rounded-md border border-custom-border-80 p-2 shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary"
                 onClick={handleCopyText}
               >
                 <LinkIcon className="h-3.5 w-3.5" />
@@ -307,7 +307,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
             )}
           </div>
         </div>
-        <div className="divide-y-2 divide-brand-base">
+        <div className="divide-y-2 divide-custom-border-80">
           {showFirstSection && (
             <div className="py-1">
               {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
@@ -374,15 +374,15 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                     issueDetail?.parent_detail ? (
                       <button
                         type="button"
-                        className="flex items-center gap-2 rounded bg-brand-surface-2 px-3 py-2 text-xs"
+                        className="flex items-center gap-2 rounded bg-custom-background-80 px-3 py-2 text-xs"
                         onClick={() => submitChanges({ parent: null })}
                       >
-                        <span className="text-brand-secondary">Selected:</span>{" "}
+                        <span className="text-custom-text-200">Selected:</span>{" "}
                         {issueDetail.parent_detail?.name}
                         <XMarkIcon className="h-3 w-3" />
                       </button>
                     ) : (
-                      <div className="inline-block rounded bg-brand-surface-1 px-3 py-2 text-xs text-brand-secondary">
+                      <div className="inline-block rounded bg-custom-background-90 px-3 py-2 text-xs text-custom-text-200">
                         No parent selected
                       </div>
                     )
@@ -409,7 +409,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
               )}
               {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
                 <div className="flex flex-wrap items-center py-2">
-                  <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
+                  <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
                     <CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
                     <p>Due date</p>
                   </div>
@@ -426,7 +426,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                               target_date: val,
                             })
                           }
-                          className="bg-brand-surface-1"
+                          className="bg-custom-background-90"
                           disabled={isNotAllowed}
                         />
                       )}
@@ -458,7 +458,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
         {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
           <div className="space-y-3 py-3">
             <div className="flex items-start justify-between">
-              <div className="flex basis-1/2 items-center gap-x-2 text-sm text-brand-secondary">
+              <div className="flex basis-1/2 items-center gap-x-2 text-sm text-custom-text-200">
                 <TagIcon className="h-4 w-4" />
                 <p>Label</p>
               </div>
@@ -471,7 +471,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                       return (
                         <span
                           key={label.id}
-                          className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20"
+                          className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-80 px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20"
                           onClick={() => {
                             const updatedLabels = watchIssue("labels_list")?.filter(
                               (l) => l !== labelId
@@ -511,8 +511,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                               className={`flex ${
                                 isNotAllowed
                                   ? "cursor-not-allowed"
-                                  : "cursor-pointer hover:bg-brand-surface-1"
-                              } items-center gap-2 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary`}
+                                  : "cursor-pointer hover:bg-custom-background-90"
+                              } items-center gap-2 rounded-2xl border border-custom-border-80 px-2 py-0.5 text-xs text-custom-text-200`}
                             >
                               Select Label
                             </Listbox.Button>
@@ -524,7 +524,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-brand-surface-2 py-1 text-xs shadow-lg border border-brand-base focus:outline-none">
+                              <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-custom-background-80 py-1 text-xs shadow-lg border border-custom-border-80 focus:outline-none">
                                 <div className="py-1">
                                   {issueLabels ? (
                                     issueLabels.length > 0 ? (
@@ -540,9 +540,11 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                                 key={label.id}
                                                 className={({ active, selected }) =>
                                                   `${
-                                                    active || selected ? "bg-brand-surface-1" : ""
+                                                    active || selected
+                                                      ? "bg-custom-background-90"
+                                                      : ""
                                                   } ${
-                                                    selected ? "" : "text-brand-secondary"
+                                                    selected ? "" : "text-custom-text-200"
                                                   } flex cursor-pointer select-none items-center gap-2 truncate p-2`
                                                 }
                                                 value={label.id}
@@ -561,8 +563,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                             );
                                         } else
                                           return (
-                                            <div className="border-y border-brand-base bg-brand-surface-1">
-                                              <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-brand-base">
+                                            <div className="border-y border-custom-border-80 bg-custom-background-90">
+                                              <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-custom-text-100">
                                                 <RectangleGroupIcon className="h-3 w-3" />
                                                 {label.name}
                                               </div>
@@ -572,9 +574,11 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                                     key={child.id}
                                                     className={({ active, selected }) =>
                                                       `${
-                                                        active || selected ? "bg-brand-base" : ""
+                                                        active || selected
+                                                          ? "bg-custom-background-100"
+                                                          : ""
                                                       } ${
-                                                        selected ? "" : "text-brand-secondary"
+                                                        selected ? "" : "text-custom-text-200"
                                                       } flex cursor-pointer select-none items-center gap-2 truncate p-2`
                                                     }
                                                     value={child.id}
@@ -612,8 +616,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                       className={`flex ${
                         isNotAllowed
                           ? "cursor-not-allowed"
-                          : "cursor-pointer hover:bg-brand-surface-1"
-                      } items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary`}
+                          : "cursor-pointer hover:bg-custom-background-90"
+                      } items-center gap-1 rounded-2xl border border-custom-border-80 px-2 py-0.5 text-xs text-custom-text-200`}
                       onClick={() => setCreateLabelForm((prevData) => !prevData)}
                     >
                       {createLabelForm ? (
@@ -637,7 +641,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                     {({ open }) => (
                       <>
                         <Popover.Button
-                          className={`flex items-center gap-1 rounded-md bg-brand-surface-2 p-1 outline-none focus:ring-2 focus:ring-brand-accent`}
+                          className={`flex items-center gap-1 rounded-md bg-custom-background-80 p-1 outline-none focus:ring-2 focus:ring-custom-primary`}
                         >
                           {watch("color") && watch("color") !== "" && (
                             <span
@@ -711,7 +715,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-brand-surface-1"
+                  className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90"
                   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 3558c8d742..06126d7109 100644
--- a/apps/app/components/issues/sub-issues-list.tsx
+++ b/apps/app/components/issues/sub-issues-list.tsx
@@ -203,16 +203,16 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user }) => {
             <>
               <div className="flex items-center justify-between">
                 <div className="flex items-center justify-start gap-3">
-                  <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-brand-surface-1">
+                  <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-custom-background-90">
                     <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
                     Sub-issues{" "}
-                    <span className="ml-1 text-brand-secondary">
+                    <span className="ml-1 text-custom-text-200">
                       {subIssuesResponse.sub_issues.length}
                     </span>
                   </Disclosure.Button>
                   {subIssuesResponse.state_distribution && (
-                    <div className="flex w-60 items-center gap-2 text-brand-base">
-                      <div className="bar relative h-1.5 w-full rounded bg-brand-surface-2">
+                    <div className="flex w-60 items-center gap-2 text-custom-text-100">
+                      <div className="bar relative h-1.5 w-full rounded bg-custom-background-80">
                         <div
                           className="absolute top-0 left-0 h-1.5 rounded bg-green-500 duration-300"
                           style={{
@@ -242,7 +242,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user }) => {
                   <div className="flex items-center">
                     <button
                       type="button"
-                      className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-brand-surface-1"
+                      className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-custom-background-90"
                       onClick={handleCreateIssueModal}
                     >
                       <PlusIcon className="h-3 w-3" />
@@ -271,7 +271,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user }) => {
                       key={issue.id}
                       href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
                     >
-                      <a className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-brand-base">
+                      <a className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-custom-background-100">
                         <div className="flex items-center gap-2 rounded text-xs">
                           <span
                             className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
@@ -279,7 +279,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user }) => {
                               backgroundColor: issue.state_detail.color,
                             }}
                           />
-                          <span className="flex-shrink-0 text-brand-secondary">
+                          <span className="flex-shrink-0 text-custom-text-200">
                             {issue.project_detail.identifier}-{issue.sequence_id}
                           </span>
                           <span className="max-w-sm break-words font-medium">{issue.name}</span>
@@ -295,7 +295,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user }) => {
                               handleSubIssueRemove(issue.id);
                             }}
                           >
-                            <XMarkIcon className="h-4 w-4 text-brand-secondary hover:text-brand-base" />
+                            <XMarkIcon className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
                           </button>
                         )}
                       </a>
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
index cba1db1e78..c4bf7c16ca 100644
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/apps/app/components/issues/view-select/assignee.tsx
@@ -84,7 +84,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
       <div
         className={`flex ${
           isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-        } items-center gap-2 text-brand-secondary`}
+        } items-center gap-2 text-custom-text-200`}
       >
         {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
           <div className="-my-0.5 flex items-center justify-center gap-2">
@@ -92,7 +92,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
           </div>
         ) : (
           <div className="flex items-center justify-center gap-2">
-            <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
+            <UserGroupIcon className="h-4 w-4 text-custom-text-200" />
           </div>
         )}
       </div>
diff --git a/apps/app/components/issues/view-select/estimate.tsx b/apps/app/components/issues/view-select/estimate.tsx
index d330a5f58d..bef060e772 100644
--- a/apps/app/components/issues/view-select/estimate.tsx
+++ b/apps/app/components/issues/view-select/estimate.tsx
@@ -43,7 +43,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
 
   const estimateLabels = (
     <Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue} position={tooltipPosition}>
-      <div className="flex items-center gap-1 text-brand-secondary">
+      <div className="flex items-center gap-1 text-custom-text-200">
         <PlayIcon className="h-3.5 w-3.5 -rotate-90" />
         {estimateValue ?? "None"}
       </div>
diff --git a/apps/app/components/issues/view-select/label.tsx b/apps/app/components/issues/view-select/label.tsx
index b82b02a0f9..13f2ef1911 100644
--- a/apps/app/components/issues/view-select/label.tsx
+++ b/apps/app/components/issues/view-select/label.tsx
@@ -79,14 +79,14 @@ export const ViewLabelSelect: React.FC<Props> = ({
       <div
         className={`flex ${
           isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-        } items-center gap-2 text-brand-secondary`}
+        } items-center gap-2 text-custom-text-200`}
       >
         {issue.label_details.length > 0 ? (
           <>
             {issue.label_details.slice(0, 4).map((label, 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 group-hover:bg-brand-surface-2 border-brand-base
+                  className={`h-4 w-4 flex-shrink-0 rounded-full border group-hover:bg-custom-background-80 border-custom-border-80
                           `}
                   style={{
                     backgroundColor: label?.color && label.color !== "" ? label.color : "#000000",
@@ -98,7 +98,7 @@ export const ViewLabelSelect: React.FC<Props> = ({
           </>
         ) : (
           <>
-            <TagIcon className="h-3.5 w-3.5 text-brand-secondary" />
+            <TagIcon className="h-3.5 w-3.5 text-custom-text-200" />
           </>
         )}
       </div>
@@ -108,17 +108,17 @@ export const ViewLabelSelect: React.FC<Props> = ({
   const footerOption = (
     <button
       type="button"
-      className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
+      className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-custom-background-80"
       onClick={() => setLabelModal(true)}
     >
-      <span className="flex items-center justify-start gap-1 text-brand-secondary">
+      <span className="flex items-center justify-start gap-1 text-custom-text-200">
         <PlusIcon className="h-4 w-4" aria-hidden="true" />
         <span>Create New Label</span>
       </span>
     </button>
   );
 
-  const noResultIcon = <TagIcon className="h-3.5 w-3.5 text-brand-secondary" />;
+  const noResultIcon = <TagIcon className="h-3.5 w-3.5 text-custom-text-200" />;
 
   return (
     <>
diff --git a/apps/app/components/issues/view-select/priority.tsx b/apps/app/components/issues/view-select/priority.tsx
index e7a674ec7c..f1d73a43e1 100644
--- a/apps/app/components/issues/view-select/priority.tsx
+++ b/apps/app/components/issues/view-select/priority.tsx
@@ -74,7 +74,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
               ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
               : issue.priority === "low"
               ? "border-green-500/20 bg-green-500/20 text-green-500"
-              : "border-brand-base"
+              : "border-custom-border-80"
           } items-center`}
         >
           <Tooltip
@@ -82,7 +82,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
             tooltipContent={issue.priority ?? "None"}
             position={tooltipPosition}
           >
-            <span className="flex gap-1 items-center text-brand-secondary text-xs">
+            <span className="flex gap-1 items-center text-custom-text-200 text-xs">
               {getPriorityIcon(
                 issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
                 "text-sm"
diff --git a/apps/app/components/issues/view-select/state.tsx b/apps/app/components/issues/view-select/state.tsx
index 4a9f585e25..e7ae6b2e54 100644
--- a/apps/app/components/issues/view-select/state.tsx
+++ b/apps/app/components/issues/view-select/state.tsx
@@ -68,7 +68,7 @@ export const ViewStateSelect: React.FC<Props> = ({
       tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")}
       position={tooltipPosition}
     >
-      <div className="flex items-center cursor-pointer gap-2 text-brand-secondary">
+      <div className="flex items-center cursor-pointer gap-2 text-custom-text-200">
         {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 c7566dc77a..9d1e9b2249 100644
--- a/apps/app/components/labels/create-label-modal.tsx
+++ b/apps/app/components/labels/create-label-modal.tsx
@@ -98,10 +98,13 @@ 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-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">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-90 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                    <Dialog.Title
+                      as="h3"
+                      className="text-lg font-medium leading-6 text-custom-text-100"
+                    >
                       Create Label
                     </Dialog.Title>
                     <div className="mt-8 flex items-center gap-2">
@@ -109,8 +112,8 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                         {({ open, close }) => (
                           <>
                             <Popover.Button
-                              className={`group inline-flex items-center rounded-sm py-2 text-base font-medium hover:text-brand-base focus:outline-none ${
-                                open ? "text-brand-base" : "text-brand-secondary"
+                              className={`group inline-flex items-center rounded-sm py-2 text-base font-medium hover:text-custom-text-100 focus:outline-none ${
+                                open ? "text-custom-text-100" : "text-custom-text-200"
                               }`}
                             >
                               {watch("color") && watch("color") !== "" && (
@@ -122,7 +125,7 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                                 />
                               )}
                               <ChevronDownIcon
-                                className={`ml-2 h-5 w-5 group-hover:text-brand-secondary ${
+                                className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
                                   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 7b1a04b917..f3c087b9df 100644
--- a/apps/app/components/labels/create-update-label-inline.tsx
+++ b/apps/app/components/labels/create-update-label-inline.tsx
@@ -115,7 +115,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
 
   return (
     <div
-      className={`flex scroll-m-8 items-center gap-2 rounded-[10px] border border-brand-base bg-brand-base p-5 ${
+      className={`flex scroll-m-8 items-center gap-2 rounded-[10px] border border-custom-border-80 bg-custom-background-100 p-5 ${
         labelForm ? "" : "hidden"
       }`}
       ref={ref}
@@ -126,7 +126,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
             <>
               <Popover.Button
                 className={`group inline-flex items-center text-base font-medium focus:outline-none ${
-                  open ? "text-brand-base" : "text-brand-secondary"
+                  open ? "text-custom-text-100" : "text-custom-text-200"
                 }`}
               >
                 <span
@@ -136,7 +136,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
                   }}
                 />
                 <ChevronDownIcon
-                  className={`ml-2 h-5 w-5 group-hover:text-brand-secondary ${
+                  className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
                     open ? "text-gray-600" : "text-gray-400"
                   }`}
                   aria-hidden="true"
diff --git a/apps/app/components/labels/delete-label-modal.tsx b/apps/app/components/labels/delete-label-modal.tsx
index dd3df0fc40..008be01aea 100644
--- a/apps/app/components/labels/delete-label-modal.tsx
+++ b/apps/app/components/labels/delete-label-modal.tsx
@@ -77,7 +77,7 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -91,7 +91,7 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-base border border-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
@@ -103,15 +103,15 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-brand-base"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
                       >
                         Delete Label
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-brand-secondary">
+                        <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete label-{" "}
-                          <span className="font-medium text-brand-base">{data?.name}</span>? The
-                          label will be removed from all the issues.
+                          <span className="font-medium text-custom-text-100">{data?.name}</span>?
+                          The label will be removed from all the issues.
                         </p>
                       </div>
                     </div>
diff --git a/apps/app/components/labels/labels-list-modal.tsx b/apps/app/components/labels/labels-list-modal.tsx
index 23f60ab7fa..f94105f854 100644
--- a/apps/app/components/labels/labels-list-modal.tsx
+++ b/apps/app/components/labels/labels-list-modal.tsx
@@ -83,7 +83,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
@@ -96,15 +96,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 rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
+            <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-80 bg-custom-background-100 shadow-2xl transition-all">
               <Combobox>
                 <div className="relative m-1">
                   <MagnifyingGlassIcon
-                    className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
+                    className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                     aria-hidden="true"
                   />
                   <Combobox.Input
-                    className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                    className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
                     placeholder="Search..."
                     onChange={(e) => setQuery(e.target.value)}
                   />
@@ -118,7 +118,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-brand-base">
+                          <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-custom-text-100">
                             Labels
                           </h2>
                         )}
@@ -138,8 +138,8 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
                                     name: label.name,
                                   }}
                                   className={({ active }) =>
-                                    `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
-                                      active ? "bg-brand-surface-2 text-brand-base" : ""
+                                    `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
+                                      active ? "bg-custom-background-80 text-custom-text-100" : ""
                                     }`
                                   }
                                   onClick={() => {
@@ -166,10 +166,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-brand-base text-opacity-40"
+                      className="mx-auto h-6 w-6 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
-                    <p className="mt-4 text-sm text-brand-base">
+                    <p className="mt-4 text-sm text-custom-text-100">
                       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 f1a74f2967..4c965c8e3a 100644
--- a/apps/app/components/labels/single-label-group.tsx
+++ b/apps/app/components/labels/single-label-group.tsx
@@ -76,7 +76,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
   return (
     <Disclosure
       as="div"
-      className="rounded-[10px] border border-brand-base bg-brand-base p-5 text-brand-base"
+      className="rounded-[10px] border border-custom-border-80 bg-custom-background-100 p-5 text-custom-text-100"
       defaultOpen
     >
       {({ open }) => (
@@ -112,7 +112,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
               <Disclosure.Button>
                 <span>
                   <ChevronDownIcon
-                    className={`h-4 w-4 text-brand-base ${!open ? "rotate-90 transform" : ""}`}
+                    className={`h-4 w-4 text-custom-text-100 ${!open ? "rotate-90 transform" : ""}`}
                   />
                 </span>
               </Disclosure.Button>
@@ -132,7 +132,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
                 {labelChildren.map((child) => (
                   <div
                     key={child.id}
-                    className="group flex items-center justify-between rounded-md border border-brand-base p-2 text-sm"
+                    className="group flex items-center justify-between rounded-md border border-custom-border-80 p-2 text-sm"
                   >
                     <h5 className="flex items-center gap-3">
                       <span
diff --git a/apps/app/components/labels/single-label.tsx b/apps/app/components/labels/single-label.tsx
index 58e6d29321..384263d650 100644
--- a/apps/app/components/labels/single-label.tsx
+++ b/apps/app/components/labels/single-label.tsx
@@ -20,7 +20,7 @@ export const SingleLabel: React.FC<Props> = ({
   editLabel,
   handleLabelDelete,
 }) => (
-  <div className="gap-2 space-y-3 divide-y divide-brand-base rounded-[10px]  border border-brand-base bg-brand-base p-5">
+  <div className="gap-2 space-y-3 divide-y divide-custom-border-80 rounded-[10px]  border border-custom-border-80 bg-custom-background-100 p-5">
     <div className="flex items-center justify-between">
       <div className="flex items-center gap-3">
         <span
diff --git a/apps/app/components/modules/delete-module-modal.tsx b/apps/app/components/modules/delete-module-modal.tsx
index deece2ea55..1eeeca2e64 100644
--- a/apps/app/components/modules/delete-module-modal.tsx
+++ b/apps/app/components/modules/delete-module-modal.tsx
@@ -78,7 +78,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -92,7 +92,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-80 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
@@ -104,14 +104,14 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-brand-base"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
                       >
                         Delete Module
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-brand-secondary">
+                        <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete module-{" "}
-                          <span className="break-words font-medium text-brand-base">
+                          <span className="break-words font-medium text-custom-text-100">
                             {data?.name}
                           </span>
                           ? All of the data related to the module will be permanently removed. This
diff --git a/apps/app/components/modules/form.tsx b/apps/app/components/modules/form.tsx
index e94bc6d72c..3721fc18be 100644
--- a/apps/app/components/modules/form.tsx
+++ b/apps/app/components/modules/form.tsx
@@ -60,7 +60,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-brand-base">
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
           {status ? "Update" : "Create"} Module
         </h3>
         <div className="space-y-3">
@@ -164,7 +164,7 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
           </div>
         </div>
       </div>
-      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-brand-base px-5 pt-5">
+      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-80 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/gantt-chart.tsx b/apps/app/components/modules/gantt-chart.tsx
index e24e1dd9a5..4117483c19 100644
--- a/apps/app/components/modules/gantt-chart.tsx
+++ b/apps/app/components/modules/gantt-chart.tsx
@@ -28,7 +28,7 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
         className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="text-brand-base text-sm">{data?.name}</div>
+      <div className="text-custom-text-100 text-sm">{data?.name}</div>
     </div>
   );
 
@@ -41,7 +41,7 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
           style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
         />
         <Tooltip tooltipContent={data?.name} className={`z-[999999]`}>
-          <div className="text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
+          <div className="text-custom-text-100 text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
             {data?.name}
           </div>
         </Tooltip>
@@ -51,7 +51,7 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
             className={`z-[999999]`}
           >
             <div className="flex-shrink-0 mx-2 w-[18px] h-[18px] overflow-hidden flex justify-center items-center">
-              <span className="material-symbols-rounded text-brand-secondary text-[18px]">
+              <span className="material-symbols-rounded text-custom-text-200 text-[18px]">
                 info
               </span>
             </div>
diff --git a/apps/app/components/modules/modal.tsx b/apps/app/components/modules/modal.tsx
index c06be46d5c..6b2b4f5eed 100644
--- a/apps/app/components/modules/modal.tsx
+++ b/apps/app/components/modules/modal.tsx
@@ -126,7 +126,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -140,7 +140,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-80 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <ModuleForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/modules/modules-list-gantt-chart.tsx b/apps/app/components/modules/modules-list-gantt-chart.tsx
index 0f109ba6a3..b739f0b1e2 100644
--- a/apps/app/components/modules/modules-list-gantt-chart.tsx
+++ b/apps/app/components/modules/modules-list-gantt-chart.tsx
@@ -28,7 +28,7 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
           backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color,
         }}
       />
-      <div className="text-brand-base text-sm">{data?.name}</div>
+      <div className="text-custom-text-100 text-sm">{data?.name}</div>
     </div>
   );
 
@@ -41,7 +41,7 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
           style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
         />
         <Tooltip tooltipContent={data?.name} className={`z-[999999]`}>
-          <div className="text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
+          <div className="text-custom-text-100 text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
             {data?.name}
           </div>
         </Tooltip>
diff --git a/apps/app/components/modules/select/lead.tsx b/apps/app/components/modules/select/lead.tsx
index be7052df02..441cb673ae 100644
--- a/apps/app/components/modules/select/lead.tsx
+++ b/apps/app/components/modules/select/lead.tsx
@@ -59,7 +59,7 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
           {selectedOption ? (
             <Avatar user={selectedOption} />
           ) : (
-            <UserCircleIcon className="h-4 w-4 text-brand-secondary" />
+            <UserCircleIcon className="h-4 w-4 text-custom-text-200" />
           )}
           {selectedOption ? (
             selectedOption?.first_name && selectedOption.first_name !== "" ? (
@@ -68,7 +68,7 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
               selectedOption?.email
             )
           ) : (
-            <span className="text-brand-secondary">Lead</span>
+            <span className="text-custom-text-200">Lead</span>
           )}
         </div>
       }
diff --git a/apps/app/components/modules/select/members.tsx b/apps/app/components/modules/select/members.tsx
index c953312027..da2856217a 100644
--- a/apps/app/components/modules/select/members.tsx
+++ b/apps/app/components/modules/select/members.tsx
@@ -50,16 +50,16 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
     <CustomSearchSelect
       value={value}
       label={
-        <div className="flex items-center gap-2 text-brand-secondary">
+        <div className="flex items-center gap-2 text-custom-text-200">
           {value && value.length > 0 && Array.isArray(value) ? (
             <div className="flex items-center justify-center gap-2">
               <AssigneesList userIds={value} length={3} showLength={false} />
-              <span className="text-brand-secondary">{value.length} Assignees</span>
+              <span className="text-custom-text-200">{value.length} Assignees</span>
             </div>
           ) : (
             <div className="flex items-center justify-center gap-2">
-              <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
-              <span className="text-brand-secondary">Assignee</span>
+              <UserGroupIcon className="h-4 w-4 text-custom-text-200" />
+              <span className="text-custom-text-200">Assignee</span>
             </div>
           )}
         </div>
diff --git a/apps/app/components/modules/select/status.tsx b/apps/app/components/modules/select/status.tsx
index 02b1a3a75e..08192cd5d4 100644
--- a/apps/app/components/modules/select/status.tsx
+++ b/apps/app/components/modules/select/status.tsx
@@ -39,11 +39,11 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
               />
             ) : (
               <Squares2X2Icon
-                className={`h-3 w-3 ${error ? "text-red-500" : "text-brand-secondary"}`}
+                className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`}
               />
             )}
             {MODULE_STATUS.find((s) => s.value === value)?.label ?? (
-              <span className={`${error ? "text-red-500" : "text-brand-secondary"}`}>Status</span>
+              <span className={`${error ? "text-red-500" : "text-custom-text-200"}`}>Status</span>
             )}
           </div>
         }
diff --git a/apps/app/components/modules/sidebar-select/select-lead.tsx b/apps/app/components/modules/sidebar-select/select-lead.tsx
index 937a0d6df9..0e8dd0f893 100644
--- a/apps/app/components/modules/sidebar-select/select-lead.tsx
+++ b/apps/app/components/modules/sidebar-select/select-lead.tsx
@@ -53,7 +53,7 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
 
   return (
     <div className="flex items-center justify-start gap-1">
-      <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+      <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
         <UserCircleIcon className="h-5 w-5" />
         <span>Lead</span>
       </div>
@@ -70,7 +70,7 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
                   selectedOption?.email
                 )
               ) : (
-                <span className="text-brand-secondary">No lead</span>
+                <span className="text-custom-text-200">No lead</span>
               )}
             </div>
           }
diff --git a/apps/app/components/modules/sidebar-select/select-members.tsx b/apps/app/components/modules/sidebar-select/select-members.tsx
index 2481aaeedb..b414698630 100644
--- a/apps/app/components/modules/sidebar-select/select-members.tsx
+++ b/apps/app/components/modules/sidebar-select/select-members.tsx
@@ -49,7 +49,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
 
   return (
     <div className="flex items-center justify-start gap-1">
-      <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+      <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
         <UserGroupIcon className="h-5 w-5" />
         <span>Members</span>
       </div>
@@ -57,11 +57,11 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
         <CustomSearchSelect
           value={value}
           label={
-            <div className="flex items-center gap-2 text-brand-secondary">
+            <div className="flex items-center gap-2 text-custom-text-200">
               {value && value.length > 0 && Array.isArray(value) ? (
                 <div className="flex items-center justify-center gap-2">
                   <AssigneesList userIds={value} length={3} showLength={false} />
-                  <span className="text-brand-secondary">{value.length} Assignees</span>
+                  <span className="text-custom-text-200">{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 5d5ac94646..f67f402228 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-brand-base"
+                  value ? "" : "text-custom-text-100"
                 }`}
               >
                 <span
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx
index 3b70814f70..49ffbb96d7 100644
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@@ -186,7 +186,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
       <div
         className={`fixed top-[66px] ${
           isOpen ? "right-0" : "-right-[24rem]"
-        } h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar pt-5 pb-10 duration-300`}
+        } h-full w-[24rem] overflow-y-auto border-l border-custom-border-80 bg-custom-sidebar-background-100 pt-5 pb-10 duration-300`}
       >
         {module ? (
           <>
@@ -199,7 +199,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                     render={({ field: { value } }) => (
                       <CustomSelect
                         customButton={
-                          <span className="flex cursor-pointer items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-center text-xs capitalize">
+                          <span className="flex cursor-pointer items-center rounded border-[0.5px] border-custom-border-80 bg-custom-background-90 px-2 py-1 text-center text-xs capitalize">
                             {capitalizeFirstLetter(`${watch("status")}`)}
                           </span>
                         }
@@ -222,8 +222,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                     {({ open }) => (
                       <>
                         <Popover.Button
-                          className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-xs ${
-                            module.start_date ? "" : "text-brand-secondary"
+                          className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-80 bg-custom-background-90 px-2 py-1 text-xs ${
+                            module.start_date ? "" : "text-custom-text-200"
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
@@ -269,14 +269,14 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                     )}
                   </Popover>
                   <span>
-                    <ArrowLongRightIcon className="h-3 w-3 text-brand-secondary" />
+                    <ArrowLongRightIcon className="h-3 w-3 text-custom-text-200" />
                   </span>
                   <Popover className="flex h-full items-center justify-center rounded-lg">
                     {({ open }) => (
                       <>
                         <Popover.Button
-                          className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-xs ${
-                            module.target_date ? "" : "text-brand-secondary"
+                          className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-80 bg-custom-background-90 px-2 py-1 text-xs ${
+                            module.target_date ? "" : "text-custom-text-200"
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3 " />
@@ -329,7 +329,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                 <div className="flex w-full flex-col items-start justify-start gap-2">
                   <div className="flex w-full items-start justify-between gap-2  ">
                     <div className="max-w-[300px]">
-                      <h4 className="text-xl font-semibold break-words w-full text-brand-base">
+                      <h4 className="text-xl font-semibold break-words w-full text-custom-text-100">
                         {module.name}
                       </h4>
                     </div>
@@ -349,7 +349,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                     </CustomMenu>
                   </div>
 
-                  <span className="whitespace-normal text-sm leading-5 text-brand-secondary break-words w-full">
+                  <span className="whitespace-normal text-sm leading-5 text-custom-text-200 break-words w-full">
                     {module.description}
                   </span>
                 </div>
@@ -381,12 +381,12 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                   />
 
                   <div className="flex items-center justify-start gap-1">
-                    <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
+                    <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
                       <ChartPieIcon className="h-5 w-5" />
                       <span>Progress</span>
                     </div>
 
-                    <div className="flex items-center gap-2.5 text-brand-secondary">
+                    <div className="flex items-center gap-2.5 text-custom-text-200">
                       <span className="h-4 w-4">
                         <ProgressBar
                           value={module.completed_issues}
@@ -400,7 +400,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
               </div>
             </div>
 
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-80 p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
                   <div
@@ -408,7 +408,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                   >
                     <div className="flex w-full items-center justify-between gap-2    ">
                       <div className="flex items-center justify-start gap-2 text-sm">
-                        <span className="font-medium text-brand-secondary">Progress</span>
+                        <span className="font-medium text-custom-text-200">Progress</span>
                         {!open && moduleIssues && progressPercentage ? (
                           <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
                             {progressPercentage ? `${progressPercentage}%` : ""}
@@ -430,9 +430,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                           <ExclamationIcon
                             height={14}
                             width={14}
-                            className="fill-current text-brand-secondary"
+                            className="fill-current text-custom-text-200"
                           />
-                          <span className="text-xs italic text-brand-secondary">
+                          <span className="text-xs italic text-custom-text-200">
                             Invalid date. Please enter valid date.
                           </span>
                         </div>
@@ -445,7 +445,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                             <div className="flex  items-start justify-between gap-4 py-2 text-xs">
                               <div className="flex items-center gap-1">
                                 <span>
-                                  <DocumentIcon className="h-3 w-3 text-brand-secondary" />
+                                  <DocumentIcon className="h-3 w-3 text-custom-text-200" />
                                 </span>
                                 <span>
                                   Pending Issues -{" "}
@@ -454,7 +454,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                                 </span>
                               </div>
 
-                              <div className="flex items-center gap-3 text-brand-base">
+                              <div className="flex items-center gap-3 text-custom-text-100">
                                 <div className="flex items-center justify-center gap-1">
                                   <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
                                   <span>Ideal</span>
@@ -484,7 +484,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
               </Disclosure>
             </div>
 
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-80 p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
                   <div
@@ -492,7 +492,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                   >
                     <div className="flex w-full items-center justify-between gap-2    ">
                       <div className="flex items-center justify-start gap-2 text-sm">
-                        <span className="font-medium text-brand-secondary">Other Information</span>
+                        <span className="font-medium text-custom-text-200">Other Information</span>
                       </div>
 
                       {module.total_issues > 0 ? (
@@ -507,9 +507,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                           <ExclamationIcon
                             height={14}
                             width={14}
-                            className="fill-current text-brand-secondary"
+                            className="fill-current text-custom-text-200"
                           />
-                          <span className="text-xs italic text-brand-secondary">
+                          <span className="text-xs italic text-custom-text-200">
                             No issues found. Please add issue.
                           </span>
                         </div>
@@ -544,17 +544,17 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
               </Disclosure>
             </div>
 
-            <div className="flex w-full flex-col border-t border-brand-base px-6 py-6 text-xs">
+            <div className="flex w-full flex-col border-t border-custom-border-80 px-6 py-6 text-xs">
               <div className="flex w-full items-center justify-between">
-                <h4 className="text-sm font-medium text-brand-secondary">Links</h4>
+                <h4 className="text-sm font-medium text-custom-text-200">Links</h4>
                 <button
-                  className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1"
+                  className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90"
                   onClick={() => setModuleLinkModal(true)}
                 >
                   <PlusIcon className="h-4 w-4" />
                 </button>
               </div>
-              <div className="mt-2 space-y-2 hover:bg-brand-surface-2">
+              <div className="mt-2 space-y-2 hover:bg-custom-background-80">
                 {memberRole && module.link_module && module.link_module.length > 0 ? (
                   <LinksList
                     links={module.link_module}
diff --git a/apps/app/components/modules/single-module-card.tsx b/apps/app/components/modules/single-module-card.tsx
index ac92bdcdd4..4304397473 100644
--- a/apps/app/components/modules/single-module-card.tsx
+++ b/apps/app/components/modules/single-module-card.tsx
@@ -131,14 +131,14 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
         data={module}
         user={user}
       />
-      <div className="flex flex-col divide-y divide-brand-base overflow-hidden rounded-[10px] border border-brand-base bg-brand-base text-xs">
+      <div className="flex flex-col divide-y divide-custom-border-80 overflow-hidden rounded-[10px] border border-custom-border-80 bg-custom-background-100 text-xs">
         <div className="p-4">
           <div className="flex w-full flex-col gap-5">
             <div className="flex items-start justify-between gap-2">
               <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-words text-lg font-semibold text-brand-base">
+                    <h3 className="truncate break-words text-lg font-semibold text-custom-text-100">
                       {truncateText(module.name, 75)}
                     </h3>
                   </a>
@@ -146,7 +146,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
               </Tooltip>
 
               <div className="flex items-center gap-1">
-                <div className="mr-2 flex whitespace-nowrap rounded bg-brand-surface-1 px-2.5 py-2 text-brand-secondary">
+                <div className="mr-2 flex whitespace-nowrap rounded bg-custom-background-90 px-2.5 py-2 text-custom-text-200">
                   <span className="capitalize">{module?.status?.replace("-", " ")}</span>
                 </div>
                 {module.is_favorite ? (
@@ -181,7 +181,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
                 </CustomMenu>
               </div>
             </div>
-            <div className="grid grid-cols-2 gap-2 text-brand-secondary">
+            <div className="grid grid-cols-2 gap-2 text-custom-text-200">
               <div className="flex items-start gap-1">
                 <CalendarDaysIcon className="h-4 w-4" />
                 <span>Start:</span>
@@ -195,10 +195,10 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
             </div>
           </div>
         </div>
-        <div className="flex h-20 flex-col items-end bg-brand-surface-2">
-          <div className="flex w-full items-center justify-between gap-2 justify-self-end p-4 text-brand-secondary">
+        <div className="flex h-20 flex-col items-end bg-custom-background-80">
+          <div className="flex w-full items-center justify-between gap-2 justify-self-end p-4 text-custom-text-200">
             <span>Progress</span>
-            <div className="bar relative h-1 w-full rounded bg-brand-surface-1">
+            <div className="bar relative h-1 w-full rounded bg-custom-background-90">
               <div
                 className="absolute top-0 left-0 h-1 rounded bg-green-500 duration-300"
                 style={{
@@ -208,7 +208,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
             </div>
             <span>{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%</span>
           </div>
-          <div className="item-center flex h-full w-full justify-between px-4 pb-4 text-brand-secondary">
+          <div className="item-center flex h-full w-full justify-between px-4 pb-4 text-custom-text-200">
             <p>
               Last updated:
               <span className="font-medium">{renderShortDateWithYearFormat(lastUpdated)}</span>
diff --git a/apps/app/components/onboarding/invite-members.tsx b/apps/app/components/onboarding/invite-members.tsx
index 9136078011..0390723b6f 100644
--- a/apps/app/components/onboarding/invite-members.tsx
+++ b/apps/app/components/onboarding/invite-members.tsx
@@ -45,7 +45,7 @@ export const InviteMembers: React.FC<Props> = ({ setStep, workspace, user }) =>
       }}
     >
       <div className="flex w-full max-w-xl flex-col gap-12">
-        <div className="flex flex-col gap-6 rounded-[10px] bg-brand-base p-7 shadow-md">
+        <div className="flex flex-col gap-6 rounded-[10px] bg-custom-background-100 p-7 shadow-md">
           <h2 className="text-xl 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/onboarding-card.tsx b/apps/app/components/onboarding/onboarding-card.tsx
index 2ab3f86541..717c903754 100644
--- a/apps/app/components/onboarding/onboarding-card.tsx
+++ b/apps/app/components/onboarding/onboarding-card.tsx
@@ -23,7 +23,7 @@ export const OnboardingCard: React.FC<Props> = ({ data, gradient = false }) => (
       <Image src={data.imgURL} height="180" width="450" alt={data.title} />
     </div>
     <h3 className="text-2xl font-medium">{data.title}</h3>
-    <p className="text-base text-brand-secondary">{data.description}</p>
-    <span className="text-base text-brand-secondary">{data.step}</span>
+    <p className="text-base text-custom-text-200">{data.description}</p>
+    <span className="text-base text-custom-text-200">{data.step}</span>
   </div>
 );
diff --git a/apps/app/components/onboarding/user-details.tsx b/apps/app/components/onboarding/user-details.tsx
index 1e96bb143e..bb46676b2c 100644
--- a/apps/app/components/onboarding/user-details.tsx
+++ b/apps/app/components/onboarding/user-details.tsx
@@ -67,10 +67,10 @@ 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-7">
-        <div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
+        <div className="flex flex-col rounded-[10px] bg-custom-background-100 shadow-md">
           <div className="flex flex-col gap-2 justify-center px-7 pt-7 pb-3.5">
-            <h3 className="text-base font-semibold text-brand-base">User Details</h3>
-            <p className="text-sm text-brand-secondary">
+            <h3 className="text-base font-semibold text-custom-text-100">User Details</h3>
+            <p className="text-sm text-custom-text-200">
               Enter your details as a first step to open your Plane account.
             </p>
           </div>
@@ -102,7 +102,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-brand-base px-7 pt-3.5 pb-7">
+          <div className="flex flex-col items-start justify-center gap-2.5 border-t border-custom-border-80 px-7 pt-3.5 pb-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 0beef1419e..7333fe2a1c 100644
--- a/apps/app/components/onboarding/workspace.tsx
+++ b/apps/app/components/onboarding/workspace.tsx
@@ -82,7 +82,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace, user }) => {
     <div className="grid w-full place-items-center">
       <Tab.Group
         as="div"
-        className="flex h-[442px] w-full max-w-xl flex-col justify-between rounded-[10px] bg-brand-base shadow-md"
+        className="flex h-[442px] w-full max-w-xl flex-col justify-between rounded-[10px] bg-custom-background-100 shadow-md"
         defaultIndex={currentTabValue(currentTab)}
         onChange={(i) => {
           switch (i) {
@@ -97,8 +97,8 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace, user }) => {
       >
         <Tab.List as="div" className="flex flex-col gap-3 px-7 pt-7 pb-3.5">
           <div className="flex flex-col gap-2 justify-center">
-            <h3 className="text-base font-semibold text-brand-base">Workspace</h3>
-            <p className="text-sm text-brand-secondary">
+            <h3 className="text-base font-semibold text-custom-text-100">Workspace</h3>
+            <p className="text-sm text-custom-text-200">
               Create or join the workspace to get started with Plane.
             </p>
           </div>
@@ -107,8 +107,8 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace, user }) => {
               className={({ selected }) =>
                 `rounded-3xl border px-4 py-2 outline-none ${
                   selected
-                    ? "border-brand-accent bg-brand-accent text-white font-medium"
-                    : "border-brand-base bg-brand-base hover:bg-brand-surface-2"
+                    ? "border-custom-primary bg-custom-primary text-white font-medium"
+                    : "border-custom-border-80 bg-custom-background-100 hover:bg-custom-background-80"
                 }`
               }
             >
@@ -118,8 +118,8 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace, user }) => {
               className={({ selected }) =>
                 `rounded-3xl border px-4 py-2 outline-none ${
                   selected
-                    ? "border-brand-accent bg-brand-accent text-white font-medium"
-                    : "border-brand-base bg-brand-base hover:bg-brand-surface-2"
+                    ? "border-custom-primary bg-custom-primary text-white font-medium"
+                    : "border-custom-border-80 bg-custom-background-100 hover:bg-custom-background-80"
                 }`
               }
             >
@@ -159,7 +159,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace, user }) => {
                           <div className="text-sm font-medium">
                             {truncateText(invitation.workspace.name, 30)}
                           </div>
-                          <p className="text-sm text-brand-secondary">
+                          <p className="text-sm text-custom-text-200">
                             Invited by{" "}
                             {invitation.created_by_detail
                               ? invitation.created_by_detail.first_name
@@ -170,9 +170,9 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace, user }) => {
                           <button
                             className={`${
                               invitationsRespond.includes(invitation.id)
-                                ? "bg-brand-surface-2 text-brand-secondary"
-                                : "bg-brand-accent text-white"
-                            } text-sm px-4 py-2 border border-brand-base rounded-3xl`}
+                                ? "bg-custom-background-80 text-custom-text-200"
+                                : "bg-custom-primary text-white"
+                            } text-sm px-4 py-2 border border-custom-border-80 rounded-3xl`}
                             onClick={(e) => {
                               handleInvitation(
                                 invitation,
@@ -202,11 +202,11 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace, user }) => {
                             type="button"
                             className={`${
                               invitationsRespond.includes(invitation.id)
-                                ? "bg-brand-surface-2 text-brand-secondary"
-                                : "bg-brand-accent text-white"
-                            } text-sm px-4 py-2 border border-brand-base rounded-3xl`}
+                                ? "bg-custom-background-80 text-custom-text-200"
+                                : "bg-custom-primary text-white"
+                            } text-sm px-4 py-2 border border-custom-border-80 rounded-3xl`}
 
-                            // className="h-4 w-4 rounded border-brand-base text-brand-accent focus:ring-brand-accent"
+                            // className="h-4 w-4 rounded border-custom-border-80 text-custom-primary focus:ring-custom-primary"
                           /> */}
                         </div>
                       </label>
@@ -214,7 +214,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace, user }) => {
                   ))
                 ) : (
                   <div className="text-center">
-                    <h3 className="text-brand-secondary">{`You don't have any invitations yet.`}</h3>
+                    <h3 className="text-custom-text-200">{`You don't have any invitations yet.`}</h3>
                   </div>
                 )}
               </div>
diff --git a/apps/app/components/pages/create-block.tsx b/apps/app/components/pages/create-block.tsx
index d4098db939..006932ce3c 100644
--- a/apps/app/components/pages/create-block.tsx
+++ b/apps/app/components/pages/create-block.tsx
@@ -96,7 +96,7 @@ export const CreateBlock: React.FC<Props> = ({ user }) => {
   return (
     <div className="relative">
       <form
-        className="flex flex-col items-center justify-between rounded border-2 border-brand-base p-2"
+        className="flex flex-col items-center justify-between rounded border-2 border-custom-border-80 p-2"
         onSubmit={handleSubmit(createPageBlock)}
       >
         <div className="flex min-h-[75px] w-full">
@@ -115,7 +115,7 @@ export const CreateBlock: React.FC<Props> = ({ user }) => {
 
         <div className="flex w-full items-center justify-end gap-2 p-1">
           <button type="submit">
-            <PaperAirplaneIcon className="h-5 w-5 text-brand-base" />
+            <PaperAirplaneIcon className="h-5 w-5 text-custom-text-100" />
           </button>
         </div>
       </form>
diff --git a/apps/app/components/pages/create-update-block-inline.tsx b/apps/app/components/pages/create-update-block-inline.tsx
index 0b3fcb17cc..16bf37a952 100644
--- a/apps/app/components/pages/create-update-block-inline.tsx
+++ b/apps/app/components/pages/create-update-block-inline.tsx
@@ -280,7 +280,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
   return (
     <div className="relative">
       <form
-        className="divide-y divide-brand-base rounded border border-brand-base shadow"
+        className="divide-y divide-custom-border-80 rounded border border-custom-border-80 shadow"
         onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
       >
         <div className="pt-2">
@@ -295,7 +295,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
               maxLength={255}
             />
           </div>
-          <div className="page-block-section relative -mt-2 text-brand-secondary">
+          <div className="page-block-section relative -mt-2 text-custom-text-200">
             <Controller
               name="description"
               control={control}
@@ -318,7 +318,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                   );
                 else if (!value || !watch("description_html"))
                   return (
-                    <div className="h-32 w-full flex items-center justify-center text-brand-secondary text-sm" />
+                    <div className="h-32 w-full flex items-center justify-center text-custom-text-200 text-sm" />
                   );
 
                 return (
@@ -344,8 +344,8 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
             <div className="m-2 mt-6 flex">
               <button
                 type="button"
-                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-2 ${
-                  iAmFeelingLucky ? "cursor-wait bg-brand-surface-1" : ""
+                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-80 ${
+                  iAmFeelingLucky ? "cursor-wait bg-custom-background-90" : ""
                 }`}
                 onClick={handleAutoGenerateDescription}
                 disabled={iAmFeelingLucky}
@@ -361,7 +361,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
 
               <button
                 type="button"
-                className="ml-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-2"
+                className="ml-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-80"
                 onClick={() => setGptAssistantModal(true)}
               >
                 <SparklesIcon className="h-4 w-4" />
diff --git a/apps/app/components/pages/create-update-page-modal.tsx b/apps/app/components/pages/create-update-page-modal.tsx
index 57e25b5f76..3820519ce2 100644
--- a/apps/app/components/pages/create-update-page-modal.tsx
+++ b/apps/app/components/pages/create-update-page-modal.tsx
@@ -152,7 +152,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -166,7 +166,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-80 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <PageForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/pages/delete-page-modal.tsx b/apps/app/components/pages/delete-page-modal.tsx
index eaa7c21897..2c4f3b880a 100644
--- a/apps/app/components/pages/delete-page-modal.tsx
+++ b/apps/app/components/pages/delete-page-modal.tsx
@@ -103,7 +103,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -117,7 +117,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-80 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
@@ -129,14 +129,14 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-brand-base"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
                       >
                         Delete Page
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-brand-secondary">
+                        <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete Page-{" "}
-                          <span className="break-words font-medium text-brand-base">
+                          <span className="break-words font-medium text-custom-text-100">
                             {data?.name}
                           </span>
                           ? All of the data related to the page will be permanently removed. This
diff --git a/apps/app/components/pages/page-form.tsx b/apps/app/components/pages/page-form.tsx
index db466ff0de..b23daee189 100644
--- a/apps/app/components/pages/page-form.tsx
+++ b/apps/app/components/pages/page-form.tsx
@@ -59,7 +59,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-brand-base">
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
           {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 7d1eac724d..aebe7773a5 100644
--- a/apps/app/components/pages/pages-view.tsx
+++ b/apps/app/components/pages/pages-view.tsx
@@ -208,7 +208,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
         <div className="space-y-4 h-full overflow-y-auto">
           {pages.length > 0 ? (
             viewType === "list" ? (
-              <ul role="list" className="divide-y divide-brand-base">
+              <ul role="list" className="divide-y divide-custom-border-80">
                 {pages.map((page) => (
                   <SinglePageListItem
                     key={page.id}
@@ -223,7 +223,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
                 ))}
               </ul>
             ) : viewType === "detailed" ? (
-              <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base">
+              <div className="divide-y divide-custom-border-80 rounded-[10px] border border-custom-border-80 bg-custom-background-100">
                 {pages.map((page) => (
                   <SinglePageDetailedItem
                     key={page.id}
@@ -238,7 +238,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
                 ))}
               </div>
             ) : (
-              <div className="rounded-[10px] border border-brand-base">
+              <div className="rounded-[10px] border border-custom-border-80">
                 {pages.map((page) => (
                   <SinglePageDetailedItem
                     key={page.id}
diff --git a/apps/app/components/pages/single-page-block.tsx b/apps/app/components/pages/single-page-block.tsx
index 898f4aba5c..4b2c896edf 100644
--- a/apps/app/components/pages/single-page-block.tsx
+++ b/apps/app/components/pages/single-page-block.tsx
@@ -313,8 +313,8 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index,
             </div>
           ) : (
             <div
-              className={`group relative w-full rounded bg-brand-surface-2 text-brand-secondary ${
-                snapshot.isDragging ? "bg-brand-base p-4 shadow" : ""
+              className={`group relative w-full rounded bg-custom-background-80 text-custom-text-200 ${
+                snapshot.isDragging ? "bg-custom-background-100 p-4 shadow" : ""
               }`}
               ref={provided.innerRef}
               {...provided.draggableProps}
@@ -329,7 +329,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index,
               </button>
               <div
                 ref={actionSectionRef}
-                className={`absolute top-4 right-2 hidden items-center gap-2 bg-brand-surface-2 pl-4 group-hover:!flex ${
+                className={`absolute top-4 right-2 hidden items-center gap-2 bg-custom-background-80 pl-4 group-hover:!flex ${
                   isMenuActive ? "!flex" : ""
                 }`}
               >
@@ -345,7 +345,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index,
                 )}
                 <button
                   type="button"
-                  className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${
+                  className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${
                     iAmFeelingLucky ? "cursor-wait" : ""
                   }`}
                   onClick={handleAutoGenerateDescription}
@@ -361,7 +361,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index,
                 </button>
                 <button
                   type="button"
-                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
+                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
                   onClick={() => setGptAssistantModal((prevData) => !prevData)}
                 >
                   <SparklesIcon className="h-4 w-4" />
@@ -369,7 +369,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index,
                 </button>
                 <button
                   type="button"
-                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
+                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
                   onClick={() => setCreateBlockForm(true)}
                 >
                   <PencilIcon className="h-3.5 w-3.5" />
@@ -377,7 +377,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index,
                 <CustomMenu
                   customButton={
                     <button
-                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-brand-surface-1"
+                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-custom-background-90"
                       onClick={() => setIsMenuActive(!isMenuActive)}
                     >
                       <BoltIcon className="h-4.5 w-3.5" />
@@ -426,7 +426,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index,
                         <Link
                           href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}
                         >
-                          <a className="flex h-6 flex-shrink-0 items-center gap-1 rounded bg-brand-surface-2 px-1.5 py-1 text-xs">
+                          <a className="flex h-6 flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 px-1.5 py-1 text-xs">
                             <LayerDiagonalIcon height="16" width="16" />
                             {projectDetails?.identifier}-{block.issue_detail?.sequence_id}
                           </a>
@@ -436,12 +436,12 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index,
                     <TextArea
                       name="blockName"
                       value={block.name}
-                      className="min-h-[20px] block w-full resize-none overflow-hidden border-none bg-transparent text-sm text-brand-base"
+                      className="min-h-[20px] block w-full resize-none overflow-hidden border-none bg-transparent text-sm text-custom-text-100"
                       noPadding
                     />
                   </div>
                   {block?.description_stripped.length > 0 && (
-                    <p className="mt-3 h-5 truncate text-sm font-normal text-brand-secondary">
+                    <p className="mt-3 h-5 truncate text-sm font-normal text-custom-text-200">
                       {block.description_stripped}
                     </p>
                   )}
diff --git a/apps/app/components/pages/single-page-detailed-item.tsx b/apps/app/components/pages/single-page-detailed-item.tsx
index 4be70384ee..1cbb16d897 100644
--- a/apps/app/components/pages/single-page-detailed-item.tsx
+++ b/apps/app/components/pages/single-page-detailed-item.tsx
@@ -75,7 +75,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                 page.label_details.map((label) => (
                   <div
                     key={label.id}
-                    className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
+                    className="group flex items-center gap-1 rounded-2xl border border-custom-border-80 px-2 py-0.5 text-xs"
                     style={{
                       backgroundColor: `${
                         label?.color && label.color !== "" ? label.color : "#000000"
@@ -162,7 +162,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                 } on ${renderLongDateFormat(`${page.created_at}`)}`}
               >
                 <span>
-                  <ExclamationIcon className="h-4 w-4 fill-current text-brand-secondary" />
+                  <ExclamationIcon className="h-4 w-4 fill-current text-custom-text-200" />
                 </span>
               </Tooltip>
               <CustomMenu verticalEllipsis>
@@ -205,7 +205,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
               </CustomMenu>
             </div>
           </div>
-          <div className="relative mt-2 space-y-2 text-sm text-brand-secondary">
+          <div className="relative mt-2 space-y-2 text-sm text-custom-text-200">
             {page.blocks.length > 0
               ? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>)
               : null}
diff --git a/apps/app/components/pages/single-page-list-item.tsx b/apps/app/components/pages/single-page-list-item.tsx
index 876d941022..be6f0eac53 100644
--- a/apps/app/components/pages/single-page-list-item.tsx
+++ b/apps/app/components/pages/single-page-list-item.tsx
@@ -69,18 +69,18 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
     <li>
       <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
         <a>
-          <div className="relative rounded p-4 text-brand-secondary hover:bg-brand-surface-2">
+          <div className="relative rounded p-4 text-custom-text-200 hover:bg-custom-background-80">
             <div className="flex items-center justify-between">
               <div className="flex flex-wrap items-center gap-2">
                 <DocumentTextIcon className="h-4 w-4" />
-                <p className="mr-2 truncate text-sm text-brand-base">
+                <p className="mr-2 truncate text-sm text-custom-text-100">
                   {truncateText(page.name, 75)}
                 </p>
                 {page.label_details.length > 0 &&
                   page.label_details.map((label) => (
                     <div
                       key={label.id}
-                      className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs"
+                      className="group flex items-center gap-1 rounded-2xl border border-custom-border-80 px-2 py-0.5 text-xs"
                       style={{
                         backgroundColor: `${label?.color}20`,
                       }}
@@ -161,7 +161,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                     } on ${renderLongDateFormat(`${page.created_at}`)}`}
                   >
                     <span>
-                      <ExclamationIcon className="h-4 w-4 fill-current text-brand-secondary" />
+                      <ExclamationIcon className="h-4 w-4 fill-current text-custom-text-200" />
                     </span>
                   </Tooltip>
 
diff --git a/apps/app/components/project/confirm-project-member-remove.tsx b/apps/app/components/project/confirm-project-member-remove.tsx
index ffa67c3442..c6a0538a09 100644
--- a/apps/app/components/project/confirm-project-member-remove.tsx
+++ b/apps/app/components/project/confirm-project-member-remove.tsx
@@ -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-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">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                       <ExclamationTriangleIcon
@@ -65,12 +65,12 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-brand-base"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
                       >
                         Remove {data?.email}?
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-brand-secondary">
+                        <p className="text-sm text-custom-text-200">
                           Are you sure you want to remove member-{" "}
                           <span className="font-bold">{data?.email}</span>? They will no longer have
                           access to this project. This action cannot be undone.
@@ -79,7 +79,7 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
                     </div>
                   </div>
                 </div>
-                <div className="flex justify-end gap-2 bg-brand-surface-1 p-4 sm:px-6">
+                <div className="flex justify-end gap-2 bg-custom-background-90 p-4 sm:px-6">
                   <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                   <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Removing..." : "Remove"}
diff --git a/apps/app/components/project/create-project-modal.tsx b/apps/app/components/project/create-project-modal.tsx
index f17558d9b3..ad8cf5f01a 100644
--- a/apps/app/components/project/create-project-modal.tsx
+++ b/apps/app/components/project/create-project-modal.tsx
@@ -170,7 +170,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -184,8 +184,8 @@ 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-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-brand-surface-2">
+              <Dialog.Panel className="transform rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+                <div className="relative h-36 w-full rounded-t-lg bg-custom-background-80">
                   {watch("cover_image") !== null && (
                     <img
                       src={watch("cover_image")!}
@@ -328,7 +328,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                     </div>
                   </div>
 
-                  <div className="mt-5 flex justify-end gap-2 border-t-2 border-brand-base px-4 py-3">
+                  <div className="mt-5 flex justify-end gap-2 border-t-2 border-custom-border-80 px-4 py-3">
                     <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                     <PrimaryButton type="submit" size="sm" loading={isSubmitting}>
                       {isSubmitting ? "Adding project..." : "Add Project"}
diff --git a/apps/app/components/project/delete-project-modal.tsx b/apps/app/components/project/delete-project-modal.tsx
index eabe85f2d0..7e88e685fc 100644
--- a/apps/app/components/project/delete-project-modal.tsx
+++ b/apps/app/components/project/delete-project-modal.tsx
@@ -98,7 +98,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -112,7 +112,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-80 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
@@ -126,17 +126,19 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm leading-7 text-brand-secondary">
+                    <p className="text-sm leading-7 text-custom-text-200">
                       Are you sure you want to delete project{" "}
                       <span className="break-words font-semibold">{selectedProject?.name}</span>?
                       All of the data related to the project will be permanently removed. This
                       action cannot be undone
                     </p>
                   </span>
-                  <div className="text-brand-secondary">
+                  <div className="text-custom-text-200">
                     <p className="break-words text-sm ">
                       Enter the project name{" "}
-                      <span className="font-medium text-brand-base">{selectedProject?.name}</span>{" "}
+                      <span className="font-medium text-custom-text-100">
+                        {selectedProject?.name}
+                      </span>{" "}
                       to continue:
                     </p>
                     <Input
@@ -150,10 +152,11 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
                       name="projectName"
                     />
                   </div>
-                  <div className="text-brand-secondary">
+                  <div className="text-custom-text-200">
                     <p className="text-sm">
                       To confirm, type{" "}
-                      <span className="font-medium text-brand-base">delete my project</span> below:
+                      <span className="font-medium text-custom-text-100">delete my project</span>{" "}
+                      below:
                     </p>
                     <Input
                       type="text"
diff --git a/apps/app/components/project/join-project-modal.tsx b/apps/app/components/project/join-project-modal.tsx
index 83933dffb4..e0517ac6af 100644
--- a/apps/app/components/project/join-project-modal.tsx
+++ b/apps/app/components/project/join-project-modal.tsx
@@ -59,9 +59,12 @@ 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-brand-surface-2 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-custom-background-80 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                  <Dialog.Title
+                    as="h3"
+                    className="text-lg font-medium leading-6 text-custom-text-100"
+                  >
                     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 204633a858..404bc9bd84 100644
--- a/apps/app/components/project/send-project-invitation-modal.tsx
+++ b/apps/app/components/project/send-project-invitation-modal.tsx
@@ -130,14 +130,17 @@ 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-brand-surface-2 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-custom-background-80 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="space-y-5">
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                    <Dialog.Title
+                      as="h3"
+                      className="text-lg font-medium leading-6 text-custom-text-100"
+                    >
                       Invite Members
                     </Dialog.Title>
                     <div className="mt-2">
-                      <p className="text-sm text-brand-secondary">
+                      <p className="text-sm text-custom-text-200">
                         Invite members to work on your project.
                       </p>
                     </div>
@@ -190,7 +193,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
                         />
                       </div>
                       <div>
-                        <h6 className="text-brand-secondary">Role</h6>
+                        <h6 className="text-custom-text-200">Role</h6>
                         <Controller
                           name="role"
                           control={control}
diff --git a/apps/app/components/project/settings-header.tsx b/apps/app/components/project/settings-header.tsx
index 0aff5350c3..8dcff51387 100644
--- a/apps/app/components/project/settings-header.tsx
+++ b/apps/app/components/project/settings-header.tsx
@@ -4,7 +4,7 @@ export const SettingsHeader = () => (
   <div className="mb-8 space-y-6">
     <div>
       <h3 className="text-2xl font-semibold">Project Settings</h3>
-      <p className="mt-1 text-sm text-brand-secondary">
+      <p className="mt-1 text-sm text-custom-text-200">
         This information will be displayed to every member of the project.
       </p>
     </div>
diff --git a/apps/app/components/project/settings/single-label.tsx b/apps/app/components/project/settings/single-label.tsx
index adee30bb5c..94e49e8edd 100644
--- a/apps/app/components/project/settings/single-label.tsx
+++ b/apps/app/components/project/settings/single-label.tsx
@@ -40,7 +40,7 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
   return (
     <>
       {children && children.length === 0 ? (
-        <div className="gap-2 space-y-3 divide-y rounded-md border  border-brand-base p-3 md:w-2/3">
+        <div className="gap-2 space-y-3 divide-y rounded-md border  border-custom-border-80 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-brand-surface-2">
+              <Popover className="relative flex h-full w-full items-center justify-center rounded-xl bg-custom-background-80">
                 {({ open }) => (
                   <>
                     <Popover.Button
                       className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
-                        open ? "text-brand-base" : "text-brand-secondary"
+                        open ? "text-custom-text-100" : "text-custom-text-200"
                       }`}
                     >
                       {watch("color") && watch("color") !== "" && (
@@ -123,13 +123,13 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
           </div>
         </div>
       ) : (
-        <div className="rounded-md bg-brand-surface-2 p-4 text-brand-base">
+        <div className="rounded-md bg-custom-background-80 p-4 text-custom-text-100">
           <h3 className="flex items-center gap-2 font-medium leading-5">
             <RectangleGroupIcon className="h-5 w-5" />
             This is the label group title
           </h3>
           <div className="mt-4 pl-5">
-            <div className="group flex items-center justify-between rounded p-2 text-sm hover:bg-brand-surface-1">
+            <div className="group flex items-center justify-between rounded p-2 text-sm hover:bg-custom-background-90">
               <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 f9b6c57607..2b96c6da8e 100644
--- a/apps/app/components/project/sidebar-list.tsx
+++ b/apps/app/components/project/sidebar-list.tsx
@@ -151,10 +151,12 @@ export const ProjectSidebarList: FC = () => {
         data={projectToDelete}
         user={user}
       />
-      <div className="mt-2.5 h-full overflow-y-auto border-t border-brand-base bg-brand-sidebar pt-2.5">
+      <div className="mt-2.5 h-full overflow-y-auto border-t border-custom-sidebar-border-80 bg-custom-sidebar-background-100 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>}
+            {!sidebarCollapse && (
+              <h5 className="text-sm font-semibold text-custom-sidebar-text-200">Favorites</h5>
+            )}
             {favoriteProjects.map((favoriteProject) => {
               const project = favoriteProject.project_detail;
 
@@ -172,7 +174,9 @@ export const ProjectSidebarList: FC = () => {
           </div>
         )}
         <div className="flex flex-col space-y-2 p-3">
-          {!sidebarCollapse && <h5 className="text-sm font-semibold text-gray-400">Projects</h5>}
+          {!sidebarCollapse && (
+            <h5 className="text-sm font-semibold text-custom-sidebar-text-200">Projects</h5>
+          )}
           {projects ? (
             <>
               {normalProjects.length > 0 ? (
@@ -189,13 +193,13 @@ export const ProjectSidebarList: FC = () => {
               ) : (
                 <div className="space-y-3 text-center">
                   {!sidebarCollapse && (
-                    <h4 className="text-sm text-brand-secondary">
+                    <h4 className="text-sm text-custom-text-200">
                       You don{"'"}t have any project yet
                     </h4>
                   )}
                   <button
                     type="button"
-                    className="group flex w-full items-center justify-center gap-2 rounded-md bg-brand-surface-2 p-2 text-xs text-brand-base"
+                    className="group flex w-full items-center justify-center gap-2 rounded-md bg-custom-background-80 p-2 text-xs text-custom-text-100"
                     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 584c65fe8c..9edb5c6cd5 100644
--- a/apps/app/components/project/single-integration-card.tsx
+++ b/apps/app/components/project/single-integration-card.tsx
@@ -93,7 +93,7 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
   return (
     <>
       {integration && (
-        <div className="flex items-center justify-between gap-2 rounded-[10px] border border-brand-base bg-brand-base p-5">
+        <div className="flex items-center justify-between gap-2 rounded-[10px] border border-custom-border-80 bg-custom-background-100 p-5">
           <div className="flex items-start gap-4">
             <div className="h-12 w-12 flex-shrink-0">
               <Image
@@ -105,7 +105,7 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
               <h3 className="flex items-center gap-4 text-xl font-semibold">
                 {integration.integration_detail.title}
               </h3>
-              <p className="text-sm text-brand-secondary">
+              <p className="text-sm text-custom-text-200">
                 {integrationDetails[integration.integration_detail.provider].description}
               </p>
             </div>
diff --git a/apps/app/components/project/single-project-card.tsx b/apps/app/components/project/single-project-card.tsx
index b4fe9c1b19..a66df7413c 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] bg-brand-base shadow">
+        <div className="flex flex-col rounded-[10px] bg-custom-background-90 shadow">
           <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
             <a>
               <div className="relative h-32 w-full rounded-t-[10px]">
@@ -178,11 +178,11 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
               </div>
             </a>
           </Link>
-          <div className="flex h-full flex-col rounded-b-[10px] p-4 text-brand-secondary">
+          <div className="flex h-full flex-col rounded-b-[10px] p-4 text-custom-text-200">
             <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
               <a>
                 <div className="flex items-center gap-1">
-                  <h3 className="text-1.5xl font-medium text-brand-base">{project.name}</h3>
+                  <h3 className="text-1.5xl font-medium text-custom-text-100">{project.name}</h3>
                   {project.emoji ? (
                     <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
                       {renderEmoji(project.emoji)}
@@ -216,7 +216,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-brand-surface-1">
+                      <a className="grid cursor-pointer place-items-center rounded p-1 duration-300 hover:bg-custom-background-90">
                         <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 51727b5b32..6656b4b469 100644
--- a/apps/app/components/project/single-sidebar-project.tsx
+++ b/apps/app/components/project/single-sidebar-project.tsx
@@ -83,7 +83,7 @@ export const SingleSidebarProject: React.FC<Props> = ({
     <Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
       {({ open }) => (
         <>
-          <div className="flex items-center gap-x-1">
+          <div className="flex items-center gap-x-1 text-custom-sidebar-text-100">
             <Disclosure.Button
               as="div"
               className={`flex w-full cursor-pointer select-none items-center rounded-md py-2 text-left text-sm font-medium ${
@@ -182,13 +182,13 @@ export const SingleSidebarProject: React.FC<Props> = ({
                     <a
                       className={`group flex items-center rounded-md p-2 text-xs font-medium outline-none ${
                         router.asPath.includes(item.href)
-                          ? "bg-brand-surface-2 text-brand-base"
-                          : "text-brand-secondary hover:bg-brand-surface-2 hover:text-brand-secondary focus:bg-brand-surface-2 focus:text-brand-secondary"
+                          ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
+                          : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-90 focus:bg-custom-sidebar-background-90"
                       } ${sidebarCollapse ? "justify-center" : ""}`}
                     >
-                      <div className="grid place-items-center">
+                      <div className="grid place-items-center text-custom-sidebar-text-100">
                         <item.icon
-                          className={`h-5 w-5 flex-shrink-0 text-brand-secondary ${
+                          className={`h-5 w-5 flex-shrink-0 text-custom-sidebar-text-200 ${
                             !sidebarCollapse ? "mr-3" : ""
                           }`}
                           color="#858e96"
diff --git a/apps/app/components/rich-text-editor/index.tsx b/apps/app/components/rich-text-editor/index.tsx
index 874f7da477..9e76572511 100644
--- a/apps/app/components/rich-text-editor/index.tsx
+++ b/apps/app/components/rich-text-editor/index.tsx
@@ -145,7 +145,8 @@ const RemirrorRichTextEditor: React.FC<IRemirrorRichTextEditor> = (props) => {
         uploadHandler: uploadImageHandler,
         createPlaceholder() {
           const div = document.createElement("div");
-          div.className = "w-full aspect-video bg-brand-surface-2 animate-pulse";
+          div.className =
+            "w-full aspect-video bg-custom-background-80 text-custom-text-200 animate-pulse";
           return div;
         },
       }),
@@ -185,10 +186,10 @@ const RemirrorRichTextEditor: React.FC<IRemirrorRichTextEditor> = (props) => {
         manager={manager}
         initialContent={state}
         classNames={[
-          `p-3 relative focus:outline-none rounded-md focus:border-brand-base ${
-            noBorder ? "" : "border border-brand-base"
+          `p-3 relative focus:outline-none rounded-md focus:border-custom-border-80 ${
+            noBorder ? "" : "border border-custom-border-80"
           } ${
-            borderOnFocus ? "focus:border border-brand-base" : "focus:border-0"
+            borderOnFocus ? "focus:border border-custom-border-80" : "focus:border-0"
           } ${customClassName}`,
         ]}
         editable={editable}
diff --git a/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx b/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx
index e8e081370e..3830b0bf47 100644
--- a/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx
+++ b/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx
@@ -209,8 +209,8 @@ export const CustomFloatingToolbar: React.FC<Props> = ({
   }, [clickEdit]);
 
   return (
-    <div className="z-[99999] flex flex-col items-center gap-y-2 divide-x divide-y divide-brand-base rounded border border-brand-base bg-brand-surface-2 p-1 px-0.5 shadow-md">
-      <div className="flex items-center gap-y-2 divide-x divide-brand-base">
+    <div className="z-[99999] flex flex-col items-center gap-y-2 divide-x divide-y divide-custom-border-80 rounded border border-custom-border-80 bg-custom-background-80 p-1 px-0.5 shadow-md">
+      <div className="flex items-center gap-y-2 divide-x divide-custom-border-80">
         <div className="flex items-center gap-x-1 px-2">
           <ToggleHeadingButton
             attrs={{
@@ -242,7 +242,7 @@ export const CustomFloatingToolbar: React.FC<Props> = ({
           <div className="flex items-center gap-x-1 px-2">
             <button
               type="button"
-              className="rounded py-1 px-1.5 text-xs hover:bg-brand-surface-1"
+              className="rounded py-1 px-1.5 text-xs hover:bg-custom-background-90"
               onClick={() => console.log(editorState.selection.$anchor.nodeBefore)}
             >
               AI
diff --git a/apps/app/components/rich-text-editor/toolbar/link.tsx b/apps/app/components/rich-text-editor/toolbar/link.tsx
index a47c45c1a5..045736b995 100644
--- a/apps/app/components/rich-text-editor/toolbar/link.tsx
+++ b/apps/app/components/rich-text-editor/toolbar/link.tsx
@@ -173,12 +173,15 @@ export const FloatingLinkToolbar = () => {
   return (
     <>
       {!isEditing && (
-        <FloatingToolbar className="rounded bg-brand-surface-2 p-1 shadow-lg">
+        <FloatingToolbar className="rounded bg-custom-background-80 p-1 shadow-lg">
           {linkEditButtons}
         </FloatingToolbar>
       )}
       {!isEditing && empty && (
-        <FloatingToolbar positioner={linkPositioner} className="rounded bg-brand-surface-2 p-1 shadow-lg">
+        <FloatingToolbar
+          positioner={linkPositioner}
+          className="rounded bg-custom-background-80 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 d8f8e24e2a..20f49b6dba 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-brand-surface-1"
+        className="rounded p-1 hover:bg-custom-background-90"
       >
         <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-brand-surface-1"
+        className="rounded p-1 hover:bg-custom-background-90"
       >
         <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 cbbc6cf5b9..870230bd8c 100644
--- a/apps/app/components/search-listbox/index.tsx
+++ b/apps/app/components/search-listbox/index.tsx
@@ -84,14 +84,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  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 ${
+            className={`flex cursor-pointer items-center gap-1 rounded-md border  border-custom-border-80 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary ${
               buttonClassName || ""
             }`}
           >
             {icon ?? null}
             <span
               className={`hidden truncate sm:block ${
-                value === null || value === undefined ? "" : "text-brand-base"
+                value === null || value === undefined ? "" : "text-custom-text-100"
               }`}
             >
               {Array.isArray(value)
@@ -110,7 +110,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-brand-surface-2 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-custom-background-80 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none  ${
                 optionsFontsize === "sm"
                   ? "text-xs"
                   : optionsFontsize === "md"
@@ -139,7 +139,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-brand-base`
+                          } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-custom-text-100`
                         }
                         value={option.value}
                       >
@@ -148,12 +148,12 @@ const SearchListbox: React.FC<Props> = ({
                       </Combobox.Option>
                     ))
                   ) : (
-                    <p className="text-xs text-brand-secondary px-2">
+                    <p className="text-xs text-custom-text-200 px-2">
                       No {title.toLowerCase()} found
                     </p>
                   )
                 ) : (
-                  <p className="text-xs text-brand-secondary px-2">Loading...</p>
+                  <p className="text-xs text-custom-text-200 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 dca001932e..5dd84fd48b 100644
--- a/apps/app/components/states/create-state-modal.tsx
+++ b/apps/app/components/states/create-state-modal.tsx
@@ -128,10 +128,13 @@ 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-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">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                    <Dialog.Title
+                      as="h3"
+                      className="text-lg font-medium leading-6 text-custom-text-100"
+                    >
                       Create State
                     </Dialog.Title>
                     <div className="mt-2 space-y-3">
@@ -177,8 +180,8 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                           {({ open }) => (
                             <>
                               <Popover.Button
-                                className={`group inline-flex items-center rounded-md bg-brand-surface-2 text-base font-medium hover:text-brand-base focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
-                                  open ? "text-brand-base" : "text-brand-secondary"
+                                className={`group inline-flex items-center rounded-md bg-custom-background-80 text-base font-medium hover:text-custom-text-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
+                                  open ? "text-custom-text-100" : "text-custom-text-200"
                                 }`}
                               >
                                 <span>Color</span>
@@ -191,7 +194,7 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                                   />
                                 )}
                                 <ChevronDownIcon
-                                  className={`ml-2 h-5 w-5 group-hover:text-brand-secondary ${
+                                  className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
                                     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 94062878f7..5453ccc344 100644
--- a/apps/app/components/states/create-update-state-inline.tsx
+++ b/apps/app/components/states/create-update-state-inline.tsx
@@ -169,15 +169,16 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
-      className="flex items-center gap-x-2 rounded-[10px] bg-brand-base p-5"
+      className="flex items-center gap-x-2 rounded-[10px] bg-custom-background-100 p-5"
     >
       <div className="flex-shrink-0">
         <Popover className="relative flex h-full w-full items-center justify-center">
           {({ open }) => (
             <>
               <Popover.Button
-                className={`group inline-flex items-center text-base font-medium focus:outline-none ${open ? "text-brand-base" : "text-brand-secondary"
-                  }`}
+                className={`group inline-flex items-center text-base font-medium focus:outline-none ${
+                  open ? "text-custom-text-100" : "text-custom-text-200"
+                }`}
               >
                 {watch("color") && watch("color") !== "" && (
                   <span
@@ -229,7 +230,9 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
           name="group"
           control={control}
           render={({ field: { value, onChange } }) => (
-            <Tooltip tooltipContent={groupLength === 1 ? "Cannot have an empty group." : "Choose State"}  >
+            <Tooltip
+              tooltipContent={groupLength === 1 ? "Cannot have an empty group." : "Choose State"}
+            >
               <div>
                 <CustomSelect
                   disabled={groupLength === 1}
diff --git a/apps/app/components/states/delete-state-modal.tsx b/apps/app/components/states/delete-state-modal.tsx
index a92f235c46..bbc115ef6f 100644
--- a/apps/app/components/states/delete-state-modal.tsx
+++ b/apps/app/components/states/delete-state-modal.tsx
@@ -108,8 +108,8 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-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">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                       <ExclamationTriangleIcon
@@ -120,16 +120,16 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-brand-base"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
                       >
                         Delete State
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-brand-secondary">
+                        <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete state-{" "}
-                          <span className="font-medium text-brand-base">{data?.name}</span>? All of
-                          the data related to the state will be permanently removed. This action
-                          cannot be undone.
+                          <span className="font-medium text-custom-text-100">{data?.name}</span>?
+                          All of the data related to the state will be permanently removed. This
+                          action cannot be undone.
                         </p>
                       </div>
                     </div>
diff --git a/apps/app/components/states/single-state.tsx b/apps/app/components/states/single-state.tsx
index 8bf4198fe6..daf54e1448 100644
--- a/apps/app/components/states/single-state.tsx
+++ b/apps/app/components/states/single-state.tsx
@@ -160,19 +160,19 @@ export const SingleState: React.FC<Props> = ({
   };
 
   return (
-    <div className="group flex items-center justify-between gap-2 border-brand-base bg-brand-base p-5 first:rounded-t-[10px] last:rounded-b-[10px]">
+    <div className="group flex items-center justify-between gap-2 border-custom-border-80 bg-custom-background-100 p-5 first:rounded-t-[10px] last:rounded-b-[10px]">
       <div className="flex items-center gap-3">
         {getStateGroupIcon(state.group, "20", "20", state.color)}
         <div>
           <h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
-          <p className="text-xs text-brand-secondary">{state.description}</p>
+          <p className="text-xs text-custom-text-200">{state.description}</p>
         </div>
       </div>
       <div className="flex items-center gap-2">
         {index !== 0 && (
           <button
             type="button"
-            className="hidden text-brand-secondary group-hover:inline-block"
+            className="hidden text-custom-text-200 group-hover:inline-block"
             onClick={() => handleMove(state, "up")}
           >
             <ArrowUpIcon className="h-4 w-4" />
@@ -181,18 +181,18 @@ export const SingleState: React.FC<Props> = ({
         {!(index === groupLength - 1) && (
           <button
             type="button"
-            className="hidden text-brand-secondary group-hover:inline-block"
+            className="hidden text-custom-text-200 group-hover:inline-block"
             onClick={() => handleMove(state, "down")}
           >
             <ArrowDownIcon className="h-4 w-4" />
           </button>
         )}
         {state.default ? (
-          <span className="text-xs text-brand-secondary">Default</span>
+          <span className="text-xs text-custom-text-200">Default</span>
         ) : (
           <button
             type="button"
-            className="hidden text-xs text-brand-secondary group-hover:inline-block"
+            className="hidden text-xs text-custom-text-200 group-hover:inline-block"
             onClick={handleMakeDefault}
             disabled={isSubmitting}
           >
@@ -201,7 +201,7 @@ export const SingleState: React.FC<Props> = ({
         )}
 
         <button type="button" className="grid place-items-center" onClick={handleEditState}>
-          <PencilSquareIcon className="h-4 w-4 text-brand-secondary" />
+          <PencilSquareIcon className="h-4 w-4 text-custom-text-200" />
         </button>
         <button
           type="button"
diff --git a/apps/app/components/ui/avatar.tsx b/apps/app/components/ui/avatar.tsx
index c91541aaa2..f76bd340a0 100644
--- a/apps/app/components/ui/avatar.tsx
+++ b/apps/app/components/ui/avatar.tsx
@@ -37,7 +37,7 @@ export const Avatar: React.FC<AvatarProps> = ({
     {user && user.avatar && user.avatar !== "" ? (
       <div
         className={`rounded-full border-2 ${
-          index ? "border-brand-surface-1 bg-brand-surface-2" : "border-transparent"
+          index ? "border-custom-border-80 bg-custom-background-80" : "border-transparent"
         }`}
         style={{
           height: height,
@@ -52,7 +52,7 @@ export const Avatar: React.FC<AvatarProps> = ({
       </div>
     ) : (
       <div
-        className="grid place-items-center rounded-full border-2 border-brand-surface-1 bg-gray-700 text-xs capitalize text-white"
+        className="grid place-items-center rounded-full border-2 border-custom-border-80 bg-gray-700 text-xs capitalize text-white"
         style={{
           height: height,
           width: width,
@@ -90,7 +90,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-brand-surface-2">
+      <div className="h-5 w-5 rounded-full border-2 border-white bg-custom-background-80">
         <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 d86227e3a3..357832f4e5 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-brand-accent font-medium duration-300 ${
+    className={`${className} border border-custom-primary 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-brand-accent hover:bg-brand-accent hover:text-white"
-        : "text-white bg-brand-accent hover:border-opacity-90 hover:bg-opacity-90"
+        ? "bg-transparent text-custom-primary hover:bg-custom-primary hover:text-white"
+        : "text-white bg-custom-primary hover:border-opacity-90 hover:bg-opacity-90"
     }  ${loading ? "cursor-wait" : ""}`}
     onClick={onClick}
     disabled={disabled || loading}
diff --git a/apps/app/components/ui/buttons/secondary-button.tsx b/apps/app/components/ui/buttons/secondary-button.tsx
index 4b857a72c5..7ebd54d666 100644
--- a/apps/app/components/ui/buttons/secondary-button.tsx
+++ b/apps/app/components/ui/buttons/secondary-button.tsx
@@ -13,16 +13,16 @@ export const SecondaryButton: React.FC<ButtonProps> = ({
 }) => (
   <button
     type={type}
-    className={`${className} border border-brand-base font-medium duration-300 ${
+    className={`${className} border border-custom-border-80 font-medium duration-300 ${
       size === "sm"
         ? "rounded px-3 py-2 text-xs"
         : size === "md"
         ? "rounded-md px-3.5 py-2 text-sm"
         : "rounded-lg px-4 py-2 text-base"
-    } ${disabled ? "cursor-not-allowed border-brand-base bg-brand-surface-1" : ""} ${
+    } ${disabled ? "cursor-not-allowed border-custom-border-80 bg-custom-background-90" : ""} ${
       outline
-        ? "bg-transparent hover:bg-brand-surface-2"
-        : "bg-brand-surface-2 hover:border-opacity-70 hover:bg-opacity-70"
+        ? "bg-transparent hover:bg-custom-background-80"
+        : "bg-custom-background-80 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 755318b346..f0c2492370 100644
--- a/apps/app/components/ui/context-menu.tsx
+++ b/apps/app/components/ui/context-menu.tsx
@@ -37,14 +37,14 @@ const ContextMenu = ({ position, children, title, isOpen, setIsOpen }: Props) =>
       }`}
     >
       <div
-        className={`fixed z-20 flex min-w-[8rem] flex-col items-stretch gap-1 rounded-md border border-brand-base bg-brand-surface-1 p-2 text-xs shadow-lg`}
+        className={`fixed z-20 flex min-w-[8rem] flex-col items-stretch gap-1 rounded-md border border-custom-border-80 bg-custom-background-90 p-2 text-xs shadow-lg`}
         style={{
           left: `${position.x}px`,
           top: `${position.y}px`,
         }}
       >
         {title && (
-          <h4 className="border-b border-brand-base px-1 py-1 pb-2 text-[0.8rem] font-medium">
+          <h4 className="border-b border-custom-border-80 px-1 py-1 pb-2 text-[0.8rem] font-medium">
             {title}
           </h4>
         )}
@@ -75,7 +75,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-brand-secondary hover:bg-brand-surface-2`}
+          className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80`}
         >
           <>
             {Icon && <Icon />}
@@ -86,7 +86,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-brand-secondary hover:bg-brand-surface-2`}
+        className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80`}
         onClick={onClick}
       >
         <>
diff --git a/apps/app/components/ui/custom-menu.tsx b/apps/app/components/ui/custom-menu.tsx
index 958453b28d..0569462716 100644
--- a/apps/app/components/ui/custom-menu.tsx
+++ b/apps/app/components/ui/custom-menu.tsx
@@ -59,7 +59,7 @@ const CustomMenu = ({
             {ellipsis || verticalEllipsis ? (
               <Menu.Button
                 type="button"
-                className="relative grid place-items-center rounded p-1 text-brand-secondary hover:bg-brand-surface-2 hover:text-brand-base focus:outline-none"
+                className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none"
               >
                 <EllipsisHorizontalIcon
                   className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`}
@@ -68,8 +68,8 @@ const CustomMenu = ({
             ) : (
               <Menu.Button
                 type="button"
-                className={`flex cursor-pointer items-center justify-between gap-1 px-2.5 py-1 text-xs duration-300 hover:bg-brand-surface-2 ${
-                  open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
+                className={`flex cursor-pointer items-center justify-between gap-1 px-2.5 py-1 text-xs duration-300 hover:bg-custom-background-80 ${
+                  open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
                 } ${
                   textAlignment === "right"
                     ? "text-right"
@@ -79,7 +79,7 @@ const CustomMenu = ({
                 } ${
                   noBorder
                     ? "rounded-md"
-                    : "rounded-md border border-brand-base shadow-sm focus:outline-none"
+                    : "rounded-md border border-custom-border-80 shadow-sm focus:outline-none"
                 } ${
                   width === "sm"
                     ? "w-10"
@@ -133,8 +133,8 @@ const CustomMenu = ({
                 : "min-w-full"
             } ${
               menuItemsWhiteBg
-                ? "border-brand-surface-1 bg-brand-base"
-                : "border-brand-base bg-brand-surface-1"
+                ? "border-custom-border-90 bg-custom-background-100"
+                : "border-custom-border-80 bg-custom-background-90"
             } ${menuItemsClassName}`}
           >
             <div className="py-1">{children}</div>
@@ -158,8 +158,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
         <Link href={href ?? ""}>
           <a
             className={`${className} ${
-              active ? "bg-brand-surface-2" : ""
-            } hover:text-brand-muted-1 inline-block w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2`}
+              active ? "bg-custom-background-80" : ""
+            } hover:text-brand-muted-1 inline-block w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80`}
             onClick={close}
           >
             {children}
@@ -169,8 +169,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
         <button
           type="button"
           className={`${className} ${
-            active ? "bg-brand-surface-2" : ""
-          } hover:text-brand-muted-1 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2`}
+            active ? "bg-custom-background-80" : ""
+          } hover:text-brand-muted-1 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80`}
           onClick={onClick}
         >
           {children}
diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
index f9ea3daa1b..059e3633e3 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -79,8 +79,8 @@ export const CustomSearchSelect = ({
             <Combobox.Button as="div">{customButton}</Combobox.Button>
           ) : (
             <Combobox.Button
-              className={`flex w-full border border-brand-base ${
-                disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
+              className={`flex w-full border border-custom-border-80 ${
+                disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
               } ${
                 input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
               } items-center justify-between gap-1 rounded-md shadow-sm duration-300 focus:outline-none focus:ring-1 focus:ring-brand-base ${
@@ -108,18 +108,18 @@ export const CustomSearchSelect = ({
             leaveTo="opacity-0 translate-y-1"
           >
             <Combobox.Options
-              className={`${optionsClassName} absolute min-w-[10rem] border border-brand-base p-2 ${
+              className={`${optionsClassName} absolute min-w-[10rem] border border-custom-border-80 p-2 ${
                 position === "right" ? "right-0" : "left-0"
               } ${
                 verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"
-              } z-10 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none ${
+              } z-10 origin-top-right rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none ${
                 dropdownWidth ? dropdownWidth : ``
               } `}
             >
-              <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="h-3 w-3 text-brand-secondary" />
+              <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-80 bg-custom-background-90 px-2">
+                <MagnifyingGlassIcon className="h-3 w-3 text-custom-text-200" />
                 <Combobox.Input
-                  className="w-full bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
+                  className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
                   onChange={(e) => setQuery(e.target.value)}
                   placeholder="Type to search..."
                   displayValue={(assigned: any) => assigned?.name}
@@ -145,9 +145,9 @@ export const CustomSearchSelect = ({
                         key={option.value}
                         value={option.value}
                         className={({ active, selected }) =>
-                          `${active || selected ? "bg-brand-surface-2" : ""} ${
+                          `${active || selected ? "bg-custom-background-80" : ""} ${
                             selected ? "font-medium" : ""
-                          } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-brand-secondary`
+                          } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
                         }
                       >
                         {({ active, selected }) => (
@@ -175,11 +175,11 @@ export const CustomSearchSelect = ({
                   ) : (
                     <span className="flex items-center gap-2 p-1">
                       {noResultIcon && noResultIcon}
-                      <p className="text-left text-brand-secondary ">No matching results</p>
+                      <p className="text-left text-custom-text-200 ">No matching results</p>
                     </span>
                   )
                 ) : (
-                  <p className="text-center text-brand-secondary">Loading...</p>
+                  <p className="text-center text-custom-text-200">Loading...</p>
                 )}
               </div>
               {footerOption}
diff --git a/apps/app/components/ui/custom-select.tsx b/apps/app/components/ui/custom-select.tsx
index ec55bf29ad..a7456293af 100644
--- a/apps/app/components/ui/custom-select.tsx
+++ b/apps/app/components/ui/custom-select.tsx
@@ -54,9 +54,11 @@ const CustomSelect = ({
       ) : (
         <Listbox.Button
           className={`flex w-full ${
-            disabled ? "cursor-not-allowed text-brand-secondary" : "cursor-pointer hover:bg-brand-surface-2"
-          } items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 focus:outline-none ${
-            input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+            disabled
+              ? "cursor-not-allowed text-custom-text-200"
+              : "cursor-pointer hover:bg-custom-background-80"
+          } items-center justify-between gap-1 rounded-md border border-custom-border-80 shadow-sm duration-300 focus:outline-none ${
+            input ? "border-custom-border-80 px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
           } ${
             textAlignment === "right"
               ? "text-right"
@@ -81,11 +83,11 @@ const CustomSelect = ({
       leaveTo="transform opacity-0 scale-95"
     >
       <Listbox.Options
-        className={`${optionsClassName} absolute border border-brand-base ${
+        className={`${optionsClassName} absolute border border-custom-border-80 ${
           position === "right" ? "right-0" : "left-0"
         } ${
           verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"
-        } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none ${
+        } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none ${
           width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
         } ${input ? "max-h-48" : ""} ${
           maxHeight === "lg"
@@ -115,9 +117,9 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
   <Listbox.Option
     value={value}
     className={({ active, selected }) =>
-      `${className} ${active || selected ? "bg-brand-surface-2" : ""} ${
+      `${className} ${active || selected ? "bg-custom-background-80" : ""} ${
         selected ? "font-medium" : ""
-      } cursor-pointer select-none truncate rounded px-1 py-1.5 text-brand-secondary`
+      } cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200`
     }
   >
     {({ selected }) => (
diff --git a/apps/app/components/ui/date.tsx b/apps/app/components/ui/date.tsx
index d5a2cb7225..00e51940d8 100644
--- a/apps/app/components/ui/date.tsx
+++ b/apps/app/components/ui/date.tsx
@@ -17,11 +17,11 @@ export const DateSelect: React.FC<Props> = ({ value, onChange, label }) => (
   <Popover className="relative flex items-center justify-center  rounded-lg">
     {({ open }) => (
       <>
-        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-300 hover:bg-brand-surface-2">
-          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-brand-secondary">
+        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-80 text-xs shadow-sm duration-300 hover:bg-custom-background-80">
+          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200">
             {value ? (
               <>
-                <span className="text-brand-base">{renderShortDateWithYearFormat(value)}</span>
+                <span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
                 <button onClick={() => onChange(null)}>
                   <XMarkIcon className="h-3 w-3" />
                 </button>
diff --git a/apps/app/components/ui/datepicker.tsx b/apps/app/components/ui/datepicker.tsx
index 9b20dcafc1..b8b79b31e1 100644
--- a/apps/app/components/ui/datepicker.tsx
+++ b/apps/app/components/ui/datepicker.tsx
@@ -41,13 +41,13 @@ export const CustomDatePicker: React.FC<Props> = ({
         ? "block px-2 py-2 text-sm focus:outline-none"
         : renderAs === "button"
         ? `px-2 py-1 text-xs shadow-sm ${
-            disabled ? "" : "hover:bg-brand-surface-2"
-          } duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`
+            disabled ? "" : "hover:bg-custom-background-80"
+          } duration-300 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary`
         : ""
     } ${error ? "border-red-500 bg-red-100" : ""} ${
       disabled ? "cursor-not-allowed" : "cursor-pointer"
     } ${
-      noBorder ? "" : "border border-brand-base"
+      noBorder ? "" : "border border-custom-border-80"
     } w-full rounded-md bg-transparent caret-transparent ${className}`}
     dateFormat="MMM dd, yyyy"
     isClearable={isClearable}
diff --git a/apps/app/components/ui/empty-space.tsx b/apps/app/components/ui/empty-space.tsx
index f853defb6f..d704fa1cc8 100644
--- a/apps/app/components/ui/empty-space.tsx
+++ b/apps/app/components/ui/empty-space.tsx
@@ -18,22 +18,22 @@ const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, I
     <div className="max-w-lg">
       {Icon ? (
         <div className="mb-4">
-          <Icon className="h-14 w-14 text-brand-secondary" />
+          <Icon className="h-14 w-14 text-custom-text-200" />
         </div>
       ) : null}
 
-      <h2 className="text-lg font-medium text-brand-base">{title}</h2>
-      <div className="mt-1 text-sm text-brand-secondary">{description}</div>
+      <h2 className="text-lg font-medium text-custom-text-100">{title}</h2>
+      <div className="mt-1 text-sm text-custom-text-200">{description}</div>
       <ul
         role="list"
-        className="mt-6 divide-y divide-brand-base border-t border-b border-brand-base"
+        className="mt-6 divide-y divide-custom-border-80 border-t border-b border-custom-border-80"
       >
         {children}
       </ul>
       {link ? (
         <div className="mt-6 flex">
           <Link href={link.href}>
-            <a className="text-sm font-medium text-brand-accent hover:text-brand-accent">
+            <a className="text-sm font-medium text-custom-primary hover:text-custom-primary">
               {link.text}
               <span aria-hidden="true"> &rarr;</span>
             </a>
@@ -60,17 +60,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-brand-accent">
+          <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-custom-primary">
             <Icon className="h-6 w-6 text-white" aria-hidden="true" />
           </span>
         </div>
         <div className="min-w-0 flex-1">
-          <div className="text-sm font-medium text-brand-base">{title}</div>
-          {description ? <div className="text-sm text-brand-secondary">{description}</div> : null}
+          <div className="text-sm font-medium text-custom-text-100">{title}</div>
+          {description ? <div className="text-sm text-custom-text-200">{description}</div> : null}
         </div>
         <div className="flex-shrink-0 self-center">
           <ChevronRightIcon
-            className="h-5 w-5 text-brand-base group-hover:text-brand-secondary"
+            className="h-5 w-5 text-custom-text-100 group-hover:text-custom-text-200"
             aria-hidden="true"
           />
         </div>
diff --git a/apps/app/components/ui/empty-state.tsx b/apps/app/components/ui/empty-state.tsx
index 4e469d9679..f22773ace7 100644
--- a/apps/app/components/ui/empty-state.tsx
+++ b/apps/app/components/ui/empty-state.tsx
@@ -45,13 +45,13 @@ export const EmptyState: React.FC<Props> = ({ type, title, description, imgURL,
       {shortcutKey(type) && (
         <span>
           Use shortcut{" "}
-          <span className="text-brand-muted-1 mx-1 rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium">
+          <span className="text-brand-muted-1 mx-1 rounded-sm border border-custom-border-80 bg-custom-background-90 px-2 py-1 text-sm font-medium">
             {shortcutKey(type)}
           </span>{" "}
           to create {type} from anywhere.
         </span>
       )}
-      <p className="max-w-md text-sm text-brand-secondary">{description}</p>
+      <p className="max-w-md text-sm text-custom-text-200">{description}</p>
 
       <PrimaryButton
         className="flex items-center gap-1"
diff --git a/apps/app/components/ui/graphs/calendar-graph.tsx b/apps/app/components/ui/graphs/calendar-graph.tsx
index 940eacc708..0725c425af 100644
--- a/apps/app/components/ui/graphs/calendar-graph.tsx
+++ b/apps/app/components/ui/graphs/calendar-graph.tsx
@@ -17,16 +17,16 @@ export const CalendarGraph: React.FC<TGraph & Omit<CalendarSvgProps, "height" |
       margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
       colors={
         rest.colors ?? [
-          "rgba(var(--color-accent), 0.2)",
-          "rgba(var(--color-accent), 0.4)",
-          "rgba(var(--color-accent), 0.8)",
-          "rgba(var(--color-accent), 1)",
+          "rgba(var(--color-primary-100), 0.2)",
+          "rgba(var(--color-primary-100), 0.4)",
+          "rgba(var(--color-primary-100), 0.8)",
+          "rgba(var(--color-primary-100), 1)",
         ]
       }
-      emptyColor={rest.emptyColor ?? "rgb(var(--color-bg-surface-2))"}
+      emptyColor={rest.emptyColor ?? "rgb(var(--color-background-80))"}
       dayBorderColor={rest.dayBorderColor ?? "transparent"}
       daySpacing={rest.daySpacing ?? 5}
-      monthBorderColor={rest.monthBorderColor ?? "rgb(var(--color-bg-base))"}
+      monthBorderColor={rest.monthBorderColor ?? "rgb(var(--color-background-100))"}
       theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
       {...rest}
     />
diff --git a/apps/app/components/ui/input/index.tsx b/apps/app/components/ui/input/index.tsx
index b6e09f876f..377061192f 100644
--- a/apps/app/components/ui/input/index.tsx
+++ b/apps/app/components/ui/input/index.tsx
@@ -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-brand-base"
+          ? "rounded-md border border-custom-border-80"
           : mode === "transparent"
-          ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-brand-accent"
+          ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
           : mode === "trueTransparent"
           ? "rounded border-none bg-transparent ring-0"
           : ""
diff --git a/apps/app/components/ui/integration-and-import-export-banner.tsx b/apps/app/components/ui/integration-and-import-export-banner.tsx
index 19bbc353d8..fd24acaab2 100644
--- a/apps/app/components/ui/integration-and-import-export-banner.tsx
+++ b/apps/app/components/ui/integration-and-import-export-banner.tsx
@@ -7,8 +7,8 @@ type Props = {
 export const IntegrationAndImportExportBanner: React.FC<Props> = ({ bannerName }) => (
   <div className="flex flex-col items-start gap-3">
     <h3 className="text-2xl font-semibold">{bannerName}</h3>
-    <div className="flex items-center gap-3 rounded-[10px] border border-brand-accent/75 bg-brand-accent/5 p-4 text-sm text-brand-base">
-      <ExclamationIcon height={24} width={24} className="fill-current text-brand-base" />
+    <div className="flex items-center gap-3 rounded-[10px] border border-custom-primary/75 bg-custom-primary/5 p-4 text-sm text-custom-text-100">
+      <ExclamationIcon height={24} width={24} className="fill-current text-custom-text-100" />
       <p className="leading-5">
         Integrations and importers are only available on the cloud version. We plan to open-source
         our SDKs in the near future so that the community can request or contribute integrations as
diff --git a/apps/app/components/ui/labels-list.tsx b/apps/app/components/ui/labels-list.tsx
index 564811f190..42fa164d67 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-brand-base
+              className={`h-4 w-4 flex-shrink-0 rounded-full border border-custom-border-80
               `}
               style={{
                 backgroundColor: color && color !== "" ? color : "#000000",
diff --git a/apps/app/components/ui/loader.tsx b/apps/app/components/ui/loader.tsx
index 107f03e8c8..b9d13883a7 100644
--- a/apps/app/components/ui/loader.tsx
+++ b/apps/app/components/ui/loader.tsx
@@ -17,7 +17,7 @@ type ItemProps = {
 };
 
 const Item: React.FC<ItemProps> = ({ height = "auto", width = "auto" }) => (
-  <div className="rounded-md bg-brand-surface-2" style={{ height: height, width: width }} />
+  <div className="rounded-md bg-custom-background-80" style={{ height: height, width: width }} />
 );
 
 Loader.Item = Item;
diff --git a/apps/app/components/ui/markdown-to-component.tsx b/apps/app/components/ui/markdown-to-component.tsx
index cb716bc229..53b157b19c 100644
--- a/apps/app/components/ui/markdown-to-component.tsx
+++ b/apps/app/components/ui/markdown-to-component.tsx
@@ -34,23 +34,23 @@ interface Props {
 }
 
 const HeadingPrimary: CustomComponent = ({ children }) => (
-  <h1 className="text-lg font-semibold text-brand-base">{children}</h1>
+  <h1 className="text-lg font-semibold text-custom-text-100">{children}</h1>
 );
 
 const HeadingSecondary: CustomComponent = ({ children }) => (
-  <h3 className="text-base font-semibold text-brand-base">{children}</h3>
+  <h3 className="text-base font-semibold text-custom-text-100">{children}</h3>
 );
 
 const Paragraph: CustomComponent = ({ children }) => (
-  <p className="text-sm text-brand-secondary">{children}</p>
+  <p className="text-sm text-custom-text-200">{children}</p>
 );
 
 const OrderedList: CustomComponent = ({ children }) => (
-  <ol className="ml-8 mb-4 list-decimal text-sm text-brand-secondary">{children}</ol>
+  <ol className="ml-8 mb-4 list-decimal text-sm text-custom-text-200">{children}</ol>
 );
 
 const UnorderedList: CustomComponent = ({ children }) => (
-  <ul className="ml-8 mb-4 list-disc text-sm text-brand-secondary">{children}</ul>
+  <ul className="ml-8 mb-4 list-disc text-sm text-custom-text-200">{children}</ul>
 );
 
 const Link: CustomComponent = ({ href, children }) => (
diff --git a/apps/app/components/ui/multi-input.tsx b/apps/app/components/ui/multi-input.tsx
index e9890564de..b8249a7480 100644
--- a/apps/app/components/ui/multi-input.tsx
+++ b/apps/app/components/ui/multi-input.tsx
@@ -53,12 +53,12 @@ export const MultiInput = ({ label, name, placeholder, setValue, watch }: any) =
 
   return (
     <>
-      {label && <label className="mb-2 text-brand-secondary">{label}</label>}
-      <div className="rounded-md border border-brand-base p-2">
+      {label && <label className="mb-2 text-custom-text-200">{label}</label>}
+      <div className="rounded-md border border-custom-border-80 p-2">
         {watch(name)?.map((tag: any, index: number) => (
           <button
             type="button"
-            className="m-1.5 rounded-full bg-brand-surface-2 px-3 py-2 "
+            className="m-1.5 rounded-full bg-custom-background-80 px-3 py-2 "
             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 e0d5b0f170..5bf871fb65 100644
--- a/apps/app/components/ui/multi-level-dropdown.tsx
+++ b/apps/app/components/ui/multi-level-dropdown.tsx
@@ -43,8 +43,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 border-brand-base px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none ${
-                  open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
+                className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-80 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none ${
+                  open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
                 }`}
               >
                 {label}
@@ -62,7 +62,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-brand-surface-1 text-xs shadow-lg focus:outline-none"
+                className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none"
               >
                 {options.map((option) => (
                   <div className="relative p-1" key={option.id}>
@@ -85,8 +85,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                         <>
                           <div
                             className={`${
-                              active || option.selected ? "bg-brand-surface-2" : ""
-                            } flex items-center gap-1 rounded px-1 py-1.5 text-brand-secondary ${
+                              active || option.selected ? "bg-custom-background-80" : ""
+                            } flex items-center gap-1 rounded px-1 py-1.5 text-custom-text-200 ${
                               direction === "right" ? "justify-between" : ""
                             }`}
                           >
@@ -103,7 +103,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-brand-surface-1 shadow-lg focus:outline-none ${
+                        className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-custom-background-90 shadow-lg focus:outline-none ${
                           direction === "left"
                             ? "right-full -translate-x-1"
                             : "left-full translate-x-1"
@@ -129,8 +129,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                                   type="button"
                                   onClick={() => onSelect(child.value)}
                                   className={`${
-                                    child.selected ? "bg-brand-surface-2" : ""
-                                  } flex w-full items-center justify-between break-words rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2`}
+                                    child.selected ? "bg-custom-background-80" : ""
+                                  } flex w-full items-center justify-between break-words rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80`}
                                 >
                                   {child.label}{" "}
                                   <CheckIcon
diff --git a/apps/app/components/ui/multi-level-select.tsx b/apps/app/components/ui/multi-level-select.tsx
index a063ee45f2..a194be23c4 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-brand-surface-2 py-2 pl-3 pr-10 text-left shadow-md sm:text-sm"
+              className="relative w-full cursor-default rounded-lg bg-custom-background-80 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-brand-surface-2 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-custom-background-80 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
               >
                 {options.map((option) => (
                   <Listbox.Option
                     key={option.id}
                     className={
-                      "relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-brand-surface-1 hover:text-brand-base"
+                      "relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-custom-background-90 hover:text-custom-text-100"
                     }
                     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 border-brand-base bg-brand-surface-2 ${
+                            className={`absolute h-auto max-h-72 w-72 rounded-lg border border-custom-border-80 bg-custom-background-80 ${
                               direction === "right"
                                 ? "left-full translate-x-2 rounded-tl-none shadow-md"
                                 : "right-full -translate-x-2 rounded-tr-none shadow-md"
@@ -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-brand-surface-1 hover:text-brand-base"
+                                  "relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-custom-background-90 hover:text-custom-text-100"
                                 }
                                 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-brand-base ${
+                              className={`absolute h-0 w-0 border-t-8 border-custom-border-80 ${
                                 direction === "right"
                                   ? "top-0 left-0 -translate-x-2 border-r-8 border-b-8 border-b-transparent border-t-transparent border-l-transparent"
                                   : "top-0 right-0 translate-x-2 border-l-8 border-b-8 border-b-transparent border-t-transparent border-r-transparent"
diff --git a/apps/app/components/ui/product-updates-modal.tsx b/apps/app/components/ui/product-updates-modal.tsx
index 54dba586fd..cca46c8e39 100644
--- a/apps/app/components/ui/product-updates-modal.tsx
+++ b/apps/app/components/ui/product-updates-modal.tsx
@@ -31,7 +31,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -45,19 +45,19 @@ export const ProductUpdatesModal: 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-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
-                <div className="max-h-[600px] overflow-y-auto bg-brand-surface-2 p-5">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="max-h-[600px] overflow-y-auto bg-custom-background-80 p-5">
                   <div className="sm:flex sm:items-start">
                     <div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="flex justify-between text-lg font-medium leading-6 text-brand-base"
+                        className="flex justify-between text-lg font-medium leading-6 text-custom-text-100"
                       >
                         <span>Product Updates</span>
                         <span>
                           <button type="button" onClick={() => setIsOpen(false)}>
                             <XMarkIcon
-                              className="h-6 w-6 text-gray-400 hover:text-brand-secondary"
+                              className="h-6 w-6 text-gray-400 hover:text-custom-text-200"
                               aria-hidden="true"
                             />
                           </button>
@@ -66,13 +66,13 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                       {updates && updates.length > 0 ? (
                         updates.map((item, index) => (
                           <React.Fragment key={item.id}>
-                            <div className="flex items-center gap-3 text-xs text-brand-secondary">
-                              <span className="flex items-center rounded-full border border-brand-base bg-brand-surface-1 px-3 py-1.5 text-xs">
+                            <div className="flex items-center gap-3 text-xs text-custom-text-200">
+                              <span className="flex items-center rounded-full border border-custom-border-80 bg-custom-background-90 px-3 py-1.5 text-xs">
                                 {item.tag_name}
                               </span>
                               <span>{renderLongDateFormat(item.published_at)}</span>
                               {index === 0 && (
-                                <span className="flex items-center rounded-full border border-brand-base bg-brand-accent px-3 py-1.5 text-xs text-white">
+                                <span className="flex items-center rounded-full border border-custom-border-80 bg-custom-primary px-3 py-1.5 text-xs text-white">
                                   New
                                 </span>
                               )}
diff --git a/apps/app/components/ui/range-datepicker.tsx b/apps/app/components/ui/range-datepicker.tsx
index 0dfda41ecf..49143192c4 100644
--- a/apps/app/components/ui/range-datepicker.tsx
+++ b/apps/app/components/ui/range-datepicker.tsx
@@ -45,12 +45,12 @@ export const CustomRangeDatePicker: React.FC<Props> = ({
         ? "block px-3 py-2 text-sm focus:outline-none"
         : renderAs === "button"
         ? `px-3 py-1 text-xs shadow-sm ${
-            disabled ? "" : "hover:bg-brand-surface-2"
-          } duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`
+            disabled ? "" : "hover:bg-custom-background-80"
+          } duration-300 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary`
         : ""
     } ${error ? "border-red-500 bg-red-100" : ""} ${
       disabled ? "cursor-not-allowed" : "cursor-pointer"
-    } w-full rounded-md border border-brand-base bg-transparent caret-transparent ${className}`}
+    } w-full rounded-md border border-custom-border-80 bg-transparent caret-transparent ${className}`}
     dateFormat="dd-MM-yyyy"
     disabled={disabled}
     selectsStart={selectsStart}
diff --git a/apps/app/components/ui/text-area/index.tsx b/apps/app/components/ui/text-area/index.tsx
index 84251b2d46..cc28121edb 100644
--- a/apps/app/components/ui/text-area/index.tsx
+++ b/apps/app/components/ui/text-area/index.tsx
@@ -45,7 +45,7 @@ export const TextArea: React.FC<Props> = ({
   return (
     <>
       {label && (
-        <label htmlFor={id} className="mb-2 text-brand-secondary">
+        <label htmlFor={id} className="mb-2 text-custom-text-200">
           {label}
         </label>
       )}
@@ -70,7 +70,7 @@ export const TextArea: React.FC<Props> = ({
           noPadding ? "" : "px-3 py-2"
         } outline-none ${
           mode === "primary"
-            ? "rounded-md border border-brand-base"
+            ? "rounded-md border border-custom-border-80"
             : mode === "transparent"
             ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme"
             : ""
diff --git a/apps/app/components/ui/toggle-switch.tsx b/apps/app/components/ui/toggle-switch.tsx
index fe4e2c96d6..cc8bfc8c45 100644
--- a/apps/app/components/ui/toggle-switch.tsx
+++ b/apps/app/components/ui/toggle-switch.tsx
@@ -19,8 +19,8 @@ export const ToggleSwitch: React.FC<Props> = (props) => {
       onChange={onChange}
       className={`relative inline-flex ${
         size === "sm" ? "h-3.5 w-6" : size === "md" ? "h-4 w-7" : "h-6 w-11"
-      } flex-shrink-0 cursor-pointer rounded-full border-2 border-brand-base transition-colors duration-200 ease-in-out focus:outline-none ${
-        value ? "bg-green-500" : "bg-brand-surface-2"
+      } flex-shrink-0 cursor-pointer rounded-full border-2 border-custom-border-80 transition-colors duration-200 ease-in-out focus:outline-none ${
+        value ? "bg-green-500" : "bg-custom-background-80"
       } ${className || ""}`}
     >
       <span className="sr-only">{label}</span>
@@ -35,7 +35,7 @@ export const ToggleSwitch: React.FC<Props> = (props) => {
                 : size === "md"
                 ? "translate-x-3"
                 : "translate-x-5") + " bg-white"
-            : "translate-x-0 bg-brand-surface-1"
+            : "translate-x-0 bg-custom-background-90"
         }`}
       />
     </Switch>
diff --git a/apps/app/components/ui/tooltip.tsx b/apps/app/components/ui/tooltip.tsx
index 86ca39e54b..e705d4b6ee 100644
--- a/apps/app/components/ui/tooltip.tsx
+++ b/apps/app/components/ui/tooltip.tsx
@@ -43,7 +43,7 @@ export const Tooltip: React.FC<Props> = ({
     content={
       <div
         className={`${className} relative z-50 flex max-w-[600px] flex-col items-start justify-center gap-1 rounded-md p-2 text-left text-xs shadow-md ${
-          theme === "light" ? "text-brand-muted-1 bg-brand-surface-2" : "bg-black text-white"
+          theme === "light" ? "text-brand-muted-1 bg-custom-background-80" : "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 fa5e6781c2..1367592986 100644
--- a/apps/app/components/views/delete-view-modal.tsx
+++ b/apps/app/components/views/delete-view-modal.tsx
@@ -82,7 +82,7 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -96,7 +96,7 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-80 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
@@ -108,14 +108,14 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-brand-base"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
                       >
                         Delete View
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-brand-secondary">
+                        <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete view-{" "}
-                          <span className="break-words font-medium text-brand-base">
+                          <span className="break-words font-medium text-custom-text-100">
                             {data?.name}
                           </span>
                           ? All of the data related to the view will be permanently removed. This
diff --git a/apps/app/components/views/form.tsx b/apps/app/components/views/form.tsx
index 1b8875138c..dc1cf9fba6 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-brand-base">
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
           {status ? "Update" : "Create"} View
         </h3>
         <div className="space-y-3">
diff --git a/apps/app/components/views/gantt-chart.tsx b/apps/app/components/views/gantt-chart.tsx
index a445331b24..cd586b5007 100644
--- a/apps/app/components/views/gantt-chart.tsx
+++ b/apps/app/components/views/gantt-chart.tsx
@@ -28,7 +28,7 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
         className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="text-brand-base text-sm">{data?.name}</div>
+      <div className="text-custom-text-100 text-sm">{data?.name}</div>
     </div>
   );
 
@@ -41,7 +41,7 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
           style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
         />
         <Tooltip tooltipContent={data?.name} className={`z-[999999]`}>
-          <div className="text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
+          <div className="text-custom-text-100 text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
             {data?.name}
           </div>
         </Tooltip>
@@ -51,7 +51,7 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
             className={`z-[999999]`}
           >
             <div className="flex-shrink-0 mx-2 w-[18px] h-[18px] overflow-hidden flex justify-center items-center">
-              <span className="material-symbols-rounded text-brand-secondary text-[18px]">
+              <span className="material-symbols-rounded text-custom-text-200 text-[18px]">
                 info
               </span>
             </div>
diff --git a/apps/app/components/views/modal.tsx b/apps/app/components/views/modal.tsx
index 7552513565..d65c7d9508 100644
--- a/apps/app/components/views/modal.tsx
+++ b/apps/app/components/views/modal.tsx
@@ -121,7 +121,7 @@ export const CreateUpdateViewModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -135,7 +135,7 @@ export const CreateUpdateViewModal: React.FC<Props> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-80 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <ViewForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/views/select-filters.tsx b/apps/app/components/views/select-filters.tsx
index 6c2c04954f..bf7bf9cf94 100644
--- a/apps/app/components/views/select-filters.tsx
+++ b/apps/app/components/views/select-filters.tsx
@@ -213,7 +213,7 @@ export const SelectFilters: React.FC<Props> = ({
                 element: (
                   <button
                     onClick={() => setIsDueDateFilterModalOpen(true)}
-                    className="w-full rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2"
+                    className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
                   >
                     Custom
                   </button>
diff --git a/apps/app/components/views/single-view-item.tsx b/apps/app/components/views/single-view-item.tsx
index 233ee3e740..dbef01c16e 100644
--- a/apps/app/components/views/single-view-item.tsx
+++ b/apps/app/components/views/single-view-item.tsx
@@ -83,7 +83,7 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
   };
 
   return (
-    <div className="first:rounded-t-[10px] last:rounded-b-[10px] hover:bg-brand-surface-2">
+    <div className="first:rounded-t-[10px] last:rounded-b-[10px] hover:bg-custom-background-90">
       <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
         <a>
           <div className="relative rounded p-4">
@@ -94,7 +94,7 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
               </div>
               <div className="ml-2 flex flex-shrink-0">
                 <div className="flex items-center gap-2">
-                  <p className="rounded-full bg-brand-surface-2 py-0.5 px-2 text-xs text-brand-secondary">
+                  <p className="rounded-full bg-custom-background-80 py-0.5 px-2 text-xs text-custom-text-200">
                     {Object.keys(view.query_data)
                       .map((key: string) =>
                         view.query_data[key as keyof typeof view.query_data] !== null
@@ -109,7 +109,7 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
                       view.updated_at
                     )} ${renderShortDateWithYearFormat(view.updated_at)}`}
                   >
-                    <p className="text-sm text-brand-secondary">
+                    <p className="text-sm text-custom-text-200">
                       {renderShortTime(view.updated_at)}
                     </p>
                   </Tooltip>
@@ -166,7 +166,7 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
               </div>
             </div>
             {view?.description && (
-              <p className="px-[27px] text-sm font-normal leading-5 text-brand-secondary">
+              <p className="px-[27px] text-sm font-normal leading-5 text-custom-text-200">
                 {view.description}
               </p>
             )}
diff --git a/apps/app/components/workspace/activity-graph.tsx b/apps/app/components/workspace/activity-graph.tsx
index b49446eeb8..c9fecc1cd1 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-brand-accent ${activitiesIntensity(isActive.activity_count)}`
-                        : "bg-brand-surface-2"
+                        ? `bg-custom-primary ${activitiesIntensity(isActive.activity_count)}`
+                        : "bg-custom-background-80"
                     }`}
                   />
                 </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-brand-surface-2" />
-            <span className="h-4 w-4 rounded bg-brand-accent opacity-20" />
-            <span className="h-4 w-4 rounded bg-brand-accent opacity-40" />
-            <span className="h-4 w-4 rounded bg-brand-accent opacity-80" />
-            <span className="h-4 w-4 rounded bg-brand-accent" />
+            <span className="h-4 w-4 rounded bg-custom-background-80" />
+            <span className="h-4 w-4 rounded bg-custom-primary opacity-20" />
+            <span className="h-4 w-4 rounded bg-custom-primary opacity-40" />
+            <span className="h-4 w-4 rounded bg-custom-primary opacity-80" />
+            <span className="h-4 w-4 rounded bg-custom-primary" />
             <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 4c7e1edb68..e21c7dc85a 100644
--- a/apps/app/components/workspace/completed-issues-graph.tsx
+++ b/apps/app/components/workspace/completed-issues-graph.tsx
@@ -38,7 +38,7 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
           ))}
         </CustomMenu>
       </div>
-      <div className="rounded-[10px] border border-brand-base bg-brand-base p-8 pl-4">
+      <div className="rounded-[10px] border border-custom-border-80 bg-custom-background-100 p-8 pl-4">
         {data.every((item) => item.completed_count === 0) ? (
           <div className="flex items-center justify-center h-72">
             <h4 className="text-[#d687ff]">No issues closed this month</h4>
@@ -62,14 +62,14 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
               colors={(datum) => datum.color}
               enableSlices="x"
               sliceTooltip={(datum) => (
-                <div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
+                <div className="rounded-md border border-custom-border-80 bg-custom-background-80 p-2 text-xs">
                   {datum.slice.points[0].data.yFormatted}
-                  <span className="text-brand-secondary"> issues closed in </span>
+                  <span className="text-custom-text-200"> issues closed in </span>
                   {datum.slice.points[0].data.xFormatted}
                 </div>
               )}
               theme={{
-                background: "rgb(var(--color-bg-base))",
+                background: "rgb(var(--color-background-100))",
               }}
             />
             <h4 className="mt-4 flex items-center justify-center gap-2 text-[#d687ff]">
diff --git a/apps/app/components/workspace/confirm-workspace-member-remove.tsx b/apps/app/components/workspace/confirm-workspace-member-remove.tsx
index 18e1274047..2f2cae6e47 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-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop 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-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">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                       <ExclamationTriangleIcon
@@ -65,12 +65,12 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-brand-base"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
                       >
                         Remove {data?.email}?
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-brand-secondary">
+                        <p className="text-sm text-custom-text-200">
                           Are you sure you want to remove member-{" "}
                           <span className="font-bold">{data?.email}</span>? They will no longer have
                           access to this workspace. This action cannot be undone.
@@ -79,7 +79,7 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
                     </div>
                   </div>
                 </div>
-                <div className="flex justify-end gap-2 bg-brand-surface-1 p-4 sm:px-6">
+                <div className="flex justify-end gap-2 bg-custom-background-90 p-4 sm:px-6">
                   <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                   <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Removing..." : "Remove"}
diff --git a/apps/app/components/workspace/create-workspace-form.tsx b/apps/app/components/workspace/create-workspace-form.tsx
index 42078fe91f..ca58d45a0d 100644
--- a/apps/app/components/workspace/create-workspace-form.tsx
+++ b/apps/app/components/workspace/create-workspace-form.tsx
@@ -134,14 +134,14 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
                   `Name can only contain (" "), ( - ), ( _ ) & Alphanumeric characters.`,
               }}
               placeholder="e.g. My Workspace"
-              className="placeholder:text-brand-secondary"
+              className="placeholder:text-custom-text-200"
               error={errors.name}
             />
           </div>
           <div className="flex flex-col items-start justify-center gap-1">
             <span className="mb-1.5 text-sm">Workspace URL</span>
-            <div className="flex w-full items-center rounded-md border border-brand-base px-3">
-              <span className="whitespace-nowrap text-sm text-brand-secondary">
+            <div className="flex w-full items-center rounded-md border border-custom-border-80 px-3">
+              <span className="whitespace-nowrap text-sm text-custom-text-200">
                 {typeof window !== "undefined" && window.location.origin}/
               </span>
               <Input
@@ -169,7 +169,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
           </div>
         </div>
 
-        <div className="flex flex-col items-start justify-center gap-1 border-t border-brand-base px-7 pt-3.5 ">
+        <div className="flex flex-col items-start justify-center gap-1 border-t border-custom-border-80 px-7 pt-3.5 ">
           <span className="mb-1.5 text-sm">How large is your company?</span>
           <div className="w-full">
             <Controller
@@ -184,7 +184,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
                     value ? (
                       value.toString()
                     ) : (
-                      <span className="text-brand-secondary">Select company size</span>
+                      <span className="text-custom-text-200">Select company size</span>
                     )
                   }
                   input
diff --git a/apps/app/components/workspace/delete-workspace-modal.tsx b/apps/app/components/workspace/delete-workspace-modal.tsx
index b9f3e60f45..b34aaccf0d 100644
--- a/apps/app/components/workspace/delete-workspace-modal.tsx
+++ b/apps/app/components/workspace/delete-workspace-modal.tsx
@@ -89,7 +89,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -103,7 +103,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-80 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
@@ -118,7 +118,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
                   </div>
 
                   <span>
-                    <p className="text-sm leading-7 text-brand-secondary">
+                    <p className="text-sm leading-7 text-custom-text-200">
                       Are you sure you want to delete workspace{" "}
                       <span className="break-words font-semibold">{data?.name}</span>? All of the
                       data related to the workspace will be permanently removed. This action cannot
@@ -126,10 +126,12 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
                     </p>
                   </span>
 
-                  <div className="text-brand-secondary">
+                  <div className="text-custom-text-200">
                     <p className="break-words text-sm ">
                       Enter the workspace name{" "}
-                      <span className="font-medium text-brand-base">{selectedWorkspace?.name}</span>{" "}
+                      <span className="font-medium text-custom-text-100">
+                        {selectedWorkspace?.name}
+                      </span>{" "}
                       to continue:
                     </p>
                     <Input
@@ -144,10 +146,10 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
                     />
                   </div>
 
-                  <div className="text-brand-secondary">
+                  <div className="text-custom-text-200">
                     <p className="text-sm">
                       To confirm, type{" "}
-                      <span className="font-medium text-brand-base">delete my workspace</span>{" "}
+                      <span className="font-medium text-custom-text-100">delete my workspace</span>{" "}
                       below:
                     </p>
                     <Input
diff --git a/apps/app/components/workspace/help-section.tsx b/apps/app/components/workspace/help-section.tsx
index 013cbd1bfd..9017217722 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 border-brand-base bg-brand-sidebar px-6 py-2 ${
+      className={`flex w-full items-center justify-between self-baseline border-t border-custom-sidebar-border-80 bg-custom-sidebar-background-100 px-6 py-2 ${
         sidebarCollapse ? "flex-col" : ""
       }`}
     >
       <button
         type="button"
-        className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base ${
+        className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 ${
           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-brand-secondary" />
+        <RocketLaunchIcon className="h-4 w-4 text-custom-sidebar-text-200" />
         {!sidebarCollapse && <span>Shortcuts</span>}
       </button>
       <button
         type="button"
-        className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base ${
+        className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 ${
           sidebarCollapse ? "w-full justify-center" : ""
         }`}
         onClick={() => setIsNeedHelpOpen((prev) => !prev)}
         title="Help"
       >
-        <QuestionMarkCircleIcon className="h-4 w-4 text-brand-secondary" />
+        <QuestionMarkCircleIcon className="h-4 w-4 text-custom-sidebar-text-200" />
         {!sidebarCollapse && <span>Help</span>}
       </button>
       <button
         type="button"
-        className="flex items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base md:hidden"
+        className="flex items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 md:hidden"
         onClick={() => setSidebarActive(false)}
       >
-        <ArrowLongLeftIcon className="h-4 w-4 flex-shrink-0 text-brand-secondary group-hover:text-brand-base" />
+        <ArrowLongLeftIcon className="h-4 w-4 flex-shrink-0 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100" />
       </button>
       <button
         type="button"
-        className={`hidden items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base md:flex ${
+        className={`hidden items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 md:flex ${
           sidebarCollapse ? "w-full justify-center" : ""
         }`}
         onClick={() => toggleCollapsed()}
       >
         <ArrowLongLeftIcon
-          className={`h-4 w-4 flex-shrink-0 text-brand-secondary duration-300 group-hover:text-brand-base ${
+          className={`h-4 w-4 flex-shrink-0 text-custom-sidebar-text-200 duration-300 group-hover:text-custom-sidebar-text-100 ${
             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-brand-surface-2 p-1 shadow-md`}
+            className={`absolute bottom-2 ${helpOptionMode} space-y-2 rounded-sm bg-custom-sidebar-background-80 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-brand-surface-1"
+                      className="flex items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-1 text-xs hover:bg-custom-sidebar-background-90"
                     >
-                      <Icon className="h-4 w-4 text-brand-secondary" />
+                      <Icon className="h-4 w-4 text-custom-sidebar-text-200" />
                       <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-brand-surface-1"
+                    className="flex w-full items-center gap-x-2 whitespace-nowrap rounded-md  px-2 py-1 text-xs hover:bg-custom-sidebar-background-90"
                   >
-                    <Icon className="h-4 w-4 text-brand-secondary" />
+                    <Icon className="h-4 w-4 text-custom-sidebar-text-200" />
                     <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 cfae136870..fe7990a60f 100644
--- a/apps/app/components/workspace/issues-list.tsx
+++ b/apps/app/components/workspace/issues-list.tsx
@@ -37,10 +37,10 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
     <div>
       <h3 className="mb-2 font-semibold capitalize">{type} Issues</h3>
       {issues ? (
-        <div className="h-[calc(100%-2.25rem)] rounded-[10px] border border-brand-base bg-brand-base p-4 text-sm">
+        <div className="h-[calc(100%-2.25rem)] rounded-[10px] border border-custom-border-80 bg-custom-background-100 p-4 text-sm">
           <div
             className={`mb-2 grid grid-cols-4 gap-2 rounded-lg px-3 py-2 font-medium ${
-              type === "overdue" ? "bg-red-500/20 bg-opacity-20" : "bg-brand-surface-2"
+              type === "overdue" ? "bg-red-500/20 bg-opacity-20" : "bg-custom-background-80"
             }`}
           >
             <h4 className="capitalize">{type}</h4>
@@ -86,10 +86,10 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
               <div className="grid h-full place-items-center">
                 <div className="my-5 flex flex-col items-center gap-4">
                   <LayerDiagonalIcon height={60} width={60} />
-                  <span className="text-brand-secondary">
+                  <span className="text-custom-text-200">
                     No issues found. Use{" "}
-                    <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre> shortcut to
-                    create a new issue
+                    <pre className="inline rounded bg-custom-background-80 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 c83ef1de27..2733910260 100644
--- a/apps/app/components/workspace/issues-pie-chart.tsx
+++ b/apps/app/components/workspace/issues-pie-chart.tsx
@@ -14,7 +14,7 @@ type Props = {
 export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
   <div>
     <h3 className="mb-2 font-semibold">Issues by States</h3>
-    <div className="rounded-[10px] border border-brand-base bg-brand-base p-4">
+    <div className="rounded-[10px] border border-custom-border-80 bg-custom-background-100 p-4">
       <PieGraph
         data={
           groupedIssues?.map((cell) => ({
@@ -58,8 +58,8 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
         activeInnerRadiusOffset={5}
         colors={(datum) => datum.data.color}
         tooltip={(datum) => (
-          <div className="flex items-center gap-2 rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
-            <span className="text-brand-secondary capitalize">{datum.datum.label} issues:</span>{" "}
+          <div className="flex items-center gap-2 rounded-md border border-custom-border-80 bg-custom-background-80 p-2 text-xs">
+            <span className="text-custom-text-200 capitalize">{datum.datum.label} issues:</span>{" "}
             {datum.datum.value}
           </div>
         )}
diff --git a/apps/app/components/workspace/issues-stats.tsx b/apps/app/components/workspace/issues-stats.tsx
index 8e108a676c..e2ef99c731 100644
--- a/apps/app/components/workspace/issues-stats.tsx
+++ b/apps/app/components/workspace/issues-stats.tsx
@@ -12,8 +12,8 @@ type Props = {
 };
 
 export const IssuesStats: React.FC<Props> = ({ data }) => (
-  <div className="grid grid-cols-1 rounded-[10px] border border-brand-base bg-brand-base lg:grid-cols-3">
-    <div className="grid grid-cols-1 divide-y divide-brand-base border-b border-brand-base lg:border-r lg:border-b-0">
+  <div className="grid grid-cols-1 rounded-[10px] border border-custom-border-80 bg-custom-background-100 lg:grid-cols-3">
+    <div className="grid grid-cols-1 divide-y divide-custom-border-80 border-b border-custom-border-80 lg:border-r lg:border-b-0">
       <div className="flex">
         <div className="basis-1/2 p-4">
           <h4 className="text-sm">Issues assigned to you</h4>
@@ -27,7 +27,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => (
             )}
           </h5>
         </div>
-        <div className="basis-1/2 border-l border-brand-base p-4">
+        <div className="basis-1/2 border-l border-custom-border-80 p-4">
           <h4 className="text-sm">Pending issues</h4>
           <h5 className="mt-2 text-2xl font-semibold">
             {data ? (
@@ -53,7 +53,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => (
             )}
           </h5>
         </div>
-        <div className="basis-1/2 border-l border-brand-base p-4">
+        <div className="basis-1/2 border-l border-custom-border-80 p-4">
           <h4 className="text-sm">Issues due by this week</h4>
           <h5 className="mt-2 text-2xl font-semibold">
             {data ? (
@@ -72,7 +72,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => (
         Activity Graph
         <Tooltip
           tooltipContent="Your profile activity graph is a record of actions you've performed on issues across the workspace."
-          className="w-72 border border-brand-base"
+          className="w-72 border border-custom-border-80"
         >
           <InformationCircleIcon className="h-3 w-3" />
         </Tooltip>
diff --git a/apps/app/components/workspace/send-workspace-invitation-modal.tsx b/apps/app/components/workspace/send-workspace-invitation-modal.tsx
index 56d9385b1e..cd48702fcf 100644
--- a/apps/app/components/workspace/send-workspace-invitation-modal.tsx
+++ b/apps/app/components/workspace/send-workspace-invitation-modal.tsx
@@ -105,17 +105,17 @@ 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-brand-surface-1 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-90 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="space-y-5">
                     <div>
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-brand-base"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
                       >
                         Members
                       </Dialog.Title>
-                      <p className="text-sm text-brand-secondary">
+                      <p className="text-sm text-custom-text-200">
                         Invite members to work on your workspace.
                       </p>
                     </div>
diff --git a/apps/app/components/workspace/settings-header.tsx b/apps/app/components/workspace/settings-header.tsx
index 89a3690f55..2f11b8a982 100644
--- a/apps/app/components/workspace/settings-header.tsx
+++ b/apps/app/components/workspace/settings-header.tsx
@@ -4,7 +4,7 @@ export const SettingsHeader = () => (
   <div className="mb-8 space-y-6">
     <div>
       <h3 className="text-2xl font-semibold">Workspace Settings</h3>
-      <p className="mt-1 text-sm text-brand-secondary">
+      <p className="mt-1 text-sm text-custom-text-200">
         This information will be displayed to every member of the workspace.
       </p>
     </div>
diff --git a/apps/app/components/workspace/sidebar-dropdown.tsx b/apps/app/components/workspace/sidebar-dropdown.tsx
index 6e57744341..41f1953302 100644
--- a/apps/app/components/workspace/sidebar-dropdown.tsx
+++ b/apps/app/components/workspace/sidebar-dropdown.tsx
@@ -89,13 +89,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="text-brand-muted-1 flex w-full items-center rounded-md py-2 text-sm font-semibold focus:outline-none">
+          <Menu.Button className="text-custom-sidebar-text-200 flex w-full items-center rounded-md py-2 text-sm font-semibold focus:outline-none">
             <div
-              className={`flex w-full items-center gap-x-2 rounded-md bg-brand-surface-2 px-2 py-1.5 ${
+              className={`flex w-full items-center gap-x-2 rounded-md bg-custom-sidebar-background-80 px-2 py-1.5 ${
                 sidebarCollapse ? "justify-center" : ""
               }`}
             >
-              <div className="relative grid h-6 w-6 place-items-center rounded bg-gray-700 uppercase text-white dark:bg-brand-surface-2 dark:text-gray-800">
+              <div className="relative grid h-6 w-6 place-items-center rounded bg-gray-700 uppercase text-white dark:bg-custom-sidebar-background-80 dark:text-gray-800">
                 {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
                   <img
                     src={activeWorkspace.logo}
@@ -137,11 +137,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
-          border border-brand-base bg-brand-surface-2 shadow-lg focus:outline-none"
+          border border-custom-sidebar-border-80 bg-custom-sidebar-background-90 shadow-lg 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-custom-sidebar-text-200">{user?.email}</div>
+              <span className="text-sm font-semibold text-custom-sidebar-text-200">Workspace</span>
               {workspaces ? (
                 <div className="flex h-full w-full flex-col items-start justify-start gap-3.5">
                   {workspaces.length > 0 ? (
@@ -151,7 +151,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-brand-base"
+                            className="flex w-full items-center justify-between gap-1 rounded-md text-sm text-custom-sidebar-text-100"
                           >
                             <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">
@@ -170,7 +170,7 @@ export const WorkspaceSidebarDropdown = () => {
                             </div>
                             <span className="p-1">
                               <CheckIcon
-                                className={`h-3 w-3.5 text-brand-base ${
+                                className={`h-3 w-3.5 text-custom-sidebar-text-100 ${
                                   active || workspace.id === activeWorkspace?.id
                                     ? "opacity-100"
                                     : "opacity-0"
@@ -190,7 +190,7 @@ export const WorkspaceSidebarDropdown = () => {
                     onClick={() => {
                       router.push("/create-workspace");
                     }}
-                    className="flex w-full items-center gap-1 text-sm text-brand-secondary"
+                    className="flex w-full items-center gap-1 text-sm text-custom-sidebar-text-200"
                   >
                     <PlusIcon className="h-3 w-3" />
                     Create Workspace
@@ -205,12 +205,12 @@ export const WorkspaceSidebarDropdown = () => {
                 </div>
               )}
             </div>
-            <div className="flex w-full flex-col items-start justify-start gap-2 border-t border-t-brand-base px-3 py-2 text-sm">
+            <div className="flex w-full flex-col items-start justify-start gap-2 border-t border-custom-sidebar-border-80 px-3 py-2 text-sm">
               {userLinks(workspaceSlug as string).map((link, index) => (
                 <Menu.Item
                   key={index}
                   as="div"
-                  className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-brand-secondary hover:bg-brand-surface-1"
+                  className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
                 >
                   <Link href={link.href}>
                     <a className="w-full">{link.name}</a>
@@ -218,11 +218,11 @@ export const WorkspaceSidebarDropdown = () => {
                 </Menu.Item>
               ))}
             </div>
-            <div className="w-full border-t border-t-brand-base px-3 py-2">
+            <div className="w-full border-t border-t-custom-sidebar-border-80 px-3 py-2">
               <Menu.Item
                 as="button"
                 type="button"
-                className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-red-600 hover:bg-brand-surface-1"
+                className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-red-600 hover:bg-custom-sidebar-background-80"
                 onClick={handleSignOut}
               >
                 Sign out
diff --git a/apps/app/components/workspace/sidebar-menu.tsx b/apps/app/components/workspace/sidebar-menu.tsx
index d163173fa6..2d31550518 100644
--- a/apps/app/components/workspace/sidebar-menu.tsx
+++ b/apps/app/components/workspace/sidebar-menu.tsx
@@ -55,15 +55,15 @@ export const WorkspaceSidebarMenu = () => {
                   ? router.asPath.includes(link.href)
                   : router.asPath === link.href
               )
-                ? "bg-brand-surface-2 text-brand-base"
-                : "text-brand-secondary hover:bg-brand-surface-2 focus:bg-brand-surface-2"
+                ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
+                : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-90 focus:bg-custom-sidebar-background-90"
             } group flex w-full items-center gap-3 rounded-md p-2 text-sm font-medium outline-none ${
               sidebarCollapse ? "justify-center" : ""
             }`}
           >
             <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
               <link.icon
-                className="text-brand-secondary"
+                className="text-custom-sidebar-text-200"
                 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 73f6d46551..5cdfc82033 100644
--- a/apps/app/components/workspace/single-invitation.tsx
+++ b/apps/app/components/workspace/single-invitation.tsx
@@ -38,7 +38,7 @@ const SingleInvitation: React.FC<Props> = ({
       </div>
       <div className="min-w-0 flex-1">
         <div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
-        <p className="text-sm text-brand-secondary">
+        <p className="text-sm text-custom-text-200">
           Invited by{" "}
           {invitation.created_by_detail
             ? invitation.created_by_detail.first_name
@@ -49,9 +49,9 @@ const SingleInvitation: React.FC<Props> = ({
         <button
           className={`${
             invitationsRespond.includes(invitation.id)
-              ? "bg-brand-surface-2 text-brand-secondary"
-              : "bg-brand-accent text-white"
-          } text-sm px-4 py-2 border border-brand-base rounded-3xl`}
+              ? "bg-custom-background-80 text-custom-text-200"
+              : "bg-custom-primary text-white"
+          } text-sm px-4 py-2 border border-custom-border-80 rounded-3xl`}
           onClick={(e) => {
             handleInvitation(
               invitation,
diff --git a/apps/app/constants/graph.ts b/apps/app/constants/graph.ts
index f279b5a42b..d4227804b3 100644
--- a/apps/app/constants/graph.ts
+++ b/apps/app/constants/graph.ts
@@ -2,7 +2,7 @@
 import { Theme } from "@nivo/core";
 
 export const CHARTS_THEME: Theme = {
-  background: "rgb(var(--color-background-90))",
+  background: "transparent",
   textColor: "rgb(var(--color-text-200))",
   axis: {
     domain: {
diff --git a/apps/app/constants/inbox.ts b/apps/app/constants/inbox.ts
index 3d7e8a0541..6ec52ee137 100644
--- a/apps/app/constants/inbox.ts
+++ b/apps/app/constants/inbox.ts
@@ -19,7 +19,7 @@ export const INBOX_STATUS = [
     key: "snoozed",
     label: "Snoozed",
     value: 0,
-    textColor: "text-brand-secondary",
+    textColor: "text-custom-text-200",
     bgColor: "bg-gray-500/10",
     borderColor: "border-gray-500",
   },
@@ -35,7 +35,7 @@ export const INBOX_STATUS = [
     key: "duplicate",
     label: "Duplicate",
     value: 2,
-    textColor: "text-brand-secondary",
+    textColor: "text-custom-text-200",
     bgColor: "bg-gray-500/10",
     borderColor: "border-gray-500",
   },
diff --git a/apps/app/helpers/string.helper.ts b/apps/app/helpers/string.helper.ts
index 4dfc9855b9..a5fc05e781 100644
--- a/apps/app/helpers/string.helper.ts
+++ b/apps/app/helpers/string.helper.ts
@@ -89,7 +89,7 @@ export const cosineSimilarity = (a: string, b: string) => {
 };
 
 export const generateRandomColor = (string: string): string => {
-  if (!string) return "rgb(var(--color-accent))";
+  if (!string) return "rgb(var(--color-primary-100))";
 
   string = `${string}`;
 
diff --git a/apps/app/layouts/app-layout/app-header.tsx b/apps/app/layouts/app-layout/app-header.tsx
index ea7d5558c2..6789d4c92d 100644
--- a/apps/app/layouts/app-layout/app-header.tsx
+++ b/apps/app/layouts/app-layout/app-header.tsx
@@ -11,7 +11,7 @@ type Props = {
 
 const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar, noHeader }) => (
   <div
-    className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-y-4 border-b border-brand-base bg-brand-sidebar px-5 py-4 ${
+    className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-y-4 border-b border-custom-border-80 bg-custom-sidebar-background-100 px-5 py-4 ${
       noHeader ? "md:hidden" : ""
     }`}
   >
@@ -19,7 +19,7 @@ const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar, n
       <div className="block md:hidden">
         <button
           type="button"
-          className="grid h-8 w-8 place-items-center rounded border border-brand-base"
+          className="grid h-8 w-8 place-items-center rounded border border-custom-border-80"
           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 ccdc29ad3d..5ed2d642ed 100644
--- a/apps/app/layouts/app-layout/app-sidebar.tsx
+++ b/apps/app/layouts/app-layout/app-sidebar.tsx
@@ -19,11 +19,11 @@ const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) =>
 
   return (
     <div
-      className={`z-20 h-full flex-shrink-0 border-r border-brand-base ${
+      className={`z-20 h-full flex-shrink-0 border-r border-custom-sidebar-border-80 ${
         sidebarCollapse ? "" : "w-auto md:w-[17rem]"
       } fixed inset-y-0 top-0 ${
         toggleSidebar ? "left-0" : "-left-full md:left-0"
-      } flex h-full flex-col bg-brand-sidebar duration-300 md:relative`}
+      } flex h-full flex-col bg-custom-sidebar-background-100 duration-300 md:relative`}
     >
       <div className="flex h-full flex-1 flex-col">
         <WorkspaceSidebarDropdown />
diff --git a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
index 60546a412e..61d84394e1 100644
--- a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
+++ b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
@@ -94,10 +94,10 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
           <main
             className={`relative flex h-full w-full flex-col overflow-hidden ${
               bg === "primary"
-                ? "bg-brand-base"
+                ? "bg-custom-background-100"
                 : bg === "secondary"
-                ? "bg-brand-surface-1"
-                : "bg-brand-surface-2"
+                ? "bg-custom-background-90"
+                : "bg-custom-background-80"
             }`}
           >
             <AppHeader
diff --git a/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx b/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
index 2b5d9be27a..3ce21058d9 100644
--- a/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
+++ b/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
@@ -101,10 +101,10 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
             <main
               className={`relative flex h-full w-full flex-col overflow-hidden ${
                 bg === "primary"
-                  ? "bg-brand-base"
+                  ? "bg-custom-background-100"
                   : bg === "secondary"
-                  ? "bg-brand-surface-1"
-                  : "bg-brand-surface-2"
+                  ? "bg-custom-background-90"
+                  : "bg-custom-background-80"
               }`}
             >
               <AppHeader
diff --git a/apps/app/layouts/default-layout/index.tsx b/apps/app/layouts/default-layout/index.tsx
index cce155906d..5113595fc4 100644
--- a/apps/app/layouts/default-layout/index.tsx
+++ b/apps/app/layouts/default-layout/index.tsx
@@ -9,7 +9,7 @@ type Props = {
 };
 
 const DefaultLayout: React.FC<Props> = ({ children }) => (
-  <div className="h-screen w-full overflow-auto bg-brand-surface-1">
+  <div className="h-screen w-full overflow-auto bg-custom-background-90">
     <>{children}</>
   </div>
 );
diff --git a/apps/app/layouts/settings-navbar.tsx b/apps/app/layouts/settings-navbar.tsx
index 5c06026eaf..2d659708c8 100644
--- a/apps/app/layouts/settings-navbar.tsx
+++ b/apps/app/layouts/settings-navbar.tsx
@@ -103,8 +103,8 @@ const SettingsNavbar: React.FC<Props> = ({ profilePage = false }) => {
                     ? router.asPath.includes(link.href)
                     : router.asPath === link.href
                 )
-                  ? "border-brand-accent bg-brand-accent text-white"
-                  : "border-brand-base bg-brand-base hover:bg-brand-surface-1"
+                  ? "border-custom-primary bg-custom-primary text-white"
+                  : "border-custom-border-80 bg-custom-background-100 hover:bg-custom-background-90"
               }`}
             >
               {link.label}
diff --git a/apps/app/pages/404.tsx b/apps/app/pages/404.tsx
index a70bc2345d..6386093a70 100644
--- a/apps/app/pages/404.tsx
+++ b/apps/app/pages/404.tsx
@@ -21,7 +21,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-brand-secondary">
+          <p className="text-sm text-custom-text-200">
             Sorry, the page you are looking for cannot be found. It may have been removed, had its
             name changed, or is temporarily unavailable.
           </p>
diff --git a/apps/app/pages/[workspaceSlug]/analytics.tsx b/apps/app/pages/[workspaceSlug]/analytics.tsx
index e37555bae7..6357c8ebd0 100644
--- a/apps/app/pages/[workspaceSlug]/analytics.tsx
+++ b/apps/app/pages/[workspaceSlug]/analytics.tsx
@@ -97,15 +97,15 @@ const Analytics = () => {
       //   </PrimaryButton>
       // }
     >
-      <div className="h-full flex flex-col overflow-hidden bg-brand-base">
+      <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
         <Tab.Group as={Fragment}>
-          <Tab.List as="div" className="space-x-2 border-b border-brand-base px-5 py-3">
+          <Tab.List as="div" className="space-x-2 border-b border-custom-border-80 px-5 py-3">
             {tabsList.map((tab) => (
               <Tab
                 key={tab}
                 className={({ selected }) =>
-                  `rounded-3xl border border-brand-base px-4 py-2 text-xs hover:bg-brand-surface-2 ${
-                    selected ? "bg-brand-surface-2" : ""
+                  `rounded-3xl border border-custom-border-80 px-4 py-2 text-xs hover:bg-custom-background-80 ${
+                    selected ? "bg-custom-background-80" : ""
                   }`
                 }
                 onClick={() => trackAnalyticsEvent(tab)}
diff --git a/apps/app/pages/[workspaceSlug]/index.tsx b/apps/app/pages/[workspaceSlug]/index.tsx
index 3c75890f66..06d122fd16 100644
--- a/apps/app/pages/[workspaceSlug]/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/index.tsx
@@ -49,21 +49,21 @@ const WorkspacePage: NextPage = () => {
       )}
       <div className="p-8">
         <div className="flex flex-col gap-8">
-          <div className="text-brand-muted-1 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg border border-brand-base bg-brand-base px-4 py-6 md:flex-row md:items-center md:py-3">
+          <div className="text-brand-muted-1 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg border border-custom-border-80 bg-custom-background-100 px-4 py-6 md:flex-row md:items-center md:py-3">
             <p className="font-semibold">
               Plane is open source, support us by starring us on GitHub.
             </p>
             <div className="flex items-center gap-2">
               <button
                 onClick={() => setIsProductUpdatesModalOpen(true)}
-                className="rounded-md border-2 border-brand-base px-3 py-1.5 text-sm font-medium duration-300"
+                className="rounded-md border-2 border-custom-border-80 px-3 py-1.5 text-sm font-medium duration-300"
               >
                 {`What's New?`}
               </button>
               <a
                 href="https://github.com/makeplane/plane"
                 target="_blank"
-                className="rounded-md border-2 border-brand-base px-3 py-1.5 text-sm font-medium duration-300"
+                className="rounded-md border-2 border-custom-border-80 px-3 py-1.5 text-sm font-medium duration-300"
                 rel="noopener noreferrer"
               >
                 Star us on GitHub
diff --git a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
index c66fcee553..fefb9d46cb 100644
--- a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
@@ -47,8 +47,8 @@ const MyIssuesPage: NextPage = () => {
               {({ open }) => (
                 <>
                   <Popover.Button
-                    className={`group flex items-center gap-2 rounded-md border border-brand-base bg-transparent px-3 py-1.5 text-xs hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none ${
-                      open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
+                    className={`group flex items-center gap-2 rounded-md border border-custom-border-80 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-background-90 hover:text-custom-text-100 focus:outline-none ${
+                      open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
                     }`}
                   >
                     <span>View</span>
@@ -64,9 +64,9 @@ 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-brand-base 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-custom-background-100 p-3 shadow-lg">
                       <div className="space-y-2 py-3">
-                        <h4 className="text-sm text-brand-secondary">Properties</h4>
+                        <h4 className="text-sm text-custom-text-200">Properties</h4>
                         <div className="flex flex-wrap items-center gap-2">
                           {Object.keys(properties).map((key) => {
                             if (key === "estimate") return null;
@@ -77,8 +77,8 @@ const MyIssuesPage: NextPage = () => {
                                 type="button"
                                 className={`rounded border px-2 py-1 text-xs capitalize ${
                                   properties[key as keyof Properties]
-                                    ? "border-brand-accent bg-brand-accent text-white"
-                                    : "border-brand-base"
+                                    ? "border-custom-primary bg-custom-primary text-white"
+                                    : "border-custom-border-80"
                                 }`}
                                 onClick={() => setProperties(key as keyof Properties)}
                               >
@@ -114,11 +114,11 @@ const MyIssuesPage: NextPage = () => {
               <Disclosure as="div" defaultOpen>
                 {({ open }) => (
                   <div>
-                    <div className="flex items-center px-4 py-2.5">
+                    <div className="flex items-center px-4 py-2.5 bg-custom-background-90">
                       <Disclosure.Button>
                         <div className="flex items-center gap-x-2">
                           <h2 className="font-medium leading-5">My Issues</h2>
-                          <span className="rounded-full bg-brand-surface-2 py-0.5 px-3 text-sm text-brand-secondary">
+                          <span className="rounded-full bg-custom-background-80 py-0.5 px-3 text-sm text-custom-text-200">
                             {myIssues.length}
                           </span>
                         </div>
diff --git a/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx b/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
index 3fe99df925..4b115bf00b 100644
--- a/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
@@ -28,7 +28,7 @@ const ProfileActivity = () => {
         <div className="mb-8 space-y-6">
           <div>
             <h3 className="text-3xl font-semibold">Profile Settings</h3>
-            <p className="mt-1 text-brand-secondary">
+            <p className="mt-1 text-custom-text-200">
               This information will be visible to only you.
             </p>
           </div>
diff --git a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx b/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
index 247ef7e038..85834d5462 100644
--- a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
@@ -140,7 +140,7 @@ const Profile: NextPage = () => {
           <div className="mb-8 space-y-6">
             <div>
               <h3 className="text-3xl font-semibold">Profile Settings</h3>
-              <p className="mt-1 text-brand-secondary">
+              <p className="mt-1 text-custom-text-200">
                 This information will be visible to only you.
               </p>
             </div>
@@ -149,8 +149,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-lg font-semibold text-brand-base">Profile Picture</h4>
-                <p className="text-sm text-brand-secondary">
+                <h4 className="text-lg font-semibold text-custom-text-100">Profile Picture</h4>
+                <p className="text-sm text-custom-text-200">
                   Max file size is 5MB. Supported file types are .jpg and .png.
                 </p>
               </div>
@@ -158,8 +158,8 @@ const Profile: NextPage = () => {
                 <div className="flex items-center gap-4">
                   <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
                     {!watch("avatar") || watch("avatar") === "" ? (
-                      <div className="h-12 w-12 rounded-md bg-brand-surface-2 p-2">
-                        <UserIcon className="h-full w-full text-brand-secondary" />
+                      <div className="h-12 w-12 rounded-md bg-custom-background-80 p-2">
+                        <UserIcon className="h-full w-full text-custom-text-200" />
                       </div>
                     ) : (
                       <div className="relative h-12 w-12 overflow-hidden">
@@ -194,8 +194,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-lg font-semibold text-brand-base">Full Name</h4>
-                <p className="text-sm text-brand-secondary">
+                <h4 className="text-lg font-semibold text-custom-text-100">Full Name</h4>
+                <p className="text-sm text-custom-text-200">
                   This name will be reflected on all the projects you are working on.
                 </p>
               </div>
@@ -223,8 +223,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-lg font-semibold text-brand-base">Email</h4>
-                <p className="text-sm text-brand-secondary">
+                <h4 className="text-lg font-semibold text-custom-text-100">Email</h4>
+                <p className="text-sm text-custom-text-200">
                   The email address that you are using.
                 </p>
               </div>
@@ -242,8 +242,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-lg font-semibold text-brand-base">Role</h4>
-                <p className="text-sm text-brand-secondary">Add your role.</p>
+                <h4 className="text-lg font-semibold text-custom-text-100">Role</h4>
+                <p className="text-sm text-custom-text-200">Add your role.</p>
               </div>
               <div className="col-span-12 sm:col-span-6">
                 <Controller
diff --git a/apps/app/pages/[workspaceSlug]/me/profile/preferences.tsx b/apps/app/pages/[workspaceSlug]/me/profile/preferences.tsx
index abaaefcd88..64b598f7f0 100644
--- a/apps/app/pages/[workspaceSlug]/me/profile/preferences.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/profile/preferences.tsx
@@ -40,7 +40,7 @@ const ProfilePreferences = () => {
           <div className="mb-8 space-y-6">
             <div>
               <h3 className="text-3xl font-semibold">Profile Settings</h3>
-              <p className="mt-1 text-brand-secondary">
+              <p className="mt-1 text-custom-text-200">
                 This information will be visible to only you.
               </p>
             </div>
@@ -49,8 +49,8 @@ const ProfilePreferences = () => {
           <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-lg font-semibold text-brand-base">Theme</h4>
-                <p className="text-sm text-brand-secondary">
+                <h4 className="text-lg font-semibold text-custom-text-100">Theme</h4>
+                <p className="text-sm text-custom-text-200">
                   Select or customize your interface color scheme.
                 </p>
               </div>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index 9175159310..bcb779d781 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -140,14 +140,14 @@ const SingleCycle: React.FC = () => {
             <IssuesFilterView />
             <SecondaryButton
               onClick={() => setAnalyticsModal(true)}
-              className="!py-1.5 font-normal rounded-md text-brand-secondary"
+              className="!py-1.5 font-normal rounded-md text-custom-text-200"
               outline
             >
               Analytics
             </SecondaryButton>
             <button
               type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1 ${
+              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
                 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 5025789271..6520f4827d 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -109,37 +109,37 @@ const ProjectCycles: NextPage = () => {
       />
       <div className="space-y-5 p-8 h-full flex flex-col overflow-hidden">
         <div className="flex gap-4 justify-between">
-          <h3 className="text-2xl font-semibold text-brand-base">Cycles</h3>
+          <h3 className="text-2xl font-semibold text-custom-text-100">Cycles</h3>
           <div className="flex items-center gap-x-1">
             <button
               type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-                cyclesView === "list" ? "bg-brand-surface-2" : ""
+              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
+                cyclesView === "list" ? "bg-custom-background-80" : ""
               }`}
               onClick={() => setCyclesView("list")}
             >
-              <ListBulletIcon className="h-4 w-4 text-brand-secondary" />
+              <ListBulletIcon className="h-4 w-4 text-custom-text-200" />
             </button>
             <button
               type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-                cyclesView === "board" ? "bg-brand-surface-2" : ""
+              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
+                cyclesView === "board" ? "bg-custom-background-80" : ""
               }`}
               onClick={() => setCyclesView("board")}
             >
-              <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
+              <Squares2X2Icon className="h-4 w-4 text-custom-text-200" />
             </button>
             <button
               type="button"
-              className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-brand-surface-2 ${
-                cyclesView === "gantt_chart" ? "bg-brand-surface-2" : ""
+              className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-custom-background-80 ${
+                cyclesView === "gantt_chart" ? "bg-custom-background-80" : ""
               }`}
               onClick={() => {
                 setCyclesView("gantt_chart");
                 setCycleTab("All");
               }}
             >
-              <span className="material-symbols-rounded text-brand-secondary text-[18px] rotate-90">
+              <span className="material-symbols-rounded text-custom-text-200 text-[18px] rotate-90">
                 waterfall_chart
               </span>
             </button>
@@ -177,8 +177,8 @@ const ProjectCycles: NextPage = () => {
                   className={({ selected }) =>
                     `rounded-3xl border px-6 py-1 outline-none ${
                       selected
-                        ? "border-brand-accent bg-brand-accent text-white font-medium"
-                        : "border-brand-base bg-brand-base hover:bg-brand-surface-2"
+                        ? "border-custom-primary bg-custom-primary text-white font-medium"
+                        : "border-custom-border-80 bg-custom-background-100 hover:bg-custom-background-80"
                     }`
                   }
                 >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
index dc301e0d88..3eb21cfbe5 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
@@ -52,7 +52,7 @@ const ProjectInbox: NextPage = () => {
       >
         <div className="flex flex-col h-full">
           <InboxActionHeader />
-          <div className="grid grid-cols-4 flex-1 divide-x divide-brand-base overflow-hidden">
+          <div className="grid grid-cols-4 flex-1 divide-x divide-custom-border-80 overflow-hidden">
             <IssuesListSidebar />
             <div className="col-span-3 h-full overflow-auto">
               <InboxMainContent />
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index cb57ff9fd4..532d3a02bf 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -120,10 +120,10 @@ const IssueDetailsPage: NextPage = () => {
     >
       {issueDetails && projectId ? (
         <div className="flex h-full">
-          <div className="w-2/3 space-y-5 divide-y-2 divide-brand-base p-5">
+          <div className="w-2/3 space-y-5 divide-y-2 divide-custom-border-80 p-5">
             <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
           </div>
-          <div className="w-1/3 space-y-5 border-l border-brand-base p-5">
+          <div className="w-1/3 space-y-5 border-l border-custom-border-80 p-5">
             <IssueDetailsSidebar
               control={control}
               issueDetail={issueDetails}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
index 8fdab7f4f0..306ce720e3 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@@ -63,7 +63,7 @@ const ProjectIssues: NextPage = () => {
             <IssuesFilterView />
             <SecondaryButton
               onClick={() => setAnalyticsModal(true)}
-              className="!py-1.5 rounded-md font-normal text-brand-secondary"
+              className="!py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-80 hover:bg-custom-sidebar-background-90"
               outline
             >
               Analytics
@@ -72,12 +72,12 @@ const ProjectIssues: NextPage = () => {
               <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`}>
                 <a>
                   <SecondaryButton
-                    className="relative !py-1.5 rounded-md font-normal text-brand-secondary"
+                    className="relative !py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-80 hover:bg-custom-sidebar-background-90"
                     outline
                   >
                     <span>Inbox</span>
                     {inboxList && inboxList?.[0]?.pending_issue_count !== 0 && (
-                      <span className="absolute -top-1 -right-1 h-4 w-4 rounded-full text-brand-base bg-brand-surface-2 border border-brand-base">
+                      <span className="absolute -top-1 -right-1 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-80">
                         {inboxList?.[0]?.pending_issue_count}
                       </span>
                     )}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index 8e15cc6f3e..bbfb9c2b91 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -144,14 +144,14 @@ const SingleModule: React.FC = () => {
             <IssuesFilterView />
             <SecondaryButton
               onClick={() => setAnalyticsModal(true)}
-              className="!py-1.5 font-normal rounded-md text-brand-secondary"
+              className="!py-1.5 font-normal rounded-md text-custom-text-200"
               outline
             >
               Analytics
             </SecondaryButton>
             <button
               type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1 ${
+              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
                 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 be92a9f864..e3df4a53ac 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -99,25 +99,25 @@ const ProjectModules: NextPage = () => {
         modules.length > 0 ? (
           <div className="space-y-5 p-8 flex flex-col h-full overflow-hidden">
             <div className="flex gap-4 justify-between">
-              <h3 className="text-2xl font-semibold text-brand-base">Modules</h3>
+              <h3 className="text-2xl font-semibold text-custom-text-100">Modules</h3>
               <div className="flex items-center gap-x-1">
                 <button
                   type="button"
-                  className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-                    modulesView === "grid" ? "bg-brand-surface-2" : ""
+                  className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
+                    modulesView === "grid" ? "bg-custom-background-80" : ""
                   }`}
                   onClick={() => setModulesView("grid")}
                 >
-                  <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
+                  <Squares2X2Icon className="h-4 w-4 text-custom-text-200" />
                 </button>
                 <button
                   type="button"
-                  className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-brand-surface-2 ${
-                    modulesView === "gantt_chart" ? "bg-brand-surface-2" : ""
+                  className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-custom-background-80 ${
+                    modulesView === "gantt_chart" ? "bg-custom-background-80" : ""
                   }`}
                   onClick={() => setModulesView("gantt_chart")}
                 >
-                  <span className="material-symbols-rounded text-brand-secondary text-[18px] rotate-90">
+                  <span className="material-symbols-rounded text-custom-text-200 text-[18px] rotate-90">
                     waterfall_chart
                   </span>
                 </button>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index c157d7b968..0df725dccd 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -306,7 +306,7 @@ const SinglePage: NextPage = () => {
                 <div className="flex w-full items-center gap-2">
                   <button
                     type="button"
-                    className="flex items-center gap-2 text-sm text-brand-secondary"
+                    className="flex items-center gap-2 text-sm text-custom-text-200"
                     onClick={() => router.back()}
                   >
                     <ArrowLeftIcon className="h-4 w-4" />
@@ -337,7 +337,7 @@ const SinglePage: NextPage = () => {
                         return (
                           <div
                             key={label.id}
-                            className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50"
+                            className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-80 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 });
@@ -366,7 +366,7 @@ const SinglePage: NextPage = () => {
                     customButton={
                       <button
                         type="button"
-                        className="flex items-center gap-1 rounded-sm bg-brand-surface-2 p-1.5 text-xs"
+                        className="flex items-center gap-1 rounded-sm bg-custom-background-80 p-1.5 text-xs"
                       >
                         <PlusIcon className="h-3.5 w-3.5" />
                         {pageDetails.labels.length <= 0 && <span>Add Label</span>}
@@ -376,12 +376,12 @@ const SinglePage: NextPage = () => {
                     footerOption={
                       <button
                         type="button"
-                        className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
+                        className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-custom-background-80"
                         onClick={() => {
                           setLabelModal(true);
                         }}
                       >
-                        <span className="flex items-center justify-start gap-1 text-brand-secondary">
+                        <span className="flex items-center justify-start gap-1 text-custom-text-200">
                           <PlusIcon className="h-4 w-4" aria-hidden="true" />
                           <span>Create New Label</span>
                         </span>
@@ -395,7 +395,7 @@ const SinglePage: NextPage = () => {
                 </div>
               </div>
               <div className="flex items-center">
-                <div className="flex items-center gap-6 text-brand-secondary">
+                <div className="flex items-center gap-6 text-custom-text-200">
                   <Tooltip
                     tooltipContent={`Last updated at ${renderShortTime(
                       pageDetails.updated_at
@@ -413,7 +413,7 @@ const SinglePage: NextPage = () => {
                           <Popover.Button
                             type="button"
                             className={`group inline-flex items-center outline-none ${
-                              open ? "text-brand-base" : "text-brand-secondary"
+                              open ? "text-custom-text-100" : "text-custom-text-200"
                             }`}
                           >
                             {watch("color") && watch("color") !== "" ? (
@@ -443,12 +443,12 @@ const SinglePage: NextPage = () => {
                                 styles={{
                                   default: {
                                     card: {
-                                      backgroundColor: `rgba(var(--color-bg-surface-2))`,
+                                      backgroundColor: `rgba(var(--color-background-80))`,
                                     },
                                     triangle: {
                                       position: "absolute",
                                       borderColor:
-                                        "transparent transparent rgba(var(--color-bg-surface-2)) transparent",
+                                        "transparent transparent rgba(var(--color-background-80)) transparent",
                                     },
                                     input: {
                                       border: "none",
@@ -457,13 +457,13 @@ const SinglePage: NextPage = () => {
                                       paddingLeft: "0.25rem",
                                       color: `rgba(var(--color-text-secondary))`,
                                       boxShadow: "none",
-                                      backgroundColor: `rgba(var(--color-bg-surface-1))`,
-                                      borderLeft: `1px solid rgba(var(--color-bg-surface-2))`,
+                                      backgroundColor: `rgba(var(--color-background-90))`,
+                                      borderLeft: `1px solid rgba(var(--color-background-80))`,
                                     },
                                     hash: {
                                       color: `rgba(var(--color-text-secondary))`,
                                       boxShadow: "none",
-                                      backgroundColor: `rgba(var(--color-bg-surface-1))`,
+                                      backgroundColor: `rgba(var(--color-background-90))`,
                                     },
                                   },
                                 }}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index f76c7f7e44..1282c78779 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -125,12 +125,12 @@ const ProjectPages: NextPage = () => {
       >
         <div className="space-y-5 p-8 h-full overflow-hidden flex flex-col">
           <div className="flex gap-4 justify-between">
-            <h3 className="text-2xl font-semibold text-brand-base">Pages</h3>
+            <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
             <div className="flex gap-x-1">
               <button
                 type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-                  viewType === "list" ? "bg-brand-surface-2" : ""
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
+                  viewType === "list" ? "bg-custom-background-80" : ""
                 }`}
                 onClick={() => setViewType("list")}
               >
@@ -138,8 +138,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-brand-surface-2 ${
-                  viewType === "detailed" ? "bg-brand-surface-2" : ""
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
+                  viewType === "detailed" ? "bg-custom-background-80" : ""
                 }`}
                 onClick={() => setViewType("detailed")}
               >
@@ -176,8 +176,8 @@ const ProjectPages: NextPage = () => {
                     className={({ selected }) =>
                       `rounded-full border px-5 py-1.5 text-sm outline-none ${
                         selected
-                          ? "border-brand-accent bg-brand-accent text-white"
-                          : "border-brand-base bg-brand-base hover:bg-brand-surface-1"
+                          ? "border-custom-primary bg-custom-primary text-white"
+                          : "border-custom-border-80 bg-custom-background-100 hover:bg-custom-background-90"
                       }`
                     }
                   >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
index c6e02d726c..7fe2bca6bc 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
@@ -111,7 +111,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-lg font-semibold">Project Lead</h4>
-              <p className="text-sm text-brand-secondary">Select the project leader.</p>
+              <p className="text-sm text-custom-text-200">Select the project leader.</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               {projectDetails ? (
@@ -123,7 +123,7 @@ const ControlSettings: NextPage = () => {
                       {...field}
                       label={
                         people?.find((person) => person.member.id === field.value)?.member
-                          .first_name ?? <span className="text-brand-secondary">Select lead</span>
+                          .first_name ?? <span className="text-custom-text-200">Select lead</span>
                       }
                       width="w-full"
                       input
@@ -169,7 +169,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-lg font-semibold">Default Assignee</h4>
-              <p className="text-sm text-brand-secondary">
+              <p className="text-sm text-custom-text-200">
                 Select the default assignee for the project.
               </p>
             </div>
@@ -183,7 +183,7 @@ const ControlSettings: NextPage = () => {
                       {...field}
                       label={
                         people?.find((p) => p.member.id === field.value)?.member.first_name ?? (
-                          <span className="text-brand-secondary">Select default assignee</span>
+                          <span className="text-custom-text-200">Select default assignee</span>
                         )
                       }
                       width="w-full"
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index 76e3533196..ff0a3c38d4 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -146,7 +146,7 @@ const EstimatesSettings: NextPage = () => {
           </section>
           {estimatesList ? (
             estimatesList.length > 0 ? (
-              <section className="mt-5 divide-y divide-brand-base rounded-xl border border-brand-base bg-brand-base px-6">
+              <section className="mt-5 divide-y divide-custom-border-80 rounded-xl border border-custom-border-80 bg-custom-background-100 px-6">
                 {estimatesList.map((estimate) => (
                   <SingleEstimate
                     key={estimate.id}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index e10ce5aa6a..31126bb515 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -184,13 +184,13 @@ const FeaturesSettings: NextPage = () => {
             {featuresList.map((feature) => (
               <div
                 key={feature.property}
-                className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-brand-base bg-brand-base p-5"
+                className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-custom-border-80 bg-custom-background-100 p-5"
               >
                 <div className="flex items-start gap-3">
                   {feature.icon}
                   <div>
                     <h4 className="text-lg font-semibold">{feature.title}</h4>
-                    <p className="text-sm text-brand-secondary">{feature.description}</p>
+                    <p className="text-sm text-custom-text-200">{feature.description}</p>
                   </div>
                 </div>
                 <ToggleSwitch
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index e8ac1d9d0d..3885e4f8c9 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -166,7 +166,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-lg font-semibold">Icon & Name</h4>
-              <p className="text-sm text-brand-secondary">
+              <p className="text-sm text-custom-text-200">
                 Select an icon and a name for your project.
               </p>
             </div>
@@ -226,7 +226,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-lg font-semibold">Description</h4>
-              <p className="text-sm text-brand-secondary">Give a description to your project.</p>
+              <p className="text-sm text-custom-text-200">Give a description to your project.</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               {projectDetails ? (
@@ -249,13 +249,13 @@ 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-lg font-semibold">Cover Photo</h4>
-              <p className="text-sm text-brand-secondary">
+              <p className="text-sm text-custom-text-200">
                 Select your cover photo from the given library.
               </p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               {watch("cover_image") ? (
-                <div className="h-32 w-full rounded border border-brand-base p-1">
+                <div className="h-32 w-full rounded border border-custom-border-80 p-1">
                   <div className="relative h-full w-full rounded">
                     <img
                       src={watch("cover_image")!}
@@ -283,7 +283,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-lg font-semibold">Identifier</h4>
-              <p className="text-sm text-brand-secondary">
+              <p className="text-sm text-custom-text-200">
                 Create a 1-6 characters{"'"} identifier for the project.
               </p>
             </div>
@@ -319,7 +319,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-lg font-semibold">Network</h4>
-              <p className="text-sm text-brand-secondary">Select privacy type for the project.</p>
+              <p className="text-sm text-custom-text-200">Select privacy type for the project.</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               {projectDetails ? (
@@ -366,7 +366,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-lg font-semibold">Danger Zone</h4>
-              <p className="text-sm text-brand-secondary">
+              <p className="text-sm text-custom-text-200">
                 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 6d48c5ee04..4fae052a77 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -113,7 +113,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-brand-secondary">Manage the labels of this project.</p>
+              <p className="text-custom-text-200">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 a0d53df354..ee84c3845f 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -153,7 +153,7 @@ const MembersSettings: NextPage = () => {
             <h3 className="text-2xl font-semibold">Members</h3>
             <button
               type="button"
-              className="flex items-center gap-2 text-brand-accent outline-none"
+              className="flex items-center gap-2 text-custom-primary outline-none"
               onClick={() => setInviteModal(true)}
             >
               <PlusIcon className="h-4 w-4" />
@@ -168,7 +168,7 @@ const MembersSettings: NextPage = () => {
               <Loader.Item height="40px" />
             </Loader>
           ) : (
-            <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base px-6">
+            <div className="divide-y divide-custom-border-80 rounded-[10px] border border-custom-border-80 bg-custom-background-100 px-6">
               {members.length > 0
                 ? members.map((member) => (
                     <div key={member.id} className="flex items-center justify-between py-6">
@@ -190,7 +190,7 @@ const MembersSettings: NextPage = () => {
                           <h4 className="text-sm">
                             {member.first_name} {member.last_name}
                           </h4>
-                          <p className="mt-0.5 text-xs text-brand-secondary">{member.email}</p>
+                          <p className="mt-0.5 text-xs text-custom-text-200">{member.email}</p>
                         </div>
                       </div>
                       <div className="flex items-center gap-2 text-xs">
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 0868fef937..a8202f559e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -75,8 +75,8 @@ const StatesSettings: NextPage = () => {
           <SettingsHeader />
           <div className="grid grid-cols-12 gap-10">
             <div className="col-span-12 sm:col-span-5">
-              <h3 className="text-2xl font-semibold text-brand-base">States</h3>
-              <p className="text-brand-secondary">Manage the states of this project.</p>
+              <h3 className="text-2xl font-semibold text-custom-text-100">States</h3>
+              <p className="text-custom-text-200">Manage the states of this project.</p>
             </div>
             <div className="col-span-12 space-y-8 sm:col-span-7">
               {states && projectDetails ? (
@@ -88,14 +88,14 @@ const StatesSettings: NextPage = () => {
                           <h4 className="font-medium capitalize">{key}</h4>
                           <button
                             type="button"
-                            className="flex items-center gap-2 text-brand-accent outline-none"
+                            className="flex items-center gap-2 text-custom-primary outline-none"
                             onClick={() => setActiveGroup(key as keyof StateGroup)}
                           >
                             <PlusIcon className="h-4 w-4" />
                             Add
                           </button>
                         </div>
-                        <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
+                        <div className="divide-y divide-custom-border-80 rounded-[10px] border border-custom-border-80">
                           {key === activeGroup && (
                             <CreateUpdateStateInline
                               groupLength={orderedStateGroups[key].length}
@@ -121,7 +121,7 @@ const StatesSettings: NextPage = () => {
                               />
                             ) : (
                               <div
-                                className="border-b border-brand-base last:border-b-0"
+                                className="border-b border-custom-border-80 last:border-b-0"
                                 key={state.id}
                               >
                                 <CreateUpdateStateInline
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
index 44c25cdf04..ce210e3c5e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -101,8 +101,8 @@ const ProjectViews: NextPage = () => {
       {views ? (
         views.length > 0 ? (
           <div className="space-y-5 p-8">
-            <h3 className="text-2xl font-semibold text-brand-base">Views</h3>
-            <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
+            <h3 className="text-2xl font-semibold text-custom-text-100">Views</h3>
+            <div className="divide-y divide-custom-border-80 rounded-[10px] border border-custom-border-80">
               {views.map((view) => (
                 <SingleViewItem
                   key={view.id}
diff --git a/apps/app/pages/[workspaceSlug]/projects/index.tsx b/apps/app/pages/[workspaceSlug]/projects/index.tsx
index fa34f02c05..db1b147d73 100644
--- a/apps/app/pages/[workspaceSlug]/projects/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/index.tsx
@@ -87,24 +87,28 @@ const ProjectsPage: NextPage = () => {
         user={user}
       />
       {projects ? (
-        <div className="p-8">
+        <div className="h-full w-full overflow-hidden">
           {projects.length === 0 ? (
-            <EmptyState
-              type="project"
-              title="Create New Project"
-              description="Projects are a collection of issues. They can be used to represent the development work for a product, project, or service."
-              imgURL={emptyProject}
-            />
+            <div className="h-full w-full grid place-items-center p-8">
+              <EmptyState
+                type="project"
+                title="Create New Project"
+                description="Projects are a collection of issues. They can be used to represent the development work for a product, project, or service."
+                imgURL={emptyProject}
+              />
+            </div>
           ) : (
-            <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
-              {projects.map((project) => (
-                <SingleProjectCard
-                  key={project.id}
-                  project={project}
-                  setToJoinProject={setSelectedProjectToJoin}
-                  setDeleteProject={setDeleteProject}
-                />
-              ))}
+            <div className="h-full p-8 overflow-y-auto">
+              <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+                {projects.map((project) => (
+                  <SingleProjectCard
+                    key={project.id}
+                    project={project}
+                    setToJoinProject={setSelectedProjectToJoin}
+                    setDeleteProject={setDeleteProject}
+                  />
+                ))}
+              </div>
             </div>
           )}
         </div>
diff --git a/apps/app/pages/[workspaceSlug]/settings/billing.tsx b/apps/app/pages/[workspaceSlug]/settings/billing.tsx
index 76b66529e6..d833e43410 100644
--- a/apps/app/pages/[workspaceSlug]/settings/billing.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/billing.tsx
@@ -44,18 +44,18 @@ const BillingSettings: NextPage = () => {
         <section className="space-y-8">
           <div>
             <h3 className="text-2xl font-semibold leading-6">Billing & Plans</h3>
-            <p className="mt-4 text-sm text-brand-secondary">[Free launch preview] plan Pro</p>
+            <p className="mt-4 text-sm text-custom-text-200">[Free launch preview] plan Pro</p>
           </div>
           <div className="space-y-8 md:w-2/3">
             <div>
-              <div className="w-80 rounded-md border border-brand-base bg-brand-base p-4 text-center">
+              <div className="w-80 rounded-md border border-custom-border-80 bg-custom-background-100 p-4 text-center">
                 <h4 className="text-md mb-1 leading-6">Payment due</h4>
                 <h2 className="text-3xl font-extrabold">--</h2>
               </div>
             </div>
             <div>
               <h4 className="text-md mb-1 leading-6">Current plan</h4>
-              <p className="mb-3 text-sm text-brand-secondary">
+              <p className="mb-3 text-sm text-custom-text-200">
                 You are currently using the free plan
               </p>
               <a href="https://plane.so/pricing" target="_blank" rel="noreferrer">
@@ -64,7 +64,7 @@ const BillingSettings: NextPage = () => {
             </div>
             <div>
               <h4 className="text-md mb-1 leading-6">Billing history</h4>
-              <p className="mb-3 text-sm text-brand-secondary">There are no invoices to display</p>
+              <p className="mb-3 text-sm text-custom-text-200">There are no invoices to display</p>
             </div>
           </div>
         </section>
diff --git a/apps/app/pages/[workspaceSlug]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/settings/index.tsx
index 9e0917d162..969d2c6fd8 100644
--- a/apps/app/pages/[workspaceSlug]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/index.tsx
@@ -177,7 +177,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-lg font-semibold">Logo</h4>
-                <p className="text-sm text-brand-secondary">
+                <p className="text-sm text-custom-text-200">
                   Max file size is 5MB. Supported file types are .jpg and .png.
                 </p>
               </div>
@@ -218,7 +218,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-lg font-semibold">URL</h4>
-                <p className="text-sm text-brand-secondary">Your workspace URL.</p>
+                <p className="text-sm text-custom-text-200">Your workspace URL.</p>
               </div>
               <div className="col-span-12 flex items-center gap-2 sm:col-span-6">
                 <Input
@@ -258,7 +258,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-lg font-semibold">Name</h4>
-                <p className="text-sm text-brand-secondary">Give a name to your workspace.</p>
+                <p className="text-sm text-custom-text-200">Give a name to your workspace.</p>
               </div>
               <div className="col-span-12 sm:col-span-6">
                 <Input
@@ -277,7 +277,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-lg font-semibold">Company Size</h4>
-                <p className="text-sm text-brand-secondary">How big is your company?</p>
+                <p className="text-sm text-custom-text-200">How big is your company?</p>
               </div>
               <div className="col-span-12 sm:col-span-6">
                 <Controller
@@ -308,7 +308,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-lg font-semibold">Danger Zone</h4>
-                <p className="text-sm text-brand-secondary">
+                <p className="text-sm text-custom-text-200">
                   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
diff --git a/apps/app/pages/[workspaceSlug]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/settings/members.tsx
index da8fd52cb4..db77db3be4 100644
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/members.tsx
@@ -154,7 +154,7 @@ const MembersSettings: NextPage = () => {
             <h3 className="text-2xl font-semibold">Members</h3>
             <button
               type="button"
-              className="flex items-center gap-2 text-brand-accent outline-none"
+              className="flex items-center gap-2 text-custom-primary outline-none"
               onClick={() => setInviteModal(true)}
             >
               <PlusIcon className="h-4 w-4" />
@@ -169,7 +169,7 @@ const MembersSettings: NextPage = () => {
               <Loader.Item height="40px" />
             </Loader>
           ) : (
-            <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base px-6">
+            <div className="divide-y divide-custom-border-80 rounded-[10px] border border-custom-border-80 bg-custom-background-100 px-6">
               {members.length > 0
                 ? members.map((member) => (
                     <div key={member.id} className="flex items-center justify-between py-6">
@@ -191,7 +191,7 @@ const MembersSettings: NextPage = () => {
                           <h4 className="text-sm">
                             {member.first_name} {member.last_name}
                           </h4>
-                          <p className="text-xs text-brand-secondary">{member.email}</p>
+                          <p className="text-xs text-custom-text-200">{member.email}</p>
                         </div>
                       </div>
                       <div className="flex items-center gap-2 text-xs">
diff --git a/apps/app/pages/_error.tsx b/apps/app/pages/_error.tsx
index 8482cbc931..3595c6ce77 100644
--- a/apps/app/pages/_error.tsx
+++ b/apps/app/pages/_error.tsx
@@ -35,18 +35,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-brand-secondary w-1/2 mx-auto">
+            <p className="text-sm text-custom-text-200 w-1/2 mx-auto">
               We{"'"}re Sorry! An exception has been detected, and our engineering team has been
               notified. We apologize for any inconvenience this may have caused. Please reach out to
               our engineering team at{" "}
-              <a href="mailto:support@plane.so" className="text-brand-accent">
+              <a href="mailto:support@plane.so" className="text-custom-primary">
                 support@plane.so
               </a>{" "}
               or on our{" "}
               <a
                 href="https://discord.com/invite/A92xrEGCge"
                 target="_blank"
-                className="text-brand-accent"
+                className="text-custom-primary"
                 rel="noopener noreferrer"
               >
                 Discord
diff --git a/apps/app/pages/create-workspace.tsx b/apps/app/pages/create-workspace.tsx
index 82f0d20012..de7888da9e 100644
--- a/apps/app/pages/create-workspace.tsx
+++ b/apps/app/pages/create-workspace.tsx
@@ -31,14 +31,14 @@ const CreateWorkspace: NextPage = () => {
         <div className="relative grid h-full place-items-center p-5">
           <div className="h-full flex flex-col items-center justify-center w-full py-4">
             <div className="mb-7 flex items-center justify-center text-center">
-              <OnboardingLogo className="h-12 w-48 fill-current text-brand-base" />
+              <OnboardingLogo className="h-12 w-48 fill-current text-custom-text-100" />
             </div>
 
-            <div className="flex h-[366px] w-full max-w-xl flex-col justify-between rounded-[10px] bg-brand-base shadow-md">
+            <div className="flex h-[366px] w-full max-w-xl flex-col justify-between rounded-[10px] bg-custom-background-100 shadow-md">
               <div className="flex items-center justify-start gap-3 px-7 pt-7 pb-3.5 text-gray-8 text-sm">
                 <div className="flex flex-col gap-2 justify-center ">
-                  <h3 className="text-base font-semibold text-brand-base">Create Workspace</h3>
-                  <p className="text-sm text-brand-secondary">
+                  <h3 className="text-base font-semibold text-custom-text-100">Create Workspace</h3>
+                  <p className="text-sm text-custom-text-200">
                     Create or join the workspace to get started with Plane.
                   </p>
                 </div>
@@ -53,8 +53,8 @@ const CreateWorkspace: NextPage = () => {
           </div>
 
           <div className="absolute flex flex-col gap-1 justify-center items-start left-5 top-5">
-            <span className="text-xs text-brand-secondary">Logged in:</span>
-            <span className="text-sm text-brand-base">{user?.email}</span>
+            <span className="text-xs text-custom-text-200">Logged in:</span>
+            <span className="text-sm text-custom-text-100">{user?.email}</span>
           </div>
         </div>
       </DefaultLayout>
diff --git a/apps/app/pages/index.tsx b/apps/app/pages/index.tsx
index abe3174157..9e05bde698 100644
--- a/apps/app/pages/index.tsx
+++ b/apps/app/pages/index.tsx
@@ -133,16 +133,16 @@ const HomePage: 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" />
-                <div className="text-center text-xl font-medium text-brand-base">
+                <div className="text-center text-xl font-medium text-custom-text-100">
                   Sign In to your Plane Account
                 </div>
               </div>
 
-              <div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
+              <div className="flex flex-col rounded-[10px] bg-custom-background-100 shadow-md">
                 {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
                   <>
                     <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
-                    <div className="flex flex-col items-center justify-center gap-3 border-t border-brand-base py-5 px-5">
+                    <div className="flex flex-col items-center justify-center gap-3 border-t border-custom-border-80 py-5 px-5">
                       <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
                       <GithubLoginButton handleSignIn={handleGithubSignIn} />
                     </div>
diff --git a/apps/app/pages/installations/[provider]/index.tsx b/apps/app/pages/installations/[provider]/index.tsx
index 70b1a02c22..2becb1f88f 100644
--- a/apps/app/pages/installations/[provider]/index.tsx
+++ b/apps/app/pages/installations/[provider]/index.tsx
@@ -26,7 +26,6 @@ const AppPostInstallation = ({
   provider,
   code,
 }: IGithuPostInstallationProps) => {
-
   const { setToastAlert } = useToast();
 
   useEffect(() => {
@@ -42,59 +41,59 @@ const AppPostInstallation = ({
           console.log(err);
         });
     } else if (provider === "slack" && state && code) {
-        appinstallationsService
-          .getSlackAuthDetails(code)
-          .then((res) => {
-            const [workspaceSlug, projectId, integrationId] = state.split(",");
+      appinstallationsService
+        .getSlackAuthDetails(code)
+        .then((res) => {
+          const [workspaceSlug, projectId, integrationId] = state.split(",");
 
-            if(!projectId) {
-              const payload = {
-                metadata: {
-                  ...res,
-                },
-              };
+          if (!projectId) {
+            const payload = {
+              metadata: {
+                ...res,
+              },
+            };
 
-              appinstallationsService
-                .addInstallationApp(state, provider, payload)
-                .then((r) => {
-                  window.opener = null;
-                  window.open("", "_self");
-                  window.close();
-                })
-                .catch((err) => {
-                  throw err?.response;
-                });
-            } else {
-              const payload = {
-                access_token: res.access_token,
-                bot_user_id: res.bot_user_id,
-                webhook_url: res.incoming_webhook.url,
-                data: res,
-                team_id: res.team.id,
-                team_name: res.team.name,
-                scopes: res.scope,
-              };
-              appinstallationsService
-                .addSlackChannel(workspaceSlug, projectId, integrationId, payload)
-                .then((r) => {
-                  window.opener = null;
-                  window.open("", "_self");
-                  window.close();
-                })
-                .catch((err) => {
-                  throw err.response
-                })
-            }
-          })
-          .catch((err) => {
-            console.log(err);
-          });
+            appinstallationsService
+              .addInstallationApp(state, provider, payload)
+              .then((r) => {
+                window.opener = null;
+                window.open("", "_self");
+                window.close();
+              })
+              .catch((err) => {
+                throw err?.response;
+              });
+          } else {
+            const payload = {
+              access_token: res.access_token,
+              bot_user_id: res.bot_user_id,
+              webhook_url: res.incoming_webhook.url,
+              data: res,
+              team_id: res.team.id,
+              team_name: res.team.name,
+              scopes: res.scope,
+            };
+            appinstallationsService
+              .addSlackChannel(workspaceSlug, projectId, integrationId, payload)
+              .then((r) => {
+                window.opener = null;
+                window.open("", "_self");
+                window.close();
+              })
+              .catch((err) => {
+                throw err.response;
+              });
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     }
   }, [state, installation_id, provider, code]);
 
   return (
-    <div className="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-brand-surface-2">
-      <h2 className="text-2xl text-brand-base">Installing. Please wait...</h2>
+    <div className="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-custom-background-80">
+      <h2 className="text-2xl text-custom-text-100">Installing. Please wait...</h2>
       <Spinner />
     </div>
   );
diff --git a/apps/app/pages/invitations.tsx b/apps/app/pages/invitations.tsx
index ed55455578..95b3a18af5 100644
--- a/apps/app/pages/invitations.tsx
+++ b/apps/app/pages/invitations.tsx
@@ -85,18 +85,18 @@ const OnBoard: NextPage = () => {
         <div className="relative grid h-full place-items-center p-5">
           <div className="h-full flex flex-col items-center justify-center w-full py-4">
             <div className="mb-7 flex items-center justify-center text-center">
-              <OnboardingLogo className="h-12 w-48 fill-current text-brand-base" />
+              <OnboardingLogo className="h-12 w-48 fill-current text-custom-text-100" />
             </div>
 
-            <div className="flex h-[436px] w-full max-w-xl rounded-[10px] p-7 bg-brand-base shadow-md">
+            <div className="flex h-[436px] w-full max-w-xl rounded-[10px] p-7 bg-custom-background-100 shadow-md">
               {invitations && workspaces ? (
                 invitations.length > 0 ? (
                   <div className="flex w-full flex-col gap-3 justify-between">
                     <div className="flex flex-col gap-2 justify-center ">
-                      <h3 className="text-base font-semibold text-brand-base">
+                      <h3 className="text-base font-semibold text-custom-text-100">
                         Workspace Invitations
                       </h3>
-                      <p className="text-sm text-brand-secondary">
+                      <p className="text-sm text-custom-text-200">
                         Create or join the workspace to get started with Plane.
                       </p>
                     </div>
@@ -129,12 +129,12 @@ const OnBoard: NextPage = () => {
                     {workspaces.map((workspace) => (
                       <Link key={workspace.id} href={workspace.slug}>
                         <a>
-                          <div className="mb-2 flex items-center justify-between rounded border border-brand-base px-4 py-2">
+                          <div className="mb-2 flex items-center justify-between rounded border border-custom-border-80 px-4 py-2">
                             <div className="flex items-center gap-x-2 text-sm">
-                              <CubeIcon className="h-5 w-5 text-brand-secondary" />
+                              <CubeIcon className="h-5 w-5 text-custom-text-200" />
                               {workspace.name}
                             </div>
-                            <div className="flex items-center gap-x-2 text-xs text-brand-secondary">
+                            <div className="flex items-center gap-x-2 text-xs text-custom-text-200">
                               {workspace.owner.first_name}
                             </div>
                           </div>
@@ -167,8 +167,8 @@ const OnBoard: NextPage = () => {
             </div>
           </div>
           <div className="absolute flex flex-col gap-1 justify-center items-start left-5 top-5">
-            <span className="text-xs text-brand-secondary">Logged in:</span>
-            <span className="text-sm text-brand-base">{user?.email}</span>
+            <span className="text-xs text-custom-text-200">Logged in:</span>
+            <span className="text-sm text-custom-text-100">{user?.email}</span>
           </div>
         </div>
       </DefaultLayout>
diff --git a/apps/app/pages/magic-sign-in.tsx b/apps/app/pages/magic-sign-in.tsx
index 81ebf02670..c959764a2f 100644
--- a/apps/app/pages/magic-sign-in.tsx
+++ b/apps/app/pages/magic-sign-in.tsx
@@ -45,18 +45,18 @@ const MagicSignIn: NextPage = () => {
 
   return (
     <DefaultLayout>
-      <div className="h-screen w-full overflow-auto bg-brand-surface-1">
+      <div className="h-screen w-full overflow-auto bg-custom-background-90">
         {isSigningIn ? (
           <div className="flex h-full w-full flex-col items-center justify-center gap-3">
             <h2 className="text-4xl font-medium">Signing you in...</h2>
-            <p className="text-sm font-medium text-brand-secondary">
+            <p className="text-sm font-medium text-custom-text-200">
               Please wait while we are preparing your take off.
             </p>
           </div>
         ) : errorSigningIn ? (
           <div className="flex h-full w-full flex-col items-center justify-center gap-3">
             <h2 className="text-4xl font-medium">Error</h2>
-            <div className="text-sm font-medium text-brand-secondary flex gap-2">
+            <div className="text-sm font-medium text-custom-text-200 flex gap-2">
               <div>{errorSigningIn}.</div>
               <span
                 className="cursor-pointer underline"
@@ -86,7 +86,7 @@ const MagicSignIn: NextPage = () => {
         ) : (
           <div className="flex h-full w-full flex-col items-center justify-center gap-y-2">
             <h2 className="text-4xl font-medium">Success</h2>
-            <p className="text-sm font-medium text-brand-secondary">
+            <p className="text-sm font-medium text-custom-text-200">
               Redirecting you to the app...
             </p>
           </div>
diff --git a/apps/app/pages/onboarding.tsx b/apps/app/pages/onboarding.tsx
index cc6b742df9..2fd3c4575b 100644
--- a/apps/app/pages/onboarding.tsx
+++ b/apps/app/pages/onboarding.tsx
@@ -52,7 +52,7 @@ const Onboarding: NextPage = () => {
           {step <= 3 ? (
             <div className="h-full flex flex-col justify-center w-full py-4">
               <div className="mb-7 flex items-center justify-center text-center">
-                <OnboardingLogo className="h-12 w-48 fill-current text-brand-base" />
+                <OnboardingLogo className="h-12 w-48 fill-current text-custom-text-100" />
               </div>
               {step === 1 ? (
                 <UserDetails user={user} setStep={setStep} setUserRole={setUserRole} />
@@ -64,7 +64,7 @@ const Onboarding: NextPage = () => {
             </div>
           ) : (
             <div className="flex w-full max-w-2xl flex-col gap-12">
-              <div className="flex flex-col items-center justify-center gap-7 rounded-[10px] bg-brand-base pb-7 text-center shadow-md">
+              <div className="flex flex-col items-center justify-center gap-7 rounded-[10px] bg-custom-background-100 pb-7 text-center shadow-md">
                 {step === 4 ? (
                   <OnboardingCard data={ONBOARDING_CARDS.welcome} />
                 ) : step === 5 ? (
@@ -124,8 +124,8 @@ const Onboarding: NextPage = () => {
             </div>
           )}
           <div className="absolute flex flex-col gap-1 justify-center items-start left-5 top-5">
-            <span className="text-xs text-brand-secondary">Logged in:</span>
-            <span className="text-sm text-brand-base">{user?.email}</span>
+            <span className="text-xs text-custom-text-200">Logged in:</span>
+            <span className="text-sm text-custom-text-100">{user?.email}</span>
           </div>
         </div>
       )}
diff --git a/apps/app/pages/reset-password.tsx b/apps/app/pages/reset-password.tsx
index 82ee321149..748050021b 100644
--- a/apps/app/pages/reset-password.tsx
+++ b/apps/app/pages/reset-password.tsx
@@ -81,11 +81,11 @@ const ResetPasswordPage: 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-brand-base">
+              <h2 className="text-center text-xl font-medium text-custom-text-100">
                 Reset your password
               </h2>
             </div>
-            <div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
+            <div className="flex flex-col rounded-[10px] bg-custom-background-100 shadow-md">
               <form className="mt-5 py-5 px-5" onSubmit={handleSubmit(onSubmit)}>
                 <div>
                   <Input
diff --git a/apps/app/pages/sign-up.tsx b/apps/app/pages/sign-up.tsx
index 2c86d96ff8..edd17b5b32 100644
--- a/apps/app/pages/sign-up.tsx
+++ b/apps/app/pages/sign-up.tsx
@@ -65,12 +65,12 @@ const SignUp: 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" />
-              <div className="text-center text-xl font-medium text-brand-base">
+              <div className="text-center text-xl font-medium text-custom-text-100">
                 Create a new Plane Account
               </div>
             </div>
 
-            <div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
+            <div className="flex flex-col rounded-[10px] bg-custom-background-100 shadow-md">
               <EmailPasswordForm onSubmit={handleSignUp} />
             </div>
           </div>
diff --git a/apps/app/pages/workspace-member-invitation.tsx b/apps/app/pages/workspace-member-invitation.tsx
index b895aa90a4..7b630a316c 100644
--- a/apps/app/pages/workspace-member-invitation.tsx
+++ b/apps/app/pages/workspace-member-invitation.tsx
@@ -66,7 +66,7 @@ const WorkspaceInvitation: NextPage = () => {
         {invitationDetail ? (
           <>
             {error ? (
-              <div className="flex w-full flex-col space-y-4 rounded border border-brand-base bg-brand-base px-4 py-8 text-center shadow-2xl md:w-1/3">
+              <div className="flex w-full flex-col space-y-4 rounded border border-custom-border-80 bg-custom-background-100 px-4 py-8 text-center shadow-2xl md:w-1/3">
                 <h2 className="text-xl uppercase">INVITATION NOT FOUND</h2>
               </div>
             ) : (
diff --git a/apps/app/styles/command-pallette.css b/apps/app/styles/command-pallette.css
index a421eeba98..12cfe18ebe 100644
--- a/apps/app/styles/command-pallette.css
+++ b/apps/app/styles/command-pallette.css
@@ -27,13 +27,13 @@
   font-size: 0.75rem;
   line-height: 1rem;
   border-radius: 0.25rem;
-  background-color: rgba(var(--color-bg-base));
+  background-color: rgba(var(--color-background-100));
 }
 
 [cmdk-item]:hover {
-  background-color: rgba(var(--color-bg-surface-2));
+  background-color: rgba(var(--color-background-80));
 }
 
 [cmdk-item][aria-selected="true"] {
-  background-color: rgba(var(--color-bg-surface-2));
+  background-color: rgba(var(--color-background-80));
 }
diff --git a/apps/app/styles/editor.css b/apps/app/styles/editor.css
index 418ed9d1db..41169e9689 100644
--- a/apps/app/styles/editor.css
+++ b/apps/app/styles/editor.css
@@ -87,10 +87,10 @@
 }
 
 .MuiButtonBase-root svg {
-  fill: rgb(var(--color-text-base)) !important;
+  fill: rgb(var(--color-text-100)) !important;
 }
 
 .MuiButtonBase-root.Mui-selected,
 .MuiButtonBase-root:hover {
-  background-color: rgb(var(--color-bg-base)) !important;
+  background-color: rgb(var(--color-background-100)) !important;
 }
diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
index 3420312366..a4f73ecaf7 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -219,7 +219,6 @@
 
     --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;
@@ -232,7 +231,6 @@
 
     --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;
diff --git a/apps/app/styles/react-datepicker.css b/apps/app/styles/react-datepicker.css
index 2c45fda447..1ba4ba649b 100644
--- a/apps/app/styles/react-datepicker.css
+++ b/apps/app/styles/react-datepicker.css
@@ -1,15 +1,15 @@
 .react-datepicker-wrapper input::placeholder {
-  color: rgba(var(--color-text-secondary));
+  color: rgba(var(--color-text-200));
   opacity: 1;
 }
 
 .react-datepicker-wrapper input:-ms-input-placeholder {
-  color: rgba(var(--color-text-secondary));
+  color: rgba(var(--color-text-200));
 }
 
 .react-datepicker-wrapper .react-datepicker__close-icon::after {
   background: transparent;
-  color: rgba(var(--color-text-secondary));
+  color: rgba(var(--color-text-200));
 }
 
 .react-datepicker-popper {
@@ -18,7 +18,7 @@
 
 .react-datepicker-wrapper {
   position: relative;
-  background-color: rgba(var(--color-bg-base)) !important;
+  background-color: rgba(var(--color-background-100)) !important;
 }
 
 .react-datepicker-wrapper,
@@ -28,21 +28,21 @@
 
 .react-datepicker {
   font-family: "Inter" !important;
-  background-color: rgba(var(--color-bg-base)) !important;
-  border: 1px solid rgba(var(--color-border)) !important;
+  background-color: rgba(var(--color-background-100)) !important;
+  border: 1px solid rgba(var(--color-background-80)) !important;
 }
 
 .react-datepicker__month-container {
   width: 300px;
-  background-color: rgba(var(--color-bg-base)) !important;
-  color: rgba(var(--color-text-base)) !important;
+  background-color: rgba(var(--color-background-100)) !important;
+  color: rgba(var(--color-text-100)) !important;
   border-radius: 10px !important;
-  /* border: 1px solid rgba(var(--color-border)) !important; */
+  /* border: 1px solid rgba(var(--color-background-80)) !important; */
 }
 
 .react-datepicker__header {
   border-radius: 10px !important;
-  background-color: rgba(var(--color-bg-base)) !important;
+  background-color: rgba(var(--color-background-100)) !important;
   border: none !important;
 }
 
@@ -51,24 +51,24 @@
 }
 
 .react-datepicker__triangle {
-  border-color: rgba(var(--color-bg-base)) transparent transparent transparent !important;
+  border-color: rgba(var(--color-background-100)) transparent transparent transparent !important;
 }
 
 .react-datepicker__triangle:before {
-  border-bottom-color: rgba(var(--color-border)) !important;
+  border-bottom-color: rgba(var(--color-background-80)) !important;
 }
 .react-datepicker__triangle:after {
-  border-bottom-color: rgba(var(--color-bg-base)) !important;
+  border-bottom-color: rgba(var(--color-background-100)) !important;
 }
 
 .react-datepicker__current-month {
   font-weight: 500 !important;
-  color: rgba(var(--color-text-base)) !important;
+  color: rgba(var(--color-text-100)) !important;
 }
 
 .react-datepicker__month {
   border-collapse: collapse;
-  color: rgba(var(--color-text-base)) !important;
+  color: rgba(var(--color-text-100)) !important;
 }
 
 .react-datepicker__day-names {
@@ -81,7 +81,7 @@
 }
 
 .react-datepicker__day-name {
-  color: rgba(var(--color-text-secondary)) !important;
+  color: rgba(var(--color-text-200)) !important;
 }
 
 .react-datepicker__week {
@@ -91,7 +91,7 @@
 }
 
 .react-datepicker__day {
-  color: rgba(var(--color-text-base)) !important;
+  color: rgba(var(--color-text-100)) !important;
 }
 
 .react-datepicker__day {
@@ -100,8 +100,8 @@
 }
 
 .react-datepicker__day:hover {
-  background-color: rgba(var(--color-bg-surface-2)) !important;
-  color: rgba(var(--color-text-base)) !important;
+  background-color: rgba(var(--color-background-80)) !important;
+  color: rgba(var(--color-text-100)) !important;
 }
 
 .react-datepicker__day--selected,
@@ -113,7 +113,7 @@
 .react-datepicker__day--disabled,
 .react-datepicker__day--disabled:hover {
   background: transparent !important;
-  color: rgba(var(--color-text-secondary)) !important;
+  color: rgba(var(--color-text-200)) !important;
   cursor: default;
 }
 
@@ -122,7 +122,7 @@
 }
 
 .react-datepicker__day--highlighted {
-  background-color: rgba(var(--color-bg-surface-2)) !important;
+  background-color: rgba(var(--color-background-80)) !important;
 }
 
 .react-datepicker__day--keyboard-selected {
@@ -132,13 +132,13 @@
 
 .react-datepicker__day--in-range-start,
 .react-datepicker__day--in-range-end {
-  background-color: rgba(var(--color-bg-accent)) !important;
+  background-color: rgba(var(--color-primary-100)) !important;
   color: white !important;
 }
 
 .react-datepicker__day--in-range:not(.react-datepicker__day--in-range-start):not(
     .react-datepicker__day--in-range-end
   ) {
-  background-color: rgba(var(--color-accent)) !important;
+  background-color: rgba(var(--color-primary-100)) !important;
   color: white !important;
 }
diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js
index 202a4fad95..712f63ea8c 100644
--- a/apps/app/tailwind.config.js
+++ b/apps/app/tailwind.config.js
@@ -5,33 +5,7 @@ module.exports = {
   content: ["./pages/**/*.tsx", "./components/**/*.tsx", "./layouts/**/*.tsx", "./ui/**/*.tsx"],
   theme: {
     extend: {
-      borderColor: {
-        brand: {
-          base: convertToRGB("--color-background-80"),
-          secondary: convertToRGB("--color-background-90"),
-        },
-      },
-      backgroundColor: {
-        brand: {
-          base: convertToRGB("--color-background-100"),
-          "surface-1": convertToRGB("--color-background-90"),
-          "surface-2": convertToRGB("--color-background-80"),
-          sidebar: convertToRGB("--color-sidebar-background-100"),
-          backdrop: "#131313",
-        },
-      },
-      textColor: {
-        brand: {
-          base: convertToRGB("--color-text-100"),
-          secondary: convertToRGB("--color-text-200"),
-        },
-      },
       colors: {
-        brand: {
-          base: convertToRGB("--color-background-100"),
-          accent: convertToRGB("--color-primary-100"),
-          backdrop: "#131313",
-        },
         custom: {
           primary: {
             0: "rgb(255, 255, 255)",
@@ -102,6 +76,29 @@ module.exports = {
             1000: "rgb(0, 0, 0)",
             DEFAULT: convertToRGB("--color-text-100"),
           },
+          border: {
+            0: "rgb(255, 255, 255)",
+            10: convertToRGB("--color-background-10"),
+            20: convertToRGB("--color-background-20"),
+            30: convertToRGB("--color-background-30"),
+            40: convertToRGB("--color-background-40"),
+            50: convertToRGB("--color-background-50"),
+            60: convertToRGB("--color-background-60"),
+            70: convertToRGB("--color-background-70"),
+            80: convertToRGB("--color-background-80"),
+            90: convertToRGB("--color-background-90"),
+            100: convertToRGB("--color-background-100"),
+            200: convertToRGB("--color-background-200"),
+            300: convertToRGB("--color-background-300"),
+            400: convertToRGB("--color-background-400"),
+            500: convertToRGB("--color-background-500"),
+            600: convertToRGB("--color-background-600"),
+            700: convertToRGB("--color-background-700"),
+            800: convertToRGB("--color-background-800"),
+            900: convertToRGB("--color-background-900"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-background-100"),
+          },
           sidebar: {
             background: {
               0: "rgb(255, 255, 255)",
@@ -149,7 +146,31 @@ module.exports = {
               1000: "rgb(0, 0, 0)",
               DEFAULT: convertToRGB("--color-sidebar-text-100"),
             },
+            border: {
+              0: "rgb(255, 255, 255)",
+              10: convertToRGB("--color-sidebar-background-10"),
+              20: convertToRGB("--color-sidebar-background-20"),
+              30: convertToRGB("--color-sidebar-background-30"),
+              40: convertToRGB("--color-sidebar-background-40"),
+              50: convertToRGB("--color-sidebar-background-50"),
+              60: convertToRGB("--color-sidebar-background-60"),
+              70: convertToRGB("--color-sidebar-background-70"),
+              80: convertToRGB("--color-sidebar-background-80"),
+              90: convertToRGB("--color-sidebar-background-90"),
+              100: convertToRGB("--color-sidebar-background-100"),
+              200: convertToRGB("--color-sidebar-background-200"),
+              300: convertToRGB("--color-sidebar-background-300"),
+              400: convertToRGB("--color-sidebar-background-400"),
+              500: convertToRGB("--color-sidebar-background-500"),
+              600: convertToRGB("--color-sidebar-background-600"),
+              700: convertToRGB("--color-sidebar-background-700"),
+              800: convertToRGB("--color-sidebar-background-800"),
+              900: convertToRGB("--color-sidebar-background-900"),
+              1000: "rgb(0, 0, 0)",
+              DEFAULT: convertToRGB("--color-sidebar-background-100"),
+            },
           },
+          backdrop: "#131313",
         },
       },
       keyframes: {