diff --git a/apps/app/components/account/email-code-form.tsx b/apps/app/components/account/email-code-form.tsx
index e1b7aea98..ba8c759af 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 8a0dc3a33..97da2b9e4 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 d997b3a3d..889d46405 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-100 p-2 text-sm font-medium text-custom-text-200 duration-300 hover:bg-custom-background-80">
           <Image src={githubImage} height={20} width={20} color="#000" alt="GitHub Logo" />
           <span>Sign In with Github</span>
         </button>
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 afaaf1b98..22e728089 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-100 bg-custom-background-100 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <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 f46b7f2b2..4d6a2bdbe 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 7fd0c1396..8f4a413b5 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-100 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 cce93204c..3f70dddc5 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 7286a9cf8..8c2b822e5 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 418d87c4a..54428486b 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-100 md:h-full md:border-l md:border-custom-border-100 md:space-y-4 overflow-hidden md:flex-col md:items-start md:py-5"
           : ""
       }`}
     >
       <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 df3953b35..54a73186e 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-100 whitespace-nowrap border-y border-custom-border-100">
+            <thead className="bg-custom-background-80">
+              <tr className="divide-x divide-custom-border-100 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-100">
               {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-100 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 5fdb6682d..454b2abaf 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-100 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-100 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-100 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 4a454b564..bb0627025 100644
--- a/apps/app/components/analytics/scope-and-demand/demand.tsx
+++ b/apps/app/components/analytics/scope-and-demand/demand.tsx
@@ -10,10 +10,10 @@ 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-100 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>
+      <h4 className="text-custom-text-100 text-base font-medium">Total open tasks</h4>
       <h3 className="mt-1 text-xl font-semibold">{defaultAnalytics.open_issues}</h3>
     </div>
     <div className="space-y-6">
@@ -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-100 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 72b892eeb..daad1a9d9 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-100 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 d5bf10bc2..cfc315ac1 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 b0a422ed4..1247fa824 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-100">
     <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-100">
       <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-100 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 9a1f7bdc3..c1e0e95fa 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-100 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-100 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 0cc88aa3b..5d625bd02 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 ef6a2fe51..e125d8401 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 d76e56b61..f0917a640 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 06ae1c240..854773632 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 12bb3d850..ee63b5883 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 6e2c85785..893d6fde1 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-100 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-100 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 f4bcd7483..b2b43c670 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 32634f18c..244265ff5 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-100 divide-opacity-10 rounded-xl border border-custom-border-100 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-100 bg-transparent p-4 pl-11 text-custom-text-100 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 8f946f5ea..339d3695e 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-custom-text-200 hover:text-custom-text-100"
                               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-100 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-100 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-100 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-100 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-100 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-100 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-100 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 711fb7336..7b5d1e527 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 880a6b56b..38cb8fa87 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 52b20d220..9cfe9c937 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 6753e84cd..27a95d29e 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-100 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-100 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-100 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 23c11d254..c9afc4217 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-100 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-100 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-100 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-100 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 9da6e5873..e61a7b1ce 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-100 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 2dbfe5dfd..0e39e1950 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-100 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-100 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 31cbf139c..7c5c89afa 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-100 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>
@@ -267,9 +267,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-100 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>
@@ -277,9 +277,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-100 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>
@@ -287,9 +287,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-100 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 d00804ec8..bc915d294 100644
--- a/apps/app/components/core/feeds.tsx
+++ b/apps/app/components/core/feeds.tsx
@@ -55,55 +55,55 @@ 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",
-    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-gray-500" 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-gray-500" 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-gray-500 " aria-hidden="true" />,
+    icon: <PaperClipIcon className="h-3 w-3 text-custom-text-200 " aria-hidden="true" />,
   },
 };
 
@@ -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-100 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 6c6bc4ec6..e3a24a7b1 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-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <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 7254f8072..2e895e5e4 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-100 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-100 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-100 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 67b2423ec..2958b966d 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-100 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-100 bg-custom-background-90 p-3 shadow-lg">
+                <div className="relative divide-y-2 divide-custom-border-100">
                   <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;
@@ -289,8 +291,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-100"
                             }`}
                             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 380c6f356..0bc64142d 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-100 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-100 bg-custom-background-80 shadow-lg">
+          <div className="h-96 w-80 overflow-auto rounded border border-custom-border-100 bg-custom-background-80 p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
             <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 7a8c8960f..39135480f 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-100" />}
         </>
       )}
 
@@ -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 774fbb02d..686151243 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-100 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-100 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-100 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-100 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 b76f3ad8a..4ea1be2f3 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-custom-text-200 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 a2c6310e9..6addb2e94 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 rounded-xl border border-custom-border-100 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 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-100 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 e9a004a5e..906d6d470 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-100 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 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-100 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-100 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 a62b3e413..dff1209c3 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-100 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 4168c5e0a..9bca11124 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-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <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-100 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 3c22c2b1b..543e733d6 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 590ebc758..7094b9b86 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 5fa25e863..86de2f336 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-100 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 b90f4e3ee..cfa8bdc2b 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-100" : "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-100" : "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-100" : "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-100 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 7c7f65446..1498c9bad 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 daeeedd9a..0bb45371b 100644
--- a/apps/app/components/core/spreadsheet-view/single-issue.tsx
+++ b/apps/app/components/core/spreadsheet-view/single-issue.tsx
@@ -179,12 +179,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-100 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-100 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}
@@ -198,11 +198,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-100 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-custom-text-200 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);
@@ -216,7 +216,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-custom-text-200 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);
@@ -230,7 +230,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-custom-text-200 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);
@@ -245,7 +245,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>
             )}
@@ -254,7 +254,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" : ""}`} />
@@ -264,13 +264,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-100">
           <ViewStateSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -284,7 +284,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
       )}
       {properties.priority && (
-        <div className="flex items-center text-xs text-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-100">
           <ViewPrioritySelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -297,7 +297,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
       )}
       {properties.assignee && (
-        <div className="flex items-center text-xs text-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-100">
           <ViewAssigneeSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -310,7 +310,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
       )}
       {properties.labels && (
-        <div className="flex items-center text-xs text-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-100">
           <ViewLabelSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -324,7 +324,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
       )}
 
       {properties.due_date && (
-        <div className="flex items-center text-xs text-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-100">
           <ViewDueDateSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
@@ -336,7 +336,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         </div>
       )}
       {properties.estimate && (
-        <div className="flex items-center text-xs text-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-100">
           <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 b05a5e82b..9341e446d 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">
@@ -166,7 +168,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}
@@ -177,8 +179,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">
@@ -249,7 +251,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 5b8ee0077..ad78ae938 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-100 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-100 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-100 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-100 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 8582023a2..1b740ca27 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-100"
                     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 2af368f01..4ee904b11 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 e7a1990e9..b97d7c9c6 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-100">
+      <div className="grid grid-cols-1 divide-y border-custom-border-100 lg:divide-y-0 lg:divide-x lg:grid-cols-3">
         <div className="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">
@@ -227,7 +227,7 @@ export const ActiveCycleDetails: React.FC = () => {
                           : cycleStatus === "completed"
                           ? "#3F76FF"
                           : cycleStatus === "draft"
-                          ? "#858E96"
+                          ? "rgb(var(--color-text-200))"
                           : ""
                       }`}
                     />
@@ -300,18 +300,18 @@ export const ActiveCycleDetails: React.FC = () => {
                         handleAddToFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 " color="#858E96" />
+                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                     </button>
                   )}
                 </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="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-100 md:divide-y-0 md:divide-x md:grid-cols-2">
+          <div className="flex h-60 flex-col border-custom-border-100">
+            <div className="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,22 +391,22 @@ export const ActiveCycleDetails: React.FC = () => {
               </div>
             </div>
           </div>
-          <div className="border-brand-base h-60 overflow-y-scroll">
+          <div className="border-custom-border-100 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-100 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>
+            <div className="text-custom-primary">High Priority Issues</div>
             <div className="my-3 flex max-h-[240px] min-h-[240px] flex-col gap-2.5 overflow-y-scroll rounded-md">
               {issues ? (
                 issues.length > 0 ? (
                   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-100 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-100 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-100 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 30b69ffaf..09a692b39 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-100 ${
+              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-100 ${
+              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-100 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 056872c33..ddb9a5b13 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 261e81018..0220018ab 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-100">
               {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-100">
                     <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 d60e3ddce..4d9a59b41 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-100 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 5c0b2e080..8ff2b20d0 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-100 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 42ecad448..f484365e2 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 3c1c16506..3af8b1cec 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-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <CycleForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/cycles/select.tsx b/apps/app/components/cycles/select.tsx
index 2fdda69b5..70aad5b88 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-100 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-custom-background-90 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
             >
-              <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 2080d7f6b..6c9cce134 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-100 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-100 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-100 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-100 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-100 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-100 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 c00429a43..07250fb6c 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-100 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">
@@ -145,7 +145,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                           : cycleStatus === "completed"
                           ? "#3F76FF"
                           : cycleStatus === "draft"
-                          ? "#858E96"
+                          ? "rgb(var(--color-text-200))"
                           : ""
                       }`}
                     />
@@ -218,12 +218,12 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                         handleAddToFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 " color="#858E96" />
+                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                     </button>
                   )}
                 </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}
@@ -253,17 +253,17 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                           alt={cycle.owned_by.first_name}
                         />
                       ) : (
-                        <span className="bg-brand-secondary flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize  text-white">
+                        <span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize text-white">
                           {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-100 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 423580383..33cc5e3b6 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">
@@ -168,7 +168,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                         : cycleStatus === "completed"
                         ? "#3F76FF"
                         : cycleStatus === "draft"
-                        ? "#858E96"
+                        ? "rgb(var(--color-text-200))"
                         : ""
                     }`}
                   />
@@ -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}
@@ -258,7 +258,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                         alt={cycle.owned_by.first_name}
                       />
                     ) : (
-                      <span className="bg-brand-secondary flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize  text-white">
+                      <span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize text-white">
                         {cycle.owned_by.first_name.charAt(0)}
                       </span>
                     )}
@@ -336,7 +336,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                         handleAddToFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 " color="#858E96" />
+                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                     </button>
                   )}
                   <div className="flex items-center">
diff --git a/apps/app/components/cycles/transfer-issues-modal.tsx b/apps/app/components/cycles/transfer-issues-modal.tsx
index 6eea69342..fe71d82a2 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-100 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 5febdffcc..a49c7665f 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 fecba1c15..ff9a40d40 100644
--- a/apps/app/components/emoji-icon-picker/index.tsx
+++ b/apps/app/components/emoji-icon-picker/index.tsx
@@ -30,7 +30,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
 
   const [isOpen, setIsOpen] = useState(false);
   const [openColorPicker, setOpenColorPicker] = useState(false);
-  const [activeColor, setActiveColor] = useState<string>("#858e96");
+  const [activeColor, setActiveColor] = useState<string>("rgb(var(--color-text-200))");
 
   const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
 
@@ -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-100 bg-custom-background-80 shadow-lg">
+          <div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-100 bg-custom-background-80 p-2 shadow-xl">
             <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-100" />
                   <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-100" />
                     <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 68cbcaaaf..e9caeeee3 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-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                   <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 5a4f9ccfa..52cc42417 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-100 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 5e331c139..21ffe4aff 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 31e7839cc..7e3f9972d 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-100"
                       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-100 border-r border-custom-border-100 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 489bc3eb6..8c46eaf6b 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-100">
         {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-100">
                 <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-100">
                 {_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-100`
                         }`}
                       >
                         <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 1ad1649b6..f8b3458cb 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-100">
         {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-100">
                 <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-100">
                 {_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-100`
                         }`}
                       >
                         <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 02b2d15b1..2ee097664 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-100">
         {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-100">
                 <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-100">
                 {_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-100`
                         }`}
                       >
                         <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 72d6888e2..5731abc2f 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-100` : ``
