diff --git a/packages/editor/core/src/lib/utils.ts b/packages/editor/core/src/lib/utils.ts
index 5c7a8f08f..9b625f925 100644
--- a/packages/editor/core/src/lib/utils.ts
+++ b/packages/editor/core/src/lib/utils.ts
@@ -9,8 +9,8 @@ interface EditorClassNames {
 export const getEditorClassNames = ({ noBorder, borderOnFocus, customClassName }: EditorClassNames) =>
   cn(
     "relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md",
-    noBorder ? "" : "border border-custom-border-200",
-    borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0",
+    noBorder ? "" : "border border-neutral-border-medium",
+    borderOnFocus ? "focus:border border-neutral-border-medium" : "focus:border-0",
     customClassName
   );
 
diff --git a/packages/editor/core/src/ui/extensions/index.tsx b/packages/editor/core/src/ui/extensions/index.tsx
index 19d8ce894..a40f97c88 100644
--- a/packages/editor/core/src/ui/extensions/index.tsx
+++ b/packages/editor/core/src/ui/extensions/index.tsx
@@ -63,7 +63,7 @@ export const CoreEditorExtensions = (
     },
   }),
   CustomQuoteExtension.configure({
-    HTMLAttributes: { className: "border-l-4 border-custom-border-300" },
+    HTMLAttributes: { className: "border-l-4 border-neutral-border-medium" },
   }),
   CustomKeymap,
   ListKeymap,
@@ -80,7 +80,7 @@ export const CoreEditorExtensions = (
   }),
   ImageExtension(deleteFile, restoreFile, cancelUploadImage).configure({
     HTMLAttributes: {
-      class: "rounded-lg border border-custom-border-300",
+      class: "rounded-lg border border-neutral-border-medium",
     },
   }),
   TiptapUnderline,
diff --git a/packages/editor/core/src/ui/plugins/upload-image.tsx b/packages/editor/core/src/ui/plugins/upload-image.tsx
index 738653d71..3c432e7a8 100644
--- a/packages/editor/core/src/ui/plugins/upload-image.tsx
+++ b/packages/editor/core/src/ui/plugins/upload-image.tsx
@@ -21,7 +21,7 @@ export const UploadImagesPlugin = (cancelUploadImage?: () => any) =>
           const placeholder = document.createElement("div");
           placeholder.setAttribute("class", "img-placeholder");
           const image = document.createElement("img");
-          image.setAttribute("class", "opacity-10 rounded-lg border border-custom-border-300");
+          image.setAttribute("class", "opacity-10 rounded-lg border border-neutral-border-medium");
           image.src = src;
           placeholder.appendChild(image);
 
