From 90231bff835519cd642e021bae7e986aed28b7d7 Mon Sep 17 00:00:00 2001
From: Linrador <68631622+Linrador@users.noreply.github.com>
Date: Mon, 17 Nov 2025 15:26:43 +0100
Subject: [PATCH] updated

---
 app/(app)/devices/DeviceEditModal.tsx         | 408 ++++++++++++++++
 app/(app)/devices/DeviceHistorySidebar.tsx    | 213 ++++++---
 app/(app)/devices/page.tsx                    | 438 ++++--------------
 app/api/auth/[...nextauth]/route.ts           |  79 +---
 app/api/devices/[id]/history/route.ts         |  62 ++-
 app/api/devices/[id]/route.ts                 | 133 +++++-
 app/api/devices/route.ts                      |  41 +-
 app/globals.css                               |   2 -
 components/ui/Badge.tsx                       | 161 +++++++
 components/ui/Feed.tsx                        | 378 +++++++++------
 components/ui/Modal.tsx                       |  12 +-
 components/ui/TagMultiCombobox.tsx            | 233 ++++++++++
 lib/auth-options.ts                           |  72 +++
 lib/auth.ts                                   |  71 +--
 lib/socketClient.ts                           |  16 +
 lib/socketServer.ts                           |   7 +
 package-lock.json                             | 322 ++++++++++++-
 package.json                                  |   2 +
 pages/api/socketio.ts                         |  46 ++
 prisma/create-test-user.ts                    |  50 +-
 prisma/dev.db                                 | Bin 143360 -> 167936 bytes
 .../migrations/20251117092638/migration.sql   |  22 +
 .../migration.sql                             |   2 +
 prisma/schema.prisma                          |  32 +-
 24 files changed, 2045 insertions(+), 757 deletions(-)
 create mode 100644 app/(app)/devices/DeviceEditModal.tsx
 create mode 100644 components/ui/Badge.tsx
 create mode 100644 components/ui/TagMultiCombobox.tsx
 create mode 100644 lib/auth-options.ts
 create mode 100644 lib/socketClient.ts
 create mode 100644 lib/socketServer.ts
 create mode 100644 pages/api/socketio.ts
 create mode 100644 prisma/migrations/20251117092638/migration.sql
 create mode 100644 prisma/migrations/20251117134852_add_device_history_changed_by/migration.sql

diff --git a/app/(app)/devices/DeviceEditModal.tsx b/app/(app)/devices/DeviceEditModal.tsx
new file mode 100644
index 0000000..25f54fe
--- /dev/null
+++ b/app/(app)/devices/DeviceEditModal.tsx
@@ -0,0 +1,408 @@
+// app/(app)/devices/DeviceEditModal.tsx
+'use client';
+
+import { useCallback, useEffect, useState, ChangeEvent, Dispatch, SetStateAction } from 'react';
+import Modal from '@/components/ui/Modal';
+import { PencilIcon } from '@heroicons/react/24/outline';
+import DeviceHistorySidebar from './DeviceHistorySidebar';
+import TagMultiCombobox, { TagOption } from '@/components/ui/TagMultiCombobox';
+import type { DeviceDetail } from './page'; // Typ aus page.tsx (siehe unten)
+
+type DeviceEditModalProps = {
+  open: boolean;
+  inventoryNumber: string | null;
+  onClose: () => void;
+  onSaved: (device: DeviceDetail) => void;
+  allTags: TagOption[];
+  setAllTags: Dispatch<SetStateAction<TagOption[]>>;
+};
+
+export default function DeviceEditModal({
+  open,
+  inventoryNumber,
+  onClose,
+  onSaved,
+  allTags,
+  setAllTags,
+}: DeviceEditModalProps) {
+  const [editDevice, setEditDevice] = useState<DeviceDetail | null>(null);
+  const [editLoading, setEditLoading] = useState(false);
+  const [editError, setEditError] = useState<string | null>(null);
+  const [saveLoading, setSaveLoading] = useState(false);
+
+  // Gerät laden, wenn Modal geöffnet wird
+  useEffect(() => {
+    if (!open || !inventoryNumber) {
+      setEditDevice(null);
+      setEditError(null);
+      return;
+    }
+
+    let cancelled = false;
+
+    async function loadDevice() {
+      setEditLoading(true);
+      setEditError(null);
+      setEditDevice(null);
+
+      try {
+        const res = await fetch(
+          `/api/devices/${encodeURIComponent(inventoryNumber)}`,
+          {
+            method: 'GET',
+            headers: { 'Content-Type': 'application/json' },
+            cache: 'no-store',
+          },
+        );
+
+        if (!res.ok) {
+          if (res.status === 404) {
+            throw new Error('Gerät wurde nicht gefunden.');
+          }
+          throw new Error('Beim Laden der Gerätedaten ist ein Fehler aufgetreten.');
+        }
+
+        const data = (await res.json()) as DeviceDetail;
+        if (!cancelled) {
+          setEditDevice(data);
+        }
+      } catch (err: any) {
+        console.error('Error loading device', err);
+        if (!cancelled) {
+          setEditError(
+            err instanceof Error ? err.message : 'Netzwerkfehler beim Laden der Gerätedaten.',
+          );
+        }
+      } finally {
+        if (!cancelled) {
+          setEditLoading(false);
+        }
+      }
+    }
+
+    loadDevice();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [open, inventoryNumber]);
+
+  const handleFieldChange = (
+    field: keyof DeviceDetail,
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const value = e.target.value;
+    setEditDevice((prev) =>
+      prev ? ({ ...prev, [field]: value } as DeviceDetail) : prev,
+    );
+  };
+
+  const handleSave = useCallback(async () => {
+    if (!editDevice) return;
+
+    setSaveLoading(true);
+    setEditError(null);
+
+    try {
+      const res = await fetch(
+        `/api/devices/${encodeURIComponent(editDevice.inventoryNumber)}`,
+        {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            name: editDevice.name,
+            manufacturer: editDevice.manufacturer,
+            model: editDevice.model,
+            serialNumber: editDevice.serialNumber || null,
+            productNumber: editDevice.productNumber || null,
+            comment: editDevice.comment || null,
+            group: editDevice.group || null,
+            location: editDevice.location || null,
+            ipv4Address: editDevice.ipv4Address || null,
+            ipv6Address: editDevice.ipv6Address || null,
+            macAddress: editDevice.macAddress || null,
+            username: editDevice.username || null,
+            passwordHash: editDevice.passwordHash || null,
+            tags: editDevice.tags ?? [],
+          }),
+        },
+      );
+
+      if (!res.ok) {
+        if (res.status === 404) {
+          throw new Error('Gerät wurde nicht gefunden.');
+        }
+        throw new Error('Speichern der Änderungen ist fehlgeschlagen.');
+      }
+
+      const updated = (await res.json()) as DeviceDetail;
+      setEditDevice(updated);
+      onSaved(updated); // Tabelle im Parent aktualisieren
+    } catch (err: any) {
+      console.error('Error saving device', err);
+      setEditError(
+        err instanceof Error ? err.message : 'Netzwerkfehler beim Speichern der Gerätedaten.',
+      );
+    } finally {
+      setSaveLoading(false);
+    }
+  }, [editDevice, onSaved]);
+
+  const handleClose = () => {
+    if (saveLoading) return;
+    onClose();
+  };
+
+  return (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      title={
+        editDevice
+          ? `Gerät bearbeiten: ${editDevice.name}`
+          : 'Gerätedaten werden geladen …'
+      }
+      icon={<PencilIcon className="size-6" />}
+      tone="info"
+      variant="centered"
+      size="lg"
+      primaryAction={{
+        label: saveLoading ? 'Speichern …' : 'Speichern',
+        onClick: handleSave,
+        autoFocus: true,
+      }}
+      secondaryAction={{
+        label: 'Abbrechen',
+        variant: 'secondary',
+        onClick: handleClose,
+      }}
+      sidebar={
+        editDevice ? (
+          <DeviceHistorySidebar
+            inventoryNumber={editDevice.inventoryNumber}
+            asSidebar
+          />
+        ) : undefined
+      }
+    >
+      {editLoading && (
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          Gerätedaten werden geladen …
+        </p>
+      )}
+
+      {editError && (
+        <p className="text-sm text-red-600 dark:text-red-400">{editError}</p>
+      )}
+
+      {!editLoading && !editError && editDevice && (
+        <div className="mt-3 grid grid-cols-1 gap-4 text-sm sm:grid-cols-2">
+          {/* Inventarnummer */}
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
+              Inventar-Nr.
+            </p>
+            <input
+              type="text"
+              className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-400 shadow-xs ring-1 ring-inset ring-gray-800"
+              value={editDevice.inventoryNumber}
+              readOnly
+            />
+          </div>
+
+          {/* Bezeichnung */}
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
+              Bezeichnung
+            </p>
+            <input
+              type="text"
+              className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+              value={editDevice.name}
+              onChange={(e) => handleFieldChange('name', e)}
+            />
+          </div>
+
+          {/* Hersteller / Modell */}
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
+              Hersteller
+            </p>
+            <input
+              type="text"
+              className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+              value={editDevice.manufacturer}
+              onChange={(e) => handleFieldChange('manufacturer', e)}
+            />
+          </div>
+
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
+              Modell
+            </p>
+            <input
+              type="text"
+              className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+              value={editDevice.model}
+              onChange={(e) => handleFieldChange('model', e)}
+            />
+          </div>
+
+          {/* Seriennummer / Produktnummer */}
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
+              Seriennummer
+            </p>
+            <input
+              type="text"
+              className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+              value={editDevice.serialNumber ?? ''}
+              onChange={(e) => handleFieldChange('serialNumber', e)}
+            />
+          </div>
+
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
+              Produktnummer
+            </p>
+            <input
+              type="text"
+              className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+              value={editDevice.productNumber ?? ''}
+              onChange={(e) => handleFieldChange('productNumber', e)}
+            />
+          </div>
+
+          {/* Standort / Gruppe */}
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
+              Standort / Raum
+            </p>
+            <input
+              type="text"
+              className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+              value={editDevice.location ?? ''}
+              onChange={(e) => handleFieldChange('location', e)}
+            />
+          </div>
+
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
+              Gruppe
+            </p>
+            <input
+              type="text"
+              className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+              value={editDevice.group ?? ''}
+              onChange={(e) => handleFieldChange('group', e)}
+            />
+          </div>
+
+          {/* Tags */}
+          <div className="sm:col-span-2">
+            <TagMultiCombobox
+              label="Tags"
+              availableTags={allTags}
+              value={(editDevice.tags ?? []).map((name) => ({ name }))}
+              onChange={(next) => {
+                const names = next.map((t) => t.name);
+
+                // in editDevice speichern
+                setEditDevice((prev) =>
+                  prev ? ({ ...prev, tags: names } as DeviceDetail) : prev,
+                );
+
+                // allTags im Parent erweitern
+                setAllTags((prev) => {
+                  const map = new Map(prev.map((t) => [t.name.toLowerCase(), t]));
+                  for (const t of next) {
+                    const key = t.name.toLowerCase();
+                    if (!map.has(key)) {
+                      map.set(key, t);
+                    }
+                  }
+                  return Array.from(map.values());
+                });
+              }}
+              placeholder="z.B. Drucker, Serverraum, kritisch"
+            />
+          </div>
+
+          {/* Netzwerkdaten */}
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
+              IPv4-Adresse
+            </p>
+            <input
+              type="text"
+              className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+              value={editDevice.ipv4Address ?? ''}
+              onChange={(e) => handleFieldChange('ipv4Address', e)}
+            />
+          </div>
+
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
+              IPv6-Adresse
+            </p>
+            <input
+              type="text"
+              className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+              value={editDevice.ipv6Address ?? ''}
+              onChange={(e) => handleFieldChange('ipv6Address', e)}
+            />
+          </div>
+
+          <div className="sm:col-span-2">
+            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
+              MAC-Adresse
+            </p>
+            <input
+              type="text"
+              className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+              value={editDevice.macAddress ?? ''}
+              onChange={(e) => handleFieldChange('macAddress', e)}
+            />
+          </div>
+
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
+              Benutzername
+            </p>
+            <input
+              type="text"
+              className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+              value={editDevice.username ?? ''}
+              onChange={(e) => handleFieldChange('username', e)}
+            />
+          </div>
+
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
+              Passwort
+            </p>
+            <input
+              type="password"
+              className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+              value={editDevice.passwordHash ?? ''}
+              onChange={(e) => handleFieldChange('passwordHash', e)}
+            />
+          </div>
+
+          {/* Kommentar */}
+          <div className="sm:col-span-2">
+            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
+              Kommentar
+            </p>
+            <textarea
+              rows={3}
+              className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+              value={editDevice.comment ?? ''}
+              onChange={(e) => handleFieldChange('comment', e)}
+            />
+          </div>
+        </div>
+      )}
+    </Modal>
+  );
+}
diff --git a/app/(app)/devices/DeviceHistorySidebar.tsx b/app/(app)/devices/DeviceHistorySidebar.tsx
index 3e6b358..08edc89 100644
--- a/app/(app)/devices/DeviceHistorySidebar.tsx
+++ b/app/(app)/devices/DeviceHistorySidebar.tsx
@@ -1,14 +1,28 @@
 // app/(app)/devices/DeviceHistorySidebar.tsx
 'use client';
 
