diff --git a/src/lib/components/ChatPanel.svelte b/src/lib/components/ChatPanel.svelte
index 6a41d0f..d3e80d0 100644
--- a/src/lib/components/ChatPanel.svelte
+++ b/src/lib/components/ChatPanel.svelte
@@ -833,15 +833,15 @@
 			{#each $messages as message, index}
 				<div class="message" class:user={message.role === 'user'} class:assistant={message.role === 'assistant'} class:system={message.role === 'system'} class:editing={editingMessageId === message.id} class:queued={message.queued}>
 					<div class="message-header">
-						<span class="message-role">
+						<span class="message-role" class:role-user={message.role === 'user'} class:role-assistant={message.role === 'assistant'} class:role-system={message.role === 'system'}>
 							{#if message.role === 'user' && message.queued}
-								⏳ Du (wartet)
+								<span class="role-dot queued"></span> Du <span class="role-tag">wartet</span>
 							{:else if message.role === 'user'}
-								👤 Du
+								<span class="role-dot user"></span> Du
 							{:else if message.role === 'assistant'}
-								🤖 {#if message.model}{message.model.replace('claude-', '').replace(/-\d{8}$/, '').replace(/(\D)-(\d)/g, '$1 $2').replace(/(\d)-(\d)/g, '$1.$2').replace(/\b[a-z]/g, c => c.toUpperCase())}{:else}Claude{/if}
+								<span class="role-dot assistant"></span> {#if message.model}{message.model.replace('claude-', '').replace(/-\d{8}$/, '').replace(/(\D)-(\d)/g, '$1 $2').replace(/(\d)-(\d)/g, '$1.$2').replace(/\b[a-z]/g, c => c.toUpperCase())}{:else}Claude{/if}
 							{:else}
-								⚙️ System
+								<span class="role-dot system"></span> System
 							{/if}
 						</span>
 						<div class="message-actions">
@@ -858,7 +858,7 @@
 								<button class="action-btn" onclick={() => openRememberDialog(message)} title="Das merken">💡</button>
 							{/if}
 							<span class="message-time">
-								{message.timestamp.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
+								{message.timestamp.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr
 							</span>
 						</div>
 					</div>
@@ -1229,6 +1229,49 @@
 	.message-role {
 		font-size: 0.7rem;
 		font-weight: 600;
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+	}
+
+	.role-dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		display: inline-block;
+		flex-shrink: 0;
+	}
+
+	.role-dot.user {
+		background: var(--accent, #6c8aff);
+	}
+
+	.role-dot.assistant {
+		background: #a78bfa;
+		box-shadow: 0 0 6px rgba(167, 139, 250, 0.4);
+	}
+
+	.role-dot.system {
+		background: var(--text-secondary, #888);
+	}
+
+	.role-dot.queued {
+		background: #f59e0b;
+		animation: pulse-dot 1.5s infinite;
+	}
+
+	@keyframes pulse-dot {
+		0%, 100% { opacity: 1; transform: scale(1); }
+		50% { opacity: 0.5; transform: scale(0.7); }
+	}
+
+	.role-tag {
+		font-size: 0.55rem;
+		padding: 0.1rem 0.35rem;
+		border-radius: 3px;
+		background: rgba(245, 158, 11, 0.15);
+		color: #f59e0b;
+		font-weight: 500;
 	}
 
 	.message-actions {
@@ -1260,6 +1303,8 @@
 	.message-time {
 		font-size: 0.6rem;
 		color: var(--text-secondary);
+		margin-left: 0.5rem;
+		font-variant-numeric: tabular-nums;
 	}
 
 	/* Edit-Modus */