diff --git a/packages/editor/core/src/ui/read-only/extensions.tsx b/packages/editor/core/src/ui/read-only/extensions.tsx
index b0879d8cd..708fefd7f 100644
--- a/packages/editor/core/src/ui/read-only/extensions.tsx
+++ b/packages/editor/core/src/ui/read-only/extensions.tsx
@@ -41,7 +41,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
     },
     blockquote: {
       HTMLAttributes: {
-        class: "border-l-4 border-custom-border-300",
+        class: "border-l-4 border-neutral-border-medium",
       },
     },
     code: {
@@ -69,7 +69,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
   }),
   ReadOnlyImageExtension.configure({
     HTMLAttributes: {
-      class: "rounded-lg border border-custom-border-300",
+      class: "rounded-lg border border-neutral-border-medium",
     },
   }),
   HorizontalRule,
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 3501785a7..0d75cfa7e 100644
--- a/packages/editor/document-editor/src/ui/components/editor-header.tsx
+++ b/packages/editor/document-editor/src/ui/components/editor-header.tsx
@@ -42,7 +42,7 @@ export const EditorHeader = (props: IEditorHeader) => {
   } = props;
 
   return (
-    <div className="flex items-center border-b border-custom-border-200 px-5 py-2">
+    <div className="flex items-center border-b border-neutral-border-medium px-5 py-2">
       <div className="w-56 flex-shrink-0 lg:w-72">
         <SummaryPopover
           editor={editor}
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 f78dd3473..070948363 100644
--- a/packages/editor/document-editor/src/ui/components/info-popover.tsx
+++ b/packages/editor/document-editor/src/ui/components/info-popover.tsx
@@ -43,7 +43,7 @@ export const InfoPopover: React.FC<Props> = (props) => {
       </button>
       {isPopoverOpen && (
         <div
-          className="z-10 w-64 space-y-2.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg"
+          className="z-10 w-64 space-y-2.5 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 p-3 shadow-custom-shadow-rg"
           ref={setPopperElement}
           style={infoPopoverStyles.popper}
           {...infoPopoverAttributes.popper}
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 136d04e01..73d2c5dce 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
@@ -122,7 +122,7 @@ export const LinkEditView = ({
   return (
     <div
       onKeyDown={(e) => e.key === "Enter" && viewProps.closeLinkView()}
-      className="shadow-md rounded p-2 flex flex-col gap-3 bg-custom-background-90 border-custom-border-100 border-2"
+      className="shadow-md rounded p-2 flex flex-col gap-3 bg-custom-background-90 border-neutral-border-subtle border-2"
     >
       <InputView
         label={"URL"}
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 ff3fd0263..f6a5fa34d 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-custom-background-90 border-custom-border-100 border-2 text-custom-text-300 text-xs">
+      <div className="shadow-md items-center rounded p-2 flex gap-3 bg-custom-background-90 border-neutral-border-subtle border-2 text-custom-text-300 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 d3ec64f1c..0268f135d 100644
--- a/packages/editor/document-editor/src/ui/components/summary-popover.tsx
+++ b/packages/editor/document-editor/src/ui/components/summary-popover.tsx
@@ -42,7 +42,7 @@ export const SummaryPopover: React.FC<Props> = (props) => {
       </button>
       {!sidePeekVisible && (
         <div
-          className="z-10 hidden max-h-80 w-64 overflow-y-auto rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg group-hover/summary-popover:block"
+          className="z-10 hidden max-h-80 w-64 overflow-y-auto rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 p-3 shadow-custom-shadow-rg group-hover/summary-popover:block"
           ref={setPopperElement}
           style={summaryPopoverStyles.popper}
           {...summaryPopoverAttributes.popper}
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 43843e507..6c6b55164 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
@@ -36,7 +36,7 @@ export const VerticalDropdownMenu = ({ items }: IVerticalDropdownMenuProps) => (
     maxHeight={"md"}
     className={"h-4.5 mt-1"}
     placement={"bottom-start"}
-    optionsClassName={"border-custom-border border-r border-solid transition-all duration-200 ease-in-out "}
+    optionsClassName="border-neutral-border-medium border-r border-solid transition-all duration-200 ease-in-out"
     customButton={<MoreVertical size={14} />}
   >
     {items.map((item) => (
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 869c7a8c6..530e4d278 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
@@ -145,7 +145,7 @@ const IssueSuggestionList = ({
     <div
       id="issue-list-container"
       ref={commandListContainer}
-      className=" fixed z-[10] max-h-80 w-60 overflow-y-auto overflow-x-hidden rounded-md border border-custom-border-100 bg-custom-background-100 px-1 shadow-custom-shadow-xs transition-all"
+      className=" fixed z-[10] max-h-80 w-60 overflow-y-auto overflow-x-hidden rounded-md border border-neutral-border-subtle bg-custom-background-100 px-1 shadow-custom-shadow-xs transition-all"
     >
       {sections.map((section) => {
         const sectionItems = displayedItems[section];
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 d3b6fd04f..bed14cb33 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
@@ -8,7 +8,7 @@ export const IssueWidgetCard = (props) => (
     <div
       className={`${
         props.selected ? "border-custom-primary-200 border-[2px]" : ""
-      } w-full h-[100px] cursor-pointer space-y-2 rounded-md border-[0.5px] border-custom-border-200 shadow-custom-shadow-2xs`}
+      } 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">
         {props.node.attrs.project_identifier}-{props.node.attrs.sequence_id}
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 cac42e1f9..bb8589eb6 100644
--- a/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
+++ b/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
@@ -77,7 +77,7 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
   }
 
   return (
-    <div className="flex items-center divide-x divide-custom-border-200">
+    <div className="flex items-center divide-x divide-neutral-border-medium">
       <div className="flex items-center gap-0.5 pr-2">
         {basicMarkItems.map((item) => (
           <button
diff --git a/packages/editor/extensions/Readme.md b/packages/editor/extensions/Readme.md
index 39aca1226..b2e7456cd 100644
--- a/packages/editor/extensions/Readme.md
+++ b/packages/editor/extensions/Readme.md
@@ -92,6 +92,6 @@ Here is an example of how to use the `RichReadOnlyEditor` component
 ```tsx
 <LiteReadOnlyEditor
   value={comment.comment_html}
-  customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+  customClassName="text-xs border border-neutral-border-medium bg-custom-background-100"
 />
 ```
diff --git a/packages/editor/extensions/src/extensions/slash-commands.tsx b/packages/editor/extensions/src/extensions/slash-commands.tsx
index 88e257cef..70cee83d5 100644
--- a/packages/editor/extensions/src/extensions/slash-commands.tsx
+++ b/packages/editor/extensions/src/extensions/slash-commands.tsx
@@ -291,7 +291,7 @@ const CommandList = ({ items, command }: { items: CommandItemProps[]; command: a
     <div
       id="slash-command"
       ref={commandListContainer}
-      className="fixed z-50 h-auto max-h-[330px] w-52 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-100 px-1 py-2 shadow-md transition-all"
+      className="fixed z-50 h-auto max-h-[330px] w-52 overflow-y-auto rounded-md border border-neutral-border-medium bg-custom-background-100 px-1 py-2 shadow-md transition-all"
     >
       {items.map((item, index) => (
         <button
diff --git a/packages/editor/lite-text-editor/Readme.md b/packages/editor/lite-text-editor/Readme.md
index 1f10f5ff4..cd9ce0dd5 100644
--- a/packages/editor/lite-text-editor/Readme.md
+++ b/packages/editor/lite-text-editor/Readme.md
@@ -92,6 +92,6 @@ Here is an example of how to use the `RichReadOnlyEditor` component
 ```tsx
 <LiteReadOnlyEditor
   value={comment.comment_html}
-  customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+  customClassName="text-xs border border-neutral-border-medium bg-custom-background-100"
 />
 ```
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 71ad4e0e1..3aed351ab 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
@@ -95,7 +95,7 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
   return (
     <div className="flex h-9 w-full items-stretch gap-1.5 overflow-x-scroll">
       {props.commentAccessSpecifier && (
-        <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded border-[0.5px] border-custom-border-200 p-1">
+        <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded border-[0.5px] border-neutral-border-medium p-1">
           {props?.commentAccessSpecifier.commentAccess?.map((access) => (
             <Tooltip key={access.key} tooltipContent={access.label}>
               <button
@@ -118,9 +118,9 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
           ))}
         </div>
       )}
-      <div className="flex w-full items-stretch justify-between gap-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 p-1">
+      <div className="flex w-full items-stretch justify-between gap-2 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-90 p-1">
         <div className="flex items-stretch">
-          <div className="flex items-stretch gap-0.5 border-r border-custom-border-200 pr-2.5">
+          <div className="flex items-stretch gap-0.5 border-r border-neutral-border-medium pr-2.5">
             {basicTextFormattingItems.map((item) => (
               <Tooltip key={item.name} tooltipContent={<span className="capitalize">{item.name}</span>}>
                 <button
@@ -143,7 +143,7 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
               </Tooltip>
             ))}
           </div>
-          <div className="flex items-stretch gap-0.5 border-r border-custom-border-200 px-2.5">
+          <div className="flex items-stretch gap-0.5 border-r border-neutral-border-medium px-2.5">
             {listFormattingItems.map((item) => (
               <Tooltip key={item.name} tooltipContent={<span className="capitalize">{item.name}</span>}>
                 <button
@@ -166,7 +166,7 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
               </Tooltip>
             ))}
           </div>
-          <div className="flex items-stretch gap-0.5 border-r border-custom-border-200 px-2.5">
+          <div className="flex items-stretch gap-0.5 border-r border-neutral-border-medium px-2.5">
             {userActionItems.map((item) => (
               <Tooltip key={item.name} tooltipContent={<span className="capitalize">{item.name}</span>}>
                 <button
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 2e7dd25b8..d4652bb56 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
@@ -94,7 +94,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
   return (
     <BubbleMenu
       {...bubbleMenuProps}
-      className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
+      className="flex w-fit divide-x divide-neutral-border-medium rounded border border-neutral-border-medium bg-custom-background-100 shadow-xl"
     >
       {isSelecting ? null : (
         <>
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 5ae0c6f53..46a8fed78 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
@@ -48,7 +48,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
       </button>
       {isOpen && (
         <div
-          className="dow-xl fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 animate-in fade-in slide-in-from-top-1"
+          className="dow-xl fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-neutral-border-medium bg-custom-background-100 animate-in fade-in slide-in-from-top-1"
           onKeyDown={(e) => {
             if (e.key === "Enter") {
               e.preventDefault();
@@ -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-custom-border-300 bg-custom-background-100 p-1 text-sm outline-none placeholder:text-custom-text-400"
+            className="flex-1 border-r border-neutral-border-medium bg-custom-background-100 p-1 text-sm outline-none placeholder:text-custom-text-400"
             defaultValue={editor.getAttributes("link").href || ""}
           />
           {editor.getAttributes("link").href ? (
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 012a51a44..4e70ff6d9 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
@@ -55,7 +55,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
       </button>
 
       {isOpen && (
-        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
+        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-neutral-border-medium bg-custom-background-100 p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
           {items.map((item) => (
             <button
               key={item.name}
@@ -72,7 +72,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
               )}
             >
               <div className="flex items-center space-x-2">
-                <div className="rounded-sm border border-custom-border-300 p-1">
+                <div className="rounded-sm border border-neutral-border-medium p-1">
                   <item.icon className="h-3 w-3" />
                 </div>
                 <span>{item.name}</span>
diff --git a/packages/ui/src/badge/helper.tsx b/packages/ui/src/badge/helper.tsx
index 88e6fd8d3..c198d2786 100644
--- a/packages/ui/src/badge/helper.tsx
+++ b/packages/ui/src/badge/helper.tsx
@@ -57,7 +57,7 @@ export const badgeStyling: IBadgeStyling = {
   },
 
   neutral: {
-    default: `text-custom-background-100 bg-custom-text-100 border border-custom-border-200`,
+    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`,
   },
@@ -67,7 +67,7 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed !text-custom-text-400`,
   },
   "outline-neutral": {
-    default: `text-custom-text-200 bg-custom-background-100 border border-custom-border-200`,
+    default: `text-custom-text-200 bg-custom-background-100 border border-neutral-border-medium`,
     hover: `hover:text-custom-text-100 hover:bg-custom-border-200`,
     disabled: `cursor-not-allowed !text-custom-text-400`,
   },
diff --git a/packages/ui/src/button/helper.tsx b/packages/ui/src/button/helper.tsx
index 9f7163d74..b15897164 100644
--- a/packages/ui/src/button/helper.tsx
+++ b/packages/ui/src/button/helper.tsx
@@ -55,7 +55,7 @@ export const buttonStyling: IButtonStyling = {
     disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
   },
   "neutral-primary": {
-    default: `text-custom-text-200 bg-custom-background-100 border border-custom-border-200`,
+    default: `text-custom-text-200 bg-custom-background-100 border border-neutral-border-medium`,
     hover: `hover:bg-custom-background-90`,
     pressed: `focus:text-custom-text-300 focus:bg-custom-background-90`,
     disabled: `cursor-not-allowed !text-custom-text-400`,
diff --git a/packages/ui/src/button/toggle-switch.tsx b/packages/ui/src/button/toggle-switch.tsx
index 9a1c01ae9..37fe9344c 100644
--- a/packages/ui/src/button/toggle-switch.tsx
+++ b/packages/ui/src/button/toggle-switch.tsx
@@ -21,7 +21,7 @@ const ToggleSwitch: React.FC<IToggleSwitchProps> = (props) => {
       onChange={onChange}
       className={`relative inline-flex flex-shrink-0 ${
         size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10"
-      } flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${
+      } flex-shrink-0 cursor-pointer rounded-full border border-neutral-border-medium transition-colors duration-200 ease-in-out focus:outline-none ${
         value ? "bg-custom-primary-100" : "bg-gray-700"
       } ${className || ""} ${disabled ? "cursor-not-allowed" : ""}`}
     >
diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
index 7ef99370f..45c3e41b9 100644
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -61,7 +61,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     >
       <div
         className={cn(
-          "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
+          "my-1 overflow-y-scroll rounded-md border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
           {
             "max-h-60": maxHeight === "lg",
             "max-h-48": maxHeight === "md",
@@ -133,7 +133,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                     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-custom-background-90 text-custom-text-100" : "text-custom-text-200"
-                    } ${noBorder ? "" : "border border-custom-border-300 shadow-sm focus:outline-none"} ${
+                    } ${noBorder ? "" : "border border-neutral-border-medium shadow-sm focus:outline-none"} ${
                       disabled
                         ? "cursor-not-allowed text-custom-text-200"
                         : "cursor-pointer hover:bg-custom-background-80"
diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/ui/src/dropdowns/custom-search-select.tsx
index d1778e31a..4cfd51b59 100644
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@@ -100,7 +100,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                 <button
                   ref={setReferenceElement}
                   type="button"
-                  className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 ${
+                  className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-neutral-border-medium ${
                     input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
                   } ${
                     disabled
@@ -118,14 +118,14 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
               <Combobox.Options className="fixed z-10" static>
                 <div
                   className={cn(
-                    "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
+                    "my-1 overflow-y-scroll rounded-md border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
                     optionsClassName
                   )}
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}
                 >
-                  <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+                  <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} />
                     <Combobox.Input
                       className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx
index 0fa183cb2..5fc27c920 100644
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -77,7 +77,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
             <button
               ref={setReferenceElement}
               type="button"
-              className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 ${
+              className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-neutral-border-medium ${
                 input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
               } ${
                 disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
@@ -94,7 +94,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
         <Listbox.Options className="fixed z-10" onClick={() => closeDropdown()} static>
           <div
             className={cn(
-              "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
+              "my-1 overflow-y-scroll rounded-md border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
               {
                 "max-h-60": maxHeight === "lg",
                 "max-h-48": maxHeight === "md",
diff --git a/packages/ui/src/form-fields/input-color-picker.tsx b/packages/ui/src/form-fields/input-color-picker.tsx
index 05cb75f04..b9e79c487 100644
--- a/packages/ui/src/form-fields/input-color-picker.tsx
+++ b/packages/ui/src/form-fields/input-color-picker.tsx
@@ -45,7 +45,7 @@ export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
         onChange={handleInputChange}
         hasError={hasError}
         placeholder={placeholder}
-        className={`border-[0.5px] border-custom-border-200 ${className}`}
+        className={`border-[0.5px] border-neutral-border-medium ${className}`}
         style={style}
       />
 
@@ -93,7 +93,7 @@ export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
               >
                 <Popover.Panel>
                   <div
-                    className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
+                    className="z-10 overflow-hidden rounded border border-neutral-border-medium bg-custom-background-100 shadow-custom-shadow-rg"
                     ref={setPopperElement}
                     style={styles.popper}
                     {...attributes.popper}
diff --git a/packages/ui/src/form-fields/input.tsx b/packages/ui/src/form-fields/input.tsx
index 6688d6778..317e9d575 100644
--- a/packages/ui/src/form-fields/input.tsx
+++ b/packages/ui/src/form-fields/input.tsx
@@ -18,7 +18,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
       name={name}
       className={`block rounded-md bg-transparent text-sm placeholder-custom-text-400 focus:outline-none ${
         mode === "primary"
-          ? "rounded-md border-[0.5px] border-custom-border-200"
+          ? "rounded-md border-[0.5px] border-neutral-border-medium"
           : mode === "transparent"
             ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
             : mode === "true-transparent"
diff --git a/packages/ui/src/form-fields/textarea.tsx b/packages/ui/src/form-fields/textarea.tsx
index b93c1aba8..464487072 100644
--- a/packages/ui/src/form-fields/textarea.tsx
+++ b/packages/ui/src/form-fields/textarea.tsx
@@ -48,7 +48,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, re
       cols={cols}
       className={`no-scrollbar w-full bg-transparent px-3 py-2 placeholder-custom-text-400 outline-none ${
         mode === "primary"
-          ? "rounded-md border-[0.5px] border-custom-border-200"
+          ? "rounded-md border-[0.5px] border-neutral-border-medium"
           : mode === "transparent"
             ? "focus:ring-theme rounded border-none bg-transparent ring-0 transition-all focus:ring-1"
             : ""
diff --git a/packages/ui/src/icons/priority-icon.tsx b/packages/ui/src/icons/priority-icon.tsx
index 0b98b3e6b..4c8908701 100644
--- a/packages/ui/src/icons/priority-icon.tsx
+++ b/packages/ui/src/icons/priority-icon.tsx
@@ -20,7 +20,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
     high: "bg-orange-500/20 text-orange-500 border-orange-500",
     medium: "bg-yellow-500/20 text-yellow-500 border-yellow-500",
     low: "bg-custom-primary-100/20 text-custom-primary-100 border-custom-primary-100",
-    none: "bg-custom-background-80 text-custom-text-200 border-custom-border-300",
+    none: "bg-custom-background-80 text-custom-text-200 border-neutral-border-medium",
   };
 
   // get priority icon
diff --git a/space/components/accounts/github-sign-in.tsx b/space/components/accounts/github-sign-in.tsx
index 322011ae3..b76deb79d 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-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80">
+        <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-custom-background-80">
           <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 644f732f3..2aa6324d2 100644
--- a/space/components/accounts/onboarding-form.tsx
+++ b/space/components/accounts/onboarding-form.tsx
@@ -125,7 +125,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
                 <Listbox as="div" value={value} onChange={onChange} className="relative flex-shrink-0 text-left">
                   <Listbox.Button
                     type="button"
-                    className={`flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-300 px-3 py-2 text-sm shadow-sm duration-300 focus:outline-none`}
+                    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>
                     <ChevronDown className="h-3 w-3" aria-hidden="true" strokeWidth={2} />
@@ -141,7 +141,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
                     leaveTo="transform opacity-0 scale-95"
                   >
                     <Listbox.Options
-                      className={`absolute left-0 z-10 mt-1 max-h-36 w-full origin-top-left overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none`}
+                      className={`absolute left-0 z-10 mt-1 max-h-36 w-full origin-top-left overflow-y-auto rounded-md border border-neutral-border-medium bg-custom-background-90 text-xs shadow-lg focus:outline-none`}
                     >
                       <div className="space-y-1 p-2">
                         {USER_ROLES.map((role) => (
diff --git a/space/components/accounts/user-logged-in.tsx b/space/components/accounts/user-logged-in.tsx
index de0b18d51..1ebe514e7 100644
--- a/space/components/accounts/user-logged-in.tsx
+++ b/space/components/accounts/user-logged-in.tsx
@@ -14,11 +14,11 @@ export const UserLoggedIn = () => {
 
   return (
     <div className="flex h-screen w-screen flex-col">
-      <div className="relative flex w-full items-center justify-between gap-4 border-b border-custom-border-200 px-6 py-5">
+      <div className="relative flex w-full items-center justify-between gap-4 border-b border-neutral-border-medium px-6 py-5">
         <div>
           <Image src={PlaneLogo} alt="User already logged in" />
         </div>
-        <div className="flex items-center gap-2 rounded border border-custom-border-200 p-2">
+        <div className="flex items-center gap-2 rounded border border-neutral-border-medium p-2">
           {user.avatar && user.avatar !== "" ? (
             <div className="h-5 w-5 rounded-full">
               {/* eslint-disable-next-line @next/next/no-img-element */}
diff --git a/space/components/issues/board-views/block-downvotes.tsx b/space/components/issues/board-views/block-downvotes.tsx
index 4326a8823..1f83971df 100644
--- a/space/components/issues/board-views/block-downvotes.tsx
+++ b/space/components/issues/board-views/block-downvotes.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 export const IssueBlockDownVotes = ({ number }: { number: number }) => (
-  <div className="flex h-6 items-center rounded border-[0.5px] border-custom-border-300 px-1.5 py-1 pl-1 text-xs 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-custom-text-300">
     <span className="material-symbols-rounded !m-0 rotate-180 !p-0 text-base text-custom-text-300">
       arrow_upward_alt
     </span>
diff --git a/space/components/issues/board-views/block-due-date.tsx b/space/components/issues/board-views/block-due-date.tsx
index 2920100a8..40d696a07 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-custom-border-300 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-custom-text-100">
       <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 05f6a039f..8f1dae5e3 100644
--- a/space/components/issues/board-views/block-labels.tsx
+++ b/space/components/issues/board-views/block-labels.tsx
@@ -7,7 +7,7 @@ export const IssueBlockLabels = ({ labels }: any) => (
       labels.map((_label: any) => (
         <div
           key={_label?.id}
-          className="flex flex-shrink-0 cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
+          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="h-2 w-2 rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
diff --git a/space/components/issues/board-views/block-state.tsx b/space/components/issues/board-views/block-state.tsx
index 4afdbb990..4ce9ba293 100644
--- a/space/components/issues/board-views/block-state.tsx
+++ b/space/components/issues/board-views/block-state.tsx
@@ -8,7 +8,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-custom-border-300 px-2.5 py-1 text-xs shadow-sm duration-300 focus:outline-none">
+    <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">
         <StateGroupIcon stateGroup={state.group} color={state.color} />
         <div className="text-xs">{state?.name}</div>
diff --git a/space/components/issues/board-views/block-upvotes.tsx b/space/components/issues/board-views/block-upvotes.tsx
index 3927acac4..61bffbb78 100644
--- a/space/components/issues/board-views/block-upvotes.tsx
+++ b/space/components/issues/board-views/block-upvotes.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 export const IssueBlockUpVotes = ({ number }: { number: number }) => (
-  <div className="flex h-6 items-center rounded border-[0.5px] border-custom-border-300 px-1.5 py-1 pl-1 text-xs 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-custom-text-300">
     <span className="material-symbols-rounded !m-0 !p-0 text-base text-custom-text-300">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 1a7eb9105..68cc52cca 100644
--- a/space/components/issues/board-views/kanban/block.tsx
+++ b/space/components/issues/board-views/kanban/block.tsx
@@ -44,7 +44,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-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs">
+    <div className="flex flex-col gap-1.5 space-y-2 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs">
       {/* id */}
       <div className="break-words text-xs text-custom-text-300">
         {projectStore?.project?.identifier}-{issue?.sequence_id}
diff --git a/space/components/issues/board-views/list/index.tsx b/space/components/issues/board-views/list/index.tsx
index 441935def..43c943b00 100644
--- a/space/components/issues/board-views/list/index.tsx
+++ b/space/components/issues/board-views/list/index.tsx
@@ -21,7 +21,7 @@ export const IssueListView = observer(() => {
             <IssueListHeader state={_state} />
             {issueStore.getFilteredIssuesByState(_state.id) &&
             issueStore.getFilteredIssuesByState(_state.id).length > 0 ? (
-              <div className="divide-y divide-custom-border-200">
+              <div className="divide-y divide-neutral-border-medium">
                 {issueStore.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
                   <IssueListBlock key={_issue.id} issue={_issue} />
                 ))}
diff --git a/space/components/issues/filters/applied-filters/filters-list.tsx b/space/components/issues/filters/applied-filters/filters-list.tsx
index c971dbfe7..591be7e35 100644
--- a/space/components/issues/filters/applied-filters/filters-list.tsx
+++ b/space/components/issues/filters/applied-filters/filters-list.tsx
@@ -31,7 +31,7 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {
         return (
           <div
             key={filterKey}
-            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
+            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>
             <div className="flex flex-wrap items-center gap-1">
@@ -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-custom-border-200 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-custom-text-300 hover:text-custom-text-200"
       >
         Clear all
         <X size={12} strokeWidth={2} />
diff --git a/space/components/issues/filters/applied-filters/root.tsx b/space/components/issues/filters/applied-filters/root.tsx
index a7afaa673..fa33694df 100644
--- a/space/components/issues/filters/applied-filters/root.tsx
+++ b/space/components/issues/filters/applied-filters/root.tsx
@@ -77,7 +77,7 @@ export const IssueAppliedFilters: FC = observer(() => {
   if (Object.keys(appliedFilters).length === 0) return null;
 
   return (
-    <div className="border-b border-custom-border-200 p-5 py-3">
+    <div className="border-b border-neutral-border-medium p-5 py-3">
       <AppliedFiltersList
         appliedFilters={appliedFilters || {}}
         handleRemoveFilter={handleRemoveFilter}
diff --git a/space/components/issues/filters/helpers/dropdown.tsx b/space/components/issues/filters/helpers/dropdown.tsx
index 809cd6f5a..cde53d231 100644
--- a/space/components/issues/filters/helpers/dropdown.tsx
+++ b/space/components/issues/filters/helpers/dropdown.tsx
@@ -46,7 +46,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
             >
               <Popover.Panel>
                 <div
-                  className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
+                  className="z-10 overflow-hidden rounded border border-neutral-border-medium bg-custom-background-100 shadow-custom-shadow-rg"
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}
diff --git a/space/components/issues/filters/helpers/filter-option.tsx b/space/components/issues/filters/helpers/filter-option.tsx
index f46d962ea..1156c4b78 100644
--- a/space/components/issues/filters/helpers/filter-option.tsx
+++ b/space/components/issues/filters/helpers/filter-option.tsx
@@ -21,7 +21,7 @@ export const FilterOption: React.FC<Props> = (props) => {
     >
       <div
         className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-custom-background-90 ${
-          isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-custom-border-300"
+          isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-neutral-border-medium"
         } ${multiple ? "rounded-sm" : "rounded-full"}`}
       >
         {isChecked && <Check size={10} strokeWidth={3} />}
diff --git a/space/components/issues/filters/selection.tsx b/space/components/issues/filters/selection.tsx
index b44912190..d5e7d79d3 100644
--- a/space/components/issues/filters/selection.tsx
+++ b/space/components/issues/filters/selection.tsx
@@ -28,7 +28,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
       <div className="bg-custom-background-100 p-2.5 pb-0">
-        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
+        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-90 px-1.5 py-1 text-xs">
           <Search className="text-custom-text-400" size={12} strokeWidth={2} />
           <input
             type="text"
@@ -45,7 +45,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
           )}
         </div>
       </div>
-      <div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5">
+      <div className="h-full w-full divide-y divide-neutral-border-medium overflow-y-auto px-2.5">
         {/* priority */}
         {isFilterEnabled("priority") && (
           <div className="py-2">
diff --git a/space/components/issues/navbar/index.tsx b/space/components/issues/navbar/index.tsx
index 0bc493b16..8dcd78d00 100644
--- a/space/components/issues/navbar/index.tsx
+++ b/space/components/issues/navbar/index.tsx
@@ -168,7 +168,7 @@ const IssueNavbar = observer(() => {
       </div>
 
       {user ? (
-        <div className="flex items-center gap-2 rounded border border-custom-border-200 p-2">
+        <div className="flex items-center gap-2 rounded border border-neutral-border-medium p-2">
           <Avatar name={user?.display_name} src={user?.avatar} shape="square" size="sm" />
           <h6 className="text-xs font-medium">{user.display_name}</h6>
         </div>
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 7c6abe199..76062d350 100644
--- a/space/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/space/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -72,7 +72,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
             }
             height={30}
             width={30}
-            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-200"
+            className="grid h-7 w-7 place-items-center rounded-full border-2 border-neutral-border-medium"
           />
         ) : (
           <div className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}>
@@ -143,7 +143,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
             <LiteReadOnlyEditorWithRef
               ref={showEditorRef}
               value={comment.comment_html}
-              customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+              customClassName="text-xs border border-neutral-border-medium bg-custom-background-100"
               mentionHighlights={mentionsConfig.mentionHighlights}
             />
             <CommentReactions commentId={comment.id} projectId={comment.project} />
@@ -170,7 +170,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Menu.Items className="absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 p-1 text-xs shadow-lg focus:outline-none">
+            <Menu.Items className="absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll whitespace-nowrap rounded-md border border-neutral-border-medium bg-custom-background-90 p-1 text-xs shadow-lg focus:outline-none">
               <Menu.Item>
                 {({ active }) => (
                   <div className="py-1">
diff --git a/space/components/issues/peek-overview/full-screen-peek-view.tsx b/space/components/issues/peek-overview/full-screen-peek-view.tsx
index e07620c05..7d3045a79 100644
--- a/space/components/issues/peek-overview/full-screen-peek-view.tsx
+++ b/space/components/issues/peek-overview/full-screen-peek-view.tsx
@@ -19,7 +19,7 @@ export const FullScreenPeekView: React.FC<Props> = observer((props) => {
   const { handleClose, issueDetails } = props;
 
   return (
-    <div className="grid h-full w-full grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
+    <div className="grid h-full w-full grid-cols-10 divide-x divide-neutral-border-medium overflow-hidden">
       <div className="col-span-7 flex h-full w-full flex-col overflow-hidden">
         <div className="w-full p-5">
           <PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
@@ -31,7 +31,7 @@ export const FullScreenPeekView: React.FC<Props> = observer((props) => {
               <PeekOverviewIssueDetails issueDetails={issueDetails} />
             </div>
             {/* divider */}
-            <div className="my-5 h-[1] w-full border-t border-custom-border-200" />
+            <div className="my-5 h-[1] w-full border-t border-neutral-border-medium" />
             {/* issue activity/comments */}
             <div className="w-full pb-5">
               <PeekOverviewIssueActivity issueDetails={issueDetails} />
diff --git a/space/components/issues/peek-overview/header.tsx b/space/components/issues/peek-overview/header.tsx
index 72a302b90..b5a1ac0c0 100644
--- a/space/components/issues/peek-overview/header.tsx
+++ b/space/components/issues/peek-overview/header.tsx
@@ -88,7 +88,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
               leaveFrom="transform opacity-100 scale-100"
               leaveTo="transform opacity-0 scale-95"
             >
-              <Listbox.Options className="absolute left-0 z-10 mt-1 min-w-[8rem] origin-top-left overflow-y-auto whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none">
+              <Listbox.Options className="absolute left-0 z-10 mt-1 min-w-[8rem] origin-top-left overflow-y-auto whitespace-nowrap rounded-md border border-neutral-border-medium bg-custom-background-90 text-xs shadow-lg focus:outline-none">
                 <div className="space-y-1 p-2">
                   {peekModes.map((mode) => (
                     <Listbox.Option
diff --git a/space/components/issues/peek-overview/issue-activity.tsx b/space/components/issues/peek-overview/issue-activity.tsx
index cbb27679b..4f6978f6d 100644
--- a/space/components/issues/peek-overview/issue-activity.tsx
+++ b/space/components/issues/peek-overview/issue-activity.tsx
@@ -50,7 +50,7 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer(() => {
               )}
             </>
           ) : (
-            <div className="mt-4 flex items-center justify-between gap-2 rounded border border-custom-border-300 bg-custom-background-80 px-2 py-2.5">
+            <div className="mt-4 flex items-center justify-between gap-2 rounded border border-neutral-border-medium bg-custom-background-80 px-2 py-2.5">
               <p className="flex gap-2 overflow-hidden break-words text-sm text-custom-text-200">
                 <Icon iconName="lock" className="!text-sm" />
                 Sign in to add your comment
diff --git a/space/components/issues/peek-overview/issue-properties.tsx b/space/components/issues/peek-overview/issue-properties.tsx
index a6dcedf08..fc4c8dc37 100644
--- a/space/components/issues/peek-overview/issue-properties.tsx
+++ b/space/components/issues/peek-overview/issue-properties.tsx
@@ -42,7 +42,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
   };
 
   return (
-    <div className={mode === "full" ? "divide-y divide-custom-border-200" : ""}>
+    <div className={mode === "full" ? "divide-y divide-neutral-border-medium" : ""}>
       {mode === "full" && (
         <div className="flex justify-between gap-2 pb-3">
           <h6 className="flex items-center gap-2 font-medium">
@@ -89,7 +89,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
                       ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
                       : priority?.key === "low"
                         ? "border-green-500/20 bg-green-500/20 text-green-500"
-                        : "border-custom-border-200 bg-custom-background-80"
+                        : "border-neutral-border-medium bg-custom-background-80"
               }`}
             >
               {priority && (
@@ -108,7 +108,7 @@ 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-custom-border-100 bg-custom-background-80 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-custom-background-80 px-2.5 py-1 text-xs text-custom-text-100">
                 <span className={`material-symbols-rounded -my-0.5 text-sm ${dueDateIcon.className}`}>
                   {dueDateIcon.iconName}
                 </span>
diff --git a/space/components/issues/peek-overview/issue-vote-reactions.tsx b/space/components/issues/peek-overview/issue-vote-reactions.tsx
index 40ad145d0..2d35d6a71 100644
--- a/space/components/issues/peek-overview/issue-vote-reactions.tsx
+++ b/space/components/issues/peek-overview/issue-vote-reactions.tsx
@@ -83,7 +83,7 @@ export const IssueVotes: React.FC = observer(() => {
             });
           }}
           className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 focus:outline-none ${
-            isUpVotedByUser ? "border-custom-primary-200 text-custom-primary-200" : "border-custom-border-300"
+            isUpVotedByUser ? "border-custom-primary-200 text-custom-primary-200" : "border-neutral-border-medium"
           }`}
         >
           <span className="material-symbols-rounded !m-0 !p-0 text-base">arrow_upward_alt</span>
@@ -118,7 +118,7 @@ export const IssueVotes: React.FC = observer(() => {
             });
           }}
           className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 focus:outline-none ${
-            isDownVotedByUser ? "border-red-600 text-red-600" : "border-custom-border-300"
+            isDownVotedByUser ? "border-red-600 text-red-600" : "border-neutral-border-medium"
           }`}
         >
           <span className="material-symbols-rounded !m-0 !p-0 text-base">arrow_downward_alt</span>
diff --git a/space/components/issues/peek-overview/side-peek-view.tsx b/space/components/issues/peek-overview/side-peek-view.tsx
index 0ec82a8ef..c79e086b4 100644
--- a/space/components/issues/peek-overview/side-peek-view.tsx
+++ b/space/components/issues/peek-overview/side-peek-view.tsx
@@ -34,7 +34,7 @@ export const SidePeekView: React.FC<Props> = observer((props) => {
             <PeekOverviewIssueProperties issueDetails={issueDetails} />
           </div>
           {/* divider */}
-          <div className="my-5 h-[1] w-full border-t border-custom-border-200" />
+          <div className="my-5 h-[1] w-full border-t border-neutral-border-medium" />
           {/* issue activity/comments */}
           <div className="w-full pb-5">
             <PeekOverviewIssueActivity issueDetails={issueDetails} />
diff --git a/space/components/ui/dropdown.tsx b/space/components/ui/dropdown.tsx
index 09d27da42..ee4d38d04 100644
--- a/space/components/ui/dropdown.tsx
+++ b/space/components/ui/dropdown.tsx
@@ -52,7 +52,7 @@ const DropdownList: React.FC<DropDownListProps> = (props) => {
       >
         <Popover.Panel
           ref={ref}
-          className="absolute left-1/2 z-10 mt-1 max-w-[9rem] origin-top-right -translate-x-full select-none rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none"
+          className="absolute left-1/2 z-10 mt-1 max-w-[9rem] origin-top-right -translate-x-full select-none rounded-md border border-neutral-border-medium bg-custom-background-90 text-xs shadow-lg focus:outline-none"
         >
           <div className="w-full rounded-md text-sm shadow-lg">
             {items.map((item, index) => (
@@ -109,7 +109,7 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
       {({ open }) => (
         <>
           <Popover.Button
-            className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-200 px-3 py-1.5 text-xs shadow-sm duration-300 hover:bg-custom-background-90 hover:text-custom-text-100 focus:outline-none ${
+            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-custom-background-90 hover:text-custom-text-100 focus:outline-none ${
               open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
             }`}
           >
@@ -125,7 +125,7 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-1"
           >
-            <Popover.Panel className="absolute left-full z-10 mt-1 w-36 origin-top-right -translate-x-full select-none rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none">
+            <Popover.Panel className="absolute left-full z-10 mt-1 w-36 origin-top-right -translate-x-full select-none rounded-md border border-neutral-border-medium bg-custom-background-90 text-xs shadow-lg focus:outline-none">
               <div className="w-full">
                 {items.map((item, index) => (
                   <DropdownItem key={index} item={item} />
diff --git a/space/components/ui/reaction-selector.tsx b/space/components/ui/reaction-selector.tsx
index ae18d4883..730fcd15a 100644
--- a/space/components/ui/reaction-selector.tsx
+++ b/space/components/ui/reaction-selector.tsx
@@ -52,7 +52,7 @@ export const ReactionSelector: React.FC<Props> = (props) => {
                 position === "top" ? "-top-12" : "-bottom-12"
               }`}
             >
-              <div className="rounded-md border border-custom-border-200 bg-custom-sidebar-background-100 p-1 shadow-custom-shadow-sm">
+              <div className="rounded-md border border-neutral-border-medium bg-custom-sidebar-background-100 p-1 shadow-custom-shadow-sm">
                 <div className="flex gap-x-1">
                   {reactionEmojis.map((emoji) => (
                     <button
diff --git a/space/components/views/login.tsx b/space/components/views/login.tsx
index 5ce24c869..685d7e515 100644
--- a/space/components/views/login.tsx
+++ b/space/components/views/login.tsx
@@ -32,7 +32,7 @@ export const LoginView = observer(() => {
                 </div>
               </div>
 
-              <div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
+              <div className="mx-auto h-full rounded-t-md border-x border-t border-neutral-border-medium bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
                 <div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
                   {!true ? (
                     <div className="mx-auto flex justify-center pt-10">
diff --git a/space/constants/data.ts b/space/constants/data.ts
index bb9030696..7bdee3743 100644
--- a/space/constants/data.ts
+++ b/space/constants/data.ts
@@ -33,25 +33,25 @@ export const issuePriorityFilters: IIssuePriorityFilters[] = [
   {
     key: "high",
     title: "High",
-    className: "text-orange-500 border-custom-border-300",
+    className: "text-orange-500 border-neutral-border-medium",
     icon: "signal_cellular_alt",
   },
   {
     key: "medium",
     title: "Medium",
-    className: "text-yellow-500 border-custom-border-300",
+    className: "text-yellow-500 border-neutral-border-medium",
     icon: "signal_cellular_alt_2_bar",
   },
   {
     key: "low",
     title: "Low",
-    className: "text-green-500 border-custom-border-300",
+    className: "text-green-500 border-neutral-border-medium",
     icon: "signal_cellular_alt_1_bar",
   },
   {
     key: "none",
     title: "None",
-    className: "text-gray-500 border-custom-border-300",
+    className: "text-gray-500 border-neutral-border-medium",
     icon: "block",
   },
 ];
diff --git a/space/layouts/project-layout.tsx b/space/layouts/project-layout.tsx
index 3ae079982..05aa94c1f 100644
--- a/space/layouts/project-layout.tsx
+++ b/space/layouts/project-layout.tsx
@@ -8,14 +8,14 @@ import IssueNavbar from "components/issues/navbar";
 
 const ProjectLayout = ({ children }: { children: React.ReactNode }) => (
   <div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">
-    <div className="relative flex h-[60px] flex-shrink-0 select-none items-center border-b border-custom-border-300 bg-custom-sidebar-background-100">
+    <div className="relative flex h-[60px] flex-shrink-0 select-none items-center border-b border-neutral-border-medium bg-custom-sidebar-background-100">
       <IssueNavbar />
     </div>
     <div className="relative h-full w-full overflow-hidden bg-custom-background-90">{children}</div>
 
     <a
       href="https://plane.so"
-      className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded border border-custom-border-200 bg-custom-background-100 px-2 py-1 shadow-custom-shadow-2xs"
+      className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded border border-neutral-border-medium bg-custom-background-100 px-2 py-1 shadow-custom-shadow-2xs"
       target="_blank"
       rel="noreferrer noopener"
     >
diff --git a/space/pages/accounts/password.tsx b/space/pages/accounts/password.tsx
index 85da11290..a4062d4bc 100644
--- a/space/pages/accounts/password.tsx
+++ b/space/pages/accounts/password.tsx
@@ -81,9 +81,9 @@ const HomePage: NextPage = () => {
         </div>
       </div>
 
-      <div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
+      <div className="mx-auto h-full rounded-t-md border-x border-t border-neutral-border-medium bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
         <div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
-          <div className="mx-auto flex flex-col divide-y divide-custom-border-200 sm:w-96">
+          <div className="mx-auto flex flex-col divide-y divide-neutral-border-medium sm:w-96">
             <h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
               Let{"'"}s get a new password
             </h1>
diff --git a/space/pages/onboarding/index.tsx b/space/pages/onboarding/index.tsx
index 423eec2de..c2bdcf121 100644
--- a/space/pages/onboarding/index.tsx
+++ b/space/pages/onboarding/index.tsx
@@ -24,7 +24,7 @@ const OnBoardingPage = () => {
     <div className="h-screen w-full overflow-hidden bg-custom-background-100">
       <div className="flex h-full w-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
         <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
-          <div className="absolute left-0 top-1/2 z-10 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
+          <div className="absolute left-0 top-1/2 z-10 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-neutral-border-medium sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
           <div className="absolute left-2 top-1/2 z-10 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 py-5 sm:left-1/2 sm:top-12 sm:-translate-x-1/2 sm:translate-y-0 sm:px-0 md:left-1/3">
             <div className="h-[30px] w-[30px]">
               <img src={`${imagePrefix}/plane-logos/blue-without-text.png`} alt="Plane logo" />
diff --git a/web/components/analytics/custom-analytics/graph/custom-tooltip.tsx b/web/components/analytics/custom-analytics/graph/custom-tooltip.tsx
index ec7c40195..52cccd701 100644
--- a/web/components/analytics/custom-analytics/graph/custom-tooltip.tsx
+++ b/web/components/analytics/custom-analytics/graph/custom-tooltip.tsx
@@ -46,7 +46,7 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
   }
 
   return (
-    <div className="flex items-center gap-2 rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+    <div className="flex items-center gap-2 rounded-md border border-neutral-border-medium bg-custom-background-80 p-2 text-xs">
       <span
         className="h-3 w-3 rounded"
         style={{
diff --git a/web/components/analytics/custom-analytics/sidebar/sidebar.tsx b/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
index 59013a3e3..60e58b1c8 100644
--- a/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
+++ b/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
@@ -142,7 +142,7 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
     <div
       className={`flex items-center justify-between space-y-2 px-5 py-2.5 ${
         fullScreen
-          ? "overflow-hidden border-l border-custom-border-200 md:h-full md:flex-col md:items-start md:space-y-4 md:border-l md:border-custom-border-200 md:py-5"
+          ? "overflow-hidden border-l border-neutral-border-medium md:h-full md:flex-col md:items-start md:space-y-4 md:border-l md:border-neutral-border-medium md:py-5"
           : ""
       }`}
     >
diff --git a/web/components/analytics/custom-analytics/table.tsx b/web/components/analytics/custom-analytics/table.tsx
index c09f26d76..053b3b32e 100644
--- a/web/components/analytics/custom-analytics/table.tsx
+++ b/web/components/analytics/custom-analytics/table.tsx
@@ -23,9 +23,9 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
   <div className="flow-root">
     <div className="overflow-x-auto">
       <div className="inline-block min-w-full align-middle">
-        <table className="min-w-full divide-y divide-custom-border-200 whitespace-nowrap border-y border-custom-border-200">
+        <table className="min-w-full divide-y divide-neutral-border-medium whitespace-nowrap border-y border-neutral-border-medium">
           <thead className="bg-custom-background-80">
-            <tr className="divide-x divide-custom-border-200 text-sm text-custom-text-100">
+            <tr className="divide-x divide-neutral-border-medium text-sm text-custom-text-100">
               <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>
@@ -60,9 +60,12 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
               )}
             </tr>
           </thead>
-          <tbody className="divide-y divide-custom-border-200">
+          <tbody className="divide-y divide-neutral-border-medium">
             {barGraphData.data.map((item, index) => (
-              <tr key={`table-row-${index}`} className="divide-x divide-custom-border-200 text-xs text-custom-text-200">
+              <tr
+                key={`table-row-${index}`}
+                className="divide-x divide-neutral-border-medium text-xs text-custom-text-200"
+              >
                 <td
                   className={`flex items-center gap-2 whitespace-nowrap px-2.5 py-2 font-medium ${
                     params.x_axis === "priority" || params.x_axis === "state__group" ? "capitalize" : ""
diff --git a/web/components/analytics/project-modal/main-content.tsx b/web/components/analytics/project-modal/main-content.tsx
index 09423e6dd..42d8f77e1 100644
--- a/web/components/analytics/project-modal/main-content.tsx
+++ b/web/components/analytics/project-modal/main-content.tsx
@@ -20,12 +20,12 @@ export const ProjectAnalyticsModalMainContent: React.FC<Props> = observer((props
 
   return (
     <Tab.Group as={React.Fragment}>
-      <Tab.List as="div" className="space-x-2 border-b border-custom-border-200 p-5 pt-0">
+      <Tab.List as="div" className="space-x-2 border-b border-neutral-border-medium p-5 pt-0">
         {ANALYTICS_TABS.map((tab) => (
           <Tab
             key={tab.key}
             className={({ selected }) =>
-              `rounded-3xl border border-custom-border-200 px-4 py-2 text-xs hover:bg-custom-background-80 ${
+              `rounded-3xl border border-neutral-border-medium px-4 py-2 text-xs hover:bg-custom-background-80 ${
                 selected ? "bg-custom-background-80" : ""
               }`
             }
diff --git a/web/components/analytics/project-modal/modal.tsx b/web/components/analytics/project-modal/modal.tsx
index a4b82c4b6..b1134d598 100644
--- a/web/components/analytics/project-modal/modal.tsx
+++ b/web/components/analytics/project-modal/modal.tsx
@@ -43,7 +43,7 @@ export const ProjectAnalyticsModal: React.FC<Props> = observer((props) => {
               }`}
             >
               <div
-                className={`flex h-full flex-col overflow-hidden border-custom-border-200 bg-custom-background-100 text-left ${
+                className={`flex h-full flex-col overflow-hidden border-neutral-border-medium bg-custom-background-100 text-left ${
                   fullScreen ? "rounded-lg border" : "border-l"
                 }`}
               >
diff --git a/web/components/analytics/scope-and-demand/demand.tsx b/web/components/analytics/scope-and-demand/demand.tsx
index e66ffeabf..ca6d21c21 100644
--- a/web/components/analytics/scope-and-demand/demand.tsx
+++ b/web/components/analytics/scope-and-demand/demand.tsx
@@ -10,7 +10,7 @@ type Props = {
 };
 
 export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="space-y-3 rounded-[10px] border border-custom-border-200 p-3">
+  <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>
@@ -50,7 +50,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
         );
       })}
     </div>
-    <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+    <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-neutral-border-medium bg-custom-background-80 p-2 text-xs">
       <p className="flex items-center gap-1 text-custom-text-200">
         <Triangle className="h-4 w-4" />
         <span>Estimate Demand:</span>
diff --git a/web/components/analytics/scope-and-demand/leaderboard.tsx b/web/components/analytics/scope-and-demand/leaderboard.tsx
index 9cd38dde4..c481ff6f0 100644
--- a/web/components/analytics/scope-and-demand/leaderboard.tsx
+++ b/web/components/analytics/scope-and-demand/leaderboard.tsx
@@ -18,7 +18,7 @@ type Props = {
 };
 
 export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyStateMessage, workspaceSlug }) => (
-  <div className="rounded-[10px] border border-custom-border-200 p-3">
+  <div className="rounded-[10px] border border-neutral-border-medium p-3">
     <h6 className="text-base font-medium">{title}</h6>
     {users.length > 0 ? (
       <div className="mt-3 space-y-3">
diff --git a/web/components/analytics/scope-and-demand/scope.tsx b/web/components/analytics/scope-and-demand/scope.tsx
index ea1a51937..7bac4dbdb 100644
--- a/web/components/analytics/scope-and-demand/scope.tsx
+++ b/web/components/analytics/scope-and-demand/scope.tsx
@@ -10,9 +10,9 @@ type Props = {
 };
 
 export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="rounded-[10px] border border-custom-border-200">
+  <div className="rounded-[10px] border border-neutral-border-medium">
     <h5 className="p-3 text-xs text-green-500">SCOPE</h5>
-    <div className="divide-y divide-custom-border-200">
+    <div className="divide-y divide-neutral-border-medium">
       <div>
         <h6 className="px-3 text-base font-medium">Pending issues</h6>
         {defaultAnalytics.pending_issue_user && defaultAnalytics.pending_issue_user.length > 0 ? (
@@ -29,7 +29,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
               );
 
               return (
-                <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+                <div className="rounded-md border border-neutral-border-medium bg-custom-background-80 p-2 text-xs">
                   <span className="font-medium text-custom-text-200">
                     {assignee ? assignee.assignees__display_name : "No assignee"}:{" "}
                   </span>
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 2a62c99d4..f7a08ea61 100644
--- a/web/components/analytics/scope-and-demand/year-wise-issues.tsx
+++ b/web/components/analytics/scope-and-demand/year-wise-issues.tsx
@@ -12,7 +12,7 @@ type Props = {
 };
 
 export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="rounded-[10px] border border-custom-border-200 py-3">
+  <div className="rounded-[10px] border border-neutral-border-medium py-3">
     <h1 className="px-3 text-base font-medium">Issues closed in a year</h1>
     {defaultAnalytics.issue_completed_month_wise.length > 0 ? (
       <LineGraph
@@ -35,7 +35,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
         margin={{ top: 20 }}
         enableSlices="x"
         sliceTooltip={(datum) => (
-          <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+          <div className="rounded-md border border-neutral-border-medium bg-custom-background-80 p-2 text-xs">
             {datum.slice.points[0].data.yFormatted}
             <span className="text-custom-text-200"> issues closed in </span>
             {datum.slice.points[0].data.xFormatted}
diff --git a/web/components/api-token/delete-token-modal.tsx b/web/components/api-token/delete-token-modal.tsx
index 993289c10..0c37940b9 100644
--- a/web/components/api-token/delete-token-modal.tsx
+++ b/web/components/api-token/delete-token-modal.tsx
@@ -94,7 +94,7 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-neutral-border-medium bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-3 p-4">
                   <div className="flex w-full items-center justify-start">
                     <h3 className="text-lg font-medium leading-6 text-custom-text-100">
diff --git a/web/components/api-token/empty-state.tsx b/web/components/api-token/empty-state.tsx
index 519437333..74b7c306a 100644
--- a/web/components/api-token/empty-state.tsx
+++ b/web/components/api-token/empty-state.tsx
@@ -14,7 +14,7 @@ export const ApiTokenEmptyState: React.FC<Props> = (props) => {
 
   return (
     <div
-      className={`mx-auto flex w-full items-center justify-center rounded-sm border border-custom-border-200 bg-custom-background-90 px-16 py-10 lg:w-3/4`}
+      className={`mx-auto flex w-full items-center justify-center rounded-sm border border-neutral-border-medium bg-custom-background-90 px-16 py-10 lg:w-3/4`}
     >
       <div className="flex w-full flex-col items-center text-center">
         <Image src={emptyApiTokens} className="w-52 sm:w-60" alt="empty" />
diff --git a/web/components/api-token/modal/form.tsx b/web/components/api-token/modal/form.tsx
index ae7717b39..0c568b33b 100644
--- a/web/components/api-token/modal/form.tsx
+++ b/web/components/api-token/modal/form.tsx
@@ -167,7 +167,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                     <CustomSelect
                       customButton={
                         <div
-                          className={`flex items-center gap-2 rounded border-[0.5px] border-custom-border-200 px-2 py-1 ${
+                          className={`flex items-center gap-2 rounded border-[0.5px] border-neutral-border-medium px-2 py-1 ${
                             neverExpires ? "text-custom-text-400" : ""
                           }`}
                         >
@@ -200,7 +200,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                   minDate={tomorrow}
                   customInput={
                     <div
-                      className={`flex cursor-pointer items-center gap-2 !rounded border-[0.5px] border-custom-border-200 px-2 py-1 text-xs !shadow-none !duration-0 ${
+                      className={`flex cursor-pointer items-center gap-2 !rounded border-[0.5px] border-neutral-border-medium px-2 py-1 text-xs !shadow-none !duration-0 ${
                         customDate ? "w-[7.5rem]" : ""
                       } ${neverExpires ? "!cursor-not-allowed text-custom-text-400" : "hover:bg-custom-background-80"}`}
                     >
diff --git a/web/components/api-token/modal/generated-token-details.tsx b/web/components/api-token/modal/generated-token-details.tsx
index f28ea3481..1e5548d93 100644
--- a/web/components/api-token/modal/generated-token-details.tsx
+++ b/web/components/api-token/modal/generated-token-details.tsx
@@ -41,7 +41,7 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
       <button
         type="button"
         onClick={() => copyApiToken(tokenDetails.token ?? "")}
-        className="mt-4 flex w-full items-center justify-between rounded-md border-[0.5px] border-custom-border-200 px-3 py-2 text-sm font-medium outline-none"
+        className="mt-4 flex w-full items-center justify-between rounded-md border-[0.5px] border-neutral-border-medium px-3 py-2 text-sm font-medium outline-none"
       >
         {tokenDetails.token}
         <Tooltip tooltipContent="Copy secret key">
diff --git a/web/components/api-token/token-list-item.tsx b/web/components/api-token/token-list-item.tsx
index 2de731222..14691098d 100644
--- a/web/components/api-token/token-list-item.tsx
+++ b/web/components/api-token/token-list-item.tsx
@@ -21,7 +21,7 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
   return (
     <>
       <DeleteApiTokenModal isOpen={deleteModalOpen} onClose={() => setDeleteModalOpen(false)} tokenId={token.id} />
-      <div className="group relative flex flex-col justify-center border-b border-custom-border-200 px-4 py-3">
+      <div className="group relative flex flex-col justify-center border-b border-neutral-border-medium px-4 py-3">
         <Tooltip tooltipContent="Delete token">
           <button
             onClick={() => setDeleteModalOpen(true)}
diff --git a/web/components/automation/auto-archive-automation.tsx b/web/components/automation/auto-archive-automation.tsx
index 974efff3a..2dc7eb487 100644
--- a/web/components/automation/auto-archive-automation.tsx
+++ b/web/components/automation/auto-archive-automation.tsx
@@ -39,7 +39,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
         handleClose={() => setmonthModal(false)}
         handleChange={handleChange}
       />
-      <div className="flex flex-col gap-4 border-b border-custom-border-100 px-4 py-6">
+      <div className="flex flex-col gap-4 border-b border-neutral-border-subtle px-4 py-6">
         <div className="flex items-center justify-between">
           <div className="flex items-start gap-3">
             <div className="flex items-center justify-center rounded bg-custom-background-90 p-3">
@@ -67,7 +67,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
         {currentProjectDetails ? (
           currentProjectDetails.archive_in !== 0 && (
             <div className="ml-12">
-              <div className="flex w-full items-center justify-between gap-2 rounded border border-custom-border-200 bg-custom-background-90 px-5 py-4">
+              <div className="flex w-full items-center justify-between gap-2 rounded border border-neutral-border-medium bg-custom-background-90 px-5 py-4">
                 <div className="w-1/2 text-sm font-medium">Auto-archive issues that are closed for</div>
                 <div className="w-1/2">
                   <CustomSelect
diff --git a/web/components/automation/auto-close-automation.tsx b/web/components/automation/auto-close-automation.tsx
index 8d6662c11..13aab2d41 100644
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@@ -65,7 +65,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
         handleClose={() => setmonthModal(false)}
         handleChange={handleChange}
       />
-      <div className="flex flex-col gap-4 border-b border-custom-border-200 px-4 py-6">
+      <div className="flex flex-col gap-4 border-b border-neutral-border-medium px-4 py-6">
         <div className="flex items-center justify-between">
           <div className="flex items-start gap-3">
             <div className="flex items-center justify-center rounded bg-custom-background-90 p-3">
@@ -93,7 +93,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
         {currentProjectDetails ? (
           currentProjectDetails.close_in !== 0 && (
             <div className="ml-12">
-              <div className="flex flex-col rounded border border-custom-border-200 bg-custom-background-90">
+              <div className="flex flex-col rounded border border-neutral-border-medium bg-custom-background-90">
                 <div className="flex w-full items-center justify-between gap-2 px-5 py-4">
                   <div className="w-1/2 text-sm font-medium">Auto-close issues that are inactive for</div>
                   <div className="w-1/2">
diff --git a/web/components/automation/select-month-modal.tsx b/web/components/automation/select-month-modal.tsx
index 1d306bb04..f5e4cd170 100644
--- a/web/components/automation/select-month-modal.tsx
+++ b/web/components/automation/select-month-modal.tsx
@@ -97,7 +97,7 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
                                     ref={ref}
                                     hasError={Boolean(errors.close_in)}
                                     placeholder="Enter Months"
-                                    className="w-full border-custom-border-200"
+                                    className="w-full border-neutral-border-medium"
                                   />
                                   <span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
                                 </div>
@@ -129,7 +129,7 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
                                     ref={ref}
                                     hasError={Boolean(errors.archive_in)}
                                     placeholder="Enter Months"
-                                    className="w-full border-custom-border-200"
+                                    className="w-full border-neutral-border-medium"
                                   />
                                   <span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
                                 </div>
diff --git a/web/components/command-palette/command-modal.tsx b/web/components/command-palette/command-modal.tsx
index 342827825..b68425417 100644
--- a/web/components/command-palette/command-modal.tsx
+++ b/web/components/command-palette/command-modal.tsx
@@ -165,7 +165,7 @@ export const CommandModal: React.FC = observer(() => {
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
             <Dialog.Panel className="relative flex w-full items-center justify-center ">
-              <div className="w-full max-w-2xl transform divide-y divide-custom-border-200 divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
+              <div className="w-full max-w-2xl transform divide-y divide-neutral-border-medium divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
                 <Command
                   filter={(value, search) => {
                     if (value.toLowerCase().includes(search.toLowerCase())) return 1;
@@ -220,7 +220,7 @@ export const CommandModal: React.FC = observer(() => {
                       strokeWidth={2}
                     />
                     <Command.Input
-                      className="w-full border-0 border-b border-custom-border-200 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-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0"
                       placeholder={placeholder}
                       value={searchTerm}
                       onValueChange={(e) => setSearchTerm(e)}
diff --git a/web/components/command-palette/shortcuts-modal/commands-list.tsx b/web/components/command-palette/shortcuts-modal/commands-list.tsx
index 2c8b87b05..5e3d7b875 100644
--- a/web/components/command-palette/shortcuts-modal/commands-list.tsx
+++ b/web/components/command-palette/shortcuts-modal/commands-list.tsx
@@ -65,11 +65,11 @@ export const ShortcutCommandsList: React.FC<Props> = (props) => {
                         {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-custom-border-200 bg-custom-background-90 px-1.5">
+                              <div className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-neutral-border-medium bg-custom-background-90 px-1.5">
                                 <Command className="h-2.5 w-2.5 text-custom-text-200" />
                               </div>
                             ) : (
-                              <kbd className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 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-custom-background-90 px-1.5 text-[10px] text-custom-text-200">
                                 {key}
                               </kbd>
                             )}
diff --git a/web/components/command-palette/shortcuts-modal/modal.tsx b/web/components/command-palette/shortcuts-modal/modal.tsx
index bc7d67d88..39ec268f1 100644
--- a/web/components/command-palette/shortcuts-modal/modal.tsx
+++ b/web/components/command-palette/shortcuts-modal/modal.tsx
@@ -55,7 +55,7 @@ export const ShortcutsModal: FC<Props> = (props) => {
                       <X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" aria-hidden="true" />
                     </button>
                   </Dialog.Title>
-                  <div className="flex w-full items-center rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2">
+                  <div className="flex w-full items-center rounded border-[0.5px] border-neutral-border-medium bg-custom-background-90 px-2">
                     <Search className="h-3.5 w-3.5 text-custom-text-200" />
                     <Input
                       id="search"
diff --git a/web/components/common/new-empty-state.tsx b/web/components/common/new-empty-state.tsx
index efbab8249..a434f8478 100644
--- a/web/components/common/new-empty-state.tsx
+++ b/web/components/common/new-empty-state.tsx
@@ -43,7 +43,7 @@ export const NewEmptyState: React.FC<Props> = ({
   return (
     <div className="flex items-center justify-center overflow-y-auto">
       <div className=" flex h-full w-full flex-col items-center justify-center ">
-        <div className="m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-custom-border-200 px-10 py-7 shadow-sm md:m-8">
+        <div className="m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-neutral-border-medium px-10 py-7 shadow-sm md:m-8">
           <h3 className="text-2xl font-semibold">{title}</h3>
           {description && <p className=" text-lg">{description}</p>}
           <div className="relative w-full max-w-6xl">
@@ -82,10 +82,10 @@ export const NewEmptyState: React.FC<Props> = ({
                     comicBox?.extraPadding ? "ml-[125px]" : "ml-[90px]"
                   } pb-5`}
                 >
-                  <div className="relative mt-5 h-0 w-0 border-b-[11px] border-r-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
+                  <div className="relative mt-5 h-0 w-0 border-b-[11px] border-r-[11px] border-t-[11px] border-neutral-border-medium border-y-transparent">
                     <div className="absolute right-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-r-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
                   </div>
-                  <div className="rounded-md border border-custom-border-200 bg-custom-background-100">
+                  <div className="rounded-md border border-neutral-border-medium bg-custom-background-100">
                     <h1 className="p-5">
                       <h3 className="text-lg font-semibold">{comicBox?.title}</h3>
                       <h4 className="mt-1 text-sm">{comicBox?.description}</h4>
@@ -94,10 +94,10 @@ export const NewEmptyState: React.FC<Props> = ({
                 </div>
               ) : (
                 <div className="absolute right-1/2 top-0 mr-[90px] flex max-w-sm flex-row-reverse pb-5">
-                  <div className="relative mt-5 h-0 w-0 border-b-[11px] border-l-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
+                  <div className="relative mt-5 h-0 w-0 border-b-[11px] border-l-[11px] border-t-[11px] border-neutral-border-medium border-y-transparent">
                     <div className="absolute left-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-l-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
                   </div>
-                  <div className="rounded-md border border-custom-border-200 bg-custom-background-100">
+                  <div className="rounded-md border border-neutral-border-medium bg-custom-background-100">
                     <h1 className="p-5">
                       <h3 className="text-lg font-semibold">{comicBox?.title}</h3>
                       <h4 className="mt-1 text-sm">{comicBox?.description}</h4>
diff --git a/web/components/common/product-updates-modal.tsx b/web/components/common/product-updates-modal.tsx
index cd0a5b9ff..094dcc4ab 100644
--- a/web/components/common/product-updates-modal.tsx
+++ b/web/components/common/product-updates-modal.tsx
@@ -64,12 +64,12 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                       {updates.map((item, index) => (
                         <React.Fragment key={item.id}>
                           <div className="flex items-center gap-3 text-xs text-custom-text-200">
-                            <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
+                            <span className="flex items-center rounded-full border border-neutral-border-medium bg-custom-background-90 px-3 py-1.5 text-xs">
                               {item.tag_name}
                             </span>
                             <span>{renderFormattedDate(item.published_at)}</span>
                             {index === 0 && (
-                              <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
+                              <span className="flex items-center rounded-full border border-neutral-border-medium bg-custom-primary px-3 py-1.5 text-xs text-white">
                                 New
                               </span>
                             )}
diff --git a/web/components/core/activity.tsx b/web/components/core/activity.tsx
index b5a666774..fa69c0f2f 100644
--- a/web/components/core/activity.tsx
+++ b/web/components/core/activity.tsx
@@ -262,7 +262,7 @@ const activityDetails: {
         return (
           <>
             added a new label{" "}
-            <span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+            <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>
@@ -278,7 +278,7 @@ const activityDetails: {
         return (
           <>
             removed the label{" "}
-            <span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+            <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>
diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx
index a5ffd807a..0062072dd 100644
--- a/web/components/core/image-picker-popover.tsx
+++ b/web/components/core/image-picker-popover.tsx
@@ -139,7 +139,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-custom-border-300 bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
+        className="rounded border border-neutral-border-medium bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
         onClick={openDropdown}
         disabled={disabled}
       >
@@ -148,12 +148,12 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
 
       {isOpen && (
         <Popover.Panel
-          className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-sm"
+          className="absolute right-0 z-10 mt-2 rounded-md border border-neutral-border-medium bg-custom-background-100 shadow-custom-shadow-sm"
           static
         >
           <div
             ref={imagePickerRef}
-            className="flex h-96 w-80 flex-col overflow-auto rounded border border-custom-border-300 bg-custom-background-100 p-3 shadow-2xl md:h-[28rem] md:w-[36rem]"
+            className="flex h-96 w-80 flex-col overflow-auto rounded border border-neutral-border-medium bg-custom-background-100 p-3 shadow-2xl md:h-[28rem] md:w-[36rem]"
           >
             <Tab.Group>
               <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
@@ -282,7 +282,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
                         {...getRootProps()}
                         className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
                           (image === null && isDragActive) || !value
-                            ? "border-2 border-dashed border-custom-border-200 hover:bg-custom-background-90"
+                            ? "border-2 border-dashed border-neutral-border-medium hover:bg-custom-background-90"
                             : ""
                         }`}
                       >
diff --git a/web/components/core/modals/bulk-delete-issues-modal.tsx b/web/components/core/modals/bulk-delete-issues-modal.tsx
index f5eab83ef..b854bf407 100644
--- a/web/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/web/components/core/modals/bulk-delete-issues-modal.tsx
@@ -130,7 +130,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
             leaveTo="opacity-0 scale-95"
           >
             <Dialog.Panel className="relative flex w-full items-center justify-center ">
-              <div className="w-full max-w-2xl transform divide-y divide-custom-border-200 divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
+              <div className="w-full max-w-2xl transform divide-y divide-neutral-border-medium divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
                 <form>
                   <Combobox
                     onChange={(val: string) => {
@@ -158,7 +158,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
 
                     <Combobox.Options
                       static
-                      className="max-h-80 scroll-py-2 divide-y divide-custom-border-200 overflow-y-auto"
+                      className="max-h-80 scroll-py-2 divide-y divide-neutral-border-medium overflow-y-auto"
                     >
                       {filteredIssues.length > 0 ? (
                         <li className="p-2">
diff --git a/web/components/core/modals/existing-issues-list-modal.tsx b/web/components/core/modals/existing-issues-list-modal.tsx
index f136b099f..2eef94fa2 100644
--- a/web/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/components/core/modals/existing-issues-list-modal.tsx
@@ -153,7 +153,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                         {selectedIssues.map((issue) => (
                           <div
                             key={issue.id}
-                            className="flex items-center gap-1 whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 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-custom-background-80 py-1 pl-2 text-xs text-custom-text-100"
                           >
                             {issue.project__identifier}-{issue.sequence_id}
                             <button
@@ -167,7 +167,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                         ))}
                       </div>
                     ) : (
-                      <div className="w-min whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+                      <div className="w-min whitespace-nowrap rounded-md border border-neutral-border-medium bg-custom-background-80 p-2 text-xs">
                         No issues selected
                       </div>
                     )}
diff --git a/web/components/core/modals/gpt-assistant-popover.tsx b/web/components/core/modals/gpt-assistant-popover.tsx
index 3afd6d1b9..dd790655d 100644
--- a/web/components/core/modals/gpt-assistant-popover.tsx
+++ b/web/components/core/modals/gpt-assistant-popover.tsx
@@ -194,7 +194,7 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
       >
         <Popover.Panel
           as="div"
-          className={`fixed z-10 flex flex-col w-full max-w-full min-w-[50rem] space-y-4 overflow-hidden rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${className}`}
+          className={`fixed z-10 flex flex-col w-full max-w-full min-w-[50rem] space-y-4 overflow-hidden rounded-[10px] border border-neutral-border-medium bg-custom-background-100 p-4 shadow ${className}`}
           ref={setPopperElement}
           style={styles.popper}
           {...attributes.popper}
diff --git a/web/components/core/modals/user-image-upload-modal.tsx b/web/components/core/modals/user-image-upload-modal.tsx
index 6debc2c15..2655c8de1 100644
--- a/web/components/core/modals/user-image-upload-modal.tsx
+++ b/web/components/core/modals/user-image-upload-modal.tsx
@@ -122,7 +122,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
                         {...getRootProps()}
                         className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
                           (image === null && isDragActive) || !value
-                            ? "border-2 border-dashed border-custom-border-200 hover:bg-custom-background-90"
+                            ? "border-2 border-dashed border-neutral-border-medium hover:bg-custom-background-90"
                             : ""
                         }`}
                       >
diff --git a/web/components/core/modals/workspace-image-upload-modal.tsx b/web/components/core/modals/workspace-image-upload-modal.tsx
index e04ccf820..de0946eaa 100644
--- a/web/components/core/modals/workspace-image-upload-modal.tsx
+++ b/web/components/core/modals/workspace-image-upload-modal.tsx
@@ -129,7 +129,7 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
                         {...getRootProps()}
                         className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
                           (image === null && isDragActive) || !value
-                            ? "border-2 border-dashed border-custom-border-200 hover:bg-custom-background-90"
+                            ? "border-2 border-dashed border-neutral-border-medium hover:bg-custom-background-90"
                             : ""
                         }`}
                       >
diff --git a/web/components/core/sidebar/progress-chart.tsx b/web/components/core/sidebar/progress-chart.tsx
index 3d47d8eca..c032c68e5 100644
--- a/web/components/core/sidebar/progress-chart.tsx
+++ b/web/components/core/sidebar/progress-chart.tsx
@@ -124,7 +124,7 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
         gridXValues={chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : ""))}
         enableSlices="x"
         sliceTooltip={(datum) => (
-          <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+          <div className="rounded-md border border-neutral-border-medium bg-custom-background-80 p-2 text-xs">
             {datum.slice.points[0].data.yFormatted}
             <span className="text-custom-text-200"> issues pending on </span>
             {datum.slice.points[0].data.xFormatted}
diff --git a/web/components/core/sidebar/sidebar-progress-stats.tsx b/web/components/core/sidebar/sidebar-progress-stats.tsx
index c37cdf4b9..7aea050cf 100644
--- a/web/components/core/sidebar/sidebar-progress-stats.tsx
+++ b/web/components/core/sidebar/sidebar-progress-stats.tsx
@@ -87,7 +87,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
         <Tab
           className={({ selected }) =>
             `w-full  ${
-              roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
+              roundedTab ? "rounded-3xl border border-neutral-border-medium" : "rounded"
             } px-3 py-1 text-custom-text-100 ${
               selected
                 ? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
@@ -100,7 +100,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
         <Tab
           className={({ selected }) =>
             `w-full ${
-              roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
+              roundedTab ? "rounded-3xl border border-neutral-border-medium" : "rounded"
             } px-3 py-1 text-custom-text-100 ${
               selected
                 ? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
@@ -113,7 +113,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
         <Tab
           className={({ selected }) =>
             `w-full ${
-              roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
+              roundedTab ? "rounded-3xl border border-neutral-border-medium" : "rounded"
             } px-3 py-1  text-custom-text-100 ${
               selected
                 ? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
@@ -162,7 +162,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
                     key={`unassigned-${index}`}
                     title={
                       <div className="flex items-center gap-2">
-                        <div className="h-4 w-4 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
+                        <div className="h-4 w-4 rounded-full border-2 border-neutral-border-medium bg-custom-background-80">
                           <img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
                         </div>
                         <span>No assignee</span>
diff --git a/web/components/core/theme/color-picker-input.tsx b/web/components/core/theme/color-picker-input.tsx
index 19cd519cb..e590534cf 100644
--- a/web/components/core/theme/color-picker-input.tsx
+++ b/web/components/core/theme/color-picker-input.tsx
@@ -92,7 +92,7 @@ export const ColorPickerInput: FC<Props> = (props) => {
               >
                 {watch(name) && watch(name) !== "" ? (
                   <span
-                    className="h-4 w-4 rounded border border-custom-border-200"
+                    className="h-4 w-4 rounded border border-neutral-border-medium"
                     style={{
                       backgroundColor: `${watch(name)}`,
                     }}
diff --git a/web/components/cycles/active-cycle-details.tsx b/web/components/cycles/active-cycle-details.tsx
index d42f9f543..f351d7bca 100644
--- a/web/components/cycles/active-cycle-details.tsx
+++ b/web/components/cycles/active-cycle-details.tsx
@@ -147,8 +147,8 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
   const daysLeft = findHowManyDaysLeft(activeCycle.end_date ?? new Date());
 
   return (
-    <div className="grid-row-2 grid divide-y rounded-[10px] border border-custom-border-200 bg-custom-background-100 shadow">
-      <div className="grid grid-cols-1 divide-y border-custom-border-200 lg:grid-cols-3 lg:divide-x lg:divide-y-0">
+    <div className="grid-row-2 grid divide-y rounded-[10px] border border-neutral-border-medium bg-custom-background-100 shadow">
+      <div className="grid grid-cols-1 divide-y border-neutral-border-medium lg:grid-cols-3 lg:divide-x lg:divide-y-0">
         <div className="flex flex-col text-xs">
           <div className="h-full w-full">
             <div className="flex h-60 flex-col justify-between gap-5 rounded-b-[10px] p-4">
@@ -246,8 +246,8 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
             </div>
           </div>
         </div>
-        <div className="col-span-2 grid grid-cols-1 divide-y border-custom-border-200 md:grid-cols-2 md:divide-x md:divide-y-0">
-          <div className="flex h-60 flex-col border-custom-border-200">
+        <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 w-full items-center gap-2 py-1">
                 <span>Progress</span>
@@ -275,12 +275,12 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
               </div>
             </div>
           </div>
-          <div className="h-60 overflow-y-scroll border-custom-border-200">
+          <div className="h-60 overflow-y-scroll border-neutral-border-medium">
             <ActiveCycleProgressStats cycle={activeCycle} />
           </div>
         </div>
       </div>
-      <div className="grid grid-cols-1 divide-y border-custom-border-200 lg:grid-cols-2 lg:divide-x lg:divide-y-0">
+      <div className="grid grid-cols-1 divide-y border-neutral-border-medium lg:grid-cols-2 lg:divide-x lg:divide-y-0">
         <div className="flex flex-col gap-3 p-4 max-h-60 overflow-hidden">
           <div className="text-custom-primary">High Priority Issues</div>
           <div className="flex flex-col h-full gap-2.5 overflow-y-scroll rounded-md">
@@ -290,7 +290,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
                   <Link
                     key={issue.id}
                     href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
-                    className="flex cursor-pointer flex-wrap items-center justify-between gap-2 rounded-md border border-custom-border-200  px-3 py-1.5"
+                    className="flex cursor-pointer flex-wrap items-center justify-between gap-2 rounded-md border border-neutral-border-medium  px-3 py-1.5"
                   >
                     <div className="flex items-center gap-1.5">
                       <PriorityIcon priority={issue.priority} withContainer size={12} />
@@ -340,7 +340,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
             )}
           </div>
         </div>
-        <div className="flex flex-col  border-custom-border-200 p-4 max-h-60">
+        <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 justify-center gap-1">
diff --git a/web/components/cycles/active-cycle-stats.tsx b/web/components/cycles/active-cycle-stats.tsx
index 1ffe19260..e4cb56c1b 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-custom-border-200 px-3 py-1 text-custom-text-100 ${
+            `rounded-3xl border border-neutral-border-medium px-3 py-1 text-custom-text-100 ${
               selected ? " bg-custom-primary text-white" : "  hover:bg-custom-background-80"
             }`
           }
@@ -59,7 +59,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
         </Tab>
         <Tab
           className={({ selected }) =>
-            `rounded-3xl border border-custom-border-200 px-3 py-1 text-custom-text-100 ${
+            `rounded-3xl border border-neutral-border-medium px-3 py-1 text-custom-text-100 ${
               selected ? " bg-custom-primary text-white" : "  hover:bg-custom-background-80"
             }`
           }
@@ -92,7 +92,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
                     key={`unassigned-${index}`}
                     title={
                       <div className="flex items-center gap-2">
-                        <div className="h-5 w-5 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
+                        <div className="h-5 w-5 rounded-full border-2 border-neutral-border-medium bg-custom-background-80">
                           <img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
                         </div>
                         <span>No assignee</span>
diff --git a/web/components/cycles/cycle-peek-overview.tsx b/web/components/cycles/cycle-peek-overview.tsx
index b7acff358..11704dd5a 100644
--- a/web/components/cycles/cycle-peek-overview.tsx
+++ b/web/components/cycles/cycle-peek-overview.tsx
@@ -38,7 +38,7 @@ export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspa
       {peekCycle && (
         <div
           ref={ref}
-          className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300"
+          className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-neutral-border-subtle bg-custom-sidebar-background-100 px-6 py-3.5 duration-300"
           style={{
             boxShadow:
               "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
diff --git a/web/components/cycles/cycles-board-card.tsx b/web/components/cycles/cycles-board-card.tsx
index d2279aeb4..58aa998c1 100644
--- a/web/components/cycles/cycles-board-card.tsx
+++ b/web/components/cycles/cycles-board-card.tsx
@@ -159,7 +159,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
       />
 
       <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
-        <div className="flex h-44 w-full min-w-[250px] flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
+        <div className="flex h-44 w-full min-w-[250px] flex-col justify-between rounded  border border-neutral-border-subtle bg-custom-background-100 p-4 text-sm hover:shadow-md">
           <div className="flex items-center justify-between gap-2">
             <div className="flex items-center gap-3 truncate">
               <span className="flex-shrink-0">
diff --git a/web/components/cycles/cycles-list-item.tsx b/web/components/cycles/cycles-list-item.tsx
index e34f4b30b..4a50d04fb 100644
--- a/web/components/cycles/cycles-list-item.tsx
+++ b/web/components/cycles/cycles-list-item.tsx
@@ -160,7 +160,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
         projectId={projectId}
       />
       <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
-        <div className="group flex h-16 w-full items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90">
+        <div className="group flex h-16 w-full items-center justify-between gap-5 border-b border-neutral-border-subtle bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90">
           <div className="flex w-full items-center gap-3 truncate">
             <div className="flex items-center gap-4 truncate">
               <span className="flex-shrink-0">
diff --git a/web/components/cycles/form.tsx b/web/components/cycles/form.tsx
index e648a158e..c0cc699fe 100644
--- a/web/components/cycles/form.tsx
+++ b/web/components/cycles/form.tsx
@@ -154,7 +154,7 @@ export const CycleForm: React.FC<Props> = (props) => {
           </div>
         </div>
       </div>
-      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-100 pt-5 ">
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-neutral-border-subtle pt-5 ">
         <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={5}>
           Cancel
         </Button>
diff --git a/web/components/cycles/transfer-issues-modal.tsx b/web/components/cycles/transfer-issues-modal.tsx
index 5956e4a1e..c91408457 100644
--- a/web/components/cycles/transfer-issues-modal.tsx
+++ b/web/components/cycles/transfer-issues-modal.tsx
@@ -104,7 +104,7 @@ export const TransferIssuesModal: React.FC<Props> = observer((props) => {
                       <X className="h-4 w-4" />
                     </button>
                   </div>
-                  <div className="flex items-center gap-2 border-b border-custom-border-200 px-5 pb-3">
+                  <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" />
                     <input
                       className="bg-custom-background-90 outline-none"
diff --git a/web/components/dashboard/widgets/assigned-issues.tsx b/web/components/dashboard/widgets/assigned-issues.tsx
index d4a27afc1..6f71f0793 100644
--- a/web/components/dashboard/widgets/assigned-issues.tsx
+++ b/web/components/dashboard/widgets/assigned-issues.tsx
@@ -66,7 +66,7 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
+    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-neutral-border-medium w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
       <div className="flex items-start justify-between gap-2 p-6 pl-7">
         <div>
           <Link
@@ -77,7 +77,7 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
           </Link>
           <p className="mt-3 text-xs font-medium text-custom-text-300">
             Filtered by{" "}
-            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
+            <span className="border-[0.5px] border-neutral-border-medium rounded py-1 px-2 ml-0.5">Due date</span>
           </p>
         </div>
         <DurationFilterDropdown
diff --git a/web/components/dashboard/widgets/created-issues.tsx b/web/components/dashboard/widgets/created-issues.tsx
index 6f2913197..2ae8b821c 100644
--- a/web/components/dashboard/widgets/created-issues.tsx
+++ b/web/components/dashboard/widgets/created-issues.tsx
@@ -62,7 +62,7 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
+    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-neutral-border-medium w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
       <div className="flex items-start justify-between gap-2 p-6 pl-7">
         <div>
           <Link
@@ -73,7 +73,7 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
           </Link>
           <p className="mt-3 text-xs font-medium text-custom-text-300">
             Filtered by{" "}
-            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
+            <span className="border-[0.5px] border-neutral-border-medium rounded py-1 px-2 ml-0.5">Due date</span>
           </p>
         </div>
         <DurationFilterDropdown
diff --git a/web/components/dashboard/widgets/dropdowns/duration-filter.tsx b/web/components/dashboard/widgets/dropdowns/duration-filter.tsx
index 0db293a65..8429d24f1 100644
--- a/web/components/dashboard/widgets/dropdowns/duration-filter.tsx
+++ b/web/components/dashboard/widgets/dropdowns/duration-filter.tsx
@@ -18,7 +18,7 @@ export const DurationFilterDropdown: React.FC<Props> = (props) => {
     <CustomMenu
       className="flex-shrink-0"
       customButton={
-        <div className="px-3 py-2 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 focus:bg-custom-background-80 text-xs font-medium whitespace-nowrap rounded-md outline-none flex items-center gap-2">
+        <div className="px-3 py-2 border-[0.5px] border-neutral-border-medium hover:bg-custom-background-80 focus:bg-custom-background-80 text-xs font-medium whitespace-nowrap rounded-md outline-none flex items-center gap-2">
           {DURATION_FILTER_OPTIONS.find((option) => option.key === value)?.label}
           <ChevronDown className="h-3 w-3" />
         </div>
diff --git a/web/components/dashboard/widgets/issue-panels/issues-list.tsx b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
index 2076de7fb..cca4c935a 100644
--- a/web/components/dashboard/widgets/issue-panels/issues-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
@@ -69,7 +69,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
           </Loader>
         ) : issues.length > 0 ? (
           <>
-            <div className="mt-7 mx-6 border-b-[0.5px] border-custom-border-200 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-custom-text-300 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 6ef6ec0ee..1b84bb9bb 100644
--- a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
@@ -7,7 +7,7 @@ import { ISSUES_TABS_LIST } from "constants/dashboard";
 export const TabsList = () => (
   <Tab.List
     as="div"
-    className="border-[0.5px] border-custom-border-200 rounded grid grid-cols-3 bg-custom-background-80"
+    className="border-[0.5px] border-neutral-border-medium rounded grid grid-cols-3 bg-custom-background-80"
   >
     {ISSUES_TABS_LIST.map((tab) => (
       <Tab
diff --git a/web/components/dashboard/widgets/issues-by-priority.tsx b/web/components/dashboard/widgets/issues-by-priority.tsx
index 45b71466d..1df1906ae 100644
--- a/web/components/dashboard/widgets/issues-by-priority.tsx
+++ b/web/components/dashboard/widgets/issues-by-priority.tsx
@@ -128,7 +128,7 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
   };
 
   return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
+    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-neutral-border-medium w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
       <div className="flex items-start justify-between gap-2 pl-7 pr-6">
         <div>
           <Link
@@ -139,7 +139,7 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
           </Link>
           <p className="mt-3 text-xs font-medium text-custom-text-300">
             Filtered by{" "}
-            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
+            <span className="border-[0.5px] border-neutral-border-medium rounded py-1 px-2 ml-0.5">Due date</span>
           </p>
         </div>
         <DurationFilterDropdown
diff --git a/web/components/dashboard/widgets/issues-by-state-group.tsx b/web/components/dashboard/widgets/issues-by-state-group.tsx
index f8cd2d50a..48d16b101 100644
--- a/web/components/dashboard/widgets/issues-by-state-group.tsx
+++ b/web/components/dashboard/widgets/issues-by-state-group.tsx
@@ -127,7 +127,7 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
   };
 
   return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
+    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-neutral-border-medium w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
       <div className="flex items-start justify-between gap-2 pl-7 pr-6">
         <div>
           <Link
@@ -138,7 +138,7 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
           </Link>
           <p className="mt-3 text-xs font-medium text-custom-text-300">
             Filtered by{" "}
-            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
+            <span className="border-[0.5px] border-neutral-border-medium rounded py-1 px-2 ml-0.5">Due date</span>
           </p>
         </div>
         <DurationFilterDropdown
diff --git a/web/components/dashboard/widgets/overview-stats.tsx b/web/components/dashboard/widgets/overview-stats.tsx
index a4b9c678d..53a3fefb9 100644
--- a/web/components/dashboard/widgets/overview-stats.tsx
+++ b/web/components/dashboard/widgets/overview-stats.tsx
@@ -63,7 +63,7 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
   if (!widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full grid grid-cols-4 p-0.5 hover:shadow-custom-shadow-4xl duration-300">
+    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-neutral-border-medium w-full grid grid-cols-4 p-0.5 hover:shadow-custom-shadow-4xl duration-300">
       {STATS_LIST.map((stat, index) => {
         const isFirst = index === 0;
         const isLast = index === STATS_LIST.length - 1;
diff --git a/web/components/dashboard/widgets/recent-activity.tsx b/web/components/dashboard/widgets/recent-activity.tsx
index fc16946d8..1b77b3161 100644
--- a/web/components/dashboard/widgets/recent-activity.tsx
+++ b/web/components/dashboard/widgets/recent-activity.tsx
@@ -34,7 +34,7 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
   if (!widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full py-6 hover:shadow-custom-shadow-4xl duration-300 min-h-96">
+    <div className="bg-custom-background-100 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">
         Your issue activities
       </Link>
diff --git a/web/components/dashboard/widgets/recent-collaborators.tsx b/web/components/dashboard/widgets/recent-collaborators.tsx
index 2fafbb9ac..cbb6de71b 100644
--- a/web/components/dashboard/widgets/recent-collaborators.tsx
+++ b/web/components/dashboard/widgets/recent-collaborators.tsx
@@ -66,7 +66,7 @@ export const RecentCollaboratorsWidget: React.FC<WidgetProps> = observer((props)
   if (!widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300">
+    <div className="bg-custom-background-100 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">
diff --git a/web/components/dashboard/widgets/recent-projects.tsx b/web/components/dashboard/widgets/recent-projects.tsx
index c4318d889..39250d6f0 100644
--- a/web/components/dashboard/widgets/recent-projects.tsx
+++ b/web/components/dashboard/widgets/recent-projects.tsx
@@ -90,7 +90,7 @@ export const RecentProjectsWidget: React.FC<WidgetProps> = observer((props) => {
   if (!widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full py-6 hover:shadow-custom-shadow-4xl duration-300 min-h-96">
+    <div className="bg-custom-background-100 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"
diff --git a/web/components/dropdowns/cycle.tsx b/web/components/dropdowns/cycle.tsx
index 51c84098a..b9b093d50 100644
--- a/web/components/dropdowns/cycle.tsx
+++ b/web/components/dropdowns/cycle.tsx
@@ -59,7 +59,7 @@ const BorderButton = (props: ButtonProps) => {
     <Tooltip tooltipHeading="Cycle" tooltipContent={cycle?.name ?? placeholder} disabled={!tooltip}>
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
+          "h-full flex items-center gap-1.5 border-[0.5px] border-neutral-border-medium hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
           className
         )}
       >
@@ -330,12 +330,12 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+            <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} />
               <Combobox.Input
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
diff --git a/web/components/dropdowns/date.tsx b/web/components/dropdowns/date.tsx
index 3cbf3449a..c65961900 100644
--- a/web/components/dropdowns/date.tsx
+++ b/web/components/dropdowns/date.tsx
@@ -60,7 +60,7 @@ const BorderButton = (props: ButtonProps) => {
     >
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
+          "h-full flex items-center gap-1.5 border-[0.5px] border-neutral-border-medium hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
           className
         )}
       >
diff --git a/web/components/dropdowns/estimate.tsx b/web/components/dropdowns/estimate.tsx
index 18144540d..f38940e50 100644
--- a/web/components/dropdowns/estimate.tsx
+++ b/web/components/dropdowns/estimate.tsx
@@ -63,7 +63,7 @@ const BorderButton = (props: ButtonProps) => {
     >
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
+          "h-full flex items-center gap-1.5 border-[0.5px] border-neutral-border-medium hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
           className
         )}
       >
@@ -338,12 +338,12 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+            <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} />
               <Combobox.Input
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
diff --git a/web/components/dropdowns/member/buttons.tsx b/web/components/dropdowns/member/buttons.tsx
index c1ec93c53..15a47d37e 100644
--- a/web/components/dropdowns/member/buttons.tsx
+++ b/web/components/dropdowns/member/buttons.tsx
@@ -67,7 +67,7 @@ export const BorderButton = observer((props: ButtonProps) => {
     >
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
+          "h-full flex items-center gap-1.5 border-[0.5px] border-neutral-border-medium hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
           className
         )}
       >
diff --git a/web/components/dropdowns/member/project-member.tsx b/web/components/dropdowns/member/project-member.tsx
index 7cd878841..570a6f913 100644
--- a/web/components/dropdowns/member/project-member.tsx
+++ b/web/components/dropdowns/member/project-member.tsx
@@ -209,12 +209,12 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+            <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} />
               <Combobox.Input
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
diff --git a/web/components/dropdowns/member/workspace-member.tsx b/web/components/dropdowns/member/workspace-member.tsx
index aaa1d7f7e..6fb3afa6e 100644
--- a/web/components/dropdowns/member/workspace-member.tsx
+++ b/web/components/dropdowns/member/workspace-member.tsx
@@ -195,12 +195,12 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
       </Combobox.Button>
       <Combobox.Options className="fixed z-10">
         <div
-          className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+          className="my-1 w-48 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
           ref={setPopperElement}
           style={styles.popper}
           {...attributes.popper}
         >
-          <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+          <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} />
             <Combobox.Input
               className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
diff --git a/web/components/dropdowns/module.tsx b/web/components/dropdowns/module.tsx
index e41555802..06ba73fec 100644
--- a/web/components/dropdowns/module.tsx
+++ b/web/components/dropdowns/module.tsx
@@ -59,7 +59,7 @@ const BorderButton = (props: ButtonProps) => {
     <Tooltip tooltipHeading="Module" tooltipContent={module?.name ?? placeholder} disabled={!tooltip}>
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
+          "h-full flex items-center gap-1.5 border-[0.5px] border-neutral-border-medium hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
           className
         )}
       >
@@ -329,12 +329,12 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+            <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} />
               <Combobox.Input
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
diff --git a/web/components/dropdowns/priority.tsx b/web/components/dropdowns/priority.tsx
index dff1f5aaa..f54aae171 100644
--- a/web/components/dropdowns/priority.tsx
+++ b/web/components/dropdowns/priority.tsx
@@ -55,7 +55,7 @@ const BorderButton = (props: ButtonProps) => {
     high: "bg-orange-500/20 text-orange-950 border-orange-500",
     medium: "bg-yellow-500/20 text-yellow-950 border-yellow-500",
     low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100",
-    none: "bg-custom-background-80 border-custom-border-300",
+    none: "bg-custom-background-80 border-neutral-border-medium",
   };
 
   return (
@@ -424,12 +424,12 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+            <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} />
               <Combobox.Input
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
diff --git a/web/components/dropdowns/project.tsx b/web/components/dropdowns/project.tsx
index cdbe21b08..1d6ccdd7b 100644
--- a/web/components/dropdowns/project.tsx
+++ b/web/components/dropdowns/project.tsx
@@ -51,7 +51,7 @@ const BorderButton = (props: ButtonProps) => {
     <Tooltip tooltipHeading="Project" tooltipContent={project?.name ?? placeholder} disabled={!tooltip}>
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
+          "h-full flex items-center gap-1.5 border-[0.5px] border-neutral-border-medium hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
           className
         )}
       >
@@ -317,12 +317,12 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+            <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} />
               <Combobox.Input
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
diff --git a/web/components/dropdowns/state.tsx b/web/components/dropdowns/state.tsx
index fb8446d23..d45cab1fb 100644
--- a/web/components/dropdowns/state.tsx
+++ b/web/components/dropdowns/state.tsx
@@ -49,7 +49,7 @@ const BorderButton = (props: ButtonProps) => {
     <Tooltip tooltipHeading="State" tooltipContent={state?.name ?? "State"} disabled={!tooltip}>
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
+          "h-full flex items-center gap-1.5 border-[0.5px] border-neutral-border-medium hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
           className
         )}
       >
@@ -308,12 +308,12 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+            <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} />
               <Combobox.Input
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
diff --git a/web/components/emoji-icon-picker/index.tsx b/web/components/emoji-icon-picker/index.tsx
index 0c72b986a..05b827b9f 100644
--- a/web/components/emoji-icon-picker/index.tsx
+++ b/web/components/emoji-icon-picker/index.tsx
@@ -71,9 +71,9 @@ const EmojiIconPicker: React.FC<Props> = (props) => {
       >
         <Popover.Panel
           ref={emojiPickerRef}
-          className="fixed z-10 mt-2 w-[250px] rounded-[4px] border border-custom-border-200 bg-custom-background-80 shadow-lg"
+          className="fixed z-10 mt-2 w-[250px] rounded-[4px] border border-neutral-border-medium bg-custom-background-80 shadow-lg"
         >
-          <div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-200 bg-custom-background-80 p-2 shadow-xl">
+          <div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-neutral-border-medium bg-custom-background-80 p-2 shadow-xl">
             <Tab.Group as="div" className="flex h-full w-full flex-col">
               <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
                 {tabOptions.map((tab) => (
@@ -116,7 +116,7 @@ const EmojiIconPicker: React.FC<Props> = (props) => {
                       </div>
                     </div>
                   )}
-                  <hr className="mb-2 h-[1px] w-full border-custom-border-200" />
+                  <hr className="mb-2 h-[1px] w-full border-neutral-border-medium" />
                   <div>
                     <div className="grid grid-cols-8 gap-x-2 gap-y-3">
                       {emojis.map((emoji) => (
@@ -172,7 +172,7 @@ const EmojiIconPicker: React.FC<Props> = (props) => {
                         />
                       </div>
                     </div>
-                    <hr className="mb-1 h-[1px] w-full border-custom-border-200" />
+                    <hr className="mb-1 h-[1px] w-full border-neutral-border-medium" />
                     <div className="ml-1 mt-1 grid grid-cols-8 gap-x-2 gap-y-3">
                       {icons.material_rounded.map((icon, index) => (
                         <button
diff --git a/web/components/empty-state/comic-box-button.tsx b/web/components/empty-state/comic-box-button.tsx
index 607d74a91..47699509a 100644
--- a/web/components/empty-state/comic-box-button.tsx
+++ b/web/components/empty-state/comic-box-button.tsx
@@ -59,13 +59,13 @@ export const ComicBoxButton: React.FC<Props> = (props) => {
       {isHovered && (
         <Popover.Panel
           as="div"
-          className="flex flex-col rounded border border-custom-border-200 bg-custom-background-100 p-5 relative min-w-80"
+          className="flex flex-col rounded border border-neutral-border-medium bg-custom-background-100 p-5 relative min-w-80"
           ref={setPopperElement}
           style={styles.popper}
           {...attributes.popper}
           static
         >
-          <div className="absolute w-2 h-2 bg-custom-background-100 border rounded-lb-sm  border-custom-border-200 border-r-0 border-t-0 transform rotate-45 bottom-2 -left-[5px]" />
+          <div className="absolute w-2 h-2 bg-custom-background-100 border rounded-lb-sm  border-neutral-border-medium border-r-0 border-t-0 transform rotate-45 bottom-2 -left-[5px]" />
           <h3 className="text-lg font-semibold w-full">{title}</h3>
           <h4 className="mt-1 text-sm">{description}</h4>
         </Popover.Panel>
diff --git a/web/components/estimates/estimate-list-item.tsx b/web/components/estimates/estimate-list-item.tsx
index b6effa711..96cafffa6 100644
--- a/web/components/estimates/estimate-list-item.tsx
+++ b/web/components/estimates/estimate-list-item.tsx
@@ -48,7 +48,7 @@ export const EstimateListItem: React.FC<Props> = observer((props) => {
 
   return (
     <>
-      <div className="gap-2 border-b border-custom-border-100 p-4">
+      <div className="gap-2 border-b border-neutral-border-subtle p-4">
         <div className="flex items-center justify-between">
           <div>
             <h6 className="flex w-[40vw] items-center gap-2 truncate text-sm font-medium">
diff --git a/web/components/estimates/estimates-list.tsx b/web/components/estimates/estimates-list.tsx
index e226e17e0..d12444311 100644
--- a/web/components/estimates/estimates-list.tsx
+++ b/web/components/estimates/estimates-list.tsx
@@ -72,7 +72,7 @@ export const EstimatesList: React.FC = observer(() => {
         data={getProjectEstimateById(estimateToDelete!)}
       />
 
-      <section className="flex items-center justify-between border-b border-custom-border-100 py-3.5">
+      <section className="flex items-center justify-between border-b border-neutral-border-subtle py-3.5">
         <h3 className="text-xl font-medium">Estimates</h3>
         <div className="col-span-12 space-y-5 sm:col-span-7">
           <div className="flex items-center gap-2">
diff --git a/web/components/exporter/guide.tsx b/web/components/exporter/guide.tsx
index 87bf0604a..1e060fd12 100644
--- a/web/components/exporter/guide.tsx
+++ b/web/components/exporter/guide.tsx
@@ -58,7 +58,7 @@ const IntegrationGuide = observer(() => {
             {EXPORTERS_LIST.map((service) => (
               <div
                 key={service.provider}
-                className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6"
+                className="flex items-center justify-between gap-2 border-b border-neutral-border-subtle bg-custom-background-100 px-4 py-6"
               >
                 <div className="flex w-full items-start justify-between gap-4">
                   <div className="item-center flex gap-2.5">
@@ -84,7 +84,7 @@ const IntegrationGuide = observer(() => {
             ))}
           </div>
           <div>
-            <div className="flex items-center justify-between border-b border-custom-border-100 pb-3.5 pt-7">
+            <div className="flex items-center justify-between border-b border-neutral-border-subtle pb-3.5 pt-7">
               <div className="flex items-center gap-2">
                 <h3 className="flex gap-2 text-xl font-medium">Previous Exports</h3>
 
@@ -133,7 +133,7 @@ const IntegrationGuide = observer(() => {
               {exporterServices && exporterServices?.results ? (
                 exporterServices?.results?.length > 0 ? (
                   <div>
-                    <div className="divide-y divide-custom-border-200">
+                    <div className="divide-y divide-neutral-border-medium">
                       {exporterServices?.results.map((service) => (
                         <SingleExport key={service.id} service={service} refreshing={refreshing} />
                       ))}
diff --git a/web/components/gantt-chart/chart/bi-week.tsx b/web/components/gantt-chart/chart/bi-week.tsx
index f4a6080cd..a3f5767d5 100644
--- a/web/components/gantt-chart/chart/bi-week.tsx
+++ b/web/components/gantt-chart/chart/bi-week.tsx
@@ -8,18 +8,18 @@ export const BiWeekChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-200">
+      <div className="absolute flex h-full flex-grow divide-x divide-neutral-border-medium">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-custom-border-200">
+              <div className="relative border-b border-neutral-border-medium">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-custom-border-200">
+              <div className="flex h-full w-full divide-x divide-neutral-border-medium">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -30,7 +30,7 @@ export const BiWeekChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm font-medium capitalize ${
-                          _item?.today ? `border-red-500 text-red-500` : `border-custom-border-200`
+                          _item?.today ? `border-red-500 text-red-500` : `border-neutral-border-medium`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/web/components/gantt-chart/chart/day.tsx b/web/components/gantt-chart/chart/day.tsx
index 32b3caca0..3ca1e0b8f 100644
--- a/web/components/gantt-chart/chart/day.tsx
+++ b/web/components/gantt-chart/chart/day.tsx
@@ -8,18 +8,18 @@ export const DayChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-200">
+      <div className="absolute flex h-full flex-grow divide-x divide-neutral-border-medium">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-custom-border-200">
+              <div className="relative border-b border-neutral-border-medium">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-custom-border-200">
+              <div className="flex h-full w-full divide-x divide-neutral-border-medium">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -30,7 +30,7 @@ export const DayChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm font-medium capitalize ${
-                          _item?.today ? `border-red-500 text-red-500` : `border-custom-border-200`
+                          _item?.today ? `border-red-500 text-red-500` : `border-neutral-border-medium`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/web/components/gantt-chart/chart/hours.tsx b/web/components/gantt-chart/chart/hours.tsx
index 5693b38b8..a367c56dd 100644
--- a/web/components/gantt-chart/chart/hours.tsx
+++ b/web/components/gantt-chart/chart/hours.tsx
@@ -8,18 +8,18 @@ export const HourChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-200">
+      <div className="absolute flex h-full flex-grow divide-x divide-neutral-border-medium">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-custom-border-200">
+              <div className="relative border-b border-neutral-border-medium">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-custom-border-200">
+              <div className="flex h-full w-full divide-x divide-neutral-border-medium">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -30,7 +30,7 @@ export const HourChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm font-medium capitalize ${
-                          _item?.today ? `border-red-500 text-red-500` : `border-custom-border-200`
+                          _item?.today ? `border-red-500 text-red-500` : `border-neutral-border-medium`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/web/components/gantt-chart/chart/index.tsx b/web/components/gantt-chart/chart/index.tsx
index 734d85efb..871d512a1 100644
--- a/web/components/gantt-chart/chart/index.tsx
+++ b/web/components/gantt-chart/chart/index.tsx
@@ -215,7 +215,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       className={`${
         fullScreenMode ? `fixed bottom-0 left-0 right-0 top-0 z-[999999] bg-custom-background-100` : `relative`
       } ${
-        border ? `border border-custom-border-200` : ``
+        border ? `border border-neutral-border-medium` : ``
       } flex h-full select-none flex-col rounded-sm bg-custom-background-100 shadow`}
     >
       {/* chart header */}
@@ -266,7 +266,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
         </div>
 
         <div
-          className="flex cursor-pointer items-center justify-center rounded-sm border border-custom-border-200 p-1 transition-all hover:bg-custom-background-80"
+          className="flex cursor-pointer items-center justify-center rounded-sm border border-neutral-border-medium p-1 transition-all hover:bg-custom-background-80"
           onClick={() => setFullScreenMode((prevData) => !prevData)}
         >
           {fullScreenMode ? <Shrink className="h-4 w-4" /> : <Expand className="h-4 w-4" />}
@@ -276,12 +276,12 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       {/* content */}
       <div
         id="gantt-container"
-        className={`relative flex h-full w-full flex-1 overflow-hidden border-t border-custom-border-200 ${
+        className={`relative flex h-full w-full flex-1 overflow-hidden border-t border-neutral-border-medium ${
           bottomSpacing ? "mb-8" : ""
         }`}
       >
-        <div id="gantt-sidebar" className="flex h-full w-1/4 flex-col border-r border-custom-border-200">
-          <div className="box-border flex h-[60px] flex-shrink-0 items-end justify-between gap-2 border-b border-custom-border-200 pb-2 pl-10 pr-4 text-sm font-medium text-custom-text-300">
+        <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">
             <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 0bc6b7460..df9c447c4 100644
--- a/web/components/gantt-chart/chart/month.tsx
+++ b/web/components/gantt-chart/chart/month.tsx
@@ -12,7 +12,7 @@ export const MonthChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-100/50">
+      <div className="absolute flex h-full flex-grow divide-x divide-neutral-border-subtle">
         {monthBlocks &&
           monthBlocks.length > 0 &&
           monthBlocks.map((block, _idxRoot) => (
@@ -30,7 +30,7 @@ export const MonthChartView: FC<any> = () => {
                     block?.children.map((monthDay, _idx) => (
                       <div
                         key={`sub-title-${_idxRoot}-${_idx}`}
-                        className="flex-shrink-0 border-b border-custom-border-200 py-1 text-center capitalize"
+                        className="flex-shrink-0 border-b border-neutral-border-medium py-1 text-center capitalize"
                         style={{ width: `${currentViewData?.data.width}px` }}
                       >
                         <div className="space-x-1 text-xs">
@@ -44,7 +44,7 @@ export const MonthChartView: FC<any> = () => {
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-custom-border-100/50">
+              <div className="flex h-full w-full divide-x divide-neutral-border-subtle">
                 {block?.children &&
                   block?.children.length > 0 &&
                   block?.children.map((monthDay, _idx) => (
diff --git a/web/components/gantt-chart/chart/quarter.tsx b/web/components/gantt-chart/chart/quarter.tsx
index a15f6f34d..7a7cbac79 100644
--- a/web/components/gantt-chart/chart/quarter.tsx
+++ b/web/components/gantt-chart/chart/quarter.tsx
@@ -8,18 +8,18 @@ export const QuarterChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-200">
+      <div className="absolute flex h-full flex-grow divide-x divide-neutral-border-medium">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-custom-border-200">
+              <div className="relative border-b border-neutral-border-medium">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-custom-border-200">
+              <div className="flex h-full w-full divide-x divide-neutral-border-medium">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -30,7 +30,7 @@ export const QuarterChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm font-medium capitalize ${
-                          _item?.today ? `border-red-500 text-red-500` : `border-custom-border-200`
+                          _item?.today ? `border-red-500 text-red-500` : `border-neutral-border-medium`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/web/components/gantt-chart/chart/week.tsx b/web/components/gantt-chart/chart/week.tsx
index b90caf8b7..a10d2b821 100644
--- a/web/components/gantt-chart/chart/week.tsx
+++ b/web/components/gantt-chart/chart/week.tsx
@@ -8,18 +8,18 @@ export const WeekChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-200">
+      <div className="absolute flex h-full flex-grow divide-x divide-neutral-border-medium">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-custom-border-200">
+              <div className="relative border-b border-neutral-border-medium">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-custom-border-200">
+              <div className="flex h-full w-full divide-x divide-neutral-border-medium">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -30,7 +30,7 @@ export const WeekChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm font-medium capitalize ${
-                          _item?.today ? `border-red-500 text-red-500` : `border-custom-border-200`
+                          _item?.today ? `border-red-500 text-red-500` : `border-neutral-border-medium`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/web/components/gantt-chart/chart/year.tsx b/web/components/gantt-chart/chart/year.tsx
index 7c3a34b53..96e96bcfa 100644
--- a/web/components/gantt-chart/chart/year.tsx
+++ b/web/components/gantt-chart/chart/year.tsx
@@ -8,18 +8,18 @@ export const YearChartView: FC<any> = () => {
 
   return (
     <>
-      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-200">
+      <div className="absolute flex h-full flex-grow divide-x divide-neutral-border-medium">
         {renderView &&
           renderView.length > 0 &&
           renderView.map((_itemRoot: any, _idxRoot: any) => (
             <div key={`title-${_idxRoot}`} className="relative flex flex-col">
-              <div className="relative border-b border-custom-border-200">
+              <div className="relative border-b border-neutral-border-medium">
                 <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
                   {_itemRoot?.title}
                 </div>
               </div>
 
-              <div className="flex h-full w-full divide-x divide-custom-border-200">
+              <div className="flex h-full w-full divide-x divide-neutral-border-medium">
                 {_itemRoot.children &&
                   _itemRoot.children.length > 0 &&
                   _itemRoot.children.map((_item: any, _idx: any) => (
@@ -30,7 +30,7 @@ export const YearChartView: FC<any> = () => {
                     >
                       <div
                         className={`flex-shrink-0 border-b py-1 text-center text-sm font-medium capitalize ${
-                          _item?.today ? `border-red-500 text-red-500` : `border-custom-border-200`
+                          _item?.today ? `border-red-500 text-red-500` : `border-neutral-border-medium`
                         }`}
                       >
                         <div>{_item.title}</div>
diff --git a/web/components/gantt-chart/helpers/draggable.tsx b/web/components/gantt-chart/helpers/draggable.tsx
index 8f4f23566..2a86b9409 100644
--- a/web/components/gantt-chart/helpers/draggable.tsx
+++ b/web/components/gantt-chart/helpers/draggable.tsx
@@ -242,7 +242,7 @@ export const ChartDraggable: React.FC<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-custom-border-300 bg-custom-background-80 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-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
           onClick={handleScrollToBlock}
         >
           <ArrowLeft className="h-3.5 w-3.5" />
@@ -251,7 +251,7 @@ export const ChartDraggable: React.FC<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-custom-border-300 bg-custom-background-80 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-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
           onClick={handleScrollToBlock}
         >
           <ArrowRight className="h-3.5 w-3.5" />
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index 949c192fa..4a3e99fc1 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -144,7 +144,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         cycleDetails={cycleDetails ?? undefined}
       />
-      <div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
         <div className="flex items-center gap-2">
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
diff --git a/web/components/headers/cycles.tsx b/web/components/headers/cycles.tsx
index 59f14ac14..5b9de3f63 100644
--- a/web/components/headers/cycles.tsx
+++ b/web/components/headers/cycles.tsx
@@ -28,7 +28,7 @@ export const CyclesHeader: FC = observer(() => {
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
           <Breadcrumbs>
diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx
index b6aeda154..2bad01cb7 100644
--- a/web/components/headers/global-issues.tsx
+++ b/web/components/headers/global-issues.tsx
@@ -110,7 +110,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
   return (
     <>
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
-      <div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index 52d7ef4f9..4df654132 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -147,7 +147,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         moduleDetails={moduleDetails ?? undefined}
       />
-      <div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
         <div className="flex items-center gap-2">
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
diff --git a/web/components/headers/modules-list.tsx b/web/components/headers/modules-list.tsx
index 3a5258c45..1f803b305 100644
--- a/web/components/headers/modules-list.tsx
+++ b/web/components/headers/modules-list.tsx
@@ -29,7 +29,7 @@ export const ModulesListHeader: React.FC = observer(() => {
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
           <Breadcrumbs>
diff --git a/web/components/headers/page-details.tsx b/web/components/headers/page-details.tsx
index aedc13843..4700a45bb 100644
--- a/web/components/headers/page-details.tsx
+++ b/web/components/headers/page-details.tsx
@@ -25,7 +25,7 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
   const pageDetails = usePage(pageId as string);
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
           <Breadcrumbs>
diff --git a/web/components/headers/pages.tsx b/web/components/headers/pages.tsx
index 1d5853a19..d69777c93 100644
--- a/web/components/headers/pages.tsx
+++ b/web/components/headers/pages.tsx
@@ -27,7 +27,7 @@ export const PagesHeader = observer(() => {
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
           <Breadcrumbs>
diff --git a/web/components/headers/profile-preferences.tsx b/web/components/headers/profile-preferences.tsx
index 0c6329ac9..d39fb6449 100644
--- a/web/components/headers/profile-preferences.tsx
+++ b/web/components/headers/profile-preferences.tsx
@@ -2,7 +2,7 @@
 import { Breadcrumbs } from "@plane/ui";
 
 export const ProfilePreferencesHeader = () => (
-  <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+  <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
     <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
       <div>
         <Breadcrumbs>
diff --git a/web/components/headers/profile-settings.tsx b/web/components/headers/profile-settings.tsx
index 76e5e6fcc..0683a0c01 100644
--- a/web/components/headers/profile-settings.tsx
+++ b/web/components/headers/profile-settings.tsx
@@ -11,7 +11,7 @@ export const ProfileSettingsHeader: FC<IProfileSettingHeader> = (props) => {
   const { title } = props;
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
           <Breadcrumbs>
diff --git a/web/components/headers/project-archived-issue-details.tsx b/web/components/headers/project-archived-issue-details.tsx
index 33fe26fd5..564b66f68 100644
--- a/web/components/headers/project-archived-issue-details.tsx
+++ b/web/components/headers/project-archived-issue-details.tsx
@@ -37,7 +37,7 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
   );
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
           <Breadcrumbs>
diff --git a/web/components/headers/project-archived-issues.tsx b/web/components/headers/project-archived-issues.tsx
index 76eaa2eb6..9412a2c75 100644
--- a/web/components/headers/project-archived-issues.tsx
+++ b/web/components/headers/project-archived-issues.tsx
@@ -68,12 +68,12 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
   };
 
   return (
-    <div className="relative z-10 flex h-14 w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-14 w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div className="block md:hidden">
           <button
             type="button"
-            className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
+            className="grid h-8 w-8 place-items-center rounded border border-neutral-border-medium"
             onClick={() => router.back()}
           >
             <ArrowLeft fontSize={14} strokeWidth={2} />
diff --git a/web/components/headers/project-draft-issues.tsx b/web/components/headers/project-draft-issues.tsx
index 16a6b7691..e834b6700 100644
--- a/web/components/headers/project-draft-issues.tsx
+++ b/web/components/headers/project-draft-issues.tsx
@@ -72,7 +72,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
     [workspaceSlug, projectId, updateFilters]
   );
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
           <Breadcrumbs>
diff --git a/web/components/headers/project-inbox.tsx b/web/components/headers/project-inbox.tsx
index b09aa9dc3..a43224eaf 100644
--- a/web/components/headers/project-inbox.tsx
+++ b/web/components/headers/project-inbox.tsx
@@ -21,7 +21,7 @@ export const ProjectInboxHeader: FC = observer(() => {
   const { currentProjectDetails } = useProject();
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
           <Breadcrumbs>
diff --git a/web/components/headers/project-issue-details.tsx b/web/components/headers/project-issue-details.tsx
index f5e23fe17..876870c18 100644
--- a/web/components/headers/project-issue-details.tsx
+++ b/web/components/headers/project-issue-details.tsx
@@ -31,7 +31,7 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
   );
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
           <Breadcrumbs>
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 365b1ba0e..777e8213c 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -103,12 +103,12 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         projectDetails={currentProjectDetails ?? undefined}
       />
-      <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
         <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
           <div className="block md:hidden">
             <button
               type="button"
-              className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
+              className="grid h-8 w-8 place-items-center rounded border border-neutral-border-medium"
               onClick={() => router.back()}
             >
               <ArrowLeft fontSize={14} strokeWidth={2} />
diff --git a/web/components/headers/project-settings.tsx b/web/components/headers/project-settings.tsx
index d74d201ab..73a12d2b6 100644
--- a/web/components/headers/project-settings.tsx
+++ b/web/components/headers/project-settings.tsx
@@ -28,7 +28,7 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
   if (currentProjectRole && currentProjectRole <= EUserProjectRoles.VIEWER) return null;
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
           <Breadcrumbs>
diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx
index 14d3996b1..dfcf28912 100644
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@@ -105,7 +105,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2">
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx
index 75eb1947e..4c9562039 100644
--- a/web/components/headers/project-views.tsx
+++ b/web/components/headers/project-views.tsx
@@ -28,7 +28,7 @@ export const ProjectViewsHeader: React.FC = observer(() => {
 
   return (
     <>
-      <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
         <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
           <div>
             <Breadcrumbs>
diff --git a/web/components/headers/projects.tsx b/web/components/headers/projects.tsx
index 825af560d..081881f4a 100644
--- a/web/components/headers/projects.tsx
+++ b/web/components/headers/projects.tsx
@@ -21,7 +21,7 @@ export const ProjectsHeader = observer(() => {
   const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
           <Breadcrumbs>
@@ -35,7 +35,7 @@ export const ProjectsHeader = observer(() => {
       </div>
       <div className="flex items-center gap-3">
         {workspaceProjectIds && workspaceProjectIds?.length > 0 && (
-          <div className="flex w-full items-center justify-start gap-1 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5 text-custom-text-400">
+          <div className="flex w-full 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">
             <Search className="h-3.5 w-3.5" />
             <input
               className="w-full min-w-[234px] border-none bg-transparent text-sm focus:outline-none"
diff --git a/web/components/headers/user-profile.tsx b/web/components/headers/user-profile.tsx
index 8109b6af4..3173ffdcc 100644
--- a/web/components/headers/user-profile.tsx
+++ b/web/components/headers/user-profile.tsx
@@ -2,7 +2,7 @@
 import { Breadcrumbs } from "@plane/ui";
 
 export const UserProfileHeader = () => (
-  <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+  <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
     <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
       <div>
         <Breadcrumbs>
diff --git a/web/components/headers/workspace-active-cycles.tsx b/web/components/headers/workspace-active-cycles.tsx
index bb74447d1..5d746039b 100644
--- a/web/components/headers/workspace-active-cycles.tsx
+++ b/web/components/headers/workspace-active-cycles.tsx
@@ -5,7 +5,7 @@ import { Breadcrumbs, ContrastIcon } from "@plane/ui";
 import { Crown } from "lucide-react";
 
 export const WorkspaceActiveCycleHeader = observer(() => (
-  <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+  <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
     <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
       <div className="flex items-center gap-2">
         <Breadcrumbs>
diff --git a/web/components/headers/workspace-analytics.tsx b/web/components/headers/workspace-analytics.tsx
index fd86b6780..9fd64f6e8 100644
--- a/web/components/headers/workspace-analytics.tsx
+++ b/web/components/headers/workspace-analytics.tsx
@@ -9,13 +9,13 @@ export const WorkspaceAnalyticsHeader = () => {
   return (
     <>
       <div
-        className={`relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+        className={`relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4`}
       >
         <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
           <div className="block md:hidden">
             <button
               type="button"
-              className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
+              className="grid h-8 w-8 place-items-center rounded border border-neutral-border-medium"
               onClick={() => router.back()}
             >
               <ArrowLeft fontSize={14} strokeWidth={2} />
diff --git a/web/components/headers/workspace-dashboard.tsx b/web/components/headers/workspace-dashboard.tsx
index 6c212a021..3a6c61e71 100644
--- a/web/components/headers/workspace-dashboard.tsx
+++ b/web/components/headers/workspace-dashboard.tsx
@@ -17,7 +17,7 @@ export const WorkspaceDashboardHeader = () => {
   return (
     <>
       <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} setIsOpen={setIsProductUpdatesModalOpen} />
-      <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
         <div className="flex items-center gap-2 overflow-ellipsis whitespace-nowrap">
           <div>
             <Breadcrumbs>
diff --git a/web/components/headers/workspace-settings.tsx b/web/components/headers/workspace-settings.tsx
index 1a4bdd2fa..26c0beb19 100644
--- a/web/components/headers/workspace-settings.tsx
+++ b/web/components/headers/workspace-settings.tsx
@@ -20,7 +20,7 @@ export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((pro
   const { workspaceSlug } = router.query;
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
           <Breadcrumbs>
diff --git a/web/components/inbox/content/root.tsx b/web/components/inbox/content/root.tsx
index 26f58131e..65795bda7 100644
--- a/web/components/inbox/content/root.tsx
+++ b/web/components/inbox/content/root.tsx
@@ -61,7 +61,7 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
             </div>
           ) : (
             <div className="w-full h-full overflow-hidden relative flex flex-col">
-              <div className="flex-shrink-0 min-h-[50px] border-b border-custom-border-300">
+              <div className="flex-shrink-0 min-h-[50px] border-b border-neutral-border-medium">
                 <InboxIssueActionsHeader
                   workspaceSlug={workspaceSlug}
                   projectId={projectId}
diff --git a/web/components/inbox/inbox-issue-actions.tsx b/web/components/inbox/inbox-issue-actions.tsx
index 0ca28b950..93cf272cf 100644
--- a/web/components/inbox/inbox-issue-actions.tsx
+++ b/web/components/inbox/inbox-issue-actions.tsx
@@ -244,14 +244,14 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
           <div className="flex items-center gap-x-2">
             <button
               type="button"
-              className="rounded border border-custom-border-200 bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
+              className="rounded border border-neutral-border-medium bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
               onClick={() => handleInboxIssueNavigation("prev")}
             >
               <ChevronUp size={14} strokeWidth={2} />
             </button>
             <button
               type="button"
-              className="rounded border border-custom-border-200 bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
+              className="rounded border border-neutral-border-medium bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
               onClick={() => handleInboxIssueNavigation("next")}
             >
               <ChevronDown size={14} strokeWidth={2} />
diff --git a/web/components/inbox/modals/create-issue-modal.tsx b/web/components/inbox/modals/create-issue-modal.tsx
index e152c1b03..7c86706a4 100644
--- a/web/components/inbox/modals/create-issue-modal.tsx
+++ b/web/components/inbox/modals/create-issue-modal.tsx
@@ -316,7 +316,7 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
                       </div>
                     </div>
                   </div>
-                  <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-200 px-5 pt-5">
+                  <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-neutral-border-medium px-5 pt-5">
                     <div
                       className="flex cursor-pointer items-center gap-1"
                       onClick={() => setCreateMore((prevData) => !prevData)}
diff --git a/web/components/inbox/modals/select-duplicate.tsx b/web/components/inbox/modals/select-duplicate.tsx
index e4acca626..ab3ed458f 100644
--- a/web/components/inbox/modals/select-duplicate.tsx
+++ b/web/components/inbox/modals/select-duplicate.tsx
@@ -121,7 +121,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
 
                     <Combobox.Options
                       static
-                      className="max-h-80 scroll-py-2 divide-y divide-custom-border-200 overflow-y-auto"
+                      className="max-h-80 scroll-py-2 divide-y divide-neutral-border-medium overflow-y-auto"
                     >
                       {filteredIssues.length > 0 ? (
                         <li className="p-2">
diff --git a/web/components/inbox/sidebar/filter/applied-filters.tsx b/web/components/inbox/sidebar/filter/applied-filters.tsx
index 0a43e11cc..c4ab33c31 100644
--- a/web/components/inbox/sidebar/filter/applied-filters.tsx
+++ b/web/components/inbox/sidebar/filter/applied-filters.tsx
@@ -56,7 +56,7 @@ export const InboxIssueAppliedFilter: FC<TInboxIssueAppliedFilter> = observer((p
 
   if (!filters || filtersLength <= 0) return <></>;
   return (
-    <div className="relative flex flex-wrap items-center gap-2 p-3 text-[0.65rem] border-b border-custom-border-100">
+    <div className="relative flex flex-wrap items-center gap-2 p-3 text-[0.65rem] border-b border-neutral-border-subtle">
       {Object.keys(filters).map((key) => {
         const filterKey = key as keyof TInboxIssueFilterOptions;
 
@@ -64,7 +64,7 @@ export const InboxIssueAppliedFilter: FC<TInboxIssueAppliedFilter> = observer((p
           return (
             <div
               key={key}
-              className="flex items-center gap-x-2 rounded-full border border-custom-border-200 bg-custom-background-80 px-2 py-1"
+              className="flex items-center gap-x-2 rounded-full border border-neutral-border-medium bg-custom-background-80 px-2 py-1"
             >
               <span className="capitalize text-custom-text-200">{replaceUnderscoreIfSnakeCase(key)}:</span>
               {filters[filterKey]?.length < 0 ? (
@@ -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-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-custom-text-200 hover:text-custom-text-100"
+        className="flex items-center gap-x-1 rounded-full border border-neutral-border-medium bg-custom-background-80 px-3 py-1.5 text-custom-text-200 hover:text-custom-text-100"
       >
         <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 a34cf1871..1d05f4ad4 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-custom-border-200 bg-custom-background-80 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-custom-background-80 text-[0.65rem] text-custom-text-100">
           <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 a85b7a02e..3231ba6a6 100644
--- a/web/components/inbox/sidebar/inbox-list-item.tsx
+++ b/web/components/inbox/sidebar/inbox-list-item.tsx
@@ -60,7 +60,7 @@ export const InboxIssueListItem: FC<TInboxIssueListItem> = observer((props) => {
         href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${issueId}`}
       >
         <div
-          className={`relative min-h-[5rem]select-none space-y-3 border-b border-custom-border-200 px-4 py-2 hover:bg-custom-primary/5 cursor-pointer ${
+          className={`relative min-h-[5rem]select-none space-y-3 border-b border-neutral-border-medium px-4 py-2 hover:bg-custom-primary/5 cursor-pointer ${
             inboxIssueId === issueId ? "bg-custom-primary/5" : " "
           } ${inboxIssueDetail.status !== -2 ? "opacity-60" : ""}`}
         >
@@ -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-custom-border-200 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-custom-text-200 shadow-sm">
                 <CalendarDays size={12} strokeWidth={1.5} />
                 <span>{renderFormattedDate(issue.created_at ?? "")}</span>
               </div>
diff --git a/web/components/inbox/sidebar/root.tsx b/web/components/inbox/sidebar/root.tsx
index 50bb8a31c..b9afaa693 100644
--- a/web/components/inbox/sidebar/root.tsx
+++ b/web/components/inbox/sidebar/root.tsx
@@ -23,7 +23,7 @@ export const InboxSidebarRoot: FC<TInboxSidebarRoot> = observer((props) => {
 
   return (
     <div className="relative flex flex-col w-full h-full">
-      <div className="flex-shrink-0 w-full h-[50px] relative flex justify-between items-center gap-2 p-2 px-3 border-b border-custom-border-300">
+      <div className="flex-shrink-0 w-full h-[50px] relative flex justify-between items-center gap-2 p-2 px-3 border-b border-neutral-border-medium">
         <div className="relative flex items-center gap-1">
           <div className="relative w-6 h-6 flex justify-center items-center rounded bg-custom-background-80">
             <Inbox className="w-4 h-4" />
diff --git a/web/components/instance/help-section.tsx b/web/components/instance/help-section.tsx
index 30cc2a363..ea232bf1d 100644
--- a/web/components/instance/help-section.tsx
+++ b/web/components/instance/help-section.tsx
@@ -45,7 +45,7 @@ export const InstanceHelpSection: FC = () => {
 
   return (
     <div
-      className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 py-2 ${
+      className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-neutral-border-medium bg-custom-sidebar-background-100 px-4 py-2 ${
         sidebarCollapsed ? "flex-col" : ""
       }`}
     >
@@ -90,7 +90,7 @@ export const InstanceHelpSection: FC = () => {
           <div
             className={`absolute bottom-2 min-w-[10rem] ${
               sidebarCollapsed ? "left-full" : "-left-[75px]"
-            } divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
+            } divide-y divide-neutral-border-medium whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
             ref={helpOptionsRef}
           >
             <div className="space-y-1 pb-2">
diff --git a/web/components/instance/not-ready-view.tsx b/web/components/instance/not-ready-view.tsx
index f82a7b8f6..fed2c5305 100644
--- a/web/components/instance/not-ready-view.tsx
+++ b/web/components/instance/not-ready-view.tsx
@@ -14,7 +14,7 @@ export const InstanceNotReady = () => {
   return (
     <div className="h-screen w-full overflow-y-auto bg-onboarding-gradient-100">
       <div className="h-full w-full pt-24">
-        <div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-100 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3">
+        <div className="mx-auto h-full rounded-t-md border-x border-t border-neutral-border-subtle bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3">
           <div className="relative h-full rounded-t-md bg-onboarding-gradient-200 px-7 sm:px-0">
             <div className="flex items-center justify-center py-10">
               <Image src={planeLogo} className="h-[44px] w-full" alt="Plane logo" />
diff --git a/web/components/instance/setup-done-view.tsx b/web/components/instance/setup-done-view.tsx
index 163b00ca5..c60c87864 100644
--- a/web/components/instance/setup-done-view.tsx
+++ b/web/components/instance/setup-done-view.tsx
@@ -32,7 +32,7 @@ export const InstanceSetupDone = () => {
   return (
     <div className="h-full w-full overflow-hidden">
       <div className="h-full w-full overflow-hidden bg-onboarding-gradient-100 pt-12">
-        <div className="mx-auto h-full overflow-hidden rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3">
+        <div className="mx-auto h-full overflow-hidden rounded-t-md border-x border-t border-neutral-border-medium bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3">
           <div className="relative flex h-full flex-col items-center overflow-y-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-8 sm:px-0">
             <div className="flex justify-center py-10">
               <div className="h-[30px]">
diff --git a/web/components/instance/setup-form/root.tsx b/web/components/instance/setup-form/root.tsx
index 2d98b45d6..ddccb77c9 100644
--- a/web/components/instance/setup-form/root.tsx
+++ b/web/components/instance/setup-form/root.tsx
@@ -16,7 +16,7 @@ export const InstanceSetupFormRoot = () => {
     <>
       {setupStep === EInstanceSetupSteps.DONE && <InstanceSetupDone />}
       {setupStep === EInstanceSetupSteps.SIGN_IN && (
-        <div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3">
+        <div className="mx-auto h-full rounded-t-md border-x border-t border-neutral-border-medium bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3">
           <div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 pb-56 pt-24">
             <div className="mx-auto flex flex-col">
               <InstanceSetupSignInForm handleNextStep={() => setSetupStep(EInstanceSetupSteps.DONE)} />
diff --git a/web/components/integration/github/root.tsx b/web/components/integration/github/root.tsx
index bc577328a..aa5ec930e 100644
--- a/web/components/integration/github/root.tsx
+++ b/web/components/integration/github/root.tsx
@@ -167,7 +167,7 @@ export const GithubImporterRoot: React.FC = () => {
           </span>
         </Link>
 
-        <div className="space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4">
+        <div className="space-y-4 rounded-[10px] border border-neutral-border-medium bg-custom-background-100 p-4">
           <div className="flex items-center gap-2">
             <div className="h-10 w-10 flex-shrink-0">
               <Image src={GithubLogo} alt="GithubLogo" />
@@ -183,7 +183,7 @@ export const GithubImporterRoot: React.FC = () => {
                               ? "border-opacity-100 bg-opacity-100"
                               : "border-opacity-80 bg-opacity-80"
                           }`
-                        : "border-custom-border-200"
+                        : "border-neutral-border-medium"
                     }`}
                   >
                     <integration.icon
@@ -194,7 +194,7 @@ export const GithubImporterRoot: React.FC = () => {
                     <div
                       key={index}
                       className={`border-b px-7 ${
-                        index <= activeIntegrationState() - 1 ? `border-custom-primary` : `border-custom-border-200`
+                        index <= activeIntegrationState() - 1 ? `border-custom-primary` : `border-neutral-border-medium`
                       }`}
                     >
                       {" "}
diff --git a/web/components/integration/guide.tsx b/web/components/integration/guide.tsx
index 9499988fa..a472a3f71 100644
--- a/web/components/integration/guide.tsx
+++ b/web/components/integration/guide.tsx
@@ -81,7 +81,7 @@ const IntegrationGuide = observer(() => {
             {IMPORTERS_LIST.map((service) => (
               <div
                 key={service.provider}
-                className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6"
+                className="flex items-center justify-between gap-2 border-b border-neutral-border-subtle bg-custom-background-100 px-4 py-6"
               >
                 <div className="flex items-start gap-4">
                   <div className="relative h-10 w-10 flex-shrink-0">
@@ -102,7 +102,7 @@ const IntegrationGuide = observer(() => {
               </div>
             ))}
             <div>
-              <div className="flex items-center border-b border-custom-border-100 pb-3.5 pt-7">
+              <div className="flex items-center border-b border-neutral-border-subtle pb-3.5 pt-7">
                 <h3 className="flex gap-2 text-xl font-medium">
                   Previous Imports
                   <button
@@ -122,7 +122,7 @@ const IntegrationGuide = observer(() => {
                 {importerServices ? (
                   importerServices.length > 0 ? (
                     <div className="space-y-2">
-                      <div className="divide-y divide-custom-border-200">
+                      <div className="divide-y divide-neutral-border-medium">
                         {importerServices.map((service) => (
                           <SingleImport
                             key={service.id}
diff --git a/web/components/integration/jira/import-users.tsx b/web/components/integration/jira/import-users.tsx
index 63cf84b4f..6c1f2e999 100644
--- a/web/components/integration/jira/import-users.tsx
+++ b/web/components/integration/jira/import-users.tsx
@@ -45,7 +45,7 @@ export const JiraImportUsers: FC = () => {
   }));
 
   return (
-    <div className="h-full w-full space-y-10 divide-y-2 divide-custom-border-200 overflow-y-auto">
+    <div className="h-full w-full space-y-10 divide-y-2 divide-neutral-border-medium overflow-y-auto">
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Users</h3>
diff --git a/web/components/integration/jira/root.tsx b/web/components/integration/jira/root.tsx
index 3c610d03f..f81a85fdd 100644
--- a/web/components/integration/jira/root.tsx
+++ b/web/components/integration/jira/root.tsx
@@ -104,7 +104,7 @@ export const JiraImporterRoot: React.FC = () => {
         </span>
       </Link>
 
-      <div className="flex h-full flex-col space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4">
+      <div className="flex h-full flex-col space-y-4 rounded-[10px] border border-neutral-border-medium bg-custom-background-100 p-4">
         <div className="flex items-center gap-2">
           <div className="h-10 w-10 flex-shrink-0">
             <Image src={JiraLogo} alt="jira logo" />
@@ -121,14 +121,14 @@ export const JiraImporterRoot: React.FC = () => {
                     index > activeIntegrationState() + 1 ||
                     Boolean(index === activeIntegrationState() + 1 && disableTopBarAfter)
                   }
-                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-custom-border-200 ${
+                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-neutral-border-medium ${
                     index <= activeIntegrationState()
                       ? `border-custom-primary bg-custom-primary ${
                           index === activeIntegrationState()
                             ? "border-opacity-100 bg-opacity-100"
                             : "border-opacity-80 bg-opacity-80"
                         }`
-                      : "border-custom-border-200"
+                      : "border-neutral-border-medium"
                   }`}
                 >
                   <integration.icon
@@ -139,7 +139,7 @@ export const JiraImporterRoot: React.FC = () => {
                   <div
                     key={index}
                     className={`border-b px-7 ${
-                      index <= activeIntegrationState() - 1 ? `border-custom-primary` : `border-custom-border-200`
+                      index <= activeIntegrationState() - 1 ? `border-custom-primary` : `border-neutral-border-medium`
                     }`}
                   >
                     {" "}
@@ -162,7 +162,7 @@ export const JiraImporterRoot: React.FC = () => {
                 {currentStep?.state === "import-confirmation" && <JiraConfirmImport />}
               </div>
 
-              <div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-custom-border-200 p-4 pb-0">
+              <div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-neutral-border-medium p-4 pb-0">
                 {currentStep?.state !== "import-configure" && (
                   <Button
                     variant="neutral-primary"
diff --git a/web/components/integration/single-integration-card.tsx b/web/components/integration/single-integration-card.tsx
index 70bbb5fa4..bcdd105c9 100644
--- a/web/components/integration/single-integration-card.tsx
+++ b/web/components/integration/single-integration-card.tsx
@@ -107,7 +107,7 @@ export const SingleIntegrationCard: React.FC<Props> = observer(({ integration })
   const isInstalled = workspaceIntegrations?.find((i: any) => i.integration_detail.id === integration.id);
 
   return (
-    <div className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6">
+    <div className="flex items-center justify-between gap-2 border-b border-neutral-border-subtle bg-custom-background-100 px-4 py-6">
       <div className="flex items-start gap-4">
         <div className="h-10 w-10 flex-shrink-0">
           <Image src={integrationDetails[integration.provider].logo} alt={`${integration.title} Logo`} />
diff --git a/web/components/issues/attachment/attachment-detail.tsx b/web/components/issues/attachment/attachment-detail.tsx
index 0d345a619..950cdff4e 100644
--- a/web/components/issues/attachment/attachment-detail.tsx
+++ b/web/components/issues/attachment/attachment-detail.tsx
@@ -49,7 +49,7 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = (props) => {
 
       <div
         key={attachmentId}
-        className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-200 bg-custom-background-100 px-4 py-2 text-sm"
+        className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-neutral-border-medium bg-custom-background-100 px-4 py-2 text-sm"
       >
         <Link href={attachment.asset} target="_blank" rel="noopener noreferrer">
           <div className="flex items-center gap-3">
diff --git a/web/components/issues/attachment/attachment-upload.tsx b/web/components/issues/attachment/attachment-upload.tsx
index bf197980a..9aaf1fc13 100644
--- a/web/components/issues/attachment/attachment-upload.tsx
+++ b/web/components/issues/attachment/attachment-upload.tsx
@@ -62,7 +62,7 @@ export const IssueAttachmentUpload: React.FC<Props> = observer((props) => {
     <div
       {...getRootProps()}
       className={`flex h-[60px] items-center justify-center rounded-md border-2 border-dashed bg-custom-primary/5 px-4 text-xs text-custom-primary ${
-        isDragActive ? "border-custom-primary bg-custom-primary/10" : "border-custom-border-200"
+        isDragActive ? "border-custom-primary bg-custom-primary/10" : "border-neutral-border-medium"
       } ${isDragReject ? "bg-red-100" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
     >
       <input {...getInputProps()} />
diff --git a/web/components/issues/draft-issue-form.tsx b/web/components/issues/draft-issue-form.tsx
index fdbfb30f7..eb70d63c7 100644
--- a/web/components/issues/draft-issue-form.tsx
+++ b/web/components/issues/draft-issue-form.tsx
@@ -642,7 +642,7 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
             </div>
           </div>
         </div>
-        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-200 px-5 pt-5">
+        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-neutral-border-medium px-5 pt-5">
           <div
             className="flex cursor-pointer items-center gap-1"
             onClick={() => setCreateMore((prevData) => !prevData)}
diff --git a/web/components/issues/draft-issue-modal.tsx b/web/components/issues/draft-issue-modal.tsx
index 39a5fbc5f..08fac4540 100644
--- a/web/components/issues/draft-issue-modal.tsx
+++ b/web/components/issues/draft-issue-modal.tsx
@@ -322,7 +322,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer(
                 leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                 leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
               >
-                <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-4xl">
+                <Dialog.Panel className="relative transform rounded-lg border border-neutral-border-medium bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-4xl">
                   <DraftIssueForm
                     isOpen={isOpen}
                     handleFormSubmit={handleFormSubmit}
diff --git a/web/components/issues/issue-detail/inbox/root.tsx b/web/components/issues/issue-detail/inbox/root.tsx
index b8f12a944..89e9de669 100644
--- a/web/components/issues/issue-detail/inbox/root.tsx
+++ b/web/components/issues/issue-detail/inbox/root.tsx
@@ -106,7 +106,7 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
   if (!issue) return <></>;
   return (
     <div className="flex h-full overflow-hidden">
-      <div className="h-full w-2/3 space-y-5 divide-y-2 divide-custom-border-300 overflow-y-auto p-5">
+      <div className="h-full w-2/3 space-y-5 divide-y-2 divide-neutral-border-medium overflow-y-auto p-5">
         <InboxIssueMainContent
           workspaceSlug={workspaceSlug}
           projectId={projectId}
@@ -116,7 +116,7 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
           is_editable={is_editable}
         />
       </div>
-      <div className="h-full w-1/3 space-y-5 overflow-hidden border-l border-custom-border-300 py-5">
+      <div className="h-full w-1/3 space-y-5 overflow-hidden border-l border-neutral-border-medium py-5">
         <InboxIssueDetailsSidebar
           workspaceSlug={workspaceSlug}
           projectId={projectId}
diff --git a/web/components/issues/issue-detail/inbox/sidebar.tsx b/web/components/issues/issue-detail/inbox/sidebar.tsx
index e0b2aca28..5408db7df 100644
--- a/web/components/issues/issue-detail/inbox/sidebar.tsx
+++ b/web/components/issues/issue-detail/inbox/sidebar.tsx
@@ -39,7 +39,7 @@ export const InboxIssueDetailsSidebar: React.FC<Props> = observer((props) => {
   const currentIssueState = projectStates?.find((s) => s.id === issue.state_id);
 
   return (
-    <div className="flex h-full w-full flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
+    <div className="flex h-full w-full flex-col divide-y-2 divide-neutral-border-medium overflow-hidden">
       <div className="flex items-center justify-between px-5 pb-3">
         <div className="flex items-center gap-x-2">
           {currentIssueState && (
@@ -53,7 +53,7 @@ export const InboxIssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
       <div className="h-full w-full overflow-y-auto px-5">
         <h5 className="text-sm font-medium my-4">Properties</h5>
-        <div className={`divide-y-2 divide-custom-border-200 ${!is_editable ? "opacity-60" : ""}`}>
+        <div className={`divide-y-2 divide-neutral-border-medium ${!is_editable ? "opacity-60" : ""}`}>
           <div className="flex flex-col gap-3">
             {/* State */}
             <div className="flex items-center gap-2 h-8">
@@ -116,7 +116,7 @@ export const InboxIssueDetailsSidebar: React.FC<Props> = observer((props) => {
             </div>
           </div>
         </div>
-        <div className={`divide-y-2 divide-custom-border-200 mt-3 ${!is_editable ? "opacity-60" : ""}`}>
+        <div className={`divide-y-2 divide-neutral-border-medium mt-3 ${!is_editable ? "opacity-60" : ""}`}>
           <div className="flex flex-col gap-3">
             {/* Due Date */}
             <div className="flex items-center gap-2 h-8">
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 b9c59c9b3..c5139a823 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
@@ -28,7 +28,7 @@ export const IssueLabelActivity: FC<TIssueLabelActivity> = observer((props) => {
       <>
         {activity.old_value === "" ? `added a new label ` : `removed the label `}
         {activity.old_value === "" ? (
-          <span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+          <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">
             <span
               className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
               style={{
@@ -39,7 +39,7 @@ export const IssueLabelActivity: FC<TIssueLabelActivity> = observer((props) => {
             <span className="flex-shrink truncate font-medium text-custom-text-100">{activity.new_value}</span>
           </span>
         ) : (
-          <span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+          <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">
             <span
               className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
               style={{
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 4dbc36f6b..6b1ca72d4 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
@@ -34,7 +34,7 @@ export const IssueCommentBlock: FC<TIssueCommentBlock> = (props) => {
             }
             height={30}
             width={30}
-            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-200"
+            className="grid h-7 w-7 place-items-center rounded-full border-2 border-neutral-border-medium"
           />
         ) : (
           <>
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 2000721ee..b57395e39 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
@@ -158,7 +158,7 @@ export const IssueCommentCard: FC<TIssueCommentCard> = (props) => {
           <LiteReadOnlyEditorWithRef
             ref={showEditorRef}
             value={comment.comment_html ?? ""}
-            customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+            customClassName="text-xs border border-neutral-border-medium bg-custom-background-100"
             mentionHighlights={mentionHighlights}
           />
 
diff --git a/web/components/issues/issue-detail/label/create-label.tsx b/web/components/issues/issue-detail/label/create-label.tsx
index 72bc034f8..b8cf91ba6 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-custom-border-100 rounded-full text-xs p-0.5 px-2 hover:bg-custom-background-90 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-custom-background-90 text-custom-text-300 hover:text-custom-text-200"
         onClick={handleIsCreateToggle}
       >
         <div className="flex-shrink-0">
diff --git a/web/components/issues/issue-detail/label/label-list-item.tsx b/web/components/issues/issue-detail/label/label-list-item.tsx
index 3c3164c5a..7969e098a 100644
--- a/web/components/issues/issue-detail/label/label-list-item.tsx
+++ b/web/components/issues/issue-detail/label/label-list-item.tsx
@@ -35,7 +35,7 @@ export const LabelListItem: FC<TLabelListItem> = (props) => {
   return (
     <div
       key={labelId}
-      className={`transition-all relative flex items-center gap-1  border border-custom-border-100 rounded-full text-xs p-0.5 px-1 group ${
+      className={`transition-all relative flex items-center gap-1  border border-neutral-border-subtle rounded-full text-xs p-0.5 px-1 group ${
         !disabled ? "cursor-pointer hover:border-red-500/50 hover:bg-red-500/20" : "cursor-not-allowed"
       } `}
       onClick={handleLabel}
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 4af089d5e..e4cabf813 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-custom-background-90 py-0.5 text-custom-text-300 hover:text-custom-text-200 border border-custom-border-100`}
+      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-custom-background-90 py-0.5 text-custom-text-300 hover:text-custom-text-200 border border-neutral-border-subtle`}
     >
       <div className="flex-shrink-0">
         <Tag className="h-2.5 w-2.5" />
@@ -104,12 +104,12 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
 
         <Combobox.Options className="fixed z-10">
           <div
-            className={`z-10 my-1 w-48 whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none`}
+            className={`z-10 my-1 w-48 whitespace-nowrap rounded border border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none`}
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+            <div className="flex w-full items-center justify-start rounded border border-neutral-border-medium bg-custom-background-90 px-2">
               <Search className="h-3.5 w-3.5 text-custom-text-300" />
               <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"
diff --git a/web/components/issues/issue-detail/parent/root.tsx b/web/components/issues/issue-detail/parent/root.tsx
index 2176ccecc..7d638f550 100644
--- a/web/components/issues/issue-detail/parent/root.tsx
+++ b/web/components/issues/issue-detail/parent/root.tsx
@@ -38,7 +38,7 @@ export const IssueParentDetail: FC<TIssueParentDetail> = (props) => {
 
   return (
     <>
-      <div className="mb-5 flex w-min items-center gap-3 whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-80 px-2.5 py-1 text-xs">
+      <div className="mb-5 flex w-min items-center gap-3 whitespace-nowrap rounded-md border border-neutral-border-medium bg-custom-background-80 px-2.5 py-1 text-xs">
         <Link href={`/${peekIssue?.workspaceSlug}/projects/${parentIssue?.project_id}/issues/${parentIssue.id}`}>
           <div className="flex items-center gap-3">
             <div className="flex items-center gap-2.5">
@@ -52,7 +52,7 @@ export const IssueParentDetail: FC<TIssueParentDetail> = (props) => {
         </Link>
 
         <CustomMenu ellipsis optionsClassName="p-1.5">
-          <div className="border-b border-custom-border-300 text-xs font-medium text-custom-text-200">
+          <div className="border-b border-neutral-border-medium text-xs font-medium text-custom-text-200">
             Sibling issues
           </div>
 
diff --git a/web/components/issues/issue-detail/reactions/reaction-selector.tsx b/web/components/issues/issue-detail/reactions/reaction-selector.tsx
index 0782e7e15..006512b0d 100644
--- a/web/components/issues/issue-detail/reactions/reaction-selector.tsx
+++ b/web/components/issues/issue-detail/reactions/reaction-selector.tsx
@@ -48,7 +48,7 @@ export const ReactionSelector: React.FC<Props> = (props) => {
                 position === "top" ? "-top-12" : "-bottom-12"
               }`}
             >
-              <div className="rounded-md border border-custom-border-200 bg-custom-sidebar-background-100 p-1 shadow-custom-shadow-sm">
+              <div className="rounded-md border border-neutral-border-medium bg-custom-sidebar-background-100 p-1 shadow-custom-shadow-sm">
                 <div className="flex gap-x-1">
                   {reactionEmojis.map((emoji) => (
                     <button
diff --git a/web/components/issues/issue-detail/root.tsx b/web/components/issues/issue-detail/root.tsx
index 58a52cc97..91fb775bb 100644
--- a/web/components/issues/issue-detail/root.tsx
+++ b/web/components/issues/issue-detail/root.tsx
@@ -216,7 +216,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
         />
       ) : (
         <div className="flex h-full overflow-hidden">
-          <div className="h-full w-2/3 space-y-5 divide-y-2 divide-custom-border-300 overflow-y-auto p-5">
+          <div className="h-full w-2/3 space-y-5 divide-y-2 divide-neutral-border-medium overflow-y-auto p-5">
             <IssueMainContent
               workspaceSlug={workspaceSlug}
               projectId={projectId}
@@ -225,7 +225,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
               is_editable={!is_archived && is_editable}
             />
           </div>
-          <div className="h-full w-1/3 space-y-5 overflow-hidden border-l border-custom-border-300 py-5">
+          <div className="h-full w-1/3 space-y-5 overflow-hidden border-l border-neutral-border-medium py-5">
             <IssueDetailsSidebar
               workspaceSlug={workspaceSlug}
               projectId={projectId}
diff --git a/web/components/issues/issue-detail/sidebar.tsx b/web/components/issues/issue-detail/sidebar.tsx
index f811078f8..de915349b 100644
--- a/web/components/issues/issue-detail/sidebar.tsx
+++ b/web/components/issues/issue-detail/sidebar.tsx
@@ -107,7 +107,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
         />
       )}
 
-      <div className="flex h-full w-full flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
+      <div className="flex h-full w-full flex-col divide-y-2 divide-neutral-border-medium overflow-hidden">
         <div className="flex items-center justify-between px-5 pb-3">
           <div className="flex items-center gap-x-2">
             {currentIssueState ? (
@@ -131,7 +131,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
             <button
               type="button"
-              className="rounded-md border border-custom-border-200 p-2 shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary"
+              className="rounded-md border border-neutral-border-medium p-2 shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary"
               onClick={handleCopyText}
             >
               <LinkIcon className="h-3.5 w-3.5" />
diff --git a/web/components/issues/issue-layouts/calendar/calendar.tsx b/web/components/issues/issue-layouts/calendar/calendar.tsx
index 1652aa89b..9d7aa966b 100644
--- a/web/components/issues/issue-layouts/calendar/calendar.tsx
+++ b/web/components/issues/issue-layouts/calendar/calendar.tsx
@@ -66,7 +66,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
         <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
         <div className="h-full w-full overflow-y-auto">
           {layout === "month" && (
-            <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
+            <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-neutral-border-medium">
               {allWeeksOfActiveMonth &&
                 Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
                   <CalendarWeekDays
diff --git a/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx b/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
index 2443ae17b..e983cb590 100644
--- a/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
+++ b/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
@@ -97,7 +97,7 @@ export const CalendarMonthsDropdown: React.FC<Props> = observer((props: Props) =
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
-            className="w-56 divide-y divide-custom-border-200 rounded border border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg"
+            className="w-56 divide-y divide-neutral-border-medium rounded border border-neutral-border-medium bg-custom-background-100 p-3 shadow-custom-shadow-rg"
           >
             <div className="flex items-center justify-between gap-2 pb-3">
               <button
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 0abe8580d..276bb610b 100644
--- a/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
+++ b/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
@@ -120,7 +120,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
                 ref={setPopperElement}
                 style={styles.popper}
                 {...attributes.popper}
-                className="absolute right-0 z-10 mt-1 min-w-[12rem] overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 p-1 shadow-custom-shadow-sm"
+                className="absolute right-0 z-10 mt-1 min-w-[12rem] overflow-hidden rounded border border-neutral-border-medium bg-custom-background-100 p-1 shadow-custom-shadow-sm"
               >
                 <div>
                   {Object.entries(CALENDAR_LAYOUTS).map(([layout, layoutDetails]) => (
diff --git a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
index 5711c89f6..6dff6c2c4 100644
--- a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
+++ b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
@@ -84,7 +84,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
                     )}
 
                     <div
-                      className={`group/calendar-block flex h-8 w-full items-center justify-between gap-1.5 rounded border-[0.5px] border-custom-border-100 px-1 py-1.5 shadow-custom-shadow-2xs ${
+                      className={`group/calendar-block flex h-8 w-full items-center justify-between gap-1.5 rounded border-[0.5px] border-neutral-border-subtle px-1 py-1.5 shadow-custom-shadow-2xs ${
                         snapshot.isDragging
                           ? "bg-custom-background-90 shadow-custom-shadow-rg"
                           : "bg-custom-background-100 hover:bg-custom-background-90"
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 0f81d79a6..9a2405578 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
@@ -160,7 +160,7 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
         >
           <form
             onSubmit={handleSubmit(onSubmitHandler)}
-            className="z-50 flex w-full items-center gap-x-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-2 shadow-custom-shadow-2xs transition-opacity"
+            className="z-50 flex w-full items-center gap-x-2 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-2 shadow-custom-shadow-2xs transition-opacity"
           >
             <Inputs formKey={formKey} register={register} setFocus={setFocus} projectDetails={projectDetail} />
           </form>
@@ -168,7 +168,7 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
       )}
 
       {!isOpen && (
-        <div className="hidden rounded border-[0.5px] border-custom-border-200 group-hover:block">
+        <div className="hidden rounded border-[0.5px] border-neutral-border-medium group-hover:block">
           <button
             type="button"
             className="flex w-full items-center gap-x-[6px] rounded-md px-2 py-1.5 text-custom-primary-100"
diff --git a/web/components/issues/issue-layouts/calendar/week-days.tsx b/web/components/issues/issue-layouts/calendar/week-days.tsx
index c34aaef97..dd81d7bc4 100644
--- a/web/components/issues/issue-layouts/calendar/week-days.tsx
+++ b/web/components/issues/issue-layouts/calendar/week-days.tsx
@@ -48,7 +48,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
 
   return (
     <div
-      className={`grid divide-x-[0.5px] divide-custom-border-200 ${showWeekends ? "grid-cols-7" : "grid-cols-5"} ${
+      className={`grid divide-x-[0.5px] divide-neutral-border-medium ${showWeekends ? "grid-cols-7" : "grid-cols-5"} ${
         calendarLayout === "month" ? "" : "h-full"
       }`}
     >
diff --git a/web/components/issues/issue-layouts/calendar/week-header.tsx b/web/components/issues/issue-layouts/calendar/week-header.tsx
index 5e7b0fcb7..6a2c110da 100644
--- a/web/components/issues/issue-layouts/calendar/week-header.tsx
+++ b/web/components/issues/issue-layouts/calendar/week-header.tsx
@@ -13,7 +13,7 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
 
   return (
     <div
-      className={`relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${
+      className={`relative grid divide-x-[0.5px] divide-neutral-border-medium text-sm font-medium ${
         showWeekends ? "grid-cols-7" : "grid-cols-5"
       }`}
     >
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 4ca2538e5..26b6e5356 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
@@ -54,7 +54,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
         return (
           <div
             key={filterKey}
-            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
+            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>
             <div className="flex flex-wrap items-center gap-1">
@@ -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-custom-border-200 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-custom-text-300 hover:text-custom-text-200"
         >
           Clear all
           <X size={12} strokeWidth={2} />
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
index 3c94b4f3f..41d5b6dc5 100644
--- a/web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
@@ -35,7 +35,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
     Object.keys(layoutDisplayFiltersOptions?.display_filters ?? {}).includes(displayFilter);
 
   return (
-    <div className="relative h-full w-full divide-y divide-custom-border-200 overflow-hidden overflow-y-auto px-2.5">
+    <div className="relative h-full w-full divide-y divide-neutral-border-medium overflow-hidden overflow-y-auto px-2.5">
       {/* display properties */}
       {layoutDisplayFiltersOptions?.display_properties && (
         <div className="py-2">
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
index 3ea1453e8..442a1d865 100644
--- a/web/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
@@ -34,7 +34,7 @@ export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
               className={`rounded border px-2 py-0.5 text-xs transition-all ${
                 displayProperties?.[displayProperty.key]
                   ? "border-custom-primary-100 bg-custom-primary-100 text-white"
-                  : "border-custom-border-200 hover:bg-custom-background-80"
+                  : "border-neutral-border-medium hover:bg-custom-background-80"
               }`}
               onClick={() =>
                 handleUpdate({
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 af8cfc84a..e15d3feca 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
@@ -38,7 +38,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
       <div className="bg-custom-background-100 p-2.5 pb-0">
-        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
+        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-90 px-1.5 py-1 text-xs">
           <Search className="text-custom-text-400" size={12} strokeWidth={2} />
           <input
             type="text"
@@ -55,7 +55,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
           )}
         </div>
       </div>
-      <div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5">
+      <div className="h-full w-full divide-y divide-neutral-border-medium overflow-y-auto px-2.5">
         {/* priority */}
         {isFilterEnabled("priority") && (
           <div className="py-2">
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 425f53b46..602458c7b 100644
--- a/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
+++ b/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -59,7 +59,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
             >
               <Popover.Panel>
                 <div
-                  className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
+                  className="z-10 overflow-hidden rounded border border-neutral-border-medium bg-custom-background-100 shadow-custom-shadow-rg"
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}
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 f46d962ea..1156c4b78 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
@@ -21,7 +21,7 @@ export const FilterOption: React.FC<Props> = (props) => {
     >
       <div
         className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-custom-background-90 ${
-          isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-custom-border-300"
+          isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-neutral-border-medium"
         } ${multiple ? "rounded-sm" : "rounded-full"}`}
       >
         {isChecked && <Check size={10} strokeWidth={3} />}
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 78f332ddd..15e891bba 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
@@ -132,7 +132,7 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
             <form
               ref={ref}
               onSubmit={handleSubmit(onSubmitHandler)}
-              className="flex w-full items-center gap-x-3 border-[0.5px] border-custom-border-100 bg-custom-background-100 px-3"
+              className="flex w-full items-center gap-x-3 border-[0.5px] border-neutral-border-subtle bg-custom-background-100 px-3"
             >
               <Inputs formKey={"name"} register={register} setFocus={setFocus} projectDetail={projectDetail ?? null} />
             </form>
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index 40bd19cf1..59303741c 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -114,7 +114,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
         <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
       )}
       <div
-        className={`space-y-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs transition-all ${
+        className={`space-y-2 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs transition-all ${
           isDragDisabled ? "" : "hover:cursor-grab"
         } ${snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`}`}
       >
diff --git a/web/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
index 1b9f27828..a442db09f 100644
--- a/web/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -128,7 +128,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
                   handleKanbanFilters={handleKanbanFilters}
                 />
               </div>
-              <div className="w-full border-b border-dashed border-custom-border-400" />
+              <div className="w-full border-b border-dashed border-neutral-border-strong" />
             </div>
 
             {!kanbanFilters?.sub_group_by.includes(_list.id) && (
diff --git a/web/components/issues/issue-layouts/list/blocks-list.tsx b/web/components/issues/issue-layouts/list/blocks-list.tsx
index 729cd6c68..d347b8a99 100644
--- a/web/components/issues/issue-layouts/list/blocks-list.tsx
+++ b/web/components/issues/issue-layouts/list/blocks-list.tsx
@@ -18,7 +18,7 @@ export const IssueBlocksList: FC<Props> = (props) => {
   const { issueIds, issuesMap, handleIssues, quickActions, displayProperties, canEditProperties } = props;
 
   return (
-    <div className="relative h-full w-full divide-y-[0.5px] divide-custom-border-200">
+    <div className="relative h-full w-full divide-y-[0.5px] divide-neutral-border-medium">
       {issueIds && issueIds.length > 0 ? (
         issueIds.map((issueId: string) => {
           if (!issueId) return null;
diff --git a/web/components/issues/issue-layouts/list/default.tsx b/web/components/issues/issue-layouts/list/default.tsx
index 95e31b758..5fc8fa674 100644
--- a/web/components/issues/issue-layouts/list/default.tsx
+++ b/web/components/issues/issue-layouts/list/default.tsx
@@ -109,7 +109,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
           (_list: any) =>
             validateEmptyIssueGroups(is_list ? issueIds : issueIds?.[_list.id]) && (
               <div key={_list.id} className={`flex flex-shrink-0 flex-col`}>
-                <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 py-1">
+                <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-neutral-border-medium bg-custom-background-90 px-3 py-1">
                   <HeaderGroupByCard
                     icon={_list.icon}
                     title={_list.name || ""}
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 540d4d7f6..05feaa819 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
@@ -117,7 +117,7 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
 
   return (
     <div
-      className={`border-b border-t border-custom-border-200 bg-custom-background-100 ${
+      className={`border-b border-t border-neutral-border-medium bg-custom-background-100 ${
         errors && errors?.name && errors?.name?.message ? `border-red-500 bg-red-500/10` : ``
       }`}
     >
@@ -126,7 +126,7 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
           <form
             ref={ref}
             onSubmit={handleSubmit(onSubmitHandler)}
-            className="flex w-full items-center gap-x-3 border-[0.5px] border-t-0 border-custom-border-100 bg-custom-background-100 px-3"
+            className="flex w-full items-center gap-x-3 border-[0.5px] border-t-0 border-neutral-border-subtle bg-custom-background-100 px-3"
           >
             <Inputs formKey={"name"} register={register} setFocus={setFocus} projectDetail={projectDetail ?? null} />
           </form>
diff --git a/web/components/issues/issue-layouts/properties/all-properties.tsx b/web/components/issues/issue-layouts/properties/all-properties.tsx
index b7e1fae4f..72e881d00 100644
--- a/web/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/web/components/issues/issue-layouts/properties/all-properties.tsx
@@ -184,7 +184,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         shouldRenderProperty={!!issue?.sub_issues_count}
       >
         <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
-          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
+          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-neutral-border-medium px-2.5 py-1">
             <Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
             <div className="text-xs">{issue.sub_issues_count}</div>
           </div>
@@ -198,7 +198,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         shouldRenderProperty={!!issue?.attachment_count}
       >
         <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
+          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-neutral-border-medium px-2.5 py-1">
             <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
             <div className="text-xs">{issue.attachment_count}</div>
           </div>
@@ -212,7 +212,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         shouldRenderProperty={!!issue?.link_count}
       >
         <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
+          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-neutral-border-medium px-2.5 py-1">
             <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
             <div className="text-xs">{issue.link_count}</div>
           </div>
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
index 0a33ed886..dcc8c54f1 100644
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -113,7 +113,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                     key={label.id}
                     className={`flex overflow-hidden hover:bg-custom-background-80 ${
                       !disabled && "cursor-pointer"
-                    } h-full max-w-full flex-shrink-0 items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs`}
+                    } 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">
                       <span
@@ -130,7 +130,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
           </>
         ) : (
           <div
-            className={`flex h-full flex-shrink-0 items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs ${
+            className={`flex h-full flex-shrink-0 items-center rounded border-[0.5px] border-neutral-border-medium px-2.5 py-1 text-xs ${
               disabled ? "cursor-not-allowed" : "cursor-pointer"
             }`}
           >
@@ -153,7 +153,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
         <Tooltip position="top" tooltipHeading="Labels" tooltipContent="None">
           <div
             className={`flex h-full items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
-              noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
+              noLabelBorder ? "" : "border-[0.5px] border-neutral-border-medium"
             }`}
           >
             <Tags className="h-3.5 w-3.5" strokeWidth={2} />
@@ -193,12 +193,12 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
 
       <Combobox.Options className="fixed z-10">
         <div
-          className={`z-10 my-1 w-48 whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
+          className={`z-10 my-1 w-48 whitespace-nowrap rounded border border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
           ref={setPopperElement}
           style={styles.popper}
           {...attributes.popper}
         >
-          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+          <div className="flex w-full items-center justify-start rounded border border-neutral-border-medium bg-custom-background-90 px-2">
             <Search className="h-3.5 w-3.5 text-custom-text-300" />
             <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"
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
index 2656143ac..6ec0277a8 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -15,7 +15,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = observer((props: Props
   const { issue, onChange, disabled } = props;
 
   return (
-    <div className="h-11 border-b-[0.5px] border-custom-border-200">
+    <div className="h-11 border-b-[0.5px] border-neutral-border-medium">
       <ProjectMemberDropdown
         value={issue?.assignee_ids ?? []}
         onChange={(data) => onChange(issue, { assignee_ids: data })}
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
index c17a433b8..7578bfd9a 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
@@ -11,7 +11,7 @@ export const SpreadsheetAttachmentColumn: React.FC<Props> = observer((props) =>
   const { issue } = props;
 
   return (
-    <div className="flex h-11 w-full items-center px-2.5 py-1 text-xs border-b-[0.5px] border-custom-border-200 hover:bg-custom-background-80">
+    <div className="flex h-11 w-full items-center px-2.5 py-1 text-xs border-b-[0.5px] border-neutral-border-medium hover:bg-custom-background-80">
       {issue?.attachment_count} {issue?.attachment_count === 1 ? "attachment" : "attachments"}
     </div>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
index 8d373efb4..4d7197cc3 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
@@ -12,7 +12,7 @@ type Props = {
 export const SpreadsheetCreatedOnColumn: React.FC<Props> = observer((props: Props) => {
   const { issue } = props;
   return (
-    <div className="flex h-11 w-full items-center justify-center text-xs border-b-[0.5px] border-custom-border-200 hover:bg-custom-background-80">
+    <div className="flex h-11 w-full items-center justify-center text-xs border-b-[0.5px] border-neutral-border-medium hover:bg-custom-background-80">
       {renderFormattedDate(issue.created_at)}
     </div>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index dbc27a3db..bbdb2f26a 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -17,7 +17,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
   const { issue, onChange, disabled } = props;
 
   return (
-    <div className="h-11 border-b-[0.5px] border-custom-border-200">
+    <div className="h-11 border-b-[0.5px] border-neutral-border-medium">
       <DateDropdown
         value={issue.target_date}
         onChange={(data) => onChange(issue, { target_date: data ? renderFormattedPayloadDate(data) : null })}
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
index 50878ccce..dad741f3b 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
@@ -14,7 +14,7 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = observer((props: Props
   const { issue, onChange, disabled } = props;
 
   return (
-    <div className="h-11 border-b-[0.5px] border-custom-border-200">
+    <div className="h-11 border-b-[0.5px] border-neutral-border-medium">
       <EstimateDropdown
         value={issue.estimate_point}
         onChange={(data) => onChange(issue, { estimate_point: data })}
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
index 82015056e..0b4ededc5 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
@@ -28,7 +28,7 @@ export const SpreadsheetLabelColumn: React.FC<Props> = observer((props: Props) =
       onChange={(data) => {
         onChange(issue, { label_ids: data });
       }}
-      className="h-11 w-full border-b-[0.5px] border-custom-border-200 hover:bg-custom-background-80"
+      className="h-11 w-full border-b-[0.5px] border-neutral-border-medium hover:bg-custom-background-80"
       buttonClassName="px-2.5 h-full"
       hideDropdownArrow
       maxRender={1}
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
index 2d3e7b670..d5c881c18 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
@@ -11,7 +11,7 @@ export const SpreadsheetLinkColumn: React.FC<Props> = observer((props: Props) =>
   const { issue } = props;
 
   return (
-    <div className="flex h-11 w-full items-center px-2.5 py-1 text-xs border-b-[0.5px] border-custom-border-200 hover:bg-custom-background-80">
+    <div className="flex h-11 w-full items-center px-2.5 py-1 text-xs border-b-[0.5px] border-neutral-border-medium hover:bg-custom-background-80">
       {issue?.link_count} {issue?.link_count === 1 ? "link" : "links"}
     </div>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
index 0a8321740..bb3621d40 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
@@ -15,7 +15,7 @@ export const SpreadsheetPriorityColumn: React.FC<Props> = observer((props: Props
   const { issue, onChange, disabled } = props;
 
   return (
-    <div className="h-11 border-b-[0.5px] border-custom-border-200">
+    <div className="h-11 border-b-[0.5px] border-neutral-border-medium">
       <PriorityDropdown
         value={issue.priority}
         onChange={(data) => onChange(issue, { priority: data })}
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
index 778f9cdac..bab9964c2 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -17,7 +17,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
   const { issue, onChange, disabled } = props;
 
   return (
-    <div className="h-11 border-b-[0.5px] border-custom-border-200">
+    <div className="h-11 border-b-[0.5px] border-neutral-border-medium">
       <DateDropdown
         value={issue.start_date}
         onChange={(data) => onChange(issue, { start_date: data ? renderFormattedPayloadDate(data) : null })}
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
index 0050c8acf..4699281c0 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
@@ -15,7 +15,7 @@ export const SpreadsheetStateColumn: React.FC<Props> = observer((props) => {
   const { issue, onChange, disabled } = props;
 
   return (
-    <div className="h-11 border-b-[0.5px] border-custom-border-200">
+    <div className="h-11 border-b-[0.5px] border-neutral-border-medium">
       <StateDropdown
         projectId={issue.project_id}
         value={issue.state_id}
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
index c0e41d2c0..195a2c395 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
@@ -11,7 +11,7 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = observer((props: Props
   const { issue } = props;
 
   return (
-    <div className="flex h-11 w-full items-center px-2.5 py-1 text-xs border-b-[0.5px] border-custom-border-200 hover:bg-custom-background-80">
+    <div className="flex h-11 w-full items-center px-2.5 py-1 text-xs border-b-[0.5px] border-neutral-border-medium hover:bg-custom-background-80">
       {issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
     </div>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
index f84989192..8b71bf425 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
@@ -12,7 +12,7 @@ type Props = {
 export const SpreadsheetUpdatedOnColumn: React.FC<Props> = observer((props: Props) => {
   const { issue } = props;
   return (
-    <div className="flex h-11 w-full items-center justify-center text-xs border-b-[0.5px] border-custom-border-200 hover:bg-custom-background-80">
+    <div className="flex h-11 w-full items-center justify-center text-xs border-b-[0.5px] border-neutral-border-medium hover:bg-custom-background-80">
       {renderFormattedDate(issue.updated_at)}
     </div>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index 602c1a842..ce17d50de 100644
--- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -97,7 +97,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
     <>
       <tr>
         {/* first column/ issue name and key column */}
-        <td className="sticky group left-0 h-11  w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-l-0 after:border-custom-border-100 before:absolute before:h-full before:right-0 before:border before:border-l-0 before:border-custom-border-100">
+        <td className="sticky group left-0 h-11  w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-l-0 after:border-neutral-border-subtle before:absolute before:h-full before:right-0 before:border before:border-l-0 before:border-neutral-border-subtle">
           <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
             <div
               className="flex min-w-min items-center gap-1.5 px-4 py-2.5 pr-0"
@@ -158,7 +158,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
               displayPropertyKey={property}
               shouldRenderProperty={shouldRenderProperty}
             >
-              <td className="h-11 w-full min-w-[8rem] bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-custom-border-100 border-r-[1px] border-custom-border-100">
+              <td className="h-11 w-full min-w-[8rem] bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-neutral-border-subtle border-r-[1px] border-neutral-border-subtle">
                 <Column
                   issue={issueDetail}
                   onChange={(issue: TIssue, data: Partial<TIssue>) =>
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 605e8bea1..57366086f 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
@@ -178,7 +178,7 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
           <form
             ref={ref}
             onSubmit={handleSubmit(onSubmitHandler)}
-            className="z-10 flex items-center gap-x-5 border-[0.5px] border-t-0 border-custom-border-100 bg-custom-background-100 px-4 shadow-custom-shadow-sm"
+            className="z-10 flex items-center gap-x-5 border-[0.5px] border-t-0 border-neutral-border-subtle bg-custom-background-100 px-4 shadow-custom-shadow-sm"
           >
             <Inputs
               formKey={formKey}
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
index 704c9f904..5b763a5ff 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
@@ -8,7 +8,6 @@ import { SPREADSHEET_PROPERTY_LIST } from "constants/spreadsheet";
 import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
 import { SpreadsheetHeaderColumn } from "./columns/header-column";
 
-
 interface Props {
   displayProperties: IIssueDisplayProperties;
   displayFilters: IIssueDisplayFilterOptions;
@@ -20,9 +19,9 @@ export const SpreadsheetHeader = (props: Props) => {
   const { displayProperties, displayFilters, handleDisplayFilterUpdate, isEstimateEnabled } = props;
 
   return (
-    <thead className="sticky top-0 left-0 z-[1] border-b-[0.5px] border-custom-border-100">
+    <thead className="sticky top-0 left-0 z-[1] border-b-[0.5px] border-neutral-border-subtle">
       <tr>
-        <th className="sticky left-0 z-[1] h-11 w-[28rem] flex items-center bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-[0.5px]  before:border-custom-border-100">
+        <th className="sticky left-0 z-[1] h-11 w-[28rem] flex items-center bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-[0.5px]  before:border-neutral-border-subtle">
           <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
@@ -43,7 +42,7 @@ export const SpreadsheetHeader = (props: Props) => {
               displayPropertyKey={property}
               shouldRenderProperty={shouldRenderProperty}
             >
-              <th className="h-11 w-full min-w-[8rem] items-center bg-custom-background-90 text-sm font-medium px-4 py-1 border border-b-0 border-t-0 border-custom-border-100">
+              <th className="h-11 w-full min-w-[8rem] items-center bg-custom-background-90 text-sm font-medium px-4 py-1 border border-b-0 border-t-0 border-neutral-border-subtle">
                 <SpreadsheetHeaderColumn
                   displayFilters={displayFilters}
                   handleDisplayFilterUpdate={handleDisplayFilterUpdate}
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
index e287c6d84..e9ccf179d 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
@@ -36,7 +36,7 @@ export const SpreadsheetTable = observer((props: Props) => {
   } = props;
 
   return (
-    <table className="divide-x-[0.5px] divide-custom-border-200 overflow-y-auto">
+    <table className="divide-x-[0.5px] divide-neutral-border-medium overflow-y-auto">
       <SpreadsheetHeader
         displayProperties={displayProperties}
         displayFilters={displayFilters}
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index e99b17850..63100b48f 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -114,7 +114,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
           canEditProperties={canEditProperties}
         />
       </div>
-      <div className="border-t border-custom-border-100">
+      <div className="border-t border-neutral-border-subtle">
         <div className="z-5 sticky bottom-0 left-0 mb-3">
           {enableQuickCreateIssue && !disableIssueCreation && (
             <SpreadsheetQuickAddIssueForm formKey="name" quickAddCallback={quickAddCallback} viewId={viewId} />
diff --git a/web/components/issues/issue-modal/form.tsx b/web/components/issues/issue-modal/form.tsx
index dbae7e2d5..a6d59f6de 100644
--- a/web/components/issues/issue-modal/form.tsx
+++ b/web/components/issues/issue-modal/form.tsx
@@ -396,7 +396,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                           ? watch("description_html")
                           : value
                       }
-                      customClassName="min-h-[7rem] border-custom-border-100"
+                      customClassName="min-h-[7rem] border-neutral-border-subtle"
                       onChange={(description: Object, description_html: string) => {
                         onChange(description_html);
                         handleFormChange();
@@ -585,7 +585,7 @@ 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-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
+                      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-custom-background-80"
                     >
                       {watch("parent_id") ? (
                         <div className="flex items-center gap-1 text-custom-text-200">
@@ -648,7 +648,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
             </div>
           </div>
         </div>
-        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-100 px-5 pt-5">
+        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-neutral-border-subtle px-5 pt-5">
           <div
             className="flex cursor-default items-center gap-1.5"
             onClick={() => onCreateMoreToggleChange(!isCreateMoreToggleEnabled)}
diff --git a/web/components/issues/issue-modal/modal.tsx b/web/components/issues/issue-modal/modal.tsx
index a4493057e..ff0860a58 100644
--- a/web/components/issues/issue-modal/modal.tsx
+++ b/web/components/issues/issue-modal/modal.tsx
@@ -271,7 +271,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full mx-4 sm:max-w-4xl">
+              <Dialog.Panel className="relative transform rounded-lg border border-neutral-border-medium bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full mx-4 sm:max-w-4xl">
                 {withDraftIssueWrapper ? (
                   <DraftIssueLayout
                     changesMade={changesMade}
diff --git a/web/components/issues/label.tsx b/web/components/issues/label.tsx
index 1361ff7d1..7efdeda4c 100644
--- a/web/components/issues/label.tsx
+++ b/web/components/issues/label.tsx
@@ -15,7 +15,7 @@ export const ViewIssueLabel: React.FC<Props> = ({ labelDetails, maxRender = 1 })
           {labelDetails.map((label) => (
             <div
               key={label.id}
-              className="flex flex-shrink-0 cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
+              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">
@@ -32,7 +32,7 @@ export const ViewIssueLabel: React.FC<Props> = ({ labelDetails, maxRender = 1 })
           ))}
         </>
       ) : (
-        <div className="flex flex-shrink-0 cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
+        <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">
               <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
diff --git a/web/components/issues/peek-overview/view.tsx b/web/components/issues/peek-overview/view.tsx
index 5d2e486e6..2385017fa 100644
--- a/web/components/issues/peek-overview/view.tsx
+++ b/web/components/issues/peek-overview/view.tsx
@@ -130,7 +130,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
         {issueId && (
           <div
             ref={issuePeekOverviewRef}
-            className={`fixed z-20 flex flex-col overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 transition-all duration-300 
+            className={`fixed z-20 flex flex-col overflow-hidden rounded border border-neutral-border-medium bg-custom-background-100 transition-all duration-300 
           ${peekMode === "side-peek" ? `bottom-0 right-0 top-0 w-full md:w-[50%]` : ``}
           ${peekMode === "modal" ? `left-[50%] top-[50%] h-5/6 w-5/6 -translate-x-[50%] -translate-y-[50%]` : ``}
           ${peekMode === "full-screen" ? `bottom-0 left-0 right-0 top-0 m-4` : ``}
@@ -143,7 +143,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
             {/* header */}
             <div
               className={`relative flex items-center justify-between p-4 ${
-                currentMode?.key === "full-screen" ? "border-b border-custom-border-200" : ""
+                currentMode?.key === "full-screen" ? "border-b border-neutral-border-medium" : ""
               }`}
             >
               <div className="flex items-center gap-4">
@@ -260,7 +260,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                           </div>
                         </div>
                         <div
-                          className={`h-full !w-[400px] flex-shrink-0 border-l border-custom-border-200 p-4 py-5 ${
+                          className={`h-full !w-[400px] flex-shrink-0 border-l border-neutral-border-medium p-4 py-5 ${
                             is_archived ? "pointer-events-none" : ""
                           }`}
                         >
diff --git a/web/components/issues/select/label.tsx b/web/components/issues/select/label.tsx
index 00f095d9e..6c1e26d1b 100644
--- a/web/components/issues/select/label.tsx
+++ b/web/components/issues/select/label.tsx
@@ -87,7 +87,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
               />
             </span>
           ) : (
-            <div className="h-full flex items-center justify-center gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs hover:bg-custom-background-80">
+            <div className="h-full flex items-center justify-center gap-1 rounded border-[0.5px] border-neutral-border-medium px-2 py-1 text-xs hover:bg-custom-background-80">
               <Tag className="h-3 w-3 flex-shrink-0" />
               <span>Labels</span>
             </div>
@@ -98,12 +98,12 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
       {isDropdownOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+            <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} />
               <Combobox.Input
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
@@ -150,7 +150,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
                         );
                     } else
                       return (
-                        <div className="border-y border-custom-border-200">
+                        <div className="border-y border-neutral-border-medium">
                           <div className="flex select-none items-center gap-2 truncate p-2 text-custom-text-100">
                             <Component className="h-3 w-3" /> {label.name}
                           </div>
diff --git a/web/components/issues/sub-issues/issue-list-item.tsx b/web/components/issues/sub-issues/issue-list-item.tsx
index c6b87411d..06c224085 100644
--- a/web/components/issues/sub-issues/issue-list-item.tsx
+++ b/web/components/issues/sub-issues/issue-list-item.tsx
@@ -67,7 +67,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
     <div key={issueId}>
       {issue && (
         <div
-          className="group relative flex h-full w-full items-center gap-2 border-b border-custom-border-100 px-2 py-1 transition-all hover:bg-custom-background-90"
+          className="group relative flex h-full w-full items-center gap-2 border-b border-neutral-border-subtle px-2 py-1 transition-all hover:bg-custom-background-90"
           style={{ paddingLeft: `${spacingLeft}px` }}
         >
           <div className="h-[22px] w-[22px] flex-shrink-0">
diff --git a/web/components/issues/sub-issues/issues-list.tsx b/web/components/issues/sub-issues/issues-list.tsx
index ad09938cb..ff2c906f9 100644
--- a/web/components/issues/sub-issues/issues-list.tsx
+++ b/web/components/issues/sub-issues/issues-list.tsx
@@ -60,7 +60,7 @@ export const IssueList: FC<IIssueList> = observer((props) => {
           ))}
 
         <div
-          className={`absolute bottom-0 top-0  ${spacingLeft > 10 ? `border-l border-custom-border-100` : ``}`}
+          className={`absolute bottom-0 top-0  ${spacingLeft > 10 ? `border-l border-neutral-border-subtle` : ``}`}
           style={{ left: `${spacingLeft - 12}px` }}
         />
       </div>
diff --git a/web/components/issues/sub-issues/root.tsx b/web/components/issues/sub-issues/root.tsx
index 7bb1b9a6b..3a030ae8b 100644
--- a/web/components/issues/sub-issues/root.tsx
+++ b/web/components/issues/sub-issues/root.tsx
@@ -221,7 +221,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
             <>
               <div className="relative flex items-center gap-4 text-xs">
                 <div
-                  className="flex cursor-pointer select-none items-center gap-1 rounded border border-custom-border-100 p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
+                  className="flex cursor-pointer select-none items-center gap-1 rounded border border-neutral-border-subtle p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
                   onClick={async () => {
                     if (!subIssueHelpers.issue_visibility.includes(parentIssueId)) {
                       setSubIssueHelpers(`${parentIssueId}_root`, "preview_loader", parentIssueId);
@@ -257,13 +257,13 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                 {!disabled && (
                   <div className="ml-auto flex flex-shrink-0 select-none items-center gap-2">
                     <div
-                      className="cursor-pointer rounded border border-custom-border-100 p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
+                      className="cursor-pointer rounded border border-neutral-border-subtle p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
                       onClick={() => handleIssueCrudState("create", parentIssueId, null)}
                     >
                       Add sub-issue
                     </div>
                     <div
-                      className="cursor-pointer rounded border border-custom-border-100 p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
+                      className="cursor-pointer rounded border border-neutral-border-subtle p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
                       onClick={() => handleIssueCrudState("existing", parentIssueId, null)}
                     >
                       Add an existing issue
@@ -273,7 +273,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
               </div>
 
               {subIssueHelpers.issue_visibility.includes(parentIssueId) && (
-                <div className="border border-b-0 border-custom-border-100">
+                <div className="border border-b-0 border-neutral-border-subtle">
                   <IssueList
                     workspaceSlug={workspaceSlug}
                     projectId={projectId}
diff --git a/web/components/issues/view-select/due-date.tsx b/web/components/issues/view-select/due-date.tsx
index d61e7586a..fc0bfb745 100644
--- a/web/components/issues/view-select/due-date.tsx
+++ b/web/components/issues/view-select/due-date.tsx
@@ -52,7 +52,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
           className={`bg-transparent ${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"}`}
           customInput={
             <div
-              className={`flex items-center justify-center gap-2 rounded border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-200 hover:bg-custom-background-80 ${
+              className={`flex items-center justify-center gap-2 rounded border border-neutral-border-medium px-2 py-1 text-xs shadow-sm duration-200 hover:bg-custom-background-80 ${
                 issue.target_date ? "pr-6 text-custom-text-300" : "text-custom-text-400"
               } ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
             >
diff --git a/web/components/issues/view-select/start-date.tsx b/web/components/issues/view-select/start-date.tsx
index 039bc0cb5..072088c50 100644
--- a/web/components/issues/view-select/start-date.tsx
+++ b/web/components/issues/view-select/start-date.tsx
@@ -46,7 +46,7 @@ export const ViewStartDateSelect: React.FC<Props> = ({
           handleOnOpen={handleOnOpen}
           customInput={
             <div
-              className={`flex items-center justify-center gap-2 rounded border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-200 hover:bg-custom-background-80 ${
+              className={`flex items-center justify-center gap-2 rounded border border-neutral-border-medium px-2 py-1 text-xs shadow-sm duration-200 hover:bg-custom-background-80 ${
                 issue?.start_date ? "pr-6 text-custom-text-300" : "text-custom-text-400"
               } ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
             >
diff --git a/web/components/labels/project-setting-label-group.tsx b/web/components/labels/project-setting-label-group.tsx
index 71d11dacb..8a1dc0c8d 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-custom-border-200 text-custom-text-100 ${
+      className={`rounded border-[0.5px] border-neutral-border-medium text-custom-text-100 ${
         groupDragSnapshot.combineTargetFor ? "bg-custom-background-80" : "bg-custom-background-100"
       }`}
       defaultOpen
diff --git a/web/components/labels/project-setting-label-item.tsx b/web/components/labels/project-setting-label-item.tsx
index ed72e4503..51e66296b 100644
--- a/web/components/labels/project-setting-label-item.tsx
+++ b/web/components/labels/project-setting-label-item.tsx
@@ -60,7 +60,7 @@ export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
 
   return (
     <div
-      className={`group relative flex items-center justify-between gap-2 space-y-3 rounded border-[0.5px] border-custom-border-200 ${
+      className={`group relative flex items-center justify-between gap-2 space-y-3 rounded border-[0.5px] border-neutral-border-medium ${
         !isChild && combineTargetFor ? "bg-custom-background-80" : ""
       } ${isDragging ? "bg-custom-background-80 shadow-custom-shadow-xs" : ""} bg-custom-background-100 px-1 py-2.5`}
     >
diff --git a/web/components/labels/project-setting-label-list.tsx b/web/components/labels/project-setting-label-list.tsx
index 57c48cd01..4c275ab3b 100644
--- a/web/components/labels/project-setting-label-list.tsx
+++ b/web/components/labels/project-setting-label-list.tsx
@@ -88,7 +88,7 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
         data={selectDeleteLabel ?? null}
         onClose={() => setSelectDeleteLabel(null)}
       />
-      <div className="flex items-center justify-between border-b border-custom-border-100 py-3.5">
+      <div className="flex items-center justify-between border-b border-neutral-border-subtle py-3.5">
         <h3 className="text-xl font-medium">Labels</h3>
         <Button variant="primary" onClick={newLabel} size="sm">
           Add label
@@ -96,7 +96,7 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
       </div>
       <div className="w-full py-8">
         {showLabelForm && (
-          <div className="w-full rounded border border-custom-border-200 px-3.5 py-2 my-2">
+          <div className="w-full rounded border border-neutral-border-medium px-3.5 py-2 my-2">
             <CreateUpdateLabelInline
               labelForm={showLabelForm}
               setLabelForm={setLabelForm}
diff --git a/web/components/modules/form.tsx b/web/components/modules/form.tsx
index 661d31ef5..4b9f35665 100644
--- a/web/components/modules/form.tsx
+++ b/web/components/modules/form.tsx
@@ -221,7 +221,7 @@ export const ModuleForm: React.FC<Props> = ({
           </div>
         </div>
       </div>
-      <div className="mt-5 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200 pt-5">
+      <div className="mt-5 flex items-center justify-end gap-2 border-t-[0.5px] border-neutral-border-medium pt-5">
         <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={8}>
           Cancel
         </Button>
diff --git a/web/components/modules/module-card-item.tsx b/web/components/modules/module-card-item.tsx
index f9236ef10..71dd60836 100644
--- a/web/components/modules/module-card-item.tsx
+++ b/web/components/modules/module-card-item.tsx
@@ -144,7 +144,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
       )}
       <DeleteModuleModal data={moduleDetails} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
       <Link href={`/${workspaceSlug}/projects/${moduleDetails.project}/modules/${moduleDetails.id}`}>
-        <div className="flex h-44 w-full min-w-[250px] flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
+        <div className="flex h-44 w-full min-w-[250px] flex-col justify-between rounded  border border-neutral-border-subtle bg-custom-background-100 p-4 text-sm hover:shadow-md">
           <div>
             <div className="flex items-center justify-between gap-2">
               <Tooltip tooltipContent={moduleDetails.name} position="top">
diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx
index c24e75198..32d404f52 100644
--- a/web/components/modules/module-list-item.tsx
+++ b/web/components/modules/module-list-item.tsx
@@ -134,7 +134,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
       )}
       <DeleteModuleModal data={moduleDetails} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
       <Link href={`/${workspaceSlug}/projects/${moduleDetails.project}/modules/${moduleDetails.id}`}>
-        <div className="group flex h-16 w-full items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90">
+        <div className="group flex h-16 w-full items-center justify-between gap-5 border-b border-neutral-border-subtle bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90">
           <div className="flex w-full items-center gap-3 truncate">
             <div className="flex items-center gap-4 truncate">
               <span className="flex-shrink-0">
diff --git a/web/components/modules/module-peek-overview.tsx b/web/components/modules/module-peek-overview.tsx
index f82d436bc..c586fb79d 100644
--- a/web/components/modules/module-peek-overview.tsx
+++ b/web/components/modules/module-peek-overview.tsx
@@ -39,7 +39,7 @@ export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, worksp
       {peekModule && (
         <div
           ref={ref}
-          className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300"
+          className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-neutral-border-subtle bg-custom-sidebar-background-100 px-6 py-3.5 duration-300"
           style={{
             boxShadow:
               "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index 5b2c8f170..5d1b33725 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -524,7 +524,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
         </div>
 
         <div className="flex flex-col">
-          <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 px-1.5 py-5">
+          <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-neutral-border-medium px-1.5 py-5">
             <Disclosure defaultOpen>
               {({ open }) => (
                 <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
@@ -588,7 +588,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                           ""
                         )}
                         {moduleDetails.total_issues > 0 && (
-                          <div className="h-full w-full border-t border-custom-border-200 pt-5">
+                          <div className="h-full w-full border-t border-neutral-border-medium pt-5">
                             <SidebarProgressStats
                               distribution={moduleDetails.distribution}
                               groupedIssues={{
@@ -612,7 +612,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
             </Disclosure>
           </div>
 
-          <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 px-1.5 py-5">
+          <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-neutral-border-medium px-1.5 py-5">
             <Disclosure>
               {({ open }) => (
                 <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
diff --git a/web/components/notifications/notification-header.tsx b/web/components/notifications/notification-header.tsx
index dc92dc9d5..45814a2fe 100644
--- a/web/components/notifications/notification-header.tsx
+++ b/web/components/notifications/notification-header.tsx
@@ -134,7 +134,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
           </Tooltip>
         </div>
       </div>
-      <div className="mt-5 w-full border-b border-custom-border-300 px-5">
+      <div className="mt-5 w-full border-b border-neutral-border-medium px-5">
         {snoozed || archived || readNotification ? (
           <button
             type="button"
diff --git a/web/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx
index 4b55ea4cb..4789d07b9 100644
--- a/web/components/notifications/notification-popover.tsx
+++ b/web/components/notifications/notification-popover.tsx
@@ -94,7 +94,7 @@ export const NotificationPopover = observer(() => {
                 leaveFrom="opacity-100 translate-y-0"
                 leaveTo="opacity-0 translate-y-1"
               >
-                <Popover.Panel className="absolute -top-36 left-0 z-10 ml-8 flex h-[50vh] w-[20rem] flex-col rounded-xl border border-custom-border-300 bg-custom-background-100 shadow-lg md:left-full md:w-[36rem]">
+                <Popover.Panel className="absolute -top-36 left-0 z-10 ml-8 flex h-[50vh] w-[20rem] flex-col rounded-xl border border-neutral-border-medium bg-custom-background-100 shadow-lg md:left-full md:w-[36rem]">
                   <NotificationHeader
                     notificationCount={notificationCount}
                     notificationMutate={notificationMutate}
@@ -114,7 +114,7 @@ export const NotificationPopover = observer(() => {
                   {notifications ? (
                     notifications.length > 0 ? (
                       <div className="h-full overflow-y-auto">
-                        <div className="divide-y divide-custom-border-100">
+                        <div className="divide-y divide-neutral-border-subtle">
                           {notifications.map((notification) => (
                             <NotificationCard
                               key={notification.id}
diff --git a/web/components/notifications/select-snooze-till-modal.tsx b/web/components/notifications/select-snooze-till-modal.tsx
index ab3497bb8..4ba3ae304 100644
--- a/web/components/notifications/select-snooze-till-modal.tsx
+++ b/web/components/notifications/select-snooze-till-modal.tsx
@@ -171,7 +171,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
                               setValue("time", null);
                               onChange(val);
                             }}
-                            className="w-full rounded-md border border-custom-border-300 bg-custom-background-100 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-custom-background-100 px-3 py-2 !text-sm text-custom-text-100 placeholder:!text-custom-text-400 focus:outline-none"
                             wrapperClassName="w-full"
                             noBorder
                             minDate={new Date()}
diff --git a/web/components/onboarding/invitations.tsx b/web/components/onboarding/invitations.tsx
index c9ec19cc8..0c29aa4b3 100644
--- a/web/components/onboarding/invitations.tsx
+++ b/web/components/onboarding/invitations.tsx
@@ -138,7 +138,7 @@ export const Invitations: React.FC<Props> = (props) => {
 
         <div>
           <div
-            className="rounded-md border border-custom-border-200 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-custom-text-200 hover:cursor-pointer"
             onClick={setTryDiffAccount}
           >
             Try a different email address
@@ -161,7 +161,7 @@ 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-custom-border-200 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-custom-text-200 hover:cursor-pointer"
       onClick={setTryDiffAccount}
     >
       Try a different email address
diff --git a/web/components/page-views/signin.tsx b/web/components/page-views/signin.tsx
index 89bca5d62..efa45e812 100644
--- a/web/components/page-views/signin.tsx
+++ b/web/components/page-views/signin.tsx
@@ -42,7 +42,7 @@ export const SignInView = observer(() => {
         </div>
       </div>
 
-      <div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3">
+      <div className="mx-auto h-full rounded-t-md border-x border-t border-neutral-border-medium bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3">
         <div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
           <SignInRoot />
         </div>
diff --git a/web/components/pages/page-form.tsx b/web/components/pages/page-form.tsx
index 79d378c59..dbaba0b42 100644
--- a/web/components/pages/page-form.tsx
+++ b/web/components/pages/page-form.tsx
@@ -73,7 +73,7 @@ export const PageForm: React.FC<Props> = (props) => {
           name="access"
           render={({ field: { value, onChange } }) => (
             <div className="flex items-center gap-2">
-              <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded border-[0.5px] border-custom-border-200 p-1">
+              <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded border-[0.5px] border-neutral-border-medium p-1">
                 {PAGE_ACCESS_SPECIFIERS.map((access, index) => (
                   <Tooltip key={access.key} tooltipContent={access.label}>
                     <button
diff --git a/web/components/pages/pages-list/list-item.tsx b/web/components/pages/pages-list/list-item.tsx
index 960e222ce..18569349f 100644
--- a/web/components/pages/pages-list/list-item.tsx
+++ b/web/components/pages/pages-list/list-item.tsx
@@ -164,7 +164,7 @@ export const PagesListItem: FC<IPagesListItem> = observer(({ pageId, projectId }
                   label_details.map((label: IIssueLabel) => (
                     <div
                       key={label.id}
-                      className="group flex items-center gap-1 rounded-2xl border border-custom-border-200 px-2 py-0.5 text-xs"
+                      className="group flex items-center gap-1 rounded-2xl border border-neutral-border-medium px-2 py-0.5 text-xs"
                       style={{
                         backgroundColor: `${label?.color}20`,
                       }}
diff --git a/web/components/pages/pages-list/list-view.tsx b/web/components/pages/pages-list/list-view.tsx
index d1bde308d..732fdb78f 100644
--- a/web/components/pages/pages-list/list-view.tsx
+++ b/web/components/pages/pages-list/list-view.tsx
@@ -53,7 +53,7 @@ export const PagesListView: FC<IPagesListView> = (props) => {
       {projectPageIds && workspaceSlug && projectId ? (
         <div className="h-full space-y-4 overflow-y-auto">
           {projectPageIds.length > 0 ? (
-            <ul role="list" className="divide-y divide-custom-border-200">
+            <ul role="list" className="divide-y divide-neutral-border-medium">
               {projectPageIds.map((pageId: string) => (
                 <PagesListItem key={pageId} pageId={pageId} projectId={projectId.toString()} />
               ))}
diff --git a/web/components/profile/navbar.tsx b/web/components/profile/navbar.tsx
index 44dfe57d1..894f22599 100644
--- a/web/components/profile/navbar.tsx
+++ b/web/components/profile/navbar.tsx
@@ -22,7 +22,7 @@ export const ProfileNavbar: React.FC<Props> = (props) => {
   const tabsList = isAuthorized ? [...PROFILE_VIEWER_TAB, ...PROFILE_ADMINS_TAB] : PROFILE_VIEWER_TAB;
 
   return (
-    <div className="sticky -top-0.5 z-10 flex items-center justify-between gap-4 border-b border-custom-border-300 bg-custom-background-100 px-4 sm:px-5 md:static">
+    <div className="sticky -top-0.5 z-10 flex items-center justify-between gap-4 border-b border-neutral-border-medium bg-custom-background-100 px-4 sm:px-5 md:static">
       <div className="flex items-center overflow-x-scroll">
         {tabsList.map((tab) => (
           <Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}>
diff --git a/web/components/profile/overview/activity.tsx b/web/components/profile/overview/activity.tsx
index 58bbb6898..ab866a244 100644
--- a/web/components/profile/overview/activity.tsx
+++ b/web/components/profile/overview/activity.tsx
@@ -36,7 +36,7 @@ export const ProfileActivity = observer(() => {
   return (
     <div className="space-y-2">
       <h3 className="text-lg font-medium">Recent Activity</h3>
-      <div className="rounded border border-custom-border-100 p-6">
+      <div className="rounded border border-neutral-border-subtle p-6">
         {userProfileActivity ? (
           userProfileActivity.results.length > 0 ? (
             <div className="space-y-5">
diff --git a/web/components/profile/overview/priority-distribution.tsx b/web/components/profile/overview/priority-distribution.tsx
index 8a931183f..4cc82fe72 100644
--- a/web/components/profile/overview/priority-distribution.tsx
+++ b/web/components/profile/overview/priority-distribution.tsx
@@ -16,7 +16,7 @@ export const ProfilePriorityDistribution: React.FC<Props> = ({ userProfile }) =>
   <div className="flex flex-col space-y-2">
     <h3 className="text-lg font-medium">Issues by Priority</h3>
     {userProfile ? (
-      <div className="flex-grow rounded border border-custom-border-100">
+      <div className="flex-grow rounded border border-neutral-border-subtle">
         {userProfile.priority_distribution.length > 0 ? (
           <BarGraph
             data={userProfile.priority_distribution.map((priority) => ({
@@ -30,7 +30,7 @@ export const ProfilePriorityDistribution: React.FC<Props> = ({ userProfile }) =>
             padding={0.7}
             customYAxisTickValues={userProfile.priority_distribution.map((p) => p.priority_count)}
             tooltip={(datum) => (
-              <div className="flex items-center gap-2 rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+              <div className="flex items-center gap-2 rounded-md border border-neutral-border-medium bg-custom-background-80 p-2 text-xs">
                 <span
                   className="h-3 w-3 rounded"
                   style={{
diff --git a/web/components/profile/overview/state-distribution.tsx b/web/components/profile/overview/state-distribution.tsx
index 5664637e9..d1fdf6bfc 100644
--- a/web/components/profile/overview/state-distribution.tsx
+++ b/web/components/profile/overview/state-distribution.tsx
@@ -18,7 +18,7 @@ export const ProfileStateDistribution: React.FC<Props> = ({ stateDistribution, u
   return (
     <div className="flex flex-col space-y-2">
       <h3 className="text-lg font-medium">Issues by State</h3>
-      <div className="flex-grow rounded border border-custom-border-100 p-7">
+      <div className="flex-grow rounded border border-neutral-border-subtle p-7">
         {userProfile.state_distribution.length > 0 ? (
           <div className="grid grid-cols-1 gap-x-6 md:grid-cols-2">
             <div>
@@ -41,7 +41,7 @@ export const ProfileStateDistribution: React.FC<Props> = ({ stateDistribution, u
                 activeInnerRadiusOffset={5}
                 colors={(datum) => datum.data.color}
                 tooltip={(datum) => (
-                  <div className="flex items-center gap-2 rounded-md border border-custom-border-200 bg-custom-background-90 p-2 text-xs">
+                  <div className="flex items-center gap-2 rounded-md border border-neutral-border-medium bg-custom-background-90 p-2 text-xs">
                     <span className="capitalize text-custom-text-200">{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 3f96488a0..2fb64ae66 100644
--- a/web/components/profile/overview/stats.tsx
+++ b/web/components/profile/overview/stats.tsx
@@ -43,7 +43,7 @@ export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
           {overviewCards.map((card) => (
             <Link key={card.route} href={`/${workspaceSlug}/profile/${userId}/${card.route}`}>
-              <span className="flex items-center gap-3 whitespace-nowrap rounded border border-custom-border-100 p-4">
+              <span className="flex items-center gap-3 whitespace-nowrap rounded border border-neutral-border-subtle p-4">
                 <div className="grid h-11 w-11 place-items-center rounded bg-custom-background-90">
                   <card.icon className="h-5 w-5" />
                 </div>
diff --git a/web/components/profile/overview/workload.tsx b/web/components/profile/overview/workload.tsx
index c091a94f7..45dbcb244 100644
--- a/web/components/profile/overview/workload.tsx
+++ b/web/components/profile/overview/workload.tsx
@@ -13,7 +13,7 @@ export const ProfileWorkload: React.FC<Props> = ({ stateDistribution }) => (
     <div className="grid grid-cols-1 justify-stretch gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
       {stateDistribution.map((group) => (
         <div key={group.state_group}>
-          <a className="flex gap-2 whitespace-nowrap rounded border border-custom-border-100 p-4">
+          <a className="flex gap-2 whitespace-nowrap rounded border border-neutral-border-subtle p-4">
             <div
               className="h-3 w-3 rounded-sm"
               style={{
diff --git a/web/components/profile/preferences/email-notification-form.tsx b/web/components/profile/preferences/email-notification-form.tsx
index 898044c60..21fced227 100644
--- a/web/components/profile/preferences/email-notification-form.tsx
+++ b/web/components/profile/preferences/email-notification-form.tsx
@@ -55,7 +55,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
 
   return (
     <>
-      <div className="flex gap-2 items-center pt-6 mb-2 pb-6 border-b border-custom-border-100">
+      <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">
@@ -82,7 +82,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
                   type="checkbox"
                   checked={value}
                   onChange={() => onChange(!value)}
-                  className="w-3.5 h-3.5 mx-2 cursor-pointer !border-custom-border-100"
+                  className="w-3.5 h-3.5 mx-2 cursor-pointer !border-neutral-border-subtle"
                 />
               )}
             />
@@ -113,7 +113,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
             />
           </div>
         </div>
-        <div className="flex gap-2 items-center border-0 border-l-[3px] border-custom-border-300 pl-3">
+        <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>
diff --git a/web/components/profile/sidebar.tsx b/web/components/profile/sidebar.tsx
index a701a058d..71decbcb1 100644
--- a/web/components/profile/sidebar.tsx
+++ b/web/components/profile/sidebar.tsx
@@ -60,7 +60,7 @@ export const ProfileSidebar = observer(() => {
   ];
 
   return (
-    <div className="w-full flex-shrink-0 overflow-y-auto shadow-custom-shadow-sm md:h-full md:w-80 border-l border-custom-border-100">
+    <div className="w-full flex-shrink-0 overflow-y-auto shadow-custom-shadow-sm md:h-full md:w-80 border-l border-neutral-border-subtle">
       {userProjectsData ? (
         <>
           <div className="relative h-32">
@@ -109,7 +109,7 @@ export const ProfileSidebar = observer(() => {
                 </div>
               ))}
             </div>
-            <div className="mt-9 divide-y divide-custom-border-100">
+            <div className="mt-9 divide-y divide-neutral-border-subtle">
               {userProjectsData.project_data.map((project, index) => {
                 const totalIssues =
                   project.created_issues + project.assigned_issues + project.pending_issues + project.completed_issues;
diff --git a/web/components/project/card.tsx b/web/components/project/card.tsx
index 3d6f62b7b..c74581eb7 100644
--- a/web/components/project/card.tsx
+++ b/web/components/project/card.tsx
@@ -101,7 +101,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
           if (project.is_member) router.push(`/${workspaceSlug?.toString()}/projects/${project.id}/issues`);
           else setJoinProjectModal(true);
         }}
-        className="flex cursor-pointer flex-col rounded border border-custom-border-200 bg-custom-background-100"
+        className="flex cursor-pointer flex-col rounded border border-neutral-border-medium bg-custom-background-100"
       >
         <div className="relative h-[118px] w-full rounded-t ">
           <div className="absolute inset-0 z-[1] bg-gradient-to-t from-black/60 to-transparent" />
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index 1e6aa136a..6176b0876 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -260,7 +260,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                     />
                   </div>
                 </div>
-                <form onSubmit={handleSubmit(onSubmit)} className="divide-y-[0.5px] divide-custom-border-100 px-3">
+                <form onSubmit={handleSubmit(onSubmit)} className="divide-y-[0.5px] divide-neutral-border-subtle px-3">
                   <div className="mt-9 space-y-6 pb-5">
                     <div className="grid grid-cols-1 gap-x-2 gap-y-3 md:grid-cols-4">
                       <div className="md:col-span-3">
diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
index 3badbb8bf..0b3254657 100644
--- a/web/components/project/form.tsx
+++ b/web/components/project/form.tsx
@@ -290,7 +290,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                   value={value}
                   onChange={onChange}
                   label={selectedNetwork?.label ?? "Select network"}
-                  buttonClassName="!border-custom-border-200 !shadow-none font-medium rounded-md"
+                  buttonClassName="!border-neutral-border-medium !shadow-none font-medium rounded-md"
                   input
                   disabled={!isAdmin}
                   optionsClassName="w-full"
diff --git a/web/components/project/integration-card.tsx b/web/components/project/integration-card.tsx
index d2910b34a..b58e55045 100644
--- a/web/components/project/integration-card.tsx
+++ b/web/components/project/integration-card.tsx
@@ -90,7 +90,7 @@ export const IntegrationCard: React.FC<Props> = ({ integration }) => {
   return (
     <>
       {integration && (
-        <div className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6">
+        <div className="flex items-center justify-between gap-2 border-b border-neutral-border-subtle bg-custom-background-100 px-4 py-6">
           <div className="flex items-start gap-4">
             <div className="h-10 w-10 flex-shrink-0">
               <Image
diff --git a/web/components/project/member-list.tsx b/web/components/project/member-list.tsx
index 899348dd2..2a8d24770 100644
--- a/web/components/project/member-list.tsx
+++ b/web/components/project/member-list.tsx
@@ -35,9 +35,9 @@ export const ProjectMemberList: React.FC = observer(() => {
     <>
       <SendProjectInvitationModal isOpen={inviteModal} onClose={() => setInviteModal(false)} />
 
-      <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 py-3.5">
+      <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-custom-border-200 bg-custom-background-100 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-custom-background-100 px-2.5 py-1.5 text-custom-text-400">
           <Search className="h-3.5 w-3.5" />
           <input
             className="w-full max-w-[234px] border-none bg-transparent text-sm focus:outline-none"
@@ -65,7 +65,7 @@ export const ProjectMemberList: React.FC = observer(() => {
           <Loader.Item height="40px" />
         </Loader>
       ) : (
-        <div className="divide-y divide-custom-border-100">
+        <div className="divide-y divide-neutral-border-subtle">
           {projectMemberIds.length > 0
             ? searchedMembers.map((userId) => <ProjectMemberListItem key={userId} userId={userId} />)
             : null}
diff --git a/web/components/project/project-settings-member-defaults.tsx b/web/components/project/project-settings-member-defaults.tsx
index b4713f739..b20917add 100644
--- a/web/components/project/project-settings-member-defaults.tsx
+++ b/web/components/project/project-settings-member-defaults.tsx
@@ -85,7 +85,7 @@ export const ProjectSettingsMemberDefaults: React.FC = observer(() => {
 
   return (
     <>
-      <div className="flex items-center border-b border-custom-border-100 py-3.5">
+      <div className="flex items-center border-b border-neutral-border-subtle py-3.5">
         <h3 className="text-xl font-medium">Defaults</h3>
       </div>
 
diff --git a/web/components/project/publish-project/modal.tsx b/web/components/project/publish-project/modal.tsx
index 77be4c84b..5a023984c 100644
--- a/web/components/project/publish-project/modal.tsx
+++ b/web/components/project/publish-project/modal.tsx
@@ -198,7 +198,7 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
 
     return (
       <div
-        className="flex h-[30px] min-w-[30px] cursor-pointer items-center justify-center rounded border border-custom-border-100 bg-custom-background-100 px-2 text-xs hover:bg-custom-background-90"
+        className="flex h-[30px] min-w-[30px] cursor-pointer items-center justify-center rounded border border-neutral-border-subtle bg-custom-background-100 px-2 text-xs hover:bg-custom-background-90"
         onClick={() => copyText()}
       >
         {status ? "Copied" : "Copy Link"}
@@ -317,7 +317,7 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
                     <div className="px-6">
                       {project.is_deployed && (
                         <>
-                          <div className="relative flex items-center gap-2 rounded-md border border-custom-border-100 bg-custom-background-80 px-3 py-2">
+                          <div className="relative flex items-center gap-2 rounded-md border border-neutral-border-subtle bg-custom-background-80 px-3 py-2">
                             <div className="flex-grow truncate text-sm">
                               {`${plane_deploy_url}/${workspaceSlug}/${project.id}`}
                             </div>
@@ -456,7 +456,7 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
                   )}
 
                   {/* modal handlers */}
-                  <div className="relative flex items-center justify-between border-t border-custom-border-200 px-6 py-5">
+                  <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">
                       <Globe2 className="h-4 w-4" />
                       <div className="text-sm">Anyone with the link can access</div>
diff --git a/web/components/project/publish-project/popover.tsx b/web/components/project/publish-project/popover.tsx
index dab5ae48e..6d99e4394 100644
--- a/web/components/project/publish-project/popover.tsx
+++ b/web/components/project/publish-project/popover.tsx
@@ -35,7 +35,7 @@ export const CustomPopover = ({
             leaveTo="opacity-0 translate-y-1"
           >
             <Popover.Panel className="absolute right-0 z-10 mt-1 min-w-[150px]">
-              <div className="mt-1 overflow-hidden overflow-y-auto rounded border border-custom-border-300 bg-custom-background-90 shadow-custom-shadow-2xs focus:outline-none">
+              <div className="mt-1 overflow-hidden overflow-y-auto rounded border border-neutral-border-medium bg-custom-background-90 shadow-custom-shadow-2xs focus:outline-none">
                 {children}
               </div>
             </Popover.Panel>
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index b165a40ae..f588e9bdf 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -217,7 +217,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-custom-border-200 px-3 py-2 text-left text-sm text-custom-text-200 shadow-sm duration-300 hover:bg-custom-background-80 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-custom-text-200 shadow-sm duration-300 hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none">
                                         {value && value !== "" ? (
                                           <div className="flex items-center gap-2">
                                             <Avatar
@@ -258,7 +258,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-custom-border-200 px-3 py-2.5 text-left text-sm text-custom-text-200 shadow-sm duration-300 hover:bg-custom-background-80 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-custom-text-200 shadow-sm duration-300 hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none">
                                         <span className="capitalize">
                                           {field.value ? ROLE[field.value] : "Select role"}
                                         </span>
diff --git a/web/components/project/settings/delete-project-section.tsx b/web/components/project/settings/delete-project-section.tsx
index fa1d70d5c..bc3b82f5f 100644
--- a/web/components/project/settings/delete-project-section.tsx
+++ b/web/components/project/settings/delete-project-section.tsx
@@ -17,7 +17,7 @@ export const DeleteProjectSection: React.FC<IDeleteProjectSection> = (props) =>
   const { projectDetails, handleDelete } = props;
 
   return (
-    <Disclosure as="div" className="border-t border-custom-border-100">
+    <Disclosure as="div" className="border-t border-neutral-border-subtle">
       {({ open }) => (
         <div className="w-full">
           <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4">
diff --git a/web/components/project/settings/features-list.tsx b/web/components/project/settings/features-list.tsx
index ed45792f2..6e019df50 100644
--- a/web/components/project/settings/features-list.tsx
+++ b/web/components/project/settings/features-list.tsx
@@ -81,7 +81,7 @@ export const ProjectFeaturesList: FC<Props> = observer(() => {
       {PROJECT_FEATURES_LIST.map((feature) => (
         <div
           key={feature.property}
-          className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-100 bg-custom-background-100 p-4"
+          className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-neutral-border-subtle bg-custom-background-100 p-4"
         >
           <div className="flex items-start gap-3">
             <div className="flex items-center justify-center rounded bg-custom-background-90 p-3">{feature.icon}</div>
diff --git a/web/components/states/project-setting-state-list-item.tsx b/web/components/states/project-setting-state-list-item.tsx
index 0c1d41c80..16ed3f315 100644
--- a/web/components/states/project-setting-state-list-item.tsx
+++ b/web/components/states/project-setting-state-list-item.tsx
@@ -50,7 +50,7 @@ export const StatesListItem: React.FC<Props> = observer((props) => {
   };
 
   return (
-    <div className="group flex items-center justify-between gap-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-4 py-3">
+    <div className="group flex items-center justify-between gap-2 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-4 py-3">
       <div className="flex items-center gap-3">
         <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
         <div>
diff --git a/web/components/states/project-setting-state-list.tsx b/web/components/states/project-setting-state-list.tsx
index 3288880ea..d13997440 100644
--- a/web/components/states/project-setting-state-list.tsx
+++ b/web/components/states/project-setting-state-list.tsx
@@ -87,7 +87,7 @@ export const ProjectSettingStateList: React.FC = observer(() => {
                         handleDeleteState={() => setSelectDeleteState(state.id)}
                       />
                     ) : (
-                      <div className="border-b-[0.5px] border-custom-border-200 last:border-b-0" key={state.id}>
+                      <div className="border-b-[0.5px] border-neutral-border-medium last:border-b-0" key={state.id}>
                         <CreateUpdateStateInline
                           onClose={() => {
                             setActiveGroup(null);
@@ -153,7 +153,7 @@ export const ProjectSettingStateList: React.FC = observer(() => {
                           handleDeleteState={() => setSelectDeleteState(state.id)}
                         />
                       ) : (
-                        <div className="border-b-[0.5px] border-custom-border-200 last:border-b-0" key={state.id}>
+                        <div className="border-b-[0.5px] border-neutral-border-medium last:border-b-0" key={state.id}>
                           <CreateUpdateStateInline
                             onClose={() => {
                               setActiveGroup(null);
diff --git a/web/components/ui/datepicker.tsx b/web/components/ui/datepicker.tsx
index ef0a6b6e0..455f13354 100644
--- a/web/components/ui/datepicker.tsx
+++ b/web/components/ui/datepicker.tsx
@@ -55,10 +55,10 @@ export const CustomDatePicker: React.FC<Props> = ({
       renderAs === "input"
         ? "block px-2 py-2 text-sm focus:outline-none"
         : renderAs === "button"
-          ? `px-2 py-1 text-xs shadow-sm ${disabled ? "" : "hover:bg-custom-background-80"} duration-300`
-          : ""
+        ? `px-2 py-1 text-xs shadow-sm ${disabled ? "" : "hover:bg-custom-background-80"} duration-300`
+        : ""
     } ${error ? "border-red-500 bg-red-100" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${
-      noBorder ? "" : "border border-custom-border-200"
+      noBorder ? "" : "border border-neutral-border-medium"
     } w-full rounded-md caret-transparent outline-none ${className}`}
     dateFormat="MMM dd, yyyy"
     isClearable={Boolean(isClearable && !disabled)}
diff --git a/web/components/ui/empty-space.tsx b/web/components/ui/empty-space.tsx
index 4b70bbb15..7b2d2237e 100644
--- a/web/components/ui/empty-space.tsx
+++ b/web/components/ui/empty-space.tsx
@@ -24,7 +24,10 @@ const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, I
 
       <h2 className="text-lg font-medium text-custom-text-100">{title}</h2>
       <div className="mt-1 text-sm text-custom-text-200">{description}</div>
-      <ul role="list" className="mt-6 divide-y divide-custom-border-200 border-b border-t border-custom-border-200">
+      <ul
+        role="list"
+        className="mt-6 divide-y divide-neutral-border-medium border-b border-t border-neutral-border-medium"
+      >
         {children}
       </ul>
       {link ? (
diff --git a/web/components/ui/integration-and-import-export-banner.tsx b/web/components/ui/integration-and-import-export-banner.tsx
index e05a19606..5823fb3bf 100644
--- a/web/components/ui/integration-and-import-export-banner.tsx
+++ b/web/components/ui/integration-and-import-export-banner.tsx
@@ -6,7 +6,7 @@ type Props = {
 };
 
 export const IntegrationAndImportExportBanner: React.FC<Props> = ({ bannerName, description }) => (
-  <div className="flex items-start gap-3 border-b border-custom-border-100 py-3.5">
+  <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">
diff --git a/web/components/ui/labels-list.tsx b/web/components/ui/labels-list.tsx
index fddea8478..f1d24b651 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-custom-border-300 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-custom-text-200">
               <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
               {`${labels.length} Labels`}
             </div>
diff --git a/web/components/ui/multi-level-dropdown.tsx b/web/components/ui/multi-level-dropdown.tsx
index 7bf4aa8a1..8c1c6f837 100644
--- a/web/components/ui/multi-level-dropdown.tsx
+++ b/web/components/ui/multi-level-dropdown.tsx
@@ -46,7 +46,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
             <div>
               <Menu.Button
                 onClick={() => setOpenChildFor(null)}
-                className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-200 px-3 py-1.5 text-xs shadow-sm duration-300 hover:bg-custom-background-90 hover:text-custom-text-100 focus:outline-none ${
+                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-custom-background-90 hover:text-custom-text-100 focus:outline-none ${
                   open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
                 }`}
               >
@@ -65,7 +65,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
             >
               <Menu.Items
                 static
-                className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none"
+                className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md border border-neutral-border-medium bg-custom-background-90 text-xs shadow-lg focus:outline-none"
               >
                 {options.map((option) => (
                   <div className="relative p-1" key={option.id}>
@@ -102,18 +102,18 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                     </Menu.Item>
                     {option.hasChildren && option.id === openChildFor && (
                       <div
-                        className={`min-w-36 absolute top-0 origin-top-right select-none overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 shadow-lg focus:outline-none ${
+                        className={`min-w-36 absolute top-0 origin-top-right select-none overflow-y-scroll whitespace-nowrap rounded-md border border-neutral-border-medium bg-custom-background-90 shadow-lg focus:outline-none ${
                           direction === "left" ? "right-full -translate-x-1" : "left-full translate-x-1"
                         } ${
                           height === "sm"
                             ? "max-h-28"
                             : height === "md"
-                              ? "max-h-44"
-                              : height === "rg"
-                                ? "max-h-56"
-                                : height === "lg"
-                                  ? "max-h-80"
-                                  : ""
+                            ? "max-h-44"
+                            : height === "rg"
+                            ? "max-h-56"
+                            : height === "lg"
+                            ? "max-h-80"
+                            : ""
                         }`}
                       >
                         {option.children ? (
diff --git a/web/components/ui/range-datepicker.tsx b/web/components/ui/range-datepicker.tsx
index 55760ae01..9cc92ed22 100644
--- a/web/components/ui/range-datepicker.tsx
+++ b/web/components/ui/range-datepicker.tsx
@@ -44,13 +44,13 @@ export const CustomRangeDatePicker: React.FC<Props> = ({
       renderAs === "input"
         ? "block px-3 py-2 text-sm focus:outline-none"
         : renderAs === "button"
-          ? `px-3 py-1 text-xs shadow-sm ${
-              disabled ? "" : "hover:bg-custom-background-80"
-            } duration-300 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary`
-          : ""
+        ? `px-3 py-1 text-xs shadow-sm ${
+            disabled ? "" : "hover:bg-custom-background-80"
+          } duration-300 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary`
+        : ""
     } ${error ? "border-red-500 bg-red-100" : ""} ${
       disabled ? "cursor-not-allowed" : "cursor-pointer"
-    } w-full rounded-md border border-custom-border-200 bg-transparent caret-transparent ${className}`}
+    } w-full rounded-md border border-neutral-border-medium bg-transparent caret-transparent ${className}`}
     dateFormat="dd-MM-yyyy"
     disabled={disabled}
     selectsStart={selectsStart}
diff --git a/web/components/views/view-list-item.tsx b/web/components/views/view-list-item.tsx
index 8da507539..33469f19f 100644
--- a/web/components/views/view-list-item.tsx
+++ b/web/components/views/view-list-item.tsx
@@ -78,7 +78,7 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
         />
       )}
       <DeleteProjectViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
-      <div className="group border-b border-custom-border-200 hover:bg-custom-background-90">
+      <div className="group border-b border-neutral-border-medium hover:bg-custom-background-90">
         <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
           <div className="relative flex w-full items-center justify-between rounded p-4">
             <div className="flex w-full items-center justify-between">
diff --git a/web/components/views/views-list.tsx b/web/components/views/views-list.tsx
index 6b3b3e45a..a7a2965a8 100644
--- a/web/components/views/views-list.tsx
+++ b/web/components/views/views-list.tsx
@@ -54,7 +54,7 @@ export const ProjectViewsList = observer(() => {
       {viewsList.length > 0 ? (
         <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-custom-border-200 px-5 py-3">
+            <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} />
               <Input
                 className="w-full bg-transparent !p-0 text-xs leading-5 text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
diff --git a/web/components/web-hooks/create-webhook-modal.tsx b/web/components/web-hooks/create-webhook-modal.tsx
index f8301bf53..66a44a183 100644
--- a/web/components/web-hooks/create-webhook-modal.tsx
+++ b/web/components/web-hooks/create-webhook-modal.tsx
@@ -125,7 +125,7 @@ export const CreateWebhookModal: React.FC<ICreateWebhookModal> = (props) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 p-6 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-neutral-border-medium bg-custom-background-100 p-6 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 {!generatedWebhook ? (
                   <WebhookForm onSubmit={handleCreateWebhook} handleClose={handleClose} />
                 ) : (
diff --git a/web/components/web-hooks/delete-webhook-modal.tsx b/web/components/web-hooks/delete-webhook-modal.tsx
index 6cc30bb57..61f7b28e7 100644
--- a/web/components/web-hooks/delete-webhook-modal.tsx
+++ b/web/components/web-hooks/delete-webhook-modal.tsx
@@ -80,7 +80,7 @@ export const DeleteWebhookModal: FC<IDeleteWebhook> = (props) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 p-6 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-neutral-border-medium bg-custom-background-100 p-6 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex w-full items-center justify-start gap-6">
                   <span className="place-items-center rounded-full bg-red-500/20 p-4">
                     <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
diff --git a/web/components/web-hooks/empty-state.tsx b/web/components/web-hooks/empty-state.tsx
index 015cf57bc..9d490bac3 100644
--- a/web/components/web-hooks/empty-state.tsx
+++ b/web/components/web-hooks/empty-state.tsx
@@ -13,7 +13,7 @@ export const WebhooksEmptyState: React.FC<Props> = (props) => {
   const { onClick } = props;
   return (
     <div
-      className={`mx-auto flex w-full items-center justify-center rounded-sm border border-custom-border-200 bg-custom-background-90 px-16 py-10 lg:w-3/4`}
+      className={`mx-auto flex w-full items-center justify-center rounded-sm border border-neutral-border-medium bg-custom-background-90 px-16 py-10 lg:w-3/4`}
     >
       <div className="flex w-full flex-col items-center text-center">
         <Image src={EmptyWebhook} className="w-52 sm:w-60" alt="empty" />
diff --git a/web/components/web-hooks/form/delete-section.tsx b/web/components/web-hooks/form/delete-section.tsx
index efa9cfca1..b6b2d1852 100644
--- a/web/components/web-hooks/form/delete-section.tsx
+++ b/web/components/web-hooks/form/delete-section.tsx
@@ -10,7 +10,7 @@ export const WebhookDeleteSection: React.FC<Props> = (props) => {
   const { openDeleteModal } = props;
 
   return (
-    <Disclosure as="div" className="border-t border-custom-border-200">
+    <Disclosure as="div" className="border-t border-neutral-border-medium">
       {({ open }) => (
         <div className="w-full">
           <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4">
diff --git a/web/components/web-hooks/form/secret-key.tsx b/web/components/web-hooks/form/secret-key.tsx
index 2d6a69fd6..61811c016 100644
--- a/web/components/web-hooks/form/secret-key.tsx
+++ b/web/components/web-hooks/form/secret-key.tsx
@@ -94,7 +94,7 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
           {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="flex items-center gap-4">
-            <div className="flex flex-grow max-w-lg items-center justify-between self-stretch rounded border border-custom-border-200 px-2 py-1.5">
+            <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">
                 {shouldShowKey ? (
                   <p className="text-xs">{webhookSecretKey}</p>
diff --git a/web/components/web-hooks/webhooks-list-item.tsx b/web/components/web-hooks/webhooks-list-item.tsx
index fa676fccd..09ecbafaa 100644
--- a/web/components/web-hooks/webhooks-list-item.tsx
+++ b/web/components/web-hooks/webhooks-list-item.tsx
@@ -27,7 +27,7 @@ export const WebhooksListItem: FC<IWebhookListItem> = (props) => {
   };
 
   return (
-    <div className="border-b border-custom-border-200">
+    <div className="border-b border-neutral-border-medium">
       <Link href={`/${workspaceSlug}/settings/webhooks/${webhook?.id}`}>
         <span className="flex items-center justify-between gap-4 px-3.5 py-[18px]">
           <h5 className="truncate text-base font-medium">{webhook.url}</h5>
diff --git a/web/components/workspace/create-workspace-form.tsx b/web/components/workspace/create-workspace-form.tsx
index 423c80640..13a331970 100644
--- a/web/components/workspace/create-workspace-form.tsx
+++ b/web/components/workspace/create-workspace-form.tsx
@@ -153,7 +153,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
         </div>
         <div className="space-y-1 text-sm">
           <label htmlFor="workspaceUrl">Workspace URL</label>
-          <div className="flex w-full items-center rounded-md border-[0.5px] border-custom-border-200 px-3">
+          <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>
             <Controller
               control={control}
@@ -199,7 +199,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
                       <span className="text-custom-text-400">Select organization size</span>
                     )
                   }
-                  buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
+                  buttonClassName="!border-[0.5px] !border-neutral-border-medium !shadow-none"
                   input
                   optionsClassName="w-full"
                 >
diff --git a/web/components/workspace/help-section.tsx b/web/components/workspace/help-section.tsx
index 0bde9d1a5..050f51346 100644
--- a/web/components/workspace/help-section.tsx
+++ b/web/components/workspace/help-section.tsx
@@ -57,7 +57,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
   return (
     <>
       <div
-        className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 py-2 ${
+        className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-neutral-border-medium bg-custom-sidebar-background-100 px-4 py-2 ${
           isCollapsed ? "flex-col" : ""
         }`}
       >
@@ -124,7 +124,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
             <div
               className={`absolute bottom-2 min-w-[10rem] ${
                 isCollapsed ? "left-full" : "-left-[75px]"
-              } divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
+              } divide-y divide-neutral-border-medium whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
               ref={helpOptionsRef}
             >
               <div className="space-y-1 pb-2">
diff --git a/web/components/workspace/settings/members-list.tsx b/web/components/workspace/settings/members-list.tsx
index 97f253afc..83a6ad71d 100644
--- a/web/components/workspace/settings/members-list.tsx
+++ b/web/components/workspace/settings/members-list.tsx
@@ -45,7 +45,7 @@ export const WorkspaceMembersList: FC<{ searchQuery: string }> = observer((props
   const searchedInvitationsIds = getSearchedWorkspaceInvitationIds(searchQuery);
 
   return (
-    <div className="divide-y-[0.5px] divide-custom-border-100">
+    <div className="divide-y-[0.5px] divide-neutral-border-subtle">
       {searchedInvitationsIds && searchedInvitationsIds.length > 0
         ? searchedInvitationsIds?.map((invitationId) => (
             <WorkspaceInvitationsListItem key={invitationId} invitationId={invitationId} />
diff --git a/web/components/workspace/settings/workspace-details.tsx b/web/components/workspace/settings/workspace-details.tsx
index 3063855fd..3686b211d 100644
--- a/web/components/workspace/settings/workspace-details.tsx
+++ b/web/components/workspace/settings/workspace-details.tsx
@@ -165,7 +165,7 @@ export const WorkspaceDetails: FC = observer(() => {
         )}
       />
       <div className={`w-full overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "opacity-60"}`}>
-        <div className="flex items-center gap-5 border-b border-custom-border-100 pb-7">
+        <div className="flex items-center gap-5 border-b border-neutral-border-subtle pb-7">
           <div className="flex flex-col gap-1">
             <button type="button" onClick={() => setIsImageUploadModalOpen(true)} disabled={!isAdmin}>
               {watch("logo") && watch("logo") !== null && watch("logo") !== "" ? (
@@ -248,7 +248,7 @@ export const WorkspaceDetails: FC = observer(() => {
                     onChange={onChange}
                     label={ORGANIZATION_SIZE.find((c) => c === value) ?? "Select organization size"}
                     optionsClassName="w-full"
-                    buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
+                    buttonClassName="!border-[0.5px] !border-neutral-border-medium !shadow-none"
                     input
                     disabled={!isAdmin}
                   >
@@ -296,7 +296,7 @@ export const WorkspaceDetails: FC = observer(() => {
           )}
         </div>
         {isAdmin && (
-          <Disclosure as="div" className="border-t border-custom-border-100">
+          <Disclosure as="div" className="border-t border-neutral-border-subtle">
             {({ open }) => (
               <div className="w-full">
                 <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4">
diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
index 616562f27..85d4805f7 100644
--- a/web/components/workspace/sidebar-dropdown.tsx
+++ b/web/components/workspace/sidebar-dropdown.tsx
@@ -144,7 +144,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
               leaveTo="transform opacity-0 scale-95"
             >
               <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-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg divide-y divide-custom-border-100 outline-none">
+                <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-custom-sidebar-border-300 bg-custom-sidebar-background-100 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-custom-background-100 pt-3 text-sm font-medium text-custom-sidebar-text-400">
                       {currentUser?.email}
diff --git a/web/components/workspace/sidebar-quick-action.tsx b/web/components/workspace/sidebar-quick-action.tsx
index 88fee55a6..1638eb292 100644
--- a/web/components/workspace/sidebar-quick-action.tsx
+++ b/web/components/workspace/sidebar-quick-action.tsx
@@ -69,7 +69,7 @@ export const WorkspaceSidebarQuickAction = observer(() => {
             className={`relative flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2 ${
               isSidebarCollapsed
                 ? "px-2 hover:bg-custom-sidebar-background-80"
-                : "border-[0.5px] border-custom-border-200 px-3 shadow-custom-sidebar-shadow-2xs"
+                : "border-[0.5px] border-neutral-border-medium px-3 shadow-custom-sidebar-shadow-2xs"
             }`}
           >
             <button
@@ -113,7 +113,7 @@ 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-custom-border-300 bg-custom-background-100 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-custom-background-100 px-3 py-[10px] text-sm text-custom-text-300 shadow"
                     >
                       <PenSquare size={16} className="mr-2 !text-lg !leading-4 text-custom-sidebar-text-300" />
                       Last Drafted Issue
@@ -131,7 +131,7 @@ export const WorkspaceSidebarQuickAction = observer(() => {
           } ${
             isSidebarCollapsed
               ? "hover:bg-custom-sidebar-background-80"
-              : "border-[0.5px] border-custom-border-200 shadow-custom-sidebar-shadow-2xs"
+              : "border-[0.5px] border-neutral-border-medium shadow-custom-sidebar-shadow-2xs"
           }`}
           onClick={() => commandPaletteStore.toggleCommandPaletteModal(true)}
         >
diff --git a/web/components/workspace/views/default-view-list-item.tsx b/web/components/workspace/views/default-view-list-item.tsx
index 689732fd7..4e31273fe 100644
--- a/web/components/workspace/views/default-view-list-item.tsx
+++ b/web/components/workspace/views/default-view-list-item.tsx
@@ -15,7 +15,7 @@ export const GlobalDefaultViewListItem: React.FC<Props> = observer((props) => {
   const { workspaceSlug } = router.query;
 
   return (
-    <div className="group border-b border-custom-border-200 hover:bg-custom-background-90">
+    <div className="group border-b border-neutral-border-medium hover:bg-custom-background-90">
       <Link href={`/${workspaceSlug}/workspace-views/${view.key}`}>
         <div className="relative flex w-full items-center justify-between rounded px-5 py-4">
           <div className="flex w-full items-center justify-between">
diff --git a/web/components/workspace/views/header.tsx b/web/components/workspace/views/header.tsx
index 9c9b40c47..ccc9c1773 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-custom-border-200 hover:text-custom-text-400"
+            : "border-transparent hover:border-neutral-border-medium hover:text-custom-text-400"
         }`}
       >
         {view.name}
@@ -64,7 +64,7 @@ export const GlobalViewsHeader: React.FC = observer(() => {
   return (
     <>
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
-      <div className="group relative flex border-b border-custom-border-200">
+      <div className="group relative flex border-b border-neutral-border-medium">
         <div className="flex w-full items-center overflow-x-auto px-4">
           {DEFAULT_GLOBAL_VIEWS_LIST.map((tab) => (
             <Link key={tab.key} href={`/${workspaceSlug}/workspace-views/${tab.key}`}>
@@ -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-custom-border-200 hover:text-custom-text-400"
+                    : "border-transparent hover:border-neutral-border-medium hover:text-custom-text-400"
                 }`}
               >
                 {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-custom-background-100 py-3 hover:border-custom-border-200 hover:text-custom-text-400"
+            className="sticky -right-4 flex w-12 flex-shrink-0 items-center justify-center border-transparent bg-custom-background-100 py-3 hover:border-neutral-border-medium hover:text-custom-text-400"
             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 1d9289037..946a60594 100644
--- a/web/components/workspace/views/view-list-item.tsx
+++ b/web/components/workspace/views/view-list-item.tsx
@@ -36,7 +36,7 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
     <>
       <CreateUpdateWorkspaceViewModal data={view} isOpen={updateViewModal} onClose={() => setUpdateViewModal(false)} />
       <DeleteGlobalViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
-      <div className="group border-b border-custom-border-200 hover:bg-custom-background-90">
+      <div className="group border-b border-neutral-border-medium hover:bg-custom-background-90">
         <Link href={`/${workspaceSlug}/workspace-views/${view.id}`}>
           <div className="relative flex w-full items-center justify-between rounded p-4">
             <div className="flex w-full items-center justify-between">
diff --git a/web/layouts/admin-layout/header.tsx b/web/layouts/admin-layout/header.tsx
index f86abf6e6..1f76b8225 100644
--- a/web/layouts/admin-layout/header.tsx
+++ b/web/layouts/admin-layout/header.tsx
@@ -14,7 +14,7 @@ export const InstanceAdminHeader: FC<IInstanceAdminHeader> = observer((props) =>
   const { title } = props;
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-neutral-border-medium bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         {title && (
           <div>
diff --git a/web/pages/[workspaceSlug]/analytics.tsx b/web/pages/[workspaceSlug]/analytics.tsx
index fcaef9f70..bdd053c5b 100644
--- a/web/pages/[workspaceSlug]/analytics.tsx
+++ b/web/pages/[workspaceSlug]/analytics.tsx
@@ -35,12 +35,12 @@ const AnalyticsPage: NextPageWithLayout = observer(() => {
       {workspaceProjectIds && workspaceProjectIds.length > 0 ? (
         <div className="flex h-full flex-col overflow-hidden bg-custom-background-100">
           <Tab.Group as={Fragment}>
-            <Tab.List as="div" className="space-x-2 border-b border-custom-border-200 px-5 py-3">
+            <Tab.List as="div" className="space-x-2 border-b border-neutral-border-medium px-5 py-3">
               {ANALYTICS_TABS.map((tab) => (
                 <Tab
                   key={tab.key}
                   className={({ selected }) =>
-                    `rounded-3xl border border-custom-border-200 px-4 py-2 text-xs hover:bg-custom-background-80 ${
+                    `rounded-3xl border border-neutral-border-medium px-4 py-2 text-xs hover:bg-custom-background-80 ${
                       selected ? "bg-custom-background-80" : ""
                     }`
                   }
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
index 046fdc0c4..487596269 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
@@ -96,15 +96,15 @@ const ArchivedIssueDetailsPage: NextPageWithLayout = () => {
         </Loader>
       ) : (
         <div className="flex h-full overflow-hidden">
-          <div className="h-full w-full space-y-2 divide-y-2 divide-custom-border-300 overflow-y-auto p-5">
+          <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-custom-border-200 bg-custom-background-90 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-custom-background-90 px-2.5 py-2 text-sm text-custom-text-200">
                 <div className="flex items-center gap-2">
                   <ArchiveIcon className="h-3.5 w-3.5" />
                   <p>This issue has been archived by Plane.</p>
                 </div>
                 <button
-                  className="flex items-center gap-2 rounded-md border border-custom-border-200 p-1.5 text-sm"
+                  className="flex items-center gap-2 rounded-md border border-neutral-border-medium p-1.5 text-sm"
                   onClick={handleUnArchive}
                   disabled={isRestoring}
                 >
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
index 503110abe..d0b568ae8 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
@@ -18,11 +18,11 @@ const ProjectArchivedIssuesPage: NextPageWithLayout = () => {
 
   return (
     <div className="flex h-full w-full flex-col">
-      <div className="ga-1 flex items-center border-b border-custom-border-200 px-4 py-2.5 shadow-sm">
+      <div className="ga-1 flex items-center border-b border-neutral-border-medium px-4 py-2.5 shadow-sm">
         <button
           type="button"
           onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/`)}
-          className="flex items-center gap-1.5 rounded-full border border-custom-border-200 px-3 py-1.5 text-xs"
+          className="flex items-center gap-1.5 rounded-full border border-neutral-border-medium px-3 py-1.5 text-xs"
         >
           <ArchiveIcon className="h-4 w-4" />
           <span>Archived Issues</span>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index f24fc5597..b85aea050 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -56,7 +56,7 @@ const CycleDetailPage: NextPageWithLayout = () => {
             </div>
             {cycleId && !isSidebarCollapsed && (
               <div
-                className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300"
+                className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-neutral-border-subtle bg-custom-sidebar-background-100 px-6 py-3.5 duration-300"
                 style={{
                   boxShadow:
                     "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index c00777319..ab44b0b44 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -101,7 +101,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
           selectedIndex={CYCLE_TAB_LIST.findIndex((i) => i.key == cycleTab)}
           onChange={(i) => handleCurrentView(CYCLE_TAB_LIST[i]?.key ?? "active")}
         >
-          <div className="flex flex-col items-end justify-between gap-4 border-b border-custom-border-200 px-4 pb-4 sm:flex-row sm:items-center sm:px-5 sm:pb-0">
+          <div className="flex flex-col items-end justify-between gap-4 border-b border-neutral-border-medium px-4 pb-4 sm:flex-row sm:items-center sm:px-5 sm:pb-0">
             <Tab.List as="div" className="flex items-center overflow-x-scroll">
               {CYCLE_TAB_LIST.map((tab) => (
                 <Tab
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
index eaf7ce3d3..b63e36d19 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
@@ -15,11 +15,11 @@ const ProjectDraftIssuesPage: NextPageWithLayout = () => {
 
   return (
     <div className="flex h-full w-full flex-col">
-      <div className="ga-1 flex items-center border-b border-custom-border-200 px-4 py-2.5 shadow-sm">
+      <div className="ga-1 flex items-center border-b border-neutral-border-medium px-4 py-2.5 shadow-sm">
         <button
           type="button"
           onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/`)}
-          className="flex items-center gap-1.5 rounded-full border border-custom-border-200 px-3 py-1.5 text-xs"
+          className="flex items-center gap-1.5 rounded-full border border-neutral-border-medium px-3 py-1.5 text-xs"
         >
           <PenSquare className="h-4 w-4" />
           <span>Draft Issues</span>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
index 5cd1e6c2c..8b88c2eca 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
@@ -38,7 +38,7 @@ const ProjectInboxPage: NextPageWithLayout = observer(() => {
   if (!workspaceSlug || !projectId || !inboxId || !currentProjectDetails?.inbox_view) return <></>;
   return (
     <div className="relative flex h-full overflow-hidden">
-      <div className="flex-shrink-0 w-[340px] h-full border-r border-custom-border-300">
+      <div className="flex-shrink-0 w-[340px] h-full border-r border-neutral-border-medium">
         <InboxSidebarRoot
           workspaceSlug={workspaceSlug.toString()}
           projectId={projectId.toString()}
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index 946041176..feff92d76 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -58,7 +58,7 @@ const ModuleIssuesPage: NextPageWithLayout = () => {
           </div>
           {moduleId && !isSidebarCollapsed && (
             <div
-              className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300"
+              className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-neutral-border-subtle bg-custom-sidebar-background-100 px-6 py-3.5 duration-300"
               style={{
                 boxShadow:
                   "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index 32299747f..2b17ba782 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -151,7 +151,7 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
                         `rounded-full border px-5 py-1.5 text-sm outline-none ${
                           selected
                             ? "border-custom-primary bg-custom-primary text-white"
-                            : "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90"
+                            : "border-neutral-border-medium bg-custom-background-100 hover:bg-custom-background-90"
                         }`
                       }
                     >
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
index f17b7cc8a..8a0f7aebf 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
@@ -45,7 +45,7 @@ const AutomationSettingsPage: NextPageWithLayout = observer(() => {
 
   return (
     <section className={`w-full overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "opacity-60"}`}>
-      <div className="flex items-center border-b border-custom-border-100 py-3.5">
+      <div className="flex items-center border-b border-neutral-border-subtle py-3.5">
         <h3 className="text-xl font-medium">Automations</h3>
       </div>
       <AutoArchiveAutomation handleChange={handleChange} />
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index a6f66d963..2a078587a 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -29,7 +29,7 @@ const FeaturesSettingsPage: NextPageWithLayout = () => {
 
   return (
     <section className={`w-full overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "opacity-60"}`}>
-      <div className="flex items-center border-b border-custom-border-100 py-3.5">
+      <div className="flex items-center border-b border-neutral-border-subtle py-3.5">
         <h3 className="text-xl font-medium">Features</h3>
       </div>
       <ProjectFeaturesList />
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
index bc0163464..4727051da 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -43,7 +43,7 @@ const ProjectIntegrationsPage: NextPageWithLayout = () => {
 
   return (
     <div className={`w-full gap-10 overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "opacity-60"}`}>
-      <div className="flex items-center border-b border-custom-border-100 py-3.5">
+      <div className="flex items-center border-b border-neutral-border-subtle py-3.5">
         <h3 className="text-xl font-medium">Integrations</h3>
       </div>
       {workspaceIntegrations ? (
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 3fa9561a8..037cf4b4d 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -10,7 +10,7 @@ import { NextPageWithLayout } from "lib/types";
 
 const StatesSettingsPage: NextPageWithLayout = () => (
   <div className="w-full gap-10 overflow-y-auto py-8 pr-9">
-    <div className="flex items-center border-b border-custom-border-100 py-3.5">
+    <div className="flex items-center border-b border-neutral-border-subtle py-3.5">
       <h3 className="text-xl font-medium">States</h3>
     </div>
     <ProjectSettingStateList />
diff --git a/web/pages/[workspaceSlug]/settings/api-tokens.tsx b/web/pages/[workspaceSlug]/settings/api-tokens.tsx
index e7307c97d..2df8c621c 100644
--- a/web/pages/[workspaceSlug]/settings/api-tokens.tsx
+++ b/web/pages/[workspaceSlug]/settings/api-tokens.tsx
@@ -53,7 +53,7 @@ const ApiTokensPage: NextPageWithLayout = observer(() => {
         <section className="w-full overflow-y-auto py-8 pr-9">
           {tokens.length > 0 ? (
             <>
-              <div className="mb-2 flex items-center justify-between border-b border-custom-border-200 py-3.5">
+              <div className="mb-2 flex items-center justify-between border-b border-neutral-border-medium py-3.5">
                 <h3 className="text-xl font-medium">API tokens</h3>
                 <Button variant="primary" onClick={() => setIsCreateTokenModalOpen(true)}>
                   Add API token
diff --git a/web/pages/[workspaceSlug]/settings/billing.tsx b/web/pages/[workspaceSlug]/settings/billing.tsx
index 7cc9c7a28..d13ce093a 100644
--- a/web/pages/[workspaceSlug]/settings/billing.tsx
+++ b/web/pages/[workspaceSlug]/settings/billing.tsx
@@ -31,7 +31,7 @@ const BillingSettingsPage: NextPageWithLayout = observer(() => {
   return (
     <section className="w-full overflow-y-auto py-8 pr-9">
       <div>
-        <div className="flex  items-center border-b border-custom-border-100 py-3.5">
+        <div className="flex  items-center border-b border-neutral-border-subtle py-3.5">
           <h3 className="text-xl font-medium">Billing & Plans</h3>
         </div>
       </div>
diff --git a/web/pages/[workspaceSlug]/settings/exports.tsx b/web/pages/[workspaceSlug]/settings/exports.tsx
index f491581fd..ce6ed44d3 100644
--- a/web/pages/[workspaceSlug]/settings/exports.tsx
+++ b/web/pages/[workspaceSlug]/settings/exports.tsx
@@ -30,7 +30,7 @@ const ExportsPage: NextPageWithLayout = observer(() => {
 
   return (
     <div className="w-full overflow-y-auto py-8 pr-9">
-      <div className="flex items-center border-b border-custom-border-100 py-3.5">
+      <div className="flex items-center border-b border-neutral-border-subtle py-3.5">
         <h3 className="text-xl font-medium">Exports</h3>
       </div>
       <ExportGuide />
diff --git a/web/pages/[workspaceSlug]/settings/imports.tsx b/web/pages/[workspaceSlug]/settings/imports.tsx
index 2e4be4cc1..e7378f831 100644
--- a/web/pages/[workspaceSlug]/settings/imports.tsx
+++ b/web/pages/[workspaceSlug]/settings/imports.tsx
@@ -29,7 +29,7 @@ const ImportsPage: NextPageWithLayout = observer(() => {
 
   return (
     <section className="w-full overflow-y-auto py-8 pr-9">
-      <div className="flex items-center border-b border-custom-border-100 py-3.5">
+      <div className="flex items-center border-b border-neutral-border-subtle py-3.5">
         <h3 className="text-xl font-medium">Imports</h3>
       </div>
       <IntegrationGuide />
diff --git a/web/pages/[workspaceSlug]/settings/members.tsx b/web/pages/[workspaceSlug]/settings/members.tsx
index cabc2aa92..7fbf6f8c4 100644
--- a/web/pages/[workspaceSlug]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/settings/members.tsx
@@ -73,9 +73,9 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
         onSubmit={handleWorkspaceInvite}
       />
       <section className="w-full overflow-y-auto py-8 pr-9">
-        <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 py-3.5">
+        <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-custom-border-200 bg-custom-background-100 px-2.5 py-1.5">
+          <div className="ml-auto flex items-center gap-1.5 rounded-md border border-neutral-border-medium bg-custom-background-100 px-2.5 py-1.5">
             <Search className="h-3.5 w-3.5 text-custom-text-400" />
             <input
               className="w-full max-w-[234px] border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400"
diff --git a/web/pages/[workspaceSlug]/settings/webhooks/index.tsx b/web/pages/[workspaceSlug]/settings/webhooks/index.tsx
index d8ba13f93..215f5bb91 100644
--- a/web/pages/[workspaceSlug]/settings/webhooks/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/webhooks/index.tsx
@@ -67,7 +67,7 @@ const WebhooksListPage: NextPageWithLayout = observer(() => {
       />
       {Object.keys(webhooks).length > 0 ? (
         <div className="flex h-full w-full flex-col">
-          <div className="flex items-center justify-between gap-4 border-b border-custom-border-200 pb-3.5">
+          <div className="flex items-center justify-between gap-4 border-b border-neutral-border-medium pb-3.5">
             <div className="text-xl font-medium">Webhooks</div>
             <Button variant="primary" size="sm" onClick={() => setShowCreateWebhookModal(true)}>
               Add webhook
diff --git a/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx b/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx
index e89e2c70f..4615373cc 100644
--- a/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx
@@ -10,7 +10,7 @@ import { NextPageWithLayout } from "lib/types";
 
 const GlobalViewIssuesPage: NextPageWithLayout = () => (
   <div className="h-full overflow-hidden bg-custom-background-100">
-    <div className="flex h-full w-full flex-col border-b border-custom-border-300">
+    <div className="flex h-full w-full flex-col border-b border-neutral-border-medium">
       <GlobalViewsHeader />
       <AllIssueLayoutRoot />
     </div>
diff --git a/web/pages/[workspaceSlug]/workspace-views/index.tsx b/web/pages/[workspaceSlug]/workspace-views/index.tsx
index db1a6fca7..b70741dd9 100644
--- a/web/pages/[workspaceSlug]/workspace-views/index.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/index.tsx
@@ -19,7 +19,7 @@ const WorkspaceViewsPage: NextPageWithLayout = () => {
   return (
     <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-custom-border-200 px-5 py-3">
+        <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} />
           <Input
             className="w-full bg-transparent !p-0 text-xs leading-5 text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
diff --git a/web/pages/accounts/forgot-password.tsx b/web/pages/accounts/forgot-password.tsx
index 8d3c4cd28..ef2945200 100644
--- a/web/pages/accounts/forgot-password.tsx
+++ b/web/pages/accounts/forgot-password.tsx
@@ -83,9 +83,9 @@ const ForgotPasswordPage: NextPageWithLayout = () => {
         </div>
       </div>
 
-      <div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
+      <div className="mx-auto h-full rounded-t-md border-x border-t border-neutral-border-medium bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
         <div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
-          <div className="mx-auto flex flex-col divide-y divide-custom-border-200 sm:w-96">
+          <div className="mx-auto flex flex-col divide-y divide-neutral-border-medium sm:w-96">
             <h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
               Get on your flight deck
             </h1>
diff --git a/web/pages/accounts/reset-password.tsx b/web/pages/accounts/reset-password.tsx
index 2b893d665..df3c99679 100644
--- a/web/pages/accounts/reset-password.tsx
+++ b/web/pages/accounts/reset-password.tsx
@@ -81,9 +81,9 @@ const ResetPasswordPage: NextPageWithLayout = () => {
         </div>
       </div>
 
-      <div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
+      <div className="mx-auto h-full rounded-t-md border-x border-t border-neutral-border-medium bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
         <div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
-          <div className="mx-auto flex flex-col divide-y divide-custom-border-200 sm:w-96">
+          <div className="mx-auto flex flex-col divide-y divide-neutral-border-medium sm:w-96">
             <h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
               Let{"'"}s get a new password
             </h1>
diff --git a/web/pages/accounts/sign-up.tsx b/web/pages/accounts/sign-up.tsx
index 5b5648439..3a8817d9a 100644
--- a/web/pages/accounts/sign-up.tsx
+++ b/web/pages/accounts/sign-up.tsx
@@ -37,7 +37,7 @@ const SignUpPage: NextPageWithLayout = observer(() => {
         </div>
       </div>
 
-      <div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3">
+      <div className="mx-auto h-full rounded-t-md border-x border-t border-neutral-border-medium bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3">
         <div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
           <SignUpRoot />
         </div>
diff --git a/web/pages/create-workspace.tsx b/web/pages/create-workspace.tsx
index 10eb11f55..d15e0dcad 100644
--- a/web/pages/create-workspace.tsx
+++ b/web/pages/create-workspace.tsx
@@ -39,7 +39,7 @@ const CreateWorkspacePage: NextPageWithLayout = observer(() => {
   return (
     <div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
       <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
-        <div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
+        <div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-neutral-border-medium sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
         <Link
           className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
           href="/"
diff --git a/web/pages/god-mode/ai.tsx b/web/pages/god-mode/ai.tsx
index 3ceb902c9..0e1701920 100644
--- a/web/pages/god-mode/ai.tsx
+++ b/web/pages/god-mode/ai.tsx
@@ -24,7 +24,7 @@ const InstanceAdminAIPage: NextPageWithLayout = observer(() => {
 
   return (
     <div className="flex flex-col gap-8">
-      <div className="mb-2 border-b border-custom-border-100 pb-3">
+      <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">
           Configure your AI API credentials so Plane AI features are turned on for all your workspaces.
diff --git a/web/pages/god-mode/authorization.tsx b/web/pages/god-mode/authorization.tsx
index 5085ff61a..fb122be05 100644
--- a/web/pages/god-mode/authorization.tsx
+++ b/web/pages/god-mode/authorization.tsx
@@ -65,7 +65,7 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
 
   return (
     <div className="flex flex-col gap-8">
-      <div className="mb-2 border-b border-custom-border-100 pb-3">
+      <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">
           Make your teams life easy by letting them sign-up with their Google and GitHub accounts, and below are the
@@ -74,7 +74,7 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
       </div>
       {formattedConfig ? (
         <>
-          <div className="flex w-full flex-col gap-12 border-b border-custom-border-100 pb-8 lg:w-2/5">
+          <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">
@@ -149,7 +149,7 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
           </div>
           <div className="flex flex-col gap-y-6 py-2">
             <div className="w-full">
-              <div className="flex items-center justify-between border-b border-custom-border-100 py-2">
+              <div className="flex items-center justify-between border-b border-neutral-border-subtle py-2">
                 <span className="text-lg font-medium tracking-tight">Google</span>
               </div>
               <div className="px-2 py-6">
@@ -157,7 +157,7 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
               </div>
             </div>
             <div className="w-full">
-              <div className="flex items-center justify-between border-b border-custom-border-100 py-2">
+              <div className="flex items-center justify-between border-b border-neutral-border-subtle py-2">
                 <span className="text-lg font-medium tracking-tight">Github</span>
               </div>
               <div className="px-2 py-6">
diff --git a/web/pages/god-mode/email.tsx b/web/pages/god-mode/email.tsx
index bea14a357..589ac726a 100644
--- a/web/pages/god-mode/email.tsx
+++ b/web/pages/god-mode/email.tsx
@@ -22,7 +22,7 @@ const InstanceAdminEmailPage: NextPageWithLayout = observer(() => {
 
   return (
     <div className="flex flex-col gap-8">
-      <div className="mb-2 border-b border-custom-border-100 pb-3">
+      <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">
           Plane can send useful emails to you and your users from your own instance without talking to the Internet.
diff --git a/web/pages/god-mode/image.tsx b/web/pages/god-mode/image.tsx
index f7cf21c2f..5529afd35 100644
--- a/web/pages/god-mode/image.tsx
+++ b/web/pages/god-mode/image.tsx
@@ -22,7 +22,7 @@ const InstanceAdminImagePage: NextPageWithLayout = observer(() => {
 
   return (
     <div className="flex flex-col gap-8">
-      <div className="mb-2 border-b border-custom-border-100 pb-3">
+      <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">
           Let your users search and choose images from third-party libraries
diff --git a/web/pages/god-mode/index.tsx b/web/pages/god-mode/index.tsx
index 35a8ed0c4..2e27bcfaa 100644
--- a/web/pages/god-mode/index.tsx
+++ b/web/pages/god-mode/index.tsx
@@ -23,7 +23,7 @@ const InstanceAdminPage: NextPageWithLayout = observer(() => {
 
   return (
     <div className="flex h-full w-full flex-col gap-8">
-      <div className="mb-2 border-b border-custom-border-100 pb-3">
+      <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">
           Change the name of your instance and instance admin e-mail addresses. If you have a paid subscription, you
diff --git a/web/pages/invitations/index.tsx b/web/pages/invitations/index.tsx
index 0d2a1860b..37bfcdd80 100644
--- a/web/pages/invitations/index.tsx
+++ b/web/pages/invitations/index.tsx
@@ -117,7 +117,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
   return (
     <div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
       <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
-        <div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
+        <div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-neutral-border-medium sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
         <div className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3">
           <div className="h-[30px] w-[133px]">
             {theme === "light" ? (
@@ -147,7 +147,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
                       className={`flex cursor-pointer items-center gap-2 rounded border px-3.5 py-5 ${
                         isSelected
                           ? "border-custom-primary-100"
-                          : "border-custom-border-200 hover:bg-custom-background-80"
+                          : "border-neutral-border-medium hover:bg-custom-background-80"
                       }`}
                       onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
                     >
diff --git a/web/pages/onboarding/index.tsx b/web/pages/onboarding/index.tsx
index 53d4a3b3b..5735557a8 100644
--- a/web/pages/onboarding/index.tsx
+++ b/web/pages/onboarding/index.tsx
@@ -219,7 +219,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
               </div>
             </div>
           </div>
-          <div className="mx-auto h-full w-full overflow-auto rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 lg:w-4/5 xl:w-3/4">
+          <div className="mx-auto h-full w-full overflow-auto rounded-t-md border-x border-t border-neutral-border-medium bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 lg:w-4/5 xl:w-3/4">
             <div className={`h-full w-full overflow-auto rounded-t-md bg-onboarding-gradient-200`}>
               {step === 1 ? (
                 <JoinWorkspaces
diff --git a/web/pages/profile/activity.tsx b/web/pages/profile/activity.tsx
index da3a55f9d..443c52008 100644
--- a/web/pages/profile/activity.tsx
+++ b/web/pages/profile/activity.tsx
@@ -31,7 +31,7 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
 
   return (
     <section className="mx-auto mt-16 flex h-full w-full flex-col overflow-hidden px-8 pb-8 lg:w-3/5">
-      <div className="flex items-center border-b border-custom-border-100 pb-3.5">
+      <div className="flex items-center border-b border-neutral-border-subtle pb-3.5">
         <h3 className="text-xl font-medium">Activity</h3>
       </div>
       {userActivity ? (
@@ -81,7 +81,7 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
                         <div className="issue-comments-section p-0">
                           <RichReadOnlyEditor
                             value={activityItem?.new_value !== "" ? activityItem.new_value : activityItem.old_value}
-                            customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+                            customClassName="text-xs border border-neutral-border-medium bg-custom-background-100"
                             noBorder
                             borderOnFocus={false}
                           />
@@ -142,7 +142,7 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
                               </div>
                             </div>
                           </div>
-                          <div className="min-w-0 flex-1 border-b border-custom-border-100 py-4">
+                          <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">
                               {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
                                 <span className="text-gray font-medium">Plane</span>
diff --git a/web/pages/profile/index.tsx b/web/pages/profile/index.tsx
index 3174c53f3..0e6be036f 100644
--- a/web/pages/profile/index.tsx
+++ b/web/pages/profile/index.tsx
@@ -307,7 +307,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                       onChange={onChange}
                       label={value ? value.toString() : "Select your role"}
                       buttonClassName={errors.role ? "border-red-500" : "border-none"}
-                      className="rounded-md border-[0.5px] !border-custom-border-200"
+                      className="rounded-md border-[0.5px] !border-neutral-border-medium"
                       optionsClassName="w-full"
                       input
                     >
@@ -379,7 +379,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                       onChange={onChange}
                       optionsClassName="w-full"
                       buttonClassName={errors.user_timezone ? "border-red-500" : "border-none"}
-                      className="rounded-md border-[0.5px] !border-custom-border-200"
+                      className="rounded-md border-[0.5px] !border-neutral-border-medium"
                       input
                     />
                   )}
@@ -395,7 +395,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
             </div>
           </div>
         </form>
-        <Disclosure as="div" className="border-t border-custom-border-100 px-8">
+        <Disclosure as="div" className="border-t border-neutral-border-subtle px-8">
           {({ open }) => (
             <>
               <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4">
diff --git a/web/pages/profile/preferences/theme.tsx b/web/pages/profile/preferences/theme.tsx
index 51386bc29..c13e840cd 100644
--- a/web/pages/profile/preferences/theme.tsx
+++ b/web/pages/profile/preferences/theme.tsx
@@ -49,7 +49,7 @@ const ProfilePreferencesThemePage: NextPageWithLayout = observer(() => {
     <>
       {currentUser ? (
         <div className="mx-auto mt-14 h-full w-full overflow-y-auto px-6 lg:px-20 pb-8">
-          <div className="flex items-center border-b border-custom-border-100 pb-3.5">
+          <div className="flex items-center border-b border-neutral-border-subtle pb-3.5">
             <h3 className="text-xl font-medium">Preferences</h3>
           </div>
           <div className="grid grid-cols-12 gap-4 py-6 sm:gap-16">
diff --git a/web/pages/workspace-invitations/index.tsx b/web/pages/workspace-invitations/index.tsx
index aa95d0a38..f2b0de108 100644
--- a/web/pages/workspace-invitations/index.tsx
+++ b/web/pages/workspace-invitations/index.tsx
@@ -70,7 +70,7 @@ const WorkspaceInvitationPage: NextPageWithLayout = observer(() => {
       {invitationDetail ? (
         <>
           {error ? (
-            <div className="flex w-full flex-col space-y-4 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-8 text-center shadow-2xl md:w-1/3">
+            <div className="flex w-full flex-col space-y-4 rounded border border-neutral-border-medium bg-custom-background-100 px-4 py-8 text-center shadow-2xl md:w-1/3">
               <h2 className="text-xl uppercase">INVITATION NOT FOUND</h2>
             </div>
           ) : (