From 97cd5e989afa8654276451fc3f5a1e6fbbfcb129 Mon Sep 17 00:00:00 2001
From: keyhan <k.tahvilpour@greenweb.ir>
Date: Fri, 12 Jun 2026 17:37:04 +0330
Subject: [PATCH] Unify all dropdowns on the custom Select component.

Replace every native <select> across the dashboard, admin pages, and
shared components with the custom Select used by the optional-service
version pickers, for consistent styling and mobile-safe anchoring. Add
a disabled prop to Select to cover the former read-only native cases.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../app/[lang]/dashboard/admin/apps/page.tsx  |  28 +-
 .../[lang]/dashboard/admin/billing/page.tsx   |  87 ++--
 .../[lang]/dashboard/admin/clusters/page.tsx  |  40 +-
 .../[lang]/dashboard/admin/invoices/page.tsx  |  38 +-
 .../app/[lang]/dashboard/admin/pools/page.tsx |  25 +-
 .../app/[lang]/dashboard/admin/users/page.tsx |  62 +--
 .../app/[lang]/dashboard/apps/[id]/page.tsx   |  22 +-
 .../src/app/[lang]/dashboard/deploy/page.tsx  | 398 +++++++++---------
 .../src/app/[lang]/dashboard/logs/page.tsx    | 101 ++---
 .../[lang]/dashboard/services/new/page.tsx    |  35 +-
 .../src/app/[lang]/dashboard/tickets/page.tsx |  35 +-
 .../database-workload-resources.tsx           |  81 ++--
 .../components/managed-database-config.tsx    |  21 +-
 .../optional-service-resource-fields.tsx      |  41 +-
 .../service-external-access-panel.tsx         |  17 +-
 frontend/src/components/ui/select.tsx         | 127 ++++++
 16 files changed, 664 insertions(+), 494 deletions(-)
 create mode 100644 frontend/src/components/ui/select.tsx