+      } 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-100">
         {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-100 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-100 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-100 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-100 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-100">
         <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 197ac9930..7941de48c 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-100">
         {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-100">
                 <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-100">
                 {_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-100`
                         }`}
                       >
                         <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 57f6f4f5e..159eeaa63 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-100">
         {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-100">
                 <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-100">
                 {_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-100`
                         }`}
                       >
                         <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 695fa2aa5..da87ff811 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-100">
         {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-100">
                 <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-100">
                 {_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-100`
                         }`}
                       >
                         <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 d06f0e025..ec4578ca4 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-100">
         {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-100">
                 <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-100">
                 {_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-100`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/apps/app/components/icons/alarm-clock-icon.tsx b/apps/app/components/icons/alarm-clock-icon.tsx
index 598d2733c..83180496a 100644
--- a/apps/app/components/icons/alarm-clock-icon.tsx
+++ b/apps/app/components/icons/alarm-clock-icon.tsx
@@ -3,7 +3,7 @@ import type { Props } from "./types";
 export const AlarmClockIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/arrow-right.tsx b/apps/app/components/icons/arrow-right.tsx
index a157e5820..df8d8d86c 100644
--- a/apps/app/components/icons/arrow-right.tsx
+++ b/apps/app/components/icons/arrow-right.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const ArrowRightIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/assignment-clipboard-icon.tsx b/apps/app/components/icons/assignment-clipboard-icon.tsx
index 5045f048d..777397981 100644
--- a/apps/app/components/icons/assignment-clipboard-icon.tsx
+++ b/apps/app/components/icons/assignment-clipboard-icon.tsx
@@ -5,8 +5,8 @@ import type { Props } from "./types";
 export const AssignmentClipboardIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
-  className
+  color = "rgb(var(--color-text-200))",
+  className,
 }) => (
   <svg
     width={width}
@@ -16,6 +16,9 @@ export const AssignmentClipboardIcon: React.FC<Props> = ({
     fill="currentColor"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path fill={color} d="M2.125 19.25C1.74306 19.25 1.4184 19.1163 1.15104 18.8489C0.883681 18.5816 0.75 18.2569 0.75 17.875V4.12499C0.75 3.74305 0.883681 3.41839 1.15104 3.15103C1.4184 2.88367 1.74306 2.74999 2.125 2.74999H6.82292C6.89931 2.21527 7.14375 1.77603 7.55625 1.43228C7.96875 1.08853 8.45 0.916656 9 0.916656C9.55 0.916656 10.0312 1.08853 10.4438 1.43228C10.8562 1.77603 11.1007 2.21527 11.1771 2.74999H15.875C16.2569 2.74999 16.5816 2.88367 16.849 3.15103C17.1163 3.41839 17.25 3.74305 17.25 4.12499V17.875C17.25 18.2569 17.1163 18.5816 16.849 18.8489C16.5816 19.1163 16.2569 19.25 15.875 19.25H2.125ZM2.125 17.875H15.875V4.12499H2.125V17.875ZM4.41667 15.5833H10.6729V14.2083H4.41667V15.5833ZM4.41667 11.6875H13.5833V10.3125H4.41667V11.6875ZM4.41667 7.79166H13.5833V6.41666H4.41667V7.79166ZM9 3.73541C9.21389 3.73541 9.40104 3.6552 9.56146 3.49478C9.72188 3.33436 9.80208 3.14721 9.80208 2.93332C9.80208 2.71943 9.72188 2.53228 9.56146 2.37186C9.40104 2.21145 9.21389 2.13124 9 2.13124C8.78611 2.13124 8.59896 2.21145 8.43854 2.37186C8.27812 2.53228 8.19792 2.71943 8.19792 2.93332C8.19792 3.14721 8.27812 3.33436 8.43854 3.49478C8.59896 3.6552 8.78611 3.73541 9 3.73541ZM2.125 17.875V4.12499V17.875Z" />
+    <path
+      fill={color}
+      d="M2.125 19.25C1.74306 19.25 1.4184 19.1163 1.15104 18.8489C0.883681 18.5816 0.75 18.2569 0.75 17.875V4.12499C0.75 3.74305 0.883681 3.41839 1.15104 3.15103C1.4184 2.88367 1.74306 2.74999 2.125 2.74999H6.82292C6.89931 2.21527 7.14375 1.77603 7.55625 1.43228C7.96875 1.08853 8.45 0.916656 9 0.916656C9.55 0.916656 10.0312 1.08853 10.4438 1.43228C10.8562 1.77603 11.1007 2.21527 11.1771 2.74999H15.875C16.2569 2.74999 16.5816 2.88367 16.849 3.15103C17.1163 3.41839 17.25 3.74305 17.25 4.12499V17.875C17.25 18.2569 17.1163 18.5816 16.849 18.8489C16.5816 19.1163 16.2569 19.25 15.875 19.25H2.125ZM2.125 17.875H15.875V4.12499H2.125V17.875ZM4.41667 15.5833H10.6729V14.2083H4.41667V15.5833ZM4.41667 11.6875H13.5833V10.3125H4.41667V11.6875ZM4.41667 7.79166H13.5833V6.41666H4.41667V7.79166ZM9 3.73541C9.21389 3.73541 9.40104 3.6552 9.56146 3.49478C9.72188 3.33436 9.80208 3.14721 9.80208 2.93332C9.80208 2.71943 9.72188 2.53228 9.56146 2.37186C9.40104 2.21145 9.21389 2.13124 9 2.13124C8.78611 2.13124 8.59896 2.21145 8.43854 2.37186C8.27812 2.53228 8.19792 2.71943 8.19792 2.93332C8.19792 3.14721 8.27812 3.33436 8.43854 3.49478C8.59896 3.6552 8.78611 3.73541 9 3.73541ZM2.125 17.875V4.12499V17.875Z"
+    />
   </svg>
 );
diff --git a/apps/app/components/icons/backlog-state-icon.tsx b/apps/app/components/icons/backlog-state-icon.tsx
index 48ae09524..2c140a112 100644
--- a/apps/app/components/icons/backlog-state-icon.tsx
+++ b/apps/app/components/icons/backlog-state-icon.tsx
@@ -6,7 +6,7 @@ export const BacklogStateIcon: React.FC<Props> = ({
   width = "20",
   height = "20",
   className,
-  color = "#858e96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/calendar-after-icon.tsx b/apps/app/components/icons/calendar-after-icon.tsx
index 278e500f0..5acfbb083 100644
--- a/apps/app/components/icons/calendar-after-icon.tsx
+++ b/apps/app/components/icons/calendar-after-icon.tsx
@@ -14,7 +14,7 @@ export const CalendarAfterIcon: React.FC<Props> = ({ width = "24", height = "24"
     <g clipPath="url(#clip0_3309_70901)">
       <path
         d="M10.6125 17V15.875H14.625V7.8125H3.375V11.9375H2.25V4.25C2.25 3.95 2.3625 3.6875 2.5875 3.4625C2.8125 3.2375 3.075 3.125 3.375 3.125H4.59375V2H5.8125V3.125H12.1875V2H13.4063V3.125H14.625C14.925 3.125 15.1875 3.2375 15.4125 3.4625C15.6375 3.6875 15.75 3.95 15.75 4.25V15.875C15.75 16.175 15.6375 16.4375 15.4125 16.6625C15.1875 16.8875 14.925 17 14.625 17H10.6125ZM6 18.2375L5.2125 17.45L7.33125 15.3125H0.9375V14.1875H7.33125L5.2125 12.05L6 11.2625L9.4875 14.75L6 18.2375ZM3.375 6.6875H14.625V4.25H3.375V6.6875Z"
-        fill="#858E96"
+        fill="rgb(var(--color-text-200))"
       />
     </g>
     <defs>
@@ -23,4 +23,4 @@ export const CalendarAfterIcon: React.FC<Props> = ({ width = "24", height = "24"
       </clipPath>
     </defs>
   </svg>
-);
\ No newline at end of file
+);
diff --git a/apps/app/components/icons/calendar-before-icon.tsx b/apps/app/components/icons/calendar-before-icon.tsx
index f2651c084..abcbfb3e9 100644
--- a/apps/app/components/icons/calendar-before-icon.tsx
+++ b/apps/app/components/icons/calendar-before-icon.tsx
@@ -14,13 +14,13 @@ export const CalendarBeforeIcon: React.FC<Props> = ({ width = "24", height = "24
     <g clipPath="url(#clip0_3309_70907)">
       <path
         d="M10.6125 16.5V15.375H14.625V7.3125H3.375V11.4375H2.25V3.75C2.25 3.45 2.3625 3.1875 2.5875 2.9625C2.8125 2.7375 3.075 2.625 3.375 2.625H4.59375V1.5H5.8125V2.625H12.1875V1.5H13.4062V2.625H14.625C14.925 2.625 15.1875 2.7375 15.4125 2.9625C15.6375 3.1875 15.75 3.45 15.75 3.75V15.375C15.75 15.675 15.6375 15.9375 15.4125 16.1625C15.1875 16.3875 14.925 16.5 14.625 16.5H10.6125ZM3.375 6.1875H14.625V3.75H3.375V6.1875Z"
-        fill="#858E96"
+        fill="rgb(var(--color-text-200))"
       />
       <g clipPath="url(#clip1_3309_70907)">
         <path
           d="M3.99967 17.1667L1.33301 14.5L3.99967 11.8334L4.34967 12.1834L2.28301 14.25H8V14.75H2.28301L4.34967 16.8167L3.99967 17.1667Z"
-          fill="#858E96"
-          stroke="#858E96"
+          fill="rgb(var(--color-text-200))"
+          stroke="rgb(var(--color-text-200))"
           strokeWidth="0.5"
         />
       </g>
diff --git a/apps/app/components/icons/calendar-month-icon.tsx b/apps/app/components/icons/calendar-month-icon.tsx
index dbfc43c50..cf541d4dc 100644
--- a/apps/app/components/icons/calendar-month-icon.tsx
+++ b/apps/app/components/icons/calendar-month-icon.tsx
@@ -13,7 +13,7 @@ export const CalendarMonthIcon: React.FC<Props> = ({ width = "24", height = "24"
   >
     <path
       d="M12 14C11.7167 14 11.4792 13.9042 11.2875 13.7125C11.0958 13.5208 11 13.2833 11 13C11 12.7167 11.0958 12.4792 11.2875 12.2875C11.4792 12.0958 11.7167 12 12 12C12.2833 12 12.5208 12.0958 12.7125 12.2875C12.9042 12.4792 13 12.7167 13 13C13 13.2833 12.9042 13.5208 12.7125 13.7125C12.5208 13.9042 12.2833 14 12 14ZM8 14C7.71667 14 7.47917 13.9042 7.2875 13.7125C7.09583 13.5208 7 13.2833 7 13C7 12.7167 7.09583 12.4792 7.2875 12.2875C7.47917 12.0958 7.71667 12 8 12C8.28333 12 8.52083 12.0958 8.7125 12.2875C8.90417 12.4792 9 12.7167 9 13C9 13.2833 8.90417 13.5208 8.7125 13.7125C8.52083 13.9042 8.28333 14 8 14ZM16 14C15.7167 14 15.4792 13.9042 15.2875 13.7125C15.0958 13.5208 15 13.2833 15 13C15 12.7167 15.0958 12.4792 15.2875 12.2875C15.4792 12.0958 15.7167 12 16 12C16.2833 12 16.5208 12.0958 16.7125 12.2875C16.9042 12.4792 17 12.7167 17 13C17 13.2833 16.9042 13.5208 16.7125 13.7125C16.5208 13.9042 16.2833 14 16 14ZM12 18C11.7167 18 11.4792 17.9042 11.2875 17.7125C11.0958 17.5208 11 17.2833 11 17C11 16.7167 11.0958 16.4792 11.2875 16.2875C11.4792 16.0958 11.7167 16 12 16C12.2833 16 12.5208 16.0958 12.7125 16.2875C12.9042 16.4792 13 16.7167 13 17C13 17.2833 12.9042 17.5208 12.7125 17.7125C12.5208 17.9042 12.2833 18 12 18ZM8 18C7.71667 18 7.47917 17.9042 7.2875 17.7125C7.09583 17.5208 7 17.2833 7 17C7 16.7167 7.09583 16.4792 7.2875 16.2875C7.47917 16.0958 7.71667 16 8 16C8.28333 16 8.52083 16.0958 8.7125 16.2875C8.90417 16.4792 9 16.7167 9 17C9 17.2833 8.90417 17.5208 8.7125 17.7125C8.52083 17.9042 8.28333 18 8 18ZM16 18C15.7167 18 15.4792 17.9042 15.2875 17.7125C15.0958 17.5208 15 17.2833 15 17C15 16.7167 15.0958 16.4792 15.2875 16.2875C15.4792 16.0958 15.7167 16 16 16C16.2833 16 16.5208 16.0958 16.7125 16.2875C16.9042 16.4792 17 16.7167 17 17C17 17.2833 16.9042 17.5208 16.7125 17.7125C16.5208 17.9042 16.2833 18 16 18ZM4.5 22C4.1 22 3.75 21.85 3.45 21.55C3.15 21.25 3 20.9 3 20.5V5C3 4.6 3.15 4.25 3.45 3.95C3.75 3.65 4.1 3.5 4.5 3.5H6.125V2.8C6.125 2.56667 6.2 2.375 6.35 2.225C6.5 2.075 6.69167 2 6.925 2C7.15833 2 7.35417 2.075 7.5125 2.225C7.67083 2.375 7.75 2.56667 7.75 2.8V3.5H16.25V2.8C16.25 2.56667 16.325 2.375 16.475 2.225C16.625 2.075 16.8167 2 17.05 2C17.2833 2 17.4792 2.075 17.6375 2.225C17.7958 2.375 17.875 2.56667 17.875 2.8V3.5H19.5C19.9 3.5 20.25 3.65 20.55 3.95C20.85 4.25 21 4.6 21 5V20.5C21 20.9 20.85 21.25 20.55 21.55C20.25 21.85 19.9 22 19.5 22H4.5ZM4.5 20.5H19.5V9.75H4.5V20.5ZM4.5 8.25H19.5V5H4.5V8.25ZM4.5 8.25V5V8.25Z"
-      fill="#858E96"
+      fill="rgb(var(--color-text-200))"
     />
   </svg>
 );
diff --git a/apps/app/components/icons/check.tsx b/apps/app/components/icons/check.tsx
index 6ab04cd43..e62e4e46a 100644
--- a/apps/app/components/icons/check.tsx
+++ b/apps/app/components/icons/check.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const CheckIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/cloud-upload.tsx b/apps/app/components/icons/cloud-upload.tsx
index 585ed4a4a..f01674d38 100644
--- a/apps/app/components/icons/cloud-upload.tsx
+++ b/apps/app/components/icons/cloud-upload.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const CloudUploadIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/cog.tsx b/apps/app/components/icons/cog.tsx
index b0167fdd0..490426ccd 100644
--- a/apps/app/components/icons/cog.tsx
+++ b/apps/app/components/icons/cog.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const CogIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/color-pallette-icon.tsx b/apps/app/components/icons/color-pallette-icon.tsx
index 23f0e41d3..5d7b73ebf 100644
--- a/apps/app/components/icons/color-pallette-icon.tsx
+++ b/apps/app/components/icons/color-pallette-icon.tsx
@@ -6,7 +6,7 @@ export const ColorPalletteIcon: React.FC<Props> = ({
   width = "20",
   height = "20",
   className,
-  color = "#858e96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/command-icon.tsx b/apps/app/components/icons/command-icon.tsx
index 5b3121f98..d6465b789 100644
--- a/apps/app/components/icons/command-icon.tsx
+++ b/apps/app/components/icons/command-icon.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const CommandIcon: React.FC<Props> = ({
   width = "81",
   height = "80",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/contrast-icon.tsx b/apps/app/components/icons/contrast-icon.tsx
index 5dfa47e4d..989a93409 100644
--- a/apps/app/components/icons/contrast-icon.tsx
+++ b/apps/app/components/icons/contrast-icon.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const ContrastIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/cycle-icon.tsx b/apps/app/components/icons/cycle-icon.tsx
index f8881c6c1..16c9b8c94 100644
--- a/apps/app/components/icons/cycle-icon.tsx
+++ b/apps/app/components/icons/cycle-icon.tsx
@@ -6,7 +6,7 @@ export const CyclesIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
   className,
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/discord-icon.tsx b/apps/app/components/icons/discord-icon.tsx
index cec62944e..27bfdcbe9 100644
--- a/apps/app/components/icons/discord-icon.tsx
+++ b/apps/app/components/icons/discord-icon.tsx
@@ -13,7 +13,7 @@ export const DiscordIcon: React.FC<Props> = ({ width = "24", height = "24", clas
   >
     <g clipPath="url(#clip0_282_229)">
       <path
-        fill={color ? color : "#858E96"}
+        fill={color ? color : "rgb(var(--color-text-200))"}
         d="M16.9312 3.64157C15.6346 3.04643 14.2662 2.62206 12.8604 2.37907C12.8476 2.37657 12.8343 2.37821 12.8225 2.38375C12.8106 2.38929 12.8009 2.39845 12.7946 2.4099C12.6196 2.7224 12.4246 3.1299 12.2879 3.45157C10.7724 3.22139 9.23088 3.22139 7.7154 3.45157C7.5633 3.09515 7.39165 2.7474 7.20123 2.4099C7.19467 2.39871 7.18486 2.38977 7.1731 2.38426C7.16135 2.37876 7.1482 2.37695 7.1354 2.37907C5.72944 2.62155 4.36101 3.04595 3.06457 3.64157C3.05359 3.64617 3.04429 3.65402 3.0379 3.66407C0.444567 7.53823 -0.266266 11.3166 0.0829005 15.0474C0.0837487 15.0567 0.0864772 15.0656 0.0909192 15.0738C0.0953611 15.082 0.101423 15.0892 0.108734 15.0949C1.6184 16.2134 3.30716 17.0672 5.1029 17.6199C5.11556 17.6236 5.12903 17.6233 5.14153 17.6191C5.15403 17.615 5.16497 17.6071 5.1729 17.5966C5.55895 17.072 5.90069 16.5162 6.19457 15.9349C6.19866 15.9269 6.20103 15.9182 6.2015 15.9093C6.20198 15.9003 6.20056 15.8914 6.19733 15.8831C6.1941 15.8747 6.18914 15.8671 6.18278 15.8609C6.17641 15.8546 6.16878 15.8497 6.1604 15.8466C5.62159 15.6404 5.09995 15.3918 4.6004 15.1032C4.59124 15.0979 4.58354 15.0905 4.57797 15.0815C4.5724 15.0725 4.56914 15.0622 4.56848 15.0517C4.56782 15.0411 4.56978 15.0306 4.57418 15.021C4.57859 15.0113 4.58531 15.003 4.59373 14.9966C4.69893 14.9179 4.80229 14.8367 4.90373 14.7532C4.91261 14.746 4.92331 14.7414 4.93464 14.74C4.94597 14.7385 4.95748 14.7402 4.9679 14.7449C8.24123 16.2391 11.7846 16.2391 15.0196 14.7449C15.0301 14.74 15.0418 14.7382 15.0533 14.7397C15.0648 14.7412 15.0756 14.7459 15.0846 14.7532C15.1846 14.8349 15.2896 14.9182 15.3954 14.9966C15.4037 15.0029 15.4104 15.0111 15.4148 15.0205C15.4193 15.03 15.4213 15.0404 15.4208 15.0508C15.4203 15.0612 15.4173 15.0714 15.412 15.0804C15.4067 15.0894 15.3993 15.0969 15.3904 15.1024C14.892 15.3937 14.3699 15.6424 13.8296 15.8457C13.8212 15.849 13.8135 15.8539 13.8071 15.8603C13.8008 15.8666 13.7958 15.8743 13.7926 15.8827C13.7894 15.8911 13.788 15.9001 13.7884 15.9091C13.7889 15.9181 13.7913 15.9269 13.7954 15.9349C14.0954 16.5166 14.4387 17.0699 14.8162 17.5957C14.824 17.6064 14.8349 17.6145 14.8475 17.6186C14.86 17.6228 14.8736 17.623 14.8862 17.6191C16.685 17.0681 18.3765 16.2142 19.8879 15.0941C19.8953 15.0889 19.9014 15.0822 19.906 15.0744C19.9106 15.0667 19.9135 15.058 19.9146 15.0491C20.3312 10.7349 19.2162 6.9874 16.9571 3.66573C16.9518 3.65453 16.9426 3.64564 16.9312 3.64073V3.64157ZM6.68373 12.7749C5.6979 12.7749 4.88623 11.8707 4.88623 10.7591C4.88623 9.64823 5.6829 8.74323 6.68373 8.74323C7.69207 8.74323 8.49707 9.65657 8.48123 10.7599C8.48123 11.8707 7.68457 12.7749 6.68373 12.7749ZM13.3296 12.7749C12.3437 12.7749 11.5321 11.8707 11.5321 10.7591C11.5321 9.64823 12.3279 8.74323 13.3296 8.74323C14.3379 8.74323 15.1429 9.65657 15.1271 10.7599C15.1271 11.8707 14.3387 12.7749 13.3296 12.7749Z"
       />
     </g>
diff --git a/apps/app/components/icons/github-icon.tsx b/apps/app/components/icons/github-icon.tsx
index 1dc7b5eea..c2bf8f491 100644
--- a/apps/app/components/icons/github-icon.tsx
+++ b/apps/app/components/icons/github-icon.tsx
@@ -16,7 +16,7 @@ export const GithubIcon: React.FC<Props> = ({ width = "24", height = "24", class
         fillRule="evenodd"
         clipRule="evenodd"
         d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
-        fill={color ? color : "#858E96"}
+        fill={color ? color : "rgb(var(--color-text-200))"}
       />
     </g>
     <defs>
diff --git a/apps/app/components/icons/grid-view-icons.tsx b/apps/app/components/icons/grid-view-icons.tsx
index f5e81daf8..a4a3a9aec 100644
--- a/apps/app/components/icons/grid-view-icons.tsx
+++ b/apps/app/components/icons/grid-view-icons.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const GridViewIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/heartbeat-icon.tsx b/apps/app/components/icons/heartbeat-icon.tsx
index ff950ca0b..5276b2cd2 100644
--- a/apps/app/components/icons/heartbeat-icon.tsx
+++ b/apps/app/components/icons/heartbeat-icon.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const HeartbeatIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/import-layers.tsx b/apps/app/components/icons/import-layers.tsx
index 701c51355..d64f5c5f5 100644
--- a/apps/app/components/icons/import-layers.tsx
+++ b/apps/app/components/icons/import-layers.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const ImportLayersIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/inbox-icon.tsx b/apps/app/components/icons/inbox-icon.tsx
index 6013c8861..649504c5b 100644
--- a/apps/app/components/icons/inbox-icon.tsx
+++ b/apps/app/components/icons/inbox-icon.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const InboxIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/layer-diagonal-icon.tsx b/apps/app/components/icons/layer-diagonal-icon.tsx
index aff7bc66c..dc6b5b684 100644
--- a/apps/app/components/icons/layer-diagonal-icon.tsx
+++ b/apps/app/components/icons/layer-diagonal-icon.tsx
@@ -6,7 +6,7 @@ export const LayerDiagonalIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
   className,
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/people-group-icon.tsx b/apps/app/components/icons/people-group-icon.tsx
index 813511208..c7f56cd51 100644
--- a/apps/app/components/icons/people-group-icon.tsx
+++ b/apps/app/components/icons/people-group-icon.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const PeopleGroupIcon: React.FC<Props> = ({
   width = "24",
   height = "16",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/setting-icon.tsx b/apps/app/components/icons/setting-icon.tsx
index 3bee580ae..bf0dfa2c3 100644
--- a/apps/app/components/icons/setting-icon.tsx
+++ b/apps/app/components/icons/setting-icon.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const SettingIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/stacked-layers-horizontal-icon.tsx b/apps/app/components/icons/stacked-layers-horizontal-icon.tsx
index 2d5f75ba9..bd12d0336 100644
--- a/apps/app/components/icons/stacked-layers-horizontal-icon.tsx
+++ b/apps/app/components/icons/stacked-layers-horizontal-icon.tsx
@@ -6,7 +6,7 @@ export const StackedLayersHorizontalIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
   className,
-  color = "#858e96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/stacked-layers-icon.tsx b/apps/app/components/icons/stacked-layers-icon.tsx
index 61e003d0a..459d9217d 100644
--- a/apps/app/components/icons/stacked-layers-icon.tsx
+++ b/apps/app/components/icons/stacked-layers-icon.tsx
@@ -6,7 +6,7 @@ export const StackedLayersIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
   className,
-  color = "#858e96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/target-icon.tsx b/apps/app/components/icons/target-icon.tsx
index 71bc44230..810a3c698 100644
--- a/apps/app/components/icons/target-icon.tsx
+++ b/apps/app/components/icons/target-icon.tsx
@@ -6,7 +6,7 @@ export const TargetIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
   className,
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/tick-mark-icon.tsx b/apps/app/components/icons/tick-mark-icon.tsx
index 3d7c1618c..1f7a5c5a5 100644
--- a/apps/app/components/icons/tick-mark-icon.tsx
+++ b/apps/app/components/icons/tick-mark-icon.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const TickMarkIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/unstarted-state-icon.tsx b/apps/app/components/icons/unstarted-state-icon.tsx
index 0fcad39ea..161a0ab2a 100644
--- a/apps/app/components/icons/unstarted-state-icon.tsx
+++ b/apps/app/components/icons/unstarted-state-icon.tsx
@@ -6,7 +6,7 @@ export const UnstartedStateIcon: React.FC<Props> = ({
   width = "20",
   height = "20",
   className,
-  color = "#858e96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/user-group-icon.tsx b/apps/app/components/icons/user-group-icon.tsx
index 37be59e3f..3cbac8a38 100644
--- a/apps/app/components/icons/user-group-icon.tsx
+++ b/apps/app/components/icons/user-group-icon.tsx
@@ -18,7 +18,7 @@ export const UserGroupIcon: React.FC<Props> = ({
   >
     <path
       d="M14.754 10C15.72 10 16.504 10.784 16.504 11.75V16.499C16.504 17.6927 16.0298 18.8376 15.1857 19.6817C14.3416 20.5258 13.1967 21 12.003 21C10.8093 21 9.66441 20.5258 8.82031 19.6817C7.97621 18.8376 7.502 17.6927 7.502 16.499V11.75C7.502 10.784 8.285 10 9.252 10H14.754ZM14.754 11.5H9.252C9.1857 11.5 9.12211 11.5263 9.07522 11.5732C9.02834 11.6201 9.002 11.6837 9.002 11.75V16.499C9.002 17.2949 9.31818 18.0582 9.88097 18.621C10.4438 19.1838 11.2071 19.5 12.003 19.5C12.7989 19.5 13.5622 19.1838 14.125 18.621C14.6878 18.0582 15.004 17.2949 15.004 16.499V11.75C15.004 11.6837 14.9777 11.6201 14.9308 11.5732C14.8839 11.5263 14.8203 11.5 14.754 11.5ZM3.75 10H7.131C6.7782 10.4261 6.56274 10.949 6.513 11.5H3.75C3.6837 11.5 3.62011 11.5263 3.57322 11.5732C3.52634 11.6201 3.5 11.6837 3.5 11.75V14.999C3.49994 15.3769 3.5855 15.7499 3.75027 16.0899C3.91504 16.43 4.15473 16.7283 4.45133 16.9625C4.74793 17.1966 5.09374 17.3605 5.46277 17.4418C5.83179 17.5231 6.21445 17.5198 6.582 17.432C6.667 17.936 6.822 18.417 7.035 18.864C6.44228 19.0226 5.82103 19.0427 5.21929 18.9228C4.61756 18.8029 4.05145 18.5463 3.56475 18.1727C3.07805 17.7991 2.68379 17.3185 2.41246 16.7682C2.14114 16.2179 2.00001 15.6126 2 14.999V11.75C2 10.784 2.784 10 3.75 10ZM16.875 10H20.25C21.216 10 22 10.784 22 11.75V15C22.0001 15.6132 21.8593 16.2182 21.5884 16.7682C21.3175 17.3183 20.9237 17.7987 20.4376 18.1724C19.9514 18.546 19.3858 18.8029 18.7846 18.9232C18.1833 19.0435 17.5625 19.0239 16.97 18.866C17.184 18.418 17.339 17.937 17.425 17.433C17.7921 17.5198 18.174 17.5223 18.5423 17.4405C18.9105 17.3587 19.2554 17.1946 19.5512 16.9606C19.847 16.7265 20.086 16.4286 20.2503 16.089C20.4147 15.7495 20.5 15.3772 20.5 15V11.75C20.5 11.6837 20.4737 11.6201 20.4268 11.5732C20.3799 11.5263 20.3163 11.5 20.25 11.5H17.493C17.4433 10.949 17.2278 10.4261 16.875 10ZM12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6C15 6.79565 14.6839 7.55871 14.1213 8.12132C13.5587 8.68393 12.7956 9 12 9C11.2044 9 10.4413 8.68393 9.87868 8.12132C9.31607 7.55871 9 6.79565 9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3ZM18.5 4C19.163 4 19.7989 4.26339 20.2678 4.73223C20.7366 5.20107 21 5.83696 21 6.5C21 7.16304 20.7366 7.79893 20.2678 8.26777C19.7989 8.73661 19.163 9 18.5 9C17.837 9 17.2011 8.73661 16.7322 8.26777C16.2634 7.79893 16 7.16304 16 6.5C16 5.83696 16.2634 5.20107 16.7322 4.73223C17.2011 4.26339 17.837 4 18.5 4ZM5.5 4C6.16304 4 6.79893 4.26339 7.26777 4.73223C7.73661 5.20107 8 5.83696 8 6.5C8 7.16304 7.73661 7.79893 7.26777 8.26777C6.79893 8.73661 6.16304 9 5.5 9C4.83696 9 4.20107 8.73661 3.73223 8.26777C3.26339 7.79893 3 7.16304 3 6.5C3 5.83696 3.26339 5.20107 3.73223 4.73223C4.20107 4.26339 4.83696 4 5.5 4ZM12 4.5C11.6022 4.5 11.2206 4.65804 10.9393 4.93934C10.658 5.22064 10.5 5.60218 10.5 6C10.5 6.39782 10.658 6.77936 10.9393 7.06066C11.2206 7.34196 11.6022 7.5 12 7.5C12.3978 7.5 12.7794 7.34196 13.0607 7.06066C13.342 6.77936 13.5 6.39782 13.5 6C13.5 5.60218 13.342 5.22064 13.0607 4.93934C12.7794 4.65804 12.3978 4.5 12 4.5ZM18.5 5.5C18.2348 5.5 17.9804 5.60536 17.7929 5.79289C17.6054 5.98043 17.5 6.23478 17.5 6.5C17.5 6.76522 17.6054 7.01957 17.7929 7.20711C17.9804 7.39464 18.2348 7.5 18.5 7.5C18.7652 7.5 19.0196 7.39464 19.2071 7.20711C19.3946 7.01957 19.5 6.76522 19.5 6.5C19.5 6.23478 19.3946 5.98043 19.2071 5.79289C19.0196 5.60536 18.7652 5.5 18.5 5.5ZM5.5 5.5C5.23478 5.5 4.98043 5.60536 4.79289 5.79289C4.60536 5.98043 4.5 6.23478 4.5 6.5C4.5 6.76522 4.60536 7.01957 4.79289 7.20711C4.98043 7.39464 5.23478 7.5 5.5 7.5C5.76522 7.5 6.01957 7.39464 6.20711 7.20711C6.39464 7.01957 6.5 6.76522 6.5 6.5C6.5 6.23478 6.39464 5.98043 6.20711 5.79289C6.01957 5.60536 5.76522 5.5 5.5 5.5Z"
-      fill={color ? color : "#858E96"}
+      fill={color ? color : "rgb(var(--color-text-200))"}
     />
   </svg>
 );
diff --git a/apps/app/components/icons/users.tsx b/apps/app/components/icons/users.tsx
index 9e590d8fc..ffff9fc73 100644
--- a/apps/app/components/icons/users.tsx
+++ b/apps/app/components/icons/users.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const UsersIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/icons/view-list-icon.tsx b/apps/app/components/icons/view-list-icon.tsx
index e893c2732..3f53fd05b 100644
--- a/apps/app/components/icons/view-list-icon.tsx
+++ b/apps/app/components/icons/view-list-icon.tsx
@@ -6,7 +6,7 @@ export const ViewListIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
   className,
-  color = "#858E96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/icons/water-drop-icon.tsx b/apps/app/components/icons/water-drop-icon.tsx
index 8123db09b..7ff6ff8a4 100644
--- a/apps/app/components/icons/water-drop-icon.tsx
+++ b/apps/app/components/icons/water-drop-icon.tsx
@@ -6,7 +6,7 @@ export const WaterDropIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
   className,
-  color = "#858e96",
+  color = "rgb(var(--color-text-200))",
 }) => (
   <svg
     width={width}
diff --git a/apps/app/components/inbox/accept-issue-modal.tsx b/apps/app/components/inbox/accept-issue-modal.tsx
index 6427c562c..82979051c 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-100 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 11f1db5de..36fa0b72d 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-100 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 f188ff1aa..8973a1395 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-100 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 c12fcb8d2..1379b5885 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-100 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 264b925a2..a7430872d 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-100 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-100 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 ac144ba0b..a26e0aede 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-100 divide-x divide-custom-border-100">
         <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-100 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-100 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-100 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 53d6c2e95..9ef35f742 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-100 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-100"
                 }`}
               >
                 {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-100 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 46aa4b33f..3a0b5550b 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-100 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 6126be117..c188a1b39 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-100 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 74409a57f..a28ba072a 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-100 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 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-100 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,14 +153,14 @@ 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
                                     }
                                     -{issue.sequence_id}
                                   </span>
-                                  <span className="text-brand-muted-1">{issue.name}</span>
+                                  <span className="text-custom-text-200">{issue.name}</span>
                                 </div>
                               </Combobox.Option>
                             ))}
@@ -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 57af3fbfc..6566399c3 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-100 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 4f5784ffd..ca5a55a77 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 7b8c507fe..8a7383062 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 6babaf2e7..eeae3f28d 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 e609e88d4..e4caf349b 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 2a1d74e4f..8a9c97193 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 96ce845c4..ebbd76ee5 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-100 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-100"
                     }`}
                   >
                     <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-100`
                       }`}
                     >
                       {" "}
diff --git a/apps/app/components/integration/github/select-repository.tsx b/apps/app/components/integration/github/select-repository.tsx
index 69040c2d0..9857c0088 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 b94fc1dbd..01e1f2327 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 2db8ef010..1b1a56bb9 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-100 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-100 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-100">
                       {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 1945bb501..54c599151 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 6a1c5b66f..3bfe159b5 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,9 +163,9 @@ 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" />
+                    <PlusIcon className="h-4 w-4 text-custom-text-200" />
                     <span>Create new project</span>
                   </button>
                 </div>
diff --git a/apps/app/components/integration/jira/import-users.tsx b/apps/app/components/integration/jira/import-users.tsx
index 80c0c4c9b..8c7e04788 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-100 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 2e4061638..88803727c 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 b1098c9cb..35dc14357 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-100 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-100 ${
                     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-100"
                   }`}
                 >
                   <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-100`
                     }`}
                   >
                     {" "}