-import { useEffect, useState } from 'react';
-import Feed, { FeedItem } from '@/components/ui/Feed';
+import { useEffect, useState, ElementType } from 'react';
+import Feed, {
+  FeedItem,
+  FeedChange,
+} from '@/components/ui/Feed';
 
-type DeviceHistoryEntry = {
+type Props = {
+  inventoryNumber: string;
+  /** Wenn true: wird als Inhalt für Modal.sidebar gerendert (ohne eigenes <aside>/Border) */
+  asSidebar?: boolean;
+};
+
+type ApiHistoryEntry = {
   id: string;
   changeType: 'CREATED' | 'UPDATED' | 'DELETED';
   changedAt: string;
-  changedBy?: string | null;
+  changedBy: string | null;
+  changes: {
+    field: string;
+    from: string | null;
+    to: string | null;
+  }[];
 };
 
 function formatDateTime(iso: string) {
@@ -18,102 +32,163 @@ function formatDateTime(iso: string) {
   }).format(new Date(iso));
 }
 
-function changeTypeLabel(type: DeviceHistoryEntry['changeType']) {
-  switch (type) {
-    case 'CREATED':
-      return 'Gerät angelegt';
-    case 'UPDATED':
-      return 'Gerät aktualisiert';
-    case 'DELETED':
-      return 'Gerät gelöscht';
+function mapFieldLabel(field: string): string {
+  switch (field) {
+    case 'name':
+      return 'die Bezeichnung';
+    case 'manufacturer':
+      return 'den Hersteller';
+    case 'model':
+      return 'das Modell';
+    case 'serialNumber':
+      return 'die Seriennummer';
+    case 'productNumber':
+      return 'die Produktnummer';
+    case 'comment':
+      return 'den Kommentar';
+    case 'ipv4Address':
+      return 'die IPv4-Adresse';
+    case 'ipv6Address':
+      return 'die IPv6-Adresse';
+    case 'macAddress':
+      return 'die MAC-Adresse';
+    case 'username':
+      return 'den Benutzernamen';
+    case 'passwordHash':
+      return 'das Passwort';
+    case 'group':
+      return 'die Gruppe';
+    case 'location':
+      return 'den Standort';
+    case 'tags':
+      return 'die Tags';
     default:
-      return type;
+      return field;
   }
 }
 
-interface DeviceHistorySidebarProps {
-  inventoryNumber: string;
-}
-
 export default function DeviceHistorySidebar({
   inventoryNumber,
-}: DeviceHistorySidebarProps) {
-  const [entries, setEntries] = useState<DeviceHistoryEntry[]>([]);
+  asSidebar = false,
+}: Props) {
+  const [items, setItems] = useState<FeedItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    if (!inventoryNumber) return;
+    let cancelled = false;
 
-    const loadHistory = async () => {
+    async function loadHistory() {
       setLoading(true);
       setError(null);
 
       try {
         const res = await fetch(
           `/api/devices/${encodeURIComponent(inventoryNumber)}/history`,
-          { cache: 'no-store' },
+          {
+            method: 'GET',
+            headers: { 'Content-Type': 'application/json' },
+            cache: 'no-store',
+          },
         );
 
         if (!res.ok) {
-          setError('Historie konnte nicht geladen werden.');
-          return;
+          throw new Error(`HTTP ${res.status}`);
         }
 
-        const data = (await res.json()) as DeviceHistoryEntry[];
-        setEntries(data);
+        const data = (await res.json()) as ApiHistoryEntry[];
+        if (cancelled) return;
+
+        const mapped: FeedItem[] = data.map((entry) => {
+          const person = {
+            name: entry.changedBy ?? 'Unbekannter Benutzer',
+          };
+          const date = formatDateTime(entry.changedAt);
+
+          if (entry.changeType === 'UPDATED' && entry.changes.length > 0) {
+            const changes: FeedChange[] = entry.changes.map((c) => ({
+              field: c.field,
+              label: mapFieldLabel(c.field),
+              from: c.from,
+              to: c.to,
+            }));
+
+            return {
+              id: entry.id,
+              type: 'change',
+              person,
+              date,
+              changes,
+            };
+          }
+
+          let comment = '';
+          if (entry.changeType === 'CREATED') {
+            comment = 'Gerät angelegt.';
+          } else if (entry.changeType === 'DELETED') {
+            comment = 'Gerät gelöscht.';
+          } else {
+            comment = 'Gerät geändert.';
+          }
+
+          return {
+            id: entry.id,
+            type: 'comment',
+            person,
+            date,
+            comment,
+          };
+        });
+
+        setItems(mapped);
       } catch (err) {
         console.error('Error loading device history', err);
-        setError('Netzwerkfehler beim Laden der Historie.');
+        if (!cancelled) {
+          setError('Historie konnte nicht geladen werden.');
+        }
       } finally {
-        setLoading(false);
+        if (!cancelled) {
+          setLoading(false);
+        }
       }
-    };
+    }
 
     loadHistory();
+
+    return () => {
+      cancelled = true;
+    };
   }, [inventoryNumber]);
 
-  if (loading) {
-    return (
-      <p className="text-sm text-gray-500 dark:text-gray-400">
-        Historie wird geladen …
-      </p>
-    );
-  }
-
-  if (error) {
-    return (
-      <p className="text-sm text-red-600 dark:text-red-400">
-        {error}
-      </p>
-    );
-  }
-
-  if (!entries.length) {
-    return (
-      <p className="text-sm text-gray-500 dark:text-gray-400">
-        Noch keine Historie vorhanden.
-      </p>
-    );
-  }
-
-  const feedItems: FeedItem[] = entries.map((entry) => ({
-    id: entry.id,
-    type: 'comment',
-    person: {
-      name: entry.changedBy ?? 'System',
-      href: '#',
-    },
-    comment: changeTypeLabel(entry.changeType),
-    date: formatDateTime(entry.changedAt),
-  }));
+  // Root-Tag & Klassen abhängig vom Einsatz
+  const Root: ElementType = asSidebar ? 'div' : 'aside';
+  const rootClasses = asSidebar
+    ? 'flex h-full flex-col text-sm'
+    : 'flex h-full flex-col border-l border-gray-200 px-4 py-4 text-sm dark:border-white/10';
 
   return (
-    <div className="space-y-3">
-      <h4 className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
-        Historie
-      </h4>
-      <Feed items={feedItems} />
-    </div>
+    <Root className={rootClasses}>
+      <h2 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+        Änderungsverlauf
+      </h2>
+
+      {loading && (
+        <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
+          Historie wird geladen …
+        </p>
+      )}
+
+      {error && (
+        <p className="mt-2 text-xs text-red-600 dark:text-red-400">
+          {error}
+        </p>
+      )}
+
+      {!loading && !error && (
+        <div className="mt-3 flex-1 min-h-0">
+          <Feed items={items} className="h-full" />
+        </div>
+      )}
+    </Root>
   );
 }
diff --git a/app/(app)/devices/page.tsx b/app/(app)/devices/page.tsx
index 030d29a..2ecf2d2 100644
--- a/app/(app)/devices/page.tsx
+++ b/app/(app)/devices/page.tsx
@@ -1,20 +1,21 @@
 // app/(app)/devices/page.tsx
 'use client';
 
-import { useCallback, useEffect, useState, ChangeEvent } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import Button from '@/components/ui/Button';
 import Table, { TableColumn } from '@/components/ui/Table';
 import { Dropdown } from '@/components/ui/Dropdown';
-import Modal from '@/components/ui/Modal';
 import {
   BookOpenIcon,
   PencilIcon,
   TrashIcon,
 } from '@heroicons/react/24/outline';
-import DeviceHistorySidebar from './DeviceHistorySidebar';
+import { getSocket } from '@/lib/socketClient';
+import type { TagOption } from '@/components/ui/TagMultiCombobox';
+import DeviceEditModal from './DeviceEditModal';
 
