diff --git a/cmd/qfs/main.go b/cmd/qfs/main.go
index d7d898c..5a9f8d5 100644
--- a/cmd/qfs/main.go
+++ b/cmd/qfs/main.go
@@ -1550,21 +1550,23 @@ func setupRouter(cfg *config.Config, local *localdb.LocalDB, connMgr *db.Connect
 
 				// Return simplified list of all projects (UUID + Name only)
 				type ProjectSimple struct {
-					UUID     string `json:"uuid"`
-					Code     string `json:"code"`
-					Variant  string `json:"variant"`
-					Name     string `json:"name"`
-					IsActive bool   `json:"is_active"`
+					UUID      string    `json:"uuid"`
+					Code      string    `json:"code"`
+					Variant   string    `json:"variant"`
+					Name      string    `json:"name"`
+					IsActive  bool      `json:"is_active"`
+					CreatedAt time.Time `json:"created_at"`
 				}
 
 				simplified := make([]ProjectSimple, 0, len(allProjects))
 				for _, p := range allProjects {
 					simplified = append(simplified, ProjectSimple{
-						UUID:     p.UUID,
-						Code:     p.Code,
-						Variant:  p.Variant,
-						Name:     derefString(p.Name),
-						IsActive: p.IsActive,
+						UUID:      p.UUID,
+						Code:      p.Code,
+						Variant:   p.Variant,
+						Name:      derefString(p.Name),
+						IsActive:  p.IsActive,
+						CreatedAt: p.CreatedAt,
 					})
 				}
 
diff --git a/web/templates/project_detail.html b/web/templates/project_detail.html
index ab655e2..8580bb4 100644
--- a/web/templates/project_detail.html
+++ b/web/templates/project_detail.html
@@ -22,8 +22,8 @@
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                         </svg>
                     </button>
-                    <div id="project-variant-menu" class="absolute left-0 mt-2 min-w-[10rem] rounded-lg border border-gray-200 bg-white shadow-lg hidden z-10">
-                        <div id="project-variant-list" class="py-1"></div>
+                    <div id="project-variant-menu" class="absolute left-0 mt-2 w-max max-w-xs min-w-[12rem] rounded-lg border border-gray-200 bg-white shadow-lg hidden z-10 text-sm font-normal">
+                        <div id="project-variant-list" class="py-1 max-h-72 overflow-y-auto"></div>
                     </div>
                 </div>
                 <button onclick="openNewVariantModal()" class="inline-flex w-full sm:w-auto justify-center items-center px-3 py-1.5 text-sm font-medium bg-purple-600 text-white rounded-lg hover:bg-purple-700">
@@ -380,8 +380,8 @@ async function loadVariantsForCode(code) {
         }
         projectVariants = allProjects
             .filter(p => (p.code || '').trim() === code && p.is_active !== false)
-            .map(p => ({uuid: p.uuid, variant: (p.variant || '').trim()}));
-        projectVariants.sort((a, b) => normalizeVariantLabel(a.variant).localeCompare(normalizeVariantLabel(b.variant)));
+            .map(p => ({uuid: p.uuid, variant: (p.variant || '').trim(), createdAt: p.created_at || ''}));
+        projectVariants.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
     } catch (e) {
         // ignore
     }
@@ -397,7 +397,7 @@ function renderVariantSelect() {
     list.innerHTML = '';
     const variants = projectVariants.length ? projectVariants : [{uuid: projectUUID, variant: (project && project.variant) || ''}];
     let mainUUID = '';
-    variants.forEach(item => {
+    variants.forEach((item, index) => {
         const variantLabel = normalizeVariantLabel(item.variant);
         if (variantLabel === 'main' && !mainUUID) {
             mainUUID = item.uuid;
@@ -410,7 +410,7 @@ function renderVariantSelect() {
             label.textContent = variantLabel;
             document.title = (project && project.code ? project.code : '—') + ' / ' + variantLabel + ' — OFS';
         }
-        option.textContent = variantLabel;
+        option.textContent = (index + 1) + '. ' + variantLabel;
         option.onclick = function() {
             menu.classList.add('hidden');
             if (item.uuid && item.uuid !== projectUUID) {