diff --git a/backend/config/chatBridge.json b/backend/config/chatBridge.json
new file mode 100644
index 0000000..f9fb53a
--- /dev/null
+++ b/backend/config/chatBridge.json
@@ -0,0 +1,4 @@
+{
+  "host": "localhost",
+  "port": 1235
+}
diff --git a/backend/controllers/adminController.js b/backend/controllers/adminController.js
index ca4a804..d47a61a 100644
--- a/backend/controllers/adminController.js
+++ b/backend/controllers/adminController.js
@@ -177,9 +177,60 @@ class AdminController {
         }
     }
 
+
+
+    async updateRoom(req, res) {
+        try {
+            const userId = req.headers.userid;
+            if (!userId || !(await AdminService.hasUserAccess(userId, 'chatrooms'))) {
+                return res.status(403).json({ error: 'Keine Berechtigung.' });
+            }
+            const schema = Joi.object({
+                title: Joi.string().min(1).max(255).required(),
+                roomTypeId: Joi.number().integer().required(),
+                isPublic: Joi.boolean().required(),
+                genderRestrictionId: Joi.number().integer().allow(null),
+                minAge: Joi.number().integer().min(0).allow(null),
+                maxAge: Joi.number().integer().min(0).allow(null),
+                password: Joi.string().allow('', null),
+                friendsOfOwnerOnly: Joi.boolean().allow(null),
+                requiredUserRightId: Joi.number().integer().allow(null)
+            });
+            const { error, value } = schema.validate(req.body);
+            if (error) {
+                return res.status(400).json({ error: error.details[0].message });
+            }
+            const room = await AdminService.updateRoom(req.params.id, value);
+            res.status(200).json(room);
+        } catch (error) {
+            console.log(error);
+            res.status(500).json({ error: error.message });
+        }
+    }
+
+
     async createRoom(req, res) {
         try {
-            const room = await AdminService.createRoom(req.body);
+            const userId = req.headers.userid;
+            if (!userId || !(await AdminService.hasUserAccess(userId, 'chatrooms'))) {
+                return res.status(403).json({ error: 'Keine Berechtigung.' });
+            }
+            const schema = Joi.object({
+                title: Joi.string().min(1).max(255).required(),
+                roomTypeId: Joi.number().integer().required(),
+                isPublic: Joi.boolean().required(),
+                genderRestrictionId: Joi.number().integer().allow(null),
+                minAge: Joi.number().integer().min(0).allow(null),
+                maxAge: Joi.number().integer().min(0).allow(null),
+                password: Joi.string().allow('', null),
+                friendsOfOwnerOnly: Joi.boolean().allow(null),
+                requiredUserRightId: Joi.number().integer().allow(null)
+            });
+            const { error, value } = schema.validate(req.body);
+            if (error) {
+                return res.status(400).json({ error: error.details[0].message });
+            }
+            const room = await AdminService.createRoom(value);
             res.status(201).json(room);
         } catch (error) {
             console.log(error);
@@ -189,6 +240,10 @@ class AdminController {
 
     async deleteRoom(req, res) {
         try {
+            const userId = req.headers.userid;
+            if (!userId || !(await AdminService.hasUserAccess(userId, 'chatrooms'))) {
+                return res.status(403).json({ error: 'Keine Berechtigung.' });
+            }
             await AdminService.deleteRoom(req.params.id);
             res.sendStatus(204);
         } catch (error) {
diff --git a/backend/controllers/chatController.js b/backend/controllers/chatController.js
index 9afc85a..dc90dae 100644
--- a/backend/controllers/chatController.js
+++ b/backend/controllers/chatController.js
@@ -1,4 +1,5 @@
 import chatService from '../services/chatService.js';
+import Joi from 'joi';
 
 class ChatController {
   constructor() {
@@ -11,12 +12,20 @@ class ChatController {
     this.initOneToOne = this.initOneToOne.bind(this);
     this.sendOneToOneMessage = this.sendOneToOneMessage.bind(this);
     this.getOneToOneMessageHistory = this.getOneToOneMessageHistory.bind(this);
+    this.getRoomList = this.getRoomList.bind(this);
   }
 
   async getMessages(req, res) {
-    const { to, from } = req.body;
+    const schema = Joi.object({
+      to: Joi.string().required(),
+      from: Joi.string().required()
+    });
+    const { error, value } = schema.validate(req.body);
+    if (error) {
+      return res.status(400).json({ error: error.details[0].message });
+    }
     try {
-      const messages = await chatService.getMessages(to, from);
+      const messages = await chatService.getMessages(value.to, value.from);
       res.status(200).json(messages);
     } catch (error) {
       res.status(500).json({ error: error.message });
@@ -24,9 +33,17 @@ class ChatController {
   }
 
   async findRandomChatMatch(req, res) {
-    const { genders, age, id } = req.body;
+    const schema = Joi.object({
+      genders: Joi.array().items(Joi.string()).required(),
+      age: Joi.number().integer().min(0).required(),
+      id: Joi.string().required()
+    });
+    const { error, value } = schema.validate(req.body);
+    if (error) {
+      return res.status(400).json({ error: error.details[0].message });
+    }
     try {
-      const match = await chatService.findMatch(genders, age, id);
+      const match = await chatService.findMatch(value.genders, value.age, value.id);
       if (match) {
         res.status(200).json({ status: 'matched', user: match });
       } else {
@@ -38,9 +55,16 @@ class ChatController {
   }
 
   async registerUser(req, res) {
-    const { gender, age } = req.body;
+    const schema = Joi.object({
+      gender: Joi.string().required(),
+      age: Joi.number().integer().min(0).required()
+    });
+    const { error, value } = schema.validate(req.body);
+    if (error) {
+      return res.status(400).json({ error: error.details[0].message });
+    }
     try {
-      const userId = await chatService.registerUser(gender, age);
+      const userId = await chatService.registerUser(value.gender, value.age);
       res.status(200).json({ id: userId });
     } catch (error) {
       res.status(500).json({ error: error.message });
@@ -48,9 +72,17 @@ class ChatController {
   }
 
   async sendMessage(req, res) {
-    const { from, to, text } = req.body;
+    const schema = Joi.object({
+      from: Joi.string().required(),
+      to: Joi.string().required(),
+      text: Joi.string().min(1).max(2000).required()
+    });
+    const { error, value } = schema.validate(req.body);
+    if (error) {
+      return res.status(400).json({ error: error.details[0].message });
+    }
     try {
-      const message = await chatService.addMessage(from, to, text);
+      const message = await chatService.addMessage(value.from, value.to, value.text);
       res.status(200).json(message);
     } catch (error) {
       res.status(500).json({ error: error.message });
@@ -58,9 +90,15 @@ class ChatController {
   }
 
   async removeUser(req, res) {
-    const { id } = req.body;
+    const schema = Joi.object({
+      id: Joi.string().required()
+    });
+    const { error, value } = schema.validate(req.body);
+    if (error) {
+      return res.status(400).json({ error: error.details[0].message });
+    }
     try {
-      await chatService.removeUser(id);
+      await chatService.removeUser(value.id);
       res.sendStatus(200);
     } catch (error) {
       res.status(500).json({ error: error.message });
@@ -68,9 +106,15 @@ class ChatController {
   }
 
   async stopChat(req, res) {
-    const { id } = req.body;
+    const schema = Joi.object({
+      id: Joi.string().required()
+    });
+    const { error, value } = schema.validate(req.body);
+    if (error) {
+      return res.status(400).json({ error: error.details[0].message });
+    }
     try {
-      await chatService.endChat(id);
+      await chatService.endChat(value.id);
       res.sendStatus(200);
     } catch (error) {
       res.status(500).json({ error: error.message });
@@ -78,10 +122,16 @@ class ChatController {
   }
 
   async initOneToOne(req, res) {
+    const schema = Joi.object({
+      partnerHashId: Joi.string().required()
+    });
+    const { error, value } = schema.validate(req.body);
+    if (error) {
+      return res.status(400).json({ error: error.details[0].message });
+    }
     const { userid: hashedUserId } = req.headers;
-    const { partnerHashId } = req.body;
     try {
-      await chatService.initOneToOne(hashedUserId, partnerHashId);
+      await chatService.initOneToOne(hashedUserId, value.partnerHashId);
       res.status(200).json({ message: 'One-to-one chat initialization is pending implementation.' });
     } catch (error) {
       res.status(500).json({ error: error.message });
@@ -89,9 +139,17 @@ class ChatController {
   }
 
   async sendOneToOneMessage(req, res) {
-    const { user1HashId, user2HashId, message } = req.body;
+    const schema = Joi.object({
+      user1HashId: Joi.string().required(),
+      user2HashId: Joi.string().required(),
+      message: Joi.string().min(1).max(2000).required()
+    });
+    const { error, value } = schema.validate(req.body);
+    if (error) {
+      return res.status(400).json({ error: error.details[0].message });
+    }
     try {
-      await chatService.sendOneToOneMessage(user1HashId, user2HashId, message);
+      await chatService.sendOneToOneMessage(value.user1HashId, value.user2HashId, value.message);
       res.status(200).json({ status: 'message sent' });
     } catch (error) {
       res.status(500).json({ error: error.message });
@@ -107,6 +165,16 @@ class ChatController {
       res.status(500).json({ error: error.message });
     }
   }
+
+  async getRoomList(req, res) {
+    // Öffentliche Räume für Chat-Frontend
+    try {
+      const rooms = await chatService.getRoomList();
+      res.status(200).json(rooms);
+    } catch (error) {
+      res.status(500).json({ error: error.message });
+    }
+  }
 }
 
 export default ChatController;
diff --git a/backend/controllers/contactController.js b/backend/controllers/contactController.js
index a0803d2..0b50bbb 100644
--- a/backend/controllers/contactController.js
+++ b/backend/controllers/contactController.js
@@ -1,4 +1,5 @@
 import ContactService from '../services/ContactService.js';
+import Joi from 'joi';
 
 class ContactController {
     constructor() {
@@ -6,9 +7,18 @@ class ContactController {
     }
 
     async addContactMessage(req, res) {
+        const schema = Joi.object({
+            email: Joi.string().email().required(),
+            name: Joi.string().min(1).max(255).required(),
+            message: Joi.string().min(1).max(2000).required(),
+            acceptDataSave: Joi.boolean().required()
+        });
+        const { error, value } = schema.validate(req.body);
+        if (error) {
+            return res.status(400).json({ error: error.details[0].message });
+        }
         try {
-            const { email, name, message, acceptDataSave } = req.body;
-            await ContactService.addContactMessage(email, name, message, acceptDataSave);
+            await ContactService.addContactMessage(value.email, value.name, value.message, value.acceptDataSave);
             res.status(200).json({ status: 'ok' });
         } catch (error) {
             res.status(409).json({ error: error.message });
diff --git a/backend/controllers/forumController.js b/backend/controllers/forumController.js
index a37c9d3..9f06836 100644
--- a/backend/controllers/forumController.js
+++ b/backend/controllers/forumController.js
@@ -1,11 +1,19 @@
 import forumService from '../services/forumService.js';
+import Joi from 'joi';
 
 const forumController = {
     async createForum(req, res) {
+        const schema = Joi.object({
+            name: Joi.string().min(1).max(255).required(),
+            permissions: Joi.array().items(Joi.string().min(1).max(255)).required()
+        });
+        const { error, value } = schema.validate(req.body);
+        if (error) {
+            return res.status(400).json({ error: error.details[0].message });
+        }
         try {
             const { userid: userId } = req.headers;
-            const { name, permissions } = req.body;
-            const forum = await forumService.createForum(userId, name, permissions);
+            const forum = await forumService.createForum(userId, value.name, value.permissions);
             res.status(201).json(forum);
         } catch (error) {
             console.error('Error in createForum:', error);
@@ -49,10 +57,18 @@ const forumController = {
     },
 
     async createTopic(req, res) {
+        const schema = Joi.object({
+            forumId: Joi.number().integer().required(),
+            title: Joi.string().min(1).max(255).required(),
+            content: Joi.string().min(1).max(5000).required()
+        });
+        const { error, value } = schema.validate(req.body);
+        if (error) {
+            return res.status(400).json({ error: error.details[0].message });
+        }
         try {
             const { userid: userId } = req.headers;
-            const { forumId, title, content } = req.body;
-            const result = await forumService.createTopic(userId, forumId, title, content);
+            const result = await forumService.createTopic(userId, value.forumId, value.title, value.content);
             res.status(201).json(result);
         } catch (error) {
             console.error('Error in createTopic:', error);
@@ -73,11 +89,17 @@ const forumController = {
     },
 
     async addMessage(req, res) {
+        const schema = Joi.object({
+            content: Joi.string().min(1).max(5000).required()
+        });
+        const { error, value } = schema.validate(req.body);
+        if (error) {
+            return res.status(400).json({ error: error.details[0].message });
+        }
         try {
             const { userid: userId } = req.headers;
             const { id: topicId } = req.params;
-            const { content } = req.body;
-            const result = await forumService.addMessage(userId, topicId, content);
+            const result = await forumService.addMessage(userId, topicId, value.content);
             res.status(201).json(result);
         } catch (error) {
             console.error('Error in addMessage:', error);
diff --git a/backend/controllers/friendshipController.js b/backend/controllers/friendshipController.js
index 04b4b99..4c11689 100644
--- a/backend/controllers/friendshipController.js
+++ b/backend/controllers/friendshipController.js
@@ -1,12 +1,18 @@
 import friendshipService from '../services/friendshipService.js';
+import Joi from 'joi';
 
 const friendshipController = {
     async endFriendship(req, res) {
+        const schema = Joi.object({
+            friendUserId: Joi.string().required()
+        });
+        const { error, value } = schema.validate(req.body);
+        if (error) {
+            return res.status(400).json({ error: error.details[0].message });
+        }
         try {
             const { userid: hashedUserId } = req.headers;
-            const { friendUserId } = req.body;
-
-            await friendshipService.endFriendship(hashedUserId, friendUserId);
+            await friendshipService.endFriendship(hashedUserId, value.friendUserId);
             res.status(200).json({ message: 'Friendship ended successfully' });
         } catch (error) {
             console.error('Error in endFriendship:', error);
@@ -15,11 +21,16 @@ const friendshipController = {
     },
 
     async acceptFriendship(req, res) {
+        const schema = Joi.object({
+            friendUserId: Joi.string().required()
+        });
+        const { error, value } = schema.validate(req.body);
+        if (error) {
+            return res.status(400).json({ error: error.details[0].message });
+        }
         try {
             const { userid: hashedUserId } = req.headers;
-            const { friendUserId } = req.body;
-
-            await friendshipService.acceptFriendship(hashedUserId, friendUserId);
+            await friendshipService.acceptFriendship(hashedUserId, value.friendUserId);
             res.status(200).json({ message: 'Friendship accepted successfully' });
         } catch (error) {
             console.error('Error in acceptFriendship:', error);
@@ -28,11 +39,16 @@ const friendshipController = {
     },
 
     async rejectFriendship(req, res) {
+        const schema = Joi.object({
+            friendUserId: Joi.string().required()
+        });
+        const { error, value } = schema.validate(req.body);
+        if (error) {
+            return res.status(400).json({ error: error.details[0].message });
+        }
         try {
             const { userid: hashedUserId } = req.headers;
-            const { friendUserId } = req.body;
-
-            await friendshipService.rejectFriendship(hashedUserId, friendUserId);
+            await friendshipService.rejectFriendship(hashedUserId, value.friendUserId);
             res.status(200).json({ message: 'Friendship rejected successfully' });
         } catch (error) {
             console.error('Error in rejectFriendship:', error);
@@ -41,10 +57,16 @@ const friendshipController = {
     },
 
     async withdrawRequest(req, res) {
+        const schema = Joi.object({
+            friendUserId: Joi.string().required()
+        });
+        const { error, value } = schema.validate(req.body);
+        if (error) {
+            return res.status(400).json({ error: error.details[0].message });
+        }
         try {
             const { userid: hashedUserId } = req.headers;
-            const { friendUserId } = req.body;
-            await friendshipService.withdrawRequest(hashedUserId, friendUserId);
+            await friendshipService.withdrawRequest(hashedUserId, value.friendUserId);
             res.status(200).json({ message: 'Friendship request withdrawn successfully' });
         } catch (error) {
             console.error('Error in withdrawRequest:', error);
diff --git a/backend/controllers/navigationController.js b/backend/controllers/navigationController.js
index ba36fd8..8547391 100644
--- a/backend/controllers/navigationController.js
+++ b/backend/controllers/navigationController.js
@@ -80,7 +80,8 @@ const menuStructure = {
                 visible: ["over12"],
                 action: "openMultiChat",
                 view: "window",
-                class: "multiChatWindow"
+                class: "multiChatDialog",
+                icon: "multichat24.png"
             },
             randomChat: {
                 visible: ["over12"],
diff --git a/backend/controllers/settingsController.js b/backend/controllers/settingsController.js
index 5aad797..8255b47 100644
--- a/backend/controllers/settingsController.js
+++ b/backend/controllers/settingsController.js
@@ -1,4 +1,5 @@
 import settingsService from '../services/settingsService.js';
+import Joi from 'joi';
 
 class SettingsController {
     async filterSettings(req, res) {
@@ -13,9 +14,17 @@ class SettingsController {
     }
 
     async updateSetting(req, res) {
-        const { userid, settingId, value } = req.body;
+        const schema = Joi.object({
+            userid: Joi.string().required(),
+            settingId: Joi.number().integer().required(),
+            value: Joi.any().required()
+        });
+        const { error, value } = schema.validate(req.body);
+        if (error) {
+            return res.status(400).json({ error: error.details[0].message });
+        }
         try {
-            await settingsService.updateSetting(userid, settingId, value);
+            await settingsService.updateSetting(value.userid, value.settingId, value.value);
             res.status(200).json({ message: 'Setting updated successfully' });
         } catch (error) {
             console.error('Error updating user setting:', error);
@@ -68,8 +77,16 @@ class SettingsController {
     }
 
     async setAccountSettings(req, res) {
+        const schema = Joi.object({
+            userId: Joi.string().required(),
+            settings: Joi.object().required()
+        });
+        const { error, value } = schema.validate(req.body);
+        if (error) {
+            return res.status(400).json({ error: error.details[0].message });
+        }
         try {
-            await settingsService.setAccountSettings(req.body);
+            await settingsService.setAccountSettings(value);
             res.status(200).json({ message: 'Account settings updated successfully' });
         } catch (error) {
             console.error('Error updating account settings:', error);
@@ -100,10 +117,16 @@ class SettingsController {
     }
 
     async addInterest(req, res) {
+        const schema = Joi.object({
+            name: Joi.string().min(1).max(255).required()
+        });
+        const { error, value } = schema.validate(req.body);
+        if (error) {
+            return res.status(400).json({ error: error.details[0].message });
+        }
         try {
             const { userid: userId } = req.headers;
-            const { name } = req.body;
-            const interest = await settingsService.addInterest(userId, name);
+            const interest = await settingsService.addInterest(userId, value.name);
             res.status(200).json({ interest });
         } catch (error) {
             console.error('Error adding interest:', error);
@@ -112,10 +135,16 @@ class SettingsController {
     }
 
     async addUserInterest(req, res) {
+        const schema = Joi.object({
+            interestid: Joi.number().integer().required()
+        });
+        const { error, value } = schema.validate(req.body);
+        if (error) {
+            return res.status(400).json({ error: error.details[0].message });
+        }
         try {
             const { userid: userId } = req.headers;
-            const { interestid: interestId } = req.body;
-            await settingsService.addUserInterest(userId, interestId);
+            await settingsService.addUserInterest(userId, value.interestid);
             res.status(200).json({ message: 'User interest added successfully' });
         } catch (error) {
             console.error('Error adding user interest:', error);
diff --git a/backend/routers/adminRouter.js b/backend/routers/adminRouter.js
index d7396b6..373935b 100644
--- a/backend/routers/adminRouter.js
+++ b/backend/routers/adminRouter.js
@@ -12,6 +12,7 @@ router.get('/chat/gender-restrictions', authenticate, adminController.getGenderR
 router.get('/chat/user-rights', authenticate, adminController.getUserRights);
 router.get('/chat/rooms', authenticate, adminController.getRooms);
 router.post('/chat/rooms', authenticate, adminController.createRoom);
+router.put('/chat/rooms/:id', authenticate, adminController.updateRoom);
 router.delete('/chat/rooms/:id', authenticate, adminController.deleteRoom);
 
 router.get('/interests/open', authenticate, adminController.getOpenInterests);
diff --git a/backend/routers/chatRouter.js b/backend/routers/chatRouter.js
index 12513d8..9d44ffc 100644
--- a/backend/routers/chatRouter.js
+++ b/backend/routers/chatRouter.js
@@ -14,5 +14,6 @@ router.post('/exit', chatController.removeUser);
 router.post('/initOneToOne', authenticate, chatController.initOneToOne);
 router.post('/oneToOne/sendMessage', authenticate, chatController.sendOneToOneMessage); // Neue Route zum Senden einer Nachricht
 router.get('/oneToOne/messageHistory', authenticate, chatController.getOneToOneMessageHistory); // Neue Route zum Abrufen der Nachrichtengeschichte
+router.get('/rooms', chatController.getRoomList);
 
 export default router;
diff --git a/backend/services/adminService.js b/backend/services/adminService.js
index eb56554..b4f2fab 100644
--- a/backend/services/adminService.js
+++ b/backend/services/adminService.js
@@ -308,7 +308,20 @@ class AdminService {
     }
 
     async getRooms() {
+        // Only return necessary fields to the frontend
         return await Room.findAll({
+            attributes: [
+                'id',
+                'title',
+                'roomTypeId',
+                'isPublic',
+                'genderRestrictionId',
+                'minAge',
+                'maxAge',
+                'friendsOfOwnerOnly',
+                'requiredUserRightId',
+                'password' // only if needed for editing, otherwise remove
+            ],
             include: [
                 { model: RoomType, as: 'roomType' },
                 { model: UserParamValue, as: 'genderRestriction' },
@@ -316,6 +329,13 @@ class AdminService {
         });
     }
 
+    async updateRoom(id, data) {
+        const room = await Room.findByPk(id);
+        if (!room) throw new Error('Room not found');
+        await room.update(data);
+        return room;
+    }
+
     async createRoom(data) {
         return await Room.create(data);
     }
diff --git a/backend/services/chatService.js b/backend/services/chatService.js
index b1516ef..a983090 100644
--- a/backend/services/chatService.js
+++ b/backend/services/chatService.js
@@ -132,6 +132,22 @@ class ChatService {
       (chat.user1Id === user2HashId && chat.user2Id === user1HashId)
     );
   }
+  
+  async getRoomList() {
+    // Nur öffentliche Räume, keine sensiblen Felder
+    const { default: Room } = await import('../models/chat/room.js');
+    const { default: RoomType } = await import('../models/chat/room_type.js');
+    return Room.findAll({
+      attributes: [
+        'id', 'title', 'roomTypeId', 'isPublic', 'genderRestrictionId',
+        'minAge', 'maxAge', 'friendsOfOwnerOnly', 'requiredUserRightId'
+      ],
+      where: { isPublic: true },
+      include: [
+        { model: RoomType, as: 'roomType' }
+      ]
+    });
+  }
 }
 
 export default new ChatService();
diff --git a/backend/services/chatTcpBridge.js b/backend/services/chatTcpBridge.js
new file mode 100644
index 0000000..85f9448
--- /dev/null
+++ b/backend/services/chatTcpBridge.js
@@ -0,0 +1,307 @@
+import net from 'net';
+import fs from 'fs';
+import path from 'path';
+
+const DEFAULT_CONFIG = { host: 'localhost', port: 1235 };
+
+function loadBridgeConfig() {
+    try {
+        const cfgPath = path.resolve(process.cwd(), 'backend/config/chatBridge.json');
+        if (fs.existsSync(cfgPath)) {
+            const raw = fs.readFileSync(cfgPath, 'utf-8');
+            const json = JSON.parse(raw);
+            return { ...DEFAULT_CONFIG, ...json };
+        }
+    } catch (e) {
+        console.warn('Failed to load chatBridge.json, using defaults:', e.message);
+    }
+    return { ...DEFAULT_CONFIG };
+}
+
+export default class ChatTcpBridge {
+    constructor(ioSocket, user) {
+        this.ioSocket = ioSocket;
+        this.user = user || {};
+        this.token = null;
+        this.tcp = null;
+        this.buffer = '';
+        this.config = loadBridgeConfig();
+        this.pending = [];
+        this.objStart = -1;
+        this.depthCurly = 0;
+        this.depthSquare = 0;
+        this.inString = false;
+        this.escapeNext = false;
+    }
+
+    connect(initialRoomName = '') {
+        if (this.tcp) return;
+        const { host, port } = this.config;
+
+        this.ioEmitStatus('connecting', `${host}:${port}`);
+        console.log(`[ChatBridge] Connecting to ${host}:${port}`);
+        this.tcp = new net.Socket();
+
+        this.tcp.on('connect', () => {
+            this.ioEmitStatus('connected', `${host}:${port}`);
+            console.log(`[ChatBridge] Connected to ${host}:${port}`);
+            // Erstnachricht: init
+            const initPayload = {
+                type: 'init',
+                name: this.user.username || '',
+                room: initialRoomName || '',
+            };
+            this.sendRaw(initPayload);
+        });
+
+        this.tcp.on('data', (data) => {
+            this.processChunk(data.toString('utf-8'));
+        });
+
+        this.tcp.on('error', (err) => {
+            this.ioEmitStatus('error', err.message);
+            console.error('[ChatBridge] Error:', err.message);
+        });
+
+        this.tcp.on('close', () => {
+            this.ioEmitStatus('disconnected');
+            console.warn('[ChatBridge] Disconnected');
+        });
+
+        this.tcp.connect(port, host);
+    }
+
+    handleIncomingLine(line) {
+        try {
+            const obj = JSON.parse(line);
+            this.handleIncoming(obj);
+        } catch (e) {
+            this.ioSocket.emit('chat:incoming', { type: 'system', text: line });
+        }
+    }
+
+    processChunk(chunk) {
+        if (!chunk) return;
+        for (let i = 0; i < chunk.length; i++) {
+            const ch = chunk[i];
+            this.buffer += ch;
+            if (this.escapeNext) {
+                this.escapeNext = false;
+                continue;
+            }
+            if (this.inString) {
+                if (ch === '\\') { this.escapeNext = true; }
+                else if (ch === '"') { this.inString = false; }
+                continue;
+            }
+            if (ch === '"') { this.inString = true; continue; }
+            if (ch === '{') { this.depthCurly++; if (this.objStart === -1) this.objStart = this.buffer.length - 1; }
+            else if (ch === '}') { this.depthCurly--; }
+            else if (ch === '[') { this.depthSquare++; }
+            else if (ch === ']') { this.depthSquare--; }
+
+            // Wenn ein komplettes Objekt abgeschlossen ist (außerhalb von Strings und beide Tiefen 0)
+            if (this.objStart !== -1 && this.depthCurly === 0) {
+                const jsonStr = this.buffer.slice(this.objStart, this.buffer.length);
+                // Alles vor objStart (falls vorhanden) rausfiltern
+                const prefix = this.buffer.slice(0, this.objStart);
+                if (prefix.trim()) {
+                    // Unerwarteter Text, als System ausgeben
+                    this.ioSocket.emit('chat:incoming', { type: 'system', text: prefix.trim() });
+                }
+                this.buffer = '';
+                this.objStart = -1;
+                this.parseAndHandle(jsonStr);
+            }
+        }
+    }
+
+    parseAndHandle(jsonStr) {
+        try {
+            const obj = JSON.parse(jsonStr);
+            // Forward raw parsed inbound message to browser console
+            this.ioSocket.emit('chat:debug', { dir: 'in', payload: obj });
+            this.handleIncoming(obj);
+        } catch (e) {
+            // Wenn mehrere Objekte direkt aneinander hängen (}{), versuchen sie zu splitten
+            const parts = jsonStr.split('}{').map((p, idx, arr) => (idx === 0 ? p + '}' : (idx === arr.length - 1 ? '{' + p : '{' + p + '}')));
+            if (parts.length > 1) {
+                parts.forEach(p => {
+                    try {
+                        const o = JSON.parse(p);
+                        this.ioSocket.emit('chat:debug', { dir: 'in', payload: o });
+                        this.handleIncoming(o);
+                    } catch (_) {
+                        this.ioSocket.emit('chat:debug', { dir: 'in', raw: p });
+                        this.ioSocket.emit('chat:incoming', { type: 'system', text: p });
+                    }
+                });
+            } else {
+                this.ioSocket.emit('chat:debug', { dir: 'in', raw: jsonStr });
+                this.ioSocket.emit('chat:incoming', { type: 'system', text: jsonStr });
+            }
+        }
+    }
+
+    handleIncoming(obj) {
+        if (!obj) return;
+        // Map numeric type codes
+        if (typeof obj.type === 'number') {
+            switch (obj.type) {
+                case 1: // token
+                    if (typeof obj.message === 'string' && obj.message) {
+                        this.token = obj.message;
+                        this.ioSocket.emit('chat:incoming', { type: 'system', text: 'Token received' });
+                        const actions = this.pending; this.pending = [];
+                        actions.forEach(fn => { try { fn(); } catch (_) { } });
+                        return;
+                    }
+                    break;
+                case 3: // room list
+                    if (Array.isArray(obj.message)) {
+                        const names = obj.message.map(r => r.name).filter(Boolean).join(', ');
+                        this.ioSocket.emit('chat:incoming', { type: 'system', text: names ? `Rooms: ${names}` : 'Rooms updated' });
+                        return;
+                    }
+                    break;
+                case 5: {
+                    // generic server event (room entered, color changes, etc.)
+                    const msg = obj.message;
+                    if (!msg) break;
+                    if (typeof msg === 'string') {
+                        if (msg === 'room_entered') {
+                            const to = obj.to || obj.name || obj.room || '';
+                            this.ioSocket.emit('chat:incoming', { type: 'system', code: 'room_entered', tr: 'room_entered', to });
+                            return;
+                        }
+                        if (msg === 'color_changed' || msg === 'user_color_changed') {
+                            this.ioSocket.emit('chat:incoming', {
+                                type: 'system',
+                                code: msg,
+                                color: obj.color,
+                                userName: obj.userName || ''
+                            });
+                            return;
+                        }
+                        // unknown message string; fallthrough to text echo
+                        this.ioSocket.emit('chat:incoming', { type: 'system', text: msg });
+                        return;
+                    }
+                    if (typeof msg === 'object') {
+                        const tr = msg.tr || 'room_entered';
+                        const to = msg.to || msg.name || msg.room || '';
+                        this.ioSocket.emit('chat:incoming', { type: 'system', code: tr, tr, to });
+                        return;
+                    }
+                    break;
+                }
+                case 6: {
+                    // scream
+                    const userName = obj.userName || obj.user || obj.name || '';
+                    const message = obj.message || '';
+                    this.ioSocket.emit('chat:incoming', {
+                        type: 'scream',
+                        userName,
+                        message,
+                        color: obj.color || null
+                    });
+                    return;
+                }
+                default:
+                    break;
+            }
+        }
+        if (obj.type === 'token' && obj.message) {
+            this.token = obj.message;
+            this.ioSocket.emit('chat:incoming', { type: 'system', text: 'Token received' });
+            // Ausstehende Aktionen jetzt mit Token senden
+            const actions = this.pending;
+            this.pending = [];
+            actions.forEach(fn => {
+                try { fn(); } catch (_) { }
+            });
+            return;
+        }
+        // Normalize generic messages
+        if (typeof obj.message === 'string' && obj.message && (obj.userName || obj.user || obj.name)) {
+            this.ioSocket.emit('chat:incoming', {
+                type: 'message',
+                message: obj.message,
+                userName: obj.userName || obj.user || obj.name,
+                color: obj.color || null
+            });
+            return;
+        }
+        // As system fallback
+        this.ioSocket.emit('chat:incoming', { type: 'system', text: JSON.stringify(obj) });
+    }
+
+    sendRaw(obj) {
+        if (!this.tcp) return;
+        try {
+            const str = JSON.stringify(obj) + '\n';
+            // Forward outbound payload to browser console
+            this.ioSocket.emit('chat:debug', { dir: 'out', payload: obj });
+            this.tcp.write(str);
+        } catch (e) {
+            this.ioEmitStatus('error', e.message);
+        }
+    }
+
+    sendWithToken(obj) {
+        if (this.token) obj.token = this.token;
+        this.sendRaw(obj);
+    }
+
+    withTokenOrQueue(fn) {
+        if (this.token) {
+            fn();
+        } else {
+            this.pending.push(fn);
+        }
+    }
+
+    joinRoom(roomName, password = '') {
+        // Prefer keys name/room if server expects them for room switch; fallback to newroom if required elsewhere
+        this.withTokenOrQueue(() => this.sendWithToken({ type: 'join', room: roomName, name: this.user.username || '', password }));
+    }
+
+    sendMessage(text) {
+        this.withTokenOrQueue(() => this.sendWithToken({ type: 'message', message: text, userName: this.user.username }));
+    }
+
+    scream(text) {
+        this.withTokenOrQueue(() => this.sendWithToken({ type: 'scream', message: text }));
+    }
+
+    doAction(text) {
+        this.withTokenOrQueue(() => this.sendWithToken({ type: 'do', message: text }));
+    }
+
+    dice(expr) {
+        this.withTokenOrQueue(() => this.sendWithToken({ type: 'dice', message: expr || '' }));
+    }
+
+    color(hex) {
+        let value = typeof hex === 'string' ? hex.trim() : '';
+        if (!value) return;
+        if (!value.startsWith('#')) value = '#' + value;
+        // Normalize 3-digit to 6-digit when possible
+        const m3 = /^#([0-9a-fA-F]{3})$/.exec(value);
+        if (m3) {
+            value = '#' + m3[1].split('').map(c => c + c).join('');
+        }
+        const m6 = /^#([0-9a-fA-F]{6})$/.exec(value);
+        if (!m6) return;
+        this.withTokenOrQueue(() => this.sendWithToken({ type: 'color', value }));
+    }
+
+    close() {
+        try { this.tcp?.destroy(); } catch (_) { }
+        this.tcp = null;
+    }
+
+    ioEmitStatus(type, detail) {
+        this.ioSocket.emit('chat:status', { type, detail });
+    }
+}
diff --git a/frontend/public/images/icons/activity.png b/frontend/public/images/icons/activity.png
new file mode 100644
index 0000000..8edc831
Binary files /dev/null and b/frontend/public/images/icons/activity.png differ
diff --git a/frontend/public/images/icons/colorpicker.png b/frontend/public/images/icons/colorpicker.png
new file mode 100644
index 0000000..e523803
Binary files /dev/null and b/frontend/public/images/icons/colorpicker.png differ
diff --git a/frontend/public/images/icons/multichat.png b/frontend/public/images/icons/multichat.png
new file mode 100644
index 0000000..ba2964d
Binary files /dev/null and b/frontend/public/images/icons/multichat.png differ
diff --git a/frontend/public/images/icons/multichat16.png b/frontend/public/images/icons/multichat16.png
new file mode 100644
index 0000000..7b8871d
Binary files /dev/null and b/frontend/public/images/icons/multichat16.png differ
diff --git a/frontend/public/images/icons/multichat24.png b/frontend/public/images/icons/multichat24.png
new file mode 100644
index 0000000..5b49e60
Binary files /dev/null and b/frontend/public/images/icons/multichat24.png differ
diff --git a/frontend/public/images/icons/scream.png b/frontend/public/images/icons/scream.png
new file mode 100644
index 0000000..d387fdb
Binary files /dev/null and b/frontend/public/images/icons/scream.png differ
diff --git a/frontend/public/images/icons/sendmessage.png b/frontend/public/images/icons/sendmessage.png
new file mode 100644
index 0000000..c8d4fd5
Binary files /dev/null and b/frontend/public/images/icons/sendmessage.png differ
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 174cbdd..23298ca 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -16,6 +16,7 @@
     <ImprintDialog ref="imprintDialog" />
     <ShowImageDialog ref="showImageDialog" />
     <MessageDialog ref="messageDialog" />
+    <MultiChatDialog ref="multiChatDialog" />
   </div>
 </template>
 
@@ -37,6 +38,7 @@ import ErrorDialog from './dialogues/standard/ErrorDialog.vue';
 import ImprintDialog from './dialogues/standard/ImprintDialog.vue';
 import ShowImageDialog from './dialogues/socialnetwork/ShowImageDialog.vue';
 import MessageDialog from './dialogues/standard/MessageDialog.vue';
+import MultiChatDialog from './dialogues/chat/MultiChatDialog.vue';
 
 export default {
   name: 'App',
@@ -63,6 +65,7 @@ export default {
     ImprintDialog,
     ShowImageDialog,
     MessageDialog,
+    MultiChatDialog,
   },
   created() {
     this.$i18n.locale = this.$store.getters.language;
diff --git a/frontend/src/api/chatApi.js b/frontend/src/api/chatApi.js
new file mode 100644
index 0000000..68ea439
--- /dev/null
+++ b/frontend/src/api/chatApi.js
@@ -0,0 +1,6 @@
+import apiClient from "@/utils/axios.js";
+
+export const fetchPublicRooms = async () => {
+  const response = await apiClient.get("/api/chat/rooms");
+  return response.data; // expecting array of { id, title, ... }
+};
diff --git a/frontend/src/components/AppFooter.vue b/frontend/src/components/AppFooter.vue
index 399e0c4..b76c342 100644
--- a/frontend/src/components/AppFooter.vue
+++ b/frontend/src/components/AppFooter.vue
@@ -29,10 +29,14 @@ export default {
     ...mapState(['daemonSocket']),
   },
   mounted() {
-    this.daemonSocket.addEventListener('workerStatus', () => { console.log('----'); });
+    if (this.daemonSocket && this.daemonSocket.addEventListener) {
+      this.daemonSocket.addEventListener('workerStatus', this.handleDaemonMessage);
+    }
   },
   beforeUnmount() {
-    this.daemonSocket.removeEventListener('workerStatus', this.handleDaemonMessage);
+    if (this.daemonSocket && this.daemonSocket.removeEventListener) {
+      this.daemonSocket.removeEventListener('workerStatus', this.handleDaemonMessage);
+    }
   },
   methods: {
     openImprintDialog() {
@@ -48,7 +52,9 @@ export default {
       this.$store.dispatch('dialogs/toggleDialogMinimize', dialogName);
     },
     async showFalukantDaemonStatus() {
-      this.daemonSocket.send('{"event": "getWorkerStatus"}');
+      if (this.daemonSocket && this.daemonSocket.send) {
+        this.daemonSocket.send('{"event": "getWorkerStatus"}');
+      }
     },
     handleDaemonMessage(event) {
       const status = JSON.parse(event.data);
diff --git a/frontend/src/components/AppNavigation.vue b/frontend/src/components/AppNavigation.vue
index 1a92c9d..3434cd3 100644
--- a/frontend/src/components/AppNavigation.vue
+++ b/frontend/src/components/AppNavigation.vue
@@ -110,6 +110,7 @@ import { createApp } from 'vue';
 import apiClient from '@/utils/axios.js';
 
 import RandomChatDialog from '../dialogues/chat/RandomChatDialog.vue';
+import MultiChatDialog from '../dialogues/chat/MultiChatDialog.vue';
 
 // Wichtig: die zentrale Instanzen importieren
 import store from '@/store';
@@ -119,7 +120,8 @@ import i18n from '@/i18n';
 export default {
   name: 'AppNavigation',
   components: {
-    RandomChatDialog
+    RandomChatDialog,
+    MultiChatDialog
   },
   data() {
     return {
@@ -160,6 +162,22 @@ export default {
   methods: {
     ...mapActions(['loadMenu', 'logout']),
 
+    openMultiChat() {
+      // Räume können später dynamisch geladen werden, hier als Platzhalter ein Beispiel:
+      const exampleRooms = [
+        { id: 1, title: 'Allgemein' },
+        { id: 2, title: 'Rollenspiel' }
+      ];
+      const ref = this.$root.$refs.multiChatDialog;
+      if (ref && typeof ref.open === 'function') {
+        ref.open(exampleRooms);
+      } else if (ref?.$refs?.dialog && typeof ref.$refs.dialog.open === 'function') {
+        ref.$refs.dialog.open();
+      } else {
+        console.error('MultiChatDialog nicht bereit oder ohne open()');
+      }
+    },
+
     async fetchForums() {
       try {
         const res = await apiClient.get('/api/forum');
@@ -192,8 +210,6 @@ export default {
       // Datei erstellen und ans body anhängen
       const container = document.createElement('div');
       document.body.appendChild(container);
-      // Programmatisch ein neues App-Instance randomChatauen, mit Store, Router & i18n
-      this.$root.$refs.randomChatDialog.open(contact);
     },
 
     /**
@@ -211,7 +227,19 @@ export default {
 
       // 2) view → Dialog/Window
       if (item.view) {
-        this.$root.$refs[item.class].open();
+        const dialogRef = this.$root.$refs[item.class];
+        if (!dialogRef) {
+          console.error(`Dialog-Ref '${item.class}' nicht gefunden! Bitte prüfe Ref und Menü-Konfiguration.`);
+          return;
+        }
+        // Robust öffnen: erst open(), sonst auf inneres DialogWidget zurückgreifen
+        if (typeof dialogRef.open === 'function') {
+          dialogRef.open();
+        } else if (dialogRef.$refs?.dialog && typeof dialogRef.$refs.dialog.open === 'function') {
+          dialogRef.$refs.dialog.open();
+        } else {
+          console.error(`Dialog '${item.class}' gefunden, aber keine open()-Methode verfügbar.`);
+        }
         return;
       }
 
diff --git a/frontend/src/dialogues/auth/PasswordResetDialog.vue b/frontend/src/dialogues/auth/PasswordResetDialog.vue
index a4d15b6..8b99465 100644
--- a/frontend/src/dialogues/auth/PasswordResetDialog.vue
+++ b/frontend/src/dialogues/auth/PasswordResetDialog.vue
@@ -1,5 +1,5 @@
 <template>
-    <DialogWidget ref="dialog" title="passwordReset.title" :show-close=true :buttons="buttons" @close="closeDialog" name="PasswordReset">
+    <DialogWidget ref="dialog" title="passwordReset.title" :isTitleTranslated="true" :show-close=true :buttons="buttons" @close="closeDialog" @reset="resetPassword" name="PasswordReset">
         <div>
             <label>{{ $t("passwordReset.email") }} <input type="email" v-model="email" required /></label>
         </div>
@@ -18,7 +18,7 @@ export default {
     data() {
         return {
             email: '',
-            buttons: [{ text: this.$t("passwordReset.reset") }]
+            buttons: [{ text: 'passwordReset.reset', action: 'reset' }]
         };
     },
     methods: {
diff --git a/frontend/src/dialogues/chat/MultiChat.vue b/frontend/src/dialogues/chat/MultiChat.vue
new file mode 100644
index 0000000..bb076a9
--- /dev/null
+++ b/frontend/src/dialogues/chat/MultiChat.vue
@@ -0,0 +1,148 @@
+<template>
+  <DialogWidget ref="dialog" :title="$t('chat.multichat.title')" :modal="true" width="40em" height="32em" name="MultiChat">
+    <div class="multi-chat-top">
+      <select v-model="selectedRoom" class="room-select">
+        <option v-for="room in rooms" :key="room.id" :value="room.id">{{ room.title }}</option>
+      </select>
+      <div class="options-popdown">
+        <label>
+          <input type="checkbox" v-model="autoscroll" />
+          {{ $t('chat.multichat.autoscroll') }}
+        </label>
+        <!-- Weitere Optionen können hier ergänzt werden -->
+      </div>
+    </div>
+    <div class="multi-chat-output" ref="output" @mouseenter="mouseOverOutput = true" @mouseleave="mouseOverOutput = false">
+      <div v-for="msg in messages" :key="msg.id" class="chat-message">
+        <span class="user">{{ msg.user }}:</span> <span class="text">{{ msg.text }}</span>
+      </div>
+    </div>
+    <div class="multi-chat-input">
+  <input v-model="input" @keyup.enter="sendMessage" class="chat-input" :placeholder="$t('chat.multichat.placeholder')" />
+  <button @click="sendMessage" class="send-btn">{{ $t('chat.multichat.send') }}</button>
+  <button @click="shout" class="mini-btn">{{ $t('chat.multichat.shout') }}</button>
+  <button @click="action" class="mini-btn">{{ $t('chat.multichat.action') }}</button>
+  <button @click="roll" class="mini-btn">{{ $t('chat.multichat.roll') }}</button>
+    </div>
+  </DialogWidget>
+</template>
+
+<script>
+import DialogWidget from '@/components/DialogWidget.vue';
+
+export default {
+  name: 'MultiChat',
+  components: { DialogWidget },
+  data() {
+    return {
+      rooms: [],
+      selectedRoom: null,
+      autoscroll: true,
+      mouseOverOutput: false,
+      messages: [],
+      input: ''
+    };
+  },
+  watch: {
+    messages() {
+      this.$nextTick(this.handleAutoscroll);
+    },
+    autoscroll(val) {
+      if (val) this.handleAutoscroll();
+    }
+  },
+  methods: {
+    open(rooms = []) {
+      this.rooms = rooms;
+      this.selectedRoom = rooms.length ? rooms[0].id : null;
+      this.autoscroll = true;
+      this.messages = [];
+      this.input = '';
+      this.$refs.dialog.open();
+    },
+    handleAutoscroll() {
+      if (this.autoscroll && !this.mouseOverOutput) {
+        const out = this.$refs.output;
+        if (out) out.scrollTop = out.scrollHeight;
+      }
+    },
+    sendMessage() {
+      if (!this.input.trim()) return;
+      this.messages.push({ id: Date.now(), user: 'Ich', text: this.input });
+      this.input = '';
+    },
+    shout() {
+      // Schreien-Logik
+    },
+    action() {
+      // Aktion-Logik
+    },
+    roll() {
+      // Würfeln-Logik
+    }
+  }
+};
+</script>
+
+<style scoped>
+.multi-chat-top {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  margin-bottom: 0.5em;
+}
+.room-select {
+  min-width: 10em;
+}
+.options-popdown {
+  background: #f5f5f5;
+  border-radius: 4px;
+  padding: 0.3em 0.8em;
+  font-size: 0.95em;
+}
+.multi-chat-output {
+  background: #222;
+  color: #fff;
+  height: 16em;
+  overflow-y: auto;
+  margin-bottom: 0.5em;
+  padding: 0.7em;
+  border-radius: 4px;
+  font-size: 1em;
+}
+.chat-message {
+  margin-bottom: 0.3em;
+}
+.user {
+  font-weight: bold;
+  color: #90caf9;
+}
+.multi-chat-input {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+.chat-input {
+  flex: 1;
+  padding: 0.4em 0.7em;
+  border-radius: 3px;
+  border: 1px solid #bbb;
+}
+.send-btn {
+  padding: 0.3em 1.1em;
+  border-radius: 3px;
+  background: #1976d2;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+}
+.mini-btn {
+  padding: 0.2em 0.7em;
+  font-size: 0.95em;
+  border-radius: 3px;
+  background: #eee;
+  color: #333;
+  border: 1px solid #bbb;
+  cursor: pointer;
+}
+</style>
diff --git a/frontend/src/dialogues/chat/MultiChatDialog.vue b/frontend/src/dialogues/chat/MultiChatDialog.vue
new file mode 100644
index 0000000..094c7f4
--- /dev/null
+++ b/frontend/src/dialogues/chat/MultiChatDialog.vue
@@ -0,0 +1,1711 @@
+<template>
+    <DialogWidget ref="dialog" :title="$t('chat.multichat.title')" :modal="false" :show-close="true"
+        @close="onDialogClose" width="75vw" height="75vh" name="MultiChatDialog" icon="multichat24.png">
+        <div class="dialog-widget-content">
+            <div class="multi-chat-top">
+                <select v-model="selectedRoom" class="room-select">
+                    <option v-for="room in rooms" :key="room.id" :value="room.id">{{ room.title }}</option>
+                </select>
+                <div class="right-controls">
+                    <div class="status" :class="statusType">
+                        <span class="dot"></span>
+                        <span class="text">{{ statusText }}</span>
+                        <button v-if="statusType === 'error' || statusType === 'disconnected'" class="reconnect-btn"
+                            @click="connectChatSocket" type="button">↻</button>
+                    </div>
+                    <div class="options-dropdown-wrapper" ref="optionsWrap">
+                        <button class="options-btn" @click="onOptionsToggle" type="button">
+                            {{ $t('chat.multichat.options') }}
+                        </button>
+                        <div v-if="showOptions" class="options-dropdown">
+                            <label>
+                                <input type="checkbox" v-model="autoscroll" />
+                                {{ $t('chat.multichat.autoscroll') }}
+                            </label>
+                            <div class="opts-divider" v-if="isAdmin"></div>
+                            <div class="opts-row" v-if="isAdmin">
+                                <button class="opts-btn" type="button" @click="reloadRoomsAdmin">Räume neu laden</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div v-if="!showColorPicker" class="multi-chat-body">
+                <div class="multi-chat-output" ref="output" @mouseenter="mouseOverOutput = true"
+                    @mouseleave="mouseOverOutput = false">
+                    <div v-for="msg in messages" :key="msg.id" class="chat-message">
+                        <template v-if="msg.type === 'scream'">
+                            <span class="scream-line" :style="msg.color ? { color: msg.color } : null">
+                                <span class="user">{{ msg.user }}</span>
+                                <span class="scream-label"> schreit:</span>
+                                <span class="text"> {{ (msg.text || '').toUpperCase() }}</span>
+                            </span>
+                        </template>
+                        <template v-else-if="msg.type === 'action'">
+                            <span class="user" :style="msg.color ? { color: msg.color } : null">{{ msg.user }}</span>
+                            <span class="action-text">{{ msg.action }}</span>
+                            <span class="action-target" :style="msg.toColor ? { color: msg.toColor } : null">{{ msg.to
+                                }}</span>
+                        </template>
+                        <template v-else>
+                            <span class="user" :style="msg.color ? { color: msg.color } : null">{{ msg.user }}:</span>
+                            <span class="text">{{ msg.text }}</span>
+                        </template>
+                    </div>
+                </div>
+                <div class="user-list">
+                    <div class="user-list-header">Teilnehmer ({{ usersInRoom.length }})</div>
+                    <div class="user-list-items">
+                        <div class="user-list-item" v-for="u in usersInRoom" :key="u.name"
+                            :class="{ selected: selectedTargetUser === u.name }" @click="selectTargetUser(u.name)"
+                            title="Klicken zum Auswählen">
+                            <span class="user-dot"
+                                :style="{ backgroundColor: (u.color || userColors[u.name] || '#ccc') }"></span>
+                            <span class="user-name"
+                                :style="(u.color || userColors[u.name]) ? { color: (u.color || userColors[u.name]) } : null">{{
+                                u.name
+                                }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div v-if="!showColorPicker" class="multi-chat-input">
+                <input v-model="input" @keyup.enter="sendMessage" class="chat-input"
+                    :placeholder="$t('chat.multichat.placeholder')" />
+                <button @click="sendMessage" class="send-btn">{{ $t('chat.multichat.send') }}</button>
+                <img @click="shout" src="/images/icons/scream.png" class="icon-btn" alt="Schreien" title="Schreien" />
+                <img @click="action" src="/images/icons/activity.png" class="icon-btn"
+                    :class="{ disabled: !selectedTargetUser }" :alt="$t('chat.multichat.action')"
+                    :title="selectedTargetUser ? $t('chat.multichat.action_to', { to: selectedTargetUser }) : $t('chat.multichat.action_select_user')" />
+                <img @click="roll" src="/images/icons/dice24.png" class="icon-btn" alt="Würfeln" title="Würfeln" />
+                <img @click="openColorPicker" src="/images/icons/colorpicker.png" class="icon-btn"
+                    :alt="$t('chat.multichat.colorpicker')" :title="$t('chat.multichat.colorpicker')" />
+            </div>
+
+            <!-- Inline Color Picker Panel -->
+            <div v-else class="color-picker-panel">
+                <div class="picker-grid">
+                    <div class="picker-column">
+                        <div class="palette-wrap" @mousedown="onPaletteDown" @mousemove="onPaletteMove"
+                            @mouseup="onPaletteUp" @mouseleave="onPaletteUp">
+                            <canvas ref="paletteCanvas" :width="paletteWidth" :height="paletteHeight"></canvas>
+                            <div class="palette-marker" v-if="pickX !== null"
+                                :style="{ left: (pickX - 6) + 'px', top: (pickY - 6) + 'px' }"></div>
+                        </div>
+                    </div>
+                    <div class="picker-column">
+                        <div class="picker-row">
+                            <label class="picker-label">{{ $t('chat.multichat.hex') }}</label>
+                            <input class="hex-input" v-model="hexInput" @input="onHexInput" placeholder="#AABBCC" />
+                        </div>
+                        <div v-if="hexInvalid" class="picker-error">{{ $t('chat.multichat.invalid_hex') }}</div>
+                        <div class="picker-preview" :style="{ color: selectedColor }">
+                            {{ $t('chat.multichat.colorpicker_preview') }}
+                        </div>
+                        <div class="picker-sample" :style="{ background: selectedColor }"></div>
+                    </div>
+                </div>
+                <div class="picker-actions">
+                    <button class="btn" @click="onColorOk">{{ $t('chat.multichat.ok') }}</button>
+                    <button class="btn secondary" @click="onColorCancel">{{ $t('chat.multichat.cancel') }}</button>
+                </div>
+            </div>
+        </div>
+    </DialogWidget>
+</template>
+
+<script>
+import DialogWidget from '@/components/DialogWidget.vue';
+import { fetchPublicRooms } from '@/api/chatApi.js';
+import { mapGetters } from 'vuex';
+import { getChatWsUrl, getChatWsCandidates, getChatWsProtocols } from '@/services/chatWs.js';
+
+export default {
+    name: 'MultiChat',
+    components: { DialogWidget },
+    computed: {
+        ...mapGetters(['user', 'menu']),
+        isAdmin() {
+            // Infer admin via presence of administration section in menu (server filters by rights)
+            try {
+                return !!(this.menu && this.menu.administration);
+            } catch (_) { return false; }
+        }
+    },
+    mounted() {
+        // Reconnect when network returns
+    try { window.addEventListener('online', this.onOnline); } catch (_) { }
+    try { document.addEventListener('click', this.onGlobalClick); } catch (_) { }
+    },
+    beforeUnmount() {
+        // Safety: ensure connection is shut down on page/navigation leave
+        this.opened = false;
+        this.disconnectChatSocket();
+    try { window.removeEventListener('online', this.onOnline); } catch (_) { }
+    try { document.removeEventListener('click', this.onGlobalClick); } catch (_) { }
+    },
+    data() {
+        return {
+            rooms: [],
+            selectedRoom: null,
+            autoscroll: true,
+            mouseOverOutput: false,
+            messages: [],
+            usersInRoom: [],
+            selectedTargetUser: null,
+            userColors: {},
+            input: '',
+            showOptions: false,
+            debug: true,
+            chatSocket: null,
+            transportConnected: false,
+            chatConnected: false,
+            reconnectTimer: null,
+            opened: false,
+            statusType: 'idle',
+            statusText: '',
+            urlOverride: '',
+            token: null,
+            announcedRoomEnter: false,
+            showColorPicker: false,
+            selectedColor: '#000000',
+            lastColor: '#000000',
+            hexInput: '#000000',
+            hexInvalid: false,
+            // Palette state
+            paletteWidth: 420,
+            paletteHeight: 220,
+            pickX: null,
+            pickY: null,
+            isPicking: false,
+            maxLightness: 92, // exclude extremely light colors (>% L)
+            // Reconnect control
+            reconnectIntervalMs: 5000,
+            connectAttemptTimeout: null,
+            joinFallbackTimer: null,
+            // Faster handshake watchdog separate from reconnect interval
+            handshakeWatchdogMs: 2500,
+            // Rotate to next candidate if a connection never reaches 'open'
+            connectOpenTimer: null,
+            candidateOpenTimeoutMs: 900,
+            // Happy eyeballs state
+            connectRacing: false,
+            connectWinnerChosen: false,
+            pendingWs: [],
+            raceFailures: 0,
+            raceTotal: 0,
+            happyDelayMs: 40,
+            // Join fallback delay if token is slow to arrive
+            joinFallbackDelayMs: 120,
+            // Limit how many parallel WS candidates to race (prevents server socket buildup)
+            raceLimit: 3
+        };
+    },
+    // Hinweis: Öffnen erfolgt über methods.open(), damit Parent per Ref aufrufen kann
+    watch: {
+        messages() {
+            this.$nextTick(this.handleAutoscroll);
+        },
+        autoscroll(val) {
+            if (val) this.handleAutoscroll();
+        },
+        selectedRoom(newVal, oldVal) {
+            if (newVal && this.transportConnected) {
+                const room = this.getSelectedRoomName();
+                if (room) this.sendWithToken({ type: 'join', room, name: this.user?.username || '' });
+                this.messages = [];
+                this.usersInRoom = [];
+                this.selectedTargetUser = null;
+            }
+        }
+    },
+    methods: {
+        selectTargetUser(name) {
+            if (this.selectedTargetUser === name) {
+                this.selectedTargetUser = null; // toggle off
+            } else {
+                this.selectedTargetUser = name;
+            }
+        },
+        explainCloseCode(code) {
+            const map = {
+                1000: 'normal closure',
+                1001: 'going away (server down or browser nav)',
+                1002: 'protocol error (handshake or frames)',
+                1003: 'unsupported data',
+                1005: 'no status received (browser internal)',
+                1006: 'abnormal closure (network/TCP reset/firewall/CORS/TLS)',
+                1007: 'invalid payload data',
+                1008: 'policy violation (auth/permissions)',
+                1009: 'message too big',
+                1010: 'mandatory extension missing',
+                1011: 'internal server error',
+                1015: 'TLS handshake failure'
+            };
+            return map[code] || 'unknown reason';
+        },
+        // Wird extern aufgerufen um den Dialog zu öffnen
+        open(rooms) {
+            // Falls externe Räume übergeben wurden, nutzen; sonst vom Server laden
+            if (Array.isArray(rooms) && rooms.length) {
+                this.initializeRooms(rooms);
+            } else {
+                this.loadRooms();
+            }
+        },
+        onDialogClose() {
+            // Mark as closed first so any async close events won't schedule reconnect
+            this.opened = false;
+            console.log('[Chat WS] dialog close — closing websocket');
+            this.disconnectChatSocket();
+        },
+        onOptionsToggle(e) {
+            e?.stopPropagation?.();
+            this.showOptions = !this.showOptions;
+        },
+        onGlobalClick(e) {
+            if (!this.showOptions) return;
+            const wrap = this.$refs.optionsWrap;
+            if (wrap && wrap.contains(e.target)) return;
+            this.showOptions = false;
+        },
+        onOnline() {
+            if (this.opened && !this.chatConnected && !this.connectRacing && (!this.chatWs || this.chatWs.readyState !== WebSocket.OPEN)) {
+                console.log('[Chat WS] online — attempting reconnect');
+                this.connectChatSocket();
+            }
+        },
+        async loadRooms() {
+            try {
+                const data = await fetchPublicRooms();
+                this.initializeRooms(Array.isArray(data) ? data : []);
+            } catch (e) {
+                console.error('Fehler beim Laden der Räume', e);
+                this.initializeRooms([]);
+            }
+        },
+        async reloadRoomsAdmin() {
+            if (!this.isAdmin) return;
+            try {
+                const current = this.selectedRoom;
+                const data = await fetchPublicRooms();
+                const rooms = Array.isArray(data) ? data : [];
+                this.rooms = rooms;
+                if (!rooms.find(r => r.id === current)) {
+                    this.selectedRoom = rooms.length ? rooms[0].id : null;
+                }
+                this.messages.push({ id: Date.now(), user: 'System', text: 'Raumliste aktualisiert.' });
+            } catch (e) {
+                console.error('Fehler beim Neuladen der Räume', e);
+                this.messages.push({ id: Date.now(), user: 'System', text: 'Fehler beim Neuladen der Raumliste.' });
+            }
+        },
+        initializeRooms(rooms) {
+            this.rooms = rooms;
+            this.selectedRoom = rooms.length ? rooms[0].id : null;
+            this.autoscroll = true;
+            try { this.urlOverride = localStorage.getItem('chatWsOverride') || ''; } catch (_) { this.urlOverride = ''; }
+            this.messages = [];
+            this.usersInRoom = [];
+            this.selectedTargetUser = null;
+            this.input = '';
+            this.showOptions = false;
+            this.announcedRoomEnter = false;
+            this.$refs.dialog.open();
+            // Stelle die WS-Verbindung her, wenn der Dialog geöffnet wird
+            this.opened = true;
+            this.connectChatSocket();
+        },
+        connectChatSocket() {
+            if (this.connectRacing) return; // avoid overlapping races
+            try { this.chatWs?.close(1000, 'reconnect'); } catch (_) { }
+            this.chatWs = null;
+            this.wsUrl = getChatWsUrl();
+            // bump attempt counter for cache-busting
+            this._wsAttempt = (this._wsAttempt || 0) + 1;
+            const pageProto = (typeof window !== 'undefined' ? window.location.protocol : '');
+            const candidates = getChatWsCandidates();
+            console.log('[Chat WS] connect attempts', candidates, '| page protocol:', pageProto);
+            if (pageProto === 'https:' && this.wsUrl.startsWith('ws://')) {
+                console.warn('[Chat WS] insecure WS on HTTPS page — use wss:// or set VITE_CHAT_WS_URL');
+            }
+            this.setStatus('connecting');
+            // Race candidates in parallel (happy eyeballs) so the first to open wins
+            this.startHappyEyeballs(candidates);
+            this.token = null;
+            this.pending = [];
+            this.transportConnected = false;
+            this.chatConnected = false;
+            this.announcedRoomEnter = false;
+            this.wsStartAt = Date.now();
+        },
+        // Append a cache-busting query parameter per attempt to avoid stale routing/caches
+        bustUrl(url) {
+            try {
+                const u = new URL(url, (typeof window !== 'undefined') ? window.location.href : 'http://localhost');
+                u.searchParams.set('cb', `${Date.now()}-${this._wsAttempt || 0}`);
+                return u.toString();
+            } catch (_) {
+                const sep = url.includes('?') ? '&' : '?';
+                return `${url}${sep}cb=${Date.now()}-${this._wsAttempt || 0}`;
+            }
+        },
+        // Start parallel connection attempts; the first to open wins
+        startHappyEyeballs(candidates) {
+            if (!this.opened) return;
+            this.cleanupPendingSockets();
+            this.connectRacing = true;
+            this.connectWinnerChosen = false;
+            this.raceFailures = 0;
+            const limited = Array.isArray(candidates) ? candidates.slice(0, this.getRaceLimit()) : [];
+            this.raceTotal = limited.length;
+            if (!Array.isArray(candidates) || !candidates.length) {
+                console.warn('[Chat WS] no candidates to try');
+                this.scheduleReconnect();
+                return;
+            }
+            const protocols = getChatWsProtocols();
+            this.pendingWs = [];
+            const delay = this.happyDelayMs || 120;
+            limited.forEach((url, i) => {
+                const t = setTimeout(() => {
+                    // spawn a candidate
+                    this.spawnCandidate(this.bustUrl(url), protocols);
+                }, i * delay);
+                // track starter timers to be safe (optional)
+                this.pendingWs.push({ starterTimer: t, url, ws: null, openTimer: null });
+            });
+        },
+        getRaceLimit() {
+            try {
+                const ls = localStorage.getItem('chatWsRaceMax');
+                const n = parseInt(ls, 10);
+                if (!isNaN(n) && n > 0) return Math.min(n, 6);
+            } catch (_) { }
+            return this.raceLimit || 3;
+        },
+        spawnCandidate(url, protocols) {
+            if (!this.opened) return;
+            let rec = this.pendingWs.find(r => r.url === url && r.ws === null);
+            try {
+                const ws = protocols ? new WebSocket(url, protocols) : new WebSocket(url);
+                if (!rec) { rec = { url, starterTimer: null, ws: null, openTimer: null }; this.pendingWs.push(rec); }
+                rec.ws = ws;
+                const startAt = Date.now();
+                console.log('[Chat WS] racing', url, '| protocols:', protocols || '(none)');
+                // If this socket never opens fast, let another win
+        rec.openTimer = setTimeout(() => {
+                    if (!this.connectWinnerChosen && ws.readyState === WebSocket.CONNECTING) {
+                        console.warn('[Chat WS] candidate handshake timeout — closing to let others win:', url);
+            try { ws.close(1000, 'race timeout'); } catch (_) { }
+                    }
+                }, this.candidateOpenTimeoutMs);
+                ws.addEventListener('open', () => {
+                    const dt = Date.now() - startAt;
+                    if (this.connectWinnerChosen) {
+                        // Someone already won; close this one quietly
+                        try { ws.close(); } catch (_) { }
+                        return;
+                    }
+                    // Winner selection
+                    this.connectWinnerChosen = true;
+                    this.connectRacing = false;
+                    this.wsUrl = url;
+                    this.chatWs = ws;
+                    this.transportConnected = true;
+                    console.log('[Chat WS] open in', dt, 'ms', '| protocol:', ws.protocol || '(none)', '| url:', url);
+                    // Close all other candidates
+            this.pendingWs.forEach(r => {
+                        if (r.ws && r.ws !== ws) {
+                try { r.ws.close(1000, 'race loser'); } catch (_) { }
+                r.ws = null;
+                        }
+                        if (r.openTimer) { clearTimeout(r.openTimer); r.openTimer = null; }
+                        if (r.starterTimer) { clearTimeout(r.starterTimer); r.starterTimer = null; }
+                    });
+            // Drop references to losers so GC can collect
+            this.pendingWs = [];
+                    // Prepare handshake like before
+                    const init = { type: 'init', name: this.user?.username || '', room: this.getSelectedRoomName() || '' };
+                    if (this.debug) console.log('[Chat WS >>]', init);
+                    this.wsSend(init);
+                    if (this.connectAttemptTimeout) clearTimeout(this.connectAttemptTimeout);
+                    this.connectAttemptTimeout = setTimeout(() => {
+                        this.connectAttemptTimeout = null;
+                        if (this.opened && !this.chatConnected) {
+                            console.warn('[Chat WS] handshake watchdog fired — no room_entered within', this.handshakeWatchdogMs, 'ms');
+                            this.scheduleReconnect();
+                        }
+                    }, this.handshakeWatchdogMs);
+                    if (this.joinFallbackTimer) { clearTimeout(this.joinFallbackTimer); this.joinFallbackTimer = null; }
+                    // Attach message/error/close for the winner
+                    ws.addEventListener('message', (ev) => {
+                        const data = ev.data;
+                        if (this.debug) console.log('[Chat WS << RAW]', data);
+                        this.wsProcessChunk(typeof data === 'string' ? data : '');
+                    });
+                    ws.addEventListener('error', (e) => {
+                        console.warn('[Chat WS] error on winner | readyState:', ws.readyState, '| url:', url, e);
+                        this.setStatus('error');
+                    });
+                    ws.addEventListener('close', (e) => {
+                        const hint = this.explainCloseCode(e.code);
+                        console.warn('[Chat WS] close | code:', e.code, hint, '| reason:', e.reason, '| wasClean:', e.wasClean, '| url:', url);
+                        if (this.connectAttemptTimeout) { clearTimeout(this.connectAttemptTimeout); this.connectAttemptTimeout = null; }
+                        if (this.joinFallbackTimer) { clearTimeout(this.joinFallbackTimer); this.joinFallbackTimer = null; }
+                        this.transportConnected = false;
+                        this.chatConnected = false;
+                        this.setStatus('disconnected');
+                        if (this.opened) this.scheduleReconnect();
+                    });
+                });
+                // For non-winners: count failures so we can retry if none succeed
+                const onFail = (label) => {
+                    if (!this.connectRacing || this.connectWinnerChosen) return;
+                    this.raceFailures = (this.raceFailures || 0) + 1;
+                    const dt = Date.now() - startAt;
+                    console.warn('[Chat WS] candidate', label, 'after', dt, 'ms | url:', url);
+                    if (rec && rec.openTimer) { clearTimeout(rec.openTimer); rec.openTimer = null; }
+                    if (rec && rec.ws) { try { rec.ws.close(1000, 'race fail'); } catch (_) {} rec.ws = null; }
+                    if (this.raceFailures >= this.raceTotal) {
+                        // All failed
+                        this.connectRacing = false;
+                        if (this.opened && !this.chatConnected) this.scheduleReconnect();
+                    }
+                };
+                ws.addEventListener('error', () => onFail('error'));
+                ws.addEventListener('close', () => onFail('close'));
+            } catch (e) {
+                console.warn('[Chat WS] spawn failed for', url, e);
+            }
+        },
+        cleanupPendingSockets() {
+            if (!this.pendingWs) this.pendingWs = [];
+            this.connectRacing = false;
+            this.connectWinnerChosen = false;
+            try {
+                this.pendingWs.forEach(r => {
+                    if (r.starterTimer) { clearTimeout(r.starterTimer); r.starterTimer = null; }
+                    if (r.openTimer) { clearTimeout(r.openTimer); r.openTimer = null; }
+                    if (r.ws) {
+                        try { r.ws.close(1000, 'cleanup'); } catch (_) { }
+                        r.ws = null;
+                    }
+                });
+            } catch (_) { }
+            this.pendingWs = [];
+        },
+        tryNextCandidate(candidates, index) {
+            if (!this.opened) return;
+            if (index >= candidates.length) {
+                console.warn('[Chat WS] all candidates failed');
+                if (this.opened && !this.chatConnected) this.scheduleReconnect();
+                return;
+            }
+            const url = this.bustUrl(candidates[index]);
+            const protocols = getChatWsProtocols();
+            this.wsUrl = url;
+            console.log('[Chat WS] trying', url, `(candidate ${index + 1}/${candidates.length})`, '| protocols:', protocols || '(none)');
+            try { this.chatWs?.close(1000, 'switch candidate'); } catch (_) { }
+            if (this.connectOpenTimer) { clearTimeout(this.connectOpenTimer); this.connectOpenTimer = null; }
+            const ws = protocols ? new WebSocket(url, protocols) : new WebSocket(url);
+            this.chatWs = ws;
+            this.wsStartAt = Date.now();
+            // If the socket never opens within a short time, assume this candidate is bad and try next
+            this.connectOpenTimer = setTimeout(() => {
+                this.connectOpenTimer = null;
+                if (ws.readyState === WebSocket.CONNECTING && !this.transportConnected) {
+                    console.warn('[Chat WS] candidate handshake timeout — closing to try next:', url);
+                    try { ws.close(1000, 'candidate timeout'); } catch (_) { }
+                }
+            }, this.candidateOpenTimeoutMs);
+            ws.addEventListener('open', () => {
+                this.transportConnected = true;
+                const dt = Date.now() - (this.wsStartAt || Date.now());
+                console.log('[Chat WS] open in', dt, 'ms', '| protocol:', ws.protocol || '(none)', '| url:', url);
+                const init = { type: 'init', name: this.user?.username || '', room: this.getSelectedRoomName() || '' };
+                if (this.debug) console.log('[Chat WS >>]', init);
+                this.wsSend(init);
+                if (this.connectOpenTimer) { clearTimeout(this.connectOpenTimer); this.connectOpenTimer = null; }
+                if (this.connectAttemptTimeout) clearTimeout(this.connectAttemptTimeout);
+                this.connectAttemptTimeout = setTimeout(() => {
+                    this.connectAttemptTimeout = null;
+                    if (this.opened && !this.chatConnected) {
+                        console.warn('[Chat WS] handshake watchdog fired — no room_entered within', this.handshakeWatchdogMs, 'ms');
+                        this.scheduleReconnect();
+                    }
+                }, this.handshakeWatchdogMs);
+                // No extra join here; init already included the room
+                if (this.joinFallbackTimer) { clearTimeout(this.joinFallbackTimer); this.joinFallbackTimer = null; }
+            });
+            ws.addEventListener('message', (ev) => {
+                const data = ev.data;
+                if (this.debug) console.log('[Chat WS << RAW]', data);
+                this.wsProcessChunk(typeof data === 'string' ? data : '');
+            });
+            ws.addEventListener('error', (e) => {
+                const dt = Date.now() - (this.wsStartAt || Date.now());
+                console.warn('[Chat WS] error after', dt, 'ms', '| readyState:', ws.readyState, '| url:', url, e);
+                this.setStatus('error');
+            });
+            ws.addEventListener('close', (e) => {
+                const dt = Date.now() - (this.wsStartAt || Date.now());
+                const hint = this.explainCloseCode(e.code);
+                console.warn('[Chat WS] close after', dt, 'ms', '| code:', e.code, hint, '| reason:', e.reason, '| wasClean:', e.wasClean, '| url:', url);
+                if (this.connectOpenTimer) { clearTimeout(this.connectOpenTimer); this.connectOpenTimer = null; }
+                if (this.connectAttemptTimeout) { clearTimeout(this.connectAttemptTimeout); this.connectAttemptTimeout = null; }
+                if (this.joinFallbackTimer) { clearTimeout(this.joinFallbackTimer); this.joinFallbackTimer = null; }
+                if (!this.transportConnected) {
+                    // This candidate never opened; try the next one immediately
+                    this.tryNextCandidate(candidates, index + 1);
+                    return;
+                }
+                this.transportConnected = false;
+                this.chatConnected = false;
+                this.setStatus('disconnected');
+                if (this.opened) this.scheduleReconnect();
+            });
+            // Handshake watchdog is started upon successful open (after init sent)
+        },
+        scheduleReconnect() {
+            if (this.reconnectTimer) return;
+            console.log('[Chat WS] scheduleReconnect in', this.reconnectIntervalMs, 'ms', '| opened:', this.opened);
+            this.reconnectTimer = setTimeout(() => {
+                this.reconnectTimer = null;
+                if (this.opened && !this.chatConnected) {
+                    this.connectChatSocket();
+                }
+            }, this.reconnectIntervalMs);
+        },
+        applyUrlOverride() {
+            try {
+                const val = (this.urlOverride || '').trim();
+                if (val) localStorage.setItem('chatWsOverride', val); else localStorage.removeItem('chatWsOverride');
+            } catch (_) { }
+            console.log('[Chat WS] url override applied', this.urlOverride || '(cleared)');
+            if (this.opened) this.connectChatSocket();
+        },
+        clearUrlOverride() {
+            this.urlOverride = '';
+            this.applyUrlOverride();
+        },
+        disconnectChatSocket() {
+            if (this.reconnectTimer) {
+                clearTimeout(this.reconnectTimer);
+                this.reconnectTimer = null;
+            }
+            this.cleanupPendingSockets();
+            if (this.connectOpenTimer) { clearTimeout(this.connectOpenTimer); this.connectOpenTimer = null; }
+            if (this.connectAttemptTimeout) { clearTimeout(this.connectAttemptTimeout); this.connectAttemptTimeout = null; }
+            if (this.joinFallbackTimer) { clearTimeout(this.joinFallbackTimer); this.joinFallbackTimer = null; }
+            try {
+                if (this.chatWs) {
+                    if (this.chatWs.readyState === WebSocket.OPEN) {
+                        this.chatWs.close(1000, 'dialog closed');
+                    } else if (this.chatWs.readyState === WebSocket.CONNECTING) {
+                        this.chatWs.close(1000, 'dialog closed');
+                    }
+                }
+            } catch (_) { }
+            this.chatWs = null;
+            this.chatConnected = false;
+            this.announcedRoomEnter = false;
+            this.usersInRoom = [];
+            this.selectedTargetUser = null;
+        },
+        getSelectedRoomName() {
+            const r = this.rooms.find(x => x.id === this.selectedRoom);
+            return r?.title || r?.name || '';
+        },
+        handleIncoming(msg) {
+            if (!msg) return;
+            if (msg.type === 'message' || msg.type === 4) {
+                // Some servers echo sender messages without userName but include token
+                const isSelfByToken = !!(msg.token && this.token && msg.token === this.token);
+                const user = msg.userName || msg.from || (isSelfByToken ? (this.user?.username || 'User') : 'User');
+                let color = null;
+                if (msg.color) {
+                    color = ('' + msg.color).trim();
+                    if (color && !color.startsWith('#')) color = '#' + color;
+                    this.userColors[user] = color;
+                } else if (this.userColors[user]) {
+                    color = this.userColors[user];
+                }
+                const displayUser = (this.user?.username && user === this.user.username) ? 'ich' : user;
+                this.messages.push({ id: msg.id || Date.now(), user: displayUser, text: msg.message || msg.text || '', color });
+            } else if (msg.type === 6 || msg.type === 'scream') {
+                // Schreien: <user> SCHREIT: <text>
+                const user = msg.userName || msg.from || 'User';
+                let color = null;
+                if (msg.color) {
+                    color = ('' + msg.color).trim();
+                    if (color && !color.startsWith('#')) color = '#' + color;
+                    this.userColors[user] = color;
+                } else if (this.userColors[user]) {
+                    color = this.userColors[user];
+                }
+                this.messages.push({
+                    id: msg.id || Date.now(),
+                    user,
+                    text: (msg.message || msg.text || ''),
+                    color,
+                    type: 'scream'
+                });
+            } else if (msg.type === 'system') {
+                // Nur gezielte Systemmeldungen anzeigen
+                if (msg.code === 'room_entered' || msg.tr === 'room_entered') {
+                    // Verbunden-Status setzen
+                    this.chatConnected = true;
+                    this.setStatus('connected');
+                    if (this.connectAttemptTimeout) { clearTimeout(this.connectAttemptTimeout); this.connectAttemptTimeout = null; }
+                    if (this.joinFallbackTimer) { clearTimeout(this.joinFallbackTimer); this.joinFallbackTimer = null; }
+                    // Eigene Beitrittsmeldung einmalig mit Raumname anzeigen
+                    if (!this.announcedRoomEnter) {
+                        const room = msg.to || msg.room || msg.roomName || this.getSelectedRoomName();
+                        if (room) {
+                            const text = this.$t('chat.multichat.system.room_entered', { room });
+                            this.messages.push({ id: msg.id || Date.now(), user: 'System', text });
+                        }
+                        this.announcedRoomEnter = true;
+                    }
+                    return;
+                }
+                // Color changes
+                if (msg.code === 'color_changed') {
+                    // Server schickt die gültige Farbe zurück – diese verwenden
+                    let color = (msg.color || '').trim();
+                    if (color && !color.startsWith('#')) color = '#' + color;
+                    if (!color) color = '#000000';
+                    // UI-Infozeile
+                    const text = this.$t('chat.multichat.system.color_changed_self', { color });
+                    this.messages.push({ id: msg.id || Date.now(), user: 'System', text });
+                    // Lokalen Zustand aktualisieren, damit künftige Aktionen dieselbe Farbe anzeigen
+                    this.lastColor = color;
+                    if (this.user?.username) {
+                        this.userColors[this.user.username] = color;
+                    }
+                    if (this.showColorPicker) {
+                        this.selectedColor = color;
+                        this.hexInput = color;
+                        // Marker position grob anpassen
+                        try {
+                            const hsl = this.hexToHsl(color);
+                            this.pickX = Math.round((hsl.h / 360) * (this.paletteWidth - 1));
+                            this.pickY = Math.round(((100 - hsl.l) / 100) * (this.paletteHeight - 1));
+                        } catch (_) { }
+                    }
+                    return;
+                }
+                if (msg.code === 'user_color_changed') {
+                    let color = (msg.color || '').trim();
+                    if (color && !color.startsWith('#')) color = '#' + color;
+                    if (!color) color = '#000000';
+                    const user = msg.userName || 'User';
+                    const text = this.$t('chat.multichat.system.color_changed_user', { user, color });
+                    this.messages.push({ id: msg.id || Date.now(), user: 'System', text });
+                    // Cache für künftige Messages
+                    this.userColors[user] = color;
+                    // Auch Liste rechts aktualisieren
+                    const idx = this.usersInRoom.findIndex(u => u.name === user);
+                    if (idx >= 0) {
+                        const updated = { ...this.usersInRoom[idx], color };
+                        // Vue 3 reactivity: direct assignment is fine
+                        this.usersInRoom.splice(idx, 1, updated);
+                    }
+                    return;
+                }
+            }
+        },
+        setStatus(type) {
+            this.statusType = type;
+            const t = this.$t;
+            switch (type) {
+                case 'connecting':
+                    this.statusText = t('chat.multichat.status.connecting');
+                    break;
+                case 'connected':
+                    this.statusText = t('chat.multichat.status.connected');
+                    break;
+                case 'disconnected':
+                    this.statusText = t('chat.multichat.status.disconnected');
+                    break;
+                case 'error':
+                    this.statusText = t('chat.multichat.status.error');
+                    break;
+                default:
+                    this.statusText = '';
+            }
+        },
+        handleAutoscroll() {
+            if (this.autoscroll && !this.mouseOverOutput) {
+                const out = this.$refs.output;
+                if (out) out.scrollTop = out.scrollHeight;
+            }
+        },
+        sendMessage() {
+            if (!this.input.trim()) return;
+            const payload = { type: 'message', message: this.input };
+            if (this.debug) console.log('[Chat WS >>]', payload);
+            this.sendWithToken(payload);
+            this.input = '';
+        },
+        shout() {
+            if (!this.input.trim()) return;
+            const payload = { type: 'scream', message: this.input };
+            if (this.debug) console.log('[Chat WS >>]', payload);
+            this.sendWithToken(payload);
+            this.input = '';
+        },
+        action() {
+            if (!this.input.trim()) return;
+            if (!this.selectedTargetUser) return; // Nur mit Auswahl
+            const payload = { type: 'do', value: this.input, to: this.selectedTargetUser };
+            if (this.debug) console.log('[Chat WS >>]', payload);
+            this.sendWithToken(payload);
+            this.input = '';
+        },
+        roll() {
+            const payload = { type: 'dice', message: '' };
+            if (this.debug) console.log('[Chat WS >>]', payload);
+            this.sendWithToken(payload);
+        },
+        openColorPicker() {
+            this.selectedColor = this.lastColor || '#000000';
+            this.hexInput = this.selectedColor;
+            this.showColorPicker = true;
+            this.$nextTick(() => {
+                this.drawPalette();
+                // Initialize marker roughly by hue (x) and lightness (y)
+                let hsl = this.hexToHsl(this.selectedColor);
+                if (hsl.l > this.maxLightness) {
+                    hsl = { ...hsl, l: this.maxLightness };
+                    const clampedHex = this.hslToHex(hsl.h, 100, hsl.l);
+                    this.selectedColor = clampedHex;
+                    this.hexInput = clampedHex;
+                }
+                this.pickX = Math.round((hsl.h / 360) * (this.paletteWidth - 1));
+                this.pickY = Math.round(((100 - hsl.l) / 100) * (this.paletteHeight - 1));
+            });
+        },
+        onColorOk() {
+            const color = this.selectedColor;
+            if (color) {
+                const payload = { type: 'color', value: color };
+                if (this.debug) console.log('[Chat WS >>]', payload);
+                this.sendWithToken(payload);
+                this.lastColor = color;
+            }
+            this.showColorPicker = false;
+        },
+        onColorCancel() {
+            this.showColorPicker = false;
+        },
+        onHexInput() {
+            const val = (this.hexInput || '').trim();
+            const hex = this.normalizeHex(val);
+            if (!hex) {
+                this.hexInvalid = true;
+                return;
+            }
+            this.hexInvalid = false;
+            let hsl = this.hexToHsl(hex);
+            if (hsl.l > this.maxLightness) {
+                hsl = { ...hsl, l: this.maxLightness };
+                const clamped = this.hslToHex(hsl.h, 100, hsl.l);
+                this.selectedColor = clamped;
+                this.hexInput = clamped;
+            } else {
+                this.selectedColor = hex;
+            }
+            this.pickX = Math.round((hsl.h / 360) * (this.paletteWidth - 1));
+            this.pickY = Math.round(((100 - hsl.l) / 100) * (this.paletteHeight - 1));
+        },
+        // Palette drawing: x -> hue(0..360), y -> lightness(100..0), saturation fixed 100%
+        drawPalette() {
+            const canvas = this.$refs.paletteCanvas;
+            if (!canvas) return;
+            const ctx = canvas.getContext('2d');
+            const w = this.paletteWidth, h = this.paletteHeight;
+            const img = ctx.createImageData(w, h);
+            let i = 0;
+            for (let y = 0; y < h; y++) {
+                const l = 100 - (y / (h - 1)) * 100; // 100..0
+                for (let x = 0; x < w; x++) {
+                    const hue = (x / (w - 1)) * 360;
+                    const rgb = this.hslToRgb(hue, 100, l);
+                    img.data[i++] = rgb.r;
+                    img.data[i++] = rgb.g;
+                    img.data[i++] = rgb.b;
+                    img.data[i++] = 255;
+                }
+            }
+            ctx.putImageData(img, 0, 0);
+            // Overlay the excluded too-light region at the top
+            const yLimit = Math.round(((100 - this.maxLightness) / 100) * (h - 1));
+            if (yLimit > 0) {
+                ctx.fillStyle = 'rgba(255,255,255,0.5)';
+                ctx.fillRect(0, 0, w, yLimit);
+                // Optional: boundary line
+                ctx.strokeStyle = 'rgba(0,0,0,0.2)';
+                ctx.beginPath();
+                ctx.moveTo(0, yLimit + 0.5);
+                ctx.lineTo(w, yLimit + 0.5);
+                ctx.stroke();
+            }
+        },
+        onPaletteDown(e) {
+            this.isPicking = true;
+            this.pickFromEvent(e);
+        },
+        onPaletteMove(e) {
+            if (!this.isPicking) return;
+            this.pickFromEvent(e);
+        },
+        onPaletteUp() {
+            this.isPicking = false;
+        },
+        pickFromEvent(e) {
+            const rect = this.$refs.paletteCanvas.getBoundingClientRect();
+            let x = Math.round(e.clientX - rect.left);
+            let y = Math.round(e.clientY - rect.top);
+            x = Math.max(0, Math.min(this.paletteWidth - 1, x));
+            y = Math.max(0, Math.min(this.paletteHeight - 1, y));
+            let hue = (x / (this.paletteWidth - 1)) * 360;
+            let l = 100 - (y / (this.paletteHeight - 1)) * 100;
+            if (l > this.maxLightness) {
+                l = this.maxLightness;
+                // recompute y aligned with clamped l
+                y = Math.round(((100 - l) / 100) * (this.paletteHeight - 1));
+            }
+            this.pickX = x; this.pickY = y;
+            const hex = this.hslToHex(hue, 100, l);
+            this.selectedColor = hex;
+            this.hexInput = hex;
+            this.hexInvalid = false;
+        },
+        normalizeHex(val) {
+            let v = val.startsWith('#') ? val.slice(1) : val;
+            if (v.length === 3 && /^[0-9a-fA-F]{3}$/.test(v)) {
+                v = v.split('').map(ch => ch + ch).join('');
+            }
+            if (/^[0-9a-fA-F]{6}$/.test(v)) {
+                return '#' + v.toUpperCase();
+            }
+            return null;
+        },
+        hexToHsl(hex) {
+            const rgb = this.hexToRgb(hex);
+            return this.rgbToHsl(rgb.r, rgb.g, rgb.b);
+        },
+        hslToHex(h, s, l) {
+            const rgb = this.hslToRgb(h, s, l);
+            return this.rgbToHex(rgb.r, rgb.g, rgb.b);
+        },
+        hexToRgb(hex) {
+            const m = /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/.exec(hex);
+            const r = parseInt(m[1], 16);
+            const g = parseInt(m[2], 16);
+            const b = parseInt(m[3], 16);
+            return { r, g, b };
+        },
+        rgbToHex(r, g, b) {
+            const toHex = (n) => n.toString(16).padStart(2, '0');
+            return '#' + toHex(r) + toHex(g) + toHex(b);
+        },
+        rgbToHsl(r, g, b) {
+            r /= 255; g /= 255; b /= 255;
+            const max = Math.max(r, g, b), min = Math.min(r, g, b);
+            let h, s, l = (max + min) / 2;
+            if (max === min) {
+                h = s = 0;
+            } else {
+                const d = max - min;
+                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+                switch (max) {
+                    case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+                    case g: h = (b - r) / d + 2; break;
+                    case b: h = (r - g) / d + 4; break;
+                }
+                h *= 60;
+            }
+            return { h: Math.round(h || 0), s: Math.round(s * 100), l: Math.round(l * 100) };
+        },
+        hslToRgb(h, s, l) {
+            s /= 100; l /= 100;
+            const c = (1 - Math.abs(2 * l - 1)) * s;
+            const x = c * (1 - Math.abs((h / 60) % 2 - 1));
+            const m = l - c / 2;
+            let r1 = 0, g1 = 0, b1 = 0;
+            if (0 <= h && h < 60) { r1 = c; g1 = x; b1 = 0; }
+            else if (60 <= h && h < 120) { r1 = x; g1 = c; b1 = 0; }
+            else if (120 <= h && h < 180) { r1 = 0; g1 = c; b1 = x; }
+            else if (180 <= h && h < 240) { r1 = 0; g1 = x; b1 = c; }
+            else if (240 <= h && h < 300) { r1 = x; g1 = 0; b1 = c; }
+            else { r1 = c; g1 = 0; b1 = x; }
+            const r = Math.round((r1 + m) * 255);
+            const g = Math.round((g1 + m) * 255);
+            const b = Math.round((b1 + m) * 255);
+            return { r, g, b };
+        },
+
+        // utility methods for WebSocket protocol
+        wsSend(obj) {
+            try {
+                const s = JSON.stringify(obj);
+                if (this.debug) console.log('[Chat WS >> RAW]', s);
+                this.chatWs?.send(s);
+            } catch (_) { }
+        },
+        sendWithToken(obj) {
+            if (this.token) {
+                obj.token = this.token;
+                this.wsSend(obj);
+            } else {
+                this.pending.push(() => this.sendWithToken(obj));
+            }
+        },
+        flushPending() {
+            const arr = this.pending; this.pending = [];
+            arr.forEach(fn => { try { fn(); } catch (_) { } });
+        },
+        wsProcessChunk(text) {
+            const parts = this.safeSplitJson(text);
+            for (const p of parts) {
+                try {
+                    const obj = JSON.parse(p);
+                    this.onWsObject(obj);
+                } catch (_) {
+                    this.handleIncoming({ type: 'system', text: p });
+                }
+            }
+        },
+        safeSplitJson(str) {
+            if (!str) return [];
+            const trimmed = str.trim();
+            if (trimmed.startsWith('{') && trimmed.endsWith('}')) return [trimmed];
+            const arr = str.split('}{');
+            if (arr.length === 1) return [str];
+            return arr.map((seg, i) => (i === 0 ? seg + '}' : (i === arr.length - 1 ? '{' + seg : '{' + seg + '}')));
+        },
+        onWsObject(obj) {
+            if (!obj) return;
+            // Token handshake: only when explicitly marked as token-type
+            if (obj.type === 'token' || obj.type === 1) {
+                let tok = obj.token;
+                if (!tok) {
+                    if (typeof obj.message === 'string') tok = obj.message;
+                    else if (obj.message && typeof obj.message === 'object') tok = obj.message.token;
+                }
+                if (tok) {
+                    this.token = tok;
+                    // No extra join here; we already sent init with room
+                    if (this.joinFallbackTimer) { clearTimeout(this.joinFallbackTimer); this.joinFallbackTimer = null; }
+                    this.flushPending();
+                }
+                return;
+            }
+            // Type 7: user action (message is a JSON string with { action, to, tr })
+            if (obj.type === 7) {
+                const from = (obj.userName || obj.user || obj.name || '').toString();
+                let fromColor = obj.color ? ('' + obj.color).trim() : null;
+                if (fromColor && !fromColor.startsWith('#')) fromColor = '#' + fromColor;
+                let act = '', to = '';
+                try {
+                    const payload = typeof obj.message === 'string' ? JSON.parse(obj.message) : obj.message;
+                    if (payload && typeof payload === 'object') {
+                        act = (payload.action || '').toString().trim();
+                        to = (payload.to || '').toString().trim();
+                    } else if (typeof payload === 'string') {
+                        // if server ever sends plain string, best-effort: first word action, rest to
+                        const parts = payload.trim().split(/\s+/);
+                        act = parts.shift() || '';
+                        to = parts.join(' ');
+                    }
+                } catch (_) {
+                    // ignore parse errors; will fallback below if needed
+                }
+                const toColor = this.userColors[to] || null;
+                const senderColor = fromColor || this.userColors[from] || null;
+                if (from && act) {
+                    if (from && fromColor) this.userColors[from] = fromColor; // cache sender color
+                    this.messages.push({
+                        id: obj.id || Date.now(),
+                        type: 'action',
+                        user: from,
+                        action: act,
+                        to,
+                        color: senderColor,
+                        toColor
+                    });
+                    return;
+                }
+                // fallback: show as plain message
+                const fallbackText = (typeof obj.message === 'string') ? obj.message : JSON.stringify(obj.message || {});
+                this.handleIncoming({ type: 'message', message: fallbackText, userName: from, color: senderColor });
+                return;
+            }
+            // Type 2: user list in room
+            if (obj.type === 2) {
+                const list = Array.isArray(obj.message) ? obj.message : (Array.isArray(obj.users) ? obj.users : []);
+                const byName = new Map();
+                for (const it of list) {
+                    if (it && typeof it === 'object') {
+                        const name = it.userName || it.name || it.username || '';
+                        if (!name) continue;
+                        let color = (it.color || '').toString().trim();
+                        if (color && !color.startsWith('#')) color = '#' + color;
+                        byName.set(name, { name, color: color || null });
+                        // Cache known colors for messages
+                        if (color) this.userColors[name] = color;
+                    }
+                }
+                this.usersInRoom = Array.from(byName.values()).sort((a, b) => a.name.localeCompare(b.name, 'de'));
+                // Auswahl behalten, falls User noch existiert; sonst löschen
+                if (this.selectedTargetUser && !byName.has(this.selectedTargetUser)) {
+                    this.selectedTargetUser = null;
+                }
+                return;
+            }
+            if (obj.type === 3 && Array.isArray(obj.message)) {
+                const names = obj.message.map(r => r.name).filter(Boolean).join(', ');
+                this.handleIncoming({ type: 'system', text: names ? `Rooms: ${names}` : 'Rooms updated' });
+                return;
+            }
+            if (obj.type === 5) {
+                const msg = obj.message;
+                if (typeof msg === 'string') {
+                    // Some servers send a JSON-encoded string here; parse if it looks like JSON
+                    const s = msg.trim();
+                    if (s.startsWith('{') && s.endsWith('}')) {
+                        try {
+                            const jm = JSON.parse(s);
+                            const tr = jm.tr || jm.code || '';
+                            if (tr === 'user_entered_room' || tr === 'user_entered_chat') {
+                                const who = obj.userName || obj.user || obj.name || '';
+                                // cache provided color for future messages
+                                let color = (obj.color || jm.color || '').toString().trim();
+                                if (color && !color.startsWith('#')) color = '#' + color;
+                                if (who && color) this.userColors[who] = color;
+                                const to = jm.to || jm.name || jm.room || this.getSelectedRoomName();
+                                const isSelf = !!(this.user?.username && who === this.user.username);
+                                if (isSelf) {
+                                    this.chatConnected = true;
+                                    this.setStatus('connected');
+                                    const text = this.$t?.('chat.multichat.system.room_entered', { room: to }) || `Du betrittst ${to}`;
+                                    this.messages.push({ id: Date.now(), user: 'System', text });
+                                } else {
+                                    const text = `${who} betritt ${to}`;
+                                    this.messages.push({ id: Date.now(), user: 'System', text });
+                                }
+                                return;
+                            }
+                            if (tr === 'user_left_room') {
+                                const who = jm.userName || obj.userName || obj.user || obj.name || 'User';
+                                const dest = jm.destination || jm.to || jm.name || jm.room || '';
+                                let color = (jm.userColor || obj.color || this.userColors[who] || jm.color || '').toString().trim();
+                                if (color && !color.startsWith('#')) color = '#' + color;
+                                // Action-style line with localized action mid-part and colored user name
+                                this.messages.push({
+                                    id: Date.now(),
+                                    type: 'action',
+                                    user: who,
+                                    action: this.$t?.('chat.multichat.action_phrases.left_room') || 'wechselt zu Raum',
+                                    to: dest,
+                                    color,
+                                    toColor: null
+                                });
+                                // Update right-side user list (remove from current room)
+                                const idx = this.usersInRoom.findIndex(u => u.name === who);
+                                if (idx >= 0) this.usersInRoom.splice(idx, 1);
+                                if (this.selectedTargetUser === who) this.selectedTargetUser = null;
+                                return;
+                            }
+                            if (tr === 'user_disconnected') {
+                                const who = obj.userName || obj.user || obj.name || 'User';
+                                let color = (obj.color || this.userColors[who] || jm.color || '').toString().trim();
+                                if (color && !color.startsWith('#')) color = '#' + color;
+                                this.messages.push({
+                                    id: Date.now(),
+                                    type: 'action',
+                                    user: who,
+                                    action: this.$t?.('chat.multichat.action_phrases.left_chat') || 'hat den Chat verlassen.',
+                                    to: '',
+                                    color,
+                                    toColor: null
+                                });
+                                const idx = this.usersInRoom.findIndex(u => u.name === who);
+                                if (idx >= 0) this.usersInRoom.splice(idx, 1);
+                                if (this.selectedTargetUser === who) this.selectedTargetUser = null;
+                                return;
+                            }
+                            if (tr === 'room_change_user') {
+                                const who = obj.userName || obj.user || obj.name || '';
+                                const to = jm.to || jm.name || jm.room || this.getSelectedRoomName();
+                                const isSelf = !!(this.user?.username && who === this.user.username);
+                                if (isSelf) {
+                                    this.chatConnected = true;
+                                    this.setStatus('connected');
+                                    const text = this.$t?.('chat.multichat.system.room_entered', { room: to }) || `Du betrittst ${to}`;
+                                    this.messages.push({ id: Date.now(), user: 'System', text });
+                                } else {
+                                    const text = `${who} betritt ${to}`;
+                                    this.messages.push({ id: Date.now(), user: 'System', text });
+                                }
+                                return;
+                            }
+                            if (tr === 'room_entered') {
+                                const to = jm.to || jm.name || jm.room || '';
+                                this.handleIncoming({ type: 'system', code: 'room_entered', tr: 'room_entered', to });
+                                return;
+                            }
+                            if (tr === 'color_changed' || tr === 'user_color_changed') {
+                                this.handleIncoming({ type: 'system', code: tr, color: obj.color || jm.color, userName: obj.userName || jm.userName || '' });
+                                return;
+                            }
+                            // Fallback: forward as generic system event
+                            {
+                                const to = jm.to || jm.name || jm.room || '';
+                                const code = tr || 'room_entered';
+                                this.handleIncoming({ type: 'system', code, tr: code, to });
+                                return;
+                            }
+                        } catch (_) { /* fall through to plain string handlers */ }
+                    }
+                    if (msg === 'user_entered_chat') {
+                        const who = obj.userName || obj.user || obj.name || '';
+                        // cache provided color for future messages
+                        let color = (obj.color || '').toString().trim();
+                        if (color && !color.startsWith('#')) color = '#' + color;
+                        if (who && color) this.userColors[who] = color;
+                        const isSelf = !!(this.user?.username && who === this.user.username);
+                        if (isSelf) {
+                            this.chatConnected = true;
+                            this.setStatus('connected');
+                        }
+                        const room = this.getSelectedRoomName();
+                        const text = isSelf
+                            ? (this.$t?.('chat.multichat.system.room_entered', { room }) || `Du betrittst ${room}`)
+                            : `${who} betritt ${room}`;
+                        this.messages.push({ id: Date.now(), user: 'System', text });
+                        return;
+                    }
+                    if (msg === 'user_entered_room') {
+                        const who = obj.userName || obj.user || obj.name || '';
+                        const room = this.getSelectedRoomName();
+                        const isSelf = !!(this.user?.username && who === this.user.username);
+                        if (isSelf) {
+                            this.chatConnected = true;
+                            this.setStatus('connected');
+                            const text = this.$t?.('chat.multichat.system.room_entered', { room }) || `Du betrittst ${room}`;
+                            this.messages.push({ id: Date.now(), user: 'System', text });
+                        } else if (who) {
+                            const text = `${who} betritt ${room}`;
+                            this.messages.push({ id: Date.now(), user: 'System', text });
+                        }
+                        return;
+                    }
+                    if (msg === 'user_left_room') {
+                        const who = obj.userName || obj.user || obj.name || 'User';
+                        const room = this.getSelectedRoomName();
+                        let color = (obj.color || this.userColors[who] || '').toString().trim();
+                        if (color && !color.startsWith('#')) color = '#' + color;
+                        this.messages.push({
+                            id: Date.now(),
+                            type: 'action',
+                            user: who,
+                            action: this.$t?.('chat.multichat.action_phrases.leaves_room') || 'verlässt',
+                            to: room,
+                            color,
+                            toColor: null
+                        });
+                        const idx = this.usersInRoom.findIndex(u => u.name === who);
+                        if (idx >= 0) this.usersInRoom.splice(idx, 1);
+                        if (this.selectedTargetUser === who) this.selectedTargetUser = null;
+                        return;
+                    }
+                    if (msg === 'user_disconnected') {
+                        const who = obj.userName || obj.user || obj.name || 'User';
+                        let color = (obj.color || this.userColors[who] || '').toString().trim();
+                        if (color && !color.startsWith('#')) color = '#' + color;
+                        // Render as an action-style system line, localized
+                        this.messages.push({
+                            id: Date.now(),
+                            type: 'action',
+                            user: who,
+                            action: this.$t?.('chat.multichat.action_phrases.left_chat') || 'hat den Chat verlassen.',
+                            to: '',
+                            color,
+                            toColor: null
+                        });
+                        // Remove from right-side user list
+                        const idx = this.usersInRoom.findIndex(u => u.name === who);
+                        if (idx >= 0) this.usersInRoom.splice(idx, 1);
+                        if (this.selectedTargetUser === who) this.selectedTargetUser = null;
+                        return;
+                    }
+                    if (msg === 'room_change_user') {
+                        const who = obj.userName || obj.user || obj.name || '';
+                        const isSelf = !!(this.user?.username && who === this.user.username);
+                        // Without structured payload we can't know target room reliably; show generic info
+                        if (isSelf) {
+                            this.chatConnected = true;
+                            this.setStatus('connected');
+                        }
+                        const text = isSelf
+                            ? this.$t?.('chat.multichat.system.room_entered', { room: this.getSelectedRoomName() }) || `Du betrittst ${this.getSelectedRoomName()}`
+                            : `${who} betritt ${this.getSelectedRoomName()}`;
+                        this.messages.push({ id: Date.now(), user: 'System', text });
+                        return;
+                    }
+                    if (msg === 'room_entered') {
+                        const to = obj.to || obj.name || obj.room || '';
+                        this.handleIncoming({ type: 'system', code: 'room_entered', tr: 'room_entered', to });
+                        return;
+                    }
+                    if (msg === 'color_changed' || msg === 'user_color_changed') {
+                        this.handleIncoming({ type: 'system', code: msg, color: obj.color, userName: obj.userName || '' });
+                        return;
+                    }
+                    this.handleIncoming({ type: 'system', text: msg });
+                    return;
+                }
+                if (typeof msg === 'object' && msg) {
+                    const tr = msg.tr || '';
+                    if (tr === 'user_entered_chat') {
+                        const who = obj.userName || obj.user || obj.name || '';
+                        let color = (obj.color || '').toString().trim();
+                        if (color && !color.startsWith('#')) color = '#' + color;
+                        if (who && color) this.userColors[who] = color;
+                        const to = msg.to || msg.name || msg.room || this.getSelectedRoomName();
+                        const isSelf = !!(this.user?.username && who === this.user.username);
+                        if (isSelf) {
+                            this.chatConnected = true;
+                            this.setStatus('connected');
+                            const text = this.$t?.('chat.multichat.system.room_entered', { room: to }) || `Du betrittst ${to}`;
+                            this.messages.push({ id: Date.now(), user: 'System', text });
+                        } else {
+                            const text = `${who} betritt ${to}`;
+                            this.messages.push({ id: Date.now(), user: 'System', text });
+                        }
+                        return;
+                    }
+                    if (tr === 'user_entered_room') {
+                        const who = obj.userName || obj.user || obj.name || '';
+                        const to = msg.to || msg.name || msg.room || this.getSelectedRoomName();
+                        const isSelf = !!(this.user?.username && who === this.user.username);
+                        if (isSelf) {
+                            this.chatConnected = true;
+                            this.setStatus('connected');
+                            const text = this.$t?.('chat.multichat.system.room_entered', { room: to }) || `Du betrittst ${to}`;
+                            this.messages.push({ id: Date.now(), user: 'System', text });
+                        } else {
+                            const text = `${who} betritt ${to}`;
+                            this.messages.push({ id: Date.now(), user: 'System', text });
+                        }
+                        return;
+                    }
+                    if (tr === 'user_left_room') {
+                        const who = msg.userName || obj.userName || obj.user || obj.name || 'User';
+                        const dest = msg.destination || msg.to || msg.name || msg.room || '';
+                        let color = (msg.userColor || obj.color || this.userColors[who] || msg.color || '').toString().trim();
+                        if (color && !color.startsWith('#')) color = '#' + color;
+                        this.messages.push({
+                            id: Date.now(),
+                            type: 'action',
+                            user: who,
+                            action: this.$t?.('chat.multichat.action_phrases.left_room') || 'wechselt zu Raum',
+                            to: dest,
+                            color,
+                            toColor: null
+                        });
+                        const idx = this.usersInRoom.findIndex(u => u.name === who);
+                        if (idx >= 0) this.usersInRoom.splice(idx, 1);
+                        if (this.selectedTargetUser === who) this.selectedTargetUser = null;
+                        return;
+                    }
+                    if (tr === 'user_disconnected') {
+                        const who = obj.userName || obj.user || obj.name || 'User';
+                        let color = (obj.color || this.userColors[who] || '').toString().trim();
+                        if (color && !color.startsWith('#')) color = '#' + color;
+                        this.messages.push({
+                            id: Date.now(),
+                            type: 'action',
+                            user: who,
+                            action: this.$t?.('chat.multichat.action_phrases.left_chat') || 'hat den Chat verlassen.',
+                            to: '',
+                            color,
+                            toColor: null
+                        });
+                        const idx = this.usersInRoom.findIndex(u => u.name === who);
+                        if (idx >= 0) this.usersInRoom.splice(idx, 1);
+                        if (this.selectedTargetUser === who) this.selectedTargetUser = null;
+                        return;
+                    }
+                    // Explicit handling for user room changes
+                    if (tr === 'room_change_user') {
+                        const who = obj.userName || obj.user || obj.name || '';
+                        const to = msg.to || msg.name || msg.room || '';
+                        const isSelf = !!(this.user?.username && who === this.user.username);
+                        if (isSelf) {
+                            this.chatConnected = true;
+                            this.setStatus('connected');
+                            // Show the same line we use for room_entered for consistency
+                            const text = this.$t?.('chat.multichat.system.room_entered', { room: to }) || `Du betrittst ${to}`;
+                            this.messages.push({ id: Date.now(), user: 'System', text });
+                        } else {
+                            const text = `${who} betritt ${to}`;
+                            this.messages.push({ id: Date.now(), user: 'System', text });
+                        }
+                        return;
+                    }
+                    const to = msg.to || msg.name || msg.room || '';
+                    const code = tr || 'room_entered';
+                    this.handleIncoming({ type: 'system', code, tr: code, to });
+                    return;
+                }
+            }
+            if (obj.type === 6) {
+                this.handleIncoming({ type: 'scream', userName: obj.userName || obj.user || obj.name || '', message: obj.message || '', color: obj.color || null });
+                return;
+            }
+            if (typeof obj.message === 'string' && (obj.userName || obj.user || obj.name || obj.token)) {
+                // Pass through token if present so we can detect self-message when userName is missing
+                this.handleIncoming({ type: 'message', message: obj.message, userName: obj.userName || obj.user || obj.name, color: obj.color || null, token: obj.token });
+                return;
+            }
+            this.handleIncoming({ type: 'system', text: JSON.stringify(obj) });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.multi-chat-top {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    margin-bottom: 0.5em;
+    justify-content: space-between;
+}
+
+.room-select {
+    min-width: 10em;
+}
+
+.right-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.6em;
+}
+
+.status {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4em;
+    padding: 0.2em 0.5em;
+    border-radius: 4px;
+    border: 1px solid #bbb;
+    background: #f9f9f9;
+}
+
+.status .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #999;
+}
+
+.status.connected .dot {
+    background: #2e7d32;
+}
+
+.status.connecting .dot {
+    background: #f9a825;
+}
+
+.status.disconnected .dot {
+    background: #6d4c41;
+}
+
+.status.error .dot {
+    background: #c62828;
+}
+
+.reconnect-btn {
+    margin-left: 0.4em;
+    border: 1px solid #bbb;
+    background: #fff;
+    border-radius: 4px;
+    padding: 0.1em 0.4em;
+    cursor: pointer;
+}
+
+.options-dropdown-wrapper {
+    position: relative;
+}
+
+.options-btn {
+    background: #f5f5f5;
+    border-radius: 4px;
+    padding: 0.3em 0.8em;
+    font-size: 0.95em;
+    border: 1px solid #bbb;
+    cursor: pointer;
+}
+
+.options-dropdown {
+    position: absolute;
+    top: 2.2em;
+    right: 0;
+    background: #fff;
+    border: 1px solid #bbb;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    padding: 0.7em 1.2em;
+    z-index: 10;
+    min-width: 12em;
+}
+
+.opts-row {
+    display: flex;
+    gap: 0.4em;
+    align-items: center;
+    margin-top: 0.4em;
+}
+
+.opts-divider {
+    height: 1px;
+    background: #eee;
+    margin: 0.5em 0;
+}
+
+.url-override {
+    min-width: 16em;
+}
+
+.multi-chat-output {
+    background: #fff;
+    color: #000;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    margin-bottom: 0.5em;
+    padding: 0.7em;
+    border-radius: 4px;
+    font-size: 1em;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #222;
+}
+
+.chat-message {
+    margin-bottom: 0.3em;
+}
+
+.user {
+    font-weight: bold;
+    color: #90caf9;
+}
+
+.scream-label {
+    font-weight: bold;
+    text-transform: none;
+}
+
+.action-text,
+.action-target {
+    display: inline;
+}
+
+.action-text::before,
+.action-target::before {
+    content: " ";
+}
+
+.color-picker-panel {
+    background: #f5f5f5;
+    border-radius: 6px;
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+    gap: 0.8em;
+    height: 16em;
+}
+
+.picker-row label {
+    display: flex;
+    align-items: center;
+    gap: 0.6em;
+}
+
+.picker-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1em;
+}
+
+.palette-wrap {
+    position: relative;
+    width: max-content;
+}
+
+.palette-marker {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
+    pointer-events: none;
+}
+
+.picker-column {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6em;
+}
+
+.picker-label {
+    min-width: 7em;
+}
+
+.hex-input {
+    width: 10em;
+}
+
+.picker-val {
+    min-width: 3em;
+    text-align: right;
+}
+
+.picker-sample {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    height: 6em;
+}
+
+.picker-error {
+    color: #b00020;
+}
+
+.picker-preview {
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 0.6em 0.8em;
+    font-weight: bold;
+}
+
+.picker-actions {
+    display: flex;
+    gap: 0.6em;
+}
+
+.picker-actions .btn {
+    padding: 0.4em 0.8em;
+}
+
+.picker-actions .btn.secondary {
+    background: #eee;
+}
+
+.multi-chat-input {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+}
+
+.chat-input {
+    flex: 1;
+    padding: 0.4em 0.7em;
+    border-radius: 3px;
+    border: 1px solid #bbb;
+}
+
+.send-btn {
+    padding: 0.3em 1.1em;
+    border-radius: 3px;
+    background: #1976d2;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+}
+
+.icon-btn {
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    margin-left: 0.2em;
+    vertical-align: middle;
+}
+
+.icon-btn.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.dialog-form,
+.multi-chat-input {
+    flex-shrink: 0;
+}
+
+.dialog-widget-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+/* Two-column chat + user list */
+.multi-chat-body {
+    display: grid;
+    grid-template-columns: 1fr 220px;
+    gap: 0.6em;
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+.user-list {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.user-list-header {
+    font-weight: bold;
+    margin-bottom: 0.4em;
+}
+
+.user-list-items {
+    border: 1px solid #222;
+    background: #fff;
+    border-radius: 4px;
+    padding: 0.4em 0.5em;
+    overflow-y: auto;
+    min-height: 0;
+}
+
+.user-list-item {
+    display: flex;
+    align-items: center;
+    gap: 0.4em;
+    padding: 0.15em 0.1em;
+}
+
+.user-list-item.selected {
+    background: rgba(25, 118, 210, 0.12);
+    border-radius: 4px;
+}
+
+.user-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #ccc;
+}
+
+.user-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+</style>
diff --git a/frontend/src/dialogues/chat/RandomChatDialog.vue b/frontend/src/dialogues/chat/RandomChatDialog.vue
index 52f0aac..1d5d31d 100644
--- a/frontend/src/dialogues/chat/RandomChatDialog.vue
+++ b/frontend/src/dialogues/chat/RandomChatDialog.vue
@@ -1,26 +1,26 @@
 <template>
-    <DialogWidget ref="dialog" title="randomchat.title" icon="dice24.png" :show-close="true" :buttons="buttons"
+    <DialogWidget ref="dialog" title="chat.randomchat.title" icon="dice24.png" :show-close="true" :buttons="buttons"
         :modal="false" :isTitleTranslated="true" @close="closeDialog" name="RandomChat">
         <div v-if="chatIsRunning" class="randomchat">
             <div class="headline">
-                {{ $t("randomchat.agerange") }}
+                {{ $t("chat.randomchat.agerange") }}
                 <input type="number" v-model="agefromsearch" min="18" max="150" size="5" />
                 -
                 <input type="number" v-model="agetosearch" min="18" max="150" size="5" />
                 <span class="multiselect">
-                    {{ $t("randomchat.gendersearch") }}
+                    {{ $t("chat.randomchat.gendersearch") }}
                     <div>
-                        <label><input type="checkbox" v-model="searchmale" />{{ $t("randomchat.gender.male") }}</label>
-                        <label><input type="checkbox" v-model="searchfemale" />{{ $t("randomchat.gender.female")
+                        <label><input type="checkbox" v-model="searchmale" />{{ $t("chat.randomchat.gender.male") }}</label>
+                        <label><input type="checkbox" v-model="searchfemale" />{{ $t("chat.randomchat.gender.female")
                         }}</label>
                     </div>
                 </span>
-                <label><input type="checkbox" v-model="camonlysearch" />{{ $t("randomchat.camonly") }}</label>
-                <label><input type="checkbox" v-model="showcam" />{{ $t("randomchat.showcam") }}</label>
-                <img v-if="isLoggedIn" src="/images/icons/friendsadd16.png" :tooltip="$t('randomchat.addfriend')" />
-                <label><input type="checkbox" v-model="autosearch" />{{ $t("randomchat.autosearch") }}</label>
-                <button @click="nextUser" v-if="partner != null">{{ $t("randomchat.jumptonext") }}</button>
-                <button @click="startSearch" v-if="partner == null && !searching">{{ $t("randomchat.startsearch")
+                <label><input type="checkbox" v-model="camonlysearch" />{{ $t("chat.randomchat.camonly") }}</label>
+                <label><input type="checkbox" v-model="showcam" />{{ $t("chat.randomchat.showcam") }}</label>
+                <img v-if="isLoggedIn" src="/images/icons/friendsadd16.png" :tooltip="$t('chat.randomchat.addfriend')" />
+                <label><input type="checkbox" v-model="autosearch" />{{ $t("chat.randomchat.autosearch") }}</label>
+                <button @click="nextUser" v-if="partner != null">{{ $t("chat.randomchat.jumptonext") }}</button>
+                <button @click="startSearch" v-if="partner == null && !searching">{{ $t("chat.randomchat.startsearch")
                 }}</button>
             </div>
             <div class="output">
@@ -28,7 +28,7 @@
             </div>
             <div class="inputline">
                 <label>
-                    {{ $t("randomchat.input") }}&nbsp;
+                    {{ $t("chat.randomchat.input") }}&nbsp;
                     <input type="text" v-model="inputtext" @keyup.enter="sendMessage" />
                 </label>
                 <img src="/images/icons/enter16.png" @click="sendMessage" />
@@ -37,20 +37,20 @@
         </div>
         <div v-else>
             <div>
-                <label>{{ $t("randomchat.age") }}
+                <label>{{ $t("chat.randomchat.age") }}
                     <input type="number" v-model="age" min="18" max="150" value="18" />
                 </label>
             </div>
             <div>
-                <label>{{ $t("randomchat.gender.title") }}
+                <label>{{ $t("chat.randomchat.gender.title") }}
                     <select v-model="gender">
-                        <option value="f">{{ $t("randomchat.gender.female") }}</option>
-                        <option value="m">{{ $t("randomchat.gender.male") }}</option>
+                        <option value="f">{{ $t("chat.randomchat.gender.female") }}</option>
+                        <option value="m">{{ $t("chat.randomchat.gender.male") }}</option>
                     </select>
                 </label>
             </div>
             <div>
-                <button @click="startRandomChat()">{{ $t("randomchat.start") }}</button>
+                <button @click="startRandomChat()">{{ $t("chat.randomchat.start") }}</button>
             </div>
         </div>
     </DialogWidget>
@@ -60,6 +60,7 @@
 import DialogWidget from '@/components/DialogWidget.vue';
 import { mapGetters } from 'vuex';
 import axios from 'axios';
+import DOMPurify from 'dompurify';
 
 export default {
     name: 'RandomChatDialog',
@@ -69,7 +70,8 @@ export default {
     computed: {
         ...mapGetters(['isLoggedIn', 'user']),
         buttons() {
-            return [{ text: this.$t('randomchat.close') }];
+            // Use translation key; DialogWidget will translate when isTitleTranslated=true
+            return [{ text: 'chat.randomchat.close' }];
         },
     },
     data() {
@@ -113,26 +115,6 @@ export default {
             this.$refs.dialog.open();
         },
 
-        async closeDialog() {
-            // ① Stoppe alle laufenden Intervalle
-            if (this.searchInterval) {
-                clearInterval(this.searchInterval);
-                this.searchInterval = null;
-            }
-            if (this.messagesInterval) {
-                clearInterval(this.messagesInterval);
-                this.messagesInterval = null;
-            }
-            // ② verlasse Chat auf Server-Seite
-            this.$refs.dialog.close();
-            await axios.post('/api/chat/exit', { id: this.userId });
-            await this.removeUserFromChat();
-            // Reset-Status
-            this.chatIsRunning = false;
-            this.partner = null;
-            this.messages = [];
-        },
-
         async registerUser() {
             try {
                 const response = await axios.post('/api/chat/register', {
@@ -146,9 +128,29 @@ export default {
         },
 
         async closeDialog() {
+            // Stop intervals first
+            if (this.searchInterval) {
+                clearInterval(this.searchInterval);
+                this.searchInterval = null;
+            }
+            if (this.messagesInterval) {
+                clearInterval(this.messagesInterval);
+                this.messagesInterval = null;
+            }
+            // Inform backend and cleanup
+            try {
+                if (this.userId) {
+                    await axios.post('/api/chat/exit', { id: this.userId });
+                    await this.removeUserFromChat();
+                }
+            } catch (e) {
+                // ignore
+            }
+            // Reset state and close widget
+            this.chatIsRunning = false;
+            this.partner = null;
+            this.messages = [];
             this.$refs.dialog.close();
-            await axios.post('/api/chat/exit', { id: this.userId });
-            await this.removeUserFromChat();
         },
 
         async startRandomChat() {
@@ -160,7 +162,7 @@ export default {
         async startSearch() {
             this.searching = true;
             await this.findMatch();
-            this.messages.push({ type: 'system', tr: 'randomchat.waitingForMatch' });
+            this.messages.push({ type: 'system', tr: 'chat.randomchat.waitingForMatch' });
             this.searchInterval = setInterval(this.findMatch, 500);
         },
 
@@ -174,10 +176,10 @@ export default {
                 if (response.data.status === 'matched') {
                     this.searching = false;
                     clearInterval(this.searchInterval);
-                    const initText = this.$t('randomchat.chatpartner')
+            const initText = this.$t('chat.randomchat.chatpartner')
                         .replace(
                             '<gender>',
-                            this.$t(`randomchat.partnergender${response.data.user.gender}`)
+                this.$t(`chat.randomchat.partnergender${response.data.user.gender}`)
                         )
                         .replace('<age>', response.data.user.age);
                     this.messages = [{ type: 'system', text: initText }];
@@ -220,7 +222,7 @@ export default {
             activities.forEach((act) => {
                 if (act.activity === 'otheruserleft') {
                     this.partner = null;
-                    this.messages.push({ type: 'system', tr: 'randomchat.userleftchat' });
+                    this.messages.push({ type: 'system', tr: 'chat.randomchat.userleftchat' });
                 }
             });
             this.messages.push(...newMsgs);
@@ -237,10 +239,10 @@ export default {
         async nextUser() {
             await axios.post('/api/chat/leave', { id: this.userId });
             this.partner = null;
-            this.messages.push({ type: 'system', tr: 'randomchat.selfstopped' });
+            this.messages.push({ type: 'system', tr: 'chat.randomchat.selfstopped' });
             if (this.autosearch) {
                 this.searchInterval = setInterval(this.findMatch, 500);
-                this.messages.push({ type: 'system', tr: 'randomchat.waitingForMatch' });
+                this.messages.push({ type: 'system', tr: 'chat.randomchat.waitingForMatch' });
             }
         },
         
@@ -250,7 +252,7 @@ export default {
                 return `<span class="rc-system">${txt}</span>`;
             }
             const cls = message.type === 'self' ? 'rc-self' : 'rc-partner';
-            const who = message.type === 'self' ? this.$t('randomchat.self') : this.$t('randomchat.partner');
+            const who = message.type === 'self' ? this.$t('chat.randomchat.self') : this.$t('chat.randomchat.partner');
             return `<span class="${cls}">${who}: </span>${message.text}`;
         },
     },
diff --git a/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue b/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue
index 005c00c..38163e6 100644
--- a/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue
+++ b/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue
@@ -67,7 +67,7 @@
                         <div v-for="entry in guestbookEntries" :key="entry.id" class="guestbook-entry">
                             <img v-if="entry.image" :src="entry.image.url" alt="Entry Image"
                                 style="max-width: 400px; max-height: 400px;" />
-                            <p v-html="entry.contentHtml"></p>
+                            <p v-html="sanitizedContent(entry)"></p>
                             <div class="entry-info">
                                 <span class="entry-timestamp">{{ new Date(entry.createdAt).toLocaleString() }}</span>
                                 <span class="entry-user">
@@ -96,6 +96,7 @@ import apiClient from '@/utils/axios.js';
 import FolderItem from '../../components/FolderItem.vue';
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
+import DOMPurify from 'dompurify';
 
 export default {
     name: 'UserProfileDialog',
@@ -369,7 +370,10 @@ export default {
             } else {
                 this.friendshipState = 'waiting';
             }
-        }
+        },
+        sanitizedContent(entry) {
+            return DOMPurify.sanitize(entry.contentHtml);
+        },
     }
 };
 </script>
diff --git a/frontend/src/dialogues/standard/DataPrivacyDialog.vue b/frontend/src/dialogues/standard/DataPrivacyDialog.vue
index 83c8fae..3cc65bf 100644
--- a/frontend/src/dialogues/standard/DataPrivacyDialog.vue
+++ b/frontend/src/dialogues/standard/DataPrivacyDialog.vue
@@ -11,13 +11,14 @@
         @ok="handleOk"
         name="DataPrivacyDialog"
     >
-        <div v-html="dataPrivacyContent"></div>
+        <div v-html="sanitizedContent"></div>
     </DialogWidget>
 </template>
 
 <script>
 import DialogWidget from '../../components/DialogWidget.vue';
 import content from '../../content/content.js';
+import DOMPurify from 'dompurify';
 
 export default {
     name: 'DataPrivacyDialog',
@@ -29,6 +30,11 @@ export default {
             dataPrivacyContent: content.dataPrivacy[this.$i18n.locale]
         };
     },
+    computed: {
+        sanitizedContent() {
+            return DOMPurify.sanitize(this.dataPrivacyContent);
+        }
+    },
     watch: {
         '$i18n.locale'(newLocale) {
             this.dataPrivacyContent = content.dataPrivacy[newLocale];
diff --git a/frontend/src/dialogues/standard/ImprintDialog.vue b/frontend/src/dialogues/standard/ImprintDialog.vue
index 38bbf31..886d9d8 100644
--- a/frontend/src/dialogues/standard/ImprintDialog.vue
+++ b/frontend/src/dialogues/standard/ImprintDialog.vue
@@ -11,13 +11,14 @@
         @ok="handleOk"
         name="ImprintDialog"
     >
-        <div v-html="imprintContent"></div>
+        <div v-html="sanitizedContent"></div>
     </DialogWidget>
 </template>
 
 <script>
 import DialogWidget from '../../components/DialogWidget.vue';
 import content from '../../content/content.js';
+import DOMPurify from 'dompurify';
 
 export default {
     name: 'ImprintDialog',
@@ -29,6 +30,11 @@ export default {
             imprintContent: content.imprint[this.$i18n.locale]
         };
     },
+    computed: {
+        sanitizedContent() {
+            return DOMPurify.sanitize(this.imprintContent);
+        }
+    },
     watch: {
         '$i18n.locale'(newLocale) {
             this.imprintContent = content.imprint[newLocale];
diff --git a/frontend/src/i18n/index.js b/frontend/src/i18n/index.js
index 8e9edcb..a269243 100644
--- a/frontend/src/i18n/index.js
+++ b/frontend/src/i18n/index.js
@@ -14,6 +14,7 @@ import enAdmin from './locales/en/admin.json';
 import enSocialNetwork from './locales/en/socialnetwork.json';
 import enFriends from './locales/en/friends.json';
 import enFalukant from './locales/en/falukant.json';
+import enPasswordReset from './locales/en/passwordReset.json';
 
 import deGeneral from './locales/de/general.json';
 import deHeader from './locales/de/header.json'; 
@@ -28,6 +29,7 @@ import deAdmin from './locales/de/admin.json';
 import deSocialNetwork from './locales/de/socialnetwork.json';
 import deFriends from './locales/de/friends.json';
 import deFalukant from './locales/de/falukant.json';
+import dePasswordReset from './locales/de/passwordReset.json';
 
 const messages = {
   en: {
@@ -37,6 +39,7 @@ const messages = {
     ...enHome,
     ...enChat,
     ...enRegister,
+  ...enPasswordReset,
     ...enError,
     ...enActivate,
     ...enSettings,
@@ -53,6 +56,7 @@ const messages = {
     ...deHome,
     ...deChat,
     ...deRegister,
+  ...dePasswordReset,
     ...deError,
     ...deActivate,
     ...deSettings,
diff --git a/frontend/src/i18n/locales/de/admin.json b/frontend/src/i18n/locales/de/admin.json
index ecb8cce..cc386cc 100644
--- a/frontend/src/i18n/locales/de/admin.json
+++ b/frontend/src/i18n/locales/de/admin.json
@@ -91,7 +91,8 @@
                 "start game": "Spiel starten",
                 "open room": "Raum öffnen",
                 "systemmessage": "Systemnachricht"
-            }
+            },
+            "confirmDelete": "Soll dieser Chatraum wirklich gelöscht werden?"
         }
     }
 }
\ No newline at end of file
diff --git a/frontend/src/i18n/locales/de/chat.json b/frontend/src/i18n/locales/de/chat.json
index d0f6df0..b489c8b 100644
--- a/frontend/src/i18n/locales/de/chat.json
+++ b/frontend/src/i18n/locales/de/chat.json
@@ -1,30 +1,72 @@
 {
-    "randomchat": {
-        "title": "Zufallschat",
-        "age": "Alter",
-        "gender": {
-            "title": "Dein Geschlecht",
-            "male": "Männlich",
-            "female": "Weiblich"
+    "chat": {
+        "multichat": {
+            "title": "Multi-Chat",
+            "autoscroll": "Automatisch scrollen",
+            "options": "Optionen",
+            "send": "Senden",
+            "shout": "Schreien",
+            "action": "Aktion",
+            "roll": "Würfeln",
+            "colorpicker": "Farbe wählen",
+            "colorpicker_preview": "Vorschau: Diese Nachricht nutzt die gewählte Farbe.",
+            "hex": "HEX",
+            "invalid_hex": "Ungültiger Hex-Wert",
+            "hue": "Farbton",
+            "saturation": "Sättigung",
+            "lightness": "Helligkeit",
+            "ok": "Ok",
+            "cancel": "Abbrechen",
+            "placeholder": "Nachricht eingeben...",
+            "action_select_user": "Bitte Benutzer auswählen",
+            "action_to": "Aktion an {to}",
+            "action_phrases": {
+                "left_room": "wechselt zu Raum",
+                "leaves_room": "verlässt Raum",
+                "left_chat": "hat den Chat verlassen."
+            },
+            "system": {
+                "room_entered": "Du hast den Raum \"{room}\" betreten.",
+                "user_entered_room": "{user} hat den Raum betreten.",
+                "user_left_room": "{user} hat den Raum verlassen."
+            ,
+                "color_changed_self": "Du hast deine Farbe zu {color} geändert.",
+                "color_changed_user": "{user} hat seine/ihre Farbe zu {color} geändert."
+            },
+            "status": {
+                "connecting": "Verbinden…",
+                "connected": "Verbunden",
+                "disconnected": "Getrennt",
+                "error": "Fehler bei der Verbindung"
+            }
         },
-        "start": "Loslegen",
-        "agerange": "Alter",
-        "gendersearch": "Geschlechter",
-        "camonly": "Nur mit Cam",
-        "showcam": "Eigene Cam anzeigen",
-        "addfriend": "Zu Freunden hinzufügen",
-        "close": "Chat beenden",
-        "autosearch": "Automatisch suchen",
-        "input": "Ihr Text",
-        "waitingForMatch": "Warten auf einen Teilnehmer...",
-        "chatpartner": "Du chattest jetzt mit einer <gender> Person im Alter von <age> Jahren.",
-        "partnergenderm": "männlichen",
-        "partnergenderf": "weiblichen",
-        "self": "Du",
-        "partner": "Partner",
-        "jumptonext": "Diesen Chat beenden",
-        "userleftchat": "Der Gesprächstpartner hat den Chat verlassen.",
-        "startsearch": "Suche nächstes Gespräch",
-        "selfstopped": "Du hast das Gespräch verlassen."
+        "randomchat": {
+            "title": "Zufallschat",
+            "age": "Alter",
+            "gender": {
+                "title": "Dein Geschlecht",
+                "male": "Männlich",
+                "female": "Weiblich"
+            },
+            "start": "Loslegen",
+            "agerange": "Alter",
+            "gendersearch": "Geschlechter",
+            "camonly": "Nur mit Cam",
+            "showcam": "Eigene Cam anzeigen",
+            "addfriend": "Zu Freunden hinzufügen",
+            "close": "Chat beenden",
+            "autosearch": "Automatisch suchen",
+            "input": "Ihr Text",
+            "waitingForMatch": "Warten auf einen Teilnehmer...",
+            "chatpartner": "Du chattest jetzt mit einer <gender> Person im Alter von <age> Jahren.",
+            "partnergenderm": "männlichen",
+            "partnergenderf": "weiblichen",
+            "self": "Du",
+            "partner": "Partner",
+            "jumptonext": "Diesen Chat beenden",
+            "userleftchat": "Der Gesprächstpartner hat den Chat verlassen.",
+            "startsearch": "Suche nächstes Gespräch",
+            "selfstopped": "Du hast das Gespräch verlassen."
+        }
     }
 }
\ No newline at end of file
diff --git a/frontend/src/i18n/locales/de/general.json b/frontend/src/i18n/locales/de/general.json
index f1648e4..7cbfaf7 100644
--- a/frontend/src/i18n/locales/de/general.json
+++ b/frontend/src/i18n/locales/de/general.json
@@ -41,5 +41,12 @@
         "transmale": "Trans-Mann",
         "transfemale": "Trans-Frau",
         "nonbinary": "Nichtbinär"
+    },
+    "common": {
+        "edit": "Bearbeiten",
+        "delete": "Löschen",
+        "create": "Erstellen",
+        "yes": "Ja",
+        "no": "Nein"
     }
 }
\ No newline at end of file
diff --git a/frontend/src/i18n/locales/de/passwordReset.json b/frontend/src/i18n/locales/de/passwordReset.json
new file mode 100644
index 0000000..496e9e2
--- /dev/null
+++ b/frontend/src/i18n/locales/de/passwordReset.json
@@ -0,0 +1,9 @@
+{
+  "passwordReset": {
+    "title": "Passwort zurücksetzen",
+    "email": "E-Mail",
+    "reset": "Zurücksetzen",
+    "success": "Falls die E-Mail existiert, wurde eine Anleitung zum Zurücksetzen gesendet.",
+    "failure": "Passwort-Zurücksetzen fehlgeschlagen. Bitte später erneut versuchen."
+  }
+}
diff --git a/frontend/src/i18n/locales/en/chat.json b/frontend/src/i18n/locales/en/chat.json
index 1d83951..78b03b5 100644
--- a/frontend/src/i18n/locales/en/chat.json
+++ b/frontend/src/i18n/locales/en/chat.json
@@ -1,5 +1,46 @@
 {
-    "randomchat": {
+    "chat": {
+        "multichat": {
+            "title": "Multi Chat",
+            "autoscroll": "Auto scroll",
+            "options": "Options",
+            "send": "Send",
+            "shout": "Shout",
+            "action": "Action",
+            "roll": "Roll",
+            "colorpicker": "Pick color",
+            "colorpicker_preview": "Preview: This message uses the chosen color.",
+            "hex": "HEX",
+            "invalid_hex": "Invalid hex value",
+            "hue": "Hue",
+            "saturation": "Saturation",
+            "lightness": "Lightness",
+            "ok": "Ok",
+            "cancel": "Cancel",
+            "placeholder": "Type a message…",
+            "action_select_user": "Please select a user",
+            "action_to": "Action to {to}",
+            "action_phrases": {
+                "left_room": "switches to room",
+                "leaves_room": "leaves room",
+                "left_chat": "has left the chat."
+            },
+            "system": {
+                "room_entered": "You entered the room \"{room}\".",
+                "user_entered_room": "{user} has entered the room.",
+                "user_left_room": "{user} has left the room."
+            ,
+                "color_changed_self": "You changed your color to {color}.",
+                "color_changed_user": "{user} changed their color to {color}."
+            },
+            "status": {
+                "connecting": "Connecting…",
+                "connected": "Connected",
+                "disconnected": "Disconnected",
+                "error": "Connection error"
+            }
+        },
+        "randomchat": {
         "title": "Random Chat",
         "close": "Close",
         "age": "Age",
@@ -16,6 +57,16 @@
         "autosearch": "Auto Search",
         "input": "Input",
         "start": "Start",
-        "waitingForMatch": "Waiting for a match..."
+        "waitingForMatch": "Waiting for a match...",
+        "chatpartner": "You are now chatting with a <gender> person aged <age> years.",
+        "partnergenderm": "male",
+        "partnergenderf": "female",
+        "self": "You",
+        "partner": "Partner",
+        "jumptonext": "End this chat",
+        "userleftchat": "The chat partner has left the chat.",
+        "startsearch": "Search next conversation",
+        "selfstopped": "You left the conversation."
+        }
     }
 }
\ No newline at end of file
diff --git a/frontend/src/i18n/locales/en/passwordReset.json b/frontend/src/i18n/locales/en/passwordReset.json
new file mode 100644
index 0000000..170d7ec
--- /dev/null
+++ b/frontend/src/i18n/locales/en/passwordReset.json
@@ -0,0 +1,9 @@
+{
+  "passwordReset": {
+    "title": "Reset Password",
+    "email": "Email",
+    "reset": "Reset",
+    "success": "If the email exists, we've sent reset instructions.",
+    "failure": "Password reset failed. Please try again later."
+  }
+}
diff --git a/frontend/src/router/adminRoutes.js b/frontend/src/router/adminRoutes.js
index 2fe6031..ff7304d 100644
--- a/frontend/src/router/adminRoutes.js
+++ b/frontend/src/router/adminRoutes.js
@@ -1,6 +1,6 @@
 import AdminInterestsView from '../views/admin/InterestsView.vue';
 import AdminContactsView from '../views/admin/ContactsView.vue';
-import ChatRoomsView from '../views/admin/ChatRoomsView.vue';
+import RoomsView from '../views/admin/RoomsView.vue';
 import ForumAdminView from '../dialogues/admin/ForumAdminView.vue';
 import AdminFalukantEditUserView from '../views/admin/falukant/EditUserView.vue'
 
@@ -26,7 +26,7 @@ const adminRoutes = [
     {
         path: '/admin/chatrooms',
         name: 'AdminChatRooms',
-        component: ChatRoomsView,
+        component: RoomsView,
         meta: { requiresAuth: true }
     },
     {
diff --git a/frontend/src/services/chatWs.js b/frontend/src/services/chatWs.js
new file mode 100644
index 0000000..5de15ab
--- /dev/null
+++ b/frontend/src/services/chatWs.js
@@ -0,0 +1,87 @@
+// Small helper to resolve the Chat WebSocket URL from env or sensible defaults
+export function getChatWsUrl() {
+  // Prefer explicit env var
+  const override = (typeof window !== 'undefined' && window.localStorage) ? window.localStorage.getItem('chatWsOverride') : '';
+  if (override && typeof override === 'string' && override.trim()) {
+    return override.trim();
+  }
+  const envUrl = import.meta?.env?.VITE_CHAT_WS_URL;
+  if (envUrl && typeof envUrl === 'string' && envUrl.trim()) {
+    return envUrl.trim();
+  }
+  // Fallback: use current origin host with ws/wss and default port/path if provided by backend
+  const isHttps = typeof window !== 'undefined' && window.location.protocol === 'https:';
+  const proto = isHttps ? 'wss' : 'ws';
+  // If a reverse proxy exposes the chat at a path, you can change '/chat' here.
+  const host = typeof window !== 'undefined' ? window.location.hostname : 'localhost';
+  const port = (typeof window !== 'undefined' && window.location.port) ? `:${window.location.port}` : '';
+  // On localhost, prefer dedicated chat port 1235 by default
+  // Prefer IPv4 for localhost to avoid browsers resolving to ::1 (IPv6) where the server may not listen
+  if (host === 'localhost' || host === '127.0.0.1' || host === '::1' || host === '[::1]') {
+    return `${proto}://127.0.0.1:1235`;
+  }
+  // Default to same origin (no hardcoded chat port). Adjust via VITE_CHAT_WS_URL if needed.
+  const defaultUrl = `${proto}://${host}${port}`;
+  return defaultUrl;
+}
+
+// Provide a list of candidate WS URLs to try, in order of likelihood.
+export function getChatWsCandidates() {
+  const override = (typeof window !== 'undefined' && window.localStorage) ? window.localStorage.getItem('chatWsOverride') : '';
+  if (override && typeof override === 'string' && override.trim()) {
+    return [override.trim()];
+  }
+  const envUrl = import.meta?.env?.VITE_CHAT_WS_URL;
+  if (envUrl && typeof envUrl === 'string' && envUrl.trim()) {
+    return [envUrl.trim()];
+  }
+  const isHttps = typeof window !== 'undefined' && window.location.protocol === 'https:';
+  const proto = isHttps ? 'wss' : 'ws';
+  const host = typeof window !== 'undefined' ? window.location.hostname : 'localhost';
+  const port = (typeof window !== 'undefined' && window.location.port) ? `:${window.location.port}` : '';
+  const candidates = [];
+  // Common local setups: include IPv4 and IPv6 loopback variants (root only)
+  if (host === 'localhost' || host === '127.0.0.1' || host === '::1' || host === '[::1]') {
+    // Prefer IPv6 loopback first when available
+    const localHosts = ['[::1]', '127.0.0.1', 'localhost'];
+    for (const h of localHosts) {
+      const base = `${proto}://${h}:1235`;
+  candidates.push(base);
+  candidates.push(`${base}/`);
+    }
+  }
+  // Same-origin root and common WS paths
+  const sameOriginBases = [`${proto}://${host}${port}`];
+  // If localhost-ish, also try 127.0.0.1 for same-origin port
+  if ((host === 'localhost' || host === '::1' || host === '[::1]') && port) {
+    sameOriginBases.push(`${proto}://[::1]${port}`);
+    sameOriginBases.push(`${proto}://127.0.0.1${port}`);
+  }
+  for (const base of sameOriginBases) {
+  candidates.push(base);
+  candidates.push(`${base}/`);
+  }
+  return candidates;
+}
+
+// Return optional subprotocols for the WebSocket handshake.
+export function getChatWsProtocols() {
+  try {
+    const ls = (typeof window !== 'undefined' && window.localStorage) ? window.localStorage.getItem('chatWsProtocols') : '';
+    if (ls && ls.trim()) {
+      // Accept JSON array or comma-separated
+      if (ls.trim().startsWith('[')) return JSON.parse(ls);
+      return ls.split(',').map(s => s.trim()).filter(Boolean);
+    }
+  } catch (_) {}
+  const env = import.meta?.env?.VITE_CHAT_WS_PROTOCOLS;
+  if (env && typeof env === 'string' && env.trim()) {
+    try {
+      if (env.trim().startsWith('[')) return JSON.parse(env);
+    } catch (_) {}
+    return env.split(',').map(s => s.trim()).filter(Boolean);
+  }
+  // Default to the 'chat' subprotocol so the server can gate connections accordingly
+  return ['chat'];
+}
+ 
\ No newline at end of file
diff --git a/frontend/src/utils/chatConfig.js b/frontend/src/utils/chatConfig.js
new file mode 100644
index 0000000..cd2af00
--- /dev/null
+++ b/frontend/src/utils/chatConfig.js
@@ -0,0 +1,87 @@
+// Centralized config for YourChat protocol mapping and WS endpoint
+// Override via .env (VITE_* variables)
+
+const env = import.meta.env || {};
+
+export const CHAT_WS_URL = env.VITE_CHAT_WS_URL
+  || (env.VITE_CHAT_WS_HOST || env.VITE_CHAT_WS_PORT
+      ? `ws://${env.VITE_CHAT_WS_HOST || 'localhost'}:${env.VITE_CHAT_WS_PORT || '1235'}`
+      : `ws://localhost:1235`);
+
+// Event/type keys
+export const CHAT_EVENT_KEY = env.VITE_CHAT_EVENT_KEY || 'type';
+export const CHAT_EVT_TOKEN = env.VITE_CHAT_EVT_TOKEN || 'token';
+export const CHAT_EVT_AUTH = env.VITE_CHAT_EVT_AUTH || 'auth'; // optional, YourChat nutzt Token
+export const CHAT_EVT_JOIN = env.VITE_CHAT_EVT_JOIN || 'join';
+export const CHAT_EVT_MESSAGE = env.VITE_CHAT_EVT_MESSAGE || 'message';
+export const CHAT_EVT_SYSTEM = env.VITE_CHAT_EVT_SYSTEM || 'system';
+
+// Field names for payloads
+export const CHAT_JOIN_ROOM_KEY = env.VITE_CHAT_JOIN_ROOM_KEY || 'newroom';
+export const CHAT_JOIN_LEAVE_ROOM_KEY = env.VITE_CHAT_JOIN_LEAVE_ROOM_KEY || 'password'; // YourChat erwartet password Feld; leave optional nicht vorgesehen
+export const CHAT_MESSAGE_ROOM_KEY = env.VITE_CHAT_MESSAGE_ROOM_KEY || null; // YourChat braucht kein roomId im message payload
+
+export const CHAT_MSG_TEXT_KEY = env.VITE_CHAT_MSG_TEXT_KEY || 'message';
+export const CHAT_MSG_FROM_KEY = env.VITE_CHAT_MSG_FROM_KEY || 'userName';
+export const CHAT_MSG_ID_KEY = env.VITE_CHAT_MSG_ID_KEY || 'id';
+export const CHAT_TOKEN_KEY = env.VITE_CHAT_TOKEN_KEY || 'token';
+
+// Auth payload mapping
+export const CHAT_AUTH_PAYLOAD_KEY = env.VITE_CHAT_AUTH_PAYLOAD_KEY || 'data';
+export const CHAT_AUTH_USER_ID_KEY = env.VITE_CHAT_AUTH_USER_ID_KEY || 'userId';
+export const CHAT_AUTH_AUTHCODE_KEY = env.VITE_CHAT_AUTH_AUTHCODE_KEY || 'authCode';
+
+export function buildAuthPayload(user) {
+  const payload = {};
+  payload[CHAT_EVENT_KEY] = CHAT_EVT_AUTH;
+  const dataObj = {};
+  if (user?.id != null) dataObj[CHAT_AUTH_USER_ID_KEY] = user.id;
+  if (user?.authCode != null) dataObj[CHAT_AUTH_AUTHCODE_KEY] = user.authCode;
+  payload[CHAT_AUTH_PAYLOAD_KEY] = dataObj;
+  return payload;
+}
+
+export function buildJoinPayload(roomName, password = '') {
+  const payload = {};
+  payload[CHAT_EVENT_KEY] = CHAT_EVT_JOIN;
+  if (roomName != null) payload[CHAT_JOIN_ROOM_KEY] = roomName;
+  if (CHAT_JOIN_LEAVE_ROOM_KEY) payload[CHAT_JOIN_LEAVE_ROOM_KEY] = password;
+  return payload;
+}
+
+export function buildMessagePayload(text) {
+  const payload = {};
+  payload[CHAT_EVENT_KEY] = CHAT_EVT_MESSAGE;
+  if (CHAT_MESSAGE_ROOM_KEY && typeof CHAT_MESSAGE_ROOM_KEY === 'string') payload[CHAT_MESSAGE_ROOM_KEY] = null;
+  payload[CHAT_MSG_TEXT_KEY] = text;
+  return payload;
+}
+
+export function parseIncomingMessage(data) {
+  // Try JSON, else return as system text
+  let obj = data;
+  if (typeof data === 'string') {
+    try { obj = JSON.parse(data); } catch (_) { return { type: 'system', text: String(data) }; }
+  }
+  const type = obj[CHAT_EVENT_KEY] || obj.type;
+  if (type === CHAT_EVT_TOKEN) {
+    return { type: 'token', token: obj.message };
+  }
+  if (type === CHAT_EVT_MESSAGE || type === 'message') {
+    return {
+      type: 'message',
+      id: obj[CHAT_MSG_ID_KEY] || Date.now(),
+      from: obj[CHAT_MSG_FROM_KEY] || 'User',
+      text: obj[CHAT_MSG_TEXT_KEY] || ''
+    };
+  }
+  if (type === CHAT_EVT_SYSTEM || type === 'system') {
+    return {
+      type: 'system',
+      id: obj[CHAT_MSG_ID_KEY] || Date.now(),
+      text: obj[CHAT_MSG_TEXT_KEY] || ''
+    };
+  }
+  // Fallback: unknown event -> show raw
+  return { type: 'system', id: Date.now(), text: JSON.stringify(obj) };
+}
diff --git a/frontend/src/views/admin/RoomDialog.vue b/frontend/src/views/admin/RoomDialog.vue
deleted file mode 100644
index 685f201..0000000
--- a/frontend/src/views/admin/RoomDialog.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-  <DialogWidget ref="dialog" :title="$t(room && room.id ? 'admin.chatrooms.edit' : 'admin.chatrooms.create')"
-    :show-close="true" :buttons="buttons" name="RoomDialog" :modal="true" :isTitleTranslated="true"
-    @close="closeDialog">
-    <form class="dialog-form" @submit.prevent="save">
-      <label>
-        {{ $t('admin.chatrooms.title') }}
-        <input v-model="localRoom.title" required />
-      </label>
-      <label>
-        {{ $t('admin.chatrooms.type') }}
-        <select v-model="localRoom.roomTypeId" required>
-          <option v-for="type in roomTypes" :key="type.id" :value="type.id">{{ type.tr }}</option>
-        </select>
-      </label>
-      <label>
-        <input type="checkbox" v-model="localRoom.isPublic" />
-        {{ $t('admin.chatrooms.isPublic') }}
-      </label>
-      <label>
-        <input type="checkbox" v-model="showGenderRestriction" />
-        {{ $t('admin.chatrooms.genderRestriction.show') }}
-      </label>
-      <label v-if="showGenderRestriction">
-        {{ $t('admin.chatrooms.genderRestriction.label') }}
-        <select v-model="localRoom.genderRestrictionId">
-          <option v-for="g in genderRestrictions" :key="g.id" :value="g.id">{{ g.tr }}</option>
-        </select>
-      </label>
-      <label>
-        <input type="checkbox" v-model="showMinAge" />
-        {{ $t('admin.chatrooms.minAge.show') }}
-      </label>
-      <label v-if="showMinAge">
-        {{ $t('admin.chatrooms.minAge.label') }}
-        <input v-model.number="localRoom.minAge" type="number" />
-      </label>
-      <label>
-        <input type="checkbox" v-model="showMaxAge" />
-        {{ $t('admin.chatrooms.maxAge.show') }}
-      </label>
-      <label v-if="showMaxAge">
-        {{ $t('admin.chatrooms.maxAge.label') }}
-        <input v-model.number="localRoom.maxAge" type="number" />
-      </label>
-      <label>
-        <input type="checkbox" v-model="showPassword" />
-        {{ $t('admin.chatrooms.password.show') }}
-      </label>
-      <label v-if="showPassword">
-        {{ $t('admin.chatrooms.password.label') }}
-        <input v-model="localRoom.password" type="password" />
-      </label>
-      <label>
-        <input type="checkbox" v-model="localRoom.friendsOfOwnerOnly" />
-        {{ $t('admin.chatrooms.friendsOfOwnerOnly') }}
-      </label>
-      <label>
-        <input type="checkbox" v-model="showRequiredUserRight" />
-        {{ $t('admin.chatrooms.requiredUserRight.show') }}
-      </label>
-      <label v-if="showRequiredUserRight">
-        {{ $t('admin.chatrooms.requiredUserRight.label') }}
-        <select v-model="localRoom.requiredUserRightId">
-          <option v-for="r in userRights" :key="r.id" :value="r.id">{{ r.tr }}</option>
-        </select>
-      </label>
-    </form>
-  </DialogWidget>
-</template>
-<script>
-
-import DialogWidget from '@/components/DialogWidget.vue';
-
-export default {
-  name: 'RoomDialog',
-  props: {
-    modelValue: Boolean,
-    room: Object
-  },
-  data() {
-    return {
-  dialog: null,
-  localRoom: this.room ? { ...this.room } : { title: '', isPublic: true },
-      roomTypes: [],
-      genderRestrictions: [],
-      userRights: [],
-      showGenderRestriction: !!(this.room && this.room.genderRestrictionId),
-      showMinAge: !!(this.room && this.room.minAge),
-      showMaxAge: !!(this.room && this.room.maxAge),
-      showPassword: !!(this.room && this.room.password),
-      showRequiredUserRight: !!(this.room && this.room.requiredUserRightId),
-      buttons: [
-        { text: 'common.save', action: this.save },
-        { text: 'common.cancel', action: this.closeDialog }
-      ]
-  },
-  watch: {
-    room: {
-      handler(newVal) {
-        this.localRoom = newVal ? { ...newVal } : { title: '', isPublic: true };
-        this.showGenderRestriction = !!(newVal && newVal.genderRestrictionId);
-        this.showMinAge = !!(newVal && newVal.minAge);
-        this.showMaxAge = !!(newVal && newVal.maxAge);
-        this.showPassword = !!(newVal && newVal.password);
-        this.showRequiredUserRight = !!(newVal && newVal.requiredUserRightId);
-      },
-      immediate: true
-    }
-  },
-  mounted() {
-  this.dialog = this.$refs.dialog;
-  this.fetchRoomTypes();
-  this.fetchGenderRestrictions();
-  this.fetchUserRights();
-  },
-  methods: {
-    async fetchRoomTypes() {
-      // API-Call, z.B. this.roomTypes = await apiClient.get('/api/room-types')
-    },
-    async fetchGenderRestrictions() {
-      // API-Call, z.B. this.genderRestrictions = await apiClient.get('/api/gender-restrictions')
-    },
-    async fetchUserRights() {
-      // API-Call, z.B. this.userRights = await apiClient.get('/api/user-rights')
-    },
-    open(roomData) {
-      this.localRoom = roomData ? { ...roomData } : { title: '', isPublic: true };
-      this.dialog.open();
-    },
-    closeDialog() {
-      this.dialog.close();
-    },
-    save() {
-      this.$emit('save', this.localRoom);
-      this.closeDialog();
-    }
-  }
-}
-</script>
-<style scoped>
-.room-dialog-content {
-  padding: 16px;
-}
-.dialog-title {
-  font-weight: bold;
-  font-size: 1.2em;
-  margin-bottom: 12px;
-  display: block;
-}
-.dialog-fields > * {
-  margin-bottom: 8px;
-}
-.dialog-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 16px;
-}
-.save-btn, .cancel-btn {
-  padding: 6px 18px;
-  border: none;
-  border-radius: 3px;
-  background: #eee;
-  cursor: pointer;
-}
-.save-btn {
-  background: #1976d2;
-  color: #fff;
-}
-.cancel-btn {
-  background: #eee;
-  color: #333;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/views/admin/RoomsView.vue b/frontend/src/views/admin/RoomsView.vue
new file mode 100644
index 0000000..75f8f85
--- /dev/null
+++ b/frontend/src/views/admin/RoomsView.vue
@@ -0,0 +1,113 @@
+<template>
+    <div class="admin-chat-rooms">
+        <h2>{{ $t('admin.chatrooms.title') }}</h2>
+        <button class="create-btn" @click="openCreateDialog">{{ $t('admin.chatrooms.create') }}</button>
+        <table class="rooms-table">
+            <thead>
+                <tr>
+                    <th>{{ $t('admin.chatrooms.roomName') }}</th>
+                    <th>{{ $t('admin.chatrooms.type') }}</th>
+                    <th>{{ $t('admin.chatrooms.isPublic') }}</th>
+                    <th>{{ $t('admin.chatrooms.actions') }}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="room in rooms" :key="room.id">
+                    <td>{{ room.title }}</td>
+                    <td>{{ room.roomTypeTr || room.roomTypeId }}</td>
+                    <td>{{ room.isPublic ? $t('common.yes') : $t('common.no') }}</td>
+                    <td>
+                        <button @click="editRoom(room)">{{ $t('common.edit') }}</button>
+                        <button @click="deleteRoom(room)">{{ $t('common.delete') }}</button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    <RoomDialog ref="roomDialog" :room="selectedRoom" @save="saveRoom" />
+    <ChooseDialog ref="chooseDialog" />
+    </div>
+</template>
+
+<script>
+import RoomDialog from '@/dialogues/admin/RoomDialog.vue';
+import ChooseDialog from '@/dialogues/standard/ChooseDialog.vue';
+import apiClient from '@/utils/axios.js';
+
+export default {
+    name: 'RoomsView',
+    components: { RoomDialog, ChooseDialog },
+    data() {
+        return {
+            rooms: [],
+            selectedRoom: null,
+        }
+    },
+    mounted() {
+        this.fetchRooms();
+    },
+    methods: {
+        openCreateDialog() {
+            this.selectedRoom = null;
+            this.$refs.roomDialog.open();
+        },
+        editRoom(room) {
+            this.selectedRoom = { ...room };
+            this.$refs.roomDialog.open(this.selectedRoom);
+        },
+        async deleteRoom(room) {
+            if (!room.id) return;
+            const confirmed = await this.$refs.chooseDialog.open({
+                title: this.$t('common.confirm'),
+                message: this.$t('admin.chatrooms.confirmDelete')
+            });
+            if (!confirmed) return;
+            await apiClient.delete(`/api/admin/chat/rooms/${room.id}`);
+            this.fetchRooms();
+        },
+        async fetchRooms() {
+            const res = await apiClient.get('/api/admin/chat/rooms');
+            this.rooms = res.data;
+        },
+        async saveRoom(roomData) {
+            // Remove forbidden and associated object fields before sending to backend
+            const { id, ownerId, passwordHash, roomType, genderRestriction, ...cleanData } = roomData;
+            if (roomData.id) {
+                await apiClient.put(`/api/admin/chat/rooms/${roomData.id}`, cleanData);
+            } else {
+                await apiClient.post('/api/admin/chat/rooms', cleanData);
+            }
+            this.fetchRooms();
+        },
+    },
+}
+</script>
+
+<style scoped>
+.admin-chat-rooms {
+    max-width: 900px;
+    margin: 0 auto;
+}
+.create-btn {
+    margin-bottom: 12px;
+    padding: 6px 18px;
+    border: none;
+    border-radius: 3px;
+    background: #1976d2;
+    color: #fff;
+    cursor: pointer;
+}
+.rooms-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+.rooms-table th, .rooms-table td {
+    border: 1px solid #ddd;
+    padding: 8px;
+}
+.rooms-table th {
+    background: #f5f5f5;
+}
+.rooms-table td button {
+    margin-right: 6px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/home/NoLoginView.vue b/frontend/src/views/home/NoLoginView.vue
index 70b7c2d..b899fe8 100644
--- a/frontend/src/views/home/NoLoginView.vue
+++ b/frontend/src/views/home/NoLoginView.vue
@@ -68,13 +68,16 @@ export default {
     methods: {
         ...mapActions(['login']),
         openRandomChat() {
-            this.$refs.randomChatDialog.open();
+            const dlg = this.$refs.randomChatDialog;
+            if (dlg && typeof dlg.open === 'function') dlg.open();
         },
         openRegisterDialog() {
-            this.$refs.registerDialog.open();
+            const dlg = this.$refs.registerDialog;
+            if (dlg && typeof dlg.open === 'function') dlg.open();
         },
         openPasswordResetDialog() {
-            this.$refs.passwordResetDialog.open();
+            const dlg = this.$refs.passwordResetDialog;
+            if (dlg && typeof dlg.open === 'function') dlg.open();
         },
         focusPassword() {
             this.$refs.passwordInput.focus();
diff --git a/frontend/src/views/social/DiaryView.vue b/frontend/src/views/social/DiaryView.vue
index dd576f1..37ddf08 100644
--- a/frontend/src/views/social/DiaryView.vue
+++ b/frontend/src/views/social/DiaryView.vue
@@ -14,7 +14,7 @@
     <div v-if="diaryEntries.length === 0">{{ $t('socialnetwork.diary.noEntries') }}</div>
     <div v-else class="diary-entries">
         <div v-for="entry in diaryEntries" :key="entry.id" class="diary-entry">
-            <p v-html="entry.text"></p>
+            <p v-html="sanitizedText(entry)"></p>
             <div class="entry-info">
                 <span class="entry-timestamp">{{ new Date(entry.createdAt).toLocaleString() }}</span>
                 <span class="entry-actions">
@@ -39,6 +39,7 @@
 import { mapGetters } from 'vuex';
 import apiClient from '@/utils/axios.js';
 import ChooseDialog from "@/dialogues/standard/ChooseDialog.vue";
+import DOMPurify from 'dompurify';
 
 export default {
     name: 'DiaryView',
@@ -59,6 +60,9 @@ export default {
         ...mapGetters(['user']),
     },
     methods: {
+        sanitizedText(entry) {
+            return DOMPurify.sanitize(entry.text);
+        },
         async loadDiaryEntries(page) {
             try {
                 console.log(page);
diff --git a/frontend/src/views/social/ForumTopicView.vue b/frontend/src/views/social/ForumTopicView.vue
index d815a9f..d1748ac 100644
--- a/frontend/src/views/social/ForumTopicView.vue
+++ b/frontend/src/views/social/ForumTopicView.vue
@@ -3,7 +3,7 @@
     <h3 v-if="forumTopic">{{ forumTopic }}</h3>
     <ul class="messages">
         <li v-for="message in messages" :key="message.id">
-            <div v-html="message.text"></div>
+            <div v-html="sanitizedMessage(message)"></div>
             <div class="footer">
                 <span class="link" @click="openProfile(message.lastMessageUser.hashedId)">
                     {{ message.lastMessageUser.username }}
@@ -23,6 +23,7 @@
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import apiClient from '../../utils/axios'
+import DOMPurify from 'dompurify'
 
 export default {
     name: 'ForumTopicView',
@@ -87,6 +88,9 @@ export default {
         },
         openForum() {
             this.$router.push(`/socialnetwork/forum/${this.forumId}`);
+        },
+        sanitizedMessage(message) {
+            return DOMPurify.sanitize(message.text);
         }
     }
 }
diff --git a/frontend/src/views/social/GuestbookView.vue b/frontend/src/views/social/GuestbookView.vue
index d5b161f..616b2f3 100644
--- a/frontend/src/views/social/GuestbookView.vue
+++ b/frontend/src/views/social/GuestbookView.vue
@@ -7,7 +7,7 @@
             <div v-for="entry in guestbookEntries" :key="entry.id" class="guestbook-entry">
                 <img v-if="entry.image" :src="entry.image.url" alt="Entry Image"
                     style="max-width: 400px; max-height: 400px;" />
-                <p v-html="entry.contentHtml"></p>
+                <p v-html="sanitizedContent(entry)"></p>
                 <div class="entry-info">
                     <span class="entry-timestamp">{{ new Date(entry.createdAt).toLocaleString() }}</span>
                     <span class="entry-user">
@@ -30,6 +30,7 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import apiClient from '@/utils/axios.js';
+import DOMPurify from 'dompurify';
 
 export default {
     name: 'GuestbookView',
@@ -73,6 +74,9 @@ export default {
                 console.error('Error fetching image:', error);
             }
         },
+        sanitizedContent(entry) {
+            return DOMPurify.sanitize(entry.contentHtml);
+        },
     },
     mounted() {
         this.loadGuestbookEntries(1);
diff --git a/outputs/generated/000000_985862166_ddim50_PS7.5_13_years_old_red_haired_girl_in_puberty_with_violet_eyes_and_a_lot_of_freckles_on_face_and_chest_stays_on_beach_of_a_lake_and_wash_[generated].jpg b/outputs/generated/000000_985862166_ddim50_PS7.5_13_years_old_red_haired_girl_in_puberty_with_violet_eyes_and_a_lot_of_freckles_on_face_and_chest_stays_on_beach_of_a_lake_and_wash_[generated].jpg
deleted file mode 100644
index 3079013..0000000
Binary files a/outputs/generated/000000_985862166_ddim50_PS7.5_13_years_old_red_haired_girl_in_puberty_with_violet_eyes_and_a_lot_of_freckles_on_face_and_chest_stays_on_beach_of_a_lake_and_wash_[generated].jpg and /dev/null differ
diff --git a/package-lock.json b/package-lock.json
index 93a892e..8778141 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,23 +9,21 @@
             "version": "3.0.0-pre-alpha.0.1",
             "dependencies": {
                 "cors": "^2.8.5",
+                "dompurify": "^3.2.6",
                 "sequelize-cli": "^6.6.2"
             },
             "devDependencies": {
                 "concurrently": "^7.0.0",
-                "nodemon": "^2.0.15",
+                "nodemon": "^3.1.10",
                 "npm-run-all": "^4.1.5"
             }
         },
         "node_modules/@babel/runtime": {
-            "version": "7.26.0",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
-            "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
+            "version": "7.28.2",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.2.tgz",
+            "integrity": "sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==",
             "dev": true,
             "license": "MIT",
-            "dependencies": {
-                "regenerator-runtime": "^0.14.0"
-            },
             "engines": {
                 "node": ">=6.9.0"
             }
@@ -63,6 +61,13 @@
                 "node": ">=14"
             }
         },
+        "node_modules/@types/trusted-types": {
+            "version": "2.0.7",
+            "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+            "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+            "license": "MIT",
+            "optional": true
+        },
         "node_modules/abbrev": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
@@ -204,9 +209,9 @@
             "license": "MIT"
         },
         "node_modules/brace-expansion": {
-            "version": "1.1.11",
-            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-            "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+            "version": "1.1.12",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+            "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -582,13 +587,21 @@
             }
         },
         "node_modules/debug": {
-            "version": "3.2.7",
-            "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-            "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+            "version": "4.4.1",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+            "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "ms": "^2.1.1"
+                "ms": "^2.1.3"
+            },
+            "engines": {
+                "node": ">=6.0"
+            },
+            "peerDependenciesMeta": {
+                "supports-color": {
+                    "optional": true
+                }
             }
         },
         "node_modules/define-data-property": {
@@ -627,6 +640,15 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/dompurify": {
+            "version": "3.2.6",
+            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz",
+            "integrity": "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==",
+            "license": "(MPL-2.0 OR Apache-2.0)",
+            "optionalDependencies": {
+                "@types/trusted-types": "^2.0.7"
+            }
+        },
         "node_modules/eastasianwidth": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -652,9 +674,9 @@
             }
         },
         "node_modules/editorconfig/node_modules/brace-expansion": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-            "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+            "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
             "license": "MIT",
             "dependencies": {
                 "balanced-match": "^1.0.0"
@@ -1185,9 +1207,9 @@
             }
         },
         "node_modules/glob/node_modules/brace-expansion": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-            "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+            "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
             "license": "MIT",
             "dependencies": {
                 "balanced-match": "^1.0.0"
@@ -1849,19 +1871,19 @@
             "license": "MIT"
         },
         "node_modules/nodemon": {
-            "version": "2.0.22",
-            "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.22.tgz",
-            "integrity": "sha512-B8YqaKMmyuCO7BowF1Z1/mkPqLk6cs/l63Ojtd6otKjMx47Dq1utxfRxcavH1I7VSaL8n5BUaoutadnsX3AAVQ==",
+            "version": "3.1.10",
+            "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.10.tgz",
+            "integrity": "sha512-WDjw3pJ0/0jMFmyNDp3gvY2YizjLmmOUQo6DEBY+JgdvW/yQ9mEeSw6H5ythl5Ny2ytb7f9C2nIbjSxMNzbJXw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "chokidar": "^3.5.2",
-                "debug": "^3.2.7",
+                "debug": "^4",
                 "ignore-by-default": "^1.0.1",
                 "minimatch": "^3.1.2",
                 "pstree.remy": "^1.1.8",
-                "semver": "^5.7.1",
-                "simple-update-notifier": "^1.0.7",
+                "semver": "^7.5.3",
+                "simple-update-notifier": "^2.0.0",
                 "supports-color": "^5.5.0",
                 "touch": "^3.1.0",
                 "undefsafe": "^2.0.5"
@@ -1870,7 +1892,7 @@
                 "nodemon": "bin/nodemon.js"
             },
             "engines": {
-                "node": ">=8.10.0"
+                "node": ">=10"
             },
             "funding": {
                 "type": "opencollective",
@@ -1887,6 +1909,19 @@
                 "node": ">=4"
             }
         },
+        "node_modules/nodemon/node_modules/semver": {
+            "version": "7.7.2",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+            "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+            "dev": true,
+            "license": "ISC",
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
         "node_modules/nodemon/node_modules/supports-color": {
             "version": "5.5.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -2235,13 +2270,6 @@
                 "node": ">=8.10.0"
             }
         },
-        "node_modules/regenerator-runtime": {
-            "version": "0.14.1",
-            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-            "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/regexp.prototype.flags": {
             "version": "1.5.3",
             "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz",
@@ -2561,26 +2589,29 @@
             }
         },
         "node_modules/simple-update-notifier": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz",
-            "integrity": "sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==",
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+            "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "semver": "~7.0.0"
+                "semver": "^7.5.3"
             },
             "engines": {
-                "node": ">=8.10.0"
+                "node": ">=10"
             }
         },
         "node_modules/simple-update-notifier/node_modules/semver": {
-            "version": "7.0.0",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
-            "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+            "version": "7.7.2",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+            "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
             "dev": true,
             "license": "ISC",
             "bin": {
                 "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
             }
         },
         "node_modules/spawn-command": {
diff --git a/package.json b/package.json
index b055095..cd23069 100644
--- a/package.json
+++ b/package.json
@@ -11,11 +11,12 @@
     },
     "devDependencies": {
         "concurrently": "^7.0.0",
-        "nodemon": "^2.0.15",
+        "nodemon": "^3.1.10",
         "npm-run-all": "^4.1.5"
     },
     "dependencies": {
         "cors": "^2.8.5",
+        "dompurify": "^3.2.6",
         "sequelize-cli": "^6.6.2"
     }
 }