diff --git a/api/collections/comments.yml b/api/collections/comments.yml
index 22fe39e..84e3c55 100644
--- a/api/collections/comments.yml
+++ b/api/collections/comments.yml
@@ -2,7 +2,8 @@ name: comments
 meta:
   label: { de: "Kommentare", en: "Comments" }
   muiIcon: chat
-  group: content
+  group: community
+  imageUrl: "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&q=80&w=800"
   preview:
     label: author
     secondary: message
diff --git a/api/collections/content.yml b/api/collections/content.yml
index d75b372..b73c7c8 100644
--- a/api/collections/content.yml
+++ b/api/collections/content.yml
@@ -6,8 +6,9 @@ name: content
 uploadPath: ../media/content
 meta:
   label: { de: "Inhalte", en: "Content" }
-  muiIcon: article
+  muiIcon: description
   group: content
+  imageUrl: "https://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&q=80&w=800"
   preview:
     label: name
     secondary: path
diff --git a/api/collections/medialib.yml b/api/collections/medialib.yml
index 497621a..408d0ab 100644
--- a/api/collections/medialib.yml
+++ b/api/collections/medialib.yml
@@ -6,8 +6,9 @@ name: medialib
 uploadPath: ../media/medialib
 meta:
   label: { de: "Mediathek", en: "Media Library" }
-  muiIcon: image_multiple
-  group: media
+  muiIcon: perm_media
+  group: content
+  imageUrl: "https://images.unsplash.com/photo-1542204165-65bf26472b9b?auto=format&fit=crop&q=80&w=800"
   viewHint:
     media:
       ai:
@@ -22,13 +23,10 @@ meta:
           file: file
   preview:
     label: title
-    secondary: description
-    tertiary: tags
+    secondary: tags
+    tertiary: description
     image: file
-    table:
-      - file
-      - title
-      - tags
+    mediaFile: file
   subNavigation:
     - name: images
       label: { de: "Bilder", en: "Images" }
@@ -134,8 +132,10 @@ fields:
   - name: tags
     type: string[]
     meta:
-      label: { de: "Tags", en: "Tags" }
-      widget: chipArray
+      label: { de: "Schlagwörter", en: "Tags" }
+      widget: foreignKey
+      foreign:
+        collection: tags
   - name: _testdata
     type: boolean
     meta:
diff --git a/api/collections/navigation.yml b/api/collections/navigation.yml
index e541790..6e16015 100644
--- a/api/collections/navigation.yml
+++ b/api/collections/navigation.yml
@@ -6,7 +6,8 @@ name: navigation
 meta:
   label: { de: "Navigation", en: "Navigation" }
   muiIcon: menu
-  group: structure
+  group: content
+  imageUrl: "https://images.unsplash.com/photo-1506784926709-22f1ec395907?auto=format&fit=crop&q=80&w=800"
   viewHint:
     navigation:
       nodesField: elements
diff --git a/api/collections/ssr.yml b/api/collections/ssr.yml
index a835b8c..881208b 100644
--- a/api/collections/ssr.yml
+++ b/api/collections/ssr.yml
@@ -5,8 +5,9 @@
 name: ssr
 meta:
   label: { de: "SSR Dummy", en: "ssr dummy" }
-  muiIcon: server
+  muiIcon: storage
   group: system
+  imageUrl: "https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=800"
   hide: true
 
 permissions:
