diff --git a/public/index.php b/public/index.php
index 806434e..034e111 100644
--- a/public/index.php
+++ b/public/index.php
@@ -339,6 +339,9 @@ if (!$municipality) {
             zoom: <?= $municipality['default_zoom'] ?>,
             primaryColor: "<?= htmlspecialchars($municipality['primary_color'], ENT_QUOTES) ?>"
         };
+
+        // Category Definitions from Database
+        var CATEGORIES = <?= json_encode(get_categories(), JSON_UNESCAPED_UNICODE) ?>;
     </script>
 
     <!-- Application Logic -->
diff --git a/public/js/app.js b/public/js/app.js
index 67e5947..8b40f85 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -19,17 +19,6 @@ const API_URL = 'api/contributions.php';
 // Current User Name, set via Login Modal, stored in sessionStorage
 let currentUser = sessionStorage.getItem('webgis_user') || '';
 
-// Category Definitions with Labels, Icons, and Colors
-const CATEGORIES = {
-    consumption: { label: 'Geschäfte',   faIcon: 'fa-cart-shopping', color: '#C00000' },
-    building:    { label: 'Bauen',       faIcon: 'fa-building',      color: '#E65100' },
-    energy:      { label: 'Energie',     faIcon: 'fa-bolt',          color: '#FFC000' },
-    environment: { label: 'Umwelt',      faIcon: 'fa-seedling',      color: '#92D050' },
-    mobility:    { label: 'Mobilität',   faIcon: 'fa-bus',           color: '#0070C0' },
-    industry:    { label: 'Industrie',   faIcon: 'fa-industry',      color: '#7030A0' },
-    other:       { label: 'Sonstiges',   faIcon: 'fa-thumbtack',     color: '#7F7F7F' }
-};
-
 // Application State
 let map;                                      // Leaflet Map Instance
 let sidebar;                                  // Sidebar Instance