@@ -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-100 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 fa3fd45f6..56ee0adf8 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 f6ae65b12..8d1d480f0 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-100 bg-custom-background-100 p-5">
       <div className="flex items-start gap-4">
         <div className="h-12 w-12 flex-shrink-0">
           <Image
@@ -116,14 +116,14 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
                   <span className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500" /> Installed
                 </span>
               ) : (
-                <span className="flex items-center gap-1 text-sm font-normal text-gray-400">
-                  <span className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-gray-400" /> Not
-                  Installed
+                <span className="flex items-center gap-1 text-sm font-normal text-custom-text-200">
+                  <span className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-custom-background-80" />{" "}
+                  Not Installed
                 </span>
               )
             ) : null}
           </h3>
-          <p className="text-sm text-gray-400">
+          <p className="text-sm text-custom-text-200">
             {workspaceIntegrations
               ? isInstalled
                 ? integrationDetails[integration.provider].installed
diff --git a/apps/app/components/issues/activity.tsx b/apps/app/components/issues/activity.tsx
index e30f00b0b..baa860660 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-100 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 7e5184ce8..5eb5f76e3 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-100"
       } ${isDragReject ? "bg-red-100" : ""}`}
     >
       <input {...getInputProps()} />
diff --git a/apps/app/components/issues/attachments.tsx b/apps/app/components/issues/attachments.tsx
index 7f4be47dd..6d56264e5 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-100 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 72f6fcae6..a90c7ff47 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-100"
           />
         ) : (
           <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-100 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 85450809a..0ea0f9684 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 c4fb3b00a..cbda250fe 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-100 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 492110a8c..0770834fa 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 8bf64e6ff..a06b1d7cd 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-100 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 571583707..533badd7d 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 6123556a5..9eb351c8b 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 b83bbc480..c3998fbdf 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-100 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 790570cce..7ef4b495f 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-100 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-100 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-100 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-100 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-100 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-100 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 b93c07d3c..f01fe80bf 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-100 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 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 2e1844a69..6805c931e 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 26288e11b..7ce39c449 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-100 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 18204295b..0d910013b 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 e99eecc16..318d70185 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-100 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-100 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-100">
+                            <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 7404ac5a0..b734e6a90 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 09ed5225c..12ee0a50c 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 fa4807815..99c4140b2 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 6fcd04eb8..93e6d37d5 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 de8985792..c0eb1e33b 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-100 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-100 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 40f1eb10f..f1a934771 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-100 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-100 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 0d8beaab8..4ada12672 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 cfe4bdf75..e1d40d49c 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 7f08bc92c..b64a8cb2b 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 9d183d262..fab15581b 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-100 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 70a23090c..9f3631f7c 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 02d1dd5cb..518e95c81 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 6f231871b..13a9c6395 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-100">
         <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-100 p-2 shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary"
                 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-100">
           {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-100 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-100 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-100 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-100 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-100 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 3558c8d74..06126d710 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 cba1db1e7..c4bf7c16c 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 d330a5f58..bef060e77 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 b82b02a0f..826ba6560 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-100
                           `}
                   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 e7a674ec7..04f500e88 100644