diff --git a/api/collections/tags.yml b/api/collections/tags.yml
new file mode 100644
index 0000000..3d734af
--- /dev/null
+++ b/api/collections/tags.yml
@@ -0,0 +1,104 @@
+########################################################################
+# Tags — verwaltete Schlagwörter für Mediathek und andere Collections
+########################################################################
+
+name: tags
+meta:
+  label: { de: "Schlagwörter", en: "Tags" }
+  muiIcon: tag
+  group: content
+  imageUrl: "https://images.unsplash.com/photo-1543285198-3af15c4592ce?auto=format&fit=crop&w=640&q=80"
+  preview:
+    select: [ name, color ]
+    label: name
+    labelStyle:
+      eval: |
+        //js
+        (function() {
+            const raw = ($this?.color || '').trim()
+            if (!raw) return ''
+            
+            const hex = raw.replace(/^#/, '')
+            if (!/^[0-9a-fA-F]{6}$/.test(hex)) {
+                return 'background:' + raw + ';color:#F9FAFB;border:1px solid ' + raw
+            }
+
+            const r = parseInt(hex.slice(0, 2), 16)
+            const g = parseInt(hex.slice(2, 4), 16)
+            const b = parseInt(hex.slice(4, 6), 16)
+            
+            const toLinear = (channel) => {
+                const normalized = channel / 255
+                return normalized <= 0.04045
+                    ? normalized / 12.92
+                    : Math.pow((normalized + 0.055) / 1.055, 2.4)
+            }
+            
+            const luminance = (
+                0.2126 * toLinear(r) +
+                0.7152 * toLinear(g) +
+                0.0722 * toLinear(b)
+            )
+            const whiteContrast = 1.05 / (luminance + 0.05)
+            const darkContrast = (luminance + 0.05) / 0.05
+            const text = darkContrast >= whiteContrast ? '#111827' : '#F9FAFB'
+            const border = luminance > 0.85 ? '#D1D5DB' : raw
+            
+            return 'background:' + raw + ';color:' + text + ';border:1px solid ' + border
+        })()
+        //!js
+
+permissions:
+  public:
+    methods:
+      get: true
+  user:
+    methods:
+      get: true
+      post: true
+      put: true
+      delete: true
+  "token:${ADMIN_TOKEN}":
+    methods:
+      get: true
+      post: true
+      put: true
+      delete: true
+
+fields:
+  - name: name
+    type: string
+    meta:
+      label: { de: "Name", en: "Name" }
+  - name: group
+    type: string
+    meta:
+      label: { de: "Gruppe", en: "Group" }
+      widget: select
+      choices:
+        - id: system
+          name: { de: "System", en: "System" }
+        - id: kategorie
+          name: { de: "Kategorie", en: "Category" }
+  - name: color
+    type: string
+    meta:
+      label: { de: "Farbe", en: "Color" }
+      widget: select
+      choices:
+        - id: "#4caf50"
+          name: { de: "Grün", en: "Green" }
+          badgeStyle: { backgroundColor: "#4caf50", color: "#ffffff" }
+        - id: "#2196f3"
+          name: { de: "Blau", en: "Blue" }
+          badgeStyle: { backgroundColor: "#2196f3", color: "#ffffff" }
+        - id: "#f44336"
+          name: { de: "Rot", en: "Red" }
+          badgeStyle: { backgroundColor: "#f44336", color: "#ffffff" }
+        - id: "#9c27b0"
+          name: { de: "Lila", en: "Purple" }
+          badgeStyle: { backgroundColor: "#9c27b0", color: "#ffffff" }
+  - name: _testdata
+    type: boolean
+    meta:
+      hide: true
diff --git a/api/config.yml b/api/config.yml
index 72ef8d0..31438bd 100644
--- a/api/config.yml
+++ b/api/config.yml
@@ -13,18 +13,16 @@ meta:
   collectionGroups:
     - name: content
       label: { de: "Inhalte", en: "Content" }
-      icon: article
-    - name: media
-      label: { de: "Medien", en: "Media" }
-      icon: image_multiple
-    - name: structure
-      label: { de: "Struktur", en: "Structure" }
-      icon: account_tree
+      icon: description
+    - name: community
+      label: { de: "Community", en: "Community" }
+      icon: forum
     - name: system
       label: { de: "System", en: "System" }
       icon: settings
 
 collections:
+  - !include collections/tags.yml
   - !include collections/content.yml
   - !include collections/medialib.yml
   - !include collections/navigation.yml
diff --git a/api/config.yml.env b/api/config.yml.env
index 6555de5..badafda 100644
--- a/api/config.yml.env
+++ b/api/config.yml.env
@@ -1,2 +1,2 @@
 ADMIN_TOKEN=5bdfjc78hdxn338cuhSJ
-ADMIN_ASSET_VERSION=db968ab-dirty-1779031350052
+ADMIN_ASSET_VERSION=db968ab-dirty-1779031609756
diff --git a/api/hooks/lib/meta.json b/api/hooks/lib/meta.json
index 37c77e9..35f4aa0 100644
--- a/api/hooks/lib/meta.json
+++ b/api/hooks/lib/meta.json
@@ -11640,7 +11640,7 @@
             "format": "esm"
         },
         "frontend/src/App.svelte": {
-            "bytes": 45905,
+            "bytes": 46448,
             "imports": [
                 {
                     "path": "node_modules/svelte/src/internal/server/index.js",
@@ -11757,7 +11757,7 @@
             "imports": [],
             "exports": [],
             "inputs": {},
-            "bytes": 2552032
+            "bytes": 2552325
         },
         "api/hooks/lib/app.server.js": {
             "imports": [
@@ -12567,10 +12567,10 @@
                     "bytesInOutput": 1049
                 },
                 "frontend/src/App.svelte": {
-                    "bytesInOutput": 15559
+                    "bytesInOutput": 15747
                 }
             },
-            "bytes": 983431
+            "bytes": 983619
         },
         "api/hooks/lib/app.server.css.map": {
             "imports": [],
diff --git a/frontend/mocking/tags.json b/frontend/mocking/tags.json
new file mode 100644
index 0000000..fed9fbe
--- /dev/null
+++ b/frontend/mocking/tags.json
@@ -0,0 +1,33 @@
+{
+    "data": [
+        {
+            "id": "6a09f082c6bc3af398907092",
+            "name": "Hero Image",
+            "group": "kategorie",
+            "color": "#4caf50",
+            "_testdata": true
+        },
+        {
+            "id": "6a09f082c6bc3af398907093",
+            "name": "Homepage",
+            "group": "kategorie",
+            "color": "#2196f3",
+            "_testdata": true
+        },
+        {
+            "id": "6a09f082c6bc3af398907094",
+            "name": "Natur",
+            "group": "kategorie",
+            "color": "#f44336",
+            "_testdata": true
+        },
+        {
+            "id": "6a09f082c6bc3af398907095",
+            "name": "Code",
+            "group": "system",
+            "color": "#9c27b0",
+            "_testdata": true
+        }
+    ],
+    "count": 4
+}
\ No newline at end of file