diff --git a/packages/components/dropdown/package.json b/packages/components/dropdown/package.json
index 56a4623c9..f1553a5fb 100644
--- a/packages/components/dropdown/package.json
+++ b/packages/components/dropdown/package.json
@@ -32,6 +32,7 @@
     "@spark-ui/form-field": "^1.4.1",
     "@spark-ui/icon": "^2.1.1",
     "@spark-ui/icons": "^1.21.6",
+    "@spark-ui/use-merge-refs": "^0.4.0",
     "@spark-ui/popover": "^1.5.3",
     "@spark-ui/visually-hidden": "^1.2.0",
     "class-variance-authority": "0.7.0",
diff --git a/packages/components/dropdown/src/DropdownValue.tsx b/packages/components/dropdown/src/DropdownValue.tsx
index 0f76f4f98..3dd6cd17f 100644
--- a/packages/components/dropdown/src/DropdownValue.tsx
+++ b/packages/components/dropdown/src/DropdownValue.tsx
@@ -19,7 +19,12 @@ export const Value = forwardRef(
 
     return (
       <span ref={forwardedRef} className={cx('flex shrink items-center text-left', className)}>
-        <span className="line-clamp-1 flex-1 overflow-hidden text-ellipsis break-all">
+        <span
+          className={cx(
+            'line-clamp-1 flex-1 overflow-hidden text-ellipsis break-all',
+            !hasSelectedItems && 'text-on-surface/dim-1'
+          )}
+        >
           {!hasSelectedItems ? placeholder : children || text}
         </span>
         {suffix && <span>{suffix}</span>}
diff --git a/packages/components/select/package.json b/packages/components/select/package.json
index 22032de19..e087ff8fc 100644
--- a/packages/components/select/package.json
+++ b/packages/components/select/package.json
@@ -43,6 +43,8 @@
   "license": "MIT",
   "dependencies": {
     "@spark-ui/icon": "^2.1.1",
-    "@spark-ui/icons": "^1.21.6"
+    "@spark-ui/icons": "^1.21.6",
+    "@spark-ui/form-field": "^1.4.1",
+    "@spark-ui/use-combined-state": "^0.6.2"
   }
 }
diff --git a/packages/components/select/src/SelectContext.tsx b/packages/components/select/src/SelectContext.tsx
index 9cffdd56c..df0f5d09c 100644
--- a/packages/components/select/src/SelectContext.tsx
+++ b/packages/components/select/src/SelectContext.tsx
@@ -116,7 +116,6 @@ export const SelectProvider = ({
    *
    * The Map must be rebuilt from the new children in order to preserve logical indices.
    *
-   * Downshift is heavily indices based for keyboard navigation, so it it important.
    */
   useEffect(() => {
     const newMap = getItemsFromChildren(itemsComponent)
diff --git a/packages/components/select/src/SelectValue.tsx b/packages/components/select/src/SelectValue.tsx
index e971963ff..971f24d6e 100644
--- a/packages/components/select/src/SelectValue.tsx
+++ b/packages/components/select/src/SelectValue.tsx
@@ -23,7 +23,12 @@ export const Value = forwardRef(
         ref={forwardedRef}
         className={cx('flex shrink items-center text-left', className)}
       >
-        <span className="line-clamp-1 flex-1 overflow-hidden text-ellipsis break-all">
+        <span
+          className={cx(
+            'line-clamp-1 flex-1 overflow-hidden text-ellipsis break-all',
+            !hasSelectedItem && 'text-on-surface/dim-1'
+          )}
+        >
           {!hasSelectedItem ? placeholder : children || text}
         </span>
       </span>