--- a/apps/app/components/issues/view-select/priority.tsx
+++ b/apps/app/components/issues/view-select/priority.tsx
@@ -67,14 +67,14 @@ export const ViewPrioritySelect: React.FC<Props> = ({
             noBorder
               ? ""
               : issue.priority === "urgent"
-              ? "border-red-500/20 bg-red-500/20 text-red-500"
+              ? "border-red-500/20 bg-red-500/20"
               : issue.priority === "high"
-              ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
+              ? "border-orange-500/20 bg-orange-500/20"
               : issue.priority === "medium"
-              ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+              ? "border-yellow-500/20 bg-yellow-500/20"
               : issue.priority === "low"
-              ? "border-green-500/20 bg-green-500/20 text-green-500"
-              : "border-brand-base"
+              ? "border-green-500/20 bg-green-500/20"
+              : "border-custom-border-100 bg-custom-background-80"
           } items-center`}
         >
           <Tooltip
@@ -82,10 +82,20 @@ 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"
+                `text-sm ${
+                  issue.priority === "urgent"
+                    ? "text-red-500"
+                    : issue.priority === "high"
+                    ? "text-orange-500"
+                    : issue.priority === "medium"
+                    ? "text-yellow-500"
+                    : issue.priority === "low"
+                    ? "text-green-500"
+                    : "text-custom-text-200"
+                }`
               )}
               {noBorder
                 ? issue.priority && issue.priority !== ""
diff --git a/apps/app/components/issues/view-select/state.tsx b/apps/app/components/issues/view-select/state.tsx
index a38ff55a7..75d158faf 100644
--- a/apps/app/components/issues/view-select/state.tsx
+++ b/apps/app/components/issues/view-select/state.tsx
@@ -70,7 +70,7 @@ export const ViewStateSelect: React.FC<Props> = ({
       tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")}
       position={tooltipPosition}
     >
-      <div className="flex items-center cursor-pointer w-full gap-2 text-brand-secondary">
+      <div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
         <span className="h-4 w-4">
           {selectedOption &&
             getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)}
diff --git a/apps/app/components/labels/create-label-modal.tsx b/apps/app/components/labels/create-label-modal.tsx
index c7566dc77..c420e45b4 100644
--- a/apps/app/components/labels/create-label-modal.tsx
+++ b/apps/app/components/labels/create-label-modal.tsx
@@ -31,7 +31,7 @@ type Props = {
 
 const defaultValues: Partial<IState> = {
   name: "",
-  color: "#858E96",
+  color: "rgb(var(--color-text-200))",
 };
 
 export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClose, user }) => {
@@ -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 7b1a04b91..f0198b247 100644
--- a/apps/app/components/labels/create-update-label-inline.tsx
+++ b/apps/app/components/labels/create-update-label-inline.tsx
@@ -32,7 +32,7 @@ type Props = {
 
 const defaultValues: Partial<IIssueLabels> = {
   name: "",
-  color: "#858E96",
+  color: "rgb(var(--color-text-200))",
 };
 
 type Ref = HTMLDivElement;
@@ -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-100 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 dd3df0fc4..e45926bfa 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-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-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 23f60ab7f..bc270d9e0 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,80 +96,75 @@ 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-100 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 outline-none focus:ring-0 sm:text-sm"
                     placeholder="Search..."
                     onChange={(e) => setQuery(e.target.value)}
                   />
                 </div>
 
-                <Combobox.Options
-                  static
-                  className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
-                >
+                <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto">
                   {filteredLabels.length > 0 && (
-                    <>
-                      <li className="p-2">
-                        {query === "" && (
-                          <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
-                            Labels
-                          </h2>
-                        )}
-                        <ul className="text-sm text-gray-700">
-                          {filteredLabels.map((label) => {
-                            const children = issueLabels?.filter((l) => l.parent === label.id);
+                    <li className="p-2">
+                      {query === "" && (
+                        <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-custom-text-100">
+                          Labels
+                        </h2>
+                      )}
+                      <ul className="text-sm text-gray-700">
+                        {filteredLabels.map((label) => {
+                          const children = issueLabels?.filter((l) => l.parent === label.id);
 
-                            if (
-                              (label.parent === "" || label.parent === null) && // issue does not have any other parent
-                              label.id !== parent?.id && // issue is not itself
-                              children?.length === 0 // issue doesn't have any othe children
-                            )
-                              return (
-                                <Combobox.Option
-                                  key={label.id}
-                                  value={{
-                                    name: label.name,
+                          if (
+                            (label.parent === "" || label.parent === null) && // issue does not have any other parent
+                            label.id !== parent?.id && // issue is not itself
+                            children?.length === 0 // issue doesn't have any othe children
+                          )
+                            return (
+                              <Combobox.Option
+                                key={label.id}
+                                value={{
+                                  name: label.name,
+                                }}
+                                className={({ active }) =>
+                                  `flex 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={() => {
+                                  addChildLabel(label);
+                                  handleClose();
+                                }}
+                              >
+                                <span
+                                  className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                                  style={{
+                                    backgroundColor: label.color !== "" ? label.color : "#000000",
                                   }}
-                                  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" : ""
-                                    }`
-                                  }
-                                  onClick={() => {
-                                    addChildLabel(label);
-                                    handleClose();
-                                  }}
-                                >
-                                  <span
-                                    className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                                    style={{
-                                      backgroundColor: label.color !== "" ? label.color : "#000000",
-                                    }}
-                                  />
-                                  {label.name}
-                                </Combobox.Option>
-                              );
-                          })}
-                        </ul>
-                      </li>
-                    </>
+                                />
+                                {label.name}
+                              </Combobox.Option>
+                            );
+                        })}
+                      </ul>
+                    </li>
                   )}
                 </Combobox.Options>
 
                 {query !== "" && filteredLabels.length === 0 && (
                   <div className="py-14 px-6 text-center sm:px-14">
                     <RectangleStackIcon
-                      className="mx-auto h-6 w-6 text-brand-base text-opacity-40"
+                      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 f1a74f296..1ee04f932 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-100 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-100 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 58e6d2932..d305db1a6 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-100 rounded-[10px]  border border-custom-border-100 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 deece2ea5..b83092625 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-100 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 e94bc6d72..b5af60ca6 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-100 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 e24e1dd9a..4117483c1 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 c06be46d5..3ab144739 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-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <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 0f109ba6a..b739f0b1e 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 be7052df0..441cb673a 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 c95331202..da2856217 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 02b1a3a75..08192cd5d 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 937a0d6df..0e8dd0f89 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 2481aaeed..b41469863 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 5d5ac9464..f67f40222 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 3b70814f7..5cb8e7d75 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-100 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-100 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-100 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-100 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-100 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-100 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-100 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 ac92bdcdd..a91c29763 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-100 overflow-hidden rounded-[10px] border border-custom-border-100 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 ? (
@@ -155,7 +155,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
                   </button>
                 ) : (
                   <button type="button" onClick={handleAddToFavorites}>
-                    <StarIcon className="h-4 w-4 " color="#858E96" />
+                    <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                   </button>
                 )}
 
@@ -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 913607801..0390723b6 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 2ab3f8654..717c90375 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 1e96bb143..e981839bd 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-100 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 0beef1419..80c0b4034 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-100 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-100 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-100 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-100 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-100 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 d4098db93..29c83da07 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-100 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 0b3fcb17c..95ede7ebe 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-100 rounded border border-custom-border-100 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 57e25b5f7..bf74f352a 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-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <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 eaa7c2189..3d2c5e62d 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-100 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 db466ff0d..b23daee18 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 7d1eac724..bc4f0f438 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-100">
                 {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-100 rounded-[10px] border border-custom-border-100 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-100">
                 {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 898f4aba5..4b2c896ed 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 4be70384e..c6e27f83f 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-100 px-2 py-0.5 text-xs"
                     style={{
                       backgroundColor: `${
                         label?.color && label.color !== "" ? label.color : "#000000"
@@ -101,7 +101,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                   ` ${new Date(page.updated_at).getHours() < 12 ? "am" : "pm"}`
                 } on ${renderShortDate(page.updated_at)}`}
               >
-                <p className="text-sm text-gray-400">{renderShortTime(page.updated_at)}</p>
+                <p className="text-sm text-custom-text-200">{renderShortTime(page.updated_at)}</p>
               </Tooltip>
               {page.is_favorite ? (
                 <button
@@ -125,7 +125,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                   }}
                   className="z-10 grid place-items-center"
                 >
-                  <StarIcon className="h-4 w-4 " color="#858E96" />
+                  <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                 </button>
               )}
               {page.created_by === user?.id && (
@@ -146,9 +146,9 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                     }}
                   >
                     {page.access ? (
-                      <LockClosedIcon className="h-4 w-4" color="#858e96" />
+                      <LockClosedIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
                     ) : (
-                      <LockOpenIcon className="h-4 w-4" color="#858e96" />
+                      <LockOpenIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
                     )}
                   </button>
                 </Tooltip>
@@ -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 876d94102..31299afeb 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-100 px-2 py-0.5 text-xs"
                       style={{
                         backgroundColor: `${label?.color}20`,
                       }}
@@ -102,7 +102,9 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                       page.updated_at
                     )} on ${renderShortDate(page.updated_at)}`}
                   >