diff --git a/frontend/src/app/[lang]/dashboard/admin/apps/page.tsx b/frontend/src/app/[lang]/dashboard/admin/apps/page.tsx
index 69fb3c7..2664102 100644
--- a/frontend/src/app/[lang]/dashboard/admin/apps/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/admin/apps/page.tsx
@@ -19,6 +19,7 @@ import {
 import { TruncatedText } from '@/components/truncated-text';
 import { useDebounce } from '@/hooks/useDebounce';
 import { useApplicationDelete } from '@/lib/use-application-delete';
+import { Select } from '@/components/ui/select';
 
 const statusColors: Record<string, string> = {
   running: 'badge-green',
@@ -605,23 +606,18 @@ export default function AdminAppsPage() {
                   </p>
                 )}
               </div>
-              <select
-                className="input-field"
+              <Select
+                size="md"
+                ariaLabel={aa.selectHealthyCluster}
+                placeholder={aa.selectHealthyCluster}
                 value={targetClusterId}
-                onChange={(e) => setTargetClusterId(e.target.value)}
-              >
-                <option value="">{aa.selectHealthyCluster}</option>
-                {targetClusters
-                  .map((cluster) => (
-                    <option
-                      key={cluster.id}
-                      value={cluster.id}
-                      disabled={cluster.status !== 'active' || cluster.healthStatus !== 'healthy'}
-                    >
-                      {cluster.name} · {cluster.region || aa.na} · {cluster.status}/{cluster.healthStatus || aa.unknown}
-                    </option>
-                  ))}
-              </select>
+                onChange={(v) => setTargetClusterId(v)}
+                options={targetClusters.map((cluster) => ({
+                  value: cluster.id,
+                  label: `${cluster.name} · ${cluster.region || aa.na} · ${cluster.status}/${cluster.healthStatus || aa.unknown}`,
+                  disabled: cluster.status !== 'active' || cluster.healthStatus !== 'healthy',
+                }))}
+              />
               <p className="text-xs text-gray-400 mt-1">
                 {aa.currentExcludedNote}
               </p>
diff --git a/frontend/src/app/[lang]/dashboard/admin/billing/page.tsx b/frontend/src/app/[lang]/dashboard/admin/billing/page.tsx
index e320d44..b8c08b8 100644
--- a/frontend/src/app/[lang]/dashboard/admin/billing/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/admin/billing/page.tsx
@@ -15,6 +15,7 @@ import type {
   LifecycleSettings,
 } from '@/types';
 import { DollarSign, Edit2, Shield, Clock, Layers, Info, Box, Server, Globe } from 'lucide-react';
+import { Select } from '@/components/ui/select';
 
 const cycles: BillingCycle[] = ['hourly', 'monthly', 'yearly'];
 
@@ -198,16 +199,19 @@ function DeployDefaultsFields({
           {readOnly ? (
             <p className="text-sm font-mono mt-1">{profile.cpuRequest || '—'}</p>
           ) : (
-            <select
-              className="input-field w-full text-sm mt-0.5"
+            <Select
+              size="md"
+              className="mt-0.5"
+              ariaLabel={b.cpuRequest}
               value={profile.cpuRequest || '50m'}
-              onChange={(e) => onUpdate({ cpuRequest: e.target.value })}
-            >
-              <option value="50m">50m</option>
-              <option value="100m">100m</option>
-              <option value="250m">250m</option>
-              <option value="500m">500m</option>
-            </select>
+              onChange={(v) => onUpdate({ cpuRequest: v })}
+              options={[
+                { value: '50m', label: '50m' },
+                { value: '100m', label: '100m' },
+                { value: '250m', label: '250m' },
+                { value: '500m', label: '500m' },
+              ]}
+            />
           )}
         </div>
         <div>
@@ -215,17 +219,20 @@ function DeployDefaultsFields({
           {readOnly ? (
             <p className="text-sm font-mono mt-1">{profile.cpuLimit}</p>
           ) : (
-            <select
-              className="input-field w-full text-sm mt-0.5"
+            <Select
+              size="md"
+              className="mt-0.5"
+              ariaLabel={b.cpuLimit}
               value={profile.cpuLimit}
-              onChange={(e) => onUpdate({ cpuLimit: e.target.value })}
-            >
-              <option value="200m">200m</option>
-              <option value="250m">250m</option>
-              <option value="500m">500m</option>
-              <option value="1">{b.oneCore}</option>
-              <option value="2">{b.twoCores}</option>
-            </select>
+              onChange={(v) => onUpdate({ cpuLimit: v })}
+              options={[
+                { value: '200m', label: '200m' },
+                { value: '250m', label: '250m' },
+                { value: '500m', label: '500m' },
+                { value: '1', label: b.oneCore },
+                { value: '2', label: b.twoCores },
+              ]}
+            />
           )}
         </div>
         <div>
@@ -233,16 +240,19 @@ function DeployDefaultsFields({
           {readOnly ? (
             <p className="text-sm font-mono mt-1">{profile.memoryRequest || '—'}</p>
           ) : (
-            <select
-              className="input-field w-full text-sm mt-0.5"
+            <Select
+              size="md"
+              className="mt-0.5"
+              ariaLabel={b.memoryRequest}
               value={profile.memoryRequest || '64Mi'}
-              onChange={(e) => onUpdate({ memoryRequest: e.target.value })}
-            >
-              <option value="64Mi">64 Mi</option>
-              <option value="128Mi">128 Mi</option>
-              <option value="256Mi">256 Mi</option>
-              <option value="512Mi">512 Mi</option>
-            </select>
+              onChange={(v) => onUpdate({ memoryRequest: v })}
+              options={[
+                { value: '64Mi', label: '64 Mi' },
+                { value: '128Mi', label: '128 Mi' },
+                { value: '256Mi', label: '256 Mi' },
+                { value: '512Mi', label: '512 Mi' },
+              ]}
+            />
           )}
         </div>
         <div>
@@ -250,16 +260,19 @@ function DeployDefaultsFields({
           {readOnly ? (
             <p className="text-sm font-mono mt-1">{profile.memoryLimit}</p>
           ) : (
-            <select
-              className="input-field w-full text-sm mt-0.5"
+            <Select
+              size="md"
+              className="mt-0.5"
+              ariaLabel={b.memoryLimit}
               value={profile.memoryLimit}
-              onChange={(e) => onUpdate({ memoryLimit: e.target.value })}
-            >
-              <option value="256Mi">256 Mi</option>
-              <option value="512Mi">512 Mi</option>
-              <option value="1Gi">1 Gi</option>
-              <option value="2Gi">2 Gi</option>
-            </select>
+              onChange={(v) => onUpdate({ memoryLimit: v })}
+              options={[
+                { value: '256Mi', label: '256 Mi' },
+                { value: '512Mi', label: '512 Mi' },
+                { value: '1Gi', label: '1 Gi' },
+                { value: '2Gi', label: '2 Gi' },
+              ]}
+            />
           )}
         </div>
         <div className="sm:col-span-2">
diff --git a/frontend/src/app/[lang]/dashboard/admin/clusters/page.tsx b/frontend/src/app/[lang]/dashboard/admin/clusters/page.tsx
index 6c2aff2..81552d8 100644
--- a/frontend/src/app/[lang]/dashboard/admin/clusters/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/admin/clusters/page.tsx
@@ -8,6 +8,7 @@ import { useT, useLocale } from '@/i18n/I18nProvider';
 import type { Cluster, ClusterResources } from '@/types';
 import { Server, CheckCircle, XCircle, BarChart3, Clock, RotateCw, Plug, X, ScrollText } from 'lucide-react';
 import { useConfirm } from '@/components/confirm-modal';
+import { Select } from '@/components/ui/select';
 
 function ResourcePanel({ clusterId }: { clusterId: string }) {
   const cl = useT().dashboard.clusters;
@@ -345,17 +346,16 @@ function ClusterToolsPanel({
           <p className="text-sm text-gray-600 mt-1">{cl.toolsSubtitle}</p>
         </div>
         {clusters.length > 1 && (
-          <select
-            className="input-field text-sm py-1.5 max-w-[220px]"
+          <Select
+            className="max-w-[220px]"
+            ariaLabel={cl.toolsTitle}
             value={clusterId || ''}
-            onChange={(e) => onSelectCluster(e.target.value)}
-          >
-            {clusters.map((c) => (
-              <option key={c.id} value={c.id}>
-                {c.name}{c.isDefault ? cl.defaultSuffix : ''}
-              </option>
-            ))}
-          </select>
+            onChange={(v) => onSelectCluster(v)}
+            options={clusters.map((c) => ({
+              value: c.id,
+              label: `${c.name}${c.isDefault ? cl.defaultSuffix : ''}`,
+            }))}
+          />
         )}
       </div>
 
@@ -502,13 +502,19 @@ export default function AdminClustersPage() {
             </div>
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-1">{cl.provider}</label>
-              <select className="input-field" value={form.provider} onChange={(e) => setForm({ ...form, provider: e.target.value })}>
-                <option value="">{cl.selectProvider}</option>
-                <option value="aws">AWS (EKS)</option>
-                <option value="gcp">GCP (GKE)</option>
-                <option value="azure">Azure (AKS)</option>
-                <option value="bare-metal">Bare Metal</option>
-              </select>
+              <Select
+                size="md"
+                ariaLabel={cl.provider}
+                placeholder={cl.selectProvider}
+                value={form.provider}
+                onChange={(v) => setForm({ ...form, provider: v })}
+                options={[
+                  { value: 'aws', label: 'AWS (EKS)' },
+                  { value: 'gcp', label: 'GCP (GKE)' },
+                  { value: 'azure', label: 'Azure (AKS)' },
+                  { value: 'bare-metal', label: 'Bare Metal' },
+                ]}
+              />
             </div>
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-1">{cl.weight}</label>
diff --git a/frontend/src/app/[lang]/dashboard/admin/invoices/page.tsx b/frontend/src/app/[lang]/dashboard/admin/invoices/page.tsx
index 4bcfc11..c2f3bb7 100644
--- a/frontend/src/app/[lang]/dashboard/admin/invoices/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/admin/invoices/page.tsx
@@ -7,6 +7,7 @@ import { toast } from 'react-toastify';
 import api from '@/lib/api';
 import { useT, useLocale } from '@/i18n/I18nProvider';
 import type { Invoice, InvoiceStatus, PaymentMethod } from '@/types';
+import { Select } from '@/components/ui/select';
 
 const statusClasses: Record<InvoiceStatus, string> = {
   draft: 'badge-gray',
@@ -108,18 +109,31 @@ export default function AdminInvoicesPage() {
             className="input-field pl-9 rtl:pl-3 rtl:pr-9 w-full"
           />
         </div>
-        <select value={status} onChange={(e) => setStatus(e.target.value as any)} className="input-field">
-          <option value="all">{inv.allStatuses}</option>
-          {(Object.keys(inv.status) as InvoiceStatus[]).map((value) => (
-            <option key={value} value={value}>{statusLabel(value)}</option>
-          ))}
-        </select>
-        <select value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value as any)} className="input-field">
-          <option value="all">{inv.allMethods}</option>
-          <option value="wallet">{inv.methodWallet}</option>
-          <option value="gateway">{inv.methodGateway}</option>
-          <option value="mixed">{inv.methodMixed}</option>
-        </select>
+        <Select
+          size="md"
+          ariaLabel={inv.allStatuses}
+          value={status}
+          onChange={(v) => setStatus(v as any)}
+          options={[
+            { value: 'all', label: inv.allStatuses },
+            ...(Object.keys(inv.status) as InvoiceStatus[]).map((value) => ({
+              value,
+              label: statusLabel(value),
+            })),
+          ]}
+        />
+        <Select
+          size="md"
+          ariaLabel={inv.allMethods}
+          value={paymentMethod}
+          onChange={(v) => setPaymentMethod(v as any)}
+          options={[
+            { value: 'all', label: inv.allMethods },
+            { value: 'wallet', label: inv.methodWallet },
+            { value: 'gateway', label: inv.methodGateway },
+            { value: 'mixed', label: inv.methodMixed },
+          ]}
+        />
       </div>
 
       <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
diff --git a/frontend/src/app/[lang]/dashboard/admin/pools/page.tsx b/frontend/src/app/[lang]/dashboard/admin/pools/page.tsx
index 421f50c..7f3ea3b 100644
--- a/frontend/src/app/[lang]/dashboard/admin/pools/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/admin/pools/page.tsx
@@ -8,6 +8,7 @@ import { useT, useLocale } from '@/i18n/I18nProvider';
 import type { Cluster, ClusterPool } from '@/types';
 import { Scale, BarChart3, RotateCw, CheckCircle, XCircle, Pencil, Clock, X } from 'lucide-react';
 import { useConfirm } from '@/components/confirm-modal';
+import { Select } from '@/components/ui/select';
 
 export default function AdminPoolsPage() {
   const t = useT();
@@ -150,18 +151,20 @@ export default function AdminPoolsPage() {
             </div>
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-1">{p.strategy}</label>
-              <select
-                className="input-field"
+              <Select
+                size="md"
+                ariaLabel={p.strategy}
                 value={form.strategy}
-                onChange={(e) => setForm({ ...form, strategy: e.target.value as any })}
-              >
-                <option value="weighted-resource">{strategyOption('weighted-resource')}</option>
-                <option value="least-loaded">{strategyOption('least-loaded')}</option>
-                <option value="weighted-round-robin">{strategyOption('weighted-round-robin')}</option>
-                <option value="region-based">{strategyOption('region-based')}</option>
-                <option value="least-apps">{strategyOption('least-apps')}</option>
-                <option value="round-robin">{strategyOption('round-robin')}</option>
-              </select>
+                onChange={(v) => setForm({ ...form, strategy: v as any })}
+                options={[
+                  { value: 'weighted-resource', label: strategyOption('weighted-resource') },
+                  { value: 'least-loaded', label: strategyOption('least-loaded') },
+                  { value: 'weighted-round-robin', label: strategyOption('weighted-round-robin') },
+                  { value: 'region-based', label: strategyOption('region-based') },
+                  { value: 'least-apps', label: strategyOption('least-apps') },
+                  { value: 'round-robin', label: strategyOption('round-robin') },
+                ]}
+              />
             </div>
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-1">{p.priority}</label>
diff --git a/frontend/src/app/[lang]/dashboard/admin/users/page.tsx b/frontend/src/app/[lang]/dashboard/admin/users/page.tsx
index 36bb31a..18e0177 100644
--- a/frontend/src/app/[lang]/dashboard/admin/users/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/admin/users/page.tsx
@@ -8,6 +8,7 @@ import { useT, useLocale } from '@/i18n/I18nProvider';
 import { toast } from 'react-toastify';
 import type { AdminUser } from '@/types';
 import { Users, Search, X, Clock, KeyRound } from 'lucide-react';
+import { Select } from '@/components/ui/select';
 
 export default function AdminUsersPage() {
   const t = useT();
@@ -166,16 +167,19 @@ export default function AdminUsersPage() {
           </div>
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">{u.role}</label>
-            <select
-              className="input-field w-full sm:w-48"
+            <Select
+              size="md"
+              className="w-full sm:w-48"
+              ariaLabel={u.role}
               value={form.role}
-              onChange={(e) => setForm({ ...form, role: e.target.value as typeof form.role })}
-            >
-              <option value="user">{u.roles.user}</option>
-              <option value="admin">{u.roles.admin}</option>
-              <option value="technical">{u.roles.technical}</option>
-              <option value="sales">{u.roles.sales}</option>
-            </select>
+              onChange={(v) => setForm({ ...form, role: v as typeof form.role })}
+              options={[
+                { value: 'user', label: u.roles.user },
+                { value: 'admin', label: u.roles.admin },
+                { value: 'technical', label: u.roles.technical },
+                { value: 'sales', label: u.roles.sales },
+              ]}
+            />
           </div>
           <button
             onClick={() => createUser.mutate(form)}
@@ -241,16 +245,18 @@ export default function AdminUsersPage() {
                     <td className="px-6 py-4 text-sm text-gray-600">{user.email}</td>
                     <td className="px-6 py-4">
                       {isAdmin ? (
-                        <select
-                          className="text-sm border border-gray-200 rounded-lg px-2.5 py-1.5 bg-white focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+                        <Select
+                          className="w-40"
+                          ariaLabel={u.role}
                           value={user.role}
-                          onChange={(e) => changeRole.mutate({ id: user.id, role: e.target.value })}
-                        >
-                          <option value="user">{u.roles.user}</option>
-                          <option value="admin">{u.roles.admin}</option>
-                          <option value="technical">{u.roles.technical}</option>
-                          <option value="sales">{u.roles.sales}</option>
-                        </select>
+                          onChange={(v) => changeRole.mutate({ id: user.id, role: v })}
+                          options={[
+                            { value: 'user', label: u.roles.user },
+                            { value: 'admin', label: u.roles.admin },
+                            { value: 'technical', label: u.roles.technical },
+                            { value: 'sales', label: u.roles.sales },
+                          ]}
+                        />
                       ) : (
                         <span className={`badge ${
                           user.role === 'admin' ? 'badge-purple' :
@@ -322,16 +328,18 @@ export default function AdminUsersPage() {
                 </div>
                 <div className="flex flex-wrap items-center gap-2 pt-2 border-t border-gray-100">
                   {isAdmin ? (
-                    <select
-                      className="text-sm border border-gray-200 rounded-lg px-2.5 py-1.5 bg-white focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+                    <Select
+                      className="w-40"
+                      ariaLabel={u.role}
                       value={user.role}
-                      onChange={(e) => changeRole.mutate({ id: user.id, role: e.target.value })}
-                    >
-                      <option value="user">{u.roles.user}</option>
-                      <option value="admin">{u.roles.admin}</option>
-                      <option value="technical">{u.roles.technical}</option>
-                      <option value="sales">{u.roles.sales}</option>
-                    </select>
+                      onChange={(v) => changeRole.mutate({ id: user.id, role: v })}
+                      options={[
+                        { value: 'user', label: u.roles.user },
+                        { value: 'admin', label: u.roles.admin },
+                        { value: 'technical', label: u.roles.technical },
+                        { value: 'sales', label: u.roles.sales },
+                      ]}
+                    />
                   ) : (
                     <span className="text-sm text-gray-500">{roleLabel(user.role)}</span>
                   )}
diff --git a/frontend/src/app/[lang]/dashboard/apps/[id]/page.tsx b/frontend/src/app/[lang]/dashboard/apps/[id]/page.tsx
index 3fcdb73..2cc48df 100644
--- a/frontend/src/app/[lang]/dashboard/apps/[id]/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/apps/[id]/page.tsx
@@ -19,6 +19,7 @@ import { useConfirm } from '@/components/confirm-modal';
 import { useAuthStore } from '@/lib/store';
 import { useDeployProgressActions } from '@/lib/use-deploy-progress-actions';
 import { useDeployProgressStore } from '@/lib/deploy-progress-store';
+import { Select } from '@/components/ui/select';
 
 /** Matches backend multipart limit for POST /applications/:id/upload */
 const MAX_SOURCE_ARCHIVE_BYTES = 10 * 1024 ** 3;
@@ -2243,16 +2244,19 @@ export default function AppDetailPage() {
                   </p>
                   <div className="mb-4">
                     <label className="block text-xs text-gray-500 mb-1">{ad.workload}</label>
-                    <select
+                    <Select
+                      size="md"
+                      className="max-w-md"
+                      ariaLabel={ad.workload}
                       value={scaleWorkload}
-                      onChange={(e) => setScaleWorkload(e.target.value as typeof scaleWorkload)}
-                      className="input-field text-sm max-w-md"
-                    >
-                      <option value="app">{ad.productTypeApp}</option>
-                      {app?.databaseType !== 'none' && <option value="database">{ad.database}</option>}
-                      {app?.enableRedis && <option value="redis">{ad.workload}</option>}
-                      {app?.enableRabbitmq && <option value="rabbitmq">{ad.workload}</option>}
-                    </select>
+                      onChange={(v) => setScaleWorkload(v as typeof scaleWorkload)}
+                      options={[
+                        { value: 'app', label: ad.productTypeApp },
+                        ...(app?.databaseType !== 'none' ? [{ value: 'database', label: ad.database }] : []),
+                        ...(app?.enableRedis ? [{ value: 'redis', label: ad.workload }] : []),
+                        ...(app?.enableRabbitmq ? [{ value: 'rabbitmq', label: ad.workload }] : []),
+                      ]}
+                    />
                   </div>
                   <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
                     <div>
diff --git a/frontend/src/app/[lang]/dashboard/deploy/page.tsx b/frontend/src/app/[lang]/dashboard/deploy/page.tsx
index 6ce78a5..4442d77 100644
--- a/frontend/src/app/[lang]/dashboard/deploy/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/deploy/page.tsx
@@ -5,6 +5,7 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import api from '@/lib/api';
 import { useT, useLocale } from '@/i18n/I18nProvider';
 import { useLocalizedRouter } from '@/i18n/navigation';
+import { Select } from '@/components/ui/select';
 import { parseDotenv } from '@/lib/parseDotenv';
 import { useAuthStore } from '@/lib/store';
 import { useDeployProgressStore } from '@/lib/deploy-progress-store';
@@ -100,60 +101,68 @@ function WorkloadResourceFields({
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
           <label className="block text-sm font-medium text-gray-700 mb-1">{dw.cpuRequest}</label>
-          <select
-            className="input-field"
+          <Select
+            size="md"
+            ariaLabel={dw.cpuRequest}
             disabled={readOnly}
             value={config.cpuRequest || '50m'}
-            onChange={(e) => onChange({ cpuRequest: e.target.value })}
-          >
-            <option value="50m">50m (0.05 core)</option>
-            <option value="100m">100m (0.1 core)</option>
-            <option value="250m">250m (0.25 core)</option>
-            <option value="500m">500m (0.5 core)</option>
-          </select>
+            onChange={(v) => onChange({ cpuRequest: v })}
+            options={[
+              { value: '50m', label: '50m (0.05 core)' },
+              { value: '100m', label: '100m (0.1 core)' },
+              { value: '250m', label: '250m (0.25 core)' },
+              { value: '500m', label: '500m (0.5 core)' },
+            ]}
+          />
         </div>
         <div>
           <label className="block text-sm font-medium text-gray-700 mb-1">{dw.cpuLimit}</label>
-          <select
-            className="input-field"
+          <Select
+            size="md"
+            ariaLabel={dw.cpuLimit}
             disabled={readOnly}
             value={config.cpuLimit}
-            onChange={(e) => onChange({ cpuLimit: e.target.value })}
-          >
-            <option value="200m">200m (0.2 core)</option>
-            <option value="250m">250m (0.25 core)</option>
-            <option value="500m">500m (0.5 core)</option>
-            <option value="1">1 core</option>
-            <option value="2">2 cores</option>
-          </select>
+            onChange={(v) => onChange({ cpuLimit: v })}
+            options={[
+              { value: '200m', label: '200m (0.2 core)' },
+              { value: '250m', label: '250m (0.25 core)' },
+              { value: '500m', label: '500m (0.5 core)' },
+              { value: '1', label: '1 core' },
+              { value: '2', label: '2 cores' },
+            ]}
+          />
         </div>
         <div>
           <label className="block text-sm font-medium text-gray-700 mb-1">{dw.memoryRequest}</label>
-          <select
-            className="input-field"
+          <Select
+            size="md"
+            ariaLabel={dw.memoryRequest}
             disabled={readOnly}
             value={config.memoryRequest || '64Mi'}
-            onChange={(e) => onChange({ memoryRequest: e.target.value })}
-          >
-            <option value="64Mi">64 Mi</option>
-            <option value="128Mi">128 Mi</option>
-            <option value="256Mi">256 Mi</option>
-            <option value="512Mi">512 Mi</option>
-          </select>
+            onChange={(v) => onChange({ memoryRequest: v })}
+            options={[
+              { value: '64Mi', label: '64 Mi' },
+              { value: '128Mi', label: '128 Mi' },
+              { value: '256Mi', label: '256 Mi' },
+              { value: '512Mi', label: '512 Mi' },
+            ]}
+          />
         </div>
         <div>
           <label className="block text-sm font-medium text-gray-700 mb-1">{dw.memoryLimit}</label>
-          <select
-            className="input-field"
+          <Select
+            size="md"
+            ariaLabel={dw.memoryLimit}
             disabled={readOnly}
             value={config.memoryLimit}
-            onChange={(e) => onChange({ memoryLimit: e.target.value })}
-          >
-            <option value="256Mi">256 Mi</option>
-            <option value="512Mi">512 Mi</option>
-            <option value="1Gi">1 Gi</option>
-            <option value="2Gi">2 Gi</option>
-          </select>
+            onChange={(v) => onChange({ memoryLimit: v })}
+            options={[
+              { value: '256Mi', label: '256 Mi' },
+              { value: '512Mi', label: '512 Mi' },
+              { value: '1Gi', label: '1 Gi' },
+              { value: '2Gi', label: '2 Gi' },
+            ]}
+          />
         </div>
       </div>
       <div className="mt-4">
@@ -1353,119 +1362,89 @@ export default function DeployPage() {
               {form.runtime === 'nodejs' && (
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-1">{dw.nodeVersion}</label>
-                  <select
-                    className="input-field"
+                  <Select
+                    size="md"
                     value={form.runtimeVersion || '20'}
-                    onChange={(e) => setForm({ ...form, runtimeVersion: e.target.value })}
-                  >
-                    <option value="22">Node.js 22 (LTS)</option>
-                    <option value="20">Node.js 20 (LTS)</option>
-                    <option value="18">Node.js 18</option>
-                    <option value="16">Node.js 16</option>
-                  </select>
+                    onChange={(v) => setForm({ ...form, runtimeVersion: v })}
+                    options={[{ value: '22', label: 'Node.js 22 (LTS)' },{ value: '20', label: 'Node.js 20 (LTS)' },{ value: '18', label: 'Node.js 18' },{ value: '16', label: 'Node.js 16' }]}
+                  />
                 </div>
               )}
               {form.runtime === 'laravel' && (
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-1">{dw.phpVersion}</label>
-                  <select
-                    className="input-field"
+                  <Select
+                    size="md"
                     value={form.phpVersion || '8.3'}
-                    onChange={(e) => setForm({ ...form, phpVersion: e.target.value })}
-                  >
-                    <option value="8.4">PHP 8.4</option>
-                    <option value="8.3">PHP 8.3 (Recommended)</option>
-                    <option value="8.2">PHP 8.2</option>
-                    <option value="8.1">PHP 8.1</option>
-                  </select>
+                    onChange={(v) => setForm({ ...form, phpVersion: v })}
+                    options={[{ value: '8.4', label: 'PHP 8.4' },{ value: '8.3', label: 'PHP 8.3 (Recommended)' },{ value: '8.2', label: 'PHP 8.2' },{ value: '8.1', label: 'PHP 8.1' }]}
+                  />
                 </div>
               )}
               {form.runtime === 'wordpress' && (
                 <>
                   <div>
                     <label className="block text-sm font-medium text-gray-700 mb-1">{dw.wordpressVersion}</label>
-                    <select
-                      className="input-field"
-                      value={form.runtimeVersion || '6.7'}
-                      onChange={(e) => setForm({ ...form, runtimeVersion: e.target.value })}
-                    >
-                      <option value="6.7">WordPress 6.7 (Latest)</option>
-                      <option value="6.6">WordPress 6.6</option>
-                      <option value="6.5">WordPress 6.5</option>
-                      <option value="6.4">WordPress 6.4</option>
-                    </select>
+                    <Select
+                    size="md"
+                    value={form.runtimeVersion || '6.7'}
+                    onChange={(v) => setForm({ ...form, runtimeVersion: v })}
+                    options={[{ value: '6.7', label: 'WordPress 6.7 (Latest)' },{ value: '6.6', label: 'WordPress 6.6' },{ value: '6.5', label: 'WordPress 6.5' },{ value: '6.4', label: 'WordPress 6.4' }]}
+                  />
                   </div>
                   <div>
                     <label className="block text-sm font-medium text-gray-700 mb-1">{dw.phpVersion}</label>
-                    <select
-                      className="input-field"
-                      value={form.phpVersion || '8.3'}
-                      onChange={(e) => setForm({ ...form, phpVersion: e.target.value })}
-                    >
-                      <option value="8.3">PHP 8.3 (Recommended)</option>
-                      <option value="8.2">PHP 8.2</option>
-                      <option value="8.1">PHP 8.1</option>
-                    </select>
+                    <Select
+                    size="md"
+                    value={form.phpVersion || '8.3'}
+                    onChange={(v) => setForm({ ...form, phpVersion: v })}
+                    options={[{ value: '8.3', label: 'PHP 8.3 (Recommended)' },{ value: '8.2', label: 'PHP 8.2' },{ value: '8.1', label: 'PHP 8.1' }]}
+                  />
                   </div>
                 </>
               )}
               {form.runtime === 'go' && (
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-1">{dw.goVersion}</label>
-                  <select
-                    className="input-field"
+                  <Select
+                    size="md"
                     value={form.runtimeVersion || '1.22'}
-                    onChange={(e) => setForm({ ...form, runtimeVersion: e.target.value })}
-                  >
-                    <option value="1.23">Go 1.23 (Latest)</option>
-                    <option value="1.22">Go 1.22 (Recommended)</option>
-                    <option value="1.21">Go 1.21</option>
-                  </select>
+                    onChange={(v) => setForm({ ...form, runtimeVersion: v })}
+                    options={[{ value: '1.23', label: 'Go 1.23 (Latest)' },{ value: '1.22', label: 'Go 1.22 (Recommended)' },{ value: '1.21', label: 'Go 1.21' }]}
+                  />
                 </div>
               )}
               {(form.runtime === 'python' || form.runtime === 'django') && (
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-1">{dw.pythonVersion}</label>
-                  <select
-                    className="input-field"
+                  <Select
+                    size="md"
                     value={form.runtimeVersion || '3.12'}
-                    onChange={(e) => setForm({ ...form, runtimeVersion: e.target.value })}
-                  >
-                    <option value="3.13">Python 3.13 (Latest)</option>
-                    <option value="3.12">Python 3.12 (Recommended)</option>
-                    <option value="3.11">Python 3.11</option>
-                    <option value="3.10">Python 3.10</option>
-                  </select>
+                    onChange={(v) => setForm({ ...form, runtimeVersion: v })}
+                    options={[{ value: '3.13', label: 'Python 3.13 (Latest)' },{ value: '3.12', label: 'Python 3.12 (Recommended)' },{ value: '3.11', label: 'Python 3.11' },{ value: '3.10', label: 'Python 3.10' }]}
+                  />
                 </div>
               )}
               {form.runtime === 'php' && (
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-1">{dw.phpVersion}</label>
-                  <select
-                    className="input-field"
+                  <Select
+                    size="md"
                     value={form.phpVersion || '8.3'}
-                    onChange={(e) => setForm({ ...form, phpVersion: e.target.value })}
-                  >
-                    <option value="8.4">PHP 8.4 (Latest)</option>
-                    <option value="8.3">PHP 8.3 (Recommended)</option>
-                    <option value="8.2">PHP 8.2</option>
-                    <option value="8.1">PHP 8.1</option>
-                  </select>
+                    onChange={(v) => setForm({ ...form, phpVersion: v })}
+                    options={[{ value: '8.4', label: 'PHP 8.4 (Latest)' },{ value: '8.3', label: 'PHP 8.3 (Recommended)' },{ value: '8.2', label: 'PHP 8.2' },{ value: '8.1', label: 'PHP 8.1' }]}
+                  />
                 </div>
               )}
               {form.runtime === 'dotnet' && (
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-1">.NET Version</label>
-                  <select
-                    className="input-field"
+                  <Select
+                    size="md"
                     value={form.runtimeVersion || '8.0'}
-                    onChange={(e) => setForm({ ...form, runtimeVersion: e.target.value })}
-                  >
-                    <option value="9.0">.NET 9.0 (Latest)</option>
-                    <option value="8.0">.NET 8.0 LTS (Recommended)</option>
-                    <option value="7.0">.NET 7.0</option>
-                    <option value="6.0">.NET 6.0 LTS</option>
-                  </select>
+                    onChange={(v) => setForm({ ...form, runtimeVersion: v })}
+                    options={[{ value: '9.0', label: '.NET 9.0 (Latest)' },{ value: '8.0', label: '.NET 8.0 LTS (Recommended)' },{ value: '7.0', label: '.NET 7.0' },{ value: '6.0', label: '.NET 6.0 LTS' }]}
+                  />
                 </div>
               )}
             </div>
@@ -1518,40 +1497,40 @@ export default function DeployPage() {
                 <label className="block text-sm font-medium text-gray-700 mb-1">
                   {form.databaseType === 'postgresql' ? 'PostgreSQL' : form.databaseType === 'mysql' ? 'MySQL' : form.databaseType === 'mariadb' ? 'MariaDB' : 'MongoDB'} Version
                 </label>
-                <select
-                  className="input-field max-w-xs"
+                <Select
+                  size="md"
+                  className="max-w-xs"
                   value={form.dbVersion || (form.databaseType === 'postgresql' ? '16' : form.databaseType === 'mysql' ? '8.0' : form.databaseType === 'mariadb' ? '11.4' : '7.0')}
-                  onChange={(e) => setForm({ ...form, dbVersion: e.target.value })}
-                >
-                  {form.databaseType === 'postgresql' ? (
-                    <>
-                      <option value="17">PostgreSQL 17 (Latest)</option>
-                      <option value="16">PostgreSQL 16 (LTS)</option>
-                      <option value="15">PostgreSQL 15</option>
-                      <option value="14">PostgreSQL 14</option>
-                    </>
-                  ) : form.databaseType === 'mysql' ? (
-                    <>
-                      <option value="9.0">MySQL 9.0 (Latest)</option>
-                      <option value="8.4">MySQL 8.4 (LTS)</option>
-                      <option value="8.0">MySQL 8.0</option>
-                      <option value="5.7">MySQL 5.7</option>
-                    </>
-                  ) : form.databaseType === 'mariadb' ? (
-                    <>
-                      <option value="11.4">MariaDB 11.4 (LTS)</option>
-                      <option value="11.3">MariaDB 11.3</option>
-                      <option value="10.11">MariaDB 10.11 (LTS)</option>
-                      <option value="10.6">MariaDB 10.6</option>
-                    </>
-                  ) : (
-                    <>
-                      <option value="7.0">MongoDB 7.0 (Latest)</option>
-                      <option value="6.0">MongoDB 6.0</option>
-                      <option value="5.0">MongoDB 5.0</option>
-                    </>
-                  )}
-                </select>
+                  onChange={(v) => setForm({ ...form, dbVersion: v })}
+                  options={
+                    form.databaseType === 'postgresql'
+                      ? [
+                          { value: '17', label: 'PostgreSQL 17 (Latest)' },
+                          { value: '16', label: 'PostgreSQL 16 (LTS)' },
+                          { value: '15', label: 'PostgreSQL 15' },
+                          { value: '14', label: 'PostgreSQL 14' },
+                        ]
+                      : form.databaseType === 'mysql'
+                        ? [
+                            { value: '9.0', label: 'MySQL 9.0 (Latest)' },
+                            { value: '8.4', label: 'MySQL 8.4 (LTS)' },
+                            { value: '8.0', label: 'MySQL 8.0' },
+                            { value: '5.7', label: 'MySQL 5.7' },
+                          ]
+                        : form.databaseType === 'mariadb'
+                          ? [
+                              { value: '11.4', label: 'MariaDB 11.4 (LTS)' },
+                              { value: '11.3', label: 'MariaDB 11.3' },
+                              { value: '10.11', label: 'MariaDB 10.11 (LTS)' },
+                              { value: '10.6', label: 'MariaDB 10.6' },
+                            ]
+                          : [
+                              { value: '7.0', label: 'MongoDB 7.0 (Latest)' },
+                              { value: '6.0', label: 'MongoDB 6.0' },
+                              { value: '5.0', label: 'MongoDB 5.0' },
+                            ]
+                  }
+                />
               </div>
             )}
 
@@ -1793,17 +1772,18 @@ export default function DeployPage() {
                     <div className="mt-3 pt-3 border-t border-red-200 space-y-2">
                       <div className="flex items-center gap-2">
                         <label className="text-xs font-medium text-gray-600 shrink-0">{dw.versionColon}</label>
-                        <select
-                          className="select-compact flex-1 min-w-0"
+                        <Select
+                          className="flex-1 min-w-0"
+                          ariaLabel="Redis version"
                           value={form.redisVersion || '7.2'}
-                          onChange={(e) => setForm({ ...form, redisVersion: e.target.value })}
-                          onClick={(e) => e.stopPropagation()}
-                        >
-                          <option value="7.2">7.2 (Latest)</option>
-                          <option value="7.0">7.0</option>
-                          <option value="6.2">6.2 (LTS)</option>
-                          <option value="6.0">6.0</option>
-                        </select>
+                          onChange={(v) => setForm({ ...form, redisVersion: v })}
+                          options={[
+                            { value: '7.2', label: '7.2 (Latest)' },
+                            { value: '7.0', label: '7.0' },
+                            { value: '6.2', label: '6.2 (LTS)' },
+                            { value: '6.0', label: '6.0' },
+                          ]}
+                        />
                       </div>
                       <p className="text-xs text-red-600">REDIS_HOST, REDIS_PASSWORD, REDIS_URL</p>
                     </div>
@@ -1851,17 +1831,18 @@ export default function DeployPage() {
                     <div className="mt-3 pt-3 border-t border-orange-200 space-y-2">
                       <div className="flex items-center gap-2">
                         <label className="text-xs font-medium text-gray-600 shrink-0">{dw.versionColon}</label>
-                        <select
-                          className="select-compact flex-1 min-w-0"
+                        <Select
+                          className="flex-1 min-w-0"
+                          ariaLabel="RabbitMQ version"
                           value={form.rabbitmqVersion || '3.13'}
-                          onChange={(e) => setForm({ ...form, rabbitmqVersion: e.target.value })}
-                          onClick={(e) => e.stopPropagation()}
-                        >
-                          <option value="3.13">3.13 (Latest)</option>
-                          <option value="3.12">3.12 (LTS)</option>
-                          <option value="3.11">3.11</option>
-                          <option value="3.10">3.10</option>
-                        </select>
+                          onChange={(v) => setForm({ ...form, rabbitmqVersion: v })}
+                          options={[
+                            { value: '3.13', label: '3.13 (Latest)' },
+                            { value: '3.12', label: '3.12 (LTS)' },
+                            { value: '3.11', label: '3.11' },
+                            { value: '3.10', label: '3.10' },
+                          ]}
+                        />
                       </div>
                       <p className="text-xs text-orange-600">RABBITMQ_HOST, RABBITMQ_USER, AMQP_URL</p>
                     </div>
@@ -1896,17 +1877,18 @@ export default function DeployPage() {
                     <div className="mt-3 pt-3 border-t border-yellow-200 space-y-2">
                       <div className="flex items-center gap-2">
                         <label className="text-xs font-medium text-gray-600 shrink-0">{dw.versionColon}</label>
-                        <select
-                          className="select-compact flex-1 min-w-0"
+                        <Select
+                          className="flex-1 min-w-0"
+                          ariaLabel="Elasticsearch version"
                           value={form.elasticsearchVersion || '8.12'}
-                          onChange={(e) => setForm({ ...form, elasticsearchVersion: e.target.value })}
-                          onClick={(e) => e.stopPropagation()}
-                        >
-                          <option value="8.12">8.12 (Latest)</option>
-                          <option value="8.11">8.11</option>
-                          <option value="7.17">7.17 (LTS)</option>
-                          <option value="7.10">7.10</option>
-                        </select>
+                          onChange={(v) => setForm({ ...form, elasticsearchVersion: v })}
+                          options={[
+                            { value: '8.12', label: '8.12 (Latest)' },
+                            { value: '8.11', label: '8.11' },
+                            { value: '7.17', label: '7.17 (LTS)' },
+                            { value: '7.10', label: '7.10' },
+                          ]}
+                        />
                       </div>
                       <p className="text-xs text-yellow-600">{dw.logsViaFluentBit}</p>
                     </div>
@@ -2305,39 +2287,63 @@ export default function DeployPage() {
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-1">{dw.cpuRequest}</label>
-                <select className="input-field" value={form.cpuRequest} onChange={(e) => setForm({ ...form, cpuRequest: e.target.value })}>
-                  <option value="50m">50m (0.05 core)</option>
-                  <option value="100m">100m (0.1 core)</option>
-                  <option value="250m">250m (0.25 core)</option>
-                  <option value="500m">500m (0.5 core)</option>
-                </select>
+                <Select
+                  size="md"
+                  ariaLabel={dw.cpuRequest}
+                  value={form.cpuRequest || '100m'}
+                  onChange={(v) => setForm({ ...form, cpuRequest: v })}
+                  options={[
+                    { value: '50m', label: '50m (0.05 core)' },
+                    { value: '100m', label: '100m (0.1 core)' },
+                    { value: '250m', label: '250m (0.25 core)' },
+                    { value: '500m', label: '500m (0.5 core)' },
+                  ]}
+                />
               </div>
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-1">{dw.cpuLimit}</label>
-                <select className="input-field" value={form.cpuLimit} onChange={(e) => setForm({ ...form, cpuLimit: e.target.value })}>
-                  <option value="250m">250m (0.25 core)</option>
-                  <option value="500m">500m (0.5 core)</option>
-                  <option value="1">1 core</option>
-                  <option value="2">2 cores</option>
-                </select>
+                <Select
+                  size="md"
+                  ariaLabel={dw.cpuLimit}
+                  value={form.cpuLimit || '500m'}
+                  onChange={(v) => setForm({ ...form, cpuLimit: v })}
+                  options={[
+                    { value: '250m', label: '250m (0.25 core)' },
+                    { value: '500m', label: '500m (0.5 core)' },
+                    { value: '1', label: '1 core' },
+                    { value: '2', label: '2 cores' },
+                  ]}
+                />
               </div>
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-1">{dw.memoryRequest}</label>
-                <select className="input-field" value={form.memoryRequest} onChange={(e) => setForm({ ...form, memoryRequest: e.target.value })}>
-                  <option value="64Mi">64 Mi</option>
-                  <option value="128Mi">128 Mi</option>
-                  <option value="256Mi">256 Mi</option>
-                  <option value="512Mi">512 Mi</option>
-                </select>
+                <Select
+                  size="md"
+                  ariaLabel={dw.memoryRequest}
+                  value={form.memoryRequest || '128Mi'}
+                  onChange={(v) => setForm({ ...form, memoryRequest: v })}
+                  options={[
+                    { value: '64Mi', label: '64 Mi' },
+                    { value: '128Mi', label: '128 Mi' },
+                    { value: '256Mi', label: '256 Mi' },
+                    { value: '512Mi', label: '512 Mi' },
+                  ]}
+                />
               </div>
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-1">{dw.memoryLimit}</label>
-                <select className="input-field" value={form.memoryLimit} onChange={(e) => setForm({ ...form, memoryLimit: e.target.value })}>
-                  <option value="256Mi">256 Mi</option>
-                  <option value="512Mi">512 Mi</option>
-                  <option value="1Gi">1 Gi</option>
-                  <option value="2Gi">2 Gi</option>
-                </select>
+                <Select
+                  size="md"
+                  ariaLabel={dw.memoryLimit}
+                  value={form.memoryLimit || '512Mi'}
+                  onChange={(v) => setForm({ ...form, memoryLimit: v })}
+                  options={[
+                    { value: '256Mi', label: '256 Mi' },
+                    { value: '512Mi', label: '512 Mi' },
+                    { value: '1Gi', label: '1 Gi' },
+                    { value: '2Gi', label: '2 Gi' },
+                  ]}
+                />
               </div>
             </div>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
diff --git a/frontend/src/app/[lang]/dashboard/logs/page.tsx b/frontend/src/app/[lang]/dashboard/logs/page.tsx
index 2df0841..1c1fe20 100644
--- a/frontend/src/app/[lang]/dashboard/logs/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/logs/page.tsx
@@ -6,6 +6,7 @@ import { useSearchParams } from 'next/navigation';
 import api from '@/lib/api';
 import { useT, useLocale } from '@/i18n/I18nProvider';
 import type { Application, LogEntry, LogSearchResult, LogStatsResult } from '@/types';
+import { Select } from '@/components/ui/select';
 import {
   Loader2,
   RefreshCw,
@@ -223,85 +224,69 @@ function LogsPageContent() {
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3">
           <div>
             <label className="text-xs font-medium text-gray-600 block mb-1">{lg.resource}</label>
-            <select
+            <Select
+              size="md"
+              ariaLabel={lg.resource}
               value={appId}
-              onChange={(e) => {
-                setAppId(e.target.value);
+              onChange={(v) => {
+                setAppId(v);
                 setPage(1);
               }}
-              className="input w-full text-sm"
-            >
-              <option value="">{lg.allResources}</option>
-              {applications.length > 0 && (
-                <optgroup label={lg.applicationsGroup}>
-                  {applications.map((app) => (
-                    <option key={app.id} value={app.id}>
-                      {app.name}
-                    </option>
-                  ))}
-                </optgroup>
-              )}
-              {managedServices.length > 0 && (
-                <optgroup label={lg.servicesGroup}>
-                  {managedServices.map((svc) => (
-                    <option key={svc.id} value={svc.id}>
-                      {svc.name}
-                    </option>
-                  ))}
-                </optgroup>
-              )}
-            </select>
+              options={[
+                { value: '', label: lg.allResources },
+                ...(applications.length > 0
+                  ? [
+                      { value: '__apps__', label: lg.applicationsGroup, disabled: true },
+                      ...applications.map((app) => ({ value: app.id, label: app.name })),
+                    ]
+                  : []),
+                ...(managedServices.length > 0
+                  ? [
+                      { value: '__svcs__', label: lg.servicesGroup, disabled: true },
+                      ...managedServices.map((svc) => ({ value: svc.id, label: svc.name })),
+                    ]
+                  : []),
+              ]}
+            />
           </div>
           <div>
             <label className="text-xs font-medium text-gray-600 block mb-1">{lg.source}</label>
-            <select
+            <Select
+              size="md"
+              ariaLabel={lg.source}
               value={workload}
-              onChange={(e) => {
-                setWorkload(e.target.value);
+              onChange={(v) => {
+                setWorkload(v);
                 setPage(1);
               }}
-              className="input w-full text-sm"
-            >
-              {workloadOptions.map((w) => (
-                <option key={w.value || 'all'} value={w.value}>
-                  {w.label}
-                </option>
-              ))}
-            </select>
+              options={workloadOptions.map((w) => ({ value: w.value, label: w.label }))}
+            />
           </div>
           <div>
             <label className="text-xs font-medium text-gray-600 block mb-1">{lg.level}</label>
-            <select
+            <Select
+              size="md"
+              ariaLabel={lg.level}
               value={level}
-              onChange={(e) => {
-                setLevel(e.target.value);
+              onChange={(v) => {
+                setLevel(v);
                 setPage(1);
               }}
-              className="input w-full text-sm"
-            >
-              {LOG_LEVELS.map((l) => (
-                <option key={l.value || 'all'} value={l.value}>
-                  {l.label}
-                </option>
-              ))}
-            </select>
+              options={LOG_LEVELS.map((l) => ({ value: l.value, label: l.label }))}
+            />
           </div>
           <div>
             <label className="text-xs font-medium text-gray-600 block mb-1">{lg.timeRange}</label>
-            <select
+            <Select
+              size="md"
+              ariaLabel={lg.timeRange}
               value={timeRange}
-              onChange={(e) => {
-                setTimeRange(e.target.value);
+              onChange={(v) => {
+                setTimeRange(v);
                 setPage(1);
               }}
-              className="input w-full text-sm"
-            >
-              {TIME_RANGES.map((tr) => (
-                <option key={tr.value} value={tr.value}>
-                  {tr.label}
-                </option>
-              ))}
-            </select>
+              options={TIME_RANGES.map((tr) => ({ value: tr.value, label: tr.label }))}
+            />
           </div>
           <div>
             <label className="text-xs font-medium text-gray-600 block mb-1">{lg.search}</label>
diff --git a/frontend/src/app/[lang]/dashboard/services/new/page.tsx b/frontend/src/app/[lang]/dashboard/services/new/page.tsx
index c72d1a5..e2e59d7 100644
--- a/frontend/src/app/[lang]/dashboard/services/new/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/services/new/page.tsx
@@ -7,6 +7,7 @@ import { toast } from 'react-toastify';
 import { Link } from '@/i18n/Link';
 import { useT } from '@/i18n/I18nProvider';
 import { useLocalizedRouter } from '@/i18n/navigation';
+import { Select } from '@/components/ui/select';
 import type {
   Application,
   CreateApplicationDto,
@@ -416,17 +417,14 @@ export default function NewManagedServicePage() {
               <div className="space-y-4">
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-1">{s.redisVersion}</label>
-                  <select
-                    className="input-field max-w-xs"
+                  <Select
+                    size="md"
+                    className="max-w-xs"
+                    ariaLabel={s.redisVersion}
                     value={form.redisVersion}
-                    onChange={(e) => setForm({ ...form, redisVersion: e.target.value })}
-                  >
-                    {['7.2', '7.0', '6.2', '6.0'].map((v) => (
-                      <option key={v} value={v}>
-                        {v}
-                      </option>
-                    ))}
-                  </select>
+                    onChange={(v) => setForm({ ...form, redisVersion: v })}
+                    options={['7.2', '7.0', '6.2', '6.0'].map((v) => ({ value: v, label: v }))}
+                  />
                 </div>
                 {form.optionalServiceResources?.redis && (
                   <OptionalServiceResourceFields
@@ -453,17 +451,14 @@ export default function NewManagedServicePage() {
               <div className="space-y-4">
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-1">{s.rabbitmqVersion}</label>
-                  <select
-                    className="input-field max-w-xs"
+                  <Select
+                    size="md"
+                    className="max-w-xs"
+                    ariaLabel={s.rabbitmqVersion}
                     value={form.rabbitmqVersion}
-                    onChange={(e) => setForm({ ...form, rabbitmqVersion: e.target.value })}
-                  >
-                    {['3.13', '3.12', '3.11', '3.10'].map((v) => (
-                      <option key={v} value={v}>
-                        {v}
-                      </option>
-                    ))}
-                  </select>
+                    onChange={(v) => setForm({ ...form, rabbitmqVersion: v })}
+                    options={['3.13', '3.12', '3.11', '3.10'].map((v) => ({ value: v, label: v }))}
+                  />
                 </div>
                 {form.optionalServiceResources?.rabbitmq && (
                   <OptionalServiceResourceFields
diff --git a/frontend/src/app/[lang]/dashboard/tickets/page.tsx b/frontend/src/app/[lang]/dashboard/tickets/page.tsx
index a59c41f..fef53e0 100644
--- a/frontend/src/app/[lang]/dashboard/tickets/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/tickets/page.tsx
@@ -9,6 +9,7 @@ import { useAuthStore } from '@/lib/store';
 import { toast } from 'react-toastify';
 import type { Ticket, CreateTicketDto, TicketDepartment, TicketPriority } from '@/types';
 import { Wrench, Briefcase, Ticket as TicketIcon, X } from 'lucide-react';
+import { Select } from '@/components/ui/select';
 
 const statusColors: Record<string, string> = {
   open: 'bg-yellow-100 text-yellow-700',
@@ -103,27 +104,27 @@ export default function TicketsPage() {
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-1">{tk.departmentField}</label>
-              <select
-                className="input-field"
+              <Select
+                size="md"
+                ariaLabel={tk.departmentField}
                 value={form.department}
-                onChange={(e) => setForm({ ...form, department: e.target.value as TicketDepartment })}
-              >
-                {availableDepartments.map((dept) => (
-                  <option key={dept.value} value={dept.value}>{dept.label}</option>
-                ))}
-              </select>
+                onChange={(v) => setForm({ ...form, department: v as TicketDepartment })}
+                options={availableDepartments.map((dept) => ({ value: dept.value, label: dept.label }))}
+              />
             </div>
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-1">{tk.priorityField}</label>
-              <select
-                className="input-field"
-                value={form.priority}
-                onChange={(e) => setForm({ ...form, priority: e.target.value as TicketPriority })}
-              >
-                <option value="low">{tk.priority.low}</option>
-                <option value="medium">{tk.priority.medium}</option>
-                <option value="high">{tk.priority.high}</option>
-              </select>
+              <Select
+                size="md"
+                ariaLabel={tk.priorityField}
+                value={form.priority || 'low'}
+                onChange={(v) => setForm({ ...form, priority: v as TicketPriority })}
+                options={[
+                  { value: 'low', label: tk.priority.low },
+                  { value: 'medium', label: tk.priority.medium },
+                  { value: 'high', label: tk.priority.high },
+                ]}
+              />
             </div>
           </div>
 
diff --git a/frontend/src/components/database-workload-resources.tsx b/frontend/src/components/database-workload-resources.tsx
index 2437039..03a6397 100644
--- a/frontend/src/components/database-workload-resources.tsx
+++ b/frontend/src/components/database-workload-resources.tsx
@@ -2,6 +2,7 @@
 
 import { Database } from 'lucide-react';
 import { useT } from '@/i18n/I18nProvider';
+import { Select } from '@/components/ui/select';
 
 export interface DatabaseWorkloadValues {
   cpuRequest: string;
@@ -27,55 +28,63 @@ export function DatabaseWorkloadResources({
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
           <label className="block text-xs text-gray-500 mb-1">{r.cpuRequest}</label>
-          <select
-            className="input-field text-sm"
+          <Select
+            size="md"
+            ariaLabel={r.cpuRequest}
             value={values.cpuRequest}
-            onChange={(e) => onChange({ cpuRequest: e.target.value })}
-          >
-            <option value="50m">50m</option>
-            <option value="100m">100m</option>
-            <option value="250m">250m</option>
-            <option value="500m">500m</option>
-          </select>
+            onChange={(v) => onChange({ cpuRequest: v })}
+            options={[
+              { value: '50m', label: '50m' },
+              { value: '100m', label: '100m' },
+              { value: '250m', label: '250m' },
+              { value: '500m', label: '500m' },
+            ]}
+          />
         </div>
         <div>
           <label className="block text-xs text-gray-500 mb-1">{r.cpuLimit}</label>
-          <select
-            className="input-field text-sm"
+          <Select
+            size="md"
+            ariaLabel={r.cpuLimit}
             value={values.cpuLimit}
-            onChange={(e) => onChange({ cpuLimit: e.target.value })}
-          >
-            <option value="250m">250m</option>
-            <option value="500m">500m</option>
-            <option value="1">{r.oneCore}</option>
-            <option value="2">{r.twoCores}</option>
-          </select>
+            onChange={(v) => onChange({ cpuLimit: v })}
+            options={[
+              { value: '250m', label: '250m' },
+              { value: '500m', label: '500m' },
+              { value: '1', label: r.oneCore },
+              { value: '2', label: r.twoCores },
+            ]}
+          />
         </div>
         <div>
           <label className="block text-xs text-gray-500 mb-1">{r.memoryRequest}</label>
-          <select
-            className="input-field text-sm"
+          <Select
+            size="md"
+            ariaLabel={r.memoryRequest}
             value={values.memoryRequest}
-            onChange={(e) => onChange({ memoryRequest: e.target.value })}
-          >
-            <option value="64Mi">64 Mi</option>
-            <option value="128Mi">128 Mi</option>
-            <option value="256Mi">256 Mi</option>
-            <option value="512Mi">512 Mi</option>
-          </select>
+            onChange={(v) => onChange({ memoryRequest: v })}
+            options={[
+              { value: '64Mi', label: '64 Mi' },
+              { value: '128Mi', label: '128 Mi' },
+              { value: '256Mi', label: '256 Mi' },
+              { value: '512Mi', label: '512 Mi' },
+            ]}
+          />
         </div>
         <div>
           <label className="block text-xs text-gray-500 mb-1">{r.memoryLimit}</label>
-          <select
-            className="input-field text-sm"
+          <Select
+            size="md"
+            ariaLabel={r.memoryLimit}
             value={values.memoryLimit}
-            onChange={(e) => onChange({ memoryLimit: e.target.value })}
-          >
-            <option value="256Mi">256 Mi</option>
-            <option value="512Mi">512 Mi</option>
-            <option value="1Gi">1 Gi</option>
-            <option value="2Gi">2 Gi</option>
-          </select>
+            onChange={(v) => onChange({ memoryLimit: v })}
+            options={[
+              { value: '256Mi', label: '256 Mi' },
+              { value: '512Mi', label: '512 Mi' },
+              { value: '1Gi', label: '1 Gi' },
+              { value: '2Gi', label: '2 Gi' },
+            ]}
+          />
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/managed-database-config.tsx b/frontend/src/components/managed-database-config.tsx
index c7e9d67..22f69b7 100644
--- a/frontend/src/components/managed-database-config.tsx
+++ b/frontend/src/components/managed-database-config.tsx
@@ -4,6 +4,7 @@ import { useRef, useState } from 'react';
 import { Database, Eye, EyeOff, RefreshCw, AlertCircle } from 'lucide-react';
 import { toast } from 'react-toastify';
 import { useT } from '@/i18n/I18nProvider';
+import { Select } from '@/components/ui/select';
 import { ONE_GIB, minGiToFitFileBytes } from '@/lib/storage-utils';
 
 export type DatabaseEngine = 'postgresql' | 'mysql' | 'mariadb' | 'mongodb';
@@ -101,17 +102,17 @@ export function ManagedDatabaseConfig({
 
       <div>
         <label className="block text-sm font-medium text-gray-700 mb-1">{c.version}</label>
-        <select
-          className="input-field max-w-xs"
+        <Select
+          size="md"
+          className="max-w-xs"
+          ariaLabel={c.version}
           value={form.dbVersion}
-          onChange={(e) => onChange({ dbVersion: e.target.value })}
-        >
-          {versionOptions(form.databaseType).map((v) => (
-            <option key={v} value={v}>
-              {versionLabel(form.databaseType, v)}
-            </option>
-          ))}
-        </select>
+          onChange={(v) => onChange({ dbVersion: v })}
+          options={versionOptions(form.databaseType).map((v) => ({
+            value: v,
+            label: versionLabel(form.databaseType, v),
+          }))}
+        />
       </div>
 
       <div className="p-4 bg-blue-50/50 border border-blue-200 rounded-xl space-y-4">
diff --git a/frontend/src/components/optional-service-resource-fields.tsx b/frontend/src/components/optional-service-resource-fields.tsx
index 0bbd8b8..4437cee 100644
--- a/frontend/src/components/optional-service-resource-fields.tsx
+++ b/frontend/src/components/optional-service-resource-fields.tsx
@@ -2,6 +2,7 @@
 
 import { Server } from 'lucide-react';
 import { useT } from '@/i18n/I18nProvider';
+import { Select } from '@/components/ui/select';
 import type { OptionalServiceResourceConfig } from '@/types';
 
 export function OptionalServiceResourceFields({
@@ -34,31 +35,35 @@ export function OptionalServiceResourceFields({
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
           <label className="block text-xs text-gray-500 mb-1">{r.cpuLimit}</label>
-          <select
-            className="input-field text-sm"
+          <Select
+            size="md"
+            ariaLabel={r.cpuLimit}
             disabled={readOnly}
             value={config.cpuLimit}
-            onChange={(e) => onChange({ cpuLimit: e.target.value })}
-          >
-            <option value="200m">200m</option>
-            <option value="500m">500m</option>
-            <option value="1">{r.oneCore}</option>
-            <option value="2">{r.twoCores}</option>
-          </select>
+            onChange={(v) => onChange({ cpuLimit: v })}
+            options={[
+              { value: '200m', label: '200m' },
+              { value: '500m', label: '500m' },
+              { value: '1', label: r.oneCore },
+              { value: '2', label: r.twoCores },
+            ]}
+          />
         </div>
         <div>
           <label className="block text-xs text-gray-500 mb-1">{r.memoryLimit}</label>
-          <select
-            className="input-field text-sm"
+          <Select
+            size="md"
+            ariaLabel={r.memoryLimit}
             disabled={readOnly}
             value={config.memoryLimit}
-            onChange={(e) => onChange({ memoryLimit: e.target.value })}
-          >
-            <option value="256Mi">256 Mi</option>
-            <option value="512Mi">512 Mi</option>
-            <option value="1Gi">1 Gi</option>
-            <option value="2Gi">2 Gi</option>
-          </select>
+            onChange={(v) => onChange({ memoryLimit: v })}
+            options={[
+              { value: '256Mi', label: '256 Mi' },
+              { value: '512Mi', label: '512 Mi' },
+              { value: '1Gi', label: '1 Gi' },
+              { value: '2Gi', label: '2 Gi' },
+            ]}
+          />
         </div>
         <div className="sm:col-span-2">
           <label className="block text-xs text-gray-500 mb-1">{r.storageGb}</label>
diff --git a/frontend/src/components/service-external-access-panel.tsx b/frontend/src/components/service-external-access-panel.tsx
index a4e38dc..c6ba7f9 100644
--- a/frontend/src/components/service-external-access-panel.tsx
+++ b/frontend/src/components/service-external-access-panel.tsx
@@ -5,6 +5,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import api from '@/lib/api';
 import { toast } from 'react-toastify';
 import { useT } from '@/i18n/I18nProvider';
+import { Select } from '@/components/ui/select';
 import type { Application, ServiceAccessGrant, ServiceAccessTarget } from '@/types';
 import { ExternalLink, ShieldAlert, Copy, Check, Eye, EyeOff } from 'lucide-react';
 
@@ -129,17 +130,13 @@ export function ServiceExternalAccessPanel({
             <div className="flex flex-wrap gap-4 items-end">
               <div className="flex-1 min-w-[160px]">
                 <label className="text-xs font-medium text-gray-600 block mb-1">{ea.service}</label>
-                <select
+                <Select
+                  size="md"
+                  ariaLabel={ea.service}
                   value={accessTarget}
-                  onChange={(e) => setAccessTarget(e.target.value as ServiceAccessTarget)}
-                  className="input-field w-full text-sm"
-                >
-                  {accessTargetOptions.map((o) => (
-                    <option key={o.value} value={o.value}>
-                      {o.label}
-                    </option>
-                  ))}
-                </select>
+                  onChange={(v) => setAccessTarget(v as ServiceAccessTarget)}
+                  options={accessTargetOptions}
+                />
               </div>
               <div className="flex-1 min-w-[200px]">
                 <label className="text-xs font-medium text-gray-600 block mb-1">{ea.accessMode}</label>
diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
new file mode 100644
index 0000000..b7cc492
--- /dev/null
+++ b/frontend/src/components/ui/select.tsx
@@ -0,0 +1,127 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { ChevronDown, Check } from 'lucide-react';
+
+export type SelectOption = { value: string; label: string; disabled?: boolean };
+
+/**
+ * Lightweight custom dropdown. Unlike a native <select>, its option list is
+ * absolutely anchored right below the trigger, so it can never render detached
+ * at the top of the screen (a common mobile/emulator quirk). Flips above the
+ * trigger automatically when there isn't enough room below.
+ */
+export function Select({
+  value,
+  options,
+  onChange,
+  className = '',
+  ariaLabel,
+  placeholder,
+  size = 'sm',
+  disabled = false,
+}: {
+  value: string;
+  options: SelectOption[];
+  onChange: (value: string) => void;
+  className?: string;
+  ariaLabel?: string;
+  placeholder?: string;
+  /** sm: compact inline pickers; md: matches the .input-field form control. */
+  size?: 'sm' | 'md';
+  disabled?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const [flipUp, setFlipUp] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const selected = options.find((o) => o.value === value);
+
+  const close = useCallback(() => setOpen(false), []);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDocClick = (e: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) close();
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') close();
+    };
+    document.addEventListener('mousedown', onDocClick);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDocClick);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open, close]);
+
+  const toggle = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (disabled) return;
+    if (!open && rootRef.current) {
+      const rect = rootRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      setFlipUp(spaceBelow < 240 && rect.top > spaceBelow);
+    }
+    setOpen((o) => !o);
+  };
+
+  return (
+    <div ref={rootRef} className={`relative ${className}`}>
+      <button
+        type="button"
+        onClick={toggle}
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label={ariaLabel}
+        className={`w-full flex items-center justify-between gap-2 border border-gray-300 bg-white text-sm text-gray-800 shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed disabled:bg-gray-50 ${
+          size === 'md' ? 'rounded-xl px-3.5 py-2.5' : 'rounded-lg px-2.5 py-1.5'
+        }`}
+      >
+        <span className={`truncate ${selected ? '' : 'text-gray-400'}`}>
+          {selected?.label ?? placeholder ?? value}
+        </span>
+        <ChevronDown
+          className={`w-4 h-4 text-gray-400 shrink-0 transition-transform duration-150 ${open ? 'rotate-180' : ''}`}
+        />
+      </button>
+
+      {open && (
+        <ul
+          role="listbox"
+          className={`absolute z-50 left-0 right-0 max-h-60 overflow-auto rounded-xl border border-gray-200 bg-white py-1 shadow-lg ring-1 ring-black/5 ${
+            flipUp ? 'bottom-full mb-1' : 'top-full mt-1'
+          }`}
+        >
+          {options.map((opt) => {
+            const isSelected = opt.value === value;
+            return (
+              <li
+                key={opt.value}
+                role="option"
+                aria-selected={isSelected}
+                aria-disabled={opt.disabled}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  if (opt.disabled) return;
+                  onChange(opt.value);
+                  close();
+                }}
+                className={`flex items-center justify-between gap-2 px-3 py-2 text-sm transition-colors ${
+                  opt.disabled
+                    ? 'text-gray-300 cursor-not-allowed'
+                    : isSelected
+                      ? 'bg-primary-50/70 text-primary-700 font-medium cursor-pointer'
+                      : 'text-gray-700 hover:bg-gray-50 cursor-pointer'
+                }`}
+              >
+                <span className="truncate">{opt.label}</span>
+                {isSelected && <Check className="w-4 h-4 text-primary-600 shrink-0" />}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}