diff --git a/apps/web/core/components/core/image-picker-popover.tsx b/apps/web/core/components/core/image-picker-popover.tsx
index 0e05de81a..57db4e647 100644
--- a/apps/web/core/components/core/image-picker-popover.tsx
+++ b/apps/web/core/components/core/image-picker-popover.tsx
@@ -9,7 +9,7 @@ import { Tab, Popover } from "@headlessui/react";
 // plane imports
 import { ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
-import { Button } from "@plane/propel/button";
+import { Button, getButtonStyling } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
 import { Input, Loader } from "@plane/ui";
@@ -180,11 +180,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
 
   return (
     <Popover className="relative z-19" ref={ref} tabIndex={tabIndex} onKeyDown={handleKeyDown}>
-      <Popover.Button
-        className="rounded-sm border border-strong bg-surface-1 px-2 py-1 text-11 text-secondary hover:text-primary"
-        onClick={handleOnClick}
-        disabled={disabled}
-      >
+      <Popover.Button className={getButtonStyling("secondary", "sm")} onClick={handleOnClick} disabled={disabled}>
         {label}
       </Popover.Button>
 
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx
index 69ec1d9e5..adb33b0d7 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx
@@ -26,7 +26,7 @@ export function LayoutSelection(props: Props) {
   };
 
   return (
-    <div className="flex items-center gap-1 rounded-sm bg-layer-3 p-1">
+    <div className="flex items-center gap-1 rounded-md bg-layer-3 p-1">
       {ISSUE_LAYOUTS.filter((l) => layouts.includes(l.key)).map((layout) => (
         <Tooltip key={layout.key} tooltipContent={t(layout.i18n_title)} isMobile={isMobile}>
           <button
diff --git a/apps/web/core/components/onboarding/create-workspace.tsx b/apps/web/core/components/onboarding/create-workspace.tsx
index 3dc722392..37c1a1cc1 100644
--- a/apps/web/core/components/onboarding/create-workspace.tsx
+++ b/apps/web/core/components/onboarding/create-workspace.tsx
@@ -266,7 +266,7 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
                       </span>
                     )
                   }
-                  buttonClassName="!border-[0.5px] !border-strong !shadow-none !rounded-md"
+                  buttonClassName="border border-subtle bg-layer-2 !shadow-none !rounded-md"
                   input
                 >
                   {ORGANIZATION_SIZE.map((item) => (
diff --git a/apps/web/core/components/sidebar/add-button.tsx b/apps/web/core/components/sidebar/add-button.tsx
index 5823fc75b..1e092ff18 100644
--- a/apps/web/core/components/sidebar/add-button.tsx
+++ b/apps/web/core/components/sidebar/add-button.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@plane/propel/button";
 import { cn } from "@plane/utils";
 
 type Props = React.ComponentProps<"button"> & {
@@ -8,17 +9,15 @@ type Props = React.ComponentProps<"button"> & {
 export function SidebarAddButton(props: Props) {
   const { label, onClick, disabled, ...rest } = props;
   return (
-    <button
-      type="button"
-      className={cn(
-        "flex-grow text-tertiary text-13 font-medium border-[0.5px] border-strong text-left rounded-md shadow-raised-100 h-8 px-2 flex items-center gap-1.5 transition-colors",
-        !disabled && "hover:bg-layer-transparent-hover"
-      )}
+    <Button
+      variant={"secondary"}
+      size={"xl"}
+      className="w-full justify-start"
       onClick={onClick}
       disabled={disabled}
       {...rest}
     >
       {label}
-    </button>
+    </Button>
   );
 }
diff --git a/apps/web/core/components/workspace/create-workspace-form.tsx b/apps/web/core/components/workspace/create-workspace-form.tsx
index 552dc41d3..578b53d9d 100644
--- a/apps/web/core/components/workspace/create-workspace-form.tsx
+++ b/apps/web/core/components/workspace/create-workspace-form.tsx
@@ -125,7 +125,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
       }}
     >
       <div className="space-y-6 sm:space-y-7">
-        <div className="space-y-1 text-13">
+        <div className="flex flex-col gap-2 text-13">
           <label htmlFor="workspaceName">
             {t("workspace_creation.form.name.label")}
             <span className="ml-0.5 text-red-500">*</span>
@@ -165,12 +165,12 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
             <span className="text-11 text-red-500">{errors?.name?.message}</span>
           </div>
         </div>
-        <div className="space-y-1 text-13">
+        <div className="flex flex-col gap-2 text-13">
           <label htmlFor="workspaceUrl">
             {t("workspace_creation.form.url.label")}
             <span className="ml-0.5 text-red-500">*</span>
           </label>
-          <div className="flex w-full items-center rounded-md border-[0.5px] border-subtle px-3 bg-layer-1">
+          <div className="flex w-full items-center rounded-md border border-subtle px-3 bg-layer-2">
             <span className="whitespace-nowrap text-12 text-secondary">{window && window.location.host}/</span>
             <Controller
               control={control}
@@ -208,7 +208,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
           )}
           {errors.slug && <span className="text-11 text-red-500">{errors.slug.message}</span>}
         </div>
-        <div className="space-y-1 text-13">
+        <div className="flex flex-col gap-2 text-13">
           <span>
             {t("workspace_creation.form.organization_size.label")}
             <span className="ml-0.5 text-red-500">*</span>
@@ -229,7 +229,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
                       </span>
                     )
                   }
-                  buttonClassName="!border-[0.5px] !border-subtle !shadow-none bg-layer-1 text-12"
+                  buttonClassName="border border-subtle bg-layer-2 !shadow-none !rounded-md"
                   input
                 >
                   {ORGANIZATION_SIZE.map((item) => (
diff --git a/apps/web/core/components/workspace/settings/workspace-details.tsx b/apps/web/core/components/workspace/settings/workspace-details.tsx
index 324389a1d..432cfc18a 100644
--- a/apps/web/core/components/workspace/settings/workspace-details.tsx
+++ b/apps/web/core/components/workspace/settings/workspace-details.tsx
@@ -242,7 +242,7 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
                       ORGANIZATION_SIZE.find((c) => c === value) ??
                       t("workspace_settings.settings.general.errors.company_size.select_a_range")
                     }
-                    buttonClassName="!border-[0.5px] !border-subtle !shadow-none"
+                    buttonClassName="border border-subtle bg-layer-2 !shadow-none !rounded-md"
                     input
                     disabled={!isAdmin}
                   >
diff --git a/apps/web/core/components/workspace/sidebar/projects-list-item.tsx b/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
index ea13cd76a..5009fa3c2 100644
--- a/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -16,6 +16,7 @@ import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ArchiveIcon, ChevronRightIcon } from "@plane/propel/icons";
+import { IconButton } from "@plane/propel/icon-button";
 import { Tooltip } from "@plane/propel/tooltip";
 import { CustomMenu, DropIndicator, DragHandle, ControlLink } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -80,7 +81,7 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
   const isProjectListOpen = getIsProjectListOpen(projectId);
   const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined);
   // refs
-  const actionSectionRef = useRef<HTMLDivElement | null>(null);
+  const actionSectionRef = useRef<HTMLButtonElement | null>(null);
   const projectRef = useRef<HTMLDivElement | null>(null);
   const dragHandleRef = useRef<HTMLButtonElement | null>(null);
   // router
@@ -341,31 +342,33 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
                   </div>
                 )}
               </ControlLink>
-              <CustomMenu
-                customButton={
-                  <span
-                    ref={actionSectionRef}
-                    className="grid place-items-center p-0.5 text-placeholder hover:bg-layer-1 rounded-sm"
-                    onClick={() => setIsMenuActive(!isMenuActive)}
-                  >
-                    <MoreHorizontal className="size-4" />
-                  </span>
-                }
-                className={cn(
-                  "opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
-                  {
-                    "opacity-100 pointer-events-auto": isMenuActive,
+              <div className="flex items-center gap-1">
+                <CustomMenu
+                  customButton={
+                    <IconButton
+                      ref={actionSectionRef}
+                      variant="ghost"
+                      size="sm"
+                      icon={MoreHorizontal}
+                      onClick={() => setIsMenuActive(!isMenuActive)}
+                      className="text-placeholder"
+                    />
                   }
-                )}
-                customButtonClassName="grid place-items-center"
-                placement="bottom-start"
-                ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
-                useCaptureForOutsideClick
-                closeOnSelect
-                onMenuClose={() => setIsMenuActive(false)}
-              >
-                {/* TODO: Removed is_favorite logic due to the optimization in projects API */}
-                {/* {isAuthorized && (
+                  className={cn(
+                    "opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
+                    {
+                      "opacity-100 pointer-events-auto": isMenuActive,
+                    }
+                  )}
+                  customButtonClassName="grid place-items-center"
+                  placement="bottom-start"
+                  ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
+                  useCaptureForOutsideClick
+                  closeOnSelect
+                  onMenuClose={() => setIsMenuActive(false)}
+                >
+                  {/* TODO: Removed is_favorite logic due to the optimization in projects API */}
+                  {/* {isAuthorized && (
                     <CustomMenu.MenuItem
                       onClick={project.is_favorite ? handleRemoveFromFavorites : handleAddToFavorites}
                     >
@@ -380,79 +383,76 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
                     </CustomMenu.MenuItem>
                   )} */}
 
-                {/* publish project settings */}
-                {isAdmin && (
-                  <CustomMenu.MenuItem onClick={() => setPublishModal(true)}>
-                    <div className="relative flex flex-shrink-0 items-center justify-start gap-2">
-                      <div className="flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-secondary transition-all duration-300 hover:bg-layer-1">
-                        <Share2 className="h-3.5 w-3.5 stroke-[1.5]" />
+                  {/* publish project settings */}
+                  {isAdmin && (
+                    <CustomMenu.MenuItem onClick={() => setPublishModal(true)}>
+                      <div className="relative flex flex-shrink-0 items-center justify-start gap-2">
+                        <div className="flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-secondary transition-all duration-300 hover:bg-layer-1">
+                          <Share2 className="h-3.5 w-3.5 stroke-[1.5]" />
+                        </div>
+                        <div>{t("publish_project")}</div>
                       </div>
-                      <div>{t("publish_project")}</div>
-                    </div>
+                    </CustomMenu.MenuItem>
+                  )}
+                  <CustomMenu.MenuItem onClick={handleCopyText}>
+                    <span className="flex items-center justify-start gap-2">
+                      <LinkIcon className="h-3.5 w-3.5 stroke-[1.5]" />
+                      <span>{t("copy_link")}</span>
+                    </span>
                   </CustomMenu.MenuItem>
-                )}
-                <CustomMenu.MenuItem onClick={handleCopyText}>
-                  <span className="flex items-center justify-start gap-2">
-                    <LinkIcon className="h-3.5 w-3.5 stroke-[1.5]" />
-                    <span>{t("copy_link")}</span>
-                  </span>
-                </CustomMenu.MenuItem>
-                {isAuthorized && (
+                  {isAuthorized && (
+                    <CustomMenu.MenuItem
+                      onClick={() => {
+                        router.push(`/${workspaceSlug}/projects/${project?.id}/archives/issues`);
+                      }}
+                    >
+                      <div className="flex items-center justify-start gap-2 cursor-pointer">
+                        <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
+                        <span>{t("archives")}</span>
+                      </div>
+                    </CustomMenu.MenuItem>
+                  )}
                   <CustomMenu.MenuItem
                     onClick={() => {
-                      router.push(`/${workspaceSlug}/projects/${project?.id}/archives/issues`);
+                      router.push(`/${workspaceSlug}/settings/projects/${project?.id}`);
                     }}
                   >
                     <div className="flex items-center justify-start gap-2 cursor-pointer">
-                      <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
-                      <span>{t("archives")}</span>
+                      <Settings className="h-3.5 w-3.5 stroke-[1.5]" />
+                      <span>{t("settings")}</span>
                     </div>
                   </CustomMenu.MenuItem>
-                )}
-                <CustomMenu.MenuItem
-                  onClick={() => {
-                    router.push(`/${workspaceSlug}/settings/projects/${project?.id}`);
-                  }}
-                >
-                  <div className="flex items-center justify-start gap-2 cursor-pointer">
-                    <Settings className="h-3.5 w-3.5 stroke-[1.5]" />
-                    <span>{t("settings")}</span>
-                  </div>
-                </CustomMenu.MenuItem>
-                {/* leave project */}
-                {!isAuthorized && (
-                  <CustomMenu.MenuItem
-                    onClick={handleLeaveProject}
-                    data-ph-element={MEMBER_TRACKER_ELEMENTS.SIDEBAR_PROJECT_QUICK_ACTIONS}
-                  >
-                    <div className="flex items-center justify-start gap-2">
-                      <LogOut className="h-3.5 w-3.5 stroke-[1.5]" />
-                      <span>{t("leave_project")}</span>
-                    </div>
-                  </CustomMenu.MenuItem>
-                )}
-              </CustomMenu>
-              {isAccordionMode && (
-                <Disclosure.Button
-                  as="button"
-                  type="button"
-                  className={cn("hidden group-hover/project-item:inline-block p-0.5 rounded-sm hover:bg-layer-1", {
-                    "inline-block": isMenuActive,
-                  })}
-                  onClick={() => setIsProjectListOpen(!isProjectListOpen)}
-                  aria-label={t(
-                    isProjectListOpen
-                      ? "aria_labels.projects_sidebar.close_project_menu"
-                      : "aria_labels.projects_sidebar.open_project_menu"
+                  {/* leave project */}
+                  {!isAuthorized && (
+                    <CustomMenu.MenuItem
+                      onClick={handleLeaveProject}
+                      data-ph-element={MEMBER_TRACKER_ELEMENTS.SIDEBAR_PROJECT_QUICK_ACTIONS}
+                    >
+                      <div className="flex items-center justify-start gap-2">
+                        <LogOut className="h-3.5 w-3.5 stroke-[1.5]" />
+                        <span>{t("leave_project")}</span>
+                      </div>
+                    </CustomMenu.MenuItem>
                   )}
-                >
-                  <ChevronRightIcon
-                    className={cn("size-4 flex-shrink-0 text-placeholder transition-transform", {
+                </CustomMenu>
+                {isAccordionMode && (
+                  <IconButton
+                    variant="ghost"
+                    size="sm"
+                    icon={ChevronRightIcon}
+                    onClick={() => setIsProjectListOpen(!isProjectListOpen)}
+                    className={cn("hidden group-hover/project-item:inline-flex text-placeholder transition-transform", {
+                      "inline-flex": isMenuActive,
                       "rotate-90": isProjectListOpen,
                     })}
+                    aria-label={t(
+                      isProjectListOpen
+                        ? "aria_labels.projects_sidebar.close_project_menu"
+                        : "aria_labels.projects_sidebar.open_project_menu"
+                    )}
                   />
-                </Disclosure.Button>
-              )}
+                )}
+              </div>
             </>
           </div>
           {isAccordionMode && (
diff --git a/packages/propel/src/button/helper.tsx b/packages/propel/src/button/helper.tsx
index 68f0ba16c..928dd4dc6 100644
--- a/packages/propel/src/button/helper.tsx
+++ b/packages/propel/src/button/helper.tsx
@@ -7,15 +7,15 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          "bg-accent-primary hover:bg-accent-primary-hover active:bg-accent-primary-active focus:bg-accent-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
+          "bg-accent-primary hover:bg-accent-primary-hover active:bg-accent-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
         "error-fill":
-          "bg-danger-primary hover:bg-danger-primary-hover active:bg-danger-primary-active focus:bg-danger-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
+          "bg-danger-primary hover:bg-danger-primary-hover active:bg-danger-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
         "error-outline":
-          "bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover focus:bg-danger-subtle-hover disabled:bg-layer-2 text-danger disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
+          "bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:bg-layer-2 text-danger disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
         secondary:
-          "bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active focus:bg-layer-2-active disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
+          "bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active  disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
         tertiary:
-          "bg-layer-3 hover:bg-layer-3-hover active:bg-layer-3-active focus:bg-layer-3-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
+          "bg-layer-3 hover:bg-layer-3-hover active:bg-layer-3-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
         ghost:
           "bg-layer-transparent hover:bg-layer-transparent-hover active:bg-layer-transparent-active focus:bg-layer-transparent-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
         link: "px-0 underline text-link-primary hover:text-link-primary-hover active:text-link-primary-hover focus:text-link-primary-hover disabled:text-disabled",
diff --git a/packages/propel/src/charts/radar-chart/root.tsx b/packages/propel/src/charts/radar-chart/root.tsx
index c1541b528..f7a2bc6cd 100644
--- a/packages/propel/src/charts/radar-chart/root.tsx
+++ b/packages/propel/src/charts/radar-chart/root.tsx
@@ -37,7 +37,7 @@ function RadarChart<T extends string, K extends string>(props: TRadarChartProps<
     <div className={className}>
       <ResponsiveContainer width="100%" height="100%">
         <CoreRadarChart cx="50%" cy="50%" outerRadius="80%" data={data} margin={margin}>
-          <PolarGrid stroke="--alpha(var(--border-color-subtle) / 90%)" />
+          <PolarGrid stroke="var(--border-color-subtle)" />
           <PolarAngleAxis dataKey={angleAxis.key} tick={(props) => <CustomRadarAxisTick {...props} />} />
           {showTooltip && (
             <Tooltip
diff --git a/packages/propel/src/input/input.tsx b/packages/propel/src/input/input.tsx
index 133867960..b7b655c1f 100644
--- a/packages/propel/src/input/input.tsx
+++ b/packages/propel/src/input/input.tsx
@@ -29,7 +29,7 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
       type={type}
       name={name}
       className={cn(
-        "block rounded-md bg-layer-1 text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
+        "block rounded-md bg-layer-2 text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
         {
           "rounded-md border-[0.5px]": mode === "primary",
           "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":
diff --git a/packages/tailwind-config/variables.css b/packages/tailwind-config/variables.css
index 4facc275f..7591f64b1 100644
--- a/packages/tailwind-config/variables.css
+++ b/packages/tailwind-config/variables.css
@@ -311,17 +311,17 @@
   --background-color-surface-1: var(--color-neutral-white);
   --background-color-surface-2: var(--color-neutral-100);
   --background-color-layer-1: var(--color-neutral-200);
-  --background-color-layer-1-hover: var(--color-alpha-black-100);
-  --background-color-layer-1-active: var(--color-alpha-black-200);
-  --background-color-layer-1-selected: var(--color-alpha-black-300);
+  --background-color-layer-1-hover: var(--color-neutral-300);
+  --background-color-layer-1-active: var(--color-neutral-400);
+  --background-color-layer-1-selected: var(--color-neutral-400);
   --background-color-layer-2: var(--color-neutral-white);
-  --background-color-layer-2-hover: var(--color-alpha-black-100);
-  --background-color-layer-2-active: var(--color-alpha-black-200);
-  --background-color-layer-2-selected: var(--color-alpha-black-300);
+  --background-color-layer-2-hover: var(--color-neutral-100);
+  --background-color-layer-2-active: var(--color-neutral-200);
+  --background-color-layer-2-selected: var(--color-neutral-200);
   --background-color-layer-3: var(--color-neutral-300);
-  --background-color-layer-3-hover: var(--color-alpha-black-100);
-  --background-color-layer-3-active: var(--color-alpha-black-200);
-  --background-color-layer-3-selected: var(--color-alpha-black-300);
+  --background-color-layer-3-hover: var(--color-neutral-400);
+  --background-color-layer-3-active: var(--color-neutral-500);
+  --background-color-layer-3-selected: var(--color-neutral-500);
   --background-color-layer-transparent: var(--color-alpha-white-0);
   --background-color-layer-transparent-hover: var(--color-alpha-black-100);
   --background-color-layer-transparent-active: var(--color-alpha-black-200);
@@ -351,6 +351,7 @@
   --background-color-danger-transparent-active: var(--color-red-100);
   --background-color-danger-transparent-selected: var(--color-red-100);
   --background-color-backdrop: var(--color-alpha-black-500);
+  --background-color-inverse: var(--color-alpha-black-1000);
 
   /* Border colors */
   --border-color-subtle: var(--color-neutral-400);
@@ -634,17 +635,17 @@
       --background-color-surface-1: var(--color-neutral-100);
       --background-color-surface-2: var(--color-neutral-100);
       --background-color-layer-1: var(--color-neutral-200);
-      --background-color-layer-1-hover: var(--color-alpha-white-100);
-      --background-color-layer-1-active: var(--color-alpha-white-200);
-      --background-color-layer-1-selected: var(--color-alpha-white-300);
+      --background-color-layer-1-hover: var(--color-neutral-300);
+      --background-color-layer-1-active: var(--color-neutral-400);
+      --background-color-layer-1-selected: var(--color-neutral-400);
       --background-color-layer-2: var(--color-neutral-300);
-      --background-color-layer-2-hover: var(--color-alpha-white-100);
-      --background-color-layer-2-active: var(--color-alpha-white-200);
-      --background-color-layer-2-selected: var(--color-alpha-white-300);
+      --background-color-layer-2-hover: var(--color-neutral-400);
+      --background-color-layer-2-active: var(--color-neutral-500);
+      --background-color-layer-2-selected: var(--color-neutral-500);
       --background-color-layer-3: var(--color-neutral-400);
-      --background-color-layer-3-hover: var(--color-alpha-white-100);
-      --background-color-layer-3-active: var(--color-alpha-white-200);
-      --background-color-layer-3-selected: var(--color-alpha-white-300);
+      --background-color-layer-3-hover: var(---color-neutral-500);
+      --background-color-layer-3-active: var(--color-neutral-600);
+      --background-color-layer-3-selected: var(--color-neutral-600);
       --background-color-layer-transparent: var(--color-alpha-black-0);
       --background-color-layer-transparent-hover: var(--color-alpha-white-100);
       --background-color-layer-transparent-active: var(--color-alpha-white-200);
@@ -674,6 +675,8 @@
       --background-color-danger-transparent-active: var(--color-red-100);
       --background-color-danger-transparent-selected: var(--color-red-100);
       --background-color-backdrop: var(--color-alpha-black-1000);
+      --background-color-inverse: var(--color-alpha-white-1000);
+
 
       /* Border colors */
       --border-color-subtle: var(--color-neutral-400);
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
index ff0216109..378490fb0 100644
--- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@@ -170,9 +170,11 @@ function BreadcrumbItemWrapper(props: BreadcrumbItemWrapperProps) {
     <Tooltip tooltipContent={label} position="bottom" disabled={!label || label === "" || disableTooltip}>
       <div
         className={cn(
-          "group h-full flex items-center gap-2 rounded-sm px-1.5 py-1 text-13 font-medium text-tertiary cursor-default",
+          "group h-full flex items-center gap-2 rounded-sm px-1.5 py-1 text-13 font-medium cursor-default",
           {
-            "hover:text-primary hover:bg-surface-2 cursor-pointer": type === "link" && !isLast,
+            "text-primary": isLast,
+            "text-tertiary": !isLast,
+            "hover:text-primary hover:bg-layer-transparent-hover cursor-pointer": type === "link" && !isLast,
           },
           className
         )}
diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx
index a00543a21..4be2e2d65 100644
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -94,7 +94,7 @@ function CustomSelect(props: ICustomSelectProps) {
                 ref={setReferenceElement}
                 type="button"
                 className={cn(
-                  "flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-strong",
+                  "flex w-full items-center justify-between gap-1 rounded border border-strong",
                   {
                     "px-3 py-2 text-13": input,
                     "px-2 py-1 text-11": !input,