diff --git a/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx b/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx
index b748fbbd..83403b7f 100644
--- a/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx
+++ b/ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Info } from "lucide-react";
+import { Info, ChevronDown } from "lucide-react";
 import type { Telemetry } from "@/types/javaagent";
 
 interface ConfigurationSelectorProps {
@@ -53,18 +53,24 @@ export function ConfigurationSelector({
           >
             Configuration
           </label>
-          <select
-            id="config-select"
-            value={selectedWhen}
-            onChange={(e) => onWhenChange(e.target.value)}
-            className="border-primary/20 bg-primary/5 text-foreground hover:border-primary/40 hover:bg-primary/10 focus:ring-primary/50 focus:border-primary/50 min-w-0 flex-1 cursor-pointer rounded-lg border-2 px-4 py-2.5 text-sm font-medium shadow-sm transition-all duration-200 hover:shadow-md focus:ring-2 focus:outline-none sm:min-w-[200px] sm:flex-none"
-          >
-            {telemetry.map((t) => (
-              <option key={t.when} value={t.when}>
-                {getConfigLabel(t.when)}
-              </option>
-            ))}
-          </select>
+          <div className="relative flex-1 sm:flex-none">
+            <select
+              id="config-select"
+              value={selectedWhen}
+              onChange={(e) => onWhenChange(e.target.value)}
+              className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 min-w-0 w-full cursor-pointer appearance-none rounded-lg border-2 py-2.5 pr-10 pl-4 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none [color-scheme:dark] sm:min-w-[200px]"
+            >
+              {telemetry.map((t) => (
+                <option key={t.when} value={t.when}>
+                  {getConfigLabel(t.when)}
+                </option>
+              ))}
+            </select>
+            <ChevronDown
+              className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
+              aria-hidden="true"
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/ecosystem-explorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx b/ecosystem-explorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx
index b3ef2de5..6a9a9538 100644
--- a/ecosystem-explorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx
+++ b/ecosystem-explorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Info } from "lucide-react";
+import { Info, ChevronDown } from "lucide-react";
 import type { VersionInfo } from "@/types/javaagent";
 
 interface VersionSelectorPanelProps {
@@ -59,18 +59,24 @@ export function VersionSelectorPanel({
             >
               From
             </label>
-            <select
-              id="from-version-select"
-              value={fromVersion}
-              onChange={(e) => onFromVersionChange(e.target.value)}
-              className="border-primary/20 bg-primary/5 text-foreground hover:border-primary/40 hover:bg-primary/10 focus:ring-primary/50 focus:border-primary/50 w-full cursor-pointer rounded-lg border-2 px-4 py-2.5 text-sm font-medium shadow-sm transition-all duration-200 hover:shadow-md focus:ring-2 focus:outline-none"
-            >
-              {versions.map((v) => (
-                <option key={v.version} value={v.version}>
-                  {v.version} {v.is_latest ? "(latest)" : ""}
-                </option>
-              ))}
-            </select>
+            <div className="relative">
+              <select
+                id="from-version-select"
+                value={fromVersion}
+                onChange={(e) => onFromVersionChange(e.target.value)}
+                className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none [color-scheme:dark]"
+              >
+                {versions.map((v) => (
+                  <option key={v.version} value={v.version}>
+                    {v.version} {v.is_latest ? "(latest)" : ""}
+                  </option>
+                ))}
+              </select>
+              <ChevronDown
+                className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
+                aria-hidden="true"
+              />
+            </div>
           </div>
 
           {/* To version selector */}
@@ -81,18 +87,24 @@ export function VersionSelectorPanel({
             >
               To
             </label>
-            <select
-              id="to-version-select"
-              value={toVersion}
-              onChange={(e) => onToVersionChange(e.target.value)}
-              className="border-primary/20 bg-primary/5 text-foreground hover:border-primary/40 hover:bg-primary/10 focus:ring-primary/50 focus:border-primary/50 w-full cursor-pointer rounded-lg border-2 px-4 py-2.5 text-sm font-medium shadow-sm transition-all duration-200 hover:shadow-md focus:ring-2 focus:outline-none"
-            >
-              {versions.map((v) => (
-                <option key={v.version} value={v.version}>
-                  {v.version} {v.is_latest ? "(latest)" : ""}
-                </option>
-              ))}
-            </select>
+            <div className="relative">
+              <select
+                id="to-version-select"
+                value={toVersion}
+                onChange={(e) => onToVersionChange(e.target.value)}
+                className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none [color-scheme:dark]"
+              >
+                {versions.map((v) => (
+                  <option key={v.version} value={v.version}>
+                    {v.version} {v.is_latest ? "(latest)" : ""}
+                  </option>
+                ))}
+              </select>
+              <ChevronDown
+                className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
+                aria-hidden="true"
+              />
+            </div>
           </div>
         </div>
 
@@ -104,18 +116,24 @@ export function VersionSelectorPanel({
             >
               Configuration
             </label>
-            <select
-              id="when-condition-select"
-              value={whenCondition}
-              onChange={(e) => onWhenConditionChange(e.target.value)}
-              className="border-primary/20 bg-primary/5 text-foreground hover:border-primary/40 hover:bg-primary/10 focus:ring-primary/50 focus:border-primary/50 w-full cursor-pointer rounded-lg border-2 px-4 py-2.5 text-sm font-medium shadow-sm transition-all duration-200 hover:shadow-md focus:ring-2 focus:outline-none"
-            >
-              {availableConditions.map((c) => (
-                <option key={c} value={c}>
-                  {c === "default" ? "Default" : c}
-                </option>
-              ))}
-            </select>
+            <div className="relative">
+              <select
+                id="when-condition-select"
+                value={whenCondition}
+                onChange={(e) => onWhenConditionChange(e.target.value)}
+                className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none [color-scheme:dark]"
+              >
+                {availableConditions.map((c) => (
+                  <option key={c} value={c}>
+                    {c === "default" ? "Default" : c}
+                  </option>
+                ))}
+              </select>
+              <ChevronDown
+                className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
+                aria-hidden="true"
+              />
+            </div>
           </div>
         )}
       </div>
diff --git a/ecosystem-explorer/src/features/java-agent/components/version-selector.tsx b/ecosystem-explorer/src/features/java-agent/components/version-selector.tsx
index 95688450..3e7def43 100644
--- a/ecosystem-explorer/src/features/java-agent/components/version-selector.tsx
+++ b/ecosystem-explorer/src/features/java-agent/components/version-selector.tsx
@@ -41,7 +41,7 @@ export function VersionSelector({
           id={id}
           value={currentVersion}
           onChange={(e) => onVersionChange(e.target.value)}
-          className="border-border/60 bg-background/80 focus:border-primary/50 focus:ring-primary/20 cursor-pointer appearance-none rounded-lg border py-1.5 pr-8 pl-3 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none"
+          className="border-border/60 bg-background/80 focus:border-primary/50 focus:ring-primary/20 cursor-pointer appearance-none rounded-lg border py-1.5 pr-8 pl-3 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none [color-scheme:dark]"
         >
           {versions.map((v) => (
             <option key={v.version} value={v.version}>
diff --git a/ecosystem-explorer/src/features/java-agent/configuration/components/controls/control-styles.ts b/ecosystem-explorer/src/features/java-agent/configuration/components/controls/control-styles.ts
index b4b7b809..4a4781f5 100644
--- a/ecosystem-explorer/src/features/java-agent/configuration/components/controls/control-styles.ts
+++ b/ecosystem-explorer/src/features/java-agent/configuration/components/controls/control-styles.ts
@@ -20,11 +20,11 @@
  * touches one place.
  */
 export const INPUT_CLASS =
-  "w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20";
+  "w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 [color-scheme:dark]";
 
 /**
  * Compact variant used by list-of-input controls (string-list, number-list)
  * where each row needs a tighter vertical rhythm than a standalone input.
  */
 export const LIST_INPUT_CLASS =
-  "w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20";
+  "w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 [color-scheme:dark]";
diff --git a/ecosystem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx b/ecosystem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx
index 3ff28bd9..54826a41 100644
--- a/ecosystem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx
+++ b/ecosystem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import { useId } from "react";
+import { ChevronDown } from "lucide-react";
 import type { SelectNode } from "@/types/configuration";
 import { useConfigurationBuilder } from "@/hooks/use-configuration-builder";
 import { ControlWrapper } from "./control-wrapper";
@@ -26,7 +27,7 @@ interface SelectControlProps {
 }
 
 const SELECT_CLASS =
-  "w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20";
+  "w-full appearance-none rounded-lg border border-border/60 bg-background/80 px-4 pr-10 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 [color-scheme:dark]";
 
 export function SelectControl({ node, path, value, onChange }: SelectControlProps) {
   const id = useId();
@@ -41,26 +42,34 @@ export function SelectControl({ node, path, value, onChange }: SelectControlProp
       descriptionId={node.description ? descId : undefined}
       error={error}
     >
-      <select
-        id={id}
-        value={value ?? ""}
-        aria-describedby={node.description ? descId : undefined}
-        aria-required={node.required || undefined}
-        onChange={(e) => onChange(path, e.target.value === "" ? null : e.target.value)}
-        onBlur={() => validateField(path)}
-        className={SELECT_CLASS}
-      >
-        {node.nullable ? (
-          <option value="">{node.nullBehavior ?? node.defaultBehavior ?? "Default"}</option>
-        ) : value === null ? (
-          <option value="" disabled hidden />
-        ) : null}
-        {node.enumOptions.map((opt) => (
-          <option key={opt.value} value={opt.value}>
-            {opt.value}
-          </option>
-        ))}
-      </select>
+      <div className="relative">
+        <select
+          id={id}
+          value={value ?? ""}
+          aria-describedby={node.description ? descId : undefined}
+          aria-required={node.required || undefined}
+          onChange={(e) => onChange(path, e.target.value === "" ? null : e.target.value)}
+          onBlur={() => validateField(path)}
+          className={SELECT_CLASS}
+        >
+          {node.nullable ? (
+            <option value="">
+              {node.nullBehavior ?? node.defaultBehavior ?? "Default"}
+            </option>
+          ) : value === null ? (
+            <option value="" disabled hidden />
+          ) : null}
+          {node.enumOptions.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.value}
+            </option>
+          ))}
+        </select>
+        <ChevronDown
+          className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
+          aria-hidden="true"
+        />
+      </div>
     </ControlWrapper>
   );
 }