diff --git a/apps/designer/app/designer/features/style-panel/shared/css-value-input/unit-select.tsx b/apps/designer/app/designer/features/style-panel/shared/css-value-input/unit-select.tsx
index 6d2c6e412b..c3c65843e7 100644
--- a/apps/designer/app/designer/features/style-panel/shared/css-value-input/unit-select.tsx
+++ b/apps/designer/app/designer/features/style-panel/shared/css-value-input/unit-select.tsx
@@ -78,7 +78,7 @@ export const useUnitSelect = ({
 const StyledTrigger = styled(SelectPrimitive.SelectTrigger, {
   all: "unset",
   height: "$5",
-  px: 3,
+  px: "$1",
   borderRadius: 2,
   display: "inline-flex",
   alignItems: "center",
@@ -88,7 +88,7 @@ const StyledTrigger = styled(SelectPrimitive.SelectTrigger, {
     color: "$loContrast",
   },
   "&:hover": {
-    backgroundColor: "$slate5",
+    backgroundColor: "$slate6",
   },
 });
 
diff --git a/packages/design-system/src/components/icon-button.tsx b/packages/design-system/src/components/icon-button.tsx
index a2286a99d4..697aaa10b2 100644
--- a/packages/design-system/src/components/icon-button.tsx
+++ b/packages/design-system/src/components/icon-button.tsx
@@ -24,11 +24,11 @@ export const IconButton = styled("button", {
     boxSizing: "border-box",
   },
   "&:hover, &:active": {
-    backgroundColor: "$slate5",
+    backgroundColor: "$slate6",
     outline: "none",
   },
   "&:focus": {
-    backgroundColor: "$slate5",
+    backgroundColor: "$slate6",
     outline: "none",
   },
   "&:disabled": {
diff --git a/packages/design-system/src/components/select.tsx b/packages/design-system/src/components/select.tsx
index ec5e050d0c..b9a3db5639 100644
--- a/packages/design-system/src/components/select.tsx
+++ b/packages/design-system/src/components/select.tsx
@@ -21,7 +21,7 @@ const StyledTrigger = styled(SelectPrimitive.SelectTrigger, {
   px: "$2",
   fontSize: "$1",
   "&:hover": {
-    backgroundColor: "$slate5",
+    backgroundColor: "$slate6",
   },
   "&:focus": {
     boxShadow: