diff --git a/packages/editor/core/src/ui/extensions/code-inline/index.tsx b/packages/editor/core/src/ui/extensions/code-inline/index.tsx
index 1c5d34109..dd9e4395b 100644
--- a/packages/editor/core/src/ui/extensions/code-inline/index.tsx
+++ b/packages/editor/core/src/ui/extensions/code-inline/index.tsx
@@ -32,7 +32,7 @@ export const CustomCodeInlineExtension = Mark.create<CodeOptions>({
   addOptions() {
     return {
       HTMLAttributes: {
-        class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-[2px] font-mono font-medium text-custom-text-1000",
+        class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-[2px] font-mono font-medium text-neutral-text-strong0",
         spellcheck: "false",
       },
     };
diff --git a/packages/editor/core/src/ui/mentions/mention-list.tsx b/packages/editor/core/src/ui/mentions/mention-list.tsx
index f87a2812f..b12adb74d 100644
--- a/packages/editor/core/src/ui/mentions/mention-list.tsx
+++ b/packages/editor/core/src/ui/mentions/mention-list.tsx
@@ -63,7 +63,7 @@ export const MentionList = forwardRef((props: MentionListProps, ref) => {
   }));
 
   return props.items && props.items.length !== 0 ? (
-    <div className="mentions absolute max-h-40 w-48 space-y-0.5 overflow-y-auto rounded-md bg-neutral-component-surface-light p-1 text-sm text-custom-text-300 shadow-custom-shadow-sm">
+    <div className="mentions absolute max-h-40 w-48 space-y-0.5 overflow-y-auto rounded-md bg-neutral-component-surface-light p-1 text-sm text-neutral-text-medium shadow-custom-shadow-sm">
       {props.items.length ? (
         props.items.map((item, index) => (
           <div
diff --git a/packages/editor/core/src/ui/read-only/extensions.tsx b/packages/editor/core/src/ui/read-only/extensions.tsx
index 05716243e..93fa7a3e6 100644
--- a/packages/editor/core/src/ui/read-only/extensions.tsx
+++ b/packages/editor/core/src/ui/read-only/extensions.tsx
@@ -45,7 +45,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
     },
     code: {
       HTMLAttributes: {
-        class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
+        class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-neutral-text-strong0",
         spellcheck: "false",
       },
     },
diff --git a/packages/editor/document-editor/src/ui/components/content-browser.tsx b/packages/editor/document-editor/src/ui/components/content-browser.tsx
index 18a50a5a8..911785723 100644
--- a/packages/editor/document-editor/src/ui/components/content-browser.tsx
+++ b/packages/editor/document-editor/src/ui/components/content-browser.tsx
@@ -26,7 +26,7 @@ export const ContentBrowser = (props: ContentBrowserProps) => {
             )
           )
         ) : (
-          <p className="mt-3 text-xs text-custom-text-400">Headings will be displayed here for navigation</p>
+          <p className="mt-3 text-xs text-neutral-text-subtle">Headings will be displayed here for navigation</p>
         )}
       </div>
     </div>
diff --git a/packages/editor/document-editor/src/ui/components/editor-header.tsx b/packages/editor/document-editor/src/ui/components/editor-header.tsx
index 5c4b2d583..7b1227f2b 100644
--- a/packages/editor/document-editor/src/ui/components/editor-header.tsx
+++ b/packages/editor/document-editor/src/ui/components/editor-header.tsx
@@ -63,7 +63,7 @@ export const EditorHeader = (props: IEditorHeader) => {
           <AlertLabel
             Icon={Lock}
             backgroundColor="bg-neutral-component-surface-dark"
-            textColor="text-custom-text-300"
+            textColor="text-neutral-text-medium"
             label="Locked"
           />
         )}
@@ -85,7 +85,7 @@ export const EditorHeader = (props: IEditorHeader) => {
             {isSubmitting !== "submitted" && isSubmitting !== "saved" && (
               <RefreshCw className="h-4 w-4 stroke-custom-text-300" />
             )}
-            <span className="text-sm text-custom-text-300">
+            <span className="text-sm text-neutral-text-medium">
               {isSubmitting === "submitting" ? "Saving..." : "Saved"}
             </span>
           </div>
diff --git a/packages/editor/document-editor/src/ui/components/info-popover.tsx b/packages/editor/document-editor/src/ui/components/info-popover.tsx
index 2c0fed318..20ab950ef 100644
--- a/packages/editor/document-editor/src/ui/components/info-popover.tsx
+++ b/packages/editor/document-editor/src/ui/components/info-popover.tsx
@@ -49,14 +49,14 @@ export const InfoPopover: React.FC<Props> = (props) => {
           {...infoPopoverAttributes.popper}
         >
           <div className="space-y-1.5">
-            <h6 className="text-xs text-custom-text-400">Last updated on</h6>
+            <h6 className="text-xs text-neutral-text-subtle">Last updated on</h6>
             <h5 className="flex items-center gap-1 text-sm">
               <History className="h-3 w-3" />
               {renderDate(new Date(documentDetails.last_updated_at))}
             </h5>
           </div>
           <div className="space-y-1.5">
-            <h6 className="text-xs text-custom-text-400">Created on</h6>
+            <h6 className="text-xs text-neutral-text-subtle">Created on</h6>
             <h5 className="flex items-center gap-1 text-sm">
               <Calendar className="h-3 w-3" />
               {renderDate(new Date(documentDetails.created_on))}
diff --git a/packages/editor/document-editor/src/ui/components/links/link-edit-view.tsx b/packages/editor/document-editor/src/ui/components/links/link-edit-view.tsx
index 725b98e4f..356a37898 100644
--- a/packages/editor/document-editor/src/ui/components/links/link-edit-view.tsx
+++ b/packages/editor/document-editor/src/ui/components/links/link-edit-view.tsx
@@ -16,7 +16,7 @@ const InputView = ({
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }) => (
   <div className="flex flex-col gap-1">
-    <label className="inline-block font-semibold text-xs text-custom-text-400">{label}</label>
+    <label className="inline-block font-semibold text-xs text-neutral-text-subtle">{label}</label>
     <input
       placeholder={placeholder}
       onClick={(e) => {
diff --git a/packages/editor/document-editor/src/ui/components/links/link-preview.tsx b/packages/editor/document-editor/src/ui/components/links/link-preview.tsx
index b07a8d663..d49d10d04 100644
--- a/packages/editor/document-editor/src/ui/components/links/link-preview.tsx
+++ b/packages/editor/document-editor/src/ui/components/links/link-preview.tsx
@@ -32,7 +32,7 @@ export const LinkPreview = ({
 
   return (
     <div className="absolute left-0 top-0 max-w-max">
-      <div className="shadow-md items-center rounded p-2 flex gap-3 bg-neutral-component-surface-medium border-neutral-border-subtle border-2 text-custom-text-300 text-xs">
+      <div className="shadow-md items-center rounded p-2 flex gap-3 bg-neutral-component-surface-medium border-neutral-border-subtle border-2 text-neutral-text-medium text-xs">
         <GlobeIcon size={14} className="inline-block" />
         <p>{url.length > 40 ? url.slice(0, 40) + "..." : url}</p>
         <div className="flex gap-2">
diff --git a/packages/editor/document-editor/src/ui/components/summary-popover.tsx b/packages/editor/document-editor/src/ui/components/summary-popover.tsx
index 1ade8d2e9..92806ce66 100644
--- a/packages/editor/document-editor/src/ui/components/summary-popover.tsx
+++ b/packages/editor/document-editor/src/ui/components/summary-popover.tsx
@@ -34,7 +34,7 @@ export const SummaryPopover: React.FC<Props> = (props) => {
         type="button"
         ref={setReferenceElement}
         className={`grid h-7 w-7 place-items-center rounded ${
-          sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300"
+          sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-neutral-text-medium"
         }`}
         onClick={() => setSidePeekVisible(!sidePeekVisible)}
       >
diff --git a/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx b/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx
index 6c6b55164..8f9ef7103 100644
--- a/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx
+++ b/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx
@@ -27,7 +27,7 @@ export interface IVerticalDropdownMenuProps {
 const VerticalDropdownItem = ({ Icon, label, action }: IVerticalDropdownItemProps) => (
   <CustomMenu.MenuItem onClick={action} className="flex items-center gap-2">
     <Icon className="h-3 w-3" />
-    <div className="text-custom-text-300">{label}</div>
+    <div className="text-neutral-text-medium">{label}</div>
   </CustomMenu.MenuItem>
 );
 
diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx
index da98536ef..8e8ae7d56 100644
--- a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx
@@ -155,7 +155,7 @@ const IssueSuggestionList = ({
             <div className={"flex h-full w-full flex-col"} key={`${section}-container`} id={`${section}-container`}>
               <h6
                 className={
-                  "sticky top-0 z-[10] bg-neutral-component-surface-light px-2 py-1 text-xs font-medium text-custom-text-400"
+                  "sticky top-0 z-[10] bg-neutral-component-surface-light px-2 py-1 text-xs font-medium text-neutral-text-subtle"
                 }
               >
                 {section}
@@ -164,16 +164,16 @@ const IssueSuggestionList = ({
                 {sectionItems.map((item: IssueSuggestionProps, index: number) => (
                   <button
                     className={cn(
-                      `flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100`,
+                      `flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-neutral-text-medium hover:bg-custom-primary-100/5 hover:text-neutral-text-strong`,
                       {
-                        "bg-custom-primary-100/5  text-custom-text-100":
+                        "bg-custom-primary-100/5  text-neutral-text-strong":
                           section === currentSection && index === selectedIndex,
                       }
                     )}
                     key={item.identifier}
                     onClick={() => selectItem(section, index)}
                   >
-                    <h5 className="whitespace-nowrap text-xs text-custom-text-300">{item.identifier}</h5>
+                    <h5 className="whitespace-nowrap text-xs text-neutral-text-medium">{item.identifier}</h5>
                     <PriorityIcon priority={item.priority} />
                     <div>
                       <p className="flex-grow truncate text-xs">{item.title}</p>
diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx
index 2b7f7b978..760edf822 100644
--- a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx
@@ -10,7 +10,7 @@ export const IssueWidgetCard = (props) => (
         props.selected ? "border-custom-primary-200 border-[2px]" : ""
       } w-full h-[100px] cursor-pointer space-y-2 rounded-md border-[0.5px] border-neutral-border-medium shadow-custom-shadow-2xs`}
     >
-      <h5 className="h-[20%] text-xs text-custom-text-300 p-2">
+      <h5 className="h-[20%] text-xs text-neutral-text-medium p-2">
         {props.node.attrs.project_identifier}-{props.node.attrs.sequence_id}
       </h5>
       <div className="relative h-[71%]">
diff --git a/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx b/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
index f637fcce3..1f28087da 100644
--- a/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
+++ b/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
@@ -85,9 +85,9 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
             type="button"
             onClick={item.command}
             className={cn(
-              "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-neutral-component-surface-dark",
+              "grid h-7 w-7 place-items-center rounded text-neutral-text-medium hover:bg-neutral-component-surface-dark",
               {
-                "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
+                "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
               }
             )}
           >
@@ -102,15 +102,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
             type="button"
             onClick={item.command}
             className={cn(
-              "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-neutral-component-surface-dark",
+              "grid h-7 w-7 place-items-center rounded text-neutral-text-medium hover:bg-neutral-component-surface-dark",
               {
-                "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
+                "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
               }
             )}
           >
             <item.icon
               className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
+                "text-neutral-text-strong": item.isActive(),
               })}
             />
           </button>
@@ -123,15 +123,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
             type="button"
             onClick={item.command}
             className={cn(
-              "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-neutral-component-surface-dark",
+              "grid h-7 w-7 place-items-center rounded text-neutral-text-medium hover:bg-neutral-component-surface-dark",
               {
-                "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
+                "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
               }
             )}
           >
             <item.icon
               className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
+                "text-neutral-text-strong": item.isActive(),
               })}
             />
           </button>
@@ -144,15 +144,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
             type="button"
             onClick={item.command}
             className={cn(
-              "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-neutral-component-surface-dark",
+              "grid h-7 w-7 place-items-center rounded text-neutral-text-medium hover:bg-neutral-component-surface-dark",
               {
-                "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
+                "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
               }
             )}
           >
             <item.icon
               className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
+                "text-neutral-text-strong": item.isActive(),
               })}
             />
           </button>
diff --git a/packages/editor/document-editor/src/ui/tooltip.tsx b/packages/editor/document-editor/src/ui/tooltip.tsx
index b4cd1511f..f6afe5565 100644
--- a/packages/editor/document-editor/src/ui/tooltip.tsx
+++ b/packages/editor/document-editor/src/ui/tooltip.tsx
@@ -51,11 +51,13 @@ export const Tooltip: React.FC<Props> = ({
       content={
         <div
           className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${
-            theme === "custom" ? "bg-neutral-component-surface-light text-custom-text-200" : "bg-black text-gray-400"
+            theme === "custom"
+              ? "bg-neutral-component-surface-light text-neutral-text-medium"
+              : "bg-black text-gray-400"
           } overflow-hidden break-words ${className}`}
         >
           {tooltipHeading && (
-            <h5 className={`font-medium ${theme === "custom" ? "text-custom-text-100" : "text-white"}`}>
+            <h5 className={`font-medium ${theme === "custom" ? "text-neutral-text-strong" : "text-white"}`}>
               {tooltipHeading}
             </h5>
           )}
diff --git a/packages/editor/extensions/src/extensions/slash-commands.tsx b/packages/editor/extensions/src/extensions/slash-commands.tsx
index d109b19ae..327928892 100644
--- a/packages/editor/extensions/src/extensions/slash-commands.tsx
+++ b/packages/editor/extensions/src/extensions/slash-commands.tsx
@@ -297,7 +297,7 @@ const CommandList = ({ items, command }: { items: CommandItemProps[]; command: a
         <button
           key={item.key}
           className={cn(
-            `flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm text-custom-text-100 hover:bg-custom-primary-100/5`,
+            `flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm text-neutral-text-strong hover:bg-custom-primary-100/5`,
             {
               "bg-custom-primary-100/5": index === selectedIndex,
             }
diff --git a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
index 684dd7806..6b43313c2 100644
--- a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
@@ -108,8 +108,8 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
                 <access.icon
                   className={`h-3.5 w-3.5 ${
                     props.commentAccessSpecifier?.accessValue === access.key
-                      ? "text-custom-text-100"
-                      : "text-custom-text-400"
+                      ? "text-neutral-text-strong"
+                      : "text-neutral-text-subtle"
                   }`}
                   strokeWidth={2}
                 />
@@ -127,15 +127,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
                   type="button"
                   onClick={item.command}
                   className={cn(
-                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-neutral-component-surface-dark",
+                    "grid aspect-square place-items-center rounded-sm p-1 text-neutral-text-subtle hover:bg-neutral-component-surface-dark",
                     {
-                      "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
+                      "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
                     }
                   )}
                 >
                   <item.icon
                     className={cn("h-3.5 w-3.5", {
-                      "text-custom-text-100": item.isActive(),
+                      "text-neutral-text-strong": item.isActive(),
                     })}
                     strokeWidth={2.5}
                   />
@@ -150,15 +150,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
                   type="button"
                   onClick={item.command}
                   className={cn(
-                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-neutral-component-surface-dark",
+                    "grid aspect-square place-items-center rounded-sm p-1 text-neutral-text-subtle hover:bg-neutral-component-surface-dark",
                     {
-                      "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
+                      "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
                     }
                   )}
                 >
                   <item.icon
                     className={cn("h-3.5 w-3.5", {
-                      "text-custom-text-100": item.isActive(),
+                      "text-neutral-text-strong": item.isActive(),
                     })}
                     strokeWidth={2.5}
                   />
@@ -173,15 +173,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
                   type="button"
                   onClick={item.command}
                   className={cn(
-                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-neutral-component-surface-dark",
+                    "grid aspect-square place-items-center rounded-sm p-1 text-neutral-text-subtle hover:bg-neutral-component-surface-dark",
                     {
-                      "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
+                      "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
                     }
                   )}
                 >
                   <item.icon
                     className={cn("h-3.5 w-3.5", {
-                      "text-custom-text-100": item.isActive(),
+                      "text-neutral-text-strong": item.isActive(),
                     })}
                     strokeWidth={2.5}
                   />
@@ -196,15 +196,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
                   type="button"
                   onClick={item.command}
                   className={cn(
-                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-neutral-component-surface-dark",
+                    "grid aspect-square place-items-center rounded-sm p-1 text-neutral-text-subtle hover:bg-neutral-component-surface-dark",
                     {
-                      "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
+                      "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
                     }
                   )}
                 >
                   <item.icon
                     className={cn("h-3.5 w-3.5", {
-                      "text-custom-text-100": item.isActive(),
+                      "text-neutral-text-strong": item.isActive(),
                     })}
                     strokeWidth={2.5}
                   />
diff --git a/packages/editor/rich-text-editor/Readme.md b/packages/editor/rich-text-editor/Readme.md
index 2e5662e30..a2fd9b555 100644
--- a/packages/editor/rich-text-editor/Readme.md
+++ b/packages/editor/rich-text-editor/Readme.md
@@ -41,7 +41,7 @@ The `@plane/rich-text-editor` package extends from the `editor-core` package, in
   debouncedUpdatesEnabled={true}
   setShouldShowAlert={setShowAlert}
   setIsSubmitting={setIsSubmitting}
-  customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
+  customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-neutral-text-medium"}
   noBorder={!isAllowed}
   onChange={(description: Object, description_html: string) => {
     setShowAlert(true);
diff --git a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx
index b7480520b..7e88b5ef1 100644
--- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx
@@ -123,15 +123,15 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
                 type="button"
                 onClick={item.command}
                 className={cn(
-                  "p-2 text-custom-text-300 transition-colors hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5",
+                  "p-2 text-neutral-text-medium transition-colors hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5",
                   {
-                    "bg-custom-primary-100/5 text-custom-text-100": item.isActive(),
+                    "bg-custom-primary-100/5 text-neutral-text-strong": item.isActive(),
                   }
                 )}
               >
                 <item.icon
                   className={cn("h-4 w-4", {
-                    "text-custom-text-100": item.isActive(),
+                    "text-neutral-text-strong": item.isActive(),
                   })}
                 />
               </button>
diff --git a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
index 1a7204b91..fb6a32a26 100644
--- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
@@ -30,7 +30,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
       <button
         type="button"
         className={cn(
-          "flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-neutral-component-surface-light active:bg-neutral-component-surface-light",
+          "flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-neutral-text-medium hover:bg-neutral-component-surface-light active:bg-neutral-component-surface-light",
           { "bg-neutral-component-surface-light": isOpen }
         )}
         onClick={() => {
@@ -40,7 +40,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
         <p className="text-base">↗</p>
         <p
           className={cn("underline underline-offset-4", {
-            "text-custom-text-100": editor.isActive("link"),
+            "text-neutral-text-strong": editor.isActive("link"),
           })}
         >
           Link
@@ -60,7 +60,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
             ref={inputRef}
             type="url"
             placeholder="Paste a link"
-            className="flex-1 border-r border-neutral-border-medium bg-neutral-component-surface-light p-1 text-sm outline-none placeholder:text-custom-text-400"
+            className="flex-1 border-r border-neutral-border-medium bg-neutral-component-surface-light p-1 text-sm outline-none placeholder:text-neutral-text-subtle"
             defaultValue={editor.getAttributes("link").href || ""}
           />
           {editor.getAttributes("link").href ? (
@@ -76,7 +76,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
             </button>
           ) : (
             <button
-              className="flex items-center rounded-sm p-1 text-custom-text-300 transition-all hover:bg-neutral-component-surface-medium"
+              className="flex items-center rounded-sm p-1 text-neutral-text-medium transition-all hover:bg-neutral-component-surface-medium"
               type="button"
               onClick={() => {
                 onLinkSubmit();
diff --git a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
index e49cddf23..0939aa894 100644
--- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
@@ -48,7 +48,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
-        className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5"
+        className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-neutral-text-medium hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5"
       >
         <span>{activeItem?.name}</span>
         <ChevronDown className="h-4 w-4" />
@@ -65,9 +65,9 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
                 setIsOpen(false);
               }}
               className={cn(
-                "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100",
+                "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-neutral-text-medium hover:bg-custom-primary-100/5 hover:text-neutral-text-strong",
                 {
-                  "bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name,
+                  "bg-custom-primary-100/5 text-neutral-text-strong": activeItem.name === item.name,
                 }
               )}
             >
diff --git a/packages/ui/src/badge/helper.tsx b/packages/ui/src/badge/helper.tsx
index 221251b4e..18b4cae06 100644
--- a/packages/ui/src/badge/helper.tsx
+++ b/packages/ui/src/badge/helper.tsx
@@ -59,17 +59,17 @@ export const badgeStyling: IBadgeStyling = {
   neutral: {
     default: `text-custom-background-100 bg-custom-text-100 border border-neutral-border-medium`,
     hover: `hover:bg-custom-text-200`,
-    disabled: `cursor-not-allowed bg-custom-border-200 !text-custom-text-400`,
+    disabled: `cursor-not-allowed bg-custom-border-200 !text-neutral-text-subtle`,
   },
   "accent-neutral": {
-    default: `text-custom-text-200 bg-neutral-component-surface-dark`,
-    hover: `hover:bg-custom-border-200 hover:text-custom-text-100`,
-    disabled: `cursor-not-allowed !text-custom-text-400`,
+    default: `text-neutral-text-medium bg-neutral-component-surface-dark`,
+    hover: `hover:bg-custom-border-200 hover:text-neutral-text-strong`,
+    disabled: `cursor-not-allowed !text-neutral-text-subtle`,
   },
   "outline-neutral": {
-    default: `text-custom-text-200 bg-neutral-component-surface-light border border-neutral-border-medium`,
-    hover: `hover:text-custom-text-100 hover:bg-custom-border-200`,
-    disabled: `cursor-not-allowed !text-custom-text-400`,
+    default: `text-neutral-text-medium bg-neutral-component-surface-light border border-neutral-border-medium`,
+    hover: `hover:text-neutral-text-strong hover:bg-custom-border-200`,
+    disabled: `cursor-not-allowed !text-neutral-text-subtle`,
   },
 
   success: {
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
index 0f09764ac..f5a4f9f0e 100644
--- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@@ -13,7 +13,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
       <div key={index} className="flex flex-wrap items-center gap-2.5">
         {child}
         {index !== React.Children.count(children) - 1 && (
-          <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
+          <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-neutral-text-subtle" aria-hidden="true" />
         )}
       </div>
     ))}
diff --git a/packages/ui/src/button/helper.tsx b/packages/ui/src/button/helper.tsx
index c0227ae1c..0d888829c 100644
--- a/packages/ui/src/button/helper.tsx
+++ b/packages/ui/src/button/helper.tsx
@@ -55,10 +55,10 @@ export const buttonStyling: IButtonStyling = {
     disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
   },
   "neutral-primary": {
-    default: `text-custom-text-200 bg-neutral-component-surface-light border border-neutral-border-medium`,
+    default: `text-neutral-text-medium bg-neutral-component-surface-light border border-neutral-border-medium`,
     hover: `hover:bg-neutral-component-surface-medium`,
-    pressed: `focus:text-custom-text-300 focus:bg-neutral-component-surface-medium`,
-    disabled: `cursor-not-allowed !text-custom-text-400`,
+    pressed: `focus:text-neutral-text-medium focus:bg-neutral-component-surface-medium`,
+    disabled: `cursor-not-allowed !text-neutral-text-subtle`,
   },
   "link-primary": {
     default: `text-custom-primary-100 bg-neutral-component-surface-light`,
diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
index 604dbe0b1..cc8590159 100644
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -132,7 +132,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                       if (menuButtonOnClick) menuButtonOnClick();
                     }}
                     disabled={disabled}
-                    className={`relative grid place-items-center rounded p-1 text-custom-text-200 outline-none hover:text-custom-text-100 ${
+                    className={`relative grid place-items-center rounded p-1 text-neutral-text-medium outline-none hover:text-neutral-text-strong ${
                       disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-neutral-component-surface-dark"
                     } ${buttonClassName}`}
                     tabIndex={customButtonTabIndex}
@@ -146,10 +146,10 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                     ref={setReferenceElement}
                     type="button"
                     className={`flex items-center justify-between gap-1 whitespace-nowrap rounded-md px-2.5 py-1 text-xs duration-300 ${
-                      open ? "bg-neutral-component-surface-medium text-custom-text-100" : "text-custom-text-200"
+                      open ? "bg-neutral-component-surface-medium text-neutral-text-strong" : "text-neutral-text-medium"
                     } ${noBorder ? "" : "border border-neutral-border-medium shadow-sm focus:outline-none"} ${
                       disabled
-                        ? "cursor-not-allowed text-custom-text-200"
+                        ? "cursor-not-allowed text-neutral-text-medium"
                         : "cursor-pointer hover:bg-neutral-component-surface-dark"
                     } ${buttonClassName}`}
                     onClick={() => {
@@ -181,7 +181,7 @@ const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
         <button
           type="button"
           className={cn(
-            "w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200",
+            "w-full select-none truncate rounded px-1 py-1.5 text-left text-neutral-text-medium",
             {
               "bg-neutral-component-surface-dark": active,
             },
diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/ui/src/dropdowns/custom-search-select.tsx
index 3ef792f15..ec64ad189 100644
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@@ -87,7 +87,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                   type="button"
                   className={`flex w-full items-center justify-between gap-1 text-xs ${
                     disabled
-                      ? "cursor-not-allowed text-custom-text-200"
+                      ? "cursor-not-allowed text-neutral-text-medium"
                       : "cursor-pointer hover:bg-neutral-component-surface-dark"
                   }  ${customButtonClassName}`}
                   onClick={openDropdown}
@@ -104,7 +104,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                     input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
                   } ${
                     disabled
-                      ? "cursor-not-allowed text-custom-text-200"
+                      ? "cursor-not-allowed text-neutral-text-medium"
                       : "cursor-pointer hover:bg-neutral-component-surface-dark"
                   } ${buttonClassName}`}
                   onClick={openDropdown}
@@ -126,9 +126,9 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                   {...attributes.popper}
                 >
                   <div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-neutral-component-surface-medium px-2">
-                    <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+                    <Search className="h-3.5 w-3.5 text-neutral-text-subtle" strokeWidth={1.5} />
                     <Combobox.Input
-                      className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                      className="w-full bg-transparent py-1 text-xs text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"
                       value={query}
                       onChange={(e) => setQuery(e.target.value)}
                       placeholder="Search"
@@ -170,10 +170,10 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                           </Combobox.Option>
                         ))
                       ) : (
-                        <p className="text-custom-text-400 italic py-1 px-1.5">No matches found</p>
+                        <p className="text-neutral-text-subtle italic py-1 px-1.5">No matches found</p>
                       )
                     ) : (
-                      <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+                      <p className="text-neutral-text-subtle italic py-1 px-1.5">Loading...</p>
                     )}
                   </div>
                   {footerOption}
diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx
index 977bfe6b7..e71b3df5b 100644
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -66,7 +66,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
               type="button"
               className={`flex items-center justify-between gap-1 text-xs ${
                 disabled
-                  ? "cursor-not-allowed text-custom-text-200"
+                  ? "cursor-not-allowed text-neutral-text-medium"
                   : "cursor-pointer hover:bg-neutral-component-surface-dark"
               } ${customButtonClassName}`}
               onClick={openDropdown}
@@ -83,7 +83,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
                 input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
               } ${
                 disabled
-                  ? "cursor-not-allowed text-custom-text-200"
+                  ? "cursor-not-allowed text-neutral-text-medium"
                   : "cursor-pointer hover:bg-neutral-component-surface-dark"
               } ${buttonClassName}`}
               onClick={openDropdown}
@@ -126,7 +126,7 @@ const Option = (props: ICustomSelectItemProps) => {
       value={value}
       className={({ active }) =>
         cn(
-          "cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200",
+          "cursor-pointer select-none truncate rounded px-1 py-1.5 text-neutral-text-medium",
           {
             "bg-neutral-component-surface-dark": active,
           },
diff --git a/packages/ui/src/icons/priority-icon.tsx b/packages/ui/src/icons/priority-icon.tsx
index 44e8c2c59..e23fccb47 100644
--- a/packages/ui/src/icons/priority-icon.tsx
+++ b/packages/ui/src/icons/priority-icon.tsx
@@ -68,7 +68,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
               "text-orange-500": priority === "high",
               "text-yellow-500": priority === "medium",
               "text-custom-primary-100": priority === "low",
-              "text-custom-text-200": priority === "none",
+              "text-neutral-text-medium": priority === "none",
             },
             className
           )}
diff --git a/packages/ui/src/tooltip/tooltip.tsx b/packages/ui/src/tooltip/tooltip.tsx
index 56e612ff8..9ea060168 100644
--- a/packages/ui/src/tooltip/tooltip.tsx
+++ b/packages/ui/src/tooltip/tooltip.tsx
@@ -47,9 +47,9 @@ export const Tooltip: React.FC<ITooltipProps> = ({
     hoverCloseDelay={closeDelay}
     content={
       <div
-        className={`relative z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-neutral-component-surface-light p-2 text-xs text-custom-text-200 shadow-md ${className}`}
+        className={`relative z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-neutral-component-surface-light p-2 text-xs text-neutral-text-medium shadow-md ${className}`}
       >
-        {tooltipHeading && <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>}
+        {tooltipHeading && <h5 className="font-medium text-neutral-text-strong">{tooltipHeading}</h5>}
         {tooltipContent}
       </div>
     }
diff --git a/space/components/accounts/github-sign-in.tsx b/space/components/accounts/github-sign-in.tsx
index 0f1af9a06..7aa897032 100644
--- a/space/components/accounts/github-sign-in.tsx
+++ b/space/components/accounts/github-sign-in.tsx
@@ -43,7 +43,7 @@ export const GitHubSignInButton: FC<Props> = (props) => {
         className="w-full"
         href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
       >
-        <button className="flex h-[46px] w-full items-center justify-center gap-2 rounded border border-neutral-border-medium p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-neutral-component-surface-dark">
+        <button className="flex h-[46px] w-full items-center justify-center gap-2 rounded border border-neutral-border-medium p-2 text-sm font-medium text-neutral-text-strong duration-300 hover:bg-neutral-component-surface-dark">
           <Image
             src={theme === "dark" ? githubWhiteImage : githubBlackImage}
             height={20}
diff --git a/space/components/accounts/onboarding-form.tsx b/space/components/accounts/onboarding-form.tsx
index 916efd213..37674d93f 100644
--- a/space/components/accounts/onboarding-form.tsx
+++ b/space/components/accounts/onboarding-form.tsx
@@ -127,7 +127,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
                     type="button"
                     className={`flex w-full items-center justify-between gap-1 rounded-md border border-neutral-border-medium px-3 py-2 text-sm shadow-sm duration-300 focus:outline-none`}
                   >
-                    <span className={value ? "" : "text-custom-text-400"}>{value || "Select your role..."}</span>
+                    <span className={value ? "" : "text-neutral-text-subtle"}>{value || "Select your role..."}</span>
                     <ChevronDown className="h-3 w-3" aria-hidden="true" strokeWidth={2} />
                   </Listbox.Button>
 
@@ -151,7 +151,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
                             className={({ active, selected }) =>
                               `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
                                 active || selected ? "bg-neutral-component-surface-dark" : ""
-                              } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                              } ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
                             }
                           >
                             {({ selected }) => (
diff --git a/space/components/issues/board-views/block-downvotes.tsx b/space/components/issues/board-views/block-downvotes.tsx
index 1f83971df..f3d4dc6c3 100644
--- a/space/components/issues/board-views/block-downvotes.tsx
+++ b/space/components/issues/board-views/block-downvotes.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 export const IssueBlockDownVotes = ({ number }: { number: number }) => (
-  <div className="flex h-6 items-center rounded border-[0.5px] border-neutral-border-medium px-1.5 py-1 pl-1 text-xs text-custom-text-300">
-    <span className="material-symbols-rounded !m-0 rotate-180 !p-0 text-base text-custom-text-300">
+  <div className="flex h-6 items-center rounded border-[0.5px] border-neutral-border-medium px-1.5 py-1 pl-1 text-xs text-neutral-text-medium">
+    <span className="material-symbols-rounded !m-0 rotate-180 !p-0 text-base text-neutral-text-medium">
       arrow_upward_alt
     </span>
     {number}
diff --git a/space/components/issues/board-views/block-due-date.tsx b/space/components/issues/board-views/block-due-date.tsx
index 40d696a07..e330221fa 100644
--- a/space/components/issues/board-views/block-due-date.tsx
+++ b/space/components/issues/board-views/block-due-date.tsx
@@ -49,7 +49,7 @@ export const IssueBlockDueDate = ({ due_date, group }: { due_date: string; group
   const iconDetails = dueDateIconDetails(due_date, group);
 
   return (
-    <div className="flex items-center gap-1 rounded border-[0.5px] border-neutral-border-medium px-2.5 py-1 text-xs text-custom-text-100">
+    <div className="flex items-center gap-1 rounded border-[0.5px] border-neutral-border-medium px-2.5 py-1 text-xs text-neutral-text-strong">
       <span className={`material-symbols-rounded -my-0.5 text-sm ${iconDetails.className}`}>
         {iconDetails.iconName}
       </span>
diff --git a/space/components/issues/board-views/block-labels.tsx b/space/components/issues/board-views/block-labels.tsx
index 8f1dae5e3..c394a1439 100644
--- a/space/components/issues/board-views/block-labels.tsx
+++ b/space/components/issues/board-views/block-labels.tsx
@@ -9,7 +9,7 @@ export const IssueBlockLabels = ({ labels }: any) => (
           key={_label?.id}
           className="flex flex-shrink-0 cursor-default items-center rounded-md border border-neutral-border-medium px-2.5 py-1 text-xs shadow-sm"
         >
-          <div className="flex items-center gap-1.5 text-custom-text-200">
+          <div className="flex items-center gap-1.5 text-neutral-text-medium">
             <div className="h-2 w-2 rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
             <div className="text-xs">{_label?.name}</div>
           </div>
diff --git a/space/components/issues/board-views/block-state.tsx b/space/components/issues/board-views/block-state.tsx
index 4ce9ba293..2f8c74f51 100644
--- a/space/components/issues/board-views/block-state.tsx
+++ b/space/components/issues/board-views/block-state.tsx
@@ -9,7 +9,7 @@ export const IssueBlockState = ({ state }: any) => {
   if (stateGroup === null) return <></>;
   return (
     <div className="flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-neutral-border-medium px-2.5 py-1 text-xs shadow-sm duration-300 focus:outline-none">
-      <div className="flex w-full items-center gap-1.5 text-custom-text-200">
+      <div className="flex w-full items-center gap-1.5 text-neutral-text-medium">
         <StateGroupIcon stateGroup={state.group} color={state.color} />
         <div className="text-xs">{state?.name}</div>
       </div>
diff --git a/space/components/issues/board-views/block-upvotes.tsx b/space/components/issues/board-views/block-upvotes.tsx
index 61bffbb78..fe5759bfb 100644
--- a/space/components/issues/board-views/block-upvotes.tsx
+++ b/space/components/issues/board-views/block-upvotes.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 export const IssueBlockUpVotes = ({ number }: { number: number }) => (
-  <div className="flex h-6 items-center rounded border-[0.5px] border-neutral-border-medium px-1.5 py-1 pl-1 text-xs text-custom-text-300">
-    <span className="material-symbols-rounded !m-0 !p-0 text-base text-custom-text-300">arrow_upward_alt</span>
+  <div className="flex h-6 items-center rounded border-[0.5px] border-neutral-border-medium px-1.5 py-1 pl-1 text-xs text-neutral-text-medium">
+    <span className="material-symbols-rounded !m-0 !p-0 text-base text-neutral-text-medium">arrow_upward_alt</span>
     {number}
   </div>
 );
diff --git a/space/components/issues/board-views/kanban/block.tsx b/space/components/issues/board-views/kanban/block.tsx
index d460eca5c..f89824e78 100644
--- a/space/components/issues/board-views/kanban/block.tsx
+++ b/space/components/issues/board-views/kanban/block.tsx
@@ -46,7 +46,7 @@ export const IssueKanBanBlock = observer(({ issue }: { issue: IIssue }) => {
   return (
     <div className="flex flex-col gap-1.5 space-y-2 rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light px-3 py-2 text-sm shadow-custom-shadow-2xs">
       {/* id */}
-      <div className="break-words text-xs text-custom-text-300">
+      <div className="break-words text-xs text-neutral-text-medium">
         {projectStore?.project?.identifier}-{issue?.sequence_id}
       </div>
 
diff --git a/space/components/issues/board-views/kanban/header.tsx b/space/components/issues/board-views/kanban/header.tsx
index a3c623306..ea3ec7e84 100644
--- a/space/components/issues/board-views/kanban/header.tsx
+++ b/space/components/issues/board-views/kanban/header.tsx
@@ -22,8 +22,8 @@ export const IssueKanBanHeader = observer(({ state }: { state: IIssueState }) =>
       <div className="flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
         <StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
       </div>
-      <div className="mr-1 truncate font-semibold capitalize text-custom-text-200">{state?.name}</div>
-      <span className="flex-shrink-0 rounded-full text-custom-text-300">
+      <div className="mr-1 truncate font-semibold capitalize text-neutral-text-medium">{state?.name}</div>
+      <span className="flex-shrink-0 rounded-full text-neutral-text-medium">
         {store.issue.getCountOfIssuesByState(state.id)}
       </span>
     </div>
diff --git a/space/components/issues/board-views/kanban/index.tsx b/space/components/issues/board-views/kanban/index.tsx
index 381c340da..51241fede 100644
--- a/space/components/issues/board-views/kanban/index.tsx
+++ b/space/components/issues/board-views/kanban/index.tsx
@@ -34,7 +34,7 @@ export const IssueKanbanView = observer(() => {
                   ))}
                 </div>
               ) : (
-                <div className="flex items-center justify-center gap-2 pt-10 text-center text-sm font-medium text-custom-text-200">
+                <div className="flex items-center justify-center gap-2 pt-10 text-center text-sm font-medium text-neutral-text-medium">
                   <Icon iconName="stack" />
                   No issues in this state
                 </div>
diff --git a/space/components/issues/board-views/list/block.tsx b/space/components/issues/board-views/list/block.tsx
index 453bf84c6..bb614c089 100644
--- a/space/components/issues/board-views/list/block.tsx
+++ b/space/components/issues/board-views/list/block.tsx
@@ -49,7 +49,7 @@ export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
     <div className="relative flex items-center gap-10 bg-neutral-component-surface-light p-3">
       <div className="relative flex w-full flex-grow items-center gap-3 overflow-hidden">
         {/* id */}
-        <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
+        <div className="flex-shrink-0 text-xs font-medium text-neutral-text-medium">
           {projectStore?.project?.identifier}-{issue?.sequence_id}
         </div>
         {/* name */}
diff --git a/space/components/issues/board-views/list/header.tsx b/space/components/issues/board-views/list/header.tsx
index 82b7ac26f..64abc85cb 100644
--- a/space/components/issues/board-views/list/header.tsx
+++ b/space/components/issues/board-views/list/header.tsx
@@ -23,7 +23,9 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
         <StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
       </div>
       <div className="mr-1 font-medium capitalize">{state?.name}</div>
-      <div className="text-sm font-medium text-custom-text-200">{store.issue.getCountOfIssuesByState(state.id)}</div>
+      <div className="text-sm font-medium text-neutral-text-medium">
+        {store.issue.getCountOfIssuesByState(state.id)}
+      </div>
     </div>
   );
 });
diff --git a/space/components/issues/board-views/list/index.tsx b/space/components/issues/board-views/list/index.tsx
index cd83d44a1..15f4c12d4 100644
--- a/space/components/issues/board-views/list/index.tsx
+++ b/space/components/issues/board-views/list/index.tsx
@@ -27,7 +27,7 @@ export const IssueListView = observer(() => {
                 ))}
               </div>
             ) : (
-              <div className="bg-neutral-component-surface-light p-3 text-sm text-custom-text-400">No issues.</div>
+              <div className="bg-neutral-component-surface-light p-3 text-sm text-neutral-text-subtle">No issues.</div>
             )}
           </div>
         ))}
diff --git a/space/components/issues/filters/applied-filters/filters-list.tsx b/space/components/issues/filters/applied-filters/filters-list.tsx
index 204c483cc..d15847ce7 100644
--- a/space/components/issues/filters/applied-filters/filters-list.tsx
+++ b/space/components/issues/filters/applied-filters/filters-list.tsx
@@ -33,7 +33,7 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {
             key={filterKey}
             className="flex flex-wrap items-center gap-2 rounded-md border border-neutral-border-medium px-2 py-1 capitalize"
           >
-            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+            <span className="text-xs text-neutral-text-medium">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
             <div className="flex flex-wrap items-center gap-1">
               {filterKey === "priority" && (
                 <AppliedPriorityFilters handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} />
@@ -57,7 +57,7 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {
 
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
                 onClick={() => handleRemoveFilter(filterKey, null)}
               >
                 <X size={12} strokeWidth={2} />
@@ -69,7 +69,7 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {
       <button
         type="button"
         onClick={handleRemoveAllFilters}
-        className="flex items-center gap-2 rounded-md border border-neutral-border-medium px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
+        className="flex items-center gap-2 rounded-md border border-neutral-border-medium px-2 py-1 text-xs text-neutral-text-medium hover:text-neutral-text-medium"
       >
         Clear all
         <X size={12} strokeWidth={2} />
diff --git a/space/components/issues/filters/applied-filters/label.tsx b/space/components/issues/filters/applied-filters/label.tsx
index fb87f2811..a8ad790ab 100644
--- a/space/components/issues/filters/applied-filters/label.tsx
+++ b/space/components/issues/filters/applied-filters/label.tsx
@@ -29,7 +29,7 @@ export const AppliedLabelsFilters: React.FC<Props> = (props) => {
             <span className="normal-case">{labelDetails.name}</span>
             <button
               type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
               onClick={() => handleRemove(labelId)}
             >
               <X size={10} strokeWidth={2} />
diff --git a/space/components/issues/filters/applied-filters/priority.tsx b/space/components/issues/filters/applied-filters/priority.tsx
index d4c073fe6..3264f58f3 100644
--- a/space/components/issues/filters/applied-filters/priority.tsx
+++ b/space/components/issues/filters/applied-filters/priority.tsx
@@ -19,7 +19,7 @@ export const AppliedPriorityFilters: React.FC<Props> = (props) => {
             {priority}
             <button
               type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
               onClick={() => handleRemove(priority)}
             >
               <X size={10} strokeWidth={2} />
diff --git a/space/components/issues/filters/applied-filters/state.tsx b/space/components/issues/filters/applied-filters/state.tsx
index e896c975c..dbab8cd38 100644
--- a/space/components/issues/filters/applied-filters/state.tsx
+++ b/space/components/issues/filters/applied-filters/state.tsx
@@ -26,7 +26,7 @@ export const AppliedStateFilters: React.FC<Props> = (props) => {
             {stateDetails.name}
             <button
               type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
               onClick={() => handleRemove(stateId)}
             >
               <X size={10} strokeWidth={2} />
diff --git a/space/components/issues/filters/helpers/dropdown.tsx b/space/components/issues/filters/helpers/dropdown.tsx
index 0294472ca..42c23c88f 100644
--- a/space/components/issues/filters/helpers/dropdown.tsx
+++ b/space/components/issues/filters/helpers/dropdown.tsx
@@ -30,7 +30,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
           <>
             <Popover.Button as={React.Fragment}>
               <Button ref={setReferenceElement} variant="neutral-primary" size="sm">
-                <div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
+                <div className={`${open ? "text-neutral-text-strong" : "text-neutral-text-medium"}`}>
                   <span>{title}</span>
                 </div>
               </Button>
diff --git a/space/components/issues/filters/helpers/filter-header.tsx b/space/components/issues/filters/helpers/filter-header.tsx
index ab0593004..81d0e2210 100644
--- a/space/components/issues/filters/helpers/filter-header.tsx
+++ b/space/components/issues/filters/helpers/filter-header.tsx
@@ -10,7 +10,7 @@ interface IFilterHeader {
 
 export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) => (
   <div className="sticky top-0 flex items-center justify-between gap-2 bg-neutral-component-surface-light">
-    <div className="flex-grow truncate text-xs font-medium text-custom-text-300">{title}</div>
+    <div className="flex-grow truncate text-xs font-medium text-neutral-text-medium">{title}</div>
     <button
       type="button"
       className="grid h-5 w-5 flex-shrink-0 place-items-center rounded hover:bg-neutral-component-surface-dark"
diff --git a/space/components/issues/filters/helpers/filter-option.tsx b/space/components/issues/filters/helpers/filter-option.tsx
index 1225af7ad..ea5c28b35 100644
--- a/space/components/issues/filters/helpers/filter-option.tsx
+++ b/space/components/issues/filters/helpers/filter-option.tsx
@@ -28,7 +28,7 @@ export const FilterOption: React.FC<Props> = (props) => {
       </div>
       <div className="flex items-center gap-2 truncate">
         {icon && <div className="grid w-5 flex-shrink-0 place-items-center">{icon}</div>}
-        <div className="flex-grow truncate text-xs text-custom-text-200">{title}</div>
+        <div className="flex-grow truncate text-xs text-neutral-text-medium">{title}</div>
       </div>
     </button>
   );
diff --git a/space/components/issues/filters/labels.tsx b/space/components/issues/filters/labels.tsx
index c8dd2132b..40d51f47f 100644
--- a/space/components/issues/filters/labels.tsx
+++ b/space/components/issues/filters/labels.tsx
@@ -67,7 +67,7 @@ export const FilterLabels: React.FC<Props> = (props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/space/components/issues/filters/priority.tsx b/space/components/issues/filters/priority.tsx
index 8a5a643f4..ed9d7d62e 100644
--- a/space/components/issues/filters/priority.tsx
+++ b/space/components/issues/filters/priority.tsx
@@ -42,7 +42,7 @@ export const FilterPriority: React.FC<Props> = observer((props) => {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
           )}
         </div>
       )}
diff --git a/space/components/issues/filters/selection.tsx b/space/components/issues/filters/selection.tsx
index 83c677632..d3dcdf0f7 100644
--- a/space/components/issues/filters/selection.tsx
+++ b/space/components/issues/filters/selection.tsx
@@ -29,10 +29,10 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
     <div className="flex h-full w-full flex-col overflow-hidden">
       <div className="bg-neutral-component-surface-light p-2.5 pb-0">
         <div className="flex items-center gap-1.5 rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-medium px-1.5 py-1 text-xs">
-          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+          <Search className="text-neutral-text-subtle" size={12} strokeWidth={2} />
           <input
             type="text"
-            className="w-full bg-neutral-component-surface-medium outline-none placeholder:text-custom-text-400"
+            className="w-full bg-neutral-component-surface-medium outline-none placeholder:text-neutral-text-subtle"
             placeholder="Search"
             value={filtersSearchQuery}
             onChange={(e) => setFiltersSearchQuery(e.target.value)}
@@ -40,7 +40,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+              <X className="text-neutral-text-medium" size={12} strokeWidth={2} />
             </button>
           )}
         </div>
diff --git a/space/components/issues/filters/state.tsx b/space/components/issues/filters/state.tsx
index a3781386d..1e328f93e 100644
--- a/space/components/issues/filters/state.tsx
+++ b/space/components/issues/filters/state.tsx
@@ -62,7 +62,7 @@ export const FilterState: React.FC<Props> = (props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/space/components/issues/navbar/issue-board-view.tsx b/space/components/issues/navbar/issue-board-view.tsx
index 34c2a64d4..ceb176f24 100644
--- a/space/components/issues/navbar/issue-board-view.tsx
+++ b/space/components/issues/navbar/issue-board-view.tsx
@@ -30,8 +30,8 @@ export const NavbarIssueBoardView = observer(() => {
                 key={viewKey}
                 className={`flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded-sm ${
                   viewKey === activeBoard
-                    ? `bg-neutral-component-surface-dark text-custom-text-200`
-                    : `text-custom-text-300 hover:bg-neutral-component-surface-dark`
+                    ? `bg-neutral-component-surface-dark text-neutral-text-medium`
+                    : `text-neutral-text-medium hover:bg-neutral-component-surface-dark`
                 }`}
                 onClick={() => handleCurrentBoardView(viewKey)}
                 title={viewKey}
diff --git a/space/components/issues/navbar/theme.tsx b/space/components/issues/navbar/theme.tsx
index 63f1b9279..686a630a7 100644
--- a/space/components/issues/navbar/theme.tsx
+++ b/space/components/issues/navbar/theme.tsx
@@ -24,7 +24,7 @@ export const NavbarTheme = observer(() => {
     <button
       type="button"
       onClick={handleTheme}
-      className="relative grid h-7 w-7 place-items-center rounded bg-neutral-component-surface-light text-custom-text-100 hover:bg-neutral-component-surface-dark"
+      className="relative grid h-7 w-7 place-items-center rounded bg-neutral-component-surface-light text-neutral-text-strong hover:bg-neutral-component-surface-dark"
     >
       <span className="material-symbols-rounded text-sm">{appTheme === "light" ? "dark_mode" : "light_mode"}</span>
     </button>
diff --git a/space/components/issues/peek-overview/comment/comment-detail-card.tsx b/space/components/issues/peek-overview/comment/comment-detail-card.tsx
index e796fd559..88ac97ea2 100644
--- a/space/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/space/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -83,7 +83,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
         )}
 
         <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-neutral-component-surface-dark px-0.5 py-px">
-          <MessageSquare className="h-3 w-3 text-custom-text-200" aria-hidden="true" strokeWidth={2} />
+          <MessageSquare className="h-3 w-3 text-neutral-text-medium" aria-hidden="true" strokeWidth={2} />
         </span>
       </div>
       <div className="min-w-0 flex-1">
@@ -91,7 +91,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
           <div className="text-xs">
             {comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name}
           </div>
-          <p className="mt-0.5 text-xs text-custom-text-200">
+          <p className="mt-0.5 text-xs text-neutral-text-medium">
             <>commented {timeAgo(comment.created_at)}</>
           </p>
         </div>
@@ -156,9 +156,9 @@ export const CommentCard: React.FC<Props> = observer((props) => {
           <Menu.Button
             type="button"
             onClick={() => {}}
-            className="relative grid cursor-pointer place-items-center rounded p-1 text-custom-text-200 outline-none hover:bg-neutral-component-surface-dark hover:text-custom-text-100"
+            className="relative grid cursor-pointer place-items-center rounded p-1 text-neutral-text-medium outline-none hover:bg-neutral-component-surface-dark hover:text-neutral-text-strong"
           >
-            <MoreVertical className="h-4 w-4 text-custom-text-200 duration-300" strokeWidth={2} />
+            <MoreVertical className="h-4 w-4 text-neutral-text-medium duration-300" strokeWidth={2} />
           </Menu.Button>
 
           <Transition
@@ -179,7 +179,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                       onClick={() => {
                         setIsEditing(true);
                       }}
-                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-neutral-component-surface-dark ${
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
                         active ? "bg-neutral-component-surface-dark" : ""
                       }`}
                     >
@@ -194,7 +194,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                     <button
                       type="button"
                       onClick={handleDelete}
-                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-neutral-component-surface-dark ${
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
                         active ? "bg-neutral-component-surface-dark" : ""
                       }`}
                     >
diff --git a/space/components/issues/peek-overview/comment/comment-reactions.tsx b/space/components/issues/peek-overview/comment/comment-reactions.tsx
index c246d67f3..954316fc4 100644
--- a/space/components/issues/peek-overview/comment/comment-reactions.tsx
+++ b/space/components/issues/peek-overview/comment/comment-reactions.tsx
@@ -103,7 +103,7 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
                     handleReactionClick(reaction);
                   });
                 }}
-                className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
+                className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-neutral-text-strong ${
                   commentReactions?.some(
                     (r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction
                   )
diff --git a/space/components/issues/peek-overview/header.tsx b/space/components/issues/peek-overview/header.tsx
index f3bd05c16..a8cfb603b 100644
--- a/space/components/issues/peek-overview/header.tsx
+++ b/space/components/issues/peek-overview/header.tsx
@@ -97,7 +97,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
                       className={({ active, selected }) =>
                         `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
                           active || selected ? "bg-neutral-component-surface-dark" : ""
-                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                        } ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
                       }
                     >
                       {({ selected }) => (
diff --git a/space/components/issues/peek-overview/issue-activity.tsx b/space/components/issues/peek-overview/issue-activity.tsx
index a4affa2b6..01a91246c 100644
--- a/space/components/issues/peek-overview/issue-activity.tsx
+++ b/space/components/issues/peek-overview/issue-activity.tsx
@@ -51,7 +51,7 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer(() => {
             </>
           ) : (
             <div className="mt-4 flex items-center justify-between gap-2 rounded border border-neutral-border-medium bg-neutral-component-surface-dark px-2 py-2.5">
-              <p className="flex gap-2 overflow-hidden break-words text-sm text-custom-text-200">
+              <p className="flex gap-2 overflow-hidden break-words text-sm text-neutral-text-medium">
                 <Icon iconName="lock" className="!text-sm" />
                 Sign in to add your comment
               </p>
diff --git a/space/components/issues/peek-overview/issue-details.tsx b/space/components/issues/peek-overview/issue-details.tsx
index d84103388..67ca74d2e 100644
--- a/space/components/issues/peek-overview/issue-details.tsx
+++ b/space/components/issues/peek-overview/issue-details.tsx
@@ -13,7 +13,7 @@ export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
 
   return (
     <div className="space-y-2">
-      <h6 className="font-medium text-custom-text-200">
+      <h6 className="font-medium text-neutral-text-medium">
         {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
       </h6>
       <h4 className="break-words text-2xl font-semibold">{issueDetails.name}</h4>
diff --git a/space/components/issues/peek-overview/issue-emoji-reactions.tsx b/space/components/issues/peek-overview/issue-emoji-reactions.tsx
index 57ab8d783..cc7a7e554 100644
--- a/space/components/issues/peek-overview/issue-emoji-reactions.tsx
+++ b/space/components/issues/peek-overview/issue-emoji-reactions.tsx
@@ -84,7 +84,7 @@ export const IssueEmojiReactions: React.FC = observer(() => {
                       handleReactionClick(reaction);
                     });
                   }}
-                  className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
+                  className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-neutral-text-strong ${
                     reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
                       ? "bg-custom-primary-100/10"
                       : "bg-neutral-component-surface-dark"
diff --git a/space/components/issues/peek-overview/issue-properties.tsx b/space/components/issues/peek-overview/issue-properties.tsx
index 4cc9e1b73..7cabb68a7 100644
--- a/space/components/issues/peek-overview/issue-properties.tsx
+++ b/space/components/issues/peek-overview/issue-properties.tsx
@@ -64,7 +64,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
           <div className="w-3/4">
             {stateGroup && (
               <div className="inline-flex rounded bg-neutral-component-surface-dark px-2.5 py-0.5 text-sm">
-                <div className="flex items-center gap-1.5 text-left text-custom-text-100">
+                <div className="flex items-center gap-1.5 text-left text-neutral-text-strong">
                   <StateGroupIcon stateGroup={state.group} color={state.color} />
                   {addSpaceIfCamelCase(state?.name ?? "")}
                 </div>
@@ -108,14 +108,14 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
           </div>
           <div>
             {issueDetails.target_date ? (
-              <div className="flex h-6 items-center gap-1 rounded border border-neutral-border-subtle bg-neutral-component-surface-dark px-2.5 py-1 text-xs text-custom-text-100">
+              <div className="flex h-6 items-center gap-1 rounded border border-neutral-border-subtle bg-neutral-component-surface-dark px-2.5 py-1 text-xs text-neutral-text-strong">
                 <span className={`material-symbols-rounded -my-0.5 text-sm ${dueDateIcon.className}`}>
                   {dueDateIcon.iconName}
                 </span>
                 {renderFullDate(issueDetails.target_date)}
               </div>
             ) : (
-              <span className="text-custom-text-200">Empty</span>
+              <span className="text-neutral-text-medium">Empty</span>
             )}
           </div>
         </div>
diff --git a/space/components/ui/dropdown.tsx b/space/components/ui/dropdown.tsx
index 0d82cdf06..9b32fcce9 100644
--- a/space/components/ui/dropdown.tsx
+++ b/space/components/ui/dropdown.tsx
@@ -83,7 +83,7 @@ const DropdownItem: React.FC<DropdownItemProps> = (props) => {
             }
             setOpen((prev) => !prev);
           }}
-          className={`flex w-full items-center gap-1 rounded px-1 py-1.5 text-custom-text-200 hover:bg-neutral-component-surface-dark ${
+          className={`flex w-full items-center gap-1 rounded px-1 py-1.5 text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
             isSelected ? "bg-neutral-component-surface-dark" : ""
           }`}
         >
@@ -109,8 +109,8 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
       {({ open }) => (
         <>
           <Popover.Button
-            className={`group flex items-center justify-between gap-2 rounded-md border border-neutral-border-medium px-3 py-1.5 text-xs shadow-sm duration-300 hover:bg-neutral-component-surface-medium hover:text-custom-text-100 focus:outline-none ${
-              open ? "bg-neutral-component-surface-medium text-custom-text-100" : "text-custom-text-200"
+            className={`group flex items-center justify-between gap-2 rounded-md border border-neutral-border-medium px-3 py-1.5 text-xs shadow-sm duration-300 hover:bg-neutral-component-surface-medium hover:text-neutral-text-strong focus:outline-none ${
+              open ? "bg-neutral-component-surface-medium text-neutral-text-strong" : "text-neutral-text-medium"
             }`}
           >
             {typeof button === "function" ? button() : button}
diff --git a/space/components/ui/reaction-selector.tsx b/space/components/ui/reaction-selector.tsx
index c1a03b4fd..24d927f15 100644
--- a/space/components/ui/reaction-selector.tsx
+++ b/space/components/ui/reaction-selector.tsx
@@ -35,7 +35,7 @@ export const ReactionSelector: React.FC<Props> = (props) => {
                 size === "sm" ? "h-6 w-6" : size === "md" ? "h-7 w-7" : "h-8 w-8"
               }`}
             >
-              <Icon iconName="add_reaction" className="scale-125 text-custom-text-100" />
+              <Icon iconName="add_reaction" className="scale-125 text-neutral-text-strong" />
             </span>
           </Popover.Button>
           <Transition
diff --git a/space/components/views/project-details.tsx b/space/components/views/project-details.tsx
index 2e3b93044..d82b19d3d 100644
--- a/space/components/views/project-details.tsx
+++ b/space/components/views/project-details.tsx
@@ -55,7 +55,7 @@ export const ProjectDetailsView = observer(() => {
       {workspace_slug && <IssuePeekOverview />}
 
       {issueStore?.loader && !issueStore.issues ? (
-        <div className="py-10 text-center text-sm text-custom-text-100">Loading...</div>
+        <div className="py-10 text-center text-sm text-neutral-text-strong">Loading...</div>
       ) : (
         <>
           {issueStore?.error ? (
@@ -67,7 +67,7 @@ export const ProjectDetailsView = observer(() => {
                   </div>
                 </div>
                 <h1 className="mt-12 text-3xl font-semibold">Oops! Something went wrong.</h1>
-                <p className="mt-4 text-custom-text-300">The public board does not exist. Please check the URL.</p>
+                <p className="mt-4 text-neutral-text-medium">The public board does not exist. Please check the URL.</p>
               </div>
             </div>
           ) : (
diff --git a/space/pages/404.tsx b/space/pages/404.tsx
index 07e415a19..93c13aab9 100644
--- a/space/pages/404.tsx
+++ b/space/pages/404.tsx
@@ -10,7 +10,7 @@ const Custom404Error = () => (
           <Image src={notFoundImage} layout="fill" alt="404- Page not found" />
         </div>
         <div className="text-xl font-medium">Oops! Something went wrong.</div>
-        <div className="text-sm text-custom-text-200">
+        <div className="text-sm text-neutral-text-medium">
           Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
           temporarily unavailable.
         </div>
diff --git a/space/pages/onboarding/index.tsx b/space/pages/onboarding/index.tsx
index 79d608f23..d1dca6b60 100644
--- a/space/pages/onboarding/index.tsx
+++ b/space/pages/onboarding/index.tsx
@@ -30,7 +30,7 @@ const OnBoardingPage = () => {
               <img src={`${imagePrefix}/plane-logos/blue-without-text.png`} alt="Plane logo" />
             </div>
           </div>
-          <div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm font-medium text-custom-text-100 sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
+          <div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm font-medium text-neutral-text-strong sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
             {user?.email}
           </div>
         </div>
diff --git a/space/pages/project-not-published/index.tsx b/space/pages/project-not-published/index.tsx
index acc638412..6c1816dfa 100644
--- a/space/pages/project-not-published/index.tsx
+++ b/space/pages/project-not-published/index.tsx
@@ -12,7 +12,7 @@ const CustomProjectNotPublishedError = () => (
         <div className="text-xl font-medium">
           Oops! The page you{`'`}re looking for isn{`'`}t live at the moment.
         </div>
-        <div className="text-sm text-custom-text-200">
+        <div className="text-sm text-neutral-text-medium">
           If this is your project, login to your workspace to adjust its visibility settings and make it public.
         </div>
       </div>
diff --git a/web/components/account/deactivate-account-modal.tsx b/web/components/account/deactivate-account-modal.tsx
index b15d2dc77..b1df7aa6e 100644
--- a/web/components/account/deactivate-account-modal.tsx
+++ b/web/components/account/deactivate-account-modal.tsx
@@ -90,13 +90,16 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
                   <div className="">
                     <div className="flex items-start gap-x-4">
                       <div className="grid place-items-center rounded-full bg-red-500/20 p-2 sm:p-2 md:p-4 lg:p-4 mt-3 sm:mt-3 md:mt-0 lg:mt-0 ">
-                        <Trash2 className="h-4 w-4 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6 text-red-600" aria-hidden="true" />
+                        <Trash2
+                          className="h-4 w-4 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6 text-red-600"
+                          aria-hidden="true"
+                        />
                       </div>
                       <div>
-                        <Dialog.Title as="h3" className="my-4 text-2xl font-medium leading-6 text-custom-text-100">
+                        <Dialog.Title as="h3" className="my-4 text-2xl font-medium leading-6 text-neutral-text-strong">
                           Deactivate your account?
                         </Dialog.Title>
-                        <p className="mt-6 list-disc pr-4 text-base font-normal text-custom-text-200">
+                        <p className="mt-6 list-disc pr-4 text-base font-normal text-neutral-text-medium">
                           Once deactivated, you can{"'"}t be assigned issues and be billed for your workspace.To
                           reactivate your account, you will need an invite to a workspace at this email address.
                         </p>
diff --git a/web/components/account/o-auth/github-sign-in.tsx b/web/components/account/o-auth/github-sign-in.tsx
index 74bfd6d94..47e440360 100644
--- a/web/components/account/o-auth/github-sign-in.tsx
+++ b/web/components/account/o-auth/github-sign-in.tsx
@@ -44,7 +44,7 @@ export const GitHubSignInButton: FC<Props> = (props) => {
         href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
       >
         <button
-          className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-onboarding-background-300 ${
+          className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-neutral-text-strong duration-300 hover:bg-onboarding-background-300 ${
             resolvedTheme === "dark" ? "border-[#43484F] bg-[#2F3135]" : "border-[#D9E4FF]"
           }`}
         >
diff --git a/web/components/analytics/custom-analytics/graph/custom-tooltip.tsx b/web/components/analytics/custom-analytics/graph/custom-tooltip.tsx
index 89f7dc348..f7cfa6926 100644
--- a/web/components/analytics/custom-analytics/graph/custom-tooltip.tsx
+++ b/web/components/analytics/custom-analytics/graph/custom-tooltip.tsx
@@ -54,7 +54,7 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
         }}
       />
       <span
-        className={`font-medium text-custom-text-200 ${
+        className={`font-medium text-neutral-text-medium ${
           params.segment
             ? params.segment === "priority" || params.segment === "state__group"
               ? "capitalize"
diff --git a/web/components/analytics/custom-analytics/main-content.tsx b/web/components/analytics/custom-analytics/main-content.tsx
index 3c199f807..64e358dc3 100644
--- a/web/components/analytics/custom-analytics/main-content.tsx
+++ b/web/components/analytics/custom-analytics/main-content.tsx
@@ -45,7 +45,7 @@ export const CustomAnalyticsMainContent: React.FC<Props> = (props) => {
             </div>
           ) : (
             <div className="grid h-full place-items-center p-5">
-              <div className="space-y-4 text-custom-text-200">
+              <div className="space-y-4 text-neutral-text-medium">
                 <p className="text-sm">No matching issues found. Try changing the parameters.</p>
               </div>
             </div>
@@ -63,7 +63,7 @@ export const CustomAnalyticsMainContent: React.FC<Props> = (props) => {
         )
       ) : (
         <div className="grid h-full place-items-center p-5">
-          <div className="space-y-4 text-custom-text-200">
+          <div className="space-y-4 text-neutral-text-medium">
             <p className="text-sm">There was some error in fetching the data.</p>
             <div className="flex items-center justify-center gap-2">
               <Button
diff --git a/web/components/analytics/custom-analytics/select-bar.tsx b/web/components/analytics/custom-analytics/select-bar.tsx
index 19f83e40b..7afbcba9e 100644
--- a/web/components/analytics/custom-analytics/select-bar.tsx
+++ b/web/components/analytics/custom-analytics/select-bar.tsx
@@ -28,7 +28,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
     >
       {!isProjectLevel && (
         <div>
-          <h6 className="text-xs text-custom-text-200">Project</h6>
+          <h6 className="text-xs text-neutral-text-medium">Project</h6>
           <Controller
             name="project"
             control={control}
@@ -43,7 +43,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
         </div>
       )}
       <div>
-        <h6 className="text-xs text-custom-text-200">Measure (y-axis)</h6>
+        <h6 className="text-xs text-neutral-text-medium">Measure (y-axis)</h6>
         <Controller
           name="y_axis"
           control={control}
@@ -51,7 +51,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
         />
       </div>
       <div>
-        <h6 className="text-xs text-custom-text-200">Dimension (x-axis)</h6>
+        <h6 className="text-xs text-neutral-text-medium">Dimension (x-axis)</h6>
         <Controller
           name="x_axis"
           control={control}
@@ -69,7 +69,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
         />
       </div>
       <div>
-        <h6 className="text-xs text-custom-text-200">Group</h6>
+        <h6 className="text-xs text-neutral-text-medium">Group</h6>
         <Controller
           name="segment"
           control={control}
diff --git a/web/components/analytics/custom-analytics/select/project.tsx b/web/components/analytics/custom-analytics/select/project.tsx
index 3c08e1574..aae079829 100644
--- a/web/components/analytics/custom-analytics/select/project.tsx
+++ b/web/components/analytics/custom-analytics/select/project.tsx
@@ -22,7 +22,7 @@ export const SelectProject: React.FC<Props> = observer((props) => {
       query: `${projectDetails?.name} ${projectDetails?.identifier}`,
       content: (
         <div className="flex items-center gap-2 truncate">
-          <span className="text-[0.65rem] text-custom-text-200 flex-shrink-0">{projectDetails?.identifier}</span>
+          <span className="text-[0.65rem] text-neutral-text-medium flex-shrink-0">{projectDetails?.identifier}</span>
           <span className="flex-grow truncate">{projectDetails?.name}</span>
         </div>
       ),
diff --git a/web/components/analytics/custom-analytics/select/segment.tsx b/web/components/analytics/custom-analytics/select/segment.tsx
index 055665d9e..272bd40bd 100644
--- a/web/components/analytics/custom-analytics/select/segment.tsx
+++ b/web/components/analytics/custom-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-custom-text-200">No value</span>
+            <span className="text-neutral-text-medium">No value</span>
           )}
         </span>
       }
diff --git a/web/components/analytics/custom-analytics/sidebar/projects-list.tsx b/web/components/analytics/custom-analytics/sidebar/projects-list.tsx
index d09e8def4..11adcfd23 100644
--- a/web/components/analytics/custom-analytics/sidebar/projects-list.tsx
+++ b/web/components/analytics/custom-analytics/sidebar/projects-list.tsx
@@ -39,30 +39,30 @@ export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = observer((pro
                 )}
                 <h5 className="flex items-center gap-1">
                   <p className="break-words">{truncateText(project.name, 20)}</p>
-                  <span className="ml-1 text-xs text-custom-text-200">({project.identifier})</span>
+                  <span className="ml-1 text-xs text-neutral-text-medium">({project.identifier})</span>
                 </h5>
               </div>
               <div className="mt-4 w-full space-y-3 pl-2">
                 <div className="flex items-center justify-between gap-2 text-xs">
                   <div className="flex items-center gap-2">
-                    <Users className="text-custom-text-200" size={14} strokeWidth={2} />
+                    <Users className="text-neutral-text-medium" size={14} strokeWidth={2} />
                     <h6>Total members</h6>
                   </div>
-                  <span className="text-custom-text-200">{project.total_members}</span>
+                  <span className="text-neutral-text-medium">{project.total_members}</span>
                 </div>
                 <div className="flex items-center justify-between gap-2 text-xs">
                   <div className="flex items-center gap-2">
-                    <Contrast className="text-custom-text-200" size={14} strokeWidth={2} />
+                    <Contrast className="text-neutral-text-medium" size={14} strokeWidth={2} />
                     <h6>Total cycles</h6>
                   </div>
-                  <span className="text-custom-text-200">{project.total_cycles}</span>
+                  <span className="text-neutral-text-medium">{project.total_cycles}</span>
                 </div>
                 <div className="flex items-center justify-between gap-2 text-xs">
                   <div className="flex items-center gap-2">
-                    <LayoutGrid className="text-custom-text-200" size={14} strokeWidth={2} />
+                    <LayoutGrid className="text-neutral-text-medium" size={14} strokeWidth={2} />
                     <h6>Total modules</h6>
                   </div>
-                  <span className="text-custom-text-200">{project.total_modules}</span>
+                  <span className="text-neutral-text-medium">{project.total_modules}</span>
                 </div>
               </div>
             </div>
diff --git a/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx b/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
index 4a18011d1..d9e8c1fb2 100644
--- a/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
+++ b/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
@@ -30,11 +30,11 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
             <h4 className="break-words font-medium">Analytics for {cycleDetails.name}</h4>
             <div className="mt-4 space-y-4">
               <div className="flex items-center gap-2 text-xs">
-                <h6 className="text-custom-text-200">Lead</h6>
+                <h6 className="text-neutral-text-medium">Lead</h6>
                 <span>{cycleOwnerDetails?.display_name}</span>
               </div>
               <div className="flex items-center gap-2 text-xs">
-                <h6 className="text-custom-text-200">Start Date</h6>
+                <h6 className="text-neutral-text-medium">Start Date</h6>
                 <span>
                   {cycleDetails.start_date && cycleDetails.start_date !== ""
                     ? renderFormattedDate(cycleDetails.start_date)
@@ -42,7 +42,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
                 </span>
               </div>
               <div className="flex items-center gap-2 text-xs">
-                <h6 className="text-custom-text-200">Target Date</h6>
+                <h6 className="text-neutral-text-medium">Target Date</h6>
                 <span>
                   {cycleDetails.end_date && cycleDetails.end_date !== ""
                     ? renderFormattedDate(cycleDetails.end_date)
@@ -56,11 +56,11 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
             <h4 className="break-words font-medium">Analytics for {moduleDetails.name}</h4>
             <div className="mt-4 space-y-4">
               <div className="flex items-center gap-2 text-xs">
-                <h6 className="text-custom-text-200">Lead</h6>
+                <h6 className="text-neutral-text-medium">Lead</h6>
                 <span>{moduleDetails.lead_detail?.display_name}</span>
               </div>
               <div className="flex items-center gap-2 text-xs">
-                <h6 className="text-custom-text-200">Start Date</h6>
+                <h6 className="text-neutral-text-medium">Start Date</h6>
                 <span>
                   {moduleDetails.start_date && moduleDetails.start_date !== ""
                     ? renderFormattedDate(moduleDetails.start_date)
@@ -68,7 +68,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
                 </span>
               </div>
               <div className="flex items-center gap-2 text-xs">
-                <h6 className="text-custom-text-200">Target Date</h6>
+                <h6 className="text-neutral-text-medium">Target Date</h6>
                 <span>
                   {moduleDetails.target_date && moduleDetails.target_date !== ""
                     ? renderFormattedDate(moduleDetails.target_date)
@@ -95,7 +95,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
             </div>
             <div className="mt-4 space-y-4">
               <div className="flex items-center gap-2 text-xs">
-                <h6 className="text-custom-text-200">Network</h6>
+                <h6 className="text-neutral-text-medium">Network</h6>
                 <span>{NETWORK_CHOICES.find((n) => n.key === projectDetails?.network)?.label ?? ""}</span>
               </div>
             </div>
diff --git a/web/components/analytics/custom-analytics/sidebar/sidebar.tsx b/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
index 69bb51703..ff45c4800 100644
--- a/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
+++ b/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
@@ -147,12 +147,12 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
       }`}
     >
       <div className="flex flex-wrap items-center gap-2">
-        <div className="flex items-center gap-1 rounded-md bg-neutral-component-surface-dark px-3 py-1 text-xs text-custom-text-200">
+        <div className="flex items-center gap-1 rounded-md bg-neutral-component-surface-dark px-3 py-1 text-xs text-neutral-text-medium">
           <LayersIcon height={14} width={14} />
           {analytics ? analytics.total : "..."} Issues
         </div>
         {isProjectLevel && (
-          <div className="flex items-center gap-1 rounded-md bg-neutral-component-surface-dark px-3 py-1 text-xs text-custom-text-200">
+          <div className="flex items-center gap-1 rounded-md bg-neutral-component-surface-dark px-3 py-1 text-xs text-neutral-text-medium">
             <CalendarDays className="h-3.5 w-3.5" />
             {renderFormattedDate(
               (cycleId
diff --git a/web/components/analytics/custom-analytics/table.tsx b/web/components/analytics/custom-analytics/table.tsx
index 6a3bf38ba..951b635f0 100644
--- a/web/components/analytics/custom-analytics/table.tsx
+++ b/web/components/analytics/custom-analytics/table.tsx
@@ -25,7 +25,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
       <div className="inline-block min-w-full align-middle">
         <table className="min-w-full divide-y divide-neutral-border-medium whitespace-nowrap border-y border-neutral-border-medium">
           <thead className="bg-neutral-component-surface-dark">
-            <tr className="divide-x divide-neutral-border-medium text-sm text-custom-text-100">
+            <tr className="divide-x divide-neutral-border-medium text-sm text-neutral-text-strong">
               <th scope="col" className="px-2.5 py-3 text-left font-medium">
                 {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
               </th>
@@ -64,7 +64,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
             {barGraphData.data.map((item, index) => (
               <tr
                 key={`table-row-${index}`}
-                className="divide-x divide-neutral-border-medium text-xs text-custom-text-200"
+                className="divide-x divide-neutral-border-medium text-xs text-neutral-text-medium"
               >
                 <td
                   className={`flex items-center gap-2 whitespace-nowrap px-2.5 py-2 font-medium ${
diff --git a/web/components/analytics/project-modal/header.tsx b/web/components/analytics/project-modal/header.tsx
index 654ad83b2..8c0729758 100644
--- a/web/components/analytics/project-modal/header.tsx
+++ b/web/components/analytics/project-modal/header.tsx
@@ -19,14 +19,14 @@ export const ProjectAnalyticsModalHeader: React.FC<Props> = observer((props) =>
       <div className="flex items-center gap-2">
         <button
           type="button"
-          className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
+          className="grid place-items-center p-1 text-neutral-text-medium hover:text-neutral-text-strong"
           onClick={() => setFullScreen((prevData) => !prevData)}
         >
           {fullScreen ? <Shrink size={14} strokeWidth={2} /> : <Expand size={14} strokeWidth={2} />}
         </button>
         <button
           type="button"
-          className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
+          className="grid place-items-center p-1 text-neutral-text-medium hover:text-neutral-text-strong"
           onClick={handleClose}
         >
           <X size={14} strokeWidth={2} />
diff --git a/web/components/analytics/scope-and-demand/demand.tsx b/web/components/analytics/scope-and-demand/demand.tsx
index 9baffd055..696da56f4 100644
--- a/web/components/analytics/scope-and-demand/demand.tsx
+++ b/web/components/analytics/scope-and-demand/demand.tsx
@@ -13,7 +13,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
   <div className="space-y-3 rounded-[10px] border border-neutral-border-medium p-3">
     <h5 className="text-xs text-red-500">DEMAND</h5>
     <div>
-      <h4 className="text-base font-medium text-custom-text-100">Total open tasks</h4>
+      <h4 className="text-base font-medium text-neutral-text-strong">Total open tasks</h4>
       <h3 className="mt-1 text-xl font-semibold">{defaultAnalytics.open_issues}</h3>
     </div>
     <div className="space-y-6">
@@ -31,11 +31,11 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
                   }}
                 />
                 <h6 className="capitalize">{group.state_group}</h6>
-                <span className="ml-1 rounded-3xl bg-neutral-component-surface-dark px-2 py-0.5 text-[0.65rem] text-custom-text-200">
+                <span className="ml-1 rounded-3xl bg-neutral-component-surface-dark px-2 py-0.5 text-[0.65rem] text-neutral-text-medium">
                   {group.state_count}
                 </span>
               </div>
-              <p className="text-custom-text-200">{percentage}%</p>
+              <p className="text-neutral-text-medium">{percentage}%</p>
             </div>
             <div className="bar relative h-1 w-full rounded bg-neutral-component-surface-dark">
               <div
@@ -51,7 +51,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
       })}
     </div>
     <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-neutral-border-medium bg-neutral-component-surface-dark p-2 text-xs">
-      <p className="flex items-center gap-1 text-custom-text-200">
+      <p className="flex items-center gap-1 text-neutral-text-medium">
         <Triangle className="h-4 w-4" />
         <span>Estimate Demand:</span>
       </p>
diff --git a/web/components/analytics/scope-and-demand/leaderboard.tsx b/web/components/analytics/scope-and-demand/leaderboard.tsx
index c481ff6f0..9f079fee3 100644
--- a/web/components/analytics/scope-and-demand/leaderboard.tsx
+++ b/web/components/analytics/scope-and-demand/leaderboard.tsx
@@ -44,7 +44,7 @@ export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyState
                   {user.display_name !== "" ? user?.display_name?.[0] : "?"}
                 </div>
               )}
-              <span className="break-words text-custom-text-200">
+              <span className="break-words text-neutral-text-medium">
                 {user.display_name !== "" ? `${user.display_name}` : "No assignee"}
               </span>
             </div>
diff --git a/web/components/analytics/scope-and-demand/scope-and-demand.tsx b/web/components/analytics/scope-and-demand/scope-and-demand.tsx
index 0f9e2c712..1a8bd6f7b 100644
--- a/web/components/analytics/scope-and-demand/scope-and-demand.tsx
+++ b/web/components/analytics/scope-and-demand/scope-and-demand.tsx
@@ -92,7 +92,7 @@ export const ScopeAndDemand: React.FC<Props> = (props) => {
         )
       ) : (
         <div className="grid h-full place-items-center p-5">
-          <div className="space-y-4 text-custom-text-200">
+          <div className="space-y-4 text-neutral-text-medium">
             <p className="text-sm">There was some error in fetching the data.</p>
             <div className="flex items-center justify-center gap-2">
               <Button variant="primary" onClick={() => mutateDefaultAnalytics()}>
diff --git a/web/components/analytics/scope-and-demand/scope.tsx b/web/components/analytics/scope-and-demand/scope.tsx
index fd1571c4e..886153d37 100644
--- a/web/components/analytics/scope-and-demand/scope.tsx
+++ b/web/components/analytics/scope-and-demand/scope.tsx
@@ -30,7 +30,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
 
               return (
                 <div className="rounded-md border border-neutral-border-medium bg-neutral-component-surface-dark p-2 text-xs">
-                  <span className="font-medium text-custom-text-200">
+                  <span className="font-medium text-neutral-text-medium">
                     {assignee ? assignee.assignees__display_name : "No assignee"}:{" "}
                   </span>
                   {datum.value}
diff --git a/web/components/analytics/scope-and-demand/year-wise-issues.tsx b/web/components/analytics/scope-and-demand/year-wise-issues.tsx
index dbf8bd385..33e07bf6c 100644
--- a/web/components/analytics/scope-and-demand/year-wise-issues.tsx
+++ b/web/components/analytics/scope-and-demand/year-wise-issues.tsx
@@ -37,7 +37,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
         sliceTooltip={(datum) => (
           <div className="rounded-md border border-neutral-border-medium bg-neutral-component-surface-dark p-2 text-xs">
             {datum.slice.points[0].data.yFormatted}
-            <span className="text-custom-text-200"> issues closed in </span>
+            <span className="text-neutral-text-medium"> issues closed in </span>
             {datum.slice.points[0].data.xFormatted}
           </div>
         )}
diff --git a/web/components/api-token/delete-token-modal.tsx b/web/components/api-token/delete-token-modal.tsx
index 4909cd3cc..8a93494c9 100644
--- a/web/components/api-token/delete-token-modal.tsx
+++ b/web/components/api-token/delete-token-modal.tsx
@@ -97,12 +97,12 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-neutral-border-medium bg-neutral-component-surface-light text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-3 p-4">
                   <div className="flex w-full items-center justify-start">
-                    <h3 className="text-lg font-medium leading-6 text-custom-text-100">
+                    <h3 className="text-lg font-medium leading-6 text-neutral-text-strong">
                       Are you sure you want to delete the token?
                     </h3>
                   </div>
                   <span>
-                    <p className="text-sm text-custom-text-400">
+                    <p className="text-sm text-neutral-text-subtle">
                       Any application using this token will no longer have the access to Plane data. This action cannot
                       be undone.
                     </p>
diff --git a/web/components/api-token/empty-state.tsx b/web/components/api-token/empty-state.tsx
index 8894e3462..402156071 100644
--- a/web/components/api-token/empty-state.tsx
+++ b/web/components/api-token/empty-state.tsx
@@ -19,7 +19,7 @@ export const ApiTokenEmptyState: React.FC<Props> = (props) => {
       <div className="flex w-full flex-col items-center text-center">
         <Image src={emptyApiTokens} className="w-52 sm:w-60" alt="empty" />
         <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">No API tokens</h6>
-        <p className="mb-7 text-custom-text-300 sm:mb-8">
+        <p className="mb-7 text-neutral-text-medium sm:mb-8">
           Create API tokens for safe and easy data sharing with external apps, maintaining control and security.
         </p>
         <Button className="flex items-center gap-1.5" onClick={onClick}>
diff --git a/web/components/api-token/modal/form.tsx b/web/components/api-token/modal/form.tsx
index cd58b90cd..c13d501b1 100644
--- a/web/components/api-token/modal/form.tsx
+++ b/web/components/api-token/modal/form.tsx
@@ -115,7 +115,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
   return (
     <form onSubmit={handleSubmit(handleFormSubmit)}>
       <div className="space-y-4">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">Create token</h3>
+        <h3 className="text-lg font-medium leading-6 text-neutral-text-strong">Create token</h3>
         <div className="space-y-3">
           <div>
             <Controller
@@ -168,7 +168,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                       customButton={
                         <div
                           className={`flex items-center gap-2 rounded border-[0.5px] border-neutral-border-medium px-2 py-1 ${
-                            neverExpires ? "text-custom-text-400" : ""
+                            neverExpires ? "text-neutral-text-subtle" : ""
                           }`}
                         >
                           <Calendar className="h-3 w-3" />
@@ -204,7 +204,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                         customDate ? "w-[7.5rem]" : ""
                       } ${
                         neverExpires
-                          ? "!cursor-not-allowed text-custom-text-400"
+                          ? "!cursor-not-allowed text-neutral-text-subtle"
                           : "hover:bg-neutral-component-surface-dark"
                       }`}
                     >
@@ -217,7 +217,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
               )}
             </div>
             {!neverExpires && (
-              <span className="text-xs text-custom-text-400">
+              <span className="text-xs text-neutral-text-subtle">
                 {watch("expired_at") === "custom"
                   ? customDate
                     ? `Expires ${renderFormattedDate(customDate)}`
diff --git a/web/components/api-token/modal/generated-token-details.tsx b/web/components/api-token/modal/generated-token-details.tsx
index 1e5548d93..e29a6efa0 100644
--- a/web/components/api-token/modal/generated-token-details.tsx
+++ b/web/components/api-token/modal/generated-token-details.tsx
@@ -32,8 +32,8 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
   return (
     <div>
       <div className="space-y-3">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">Key created</h3>
-        <p className="text-sm text-custom-text-400">
+        <h3 className="text-lg font-medium leading-6 text-neutral-text-strong">Key created</h3>
+        <p className="text-sm text-neutral-text-subtle">
           Copy and save this secret key in Plane Pages. You can{"'"}t see this key after you hit Close. A CSV file
           containing the key has been downloaded.
         </p>
@@ -45,11 +45,11 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
       >
         {tokenDetails.token}
         <Tooltip tooltipContent="Copy secret key">
-          <Copy className="h-4 w-4 text-custom-text-400" />
+          <Copy className="h-4 w-4 text-neutral-text-subtle" />
         </Tooltip>
       </button>
       <div className="mt-6 flex items-center justify-between">
-        <p className="text-xs text-custom-text-400">
+        <p className="text-xs text-neutral-text-subtle">
           {tokenDetails.expired_at ? `Expires ${renderFormattedDate(tokenDetails.expired_at)}` : "Never expires"}
         </p>
         <Button variant="neutral-primary" size="sm" onClick={handleClose}>
diff --git a/web/components/api-token/token-list-item.tsx b/web/components/api-token/token-list-item.tsx
index 717dc8f5c..a25f2a81b 100644
--- a/web/components/api-token/token-list-item.tsx
+++ b/web/components/api-token/token-list-item.tsx
@@ -36,7 +36,7 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
             className={`${
               token.is_active
                 ? "bg-green-500/10 text-green-500"
-                : "bg-neutral-component-surface-dark text-custom-text-400"
+                : "bg-neutral-component-surface-dark text-neutral-text-subtle"
             } ml-2 flex h-4 max-h-fit items-center rounded-sm px-2 text-xs font-medium`}
           >
             {token.is_active ? "Active" : "Expired"}
@@ -46,7 +46,7 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
           {token.description.trim() !== "" && (
             <p className="mb-1 max-w-[70%] break-words text-sm">{token.description}</p>
           )}
-          <p className="mb-1 text-xs leading-6 text-custom-text-400">
+          <p className="mb-1 text-xs leading-6 text-neutral-text-subtle">
             {token.is_active
               ? token.expired_at
                 ? `Expires ${renderFormattedDate(token.expired_at!)}`
diff --git a/web/components/auth-screens/not-authorized-view.tsx b/web/components/auth-screens/not-authorized-view.tsx
index 42a92559e..e672416ce 100644
--- a/web/components/auth-screens/not-authorized-view.tsx
+++ b/web/components/auth-screens/not-authorized-view.tsx
@@ -33,14 +33,14 @@ export const NotAuthorizedView: React.FC<Props> = observer((props) => {
             alt="ProjectSettingImg"
           />
         </div>
-        <h1 className="text-xl font-medium text-custom-text-100">Oops! You are not authorized to view this page</h1>
+        <h1 className="text-xl font-medium text-neutral-text-strong">Oops! You are not authorized to view this page</h1>
 
-        <div className="w-full max-w-md text-base text-custom-text-200">
+        <div className="w-full max-w-md text-base text-neutral-text-medium">
           {currentUser ? (
             <p>
               You have signed in as {currentUser.email}. <br />
               <Link href={`/?next_path=${next_path}`}>
-                <span className="font-medium text-custom-text-100">Sign in</span>
+                <span className="font-medium text-neutral-text-strong">Sign in</span>
               </Link>{" "}
               with different account that has access to this page.
             </p>
@@ -48,7 +48,7 @@ export const NotAuthorizedView: React.FC<Props> = observer((props) => {
             <p>
               You need to{" "}
               <Link href={`/?next_path=${next_path}`}>
-                <span className="font-medium text-custom-text-100">Sign in</span>
+                <span className="font-medium text-neutral-text-strong">Sign in</span>
               </Link>{" "}
               with an account that has access to this page.
             </p>
diff --git a/web/components/auth-screens/project/join-project.tsx b/web/components/auth-screens/project/join-project.tsx
index 6e1a13e2b..960c6a383 100644
--- a/web/components/auth-screens/project/join-project.tsx
+++ b/web/components/auth-screens/project/join-project.tsx
@@ -37,9 +37,9 @@ export const JoinProject: React.FC = () => {
       <div className="h-44 w-72">
         <Image src={JoinProjectImg} height="176" width="288" alt="JoinProject" />
       </div>
-      <h1 className="text-xl font-medium text-custom-text-100">You are not a member of this project</h1>
+      <h1 className="text-xl font-medium text-neutral-text-strong">You are not a member of this project</h1>
 
-      <div className="w-full max-w-md text-base text-custom-text-200">
+      <div className="w-full max-w-md text-base text-neutral-text-medium">
         <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.
         </p>
diff --git a/web/components/auth-screens/workspace/not-a-member.tsx b/web/components/auth-screens/workspace/not-a-member.tsx
index 502f06115..86e522caf 100644
--- a/web/components/auth-screens/workspace/not-a-member.tsx
+++ b/web/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-custom-text-200">
+          <p className="mx-auto w-1/2 text-sm text-neutral-text-medium">
             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/web/components/automation/auto-archive-automation.tsx b/web/components/automation/auto-archive-automation.tsx
index 2772d8e9e..efe84fa5a 100644
--- a/web/components/automation/auto-archive-automation.tsx
+++ b/web/components/automation/auto-archive-automation.tsx
@@ -43,11 +43,11 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
         <div className="flex items-center justify-between">
           <div className="flex items-start gap-3">
             <div className="flex items-center justify-center rounded bg-neutral-component-surface-medium p-3">
-              <ArchiveRestore className="h-4 w-4 flex-shrink-0 text-custom-text-100" />
+              <ArchiveRestore className="h-4 w-4 flex-shrink-0 text-neutral-text-strong" />
             </div>
             <div className="">
               <h4 className="text-sm font-medium">Auto-archive closed issues</h4>
-              <p className="text-sm tracking-tight text-custom-text-200">
+              <p className="text-sm tracking-tight text-neutral-text-medium">
                 Plane will auto archive issues that have been completed or cancelled.
               </p>
             </div>
@@ -90,7 +90,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
 
                       <button
                         type="button"
-                        className="flex w-full select-none items-center rounded px-1 py-1.5 text-sm text-custom-text-200 hover:bg-neutral-component-surface-dark"
+                        className="flex w-full select-none items-center rounded px-1 py-1.5 text-sm text-neutral-text-medium hover:bg-neutral-component-surface-dark"
                         onClick={() => setmonthModal(true)}
                       >
                         Customise Time Range
diff --git a/web/components/automation/auto-close-automation.tsx b/web/components/automation/auto-close-automation.tsx
index 5c4c7a4b7..6e66b8faf 100644
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@@ -73,7 +73,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
             </div>
             <div className="">
               <h4 className="text-sm font-medium">Auto-close issues</h4>
-              <p className="text-sm tracking-tight text-custom-text-200">
+              <p className="text-sm tracking-tight text-neutral-text-medium">
                 Plane will automatically close issue that haven{"'"}t been completed or cancelled.
               </p>
             </div>
@@ -116,7 +116,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                         ))}
                         <button
                           type="button"
-                          className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-neutral-component-surface-dark"
+                          className="flex w-full select-none items-center rounded px-1 py-1.5 text-neutral-text-medium hover:bg-neutral-component-surface-dark"
                           onClick={() => setmonthModal(true)}
                         >
                           Customize Time Range
@@ -148,11 +148,11 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                               width="16px"
                             />
                           ) : (
-                            <DoubleCircleIcon className="h-3.5 w-3.5 text-custom-text-200" />
+                            <DoubleCircleIcon className="h-3.5 w-3.5 text-neutral-text-medium" />
                           )}
                           {selectedOption?.name
                             ? selectedOption.name
-                            : currentDefaultState?.name ?? <span className="text-custom-text-200">State</span>}
+                            : currentDefaultState?.name ?? <span className="text-neutral-text-medium">State</span>}
                         </div>
                       }
                       onChange={(val: string) => {
diff --git a/web/components/automation/select-month-modal.tsx b/web/components/automation/select-month-modal.tsx
index 27f98c410..f18834e08 100644
--- a/web/components/automation/select-month-modal.tsx
+++ b/web/components/automation/select-month-modal.tsx
@@ -71,7 +71,7 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
               <Dialog.Panel className="relative transform rounded-lg bg-neutral-component-surface-light px-4 pb-4 pt-5 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                       Customise Time Range
                     </Dialog.Title>
                     <div className="mt-8 flex items-center gap-2">
@@ -99,7 +99,9 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
                                     placeholder="Enter Months"
                                     className="w-full border-neutral-border-medium"
                                   />
-                                  <span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
+                                  <span className="absolute right-8 top-2.5 text-sm text-neutral-text-medium">
+                                    Months
+                                  </span>
                                 </div>
                               )}
                             />
@@ -131,7 +133,9 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
                                     placeholder="Enter Months"
                                     className="w-full border-neutral-border-medium"
                                   />
-                                  <span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
+                                  <span className="absolute right-8 top-2.5 text-sm text-neutral-text-medium">
+                                    Months
+                                  </span>
                                 </div>
                               )}
                             />
diff --git a/web/components/breadcrumbs/index.tsx b/web/components/breadcrumbs/index.tsx
index af33965d2..b8d3cb8e0 100644
--- a/web/components/breadcrumbs/index.tsx
+++ b/web/components/breadcrumbs/index.tsx
@@ -19,7 +19,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
           className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-sidebar-neutral-border-medium text-center text-sm hover:bg-sidebar-neutral-component-surface-medium"
           onClick={() => router.back()}
         >
-          <MoveLeft className="h-4 w-4 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100" />
+          <MoveLeft className="h-4 w-4 text-sidebar-neutral-text-medium group-hover:text-sidebar-neutral-text-strong" />
         </button>
         {children}
       </div>
diff --git a/web/components/command-palette/actions/help-actions.tsx b/web/components/command-palette/actions/help-actions.tsx
index 4aaaab33a..ae5554805 100644
--- a/web/components/command-palette/actions/help-actions.tsx
+++ b/web/components/command-palette/actions/help-actions.tsx
@@ -25,7 +25,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <Rocket className="h-3.5 w-3.5" />
           Open keyboard shortcuts
         </div>
@@ -37,7 +37,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <FileText className="h-3.5 w-3.5" />
           Open Plane documentation
         </div>
@@ -49,7 +49,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <DiscordIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
           Join our Discord
         </div>
@@ -61,7 +61,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <GithubIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
           Report a bug
         </div>
@@ -73,7 +73,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <MessageSquare className="h-3.5 w-3.5" />
           Chat with us
         </div>
diff --git a/web/components/command-palette/actions/issue-actions/actions-list.tsx b/web/components/command-palette/actions/issue-actions/actions-list.tsx
index 55f72c85d..5360aa4c7 100644
--- a/web/components/command-palette/actions/issue-actions/actions-list.tsx
+++ b/web/components/command-palette/actions/issue-actions/actions-list.tsx
@@ -94,7 +94,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <DoubleCircleIcon className="h-3.5 w-3.5" />
           Change state...
         </div>
@@ -107,7 +107,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <Signal className="h-3.5 w-3.5" />
           Change priority...
         </div>
@@ -120,7 +120,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <UserGroupIcon className="h-3.5 w-3.5" />
           Assign to...
         </div>
@@ -132,7 +132,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           {issueDetails?.assignee_ids.includes(currentUser?.id ?? "") ? (
             <>
               <UserMinus2 className="h-3.5 w-3.5" />
@@ -147,7 +147,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
         </div>
       </Command.Item>
       <Command.Item onSelect={deleteIssue} className="focus:outline-none">
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <Trash2 className="h-3.5 w-3.5" />
           Delete issue
         </div>
@@ -159,7 +159,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <LinkIcon className="h-3.5 w-3.5" />
           Copy issue URL
         </div>
diff --git a/web/components/command-palette/actions/project-actions.tsx b/web/components/command-palette/actions/project-actions.tsx
index bdd08a0d8..28f3a3008 100644
--- a/web/components/command-palette/actions/project-actions.tsx
+++ b/web/components/command-palette/actions/project-actions.tsx
@@ -28,7 +28,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
           }}
           className="focus:outline-none"
         >
-          <div className="flex items-center gap-2 text-custom-text-200">
+          <div className="flex items-center gap-2 text-neutral-text-medium">
             <ContrastIcon className="h-3.5 w-3.5" />
             Create new cycle
           </div>
@@ -44,7 +44,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
           }}
           className="focus:outline-none"
         >
-          <div className="flex items-center gap-2 text-custom-text-200">
+          <div className="flex items-center gap-2 text-neutral-text-medium">
             <DiceIcon className="h-3.5 w-3.5" />
             Create new module
           </div>
@@ -60,7 +60,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
           }}
           className="focus:outline-none"
         >
-          <div className="flex items-center gap-2 text-custom-text-200">
+          <div className="flex items-center gap-2 text-neutral-text-medium">
             <PhotoFilterIcon className="h-3.5 w-3.5" />
             Create new view
           </div>
@@ -76,7 +76,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
           }}
           className="focus:outline-none"
         >
-          <div className="flex items-center gap-2 text-custom-text-200">
+          <div className="flex items-center gap-2 text-neutral-text-medium">
             <FileText className="h-3.5 w-3.5" />
             Create new page
           </div>
diff --git a/web/components/command-palette/actions/search-results.tsx b/web/components/command-palette/actions/search-results.tsx
index 769a26be7..f99e1c0d9 100644
--- a/web/components/command-palette/actions/search-results.tsx
+++ b/web/components/command-palette/actions/search-results.tsx
@@ -34,7 +34,7 @@ export const CommandPaletteSearchResults: React.FC<Props> = (props) => {
                   value={`${key}-${item?.id}-${item.name}-${item.project__identifier ?? ""}-${item.sequence_id ?? ""}`}
                   className="focus:outline-none"
                 >
-                  <div className="flex items-center gap-2 overflow-hidden text-custom-text-200">
+                  <div className="flex items-center gap-2 overflow-hidden text-neutral-text-medium">
                     {currentSection.icon}
                     <p className="block flex-1 truncate">{currentSection.itemName(item)}</p>
                   </div>
diff --git a/web/components/command-palette/actions/theme-actions.tsx b/web/components/command-palette/actions/theme-actions.tsx
index 976a63c87..785a71c4b 100644
--- a/web/components/command-palette/actions/theme-actions.tsx
+++ b/web/components/command-palette/actions/theme-actions.tsx
@@ -52,8 +52,8 @@ export const CommandPaletteThemeActions: FC<Props> = observer((props) => {
           }}
           className="focus:outline-none"
         >
-          <div className="flex items-center gap-2 text-custom-text-200">
-            <Settings className="h-4 w-4 text-custom-text-200" />
+          <div className="flex items-center gap-2 text-neutral-text-medium">
+            <Settings className="h-4 w-4 text-neutral-text-medium" />
             {theme.label}
           </div>
         </Command.Item>
diff --git a/web/components/command-palette/actions/workspace-settings-actions.tsx b/web/components/command-palette/actions/workspace-settings-actions.tsx
index 1f05234f4..0a7db888c 100644
--- a/web/components/command-palette/actions/workspace-settings-actions.tsx
+++ b/web/components/command-palette/actions/workspace-settings-actions.tsx
@@ -38,8 +38,8 @@ export const CommandPaletteWorkspaceSettingsActions: React.FC<Props> = (props) =
               className="focus:outline-none"
             >
               <Link href={`/${workspaceSlug}${setting.href}`}>
-                <div className="flex items-center gap-2 text-custom-text-200">
-                  <setting.Icon className="h-4 w-4 text-custom-text-200" />
+                <div className="flex items-center gap-2 text-neutral-text-medium">
+                  <setting.Icon className="h-4 w-4 text-neutral-text-medium" />
                   {setting.label}
                 </div>
               </Link>
diff --git a/web/components/command-palette/command-modal.tsx b/web/components/command-palette/command-modal.tsx
index 1f74a7e9e..b83b68301 100644
--- a/web/components/command-palette/command-modal.tsx
+++ b/web/components/command-palette/command-modal.tsx
@@ -191,7 +191,7 @@ export const CommandModal: React.FC = observer(() => {
                     }`}
                   >
                     {issueDetails && (
-                      <div className="overflow-hidden truncate rounded-md bg-neutral-component-surface-dark p-2 text-xs font-medium text-custom-text-200">
+                      <div className="overflow-hidden truncate rounded-md bg-neutral-component-surface-dark p-2 text-xs font-medium text-neutral-text-medium">
                         {projectDetails?.identifier}-{issueDetails.sequence_id} {issueDetails.name}
                       </div>
                     )}
@@ -215,12 +215,12 @@ export const CommandModal: React.FC = observer(() => {
                   </div>
                   <div className="relative">
                     <Search
-                      className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-custom-text-200"
+                      className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-neutral-text-medium"
                       aria-hidden="true"
                       strokeWidth={2}
                     />
                     <Command.Input
-                      className="w-full border-0 border-b border-neutral-border-medium bg-transparent p-4 pl-11 text-sm text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0"
+                      className="w-full border-0 border-b border-neutral-border-medium bg-transparent p-4 pl-11 text-sm text-neutral-text-strong outline-none placeholder:text-neutral-text-subtle focus:ring-0"
                       placeholder={placeholder}
                       value={searchTerm}
                       onValueChange={(e) => setSearchTerm(e)}
@@ -231,7 +231,7 @@ export const CommandModal: React.FC = observer(() => {
 
                   <Command.List className="max-h-96 overflow-scroll p-2">
                     {searchTerm !== "" && (
-                      <h5 className="mx-[3px] my-4 text-xs text-custom-text-100">
+                      <h5 className="mx-[3px] my-4 text-xs text-neutral-text-strong">
                         Search results for{" "}
                         <span className="font-medium">
                           {'"'}
@@ -243,7 +243,7 @@ export const CommandModal: React.FC = observer(() => {
                     )}
 
                     {!isLoading && resultsCount === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
-                      <div className="my-4 text-center text-sm text-custom-text-200">No results found.</div>
+                      <div className="my-4 text-center text-sm text-neutral-text-medium">No results found.</div>
                     )}
 
                     {(isLoading || isSearching) && (
@@ -283,7 +283,7 @@ export const CommandModal: React.FC = observer(() => {
                             }}
                             className="focus:bg-neutral-component-surface-dark"
                           >
-                            <div className="flex items-center gap-2 text-custom-text-200">
+                            <div className="flex items-center gap-2 text-neutral-text-medium">
                               <LayersIcon className="h-3.5 w-3.5" />
                               Create new issue
                             </div>
@@ -301,7 +301,7 @@ export const CommandModal: React.FC = observer(() => {
                               }}
                               className="focus:outline-none"
                             >
-                              <div className="flex items-center gap-2 text-custom-text-200">
+                              <div className="flex items-center gap-2 text-neutral-text-medium">
                                 <FolderPlus className="h-3.5 w-3.5" />
                                 Create new project
                               </div>
@@ -322,7 +322,7 @@ export const CommandModal: React.FC = observer(() => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-custom-text-200">
+                            <div className="flex items-center gap-2 text-neutral-text-medium">
                               <Settings className="h-3.5 w-3.5" />
                               Search settings...
                             </div>
@@ -330,7 +330,7 @@ export const CommandModal: React.FC = observer(() => {
                         </Command.Group>
                         <Command.Group heading="Account">
                           <Command.Item onSelect={createNewWorkspace} className="focus:outline-none">
-                            <div className="flex items-center gap-2 text-custom-text-200">
+                            <div className="flex items-center gap-2 text-neutral-text-medium">
                               <FolderPlus className="h-3.5 w-3.5" />
                               Create new workspace
                             </div>
@@ -343,7 +343,7 @@ export const CommandModal: React.FC = observer(() => {
                             }}
                             className="focus:outline-none"
                           >
-                            <div className="flex items-center gap-2 text-custom-text-200">
+                            <div className="flex items-center gap-2 text-neutral-text-medium">
                               <Settings className="h-3.5 w-3.5" />
                               Change interface theme...
                             </div>
diff --git a/web/components/command-palette/helpers.tsx b/web/components/command-palette/helpers.tsx
index 44fc55bbe..703909b12 100644
--- a/web/components/command-palette/helpers.tsx
+++ b/web/components/command-palette/helpers.tsx
@@ -20,7 +20,7 @@ export const commandGroups: {
     icon: <ContrastIcon className="h-3 w-3" />,
     itemName: (cycle: IWorkspaceDefaultSearchResult) => (
       <h6>
-        <span className="text-xs text-custom-text-300">{cycle.project__identifier}</span> {cycle.name}
+        <span className="text-xs text-neutral-text-medium">{cycle.project__identifier}</span> {cycle.name}
       </h6>
     ),
     path: (cycle: IWorkspaceDefaultSearchResult) =>
@@ -31,7 +31,7 @@ export const commandGroups: {
     icon: <LayersIcon className="h-3 w-3" />,
     itemName: (issue: IWorkspaceIssueSearchResult) => (
       <h6>
-        <span className="text-xs text-custom-text-300">
+        <span className="text-xs text-neutral-text-medium">
           {issue.project__identifier}-{issue.sequence_id}
         </span>{" "}
         {issue.name}
@@ -45,7 +45,7 @@ export const commandGroups: {
     icon: <PhotoFilterIcon className="h-3 w-3" />,
     itemName: (view: IWorkspaceDefaultSearchResult) => (
       <h6>
-        <span className="text-xs text-custom-text-300">{view.project__identifier}</span> {view.name}
+        <span className="text-xs text-neutral-text-medium">{view.project__identifier}</span> {view.name}
       </h6>
     ),
     path: (view: IWorkspaceDefaultSearchResult) =>
@@ -56,7 +56,7 @@ export const commandGroups: {
     icon: <DiceIcon className="h-3 w-3" />,
     itemName: (module: IWorkspaceDefaultSearchResult) => (
       <h6>
-        <span className="text-xs text-custom-text-300">{module.project__identifier}</span> {module.name}
+        <span className="text-xs text-neutral-text-medium">{module.project__identifier}</span> {module.name}
       </h6>
     ),
     path: (module: IWorkspaceDefaultSearchResult) =>
@@ -67,7 +67,7 @@ export const commandGroups: {
     icon: <FileText className="h-3 w-3" />,
     itemName: (page: IWorkspaceDefaultSearchResult) => (
       <h6>
-        <span className="text-xs text-custom-text-300">{page.project__identifier}</span> {page.name}
+        <span className="text-xs text-neutral-text-medium">{page.project__identifier}</span> {page.name}
       </h6>
     ),
     path: (page: IWorkspaceDefaultSearchResult) =>
diff --git a/web/components/command-palette/shortcuts-modal/commands-list.tsx b/web/components/command-palette/shortcuts-modal/commands-list.tsx
index e100501d0..351520455 100644
--- a/web/components/command-palette/shortcuts-modal/commands-list.tsx
+++ b/web/components/command-palette/shortcuts-modal/commands-list.tsx
@@ -60,16 +60,16 @@ export const ShortcutCommandsList: React.FC<Props> = (props) => {
                 {category.shortcuts.map((shortcut) => (
                   <div key={shortcut.keys} className="mt-1">
                     <div className="flex items-center justify-between">
-                      <h4 className="text-xs text-custom-text-200">{shortcut.description}</h4>
+                      <h4 className="text-xs text-neutral-text-medium">{shortcut.description}</h4>
                       <div className="flex items-center gap-x-1.5">
                         {shortcut.keys.split(",").map((key) => (
                           <div key={key} className="flex items-center gap-1">
                             {key === "Ctrl" ? (
                               <div className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-medium px-1.5">
-                                <Command className="h-2.5 w-2.5 text-custom-text-200" />
+                                <Command className="h-2.5 w-2.5 text-neutral-text-medium" />
                               </div>
                             ) : (
-                              <kbd className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-medium px-1.5 text-[10px] text-custom-text-200">
+                              <kbd className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-medium px-1.5 text-[10px] text-neutral-text-medium">
                                 {key}
                               </kbd>
                             )}
@@ -84,7 +84,7 @@ export const ShortcutCommandsList: React.FC<Props> = (props) => {
           );
         })
       ) : (
-        <p className="flex justify-center text-center text-sm text-custom-text-200">
+        <p className="flex justify-center text-center text-sm text-neutral-text-medium">
           No shortcuts found for{" "}
           <span className="font-semibold italic">
             {`"`}
diff --git a/web/components/command-palette/shortcuts-modal/modal.tsx b/web/components/command-palette/shortcuts-modal/modal.tsx
index 9a3a15abd..cc475b33e 100644
--- a/web/components/command-palette/shortcuts-modal/modal.tsx
+++ b/web/components/command-palette/shortcuts-modal/modal.tsx
@@ -52,11 +52,14 @@ export const ShortcutsModal: FC<Props> = (props) => {
                   <Dialog.Title as="h3" className="flex justify-between">
                     <span className="text-lg font-medium">Keyboard shortcuts</span>
                     <button type="button" onClick={handleClose}>
-                      <X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" aria-hidden="true" />
+                      <X
+                        className="h-4 w-4 text-neutral-text-medium hover:text-neutral-text-strong"
+                        aria-hidden="true"
+                      />
                     </button>
                   </Dialog.Title>
                   <div className="flex w-full items-center rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-medium px-2">
-                    <Search className="h-3.5 w-3.5 text-custom-text-200" />
+                    <Search className="h-3.5 w-3.5 text-neutral-text-medium" />
                     <Input
                       id="search"
                       name="search"
@@ -64,7 +67,7 @@ export const ShortcutsModal: FC<Props> = (props) => {
                       value={query}
                       onChange={(e) => setQuery(e.target.value)}
                       placeholder="Search for shortcuts"
-                      className="w-full border-none bg-transparent py-1 text-xs text-custom-text-200 outline-none"
+                      className="w-full border-none bg-transparent py-1 text-xs text-neutral-text-medium outline-none"
                       autoFocus
                       tabIndex={1}
                     />
diff --git a/web/components/common/breadcrumb-link.tsx b/web/components/common/breadcrumb-link.tsx
index e5f1dbce6..7b82dffd9 100644
--- a/web/components/common/breadcrumb-link.tsx
+++ b/web/components/common/breadcrumb-link.tsx
@@ -15,7 +15,7 @@ export const BreadcrumbLink: React.FC<Props> = (props) => {
         <div className="flex flex-wrap items-center gap-2.5">
           {href ? (
             <Link
-              className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
+              className="flex items-center gap-1 text-sm font-medium text-neutral-text-medium hover:text-neutral-text-strong"
               href={href}
             >
               {icon && (
@@ -24,7 +24,7 @@ export const BreadcrumbLink: React.FC<Props> = (props) => {
               <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
             </Link>
           ) : (
-            <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
+            <div className="flex cursor-default items-center gap-1 text-sm font-medium text-neutral-text-strong">
               {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
               <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
             </div>
diff --git a/web/components/common/empty-state.tsx b/web/components/common/empty-state.tsx
index d7ae991db..4ef522ad2 100644
--- a/web/components/common/empty-state.tsx
+++ b/web/components/common/empty-state.tsx
@@ -30,7 +30,7 @@ export const EmptyState: React.FC<Props> = ({
     <div className="flex w-full flex-col items-center text-center">
       <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />
       <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">{title}</h6>
-      {description && <p className="mb-7 px-5 text-custom-text-300 sm:mb-8">{description}</p>}
+      {description && <p className="mb-7 px-5 text-neutral-text-medium sm:mb-8">{description}</p>}
       <div className="flex items-center gap-4">
         {primaryButton && (
           <Button
diff --git a/web/components/common/product-updates-modal.tsx b/web/components/common/product-updates-modal.tsx
index d10da22f8..ffeedc416 100644
--- a/web/components/common/product-updates-modal.tsx
+++ b/web/components/common/product-updates-modal.tsx
@@ -55,7 +55,10 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                     <span>Product Updates</span>
                     <span>
                       <button type="button" onClick={() => setIsOpen(false)}>
-                        <X className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100" aria-hidden="true" />
+                        <X
+                          className="h-6 w-6 text-neutral-text-medium hover:text-neutral-text-strong"
+                          aria-hidden="true"
+                        />
                       </button>
                     </span>
                   </Dialog.Title>
@@ -63,7 +66,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                     <div className="mt-4 h-full space-y-4 overflow-y-auto">
                       {updates.map((item, index) => (
                         <React.Fragment key={item.id}>
-                          <div className="flex items-center gap-3 text-xs text-custom-text-200">
+                          <div className="flex items-center gap-3 text-xs text-neutral-text-medium">
                             <span className="flex items-center rounded-full border border-neutral-border-medium bg-neutral-component-surface-medium px-3 py-1.5 text-xs">
                               {item.tag_name}
                             </span>
diff --git a/web/components/core/activity.tsx b/web/components/core/activity.tsx
index ea2363492..506fe5b83 100644
--- a/web/components/core/activity.tsx
+++ b/web/components/core/activity.tsx
@@ -40,13 +40,13 @@ export const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
           }`}`}
           target={activity.issue === null ? "_self" : "_blank"}
           rel={activity.issue === null ? "" : "noopener noreferrer"}
-          className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+          className="inline-flex items-center gap-1 font-medium text-neutral-text-strong hover:underline"
         >
           <span className="whitespace-nowrap">{`${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`}</span>{" "}
           <span className="font-normal">{activity.issue_detail?.name}</span>
         </a>
       ) : (
-        <span className="inline-flex items-center gap-1 font-medium text-custom-text-100 whitespace-nowrap">
+        <span className="inline-flex items-center gap-1 font-medium text-neutral-text-strong whitespace-nowrap">
           {" an Issue"}{" "}
         </span>
       )}
@@ -65,7 +65,7 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => {
       }`}
       target="_blank"
       rel="noopener noreferrer"
-      className="inline-flex items-center font-medium text-custom-text-100 hover:underline"
+      className="inline-flex items-center font-medium text-neutral-text-strong hover:underline"
     >
       {activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value}
     </a>
@@ -99,7 +99,7 @@ const EstimatePoint = observer((props: { point: string }) => {
   const estimateValue = getEstimatePointValue(Number(point), null);
 
   return (
-    <span className="font-medium text-custom-text-100">
+    <span className="font-medium text-neutral-text-strong">
       {areEstimatesEnabledForCurrentProject
         ? estimateValue
         : `${currentPoint} ${currentPoint > 1 ? "points" : "point"}`}
@@ -169,7 +169,7 @@ const activityDetails: {
               href={`${activity.new_value}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 font-medium text-neutral-text-strong hover:underline"
             >
               attachment
             </a>
@@ -264,7 +264,7 @@ const activityDetails: {
             added a new label{" "}
             <span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-neutral-border-medium px-2 py-0.5 text-xs">
               <LabelPill labelId={activity.new_identifier ?? ""} workspaceSlug={workspaceSlug} />
-              <span className="flex-shrink truncate font-medium text-custom-text-100">{activity.new_value}</span>
+              <span className="flex-shrink truncate font-medium text-neutral-text-strong">{activity.new_value}</span>
             </span>
             {showIssue && (
               <span className="">
@@ -280,7 +280,7 @@ const activityDetails: {
             removed the label{" "}
             <span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-neutral-border-medium px-2 py-0.5 text-xs">
               <LabelPill labelId={activity.old_identifier ?? ""} workspaceSlug={workspaceSlug} />
-              <span className="flex-shrink truncate font-medium text-custom-text-100">{activity.old_value}</span>
+              <span className="flex-shrink truncate font-medium text-neutral-text-strong">{activity.old_value}</span>
             </span>
             {showIssue && (
               <span>
@@ -303,7 +303,7 @@ const activityDetails: {
               href={`${activity.new_value}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 font-medium text-neutral-text-strong hover:underline"
             >
               link
             </a>
@@ -323,7 +323,7 @@ const activityDetails: {
               href={`${activity.old_value}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 font-medium text-neutral-text-strong hover:underline"
             >
               link
             </a>
@@ -343,7 +343,7 @@ const activityDetails: {
               href={`${activity.old_value}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 font-medium text-neutral-text-strong hover:underline"
             >
               link
             </a>
@@ -370,7 +370,7 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 truncate font-medium text-neutral-text-strong hover:underline"
             >
               <span className="truncate">{activity.new_value}</span>
             </a>
@@ -384,7 +384,7 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 truncate font-medium text-neutral-text-strong hover:underline"
             >
               <span className="truncate">{activity.new_value}</span>
             </a>
@@ -398,7 +398,7 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 truncate font-medium text-neutral-text-strong hover:underline"
             >
               <span className="truncate">{activity.old_value}</span>
             </a>
@@ -417,7 +417,7 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 truncate font-medium text-neutral-text-strong hover:underline"
             >
               <span className="truncate">{activity.new_value}</span>
             </a>
@@ -431,7 +431,7 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 truncate font-medium text-neutral-text-strong hover:underline"
             >
               <span className="truncate">{activity.new_value}</span>
             </a>
@@ -445,7 +445,7 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 truncate font-medium text-neutral-text-strong hover:underline"
             >
               <span className="truncate">{activity.old_value}</span>
             </a>
@@ -473,7 +473,7 @@ const activityDetails: {
       if (!activity.new_value)
         return (
           <>
-            removed the parent <span className="font-medium text-custom-text-100">{activity.old_value}</span>
+            removed the parent <span className="font-medium text-neutral-text-strong">{activity.old_value}</span>
             {showIssue && (
               <>
                 {" "}
@@ -485,7 +485,7 @@ const activityDetails: {
       else
         return (
           <>
-            set the parent to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+            set the parent to <span className="font-medium text-neutral-text-strong">{activity.new_value}</span>
             {showIssue && (
               <>
                 {" "}
@@ -501,7 +501,7 @@ const activityDetails: {
     message: (activity, showIssue) => (
       <>
         set the priority to{" "}
-        <span className="font-medium text-custom-text-100">
+        <span className="font-medium text-neutral-text-strong">
           {activity.new_value ? capitalizeFirstLetter(activity.new_value) : "None"}
         </span>
         {showIssue && (
@@ -520,13 +520,14 @@ const activityDetails: {
         return (
           <>
             marked that {showIssue ? <IssueLink activity={activity} /> : "this issue"} relates to{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+            <span className="font-medium text-neutral-text-strong">{activity.new_value}</span>.
           </>
         );
       else
         return (
           <>
-            removed the relation from <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+            removed the relation from <span className="font-medium text-neutral-text-strong">{activity.old_value}</span>
+            .
           </>
         );
     },
@@ -538,13 +539,14 @@ const activityDetails: {
         return (
           <>
             marked {showIssue ? <IssueLink activity={activity} /> : "this issue"} is blocking issue{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+            <span className="font-medium text-neutral-text-strong">{activity.new_value}</span>.
           </>
         );
       else
         return (
           <>
-            removed the blocking issue <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+            removed the blocking issue{" "}
+            <span className="font-medium text-neutral-text-strong">{activity.old_value}</span>.
           </>
         );
     },
@@ -556,14 +558,14 @@ const activityDetails: {
         return (
           <>
             marked {showIssue ? <IssueLink activity={activity} /> : "this issue"} is being blocked by{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+            <span className="font-medium text-neutral-text-strong">{activity.new_value}</span>.
           </>
         );
       else
         return (
           <>
             removed {showIssue ? <IssueLink activity={activity} /> : "this issue"} being blocked by issue{" "}
-            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+            <span className="font-medium text-neutral-text-strong">{activity.old_value}</span>.
           </>
         );
     },
@@ -575,14 +577,14 @@ const activityDetails: {
         return (
           <>
             marked {showIssue ? <IssueLink activity={activity} /> : "this issue"} as duplicate of{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+            <span className="font-medium text-neutral-text-strong">{activity.new_value}</span>.
           </>
         );
       else
         return (
           <>
             removed {showIssue ? <IssueLink activity={activity} /> : "this issue"} as a duplicate of{" "}
-            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+            <span className="font-medium text-neutral-text-strong">{activity.old_value}</span>.
           </>
         );
     },
@@ -591,7 +593,7 @@ const activityDetails: {
   state: {
     message: (activity, showIssue) => (
       <>
-        set the state to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+        set the state to <span className="font-medium text-neutral-text-strong">{activity.new_value}</span>
         {showIssue && (
           <>
             {" "}
@@ -620,7 +622,7 @@ const activityDetails: {
         return (
           <>
             set the start date to{" "}
-            <span className="font-medium text-custom-text-100">{renderFormattedDate(activity.new_value)}</span>
+            <span className="font-medium text-neutral-text-strong">{renderFormattedDate(activity.new_value)}</span>
             {showIssue && (
               <>
                 {" "}
@@ -650,7 +652,7 @@ const activityDetails: {
         return (
           <>
             set the due date to{" "}
-            <span className="font-medium text-custom-text-100">{renderFormattedDate(activity.new_value)}</span>
+            <span className="font-medium text-neutral-text-strong">{renderFormattedDate(activity.new_value)}</span>
             {showIssue && (
               <>
                 {" "}
diff --git a/web/components/core/filters/date-filter-modal.tsx b/web/components/core/filters/date-filter-modal.tsx
index be2a2ca63..e408d5532 100644
--- a/web/components/core/filters/date-filter-modal.tsx
+++ b/web/components/core/filters/date-filter-modal.tsx
@@ -120,9 +120,9 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                   </div>
                   {watch("filterType") === "range" && (
                     <h6 className="flex items-center gap-1 text-xs">
-                      <span className="text-custom-text-200">After:</span>
+                      <span className="text-neutral-text-medium">After:</span>
                       <span>{renderFormattedDate(watch("date1"))}</span>
-                      <span className="ml-1 text-custom-text-200">Before:</span>
+                      <span className="ml-1 text-neutral-text-medium">Before:</span>
                       {!isInvalid && <span>{renderFormattedDate(watch("date2"))}</span>}
                     </h6>
                   )}
diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx
index 8a0454c5b..906e2e8e6 100644
--- a/web/components/core/image-picker-popover.tsx
+++ b/web/components/core/image-picker-popover.tsx
@@ -151,7 +151,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
   return (
     <Popover className="relative z-[2]" ref={ref} tabIndex={tabIndex} onKeyDown={handleKeyDown}>
       <Popover.Button
-        className="rounded border border-neutral-border-medium bg-neutral-component-surface-light px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
+        className="rounded border border-neutral-border-medium bg-neutral-component-surface-light px-2 py-1 text-xs text-neutral-text-medium hover:text-neutral-text-strong"
         onClick={handleOnClick}
         disabled={disabled}
       >
@@ -178,7 +178,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
                       key={tab.key}
                       className={({ selected }) =>
                         `rounded px-4 py-1 text-center text-sm outline-none transition-colors ${
-                          selected ? "bg-custom-primary text-white" : "text-custom-text-100"
+                          selected ? "bg-custom-primary text-white" : "text-neutral-text-strong"
                         }`
                       }
                     >
@@ -232,7 +232,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
                           ))}
                         </div>
                       ) : (
-                        <p className="pt-7 text-center text-xs text-custom-text-300">No images found.</p>
+                        <p className="pt-7 text-center text-xs text-neutral-text-medium">No images found.</p>
                       )
                     ) : (
                       <Loader className="grid grid-cols-4 gap-4">
@@ -271,7 +271,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
                           ))}
                         </div>
                       ) : (
-                        <p className="pt-7 text-center text-xs text-custom-text-300">No images found.</p>
+                        <p className="pt-7 text-center text-xs text-neutral-text-medium">No images found.</p>
                       )
                     ) : (
                       <Loader className="grid grid-cols-4 gap-4 pt-4">
@@ -300,7 +300,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
                       >
                         <button
                           type="button"
-                          className="absolute right-0 top-0 z-40 -translate-y-1/2 rounded bg-neutral-component-surface-medium px-2 py-0.5 text-xs font-medium text-custom-text-200"
+                          className="absolute right-0 top-0 z-40 -translate-y-1/2 rounded bg-neutral-component-surface-medium px-2 py-0.5 text-xs font-medium text-neutral-text-medium"
                         >
                           Edit
                         </button>
@@ -316,7 +316,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
                           </>
                         ) : (
                           <div>
-                            <span className="mt-2 block text-sm font-medium text-custom-text-200">
+                            <span className="mt-2 block text-sm font-medium text-neutral-text-medium">
                               {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
                             </span>
                           </div>
@@ -333,7 +333,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
                       </p>
                     )}
 
-                    <p className="text-sm text-custom-text-200">
+                    <p className="text-sm text-neutral-text-medium">
                       File formats supported- .jpeg, .jpg, .png, .webp, .svg
                     </p>
 
diff --git a/web/components/core/modals/bulk-delete-issues-modal-item.tsx b/web/components/core/modals/bulk-delete-issues-modal-item.tsx
index 44fd0b30e..2b1b53e17 100644
--- a/web/components/core/modals/bulk-delete-issues-modal-item.tsx
+++ b/web/components/core/modals/bulk-delete-issues-modal-item.tsx
@@ -16,7 +16,7 @@ export const BulkDeleteIssuesModalItem: React.FC<any> = observer((props) => {
       value={issue.id}
       className={({ active }) =>
         `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
-          active ? "bg-neutral-component-surface-dark text-custom-text-100" : ""
+          active ? "bg-neutral-component-surface-dark text-neutral-text-strong" : ""
         }`
       }
     >
diff --git a/web/components/core/modals/bulk-delete-issues-modal.tsx b/web/components/core/modals/bulk-delete-issues-modal.tsx
index 6abd666af..9c3de7530 100644
--- a/web/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/web/components/core/modals/bulk-delete-issues-modal.tsx
@@ -145,12 +145,12 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
                   >
                     <div className="relative m-1">
                       <Search
-                        className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
+                        className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-neutral-text-strong text-opacity-40"
                         aria-hidden="true"
                       />
                       <input
                         type="text"
-                        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"
+                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-neutral-text-strong outline-none focus:ring-0 sm:text-sm"
                         placeholder="Search..."
                         onChange={(event) => setQuery(event.target.value)}
                       />
@@ -163,11 +163,11 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
                       {filteredIssues.length > 0 ? (
                         <li className="p-2">
                           {query === "" && (
-                            <h2 className="mb-2 mt-4 px-3 text-xs font-semibold text-custom-text-100">
+                            <h2 className="mb-2 mt-4 px-3 text-xs font-semibold text-neutral-text-strong">
                               Select issues to delete
                             </h2>
                           )}
-                          <ul className="text-sm text-custom-text-200">
+                          <ul className="text-sm text-neutral-text-medium">
                             {filteredIssues.map((issue) => (
                               <BulkDeleteIssuesModalItem
                                 issue={issue}
@@ -181,7 +181,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
                       ) : (
                         <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
                           <LayersIcon height="56" width="56" />
-                          <h3 className="text-custom-text-200">
+                          <h3 className="text-neutral-text-medium">
                             No issues found. Create a new issue with{" "}
                             <pre className="inline rounded bg-neutral-component-surface-dark px-2 py-1">C</pre>.
                           </h3>
diff --git a/web/components/core/modals/existing-issues-list-modal.tsx b/web/components/core/modals/existing-issues-list-modal.tsx
index b6e46bfc0..51e0dadb1 100644
--- a/web/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/components/core/modals/existing-issues-list-modal.tsx
@@ -136,24 +136,24 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                 >
                   <div className="relative m-1">
                     <Search
-                      className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
+                      className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-neutral-text-strong text-opacity-40"
                       aria-hidden="true"
                     />
                     <Combobox.Input
-                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-sm text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0"
+                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-sm text-neutral-text-strong outline-none placeholder:text-neutral-text-subtle focus:ring-0"
                       placeholder="Type to search..."
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
                     />
                   </div>
 
-                  <div className="flex flex-col-reverse gap-4 p-2 text-[0.825rem] text-custom-text-200 sm:flex-row sm:items-center sm:justify-between">
+                  <div className="flex flex-col-reverse gap-4 p-2 text-[0.825rem] text-neutral-text-medium sm:flex-row sm:items-center sm:justify-between">
                     {selectedIssues.length > 0 ? (
                       <div className="mt-1 flex flex-wrap items-center gap-2">
                         {selectedIssues.map((issue) => (
                           <div
                             key={issue.id}
-                            className="flex items-center gap-1 whitespace-nowrap rounded-md border border-neutral-border-medium bg-neutral-component-surface-dark py-1 pl-2 text-xs text-custom-text-100"
+                            className="flex items-center gap-1 whitespace-nowrap rounded-md border border-neutral-border-medium bg-neutral-component-surface-dark py-1 pl-2 text-xs text-neutral-text-strong"
                           >
                             {issue.project__identifier}-{issue.sequence_id}
                             <button
@@ -161,7 +161,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                               className="group p-1"
                               onClick={() => setSelectedIssues((prevData) => prevData.filter((i) => i.id !== issue.id))}
                             >
-                              <X className="h-3 w-3 text-custom-text-200 group-hover:text-custom-text-100" />
+                              <X className="h-3 w-3 text-neutral-text-medium group-hover:text-neutral-text-strong" />
                             </button>
                           </div>
                         ))}
@@ -175,7 +175,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                       <Tooltip tooltipContent="Toggle workspace level search">
                         <div
                           className={`flex flex-shrink-0 cursor-pointer items-center gap-1 text-xs ${
-                            isWorkspaceLevel ? "text-custom-text-100" : "text-custom-text-200"
+                            isWorkspaceLevel ? "text-neutral-text-strong" : "text-neutral-text-medium"
                           }`}
                         >
                           <ToggleSwitch
@@ -196,9 +196,9 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
 
                   <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto">
                     {searchTerm !== "" && (
-                      <h5 className="mx-2 text-[0.825rem] text-custom-text-200">
+                      <h5 className="mx-2 text-[0.825rem] text-neutral-text-medium">
                         Search results for{" "}
-                        <span className="text-custom-text-100">
+                        <span className="text-neutral-text-strong">
                           {'"'}
                           {searchTerm}
                           {'"'}
@@ -210,7 +210,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                     {!isSearching && issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
                       <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
                         <LayersIcon height="52" width="52" />
-                        <h3 className="text-custom-text-200">
+                        <h3 className="text-neutral-text-medium">
                           No issues found. Create a new issue with{" "}
                           <pre className="inline rounded bg-neutral-component-surface-dark px-2 py-1 text-sm">C</pre>.
                         </h3>
@@ -225,7 +225,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                         <Loader.Item height="40px" />
                       </Loader>
                     ) : (
-                      <ul className={`text-sm text-custom-text-100 ${issues.length > 0 ? "p-2" : ""}`}>
+                      <ul className={`text-sm text-neutral-text-strong ${issues.length > 0 ? "p-2" : ""}`}>
                         {issues.map((issue) => {
                           const selected = selectedIssues.some((i) => i.id === issue.id);
 
@@ -236,9 +236,9 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                               htmlFor={`issue-${issue.id}`}
                               value={issue}
                               className={({ active }) =>
-                                `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
-                                  active ? "bg-neutral-component-surface-dark text-custom-text-100" : ""
-                                } ${selected ? "text-custom-text-100" : ""}`
+                                `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 text-neutral-text-medium ${
+                                  active ? "bg-neutral-component-surface-dark text-neutral-text-strong" : ""
+                                } ${selected ? "text-neutral-text-strong" : ""}`
                               }
                             >
                               <div className="flex items-center gap-2">
@@ -257,7 +257,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                               <a
                                 href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
                                 target="_blank"
-                                className="z-1 relative hidden text-custom-text-200 hover:text-custom-text-100 group-hover:block"
+                                className="z-1 relative hidden text-neutral-text-medium hover:text-neutral-text-strong group-hover:block"
                                 rel="noopener noreferrer"
                                 onClick={(e) => e.stopPropagation()}
                               >
diff --git a/web/components/core/modals/link-modal.tsx b/web/components/core/modals/link-modal.tsx
index ac9773f03..1593fed3f 100644
--- a/web/components/core/modals/link-modal.tsx
+++ b/web/components/core/modals/link-modal.tsx
@@ -94,12 +94,12 @@ export const LinkModal: FC<Props> = (props) => {
                 <form onSubmit={handleSubmit(handleCreateUpdatePage)}>
                   <div>
                     <div className="space-y-5">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                         {status ? "Update Link" : "Add Link"}
                       </Dialog.Title>
                       <div className="mt-2 space-y-3">
                         <div>
-                          <label htmlFor="url" className="mb-2 text-custom-text-200">
+                          <label htmlFor="url" className="mb-2 text-neutral-text-medium">
                             URL
                           </label>
                           <Controller
@@ -125,7 +125,7 @@ export const LinkModal: FC<Props> = (props) => {
                           />
                         </div>
                         <div>
-                          <label htmlFor="title" className="mb-2 text-custom-text-200">
+                          <label htmlFor="title" className="mb-2 text-neutral-text-medium">
                             {`Title (optional)`}
                           </label>
                           <Controller
diff --git a/web/components/core/modals/user-image-upload-modal.tsx b/web/components/core/modals/user-image-upload-modal.tsx
index 603430ce8..100d818e9 100644
--- a/web/components/core/modals/user-image-upload-modal.tsx
+++ b/web/components/core/modals/user-image-upload-modal.tsx
@@ -113,7 +113,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
             >
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-component-surface-light px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                     Upload Image
                   </Dialog.Title>
                   <div className="space-y-3">
@@ -130,7 +130,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
                           <>
                             <button
                               type="button"
-                              className="absolute right-0 top-0 z-40 -translate-y-1/2 translate-x-1/2 rounded bg-neutral-component-surface-medium px-2 py-0.5 text-xs font-medium text-custom-text-200"
+                              className="absolute right-0 top-0 z-40 -translate-y-1/2 translate-x-1/2 rounded bg-neutral-component-surface-medium px-2 py-0.5 text-xs font-medium text-neutral-text-medium"
                             >
                               Edit
                             </button>
@@ -142,8 +142,8 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
                           </>
                         ) : (
                           <div>
-                            <UserCircle2 className="mx-auto h-16 w-16 text-custom-text-200" />
-                            <span className="mt-2 block text-sm font-medium text-custom-text-200">
+                            <UserCircle2 className="mx-auto h-16 w-16 text-neutral-text-medium" />
+                            <span className="mt-2 block text-sm font-medium text-neutral-text-medium">
                               {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
                             </span>
                           </div>
@@ -161,7 +161,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
                     )}
                   </div>
                 </div>
-                <p className="my-4 text-sm text-custom-text-200">
+                <p className="my-4 text-sm text-neutral-text-medium">
                   File formats supported- .jpeg, .jpg, .png, .webp, .svg
                 </p>
                 <div className="flex items-center justify-between">
diff --git a/web/components/core/modals/workspace-image-upload-modal.tsx b/web/components/core/modals/workspace-image-upload-modal.tsx
index bdb482ddc..ec35d3562 100644
--- a/web/components/core/modals/workspace-image-upload-modal.tsx
+++ b/web/components/core/modals/workspace-image-upload-modal.tsx
@@ -120,7 +120,7 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
             >
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-component-surface-light px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                     Upload Image
                   </Dialog.Title>
                   <div className="space-y-3">
@@ -137,7 +137,7 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
                           <>
                             <button
                               type="button"
-                              className="absolute right-0 top-0 z-40 -translate-y-1/2 translate-x-1/2 rounded bg-neutral-component-surface-medium px-2 py-0.5 text-xs font-medium text-custom-text-200"
+                              className="absolute right-0 top-0 z-40 -translate-y-1/2 translate-x-1/2 rounded bg-neutral-component-surface-medium px-2 py-0.5 text-xs font-medium text-neutral-text-medium"
                             >
                               Edit
                             </button>
@@ -149,8 +149,8 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
                           </>
                         ) : (
                           <div>
-                            <UserCircle2 className="mx-auto h-16 w-16 text-custom-text-200" />
-                            <span className="mt-2 block text-sm font-medium text-custom-text-200">
+                            <UserCircle2 className="mx-auto h-16 w-16 text-neutral-text-medium" />
+                            <span className="mt-2 block text-sm font-medium text-neutral-text-medium">
                               {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
                             </span>
                           </div>
@@ -168,7 +168,7 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
                     )}
                   </div>
                 </div>
-                <p className="my-4 text-sm text-custom-text-200">
+                <p className="my-4 text-sm text-neutral-text-medium">
                   File formats supported- .jpeg, .jpg, .png, .webp, .svg
                 </p>
                 <div className="flex items-center justify-between">
diff --git a/web/components/core/sidebar/links-list.tsx b/web/components/core/sidebar/links-list.tsx
index 2551c1026..b128853ed 100644
--- a/web/components/core/sidebar/links-list.tsx
+++ b/web/components/core/sidebar/links-list.tsx
@@ -61,7 +61,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
                     handleEditLink(link);
                   }}
                 >
-                  <Pencil className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
+                  <Pencil className="h-3 w-3 stroke-[1.5] text-neutral-text-medium" />
                 </button>
                 <a
                   href={link.url}
@@ -69,7 +69,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
                   rel="noopener noreferrer"
                   className="flex items-center justify-center p-1 hover:bg-neutral-component-surface-dark"
                 >
-                  <ExternalLinkIcon className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
+                  <ExternalLinkIcon className="h-3 w-3 stroke-[1.5] text-neutral-text-medium" />
                 </a>
                 <button
                   type="button"
@@ -86,7 +86,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
             )}
           </div>
           <div className="px-5">
-            <p className="mt-0.5 stroke-[1.5] text-xs text-custom-text-300">
+            <p className="mt-0.5 stroke-[1.5] text-xs text-neutral-text-medium">
               Added {calculateTimeAgo(link.created_at)}
               <br />
               by{" "}
diff --git a/web/components/core/sidebar/progress-chart.tsx b/web/components/core/sidebar/progress-chart.tsx
index cd40e6a8e..3da92dbdc 100644
--- a/web/components/core/sidebar/progress-chart.tsx
+++ b/web/components/core/sidebar/progress-chart.tsx
@@ -131,7 +131,7 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
         sliceTooltip={(datum) => (
           <div className="rounded-md border border-neutral-border-medium bg-neutral-component-surface-dark p-2 text-xs">
             {datum.slice.points[0].data.yFormatted}
-            <span className="text-custom-text-200"> issues pending on </span>
+            <span className="text-neutral-text-medium"> issues pending on </span>
             {datum.slice.points[0].data.xFormatted}
           </div>
         )}
diff --git a/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx b/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
index 0e34eac2c..fd0cdb16e 100644
--- a/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
+++ b/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
@@ -3,14 +3,14 @@ import { Menu } from "lucide-react";
 import { useApplication } from "hooks/store";
 import { observer } from "mobx-react";
 
-export const SidebarHamburgerToggle: FC = observer (() => {
+export const SidebarHamburgerToggle: FC = observer(() => {
   const { theme: themStore } = useApplication();
   return (
     <div
       className="w-7 h-7 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
       onClick={() => themStore.toggleSidebar()}
     >
-      <Menu size={14} className="text-custom-text-200 group-hover:text-custom-text-100 transition-all" />
+      <Menu size={14} className="text-neutral-text-medium group-hover:text-neutral-text-strong transition-all" />
     </div>
   );
 });
diff --git a/web/components/core/sidebar/sidebar-progress-stats.tsx b/web/components/core/sidebar/sidebar-progress-stats.tsx
index 469413dc8..b0ccda9ce 100644
--- a/web/components/core/sidebar/sidebar-progress-stats.tsx
+++ b/web/components/core/sidebar/sidebar-progress-stats.tsx
@@ -88,10 +88,10 @@ export const SidebarProgressStats: React.FC<Props> = ({
           className={({ selected }) =>
             `w-full  ${
               roundedTab ? "rounded-3xl border border-neutral-border-medium" : "rounded"
-            } px-3 py-1 text-custom-text-100 ${
+            } px-3 py-1 text-neutral-text-strong ${
               selected
-                ? "bg-neutral-component-surface-light text-custom-text-300 shadow-custom-shadow-2xs"
-                : "text-custom-text-400 hover:text-custom-text-300"
+                ? "bg-neutral-component-surface-light text-neutral-text-medium shadow-custom-shadow-2xs"
+                : "text-neutral-text-subtle hover:text-neutral-text-medium"
             }`
           }
         >
@@ -101,10 +101,10 @@ export const SidebarProgressStats: React.FC<Props> = ({
           className={({ selected }) =>
             `w-full ${
               roundedTab ? "rounded-3xl border border-neutral-border-medium" : "rounded"
-            } px-3 py-1 text-custom-text-100 ${
+            } px-3 py-1 text-neutral-text-strong ${
               selected
-                ? "bg-neutral-component-surface-light text-custom-text-300 shadow-custom-shadow-2xs"
-                : "text-custom-text-400 hover:text-custom-text-300"
+                ? "bg-neutral-component-surface-light text-neutral-text-medium shadow-custom-shadow-2xs"
+                : "text-neutral-text-subtle hover:text-neutral-text-medium"
             }`
           }
         >
@@ -114,17 +114,17 @@ export const SidebarProgressStats: React.FC<Props> = ({
           className={({ selected }) =>
             `w-full ${
               roundedTab ? "rounded-3xl border border-neutral-border-medium" : "rounded"
-            } px-3 py-1  text-custom-text-100 ${
+            } px-3 py-1  text-neutral-text-strong ${
               selected
-                ? "bg-neutral-component-surface-light text-custom-text-300 shadow-custom-shadow-2xs"
-                : "text-custom-text-400 hover:text-custom-text-300"
+                ? "bg-neutral-component-surface-light text-neutral-text-medium shadow-custom-shadow-2xs"
+                : "text-neutral-text-subtle hover:text-neutral-text-medium"
             }`
           }
         >
           States
         </Tab>
       </Tab.List>
-      <Tab.Panels className="flex w-full items-center justify-between text-custom-text-200">
+      <Tab.Panels className="flex w-full items-center justify-between text-neutral-text-medium">
         <Tab.Panel as="div" className="flex min-h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5">
           {distribution?.assignees.length > 0 ? (
             distribution.assignees.map((assignee, index) => {
@@ -178,7 +178,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
               <div className="flex h-20 w-20 items-center justify-center rounded-full bg-neutral-component-surface-dark">
                 <Image src={emptyMembers} className="h-12 w-12" alt="empty members" />
               </div>
-              <h6 className="text-base text-custom-text-300">No assignees yet</h6>
+              <h6 className="text-base text-neutral-text-medium">No assignees yet</h6>
             </div>
           )}
         </Tab.Panel>
@@ -218,7 +218,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
               <div className="flex h-20 w-20 items-center justify-center rounded-full bg-neutral-component-surface-dark">
                 <Image src={emptyLabel} className="h-12 w-12" alt="empty label" />
               </div>
-              <h6 className="text-base text-custom-text-300">No labels yet</h6>
+              <h6 className="text-base text-neutral-text-medium">No labels yet</h6>
             </div>
           )}
         </Tab.Panel>
diff --git a/web/components/core/theme/color-picker-input.tsx b/web/components/core/theme/color-picker-input.tsx
index e590534cf..5ad2e9d01 100644
--- a/web/components/core/theme/color-picker-input.tsx
+++ b/web/components/core/theme/color-picker-input.tsx
@@ -87,7 +87,7 @@ export const ColorPickerInput: FC<Props> = (props) => {
               <Popover.Button
                 type="button"
                 className={`group inline-flex items-center outline-none ${
-                  open ? "text-custom-text-100" : "text-custom-text-200"
+                  open ? "text-neutral-text-strong" : "text-neutral-text-medium"
                 }`}
               >
                 {watch(name) && watch(name) !== "" ? (
@@ -98,7 +98,7 @@ export const ColorPickerInput: FC<Props> = (props) => {
                     }}
                   />
                 ) : (
-                  <Palette className="h-3.5 w-3.5 text-custom-text-100" />
+                  <Palette className="h-3.5 w-3.5 text-neutral-text-strong" />
                 )}
               </Popover.Button>
 
diff --git a/web/components/core/theme/custom-theme-selector.tsx b/web/components/core/theme/custom-theme-selector.tsx
index bd6f43569..1cc69ccfd 100644
--- a/web/components/core/theme/custom-theme-selector.tsx
+++ b/web/components/core/theme/custom-theme-selector.tsx
@@ -76,11 +76,11 @@ export const CustomThemeSelector: React.FC = observer(() => {
   return (
     <form onSubmit={handleSubmit(handleUpdateTheme)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-semibold text-custom-text-100">Customize your theme</h3>
+        <h3 className="text-lg font-semibold text-neutral-text-strong">Customize your theme</h3>
         <div className="space-y-4">
           <div className="grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-2 md:grid-cols-3">
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">Background color</h3>
+              <h3 className="text-left text-sm font-medium text-neutral-text-medium">Background color</h3>
               <div className="w-full">
                 <Controller
                   control={control}
@@ -106,7 +106,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">Text color</h3>
+              <h3 className="text-left text-sm font-medium text-neutral-text-medium">Text color</h3>
               <div className="w-full">
                 <Controller
                   control={control}
@@ -132,7 +132,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">Primary(Theme) color</h3>
+              <h3 className="text-left text-sm font-medium text-neutral-text-medium">Primary(Theme) color</h3>
               <div className="w-full">
                 <Controller
                   control={control}
@@ -158,7 +158,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">Sidebar background color</h3>
+              <h3 className="text-left text-sm font-medium text-neutral-text-medium">Sidebar background color</h3>
               <div className="w-full">
                 <Controller
                   control={control}
@@ -186,7 +186,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">Sidebar text color</h3>
+              <h3 className="text-left text-sm font-medium text-neutral-text-medium">Sidebar text color</h3>
               <div className="w-full">
                 <Controller
                   control={control}
diff --git a/web/components/cycles/active-cycle-details.tsx b/web/components/cycles/active-cycle-details.tsx
index b629e321b..d7e33e8ec 100644
--- a/web/components/cycles/active-cycle-details.tsx
+++ b/web/components/cycles/active-cycle-details.tsx
@@ -191,12 +191,12 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
                 </span>
               </div>
 
-              <div className="flex items-center justify-start gap-5 text-custom-text-200">
+              <div className="flex items-center justify-start gap-5 text-neutral-text-medium">
                 <div className="flex items-start gap-1">
                   <CalendarDays className="h-4 w-4" />
                   <span>{renderFormattedDate(startDate)}</span>
                 </div>
-                <ArrowRight className="h-4 w-4 text-custom-text-200" />
+                <ArrowRight className="h-4 w-4 text-neutral-text-medium" />
                 <div className="flex items-start gap-1">
                   <Target className="h-4 w-4" />
                   <span>{renderFormattedDate(endDate)}</span>
@@ -204,7 +204,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
               </div>
 
               <div className="flex items-center gap-4">
-                <div className="flex items-center gap-2.5 text-custom-text-200">
+                <div className="flex items-center gap-2.5 text-neutral-text-medium">
                   {cycleOwnerDetails?.avatar && cycleOwnerDetails?.avatar !== "" ? (
                     <img
                       src={cycleOwnerDetails?.avatar}
@@ -218,11 +218,11 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
                       {cycleOwnerDetails?.display_name.charAt(0)}
                     </span>
                   )}
-                  <span className="text-custom-text-200">{cycleOwnerDetails?.display_name}</span>
+                  <span className="text-neutral-text-medium">{cycleOwnerDetails?.display_name}</span>
                 </div>
 
                 {activeCycle.assignees.length > 0 && (
-                  <div className="flex items-center gap-1 text-custom-text-200">
+                  <div className="flex items-center gap-1 text-neutral-text-medium">
                     <AvatarGroup>
                       {activeCycle.assignees.map((assignee) => (
                         <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
@@ -232,7 +232,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
                 )}
               </div>
 
-              <div className="flex items-center gap-4 text-custom-text-200">
+              <div className="flex items-center gap-4 text-neutral-text-medium">
                 <div className="flex gap-2">
                   <LayersIcon className="h-4 w-4 flex-shrink-0" />
                   {activeCycle.total_issues} issues
@@ -254,7 +254,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
         </div>
         <div className="col-span-2 grid grid-cols-1 divide-y border-neutral-border-medium md:grid-cols-2 md:divide-x md:divide-y-0">
           <div className="flex h-60 flex-col border-neutral-border-medium">
-            <div className="flex h-full w-full flex-col p-4 text-custom-text-200">
+            <div className="flex h-full w-full flex-col p-4 text-neutral-text-medium">
               <div className="flex w-full items-center gap-2 py-1">
                 <span>Progress</span>
                 <LinearProgressIndicator size="md" data={progressIndicatorData} inPercentage />
@@ -305,12 +305,12 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
                         tooltipHeading="Issue ID"
                         tooltipContent={`${currentProjectDetails?.identifier}-${issue.sequence_id}`}
                       >
-                        <span className="flex-shrink-0 text-xs text-custom-text-200">
+                        <span className="flex-shrink-0 text-xs text-neutral-text-medium">
                           {currentProjectDetails?.identifier}-{issue.sequence_id}
                         </span>
                       </Tooltip>
                       <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-                        <span className="text-[0.825rem] text-custom-text-100">{truncateText(issue.name, 30)}</span>
+                        <span className="text-[0.825rem] text-neutral-text-strong">{truncateText(issue.name, 30)}</span>
                       </Tooltip>
                     </div>
                     <div className="flex items-center gap-1.5 flex-shrink-0">
@@ -333,7 +333,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
                   </Link>
                 ))
               ) : (
-                <div className="flex items-center justify-center h-full text-sm text-custom-text-200">
+                <div className="flex items-center justify-center h-full text-sm text-neutral-text-medium">
                   There are no high priority issues present in this cycle.
                 </div>
               )
@@ -348,7 +348,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
         </div>
         <div className="flex flex-col  border-neutral-border-medium p-4 max-h-60">
           <div className="flex items-start justify-between gap-4 py-1.5 text-xs">
-            <div className="flex items-center gap-3 text-custom-text-100">
+            <div className="flex items-center gap-3 text-neutral-text-strong">
               <div className="flex items-center justify-center gap-1">
                 <span className="h-2.5 w-2.5 rounded-full bg-[#a9bbd0]" />
                 <span>Ideal</span>
@@ -360,7 +360,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
             </div>
             <div className="flex items-center gap-1">
               <span>
-                <LayersIcon className="h-5 w-5 flex-shrink-0 text-custom-text-200" />
+                <LayersIcon className="h-5 w-5 flex-shrink-0 text-neutral-text-medium" />
               </span>
               <span>
                 Pending Issues -{" "}
diff --git a/web/components/cycles/active-cycle-stats.tsx b/web/components/cycles/active-cycle-stats.tsx
index e31e86c54..73bdd6958 100644
--- a/web/components/cycles/active-cycle-stats.tsx
+++ b/web/components/cycles/active-cycle-stats.tsx
@@ -50,7 +50,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
       >
         <Tab
           className={({ selected }) =>
-            `rounded-3xl border border-neutral-border-medium px-3 py-1 text-custom-text-100 ${
+            `rounded-3xl border border-neutral-border-medium px-3 py-1 text-neutral-text-strong ${
               selected ? " bg-custom-primary text-white" : "  hover:bg-neutral-component-surface-dark"
             }`
           }
@@ -59,7 +59,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
         </Tab>
         <Tab
           className={({ selected }) =>
-            `rounded-3xl border border-neutral-border-medium px-3 py-1 text-custom-text-100 ${
+            `rounded-3xl border border-neutral-border-medium px-3 py-1 text-neutral-text-strong ${
               selected ? " bg-custom-primary text-white" : "  hover:bg-neutral-component-surface-dark"
             }`
           }
@@ -69,7 +69,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
       </Tab.List>
       {cycle && cycle.total_issues > 0 ? (
         <Tab.Panels as={Fragment}>
-          <Tab.Panel as="div" className="w-full items-center gap-1 overflow-y-scroll p-4 text-custom-text-200">
+          <Tab.Panel as="div" className="w-full items-center gap-1 overflow-y-scroll p-4 text-neutral-text-medium">
             {cycle.distribution?.assignees?.map((assignee, index) => {
               if (assignee.assignee_id)
                 return (
@@ -104,7 +104,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
                 );
             })}
           </Tab.Panel>
-          <Tab.Panel as="div" className="w-full items-center gap-1 overflow-y-scroll p-4 text-custom-text-200">
+          <Tab.Panel as="div" className="w-full items-center gap-1 overflow-y-scroll p-4 text-neutral-text-medium">
             {cycle.distribution?.labels?.map((label, index) => (
               <SingleProgressStats
                 key={label.label_id ?? `no-label-${index}`}
@@ -126,7 +126,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
           </Tab.Panel>
         </Tab.Panels>
       ) : (
-        <div className="mt-4 grid place-items-center text-center text-sm text-custom-text-200">
+        <div className="mt-4 grid place-items-center text-center text-sm text-neutral-text-medium">
           There are no high priority issues present in this cycle.
         </div>
       )}
diff --git a/web/components/cycles/cycle-mobile-header.tsx b/web/components/cycles/cycle-mobile-header.tsx
index dc741877d..fcf763cca 100644
--- a/web/components/cycles/cycle-mobile-header.tsx
+++ b/web/components/cycles/cycle-mobile-header.tsx
@@ -92,10 +92,10 @@ export const CycleMobileHeader = () => {
       <div className="flex justify-evenly py-2 border-b border-neutral-border-medium">
         <CustomMenu
           maxHeight={"md"}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm"
+          className="flex flex-grow justify-center text-neutral-text-medium text-sm"
           placement="bottom-start"
-          customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>}
-          customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+          customButton={<span className="flex flex-grow justify-center text-neutral-text-medium text-sm">Layout</span>}
+          customButtonClassName="flex flex-grow justify-center text-neutral-text-medium text-sm"
           closeOnSelect
         >
           {layouts.map((layout, index) => (
@@ -106,18 +106,18 @@ export const CycleMobileHeader = () => {
               className="flex items-center gap-2"
             >
               <layout.icon className="w-3 h-3" />
-              <div className="text-custom-text-300">{layout.title}</div>
+              <div className="text-neutral-text-medium">{layout.title}</div>
             </CustomMenu.MenuItem>
           ))}
         </CustomMenu>
-        <div className="flex flex-grow justify-center border-l border-neutral-border-medium items-center text-custom-text-200 text-sm">
+        <div className="flex flex-grow justify-center border-l border-neutral-border-medium items-center text-neutral-text-medium text-sm">
           <FiltersDropdown
             title="Filters"
             placement="bottom-end"
             menuButton={
-              <span className="flex items-center text-custom-text-200 text-sm">
+              <span className="flex items-center text-neutral-text-medium text-sm">
                 Filters
-                <ChevronDown className="text-custom-text-200  h-4 w-4 ml-2" />
+                <ChevronDown className="text-neutral-text-medium  h-4 w-4 ml-2" />
               </span>
             }
           >
@@ -133,14 +133,14 @@ export const CycleMobileHeader = () => {
             />
           </FiltersDropdown>
         </div>
-        <div className="flex flex-grow justify-center border-l border-neutral-border-medium items-center text-custom-text-200 text-sm">
+        <div className="flex flex-grow justify-center border-l border-neutral-border-medium items-center text-neutral-text-medium text-sm">
           <FiltersDropdown
             title="Display"
             placement="bottom-end"
             menuButton={
-              <span className="flex items-center text-custom-text-200 text-sm">
+              <span className="flex items-center text-neutral-text-medium text-sm">
                 Display
-                <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
+                <ChevronDown className="text-neutral-text-medium h-4 w-4 ml-2" />
               </span>
             }
           >
@@ -158,7 +158,7 @@ export const CycleMobileHeader = () => {
 
         <span
           onClick={() => setAnalyticsModal(true)}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-neutral-border-medium"
+          className="flex flex-grow justify-center text-neutral-text-medium text-sm border-l border-neutral-border-medium"
         >
           Analytics
         </span>
diff --git a/web/components/cycles/cycles-board-card.tsx b/web/components/cycles/cycles-board-card.tsx
index 85135ba9c..80ff68b2e 100644
--- a/web/components/cycles/cycles-board-card.tsx
+++ b/web/components/cycles/cycles-board-card.tsx
@@ -183,16 +183,16 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
                 </span>
               )}
               <button onClick={openCycleOverview}>
-                <Info className="h-4 w-4 text-custom-text-400" />
+                <Info className="h-4 w-4 text-neutral-text-subtle" />
               </button>
             </div>
           </div>
 
           <div className="flex flex-col gap-3">
             <div className="flex items-center justify-between">
-              <div className="flex items-center gap-1.5 text-custom-text-200">
-                <LayersIcon className="h-4 w-4 text-custom-text-300" />
-                <span className="text-xs text-custom-text-300">{issueCount}</span>
+              <div className="flex items-center gap-1.5 text-neutral-text-medium">
+                <LayersIcon className="h-4 w-4 text-neutral-text-medium" />
+                <span className="text-xs text-neutral-text-medium">{issueCount}</span>
               </div>
               {cycleDetails.assignees.length > 0 && (
                 <Tooltip tooltipContent={`${cycleDetails.assignees.length} Members`}>
@@ -230,11 +230,11 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
 
             <div className="flex items-center justify-between">
               {isDateValid ? (
-                <span className="text-xs text-custom-text-300">
+                <span className="text-xs text-neutral-text-medium">
                   {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
                 </span>
               ) : (
-                <span className="text-xs text-custom-text-400">No due date</span>
+                <span className="text-xs text-neutral-text-subtle">No due date</span>
               )}
               <div className="z-10 flex items-center gap-1.5">
                 {isEditingAllowed &&
@@ -244,7 +244,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
                     </button>
                   ) : (
                     <button type="button" onClick={handleAddToFavorites}>
-                      <Star className="h-3.5 w-3.5 text-custom-text-200" />
+                      <Star className="h-3.5 w-3.5 text-neutral-text-medium" />
                     </button>
                   ))}
                 <CustomMenu ellipsis className="z-10">
diff --git a/web/components/cycles/cycles-list-item.tsx b/web/components/cycles/cycles-list-item.tsx
index f24e2fcb5..251707a09 100644
--- a/web/components/cycles/cycles-list-item.tsx
+++ b/web/components/cycles/cycles-list-item.tsx
@@ -173,7 +173,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                   ) : progress === 100 ? (
                     <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
                   ) : (
-                    <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
+                    <span className="text-xs text-neutral-text-medium">{`${progress}%`}</span>
                   )}
                 </CircularProgressIndicator>
               </div>
@@ -188,7 +188,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
               </div>
 
               <button onClick={openCycleOverview} className="flex-shrink-0 z-10 invisible group-hover:visible">
-                <Info className="h-4 w-4 text-custom-text-400" />
+                <Info className="h-4 w-4 text-neutral-text-subtle" />
               </button>
             </div>
 
@@ -207,7 +207,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
             )}
           </div>
           <div className="flex-shrink-0 relative overflow-hidden flex w-full items-center justify-between md:justify-end gap-2.5 md:w-auto md:flex-shrink-0 ">
-            <div className="text-xs text-custom-text-300">
+            <div className="text-xs text-neutral-text-medium">
               {renderDate && `${renderFormattedDate(startDate) ?? `_ _`} - ${renderFormattedDate(endDate) ?? `_ _`}`}
             </div>
 
@@ -222,7 +222,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                     </AvatarGroup>
                   ) : (
                     <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-                      <User2 className="h-4 w-4 text-custom-text-400" />
+                      <User2 className="h-4 w-4 text-neutral-text-subtle" />
                     </span>
                   )}
                 </div>
@@ -236,7 +236,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                     </button>
                   ) : (
                     <button type="button" onClick={handleAddToFavorites}>
-                      <Star className="h-3.5 w-3.5 text-custom-text-200" />
+                      <Star className="h-3.5 w-3.5 text-neutral-text-medium" />
                     </button>
                   )}
 
diff --git a/web/components/cycles/delete-modal.tsx b/web/components/cycles/delete-modal.tsx
index 1b08a931b..05078797d 100644
--- a/web/components/cycles/delete-modal.tsx
+++ b/web/components/cycles/delete-modal.tsx
@@ -107,9 +107,9 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
                         <div className="text-xl font-medium 2xl:text-2xl">Delete Cycle</div>
                       </div>
                       <span>
-                        <p className="text-sm text-custom-text-200">
+                        <p className="text-sm text-neutral-text-medium">
                           Are you sure you want to delete cycle{' "'}
-                          <span className="break-words font-medium text-custom-text-100">{cycle?.name}</span>
+                          <span className="break-words font-medium text-neutral-text-strong">{cycle?.name}</span>
                           {'"'}? All of the data related to the cycle will be permanently removed. This action cannot be
                           undone.
                         </p>
diff --git a/web/components/cycles/form.tsx b/web/components/cycles/form.tsx
index 5ff02e45c..11e9e9eed 100644
--- a/web/components/cycles/form.tsx
+++ b/web/components/cycles/form.tsx
@@ -81,7 +81,7 @@ export const CycleForm: React.FC<Props> = (props) => {
               )}
             />
           )}
-          <h3 className="text-xl font-medium leading-6 text-custom-text-200">{status ? "Update" : "New"} Cycle</h3>
+          <h3 className="text-xl font-medium leading-6 text-neutral-text-medium">{status ? "Update" : "New"} Cycle</h3>
         </div>
         <div className="space-y-3">
           <div className="mt-2 space-y-3">
diff --git a/web/components/cycles/gantt-chart/blocks.tsx b/web/components/cycles/gantt-chart/blocks.tsx
index 3ad07b520..855f93eca 100644
--- a/web/components/cycles/gantt-chart/blocks.tsx
+++ b/web/components/cycles/gantt-chart/blocks.tsx
@@ -40,7 +40,7 @@ export const CycleGanttBlock = ({ data }: { data: ICycle }) => {
         }
         position="top-left"
       >
-        <div className="relative w-full truncate px-2.5 py-1 text-sm text-custom-text-100">{data?.name}</div>
+        <div className="relative w-full truncate px-2.5 py-1 text-sm text-neutral-text-strong">{data?.name}</div>
       </Tooltip>
     </div>
   );
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index 8fbbf76ef..c03c1a1e8 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -346,7 +346,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
           </div>
           <div className="flex items-center gap-3.5">
             <button onClick={handleCopyText}>
-              <LinkIcon className="h-3 w-3 text-custom-text-300" />
+              <LinkIcon className="h-3 w-3 text-neutral-text-medium" />
             </button>
             {!isCompleted && isEditingAllowed && (
               <CustomMenu placement="bottom-end" ellipsis>
@@ -382,18 +382,18 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
               </span>
             )}
           </div>
-          <h4 className="w-full break-words text-xl font-semibold text-custom-text-100">{cycleDetails.name}</h4>
+          <h4 className="w-full break-words text-xl font-semibold text-neutral-text-strong">{cycleDetails.name}</h4>
         </div>
 
         {cycleDetails.description && (
-          <span className="w-full whitespace-normal break-words py-2.5 text-sm leading-5 text-custom-text-200">
+          <span className="w-full whitespace-normal break-words py-2.5 text-sm leading-5 text-neutral-text-medium">
             {cycleDetails.description}
           </span>
         )}
 
         <div className="flex flex-col gap-5 pb-6 pt-2.5">
           <div className="flex items-center justify-start gap-1">
-            <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+            <div className="flex w-1/2 items-center justify-start gap-2 text-neutral-text-medium">
               <CalendarClock className="h-4 w-4" />
               <span className="text-base">Start date</span>
             </div>
@@ -403,14 +403,14 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <>
                     <Popover.Button
                       ref={startDateButtonRef}
-                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
+                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-custom-background-80 ${
                         isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
                       }`}
                       disabled={isCompleted || !isEditingAllowed}
                     >
                       <span
                         className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
-                          watch("start_date") ? "" : "text-custom-text-400"
+                          watch("start_date") ? "" : "text-neutral-text-subtle"
                         }`}
                       >
                         {renderFormattedDate(startDate) ?? "No date selected"}
@@ -450,7 +450,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
           </div>
 
           <div className="flex items-center justify-start gap-1">
-            <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+            <div className="flex w-1/2 items-center justify-start gap-2 text-neutral-text-medium">
               <CalendarCheck2 className="h-4 w-4" />
               <span className="text-base">Target date</span>
             </div>
@@ -460,14 +460,14 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <>
                     <Popover.Button
                       ref={endDateButtonRef}
-                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
+                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-custom-background-80 ${
                         isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
                       }`}
                       disabled={isCompleted || !isEditingAllowed}
                     >
                       <span
                         className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
-                          watch("end_date") ? "" : "text-custom-text-400"
+                          watch("end_date") ? "" : "text-neutral-text-subtle"
                         }`}
                       >
                         {renderFormattedDate(endDate) ?? "No date selected"}
@@ -507,25 +507,25 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
           </div>
 
           <div className="flex items-center justify-start gap-1">
-            <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+            <div className="flex w-1/2 items-center justify-start gap-2 text-neutral-text-medium">
               <UserCircle2 className="h-4 w-4" />
               <span className="text-base">Lead</span>
             </div>
             <div className="flex w-1/2 items-center rounded-sm">
               <div className="flex items-center gap-2.5">
                 <Avatar name={cycleOwnerDetails?.display_name} src={cycleOwnerDetails?.avatar} />
-                <span className="text-sm text-custom-text-200">{cycleOwnerDetails?.display_name}</span>
+                <span className="text-sm text-neutral-text-medium">{cycleOwnerDetails?.display_name}</span>
               </div>
             </div>
           </div>
 
           <div className="flex items-center justify-start gap-1">
-            <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+            <div className="flex w-1/2 items-center justify-start gap-2 text-neutral-text-medium">
               <LayersIcon className="h-4 w-4" />
               <span className="text-base">Issues</span>
             </div>
             <div className="flex w-1/2 items-center">
-              <span className="px-1.5 text-sm text-custom-text-300">{issueCount}</span>
+              <span className="px-1.5 text-sm text-neutral-text-medium">{issueCount}</span>
             </div>
           </div>
         </div>
@@ -540,7 +540,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                     disabled={!isStartValid || !isEndValid}
                   >
                     <div className="flex items-center justify-start gap-2 text-sm">
-                      <span className="font-medium text-custom-text-200">Progress</span>
+                      <span className="font-medium text-neutral-text-medium">Progress</span>
                     </div>
 
                     <div className="flex items-center gap-2.5">
@@ -555,8 +555,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                         <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
                       ) : (
                         <div className="flex items-center gap-1">
-                          <AlertCircle height={14} width={14} className="text-custom-text-200" />
-                          <span className="text-xs italic text-custom-text-200">
+                          <AlertCircle height={14} width={14} className="text-neutral-text-medium" />
+                          <span className="text-xs italic text-neutral-text-medium">
                             {cycleDetails?.start_date && cycleDetails?.end_date
                               ? "This cycle isn't active yet."
                               : "Invalid date. Please enter valid date."}
@@ -573,7 +573,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                         cycleDetails.end_date ? (
                           <div className="h-full w-full pt-4">
                             <div className="flex  items-start  gap-4 py-2 text-xs">
-                              <div className="flex items-center gap-3 text-custom-text-100">
+                              <div className="flex items-center gap-3 text-neutral-text-strong">
                                 <div className="flex items-center justify-center gap-1">
                                   <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
                                   <span>Ideal</span>
diff --git a/web/components/cycles/transfer-issues-modal.tsx b/web/components/cycles/transfer-issues-modal.tsx
index e0793aed3..73801d091 100644
--- a/web/components/cycles/transfer-issues-modal.tsx
+++ b/web/components/cycles/transfer-issues-modal.tsx
@@ -98,14 +98,14 @@ export const TransferIssuesModal: React.FC<Props> = observer((props) => {
                   <div className="flex items-center justify-between px-5">
                     <div className="flex items-center gap-3">
                       <TransferIcon className="h-4 w-4" color="#495057" />
-                      <h4 className="text-xl font-medium text-custom-text-100">Transfer Issues</h4>
+                      <h4 className="text-xl font-medium text-neutral-text-strong">Transfer Issues</h4>
                     </div>
                     <button onClick={handleClose}>
                       <X className="h-4 w-4" />
                     </button>
                   </div>
                   <div className="flex items-center gap-2 border-b border-neutral-border-medium px-5 pb-3">
-                    <Search className="h-4 w-4 text-custom-text-200" />
+                    <Search className="h-4 w-4 text-neutral-text-medium" />
                     <input
                       className="bg-neutral-component-surface-medium outline-none"
                       placeholder="Search for a cycle..."
@@ -124,7 +124,7 @@ export const TransferIssuesModal: React.FC<Props> = observer((props) => {
                           return (
                             <button
                               key={optionId}
-                              className="flex w-full items-center gap-4 rounded px-4 py-3 text-sm text-custom-text-200 hover:bg-neutral-component-surface-medium"
+                              className="flex w-full items-center gap-4 rounded px-4 py-3 text-sm text-neutral-text-medium hover:bg-neutral-component-surface-medium"
                               onClick={() => {
                                 transferIssue({
                                   new_cycle_id: optionId,
@@ -144,14 +144,14 @@ export const TransferIssuesModal: React.FC<Props> = observer((props) => {
                         })
                       ) : (
                         <div className="flex w-full items-center justify-center gap-4 p-5 text-sm">
-                          <AlertCircle className="h-3.5 w-3.5 text-custom-text-200" />
-                          <span className="text-center text-custom-text-200">
+                          <AlertCircle className="h-3.5 w-3.5 text-neutral-text-medium" />
+                          <span className="text-center text-neutral-text-medium">
                             You don’t have any current cycle. Please create one to transfer the issues.
                           </span>
                         </div>
                       )
                     ) : (
-                      <p className="text-center text-custom-text-200">Loading...</p>
+                      <p className="text-center text-neutral-text-medium">Loading...</p>
                     )}
                   </div>
                 </div>
diff --git a/web/components/cycles/transfer-issues.tsx b/web/components/cycles/transfer-issues.tsx
index 5ec23cd70..68f7741d2 100644
--- a/web/components/cycles/transfer-issues.tsx
+++ b/web/components/cycles/transfer-issues.tsx
@@ -38,8 +38,8 @@ export const TransferIssues: React.FC<Props> = (props) => {
 
   return (
     <div className="-mt-2 mb-4 flex items-center justify-between px-4 pt-6">
-      <div className="flex items-center gap-2 text-sm text-custom-text-200">
-        <AlertCircle className="h-3.5 w-3.5 text-custom-text-200" />
+      <div className="flex items-center gap-2 text-sm text-neutral-text-medium">
+        <AlertCircle className="h-3.5 w-3.5 text-neutral-text-medium" />
         <span>Completed cycles are not editable.</span>
       </div>
 
diff --git a/web/components/dashboard/project-empty-state.tsx b/web/components/dashboard/project-empty-state.tsx
index bb7f82f34..213a4d5e8 100644
--- a/web/components/dashboard/project-empty-state.tsx
+++ b/web/components/dashboard/project-empty-state.tsx
@@ -24,7 +24,7 @@ export const DashboardProjectEmptyState = observer(() => {
   return (
     <div className="h-full flex flex-col justify-center lg:w-3/5 mx-auto space-y-4">
       <h4 className="text-xl font-semibold">Overview of your projects, activity, and metrics</h4>
-      <p className="text-custom-text-300">
+      <p className="text-neutral-text-medium">
         Welcome to Plane, we are excited to have you here. Create your first project and track your issues, and this
         page will transform into a space that helps you progress. Admins will also see items which help their team
         progress.
diff --git a/web/components/dashboard/widgets/assigned-issues.tsx b/web/components/dashboard/widgets/assigned-issues.tsx
index ce0f68ad5..7d93c4fe3 100644
--- a/web/components/dashboard/widgets/assigned-issues.tsx
+++ b/web/components/dashboard/widgets/assigned-issues.tsx
@@ -75,7 +75,7 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       <div className="flex items-center justify-between gap-2 p-6 pl-7">
         <Link
           href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}
-          className="text-lg font-semibold text-custom-text-300 hover:underline"
+          className="text-lg font-semibold text-neutral-text-medium hover:underline"
         >
           Assigned to you
         </Link>
diff --git a/web/components/dashboard/widgets/created-issues.tsx b/web/components/dashboard/widgets/created-issues.tsx
index d037dc14f..296f69377 100644
--- a/web/components/dashboard/widgets/created-issues.tsx
+++ b/web/components/dashboard/widgets/created-issues.tsx
@@ -72,7 +72,7 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       <div className="flex items-center justify-between gap-2 p-6 pl-7">
         <Link
           href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}
-          className="text-lg font-semibold text-custom-text-300 hover:underline"
+          className="text-lg font-semibold text-neutral-text-medium hover:underline"
         >
           Created by you
         </Link>
diff --git a/web/components/dashboard/widgets/empty-states/assigned-issues.tsx b/web/components/dashboard/widgets/empty-states/assigned-issues.tsx
index f60d8efe6..ef8d3bcac 100644
--- a/web/components/dashboard/widgets/empty-states/assigned-issues.tsx
+++ b/web/components/dashboard/widgets/empty-states/assigned-issues.tsx
@@ -24,7 +24,7 @@ export const AssignedIssuesEmptyState: React.FC<Props> = (props) => {
       <div className="h-24 w-24">
         <Image src={image} className="w-full h-full" alt="Assigned issues" />
       </div>
-      <p className="text-sm font-medium text-custom-text-300 whitespace-pre-line">{typeDetails.title}</p>
+      <p className="text-sm font-medium text-neutral-text-medium whitespace-pre-line">{typeDetails.title}</p>
     </div>
   );
 };
diff --git a/web/components/dashboard/widgets/empty-states/created-issues.tsx b/web/components/dashboard/widgets/empty-states/created-issues.tsx
index fe93d4404..c2a165002 100644
--- a/web/components/dashboard/widgets/empty-states/created-issues.tsx
+++ b/web/components/dashboard/widgets/empty-states/created-issues.tsx
@@ -23,7 +23,7 @@ export const CreatedIssuesEmptyState: React.FC<Props> = (props) => {
       <div className="h-24 w-24">
         <Image src={image} className="w-full h-full" alt="Assigned issues" />
       </div>
-      <p className="text-sm font-medium text-custom-text-300 whitespace-pre-line">{typeDetails.title}</p>
+      <p className="text-sm font-medium text-neutral-text-medium whitespace-pre-line">{typeDetails.title}</p>
     </div>
   );
 };
diff --git a/web/components/dashboard/widgets/empty-states/issues-by-priority.tsx b/web/components/dashboard/widgets/empty-states/issues-by-priority.tsx
index 83c1d0042..156d4b040 100644
--- a/web/components/dashboard/widgets/empty-states/issues-by-priority.tsx
+++ b/web/components/dashboard/widgets/empty-states/issues-by-priority.tsx
@@ -15,7 +15,7 @@ export const IssuesByPriorityEmptyState = () => {
       <div className="h-24 w-24">
         <Image src={image} className="w-full h-full" alt="Issues by state group" />
       </div>
-      <p className="text-sm font-medium text-custom-text-300">
+      <p className="text-sm font-medium text-neutral-text-medium">
         Issues assigned to you, broken down by
         <br />
         priority will show up here.
diff --git a/web/components/dashboard/widgets/empty-states/issues-by-state-group.tsx b/web/components/dashboard/widgets/empty-states/issues-by-state-group.tsx
index b4cc81ce7..d2e9690af 100644
--- a/web/components/dashboard/widgets/empty-states/issues-by-state-group.tsx
+++ b/web/components/dashboard/widgets/empty-states/issues-by-state-group.tsx
@@ -15,7 +15,7 @@ export const IssuesByStateGroupEmptyState = () => {
       <div className="h-24 w-24">
         <Image src={image} className="w-full h-full" alt="Issues by state group" />
       </div>
-      <p className="text-sm font-medium text-custom-text-300">
+      <p className="text-sm font-medium text-neutral-text-medium">
         Issue assigned to you, broken down by state,
         <br />
         will show up here.
diff --git a/web/components/dashboard/widgets/empty-states/recent-activity.tsx b/web/components/dashboard/widgets/empty-states/recent-activity.tsx
index ff4218ace..3cce0cc59 100644
--- a/web/components/dashboard/widgets/empty-states/recent-activity.tsx
+++ b/web/components/dashboard/widgets/empty-states/recent-activity.tsx
@@ -15,7 +15,7 @@ export const RecentActivityEmptyState = () => {
       <div className="h-24 w-24">
         <Image src={image} className="w-full h-full" alt="Issues by state group" />
       </div>
-      <p className="text-sm font-medium text-custom-text-300">
+      <p className="text-sm font-medium text-neutral-text-medium">
         All your issue activities across
         <br />
         projects will show up here.
diff --git a/web/components/dashboard/widgets/empty-states/recent-collaborators.tsx b/web/components/dashboard/widgets/empty-states/recent-collaborators.tsx
index ef1c63f73..6b0261b19 100644
--- a/web/components/dashboard/widgets/empty-states/recent-collaborators.tsx
+++ b/web/components/dashboard/widgets/empty-states/recent-collaborators.tsx
@@ -18,7 +18,7 @@ export const RecentCollaboratorsEmptyState = () => {
 
   return (
     <div className="mt-7 mb-16 px-36 flex flex-col lg:flex-row items-center justify-between gap-x-24 gap-y-16">
-      <p className="text-sm font-medium text-custom-text-300 lg:w-2/5 flex-shrink-0 text-center lg:text-left">
+      <p className="text-sm font-medium text-neutral-text-medium lg:w-2/5 flex-shrink-0 text-center lg:text-left">
         Compare your activities with the top
         <br />
         seven in your project.
diff --git a/web/components/dashboard/widgets/issue-panels/issues-list.tsx b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
index bf7006881..10b776329 100644
--- a/web/components/dashboard/widgets/issue-panels/issues-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
@@ -66,7 +66,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
           <></>
         ) : issues.length > 0 ? (
           <>
-            <div className="mt-7 mx-6 border-b-[0.5px] border-neutral-border-medium grid grid-cols-6 gap-1 text-xs text-custom-text-300 pb-1">
+            <div className="mt-7 mx-6 border-b-[0.5px] border-neutral-border-medium grid grid-cols-6 gap-1 text-xs text-neutral-text-medium pb-1">
               <h6
                 className={cn("pl-1 flex items-center gap-1 col-span-4", {
                   "col-span-6": type === "assigned" && tab === "completed",
diff --git a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
index 0a0e713a4..af8ae0fa4 100644
--- a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
@@ -43,11 +43,11 @@ export const TabsList: React.FC<Props> = observer((props) => {
         <Tab
           key={tab.key}
           className={cn(
-            "relative z-[1] font-semibold text-xs rounded py-1.5 text-custom-text-400 focus:outline-none",
+            "relative z-[1] font-semibold text-xs rounded py-1.5 text-neutral-text-subtle focus:outline-none",
             "transition duration-500",
             {
-              "text-custom-text-100 bg-custom-background-100": selectedTab === tab.key,
-              "hover:text-custom-text-300": selectedTab !== tab.key,
+              "text-neutral-text-strong bg-custom-background-100": selectedTab === tab.key,
+              "hover:text-neutral-text-medium": selectedTab !== tab.key,
               // // right shadow
               // "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
               // // left shadow
diff --git a/web/components/dashboard/widgets/issues-by-priority.tsx b/web/components/dashboard/widgets/issues-by-priority.tsx
index f7f8ca7a6..eebd448bb 100644
--- a/web/components/dashboard/widgets/issues-by-priority.tsx
+++ b/web/components/dashboard/widgets/issues-by-priority.tsx
@@ -134,7 +134,7 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
       <div className="flex items-center justify-between gap-2 pl-7 pr-6">
         <Link
           href={`/${workspaceSlug}/workspace-views/assigned`}
-          className="text-lg font-semibold text-custom-text-300 hover:underline"
+          className="text-lg font-semibold text-neutral-text-medium hover:underline"
         >
           Assigned by priority
         </Link>
@@ -179,7 +179,7 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
               enableGridY={false}
               layers={[CustomBarsLayer]}
             />
-            <div className="flex items-center gap-1 w-full mt-3 text-sm font-semibold text-custom-text-300">
+            <div className="flex items-center gap-1 w-full mt-3 text-sm font-semibold text-neutral-text-medium">
               {chartData.map((item) => (
                 <p
                   key={item.priority}
diff --git a/web/components/dashboard/widgets/issues-by-state-group.tsx b/web/components/dashboard/widgets/issues-by-state-group.tsx
index b19e87e9d..f5f3c35a8 100644
--- a/web/components/dashboard/widgets/issues-by-state-group.tsx
+++ b/web/components/dashboard/widgets/issues-by-state-group.tsx
@@ -133,7 +133,7 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
       <div className="flex items-center justify-between gap-2 pl-7 pr-6">
         <Link
           href={`/${workspaceSlug}/workspace-views/assigned`}
-          className="text-lg font-semibold text-custom-text-300 hover:underline"
+          className="text-lg font-semibold text-neutral-text-medium hover:underline"
         >
           Assigned by state
         </Link>
@@ -195,9 +195,9 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
                         backgroundColor: item.color,
                       }}
                     />
-                    <span className="text-custom-text-300 text-sm font-medium capitalize">{item.label}</span>
+                    <span className="text-neutral-text-medium text-sm font-medium capitalize">{item.label}</span>
                   </div>
-                  <span className="text-custom-text-400 text-sm">{item.value.toFixed(0)}%</span>
+                  <span className="text-neutral-text-subtle text-sm">{item.value.toFixed(0)}%</span>
                 </div>
               ))}
             </div>
diff --git a/web/components/dashboard/widgets/overview-stats.tsx b/web/components/dashboard/widgets/overview-stats.tsx
index 96dbc2753..b7406e1d3 100644
--- a/web/components/dashboard/widgets/overview-stats.tsx
+++ b/web/components/dashboard/widgets/overview-stats.tsx
@@ -86,7 +86,7 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
             <div className={`relative flex pl-10 sm:pl-20 md:pl-20 lg:pl-20 items-center`}>
               <div>
                 <h5 className="font-semibold text-xl">{stat.count}</h5>
-                <p className="text-custom-text-300 text-sm xl:text-base">{stat.title}</p>
+                <p className="text-neutral-text-medium text-sm xl:text-base">{stat.title}</p>
               </div>
             </div>
           </Link>
diff --git a/web/components/dashboard/widgets/recent-activity.tsx b/web/components/dashboard/widgets/recent-activity.tsx
index 1300ad91b..d4e67a22a 100644
--- a/web/components/dashboard/widgets/recent-activity.tsx
+++ b/web/components/dashboard/widgets/recent-activity.tsx
@@ -35,7 +35,7 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
 
   return (
     <div className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full py-6 hover:shadow-custom-shadow-4xl duration-300 min-h-96">
-      <Link href="/profile/activity" className="text-lg font-semibold text-custom-text-300 mx-7 hover:underline">
+      <Link href="/profile/activity" className="text-lg font-semibold text-neutral-text-medium mx-7 hover:underline">
         Your issue activities
       </Link>
       {widgetStats.length > 0 ? (
@@ -45,7 +45,7 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
               <div className="flex-shrink-0">
                 {activity.field ? (
                   activity.new_value === "restore" ? (
-                    <History className="h-3.5 w-3.5 text-custom-text-200" />
+                    <History className="h-3.5 w-3.5 text-neutral-text-medium" />
                   ) : (
                     <div className="h-6 w-6 flex justify-center">
                       <ActivityIcon activity={activity} />
@@ -67,8 +67,8 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
                 )}
               </div>
               <div className="-mt-1 break-words">
-                <p className="text-sm text-custom-text-200">
-                  <span className="font-medium text-custom-text-100">
+                <p className="text-sm text-neutral-text-medium">
+                  <span className="font-medium text-neutral-text-strong">
                     {currentUser?.id === activity.actor_detail.id ? "You" : activity.actor_detail.display_name}{" "}
                   </span>
                   {activity.field ? (
@@ -79,7 +79,7 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
                     </span>
                   )}
                 </p>
-                <p className="text-xs text-custom-text-200">{calculateTimeAgo(activity.created_at)}</p>
+                <p className="text-xs text-neutral-text-medium">{calculateTimeAgo(activity.created_at)}</p>
               </div>
             </div>
           ))}
diff --git a/web/components/dashboard/widgets/recent-collaborators.tsx b/web/components/dashboard/widgets/recent-collaborators.tsx
index 1bbfaabf7..05dbbba82 100644
--- a/web/components/dashboard/widgets/recent-collaborators.tsx
+++ b/web/components/dashboard/widgets/recent-collaborators.tsx
@@ -68,8 +68,8 @@ export const RecentCollaboratorsWidget: React.FC<WidgetProps> = observer((props)
   return (
     <div className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full hover:shadow-custom-shadow-4xl duration-300">
       <div className="px-7 pt-6">
-        <h4 className="text-lg font-semibold text-custom-text-300">Most active members</h4>
-        <p className="mt-2 text-xs font-medium text-custom-text-300">
+        <h4 className="text-lg font-semibold text-neutral-text-medium">Most active members</h4>
+        <p className="mt-2 text-xs font-medium text-neutral-text-medium">
           Top eight active members in your project by last activity
         </p>
       </div>
diff --git a/web/components/dashboard/widgets/recent-projects.tsx b/web/components/dashboard/widgets/recent-projects.tsx
index 4fc145fe9..781dff631 100644
--- a/web/components/dashboard/widgets/recent-projects.tsx
+++ b/web/components/dashboard/widgets/recent-projects.tsx
@@ -51,7 +51,7 @@ const ProjectListItem: React.FC<ProjectListItemProps> = observer((props) => {
         )}
       </div>
       <div className="flex-grow truncate">
-        <h6 className="text-sm text-custom-text-300 font-medium group-hover:underline group-hover:text-custom-text-100 truncate">
+        <h6 className="text-sm text-neutral-text-medium font-medium group-hover:underline group-hover:text-neutral-text-strong truncate">
           {projectDetails.name}
         </h6>
         <div className="mt-2">
@@ -94,7 +94,7 @@ export const RecentProjectsWidget: React.FC<WidgetProps> = observer((props) => {
     <div className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full py-6 hover:shadow-custom-shadow-4xl duration-300 min-h-96">
       <Link
         href={`/${workspaceSlug}/projects`}
-        className="text-lg font-semibold text-custom-text-300 mx-7 hover:underline"
+        className="text-lg font-semibold text-neutral-text-medium mx-7 hover:underline"
       >
         Your projects
       </Link>
@@ -113,7 +113,7 @@ export const RecentProjectsWidget: React.FC<WidgetProps> = observer((props) => {
             <div className="h-[3.375rem] w-[3.375rem] bg-custom-primary-100/20 text-custom-primary-100 grid place-items-center rounded border border-dashed border-custom-primary-60 flex-shrink-0">
               <Plus className="h-6 w-6" />
             </div>
-            <p className="text-sm text-custom-text-300 font-medium group-hover:underline group-hover:text-custom-text-100">
+            <p className="text-sm text-neutral-text-medium font-medium group-hover:underline group-hover:text-neutral-text-strong">
               Create new project
             </p>
           </button>
diff --git a/web/components/dropdowns/cycle.tsx b/web/components/dropdowns/cycle.tsx
index ee7fa4d6d..e837dc267 100644
--- a/web/components/dropdowns/cycle.tsx
+++ b/web/components/dropdowns/cycle.tsx
@@ -179,7 +179,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
             className={cn(
               "block h-full max-w-full outline-none",
               {
-                "cursor-not-allowed text-custom-text-200": disabled,
+                "cursor-not-allowed text-neutral-text-medium": disabled,
                 "cursor-pointer": !disabled,
               },
               buttonContainerClassName
@@ -214,9 +214,9 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
             {...attributes.popper}
           >
             <div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-neutral-component-surface-medium px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+              <Search className="h-3.5 w-3.5 text-neutral-text-subtle" strokeWidth={1.5} />
               <Combobox.Input
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                className="w-full bg-transparent py-1 text-xs text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Search"
@@ -233,7 +233,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
                       className={({ active, selected }) =>
                         `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
                           active ? "bg-neutral-component-surface-dark" : ""
-                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                        } ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
                       }
                     >
                       {({ selected }) => (
@@ -245,10 +245,10 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
                     </Combobox.Option>
                   ))
                 ) : (
-                  <p className="text-custom-text-400 italic py-1 px-1.5">No matches found</p>
+                  <p className="text-neutral-text-subtle italic py-1 px-1.5">No matches found</p>
                 )
               ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+                <p className="text-neutral-text-subtle italic py-1 px-1.5">Loading...</p>
               )}
             </div>
           </div>
diff --git a/web/components/dropdowns/date.tsx b/web/components/dropdowns/date.tsx
index 2603b3eb2..76e8a9019 100644
--- a/web/components/dropdowns/date.tsx
+++ b/web/components/dropdowns/date.tsx
@@ -118,7 +118,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
           className={cn(
             "clickable block h-full max-w-full outline-none",
             {
-              "cursor-not-allowed text-custom-text-200": disabled,
+              "cursor-not-allowed text-neutral-text-medium": disabled,
               "cursor-pointer": !disabled,
             },
             buttonContainerClassName
diff --git a/web/components/dropdowns/estimate.tsx b/web/components/dropdowns/estimate.tsx
index 650d48e09..6358ee4a2 100644
--- a/web/components/dropdowns/estimate.tsx
+++ b/web/components/dropdowns/estimate.tsx
@@ -168,7 +168,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
             className={cn(
               "clickable block h-full max-w-full outline-none",
               {
-                "cursor-not-allowed text-custom-text-200": disabled,
+                "cursor-not-allowed text-neutral-text-medium": disabled,
                 "cursor-pointer": !disabled,
               },
               buttonContainerClassName
@@ -203,9 +203,9 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
             {...attributes.popper}
           >
             <div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-neutral-component-surface-medium px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+              <Search className="h-3.5 w-3.5 text-neutral-text-subtle" strokeWidth={1.5} />
               <Combobox.Input
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                className="w-full bg-transparent py-1 text-xs text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Search"
@@ -222,7 +222,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
                       className={({ active, selected }) =>
                         `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
                           active ? "bg-neutral-component-surface-dark" : ""
-                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                        } ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
                       }
                     >
                       {({ selected }) => (
@@ -234,10 +234,10 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
                     </Combobox.Option>
                   ))
                 ) : (
-                  <p className="text-custom-text-400 italic py-1 px-1.5">No matching results</p>
+                  <p className="text-neutral-text-subtle italic py-1 px-1.5">No matching results</p>
                 )
               ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+                <p className="text-neutral-text-subtle italic py-1 px-1.5">Loading...</p>
               )}
             </div>
           </div>
diff --git a/web/components/dropdowns/member/project-member.tsx b/web/components/dropdowns/member/project-member.tsx
index 27b085175..ad979db5b 100644
--- a/web/components/dropdowns/member/project-member.tsx
+++ b/web/components/dropdowns/member/project-member.tsx
@@ -160,7 +160,7 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
             className={cn(
               "clickable block h-full max-w-full outline-none",
               {
-                "cursor-not-allowed text-custom-text-200": disabled,
+                "cursor-not-allowed text-neutral-text-medium": disabled,
                 "cursor-pointer": !disabled,
               },
               buttonContainerClassName
@@ -201,9 +201,9 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
             {...attributes.popper}
           >
             <div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-neutral-component-surface-medium px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+              <Search className="h-3.5 w-3.5 text-neutral-text-subtle" strokeWidth={1.5} />
               <Combobox.Input
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                className="w-full bg-transparent py-1 text-xs text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Search"
@@ -220,7 +220,7 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
                       className={({ active, selected }) =>
                         `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
                           active ? "bg-neutral-component-surface-dark" : ""
-                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                        } ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
                       }
                     >
                       {({ selected }) => (
@@ -232,10 +232,10 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
                     </Combobox.Option>
                   ))
                 ) : (
-                  <p className="text-custom-text-400 italic py-1 px-1.5">No matching results</p>
+                  <p className="text-neutral-text-subtle italic py-1 px-1.5">No matching results</p>
                 )
               ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+                <p className="text-neutral-text-subtle italic py-1 px-1.5">Loading...</p>
               )}
             </div>
           </div>
diff --git a/web/components/dropdowns/member/workspace-member.tsx b/web/components/dropdowns/member/workspace-member.tsx
index 32992794f..be6c99c19 100644
--- a/web/components/dropdowns/member/workspace-member.tsx
+++ b/web/components/dropdowns/member/workspace-member.tsx
@@ -149,7 +149,7 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
             className={cn(
               "clickable block h-full max-w-full outline-none",
               {
-                "cursor-not-allowed text-custom-text-200": disabled,
+                "cursor-not-allowed text-neutral-text-medium": disabled,
                 "cursor-pointer": !disabled,
               },
               buttonContainerClassName
@@ -190,9 +190,9 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
             {...attributes.popper}
           >
             <div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-custom-background-90 px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+              <Search className="h-3.5 w-3.5 text-neutral-text-subtle" strokeWidth={1.5} />
               <Combobox.Input
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                className="w-full bg-transparent py-1 text-xs text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Search"
@@ -209,7 +209,7 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
                       className={({ active, selected }) =>
                         `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
                           active ? "bg-custom-background-80" : ""
-                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                        } ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
                       }
                     >
                       {({ selected }) => (
@@ -221,10 +221,10 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
                     </Combobox.Option>
                   ))
                 ) : (
-                  <p className="text-custom-text-400 italic py-1 px-1.5">No matching results</p>
+                  <p className="text-neutral-text-subtle italic py-1 px-1.5">No matching results</p>
                 )
               ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+                <p className="text-neutral-text-subtle italic py-1 px-1.5">Loading...</p>
               )}
             </div>
           </div>
diff --git a/web/components/dropdowns/module.tsx b/web/components/dropdowns/module.tsx
index 07c4eeaed..0144025b8 100644
--- a/web/components/dropdowns/module.tsx
+++ b/web/components/dropdowns/module.tsx
@@ -90,7 +90,7 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
               return (
                 <div
                   key={moduleId}
-                  className="flex items-center gap-1 bg-custom-background-80 text-custom-text-200 rounded px-1.5 py-1"
+                  className="flex items-center gap-1 bg-custom-background-80 text-neutral-text-medium rounded px-1.5 py-1"
                 >
                   {!hideIcon && <DiceIcon className="h-2.5 w-2.5 flex-shrink-0" />}
                   {!hideText && (
@@ -108,7 +108,7 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
                           onChange(newModuleIds);
                         }}
                       >
-                        <X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
+                        <X className="h-2.5 w-2.5 text-neutral-text-medium hover:text-red-500" />
                       </button>
                     </Tooltip>
                   )}
@@ -287,7 +287,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
             className={cn(
               "clickable block h-full max-w-full outline-none",
               {
-                "cursor-not-allowed text-custom-text-200": disabled,
+                "cursor-not-allowed text-neutral-text-medium": disabled,
                 "cursor-pointer": !disabled,
               },
               buttonContainerClassName
@@ -329,9 +329,9 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
             {...attributes.popper}
           >
             <div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-neutral-component-surface-medium px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+              <Search className="h-3.5 w-3.5 text-neutral-text-subtle" strokeWidth={1.5} />
               <Combobox.Input
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                className="w-full bg-transparent py-1 text-xs text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Search"
@@ -350,8 +350,8 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
                           "w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none",
                           {
                             "bg-custom-background-80": active,
-                            "text-custom-text-100": selected,
-                            "text-custom-text-200": !selected,
+                            "text-neutral-text-strong": selected,
+                            "text-neutral-text-medium": !selected,
                           }
                         )
                       }
@@ -365,10 +365,10 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
                     </Combobox.Option>
                   ))
                 ) : (
-                  <p className="text-custom-text-400 italic py-1 px-1.5">No matching results</p>
+                  <p className="text-neutral-text-subtle italic py-1 px-1.5">No matching results</p>
                 )
               ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+                <p className="text-neutral-text-subtle italic py-1 px-1.5">Loading...</p>
               )}
             </div>
           </div>
diff --git a/web/components/dropdowns/priority.tsx b/web/components/dropdowns/priority.tsx
index 6cda1cbcb..608c381f1 100644
--- a/web/components/dropdowns/priority.tsx
+++ b/web/components/dropdowns/priority.tsx
@@ -376,7 +376,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
             className={cn(
               "clickable block h-full max-w-full outline-none",
               {
-                "cursor-not-allowed text-custom-text-200": disabled,
+                "cursor-not-allowed text-neutral-text-medium": disabled,
                 "cursor-pointer": !disabled,
               },
               buttonContainerClassName
@@ -407,9 +407,9 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
             {...attributes.popper}
           >
             <div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-neutral-component-surface-medium px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+              <Search className="h-3.5 w-3.5 text-neutral-text-subtle" strokeWidth={1.5} />
               <Combobox.Input
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                className="w-full bg-transparent py-1 text-xs text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Search"
@@ -425,7 +425,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
                     className={({ active, selected }) =>
                       `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
                         active ? "bg-neutral-component-surface-dark" : ""
-                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      } ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
                     }
                   >
                     {({ selected }) => (
@@ -437,7 +437,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
                   </Combobox.Option>
                 ))
               ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">No matching results</p>
+                <p className="text-neutral-text-subtle italic py-1 px-1.5">No matching results</p>
               )}
             </div>
           </div>
diff --git a/web/components/dropdowns/project.tsx b/web/components/dropdowns/project.tsx
index b540003df..e3649131c 100644
--- a/web/components/dropdowns/project.tsx
+++ b/web/components/dropdowns/project.tsx
@@ -153,7 +153,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
             className={cn(
               "clickable block h-full max-w-full outline-none",
               {
-                "cursor-not-allowed text-custom-text-200": disabled,
+                "cursor-not-allowed text-neutral-text-medium": disabled,
                 "cursor-pointer": !disabled,
               },
               buttonContainerClassName
@@ -196,9 +196,9 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
             {...attributes.popper}
           >
             <div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-neutral-component-surface-medium px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+              <Search className="h-3.5 w-3.5 text-neutral-text-subtle" strokeWidth={1.5} />
               <Combobox.Input
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                className="w-full bg-transparent py-1 text-xs text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Search"
@@ -215,7 +215,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
                       className={({ active, selected }) =>
                         `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
                           active ? "bg-neutral-component-surface-dark" : ""
-                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                        } ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
                       }
                     >
                       {({ selected }) => (
@@ -227,10 +227,10 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
                     </Combobox.Option>
                   ))
                 ) : (
-                  <p className="text-custom-text-400 italic py-1 px-1.5">No matching results</p>
+                  <p className="text-neutral-text-subtle italic py-1 px-1.5">No matching results</p>
                 )
               ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+                <p className="text-neutral-text-subtle italic py-1 px-1.5">Loading...</p>
               )}
             </div>
           </div>
diff --git a/web/components/dropdowns/state.tsx b/web/components/dropdowns/state.tsx
index 2f128e1ab..59f0e44c9 100644
--- a/web/components/dropdowns/state.tsx
+++ b/web/components/dropdowns/state.tsx
@@ -150,7 +150,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
             className={cn(
               "clickable block h-full max-w-full outline-none",
               {
-                "cursor-not-allowed text-custom-text-200": disabled,
+                "cursor-not-allowed text-neutral-text-medium": disabled,
                 "cursor-pointer": !disabled,
               },
               buttonContainerClassName
@@ -191,9 +191,9 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
             {...attributes.popper}
           >
             <div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-neutral-component-surface-medium px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+              <Search className="h-3.5 w-3.5 text-neutral-text-subtle" strokeWidth={1.5} />
               <Combobox.Input
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                className="w-full bg-transparent py-1 text-xs text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Search"
@@ -210,7 +210,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
                       className={({ active, selected }) =>
                         `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
                           active ? "bg-neutral-component-surface-dark" : ""
-                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                        } ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
                       }
                     >
                       {({ selected }) => (
@@ -222,10 +222,10 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
                     </Combobox.Option>
                   ))
                 ) : (
-                  <p className="text-custom-text-400 italic py-1 px-1.5">No matches found</p>
+                  <p className="text-neutral-text-subtle italic py-1 px-1.5">No matches found</p>
                 )
               ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+                <p className="text-neutral-text-subtle italic py-1 px-1.5">Loading...</p>
               )}
             </div>
           </div>
diff --git a/web/components/emoji-icon-picker/index.tsx b/web/components/emoji-icon-picker/index.tsx
index 512442ec6..d10cdfa9e 100644
--- a/web/components/emoji-icon-picker/index.tsx
+++ b/web/components/emoji-icon-picker/index.tsx
@@ -85,7 +85,7 @@ const EmojiIconPicker: React.FC<Props> = (props) => {
                           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-custom-text-200"
+                          selected ? "" : "border-transparent text-neutral-text-medium"
                         }`}
                       >
                         {tab.title}
@@ -98,7 +98,7 @@ const EmojiIconPicker: React.FC<Props> = (props) => {
                 <Tab.Panel>
                   {recentEmojis.length > 0 && (
                     <div className="py-2">
-                      <h3 className="mb-2 text-xs text-custom-text-200">Recent</h3>
+                      <h3 className="mb-2 text-xs text-neutral-text-medium">Recent</h3>
                       <div className="grid grid-cols-8 gap-2">
                         {recentEmojis.map((emoji) => (
                           <button
diff --git a/web/components/estimates/create-update-estimate-modal.tsx b/web/components/estimates/create-update-estimate-modal.tsx
index 00d2ef0f4..0187e6003 100644
--- a/web/components/estimates/create-update-estimate-modal.tsx
+++ b/web/components/estimates/create-update-estimate-modal.tsx
@@ -274,7 +274,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
                           .map((_, i) => (
                             <div className="flex items-center">
                               <span className="flex h-full items-center rounded-lg bg-neutral-component-surface-dark">
-                                <span className="rounded-lg px-2 text-sm text-custom-text-200">{i + 1}</span>
+                                <span className="rounded-lg px-2 text-sm text-neutral-text-medium">{i + 1}</span>
                                 <span className="rounded-r-lg bg-neutral-component-surface-light">
                                   <Controller
                                     control={control}
diff --git a/web/components/estimates/delete-estimate-modal.tsx b/web/components/estimates/delete-estimate-modal.tsx
index 2b4396e9e..7fc861112 100644
--- a/web/components/estimates/delete-estimate-modal.tsx
+++ b/web/components/estimates/delete-estimate-modal.tsx
@@ -97,9 +97,9 @@ export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
                     </span>
                   </div>
                   <span>
-                    <p className="break-words text-sm leading-7 text-custom-text-200">
+                    <p className="break-words text-sm leading-7 text-neutral-text-medium">
                       Are you sure you want to delete estimate-{" "}
-                      <span className="break-words font-medium text-custom-text-100">{data?.name}</span>
+                      <span className="break-words font-medium text-neutral-text-strong">{data?.name}</span>
                       {""}? All of the data related to the estiamte will be permanently removed. This action cannot be
                       undone.
                     </p>
diff --git a/web/components/estimates/estimate-list-item.tsx b/web/components/estimates/estimate-list-item.tsx
index 96cafffa6..d02a48a60 100644
--- a/web/components/estimates/estimate-list-item.tsx
+++ b/web/components/estimates/estimate-list-item.tsx
@@ -57,7 +57,7 @@ export const EstimateListItem: React.FC<Props> = observer((props) => {
                 <span className="rounded bg-green-500/20 px-2 py-0.5 text-xs text-green-500">In use</span>
               )}
             </h6>
-            <p className="font-sm w-[40vw] truncate text-[14px] font-normal text-custom-text-200">
+            <p className="font-sm w-[40vw] truncate text-[14px] font-normal text-neutral-text-medium">
               {estimate.description}
             </p>
           </div>
@@ -94,11 +94,11 @@ export const EstimateListItem: React.FC<Props> = observer((props) => {
           </div>
         </div>
         {estimate?.points?.length > 0 ? (
-          <div className="flex text-xs text-custom-text-200">
+          <div className="flex text-xs text-neutral-text-medium">
             Estimate points (
             <span className="flex gap-1">
               {orderArrayBy(estimate.points, "key").map((point, index) => (
-                <h6 key={point.id} className="text-custom-text-200">
+                <h6 key={point.id} className="text-neutral-text-medium">
                   {point.value}
                   {index !== estimate.points.length - 1 && ","}{" "}
                 </h6>
@@ -108,7 +108,7 @@ export const EstimateListItem: React.FC<Props> = observer((props) => {
           </div>
         ) : (
           <div>
-            <p className="text-xs text-custom-text-200">No estimate points</p>
+            <p className="text-xs text-neutral-text-medium">No estimate points</p>
           </div>
         )}
       </div>
diff --git a/web/components/exporter/export-modal.tsx b/web/components/exporter/export-modal.tsx
index 01c228471..8c9a2a207 100644
--- a/web/components/exporter/export-modal.tsx
+++ b/web/components/exporter/export-modal.tsx
@@ -45,7 +45,7 @@ export const Exporter: React.FC<Props> = observer((props) => {
       query: `${projectDetails?.name} ${projectDetails?.identifier}`,
       content: (
         <div className="flex items-center gap-2">
-          <span className="text-[0.65rem] text-custom-text-200">{projectDetails?.identifier}</span>
+          <span className="text-[0.65rem] text-neutral-text-medium">{projectDetails?.identifier}</span>
           {projectDetails?.name}
         </div>
       ),
diff --git a/web/components/exporter/guide.tsx b/web/components/exporter/guide.tsx
index c87c8c098..67651c006 100644
--- a/web/components/exporter/guide.tsx
+++ b/web/components/exporter/guide.tsx
@@ -67,7 +67,7 @@ const IntegrationGuide = observer(() => {
                     </div>
                     <div>
                       <h3 className="flex items-center gap-4 text-sm font-medium">{service.title}</h3>
-                      <p className="text-sm tracking-tight text-custom-text-200">{service.description}</p>
+                      <p className="text-sm tracking-tight text-neutral-text-medium">{service.description}</p>
                     </div>
                   </div>
                   <div className="flex-shrink-0">
@@ -140,7 +140,7 @@ const IntegrationGuide = observer(() => {
                     </div>
                   </div>
                 ) : (
-                  <p className="px-4 py-6 text-sm text-custom-text-200">No previous export available.</p>
+                  <p className="px-4 py-6 text-sm text-neutral-text-medium">No previous export available.</p>
                 )
               ) : (
                 <Loader className="mt-6 grid grid-cols-1 gap-3">
diff --git a/web/components/exporter/single-export.tsx b/web/components/exporter/single-export.tsx
index 34e41fc35..ad6d13a3e 100644
--- a/web/components/exporter/single-export.tsx
+++ b/web/components/exporter/single-export.tsx
@@ -49,7 +49,7 @@ export const SingleExport: FC<Props> = ({ service, refreshing }) => {
             {refreshing ? "Refreshing..." : service.status}
           </span>
         </h4>
-        <div className="mt-2 flex items-center gap-2 text-xs text-custom-text-200">
+        <div className="mt-2 flex items-center gap-2 text-xs text-neutral-text-medium">
           <span>{renderFormattedDate(service.created_at)}</span>|
           <span>Exported by {service?.initiated_by_detail?.display_name}</span>
         </div>
diff --git a/web/components/gantt-chart/chart/index.tsx b/web/components/gantt-chart/chart/index.tsx
index 9e758f3ce..75b8ce93f 100644
--- a/web/components/gantt-chart/chart/index.tsx
+++ b/web/components/gantt-chart/chart/index.tsx
@@ -228,7 +228,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
         {title && (
           <div className="flex items-center gap-2 text-lg font-medium">
             <div>{title}</div>
-            {/* <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">
+            {/* <div className="text-xs rounded-full px-2 py-1 font-bold border border-custom-primary/75 bg-custom-primary/5 text-neutral-text-strong">
               Gantt View Beta
             </div> */}
           </div>
@@ -288,7 +288,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
         }`}
       >
         <div id="gantt-sidebar" className="flex h-full w-1/4 flex-col border-r border-neutral-border-medium">
-          <div className="box-border flex h-[60px] flex-shrink-0 items-end justify-between gap-2 border-b border-neutral-border-medium pb-2 pl-10 pr-4 text-sm font-medium text-custom-text-300">
+          <div className="box-border flex h-[60px] flex-shrink-0 items-end justify-between gap-2 border-b border-neutral-border-medium pb-2 pl-10 pr-4 text-sm font-medium text-neutral-text-medium">
             <h6>{title}</h6>
             <h6>Duration</h6>
           </div>
diff --git a/web/components/gantt-chart/chart/month.tsx b/web/components/gantt-chart/chart/month.tsx
index 111f6fd65..530a2c51f 100644
--- a/web/components/gantt-chart/chart/month.tsx
+++ b/web/components/gantt-chart/chart/month.tsx
@@ -33,7 +33,7 @@ export const MonthChartView: FC<any> = () => {
                         style={{ width: `${currentViewData?.data.width}px` }}
                       >
                         <div className="space-x-1 text-xs">
-                          <span className="text-custom-text-200">{monthDay.dayData.shortTitle[0]}</span>{" "}
+                          <span className="text-neutral-text-medium">{monthDay.dayData.shortTitle[0]}</span>{" "}
                           <span className={monthDay.today ? "rounded-full bg-custom-primary-100 px-1 text-white" : ""}>
                             {monthDay.day}
                           </span>
diff --git a/web/components/gantt-chart/helpers/add-block.tsx b/web/components/gantt-chart/helpers/add-block.tsx
index c202f963f..d6661650c 100644
--- a/web/components/gantt-chart/helpers/add-block.tsx
+++ b/web/components/gantt-chart/helpers/add-block.tsx
@@ -76,7 +76,7 @@ export const ChartAddBlock: React.FC<Props> = (props) => {
         <Tooltip tooltipContent={buttonStartDate && renderFormattedDate(buttonStartDate)}>
           <button
             type="button"
-            className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 h-8 w-8 bg-custom-background-80 p-1.5 rounded border border-neutral-border-medium grid place-items-center text-custom-text-200 hover:text-custom-text-100"
+            className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 h-8 w-8 bg-custom-background-80 p-1.5 rounded border border-neutral-border-medium grid place-items-center text-neutral-text-medium hover:text-neutral-text-strong"
             style={{
               marginLeft: `${buttonXPosition}px`,
             }}
diff --git a/web/components/gantt-chart/helpers/draggable.tsx b/web/components/gantt-chart/helpers/draggable.tsx
index b1f98b249..1b734604f 100644
--- a/web/components/gantt-chart/helpers/draggable.tsx
+++ b/web/components/gantt-chart/helpers/draggable.tsx
@@ -228,7 +228,7 @@ export const ChartDraggable: React.FC<Props> = (props) => {
       {/* move to left side hidden block button */}
       {isBlockHiddenOnLeft && (
         <div
-          className="fixed z-[1] ml-1 mt-1.5 grid h-8 w-8 cursor-pointer place-items-center rounded border border-neutral-border-medium bg-neutral-component-surface-dark text-custom-text-200 hover:text-custom-text-100"
+          className="fixed z-[1] ml-1 mt-1.5 grid h-8 w-8 cursor-pointer place-items-center rounded border border-neutral-border-medium bg-neutral-component-surface-dark text-neutral-text-medium hover:text-neutral-text-strong"
           onClick={handleScrollToBlock}
         >
           <ArrowLeft className="h-3.5 w-3.5" />
@@ -237,7 +237,7 @@ export const ChartDraggable: React.FC<Props> = (props) => {
       {/* move to right side hidden block button */}
       {isBlockHiddenOnRight && (
         <div
-          className="fixed right-1 z-[1] mt-1.5 grid h-8 w-8 cursor-pointer place-items-center rounded border border-neutral-border-medium bg-neutral-component-surface-dark text-custom-text-200 hover:text-custom-text-100"
+          className="fixed right-1 z-[1] mt-1.5 grid h-8 w-8 cursor-pointer place-items-center rounded border border-neutral-border-medium bg-neutral-component-surface-dark text-neutral-text-medium hover:text-neutral-text-strong"
           onClick={handleScrollToBlock}
         >
           <ArrowRight className="h-3.5 w-3.5" />
diff --git a/web/components/gantt-chart/sidebar/cycle-sidebar.tsx b/web/components/gantt-chart/sidebar/cycle-sidebar.tsx
index 96f76275d..67ebdf124 100644
--- a/web/components/gantt-chart/sidebar/cycle-sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/cycle-sidebar.tsx
@@ -119,7 +119,7 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
                             {enableReorder && (
                               <button
                                 type="button"
-                                className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
+                                className="flex flex-shrink-0 rounded p-0.5 text-sidebar-neutral-text-medium opacity-0 group-hover:opacity-100"
                                 {...provided.dragHandleProps}
                               >
                                 <MoreVertical className="h-3.5 w-3.5" />
@@ -131,7 +131,7 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
                                 <CycleGanttSidebarBlock data={block.data} />
                               </div>
                               {duration !== undefined && (
-                                <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                <div className="flex-shrink-0 text-sm text-neutral-text-medium">
                                   {duration} day{duration > 1 ? "s" : ""}
                                 </div>
                               )}
diff --git a/web/components/gantt-chart/sidebar/module-sidebar.tsx b/web/components/gantt-chart/sidebar/module-sidebar.tsx
index f3204050d..d5701a845 100644
--- a/web/components/gantt-chart/sidebar/module-sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/module-sidebar.tsx
@@ -119,7 +119,7 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
                             {enableReorder && (
                               <button
                                 type="button"
-                                className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
+                                className="flex flex-shrink-0 rounded p-0.5 text-sidebar-neutral-text-medium opacity-0 group-hover:opacity-100"
                                 {...provided.dragHandleProps}
                               >
                                 <MoreVertical className="h-3.5 w-3.5" />
@@ -131,7 +131,7 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
                                 <ModuleGanttSidebarBlock data={block.data} />
                               </div>
                               {duration !== undefined && (
-                                <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                <div className="flex-shrink-0 text-sm text-neutral-text-medium">
                                   {duration} day{duration > 1 ? "s" : ""}
                                 </div>
                               )}
diff --git a/web/components/gantt-chart/sidebar/project-view-sidebar.tsx b/web/components/gantt-chart/sidebar/project-view-sidebar.tsx
index 213e261a6..f703971d0 100644
--- a/web/components/gantt-chart/sidebar/project-view-sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/project-view-sidebar.tsx
@@ -120,7 +120,7 @@ export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
                             {enableReorder && (
                               <button
                                 type="button"
-                                className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
+                                className="flex flex-shrink-0 rounded p-0.5 text-sidebar-neutral-text-medium opacity-0 group-hover:opacity-100"
                                 {...provided.dragHandleProps}
                               >
                                 <MoreVertical className="h-3.5 w-3.5" />
@@ -132,7 +132,7 @@ export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
                                 <IssueGanttSidebarBlock data={block.data} />
                               </div>
                               {duration !== undefined && (
-                                <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                <div className="flex-shrink-0 text-sm text-neutral-text-medium">
                                   {duration} day{duration > 1 ? "s" : ""}
                                 </div>
                               )}
diff --git a/web/components/gantt-chart/sidebar/sidebar.tsx b/web/components/gantt-chart/sidebar/sidebar.tsx
index 8042e51a1..81079632c 100644
--- a/web/components/gantt-chart/sidebar/sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/sidebar.tsx
@@ -152,7 +152,7 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
                             {enableReorder && (
                               <button
                                 type="button"
-                                className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
+                                className="flex flex-shrink-0 rounded p-0.5 text-sidebar-neutral-text-medium opacity-0 group-hover:opacity-100"
                                 {...provided.dragHandleProps}
                               >
                                 <MoreVertical className="h-3.5 w-3.5" />
@@ -164,7 +164,7 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
                                 <IssueGanttSidebarBlock data={block.data} />
                               </div>
                               {duration !== undefined && (
-                                <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                <div className="flex-shrink-0 text-sm text-neutral-text-medium">
                                   <span>
                                     {duration} day{duration > 1 ? "s" : ""}
                                   </span>
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index c2ab2c4a8..383b7c32f 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -177,7 +177,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                     </span>
                     <Link
                       href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                      className="block md:hidden pl-2 text-custom-text-300"
+                      className="block md:hidden pl-2 text-neutral-text-medium"
                     >
                       ...
                     </Link>
@@ -190,7 +190,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                   <BreadcrumbLink
                     label="Cycles"
                     href={`/${workspaceSlug}/projects/${projectId}/cycles`}
-                    icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
+                    icon={<ContrastIcon className="h-4 w-4 text-neutral-text-medium" />}
                   />
                 }
               />
@@ -275,7 +275,9 @@ export const CycleIssuesHeader: React.FC = observer(() => {
             className="grid md:hidden h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
             onClick={toggleSidebar}
           >
-            <PanelRight className={cn("w-4 h-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
+            <PanelRight
+              className={cn("w-4 h-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-neutral-text-medium")}
+            />
           </button>
         </div>
         <div className="block sm:block md:hidden">
diff --git a/web/components/headers/cycles.tsx b/web/components/headers/cycles.tsx
index 1d23ff5b3..94cc0c608 100644
--- a/web/components/headers/cycles.tsx
+++ b/web/components/headers/cycles.tsx
@@ -74,7 +74,7 @@ export const CyclesHeader: FC = observer(() => {
               <Breadcrumbs.BreadcrumbItem
                 type="text"
                 link={
-                  <BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />} />
+                  <BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-neutral-text-medium" />} />
                 }
               />
             </Breadcrumbs>
@@ -99,15 +99,15 @@ export const CyclesHeader: FC = observer(() => {
       <div className="flex justify-center sm:hidden">
         <CustomMenu
           maxHeight={"md"}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-neutral-border-medium bg-custom-sidebar-background-100"
+          className="flex flex-grow justify-center text-neutral-text-medium text-sm py-2 border-b border-neutral-border-medium bg-custom-sidebar-background-100"
           // placement="bottom-start"
           customButton={
             <span className="flex items-center gap-2">
               <List className="h-4 w-4" />
-              <span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>
+              <span className="flex flex-grow justify-center text-neutral-text-medium text-sm">Layout</span>
             </span>
           }
-          customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
+          customButtonClassName="flex flex-grow justify-center items-center text-neutral-text-medium text-sm"
           closeOnSelect
         >
           {CYCLE_VIEW_LAYOUTS.map((layout) => (
@@ -119,7 +119,7 @@ export const CyclesHeader: FC = observer(() => {
               className="flex items-center gap-2"
             >
               <layout.icon className="w-3 h-3" />
-              <div className="text-custom-text-300">{layout.title}</div>
+              <div className="text-neutral-text-medium">{layout.title}</div>
             </CustomMenu.MenuItem>
           ))}
         </CustomMenu>
diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx
index 8cf3a585a..438525bc0 100644
--- a/web/components/headers/global-issues.tsx
+++ b/web/components/headers/global-issues.tsx
@@ -118,9 +118,9 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
                   label={`All ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`}
                   icon={
                     activeLayout === "spreadsheet" ? (
-                      <LayersIcon className="h-4 w-4 text-custom-text-300" />
+                      <LayersIcon className="h-4 w-4 text-neutral-text-medium" />
                     ) : (
-                      <PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
+                      <PhotoFilterIcon className="h-4 w-4 text-neutral-text-medium" />
                     )
                   }
                 />
@@ -142,7 +142,9 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
                       <layout.icon
                         size={14}
                         strokeWidth={2}
-                        className={`${activeLayout === layout.key ? "text-custom-text-100" : "text-custom-text-200"}`}
+                        className={`${
+                          activeLayout === layout.key ? "text-neutral-text-strong" : "text-neutral-text-medium"
+                        }`}
                       />
                     </div>
                   </Tooltip>
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index 43bf1ddbc..ce3059b0e 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -180,7 +180,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                     </span>
                     <Link
                       href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                      className="block md:hidden pl-2 text-custom-text-300"
+                      className="block md:hidden pl-2 text-neutral-text-medium"
                     >
                       ...
                     </Link>
@@ -193,7 +193,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                   <BreadcrumbLink
                     href={`/${workspaceSlug}/projects/${projectId}/modules`}
                     label="Modules"
-                    icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
+                    icon={<DiceIcon className="h-4 w-4 text-neutral-text-medium" />}
                   />
                 }
               />
@@ -283,7 +283,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
               <PanelRight
                 className={cn(
                   "w-4 h-4 block md:hidden",
-                  !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200"
+                  !isSidebarCollapsed ? "text-[#3E63DD]" : "text-neutral-text-medium"
                 )}
               />
             </button>
diff --git a/web/components/headers/modules-list.tsx b/web/components/headers/modules-list.tsx
index 6fae9c6f5..55dfd2750 100644
--- a/web/components/headers/modules-list.tsx
+++ b/web/components/headers/modules-list.tsx
@@ -60,7 +60,7 @@ export const ModulesListHeader: React.FC = observer(() => {
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={<BreadcrumbLink label="Modules" icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />} />}
+              link={<BreadcrumbLink label="Modules" icon={<DiceIcon className="h-4 w-4 text-neutral-text-medium" />} />}
             />
           </Breadcrumbs>
         </div>
@@ -79,7 +79,7 @@ export const ModulesListHeader: React.FC = observer(() => {
                 <layout.icon
                   strokeWidth={2}
                   className={`h-3.5 w-3.5 ${
-                    modulesView == layout.key ? "text-custom-text-100" : "text-custom-text-200"
+                    modulesView == layout.key ? "text-neutral-text-strong" : "text-neutral-text-medium"
                   }`}
                 />
               </button>
diff --git a/web/components/headers/page-details.tsx b/web/components/headers/page-details.tsx
index ba76ed806..6361cb4d4 100644
--- a/web/components/headers/page-details.tsx
+++ b/web/components/headers/page-details.tsx
@@ -59,7 +59,7 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
                 <BreadcrumbLink
                   href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages`}
                   label="Pages"
-                  icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+                  icon={<FileText className="h-4 w-4 text-neutral-text-medium" />}
                 />
               }
             />
@@ -68,7 +68,7 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
               link={
                 <BreadcrumbLink
                   label={pageDetails?.name ?? "Page"}
-                  icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+                  icon={<FileText className="h-4 w-4 text-neutral-text-medium" />}
                 />
               }
             />
diff --git a/web/components/headers/pages.tsx b/web/components/headers/pages.tsx
index 923dbcdc3..c82709c16 100644
--- a/web/components/headers/pages.tsx
+++ b/web/components/headers/pages.tsx
@@ -57,7 +57,7 @@ export const PagesHeader = observer(() => {
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={<BreadcrumbLink label="Pages" icon={<FileText className="h-4 w-4 text-custom-text-300" />} />}
+              link={<BreadcrumbLink label="Pages" icon={<FileText className="h-4 w-4 text-neutral-text-medium" />} />}
             />
           </Breadcrumbs>
         </div>
diff --git a/web/components/headers/profile-settings.tsx b/web/components/headers/profile-settings.tsx
index 0bd30ea31..67f6d791b 100644
--- a/web/components/headers/profile-settings.tsx
+++ b/web/components/headers/profile-settings.tsx
@@ -22,7 +22,7 @@ export const ProfileSettingsHeader: FC<IProfileSettingHeader> = (props) => {
                 <BreadcrumbLink
                   href="/profile"
                   label="My Profile"
-                  icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+                  icon={<Settings className="h-4 w-4 text-neutral-text-medium" />}
                 />
               }
             />
diff --git a/web/components/headers/project-archived-issue-details.tsx b/web/components/headers/project-archived-issue-details.tsx
index 5417eaf28..c5324b559 100644
--- a/web/components/headers/project-archived-issue-details.tsx
+++ b/web/components/headers/project-archived-issue-details.tsx
@@ -72,7 +72,7 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
                 <BreadcrumbLink
                   href={`/${workspaceSlug}/projects/${projectId}/archived-issues`}
                   label="Archived Issues"
-                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                  icon={<LayersIcon className="h-4 w-4 text-neutral-text-medium" />}
                 />
               }
             />
diff --git a/web/components/headers/project-archived-issues.tsx b/web/components/headers/project-archived-issues.tsx
index 1296f4631..a0dd09117 100644
--- a/web/components/headers/project-archived-issues.tsx
+++ b/web/components/headers/project-archived-issues.tsx
@@ -110,7 +110,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
               link={
                 <BreadcrumbLink
                   label="Archived Issues"
-                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                  icon={<LayersIcon className="h-4 w-4 text-neutral-text-medium" />}
                 />
               }
             />
diff --git a/web/components/headers/project-draft-issues.tsx b/web/components/headers/project-draft-issues.tsx
index 2f4f7558d..1ff572468 100644
--- a/web/components/headers/project-draft-issues.tsx
+++ b/web/components/headers/project-draft-issues.tsx
@@ -103,7 +103,10 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
-                <BreadcrumbLink label="Draft Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
+                <BreadcrumbLink
+                  label="Draft Issues"
+                  icon={<LayersIcon className="h-4 w-4 text-neutral-text-medium" />}
+                />
               }
             />
           </Breadcrumbs>
diff --git a/web/components/headers/project-inbox.tsx b/web/components/headers/project-inbox.tsx
index bb4b8e899..fd5641aa3 100644
--- a/web/components/headers/project-inbox.tsx
+++ b/web/components/headers/project-inbox.tsx
@@ -52,7 +52,10 @@ export const ProjectInboxHeader: FC = observer(() => {
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
-                <BreadcrumbLink label="Inbox Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
+                <BreadcrumbLink
+                  label="Inbox Issues"
+                  icon={<LayersIcon className="h-4 w-4 text-neutral-text-medium" />}
+                />
               }
             />
           </Breadcrumbs>
diff --git a/web/components/headers/project-issue-details.tsx b/web/components/headers/project-issue-details.tsx
index 91300ac06..749a658f9 100644
--- a/web/components/headers/project-issue-details.tsx
+++ b/web/components/headers/project-issue-details.tsx
@@ -66,7 +66,7 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
                 <BreadcrumbLink
                   href={`/${workspaceSlug}/projects/${projectId}/issues`}
                   label="Issues"
-                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                  icon={<LayersIcon className="h-4 w-4 text-neutral-text-medium" />}
                 />
               }
             />
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 767cb614e..f8cfcb7ba 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -155,7 +155,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                 <Breadcrumbs.BreadcrumbItem
                   type="text"
                   link={
-                    <BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
+                    <BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-neutral-text-medium" />} />
                   }
                 />
               </Breadcrumbs>
@@ -209,7 +209,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                 <Button variant="neutral-primary" size="sm" className="relative">
                   Inbox
                   {inboxDetails?.pending_issue_count > 0 && (
-                    <span className="absolute -right-1.5 -top-1.5 h-4 w-4 rounded-full border border-sidebar-neutral-border-medium bg-custom-sidebar-background-80 text-custom-text-100">
+                    <span className="absolute -right-1.5 -top-1.5 h-4 w-4 rounded-full border border-sidebar-neutral-border-medium bg-custom-sidebar-background-80 text-neutral-text-strong">
                       {inboxDetails?.pending_issue_count}
                     </span>
                   )}
diff --git a/web/components/headers/project-settings.tsx b/web/components/headers/project-settings.tsx
index 0acc99481..3a575c402 100644
--- a/web/components/headers/project-settings.tsx
+++ b/web/components/headers/project-settings.tsx
@@ -67,7 +67,7 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
           className="flex-shrink-0 block sm:block md:hidden lg:hidden"
           maxHeight="lg"
           customButton={
-            <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-neutral-border-medium">
+            <span className="text-xs px-1.5 py-1 border rounded-md text-neutral-text-medium border-neutral-border-medium">
               {title}
             </span>
           }
diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx
index 14fb00cc6..7e6cd8f72 100644
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@@ -142,7 +142,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
               <BreadcrumbLink
                 href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/views`}
                 label="Views"
-                icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
+                icon={<PhotoFilterIcon className="h-4 w-4 text-neutral-text-medium" />}
               />
             }
           />
diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx
index b6193cdb5..6d04a8d8d 100644
--- a/web/components/headers/project-views.tsx
+++ b/web/components/headers/project-views.tsx
@@ -62,7 +62,10 @@ export const ProjectViewsHeader: React.FC = observer(() => {
               <Breadcrumbs.BreadcrumbItem
                 type="text"
                 link={
-                  <BreadcrumbLink label="Views" icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />} />
+                  <BreadcrumbLink
+                    label="Views"
+                    icon={<PhotoFilterIcon className="h-4 w-4 text-neutral-text-medium" />}
+                  />
                 }
               />
             </Breadcrumbs>
diff --git a/web/components/headers/projects.tsx b/web/components/headers/projects.tsx
index 9e8085218..d97f7b0f9 100644
--- a/web/components/headers/projects.tsx
+++ b/web/components/headers/projects.tsx
@@ -29,14 +29,16 @@ export const ProjectsHeader = observer(() => {
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={<BreadcrumbLink label="Projects" icon={<Briefcase className="h-4 w-4 text-custom-text-300" />} />}
+              link={
+                <BreadcrumbLink label="Projects" icon={<Briefcase className="h-4 w-4 text-neutral-text-medium" />} />
+              }
             />
           </Breadcrumbs>
         </div>
       </div>
       <div className="flex w-full justify-end items-center gap-3">
         {workspaceProjectIds && workspaceProjectIds?.length > 0 && (
-          <div className=" flex items-center justify-start gap-1 rounded-md border border-neutral-border-medium bg-custom-background-100 px-2.5 py-1.5 text-custom-text-400">
+          <div className=" flex items-center justify-start gap-1 rounded-md border border-neutral-border-medium bg-custom-background-100 px-2.5 py-1.5 text-neutral-text-subtle">
             <Search className="h-3.5" />
             <input
               className="border-none w-full bg-transparent text-sm focus:outline-none"
diff --git a/web/components/headers/workspace-active-cycles.tsx b/web/components/headers/workspace-active-cycles.tsx
index 3eb21ece8..9da203eb7 100644
--- a/web/components/headers/workspace-active-cycles.tsx
+++ b/web/components/headers/workspace-active-cycles.tsx
@@ -17,7 +17,7 @@ export const WorkspaceActiveCycleHeader = observer(() => (
             link={
               <BreadcrumbLink
                 label="Active Cycles"
-                icon={<ContrastIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
+                icon={<ContrastIcon className="h-4 w-4 text-neutral-text-medium rotate-180" />}
               />
             }
           />
diff --git a/web/components/headers/workspace-analytics.tsx b/web/components/headers/workspace-analytics.tsx
index baaeb8b9f..16cbe1769 100644
--- a/web/components/headers/workspace-analytics.tsx
+++ b/web/components/headers/workspace-analytics.tsx
@@ -21,7 +21,7 @@ export const WorkspaceAnalyticsHeader = () => {
               <Breadcrumbs.BreadcrumbItem
                 type="text"
                 link={
-                  <BreadcrumbLink label="Analytics" icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />} />
+                  <BreadcrumbLink label="Analytics" icon={<BarChart2 className="h-4 w-4 text-neutral-text-medium" />} />
                 }
               />
             </Breadcrumbs>
diff --git a/web/components/headers/workspace-dashboard.tsx b/web/components/headers/workspace-dashboard.tsx
index 9c97a838a..64d09462f 100644
--- a/web/components/headers/workspace-dashboard.tsx
+++ b/web/components/headers/workspace-dashboard.tsx
@@ -23,7 +23,10 @@ export const WorkspaceDashboardHeader = () => {
               <Breadcrumbs.BreadcrumbItem
                 type="text"
                 link={
-                  <BreadcrumbLink label="Dashboard" icon={<LayoutGrid className="h-4 w-4 text-custom-text-300" />} />
+                  <BreadcrumbLink
+                    label="Dashboard"
+                    icon={<LayoutGrid className="h-4 w-4 text-neutral-text-medium" />}
+                  />
                 }
               />
             </Breadcrumbs>
diff --git a/web/components/headers/workspace-settings.tsx b/web/components/headers/workspace-settings.tsx
index ffb1cc440..dd1520732 100644
--- a/web/components/headers/workspace-settings.tsx
+++ b/web/components/headers/workspace-settings.tsx
@@ -32,7 +32,7 @@ export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((pro
                 <BreadcrumbLink
                   href={`/${workspaceSlug}/settings`}
                   label="Settings"
-                  icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+                  icon={<Settings className="h-4 w-4 text-neutral-text-medium" />}
                 />
               }
             />
@@ -45,7 +45,7 @@ export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((pro
           className="flex-shrink-0 block sm:block md:hidden lg:hidden"
           maxHeight="lg"
           customButton={
-            <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-neutral-border-medium">
+            <span className="text-xs px-1.5 py-1 border rounded-md text-neutral-text-medium border-neutral-border-medium">
               {title}
             </span>
           }
diff --git a/web/components/inbox/content/root.tsx b/web/components/inbox/content/root.tsx
index 65795bda7..7531b8fe6 100644
--- a/web/components/inbox/content/root.tsx
+++ b/web/components/inbox/content/root.tsx
@@ -45,16 +45,16 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
       ) : (
         <>
           {!inboxIssueId ? (
-            <div className="grid h-full place-items-center p-4 text-custom-text-200">
+            <div className="grid h-full place-items-center p-4 text-neutral-text-medium">
               <div className="grid h-full place-items-center">
                 <div className="my-5 flex flex-col items-center gap-4">
                   <Inbox size={60} strokeWidth={1.5} />
                   {inboxIssuesList && inboxIssuesList.length > 0 ? (
-                    <span className="text-custom-text-200">
+                    <span className="text-neutral-text-medium">
                       {inboxIssuesList?.length} issues found. Select an issue from the sidebar to view its details.
                     </span>
                   ) : (
-                    <span className="text-custom-text-200">No issues found</span>
+                    <span className="text-neutral-text-medium">No issues found</span>
                   )}
                 </div>
               </div>
diff --git a/web/components/inbox/modals/accept-issue-modal.tsx b/web/components/inbox/modals/accept-issue-modal.tsx
index 0e3061331..0f07bc5ec 100644
--- a/web/components/inbox/modals/accept-issue-modal.tsx
+++ b/web/components/inbox/modals/accept-issue-modal.tsx
@@ -67,9 +67,9 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSub
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm text-custom-text-200">
+                    <p className="text-sm text-neutral-text-medium">
                       Are you sure you want to accept issue{" "}
-                      <span className="break-all font-medium text-custom-text-100">
+                      <span className="break-all font-medium text-neutral-text-strong">
                         {getProjectById(data?.project_id)?.identifier}-{data?.sequence_id}
                       </span>
                       {""}? Once accepted, this issue will be added to the project issues list.
diff --git a/web/components/inbox/modals/create-issue-modal.tsx b/web/components/inbox/modals/create-issue-modal.tsx
index 43e1ac609..ce52db9cd 100644
--- a/web/components/inbox/modals/create-issue-modal.tsx
+++ b/web/components/inbox/modals/create-issue-modal.tsx
@@ -203,7 +203,7 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
               <Dialog.Panel className="relative transform rounded-lg bg-neutral-component-surface-light p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
                 <form onSubmit={handleSubmit(handleFormSubmit)}>
                   <div className="space-y-5">
-                    <h3 className="text-xl font-semibold leading-6 text-custom-text-100">Create Inbox Issue</h3>
+                    <h3 className="text-xl font-semibold leading-6 text-neutral-text-strong">Create Inbox Issue</h3>
                     <div className="space-y-3">
                       <div className="mt-2 space-y-3">
                         <div>
diff --git a/web/components/inbox/modals/decline-issue-modal.tsx b/web/components/inbox/modals/decline-issue-modal.tsx
index 63ba3a51a..ee1c1d5e3 100644
--- a/web/components/inbox/modals/decline-issue-modal.tsx
+++ b/web/components/inbox/modals/decline-issue-modal.tsx
@@ -67,9 +67,9 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSu
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm text-custom-text-200">
+                    <p className="text-sm text-neutral-text-medium">
                       Are you sure you want to decline issue{" "}
-                      <span className="break-words font-medium text-custom-text-100">
+                      <span className="break-words font-medium text-neutral-text-strong">
                         {getProjectById(data?.project_id)?.identifier}-{data?.sequence_id}
                       </span>
                       {""}? This action cannot be undone.
diff --git a/web/components/inbox/modals/delete-issue-modal.tsx b/web/components/inbox/modals/delete-issue-modal.tsx
index 458a1fdf5..54dcca934 100644
--- a/web/components/inbox/modals/delete-issue-modal.tsx
+++ b/web/components/inbox/modals/delete-issue-modal.tsx
@@ -70,9 +70,9 @@ export const DeleteInboxIssueModal: React.FC<Props> = observer(({ isOpen, onClos
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm text-custom-text-200">
+                    <p className="text-sm text-neutral-text-medium">
                       Are you sure you want to delete issue{" "}
-                      <span className="break-words font-medium text-custom-text-100">
+                      <span className="break-words font-medium text-neutral-text-strong">
                         {getProjectById(data?.project_id)?.identifier}-{data?.sequence_id}
                       </span>
                       {""}? The issue will only be deleted from the inbox and this action cannot be undone.
diff --git a/web/components/inbox/modals/select-duplicate.tsx b/web/components/inbox/modals/select-duplicate.tsx
index 03a7e4e15..6900c89e2 100644
--- a/web/components/inbox/modals/select-duplicate.tsx
+++ b/web/components/inbox/modals/select-duplicate.tsx
@@ -108,12 +108,12 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                   >
                     <div className="relative m-1">
                       <Search
-                        className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
+                        className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-neutral-text-strong text-opacity-40"
                         aria-hidden="true"
                       />
                       <input
                         type="text"
-                        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"
+                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-neutral-text-strong outline-none focus:ring-0 sm:text-sm"
                         placeholder="Search..."
                         onChange={(e) => setQuery(e.target.value)}
                       />
@@ -126,9 +126,11 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                       {filteredIssues.length > 0 ? (
                         <li className="p-2">
                           {query === "" && (
-                            <h2 className="mb-2 mt-4 px-3 text-xs font-semibold text-custom-text-100">Select issue</h2>
+                            <h2 className="mb-2 mt-4 px-3 text-xs font-semibold text-neutral-text-strong">
+                              Select issue
+                            </h2>
                           )}
-                          <ul className="text-sm text-custom-text-100">
+                          <ul className="text-sm text-neutral-text-strong">
                             {filteredIssues.map((issue) => {
                               const stateColor =
                                 getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)
@@ -140,8 +142,10 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                                   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-custom-text-200 ${
-                                      active || selected ? "bg-neutral-component-surface-dark text-custom-text-100" : ""
+                                    `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-neutral-text-medium ${
+                                      active || selected
+                                        ? "bg-neutral-component-surface-dark text-neutral-text-strong"
+                                        : ""
                                     } `
                                   }
                                 >
@@ -152,10 +156,10 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                                         backgroundColor: stateColor,
                                       }}
                                     />
-                                    <span className="flex-shrink-0 text-xs text-custom-text-200">
+                                    <span className="flex-shrink-0 text-xs text-neutral-text-medium">
                                       {getProjectById(issue?.project_id)?.identifier}-{issue.sequence_id}
                                     </span>
-                                    <span className="text-custom-text-200">{issue.name}</span>
+                                    <span className="text-neutral-text-medium">{issue.name}</span>
                                   </div>
                                 </Combobox.Option>
                               );
@@ -165,7 +169,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                       ) : (
                         <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
                           <LayersIcon height="56" width="56" />
-                          <h3 className="text-sm text-custom-text-200">
+                          <h3 className="text-sm text-neutral-text-medium">
                             No issues found. Create a new issue with{" "}
                             <pre className="inline rounded bg-neutral-component-surface-dark px-2 py-1">C</pre>.
                           </h3>
diff --git a/web/components/inbox/sidebar/filter/applied-filters.tsx b/web/components/inbox/sidebar/filter/applied-filters.tsx
index 955aa9981..ed5e4d170 100644
--- a/web/components/inbox/sidebar/filter/applied-filters.tsx
+++ b/web/components/inbox/sidebar/filter/applied-filters.tsx
@@ -66,7 +66,7 @@ export const InboxIssueAppliedFilter: FC<TInboxIssueAppliedFilter> = observer((p
               key={key}
               className="flex items-center gap-x-2 rounded-full border border-neutral-border-medium bg-neutral-component-surface-dark px-2 py-1"
             >
-              <span className="capitalize text-custom-text-200">{replaceUnderscoreIfSnakeCase(key)}:</span>
+              <span className="capitalize text-neutral-text-medium">{replaceUnderscoreIfSnakeCase(key)}:</span>
               {filters[filterKey]?.length < 0 ? (
                 <span className="inline-flex items-center px-2 py-0.5 font-medium">None</span>
               ) : (
@@ -85,7 +85,7 @@ export const InboxIssueAppliedFilter: FC<TInboxIssueAppliedFilter> = observer((p
                               ? "bg-yellow-500/20 text-yellow-500"
                               : priority === "low"
                               ? "bg-green-500/20 text-green-500"
-                              : "bg-neutral-component-surface-medium text-custom-text-200"
+                              : "bg-neutral-component-surface-medium text-neutral-text-medium"
                           }`}
                         >
                           <div className="relative flex items-center gap-1">
@@ -123,7 +123,7 @@ export const InboxIssueAppliedFilter: FC<TInboxIssueAppliedFilter> = observer((p
                       {filters.inbox_status?.map((status) => (
                         <div
                           key={status}
-                          className="inline-flex items-center gap-x-1 rounded-full bg-neutral-component-surface-medium px-2 py-0.5 capitalize text-custom-text-200"
+                          className="inline-flex items-center gap-x-1 rounded-full bg-neutral-component-surface-medium px-2 py-0.5 capitalize text-neutral-text-medium"
                         >
                           <IssueStatusLabel status={status} />
                           <button
@@ -161,7 +161,7 @@ export const InboxIssueAppliedFilter: FC<TInboxIssueAppliedFilter> = observer((p
       <button
         type="button"
         onClick={handleClearAllFilters}
-        className="flex items-center gap-x-1 rounded-full border border-neutral-border-medium bg-neutral-component-surface-dark px-3 py-1.5 text-custom-text-200 hover:text-custom-text-100"
+        className="flex items-center gap-x-1 rounded-full border border-neutral-border-medium bg-neutral-component-surface-dark px-3 py-1.5 text-neutral-text-medium hover:text-neutral-text-strong"
       >
         <span>Clear all</span>
         <X className="h-3 w-3" />
diff --git a/web/components/inbox/sidebar/filter/filter-selection.tsx b/web/components/inbox/sidebar/filter/filter-selection.tsx
index 2516cdc6c..6541bf846 100644
--- a/web/components/inbox/sidebar/filter/filter-selection.tsx
+++ b/web/components/inbox/sidebar/filter/filter-selection.tsx
@@ -108,7 +108,7 @@ export const InboxIssueFilterSelection: FC<TInboxIssueFilterSelection> = observe
       />
 
       {filtersLength > 0 && (
-        <div className="absolute -right-2 -top-2 z-10 grid h-4 w-4 place-items-center rounded-full border border-neutral-border-medium bg-neutral-component-surface-dark text-[0.65rem] text-custom-text-100">
+        <div className="absolute -right-2 -top-2 z-10 grid h-4 w-4 place-items-center rounded-full border border-neutral-border-medium bg-neutral-component-surface-dark text-[0.65rem] text-neutral-text-strong">
           <span>{filtersLength}</span>
         </div>
       )}
diff --git a/web/components/inbox/sidebar/inbox-list-item.tsx b/web/components/inbox/sidebar/inbox-list-item.tsx
index 3231ba6a6..8512129d4 100644
--- a/web/components/inbox/sidebar/inbox-list-item.tsx
+++ b/web/components/inbox/sidebar/inbox-list-item.tsx
@@ -66,7 +66,7 @@ export const InboxIssueListItem: FC<TInboxIssueListItem> = observer((props) => {
         >
           <div className="flex items-center justify-between gap-x-2">
             <div className="relative flex items-center gap-x-2 overflow-hidden">
-              <p className="flex-shrink-0 text-xs text-custom-text-200">
+              <p className="flex-shrink-0 text-xs text-neutral-text-medium">
                 {getProjectById(issue.project_id)?.identifier}-{issue.sequence_id}
               </p>
               <h5 className="truncate text-sm">{issue.name}</h5>
@@ -87,7 +87,7 @@ export const InboxIssueListItem: FC<TInboxIssueListItem> = observer((props) => {
               <PriorityIcon priority={issue.priority ?? null} className="h-3.5 w-3.5" />
             </Tooltip>
             <Tooltip tooltipHeading="Created on" tooltipContent={`${renderFormattedDate(issue.created_at ?? "")}`}>
-              <div className="flex items-center gap-1 rounded border border-neutral-border-medium px-2 py-[0.19rem] text-xs text-custom-text-200 shadow-sm">
+              <div className="flex items-center gap-1 rounded border border-neutral-border-medium px-2 py-[0.19rem] text-xs text-neutral-text-medium shadow-sm">
                 <CalendarDays size={12} strokeWidth={1.5} />
                 <span>{renderFormattedDate(issue.created_at ?? "")}</span>
               </div>
diff --git a/web/components/instance/ai-form.tsx b/web/components/instance/ai-form.tsx
index 50ea90096..838b1d0fb 100644
--- a/web/components/instance/ai-form.tsx
+++ b/web/components/instance/ai-form.tsx
@@ -75,7 +75,7 @@ export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
               />
             )}
           />
-          <p className="text-xs text-custom-text-400">
+          <p className="text-xs text-neutral-text-subtle">
             Choose an OpenAI engine.{" "}
             <a
               href="https://platform.openai.com/docs/models/overview"
@@ -110,21 +110,21 @@ export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
             />
             {showPassword ? (
               <button
-                className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+                className="absolute right-3 top-2.5 flex items-center justify-center text-neutral-text-subtle"
                 onClick={() => setShowPassword(false)}
               >
                 <EyeOff className="h-4 w-4" />
               </button>
             ) : (
               <button
-                className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+                className="absolute right-3 top-2.5 flex items-center justify-center text-neutral-text-subtle"
                 onClick={() => setShowPassword(true)}
               >
                 <Eye className="h-4 w-4" />
               </button>
             )}
           </div>
-          <p className="text-xs text-custom-text-400">
+          <p className="text-xs text-neutral-text-subtle">
             You will find your API key{" "}
             <a
               href="https://platform.openai.com/api-keys"
diff --git a/web/components/instance/email-form.tsx b/web/components/instance/email-form.tsx
index 9a97f3288..a3d35e457 100644
--- a/web/components/instance/email-form.tsx
+++ b/web/components/instance/email-form.tsx
@@ -153,14 +153,14 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
             />
             {showPassword ? (
               <button
-                className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+                className="absolute right-3 top-2.5 flex items-center justify-center text-neutral-text-subtle"
                 onClick={() => setShowPassword(false)}
               >
                 <EyeOff className="h-4 w-4" />
               </button>
             ) : (
               <button
-                className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+                className="absolute right-3 top-2.5 flex items-center justify-center text-neutral-text-subtle"
                 onClick={() => setShowPassword(true)}
               >
                 <Eye className="h-4 w-4" />
@@ -189,7 +189,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
               />
             )}
           />
-          <p className="text-xs text-custom-text-400">
+          <p className="text-xs text-neutral-text-subtle">
             This is the email address your users will see when getting emails from this instance. You will need to
             verify this address.
           </p>
@@ -199,10 +199,12 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
       <div className="flex w-full max-w-md flex-col gap-y-10 px-1">
         <div className="mr-8 flex items-center gap-10 pt-4">
           <div className="grow">
-            <div className="text-sm font-medium text-custom-text-100">
+            <div className="text-sm font-medium text-neutral-text-strong">
               Turn TLS {Boolean(parseInt(watch("EMAIL_USE_TLS"))) ? "off" : "on"}
             </div>
-            <div className="text-xs font-normal text-custom-text-300">Use this if your email domain supports TLS.</div>
+            <div className="text-xs font-normal text-neutral-text-medium">
+              Use this if your email domain supports TLS.
+            </div>
           </div>
           <div className="shrink-0">
             <Controller
@@ -223,10 +225,10 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
 
         {/* <div className="flex items-center gap-10 pt-4 mr-8">
           <div className="grow">
-            <div className="text-custom-text-100 font-medium text-sm">
+            <div className="text-neutral-text-strong font-medium text-sm">
               Turn SSL {Boolean(parseInt(watch("EMAIL_USE_SSL"))) ? "off" : "on"}
             </div>
-            <div className="text-custom-text-300 font-normal text-xs">
+            <div className="text-neutral-text-medium font-normal text-xs">
               Most email domains support SSL. Use this to secure comms between this instance and your users.
             </div>
           </div>
diff --git a/web/components/instance/general-form.tsx b/web/components/instance/general-form.tsx
index 7fa06265f..0e297b396 100644
--- a/web/components/instance/general-form.tsx
+++ b/web/components/instance/general-form.tsx
@@ -83,7 +83,7 @@ export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
             type="email"
             value={instanceAdmins[0].user_detail.email ?? ""}
             placeholder="Admin email"
-            className="w-full cursor-not-allowed !text-custom-text-400"
+            className="w-full cursor-not-allowed !text-neutral-text-subtle"
             disabled
           />
         </div>
@@ -95,7 +95,7 @@ export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
             name="instance_id"
             type="text"
             value={instance.instance_id}
-            className="w-full cursor-not-allowed rounded-md font-medium !text-custom-text-400"
+            className="w-full cursor-not-allowed rounded-md font-medium !text-neutral-text-subtle"
             disabled
           />
         </div>
@@ -103,8 +103,8 @@ export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
 
       {/* <div className="flex items-center gap-12 pt-4">
         <div>
-          <div className="text-custom-text-100 font-medium text-sm">Share anonymous usage instance</div>
-          <div className="text-custom-text-300 font-normal text-xs">
+          <div className="text-neutral-text-strong font-medium text-sm">Share anonymous usage instance</div>
+          <div className="text-neutral-text-medium font-normal text-xs">
             Help us understand how you use Plane so we can build better for you.
           </div>
         </div>
diff --git a/web/components/instance/github-config-form.tsx b/web/components/instance/github-config-form.tsx
index 75639f82b..9677d878d 100644
--- a/web/components/instance/github-config-form.tsx
+++ b/web/components/instance/github-config-form.tsx
@@ -77,7 +77,7 @@ export const InstanceGithubConfigForm: FC<IInstanceGithubConfigForm> = (props) =
               />
             )}
           />
-          <p className="text-xs text-custom-text-400">
+          <p className="text-xs text-neutral-text-subtle">
             You will get this from your{" "}
             <a
               href="https://github.com/settings/applications/new"
@@ -111,14 +111,14 @@ export const InstanceGithubConfigForm: FC<IInstanceGithubConfigForm> = (props) =
             />
             {showPassword ? (
               <button
-                className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+                className="absolute right-3 top-2.5 flex items-center justify-center text-neutral-text-subtle"
                 onClick={() => setShowPassword(false)}
               >
                 <EyeOff className="h-4 w-4" />
               </button>
             ) : (
               <button
-                className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+                className="absolute right-3 top-2.5 flex items-center justify-center text-neutral-text-subtle"
                 onClick={() => setShowPassword(true)}
               >
                 <Eye className="h-4 w-4" />
@@ -126,7 +126,7 @@ export const InstanceGithubConfigForm: FC<IInstanceGithubConfigForm> = (props) =
             )}
           </div>
 
-          <p className="text-xs text-custom-text-400">
+          <p className="text-xs text-neutral-text-subtle">
             Your client secret is also found in your{" "}
             <a
               href="https://github.com/settings/applications/new"
@@ -155,7 +155,7 @@ export const InstanceGithubConfigForm: FC<IInstanceGithubConfigForm> = (props) =
             <p className="text-sm font-medium">{originURL}</p>
             <Copy size={18} color="#B9B9B9" />
           </Button>
-          <p className="text-xs text-custom-text-400">
+          <p className="text-xs text-neutral-text-subtle">
             We will auto-generate this. Paste this into the Authorization callback URL field{" "}
             <a
               href="https://github.com/settings/applications/new"
diff --git a/web/components/instance/google-config-form.tsx b/web/components/instance/google-config-form.tsx
index cd7c3ab7d..19004485c 100644
--- a/web/components/instance/google-config-form.tsx
+++ b/web/components/instance/google-config-form.tsx
@@ -75,7 +75,7 @@ export const InstanceGoogleConfigForm: FC<IInstanceGoogleConfigForm> = (props) =
               />
             )}
           />
-          <p className="text-xs text-custom-text-400">
+          <p className="text-xs text-neutral-text-subtle">
             Your client ID lives in your Google API Console.{" "}
             <a
               href="https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#creatingcred"
@@ -104,7 +104,7 @@ export const InstanceGoogleConfigForm: FC<IInstanceGoogleConfigForm> = (props) =
             <p className="text-sm font-medium">{originURL}</p>
             <Copy size={18} color="#B9B9B9" />
           </Button>
-          <p className="text-xs text-custom-text-400">
+          <p className="text-xs text-neutral-text-subtle">
             We will auto-generate this. Paste this into your Authorized JavaScript origins field. For this OAuth client{" "}
             <a
               href="https://console.cloud.google.com/apis/credentials/oauthclient"
diff --git a/web/components/instance/help-section.tsx b/web/components/instance/help-section.tsx
index a43f91c85..ffd64542b 100644
--- a/web/components/instance/help-section.tsx
+++ b/web/components/instance/help-section.tsx
@@ -52,7 +52,7 @@ export const InstanceHelpSection: FC = () => {
       <div className={`flex items-center gap-1 ${sidebarCollapsed ? "flex-col justify-center" : "w-full justify-end"}`}>
         <button
           type="button"
-          className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-neutral-component-surface-medium hover:text-custom-text-100 ${
+          className={`grid place-items-center rounded-md p-1.5 text-neutral-text-medium outline-none hover:bg-neutral-component-surface-medium hover:text-neutral-text-strong ${
             sidebarCollapsed ? "w-full" : ""
           }`}
           onClick={() => setIsNeedHelpOpen((prev) => !prev)}
@@ -61,14 +61,14 @@ export const InstanceHelpSection: FC = () => {
         </button>
         <button
           type="button"
-          className="grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-neutral-component-surface-medium hover:text-custom-text-100 md:hidden"
+          className="grid place-items-center rounded-md p-1.5 text-neutral-text-medium outline-none hover:bg-neutral-component-surface-medium hover:text-neutral-text-strong md:hidden"
           onClick={() => toggleSidebar()}
         >
           <MoveLeft className="h-3.5 w-3.5" />
         </button>
         <button
           type="button"
-          className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-neutral-component-surface-medium hover:text-custom-text-100 md:grid ${
+          className={`hidden place-items-center rounded-md p-1.5 text-neutral-text-medium outline-none hover:bg-neutral-component-surface-medium hover:text-neutral-text-strong md:grid ${
             sidebarCollapsed ? "w-full" : ""
           }`}
           onClick={() => toggleSidebar()}
@@ -100,7 +100,7 @@ export const InstanceHelpSection: FC = () => {
                     <Link href={href} key={name} target="_blank">
                       <div className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-neutral-component-surface-dark">
                         <div className="grid flex-shrink-0 place-items-center">
-                          <Icon className="h-3.5 w-3.5 text-custom-text-200" size={14} />
+                          <Icon className="h-3.5 w-3.5 text-neutral-text-medium" size={14} />
                         </div>
                         <span className="text-xs">{name}</span>
                       </div>
@@ -115,7 +115,7 @@ export const InstanceHelpSection: FC = () => {
                       className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-neutral-component-surface-dark"
                     >
                       <div className="grid flex-shrink-0 place-items-center">
-                        <Icon className="h-3.5 w-3.5 text-custom-text-200" />
+                        <Icon className="h-3.5 w-3.5 text-neutral-text-medium" />
                       </div>
                       <span className="text-xs">{name}</span>
                     </button>
diff --git a/web/components/instance/image-config-form.tsx b/web/components/instance/image-config-form.tsx
index 93ce88719..a39af5fd4 100644
--- a/web/components/instance/image-config-form.tsx
+++ b/web/components/instance/image-config-form.tsx
@@ -76,21 +76,21 @@ export const InstanceImageConfigForm: FC<IInstanceImageConfigForm> = (props) =>
             />
             {showPassword ? (
               <button
-                className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+                className="absolute right-3 top-2.5 flex items-center justify-center text-neutral-text-subtle"
                 onClick={() => setShowPassword(false)}
               >
                 <EyeOff className="h-4 w-4" />
               </button>
             ) : (
               <button
-                className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+                className="absolute right-3 top-2.5 flex items-center justify-center text-neutral-text-subtle"
                 onClick={() => setShowPassword(true)}
               >
                 <Eye className="h-4 w-4" />
               </button>
             )}
           </div>
-          <p className="text-xs text-custom-text-400">
+          <p className="text-xs text-neutral-text-subtle">
             You will find your access key in your Unsplash developer console.{" "}
             <a
               href="https://unsplash.com/documentation#creating-a-developer-account"
diff --git a/web/components/instance/instance-admin-restriction.tsx b/web/components/instance/instance-admin-restriction.tsx
index a1e34002d..a7384725d 100644
--- a/web/components/instance/instance-admin-restriction.tsx
+++ b/web/components/instance/instance-admin-restriction.tsx
@@ -19,38 +19,38 @@ export const InstanceAdminRestriction: FC<InstanceAdminRestrictionProps> = ({ re
         <div className="text-center">
           <Image src={AccessDeniedImg} height="250" width="550" alt="AccessDeniedImg" />
           <h3 className="text-3xl font-semibold">God mode needs a god role</h3>
-          <p className="text-base text-custom-text-300">Doesn’t look like you have that role.</p>
+          <p className="text-base text-neutral-text-medium">Doesn’t look like you have that role.</p>
         </div>
         <div className="my-8 flex flex-col gap-2 text-center">
           <div>
-            <p className="text-xs font-medium tracking-tight text-custom-text-400">Do we have a god role?</p>
-            <p className="text-sm text-custom-text-300">Yes.</p>
+            <p className="text-xs font-medium tracking-tight text-neutral-text-subtle">Do we have a god role?</p>
+            <p className="text-sm text-neutral-text-medium">Yes.</p>
           </div>
           <div>
-            <p className="text-xs font-medium tracking-tight text-custom-text-400">Do we call it god role?</p>
-            <p className="text-sm text-custom-text-300">No. Obviously not.</p>
+            <p className="text-xs font-medium tracking-tight text-neutral-text-subtle">Do we call it god role?</p>
+            <p className="text-sm text-neutral-text-medium">No. Obviously not.</p>
           </div>
           <div>
-            <p className="text-xs font-medium tracking-tight text-custom-text-400">Can you get it?</p>
-            <p className="text-sm text-custom-text-300">Maybe. Ask your god.</p>
+            <p className="text-xs font-medium tracking-tight text-neutral-text-subtle">Can you get it?</p>
+            <p className="text-sm text-neutral-text-medium">Maybe. Ask your god.</p>
           </div>
           <div>
-            <p className="text-xs font-medium tracking-tight text-custom-text-400">
+            <p className="text-xs font-medium tracking-tight text-neutral-text-subtle">
               Are we being intentionally cryptic?
             </p>
-            <p className="text-sm text-custom-text-300">Yes.</p>
+            <p className="text-sm text-neutral-text-medium">Yes.</p>
           </div>
           <div>
-            <p className="text-xs font-medium tracking-tight text-custom-text-400">
+            <p className="text-xs font-medium tracking-tight text-neutral-text-subtle">
               Is this for the security of your workspaces?
             </p>
-            <p className="text-sm text-custom-text-300">Absolutely!</p>
+            <p className="text-sm text-neutral-text-medium">Absolutely!</p>
           </div>
           <div>
-            <p className="text-xs font-medium tracking-tight text-custom-text-400">
+            <p className="text-xs font-medium tracking-tight text-neutral-text-subtle">
               Are you the god here and still seeing this?
             </p>
-            <p className="text-sm text-custom-text-300">
+            <p className="text-sm text-neutral-text-medium">
               Sorry, God.{" "}
               <a
                 href="https://discord.com/channels/1031547764020084846/1094927053867995176"
diff --git a/web/components/instance/setup-form/sign-in-form.tsx b/web/components/instance/setup-form/sign-in-form.tsx
index c4a9de6a3..f4b6a4904 100644
--- a/web/components/instance/setup-form/sign-in-form.tsx
+++ b/web/components/instance/setup-form/sign-in-form.tsx
@@ -132,7 +132,7 @@ export const InstanceSetupSignInForm: FC<IInstanceSetupEmailForm> = (props) => {
             </div>
           )}
         />
-        <p className="pb-2 text-xs text-custom-text-200">
+        <p className="pb-2 text-xs text-neutral-text-medium">
           Use your email address if you are the instance admin. <br /> Use your admin’s e-mail if you are not.
         </p>
         <Button variant="primary" className="w-full" size="xl" type="submit" loading={isSubmitting}>
diff --git a/web/components/instance/sidebar-dropdown.tsx b/web/components/instance/sidebar-dropdown.tsx
index 65f16a24b..9313d7af7 100644
--- a/web/components/instance/sidebar-dropdown.tsx
+++ b/web/components/instance/sidebar-dropdown.tsx
@@ -70,17 +70,17 @@ export const InstanceSidebarDropdown = observer(() => {
           }`}
         >
           <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded bg-sidebar-neutral-component-surface-dark">
-            <UserCog2 className="h-5 w-5 text-custom-text-200" />
+            <UserCog2 className="h-5 w-5 text-neutral-text-medium" />
           </div>
 
           {!sidebarCollapsed && (
             <div className="flex w-full gap-2">
-              <h4 className="grow truncate text-base font-medium text-custom-text-200">Instance admin</h4>
+              <h4 className="grow truncate text-base font-medium text-neutral-text-medium">Instance admin</h4>
               <Tooltip position="bottom-left" tooltipContent="Exit God Mode">
                 <div className="flex-shrink-0">
                   <Link href={`/${redirectWorkspaceSlug}`}>
                     <span>
-                      <LogIn className="h-5 w-5 rotate-180 text-custom-text-200" />
+                      <LogIn className="h-5 w-5 rotate-180 text-neutral-text-medium" />
                     </span>
                   </Link>
                 </div>
@@ -116,7 +116,7 @@ export const InstanceSidebarDropdown = observer(() => {
           divide-sidebar-neutral-border-medium rounded-md border border-sidebar-neutral-border-medium bg-sidebar-neutral-component-surface-light px-1 py-2 text-xs shadow-lg outline-none"
             >
               <div className="flex flex-col gap-2.5 pb-2">
-                <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
+                <span className="px-2 text-sidebar-neutral-text-medium">{currentUser?.email}</span>
                 {PROFILE_LINKS.map((link) => (
                   <Menu.Item key={link.key} as="button" type="button">
                     <Link href={link.link}>
diff --git a/web/components/instance/sidebar-menu.tsx b/web/components/instance/sidebar-menu.tsx
index d2dc6f128..4f65522ee 100644
--- a/web/components/instance/sidebar-menu.tsx
+++ b/web/components/instance/sidebar-menu.tsx
@@ -60,7 +60,7 @@ export const InstanceAdminSidebarMenu = () => {
                   className={`group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none ${
                     isActive
                       ? "bg-custom-primary-100/10 text-custom-primary-100"
-                      : "text-custom-sidebar-text-200 hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
+                      : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
                   } ${sidebarCollapsed ? "justify-center" : ""}`}
                 >
                   {<item.Icon className="h-4 w-4" />}
@@ -68,14 +68,14 @@ export const InstanceAdminSidebarMenu = () => {
                     <div className="flex flex-col leading-snug">
                       <span
                         className={`text-sm font-medium ${
-                          isActive ? "text-custom-primary-100" : "text-custom-sidebar-text-200"
+                          isActive ? "text-custom-primary-100" : "text-sidebar-neutral-text-medium"
                         }`}
                       >
                         {item.name}
                       </span>
                       <span
                         className={`text-[10px] ${
-                          isActive ? "text-custom-primary-90" : "text-custom-sidebar-text-400"
+                          isActive ? "text-custom-primary-90" : "text-sidebar-neutral-text-subtle"
                         }`}
                       >
                         {item.description}
diff --git a/web/components/integration/delete-import-modal.tsx b/web/components/integration/delete-import-modal.tsx
index 0d9b01e3e..d031d0a75 100644
--- a/web/components/integration/delete-import-modal.tsx
+++ b/web/components/integration/delete-import-modal.tsx
@@ -103,15 +103,18 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data }
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm leading-7 text-custom-text-200">
+                    <p className="text-sm leading-7 text-neutral-text-medium">
                       Are you sure you want to delete import from{" "}
-                      <span className="break-words font-semibold capitalize text-custom-text-100">{data?.service}</span>
+                      <span className="break-words font-semibold capitalize text-neutral-text-strong">
+                        {data?.service}
+                      </span>
                       ? All of the data related to the import will be permanently removed. This action cannot be undone.
                     </p>
                   </span>
                   <div>
-                    <p className="text-sm text-custom-text-200">
-                      To confirm, type <span className="font-medium text-custom-text-100">delete import</span> below:
+                    <p className="text-sm text-neutral-text-medium">
+                      To confirm, type <span className="font-medium text-neutral-text-strong">delete import</span>{" "}
+                      below:
                     </p>
                     <Input
                       id="typeDelete"
diff --git a/web/components/integration/github/import-configure.tsx b/web/components/integration/github/import-configure.tsx
index 731ba7c16..b2184aada 100644
--- a/web/components/integration/github/import-configure.tsx
+++ b/web/components/integration/github/import-configure.tsx
@@ -33,7 +33,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-custom-text-200">Set up your GitHub import.</div>
+          <div className="text-sm text-neutral-text-medium">Set up your GitHub import.</div>
         </div>
         <div className="flex-shrink-0">
           <GithubAuth workspaceIntegration={workspaceIntegration} provider={provider} />
diff --git a/web/components/integration/github/import-confirm.tsx b/web/components/integration/github/import-confirm.tsx
index 65f3e82b2..d5cd17b89 100644
--- a/web/components/integration/github/import-confirm.tsx
+++ b/web/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-custom-text-200">
+    <h4 className="font-medium text-neutral-text-medium">
       You are about to import issues from {watch("github").full_name}. Click on {'"'}Confirm & Import{'" '}
       to complete the process.
     </h4>
diff --git a/web/components/integration/github/import-data.tsx b/web/components/integration/github/import-data.tsx
index 5c16b48a3..f246cbbfa 100644
--- a/web/components/integration/github/import-data.tsx
+++ b/web/components/integration/github/import-data.tsx
@@ -40,7 +40,7 @@ export const GithubImportData: FC<Props> = observer((props) => {
         <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-custom-text-200">
+            <p className="text-xs text-neutral-text-medium">
               Select the repository that you want the issues to be imported from.
             </p>
           </div>
@@ -54,7 +54,7 @@ export const GithubImportData: FC<Props> = observer((props) => {
                     integration={integration}
                     value={value ? value.id : null}
                     label={
-                      value ? `${value.full_name}` : <span className="text-custom-text-200">Select Repository</span>
+                      value ? `${value.full_name}` : <span className="text-neutral-text-medium">Select Repository</span>
                     }
                     onChange={onChange}
                     characterLimit={50}
@@ -67,7 +67,7 @@ export const GithubImportData: FC<Props> = observer((props) => {
         <div className="grid grid-cols-12 gap-4 sm:gap-16">
           <div className="col-span-12 sm:col-span-8">
             <h4 className="font-semibold">Select Project</h4>
-            <p className="text-xs text-custom-text-200">Select the project to import the issues to.</p>
+            <p className="text-xs text-neutral-text-medium">Select the project to import the issues to.</p>
           </div>
           <div className="col-span-12 sm:col-span-4">
             {workspaceProjectIds && (
@@ -78,7 +78,11 @@ export const GithubImportData: FC<Props> = observer((props) => {
                   <CustomSearchSelect
                     value={value}
                     label={
-                      value ? getProjectById(value)?.name : <span className="text-custom-text-200">Select Project</span>
+                      value ? (
+                        getProjectById(value)?.name
+                      ) : (
+                        <span className="text-neutral-text-medium">Select Project</span>
+                      )
                     }
                     onChange={onChange}
                     options={options}
@@ -92,7 +96,7 @@ export const GithubImportData: FC<Props> = observer((props) => {
         <div className="grid grid-cols-12 gap-4 sm:gap-16">
           <div className="col-span-12 sm:col-span-8">
             <h4 className="font-semibold">Sync Issues</h4>
-            <p className="text-xs text-custom-text-200">Set whether you want to sync the issues or not.</p>
+            <p className="text-xs text-neutral-text-medium">Set whether you want to sync the issues or not.</p>
           </div>
           <div className="col-span-12 sm:col-span-4">
             <Controller
diff --git a/web/components/integration/github/import-users.tsx b/web/components/integration/github/import-users.tsx
index ad0654438..8fd39c668 100644
--- a/web/components/integration/github/import-users.tsx
+++ b/web/components/integration/github/import-users.tsx
@@ -21,8 +21,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-custom-text-200">Name</div>
-          <div className="text-custom-text-200">Import as...</div>
+          <div className="text-neutral-text-medium">Name</div>
+          <div className="text-neutral-text-medium">Import as...</div>
           <div className="text-right">{users.filter((u) => u.import !== false).length} users selected</div>
         </div>
         <div className="space-y-2">
diff --git a/web/components/integration/github/repo-details.tsx b/web/components/integration/github/repo-details.tsx
index 70e462a10..226a9cff3 100644
--- a/web/components/integration/github/repo-details.tsx
+++ b/web/components/integration/github/repo-details.tsx
@@ -60,20 +60,20 @@ export const GithubRepoDetails: FC<Props> = ({ selectedRepo, handleStepChange, s
           <div className="flex items-center justify-between gap-4">
             <div>
               <div className="font-medium">Repository Details</div>
-              <div className="text-sm text-custom-text-200">Import completed. We have found:</div>
+              <div className="text-sm text-neutral-text-medium">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-custom-text-200">Issues</h6>
+                <h6 className="text-sm text-neutral-text-medium">Issues</h6>
               </div>
               <div className="flex-shrink-0 text-center">
                 <p className="text-3xl font-bold">{repoInfo.labels}</p>
-                <h6 className="text-sm text-custom-text-200">Labels</h6>
+                <h6 className="text-sm text-neutral-text-medium">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-custom-text-200">Users</h6>
+                <h6 className="text-sm text-neutral-text-medium">Users</h6>
               </div>
             </div>
           </div>
diff --git a/web/components/integration/github/root.tsx b/web/components/integration/github/root.tsx
index a7027238e..8f4740528 100644
--- a/web/components/integration/github/root.tsx
+++ b/web/components/integration/github/root.tsx
@@ -161,7 +161,7 @@ export const GithubImporterRoot: React.FC = () => {
     <form onSubmit={handleSubmit(createGithubImporterService)}>
       <div className="mt-4 space-y-2">
         <Link href={`/${workspaceSlug}/settings/imports`}>
-          <span className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
+          <span className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-neutral-text-medium hover:text-neutral-text-strong">
             <ArrowLeft className="h-3 w-3" />
             <div>Cancel import & go back</div>
           </span>
@@ -187,7 +187,9 @@ export const GithubImporterRoot: React.FC = () => {
                     }`}
                   >
                     <integration.icon
-                      className={`h-5 w-5 ${index <= activeIntegrationState() ? "text-white" : "text-custom-text-400"}`}
+                      className={`h-5 w-5 ${
+                        index <= activeIntegrationState() ? "text-white" : "text-neutral-text-subtle"
+                      }`}
                     />
                   </div>
                   {index < integrationWorkflowData.length - 1 && (
diff --git a/web/components/integration/github/select-repository.tsx b/web/components/integration/github/select-repository.tsx
index c6b93493e..78fa1d27b 100644
--- a/web/components/integration/github/select-repository.tsx
+++ b/web/components/integration/github/select-repository.tsx
@@ -71,7 +71,7 @@ export const SelectRepository: React.FC<Props> = (props) => {
           {userRepositories && options.length < totalCount && (
             <button
               type="button"
-              className="w-full p-1 text-center text-[0.6rem] text-custom-text-200 hover:bg-neutral-component-surface-dark"
+              className="w-full p-1 text-center text-[0.6rem] text-neutral-text-medium hover:bg-neutral-component-surface-dark"
               onClick={() => setSize(size + 1)}
               disabled={isValidating}
             >
diff --git a/web/components/integration/guide.tsx b/web/components/integration/guide.tsx
index 582c07b47..00c9e1f51 100644
--- a/web/components/integration/guide.tsx
+++ b/web/components/integration/guide.tsx
@@ -89,7 +89,7 @@ const IntegrationGuide = observer(() => {
                   </div>
                   <div>
                     <h3 className="flex items-center gap-4 text-sm font-medium">{service.title}</h3>
-                    <p className="text-sm tracking-tight text-custom-text-200">{service.description}</p>
+                    <p className="text-sm tracking-tight text-neutral-text-medium">{service.description}</p>
                   </div>
                 </div>
                 <div className="flex-shrink-0">
@@ -134,7 +134,7 @@ const IntegrationGuide = observer(() => {
                       </div>
                     </div>
                   ) : (
-                    <p className="px-4 py-6 text-sm text-custom-text-200">No previous imports available.</p>
+                    <p className="px-4 py-6 text-sm text-neutral-text-medium">No previous imports available.</p>
                   )
                 ) : (
                   <Loader className="mt-6 grid grid-cols-1 gap-3">
diff --git a/web/components/integration/jira/confirm-import.tsx b/web/components/integration/jira/confirm-import.tsx
index 09588396d..bd1970736 100644
--- a/web/components/integration/jira/confirm-import.tsx
+++ b/web/components/integration/jira/confirm-import.tsx
@@ -17,28 +17,28 @@ export const JiraConfirmImport: React.FC = () => {
         </div>
 
         <div className="col-span-1">
-          <p className="text-sm text-custom-text-200">Migrating</p>
+          <p className="text-sm text-neutral-text-medium">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-custom-text-200">Issues</p>
+            <p className="text-sm text-neutral-text-medium">Issues</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{watch("data.total_states")}</h4>
-            <p className="text-sm text-custom-text-200">States</p>
+            <p className="text-sm text-neutral-text-medium">States</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{watch("data.total_modules")}</h4>
-            <p className="text-sm text-custom-text-200">Modules</p>
+            <p className="text-sm text-neutral-text-medium">Modules</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{watch("data.total_labels")}</h4>
-            <p className="text-sm text-custom-text-200">Labels</p>
+            <p className="text-sm text-neutral-text-medium">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-custom-text-200">User</p>
+            <p className="text-sm text-neutral-text-medium">User</p>
           </div>
         </div>
       </div>
diff --git a/web/components/integration/jira/give-details.tsx b/web/components/integration/jira/give-details.tsx
index ed2ea77ae..8766c876c 100644
--- a/web/components/integration/jira/give-details.tsx
+++ b/web/components/integration/jira/give-details.tsx
@@ -28,7 +28,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
       <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-custom-text-200">
+          <p className="text-sm text-neutral-text-medium">
             Get to know your access token by navigating to{" "}
             <Link href="https://id.atlassian.com/manage-profile/security/api-tokens" target="_blank" rel="noreferrer">
               <span className="text-custom-primary underline">Atlassian Settings</span>
@@ -64,7 +64,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
       <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-custom-text-200">If XXX-123 is your issue, then enter XXX</p>
+          <p className="text-sm text-neutral-text-medium">If XXX-123 is your issue, then enter XXX</p>
         </div>
         <div className="col-span-1">
           <Controller
@@ -95,7 +95,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Jira Email Address</h3>
-          <p className="text-sm text-custom-text-200">Enter the Email account that you use in Jira account</p>
+          <p className="text-sm text-neutral-text-medium">Enter the Email account that you use in Jira account</p>
         </div>
         <div className="col-span-1">
           <Controller
@@ -125,7 +125,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
       <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-custom-text-200">Enter your companies cloud host name</p>
+          <p className="text-sm text-neutral-text-medium">Enter your companies cloud host name</p>
         </div>
         <div className="col-span-1">
           <Controller
@@ -156,7 +156,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Import to project</h3>
-          <p className="text-sm text-custom-text-200">Select which project you want to import to.</p>
+          <p className="text-sm text-neutral-text-medium">Select which project you want to import to.</p>
         </div>
         <div className="col-span-1">
           <Controller
@@ -173,7 +173,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
                     {value && value.trim() !== "" ? (
                       getProjectById(value)?.name
                     ) : (
-                      <span className="text-custom-text-200">Select a project</span>
+                      <span className="text-neutral-text-medium">Select a project</span>
                     )}
                   </span>
                 }
@@ -192,7 +192,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
                     );
                   })
                 ) : (
-                  <div className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200">
+                  <div className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-neutral-text-medium">
                     <p>You don{"'"}t have any project. Please create a project first.</p>
                   </div>
                 )}
@@ -203,9 +203,9 @@ export const JiraGetImportDetail: React.FC = observer(() => {
                       setTrackElement("Jira import detail page");
                       commandPaletteStore.toggleCreateProjectModal(true);
                     }}
-                    className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200"
+                    className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-neutral-text-medium"
                   >
-                    <Plus className="h-4 w-4 text-custom-text-200" />
+                    <Plus className="h-4 w-4 text-neutral-text-medium" />
                     <span>Create new project</span>
                   </button>
                 </div>
diff --git a/web/components/integration/jira/import-users.tsx b/web/components/integration/jira/import-users.tsx
index 6c1f2e999..de0e2eb66 100644
--- a/web/components/integration/jira/import-users.tsx
+++ b/web/components/integration/jira/import-users.tsx
@@ -49,7 +49,7 @@ export const JiraImportUsers: FC = () => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Users</h3>
-          <p className="text-sm text-custom-text-200">Update, invite or choose not to invite assignee</p>
+          <p className="text-sm text-neutral-text-medium">Update, invite or choose not to invite assignee</p>
         </div>
         <div className="col-span-1">
           <Controller
@@ -63,8 +63,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-custom-text-200">Name</div>
-            <div className="col-span-1 text-sm text-custom-text-200">Import as</div>
+            <div className="col-span-1 text-sm text-neutral-text-medium">Name</div>
+            <div className="col-span-1 text-sm text-neutral-text-medium">Import as</div>
           </div>
 
           <div className="mt-5 space-y-3">
diff --git a/web/components/integration/jira/jira-project-detail.tsx b/web/components/integration/jira/jira-project-detail.tsx
index 9e3166563..573f97e43 100644
--- a/web/components/integration/jira/jira-project-detail.tsx
+++ b/web/components/integration/jira/jira-project-detail.tsx
@@ -105,7 +105,7 @@ 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-custom-text-200">
+        <p className="text-sm text-neutral-text-medium">
           Something went wrong. Please{" "}
           <button
             onClick={() => setCurrentStep({ state: "import-configure" })}
@@ -125,28 +125,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-custom-text-200">Import Completed. We have found:</p>
+          <p className="text-sm text-neutral-text-medium">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-custom-text-200">Issues</p>
+            <p className="text-sm text-neutral-text-medium">Issues</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{projectInfo?.states}</h4>
-            <p className="text-sm text-custom-text-200">States</p>
+            <p className="text-sm text-neutral-text-medium">States</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{projectInfo?.modules}</h4>
-            <p className="text-sm text-custom-text-200">Modules</p>
+            <p className="text-sm text-neutral-text-medium">Modules</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{projectInfo?.labels}</h4>
-            <p className="text-sm text-custom-text-200">Labels</p>
+            <p className="text-sm text-neutral-text-medium">Labels</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{projectInfo?.users?.length}</h4>
-            <p className="text-sm text-custom-text-200">Users</p>
+            <p className="text-sm text-neutral-text-medium">Users</p>
           </div>
         </div>
       </div>
@@ -154,7 +154,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-custom-text-200">Import epics as modules</p>
+          <p className="text-sm text-neutral-text-medium">Import epics as modules</p>
         </div>
         <div className="col-span-1">
           <Controller
diff --git a/web/components/integration/jira/root.tsx b/web/components/integration/jira/root.tsx
index f674476e9..ec9650791 100644
--- a/web/components/integration/jira/root.tsx
+++ b/web/components/integration/jira/root.tsx
@@ -96,7 +96,7 @@ export const JiraImporterRoot: React.FC = () => {
   return (
     <div className="mt-4 flex h-full flex-col space-y-2">
       <Link href={`/${workspaceSlug}/settings/imports`}>
-        <span className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
+        <span className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-neutral-text-medium hover:text-neutral-text-strong">
           <div>
             <ArrowLeft className="h-3 w-3" />
           </div>
@@ -132,7 +132,9 @@ export const JiraImporterRoot: React.FC = () => {
                   }`}
                 >
                   <integration.icon
-                    className={`h-5 w-5 ${index <= activeIntegrationState() ? "text-white" : "text-custom-text-400"}`}
+                    className={`h-5 w-5 ${
+                      index <= activeIntegrationState() ? "text-white" : "text-neutral-text-subtle"
+                    }`}
                   />
                 </button>
                 {index < integrationWorkflowData.length - 1 && (
diff --git a/web/components/integration/single-import.tsx b/web/components/integration/single-import.tsx
index f7bd0f5fa..6c13565ef 100644
--- a/web/components/integration/single-import.tsx
+++ b/web/components/integration/single-import.tsx
@@ -38,7 +38,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-custom-text-200">
+      <div className="mt-2 flex items-center gap-2 text-xs text-neutral-text-medium">
         <span>{renderFormattedDate(service.created_at)}</span>|
         <span>Imported by {service.initiated_by_detail.display_name}</span>
       </div>
diff --git a/web/components/integration/single-integration-card.tsx b/web/components/integration/single-integration-card.tsx
index 192419933..3e21673d2 100644
--- a/web/components/integration/single-integration-card.tsx
+++ b/web/components/integration/single-integration-card.tsx
@@ -119,7 +119,7 @@ export const SingleIntegrationCard: React.FC<Props> = observer(({ integration })
               ? isInstalled && <CheckCircle className="h-3.5 w-3.5 fill-transparent text-green-500" />
               : null}
           </h3>
-          <p className="text-sm tracking-tight text-custom-text-200">
+          <p className="text-sm tracking-tight text-neutral-text-medium">
             {workspaceIntegrations
               ? isInstalled
                 ? integrationDetails[integration.provider].installed
diff --git a/web/components/issues/attachment/attachment-detail.tsx b/web/components/issues/attachment/attachment-detail.tsx
index ddeac4b0d..ba7407cee 100644
--- a/web/components/issues/attachment/attachment-detail.tsx
+++ b/web/components/issues/attachment/attachment-detail.tsx
@@ -70,7 +70,7 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = (props) => {
                 </Tooltip>
               </div>
 
-              <div className="flex items-center gap-3 text-xs text-custom-text-200">
+              <div className="flex items-center gap-3 text-xs text-neutral-text-medium">
                 <span>{getFileExtension(attachment.asset).toUpperCase()}</span>
                 <span>{convertBytesToSize(attachment.attributes.size)}</span>
               </div>
@@ -84,7 +84,7 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = (props) => {
               setAttachmentDeleteModal(true);
             }}
           >
-            <X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
+            <X className="h-4 w-4 text-neutral-text-medium hover:text-neutral-text-strong" />
           </button>
         )}
       </div>
diff --git a/web/components/issues/attachment/delete-attachment-confirmation-modal.tsx b/web/components/issues/attachment/delete-attachment-confirmation-modal.tsx
index ec088ef08..03b4d8e17 100644
--- a/web/components/issues/attachment/delete-attachment-confirmation-modal.tsx
+++ b/web/components/issues/attachment/delete-attachment-confirmation-modal.tsx
@@ -68,11 +68,11 @@ export const IssueAttachmentDeleteModal: FC<Props> = (props) => {
                         <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                       </div>
                       <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                        <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                        <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                           Delete Attachment
                         </Dialog.Title>
                         <div className="mt-2">
-                          <p className="text-sm text-custom-text-200">
+                          <p className="text-sm text-neutral-text-medium">
                             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 undone.
diff --git a/web/components/issues/confirm-issue-discard.tsx b/web/components/issues/confirm-issue-discard.tsx
index 816f1c5ce..bbc053899 100644
--- a/web/components/issues/confirm-issue-discard.tsx
+++ b/web/components/issues/confirm-issue-discard.tsx
@@ -58,11 +58,11 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mt-3 text-center sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                         Draft Issue
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">Would you like to save this issue in drafts?</p>
+                        <p className="text-sm text-neutral-text-medium">Would you like to save this issue in drafts?</p>
                       </div>
                     </div>
                   </div>
diff --git a/web/components/issues/delete-archived-issue-modal.tsx b/web/components/issues/delete-archived-issue-modal.tsx
index a2b447614..a6029aa5e 100644
--- a/web/components/issues/delete-archived-issue-modal.tsx
+++ b/web/components/issues/delete-archived-issue-modal.tsx
@@ -105,9 +105,9 @@ export const DeleteArchivedIssueModal: React.FC<Props> = observer((props) => {
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm text-custom-text-200">
+                    <p className="text-sm text-neutral-text-medium">
                       Are you sure you want to delete issue{" "}
-                      <span className="break-words font-medium text-custom-text-100">
+                      <span className="break-words font-medium text-neutral-text-strong">
                         {getProjectById(data?.project_id)?.identifier}-{data?.sequence_id}
                       </span>
                       {""}? All of the data related to the archived issue will be permanently removed. This action
diff --git a/web/components/issues/delete-draft-issue-modal.tsx b/web/components/issues/delete-draft-issue-modal.tsx
index be10cd40d..6dafdb8da 100644
--- a/web/components/issues/delete-draft-issue-modal.tsx
+++ b/web/components/issues/delete-draft-issue-modal.tsx
@@ -110,9 +110,9 @@ export const DeleteDraftIssueModal: React.FC<Props> = (props) => {
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm text-custom-text-200">
+                    <p className="text-sm text-neutral-text-medium">
                       Are you sure you want to delete issue{" "}
-                      <span className="break-words font-medium text-custom-text-100">
+                      <span className="break-words font-medium text-neutral-text-strong">
                         {data && getProjectById(data?.project_id)?.identifier}-{data?.sequence_id}
                       </span>
                       {""}? All of the data related to the draft issue will be permanently removed. This action cannot
diff --git a/web/components/issues/delete-issue-modal.tsx b/web/components/issues/delete-issue-modal.tsx
index ac34685b6..a017e4d4d 100644
--- a/web/components/issues/delete-issue-modal.tsx
+++ b/web/components/issues/delete-issue-modal.tsx
@@ -96,9 +96,9 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm text-custom-text-200">
+                    <p className="text-sm text-neutral-text-medium">
                       Are you sure you want to delete issue{" "}
-                      <span className="break-words font-medium text-custom-text-100">
+                      <span className="break-words font-medium text-neutral-text-strong">
                         {getProjectById(issue?.project_id)?.identifier}-{issue?.sequence_id}
                       </span>
                       {""}? All of the data related to the issue will be permanently removed. This action cannot be
diff --git a/web/components/issues/description-form.tsx b/web/components/issues/description-form.tsx
index 2e295ef1a..1f0d44f67 100644
--- a/web/components/issues/description-form.tsx
+++ b/web/components/issues/description-form.tsx
@@ -157,7 +157,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
           <h4 className="break-words text-2xl font-semibold">{issue.name}</h4>
         )}
         {characterLimit && !disabled && (
-          <div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-neutral-component-surface-light p-0.5 text-xs text-custom-text-200">
+          <div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-neutral-component-surface-light p-0.5 text-xs text-neutral-text-medium">
             <span className={`${watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""}`}>
               {watch("name").length}
             </span>
@@ -195,7 +195,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
             ) : (
               <RichReadOnlyEditor
                 value={localIssueDescription.description_html}
-                customClassName="!p-0 !pt-2 text-custom-text-200"
+                customClassName="!p-0 !pt-2 text-neutral-text-medium"
                 noBorder={disabled}
                 mentionHighlights={mentionHighlights}
               />
diff --git a/web/components/issues/draft-issue-form.tsx b/web/components/issues/draft-issue-form.tsx
index c2bb578d3..cba737b0f 100644
--- a/web/components/issues/draft-issue-form.tsx
+++ b/web/components/issues/draft-issue-form.tsx
@@ -306,7 +306,7 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
                 )}
               />
             )}
-            <h3 className="text-xl font-semibold leading-6 text-custom-text-100">
+            <h3 className="text-xl font-semibold leading-6 text-neutral-text-strong">
               {status ? "Update" : "Create"} issue
             </h3>
           </div>
@@ -321,7 +321,7 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
                       backgroundColor: selectedParentIssue.state__color,
                     }}
                   />
-                  <span className="flex-shrink-0 text-custom-text-200">
+                  <span className="flex-shrink-0 text-neutral-text-medium">
                     {selectedParentIssue.project__identifier}-{selectedParentIssue.sequence_id}
                   </span>
                   <span className="truncate font-medium">{selectedParentIssue.name.substring(0, 50)}</span>
diff --git a/web/components/issues/issue-detail/cycle-select.tsx b/web/components/issues/issue-detail/cycle-select.tsx
index fb8449d6f..216c27689 100644
--- a/web/components/issues/issue-detail/cycle-select.tsx
+++ b/web/components/issues/issue-detail/cycle-select.tsx
@@ -50,7 +50,7 @@ export const IssueCycleSelect: React.FC<TIssueCycleSelect> = observer((props) =>
         buttonVariant="transparent-with-text"
         className="w-full group"
         buttonContainerClassName="w-full text-left"
-        buttonClassName={`text-sm ${issue?.cycle_id ? "" : "text-custom-text-400"}`}
+        buttonClassName={`text-sm ${issue?.cycle_id ? "" : "text-neutral-text-subtle"}`}
         placeholder="No cycle"
         hideIcon
         dropdownArrow
diff --git a/web/components/issues/issue-detail/inbox/sidebar.tsx b/web/components/issues/issue-detail/inbox/sidebar.tsx
index 0c33d3e04..5912e7398 100644
--- a/web/components/issues/issue-detail/inbox/sidebar.tsx
+++ b/web/components/issues/issue-detail/inbox/sidebar.tsx
@@ -45,7 +45,7 @@ export const InboxIssueDetailsSidebar: React.FC<Props> = observer((props) => {
           {currentIssueState && (
             <StateGroupIcon className="h-4 w-4" stateGroup={currentIssueState.group} color={currentIssueState.color} />
           )}
-          <h4 className="text-lg font-medium text-custom-text-300">
+          <h4 className="text-lg font-medium text-neutral-text-medium">
             {projectDetails?.identifier}-{issue?.sequence_id}
           </h4>
         </div>
@@ -57,7 +57,7 @@ export const InboxIssueDetailsSidebar: React.FC<Props> = observer((props) => {
           <div className="flex flex-col gap-3">
             {/* State */}
             <div className="flex items-center gap-2 h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
                 <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
                 <span>State</span>
               </div>
@@ -76,7 +76,7 @@ export const InboxIssueDetailsSidebar: React.FC<Props> = observer((props) => {
             </div>
             {/* Assignee */}
             <div className="flex items-center gap-2 h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
                 <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
                 <span>Assignees</span>
               </div>
@@ -91,7 +91,7 @@ export const InboxIssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 className="w-3/5 flex-grow group"
                 buttonContainerClassName="w-full text-left"
                 buttonClassName={`text-sm justify-between ${
-                  issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"
+                  issue?.assignee_ids.length > 0 ? "" : "text-neutral-text-subtle"
                 }`}
                 hideIcon={issue.assignee_ids?.length === 0}
                 dropdownArrow
@@ -100,7 +100,7 @@ export const InboxIssueDetailsSidebar: React.FC<Props> = observer((props) => {
             </div>
             {/* Priority */}
             <div className="flex items-center gap-2 h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
                 <Signal className="h-4 w-4 flex-shrink-0" />
                 <span>Priority</span>
               </div>
@@ -120,7 +120,7 @@ export const InboxIssueDetailsSidebar: React.FC<Props> = observer((props) => {
           <div className="flex flex-col gap-3">
             {/* Due Date */}
             <div className="flex items-center gap-2 h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
                 <CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
                 <span>Due date</span>
               </div>
@@ -137,14 +137,14 @@ export const InboxIssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 buttonVariant="transparent-with-text"
                 className="w-3/5 flex-grow group"
                 buttonContainerClassName="w-full text-left"
-                buttonClassName={`text-sm ${issue?.target_date ? "" : "text-custom-text-400"}`}
+                buttonClassName={`text-sm ${issue?.target_date ? "" : "text-neutral-text-subtle"}`}
                 hideIcon
                 clearIconClassName="h-3 w-3 hidden group-hover:inline"
               />
             </div>
             {/* Labels */}
             <div className="flex items-center gap-2 min-h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
                 <Tag className="h-4 w-4 flex-shrink-0" />
                 <span>Labels</span>
               </div>
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
index 449297cbe..b26c66964 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
@@ -27,16 +27,14 @@ export const IssueAssigneeActivity: FC<TIssueAssigneeActivity> = observer((props
     >
       <>
         {activity.old_value === "" ? `added a new assignee ` : `removed the assignee `}
-
         <a
           href={`/${activity.workspace_detail?.slug}/profile/${activity.new_identifier ?? activity.old_identifier}`}
           target="_blank"
           rel="noopener noreferrer"
-          className="inline-flex items-center font-medium text-custom-text-100 hover:underline capitalize"
+          className="inline-flex items-center font-medium text-neutral-text-strong hover:underline capitalize"
         >
           {activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value}
         </a>
-
         {showIssue && (activity.old_value === "" ? ` to ` : ` from `)}
         {showIssue && <IssueLink activityId={activityId} />}.
       </>
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/attachment.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/attachment.tsx
index d9b4475c5..8cf378534 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/attachment.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/attachment.tsx
@@ -31,7 +31,7 @@ export const IssueAttachmentActivity: FC<TIssueAttachmentActivity> = observer((p
             href={`${activity.new_value}`}
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+            className="inline-flex items-center gap-1 font-medium text-neutral-text-strong hover:underline"
           >
             attachment
           </a>
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
index 8336e516f..68f3d66cd 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
@@ -33,7 +33,7 @@ export const IssueCycleActivity: FC<TIssueCycleActivity> = observer((props) => {
               href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 truncate font-medium text-neutral-text-strong hover:underline"
             >
               <span className="truncate">{activity.new_value}</span>
             </a>
@@ -45,7 +45,7 @@ export const IssueCycleActivity: FC<TIssueCycleActivity> = observer((props) => {
               href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 truncate font-medium text-neutral-text-strong hover:underline"
             >
               <span className="truncate"> {activity.new_value}</span>
             </a>
@@ -57,7 +57,7 @@ export const IssueCycleActivity: FC<TIssueCycleActivity> = observer((props) => {
               href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 truncate font-medium text-neutral-text-strong hover:underline"
             >
               <span className="truncate"> {activity.new_value}</span>
             </a>
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx
index e01b94e1b..3fde8a094 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx
@@ -33,13 +33,11 @@ export const IssueEstimateActivity: FC<TIssueEstimateActivity> = observer((props
         {activity.new_value ? `set the estimate point to ` : `removed the estimate point `}
         {activity.new_value && (
           <>
-
-            <span className="font-medium text-custom-text-100">
+            <span className="font-medium text-neutral-text-strong">
               {areEstimatesEnabledForCurrentProject
                 ? estimateValue
                 : `${currentPoint} ${currentPoint > 1 ? "points" : "point"}`}
             </span>
-
           </>
         )}
         {showIssue && (activity.new_value ? ` to ` : ` from `)}
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
index 719f40688..ca900f613 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
@@ -33,10 +33,10 @@ export const IssueActivityBlockComponent: FC<TIssueActivityBlockComponent> = (pr
       }`}
     >
       <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-neutral-component-surface-dark" aria-hidden={true} />
-      <div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-10 bg-neutral-component-surface-dark text-custom-text-200">
+      <div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-10 bg-neutral-component-surface-dark text-neutral-text-medium">
         {icon ? icon : <Network className="w-3.5 h-3.5" />}
       </div>
-      <div className="w-full text-custom-text-200">
+      <div className="w-full text-neutral-text-medium">
         <IssueUser activityId={activityId} />
         <span> {children} </span>
         <span>
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx
index e86b1fb57..e77e74a8b 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx
@@ -29,7 +29,7 @@ export const IssueLink: FC<TIssueLink> = (props) => {
         }`}
         target={activity.issue === null ? "_self" : "_blank"}
         rel={activity.issue === null ? "" : "noopener noreferrer"}
-        className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+        className="inline-flex items-center gap-1 font-medium text-neutral-text-strong hover:underline"
       >
         {activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"}{" "}
         <span className="font-normal">{activity.issue_detail?.name}</span>
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx
index dd44879cf..59c329002 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx
@@ -21,7 +21,7 @@ export const IssueUser: FC<TIssueUser> = (props) => {
   return (
     <a
       href={`/${activity?.workspace_detail?.slug}/profile/${activity?.actor_detail?.id}`}
-      className="hover:underline text-custom-text-100 font-medium capitalize"
+      className="hover:underline text-neutral-text-strong font-medium capitalize"
     >
       {activity.actor_detail?.display_name}
     </a>
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/label.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
index c5139a823..c6204bdd1 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
@@ -36,7 +36,7 @@ export const IssueLabelActivity: FC<TIssueLabelActivity> = observer((props) => {
               }}
               aria-hidden="true"
             />
-            <span className="flex-shrink truncate font-medium text-custom-text-100">{activity.new_value}</span>
+            <span className="flex-shrink truncate font-medium text-neutral-text-strong">{activity.new_value}</span>
           </span>
         ) : (
           <span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-neutral-border-medium px-2 py-0.5 text-xs">
@@ -47,7 +47,7 @@ export const IssueLabelActivity: FC<TIssueLabelActivity> = observer((props) => {
               }}
               aria-hidden="true"
             />
-            <span className="flex-shrink truncate font-medium text-custom-text-100">{activity.old_value}</span>
+            <span className="flex-shrink truncate font-medium text-neutral-text-strong">{activity.old_value}</span>
           </span>
         )}
         {showIssue && (activity.old_value === "" ? ` to ` : ` from `)}
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/link.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/link.tsx
index 15343392f..d1220eede 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/link.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/link.tsx
@@ -32,7 +32,7 @@ export const IssueLinkActivity: FC<TIssueLinkActivity> = observer((props) => {
               href={`${activity.new_value}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 font-medium text-neutral-text-strong hover:underline"
             >
               link
             </a>
@@ -44,7 +44,7 @@ export const IssueLinkActivity: FC<TIssueLinkActivity> = observer((props) => {
               href={`${activity.old_value}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 font-medium text-neutral-text-strong hover:underline"
             >
               link
             </a>
@@ -56,7 +56,7 @@ export const IssueLinkActivity: FC<TIssueLinkActivity> = observer((props) => {
               href={`${activity.old_value}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 font-medium text-neutral-text-strong hover:underline"
             >
               link
             </a>
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/module.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
index c8089d233..84f83e8e9 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
@@ -33,7 +33,7 @@ export const IssueModuleActivity: FC<TIssueModuleActivity> = observer((props) =>
               href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/modules/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 truncate font-medium text-neutral-text-strong hover:underline"
             >
               <span className="truncate">{activity.new_value}</span>
             </a>
@@ -45,7 +45,7 @@ export const IssueModuleActivity: FC<TIssueModuleActivity> = observer((props) =>
               href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/modules/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 truncate font-medium text-neutral-text-strong hover:underline"
             >
               <span className="truncate"> {activity.new_value}</span>
             </a>
@@ -57,7 +57,7 @@ export const IssueModuleActivity: FC<TIssueModuleActivity> = observer((props) =>
               href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/modules/${activity.old_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 truncate font-medium text-custom-text-100 hover:underline"
+              className="inline-flex items-center gap-1 truncate font-medium text-neutral-text-strong hover:underline"
             >
               <span className="truncate"> {activity.old_value}</span>
             </a>
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx
index afe814ee2..5a6b05e33 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx
@@ -27,9 +27,9 @@ export const IssueParentActivity: FC<TIssueParentActivity> = observer((props) =>
       <>
         {activity.new_value ? `set the parent to ` : `removed the parent `}
         {activity.new_value ? (
-          <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+          <span className="font-medium text-neutral-text-strong">{activity.new_value}</span>
         ) : (
-          <span className="font-medium text-custom-text-100">{activity.old_value}</span>
+          <span className="font-medium text-neutral-text-strong">{activity.old_value}</span>
         )}
         {showIssue && (activity.new_value ? ` for ` : ` from `)}
         {showIssue && <IssueLink activityId={activityId} />}.
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx
index 273bd319b..fa4cdeecd 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx
@@ -25,7 +25,7 @@ export const IssuePriorityActivity: FC<TIssuePriorityActivity> = observer((props
       ends={ends}
     >
       <>
-        set the priority to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+        set the priority to <span className="font-medium text-neutral-text-strong">{activity.new_value}</span>
         {showIssue ? ` for ` : ``}
         {showIssue && <IssueLink activityId={activityId} />}.
       </>
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/relation.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/relation.tsx
index e68a7c373..08a9ec7e9 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/relation.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/relation.tsx
@@ -40,9 +40,9 @@ export const IssueRelationActivity: FC<TIssueRelationActivity> = observer((props
           (activity.old_value === "" ? `marked that this issue relates to ` : `removed the relation from `)}
 
         {activity.old_value === "" ? (
-          <span className="font-medium text-custom-text-100">{activity.new_value}.</span>
+          <span className="font-medium text-neutral-text-strong">{activity.new_value}.</span>
         ) : (
-          <span className="font-medium text-custom-text-100">{activity.old_value}.</span>
+          <span className="font-medium text-neutral-text-strong">{activity.old_value}.</span>
         )}
       </>
     </IssueActivityBlockComponent>
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/start_date.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/start_date.tsx
index 95b3cda80..dc54e14f0 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/start_date.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/start_date.tsx
@@ -30,7 +30,7 @@ export const IssueStartDateActivity: FC<TIssueStartDateActivity> = observer((pro
         {activity.new_value ? `set the start date to ` : `removed the start date `}
         {activity.new_value && (
           <>
-            <span className="font-medium text-custom-text-100">{renderFormattedDate(activity.new_value)}</span>
+            <span className="font-medium text-neutral-text-strong">{renderFormattedDate(activity.new_value)}</span>
           </>
         )}
         {showIssue && (activity.new_value ? ` for ` : ` from `)}
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/state.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
index 7cc47c2c8..d788bff47 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
@@ -26,7 +26,7 @@ export const IssueStateActivity: FC<TIssueStateActivity> = observer((props) => {
       ends={ends}
     >
       <>
-        set the state to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+        set the state to <span className="font-medium text-neutral-text-strong">{activity.new_value}</span>
         {showIssue ? ` for ` : ``}
         {showIssue && <IssueLink activityId={activityId} />}.
       </>
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/target_date.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/target_date.tsx
index a4b40ec31..a08009345 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/target_date.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/target_date.tsx
@@ -30,7 +30,7 @@ export const IssueTargetDateActivity: FC<TIssueTargetDateActivity> = observer((p
         {activity.new_value ? `set the due date to ` : `removed the due date `}
         {activity.new_value && (
           <>
-            <span className="font-medium text-custom-text-100">{renderFormattedDate(activity.new_value)}</span>
+            <span className="font-medium text-neutral-text-strong">{renderFormattedDate(activity.new_value)}</span>
           </>
         )}
         {showIssue && (activity.new_value ? ` for ` : ` from `)}
diff --git a/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx b/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
index 3af4c8dcf..a00eac121 100644
--- a/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
+++ b/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
@@ -55,7 +55,7 @@ export const IssueCommentBlock: FC<TIssueCommentBlock> = (props) => {
                 ? comment.actor_detail.first_name + " Bot"
                 : comment.actor_detail.display_name}
             </div>
-            <div className="text-xs text-custom-text-200">commented {calculateTimeAgo(comment.created_at)}</div>
+            <div className="text-xs text-neutral-text-medium">commented {calculateTimeAgo(comment.created_at)}</div>
           </div>
           <div>{children}</div>
         </div>
diff --git a/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx b/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
index 3b1aed00d..17fc1fa59 100644
--- a/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
+++ b/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
@@ -151,7 +151,7 @@ export const IssueCommentCard: FC<TIssueCommentCard> = (props) => {
         </form>
         <div className={`relative ${isEditing ? "hidden" : ""}`}>
           {showAccessSpecifier && (
-            <div className="absolute right-2.5 top-2.5 z-[1] text-custom-text-300">
+            <div className="absolute right-2.5 top-2.5 z-[1] text-neutral-text-medium">
               {comment.access === "INTERNAL" ? <Lock className="h-3 w-3" /> : <Globe2 className="h-3 w-3" />}
             </div>
           )}
diff --git a/web/components/issues/issue-detail/issue-activity/root.tsx b/web/components/issues/issue-detail/issue-activity/root.tsx
index 91eb6a8c1..0d59c0406 100644
--- a/web/components/issues/issue-detail/issue-activity/root.tsx
+++ b/web/components/issues/issue-detail/issue-activity/root.tsx
@@ -113,7 +113,7 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
   return (
     <div className="space-y-3 pt-3">
       {/* header */}
-      <div className="text-lg text-custom-text-100">Activity</div>
+      <div className="text-lg text-neutral-text-strong">Activity</div>
 
       {/* rendering activity */}
       <div className="space-y-3">
@@ -124,8 +124,8 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
               className={`relative flex items-center px-2 py-1.5 gap-1 cursor-pointer transition-all rounded 
             ${
               tab.key === activityTab
-                ? `text-custom-text-100 bg-neutral-component-surface-dark`
-                : `text-custom-text-200 hover:bg-neutral-component-surface-dark`
+                ? `text-neutral-text-strong bg-neutral-component-surface-dark`
+                : `text-neutral-text-medium hover:bg-neutral-component-surface-dark`
             }`}
               onClick={() => setActivityTab(tab.key)}
             >
diff --git a/web/components/issues/issue-detail/label/create-label.tsx b/web/components/issues/issue-detail/label/create-label.tsx
index b942d489b..63761551a 100644
--- a/web/components/issues/issue-detail/label/create-label.tsx
+++ b/web/components/issues/issue-detail/label/create-label.tsx
@@ -74,7 +74,7 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
   return (
     <>
       <div
-        className="flex-shrink-0 transition-all relative flex items-center gap-1 cursor-pointer border border-neutral-border-subtle rounded-full text-xs p-0.5 px-2 hover:bg-neutral-component-surface-medium text-custom-text-300 hover:text-custom-text-200"
+        className="flex-shrink-0 transition-all relative flex items-center gap-1 cursor-pointer border border-neutral-border-subtle rounded-full text-xs p-0.5 px-2 hover:bg-neutral-component-surface-medium text-neutral-text-medium hover:text-neutral-text-medium"
         onClick={handleIsCreateToggle}
       >
         <div className="flex-shrink-0">
diff --git a/web/components/issues/issue-detail/label/select/label-select.tsx b/web/components/issues/issue-detail/label/select/label-select.tsx
index 850f2eebe..96ece0e02 100644
--- a/web/components/issues/issue-detail/label/select/label-select.tsx
+++ b/web/components/issues/issue-detail/label/select/label-select.tsx
@@ -71,7 +71,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
 
   const label = (
     <div
-      className={`flex-shrink-0 transition-all relative flex items-center gap-1 cursor-pointer rounded-full text-xs p-0.5 px-2 hover:bg-neutral-component-surface-medium py-0.5 text-custom-text-300 hover:text-custom-text-200 border border-neutral-border-subtle`}
+      className={`flex-shrink-0 transition-all relative flex items-center gap-1 cursor-pointer rounded-full text-xs p-0.5 px-2 hover:bg-neutral-component-surface-medium py-0.5 text-neutral-text-medium hover:text-neutral-text-medium border border-neutral-border-subtle`}
     >
       <div className="flex-shrink-0">
         <Tag className="h-2.5 w-2.5" />
@@ -110,9 +110,9 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
             {...attributes.popper}
           >
             <div className="flex w-full items-center justify-start rounded border border-neutral-border-medium bg-neutral-component-surface-medium px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-300" />
+              <Search className="h-3.5 w-3.5 text-neutral-text-medium" />
               <Combobox.Input
-                className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                className="w-full bg-transparent px-2 py-1 text-xs text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Search"
@@ -121,7 +121,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
             </div>
             <div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
               {isLoading ? (
-                <p className="text-center text-custom-text-200">Loading...</p>
+                <p className="text-center text-neutral-text-medium">Loading...</p>
               ) : filteredOptions.length > 0 ? (
                 filteredOptions.map((option) => (
                   <Combobox.Option
@@ -129,7 +129,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
                     value={option.value}
                     className={({ selected }) =>
                       `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-neutral-component-surface-dark ${
-                        selected ? "text-custom-text-100" : "text-custom-text-200"
+                        selected ? "text-neutral-text-strong" : "text-neutral-text-medium"
                       }`
                     }
                   >
@@ -147,7 +147,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
                 ))
               ) : (
                 <span className="flex items-center gap-2 p-1">
-                  <p className="text-left text-custom-text-200 ">No matching results</p>
+                  <p className="text-left text-neutral-text-medium ">No matching results</p>
                 </span>
               )}
             </div>
diff --git a/web/components/issues/issue-detail/links/create-update-link-modal.tsx b/web/components/issues/issue-detail/links/create-update-link-modal.tsx
index ca5bb58da..ccaf4c2c7 100644
--- a/web/components/issues/issue-detail/links/create-update-link-modal.tsx
+++ b/web/components/issues/issue-detail/links/create-update-link-modal.tsx
@@ -87,12 +87,12 @@ export const IssueLinkCreateUpdateModal: FC<TIssueLinkCreateEditModal> = (props)
                 <form onSubmit={handleSubmit(handleFormSubmit)}>
                   <div>
                     <div className="space-y-5">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                         {preloadedData?.id ? "Update Link" : "Add Link"}
                       </Dialog.Title>
                       <div className="mt-2 space-y-3">
                         <div>
-                          <label htmlFor="url" className="mb-2 text-custom-text-200">
+                          <label htmlFor="url" className="mb-2 text-neutral-text-medium">
                             URL
                           </label>
                           <Controller
@@ -118,7 +118,7 @@ export const IssueLinkCreateUpdateModal: FC<TIssueLinkCreateEditModal> = (props)
                           />
                         </div>
                         <div>
-                          <label htmlFor="title" className="mb-2 text-custom-text-200">
+                          <label htmlFor="title" className="mb-2 text-neutral-text-medium">
                             {`Title (optional)`}
                           </label>
                           <Controller
diff --git a/web/components/issues/issue-detail/links/link-detail.tsx b/web/components/issues/issue-detail/links/link-detail.tsx
index fb27f2b17..31c7eafcc 100644
--- a/web/components/issues/issue-detail/links/link-detail.tsx
+++ b/web/components/issues/issue-detail/links/link-detail.tsx
@@ -81,7 +81,7 @@ export const IssueLinkDetail: FC<TIssueLinkDetail> = (props) => {
                   toggleIssueLinkModal(true);
                 }}
               >
-                <Pencil className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
+                <Pencil className="h-3 w-3 stroke-[1.5] text-neutral-text-medium" />
               </button>
               <a
                 href={linkDetail.url}
@@ -89,7 +89,7 @@ export const IssueLinkDetail: FC<TIssueLinkDetail> = (props) => {
                 rel="noopener noreferrer"
                 className="flex items-center justify-center p-1 hover:bg-neutral-component-surface-dark"
               >
-                <ExternalLinkIcon className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
+                <ExternalLinkIcon className="h-3 w-3 stroke-[1.5] text-neutral-text-medium" />
               </a>
               <button
                 type="button"
@@ -107,7 +107,7 @@ export const IssueLinkDetail: FC<TIssueLinkDetail> = (props) => {
         </div>
 
         <div className="px-5">
-          <p className="mt-0.5 stroke-[1.5] text-xs text-custom-text-300">
+          <p className="mt-0.5 stroke-[1.5] text-xs text-neutral-text-medium">
             Added {calculateTimeAgo(linkDetail.created_at)}
             <br />
             by{" "}
diff --git a/web/components/issues/issue-detail/module-select.tsx b/web/components/issues/issue-detail/module-select.tsx
index 1c4d80168..b196e6c0e 100644
--- a/web/components/issues/issue-detail/module-select.tsx
+++ b/web/components/issues/issue-detail/module-select.tsx
@@ -60,7 +60,9 @@ export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props)
         disabled={disableSelect}
         className="w-full h-full group"
         buttonContainerClassName="w-full"
-        buttonClassName={`min-h-8 text-sm justify-between ${issue?.module_ids?.length ? "" : "text-custom-text-400"}`}
+        buttonClassName={`min-h-8 text-sm justify-between ${
+          issue?.module_ids?.length ? "" : "text-neutral-text-subtle"
+        }`}
         buttonVariant="transparent-with-text"
         hideIcon
         dropdownArrow
diff --git a/web/components/issues/issue-detail/parent-select.tsx b/web/components/issues/issue-detail/parent-select.tsx
index 9a1aa48ad..19e4f07dc 100644
--- a/web/components/issues/issue-detail/parent-select.tsx
+++ b/web/components/issues/issue-detail/parent-select.tsx
@@ -94,18 +94,18 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
                     handleParentIssue(null);
                   }}
                 >
-                  <X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
+                  <X className="h-2.5 w-2.5 text-neutral-text-medium hover:text-red-500" />
                 </span>
               </Tooltip>
             )}
           </div>
         ) : (
-          <span className="text-sm text-custom-text-400">Add parent issue</span>
+          <span className="text-sm text-neutral-text-subtle">Add parent issue</span>
         )}
         {!disabled && (
           <span
             className={cn("p-1 flex-shrink-0 opacity-0 group-hover:opacity-100", {
-              "text-custom-text-400": !issue.parent_id && !parentIssue,
+              "text-neutral-text-subtle": !issue.parent_id && !parentIssue,
             })}
           >
             <Pencil className="h-2.5 w-2.5 flex-shrink-0" />
diff --git a/web/components/issues/issue-detail/parent/root.tsx b/web/components/issues/issue-detail/parent/root.tsx
index 52a2025c9..daaea63b9 100644
--- a/web/components/issues/issue-detail/parent/root.tsx
+++ b/web/components/issues/issue-detail/parent/root.tsx
@@ -43,16 +43,16 @@ export const IssueParentDetail: FC<TIssueParentDetail> = (props) => {
           <div className="flex items-center gap-3">
             <div className="flex items-center gap-2.5">
               <span className="block h-2 w-2 rounded-full" style={{ backgroundColor: stateColor }} />
-              <span className="flex-shrink-0 text-custom-text-200">
+              <span className="flex-shrink-0 text-neutral-text-medium">
                 {getProjectById(parentIssue.project_id)?.identifier}-{parentIssue?.sequence_id}
               </span>
             </div>
-            <span className="truncate text-custom-text-100">{(parentIssue?.name ?? "").substring(0, 50)}</span>
+            <span className="truncate text-neutral-text-strong">{(parentIssue?.name ?? "").substring(0, 50)}</span>
           </div>
         </Link>
 
         <CustomMenu ellipsis optionsClassName="p-1.5">
-          <div className="border-b border-neutral-border-medium text-xs font-medium text-custom-text-200">
+          <div className="border-b border-neutral-border-medium text-xs font-medium text-neutral-text-medium">
             Sibling issues
           </div>
 
diff --git a/web/components/issues/issue-detail/parent/siblings.tsx b/web/components/issues/issue-detail/parent/siblings.tsx
index 45eca81d4..9cad6e815 100644
--- a/web/components/issues/issue-detail/parent/siblings.tsx
+++ b/web/components/issues/issue-detail/parent/siblings.tsx
@@ -35,13 +35,13 @@ export const IssueParentSiblings: FC<TIssueParentSiblings> = (props) => {
   return (
     <div>
       {isLoading ? (
-        <div className="flex items-center gap-2 whitespace-nowrap px-1 py-1 text-left text-xs text-custom-text-200">
+        <div className="flex items-center gap-2 whitespace-nowrap px-1 py-1 text-left text-xs text-neutral-text-medium">
           Loading
         </div>
       ) : subIssueIds && subIssueIds.length > 0 ? (
         subIssueIds.map((issueId) => currentIssue.id != issueId && <IssueParentSiblingItem issueId={issueId} />)
       ) : (
-        <div className="flex items-center gap-2 whitespace-nowrap px-1 py-1 text-left text-xs text-custom-text-200">
+        <div className="flex items-center gap-2 whitespace-nowrap px-1 py-1 text-left text-xs text-neutral-text-medium">
           No sibling issues
         </div>
       )}
diff --git a/web/components/issues/issue-detail/reactions/issue-comment.tsx b/web/components/issues/issue-detail/reactions/issue-comment.tsx
index 4a1176ed6..39ac96c3c 100644
--- a/web/components/issues/issue-detail/reactions/issue-comment.tsx
+++ b/web/components/issues/issue-detail/reactions/issue-comment.tsx
@@ -101,7 +101,7 @@ export const IssueCommentReaction: FC<TIssueCommentReaction> = observer((props)
                   type="button"
                   onClick={() => issueCommentReactionOperations.react(reaction)}
                   key={reaction}
-                  className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
+                  className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-neutral-text-strong ${
                     userReactions.includes(reaction) ? "bg-custom-primary-100/10" : "bg-neutral-component-surface-dark"
                   }`}
                 >
diff --git a/web/components/issues/issue-detail/reactions/issue.tsx b/web/components/issues/issue-detail/reactions/issue.tsx
index 86f670e97..da364ec13 100644
--- a/web/components/issues/issue-detail/reactions/issue.tsx
+++ b/web/components/issues/issue-detail/reactions/issue.tsx
@@ -86,7 +86,7 @@ export const IssueReaction: FC<TIssueReaction> = observer((props) => {
                   type="button"
                   onClick={() => issueReactionOperations.react(reaction)}
                   key={reaction}
-                  className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
+                  className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-neutral-text-strong ${
                     userReactions.includes(reaction) ? "bg-custom-primary-100/10" : "bg-neutral-component-surface-dark"
                   }`}
                 >
diff --git a/web/components/issues/issue-detail/reactions/reaction-selector.tsx b/web/components/issues/issue-detail/reactions/reaction-selector.tsx
index 3cad3ffa0..8d48e25c0 100644
--- a/web/components/issues/issue-detail/reactions/reaction-selector.tsx
+++ b/web/components/issues/issue-detail/reactions/reaction-selector.tsx
@@ -31,7 +31,7 @@ export const ReactionSelector: React.FC<Props> = (props) => {
                 size === "sm" ? "h-6 w-6" : size === "md" ? "h-7 w-7" : "h-8 w-8"
               }`}
             >
-              <SmilePlus className="h-3.5 w-3.5 text-custom-text-100" />
+              <SmilePlus className="h-3.5 w-3.5 text-neutral-text-strong" />
             </span>
           </Popover.Button>
           <Transition
diff --git a/web/components/issues/issue-detail/relation-select.tsx b/web/components/issues/issue-detail/relation-select.tsx
index d5125b0dc..251ce486c 100644
--- a/web/components/issues/issue-detail/relation-select.tsx
+++ b/web/components/issues/issue-detail/relation-select.tsx
@@ -18,7 +18,7 @@ export type TRelationObject = { className: string; icon: (size: number) => React
 
 export const issueRelationObject: Record<TIssueRelationTypes, TRelationObject> = {
   relates_to: {
-    className: "bg-neutral-component-surface-dark text-custom-text-200",
+    className: "bg-neutral-component-surface-dark text-neutral-text-medium",
     icon: (size) => <RelatedIcon height={size} width={size} />,
     placeholder: "Add related issues",
   },
@@ -33,7 +33,7 @@ export const issueRelationObject: Record<TIssueRelationTypes, TRelationObject> =
     placeholder: "None",
   },
   duplicate: {
-    className: "bg-neutral-component-surface-dark text-custom-text-200",
+    className: "bg-neutral-component-surface-dark text-neutral-text-medium",
     icon: (size) => <CopyPlus size={size} />,
     placeholder: "None",
   },
@@ -147,7 +147,7 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
                             removeRelation(workspaceSlug, projectId, issueId, relationKey, relationIssueId);
                           }}
                         >
-                          <X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
+                          <X className="h-2.5 w-2.5 text-neutral-text-medium hover:text-red-500" />
                         </span>
                       </Tooltip>
                     )}
@@ -156,12 +156,12 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
               })}
             </div>
           ) : (
-            <span className="text-sm text-custom-text-400">{issueRelationObject[relationKey].placeholder}</span>
+            <span className="text-sm text-neutral-text-subtle">{issueRelationObject[relationKey].placeholder}</span>
           )}
           {!disabled && (
             <span
               className={cn("p-1 flex-shrink-0 opacity-0 group-hover:opacity-100", {
-                "text-custom-text-400": relationIssueIds.length === 0,
+                "text-neutral-text-subtle": relationIssueIds.length === 0,
               })}
             >
               <Pencil className="h-2.5 w-2.5 flex-shrink-0" />
diff --git a/web/components/issues/issue-detail/sidebar.tsx b/web/components/issues/issue-detail/sidebar.tsx
index 768a1aeba..78795a752 100644
--- a/web/components/issues/issue-detail/sidebar.tsx
+++ b/web/components/issues/issue-detail/sidebar.tsx
@@ -119,7 +119,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             ) : inboxIssueId ? (
               <StateGroupIcon className="h-4 w-4" stateGroup="backlog" color="#ff7700" />
             ) : null}
-            <h4 className="text-lg font-medium text-custom-text-300">
+            <h4 className="text-lg font-medium text-neutral-text-medium">
               {projectDetails?.identifier}-{issue?.sequence_id}
             </h4>
           </div>
@@ -154,7 +154,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
           {/* TODO: render properties using a common component */}
           <div className={`mt-3 space-y-2 ${!is_editable ? "opacity-60" : ""}`}>
             <div className="flex items-center gap-2 h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
                 <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
                 <span>State</span>
               </div>
@@ -173,7 +173,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             </div>
 
             <div className="flex items-center gap-2 h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
                 <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
                 <span>Assignees</span>
               </div>
@@ -188,7 +188,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 className="w-3/5 flex-grow group"
                 buttonContainerClassName="w-full text-left"
                 buttonClassName={`text-sm justify-between ${
-                  issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"
+                  issue?.assignee_ids.length > 0 ? "" : "text-neutral-text-subtle"
                 }`}
                 hideIcon={issue.assignee_ids?.length === 0}
                 dropdownArrow
@@ -197,7 +197,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             </div>
 
             <div className="flex items-center gap-2 h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
                 <Signal className="h-4 w-4 flex-shrink-0" />
                 <span>Priority</span>
               </div>
@@ -213,7 +213,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             </div>
 
             <div className="flex items-center gap-2 h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
                 <CalendarClock className="h-4 w-4 flex-shrink-0" />
                 <span>Start date</span>
               </div>
@@ -230,7 +230,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 buttonVariant="transparent-with-text"
                 className="w-3/5 flex-grow group"
                 buttonContainerClassName="w-full text-left"
-                buttonClassName={`text-sm ${issue?.start_date ? "" : "text-custom-text-400"}`}
+                buttonClassName={`text-sm ${issue?.start_date ? "" : "text-neutral-text-subtle"}`}
                 hideIcon
                 clearIconClassName="h-3 w-3 hidden group-hover:inline"
                 // TODO: add this logic
@@ -239,7 +239,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             </div>
 
             <div className="flex items-center gap-2 h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
                 <CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
                 <span>Due date</span>
               </div>
@@ -256,7 +256,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 buttonVariant="transparent-with-text"
                 className="w-3/5 flex-grow group"
                 buttonContainerClassName="w-full text-left"
-                buttonClassName={`text-sm ${issue?.target_date ? "" : "text-custom-text-400"}`}
+                buttonClassName={`text-sm ${issue?.target_date ? "" : "text-neutral-text-subtle"}`}
                 hideIcon
                 clearIconClassName="h-3 w-3 hidden group-hover:inline"
                 // TODO: add this logic
@@ -266,7 +266,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
             {areEstimatesEnabledForCurrentProject && (
               <div className="flex items-center gap-2 h-8">
-                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
                   <Triangle className="h-4 w-4 flex-shrink-0" />
                   <span>Estimate</span>
                 </div>
@@ -278,7 +278,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                   buttonVariant="transparent-with-text"
                   className="w-3/5 flex-grow group"
                   buttonContainerClassName="w-full text-left"
-                  buttonClassName={`text-sm ${issue?.estimate_point !== null ? "" : "text-custom-text-400"}`}
+                  buttonClassName={`text-sm ${issue?.estimate_point !== null ? "" : "text-neutral-text-subtle"}`}
                   placeholder="None"
                   hideIcon
                   dropdownArrow
@@ -289,7 +289,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
             {projectDetails?.module_view && (
               <div className="flex items-center gap-2 min-h-8 h-full">
-                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
                   <DiceIcon className="h-4 w-4 flex-shrink-0" />
                   <span>Module</span>
                 </div>
@@ -306,7 +306,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
             {projectDetails?.cycle_view && (
               <div className="flex items-center gap-2 h-8">
-                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
                   <ContrastIcon className="h-4 w-4 flex-shrink-0" />
                   <span>Cycle</span>
                 </div>
@@ -322,7 +322,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             )}
 
             <div className="flex items-center gap-2 h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
                 <LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
                 <span>Parent</span>
               </div>
@@ -337,7 +337,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             </div>
 
             <div className="flex gap-2 min-h-8">
-              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
                 <RelatedIcon className="h-4 w-4 flex-shrink-0" />
                 <span>Relates to</span>
               </div>
@@ -352,7 +352,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             </div>
 
             <div className="flex gap-2 min-h-8">
-              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
                 <XCircle className="h-4 w-4 flex-shrink-0" />
                 <span>Blocking</span>
               </div>
@@ -367,7 +367,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             </div>
 
             <div className="flex gap-2 min-h-8">
-              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
                 <CircleDot className="h-4 w-4 flex-shrink-0" />
                 <span>Blocked by</span>
               </div>
@@ -382,7 +382,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             </div>
 
             <div className="flex gap-2 min-h-8">
-              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
                 <CopyPlus className="h-4 w-4 flex-shrink-0" />
                 <span>Duplicate of</span>
               </div>
@@ -398,7 +398,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
           </div>
 
           <div className="flex items-center gap-2 min-h-8 py-2">
-            <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+            <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-neutral-text-medium">
               <Tag className="h-4 w-4 flex-shrink-0" />
               <span>Labels</span>
             </div>
diff --git a/web/components/issues/issue-layouts/calendar/day-tile.tsx b/web/components/issues/issue-layouts/calendar/day-tile.tsx
index 15740c016..3e4f2502a 100644
--- a/web/components/issues/issue-layouts/calendar/day-tile.tsx
+++ b/web/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -61,7 +61,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
             calendarLayout === "month" // if month layout, highlight current month days
               ? date.is_current_month
                 ? "font-medium"
-                : "text-custom-text-300"
+                : "text-neutral-text-medium"
               : "font-medium" // if week layout, highlight all days
           } ${
             date.date.getDay() === 0 || date.date.getDay() === 6
@@ -113,7 +113,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
                   <div className="flex items-center px-2.5 py-1">
                     <button
                       type="button"
-                      className="w-min whitespace-nowrap rounded text-xs px-1.5 py-1 text-custom-text-400 font-medium  hover:bg-neutral-component-surface-dark hover:text-custom-text-300"
+                      className="w-min whitespace-nowrap rounded text-xs px-1.5 py-1 text-neutral-text-subtle font-medium  hover:bg-neutral-component-surface-dark hover:text-neutral-text-medium"
                       onClick={() => setShowAllIssues((prevData) => !prevData)}
                     >
                       {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
diff --git a/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx b/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
index 622a64776..be2c1345d 100644
--- a/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
+++ b/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
@@ -95,7 +95,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
               type="button"
               ref={setReferenceElement}
               className={`flex items-center gap-1.5 rounded bg-neutral-component-surface-dark px-2.5 py-1 text-xs outline-none hover:bg-neutral-component-surface-dark ${
-                open ? "text-custom-text-100" : "text-custom-text-200"
+                open ? "text-neutral-text-strong" : "text-neutral-text-medium"
               }`}
             >
               <div className="font-medium">Options</div>
diff --git a/web/components/issues/issue-layouts/calendar/header.tsx b/web/components/issues/issue-layouts/calendar/header.tsx
index 73d610b32..7165ab017 100644
--- a/web/components/issues/issue-layouts/calendar/header.tsx
+++ b/web/components/issues/issue-layouts/calendar/header.tsx
@@ -96,7 +96,7 @@ export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
       <div className="flex items-center gap-1.5">
         <button
           type="button"
-          className="rounded bg-neutral-component-surface-dark px-2.5 py-1 text-xs font-medium text-custom-text-200 hover:text-custom-text-100"
+          className="rounded bg-neutral-component-surface-dark px-2.5 py-1 text-xs font-medium text-neutral-text-medium hover:text-neutral-text-strong"
           onClick={handleToday}
         >
           Today
diff --git a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
index dd9398517..9fc811aaa 100644
--- a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
+++ b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
@@ -46,8 +46,8 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
   const customActionButton = (
     <div
       ref={menuActionRef}
-      className={`w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-neutral-component-surface-dark ${
-        isMenuActive ? "bg-neutral-component-surface-dark text-custom-text-100" : "text-custom-text-200"
+      className={`w-full cursor-pointer rounded p-1 text-sidebar-neutral-text-subtle hover:bg-neutral-component-surface-dark ${
+        isMenuActive ? "bg-neutral-component-surface-dark text-neutral-text-strong" : "text-neutral-text-medium"
       }`}
       onClick={() => setIsMenuActive(!isMenuActive)}
     >
@@ -78,7 +78,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
                   href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
                   target="_blank"
                   onClick={() => handleIssuePeekOverview(issue)}
-                  className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+                  className="w-full line-clamp-1 cursor-pointer text-sm text-neutral-text-strong"
                 >
                   <>
                     {issue?.tempId !== undefined && (
@@ -106,7 +106,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
                             backgroundColor: stateColor,
                           }}
                         />
-                        <div className="flex-shrink-0 text-xs text-custom-text-300">
+                        <div className="flex-shrink-0 text-xs text-neutral-text-medium">
                           {getProjectById(issue?.project_id)?.identifier}-{issue.sequence_id}
                         </div>
                         <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
diff --git a/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
index f0aa22299..81220b4fd 100644
--- a/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
@@ -42,7 +42,7 @@ const Inputs = (props: any) => {
 
   return (
     <>
-      <h4 className="text-xs leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+      <h4 className="text-xs leading-5 text-neutral-text-subtle">{projectDetails?.identifier ?? "..."}</h4>
       <input
         type="text"
         autoComplete="off"
@@ -50,7 +50,7 @@ const Inputs = (props: any) => {
         {...register("name", {
           required: "Issue title is required.",
         })}
-        className="w-full rounded-md bg-transparent py-1.5 pr-2 text-xs font-medium leading-5 text-custom-text-200 outline-none"
+        className="w-full rounded-md bg-transparent py-1.5 pr-2 text-xs font-medium leading-5 text-neutral-text-medium outline-none"
       />
     </>
   );
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/date.tsx b/web/components/issues/issue-layouts/filters/applied-filters/date.tsx
index fa6500b8b..1d59f41a3 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/date.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/date.tsx
@@ -41,7 +41,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
           <span className="normal-case">{getDateLabel(date)}</span>
           <button
             type="button"
-            className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+            className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
             onClick={() => handleRemove(date)}
           >
             <X size={10} strokeWidth={2} />
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
index fa7cc7f5e..986a129dd 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
@@ -56,7 +56,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
             key={filterKey}
             className="flex flex-wrap items-center gap-2 rounded-md border border-neutral-border-medium px-2 py-1 capitalize"
           >
-            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+            <span className="text-xs text-neutral-text-medium">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
             <div className="flex flex-wrap items-center gap-1">
               {membersFilters.includes(filterKey) && (
                 <AppliedMembersFilters
@@ -107,7 +107,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
               {isEditingAllowed && (
                 <button
                   type="button"
-                  className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                  className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
                   onClick={() => handleRemoveFilter(filterKey, null)}
                 >
                   <X size={12} strokeWidth={2} />
@@ -121,7 +121,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
         <button
           type="button"
           onClick={handleClearAllFilters}
-          className="flex items-center gap-2 rounded-md border border-neutral-border-medium px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
+          className="flex items-center gap-2 rounded-md border border-neutral-border-medium px-2 py-1 text-xs text-neutral-text-medium hover:text-neutral-text-medium"
         >
           Clear all
           <X size={12} strokeWidth={2} />
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/label.tsx b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx
index 9b7b6b362..d9d251c41 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/label.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx
@@ -34,7 +34,7 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
             {editable && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
                 onClick={() => handleRemove(labelId)}
               >
                 <X size={10} strokeWidth={2} />
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
index b349d43d9..1e80076bc 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
@@ -32,7 +32,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
             {editable && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
                 onClick={() => handleRemove(memberId)}
               >
                 <X size={10} strokeWidth={2} />
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
index ed35ce8b8..9e92ad11f 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
@@ -24,7 +24,7 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
           {editable && (
             <button
               type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
               onClick={() => handleRemove(priority)}
             >
               <X size={10} strokeWidth={2} />
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx
index 9e1c9d135..9a2d37fc8 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx
@@ -41,7 +41,7 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
             {editable && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
                 onClick={() => handleRemove(projectId)}
               >
                 <X size={10} strokeWidth={2} />
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
index 2df1ad598..895287f10 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
@@ -21,7 +21,7 @@ export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => {
           {stateGroup}
           <button
             type="button"
-            className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+            className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
             onClick={() => handleRemove(stateGroup)}
           >
             <X size={10} strokeWidth={2} />
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
index e86e1db4b..40755204b 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
@@ -30,7 +30,7 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => {
             {editable && (
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
                 onClick={() => handleRemove(stateId)}
               >
                 <X size={10} strokeWidth={2} />
diff --git a/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx b/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
index 168e31bc0..c588a1365 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
@@ -72,7 +72,7 @@ export const FilterAssignees: React.FC<Props> = observer((props: Props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx b/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
index 7bde26ab9..f9fb263b3 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
@@ -71,7 +71,7 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx b/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
index 9d173cb93..684d0b3a4 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
@@ -39,10 +39,10 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
     <div className="flex h-full w-full flex-col overflow-hidden">
       <div className="bg-neutral-component-surface-light p-2.5 pb-0">
         <div className="flex items-center gap-1.5 rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-medium px-1.5 py-1 text-xs">
-          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+          <Search className="text-neutral-text-subtle" size={12} strokeWidth={2} />
           <input
             type="text"
-            className="w-full bg-neutral-component-surface-medium outline-none placeholder:text-custom-text-400"
+            className="w-full bg-neutral-component-surface-medium outline-none placeholder:text-neutral-text-subtle"
             placeholder="Search"
             value={filtersSearchQuery}
             onChange={(e) => setFiltersSearchQuery(e.target.value)}
@@ -50,7 +50,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+              <X className="text-neutral-text-medium" size={12} strokeWidth={2} />
             </button>
           )}
         </div>
diff --git a/web/components/issues/issue-layouts/filters/header/filters/labels.tsx b/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
index b226f42b3..0bee09571 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
@@ -67,7 +67,7 @@ export const FilterLabels: React.FC<Props> = observer((props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx b/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
index a6af9833a..e552ae37a 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
@@ -72,7 +72,7 @@ export const FilterMentions: React.FC<Props> = observer((props: Props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/web/components/issues/issue-layouts/filters/header/filters/priority.tsx b/web/components/issues/issue-layouts/filters/header/filters/priority.tsx
index 839e25e3d..eb2f2a6ff 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/priority.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/priority.tsx
@@ -45,7 +45,7 @@ export const FilterPriority: React.FC<Props> = observer((props) => {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
           )}
         </div>
       )}
diff --git a/web/components/issues/issue-layouts/filters/header/filters/project.tsx b/web/components/issues/issue-layouts/filters/header/filters/project.tsx
index 61b7d50c1..c8c68f0c8 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/project.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/project.tsx
@@ -80,7 +80,7 @@ export const FilterProjects: React.FC<Props> = observer((props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/web/components/issues/issue-layouts/filters/header/filters/start-date.tsx b/web/components/issues/issue-layouts/filters/header/filters/start-date.tsx
index 2cb715158..2c0272435 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/start-date.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/start-date.tsx
@@ -54,7 +54,7 @@ export const FilterStartDate: React.FC<Props> = observer((props) => {
               <FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
             </>
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
           )}
         </div>
       )}
diff --git a/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx b/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
index ea9097146..3ff3813c3 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
@@ -62,7 +62,7 @@ export const FilterStateGroup: React.FC<Props> = observer((props) => {
               )}
             </>
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
           )}
         </div>
       )}
diff --git a/web/components/issues/issue-layouts/filters/header/filters/state.tsx b/web/components/issues/issue-layouts/filters/header/filters/state.tsx
index c13a69b0a..bea897de2 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/state.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/state.tsx
@@ -63,7 +63,7 @@ export const FilterState: React.FC<Props> = observer((props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/web/components/issues/issue-layouts/filters/header/filters/target-date.tsx b/web/components/issues/issue-layouts/filters/header/filters/target-date.tsx
index b168af668..0c1de072b 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/target-date.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/target-date.tsx
@@ -54,7 +54,7 @@ export const FilterTargetDate: React.FC<Props> = observer((props) => {
               <FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
             </>
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
           )}
         </div>
       )}
diff --git a/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx b/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
index c63891e6e..cc0733f44 100644
--- a/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
+++ b/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -34,22 +34,26 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
         return (
           <>
             <Popover.Button as={React.Fragment}>
-              {menuButton ? <button role="button" ref={setReferenceElement}>
-                {menuButton}
-              </button> : <Button
-                disabled={disabled}
-                ref={setReferenceElement}
-                variant="neutral-primary"
-                size="sm"
-                appendIcon={
-                  <ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} />
-                }
-                tabIndex={tabIndex}
-              >
-                <div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
-                  <span>{title}</span>
-                </div>
-              </Button>}
+              {menuButton ? (
+                <button role="button" ref={setReferenceElement}>
+                  {menuButton}
+                </button>
+              ) : (
+                <Button
+                  disabled={disabled}
+                  ref={setReferenceElement}
+                  variant="neutral-primary"
+                  size="sm"
+                  appendIcon={
+                    <ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} />
+                  }
+                  tabIndex={tabIndex}
+                >
+                  <div className={`${open ? "text-neutral-text-strong" : "text-neutral-text-medium"}`}>
+                    <span>{title}</span>
+                  </div>
+                </Button>
+              )}
             </Popover.Button>
             <Transition
               as={Fragment}
diff --git a/web/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx b/web/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx
index ab0593004..81d0e2210 100644
--- a/web/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx
+++ b/web/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx
@@ -10,7 +10,7 @@ interface IFilterHeader {
 
 export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) => (
   <div className="sticky top-0 flex items-center justify-between gap-2 bg-neutral-component-surface-light">
-    <div className="flex-grow truncate text-xs font-medium text-custom-text-300">{title}</div>
+    <div className="flex-grow truncate text-xs font-medium text-neutral-text-medium">{title}</div>
     <button
       type="button"
       className="grid h-5 w-5 flex-shrink-0 place-items-center rounded hover:bg-neutral-component-surface-dark"
diff --git a/web/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx b/web/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
index 1225af7ad..ea5c28b35 100644
--- a/web/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
+++ b/web/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
@@ -28,7 +28,7 @@ export const FilterOption: React.FC<Props> = (props) => {
       </div>
       <div className="flex items-center gap-2 truncate">
         {icon && <div className="grid w-5 flex-shrink-0 place-items-center">{icon}</div>}
-        <div className="flex-grow truncate text-xs text-custom-text-200">{title}</div>
+        <div className="flex-grow truncate text-xs text-neutral-text-medium">{title}</div>
       </div>
     </button>
   );
diff --git a/web/components/issues/issue-layouts/filters/header/layout-selection.tsx b/web/components/issues/issue-layouts/filters/header/layout-selection.tsx
index 24524671a..b0142d62b 100644
--- a/web/components/issues/issue-layouts/filters/header/layout-selection.tsx
+++ b/web/components/issues/issue-layouts/filters/header/layout-selection.tsx
@@ -31,7 +31,7 @@ export const LayoutSelection: React.FC<Props> = (props) => {
               size={14}
               strokeWidth={2}
               className={`h-3.5 w-3.5 ${
-                selectedLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"
+                selectedLayout == layout.key ? "text-neutral-text-strong" : "text-neutral-text-medium"
               }`}
             />
           </button>
diff --git a/web/components/issues/issue-layouts/gantt/blocks.tsx b/web/components/issues/issue-layouts/gantt/blocks.tsx
index 5a7d579a7..d5035c640 100644
--- a/web/components/issues/issue-layouts/gantt/blocks.tsx
+++ b/web/components/issues/issue-layouts/gantt/blocks.tsx
@@ -43,7 +43,7 @@ export const IssueGanttBlock = ({ data }: { data: TIssue }) => {
         }
         position="top-left"
       >
-        <div className="relative w-full truncate px-2.5 py-1 text-sm text-custom-text-100">{data?.name}</div>
+        <div className="relative w-full truncate px-2.5 py-1 text-sm text-neutral-text-strong">{data?.name}</div>
       </Tooltip>
     </div>
   );
@@ -74,13 +74,13 @@ export const IssueGanttSidebarBlock = ({ data }: { data: TIssue }) => {
       href={`/${workspaceSlug}/projects/${data.project_id}/issues/${data.id}`}
       target="_blank"
       onClick={handleIssuePeekOverview}
-      className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+      className="w-full line-clamp-1 cursor-pointer text-sm text-neutral-text-strong"
     >
       <div className="relative flex h-full w-full cursor-pointer items-center gap-2" onClick={handleIssuePeekOverview}>
         {currentStateDetails != undefined && (
           <StateGroupIcon stateGroup={currentStateDetails?.group} color={currentStateDetails?.color} />
         )}
-        <div className="flex-shrink-0 text-xs text-custom-text-300">
+        <div className="flex-shrink-0 text-xs text-neutral-text-medium">
           {getProjectById(data?.project_id)?.identifier} {data?.sequence_id}
         </div>
         <Tooltip tooltipHeading="Title" tooltipContent={data.name}>
diff --git a/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
index 4675a23d0..b3b155733 100644
--- a/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
@@ -29,7 +29,7 @@ const Inputs: FC<IInputProps> = (props) => {
 
   return (
     <div className="flex w-full items-center gap-3">
-      <div className="text-xs font-medium text-custom-text-400">{projectDetail?.identifier ?? "..."}</div>
+      <div className="text-xs font-medium text-neutral-text-subtle">{projectDetail?.identifier ?? "..."}</div>
       <input
         type="text"
         autoComplete="off"
@@ -37,7 +37,7 @@ const Inputs: FC<IInputProps> = (props) => {
         {...register(formKey, {
           required: "Issue title is required.",
         })}
-        className="w-full rounded-md bg-transparent px-2 py-3 text-sm font-medium leading-5 text-custom-text-200 outline-none"
+        className="w-full rounded-md bg-transparent px-2 py-3 text-sm font-medium leading-5 text-neutral-text-medium outline-none"
       />
     </div>
   );
@@ -148,7 +148,7 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
             >
               <Inputs formKey={"name"} register={register} setFocus={setFocus} projectDetail={projectDetail ?? null} />
             </form>
-            <div className="px-3 py-2 text-xs italic text-custom-text-200">{`Press 'Enter' to add another issue`}</div>
+            <div className="px-3 py-2 text-xs italic text-neutral-text-medium">{`Press 'Enter' to add another issue`}</div>
           </div>
         ) : (
           <div
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index 0fc072475..7c931f94b 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -59,7 +59,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
     <>
       <WithDisplayPropertiesHOC displayProperties={displayProperties || {}} displayPropertyKey="key">
         <div className="relative">
-          <div className="line-clamp-1 text-xs text-custom-text-300">
+          <div className="line-clamp-1 text-xs text-neutral-text-medium">
             {getProjectById(issue.project_id)?.identifier}-{issue.sequence_id}
           </div>
           <div className="absolute -top-1 right-0 hidden group-hover/kanban-block:block">{quickActions(issue)}</div>
@@ -75,7 +75,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
           href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
           target="_blank"
           onClick={() => handleIssuePeekOverview(issue)}
-          className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+          className="w-full line-clamp-1 cursor-pointer text-sm text-neutral-text-strong"
         >
           <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
             <span>{issue.name}</span>
diff --git a/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
index 16614ddb1..c36ca6d32 100644
--- a/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -108,11 +108,13 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
 
         <div className={`flex items-center gap-1 ${verticalAlignPosition ? `flex-col` : `w-full flex-row`}`}>
           <div
-            className={`line-clamp-1 font-medium text-custom-text-100 ${verticalAlignPosition ? `vertical-lr` : ``}`}
+            className={`line-clamp-1 font-medium text-neutral-text-strong ${
+              verticalAlignPosition ? `vertical-lr` : ``
+            }`}
           >
             {title}
           </div>
-          <div className={`text-sm font-medium text-custom-text-300 ${verticalAlignPosition ? `` : `pl-2`}`}>
+          <div className={`text-sm font-medium text-neutral-text-medium ${verticalAlignPosition ? `` : `pl-2`}`}>
             {count || 0}
           </div>
         </div>
diff --git a/web/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx b/web/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
index 970385d89..d2e068622 100644
--- a/web/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
@@ -32,8 +32,8 @@ export const HeaderSubGroupByCard = observer(
       </div>
 
       <div className="flex flex-shrink-0 items-center gap-1 text-sm">
-        <div className="line-clamp-1 text-custom-text-100">{title}</div>
-        <div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
+        <div className="line-clamp-1 text-neutral-text-strong">{title}</div>
+        <div className="pl-2 text-sm font-medium text-neutral-text-medium">{count || 0}</div>
       </div>
     </div>
   )
diff --git a/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
index 620863dfa..73e51a0d2 100644
--- a/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
@@ -22,14 +22,14 @@ const Inputs = (props: any) => {
 
   return (
     <div className="w-full">
-      <h4 className="text-xs font-medium leading-5 text-custom-text-300">{projectDetail?.identifier ?? "..."}</h4>
+      <h4 className="text-xs font-medium leading-5 text-neutral-text-medium">{projectDetail?.identifier ?? "..."}</h4>
       <input
         autoComplete="off"
         placeholder="Issue Title"
         {...register("name", {
           required: "Issue title is required.",
         })}
-        className="w-full rounded-md bg-transparent px-2 py-1.5 pl-0 text-sm font-medium leading-5 text-custom-text-200 outline-none"
+        className="w-full rounded-md bg-transparent px-2 py-1.5 pl-0 text-sm font-medium leading-5 text-neutral-text-medium outline-none"
       />
     </div>
   );
@@ -142,7 +142,7 @@ export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = obser
           >
             <Inputs formKey={formKey} register={register} setFocus={setFocus} projectDetail={projectDetail} />
           </form>
-          <div className="px-3 py-2 text-xs italic text-custom-text-200">{`Press 'Enter' to add another issue`}</div>
+          <div className="px-3 py-2 text-xs italic text-neutral-text-medium">{`Press 'Enter' to add another issue`}</div>
         </div>
       ) : (
         <div
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
index 02c83ac12..faa16a62f 100644
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -60,7 +60,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
         )}
       >
         {displayProperties && displayProperties?.key && (
-          <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
+          <div className="flex-shrink-0 text-xs font-medium text-neutral-text-medium">
             {projectDetails?.identifier}-{issue.sequence_id}
           </div>
         )}
@@ -78,7 +78,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
             href={`/${workspaceSlug}/projects/${projectId}/issues/${issueId}`}
             target="_blank"
             onClick={() => handleIssuePeekOverview(issue)}
-            className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+            className="w-full line-clamp-1 cursor-pointer text-sm text-neutral-text-strong"
           >
             <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
               <span>{issue.name}</span>
diff --git a/web/components/issues/issue-layouts/list/blocks-list.tsx b/web/components/issues/issue-layouts/list/blocks-list.tsx
index 7714515b2..016d12969 100644
--- a/web/components/issues/issue-layouts/list/blocks-list.tsx
+++ b/web/components/issues/issue-layouts/list/blocks-list.tsx
@@ -36,7 +36,7 @@ export const IssueBlocksList: FC<Props> = (props) => {
           );
         })
       ) : (
-        <div className="bg-neutral-component-surface-light p-3 text-sm text-custom-text-400">No issues</div>
+        <div className="bg-neutral-component-surface-light p-3 text-sm text-neutral-text-subtle">No issues</div>
       )}
     </div>
   );
diff --git a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
index 7a11cf08e..846cd64c5 100644
--- a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -67,8 +67,8 @@ export const HeaderGroupByCard = observer(
           </div>
 
           <div className="flex w-full flex-row items-center gap-1">
-            <div className="line-clamp-1 font-medium text-custom-text-100">{title}</div>
-            <div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
+            <div className="line-clamp-1 font-medium text-neutral-text-strong">{title}</div>
+            <div className="pl-2 text-sm font-medium text-neutral-text-medium">{count || 0}</div>
           </div>
 
           {!disableIssueCreation &&
diff --git a/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
index 1c371907e..83706678e 100644
--- a/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
@@ -28,7 +28,7 @@ const Inputs: FC<IInputProps> = (props) => {
 
   return (
     <div className="flex w-full items-center gap-3">
-      <div className="text-xs font-medium text-custom-text-400">{projectDetail?.identifier ?? "..."}</div>
+      <div className="text-xs font-medium text-neutral-text-subtle">{projectDetail?.identifier ?? "..."}</div>
       <input
         type="text"
         autoComplete="off"
@@ -36,7 +36,7 @@ const Inputs: FC<IInputProps> = (props) => {
         {...register(formKey, {
           required: "Issue title is required.",
         })}
-        className="w-full rounded-md bg-transparent px-2 py-3 text-sm font-medium leading-5 text-custom-text-200 outline-none"
+        className="w-full rounded-md bg-transparent px-2 py-3 text-sm font-medium leading-5 text-neutral-text-medium outline-none"
       />
     </div>
   );
@@ -142,7 +142,7 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
           >
             <Inputs formKey={"name"} register={register} setFocus={setFocus} projectDetail={projectDetail ?? null} />
           </form>
-          <div className="px-3 py-2 text-xs italic text-custom-text-200">{`Press 'Enter' to add another issue`}</div>
+          <div className="px-3 py-2 text-xs italic text-neutral-text-medium">{`Press 'Enter' to add another issue`}</div>
         </div>
       ) : (
         <div
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
index f25556937..abbe8c4c7 100644
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -110,7 +110,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
 
   const label = (
-    <div className="flex h-5 w-full flex-wrap items-center gap-2 overflow-hidden text-custom-text-200">
+    <div className="flex h-5 w-full flex-wrap items-center gap-2 overflow-hidden text-neutral-text-medium">
       {value.length > 0 ? (
         value.length <= maxRender ? (
           <>
@@ -124,7 +124,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                       !disabled && "cursor-pointer"
                     } h-full max-w-full flex-shrink-0 items-center rounded border-[0.5px] border-neutral-border-medium px-2.5 py-1 text-xs`}
                   >
-                    <div className="flex max-w-full items-center gap-1.5 overflow-hidden text-custom-text-200">
+                    <div className="flex max-w-full items-center gap-1.5 overflow-hidden text-neutral-text-medium">
                       <span
                         className="h-2 w-2 flex-shrink-0 rounded-full"
                         style={{
@@ -151,7 +151,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                 .map((l) => l?.name)
                 .join(", ")}
             >
-              <div className="flex h-full items-center gap-1.5 text-custom-text-200">
+              <div className="flex h-full items-center gap-1.5 text-neutral-text-medium">
                 <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
                 {`${value.length} Labels`}
               </div>
@@ -189,7 +189,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
           type="button"
           className={`clickable flex w-full items-center justify-between gap-1 text-xs ${
             disabled
-              ? "cursor-not-allowed text-custom-text-200"
+              ? "cursor-not-allowed text-neutral-text-medium"
               : value.length <= maxRender
               ? "cursor-pointer"
               : "cursor-pointer hover:bg-neutral-component-surface-dark"
@@ -209,9 +209,9 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
           {...attributes.popper}
         >
           <div className="flex w-full items-center justify-start rounded border border-neutral-border-medium bg-neutral-component-surface-medium px-2">
-            <Search className="h-3.5 w-3.5 text-custom-text-300" />
+            <Search className="h-3.5 w-3.5 text-neutral-text-medium" />
             <Combobox.Input
-              className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              className="w-full bg-transparent px-2 py-1 text-xs text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               placeholder="Search"
@@ -220,7 +220,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
           </div>
           <div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
             {isLoading ? (
-              <p className="text-center text-custom-text-200">Loading...</p>
+              <p className="text-center text-neutral-text-medium">Loading...</p>
             ) : filteredOptions.length > 0 ? (
               filteredOptions.map((option) => (
                 <Combobox.Option
@@ -229,7 +229,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                   className={({ active, selected }) =>
                     `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
                       active ? "bg-custom-background-80" : ""
-                    } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    } ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
                   }
                 >
                   {({ selected }) => (
@@ -246,7 +246,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
               ))
             ) : (
               <span className="flex items-center gap-2 p-1">
-                <p className="text-left text-custom-text-200 ">No matching results</p>
+                <p className="text-left text-neutral-text-medium ">No matching results</p>
               </span>
             )}
           </div>
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
index 66f0c3316..12a3c3236 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
@@ -49,9 +49,9 @@ export const HeaderColumn = (props: Props) => {
       customButtonTabIndex={-1}
       className="!w-full"
       customButton={
-        <div className="flex w-full cursor-pointer items-center justify-between gap-1.5 py-2 text-sm text-custom-text-200 hover:text-custom-text-100">
+        <div className="flex w-full cursor-pointer items-center justify-between gap-1.5 py-2 text-sm text-neutral-text-medium hover:text-neutral-text-strong">
           <div className="flex items-center gap-1.5">
-            {<propertyDetails.icon className="h-4 w-4 text-custom-text-400" />}
+            {<propertyDetails.icon className="h-4 w-4 text-neutral-text-subtle" />}
             {propertyDetails.title}
           </div>
           <div className="ml-3 flex">
@@ -71,8 +71,8 @@ export const HeaderColumn = (props: Props) => {
         <div
           className={`flex items-center justify-between gap-1.5 px-1 ${
             selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}`
-              ? "text-custom-text-100"
-              : "text-custom-text-200 hover:text-custom-text-100"
+              ? "text-neutral-text-strong"
+              : "text-neutral-text-medium hover:text-neutral-text-strong"
           }`}
         >
           <div className="flex items-center gap-2">
@@ -89,8 +89,8 @@ export const HeaderColumn = (props: Props) => {
         <div
           className={`flex items-center justify-between gap-1.5 px-1 ${
             selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}`
-              ? "text-custom-text-100"
-              : "text-custom-text-200 hover:text-custom-text-100"
+              ? "text-neutral-text-strong"
+              : "text-neutral-text-medium hover:text-neutral-text-strong"
           }`}
         >
           <div className="flex items-center gap-2">
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index b62b16770..6b0cbe920 100644
--- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -83,8 +83,8 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
   const customActionButton = (
     <div
       ref={menuActionRef}
-      className={`w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-neutral-component-surface-dark ${
-        isMenuActive ? "bg-neutral-component-surface-dark text-custom-text-100" : "text-custom-text-200"
+      className={`w-full cursor-pointer rounded p-1 text-sidebar-neutral-text-subtle hover:bg-neutral-component-surface-dark ${
+        isMenuActive ? "bg-neutral-component-surface-dark text-neutral-text-strong" : "text-neutral-text-medium"
       }`}
       onClick={() => setIsMenuActive(!isMenuActive)}
     >
@@ -118,7 +118,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
               className="flex min-w-min items-center gap-1.5 px-4 py-2.5 pr-0"
               style={issueDetail.parent_id && nestingLevel !== 0 ? { paddingLeft } : {}}
             >
-              <div className="relative flex cursor-pointer items-center text-center text-xs hover:text-custom-text-100">
+              <div className="relative flex cursor-pointer items-center text-center text-xs hover:text-neutral-text-strong">
                 <span
                   className={`flex items-center justify-center font-medium  group-hover:opacity-0 ${
                     isMenuActive ? "opacity-0" : "opacity-100"
@@ -137,7 +137,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
               {issueDetail.sub_issues_count > 0 && (
                 <div className="flex h-6 w-6 items-center justify-center">
                   <button
-                    className="h-5 w-5 cursor-pointer rounded-sm hover:bg-neutral-component-surface-medium hover:text-custom-text-100"
+                    className="h-5 w-5 cursor-pointer rounded-sm hover:bg-neutral-component-surface-medium hover:text-neutral-text-strong"
                     onClick={() => handleToggleExpand()}
                   >
                     <ChevronRight className={`h-3.5 w-3.5 ${isExpanded ? "rotate-90" : ""}`} />
@@ -150,12 +150,12 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
             href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`}
             target="_blank"
             onClick={() => handleIssuePeekOverview(issueDetail)}
-            className="clickable w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+            className="clickable w-full line-clamp-1 cursor-pointer text-sm text-neutral-text-strong"
           >
             <div className="w-full overflow-hidden">
               <Tooltip tooltipHeading="Title" tooltipContent={issueDetail.name}>
                 <div
-                  className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100"
+                  className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-neutral-text-strong"
                   tabIndex={-1}
                 >
                   {issueDetail.name}
diff --git a/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
index 2deb74cf1..96c7227bc 100644
--- a/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
@@ -40,7 +40,7 @@ const Inputs = (props: any) => {
 
   return (
     <>
-      <h4 className="w-20 text-xs leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+      <h4 className="w-20 text-xs leading-5 text-neutral-text-subtle">{projectDetails?.identifier ?? "..."}</h4>
       <input
         type="text"
         autoComplete="off"
@@ -48,7 +48,7 @@ const Inputs = (props: any) => {
         {...register("name", {
           required: "Issue title is required.",
         })}
-        className="w-full rounded-md bg-transparent py-3 text-sm leading-5 text-custom-text-200 outline-none"
+        className="w-full rounded-md bg-transparent py-3 text-sm leading-5 text-neutral-text-medium outline-none"
       />
     </>
   );
@@ -208,7 +208,7 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
       )}
 
       {isOpen && (
-        <p className="ml-3 mt-3 text-xs italic text-custom-text-200">
+        <p className="ml-3 mt-3 text-xs italic text-neutral-text-medium">
           Press {"'"}Enter{"'"} to add another issue
         </p>
       )}
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
index 1266e1691..aae4ebf3d 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
@@ -27,11 +27,11 @@ export const SpreadsheetHeader = (props: Props) => {
         >
           <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
             <span className="flex h-full w-24 flex-shrink-0 items-center px-4 py-2.5">
-              <span className="mr-1.5 text-custom-text-400">#</span>ID
+              <span className="mr-1.5 text-neutral-text-subtle">#</span>ID
             </span>
           </WithDisplayPropertiesHOC>
           <span className="flex h-full w-full flex-grow items-center justify-center px-4 py-2.5">
-            <LayersIcon className="mr-1.5 h-4 w-4 text-custom-text-400" />
+            <LayersIcon className="mr-1.5 h-4 w-4 text-neutral-text-subtle" />
             Issue
           </span>
         </th>
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index 63100b48f..6474a4211 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -99,7 +99,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
     );
 
   return (
-    <div className="relative flex flex-col h-full w-full overflow-x-hidden whitespace-nowrap rounded-lg bg-custom-background-200 text-custom-text-200">
+    <div className="relative flex flex-col h-full w-full overflow-x-hidden whitespace-nowrap rounded-lg bg-custom-background-200 text-neutral-text-medium">
       <div ref={portalRef} className="spreadsheet-menu-portal" />
       <div ref={containerRef} className="horizontal-scroll-enable h-full w-full">
         <SpreadsheetTable
diff --git a/web/components/issues/issue-modal/form.tsx b/web/components/issues/issue-modal/form.tsx
index f843e4aa7..c1d08db84 100644
--- a/web/components/issues/issue-modal/form.tsx
+++ b/web/components/issues/issue-modal/form.tsx
@@ -277,7 +277,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                 )}
               />
             )}
-            <h3 className="text-xl font-semibold leading-6 text-custom-text-100">
+            <h3 className="text-xl font-semibold leading-6 text-neutral-text-strong">
               {data?.id ? "Update" : "Create"} issue
             </h3>
           </div>
@@ -290,7 +290,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                     backgroundColor: selectedParentIssue.state__color,
                   }}
                 />
-                <span className="flex-shrink-0 text-custom-text-200">
+                <span className="flex-shrink-0 text-neutral-text-medium">
                   {selectedParentIssue.project__identifier}-{selectedParentIssue.sequence_id}
                 </span>
                 <span className="truncate font-medium">{selectedParentIssue.name.substring(0, 50)}</span>
@@ -591,10 +591,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                   customButton={
                     <button
                       type="button"
-                      className="flex items-center justify-between gap-1 w-full cursor-pointer rounded border-[0.5px] border-neutral-border-medium text-custom-text-200 px-2 py-1 text-xs hover:bg-neutral-component-surface-dark"
+                      className="flex items-center justify-between gap-1 w-full cursor-pointer rounded border-[0.5px] border-neutral-border-medium text-neutral-text-medium px-2 py-1 text-xs hover:bg-neutral-component-surface-dark"
                     >
                       {watch("parent_id") ? (
-                        <div className="flex items-center gap-1 text-custom-text-200">
+                        <div className="flex items-center gap-1 text-neutral-text-medium">
                           <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
                           <span className="whitespace-nowrap">
                             {selectedParentIssue &&
@@ -603,7 +603,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                           </span>
                         </div>
                       ) : (
-                        <div className="flex items-center gap-1 text-custom-text-300">
+                        <div className="flex items-center gap-1 text-neutral-text-medium">
                           <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
                           <span className="whitespace-nowrap">Add parent</span>
                         </div>
diff --git a/web/components/issues/issue-update-status.tsx b/web/components/issues/issue-update-status.tsx
index df2357179..7da6ee808 100644
--- a/web/components/issues/issue-update-status.tsx
+++ b/web/components/issues/issue-update-status.tsx
@@ -17,7 +17,7 @@ export const IssueUpdateStatus: React.FC<Props> = (props) => {
   return (
     <>
       {issueDetail && (
-        <h4 className="mr-4 text-lg font-medium text-custom-text-300">
+        <h4 className="mr-4 text-lg font-medium text-neutral-text-medium">
           {getProjectById(issueDetail.project_id)?.identifier}-{issueDetail.sequence_id}
         </h4>
       )}
@@ -29,7 +29,9 @@ export const IssueUpdateStatus: React.FC<Props> = (props) => {
         {isSubmitting !== "submitted" && isSubmitting !== "saved" && (
           <RefreshCw className="h-4 w-4 stroke-custom-text-300" />
         )}
-        <span className="text-sm text-custom-text-300">{isSubmitting === "submitting" ? "Saving..." : "Saved"}</span>
+        <span className="text-sm text-neutral-text-medium">
+          {isSubmitting === "submitting" ? "Saving..." : "Saved"}
+        </span>
       </div>
     </>
   );
diff --git a/web/components/issues/issues-mobile-header.tsx b/web/components/issues/issues-mobile-header.tsx
index 3fd6cff84..1f1aa1f09 100644
--- a/web/components/issues/issues-mobile-header.tsx
+++ b/web/components/issues/issues-mobile-header.tsx
@@ -90,10 +90,10 @@ export const IssuesMobileHeader = () => {
       <div className="flex justify-evenly py-2 border-b border-neutral-border-medium">
         <CustomMenu
           maxHeight={"md"}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm"
+          className="flex flex-grow justify-center text-neutral-text-medium text-sm"
           placement="bottom-start"
-          customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>}
-          customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+          customButton={<span className="flex flex-grow justify-center text-neutral-text-medium text-sm">Layout</span>}
+          customButtonClassName="flex flex-grow justify-center text-neutral-text-medium text-sm"
           closeOnSelect
         >
           {layouts.map((layout, index) => (
@@ -104,18 +104,18 @@ export const IssuesMobileHeader = () => {
               className="flex items-center gap-2"
             >
               <layout.icon className="w-3 h-3" />
-              <div className="text-custom-text-300">{layout.title}</div>
+              <div className="text-neutral-text-medium">{layout.title}</div>
             </CustomMenu.MenuItem>
           ))}
         </CustomMenu>
-        <div className="flex flex-grow justify-center border-l border-neutral-border-medium items-center text-custom-text-200 text-sm">
+        <div className="flex flex-grow justify-center border-l border-neutral-border-medium items-center text-neutral-text-medium text-sm">
           <FiltersDropdown
             title="Filters"
             placement="bottom-end"
             menuButton={
-              <span className="flex items-center text-custom-text-200 text-sm">
+              <span className="flex items-center text-neutral-text-medium text-sm">
                 Filters
-                <ChevronDown className="text-custom-text-200  h-4 w-4 ml-2" />
+                <ChevronDown className="text-neutral-text-medium  h-4 w-4 ml-2" />
               </span>
             }
           >
@@ -131,14 +131,14 @@ export const IssuesMobileHeader = () => {
             />
           </FiltersDropdown>
         </div>
-        <div className="flex flex-grow justify-center border-l border-neutral-border-medium items-center text-custom-text-200 text-sm">
+        <div className="flex flex-grow justify-center border-l border-neutral-border-medium items-center text-neutral-text-medium text-sm">
           <FiltersDropdown
             title="Display"
             placement="bottom-end"
             menuButton={
-              <span className="flex items-center text-custom-text-200 text-sm">
+              <span className="flex items-center text-neutral-text-medium text-sm">
                 Display
-                <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
+                <ChevronDown className="text-neutral-text-medium h-4 w-4 ml-2" />
               </span>
             }
           >
@@ -156,7 +156,7 @@ export const IssuesMobileHeader = () => {
 
         <button
           onClick={() => setAnalyticsModal(true)}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-neutral-border-medium"
+          className="flex flex-grow justify-center text-neutral-text-medium text-sm border-l border-neutral-border-medium"
         >
           Analytics
         </button>
diff --git a/web/components/issues/label.tsx b/web/components/issues/label.tsx
index 7efdeda4c..fc2b7961d 100644
--- a/web/components/issues/label.tsx
+++ b/web/components/issues/label.tsx
@@ -18,7 +18,7 @@ export const ViewIssueLabel: React.FC<Props> = ({ labelDetails, maxRender = 1 })
               className="flex flex-shrink-0 cursor-default items-center rounded-md border border-neutral-border-medium px-2.5 py-1 text-xs shadow-sm"
             >
               <Tooltip position="top" tooltipHeading="Label" tooltipContent={label.name}>
-                <div className="flex items-center gap-1.5 text-custom-text-200">
+                <div className="flex items-center gap-1.5 text-neutral-text-medium">
                   <span
                     className="h-2 w-2 flex-shrink-0 rounded-full"
                     style={{
@@ -34,7 +34,7 @@ export const ViewIssueLabel: React.FC<Props> = ({ labelDetails, maxRender = 1 })
       ) : (
         <div className="flex flex-shrink-0 cursor-default items-center rounded-md border border-neutral-border-medium px-2.5 py-1 text-xs shadow-sm">
           <Tooltip position="top" tooltipHeading="Labels" tooltipContent={labelDetails.map((l) => l.name).join(", ")}>
-            <div className="flex items-center gap-1.5 text-custom-text-200">
+            <div className="flex items-center gap-1.5 text-neutral-text-medium">
               <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
               {`${labelDetails.length} Labels`}
             </div>
diff --git a/web/components/issues/parent-issues-list-modal.tsx b/web/components/issues/parent-issues-list-modal.tsx
index 1fc2e85fe..7fd45eb30 100644
--- a/web/components/issues/parent-issues-list-modal.tsx
+++ b/web/components/issues/parent-issues-list-modal.tsx
@@ -103,11 +103,11 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                 >
                   <div className="relative m-1">
                     <Search
-                      className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
+                      className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-neutral-text-strong text-opacity-40"
                       aria-hidden="true"
                     />
                     <Combobox.Input
-                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0 sm:text-sm"
+                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-neutral-text-strong outline-none placeholder:text-neutral-text-subtle focus:ring-0 sm:text-sm"
                       placeholder="Type to search..."
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
@@ -118,7 +118,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                     <Tooltip tooltipContent="Toggle workspace level search">
                       <div
                         className={`flex flex-shrink-0 cursor-pointer items-center gap-1 text-xs ${
-                          isWorkspaceLevel ? "text-custom-text-100" : "text-custom-text-200"
+                          isWorkspaceLevel ? "text-neutral-text-strong" : "text-neutral-text-medium"
                         }`}
                       >
                         <ToggleSwitch
@@ -138,9 +138,9 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                   </div>
                   <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto">
                     {searchTerm !== "" && (
-                      <h5 className="mx-2 text-[0.825rem] text-custom-text-200">
+                      <h5 className="mx-2 text-[0.825rem] text-neutral-text-medium">
                         Search results for{" "}
-                        <span className="text-custom-text-100">
+                        <span className="text-neutral-text-strong">
                           {'"'}
                           {searchTerm}
                           {'"'}
@@ -152,7 +152,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                     {!isSearching && issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
                       <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
                         <LayersIcon height="52" width="52" />
-                        <h3 className="text-custom-text-200">
+                        <h3 className="text-neutral-text-medium">
                           No issues found. Create a new issue with{" "}
                           <pre className="inline rounded bg-neutral-component-surface-dark px-2 py-1 text-sm">C</pre>.
                         </h3>
@@ -173,9 +173,9 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                             key={issue.id}
                             value={issue}
                             className={({ active, selected }) =>
-                              `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
-                                active ? "bg-neutral-component-surface-dark text-custom-text-100" : ""
-                              } ${selected ? "text-custom-text-100" : ""}`
+                              `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 text-neutral-text-medium ${
+                                active ? "bg-neutral-component-surface-dark text-neutral-text-strong" : ""
+                              } ${selected ? "text-neutral-text-strong" : ""}`
                             }
                           >
                             <div className="flex flex-grow items-center gap-2 truncate">
@@ -193,7 +193,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                             <a
                               href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
                               target="_blank"
-                              className="z-1 relative hidden flex-shrink-0 text-custom-text-200 hover:text-custom-text-100 group-hover:block"
+                              className="z-1 relative hidden flex-shrink-0 text-neutral-text-medium hover:text-neutral-text-strong group-hover:block"
                               rel="noopener noreferrer"
                               onClick={(e) => e.stopPropagation()}
                             >
diff --git a/web/components/issues/peek-overview/issue-detail.tsx b/web/components/issues/peek-overview/issue-detail.tsx
index fefba1713..644965e01 100644
--- a/web/components/issues/peek-overview/issue-detail.tsx
+++ b/web/components/issues/peek-overview/issue-detail.tsx
@@ -30,7 +30,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
 
   return (
     <>
-      <span className="text-base font-medium text-custom-text-400">
+      <span className="text-base font-medium text-neutral-text-subtle">
         {projectDetails?.identifier}-{issue?.sequence_id}
       </span>
       <IssueDescriptionForm
diff --git a/web/components/issues/peek-overview/properties.tsx b/web/components/issues/peek-overview/properties.tsx
index 6f0f0ef21..9cb03bf2b 100644
--- a/web/components/issues/peek-overview/properties.tsx
+++ b/web/components/issues/peek-overview/properties.tsx
@@ -68,7 +68,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
       <div className={`w-full space-y-2 mt-3 ${disabled ? "opacity-60" : ""}`}>
         {/* state */}
         <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-neutral-text-medium">
             <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
             <span>State</span>
           </div>
@@ -88,7 +88,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
         {/* assignee */}
         <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-neutral-text-medium">
             <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
             <span>Assignees</span>
           </div>
@@ -102,7 +102,9 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
             className="w-3/4 flex-grow group"
             buttonContainerClassName="w-full text-left"
-            buttonClassName={`text-sm justify-between ${issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"}`}
+            buttonClassName={`text-sm justify-between ${
+              issue?.assignee_ids.length > 0 ? "" : "text-neutral-text-subtle"
+            }`}
             hideIcon={issue.assignee_ids?.length === 0}
             dropdownArrow
             dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
@@ -111,7 +113,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
         {/* priority */}
         <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-neutral-text-medium">
             <Signal className="h-4 w-4 flex-shrink-0" />
             <span>Priority</span>
           </div>
@@ -128,7 +130,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
         {/* start date */}
         <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-neutral-text-medium">
             <CalendarClock className="h-4 w-4 flex-shrink-0" />
             <span>Start date</span>
           </div>
@@ -145,7 +147,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             disabled={disabled}
             className="w-3/4 flex-grow group"
             buttonContainerClassName="w-full text-left"
-            buttonClassName={`text-sm ${issue?.start_date ? "" : "text-custom-text-400"}`}
+            buttonClassName={`text-sm ${issue?.start_date ? "" : "text-neutral-text-subtle"}`}
             hideIcon
             clearIconClassName="h-3 w-3 hidden group-hover:inline"
             // TODO: add this logic
@@ -155,7 +157,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
         {/* due date */}
         <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-neutral-text-medium">
             <CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
             <span>Due date</span>
           </div>
@@ -172,7 +174,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             disabled={disabled}
             className="w-3/4 flex-grow group"
             buttonContainerClassName="w-full text-left"
-            buttonClassName={`text-sm ${issue?.target_date ? "" : "text-custom-text-400"}`}
+            buttonClassName={`text-sm ${issue?.target_date ? "" : "text-neutral-text-subtle"}`}
             hideIcon
             clearIconClassName="h-3 w-3 hidden group-hover:inline"
             // TODO: add this logic
@@ -183,7 +185,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         {/* estimate */}
         {isEstimateEnabled && (
           <div className="flex w-full items-center gap-3 h-8">
-            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-neutral-text-medium">
               <Triangle className="h-4 w-4 flex-shrink-0" />
               <span>Estimate</span>
             </div>
@@ -195,7 +197,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
               buttonVariant="transparent-with-text"
               className="w-3/4 flex-grow group"
               buttonContainerClassName="w-full text-left"
-              buttonClassName={`text-sm ${issue?.estimate_point !== null ? "" : "text-custom-text-400"}`}
+              buttonClassName={`text-sm ${issue?.estimate_point !== null ? "" : "text-neutral-text-subtle"}`}
               placeholder="None"
               hideIcon
               dropdownArrow
@@ -206,7 +208,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
         {projectDetails?.module_view && (
           <div className="flex w-full items-center gap-3 min-h-8 h-full">
-            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-neutral-text-medium">
               <DiceIcon className="h-4 w-4 flex-shrink-0" />
               <span>Module</span>
             </div>
@@ -223,7 +225,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
         {projectDetails?.cycle_view && (
           <div className="flex w-full items-center gap-3 h-8">
-            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-neutral-text-medium">
               <ContrastIcon className="h-4 w-4 flex-shrink-0" />
               <span>Cycle</span>
             </div>
@@ -240,7 +242,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
         {/* parent */}
         <div className="flex w-full items-center gap-3 h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-neutral-text-medium">
             <LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
             <p>Parent</p>
           </div>
@@ -256,7 +258,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
         {/* relates to */}
         <div className="flex gap-3 min-h-8">
-          <div className="flex pt-2 gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+          <div className="flex pt-2 gap-1 w-1/4 flex-shrink-0 text-sm text-neutral-text-medium">
             <RelatedIcon className="h-4 w-4 flex-shrink-0" />
             <span>Relates to</span>
           </div>
@@ -272,7 +274,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
         {/* blocking */}
         <div className="flex gap-3 min-h-8">
-          <div className="flex pt-2 gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+          <div className="flex pt-2 gap-1 w-1/4 flex-shrink-0 text-sm text-neutral-text-medium">
             <XCircle className="h-4 w-4 flex-shrink-0" />
             <span>Blocking</span>
           </div>
@@ -288,7 +290,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
         {/* blocked by */}
         <div className="flex gap-3 min-h-8">
-          <div className="flex pt-2 gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+          <div className="flex pt-2 gap-1 w-1/4 flex-shrink-0 text-sm text-neutral-text-medium">
             <CircleDot className="h-4 w-4 flex-shrink-0" />
             <span>Blocked by</span>
           </div>
@@ -304,7 +306,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
         {/* duplicate of */}
         <div className="flex gap-3 min-h-8">
-          <div className="flex pt-2 gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+          <div className="flex pt-2 gap-1 w-1/4 flex-shrink-0 text-sm text-neutral-text-medium">
             <CopyPlus className="h-4 w-4 flex-shrink-0" />
             <span>Duplicate of</span>
           </div>
@@ -320,7 +322,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
         {/* label */}
         <div className="flex w-full items-center gap-3 min-h-8">
-          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-neutral-text-medium">
             <Tag className="h-4 w-4 flex-shrink-0" />
             <span>Labels</span>
           </div>
diff --git a/web/components/issues/peek-overview/view.tsx b/web/components/issues/peek-overview/view.tsx
index 25a997036..0c8d59bab 100644
--- a/web/components/issues/peek-overview/view.tsx
+++ b/web/components/issues/peek-overview/view.tsx
@@ -148,11 +148,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
             >
               <div className="flex items-center gap-4">
                 <button onClick={removeRoutePeekId}>
-                  <MoveRight className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
+                  <MoveRight className="h-4 w-4 text-neutral-text-subtle hover:text-neutral-text-medium" />
                 </button>
 
                 <button onClick={redirectToIssueDetail}>
-                  <MoveDiagonal className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
+                  <MoveDiagonal className="h-4 w-4 text-neutral-text-subtle hover:text-neutral-text-medium" />
                 </button>
                 {currentMode && (
                   <div className="flex flex-shrink-0 items-center gap-2">
@@ -161,7 +161,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                       onChange={(val: any) => setPeekMode(val)}
                       customButton={
                         <button type="button" className="">
-                          <currentMode.icon className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
+                          <currentMode.icon className="h-4 w-4 text-neutral-text-subtle hover:text-neutral-text-medium" />
                         </button>
                       }
                     >
@@ -170,8 +170,8 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                           <div
                             className={`flex items-center gap-1.5 ${
                               currentMode.key === mode.key
-                                ? "text-custom-text-200"
-                                : "text-custom-text-400 hover:text-custom-text-200"
+                                ? "text-neutral-text-medium"
+                                : "text-neutral-text-subtle hover:text-neutral-text-medium"
                             }`}
                           >
                             <mode.icon className="-my-1 h-4 w-4 flex-shrink-0" />
@@ -190,11 +190,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                     <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
                   )}
                   <button onClick={handleCopyText}>
-                    <Link2 className="h-4 w-4 -rotate-45 text-custom-text-300 hover:text-custom-text-200" />
+                    <Link2 className="h-4 w-4 -rotate-45 text-neutral-text-medium hover:text-neutral-text-medium" />
                   </button>
                   {!disabled && (
                     <button onClick={() => toggleDeleteIssueModal(true)}>
-                      <Trash2 className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
+                      <Trash2 className="h-4 w-4 text-neutral-text-medium hover:text-neutral-text-medium" />
                     </button>
                   )}
                 </div>
@@ -230,11 +230,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                           disabled={disabled}
                         />
 
-                        <IssueActivity
-                          workspaceSlug={workspaceSlug}
-                          projectId={projectId}
-                          issueId={issueId}
-                        />
+                        <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
                       </div>
                     ) : (
                       <div className={`flex h-full w-full overflow-auto`}>
@@ -250,11 +246,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                               setIsSubmitting={(value) => setIsSubmitting(value)}
                             />
 
-                            <IssueActivity
-                              workspaceSlug={workspaceSlug}
-                              projectId={projectId}
-                              issueId={issueId}
-                            />
+                            <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
                           </div>
                         </div>
                         <div
diff --git a/web/components/issues/select/label.tsx b/web/components/issues/select/label.tsx
index bcb95af1a..16a58c8d3 100644
--- a/web/components/issues/select/label.tsx
+++ b/web/components/issues/select/label.tsx
@@ -92,7 +92,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
         <button
           type="button"
           ref={setReferenceElement}
-          className="h-full flex cursor-pointer items-center gap-2 text-xs text-custom-text-200"
+          className="h-full flex cursor-pointer items-center gap-2 text-xs text-neutral-text-medium"
           onClick={handleOnClick}
         >
           {label ? (
@@ -123,9 +123,9 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
             {...attributes.popper}
           >
             <div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-neutral-component-surface-medium px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+              <Search className="h-3.5 w-3.5 text-neutral-text-subtle" strokeWidth={1.5} />
               <Combobox.Input
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                className="w-full bg-transparent py-1 text-xs text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"
                 onChange={(event) => setQuery(event.target.value)}
                 placeholder="Search"
                 displayValue={(assigned: any) => assigned?.name}
@@ -145,7 +145,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
                             className={({ active }) =>
                               `${
                                 active ? "bg-neutral-component-surface-dark" : ""
-                              } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
+                              } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-neutral-text-medium`
                             }
                             value={label.id}
                           >
@@ -170,7 +170,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
                     } else
                       return (
                         <div className="border-y border-neutral-border-medium">
-                          <div className="flex select-none items-center gap-2 truncate p-2 text-custom-text-100">
+                          <div className="flex select-none items-center gap-2 truncate p-2 text-neutral-text-strong">
                             <Component className="h-3 w-3" /> {label.name}
                           </div>
                           <div>
@@ -180,7 +180,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
                                 className={({ active }) =>
                                   `${
                                     active ? "bg-neutral-component-surface-dark" : ""
-                                  } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
+                                  } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-neutral-text-medium`
                                 }
                                 value={child.id}
                               >
@@ -207,10 +207,10 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
                       );
                   })
                 ) : (
-                  <p className="text-custom-text-400 italic py-1 px-1.5">No matching results</p>
+                  <p className="text-neutral-text-subtle italic py-1 px-1.5">No matching results</p>
                 )
               ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+                <p className="text-neutral-text-subtle italic py-1 px-1.5">Loading...</p>
               )}
               <button
                 type="button"
diff --git a/web/components/issues/sub-issues/issue-list-item.tsx b/web/components/issues/sub-issues/issue-list-item.tsx
index d54f9e59b..1b169fbb4 100644
--- a/web/components/issues/sub-issues/issue-list-item.tsx
+++ b/web/components/issues/sub-issues/issue-list-item.tsx
@@ -107,7 +107,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
                 backgroundColor: currentIssueStateDetail?.color,
               }}
             />
-            <div className="flex-shrink-0 text-xs text-custom-text-200">
+            <div className="flex-shrink-0 text-xs text-neutral-text-medium">
               {projectDetail?.identifier}-{issue?.sequence_id}
             </div>
 
@@ -115,7 +115,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
               href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
               target="_blank"
               onClick={() => handleIssuePeekOverview(issue)}
-              className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+              className="w-full line-clamp-1 cursor-pointer text-sm text-neutral-text-strong"
             >
               <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
                 <span>{issue.name}</span>
diff --git a/web/components/issues/sub-issues/root.tsx b/web/components/issues/sub-issues/root.tsx
index 9c2e175d2..223097863 100644
--- a/web/components/issues/sub-issues/root.tsx
+++ b/web/components/issues/sub-issues/root.tsx
@@ -264,7 +264,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
   return (
     <div className="h-full w-full space-y-2">
       {!subIssues ? (
-        <div className="py-3 text-center text-sm  font-medium text-custom-text-300">Loading...</div>
+        <div className="py-3 text-center text-sm  font-medium text-neutral-text-medium">Loading...</div>
       ) : (
         <>
           {subIssues && subIssues?.length > 0 ? (
@@ -377,7 +377,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
           ) : (
             !disabled && (
               <div className="flex items-center justify-between">
-                <div className="py-2 text-xs italic text-custom-text-300">No Sub-Issues yet</div>
+                <div className="py-2 text-xs italic text-neutral-text-medium">No Sub-Issues yet</div>
                 <div>
                   <CustomMenu
                     label={
diff --git a/web/components/labels/create-label-modal.tsx b/web/components/labels/create-label-modal.tsx
index 97a836fb4..213a79696 100644
--- a/web/components/labels/create-label-modal.tsx
+++ b/web/components/labels/create-label-modal.tsx
@@ -113,7 +113,7 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
               <Dialog.Panel className="relative transform rounded-lg bg-neutral-component-surface-light px-4 pb-4 pt-5 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                       Create Label
                     </Dialog.Title>
                     <div className="mt-8 flex items-center gap-2">
@@ -121,8 +121,8 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
                         {({ open, close }) => (
                           <>
                             <Popover.Button
-                              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"
+                              className={`group inline-flex items-center rounded-sm py-2 text-base font-medium hover:text-neutral-text-strong focus:outline-none ${
+                                open ? "text-neutral-text-strong" : "text-neutral-text-medium"
                               }`}
                             >
                               {watch("color") && watch("color") !== "" && (
@@ -134,7 +134,7 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
                                 />
                               )}
                               <ChevronDown
-                                className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
+                                className={`ml-2 h-5 w-5 group-hover:text-neutral-text-medium ${
                                   open ? "text-gray-600" : "text-gray-400"
                                 }`}
                                 aria-hidden="true"
diff --git a/web/components/labels/create-update-label-inline.tsx b/web/components/labels/create-update-label-inline.tsx
index 8a3be6244..0c4ce404a 100644
--- a/web/components/labels/create-update-label-inline.tsx
+++ b/web/components/labels/create-update-label-inline.tsx
@@ -132,7 +132,7 @@ export const CreateUpdateLabelInline = observer(
               <>
                 <Popover.Button
                   className={`group inline-flex items-center text-base font-medium focus:outline-none ${
-                    open ? "text-custom-text-100" : "text-custom-text-200"
+                    open ? "text-neutral-text-strong" : "text-neutral-text-medium"
                   }`}
                 >
                   <span
diff --git a/web/components/labels/delete-label-modal.tsx b/web/components/labels/delete-label-modal.tsx
index 57bbf09c9..770257ee2 100644
--- a/web/components/labels/delete-label-modal.tsx
+++ b/web/components/labels/delete-label-modal.tsx
@@ -90,13 +90,13 @@ export const DeleteLabelModal: React.FC<Props> = observer((props) => {
                       <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
                     <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                         Delete Label
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
+                        <p className="text-sm text-neutral-text-medium">
                           Are you sure you want to delete label-{" "}
-                          <span className="font-medium text-custom-text-100">{data?.name}</span>? The label will be
+                          <span className="font-medium text-neutral-text-strong">{data?.name}</span>? The label will be
                           removed from all the issues.
                         </p>
                       </div>
diff --git a/web/components/labels/label-block/drag-handle.tsx b/web/components/labels/label-block/drag-handle.tsx
index a71637bb9..ab980b090 100644
--- a/web/components/labels/label-block/drag-handle.tsx
+++ b/web/components/labels/label-block/drag-handle.tsx
@@ -12,7 +12,7 @@ export const DragHandle = (props: IDragHandle) => {
   return (
     <button
       type="button"
-      className={`mr-1 flex flex-shrink-0 rounded text-custom-sidebar-text-200 group-hover:opacity-100 ${
+      className={`mr-1 flex flex-shrink-0 rounded text-sidebar-neutral-text-medium group-hover:opacity-100 ${
         isDragging ? "opacity-100" : "opacity-0"
       }`}
       {...dragHandleProps}
diff --git a/web/components/labels/label-block/label-item-block.tsx b/web/components/labels/label-block/label-item-block.tsx
index eca3bcaaf..768a3de67 100644
--- a/web/components/labels/label-block/label-item-block.tsx
+++ b/web/components/labels/label-block/label-item-block.tsx
@@ -53,7 +53,7 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
             : "opacity-0 group-hover:pointer-events-auto group-hover:opacity-100"
         } ${isLabelGroup && "-top-0.5"}`}
       >
-        <CustomMenu ellipsis buttonClassName="h-4 w-4 leading-4 text-custom-sidebar-text-400">
+        <CustomMenu ellipsis buttonClassName="h-4 w-4 leading-4 text-sidebar-neutral-text-subtle">
           {customMenuItems.map(
             ({ isVisible, onClick, CustomIcon, text, key }) =>
               isVisible && (
@@ -69,7 +69,7 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
         {!isLabelGroup && (
           <div className="py-0.5">
             <button className="flex h-4 w-4 items-center justify-start gap-2" onClick={() => handleLabelDelete(label)}>
-              <X className="h-4 w-4  flex-shrink-0 text-custom-sidebar-text-400" />
+              <X className="h-4 w-4  flex-shrink-0 text-sidebar-neutral-text-subtle" />
             </button>
           </div>
         )}
diff --git a/web/components/labels/labels-list-modal.tsx b/web/components/labels/labels-list-modal.tsx
index b8d53acda..0f47a2a61 100644
--- a/web/components/labels/labels-list-modal.tsx
+++ b/web/components/labels/labels-list-modal.tsx
@@ -81,11 +81,11 @@ export const LabelsListModal: React.FC<Props> = observer((props) => {
               <Combobox>
                 <div className="relative m-1">
                   <Search
-                    className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
+                    className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-neutral-text-strong text-opacity-40"
                     aria-hidden="true"
                   />
                   <Combobox.Input
-                    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"
+                    className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-neutral-text-strong outline-none focus:ring-0 sm:text-sm"
                     placeholder="Search..."
                     onChange={(e) => setQuery(e.target.value)}
                   />
@@ -95,7 +95,7 @@ export const LabelsListModal: React.FC<Props> = observer((props) => {
                   {filteredLabels.length > 0 && (
                     <li className="p-2">
                       {query === "" && (
-                        <h2 className="mb-2 mt-4 px-3 text-xs font-semibold text-custom-text-100">Labels</h2>
+                        <h2 className="mb-2 mt-4 px-3 text-xs font-semibold text-neutral-text-strong">Labels</h2>
                       )}
                       <ul className="text-sm text-gray-700">
                         {filteredLabels.map((label) => {
@@ -113,8 +113,8 @@ export const LabelsListModal: React.FC<Props> = observer((props) => {
                                   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-neutral-component-surface-dark text-custom-text-100" : ""
+                                  `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-neutral-text-medium ${
+                                    active ? "bg-neutral-component-surface-dark text-neutral-text-strong" : ""
                                   }`
                                 }
                                 onClick={() => {
@@ -139,10 +139,10 @@ export const LabelsListModal: React.FC<Props> = observer((props) => {
                 {query !== "" && filteredLabels.length === 0 && (
                   <div className="px-6 py-14 text-center sm:px-14">
                     <LayerStackIcon
-                      className="mx-auto h-6 w-6 text-custom-text-100 text-opacity-40"
+                      className="mx-auto h-6 w-6 text-neutral-text-strong text-opacity-40"
                       aria-hidden="true"
                     />
-                    <p className="mt-4 text-sm text-custom-text-100">
+                    <p className="mt-4 text-sm text-neutral-text-strong">
                       We couldn{"'"}t find any label with that term. Please try again.
                     </p>
                   </div>
diff --git a/web/components/labels/project-setting-label-group.tsx b/web/components/labels/project-setting-label-group.tsx
index 37108b3b5..e682773d1 100644
--- a/web/components/labels/project-setting-label-group.tsx
+++ b/web/components/labels/project-setting-label-group.tsx
@@ -69,7 +69,7 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
   return (
     <Disclosure
       as="div"
-      className={`rounded border-[0.5px] border-neutral-border-medium text-custom-text-100 ${
+      className={`rounded border-[0.5px] border-neutral-border-medium text-neutral-text-strong ${
         groupDragSnapshot.combineTargetFor ? "bg-neutral-component-surface-dark" : "bg-neutral-component-surface-light"
       }`}
       defaultOpen
@@ -114,7 +114,7 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
                     <Disclosure.Button>
                       <span>
                         <ChevronDown
-                          className={`h-4 w-4 text-custom-sidebar-text-400 ${!open ? "rotate-90 transform" : ""}`}
+                          className={`h-4 w-4 text-sidebar-neutral-text-subtle ${!open ? "rotate-90 transform" : ""}`}
                         />
                       </span>
                     </Disclosure.Button>
diff --git a/web/components/modules/delete-module-modal.tsx b/web/components/modules/delete-module-modal.tsx
index a6682e73f..1a8c7e63c 100644
--- a/web/components/modules/delete-module-modal.tsx
+++ b/web/components/modules/delete-module-modal.tsx
@@ -104,14 +104,14 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
                       <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
                     <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                         Delete Module
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
+                        <p className="text-sm text-neutral-text-medium">
                           Are you sure you want to delete module-{" "}
-                          <span className="break-all font-medium text-custom-text-100">{data?.name}</span>? All of the
-                          data related to the module will be permanently removed. This action cannot be undone.
+                          <span className="break-all font-medium text-neutral-text-strong">{data?.name}</span>? All of
+                          the data related to the module will be permanently removed. This action cannot be undone.
                         </p>
                       </div>
                     </div>
diff --git a/web/components/modules/form.tsx b/web/components/modules/form.tsx
index 24fa379c9..f12540466 100644
--- a/web/components/modules/form.tsx
+++ b/web/components/modules/form.tsx
@@ -99,7 +99,7 @@ export const ModuleForm: React.FC<Props> = ({
               )}
             />
           )}
-          <h3 className="text-xl font-medium leading-6 text-custom-text-200">{status ? "Update" : "New"} Module</h3>
+          <h3 className="text-xl font-medium leading-6 text-neutral-text-medium">{status ? "Update" : "New"} Module</h3>
         </div>
 
         <div className="space-y-3">
diff --git a/web/components/modules/gantt-chart/blocks.tsx b/web/components/modules/gantt-chart/blocks.tsx
index 8c3c35729..38ccbf5aa 100644
--- a/web/components/modules/gantt-chart/blocks.tsx
+++ b/web/components/modules/gantt-chart/blocks.tsx
@@ -30,7 +30,7 @@ export const ModuleGanttBlock = ({ data }: { data: IModule }) => {
         }
         position="top-left"
       >
-        <div className="relative w-full truncate px-2.5 py-1 text-sm text-custom-text-100">{data?.name}</div>
+        <div className="relative w-full truncate px-2.5 py-1 text-sm text-neutral-text-strong">{data?.name}</div>
       </Tooltip>
     </div>
   );
diff --git a/web/components/modules/module-card-item.tsx b/web/components/modules/module-card-item.tsx
index 76ce2ec60..2491ecbd2 100644
--- a/web/components/modules/module-card-item.tsx
+++ b/web/components/modules/module-card-item.tsx
@@ -166,7 +166,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
                   </span>
                 )}
                 <button onClick={openModuleOverview}>
-                  <Info className="h-4 w-4 text-custom-text-400" />
+                  <Info className="h-4 w-4 text-neutral-text-subtle" />
                 </button>
               </div>
             </div>
@@ -174,9 +174,9 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
 
           <div className="flex flex-col gap-3">
             <div className="flex items-center justify-between">
-              <div className="flex items-center gap-1.5 text-custom-text-200">
-                <LayersIcon className="h-4 w-4 text-custom-text-300" />
-                <span className="text-xs text-custom-text-300">{issueCount ?? "0 Issue"}</span>
+              <div className="flex items-center gap-1.5 text-neutral-text-medium">
+                <LayersIcon className="h-4 w-4 text-neutral-text-medium" />
+                <span className="text-xs text-neutral-text-medium">{issueCount ?? "0 Issue"}</span>
               </div>
               {moduleDetails.members_detail.length > 0 && (
                 <Tooltip tooltipContent={`${moduleDetails.members_detail.length} Members`}>
@@ -215,12 +215,12 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
             <div className="flex items-center justify-between">
               {isDateValid ? (
                 <>
-                  <span className="text-xs text-custom-text-300">
+                  <span className="text-xs text-neutral-text-medium">
                     {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
                   </span>
                 </>
               ) : (
-                <span className="text-xs text-custom-text-400">No due date</span>
+                <span className="text-xs text-neutral-text-subtle">No due date</span>
               )}
 
               <div className="z-10 flex items-center gap-1.5">
@@ -231,7 +231,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
                     </button>
                   ) : (
                     <button type="button" onClick={handleAddToFavorites}>
-                      <Star className="h-3.5 w-3.5 text-custom-text-200" />
+                      <Star className="h-3.5 w-3.5 text-neutral-text-medium" />
                     </button>
                   ))}
 
diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx
index e5402b806..aa8bf3fde 100644
--- a/web/components/modules/module-list-item.tsx
+++ b/web/components/modules/module-list-item.tsx
@@ -151,7 +151,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
                   ) : progress === 100 ? (
                     <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
                   ) : (
-                    <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
+                    <span className="text-xs text-neutral-text-medium">{`${progress}%`}</span>
                   )}
                 </CircularProgressIndicator>
               </span>
@@ -160,7 +160,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
               </Tooltip>
             </div>
             <button onClick={openModuleOverview} className="z-10 hidden flex-shrink-0 group-hover:flex">
-              <Info className="h-4 w-4 text-custom-text-400" />
+              <Info className="h-4 w-4 text-neutral-text-subtle" />
             </button>
           </div>
 
@@ -180,7 +180,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
             </div>
 
             {renderDate && (
-              <span className="flex w-40 items-center justify-center gap-2 text-xs text-custom-text-300">
+              <span className="flex w-40 items-center justify-center gap-2 text-xs text-neutral-text-medium">
                 {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
               </span>
             )}
@@ -195,7 +195,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
                   </AvatarGroup>
                 ) : (
                   <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-neutral-component-surface-dark">
-                    <User2 className="h-4 w-4 text-custom-text-400" />
+                    <User2 className="h-4 w-4 text-neutral-text-subtle" />
                   </span>
                 )}
               </div>
@@ -208,7 +208,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
                 </button>
               ) : (
                 <button type="button" onClick={handleAddToFavorites} className="z-[1]">
-                  <Star className="h-3.5 w-3.5 text-custom-text-300" />
+                  <Star className="h-3.5 w-3.5 text-neutral-text-medium" />
                 </button>
               ))}
 
diff --git a/web/components/modules/module-mobile-header.tsx b/web/components/modules/module-mobile-header.tsx
index 8deb7ba1f..fea56e9ac 100644
--- a/web/components/modules/module-mobile-header.tsx
+++ b/web/components/modules/module-mobile-header.tsx
@@ -86,10 +86,10 @@ export const ModuleMobileHeader = () => {
       <div className="flex justify-evenly py-2 border-b border-neutral-border-medium">
         <CustomMenu
           maxHeight={"md"}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm"
+          className="flex flex-grow justify-center text-neutral-text-medium text-sm"
           placement="bottom-start"
-          customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>}
-          customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+          customButton={<span className="flex flex-grow justify-center text-neutral-text-medium text-sm">Layout</span>}
+          customButtonClassName="flex flex-grow justify-center text-neutral-text-medium text-sm"
           closeOnSelect
         >
           {layouts.map((layout, index) => (
@@ -100,18 +100,18 @@ export const ModuleMobileHeader = () => {
               className="flex items-center gap-2"
             >
               <layout.icon className="w-3 h-3" />
-              <div className="text-custom-text-300">{layout.title}</div>
+              <div className="text-neutral-text-medium">{layout.title}</div>
             </CustomMenu.MenuItem>
           ))}
         </CustomMenu>
-        <div className="flex flex-grow justify-center border-l border-neutral-border-medium items-center text-custom-text-200 text-sm">
+        <div className="flex flex-grow justify-center border-l border-neutral-border-medium items-center text-neutral-text-medium text-sm">
           <FiltersDropdown
             title="Filters"
             placement="bottom-end"
             menuButton={
-              <span className="flex items-center text-custom-text-200 text-sm">
+              <span className="flex items-center text-neutral-text-medium text-sm">
                 Filters
-                <ChevronDown className="text-custom-text-200  h-4 w-4 ml-2" />
+                <ChevronDown className="text-neutral-text-medium  h-4 w-4 ml-2" />
               </span>
             }
           >
@@ -127,14 +127,14 @@ export const ModuleMobileHeader = () => {
             />
           </FiltersDropdown>
         </div>
-        <div className="flex flex-grow justify-center border-l border-neutral-border-medium items-center text-custom-text-200 text-sm">
+        <div className="flex flex-grow justify-center border-l border-neutral-border-medium items-center text-neutral-text-medium text-sm">
           <FiltersDropdown
             title="Display"
             placement="bottom-end"
             menuButton={
-              <span className="flex items-center text-custom-text-200 text-sm">
+              <span className="flex items-center text-neutral-text-medium text-sm">
                 Display
-                <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
+                <ChevronDown className="text-neutral-text-medium h-4 w-4 ml-2" />
               </span>
             }
           >
@@ -152,7 +152,7 @@ export const ModuleMobileHeader = () => {
 
         <button
           onClick={() => setAnalyticsModal(true)}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-neutral-border-medium"
+          className="flex flex-grow justify-center text-neutral-text-medium text-sm border-l border-neutral-border-medium"
         >
           Analytics
         </button>
diff --git a/web/components/modules/select/status.tsx b/web/components/modules/select/status.tsx
index 33a634e9b..076c84ee7 100644
--- a/web/components/modules/select/status.tsx
+++ b/web/components/modules/select/status.tsx
@@ -28,10 +28,10 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error, tabIndex }
             {value ? (
               <ModuleStatusIcon status={value} />
             ) : (
-              <DoubleCircleIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`} />
+              <DoubleCircleIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-neutral-text-medium"}`} />
             )}
             {MODULE_STATUS.find((s) => s.value === value)?.label ?? (
-              <span className={`${error ? "text-red-500" : "text-custom-text-200"}`}>Status</span>
+              <span className={`${error ? "text-red-500" : "text-neutral-text-medium"}`}>Status</span>
             )}
           </div>
         }
diff --git a/web/components/modules/sidebar-select/select-status.tsx b/web/components/modules/sidebar-select/select-status.tsx
index 0eb60ebb2..6d513cdfe 100644
--- a/web/components/modules/sidebar-select/select-status.tsx
+++ b/web/components/modules/sidebar-select/select-status.tsx
@@ -29,7 +29,9 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
         render={({ field: { value } }) => (
           <CustomSelect
             label={
-              <span className={`flex items-center gap-2 text-left capitalize ${value ? "" : "text-custom-text-100"}`}>
+              <span
+                className={`flex items-center gap-2 text-left capitalize ${value ? "" : "text-neutral-text-strong"}`}
+              >
                 <span
                   className="h-2 w-2 flex-shrink-0 rounded-full"
                   style={{
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index ba3a13a31..fd3f8060d 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -269,7 +269,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
           </div>
           <div className="flex items-center gap-3.5">
             <button onClick={handleCopyText}>
-              <LinkIcon className="h-3 w-3 text-custom-text-300" />
+              <LinkIcon className="h-3 w-3 text-neutral-text-medium" />
             </button>
             {isEditingAllowed && (
               <CustomMenu placement="bottom-end" ellipsis>
@@ -327,18 +327,18 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
               )}
             />
           </div>
-          <h4 className="w-full break-words text-xl font-semibold text-custom-text-100">{moduleDetails.name}</h4>
+          <h4 className="w-full break-words text-xl font-semibold text-neutral-text-strong">{moduleDetails.name}</h4>
         </div>
 
         {moduleDetails.description && (
-          <span className="w-full whitespace-normal break-words py-2.5 text-sm leading-5 text-custom-text-200">
+          <span className="w-full whitespace-normal break-words py-2.5 text-sm leading-5 text-neutral-text-medium">
             {moduleDetails.description}
           </span>
         )}
 
         <div className="flex flex-col gap-5 pb-6 pt-2.5">
           <div className="flex items-center justify-start gap-1">
-            <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+            <div className="flex w-1/2 items-center justify-start gap-2 text-neutral-text-medium">
               <CalendarClock className="h-4 w-4" />
 
               <span className="text-base">Start date</span>
@@ -349,14 +349,14 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <>
                     <Popover.Button
                       ref={startDateButtonRef}
-                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
+                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-custom-background-80 ${
                         isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
                       }`}
                       disabled={!isEditingAllowed}
                     >
                       <span
                         className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
-                          watch("start_date") ? "" : "text-custom-text-400"
+                          watch("start_date") ? "" : "text-neutral-text-subtle"
                         }`}
                       >
                         {renderFormattedDate(startDate) ?? "No date selected"}
@@ -395,7 +395,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
           </div>
 
           <div className="flex items-center justify-start gap-1">
-            <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+            <div className="flex w-1/2 items-center justify-start gap-2 text-neutral-text-medium">
               <CalendarCheck2 className="h-4 w-4" />
               <span className="text-base">Target date</span>
             </div>
@@ -405,14 +405,14 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <>
                     <Popover.Button
                       ref={endDateButtonRef}
-                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
+                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-custom-background-80 ${
                         isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
                       }`}
                       disabled={!isEditingAllowed}
                     >
                       <span
                         className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
-                          watch("target_date") ? "" : "text-custom-text-400"
+                          watch("target_date") ? "" : "text-neutral-text-subtle"
                         }`}
                       >
                         {renderFormattedDate(endDate) ?? "No date selected"}
@@ -452,14 +452,14 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
         </div>
 
         {moduleDetails.description && (
-          <span className="w-full whitespace-normal break-words py-2.5 text-sm leading-5 text-custom-text-200">
+          <span className="w-full whitespace-normal break-words py-2.5 text-sm leading-5 text-neutral-text-medium">
             {moduleDetails.description}
           </span>
         )}
 
         <div className="flex flex-col gap-5 pb-6 pt-2.5">
           <div className="flex items-center justify-start gap-1">
-            <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+            <div className="flex w-1/2 items-center justify-start gap-2 text-neutral-text-medium">
               <UserCircle2 className="h-4 w-4" />
               <span className="text-base">Lead</span>
             </div>
@@ -483,7 +483,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
             />
           </div>
           <div className="flex items-center justify-start gap-1">
-            <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+            <div className="flex w-1/2 items-center justify-start gap-2 text-neutral-text-medium">
               <UserGroupIcon className="h-4 w-4" />
               <span className="text-base">Members</span>
             </div>
@@ -509,12 +509,12 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
           </div>
 
           <div className="flex items-center justify-start gap-1">
-            <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+            <div className="flex w-1/2 items-center justify-start gap-2 text-neutral-text-medium">
               <LayersIcon className="h-4 w-4" />
               <span className="text-base">Issues</span>
             </div>
             <div className="flex w-1/2 items-center">
-              <span className="px-1.5 text-sm text-custom-text-300">{issueCount}</span>
+              <span className="px-1.5 text-sm text-neutral-text-medium">{issueCount}</span>
             </div>
           </div>
         </div>
@@ -529,7 +529,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                     disabled={!isStartValid || !isEndValid}
                   >
                     <div className="flex items-center justify-start gap-2 text-sm">
-                      <span className="font-medium text-custom-text-200">Progress</span>
+                      <span className="font-medium text-neutral-text-medium">Progress</span>
                     </div>
 
                     <div className="flex items-center gap-2.5">
@@ -544,8 +544,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                         <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
                       ) : (
                         <div className="flex items-center gap-1">
-                          <AlertCircle height={14} width={14} className="text-custom-text-200" />
-                          <span className="text-xs italic text-custom-text-200">
+                          <AlertCircle height={14} width={14} className="text-neutral-text-medium" />
+                          <span className="text-xs italic text-neutral-text-medium">
                             {moduleDetails?.start_date && moduleDetails?.target_date
                               ? "This module isn't active yet."
                               : "Invalid date. Please enter valid date."}
@@ -560,7 +560,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                         {moduleDetails.start_date && moduleDetails.target_date ? (
                           <div className=" h-full w-full pt-4">
                             <div className="flex  items-start  gap-4 py-2 text-xs">
-                              <div className="flex items-center gap-3 text-custom-text-100">
+                              <div className="flex items-center gap-3 text-neutral-text-strong">
                                 <div className="flex items-center justify-center gap-1">
                                   <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
                                   <span>Ideal</span>
@@ -614,7 +614,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                 <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
                   <Disclosure.Button className="flex w-full items-center justify-between gap-2 p-1.5">
                     <div className="flex items-center justify-start gap-2 text-sm">
-                      <span className="font-medium text-custom-text-200">Links</span>
+                      <span className="font-medium text-neutral-text-medium">Links</span>
                     </div>
 
                     <div className="flex items-center gap-2.5">
@@ -653,8 +653,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                         ) : (
                           <div className="flex items-center justify-between gap-2">
                             <div className="flex items-center gap-2">
-                              <Info className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
-                              <span className="p-0.5 text-xs text-custom-text-300">No links added yet</span>
+                              <Info className="h-3.5 w-3.5 stroke-[1.5] text-neutral-text-medium" />
+                              <span className="p-0.5 text-xs text-neutral-text-medium">No links added yet</span>
                             </div>
                             <button
                               className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx
index c4432b2cd..3ac859b97 100644
--- a/web/components/notifications/notification-card.tsx
+++ b/web/components/notifications/notification-card.tsx
@@ -74,7 +74,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
           </div>
         ) : (
           <div className="flex h-12 w-12 items-center justify-center rounded-full bg-neutral-component-surface-dark">
-            <span className="text-lg font-medium text-custom-text-100">
+            <span className="text-lg font-medium text-neutral-text-strong">
               {notification.triggered_by_details.is_bot ? (
                 notification.triggered_by_details.first_name?.[0]?.toUpperCase()
               ) : notification.triggered_by_details.display_name?.[0] ? (
@@ -137,14 +137,14 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
         )}
 
         <div className="flex justify-between gap-2 text-xs">
-          <p className="text-custom-text-300">
+          <p className="text-neutral-text-medium">
             {truncateText(
               `${notification.data.issue.identifier}-${notification.data.issue.sequence_id} ${notification.data.issue.name}`,
               50
             )}
           </p>
           {notification.snoozed_till ? (
-            <p className="flex flex-shrink-0 items-center justify-end gap-x-1 text-custom-text-300">
+            <p className="flex flex-shrink-0 items-center justify-end gap-x-1 text-neutral-text-medium">
               <Clock className="h-4 w-4" />
               <span>
                 Till {renderFormattedDate(notification.snoozed_till)},{" "}
@@ -152,7 +152,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
               </span>
             </p>
           ) : (
-            <p className="flex-shrink-0 text-custom-text-300">{calculateTimeAgo(notification.created_at)}</p>
+            <p className="flex-shrink-0 text-neutral-text-medium">{calculateTimeAgo(notification.created_at)}</p>
           )}
         </div>
       </div>
@@ -161,7 +161,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
           {
             id: 1,
             name: notification.read_at ? "Mark as unread" : "Mark as read",
-            icon: <MessageSquare className="h-3.5 w-3.5 text-custom-text-300" />,
+            icon: <MessageSquare className="h-3.5 w-3.5 text-neutral-text-medium" />,
             onClick: () => {
               markNotificationReadStatusToggle(notification.id).then(() => {
                 setToastAlert({
@@ -175,9 +175,9 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
             id: 2,
             name: notification.archived_at ? "Unarchive" : "Archive",
             icon: notification.archived_at ? (
-              <ArchiveRestore className="h-3.5 w-3.5 text-custom-text-300" />
+              <ArchiveRestore className="h-3.5 w-3.5 text-neutral-text-medium" />
             ) : (
-              <ArchiveIcon className="h-3.5 w-3.5 text-custom-text-300" />
+              <ArchiveIcon className="h-3.5 w-3.5 text-neutral-text-medium" />
             ),
             onClick: () => {
               markNotificationArchivedStatus(notification.id).then(() => {
@@ -213,7 +213,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
             }}
             customButton={
               <div className="flex w-full items-center gap-x-2 rounded bg-neutral-component-surface-dark p-0.5 text-sm hover:bg-neutral-component-surface-light">
-                <Clock className="h-3.5 w-3.5 text-custom-text-300" />
+                <Clock className="h-3.5 w-3.5 text-neutral-text-medium" />
               </div>
             }
             optionsClassName="!z-20"
diff --git a/web/components/notifications/notification-header.tsx b/web/components/notifications/notification-header.tsx
index 0fdeb8432..8c45a0fff 100644
--- a/web/components/notifications/notification-header.tsx
+++ b/web/components/notifications/notification-header.tsx
@@ -66,7 +66,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
     <>
       <div className="flex items-center justify-between px-5 pt-5">
         <h2 className="mb-2 text-xl font-semibold">Notifications</h2>
-        <div className="flex items-center justify-center gap-x-4 text-custom-text-200">
+        <div className="flex items-center justify-center gap-x-4 text-neutral-text-medium">
           <Tooltip tooltipContent="Refresh">
             <button
               type="button"
@@ -166,7 +166,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
                 className={`whitespace-nowrap border-b-2 px-1 pb-4 text-sm font-medium outline-none ${
                   tab.value === selectedTab
                     ? "border-custom-primary-100 text-custom-primary-100"
-                    : "border-transparent text-custom-text-200"
+                    : "border-transparent text-neutral-text-medium"
                 }`}
               >
                 {tab.label}
@@ -175,7 +175,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
                     className={`ml-2 rounded-full px-2 py-0.5 text-xs ${
                       tab.value === selectedTab
                         ? "bg-custom-primary-100 text-white"
-                        : "bg-neutral-component-surface-dark text-custom-text-200"
+                        : "bg-neutral-component-surface-dark text-neutral-text-medium"
                     }`}
                   >
                     {getNumberCount(tab.unreadCount)}
diff --git a/web/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx
index 1d51ad0dc..f970b9f5f 100644
--- a/web/components/notifications/notification-popover.tsx
+++ b/web/components/notifications/notification-popover.tsx
@@ -69,7 +69,7 @@ export const NotificationPopover = observer(() => {
                   className={`group relative flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
                     isActive
                       ? "bg-custom-primary-100/10 text-custom-primary-100"
-                      : "text-custom-sidebar-text-200 hover:bg-sidebar-neutral-component-surface-dark"
+                      : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark"
                   } ${isSidebarCollapsed ? "justify-center" : ""}`}
                 >
                   <Bell className="h-4 w-4" />
@@ -134,7 +134,7 @@ export const NotificationPopover = observer(() => {
                             <div role="status">
                               <svg
                                 aria-hidden="true"
-                                className="mr-2 h-6 w-6 animate-spin fill-blue-600 text-custom-text-200"
+                                className="mr-2 h-6 w-6 animate-spin fill-blue-600 text-neutral-text-medium"
                                 viewBox="0 0 100 101"
                                 fill="none"
                                 xmlns="http://www.w3.org/2000/svg"
diff --git a/web/components/notifications/select-snooze-till-modal.tsx b/web/components/notifications/select-snooze-till-modal.tsx
index bb1de8024..8f06341a0 100644
--- a/web/components/notifications/select-snooze-till-modal.tsx
+++ b/web/components/notifications/select-snooze-till-modal.tsx
@@ -145,20 +145,20 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
               <Dialog.Panel className="relative transform rounded-lg bg-neutral-component-surface-light p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="flex items-center justify-between">
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                       Customize Snooze Time
                     </Dialog.Title>
 
                     <div>
                       <button type="button" onClick={handleClose}>
-                        <X className="h-5 w-5 text-custom-text-100" />
+                        <X className="h-5 w-5 text-neutral-text-strong" />
                       </button>
                     </div>
                   </div>
 
                   <div className="mt-5 flex items-center gap-3">
                     <div className="flex-1">
-                      <h6 className="mb-2 block text-sm font-medium text-custom-text-400">Pick a date</h6>
+                      <h6 className="mb-2 block text-sm font-medium text-neutral-text-subtle">Pick a date</h6>
                       <Controller
                         name="date"
                         control={control}
@@ -171,7 +171,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
                               setValue("time", null);
                               onChange(val);
                             }}
-                            className="w-full rounded-md border border-neutral-border-medium bg-neutral-component-surface-light px-3 py-2 !text-sm text-custom-text-100 placeholder:!text-custom-text-400 focus:outline-none"
+                            className="w-full rounded-md border border-neutral-border-medium bg-neutral-component-surface-light px-3 py-2 !text-sm text-neutral-text-strong placeholder:!text-neutral-text-subtle focus:outline-none"
                             wrapperClassName="w-full"
                             noBorder
                             minDate={new Date()}
@@ -180,7 +180,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
                       />
                     </div>
                     <div className="flex-1">
-                      <h6 className="mb-2 block text-sm font-medium text-custom-text-400">Pick a time</h6>
+                      <h6 className="mb-2 block text-sm font-medium text-neutral-text-subtle">Pick a time</h6>
                       <Controller
                         control={control}
                         name="time"
@@ -196,7 +196,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
                                     {value} {watch("period").toLowerCase()}
                                   </span>
                                 ) : (
-                                  <span className="text-sm text-custom-text-400">Select a time</span>
+                                  <span className="text-sm text-neutral-text-subtle">Select a time</span>
                                 )}
                               </div>
                             }
@@ -238,7 +238,9 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
                                 </CustomSelect.Option>
                               ))
                             ) : (
-                              <p className="p-3 text-center text-custom-text-200">No available time for this date.</p>
+                              <p className="p-3 text-center text-neutral-text-medium">
+                                No available time for this date.
+                              </p>
                             )}
                           </CustomSelect>
                         )}
diff --git a/web/components/onboarding/invitations.tsx b/web/components/onboarding/invitations.tsx
index b9d844f88..9f9d95a3e 100644
--- a/web/components/onboarding/invitations.tsx
+++ b/web/components/onboarding/invitations.tsx
@@ -115,9 +115,11 @@ export const Invitations: React.FC<Props> = (props) => {
                   </div>
                   <div className="min-w-0 flex-1">
                     <div className="text-sm font-medium">{truncateText(invitedWorkspace?.name, 30)}</div>
-                    <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
+                    <p className="text-xs text-neutral-text-medium">{ROLE[invitation.role]}</p>
                   </div>
-                  <span className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-custom-text-200"}`}>
+                  <span
+                    className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-neutral-text-medium"}`}
+                  >
                     <CheckCircle2 className="h-5 w-5" />
                   </span>
                 </div>
@@ -132,17 +134,17 @@ export const Invitations: React.FC<Props> = (props) => {
       <div className="mt-8 flex items-center justify-between rounded-sm bg-onboarding-background-300/30 px-4 py-3">
         <div className="flex items-center">
           <Search className="mr-2 h-4  w-4" />
-          <span className="text-sm text-custom-text-200">Don&apos;t see your workspace?</span>
+          <span className="text-sm text-neutral-text-medium">Don&apos;t see your workspace?</span>
         </div>
 
         <div>
           <div
-            className="rounded-md border border-neutral-border-medium bg-onboarding-background-200 py-3 text-center text-sm font-medium text-custom-text-200 hover:cursor-pointer"
+            className="rounded-md border border-neutral-border-medium bg-onboarding-background-200 py-3 text-center text-sm font-medium text-neutral-text-medium hover:cursor-pointer"
             onClick={setTryDiffAccount}
           >
             Try a different email address
           </div>
-          <p className="mt-2 text-xs text-custom-text-300">
+          <p className="mt-2 text-xs text-neutral-text-medium">
             Your right e-mail address could be from a Google or GitHub login.
           </p>
         </div>
@@ -160,12 +162,12 @@ const EmptyInvitation = ({ email, setTryDiffAccount }: { email: string; setTryDi
       We couldn’t find any existing workspaces for the email address {email}
     </p>
     <div
-      className="mt-6 rounded-md border border-neutral-border-medium bg-onboarding-background-200 py-3 text-center text-sm font-medium text-custom-text-200 hover:cursor-pointer"
+      className="mt-6 rounded-md border border-neutral-border-medium bg-onboarding-background-200 py-3 text-center text-sm font-medium text-neutral-text-medium hover:cursor-pointer"
       onClick={setTryDiffAccount}
     >
       Try a different email address
     </div>
-    <p className="mt-2 text-center text-xs text-custom-text-300">
+    <p className="mt-2 text-center text-xs text-neutral-text-medium">
       Your right e-mail address could be from a Google or GitHub login.
     </p>
   </div>
diff --git a/web/components/onboarding/invite-members.tsx b/web/components/onboarding/invite-members.tsx
index dc6e2db96..ec77c6783 100644
--- a/web/components/onboarding/invite-members.tsx
+++ b/web/components/onboarding/invite-members.tsx
@@ -222,7 +222,7 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
                           className={({ active, selected }) =>
                             `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
                               active || selected ? "bg-onboarding-background-400/40" : ""
-                            } ${selected ? "text-onboarding-text-100" : "text-custom-text-200"}`
+                            } ${selected ? "text-onboarding-text-100" : "text-neutral-text-medium"}`
                           }
                         >
                           {({ selected }) => (
@@ -246,7 +246,7 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
             className="ml-3 hidden place-items-center self-center rounded group-hover:grid"
             onClick={() => remove(index)}
           >
-            <XCircle className="h-3.5 w-3.5 text-custom-text-400" />
+            <XCircle className="h-3.5 w-3.5 text-neutral-text-subtle" />
           </button>
         )}
       </div>
diff --git a/web/components/onboarding/join-workspaces.tsx b/web/components/onboarding/join-workspaces.tsx
index 08ffab379..a895e2a35 100644
--- a/web/components/onboarding/join-workspaces.tsx
+++ b/web/components/onboarding/join-workspaces.tsx
@@ -72,7 +72,7 @@ export const JoinWorkspaces: React.FC<Props> = observer((props) => {
           />
           <div className="my-8 flex items-center md:w-1/2">
             <hr className="w-full border-onboarding-border-100" />
-            <p className="mx-3 flex-shrink-0 text-center text-sm text-custom-text-400">Or</p>
+            <p className="mx-3 flex-shrink-0 text-center text-sm text-neutral-text-subtle">Or</p>
             <hr className="w-full border-onboarding-border-100" />
           </div>
           <div className="w-full">
diff --git a/web/components/onboarding/onboarding-sidebar.tsx b/web/components/onboarding/onboarding-sidebar.tsx
index b10a15a44..cf17f9687 100644
--- a/web/components/onboarding/onboarding-sidebar.tsx
+++ b/web/components/onboarding/onboarding-sidebar.tsx
@@ -176,8 +176,10 @@ export const OnboardingSidebar: React.FC<Props> = (props) => {
                     />
                   </div>
                   <div className="mx-2 flex w-full flex-shrink items-center justify-between truncate">
-                    <h4 className="truncate text-base font-medium text-custom-text-100">{workspaceName}</h4>
-                    <ChevronDown className={`mx-1 h-4 w-4 flex-shrink-0 text-custom-sidebar-text-400 duration-300`} />
+                    <h4 className="truncate text-base font-medium text-neutral-text-strong">{workspaceName}</h4>
+                    <ChevronDown
+                      className={`mx-1 h-4 w-4 flex-shrink-0 text-sidebar-neutral-text-subtle duration-300`}
+                    />
                   </div>
                   <div className="flex flex-shrink-0">
                     <Avatar
@@ -206,8 +208,8 @@ export const OnboardingSidebar: React.FC<Props> = (props) => {
               />
             </div>
             <div className="mx-2 flex w-full flex-shrink items-center justify-between truncate">
-              <h4 className="truncate text-base font-medium text-custom-text-100">{workspaceName}</h4>
-              <ChevronDown className={`mx-1 h-4 w-4 flex-shrink-0 text-custom-sidebar-text-400 duration-300`} />
+              <h4 className="truncate text-base font-medium text-neutral-text-strong">{workspaceName}</h4>
+              <ChevronDown className={`mx-1 h-4 w-4 flex-shrink-0 text-sidebar-neutral-text-subtle duration-300`} />
             </div>
             <div className="flex flex-shrink-0">
               <Avatar
@@ -229,7 +231,7 @@ export const OnboardingSidebar: React.FC<Props> = (props) => {
             className={`group relative flex w-full items-center justify-between gap-1 rounded border border-onboarding-border-100 px-3 shadow-custom-shadow-2xs`}
           >
             <div className={`relative flex flex-shrink-0 flex-grow items-center gap-2 rounded py-1.5 outline-none`}>
-              <PenSquare className="h-4 w-4 text-custom-sidebar-text-300" />
+              <PenSquare className="h-4 w-4 text-sidebar-neutral-text-medium" />
               {<span className="text-sm font-medium">New Issue</span>}
             </div>
           </div>
@@ -258,11 +260,11 @@ export const OnboardingSidebar: React.FC<Props> = (props) => {
 
       {showProject && (
         <div className="px-4 pt-4">
-          <p className="pb-4 text-base font-semibold text-custom-text-300">Projects</p>
+          <p className="pb-4 text-base font-semibold text-neutral-text-medium">Projects</p>
 
           <div className="px-3">
             {" "}
-            <div className="mb-3 flex w-4/5 items-center justify-between text-base font-medium text-custom-text-200">
+            <div className="mb-3 flex w-4/5 items-center justify-between text-base font-medium text-neutral-text-medium">
               <div className="flex items-center gap-x-2">
                 <Image src={projectEmoji} alt="Plane Logo" className="h-4 w-4" />
                 <span> Plane</span>
@@ -273,7 +275,7 @@ export const OnboardingSidebar: React.FC<Props> = (props) => {
             {projectLinks.map((link) => (
               <a className="ml-6 block w-full" key={link.name}>
                 <div
-                  className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-base font-medium text-custom-sidebar-text-200 
+                  className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-base font-medium text-sidebar-neutral-text-medium 
                     outline-none  focus:bg-sidebar-neutral-component-surface-dark
                 `}
                 >
diff --git a/web/components/onboarding/tour/root.tsx b/web/components/onboarding/tour/root.tsx
index 415e6607d..10589ea15 100644
--- a/web/components/onboarding/tour/root.tsx
+++ b/web/components/onboarding/tour/root.tsx
@@ -97,7 +97,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
               <h3 className="font-semibold sm:text-xl">
                 Welcome to Plane, {currentUser?.first_name} {currentUser?.last_name}
               </h3>
-              <p className="mt-3 text-sm text-custom-text-200">
+              <p className="mt-3 text-sm text-neutral-text-medium">
                 We{"'"}re glad that you decided to try out Plane. You can now manage your projects with ease. Get
                 started by creating a project.
               </p>
@@ -125,7 +125,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
             className="fixed right-[9%] top-[19%] z-10 -translate-y-1/2 translate-x-1/2 cursor-pointer rounded-full border border-custom-text-100 p-1 sm:top-[11.5%] md:right-[24%] lg:right-[19%]"
             onClick={onComplete}
           >
-            <X className="h-3 w-3 text-custom-text-100" />
+            <X className="h-3 w-3 text-neutral-text-strong" />
           </button>
           <TourSidebar step={step} setStep={setStep} />
           <div className="col-span-10 h-full overflow-hidden lg:col-span-7">
@@ -138,7 +138,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
             </div>
             <div className="flex h-1/2 flex-col overflow-y-auto p-4 sm:h-2/5">
               <h3 className="font-semibold sm:text-xl">{currentStep?.title}</h3>
-              <p className="mt-3 text-sm text-custom-text-200">{currentStep?.description}</p>
+              <p className="mt-3 text-sm text-neutral-text-medium">{currentStep?.description}</p>
               <div className="mt-3 flex h-full items-end justify-between gap-4">
                 <div className="flex items-center gap-4">
                   {currentStep?.prevStep && (
diff --git a/web/components/onboarding/tour/sidebar.tsx b/web/components/onboarding/tour/sidebar.tsx
index 629751ac7..2d40219cb 100644
--- a/web/components/onboarding/tour/sidebar.tsx
+++ b/web/components/onboarding/tour/sidebar.tsx
@@ -49,7 +49,7 @@ export const TourSidebar: React.FC<Props> = ({ step, setStep }) => (
           className={`flex cursor-pointer items-center gap-2 border-l-[3px] py-0.5 pl-3 pr-2 text-sm font-medium capitalize ${
             step === option.key
               ? "border-custom-primary-100 text-custom-primary-100"
-              : "border-transparent text-custom-text-200"
+              : "border-transparent text-neutral-text-medium"
           }`}
           onClick={() => setStep(option.key)}
           role="button"
diff --git a/web/components/onboarding/workspace.tsx b/web/components/onboarding/workspace.tsx
index c08e8f243..f4de08834 100644
--- a/web/components/onboarding/workspace.tsx
+++ b/web/components/onboarding/workspace.tsx
@@ -92,7 +92,7 @@ export const Workspace: React.FC<Props> = (props) => {
   return (
     <form className="mt-5 md:w-2/3" onSubmit={handleSubmit(handleCreateWorkspace)}>
       <div className="mb-5">
-        <p className="mb-1 text-base text-custom-text-400">Name it.</p>
+        <p className="mb-1 text-base text-neutral-text-subtle">Name it.</p>
         <Controller
           control={control}
           name="name"
@@ -120,13 +120,13 @@ export const Workspace: React.FC<Props> = (props) => {
                 placeholder="Enter workspace name..."
                 ref={ref}
                 hasError={Boolean(errors.name)}
-                className="h-[46px] w-full border-onboarding-border-100 text-base placeholder:text-base placeholder:text-custom-text-400/50"
+                className="h-[46px] w-full border-onboarding-border-100 text-base placeholder:text-base placeholder:text-neutral-text-subtle/50"
               />
             </div>
           )}
         />
         {errors.name && <span className="text-sm text-red-500">{errors.name.message}</span>}
-        <p className="mb-1 mt-4 text-base text-custom-text-400">You can edit the slug.</p>
+        <p className="mb-1 mt-4 text-base text-neutral-text-subtle">You can edit the slug.</p>
         <Controller
           control={control}
           name="slug"
diff --git a/web/components/pages/delete-page-modal.tsx b/web/components/pages/delete-page-modal.tsx
index 53027a096..365507b81 100644
--- a/web/components/pages/delete-page-modal.tsx
+++ b/web/components/pages/delete-page-modal.tsx
@@ -101,14 +101,14 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
                       <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
                     <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                         Delete Page
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
+                        <p className="text-sm text-neutral-text-medium">
                           Are you sure you want to delete page-{" "}
-                          <span className="break-words font-medium text-custom-text-100">{name}</span>? The Page will be
-                          deleted permanently. This action cannot be undone.
+                          <span className="break-words font-medium text-neutral-text-strong">{name}</span>? The Page
+                          will be deleted permanently. This action cannot be undone.
                         </p>
                       </div>
                     </div>
diff --git a/web/components/pages/page-form.tsx b/web/components/pages/page-form.tsx
index 3e0b2b973..079c13c70 100644
--- a/web/components/pages/page-form.tsx
+++ b/web/components/pages/page-form.tsx
@@ -37,7 +37,9 @@ export const PageForm: React.FC<Props> = (props) => {
   return (
     <form onSubmit={handleSubmit(handleCreateUpdatePage)}>
       <div className="space-y-4">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{pageStore ? "Update" : "Create"} Page</h3>
+        <h3 className="text-lg font-medium leading-6 text-neutral-text-strong">
+          {pageStore ? "Update" : "Create"} Page
+        </h3>
         <div className="space-y-3">
           <div>
             <Controller
@@ -86,7 +88,7 @@ export const PageForm: React.FC<Props> = (props) => {
                     >
                       <access.icon
                         className={`h-3.5 w-3.5 ${
-                          value === access.key ? "text-custom-text-100" : "text-custom-text-400"
+                          value === access.key ? "text-neutral-text-strong" : "text-neutral-text-subtle"
                         }`}
                         strokeWidth={2}
                       />
diff --git a/web/components/pages/pages-list/list-item.tsx b/web/components/pages/pages-list/list-item.tsx
index 59305bc51..8ad6f6f26 100644
--- a/web/components/pages/pages-list/list-item.tsx
+++ b/web/components/pages/pages-list/list-item.tsx
@@ -155,11 +155,11 @@ export const PagesListItem: FC<IPagesListItem> = observer(({ pageId, projectId }
       <DeletePageModal isOpen={deletePageModal} onClose={() => setDeletePageModal(false)} pageId={pageId} />
       <li>
         <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${pageId}`}>
-          <div className="relative rounded p-4 text-custom-text-200 hover:bg-neutral-component-surface-dark">
+          <div className="relative rounded p-4 text-neutral-text-medium hover:bg-neutral-component-surface-dark">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2 overflow-hidden">
                 <FileText className="h-4 w-4 shrink-0" />
-                <p className="mr-2 truncate text-sm text-custom-text-100">{name}</p>
+                <p className="mr-2 truncate text-sm text-neutral-text-strong">{name}</p>
                 {label_details.length > 0 &&
                   label_details.map((label: IIssueLabel) => (
                     <div
@@ -186,7 +186,7 @@ export const PagesListItem: FC<IPagesListItem> = observer(({ pageId, projectId }
                       archived_at
                     )}`}
                   >
-                    <p className="text-sm text-custom-text-200">{renderFormattedTime(archived_at)}</p>
+                    <p className="text-sm text-neutral-text-medium">{renderFormattedTime(archived_at)}</p>
                   </Tooltip>
                 ) : (
                   <Tooltip
@@ -194,7 +194,7 @@ export const PagesListItem: FC<IPagesListItem> = observer(({ pageId, projectId }
                       updated_at
                     )}`}
                   >
-                    <p className="text-sm text-custom-text-200">{renderFormattedTime(updated_at)}</p>
+                    <p className="text-sm text-neutral-text-medium">{renderFormattedTime(updated_at)}</p>
                   </Tooltip>
                 )}
                 {isEditingAllowed && (
diff --git a/web/components/profile/overview/activity.tsx b/web/components/profile/overview/activity.tsx
index ab866a244..0ca29b337 100644
--- a/web/components/profile/overview/activity.tsx
+++ b/web/components/profile/overview/activity.tsx
@@ -58,8 +58,8 @@ export const ProfileActivity = observer(() => {
                     )}
                   </div>
                   <div className="-mt-1 w-4/5 break-words">
-                    <p className="text-sm text-custom-text-200">
-                      <span className="font-medium text-custom-text-100">
+                    <p className="text-sm text-neutral-text-medium">
+                      <span className="font-medium text-neutral-text-strong">
                         {currentUser?.id === activity.actor_detail.id ? "You" : activity.actor_detail.display_name}{" "}
                       </span>
                       {activity.field ? (
@@ -70,7 +70,7 @@ export const ProfileActivity = observer(() => {
                         </span>
                       )}
                     </p>
-                    <p className="text-xs text-custom-text-200">{calculateTimeAgo(activity.created_at)}</p>
+                    <p className="text-xs text-neutral-text-medium">{calculateTimeAgo(activity.created_at)}</p>
                   </div>
                 </div>
               ))}
diff --git a/web/components/profile/overview/priority-distribution.tsx b/web/components/profile/overview/priority-distribution.tsx
index 11c80a546..5ddec8ce6 100644
--- a/web/components/profile/overview/priority-distribution.tsx
+++ b/web/components/profile/overview/priority-distribution.tsx
@@ -37,7 +37,7 @@ export const ProfilePriorityDistribution: React.FC<Props> = ({ userProfile }) =>
                     backgroundColor: datum.color,
                   }}
                 />
-                <span className="font-medium text-custom-text-200">{datum.data.priority}:</span>
+                <span className="font-medium text-neutral-text-medium">{datum.data.priority}:</span>
                 <span>{datum.value}</span>
               </div>
             )}
diff --git a/web/components/profile/overview/state-distribution.tsx b/web/components/profile/overview/state-distribution.tsx
index 2bfe9309e..83e22cc6b 100644
--- a/web/components/profile/overview/state-distribution.tsx
+++ b/web/components/profile/overview/state-distribution.tsx
@@ -42,7 +42,7 @@ export const ProfileStateDistribution: React.FC<Props> = ({ stateDistribution, u
                 colors={(datum) => datum.data.color}
                 tooltip={(datum) => (
                   <div className="flex items-center gap-2 rounded-md border border-neutral-border-medium bg-neutral-component-surface-medium p-2 text-xs">
-                    <span className="capitalize text-custom-text-200">{datum.datum.label} issues:</span>{" "}
+                    <span className="capitalize text-neutral-text-medium">{datum.datum.label} issues:</span>{" "}
                     {datum.datum.value}
                   </div>
                 )}
diff --git a/web/components/profile/overview/stats.tsx b/web/components/profile/overview/stats.tsx
index fba62d320..25282b8d6 100644
--- a/web/components/profile/overview/stats.tsx
+++ b/web/components/profile/overview/stats.tsx
@@ -48,7 +48,7 @@ export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
                   <card.icon className="h-5 w-5" />
                 </div>
                 <div className="space-y-1">
-                  <p className="text-sm text-custom-text-400">{card.title}</p>
+                  <p className="text-sm text-neutral-text-subtle">{card.title}</p>
                   <p className="text-xl font-semibold">{card.value}</p>
                 </div>
               </span>
diff --git a/web/components/profile/overview/workload.tsx b/web/components/profile/overview/workload.tsx
index 45dbcb244..868e9cf76 100644
--- a/web/components/profile/overview/workload.tsx
+++ b/web/components/profile/overview/workload.tsx
@@ -21,7 +21,7 @@ export const ProfileWorkload: React.FC<Props> = ({ stateDistribution }) => (
               }}
             />
             <div className="-mt-1 space-y-1">
-              <p className="text-sm capitalize text-custom-text-400">
+              <p className="text-sm capitalize text-neutral-text-subtle">
                 {group.state_group === "unstarted"
                   ? "Not Started"
                   : group.state_group === "started"
diff --git a/web/components/profile/preferences/email-notification-form.tsx b/web/components/profile/preferences/email-notification-form.tsx
index 21fced227..d1317126d 100644
--- a/web/components/profile/preferences/email-notification-form.tsx
+++ b/web/components/profile/preferences/email-notification-form.tsx
@@ -57,19 +57,19 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
     <>
       <div className="flex gap-2 items-center pt-6 mb-2 pb-6 border-b border-neutral-border-subtle">
         <div className="grow">
-          <div className="pb-1 text-xl font-medium text-custom-text-100">Email notifications</div>
-          <div className="text-sm font-normal text-custom-text-300">
+          <div className="pb-1 text-xl font-medium text-neutral-text-strong">Email notifications</div>
+          <div className="text-sm font-normal text-neutral-text-medium">
             Stay in the loop on Issues you are subscribed to. Enable this to get notified.
           </div>
         </div>
       </div>
-      <div className="pt-2 text-lg font-medium text-custom-text-100">Notify me when:</div>
+      <div className="pt-2 text-lg font-medium text-neutral-text-strong">Notify me when:</div>
       {/* Notification Settings */}
       <div className="flex flex-col py-2">
         <div className="flex gap-2 items-center pt-6">
           <div className="grow">
-            <div className="pb-1 text-base font-medium text-custom-text-100">Property changes</div>
-            <div className="text-sm font-normal text-custom-text-300">
+            <div className="pb-1 text-base font-medium text-neutral-text-strong">Property changes</div>
+            <div className="text-sm font-normal text-neutral-text-medium">
               Notify me when issue’s properties like assignees, priority, estimates or anything else changes.
             </div>
           </div>
@@ -90,8 +90,8 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
         </div>
         <div className="flex gap-2 items-center pt-6 pb-2">
           <div className="grow">
-            <div className="pb-1 text-base font-medium text-custom-text-100">State Change</div>
-            <div className="text-sm font-normal text-custom-text-300">
+            <div className="pb-1 text-base font-medium text-neutral-text-strong">State Change</div>
+            <div className="text-sm font-normal text-neutral-text-medium">
               Notify me when the issues moves to a different state
             </div>
           </div>
@@ -115,8 +115,10 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
         </div>
         <div className="flex gap-2 items-center border-0 border-l-[3px] border-neutral-border-medium pl-3">
           <div className="grow">
-            <div className="pb-1 text-base font-medium text-custom-text-100">Issue completed</div>
-            <div className="text-sm font-normal text-custom-text-300">Notify me only when an issue is completed</div>
+            <div className="pb-1 text-base font-medium text-neutral-text-strong">Issue completed</div>
+            <div className="text-sm font-normal text-neutral-text-medium">
+              Notify me only when an issue is completed
+            </div>
           </div>
           <div className="shrink-0">
             <Controller
@@ -135,8 +137,8 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
         </div>
         <div className="flex gap-2 items-center pt-6">
           <div className="grow">
-            <div className="pb-1 text-base font-medium text-custom-text-100">Comments</div>
-            <div className="text-sm font-normal text-custom-text-300">
+            <div className="pb-1 text-base font-medium text-neutral-text-strong">Comments</div>
+            <div className="text-sm font-normal text-neutral-text-medium">
               Notify me when someone leaves a comment on the issue
             </div>
           </div>
@@ -157,8 +159,8 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
         </div>
         <div className="flex gap-2 items-center pt-6">
           <div className="grow">
-            <div className="pb-1 text-base font-medium text-custom-text-100">Mentions</div>
-            <div className="text-sm font-normal text-custom-text-300">
+            <div className="pb-1 text-base font-medium text-neutral-text-strong">Mentions</div>
+            <div className="text-sm font-normal text-neutral-text-medium">
               Notify me only when someone mentions me in the comments or description
             </div>
           </div>
diff --git a/web/components/profile/sidebar.tsx b/web/components/profile/sidebar.tsx
index a1a0671cd..992e0c828 100644
--- a/web/components/profile/sidebar.tsx
+++ b/web/components/profile/sidebar.tsx
@@ -76,7 +76,7 @@ export const ProfileSidebar = observer(() => {
                   className="h-full w-full rounded object-cover"
                 />
               ) : (
-                <div className="flex h-[52px] w-[52px] items-center justify-center rounded bg-neutral-component-surface-medium text-custom-text-100 capitalize">
+                <div className="flex h-[52px] w-[52px] items-center justify-center rounded bg-neutral-component-surface-medium text-neutral-text-strong capitalize">
                   {userProjectsData.user_data.first_name?.[0]}
                 </div>
               )}
@@ -87,12 +87,12 @@ export const ProfileSidebar = observer(() => {
               <h4 className="text-lg font-semibold">
                 {userProjectsData.user_data.first_name} {userProjectsData.user_data.last_name}
               </h4>
-              <h6 className="text-sm text-custom-text-200">({userProjectsData.user_data.display_name})</h6>
+              <h6 className="text-sm text-neutral-text-medium">({userProjectsData.user_data.display_name})</h6>
             </div>
             <div className="mt-6 space-y-5">
               {userDetails.map((detail) => (
                 <div key={detail.label} className="flex items-center gap-4 text-sm">
-                  <div className="w-2/5 flex-shrink-0 text-custom-text-200">{detail.label}</div>
+                  <div className="w-2/5 flex-shrink-0 text-neutral-text-medium">{detail.label}</div>
                   <div className="w-3/5 break-words font-medium">{detail.value}</div>
                 </div>
               ))}
@@ -122,7 +122,7 @@ export const ProfileSidebar = observer(() => {
                                 {renderEmoji(project.icon_prop)}
                               </div>
                             ) : (
-                              <div className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-neutral-component-surface-medium text-xs uppercase text-custom-text-100">
+                              <div className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-neutral-component-surface-medium text-xs uppercase text-neutral-text-strong">
                                 {project?.name.charAt(0)}
                               </div>
                             )}
@@ -189,7 +189,7 @@ export const ProfileSidebar = observer(() => {
                                 />
                               </div>
                             )}
-                            <div className="mt-7 space-y-5 text-sm text-custom-text-200">
+                            <div className="mt-7 space-y-5 text-sm text-neutral-text-medium">
                               <div className="flex items-center justify-between gap-2">
                                 <div className="flex items-center gap-2">
                                   <div className="h-2.5 w-2.5 rounded-sm bg-[#203b80]" />
diff --git a/web/components/profile/time.tsx b/web/components/profile/time.tsx
index a1b740410..402a3af30 100644
--- a/web/components/profile/time.tsx
+++ b/web/components/profile/time.tsx
@@ -21,7 +21,7 @@ export const ProfileSidebarTime: React.FC<Props> = (props) => {
 
   return (
     <span>
-      {timeString} <span className="text-custom-text-200">{timeZone}</span>
+      {timeString} <span className="text-neutral-text-medium">{timeZone}</span>
     </span>
   );
 };
diff --git a/web/components/project/card-list.tsx b/web/components/project/card-list.tsx
index e7601ce35..5ef0d646d 100644
--- a/web/components/project/card-list.tsx
+++ b/web/components/project/card-list.tsx
@@ -43,7 +43,7 @@ export const ProjectCardList = observer(() => {
       {workspaceProjectIds.length > 0 ? (
         <div className="h-full w-full overflow-y-auto p-8">
           {searchedProjects.length == 0 ? (
-            <div className="mt-10 w-full text-center text-custom-text-400">No matching projects</div>
+            <div className="mt-10 w-full text-center text-neutral-text-subtle">No matching projects</div>
           ) : (
             <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
               {searchedProjects.map((projectId) => {
diff --git a/web/components/project/card.tsx b/web/components/project/card.tsx
index 648e2f968..ed7520e3d 100644
--- a/web/components/project/card.tsx
+++ b/web/components/project/card.tsx
@@ -170,7 +170,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
         </div>
 
         <div className="flex h-[104px] w-full flex-col justify-between rounded-b p-4">
-          <p className="line-clamp-2 break-words text-sm text-custom-text-300">{project.description}</p>
+          <p className="line-clamp-2 break-words text-sm text-neutral-text-medium">{project.description}</p>
           <div className="item-center flex justify-between">
             <Tooltip
               tooltipHeading="Members"
@@ -180,7 +180,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
               position="top"
             >
               {projectMembersIds && projectMembersIds.length > 0 ? (
-                <div className="flex cursor-pointer items-center gap-2 text-custom-text-200">
+                <div className="flex cursor-pointer items-center gap-2 text-neutral-text-medium">
                   <AvatarGroup showTooltip={false}>
                     {projectMembersIds.map((memberId) => {
                       const member = project.members?.find((m) => m.member_id === memberId);
@@ -192,12 +192,12 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
                   </AvatarGroup>
                 </div>
               ) : (
-                <span className="text-sm italic text-custom-text-400">No Member Yet</span>
+                <span className="text-sm italic text-neutral-text-subtle">No Member Yet</span>
               )}
             </Tooltip>
             {(isOwner || isMember) && (
               <Link
-                className="flex items-center justify-center rounded p-1 text-custom-text-400 hover:bg-neutral-component-surface-dark hover:text-custom-text-200"
+                className="flex items-center justify-center rounded p-1 text-neutral-text-subtle hover:bg-neutral-component-surface-dark hover:text-neutral-text-medium"
                 onClick={(e) => {
                   e.stopPropagation();
                 }}
diff --git a/web/components/project/confirm-project-member-remove.tsx b/web/components/project/confirm-project-member-remove.tsx
index 9903e36ce..85cfb8ce0 100644
--- a/web/components/project/confirm-project-member-remove.tsx
+++ b/web/components/project/confirm-project-member-remove.tsx
@@ -71,11 +71,11 @@ export const ConfirmProjectMemberRemove: React.FC<Props> = observer((props) => {
                       <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
                     <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                         {isCurrentUser ? "Leave project?" : `Remove ${data?.display_name}?`}
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
+                        <p className="text-sm text-neutral-text-medium">
                           Are you sure you want to remove member-{" "}
                           <span className="font-bold">{data?.display_name}</span>? They will no longer have access to
                           this project. This action cannot be undone.
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index 98ccfaf23..7db9b0bd0 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -365,7 +365,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                                       {currentNetwork.label}
                                     </>
                                   ) : (
-                                    <span className="text-custom-text-400">Select Network</span>
+                                    <span className="text-neutral-text-subtle">Select Network</span>
                                   )}
                                 </div>
                               }
diff --git a/web/components/project/delete-project-modal.tsx b/web/components/project/delete-project-modal.tsx
index 411048bc4..ccea4eb5f 100644
--- a/web/components/project/delete-project-modal.tsx
+++ b/web/components/project/delete-project-modal.tsx
@@ -131,16 +131,16 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
                     </span>
                   </div>
                   <span>
-                    <p className="text-sm leading-7 text-custom-text-200">
+                    <p className="text-sm leading-7 text-neutral-text-medium">
                       Are you sure you want to delete project{" "}
                       <span className="break-words font-semibold">{project?.name}</span>? All of the data related to the
                       project will be permanently removed. This action cannot be undone
                     </p>
                   </span>
-                  <div className="text-custom-text-200">
+                  <div className="text-neutral-text-medium">
                     <p className="break-words text-sm ">
-                      Enter the project name <span className="font-medium text-custom-text-100">{project?.name}</span>{" "}
-                      to continue:
+                      Enter the project name{" "}
+                      <span className="font-medium text-neutral-text-strong">{project?.name}</span> to continue:
                     </p>
                     <Controller
                       control={control}
@@ -161,9 +161,9 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
                       )}
                     />
                   </div>
-                  <div className="text-custom-text-200">
+                  <div className="text-neutral-text-medium">
                     <p className="text-sm">
-                      To confirm, type <span className="font-medium text-custom-text-100">delete my project</span>{" "}
+                      To confirm, type <span className="font-medium text-neutral-text-strong">delete my project</span>{" "}
                       below:
                     </p>
                     <Controller
diff --git a/web/components/project/empty-state.tsx b/web/components/project/empty-state.tsx
index 5d0df20f2..de087a53b 100644
--- a/web/components/project/empty-state.tsx
+++ b/web/components/project/empty-state.tsx
@@ -32,7 +32,7 @@ export const EmptyState: React.FC<Props> = ({
     </div>
     <div className="absolute flex w-full flex-col items-center pt-[30vh] text-center md:pt-[35vh] lg:pt-[45vh]">
       <h6 className="mt-6 text-xl font-semibold">{title}</h6>
-      {description && <p className="mb-7 text-custom-text-300">{description}</p>}
+      {description && <p className="mb-7 text-neutral-text-medium">{description}</p>}
       <div className="flex items-center gap-4">
         {primaryButton && (
           <Button
diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
index 99e30c92b..adecbae14 100644
--- a/web/components/project/form.tsx
+++ b/web/components/project/form.tsx
@@ -314,7 +314,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
             <Button variant="primary" type="submit" loading={isLoading} disabled={!isAdmin}>
               {isLoading ? "Updating..." : "Update project"}
             </Button>
-            <span className="text-sm italic text-custom-sidebar-text-400">
+            <span className="text-sm italic text-sidebar-neutral-text-subtle">
               Created on {renderFormattedDate(project?.created_at)}
             </span>
           </>
diff --git a/web/components/project/integration-card.tsx b/web/components/project/integration-card.tsx
index 7fd0d9975..d37c3a815 100644
--- a/web/components/project/integration-card.tsx
+++ b/web/components/project/integration-card.tsx
@@ -100,7 +100,7 @@ export const IntegrationCard: React.FC<Props> = ({ integration }) => {
             </div>
             <div>
               <h3 className="flex items-center gap-4 text-sm font-medium">{integration.integration_detail.title}</h3>
-              <p className="text-sm tracking-tight text-custom-text-200">
+              <p className="text-sm tracking-tight text-neutral-text-medium">
                 {integrationDetails[integration.integration_detail.provider].description}
               </p>
             </div>
diff --git a/web/components/project/join-project-modal.tsx b/web/components/project/join-project-modal.tsx
index 293728a8d..dc73c13ac 100644
--- a/web/components/project/join-project-modal.tsx
+++ b/web/components/project/join-project-modal.tsx
@@ -70,7 +70,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
             >
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-component-surface-light px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
-                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                     Join Project?
                   </Dialog.Title>
                   <p>
diff --git a/web/components/project/leave-project-modal.tsx b/web/components/project/leave-project-modal.tsx
index 7302a31d9..6ac5b0d13 100644
--- a/web/components/project/leave-project-modal.tsx
+++ b/web/components/project/leave-project-modal.tsx
@@ -138,17 +138,17 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
                   </div>
 
                   <span>
-                    <p className="text-sm leading-7 text-custom-text-200">
+                    <p className="text-sm leading-7 text-neutral-text-medium">
                       Are you sure you want to leave the project -
-                      <span className="font-medium text-custom-text-100">{` "${project?.name}" `}</span>? All of the
+                      <span className="font-medium text-neutral-text-strong">{` "${project?.name}" `}</span>? All of the
                       issues associated with you will become inaccessible.
                     </p>
                   </span>
 
-                  <div className="text-custom-text-200">
+                  <div className="text-neutral-text-medium">
                     <p className="break-words text-sm ">
-                      Enter the project name <span className="font-medium text-custom-text-100">{project?.name}</span>{" "}
-                      to continue:
+                      Enter the project name{" "}
+                      <span className="font-medium text-neutral-text-strong">{project?.name}</span> to continue:
                     </p>
                     <Controller
                       control={control}
@@ -172,9 +172,10 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
                     />
                   </div>
 
-                  <div className="text-custom-text-200">
+                  <div className="text-neutral-text-medium">
                     <p className="text-sm">
-                      To confirm, type <span className="font-medium text-custom-text-100">Leave Project</span> below:
+                      To confirm, type <span className="font-medium text-neutral-text-strong">Leave Project</span>{" "}
+                      below:
                     </p>
                     <Controller
                       control={control}
diff --git a/web/components/project/member-list-item.tsx b/web/components/project/member-list-item.tsx
index af36764a0..fbde14039 100644
--- a/web/components/project/member-list-item.tsx
+++ b/web/components/project/member-list-item.tsx
@@ -107,11 +107,11 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
               </span>
             </Link>
             <div className="flex items-center">
-              <p className="text-xs text-custom-text-300">{userDetails.member.display_name}</p>
+              <p className="text-xs text-neutral-text-medium">{userDetails.member.display_name}</p>
               {isAdmin && (
                 <>
-                  <Dot height={16} width={16} className="text-custom-text-300" />
-                  <p className="text-xs text-custom-text-300">{userDetails.member.email}</p>
+                  <Dot height={16} width={16} className="text-neutral-text-medium" />
+                  <p className="text-xs text-neutral-text-medium">{userDetails.member.email}</p>
                 </>
               )}
             </div>
@@ -124,7 +124,7 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
               <div className="item-center flex gap-1 rounded px-2 py-0.5">
                 <span
                   className={`flex items-center rounded text-xs font-medium ${
-                    userDetails.member.id !== currentUser?.id ? "" : "text-custom-text-400"
+                    userDetails.member.id !== currentUser?.id ? "" : "text-neutral-text-subtle"
                   }`}
                 >
                   {ROLE[userDetails.role]}
diff --git a/web/components/project/member-list.tsx b/web/components/project/member-list.tsx
index 8245cd5c1..d65e32b5a 100644
--- a/web/components/project/member-list.tsx
+++ b/web/components/project/member-list.tsx
@@ -35,7 +35,7 @@ export const ProjectMemberList: React.FC = observer(() => {
 
       <div className="flex items-center justify-between gap-4 border-b border-neutral-border-subtle py-3.5">
         <h4 className="text-xl font-medium">Members</h4>
-        <div className="ml-auto flex items-center justify-start gap-1 rounded-md border border-neutral-border-medium bg-neutral-component-surface-light px-2.5 py-1.5 text-custom-text-400">
+        <div className="ml-auto flex items-center justify-start gap-1 rounded-md border border-neutral-border-medium bg-neutral-component-surface-light px-2.5 py-1.5 text-neutral-text-subtle">
           <Search className="h-3.5 w-3.5" />
           <input
             className="w-full max-w-[234px] border-none bg-transparent text-sm focus:outline-none"
@@ -68,7 +68,7 @@ export const ProjectMemberList: React.FC = observer(() => {
             ? searchedMembers.map((userId) => <ProjectMemberListItem key={userId} userId={userId} />)
             : null}
           {searchedMembers.length === 0 && (
-            <h4 className="text-sm mt-16 text-center text-custom-text-400">No matching members</h4>
+            <h4 className="text-sm mt-16 text-center text-neutral-text-subtle">No matching members</h4>
           )}
         </div>
       )}
diff --git a/web/components/project/member-select.tsx b/web/components/project/member-select.tsx
index 7dc9b3233..c8b8b8c69 100644
--- a/web/components/project/member-select.tsx
+++ b/web/components/project/member-select.tsx
@@ -55,8 +55,8 @@ export const MemberSelect: React.FC<Props> = observer((props) => {
             selectedOption.member.display_name
           ) : (
             <div className="flex items-center gap-2">
-              <Ban className="h-3.5 w-3.5 rotate-90 text-custom-sidebar-text-400" />
-              <span className="py-0.5 text-sm text-custom-sidebar-text-400">None</span>
+              <Ban className="h-3.5 w-3.5 rotate-90 text-sidebar-neutral-text-subtle" />
+              <span className="py-0.5 text-sm text-sidebar-neutral-text-subtle">None</span>
             </div>
           )}
         </div>
@@ -71,8 +71,8 @@ export const MemberSelect: React.FC<Props> = observer((props) => {
             query: "none",
             content: (
               <div className="flex items-center gap-2">
-                <Ban className="h-3.5 w-3.5 rotate-90 text-custom-sidebar-text-400" />
-                <span className="py-0.5 text-sm text-custom-sidebar-text-400">None</span>
+                <Ban className="h-3.5 w-3.5 rotate-90 text-sidebar-neutral-text-subtle" />
+                <span className="py-0.5 text-sm text-sidebar-neutral-text-subtle">None</span>
               </div>
             ),
           },
diff --git a/web/components/project/publish-project/modal.tsx b/web/components/project/publish-project/modal.tsx
index 0cd4897e8..110d5b879 100644
--- a/web/components/project/publish-project/modal.tsx
+++ b/web/components/project/publish-project/modal.tsx
@@ -356,10 +356,10 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
                                   {viewOptions.map((option) => (
                                     <div
                                       key={option.key}
-                                      className={`relative m-1 flex cursor-pointer items-center justify-between gap-2 rounded-sm p-1 px-2 text-custom-text-200 ${
+                                      className={`relative m-1 flex cursor-pointer items-center justify-between gap-2 rounded-sm p-1 px-2 text-neutral-text-medium ${
                                         value.includes(option.key)
-                                          ? "bg-neutral-component-surface-dark text-custom-text-100"
-                                          : "hover:bg-neutral-component-surface-dark hover:text-custom-text-100"
+                                          ? "bg-neutral-component-surface-dark text-neutral-text-strong"
+                                          : "hover:bg-neutral-component-surface-dark hover:text-neutral-text-strong"
                                       }`}
                                       onClick={() => {
                                         const _views =
@@ -457,7 +457,7 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
 
                   {/* modal handlers */}
                   <div className="relative flex items-center justify-between border-t border-neutral-border-medium px-6 py-5">
-                    <div className="flex items-center gap-1 text-sm text-custom-text-400">
+                    <div className="flex items-center gap-1 text-sm text-neutral-text-subtle">
                       <Globe2 className="h-4 w-4" />
                       <div className="text-sm">Anyone with the link can access</div>
                     </div>
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index 1b950135f..4c20a2a5f 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -193,11 +193,11 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
               <Dialog.Panel className="relative transform rounded-lg bg-neutral-component-surface-light p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="space-y-5">
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                       Invite Members
                     </Dialog.Title>
                     <div className="mt-2">
-                      <p className="text-sm text-custom-text-200">Invite members to work on your project.</p>
+                      <p className="text-sm text-neutral-text-medium">Invite members to work on your project.</p>
                     </div>
 
                     <div className="mb-3 space-y-4">
@@ -215,7 +215,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                                   <CustomSearchSelect
                                     value={value}
                                     customButton={
-                                      <button className="flex w-full items-center justify-between gap-1 rounded-md border border-neutral-border-medium px-3 py-2 text-left text-sm text-custom-text-200 shadow-sm duration-300 hover:bg-neutral-component-surface-dark hover:text-custom-text-100 focus:outline-none">
+                                      <button className="flex w-full items-center justify-between gap-1 rounded-md border border-neutral-border-medium px-3 py-2 text-left text-sm text-neutral-text-medium shadow-sm duration-300 hover:bg-neutral-component-surface-dark hover:text-neutral-text-strong focus:outline-none">
                                         {value && value !== "" ? (
                                           <div className="flex items-center gap-2">
                                             <Avatar
@@ -256,7 +256,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                                   <CustomSelect
                                     {...field}
                                     customButton={
-                                      <div className="flex w-full items-center justify-between gap-1 rounded-md border border-neutral-border-medium px-3 py-2.5 text-left text-sm text-custom-text-200 shadow-sm duration-300 hover:bg-neutral-component-surface-dark hover:text-custom-text-100 focus:outline-none">
+                                      <div className="flex w-full items-center justify-between gap-1 rounded-md border border-neutral-border-medium px-3 py-2.5 text-left text-sm text-neutral-text-medium shadow-sm duration-300 hover:bg-neutral-component-surface-dark hover:text-neutral-text-strong focus:outline-none">
                                         <span className="capitalize">
                                           {field.value ? ROLE[field.value] : "Select role"}
                                         </span>
@@ -291,7 +291,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                                   className="place-items-center self-center rounded"
                                   onClick={() => remove(index)}
                                 >
-                                  <X className="h-4 w-4 text-custom-text-200" />
+                                  <X className="h-4 w-4 text-neutral-text-medium" />
                                 </button>
                               )}
                             </div>
diff --git a/web/components/project/settings/features-list.tsx b/web/components/project/settings/features-list.tsx
index 256e74c6b..60029e69e 100644
--- a/web/components/project/settings/features-list.tsx
+++ b/web/components/project/settings/features-list.tsx
@@ -87,7 +87,7 @@ export const ProjectFeaturesList: FC<Props> = observer(() => {
             </div>
             <div className="">
               <h4 className="text-sm font-medium">{feature.title}</h4>
-              <p className="text-sm tracking-tight text-custom-text-200">{feature.description}</p>
+              <p className="text-sm tracking-tight text-neutral-text-medium">{feature.description}</p>
             </div>
           </div>
           <ToggleSwitch
diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
index 91f2264d2..291277315 100644
--- a/web/components/project/sidebar-list-item.tsx
+++ b/web/components/project/sidebar-list-item.tsx
@@ -18,7 +18,7 @@ import {
   MoreHorizontal,
 } from "lucide-react";
 // hooks
-import { useApplication,useEventTracker, useProject } from "hooks/store";
+import { useApplication, useEventTracker, useProject } from "hooks/store";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 import useToast from "hooks/use-toast";
 // helpers
@@ -158,7 +158,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                 >
                   <button
                     type="button"
-                    className={`absolute -left-2.5 top-1/2 hidden -translate-y-1/2 rounded p-0.5 text-custom-sidebar-text-400 ${
+                    className={`absolute -left-2.5 top-1/2 hidden -translate-y-1/2 rounded p-0.5 text-sidebar-neutral-text-subtle ${
                       isCollapsed ? "" : "group-hover:!flex"
                     } ${project.sort_order === null ? "cursor-not-allowed opacity-60" : ""} ${
                       isMenuActive ? "!flex" : ""
@@ -196,13 +196,13 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                       </span>
                     )}
 
-                    {!isCollapsed && <p className="truncate text-custom-sidebar-text-200">{project.name}</p>}
+                    {!isCollapsed && <p className="truncate text-sidebar-neutral-text-medium">{project.name}</p>}
                   </div>
                   {!isCollapsed && (
                     <ChevronDown
                       className={`hidden h-4 w-4 flex-shrink-0 ${open ? "rotate-180" : ""} ${
                         isMenuActive ? "!block" : ""
-                      }  mb-0.5 text-custom-sidebar-text-400 duration-300 group-hover:!block`}
+                      }  mb-0.5 text-sidebar-neutral-text-subtle duration-300 group-hover:!block`}
                     />
                   )}
                 </Disclosure.Button>
@@ -213,14 +213,14 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   customButton={
                     <div
                       ref={actionSectionRef}
-                      className="my-auto mt-1.5 w-full cursor-pointer px-1 text-custom-sidebar-text-400 duration-300"
+                      className="my-auto mt-1.5 w-full cursor-pointer px-1 text-sidebar-neutral-text-subtle duration-300"
                       onClick={() => setIsMenuActive(!isMenuActive)}
                     >
                       <MoreHorizontal className="h-3.5 w-3.5" />
                     </div>
                   }
                   className={`hidden flex-shrink-0 group-hover:block ${isMenuActive ? "!block" : ""}`}
-                  buttonClassName="!text-custom-sidebar-text-400"
+                  buttonClassName="!text-sidebar-neutral-text-subtle"
                   ellipsis
                   placement="bottom-start"
                 >
@@ -251,7 +251,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   {isAdmin && (
                     <CustomMenu.MenuItem onClick={() => setPublishModal(true)}>
                       <div className="relative flex flex-shrink-0 items-center justify-start gap-2">
-                        <div className="flex h-4 w-4 cursor-pointer items-center justify-center rounded text-custom-sidebar-text-200 transition-all duration-300 hover:bg-sidebar-neutral-component-surface-dark">
+                        <div className="flex h-4 w-4 cursor-pointer items-center justify-center rounded text-sidebar-neutral-text-medium transition-all duration-300 hover:bg-sidebar-neutral-component-surface-dark">
                           <Share2 className="h-3.5 w-3.5 stroke-[1.5]" />
                         </div>
                         <div>{project.is_deployed ? "Publish settings" : "Publish"}</div>
@@ -272,7 +272,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   <CustomMenu.MenuItem>
                     <Link href={`/${workspaceSlug}/projects/${project?.id}/draft-issues/`}>
                       <div className="flex items-center justify-start gap-2">
-                        <PenSquare className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
+                        <PenSquare className="h-3.5 w-3.5 stroke-[1.5] text-neutral-text-medium" />
                         <span>Draft Issues</span>
                       </div>
                     </Link>
@@ -329,7 +329,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                             className={`group flex items-center gap-2.5 rounded-md px-2 py-1.5 text-xs font-medium outline-none ${
                               router.asPath.includes(item.href)
                                 ? "bg-primary-component-surface-light text-primary-text-subtle"
-                                : "text-custom-sidebar-text-300 hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
+                                : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
                             } ${isCollapsed ? "justify-center" : ""}`}
                           >
                             <item.Icon className="h-4 w-4 stroke-[1.5]" />
diff --git a/web/components/project/sidebar-list.tsx b/web/components/project/sidebar-list.tsx
index 26428e0a2..338ebdad2 100644
--- a/web/components/project/sidebar-list.tsx
+++ b/web/components/project/sidebar-list.tsx
@@ -122,11 +122,11 @@ export const ProjectSidebarList: FC = observer(() => {
                     {({ open }) => (
                       <>
                         {!isCollapsed && (
-                          <div className="group flex w-full items-center justify-between rounded p-1.5 text-xs text-custom-sidebar-text-400 hover:bg-sidebar-neutral-component-surface-dark">
+                          <div className="group flex w-full items-center justify-between rounded p-1.5 text-xs text-sidebar-neutral-text-subtle hover:bg-sidebar-neutral-component-surface-dark">
                             <Disclosure.Button
                               as="button"
                               type="button"
-                              className="group flex w-full items-center gap-1 whitespace-nowrap rounded px-1.5 text-left text-sm font-semibold text-custom-sidebar-text-400 hover:bg-sidebar-neutral-component-surface-dark"
+                              className="group flex w-full items-center gap-1 whitespace-nowrap rounded px-1.5 text-left text-sm font-semibold text-sidebar-neutral-text-subtle hover:bg-sidebar-neutral-component-surface-dark"
                             >
                               Favorites
                               {open ? (
@@ -200,11 +200,11 @@ export const ProjectSidebarList: FC = observer(() => {
                     {({ open }) => (
                       <>
                         {!isCollapsed && (
-                          <div className="group flex w-full items-center justify-between rounded p-1.5 text-xs text-custom-sidebar-text-400 hover:bg-sidebar-neutral-component-surface-dark">
+                          <div className="group flex w-full items-center justify-between rounded p-1.5 text-xs text-sidebar-neutral-text-subtle hover:bg-sidebar-neutral-component-surface-dark">
                             <Disclosure.Button
                               as="button"
                               type="button"
-                              className="group flex w-full items-center gap-1 whitespace-nowrap rounded px-1.5 text-left text-sm font-semibold text-custom-sidebar-text-400 hover:bg-sidebar-neutral-component-surface-dark"
+                              className="group flex w-full items-center gap-1 whitespace-nowrap rounded px-1.5 text-left text-sm font-semibold text-sidebar-neutral-text-subtle hover:bg-sidebar-neutral-component-surface-dark"
                             >
                               Your projects
                               {open ? (
@@ -266,7 +266,7 @@ export const ProjectSidebarList: FC = observer(() => {
         {isAuthorizedUser && joinedProjects && joinedProjects.length === 0 && (
           <button
             type="button"
-            className="flex w-full items-center gap-2 px-3 text-sm text-custom-sidebar-text-200"
+            className="flex w-full items-center gap-2 px-3 text-sm text-sidebar-neutral-text-medium"
             onClick={() => {
               setTrackElement("Sidebar");
               toggleCreateProjectModal(true);
diff --git a/web/components/states/create-state-modal.tsx b/web/components/states/create-state-modal.tsx
index 423623df9..c47f1bcde 100644
--- a/web/components/states/create-state-modal.tsx
+++ b/web/components/states/create-state-modal.tsx
@@ -119,7 +119,7 @@ export const CreateStateModal: React.FC<Props> = observer((props) => {
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-component-surface-light px-4 pb-4 pt-5 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                       Create State
                     </Dialog.Title>
                     <div className="mt-2 space-y-3">
@@ -132,7 +132,7 @@ export const CreateStateModal: React.FC<Props> = observer((props) => {
                           }}
                           render={({ field: { value, onChange, ref } }) => (
                             <>
-                              <label htmlFor="name" className="mb-2 text-custom-text-200">
+                              <label htmlFor="name" className="mb-2 text-neutral-text-medium">
                                 Name
                               </label>
                               <Input
@@ -177,8 +177,8 @@ export const CreateStateModal: React.FC<Props> = observer((props) => {
                           {({ open }) => (
                             <>
                               <Popover.Button
-                                className={`group inline-flex items-center rounded-md bg-neutral-component-surface-light 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"
+                                className={`group inline-flex items-center rounded-md bg-neutral-component-surface-light text-base font-medium hover:text-neutral-text-strong focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
+                                  open ? "text-neutral-text-strong" : "text-neutral-text-medium"
                                 }`}
                               >
                                 <span>Color</span>
@@ -191,7 +191,7 @@ export const CreateStateModal: React.FC<Props> = observer((props) => {
                                   />
                                 )}
                                 <ChevronDown
-                                  className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
+                                  className={`ml-2 h-5 w-5 group-hover:text-neutral-text-medium ${
                                     open ? "text-gray-600" : "text-gray-400"
                                   }`}
                                   aria-hidden="true"
@@ -222,7 +222,7 @@ export const CreateStateModal: React.FC<Props> = observer((props) => {
                         </Popover>
                       </div>
                       <div>
-                        <label htmlFor="description" className="mb-2 text-custom-text-200">
+                        <label htmlFor="description" className="mb-2 text-neutral-text-medium">
                           Description
                         </label>
                         <Controller
diff --git a/web/components/states/create-update-state-inline.tsx b/web/components/states/create-update-state-inline.tsx
index 268d23378..d9f23e631 100644
--- a/web/components/states/create-update-state-inline.tsx
+++ b/web/components/states/create-update-state-inline.tsx
@@ -161,7 +161,7 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
             <>
               <Popover.Button
                 className={`group inline-flex items-center text-base font-medium focus:outline-none ${
-                  open ? "text-custom-text-100" : "text-custom-text-200"
+                  open ? "text-neutral-text-strong" : "text-neutral-text-medium"
                 }`}
               >
                 {watch("color") && watch("color") !== "" && (
diff --git a/web/components/states/delete-state-modal.tsx b/web/components/states/delete-state-modal.tsx
index 3fe8771c8..f73bc1b20 100644
--- a/web/components/states/delete-state-modal.tsx
+++ b/web/components/states/delete-state-modal.tsx
@@ -103,13 +103,13 @@ export const DeleteStateModal: React.FC<Props> = observer((props) => {
                       <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
                     <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                         Delete State
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
+                        <p className="text-sm text-neutral-text-medium">
                           Are you sure you want to delete state-{" "}
-                          <span className="font-medium text-custom-text-100">{data?.name}</span>? All of the data
+                          <span className="font-medium text-neutral-text-strong">{data?.name}</span>? All of the data
                           related to the state will be permanently removed. This action cannot be undone.
                         </p>
                       </div>
diff --git a/web/components/states/project-setting-state-list-item.tsx b/web/components/states/project-setting-state-list-item.tsx
index 7bf0a6b20..e7d535fc2 100644
--- a/web/components/states/project-setting-state-list-item.tsx
+++ b/web/components/states/project-setting-state-list-item.tsx
@@ -53,14 +53,14 @@ export const StatesListItem: React.FC<Props> = observer((props) => {
         <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
         <div>
           <h6 className="text-sm font-medium">{addSpaceIfCamelCase(state.name)}</h6>
-          <p className="text-xs text-custom-text-200">{state.description}</p>
+          <p className="text-xs text-neutral-text-medium">{state.description}</p>
         </div>
       </div>
       <div className="group flex items-center gap-2.5">
         {index !== 0 && (
           <button
             type="button"
-            className="hidden text-custom-text-200 group-hover:inline-block"
+            className="hidden text-neutral-text-medium group-hover:inline-block"
             onClick={() => handleMove(state, "up")}
           >
             <ArrowUp className="h-4 w-4" />
@@ -69,7 +69,7 @@ export const StatesListItem: React.FC<Props> = observer((props) => {
         {!(index === groupLength - 1) && (
           <button
             type="button"
-            className="hidden text-custom-text-200 group-hover:inline-block"
+            className="hidden text-neutral-text-medium group-hover:inline-block"
             onClick={() => handleMove(state, "down")}
           >
             <ArrowDown className="h-4 w-4" />
@@ -78,11 +78,11 @@ export const StatesListItem: React.FC<Props> = observer((props) => {
 
         <div className=" hidden items-center gap-2.5 group-hover:flex">
           {state.default ? (
-            <span className="text-xs text-custom-text-200">Default</span>
+            <span className="text-xs text-neutral-text-medium">Default</span>
           ) : (
             <button
               type="button"
-              className="hidden text-xs text-custom-sidebar-text-400 group-hover:inline-block"
+              className="hidden text-xs text-sidebar-neutral-text-subtle group-hover:inline-block"
               onClick={handleMakeDefault}
               disabled={isSubmitting}
             >
@@ -94,7 +94,7 @@ export const StatesListItem: React.FC<Props> = observer((props) => {
             className="grid place-items-center opacity-0 group-hover:opacity-100"
             onClick={handleEditState}
           >
-            <Pencil className="h-3.5 w-3.5 text-custom-text-200" />
+            <Pencil className="h-3.5 w-3.5 text-neutral-text-medium" />
           </button>
 
           <button
@@ -110,14 +110,14 @@ export const StatesListItem: React.FC<Props> = observer((props) => {
           >
             {state.default ? (
               <Tooltip tooltipContent="Cannot delete the default state.">
-                <X className={`h-4 w-4 ${groupLength < 1 ? "text-custom-sidebar-text-400" : "text-red-500"}`} />
+                <X className={`h-4 w-4 ${groupLength < 1 ? "text-sidebar-neutral-text-subtle" : "text-red-500"}`} />
               </Tooltip>
             ) : groupLength === 1 ? (
               <Tooltip tooltipContent="Cannot have an empty group.">
-                <X className={`h-4 w-4 ${groupLength < 1 ? "text-custom-sidebar-text-400" : "text-red-500"}`} />
+                <X className={`h-4 w-4 ${groupLength < 1 ? "text-sidebar-neutral-text-subtle" : "text-red-500"}`} />
               </Tooltip>
             ) : (
-              <X className={`h-4 w-4 ${groupLength < 1 ? "text-custom-sidebar-text-400" : "text-red-500"}`} />
+              <X className={`h-4 w-4 ${groupLength < 1 ? "text-sidebar-neutral-text-subtle" : "text-red-500"}`} />
             )}
           </button>
         </div>
diff --git a/web/components/states/project-setting-state-list.tsx b/web/components/states/project-setting-state-list.tsx
index 5a63098cb..f9b68d595 100644
--- a/web/components/states/project-setting-state-list.tsx
+++ b/web/components/states/project-setting-state-list.tsx
@@ -50,7 +50,7 @@ export const ProjectSettingStateList: React.FC = observer(() => {
             {Object.keys(orderedStateGroups).map((group) => (
               <div key={group} className="flex flex-col gap-2">
                 <div className="flex w-full justify-between">
-                  <h4 className="text-base font-medium capitalize text-custom-text-200">{group}</h4>
+                  <h4 className="text-base font-medium capitalize text-neutral-text-medium">{group}</h4>
                   <button
                     type="button"
                     className="flex items-center gap-2 px-2 text-custom-primary-100 outline-none hover:text-custom-primary-200"
@@ -119,7 +119,7 @@ export const ProjectSettingStateList: React.FC = observer(() => {
               return (
                 <div key={key} className="flex flex-col gap-2">
                   <div className="flex w-full justify-between">
-                    <h4 className="text-base font-medium text-custom-text-200 capitalize">{key}</h4>
+                    <h4 className="text-base font-medium text-neutral-text-medium capitalize">{key}</h4>
                     <button
                       type="button"
                       className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none"
diff --git a/web/components/ui/empty-space.tsx b/web/components/ui/empty-space.tsx
index 7b2d2237e..92dd43af9 100644
--- a/web/components/ui/empty-space.tsx
+++ b/web/components/ui/empty-space.tsx
@@ -18,12 +18,12 @@ 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-custom-text-200" />
+          <Icon className="h-14 w-14 text-neutral-text-medium" />
         </div>
       ) : null}
 
-      <h2 className="text-lg font-medium text-custom-text-100">{title}</h2>
-      <div className="mt-1 text-sm text-custom-text-200">{description}</div>
+      <h2 className="text-lg font-medium text-neutral-text-strong">{title}</h2>
+      <div className="mt-1 text-sm text-neutral-text-medium">{description}</div>
       <ul
         role="list"
         className="mt-6 divide-y divide-neutral-border-medium border-b border-t border-neutral-border-medium"
@@ -60,12 +60,15 @@ const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Ico
           <Icon className="h-6 w-6 text-white" aria-hidden="true" />
         </span>
       </div>
-      <div className="min-w-0 flex-1 text-custom-text-200">
-        <div className="text-sm font-medium group-hover:text-custom-text-100">{title}</div>
+      <div className="min-w-0 flex-1 text-neutral-text-medium">
+        <div className="text-sm font-medium group-hover:text-neutral-text-strong">{title}</div>
         {description ? <div className="text-sm">{description}</div> : null}
       </div>
       <div className="flex-shrink-0 self-center">
-        <ChevronRight className="h-5 w-5 text-custom-text-200 group-hover:text-custom-text-100" aria-hidden="true" />
+        <ChevronRight
+          className="h-5 w-5 text-neutral-text-medium group-hover:text-neutral-text-strong"
+          aria-hidden="true"
+        />
       </div>
     </div>
   );
diff --git a/web/components/ui/integration-and-import-export-banner.tsx b/web/components/ui/integration-and-import-export-banner.tsx
index 5823fb3bf..25d3065fa 100644
--- a/web/components/ui/integration-and-import-export-banner.tsx
+++ b/web/components/ui/integration-and-import-export-banner.tsx
@@ -9,8 +9,8 @@ export const IntegrationAndImportExportBanner: React.FC<Props> = ({ bannerName,
   <div className="flex items-start gap-3 border-b border-neutral-border-subtle py-3.5">
     <h3 className="text-xl font-medium">{bannerName}</h3>
     {description && (
-      <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">
-        <AlertCircle className="h-6 w-6 text-custom-text-100" />
+      <div className="flex items-center gap-3 rounded-[10px] border border-custom-primary/75 bg-custom-primary/5 p-4 text-sm text-neutral-text-strong">
+        <AlertCircle className="h-6 w-6 text-neutral-text-strong" />
         <p className="leading-5">{description}</p>
       </div>
     )}
diff --git a/web/components/ui/labels-list.tsx b/web/components/ui/labels-list.tsx
index f1d24b651..40f8cb2bd 100644
--- a/web/components/ui/labels-list.tsx
+++ b/web/components/ui/labels-list.tsx
@@ -17,7 +17,7 @@ export const IssueLabelsList: FC<IssueLabelsListProps> = (props) => {
       {labels && (
         <>
           <Tooltip position="top" tooltipHeading="Labels" tooltipContent={labels.map((l) => l?.name).join(", ")}>
-            <div className="flex items-center gap-1 rounded border-[0.5px] border-neutral-border-medium px-2 py-1 text-xs text-custom-text-200">
+            <div className="flex items-center gap-1 rounded border-[0.5px] border-neutral-border-medium px-2 py-1 text-xs text-neutral-text-medium">
               <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
               {`${labels.length} Labels`}
             </div>
diff --git a/web/components/ui/markdown-to-component.tsx b/web/components/ui/markdown-to-component.tsx
index 35b53ade6..aceec6cf5 100644
--- a/web/components/ui/markdown-to-component.tsx
+++ b/web/components/ui/markdown-to-component.tsx
@@ -34,21 +34,21 @@ interface Props {
 }
 
 const HeadingPrimary: CustomComponent = ({ children }) => (
-  <h1 className="text-lg font-semibold text-custom-text-100">{children}</h1>
+  <h1 className="text-lg font-semibold text-neutral-text-strong">{children}</h1>
 );
 
 const HeadingSecondary: CustomComponent = ({ children }) => (
-  <h3 className="text-base font-semibold text-custom-text-100">{children}</h3>
+  <h3 className="text-base font-semibold text-neutral-text-strong">{children}</h3>
 );
 
-const Paragraph: CustomComponent = ({ children }) => <p className="text-sm text-custom-text-200">{children}</p>;
+const Paragraph: CustomComponent = ({ children }) => <p className="text-sm text-neutral-text-medium">{children}</p>;
 
 const OrderedList: CustomComponent = ({ children }) => (
-  <ol className="mb-4 ml-8 list-decimal text-sm text-custom-text-200">{children}</ol>
+  <ol className="mb-4 ml-8 list-decimal text-sm text-neutral-text-medium">{children}</ol>
 );
 
 const UnorderedList: CustomComponent = ({ children }) => (
-  <ul className="mb-4 ml-8 list-disc text-sm text-custom-text-200">{children}</ul>
+  <ul className="mb-4 ml-8 list-disc text-sm text-neutral-text-medium">{children}</ul>
 );
 
 const Link: CustomComponent = ({ href, children }) => (
diff --git a/web/components/ui/multi-level-dropdown.tsx b/web/components/ui/multi-level-dropdown.tsx
index 2d378e2cc..63834d94c 100644
--- a/web/components/ui/multi-level-dropdown.tsx
+++ b/web/components/ui/multi-level-dropdown.tsx
@@ -46,8 +46,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-neutral-border-medium px-3 py-1.5 text-xs shadow-sm duration-300 hover:bg-neutral-component-surface-medium hover:text-custom-text-100 focus:outline-none ${
-                  open ? "bg-neutral-component-surface-medium text-custom-text-100" : "text-custom-text-200"
+                className={`group flex items-center justify-between gap-2 rounded-md border border-neutral-border-medium px-3 py-1.5 text-xs shadow-sm duration-300 hover:bg-neutral-component-surface-medium hover:text-neutral-text-strong focus:outline-none ${
+                  open ? "bg-neutral-component-surface-medium text-neutral-text-strong" : "text-neutral-text-medium"
                 }`}
               >
                 {label}
@@ -89,7 +89,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                           <div
                             className={`${
                               active || option.selected ? "bg-neutral-component-surface-dark" : ""
-                            } flex items-center gap-1 rounded px-1 py-1.5 text-custom-text-200 ${
+                            } flex items-center gap-1 rounded px-1 py-1.5 text-neutral-text-medium ${
                               direction === "right" ? "justify-between" : ""
                             }`}
                           >
@@ -119,7 +119,9 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                         {option.children ? (
                           <div className="space-y-1 p-1">
                             {option.children.length === 0 ? (
-                              <p className="px-1 py-1.5 text-center text-custom-text-200">No {option.label} found</p> //if no children found, show this message.
+                              <p className="px-1 py-1.5 text-center text-neutral-text-medium">
+                                No {option.label} found
+                              </p> //if no children found, show this message.
                             ) : (
                               option.children.map((child) => {
                                 if (child.element) return child.element;
@@ -131,7 +133,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                                       onClick={() => onSelect(child.value)}
                                       className={`${
                                         child.selected ? "bg-neutral-component-surface-dark" : ""
-                                      } flex w-full items-center justify-between break-words rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-neutral-component-surface-dark`}
+                                      } flex w-full items-center justify-between break-words rounded px-1 py-1.5 text-left text-neutral-text-medium hover:bg-neutral-component-surface-dark`}
                                     >
                                       {child.label}{" "}
                                       <Check
diff --git a/web/components/ui/profile-empty-state.tsx b/web/components/ui/profile-empty-state.tsx
index ebaeb4fa3..ef33df8c1 100644
--- a/web/components/ui/profile-empty-state.tsx
+++ b/web/components/ui/profile-empty-state.tsx
@@ -15,7 +15,7 @@ export const ProfileEmptyState: React.FC<Props> = ({ title, description, image }
         <Image src={image} width={32} alt={title} />
       </div>
       <h6 className="mb-3 mt-3.5 text-base font-semibold">{title}</h6>
-      {description && <p className="text-sm text-custom-text-300">{description}</p>}
+      {description && <p className="text-sm text-neutral-text-medium">{description}</p>}
     </div>
   </div>
 );
diff --git a/web/components/user/user-greetings.tsx b/web/components/user/user-greetings.tsx
index 3341ac77f..c88d39b07 100644
--- a/web/components/user/user-greetings.tsx
+++ b/web/components/user/user-greetings.tsx
@@ -41,7 +41,7 @@ export const UserGreetingsView: FC<IUserGreetingsView> = (props) => {
       <h3 className="text-xl font-semibold">
         Good {greeting}, {user?.first_name} {user?.last_name}
       </h3>
-      <h6 className="flex items-center gap-2 font-medium text-custom-text-400">
+      <h6 className="flex items-center gap-2 font-medium text-neutral-text-subtle">
         <div>{greeting === "morning" ? "🌤️" : greeting === "afternoon" ? "🌥️" : "🌙️"}</div>
         <div>
           {weekDay}, {date} {timeString}
diff --git a/web/components/views/delete-view-modal.tsx b/web/components/views/delete-view-modal.tsx
index 1d3b283ae..6a2c7de5b 100644
--- a/web/components/views/delete-view-modal.tsx
+++ b/web/components/views/delete-view-modal.tsx
@@ -94,14 +94,14 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
                       <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
                     <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                         Delete View
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
+                        <p className="text-sm text-neutral-text-medium">
                           Are you sure you want to delete view-{" "}
-                          <span className="break-all font-medium text-custom-text-100">{data?.name}</span>? All of the
-                          data related to the view will be permanently removed. This action cannot be undone.
+                          <span className="break-all font-medium text-neutral-text-strong">{data?.name}</span>? All of
+                          the data related to the view will be permanently removed. This action cannot be undone.
                         </p>
                       </div>
                     </div>
diff --git a/web/components/views/form.tsx b/web/components/views/form.tsx
index 0da7e3946..4fe4df970 100644
--- a/web/components/views/form.tsx
+++ b/web/components/views/form.tsx
@@ -109,7 +109,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateView)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{data ? "Update" : "Create"} View</h3>
+        <h3 className="text-lg font-medium leading-6 text-neutral-text-strong">{data ? "Update" : "Create"} View</h3>
         <div className="space-y-3">
           <div>
             <Controller
diff --git a/web/components/views/view-list-item.tsx b/web/components/views/view-list-item.tsx
index 1042f0836..6ce28f976 100644
--- a/web/components/views/view-list-item.tsx
+++ b/web/components/views/view-list-item.tsx
@@ -88,12 +88,14 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
                 </div>
                 <div className="flex flex-col overflow-hidden ">
                   <p className="truncate break-all text-sm font-medium  leading-4">{view.name}</p>
-                  {view?.description && <p className="break-all text-xs text-custom-text-200">{view.description}</p>}
+                  {view?.description && (
+                    <p className="break-all text-xs text-neutral-text-medium">{view.description}</p>
+                  )}
                 </div>
               </div>
               <div className="ml-2 flex flex-shrink-0">
                 <div className="flex items-center gap-4">
-                  <p className="hidden rounded bg-neutral-component-surface-dark px-2 py-1 text-xs text-custom-text-200 group-hover:block">
+                  <p className="hidden rounded bg-neutral-component-surface-dark px-2 py-1 text-xs text-neutral-text-medium group-hover:block">
                     {totalFilters} {totalFilters === 1 ? "filter" : "filters"}
                   </p>
                   {isEditingAllowed &&
diff --git a/web/components/views/views-list.tsx b/web/components/views/views-list.tsx
index a78f2ffaf..271f9a1d0 100644
--- a/web/components/views/views-list.tsx
+++ b/web/components/views/views-list.tsx
@@ -59,9 +59,9 @@ export const ProjectViewsList = observer(() => {
         <div className="flex h-full w-full flex-col">
           <div className="flex w-full flex-col overflow-hidden">
             <div className="flex w-full items-center gap-2.5 border-b border-neutral-border-medium px-5 py-3">
-              <Search className="text-custom-text-200" size={14} strokeWidth={2} />
+              <Search className="text-neutral-text-medium" size={14} strokeWidth={2} />
               <Input
-                className="w-full bg-transparent !p-0 text-xs leading-5 text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                className="w-full bg-transparent !p-0 text-xs leading-5 text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Search"
@@ -72,7 +72,7 @@ export const ProjectViewsList = observer(() => {
           {filteredViewsList.length > 0 ? (
             filteredViewsList.map((view) => <ProjectViewListItem key={view.id} view={view} />)
           ) : (
-            <p className="mt-10 text-center text-sm text-custom-text-300">No results found</p>
+            <p className="mt-10 text-center text-sm text-neutral-text-medium">No results found</p>
           )}
         </div>
       ) : (
diff --git a/web/components/web-hooks/delete-webhook-modal.tsx b/web/components/web-hooks/delete-webhook-modal.tsx
index c0913074f..65d610f04 100644
--- a/web/components/web-hooks/delete-webhook-modal.tsx
+++ b/web/components/web-hooks/delete-webhook-modal.tsx
@@ -90,7 +90,7 @@ export const DeleteWebhookModal: FC<IDeleteWebhook> = (props) => {
                   </span>
                 </div>
 
-                <p className="mt-4 text-sm text-custom-text-200">
+                <p className="mt-4 text-sm text-neutral-text-medium">
                   Are you sure you want to delete this webhook? Future events will not be delivered to this webhook.
                   This action cannot be undone.
                 </p>
diff --git a/web/components/web-hooks/empty-state.tsx b/web/components/web-hooks/empty-state.tsx
index 0746e4c8b..0a0a97bb8 100644
--- a/web/components/web-hooks/empty-state.tsx
+++ b/web/components/web-hooks/empty-state.tsx
@@ -18,7 +18,7 @@ export const WebhooksEmptyState: React.FC<Props> = (props) => {
       <div className="flex w-full flex-col items-center text-center">
         <Image src={EmptyWebhook} className="w-52 sm:w-60" alt="empty" />
         <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">No webhooks</h6>
-        <p className="mb-7 text-custom-text-300 sm:mb-8">
+        <p className="mb-7 text-neutral-text-medium sm:mb-8">
           Create webhooks to receive real-time updates and automate actions
         </p>
         <Button className="flex items-center gap-1.5" onClick={onClick}>
diff --git a/web/components/web-hooks/form/individual-event-options.tsx b/web/components/web-hooks/form/individual-event-options.tsx
index 290e85c00..424df835b 100644
--- a/web/components/web-hooks/form/individual-event-options.tsx
+++ b/web/components/web-hooks/form/individual-event-options.tsx
@@ -58,7 +58,7 @@ export const WebhookIndividualEventOptions = ({ control }: Props) => (
                 {option.label}
               </label>
             </div>
-            <p className="ml-6 mt-0.5 text-xs text-custom-text-300">{option.description}</p>
+            <p className="ml-6 mt-0.5 text-xs text-neutral-text-medium">{option.description}</p>
           </div>
         )}
       />
diff --git a/web/components/web-hooks/form/secret-key.tsx b/web/components/web-hooks/form/secret-key.tsx
index 61811c016..92eeab70f 100644
--- a/web/components/web-hooks/form/secret-key.tsx
+++ b/web/components/web-hooks/form/secret-key.tsx
@@ -92,7 +92,7 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
       {(data || webhookSecretKey) && (
         <div className="space-y-2">
           {webhookId && <div className="text-sm font-medium">Secret key</div>}
-          <div className="text-xs text-custom-text-400">Generate a token to sign-in to the webhook payload</div>
+          <div className="text-xs text-neutral-text-subtle">Generate a token to sign-in to the webhook payload</div>
           <div className="flex items-center gap-4">
             <div className="flex flex-grow max-w-lg items-center justify-between self-stretch rounded border border-neutral-border-medium px-2 py-1.5">
               <div className="select-none overflow-hidden font-medium">
@@ -111,7 +111,7 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
                   {SECRET_KEY_OPTIONS.map((option) => (
                     <Tooltip key={option.key} tooltipContent={option.label}>
                       <button type="button" className="grid flex-shrink-0 place-items-center" onClick={option.onClick}>
-                        <option.Icon className="h-3 w-3 text-custom-text-400" />
+                        <option.Icon className="h-3 w-3 text-neutral-text-subtle" />
                       </button>
                     </Tooltip>
                   ))}
diff --git a/web/components/web-hooks/generated-hook-details.tsx b/web/components/web-hooks/generated-hook-details.tsx
index ce78fa5d5..30a4d03e4 100644
--- a/web/components/web-hooks/generated-hook-details.tsx
+++ b/web/components/web-hooks/generated-hook-details.tsx
@@ -16,8 +16,8 @@ export const GeneratedHookDetails: React.FC<Props> = (props) => {
   return (
     <div>
       <div className="space-y-3 mb-3">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">Key created</h3>
-        <p className="text-sm text-custom-text-400">
+        <h3 className="text-lg font-medium leading-6 text-neutral-text-strong">Key created</h3>
+        <p className="text-sm text-neutral-text-subtle">
           Copy and save this secret key in Plane Pages. You can{"'"}t see this key after you hit Close. A CSV file
           containing the key has been downloaded.
         </p>
diff --git a/web/components/workspace/confirm-workspace-member-remove.tsx b/web/components/workspace/confirm-workspace-member-remove.tsx
index 97da07a26..2247a095a 100644
--- a/web/components/workspace/confirm-workspace-member-remove.tsx
+++ b/web/components/workspace/confirm-workspace-member-remove.tsx
@@ -70,19 +70,19 @@ export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) =>
                       <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
                     <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                         {currentUser?.id === userDetails.id
                           ? "Leave workspace?"
                           : `Remove ${userDetails.display_name}?`}
                       </Dialog.Title>
                       <div className="mt-2">
                         {currentUser?.id === userDetails.id ? (
-                          <p className="text-sm text-custom-text-200">
+                          <p className="text-sm text-neutral-text-medium">
                             Are you sure you want to leave the workspace? You will no longer have access to this
                             workspace. This action cannot be undone.
                           </p>
                         ) : (
-                          <p className="text-sm text-custom-text-200">
+                          <p className="text-sm text-neutral-text-medium">
                             Are you sure you want to remove member-{" "}
                             <span className="font-bold">{userDetails.display_name}</span>? They will no longer have
                             access to this workspace. This action cannot be undone.
diff --git a/web/components/workspace/create-workspace-form.tsx b/web/components/workspace/create-workspace-form.tsx
index b711a5bbd..5b3a39665 100644
--- a/web/components/workspace/create-workspace-form.tsx
+++ b/web/components/workspace/create-workspace-form.tsx
@@ -152,7 +152,9 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
         <div className="space-y-1 text-sm">
           <label htmlFor="workspaceUrl">Workspace URL</label>
           <div className="flex w-full items-center rounded-md border-[0.5px] border-neutral-border-medium px-3">
-            <span className="whitespace-nowrap text-sm text-custom-text-200">{window && window.location.host}/</span>
+            <span className="whitespace-nowrap text-sm text-neutral-text-medium">
+              {window && window.location.host}/
+            </span>
             <Controller
               control={control}
               name="slug"
@@ -194,7 +196,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
                   onChange={onChange}
                   label={
                     ORGANIZATION_SIZE.find((c) => c === value) ?? (
-                      <span className="text-custom-text-400">Select organization size</span>
+                      <span className="text-neutral-text-subtle">Select organization size</span>
                     )
                   }
                   buttonClassName="!border-[0.5px] !border-neutral-border-medium !shadow-none"
diff --git a/web/components/workspace/delete-workspace-modal.tsx b/web/components/workspace/delete-workspace-modal.tsx
index 7d7e80d10..0a6de7d5e 100644
--- a/web/components/workspace/delete-workspace-modal.tsx
+++ b/web/components/workspace/delete-workspace-modal.tsx
@@ -119,17 +119,17 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
                   </div>
 
                   <span>
-                    <p className="text-sm leading-7 text-custom-text-200">
+                    <p className="text-sm leading-7 text-neutral-text-medium">
                       Are you sure you want to delete workspace{" "}
                       <span className="break-words font-semibold">{data?.name}</span>? All of the data related to the
                       workspace will be permanently removed. This action cannot be undone.
                     </p>
                   </span>
 
-                  <div className="text-custom-text-200">
+                  <div className="text-neutral-text-medium">
                     <p className="break-words text-sm ">
-                      Enter the workspace name <span className="font-medium text-custom-text-100">{data?.name}</span> to
-                      continue:
+                      Enter the workspace name{" "}
+                      <span className="font-medium text-neutral-text-strong">{data?.name}</span> to continue:
                     </p>
                     <Controller
                       control={control}
@@ -151,9 +151,9 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
                     />
                   </div>
 
-                  <div className="text-custom-text-200">
+                  <div className="text-neutral-text-medium">
                     <p className="text-sm">
-                      To confirm, type <span className="font-medium text-custom-text-100">delete my workspace</span>{" "}
+                      To confirm, type <span className="font-medium text-neutral-text-strong">delete my workspace</span>{" "}
                       below:
                     </p>
                     <Controller
diff --git a/web/components/workspace/help-section.tsx b/web/components/workspace/help-section.tsx
index 0f5c5060a..95d65addd 100644
--- a/web/components/workspace/help-section.tsx
+++ b/web/components/workspace/help-section.tsx
@@ -70,7 +70,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
           <Tooltip tooltipContent="Shortcuts">
             <button
               type="button"
-              className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-neutral-component-surface-medium hover:text-custom-text-100 ${
+              className={`grid place-items-center rounded-md p-1.5 text-neutral-text-medium outline-none hover:bg-neutral-component-surface-medium hover:text-neutral-text-strong ${
                 isCollapsed ? "w-full" : ""
               }`}
               onClick={() => toggleShortcutModal(true)}
@@ -81,7 +81,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
           <Tooltip tooltipContent="Help">
             <button
               type="button"
-              className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-neutral-component-surface-medium hover:text-custom-text-100 ${
+              className={`grid place-items-center rounded-md p-1.5 text-neutral-text-medium outline-none hover:bg-neutral-component-surface-medium hover:text-neutral-text-strong ${
                 isCollapsed ? "w-full" : ""
               }`}
               onClick={() => setIsNeedHelpOpen((prev) => !prev)}
@@ -92,7 +92,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
 
           <button
             type="button"
-            className="grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-neutral-component-surface-medium hover:text-custom-text-100 md:hidden"
+            className="grid place-items-center rounded-md p-1.5 text-neutral-text-medium outline-none hover:bg-neutral-component-surface-medium hover:text-neutral-text-strong md:hidden"
             onClick={() => toggleSidebar()}
           >
             <MoveLeft className="h-3.5 w-3.5" />
@@ -101,7 +101,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
           <Tooltip tooltipContent={`${isCollapsed ? "Expand" : "Hide"}`}>
             <button
               type="button"
-              className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-neutral-component-surface-medium hover:text-custom-text-100 md:grid ${
+              className={`hidden place-items-center rounded-md p-1.5 text-neutral-text-medium outline-none hover:bg-neutral-component-surface-medium hover:text-neutral-text-strong md:grid ${
                 isCollapsed ? "w-full" : ""
               }`}
               onClick={() => toggleSidebar()}
@@ -134,7 +134,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
                       <Link href={href} key={name} target="_blank">
                         <span className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-neutral-component-surface-dark">
                           <div className="grid flex-shrink-0 place-items-center">
-                            <Icon className="h-3.5 w-3.5 text-custom-text-200" size={14} />
+                            <Icon className="h-3.5 w-3.5 text-neutral-text-medium" size={14} />
                           </div>
                           <span className="text-xs">{name}</span>
                         </span>
@@ -149,7 +149,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
                         className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-neutral-component-surface-dark"
                       >
                         <div className="grid flex-shrink-0 place-items-center">
-                          <Icon className="h-3.5 w-3.5 text-custom-text-200" />
+                          <Icon className="h-3.5 w-3.5 text-neutral-text-medium" />
                         </div>
                         <span className="text-xs">{name}</span>
                       </button>
diff --git a/web/components/workspace/send-workspace-invitation-modal.tsx b/web/components/workspace/send-workspace-invitation-modal.tsx
index e140a2505..6ee03d94c 100644
--- a/web/components/workspace/send-workspace-invitation-modal.tsx
+++ b/web/components/workspace/send-workspace-invitation-modal.tsx
@@ -112,11 +112,11 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
                   }}
                 >
                   <div className="space-y-5">
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                       Invite people to collaborate
                     </Dialog.Title>
                     <div className="mt-2">
-                      <p className="text-sm text-custom-text-200">Invite members to work on your workspace.</p>
+                      <p className="text-sm text-neutral-text-medium">Invite members to work on your workspace.</p>
                     </div>
 
                     <div className="mb-3 space-y-4">
@@ -186,7 +186,7 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
                               className="-ml-3 place-items-center self-center rounded"
                               onClick={() => remove(index)}
                             >
-                              <X className="h-3.5 w-3.5 text-custom-text-200" />
+                              <X className="h-3.5 w-3.5 text-neutral-text-medium" />
                             </button>
                           )}
                         </div>
diff --git a/web/components/workspace/settings/invitations-list-item.tsx b/web/components/workspace/settings/invitations-list-item.tsx
index d5b5d5736..10e440ed2 100644
--- a/web/components/workspace/settings/invitations-list-item.tsx
+++ b/web/components/workspace/settings/invitations-list-item.tsx
@@ -97,7 +97,7 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
               <div className="item-center flex gap-1 rounded px-2 py-0.5">
                 <span
                   className={`flex items-center rounded text-xs font-medium ${
-                    hasRoleChangeAccess ? "" : "text-custom-sidebar-text-400"
+                    hasRoleChangeAccess ? "" : "text-sidebar-neutral-text-subtle"
                   }`}
                 >
                   {ROLE[invitationDetails.role]}
diff --git a/web/components/workspace/settings/members-list-item.tsx b/web/components/workspace/settings/members-list-item.tsx
index 097d08f1d..2ed1ca4fe 100644
--- a/web/components/workspace/settings/members-list-item.tsx
+++ b/web/components/workspace/settings/members-list-item.tsx
@@ -122,11 +122,11 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
               </span>
             </Link>
             <div className="flex items-center">
-              <p className="text-xs text-custom-text-300">{memberDetails.member.display_name}</p>
+              <p className="text-xs text-neutral-text-medium">{memberDetails.member.display_name}</p>
               {isAdmin && (
                 <>
-                  <Dot height={16} width={16} className="text-custom-text-300" />
-                  <p className="text-xs text-custom-text-300">{memberDetails.member.email}</p>
+                  <Dot height={16} width={16} className="text-neutral-text-medium" />
+                  <p className="text-xs text-neutral-text-medium">{memberDetails.member.email}</p>
                 </>
               )}
             </div>
@@ -138,7 +138,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
               <div className="item-center flex gap-1 rounded px-2 py-0.5">
                 <span
                   className={`flex items-center rounded text-xs font-medium ${
-                    hasRoleChangeAccess ? "" : "text-custom-sidebar-text-400"
+                    hasRoleChangeAccess ? "" : "text-sidebar-neutral-text-subtle"
                   }`}
                 >
                   {ROLE[memberDetails.role]}
diff --git a/web/components/workspace/settings/members-list.tsx b/web/components/workspace/settings/members-list.tsx
index 83a6ad71d..c8dcc8c12 100644
--- a/web/components/workspace/settings/members-list.tsx
+++ b/web/components/workspace/settings/members-list.tsx
@@ -55,7 +55,7 @@ export const WorkspaceMembersList: FC<{ searchQuery: string }> = observer((props
         ? searchedMemberIds?.map((memberId) => <WorkspaceMembersListItem key={memberId} memberId={memberId} />)
         : null}
       {searchedInvitationsIds?.length === 0 && searchedMemberIds?.length === 0 && (
-        <h4 className="mt-16 text-center text-sm text-custom-text-400">No matching members</h4>
+        <h4 className="mt-16 text-center text-sm text-neutral-text-subtle">No matching members</h4>
       )}
     </div>
   );
diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
index 7dcc72b06..ca6567e80 100644
--- a/web/components/workspace/sidebar-dropdown.tsx
+++ b/web/components/workspace/sidebar-dropdown.tsx
@@ -108,7 +108,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
       <Menu as="div" className="relative h-full flex-grow truncate text-left">
         {({ open }) => (
           <>
-            <Menu.Button className="group/menu-button h-full w-full truncate rounded-md text-sm font-medium text-custom-sidebar-text-200 hover:bg-sidebar-neutral-component-surface-dark focus:outline-none">
+            <Menu.Button className="group/menu-button h-full w-full truncate rounded-md text-sm font-medium text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:outline-none">
               <div
                 className={`flex items-center  gap-x-2 truncate rounded p-1 ${
                   sidebarCollapsed ? "justify-center" : "justify-between"
@@ -131,7 +131,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
                     )}
                   </div>
                   {!sidebarCollapsed && (
-                    <h4 className="truncate text-base font-medium text-custom-text-100">
+                    <h4 className="truncate text-base font-medium text-neutral-text-strong">
                       {activeWorkspace?.name ? activeWorkspace.name : "Loading..."}
                     </h4>
                   )}
@@ -140,7 +140,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
                   <ChevronDown
                     className={`mx-1 hidden h-4 w-4 flex-shrink-0 group-hover/menu-button:block ${
                       open ? "rotate-180" : ""
-                    } text-custom-sidebar-text-400 duration-300`}
+                    } text-sidebar-neutral-text-subtle duration-300`}
                   />
                 )}
               </div>
@@ -157,7 +157,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
               <Menu.Items as={Fragment}>
                 <div className="fixed left-4 z-20 mt-1 flex w-full max-w-[19rem] origin-top-left flex-col rounded-md border-[0.5px] border-sidebar-neutral-border-medium bg-sidebar-neutral-component-surface-light shadow-custom-shadow-rg divide-y divide-neutral-border-subtle outline-none">
                   <div className="flex max-h-96 flex-col items-start justify-start gap-2 overflow-y-scroll mb-2 px-4">
-                    <h6 className="sticky top-0 z-10 h-full w-full bg-neutral-component-surface-light pt-3 text-sm font-medium text-custom-sidebar-text-400">
+                    <h6 className="sticky top-0 z-10 h-full w-full bg-neutral-component-surface-light pt-3 text-sm font-medium text-sidebar-neutral-text-subtle">
                       {currentUser?.email}
                     </h6>
                     {workspacesList ? (
@@ -175,7 +175,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
                             >
                               <Menu.Item
                                 as="div"
-                                className="flex items-center justify-between gap-1 rounded p-1 text-sm text-custom-sidebar-text-100 hover:bg-sidebar-neutral-component-surface-dark"
+                                className="flex items-center justify-between gap-1 rounded p-1 text-sm text-sidebar-neutral-text-strong hover:bg-sidebar-neutral-component-surface-dark"
                               >
                                 <div className="flex items-center justify-start gap-2.5 truncate">
                                   <span
@@ -195,7 +195,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
                                   </span>
                                   <h5
                                     className={`truncate text-sm font-medium ${
-                                      workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
+                                      workspaceSlug === workspace.slug ? "" : "text-neutral-text-medium"
                                     }`}
                                   >
                                     {workspace.name}
@@ -203,7 +203,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
                                 </div>
                                 {workspace.id === activeWorkspace?.id && (
                                   <span className="flex-shrink-0 p-1">
-                                    <Check className="h-5 w-5 text-custom-sidebar-text-100" />
+                                    <Check className="h-5 w-5 text-sidebar-neutral-text-strong" />
                                   </span>
                                 )}
                               </Menu.Item>
@@ -227,7 +227,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
                     >
                       <Menu.Item
                         as="div"
-                        className="flex items-center gap-2 rounded px-2 py-1 text-sm text-custom-sidebar-text-100 hover:bg-sidebar-neutral-component-surface-dark font-medium"
+                        className="flex items-center gap-2 rounded px-2 py-1 text-sm text-sidebar-neutral-text-strong hover:bg-sidebar-neutral-component-surface-dark font-medium"
                       >
                         <PlusSquare strokeWidth={1.75} className="h-4 w-4 flex-shrink-0" />
                         Create workspace
@@ -244,7 +244,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
                       >
                         <Menu.Item
                           as="div"
-                          className="flex items-center gap-2 rounded px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-sidebar-neutral-component-surface-dark font-medium"
+                          className="flex items-center gap-2 rounded px-2 py-1 text-sm text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark font-medium"
                         >
                           <link.icon className="h-4 w-4 flex-shrink-0" />
                           {link.name}
@@ -297,7 +297,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
               {...attributes.popper}
             >
               <div className="flex flex-col gap-2.5 pb-2">
-                <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
+                <span className="px-2 text-sidebar-neutral-text-medium">{currentUser?.email}</span>
                 {profileLinks(workspaceSlug?.toString() ?? "", currentUser?.id ?? "").map((link, index) => (
                   <Link
                     key={index}
diff --git a/web/components/workspace/sidebar-menu.tsx b/web/components/workspace/sidebar-menu.tsx
index 04591c3c4..45376d8e6 100644
--- a/web/components/workspace/sidebar-menu.tsx
+++ b/web/components/workspace/sidebar-menu.tsx
@@ -50,7 +50,7 @@ export const WorkspaceSidebarMenu = observer(() => {
                     className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
                       link.highlight(router.asPath, `/${workspaceSlug}`)
                         ? "bg-custom-primary-100/10 text-custom-primary-100"
-                        : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                        : "text-sidebar-neutral-text-medium hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
                     } ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
                   >
                     {
diff --git a/web/components/workspace/sidebar-quick-action.tsx b/web/components/workspace/sidebar-quick-action.tsx
index 52f26c877..02dc0c689 100644
--- a/web/components/workspace/sidebar-quick-action.tsx
+++ b/web/components/workspace/sidebar-quick-action.tsx
@@ -79,7 +79,7 @@ export const WorkspaceSidebarQuickAction = observer(() => {
                 commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
               }}
             >
-              <PenSquare className="h-4 w-4 text-custom-sidebar-text-300" />
+              <PenSquare className="h-4 w-4 text-sidebar-neutral-text-medium" />
               {!isSidebarCollapsed && <span className="text-sm font-medium">New Issue</span>}
             </button>
 
@@ -98,7 +98,7 @@ export const WorkspaceSidebarQuickAction = observer(() => {
                   }`}
                 >
                   <ChevronUp
-                    className={`h-4 w-4 rotate-180 transform !text-custom-sidebar-text-300 transition-transform duration-300 ${
+                    className={`h-4 w-4 rotate-180 transform !text-sidebar-neutral-text-medium transition-transform duration-300 ${
                       isDraftButtonOpen ? "rotate-0" : ""
                     }`}
                   />
@@ -112,9 +112,9 @@ export const WorkspaceSidebarQuickAction = observer(() => {
                   <div className="h-full w-full">
                     <button
                       onClick={() => setIsDraftIssueModalOpen(true)}
-                      className="flex w-full flex-shrink-0 items-center rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light px-3 py-[10px] text-sm text-custom-text-300 shadow"
+                      className="flex w-full flex-shrink-0 items-center rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light px-3 py-[10px] text-sm text-neutral-text-medium shadow"
                     >
-                      <PenSquare size={16} className="mr-2 !text-lg !leading-4 text-custom-sidebar-text-300" />
+                      <PenSquare size={16} className="mr-2 !text-lg !leading-4 text-sidebar-neutral-text-medium" />
                       Last Drafted Issue
                     </button>
                   </div>
@@ -134,7 +134,7 @@ export const WorkspaceSidebarQuickAction = observer(() => {
           }`}
           onClick={() => commandPaletteStore.toggleCommandPaletteModal(true)}
         >
-          <Search className="h-4 w-4 text-custom-sidebar-text-300" />
+          <Search className="h-4 w-4 text-sidebar-neutral-text-medium" />
           {!isAuthorizedUser && !isSidebarCollapsed && <span className="text-xs font-medium">Open command menu</span>}
         </button>
       </div>
diff --git a/web/components/workspace/views/delete-view-modal.tsx b/web/components/workspace/views/delete-view-modal.tsx
index 2c66beb66..d0442b750 100644
--- a/web/components/workspace/views/delete-view-modal.tsx
+++ b/web/components/workspace/views/delete-view-modal.tsx
@@ -88,14 +88,14 @@ export const DeleteGlobalViewModal: React.FC<Props> = observer((props) => {
                       <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
                     <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                         Delete View
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
+                        <p className="text-sm text-neutral-text-medium">
                           Are you sure you want to delete view-{" "}
-                          <span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the
-                          data related to the view will be permanently removed. This action cannot be undone.
+                          <span className="break-words font-medium text-neutral-text-strong">{data?.name}</span>? All of
+                          the data related to the view will be permanently removed. This action cannot be undone.
                         </p>
                       </div>
                     </div>
diff --git a/web/components/workspace/views/form.tsx b/web/components/workspace/views/form.tsx
index ce04b2f2d..5d69d85c2 100644
--- a/web/components/workspace/views/form.tsx
+++ b/web/components/workspace/views/form.tsx
@@ -70,7 +70,7 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateView)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{data ? "Update" : "Create"} View</h3>
+        <h3 className="text-lg font-medium leading-6 text-neutral-text-strong">{data ? "Update" : "Create"} View</h3>
         <div className="space-y-3">
           <div>
             <Controller
diff --git a/web/components/workspace/views/header.tsx b/web/components/workspace/views/header.tsx
index efb6e09fa..df2dbfae1 100644
--- a/web/components/workspace/views/header.tsx
+++ b/web/components/workspace/views/header.tsx
@@ -29,7 +29,7 @@ const ViewTab = observer((props: { viewId: string }) => {
         className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
           viewId === globalViewId
             ? "border-custom-primary-100 text-custom-primary-100"
-            : "border-transparent hover:border-neutral-border-medium hover:text-custom-text-400"
+            : "border-transparent hover:border-neutral-border-medium hover:text-neutral-text-subtle"
         }`}
       >
         {view.name}
@@ -72,7 +72,7 @@ export const GlobalViewsHeader: React.FC = observer(() => {
                 className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
                   tab.key === globalViewId
                     ? "border-custom-primary-100 text-custom-primary-100"
-                    : "border-transparent hover:border-neutral-border-medium hover:text-custom-text-400"
+                    : "border-transparent hover:border-neutral-border-medium hover:text-neutral-text-subtle"
                 }`}
               >
                 {tab.label}
@@ -88,7 +88,7 @@ export const GlobalViewsHeader: React.FC = observer(() => {
         {isAuthorizedUser && (
           <button
             type="button"
-            className="sticky -right-4 flex w-12 flex-shrink-0 items-center justify-center border-transparent bg-neutral-component-surface-light py-3 hover:border-neutral-border-medium hover:text-custom-text-400"
+            className="sticky -right-4 flex w-12 flex-shrink-0 items-center justify-center border-transparent bg-neutral-component-surface-light py-3 hover:border-neutral-border-medium hover:text-neutral-text-subtle"
             onClick={() => setCreateViewModal(true)}
           >
             <Plus className="h-4 w-4 text-custom-primary-200" />
diff --git a/web/components/workspace/views/view-list-item.tsx b/web/components/workspace/views/view-list-item.tsx
index d5f0926a5..9f5f156b2 100644
--- a/web/components/workspace/views/view-list-item.tsx
+++ b/web/components/workspace/views/view-list-item.tsx
@@ -46,12 +46,12 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
                 </div>
                 <div className="flex flex-col">
                   <p className="truncate text-sm font-medium leading-4">{truncateText(view.name, 75)}</p>
-                  {view?.description && <p className="text-xs text-custom-text-200">{view.description}</p>}
+                  {view?.description && <p className="text-xs text-neutral-text-medium">{view.description}</p>}
                 </div>
               </div>
               <div className="ml-2 flex flex-shrink-0">
                 <div className="flex items-center gap-4">
-                  <p className="hidden rounded bg-neutral-component-surface-dark px-2 py-1 text-xs text-custom-text-200 group-hover:block">
+                  <p className="hidden rounded bg-neutral-component-surface-dark px-2 py-1 text-xs text-neutral-text-medium group-hover:block">
                     {totalFilters} {totalFilters === 1 ? "filter" : "filters"}
                   </p>
                   <CustomMenu ellipsis>
diff --git a/web/components/workspace/workspace-active-cycles-upgrade.tsx b/web/components/workspace/workspace-active-cycles-upgrade.tsx
index d1a607edb..6990ee9a1 100644
--- a/web/components/workspace/workspace-active-cycles-upgrade.tsx
+++ b/web/components/workspace/workspace-active-cycles-upgrade.tsx
@@ -29,7 +29,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
         <div className="relative px-14 flex flex-col gap-7 justify-center lg:w-1/2">
           <div className="flex flex-col gap-2 max-w-64">
             <h2 className="text-2xl font-semibold">On-demand snapshots of all your cycles</h2>
-            <p className="text-base font-medium text-custom-text-300">
+            <p className="text-base font-medium text-neutral-text-medium">
               Monitor cycles across projects, track high-priority issues, and zoom in cycles that need attention.
             </p>
           </div>
@@ -80,7 +80,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
               <h3 className="font-medium">{item.title}</h3>
               <item.icon className="text-blue-500 h-4 w-4" />
             </div>
-            <span className="text-sm text-custom-text-300">{item.description}</span>
+            <span className="text-sm text-neutral-text-medium">{item.description}</span>
           </div>
         ))}
       </div>
diff --git a/web/constants/cycle.ts b/web/constants/cycle.ts
index 29b5c7add..4bc0d9588 100644
--- a/web/constants/cycle.ts
+++ b/web/constants/cycle.ts
@@ -93,7 +93,7 @@ export const CYCLE_STATUS: {
     label: "Draft",
     value: "draft",
     color: "#525252",
-    textColor: "text-custom-text-300",
+    textColor: "text-neutral-text-medium",
     bgColor: "bg-neutral-component-surface-medium",
   },
 ];
diff --git a/web/constants/inbox.tsx b/web/constants/inbox.tsx
index 61c417eaf..10cbf9931 100644
--- a/web/constants/inbox.tsx
+++ b/web/constants/inbox.tsx
@@ -44,7 +44,7 @@ export const INBOX_STATUS: {
       ) : (
         <p>This issue has been snoozed till {renderFormattedDate(snoozedTillDate)}.</p>
       ),
-    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "text-red-500" : "text-custom-text-200"),
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "text-red-500" : "text-neutral-text-medium"),
     bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-red-500/10" : "bg-gray-500/10"),
     borderColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "border-red-500" : "border-gray-500"),
   },
@@ -77,7 +77,7 @@ export const INBOX_STATUS: {
         .
       </p>
     ),
-    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-custom-text-200"),
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-neutral-text-medium"),
     bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-gray-500/10"),
     borderColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "border-gray-500"),
   },
diff --git a/web/constants/module.ts b/web/constants/module.ts
index 0f4bd86de..662a75b82 100644
--- a/web/constants/module.ts
+++ b/web/constants/module.ts
@@ -13,7 +13,7 @@ export const MODULE_STATUS: {
     label: "Backlog",
     value: "backlog",
     color: "#a3a3a2",
-    textColor: "text-custom-text-400",
+    textColor: "text-neutral-text-subtle",
     bgColor: "bg-neutral-component-surface-dark",
   },
   {
@@ -34,7 +34,7 @@ export const MODULE_STATUS: {
     label: "Paused",
     value: "paused",
     color: "#525252",
-    textColor: "text-custom-text-300",
+    textColor: "text-neutral-text-medium",
     bgColor: "bg-neutral-component-surface-medium",
   },
   {
diff --git a/web/layouts/admin-layout/header.tsx b/web/layouts/admin-layout/header.tsx
index 5f492dd03..e790d99fb 100644
--- a/web/layouts/admin-layout/header.tsx
+++ b/web/layouts/admin-layout/header.tsx
@@ -26,7 +26,7 @@ export const InstanceAdminHeader: FC<IInstanceAdminHeader> = observer((props) =>
                   <BreadcrumbLink
                     href="/god-mode"
                     label="Settings"
-                    icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+                    icon={<Settings className="h-4 w-4 text-neutral-text-medium" />}
                   />
                 }
               />
diff --git a/web/layouts/auth-layout/workspace-wrapper.tsx b/web/layouts/auth-layout/workspace-wrapper.tsx
index eac51e1f8..27af04fd5 100644
--- a/web/layouts/auth-layout/workspace-wrapper.tsx
+++ b/web/layouts/auth-layout/workspace-wrapper.tsx
@@ -65,7 +65,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
           <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-custom-text-200">
+              <p className="mx-auto w-1/2 text-sm text-neutral-text-medium">
                 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/web/layouts/settings-layout/profile/preferences/sidebar.tsx b/web/layouts/settings-layout/profile/preferences/sidebar.tsx
index 2e9c6dd6e..b5381ae82 100644
--- a/web/layouts/settings-layout/profile/preferences/sidebar.tsx
+++ b/web/layouts/settings-layout/profile/preferences/sidebar.tsx
@@ -21,7 +21,7 @@ export const ProfilePreferenceSettingsSidebar = () => {
   return (
     <div className="flex w-96 flex-col gap-6 px-8 py-12">
       <div className="flex flex-col gap-4">
-        <span className="text-xs font-semibold text-custom-text-400">Preference</span>
+        <span className="text-xs font-semibold text-neutral-text-subtle">Preference</span>
         <div className="flex w-full flex-col gap-2">
           {profilePreferenceLinks.map((link) => (
             <Link key={link.href} href={link.href}>
@@ -29,7 +29,7 @@ export const ProfilePreferenceSettingsSidebar = () => {
                 className={`rounded-md px-4 py-2 text-sm font-medium ${
                   (link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
                     ? "bg-custom-primary-100/10 text-custom-primary-100"
-                    : "text-custom-sidebar-text-200 hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
+                    : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
                 }`}
               >
                 {link.label}
diff --git a/web/layouts/settings-layout/profile/sidebar.tsx b/web/layouts/settings-layout/profile/sidebar.tsx
index 6d57c1378..8762fbb6a 100644
--- a/web/layouts/settings-layout/profile/sidebar.tsx
+++ b/web/layouts/settings-layout/profile/sidebar.tsx
@@ -88,13 +88,13 @@ export const ProfileLayoutSidebar = observer(() => {
               <ChevronLeft className="h-5 w-5" strokeWidth={1} />
             </span>
             {!sidebarCollapsed && (
-              <h4 className="truncate text-lg font-semibold text-custom-text-200">Profile settings</h4>
+              <h4 className="truncate text-lg font-semibold text-neutral-text-medium">Profile settings</h4>
             )}
           </div>
         </Link>
         <div className="flex flex-shrink-0 flex-col overflow-x-hidden px-4">
           {!sidebarCollapsed && (
-            <h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Your account</h6>
+            <h6 className="rounded px-1.5 text-sm font-semibold text-sidebar-neutral-text-subtle">Your account</h6>
           )}
           <div className="mt-2 h-full space-y-1.5 overflow-y-auto">
             {PROFILE_ACTION_LINKS.map((link) => {
@@ -107,7 +107,7 @@ export const ProfileLayoutSidebar = observer(() => {
                       className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
                         link.highlight(router.pathname)
                           ? "bg-custom-primary-100/10 text-custom-primary-100"
-                          : "text-custom-sidebar-text-200 hover:bg-sidebar-neutral-component-surface-dark"
+                          : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark"
                       } ${sidebarCollapsed ? "justify-center" : ""}`}
                     >
                       {<link.Icon className="h-4 w-4" />}
@@ -121,7 +121,7 @@ export const ProfileLayoutSidebar = observer(() => {
         </div>
         <div className="flex flex-col overflow-x-hidden px-4">
           {!sidebarCollapsed && (
-            <h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Workspaces</h6>
+            <h6 className="rounded px-1.5 text-sm font-semibold text-sidebar-neutral-text-subtle">Workspaces</h6>
           )}
           {workspacesList && workspacesList.length > 0 && (
             <div className="mt-2 h-full space-y-1.5 overflow-y-auto">
@@ -154,7 +154,7 @@ export const ProfileLayoutSidebar = observer(() => {
                       )}
                     </span>
                     {!sidebarCollapsed && (
-                      <p className="truncate text-sm text-custom-sidebar-text-200">{workspace.name}</p>
+                      <p className="truncate text-sm text-sidebar-neutral-text-medium">{workspace.name}</p>
                     )}
                   </span>
                 </Link>
@@ -166,7 +166,7 @@ export const ProfileLayoutSidebar = observer(() => {
               <Link className="block w-full" key={link.key} href={link.href}>
                 <Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
                   <div
-                    className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-custom-sidebar-text-200 outline-none hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark ${
+                    className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-sidebar-neutral-text-medium outline-none hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark ${
                       sidebarCollapsed ? "justify-center" : ""
                     }`}
                   >
@@ -195,14 +195,14 @@ export const ProfileLayoutSidebar = observer(() => {
             </button>
             <button
               type="button"
-              className="grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-neutral-component-surface-medium hover:text-custom-text-100 md:hidden"
+              className="grid place-items-center rounded-md p-1.5 text-neutral-text-medium outline-none hover:bg-neutral-component-surface-medium hover:text-neutral-text-strong md:hidden"
               onClick={() => toggleSidebar()}
             >
               <MoveLeft className="h-3.5 w-3.5" />
             </button>
             <button
               type="button"
-              className={`ml-auto hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-neutral-component-surface-medium hover:text-custom-text-100 md:grid ${
+              className={`ml-auto hidden place-items-center rounded-md p-1.5 text-neutral-text-medium outline-none hover:bg-neutral-component-surface-medium hover:text-neutral-text-strong md:grid ${
                 sidebarCollapsed ? "w-full" : ""
               }`}
               onClick={() => toggleSidebar()}
diff --git a/web/layouts/settings-layout/project/sidebar.tsx b/web/layouts/settings-layout/project/sidebar.tsx
index fb911ffdc..dcbd8c85a 100644
--- a/web/layouts/settings-layout/project/sidebar.tsx
+++ b/web/layouts/settings-layout/project/sidebar.tsx
@@ -19,7 +19,7 @@ export const ProjectSettingsSidebar = () => {
   return (
     <div className="flex w-80 flex-col gap-6 px-5">
       <div className="flex flex-col gap-2">
-        <span className="text-xs font-semibold text-custom-sidebar-text-400">SETTINGS</span>
+        <span className="text-xs font-semibold text-sidebar-neutral-text-subtle">SETTINGS</span>
         <div className="flex w-full flex-col gap-1">
           {PROJECT_SETTINGS_LINKS.map(
             (link) =>
@@ -29,7 +29,7 @@ export const ProjectSettingsSidebar = () => {
                     className={`rounded-md px-4 py-2 text-sm font-medium ${
                       link.highlight(router.asPath, `/${workspaceSlug}/projects/${projectId}`)
                         ? "bg-custom-primary-100/10 text-custom-primary-100"
-                        : "text-custom-sidebar-text-200 hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
+                        : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
                     }`}
                   >
                     {link.label}
diff --git a/web/layouts/settings-layout/workspace/sidebar.tsx b/web/layouts/settings-layout/workspace/sidebar.tsx
index ea987dfd1..6fb15f3a3 100644
--- a/web/layouts/settings-layout/workspace/sidebar.tsx
+++ b/web/layouts/settings-layout/workspace/sidebar.tsx
@@ -20,7 +20,7 @@ export const WorkspaceSettingsSidebar = () => {
   return (
     <div className="flex w-80 flex-col gap-6 px-5">
       <div className="flex flex-col gap-2">
-        <span className="text-xs font-semibold text-custom-sidebar-text-400">SETTINGS</span>
+        <span className="text-xs font-semibold text-sidebar-neutral-text-subtle">SETTINGS</span>
         <div className="flex w-full flex-col gap-1">
           {WORKSPACE_SETTINGS_LINKS.map(
             (link) =>
@@ -31,7 +31,7 @@ export const WorkspaceSettingsSidebar = () => {
                       className={`rounded-md px-4 py-2 text-sm font-medium ${
                         link.highlight(router.asPath, `/${workspaceSlug}`)
                           ? "bg-custom-primary-100/10 text-custom-primary-100"
-                          : "text-custom-sidebar-text-200 hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
+                          : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
                       }`}
                     >
                       {link.label}
diff --git a/web/layouts/user-profile-layout/layout.tsx b/web/layouts/user-profile-layout/layout.tsx
index 60c17d8d4..9852b19be 100644
--- a/web/layouts/user-profile-layout/layout.tsx
+++ b/web/layouts/user-profile-layout/layout.tsx
@@ -35,7 +35,7 @@ export const ProfileAuthWrapper: React.FC<Props> = observer((props) => {
         {isAuthorized || !isAuthorizedPath ? (
           <div className={`w-full overflow-hidden md:h-full ${className}`}>{children}</div>
         ) : (
-          <div className="grid h-full w-full place-items-center text-custom-text-200">
+          <div className="grid h-full w-full place-items-center text-neutral-text-medium">
             You do not have the permission to access this page.
           </div>
         )}
diff --git a/web/pages/404.tsx b/web/pages/404.tsx
index 0e8c8a038..4683315dc 100644
--- a/web/pages/404.tsx
+++ b/web/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-custom-text-200">
+          <p className="text-sm text-neutral-text-medium">
             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/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
index 60c18c488..e6d651724 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
@@ -98,7 +98,7 @@ const ArchivedIssueDetailsPage: NextPageWithLayout = () => {
         <div className="flex h-full overflow-hidden">
           <div className="h-full w-full space-y-2 divide-y-2 divide-neutral-border-medium overflow-y-auto p-5">
             {issue?.archived_at && (
-              <div className="flex items-center justify-between gap-2 rounded-md border border-neutral-border-medium bg-neutral-component-surface-medium px-2.5 py-2 text-sm text-custom-text-200">
+              <div className="flex items-center justify-between gap-2 rounded-md border border-neutral-border-medium bg-neutral-component-surface-medium px-2.5 py-2 text-sm text-neutral-text-medium">
                 <div className="flex items-center gap-2">
                   <ArchiveIcon className="h-3.5 w-3.5" />
                   <p>This issue has been archived by Plane.</p>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 035afbce8..246c74d53 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -141,7 +141,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
                           <layout.icon
                             strokeWidth={2}
                             className={`h-3.5 w-3.5 ${
-                              cycleLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"
+                              cycleLayout == layout.key ? "text-neutral-text-strong" : "text-neutral-text-medium"
                             }`}
                           />
                         </button>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index 7130ff0ba..3e891f32b 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -122,7 +122,7 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
           )}
           <div className="flex h-full flex-col space-y-5 overflow-hidden p-6">
             <div className="flex justify-between gap-4">
-              <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
+              <h3 className="text-2xl font-semibold text-neutral-text-strong">Pages</h3>
             </div>
             <Tab.Group
               as={Fragment}
diff --git a/web/pages/[workspaceSlug]/settings/api-tokens.tsx b/web/pages/[workspaceSlug]/settings/api-tokens.tsx
index 2df8c621c..200a766ca 100644
--- a/web/pages/[workspaceSlug]/settings/api-tokens.tsx
+++ b/web/pages/[workspaceSlug]/settings/api-tokens.tsx
@@ -42,7 +42,7 @@ const ApiTokensPage: NextPageWithLayout = observer(() => {
   if (!isAdmin)
     return (
       <div className="mt-10 flex h-full w-full justify-center p-4">
-        <p className="text-sm text-custom-text-300">You are not authorized to access this page.</p>
+        <p className="text-sm text-neutral-text-medium">You are not authorized to access this page.</p>
       </div>
     );
 
diff --git a/web/pages/[workspaceSlug]/settings/billing.tsx b/web/pages/[workspaceSlug]/settings/billing.tsx
index d13ce093a..8aaa6d2ff 100644
--- a/web/pages/[workspaceSlug]/settings/billing.tsx
+++ b/web/pages/[workspaceSlug]/settings/billing.tsx
@@ -24,7 +24,7 @@ const BillingSettingsPage: NextPageWithLayout = observer(() => {
   if (!isAdmin)
     return (
       <div className="mt-10 flex h-full w-full justify-center p-4">
-        <p className="text-sm text-custom-text-300">You are not authorized to access this page.</p>
+        <p className="text-sm text-neutral-text-medium">You are not authorized to access this page.</p>
       </div>
     );
 
@@ -38,7 +38,7 @@ const BillingSettingsPage: NextPageWithLayout = observer(() => {
       <div className="px-4 py-6">
         <div>
           <h4 className="text-md mb-1 leading-6">Current plan</h4>
-          <p className="mb-3 text-sm text-custom-text-200">You are currently using the free plan</p>
+          <p className="mb-3 text-sm text-neutral-text-medium">You are currently using the free plan</p>
           <a href="https://plane.so/pricing" target="_blank" rel="noreferrer">
             <Button variant="neutral-primary">View Plans</Button>
           </a>
diff --git a/web/pages/[workspaceSlug]/settings/exports.tsx b/web/pages/[workspaceSlug]/settings/exports.tsx
index ce6ed44d3..b46cde88c 100644
--- a/web/pages/[workspaceSlug]/settings/exports.tsx
+++ b/web/pages/[workspaceSlug]/settings/exports.tsx
@@ -24,7 +24,7 @@ const ExportsPage: NextPageWithLayout = observer(() => {
   if (!hasPageAccess)
     return (
       <div className="mt-10 flex h-full w-full justify-center p-4">
-        <p className="text-sm text-custom-text-300">You are not authorized to access this page.</p>
+        <p className="text-sm text-neutral-text-medium">You are not authorized to access this page.</p>
       </div>
     );
 
diff --git a/web/pages/[workspaceSlug]/settings/imports.tsx b/web/pages/[workspaceSlug]/settings/imports.tsx
index e7378f831..bf4597e84 100644
--- a/web/pages/[workspaceSlug]/settings/imports.tsx
+++ b/web/pages/[workspaceSlug]/settings/imports.tsx
@@ -23,7 +23,7 @@ const ImportsPage: NextPageWithLayout = observer(() => {
   if (!isAdmin)
     return (
       <div className="mt-10 flex h-full w-full justify-center p-4">
-        <p className="text-sm text-custom-text-300">You are not authorized to access this page.</p>
+        <p className="text-sm text-neutral-text-medium">You are not authorized to access this page.</p>
       </div>
     );
 
diff --git a/web/pages/[workspaceSlug]/settings/integrations.tsx b/web/pages/[workspaceSlug]/settings/integrations.tsx
index 70147c312..4fff22a87 100644
--- a/web/pages/[workspaceSlug]/settings/integrations.tsx
+++ b/web/pages/[workspaceSlug]/settings/integrations.tsx
@@ -38,7 +38,7 @@ const WorkspaceIntegrationsPage: NextPageWithLayout = observer(() => {
   if (!isAdmin)
     return (
       <div className="mt-10 flex h-full w-full justify-center p-4">
-        <p className="text-sm text-custom-text-300">You are not authorized to access this page.</p>
+        <p className="text-sm text-neutral-text-medium">You are not authorized to access this page.</p>
       </div>
     );
 
diff --git a/web/pages/[workspaceSlug]/settings/members.tsx b/web/pages/[workspaceSlug]/settings/members.tsx
index c9e8341b8..8ca117394 100644
--- a/web/pages/[workspaceSlug]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/settings/members.tsx
@@ -74,9 +74,9 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
         <div className="flex items-center justify-between gap-4 border-b border-neutral-border-subtle py-3.5">
           <h4 className="text-xl font-medium">Members</h4>
           <div className="ml-auto flex items-center gap-1.5 rounded-md border border-neutral-border-medium bg-neutral-component-surface-light px-2.5 py-1.5">
-            <Search className="h-3.5 w-3.5 text-custom-text-400" />
+            <Search className="h-3.5 w-3.5 text-neutral-text-subtle" />
             <input
-              className="w-full max-w-[234px] border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400"
+              className="w-full max-w-[234px] border-none bg-transparent text-sm outline-none placeholder:text-neutral-text-subtle"
               placeholder="Search..."
               value={searchQuery}
               autoFocus
diff --git a/web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx b/web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx
index 562578b66..649e67387 100644
--- a/web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx
+++ b/web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx
@@ -77,7 +77,7 @@ const WebhookDetailsPage: NextPageWithLayout = observer(() => {
   if (!isAdmin)
     return (
       <div className="mt-10 flex h-full w-full justify-center p-4">
-        <p className="text-sm text-custom-text-300">You are not authorized to access this page.</p>
+        <p className="text-sm text-neutral-text-medium">You are not authorized to access this page.</p>
       </div>
     );
 
diff --git a/web/pages/[workspaceSlug]/settings/webhooks/index.tsx b/web/pages/[workspaceSlug]/settings/webhooks/index.tsx
index 215f5bb91..d9104fd44 100644
--- a/web/pages/[workspaceSlug]/settings/webhooks/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/webhooks/index.tsx
@@ -43,7 +43,7 @@ const WebhooksListPage: NextPageWithLayout = observer(() => {
   if (!isAdmin)
     return (
       <div className="mt-10 flex h-full w-full justify-center p-4">
-        <p className="text-sm text-custom-text-300">You are not authorized to access this page.</p>
+        <p className="text-sm text-neutral-text-medium">You are not authorized to access this page.</p>
       </div>
     );
 
diff --git a/web/pages/[workspaceSlug]/workspace-views/index.tsx b/web/pages/[workspaceSlug]/workspace-views/index.tsx
index b70741dd9..48075d891 100644
--- a/web/pages/[workspaceSlug]/workspace-views/index.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/index.tsx
@@ -20,9 +20,9 @@ const WorkspaceViewsPage: NextPageWithLayout = () => {
     <div className="flex flex-col">
       <div className="flex h-full w-full flex-col overflow-hidden">
         <div className="flex w-full items-center gap-2.5 border-b border-neutral-border-medium px-5 py-3">
-          <Search className="text-custom-text-200" size={14} strokeWidth={2} />
+          <Search className="text-neutral-text-medium" size={14} strokeWidth={2} />
           <Input
-            className="w-full bg-transparent !p-0 text-xs leading-5 text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+            className="w-full bg-transparent !p-0 text-xs leading-5 text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             placeholder="Search"
diff --git a/web/pages/_error.tsx b/web/pages/_error.tsx
index 11a7ee852..a76c5a6dd 100644
--- a/web/pages/_error.tsx
+++ b/web/pages/_error.tsx
@@ -38,7 +38,7 @@ 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="mx-auto w-1/2 text-sm text-custom-text-200">
+            <p className="mx-auto w-1/2 text-sm text-neutral-text-medium">
               We{"'"}re Sorry! An exception has been detected, and our engineering team has been notified. We apologize
               for any inconvenience this may have caused. Please reach out to our engineering team at{" "}
               <a href="mailto:support@plane.so" className="text-custom-primary">
diff --git a/web/pages/create-workspace.tsx b/web/pages/create-workspace.tsx
index 7eff61cf1..acb41e5dc 100644
--- a/web/pages/create-workspace.tsx
+++ b/web/pages/create-workspace.tsx
@@ -52,7 +52,7 @@ const CreateWorkspacePage: NextPageWithLayout = observer(() => {
             )}
           </div>
         </Link>
-        <div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm text-custom-text-100 sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
+        <div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm text-neutral-text-strong sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
           {currentUser?.email}
         </div>
       </div>
diff --git a/web/pages/god-mode/ai.tsx b/web/pages/god-mode/ai.tsx
index 0e1701920..208edd7ae 100644
--- a/web/pages/god-mode/ai.tsx
+++ b/web/pages/god-mode/ai.tsx
@@ -25,16 +25,16 @@ const InstanceAdminAIPage: NextPageWithLayout = observer(() => {
   return (
     <div className="flex flex-col gap-8">
       <div className="mb-2 border-b border-neutral-border-subtle pb-3">
-        <div className="pb-1 text-xl font-medium text-custom-text-100">AI features for all your workspaces</div>
-        <div className="text-sm font-normal text-custom-text-300">
+        <div className="pb-1 text-xl font-medium text-neutral-text-strong">AI features for all your workspaces</div>
+        <div className="text-sm font-normal text-neutral-text-medium">
           Configure your AI API credentials so Plane AI features are turned on for all your workspaces.
         </div>
       </div>
       {formattedConfig ? (
         <>
           <div>
-            <div className="pb-1 text-xl font-medium text-custom-text-100">OpenAI</div>
-            <div className="text-sm font-normal text-custom-text-300">If you use ChatGPT, this is for you.</div>
+            <div className="pb-1 text-xl font-medium text-neutral-text-strong">OpenAI</div>
+            <div className="text-sm font-normal text-neutral-text-medium">If you use ChatGPT, this is for you.</div>
           </div>
           <InstanceAIForm config={formattedConfig} />
           <div className="my-2 flex">
diff --git a/web/pages/god-mode/authorization.tsx b/web/pages/god-mode/authorization.tsx
index fb122be05..3ac265112 100644
--- a/web/pages/god-mode/authorization.tsx
+++ b/web/pages/god-mode/authorization.tsx
@@ -66,8 +66,8 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
   return (
     <div className="flex flex-col gap-8">
       <div className="mb-2 border-b border-neutral-border-subtle pb-3">
-        <div className="pb-1 text-xl font-medium text-custom-text-100">Single sign-on and OAuth</div>
-        <div className="text-sm font-normal text-custom-text-300">
+        <div className="pb-1 text-xl font-medium text-neutral-text-strong">Single sign-on and OAuth</div>
+        <div className="text-sm font-normal text-neutral-text-medium">
           Make your teams life easy by letting them sign-up with their Google and GitHub accounts, and below are the
           settings.
         </div>
@@ -77,10 +77,10 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
           <div className="flex w-full flex-col gap-12 border-b border-neutral-border-subtle pb-8 lg:w-2/5">
             <div className="pointer-events-none mr-4 flex items-center gap-14 opacity-50">
               <div className="grow">
-                <div className="text-sm font-medium text-custom-text-100">
+                <div className="text-sm font-medium text-neutral-text-strong">
                   Turn Magic Links {Boolean(parseInt(enableMagicLogin)) ? "off" : "on"}
                 </div>
-                <div className="text-xs font-normal text-custom-text-300">
+                <div className="text-xs font-normal text-neutral-text-medium">
                   <p>Slack-like emails for authentication.</p>
                   You need to have set up email{" "}
                   <Link href="email">
@@ -105,10 +105,10 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
             </div>
             <div className="mr-4 flex items-center gap-14">
               <div className="grow">
-                <div className="text-sm font-medium text-custom-text-100">
+                <div className="text-sm font-medium text-neutral-text-strong">
                   Let your users log in via the methods below
                 </div>
-                <div className="text-xs font-normal text-custom-text-300">
+                <div className="text-xs font-normal text-neutral-text-medium">
                   Toggling this off will disable all previous configs. Users will only be able to login with an e-mail
                   and password combo.
                 </div>
@@ -128,10 +128,10 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
             </div>
             {/* <div className="flex items-center gap-14 mr-4">
               <div className="grow">
-                <div className="text-custom-text-100 font-medium text-sm">
+                <div className="text-neutral-text-strong font-medium text-sm">
                   Turn Email Password {Boolean(parseInt(enableEmailPassword)) ? "off" : "on"}
                 </div>
-                <div className="text-custom-text-300 font-normal text-xs">UX Copy Required!</div>
+                <div className="text-neutral-text-medium font-normal text-xs">UX Copy Required!</div>
               </div>
               <div className={`shrink-0 ${isSubmitting && "opacity-70"}`}>
                 <ToggleSwitch
diff --git a/web/pages/god-mode/email.tsx b/web/pages/god-mode/email.tsx
index 589ac726a..fe867f417 100644
--- a/web/pages/god-mode/email.tsx
+++ b/web/pages/god-mode/email.tsx
@@ -23,11 +23,11 @@ const InstanceAdminEmailPage: NextPageWithLayout = observer(() => {
   return (
     <div className="flex flex-col gap-8">
       <div className="mb-2 border-b border-neutral-border-subtle pb-3">
-        <div className="pb-1 text-xl font-medium text-custom-text-100">Secure emails from your own instance</div>
-        <div className="text-sm font-normal text-custom-text-300">
+        <div className="pb-1 text-xl font-medium text-neutral-text-strong">Secure emails from your own instance</div>
+        <div className="text-sm font-normal text-neutral-text-medium">
           Plane can send useful emails to you and your users from your own instance without talking to the Internet.
         </div>
-        <div className="text-sm font-normal text-custom-text-300">
+        <div className="text-sm font-normal text-neutral-text-medium">
           Set it up below and please test your settings before you save them.{" "}
           <span className="text-red-400">Misconfigs can lead to email bounces and errors.</span>
         </div>
diff --git a/web/pages/god-mode/image.tsx b/web/pages/god-mode/image.tsx
index 5529afd35..60ed70d36 100644
--- a/web/pages/god-mode/image.tsx
+++ b/web/pages/god-mode/image.tsx
@@ -23,8 +23,8 @@ const InstanceAdminImagePage: NextPageWithLayout = observer(() => {
   return (
     <div className="flex flex-col gap-8">
       <div className="mb-2 border-b border-neutral-border-subtle pb-3">
-        <div className="pb-1 text-xl font-medium text-custom-text-100">Third-party image libraries</div>
-        <div className="text-sm font-normal text-custom-text-300">
+        <div className="pb-1 text-xl font-medium text-neutral-text-strong">Third-party image libraries</div>
+        <div className="text-sm font-normal text-neutral-text-medium">
           Let your users search and choose images from third-party libraries
         </div>
       </div>
diff --git a/web/pages/god-mode/index.tsx b/web/pages/god-mode/index.tsx
index 2e27bcfaa..e235a457a 100644
--- a/web/pages/god-mode/index.tsx
+++ b/web/pages/god-mode/index.tsx
@@ -24,8 +24,8 @@ const InstanceAdminPage: NextPageWithLayout = observer(() => {
   return (
     <div className="flex h-full w-full flex-col gap-8">
       <div className="mb-2 border-b border-neutral-border-subtle pb-3">
-        <div className="pb-1 text-xl font-medium text-custom-text-100">ID your instance easily</div>
-        <div className="text-sm font-normal text-custom-text-300">
+        <div className="pb-1 text-xl font-medium text-neutral-text-strong">ID your instance easily</div>
+        <div className="text-sm font-normal text-neutral-text-medium">
           Change the name of your instance and instance admin e-mail addresses. If you have a paid subscription, you
           will find your license key here.
         </div>
diff --git a/web/pages/installations/[provider]/index.tsx b/web/pages/installations/[provider]/index.tsx
index 35433e84b..e7a5ba225 100644
--- a/web/pages/installations/[provider]/index.tsx
+++ b/web/pages/installations/[provider]/index.tsx
@@ -63,7 +63,7 @@ const AppPostInstallation: NextPageWithLayout = () => {
 
   return (
     <div className="absolute left-0 top-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-neutral-component-surface-dark">
-      <h2 className="text-2xl text-custom-text-100">Installing. Please wait...</h2>
+      <h2 className="text-2xl text-neutral-text-strong">Installing. Please wait...</h2>
       <Spinner />
     </div>
   );
diff --git a/web/pages/invitations/index.tsx b/web/pages/invitations/index.tsx
index 88952d1d0..678220c6e 100644
--- a/web/pages/invitations/index.tsx
+++ b/web/pages/invitations/index.tsx
@@ -125,7 +125,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
             )}
           </div>
         </div>
-        <div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm text-custom-text-100 sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
+        <div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm text-neutral-text-strong sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
           {currentUser?.email}
         </div>
       </div>
@@ -168,10 +168,12 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
                       </div>
                       <div className="min-w-0 flex-1">
                         <div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
-                        <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
+                        <p className="text-xs text-neutral-text-medium">{ROLE[invitation.role]}</p>
                       </div>
                       <span
-                        className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-custom-text-200"}`}
+                        className={`flex-shrink-0 ${
+                          isSelected ? "text-custom-primary-100" : "text-neutral-text-medium"
+                        }`}
                       >
                         <CheckCircle2 className="h-5 w-5" />
                       </span>
diff --git a/web/pages/onboarding/index.tsx b/web/pages/onboarding/index.tsx
index 2432e232a..a9037a564 100644
--- a/web/pages/onboarding/index.tsx
+++ b/web/pages/onboarding/index.tsx
@@ -174,7 +174,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
                       )}
                       <div>
                         {step != 1 && (
-                          <p className="text-sm font-medium text-custom-text-200">
+                          <p className="text-sm font-medium text-neutral-text-medium">
                             {currentUser?.first_name
                               ? `${currentUser?.first_name} ${currentUser?.last_name ?? ""}`
                               : value.length > 0
@@ -186,7 +186,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
                         <Menu>
                           <Menu.Button className={"flex items-center gap-x-2"}>
                             <span className="text-base font-medium">{user.email}</span>
-                            <ChevronDown className="h-4 w-4 text-custom-text-300" />
+                            <ChevronDown className="h-4 w-4 text-neutral-text-medium" />
                           </Menu.Button>
                           <Transition
                             enter="transition duration-100 ease-out"
diff --git a/web/pages/profile/activity.tsx b/web/pages/profile/activity.tsx
index 27ec2e3ee..13a84b6c6 100644
--- a/web/pages/profile/activity.tsx
+++ b/web/pages/profile/activity.tsx
@@ -45,7 +45,7 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
                       <div className="relative px-1">
                         {activityItem.field ? (
                           activityItem.new_value === "restore" && (
-                            <History className="h-3.5 w-3.5 text-custom-text-200" />
+                            <History className="h-3.5 w-3.5 text-neutral-text-medium" />
                           )
                         ) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
                           <img
@@ -63,8 +63,8 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
                           </div>
                         )}
 
-                        <span className="ring-6 flex h-6 w-6 items-center justify-center rounded-full bg-neutral-component-surface-dark text-custom-text-200 ring-white">
-                          <MessageSquare className="h-6 w-6 !text-2xl text-custom-text-200" aria-hidden="true" />
+                        <span className="ring-6 flex h-6 w-6 items-center justify-center rounded-full bg-neutral-component-surface-dark text-neutral-text-medium ring-white">
+                          <MessageSquare className="h-6 w-6 !text-2xl text-neutral-text-medium" aria-hidden="true" />
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
@@ -74,7 +74,7 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
                               ? activityItem.actor_detail.first_name + " Bot"
                               : activityItem.actor_detail.display_name}
                           </div>
-                          <p className="mt-0.5 text-xs text-custom-text-200">
+                          <p className="mt-0.5 text-xs text-neutral-text-medium">
                             Commented {calculateTimeAgo(activityItem.created_at)}
                           </p>
                         </div>
@@ -119,7 +119,7 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
                                 <div className="flex h-6 w-6 items-center justify-center">
                                   {activityItem.field ? (
                                     activityItem.new_value === "restore" ? (
-                                      <History className="h-5 w-5 text-custom-text-200" />
+                                      <History className="h-5 w-5 text-neutral-text-medium" />
                                     ) : (
                                       <ActivityIcon activity={activityItem} />
                                     )
@@ -143,7 +143,7 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
                             </div>
                           </div>
                           <div className="min-w-0 flex-1 border-b border-neutral-border-subtle py-4">
-                            <div className="flex gap-1 break-words text-sm text-custom-text-200">
+                            <div className="flex gap-1 break-words text-sm text-neutral-text-medium">
                               {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
                                 <span className="text-gray font-medium">Plane</span>
                               ) : activityItem.actor_detail.is_bot ? (
diff --git a/web/pages/profile/index.tsx b/web/pages/profile/index.tsx
index 86e7a5507..cc6b271a8 100644
--- a/web/pages/profile/index.tsx
+++ b/web/pages/profile/index.tsx
@@ -170,7 +170,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                     <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
                       {!watch("avatar") || watch("avatar") === "" ? (
                         <div className="h-16 w-16 rounded-md bg-neutral-component-surface-dark p-2">
-                          <User2 className="h-full w-full text-custom-text-200" />
+                          <User2 className="h-full w-full text-neutral-text-medium" />
                         </div>
                       ) : (
                         <div className="relative h-16 w-16 overflow-hidden">
@@ -206,7 +206,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
 
             <div className="item-center mt-4 flex justify-between px-8">
               <div className="flex flex-col">
-                <div className="item-center flex text-lg font-semibold text-custom-text-100">
+                <div className="item-center flex text-lg font-semibold text-neutral-text-strong">
                   <span>{`${watch("first_name")} ${watch("last_name")}`}</span>
                 </div>
                 <span className="text-sm tracking-tight">{watch("email")}</span>
diff --git a/web/pages/profile/preferences/theme.tsx b/web/pages/profile/preferences/theme.tsx
index c13e840cd..dac1ba779 100644
--- a/web/pages/profile/preferences/theme.tsx
+++ b/web/pages/profile/preferences/theme.tsx
@@ -54,8 +54,8 @@ const ProfilePreferencesThemePage: NextPageWithLayout = observer(() => {
           </div>
           <div className="grid grid-cols-12 gap-4 py-6 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
-              <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>
+              <h4 className="text-lg font-semibold text-neutral-text-strong">Theme</h4>
+              <p className="text-sm text-neutral-text-medium">Select or customize your interface color scheme.</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               <ThemeSwitch value={currentTheme} onChange={handleThemeChange} />