-                    <p className="text-sm text-gray-400">{renderShortTime(page.updated_at)}</p>
+                    <p className="text-sm text-custom-text-200">
+                      {renderShortTime(page.updated_at)}
+                    </p>
                   </Tooltip>
                   {page.is_favorite ? (
                     <button
@@ -124,7 +126,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                         handleAddToFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 " color="#858e96" />
+                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                     </button>
                   )}
                   {page.created_by === user?.id && (
@@ -145,9 +147,9 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                         }}
                       >
                         {page.access ? (
-                          <LockClosedIcon className="h-4 w-4" color="#858e96" />
+                          <LockClosedIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
                         ) : (
-                          <LockOpenIcon className="h-4 w-4" color="#858e96" />
+                          <LockOpenIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
                         )}
                       </button>
                     </Tooltip>
@@ -161,7 +163,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 ffa67c344..c6a0538a0 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 f17558d9b..06a3ff29b 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-100 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 eabe85f2d..0a0266fbc 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-100 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 83933dffb..e0517ac6a 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 65643d834..7435d2069 100644
--- a/apps/app/components/project/send-project-invitation-modal.tsx
+++ b/apps/app/components/project/send-project-invitation-modal.tsx
@@ -172,18 +172,19 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg border border-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-100 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 mb-5">
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                  <div className="space-y-5">
+                    <Dialog.Title
+                      as="h3"
+                      className="text-lg font-medium leading-6 text-custom-text-100"
+                    >
                       Invite Members
                     </Dialog.Title>
-                  </div>
-
-                  <div className="text-sm">
-                    <div className="grid grid-cols-12 gap-x-4 mb-3 text-sm">
-                      <h6 className="col-span-7 px-1">Email</h6>
-                      <h6 className="col-span-4 px-1">Role</h6>
+                    <div className="mt-2">
+                      <p className="text-sm text-custom-text-200">
+                        Invite members to work on your project.
+                      </p>
                     </div>
 
                     <div className="space-y-4 mb-3">
