diff --git a/app/models/category.rb b/app/models/category.rb
index 6803530..c80d111 100644
--- a/app/models/category.rb
+++ b/app/models/category.rb
@@ -2,4 +2,19 @@ class Category < ApplicationRecord
   has_many :items, dependent: :restrict_with_error
 
   validates :name, presence: true, uniqueness: true
+
+  # 1. Zählt Artikel im Hauptlager (weder User noch Raum zugewiesen)
+  def items_in_storage_count
+    items.where(user_id: nil, room_id: nil).count
+  end
+
+  # 2. Zählt Artikel, die bei Mitarbeitern im Umlauf sind
+  def items_with_users_count
+    items.where.not(user_id: nil).count
+  end
+
+  # 3. Zählt Artikel, die fest in Räumen verbaut sind
+  def items_in_rooms_count
+    items.where.not(room_id: nil).count
+  end
 end
diff --git a/app/views/categories/index.html.erb b/app/views/categories/index.html.erb
index 2cfbbb3..19532ea 100644
--- a/app/views/categories/index.html.erb
+++ b/app/views/categories/index.html.erb
@@ -1,44 +1,80 @@
-<!-- Ersetze den alten Button im Top-Bar-Yield durch diesen echten Link -->
-
-<% content_for :title, "Kategorien" %>
+<% content_for :title, "Kategorien & Typen" %>
 
 <div class="space-y-6">
-  <!-- Header-Aktionen (Nutzt das Yield aus deinem Layout) -->
-  <% content_for :top_bar_actions do %>
-    <%= link_to new_category_path, class: "py-2 px-4 text-sm font-semibold rounded-lg bg-blue-600 text-white hover:bg-blue-700 flex items-center gap-1.5 shadow-sm transition" do %>
-      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
-      Kategorie erstellen
-    <% end %>
+  
+  <% if @categories.any? %>
+    <!-- RASTER: Symmetrische Kacheln für Desktop und Mobilgeräte -->
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+      <% @categories.each do |category| %>
+        <div class="bg-white border border-gray-200 rounded-xl p-5 shadow-sm hover:shadow-md transition flex flex-col justify-between gap-4">
+          
+          <!-- OBERER TEIL: Kategorie-Name -->
+          <div>
+            <div class="flex items-center gap-3.5">
+              <!-- Großes Ordner-Icon -->
+              <div class="p-2.5 bg-blue-50 text-blue-600 rounded-xl shrink-0 shadow-sm border border-blue-100">
+                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-19.5 0A2.25 2.25 0 0 0 2.25 15v2.25m0-4.5A2.25 2.25 0 0 1 4.5 12h15a2.25 2.25 0 0 1 2.25 2.25m-19.5 0v4.5A2.25 2.25 0 0 0 4.5 21h15a2.25 2.25 0 0 0 2.25-2.25V15M2.25 12V6a2.25 2.25 0 0 1 2.25-2.25h2.25c.59 0 1.157.234 1.576.652L9.75 5.85a2.25 2.25 0 0 0 1.576.652h6.924a2.25 2.25 0 0 1 2.25 2.25v3.25" />
+                </svg>
+              </div>
+              <div class="min-w-0">
+                <h3 class="text-base font-black text-gray-900 truncate leading-tight"><%= category.name %></h3>
+                <span class="text-[11px] font-bold text-gray-400 font-mono block mt-0.5 uppercase tracking-wider">Gesamt: <%= category.items.count %></span>
+              </div>
+            </div>
+
+            <!-- MITTLERER TEIL: Die reinen Bestands-Kacheln (Größere Zahlen & Icons, ohne Text) -->
+            <div class="mt-4 grid grid-cols-3 gap-2 border-t border-b border-gray-100 py-3 bg-gray-50/50 -mx-5 px-5">
+              
+              <!-- 1. IM HAUPTLAGER (Amber/Orange) -->
+              <div class="flex flex-col items-center justify-center py-2.5 bg-white border border-amber-100 rounded-lg shadow-sm">
+                <!-- Icon vergrößert auf h-5 w-5 -->
+                <svg class="h-5 w-5 text-amber-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l5.25 3.03M12 12.75v9" />
+                </svg>
+                <!-- Zahl vergrößert auf text-base -->
+                <span class="text-base font-black text-gray-900 mt-1.5 font-mono leading-none"><%= category.items_in_storage_count %></span>
+              </div>
+
+              <!-- 2. BEI USERN / MITARBEITERN (Grün) -->
+              <div class="flex flex-col items-center justify-center py-2.5 bg-white border border-green-100 rounded-lg shadow-sm">
+                <!-- Icon vergrößert auf h-5 w-5 -->
+                <svg class="h-5 w-5 text-green-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+                </svg>
+                <!-- Zahl vergrößert auf text-base -->
+                <span class="text-base font-black text-gray-900 mt-1.5 font-mono leading-none"><%= category.items_with_users_count %></span>
+              </div>
+
+              <!-- 3. IN RÄUMEN / BÜROS (Blau) -->
+              <div class="flex flex-col items-center justify-center py-2.5 bg-white border border-blue-100 rounded-lg shadow-sm">
+                <!-- Icon vergrößert auf h-5 w-5 -->
+                <svg class="h-5 w-5 text-blue-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25a7.5 7.5 0 1 1 15 0Z" />
+                </svg>
+                <!-- Zahl vergrößert auf text-base -->
+                <span class="text-base font-black text-gray-900 mt-1.5 font-mono leading-none"><%= category.items_in_rooms_count %></span>
+              </div>
+
+            </div>
+          </div>
+          
+          <!-- UNTERER TEIL: REST-Aktionen -->
+          <div class="pt-1 flex items-center justify-between text-xs font-semibold">
+            <%= link_to category_path(category), class: "text-blue-600 hover:text-blue-700 transition" do %>
+              Liste öffnen →
+            <% end %>
+            <%= link_to "Bearbeiten", edit_category_path(category), class: "text-gray-400 hover:text-gray-600 transition" %>
+          </div>
+
+        </div>
+      <% end %>
+    </div>
+  <% else %>
+    <div class="text-center py-16 text-gray-400 bg-white border border-gray-200 rounded-xl shadow-sm">
+      <p class="text-sm font-medium">Bisher sind keine Kategorien hinterlegt.</p>
+    </div>
   <% end %>
 
