diff --git a/packages/frontend/src/app/admin/roles/page.tsx b/packages/frontend/src/app/admin/roles/page.tsx
index 4373b4c..c19aa6b 100644
--- a/packages/frontend/src/app/admin/roles/page.tsx
+++ b/packages/frontend/src/app/admin/roles/page.tsx
@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { useAuth } from '@/lib/auth-context';
 import { roles, connectors, tools as toolsApi, users } from '@/lib/api';
 import { NavBar } from '@/components/nav-bar';
+import { AppSelect } from '@/components/ui/select';
 import { Footer } from '@/components/footer';
 
 interface RoleItem {
@@ -429,16 +430,15 @@ export default function AdminRolesPage() {
                           {u.role === 'ADMIN' ? (
                             <span className="text-xs text-[var(--muted-foreground)]">Full access (admin)</span>
                           ) : (
-                            <select
+                            <AppSelect
                               value={u.mcpRoleId || ''}
-                              onChange={(e) => handleAssignRole(u.id, e.target.value || null)}
+                              onValueChange={(v) => handleAssignRole(u.id, v || null)}
                               className="border border-[var(--input)] rounded px-2 py-1 text-xs bg-[var(--background)]"
-                            >
-                              <option value="">No restriction (full access)</option>
-                              {roleList.map((r) => (
-                                <option key={r.id} value={r.id}>{r.name}</option>
-                              ))}
-                            </select>
+                              options={[
+                                { value: '', label: 'No restriction (full access)' },
+                                ...roleList.map((r) => ({ value: r.id, label: r.name })),
+                              ]}
+                            />
                           )}
                         </td>
                       </tr>
diff --git a/packages/frontend/src/app/admin/users/page.tsx b/packages/frontend/src/app/admin/users/page.tsx
index bdabd78..9c64646 100644
--- a/packages/frontend/src/app/admin/users/page.tsx
+++ b/packages/frontend/src/app/admin/users/page.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { useAuth } from '@/lib/auth-context';
 import { users, auth, roles } from '@/lib/api';
 import { NavBar } from '@/components/nav-bar';
+import { AppSelect } from '@/components/ui/select';
 import { Footer } from '@/components/footer';
 
 const ROLES = ['ADMIN', 'EDITOR', 'VIEWER'] as const;
@@ -152,28 +153,24 @@ export default function AdminUsersPage() {
               </div>
               <div>
                 <label className="block text-sm font-medium mb-1">App Role</label>
-                <select
+                <AppSelect
                   value={inviteRole}
-                  onChange={(e) => setInviteRole(e.target.value)}
+                  onValueChange={setInviteRole}
                   className="w-full border border-[var(--input)] rounded-md px-3 py-2 text-sm bg-[var(--background)]"
-                >
-                  {ROLES.map((r) => (
-                    <option key={r} value={r}>{r}</option>
-                  ))}
-                </select>
+                  options={ROLES.map((r) => ({ value: r, label: r }))}
+                />
               </div>
               <div>
                 <label className="block text-sm font-medium mb-1">MCP Tool Role</label>
-                <select
+                <AppSelect
                   value={inviteMcpRoleId}
-                  onChange={(e) => setInviteMcpRoleId(e.target.value)}
+                  onValueChange={setInviteMcpRoleId}
                   className="w-full border border-[var(--input)] rounded-md px-3 py-2 text-sm bg-[var(--background)]"
-                >
-                  <option value="">No restriction (full access)</option>
-                  {roleList.map((r) => (
-                    <option key={r.id} value={r.id}>{r.name}</option>
-                  ))}
-                </select>
+                  options={[
+                    { value: '', label: 'No restriction (full access)' },
+                    ...roleList.map((r) => ({ value: r.id, label: r.name })),
+                  ]}
+                />
               </div>
             </div>
 
@@ -227,15 +224,12 @@ export default function AdminUsersPage() {
                       {u.id === currentUser?.id ? (
                         <span className="text-xs font-medium bg-[var(--muted)] px-2 py-1 rounded">{u.role}</span>
                       ) : (
-                        <select
+                        <AppSelect
                           value={u.role}
-                          onChange={(e) => handleRoleChange(u.id, e.target.value)}
+                          onValueChange={(v) => handleRoleChange(u.id, v)}
                           className="border border-[var(--input)] rounded px-2 py-1 text-xs bg-[var(--background)]"
-                        >
-                          {ROLES.map((r) => (
-                            <option key={r} value={r}>{r}</option>
-                          ))}
-                        </select>
+                          options={ROLES.map((r) => ({ value: r, label: r }))}
+                        />
                       )}
                     </td>
                     <td className="px-4 py-3">
diff --git a/packages/frontend/src/app/connectors/[id]/page.tsx b/packages/frontend/src/app/connectors/[id]/page.tsx
index 221eb61..a3d543e 100644
--- a/packages/frontend/src/app/connectors/[id]/page.tsx
+++ b/packages/frontend/src/app/connectors/[id]/page.tsx
@@ -8,6 +8,7 @@ import { NavBar } from '@/components/nav-bar';
 import { Footer } from '@/components/footer';
 import { ToolEditor } from '@/components/tool-editor';
 import { McpAssignModal } from '@/components/mcp-assign-modal';
+import { AppSelect } from '@/components/ui/select';
 
 const IMPORT_SOURCES = [
   { id: 'openapi', label: 'OpenAPI / Swagger', placeholder: 'Paste OpenAPI JSON/YAML or enter URL...' },
@@ -564,17 +565,18 @@ export default function ConnectorDetailPage() {
               )}
               <div>
                 <label className="block text-sm font-medium mb-1">Authentication</label>
-                <select
+                <AppSelect
                   value={editAuthType}
-                  onChange={(e) => { setEditAuthType(e.target.value); setEditAuthKey(''); setEditAuthValue(''); }}
+                  onValueChange={(v) => { setEditAuthType(v); setEditAuthKey(''); setEditAuthValue(''); }}
                   className="w-full border border-[var(--input)] rounded-md px-3 py-2 text-sm bg-[var(--background)]"
-                >
-                  <option value="NONE">None</option>
-                  <option value="API_KEY">API Key</option>
-                  <option value="BEARER_TOKEN">Bearer Token</option>
-                  <option value="BASIC_AUTH">Basic Auth</option>
-                  <option value="OAUTH2">OAuth 2.0</option>
-                </select>
+                  options={[
+                    { value: 'NONE', label: 'None' },
+                    { value: 'API_KEY', label: 'API Key' },
+                    { value: 'BEARER_TOKEN', label: 'Bearer Token' },
+                    { value: 'BASIC_AUTH', label: 'Basic Auth' },
+                    { value: 'OAUTH2', label: 'OAuth 2.0' },
+                  ]}
+                />
               </div>
               {editAuthType === 'API_KEY' && (
                 <div className="grid grid-cols-2 gap-4">
diff --git a/packages/frontend/src/app/connectors/new/page.tsx b/packages/frontend/src/app/connectors/new/page.tsx
index 371bae1..48b3cd8 100644
--- a/packages/frontend/src/app/connectors/new/page.tsx
+++ b/packages/frontend/src/app/connectors/new/page.tsx
@@ -7,6 +7,7 @@ import { connectors } from '@/lib/api';
 import { NavBar } from '@/components/nav-bar';
 import { Footer } from '@/components/footer';
 import { McpAssignModal } from '@/components/mcp-assign-modal';
+import { AppSelect } from '@/components/ui/select';
 
 const CONNECTOR_TYPES = [
   { id: 'REST', name: 'REST API', description: 'Connect to any REST API. Import from OpenAPI/Swagger spec or configure manually.', color: 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-500/10 dark:text-blue-400 dark:border-blue-500/30', iconBg: 'bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400' },
@@ -277,17 +278,18 @@ export default function NewConnectorPage() {
 
               <div>
                 <label className="block text-sm font-medium mb-1">Authentication</label>
-                <select
+                <AppSelect
                   value={authType}
-                  onChange={(e) => setAuthType(e.target.value)}
+                  onValueChange={setAuthType}
                   className="w-full border border-[var(--input)] rounded-md px-3 py-2 text-sm bg-[var(--background)]"
-                >
-                  <option value="NONE">None</option>
-                  <option value="API_KEY">API Key</option>
-                  <option value="BEARER_TOKEN">Bearer Token</option>
-                  <option value="BASIC_AUTH">Basic Auth</option>
-                  <option value="OAUTH2">OAuth 2.0</option>
-                </select>
+                  options={[
+                    { value: 'NONE', label: 'None' },
+                    { value: 'API_KEY', label: 'API Key' },
+                    { value: 'BEARER_TOKEN', label: 'Bearer Token' },
+                    { value: 'BASIC_AUTH', label: 'Basic Auth' },
+                    { value: 'OAUTH2', label: 'OAuth 2.0' },
+                  ]}
+                />
               </div>
 
               {selectedType === 'MCP' && authType === 'OAUTH2' && (
diff --git a/packages/frontend/src/app/connectors/page.tsx b/packages/frontend/src/app/connectors/page.tsx
index d730cc0..ad3dfb0 100644
--- a/packages/frontend/src/app/connectors/page.tsx
+++ b/packages/frontend/src/app/connectors/page.tsx
@@ -7,6 +7,7 @@ import { connectors } from '@/lib/api';
 import { NavBar } from '@/components/nav-bar';
 import { Footer } from '@/components/footer';
 import * as Dialog from '@radix-ui/react-dialog';
+import { AppSelect } from '@/components/ui/select';
 
 type HealthStatus = { total: number; healthy: number; unhealthy: number; connectors: any[] } | null;
 
@@ -378,19 +379,19 @@ export default function ConnectorsPage() {
                   className="w-full border border-[var(--input)] rounded-md pl-9 pr-3 py-2 text-sm bg-[var(--background)]"
                 />
               </div>
-              <select
+              <AppSelect
                 value={typeFilter}
-                onChange={(e) => setTypeFilter(e.target.value)}
-                aria-label="Filter by connector type"
+                onValueChange={setTypeFilter}
                 className="border border-[var(--input)] rounded-md px-3 py-2 text-sm bg-[var(--background)]"
-              >
-                <option value="">All types</option>
-                <option value="REST">REST</option>
-                <option value="SOAP">SOAP</option>
-                <option value="GRAPHQL">GraphQL</option>
-                <option value="MCP">MCP</option>
-                <option value="DATABASE">Database</option>
-              </select>
+                options={[
+                  { value: '', label: 'All types' },
+                  { value: 'REST', label: 'REST' },
+                  { value: 'SOAP', label: 'SOAP' },
+                  { value: 'GRAPHQL', label: 'GraphQL' },
+                  { value: 'MCP', label: 'MCP' },
+                  { value: 'DATABASE', label: 'Database' },
+                ]}
+              />
               <span className="text-sm text-[var(--muted-foreground)]">
                 {filtered.length} connector{filtered.length !== 1 ? 's' : ''}
               </span>
diff --git a/packages/frontend/src/app/globals.css b/packages/frontend/src/app/globals.css
index 7aaebd4..5d973c6 100644
--- a/packages/frontend/src/app/globals.css
+++ b/packages/frontend/src/app/globals.css
@@ -99,21 +99,6 @@ button:not(:disabled), select, summary, [role="button"] {
   cursor: pointer;
 }
 
-/* Custom chevron arrow for native select elements.
-   appearance-none removes the browser's built-in arrow so we can control spacing.
-   padding-right !important overrides Tailwind px-* utilities to make room for the arrow. */
-main select {
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19 9-7 7-7-7'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 0.5rem center;
-  background-size: 1.25em 1.25em;
-  padding-right: 2rem !important;
-}
-
-.dark main select {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19 9-7 7-7-7'/%3E%3C/svg%3E");
-}
 button:disabled {
   cursor: not-allowed;
 }
diff --git a/packages/frontend/src/app/logs/page.tsx b/packages/frontend/src/app/logs/page.tsx
index 17e5eb1..346dc43 100644
--- a/packages/frontend/src/app/logs/page.tsx
+++ b/packages/frontend/src/app/logs/page.tsx
@@ -5,6 +5,7 @@ import { useAuth } from '@/lib/auth-context';
 import { audit, connectors as connectorsApi, mcpServers } from '@/lib/api';
 import { NavBar } from '@/components/nav-bar';
 import { Footer } from '@/components/footer';
+import { AppSelect } from '@/components/ui/select';
 
 const PAGE_SIZE = 50;
 
@@ -142,36 +143,35 @@ export default function LogsPage() {
               className="w-full border border-[var(--input)] rounded-md pl-10 pr-3 py-2 text-sm bg-[var(--background)]"
             />
           </div>
-          <select
+          <AppSelect
             value={statusFilter}
-            onChange={(e) => setStatusFilter(e.target.value)}
+            onValueChange={setStatusFilter}
             className="border border-[var(--input)] rounded-md px-3 py-2 text-sm bg-[var(--background)]"
-          >
-            <option value="">All statuses</option>
-            <option value="SUCCESS">Success</option>
-            <option value="ERROR">Error</option>
-            <option value="TIMEOUT">Timeout</option>
-          </select>
-          <select
+            options={[
+              { value: '', label: 'All statuses' },
+              { value: 'SUCCESS', label: 'Success' },
+              { value: 'ERROR', label: 'Error' },
+              { value: 'TIMEOUT', label: 'Timeout' },
+            ]}
+          />
+          <AppSelect
             value={connectorFilter}
-            onChange={(e) => setConnectorFilter(e.target.value)}
+            onValueChange={setConnectorFilter}
             className="border border-[var(--input)] rounded-md px-3 py-2 text-sm bg-[var(--background)]"
-          >
-            <option value="">All connectors</option>
-            {connectors.map((c) => (
-              <option key={c.id} value={c.id}>{c.name}</option>
-            ))}
-          </select>
-          <select
+            options={[
+              { value: '', label: 'All connectors' },
+              ...connectors.map((c) => ({ value: c.id, label: c.name })),
+            ]}
+          />
+          <AppSelect
             value={mcpServerFilter}
-            onChange={(e) => setMcpServerFilter(e.target.value)}
+            onValueChange={setMcpServerFilter}
             className="border border-[var(--input)] rounded-md px-3 py-2 text-sm bg-[var(--background)]"
-          >
-            <option value="">All MCP servers</option>
-            {servers.map((s) => (
-              <option key={s.id} value={s.id}>{s.name}</option>
-            ))}
-          </select>
+            options={[
+              { value: '', label: 'All MCP servers' },
+              ...servers.map((s) => ({ value: s.id, label: s.name })),
+            ]}
+          />
           <button
             onClick={fetchLogs}
             disabled={loading}
diff --git a/packages/frontend/src/app/mcp-server/page.tsx b/packages/frontend/src/app/mcp-server/page.tsx
index 67d7da3..c8dc7ea 100644
--- a/packages/frontend/src/app/mcp-server/page.tsx
+++ b/packages/frontend/src/app/mcp-server/page.tsx
@@ -6,6 +6,7 @@ import { useAuth } from '@/lib/auth-context';
 import { mcpServers } from '@/lib/api';
 import { NavBar } from '@/components/nav-bar';
 import { Footer } from '@/components/footer';
+import { AppSelect } from '@/components/ui/select';
 
 export default function McpServerListPage() {
   const { token } = useAuth();
@@ -126,15 +127,16 @@ export default function McpServerListPage() {
                 className="w-full border border-[var(--input)] rounded-md pl-10 pr-3 py-2 text-sm bg-[var(--background)]"
               />
             </div>
-            <select
+            <AppSelect
               value={statusFilter}
-              onChange={(e) => setStatusFilter(e.target.value)}
+              onValueChange={setStatusFilter}
               className="border border-[var(--input)] rounded-md px-3 py-2 text-sm bg-[var(--background)]"
-            >
-              <option value="">All statuses</option>
-              <option value="active">Active</option>
-              <option value="inactive">Inactive</option>
-            </select>
+              options={[
+                { value: '', label: 'All statuses' },
+                { value: 'active', label: 'Active' },
+                { value: 'inactive', label: 'Inactive' },
+              ]}
+            />
           </div>
         )}
 
diff --git a/packages/frontend/src/app/settings/roles/page.tsx b/packages/frontend/src/app/settings/roles/page.tsx
index b8f28c7..e128001 100644
--- a/packages/frontend/src/app/settings/roles/page.tsx
+++ b/packages/frontend/src/app/settings/roles/page.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { useAuth } from '@/lib/auth-context';
 import { roles, connectors, tools as toolsApi, users } from '@/lib/api';
+import { AppSelect } from '@/components/ui/select';
 
 interface RoleItem {
   id: string;
@@ -531,16 +532,15 @@ export default function SettingsRolesPage() {
                         {u.role === 'ADMIN' ? (
                           <span className="text-xs text-[var(--muted-foreground)]">Full access (admin)</span>
                         ) : (
-                          <select
+                          <AppSelect
                             value={u.mcpRoleId || ''}
-                            onChange={(e) => handleAssignRole(u.id, e.target.value || null)}
+                            onValueChange={(v) => handleAssignRole(u.id, v || null)}
                             className="border border-[var(--input)] rounded px-2 py-1 text-xs bg-[var(--background)]"
-                          >
-                            <option value="">No restriction (full access)</option>
-                            {roleList.map((r) => (
-                              <option key={r.id} value={r.id}>{r.name}</option>
-                            ))}
-                          </select>
+                            options={[
+                              { value: '', label: 'No restriction (full access)' },
+                              ...roleList.map((r) => ({ value: r.id, label: r.name })),
+                            ]}
+                          />
                         )}
                       </td>
                     </tr>
diff --git a/packages/frontend/src/app/settings/users/page.tsx b/packages/frontend/src/app/settings/users/page.tsx
index 421a6cb..54d5068 100644
--- a/packages/frontend/src/app/settings/users/page.tsx
+++ b/packages/frontend/src/app/settings/users/page.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { useAuth } from '@/lib/auth-context';
 import { users, auth, roles } from '@/lib/api';
+import { AppSelect } from '@/components/ui/select';
 
 const ROLES = ['ADMIN', 'EDITOR', 'VIEWER'] as const;
 
@@ -169,28 +170,24 @@ export default function SettingsUsersPage() {
             </div>
             <div>
               <label className="block text-sm font-medium mb-1">App Role</label>
-              <select
+              <AppSelect
                 value={inviteRole}
-                onChange={(e) => setInviteRole(e.target.value)}
+                onValueChange={setInviteRole}
                 className="w-full border border-[var(--input)] rounded-md px-3 py-2 text-sm bg-[var(--background)]"
-              >
-                {ROLES.map((r) => (
-                  <option key={r} value={r}>{r}</option>
-                ))}
-              </select>
+                options={ROLES.map((r) => ({ value: r, label: r }))}
+              />
             </div>
             <div>
               <label className="block text-sm font-medium mb-1">MCP Tool Role</label>
-              <select
+              <AppSelect
                 value={inviteMcpRoleId}
-                onChange={(e) => setInviteMcpRoleId(e.target.value)}
+                onValueChange={setInviteMcpRoleId}
                 className="w-full border border-[var(--input)] rounded-md px-3 py-2 text-sm bg-[var(--background)]"
-              >
-                <option value="">No restriction (full access)</option>
-                {roleList.map((r) => (
-                  <option key={r.id} value={r.id}>{r.name}</option>
-                ))}
-              </select>
+                options={[
+                  { value: '', label: 'No restriction (full access)' },
+                  ...roleList.map((r) => ({ value: r.id, label: r.name })),
+                ]}
+              />
             </div>
           </div>
 
@@ -260,15 +257,12 @@ export default function SettingsUsersPage() {
                     {u.id === currentUser?.id ? (
                       <span className="text-xs font-medium bg-[var(--muted)] px-2 py-1 rounded">{u.role}</span>
                     ) : (
-                      <select
+                      <AppSelect
                         value={u.role}
-                        onChange={(e) => handleRoleChange(u.id, e.target.value)}
+                        onValueChange={(v) => handleRoleChange(u.id, v)}
                         className="border border-[var(--input)] rounded px-2 py-1 text-xs bg-[var(--background)]"
-                      >
-                        {ROLES.map((r) => (
-                          <option key={r} value={r}>{r}</option>
-                        ))}
-                      </select>
+                        options={ROLES.map((r) => ({ value: r, label: r }))}
+                      />
                     )}
                   </td>
                   <td className="px-4 py-3">
diff --git a/packages/frontend/src/components/tool-editor/index.tsx b/packages/frontend/src/components/tool-editor/index.tsx
index 4a67a22..6ef6835 100644
--- a/packages/frontend/src/components/tool-editor/index.tsx
+++ b/packages/frontend/src/components/tool-editor/index.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
+import { AppSelect } from '@/components/ui/select';
 
 /* ------------------------------------------------------------------ */
 /*  Types                                                             */
@@ -575,22 +576,22 @@ export function ToolEditor({
         {/* Tool Type selector — available for all connector types */}
         <div>
           <label className="block text-xs font-medium mb-1">Tool Type</label>
-          <select
+          <AppSelect
             value={method === 'static' ? 'static' : 'native'}
-            onChange={e => {
-              if (e.target.value === 'static') {
+            onValueChange={v => {
+              if (v === 'static') {
                 setMethod('static');
               } else {
-                // Reset to the default native method for this connector type
                 const nativeMethods = methods.filter(m => m !== 'static');
                 setMethod(nativeMethods[0] || methods[0]);
               }
             }}
             className="w-56 border border-[var(--input)] rounded-md px-3 py-2 text-sm bg-[var(--background)]"
-          >
-            <option value="native">{getNativeLabel(type)}</option>
-            <option value="static">Static Text</option>
-          </select>
+            options={[
+              { value: 'native', label: getNativeLabel(type) },
+              { value: 'static', label: 'Static Text' },
+            ]}
+          />
         </div>
 
         {method === 'static' ? (
@@ -612,15 +613,12 @@ export function ToolEditor({
           <div className="space-y-3">
             <div>
               <label className="block text-xs font-medium mb-1">Operation Type</label>
-              <select
+              <AppSelect
                 value={method}
-                onChange={e => setMethod(e.target.value)}
+                onValueChange={setMethod}
                 className="w-48 border border-[var(--input)] rounded-md px-3 py-2 text-sm bg-[var(--background)]"
-              >
-                {methods.filter(m => m !== 'static').map(m => (
-                  <option key={m} value={m}>{m}</option>
-                ))}
-              </select>
+                options={methods.filter(m => m !== 'static').map(m => ({ value: m, label: m }))}
+              />
             </div>
             <div>
               <label className="block text-xs font-medium mb-1">GraphQL Query / Mutation</label>
@@ -681,15 +679,12 @@ export function ToolEditor({
           <div className="grid grid-cols-[120px_1fr] gap-3">
             <div>
               <label className="block text-xs font-medium mb-1">Method</label>
-              <select
+              <AppSelect
                 value={method}
-                onChange={e => setMethod(e.target.value)}
+                onValueChange={setMethod}
                 className="w-full border border-[var(--input)] rounded-md px-3 py-2 text-sm bg-[var(--background)]"
-              >
-                {methods.filter(m => m !== 'static').map(m => (
-                  <option key={m} value={m}>{m}</option>
-                ))}
-              </select>
+                options={methods.filter(m => m !== 'static').map(m => ({ value: m, label: m }))}
+              />
             </div>
             <div>
               <label className="block text-xs font-medium mb-1">Path</label>
@@ -738,15 +733,16 @@ export function ToolEditor({
           {!useBodyTemplate && (
             <div className="flex items-center gap-2">
               <label className="text-xs text-[var(--muted-foreground)]">Encoding:</label>
-              <select
+              <AppSelect
                 value={bodyEncoding}
-                onChange={e => setBodyEncoding(e.target.value)}
+                onValueChange={setBodyEncoding}
                 className="border border-[var(--input)] rounded px-2 py-1 text-xs bg-[var(--background)]"
-              >
-                <option value="json">application/json</option>
-                <option value="form-urlencoded">application/x-www-form-urlencoded</option>
-                <option value="form-data">multipart/form-data</option>
-              </select>
+                options={[
+                  { value: 'json', label: 'application/json' },
+                  { value: 'form-urlencoded', label: 'application/x-www-form-urlencoded' },
+                  { value: 'form-data', label: 'multipart/form-data' },
+                ]}
+              />
             </div>
           )}
 
@@ -844,18 +840,19 @@ export function ToolEditor({
                     </span>
                   )}
                 </div>
-                <select
+                <AppSelect
                   value={param.type}
-                  onChange={e => updateParam(i, { type: e.target.value as ToolParam['type'] })}
+                  onValueChange={v => updateParam(i, { type: v as ToolParam['type'] })}
                   className="border border-[var(--input)] rounded px-2 py-1.5 text-xs bg-[var(--background)]"
-                >
-                  <option value="string">string</option>
-                  <option value="number">number</option>
-                  <option value="integer">integer</option>
-                  <option value="boolean">boolean</option>
-                  <option value="array">array</option>
-                  <option value="object">object</option>
-                </select>
+                  options={[
+                    { value: 'string', label: 'string' },
+                    { value: 'number', label: 'number' },
+                    { value: 'integer', label: 'integer' },
+                    { value: 'boolean', label: 'boolean' },
+                    { value: 'array', label: 'array' },
+                    { value: 'object', label: 'object' },
+                  ]}
+                />
                 <input
                   type="text"
                   value={param.description}
@@ -863,15 +860,12 @@ export function ToolEditor({
                   placeholder="Describe this parameter..."
                   className="border border-[var(--input)] rounded px-2 py-1.5 text-xs bg-[var(--background)]"
                 />
-                <select
+                <AppSelect
                   value={param.target}
-                  onChange={e => updateParam(i, { target: e.target.value as ToolParam['target'] })}
+                  onValueChange={v => updateParam(i, { target: v as ToolParam['target'] })}
                   className="border border-[var(--input)] rounded px-2 py-1.5 text-xs bg-[var(--background)]"
-                >
-                  {targets.map(t => (
-                    <option key={t.value} value={t.value}>{t.label}</option>
-                  ))}
-                </select>
+                  options={targets.map(t => ({ value: t.value, label: t.label }))}
+                />
                 <div className="flex justify-center">
                   <input
                     type="checkbox"
diff --git a/packages/frontend/src/components/ui/select.tsx b/packages/frontend/src/components/ui/select.tsx
new file mode 100644
index 0000000..b7a1ffd
--- /dev/null
+++ b/packages/frontend/src/components/ui/select.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import * as Select from '@radix-ui/react-select';
+
+const NONE = '__NONE__';
+
+interface AppSelectProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  options: { value: string; label: string }[];
+  className?: string;
+  disabled?: boolean;
+}
+
+export function AppSelect({ value, onValueChange, options, className, disabled }: AppSelectProps) {
+  const radixValue = value === '' ? NONE : value;
+
+  return (
+    <Select.Root
+      value={radixValue}
+      onValueChange={(v) => onValueChange(v === NONE ? '' : v)}
+      disabled={disabled}
+    >
+      <Select.Trigger className={`flex items-center justify-between gap-2 ${className ?? ''}`}>
+        <Select.Value />
+        <Select.Icon asChild>
+          <svg
+            className="w-4 h-4 text-[var(--muted-foreground)] flex-shrink-0"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="m19 9-7 7-7-7" />
+          </svg>
+        </Select.Icon>
+      </Select.Trigger>
+      <Select.Portal>
+        <Select.Content
+          position="popper"
+          sideOffset={4}
+          collisionPadding={8}
+          className="bg-[var(--background)] border border-[var(--border)] rounded-md shadow-md min-w-[var(--radix-select-trigger-width)] max-h-60 overflow-auto z-50"
+        >
+          <Select.Viewport>
+            {options.map((opt) => (
+              <Select.Item
+                key={opt.value === '' ? NONE : opt.value}
+                value={opt.value === '' ? NONE : opt.value}
+                className="px-3 py-1.5 text-sm cursor-pointer outline-none select-none hover:bg-[var(--accent)] focus:bg-[var(--accent)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
+              >
+                <Select.ItemText>{opt.label}</Select.ItemText>
+              </Select.Item>
+            ))}
+          </Select.Viewport>
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+}