diff --git a/packages/editor/core/src/ui/mentions/mention-list.tsx b/packages/editor/core/src/ui/mentions/mention-list.tsx
index b12adb74d..de82544fe 100644
--- a/packages/editor/core/src/ui/mentions/mention-list.tsx
+++ b/packages/editor/core/src/ui/mentions/mention-list.tsx
@@ -77,7 +77,7 @@ export const MentionList = forwardRef((props: MentionListProps, ref) => {
               {item.avatar && item.avatar.trim() !== "" ? (
                 <img src={item.avatar} className="h-full w-full rounded-sm object-cover" alt={item.title} />
               ) : (
-                <div className="grid h-full w-full place-items-center rounded-sm bg-gray-700 text-xs capitalize text-white">
+                <div className="grid h-full w-full place-items-center rounded-sm bg-primary-solid text-xs capitalize text-white">
                   {item.title[0]}
                 </div>
               )}
diff --git a/packages/editor/core/src/ui/mentions/mention-node-view.tsx b/packages/editor/core/src/ui/mentions/mention-node-view.tsx
index b2fd83a53..c514a41fb 100644
--- a/packages/editor/core/src/ui/mentions/mention-node-view.tsx
+++ b/packages/editor/core/src/ui/mentions/mention-node-view.tsx
@@ -20,7 +20,9 @@ export const MentionNodeView = (props) => {
     <NodeViewWrapper className="mention-component inline w-fit">
       <span
         className={cn("mention rounded bg-custom-primary-100/20 px-1 py-0.5 font-medium text-primary-text-subtle", {
-          "bg-yellow-500/20 text-yellow-500": highlights ? highlights.includes(props.node.attrs.id) : false,
+          "bg-warning-component-surface-light text-warning-text-subtle": highlights
+            ? highlights.includes(props.node.attrs.id)
+            : false,
           "cursor-pointer": !props.extension.options.readonly,
           // "hover:bg-custom-primary-300" : !props.extension.options.readonly && !highlights.includes(props.node.attrs.id)
         })}
diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config-custom/tailwind.config.js
index 1dbb44e5c..3be451709 100644
--- a/packages/tailwind-config-custom/tailwind.config.js
+++ b/packages/tailwind-config-custom/tailwind.config.js
@@ -1,5 +1,101 @@
 import colors from "tailwindcss/colors";
 
+const generateColorShades = (color) => ({
+  page: {
+    ...(color === "neutral"
+      ? { "surface-default": `var(--color-${color}-0)` }
+      : {}),
+    "surface-light": `var(--color-${color}-10)`,
+    "surface-medium": `var(--color-${color}-20)`,
+  },
+  component: {
+    "surface-light": `var(--color-${color}-30)`,
+    "surface-medium": `var(--color-${color}-40)`,
+    "surface-dark": `var(--color-${color}-50)`,
+  },
+  border: {
+    subtle: `var(--color-${color}-60)`,
+    medium: `var(--color-${color}-70)`,
+    strong: `var(--color-${color}-80)`,
+  },
+  solid: `var(--color-${color}-90)`,
+  "solid-hover": `var(--color-${color}-100)`,
+  text: {
+    subtle: `var(--color-${color}-100)`,
+    medium: `var(--color-${color}-110)`,
+    strong: `var(--color-${color}-120)`,
+  },
+  10: `var(--color-${color}-10)`,
+  20: `var(--color-${color}-20)`,
+  30: `var(--color-${color}-30)`,
+  40: `var(--color-${color}-40)`,
+  50: `var(--color-${color}-50)`,
+  60: `var(--color-${color}-60)`,
+  70: `var(--color-${color}-70)`,
+  80: `var(--color-${color}-80)`,
+  90: `var(--color-${color}-90)`,
+  100: `var(--color-${color}-100)`,
+  110: `var(--color-${color}-110)`,
+  120: `var(--color-${color}-120)`,
+  DEFAULT: `var(--color-${color}-90)`,
+});
+
+const generateSidebarColorShades = (color) => ({
+  page: {
+    ...(color === "neutral"
+      ? { "surface-default": `var(--color-sidebar-${color}-0)` }
+      : {}),
+    "surface-light": `var(--color-sidebar-${color}-10)`,
+    "surface-medium": `var(--color-sidebar-${color}-20)`,
+  },
+  component: {
+    "surface-light": `var(--color-sidebar-${color}-30)`,
+    "surface-medium": `var(--color-sidebar-${color}-40)`,
+    "surface-dark": `var(--color-sidebar-${color}-50)`,
+  },
+  border: {
+    subtle: `var(--color-sidebar-${color}-60)`,
+    medium: `var(--color-sidebar-${color}-70)`,
+    strong: `var(--color-sidebar-${color}-80)`,
+  },
+  solid: `var(--color-sidebar-${color}-90)`,
+  "solid-hover": `var(--color-sidebar-${color}-100)`,
+  text: {
+    subtle: `var(--color-sidebar-${color}-100)`,
+    medium: `var(--color-sidebar-${color}-110)`,
+    strong: `var(--color-sidebar-${color}-120)`,
+  },
+  10: `var(--color-sidebar-${color}-10)`,
+  20: `var(--color-sidebar-${color}-20)`,
+  30: `var(--color-sidebar-${color}-30)`,
+  40: `var(--color-sidebar-${color}-40)`,
+  50: `var(--color-sidebar-${color}-50)`,
+  60: `var(--color-sidebar-${color}-60)`,
+  70: `var(--color-sidebar-${color}-70)`,
+  80: `var(--color-sidebar-${color}-80)`,
+  90: `var(--color-sidebar-${color}-90)`,
+  100: `var(--color-sidebar-${color}-100)`,
+  110: `var(--color-sidebar-${color}-110)`,
+  120: `var(--color-sidebar-${color}-120)`,
+  DEFAULT: `var(--color-sidebar-${color}-90)`,
+});
+
+const generateSaturatedColorShades = (color) => ({
+  10: `var(--color-${color}-10)`,
+  20: `var(--color-${color}-20)`,
+  30: `var(--color-${color}-30)`,
+  40: `var(--color-${color}-40)`,
+  50: `var(--color-${color}-50)`,
+  60: `var(--color-${color}-60)`,
+  70: `var(--color-${color}-70)`,
+  80: `var(--color-${color}-80)`,
+  90: `var(--color-${color}-90)`,
+  100: `var(--color-${color}-100)`,
+  110: `var(--color-${color}-110)`,
+  120: `var(--color-${color}-120)`,
+  DEFAULT: `var(--color-${color}-90)`,
+});
+
 /** @type {import('tailwindcss').Config} */
 export const darkMode = "class";
 export const content = {
@@ -44,268 +140,15 @@ export const theme = {
     transparent: colors.transparent,
     black: colors.black,
     white: colors.white,
-    primary: {
-      page: {
-        "surface-light": "var(--color-primary-10)",
-        "surface-medium": "var(--color-primary-20)",
-      },
-      component: {
-        "surface-light": "var(--color-primary-30)",
-        "surface-medium": "var(--color-primary-40)",
-        "surface-dark": "var(--color-primary-50)",
-      },
-      border: {
-        subtle: "var(--color-primary-60)",
-        medium: "var(--color-primary-70)",
-        strong: "var(--color-primary-80)",
-      },
-      solid: "var(--color-primary-90)",
-      text: {
-        subtle: "var(--color-primary-100)",
-        medium: "var(--color-primary-110)",
-        strong: "var(--color-primary-120)",
-      },
-      10: "var(--color-primary-10)",
-      20: "var(--color-primary-20)",
-      30: "var(--color-primary-30)",
-      40: "var(--color-primary-40)",
-      50: "var(--color-primary-50)",
-      60: "var(--color-primary-60)",
-      70: "var(--color-primary-70)",
-      80: "var(--color-primary-80)",
-      90: "var(--color-primary-90)",
-      100: "var(--color-primary-100)",
-      110: "var(--color-primary-110)",
-      120: "var(--color-primary-120)",
-      DEFAULT: "var(--color-primary-90)",
-    },
-    neutral: {
-      page: {
-        "surface-default": "var(--color-neutral-0)",
-        "surface-light": "var(--color-neutral-10)",
-        "surface-medium": "var(--color-neutral-20)",
-      },
-      component: {
-        "surface-light": "var(--color-neutral-30)",
-        "surface-medium": "var(--color-neutral-40)",
-        "surface-dark": "var(--color-neutral-50)",
-      },
-      border: {
-        subtle: "var(--color-neutral-60)",
-        medium: "var(--color-neutral-70)",
-        strong: "var(--color-neutral-80)",
-      },
-      solid: "var(--color-neutral-90)",
-      text: {
-        subtle: "var(--color-neutral-100)",
-        medium: "var(--color-neutral-110)",
-        strong: "var(--color-neutral-120)",
-      },
-      10: "var(--color-neutral-10)",
-      20: "var(--color-neutral-20)",
-      30: "var(--color-neutral-30)",
-      40: "var(--color-neutral-40)",
-      50: "var(--color-neutral-50)",
-      60: "var(--color-neutral-60)",
-      70: "var(--color-neutral-70)",
-      80: "var(--color-neutral-80)",
-      90: "var(--color-neutral-90)",
-      100: "var(--color-neutral-100)",
-      110: "var(--color-neutral-110)",
-      120: "var(--color-neutral-120)",
-      DEFAULT: "var(--color-neutral-90)",
-    },
-    success: {
-      page: {
-        "surface-light": "var(--color-success-10)",
-        "surface-medium": "var(--color-success-20)",
-      },
-      component: {
-        "surface-light": "var(--color-success-30)",
-        "surface-medium": "var(--color-success-40)",
-        "surface-dark": "var(--color-success-50)",
-      },
-      border: {
-        subtle: "var(--color-success-60)",
-        medium: "var(--color-success-70)",
-        strong: "var(--color-success-80)",
-      },
-      solid: "var(--color-success-90)",
-      text: {
-        subtle: "var(--color-success-100)",
-        medium: "var(--color-success-110)",
-        strong: "var(--color-success-120)",
-      },
-      10: "var(--color-success-10)",
-      20: "var(--color-success-20)",
-      30: "var(--color-success-30)",
-      40: "var(--color-success-40)",
-      50: "var(--color-success-50)",
-      60: "var(--color-success-60)",
-      70: "var(--color-success-70)",
-      80: "var(--color-success-80)",
-      90: "var(--color-success-90)",
-      100: "var(--color-success-100)",
-      110: "var(--color-success-110)",
-      120: "var(--color-success-120)",
-      DEFAULT: "var(--color-success-90)",
-    },
-    warning: {
-      page: {
-        "surface-light": "var(--color-warning-10)",
-        "surface-medium": "var(--color-warning-20)",
-      },
-      component: {
-        "surface-light": "var(--color-warning-30)",
-        "surface-medium": "var(--color-warning-40)",
-        "surface-dark": "var(--color-warning-50)",
-      },
-      border: {
-        subtle: "var(--color-warning-60)",
-        medium: "var(--color-warning-70)",
-        strong: "var(--color-warning-80)",
-      },
-      solid: "var(--color-warning-90)",
-      text: {
-        subtle: "var(--color-warning-100)",
-        medium: "var(--color-warning-110)",
-        strong: "var(--color-warning-120)",
-      },
-      10: "var(--color-warning-10)",
-      20: "var(--color-warning-20)",
-      30: "var(--color-warning-30)",
-      40: "var(--color-warning-40)",
-      50: "var(--color-warning-50)",
-      60: "var(--color-warning-60)",
-      70: "var(--color-warning-70)",
-      80: "var(--color-warning-80)",
-      90: "var(--color-warning-90)",
-      100: "var(--color-warning-100)",
-      110: "var(--color-warning-110)",
-      120: "var(--color-warning-120)",
-      DEFAULT: "var(--color-warning-90)",
-    },
-    danger: {
-      page: {
-        "surface-light": "var(--color-danger-10)",
-        "surface-medium": "var(--color-danger-20)",
-      },
-      component: {
-        "surface-light": "var(--color-danger-30)",
-        "surface-medium": "var(--color-danger-40)",
-        "surface-dark": "var(--color-danger-50)",
-      },
-      border: {
-        subtle: "var(--color-danger-60)",
-        medium: "var(--color-danger-70)",
-        strong: "var(--color-danger-80)",
-      },
-      solid: "var(--color-danger-90)",
-      text: {
-        subtle: "var(--color-danger-100)",
-        medium: "var(--color-danger-110)",
-        strong: "var(--color-danger-120)",
-      },
-      10: "var(--color-danger-10)",
-      20: "var(--color-danger-20)",
-      30: "var(--color-danger-30)",
-      40: "var(--color-danger-40)",
-      50: "var(--color-danger-50)",
-      60: "var(--color-danger-60)",
-      70: "var(--color-danger-70)",
-      80: "var(--color-danger-80)",
-      90: "var(--color-danger-90)",
-      100: "var(--color-danger-100)",
-      110: "var(--color-danger-110)",
-      120: "var(--color-danger-120)",
-      DEFAULT: "var(--color-danger-90)",
-    },
-    info: {
-      page: {
-        "surface-light": "var(--color-info-10)",
-        "surface-medium": "var(--color-info-20)",
-      },
-      component: {
-        "surface-light": "var(--color-info-30)",
-        "surface-medium": "var(--color-info-40)",
-        "surface-dark": "var(--color-info-50)",
-      },
-      border: {
-        subtle: "var(--color-info-60)",
-        medium: "var(--color-info-70)",
-        strong: "var(--color-info-80)",
-      },
-      solid: "var(--color-info-90)",
-      text: {
-        subtle: "var(--color-info-100)",
-        medium: "var(--color-info-110)",
-        strong: "var(--color-info-120)",
-      },
-      10: "var(--color-info-10)",
-      20: "var(--color-info-20)",
-      30: "var(--color-info-30)",
-      40: "var(--color-info-40)",
-      50: "var(--color-info-50)",
-      60: "var(--color-info-60)",
-      70: "var(--color-info-70)",
-      80: "var(--color-info-80)",
-      90: "var(--color-info-90)",
-      100: "var(--color-info-100)",
-      110: "var(--color-info-110)",
-      120: "var(--color-info-120)",
-      DEFAULT: "var(--color-info-90)",
-    },
-    orange: {
-      10: "var(--color-orange-10)",
-      20: "var(--color-orange-20)",
-      30: "var(--color-orange-30)",
-      40: "var(--color-orange-40)",
-      50: "var(--color-orange-50)",
-      60: "var(--color-orange-60)",
-      70: "var(--color-orange-70)",
-      80: "var(--color-orange-80)",
-      90: "var(--color-orange-90)",
-      100: "var(--color-orange-100)",
-      110: "var(--color-orange-110)",
-      120: "var(--color-orange-120)",
-    },
+    primary: generateColorShades("primary"),
+    neutral: generateColorShades("neutral"),
+    success: generateColorShades("success"),
+    warning: generateColorShades("warning"),
+    danger: generateColorShades("danger"),
+    info: generateColorShades("info"),
+    orange: generateSaturatedColorShades("orange"),
     sidebar: {
-      neutral: {
-        page: {
-          "surface-default": "var(--color-neutral-0)",
-          "surface-light": "var(--color-neutral-10)",
-          "surface-medium": "var(--color-neutral-20)",
-        },
-        component: {
-          "surface-light": "var(--color-neutral-30)",
-          "surface-medium": "var(--color-neutral-40)",
-          "surface-dark": "var(--color-neutral-50)",
-        },
-        border: {
-          subtle: "var(--color-neutral-60)",
-          medium: "var(--color-neutral-70)",
-          strong: "var(--color-neutral-80)",
-        },
-        solid: "var(--color-neutral-90)",
-        text: {
-          subtle: "var(--color-neutral-100)",
-          medium: "var(--color-neutral-110)",
-          strong: "var(--color-neutral-120)",
-        },
-        10: "var(--color-neutral-10)",
-        20: "var(--color-neutral-20)",
-        30: "var(--color-neutral-30)",
-        40: "var(--color-neutral-40)",
-        50: "var(--color-neutral-50)",
-        60: "var(--color-neutral-60)",
-        70: "var(--color-neutral-70)",
-        80: "var(--color-neutral-80)",
-        90: "var(--color-neutral-90)",
-        100: "var(--color-neutral-100)",
-        110: "var(--color-neutral-110)",
-        120: "var(--color-neutral-120)",
-        DEFAULT: "var(--color-neutral-90)",
-      },
+      neutral: generateSidebarColorShades("neutral"),
     },
   },
   extend: {
diff --git a/packages/ui/src/avatar/avatar.tsx b/packages/ui/src/avatar/avatar.tsx
index 6344dce83..bb46b7f15 100644
--- a/packages/ui/src/avatar/avatar.tsx
+++ b/packages/ui/src/avatar/avatar.tsx
@@ -151,7 +151,7 @@ export const Avatar: React.FC<Props> = (props) => {
               shape
             )} ${className}`}
             style={{
-              backgroundColor: fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",
+              backgroundColor: fallbackBackgroundColor ?? "var(--color-primary-90)",
               color: fallbackTextColor ?? "#ffffff",
             }}
           >
diff --git a/packages/ui/src/button/button.tsx b/packages/ui/src/button/button.tsx
index 10ee815f6..5c6e01d89 100644
--- a/packages/ui/src/button/button.tsx
+++ b/packages/ui/src/button/button.tsx
@@ -32,7 +32,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
   const buttonIconStyle = getIconStyling(size);
 
   return (
-    <button ref={ref} type={type} className={cn(buttonStyle, className)} disabled={disabled || loading} {...rest}>
+    <button
+      ref={ref}
+      type={type}
+      className={cn("outline-none", buttonStyle, className)}
+      disabled={disabled || loading}
+      {...rest}
+    >
       {prependIcon && <div className={buttonIconStyle}>{React.cloneElement(prependIcon, { strokeWidth: 2 })}</div>}
       {children}
       {appendIcon && <div className={buttonIconStyle}>{React.cloneElement(appendIcon, { strokeWidth: 2 })}</div>}
diff --git a/packages/ui/src/button/helper.tsx b/packages/ui/src/button/helper.tsx
index b21cc88ce..c3a6f666d 100644
--- a/packages/ui/src/button/helper.tsx
+++ b/packages/ui/src/button/helper.tsx
@@ -1,25 +1,24 @@
 export type TButtonVariant =
   | "primary"
-  | "accent-primary"
+  | "surface-primary"
   | "outline-primary"
-  | "neutral-primary"
-  | "link-primary"
-  | "danger"
-  | "accent-danger"
-  | "outline-danger"
-  | "link-danger"
-  | "tertiary-danger";
+  | "text-primary"
+  | "surface-neutral"
+  | "outline-neutral"
+  | "text-neutral"
+  | "warning"
+  | "danger";
 
 export type TButtonSizes = "sm" | "md" | "lg" | "xl";
 
-export interface IButtonStyling {
-  [key: string]: {
+export type TButtonStyling = {
+  [key in TButtonVariant]: {
     default: string;
     hover: string;
     pressed: string;
     disabled: string;
   };
-}
+};
 
 enum buttonSizeStyling {
   sm = `px-3 py-1.5 font-medium text-xs rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
@@ -35,67 +34,60 @@ enum buttonIconStyling {
   xl = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
 }
 
-export const buttonStyling: IButtonStyling = {
+export const buttonStyling: TButtonStyling = {
   primary: {
-    default: `text-white bg-custom-primary-100`,
-    hover: `hover:bg-custom-primary-200`,
-    pressed: `focus:text-custom-brand-40 focus:bg-custom-primary-200`,
-    disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
+    default: `text-white bg-primary-solid`,
+    hover: `hover:bg-primary-solid-hover`,
+    pressed: `focus:bg-primary-solid-hover focus:ring-2 focus:ring-primary-border-medium`,
+    disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
   },
-  "accent-primary": {
-    default: `bg-custom-primary-10 text-primary-text-subtle`,
-    hover: `hover:bg-custom-primary-20 hover:text-custom-primary-200`,
-    pressed: `focus:bg-custom-primary-20`,
-    disabled: `cursor-not-allowed !text-custom-primary-60`,
+  "surface-primary": {
+    default: `bg-primary-component-surface-light text-primary-text-subtle`,
+    hover: `hover:bg-primary-component-surface-medium`,
+    pressed: `focus:bg-primary-component-surface-dark focus:ring-2 focus:ring-primary-border-medium focus:text-neutral-text-medium`,
+    disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
   },
   "outline-primary": {
-    default: `text-primary-text-subtle bg-transparent border border-custom-primary-100`,
-    hover: `hover:bg-custom-primary-100/20`,
-    pressed: `focus:text-primary-text-subtle focus:bg-custom-primary-100/30`,
-    disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
+    default: `text-primary-text-subtle bg-transparent border border-primary-border-subtle`,
+    hover: `hover:bg-primary-component-surface-medium hover:border-primary-border-medium`,
+    pressed: `focus:bg-primary-component-surface-dark focus:ring-1 focus:ring-primary-border-medium`,
+    disabled: `cursor-not-allowed border-transparent bg-neutral-component-surface-dark text-neutral-text-subtle`,
   },
-  "neutral-primary": {
-    default: `text-neutral-text-medium bg-neutral-component-surface-light border border-neutral-border-medium`,
+  "text-primary": {
+    default: `text-primary-text-subtle bg-transparent`,
+    hover: `hover:bg-primary-component-surface-light`,
+    pressed: `focus:bg-primary-component-surface-medium`,
+    disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
+  },
+  "surface-neutral": {
+    default: `bg-neutral-component-surface-light text-neutral-text-subtle`,
     hover: `hover:bg-neutral-component-surface-medium`,
-    pressed: `focus:text-neutral-text-medium focus:bg-neutral-component-surface-medium`,
-    disabled: `cursor-not-allowed !text-neutral-text-subtle`,
+    pressed: `focus:bg-neutral-component-surface-dark focus:ring-2 focus:ring-neutral-border-medium focus:text-neutral-text-medium`,
+    disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
   },
-  "link-primary": {
-    default: `text-primary-text-subtle bg-neutral-component-surface-light`,
-    hover: `hover:text-custom-primary-200`,
-    pressed: `focus:text-custom-primary-80 `,
-    disabled: `cursor-not-allowed !text-custom-primary-60`,
+  "outline-neutral": {
+    default: `text-neutral-text-subtle bg-transparent border border-neutral-border-subtle`,
+    hover: `hover:bg-neutral-component-surface-medium hover:border-neutral-border-medium`,
+    pressed: `focus:bg-neutral-component-surface-dark focus:ring-1 focus:ring-neutral-border-medium`,
+    disabled: `cursor-not-allowed border-transparent bg-neutral-component-surface-dark text-neutral-text-subtle`,
+  },
+  "text-neutral": {
+    default: `text-neutral-text-subtle bg-transparent`,
+    hover: `hover:bg-neutral-component-surface-light`,
+    pressed: `focus:bg-neutral-component-surface-medium`,
+    disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
+  },
+  warning: {
+    default: `text-white bg-warning-solid`,
+    hover: `hover:bg-warning-solid-hover`,
+    pressed: `focus:bg-warning-solid-hover focus:ring-2 focus:ring-warning-border-medium`,
+    disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
   },
-
   danger: {
-    default: `text-white bg-red-500`,
-    hover: ` hover:bg-red-600`,
-    pressed: `focus:text-red-200 focus:bg-red-600`,
-    disabled: `cursor-not-allowed !bg-red-300`,
-  },
-  "accent-danger": {
-    default: `text-danger-text-medium bg-red-50`,
-    hover: `hover:text-danger-text-medium hover:bg-red-100`,
-    pressed: `focus:text-danger-text-medium focus:bg-red-100`,
-    disabled: `cursor-not-allowed !text-red-300`,
-  },
-  "outline-danger": {
-    default: `text-danger-text-medium bg-transparent border border-red-500`,
-    hover: `hover:text-red-400 hover:border-red-400`,
-    pressed: `focus:text-red-400 focus:border-red-400`,
-    disabled: `cursor-not-allowed !text-red-300 !border-red-300`,
-  },
-  "link-danger": {
-    default: `text-danger-text-medium bg-neutral-component-surface-light`,
-    hover: `hover:text-red-400`,
-    pressed: `focus:text-red-400`,
-    disabled: `cursor-not-allowed !text-red-300`,
-  },
-  "tertiary-danger": {
-    default: `text-danger-text-medium bg-neutral-component-surface-light border border-red-200`,
-    hover: `hover:bg-red-50 hover:border-red-300`,
-    pressed: `focus:text-red-400`,
-    disabled: `cursor-not-allowed !text-red-300`,
+    default: `text-white bg-danger-solid`,
+    hover: ` hover:bg-danger-solid-hover`,
+    pressed: `focus:bg-danger-solid-hover focus:ring-2 focus:ring-danger-border-medium`,
+    disabled: `cursor-not-allowed bg-neutral-component-surface-dark text-neutral-text-subtle`,
   },
 };
 
diff --git a/packages/ui/src/button/toggle-switch.tsx b/packages/ui/src/button/toggle-switch.tsx
index 32ea8da8b..824747b5f 100644
--- a/packages/ui/src/button/toggle-switch.tsx
+++ b/packages/ui/src/button/toggle-switch.tsx
@@ -22,7 +22,7 @@ const ToggleSwitch: React.FC<IToggleSwitchProps> = (props) => {
       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-neutral-border-medium transition-colors duration-200 ease-in-out focus:outline-none ${
-        value ? "bg-custom-primary-100" : "bg-gray-700"
+        value ? "bg-custom-primary-100" : "bg-primary-solid"
       } ${className || ""} ${disabled ? "cursor-not-allowed" : ""}`}
     >
       <span className="sr-only">{label}</span>
diff --git a/packages/ui/src/form-fields/input-color-picker.tsx b/packages/ui/src/form-fields/input-color-picker.tsx
index 666e509d9..2f2e86ada 100644
--- a/packages/ui/src/form-fields/input-color-picker.tsx
+++ b/packages/ui/src/form-fields/input-color-picker.tsx
@@ -58,7 +58,7 @@ export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
               <Popover.Button as={React.Fragment}>
                 <Button
                   ref={setReferenceElement}
-                  variant="neutral-primary"
+                  variant="outline-neutral"
                   size="sm"
                   className="border-none !bg-transparent"
                 >
diff --git a/packages/ui/src/icons/priority-icon.tsx b/packages/ui/src/icons/priority-icon.tsx
index 7e3a88759..8c7730170 100644
--- a/packages/ui/src/icons/priority-icon.tsx
+++ b/packages/ui/src/icons/priority-icon.tsx
@@ -66,7 +66,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
             {
               "text-danger-text-medium": priority === "urgent",
               "text-orange-500": priority === "high",
-              "text-yellow-500": priority === "medium",
+              "text-warning-text-subtle": priority === "medium",
               "text-primary-text-subtle": priority === "low",
               "text-neutral-text-medium": priority === "none",
             },
diff --git a/space/components/issues/board-views/block-due-date.tsx b/space/components/issues/board-views/block-due-date.tsx
index f7f36f083..b116b20d2 100644
--- a/space/components/issues/board-views/block-due-date.tsx
+++ b/space/components/issues/board-views/block-due-date.tsx
@@ -32,7 +32,7 @@ export const dueDateIconDetails = (
       className = "text-danger-text-medium";
     } else if (timeDifference === 24 * 60 * 60 * 1000) {
       iconName = "event";
-      className = "text-yellow-500";
+      className = "text-warning-text-subtle";
     } else {
       iconName = "calendar_today";
       className = "";
diff --git a/space/components/issues/filters/helpers/dropdown.tsx b/space/components/issues/filters/helpers/dropdown.tsx
index 42c23c88f..387360b19 100644
--- a/space/components/issues/filters/helpers/dropdown.tsx
+++ b/space/components/issues/filters/helpers/dropdown.tsx
@@ -29,7 +29,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
         return (
           <>
             <Popover.Button as={React.Fragment}>
-              <Button ref={setReferenceElement} variant="neutral-primary" size="sm">
+              <Button ref={setReferenceElement} variant="outline-neutral" size="sm">
                 <div className={`${open ? "text-neutral-text-strong" : "text-neutral-text-medium"}`}>
                   <span>{title}</span>
                 </div>
diff --git a/space/components/issues/navbar/index.tsx b/space/components/issues/navbar/index.tsx
index 8dcd78d00..2877dacf5 100644
--- a/space/components/issues/navbar/index.tsx
+++ b/space/components/issues/navbar/index.tsx
@@ -134,7 +134,7 @@ const IssueNavbar = observer(() => {
                 {renderEmoji(projectStore.project.icon_prop)}
               </div>
             ) : (
-              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                 {projectStore.project?.name.charAt(0)}
               </span>
             )
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 ae5c628de..1a3198e2b 100644
--- a/space/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/space/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -75,7 +75,9 @@ export const CommentCard: React.FC<Props> = observer((props) => {
             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`}>
+          <div
+            className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-primary-solid text-white`}
+          >
             {comment.actor_detail.is_bot
               ? comment?.actor_detail?.first_name?.charAt(0)
               : comment?.actor_detail?.display_name?.charAt(0)}
diff --git a/space/components/issues/peek-overview/issue-properties.tsx b/space/components/issues/peek-overview/issue-properties.tsx
index de2cbf8f7..f35f10794 100644
--- a/space/components/issues/peek-overview/issue-properties.tsx
+++ b/space/components/issues/peek-overview/issue-properties.tsx
@@ -86,7 +86,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
                   : priority?.key === "high"
                     ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
                     : priority?.key === "medium"
-                      ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+                      ? "border-yellow-500/20 bg-warning-component-surface-light text-warning-text-subtle"
                       : priority?.key === "low"
                         ? "border-green-500/20 bg-success-component-surface-dark text-success-text-medium"
                         : "border-neutral-border-medium bg-neutral-component-surface-dark"
diff --git a/space/constants/data.ts b/space/constants/data.ts
index ead15a262..e8d1c4fde 100644
--- a/space/constants/data.ts
+++ b/space/constants/data.ts
@@ -39,7 +39,7 @@ export const issuePriorityFilters: IIssuePriorityFilters[] = [
   {
     key: "medium",
     title: "Medium",
-    className: "text-yellow-500 border-neutral-border-medium",
+    className: "text-warning-text-subtle border-neutral-border-medium",
     icon: "signal_cellular_alt_2_bar",
   },
   {
diff --git a/web/components/account/deactivate-account-modal.tsx b/web/components/account/deactivate-account-modal.tsx
index de52a4646..d0ee2b472 100644
--- a/web/components/account/deactivate-account-modal.tsx
+++ b/web/components/account/deactivate-account-modal.tsx
@@ -108,7 +108,7 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
                   </div>
                 </div>
                 <div className="mb-2 flex items-center justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="neutral-primary" onClick={onClose}>
+                  <Button variant="outline-neutral" onClick={onClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" onClick={handleDeleteAccount}>
diff --git a/web/components/analytics/custom-analytics/sidebar/projects-list.tsx b/web/components/analytics/custom-analytics/sidebar/projects-list.tsx
index 11adcfd23..06500d61b 100644
--- a/web/components/analytics/custom-analytics/sidebar/projects-list.tsx
+++ b/web/components/analytics/custom-analytics/sidebar/projects-list.tsx
@@ -33,7 +33,7 @@ export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = observer((pro
                 ) : project.icon_prop ? (
                   <div className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(project.icon_prop)}</div>
                 ) : (
-                  <span className="mr-1 grid h-6 w-6 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                  <span className="mr-1 grid h-6 w-6 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                     {project?.name.charAt(0)}
                   </span>
                 )}
diff --git a/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx b/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
index d9e8c1fb2..367a62971 100644
--- a/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
+++ b/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
@@ -87,7 +87,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
                   {renderEmoji(projectDetails.icon_prop)}
                 </div>
               ) : (
-                <span className="mr-1 grid h-6 w-6 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                <span className="mr-1 grid h-6 w-6 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                   {projectDetails?.name.charAt(0)}
                 </span>
               )}
diff --git a/web/components/analytics/custom-analytics/sidebar/sidebar.tsx b/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
index ff45c4800..fbb610419 100644
--- a/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
+++ b/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
@@ -176,7 +176,7 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
       </div>
       <div className="flex flex-wrap items-center gap-2 justify-self-end">
         <Button
-          variant="neutral-primary"
+          variant="outline-neutral"
           prependIcon={<RefreshCw className="h-3.5 w-3.5" />}
           onClick={() => {
             if (!workspaceSlug) return;
diff --git a/web/components/analytics/scope-and-demand/leaderboard.tsx b/web/components/analytics/scope-and-demand/leaderboard.tsx
index 9f079fee3..97a6c45d3 100644
--- a/web/components/analytics/scope-and-demand/leaderboard.tsx
+++ b/web/components/analytics/scope-and-demand/leaderboard.tsx
@@ -40,7 +40,7 @@ export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyState
                   />
                 </div>
               ) : (
-                <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 text-[11px] capitalize text-white">
+                <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-primary-solid text-[11px] capitalize text-white">
                   {user.display_name !== "" ? user?.display_name?.[0] : "?"}
                 </div>
               )}
diff --git a/web/components/api-token/delete-token-modal.tsx b/web/components/api-token/delete-token-modal.tsx
index 8a93494c9..d21e3d22b 100644
--- a/web/components/api-token/delete-token-modal.tsx
+++ b/web/components/api-token/delete-token-modal.tsx
@@ -108,7 +108,7 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
                     </p>
                   </span>
                   <div className="mt-2 flex justify-end gap-2">
-                    <Button variant="neutral-primary" onClick={handleClose} size="sm">
+                    <Button variant="outline-neutral" onClick={handleClose} size="sm">
                       Cancel
                     </Button>
                     <Button variant="danger" onClick={handleDeletion} loading={deleteLoading} size="sm">
diff --git a/web/components/api-token/modal/form.tsx b/web/components/api-token/modal/form.tsx
index 89d5966ee..532b490a4 100644
--- a/web/components/api-token/modal/form.tsx
+++ b/web/components/api-token/modal/form.tsx
@@ -238,7 +238,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
           <span className="text-xs">Never expires</span>
         </div>
         <div className="flex items-center gap-2">
-          <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+          <Button variant="outline-neutral" size="sm" onClick={handleClose}>
             Discard
           </Button>
           <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
diff --git a/web/components/api-token/modal/generated-token-details.tsx b/web/components/api-token/modal/generated-token-details.tsx
index e29a6efa0..64eb087a8 100644
--- a/web/components/api-token/modal/generated-token-details.tsx
+++ b/web/components/api-token/modal/generated-token-details.tsx
@@ -52,7 +52,7 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
         <p className="text-xs text-neutral-text-subtle">
           {tokenDetails.expired_at ? `Expires ${renderFormattedDate(tokenDetails.expired_at)}` : "Never expires"}
         </p>
-        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+        <Button variant="outline-neutral" size="sm" onClick={handleClose}>
           Close
         </Button>
       </div>
diff --git a/web/components/auth-screens/workspace/not-a-member.tsx b/web/components/auth-screens/workspace/not-a-member.tsx
index 86e522caf..e6ec61c06 100644
--- a/web/components/auth-screens/workspace/not-a-member.tsx
+++ b/web/components/auth-screens/workspace/not-a-member.tsx
@@ -19,7 +19,7 @@ export const NotAWorkspaceMember = () => (
         <div className="flex items-center justify-center gap-2">
           <Link href="/invitations">
             <span>
-              <Button variant="neutral-primary">Check pending invites</Button>
+              <Button variant="outline-neutral">Check pending invites</Button>
             </span>
           </Link>
           <Link href="/create-workspace">
diff --git a/web/components/automation/select-month-modal.tsx b/web/components/automation/select-month-modal.tsx
index 28df69ac2..3686abfa7 100644
--- a/web/components/automation/select-month-modal.tsx
+++ b/web/components/automation/select-month-modal.tsx
@@ -152,7 +152,7 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
diff --git a/web/components/core/filters/date-filter-modal.tsx b/web/components/core/filters/date-filter-modal.tsx
index e408d5532..21cc247f4 100644
--- a/web/components/core/filters/date-filter-modal.tsx
+++ b/web/components/core/filters/date-filter-modal.tsx
@@ -127,7 +127,7 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                     </h6>
                   )}
                   <div className="flex justify-end gap-4">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button
diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx
index 478e9a72e..8acc494be 100644
--- a/web/components/core/image-picker-popover.tsx
+++ b/web/components/core/image-picker-popover.tsx
@@ -339,7 +339,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
 
                     <div className="flex h-12 items-start justify-end gap-2">
                       <Button
-                        variant="neutral-primary"
+                        variant="outline-neutral"
                         onClick={() => {
                           setIsOpen(false);
                           setImage(null);
diff --git a/web/components/core/modals/bulk-delete-issues-modal.tsx b/web/components/core/modals/bulk-delete-issues-modal.tsx
index 9c3de7530..84afdb1ec 100644
--- a/web/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/web/components/core/modals/bulk-delete-issues-modal.tsx
@@ -192,7 +192,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
 
                   {filteredIssues.length > 0 && (
                     <div className="flex items-center justify-end gap-2 p-3">
-                      <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                      <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                         Cancel
                       </Button>
                       <Button variant="danger" size="sm" onClick={handleSubmit(handleDelete)} loading={isSubmitting}>
diff --git a/web/components/core/modals/existing-issues-list-modal.tsx b/web/components/core/modals/existing-issues-list-modal.tsx
index 51e0dadb1..5fdd4831b 100644
--- a/web/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/components/core/modals/existing-issues-list-modal.tsx
@@ -271,7 +271,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                   </Combobox.Options>
                 </Combobox>
                 <div className="flex items-center justify-end gap-2 p-3">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                  <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                     Cancel
                   </Button>
                   {selectedIssues.length > 0 && (
diff --git a/web/components/core/modals/gpt-assistant-popover.tsx b/web/components/core/modals/gpt-assistant-popover.tsx
index d3b9cb13f..fc27b598c 100644
--- a/web/components/core/modals/gpt-assistant-popover.tsx
+++ b/web/components/core/modals/gpt-assistant-popover.tsx
@@ -253,7 +253,7 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
           <div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}>
             {responseActionButton}
             <div className="flex items-center gap-2">
-              <Button variant="neutral-primary" size="sm" onClick={onClose}>
+              <Button variant="outline-neutral" size="sm" onClick={onClose}>
                 Close
               </Button>
               <Button variant="primary" size="sm" onClick={handleSubmit(handleAIResponse)} loading={isSubmitting}>
diff --git a/web/components/core/modals/link-modal.tsx b/web/components/core/modals/link-modal.tsx
index 1593fed3f..f33f73257 100644
--- a/web/components/core/modals/link-modal.tsx
+++ b/web/components/core/modals/link-modal.tsx
@@ -150,7 +150,7 @@ export const LinkModal: FC<Props> = (props) => {
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
diff --git a/web/components/core/modals/user-image-upload-modal.tsx b/web/components/core/modals/user-image-upload-modal.tsx
index 5e0ed48db..f5a2a897a 100644
--- a/web/components/core/modals/user-image-upload-modal.tsx
+++ b/web/components/core/modals/user-image-upload-modal.tsx
@@ -171,7 +171,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
                     </Button>
                   )}
                   <div className="flex items-center gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button
diff --git a/web/components/core/modals/workspace-image-upload-modal.tsx b/web/components/core/modals/workspace-image-upload-modal.tsx
index 39e70cf42..be2aa9ec3 100644
--- a/web/components/core/modals/workspace-image-upload-modal.tsx
+++ b/web/components/core/modals/workspace-image-upload-modal.tsx
@@ -178,7 +178,7 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
                     </Button>
                   )}
                   <div className="flex items-center gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button
diff --git a/web/components/cycles/delete-modal.tsx b/web/components/cycles/delete-modal.tsx
index 32440c52a..6911382cc 100644
--- a/web/components/cycles/delete-modal.tsx
+++ b/web/components/cycles/delete-modal.tsx
@@ -115,7 +115,7 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
                         </p>
                       </span>
                       <div className="flex justify-end gap-2">
-                        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                        <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                           Cancel
                         </Button>
 
diff --git a/web/components/cycles/form.tsx b/web/components/cycles/form.tsx
index 11e9e9eed..30e84c4ab 100644
--- a/web/components/cycles/form.tsx
+++ b/web/components/cycles/form.tsx
@@ -172,7 +172,7 @@ export const CycleForm: React.FC<Props> = (props) => {
         </div>
       </div>
       <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}>
+        <Button variant="outline-neutral" size="sm" onClick={handleClose} tabIndex={5}>
           Cancel
         </Button>
         <Button variant="primary" size="sm" type="submit" loading={isSubmitting} tabIndex={6}>
diff --git a/web/components/dashboard/widgets/issue-panels/issues-list.tsx b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
index 358613ecb..0f10a9649 100644
--- a/web/components/dashboard/widgets/issue-panels/issues-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
@@ -110,10 +110,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
       {issues.length > 0 && (
         <Link
           href={`/${workspaceSlug}/workspace-views/${type}/${filterParams}`}
-          className={cn(
-            getButtonStyling("link-primary", "sm"),
-            "w-min my-3 mx-auto py-1 px-2 text-xs hover:bg-custom-primary-100/20"
-          )}
+          className={cn(getButtonStyling("text-primary", "sm"), "w-min my-3 mx-auto py-1 px-2 text-xs")}
         >
           View all issues
         </Link>
diff --git a/web/components/dashboard/widgets/recent-activity.tsx b/web/components/dashboard/widgets/recent-activity.tsx
index d4e67a22a..91b3bcc25 100644
--- a/web/components/dashboard/widgets/recent-activity.tsx
+++ b/web/components/dashboard/widgets/recent-activity.tsx
@@ -59,7 +59,7 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
                     className="h-full w-full rounded-full object-cover"
                   />
                 ) : (
-                  <div className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white">
+                  <div className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-primary-solid text-xs text-white">
                     {activity.actor_detail.is_bot
                       ? activity.actor_detail.first_name.charAt(0)
                       : activity.actor_detail.display_name.charAt(0)}
diff --git a/web/components/dashboard/widgets/recent-projects.tsx b/web/components/dashboard/widgets/recent-projects.tsx
index 7c1de56d1..5f7f23321 100644
--- a/web/components/dashboard/widgets/recent-projects.tsx
+++ b/web/components/dashboard/widgets/recent-projects.tsx
@@ -45,7 +45,7 @@ const ProjectListItem: React.FC<ProjectListItemProps> = observer((props) => {
         ) : projectDetails.icon_prop ? (
           <div className="grid h-7 w-7 flex-shrink-0 place-items-center">{renderEmoji(projectDetails.icon_prop)}</div>
         ) : (
-          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
             {projectDetails.name.charAt(0)}
           </span>
         )}
diff --git a/web/components/dropdowns/priority.tsx b/web/components/dropdowns/priority.tsx
index e357c3548..665130661 100644
--- a/web/components/dropdowns/priority.tsx
+++ b/web/components/dropdowns/priority.tsx
@@ -56,7 +56,7 @@ const BorderButton = (props: ButtonProps) => {
   const priorityClasses = {
     urgent: "bg-danger-component-surface-dark text-red-950 border-red-500",
     high: "bg-orange-500/20 text-orange-950 border-orange-500",
-    medium: "bg-yellow-500/20 text-yellow-950 border-yellow-500",
+    medium: "bg-warning-component-surface-light text-warning-text-subtle border-yellow-500",
     low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100",
     none: "bg-neutral-component-surface-dark border-neutral-border-medium",
   };
@@ -125,7 +125,7 @@ const BackgroundButton = (props: ButtonProps) => {
   const priorityClasses = {
     urgent: "bg-danger-component-surface-dark text-red-950",
     high: "bg-orange-500/20 text-orange-950",
-    medium: "bg-yellow-500/20 text-yellow-950",
+    medium: "bg-warning-component-surface-light text-warning-text-subtle",
     low: "bg-blue-500/20 text-blue-950",
     none: "bg-neutral-component-surface-dark",
   };
@@ -195,7 +195,7 @@ const TransparentButton = (props: ButtonProps) => {
   const priorityClasses = {
     urgent: "text-red-950",
     high: "text-orange-950",
-    medium: "text-yellow-950",
+    medium: "text-warning-text-subtle",
     low: "text-blue-950",
     none: "",
   };
diff --git a/web/components/empty-state/empty-state.tsx b/web/components/empty-state/empty-state.tsx
index adc11b546..0674b1ebf 100644
--- a/web/components/empty-state/empty-state.tsx
+++ b/web/components/empty-state/empty-state.tsx
@@ -55,7 +55,7 @@ export const EmptyState: React.FC<Props> = ({
   const secondaryButtonElement = secondaryButton && (
     <Button
       size={size === "sm" ? "md" : "lg"}
-      variant="neutral-primary"
+      variant="outline-neutral"
       prependIcon={secondaryButton.icon}
       onClick={secondaryButton.onClick}
       disabled={disabled}
diff --git a/web/components/estimates/create-update-estimate-modal.tsx b/web/components/estimates/create-update-estimate-modal.tsx
index 0187e6003..afb9043b4 100644
--- a/web/components/estimates/create-update-estimate-modal.tsx
+++ b/web/components/estimates/create-update-estimate-modal.tsx
@@ -306,7 +306,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
                       </div>
                     </div>
                     <div className="mt-5 flex justify-end gap-2">
-                      <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                      <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                         Cancel
                       </Button>
                       <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
diff --git a/web/components/estimates/delete-estimate-modal.tsx b/web/components/estimates/delete-estimate-modal.tsx
index e89f44de5..fc44bc4bb 100644
--- a/web/components/estimates/delete-estimate-modal.tsx
+++ b/web/components/estimates/delete-estimate-modal.tsx
@@ -105,7 +105,7 @@ export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button
diff --git a/web/components/estimates/estimate-list-item.tsx b/web/components/estimates/estimate-list-item.tsx
index 5a87a5988..2a5dc5784 100644
--- a/web/components/estimates/estimate-list-item.tsx
+++ b/web/components/estimates/estimate-list-item.tsx
@@ -65,7 +65,7 @@ export const EstimateListItem: React.FC<Props> = observer((props) => {
           </div>
           <div className="flex items-center gap-2">
             {currentProjectDetails?.estimate !== estimate?.id && estimate?.points?.length > 0 && (
-              <Button variant="neutral-primary" onClick={handleUseEstimate} size="sm">
+              <Button variant="outline-neutral" onClick={handleUseEstimate} size="sm">
                 Use
               </Button>
             )}
diff --git a/web/components/estimates/estimates-list.tsx b/web/components/estimates/estimates-list.tsx
index 8cae4cf3f..1ace9ae7b 100644
--- a/web/components/estimates/estimates-list.tsx
+++ b/web/components/estimates/estimates-list.tsx
@@ -87,7 +87,7 @@ export const EstimatesList: React.FC = observer(() => {
               Add Estimate
             </Button>
             {currentProjectDetails?.estimate && (
-              <Button variant="neutral-primary" onClick={disableEstimates} size="sm">
+              <Button variant="outline-neutral" onClick={disableEstimates} size="sm">
                 Disable Estimates
               </Button>
             )}
diff --git a/web/components/exporter/export-modal.tsx b/web/components/exporter/export-modal.tsx
index 8c9a2a207..ac335446a 100644
--- a/web/components/exporter/export-modal.tsx
+++ b/web/components/exporter/export-modal.tsx
@@ -163,7 +163,7 @@ export const Exporter: React.FC<Props> = observer((props) => {
                     <div className="whitespace-nowrap text-sm">Export the data into separate files</div>
                   </div>
                   <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button
diff --git a/web/components/exporter/single-export.tsx b/web/components/exporter/single-export.tsx
index 558489d38..855aa5920 100644
--- a/web/components/exporter/single-export.tsx
+++ b/web/components/exporter/single-export.tsx
@@ -38,7 +38,7 @@ export const SingleExport: FC<Props> = ({ service, refreshing }) => {
               service.status === "completed"
                 ? "bg-success-component-surface-dark text-success-text-medium"
                 : service.status === "processing"
-                ? "bg-yellow-500/20 text-yellow-500"
+                ? "bg-warning-component-surface-light text-warning-text-subtle"
                 : service.status === "failed"
                 ? "bg-danger-component-surface-dark text-danger-text-medium"
                 : service.status === "expired"
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index aee188d04..132a0524c 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -168,7 +168,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                           ) : currentProjectDetails?.icon_prop ? (
                             renderEmoji(currentProjectDetails.icon_prop)
                           ) : (
-                            <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
+                            <span className="flex h-4 w-4 items-center justify-center rounded bg-primary-solid uppercase text-white">
                               {currentProjectDetails?.name.charAt(0)}
                             </span>
                           )
@@ -247,7 +247,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
 
             {canUserCreateIssue && (
               <>
-                <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
+                <Button onClick={() => setAnalyticsModal(true)} variant="outline-neutral" size="sm">
                   Analytics
                 </Button>
                 <Button
diff --git a/web/components/headers/cycles.tsx b/web/components/headers/cycles.tsx
index 94cc0c608..7cd5c7ffc 100644
--- a/web/components/headers/cycles.tsx
+++ b/web/components/headers/cycles.tsx
@@ -63,7 +63,7 @@ export const CyclesHeader: FC = observer(() => {
                       ) : currentProjectDetails?.icon_prop ? (
                         renderEmoji(currentProjectDetails.icon_prop)
                       ) : (
-                        <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
+                        <span className="flex h-4 w-4 items-center justify-center rounded bg-primary-solid uppercase text-white">
                           {currentProjectDetails?.name.charAt(0)}
                         </span>
                       )
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index 38b6aacda..3cd0d6da7 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -171,7 +171,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                           ) : currentProjectDetails?.icon_prop ? (
                             renderEmoji(currentProjectDetails.icon_prop)
                           ) : (
-                            <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                            <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                               {currentProjectDetails?.name.charAt(0)}
                             </span>
                           )
@@ -255,7 +255,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                 <Button
                   className="hidden md:block"
                   onClick={() => setAnalyticsModal(true)}
-                  variant="neutral-primary"
+                  variant="outline-neutral"
                   size="sm"
                 >
                   Analytics
diff --git a/web/components/headers/modules-list.tsx b/web/components/headers/modules-list.tsx
index 55dfd2750..7337980cd 100644
--- a/web/components/headers/modules-list.tsx
+++ b/web/components/headers/modules-list.tsx
@@ -50,7 +50,7 @@ export const ModulesListHeader: React.FC = observer(() => {
                     ) : currentProjectDetails?.icon_prop ? (
                       renderEmoji(currentProjectDetails.icon_prop)
                     ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                         {currentProjectDetails?.name.charAt(0)}
                       </span>
                     )
diff --git a/web/components/headers/page-details.tsx b/web/components/headers/page-details.tsx
index 6361cb4d4..da0a1af0b 100644
--- a/web/components/headers/page-details.tsx
+++ b/web/components/headers/page-details.tsx
@@ -45,7 +45,7 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
                     ) : currentProjectDetails?.icon_prop ? (
                       renderEmoji(currentProjectDetails.icon_prop)
                     ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                         {currentProjectDetails?.name.charAt(0)}
                       </span>
                     )
diff --git a/web/components/headers/pages.tsx b/web/components/headers/pages.tsx
index c82709c16..d76257b09 100644
--- a/web/components/headers/pages.tsx
+++ b/web/components/headers/pages.tsx
@@ -47,7 +47,7 @@ export const PagesHeader = observer(() => {
                     ) : currentProjectDetails?.icon_prop ? (
                       renderEmoji(currentProjectDetails.icon_prop)
                     ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                         {currentProjectDetails?.name.charAt(0)}
                       </span>
                     )
diff --git a/web/components/headers/project-archived-issue-details.tsx b/web/components/headers/project-archived-issue-details.tsx
index c5324b559..4d2e6cbce 100644
--- a/web/components/headers/project-archived-issue-details.tsx
+++ b/web/components/headers/project-archived-issue-details.tsx
@@ -57,7 +57,7 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
                     ) : currentProjectDetails?.icon_prop ? (
                       renderEmoji(currentProjectDetails.icon_prop)
                     ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                         {currentProjectDetails?.name.charAt(0)}
                       </span>
                     )
diff --git a/web/components/headers/project-archived-issues.tsx b/web/components/headers/project-archived-issues.tsx
index a0dd09117..6c36b46f2 100644
--- a/web/components/headers/project-archived-issues.tsx
+++ b/web/components/headers/project-archived-issues.tsx
@@ -96,7 +96,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
                     ) : currentProjectDetails?.icon_prop ? (
                       renderEmoji(currentProjectDetails.icon_prop)
                     ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                         {currentProjectDetails?.name.charAt(0)}
                       </span>
                     )
diff --git a/web/components/headers/project-draft-issues.tsx b/web/components/headers/project-draft-issues.tsx
index 1ff572468..e06c869a2 100644
--- a/web/components/headers/project-draft-issues.tsx
+++ b/web/components/headers/project-draft-issues.tsx
@@ -91,7 +91,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
                     ) : currentProjectDetails?.icon_prop ? (
                       renderEmoji(currentProjectDetails.icon_prop)
                     ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                         {currentProjectDetails?.name.charAt(0)}
                       </span>
                     )
diff --git a/web/components/headers/project-inbox.tsx b/web/components/headers/project-inbox.tsx
index fd5641aa3..2795ae7a2 100644
--- a/web/components/headers/project-inbox.tsx
+++ b/web/components/headers/project-inbox.tsx
@@ -40,7 +40,7 @@ export const ProjectInboxHeader: FC = observer(() => {
                     ) : currentProjectDetails?.icon_prop ? (
                       renderEmoji(currentProjectDetails.icon_prop)
                     ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                         {currentProjectDetails?.name.charAt(0)}
                       </span>
                     )
diff --git a/web/components/headers/project-issue-details.tsx b/web/components/headers/project-issue-details.tsx
index 749a658f9..50c37c449 100644
--- a/web/components/headers/project-issue-details.tsx
+++ b/web/components/headers/project-issue-details.tsx
@@ -51,7 +51,7 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
                     ) : currentProjectDetails?.icon_prop ? (
                       renderEmoji(currentProjectDetails.icon_prop)
                     ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                         {currentProjectDetails?.name.charAt(0)}
                       </span>
                     )
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 70c13ab3e..ac3cf318f 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -138,7 +138,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                               {renderEmoji(currentProjectDetails.icon_prop)}
                             </div>
                           ) : (
-                            <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                            <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                               {currentProjectDetails?.name.charAt(0)}
                             </span>
                           )
@@ -206,7 +206,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
           {currentProjectDetails?.inbox_view && inboxDetails && (
             <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxDetails?.id}`}>
               <span>
-                <Button variant="neutral-primary" size="sm" className="relative">
+                <Button variant="outline-neutral" size="sm" className="relative">
                   Inbox
                   {inboxDetails?.pending_issue_count > 0 && (
                     <span className="absolute -right-1.5 -top-1.5 h-4 w-4 rounded-full border border-sidebar-neutral-border-medium bg-sidebar-neutral-component-surface-dark text-neutral-text-strong">
@@ -222,7 +222,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
               <Button
                 className="hidden md:block"
                 onClick={() => setAnalyticsModal(true)}
-                variant="neutral-primary"
+                variant="outline-neutral"
                 size="sm"
               >
                 Analytics
@@ -234,7 +234,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                 }}
                 size="sm"
                 prependIcon={<Plus />}
-                variant="accent-primary"
+                variant="primary"
               >
                 Add Issue
               </Button>
diff --git a/web/components/headers/project-settings.tsx b/web/components/headers/project-settings.tsx
index 3a575c402..6929f8bae 100644
--- a/web/components/headers/project-settings.tsx
+++ b/web/components/headers/project-settings.tsx
@@ -49,7 +49,7 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
                       ) : currentProjectDetails?.icon_prop ? (
                         renderEmoji(currentProjectDetails.icon_prop)
                       ) : (
-                        <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                        <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                           {currentProjectDetails?.name.charAt(0)}
                         </span>
                       )
diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx
index 7e6cd8f72..2af3f9b04 100644
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@@ -128,7 +128,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
                       {renderEmoji(currentProjectDetails.icon_prop)}
                     </div>
                   ) : (
-                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                       {currentProjectDetails?.name.charAt(0)}
                     </span>
                   )
diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx
index 6d04a8d8d..083a0c21f 100644
--- a/web/components/headers/project-views.tsx
+++ b/web/components/headers/project-views.tsx
@@ -51,7 +51,7 @@ export const ProjectViewsHeader: React.FC = observer(() => {
                           {renderEmoji(currentProjectDetails.icon_prop)}
                         </div>
                       ) : (
-                        <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                        <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                           {currentProjectDetails?.name.charAt(0)}
                         </span>
                       )
diff --git a/web/components/inbox/inbox-issue-actions.tsx b/web/components/inbox/inbox-issue-actions.tsx
index 175a69de3..731045b6f 100644
--- a/web/components/inbox/inbox-issue-actions.tsx
+++ b/web/components/inbox/inbox-issue-actions.tsx
@@ -268,7 +268,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
               <div className="flex-shrink-0">
                 <Popover className="relative">
                   <Popover.Button as="button" type="button">
-                    <Button variant="neutral-primary" prependIcon={<Clock size={14} strokeWidth={2} />} size="sm">
+                    <Button variant="outline-neutral" prependIcon={<Clock size={14} strokeWidth={2} />} size="sm">
                       Snooze
                     </Button>
                   </Popover.Button>
@@ -307,7 +307,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
             {isAllowed && issueStatus.status === -2 && (
               <div className="flex-shrink-0">
                 <Button
-                  variant="neutral-primary"
+                  variant="outline-neutral"
                   size="sm"
                   prependIcon={<FileStack size={14} strokeWidth={2} />}
                   onClick={() => setSelectDuplicateIssue(true)}
@@ -320,7 +320,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
             {isAllowed && (issueStatus.status === 0 || issueStatus.status === -2) && (
               <div className="flex-shrink-0">
                 <Button
-                  variant="neutral-primary"
+                  variant="outline-neutral"
                   size="sm"
                   prependIcon={<CheckCircle2 className="text-success-text-medium" size={14} strokeWidth={2} />}
                   onClick={() => setAcceptIssueModal(true)}
@@ -333,7 +333,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
             {isAllowed && issueStatus.status === -2 && (
               <div className="flex-shrink-0">
                 <Button
-                  variant="neutral-primary"
+                  variant="outline-neutral"
                   size="sm"
                   prependIcon={<XCircle className="text-danger-text-medium" size={14} strokeWidth={2} />}
                   onClick={() => setDeclineIssueModal(true)}
@@ -346,7 +346,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
             {(isAllowed || currentUser?.id === issue?.created_by) && (
               <div className="flex-shrink-0">
                 <Button
-                  variant="neutral-primary"
+                  variant="outline-neutral"
                   size="sm"
                   prependIcon={<Trash2 className="text-danger-text-medium" size={14} strokeWidth={2} />}
                   onClick={() => setDeleteIssueModal(true)}
diff --git a/web/components/inbox/modals/accept-issue-modal.tsx b/web/components/inbox/modals/accept-issue-modal.tsx
index 04d1dd749..babab3bf0 100644
--- a/web/components/inbox/modals/accept-issue-modal.tsx
+++ b/web/components/inbox/modals/accept-issue-modal.tsx
@@ -76,7 +76,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSub
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button variant="primary" size="sm" tabIndex={1} onClick={handleAccept} loading={isAccepting}>
diff --git a/web/components/inbox/modals/create-issue-modal.tsx b/web/components/inbox/modals/create-issue-modal.tsx
index ce52db9cd..949d3f6e4 100644
--- a/web/components/inbox/modals/create-issue-modal.tsx
+++ b/web/components/inbox/modals/create-issue-modal.tsx
@@ -330,7 +330,7 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
                       <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
                     </div>
                     <div className="flex items-center gap-2">
-                      <Button variant="neutral-primary" size="sm" onClick={() => handleClose()}>
+                      <Button variant="outline-neutral" size="sm" onClick={() => handleClose()}>
                         Discard
                       </Button>
                       <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
diff --git a/web/components/inbox/modals/decline-issue-modal.tsx b/web/components/inbox/modals/decline-issue-modal.tsx
index da3329c0b..f7d362d3b 100644
--- a/web/components/inbox/modals/decline-issue-modal.tsx
+++ b/web/components/inbox/modals/decline-issue-modal.tsx
@@ -76,7 +76,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSu
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button variant="danger" size="sm" tabIndex={1} onClick={handleDecline} loading={isDeclining}>
diff --git a/web/components/inbox/modals/delete-issue-modal.tsx b/web/components/inbox/modals/delete-issue-modal.tsx
index 3020b20a0..5b295be63 100644
--- a/web/components/inbox/modals/delete-issue-modal.tsx
+++ b/web/components/inbox/modals/delete-issue-modal.tsx
@@ -79,7 +79,7 @@ export const DeleteInboxIssueModal: React.FC<Props> = observer(({ isOpen, onClos
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button variant="danger" size="sm" tabIndex={1} onClick={handleDelete} loading={isDeleting}>
diff --git a/web/components/inbox/modals/select-duplicate.tsx b/web/components/inbox/modals/select-duplicate.tsx
index 6900c89e2..485db16b3 100644
--- a/web/components/inbox/modals/select-duplicate.tsx
+++ b/web/components/inbox/modals/select-duplicate.tsx
@@ -180,7 +180,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
 
                   {filteredIssues.length > 0 && (
                     <div className="flex items-center justify-end gap-2 p-3">
-                      <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                      <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                         Cancel
                       </Button>
                       <Button variant="primary" size="sm" onClick={handleSubmit}>
diff --git a/web/components/inbox/sidebar/filter/applied-filters.tsx b/web/components/inbox/sidebar/filter/applied-filters.tsx
index d179a3ba2..876a2648a 100644
--- a/web/components/inbox/sidebar/filter/applied-filters.tsx
+++ b/web/components/inbox/sidebar/filter/applied-filters.tsx
@@ -82,7 +82,7 @@ export const InboxIssueAppliedFilter: FC<TInboxIssueAppliedFilter> = observer((p
                               : priority === "high"
                               ? "bg-orange-500/20 text-orange-500"
                               : priority === "medium"
-                              ? "bg-yellow-500/20 text-yellow-500"
+                              ? "bg-warning-component-surface-light text-warning-text-subtle"
                               : priority === "low"
                               ? "bg-success-component-surface-dark text-success-text-medium"
                               : "bg-neutral-component-surface-medium text-neutral-text-medium"
diff --git a/web/components/instance/github-config-form.tsx b/web/components/instance/github-config-form.tsx
index 1ec22c168..4a428cbc2 100644
--- a/web/components/instance/github-config-form.tsx
+++ b/web/components/instance/github-config-form.tsx
@@ -141,7 +141,7 @@ export const InstanceGithubConfigForm: FC<IInstanceGithubConfigForm> = (props) =
         <div className="flex flex-col gap-1">
           <h4 className="text-sm">Origin URL</h4>
           <Button
-            variant="neutral-primary"
+            variant="outline-neutral"
             className="flex items-center justify-between py-2"
             onClick={() => {
               navigator.clipboard.writeText(originURL);
diff --git a/web/components/instance/google-config-form.tsx b/web/components/instance/google-config-form.tsx
index 7a2b1d809..5dfcdf88b 100644
--- a/web/components/instance/google-config-form.tsx
+++ b/web/components/instance/google-config-form.tsx
@@ -90,7 +90,7 @@ export const InstanceGoogleConfigForm: FC<IInstanceGoogleConfigForm> = (props) =
         <div className="flex flex-col gap-1">
           <h4 className="text-sm">JavaScript origin URL</h4>
           <Button
-            variant="neutral-primary"
+            variant="outline-neutral"
             className="flex items-center justify-between py-2"
             onClick={() => {
               navigator.clipboard.writeText(originURL);
diff --git a/web/components/integration/delete-import-modal.tsx b/web/components/integration/delete-import-modal.tsx
index fd03e1f8b..cec6d6460 100644
--- a/web/components/integration/delete-import-modal.tsx
+++ b/web/components/integration/delete-import-modal.tsx
@@ -129,7 +129,7 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data }
                     />
                   </div>
                   <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button
diff --git a/web/components/integration/github/import-confirm.tsx b/web/components/integration/github/import-confirm.tsx
index d5cd17b89..eb414df10 100644
--- a/web/components/integration/github/import-confirm.tsx
+++ b/web/components/integration/github/import-confirm.tsx
@@ -19,7 +19,7 @@ export const GithubImportConfirm: FC<Props> = ({ handleStepChange, watch }) => (
       to complete the process.
     </h4>
     <div className="mt-6 flex items-center justify-between">
-      <Button variant="neutral-primary" onClick={() => handleStepChange("import-users")}>
+      <Button variant="outline-neutral" onClick={() => handleStepChange("import-users")}>
         Back
       </Button>
       <Button variant="primary" type="submit">
diff --git a/web/components/integration/github/import-data.tsx b/web/components/integration/github/import-data.tsx
index f246cbbfa..a3d273404 100644
--- a/web/components/integration/github/import-data.tsx
+++ b/web/components/integration/github/import-data.tsx
@@ -110,7 +110,7 @@ export const GithubImportData: FC<Props> = observer((props) => {
         </div>
       </div>
       <div className="mt-6 flex items-center justify-end gap-2">
-        <Button variant="neutral-primary" onClick={() => handleStepChange("import-configure")}>
+        <Button variant="outline-neutral" onClick={() => handleStepChange("import-configure")}>
           Back
         </Button>
         <Button
diff --git a/web/components/integration/github/import-users.tsx b/web/components/integration/github/import-users.tsx
index 8fd39c668..ee903abfe 100644
--- a/web/components/integration/github/import-users.tsx
+++ b/web/components/integration/github/import-users.tsx
@@ -38,7 +38,7 @@ export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers
         </div>
       </div>
       <div className="mt-6 flex items-center justify-end gap-2">
-        <Button variant="neutral-primary" onClick={() => handleStepChange("repo-details")}>
+        <Button variant="outline-neutral" onClick={() => handleStepChange("repo-details")}>
           Back
         </Button>
         <Button variant="primary" onClick={() => handleStepChange("import-confirm")} disabled={isInvalid}>
diff --git a/web/components/integration/github/repo-details.tsx b/web/components/integration/github/repo-details.tsx
index 226a9cff3..93e811389 100644
--- a/web/components/integration/github/repo-details.tsx
+++ b/web/components/integration/github/repo-details.tsx
@@ -88,7 +88,7 @@ export const GithubRepoDetails: FC<Props> = ({ selectedRepo, handleStepChange, s
         </Loader>
       )}
       <div className="mt-6 flex items-center justify-end gap-2">
-        <Button variant="neutral-primary" onClick={() => handleStepChange("import-data")}>
+        <Button variant="outline-neutral" onClick={() => handleStepChange("import-data")}>
           Back
         </Button>
         <Button
diff --git a/web/components/integration/jira/root.tsx b/web/components/integration/jira/root.tsx
index ec9650791..bade6f86e 100644
--- a/web/components/integration/jira/root.tsx
+++ b/web/components/integration/jira/root.tsx
@@ -167,7 +167,7 @@ export const JiraImporterRoot: React.FC = () => {
               <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"
+                    variant="outline-neutral"
                     onClick={() => {
                       const currentElementIndex = integrationWorkflowData.findIndex(
                         (i) => i?.key === currentStep?.state
diff --git a/web/components/integration/single-import.tsx b/web/components/integration/single-import.tsx
index f2f6e9106..eae102e60 100644
--- a/web/components/integration/single-import.tsx
+++ b/web/components/integration/single-import.tsx
@@ -29,7 +29,7 @@ export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelet
             service.status === "completed"
               ? "bg-success-component-surface-dark text-success-text-medium"
               : service.status === "processing"
-              ? "bg-yellow-500/20 text-yellow-500"
+              ? "bg-warning-component-surface-light text-warning-text-subtle"
               : service.status === "failed"
               ? "bg-danger-component-surface-dark text-danger-text-medium"
               : ""
diff --git a/web/components/integration/slack/select-channel.tsx b/web/components/integration/slack/select-channel.tsx
index 57fb82319..2024b76d9 100644
--- a/web/components/integration/slack/select-channel.tsx
+++ b/web/components/integration/slack/select-channel.tsx
@@ -89,7 +89,7 @@ export const SelectChannel: React.FC<Props> = observer(({ integration }) => {
       {projectIntegration ? (
         <button
           type="button"
-          className={`relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-700 transition-colors duration-200 ease-in-out focus:outline-none`}
+          className={`relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-primary-solid transition-colors duration-200 ease-in-out focus:outline-none`}
           role="switch"
           aria-checked
           onClick={() => {
diff --git a/web/components/issues/attachment/delete-attachment-confirmation-modal.tsx b/web/components/issues/attachment/delete-attachment-confirmation-modal.tsx
index e015bfe09..f709d1713 100644
--- a/web/components/issues/attachment/delete-attachment-confirmation-modal.tsx
+++ b/web/components/issues/attachment/delete-attachment-confirmation-modal.tsx
@@ -82,7 +82,7 @@ export const IssueAttachmentDeleteModal: FC<Props> = (props) => {
                     </div>
                   </div>
                   <div className="flex justify-end gap-2 p-4 sm:px-6">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button
diff --git a/web/components/issues/confirm-issue-discard.tsx b/web/components/issues/confirm-issue-discard.tsx
index bbc053899..6611c1fda 100644
--- a/web/components/issues/confirm-issue-discard.tsx
+++ b/web/components/issues/confirm-issue-discard.tsx
@@ -69,12 +69,12 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
                 </div>
                 <div className="flex justify-between gap-2 p-4 sm:px-6">
                   <div>
-                    <Button variant="neutral-primary" size="sm" onClick={onDiscard}>
+                    <Button variant="outline-neutral" size="sm" onClick={onDiscard}>
                       Discard
                     </Button>
                   </div>
                   <div className="flex items-center gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button variant="primary" size="sm" onClick={handleDeletion} loading={isLoading}>
diff --git a/web/components/issues/delete-archived-issue-modal.tsx b/web/components/issues/delete-archived-issue-modal.tsx
index 9a9773594..1c94831d9 100644
--- a/web/components/issues/delete-archived-issue-modal.tsx
+++ b/web/components/issues/delete-archived-issue-modal.tsx
@@ -115,7 +115,7 @@ export const DeleteArchivedIssueModal: React.FC<Props> = observer((props) => {
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button
diff --git a/web/components/issues/delete-draft-issue-modal.tsx b/web/components/issues/delete-draft-issue-modal.tsx
index 2f39aa482..7605d409a 100644
--- a/web/components/issues/delete-draft-issue-modal.tsx
+++ b/web/components/issues/delete-draft-issue-modal.tsx
@@ -120,7 +120,7 @@ export const DeleteDraftIssueModal: React.FC<Props> = (props) => {
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
diff --git a/web/components/issues/delete-issue-modal.tsx b/web/components/issues/delete-issue-modal.tsx
index 2e0c79a0e..fc19ba399 100644
--- a/web/components/issues/delete-issue-modal.tsx
+++ b/web/components/issues/delete-issue-modal.tsx
@@ -106,7 +106,7 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button
diff --git a/web/components/issues/draft-issue-form.tsx b/web/components/issues/draft-issue-form.tsx
index cba737b0f..881783338 100644
--- a/web/components/issues/draft-issue-form.tsx
+++ b/web/components/issues/draft-issue-form.tsx
@@ -637,11 +637,11 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
             <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
           </div>
           <div className="flex items-center gap-2">
-            <Button variant="neutral-primary" size="sm" onClick={handleDiscard}>
+            <Button variant="outline-neutral" size="sm" onClick={handleDiscard}>
               Discard
             </Button>
             <Button
-              variant="neutral-primary"
+              variant="outline-neutral"
               size="sm"
               loading={isSubmitting}
               onClick={handleSubmit((formData) =>
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 a00eac121..fdc073dea 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
@@ -25,7 +25,7 @@ export const IssueCommentBlock: FC<TIssueCommentBlock> = (props) => {
   return (
     <div className={`relative flex gap-3 ${ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`}`}>
       <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-neutral-component-surface-dark" aria-hidden={true} />
-      <div className="flex-shrink-0 relative w-7 h-7 rounded-full flex justify-center items-center z-10 bg-gray-500 text-white border border-white uppercase font-medium">
+      <div className="flex-shrink-0 relative w-7 h-7 rounded-full flex justify-center items-center z-10 bg-primary-solid text-white border border-white uppercase font-medium">
         {comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? (
           <img
             src={comment.actor_detail.avatar}
diff --git a/web/components/issues/issue-detail/links/create-update-link-modal.tsx b/web/components/issues/issue-detail/links/create-update-link-modal.tsx
index ccaf4c2c7..3f3d3f860 100644
--- a/web/components/issues/issue-detail/links/create-update-link-modal.tsx
+++ b/web/components/issues/issue-detail/links/create-update-link-modal.tsx
@@ -143,7 +143,7 @@ export const IssueLinkCreateUpdateModal: FC<TIssueLinkCreateEditModal> = (props)
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
diff --git a/web/components/issues/issue-layouts/empty-states/cycle.tsx b/web/components/issues/issue-layouts/empty-states/cycle.tsx
index 02bdf6820..a1d9fa1ca 100644
--- a/web/components/issues/issue-layouts/empty-states/cycle.tsx
+++ b/web/components/issues/issue-layouts/empty-states/cycle.tsx
@@ -87,7 +87,7 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
           }}
           secondaryButton={
             <Button
-              variant="neutral-primary"
+              variant="outline-neutral"
               prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
               onClick={() => setCycleIssuesListModal(true)}
               disabled={!isEditingAllowed}
diff --git a/web/components/issues/issue-layouts/empty-states/module.tsx b/web/components/issues/issue-layouts/empty-states/module.tsx
index c656bd622..db8db8383 100644
--- a/web/components/issues/issue-layouts/empty-states/module.tsx
+++ b/web/components/issues/issue-layouts/empty-states/module.tsx
@@ -82,7 +82,7 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
           }}
           secondaryButton={
             <Button
-              variant="neutral-primary"
+              variant="outline-neutral"
               prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
               onClick={() => setModuleIssuesListModal(true)}
               disabled={!isEditingAllowed}
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx
index 9a2d37fc8..e97d76892 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx
@@ -33,7 +33,7 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
             ) : projectDetails.icon_prop ? (
               <div className="-my-1 grid flex-shrink-0 place-items-center">{renderEmoji(projectDetails.icon_prop)}</div>
             ) : (
-              <span className="mr-1 grid flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+              <span className="mr-1 grid flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                 {projectDetails?.name.charAt(0)}
               </span>
             )}
diff --git a/web/components/issues/issue-layouts/filters/header/filters/project.tsx b/web/components/issues/issue-layouts/filters/header/filters/project.tsx
index 2535e1c0e..bb2447a39 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/project.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/project.tsx
@@ -61,7 +61,7 @@ export const FilterProjects: React.FC<Props> = observer((props) => {
                           {renderEmoji(project.icon_prop)}
                         </div>
                       ) : (
-                        <span className="mr-1 grid flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                        <span className="mr-1 grid flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                           {project?.name.charAt(0)}
                         </span>
                       )
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 cc0733f44..f33f6807c 100644
--- a/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
+++ b/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -42,7 +42,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
                 <Button
                   disabled={disabled}
                   ref={setReferenceElement}
-                  variant="neutral-primary"
+                  variant="outline-neutral"
                   size="sm"
                   appendIcon={
                     <ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} />
diff --git a/web/components/issues/issue-modal/form.tsx b/web/components/issues/issue-modal/form.tsx
index c1d08db84..e035778d6 100644
--- a/web/components/issues/issue-modal/form.tsx
+++ b/web/components/issues/issue-modal/form.tsx
@@ -669,7 +669,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
             <span className="text-xs">Create more</span>
           </div>
           <div className="flex items-center gap-2">
-            <Button variant="neutral-primary" size="sm" onClick={onClose} tabIndex={17}>
+            <Button variant="outline-neutral" size="sm" onClick={onClose} tabIndex={17}>
               Discard
             </Button>
 
@@ -677,7 +677,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
               <Fragment>
                 {data?.id ? (
                   <Button
-                    variant="neutral-primary"
+                    variant="outline-neutral"
                     size="sm"
                     loading={isSubmitting}
                     onClick={handleSubmit((data) => handleFormSubmit({ ...data, is_draft: false }))}
@@ -687,7 +687,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                   </Button>
                 ) : (
                   <Button
-                    variant="neutral-primary"
+                    variant="outline-neutral"
                     size="sm"
                     loading={isSubmitting}
                     onClick={handleSubmit((data) => handleFormSubmit(data, true))}
diff --git a/web/components/labels/create-label-modal.tsx b/web/components/labels/create-label-modal.tsx
index b270f54b6..7c5e0890d 100644
--- a/web/components/labels/create-label-modal.tsx
+++ b/web/components/labels/create-label-modal.tsx
@@ -196,7 +196,7 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
diff --git a/web/components/labels/create-update-label-inline.tsx b/web/components/labels/create-update-label-inline.tsx
index 371b8d1e2..997c3c5fa 100644
--- a/web/components/labels/create-update-label-inline.tsx
+++ b/web/components/labels/create-update-label-inline.tsx
@@ -193,7 +193,7 @@ export const CreateUpdateLabelInline = observer(
             )}
           />
         </div>
-        <Button variant="neutral-primary" onClick={() => handleClose()} size="sm">
+        <Button variant="outline-neutral" onClick={() => handleClose()} size="sm">
           Cancel
         </Button>
         <Button variant="primary" type="submit" size="sm" loading={isSubmitting}>
diff --git a/web/components/labels/delete-label-modal.tsx b/web/components/labels/delete-label-modal.tsx
index 17e31538f..8ad8e3b0a 100644
--- a/web/components/labels/delete-label-modal.tsx
+++ b/web/components/labels/delete-label-modal.tsx
@@ -104,7 +104,7 @@ export const DeleteLabelModal: React.FC<Props> = observer((props) => {
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                  <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
diff --git a/web/components/modules/delete-module-modal.tsx b/web/components/modules/delete-module-modal.tsx
index df3ad1a2f..21d7d76fa 100644
--- a/web/components/modules/delete-module-modal.tsx
+++ b/web/components/modules/delete-module-modal.tsx
@@ -118,7 +118,7 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                  <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
diff --git a/web/components/modules/form.tsx b/web/components/modules/form.tsx
index f12540466..288702cd4 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 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}>
+        <Button variant="outline-neutral" size="sm" onClick={handleClose} tabIndex={8}>
           Cancel
         </Button>
         <Button variant="primary" size="sm" type="submit" loading={isSubmitting} tabIndex={9}>
diff --git a/web/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx
index bf4708e62..4f09beb6c 100644
--- a/web/components/notifications/notification-popover.tsx
+++ b/web/components/notifications/notification-popover.tsx
@@ -13,6 +13,7 @@ import { Loader, Tooltip } from "@plane/ui";
 import emptyNotification from "public/empty-state/notification.svg";
 // helpers
 import { getNumberCount } from "helpers/string.helper";
+import { cn } from "helpers/common.helper";
 
 export const NotificationPopover = observer(() => {
   // store hooks
@@ -66,19 +67,22 @@ export const NotificationPopover = observer(() => {
             <>
               <Tooltip tooltipContent="Notifications" position="right" className="ml-2" disabled={!isSidebarCollapsed}>
                 <Popover.Button
-                  className={`group relative flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
-                    isActive
-                      ? "bg-custom-primary-100/10 text-primary-text-subtle"
-                      : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark"
-                  } ${isSidebarCollapsed ? "justify-center" : ""}`}
+                  className={cn(
+                    "group relative flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none",
+                    {
+                      "bg-primary-component-surface-light text-primary-text-subtle": isActive,
+                      "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark": !isActive,
+                      "justify-center": isSidebarCollapsed,
+                    }
+                  )}
                 >
                   <Bell className="h-4 w-4" />
                   {isSidebarCollapsed ? null : <span>Notifications</span>}
                   {totalNotificationCount && totalNotificationCount > 0 ? (
                     isSidebarCollapsed ? (
-                      <span className="absolute right-3.5 top-2 h-2 w-2 rounded-full bg-custom-primary-300" />
+                      <span className="absolute right-3.5 top-2 h-2 w-2 rounded-full bg-primary-component-surface-medium" />
                     ) : (
-                      <span className="ml-auto rounded-full bg-custom-primary-300 px-1.5 text-xs text-white">
+                      <span className="ml-auto rounded-full bg-primary-component-surface-medium px-1.5 text-xs text-white">
                         {getNumberCount(totalNotificationCount)}
                       </span>
                     )
diff --git a/web/components/notifications/select-snooze-till-modal.tsx b/web/components/notifications/select-snooze-till-modal.tsx
index 8f06341a0..d35947a83 100644
--- a/web/components/notifications/select-snooze-till-modal.tsx
+++ b/web/components/notifications/select-snooze-till-modal.tsx
@@ -250,7 +250,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
 
                   <div className="mt-5 flex items-center justify-between gap-2">
                     <div className="flex w-full items-center justify-end gap-2">
-                      <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                      <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                         Cancel
                       </Button>
                       <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
diff --git a/web/components/onboarding/invitations.tsx b/web/components/onboarding/invitations.tsx
index c48912f69..24cb595ff 100644
--- a/web/components/onboarding/invitations.tsx
+++ b/web/components/onboarding/invitations.tsx
@@ -107,7 +107,7 @@ export const Invitations: React.FC<Props> = (props) => {
                           alt={invitedWorkspace.name}
                         />
                       ) : (
-                        <span className="grid h-9 w-9 place-items-center rounded bg-gray-700 px-3 py-1.5 uppercase text-white">
+                        <span className="grid h-9 w-9 place-items-center rounded bg-primary-solid px-3 py-1.5 uppercase text-white">
                           {invitedWorkspace?.name[0]}
                         </span>
                       )}
diff --git a/web/components/onboarding/tour/root.tsx b/web/components/onboarding/tour/root.tsx
index 901a089c2..487b0412e 100644
--- a/web/components/onboarding/tour/root.tsx
+++ b/web/components/onboarding/tour/root.tsx
@@ -142,7 +142,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
               <div className="mt-3 flex h-full items-end justify-between gap-4">
                 <div className="flex items-center gap-4">
                   {currentStep?.prevStep && (
-                    <Button variant="neutral-primary" onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
+                    <Button variant="outline-neutral" onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
                       Back
                     </Button>
                   )}
diff --git a/web/components/pages/delete-page-modal.tsx b/web/components/pages/delete-page-modal.tsx
index 7fb7f5d81..215f2e246 100644
--- a/web/components/pages/delete-page-modal.tsx
+++ b/web/components/pages/delete-page-modal.tsx
@@ -115,7 +115,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                  <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" size="sm" tabIndex={1} onClick={handleDelete} loading={isDeleting}>
diff --git a/web/components/pages/page-form.tsx b/web/components/pages/page-form.tsx
index 079c13c70..895b8d0db 100644
--- a/web/components/pages/page-form.tsx
+++ b/web/components/pages/page-form.tsx
@@ -103,7 +103,7 @@ export const PageForm: React.FC<Props> = (props) => {
           )}
         />
         <div className="flex items-center gap-2">
-          <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={4}>
+          <Button variant="outline-neutral" size="sm" onClick={handleClose} tabIndex={4}>
             Cancel
           </Button>
           <Button variant="primary" size="sm" type="submit" loading={isSubmitting} tabIndex={5}>
diff --git a/web/components/profile/overview/activity.tsx b/web/components/profile/overview/activity.tsx
index 0ca29b337..9ac0e713d 100644
--- a/web/components/profile/overview/activity.tsx
+++ b/web/components/profile/overview/activity.tsx
@@ -52,7 +52,7 @@ export const ProfileActivity = observer(() => {
                         className="rounded"
                       />
                     ) : (
-                      <div className="grid h-6 w-6 place-items-center rounded border-2 bg-gray-700 text-xs text-white">
+                      <div className="grid h-6 w-6 place-items-center rounded border-2 bg-primary-solid text-xs text-white">
                         {activity.actor_detail.display_name?.charAt(0)}
                       </div>
                     )}
diff --git a/web/components/profile/sidebar.tsx b/web/components/profile/sidebar.tsx
index 4207a12ac..361dea03d 100644
--- a/web/components/profile/sidebar.tsx
+++ b/web/components/profile/sidebar.tsx
@@ -166,7 +166,7 @@ export const ProfileSidebar = observer(() => {
                                     completedIssuePercentage <= 35
                                       ? "bg-danger-component-surface-medium text-danger-text-medium"
                                       : completedIssuePercentage <= 70
-                                      ? "bg-yellow-500/10 text-yellow-500"
+                                      ? "bg-warning-component-surface-light text-warning-text-subtle"
                                       : "bg-success-component-surface-medium text-success-text-medium"
                                   }`}
                                 >
diff --git a/web/components/project/card.tsx b/web/components/project/card.tsx
index ed7520e3d..7c93fd5b1 100644
--- a/web/components/project/card.tsx
+++ b/web/components/project/card.tsx
@@ -210,7 +210,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
             {!project.is_member ? (
               <div className="flex items-center">
                 <Button
-                  variant="link-primary"
+                  variant="text-primary"
                   className="!p-0 font-semibold"
                   onClick={(e) => {
                     e.preventDefault();
diff --git a/web/components/project/confirm-project-member-remove.tsx b/web/components/project/confirm-project-member-remove.tsx
index 76fe8a434..5a430e8cb 100644
--- a/web/components/project/confirm-project-member-remove.tsx
+++ b/web/components/project/confirm-project-member-remove.tsx
@@ -85,7 +85,7 @@ export const ConfirmProjectMemberRemove: React.FC<Props> = observer((props) => {
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                  <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index 5cda3a778..73e161a3b 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -407,7 +407,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                   </div>
 
                   <div className="flex justify-end gap-2 pt-5">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={6}>
+                    <Button variant="outline-neutral" size="sm" onClick={handleClose} tabIndex={6}>
                       Cancel
                     </Button>
                     <Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={7}>
diff --git a/web/components/project/delete-project-modal.tsx b/web/components/project/delete-project-modal.tsx
index fc55829f3..da344dfd4 100644
--- a/web/components/project/delete-project-modal.tsx
+++ b/web/components/project/delete-project-modal.tsx
@@ -186,7 +186,7 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
                     />
                   </div>
                   <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button variant="danger" size="sm" type="submit" disabled={!canDelete} loading={isSubmitting}>
diff --git a/web/components/project/join-project-modal.tsx b/web/components/project/join-project-modal.tsx
index dc73c13ac..e56763cfd 100644
--- a/web/components/project/join-project-modal.tsx
+++ b/web/components/project/join-project-modal.tsx
@@ -81,7 +81,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
                   <div className="space-y-3" />
                 </div>
                 <div className="mt-5 flex justify-end gap-2">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                  <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button
diff --git a/web/components/project/leave-project-modal.tsx b/web/components/project/leave-project-modal.tsx
index 2fb2b907b..a11623131 100644
--- a/web/components/project/leave-project-modal.tsx
+++ b/web/components/project/leave-project-modal.tsx
@@ -196,7 +196,7 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
                     />
                   </div>
                   <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button variant="danger" size="sm" type="submit" loading={isSubmitting}>
diff --git a/web/components/project/member-list-item.tsx b/web/components/project/member-list-item.tsx
index 3eab28113..9fe4f4dfd 100644
--- a/web/components/project/member-list-item.tsx
+++ b/web/components/project/member-list-item.tsx
@@ -94,7 +94,7 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
             </Link>
           ) : (
             <Link href={`/${workspaceSlug}/profile/${userDetails.id}`}>
-              <span className="relative flex h-10 w-10 items-center justify-center rounded bg-gray-700 p-4 capitalize text-white">
+              <span className="relative flex h-10 w-10 items-center justify-center rounded bg-primary-solid p-4 capitalize text-white">
                 {(userDetails.member.display_name ?? userDetails.member.email ?? "?")[0]}
               </span>
             </Link>
diff --git a/web/components/project/publish-project/modal.tsx b/web/components/project/publish-project/modal.tsx
index 957f7719d..2e4cdeeb0 100644
--- a/web/components/project/publish-project/modal.tsx
+++ b/web/components/project/publish-project/modal.tsx
@@ -463,7 +463,7 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
                     </div>
                     {!fetchSettingsLoader && (
                       <div className="relative flex items-center gap-2">
-                        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                        <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                           Cancel
                         </Button>
                         {project.is_deployed ? (
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index 52cd06918..5f343b518 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -311,7 +311,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                       Add more
                     </button>
                     <div className="flex items-center gap-2">
-                      <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                      <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                         Cancel
                       </Button>
                       <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
index 291277315..437ef96ee 100644
--- a/web/components/project/sidebar-list-item.tsx
+++ b/web/components/project/sidebar-list-item.tsx
@@ -191,7 +191,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                         {renderEmoji(project.icon_prop)}
                       </div>
                     ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-primary-solid uppercase text-white">
                         {project?.name.charAt(0)}
                       </span>
                     )}
diff --git a/web/components/states/create-state-modal.tsx b/web/components/states/create-state-modal.tsx
index cea59a25d..03c3eef77 100644
--- a/web/components/states/create-state-modal.tsx
+++ b/web/components/states/create-state-modal.tsx
@@ -243,7 +243,7 @@ export const CreateStateModal: React.FC<Props> = observer((props) => {
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={onClose}>
                       Cancel
                     </Button>
                     <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
diff --git a/web/components/states/create-update-state-inline.tsx b/web/components/states/create-update-state-inline.tsx
index 8851daa58..99f2bcb48 100644
--- a/web/components/states/create-update-state-inline.tsx
+++ b/web/components/states/create-update-state-inline.tsx
@@ -260,7 +260,7 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
           />
         )}
       />
-      <Button variant="neutral-primary" onClick={handleClose} size="sm">
+      <Button variant="outline-neutral" onClick={handleClose} size="sm">
         Cancel
       </Button>
       <Button
diff --git a/web/components/states/delete-state-modal.tsx b/web/components/states/delete-state-modal.tsx
index 734941c32..90c6cea05 100644
--- a/web/components/states/delete-state-modal.tsx
+++ b/web/components/states/delete-state-modal.tsx
@@ -117,7 +117,7 @@ export const DeleteStateModal: React.FC<Props> = observer((props) => {
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 bg-neutral-component-surface-light p-4 sm:px-6">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                  <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
diff --git a/web/components/views/delete-view-modal.tsx b/web/components/views/delete-view-modal.tsx
index 33e75701c..78db311c6 100644
--- a/web/components/views/delete-view-modal.tsx
+++ b/web/components/views/delete-view-modal.tsx
@@ -108,7 +108,7 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                  <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeleteView}>
diff --git a/web/components/views/form.tsx b/web/components/views/form.tsx
index 4fe4df970..998a01882 100644
--- a/web/components/views/form.tsx
+++ b/web/components/views/form.tsx
@@ -203,7 +203,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
         </div>
       </div>
       <div className="mt-5 flex justify-end gap-2">
-        <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={4}>
+        <Button variant="outline-neutral" size="sm" onClick={handleClose} tabIndex={4}>
           Cancel
         </Button>
         <Button variant="primary" size="sm" type="submit" tabIndex={5} disabled={isSubmitting}>
diff --git a/web/components/web-hooks/delete-webhook-modal.tsx b/web/components/web-hooks/delete-webhook-modal.tsx
index db0d9e7f8..3800c404d 100644
--- a/web/components/web-hooks/delete-webhook-modal.tsx
+++ b/web/components/web-hooks/delete-webhook-modal.tsx
@@ -96,7 +96,7 @@ export const DeleteWebhookModal: FC<IDeleteWebhook> = (props) => {
                 </p>
 
                 <div className="flex justify-end gap-2">
-                  <Button variant="neutral-primary" onClick={onClose}>
+                  <Button variant="outline-neutral" onClick={onClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" onClick={handleDelete} loading={isDeleting}>
diff --git a/web/components/web-hooks/form/form.tsx b/web/components/web-hooks/form/form.tsx
index 4b49274b2..f10322ccc 100644
--- a/web/components/web-hooks/form/form.tsx
+++ b/web/components/web-hooks/form/form.tsx
@@ -93,7 +93,7 @@ export const WebhookForm: FC<Props> = observer((props) => {
           </div>
         ) : (
           <div className="mt-4 flex justify-end gap-2">
-            <Button variant="neutral-primary" onClick={handleClose}>
+            <Button variant="outline-neutral" onClick={handleClose}>
               Discard
             </Button>
             {!webhookSecretKey && (
diff --git a/web/components/web-hooks/form/secret-key.tsx b/web/components/web-hooks/form/secret-key.tsx
index 92eeab70f..013332a72 100644
--- a/web/components/web-hooks/form/secret-key.tsx
+++ b/web/components/web-hooks/form/secret-key.tsx
@@ -120,7 +120,7 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
             </div>
             {data && (
               <div>
-                <Button onClick={handleRegenerateSecretKey} variant="accent-primary" loading={isRegenerating}>
+                <Button onClick={handleRegenerateSecretKey} variant="surface-primary" loading={isRegenerating}>
                   <RefreshCw className="h-3 w-3" />
                   {isRegenerating ? "Re-generating..." : "Re-generate key"}
                 </Button>
diff --git a/web/components/web-hooks/generated-hook-details.tsx b/web/components/web-hooks/generated-hook-details.tsx
index 30a4d03e4..7d8d946bd 100644
--- a/web/components/web-hooks/generated-hook-details.tsx
+++ b/web/components/web-hooks/generated-hook-details.tsx
@@ -24,7 +24,7 @@ export const GeneratedHookDetails: React.FC<Props> = (props) => {
       </div>
       <WebhookSecretKey data={webhookDetails} />
       <div className="mt-6 flex justify-end">
-        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+        <Button variant="outline-neutral" size="sm" onClick={handleClose}>
           Close
         </Button>
       </div>
diff --git a/web/components/workspace/confirm-workspace-member-remove.tsx b/web/components/workspace/confirm-workspace-member-remove.tsx
index f530a1c28..1f23935d4 100644
--- a/web/components/workspace/confirm-workspace-member-remove.tsx
+++ b/web/components/workspace/confirm-workspace-member-remove.tsx
@@ -93,7 +93,7 @@ export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) =>
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                  <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
diff --git a/web/components/workspace/create-workspace-form.tsx b/web/components/workspace/create-workspace-form.tsx
index b37c19154..f31dda0a4 100644
--- a/web/components/workspace/create-workspace-form.tsx
+++ b/web/components/workspace/create-workspace-form.tsx
@@ -224,7 +224,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
           {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
         </Button>
         {!secondaryButton && (
-          <Button variant="neutral-primary" type="button" size="md" onClick={() => router.back()}>
+          <Button variant="outline-neutral" type="button" size="md" onClick={() => router.back()}>
             Go back
           </Button>
         )}
diff --git a/web/components/workspace/delete-workspace-modal.tsx b/web/components/workspace/delete-workspace-modal.tsx
index 0121c92dc..1a4bc2935 100644
--- a/web/components/workspace/delete-workspace-modal.tsx
+++ b/web/components/workspace/delete-workspace-modal.tsx
@@ -177,7 +177,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
                   </div>
 
                   <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                    <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                       Cancel
                     </Button>
                     <Button variant="danger" size="sm" type="submit" disabled={!canDelete} loading={isSubmitting}>
diff --git a/web/components/workspace/send-workspace-invitation-modal.tsx b/web/components/workspace/send-workspace-invitation-modal.tsx
index 0250bbee5..509b0a7d2 100644
--- a/web/components/workspace/send-workspace-invitation-modal.tsx
+++ b/web/components/workspace/send-workspace-invitation-modal.tsx
@@ -204,7 +204,7 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
                       Add more
                     </button>
                     <div className="flex items-center gap-2">
-                      <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                      <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                         Cancel
                       </Button>
                       <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
diff --git a/web/components/workspace/settings/invitations-list-item.tsx b/web/components/workspace/settings/invitations-list-item.tsx
index 2926d4ebd..2f97d1f38 100644
--- a/web/components/workspace/settings/invitations-list-item.tsx
+++ b/web/components/workspace/settings/invitations-list-item.tsx
@@ -81,7 +81,7 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
       />
       <div className="group flex items-center justify-between px-3 py-4 hover:bg-neutral-component-surface-medium">
         <div className="flex items-center gap-x-4 gap-y-2">
-          <span className="relative flex h-10 w-10 items-center justify-center rounded bg-gray-700 p-4 capitalize text-white">
+          <span className="relative flex h-10 w-10 items-center justify-center rounded bg-primary-solid p-4 capitalize text-white">
             {(invitationDetails.email ?? "?")[0]}
           </span>
           <div>
@@ -89,7 +89,7 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
           </div>
         </div>
         <div className="flex items-center gap-2 text-xs">
-          <div className="flex items-center justify-center rounded bg-yellow-500/20 px-2.5 py-1 text-center text-xs font-medium text-yellow-500">
+          <div className="flex items-center justify-center rounded bg-warning-component-surface-light px-2.5 py-1 text-center text-xs font-medium text-warning-text-subtle">
             <p>Pending</p>
           </div>
           <CustomSelect
diff --git a/web/components/workspace/settings/members-list-item.tsx b/web/components/workspace/settings/members-list-item.tsx
index 0996f1200..8d50f87bc 100644
--- a/web/components/workspace/settings/members-list-item.tsx
+++ b/web/components/workspace/settings/members-list-item.tsx
@@ -110,7 +110,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
             </Link>
           ) : (
             <Link href={`/${workspaceSlug}/profile/${memberDetails.member.id}`}>
-              <span className="relative flex h-10 w-10 items-center justify-center rounded bg-gray-700 p-4 capitalize text-white">
+              <span className="relative flex h-10 w-10 items-center justify-center rounded bg-primary-solid p-4 capitalize text-white">
                 {(memberDetails.member.email ?? memberDetails.member.display_name ?? "?")[0]}
               </span>
             </Link>
diff --git a/web/components/workspace/settings/workspace-details.tsx b/web/components/workspace/settings/workspace-details.tsx
index 06949f28e..2ec5cb365 100644
--- a/web/components/workspace/settings/workspace-details.tsx
+++ b/web/components/workspace/settings/workspace-details.tsx
@@ -181,7 +181,7 @@ export const WorkspaceDetails: FC = observer(() => {
                   />
                 </div>
               ) : (
-                <div className="relative flex h-14 w-14 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
+                <div className="relative flex h-14 w-14 items-center justify-center rounded bg-primary-solid p-4 uppercase text-white">
                   {currentWorkspace?.name?.charAt(0) ?? "N"}
                 </div>
               )}
diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
index ba50fe856..7446e78ef 100644
--- a/web/components/workspace/sidebar-dropdown.tsx
+++ b/web/components/workspace/sidebar-dropdown.tsx
@@ -117,7 +117,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
                 <div className="flex items-center gap-2 truncate">
                   <div
                     className={`relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${
-                      !activeWorkspace?.logo && "rounded bg-custom-primary-500 text-white"
+                      !activeWorkspace?.logo && "rounded bg-primary-solid text-white"
                     }`}
                   >
                     {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
@@ -180,7 +180,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
                                 <div className="flex items-center justify-start gap-2.5 truncate">
                                   <span
                                     className={`relative flex h-6 w-6 flex-shrink-0 items-center  justify-center p-2 text-xs uppercase ${
-                                      !workspace?.logo && "rounded bg-custom-primary-500 text-white"
+                                      !workspace?.logo && "rounded bg-primary-solid text-white"
                                     }`}
                                   >
                                     {workspace?.logo && workspace.logo !== "" ? (
diff --git a/web/components/workspace/views/delete-view-modal.tsx b/web/components/workspace/views/delete-view-modal.tsx
index 7db6b9d3e..79b56e02c 100644
--- a/web/components/workspace/views/delete-view-modal.tsx
+++ b/web/components/workspace/views/delete-view-modal.tsx
@@ -102,7 +102,7 @@ export const DeleteGlobalViewModal: React.FC<Props> = observer((props) => {
                   </div>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                  <Button variant="outline-neutral" size="sm" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
diff --git a/web/components/workspace/views/form.tsx b/web/components/workspace/views/form.tsx
index 5d69d85c2..442e5e95e 100644
--- a/web/components/workspace/views/form.tsx
+++ b/web/components/workspace/views/form.tsx
@@ -162,7 +162,7 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
         </div>
       </div>
       <div className="mt-5 flex justify-end gap-2">
-        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+        <Button variant="outline-neutral" size="sm" onClick={handleClose}>
           Cancel
         </Button>
         <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
diff --git a/web/constants/dashboard.ts b/web/constants/dashboard.ts
index dd6cb29d3..6ba5d44c1 100644
--- a/web/constants/dashboard.ts
+++ b/web/constants/dashboard.ts
@@ -145,12 +145,12 @@ export const DURATION_FILTER_OPTIONS: {
 
 // random background colors for project cards
 export const PROJECT_BACKGROUND_COLORS = [
-  "bg-gray-500/20",
+  "bg-primary-solid/20",
   "bg-success-component-surface-dark",
   "bg-danger-component-surface-dark",
   "bg-orange-500/20",
   "bg-blue-500/20",
-  "bg-yellow-500/20",
+  "bg-warning-component-surface-light",
   "bg-pink-500/20",
   "bg-purple-500/20",
 ];
diff --git a/web/constants/inbox.tsx b/web/constants/inbox.tsx
index 522bed818..d4b5efcde 100644
--- a/web/constants/inbox.tsx
+++ b/web/constants/inbox.tsx
@@ -19,8 +19,8 @@ export const INBOX_STATUS: {
     icon: AlertTriangle,
     title: "Pending",
     description: () => <p>This issue is still pending.</p>,
-    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-yellow-500"),
-    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-yellow-500/10"),
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-warning-text-subtle"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-warning-component-surface-light"),
     borderColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "border-yellow-500"),
   },
   {
@@ -47,7 +47,7 @@ export const INBOX_STATUS: {
     textColor: (snoozeDatePassed: boolean = false) =>
       snoozeDatePassed ? "text-danger-text-medium" : "text-neutral-text-medium",
     bgColor: (snoozeDatePassed: boolean = false) =>
-      snoozeDatePassed ? "bg-danger-component-surface-dark" : "bg-gray-500/10",
+      snoozeDatePassed ? "bg-danger-component-surface-dark" : "bg-primary-solid/10",
     borderColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "border-red-500" : "border-gray-500"),
   },
   {
@@ -80,7 +80,7 @@ export const INBOX_STATUS: {
       </p>
     ),
     textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-neutral-text-medium"),
-    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-gray-500/10"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-primary-solid/10"),
     borderColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "border-gray-500"),
   },
 ];
diff --git a/web/layouts/auth-layout/workspace-wrapper.tsx b/web/layouts/auth-layout/workspace-wrapper.tsx
index 1f474bae4..8b14d1e19 100644
--- a/web/layouts/auth-layout/workspace-wrapper.tsx
+++ b/web/layouts/auth-layout/workspace-wrapper.tsx
@@ -73,7 +73,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
             <div className="flex items-center justify-center gap-2">
               <Link href="/invitations">
                 <span>
-                  <Button variant="neutral-primary" size="sm">
+                  <Button variant="outline-neutral" size="sm">
                     Check pending invites
                   </Button>
                 </span>
diff --git a/web/pages/404.tsx b/web/pages/404.tsx
index 4683315dc..aa74d6b64 100644
--- a/web/pages/404.tsx
+++ b/web/pages/404.tsx
@@ -28,7 +28,7 @@ const PageNotFound: NextPage = () => (
         </div>
         <Link href="/">
           <span className="flex justify-center">
-            <Button variant="neutral-primary" size="md">
+            <Button variant="outline-neutral" size="md">
               Go to Home
             </Button>
           </span>
diff --git a/web/pages/[workspaceSlug]/settings/billing.tsx b/web/pages/[workspaceSlug]/settings/billing.tsx
index 8aaa6d2ff..a5f530c45 100644
--- a/web/pages/[workspaceSlug]/settings/billing.tsx
+++ b/web/pages/[workspaceSlug]/settings/billing.tsx
@@ -40,7 +40,7 @@ const BillingSettingsPage: NextPageWithLayout = observer(() => {
           <h4 className="text-md mb-1 leading-6">Current plan</h4>
           <p className="mb-3 text-sm text-neutral-text-medium">You are currently using the free plan</p>
           <a href="https://plane.so/pricing" target="_blank" rel="noreferrer">
-            <Button variant="neutral-primary">View Plans</Button>
+            <Button variant="outline-neutral">View Plans</Button>
           </a>
         </div>
       </div>
diff --git a/web/pages/_error.tsx b/web/pages/_error.tsx
index a76c5a6dd..f3e8f264c 100644
--- a/web/pages/_error.tsx
+++ b/web/pages/_error.tsx
@@ -60,7 +60,7 @@ const CustomErrorComponent = () => {
             <Button variant="primary" size="md" onClick={() => router.reload()}>
               Refresh
             </Button>
-            <Button variant="neutral-primary" size="md" onClick={handleSignOut}>
+            <Button variant="outline-neutral" size="md" onClick={handleSignOut}>
               Sign out
             </Button>
           </div>
diff --git a/web/pages/buttons.tsx b/web/pages/buttons.tsx
new file mode 100644
index 000000000..18ec1e804
--- /dev/null
+++ b/web/pages/buttons.tsx
@@ -0,0 +1,16 @@
+import { Button } from "@plane/ui";
+
+const ButtonsPage = () => (
+  <div className="m-72 space-y-4">
+    <Button variant="primary">Primary</Button>
+    <Button variant="surface-primary">Surface Primary</Button>
+    <Button variant="outline-primary">Outline Primary</Button>
+    <Button variant="surface-neutral">Surface Neutral</Button>
+    <Button variant="outline-neutral">Outline Neutral</Button>
+    <Button variant="text-neutral">Text Neutral</Button>
+    <Button variant="warning">Danger</Button>
+    <Button variant="danger">Danger</Button>
+  </div>
+);
+
+export default ButtonsPage;
diff --git a/web/pages/invitations/index.tsx b/web/pages/invitations/index.tsx
index af5f87be0..0ef11dea8 100644
--- a/web/pages/invitations/index.tsx
+++ b/web/pages/invitations/index.tsx
@@ -160,7 +160,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
                               alt={invitation.workspace.name}
                             />
                           ) : (
-                            <span className="grid h-9 w-9 place-items-center rounded bg-gray-700 px-3 py-1.5 uppercase text-white">
+                            <span className="grid h-9 w-9 place-items-center rounded bg-primary-solid px-3 py-1.5 uppercase text-white">
                               {invitation.workspace.name[0]}
                             </span>
                           )}
@@ -194,7 +194,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
                 </Button>
                 <Link href={`/${redirectWorkspaceSlug}`}>
                   <span>
-                    <Button variant="neutral-primary" size="md">
+                    <Button variant="outline-neutral" size="md">
                       Go Home
                     </Button>
                   </span>
diff --git a/web/pages/profile/activity.tsx b/web/pages/profile/activity.tsx
index d6d1e2ac2..240d7f3c0 100644
--- a/web/pages/profile/activity.tsx
+++ b/web/pages/profile/activity.tsx
@@ -55,11 +55,11 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
                             alt={activityItem.actor_detail.display_name}
                             height={30}
                             width={30}
-                            className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white"
+                            className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-primary-solid text-white"
                           />
                         ) : (
                           <div
-                            className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}
+                            className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-primary-solid text-white`}
                           >
                             {activityItem.actor_detail.display_name?.charAt(0)}
                           </div>
@@ -135,7 +135,7 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
                                     />
                                   ) : (
                                     <div
-                                      className={`grid h-6 w-6 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
+                                      className={`grid h-6 w-6 place-items-center rounded-full border-2 border-white bg-primary-solid text-xs text-white`}
                                     >
                                       {activityItem.actor_detail.display_name?.charAt(0)}
                                     </div>
diff --git a/web/styles/globals.css b/web/styles/globals.css
index 66b258dc8..37b9ccdd0 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -46,6 +46,20 @@
     --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
       0px 1px 48px 0px rgba(16, 24, 40, 0.12);
     --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05);
+
+    --color-sidebar-neutral-0: var(--color-neutral-0);
+    --color-sidebar-neutral-10: var(--color-neutral-10);
+    --color-sidebar-neutral-20: var(--color-neutral-20);
+    --color-sidebar-neutral-30: var(--color-neutral-30);
+    --color-sidebar-neutral-40: var(--color-neutral-40);
+    --color-sidebar-neutral-50: var(--color-neutral-50);
+    --color-sidebar-neutral-60: var(--color-neutral-60);
+    --color-sidebar-neutral-70: var(--color-neutral-70);
+    --color-sidebar-neutral-80: var(--color-neutral-80);
+    --color-sidebar-neutral-90: var(--color-neutral-90);
+    --color-sidebar-neutral-100: var(--color-neutral-100);
+    --color-sidebar-neutral-110: var(--color-neutral-110);
+    --color-sidebar-neutral-120: var(--color-neutral-120);
   }
 
   [data-theme="light"],
@@ -428,7 +442,7 @@ body {
 /* progress bar */
 .progress-bar {
   fill: currentColor;
-  color: rgba(var(--color-sidebar-background-100));
+  color: var(--color-sidebar-neutral-30);
 }
 
 /* lineclamp */