-  <!-- Das Kachel-Grid -->
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-    <% @categories.each do |category| %>
-      <div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm hover:shadow-md transition flex flex-col justify-between">
-        <div>
-          <div class="flex items-center justify-between mb-4">
-            <div class="p-2.5 bg-blue-50 text-blue-600 rounded-lg">
-              <!-- Heroicon: folder -->
-              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-19.5 0A2.25 2.25 0 0 0 2.25 15v2.25m0-4.5A2.25 2.25 0 0 1 4.5 12h15a2.25 2.25 0 0 1 2.25 2.25m-19.5 0v4.5A2.25 2.25 0 0 0 4.5 21h15a2.25 2.25 0 0 0 2.25-2.25V15M2.25 12V6a2.25 2.25 0 0 1 2.25-2.25h2.25c.59 0 1.157.234 1.576.652L9.75 5.85a2.25 2.25 0 0 0 1.576.652h6.924a2.25 2.25 0 0 1 2.25 2.25v3.25" /></svg>
-            </div>
-            <!-- Dynamische Anzahl der Objekte im System -->
-            <span class="inline-flex items-center py-1 px-2.5 rounded-full text-xs font-semibold bg-gray-100 text-gray-800 border border-gray-200">
-              <%= category.items.count %> <%= category.items.count == 1 ? "Objekt" : "Objekte" %>
-            </span>
-          </div>
-          <h3 class="text-base font-bold text-gray-800"><%= category.name %></h3>
-          <p class="text-xs text-gray-500 mt-2 leading-relaxed"><%= category.description.presence || "Keine Beschreibung hinterlegt." %></p>
-        </div>
-        
-        <div class="mt-6 pt-4 border-t border-gray-100 flex justify-end gap-3 text-xs font-semibold">
-  
-          <%= link_to "Bearbeiten", edit_category_path(category), class: "text-gray-500 hover:text-gray-700 transition" %>
-          
-          <%= link_to category_path(category), class: "text-blue-600 hover:text-blue-800 flex items-center gap-0.5 transition" do %>
-            Artikel ansehen &rarr;
-          <% end %>
-        </div>
-      </div>
-    <% end %>
-  </div>
 </div>