@@ -201,7 +202,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
                                 <CustomSearchSelect
                                   value={value}
                                   customButton={
-                                    <button className="flex w-full items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 text-brand-secondary hover:text-brand-base hover:bg-brand-surface-2 focus:outline-none px-3 py-2 text-sm text-left">
+                                    <button className="flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-100 shadow-sm duration-300 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 focus:outline-none px-3 py-2 text-sm text-left">
                                       {value && value !== "" ? (
                                         <div className="flex items-center gap-2">
                                           <Avatar
@@ -275,7 +276,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
                                   className="self-center place-items-center rounded"
                                   onClick={() => remove(index)}
                                 >
-                                  <XMarkIcon className="h-4 w-4 text-brand-secondary" />
+                                  <XMarkIcon className="h-4 w-4 text-custom-text-200" />
                                 </button>
                               )}
                             </div>
@@ -288,7 +289,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
                   <div className="mt-5 flex items-center justify-between gap-2">
                     <button
                       type="button"
-                      className="flex items-center gap-2 outline-brand-accent bg-transparent text-brand-accent text-sm font-medium py-2 pr-3"
+                      className="flex items-center gap-2 outline-custom-primary bg-transparent text-custom-primary text-sm font-medium py-2 pr-3"
                       onClick={appendField}
                     >
                       <PlusIcon className="h-4 w-4" />
diff --git a/apps/app/components/project/settings-header.tsx b/apps/app/components/project/settings-header.tsx
index 0aff5350c..8dcff5138 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 adee30bb5..33abb5875 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-100 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 f9b6c5760..a4125ffac 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-100 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 584c65fe8..7a78d8048 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-100 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 b4fe9c1b1..a66df7413 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 51727b5b3..6140a2ac8 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,16 +182,18 @@ 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">
                         <item.icon
-                          className={`h-5 w-5 flex-shrink-0 text-brand-secondary ${
-                            !sidebarCollapse ? "mr-3" : ""
-                          }`}
-                          color="#858e96"
+                          className={`h-5 w-5 flex-shrink-0 ${!sidebarCollapse ? "mr-3" : ""}`}
+                          color={
+                            router.asPath.includes(item.href)
+                              ? "rgb(var(--color-sidebar-text-100))"
+                              : "rgb(var(--color-sidebar-text-200))"
+                          }
                           aria-hidden="true"
                         />
                       </div>
diff --git a/apps/app/components/rich-text-editor/index.tsx b/apps/app/components/rich-text-editor/index.tsx
index 874f7da47..944a1179a 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-100 ${
+            noBorder ? "" : "border border-custom-border-100"
           } ${
-            borderOnFocus ? "focus:border border-brand-base" : "focus:border-0"
+            borderOnFocus ? "focus:border border-custom-border-100" : "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 e8e081370..81aed8d20 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-100 rounded border border-custom-border-100 bg-custom-background-80 p-1 px-0.5 shadow-md">
+      <div className="flex items-center gap-y-2 divide-x divide-custom-border-100">
         <div className="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 a47c45c1a..045736b99 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 d8f8e24e2..20f49b6db 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 cbbc6cf5b..863179f5f 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-100 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary ${
               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 dca001932..ad7f38c4e 100644
--- a/apps/app/components/states/create-state-modal.tsx
+++ b/apps/app/components/states/create-state-modal.tsx
@@ -36,7 +36,7 @@ type Props = {
 const defaultValues: Partial<IState> = {
   name: "",
   description: "",
-  color: "#858e96",
+  color: "rgb(var(--color-text-200))",
   group: "backlog",
 };
 
@@ -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 94062878f..87ad14731 100644
--- a/apps/app/components/states/create-update-state-inline.tsx
+++ b/apps/app/components/states/create-update-state-inline.tsx
@@ -35,7 +35,7 @@ export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "ca
 
 const defaultValues: Partial<IState> = {
   name: "",
-  color: "#858e96",
+  color: "rgb(var(--color-text-200))",
   group: "backlog",
 };
 
@@ -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 a92f235c4..bbc115ef6 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 8bf4198fe..589648357 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-100 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 c91541aaa..c8f9f791b 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-100 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-100 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 d86227e3a..357832f4e 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 4b857a72c..c65b3a2df 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-100 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-100 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 755318b34..3977b6152 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-100 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-100 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 958453b28..a7014b633 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-100 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-200 bg-custom-background-100"
+                : "border-custom-border-100 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-custom-text-200 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-custom-text-200 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 0eb82305e..b6cbf3191 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -81,8 +81,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-100 ${
+                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 ${
@@ -110,18 +110,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-100 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-100 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}
@@ -147,9 +147,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 }) => (
@@ -177,11 +177,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 ec55bf29a..1b5513666 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-100 shadow-sm duration-300 focus:outline-none ${
+            input ? "border-custom-border-100 px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
           } ${
             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-100 ${
           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 d5a2cb722..abfd9a171 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-100 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 9b20dcafc..106fe9fad 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-100"
     } 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 f853defb6..8c09d4c16 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-100 border-t border-b border-custom-border-100"
       >
         {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 4e469d967..250bee626 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-custom-text-200 mx-1 rounded-sm border border-custom-border-100 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 940eacc70..0725c425a 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 b6e09f876..06668b3e7 100644
--- a/apps/app/components/ui/input/index.tsx
+++ b/apps/app/components/ui/input/index.tsx
@@ -21,7 +21,7 @@ export const Input: React.FC<Props> = ({
 }) => (
   <>
     {label && (
-      <label htmlFor={id} className="text-brand-muted-1 mb-2">
+      <label htmlFor={id} className="text-custom-text-200 mb-2">
         {label}
       </label>
     )}
@@ -36,9 +36,9 @@ export const Input: React.FC<Props> = ({
       }}
       className={`block rounded-md bg-transparent text-sm focus:outline-none ${
         mode === "primary"
-          ? "rounded-md border border-brand-base"
+          ? "rounded-md border border-custom-border-100"
           : 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 19bbc353d..fd24acaab 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 564811f19..053e646cd 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-100
               `}
               style={{
                 backgroundColor: color && color !== "" ? color : "#000000",
diff --git a/apps/app/components/ui/loader.tsx b/apps/app/components/ui/loader.tsx
index 107f03e8c..b9d13883a 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 cb716bc22..53b157b19 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 e9890564d..bacb65713 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-100 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 e0d5b0f17..cf2371471 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-100 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 a063ee45f..510efc5ad 100644
--- a/apps/app/components/ui/multi-level-select.tsx
+++ b/apps/app/components/ui/multi-level-select.tsx
@@ -48,11 +48,11 @@ 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">
-                <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                <ChevronUpDownIcon className="h-5 w-5 text-custom-text-200" aria-hidden="true" />
               </span>
             </Listbox.Button>
             <Transition
@@ -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-100 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}
@@ -113,7 +113,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
                                       {child.label}
                                     </span>
                                     {selected ? (
-                                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">
+                                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-custom-text-200">
                                         <CheckIcon className="h-5 w-5" aria-hidden="true" />
                                       </span>
                                     ) : null}
@@ -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-100 ${
                                 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"
@@ -137,7 +137,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
                           {option.label}
                         </span>
                         {selected ? (
-                          <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">
+                          <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-custom-text-200">
                             <CheckIcon className="h-5 w-5" aria-hidden="true" />
                           </span>
                         ) : null}
diff --git a/apps/app/components/ui/product-updates-modal.tsx b/apps/app/components/ui/product-updates-modal.tsx
index 54dba586f..f965356f8 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-custom-text-200 hover:text-custom-text-100"
                               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-100 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-100 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 0dfda41ec..e2054fd89 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-100 bg-transparent caret-transparent ${className}`}
     dateFormat="dd-MM-yyyy"
     disabled={disabled}
     selectsStart={selectsStart}
diff --git a/apps/app/components/ui/spinner.tsx b/apps/app/components/ui/spinner.tsx
index c27cab362..b96188030 100644
--- a/apps/app/components/ui/spinner.tsx
+++ b/apps/app/components/ui/spinner.tsx
@@ -1,23 +1,23 @@
 import * as React from "react";
 
 export const Spinner: React.FC = () => (
-    <div role="status">
-      <svg
-        aria-hidden="true"
-        className="mr-2 h-8 w-8 animate-spin fill-blue-600 text-gray-200 dark:text-gray-600"
-        viewBox="0 0 100 101"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-          fill="currentColor"
-         />
-        <path
-          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-          fill="currentFill"
-         />
-      </svg>
-      <span className="sr-only">Loading...</span>
-    </div>
-  );
+  <div role="status">
+    <svg
+      aria-hidden="true"
+      className="mr-2 h-8 w-8 animate-spin fill-blue-600 text-custom-text-200"
+      viewBox="0 0 100 101"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+        fill="currentColor"
+      />
+      <path
+        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+        fill="currentFill"
+      />
+    </svg>
+    <span className="sr-only">Loading...</span>
+  </div>
+);
diff --git a/apps/app/components/ui/text-area/index.tsx b/apps/app/components/ui/text-area/index.tsx
index 84251b2d4..b4c242259 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-100"
             : 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 fe4e2c96d..f8046191e 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-100 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 86ca39e54..271dfcd50 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-custom-text-200 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 fa5e6781c..3a2afe977 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-100 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 1b8875138..dc1cf9fba 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 a445331b2..cd586b500 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 755251356..179106a33 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-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <ViewForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/views/select-filters.tsx b/apps/app/components/views/select-filters.tsx
index 6c2c04954..bf7bf9cf9 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 233ee3e74..7dfd0e863 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>
@@ -133,7 +133,7 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
                         handleAddToFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 " color="#858e96" />
+                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                     </button>
                   )}
                   <CustomMenu width="auto" verticalEllipsis>
@@ -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 b49446eeb..c9fecc1cd 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 4c7e1edb6..f2776affd 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-100 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-100 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 18e127404..2f2cae6e4 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 42078fe91..344955431 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-100 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-100 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 b9f3e60f4..afbd6801c 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-100 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 013cbd1bf..54659edd6 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-100 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 cfae13687..3c0157a7f 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-100 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 c83ef1de2..5219a4d3a 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-100 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-100 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 8e108a676..1d1162a3d 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-100 bg-custom-background-100 lg:grid-cols-3">
+    <div className="grid grid-cols-1 divide-y divide-custom-border-100 border-b border-custom-border-100 lg:border-r lg:border-b-0">
       <div className="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-100 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-100 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-100"
         >
           <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 56d9385b1..cd48702fc 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 89a3690f5..2f11b8a98 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 6e5774434..b44df4832 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">
                 {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-100 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-100 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-100 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 d163173fa..b86aa6610 100644
--- a/apps/app/components/workspace/sidebar-menu.tsx
+++ b/apps/app/components/workspace/sidebar-menu.tsx
@@ -46,33 +46,40 @@ export const WorkspaceSidebarMenu = () => {
 
   return (
     <div className="flex w-full flex-col items-start justify-start gap-2 px-3 py-1">
-      {workspaceLinks(workspaceSlug as string).map((link, index) => (
-        <Link key={index} href={link.href}>
-          <a
-            className={`${
-              (
-                link.name === "Settings"
-                  ? 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"
-            } 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"
-                aria-hidden="true"
-                height="20"
-                width="20"
-              />
-            </span>
-            {!sidebarCollapse && link.name}
-          </a>
-        </Link>
-      ))}
+      {workspaceLinks(workspaceSlug as string).map((link, index) => {
+        const isActive =
+          link.name === "Settings"
+            ? router.asPath.includes(link.href)
+            : router.asPath === link.href;
+
+        return (
+          <Link key={index} href={link.href}>
+            <a
+              className={`${
+                isActive
+                  ? "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
+                  color={
+                    isActive
+                      ? "rgb(var(--color-sidebar-text-100))"
+                      : "rgb(var(--color-sidebar-text-200))"
+                  }
+                  aria-hidden="true"
+                  height="20"
+                  width="20"
+                />
+              </span>
+              {!sidebarCollapse && link.name}
+            </a>
+          </Link>
+        );
+      })}
     </div>
   );
 };
diff --git a/apps/app/components/workspace/single-invitation.tsx b/apps/app/components/workspace/single-invitation.tsx
index 73f6d4655..623a43a08 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-100 rounded-3xl`}
           onClick={(e) => {
             handleInvitation(
               invitation,
diff --git a/apps/app/constants/graph.ts b/apps/app/constants/graph.ts
index f279b5a42..d4227804b 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 3d7e8a054..6ec52ee13 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 4dfc9855b..a5fc05e78 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/helpers/theme.helper.ts b/apps/app/helpers/theme.helper.ts
index fdb6c0a79..42e6bd8d9 100644
--- a/apps/app/helpers/theme.helper.ts
+++ b/apps/app/helpers/theme.helper.ts
@@ -94,6 +94,23 @@ export const applyTheme = (palette: string, isDarkPalette: boolean) => {
     document
       .querySelector<HTMLElement>("[data-theme='custom']")
       ?.style.setProperty(`--color-sidebar-text-${shade}`, sidebarTextRgbValues);
+
+    if (i >= 100 && i <= 400) {
+      const borderShade = (shade + 100) as keyof TShades;
+
+      document
+        .querySelector<HTMLElement>("[data-theme='custom']")
+        ?.style.setProperty(
+          `--color-border-${shade}`,
+          `${bgShades[borderShade].r}, ${bgShades[borderShade].g}, ${bgShades[borderShade].b}`
+        );
+      document
+        .querySelector<HTMLElement>("[data-theme='custom']")
+        ?.style.setProperty(
+          `--color-sidebar-border-${shade}`,
+          `${sidebarBackgroundShades[borderShade].r}, ${sidebarBackgroundShades[borderShade].g}, ${sidebarBackgroundShades[borderShade].b}`
+        );
+    }
   }
 
   document
diff --git a/apps/app/layouts/app-layout/app-header.tsx b/apps/app/layouts/app-layout/app-header.tsx
index ea7d5558c..0c07ceb85 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-100 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-100"
           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 ccdc29ad3..3c3976959 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-100 ${
         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 60546a412..61d84394e 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 2b5d9be27..3ce21058d 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 cce155906..5113595fc 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 5c06026ea..634fd609d 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-100 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 a70bc2345..6386093a7 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 e37555bae..cc35ff532 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-100 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-100 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 3c75890f6..d6ccc2c76 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-custom-text-200 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg border border-custom-border-100 bg-custom-background-100 px-4 py-6 md:flex-row md:items-center md:py-3">
             <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-100 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-100 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 c66fcee55..77c58873e 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-100 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-100"
                                 }`}
                                 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 3fe99df92..4b115bf00 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 247ef7e03..85834d546 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 abaaefcd8..64b598f7f 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 917515931..bcb779d78 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 502578927..b86e6eee5 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-100 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 dc301e0d8..387bf5979 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-100 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 cb57ff9fd..6592e3123 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-100 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-100 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 8fdab7f4f..90075fe81 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-100 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-100 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-100">
                         {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 8e15cc6f3..bbfb9c2b9 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 be92a9f86..e3df4a53a 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 c157d7b96..519853858 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" />
@@ -320,7 +320,7 @@ const SinglePage: NextPage = () => {
                     onBlur={handleSubmit(updatePage)}
                     onChange={(e) => setValue("name", e.target.value)}
                     required={true}
-                    className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl font-semibold outline-none ring-0 placeholder:text-[#858E96]"
+                    className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl font-semibold outline-none ring-0"
                     role="textbox"
                     noPadding
                   />
@@ -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-100 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 f76c7f7e4..e7a2be1c6 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-100 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 c6e02d726..7fe2bca6b 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 76e353319..545b4f276 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-100 rounded-xl border border-custom-border-100 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 e10ce5aa6..1f42c5e26 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-100 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 e8ac1d9d0..3ad95d473 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-100 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 6d48c5ee0..4fae052a7 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 a0d53df35..65fcff4bc 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-100 rounded-[10px] border border-custom-border-100 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 0868fef93..b6f61b95c 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-100 rounded-[10px] border border-custom-border-100">
                           {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-100 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 44c25cdf0..c23e4f12b 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-100 rounded-[10px] border border-custom-border-100">
               {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 fa34f02c0..db1b147d7 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 76b66529e..3827a398e 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-100 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 9e0917d16..969d2c6fd 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 da8fd52cb..0955f6c07 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-100 rounded-[10px] border border-custom-border-100 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 8482cbc93..3595c6ce7 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/colors.tsx b/apps/app/pages/colors.tsx
new file mode 100644
index 000000000..d52e2cf41
--- /dev/null
+++ b/apps/app/pages/colors.tsx
@@ -0,0 +1,143 @@
+import React from "react";
+
+// layouts
+import DefaultLayout from "layouts/default-layout";
+import { UserAuthorizationLayout } from "layouts/auth-layout/user-authorization-wrapper";
+// types
+import type { NextPage } from "next";
+
+const Colors: NextPage = () => (
+  <UserAuthorizationLayout>
+    <DefaultLayout>
+      <div className="space-y-8 p-8">
+        <div>
+          Primary:
+          <div className="flex flex-wrap">
+            <div className="h-12 w-12 bg-custom-primary-0" />
+            <div className="h-12 w-12 bg-custom-primary-10" />
+            <div className="h-12 w-12 bg-custom-primary-20" />
+            <div className="h-12 w-12 bg-custom-primary-30" />
+            <div className="h-12 w-12 bg-custom-primary-40" />
+            <div className="h-12 w-12 bg-custom-primary-50" />
+            <div className="h-12 w-12 bg-custom-primary-60" />
+            <div className="h-12 w-12 bg-custom-primary-70" />
+            <div className="h-12 w-12 bg-custom-primary-80" />
+            <div className="h-12 w-12 bg-custom-primary-90" />
+            <div className="h-12 w-12 bg-custom-primary-100" />
+            <div className="h-12 w-12 bg-custom-primary-200" />
+            <div className="h-12 w-12 bg-custom-primary-300" />
+            <div className="h-12 w-12 bg-custom-primary-400" />
+            <div className="h-12 w-12 bg-custom-primary-500" />
+            <div className="h-12 w-12 bg-custom-primary-600" />
+            <div className="h-12 w-12 bg-custom-primary-700" />
+            <div className="h-12 w-12 bg-custom-primary-800" />
+            <div className="h-12 w-12 bg-custom-primary-900" />
+            <div className="h-12 w-12 bg-custom-primary-1000" />
+          </div>
+        </div>
+        <div>
+          Background:
+          <div className="flex flex-wrap">
+            <div className="h-12 w-12 bg-custom-background-0" />
+            <div className="h-12 w-12 bg-custom-background-10" />
+            <div className="h-12 w-12 bg-custom-background-20" />
+            <div className="h-12 w-12 bg-custom-background-30" />
+            <div className="h-12 w-12 bg-custom-background-40" />
+            <div className="h-12 w-12 bg-custom-background-50" />
+            <div className="h-12 w-12 bg-custom-background-60" />
+            <div className="h-12 w-12 bg-custom-background-70" />
+            <div className="h-12 w-12 bg-custom-background-80" />
+            <div className="h-12 w-12 bg-custom-background-90" />
+            <div className="h-12 w-12 bg-custom-background-100" />
+            <div className="h-12 w-12 bg-custom-background-200" />
+            <div className="h-12 w-12 bg-custom-background-300" />
+            <div className="h-12 w-12 bg-custom-background-400" />
+            <div className="h-12 w-12 bg-custom-background-500" />
+            <div className="h-12 w-12 bg-custom-background-600" />
+            <div className="h-12 w-12 bg-custom-background-700" />
+            <div className="h-12 w-12 bg-custom-background-800" />
+            <div className="h-12 w-12 bg-custom-background-900" />
+            <div className="h-12 w-12 bg-custom-background-1000" />
+          </div>
+        </div>
+        <div>
+          Text:
+          <div className="flex flex-wrap">
+            <div className="h-12 w-12 bg-custom-text-0" />
+            <div className="h-12 w-12 bg-custom-text-10" />
+            <div className="h-12 w-12 bg-custom-text-20" />
+            <div className="h-12 w-12 bg-custom-text-30" />
+            <div className="h-12 w-12 bg-custom-text-40" />
+            <div className="h-12 w-12 bg-custom-text-50" />
+            <div className="h-12 w-12 bg-custom-text-60" />
+            <div className="h-12 w-12 bg-custom-text-70" />
+            <div className="h-12 w-12 bg-custom-text-80" />
+            <div className="h-12 w-12 bg-custom-text-90" />
+            <div className="h-12 w-12 bg-custom-text-100" />
+            <div className="h-12 w-12 bg-custom-text-200" />
+            <div className="h-12 w-12 bg-custom-text-300" />
+            <div className="h-12 w-12 bg-custom-text-400" />
+            <div className="h-12 w-12 bg-custom-text-500" />
+            <div className="h-12 w-12 bg-custom-text-600" />
+            <div className="h-12 w-12 bg-custom-text-700" />
+            <div className="h-12 w-12 bg-custom-text-800" />
+            <div className="h-12 w-12 bg-custom-text-900" />
+            <div className="h-12 w-12 bg-custom-text-1000" />
+          </div>
+        </div>
+        <div>
+          Sidebar Background:
+          <div className="flex flex-wrap">
+            <div className="h-12 w-12 bg-custom-sidebar-background-0" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-10" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-20" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-30" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-40" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-50" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-60" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-70" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-80" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-90" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-100" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-200" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-300" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-400" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-500" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-600" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-700" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-800" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-900" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-1000" />
+          </div>
+        </div>
+        <div>
+          Sidebar Text:
+          <div className="flex flex-wrap">
+            <div className="h-12 w-12 bg-custom-sidebar-text-0" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-10" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-20" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-30" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-40" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-50" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-60" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-70" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-80" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-90" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-100" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-200" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-300" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-400" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-500" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-600" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-700" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-800" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-900" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-1000" />
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  </UserAuthorizationLayout>
+);
+
+export default Colors;
diff --git a/apps/app/pages/create-workspace.tsx b/apps/app/pages/create-workspace.tsx
index 82f0d2001..de7888da9 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 abe317415..b6b8aad59 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-100 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 70b1a02c2..2becb1f88 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 ed5545557..6a44bcc8d 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-100 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 81ebf0267..c959764a2 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 cc6b742df..2fd3c4575 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 82ee32114..748050021 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 2c86d96ff..edd17b5b3 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 b895aa90a..9af057f94 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-100 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 a421eeba9..12cfe18eb 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 418ed9d1d..41169e968 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 342031236..d607c5f95 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -1,5 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -36,206 +37,89 @@
     --color-primary-800: 19, 35, 76;
     --color-primary-900: 13, 24, 51;
 
-    --color-background-10: 250, 250, 250;
-    --color-background-20: 245, 245, 245;
-    --color-background-30: 241, 241, 241;
-    --color-background-40: 229, 229, 229;
-    --color-background-50: 212, 212, 212;
-    --color-background-60: 185, 185, 185;
-    --color-background-70: 163, 163, 163;
-    --color-background-80: 157, 157, 157;
-    --color-background-90: 129, 129, 129;
-    --color-background-100: 115, 115, 115;
-    --color-background-200: 104, 104, 104;
-    --color-background-300: 82, 82, 82;
-    --color-background-400: 64, 64, 64;
-    --color-background-500: 58, 58, 58;
-    --color-background-600: 46, 46, 46;
-    --color-background-700: 38, 38, 38;
-    --color-background-800: 34, 34, 34;
-    --color-background-900: 23, 23, 23;
+    /* default theme- light */
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
 
-    --color-text-10: 250, 250, 250;
-    --color-text-20: 245, 245, 245;
-    --color-text-30: 241, 241, 241;
-    --color-text-40: 229, 229, 229;
-    --color-text-50: 212, 212, 212;
-    --color-text-60: 185, 185, 185;
-    --color-text-70: 163, 163, 163;
-    --color-text-80: 157, 157, 157;
-    --color-text-90: 129, 129, 129;
-    --color-text-100: 115, 115, 115;
-    --color-text-200: 104, 104, 104;
-    --color-text-300: 82, 82, 82;
-    --color-text-400: 64, 64, 64;
-    --color-text-500: 58, 58, 58;
-    --color-text-600: 46, 46, 46;
-    --color-text-700: 38, 38, 38;
-    --color-text-800: 34, 34, 34;
-    --color-text-900: 23, 23, 23;
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 82, 82, 82; /* secondary text */
+    --color-text-300: 115, 115, 115; /* tertiary text */
 
-    --color-sidebar-background-10: 250, 250, 250;
-    --color-sidebar-background-20: 245, 245, 245;
-    --color-sidebar-background-30: 241, 241, 241;
-    --color-sidebar-background-40: 229, 229, 229;
-    --color-sidebar-background-50: 212, 212, 212;
-    --color-sidebar-background-60: 185, 185, 185;
-    --color-sidebar-background-70: 163, 163, 163;
-    --color-sidebar-background-80: 157, 157, 157;
-    --color-sidebar-background-90: 129, 129, 129;
-    --color-sidebar-background-100: 115, 115, 115;
-    --color-sidebar-background-200: 104, 104, 104;
-    --color-sidebar-background-300: 82, 82, 82;
-    --color-sidebar-background-400: 64, 64, 64;
-    --color-sidebar-background-500: 58, 58, 58;
-    --color-sidebar-background-600: 46, 46, 46;
-    --color-sidebar-background-700: 38, 38, 38;
-    --color-sidebar-background-800: 34, 34, 34;
-    --color-sidebar-background-900: 23, 23, 23;
+    --color-sidebar-background-100: 255, 255, 255; /* primary sidebar bg */
+    --color-sidebar-background-90: 250, 250, 250; /* secondary sidebar bg */
+    --color-sidebar-background-80: 245, 245, 245; /* tertiary sidebar bg */
 
-    --color-sidebar-text-10: 250, 250, 250;
-    --color-sidebar-text-20: 245, 245, 245;
-    --color-sidebar-text-30: 241, 241, 241;
-    --color-sidebar-text-40: 229, 229, 229;
-    --color-sidebar-text-50: 212, 212, 212;
-    --color-sidebar-text-60: 185, 185, 185;
-    --color-sidebar-text-70: 163, 163, 163;
-    --color-sidebar-text-80: 157, 157, 157;
-    --color-sidebar-text-90: 129, 129, 129;
-    --color-sidebar-text-100: 115, 115, 115;
-    --color-sidebar-text-200: 104, 104, 104;
-    --color-sidebar-text-300: 82, 82, 82;
-    --color-sidebar-text-400: 64, 64, 64;
-    --color-sidebar-text-500: 58, 58, 58;
-    --color-sidebar-text-600: 46, 46, 46;
-    --color-sidebar-text-700: 38, 38, 38;
-    --color-sidebar-text-800: 34, 34, 34;
-    --color-sidebar-text-900: 23, 23, 23;
+    --color-sidebar-text-100: 23, 23, 23; /* primary sidebar text */
+    --color-sidebar-text-200: 82, 82, 82; /* secondary sidebar text */
+    --color-sidebar-text-300: 115, 115, 115; /* tertiary sidebar text */
   }
 
   [data-theme="light"] {
-    --color-background-10: 250, 250, 250;
-    --color-background-20: 245, 245, 245;
-    --color-background-30: 241, 241, 241;
-    --color-background-40: 229, 229, 229;
-    --color-background-50: 212, 212, 212;
-    --color-background-60: 185, 185, 185;
-    --color-background-70: 163, 163, 163;
-    --color-background-80: 157, 157, 157;
-    --color-background-90: 129, 129, 129;
-    --color-background-100: 255, 255, 255;
-    --color-background-200: 104, 104, 104;
-    --color-background-300: 82, 82, 82;
-    --color-background-400: 64, 64, 64;
-    --color-background-500: 58, 58, 58;
-    --color-background-600: 46, 46, 46;
-    --color-background-700: 38, 38, 38;
-    --color-background-800: 34, 34, 34;
-    --color-background-900: 23, 23, 23;
+    color-scheme: light !important;
+
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
+
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 82, 82, 82; /* secondary text */
+    --color-text-300: 115, 115, 115; /* tertiary text */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+
+    --color-sidebar-background-100: 255, 255, 255; /* primary sidebar bg */
+    --color-sidebar-background-90: 250, 250, 250; /* secondary sidebar bg */
+    --color-sidebar-background-80: 245, 245, 245; /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: 23, 23, 23; /* primary sidebar text */
+    --color-sidebar-text-200: 82, 82, 82; /* secondary sidebar text */
+    --color-sidebar-text-300: 115, 115, 115; /* tertiary sidebar text */
+
+    --color-sidebar-border-100: 245, 245, 245; /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: 229, 229, 229; /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: 212, 212, 212; /* strong sidebar border- 1 */
+    --color-sidebar-border-400: 185, 185, 185; /* strong sidebar border- 2 */
   }
 
   [data-theme="dark"] {
-    --color-background-10: 250, 250, 250;
-    --color-background-20: 245, 245, 245;
-    --color-background-30: 241, 241, 241;
-    --color-background-40: 229, 229, 229;
-    --color-background-50: 212, 212, 212;
-    --color-background-60: 185, 185, 185;
-    --color-background-70: 163, 163, 163;
-    --color-background-80: 157, 157, 157;
-    --color-background-90: 129, 129, 129;
-    --color-background-100: 115, 115, 115;
-    --color-background-200: 104, 104, 104;
-    --color-background-300: 82, 82, 82;
-    --color-background-400: 64, 64, 64;
-    --color-background-500: 58, 58, 58;
-    --color-background-600: 46, 46, 46;
-    --color-background-700: 38, 38, 38;
-    --color-background-800: 34, 34, 34;
-    --color-background-900: 23, 23, 23;
+    color-scheme: dark !important;
 
-    --color-text-10: 250, 250, 250;
-    --color-text-20: 245, 245, 245;
-    --color-text-30: 241, 241, 241;
-    --color-text-40: 229, 229, 229;
-    --color-text-50: 212, 212, 212;
-    --color-text-60: 185, 185, 185;
-    --color-text-70: 163, 163, 163;
-    --color-text-80: 157, 157, 157;
-    --color-text-90: 129, 129, 129;
-    --color-text-100: 115, 115, 115;
-    --color-text-200: 104, 104, 104;
-    --color-text-300: 82, 82, 82;
-    --color-text-400: 64, 64, 64;
-    --color-text-500: 58, 58, 58;
-    --color-text-600: 46, 46, 46;
-    --color-text-700: 38, 38, 38;
-    --color-text-800: 34, 34, 34;
-    --color-text-900: 23, 23, 23;
+    --color-background-100: 0, 0, 0; /* primary bg */
+    --color-background-90: 11, 11, 11; /* secondary bg */
+    --color-background-80: 23, 23, 23; /* tertiary bg */
 
-    --color-sidebar-background-10: 250, 250, 250;
-    --color-sidebar-background-20: 245, 245, 245;
-    --color-sidebar-background-30: 241, 241, 241;
-    --color-sidebar-background-40: 229, 229, 229;
-    --color-sidebar-background-50: 212, 212, 212;
-    --color-sidebar-background-60: 185, 185, 185;
-    --color-sidebar-background-70: 163, 163, 163;
-    --color-sidebar-background-80: 157, 157, 157;
-    --color-sidebar-background-90: 129, 129, 129;
-    --color-sidebar-background-100: 115, 115, 115;
-    --color-sidebar-background-200: 104, 104, 104;
-    --color-sidebar-background-300: 82, 82, 82;
-    --color-sidebar-background-400: 64, 64, 64;
-    --color-sidebar-background-500: 58, 58, 58;
-    --color-sidebar-background-600: 46, 46, 46;
-    --color-sidebar-background-700: 38, 38, 38;
-    --color-sidebar-background-800: 34, 34, 34;
-    --color-sidebar-background-900: 23, 23, 23;
+    --color-text-100: 255, 255, 255; /* primary text */
+    --color-text-200: 82, 82, 82; /* secondary text */
+    --color-text-300: 115, 115, 115; /* tertiary text */
 
-    --color-sidebar-text-10: 250, 250, 250;
-    --color-sidebar-text-20: 245, 245, 245;
-    --color-sidebar-text-30: 241, 241, 241;
-    --color-sidebar-text-40: 229, 229, 229;
-    --color-sidebar-text-50: 212, 212, 212;
-    --color-sidebar-text-60: 185, 185, 185;
-    --color-sidebar-text-70: 163, 163, 163;
-    --color-sidebar-text-80: 157, 157, 157;
-    --color-sidebar-text-90: 129, 129, 129;
-    --color-sidebar-text-100: 115, 115, 115;
-    --color-sidebar-text-200: 104, 104, 104;
-    --color-sidebar-text-300: 82, 82, 82;
-    --color-sidebar-text-400: 64, 64, 64;
-    --color-sidebar-text-500: 58, 58, 58;
-    --color-sidebar-text-600: 46, 46, 46;
-    --color-sidebar-text-700: 38, 38, 38;
-    --color-sidebar-text-800: 34, 34, 34;
-    --color-sidebar-text-900: 23, 23, 23;
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+
+    --color-sidebar-background-100: 0, 0, 0; /* primary sidebar bg */
+    --color-sidebar-background-90: 11, 11, 11; /* secondary sidebar bg */
+    --color-sidebar-background-80: 23, 23, 23; /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: 255, 255, 255; /* primary sidebar text */
+    --color-sidebar-text-200: 82, 82, 82; /* secondary sidebar text */
+    --color-sidebar-text-300: 115, 115, 115; /* tertiary sidebar text */
+
+    --color-sidebar-border-100: 34, 34, 34; /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: 38, 38, 38; /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: 46, 46, 46; /* strong sidebar border- 1 */
+    --color-sidebar-border-400: 58, 58, 58; /* strong sidebar border- 2 */
   }
 
   [data-theme="light-contrast"] {
-    --color-bg-base: 250, 250, 250;
-    --color-bg-surface-1: 250, 250, 250;
-    --color-bg-surface-2: 206, 212, 218;
-
-    --color-border: 0, 0, 0;
-    --color-bg-sidebar: 255, 255, 255;
-    --color-accent: 63, 118, 255;
-
-    --color-text-base: 0, 0, 0;
-    --color-text-secondary: 0, 0, 0;
+    color-scheme: light !important;
   }
 
   [data-theme="dark-contrast"] {
-    --color-bg-base: 25, 27, 27;
-    --color-bg-surface-1: 31, 32, 35;
-    --color-bg-surface-2: 39, 42, 45;
-
-    --color-border: 255, 255, 255;
-    --color-bg-sidebar: 19, 20, 22;
-    --color-accent: 60, 133, 217;
-
-    --color-text-base: 255, 255, 255;
-    --color-text-secondary: 142, 148, 146;
     color-scheme: dark !important;
   }
 }
@@ -274,12 +158,12 @@ body {
 
 .horizontal-scroll-enable::-webkit-scrollbar-track {
   height: 7px;
-  background-color: rgba(var(--color-bg-base));
+  background-color: rgba(var(--color-background-100));
 }
 
 .horizontal-scroll-enable::-webkit-scrollbar-thumb {
   border-radius: 5px;
-  background-color: rgba(var(--color-bg-surface-2));
+  background-color: rgba(var(--color-background-80));
 }
 
 .vertical-scroll-enable::-webkit-scrollbar {
@@ -293,7 +177,7 @@ body {
 
 .vertical-scroll-enable::-webkit-scrollbar-thumb {
   border-radius: 5px;
-  background-color: rgba(var(--color-bg-surface-1));
+  background-color: rgba(var(--color-background-90));
 }
 /* end scrollbar style */
 
@@ -351,7 +235,7 @@ body {
 
 .progress-bar {
   fill: currentColor;
-  color: rgba(var(--color-bg-sidebar));
+  color: rgba(var(--color-sidebar-background-100));
 }
 
 /* end react datepicker styling */
@@ -368,3 +252,9 @@ body {
 .bp4-popover2-transition-container {
   z-index: 1 !important;
 }
+
+::-webkit-input-placeholder,
+::placeholder,
+:-ms-input-placeholder {
+  color: rgb(var(--color-text-300));
+}
diff --git a/apps/app/styles/react-datepicker.css b/apps/app/styles/react-datepicker.css
index 2c45fda44..1ba4ba649 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 202a4fad9..d9897cee9 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,15 @@ module.exports = {
             1000: "rgb(0, 0, 0)",
             DEFAULT: convertToRGB("--color-text-100"),
           },
+          border: {
+            0: "rgb(255, 255, 255)",
+            100: convertToRGB("--color-border-100"),
+            200: convertToRGB("--color-border-200"),
+            300: convertToRGB("--color-border-300"),
+            400: convertToRGB("--color-border-400"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-border-100"),
+          },
           sidebar: {
             background: {
               0: "rgb(255, 255, 255)",
@@ -149,7 +132,17 @@ module.exports = {
               1000: "rgb(0, 0, 0)",
               DEFAULT: convertToRGB("--color-sidebar-text-100"),
             },
+            border: {
+              0: "rgb(255, 255, 255)",
+              100: convertToRGB("--color-sidebar-border-100"),
+              200: convertToRGB("--color-sidebar-border-200"),
+              300: convertToRGB("--color-sidebar-border-300"),
+              400: convertToRGB("--color-sidebar-border-400"),
+              1000: "rgb(0, 0, 0)",
+              DEFAULT: convertToRGB("--color-sidebar-border-100"),
+            },
           },
+          backdrop: "#131313",
         },
       },
       keyframes: {
@@ -165,22 +158,22 @@ module.exports = {
       typography: ({ theme }) => ({
         brand: {
           css: {
-            "--tw-prose-body": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-p": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-headings": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-lead": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-links": `${convertToRGB("--color-primary-100")}`,
-            "--tw-prose-bold": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-counters": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-bullets": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-hr": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-quotes": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-quote-borders": `${convertToRGB("--color-border")}`,
-            "--tw-prose-code": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-pre-code": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-pre-bg": `${convertToRGB("--color-bg-base")}`,
-            "--tw-prose-th-borders": `${convertToRGB("--color-border")}`,
-            "--tw-prose-td-borders": `${convertToRGB("--color-border")}`,
+            "--tw-prose-body": convertToRGB("--color-text-100"),
+            "--tw-prose-p": convertToRGB("--color-text-100"),
+            "--tw-prose-headings": convertToRGB("--color-text-100"),
+            "--tw-prose-lead": convertToRGB("--color-text-100"),
+            "--tw-prose-links": convertToRGB("--color-primary-100"),
+            "--tw-prose-bold": convertToRGB("--color-text-100"),
+            "--tw-prose-counters": convertToRGB("--color-text-100"),
+            "--tw-prose-bullets": convertToRGB("--color-text-100"),
+            "--tw-prose-hr": convertToRGB("--color-text-100"),
+            "--tw-prose-quotes": convertToRGB("--color-text-100"),
+            "--tw-prose-quote-borders": convertToRGB("--color-border"),
+            "--tw-prose-code": convertToRGB("--color-text-100"),
+            "--tw-prose-pre-code": convertToRGB("--color-text-100"),
+            "--tw-prose-pre-bg": convertToRGB("--color-background-100"),
+            "--tw-prose-th-borders": convertToRGB("--color-border"),
+            "--tw-prose-td-borders": convertToRGB("--color-border"),
           },
         },
       }),