-type DeviceRow = {
+export type DeviceRow = {
   inventoryNumber: string;
 
   name: string;
@@ -32,11 +33,12 @@ type DeviceRow = {
 
   group?: string | null;
   location?: string | null;
+  tags?: string[] | null;
 
   updatedAt: string;
 };
 
-type DeviceDetail = DeviceRow & {
+export type DeviceDetail = DeviceRow & {
   createdAt?: string;
 };
 
@@ -106,6 +108,14 @@ const columns: TableColumn<DeviceRow>[] = [
     canHide: true,
     cellClassName: 'whitespace-normal max-w-xs',
   },
+  {
+    key: 'tags',
+    header: 'Tags',
+    sortable: false,
+    canHide: true,
+    render: (row) =>
+      row.tags && row.tags.length > 0 ? row.tags.join(', ') : '',
+  },
   {
     key: 'updatedAt',
     header: 'Geändert am',
@@ -121,12 +131,13 @@ export default function DevicesPage() {
   const [listLoading, setListLoading] = useState(false);
   const [listError, setListError] = useState<string | null>(null);
 
-  // Modal-State
-  const [editOpen, setEditOpen] = useState(false);
-  const [editLoading, setEditLoading] = useState(false);
-  const [editError, setEditError] = useState<string | null>(null);
-  const [editDevice, setEditDevice] = useState<DeviceDetail | null>(null);
-  const [saveLoading, setSaveLoading] = useState(false);
+  // welches Gerät ist gerade im Edit-Modal geöffnet?
+  const [editInventoryNumber, setEditInventoryNumber] = useState<string | null>(
+    null,
+  );
+
+  // Alle bekannten Tags (kannst du später auch aus eigener /api/tags laden)
+  const [allTags, setAllTags] = useState<TagOption[]>([]);
 
   /* ───────── Geräte-Liste laden (auch für "live"-Updates) ───────── */
 
@@ -147,6 +158,18 @@ export default function DevicesPage() {
 
       const data = (await res.json()) as DeviceRow[];
       setDevices(data);
+
+      // 🔹 alle Tags aus der Liste ableiten
+      const tagSet = new Map<string, TagOption>();
+      for (const d of data) {
+        (d.tags ?? []).forEach((name) => {
+          const key = name.toLowerCase();
+          if (!tagSet.has(key)) {
+            tagSet.set(key, { name });
+          }
+        });
+      }
+      setAllTags(Array.from(tagSet.values()));
     } catch (err) {
       console.error('Error loading devices', err);
       setListError('Netzwerkfehler beim Laden der Geräte.');
@@ -160,128 +183,60 @@ export default function DevicesPage() {
     loadDevices();
   }, [loadDevices]);
 
-  // "Live"-Updates: alle 10 Sekunden neu laden
+  // ✅ Echte Live-Updates via Socket.IO
   useEffect(() => {
-    const id = setInterval(() => {
-      loadDevices();
-    }, 10000);
-    return () => clearInterval(id);
-  }, [loadDevices]);
+    const socket = getSocket();
 
-  /* ───────── Edit-Modal ───────── */
-
-  const closeEditModal = useCallback(() => {
-    if (saveLoading) return; // während Speichern nicht schließen
-    setEditOpen(false);
-    setEditDevice(null);
-    setEditError(null);
-  }, [saveLoading]);
-
-  const handleEdit = useCallback(async (inventoryNumber: string) => {
-    // Modal direkt öffnen & Loader anzeigen
-    setEditOpen(true);
-    setEditLoading(true);
-    setEditError(null);
-    setEditDevice(null);
-
-    try {
-      const res = await fetch(
-        `/api/devices/${encodeURIComponent(inventoryNumber)}`,
-        {
-          method: 'GET',
-          headers: { 'Content-Type': 'application/json' },
-          cache: 'no-store',
-        },
-      );
-
-      if (!res.ok) {
-        if (res.status === 404) {
-          setEditError('Gerät wurde nicht gefunden.');
-        } else {
-          setEditError(
-            'Beim Laden der Gerätedaten ist ein Fehler aufgetreten.',
-          );
+    const handleUpdated = (payload: DeviceRow) => {
+      setDevices((prev) => {
+        const exists = prev.some(
+          (d) => d.inventoryNumber === payload.inventoryNumber,
+        );
+        if (!exists) {
+          // falls du Updates & Creates über das gleiche Event schickst
+          return [...prev, payload];
         }
-        return;
-      }
+        return prev.map((d) =>
+          d.inventoryNumber === payload.inventoryNumber ? payload : d,
+        );
+      });
+    };
 
-      const data = (await res.json()) as DeviceDetail;
-      setEditDevice(data);
-    } catch (err) {
-      console.error('Error loading device', err);
-      setEditError('Netzwerkfehler beim Laden der Gerätedaten.');
-    } finally {
-      setEditLoading(false);
-    }
+    const handleCreated = (payload: DeviceRow) => {
+      setDevices((prev) => {
+        if (prev.some((d) => d.inventoryNumber === payload.inventoryNumber)) {
+          return prev;
+        }
+        return [...prev, payload];
+      });
+    };
+
+    const handleDeleted = (data: { inventoryNumber: string }) => {
+      setDevices((prev) =>
+        prev.filter((d) => d.inventoryNumber !== data.inventoryNumber),
+      );
+    };
+
+    socket.on('device:updated', handleUpdated);
+    socket.on('device:created', handleCreated);
+    socket.on('device:deleted', handleDeleted);
+
+    return () => {
+      socket.off('device:updated', handleUpdated);
+      socket.off('device:created', handleCreated);
+      socket.off('device:deleted', handleDeleted);
+    };
   }, []);
 
-  const handleFieldChange = (
-    field: keyof DeviceDetail,
-    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    const value = e.target.value;
-    setEditDevice((prev) =>
-      prev ? ({ ...prev, [field]: value } as DeviceDetail) : prev,
-    );
-  };
+  /* ───────── Edit-Modal Trigger ───────── */
 
-  const handleSave = useCallback(async () => {
-    if (!editDevice) return;
+  const handleEdit = useCallback((inventoryNumber: string) => {
+    setEditInventoryNumber(inventoryNumber);
+  }, []);
 
-    setSaveLoading(true);
-    setEditError(null);
-
-    try {
-      const res = await fetch(
-        `/api/devices/${encodeURIComponent(editDevice.inventoryNumber)}`,
-        {
-          method: 'PATCH',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            name: editDevice.name,
-            manufacturer: editDevice.manufacturer,
-            model: editDevice.model,
-            serialNumber: editDevice.serialNumber || null,
-            productNumber: editDevice.productNumber || null,
-            comment: editDevice.comment || null,
-            group: editDevice.group || null,
-            location: editDevice.location || null,
-            ipv4Address: editDevice.ipv4Address || null,
-            ipv6Address: editDevice.ipv6Address || null,
-            macAddress: editDevice.macAddress || null,
-            username: editDevice.username || null,
-            passwordHash: editDevice.passwordHash || null,
-          }),
-        },
-      );
-
-      if (!res.ok) {
-        if (res.status === 404) {
-          setEditError('Gerät wurde nicht gefunden.');
-        } else {
-          setEditError('Speichern der Änderungen ist fehlgeschlagen.');
-        }
-        return;
-      }
-
-      const updated = (await res.json()) as DeviceDetail;
-      setEditDevice(updated);
-
-      // Tabelle aktualisieren (damit andere Felder sofort stimmen)
-      setDevices((prev) =>
-        prev.map((d) =>
-          d.inventoryNumber === updated.inventoryNumber
-            ? { ...d, ...updated }
-            : d,
-        ),
-      );
-    } catch (err) {
-      console.error('Error saving device', err);
-      setEditError('Netzwerkfehler beim Speichern der Gerätedaten.');
-    } finally {
-      setSaveLoading(false);
-    }
-  }, [editDevice]);
+  const closeEditModal = useCallback(() => {
+    setEditInventoryNumber(null);
+  }, []);
 
   /* ───────── Render ───────── */
 
@@ -397,227 +352,22 @@ export default function DevicesPage() {
       </div>
 
       {/* Edit-/Details-Modal */}
-      <Modal
-        open={editOpen}
+      <DeviceEditModal
+        open={editInventoryNumber !== null}
+        inventoryNumber={editInventoryNumber}
         onClose={closeEditModal}
-        title={
-          editDevice
-            ? `Gerät bearbeiten: ${editDevice.name}`
-            : 'Gerätedaten werden geladen …'
-        }
-        icon={<PencilIcon className="size-6" />}
-        tone="info"
-        variant="centered"
-        size="lg"
-        primaryAction={{
-          label: saveLoading ? 'Speichern …' : 'Speichern',
-          onClick: handleSave,
-          autoFocus: true,
+        allTags={allTags}
+        setAllTags={setAllTags}
+        onSaved={(updated) => {
+          setDevices((prev) =>
+            prev.map((d) =>
+              d.inventoryNumber === updated.inventoryNumber
+                ? { ...d, ...updated }
+                : d,
+            ),
+          );
         }}
-        secondaryAction={{
-          label: 'Abbrechen',
-          variant: 'secondary',
-          onClick: closeEditModal,
-        }}
-        sidebar={
-          editDevice ? (
-            <DeviceHistorySidebar
-              inventoryNumber={editDevice.inventoryNumber}
-            />
-          ) : undefined
-        }
-      >
-        {editLoading && (
-          <p className="text-sm text-gray-500 dark:text-gray-400">
-            Gerätedaten werden geladen …
-          </p>
-        )}
-
-        {editError && (
-          <p className="text-sm text-red-600 dark:text-red-400">{editError}</p>
-        )}
-
-        {!editLoading && !editError && editDevice && (
-          <div className="mt-3 grid grid-cols-1 gap-4 text-sm sm:grid-cols-2">
-            
-            {/*  Inventarnummer */}
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
-                Inventar-Nr.
-              </p>
-              <input
-                type="text"
-                className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-400 shadow-xs ring-1 ring-inset ring-gray-800"
-                value={editDevice.inventoryNumber}
-                readOnly
-              />
-            </div>
-
-            {/* Bezeichnung */}
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
-                Bezeichnung
-              </p>
-              <input
-                type="text"
-                className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 dark:bg-gray-900"
-                value={editDevice.name}
-                onChange={(e) => handleFieldChange('name', e)}
-              />
-            </div>
-
-            {/* Hersteller / Modell */}
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
-                Hersteller
-              </p>
-              <input
-                type="text"
-                className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500"
-                value={editDevice.manufacturer}
-                onChange={(e) => handleFieldChange('manufacturer', e)}
-              />
-            </div>
-
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
-                Modell
-              </p>
-              <input
-                type="text"
-                className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500"
-                value={editDevice.model}
-                onChange={(e) => handleFieldChange('model', e)}
-              />
-            </div>
-
-            {/* Seriennummer / Produktnummer */}
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
-                Seriennummer
-              </p>
-              <input
-                type="text"
-                className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500"
-                value={editDevice.serialNumber ?? ''}
-                onChange={(e) => handleFieldChange('serialNumber', e)}
-              />
-            </div>
-
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
-                Produktnummer
-              </p>
-              <input
-                type="text"
-                className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500"
-                value={editDevice.productNumber ?? ''}
-                onChange={(e) => handleFieldChange('productNumber', e)}
-              />
-            </div>
-
-            {/* Standort / Gruppe */}
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
-                Standort / Raum
-              </p>
-              <input
-                type="text"
-                className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500"
-                value={editDevice.location ?? ''}
-                onChange={(e) => handleFieldChange('location', e)}
-              />
-            </div>
-
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
-                Gruppe
-              </p>
-              <input
-                type="text"
-                className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500"
-                value={editDevice.group ?? ''}
-                onChange={(e) => handleFieldChange('group', e)}
-              />
-            </div>
-
-            {/* Netzwerkdaten */}
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
-                IPv4-Adresse
-              </p>
-              <input
-                type="text"
-                className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500"
-                value={editDevice.ipv4Address ?? ''}
-                onChange={(e) => handleFieldChange('ipv4Address', e)}
-              />
-            </div>
-
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
-                IPv6-Adresse
-              </p>
-              <input
-                type="text"
-                className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500"
-                value={editDevice.ipv6Address ?? ''}
-                onChange={(e) => handleFieldChange('ipv6Address', e)}
-              />
-            </div>
-
-            <div className='col-span-2'>
-              <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
-                MAC-Adresse
-              </p>
-              <input
-                type="text"
-                className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500"
-                value={editDevice.macAddress ?? ''}
-                onChange={(e) => handleFieldChange('macAddress', e)}
-              />
-            </div>
-
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
-                Benutzername
-              </p>
-              <input
-                type="text"
-                className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500"
-                value={editDevice.username ?? ''}
-                onChange={(e) => handleFieldChange('username', e)}
-              />
-            </div>
-            
-
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
-                Passwort
-              </p>
-              <input
-                type="password"
-                className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500"
-                value={editDevice.passwordHash ?? ''}
-                onChange={(e) => handleFieldChange('passwordHash', e)}
-              />
-            </div>
-
-            {/* Kommentar */}
-            <div className="sm:col-span-2">
-              <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
-                Kommentar
-              </p>
-              <textarea
-                rows={3}
-                className="mt-1 block w-full rounded-md border-0 bg-gray-900/40 px-2.5 py-1.5 text-sm text-gray-100 shadow-xs ring-1 ring-inset ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500"
-                value={editDevice.comment ?? ''}
-                onChange={(e) => handleFieldChange('comment', e)}
-              />
-            </div>
-          </div>
-        )}
-      </Modal>
+      />
     </>
   );
 }
diff --git a/app/api/auth/[...nextauth]/route.ts b/app/api/auth/[...nextauth]/route.ts
index c76160b..bbfb0ce 100644
--- a/app/api/auth/[...nextauth]/route.ts
+++ b/app/api/auth/[...nextauth]/route.ts
@@ -1,82 +1,7 @@
 // app/api/auth/[...nextauth]/route.ts
 import NextAuth from 'next-auth';
-import CredentialsProvider from 'next-auth/providers/credentials';
-import { PrismaClient } from '@prisma/client';
-import { compare } from 'bcryptjs';
+import { authOptions } from '@/lib/auth-options';
 
-const prisma = new PrismaClient();
-
-const handler = NextAuth({
-  providers: [
-    CredentialsProvider({
-      name: 'Credentials',
-      credentials: {
-        email: {
-          label: 'Benutzername oder E-Mail',
-          type: 'text',
-        },
-        password: {
-          label: 'Passwort',
-          type: 'password',
-        },
-      },
-      async authorize(credentials) {
-        if (!credentials?.email || !credentials.password) {
-          return null;
-        }
-
-        const identifier = credentials.email.trim();
-
-        // User per E-Mail ODER Benutzername suchen
-        const user = await prisma.user.findFirst({
-          where: {
-            OR: [
-              { email: identifier },
-              { username: identifier },
-            ],
-          },
-        });
-
-        if (!user || !user.passwordHash) {
-          return null;
-        }
-
-        const isValid = await compare(credentials.password, user.passwordHash);
-        if (!isValid) {
-          return null;
-        }
-
-        // Minimal-Userobjekt für NextAuth zurückgeben
-        return {
-          id: user.id,
-          name: user.name ?? user.username ?? user.email,
-          email: user.email,
-        };
-      },
-    }),
-  ],
-  pages: {
-    signIn: '/login',
-  },
-  session: {
-    strategy: 'jwt',
-  },
-  callbacks: {
-    async jwt({ token, user }) {
-      // beim Login User-ID in den Token schreiben
-      if (user) {
-        token.id = user.id;
-      }
-      return token;
-    },
-    async session({ session, token }) {
-      // ID aus dem Token wieder in die Session kopieren
-      if (session.user && token.id) {
-        (session.user as any).id = token.id;
-      }
-      return session;
-    },
-  },
-});
+const handler = NextAuth(authOptions);
 
 export { handler as GET, handler as POST };
diff --git a/app/api/devices/[id]/history/route.ts b/app/api/devices/[id]/history/route.ts
index 04b7616..abc001a 100644
--- a/app/api/devices/[id]/history/route.ts
+++ b/app/api/devices/[id]/history/route.ts
@@ -2,37 +2,57 @@
 import { NextResponse } from 'next/server';
 import { prisma } from '@/lib/prisma';
 
+type RouteParams = { id: string };
+// ⬇️ wie bei /api/devices/[id]
+type RouteContext = { params: Promise<RouteParams> };
+
 export async function GET(
   _req: Request,
-  { params }: { params: { id: string } },
+  ctx: RouteContext,
 ) {
-  // In der URL ist "id" = inventoryNumber
-  const inventoryNumber = decodeURIComponent(params.id);
+  // params-Promise auflösen
+  const { id } = await ctx.params;
+  const inventoryNumber = decodeURIComponent(id);
 
   try {
     const history = await prisma.deviceHistory.findMany({
       where: { deviceId: inventoryNumber },
-      include: {
-        changedBy: true,
-      },
-      orderBy: {
-        changedAt: 'desc',
-      },
+      include: { changedBy: true },
+      orderBy: { changedAt: 'desc' },
     });
 
-    // Auf das Format für DeviceHistorySidebar mappen
-    const payload = history.map((entry) => ({
-      id: entry.id,
-      changeType: entry.changeType,
-      changedAt: entry.changedAt.toISOString(),
-      changedBy:
-        entry.changedBy?.name ??
-        entry.changedBy?.username ??
-        entry.changedBy?.email ??
-        null,
-    }));
+    const payload = history.map((entry) => {
+      const snapshot = entry.snapshot as any;
+
+      const rawChanges: any[] = Array.isArray(snapshot?.changes)
+        ? snapshot.changes
+        : [];
+
+      const changes = rawChanges.map((c) => ({
+        field: String(c.field),
+        from:
+          c.before === null || c.before === undefined
+            ? null
+            : String(c.before),
+        to:
+          c.after === null || c.after === undefined
+            ? null
+            : String(c.after),
+      }));
+
+      return {
+        id: entry.id,
+        changeType: entry.changeType, // 'CREATED' | 'UPDATED' | 'DELETED'
+        changedAt: entry.changedAt.toISOString(),
+        changedBy:
+          entry.changedBy?.name ??
+          entry.changedBy?.username ??
+          entry.changedBy?.email ??
+          null,
+        changes,
+      };
+    });
 
-    // Auch bei leerer Liste 200 + [] zurückgeben
     return NextResponse.json(payload);
   } catch (err) {
     console.error('[GET /api/devices/[id]/history]', err);
diff --git a/app/api/devices/[id]/route.ts b/app/api/devices/[id]/route.ts
index 409f6b4..3a04367 100644
--- a/app/api/devices/[id]/route.ts
+++ b/app/api/devices/[id]/route.ts
@@ -3,17 +3,18 @@ import { NextResponse } from 'next/server';
 import { prisma } from '@/lib/prisma';
 import type { Prisma } from '@prisma/client';
 import { getCurrentUserId } from '@/lib/auth';
+import type { Server as IOServer } from 'socket.io';
 
 type RouteParams = { id: string };
 
-// ⬇️ Next liefert params als Promise
+// in Next 15+ ist params ein Promise
 type RouteContext = { params: Promise<RouteParams> };
 
 export async function GET(
   _req: Request,
   ctx: RouteContext,
 ) {
-  // ⬇️ Promise auflösen
+  // params-Promise auflösen
   const { id } = await ctx.params;
 
   if (!id) {
@@ -26,6 +27,7 @@ export async function GET(
       include: {
         group: true,
         location: true,
+        tags: true, // 🔹 NEU
       },
     });
 
@@ -45,23 +47,25 @@ export async function GET(
       ipv6Address: device.ipv6Address,
       macAddress: device.macAddress,
       username: device.username,
-      // passwordHash gebe ich hier absichtlich nicht zurück
+      // passwordHash bewusst weggelassen
       group: device.group?.name ?? null,
       location: device.location?.name ?? null,
+      tags: device.tags.map((t) => t.name), // 🔹
       createdAt: device.createdAt.toISOString(),
       updatedAt: device.updatedAt.toISOString(),
     });
+
   } catch (err) {
     console.error('[GET /api/devices/[id]]', err);
     return NextResponse.json({ error: 'INTERNAL_ERROR' }, { status: 500 });
   }
 }
 
+
 export async function PATCH(
   req: Request,
   ctx: RouteContext,
 ) {
-  // ⬇️ Promise auflösen
   const { id } = await ctx.params;
   const body = await req.json();
 
@@ -70,7 +74,7 @@ export async function PATCH(
   }
 
   try {
-    // User für updatedBy / History bestimmen
+    // ⬇️ hier jetzt die Request-Header durchreichen
     const userId = await getCurrentUserId();
 
     // aktuelles Gerät inkl. Relations laden (für "before"-Snapshot)
@@ -79,6 +83,7 @@ export async function PATCH(
       include: {
         group: true,
         location: true,
+        tags: true, // 🔹 NEU
       },
     });
 
@@ -101,6 +106,41 @@ export async function PATCH(
       passwordHash: body.passwordHash,
     };
 
+    // Tags aus dem Body bereinigen
+    const incomingTags: string[] = Array.isArray(body.tags)
+      ? body.tags.map((t: unknown) => String(t).trim()).filter(Boolean)
+      : [];
+
+    // existierende Tag-Namen
+    const existingTagNames = existing.tags.map((t) => t.name);
+
+    // welche sollen entfernt werden?
+    const tagsToRemove = existingTagNames.filter(
+      (name) => !incomingTags.includes(name),
+    );
+
+    // welche sind neu hinzuzufügen?
+    const tagsToAdd = incomingTags.filter(
+      (name) => !existingTagNames.includes(name),
+    );
+
+    if (!data.tags) {
+      data.tags = {};
+    }
+
+    // Tags, die nicht mehr vorkommen → disconnect über name (weil @unique)
+    if (tagsToRemove.length > 0) {
+      (data.tags as any).disconnect = tagsToRemove.map((name) => ({ name }));
+    }
+
+    // neue Tags → connectOrCreate (Tag wird bei Bedarf angelegt)
+    if (tagsToAdd.length > 0) {
+      (data.tags as any).connectOrCreate = tagsToAdd.map((name) => ({
+        where: { name },
+        create: { name },
+      }));
+    }
+
     // updatedBy setzen, wenn User da
     if (userId) {
       data.updatedBy = {
@@ -132,6 +172,33 @@ export async function PATCH(
       data.location = { disconnect: true };
     }
 
+        // Tags (Many-to-Many via Tag.name @unique)
+    if (Array.isArray(body.tags)) {
+      const tagNames = (body.tags as string[])
+        .map((t) => String(t).trim())
+        .filter(Boolean);
+
+      const beforeNames = existing.tags.map((t) => t.name.toLowerCase());
+
+      const normalized = tagNames.map((n) => n.toLowerCase());
+      const toConnect = tagNames.filter(
+        (n) => !beforeNames.includes(n.toLowerCase()),
+      );
+      const toDisconnect = existing.tags
+        .map((t) => t.name)
+        .filter((n) => !normalized.includes(n.toLowerCase()));
+
+      data.tags = {
+        // neue / fehlende Tags verknüpfen (und ggf. anlegen)
+        connectOrCreate: toConnect.map((name) => ({
+          where: { name },
+          create: { name },
+        })),
+        // nicht mehr vorhandene Tags trennen
+        disconnect: toDisconnect.map((name) => ({ name })),
+      };
+    }
+
     // Update durchführen (für "after"-Snapshot)
     const updated = await prisma.device.update({
       where: { inventoryNumber: id },
@@ -139,9 +206,11 @@ export async function PATCH(
       include: {
         group: true,
         location: true,
+        tags: true,
       },
     });
 
+    // Felder, die wir tracken wollen
     const trackedFields = [
       'name',
       'manufacturer',
@@ -158,12 +227,14 @@ export async function PATCH(
 
     type TrackedField = (typeof trackedFields)[number];
 
+    // explizit JSON-kompatible Types (string | null)
     const changes: {
-      field: TrackedField | 'group' | 'location';
+      field: TrackedField | 'group' | 'location' | 'tags';
       before: string | null;
       after: string | null;
     }[] = [];
 
+    // einfache Feld-Diffs
     for (const field of trackedFields) {
       const before = (existing as any)[field] as string | null;
       const after = (updated as any)[field] as string | null;
@@ -172,6 +243,7 @@ export async function PATCH(
       }
     }
 
+    // group / location per Name vergleichen
     const beforeGroup = (existing.group?.name ?? null) as string | null;
     const afterGroup = (updated.group?.name ?? null) as string | null;
     if (beforeGroup !== afterGroup) {
@@ -192,6 +264,25 @@ export async function PATCH(
       });
     }
 
+    // Tags vergleichen (als kommagetrennte Liste)
+    const beforeTagsList = existing.tags.map((t) => t.name).sort();
+    const afterTagsList = updated.tags.map((t) => t.name).sort();
+
+    const beforeTags =
+      beforeTagsList.length > 0 ? beforeTagsList.join(', ') : null;
+    const afterTags =
+      afterTagsList.length > 0 ? afterTagsList.join(', ') : null;
+
+    if (beforeTags !== afterTags) {
+      changes.push({
+        field: 'tags',
+        before: beforeTags,
+        after: afterTags,
+      });
+    }
+
+
+    // Falls sich *gar nichts* geändert hat, kein History-Eintrag
     if (changes.length > 0) {
       const snapshot: Prisma.JsonObject = {
         before: {
@@ -209,6 +300,7 @@ export async function PATCH(
           passwordHash: existing.passwordHash,
           group: existing.group?.name ?? null,
           location: existing.location?.name ?? null,
+          tags: existing.tags.map((t) => t.name),
           createdAt: existing.createdAt.toISOString(),
           updatedAt: existing.updatedAt.toISOString(),
         },
@@ -227,10 +319,15 @@ export async function PATCH(
           passwordHash: updated.passwordHash,
           group: updated.group?.name ?? null,
           location: updated.location?.name ?? null,
+          tags: updated.tags.map((t) => t.name),
           createdAt: updated.createdAt.toISOString(),
           updatedAt: updated.updatedAt.toISOString(),
         },
-        changes,
+        changes: changes.map((c) => ({
+          field: c.field,
+          before: c.before,
+          after: c.after,
+        })),
       };
 
       await prisma.deviceHistory.create({
@@ -243,6 +340,28 @@ export async function PATCH(
       });
     }
 
+    // 🔊 Socket.IO-Broadcast für echte Live-Updates
+    const io = (global as any).devicesIo as IOServer | undefined;
+    if (io) {
+      io.emit('device:updated', {
+        inventoryNumber: updated.inventoryNumber,
+        name: updated.name,
+        manufacturer: updated.manufacturer,
+        model: updated.model,
+        serialNumber: updated.serialNumber,
+        productNumber: updated.productNumber,
+        comment: updated.comment,
+        ipv4Address: updated.ipv4Address,
+        ipv6Address: updated.ipv6Address,
+        macAddress: updated.macAddress,
+        username: updated.username,
+        group: updated.group?.name ?? null,
+        location: updated.location?.name ?? null,
+        updatedAt: updated.updatedAt.toISOString(),
+      });
+    }
+
+    // Antwort an den Client (flattened)
     return NextResponse.json({
       inventoryNumber: updated.inventoryNumber,
       name: updated.name,
diff --git a/app/api/devices/route.ts b/app/api/devices/route.ts
index fe9bfd3..fb594b9 100644
--- a/app/api/devices/route.ts
+++ b/app/api/devices/route.ts
@@ -8,30 +8,31 @@ export async function GET() {
       include: {
         group: true,
         location: true,
-      },
-      orderBy: {
-        updatedAt: 'desc',
+        tags: true, // 🔹 NEU
       },
     });
 
-    const rows = devices.map((device) => ({
-      inventoryNumber: device.inventoryNumber,
-      name: device.name,
-      manufacturer: device.manufacturer,
-      model: device.model,
-      serialNumber: device.serialNumber,
-      productNumber: device.productNumber,
-      comment: device.comment,
-      ipv4Address: device.ipv4Address,
-      ipv6Address: device.ipv6Address,
-      macAddress: device.macAddress,
-      username: device.username,
-      group: device.group?.name ?? null,
-      location: device.location?.name ?? null,
-      updatedAt: device.updatedAt.toISOString(),
-    }));
+    return NextResponse.json(
+      devices.map((d) => ({
+        inventoryNumber: d.inventoryNumber,
+        name: d.name,
+        manufacturer: d.manufacturer,
+        model: d.model,
+        serialNumber: d.serialNumber,
+        productNumber: d.productNumber,
+        comment: d.comment,
+        ipv4Address: d.ipv4Address,
+        ipv6Address: d.ipv6Address,
+        macAddress: d.macAddress,
+        username: d.username,
+        passwordHash: d.passwordHash,
+        group: d.group?.name ?? null,
+        location: d.location?.name ?? null,
+        tags: d.tags.map((t) => t.name),
+        updatedAt: d.updatedAt.toISOString(),
+      })),
+    );
 
-    return NextResponse.json(rows);
   } catch (err) {
     console.error('[GET /api/devices]', err);
     return NextResponse.json({ error: 'INTERNAL_ERROR' }, { status: 500 });
diff --git a/app/globals.css b/app/globals.css
index ac9d1db..adfaae3 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -22,7 +22,5 @@
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
diff --git a/components/ui/Badge.tsx b/components/ui/Badge.tsx
new file mode 100644
index 0000000..c19d1c9
--- /dev/null
+++ b/components/ui/Badge.tsx
@@ -0,0 +1,161 @@
+// components/ui/Badge.tsx
+'use client';
+
+import clsx from 'clsx';
+import * as React from 'react';
+
+type BadgeTone =
+  | 'gray'
+  | 'red'
+  | 'yellow'
+  | 'green'
+  | 'blue'
+  | 'indigo'
+  | 'purple'
+  | 'pink';
+
+type BadgeVariant = 'border' | 'flat';
+type BadgeShape = 'rounded' | 'pill';
+type BadgeSize = 'sm' | 'md';
+
+export type BadgeProps = {
+  children: React.ReactNode;
+  tone?: BadgeTone;
+  variant?: BadgeVariant;
+  shape?: BadgeShape;
+  size?: BadgeSize;
+  /** Zeigt vorne einen farbigen Punkt an */
+  dot?: boolean;
+  /** Wenn gesetzt, wird rechts ein Remove-Button angezeigt */
+  onRemove?: () => void;
+  className?: string;
+};
+
+/* ───────── Style-Mappings ───────── */
+
+const baseClasses =
+  'inline-flex items-center text-xs font-medium';
+
+const sizeClasses: Record<BadgeSize, string> = {
+  md: 'px-2 py-1',
+  sm: 'px-1.5 py-0.5',
+};
+
+const shapeClasses: Record<BadgeShape, string> = {
+  rounded: 'rounded-md',
+  pill: 'rounded-full',
+};
+
+const borderToneClasses: Record<BadgeTone, string> = {
+  gray:
+    'bg-gray-50 text-gray-600 inset-ring inset-ring-gray-500/10 dark:bg-gray-400/10 dark:text-gray-400 dark:inset-ring-gray-400/20',
+  red:
+    'bg-red-50 text-red-700 inset-ring inset-ring-red-600/10 dark:bg-red-400/10 dark:text-red-400 dark:inset-ring-red-400/20',
+  yellow:
+    'bg-yellow-50 text-yellow-800 inset-ring inset-ring-yellow-600/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:inset-ring-yellow-400/20',
+  green:
+    'bg-green-50 text-green-700 inset-ring inset-ring-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:inset-ring-green-500/20',
+  blue:
+    'bg-blue-50 text-blue-700 inset-ring inset-ring-blue-700/10 dark:bg-blue-400/10 dark:text-blue-400 dark:inset-ring-blue-400/30',
+  indigo:
+    'bg-indigo-50 text-indigo-700 inset-ring inset-ring-indigo-700/10 dark:bg-indigo-400/10 dark:text-indigo-400 dark:inset-ring-indigo-400/30',
+  purple:
+    'bg-purple-50 text-purple-700 inset-ring inset-ring-purple-700/10 dark:bg-purple-400/10 dark:text-purple-400 dark:inset-ring-purple-400/30',
+  pink:
+    'bg-pink-50 text-pink-700 inset-ring inset-ring-pink-700/10 dark:bg-pink-400/10 dark:text-pink-400 dark:inset-ring-pink-400/20',
+};
+
+const flatToneClasses: Record<BadgeTone, string> = {
+  gray:
+    'bg-gray-100 text-gray-600 dark:bg-gray-400/10 dark:text-gray-400',
+  red:
+    'bg-red-100 text-red-700 dark:bg-red-400/10 dark:text-red-400',
+  yellow:
+    'bg-yellow-100 text-yellow-800 dark:bg-yellow-400/10 dark:text-yellow-500',
+  green:
+    'bg-green-100 text-green-700 dark:bg-green-400/10 dark:text-green-400',
+  blue:
+    'bg-blue-100 text-blue-700 dark:bg-blue-400/10 dark:text-blue-400',
+  indigo:
+    'bg-indigo-100 text-indigo-700 dark:bg-indigo-400/10 dark:text-indigo-400',
+  purple:
+    'bg-purple-100 text-purple-700 dark:bg-purple-400/10 dark:text-purple-400',
+  pink:
+    'bg-pink-100 text-pink-700 dark:bg-pink-400/10 dark:text-pink-400',
+};
+
+const dotToneClasses: Record<BadgeTone, string> = {
+  gray: 'fill-gray-400',
+  red: 'fill-red-500 dark:fill-red-400',
+  yellow: 'fill-yellow-500 dark:fill-yellow-400',
+  green: 'fill-green-500 dark:fill-green-400',
+  blue: 'fill-blue-500 dark:fill-blue-400',
+  indigo: 'fill-indigo-500 dark:fill-indigo-400',
+  purple: 'fill-purple-500 dark:fill-purple-400',
+  pink: 'fill-pink-500 dark:fill-pink-400',
+};
+
+/* ───────── Component ───────── */
+
+export default function Badge({
+  children,
+  tone = 'gray',
+  variant = 'border',
+  shape = 'rounded',
+  size = 'md',
+  dot = false,
+  onRemove,
+  className,
+}: BadgeProps) {
+  const toneClasses =
+    variant === 'border'
+      ? borderToneClasses[tone]
+      : flatToneClasses[tone];
+
+  const hasRemove = typeof onRemove === 'function';
+
+  return (
+    <span
+      className={clsx(
+        baseClasses,
+        sizeClasses[size],
+        shapeClasses[shape],
+        toneClasses,
+        dot && 'gap-x-1.5',
+        hasRemove && 'gap-x-0.5',
+        className,
+      )}
+    >
+      {/* Dot (optional) */}
+      {dot && (
+        <svg
+          viewBox="0 0 6 6"
+          aria-hidden="true"
+          className={clsx('size-1.5', dotToneClasses[tone])}
+        >
+          <circle r={3} cx={3} cy={3} />
+        </svg>
+      )}
+
+      <span>{children}</span>
+
+      {/* Remove-Button (optional) */}
+      {hasRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          className="group relative -mr-1 size-3.5 rounded-xs hover:bg-black/5 dark:hover:bg-white/10"
+        >
+          <span className="sr-only">Entfernen</span>
+          <svg
+            viewBox="0 0 14 14"
+            className="size-3.5 stroke-current/60 group-hover:stroke-current/90"
+          >
+            <path d="M4 4l6 6m0-6l-6 6" />
+          </svg>
+          <span className="absolute -inset-1" />
+        </button>
+      )}
+    </span>
+  );
+}
diff --git a/components/ui/Feed.tsx b/components/ui/Feed.tsx
index 8bc09e8..7d48abf 100644
--- a/components/ui/Feed.tsx
+++ b/components/ui/Feed.tsx
@@ -2,11 +2,9 @@
 'use client';
 
 import * as React from 'react';
-import { Fragment } from 'react';
 import {
   ChatBubbleLeftEllipsisIcon,
   TagIcon,
-  UserCircleIcon,
 } from '@heroicons/react/20/solid';
 import clsx from 'clsx';
 
@@ -15,6 +13,7 @@ import clsx from 'clsx';
 export type FeedPerson = {
   name: string;
   href?: string;
+  imageUrl?: string; // optional: Avatar-Bild
 };
 
 export type FeedTag = {
@@ -24,6 +23,14 @@ export type FeedTag = {
   color?: string;
 };
 
+export type FeedChange = {
+  field: string;
+  /** Anzeigename, z.B. "Standort" statt "location" */
+  label?: string;
+  from: string | null;
+  to: string | null;
+};
+
 export type FeedItem =
   | {
       id: string | number;
@@ -46,6 +53,13 @@ export type FeedItem =
       person: FeedPerson;
       tags: FeedTag[];
       date: string;
+    }
+  | {
+      id: string | number;
+      type: 'change';
+      person: FeedPerson;
+      changes: FeedChange[];
+      date: string;
     };
 
 export interface FeedProps {
@@ -59,166 +73,236 @@ function classNames(...classes: Array<string | false | null | undefined>) {
   return classes.filter(Boolean).join(' ');
 }
 
+// deterministische Farbe aus dem Namen
+function colorFromName(name: string): string {
+  const palette = [
+    'bg-sky-500',
+    'bg-emerald-500',
+    'bg-violet-500',
+    'bg-amber-500',
+    'bg-rose-500',
+    'bg-indigo-500',
+    'bg-teal-500',
+    'bg-fuchsia-500',
+  ];
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = (hash * 31 + name.charCodeAt(i)) | 0;
+  }
+  const idx = Math.abs(hash) % palette.length;
+  return palette[idx];
+}
+
+// sprechende Zusammenfassung für "change"
+function getChangeSummary(item: Extract<FeedItem, { type: 'change' }>): string {
+  const { changes } = item;
+  if (!changes.length) return 'hat Änderungen vorgenommen';
+
+  if (changes.length === 1 && changes[0].field === 'tags') {
+    const c = changes[0];
+    const beforeList = (c.from ?? '')
+      .split(',')
+      .map((s) => s.trim())
+      .filter(Boolean);
+    const afterList = (c.to ?? '')
+      .split(',')
+      .map((s) => s.trim())
+      .filter(Boolean);
+
+    const beforeLower = beforeList.map((x) => x.toLowerCase());
+    const afterLower = afterList.map((x) => x.toLowerCase());
+
+    const added = afterList.filter(
+      (t) => !beforeLower.includes(t.toLowerCase()),
+    );
+    const removed = beforeList.filter(
+      (t) => !afterLower.includes(t.toLowerCase()),
+    );
+
+    const parts: string[] = [];
+    if (added.length) {
+      parts.push(`hinzugefügt: ${added.join(', ')}`);
+    }
+    if (removed.length) {
+      parts.push(`entfernt: ${removed.join(', ')}`);
+    }
+
+    if (parts.length > 0) {
+      return `hat Tags ${parts.join(' · ')}`;
+    }
+    return 'hat Tags angepasst';
+  }
+
+  if (changes.length === 1) {
+    const c = changes[0];
+    const label = c.label ?? c.field;
+    return `hat ${label} geändert`;
+  }
+
+  const labels = changes.map((c) => c.label ?? c.field);
+  const uniqueLabels = Array.from(new Set(labels));
+  const maxShow = 3;
+
+  if (uniqueLabels.length <= maxShow) {
+    return `hat ${uniqueLabels.join(', ')} geändert`;
+  }
+
+  const first = uniqueLabels.slice(0, maxShow).join(', ');
+  return `hat ${first} und weitere geändert`;
+}
+
 /* ───────── Component ───────── */
 
 export default function Feed({ items, className }: FeedProps) {
   if (!items.length) {
     return (
-      <p className={clsx('text-sm text-gray-500 dark:text-gray-400', className)}>
+      <p
+        className={clsx(
+          'text-sm text-gray-500 dark:text-gray-400',
+          className,
+        )}
+      >
         Keine Aktivitäten vorhanden.
       </p>
     );
   }
 
   return (
-    <div className={clsx('flow-root', className)}>
-      <ul role="list" className="-mb-8">
-        {items.map((activityItem, idx) => (
-          <li key={activityItem.id}>
-            <div className="relative pb-8">
-              {idx !== items.length - 1 ? (
-                <span
-                  aria-hidden="true"
-                  className="absolute left-5 top-5 -ml-px h-full w-0.5 bg-gray-200 dark:bg-white/10"
-                />
-              ) : null}
+    <div className={clsx('h-full overflow-y-auto pr-2', className)}>
+      <ul role="list" className="pb-4">
+        {items.map((item, idx) => {
+          // Icon + Hintergrund ähnlich wie im Beispiel
+          let Icon: React.ComponentType<React.SVGProps<SVGSVGElement>> =
+            ChatBubbleLeftEllipsisIcon;
+          let iconBg = 'bg-gray-400 dark:bg-gray-600';
 
-              <div className="relative flex items-start space-x-3">
-                {activityItem.type === 'comment' ? (
-                  <>
-                    <div className="relative">
-                      {activityItem.imageUrl ? (
-                        <img
-                          alt=""
-                          src={activityItem.imageUrl}
-                          className="flex size-10 items-center justify-center rounded-full bg-gray-400 ring-8 ring-white outline -outline-offset-1 outline-black/5 dark:ring-gray-900 dark:outline-white/10"
-                        />
-                      ) : (
-                        <div className="flex size-10 items-center justify-center rounded-full bg-gray-200 ring-8 ring-white dark:bg-gray-800 dark:ring-gray-900">
-                          <ChatBubbleLeftEllipsisIcon
-                            aria-hidden="true"
-                            className="size-5 text-gray-400"
-                          />
-                        </div>
-                      )}
+          if (item.type === 'tags') {
+            Icon = TagIcon;
+            iconBg = 'bg-amber-500';
+          } else if (item.type === 'change') {
+            const isTagsOnly =
+              item.changes.length === 1 && item.changes[0].field === 'tags';
+            Icon = isTagsOnly ? TagIcon : ChatBubbleLeftEllipsisIcon;
+            iconBg = isTagsOnly ? 'bg-amber-500' : 'bg-emerald-500';
+          } else if (item.type === 'comment') {
+            iconBg = colorFromName(item.person.name);
+          } else if (item.type === 'assignment') {
+            iconBg = 'bg-indigo-500';
+          }
 
-                      <span className="absolute -right-1 -bottom-0.5 rounded-tl bg-white px-0.5 py-px dark:bg-gray-900">
-                        <ChatBubbleLeftEllipsisIcon
-                          aria-hidden="true"
-                          className="size-5 text-gray-400"
-                        />
+          // Textinhalt ähnlich wie "content + target"
+          let content: React.ReactNode = null;
+
+          if (item.type === 'comment') {
+            content = (
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                <span className="font-medium text-gray-900 dark:text-white">
+                  {item.person.name}
+                </span>{' '}
+                hat kommentiert:{' '}
+                <span className="text-gray-300 dark:text-gray-200">
+                  {item.comment}
+                </span>
+              </p>
+            );
+          } else if (item.type === 'assignment') {
+            content = (
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                <span className="font-medium text-gray-900 dark:text-white">
+                  {item.person.name}
+                </span>{' '}
+                hat{' '}
+                <span className="font-medium text-gray-900 dark:text-white">
+                  {item.assigned.name}
+                </span>{' '}
+                zugewiesen.
+              </p>
+            );
+          } else if (item.type === 'tags') {
+            content = (
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                <span className="font-medium text-gray-900 dark:text-white">
+                  {item.person.name}
+                </span>{' '}
+                hat Tags hinzugefügt:{' '}
+                <span className="font-medium text-gray-900 dark:text-gray-100">
+                  {item.tags.map((t) => t.name).join(', ')}
+                </span>
+              </p>
+            );
+          } else if (item.type === 'change') {
+            const summary = getChangeSummary(item);
+            content = (
+              <div className="space-y-1">
+                <p className="text-xs text-gray-500 dark:text-gray-400">
+                  <span className="font-medium text-gray-900 dark:text-white">
+                    {item.person.name}
+                  </span>{' '}
+                  {summary}
+                </p>
+                {item.changes.length > 0 && (
+                  <p className="text-[11px] text-gray-400 dark:text-gray-500">
+                    {item.changes.slice(0, 2).map((c, i) => (
+                      <span
+                        key={`${c.field}-${i}`}
+                        className="flex flex-wrap items-baseline gap-x-1"
+                      >
+                        <span className="line-through text-red-500/80 dark:text-red-400/90">
+                          {c.from ?? '—'}
+                        </span>
+                        <span className="text-gray-400">→</span>
+                        <span className="font-medium text-emerald-600 dark:text-emerald-400">
+                          {c.to ?? '—'}
+                        </span>
+                        {i < Math.min(2, item.changes.length) - 1 && (
+                          <span className="mx-1 text-gray-500 dark:text-gray-600">·</span>
+                        )}
                       </span>
-                    </div>
-
-                    <div className="min-w-0 flex-1">
-                      <div>
-                        <div className="text-sm">
-                          <a
-                            href={activityItem.person.href ?? '#'}
-                            className="font-medium text-gray-900 dark:text-white"
-                          >
-                            {activityItem.person.name}
-                          </a>
-                        </div>
-                        <p className="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
-                          Kommentiert {activityItem.date}
-                        </p>
-                      </div>
-                      <div className="mt-2 text-sm text-gray-700 dark:text-gray-200">
-                        <p>{activityItem.comment}</p>
-                      </div>
-                    </div>
-                  </>
-                ) : activityItem.type === 'assignment' ? (
-                  <>
-                    <div>
-                      <div className="relative px-1">
-                        <div className="flex size-8 items-center justify-center rounded-full bg-gray-100 ring-8 ring-white dark:bg-gray-800 dark:ring-gray-900">
-                          <UserCircleIcon
-                            aria-hidden="true"
-                            className="size-5 text-gray-500 dark:text-gray-400"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                    <div className="min-w-0 flex-1 py-1.5">
-                      <div className="text-sm text-gray-500 dark:text-gray-400">
-                        <a
-                          href={activityItem.person.href ?? '#'}
-                          className="font-medium text-gray-900 dark:text-white"
-                        >
-                          {activityItem.person.name}
-                        </a>{' '}
-                        hat{' '}
-                        <a
-                          href={activityItem.assigned.href ?? '#'}
-                          className="font-medium text-gray-900 dark:text-white"
-                        >
-                          {activityItem.assigned.name}
-                        </a>{' '}
-                        zugewiesen{' '}
-                        <span className="whitespace-nowrap">
-                          {activityItem.date}
-                        </span>
-                      </div>
-                    </div>
-                  </>
-                ) : activityItem.type === 'tags' ? (
-                  <>
-                    <div>
-                      <div className="relative px-1">
-                        <div className="flex size-8 items-center justify-center rounded-full bg-gray-100 ring-8 ring-white dark:bg-gray-800 dark:ring-gray-900">
-                          <TagIcon
-                            aria-hidden="true"
-                            className="size-5 text-gray-500 dark:text-gray-400"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                    <div className="min-w-0 flex-1 py-0">
-                      <div className="text-sm/8 text-gray-500 dark:text-gray-400">
-                        <span className="mr-0.5">
-                          <a
-                            href={activityItem.person.href ?? '#'}
-                            className="font-medium text-gray-900 dark:text-white"
-                          >
-                            {activityItem.person.name}
-                          </a>{' '}
-                          hat Tags hinzugefügt
-                        </span>{' '}
-                        <span className="mr-0.5">
-                          {activityItem.tags.map((tag) => (
-                            <Fragment key={tag.name}>
-                              <a
-                                href={tag.href ?? '#'}
-                                className="inline-flex items-center gap-x-1.5 rounded-full px-2 py-1 text-xs font-medium text-gray-900 inset-ring inset-ring-gray-200 dark:bg-white/5 dark:text-gray-100 dark:inset-ring-white/10"
-                              >
-                                <svg
-                                  viewBox="0 0 6 6"
-                                  aria-hidden="true"
-                                  className={classNames(
-                                    tag.color ?? 'fill-gray-400',
-                                    'size-1.5',
-                                  )}
-                                >
-                                  <circle r={3} cx={3} cy={3} />
-                                </svg>
-                                {tag.name}
-                              </a>{' '}
-                            </Fragment>
-                          ))}
-                        </span>
-                        <span className="whitespace-nowrap">
-                          {activityItem.date}
-                        </span>
-                      </div>
-                    </div>
-                  </>
-                ) : null}
+                    ))}
+                    {item.changes.length > 2 && (
+                      <span className="ml-1 text-gray-500 dark:text-gray-600">· …</span>
+                    )}
+                  </p>
+                )}
               </div>
-            </div>
-          </li>
-        ))}
+            );
+          }
+
+          return (
+            <li key={item.id}>
+              <div className="relative pb-6">
+                {idx !== items.length - 1 ? (
+                  <span
+                    aria-hidden="true"
+                    className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200 dark:bg-white/10"
+                  />
+                ) : null}
+
+                <div className="relative flex space-x-3">
+                  {/* Icon-Kreis wie im Beispiel */}
+                  <div>
+                    <span
+                      className={classNames(
+                        iconBg,
+                        'flex size-8 items-center justify-center rounded-full',
+                      )}
+                    >
+                      <Icon aria-hidden="true" className="size-4 text-white" />
+                    </span>
+                  </div>
+
+                  {/* Text + Datum rechts */}
+                  <div className="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                    <div>{content}</div>
+                    <div className="whitespace-nowrap text-right text-[11px] text-gray-500 dark:text-gray-400">
+                      {item.date}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
+          );
+        })}
       </ul>
     </div>
   );
diff --git a/components/ui/Modal.tsx b/components/ui/Modal.tsx
index d99ee03..b599201 100644
--- a/components/ui/Modal.tsx
+++ b/components/ui/Modal.tsx
@@ -13,7 +13,7 @@ import clsx from 'clsx';
 
 export type ModalTone = 'default' | 'success' | 'danger' | 'warning' | 'info';
 export type ModalVariant = 'centered' | 'alert';
-export type ModalSize = 'sm' | 'md' | 'lg';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 
 export interface ModalAction {
   label: string;
@@ -95,6 +95,7 @@ const sizeClasses: Record<ModalSize, string> = {
   sm: 'sm:max-w-sm',
   md: 'sm:max-w-lg',
   lg: 'sm:max-w-3xl', // ein bisschen breiter für Sidebar
+  xl: 'sm:max-w-5xl', // ein bisschen breiter für Sidebar
 };
 
 const baseButtonClasses =
@@ -194,7 +195,7 @@ export function Modal({
             )}
 
             {/* Header + Body + Sidebar */}
-            <div className="flex-1 overflow-y-auto bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 dark:bg-gray-800">
+            <div className="flex-1 overflow-hidden bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 dark:bg-gray-800">
               {/* Header (Icon + Titel + optionale Beschreibung) */}
               <div
                 className={clsx(
@@ -253,12 +254,13 @@ export function Modal({
                 </div>
               </div>
 
-              {/* Body + Sidebar */}
+              {/* Body + Sidebar */ }
               {(bodyContent || sidebar) && (
                 <div
                   className={clsx(
                     'mt-6',
-                    sidebar && 'sm:mt-8 sm:flex sm:items-start sm:gap-6',
+                    // vorher: sidebar && 'sm:mt-8 sm:flex sm:items-start sm:gap-6',
+                    sidebar && 'sm:mt-8 sm:flex sm:items-stretch sm:gap-6',
                   )}
                 >
                   {bodyContent && (
@@ -273,7 +275,7 @@ export function Modal({
                   )}
 
                   {sidebar && (
-                    <aside className="mt-6 border-t border-gray-200 pt-6 text-left text-sm sm:mt-0 sm:w-80 sm:shrink-0 sm:border-l sm:border-t-0 sm:pl-6 dark:border-white/10">
+                    <aside className="border-t border-gray-200 text-left text-sm sm:flex sm:h-full sm:w-80 sm:shrink-0 sm:border-l sm:border-t-0 sm:pl-4 dark:border-white/10" >
                       {sidebar}
                     </aside>
                   )}
diff --git a/components/ui/TagMultiCombobox.tsx b/components/ui/TagMultiCombobox.tsx
new file mode 100644
index 0000000..807758f
--- /dev/null
+++ b/components/ui/TagMultiCombobox.tsx
@@ -0,0 +1,233 @@
+// components/ui/TagMultiCombobox.tsx
+'use client';
+
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+  Label,
+} from '@headlessui/react';
+import { ChevronDownIcon, CheckIcon } from '@heroicons/react/20/solid';
+import { useEffect, useMemo, useState } from 'react';
+import clsx from 'clsx';
+import Badge from '@/components/ui/Badge';
+
+export type TagOption = {
+  id?: string | null;
+  name: string;
+};
+
+type TagMultiComboboxProps = {
+  label?: string;
+  availableTags: TagOption[];
+  value: TagOption[]; // ausgewählte Tags
+  onChange: (next: TagOption[]) => void;
+  placeholder?: string;
+  className?: string;
+};
+
+export default function TagMultiCombobox({
+  label = 'Tags',
+  availableTags,
+  value,
+  onChange,
+  placeholder = 'Tags auswählen oder neu eingeben …',
+  className,
+}: TagMultiComboboxProps) {
+  const [query, setQuery] = useState('');
+  const [allTags, setAllTags] = useState<TagOption[]>(availableTags);
+
+  const selectedNames = useMemo(
+    () => new Set(value.map((t) => t.name.toLowerCase())),
+    [value],
+  );
+
+  useEffect(() => {
+    setAllTags((prev) => {
+      const byName = new Map(prev.map((t) => [t.name.toLowerCase(), t]));
+      for (const t of availableTags) {
+        const key = t.name.toLowerCase();
+        if (!byName.has(key)) {
+          byName.set(key, t);
+        }
+      }
+      return Array.from(byName.values());
+    });
+  }, [availableTags]);
+
+  const filteredTags = useMemo(() => {
+    if (!query.trim()) return allTags;
+    const q = query.toLowerCase();
+    return allTags.filter((tag) => tag.name.toLowerCase().includes(q));
+  }, [allTags, query]);
+
+  function handleRemoveTag(tag: TagOption) {
+    onChange(
+      value.filter((t) => t.name.toLowerCase() !== tag.name.toLowerCase()),
+    );
+  }
+
+  function handleToggleTag(tag: TagOption) {
+    const key = tag.name.toLowerCase();
+    if (selectedNames.has(key)) {
+      onChange(value.filter((t) => t.name.toLowerCase() !== key));
+    } else {
+      onChange([...value, tag]);
+    }
+  }
+
+  function handleCreateTagFromQuery() {
+    const name = query.trim();
+    if (!name) return;
+
+    const existing = allTags.find(
+      (t) => t.name.toLowerCase() === name.toLowerCase(),
+    );
+
+    if (existing) {
+      if (!selectedNames.has(existing.name.toLowerCase())) {
+        onChange([...value, existing]);
+      }
+      setQuery('');
+      return;
+    }
+
+    const newTag: TagOption = {
+      id: `__new-${Date.now()}`,
+      name,
+    };
+
+    setAllTags((prev) => [...prev, newTag]);
+    onChange([...value, newTag]);
+    setQuery('');
+  }
+
+  return (
+    <Combobox
+      as="div"
+      multiple
+      value={value}
+      // wir steuern das selbst über handleToggleTag / handleRemoveTag
+      onChange={() => {}}
+      className={clsx('w-full', className)}
+    >
+      <Label className="block text-sm font-medium text-gray-900 dark:text-white">
+        {label}
+      </Label>
+
+      <div className="mt-2 relative">
+        {/* Chips + Input in einem „Feld“ */}
+        <div
+          className={clsx(
+            // neu: relative + extra padding rechts für den Pfeil
+            'relative flex flex-wrap items-center gap-1 rounded-md bg-white px-2 py-1.5 text-sm text-gray-900 ' +
+              'outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 ' +
+              'focus-within:outline-indigo-600 dark:bg-white/5 dark:text-white dark:outline-gray-700 ' +
+              'dark:focus-within:outline-indigo-500 pr-8', // <– Platz für Chevron
+          )}
+        >
+          {/* Ausgewählte Tags als Badges */}
+          {value.map((tag) => (
+            <Badge
+              key={tag.id ?? tag.name}
+              tone="blue"
+              variant="flat"
+              shape="pill"
+              size="md"
+              onRemove={() => handleRemoveTag(tag)}
+            >
+              {tag.name}
+            </Badge>
+          ))}
+
+          {/* Eingabefeld */}
+          <ComboboxInput
+            className="flex-1 min-w-[6rem] bg-transparent border-0 px-1 py-0.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none dark:text-white dark:placeholder:text-gray-500"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            displayValue={() => ''}
+            placeholder={value.length === 0 ? placeholder : undefined}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                event.preventDefault();
+                handleCreateTagFromQuery();
+              } else if (
+                event.key === 'Backspace' &&
+                !query &&
+                value.length > 0
+              ) {
+                const last = value[value.length - 1];
+                handleRemoveTag(last);
+              }
+            }}
+          />
+
+          {/* Chevron immer rechts im Feld */}
+          <ComboboxButton className="absolute inset-y-0 right-2 flex items-center text-gray-400 focus:outline-none">
+            <ChevronDownIcon className="size-5" aria-hidden="true" />
+          </ComboboxButton>
+        </div>
+
+        {/* Dropdown */}
+        <ComboboxOptions
+          transition
+          className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg outline outline-black/5 data-leave:transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 dark:bg-gray-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10"
+        >
+          {query.trim().length > 0 &&
+            !allTags.some(
+              (t) => t.name.toLowerCase() === query.trim().toLowerCase(),
+            ) && (
+              <ComboboxOption
+                value={{ id: `__new-${query}`, name: query.trim() }}
+                className="cursor-default select-none px-3 py-2 text-gray-900 data-focus:bg-indigo-600 data-focus:text-white data-focus:outline-hidden dark:text-gray-200 dark:data-focus:bg-indigo-500"
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleCreateTagFromQuery();
+                }}
+              >
+                <span className="font-medium">
+                  „{query.trim()}“ erstellen
+                </span>
+              </ComboboxOption>
+            )}
+
+          {filteredTags.length === 0 && query.trim().length === 0 && (
+            <div className="px-3 py-2 text-gray-500 dark:text-gray-400 text-xs">
+              Keine Tags vorhanden.
+            </div>
+          )}
+
+          {filteredTags.map((tag) => {
+            const isSelected = selectedNames.has(tag.name.toLowerCase());
+            return (
+              <ComboboxOption
+                key={tag.id ?? tag.name}
+                value={tag}
+                className={({ active }) =>
+                  clsx(
+                    'flex cursor-default select-none items-center justify-between px-3 py-2 text-gray-900 dark:text-gray-100',
+                    active && 'bg-indigo-600 text-white dark:bg-indigo-500',
+                  )
+                }
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleToggleTag(tag);
+                }}
+              >
+                <span className="truncate">{tag.name}</span>
+                {isSelected && (
+                  <CheckIcon
+                    className="size-4 text-indigo-600 dark:text-indigo-300 data-focus:text-white"
+                    aria-hidden="true"
+                  />
+                )}
+              </ComboboxOption>
+            );
+          })}
+        </ComboboxOptions>
+      </div>
+    </Combobox>
+  );
+}
diff --git a/lib/auth-options.ts b/lib/auth-options.ts
new file mode 100644
index 0000000..a5f5269
--- /dev/null
+++ b/lib/auth-options.ts
@@ -0,0 +1,72 @@
+// lib/auth-options.ts
+import type { NextAuthOptions } from 'next-auth';
+import CredentialsProvider from 'next-auth/providers/credentials';
+import { prisma } from './prisma';
+import { compare } from 'bcryptjs';
+
+export const authOptions: NextAuthOptions = {
+  providers: [
+    CredentialsProvider({
+      name: 'Credentials',
+      credentials: {
+        email: {
+          label: 'Benutzername oder E-Mail',
+          type: 'text',
+        },
+        password: {
+          label: 'Passwort',
+          type: 'password',
+        },
+      },
+      async authorize(credentials) {
+        if (!credentials?.email || !credentials.password) {
+          return null;
+        }
+
+        const identifier = credentials.email.trim();
+
+        // User per E-Mail ODER Benutzername suchen
+        const user = await prisma.user.findFirst({
+          where: {
+            OR: [{ email: identifier }, { username: identifier }],
+          },
+        });
+
+        if (!user || !user.passwordHash) {
+          return null;
+        }
+
+        const isValid = await compare(credentials.password, user.passwordHash);
+        if (!isValid) {
+          return null;
+        }
+
+        return {
+          id: user.id,
+          name: user.name ?? user.username ?? user.email,
+          email: user.email,
+        };
+      },
+    }),
+  ],
+  pages: {
+    signIn: '/login',
+  },
+  session: {
+    strategy: 'jwt',
+  },
+  callbacks: {
+    async jwt({ token, user }) {
+      if (user) {
+        token.id = user.id;
+      }
+      return token;
+    },
+    async session({ session, token }) {
+      if (session.user && token.id) {
+        (session.user as any).id = token.id;
+      }
+      return session;
+    },
+  },
+};
diff --git a/lib/auth.ts b/lib/auth.ts
index 5b7a55d..26e5d59 100644
--- a/lib/auth.ts
+++ b/lib/auth.ts
@@ -1,69 +1,44 @@
 // lib/auth.ts
 'use server';
 
-import { headers } from 'next/headers';
+import { getServerSession } from 'next-auth';
+import { authOptions } from './auth-options';
 import { prisma } from './prisma';
 
-/**
- * Liefert die aktuelle User-ID oder null,
- * falls kein User ermittelt werden kann.
- *
- * Reihenfolge:
- * 1. HTTP-Header: x-user-id
- * 2. HTTP-Header: x-user-email
- * 3. Fallback: DEFAULT_USER_EMAIL env oder "user@domain.local"
- */
+type SessionUser = {
+  id?: string;
+  email?: string | null;
+  name?: string | null;
+};
+
 export async function getCurrentUserId(): Promise<string | null> {
-  const h = await headers();
+  const session = await getServerSession(authOptions);
+  const user = session?.user as SessionUser | undefined;
 
-  const headerUserId = h.get('x-user-id');
-  const headerUserEmail = h.get('x-user-email');
-
-  // 1) Direkt über ID (Header)
-  if (headerUserId) {
-    const userById = await prisma.user.findUnique({
-      where: { id: headerUserId },
-      select: { id: true },
-    });
-
-    if (userById) {
-      return userById.id;
-    }
+  // 1) ID direkt aus dem Token
+  if (user?.id) {
+    return user.id;
   }
 
-  // 2) Über Email (Header)
-  if (headerUserEmail) {
-    const userByEmail = await prisma.user.findUnique({
-      where: { email: headerUserEmail },
+  // 2) Fallback über E-Mail aus der Session
+  if (user?.email) {
+    const dbUser = await prisma.user.findUnique({
+      where: { email: user.email },
       select: { id: true },
     });
-
-    if (userByEmail) {
-      return userByEmail.id;
-    }
+    if (dbUser) return dbUser.id;
   }
 
-  // 3) Fallback: Standard-User (z.B. dein Test-User)
-  const fallbackEmail =
-    process.env.DEFAULT_USER_EMAIL ?? 'user@domain.local';
-
-  const fallbackUser = await prisma.user.findUnique({
-    where: { email: fallbackEmail },
-    select: { id: true },
-  });
-
-  return fallbackUser?.id ?? null;
+  // 3) keine Session -> kein User
+  return null;
 }
 
-/**
- * Optional: kompletten User holen (falls du später mehr brauchst)
- */
 export async function getCurrentUser() {
-  const userId = await getCurrentUserId();
-  if (!userId) return null;
+  const id = await getCurrentUserId();
+  if (!id) return null;
 
   return prisma.user.findUnique({
-    where: { id: userId },
+    where: { id },
     include: {
       roles: {
         include: {
diff --git a/lib/socketClient.ts b/lib/socketClient.ts
new file mode 100644
index 0000000..8e7667a
--- /dev/null
+++ b/lib/socketClient.ts
@@ -0,0 +1,16 @@
+// lib/socketClient.ts
+'use client';
+
+import { io, Socket } from 'socket.io-client';
+
+let socket: Socket | null = null;
+
+export function getSocket(): Socket {
+  if (!socket) {
+    // Standard: gleiche Origin, /socket.io
+    socket = io({
+      path: '/api/socketio', // entspricht unserem Server-Endpunkt unten
+    });
+  }
+  return socket;
+}
diff --git a/lib/socketServer.ts b/lib/socketServer.ts
new file mode 100644
index 0000000..ff94999
--- /dev/null
+++ b/lib/socketServer.ts
@@ -0,0 +1,7 @@
+// lib/socketServer.ts
+import type { Server as IOServer } from 'socket.io';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function getDevicesIo(): IOServer | null {
+  return (global as any).devicesIo ?? null;
+}
diff --git a/package-lock.json b/package-lock.json
index 70b1bc7..989e331 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,8 @@
         "postcss": "^8.5.6",
         "react": "19.2.0",
         "react-dom": "19.2.0",
+        "socket.io": "^4.8.1",
+        "socket.io-client": "^4.8.1",
         "ts-node": "^10.9.2"
       },
       "devDependencies": {
@@ -1544,6 +1546,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+      "license": "MIT"
+    },
     "node_modules/@standard-schema/spec": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
@@ -1893,6 +1901,15 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/cors": {
+      "version": "2.8.19",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.19.tgz",
+      "integrity": "sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -2516,6 +2533,19 @@
         "win32"
       ]
     },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -2827,6 +2857,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+      "license": "MIT",
+      "engines": {
+        "node": "^4.5.0 || >= 5.9"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.8.28",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.28.tgz",
@@ -3132,6 +3171,19 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -3401,6 +3453,82 @@
         "node": ">=14"
       }
     },
+    "node_modules/engine.io": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.4.tgz",
+      "integrity": "sha512-ZCkIjSYNDyGn0R6ewHDtXgns/Zre/NT6Agvq1/WobF7JXgFff4SeDroKiCO3fNJreU9YG429Sc81o4w5ok/W5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cors": "^2.8.12",
+        "@types/node": ">=10.0.0",
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.7.2",
+        "cors": "~2.8.5",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.17.1"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/engine.io-client": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.3.tgz",
+      "integrity": "sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.17.1",
+        "xmlhttprequest-ssl": "~2.1.1"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/engine.io/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.18.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
@@ -5544,6 +5672,27 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -5571,7 +5720,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/nanoid": {
@@ -5615,6 +5763,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/next": {
       "version": "16.0.3",
       "resolved": "https://registry.npmjs.org/next/-/next-16.0.3.tgz",
@@ -5771,7 +5928,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -6717,6 +6873,130 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/socket.io": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.1.tgz",
+      "integrity": "sha512-oZ7iUCxph8WYRHHcjBEc9unw3adt5CmSNlppj/5Q4k2RIrhl8Z5yY2Xr4j9zj0+wzVZ0bxmYoGSzKJnRl6A4yg==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "cors": "~2.8.5",
+        "debug": "~4.3.2",
+        "engine.io": "~6.6.0",
+        "socket.io-adapter": "~2.5.2",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/socket.io-adapter": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.5.tgz",
+      "integrity": "sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "~4.3.4",
+        "ws": "~8.17.1"
+      }
+    },
+    "node_modules/socket.io-adapter/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io-client": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
+      "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.6.1",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-client/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -7373,6 +7653,15 @@
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
       "license": "MIT"
     },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -7488,6 +7777,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/package.json b/package.json
index f0d83fc..9b3fca8 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,8 @@
     "postcss": "^8.5.6",
     "react": "19.2.0",
     "react-dom": "19.2.0",
+    "socket.io": "^4.8.1",
+    "socket.io-client": "^4.8.1",
     "ts-node": "^10.9.2"
   },
   "devDependencies": {
diff --git a/pages/api/socketio.ts b/pages/api/socketio.ts
new file mode 100644
index 0000000..14de488
--- /dev/null
+++ b/pages/api/socketio.ts
@@ -0,0 +1,46 @@
+// server/socketio.ts
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { Server as IOServer } from 'socket.io';
+import type { Server as HTTPServer } from 'http';
+
+// TS-Hilfstypen
+type NextApiResponseWithSocket = NextApiResponse & {
+  socket: {
+    server: HTTPServer & {
+      io?: IOServer;
+    };
+  };
+};
+
+export default function handler(
+  _req: NextApiRequest,
+  res: NextApiResponseWithSocket,
+) {
+  if (!res.socket.server.io) {
+    const io = new IOServer(res.socket.server, {
+      path: '/api/socketio',
+      cors: {
+        origin: '*', // für lokal egal, in Produktion einschränken
+      },
+    });
+
+    // global speichern, damit wir aus anderen Routen darauf zugreifen können
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (global as any).devicesIo = io;
+
+    io.on('connection', (socket) => {
+      console.log('[Socket.IO] client connected', socket.id);
+
+      socket.on('disconnect', () => {
+        console.log('[Socket.IO] client disconnected', socket.id);
+      });
+    });
+
+    res.socket.server.io = io;
+    console.log('[Socket.IO] server initialized');
+  } else {
+    console.log('[Socket.IO] server already running');
+  }
+
+  res.end();
+}
diff --git a/prisma/create-test-user.ts b/prisma/create-test-user.ts
index a027757..29ae1b6 100644
--- a/prisma/create-test-user.ts
+++ b/prisma/create-test-user.ts
@@ -4,10 +4,13 @@ import { hash } from 'bcryptjs';
 
 const prisma = new PrismaClient();
 
+// Location.name ist @unique → upsert per name
 async function ensureLocation(name: string) {
-  const existing = await prisma.location.findFirst({ where: { name } });
-  if (existing) return existing;
-  return prisma.location.create({ data: { name } });
+  return prisma.location.upsert({
+    where: { name },
+    update: {},
+    create: { name },
+  });
 }
 
 async function main() {
@@ -27,7 +30,7 @@ async function main() {
     create: {
       email,
       username,
-      name: 'Test User',
+      name: 'Admin',
       passwordHash,
     },
   });
@@ -79,14 +82,17 @@ async function main() {
     create: { name: 'Monitore' },
   });
 
-  // Standorte anlegen (Location.name ist NICHT unique, daher findFirst + create)
+  // Standorte anlegen (Location.name ist @unique → ensureLocation nutzt upsert)
   const raum112 = await ensureLocation('Raum 1.12');
   const lagerKeller = await ensureLocation('Lager Keller');
 
   // Geräte anlegen / aktualisieren (inventoryNumber ist @id)
   const device1 = await prisma.device.upsert({
     where: { inventoryNumber: '1' },
-    update: {},
+    update: {
+      // falls du bei erneutem Aufruf auch z.B. Hersteller / Model aktualisieren willst,
+      // kannst du die Felder hier noch einmal setzen
+    },
     create: {
       inventoryNumber: '1',
       name: 'Dienstrechner Sachbearbeitung 1',
@@ -103,6 +109,24 @@ async function main() {
       locationId: raum112.id,
       createdById: user.id,
       updatedById: user.id,
+
+      // 🔹 Beispiel-Tags für Gerät 1
+      tags: {
+        connectOrCreate: [
+          {
+            where: { name: 'Dienstrechner' },
+            create: { name: 'Dienstrechner' },
+          },
+          {
+            where: { name: 'Büro' },
+            create: { name: 'Büro' },
+          },
+          {
+            where: { name: 'Windows' },
+            create: { name: 'Windows' },
+          },
+        ],
+      },
     },
   });
 
@@ -125,6 +149,20 @@ async function main() {
       locationId: lagerKeller.id,
       createdById: user.id,
       updatedById: user.id,
+
+      // 🔹 Beispiel-Tags für Gerät 2
+      tags: {
+        connectOrCreate: [
+          {
+            where: { name: 'Monitor' },
+            create: { name: 'Monitor' },
+          },
+          {
+            where: { name: 'Lager' },
+            create: { name: 'Lager' },
+          },
+        ],
+      },
     },
   });
 
diff --git a/prisma/dev.db b/prisma/dev.db
index 17a57ea947073ddddbd6d0783aa808aadd1b9fcf..7f2338c1ebaf00a42542599d6d8c5e8e5f0e6f0f 100644
GIT binary patch
literal 167936
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
E13+3}e*gdg

delta 3857
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
Ogq>PmX(+$582Jao&R<ag

diff --git a/prisma/migrations/20251117092638/migration.sql b/prisma/migrations/20251117092638/migration.sql
new file mode 100644
index 0000000..35d0391
--- /dev/null
+++ b/prisma/migrations/20251117092638/migration.sql
@@ -0,0 +1,22 @@
+-- CreateTable
+CREATE TABLE "Tag" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL
+);
+
+-- CreateTable
+CREATE TABLE "_DeviceToTag" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+    CONSTRAINT "_DeviceToTag_A_fkey" FOREIGN KEY ("A") REFERENCES "Device" ("inventoryNumber") ON DELETE CASCADE ON UPDATE CASCADE,
+    CONSTRAINT "_DeviceToTag_B_fkey" FOREIGN KEY ("B") REFERENCES "Tag" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Tag_name_key" ON "Tag"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "_DeviceToTag_AB_unique" ON "_DeviceToTag"("A", "B");
+
+-- CreateIndex
+CREATE INDEX "_DeviceToTag_B_index" ON "_DeviceToTag"("B");
diff --git a/prisma/migrations/20251117134852_add_device_history_changed_by/migration.sql b/prisma/migrations/20251117134852_add_device_history_changed_by/migration.sql
new file mode 100644
index 0000000..1c7127e
--- /dev/null
+++ b/prisma/migrations/20251117134852_add_device_history_changed_by/migration.sql
@@ -0,0 +1,2 @@
+-- CreateIndex
+CREATE INDEX "DeviceHistory_changedById_idx" ON "DeviceHistory"("changedById");
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 57061a3..c0ad748 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -18,18 +18,18 @@ datasource db {
    ────────────────────────────────────────── */
 
 model User {
-  id        String      @id @default(cuid())
-  email     String      @unique
-  username  String      @unique
-  name      String?
+  id           String           @id @default(cuid())
+  email        String           @unique
+  username     String           @unique
+  name         String?
   passwordHash String
 
-  roles     UserRole[]
+  roles         UserRole[]
 
   // Audit-Relations
-  devicesCreated Device[]       @relation("DeviceCreatedBy")
-  devicesUpdated Device[]       @relation("DeviceUpdatedBy")
-  historyEntries DeviceHistory[] @relation("DeviceHistoryChangedBy")
+  devicesCreated  Device[]       @relation("DeviceCreatedBy")
+  devicesUpdated  Device[]       @relation("DeviceUpdatedBy")
+  historyEntries  DeviceHistory[] @relation("DeviceHistoryChangedBy")
 
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
@@ -98,6 +98,8 @@ model Device {
   location  Location?    @relation(fields: [locationId], references: [id])
   locationId String?
 
+  tags      Tag[]
+
   // Audit-Felder
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
@@ -116,6 +118,12 @@ model Device {
   @@index([locationId])
 }
 
+model Tag {
+  id      String   @id @default(cuid())
+  name    String   @unique
+  devices Device[]   // implizite Join-Tabelle
+}
+
 /* ──────────────────────────────────────────
    History / Änderungsverlauf
    ────────────────────────────────────────── */
@@ -137,8 +145,14 @@ model DeviceHistory {
   snapshot   Json
   changedAt  DateTime         @default(now())
 
-  changedBy   User?           @relation("DeviceHistoryChangedBy", fields: [changedById], references: [id])
+  // 🔹 FK-Spalte
   changedById String?
 
+  // 🔹 Relation zu User
+  changedBy   User? @relation("DeviceHistoryChangedBy", fields: [changedById], references: [id])
+
   @@index([deviceId, changedAt])
+  @@index([changedById])
 }
+
+