diff --git a/internal/server/dashboard.go b/internal/server/dashboard.go
index d6550bd..7d13d91 100644
--- a/internal/server/dashboard.go
+++ b/internal/server/dashboard.go
@@ -113,6 +113,77 @@ type PackagesListPageData struct {
 	TotalPages int
 }
 
+func supportedEcosystems() []string {
+	return []string{
+		"npm",
+		"cargo",
+		"gem",
+		"go",
+		"hex",
+		"pub",
+		"pypi",
+		"maven",
+		"nuget",
+		"composer",
+		"conan",
+		"conda",
+		"cran",
+		"oci",
+		"deb",
+		"rpm",
+	}
+}
+
+func ecosystemBadgeLabel(ecosystem string) string {
+	switch ecosystem {
+	case "oci":
+		return "container"
+	case "deb":
+		return "debian"
+	default:
+		return ecosystem
+	}
+}
+
+func ecosystemBadgeClasses(ecosystem string) string {
+	base := "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
+
+	switch ecosystem {
+	case "npm", "maven":
+		return base + " bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300"
+	case "cargo":
+		return base + " bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300"
+	case "gem":
+		return base + " bg-pink-100 text-pink-700 dark:bg-pink-900/50 dark:text-pink-300"
+	case "go":
+		return base + " bg-cyan-100 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300"
+	case "hex":
+		return base + " bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300"
+	case "pub":
+		return base + " bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
+	case "pypi":
+		return base + " bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300"
+	case "nuget":
+		return base + " bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300"
+	case "composer":
+		return base + " bg-violet-100 text-violet-700 dark:bg-violet-900/50 dark:text-violet-300"
+	case "conan":
+		return base + " bg-teal-100 text-teal-700 dark:bg-teal-900/50 dark:text-teal-300"
+	case "conda":
+		return base + " bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300"
+	case "cran":
+		return base + " bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300"
+	case "oci":
+		return base + " bg-sky-100 text-sky-700 dark:bg-sky-900/50 dark:text-sky-300"
+	case "deb":
+		return base + " bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300"
+	case "rpm":
+		return base + " bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-300"
+	default:
+		return base + " bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300"
+	}
+}
+
 func getRegistryConfigs(baseURL string) []RegistryConfig {
 	return []RegistryConfig{
 		{
diff --git a/internal/server/server_test.go b/internal/server/server_test.go
index 44498f9..7e432ed 100644
--- a/internal/server/server_test.go
+++ b/internal/server/server_test.go
@@ -57,8 +57,8 @@ func newTestServer(t *testing.T) *testServer {
 	proxy := handler.NewProxy(db, store, fetcher, resolver, logger)
 
 	cfg := &config.Config{
-		BaseURL: "http://localhost:8080",
-		Storage: config.StorageConfig{Path: storagePath},
+		BaseURL:  "http://localhost:8080",
+		Storage:  config.StorageConfig{Path: storagePath},
 		Database: config.DatabaseConfig{Path: dbPath},
 	}
 
@@ -196,6 +196,18 @@ func TestDashboard(t *testing.T) {
 	if !strings.Contains(body, "Popular Packages") {
 		t.Error("dashboard should contain popular packages section")
 	}
+	if !strings.Contains(body, ">composer<") {
+		t.Error("dashboard should show composer in supported ecosystems")
+	}
+	if !strings.Contains(body, ">conan<") {
+		t.Error("dashboard should show conan in supported ecosystems")
+	}
+	if !strings.Contains(body, ">container<") {
+		t.Error("dashboard should show container in supported ecosystems")
+	}
+	if !strings.Contains(body, ">debian<") {
+		t.Error("dashboard should show debian in supported ecosystems")
+	}
 }
 
 func min(a, b int) int {
diff --git a/internal/server/templates.go b/internal/server/templates.go
index c49c480..2d261a3 100644
--- a/internal/server/templates.go
+++ b/internal/server/templates.go
@@ -21,8 +21,11 @@ func NewTemplates() (*Templates, error) {
 
 	// Define custom template functions
 	funcMap := template.FuncMap{
-		"add": func(a, b int) int { return a + b },
-		"sub": func(a, b int) int { return a - b },
+		"add":                 func(a, b int) int { return a + b },
+		"sub":                 func(a, b int) int { return a - b },
+		"supportedEcosystems": supportedEcosystems,
+		"ecosystemBadgeClass": ecosystemBadgeClasses,
+		"ecosystemBadgeLabel": ecosystemBadgeLabel,
 	}
 
 	// Get all page files
diff --git a/internal/server/templates/components/ecosystem_badge.html b/internal/server/templates/components/ecosystem_badge.html
index ba1c286..4c7e882 100644
--- a/internal/server/templates/components/ecosystem_badge.html
+++ b/internal/server/templates/components/ecosystem_badge.html
@@ -1,3 +1,3 @@
 {{define "ecosystem_badge"}}
-<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ecosystem-{{.}}">{{.}}</span>
+<span class="{{ecosystemBadgeClass .}}">{{ecosystemBadgeLabel .}}</span>
 {{end}}
diff --git a/internal/server/templates/layout/footer.html b/internal/server/templates/layout/footer.html
index 2c963f0..8b88416 100644
--- a/internal/server/templates/layout/footer.html
+++ b/internal/server/templates/layout/footer.html
@@ -19,12 +19,9 @@ <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">Resource
             <div>
                 <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">Supported Ecosystems</h3>
                 <div class="flex flex-wrap gap-1">
-                    <span class="ecosystem-npm px-2 py-0.5 rounded text-xs">npm</span>
-                    <span class="ecosystem-cargo px-2 py-0.5 rounded text-xs">cargo</span>
-                    <span class="ecosystem-gem px-2 py-0.5 rounded text-xs">gem</span>
-                    <span class="ecosystem-go px-2 py-0.5 rounded text-xs">go</span>
-                    <span class="ecosystem-pypi px-2 py-0.5 rounded text-xs">pypi</span>
-                    <span class="ecosystem-maven px-2 py-0.5 rounded text-xs">maven</span>
+                    {{range supportedEcosystems}}
+                    {{template "ecosystem_badge" .}}
+                    {{end}}
                 </div>
             </div>
         </div>
diff --git a/internal/server/templates/layout/styles.html b/internal/server/templates/layout/styles.html
index 1d21184..7fecaff 100644
--- a/internal/server/templates/layout/styles.html
+++ b/internal/server/templates/layout/styles.html
@@ -1,25 +1,4 @@
 {{define "styles"}}
-<style type="text/tailwindcss">
-    @layer components {
-        .ecosystem-npm { @apply bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300; }
-        .ecosystem-cargo { @apply bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300; }
-        .ecosystem-gem { @apply bg-pink-100 text-pink-700 dark:bg-pink-900/50 dark:text-pink-300; }
-        .ecosystem-go { @apply bg-cyan-100 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300; }
-        .ecosystem-hex { @apply bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300; }
-        .ecosystem-pub { @apply bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300; }
-        .ecosystem-pypi { @apply bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300; }
-        .ecosystem-maven { @apply bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300; }
-        .ecosystem-nuget { @apply bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300; }
-        .ecosystem-composer { @apply bg-violet-100 text-violet-700 dark:bg-violet-900/50 dark:text-violet-300; }
-        .ecosystem-conan { @apply bg-teal-100 text-teal-700 dark:bg-teal-900/50 dark:text-teal-300; }
-        .ecosystem-conda { @apply bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300; }
-        .ecosystem-cran { @apply bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300; }
-        .ecosystem-oci { @apply bg-sky-100 text-sky-700 dark:bg-sky-900/50 dark:text-sky-300; }
-        .ecosystem-deb { @apply bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300; }
-        .ecosystem-rpm { @apply bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-300; }
-    }
-</style>
-
 <script>
     document.getElementById('theme-toggle').addEventListener('click', function() {
         if (document.documentElement.classList.contains('dark')) {
diff --git a/internal/server/templates/pages/packages_list.html b/internal/server/templates/pages/packages_list.html
index 7be1d41..769a51d 100644
--- a/internal/server/templates/pages/packages_list.html
+++ b/internal/server/templates/pages/packages_list.html
@@ -13,19 +13,9 @@ <h1 class="text-3xl font-bold mb-2">Cached Packages</h1>
         <label for="ecosystem-filter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Filter by ecosystem</label>
         <select id="ecosystem-filter" class="w-full max-w-xs px-4 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
             <option value="">All ecosystems</option>
-            <option value="npm"{{if eq .Ecosystem "npm"}} selected{{end}}>npm</option>
-            <option value="cargo"{{if eq .Ecosystem "cargo"}} selected{{end}}>cargo</option>
-            <option value="gem"{{if eq .Ecosystem "gem"}} selected{{end}}>gem</option>
-            <option value="go"{{if eq .Ecosystem "go"}} selected{{end}}>go</option>
-            <option value="hex"{{if eq .Ecosystem "hex"}} selected{{end}}>hex</option>
-            <option value="pub"{{if eq .Ecosystem "pub"}} selected{{end}}>pub</option>
-            <option value="pypi"{{if eq .Ecosystem "pypi"}} selected{{end}}>pypi</option>
-            <option value="maven"{{if eq .Ecosystem "maven"}} selected{{end}}>maven</option>
-            <option value="nuget"{{if eq .Ecosystem "nuget"}} selected{{end}}>nuget</option>
-            <option value="composer"{{if eq .Ecosystem "composer"}} selected{{end}}>composer</option>
-            <option value="conan"{{if eq .Ecosystem "conan"}} selected{{end}}>conan</option>
-            <option value="conda"{{if eq .Ecosystem "conda"}} selected{{end}}>conda</option>
-            <option value="cran"{{if eq .Ecosystem "cran"}} selected{{end}}>cran</option>
+            {{range supportedEcosystems}}
+            <option value="{{.}}"{{if eq $.Ecosystem .}} selected{{end}}>{{ecosystemBadgeLabel .}}</option>
+            {{end}}
         </select>
     </div>
     <div class="flex-1">
diff --git a/internal/server/templates/pages/search.html b/internal/server/templates/pages/search.html
index 2f3051a..a3e76b1 100644
--- a/internal/server/templates/pages/search.html
+++ b/internal/server/templates/pages/search.html
@@ -13,19 +13,9 @@ <h1 class="text-3xl font-bold mb-2">Search Results</h1>
         <label for="ecosystem-filter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Filter by ecosystem</label>
         <select id="ecosystem-filter" class="w-full max-w-xs px-4 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
             <option value="">All ecosystems</option>
-            <option value="npm"{{if eq .Ecosystem "npm"}} selected{{end}}>npm</option>
-            <option value="cargo"{{if eq .Ecosystem "cargo"}} selected{{end}}>cargo</option>
-            <option value="gem"{{if eq .Ecosystem "gem"}} selected{{end}}>gem</option>
-            <option value="go"{{if eq .Ecosystem "go"}} selected{{end}}>go</option>
-            <option value="hex"{{if eq .Ecosystem "hex"}} selected{{end}}>hex</option>
-            <option value="pub"{{if eq .Ecosystem "pub"}} selected{{end}}>pub</option>
-            <option value="pypi"{{if eq .Ecosystem "pypi"}} selected{{end}}>pypi</option>
-            <option value="maven"{{if eq .Ecosystem "maven"}} selected{{end}}>maven</option>
-            <option value="nuget"{{if eq .Ecosystem "nuget"}} selected{{end}}>nuget</option>
-            <option value="composer"{{if eq .Ecosystem "composer"}} selected{{end}}>composer</option>
-            <option value="conan"{{if eq .Ecosystem "conan"}} selected{{end}}>conan</option>
-            <option value="conda"{{if eq .Ecosystem "conda"}} selected{{end}}>conda</option>
-            <option value="cran"{{if eq .Ecosystem "cran"}} selected{{end}}>cran</option>
+            {{range supportedEcosystems}}
+            <option value="{{.}}"{{if eq $.Ecosystem .}} selected{{end}}>{{ecosystemBadgeLabel .}}</option>
+            {{end}}
         </select>
     </div>
 </div>